/** Shopify CDN: Minification failed

Line 1521:2 Unexpected "{"
Line 1521:3 Expected identifier but found "%"
Line 1521:51 Unexpected "1"
Line 1523:81 Unterminated string token

**/
/* START_SECTION:oxiclear-legacy-contact-page (INDEX:50) */
/* The reachable factory (D-198). The section paints NO background: the
     paper stage is the ground. Card physics are the shipped baseline; no
     backdrop-filter anywhere here (flat paper behind, module 13 §2.6). */

  .oxiclear-legacy-contact-page {
    --oc-contact-band: min(1240px, 100% - 32px);
    --oc-contact-ink: #14171c;
    --oc-contact-ink-2: #454c56;
    --oc-contact-ink-3: #545c6a;
    --oc-contact-card: rgba(255, 255, 255, 0.92);
    --oc-contact-edge: #e1e1e1;
    --oc-contact-shadow: 0 12px 34px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --oc-contact-frost: rgba(255, 255, 255, 0.75);
    --oc-contact-frost-dense: rgba(255, 255, 255, 0.82);
    color: var(--oc-contact-ink);
    padding-bottom: clamp(64px, 9vw, 104px);
  }

  .oxiclear-legacy-contact-page *,
  .oxiclear-legacy-contact-page *::before,
  .oxiclear-legacy-contact-page *::after {
    box-sizing: border-box;
  }

  .oxiclear-legacy-contact-page__banner {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ---- head: the D-196 staging + the lede ---- */
  .oxiclear-legacy-contact-page__hello {
    width: var(--oc-contact-band);
    margin: clamp(40px, 5vw, 64px) auto clamp(30px, 4vw, 48px);
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
  }

  .oxiclear-legacy-contact-page__hello h1 {
    display: grid;
    gap: 2px;
    justify-items: center;
    margin: 0;
    color: var(--oc-contact-ink);
    text-align: center;
    text-transform: none;
  }

  .oxiclear-legacy-contact-page__hello-ask {
    font-size: var(--oc-fs-h3);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-h3);
    color: var(--oc-contact-ink-3);
  }

  .oxiclear-legacy-contact-page__hello-hi {
    font-size: var(--oc-fs-hero);
    font-weight: var(--oc-w-bold);
    letter-spacing: var(--oc-tr-hero);
    line-height: 1.04;
  }

  .oxiclear-legacy-contact-page__lede {
    margin: 10px 0 0;
    max-width: 44ch;
    font-size: var(--oc-fs-body-lg);
    line-height: 1.58;
    color: var(--oc-contact-ink-2);
    text-wrap: balance;
  }

  /* ---- channel tiles ---- */
  .oxiclear-legacy-contact-page__channels {
    width: var(--oc-contact-band);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  @media screen and (max-width: 820px) {
    .oxiclear-legacy-contact-page__channels { grid-template-columns: 1fr; gap: 14px; }
  }

  .oxiclear-legacy-contact-page__channel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    background: var(--oc-contact-card);
    border: 1px solid var(--oc-contact-edge);
    border-radius: 18px;
    box-shadow: var(--oc-contact-shadow);
    color: var(--oc-contact-ink);
    text-decoration: none;
    transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .oxiclear-legacy-contact-page__channel:hover { border-color: rgba(20, 23, 28, 0.2); }
  .oxiclear-legacy-contact-page__channel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .oxiclear-legacy-contact-page__go {
    position: absolute;
    top: 22px;
    right: 20px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--oc-contact-frost);
    border: 1px solid rgba(20, 23, 28, 0.12);
    color: var(--oc-contact-ink-3);
    transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .oxiclear-legacy-contact-page__go svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .oxiclear-legacy-contact-page__channel:hover .oxiclear-legacy-contact-page__go {
    color: var(--oc-contact-ink);
    border-color: rgba(20, 23, 28, 0.28);
  }

  .oxiclear-legacy-contact-page__channel-head { display: flex; align-items: center; gap: 10px; }

  .oxiclear-legacy-contact-page__coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--oc-contact-frost-dense);
    border: 1px solid rgba(20, 23, 28, 0.1);
  }

  .oxiclear-legacy-contact-page__coin-icon { height: 18px; width: auto; fill: var(--oc-contact-ink); }

  .oxiclear-legacy-contact-page__channel-name { font-size: var(--oc-fs-card); font-weight: var(--oc-w-semibold); }

  .oxiclear-legacy-contact-page__channel-value {
    font-size: var(--oc-fs-body-lg);
    font-weight: var(--oc-w-bold);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }

  .oxiclear-legacy-contact-page__channel-line { font-size: var(--oc-fs-small); color: var(--oc-contact-ink-3); }

  /* ---- atlas chip ---- */
  .oxiclear-legacy-contact-page__atlas-row {
    width: var(--oc-contact-band);
    margin: clamp(18px, 2.6vw, 26px) auto 0;
    display: flex;
    justify-content: center;
  }

  .oxiclear-legacy-contact-page__atlas-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: var(--oc-w-medium);
    color: var(--oc-contact-ink-2);
    background: var(--oc-contact-frost);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 20, 22, 0.05);
    text-align: center;
  }

  .oxiclear-legacy-contact-page__atlas-icon { height: 13px; width: auto; fill: var(--oc-contact-ink-2); flex: none; }
  .oxiclear-legacy-contact-page__atlas-chip strong { color: var(--oc-contact-ink); font-weight: var(--oc-w-semibold); }

  /* ---- the divider sits in its traditional slot: under the banner, above
     the headline, like every other legacy page (founder, 1 Sep 2026) ---- */
  .oxiclear-legacy-contact-page .oxiclear-legacy-divider {
    width: var(--oc-contact-band);
    margin: clamp(26px, 3.5vw, 40px) auto 0;
  }

  /* ---- form + factory ---- */
  .oxiclear-legacy-contact-page__reach {
    width: var(--oc-contact-band);
    margin: clamp(40px, 5vw, 60px) auto 0;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px;
    align-items: start;
  }

  @media screen and (max-width: 900px) {
    .oxiclear-legacy-contact-page__reach { grid-template-columns: 1fr; }
  }

  .oxiclear-legacy-contact-page__panel {
    padding: clamp(22px, 3vw, 32px);
    background: var(--oc-contact-card);
    border: 1px solid var(--oc-contact-edge);
    border-radius: 24px;
    box-shadow: var(--oc-contact-shadow);
  }

  .oxiclear-legacy-contact-page__panel h2 {
    margin: 0 0 4px;
    font-size: var(--oc-fs-h3);
    font-weight: var(--oc-w-semibold);
    letter-spacing: var(--oc-tr-h3);
    color: var(--oc-contact-ink);
    text-align: left;
    text-transform: none;
  }

  .oxiclear-legacy-contact-page__panel-line { margin: 0 0 18px; font-size: var(--oc-fs-small); color: var(--oc-contact-ink-3); }

  .oxiclear-legacy-contact-page__sent {
    margin: 0 0 14px;
    padding: 12px 16px;
    font-size: var(--oc-fs-body);
    font-weight: var(--oc-w-medium);
    color: var(--oc-contact-ink);
    background: var(--oc-contact-frost-dense);
    border: 1px solid rgba(20, 23, 28, 0.14);
    border-radius: 14px;
  }

  .oxiclear-legacy-contact-page__errors { margin: 0 0 14px; color: var(--oc-contact-ink); }
  .oxiclear-legacy-contact-page__errors a { color: inherit; }

  .oxiclear-legacy-contact-page__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }

  @media screen and (max-width: 560px) {
    .oxiclear-legacy-contact-page__form-row { grid-template-columns: 1fr; }
  }

  .oxiclear-legacy-contact-page__field { display: grid; gap: 6px; margin-bottom: 14px; }

  .oxiclear-legacy-contact-page__field label {
    font-size: 13px;
    font-weight: var(--oc-w-medium);
    color: var(--oc-contact-ink-2);
  }

  .oxiclear-legacy-contact-page__optional { color: #8a919d; font-weight: var(--oc-w-regular); }

  .oxiclear-legacy-contact-page__field input,
  .oxiclear-legacy-contact-page__field textarea {
    font: inherit;
    font-size: var(--oc-fs-body);
    color: var(--oc-contact-ink);
    min-height: 48px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(20, 23, 28, 0.18);
    border-radius: 14px;
    transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .oxiclear-legacy-contact-page__field textarea { min-height: 120px; resize: vertical; }

  .oxiclear-legacy-contact-page__field input:hover,
  .oxiclear-legacy-contact-page__field textarea:hover { border-color: rgba(20, 23, 28, 0.3); }

  .oxiclear-legacy-contact-page__field input:focus-visible,
  .oxiclear-legacy-contact-page__field textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  /* the submit inherits the shared action pill (facelift-actions enrols
     this section's button[type="submit"]); only the icon gap lives here */
  .oxiclear-legacy-contact-page__send { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
  .oxiclear-legacy-contact-page__submit-icon { margin-right: 0; }

  /* ---- factory card ---- */
  .oxiclear-legacy-contact-page__factory { display: grid; gap: 16px; }

  .oxiclear-legacy-contact-page__mapline {
    position: relative;
    height: 168px;
    border-radius: 16px;
    overflow: hidden;
    /* a designed impression of the Samrala Road map, not an embed: green
       plots, one strong diagonal road with a hairline centre, two lanes */
    background:
      linear-gradient(64deg, transparent 0 47.2%, rgba(255, 255, 255, 0.95) 47.2% 52.8%, transparent 52.8% 100%),
      linear-gradient(64deg, transparent 0 49.7%, rgba(20, 23, 28, 0.14) 49.7% 50.3%, transparent 50.3% 100%),
      linear-gradient(154deg, transparent 0 23.4%, rgba(255, 255, 255, 0.8) 23.4% 26%, transparent 26% 100%),
      linear-gradient(154deg, transparent 0 71.4%, rgba(255, 255, 255, 0.8) 71.4% 74%, transparent 74% 100%),
      radial-gradient(110px 70px at 20% 30%, rgba(127, 194, 67, 0.26), transparent 72%),
      radial-gradient(130px 90px at 82% 68%, rgba(127, 194, 67, 0.18), transparent 72%),
      radial-gradient(70px 46px at 66% 18%, rgba(127, 194, 67, 0.14), transparent 72%),
      #EDF1E6;
    border: 1px solid rgba(20, 23, 28, 0.1);
  }

  .oxiclear-legacy-contact-page__map-label {
    position: absolute;
    left: 14px;
    top: 12px;
    font-size: 11px;
    font-weight: var(--oc-w-medium);
    letter-spacing: 0.06em;
    color: var(--oc-contact-ink-3);
    text-transform: uppercase;
  }

  .oxiclear-legacy-contact-page__map-pin {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -100%);
  }

  .oxiclear-legacy-contact-page__pin-icon {
    height: 34px;
    width: auto;
    fill: var(--oc-contact-ink);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  }

  .oxiclear-legacy-contact-page__map-open {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: var(--oc-w-semibold);
    color: var(--oc-contact-ink);
    background: var(--oc-contact-frost-dense);
    border: 1px solid rgba(20, 23, 28, 0.1);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
  }

  .oxiclear-legacy-contact-page__fact { display: grid; gap: 2px; }

  .oxiclear-legacy-contact-page__fact-k {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: var(--oc-w-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oc-contact-ink-2);
  }

  .oxiclear-legacy-contact-page__fact-k::before { content: ""; width: 24px; height: 1px; background: var(--oc-contact-ink-2); }

  .oxiclear-legacy-contact-page__fact-v { font-size: var(--oc-fs-body); color: var(--oc-contact-ink); }
  .oxiclear-legacy-contact-page__fact-v small { display: block; color: var(--oc-contact-ink-3); font-size: var(--oc-fs-small); }

  /* inline SVG icons (oxiclear-legacy-icons): height rides font-size exactly the
     way the retired icon-font glyphs did, baseline dip = 256/1792 em descent */
  .oxiclear-legacy-fa {
    display: inline-block;
    height: 1em;
    width: auto;
    vertical-align: -0.1429em;
    fill: currentColor;
  }
/* END_SECTION:oxiclear-legacy-contact-page */
/* START_SNIPPET:breadcrumb (INDEX:115) */
/* THE one breadcrumb standard (D-197, founder 1 Sep 2026): a small frost
     capsule, identical on every page, sitting at the top of the content and
     under the hero image on pages that have one. Styled here and only here:
     the oversized 52px blurred pill in the facelift shell, the glass-dock
     reskin and the contact override in custom.css are all deleted. No
     backdrop-filter: the capsule rests on the paper stage (module 13, 2.6). */
  nav.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 2px;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.3;
    color: #454c56;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 20, 22, 0.05);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  nav.breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; font-size: 13px; }

  nav.breadcrumb .label-font { font-size: 13px; letter-spacing: 0; text-transform: none; }

  nav.breadcrumb .breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 6px;
    color: #454c56;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border-radius: 999px;
    transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  nav.breadcrumb .breadcrumb-item a:hover { color: #14171c; background: none; }

  nav.breadcrumb .breadcrumb-item a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  nav.breadcrumb .breadcrumb-divider { color: #8a919d; padding: 0 1px; }

  nav.breadcrumb .breadcrumb-item[aria-current="page"],
  nav.breadcrumb > span:not(.breadcrumb-item):not(.breadcrumb-divider) {
    padding: 0 6px;
    color: #14171c;
    font-weight: 600;
  }

  /* THE one placement standard (D-200, founder 1 Sep 2026). Two slots, same
     geometry: .oc-hero-crumbs is the in-section slot directly under a hero
     banner; #breadcrumbs is the layout's slot on pages with no hero image.
     Both bands share the hero images' own width formula, so the capsule's
     left edge always lands on the content band - never outside the dock. */
  #breadcrumbs,
  .oc-hero-crumbs {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1400px);
    margin: 14px auto 0;
    padding: 0;
  }

  @media (max-width: 767px) {
    #breadcrumbs,
    .oc-hero-crumbs {
      width: calc(100% - 20px);
    }
  }
/* END_SNIPPET:breadcrumb */
/* START_SNIPPET:cart-drawer (INDEX:118) */
/* ============================================================
     CART DRAWER SKIN — floating black glass dock (V2.6, 22 Aug 2026)

     Was: a white slab (color-mix(in srgb, var(--oc-dock-ink) 96%, transparent)), square, flush to the
     right edge, painted by oxiclear-facelift-shell. Now: the HEADER
     DOCK detached and stood on its end — same fill, border, radius,
     shadow, blur and saturation as snippets/oxiclear-glass-dock,
     inset from the viewport on every side on the header dock's own
     gutters (14px desktop, 10px mobile).

     WHY THE SELECTORS CARRY WEIGHT. This snippet owns the drawer's
     skin, but the shell and glass-dock layers still hold the old
     white paints and Shopify orders the compiled stylesheet by
     filename — "cart-drawer" lands BEFORE every "oxiclear-*" file,
     so equal specificity loses. Every rule below is therefore written
     one step above its competitor: a `body` prefix for the shell's
     two- and three-part selectors, plus one structural class (or the
     [data-drawer-position] hook) where the competitor reaches three.
     No !important anywhere.

     BLUR BUDGET (Module 13 s2.6: 8 live backdrop-filter surfaces on
     mobile). This drawer used to spend 8 of its own — host, scrim,
     sticky header, sticky bottom, the green CTA, and one per
     recommendation tile. It now spends exactly ONE: the veil on
     .global-drawer__content. The scrim, both bars, the line items,
     the tiles, the chips and the buttons take flat translucent fills.

     CONTRAST. The scrim is widened to the full viewport (section 3),
     so the veil frosts a dimmed page instead of raw warm paper. That is
     what lets the dock's own .55 fill stay. Measured from rendered
     pixels (sample the composited background, hide the glyphs, compare
     against the computed ink), every text surface in this drawer now
     runs 5.05:1 to 18.4:1 across 390 / 768 / 1440, empty and filled. The same .55 fill over an UNDIMMED light page
     is the footer dock, and that measures 4.70:1 — over the AA line by
     a hair, with nothing left for 12px copy. The scrim is the margin.
     ============================================================ */

  /* ---- 1) TOKENS + HOST -------------------------------------
     The theme paints this whole component from --cart-drawer-*.
     Repointing the set here flips every var-driven rule at once —
     hairlines, muted text, scrollbars, the free-shipping track, the
     footer fades — with no per-rule override. The host itself stops
     painting: the veil moves down to .global-drawer__content so the
     panel can float inside it.
     --on-sale-color is shadowed to white on purpose. The store's
     coral (#f26c4f) reads 2.4:1 on the veil, and D-120 already put
     prices in plain ink on the light side; the struck-through compare
     price carries the sale, not a hue.
     The two attribute hooks are weight, not logic: the drawer's ink is
     claimed by oxiclear-facelift-commerce through a three-class :is()
     list, so a plain `body cart-drawer.global-drawer` would leave every
     heading black on the veil. */
  body cart-drawer.global-drawer[data-drawer-position="right"][aria-modal="true"] {
    --cart-drawer-color: var(--oc-dock-glass-dense);
    --cart-drawer-text-color: var(--oc-dock-ink);
    --cart-drawer-text-color-transparent10: color-mix(in srgb, var(--oc-dock-ink) 10%, transparent);
    --cart-drawer-text-color-transparent25: color-mix(in srgb, var(--oc-dock-ink) 18%, transparent);
    --cart-drawer-text-color-transparent40: color-mix(in srgb, var(--oc-dock-ink) 34%, transparent);
    --cart-drawer-text-color-transparent50: color-mix(in srgb, var(--oc-dock-ink) 45%, transparent);
    --cart-drawer-text-color-transparent70: color-mix(in srgb, var(--oc-dock-ink) 72%, transparent);
    --cart-drawer-border-color: var(--oc-dock-rule);
    --oc-pill-face: rgba(28, 177, 66, .20);
    --oc-pill-edge: rgba(28, 177, 66, .55);
    --oc-pill-face-hover: rgba(28, 177, 66, .32);
    --oc-pill-ink: #07270b;
    --on-sale-color: var(--oc-dock-ink);
    --oc-cart-rail: var(--oc-dock-glass-dense);
    color: var(--oc-dock-ink);
    background-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ---- 2) THE VEIL: the dock recipe, once -------------------
     The single backdrop-filter in this file. The [data-drawer-position]
     hook is here for weight, not for logic: theme.min.css zeroes the
     radius at three classes whenever the secondary rail is present.

     overflow is deliberately reopened. A non-none backdrop-filter makes
     this element a containing block for every positioned descendant, so
     the shell's `overflow: hidden` — harmless while the blur sat on the
     host — now captures .global-drawer--secondary, whose whole job is to
     hang off the panel's left edge, and clips the bestsellers rail out
     of existence. Nothing needs the clip: the header, body and footer
     all paint transparent now, the body clips its own scroll, and the
     rounded corners belong to this element's own background and border,
     which are painted with the radius either way.

     position: relative pins that containing-block role down. The blur
     grants it only where backdrop-filter is live, so without this line
     the rail would measure itself against the panel in a modern browser
     and against the full-height host under prefers-reduced-transparency
     or @supports not — two different sets of offsets for one rule. */
  body cart-drawer.global-drawer[data-drawer-position="right"] .global-drawer__content {
    position: relative;
    height: calc(100% - 28px);
    margin: 14px;
    overflow: visible;
    background-color: var(--cart-drawer-color);
    border: 1px solid var(--oc-dock-rule);
    border-radius: 20px;
    box-shadow:
      inset 0 1px 0 var(--oc-dock-catch),
      0 10px 36px -8px var(--oc-dock-cast);
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body cart-drawer.global-drawer[data-drawer-position="right"] .global-drawer__content {
      -webkit-backdrop-filter: var(--oc-dock-blur);
      backdrop-filter: var(--oc-dock-blur);
    }
  }

  /* ---- 3) SCRIM: flat colour, no backdrop-filter ------------
     Widened to the whole viewport. The theme stopped it 30px inside
     the drawer host because the panel used to be an opaque slab
     covering the rest; a floating panel leaves gutters on all four
     sides, and un-dimmed page showing through them breaks both the
     modal read and the veil's contrast.
     .34 is the balance point: enough dim that white on the veil clears
     5:1 everywhere (the recipe's .55 fill over UNDIMMED paper measures
     4.70 — see the footer dock), and light enough that the panel still
     reads as a dark object floating on a live page rather than a dark
     shape on a dark ground. At .48 the page went dead behind it. */
  body cart-drawer.global-drawer .global-drawer__overlay {
    background-color: rgba(6, 8, 10, .34);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* THE SCRIM CANNOT LIVE INSIDE THE DRAWER.
     .global-drawer__overlay is position:fixed, but the drawer host carries a transform
     for its slide-in — and a transformed ancestor becomes the containing block for
     fixed descendants. So `left:0; right:0` resolve against the 450px host, not the
     viewport, and the overlay measures 450px however it is written. `100vw` does not
     fix it either: it just makes a 1440px box that starts at the host's left edge and
     runs off-screen, while the page to the LEFT stays undimmed.

     The page dim therefore moves to a body pseudo-element, which is outside the
     transformed subtree and resolves against the viewport. inset:0 rather than 100vw,
     so it cannot overhang a classic scrollbar. The in-drawer overlay keeps its click
     target and stops painting. */
  body.js-drawer-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(6, 8, 10, .34);
    pointer-events: none;
  }

  body cart-drawer.global-drawer[data-drawer-position="right"] .global-drawer__overlay {
    background: transparent;
  }

  /* ---- 4) ONE PLANE, DIVIDED BY HAIRLINES -------------------
     The shell gave the header and footer bars their own white fill
     and their own blur. On the veil they need neither: nothing
     scrolls behind them (they are flex items, not sticky), so the
     panel reads as a single sheet of glass. The theme's two
     fade-to-colour gradients go with them — a gradient into a
     translucent fill is a smudge, and the hairline already says
     "there is more below". */
  body cart-drawer.global-drawer .global-drawer__sticky-header,
  body cart-drawer.global-drawer .global-drawer__sticky-bottom {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body cart-drawer.global-drawer .global-drawer__sticky-bottom::after,
  body cart-drawer.global-drawer .global-drawer__footer::after {
    background: none;
  }

  body cart-drawer.global-drawer .global-drawer__sticky-header::after {
    background-color: color-mix(in srgb, var(--oc-dock-ink) 14%, transparent);
  }

  body cart-drawer.global-drawer .global-drawer__footer {
    border-top-color: color-mix(in srgb, var(--oc-dock-ink) 14%, transparent);
  }

  /* ---- 5) CLOSE CONTROL: 44px frost chip -------------------- */
  body cart-drawer.global-drawer .global-drawer__close {
    background-color: color-mix(in srgb, var(--oc-dock-ink) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--oc-dock-ink) 18%, transparent);
  }

  body cart-drawer.global-drawer .global-drawer__close:hover,
  body cart-drawer.global-drawer .global-drawer__close:focus-visible {
    color: var(--oc-dock-ink);
    background-color: rgba(28, 177, 66, .28);
    border-color: rgba(28, 177, 66, .5);
  }

  /* ---- 6) LINE ITEMS ---------------------------------------- */
  body cart-drawer.global-drawer .cart-drawer__product_card {
    background-color: color-mix(in srgb, var(--oc-dock-ink) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--oc-dock-ink) 13%, transparent);
    box-shadow: none;
  }

  body cart-drawer.global-drawer .cart-drawer__product_card:not(:last-of-type) {
    border-bottom-color: color-mix(in srgb, var(--oc-dock-ink) 13%, transparent);
  }

  /* Product photography is shot on white, so on the dark panel it needs
     a plate under it or it floats as a ragged white blob. align-self
     keeps that plate the size of the photo: the image column is a flex
     item and was stretching to the full height of the line, which on the
     old white panel was invisible and on this one is a white slab. */
  body cart-drawer.global-drawer .cart-drawer__product_card--image {
    align-self: start;
    background-color: color-mix(in srgb, var(--oc-dock-ink) 8%, transparent);
  }

  /* badges are information, not actions (glass-dock section 7):
     a quiet frost chip, never the theme's solid black */
  body cart-drawer.global-drawer .cart-drawer__product_card--badge {
    color: var(--oc-dock-ink);
    background-color: color-mix(in srgb, var(--oc-dock-ink) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--oc-dock-ink) 22%, transparent);
  }

  body cart-drawer.global-drawer .cart-drawer__product-card--quantity {
    background-color: color-mix(in srgb, var(--oc-dock-ink) 7%, transparent);
    border-color: color-mix(in srgb, var(--oc-dock-ink) 22%, transparent);
  }

  body cart-drawer.global-drawer .cart-drawer__product-card--quantity--button:hover,
  body cart-drawer.global-drawer .cart-drawer__product-card--quantity--button:focus-visible {
    background-color: rgba(28, 177, 66, .26);
  }

  body cart-drawer.global-drawer .cart-drawer__product-card--remove {
    background-color: color-mix(in srgb, var(--oc-dock-ink) 12%, transparent);
    border-color: color-mix(in srgb, var(--oc-dock-ink) 22%, transparent);
  }

  body cart-drawer.global-drawer .cart-drawer__product-card--remove:hover,
  body cart-drawer.global-drawer .cart-drawer__product-card--remove:focus-visible {
    color: #07270b;
    background-color: #5fd75c;
    border-color: #5fd75c;
  }

  body cart-drawer.global-drawer .errors {
    color: #ffc7bb;
    background-color: rgba(208, 46, 46, .22);
    border-color: rgba(255, 130, 110, .5);
  }

  /* ---- 7) FOOTER ACTIONS ------------------------------------
     Frost pill shipped as its no-blur face (frost-pills v2, 23 Aug):
     the drawer spends its one blur surface on the veil, and translucent
     white over the veil goes milky - so the pill is near-solid white,
     dead flat, green in the glow only. */
  body cart-drawer.global-drawer .global-drawer__footer .cart-drawer__footer--button:not(.btn--secondary) {
    color: var(--oc-pill-ink);
    font-weight: var(--oc-w-semibold);
    background-color: var(--oc-pill-face);
    border: 1px solid var(--oc-pill-edge);
    border-radius: 999px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body cart-drawer.global-drawer .global-drawer__footer .cart-drawer__footer--button:not(.btn--secondary):hover,
  body cart-drawer.global-drawer .global-drawer__footer .cart-drawer__footer--button:not(.btn--secondary):focus-visible {
    background-color: var(--oc-pill-face-hover);
  }

  body cart-drawer.global-drawer .global-drawer__footer .cart-drawer__footer--button.btn--secondary {
    color: var(--oc-dock-ink);
    font-weight: var(--oc-w-semibold);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--oc-dock-ink) 26%, transparent);
    border-radius: 999px;
  }

  body cart-drawer.global-drawer .global-drawer__footer .cart-drawer__footer--button.btn--secondary:hover,
  body cart-drawer.global-drawer .global-drawer__footer .cart-drawer__footer--button.btn--secondary:focus-visible {
    background-color: color-mix(in srgb, var(--oc-dock-ink) 8%, transparent);
  }

  /* ---- 8) EMPTY STATE: the "OxiClear Best Sellers" key ------ */
  body cart-drawer.global-drawer .cart-drawer__empty-btn-container .cart-drawer__empty-btn {
    color: var(--oc-pill-ink);
    font-weight: var(--oc-w-semibold);
    background-color: var(--oc-pill-face);
    border: 1px solid var(--oc-pill-edge);
    border-radius: 999px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body cart-drawer.global-drawer .cart-drawer__empty-btn-container .cart-drawer__empty-btn:hover,
  body cart-drawer.global-drawer .cart-drawer__empty-btn-container .cart-drawer__empty-btn:focus-visible {
    background-color: var(--oc-pill-face-hover);
  }

  /* ---- 9) BESTSELLERS RAIL ----------------------------------
     The founder's empty-cart ask. A second, quieter dock panel hung
     off the left of the veil on the same 14px gap and 20px radius,
     with a FLAT fill and no backdrop-filter — the rail sits on the
     scrim, so it needs no frost of its own and the drawer stays at
     one blur surface. Its drop shadow is left to the theme: the rail
     clips its own overflow for the slide-in, so a shadow on the inner
     panel would be cut off, and the outer rule that carries it is a
     four-class [aria-hidden] selector not worth outbidding for a
     shadow that barely reads against the scrim.
     top/height are 0/100% rather than the panel's 14px inset: the veil's
     backdrop-filter has made .global-drawer__content the rail's
     containing block, so 0 already means "level with the panel". The
     14px gap between the two panels is bought on `right` instead.
     The fill is denser than the veil (.86, not .55) and carries no
     frost. A .55 flat fill over an unblurred page reads as a smudged
     window, not a panel — and buying it a frost of its own would double
     the drawer's blur cost. Solid-and-quiet is also the right hierarchy:
     the cart is the glass, the rail is the shelf beside it.
     Scoped to 768+ because that is where the theme makes the rail a
     detached absolute panel at all. Below it, the rail is a plain
     in-flow block of scrolling tiles inside the drawer, and a panel
     fill or a height here would strand a dead slab under it. */
  @media screen and (min-width: 768px) {
    body cart-drawer.global-drawer[data-drawer-position="right"] .global-drawer--secondary {
      top: 0;
      right: calc(100% + 14px);
      height: 100%;
      border-radius: 20px;
    }

    body cart-drawer.global-drawer[data-drawer-position="right"] .global-drawer--secondary__content {
      background-color: var(--oc-cart-rail);
      border: 1px solid color-mix(in srgb, var(--oc-dock-ink) 17%, transparent);
      border-radius: 20px;
      box-shadow: none;
    }
  }

  /* tiles: light-on-white in every other layer, so they are repainted
     whole here — and stripped of the blur(18px) glass-dock gives every
     .product-card-basic on the site */
  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic {
    color: var(--oc-dock-ink);
    padding: 12px;
    background: color-mix(in srgb, var(--oc-dock-ink) 5%, transparent);
    border: 1px solid var(--oc-dock-rule);
    border-radius: 14px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic__price,
  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic__vendor {
    color: var(--oc-dock-ink);
  }

  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic__price {
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-semibold);
  }

  /* 44px on the tile's title link, the same way the shell already does it
     for a cart line item's title. It measured 39px here. */
  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic__title a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-semibold);
    line-height: 1.35;
    letter-spacing: -.005em;
  }

  /* the photo plate is a grid item and was stretching to the full tile
     height, so a 88px square photo sat at the top of a 220px slab of
     white. Barely visible against the old white panel; a glaring hole on
     the dark one. Size it to the photo. */
  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic__image {
    align-self: start;
  }

  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic .btn--underlined-with-icon {
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: var(--oc-dock-ink);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-semibold);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--oc-dock-ink) 26%, transparent);
    border-radius: 999px;
  }

  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic .btn--underlined-with-icon:hover,
  body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic .btn--underlined-with-icon:focus-visible {
    background: color-mix(in srgb, var(--oc-dock-ink) 8%, transparent);
  }

  @media (hover: hover) and (pointer: fine) {
    body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic:hover {
      border-color: color-mix(in srgb, var(--oc-dock-ink) 28%, transparent);
      box-shadow:
        0 10px 26px rgba(0, 0, 0, .3);
    }

    body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic .btn--underlined-with-icon:hover {
      background: rgba(28, 177, 66, .26);
      border-color: rgba(28, 177, 66, .5);
    }
  }

  /* ---- 10) CART NOTE MODAL ----------------------------------
     Off in settings today, but one toggle away from a white sheet
     under white text. Opaque, so it cannot cost a second blur. */
  body cart-drawer.global-drawer .cart-drawer__note--modal {
    background-color: rgba(9, 11, 13, .96);
    box-shadow: 0 -20px 48px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body cart-drawer.global-drawer .cart-drawer__note--textarea {
    color: var(--oc-dock-ink);
    background-color: color-mix(in srgb, var(--oc-dock-ink) 8%, transparent);
  }

  body cart-drawer.global-drawer .cart-drawer__note--close-btn {
    color: #07270b;
    background-color: color-mix(in srgb, var(--oc-dock-ink) 8%, transparent);
    border: 1px solid var(--oc-dock-rule);
  }

  /* ---- 11) MOBILE: the header dock's own gutters ------------ */
  @media screen and (max-width: 767px) {
    body cart-drawer.global-drawer[data-drawer-position="right"] .global-drawer__content {
      height: calc(100% - 20px);
      margin: 10px;
      border-radius: 16px;
    }

    /* below 768 the bestsellers rail is in flow inside the panel, and
       the theme rules a hairline through its heading, masking the middle
       with an opaque chip. Both were drawn for an opaque panel; on glass
       the chip is a dark patch and the line shows through it. Heading
       alone — on a 310px block it was decoration anyway. */
    body cart-drawer.global-drawer .global-drawer--secondary__header::after {
      display: none;
    }

    body cart-drawer.global-drawer .global-drawer--secondary__header h5 {
      padding-left: 0;
      background-color: transparent;
    }
  }

  /* ---- 12) NO-FROST FALLBACKS ------------------------------
     Opaque DARK, never white: the text on this panel is white.
     Flipping the two fill tokens carries the veil, the rail, the mobile
     heading chip and the theme's footer fades together. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body cart-drawer.global-drawer[data-drawer-position="right"][aria-modal="true"] {
      --cart-drawer-color: var(--oc-dock-ground);
      --oc-cart-rail: var(--oc-dock-ground);
    }
  }

  @media (prefers-color-scheme: dark) {
    body cart-drawer.global-drawer[data-drawer-position="right"][aria-modal="true"] {
      --oc-pill-face: rgba(255, 255, 255, .92);
      --oc-pill-edge: rgba(255, 255, 255, .96);
      --oc-pill-face-hover: #ffffff;
      --oc-pill-ink: #07270b;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    body cart-drawer.global-drawer[data-drawer-position="right"][aria-modal="true"] {
      --cart-drawer-color: var(--oc-dock-ground);
      --oc-cart-rail: var(--oc-dock-ground);
    }

    body cart-drawer.global-drawer[data-drawer-position="right"] .global-drawer__content {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    body cart-drawer.global-drawer .global-drawer__overlay {
      background-color: rgba(6, 8, 10, .72);
    }
  }
/* END_SNIPPET:cart-drawer */
/* START_SNIPPET:oxiclear-air-teaser (INDEX:154) */
/* The live air reading in the dock. A control on an already-blurred surface, so
     it carries no backdrop-filter of its own (module 13 §2.6: never stack blur). */
  /* THE DOCK MUST NEVER GROW A SECOND ROW. The shell only forbids wrapping between
     990px and 1199px, so above 1200px a long enough reading could push the icon row
     onto its own line and double the header. Two guarantees, belt and braces: the
     reading is bounded and never wraps inside itself, and wherever this capsule is
     present the header's right side is told not to wrap either. */
  .header-section .site-header__wrapper__right:has(.oc-air-teaser) { flex-wrap: nowrap; }
  .header-section .site-header__links:has(.oc-air-teaser) { flex: 0 0 auto; }

  .oc-air-teaser {
    flex: 0 0 auto;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    transition: border-color 240ms cubic-bezier(.16, 1, .3, 1);
  }

  /* the base display above would defeat the hidden attribute (author rules beat
     the UA's [hidden] { display: none }), leaving an EMPTY glass pill in the dock
     before the first reading lands - most visibly a stray capsule wrapping the
     mobile bar onto a second row */
  .oc-air-teaser[hidden] { display: none; }

  .oc-air-teaser:hover,
  .oc-air-teaser:focus-visible { border-color: rgba(255, 255, 255, .42); }

  .oc-air-teaser__dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--oc-air-teaser-band, #C1C1C2);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .92);
  }

  .oc-air-teaser__value {
    font-size: 19px;
    font-weight: var(--oc-w-bold, 700);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
  }

  .oc-air-teaser__band { font-size: 14px; font-weight: var(--oc-w-semibold, 600); }

  .oc-air-teaser__place {
    font-size: 13px;
    font-weight: var(--oc-w-medium, 500);
    color: rgba(255, 255, 255, .72);
    /* a town name and no more, whatever the service sends */
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* It sheds parts rather than squeezing the wordmark: town goes first, then the
     band label, and the number never goes. */
  @media screen and (max-width: 1260px) {
    .oc-air-teaser__place { display: none; }
  }

  @media screen and (max-width: 900px) {
    .oc-air-teaser { height: 36px; padding: 0 13px; gap: 8px; }
    .oc-air-teaser__value { font-size: 17px; }
    .oc-air-teaser__band { font-size: 13px; }
  }

  @media screen and (max-width: 460px) {
    .oc-air-teaser { padding: 0 11px; gap: 7px; }
    .oc-air-teaser__band { display: none; }
  }

  /* The MOBILE BAR instance (D-190). The desktop icon row is display:none under
     the nav collapse, so phones and tablets read the capsule from the bar's left
     cell, beside the hamburger. Dot + number only, whatever the width: the left
     cell holds ~112px beside a 44px hamburger at 375px, and a reading that
     appears and disappears words as the phone rotates reads as broken. The band
     word and the town stay one tap away on the Air Check card, and in the title. */
  .site-nav--mobile .oc-air-teaser {
    position: relative;
    height: 36px;
    padding: 0 10px;
    gap: 6px;
    vertical-align: middle;
  }

  /* the 36px capsule keeps a 48px touch target (module 13, --target) without
     spending a pixel of the bar */
  .site-nav--mobile .oc-air-teaser::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
  }

  .site-nav--mobile .oc-air-teaser__value { font-size: 16px; }

  .site-nav--mobile .oc-air-teaser__band,
  .site-nav--mobile .oc-air-teaser__place { display: none; }
/* END_SNIPPET:oxiclear-air-teaser */
/* START_SNIPPET:oxiclear-facelift-actions (INDEX:158) */
/* Target lists use :where(), not :is(), on purpose. :is() takes the HIGHEST
     specificity of its arguments - this list contains two-class selectors, so the
     rule scored (0,5,2) and nothing downstream could override it without !important.
     :where() contributes zero, leaving these rules at (0,3,1): still ahead of a bare
     section rule, but overridable by any section variant that needs to differ. */
  body.oc-facelift {
    /* Frost pills, second founder call 23 Aug PM: on white grounds the white glass
       melted into the cards ("white on white"), so in-content actions carry a
       translucent brand-green tint - GREEN frosted glass, not the old solid green.
       White frost still owns imagery and coloured grounds (hero, Air Check, drawer,
       footer). Dead flat everywhere - no inset bevels, ever. */
    --oc-action-primary-background: rgba(28, 177, 66, .2);
    --oc-action-primary-background-hover: rgba(28, 177, 66, .32);
    --oc-action-primary-border: rgba(28, 177, 66, .55);
    --oc-action-primary-border-hover: rgba(28, 177, 66, .75);
    --oc-action-primary-text: #07270b;
    --oc-action-secondary-background: rgba(28, 177, 66, .08);
    --oc-action-secondary-background-hover: rgba(28, 177, 66, .16);
    --oc-action-secondary-border: rgba(28, 177, 66, .32);
    --oc-action-secondary-border-hover: rgba(28, 177, 66, .5);
    --oc-action-secondary-text: #07270b;
    --oc-action-height: 48px;
    --oc-action-radius: 999px;   /* pill: founder's call 20 Aug, over the mockup's 14px */
    --oc-action-shadow: 0 10px 26px rgba(7, 39, 11, .1), 0 2px 10px rgba(28, 177, 66, .2);
    --oc-action-shadow-hover: 0 12px 30px rgba(7, 39, 11, .12), 0 4px 16px rgba(28, 177, 66, .34);
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-aircheck__button,
    .oc-legacy-story__button,
    .oc-journal__cta,
    .legacy-collection-page__load-more,
    .oc-legacy-pdp__add,
    .oc-shop__add,
    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button--unbranded,
    .product-section .product--add-to-cart-button,
    .product-section .product-form__submit.button--primary,
    .product-section .shopify-payment-button__button--unbranded,
    product-card.grid-view-item .quick-add-button-desktop,
    .product-card-basic__add-button button,
    .product-card-basic__add-button a,
    .legacy-search__form .btn,
    .legacy-article__comment-form .btn,
    .oxiclear-legacy-contact-page button[type="submit"],
    .oxiclear-legacy-native-contact button[type="submit"],
    .oxiclear-legacy-technical__report a,
    .legacy-cart__button,
    .cart--button-checkout,
    .cart--button-update,
    .legacy-customer__button,
    .grid__item--customer-accounts .account-section--btn,
    .account-addresses__grid .account-section--btn,
    #HideRecoverPasswordLink,
    .grid__item--page > p > .btn
  ) {
    --oc-action-background: var(--oc-action-primary-background);
    --oc-action-background-hover: var(--oc-action-primary-background-hover);
    --oc-action-border: var(--oc-action-primary-border);
    --oc-action-border-hover: var(--oc-action-primary-border-hover);
    --oc-action-text: var(--oc-action-primary-text);
    --oc-action-elevation: var(--oc-action-shadow);
    --oc-action-elevation-hover: var(--oc-action-shadow-hover);
    min-height: var(--oc-action-height);
    padding: 0 22px;
    border: 1px solid var(--oc-action-border);
    border-radius: var(--oc-action-radius);
    color: var(--oc-action-text);
    background: var(--oc-action-background);
    box-shadow: var(--oc-action-elevation);
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    letter-spacing: var(--oc-tr-button);
    line-height: var(--oc-lh-button);
    text-align: center;
    text-decoration: none;
    text-transform: none;
    vertical-align: middle;
    cursor: pointer;
    appearance: none;
    transition:
      color var(--oc-duration-fast) ease,
      background-color var(--oc-duration-fast) ease,
      border-color var(--oc-duration-fast) ease,
      box-shadow var(--oc-duration-base) var(--oc-ease-fluid),
      transform var(--oc-duration-fast) ease;
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-aircheck__button--quiet,
    .oc-journal__cta--quiet,
    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button--unbranded,
    .product-section .shopify-payment-button__button--unbranded,
    .legacy-cart__button--secondary,
    .cart--button-update,
    .legacy-customer__button--secondary,
    .customer-account-cancel,
    #HideRecoverPasswordLink
  ) {
    --oc-action-background: var(--oc-action-secondary-background);
    --oc-action-background-hover: var(--oc-action-secondary-background-hover);
    --oc-action-border: var(--oc-action-secondary-border);
    --oc-action-border-hover: var(--oc-action-secondary-border-hover);
    --oc-action-text: var(--oc-action-secondary-text);
    --oc-action-elevation: 0 8px 20px rgba(7, 39, 11, .08);
    --oc-action-elevation-hover: 0 10px 24px rgba(7, 39, 11, .11);
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button--unbranded,
    .product-section .shopify-payment-button__button--unbranded
  ) {
    min-height: var(--oc-action-height) !important;
    border: 1px solid var(--oc-action-border) !important;
    border-radius: var(--oc-action-radius) !important;
    color: var(--oc-action-text) !important;
    background: var(--oc-action-background) !important;
    box-shadow: var(--oc-action-elevation) !important;
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-aircheck__button,
    .oc-legacy-story__button,
    .oc-journal__cta,
    .legacy-collection-page__load-more,
    .oc-legacy-pdp__add,
    .oc-shop__add,
    .product-section .product--add-to-cart-button,
    .product-section .product-form__submit.button--primary,
    product-card.grid-view-item .quick-add-button-desktop,
    .product-card-basic__add-button button,
    .product-card-basic__add-button a,
    .legacy-search__form .btn,
    .legacy-article__comment-form .btn,
    .oxiclear-legacy-contact-page button[type="submit"],
    .oxiclear-legacy-native-contact button[type="submit"],
    .oxiclear-legacy-technical__report a,
    .legacy-cart__button,
    .cart--button-checkout,
    .cart--button-update,
    .legacy-customer__button,
    .grid__item--customer-accounts .account-section--btn,
    .account-addresses__grid .account-section--btn,
    #HideRecoverPasswordLink,
    .grid__item--page > p > .btn
  ):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--oc-action-border-hover);
    color: var(--oc-action-text);
    background: var(--oc-action-background-hover);
    box-shadow: var(--oc-action-elevation-hover);
    transform: translateY(-1px);
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button--unbranded,
    .product-section .shopify-payment-button__button--unbranded
  ):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--oc-action-border-hover) !important;
    color: var(--oc-action-text) !important;
    background: var(--oc-action-background-hover) !important;
    box-shadow: var(--oc-action-elevation-hover) !important;
    transform: translateY(-1px);
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-aircheck__button,
    .oc-legacy-story__button,
    .legacy-collection-page__load-more,
    .oc-legacy-pdp__add,
    .oc-shop__add,
    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button--unbranded,
    .product-section .product--add-to-cart-button,
    .product-section .product-form__submit.button--primary,
    .product-section .shopify-payment-button__button--unbranded,
    product-card.grid-view-item .quick-add-button-desktop,
    .product-card-basic__add-button button,
    .product-card-basic__add-button a,
    .legacy-search__form .btn,
    .legacy-article__comment-form .btn,
    .oxiclear-legacy-contact-page button[type="submit"],
    .oxiclear-legacy-native-contact button[type="submit"],
    .oxiclear-legacy-technical__report a,
    .legacy-cart__button,
    .cart--button-checkout,
    .cart--button-update,
    .legacy-customer__button,
    .grid__item--customer-accounts .account-section--btn,
    .account-addresses__grid .account-section--btn,
    #HideRecoverPasswordLink,
    .grid__item--page > p > .btn
  ):active:not(:disabled):not([aria-disabled="true"]) {
    box-shadow: none;
    transform: translateY(1px) scale(.985);
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-aircheck__button,
    .oc-legacy-story__button,
    .legacy-collection-page__load-more,
    .oc-legacy-pdp__add,
    .oc-shop__add,
    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button--unbranded,
    .product-section .product--add-to-cart-button,
    .product-section .product-form__submit.button--primary,
    .product-section .shopify-payment-button__button--unbranded,
    product-card.grid-view-item .quick-add-button-desktop,
    .product-card-basic__add-button button,
    .product-card-basic__add-button a,
    .legacy-search__form .btn,
    .legacy-article__comment-form .btn,
    .oxiclear-legacy-contact-page button[type="submit"],
    .oxiclear-legacy-native-contact button[type="submit"],
    .oxiclear-legacy-technical__report a,
    .legacy-cart__button,
    .cart--button-checkout,
    .cart--button-update,
    .legacy-customer__button,
    .grid__item--customer-accounts .account-section--btn,
    .account-addresses__grid .account-section--btn,
    #HideRecoverPasswordLink,
    .grid__item--page > p > .btn,
    .oc-journal__cta
  ):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-aircheck__button,
    .legacy-collection-page__load-more,
    .oc-legacy-pdp__add,
    .oc-shop__add,
    .product-section .product--add-to-cart-button,
    .product-section .product-form__submit.button--primary,
    product-card.grid-view-item .quick-add-button-desktop,
    .product-card-basic__add-button button,
    .legacy-cart__button,
    .cart--button-checkout,
    .cart--button-update,
    .legacy-customer__button,
    .grid__item--customer-accounts .account-section--btn,
    .account-addresses__grid .account-section--btn,
    #HideRecoverPasswordLink
  ):where(:disabled, [aria-disabled="true"]),
  body.oc-facelift [id="MainContent"] :where(.oc-aircheck__button, .oc-legacy-pdp__add)[aria-busy="true"] {
    opacity: .45;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
  }

  body.oc-facelift [id="MainContent"] :where(.oc-aircheck__button, .oc-legacy-pdp__add)[aria-busy="true"] {
    opacity: .72;
    cursor: progress;
  }

  @media (prefers-reduced-motion: reduce) {
    body.oc-facelift [id="MainContent"] :where(
      .oc-aircheck__button,
      .oc-legacy-story__button,
      .legacy-collection-page__load-more,
      .oc-legacy-pdp__add,
    .oc-shop__add,
      .product-section .product--add-to-cart-button,
      .product-section .product-form__submit.button--primary,
      product-card.grid-view-item .quick-add-button-desktop,
      .product-card-basic__add-button button,
      .product-card-basic__add-button a,
      .legacy-search__form .btn,
      .legacy-article__comment-form .btn,
      .oxiclear-legacy-contact-page button[type="submit"],
      .oxiclear-legacy-native-contact button[type="submit"],
      .oxiclear-legacy-technical__report a,
      .legacy-cart__button,
      .cart--button-checkout,
      .cart--button-update,
      .legacy-customer__button,
      .grid__item--customer-accounts .account-section--btn,
      .account-addresses__grid .account-section--btn,
      #HideRecoverPasswordLink,
      .grid__item--page > p > .btn
    ) {
      transition: none;
    }
  }
/* END_SNIPPET:oxiclear-facelift-actions */
/* START_SNIPPET:oxiclear-facelift-content (INDEX:160) */
body.oc-facelift :is(
    .oxiclear-legacy-native-page,
    .oxiclear-legacy-benefits,
    .oxiclear-legacy-company,
    .oxiclear-legacy-faq,
    .oxiclear-legacy-how-to,
    .oxiclear-legacy-native-content,
    .oxiclear-legacy-impact,
    .oxiclear-legacy-technical,
    .oxiclear-legacy-contact-page,
    .oxiclear-legacy-native-contact,
    .oxiclear-legacy-testimonials,
    .legacy-blog,
    .legacy-article,
    .legacy-error-page
  ) {
    color: var(--oc-color-ink-soft);
    /* No background here. This used to paint an aqua corner wash over #fff and was
       already dead - the glass dock overrode it - and aqua is banned as a system
       colour. The stage is declared once, in oxiclear-glass-dock. */
  }

  body.oc-facelift :is(
    .oxiclear-legacy-benefits__banner,
    .oxiclear-legacy-company__banner,
    .oxiclear-legacy-faq__banner,
    .oxiclear-legacy-impact__banner,
    .oxiclear-legacy-technical__banner,
    .oxiclear-legacy-technical__2020-banner,
    .oxiclear-legacy-contact-page__banner,
    .oxiclear-legacy-testimonials > img
  ) {
    display: block;
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1400px);
    height: auto;
    max-height: min(52vw, 560px);
    margin: clamp(12px, 2vw, 26px) auto 0;
    object-fit: cover;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--oc-radius-panel);
    box-shadow: var(--oc-shadow-card);
  }

  body.oc-facelift :is(
    .oxiclear-legacy-native-page,
    .oxiclear-legacy-benefits,
    .oxiclear-legacy-company,
    .oxiclear-legacy-faq,
    .oxiclear-legacy-how-to,
    .oxiclear-legacy-native-content,
    .oxiclear-legacy-impact,
    .oxiclear-legacy-technical,
    .oxiclear-legacy-contact-page,
    .oxiclear-legacy-native-contact,
    .oxiclear-legacy-testimonials,
    .legacy-blog,
    .legacy-article
  ) .oxiclear-legacy-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(1170px, calc(100vw - 40px));
    padding: 0;
    margin: clamp(32px, 4vw, 56px) 0 14px 50%;
    transform: translateX(-50%);
  }

  body.oc-facelift :is(
    .oxiclear-legacy-native-page__inner,
    .oxiclear-legacy-native-contact,
    .oxiclear-legacy-how-to,
    .oxiclear-legacy-native-content,
    .legacy-blog__inner,
    .legacy-article__inner
  ) > .oxiclear-legacy-divider {
    margin-top: 0;
  }

  body.oc-facelift :is(
    .oxiclear-legacy-native-page,
    .oxiclear-legacy-benefits,
    .oxiclear-legacy-company,
    .oxiclear-legacy-faq,
    .oxiclear-legacy-how-to,
    .oxiclear-legacy-native-content,
    .oxiclear-legacy-impact,
    .oxiclear-legacy-technical,
    .oxiclear-legacy-contact-page,
    .oxiclear-legacy-native-contact,
    .oxiclear-legacy-testimonials,
    .legacy-blog,
    .legacy-article
  ) .oxiclear-legacy-divider span {
    flex: 1 1 auto;
    border-top: 2px solid #0b2f33;
  }

  body.oc-facelift :is(
    .oxiclear-legacy-native-page,
    .oxiclear-legacy-benefits,
    .oxiclear-legacy-company,
    .oxiclear-legacy-faq,
    .oxiclear-legacy-how-to,
    .oxiclear-legacy-native-content,
    .oxiclear-legacy-impact,
    .oxiclear-legacy-technical,
    .oxiclear-legacy-contact-page,
    .oxiclear-legacy-native-contact,
    .oxiclear-legacy-testimonials,
    .legacy-blog,
    .legacy-article
  ) .oxiclear-legacy-divider img {
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
  }

  body.oc-facelift :is(
    .oxiclear-legacy-native-page__inner > h1,
    .oxiclear-legacy-benefits__title,
    .oxiclear-legacy-company__title,
    .oxiclear-legacy-faq > h1,
    .oxiclear-legacy-how-to > h1,
    .oxiclear-legacy-native-content > h1,
    .oxiclear-legacy-impact > h1,
    .oxiclear-legacy-technical > h1,
    .oxiclear-legacy-native-contact > h1,
    .oxiclear-legacy-testimonials h1
  ) {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 980px);
    margin: 0 auto clamp(22px, 3vw, 42px);
    padding-bottom: 0;
    /* #2d2d2d, the ink the homepage headings use. This was var(--oc-color-ink),
       which resolves to pure #000 and read harder than anything on the homepage. */
    color: #2d2d2d;
    text-align: center;
    text-transform: none;
  }

  {% comment %} The contact page left this list on 1 Sep 2026 (D-196): its
     headline lost the "..." dots this rule exists to tuck, and the tiny
     line-height was crushing the new two-part headline's spans. {% endcomment %}
  body.oc-facelift :is(
    .oxiclear-legacy-benefits__title,
    .oxiclear-legacy-company__title,
    .oxiclear-legacy-faq > h1,
    .oxiclear-legacy-how-to > h1,
    .oxiclear-legacy-impact > h1,
    .oxiclear-legacy-technical > h1,
    .oxiclear-legacy-testimonials h1
  ) span {
    display: inline-block;
    line-height: .35;
  }

  body.oc-facelift .oxiclear-legacy-native-content {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1180px);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) 0 var(--oc-space-section);
  }

  body.oc-facelift :is(.legacy-blog__inner, .legacy-article__inner, .legacy-error-page__inner) {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1180px);
    margin-inline: auto;
  }

  body.oc-facelift :is(.legacy-blog, .legacy-article, .legacy-error-page) {
    padding: var(--oc-space-section) 0;
  }

  body.oc-facelift :is(.legacy-blog, .legacy-article) {
    padding-top: clamp(32px, 4vw, 56px);
  }

  body.oc-facelift .shopify-policy__container {
    width: min(860px, calc(100% - 32px));
    max-width: none;
    margin-inline: auto;
    padding: clamp(32px, 3vw, 48px) 0 var(--oc-space-section);
    color: var(--oc-color-ink-soft);
  }

  body.oc-facelift .shopify-policy__title {
    margin: 0;
    text-align: center;
  }

  body.oc-facelift .shopify-policy__title h1 {
    display: block;
    margin: 0 auto clamp(24px, 3vw, 36px);
    color: var(--oc-color-ink);
    text-wrap: balance;
  }

  body.oc-facelift .shopify-policy__body {
    overflow-wrap: anywhere;
  }

  body.oc-facelift .shopify-policy__body :is(h2, h3) {
    margin: clamp(30px, 4vw, 44px) 0 14px;
    color: var(--oc-color-ink);
    text-align: left;
    text-wrap: balance;
  }

  body.oc-facelift .shopify-policy__body :is(p, ul, ol) {
    margin-top: 0;
    margin-bottom: 18px;
  }

  body.oc-facelift .shopify-policy__body > .rte > p:first-child {
    margin-bottom: clamp(26px, 3vw, 38px);
    color: var(--oc-color-ink-muted);
    text-align: center;
  }

  @media (max-width: 767px) {
    body.oc-facelift :is(
      .oxiclear-legacy-benefits__banner,
      .oxiclear-legacy-company__banner,
      .oxiclear-legacy-faq__banner,
      .oxiclear-legacy-impact__banner,
      .oxiclear-legacy-technical__banner,
      .oxiclear-legacy-technical__2020-banner,
      .oxiclear-legacy-contact-page__banner,
      .oxiclear-legacy-testimonials > img
    ) {
      width: calc(100% - 20px);
      max-height: 310px;
      margin-top: 10px;
      border-radius: 20px;
    }

    body.oc-facelift .oxiclear-legacy-native-content {
      width: calc(100% - 20px);
    }

    body.oc-facelift :is(.legacy-blog, .legacy-article, .legacy-error-page) {
      padding: 48px 0;
    }

    body.oc-facelift :is(.legacy-blog__inner, .legacy-article__inner, .legacy-error-page__inner) {
      width: calc(100% - 20px);
    }
  }

  @media (max-width: 680px) {
    body.oc-facelift :is(
      .oxiclear-legacy-native-page,
      .oxiclear-legacy-benefits,
      .oxiclear-legacy-company,
      .oxiclear-legacy-faq,
      .oxiclear-legacy-how-to,
      .oxiclear-legacy-native-content,
      .oxiclear-legacy-impact,
      .oxiclear-legacy-technical,
      .oxiclear-legacy-contact-page,
      .oxiclear-legacy-native-contact,
      .oxiclear-legacy-testimonials,
      .legacy-blog,
      .legacy-article
    ) .oxiclear-legacy-divider {
      width: min(1170px, calc(100vw - 20px));
    }
  }
/* END_SNIPPET:oxiclear-facelift-content */
/* START_SNIPPET:oxiclear-facelift-foundation (INDEX:161) */
body.oc-facelift {
    --oc-color-canvas: var(--body-color, #fff);
    --oc-color-surface: #fff;
    --oc-color-surface-subtle: var(--body-secondary-color, #f3f3f3);
    --oc-color-surface-soft: #f1f2f3;
    --oc-color-ink: var(--text-color, #000);
    --oc-color-ink-soft: #414141;
    --oc-color-ink-muted: #666;
    --oc-color-night: #242424;
    --oc-color-shell: #2e2e2e;
    --oc-color-line: #e1e1e1;
    --oc-color-line-strong: #c1c1c2;

    /* THE focus colour, and the only one. Module 13 §10.2: one ring on every
       focusable element, graphite ink on light surfaces, white on Graphite, and
       NEVER green — a focus ring is not an action. The page stage is always warm
       paper even when the reader is in dark mode (D-230), so the page value is
       graphite full stop; the docks flip themselves in oxiclear-facelift-shell,
       which repoints this to their own ink.

       Seven different tokens used to answer this question and three of them
       resolved to #1CB142, which is how the header, footer, cart and reviews all
       shipped a green ring. They are gone. Anything that draws a focus ring reads
       this variable; nothing declares a focus colour of its own. */
    --focus: #14171C;

    /* NOT a focus colour despite the name, and not to be used as one: the dock
       repoints this to brand green and the shop tabs and Atlas chat read it as an
       accent. Renaming it is a tidy-up round of its own. */
    --oc-color-focus: var(--nav-text-hover, #14171C);
    --oc-color-focus-bright: #14171C;
    --oc-color-sale: var(--on-sale-color, #f26c4f);
    --oc-space-page: clamp(16px, 4vw, 64px);
    --oc-space-section: clamp(56px, 7vw, 108px);
    --oc-radius-control: 14px;
    --oc-radius-card: 22px;
    --oc-radius-panel: 30px;
    --oc-radius-pill: 999px;
    --oc-shadow-card: 0 18px 45px rgba(36, 36, 36, .09), 0 2px 8px rgba(36, 36, 36, .05);
    --oc-shadow-card-hover: 0 26px 64px rgba(36, 36, 36, .14), 0 4px 14px rgba(36, 36, 36, .07);
    --oc-shadow-float: 0 18px 52px rgba(0, 0, 0, .18);
    --oc-glass-light: rgba(255, 255, 255, .78);
    --oc-glass-dark: rgba(46, 46, 46, .84);
    --oc-ease-fluid: cubic-bezier(.22, .72, .22, 1);
    --oc-duration-fast: 160ms;
    --oc-duration-base: 260ms;
    color: var(--oc-color-ink);
    background: var(--oc-color-canvas);
  }

  body.oc-facelift :is(
    .oc-legacy-story__copy h2,
    .oc-legacy-three__header h2,
    .legacy-generic-collection__header h1,
    .legacy-collection-page__header h1,
    .oc-legacy-pdp__title,
    .legacy-search__header h1,
    .legacy-cart__heading h1,
    .legacy-customer__title,
    .shopify-policy__title h1,
    .legacy-error-page__heading h1,
    .oxiclear-legacy-native-page h1,
    .oxiclear-legacy-benefits__title,
    .oxiclear-legacy-company__title,
    .oxiclear-legacy-company__copy h2,
    .oxiclear-legacy-faq > h1,
    .oxiclear-legacy-how-to > h1,
    .oxiclear-legacy-impact h1,
    .oxiclear-legacy-technical h1,
    .oxiclear-legacy-contact-page > h1,
    .oxiclear-legacy-native-contact h1,
    .oxiclear-legacy-testimonials h1
  ) {
    text-wrap: balance;
  }

  body.oc-facelift :is(
    .legacy-collection-product-card,
    .oc-legacy-pdp-card,
    .oc-legacy-three__card,
    .legacy-search__result,
    .legacy-customer__panel,
    .oxiclear-legacy-contact-page__facts article,
    .oxiclear-legacy-native-page__sidebar-section
  ) {
    border: 1px solid color-mix(in srgb, var(--oc-color-line) 84%, transparent);
    border-radius: var(--oc-radius-card);
    box-shadow: var(--oc-shadow-card);
    transition:
      border-color var(--oc-duration-base) ease,
      box-shadow var(--oc-duration-base) var(--oc-ease-fluid),
      transform var(--oc-duration-base) var(--oc-ease-fluid);
  }

  body.oc-facelift :is(
    .legacy-collection-product-card__media,
    .oc-legacy-pdp-card__media,
    .legacy-search__image
  ) {
    overflow: hidden;
    border-radius: calc(var(--oc-radius-card) - 1px) calc(var(--oc-radius-card) - 1px) 0 0;
    background: linear-gradient(145deg, #fff 20%, var(--oc-color-surface-soft));
  }

  body.oc-facelift :is(
    .legacy-collection-product-card__image,
    .oc-legacy-pdp-card__image,
    .legacy-search__image img
  ) {
    transition: transform 480ms var(--oc-ease-fluid);
  }

  body.oc-facelift :is(
    .oc-legacy-story__button,
    .legacy-collection-page__load-more,
    .legacy-generic-collection__button,
    .oc-legacy-pdp__add,
    .legacy-cart__button,
    .legacy-customer__button,
    .legacy-search__form .btn,
    .legacy-article__comment-form .btn,
    .oxiclear-legacy-contact-page button[type="submit"],
    .oxiclear-legacy-native-contact button[type="submit"]
  ) {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    /* No border-radius here. It used to say var(--oc-radius-pill) and never won -
       the button system in oxiclear-facelift-actions owns the shape. */
    transition:
      background-color var(--oc-duration-fast) ease,
      border-color var(--oc-duration-fast) ease,
      box-shadow var(--oc-duration-base) var(--oc-ease-fluid),
      color var(--oc-duration-fast) ease,
      transform var(--oc-duration-fast) ease;
  }

  body.oc-facelift :is(
    .legacy-search__form input,
    .legacy-article__comment-fields input,
    .legacy-article__comment-fields textarea,
    .legacy-cart__notes textarea,
    .legacy-customer input,
    .legacy-customer select,
    .legacy-customer textarea,
    .oxiclear-legacy-contact-page__form input,
    .oxiclear-legacy-contact-page__form textarea,
    .oxiclear-legacy-native-contact input,
    .oxiclear-legacy-native-contact textarea
  ) {
    min-height: 48px;
    border: 1px solid var(--oc-color-line-strong);
    border-radius: var(--oc-radius-control);
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
    transition:
      border-color var(--oc-duration-fast) ease,
      box-shadow var(--oc-duration-fast) ease,
      background-color var(--oc-duration-fast) ease;
  }

  body.oc-facelift :is(
    .legacy-search__form input,
    .legacy-article__comment-fields input,
    .legacy-article__comment-fields textarea,
    .legacy-cart__notes textarea,
    .legacy-customer input,
    .legacy-customer select,
    .legacy-customer textarea,
    .oxiclear-legacy-contact-page__form input,
    .oxiclear-legacy-contact-page__form textarea,
    .oxiclear-legacy-native-contact input,
    .oxiclear-legacy-native-contact textarea
  ):focus {
    border-color: var(--focus);
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent);
  }

  body.oc-facelift :is(
    .site-header,
    .nav-bar,
    .footer-wrapper,
    .oc-legacy-use-cases,
    .oc-legacy-story,
    .oc-legacy-protection-strip,
    .oc-legacy-three,
    .oc-legacy-video-row,
    .legacy-generic-collection,
    .legacy-collection-page,
    .oc-legacy-pdp,
    .oc-legacy-pdp-recommendations,
    .legacy-search,
    .legacy-cart,
    .legacy-article,
    .legacy-error-page,
    .legacy-customer,
    .oxiclear-legacy-native-page,
    .oxiclear-legacy-benefits,
    .oxiclear-legacy-company,
    .oxiclear-legacy-faq,
    .oxiclear-legacy-how-to,
    .oxiclear-legacy-native-content,
    .oxiclear-legacy-impact,
    .oxiclear-legacy-technical,
    .oxiclear-legacy-contact-page,
    .oxiclear-legacy-native-contact,
    .oxiclear-legacy-testimonials
  ) :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  body.oc-facelift :is(
    .legacy-collection-page__accordion summary,
    .oxiclear-legacy-faq__list summary
  ) {
    min-height: 52px;
    transition:
      background-color var(--oc-duration-fast) ease,
      color var(--oc-duration-fast) ease;
  }

  body.oc-facelift :is(
    .legacy-collection-page__accordion summary::after,
    .oxiclear-legacy-faq__list summary::after
  ) {
    transition: transform var(--oc-duration-base) var(--oc-ease-fluid);
  }

  body.oc-facelift :is(
    .legacy-collection-page__accordion[open] summary::after,
    .oxiclear-legacy-faq__list details[open] summary::after
  ) {
    transform: translateY(-50%) rotate(180deg);
  }

  @media (hover: hover) and (pointer: fine) {
    body.oc-facelift :is(
      .legacy-collection-product-card,
      .oc-legacy-pdp-card,
      .oc-legacy-three__card,
      .legacy-search__result,
      .oxiclear-legacy-contact-page__facts article
    ):hover {
      border-color: color-mix(in srgb, var(--oc-color-focus) 42%, var(--oc-color-line));
      box-shadow: var(--oc-shadow-card-hover);
      transform: translateY(-5px);
    }

    body.oc-facelift :is(
      .legacy-collection-product-card,
      .oc-legacy-pdp-card,
      .legacy-search__result
    ):hover :is(
      .legacy-collection-product-card__image,
      .oc-legacy-pdp-card__image,
      .legacy-search__image img
    ) {
      transform: scale(1.035);
    }

    body.oc-facelift :is(
      .oc-legacy-story__button,
      .legacy-collection-page__load-more,
      .legacy-generic-collection__button,
      .oc-legacy-pdp__add,
      .legacy-cart__button,
      .legacy-customer__button,
      .legacy-search__form .btn,
      .legacy-article__comment-form .btn,
      .oxiclear-legacy-contact-page button[type="submit"],
      .oxiclear-legacy-native-contact button[type="submit"]
    ):hover {
      box-shadow: 0 11px 26px rgba(0, 0, 0, .16);
      transform: translateY(-2px);
    }
  }

  body.oc-facelift :is(
    .oc-legacy-story__button,
    .legacy-collection-page__load-more,
    .legacy-generic-collection__button,
    .oc-legacy-pdp__add,
    .legacy-cart__button,
    .legacy-customer__button,
    .legacy-search__form .btn,
    .legacy-article__comment-form .btn,
    .oxiclear-legacy-contact-page button[type="submit"],
    .oxiclear-legacy-native-contact button[type="submit"]
  ):active {
    box-shadow: none;
    transform: translateY(1px) scale(.985);
  }

  @media (prefers-reduced-motion: reduce) {
    body.oc-facelift :is(
      .legacy-collection-product-card,
      .oc-legacy-pdp-card,
      .oc-legacy-three__card,
      .legacy-search__result,
      .legacy-customer__panel,
      .oxiclear-legacy-contact-page__facts article,
      .oxiclear-legacy-native-page__sidebar-section,
      .legacy-collection-product-card__image,
      .oc-legacy-pdp-card__image,
      .legacy-search__image img,
      .oc-legacy-story__button,
      .legacy-collection-page__load-more,
      .legacy-generic-collection__button,
      .oc-legacy-pdp__add,
      .legacy-cart__button,
      .legacy-customer__button,
      .legacy-search__form .btn,
      .legacy-article__comment-form .btn,
      .oxiclear-legacy-contact-page button[type="submit"],
      .oxiclear-legacy-native-contact button[type="submit"],
      .legacy-collection-page__accordion summary,
      .oxiclear-legacy-faq__list summary,
      .legacy-collection-page__accordion summary::after,
      .oxiclear-legacy-faq__list summary::after
    ) {
      scroll-behavior: auto;
      transition: none !important;
    }
  }
/* END_SNIPPET:oxiclear-facelift-foundation */
/* START_SNIPPET:oxiclear-facelift-shell (INDEX:163) */
.header-section,
  .footer-wrapper,
  cart-drawer.global-drawer,
  back-to-top {
    --oc-shell-charcoal: #2e2e2e; --oc-shell-ink: #000000; --oc-shell-ink-soft: #242424;
    --oc-shell-copy: #414141; --oc-shell-mist: #f1f2f3; --oc-shell-cloud: #f3f3f3;
    --oc-shell-white: #ffffff; --oc-shell-aqua: #14171C; --oc-shell-aqua-soft: #14171C;
    --oc-shell-glass: rgba(46, 46, 46, 0.92); --oc-shell-glass-dense: rgba(46, 46, 46, 0.96);
    --oc-shell-ease: 180ms cubic-bezier(0.2, 0.8, 0.2, 1); --oc-shell-ease-long: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* ── The docks (approved mockup, D-2026-09-05-230) ───────────────────────
     The header and footer are one material that follows the reader's theme:
     WHITE frosted glass in light, BLACK frosted glass in dark. Until this
     round both were charcoal #2e2e2e in every condition and the theme carried
     no prefers-color-scheme rule at all.

     These tokens are the docks' own. The legacy --oc-shell-* set above is
     untouched on purpose: the cart drawer and the left menu drawer are painted
     from it, they are already light surfaces, and inverting them is a separate
     round rather than a side effect of this one.

     What makes it read as glass rather than a tinted bar: a rim catch-light on
     the top edge, a specular hairline on the outer edge, a cast that puts the
     pane above the page, and a fine grain. The blur only earns its GPU pass on
     the header, where page content genuinely scrolls underneath it. */
  .header-section,
  .footer-wrapper,
  back-to-top {
    --oc-shell-charcoal: #2e2e2e; --oc-shell-ink: #000000; --oc-shell-ink-soft: #242424;
    --oc-shell-copy: #414141; --oc-shell-mist: #f1f2f3; --oc-shell-cloud: #f3f3f3;
    --oc-shell-white: #ffffff; --oc-shell-aqua: #14171C; --oc-shell-aqua-soft: #14171C;
    --oc-shell-glass: rgba(46, 46, 46, 0.92); --oc-shell-glass-dense: rgba(46, 46, 46, 0.96);
    --oc-shell-ease: 180ms cubic-bezier(0.2, 0.8, 0.2, 1); --oc-shell-ease-long: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* ── The docks (approved mockup, D-2026-09-05-230) ───────────────────────
     The header and footer are one material that follows the reader's theme:
     WHITE frosted glass in light, BLACK frosted glass in dark. Until this
     round both were charcoal #2e2e2e in every condition and the theme carried
     no prefers-color-scheme rule at all.

     These tokens are the docks' own. The legacy --oc-shell-* set above is
     untouched on purpose: the cart drawer and the left menu drawer are painted
     from it, they are already light surfaces, and inverting them is a separate
     round rather than a side effect of this one.

     What makes it read as glass rather than a tinted bar: a rim catch-light on
     the top edge, a specular hairline on the outer edge, a cast that puts the
     pane above the page, and a fine grain. The blur only earns its GPU pass on
     the header, where page content genuinely scrolls underneath it. */
  .header-section,
  .footer-wrapper,
  cart-drawer.global-drawer {
    /* the docks are tagged .color-scheme--dark in the theme editor, and the theme
       paints a[not .btn] inside such a block from this variable. It is white by
       default, which is invisible on a white dock. Repointed to the dock's own ink
       so it follows the theme with everything else. */
    --color-scheme-dark-text: var(--oc-dock-ink);
    --color-scheme-text-color: var(--oc-dock-ink);
    /* The docks are the only surface that goes dark (D-230), so they are the only
       place the focus colour moves: module 13 §10.2 wants graphite ink on light and
       white on Graphite, and --oc-dock-ink is already exactly that on both sides of
       the media query below. The page keeps the graphite it gets from
       oxiclear-facelift-foundation, because the page stage stays paper. */
    --focus: var(--oc-dock-ink);
    --oc-dock-ground: #ffffff;
    --oc-dock-glass: rgba(255, 255, 255, 0.58);
    --oc-dock-glass-dense: rgba(255, 255, 255, 0.74);
    --oc-dock-ink: #14171c;
    --oc-dock-ink-2: #4a515c;
    --oc-dock-rule: rgba(20, 23, 28, 0.10);
    --oc-dock-hover: rgba(20, 23, 28, 0.06);
    --oc-dock-catch: rgba(255, 255, 255, 0.82);
    --oc-dock-cast: rgba(20, 23, 28, 0.10);
    --oc-dock-edge: rgba(20, 23, 28, 0.10);
    --oc-dock-edge-fade: rgba(20, 23, 28, 0.03);
    --oc-dock-blur: blur(34px) saturate(150%) brightness(1.05);
    --oc-dock-grain-b: soft-light;
    /* green means press: the one action colour, the logo's own green (D-148).
       White on it measures 2.8:1 and fails AA; graphite ink reads 6.3:1. */
    --oc-dock-action: #1cb142;
    --oc-dock-action-press: #178f36;
    --oc-dock-action-ink: #14171c;
    --oc-dock-grain:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    .header-section,
    .footer-wrapper,
    cart-drawer.global-drawer {
      --oc-dock-ground: #090a0c;
      --oc-dock-glass: rgba(19, 22, 27, 0.52);
      --oc-dock-glass-dense: rgba(19, 22, 27, 0.72);
      --oc-dock-ink: #ffffff;
      --oc-dock-ink-2: rgba(255, 255, 255, 0.62);
      --oc-dock-rule: rgba(255, 255, 255, 0.13);
      --oc-dock-hover: rgba(255, 255, 255, 0.10);
      --oc-dock-catch: rgba(255, 255, 255, 0.13);
      --oc-dock-cast: rgba(0, 0, 0, 0.52);
      --oc-dock-edge: rgba(255, 255, 255, 0.15);
      --oc-dock-edge-fade: rgba(255, 255, 255, 0.03);
      /* on a dark backdrop the pane reads as glass by LIFTING what is behind
         it, not by going darker still */
      --oc-dock-blur: blur(34px) saturate(150%) brightness(1.38);
      --oc-dock-grain-b: overlay;
      --oc-dock-action: #2ecc55;
      --oc-dock-action-press: #25af46;
      --oc-dock-action-ink: #08110a;
      --oc-dock-grain:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
    }
  }
  /* The cart drawer is a dock too and is not in the foundation's page list, so it
     needs this rule. :where() keeps it at zero specificity on purpose — it is
     coverage, not an override, and the page rule already carries the same token. */
  .header-section :where(a, button, input):focus-visible,
  cart-drawer.global-drawer :where(a, button, input):focus-visible,
  .footer-wrapper :where(a, button, input):focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
  }
  cart-drawer.global-drawer :where(a, button, input, textarea):focus-visible,
  back-to-top .back-to-top-button:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
  }
  .header-section .header-section--wrapper,
  .header-section.sticky-header {
    background-color: var(--oc-dock-ground);
  }
  .header-section .site-header,
  .header-section .mobile-nav-bar-wrapper {
    --header-color: var(--oc-dock-ground); --nav-text-color: var(--oc-dock-ink); --nav-text-hover: var(--oc-dock-ink);
    position: relative; color: var(--oc-dock-ink); background-color: var(--oc-dock-ground);
    background-image: var(--oc-dock-grain); background-size: 160px 160px; background-blend-mode: var(--oc-dock-grain-b);
    border-bottom-color: var(--oc-dock-rule);
    box-shadow:
      inset 0 1px 0 var(--oc-dock-catch),
      0 14px 34px -14px var(--oc-dock-cast);
  }
  /* the specular edge: light running along the rim, strongest across the
     middle and falling off to the corners */
  .header-section .site-header::after,
  .header-section .mobile-nav-bar-wrapper::after {
    position: absolute; right: 0; bottom: 0;
    left: 0; z-index: 1; height: 1px;
    background: linear-gradient(
      90deg,
      var(--oc-dock-edge-fade),
      var(--oc-dock-edge) 30%,
      var(--oc-dock-edge) 70%,
      var(--oc-dock-edge-fade)
    );
    pointer-events: none; content: '';
  }
  .header-section.sticked .site-header,
  .header-section.sticked .mobile-nav-bar-wrapper {
    background-color: var(--oc-dock-ground);
    box-shadow:
      inset 0 1px 0 var(--oc-dock-catch),
      0 16px 40px -14px var(--oc-dock-cast);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header-section .header-section--wrapper,
    .header-section.sticky-header {
      background-color: transparent;
    }
    /* the header is the one dock that earns its blur: page content genuinely
       scrolls underneath it (blur gate, D-173) */
    .header-section .site-header,
    .header-section .mobile-nav-bar-wrapper {
      background-color: var(--oc-dock-glass);
      -webkit-backdrop-filter: var(--oc-dock-blur);
      backdrop-filter: var(--oc-dock-blur);
    }
    .header-section.sticked .site-header,
    .header-section.sticked .mobile-nav-bar-wrapper {
      background-color: var(--oc-dock-glass-dense);
    }
  }
  .header-section .site-header__logo-image,
  .header-section .site-header__logo-overlay-image,
  .header-section .site-header__logo-link,
  .header-section .site-header__logo-overlay-link {
    transition: opacity var(--oc-shell-ease);
  }
  .header-section .site-header__logo-image:hover,
  .header-section .site-header__logo-overlay-image:hover,
  .header-section .site-header__logo-link:hover,
  .header-section .site-header__logo-overlay-link:hover {
    opacity: 0.82;
  }
  .header-section .site-header__nav .site-nav {
    align-items: center; column-gap: clamp(12px, 1.8vw, 30px);
  }
  .header-section .site-header__nav .first-level-dropdown > .site-nav__link {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 10px 9px; border-radius: 999px;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease),
      box-shadow var(--oc-shell-ease);
  }
  .header-section .site-header__nav .first-level-dropdown > .site-nav__link {
    color: var(--oc-dock-ink-2);
  }
  .header-section .site-header__nav .first-level-dropdown > .site-nav__link:hover,
  .header-section .site-header__nav .first-level-dropdown > .site-nav__link:focus-visible {
    color: var(--oc-dock-ink); background-color: var(--oc-dock-hover);
  }
  /* the current page is marked by weight and a rule in its own ink, never by
     colour: green means press, and a nav item is not a press */
  .header-section .site-header__nav .site-nav__link[aria-current='page'] {
    color: var(--oc-dock-ink); font-weight: 600; background-color: transparent;
    box-shadow: inset 0 -2px 0 currentcolor;
  }
  .header-section .top-links--icon-links .standalone-icon--wrapper,
  .header-section .mobile-nav-bar-wrapper .standalone-icon--wrapper,
  .header-section .top-links--icon-links .account-button {
    border-radius: 999px;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease),
      box-shadow var(--oc-shell-ease);
  }
  .header-section .top-links--icon-links .account-button {
    min-width: 44px; min-height: 44px; align-items: center;
    justify-content: center;
  }
  .header-section .top-links--icon-links .standalone-icon--wrapper:hover,
  .header-section .top-links--icon-links .standalone-icon--wrapper:focus-visible,
  .header-section .mobile-nav-bar-wrapper .standalone-icon--wrapper:hover,
  .header-section .mobile-nav-bar-wrapper .standalone-icon--wrapper:focus-visible,
  .header-section .top-links--icon-links .account-button:hover {
    color: var(--oc-dock-ink); background-color: var(--oc-dock-hover);
  }
  .header-section .site-nav__dropdown,
  .header-section .site-nav__subdropdown {
    color: var(--oc-dock-ink); background-color: var(--oc-dock-glass-dense); border: 1px solid var(--oc-dock-rule);
    box-shadow: inset 0 1px 0 var(--oc-dock-catch), 0 22px 56px -18px var(--oc-dock-cast); -webkit-backdrop-filter: var(--oc-dock-blur); backdrop-filter: var(--oc-dock-blur);
  }
  .header-section .site-nav__dropdown {
    border-radius: 0 0 20px 20px;
  }
  .header-section .site-nav__subdropdown {
    border-radius: 16px;
  }
  .header-section .site-nav__dropdown .site-nav__link,
  .header-section .site-nav__dropdown .animated-link--item {
    color: var(--oc-dock-ink-2);
  }
  .header-section .site-nav__dropdown.standard-dropdown .site-nav__link,
  .header-section .mega-menu-block .animated-link--item {
    display: flex; align-items: center; min-height: 44px;
    border-radius: 10px;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease);
  }
  .header-section .site-nav__dropdown.standard-dropdown .site-nav__link:hover,
  .header-section .site-nav__dropdown.standard-dropdown .site-nav__link:focus-visible,
  .header-section .mega-menu-block .animated-link--item:hover,
  .header-section .mega-menu-block .animated-link--item:focus-visible {
    color: var(--oc-dock-ink); background-color: var(--oc-dock-hover);
  }
  .header-section .mega-menu-block {
    gap: 24px; padding-top: 24px; padding-bottom: 24px;
  }
  .header-section .mega-menu--image,
  .header-section .mega-menu-promo--image,
  .header-section .mega-menu-promo--image img {
    border-radius: 16px;
  }
  .header-section .drawer--left {
    --menu-drawer-color: color-mix(in srgb, var(--oc-shell-white) 94%, transparent); --menu-drawer-text-color: var(--oc-shell-ink); --menu-drawer-text-hover-color: var(--oc-shell-aqua);
    --menu-drawer-border-color: color-mix(in srgb, var(--oc-shell-ink) 12%, transparent); color: var(--oc-shell-ink); background-color: var(--menu-drawer-color);
    border: 1px solid color-mix(in srgb, var(--oc-shell-white) 54%, transparent); border-left: 0; border-radius: 0 24px 24px 0;
    box-shadow: 24px 0 64px color-mix(in srgb, var(--oc-shell-ink) 24%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  }
  .header-section .drawer--left .mobile-nav__logo-title,
  .header-section .drawer--left .mobile-nav--footer {
    background-color: color-mix(in srgb, var(--oc-shell-white) 84%, transparent);
  }
  .header-section .drawer--left .mobile-nav__logo-title--inner {
    border-bottom-color: color-mix(in srgb, var(--oc-shell-ink) 10%, transparent);
  }
  .header-section .drawer--left .mobile-nav--footer {
    border-top: 1px solid color-mix(in srgb, var(--oc-shell-ink) 10%, transparent); box-shadow: 0 -18px 36px color-mix(in srgb, var(--oc-shell-ink) 8%, transparent);
  }
  .header-section .drawer--left .mobile-menu--close-btn,
  .header-section .drawer--left .mobile-nav__toggle button {
    min-width: 44px; min-height: 44px; border-radius: 12px;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease);
  }
  .header-section .drawer--left .mobile-menu--close-btn:hover,
  .header-section .drawer--left .mobile-menu--close-btn:focus-visible,
  .header-section .drawer--left .mobile-nav__toggle button:hover,
  .header-section .drawer--left .mobile-nav__toggle button:focus-visible {
    color: var(--oc-shell-ink-soft); background-color: color-mix(in srgb, var(--oc-shell-aqua-soft) 18%, transparent);
  }
  .header-section .drawer--left .mobile-nav__link {
    display: flex; align-items: center; min-height: 44px;
  }
  .header-section .drawer--left .mobile-nav__item--active > .mobile-nav__link,
  .header-section .drawer--left .mobile-nav__item--active > .mobile-nav__has-sublist {
    color: var(--oc-shell-ink-soft); background-color: color-mix(in srgb, var(--oc-shell-aqua-soft) 18%, transparent); border-radius: 14px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oc-shell-aqua) 28%, transparent);
  }
  .header-section .drawer--left .mobile-nav__item--active > .mobile-nav__link {
    padding-right: 12px; padding-left: 12px;
  }
  .header-section .drawer--left .oxiclear-legacy-mobile-search .input-group-field {
    min-height: 48px; padding-right: 14px; padding-left: 14px;
    color: var(--oc-shell-ink); background-color: color-mix(in srgb, var(--oc-shell-white) 76%, transparent); border: 1px solid color-mix(in srgb, var(--oc-shell-ink) 15%, transparent);
    border-radius: 14px; box-shadow: none;
  }
  .header-section .drawer--left .oxiclear-legacy-mobile-search .input-group-field:focus {
    border-color: var(--oc-shell-aqua); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-shell-aqua) 22%, transparent);
  }
  .header-section .drawer-overlay {
    background-color: color-mix(in srgb, var(--oc-shell-ink) 44%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  /* --oc-dock-ground here is the no-backdrop-filter FALLBACK only. The live
     surface is the same translucent glass the header wears (see the @supports
     block below): an opaque footer under a translucent header is two materials
     pretending to be one, and in dark mode it reads as a black slab bolted to
     the bottom of a page the header is letting light through. */
  /* --oc-dock-ground is the no-backdrop-filter FALLBACK only; the live surface is
     the header's own glass, set in the @supports block below. An opaque base was
     tried here to stop the body's washes bleeding through and it read as flat
     pure white, which is not what the header does. The footer IS the header. */
  .footer-wrapper {
    color: var(--oc-dock-ink); background-color: var(--oc-dock-ground);
    background-image: var(--oc-dock-grain); background-size: 160px 160px; background-blend-mode: var(--oc-dock-grain-b);
    box-shadow:
      inset 0 1px 0 var(--oc-dock-catch),
      0 -14px 34px -14px var(--oc-dock-cast);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* the DENSE fill and the same filter: .sticked lands as soon as the reader
       scrolls, so the header is always dense by the time the footer is on screen */
    .footer-wrapper {
      background-color: var(--oc-dock-glass-dense);
      -webkit-backdrop-filter: var(--oc-dock-blur);
      backdrop-filter: var(--oc-dock-blur);
    }
  }
  .footer-wrapper .footer-main,
  .footer-wrapper .footer-bottom {
    --color-scheme-background-color: transparent; --color-scheme-text-color: var(--oc-dock-ink); --color-scheme-border-color: var(--oc-dock-rule);
    color: var(--oc-dock-ink); background-color: transparent;
  }
  @media screen and (max-width: 767px) {
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .header-section .site-header,
      .header-section .mobile-nav-bar-wrapper {
        -webkit-backdrop-filter: blur(22px) saturate(140%) brightness(1.04);
        backdrop-filter: blur(22px) saturate(140%) brightness(1.04);
      }
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    .header-section .header-section--wrapper,
    .header-section.sticky-header,
    .header-section .site-header,
    .header-section .mobile-nav-bar-wrapper,
    .footer-wrapper {
      background-color: var(--oc-dock-ground);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .footer-wrapper .footer-main,
    .footer-wrapper .footer-bottom {
      background-color: transparent;
    }
  }
  .footer-wrapper .footer-main {
    position: relative;
  }
  .footer-wrapper .footer-main::before {
    position: absolute; top: 0; right: 0;
    left: 0; height: 1px;
    background: linear-gradient(
      90deg,
      var(--oc-dock-edge-fade),
      var(--oc-dock-edge) 30%,
      var(--oc-dock-edge) 70%,
      var(--oc-dock-edge-fade)
    );
    pointer-events: none; content: '';
  }
  .footer-wrapper .footer-article,
  .footer-wrapper .footer-content,
  .footer-wrapper .bottom--footer {
    color: var(--oc-dock-ink-2);
  }
  .footer-wrapper .links-footer ul {
    gap: 0;
  }
  .footer-wrapper .links-footer a,
  .footer-wrapper .footer-article a,
  .footer-wrapper .bottom--footer---links a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--oc-dock-ink);
    transition:
      color var(--oc-shell-ease),
      transform var(--oc-shell-ease);
  }
  .footer-wrapper .links-footer a:hover,
  .footer-wrapper .links-footer a:focus-visible,
  .footer-wrapper .footer-article a:hover,
  .footer-wrapper .footer-article a:focus-visible,
  .footer-wrapper .bottom--footer---links a:hover,
  .footer-wrapper .bottom--footer---links a:focus-visible {
    color: var(--oc-dock-ink); transform: translateX(3px);
  }
  .footer-wrapper .newsletter-footer .input-group {
    gap: 12px;
  }
  .footer-wrapper .footer-email-input,
  .footer-wrapper .newsletter-footer input.footer-email-input {
    min-height: 50px; padding: 0 16px; color: var(--oc-dock-ink);
    background-color: var(--oc-dock-hover); border: 1px solid var(--oc-dock-rule); border-radius: 14px;
    box-shadow: none;
  }
  .footer-wrapper .footer-email-input::placeholder,
  .footer-wrapper .newsletter-footer input.footer-email-input::placeholder {
    color: var(--oc-dock-ink-2); opacity: 1;
  }
  .footer-wrapper .footer-email-input:focus,
  .footer-wrapper .newsletter-footer input.footer-email-input:focus {
    border-color: var(--oc-dock-ink); box-shadow: none;
  }
  .footer-wrapper .footer-email-submit {
    min-height: 50px; padding-right: 20px; padding-left: 20px;
    color: var(--oc-dock-action-ink); background-color: var(--oc-dock-action); border-color: var(--oc-dock-action);
    border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition:
      background-color var(--oc-shell-ease),
      transform var(--oc-shell-ease),
      box-shadow var(--oc-shell-ease);
  }
  .footer-wrapper .footer-email-submit:hover,
  .footer-wrapper .footer-email-submit:focus-visible {
    color: var(--oc-dock-action-ink); background-color: var(--oc-dock-action-press); border-color: var(--oc-dock-action-press);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: translateY(-1px);
  }
  .footer-wrapper .social-media-footer ul li a {
    min-width: 44px; min-height: 44px; border: 1px solid var(--oc-dock-rule);
    border-radius: 999px; background-color: transparent;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease),
      border-color var(--oc-shell-ease);
  }
  .footer-wrapper .social-media-footer ul li a:hover,
  .footer-wrapper .social-media-footer ul li a:focus-visible {
    color: var(--oc-dock-ink); border-color: var(--oc-dock-ink-2); background-color: var(--oc-dock-hover);
  }
  .footer-wrapper .footer-bottom {
    border-top: 1px solid var(--oc-dock-rule);
  }
  /* Breadcrumb rules left this file on 1 Sep 2026 (D-197): the one standard
     lives in snippets/breadcrumb.liquid now. */
  .header-section .search-dropdown {
    --header-color: var(--oc-dock-ground); --nav-text-color: var(--oc-dock-ink); --nav-text-hover: var(--oc-dock-ink);
    color: var(--oc-dock-ink); background-color: var(--oc-dock-glass-dense); border-bottom: 1px solid var(--oc-dock-rule);
    border-radius: 0 0 24px 24px; box-shadow: 0 28px 64px var(--oc-dock-cast); clip-path: inset(0 0 0 round 0 0 24px 24px);
    -webkit-backdrop-filter: var(--oc-dock-blur); backdrop-filter: var(--oc-dock-blur);
  }
  .header-section .predictive-search__search-bar,
  .header-section .predictive-search__results-container,
  .header-section .predictive-search__empty-state {
    background-color: transparent;
  }
  .header-section .predictive-search__input-container {
    min-height: 52px; overflow: hidden; background-color: var(--oc-dock-hover);
    border: 1px solid var(--oc-dock-rule); border-radius: 16px; box-shadow: none;
    transition:
      border-color var(--oc-shell-ease),
      box-shadow var(--oc-shell-ease);
  }
  .header-section .predictive-search__input-container:focus-within {
    border-color: var(--oc-dock-ink); box-shadow: 0 0 0 3px var(--oc-dock-hover);
  }
  .header-section .predictive-search__input {
    min-height: 50px; color: var(--oc-dock-ink);
  }
  .header-section .predictive-search__input::placeholder {
    color: var(--oc-dock-rule); opacity: 1;
  }
  .header-section .predictive-search__submit,
  .header-section .predictive-search__clear,
  .header-section .search-dropdown__close {
    min-width: 44px; min-height: 44px; color: var(--oc-dock-ink);
    border-radius: 12px;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease);
  }
  .header-section .predictive-search__submit:hover,
  .header-section .predictive-search__submit:focus-visible,
  .header-section .predictive-search__clear:hover,
  .header-section .predictive-search__clear:focus-visible,
  .header-section .search-dropdown__close:hover,
  .header-section .search-dropdown__close:focus-visible {
    color: var(--oc-dock-ink); background-color: var(--oc-dock-hover);
  }
  .header-section .predictive-search__title,
  .header-section .predictive-search__nav::after {
    border-color: var(--oc-dock-rule);
  }
  .header-section .predictive-search__list-item,
  .header-section .predictive-search__nav-button {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--oc-dock-ink);
  }
  .header-section .predictive-search__nav-button {
    padding-right: 8px; padding-left: 8px;
  }
  .header-section .predictive-search__nav-button.active {
    color: var(--oc-dock-ink);
  }
  .header-section .predictive-search__nav-button.active::after {
    background-color: var(--oc-dock-ink);
  }
  .header-section .predictive-search__grid-item--page-or-article,
  .header-section .predictive-search__collection-link--no-image {
    background-color: var(--oc-dock-hover); border: 1px solid var(--oc-dock-rule); border-radius: 16px;
    box-shadow: none;
  }
  .header-section .predictive-search__collection-image,
  .header-section .predictive-search__collection-image img {
    border-radius: 14px;
  }
  /* Sticky bar: predictive-search results scroll underneath it, so its backdrop is
     live content, not paper. Same case as the cart drawer's sticky header. */
  .header-section .predictive-search__view-all-mobile {
    background-color: var(--oc-dock-glass-dense); border-top-color: var(--oc-dock-rule); -webkit-backdrop-filter: var(--oc-dock-blur); backdrop-filter: var(--oc-dock-blur);
  }
  .header-section .search-dropdown__overlay {
    background-color: var(--oc-dock-cast); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  cart-drawer.global-drawer {
    --cart-drawer-color: color-mix(in srgb, var(--oc-shell-white) 96%, transparent); --cart-drawer-text-color: var(--oc-shell-ink); --cart-drawer-text-color-transparent10: color-mix(in srgb, var(--oc-shell-ink) 10%, transparent);
    --cart-drawer-text-color-transparent25: color-mix(in srgb, var(--oc-shell-ink) 25%, transparent); --cart-drawer-text-color-transparent40: color-mix(in srgb, var(--oc-shell-ink) 40%, transparent); --cart-drawer-text-color-transparent50: color-mix(in srgb, var(--oc-shell-ink) 50%, transparent);
    --cart-drawer-text-color-transparent70: color-mix(in srgb, var(--oc-shell-ink) 70%, transparent); color: var(--oc-shell-ink); background-color: var(--cart-drawer-color);
    box-shadow: -28px 0 72px color-mix(in srgb, var(--oc-shell-ink) 24%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  }
  cart-drawer.global-drawer .global-drawer__content {
    overflow: hidden; background-color: var(--cart-drawer-color); border-left: 1px solid color-mix(in srgb, var(--oc-shell-white) 62%, transparent);
    border-radius: 24px 0 0 24px;
  }
  cart-drawer.global-drawer .global-drawer__sticky-header,
  cart-drawer.global-drawer .global-drawer__sticky-bottom {
    z-index: 2; background-color: color-mix(in srgb, var(--oc-shell-white) 84%, transparent); -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  cart-drawer.global-drawer .global-drawer__sticky-header::after,
  cart-drawer.global-drawer .global-drawer__footer {
    border-color: color-mix(in srgb, var(--oc-shell-ink) 12%, transparent);
  }
  cart-drawer.global-drawer .global-drawer__close {
    min-width: 44px; min-height: 44px; align-items: center;
    justify-content: center; border-radius: 999px;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease);
  }
  cart-drawer.global-drawer .global-drawer__close:hover,
  cart-drawer.global-drawer .global-drawer__close:focus-visible {
    color: var(--oc-shell-ink-soft); background-color: color-mix(in srgb, var(--oc-shell-aqua-soft) 18%, transparent);
  }
  cart-drawer.global-drawer .cart-drawer__product_card {
    padding: 14px; background-color: color-mix(in srgb, var(--oc-shell-cloud) 82%, transparent); border: 1px solid color-mix(in srgb, var(--oc-shell-ink) 9%, transparent);
    border-radius: 18px;
    box-shadow:
      0 8px 22px color-mix(in srgb, var(--oc-shell-ink) 7%, transparent);
  }
  cart-drawer.global-drawer .cart-drawer__product_card:not(:last-of-type) {
    margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--oc-shell-ink) 9%, transparent);
  }
  cart-drawer.global-drawer .cart-drawer__product_card--image,
  cart-drawer.global-drawer .cart-drawer__product_card--image .theme-img {
    overflow: hidden; border-radius: 14px;
  }
  cart-drawer.global-drawer .cart-drawer__product_card--title a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  cart-drawer.global-drawer .cart-drawer__product-card--quantity {
    min-height: 44px; overflow: hidden; background-color: var(--oc-shell-white);
    border-color: color-mix(in srgb, var(--oc-shell-ink) 14%, transparent); border-radius: 14px;
  }
  cart-drawer.global-drawer .cart-drawer__product-card--quantity--button {
    min-width: 44px; min-height: 44px; justify-content: center;
    padding: 0; transition: background-color var(--oc-shell-ease);
  }
  cart-drawer.global-drawer .cart-drawer__product-card--quantity--button:hover,
  cart-drawer.global-drawer .cart-drawer__product-card--quantity--button:focus-visible {
    background-color: color-mix(in srgb, var(--oc-shell-aqua-soft) 16%, transparent);
  }
  cart-drawer.global-drawer .cart-drawer__product-card--quantity--input {
    min-height: 44px; background-color: transparent;
  }
  cart-drawer.global-drawer .cart-drawer__product-card--remove {
    top: -8px; right: -8px; min-width: 44px;
    min-height: 44px; align-items: center; justify-content: center;
    padding: 0; background-color: color-mix(in srgb, var(--oc-shell-white) 82%, transparent); border: 1px solid color-mix(in srgb, var(--oc-shell-ink) 9%, transparent);
    border-radius: 999px;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease);
  }
  cart-drawer.global-drawer .cart-drawer__product-card--remove:hover,
  cart-drawer.global-drawer .cart-drawer__product-card--remove:focus-visible {
    color: var(--oc-shell-ink-soft); background-color: color-mix(in srgb, var(--oc-shell-aqua-soft) 20%, var(--oc-shell-white));
  }
  cart-drawer.global-drawer .cart-drawer__note--open {
    min-height: 44px; border-radius: 12px;
  }
  cart-drawer.global-drawer .cart-drawer__note--open:hover,
  cart-drawer.global-drawer .cart-drawer__note--open:focus-visible {
    background-color: color-mix(in srgb, var(--oc-shell-aqua-soft) 16%, transparent);
  }
  cart-drawer.global-drawer .cart-drawer__note--modal {
    background-color: color-mix(in srgb, var(--oc-shell-white) 94%, transparent); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 48px color-mix(in srgb, var(--oc-shell-ink) 18%, transparent);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
  cart-drawer.global-drawer .cart-drawer__note--textarea {
    min-height: 110px; padding: 12px; background-color: color-mix(in srgb, var(--oc-shell-mist) 80%, transparent);
    border-radius: 14px;
  }
  cart-drawer.global-drawer .cart-drawer__footer--button,
  cart-drawer.global-drawer .cart-drawer__empty-btn,
  cart-drawer.global-drawer .cart-drawer__note--close-btn {
    min-height: 48px; border-radius: 14px;
  }
  cart-drawer.global-drawer .cart-drawer__footer--button:not(.btn--secondary),
  cart-drawer.global-drawer .cart-drawer__empty-btn,
  cart-drawer.global-drawer .cart-drawer__note--close-btn {
    color: var(--oc-shell-ink-soft); background-color: var(--oc-shell-aqua); border-color: var(--oc-shell-aqua);
  }
  cart-drawer.global-drawer .cart-drawer__footer--button.btn--secondary {
    color: var(--oc-shell-ink-soft); background-color: color-mix(in srgb, var(--oc-shell-white) 72%, transparent); border-color: color-mix(in srgb, var(--oc-shell-ink) 18%, transparent);
  }
  cart-drawer.global-drawer .cart-free-shipping-bar__track {
    overflow: hidden; background-color: color-mix(in srgb, var(--oc-shell-ink) 10%, transparent); border-radius: 999px;
  }
  cart-drawer.global-drawer .cart-free-shipping-bar__fill {
    background-color: var(--oc-shell-aqua); border-radius: 999px;
  }
  cart-drawer.global-drawer .global-drawer__overlay {
    background-color: color-mix(in srgb, var(--oc-shell-ink) 48%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  back-to-top .back-to-top-button {
    min-width: 48px; min-height: 48px; padding: 0;
    border-radius: 999px;
  }
  back-to-top .back-to-top-button .btn-colors-primary {
    width: 48px; height: 48px; padding: 0;
    color: var(--oc-shell-white); background-color: color-mix(in srgb, var(--oc-shell-charcoal) 88%, transparent); border: 1px solid color-mix(in srgb, var(--oc-shell-white) 18%, transparent);
    border-radius: 999px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--oc-shell-ink) 24%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease),
      transform var(--oc-shell-ease);
  }
  back-to-top .back-to-top-button:hover .btn-colors-primary,
  back-to-top .back-to-top-button:focus-visible .btn-colors-primary {
    color: var(--oc-shell-ink-soft); background-color: var(--oc-shell-aqua-soft); transform: translateY(-2px);
  }
  @media screen and (min-width: 990px) and (max-width: 1199px) {
    .header-section .site-header {
      padding-right: clamp(28px, 3.5vw, 42px);
      padding-left: clamp(28px, 3.5vw, 42px);
    }
    .header-section .site-header__wrapper {
      grid-template-columns: clamp(176px, 18vw, 200px) minmax(0, 1fr);
      gap: 12px;
      min-height: 64px;
    }
    .header-section .site-header__logo img {
      width: 100%;
      max-width: 200px;
      height: auto;
    }
    .header-section .site-header__wrapper__right {
      min-width: 0;
      flex-wrap: nowrap;
      align-items: center;
    }
    .header-section .site-header__nav {
      min-width: 0;
      flex: 1 1 auto;
    }
    .header-section .site-header__nav .site-nav {
      column-gap: clamp(4px, .7vw, 10px);
    }
    .header-section .site-header__nav .first-level-dropdown > .site-nav__link {
      padding-right: 6px;
      padding-left: 6px;
    }
    .header-section .site-header__nav .site-nav--link-text {
      font-size: var(--oc-fs-small);
    }
    .header-section .site-header__links {
      flex: 0 0 auto;
      padding-left: 12px;
    }
  }
  @media screen and (max-width: 767px) {
    .header-section .drawer--left {
      border-radius: 0 20px 20px 0;
    }
    .footer-wrapper .footer-email-submit {
      width: 100%;
    }
    .footer-wrapper .links-footer a,
    .footer-wrapper .footer-article a {
      width: 100%;
    }
    .breadcrumb {
      border-radius: 20px;
    }
    .header-section .search-dropdown {
      border-radius: 0 0 20px 20px; clip-path: inset(0 0 0 round 0 0 20px 20px);
    }
    cart-drawer.global-drawer .global-drawer__content {
      border-radius: 20px 0 0 20px;
    }
    cart-drawer.global-drawer .cart-drawer__product_card {
      padding: 12px;
    }
    cart-drawer.global-drawer .cart-drawer__product_card:not(:last-of-type) {
      padding-bottom: 12px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .header-section *,
    .footer-wrapper *,
    cart-drawer.global-drawer,
    cart-drawer.global-drawer *,
    .breadcrumb *,
    back-to-top,
    back-to-top * {
      scroll-behavior: auto !important; animation: none !important; transition: none !important;
    }
    .footer-wrapper .links-footer a:hover,
    .footer-wrapper .footer-article a:hover,
    .footer-wrapper .bottom--footer---links a:hover,
    .footer-wrapper .footer-email-submit:hover,
    back-to-top .back-to-top-button:hover .btn-colors-primary {
      transform: none;
    }
  }
/* END_SNIPPET:oxiclear-facelift-shell */
/* START_SNIPPET:oxiclear-glass-dock (INDEX:164) */
/* ============ 1) GREEN LEAD RE-SKIN (token overrides) ============ */
  body cart-drawer.global-drawer,
  body back-to-top {
    --oc-shell-charcoal: #0a0c0d;
    --oc-shell-aqua: #1CB142;        /* legacy var name, now BRAND GREEN (Green Lead) */
    --oc-shell-aqua-soft: #5fd75c;
    --oc-shell-glass: rgba(9, 11, 13, 0.55);
    --oc-shell-glass-dense: rgba(9, 11, 13, 0.60);
  }

  /* The docks no longer carry a hard-coded black skin (D-2026-09-05-230). Their
     colour, frost and rim come from the --oc-dock-* tokens in
     oxiclear-facelift-shell, which follow the reader's theme: WHITE glass in
     light, BLACK glass in dark. This layer keeps what it is actually for, the
     floating dock GEOMETRY, and hands the material back to one owner. */
  body .header-section,
  body .footer-wrapper {
    --oc-shell-aqua: #1CB142;
    --oc-shell-aqua-soft: #5fd75c;
  }

  html body.oc-facelift {
    --oc-color-focus: #1CB142;
    --oc-color-focus-bright: #5fd75c;
    --oc-commerce-accent: #1CB142;   /* legacy var names, now BRAND GREEN */
    --oc-commerce-accent-soft: #5fd75c;
  }

  :root:root {
    --oxg-accent: #1CB142;
    --oxg-wash:
      radial-gradient(1100px 560px at 12% -8%, rgba(28, 177, 66, 0.09), transparent 60%),
      radial-gradient(900px 520px at 108% 26%, rgba(122, 132, 137, 0.07), transparent 55%);
  }

  /* ============ 2) HEADER: FLOATING BLACK GLASS DOCK ============ */
  body .header-section .header-section--wrapper,
  body .header-section.sticky-header {
    background: transparent;
  }

  body .header-section .site-header,
  body .header-section .mobile-nav-bar-wrapper {
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--oc-dock-rule);
    border-radius: 0;
    box-shadow:
      inset 0 1px 0 var(--oc-dock-catch),
      0 14px 34px -14px var(--oc-dock-cast);
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body .header-section .site-header,
    body .header-section .mobile-nav-bar-wrapper {
      -webkit-backdrop-filter: var(--oc-dock-blur);
      backdrop-filter: var(--oc-dock-blur);
    }
  }

  body .header-section.sticked .site-header,
  body .header-section.sticked .mobile-nav-bar-wrapper {
    box-shadow:
      inset 0 1px 0 var(--oc-dock-catch),
      0 16px 44px -12px var(--oc-dock-cast);
  }

  /* dropdowns hang off a detached dock: fully rounded, small gap */
  body .header-section .site-nav__dropdown {
    margin-top: 8px;
    border-radius: 20px;
  }

  /* ============ 3) FOOTER: FLOATING BLACK GLASS DOCK PANEL ============ */
  body .footer-wrapper {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--oc-dock-rule);
    border-radius: 0;
    box-shadow:
      inset 0 1px 0 var(--oc-dock-catch),
      0 -14px 34px -14px var(--oc-dock-cast);
  }

  /* ============ 4) MOBILE TUNING ============ */
  /* Round 2 of D-230 (founder, 5 Sep): "I dont want floating header and footer.
     assure you make it fixed just like the mock up". The docks run edge to edge
     at every width now, so there is no phone inset left to declare. The header
     keeps the theme's own sticky machinery (position: sticky, top: -1px, which
     is what the IntersectionObserver watches to add .sticked). */

  /* ============ 5) PAGE STAGE: warm paper + soft washes so white glass can frost ============ */
  body.oc-facelift {
    background:
      radial-gradient(1100px 560px at 10% -6%, rgba(28, 177, 66, 0.1), transparent 60%),
      radial-gradient(900px 520px at 105% 22%, rgba(122, 132, 137, 0.08), transparent 55%),
      #f4f4ef;
  }

  /* ============ 6) WHITE FLOATING TILES (product/collection cards) ============ */
  /* No blur here, and the reason is worth keeping: the section that owns the card
     paints it OPAQUE white, so measured on the running page the card computes
     rgb(255,255,255) and a backdrop-filter behind it could never render a pixel.
     It was eight wasted GPU passes on a collection page, the whole mobile budget,
     drawing nothing. The @supports-not fallback below already treats opaque white
     as the correct look for these cards, so every browser now agrees (D-173). */
  body.oc-facelift :is(.legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .product-card-basic) {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, 0.06), 0 12px 32px rgba(10, 14, 16, 0.14);
  }

  @media (hover: hover) and (pointer: fine) {
    body.oc-facelift :is(.legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .product-card-basic):hover {
      border-color: rgba(255, 255, 255, 0.9);
      box-shadow:
        0 0 0 1px rgba(15, 20, 22, 0.06), 0 26px 52px rgba(10, 14, 16, 0.2);
    }
  }

  /* ============ 7) PDP + PRICES ============ */
  /* The PDP stage and add-button paints that lived here are scrapped: the PDP section
     owns its surfaces (21 Aug PDP round) and oxiclear-facelift-actions owns every
     action button. The opaque #1CB142 here was overriding the frosted .88 system fill. */

  /* Prices sit in graphite ink (D-120: green means press; money green is destroyed).
     Approved in the PDP mockup, applied to every price this rule reaches. */
  body.oc-facelift :is(.oc-legacy-pdp__price, .oc-legacy-pdp-card__price, .legacy-collection-product-card__price, .product-grid--price) {
    color: #14171C;
  }

  /* badge ink readable on the now-green badge */
  body.oc-facelift :is(.oc-legacy-pdp-card__badge, .legacy-product-sale-badge, .product-grid--badge, .badge) {
    color: #07270b;
  }

  /* ============ 8) FALLBACKS ============ */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.oc-facelift :is(.legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .product-card-basic) {
      background: #ffffff;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    body.oc-facelift :is(.legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .product-card-basic) {
      background: #ffffff;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }


  /* ============ 9) MOCKUP PARITY PASS (19 Aug 2026, screenshot review) ============ */

  /* The primary-button colour tokens used to be re-pointed here to opaque #1CB142.
     That is why the frosted treatment below never landed: an opaque fill has nothing
     to blur through. Fill, frost and shape are now declared together, once, in
     oxiclear-facelift-actions. The focus colour used to stay here too, green; it is
     gone, because module 13 §10.2 forbids a green focus ring outright. Every ring on
     the site now reads --focus, declared in oxiclear-facelift-foundation. */

  /* EVERY page root is transparent, exactly like the homepage bands, so the warm paper
     stage and its two washes run unbroken from the header dock to the footer dock.
     This rule used to paint an opaque #fff over that paper, which is why every content
     page read as a white sheet while the homepage read as paper. Commerce pages were
     worse: the PDP, its story, reviews and recommendations sat on #f6f9f9 and #f3f3f3.
     The stage is the body's paper, on every template. The corner wash is
     dropped with it: the body already carries the atmosphere, and a third wash on top
     of it doubled up. */
  body.oc-facelift :is(
    /* content pages */
    .oxiclear-legacy-native-page, .oxiclear-legacy-benefits, .oxiclear-legacy-company,
    .oxiclear-legacy-faq, .oxiclear-legacy-how-to, .oxiclear-legacy-native-content,
    .oxiclear-legacy-impact, .oxiclear-legacy-technical, .oxiclear-legacy-contact-page,
    .oxiclear-legacy-native-contact, .oxiclear-legacy-testimonials,
    .legacy-blog, .legacy-article, .legacy-error-page,
    /* commerce pages: these were still on the old #f6f9f9 and #f3f3f3 sheets */
    .legacy-generic-collection, .legacy-collection-page, .legacy-search,
    .oc-legacy-pdp, .oc-premium-story,
    .oc-legacy-pdp-recommendations, .legacy-cart, .legacy-customer
  ) {
    background: transparent;
  }

  /* aqua panel headings -> deep brand green */
  body.oc-facelift :is(.oxiclear-legacy-how-to__panel, .oxiclear-legacy-technical__panel) :is(h2, h3) {
    color: #1CB142 !important;
  }

  /* technical tabs: white glass pills, green checked state (kills aqua fill) */
  body.oc-facelift .oxiclear-legacy-technical__tab-list label {
    background: rgba(255, 255, 255, 0.9);
  }

  body.oc-facelift .oxiclear-legacy-technical__tab-list :is(input:checked + label, label:has(input:checked)) {
    background: rgba(28, 177, 66, 0.16) !important;
    color: #1CB142 !important;
    box-shadow: inset 0 0 0 1.5px #1CB142 !important;
  }

  /* HOW-TO steps -> floating glass circles */
  body.oc-facelift .oxiclear-legacy-how-to__tab-list {
    min-height: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(14px, 3vw, 26px);
    overflow: visible;
  }

  body.oc-facelift .oxiclear-legacy-how-to__tab-list label {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    color: #414141;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, 0.07),
      0 10px 24px rgba(10, 14, 16, 0.12);
  }

  body.oc-facelift .oxiclear-legacy-how-to__tab-list :is(input:checked + label, label:has(input:checked)) {
    background: rgba(28, 177, 66, 0.2) !important;
    color: #1CB142 !important;
    border-color: transparent !important;
    box-shadow: 0 12px 28px rgba(28, 177, 66, 0.25), inset 0 0 0 1.5px #1CB142 !important;
  }

  /* FOOTER: tighter, denser (round 4: less air above the logo and below the links) */
  body .footer-wrapper .footer-main {
    padding-top: clamp(20px, 2.6vw, 28px);
    padding-bottom: 4px;
  }

  body .footer-wrapper .links-footer ul {
    display: block;
  }

  body .footer-wrapper :is(.links-footer a, .footer-article a) {
    min-height: 38px;
    font-size: var(--oc-fs-small);
  }

  body .footer-wrapper .footer-bottom {
    padding-top: 0;
    padding-bottom: 20px;
  }

  @media screen and (max-width: 767px) {
    body.oc-facelift .oxiclear-legacy-how-to__tab-list label {
      width: 64px;
      height: 64px;
    }
  }


  /* ============ 10) SCREENSHOT ROUND 2 (19 Aug 2026): exact-selector green states, glass buttons, mockup footer ============ */

  /* logo: a tad smaller */
  body .header-section .site-header__logo img {
    max-width: 128px;
  }

  /* HOW-TO checked circle -> solid brand green (beats the section's ID selectors) */
  body #LegacyHowToStep1:checked ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep1"],
  body #LegacyHowToStep2:checked ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep2"],
  body #LegacyHowToStep3:checked ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep3"],
  body #LegacyHowToStep4:checked ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep4"] {
    background: rgba(28, 177, 66, 0.2);
    color: #1CB142;
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(28, 177, 66, 0.25), inset 0 0 0 1.5px #1CB142;
  }

  @media (hover: hover) and (pointer: fine) {
    body .oxiclear-legacy-how-to__tab-list label:hover {
      box-shadow: 0 17px 34px rgba(28, 177, 66, 0.2);
    }
  }

  /* TECHNICAL checked pill -> soft green with green ring (beats the section's ID selectors) */
  body #LegacyTechnicalDrdo:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalDrdo"],
  body #LegacyTechnicalViral:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalViral"],
  body #LegacyTechnicalCarbon:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalCarbon"] {
    background: rgba(28, 177, 66, 0.2);
    color: #1CB142;
    box-shadow: 0 14px 30px rgba(28, 177, 66, 0.22), inset 0 0 0 1.5px #1CB142;
  }

  /* DRDO report buttons -> green frosted glass (23 Aug PM): they sit on a white
     page, where white glass went invisible. Flat, green tint, no bevel. */
  body .oxiclear-legacy-technical__report a,
  body .oxiclear-legacy-technical__report--2020 a {
    color: #07270b;
    background: rgba(28, 177, 66, 0.2);
    border: 1px solid rgba(28, 177, 66, 0.55);
    box-shadow: 0 12px 28px rgba(7, 39, 11, 0.1), 0 2px 10px rgba(28, 177, 66, 0.2);
  }

  body .oxiclear-legacy-technical__report a:hover,
  body .oxiclear-legacy-technical__report--2020 a:hover {
    color: #07270b;
    background: rgba(28, 177, 66, 0.32);
  }

  /* Frost pill for the one primary button OUTSIDE #MainContent that actions cannot
     reach. The drawer selectors that used to sit here were dead - cart-drawer.liquid
     outbids this rule on every property it sets, so the drawer paints its own pills. */
  body .footer-wrapper .footer-email-submit {
    color: #07270b;
    background: rgba(28, 177, 66, 0.2);
    border: 1px solid rgba(28, 177, 66, 0.55);
    border-radius: 999px;
    box-shadow: none;
  }

  body .footer-wrapper .footer-email-submit:hover,
  body .footer-wrapper .footer-email-submit:focus-visible {
    color: #07270b;
    background: rgba(28, 177, 66, 0.32);
    border-color: rgba(28, 177, 66, 0.7);
    box-shadow: none;
  }

  /* on the black dock the green tint loses its ground, so the pill goes white:
     two surfaces, one law (founder, frost pill language) */
  @media (prefers-color-scheme: dark) {
    body .footer-wrapper .footer-email-submit {
      color: #07270b;
      background: rgba(255, 255, 255, 0.82);
      border-color: rgba(255, 255, 255, 0.9);
    }

    body .footer-wrapper .footer-email-submit:hover,
    body .footer-wrapper .footer-email-submit:focus-visible {
      background: #ffffff;
      border-color: #ffffff;
    }
  }

  /* ============ MOCKUP FOOTER LAYOUT ============ */
  @media screen and (min-width: 990px) {
    body .footer-wrapper .footer-main .footer-main--inner {
      grid-template-columns: 1.4fr 1fr 1fr !important;
      gap: 44px;
    }
  }

  /* tagline block (first block): logo above, lead statement, CLEAN AIR in green.
     The mark is the frozen master (5 Sep 2026) served from the theme's own
     assets, not a hardcoded Files URL that no one can see going stale. Liquid
     does not run inside {% stylesheet %}, so the two URLs arrive as the custom
     properties set just above this block. The dock follows the reader, so the
     wordmark goes white on the black one. The box is the master's own 5.14:1. */
  body .footer-wrapper .content-footer.border-none .footer-article::before {
    content: "";
    display: block;
    width: 132px;
    height: 26px;
    margin-bottom: 16px;
    background: var(--oc-master-wordmark-colour) left center / contain no-repeat;
  }

  @media (prefers-color-scheme: dark) {
    body .footer-wrapper .content-footer.border-none .footer-article::before {
      background-image: var(--oc-master-wordmark-white);
    }
  }

  body .footer-wrapper .content-footer.border-none .footer-article p {
    max-width: 340px;
    font-size: var(--oc-fs-body-lg);
    font-weight: var(--oc-w-medium);
  }

  body .footer-wrapper .content-footer.border-none .footer-article strong {
    color: #5fd75c;
  }

  @media screen and (max-width: 767px) {
    body .header-section .site-header__logo img {
      max-width: 96px;
    }
  }

  /* ============ 11) HOMEPAGE MOCKUP PARITY (19 Aug 2026) ============ */

  /* Kickers: small letterspaced labels above section titles (mockup .kicker) */
  body.oc-facelift :is(.oc-legacy-three__header > p, .oc-legacy-story__eyebrow) {
    display: block;
    margin: 0 0 12px;
    color: #5a6a5c;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    line-height: var(--oc-lh-small);
    text-transform: uppercase;
  }

  /* WHY OXICLEAR band (three-part): left header, mockup title, greens-only icons */
  body.oc-facelift .oc-legacy-three__header {
    max-width: none;
    margin: 0 0 34px;
    text-align: left;
  }

  body.oc-facelift .oc-legacy-three__header h2 {
    color: #1a1e1c;
  }

  /* The three "Built for the air out there" coins keep their OWN colours.
     The Green Lead re-skin used to repoint --oc-three-accent / --oc-three-soft on
     all three cards to greens, which flattened the approved 17 Aug icon set
     (D-2026-08-17: shield/check, circular arrows, globe/check) into three
     near-identical green coins. Founder call, 19 Aug 2026: restore the coloured
     ones. This is the same nuance recorded for the protection strip in round 12 —
     the anti-aqua rule bans aqua as a UI SYSTEM colour (buttons, tabs, hovers,
     washes, focus states); small multicolour CHARACTER accents inside content are
     sanctioned, because they echo the two-colour logo. The per-card values now
     come from the section itself (sections/oxiclear-legacy-three-part.liquid):
     Quality aqua #14171C, Reusability green #14171C, International purple #14171C.
     Do not re-green these. */

  /* The whole SHOP band — header, kicker, tabs, product cards, Add to Cart, focus
     ring and divider alignment — now lives in sections/oxiclear-legacy-shop-tabs.liquid,
     which is the single source. Removed from this layer 20 Aug 2026. */

  /* ============ 13) ROUND 9 (19 Aug 2026): NAV UNDERLINE, DRAW ONLY ============
     Round 8 shipped a centre-out rail plus a white hover colour. Sean saw no draw and the
     text still went green. Two causes, both fixed here:

     1. NO DRAW. `prefers-reduced-motion` was pinned to `scaleX(1)`, so on any machine with
        macOS "Reduce motion" on, the rail simply faded in at full width. On top of that,
        280 ms centre-out across a ~60 px word is barely a gesture. Now: origin LEFT, 420 ms,
        and the reduced-motion path keeps a real (shorter) draw instead of killing it — a
        2 px rail growing is not a vestibular trigger.
     2. TEXT STILL GREEN. theme.min.css carries
        `.site-nav__link:not(.standalone-icon--wrapper):hover { color: var(--nav-text-hover) !important }`.
        A plain `color` override can never win that. The var itself is repointed instead, so
        the label simply does not change colour. The rail is the whole interaction. */
  html body .header-section .site-header,
  html body .header-section .mobile-nav-bar-wrapper {
    --nav-text-hover: var(--oc-dock-ink);
  }

  body .header-section .site-header__nav .first-level-dropdown > .site-nav__link {
    position: relative;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  body .header-section .site-header__nav .first-level-dropdown > .site-nav__link::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 10px;
    left: 6px;
    z-index: 1;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1CB142, #5fd75c);
    box-shadow: 0 0 10px rgba(28, 177, 66, 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms cubic-bezier(0.22, 0.72, 0.22, 1);
    pointer-events: none;
  }

  @media (hover: hover) and (pointer: fine) {
    body .header-section .site-header__nav .first-level-dropdown > .site-nav__link:hover::after {
      transform: scaleX(1);
    }
  }

  body .header-section .site-header__nav .first-level-dropdown > .site-nav__link:focus-visible::after {
    transform: scaleX(1);
  }

  /* current page: rail stays drawn. Label colour is left alone here too. */
  body .header-section .site-header__nav .site-nav__link[aria-current='page'] {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  body .header-section .site-header__nav .first-level-dropdown > .site-nav__link[aria-current='page']::after {
    transform: scaleX(1);
  }

  @media (prefers-reduced-motion: reduce) {
    body .header-section .site-header__nav .first-level-dropdown > .site-nav__link::after {
      transition: transform 200ms ease;
    }
  }

  /* ============ 14) ROUND 10 (19 Aug 2026): SAME RAIL DRAW IN THE FOOTER ============
     Footer links carried the shell's own hover: green text plus a 3 px slide right. Sean
     asked for the nav treatment here too, so both are dropped and the identical green rail
     is drawn instead. Links are inline-flex, so the rail shrink-wraps the label rather than
     spanning the column. Shell hover rules sit at (0,3,1); these carry a `body` prefix to
     outrank them. */
  body .footer-wrapper :is(.links-footer, .footer-article) a {
    position: relative;
  }

  body .footer-wrapper :is(.links-footer, .footer-article) a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 9px;
    left: 0;
    z-index: 1;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1CB142, #5fd75c);
    box-shadow: 0 0 10px rgba(28, 177, 66, 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms cubic-bezier(0.22, 0.72, 0.22, 1);
    pointer-events: none;
  }

  /* no colour shift, no slide anywhere in the footer: the rail is the whole interaction */
  body .footer-wrapper :is(.links-footer, .footer-article, .bottom--footer---links) a:hover,
  body .footer-wrapper :is(.links-footer, .footer-article, .bottom--footer---links) a:focus-visible {
    color: var(--oc-dock-ink);
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    body .footer-wrapper :is(.links-footer, .footer-article) a:hover::after {
      transform: scaleX(1);
    }
  }

  body .footer-wrapper :is(.links-footer, .footer-article) a:focus-visible::after {
    transform: scaleX(1);
  }

  @media (prefers-reduced-motion: reduce) {
    body .footer-wrapper :is(.links-footer, .footer-article) a::after {
      transition: transform 200ms ease;
    }
  }

  /* Reduced transparency users get the solid near-black docks from the shell fallback. */
/* END_SNIPPET:oxiclear-glass-dock */