@import url("base.css");
@import url("header.css");
@import url("components.css");
@import url("home.css");
@import url("catalog.css");
@import url("product.css");
@import url("contact.css");
@import url("footer.css");

/* ================= PREMIUM LINK ARROWS ================= */
.link-arrow,
.card-arrow,
.products-list .category-footer .arrow {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary, #082f5f);
  color: #fff;
  box-shadow: 0 7px 16px rgba(8, 47, 95, 0.16);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.link-arrow::before,
.card-arrow::before,
.products-list .category-footer .arrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-1px) rotate(45deg);
}

.link-arrow-small {
  width: 28px;
  height: 28px;
}

.hero-btn,
.view-all-link,
.featured-link {
  display: inline-flex !important;
  align-items: center;
  gap: 11px;
}

.hero-btn .link-arrow {
  width: 34px;
  height: 34px;
}

.hero-btn .link-arrow::before {
  width: 8px;
  height: 8px;
}

.hero-btn:hover .link-arrow,
.view-all-link:hover .link-arrow,
.home-featured-grid a:hover .link-arrow,
.fastener-category-card:hover .card-arrow,
.catalog-card:hover .card-arrow,
.products-list .category-card:hover .category-footer .arrow {
  transform: translateX(4px);
  background: #174d87;
  box-shadow: 0 9px 20px rgba(8, 47, 95, 0.24);
}

.featured-link {
  justify-content: space-between;
  width: 100%;
}

.view-all-link {
  justify-content: flex-end;
}

/* ================= REFINED LIGHT CARD ARROWS (V20) ================= */
.link-arrow,
.card-arrow,
.products-list .category-footer .arrow {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary, #082f5f);
  border: 1px solid #d7e2ef;
  box-shadow: 0 4px 12px rgba(8, 47, 95, 0.07);
}

.link-arrow::before,
.card-arrow::before,
.products-list .category-footer .arrow::before {
  width: 6px;
  height: 6px;
  border-top-width: 1.75px;
  border-right-width: 1.75px;
  transform: translateX(-1px) rotate(45deg);
}

.link-arrow-small {
  width: 27px;
  height: 27px;
}

.hero-btn .link-arrow {
  width: 30px;
  height: 30px;
}

.hero-btn:hover .link-arrow,
.view-all-link:hover .link-arrow,
.home-featured-grid a:hover .link-arrow,
.fastener-category-card:hover .card-arrow,
.catalog-card:hover .card-arrow,
.products-list .category-card:hover .category-footer .arrow {
  transform: translateX(3px);
  background: #edf4fc;
  color: var(--primary, #082f5f);
  border-color: #b9cce2;
  box-shadow: 0 6px 14px rgba(8, 47, 95, 0.11);
}

/* Keep all featured-product actions on one clean baseline. */
.home-featured-grid > a {
  display: flex;
  flex-direction: column;
}

.home-featured-grid h3 {
  min-height: 46px;
  margin-bottom: 12px;
}

.home-featured-grid .featured-link {
  width: 100%;
  margin-top: auto;
  min-height: 30px;
  align-items: center;
}

.home-featured-grid .featured-link > span:first-child,
.products-list .category-footer > span:first-child,
.card-footer > span:first-child {
  line-height: 1.2;
}

/* Make dynamic category and catalogue footers consistently aligned. */
.products-list .category-footer,
.fastener-category-card .card-footer,
.catalog-card .card-footer {
  min-height: 46px;
  align-items: center;
}

.card-footer .card-arrow {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary, #082f5f);
  border: 1px solid #d7e2ef;
}


/* New power tool image sizing and alignment */
.product-cordless-concrete-nailer .catalog-image img,
.product-5-line-green-laser-level .catalog-image img,
.product-12-line-3d-green-laser-level .catalog-image img,
.product-cordless-metal-cutting-saw .catalog-image img,
.product-power-cutter .catalog-image img,
.product-cordless-core-drill .catalog-image img,
.product-cordless-concrete-vibrator .catalog-image img,
.product-cordless-electric-punching-tool .catalog-image img,
.product-cordless-hydraulic-punching-tool .catalog-image img,
.product-cordless-hydraulic-cable-cutter .catalog-image img,
.product-cordless-pressure-washer .catalog-image img,
.product-cordless-submersible-water-pump .catalog-image img,
.product-cordless-grass-trimmer .catalog-image img {
  width: 90% !important;
  height: 90% !important;
  max-width: 360px !important;
  max-height: 250px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: auto !important;
  display: block !important;
}

.catalog-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ================= DONGCHENG CATALOGUE ================= */
.catalogue-card-featured {
  border: 1px solid rgba(16, 101, 178, .24);
  background: linear-gradient(160deg, #ffffff 0%, #edf6ff 100%);
  box-shadow: 0 18px 44px rgba(12, 59, 111, .12);
}
.catalogue-card-featured .catalog-image { background: #e8f3ff; overflow: hidden; }
.catalogue-card-featured .catalog-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.catalogue-card-featured h3 { color: #075ca7; }
.catalogue-badge { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: #dceeff; color: #075ca7; font-size: 12px; font-weight: 800; }
.catalogue-viewer-page { padding: 60px max(24px, calc((100vw - 1280px)/2)) 80px; background: #f4f7fb; }
.catalogue-viewer-hero { display: grid; grid-template-columns: 350px 1fr; gap: 58px; align-items: center; padding: 44px; border-radius: 30px; background: linear-gradient(135deg,#062f63,#0871ba); color:#fff; box-shadow:0 24px 70px rgba(5,48,99,.18); }
.catalogue-viewer-cover { border-radius: 20px; overflow:hidden; box-shadow:0 22px 44px rgba(0,0,0,.25); aspect-ratio: 3/4; background:#fff; }
.catalogue-viewer-cover img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.catalogue-viewer-eyebrow { display:inline-flex; padding:8px 13px; border:1px solid rgba(255,255,255,.22); border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.08em; }
.catalogue-viewer-intro h1 { margin:20px 0 16px; font-size:clamp(38px,5vw,64px); line-height:1.05; }
.catalogue-viewer-intro>p { max-width:720px; color:rgba(255,255,255,.82); font-size:17px; line-height:1.7; }
.catalogue-viewer-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.catalogue-primary-btn,.catalogue-secondary-btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:12px; font-weight:800; text-decoration:none; }
.catalogue-primary-btn { background:#fff; color:#073868; }
.catalogue-secondary-btn { border:1px solid rgba(255,255,255,.34); color:#fff; background:rgba(255,255,255,.06); }
.catalogue-mobile-note { margin-top:16px; font-size:13px!important; color:rgba(255,255,255,.62)!important; }
.catalogue-pdf-section { margin-top:38px; padding:28px; border-radius:24px; background:#fff; box-shadow:0 14px 40px rgba(18,50,83,.09); }
.catalogue-pdf-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
.catalogue-pdf-heading span { color:#1476bd; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.catalogue-pdf-heading h2 { margin:4px 0 0; color:#082f5c; }
.catalogue-pdf-heading a { color:#0d65a8; font-weight:700; }
.catalogue-pdf-section iframe { width:100%; height:min(82vh,1000px); border:1px solid #dce5ef; border-radius:16px; background:#eef3f8; }
.catalogue-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.catalogue-switcher a {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid #dce6f1;
  border-radius: 16px;
  background: #fff;
  color: #173b6b;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(18,50,83,.06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.catalogue-switcher a:hover,
.catalogue-switcher a.active {
  transform: translateY(-2px);
  border-color: #7eb5e3;
  box-shadow: 0 12px 28px rgba(18,50,83,.11);
}
.catalogue-switcher a.active { background: #edf6ff; }
.catalogue-switcher img {
  width: 58px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  object-position: top center;
}
.catalogue-pdf-mobile-preview { display: none; }
.catalogue-pdf-mobile-preview[hidden] { display: none !important; }
@media(max-width:800px){
  .catalogue-viewer-page{padding:24px 16px 50px;}
  .catalogue-viewer-hero{grid-template-columns:1fr; gap:26px; padding:24px; border-radius:24px;}
  .catalogue-viewer-cover{width:min(72vw,330px); margin:auto;}
  .catalogue-viewer-intro{text-align:center;}
  .catalogue-viewer-actions{justify-content:center;}
  .catalogue-pdf-section{padding:16px; border-radius:18px;}
  .catalogue-pdf-heading{align-items:flex-start; flex-direction:column;}
  .catalogue-switcher { grid-template-columns: 1fr; gap: 10px; }
  .catalogue-switcher a { grid-template-columns: 46px minmax(0, 1fr); min-height: 62px; }
  .catalogue-switcher img { width: 46px; height: 52px; }
  .catalogue-pdf-section iframe{display:none;}
  .catalogue-pdf-mobile-preview {
    display: grid;
    grid-template-columns: minmax(100px, 38%) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid #d9e5f1;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fbff, #edf5fc);
    color: #173b6b;
    text-decoration: none;
  }
  .catalogue-preview-page {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(8,47,95,.16);
  }
  .catalogue-preview-page img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
  .catalogue-preview-copy { display:flex; min-width:0; flex-direction:column; gap:8px; }
  .catalogue-preview-copy strong { font-size:18px; line-height:1.2; }
  .catalogue-preview-copy > span { color:#687f99; font-size:13px; }
  .catalogue-preview-copy .catalogue-preview-action { color:#1265a9; font-weight:800; }
}


/* Dongcheng catalogue placeholder */
.catalogue-coming-soon {
  min-height: 420px;
  padding: 70px 28px;
  border: 1px dashed rgba(22, 79, 139, 0.32);
  border-radius: 26px;
  background: linear-gradient(145deg, #f7fbff, #edf5fc);
  text-align: center;
}
.catalogue-coming-soon-icon {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 22px;
  border-radius: 24px;
  background: #0b4e91;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 16px 35px rgba(11, 78, 145, 0.22);
}
.catalogue-coming-soon h3 {
  margin: 0 0 12px;
  color: #113b69;
  font-size: 30px;
}
.catalogue-coming-soon p {
  max-width: 680px;
  margin: 0 auto 26px;
  color: #5d7188;
  line-height: 1.7;
}
.catalogue-coming-soon code {
  padding: 3px 7px;
  border-radius: 6px;
  background: #dfeaf5;
}
.catalogue-primary-btn.is-disabled {
  opacity: .82;
}


/* CATALOGUE COVER IMAGE SAFETY */
.catalogue-card-featured .catalog-image { display:flex !important; align-items:center !important; justify-content:center !important; }
.catalogue-card-featured .catalog-image img { object-fit:contain !important; object-position:center !important; margin:auto !important; }

/* Aquadapt has generous transparent margins in the supplied artwork. Scale
   only its rendered image so it reads at the same visual size as neighbouring
   products while preserving the original file and aspect ratio. */
img[src$="aquadapt.webp"] {
  scale: 1.28;
  transform-origin: center;
}

/* =========================================================
   Shared top-level page hero — LK Fastener design system
   Products, Projects, About and Contact use one composition.
   ========================================================= */
.page-hero {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 72px 24px 64px;
  text-align: center;
}

.page-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 20px;
  border: 1px solid #c9daf0;
  border-radius: 999px;
  background: #e9f1fb;
  color: #1767b4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 22px 0 18px;
  color: #173b6b;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.page-hero p {
  max-width: 900px;
  margin: 0 auto;
  color: #6e87a9;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.65;
}

/* Neutralise page-specific hero rules so the shared system wins. */
.products-hero,
.projects-hero,
.contact-hero,
.about-page-hero {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 72px 24px 64px;
  text-align: center;
}

.about-hero-text h2 {
  margin: 0 0 20px;
  color: #173b6b;
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

@media (max-width: 768px) {
  .page-hero,
  .products-hero,
  .projects-hero,
  .contact-hero,
  .about-page-hero {
    padding: 46px 20px 42px;
  }

  .page-hero-badge {
    min-height: 34px;
    padding: 7px 15px;
    font-size: 11px;
  }

  .page-hero h1 {
    margin: 17px 0 13px;
    font-size: clamp(38px, 11vw, 50px);
  }

  .page-hero p {
    font-size: 16px;
    line-height: 1.55;
  }
}

/* =========================================================
   v3.3 DESIGN SYSTEM — TOP-LEVEL PAGE CONSISTENCY
   Products is the master reference for Projects, About, Contact.
   ========================================================= */
:root {
  --ds-primary: #173b6b;
  --ds-primary-strong: #0b2f5f;
  --ds-accent: #1767b4;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f6f8fb;
  --ds-border: #dfe8f3;
  --ds-muted: #6e87a9;
  --ds-radius-sm: 12px;
  --ds-radius-card: 20px;
  --ds-shadow-card: 0 10px 30px rgba(15, 49, 91, 0.07);
  --ds-transition: 220ms ease;
}

/* Let the hero span consistently while keeping page content constrained. */
.products-page,
.projects-page,
.contact-page,
.about-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 24px 88px;
}

.page-hero,
.products-hero.page-hero,
.projects-hero.page-hero,
.contact-hero.page-hero,
.about-page-hero.page-hero {
  box-sizing: border-box;
  width: min(100%, 1180px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 58px;
  text-align: center;
}

.page-hero-badge,
.products-eyebrow,
.projects-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0;
  padding: 8px 20px;
  border: 1px solid #c9daf0;
  border-radius: 999px;
  background: #e9f1fb;
  color: var(--ds-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.page-hero h1,
.products-hero.page-hero h1,
.projects-hero.page-hero h1,
.contact-hero.page-hero h1,
.about-page-hero.page-hero h1 {
  margin: 22px 0 18px;
  color: var(--ds-primary);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.page-hero p,
.products-hero.page-hero p,
.projects-hero.page-hero p,
.contact-hero.page-hero p,
.about-page-hero.page-hero p {
  width: min(100%, 900px);
  max-width: 900px;
  margin: 0 auto;
  color: var(--ds-muted);
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.65;
}

/* Consistent separation between hero and first content block. */
.products-list,
.projects-list,
.contact-layout,
.about-hero-bento {
  width: min(100%, 1200px);
  margin-left: auto;
  margin-right: auto;
}
.projects-list,
.contact-layout,
.about-hero-bento { margin-top: 8px; }

/* Shared card language for primary top-level content. */
.projects-card,
.contact-info-card,
.quote-card,
.products-list .category-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
  transition: transform var(--ds-transition), box-shadow var(--ds-transition), border-color var(--ds-transition);
}

.projects-card:hover,
.products-list .category-card:hover {
  transform: translateY(-4px);
  border-color: #bfd3eb;
  box-shadow: 0 16px 38px rgba(15, 49, 91, .11);
}

/* Uniform simple footer treatment across all pages. */
body > footer,
main + footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 768px) {
  .products-page,
  .projects-page,
  .contact-page,
  .about-page {
    padding: 0 16px 64px;
  }

  .page-hero,
  .products-hero.page-hero,
  .projects-hero.page-hero,
  .contact-hero.page-hero,
  .about-page-hero.page-hero {
    padding: 44px 12px 40px;
  }

  .page-hero-badge,
  .products-eyebrow,
  .projects-eyebrow {
    min-height: 34px;
    padding: 7px 15px;
    font-size: 11px;
  }

  .page-hero h1,
  .products-hero.page-hero h1,
  .projects-hero.page-hero h1,
  .contact-hero.page-hero h1,
  .about-page-hero.page-hero h1 {
    margin: 17px 0 13px;
    font-size: clamp(38px, 11vw, 50px);
  }

  .page-hero p,
  .products-hero.page-hero p,
  .projects-hero.page-hero p,
  .contact-hero.page-hero p,
  .about-page-hero.page-hero p {
    font-size: 16px;
    line-height: 1.55;
  }
}

/* =========================================================
   v3.3.2 — LOCKED COMPACT TOP-LEVEL HERO
   Approved reference: Products hero sizing.
   Applies identically to Products, Projects, About and Contact.
   Do not enlarge these heroes in page-specific styles.
   ========================================================= */
@media (min-width: 769px) {
  .products-page,
  .projects-page,
  .about-page,
  .contact-page {
    width: min(1500px, calc(100% - 64px));
    max-width: none;
    margin: 0 auto;
    padding: 58px 0 96px;
  }

  .page-hero,
  .products-hero.page-hero,
  .projects-hero.page-hero,
  .about-page-hero.page-hero,
  .contact-hero.page-hero {
    box-sizing: border-box;
    width: 100%;
    max-width: 860px;
    margin: 0 auto 42px;
    padding: 0;
    text-align: center;
  }

  .page-hero-badge,
  .products-eyebrow,
  .projects-eyebrow,
  .products-hero .page-hero-badge,
  .projects-hero .page-hero-badge,
  .about-page-hero .page-hero-badge,
  .contact-hero .page-hero-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    min-height: 30px;
    margin: 0 0 13px;
    padding: 6px 13px;
    border: 1px solid rgba(20, 99, 185, 0.16);
    border-radius: 999px;
    background: rgba(229, 239, 252, 0.72);
    color: #2c5d96;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .page-hero h1,
  .products-hero.page-hero h1,
  .projects-hero.page-hero h1,
  .about-page-hero.page-hero h1,
  .contact-hero.page-hero h1 {
    margin: 0 0 12px;
    color: #173b6b;
    font-size: clamp(42px, 3vw, 54px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.035em;
  }

  .page-hero p,
  .products-hero.page-hero p,
  .projects-hero.page-hero p,
  .about-page-hero.page-hero p,
  .contact-hero.page-hero p {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    color: #63748c;
    font-size: 16px;
    line-height: 1.65;
  }
}

@media (max-width: 768px) {
  .products-page,
  .projects-page,
  .about-page,
  .contact-page {
    padding-top: 0;
  }

  .page-hero,
  .products-hero.page-hero,
  .projects-hero.page-hero,
  .about-page-hero.page-hero,
  .contact-hero.page-hero {
    width: 100%;
    max-width: 680px;
    margin: 0 auto 30px;
    padding: 38px 16px 30px;
    text-align: center;
  }

  .page-hero-badge,
  .products-eyebrow,
  .projects-eyebrow,
  .products-hero .page-hero-badge,
  .projects-hero .page-hero-badge,
  .about-page-hero .page-hero-badge,
  .contact-hero .page-hero-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    min-height: 28px;
    margin: 0 0 12px;
    padding: 6px 12px;
    font-size: 10px;
  }

  .page-hero h1,
  .products-hero.page-hero h1,
  .projects-hero.page-hero h1,
  .about-page-hero.page-hero h1,
  .contact-hero.page-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.08;
  }

  .page-hero p,
  .products-hero.page-hero p,
  .projects-hero.page-hero p,
  .about-page-hero.page-hero p,
  .contact-hero.page-hero p {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.55;
  }
}