/** Shopify CDN: Minification failed

Line 2013:0 Expected "}" to go with "{"

**/
.main-nav__item--primary,
.main-nav__item--primary:hover,
.main-nav__item--primary:focus,
.main-nav__item--primary.is-active,
.is-open > summary > .main-nav__item--primary,
.secondary-nav__item,
.secondary-nav__item:hover,
.secondary-nav__item:focus,
.secondary-nav__item.is-active,
.is-open > summary > .secondary-nav__item {
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Temporary: hide account icon in header */
.header__icons > a.header__icon.text-current:not(#cart-icon) {
  display: none !important;
}

@media (max-width: 768.98px) {
  .header__logo {
    display: flex;
    justify-content: center;
    text-align: center;
  }

  .header__logo .logo__link {
    margin-inline: auto;
  }
}

@media (min-width: 769px) {
  .header {
    padding: calc(4 * var(--space-unit)) 0 !important;
  }

  .header__grid {
    display: flex;
    align-items: center;
  }
}

/* =================================================================
   CliniSpecs Apple-Clinical Token System -- Sprint D
   P0: Token consolidation + focus ring + swatch targets
   P1: Controlled #0066CC blue reintroduction
   ================================================================= */

/* --- P0: Token consolidation: retire #111111/#0E1116/#393D41/#3A3A3C -> #1D1D1F --- */

.main-nav__item--primary a,
.main-nav__item--primary button,
.secondary-nav__item a,
.secondary-nav__item button {
  color: #1D1D1F !important;
}

.price,
.price__regular,
.price__sale,
.price-item,
.price-item--regular,
.price-item--sale {
  color: #1D1D1F !important;
}

.product__description,
.product__description p,
.product__description li {
  color: #1D1D1F;
}

.skip-to-content-link {
  background-color: #1D1D1F !important;
  color: #FFFFFF !important;
}

/* --- P0: Focus-visible ring: 2px #0066CC, offset 2px --- */
:focus-visible {
  outline: 2px solid #0066CC !important;
  outline-offset: 2px !important;
}

/* --- P0: Swatch touch targets: 44x44px min --- */
.swatch-card,
.swatch__card,
.variant-swatch,
[class*="swatch-card"],
[class*="variant-swatch"] {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* --- P1: Controlled #0066CC blue --- */

.rte a,
.rte a:visited {
  color: #0066CC;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rte a:hover {
  color: #004C99;
}

.hpu-lnk,
.hpu-rx-link,
.hp-range-card-link,
[class*="hpu-lnk"],
[class*="hpu-rx-link"] {
  color: #0066CC !important;
}
.hpu-lnk:hover,
.hpu-rx-link:hover,
.hp-range-card-link:hover,
[class*="hpu-lnk"]:hover,
[class*="hpu-rx-link"]:hover {
  color: #004C99 !important;
  text-decoration: underline;
}

.page-faq .rte a,
.faq__answer a,
.accordion__content a {
  color: #0066CC;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-faq .rte a:hover,
.faq__answer a:hover,
.accordion__content a:hover {
  color: #004C99;
}

.product-breadcrumbs .breadcrumbs-list__link:hover,
.breadcrumb__link:hover {
  color: #0066CC;
}

/* Sprint D required fix -- swatch touch targets */
.opt-label--swatch,
.opt-label--image {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Sprint D required fix -- FAQ inline link visibility */
details[open] .rte a,
details p a {
  color: #0066CC !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ============================================================
   Sprint E -- Apple-clinical colour polish
   May 2026 -- CSS-only, no Liquid changes
   ============================================================ */

/* E-01 -- Primary/secondary button authority (#474749 -> #1D1D1F) */
.btn--primary,
button[type="submit"]:not(.shopify-payment-button__button),
.shopify-challenge__button {
  background-color: #1D1D1F !important;
  border-color: #1D1D1F !important;
  color: #FFFFFF !important;
}
.btn--primary:hover,
button[type="submit"]:not(.shopify-payment-button__button):hover,
.shopify-challenge__button:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #FFFFFF !important;
}

/* E-03 -- Product and collection prices to Apple black */
.price,
.price__regular,
.price-item,
.product-price,
.product-info .price,
.card__price,
.product-card__price {
  color: #1D1D1F !important;
}

/* E-04 -- Cart item names to Apple black */
.cart-item__name,
.cart-item__title,
.cart-item a[href*="/products/"] {
  color: #1D1D1F !important;
}

/* E-05 -- Homepage EtherLens / high-intent learn-more links blue */
.hpu-tech a,
.hp-tech a,
.hero__content a:not(.btn):not(.button),
.rte a[href*="technology"] {
  color: #0066CC !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.hpu-tech a:hover,
.hp-tech a:hover,
.hero__content a:not(.btn):not(.button):hover,
.rte a[href*="technology"]:hover {
  color: #004C99 !important;
}

/* E-06 -- Product description / procurement cross-links blue */
.product-info__block.rte a,
.product__description a,
.product-info a[href*="procurement"],
.product-info a[href*="bulk"],
.product-info a[href*="documents"],
.product-info a[href*="standards"] {
  color: #0066CC !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.product-info__block.rte a:hover,
.product__description a:hover,
.product-info a[href*="procurement"]:hover,
.product-info a[href*="bulk"]:hover,
.product-info a[href*="documents"]:hover,
.product-info a[href*="standards"]:hover {
  color: #004C99 !important;
}

/* E-07 -- Standards/compliance content links blue */
.template-page .rte a[href*="product-documents"],
.template-page .rte a[href*="standards"],
.template-page .rte a[href*="compliance"],
.template-page .rte a[href*="documentation"],
.template-page .rte a[href*="contact"] {
  color: #0066CC !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.template-page .rte a[href*="product-documents"]:hover,
.template-page .rte a[href*="standards"]:hover,
.template-page .rte a[href*="compliance"]:hover,
.template-page .rte a[href*="documentation"]:hover,
.template-page .rte a[href*="contact"]:hover {
  color: #004C99 !important;
}

/* E-08 -- Long-form body/list readability */
.template-page .rte p,
.template-page .rte li,
.procurement-page p,
.procurement-page li {
  color: #3A3A3C;
}

/* E-09 -- SKIPPED: --link-color global change is NOT SAFE */


/* -------------------------------------------------------------------------
   Sprint F -- Restore Apple-clean desktop header
   ------------------------------------------------------------------------- */

/* F-01 -- Hide dropdown chevron toggle buttons on desktop */
@media (min-width: 835px) {
  .main-nav__toggle-btn {
    display: none !important;
  }
}

/* F-02 -- Remove active/hover underline from desktop nav rows */
@media (min-width: 835px) {
  .main-nav__row:hover,
  .main-nav__row.is-active,
  .main-nav__item--dropdown.is-open > .main-nav__row {
    box-shadow: none !important;
  }
}

/* F-03 -- Restore single-row header: logo left | nav centre | icons right */
@media (min-width: 835px) {
  .header__grid {
    flex-wrap: nowrap !important;
  }
  .main-menu {
    order: 1 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .header__icons {
    order: 2 !important;
    flex: 0 0 auto !important;
  }
}

/* G-01 - Restore logo scale (desktop) */
@media (min-width: 835px) {
    .header__logo span.flex {
        flex-shrink: 0 !important;
          }
            .header__logo img,
              .header__heading-logo {
                  max-width: 180px !important;
                      height: auto !important;
                          align-self: center !important;
                            }
                            }

/* H-01: Vertical centreline -- logo + icons share nav centreline */
@media (min-width: 835px) {
  .header__logo,
  .header__icons {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}

/* M-01: Mobile logo -- centred + Apple-scale size */
@media (max-width: 834px) {
  .header__grid {
    position: relative !important;
  }
  .header__logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
  .header__logo img,
  .header__heading-logo {
    max-width: 100px !important;
    height: auto !important;
  }
}

/* Homepage Full-Bleed Background Fix */
[id$="__custom_liquid_hp_range"] {
  background: #1d1d1f !important;
}
[id$="__custom_liquid_hp_why"] {
  background: #f5f5f7 !important;
}
[id$="__custom_liquid_hp_cta"] {
  background: #1d1d1f !important;
}


/* ============================================================
   Sprint L -- Hover State Fixes (P0 + P1)
   Doubled-class selectors (0,0,3,0) to beat INLINE-20 (0,0,2,0)
   ============================================================ */

/* P0-1: "Why CliniSpecs >" -- override INLINE-20 .hpu-lnk:hover { color:#000 !important } */
.hpu-lnk.hpu-lnk:hover,
.hpu-lnk.hpu-lnk:focus {
  color: #004C99 !important;
  text-decoration: none !important;
}

/* P0-2: Hero primary button "Shop Clinical Eyewear" -- restore white text, remove opacity wash */
.hpu-btn.hpu-btn:hover,
.hpu-btn.hpu-btn:focus {
  background: #000000 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* P0-3: Dark-background CTA "Procurement & Bulk Orders >" -- restore white text */
.hp-close-link.hp-close-link:hover,
.hp-close-link.hp-close-link:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* P0-4: Dark-card range links "Shop Clinical Frames/Shields >" -- brand blue hover */
.hp-range-card-link.hp-range-card-link:hover,
.hp-range-card-link.hp-range-card-link:focus {
  color: #004C99 !important;
  text-decoration: none !important;
}
.hp-range-card.hp-range-card:hover .hp-range-card-link {
  color: #004C99 !important;
  text-decoration: none !important;
}

/* P0-5: Product Documents filled button "View guide" -- restore white text */
.pdoc-doc-btn--filled.pdoc-doc-btn--filled:hover,
.pdoc-doc-btn--filled.pdoc-doc-btn--filled:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* P1-1: About page CTAs -- restore white text, standardise blue bg */
.ab2-btn.ab2-btn:hover,
.ab2-btn.ab2-btn:focus {
  background: #004C99 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* P1-2: Comfort & Fit "View Fit Guide" -- restore white text */
.cf2-close-btn.cf2-close-btn:hover,
.cf2-close-btn.cf2-close-btn:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* P1-3: Fit Guide / Sizing & Fit Guide inline crosslinks -- restore brand blue, no underline */
.fg2-crosslink.fg2-crosslink a:hover,
.fg2-crosslink.fg2-crosslink a:focus,
.sfg-cta-crosslink.sfg-cta-crosslink a:hover,
.sfg-cta-crosslink.sfg-cta-crosslink a:focus {
  color: #004C99 !important;
  text-decoration: none !important;
}

/* ============================================================
   Sprint M P0 -- Footer hover contrast fix
   ============================================================ */

.footer a:hover,
.footer a:focus {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}


/* ============================================================
   MAIN Sprint Additions -- preserved from MAIN (146129485907)
   ============================================================ */

/* Product page colour swatches: restore 44px tap target (WCAG 2.5.5) */
@media (max-width: 767px) {
  .opt-label--swatch {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}
/* Desktop -- hide nav dropdown chevrons */
@media (min-width: 750px) {
  .main-nav__item--dropdown .main-nav__toggle-btn svg.icon {
    display: none !important;
  }
}
/* hp_cta duplicate removed */

/* Homepage section padding: reduce excessive top/bottom padding on mobile */
@media (max-width: 749px) {
  .hp-tech {
    padding: 60px 20px !important;
  }
  .hp-why {
    padding: 60px 20px !important;
  }
  .hp-close {
    padding: 60px 20px !important;
  }
  .hp-tech-inner {
    gap: 24px !important;
  }
}

/* Homepage section padding: reduce excessive top/bottom padding on mobile */
@media (max-width: 749px) {
  .hp-tech {
    padding: 60px 20px !important;
  }
  .hp-why {
    padding: 60px 20px !important;
  }
  .hp-close {
    padding: 60px 20px !important;
  }
  .hp-tech-inner {
    gap: 24px !important;
  }
}

/* Product page colour swatches: restore 44px tap target (WCAG 2.5.5) */
@media (max-width: 767px) {
  .opt-label--swatch {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}
/* Desktop -- hide nav dropdown chevrons */
@media (min-width: 750px) {
  .main-nav__item--dropdown .main-nav__toggle-btn svg.icon {
    display: none !important;
  }
}
/* hp_cta duplicate removed */

/* cache-bust: 2026-05-21T10:02:15 */
/* ui-save: 2026-05-21 */

/* ============================================================
   Phase 1 Hover Fix
   Non-product opacity override + search hover lift
   ============================================================ */

/* 1. Remove opacity fade from text links on non-product pages */
.template-page .rte a:hover,
.template-page .link:hover,
.page-width .rte a:hover {
  opacity: 1 !important;
  color: #004c99 !important;
}

/* 2. Search result hover - increase from 4% to 6% opacity */
.predictive-search__item:not(.js-submit):hover,
.predictive-search__item[aria-selected="true"] {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================
   Phase 1.1 -- Range card dark-bg hover fix
   .hp-range-card-link sits on #1d1d1f; #004C99 is too dark.
   Override to white for readability.
   ============================================================ */

.hp-range-card-link.hp-range-card-link:hover,
.hp-range-card-link.hp-range-card-link:focus,
.hp-range-card.hp-range-card:hover .hp-range-card-link {
  color: #fff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* ============================================================
   pdoc_cta button hover fix
      .pdoc-cta-btn sits on #1d1d1f; Dawn a:hover resets colour
         to foreground (near-black). Force white in all states.
            ============================================================ */

            .pdoc-cta-btn:hover,
            .pdoc-cta-btn:focus,
            .pdoc-cta-btn:focus-visible,
            .pdoc-cta-btn:active {
              color: #fff !important;
                opacity: 1 !important;
                  text-decoration: none !important;
                  }

/* ============================================================
   CLINISPECS BUTTON INTERACTION SYSTEM v1
   All appended to assets/custom-header-merged.css
   Non-product pages only. Preserve all sprint blocks above.
   Colours: A = dark->hover #0066CC, C = white->hover #0066CC,
            F = blue->hover #004C99, B = #0066CC->hover #fff
   Double-class selectors used where Sprint L (0,3,0) applies.
   ============================================================ */

/* --- HOMEPAGE --- */

/* .hpu-btn: Type A - dark filled on white bg.
   Sprint L P0-2 set hover to #000000 (0,3,0). Match specificity, source order wins. */
.hpu-btn.hpu-btn:hover,
.hpu-btn.hpu-btn:focus {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.hpu-btn.hpu-btn:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* .hp-close-btn: Type C - white filled on #1d1d1f section. */
.hp-close-btn:hover,
.hp-close-btn:focus {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.hp-close-btn:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* --- PROCUREMENT AND BULK ORDERS --- */

/* .pb2-cta2__card--primary .pb2-cta2__btn: Type C - white on dark bg. */
.pb2-cta2__card--primary .pb2-cta2__btn:hover {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.pb2-cta2__card--primary .pb2-cta2__btn:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* .pb2-cta2__card--secondary and --sample .pb2-cta2__btn: Type A - dark on light bg. */
.pb2-cta2__card--secondary .pb2-cta2__btn:hover,
.pb2-cta2__card--sample .pb2-cta2__btn:hover {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.pb2-cta2__card--secondary .pb2-cta2__btn:active,
.pb2-cta2__card--sample .pb2-cta2__btn:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* .pb2-path--a and --b .pb2-path__cta: Type A - dark on light bg. */
.pb2-path--a .pb2-path__cta:hover,
.pb2-path--b .pb2-path__cta:hover {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.pb2-path--a .pb2-path__cta:active,
.pb2-path--b .pb2-path__cta:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* .pb2-path--c .pb2-path__cta: Type C - white on dark bg. */
.pb2-path--c .pb2-path__cta:hover {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.pb2-path--c .pb2-path__cta:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* --- SHOP CLINICAL EYEWEAR --- */

/* .sh2-shield-btn and .sh2-cta-pri: Type F - blue on dark section.
   Normalise inline hover #0052A3 to approved #004C99. */
.sh2-shield-btn:hover {
  background: #004C99 !important;
  color: #fff !important;
}
.sh2-cta-pri:hover {
  background: #004C99 !important;
  color: #fff !important;
}

/* --- STANDARDS COMPLIANCE --- */

/* .sc2-cta-btn: Type F. Normalise inline hover #0052A3 to #004C99. */
.sc2-cta-btn:hover {
  background: #004C99 !important;
  color: #fff !important;
}

/* --- PRODUCT DOCUMENTS --- */

/* .pdoc-doc-btn (outline): normalise inline hover #0052A3 to #004C99. */
.pdoc-doc-btn:hover {
  border-color: #004C99 !important;
  color: #004C99 !important;
  text-decoration: none !important;
}

/* .pdoc-doc-btn--filled: two-class (0,3,0) beats base hover (0,2,0).
   Sprint L P0-5 set color:#fff only (0,3,0). Match specificity to add background. */
.pdoc-doc-btn.pdoc-doc-btn--filled:hover {
  background: #004C99 !important;
  border-color: #004C99 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* .pdoc-cta-btn: Type B on #1d1d1f section.
   Default was #1d1d1f on #1d1d1f (button invisible). Fix default to #0066CC.
   Hover: white bg, dark text (Type B: fills dark bg with light button on hover).
   Source order here supersedes earlier pdoc_cta fix for :hover and :active. */
.pdoc-cta-btn {
  background: #0066CC !important;
}
.pdoc-cta-btn:hover {
  background: #fff !important;
  color: #1d1d1f !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.pdoc-cta-btn:active {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
  opacity: 1 !important;
}

/* .cmi-doc-dl: Type A on white card. Inline hover was #3d3d3f. Fix to #0066CC. */
.cmi-doc-dl:hover {
  background: #0066CC !important;
  color: #fff !important;
  text-decoration: none !important;
}
.cmi-doc-dl:active {
  background: #004C99 !important;
  color: #fff !important;
}

/* --- FAQS --- */

/* .fq2-cta-btn: Type A on #f5f5f7. Dark (#393D41), no prior hover rule. */
.fq2-cta-btn:hover {
  background: #0066CC !important;
  color: #fff !important;
  text-decoration: none !important;
}
.fq2-cta-btn:active {
  background: #004C99 !important;
  color: #fff !important;
}

/* --- COMFORT FIT --- */

/* .cf2-close-btn: Type F - blue on dark section.
   Sprint L P1-2 set color:#fff only (0,3,0). Match specificity, add background. */
.cf2-close-btn.cf2-close-btn:hover,
.cf2-close-btn.cf2-close-btn:focus {
  background: #004C99 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.cf2-close-btn:active {
  background: #003B73 !important;
  color: #fff !important;
}

/* --- FIT GUIDE --- */

/* .fg2-cta-btn: Type F - blue on #1d1d1f section. Normalise #0052A3 to #004C99. */
.fg2-cta-btn:hover {
  background: #004C99 !important;
  color: #fff !important;
}
.fg2-cta-btn:active {
  background: #003B73 !important;
  color: #fff !important;
}

/* --- CARE AND CLEANING --- */

/* .cc2-cta-btn: Type F - blue on #f5f5f7. Normalise #0052A3 to #004C99. */
.cc2-cta-btn:hover {
  background: #004C99 !important;
  color: #fff !important;
}
.cc2-cta-btn:active {
  background: #003B73 !important;
  color: #fff !important;
}

/* --- SIZING FIT GUIDE --- */

/* .sfg-cta-btn-p: Type A on #f5f5f7. Dark (#393D41), no prior hover rule. */
.sfg-cta-btn-p:hover {
  background: #0066CC !important;
  color: #fff !important;
  text-decoration: none !important;
}
.sfg-cta-btn-p:active {
  background: #004C99 !important;
  color: #fff !important;
}

/* .sfg-cta-btn-s: Type D - outline dark on #f5f5f7. No prior hover rule. */
.sfg-cta-btn-s:hover {
  background: #1d1d1f !important;
  color: #fff !important;
  text-decoration: none !important;
}
.sfg-cta-btn-s:active {
  background: #0066CC !important;
  color: #fff !important;
}

/* --- CONTACT FORM SUBMIT --- */

/* Sprint E sets hover to #000000. Correct to #0066CC on non-product pages.
   body:not() adds (0,1,0) making total specificity higher than Sprint E. */
body:not(.template-product) button[type="submit"]:not(.shopify-payment-button__button):hover {
  background: #0066CC !important;
  color: #fff !important;
}
body:not(.template-product) button[type="submit"]:not(.shopify-payment-button__button):active {
  background: #004C99 !important;
  color: #fff !important;
}

/* ============================================================
   CLINISPECS BUTTON INTERACTION SYSTEM v1.1
   Micro-fix pass - newly audited templates
   Pages: anti-fog-technology, documentation-downloads,
          shipping-returns, warranty-guarantees
   All rules append-only. v1 selectors above are preserved.
   ============================================================ */

/* --- ANTI-FOG TECHNOLOGY --- */

/* .af2-btn: Type F - blue on light bg. Normalise inline #0052A3 to #004C99. */
.af2-btn:hover {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.af2-btn:active {
  background: #003B73 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* --- DOCUMENTATION DOWNLOADS --- */

/* .dd-gw-btn: Type A - dark on #f5f5f7 bg. Inline hover was #3d3d3f. Fix to #0066CC. */
.dd-gw-btn:hover {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.dd-gw-btn:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* .dd-gw-link-btn: Type F outline - blue outline on light bg. Normalise #0052A3 to #004C99. */
.dd-gw-link-btn:hover {
  border-color: #004C99 !important;
  color: #004C99 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.dd-gw-link-btn:active {
  border-color: #003B73 !important;
  color: #003B73 !important;
  opacity: 1 !important;
}

/* .dd-gw-cta-btn: Type E - outline on #1d1d1f bg.
   Inline hover only changed border-color. Fix to full blue fill on hover. */
.dd-gw-cta-btn:hover {
  background: #0066CC !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.dd-gw-cta-btn:active {
  background: #004C99 !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* --- SHIPPING AND RETURNS --- */

/* .sr2-cta-btn: Type A - dark (#393D41) on #fff bg. No prior hover rule. */
.sr2-cta-btn:hover {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.sr2-cta-btn:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* --- WARRANTY AND GUARANTEES --- */

/* .wg2-cta-btn: Type A - dark (#393D41) on #f5f5f7 bg. No prior hover rule. */
.wg2-cta-btn:hover {
  background: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.wg2-cta-btn:active {
  background: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}


/* ============================================================
   CLINISPECS BUTTON INTERACTION SYSTEM v2 -- CANONICAL
   Full-theme audit completed: 2026-05-28
   Supersedes v1, v1.1, and premature v2 draft via source order.
   Append-only to assets/custom-header-merged.css.
   Target: duplicate theme 146653773907 ONLY.
   Do not publish. Do not edit MAIN.
   ============================================================

   DESIGN SPEC (confirmed 2026-05-28):
   Primary blue:   normal #0066CC/white | hover #004C99/white | active #003B73/white
   Dark primary:   normal #1D1D1F/white | hover #0066CC/white | active #004C99/white
   Light on dark:  normal #fff/#1D1D1F  | hover #0066CC/white | active #004C99/white
   Outline pill:   normal transparent/#1D1D1F/#1D1D1F-border
                   hover  #0066CC/white/#0066CC-border
                   active #004C99/white/#004C99-border
   Blue outline:   normal transparent/#0066CC/#0066CC-border
                   hover  #0066CC/white  | active #004C99/white

   DAWN HOVER MECHANISM (main.css finding):
   Dawn uses background-position gradient slide for hover -- NOT background-color.
   Sprint E already overrides .btn--primary with background-color: #1D1D1F !important
   (normal) and background-color: #000000 !important (hover).
   v2 rules must use background: shorthand + background-image: none !important
   to defeat both the gradient slide and Sprint E's solid-color override.
   Specificity: all v2 rules use :not() chains to reach (0,4,0,0) or higher,
   which beats Sprint E's (0,2,0,0) even when both use !important.

   ROOT CAUSE OF INLINE-STYLE FAILURES (sh2-access-btn, sh2-cta-sec):
   Section inline <style> rules set hover{background:#1d1d1f} -- dark fill.
   If color:#fff is absent or overridden by a later rule, text is #1d1d1f
   on #1d1d1f -- unreadable. External CSS with !important is the only
   reliable guard. These rules also correct the hover color to #0066CC
   per the design spec (inline used wrong #1d1d1f).

   EXCLUSIONS -- no rules touch these:
   .opt-label / .opt-label--btn / .opt-label--swatch (variant picker)
   .shopify-payment-button__button (Shopify checkout)
   .rx-section .pill / .rx-btn (prescription block standalone system)
   .quantity__button (cart quantity control)
   .slider-nav__btn / .slideshow-nav__btn (carousel arrow nav)
   .wallet-cart-button (Apple Pay / wallet checkout)
   All product page templates (product add-to-cart untouched)
   ============================================================ */


/* ============================================================
   PART A -- DAWN SYSTEM BUTTON OVERRIDES
   ============================================================ */

/* A1 -- .btn--primary hover/active
   Corrects Sprint E: #000000 -> #0066CC (dark primary spec)
   background-image: none kills Dawn gradient slide mechanism */
.btn--primary:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):hover,
.shopify-challenge__button:not([disabled]):hover {
  background: #0066CC !important;
  background-image: none !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.btn--primary:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):active,
.shopify-challenge__button:not([disabled]):active {
  background: #004C99 !important;
  background-image: none !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* A2 -- .btn--secondary hover/active
   Was completely absent from all previous sprints. */
.btn--secondary:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):hover {
  background: #0066CC !important;
  background-image: none !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.btn--secondary:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):active {
  background: #004C99 !important;
  background-image: none !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* A3 -- button[type=submit] hover/active (all pages)
   Corrects Sprint E: #000000 -> #0066CC. Excludes payment, disabled. */
button[type="submit"]:not(.shopify-payment-button__button):not([disabled]):not([aria-disabled="true"]):hover {
  background: #0066CC !important;
  background-image: none !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
button[type="submit"]:not(.shopify-payment-button__button):not([disabled]):not([aria-disabled="true"]):active {
  background: #004C99 !important;
  background-image: none !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}


/* ============================================================
   PART B -- OUTLINE PILL ROOT CAUSE FIXES
   ============================================================ */

/* B1 -- sh2-access-btn: "View Retainer / Lanyard" */
.sh2-access-btn:hover {
  background: #0066CC !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.sh2-access-btn:active {
  background: #004C99 !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* B2 -- sh2-cta-sec: "Bulk Orders" */
.sh2-cta-sec:hover {
  background: #0066CC !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.sh2-cta-sec:active {
  background: #004C99 !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* B3 -- cmi-proof-dl: "Download Certificate (PDF)" */
.cmi-proof-dl:hover {
  background: #0066CC !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.cmi-proof-dl:active {
  background: #004C99 !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
}


/* ============================================================
   PART C -- NEW CUSTOM PAGE BUTTONS (not in v1 or v1.1)
   ============================================================ */

/* C1 -- ad2-btn: Australian Design */
.ad2-btn:hover {
  background: #0066CC !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.ad2-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }

/* C2 -- ca-cta-btn: Clinical Approach */
.ca-cta-btn:hover {
  background: #0066CC !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.ca-cta-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }

/* C3 -- el2-btn: EtherLens Technology (normal #0071e3, normalise hover to spec) */
.el2-btn:hover {
  background: #004C99 !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.el2-btn:active { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }

/* C4 -- ip2-btn: Impact Protection */
.ip2-btn:hover {
  background: #004C99 !important;
  border-color: #004C99 !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.ip2-btn:active { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }

/* C5 -- ces2-btn: Clinical Eyewear System */
.ces2-btn:hover {
  background: #0066CC !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.ces2-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }

/* C6 -- wy-ci-btn: Why CliniSpecs */
.wy-ci-btn:hover {
  background: #0066CC !important;
  border-color: #0066CC !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.wy-ci-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }

/* C7 -- Technology page (6 classes) */
.tech-hero-btn-primary:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.tech-hero-btn-primary:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }
.tech-hero-btn-secondary:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.tech-hero-btn-secondary:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }
.tech-lens-cta:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.tech-lens-cta:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }
.tech-compliance-btn:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.tech-compliance-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }
.tech-docs-primary:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.tech-docs-primary:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }
.tech-docs-link-btn:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.tech-docs-link-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }


/* ============================================================
   PART D -- CORRECTIONS TO v1 AND v1.1
   ============================================================ */

/* D1 -- sh2-shield-btn + sh2-cta-pri: normalise #0052A3 -> #004C99, add border-color and :active */
.sh2-shield-btn:hover { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.sh2-shield-btn:active { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }
.sh2-cta-pri:hover { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.sh2-cta-pri:active { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }

/* D2 -- sc2-cta-btn: add :active */
.sc2-cta-btn:active { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }

/* D3 -- ab2-btn: fix #0077ed -> #004C99, add border-color */
.ab2-btn:hover { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.ab2-btn:active { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }

/* D4 -- sfg-cta-btn-s: correct #1d1d1f -> #0066CC per outline spec */
.sfg-cta-btn-s:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.sfg-cta-btn-s:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }

/* D5 -- dd-gw-link-btn: correct v1.1 outline-only -> fill blue */
.dd-gw-link-btn:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.dd-gw-link-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }

/* D6 -- pdoc-doc-btn: correct v1 outline-only -> fill blue */
.pdoc-doc-btn:hover { background: #0066CC !important; border-color: #0066CC !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; }
.pdoc-doc-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }

/* D7 -- Missing :active states for v1/v1.1 blue-filled buttons */
.fg2-cta-btn:active  { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }
.cc2-cta-btn:active  { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }
.af2-btn:active      { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }
.cf2-close-btn:active { background: #003B73 !important; border-color: #003B73 !important; color: #fff !important; opacity: 1 !important; }
.hpu-btn.hpu-btn:active { background: #004C99 !important; border-color: #004C99 !important; color: #fff !important; opacity: 1 !important; }

/* ==================================================================
   CLINISPECS BUTTON INTERACTION SYSTEM v2.1 -- PRODUCT COMMERCE CONTROL PROTECTION
   Date: 2026-05-28
   ROOT CAUSE OF REGRESSION:
     v2 global .btn--primary and button[type="submit"] hover rules incorrectly
     targeted the product-page Add to Cart button.
     body:not(.template-product) scoping was invalid -- Dawn does NOT add
     .template-product to the body element.
     Real body classes on product pages: cc-animate-enabled dom-loaded dom-loaded-plus-6
     Real ATC identifier: button[name="add"] (Shopify standard, always present on ATC)
     Real product section wrappers: .cc-main-product, .product-main
   FIX:
     High-specificity revert rules cancel v2 blue hover on product commerce controls.
     Specificity of v2.1 rules >= (0,6,1), which beats v2 max of (0,6,0).
     Source order (appended last) wins any equal-specificity tie.
   SELECTORS PROTECTED:
     button[name="add"] -- Add to Cart (v2.1 A)
     form[action*="/cart/add"] button[type="submit"] -- cart form submit scope (v2.1 B)
     .cc-main-product button.btn--primary -- product section wrapper (v2.1 C)
     .product-main button.btn--primary -- product section alt wrapper (v2.1 C)
   UNAFFECTED:
     All page CTA buttons (.sh2-access-btn, .sh2-cta-sec, all others) -- v2 still applies
   ================================================================== */

/* v2.1 A -- ATC button: revert hover/focus/active to dark (no visual change from normal)
   Specificity: button(0,0,1) + [name](0,1,0) + 4x:not()(0,4,0) + :hover(0,1,0) = (0,6,1)
   Beats v2 Part A1 (0,6,0) and Part A3 (0,5,1) */
button[name="add"]:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):hover,
button[name="add"]:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):focus,
button[name="add"]:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):active {
  background: #1d1d1f !important;
  background-image: none !important;
  border-color: #1d1d1f !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* v2.1 B -- Cart form submit: belt-and-suspenders via form action scope
   Specificity: form(0,0,1) + [action](0,1,0) + button(0,0,1) + [type](0,1,0) + 3x:not()(0,3,0) + :hover(0,1,0) = (0,6,2)
   Beats v2 Part A3 (0,5,1) */
form[action*="/cart/add"] button[type="submit"]:not(.shopify-payment-button__button):not([disabled]):not([aria-disabled="true"]):hover,
form[action*="/cart/add"] button[type="submit"]:not(.shopify-payment-button__button):not([disabled]):not([aria-disabled="true"]):focus,
form[action*="/cart/add"] button[type="submit"]:not(.shopify-payment-button__button):not([disabled]):not([aria-disabled="true"]):active {
  background: #1d1d1f !important;
  background-image: none !important;
  border-color: #1d1d1f !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* v2.1 C -- Product section wrapper scope: covers any .btn--primary inside product sections
   Specificity: .cc-main-product(0,1,0) + button(0,0,1) + .btn--primary(0,1,0) + 4x:not()(0,4,0) + :hover(0,1,0) = (0,7,1)
   Beats v2 Part A1 (0,6,0) */
.cc-main-product button.btn--primary:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):hover,
.cc-main-product button.btn--primary:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):active,
.product-main button.btn--primary:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):hover,
.product-main button.btn--primary:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):active {
  background: #1d1d1f !important;
  background-image: none !important;
  border-color: #1d1d1f !important;
  color: #fff !important;
  opacity: 1 !important;
}


/* ==================================================================
   CLINISPECS PRODUCT COMMERCE BUTTON SYSTEM v1 - ADD TO CART
   Date: 2026-05-28
   PURPOSE:
     v2.1 correctly protected ATC from the global marketing CTA blue hover.
     However v2.1 set hover = rest = #1d1d1f, which felt static.
     This patch adds refined dark hover feedback.
   DESIGN SPEC:
     normal: #1D1D1F background, #fff text
     hover: #2A2A2D background, #fff text
     active: #000000 background, #fff text
     focus-visible: 2px #0066CC outline, 2px offset
     transition: background-color 0.2s ease-in-out
     opacity: 1 at all states
   SCOPE:
     button[name="add"] only, scoped to .cc-main-product
   ================================================================== */
button[name="add"]:not([disabled]):not([aria-disabled="true"]) {
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out !important;
}
.cc-main-product button[name="add"]:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):hover {
  background: #2A2A2D !important;
  background-color: #2A2A2D !important;
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
}
.cc-main-product button[name="add"]:not([disabled]):not([aria-disabled="true"]):not(.slider-nav__btn):not(.slideshow-nav__btn):active {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
}
button[name="add"]:focus-visible {
  outline: 2px solid #0066CC !important;
  outline-offset: 2px !important;
}

/* ==================================================================
   CLINISPECS CERTIFICATION DOWNLOAD BUTTON - HOVER FIX
   Date: 2026-05-29
   PURPOSE:
     a.cmi-prod-dl (product page certification/documentation row)
     Default state is correct: transparent bg, #1d1d1f border, text, icon.
     An upstream rule overrides the inline section color:#fff on hover,
     making text and icon invisible against the dark #1d1d1f background.
     This patch enforces correct hover, active, and focus-visible states.
   DESIGN SPEC:
     default:       transparent bg, #1d1d1f border, #1d1d1f text, #1d1d1f icon
     hover:         #1d1d1f bg, #1d1d1f border, #fff text, #fff icon, opacity 1
     active:        #000000 bg, #000000 border, #fff text, #fff icon, opacity 1
     focus-visible: 2px #0066CC outline, 2px offset
   ICON:
     SVG path uses stroke="currentColor" -- color:#fff cascades automatically.
     No separate SVG stroke rules required.
   SCOPE:
     a.cmi-prod-dl only -- certification Download PDF button on product pages.
     Does not affect Add to Cart, variant selectors, Rx controls,
     quantity buttons, Shop Pay, or any other element.
   ================================================================== */
a.cmi-prod-dl:hover,
a.cmi-prod-dl:focus {
  background: #1d1d1f !important;
  background-color: #1d1d1f !important;
  border-color: #1d1d1f !important;
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
a.cmi-prod-dl:active {
  background: #000000 !important;
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #fff !important;
  opacity: 1 !important;
}
a.cmi-prod-dl:focus-visible {
  outline: 2px solid #0066CC !important;
  outline-offset: 2px !important;
}
/* CLINISPECS PRODUCT SWATCH SELECTION SYSTEM v3 */
.opt-label--swatch {
  overflow: visible !important;
  position: relative !important;
}
.opt-label--swatch::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
input.opt-btn:checked + .opt-label--swatch::after {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #1d1d1f,
    0 3px 10px rgba(0, 0, 0, 0.06) !important;
}
.opt-btn:not(:checked) + .opt-label--swatch:hover::after {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(29, 29, 31, 0.35) !important;
}
input.opt-btn:focus-visible + .opt-label--swatch {
  outline: 2px solid #0066CC !important;
  outline-offset: 4px !important;
}
.opt-btn.is-unavailable + .opt-label--swatch {
  opacity: 0.45 !important;
}

/* ============================================================
MOBILE / TABLET REMEDIATION - D1-D5 (v3)
Added on a duplicate/preview theme only. Does not touch any
existing rule above; every declaration below is additive.
No HTML/Liquid changes required - CSS only.

!important USAGE: every rule below that carries !important is
overriding either (a) an existing !important declaration, which
cannot be beaten any other way, or (b) a rule living in a page-
specific style block that Shopify injects in the BODY, not the
head - confirmed by fetching the raw page HTML for /pages/contact
and /products/square-safety-glasses: .cn2-sup-grid, .sfg-prin-grid,
the *-h1 headings, and the product-info__disclosure colour rule all
live in body-positioned style blocks, which load after this file
(a head link) regardless of specificity. Without !important those
rules would lose to this file's own source order, not win it - so
!important is load-bearing here, not decorative. The one place it
truly isn't needed - D5A's global body{} rule, which overrides
main.css, a link that unambiguously loads BEFORE this file - has
had it removed.
============================================================ */

/* ---- D1: header logo capped at 100px on every screen <=834px,
including iPad in portrait (768-834px). Replaces the two-step
100px/180px cliff at the 834/835px breakpoint with three steps,
so tablet gets its own size instead of sharing the phone's.
!important required: overriding this same file's own existing
!important rule a few hundred lines above.
QA (unresolved by CSS alone - visual judgement call, not a
measurable pass/fail): confirm the 150px tablet logo doesn't
crowd the account/cart icons at 768px, 820px and 834px
specifically - those are the narrow end of the range and the
most likely place for it to look cramped even though it fits
numerically. ---- */
@media (max-width: 480px) {
.header__logo img,
.header__heading-logo {
max-width: 120px !important;
height: auto !important;
}
}
@media (min-width: 481px) and (max-width: 834px) {
.header__logo img,
.header__heading-logo {
max-width: 150px !important;
height: auto !important;
}
}
/* 835px+ keeps the existing 180px rule above - no change needed there. */

/* ---- D2: on product pages only, a body-positioned page-template
style block sets .disclosure__title.product-info__disclosure to
#1d1d1f for the product-info accordion. The footer's mobile
accordion titles (Products / About / Support / Legal & Compliance)
share the base .disclosure__title class, so on product templates
they inherit the same near-black colour and become unreadable
against the black footer. Pin the footer instance back to white,
scoped tightly enough to never touch the product-info accordion.
!important required: see note above (body style block).
QA: re-test footer legibility on home, collection, product, cart,
and blog templates specifically - written to be template-agnostic
(targets .footer, not a specific template), but the underlying bug
was template-specific, so confirm no template relied on a different
footer text colour. Shopify's default /password page uses a
different, minimal layout without this footer component, so no
separate check is needed there. ---- */
.footer .disclosure__title,
.footer summary h2.disclosure__title {
color: #ffffff !important;
}

/* ---- D3: Contact page "Additional support" cards. .cn2-sup-grid uses
a fixed grid-template-columns: 154px 154px 154px with no responsive
rule, so on a 375-430px phone the three columns don't fit and single
words wrap mid-letter ("PROCUREME" / "NT", "DOCUMENTAT" / "ION").
Column count is a discrete choice (1/2/3), not something clamp()-style
fluid sizing applies to, so this stays as explicit steps.
!important required: see note above (body style block).
QA: 700px/980px are reasonable, untested breakpoints - confirm card
padding/gap at the 2-column tablet step reads as a deliberate tablet
layout rather than "phone layout stretched wider"; adjust the two
@media values below if visual QA says otherwise, they aren't load-
bearing to the fix itself (any reasonable split point works). ---- */
.cn2-sup-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 700px) {
.cn2-sup-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 701px) and (max-width: 980px) {
.cn2-sup-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- D4: Sizing & Fit Guide "Why fit matters" cards. Same fixed-grid
pattern as D3 - .sfg-prin-grid: 164px 164px 164px - causing the H3
card headings ("Stable during movement" etc.) to wrap mid-word.
Identical fix shape and same QA note as D3. ---- */
.sfg-prin-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 700px) {
.sfg-prin-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 701px) and (max-width: 980px) {
.sfg-prin-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- D5, part A: the theme's own main.css sets, on body (inherited by
every element on every page):
overflow-wrap: break-word;
overflow-wrap: anywhere;
The second declaration wins. This is the mechanism strongly linked to
the "Product / Document / s" style break you flagged - worth stating
precisely, not overstating: Phase 2 could not reproduce that exact
break under standard test conditions (320-834px, no zoom) and named
enlarged accessibility text as the likely trigger, without claiming
certainty. What's not in question is that overflow-wrap: anywhere is
the only thing in this codebase capable of splitting a word mid-
letter at all - normal word-boundary wrapping cannot produce that
result. Removing it removes the capability regardless of what exact
condition triggers it, so this fix stands independent of whether the
precise trigger is ever pinned down. main.css is a link that loads
before this file in every page's head (checked across /pages/
contact, /pages/technology, /products/square-safety-glasses), so a
plain override - no !important - reliably wins here. ---- */
body {
overflow-wrap: break-word;
}

/* ---- D5, part B: bespoke page headings share the same at-risk shape -
fixed 56-64px font-size, no mobile scaling. Targets the naming
pattern rather than a hardcoded class list: every bespoke heading
checked is the sole class on its h1 (e.g. class="pdoc-h1", nothing
else) and follows a "*-h1" suffix convention, so h1[class$="-h1"]
matches all of them today and picks up any future page following the
same convention automatically. Checked for a more semantic shared
hook first (e.g. .hero h1 / .page-hero h1) - there isn't one; each
page's hero wrapper is itself uniquely prefixed (pdoc-hero, sr2-hero,
tech-hero, sh2-hero, ac2-hero, ...), same convention as the headings,
so the attribute selector on the heading itself is the closest thing
to a semantic hook this codebase has. Does NOT match the theme's own
default headings (About CliniSpecs, Why CliniSpecs, etc.), which
carry no class attribute at all. If a future bespoke heading breaks
the "*-h1" naming convention, it will need adding explicitly - a
one-line check for future page builds, not a defect in this rule.
Fluid sizing: a single clamp() instead of fixed steps, scaling
smoothly with viewport width and staying inside the same 36-56px
range verified safe against the headings tested; treat the exact
36/4vw/20/56 numbers as a starting point for visual QA, not as fixed
as the grid breakpoints above. Existing desktop values (56px, 64px
for .sh2-h1) are untouched above 834px - this rule is scoped <=834px.
!important required: see note above (body style block). ---- */
@media (max-width: 834px) {
h1[class$="-h1"] {
font-size: clamp(36px, 4vw + 20px, 56px) !important;
line-height: 1.15 !important;
}
}

/* ---- Mobile typography safety net: balanced line-breaking for all
headings, sitewide, including desktop. text-wrap: balance only
changes WHERE a heading wraps (never its size or the container), so
it carries no layout-regression risk - browsers that don't support
it simply ignore the property and keep today's default wrapping.
General-purpose improvement, not tied to D1-D5; works alongside the
clamp() rule above rather than replacing it - clamp() prevents
mid-word breaks, this improves how the remaining, legitimate
word-boundary wraps look. ---- */
h1, h2, h3 {
text-wrap: balance;
}

/* ============================================================
MOBILE / TABLET REMEDIATION - D6+ (sitewide sweep, 2026-08-08)
Found via a full source-level sweep of all 28 custom content
pages after real-device screenshots surfaced additional grid
overflow defects beyond the original D1-D5 scope (Contact and
Sizing & Fit Guide's other grids, plus product-care-cleaning,
standards-compliance, shipping-returns, accessibility, why-
clinispecs, warranty-guarantees, procurement-bulk-orders, fit-
guide, and shop-clinical-eyewear). Same failure pattern as the
original D3/D4 defects: fixed multi-column grid-template-columns
with no mobile collapse, cutting the second/third column off-
screen on phone widths. Same fix shape as D3/D4, applied to
every instance found. All rules additive; every declaration
below is scoped to a specific bespoke section class - nothing
here touches the theme's default grid utilities.
============================================================ */

/* ---- D6: two-column card/text grids with no mobile stack.
Confirmed on real device (iPhone) for the product-care-cleaning
and shipping-returns instances of this exact pattern; the rest
share the identical structure (bespoke content grid, page-
specific style block, no responsive rule) so are fixed on the
same evidence. !important required: see D1-D5 note - these
rules live in body-positioned style blocks that load after
this file. ---- */
.cc2-split, .cc2-disinf-in,
.sfg-consid-in, .wg2-cov-in,
.sr2-two, .ac2-pledge-in,
.pb2-comp__in, .pdoc-cta-in {
grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 700px) {
.cc2-split, .cc2-disinf-in,
.sfg-consid-in, .wg2-cov-in,
.sr2-two, .ac2-pledge-in,
.pb2-comp__in, .pdoc-cta-in {
grid-template-columns: 1fr !important;
}
}

/* ---- D7: three-column card grids with no mobile collapse. Same
pattern and same fix shape as D3/D4 (which already fixed
.cn2-sup-grid and .sfg-prin-grid) - confirmed on real device for
the sizing-fit-guide Square/Round comparison instance;
rest share the identical structure. ---- */
.wy-coll-grid, .wg2-claims-steps,
.sr2-process-steps, .ac2-feat-grid,
.pb2-paths__grid, .fg2-size-grid,
.pb2-cta2__grid {
grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 700px) {
.wy-coll-grid, .wg2-claims-steps,
.sr2-process-steps, .ac2-feat-grid,
.pb2-paths__grid, .fg2-size-grid,
.pb2-cta2__grid {
grid-template-columns: 1fr !important;
}
}
@media (min-width: 701px) and (max-width: 980px) {
.wy-coll-grid, .wg2-claims-steps,
.sr2-process-steps, .ac2-feat-grid,
.pb2-paths__grid, .fg2-size-grid,
.pb2-cta2__grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}

/* ---- D8: five-column frame-picker grids (shop-clinical-eyewear).
Worse version of the same defect - five ~110px cards with no
mobile collapse at all. Not yet visually confirmed broken at
768px (cards are tight but still legible there), but at true
phone widths (<=430px) five columns cannot fit without breaking;
fixed on the same source evidence as D6/D7. ---- */
.sh2-grid, .sh2-cmp-grid {
grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 700px) {
.sh2-grid, .sh2-cmp-grid {
grid-template-columns: 1fr !important;
}
}
@media (min-width: 701px) and (max-width: 980px) {
.sh2-grid, .sh2-cmp-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}

/* ---- D9: standards-compliance AS/NZS 1337.1 | ANSI Z87.1
reference block - a two-content-column-plus-divider grid
(1fr 1px 1fr). Confirmed on real device. Collapsing to a single
column also collapses the 1px divider column into its own row,
which renders as a thin horizontal rule between the two stacked
entries - acceptable, not a separate defect. ---- */
.sc2-refs-in {
grid-template-columns: 1fr 1px 1fr !important;
}
@media (max-width: 700px) {
.sc2-refs-in {
grid-template-columns: 1fr !important;
}
}

/* ---- D10: heading/large-text scaling beyond the original H1 fix
(D5B). Found via the same sweep: bespoke H2-level headings and
large stat text across several pages share H1's fixed-px, no-
mobile-scaling risk. Not visually confirmed broken by the real-
device screenshots (none showed a wrapped/broken H2 the way the
original H1 issue did) - included proactively on the same risk
pattern, same fix shape (clamp scoped <=834px, desktop
untouched). Grouped by each selector's own existing desktop
size so nothing gets LARGER under 834px than it is today -
groups are not interchangeable. !important required: see D1-D5
note. ---- */
@media (max-width: 834px) {
.tech-overview-h2, .tech-clinical-h2, .tech-lens-h2,
.tech-compliance-h2, .tech-system-h2, .tech-why-h2,
.fg2-size-card h3, .product-title {
font-size: clamp(28px, 4vw + 14px, 40px) !important;
line-height: 1.15 !important;
}
.af2-prob h2, .af2-sol h2,
.pb2-img-heading, .wg2-promise-text {
font-size: clamp(26px, 4vw + 12px, 36px) !important;
line-height: 1.15 !important;
}
.tech-docs-h2, .sr2-process-head, .fg2-size-head,
.sfg-frames-head, .wg2-claims-head, .dd-gw-body h2 {
font-size: clamp(25px, 4vw + 11px, 34px) !important;
line-height: 1.2 !important;
}
.sr2-ship h2, .sr2-ret h2, .ac2-pledge h2,
.ac2-feat-head, .pb2-steps-head, .fg2-cta-head,
.sh2-cta-head, .sc2-stmt-text, .pb2-stmt-text {
font-size: clamp(24px, 4vw + 10px, 32px) !important;
line-height: 1.2 !important;
}
}

/* ---- Reviewed, not fixed: .sc2-entry, .ip2-chain-item, .pb2-step,
.fg2-step (icon-plus-text rows, fixed column <=120px + 1fr - the
flexible column absorbs the remaining ~250px+ on any phone width,
same low-risk shape already accepted for icon rows elsewhere).
Also not fixed: large decorative numerals (.ca-num, .pb2-step-num,
.fg2-step-num, .wg2-claims-num) - these are 1-2 digit labels
inside fixed badges, not multi-word text, so oversized rendering
is a visual-weight/polish question rather than a broken-layout
one; flagged for Stage 5 polish review, not a CSS fix here. ---- */


/* ============================================================
MOBILE / TABLET REMEDIATION - D11 (real-device pass, 2026-08-08)
Real iPhone-class screenshots surfaced defects beyond the D6-D10
source sweep: a missed 3-col grid (sizing-fit-guide), an icon-text
row previously judged low-risk that is actually broken (fit-guide),
a hero flex layout and a pricing table on procurement-bulk-orders,
and a self-caused regression from D9 (divider element rendering as
a solid block once its grid column collapsed). A follow-up sitewide
sweep - this time also checking display:flex two-column layouts,
which the D6-D10 sweep did not check - found 13 further 2/3-column
grids with no mobile collapse, on pages the original sweep never
reached: australian-design-compliance, documentation-downloads /
standards-compliance / product-documents (shared "cmi-" components),
accessibility, clinical-approach, designed-for-healthcare, anti-fog-
technology, impact-protection, about-clinispecs, clinical-eyewear-
system, why-clinispecs, shop-clinical-eyewear. Same fix shape as
D3/D4/D6/D7 throughout - additive, mobile/tablet media queries only,
desktop untouched.
============================================================ */

/* ---- D11a: two-column grids, no mobile collapse. Confirmed by
direct inspection of each page's inline CSS (display:grid,
grid-template-columns:1fr 1fr, no matching @media rule anywhere in
the page's own style block). ---- */
.cmi-proof-inner, .ad2-si, .ac2-cta-in, .dfh2-grid, .af2-split,
.ip2-si, .ab2-oi, .ces2-ii, .wy-ci-row, .sh2-shield-in, .sh2-access-in {
grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 700px) {
.cmi-proof-inner, .ad2-si, .ac2-cta-in, .dfh2-grid, .af2-split,
.ip2-si, .ab2-oi, .ces2-ii, .wy-ci-row, .sh2-shield-in, .sh2-access-in {
grid-template-columns: 1fr !important;
}
}

/* ---- D11b: three-column grids, no mobile collapse. Same fix shape
as D3/D4/D7: stack fully under 700px, step to 2-up on tablet.
.sfg-frame-compare is the sizing-fit-guide "Square/Round" grid
confirmed broken on real device (screenshot showed 2 of 3 cards,
third off-screen). ---- */
.sfg-frame-compare, .ca-cards, .dfh2-pi {
grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 700px) {
.sfg-frame-compare, .ca-cards, .dfh2-pi {
grid-template-columns: 1fr !important;
}
}
@media (min-width: 701px) and (max-width: 980px) {
.sfg-frame-compare, .ca-cards, .dfh2-pi {
grid-template-columns: repeat(2, 1fr) !important;
}
}

/* ---- D11c: about-clinispecs 3-col fact strip with border-left
dividers between columns. Stacks like D11b; the divider makes no
sense as a vertical rule once stacked, so it becomes a top rule on
mobile instead (same idea as the D9 regression fix below). ---- */
.ab2-fi {
grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 700px) {
.ab2-fi {
grid-template-columns: 1fr !important;
}
.ab2-fact + .ab2-fact {
border-left: none !important;
border-top: 1px solid #d2d2d7 !important;
}
}
@media (min-width: 701px) and (max-width: 980px) {
.ab2-fi {
grid-template-columns: repeat(2, 1fr) !important;
}
}

/* ---- D11d: fit-guide numbered step rows (.fg2-step). Previously
reviewed and left alone as a "safe" icon+text pattern - real device
proved that call wrong: the fixed-width mark column plus grid's
default item sizing pushed the row wider than the viewport,
truncating text instead of wrapping it. Stacked to one column on
mobile, matching the numbered-step pattern used elsewhere. ---- */
@media (max-width: 700px) {
.fg2-step {
grid-template-columns: 1fr !important;
}
.fg2-step-left {
padding: 28px 0 0 0 !important;
border-right: none !important;
}
.fg2-step-right {
padding: 16px 0 32px 0 !important;
}
}

/* ---- D11e: shared "cmi-doc-row" component (product document /
download rows). Almost certainly the real cause of the very first
"Need documentation for tender" overflow reported: a fixed 160px
thumbnail plus a 1px divider plus a flexible text column plus a
nowrap download button, whose combined fixed width alone exceeds a
phone viewport before the flexible column gets any room. Stacked to
a column on mobile so nothing has to compete for horizontal space. ---- */
@media (max-width: 700px) {
.cmi-doc-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
}
.cmi-doc-divider {
display: none !important;
}
.cmi-doc-mark img {
width: 120px !important;
}
.cmi-doc-actions {
width: 100% !important;
}
.cmi-doc-dl {
width: 100% !important;
justify-content: center !important;
}
}

/* ---- D11f: procurement-bulk-orders "Equip your entire team"
imagery block (.pb2-imagery) - a two-up flex row (text + image)
with no mobile stack, confirmed on real device (text and image
overlapping/cut off). Stacked to a column; image given a fixed
mobile height in place of the desktop absolute-positioned layout. ---- */
@media (max-width: 700px) {
.pb2-imagery {
flex-direction: column !important;
gap: 32px !important;
padding: 48px 24px !important;
}
.pb2-img-right {
width: 100% !important;
height: 260px !important;
}
.pb2-img-body {
max-width: none !important;
}
}

/* ---- D11g: procurement-bulk-orders pricing table (.pb2-pricing__table)
- a real HTML table, not a CSS grid, so the grid-collapse pattern
doesn't apply. Confirmed on real device: three columns of prose-
length content can't fit a phone width even with the page's own
existing @media padding/font-size reduction. Made horizontally
scrollable on mobile instead of clipped - the standard safe pattern
for data tables that can't meaningfully reflow. ---- */
@media (max-width: 700px) {
.pb2-pricing__in {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.pb2-pricing__table {
min-width: 560px !important;
}
}

/* ---- D11h: standards-compliance divider regression, introduced by
D9. .sc2-ref-div is a decorative 1px-wide vertical rule with
min-height:120px between the two reference columns; once D9
collapsed .sc2-refs-in to one column on mobile, this element kept
its min-height but gained the full row width, rendering as a solid
grey block between the two stacked entries instead of a hairline.
Hidden on mobile - the stacked items read fine with just their own
spacing, no divider needed. ---- */
@media (max-width: 700px) {
.sc2-ref-div {
display: none !important;
}
}


/* ============================================================
MOBILE REDESIGN - D12 (procurement hero + pricing table, 2026-08-08)
Real-device review rated the site 8.8/10 and called out two sections
as technically non-breaking but not "intentionally designed" for
phone widths: the procurement imagery hero and the procurement
pricing table. This is a genuine mobile-only redesign of both, not
a tweak - desktop is untouched (nothing here applies above
880px/700px). Accessibility note: the pricing table keeps its real
<table>/<thead>/<th> structure in the DOM at all times; the header
row is visually hidden on mobile using a standard clip-based
sr-only technique (not display:none), so screen readers still get
the native header/cell relationships. The CSS-generated "Best for"/
"Pricing" labels are a sighted-user visual aid layered on top, not
a replacement for the underlying semantics.
============================================================ */

/* ---- D12a: procurement hero (.pb2-imagery). Rebuilt as one clear
reading path - eyebrow, headline, copy, then the image collage
below - using flex "order" so this works regardless of DOM order.
Breakpoint widened to 880px so this cleanly supersedes both the
page's own 768px rule and D11f. Image collage reduced by ~20% and
given room to breathe instead of sitting flush against the copy. ---- */
@media (max-width: 880px) {
.pb2-imagery {
flex-direction: column !important;
align-items: flex-start !important;
gap: 40px !important;
padding: 56px 24px !important;
}
.pb2-img-left {
order: 1 !important;
max-width: none !important;
width: 100% !important;
}
.pb2-img-eyebrow {
margin-bottom: 10px !important;
}
.pb2-img-heading {
font-size: 30px !important;
margin-bottom: 14px !important;
}
.pb2-img-body {
max-width: none !important;
}
.pb2-img-right {
order: 2 !important;
width: 100% !important;
height: 210px !important;
margin: 0 !important;
}
.pb2-img-sq, .pb2-img-rnd {
width: 46% !important;
}
}

/* ---- D12b: procurement pricing table (.pb2-pricing__table). D11g
made it horizontally scrollable so nothing was clipped, but the
user could still only read ~60-70% of a row at a glance. Replaced
with stacked cards, one per pricing tier, using the same
display:block table-to-card technique already proven safe on the
technology page's .tech-matrix. The thead is kept in the DOM and
accessibility tree - only visually hidden - so table semantics for
screen readers are unaffected; the ::before labels are a visual-only
supplement for sighted mobile users. Cell classes are untouched, so
no HTML/template change was needed. Placed after D11g so it wins
the cascade; desktop and tablet (>700px) keep the original table
exactly as before. ---- */
@media (max-width: 700px) {
.pb2-pricing__in {
overflow-x: visible !important;
}
.pb2-pricing__table {
min-width: 0 !important;
display: block !important;
width: 100% !important;
border-collapse: separate !important;
}
.pb2-pricing__table thead {
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;
}
.pb2-pricing__table tbody {
display: block !important;
}
.pb2-pricing__table tbody tr {
display: block !important;
background: #f5f5f7 !important;
border-radius: 16px !important;
padding: 20px !important;
margin-bottom: 12px !important;
border-bottom: none !important;
}
.pb2-pricing__table tbody tr:last-child {
margin-bottom: 0 !important;
}
.pb2-pricing__table td {
display: block !important;
padding: 5px 0 !important;
}
.pb2-pricing__tier {
font-size: 19px !important;
font-weight: 700 !important;
padding-bottom: 12px !important;
margin-bottom: 8px !important;
border-bottom: 1px solid #d2d2d7 !important;
}
.pb2-pricing__desc::before {
content: "Best for";
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #6e6e73;
margin-bottom: 3px;
}
.pb2-pricing__discount::before {
content: "Pricing";
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #6e6e73;
margin-bottom: 3px;
}
.pb2-pricing__discount {
font-weight: 700 !important;
}
.pb2-pricing__badge {
display: inline-block !important;
margin-top: 6px !important;
}
}
/* D13 — Procurement hero: .pb2-img-right inherits flex:1 1 0% from the desktop row layout. In the D12a column layout (max-width:880px), flex-basis governs the MAIN axis, which is now vertical — so flex-basis:0% overrides the explicit height:210px and collapses this element to 0px tall. Its only children are position:absolute images with no intrinsic size, so nothing protects it from collapsing, and the absolutely-positioned images then render over the paragraph above. Neutralizing flex-basis restores height:210px as the effective size. */
@media (max-width:880px){
.pb2-img-right{flex:0 0 auto!important}
}
@media (max-width:880px){
  .pb2-img-sq,.pb2-img-rnd{width:auto!important;height:100%!important}
  
  /* D14 - Footer accordion sections render fully expanded on initial mobile load despite details.open=false, because the JS accordion controller never applies its collapse height until first user interaction, and .footer-col--collapsed .disclosure__panel has no height rule of its own (only position/margin tweaks), so it sits at full natural content height with overflow:visible on its ancestor. Result: all four footer sections overlap each other by up to 129px on load. Scoped to the theme's own existing max-width:768.98px breakpoint for this component (footer.css already gates the accordion pattern there; desktop uses overflow:initial and is never collapsed). :not([style]) ensures this only affects the untouched default state - confirmed via live DOM inspection that .disclosure__panel never carries a pre-populated inline style on any page at load, and this class combination is unique to footer accordions (not shared with the separate FAQ accordion component). Once JS sets an inline height on user interaction, this rule stops matching and steps aside. */
  @media (max-width:768.98px){
  .footer-col--collapsed .disclosure__panel:not([style]){height:0!important;overflow:hidden!important}
    
}