:root {
  --page-max: 1672px;
  --navy: #062a5d;
  --orange: #ff5a00;
  --green: #0c8a2a;
  --focus: rgba(255, 106, 0, 0.55);
}
.mobile-home,
.menu-toggle { display: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f6f8fb;
  color: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: 9999;
  padding: 10px 14px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}
.skip-link:focus { left: 10px; }
.page {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 12px 45px rgba(6, 42, 93, 0.08);
}
.homepage-section {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: #fff;
  overflow: hidden;
}
.homepage-section > img.section-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  user-select: none;
}
.hotspot {
  position: absolute;
  z-index: 4;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
}
.hotspot:focus-visible,
.form-overlay input:focus-visible,
.form-overlay select:focus-visible,
.form-overlay textarea:focus-visible,
.form-overlay button:focus-visible,
.form-overlay a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.sr-only,
.semantic-content {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Fixed visual layout: all visible design remains as the supplied section images. */
.form-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  line-height: normal;
}
.form-overlay .field,
.form-overlay .submit-btn,
.form-overlay .attachment-notice,
.form-overlay .mail-fallback,
.form-overlay .wa-fallback {
  position: absolute;
  pointer-events: auto;
}
.form-overlay input,
.form-overlay select,
.form-overlay textarea {
  width: 100%;
  height: 100%;
  padding: 0 14px 0 46px;
  font: 16px/1.2 Arial, Helvetica, sans-serif;
  color: var(--navy);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  resize: none;
}
.form-overlay textarea {
  padding: 16px 18px;
}
.form-overlay select {
  color: transparent;
}
.form-overlay select.has-value,
.form-overlay select:focus {
  color: var(--navy);
}
.form-overlay input::placeholder,
.form-overlay textarea::placeholder {
  color: transparent;
}
.form-overlay .attachment-notice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 7px 16px;
  color: var(--navy);
  background: rgba(248, 250, 253, .98);
  border: 1px solid #d8e0eb;
  border-radius: 9px;
  font: 12px/1.25 Arial, Helvetica, sans-serif;
}
.form-overlay .attachment-notice strong {
  font-size: 13px;
}
.form-overlay .attachment-notice a {
  color: #f25a12;
  font-weight: 700;
  text-decoration: underline;
}
.form-overlay .submit-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 10px;
}
/* Section 8 overlay coordinates are based on the original 1586x992 design. */
#rfq-form [name="name"] { padding-left: 54px; }
@media (max-width: 900px) {
  .form-overlay input,
  .form-overlay select,
  .form-overlay textarea { font-size: 12px; }
}

/* Mobile homepage v1.4: desktop image-composite homepage remains untouched. */
@media (max-width: 900px) {
  body:not(.products-page) > .page { display: none; }
  .mobile-home { display: block; background: #fff; color: var(--navy); }
  .mobile-home main { width: 100%; overflow: hidden; }
  .mobile-home-header { position: sticky; top: 0; z-index: 1000; }

  .menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    border: 1px solid #d9e2ee;
    border-radius: 10px;
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-header .nav-bar,
  body.products-page .nav-bar {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
  }
  .site-header .nav-links,
  body.products-page .nav-links {
    display: none;
    order: 4;
    width: 100%;
    padding: 8px 0 4px;
    margin: 0;
    overflow: visible;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #e6edf5;
  }
  .site-header .nav-links.is-open,
  body.products-page .nav-links.is-open { display: flex; }
  .site-header .nav-links a,
  body.products-page .nav-links a {
    width: 100%;
    min-height: 44px;
    padding: 12px 2px;
    border-bottom: 1px solid #edf2f7;
  }
  .site-header .nav-links a::after,
  body.products-page .nav-links a::after { display: none; }
  .site-header .nav-cta,
  body.products-page .nav-cta {
    display: none;
  }

  .mobile-hero {
    padding: 44px 20px 34px;
    background: linear-gradient(145deg, #f7fbff 0%, #eef5fb 68%, #fff 68%);
  }
  .mobile-hero h1 {
    margin: 13px 0 18px;
    font-size: clamp(38px, 11.5vw, 54px);
    line-height: .98;
    letter-spacing: -.045em;
  }
  .mobile-hero-copy > p:not(.eyebrow) {
    margin: 0;
    color: #485c78;
    font-size: 18px;
    line-height: 1.56;
  }
  .mobile-hero .hero-actions { display: grid; gap: 12px; margin: 26px 0 28px; }
  .mobile-hero .btn { min-height: 50px; justify-content: center; }
  .mobile-hero-products {
    aspect-ratio: auto;
    position: relative;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(6, 42, 93, .12);
    overflow: hidden;
  }
  .mobile-hero-products img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .mobile-section { padding: 54px 20px; }
  .mobile-section:nth-child(even) { background: #f6f8fb; }
  .mobile-section h2 {
    margin: 10px 0 18px;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -.035em;
  }
  .mobile-section > p:not(.eyebrow):not(.mobile-moq) {
    margin: 0 0 24px;
    color: #526177;
    font-size: 17px;
    line-height: 1.58;
  }
  .mobile-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .mobile-category-grid a {
    min-width: 0;
    padding: 14px 12px 16px;
    color: var(--navy);
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(6,42,93,.06);
  }
  .mobile-category-grid img {
    width: 100%;
    height: 118px;
    object-fit: contain;
    mix-blend-mode: multiply;
  }
  .mobile-category-grid strong,
  .mobile-category-grid span { display: block; }
  .mobile-category-grid strong { font-size: 16px; line-height: 1.18; }
  .mobile-category-grid span { margin-top: 5px; color: #68768c; font-size: 12px; line-height: 1.3; }

  .mobile-wide-image {
    display: block;
    width: 100%;
    height: 220px;
    margin: 0 0 26px;
    object-fit: cover;
    border-radius: 20px;
  }
  .mobile-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
  }
  .mobile-stat-grid div {
    min-height: 108px;
    padding: 18px 15px;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
  }
  .mobile-stat-grid strong,
  .mobile-stat-grid span { display: block; }
  .mobile-stat-grid strong { font-size: 24px; letter-spacing: -.02em; }
  .mobile-stat-grid span { margin-top: 8px; color: #617087; font-size: 13px; font-weight: 700; }
  .mobile-feature-list { display: grid; gap: 10px; margin: 0 0 22px; }
  .mobile-feature-list span { position: relative; padding-left: 28px; color: #263f63; font-weight: 700; }
  .mobile-feature-list span::before { content: "✓"; position: absolute; left: 0; color: #0f8b35; }

  .mobile-product-list { display: grid; gap: 14px; margin: 24px 0; }
  .mobile-product-list article {
    display: grid;
    grid-template-columns: 124px 1fr;
    gap: 16px;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 18px;
    box-shadow: 0 9px 24px rgba(6,42,93,.06);
  }
  .mobile-product-list img { width: 124px; height: 145px; object-fit: contain; mix-blend-mode: multiply; }
  .mobile-product-list span { color: #718096; font-size: 12px; font-weight: 800; text-transform: uppercase; }
  .mobile-product-list h3 { margin: 5px 0; font-size: 24px; }
  .mobile-product-list p { margin: 0 0 12px; color: #526177; font-size: 14px; line-height: 1.4; }
  .mobile-product-list a { color: var(--orange); font-size: 14px; font-weight: 900; text-decoration: none; }
  .mobile-full-btn { width: 100%; min-height: 50px; justify-content: center; }

  .mobile-oem { background: #062a5d !important; color: #fff; }
  .mobile-oem .eyebrow { color: #fff; background: rgba(255,255,255,.12); }
  .mobile-oem > p:not(.eyebrow):not(.mobile-moq) { color: #d8e3f3; }
  .mobile-oem-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
  .mobile-oem-steps span { padding: 13px 12px; background: rgba(255,255,255,.09); border-radius: 10px; font-size: 14px; font-weight: 800; }
  .mobile-moq { margin: 0 0 24px; padding: 14px 16px; color: #fff; background: rgba(31,195,74,.18); border: 1px solid rgba(97,226,126,.4); border-radius: 12px; }

  .mobile-resource-grid { display: grid; gap: 12px; }
  .mobile-resource-grid a {
    display: block;
    min-height: 76px;
    padding: 17px 18px;
    color: var(--navy);
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 900;
    text-decoration: none;
  }
  .mobile-resource-grid span { display: block; margin-top: 5px; color: #6b788b; font-size: 13px; font-weight: 400; }
  .mobile-contact-actions { display: grid; gap: 10px; margin-bottom: 24px; }
  .mobile-contact-actions a { padding: 14px 16px; color: var(--navy); background: #edf6ff; border-radius: 12px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
  .mobile-rfq-form { display: grid; gap: 16px; }
  .mobile-rfq-form label { display: grid; gap: 7px; color: var(--navy); font-size: 14px; font-weight: 800; }
  .mobile-rfq-form input,
  .mobile-rfq-form select,
  .mobile-rfq-form textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 13px;
    color: #152d51;
    background: #fff;
    border: 1px solid #cfd9e6;
    border-radius: 10px;
    font: 16px/1.35 Arial, Helvetica, sans-serif;
  }
  .mobile-rfq-form textarea { min-height: 132px; resize: vertical; }
  .mobile-rfq-form button { min-height: 52px; }
}

/* Mobile homepage v1.5: refined editorial treatment while the desktop artwork stays unchanged. */
@media (max-width: 900px) {
  .mobile-home {
    --mobile-ink: #062a5d;
    --mobile-blue: #0a3976;
    --mobile-pale: #f3f7fc;
    --mobile-line: rgba(6, 42, 93, .12);
    background: var(--mobile-pale);
  }
  .mobile-home main { background: var(--mobile-pale); }

  .mobile-home-header {
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(6, 42, 93, .08);
    box-shadow: 0 8px 28px rgba(6, 42, 93, .08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-hero {
    position: relative;
    isolation: isolate;
    padding: 42px 20px 44px;
    color: #fff;
    background:
      radial-gradient(circle at 100% 0%, rgba(46, 113, 181, .52), transparent 40%),
      linear-gradient(145deg, #041f47 0%, #073268 57%, #0a3d7c 100%);
    overflow: hidden;
  }
  .mobile-hero::before,
  .mobile-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
  }
  .mobile-hero::before { width: 280px; height: 280px; right: -150px; top: 120px; }
  .mobile-hero::after { width: 170px; height: 170px; right: -92px; top: 175px; }
  .mobile-hero .eyebrow {
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
  }
  .mobile-hero h1 {
    max-width: 700px;
    margin: 17px 0 17px;
    color: #fff;
    font-size: clamp(36px, 10.2vw, 48px);
    line-height: 1.01;
    letter-spacing: -.042em;
  }
  .mobile-hero h1::before {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin-bottom: 17px;
    background: var(--orange);
    border-radius: 99px;
  }
  .mobile-hero-copy > p:not(.eyebrow) { color: #d8e4f2; font-size: 17px; line-height: 1.55; }
  .mobile-hero .hero-actions { grid-template-columns: 1fr 1fr; gap: 10px; margin: 25px 0 28px; }
  .mobile-hero .btn { padding-inline: 12px; font-size: 14px; }
  .mobile-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.04); }
  .mobile-hero-products {
    aspect-ratio: auto;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(226,238,249,.88));
    box-shadow: 0 24px 54px rgba(0, 12, 36, .34), 0 0 0 6px rgba(255,255,255,.08);
  }
  .mobile-hero-products::before {
    content: none;
  }
  .mobile-hero-products::after {
    content: none;
  }
  .mobile-hero-products img {
    height: auto;
    border-radius: 19px;
  }

  .mobile-section {
    position: relative;
    padding: 64px 20px;
    background: #fff;
    overflow: hidden;
  }
  .mobile-section:nth-child(even) { background: var(--mobile-pale); }
  .mobile-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6,42,93,.14), transparent);
  }
  .mobile-section h2 {
    max-width: 760px;
    margin: 12px 0 20px;
    font-size: clamp(31px, 8.6vw, 42px);
    line-height: 1.04;
  }
  .mobile-section .eyebrow.small {
    border: 1px solid rgba(12,138,42,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.52);
  }

  .mobile-categories { background: linear-gradient(180deg, #f7f9fc 0%, #eef4fa 100%) !important; }
  .mobile-category-grid { gap: 13px; }
  .mobile-category-grid a {
    position: relative;
    padding: 13px 13px 18px;
    border-color: rgba(6,42,93,.10);
    border-radius: 19px;
    box-shadow: 0 12px 30px rgba(6,42,93,.075);
    overflow: hidden;
  }
  .mobile-category-grid a::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--orange), #ff945b);
  }
  .mobile-category-grid a::after {
    content: "→";
    position: absolute;
    right: 13px;
    bottom: 15px;
    color: var(--orange);
    font-size: 16px;
    font-weight: 900;
  }
  .mobile-category-grid img { height: 126px; margin-bottom: 4px; }
  .mobile-category-grid strong { padding-right: 18px; font-size: 16px; }
  .mobile-category-grid span { padding-right: 18px; }

  .mobile-factory { background: #fff !important; }
  .mobile-factory .mobile-wide-image {
    height: 235px;
    margin-top: 28px;
    border: 6px solid #fff;
    box-shadow: 0 18px 42px rgba(6,42,93,.16);
  }
  .mobile-stat-grid { margin: -7px 0 28px; position: relative; z-index: 2; }
  .mobile-stat-grid div {
    min-height: 112px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #f6f9fc);
    box-shadow: 0 10px 28px rgba(6,42,93,.09), inset 0 0 0 1px rgba(6,42,93,.08);
  }
  .mobile-stat-grid strong { color: var(--mobile-blue); font-size: 26px; }
  .mobile-feature-list {
    gap: 0;
    padding: 5px 18px;
    background: #f5f8fc;
    border-left: 3px solid var(--green);
    border-radius: 0 14px 14px 0;
  }
  .mobile-feature-list span { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid rgba(6,42,93,.08); }
  .mobile-feature-list span:last-child { border-bottom: 0; }

  .mobile-featured { background: linear-gradient(180deg, #f0f5fb 0%, #f8fafc 100%) !important; }
  .mobile-product-list { gap: 16px; }
  .mobile-product-list article {
    position: relative;
    min-height: 184px;
    border: 0;
    border-radius: 21px;
    box-shadow: 0 14px 34px rgba(6,42,93,.10), inset 0 0 0 1px rgba(6,42,93,.09);
    overflow: hidden;
  }
  .mobile-product-list article::before {
    position: absolute;
    top: 13px;
    right: 15px;
    color: rgba(6,42,93,.16);
    font-size: 18px;
    font-weight: 900;
  }
  .mobile-product-list article:nth-child(1)::before { content: "01"; }
  .mobile-product-list article:nth-child(2)::before { content: "02"; }
  .mobile-product-list article:nth-child(3)::before { content: "03"; }
  .mobile-product-list img { padding: 7px; background: radial-gradient(circle, #f7f9fc 0%, #fff 70%); border-radius: 14px; }

  .mobile-oem {
    padding-top: 58px;
    color: #fff;
    background:
      radial-gradient(circle at 100% 15%, rgba(39,102,170,.48), transparent 34%),
      linear-gradient(155deg, #041e46 0%, #06336e 100%) !important;
  }
  .mobile-oem::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
  .mobile-oem-visual {
    width: 100%;
    margin: 0 0 32px;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 21px;
    box-shadow: 0 20px 46px rgba(0, 13, 39, .34);
    overflow: hidden;
  }
  .mobile-oem-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 15px;
  }
  .mobile-oem h2 { color: #fff; }
  .mobile-oem-steps { counter-reset: oem-step; gap: 11px; }
  .mobile-oem-steps span {
    position: relative;
    min-height: 58px;
    padding: 18px 11px 14px 42px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
  }
  .mobile-oem-steps span::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 17px;
    height: 17px;
    border: 2px solid #62ce80;
    border-radius: 50%;
    transform: translateY(-50%);
  }
  .mobile-moq { background: rgba(14,122,91,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }

  .mobile-resources { background: #f3f6fa !important; }
  .mobile-resource-grid { gap: 11px; }
  .mobile-resource-grid a {
    position: relative;
    min-height: 86px;
    padding: 18px 58px 18px 19px;
    border: 0;
    border-radius: 17px;
    box-shadow: 0 10px 28px rgba(6,42,93,.07), inset 0 0 0 1px rgba(6,42,93,.09);
  }
  .mobile-resource-grid a::after {
    content: "↗";
    position: absolute;
    right: 17px;
    top: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--orange);
    background: #fff3ec;
    border-radius: 50%;
    transform: translateY(-50%);
  }

  .mobile-rfq { background: #fff !important; }
  .mobile-contact-actions { grid-template-columns: 1fr; }
  .mobile-contact-actions a {
    border: 1px solid #d9e6f3;
    background: linear-gradient(145deg, #f4f9ff, #eaf3fc);
    box-shadow: 0 8px 20px rgba(6,42,93,.05);
  }
  .mobile-rfq-form {
    gap: 17px;
    padding: 20px;
    background: #f4f7fb;
    border: 1px solid rgba(6,42,93,.09);
    border-radius: 21px;
    box-shadow: 0 16px 40px rgba(6,42,93,.08);
  }
  .mobile-rfq-form input,
  .mobile-rfq-form select,
  .mobile-rfq-form textarea {
    border-color: #c9d5e2;
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(6,42,93,.035);
  }

  .floating-whatsapp {
    left: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    box-shadow: 0 8px 22px rgba(6,42,93,.22), 0 0 0 4px rgba(255,255,255,.78);
  }
  .floating-whatsapp svg { width: 24px; height: 24px; }
}

@media (max-width: 380px) {
  .mobile-category-grid { grid-template-columns: 1fr; }
  .mobile-product-list article { grid-template-columns: 104px 1fr; }
  .mobile-product-list img { width: 104px; height: 130px; }
}

/* Floating WhatsApp contact button: visual layout stays unchanged; this is the only added fixed UI element. */
.floating-whatsapp {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 999;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(6, 42, 93, 0.22);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.floating-whatsapp svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
  display: block;
}
.floating-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(6, 42, 93, 0.28);
  background: #20bd5a;
}
.floating-whatsapp:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .floating-whatsapp {
    left: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
  }
  .floating-whatsapp svg {
    width: 27px;
    height: 27px;
  }
}

/* Products page v1 */
.products-page {
  background: #f6f8fb;
  color: var(--navy);
  line-height: 1.5;
}
.products-page main,
.products-page .site-header {
  width: min(100%, var(--page-max));
  margin: 0 auto;
}
.site-header {
  background: #fff;
  box-shadow: 0 12px 36px rgba(6, 42, 93, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-strip {
  min-height: 38px;
  background: linear-gradient(90deg, #062a5d, #083a7e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.nav-bar {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 56px;
  background: #fff;
}
.brand img {
  display: block;
  width: 180px;
  max-height: 54px;
  object-fit: contain;
}


/* Inner pages: restore smaller BAREP logo size/position to match approved reference */
body.products-page .nav-bar {
  min-height: 90px;
}
body.products-page .brand {
  display: inline-flex;
  align-items: center;
}
body.products-page .brand img {
  width: 180px;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-weight: 700;
}
.nav-links a,
.nav-cta {
  color: var(--navy);
  text-decoration: none;
}
.nav-links a {
  position: relative;
  padding: 16px 0;
}
.nav-links a.active::after,
.nav-links a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 3px;
  border-radius: 2px;
  background: #1fc34a;
}
.nav-cta {
  background: var(--navy);
  color: #fff;
  padding: 15px 24px;
  border-radius: 8px;
  font-weight: 700;
}
.products-hero {
  margin: 0 auto;
  padding: 88px 56px 70px;
  background: linear-gradient(105deg, #fff 0%, #f4f8fc 55%, #eef5fb 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
  gap: 60px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e9f8ed;
  color: #0f7430;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.products-hero h1 {
  font-size: clamp(42px, 5.2vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  max-width: 980px;
}
.products-hero p:not(.eyebrow) {
  font-size: 22px;
  max-width: 760px;
  margin: 0 0 30px;
  color: #3e5171;
}
.hero-actions,
.cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 9px;
  font-weight: 800;
  text-decoration: none;
}
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 90, 0, 0.18);
}
.btn-outline {
  border: 2px solid var(--navy);
  color: var(--navy);
  background: #fff;
}
.products-hero__panel {
  display: grid;
  gap: 18px;
}
.mini-stat {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 18px 38px rgba(6, 42, 93, 0.08);
}
.mini-stat strong {
  display: block;
  font-size: 36px;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 8px;
}
.mini-stat span { color: #56657d; font-weight: 700; }
.product-filter {
  padding: 28px 56px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
}
.product-filter a {
  text-decoration: none;
  color: #0e7430;
  background: #e9f8ed;
  border: 1px solid #cce8d4;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
}
.product-page-intro {
  padding: 58px 56px 24px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
}
.product-page-intro h2 {
  margin: 0 0 8px;
  font-size: 44px;
  letter-spacing: -0.03em;
}
.product-page-intro p {
  margin: 0;
  max-width: 780px;
  color: #526177;
  font-size: 18px;
}
.text-link {
  color: var(--orange);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.product-grid {
  padding: 24px 56px 58px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.product-card {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(6, 42, 93, 0.07);
  display: flex;
  flex-direction: column;
  min-height: 560px;
}
.product-image {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: linear-gradient(180deg, #edf2f6 0%, #f4f7fa 100%);
  border-bottom: 1px solid #edf1f6;
}
.product-image::before {
  content: "";
  position: absolute;
  inset: 22px 32px;
  background: #ffffff;
  border: 1px solid #edf1f6;
  border-radius: 26px;
  box-shadow: 0 8px 20px rgba(9, 33, 76, 0.04);
}
.product-image img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 212px;
  max-width: calc(100% - 80px);
  max-height: 212px;
  object-fit: contain;
  display: block;
}
.product-image.image-dimmer img {
  height: 218px;
  max-height: 218px;
}
.product-image.image-wallplate img {
  height: 216px;
  max-height: 216px;
}
.product-info {
  padding: 24px 24px 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.product-info .category {
  color: #0f7430;
  font-weight: 800;
  font-size: 14px;
  margin: 0 0 6px;
}
.product-info h3 {
  font-size: 25px;
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.model,
.spec {
  margin: 0 0 8px;
  color: #193866;
  font-weight: 700;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.tags span {
  background: #e5f4e7;
  color: #0e6c2c;
  border: 1px solid #cce8d4;
  border-radius: 8px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 14px;
}
.cert {
  margin: auto 0 16px;
  font-weight: 800;
  color: var(--navy);
}
.cert::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  background: #1fc34a;
}
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.card-actions a {
  min-height: 40px;
  border: 1.5px solid var(--navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--navy);
  font-weight: 800;
  font-size: 14px;
}
.card-actions a:first-child {
  border: 0;
  color: var(--orange);
  justify-content: flex-start;
}
.product-cta {
  margin: 0 56px 72px;
  padding: 34px 42px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(6, 42, 93, 0.07);
}
.product-cta h2 {
  margin: 0 0 6px;
  font-size: 32px;
}
.product-cta p {
  margin: 0;
  color: #526177;
  font-size: 17px;
}
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products-hero { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .top-strip { display: none; }
  .nav-bar { padding: 16px 20px; flex-wrap: wrap; }
  .brand img { width: 138px; }
  .nav-links { width: 100%; overflow-x: auto; gap: 22px; order: 3; }
  .products-hero, .product-filter, .product-page-intro, .product-grid { padding-left: 20px; padding-right: 20px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-page-intro, .product-cta { display: block; }
  .product-cta { margin: 0 20px 48px; }
  .cta-actions { margin-top: 22px; }
}


.product-image {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: linear-gradient(180deg, #edf2f6 0%, #f4f7fa 100%);
  border-bottom: 1px solid #edf1f6;
}
.product-image::before {
  content: "";
  position: absolute;
  inset: 22px 32px;
  background: #ffffff;
  border: 1px solid #edf1f6;
  border-radius: 26px;
  box-shadow: 0 8px 20px rgba(9, 33, 76, 0.04);
}
.product-image img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 218px;
  max-width: calc(100% - 72px);
  max-height: 218px;
  object-fit: contain;
  display: block;
}


/* Full catalog product center styles */
.product-filter a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  font-size: 12px;
}
.product-filter a.active,
.product-filter a:hover {
  background: #0f7430;
  color: #fff;
  border-color: #0f7430;
}
.product-category-section {
  padding: 18px 56px 28px;
}
.category-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: 10px 0 20px;
  padding-top: 8px;
}
.category-heading h2 {
  margin: 0 0 6px;
  font-size: 38px;
  letter-spacing: -0.03em;
}
.category-heading p {
  margin: 0;
  color: #526177;
  max-width: 860px;
  font-size: 17px;
}
.eyebrow.small {
  font-size: 13px;
  padding: 6px 12px;
  margin-bottom: 12px;
}
.product-category-section .product-grid {
  padding: 0;
}
.badge-featured {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff3e9;
  color: #f35a00;
  border: 1px solid #ffd6bd;
  font-size: 12px;
  font-weight: 800;
}
.product-card[hidden],
.product-category-section[hidden] {
  display: none !important;
}
.product-card {
  position: relative;
}
.product-info .color {
  margin: 0 0 8px;
  color: #536276;
  font-weight: 700;
  font-size: 15px;
}
.cert-request::before { background: #8ea0b8; }
@media (max-width: 760px) {
  .product-category-section { padding-left: 20px; padding-right: 20px; }
  .category-heading { display: block; }
  .category-heading h2 { font-size: 30px; }
}


/* Product detail pages */
.detail-page main {
  width: min(100%, var(--page-max));
  margin: 0 auto;
}
.detail-hero {
  padding: 42px 56px 56px;
  background: linear-gradient(105deg, #fff 0%, #f4f8fc 55%, #eef5fb 100%);
}
.breadcrumb {
  color: #526177;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 26px;
}
.breadcrumb a {
  color: var(--navy);
  text-decoration: none;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr);
  gap: 54px;
  align-items: center;
}
.detail-media {
  background: #edf2f6;
  border: 1px solid #dfe7f1;
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 16px 34px rgba(6, 42, 93, 0.08);
}
.detail-image-frame {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #edf1f6;
  border-radius: 24px;
  padding: 34px;
}
.detail-image-frame img {
  width: auto;
  max-width: 100%;
  max-height: 470px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(6, 42, 93, 0.12));
}
.detail-original-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--orange);
  font-weight: 800;
  text-decoration: none;
}
.detail-summary h1 {
  margin: 0 0 12px;
  font-size: clamp(42px, 4.3vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.04em;
}
.detail-model,
.detail-spec {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: #193866;
}
.detail-description {
  max-width: 780px;
  margin: 18px 0 18px;
  font-size: 18px;
  color: #526177;
}
.detail-tags { margin: 18px 0 28px; }
.detail-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.detail-section {
  padding: 42px 56px 0;
}
.detail-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.detail-three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.detail-card {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 14px 35px rgba(6, 42, 93, 0.07);
}
.detail-card h2 {
  margin: 0 0 18px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.detail-card p,
.check-list {
  color: #526177;
  font-size: 17px;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.spec-table th,
.spec-table td {
  padding: 14px 0;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  width: 38%;
  color: #526177;
}
.spec-table td {
  color: var(--navy);
  font-weight: 800;
}
.check-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.check-list li {
  position: relative;
  padding-left: 26px;
  margin: 0 0 12px;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1fc34a;
  font-weight: 900;
}
.related-section {
  padding: 42px 56px 0;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.related-card {
  display: block;
  padding: 18px;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  text-decoration: none;
  color: var(--navy);
  box-shadow: 0 14px 35px rgba(6, 42, 93, 0.07);
}
.related-img {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf2f6;
  border-radius: 14px;
  margin-bottom: 14px;
}
.related-img img {
  max-width: 82%;
  max-height: 130px;
  object-fit: contain;
}
.related-card strong,
.related-card em {
  display: block;
  font-style: normal;
}
.related-card em {
  margin-top: 4px;
  color: #526177;
  font-size: 14px;
}
.detail-cta { margin-top: 42px; }
@media (max-width: 1100px) {
  .detail-grid,
  .detail-two-col,
  .detail-three-col { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .detail-hero,
  .detail-section,
  .related-section { padding-left: 20px; padding-right: 20px; }
  .detail-image-frame { min-height: 360px; }
  .detail-image-frame img { max-height: 320px; }
  .related-grid { grid-template-columns: 1fr; }
}

/* OEM & Private Label page */
.oem-page main {
  width: min(100%, var(--page-max));
  margin: 0 auto;
}
.oem-hero {
  padding: 70px 56px 62px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: 46px;
  align-items: center;
  background: linear-gradient(105deg, #ffffff 0%, #f4f8fc 54%, #eef5fb 100%);
}
.oem-hero h1 {
  margin: 0 0 22px;
  font-size: clamp(44px, 5.3vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.oem-hero p:not(.eyebrow) {
  margin: 0 0 28px;
  max-width: 760px;
  color: #3e5171;
  font-size: 21px;
}
.oem-hero__visual {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 18px 44px rgba(6, 42, 93, 0.10);
}
.oem-hero__visual img {
  display: block;
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}
.oem-section {
  padding: 66px 56px 0;
}
.section-head {
  margin: 0 0 30px;
}
.section-head h2 {
  margin: 0 0 10px;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.section-head p:not(.eyebrow) {
  margin: 0;
  max-width: 850px;
  color: #526177;
  font-size: 18px;
}
.inline-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
}
.oem-card-grid {
  display: grid;
  gap: 20px;
}
.oem-card-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oem-card-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.oem-card,
.buyer-card {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 14px 35px rgba(6, 42, 93, 0.07);
}
.oem-card h3,
.buyer-card h3 {
  margin: 12px 0 10px;
  font-size: 23px;
  letter-spacing: -0.02em;
}
.oem-card p,
.buyer-card p {
  margin: 0;
  color: #526177;
  font-size: 16px;
}
.oem-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9f8ed;
  color: #0f7430;
  font-size: 24px;
  font-weight: 900;
}
.oem-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.oem-process article {
  position: relative;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  padding: 28px 22px;
  min-height: 210px;
  box-shadow: 0 14px 35px rgba(6, 42, 93, 0.07);
}
.oem-process strong {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1fc34a;
  color: #fff;
  font-size: 18px;
}
.oem-process h3 {
  margin: 18px 0 8px;
  font-size: 22px;
}
.oem-process p {
  margin: 0;
  color: #526177;
  font-size: 15px;
}
.oem-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.oem-gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(6, 42, 93, 0.07);
}
.oem-gallery img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  background: #eef2f6;
}
.oem-gallery figcaption {
  padding: 16px 18px;
  color: var(--navy);
  font-weight: 800;
  font-size: 17px;
}
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.faq-list details {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 14px 35px rgba(6, 42, 93, 0.06);
}
.faq-list summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 900;
  font-size: 18px;
}
.faq-list p {
  margin: 14px 0 0;
  color: #526177;
  font-size: 16px;
}
.oem-final-cta {
  margin-top: 66px;
}
@media (max-width: 1200px) {
  .oem-hero { grid-template-columns: 1fr; }
  .oem-card-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oem-card-grid.five,
  .oem-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oem-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .oem-hero,
  .oem-section { padding-left: 20px; padding-right: 20px; }
  .oem-card-grid.six,
  .oem-card-grid.five,
  .oem-process,
  .oem-gallery,
  .faq-list { grid-template-columns: 1fr; }
  .inline-head { display: block; }
  .oem-gallery img { height: 230px; }
}


/* Factory & Quality page */
.factory-page main {
  width: min(100%, var(--page-max));
  margin: 0 auto;
}
.factory-hero {
  padding: 76px 56px 66px;
  background: linear-gradient(105deg, #ffffff 0%, #f4f8fc 56%, #edf5fb 100%);
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(520px, 1.02fr);
  gap: 56px;
  align-items: center;
}
.factory-hero h1 {
  font-size: clamp(44px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
}
.factory-hero p:not(.eyebrow) {
  color: #3e5171;
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 30px;
  max-width: 760px;
}
.factory-hero__visual {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 28px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(6,42,93,.10);
}
.factory-hero__visual img,
.factory-image-card img,
.factory-gallery img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.factory-hero__visual img {
  height: 420px;
  border-radius: 20px;
}
.factory-stats {
  padding: 30px 56px;
  background: #fff;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.factory-stat {
  background: #f8fafc;
  border: 1px solid #e4ebf4;
  border-radius: 20px;
  padding: 26px 26px;
}
.factory-stat strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 9px;
  color: var(--navy);
}
.factory-stat span {
  color: #56657d;
  font-weight: 800;
}
.factory-section {
  padding: 72px 56px;
  background: #fff;
}
.factory-section:nth-of-type(odd) {
  background: #f6f8fb;
}
.factory-section.two-col {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: 56px;
  align-items: center;
}
.factory-section.two-col.reverse {
  grid-template-columns: minmax(420px, 1.05fr) minmax(0, .95fr);
}
.factory-section h2 {
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.factory-section p {
  color: #526177;
  font-size: 18px;
  line-height: 1.62;
}
.factory-image-card {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 24px;
  padding: 14px;
  box-shadow: 0 14px 35px rgba(6,42,93,.08);
}
.factory-image-card img {
  height: 400px;
  border-radius: 17px;
}
.check-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.check-list li {
  position: relative;
  color: #193866;
  font-weight: 700;
  padding-left: 30px;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e9f8ed;
  color: #0f7430;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.section-head.center {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 36px;
}
.eyebrow.small {
  font-size: 13px;
  padding: 7px 12px;
  margin-bottom: 14px;
}
.factory-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.factory-gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(6,42,93,.07);
}
.factory-gallery img {
  height: 250px;
}
.factory-gallery figcaption {
  padding: 18px 20px;
  font-weight: 800;
  color: var(--navy);
  background: #fff;
}
.quality-process {
  background: #f6f8fb;
}
.process-grid,
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.process-step,
.advantage-grid > div {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 14px 35px rgba(6,42,93,.06);
}
.process-step span {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f8ed;
  color: #0f7430;
  font-weight: 900;
  margin-bottom: 18px;
}
.process-step h3,
.advantage-grid h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.15;
}
.process-step p,
.advantage-grid p {
  font-size: 16px;
  margin: 0;
}
.cert-note {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #dfe7f1;
}
.cert-note strong,
.cert-note span {
  display: block;
}
.cert-note strong {
  font-size: 19px;
  margin-bottom: 7px;
}
.cert-note span {
  color: #526177;
  line-height: 1.5;
}
.factory-rfq {
  margin-top: 0;
}
@media (max-width: 1200px) {
  .factory-hero,
  .factory-section.two-col,
  .factory-section.two-col.reverse {
    grid-template-columns: 1fr;
  }
  .factory-stats,
  .factory-gallery,
  .process-grid,
  .advantage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .factory-hero,
  .factory-section,
  .factory-stats {
    padding-left: 20px;
    padding-right: 20px;
  }
  .factory-stats,
  .factory-gallery,
  .process-grid,
  .advantage-grid {
    grid-template-columns: 1fr;
  }
  .factory-hero__visual img,
  .factory-image-card img,
  .factory-gallery img {
    height: auto;
    max-height: none;
  }
}


/* Resources & Certifications page */
.resources-page main {
  width: min(100%, var(--page-max));
  margin: 0 auto;
}
.resources-hero {
  padding: 78px 56px 70px;
  background: linear-gradient(105deg, #ffffff 0%, #f4f8fc 55%, #eef5fb 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: 56px;
  align-items: center;
}
.resources-hero h1 {
  font-size: clamp(44px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
}
.resources-hero p:not(.eyebrow) {
  color: #3e5171;
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 30px;
  max-width: 800px;
}
.resources-hero__panel {
  display: grid;
  gap: 18px;
}
.resources-hero__panel > div {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 22px;
  padding: 28px 30px;
  box-shadow: 0 18px 38px rgba(6,42,93,.08);
}
.resources-hero__panel strong {
  display: block;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--navy);
}
.resources-hero__panel span {
  color: #56657d;
  font-weight: 700;
}
.resources-section {
  padding: 72px 56px;
  background: #fff;
}
.resources-section:nth-of-type(odd) {
  background: #f6f8fb;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.resource-card {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 14px 35px rgba(6,42,93,.07);
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
.resource-card.featured {
  border-color: rgba(255,90,0,.28);
  box-shadow: 0 18px 42px rgba(255,90,0,.10);
}
.resource-icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #e9f8ed;
  color: #0f7430;
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 22px;
}
.resource-card.featured .resource-icon {
  background: #fff0e8;
  color: var(--orange);
}
.resource-card h3 {
  font-size: 25px;
  line-height: 1.1;
  margin: 0 0 12px;
}
.resource-card p {
  color: #526177;
  font-size: 16px;
  line-height: 1.56;
  margin: 0 0 20px;
}
.resource-card .btn,
.resource-card .text-link {
  margin-top: auto;
}
.document-policy {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: 54px;
  align-items: center;
}
.document-policy h2,
.resources-section h2 {
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.document-policy p,
.resources-section p {
  color: #526177;
  line-height: 1.62;
}
.policy-list {
  display: grid;
  gap: 16px;
}
.policy-list > div {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 12px 30px rgba(6,42,93,.06);
}
.policy-list span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f8ed;
  color: #0f7430;
  font-weight: 900;
  margin-right: 12px;
}
.policy-list strong {
  font-size: 19px;
}
.policy-list p {
  margin: 12px 0 0;
}
.resources-section.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .86fr);
  gap: 56px;
  align-items: center;
}
.resource-request-box {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 18px 42px rgba(6,42,93,.09);
}
.resource-request-box h3 {
  font-size: 32px;
  margin: 0 0 12px;
}
.request-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.faq-section {
  background: #f6f8fb;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.faq-grid details {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 12px 30px rgba(6,42,93,.05);
}
.faq-grid summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
}
.faq-grid details p {
  margin: 14px 0 0;
  font-size: 16px;
}
.resources-rfq {
  margin-top: 0;
}
@media (max-width: 1200px) {
  .resources-hero,
  .document-policy,
  .resources-section.two-col {
    grid-template-columns: 1fr;
  }
  .resource-grid,
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .resources-hero,
  .resources-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .resource-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
}


/* Contact / RFQ page */
.contact-page main {
  width: min(100%, var(--page-max));
  margin: 0 auto;
}
.contact-hero {
  padding: 78px 56px 70px;
  background: linear-gradient(105deg, #ffffff 0%, #f4f8fc 55%, #eef5fb 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: 56px;
  align-items: center;
}
.contact-hero h1 {
  font-size: clamp(44px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
}
.contact-hero p:not(.eyebrow) {
  color: #3e5171;
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 30px;
  max-width: 820px;
}
.contact-hero__cards {
  display: grid;
  gap: 18px;
}
.contact-hero__cards > div {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 18px 38px rgba(6,42,93,.08);
}
.contact-hero__cards span,
.contact-info-item span {
  display: block;
  color: #0f7430;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact-hero__cards strong {
  display: block;
  font-size: 24px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.contact-hero__cards a {
  color: var(--orange);
  font-weight: 900;
  text-decoration: none;
}
.contact-section {
  padding: 72px 56px;
  background: #fff;
}
.contact-section:nth-of-type(odd) {
  background: #f6f8fb;
}
.contact-info-band {
  padding-top: 28px;
  padding-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
}
.contact-info-item {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 12px 30px rgba(6,42,93,.05);
}
.contact-info-item strong {
  font-size: 22px;
  line-height: 1.25;
}
.contact-form-layout {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
  gap: 56px;
  align-items: start;
}
.contact-form-copy h2,
.buyer-support h2,
.contact-faq h2 {
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.contact-form-copy p {
  color: #526177;
  font-size: 18px;
  line-height: 1.62;
}
.rfq-purpose-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
.rfq-purpose-list > div {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 12px 30px rgba(6,42,93,.05);
}
.rfq-purpose-list strong,
.rfq-purpose-list span {
  display: block;
}
.rfq-purpose-list strong {
  font-size: 18px;
  margin-bottom: 5px;
}
.rfq-purpose-list span {
  color: #526177;
}
.contact-form {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 18px 42px rgba(6,42,93,.09);
}
.contact-form .form-row {
  margin-bottom: 18px;
}
.contact-form .form-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-form label {
  display: block;
  color: var(--navy);
  font-weight: 900;
  margin-bottom: 8px;
}
.contact-form label span {
  color: var(--orange);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #d6e1ee;
  background: #f8fafc;
  color: var(--navy);
  border-radius: 12px;
  padding: 14px 15px;
  font: 16px/1.25 Arial, Helvetica, sans-serif;
  outline: 0;
}
.contact-form textarea {
  min-height: 132px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,90,0,.12);
  background: #fff;
}
.contact-form small {
  display: block;
  margin-top: 8px;
  color: #6c7890;
  line-height: 1.45;
}
.attachment-alternative {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  padding: 16px 18px;
  color: #526177;
  background: #f4f8fd;
  border: 1px solid #d6e4f2;
  border-left: 4px solid var(--orange);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.attachment-alternative strong {
  color: var(--navy);
  font-size: 15px;
}
.attachment-alternative a {
  color: #d94d00;
  font-weight: 800;
  text-decoration: underline;
}
.contact-submit {
  border: 0;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
}
.form-note {
  margin: 14px 0 0;
  color: #6c7890;
  text-align: center;
  font-size: 14px;
}
.buyer-support-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.buyer-support-grid > div {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(6,42,93,.05);
}
.buyer-support-grid h3 {
  margin: 0 0 10px;
  font-size: 21px;
}
.buyer-support-grid p {
  margin: 0;
  color: #526177;
  line-height: 1.52;
}
.contact-faq {
  background: #f6f8fb;
}
@media (max-width: 1200px) {
  .contact-hero,
  .contact-form-layout {
    grid-template-columns: 1fr;
  }
  .contact-info-band,
  .buyer-support-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .contact-hero,
  .contact-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .contact-form .form-row.two,
  .contact-info-band,
  .buyer-support-grid {
    grid-template-columns: 1fr;
  }
  .contact-form {
    padding: 24px;
  }
  .contact-hero__cards strong,
  .contact-info-item strong {
    font-size: 19px;
  }
}


/* Mobile & tablet refinement v1
   Desktop layout remains unchanged. These rules only apply on smaller screens. */
@media (max-width: 900px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-header {
    position: static;
  }

  .top-strip {
    display: none;
  }

  .nav-bar,
  body.products-page .nav-bar {
    min-height: auto;
    padding: 16px 20px;
    gap: 14px;
    justify-content: flex-start;
  }

  .brand,
  body.products-page .brand {
    flex: 0 0 auto;
  }

  .brand img,
  body.products-page .brand img {
    width: 154px;
    max-height: 46px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 2px 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .nav-links a {
    white-space: nowrap;
    padding: 10px 0;
  }

  .nav-links a.active::after,
  .nav-links a:hover::after {
    bottom: 2px;
  }

  .nav-cta {
    margin-left: auto;
    padding: 12px 16px;
    min-height: 44px;
    white-space: nowrap;
  }

  .products-hero,
  .oem-hero,
  .factory-hero,
  .resources-hero,
  .contact-hero,
  .detail-hero {
    padding: 46px 20px 40px !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .products-hero h1,
  .oem-hero h1,
  .factory-hero h1,
  .resources-hero h1,
  .contact-hero h1,
  .detail-hero h1 {
    font-size: clamp(36px, 11vw, 52px);
  }

  .products-hero p:not(.eyebrow),
  .oem-hero p:not(.eyebrow),
  .factory-hero p:not(.eyebrow),
  .resources-hero p:not(.eyebrow),
  .contact-hero p:not(.eyebrow),
  .detail-hero p:not(.eyebrow) {
    font-size: 18px;
  }

  .hero-actions,
  .cta-actions,
  .request-actions {
    width: 100%;
  }

  .hero-actions .btn,
  .cta-actions .btn,
  .request-actions .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .product-filter {
    padding: 18px 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .product-filter a {
    white-space: nowrap;
  }

  .product-page-intro,
  .product-grid,
  .product-category-section,
  .oem-section,
  .factory-section,
  .resources-section,
  .contact-section,
  .detail-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .product-page-intro {
    display: block;
  }

  .product-page-intro .text-link {
    display: inline-block;
    margin-top: 16px;
  }

  .product-grid,
  .oem-card-grid,
  .oem-gallery,
  .factory-gallery,
  .process-grid,
  .advantage-grid,
  .resource-grid,
  .faq-grid,
  .buyer-support-grid,
  .contact-info-band {
    grid-template-columns: 1fr !important;
  }

  .product-card {
    min-height: auto;
  }

  .product-image {
    height: 240px;
  }

  .product-image img {
    max-height: 185px;
  }

  .card-actions {
    grid-template-columns: 1fr;
  }

  .card-actions a:first-child {
    justify-content: center;
  }

  .product-cta,
  .factory-rfq,
  .resources-rfq {
    margin: 0 20px 48px !important;
    padding: 24px !important;
    display: block !important;
  }

  .product-cta .cta-actions {
    margin-top: 20px;
  }

  .oem-hero__visual img,
  .factory-hero__visual img,
  .factory-image-card img,
  .factory-gallery img {
    height: auto !important;
    max-height: none !important;
  }

  .contact-form-layout,
  .document-policy,
  .resources-section.two-col,
  .factory-section.two-col,
  .factory-section.two-col.reverse {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .contact-form {
    padding: 22px;
  }

  .contact-form .form-row.two {
    grid-template-columns: 1fr;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .nav-bar,
  body.products-page .nav-bar {
    padding: 14px 16px;
  }

  .brand img,
  body.products-page .brand img {
    width: 136px;
    max-height: 42px;
  }

  .nav-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-left: 0;
  }

  .products-hero h1,
  .oem-hero h1,
  .factory-hero h1,
  .resources-hero h1,
  .contact-hero h1,
  .detail-hero h1 {
    font-size: 36px;
  }

  .floating-whatsapp {
    left: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
  }
}


/* AEO / GEO foundation v1 */
.aeo-page {
  background: #f6f8fb;
}
.aeo-hero {
  padding: 76px 56px 64px;
  background: linear-gradient(105deg, #fff 0%, #f4f8fc 58%, #eef5fb 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 56px;
  align-items: center;
}
.aeo-hero h1 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
}
.aeo-hero p {
  color: #526177;
  font-size: 19px;
  line-height: 1.62;
  max-width: 760px;
}
.aeo-fact-card {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 24px;
  padding: 30px 32px;
  box-shadow: 0 18px 46px rgba(6,42,93,.09);
}
.aeo-fact-card strong {
  display: block;
  color: var(--navy);
  font-size: 24px;
  margin-bottom: 16px;
}
.aeo-fact-card ul {
  margin: 0;
  padding-left: 20px;
  color: #526177;
  line-height: 1.7;
}
.aeo-section {
  padding: 72px 56px;
  background: #fff;
}
.aeo-section:nth-of-type(odd) {
  background: #f6f8fb;
}
.aeo-faq-list {
  max-width: 1100px;
  margin: 0 auto;
}
.aeo-faq-list details {
  background: #fff;
}
.aeo-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}
.aeo-guide-card,
.aeo-answer-grid article,
.answer-summary {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(6,42,93,.05);
}
.aeo-guide-card {
  padding: 28px;
}
.aeo-guide-card h3 {
  margin: 0 0 14px;
  font-size: 24px;
}
.aeo-guide-card ul {
  margin: 0;
  padding-left: 20px;
  color: #526177;
  line-height: 1.62;
}
.aeo-answer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.aeo-answer-grid article {
  padding: 24px;
}
.aeo-answer-grid strong,
.aeo-answer-grid span {
  display: block;
}
.aeo-answer-grid strong {
  font-size: 20px;
  margin-bottom: 8px;
}
.aeo-answer-grid span {
  color: #526177;
  line-height: 1.52;
}
.answer-summary {
  margin: 18px 0 0;
  padding: 18px 20px;
  border-left: 5px solid var(--orange);
}
.answer-summary strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.answer-summary p {
  margin: 0;
  color: #526177;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .aeo-hero {
    grid-template-columns: 1fr;
    padding: 46px 20px 40px;
    gap: 28px;
  }
  .aeo-hero h1 {
    font-size: clamp(36px, 11vw, 52px);
  }
  .aeo-section {
    padding: 48px 20px;
  }
  .aeo-guide-grid,
  .aeo-answer-grid {
    grid-template-columns: 1fr;
  }
}

/* Final mobile navigation cascade for v1.4. */
@media (max-width: 900px) {
  .site-header .nav-bar,
  body.products-page .nav-bar {
    position: relative;
    flex-wrap: wrap;
    padding: 14px 18px;
    gap: 12px;
  }
  .site-header .menu-toggle,
  body.products-page .menu-toggle { display: inline-flex; order: 2; }
  .site-header .brand,
  body.products-page .brand { order: 1; }
  .site-header .nav-links,
  body.products-page .nav-links {
    display: none;
    order: 4;
    width: 100%;
    padding: 8px 0 4px;
    overflow: visible;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #e6edf5;
  }
  .site-header .nav-links.is-open,
  body.products-page .nav-links.is-open { display: flex; }
  .site-header .nav-links a,
  body.products-page .nav-links a {
    width: 100%;
    min-height: 44px;
    padding: 12px 2px;
    border-bottom: 1px solid #edf2f7;
  }
  .site-header .nav-cta,
  body.products-page .nav-cta { display: none; }
}


/* Product category content enhancement v2 */
.category-guide-page .aeo-guide-card p {
  margin: 0;
  color: #526177;
  line-height: 1.58;
}
.category-model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.category-model-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(6,42,93,.05);
}
.category-model-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background: #f3f6fa;
  border: 1px solid #edf1f6;
  border-radius: 18px;
}
.category-model-image img {
  max-width: 125px;
  max-height: 125px;
  object-fit: contain;
}
.category-model-code {
  margin: 0 0 4px;
  color: var(--orange);
  font-weight: 900;
  letter-spacing: .04em;
}
.category-model-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.18;
}
.category-model-card p {
  margin: 0 0 8px;
  color: #526177;
  line-height: 1.45;
}
.category-model-cert {
  font-size: 14px;
  font-weight: 800;
}
.category-guide-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.category-guide-links a {
  display: block;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(6,42,93,.05);
  text-decoration: none;
  color: var(--navy);
  font-weight: 900;
}
.category-guide-links a span {
  display: block;
  color: #526177;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .category-model-grid,
  .category-guide-links {
    grid-template-columns: 1fr;
  }
  .category-model-card {
    grid-template-columns: 1fr;
  }
  .category-model-image {
    min-height: 220px;
  }
  .category-model-image img {
    max-width: 170px;
    max-height: 170px;
  }
}

/* Keep the v1.5 floating contact control clear of mobile content. */
@media (max-width: 900px) {
  .floating-whatsapp {
    left: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    box-shadow: 0 8px 22px rgba(6,42,93,.22), 0 0 0 4px rgba(255,255,255,.78);
  }
  .floating-whatsapp svg { width: 24px; height: 24px; }
}

/* Product detail mobile refinement v1.8.
   These rules are deliberately scoped to detail pages so desktop and the
   product listing keep their current layout. */
@media (max-width: 760px) {
  .detail-page .detail-hero {
    padding: 24px 16px 34px !important;
  }

  .detail-page .breadcrumb {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.45;
  }

  .detail-page .detail-grid {
    gap: 24px !important;
  }

  .detail-page .detail-media {
    padding: 12px;
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(6, 42, 93, 0.07);
  }

  .detail-page .detail-image-frame {
    min-height: 270px;
    padding: 18px;
    border-radius: 16px;
  }

  .detail-page .detail-image-frame img {
    max-height: 238px;
  }

  .detail-page .detail-original-link {
    margin: 10px 4px 2px;
    font-size: 14px;
  }

  .detail-page .detail-summary h1 {
    margin-bottom: 10px;
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }

  .detail-page .detail-model,
  .detail-page .detail-spec {
    margin-bottom: 7px;
    font-size: 18px;
  }

  .detail-page .detail-description {
    margin: 14px 0;
    font-size: 16px;
    line-height: 1.58;
  }

  .detail-page .answer-summary {
    display: none;
  }

  .detail-page .detail-tags {
    margin: 14px 0 20px;
    gap: 8px;
  }

  .detail-page .detail-tags span {
    padding: 7px 10px;
    font-size: 13px;
  }

  .detail-page .detail-actions {
    gap: 10px;
  }

  .detail-page .detail-actions .btn {
    width: 100%;
  }

  .detail-page .detail-section,
  .detail-page .related-section {
    padding: 26px 16px 0 !important;
  }

  .detail-page .detail-two-col,
  .detail-page .detail-three-col {
    gap: 16px;
  }

  .detail-page .detail-card {
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 9px 24px rgba(6, 42, 93, 0.055);
  }

  .detail-page .detail-card h2 {
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 1.15;
  }

  .detail-page .detail-card p,
  .detail-page .check-list {
    font-size: 15px;
    line-height: 1.55;
  }

  .detail-page .spec-table,
  .detail-page .spec-table tbody,
  .detail-page .spec-table tr,
  .detail-page .spec-table th,
  .detail-page .spec-table td {
    display: block;
    width: 100%;
  }

  .detail-page .spec-table tr {
    padding: 11px 0 12px;
    border-bottom: 1px solid #e5ebf2;
  }

  .detail-page .spec-table tr:first-child {
    padding-top: 2px;
  }

  .detail-page .spec-table tr:last-child {
    padding-bottom: 2px;
    border-bottom: 0;
  }

  .detail-page .spec-table th,
  .detail-page .spec-table td {
    padding: 0;
    border: 0;
  }

  .detail-page .spec-table th {
    margin-bottom: 4px;
    color: #68778d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.015em;
  }

  .detail-page .spec-table td {
    font-size: 16px;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }

  .detail-page .category-heading {
    margin-bottom: 16px;
  }

  .detail-page .category-heading h2 {
    font-size: 27px;
    line-height: 1.12;
  }

  .detail-page .category-heading .text-link {
    display: inline-block;
    margin-top: 10px;
  }

  .detail-page .related-grid {
    gap: 12px;
  }

  .detail-page .related-card {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
  }

  .detail-page .related-img {
    grid-row: 1 / 3;
    width: 138px;
    height: 138px;
    margin: 0;
    border-radius: 12px;
  }

  .detail-page .related-img img {
    max-width: 90%;
    max-height: 118px;
  }

  .detail-page .related-card strong {
    align-self: end;
    font-size: 17px;
  }

  .detail-page .related-card em {
    align-self: start;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.38;
  }

  .detail-page .detail-cta {
    margin: 28px 16px 36px !important;
    padding: 22px !important;
  }

  .detail-page .floating-whatsapp {
    right: 10px;
    left: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
    box-shadow: 0 7px 18px rgba(6, 42, 93, 0.20), 0 0 0 3px rgba(255,255,255,.82);
  }

  .detail-page .floating-whatsapp svg {
    width: 23px;
    height: 23px;
  }
}

@media (max-width: 380px) {
  .detail-page .related-card {
    grid-template-columns: 116px minmax(0, 1fr);
    column-gap: 12px;
  }

  .detail-page .related-img {
    width: 116px;
    height: 126px;
  }

  .detail-page .related-img img {
    max-height: 106px;
  }
}

/* Global mobile floating contact placement v1.9.
   Keep the control consistently at the screen edge on every page so it does
   not cover product badges, card copy or form labels. This final rule also
   supersedes the older page-specific mobile positions above. */
@media (max-width: 900px) {
  .floating-whatsapp,
  .detail-page .floating-whatsapp {
    right: 8px;
    left: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
    box-shadow: 0 7px 18px rgba(6, 42, 93, 0.20), 0 0 0 3px rgba(255, 255, 255, 0.82);
  }

  .floating-whatsapp svg,
  .detail-page .floating-whatsapp svg {
    width: 23px;
    height: 23px;
  }
}