/** Shopify CDN: Minification failed

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

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:featured-collection (INDEX:19) */
.oc-grid-static,
  .oc-grid-static__inner {
    display: contents;
  }
/* END_SECTION:featured-collection */

/* START_SECTION:oxiclear-account-hub (INDEX:40) */
/* OxiClear account hub — section rules. Shared primitives (.oc-account__*)
     live in snippets/oxiclear-legacy-customer-styles.liquid. */

  .oc-hub__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas:
      "latest filter"
      "orders gear"
      "orders help"
      "orders profile";
    gap: 16px;
    align-items: start;
  }

  .oc-hub__latest { grid-area: latest; }
  .oc-hub__filter { grid-area: filter; }
  .oc-hub__orders { grid-area: orders; }
  .oc-hub__gear { grid-area: gear; }
  .oc-hub__help { grid-area: help; }
  .oc-hub__profile { grid-area: profile; }

  .oc-hub__empty { margin: 0 0 14px; color: #8a938b; font-size: var(--oc-fs-body); }

  /* latest */
  .oc-hub__latest-body { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; }
  .oc-hub__latest-name { margin: 0; font-size: var(--oc-fs-card); font-weight: var(--oc-w-semibold); letter-spacing: var(--oc-tr-h3); }
  .oc-hub__latest-date { margin: 2px 0 10px; font-size: var(--oc-fs-small); color: #3d443f; }
  .oc-hub__thumbstack { display: flex; padding-left: 10px; }

  .oc-hub__thumb {
    width: 52px; height: 52px;
    margin-left: -10px;
    object-fit: cover;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(10, 14, 16, .14);
  }

  .oc-hub__latest-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

  /* filter life */
  .oc-hub__filter-read { display: flex; gap: 14px; align-items: center; margin: 2px 0 12px; }
  .oc-hub__filter-num { font-size: var(--oc-fs-price); font-weight: var(--oc-w-bold); letter-spacing: var(--oc-tr-price); line-height: var(--oc-lh-price); }
  .oc-hub__filter-label { margin: 0 0 6px; max-width: 22ch; font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); color: #3d443f; }

  .oc-hub__meter {
    height: 8px;
    margin: 0 0 10px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(15, 20, 22, .08);
    border-radius: 999px;
    overflow: hidden;
  }

  .oc-hub__meter i { display: block; height: 100%; background: #1CB142; border-radius: 999px; transition: width .8s cubic-bezier(.22, .72, .22, 1); }
  .oc-hub__meter i.is-wait { background: #e8a13a; }
  .oc-hub__meter i.is-alert { background: salmon; }

  .oc-hub__filter-copy { margin: 0 0 14px; font-size: var(--oc-fs-body); color: #3d443f; }
  .oc-hub__restock { display: flex; flex-direction: column; gap: 8px; }

  /* order history */
  .oc-hub__order-list { margin: 0; padding: 0; list-style: none; }
  .oc-hub__order-list > li + li { border-top: 1px solid rgba(15, 20, 22, .06); }

  .oc-hub__order > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 11px 10px;
    list-style: none;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 160ms ease;
  }

  .oc-hub__order > summary::-webkit-details-marker { display: none; }

  @media (hover: hover) and (pointer: fine) {
    .oc-hub__order > summary:hover { background: rgba(255, 255, 255, .55); }
  }

  .oc-hub__order.is-cancelled > summary { opacity: .55; }

  .oc-hub__order-thumbs { display: flex; padding-left: 8px; }
  .oc-hub__order-thumbs .oc-hub__thumb { width: 40px; height: 40px; margin-left: -8px; }

  .oc-hub__order-what { min-width: 0; }
  .oc-hub__order-what strong { display: block; font-size: var(--oc-fs-card); }
  .oc-hub__order-what small { display: block; font-size: var(--oc-fs-small); color: #8a938b; }

  .oc-hub__order-total { font-size: var(--oc-fs-card); font-weight: var(--oc-w-bold); text-align: right; }

  .oc-hub__order-caret svg { width: 16px; height: 16px; fill: none; stroke: #8a938b; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
  .oc-hub__order[open] .oc-hub__order-caret svg { transform: rotate(180deg); }

  .oc-hub__order-body { padding: 4px 10px 18px; }

  .oc-hub__items { margin: 0; padding: 0; list-style: none; }
  .oc-hub__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; }
  .oc-hub__item + .oc-hub__item { border-top: 1px solid rgba(15, 20, 22, .06); }

  .oc-hub__item-img { width: 56px; height: 56px; object-fit: cover; background: #fff; border: 1px solid rgba(15, 20, 22, .06); border-radius: 14px; }
  .oc-hub__item-img--blank { display: inline-block; background: rgba(255, 255, 255, .6); }

  .oc-hub__item-meta { min-width: 0; }
  .oc-hub__item-meta strong { display: block; font-size: var(--oc-fs-card); line-height: var(--oc-lh-card); }
  .oc-hub__item-meta strong a { text-decoration: none; }
  .oc-hub__item-meta small { display: block; margin-top: 2px; font-size: var(--oc-fs-small); color: #8a938b; }
  .oc-hub__item-total { font-size: var(--oc-fs-card); font-weight: var(--oc-w-bold); }

  .oc-hub__totals { margin: 12px 0 0; padding-top: 6px; border-top: 1px solid rgba(15, 20, 22, .1); }
  .oc-hub__totals > div { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; font-size: var(--oc-fs-small); }
  .oc-hub__totals dt { color: #3d443f; }
  .oc-hub__totals dd { margin: 0; font-weight: var(--oc-w-bold); }
  .oc-hub__grand { margin-top: 4px; border-top: 1px solid rgba(15, 20, 22, .1); }
  .oc-hub__grand dt, .oc-hub__grand dd { font-size: var(--oc-fs-card); font-weight: var(--oc-w-bold); color: #15181b; }

  .oc-hub__order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

  .oc-hub__pagination { margin-top: 14px; text-align: center; }

  /* gear */
  .oc-hub__gear-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }

  .oc-hub__gear-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-small);
    text-decoration: none;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(15, 20, 22, .08);
    border-radius: 14px;
    transition: transform 160ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-hub__gear-item:hover { transform: translateY(-1px); }
  }

  .oc-hub__gear-img { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 10px; background: #fff; }
  .oc-hub__gear-foot { margin: 0; font-size: var(--oc-fs-small); color: #8a938b; }

  /* help */
  .oc-hub__help-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .oc-hub__help-note { margin: 0 0 12px; font-size: var(--oc-fs-body); color: #3d443f; }
  .oc-hub__help-links { display: flex; flex-wrap: wrap; gap: 8px; }
  .oc-hub__help-links .oc-account__chip { text-decoration: none; }

  /* details */
  .oc-hub__profile-list { margin: 0 0 12px; }
  .oc-hub__profile-list > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(15, 20, 22, .06); }
  .oc-hub__profile-list dt { flex: 0 0 64px; padding-top: 2px; font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); letter-spacing: var(--oc-tr-eyebrow); text-transform: uppercase; color: #8a938b; }
  .oc-hub__profile-list dd { margin: 0; min-width: 0; font-size: var(--oc-fs-body); font-weight: var(--oc-w-medium); overflow-wrap: anywhere; }

  .oc-hub__profile-address { margin: 0 0 12px; font-size: var(--oc-fs-body); }
  .oc-hub__profile-address strong { display: block; margin-bottom: 4px; font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); letter-spacing: var(--oc-tr-eyebrow); text-transform: uppercase; color: #3d443f; }
  .oc-hub__profile-address p { margin: 0; color: #3d443f; }
  .oc-hub__profile-note { margin: 12px 0 0; font-size: var(--oc-fs-small); color: #8a938b; }

  /* signed out */
  .oc-hub__signedout-mast { justify-content: center; text-align: center; }
  .oc-hub__signedout-mast .oc-account__standfirst { margin-inline: auto; }
  .oc-hub__signin-card h2 { margin: 0 0 8px; font-size: var(--oc-fs-h3); font-weight: var(--oc-w-semibold); letter-spacing: var(--oc-tr-h3); }
  .oc-hub__signin-card > p { margin: 0 0 16px; font-size: var(--oc-fs-body); color: #3d443f; }
  .oc-hub__signin-note { margin: 12px 0 0; font-size: var(--oc-fs-small); color: #8a938b; }

  /* The invoice document's CSS is NOT here — see the inline <style> in the
     customer branch above. Shopify serves this compiled section stylesheet with
     media="screen", so nothing in this block reaches a printed page or an iOS
     "Save to PDF". Dashboard styling is screen-only by nature and belongs here;
     anything the invoice needs must not. */

  @media screen and (max-width: 900px) {
    .oc-hub__grid { grid-template-columns: 1fr; grid-template-areas: "latest" "filter" "orders" "gear" "help" "profile"; }
  }

  @media screen and (max-width: 640px) {
    .oc-hub__order > summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .oc-hub__order > summary .oc-account__pill { display: none; }
    .oc-hub__order-body { padding-inline: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-hub__meter i, .oc-hub__order-caret svg { transition: none; }
    .oc-hub__gear-item, .oc-hub__gear-item:hover { transform: none; transition: none; }
  }
/* END_SECTION:oxiclear-account-hub */

/* START_SECTION:oxiclear-air-check (INDEX:41) */
/* ============================================================
     OxiClear Air Check — "Pulse Card" build (aircheck-pulse-card-20260819)
     D-2026-08-19-111: compact living card, FULL-COLOUR band glass.

     The data layer sets --aircheck-status (the API's own band colour) and
     --aircheck-marker on this root; everything below derives the surface
     from those via color-mix(). data-pulse-ink="dark|light" is set by the
     small additive script in this section. No black base: the card surface
     IS the meter colour, as frosted glass. Fallbacks: no-backdrop-filter,
     reduced transparency, reduced motion.
     ============================================================ */

  .oc-aircheck {
    --pc-tint: var(--aircheck-status, #c9cec4);
    --pc-deep: color-mix(in srgb, var(--pc-tint) 60%, #10130f);
    --pc-fill-1: color-mix(in srgb, var(--pc-tint) 84%, transparent);
    --pc-fill-2: color-mix(in srgb, var(--pc-tint) 91%, transparent);
    --pc-ink: #141a10;
    /* .74, not .66: measured inside a .46 frost cell on the tightest band
       (Very Poor) the old value read 4.15:1 and missed AA. */
    --pc-ink-soft: rgba(16, 20, 12, .74);
    --pc-ink-faint: rgba(16, 20, 12, .46);
    /* Frost on Band Glass. The cell is deliberately transparent enough that the
       band colour comes through it: a cell that hides the band is a white
       sticker, and that is the whole flea-market tell. Graphite ink still clears
       8.7:1 on the tightest band at this alpha. */
    --pc-cell: rgba(255, 255, 255, .46);
    --pc-cell-bd: rgba(255, 255, 255, .42);
    --pc-cell-lit: rgba(255, 255, 255, .86);
    --pc-cell-catch: rgba(255, 255, 255, .55);
    --pc-data: #14557d;
    --pc-bd: rgba(255, 255, 255, .5);
    --pc-ease: cubic-bezier(.22, .72, .22, 1);
    --aircheck-marker: 0%;
    width: min(100%, 1440px);
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(40px, 6vw, 84px) clamp(18px, 4vw, 40px) clamp(56px, 7vw, 96px);
    color: #15181b;
    background: transparent;
  }

  /* Two ways in, on purpose. The luminance switcher above infers the flip from
     whatever hex arrives, which has to keep working for any scale we have never
     seen. For the six CPCB bands the answer is known rather than inferred, so
     Severe says so directly and stays right even if the switcher never runs. */
  .oc-aircheck[data-pulse-ink="light"],
  .oc-aircheck[data-air-band-key="severe"] {
    --pc-fill-1: color-mix(in srgb, var(--pc-tint) 92%, transparent);
    --pc-fill-2: color-mix(in srgb, var(--pc-tint) 97%, transparent);
    --pc-ink: #ffffff;
    /* .84, not .76: inside the .14 cell on Severe the old value read 4.15:1. */
    --pc-ink-soft: rgba(255, 255, 255, .84);
    --pc-ink-faint: rgba(255, 255, 255, .52);
    --pc-cell: rgba(255, 255, 255, .14);
    --pc-cell-bd: rgba(255, 255, 255, .22);
    --pc-cell-lit: rgba(255, 255, 255, .42);
    --pc-cell-catch: rgba(255, 255, 255, .18);
    --pc-data: #9fd8f5;
    --pc-bd: rgba(255, 255, 255, .28);
  }

  .oc-aircheck,
  .oc-aircheck *,
  .oc-aircheck *::before,
  .oc-aircheck *::after { box-sizing: border-box; }

  .oc-aircheck [hidden] { display: none !important; }

  .oc-aircheck .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---- Heading block above the card (frozen structure) ---- */

  .oc-aircheck__divider {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(100%, 1320px);
    margin: clamp(30px, 4vw, 54px) auto clamp(34px, 5vw, 60px);
  }

  .oc-aircheck__divider span {
    flex: 1 1 auto;
    border-top: 2px solid #1f2422;
  }

  .oc-aircheck__divider img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .oc-aircheck__masthead {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: end;
    width: min(100%, 1320px);
    margin: 0 auto clamp(26px, 3.5vw, 44px);
  }

  .oc-aircheck__eyebrow {
    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;
  }

  .oc-aircheck__masthead h2 {
    margin: 0;
    color: #1a1e1c;
  }

  .oc-aircheck__masthead > p {
    margin: 0;
    color: #3d443f;
    font-size: var(--oc-fs-body-lg);
  }

  .oc-aircheck__workspace { width: min(100%, 1320px); margin: 0 auto; }

  /* ---- THE CARD: full-colour band glass ---- */

  .oc-aircheck__card {
    position: relative;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 10px clamp(28px, 3.5vw, 46px);
    padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 34px) 18px;
    color: var(--pc-ink);
    background: #eef0ea;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 40%),
      radial-gradient(640px 340px at 12% -12%, color-mix(in srgb, var(--pc-deep) 36%, transparent), transparent 60%),
      linear-gradient(180deg, var(--pc-fill-1), var(--pc-fill-2));
    border: 1px solid var(--pc-bd);
    border-radius: 28px;
    /* Depth is optical, never cast (module 13 section 2.4). The card used to sit
       under a 48px offset drop shadow in the band's own deep tone, which is what
       made it read as a sticker lying on the page instead of glass floating over
       it. What replaces it: a catch-light along the top edge where the light
       enters, and a zero-offset halo in the card's own colour. */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .46),
      0 0 0 1px color-mix(in srgb, var(--pc-tint) 22%, transparent),
      0 0 34px 2px color-mix(in srgb, var(--pc-tint) 20%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    transition: box-shadow .7s ease, border-color .7s ease;
  }

  /* ---- top strip ---- */

  .oc-aircheck__top {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
  }

  .oc-aircheck__livechip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--pc-ink-soft);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-aircheck__livedot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #1CB142;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .75);
    position: relative;
    flex: none;
  }

  .oc-aircheck__livedot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    animation: oc-aircheck-ping 2.2s ease-out infinite;
  }

  @keyframes oc-aircheck-ping {
    0% { transform: scale(.55); opacity: 1; }
    80%, 100% { transform: scale(1.55); opacity: 0; }
  }

  @keyframes oc-aircheck-breathe {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: .45; }
    50% { transform: translateY(-50%) scale(1.14); opacity: .8; }
  }

  .oc-aircheck__top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .oc-aircheck__source { color: var(--pc-ink-faint); font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); }

  /* Chips and tabs are CONTROLS, not calls to action: they take the label role,
     not the button role, so a row of them still fits a 390px card. */
  .oc-aircheck__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 7px 12px;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    color: var(--pc-ink);
    background: var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-radius: 999px;
    /* Chips are pills by role (the mockup's .tab / .lockchip), but they carry the same
       single frost recipe as every other glass surface on the page. */
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
  }

  .oc-aircheck__chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  @media (hover: hover) and (pointer: fine) {
    .oc-aircheck__chip:hover { transform: translateY(-1px); }
    .oc-aircheck__chip--strong:hover { background: rgba(255, 255, 255, .8); }
  }

  /* Primary chip = the frost pill (23 Aug): white glass on whatever band colour the
     card wears, dead flat, green in the glow only. */
  .oc-aircheck__chip--strong {
    color: #07270b;
    background: rgba(255, 255, 255, .66);
    border-color: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 20px rgba(4, 18, 6, .16), 0 2px 8px rgba(28, 177, 66, .14);
  }

  .oc-aircheck__chip--ghost { background: rgba(255, 255, 255, .18); color: var(--pc-ink-soft); }

  .oc-aircheck__prompt {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background:
      linear-gradient(180deg, var(--pc-cell-catch), transparent 52%),
      var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-top-color: var(--pc-cell-lit);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--pc-cell-catch);
  }

  /* Collapsed (visitor already chose): the JS hides the copy and the dismiss
     button, leaving only the precise-location chip. The box must go with them,
     or a full-width frost slab paints around one small pill. The chip is its
     own glass; the container paints nothing. */
  .oc-aircheck__prompt.is-collapsed {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .oc-aircheck__prompt-copy strong { display: block; color: var(--pc-ink); }
  .oc-aircheck__prompt-copy span { display: block; margin-top: 2px; font-size: var(--oc-fs-small); color: var(--pc-ink-soft); }
  .oc-aircheck__precise-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  /* ---- hero (left) ---- */

  .oc-aircheck__hero { min-width: 0; }

  .oc-aircheck__bignum-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 6px 0 4px;
  }

  /* The specular edge: a gradient border, brightest where the light enters at the
     top left and falling away round the card. One flat 1px white border reads as
     a rectangle; this reads as an edge with a thickness to it. Masked so only the
     1px ring paints (module 13 section 2.3). */
  .oc-aircheck__card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(165deg,
      rgba(255, 255, 255, .78) 0%,
      rgba(255, 255, 255, .14) 38%,
      rgba(255, 255, 255, .34) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }

  /* The breath. The card is reading live air, so it should look like it is
     running: the halo swells and settles on a slow cycle. Opacity and transform
     only, so it composites on the GPU and costs no repaint. */
  .oc-aircheck__card::after {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: -1;
    border-radius: 44px;
    background: radial-gradient(closest-side,
      color-mix(in srgb, var(--pc-tint) 34%, transparent), transparent 78%);
    filter: blur(16px);
    opacity: .5;
    animation: oc-aircheck-halo 7.5s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes oc-aircheck-halo {
    0%, 100% { opacity: .42; transform: scale(1); }
    50%      { opacity: .72; transform: scale(1.018); }
  }

  .oc-aircheck__aura {
    position: absolute;
    left: -48px;
    top: 50%;
    width: 200px;
    height: 200px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pc-deep) 48%, transparent), transparent 66%);
    filter: blur(18px);
    animation: oc-aircheck-breathe 5.5s ease-in-out infinite;
    pointer-events: none;
  }

  /* The AQI reading is THE figure: the one number the whole card is built around,
     and the only role in the system that runs bigger than a headline (D-111, D-171). */
  .oc-aircheck__bignum {
    position: relative;
    font-size: var(--oc-fs-figure);
    font-weight: var(--oc-w-bold);
    letter-spacing: var(--oc-tr-hero);
    line-height: var(--oc-lh-figure);
  }

  .oc-aircheck__bandchip {
    position: relative;
    display: inline-flex;
    padding: 7px 15px;
    font-size: var(--oc-fs-small);
    letter-spacing: var(--oc-tr-small);
    color: var(--pc-ink);
    background:
      linear-gradient(180deg, var(--pc-cell-catch), transparent 58%),
      var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-top-color: var(--pc-cell-lit);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 var(--pc-cell-catch);
  }

  .oc-aircheck__place-block h3 { margin: 10px 0 0; font-size: var(--oc-fs-card); color: var(--pc-ink); }
  .oc-aircheck__place-block p { margin: 2px 0 0; font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); color: var(--pc-ink-soft); }

  .oc-aircheck__updated { margin: 8px 0 0; font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); color: var(--pc-ink-soft); }

  .oc-aircheck__dominant {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;
    align-items: baseline;
    margin-top: 4px;
    font-size: var(--oc-fs-small);
  }

  .oc-aircheck__dominant > span { color: var(--pc-ink-faint); font-weight: var(--oc-w-medium); }
  .oc-aircheck__dominant > strong { color: var(--pc-ink); }
  .oc-aircheck__dominant > p { margin: 0; color: var(--pc-ink-soft); font-weight: var(--oc-w-medium); }
  .oc-aircheck__dominant small { color: var(--pc-ink-faint); }

  .oc-aircheck__meaning {
    margin: 12px 0 0;
    max-width: 44ch;
    color: var(--pc-ink-soft);
  }

  /* ---- data (right): tabs · panes · meter ---- */

  .oc-aircheck__data { min-width: 0; }

  .oc-aircheck__tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  /* Same tab language as the shop band: a pill, transparent until selected. */
  .oc-aircheck__tabs button {
    min-height: 44px;
    padding: 7px 13px;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    color: #3d443f;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .oc-aircheck__tabs button[aria-selected="true"] {
    color: #15181b;
    background: rgba(255, 255, 255, .75);
    border-color: rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .05);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-aircheck__tabs button:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .16); }
  }

  .oc-aircheck__panels { min-height: 188px; }

  .oc-aircheck__section-heading {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: 0 0 10px;
  }

  .oc-aircheck__section-heading h4,
  .oc-aircheck__section-heading span {
    margin: 0;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
    color: var(--pc-ink-faint);
  }

  .oc-aircheck__panel-state { margin: 10px 0 0; font-size: var(--oc-fs-small); color: var(--pc-ink-soft); }

  /* hourly */
  .oc-aircheck__hourly-curve { display: block; width: 100%; max-width: 560px; height: auto; }
  .oc-aircheck__hourly-area { fill: var(--pc-data); opacity: .14; }
  .oc-aircheck__hourly-line { fill: none; stroke: var(--pc-data); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .oc-aircheck__hourly-point { fill: var(--point-color, #c1c1c2); stroke: #fff; stroke-width: 1.6; }

  .oc-aircheck__hourly-list {
    display: flex;
    /* 4px, not the usual 6: at 768 the twelve tiles missed fitting by 17px and
       a scrollbar for 17px is worse than a tighter row. At wide widths the
       tiles grow to fill, so the difference vanishes into them. */
    gap: 4px;
    margin: 10px 0 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  /* Frost, not Dense Graphite: founder call, 26 August 2026. What makes a cell
     this small read as glass is not its own backdrop-filter (the phone budget is
     8 live blur surfaces and the card already spends one) but the optics: the
     band colour coming through the fill, a catch-light on the inside of the top
     edge, and a border lit where the light enters. */
  .oc-aircheck__forecast-item {
    display: grid;
    gap: 3px;
    justify-items: center;
    padding: 9px 6px;
    background:
      linear-gradient(180deg, var(--pc-cell-catch), transparent 52%),
      var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-top-color: var(--pc-cell-lit);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--pc-cell-catch);
    text-align: center;
  }

  /* Times and dates are DATA, not category labels: they take the small role's
     tracking, not the eyebrow's. The eyebrow tracking cost ~6px per "10:30p"
     and was the difference between twelve tiles fitting and the twelfth being
     cut off (measured: 786px needed in a 722px column at 1440). */
  .oc-aircheck__forecast-item time { font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); letter-spacing: var(--oc-tr-small); text-transform: uppercase; color: var(--pc-ink-faint); }
  .oc-aircheck__forecast-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--point-color, #c1c1c2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .65); }
  .oc-aircheck__forecast-item strong { font-size: var(--oc-fs-card); color: var(--pc-ink); }
  .oc-aircheck__forecast-item small { font-weight: var(--oc-w-medium); color: var(--pc-ink-soft); }

  .oc-aircheck__forecast-item.is-hourly { flex: 1 1 0; }
  .oc-aircheck__forecast-item.is-hourly small { display: none; }

  /* outlook: future-only (past kept for the data layer, never shown) */
  .oc-aircheck__past-days { display: none !important; }

  .oc-aircheck__outlook-groups section > h5 { margin: 0; }

  .oc-aircheck__outlook-groups ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .oc-aircheck__outlook-groups .oc-aircheck__forecast-item { padding: 13px 8px; border-radius: 14px; }
  .oc-aircheck__outlook-groups .oc-aircheck__forecast-item strong { font-size: var(--oc-fs-h3); }
  .oc-aircheck__outlook-groups .oc-aircheck__forecast-item i { width: 8px; height: 8px; }

  /* pollutants + pollen */
  .oc-aircheck__pollutants,
  .oc-aircheck__pollen-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
  }

  .oc-aircheck__pollutant,
  .oc-aircheck__pollen-card {
    display: grid;
    gap: 3px;
    justify-items: center;
    margin: 0;
    padding: 12px 8px;
    background: var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-radius: 12px;
    text-align: center;
  }

  .oc-aircheck__pollutant span,
  .oc-aircheck__pollen-card span { font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); color: var(--pc-ink-soft); }
  .oc-aircheck__pollutant strong,
  .oc-aircheck__pollen-card strong { font-size: var(--oc-fs-card); color: var(--pc-ink); }
  .oc-aircheck__pollutant small,
  .oc-aircheck__pollen-card small { font-weight: var(--oc-w-medium); color: var(--pc-ink-faint); }

  .oc-aircheck__pollen-card::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pollen-color, #d6d6d6);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .65);
  }

  .oc-aircheck__pollen { margin-top: 16px; }
  .oc-aircheck__pollen-forecast { margin-top: 10px; }
  .oc-aircheck__pollen-forecast h5 { margin: 0 0 6px; font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); letter-spacing: var(--oc-tr-eyebrow); text-transform: uppercase; color: var(--pc-ink-faint); }
  .oc-aircheck__pollen-days { display: grid; gap: 4px; font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); color: var(--pc-ink-soft); }

  /* the meter */
  .oc-aircheck__scale { margin-top: 16px; }

  .oc-aircheck__scale-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }

  .oc-aircheck__scale-head span { font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); letter-spacing: var(--oc-tr-eyebrow); text-transform: uppercase; color: var(--pc-ink-faint); }
  .oc-aircheck__scale-head b { font-size: var(--oc-fs-small); color: var(--pc-ink); }

  .oc-aircheck__scale-track {
    position: relative;
    display: flex;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
  }

  .oc-aircheck__scale-band { height: 100%; background: var(--band-color, #c1c1c2); box-shadow: none; }
  .oc-aircheck__scale-band:first-of-type { border-radius: 999px 0 0 999px; }
  .oc-aircheck__scale-band:last-of-type { border-radius: 0 999px 999px 0; }

  .oc-aircheck__scale-track [data-air-marker] {
    position: absolute;
    top: 50%;
    left: var(--aircheck-marker, 0%);
    z-index: 2;
    width: 15px;
    height: 15px;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 3px solid rgba(17, 20, 12, .55);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: left .8s var(--pc-ease);
  }

  .oc-aircheck__scale-ends {
    display: flex;
    justify-content: space-between;
    margin: 6px 0 0;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    color: var(--pc-ink-faint);
  }

  /* ---- foot ---- */

  .oc-aircheck__foot {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pc-cell-bd);
  }

  .oc-aircheck__actions-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .oc-aircheck__search-panel { flex: 1 1 320px; max-width: 480px; }
  .oc-aircheck__search { position: relative; margin: 0; }

  .oc-aircheck__combobox {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 12px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(15, 20, 22, .13);
    border-radius: 12px;
  }

  .oc-aircheck__combobox svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #5a6a5c; stroke-width: 2; stroke-linecap: round; }

  .oc-aircheck__combobox input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: #15181b;
    font-size: var(--oc-fs-body);
    font-weight: var(--oc-w-medium);
    /* unitless 1 is alignment, not typesetting: the field is a fixed 46px pill */
    line-height: 1;
    background: transparent;
    border: 0;
    outline: none;
    appearance: none;
  }

  .oc-aircheck__combobox input::placeholder { color: #9aa298; }
  .oc-aircheck__combobox input::-webkit-search-cancel-button { display: none; }

  .oc-aircheck__combobox [data-air-clear] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #5a6a5c;
    background: rgba(15, 20, 22, .07);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .oc-aircheck__suggestions {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 40;
    padding: 6px;
    color: #15181b;
    background: #fff;
    border: 1px solid rgba(15, 20, 22, .1);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(10, 14, 16, .2);
  }

  .oc-aircheck__suggestions ul { margin: 0; padding: 0; list-style: none; }

  .oc-aircheck__suggestions li[data-air-option] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
  }

  .oc-aircheck__suggestions li[data-air-option] span { font-size: var(--oc-fs-small); color: #5a6a5c; }

  .oc-aircheck__suggestions li[data-air-option][aria-selected="true"],
  .oc-aircheck__suggestions li[data-air-option]:hover { background: rgba(28, 177, 66, .12); }

  .oc-aircheck__suggestions > p { margin: 6px 12px 6px; font-size: var(--oc-fs-small); color: #8a938b; }

  .oc-aircheck__save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    color: #07270b;
    background: rgba(255, 255, 255, .66);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(4, 18, 6, .16), 0 2px 8px rgba(28, 177, 66, .14);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    transition: transform 160ms ease, background-color 160ms ease;
  }

  .oc-aircheck__save svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

  @media (hover: hover) and (pointer: fine) {
    .oc-aircheck__save:not([disabled]):hover { background: rgba(255, 255, 255, .8); transform: translateY(-1px); }
  }

  .oc-aircheck__save[disabled] {
    color: var(--pc-ink-faint);
    cursor: default;
    background: var(--pc-cell);
    border-color: var(--pc-cell-bd);
    box-shadow: none;
  }

  .oc-aircheck__favorites-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
  }

  .oc-aircheck__favorites-head strong {
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
    color: var(--pc-ink-soft);
  }

  .oc-aircheck__favorites-head span { font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); color: var(--pc-ink-faint); }

  .oc-aircheck__favorites ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }

  .oc-aircheck__favorites li { display: inline-flex; align-items: center; gap: 4px; }

  .oc-aircheck__favorites [data-air-favorite-open] {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 13px;
    color: var(--pc-ink);
    background: var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-radius: 999px;
    cursor: pointer;
    transition: transform 160ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-aircheck__favorites [data-air-favorite-open]:hover { transform: translateY(-1px); }
  }

  .oc-aircheck__favorites [data-air-favorite-open][aria-current="location"] { box-shadow: inset 0 0 0 1.5px var(--pc-ink-soft); }

  .oc-aircheck__favorite-star { font-size: var(--oc-fs-small); color: var(--pc-ink-soft); }
  .oc-aircheck__favorites [data-air-favorite-open] small { margin-left: 5px; font-weight: var(--oc-w-medium); color: var(--pc-ink-faint); }

  .oc-aircheck__favorites [data-air-favorite-remove] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--pc-ink-soft);
    background: var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-radius: 50%;
    cursor: pointer;
  }

  .oc-aircheck__favorites [data-air-favorite-empty] { margin: 8px 0 0; }
  .oc-aircheck__favorites > p { margin: 8px 0 0; font-size: var(--oc-fs-small); color: var(--pc-ink-faint); }

  .oc-aircheck__notice { margin: 0; font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); color: var(--pc-ink-faint); }

  .oc-aircheck__fineprint {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: baseline;
    justify-content: space-between;
  }

  .oc-aircheck__attribution { font-size: var(--oc-fs-small); color: var(--pc-ink-faint); }
  .oc-aircheck__attribution a { color: inherit; text-decoration: underline; }
  .oc-aircheck__fineprint > p { margin: 0; font-size: var(--oc-fs-small); color: var(--pc-ink-faint); }
  .oc-aircheck__fineprint > p a { color: inherit; text-decoration: underline; }

  /* ---- responsive ---- */

  @media screen and (max-width: 900px) {
    .oc-aircheck__masthead { grid-template-columns: 1fr; align-items: start; gap: 10px; }
    .oc-aircheck__card { grid-template-columns: 1fr; gap: 18px; }
    .oc-aircheck__panels { min-height: 0; }
    .oc-aircheck__aura { left: -28px; width: 160px; height: 160px; }
    .oc-aircheck__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .oc-aircheck__tabs button { flex: 0 0 auto; }
    .oc-aircheck__fineprint { flex-direction: column; }
    .oc-aircheck__search-panel { max-width: none; }
  }

  /* ---- Mobile compaction (founder, 22 Aug 2026) --------------------------------
     "it is too long, should fit comfortably in one screen. too much useless writing
     and space wasted at the bottom."

     Presentation only. No locale string is edited and no data-* hook is removed, so
     the protected data layer (assets/oxiclear-air-check.js + locales/en.default.json)
     is untouched. Everything below either hides instructional prose that repeats what
     the card already shows, or tightens spacing. The status notice is CLIPPED rather
     than display:none so the script can still write to it and a screen reader still
     reads it. Google attribution and the Terms line stay: they are required, not
     decoration. ---------------------------------------------------------------- */
  @media screen and (max-width: 767px) {
    /* the logo divider is a desktop flourish; the masthead already separates the band */
    .oc-aircheck__divider { display: none; }

    .oc-aircheck__masthead {
      gap: 4px;
      margin-bottom: 14px;
    }

    /* the standfirst lists what the card itself shows, one scroll below it */
    .oc-aircheck__masthead > p { display: none; }

    .oc-aircheck__card {
      gap: 12px;
      padding: 16px 16px 14px;
    }

    .oc-aircheck__top { gap: 8px 12px; }

    .oc-aircheck__prompt {
      gap: 8px 12px;
      padding: 10px 12px;
    }

    /* keep the ask and both buttons; drop the sentence explaining the ask */
    .oc-aircheck__prompt-copy > span { display: none; }

    .oc-aircheck__foot {
      gap: 8px;
      margin-top: 10px;
      padding-top: 10px;
    }

    /* "Save up to 3 on this device. No account needed." and "Choose a place above,
       then tap Save this place." are instructions for a control that is right there */
    .oc-aircheck__favorites-head > span[id^="aircheck-favorites-help"],
    .oc-aircheck__favorites > p[data-air-favorite-empty] { display: none; }

    .oc-aircheck__favorites { gap: 6px; }
    .oc-aircheck__favorites-head { gap: 8px; }

    /* clipped, not removed: the script writes here and it is announced */
    .oc-aircheck__notice {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .oc-aircheck__fineprint {
      gap: 4px;
    }

    /* the band is already named in the chip beside the number; this repeats it */
    .oc-aircheck__meaning { display: none; }

    .oc-aircheck__updated { margin-top: 5px; }
    .oc-aircheck__dominant { margin-top: 2px; }
    .oc-aircheck__bignum-wrap { margin: 2px 0 2px; }

    /* the six band colours carry the range; the 0/500 end labels restate it */
    .oc-aircheck__scale-ends { display: none; }
    .oc-aircheck__scale-head { margin-bottom: 6px; }

    /* source chip and Refresh belong on one line */
    .oc-aircheck__top {
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
    }
    .oc-aircheck__top-actions { flex: 0 0 auto; }

    /* nowrap on the row squeezed the chip until "NAQI (IN)" broke over two lines */
    .oc-aircheck__livechip { flex: 0 0 auto; white-space: nowrap; }
    .oc-aircheck__source { min-width: 0; }
  }

  @media screen and (max-width: 520px) {
    .oc-aircheck__pollutants,
    .oc-aircheck__pollen-summary,
    .oc-aircheck__outlook-groups ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oc-aircheck__actions-row { flex-direction: column; align-items: stretch; }
    .oc-aircheck__search-panel { flex: 0 0 auto; } /* flex-basis is HEIGHT in column mode */
    .oc-aircheck__save { justify-content: center; }
  }

  /* ---- fallbacks ---- */

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-aircheck__card {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--pc-tint) 86%, #fff), color-mix(in srgb, var(--pc-tint) 96%, #fff));
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-aircheck__card {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--pc-tint) 86%, #fff), color-mix(in srgb, var(--pc-tint) 96%, #fff));
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-aircheck__aura { animation: none; opacity: .5; }
    .oc-aircheck__card::after { animation: none; opacity: .5; }
    .oc-aircheck__livedot::after { animation: none; opacity: 0; }
    .oc-aircheck__scale-track [data-air-marker] { transition: none; }
  }
/* END_SECTION:oxiclear-air-check */

/* START_SECTION:oxiclear-b2b-distributor (INDEX:42) */
/* This page used to run a private palette built on aqua #14171C and petrol
     #27727a, with cyan and green washes behind it and its own cold ground. Module 13
     §3.2 bans aqua, petrol, teal and cyan as system colours anywhere, and forbids the
     logo colours as background washes, so the page was outside the law rather than
     merely different. It also forced the system font, which kept it out of the type
     system entirely. Rejoined to the system, 24 Aug 2026. Every type number here now
     comes from snippets/oxiclear-type.liquid. */
  .oc-b2b {
    --oc-b2b-night: var(--ink-900, #14171C);
    --oc-b2b-ink: var(--ink-900, #14171C);
    --oc-b2b-soft-ink: var(--ink-700, #454C56);
    --oc-b2b-muted: var(--ink-500, #545C6A);
    --oc-b2b-line: var(--oxg-border, #E6E5E0);
    --oc-b2b-soft: var(--paper, #F4F4EF);
    --oc-b2b-press: #1CB142;
    width: 100%;
    padding: clamp(20px, 3vw, 44px) clamp(16px, 4vw, 64px) clamp(64px, 8vw, 112px);
    overflow: clip;
    color: var(--oc-b2b-soft-ink);
    background: var(--paper, #F4F4EF);
  }

  .oc-b2b *,
  .oc-b2b *::before,
  .oc-b2b *::after {
    box-sizing: border-box;
  }

  .oc-b2b__inner {
    width: min(100%, 1400px);
    margin: 0 auto;
  }

  .oc-b2b__divider {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(1170px, calc(100vw - 40px));
    margin: 0 auto 14px;
  }

  .oc-b2b__divider span {
    flex: 1 1 auto;
    border-top: 2px solid #0b2f33;
  }

  .oc-b2b__divider img {
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
  }

  .oc-b2b__eyebrow,
  .oc-b2b__kicker,
  .oc-b2b__route-label {
    margin: 0 0 10px;
    color: var(--ink-500, #545C6A);
    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;
  }

  .oc-b2b__eyebrow {
    margin-bottom: 8px;
    text-align: center;
  }

  .oc-b2b > .oc-b2b__inner > h1 {
    margin: 0 auto clamp(22px, 3vw, 42px);
    color: var(--oc-b2b-ink);
    scroll-margin-top: 96px;
    text-align: center;
    text-wrap: balance;
  }

  .oc-b2b h2,
  .oc-b2b h3,
  .oc-b2b p {
    text-wrap: pretty;
  }

  .oc-b2b__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(390px, .85fr);
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(30px, 4vw, 58px);
    overflow: hidden;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface, rgba(255, 255, 255, .76));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
    backdrop-filter: blur(var(--oxg-blur, 18px)) saturate(var(--oxg-saturate, 120%));
    -webkit-backdrop-filter: blur(var(--oxg-blur, 18px)) saturate(var(--oxg-saturate, 120%));
  }

  .oc-b2b__hero::after {
    position: absolute;
    top: -140px;
    right: -110px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(20, 23, 28, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(20, 23, 28, .05), 0 0 0 72px rgba(20, 23, 28, .035);
    pointer-events: none;
    content: "";
  }

  .oc-b2b__hero-copy,
  .oc-b2b__route-summary {
    position: relative;
    z-index: 1;
  }

  .oc-b2b__hero-copy h2,
  .oc-b2b__section-heading h2,
  .oc-b2b__proof h2,
  .oc-b2b__distribution-note h2,
  .oc-b2b__form-panel h2 {
    margin: 0;
    color: var(--oc-b2b-ink);
  }

  .oc-b2b__hero-copy h2 {
    max-width: 16ch;
    text-wrap: balance;
  }

  .oc-b2b__lead {
    max-width: 720px;
    margin: 22px 0 0;
    color: var(--oc-b2b-soft-ink);
    font-size: var(--oc-fs-body-lg);
  }

  .oc-b2b__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
  }

  .oc-b2b .oc-b2b__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px;
    border: 1px solid var(--oc-b2b-press);
    border-radius: var(--oxg-radius-pill, 999px);
    color: #fff;
    background: var(--oc-b2b-press);
    box-shadow: 0 10px 24px rgba(28, 177, 66, .22);
    text-align: center;
    text-decoration: none;
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), background 160ms ease, border-color 160ms ease, box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oc-b2b .oc-b2b__button:hover {
    color: #fff;
    background: #17993A;
  }

  .oc-b2b .oc-b2b__button--secondary {
    color: var(--oc-b2b-night);
    border-color: var(--oxg-border, rgba(255, 255, 255, .92));
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 10px 24px rgba(36, 36, 36, .08);
  }

  .oc-b2b .oc-b2b__button--secondary:hover {
    color: #000;
    border-color: #fff;
    background: #fff;
  }

  .oc-b2b__trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
  }

  .oc-b2b__trust-list li {
    position: relative;
    padding: 8px 12px 8px 30px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: none;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
  }

  .oc-b2b__trust-list li::before {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-500, #545C6A);
    box-shadow: 0 0 0 4px rgba(20, 23, 28, .08);
    transform: translateY(-50%);
    content: "";
  }

  .oc-b2b__route-summary {
    align-self: stretch;
    min-width: 0;
    padding: clamp(22px, 2.5vw, 32px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-lg, 22px);
    color: var(--oc-b2b-soft-ink);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 12px 30px rgba(36, 36, 36, .07);
  }

  .oc-b2b__route-summary .oc-b2b__route-label {
    color: var(--ink-500, #545C6A);
  }

  .oc-b2b__route-summary h2 {
    margin: 0 0 22px;
    color: var(--oc-b2b-ink);
  }

  .oc-b2b__route-summary dl {
    margin: 0;
  }

  .oc-b2b__route-summary dl > div {
    display: grid;
    grid-template-columns: clamp(112px, 34%, 150px) minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--oxg-line, rgba(20, 23, 28, .14));
  }

  .oc-b2b__route-summary dt,
  .oc-b2b__route-summary dd {
    min-width: 0;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }

  .oc-b2b__route-summary dt {
    color: var(--ink-500, #545C6A);
    font-weight: var(--oc-w-medium);
  }

  .oc-b2b__route-summary dd {
    margin: 0;
    color: var(--oc-b2b-muted);
  }

  .oc-b2b__section {
    padding-top: clamp(64px, 8vw, 108px);
  }

  .oc-b2b__section-heading {
    max-width: 820px;
    margin: 0 auto clamp(30px, 4vw, 48px);
    text-align: center;
  }

  .oc-b2b__section-heading > p:last-child,
  .oc-b2b__proof-copy > p,
  .oc-b2b__form-intro > p {
    margin: 18px 0 0;
    color: var(--oc-b2b-muted);
  }

  .oc-b2b__audience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .oc-b2b__audience-card {
    min-width: 0;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-lg, 22px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 14px 36px rgba(36, 36, 36, .07);
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-b2b__audience-card:hover {
      box-shadow: var(--oxg-shadow-lift, 0 26px 64px rgba(36, 36, 36, .13));
      transform: translateY(-3px) scale(1.02);
    }

    .oc-b2b__audience-card:hover .oc-b2b__icon {
      transform: scale(1.055);
      box-shadow: 0 17px 34px color-mix(in srgb, currentColor 22%, transparent);
    }

    .oc-b2b .oc-b2b__button:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(0, 0, 0, .16);
    }

    .oc-b2b .oc-b2b__button--secondary:hover {
      box-shadow: 0 14px 30px rgba(36, 36, 36, .12);
    }
  }

  .oc-b2b__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 22px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: 50%;
    box-shadow: 0 12px 28px color-mix(in srgb, currentColor 16%, transparent);
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oc-b2b__icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .oc-b2b__icon--aqua { color: #00aeca; background: #e4f8fb; }
  .oc-b2b__icon--green { color: #31a85a; background: #eaf7ed; }
  .oc-b2b__icon--violet { color: #7368ce; background: #efedfb; }
  .oc-b2b__icon--orange { color: #dd7d2d; background: #fff1e4; }

  .oc-b2b__audience-card h3,
  .oc-b2b__process-list h3 {
    margin: 0;
    color: var(--oc-b2b-ink);
    font-size: var(--oc-fs-card);
    line-height: var(--oc-lh-card);
  }

  .oc-b2b__audience-card p,
  .oc-b2b__process-list p {
    margin: 12px 0 0;
    color: var(--oc-b2b-muted);
  }

  .oc-b2b__proof {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: clamp(28px, 5vw, 64px);
    margin-top: clamp(64px, 8vw, 108px);
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface, rgba(255, 255, 255, .76));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oc-b2b__proof-points {
    display: grid;
    align-content: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .oc-b2b__proof-points > div {
    display: flex;
    min-height: 150px;
    padding: 22px 16px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-lg, 22px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 12px 30px rgba(36, 36, 36, .06);
    text-align: center;
  }

  .oc-b2b__proof-points strong {
    color: var(--oc-b2b-ink);
    font-size: var(--oc-fs-price);
    font-weight: var(--oc-w-bold);
    letter-spacing: var(--oc-tr-price);
    line-height: var(--oc-lh-price);
  }

  .oc-b2b__proof-points span {
    margin-top: 9px;
    color: var(--oc-b2b-muted);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  .oc-b2b__test-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 18px 22px;
    border-left: 3px solid var(--oxg-border, #E6E5E0);
    border-radius: 0 14px 14px 0;
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: none;
  }

  .oc-b2b__test-note p {
    margin: 0;
    color: var(--oc-b2b-soft-ink);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  .oc-b2b__text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--ink-700, #454C56);
    font-weight: var(--oc-w-semibold);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .oc-b2b__product-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .oc-b2b__product-list li {
    display: flex;
    min-height: 108px;
    padding: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: 18px;
    color: var(--oc-b2b-ink);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 10px 28px rgba(36, 36, 36, .06);
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-card);
    text-align: center;
  }

  .oc-b2b__availability {
    margin: 16px auto 0;
    color: var(--oc-b2b-muted);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
    text-align: center;
  }

  .oc-b2b__process-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .oc-b2b__process-list li {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 24px clamp(18px, 2.5vw, 30px);
    gap: 16px;
    border-left: 1px solid var(--oc-b2b-line);
  }

  .oc-b2b__process-list li:first-child {
    border-left: 0;
  }

  .oc-b2b__process-list li > span {
    flex: 0 0 auto;
    color: var(--ink-500, #545C6A);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
  }

  .oc-b2b__process-list p {
    font-size: var(--oc-fs-small);
  }

  .oc-b2b__distribution-note {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: clamp(24px, 5vw, 72px);
    margin-top: clamp(64px, 8vw, 108px);
    padding: clamp(28px, 5vw, 58px);
    align-items: center;
    border-radius: 30px;
    color: #fff;
    background: var(--oc-b2b-night);
    box-shadow: 0 22px 52px rgba(0, 0, 0, .14);
  }

  .oc-b2b__distribution-note .oc-b2b__kicker {
    color: var(--white, #FFFFFF);
  }

  .oc-b2b__distribution-note h2 {
    color: #fff;
  }

  .oc-b2b__distribution-note > p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
  }

  .oc-b2b__form-panel {
    display: grid;
    grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
    gap: clamp(32px, 6vw, 84px);
    margin-top: clamp(64px, 8vw, 108px);
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface, rgba(255, 255, 255, .76));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
    scroll-margin-top: 120px;
  }

  .oc-b2b__response-note {
    display: flex;
    margin-top: 30px;
    padding: 18px;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(20, 23, 28, .32);
    border-radius: 14px;
    background: rgba(20, 23, 28, .08);
  }

  .oc-b2b__response-note strong {
    color: var(--oc-b2b-ink);
  }

  .oc-b2b__response-note span,
  .oc-b2b__direct-contact {
    color: var(--oc-b2b-muted);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  .oc-b2b__direct-contact a {
    color: var(--ink-700, #454C56);
    font-weight: var(--oc-w-medium);
  }

  .oc-b2b__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
    scroll-margin-top: 120px;
  }

  .oc-b2b__field {
    min-width: 0;
  }

  .oc-b2b__field--full,
  .oc-b2b__errors,
  .oc-b2b__success {
    grid-column: 1 / -1;
  }

  .oc-b2b__field label {
    display: block;
    margin: 0 0 8px;
    color: var(--oc-b2b-soft-ink);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
  }

  .oc-b2b__field :is(input, select, textarea) {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--oxg-line, rgba(20, 23, 28, .14));
    border-radius: var(--oxg-radius-md, 16px);
    color: var(--oc-b2b-ink);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: none;
    font: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .oc-b2b__field textarea {
    min-height: 120px;
    resize: vertical;
  }

  .oc-b2b__field :is(input, select, textarea):hover {
    border-color: rgba(20, 23, 28, .3);
  }

  .oc-b2b__field :is(input, select, textarea):focus-visible,
  .oc-b2b :is(a, button):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oc-b2b__field :is(input, select, textarea):focus-visible {
    border-color: var(--ink-500, #545C6A);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(20, 23, 28, .14);
  }

  .oc-b2b__form-footer {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .oc-b2b__form-footer p {
    margin: 0;
    color: var(--oc-b2b-muted);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  .oc-b2b__errors,
  .oc-b2b__success {
    padding: 18px 20px;
    border-radius: 14px;
  }

  .oc-b2b__errors {
    border: 1px solid rgba(159, 47, 47, .28);
    color: #7b2424;
    background: rgba(159, 47, 47, .07);
  }

  .oc-b2b__errors p,
  .oc-b2b__errors ul,
  .oc-b2b__success p {
    margin: 0;
  }

  .oc-b2b__errors ul {
    margin-top: 8px;
    padding-left: 20px;
  }

  .oc-b2b__success {
    border: 1px solid rgba(49, 168, 90, .3);
    color: #1d6136;
    background: rgba(49, 168, 90, .08);
  }

  .oc-b2b__success strong {
    display: block;
    margin-bottom: 6px;
    font-size: var(--oc-fs-card);
  }

  .oc-b2b__fineprint {
    max-width: 920px;
    margin: 24px auto 0;
    color: var(--oc-b2b-muted);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
    text-align: center;
  }

  .oc-b2b__fineprint a {
    color: #375e62;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media screen and (max-width: 1200px) {
    .oc-b2b__hero,
    .oc-b2b__proof,
    .oc-b2b__form-panel {
      grid-template-columns: 1fr;
    }

    .oc-b2b__audience-grid,
    .oc-b2b__product-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oc-b2b__process-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      background: var(--oc-b2b-line);
    }

    .oc-b2b__process-list li,
    .oc-b2b__process-list li:first-child {
      border: 0;
      background: #fff;
    }
  }

  @media screen and (max-width: 767px) {
    .oc-b2b {
      padding-top: 24px;
      padding-inline: 16px;
    }

    .oc-b2b__divider {
      width: calc(100vw - 20px);
      margin-left: 50%;
      transform: translateX(-50%);
    }

    .oc-b2b__hero,
    .oc-b2b__proof,
    .oc-b2b__distribution-note,
    .oc-b2b__form-panel {
      border-radius: 24px;
    }

    .oc-b2b__hero {
      gap: 24px;
      padding: 26px;
    }

    .oc-b2b__distribution-note {
      grid-template-columns: 1fr;
    }

    .oc-b2b__audience-grid {
      grid-template-columns: 1fr;
    }

    .oc-b2b__audience-card {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 4px 16px;
      align-items: center;
    }

    .oc-b2b__audience-card .oc-b2b__icon {
      grid-row: 1 / span 2;
      width: 58px;
      height: 58px;
      margin: 0;
    }

    .oc-b2b__audience-card .oc-b2b__icon svg {
      width: 30px;
      height: 30px;
    }

    .oc-b2b__audience-card p {
      margin-top: 5px;
    }

    .oc-b2b__proof-points {
      grid-template-columns: 1fr;
    }

    .oc-b2b__proof-points > div {
      min-height: 112px;
    }

    .oc-b2b__process-list,
    .oc-b2b__form {
      grid-template-columns: 1fr;
    }

    .oc-b2b__field--full,
    .oc-b2b__errors,
    .oc-b2b__success {
      grid-column: auto;
    }

    .oc-b2b__form-footer {
      align-items: stretch;
      flex-direction: column;
    }

    .oc-b2b__form-footer .oc-b2b__button {
      width: 100%;
    }
  }

  @media screen and (max-width: 520px) {
    .oc-b2b__actions {
      align-items: stretch;
      flex-direction: column;
    }

    .oc-b2b__button {
      width: 100%;
    }

    .oc-b2b__route-summary dl > div {
      grid-template-columns: 1fr;
      gap: 4px;
    }

    .oc-b2b__product-list {
      grid-template-columns: 1fr;
    }

    .oc-b2b__product-list li {
      min-height: 72px;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-b2b__hero,
    .oc-b2b__proof,
    .oc-b2b__form-panel,
    .oc-b2b__audience-card {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-b2b__hero,
    .oc-b2b__proof,
    .oc-b2b__form-panel,
    .oc-b2b__audience-card,
    .oc-b2b__route-summary,
    .oc-b2b__proof-points > div,
    .oc-b2b__product-list li,
    .oc-b2b__trust-list li,
    .oc-b2b__test-note,
    .oc-b2b__field :is(input, select, textarea) {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-b2b *,
    .oc-b2b *::before,
    .oc-b2b *::after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
/* END_SECTION:oxiclear-b2b-distributor */

/* START_SECTION:oxiclear-legacy-404 (INDEX:43) */
.legacy-error-page { padding: 60px 30px; background: #fff; color: #000; }
  .legacy-error-page__inner { width: min(100%, 780px); margin: 0 auto; }
  .legacy-error-page__heading { margin: 0 0 25px; text-align: center; }
  .legacy-error-page__heading h1 { margin: 0; }
  .legacy-error-page__copy a { color: inherit; text-decoration: underline; }
  @media screen and (max-width: 767px) {
    .legacy-error-page { padding: 40px 20px; }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .legacy-error-page__inner {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 780px);
    padding: clamp(42px, 7vw, 90px);
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-panel);
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--oc-shadow-card);
  }

  @media (max-width: 767px) {
    body.oc-facelift .legacy-error-page__inner {
      padding: 24px 18px;
      border-radius: 22px;
    }
  }
/* END_SECTION:oxiclear-legacy-404 */

/* START_SECTION:oxiclear-legacy-article (INDEX:44) */
/* ---- The Air Journal, article page (D-175/176/177) ------------------------
     The paper stage shows through; this section paints no page background
     (D-123). Blur is spent only on the buy bar, which content scrolls beneath
     (13 section 2.6). */

  .oc-journal-article {
    --ocja-stage: 1320px;
    --ocja-band: 1240px;
    --ocja-prose: 720px;
    --ocja-frost: rgba(255, 255, 255, .64);
    --ocja-frost-well: rgba(255, 255, 255, .55);
    --ocja-edge: rgba(20, 23, 28, .08);
    --ocja-ink: #14171c;
    --ocja-ink-soft: #454c56;
    --ocja-ink-meta: #545c6a;
    padding: 0 16px 64px;
    color: var(--ocja-ink);
  }

  .oc-journal-article__head {
    width: min(100%, 860px);
    margin: 0 auto;
    padding: 52px 0 8px;
  }
  .oc-journal-article__head .oc-journal__kicker { margin-bottom: 18px; }

  .oc-journal-article__title {
    margin: 0 0 18px;
    max-width: 20ch;
    font-size: var(--oc-fs-hero);
    font-weight: var(--oc-w-bold);
    line-height: var(--oc-lh-hero);
    letter-spacing: var(--oc-tr-hero);
    text-wrap: balance;
  }
  .oc-journal-article__deck {
    max-width: 58ch;
    margin: 0 0 22px;
    color: var(--ocja-ink-soft);
    font-size: var(--oc-fs-body-lg);
    line-height: var(--oc-lh-body);
  }
  .oc-journal-article__byline {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid rgba(20, 23, 28, .12);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }
  .oc-journal-article__byline time,
  .oc-journal-article__byline span:not(:first-child) { color: var(--ocja-ink-meta); }

  /* ---- hero ---- */
  .oc-journal-article__hero {
    width: min(100%, var(--ocja-stage));
    margin: 20px auto 0;
  }
  .oc-journal-article__hero-media {
    position: relative;
    height: clamp(320px, 40vw, 560px);
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--ocja-edge);
  }
  .oc-journal-article__hero-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;
  }
  .oc-journal-article__hero figcaption {
    padding: 12px 6px 0;
    text-align: right;
    color: var(--ocja-ink-meta);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  /* ---- grid: prose + register rail ---- */
  .oc-journal-article__grid {
    width: min(100%, var(--ocja-band));
    margin: 56px auto 0;
    display: grid;
    grid-template-columns: minmax(0, var(--ocja-prose)) 380px;
    justify-content: space-between;
    gap: 40px;
  }
  .oc-journal-article__story { min-width: 0; }

  .oc-journal-article__body { font-size: 1.1875rem; line-height: 1.62; }
  .oc-journal-article__body > p { margin: 0 0 26px; max-width: 68ch; }
  .oc-journal-article__body h2 {
    margin: 44px 0 18px;
    font-size: var(--oc-fs-h2);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-h2);
    letter-spacing: var(--oc-tr-h2);
    text-wrap: balance;
  }
  .oc-journal-article__body h3 {
    margin: 32px 0 14px;
    font-size: var(--oc-fs-h3);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-h3);
  }
  .oc-journal-article__body img { border-radius: 16px; }
  .oc-journal-article__body figure { margin: 34px 0; }
  .oc-journal-article__body figcaption { color: var(--ocja-ink-meta); }
  .oc-journal-article__body ul,
  .oc-journal-article__body ol { max-width: 68ch; padding-left: 20px; }
  .oc-journal-article__body li { margin-bottom: 10px; }
  .oc-journal-article__body a { color: inherit; text-underline-offset: 3px; }

  /* Published issues carry their own drop cap and pull quote as inline styles.
     These rules only give them room; they do not restyle them. */
  .oc-journal-article__body blockquote { max-width: 34ch; }

  .oc-journal-article__nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(20, 23, 28, .12);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
  }

  /* ---- the register rail ---- */
  .oc-journal-article__rail { position: relative; }
  .oc-journal-article__rail-card {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 14px;
    padding: 24px;
    background: var(--ocja-frost);
    border: 1px solid var(--ocja-edge);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  .oc-journal-article__rail-figure { display: flex; justify-content: center; padding: 6px 0 2px; }
  .oc-journal-article__rail-figure img { max-height: 210px; width: auto; }
  .oc-journal-article__rail-title {
    margin: 0 0 4px;
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-card);
  }
  .oc-journal-article__rail-rule { height: 1px; background: rgba(20, 23, 28, .1); }
  .oc-journal-article__rail-card .oc-journal__cta { width: 100%; }

  .oc-journal-article__refill {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
  }
  .oc-journal-article__refill-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ocja-edge);
    background: var(--ocja-frost-well);
  }
  .oc-journal-article__refill-thumb img { max-width: 44px; max-height: 44px; width: auto; height: auto; }
  .oc-journal-article__refill-copy {
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }
  .oc-journal-article__refill-copy span { display: block; color: var(--ocja-ink-meta); }
  .oc-journal-article__refill-form { margin: 0; }
  .oc-journal-article__refill-add {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ocja-ink);
    font-family: inherit;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* ---- continue ---- */
  .oc-journal-article__continue {
    width: min(100%, var(--ocja-band));
    margin: 56px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .oc-journal-article__tile {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 26px 28px;
    background: var(--ocja-frost);
    border: 1px solid var(--ocja-edge);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  }

  /* ---- the buy bar: phones only ---- */
  .oc-journal-article__buybar { display: none; }

  @media screen and (max-width: 900px) {
    .oc-journal-article__grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
    .oc-journal-article__rail { display: none; }
    .oc-journal-article__continue { grid-template-columns: minmax(0, 1fr); }

    .oc-journal-article { padding-bottom: 96px; }

    .oc-journal-article__buybar {
      position: fixed;
      left: 8px;
      right: 8px;
      bottom: 8px;
      z-index: 55;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 12px 10px 18px;
      border-radius: 20px;
      background: rgba(14, 16, 20, .76);
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
      -webkit-backdrop-filter: blur(20px) saturate(120%);
      backdrop-filter: blur(20px) saturate(120%);
    }
    .oc-journal-article__buybar-info { display: grid; line-height: 1.25; min-width: 0; }
    .oc-journal-article__buybar-name {
      color: rgba(255, 255, 255, .72);
      font-size: 13px;
      font-weight: var(--oc-w-medium);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .oc-journal-article__buybar-price {
      color: #fff;
      font-size: 20px;
      font-weight: var(--oc-w-bold);
    }
    .oc-journal-article__buybar-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      height: 44px;
      padding: 0 20px;
      border-radius: 999px;
      color: #07270b;
      font-size: var(--oc-fs-button);
      font-weight: var(--oc-w-semibold);
      line-height: var(--oc-lh-button);
      letter-spacing: var(--oc-tr-button);
      text-decoration: none;
      background: rgba(28, 177, 66, .82);
      border: 1px solid rgba(255, 255, 255, .32);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    }
  }

  @media screen and (max-width: 640px) {
    .oc-journal-article { padding: 0 12px 96px; }
    .oc-journal-article__head { padding: 34px 0 6px; }
    .oc-journal-article__title { max-width: none; }
    .oc-journal-article__hero-media { height: 300px; border-radius: 24px; }
    .oc-journal-article__body { font-size: 1.0625rem; line-height: 1.6; }
    .oc-journal-article__body h2 { margin: 34px 0 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-journal-article__rail-card { position: static; }
  }
/* END_SECTION:oxiclear-legacy-article */

/* START_SECTION:oxiclear-legacy-benefits-page (INDEX:45) */
.oxiclear-legacy-benefits {
    box-sizing: border-box;
    width: 100%;
    max-width: 1660px;
    padding: 0 30px clamp(40px, 6vw, 72px);
    margin: 0 auto;
    color: #070707;
    background:
      var(--oxg-wash,
        radial-gradient(1100px 560px at 12% -8%, rgba(20, 23, 28, .10), transparent 60%),
        radial-gradient(900px 520px at 108% 26%, rgba(20, 23, 28, .06), transparent 55%)),
      #f6f9f9;
  }

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

  .oxiclear-legacy-benefits__banner {
    display: block;
    width: calc(100% + 60px);
    max-width: none;
    height: auto;
    margin-left: -30px;
  }

  .oxiclear-legacy-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    width: calc(100% + 60px);
    padding: 16px 0;
    margin: 50px 0 0 -30px;
  }

  .oxiclear-legacy-divider span {
    flex: 1;
    border-top: 2px solid #272727;
  }

  .oxiclear-legacy-divider img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .oxiclear-legacy-benefits__title {
    margin: 0 20px 30px;
    color: #070707;
    text-align: center;
  }

  .oxiclear-legacy-benefits__title span {
    display: inline-block;
    line-height: inherit;
  }

  .oxiclear-legacy-benefits__bands {
    padding: 20px 0;
  }

  .oxiclear-legacy-benefits__row {
    --oc-benefit-accent: #14171C;
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(92px, 1fr) minmax(0, 5fr);
    align-items: center;
    min-height: 450px;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: clamp(22px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oxiclear-legacy-benefits__row:nth-of-type(2) { --oc-benefit-accent: #14171C; }
  .oxiclear-legacy-benefits__row:nth-of-type(3) { --oc-benefit-accent: #14171C; }
  .oxiclear-legacy-benefits__row:nth-of-type(4) { --oc-benefit-accent: #14171C; }
  .oxiclear-legacy-benefits__row:nth-of-type(5) { --oc-benefit-accent: #14171C; }
  .oxiclear-legacy-benefits__row:nth-of-type(6) { --oc-benefit-accent: #14171C; }
  .oxiclear-legacy-benefits__row:nth-of-type(7) { --oc-benefit-accent: #14171C; }
  .oxiclear-legacy-benefits__row:nth-of-type(8) { --oc-benefit-accent: #14171C; }

  .oxiclear-legacy-benefits__row--grey {
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
  }

  .oxiclear-legacy-benefits__photo {
    align-self: stretch;
    min-height: 450px;
    background-image: var(--legacy-photo);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Phone rendition (24 Aug 2026). A CSS background cannot carry a srcset, so the
     two candidates ride the element as vars and the breakpoint picks one; only the
     applied one is ever fetched. The painted box here is the viewport minus 50px,
     so at 440px it is 390 CSS px = 780 device px at 2x, and 800 covers it exactly.
     Measured on the live CDN: eight photos 855 KB -> 599 KB. Above this band the
     box grows to 669-717 CSS px and the ~1000px originals are already correct, so
     no rendition is forced there. */
  @media (max-width: 440px) {
    .oxiclear-legacy-benefits__photo {
      background-image: var(--legacy-photo-phone, var(--legacy-photo));
    }
  }

  .oxiclear-legacy-benefits__photo--tall {
    min-height: 600px;
    background-position: 50% 50%;
  }

  .oxiclear-legacy-benefits__photo--wellness {
    min-height: 480px;
  }

  .oxiclear-legacy-benefits__photo--washable {
    background-position: 55% 45%;
  }

  .oxiclear-legacy-benefits__photo--last {
    min-height: 520px;
  }

  .oxiclear-legacy-benefits__icon {
    position: relative;
    z-index: 1;
    width: 150px;
    margin-left: -75px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: 50%;
    background: color-mix(in srgb, var(--oc-benefit-accent) 13%, transparent);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--oc-benefit-accent) 17%, transparent);
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oxiclear-legacy-benefits__icon img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
  }

  @media (hover: hover) and (pointer: fine) {
    .oxiclear-legacy-benefits__row:hover .oxiclear-legacy-benefits__icon {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 18px 36px color-mix(in srgb, var(--oc-benefit-accent) 22%, transparent);
    }
  }

  .oxiclear-legacy-benefits__copy {
    padding: 20px 40px 20px 20px;
  }

  .oxiclear-legacy-benefits__copy h2 {
    margin: 0 0 30px;
    color: #070707;
  }

  .oxiclear-legacy-benefits__copy p {
    margin: 0 0 16px;
    color: inherit;
  }

  .oxiclear-legacy-benefits__copy p:last-child {
    margin-bottom: 0;
  }

  .oxiclear-legacy-benefits__row:last-of-type {
    margin-bottom: 0;
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .oxiclear-legacy-benefits__row {
      grid-template-columns: minmax(0, 1fr);
    }

    .oxiclear-legacy-divider {
      margin-top: 0;
    }

    .oxiclear-legacy-benefits__icon {
      width: 120px;
      margin: -70px auto 0;
    }

    .oxiclear-legacy-benefits__icon img {
      width: 100%;
      height: auto;
    }

    .oxiclear-legacy-benefits__copy {
      padding: 20px;
      text-align: center;
    }
  }

  @media (max-width: 767px) {
    .oxiclear-legacy-benefits {
      padding-right: 30px;
      padding-left: 30px;
    }

    .oxiclear-legacy-divider {
      width: calc(100% + 60px);
      margin: 0 0 0 -30px;
    }

    .oxiclear-legacy-benefits__title {
      margin-bottom: -20px;
    }

    .oxiclear-legacy-benefits__row {
      grid-template-columns: minmax(0, 1fr);
      border-radius: 24px;
    }

    .oxiclear-legacy-benefits__photo,
    .oxiclear-legacy-benefits__photo--tall,
    .oxiclear-legacy-benefits__photo--last {
      min-height: 350px;
    }

    .oxiclear-legacy-benefits__icon {
      width: 120px;
      margin: -60px auto 20px;
    }

    .oxiclear-legacy-benefits__icon img {
      width: 100%;
      height: auto;
    }

    .oxiclear-legacy-benefits__copy {
      padding: 20px 20px 20px 20px;
      text-align: center;
    }

    .oxiclear-legacy-benefits__row:first-of-type .oxiclear-legacy-benefits__copy {
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
    }

  }

  @media (max-width: 479px) {
    .oxiclear-legacy-benefits {
      padding-right: 15px;
      padding-left: 15px;
    }

    .oxiclear-legacy-benefits__banner {
      width: calc(100% + 30px);
      margin-left: -15px;
    }

    .oxiclear-legacy-divider {
      width: calc(100% + 30px);
      margin-left: -15px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oxiclear-legacy-benefits__icon {
      transition: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oxiclear-legacy-benefits__row,
    .oxiclear-legacy-benefits__row--grey {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oxiclear-legacy-benefits__row,
    .oxiclear-legacy-benefits__row--grey {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-benefits {
    max-width: none;
    padding-inline: 0;
  }

  body.oc-facelift .oxiclear-legacy-benefits > .oxiclear-legacy-divider {
    margin-top: clamp(20px, 2.5vw, 32px);
  }

  body.oc-facelift .oxiclear-legacy-benefits__bands {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1320px);
    margin: clamp(22px, 3vw, 42px) auto var(--oc-space-section);
  }

  body.oc-facelift .oxiclear-legacy-benefits__row {
    position: relative;
    grid-template-columns: minmax(0, 1.05fr) minmax(110px, .28fr) minmax(0, 1fr);
    gap: clamp(12px, 3vw, 44px);
    align-items: center;
    width: 100%;
    min-height: 0;
    margin: 0 0 clamp(18px, 2.5vw, 32px);
    margin-left: 0;
    padding: clamp(18px, 3vw, 40px);
    overflow: hidden;
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-panel);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--oc-shadow-card);
  }

  body.oc-facelift .oxiclear-legacy-benefits__row--grey {
    background: linear-gradient(135deg, rgba(243, 243, 243, .94), rgba(255, 255, 255, .9));
  }

  body.oc-facelift .oxiclear-legacy-benefits__photo {
    width: 100%;
    min-height: 280px;
    max-height: 430px;
    object-fit: cover;
    overflow: hidden;
    border-radius: calc(var(--oc-radius-panel) - 8px);
    box-shadow: 0 14px 34px rgba(36, 36, 36, .12);
    transition: transform 700ms var(--oc-ease-fluid);
  }

  body.oc-facelift .oxiclear-legacy-benefits__icon {
    display: grid;
    width: clamp(90px, 9vw, 132px);
    aspect-ratio: 1;
    margin-inline: auto;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.oc-facelift .oxiclear-legacy-benefits__icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transform: scale(1.065);
  }

  body.oc-facelift .oxiclear-legacy-benefits__copy h2 {
    text-wrap: balance;
  }

  @media (hover: hover) and (pointer: fine) {
    body.oc-facelift .oxiclear-legacy-benefits__row:hover .oxiclear-legacy-benefits__photo {
      transform: scale(1.018);
    }
  }

  @media (min-width: 768px) and (max-width: 989px) {
    body.oc-facelift .oxiclear-legacy-benefits__row {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      padding: 18px;
    }

    body.oc-facelift .oxiclear-legacy-benefits__photo {
      min-height: clamp(300px, 48vw, 410px);
      max-height: 410px;
    }

    body.oc-facelift .oxiclear-legacy-benefits__icon {
      width: 96px;
      margin-top: -70px;
    }

    body.oc-facelift .oxiclear-legacy-benefits__copy {
      padding: 0 24px 24px;
      text-align: center;
    }
  }

  @media (min-width: 990px) and (max-width: 1024px) {
    body.oc-facelift .oxiclear-legacy-benefits__row {
      grid-template-columns: minmax(0, 1.05fr) minmax(110px, .28fr) minmax(0, 1fr);
      gap: clamp(12px, 3vw, 44px);
      padding: clamp(18px, 3vw, 40px);
    }

    body.oc-facelift .oxiclear-legacy-benefits__icon {
      width: clamp(90px, 9vw, 132px);
      margin-top: 0;
    }

    body.oc-facelift .oxiclear-legacy-benefits__copy {
      padding: 0;
      text-align: left;
    }
  }

  @media (max-width: 767px) {
    body.oc-facelift .oxiclear-legacy-benefits__bands {
      width: calc(100% - 20px);
    }

    body.oc-facelift .oxiclear-legacy-benefits__row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 14px;
      border-radius: 22px;
    }

    body.oc-facelift .oxiclear-legacy-benefits__photo {
      min-height: 230px;
      max-height: 330px;
      border-radius: 16px;
    }

    body.oc-facelift .oxiclear-legacy-benefits__icon {
      width: 84px;
      margin-top: -58px;
    }

    body.oc-facelift .oxiclear-legacy-benefits__copy {
      padding: 0 8px 18px;
      text-align: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.oc-facelift .oxiclear-legacy-benefits__photo {
      transition: none !important;
    }
  }
/* END_SECTION:oxiclear-legacy-benefits-page */

/* START_SECTION:oxiclear-legacy-blog (INDEX:46) */
/* ---- The Air Journal, front page (D-175/176/177) --------------------------
     Materials and tokens per module 13. The paper stage shows through: this
     section paints no page background (D-123). Blur is spent only where content
     scrolls beneath something (13 section 2.6), so nothing here carries one. */

  .oc-journal {
    --ocj-stage: 1320px;
    --ocj-band: 1240px;
    --ocj-frost: rgba(255, 255, 255, .64);
    --ocj-frost-well: rgba(255, 255, 255, .55);
    --ocj-edge: rgba(20, 23, 28, .08);
    --ocj-graphite: rgba(14, 16, 20, .76);
    --ocj-edge-dark: rgba(255, 255, 255, .14);
    --ocj-ink: #14171c;
    --ocj-ink-soft: #454c56;
    --ocj-ink-meta: #545c6a;
    padding: 26px 16px 64px;
    color: var(--ocj-ink);
  }

  .oc-journal__hero,
  .oc-journal__masthead { width: min(100%, var(--ocj-stage)); margin: 0 auto; }
  .oc-journal__band { width: min(100%, var(--ocj-band)); margin: 0 auto; }

  /* ---- kickers ---- */
  .oc-journal__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
    color: var(--ocj-ink-soft);
  }
  .oc-journal__kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
  .oc-journal__kicker--bare::before { display: none; }
  .oc-journal__kicker--ondark { color: rgba(255, 255, 255, .72); font-size: 11.5px; }
  .oc-journal__kicker--ondark::before { width: 16px; }

  /* ---- cover story: the hero, alone, above the divider ---- */
  .oc-journal__cover { position: relative; }

  /* The media wrapper owns the height, so no global img rule can stretch the
     cover: the image is taken out of flow and told to fill its frame. */
  .oc-journal__cover-media {
    position: relative;
    height: clamp(380px, 44vw, 620px);
    border-radius: 32px;
    overflow: hidden;
  }
  .oc-journal__cover-media img,
  .oc-journal__cover-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 26%;
  }

  /* A caption on the image, never a second page: 38% of the stage at most. */
  .oc-journal__cover-panel {
    position: absolute;
    left: 26px;
    bottom: 26px;
    width: min(38%, 460px);
    padding: 20px 22px;
    border-radius: 20px;
    background: var(--ocj-graphite);
    border: 1px solid var(--ocj-edge-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
    color: #fff;
  }
  .oc-journal__cover-panel .oc-journal__kicker { margin-bottom: 9px; }
  .oc-journal__cover-title {
    margin: 0 0 8px;
    font-size: clamp(1.1875rem, 1.45vw + .4375rem, 1.75rem);
    font-weight: var(--oc-w-semibold);
    line-height: 1.16;
    letter-spacing: -.015em;
    text-wrap: balance;
  }
  .oc-journal__cover-title a { color: #fff; text-decoration: none; }
  .oc-journal__cover-deck {
    margin: 0 0 15px;
    color: rgba(255, 255, 255, .72);
    font-size: clamp(.8125rem, .3vw + .71875rem, .9375rem);
    line-height: 1.5;
  }
  .oc-journal__cover-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

  /* White frost pill: imagery and coloured grounds keep the white glass. */
  .oc-journal__cover-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    color: #07270b;
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-button);
    letter-spacing: var(--oc-tr-button);
    text-decoration: none;
    background: rgba(255, 255, 255, .66);
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(4, 18, 6, .22), 0 2px 10px rgba(28, 177, 66, .18);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .oc-journal__cover-cta:hover {
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 34px rgba(4, 18, 6, .24), 0 4px 16px rgba(28, 177, 66, .34);
    transform: translateY(-1px);
  }
  .oc-journal__cover-link {
    color: #fff;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- masthead, under the hero ---- */
  .oc-journal__masthead { padding: 58px 0 6px; text-align: center; }
  .oc-journal__masthead .oxiclear-legacy-divider { margin-bottom: 24px; }
  .oc-journal__name {
    margin: 0 0 12px;
    font-size: var(--oc-fs-hero);
    font-weight: var(--oc-w-bold);
    line-height: var(--oc-lh-hero);
    letter-spacing: var(--oc-tr-hero);
  }
  .oc-journal__name a { color: inherit; text-decoration: none; }
  .oc-journal__tagline {
    max-width: 560px;
    margin: 0 auto 9px;
    color: var(--ocj-ink-soft);
    font-size: var(--oc-fs-body-lg);
    line-height: var(--oc-lh-body);
  }
  .oc-journal__edition {
    margin: 0;
    color: var(--ocj-ink-meta);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  /* ---- the solution: one calm band, below the divider ---- */
  .oc-journal__solution {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 250px;
    gap: 34px;
    align-items: center;
    padding: 24px 34px 24px 20px;
    background: var(--ocj-frost);
    border: 1px solid var(--ocj-edge);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  .oc-journal__solution-figure { display: flex; align-items: center; justify-content: center; }
  .oc-journal__solution-figure img { max-height: 186px; width: auto; }
  .oc-journal__solution-copy { display: grid; gap: 10px; }
  .oc-journal__solution-title {
    margin: 0;
    font-size: var(--oc-fs-h3);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-h3);
    letter-spacing: var(--oc-tr-h3);
  }
  .oc-journal__solution-line {
    margin: 0;
    max-width: 46ch;
    color: var(--ocj-ink-soft);
    font-size: var(--oc-fs-body);
    line-height: var(--oc-lh-body);
  }
  .oc-journal__badges { display: flex; gap: 8px; flex-wrap: wrap; }
  .oc-journal__badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ocj-frost-well);
    border: 1px solid var(--ocj-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    font-size: 13px;
    font-weight: var(--oc-w-semibold);
  }
  .oc-journal__solution-buy { display: grid; gap: 12px; justify-items: start; }
  .oc-journal__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: var(--oc-fs-price);
    font-weight: var(--oc-w-bold);
    line-height: var(--oc-lh-price);
    letter-spacing: var(--oc-tr-price);
  }
  .oc-journal__price-note {
    color: var(--ocj-ink-meta);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-regular);
    letter-spacing: var(--oc-tr-small);
  }
  .oc-journal__fineprint {
    margin: 0;
    color: var(--ocj-ink-meta);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }
  /* Geometry only: colour, border and elevation come from the shared action
     system in oxiclear-facelift-actions (D-119), which this class is listed in. */
  .oc-journal__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .oc-journal__solution-buy .oc-journal__cta { width: 100%; }

  /* ---- library ---- */
  .oc-journal__library { margin-top: 30px; }
  .oc-journal__library-head { margin-bottom: 6px; }
  .oc-journal__row {
    display: grid;
    grid-template-columns: 84px 200px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 28px 4px;
    border-top: 1px solid rgba(20, 23, 28, .1);
  }
  .oc-journal__row-num {
    margin: 0;
    font-size: 30px;
    font-weight: var(--oc-w-bold);
    line-height: 1;
    letter-spacing: -.02em;
  }
  .oc-journal__row-num span {
    display: block;
    margin-top: 6px;
    color: var(--ocj-ink-meta);
    font-size: 12px;
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }
  .oc-journal__row-thumb {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ocj-edge);
  }
  .oc-journal__row-thumb img { display: block; width: 100%; height: 128px; object-fit: cover; }
  .oc-journal__row-copy { display: grid; gap: 8px; }
  .oc-journal__row-title {
    margin: 0;
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-card);
    letter-spacing: var(--oc-tr-h3);
  }
  .oc-journal__row-title a { color: inherit; text-decoration: none; }
  .oc-journal__row-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .oc-journal__row-deck {
    margin: 0;
    color: var(--ocj-ink-soft);
    font-size: var(--oc-fs-body);
    line-height: var(--oc-lh-body);
  }
  .oc-journal__row-links { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 0; }
  .oc-journal__link {
    color: var(--ocj-ink);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .oc-journal__link--quiet { color: var(--ocj-ink-soft); }
  .oc-journal__pagination { padding-top: 28px; }

  /* ---- renew ---- */
  .oc-journal__renew {
    margin-top: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 8px;
    align-items: center;
    padding: 26px 12px 26px 40px;
    background: var(--ocj-frost);
    border: 1px solid var(--ocj-edge);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  .oc-journal__renew-copy { display: grid; gap: 12px; justify-items: start; }
  .oc-journal__renew-title {
    margin: 0;
    font-size: var(--oc-fs-h3);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-h3);
    letter-spacing: var(--oc-tr-h3);
  }
  .oc-journal__renew-line {
    margin: 0;
    max-width: 56ch;
    color: var(--ocj-ink-soft);
    font-size: var(--oc-fs-body);
    line-height: var(--oc-lh-body);
  }
  .oc-journal__renew-figure { display: flex; justify-content: center; }
  .oc-journal__renew-figure img { max-height: 170px; width: auto; }

  /* ---- laptop ---- */
  @media screen and (max-width: 1080px) {
    .oc-journal__cover-panel { width: min(50%, 430px); left: 22px; bottom: 22px; padding: 18px 20px; }
    .oc-journal__solution { grid-template-columns: 210px minmax(0, 1fr) 220px; gap: 24px; }
    .oc-journal__solution-figure img { max-height: 150px; }
  }

  /* ---- tablet: the caption stays on the image ---- */
  @media screen and (max-width: 860px) {
    .oc-journal__cover-panel { width: min(64%, 430px); left: 16px; bottom: 16px; }
    .oc-journal__cover-media { height: clamp(360px, 50vw, 440px); }
  }

  /* ---- phone ---- */
  @media screen and (max-width: 640px) {
    .oc-journal { padding: 16px 12px 56px; }
    .oc-journal__cover-media { height: 340px; }
    .oc-journal__cover-panel {
      position: static;
      width: auto;
      margin: -40px 10px 10px;
      padding: 18px 20px;
    }
    .oc-journal__cover-title { font-size: 1.375rem; }
    .oc-journal__cover-deck { font-size: .90625rem; }
    .oc-journal__cover-cta { height: 44px; }

    .oc-journal__masthead { padding: 40px 0 4px; }

    .oc-journal__solution {
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 14px;
      padding: 18px;
      margin-top: 24px;
    }
    .oc-journal__solution-figure img { max-height: 104px; }
    .oc-journal__solution-copy { gap: 6px; }
    .oc-journal__solution-title { font-size: 1.1875rem; line-height: 1.2; }
    .oc-journal__solution-line,
    .oc-journal__badges { display: none; }
    .oc-journal__solution-buy { grid-column: 1 / -1; gap: 10px; }

    .oc-journal__row {
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 12px 16px;
      padding: 22px 4px;
    }
    .oc-journal__row-thumb { grid-column: 2; }
    .oc-journal__row-thumb img { height: 110px; }
    .oc-journal__row-copy { grid-column: 1 / -1; }

    .oc-journal__renew { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
    .oc-journal__renew-figure { order: -1; }
    .oc-journal__renew-figure img { max-height: 138px; }
  }

  @media screen and (max-width: 400px) {
    .oc-journal__cover-media { height: 296px; }
    .oc-journal__cover-panel { margin: -36px 8px 8px; padding: 16px 18px; }
    .oc-journal__cover-title { font-size: 1.25rem; }
  }
/* END_SECTION:oxiclear-legacy-blog */

/* START_SECTION:oxiclear-legacy-cart (INDEX:47) */
.legacy-cart { padding: 60px 30px; background-color: #f6f9f9; background-image: var(--oxg-wash, radial-gradient(1100px 560px at 12% -8%, rgba(20, 23, 28, .10), transparent 60%), radial-gradient(900px 520px at 108% 26%, rgba(20, 23, 28, .06), transparent 55%)); color: #000; }
  .legacy-cart__inner { width: min(100%, 1170px); margin: 0 auto; }
  .legacy-cart__heading { margin: 0 0 35px; text-align: center; }
  .legacy-cart__heading h1 { margin: 0; }
  .legacy-cart__table { width: 100%; border-collapse: separate; border-spacing: 0 16px; }
  .legacy-cart__table th { padding: 14px 12px; border-bottom: 1px solid var(--oxg-line, rgba(11, 47, 51, .14)); font-size: var(--oc-fs-small); font-weight: var(--oc-w-medium); text-align: center; text-transform: uppercase; }
  .legacy-cart__table td { padding: 24px 12px; border-top: 1px solid var(--oxg-border, rgba(255, 255, 255, .92)); border-bottom: 1px solid var(--oxg-border, rgba(255, 255, 255, .92)); background: var(--oxg-surface-strong, rgba(255, 255, 255, .88)); box-shadow: none; vertical-align: middle; }
  .legacy-cart__table td:first-child { padding-left: 18px; border-left: 1px solid var(--oxg-border, rgba(255, 255, 255, .92)); border-radius: var(--oxg-radius-lg, 22px) 0 0 var(--oxg-radius-lg, 22px); }
  .legacy-cart__table td:last-child { padding-right: 18px; border-right: 1px solid var(--oxg-border, rgba(255, 255, 255, .92)); border-radius: 0 var(--oxg-radius-lg, 22px) var(--oxg-radius-lg, 22px) 0; }
  .legacy-cart__table tbody tr { box-shadow: 0 14px 34px rgba(36, 36, 36, .06); }
  .legacy-cart__image-cell { width: 140px; }
  .legacy-cart__image { display: block; }
  .legacy-cart__image img, .legacy-cart__placeholder { display: block; width: 100%; height: auto; }
  .legacy-cart__details { min-width: 220px; }
  .legacy-cart__title { display: inline-block; margin-bottom: 8px; color: inherit; font-size: var(--oc-fs-card); font-weight: var(--oc-w-semibold); text-decoration: none; }
  .legacy-cart__meta, .legacy-cart__property { margin-top: 4px; color: #666; font-size: var(--oc-fs-small); line-height: var(--oc-lh-small); }
  .legacy-cart__remove { display: inline-block; margin-top: 10px; color: inherit; text-decoration: underline; }
  .legacy-cart__money, .legacy-cart__quantity { text-align: center; white-space: nowrap; }
  .legacy-cart__money del { display: block; color: #777; }
  .legacy-cart__sale { display: block; color: #f26c4f; }
  .legacy-cart__quantity input { width: 72px; height: 44px; border: 1px solid var(--oxg-line, rgba(11, 47, 51, .14)); border-radius: var(--oxg-radius-pill, 999px); background: rgba(255, 255, 255, .92); box-shadow: none; text-align: center; }
  .legacy-cart__quantity input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .legacy-cart__discounts { margin: 8px 0 0; padding: 0; list-style: none; color: #f26c4f; font-size: var(--oc-fs-small); }
  .legacy-cart__footer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 40px; padding-top: 35px; }
  .legacy-cart__notes label { display: block; margin-bottom: 10px; }
  .legacy-cart__notes textarea { width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--oxg-line, rgba(11, 47, 51, .14)); border-radius: var(--oxg-radius-md, 16px); background: var(--oxg-surface-strong, rgba(255, 255, 255, .88)); box-shadow: none; resize: vertical; }
  .legacy-cart__notes textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .legacy-cart__summary { padding: clamp(22px, 3vw, 30px); text-align: right; border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92)); border-radius: var(--oxg-radius-xl, 30px); background: var(--oxg-surface, rgba(255, 255, 255, .76)); box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09)); }
  .legacy-cart__summary-line { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 12px; }
  .legacy-cart__subtotal strong { font-size: var(--oc-fs-price); }
  .legacy-cart__shipping { margin: 0 0 20px; font-size: var(--oc-fs-small); }
  .legacy-cart__actions { display: flex; justify-content: flex-end; gap: 10px; }
  .legacy-cart__button { min-width: 130px; min-height: 44px; padding: 0 22px; border: 1px solid #000; border-radius: var(--oxg-radius-pill, 999px); background: #000; color: #fff; cursor: pointer; text-transform: none; box-shadow: 0 12px 26px rgba(0, 0, 0, .16); }
  .legacy-cart__button--secondary { background: #818181; border-color: #818181; }
  .legacy-cart__button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .legacy-cart__additional { margin-top: 12px; }
  .legacy-cart__empty { padding: clamp(28px, 4vw, 44px); text-align: center; border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92)); border-radius: var(--oxg-radius-xl, 30px); background: var(--oxg-surface, rgba(255, 255, 255, .76)); box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09)); }
  .legacy-cart__empty a { color: inherit; text-decoration: underline; }

  @media (hover: hover) and (pointer: fine) {
    .legacy-cart__button { transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)); }
    .legacy-cart__button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .22); }
  }

  @media screen and (max-width: 989px) {
    .legacy-cart { padding: 40px 20px; }
    .legacy-cart__table thead { display: none; }
    .legacy-cart__table, .legacy-cart__table tbody, .legacy-cart__table tr, .legacy-cart__table td { display: block; width: 100%; }
    .legacy-cart__table tbody tr { padding: 22px 18px; margin: 0 0 16px; border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92)); border-radius: var(--oxg-radius-lg, 22px); background: var(--oxg-surface-strong, rgba(255, 255, 255, .88)); box-shadow: 0 14px 34px rgba(36, 36, 36, .06); }
    .legacy-cart__table td { padding: 8px 0; border: 0; background: transparent; box-shadow: none; text-align: left; white-space: normal; }
    .legacy-cart__table td:first-child, .legacy-cart__table td:last-child { padding-left: 0; padding-right: 0; border: 0; border-radius: 0; }
    .legacy-cart__image-cell { max-width: 220px; }
    .legacy-cart__money::before, .legacy-cart__quantity::before, .legacy-cart__total::before { content: attr(data-label) ': '; display: inline-block; min-width: 85px; font-weight: var(--oc-w-medium); }
    .legacy-cart__money del, .legacy-cart__sale { display: inline; }
    .legacy-cart__footer { grid-template-columns: 1fr; gap: 25px; }
    .legacy-cart__summary { text-align: left; }
    .legacy-cart__actions { justify-content: flex-start; flex-wrap: wrap; }
  }

  @media (prefers-reduced-motion: reduce) {
    .legacy-cart__button { transition: none; }
    .legacy-cart__button:hover { transform: none; }
  }

  @media (prefers-reduced-transparency: reduce) {
    .legacy-cart__summary, .legacy-cart__empty, .legacy-cart__table td, .legacy-cart__table tbody tr, .legacy-cart__notes textarea { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .legacy-cart__summary, .legacy-cart__empty { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
/* END_SECTION:oxiclear-legacy-cart */

/* START_SECTION:oxiclear-legacy-collection-page (INDEX:48) */
/* The Shop page (D-191). One paper stage: this section paints NO background;
     the facelift body stage is the ground. Card physics are the homepage shop
     band's measured baseline (D-126). No backdrop-filter anywhere here: every
     surface sits on flat paper (module 13, 2.6 gate). */

  .oc-shop {
    --oc-shop-band: min(1240px, 100% - 32px);
    --oc-shop-card-fill: rgba(255, 255, 255, 0.92);
    --oc-shop-card-edge: #e1e1e1;
    --oc-shop-card-shadow: 0 12px 34px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --oc-shop-ink: #14171c;
    --oc-shop-ink-2: #454c56;
    --oc-shop-ink-3: #545c6a;
    --oc-shop-frost: rgba(255, 255, 255, 0.75);
    --oc-shop-frost-dense: rgba(255, 255, 255, 0.82);
    color: var(--oc-shop-ink);
  }

  /* ---- the house anatomy above the head (D-201): hero pic, capsule, C-mark.
     The shared legacy-banner and divider rules live in facelift-content, which
     loads only on page/blog/article templates - collections load the commerce
     layer instead - so the shop OWNS mirrored copies here, value-identical to
     the shared rules. Change them together or the shop drifts off the system. */
  .oc-shop__banner {
    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);
  }

  .oc-shop .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%);
  }

  .oc-shop .oxiclear-legacy-divider span {
    flex: 1 1 auto;
    border-top: 2px solid #0b2f33;
  }

  .oc-shop .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;
  }

  @media (max-width: 767px) {
    .oc-shop__banner {
      width: calc(100% - 20px);
      max-height: 310px;
      margin-top: 10px;
      border-radius: 20px;
    }
  }

  @media (max-width: 680px) {
    .oc-shop .oxiclear-legacy-divider {
      width: min(1170px, calc(100vw - 20px));
    }
  }

  .oc-shop__head {
    width: var(--oc-shop-band);
    /* was clamp(44px, 6vw, 72px) on top when the page opened on type alone;
       the C-mark divider above carries the entrance now (D-201) */
    margin: clamp(10px, 1.5vw, 18px) auto clamp(24px, 3vw, 36px);
  }

  .oc-shop__head h1 {
    margin: 0 0 10px;
    font-size: var(--oc-fs-hero);
    font-weight: var(--oc-w-bold);
    line-height: 1.04;
    letter-spacing: var(--oc-tr-hero);
    text-wrap: balance;
    text-transform: none;
  }

  .oc-shop__lede {
    margin: 0;
    max-width: 52ch;
    font-size: var(--oc-fs-body-lg);
    line-height: 1.58;
    color: var(--oc-shop-ink-2);
  }

  .oc-shop__anchors {
    width: var(--oc-shop-band);
    margin: 0 auto clamp(28px, 4vw, 44px);
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
  }

  .oc-shop__anchors::-webkit-scrollbar { display: none; }

  .oc-shop__anchor {
    flex: 0 0 auto;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: var(--oc-w-medium);
    color: var(--oc-shop-ink-2);
    text-decoration: none;
    background: var(--oc-shop-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);
    white-space: nowrap;
    transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1), color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .oc-shop__anchor:hover { border-color: rgba(20, 23, 28, 0.2); color: var(--oc-shop-ink); }
  .oc-shop__anchor:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .oc-shop__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: var(--oc-w-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oc-shop-ink-2);
  }

  .oc-shop__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--oc-shop-ink-2); }

  /* ---- flagship hero tile (the 2x2 priority form) ---- */
  .oc-shop__flagship {
    width: var(--oc-shop-band);
    margin: 0 auto clamp(56px, 7vw, 88px);
    display: grid;
    grid-template-columns: minmax(0, 15fr) minmax(0, 17fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
    background: var(--oc-shop-card-fill);
    border: 1px solid var(--oc-shop-card-edge);
    border-radius: 32px;
    box-shadow: var(--oc-shop-card-shadow);
    padding: clamp(18px, 2.6vw, 32px);
  }

  .oc-shop__flagship-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    background: #ffffff;
    overflow: hidden;
  }

  .oc-shop__flagship-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
  }

  .oc-shop__flagship-title {
    margin: 0 0 10px;
    font-size: var(--oc-fs-h2);
    font-weight: var(--oc-w-semibold);
    line-height: 1.1;
    letter-spacing: var(--oc-tr-h2);
    text-wrap: balance;
    text-transform: none;
  }

  .oc-shop__flagship-title a { color: inherit; text-decoration: none; }

  .oc-shop__flagship-body {
    margin: 0 0 16px;
    max-width: 44ch;
    font-size: var(--oc-fs-body);
    line-height: 1.58;
    color: var(--oc-shop-ink-2);
  }

  .oc-shop__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
  }

  .oc-shop__chips li {
    padding: 7px 13px;
    font-size: 13px;
    font-weight: var(--oc-w-semibold);
    color: var(--oc-shop-ink);
    background: var(--oc-shop-frost-dense);
    border: 1px solid rgba(20, 23, 28, 0.1);
    border-radius: 999px;
  }

  /* Colour chips on the flagship: selector chips per module 13, 6.5 - Ghost
     at rest, selected goes dense frost with a 1px ink edge and weight 600.
     Edge plus weight, never colour. */
  .oc-shop__flagship-colors { margin: 0 0 18px; }

  .oc-shop__flagship-colors-label {
    margin: 0 0 8px;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    color: var(--oc-shop-ink-2);
  }

  .oc-shop__color-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .oc-shop__color-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px 8px 10px;
    font-size: 13px;
    font-weight: var(--oc-w-medium);
    color: var(--oc-shop-ink);
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(20, 23, 28, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1), background-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .oc-shop__color-chip:hover { border-color: rgba(20, 23, 28, 0.3); }

  .oc-shop__color-chip[aria-pressed="true"] {
    background: var(--oc-shop-frost-dense);
    border: 1px solid var(--oc-shop-ink);
    font-weight: var(--oc-w-semibold);
  }

  .oc-shop__color-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .oc-shop__flagship-buy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 22px;
  }

  .oc-shop__flagship-price {
    font-size: clamp(1.75rem, 1.6rem + 0.6vw, 2.25rem);
    font-weight: var(--oc-w-bold);
    letter-spacing: var(--oc-tr-price);
    font-variant-numeric: tabular-nums;
  }

  /* Tier 1 breath: the page's one primary action (module 13, 8.2). The halo
     grows from the pill's own resting elevation so the shared button system's
     shadow survives the animation. */
  @keyframes oc-shop-breathe {
    0%, 100% { box-shadow: var(--oc-action-elevation, 0 10px 26px rgba(7, 39, 11, 0.1)), 0 0 0 0 rgba(28, 177, 66, 0); }
    46%, 54% { box-shadow: var(--oc-action-elevation, 0 10px 26px rgba(7, 39, 11, 0.1)), 0 0 36px -8px rgba(28, 177, 66, 0.22); }
  }

  .oc-shop__add--flagship { animation: oc-shop-breathe 4800ms cubic-bezier(0.37, 0, 0.63, 1) infinite; }

  .oc-shop__flagship-alt { font-size: var(--oc-fs-small); color: var(--oc-shop-ink-2); }
  .oc-shop__flagship-alt a { color: var(--oc-shop-ink); text-decoration: underline; text-underline-offset: 3px; }

  @media screen and (max-width: 820px) {
    .oc-shop__flagship { grid-template-columns: 1fr; padding: 14px 14px 20px; border-radius: 24px; }
    .oc-shop__flagship-media { aspect-ratio: 4 / 3; }
    .oc-shop__flagship-copy { padding: 4px 6px 0; }
  }

  /* ---- shelves ---- */
  .oc-shop__shelf {
    width: var(--oc-shop-band);
    margin: 0 auto;
    padding-bottom: clamp(56px, 7vw, 88px);
    scroll-margin-top: 120px;
  }

  .oc-shop__shelf-head { max-width: 62ch; margin-bottom: clamp(18px, 2.6vw, 28px); }

  .oc-shop__shelf-head h2 {
    margin: 0 0 6px;
    font-size: var(--oc-fs-h2);
    font-weight: var(--oc-w-semibold);
    line-height: 1.1;
    letter-spacing: var(--oc-tr-h2);
    text-transform: none;
  }

  .oc-shop__shelf-line { margin: 0; font-size: var(--oc-fs-body); line-height: 1.58; color: var(--oc-shop-ink-2); }
  .oc-shop__shelf-meta { margin: 8px 0 0; font-size: var(--oc-fs-small); color: var(--oc-shop-ink-3); }

  .oc-shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 24px;
  }

  @media screen and (max-width: 700px) {
    .oc-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  }

  /* ---- trust row ---- */
  .oc-shop__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: var(--oc-shop-band);
    margin: 0 auto clamp(64px, 9vw, 104px);
  }

  .oc-shop__trust span {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: var(--oc-w-semibold);
    color: var(--oc-shop-ink);
    background: var(--oc-shop-frost);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(15, 20, 22, 0.05);
    border-radius: 999px;
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-shop__add--flagship { animation: none; }
  }
/* END_SECTION:oxiclear-legacy-collection-page */

/* START_SECTION:oxiclear-legacy-company-page (INDEX:49) */
/* No stage paint here. This used to set #f6f9f9 under an aqua wash
     (rgba(20, 23, 28,.10)); aqua is banned as a system colour and the whole
     declaration was already dead. The page sits on the body's warm paper, the same
     stage the homepage uses, declared once in oxiclear-glass-dock. Ink comes from
     the content-page layer. */
  .oxiclear-legacy-company {
    padding-bottom: clamp(40px, 6vw, 72px);
  }

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

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

  /* Colour and alignment come from the content-page layer. This title is an h1, so
     size, weight, line height and tracking come from the type tokens. */
  .oxiclear-legacy-company__title {
    margin: 0 20px 30px;
  }

  .oxiclear-legacy-company__title span {
    display: inline-block;
    line-height: inherit;
  }

  /* Structure only. Width, fill, edge, radius, shadow and blur are the frosted stage
     and belong to the content-page layer, which paints it identically to the
     homepage story band. */
  .oxiclear-legacy-company__story {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The 88% white panel that used to live here is gone: it made a glass card float
     inside a glass card. Padding is the content layer's. */
  .oxiclear-legacy-company__copy h2 {
    margin: 0 0 30px;
    text-align: center;
  }

  .oxiclear-legacy-company--2020 .oxiclear-legacy-company__copy h2 {
    text-align: left;
  }

  .oxiclear-legacy-company__copy p {
    margin: 0 0 24px;
    text-align: left;
  }

  .oxiclear-legacy-company__copy p:last-child {
    margin-bottom: 0;
  }

  .oxiclear-legacy-company__photo {
    min-height: 100%;
    background-image: var(--legacy-company-photo);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .oxiclear-legacy-company__story--reverse .oxiclear-legacy-company__copy {
    padding-top: clamp(56px, 8vw, 112px);
    padding-bottom: clamp(56px, 8vw, 112px);
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    .oxiclear-legacy-company__story:first-of-type .oxiclear-legacy-company__photo {
      background-image: var(--legacy-company-photo-responsive);
    }
  }

  .oxiclear-legacy-company__video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
  }

  .oxiclear-legacy-company__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  @media (max-width: 989px) {
    .oxiclear-legacy-company__story {
      display: flex;
      flex-direction: column-reverse;
    }

    .oxiclear-legacy-company__story--reverse {
      flex-direction: column;
    }

    .oxiclear-legacy-company__photo {
      min-height: 300px;
      background-position: 50% 0;
    }

    .oxiclear-legacy-company__story:first-of-type .oxiclear-legacy-company__photo {
      background-image: var(--legacy-company-photo-responsive);
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oxiclear-legacy-company__story {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* Only the stage goes solid. Painting the copy too would rebuild the two-surface
     stack this round removed. */
  @media (prefers-reduced-transparency: reduce) {
    .oxiclear-legacy-company__story {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-company > .oxiclear-legacy-divider {
    margin-top: clamp(16px, 2vw, 24px);
    margin-bottom: 14px;
  }

  body.oc-facelift .oxiclear-legacy-company__title {
    margin: 0 auto clamp(22px, 3vw, 42px);
    text-align: center;
  }

  body.oc-facelift .oxiclear-legacy-company__title span {
    display: inline-block;
    line-height: .35;
  }

  body.oc-facelift .oxiclear-legacy-company__title + .oxiclear-legacy-company__story {
    margin-top: 0;
  }

  /* One frosted stage, matching the homepage story band exactly (same fill, edge,
     shadow and blur). It was an opaque .9 white card with a grey #e1e1e1 hairline,
     which read as a printed panel next to the homepage's glass. */
  body.oc-facelift .oxiclear-legacy-company__story {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1320px);
    margin: clamp(22px, 3vw, 42px) auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: var(--oc-radius-panel);
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  /* The copy dissolves into that stage. It used to carry its own 88% white panel,
     so the page shipped a glass card floating inside a glass card - the identical
     frost-on-frost defect the homepage story fixed on 19 Aug. One surface, not two. */
  body.oc-facelift .oxiclear-legacy-company__copy {
    padding: clamp(32px, 4vw, 56px);
    background: transparent;
  }

  /* Colour only. This head is an h2, so size, weight, line height and tracking
     come from the type tokens in oxiclear-type. */
  body.oc-facelift .oxiclear-legacy-company .oxiclear-legacy-company__copy h2 {
    color: #2d2d2d;
  }

  body.oc-facelift .oxiclear-legacy-company__copy p {
    color: #2d2d2d;
  }

  body.oc-facelift .oxiclear-legacy-company__photo {
    min-height: 360px;
    object-fit: cover;
  }

  body.oc-facelift .oxiclear-legacy-company__video {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1100px);
    margin: clamp(34px, 5vw, 70px) auto;
    overflow: hidden;
    border-radius: var(--oc-radius-panel);
    box-shadow: var(--oc-shadow-card);
  }

  @media (max-width: 767px) {
    body.oc-facelift .oxiclear-legacy-company__story {
      width: calc(100% - 20px);
      border-radius: 22px;
    }

    body.oc-facelift .oxiclear-legacy-company__photo {
      min-height: 260px;
    }

    body.oc-facelift .oxiclear-legacy-company__copy {
      padding: 28px 22px 34px;
      background: transparent;
    }
  }
/* END_SECTION:oxiclear-legacy-company-page */

/* 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_SECTION:oxiclear-legacy-faq-page (INDEX:51) */
.oxiclear-legacy-faq {
    color: #070707;
    background:
      var(--oxg-wash,
        radial-gradient(1100px 560px at 12% -8%, rgba(20, 23, 28, .10), transparent 60%),
        radial-gradient(900px 520px at 108% 26%, rgba(20, 23, 28, .06), transparent 55%));
    background-color: #f6f9f9;
  }

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

  .oxiclear-legacy-faq > .oxiclear-legacy-divider {
    width: 100%;
    margin-left: 0;
  }

  .oxiclear-legacy-faq__banner {
    height: 436px;
    background-image: var(--legacy-faq-banner);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Phone rendition (24 Aug 2026), same idiom as the benefits bands: a CSS
     background carries no srcset, so both candidates ride the element and the
     breakpoint picks one. Box here is 370x101 CSS px on a 390px phone = 740x202
     at 2x, and the source is 1600x436, so 800 covers it exactly. Measured on the
     live CDN: 66 KB -> 29 KB. */
  @media (max-width: 440px) {
    .oxiclear-legacy-faq__banner {
      background-image: var(--legacy-faq-banner-phone, var(--legacy-faq-banner));
    }
  }

  .oxiclear-legacy-faq > h1 {
    margin: 30px 20px 10px;
    text-align: center;
  }

  .oxiclear-legacy-faq > h2 {
    margin: 0 20px 30px;
    text-align: center;
  }

  .oxiclear-legacy-faq__list {
    width: min(1170px, calc(100% - 30px));
    margin: 0 auto 50px;
    padding: clamp(18px, 2.5vw, 30px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface, rgba(255, 255, 255, .76));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oxiclear-legacy-faq__group {
    margin: 0 0 32px;
  }

  .oxiclear-legacy-faq__group:last-child {
    margin-bottom: 0;
  }

  .oxiclear-legacy-faq__group > h3 {
    width: fit-content;
    margin: 0 0 14px;
    padding: 9px 18px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    color: #174f51;
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 10px 26px rgba(36, 36, 36, .06);
    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;
  }

  .oxiclear-legacy-faq__list details {
    margin: 0;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-lg, 22px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 12px 30px rgba(36, 36, 36, .06);
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oxiclear-legacy-faq__list details + details {
    margin-top: 12px;
  }

  .oxiclear-legacy-faq__list summary {
    position: relative;
    padding: 16px 56px 16px 20px;
    border-bottom: 0;
    border-radius: 18px;
    color: #000;
    background: transparent;
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-semibold);
    list-style: none;
    cursor: pointer;
  }

  .oxiclear-legacy-faq__list summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oxiclear-legacy-faq__list details[open] summary {
    border-bottom: 1px solid var(--oxg-line, rgba(11, 47, 51, .14));
    border-radius: 18px 18px 0 0;
  }

  .oxiclear-legacy-faq__list details:nth-of-type(even) summary {
    background: transparent;
  }

  .oxiclear-legacy-faq__list summary::-webkit-details-marker {
    display: none;
  }

  .oxiclear-legacy-faq__list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 14px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: 50%;
    color: #174f51;
    background: rgba(20, 23, 28, .13);
    font-weight: var(--oc-w-bold);
    line-height: 1;
    transform: translateY(-50%);
  }

  .oxiclear-legacy-faq__list details[open] summary::after {
    content: "−";
  }

  .oxiclear-legacy-faq__list p {
    margin: 0;
    padding: 14px 20px 20px 30px;
    color: #000;
  }

  .oxiclear-legacy-faq__answer a {
    color: #174f51;
    font-weight: var(--oc-w-medium);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .oxiclear-legacy-faq__answer ul {
    margin: -8px 22px 22px;
    padding-left: 22px;
    color: #000;
  }

  .oxiclear-legacy-faq__answer li + li {
    margin-top: 4px;
  }

  @media (hover: hover) and (pointer: fine) {
    .oxiclear-legacy-faq__list details:not([open]):hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(36, 36, 36, .10);
    }
  }

  @media (max-width: 767px) {
    .oxiclear-legacy-faq__list {
      width: calc(100% - 20px);
      padding: 14px 12px;
      border-radius: 24px;
    }

    .oxiclear-legacy-faq__list summary {
      padding-left: 15px;
    }

    .oxiclear-legacy-faq__group {
      margin-bottom: 26px;
    }

    .oxiclear-legacy-faq__group > h3 {
      padding-inline: 15px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oxiclear-legacy-faq__list details {
      transition: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oxiclear-legacy-faq__list {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oxiclear-legacy-faq__list,
    .oxiclear-legacy-faq__list details,
    .oxiclear-legacy-faq__group > h3 {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-faq__banner {
    aspect-ratio: 1600 / 436;
  }

  body.oc-facelift .oxiclear-legacy-faq__list {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 980px);
    margin: clamp(24px, 3vw, 42px) auto var(--oc-space-section);
    border: 0;
  }

  body.oc-facelift .oxiclear-legacy-faq > h2 {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 780px);
    margin: 0 auto;
    color: var(--oc-color-ink-soft);
    text-align: center;
    text-wrap: balance;
  }

  body.oc-facelift .oxiclear-legacy-faq__list details {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--oc-color-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 9px 28px rgba(36, 36, 36, .06);
  }

  body.oc-facelift .oxiclear-legacy-faq__list summary,
  body.oc-facelift .oxiclear-legacy-faq__list details:nth-child(even) summary {
    padding: 19px 58px 19px 22px;
    color: var(--oc-color-ink-soft);
    background: transparent;
  }

  body.oc-facelift .oxiclear-legacy-faq__list details[open] summary {
    background: #f1f2f3;
  }

  body.oc-facelift .oxiclear-legacy-faq__list p {
    padding: 0 22px 22px;
  }

  @media (max-width: 767px) {
    body.oc-facelift .oxiclear-legacy-faq__list {
      width: calc(100% - 20px);
    }

    body.oc-facelift .oxiclear-legacy-faq__list details {
      border-radius: 16px;
    }
  }
/* END_SECTION:oxiclear-legacy-faq-page */

/* START_SECTION:oxiclear-legacy-generic-collection (INDEX:52) */
.legacy-generic-collection {
    width: min(1170px, calc(100% - 30px));
    margin: 0 auto;
    padding: 45px 0 60px;
    color: #000000;
    background: #ffffff;
  }

  .legacy-generic-collection *,
  .legacy-generic-collection *::before,
  .legacy-generic-collection *::after {
    box-sizing: border-box;
  }

  .legacy-generic-collection__breadcrumb {
    margin: 0 0 20px;
  }

  .legacy-generic-collection__header {
    margin: 0 0 35px;
    text-align: center;
  }

  .legacy-generic-collection__header h1 {
    margin: 0;
    color: #272727;
  }

  .legacy-generic-collection__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }

  .legacy-generic-collection .legacy-collection-product-card {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    text-align: center;
    background: #ffffff;
  }

  .legacy-generic-collection .legacy-collection-product-card__media {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 270px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    overflow: hidden;
    background: #ffffff;
  }

  .legacy-generic-collection .legacy-collection-product-card__image,
  .legacy-generic-collection .legacy-collection-product-card__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .legacy-generic-collection .legacy-collection-product-card h3 {
    flex: 0 0 auto;
    margin: 0 0 15px;
    font-size: var(--oc-fs-card);
    line-height: var(--oc-lh-card);
  }

  .legacy-generic-collection .legacy-collection-product-card h3 a,
  .legacy-generic-collection .legacy-collection-product-card h3 a:hover {
    color: #000000;
    text-decoration: none;
  }

  .legacy-generic-collection .legacy-collection-product-card__price {
    flex: 1 1 auto;
    margin: 0 0 15px;
    color: #000000;
  }

  .legacy-generic-collection__empty {
    grid-column: 1 / -1;
  }

  .legacy-generic-collection__pagination {
    height: 1px;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    text-align: center;
  }

  .legacy-generic-collection__pagination a {
    display: inline-block;
    padding: 8px 0 2px;
    color: #000000;
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    text-decoration: none;
    text-transform: none;
    border-bottom: 1px solid #000000;
  }

  .legacy-generic-collection__pagination[data-loading="true"] {
    opacity: 0.5;
    pointer-events: none;
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .legacy-generic-collection__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 767px) {
    .legacy-generic-collection {
      width: calc(100% - 30px);
      padding-top: 30px;
    }

    .legacy-generic-collection__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }
  }
/* END_SECTION:oxiclear-legacy-generic-collection */

/* START_SECTION:oxiclear-legacy-how-to-page (INDEX:53) */
.oxiclear-legacy-how-to {
    width: min(1170px, calc(100% - 30px));
    margin: 0 auto;
    padding: 25px 0 15px;
    color: #272727;
  }

  .oxiclear-legacy-how-to *,
  .oxiclear-legacy-how-to *::before,
  .oxiclear-legacy-how-to *::after {
    box-sizing: border-box;
  }

  .oxiclear-legacy-how-to > h1 {
    margin: 0 0 20px;
    color: #272727;
    text-align: center;
  }

  .oxiclear-legacy-how-to > h2 {
    margin: 0 0 15px;
    text-align: center;
  }

  .oxiclear-legacy-how-to__tabs > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .oxiclear-legacy-how-to__tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 15px 0 20px;
  }

  .oxiclear-legacy-how-to__tab-list label {
    display: grid;
    place-items: center;
    width: 124px;
    height: 124px;
    margin: 0;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: 50%;
    color: #172b4d;
    background: rgba(20, 23, 28, .12);
    box-shadow: 0 12px 28px rgba(20, 23, 28, .16);
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-button);
    text-align: center;
    cursor: pointer;
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  #LegacyHowToStep1:checked ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep1"],
  #LegacyHowToStep2:checked ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep2"],
  #LegacyHowToStep3:checked ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep3"],
  #LegacyHowToStep4:checked ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep4"] {
    background: rgba(118, 215, 219, .55);
    box-shadow: 0 16px 34px rgba(20, 23, 28, .26);
  }

  #LegacyHowToStep1:focus-visible ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep1"],
  #LegacyHowToStep2:focus-visible ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep2"],
  #LegacyHowToStep3:focus-visible ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep3"],
  #LegacyHowToStep4:focus-visible ~ .oxiclear-legacy-how-to__tab-list label[for="LegacyHowToStep4"] {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oxiclear-legacy-how-to__panel {
    display: none;
    grid-template-columns: minmax(250px, 4fr) minmax(0, 8fr);
    align-items: center;
    gap: 30px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  #LegacyHowToStep1:checked ~ .oxiclear-legacy-how-to__panels .oxiclear-legacy-how-to__panel--1,
  #LegacyHowToStep2:checked ~ .oxiclear-legacy-how-to__panels .oxiclear-legacy-how-to__panel--2,
  #LegacyHowToStep3:checked ~ .oxiclear-legacy-how-to__panels .oxiclear-legacy-how-to__panel--3,
  #LegacyHowToStep4:checked ~ .oxiclear-legacy-how-to__panels .oxiclear-legacy-how-to__panel--4 {
    display: grid;
  }

  .oxiclear-legacy-how-to__panel img {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid #f4f4f4;
    border-radius: 10px;
  }

  .oxiclear-legacy-how-to__panel h3 {
    margin: 0 0 20px;
    color: #76d7db;
  }

  .oxiclear-legacy-how-to__panel h4 {
    margin: 0 0 14px;
    color: #272727;
  }

  .oxiclear-legacy-how-to__panel ul {
    margin: 0;
    padding: 10px;
    list-style-position: inside;
    list-style-type: disc;
  }

  .oxiclear-legacy-how-to__panel li {
    margin: 0 0 10px;
  }

  .oxiclear-legacy-how-to__help {
    margin: 15px 0;
    color: #000;
    text-align: center;
  }

  .oxiclear-legacy-how-to__care {
    margin-top: 18px;
    padding: 28px 30px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-lg, 22px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 12px 30px rgba(36, 36, 36, .06);
  }

  .oxiclear-legacy-how-to__care h3 {
    margin: 0 0 10px;
    color: #174f51;
  }

  .oxiclear-legacy-how-to__care p {
    margin: 0;
  }

  .oxiclear-legacy-native-content {
    width: min(1170px, calc(100% - 40px));
    margin: 0 auto;
    padding: 50px 0;
  }

  .oxiclear-legacy-native-content h1 {
    margin: 0 0 35px;
    text-align: center;
  }

  @media (hover: hover) and (pointer: fine) {
    .oxiclear-legacy-how-to__tab-list label:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 17px 34px rgba(20, 23, 28, .22);
    }
  }

  @media (max-width: 767px) {
    .oxiclear-legacy-how-to {
      width: calc(100% - 20px);
    }

    .oxiclear-legacy-how-to__tab-list {
      gap: 10px;
    }

    .oxiclear-legacy-how-to__tab-list label {
      width: 90px;
      height: 90px;
    }

    .oxiclear-legacy-how-to__panel,
    #LegacyHowToStep1:checked ~ .oxiclear-legacy-how-to__panels .oxiclear-legacy-how-to__panel--1,
    #LegacyHowToStep2:checked ~ .oxiclear-legacy-how-to__panels .oxiclear-legacy-how-to__panel--2,
    #LegacyHowToStep3:checked ~ .oxiclear-legacy-how-to__panels .oxiclear-legacy-how-to__panel--3,
    #LegacyHowToStep4:checked ~ .oxiclear-legacy-how-to__panels .oxiclear-legacy-how-to__panel--4 {
      grid-template-columns: minmax(0, 1fr);
      padding: 20px 15px;
    }

    .oxiclear-legacy-how-to__panel {
      border-radius: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oxiclear-legacy-how-to__tab-list label {
      transition: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oxiclear-legacy-how-to__panel {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oxiclear-legacy-how-to__panel,
    .oxiclear-legacy-how-to__care {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-how-to > h2 {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 780px);
    margin: 0 auto;
    color: var(--oc-color-ink-soft);
    text-align: center;
    text-wrap: balance;
  }

  body.oc-facelift .oxiclear-legacy-how-to {
    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 .oxiclear-legacy-how-to__tab-list {
    gap: 6px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-pill);
    background: rgba(243, 243, 243, .86);
    scrollbar-width: none;
  }

  body.oc-facelift .oxiclear-legacy-how-to__tab-list::-webkit-scrollbar {
    display: none;
  }

  body.oc-facelift .oxiclear-legacy-how-to__tab-list label {
    min-width: 0;
    min-height: 46px;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--oc-radius-pill);
    transition: color var(--oc-duration-fast) ease, background-color var(--oc-duration-fast) ease, box-shadow var(--oc-duration-base) ease;
  }

  body.oc-facelift .oxiclear-legacy-how-to__tab-list {
    flex-wrap: nowrap;
    justify-content: stretch;
    min-height: 72px;
  }

  body.oc-facelift .oxiclear-legacy-how-to__tab-list label {
    width: auto;
    height: auto;
    min-height: 60px;
    flex: 1 0 118px;
  }

  body.oc-facelift .oxiclear-legacy-how-to__panel {
    margin-top: 24px;
    padding: clamp(22px, 4vw, 52px);
    overflow: hidden;
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-panel);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--oc-shadow-card);
  }

  body.oc-facelift .oxiclear-legacy-how-to__panel img {
    border-radius: calc(var(--oc-radius-panel) - 8px);
  }

  body.oc-facelift .oxiclear-legacy-how-to__help {
    padding: 18px 22px;
    border: 1px solid var(--oc-color-line);
    border-radius: 18px;
    background: #f1f2f3;
  }

  @media (max-width: 767px) {
    body.oc-facelift .oxiclear-legacy-how-to {
      width: calc(100% - 20px);
    }

    body.oc-facelift .oxiclear-legacy-how-to__tab-list {
      justify-content: flex-start;
      border-radius: 18px;
    }

    body.oc-facelift .oxiclear-legacy-how-to__tab-list label {
      min-width: 72px;
      min-height: 54px;
      flex: 1 1 calc(25% - 5px);
      padding: 10px 6px;
    }

    body.oc-facelift .oxiclear-legacy-how-to__panel {
      padding: 18px;
      border-radius: 22px;
    }
  }
/* END_SECTION:oxiclear-legacy-how-to-page */

/* START_SECTION:oxiclear-legacy-image-strip (INDEX:54) */
.oc-legacy-use-cases {
    position: relative;
    z-index: 2;
    margin-top: -90px;
    color: #2d2d2d;
    background: transparent;
  }

  .oc-legacy-use-cases__inner {
    display: grid;
    grid-template-columns: repeat(6, 130px);
    gap: 0;
    justify-content: center;
    width: min(100% - 40px, 1170px);
    margin: 0 auto;
    padding: 0 0 50px;
  }

  .oc-legacy-use-cases__item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    color: #2d2d2d;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
    text-align: center;
    text-decoration: none;
  }

  .oc-legacy-use-cases__media {
    display: block;
    box-sizing: border-box;
    width: 130px;
    height: 130px;
    overflow: hidden;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(20, 23, 28, .16), 0 4px 14px rgba(36, 36, 36, .10);
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oc-legacy-use-cases__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.065);
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-legacy-use-cases__item:hover .oc-legacy-use-cases__media {
      box-shadow: 0 17px 34px rgba(20, 23, 28, .22), 0 6px 16px rgba(36, 36, 36, .12);
      transform: translateY(-3px) scale(1.045);
    }
  }

  .oc-legacy-use-cases__item:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .oc-legacy-use-cases {
      margin-top: -100px;
    }

    .oc-legacy-use-cases__inner {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
    }

    .oc-legacy-use-cases__media {
      width: 100px;
      height: 100px;
    }

    .oc-legacy-use-cases__item:last-child {
      grid-column: 3;
    }
  }

  @media (min-width: 1025px) and (max-width: 1199px) {
    .oc-legacy-use-cases {
      margin-top: -70px;
    }
  }

  @media (max-width: 767px) {
    .section-oxiclear-legacy-image-strip {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-legacy-use-cases__media {
      transition: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-legacy-use-cases__media {
      border-color: #fff;
    }
  }
/* END_SECTION:oxiclear-legacy-image-strip */

/* START_SECTION:oxiclear-legacy-impact-page (INDEX:55) */
.oxiclear-legacy-impact {
    color: #272727;
    background: #fff;
  }

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

  .oxiclear-legacy-impact > .oxiclear-legacy-divider {
    width: 100%;
    margin-left: 0;
  }

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

  .oxiclear-legacy-impact > h1,
  .oxiclear-legacy-impact > p,
  .oxiclear-legacy-impact__video {
    width: min(1170px, calc(100% - 30px));
    margin-right: auto;
    margin-left: auto;
  }

  .oxiclear-legacy-impact > h1 {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
  }

  .oxiclear-legacy-impact__video {
    position: relative;
    padding: 30px;
  }

  .oxiclear-legacy-impact__video video {
    display: block;
    width: 100%;
    height: auto;
  }

  .oxiclear-legacy-impact__play {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  @media (max-width: 767px) {
    .oxiclear-legacy-impact__video {
      padding: 0;
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-impact__video {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1100px);
    margin: clamp(22px, 3vw, 42px) auto clamp(48px, 6vw, 72px);
    padding: clamp(14px, 2vw, 24px);
    overflow: hidden;
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-panel);
    box-shadow: var(--oc-shadow-card);
  }

  body.oc-facelift .oxiclear-legacy-impact__play {
    min-width: 56px;
    min-height: 56px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    background: rgba(46, 46, 46, .78);
    box-shadow: var(--oc-shadow-float);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
/* END_SECTION:oxiclear-legacy-impact-page */

/* START_SECTION:oxiclear-legacy-native-contact-page (INDEX:56) */
.oxiclear-legacy-native-contact {
    width: min(1170px, calc(100% - 40px));
    margin: 0 auto;
    padding: 45px 0 70px;
  }

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

  .oxiclear-legacy-native-contact h1 {
    margin: 0 0 35px;
    text-align: center;
  }

  .oxiclear-legacy-native-contact__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }

  .oxiclear-legacy-native-contact input,
  .oxiclear-legacy-native-contact textarea {
    display: block;
    width: 100%;
    margin: 0 0 15px;
    padding: 12px 14px;
    border: 1px solid #ddd;
  }

  .oxiclear-legacy-native-contact button {
    padding: 12px 24px;
    border: 0;
    color: #fff;
    background: #000;
  }

  @media (max-width: 767px) {
    .oxiclear-legacy-native-contact__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-native-contact {
    padding: clamp(28px, 4vw, 48px) var(--oc-space-page) var(--oc-space-section);
  }

  body.oc-facelift .oxiclear-legacy-native-contact__grid {
    gap: clamp(20px, 4vw, 50px);
  }
/* END_SECTION:oxiclear-legacy-native-contact-page */

/* START_SECTION:oxiclear-legacy-native-page (INDEX:57) */
.oxiclear-legacy-native-page {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    color: #000;
    background: #fff;
  }

  .oxiclear-legacy-native-page__inner {
    width: min(100%, 1660px);
    margin: 0 auto;
    padding-bottom: 20px;
  }

  .oxiclear-legacy-native-page--narrow .oxiclear-legacy-native-page__inner {
    width: min(66.666%, 1106px);
  }

  .oxiclear-legacy-native-page h1 {
    position: relative;
    margin: 0 0 30px;
    padding-bottom: 10px;
    text-align: center;
  }

  .oxiclear-legacy-native-page h1::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 3px;
    margin: auto;
    background: #e1e1e1;
    content: "";
  }

  .oxiclear-legacy-native-page__layout--with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
    gap: 30px;
  }

  .oxiclear-legacy-native-page__sidebar-section {
    margin-bottom: 30px;
  }

  .oxiclear-legacy-native-page__sidebar-section h2 {
    margin: 0 0 15px;
    font-size: var(--oc-fs-card);
  }

  .oxiclear-legacy-native-page__sidebar-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .oxiclear-legacy-native-page__sidebar-section ul ul {
    margin: 8px 0 0 15px;
  }

  .oxiclear-legacy-native-page__sidebar-section li {
    margin-bottom: 8px;
  }

  .oxiclear-legacy-native-page__sidebar-section a {
    color: inherit;
  }

  .oxiclear-legacy-native-page__sidebar-section img,
  .oxiclear-legacy-native-page__sidebar-section svg {
    display: block;
    width: 100%;
    height: auto;
  }

  @media screen and (max-width: 767px) {
    .oxiclear-legacy-native-page {
      padding: 30px 15px;
    }

    .oxiclear-legacy-native-page--narrow .oxiclear-legacy-native-page__inner {
      width: 100%;
    }

    .oxiclear-legacy-native-page__layout--with-sidebar {
      grid-template-columns: 1fr;
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-native-page__inner > h1::after {
    display: none;
  }

  body.oc-facelift .oxiclear-legacy-native-page {
    padding: clamp(28px, 4vw, 48px) var(--oc-space-page) var(--oc-space-section);
  }

  body.oc-facelift .oxiclear-legacy-native-page__layout {
    gap: clamp(20px, 4vw, 50px);
  }

  body.oc-facelift .oxiclear-legacy-native-page__sidebar-section {
    padding: 22px;
    background: rgba(243, 243, 243, .86);
  }

  @media (min-width: 768px) and (max-width: 989px) {
    body.oc-facelift .oxiclear-legacy-native-page--narrow .oxiclear-legacy-native-page__inner {
      width: 100%;
    }

    body.oc-facelift .oxiclear-legacy-native-page__layout--with-sidebar {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:oxiclear-legacy-native-page */

/* START_SECTION:oxiclear-legacy-pollutant-strip (INDEX:58) */
.oc-legacy-protection-strip {
    background: #fff;
  }

  .oc-protection-strip__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .oc-legacy-protection-strip__inner {
    display: grid;
    grid-template-columns: minmax(132px, 1.12fr) minmax(0, 5fr);
    gap: clamp(14px, 2vw, 28px);
    align-items: stretch;
    width: min(100% - 30px, 1170px);
    margin: 0 auto;
    padding: clamp(24px, 3vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 30px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 20px 55px rgba(36, 36, 36, .09);
  }

  .oc-protection-strip__lead {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    padding-right: clamp(14px, 2vw, 28px);
    border-right: 1px solid rgba(36, 36, 36, .1);
  }

  .oc-protection-strip__lead-ring {
    display: grid;
    place-items: center;
    width: clamp(112px, 9vw, 132px);
    aspect-ratio: 1;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #00b6d9, #5cc6d0, #8176d5, #d99a3e, #1cdc00, #00b6d9);
    box-shadow: 0 15px 34px rgba(36, 36, 36, .12);
  }

  .oc-protection-strip__lead-copy {
    display: grid;
    grid-template-columns: auto auto;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 14px;
    border-radius: inherit;
    color: #242424;
    background: rgba(255, 255, 255, .94);
    box-shadow: none;
  }

  .oc-protection-strip__count {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: var(--oc-fs-price);
    font-weight: var(--oc-w-bold);
    letter-spacing: var(--oc-tr-price);
    line-height: var(--oc-lh-price);
  }

  .oc-protection-strip__in-one {
    align-self: end;
    margin-left: 8px;
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-semibold);
    letter-spacing: var(--oc-tr-h3);
    line-height: var(--oc-lh-card);
    text-transform: uppercase;
  }

  .oc-protection-strip__protection {
    grid-column: 1 / -1;
    margin-top: 7px;
    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-align: center;
    text-transform: uppercase;
  }

  .oc-protection-strip__dots {
    display: flex;
    gap: 5px;
    margin-top: 12px;
  }

  .oc-protection-strip__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00b6d9;
  }

  .oc-protection-strip__dots i:nth-child(2) { background: #5cc6d0; }
  .oc-protection-strip__dots i:nth-child(3) { background: #8176d5; }
  .oc-protection-strip__dots i:nth-child(4) { background: #d99a3e; }
  .oc-protection-strip__dots i:nth-child(5) { background: #1cdc00; }

  .oc-protection-strip__points {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 18px);
    min-width: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .oc-protection-point {
    --oc-point-accent: #00b6d9;
    --oc-point-secondary: #1cdc00;
    --oc-point-soft: rgba(0, 182, 217, .13);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 146px;
    padding: 10px 4px;
    color: #242424;
    text-align: center;
    transition: transform 260ms cubic-bezier(.22, .72, .22, 1);
  }

  .oc-protection-point--smog {
    --oc-point-accent: #7168c9;
    --oc-point-secondary: #9b91e7;
    --oc-point-soft: rgba(113, 104, 201, .14);
  }

  .oc-protection-point--dust {
    --oc-point-accent: #c9842f;
    --oc-point-secondary: #e1aa58;
    --oc-point-soft: rgba(201, 132, 47, .14);
  }

  .oc-protection-point--pollen {
    --oc-point-accent: #4e9b58;
    --oc-point-secondary: #8cc84b;
    --oc-point-soft: rgba(78, 155, 88, .14);
  }

  .oc-protection-point--airborne {
    --oc-point-accent: #4178b8;
    --oc-point-secondary: #5cc6d0;
    --oc-point-soft: rgba(65, 120, 184, .14);
  }

  .oc-protection-point__icon {
    display: grid;
    place-items: center;
    width: clamp(76px, 7vw, 94px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    color: var(--oc-point-accent);
    background: var(--oc-point-soft);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--oc-point-accent) 16%, transparent);
    transition: transform 260ms cubic-bezier(.22, .72, .22, 1), box-shadow 260ms cubic-bezier(.22, .72, .22, 1);
  }

  .oc-protection-point__icon svg {
    width: 68%;
    height: 68%;
    overflow: visible;
  }

  .oc-protection-point__icon path,
  .oc-protection-point__icon rect,
  .oc-protection-point__icon circle,
  .oc-protection-point__icon ellipse {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .oc-protection-point__icon .oc-protection-icon__soft {
    fill: var(--oc-point-soft);
  }

  .oc-protection-point__icon .oc-protection-icon__secondary {
    color: var(--oc-point-secondary);
    stroke: var(--oc-point-secondary);
  }

  .oc-protection-point__label {
    display: block;
    max-width: 142px;
    margin-top: 13px;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-body);
    line-height: var(--oc-lh-small);
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-protection-point:hover {
      transform: translateY(-3px);
    }

    .oc-protection-point:hover .oc-protection-point__icon {
      transform: scale(1.055);
      box-shadow: 0 17px 34px color-mix(in srgb, var(--oc-point-accent) 22%, transparent);
    }
  }

  @media (min-width: 768px) and (max-width: 1099px) {
    .oc-legacy-protection-strip__inner {
      display: block;
    }

    .oc-protection-strip__lead {
      display: flex;
      justify-content: flex-start;
      gap: 16px;
      padding: 0 0 20px;
      border-right: 0;
      border-bottom: 1px solid rgba(36, 36, 36, .1);
    }

    .oc-protection-strip__lead-ring {
      width: 116px;
    }

    .oc-protection-strip__dots {
      margin: 0;
    }

    .oc-protection-strip__points {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      padding-top: 18px;
    }

    .oc-protection-point {
      min-height: 132px;
    }

    .oc-protection-point__icon {
      width: 78px;
    }
  }

  @media (max-width: 767px) {
    .oc-legacy-protection-strip__inner {
      display: block;
      width: min(100% - 20px, 520px);
      padding: 22px 0 20px;
      border-radius: 24px;
    }

    .oc-protection-strip__lead {
      display: flex;
      justify-content: flex-start;
      gap: 14px;
      min-height: 0;
      padding: 0 20px 18px;
      border-right: 0;
      border-bottom: 1px solid rgba(36, 36, 36, .1);
    }

    .oc-protection-strip__lead-ring {
      width: 112px;
      flex: 0 0 112px;
    }

    .oc-protection-strip__dots {
      display: grid;
      grid-template-columns: repeat(5, 8px);
      gap: 6px;
      margin: 0;
    }

    .oc-protection-strip__dots i {
      width: 8px;
      height: 8px;
    }

    .oc-protection-strip__points {
      grid-template-columns: repeat(5, minmax(126px, 1fr));
      gap: 8px;
      padding: 18px 18px 4px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-padding-inline: 18px;
      scroll-snap-type: inline mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .oc-protection-strip__points::-webkit-scrollbar {
      display: none;
    }

    .oc-protection-point {
      min-height: 138px;
      padding: 8px 2px;
      scroll-snap-align: start;
    }

    .oc-protection-point__icon {
      width: 82px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-protection-point,
    .oc-protection-point__icon {
      transition: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-protection-strip__inner {
      background: #fff;
    }
  }
/* END_SECTION:oxiclear-legacy-pollutant-strip */

/* START_SECTION:oxiclear-legacy-product-hero (INDEX:59) */
/* OxiClear V3 homepage hero — SINGLE SOURCE for this section's styling.
     Consolidated 19 Aug 2026 on the founder's standing rule: clean at source, never
     stack override rules. Everything that used to live in section 18 of
     snippets/oxiclear-glass-home.liquid (the living-hero layer) is folded in here as
     final values, so nothing is declared twice for the browser to compute and throw
     away, and the long body.oc-facelift.template-index prefixes are gone.

     Design source: assets/approved/2026-08-19-homepage-living-glass-alignment-approved.html
     section 01, with the founder's corrections: 650px at the band, clipped at the feet,
     no wordmark at ANY width (the header dock carries the logo directly above it;
     the phone kept a white one until 8 Sep 2026, which is why this note used to be
     paired with a min-width:768px hide - do not reintroduce it), and the two colours
     carried into the headline. Rollback for the overlay: remove the one render line
     for 'oxiclear-glass-hero' above. */

  /* The SECTION WRAPPER. The hero is a rounded card sitting ON the warm paper stage,
     so the wrapper must not paint. It used to be held transparent by the ONE-STAGE
     list in oxiclear-glass-home; when this hero was consolidated here the wrapper was
     dropped from that list, which un-masked a stale `background: #fff` still sitting
     in oxiclear-facelift-home and put a white band behind the card. That stale rule is
     now deleted and the wrapper is declared here, in the section that owns it. The
     body.oc-facelift prefix is deliberate — the facelift layers select at (0,3,1), so
     a bare class loses the cascade and the padding collapses to 0, moving the hero.
     Geometry is byte-identical to before; only the white is gone. */
  body.oc-facelift.template-index .section-oxiclear-legacy-product-hero {
    padding: clamp(10px, 1.4vw, 22px) var(--oc-space-page) 0;
    background: transparent;
  }

  @media (max-width: 767px) {
    body.oc-facelift.template-index .section-oxiclear-legacy-product-hero {
      padding: 8px 10px 0;
    }
  }

  .oc-legacy-home-hero {
    position: relative;
    width: 100%;
    /* The 1320 band cap (module 13, 5.2 nesting rule: the 1400px docks are the
       widest thing on the page, every band nests inside). The hero was designed
       at "650px at the 1325px band" but shipped uncapped, so above ~1530px
       viewports it outgrew the docks; 390/768/1024/1440 never showed it because
       100% minus the wrapper's 128px stays under 1320 up to a 1448px viewport. */
    max-width: 1320px;
    margin-inline: auto;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
  }

  /* inner highlight ring — the glass edge, carried over from the facelift layer when
     the hero was consolidated here so the shipped look is unchanged */
  .oc-legacy-home-hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .44);
    border-radius: inherit;
    box-shadow: none;
    pointer-events: none;
  }

  .oc-legacy-home-hero__slides,
  .oc-legacy-home-hero__slide {
    border-radius: inherit;
  }

  .oc-legacy-home-hero__slides,
  .oc-legacy-home-hero__slide {
    position: absolute;
    inset: 0;
  }

  .oc-legacy-home-hero__slide {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 450ms ease;
  }

  .oc-legacy-home-hero__slide.is-active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
  }

  /* The shade. Same reasoning as the desktop scrim below and the same neutral
     rgb(10,10,10), but weighted for the MOBILE composition: the copy sits top-left
     over a 4:5 portrait, so the ramp is heaviest at the top and a left scrim backs
     the copy column. A lighter bottom pass carries the CTA row. Before 22 Aug this
     rule existed only at >=768px, so white type on a bright atrium was impossible
     on a phone and the type stayed ink. */
  .oc-legacy-home-hero__slide.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(10, 10, 10, .62) 0%, rgba(10, 10, 10, .52) 30%, rgba(10, 10, 10, .42) 52%, rgba(10, 10, 10, .10) 74%, rgba(10, 10, 10, .34) 100%),
      linear-gradient(90deg, rgba(10, 10, 10, .46) 0%, rgba(10, 10, 10, .20) 58%, rgba(10, 10, 10, 0) 82%);
    pointer-events: none;
  }

  .oc-legacy-home-hero__slide picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .oc-legacy-home-hero__slide picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 900ms cubic-bezier(.22, .72, .22, 1);
    animation: oc-hero-drift 26s ease-in-out infinite alternate;
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-legacy-home-hero:hover .oc-legacy-home-hero__slide picture img {
      transform: scale(1.01);
    }
  }

  /* The approved 26s breath. The photo is top-aligned on desktop, so this zoom eats
     into the floor rather than the subject: 53px of head clearance at rest, 33px at
     the peak. Founder sanctioned clipping from the feet. */
  @keyframes oc-hero-drift {
    from { transform: scale(1) translateX(0); }
    to { transform: scale(1.06) translateX(-14px); }
  }

  .oc-legacy-home-hero__semantic-title,
  .oc-legacy-home-hero__semantic-description {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---- Phone: copy block over the light portrait crop (approved composition) ---- */
  .oc-legacy-home-hero__content {
    position: absolute;
    z-index: 2;
    top: 6.5%;
    left: clamp(20px, 6.2vw, 28px);
    width: min(62vw, 268px);
    color: #fff;
  }

  /* The headline wears the hero role from snippets/oxiclear-type.liquid. It is a div
     rather than the h1 (the h1 is the visually-hidden semantic title above), so the
     role is named here; the numbers still come from the tokens. */
  .oc-legacy-home-hero__title {
    margin: 17px 0 0;
    color: #fff;
    font-size: var(--oc-fs-hero);
    font-weight: var(--oc-w-bold);
    line-height: var(--oc-lh-hero);
    letter-spacing: var(--oc-tr-hero);
    text-shadow: 0 2px 24px rgba(6, 10, 12, .5);
  }

  .oc-legacy-home-hero__title span {
    display: block;
  }

  /* the logo's own two colours, carried into the headline - at EVERY width. These
     lived only inside the min-width:768px branch until 22 Aug, which is why phones
     kept the pre-glass treatment: light-weight ink type with an aqua "Face Mask". */
  .oc-legacy-home-hero__title span:nth-child(2) { color: #5fd75c; }
  .oc-legacy-home-hero__title span:nth-child(3) { color: #7cc8ec; }

  /* N99 | Reusable on the first row, "Face Mask" onto the second and left-aligned
     UNDER N99 (founder, 22 Aug). Two things make that work: the descriptor is
     display:contents so its spans are direct children of this row rather than of a
     nested box - wrapping inside the descriptor puts "Face Mask" under "Reusable"
     instead - and the last pill SPANS both columns on row two, which is what keeps
     column one sized to N99. Two earlier attempts are worth naming so they are not
     retried: a plain two-column grid sized column one to the widest item in it, so
     "Face Mask" pushed "Reusable" 37px off N99 and left a hole in the row; and a
     flex `flex-basis: 100%` with `max-width: max-content` never broke at all, because
     flex clamps the hypothetical main size by max-width BEFORE it breaks lines. */
  .oc-legacy-home-hero__product-line {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    color: #fff;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: 1;
    letter-spacing: var(--oc-tr-small);
  }

  .oc-legacy-home-hero__n99,
  .oc-legacy-home-hero__descriptor > span {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .oc-legacy-home-hero__descriptor {
    display: contents;
  }

  .oc-legacy-home-hero__descriptor > span:last-child {
    grid-column: 1 / -1;
  }

  /* ---- Overlay (snippets/oxiclear-glass-hero.liquid): teaser + CTAs ---- */
  .oc-glass-hero {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }

  /* The floating AQI teaser that lived top-right is gone (founder, 1 Sep 2026,
     D-190): the header dock carries the live reading at every width now. */

  .oc-glass-hero__ctas {
    position: absolute;
    z-index: 3;
    bottom: 20px;
    left: 50%;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    width: calc(100% - 32px);
    transform: translateX(-50%);
  }

  .oc-glass-hero__cta {
    pointer-events: auto;
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 14px;
    font-size: var(--oc-fs-button);
    line-height: var(--oc-lh-button);
    letter-spacing: var(--oc-tr-button);
    white-space: nowrap;
    text-decoration: none;
    border-radius: 999px;
    transition: transform .16s ease, background-color .16s ease;
  }

  /* Frost pill (23 Aug): white glass, dead flat - green lives in the glow only. */
  .oc-glass-hero__cta--primary {
    color: #07270b;
    font-weight: var(--oc-w-semibold);
    background: rgba(255, 255, 255, .66);
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(4, 18, 6, .22), 0 2px 10px rgba(28, 177, 66, .18);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }

  .oc-glass-hero__cta--primary:hover {
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 34px rgba(4, 18, 6, .24), 0 4px 16px rgba(28, 177, 66, .34);
    transform: translateY(-1px);
  }

  /* base = the bright mobile phone crop, so the ghost carries ink on denser white
     glass; the desktop block swaps it to white-on-thin-glass for the dark frame */
  .oc-glass-hero__cta--ghost {
    color: #07270b;
    font-weight: var(--oc-w-semibold);
    background: rgba(255, 255, 255, .44);
    border: 1px solid rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }

  .oc-glass-hero__cta--ghost:hover { background: rgba(255, 255, 255, .58); }

  .oc-glass-hero__cta:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  /* ================= TABLET AND DESKTOP: the mockup's hero card ================= */
  @media screen and (min-width: 768px) {
    .oc-legacy-home-hero {
      aspect-ratio: auto;
      /* 650px at the 1325px band. 730px held the whole figure but pushed the hero
         past one screen, so: 650 and clip the feet (founder, 19 Aug). */
      min-height: clamp(500px, 46vw, 650px);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 28px;
      box-shadow: 0 24px 60px rgba(10, 14, 16, .28);
    }

    /* top-aligned: the crop comes off the floor, never his head */
    .oc-legacy-home-hero__slide picture img {
      object-position: 50% 0%;
    }

    /* The shade. The mockup's single vertical ramp assumes a DARK placeholder photo;
       over the real bright atrium it left the headline at 1.74:1. Two-part scrim: the
       vertical ramp starts at the top and a left scrim backs the copy column, so the
       right of the frame keeps its light. */
    .oc-legacy-home-hero__slide.is-active::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      /* Two changes, 20 Aug: the scrim is NEUTRAL and it stops taxing the subject.
         (1) rgba(9,12,13) is a cool blue-black — over a glass atrium it cooled the
         whole frame, which is the "tinted" look. rgb(10,10,10) is hueless.
         (2) The vertical ramp used to darken the FULL width, so the man lost 24% of
         his light for text that sits nowhere near him. The ramp is now light and the
         left scrim — which only covers the copy column — does the work instead. */
      background:
        linear-gradient(180deg, rgba(10, 10, 10, .06) 0%, rgba(10, 10, 10, .16) 45%, rgba(10, 10, 10, .55) 100%),
        linear-gradient(90deg, rgba(10, 10, 10, .62) 0%, rgba(10, 10, 10, .34) 42%, rgba(10, 10, 10, 0) 62%);
      pointer-events: none;
    }

    .oc-legacy-home-hero__content {
      top: auto;
      /* clears the CTA row: 44px floor + 48px button + 20px gap */
      bottom: 112px;
      left: clamp(24px, 4vw, 54px);
      right: clamp(24px, 4vw, 54px);
      width: auto;
      max-width: min(62%, 760px);
      color: #fff;
    }

    /* margin only - the hero role is fluid from 390px to 1440px, so size and
       tracking need no desktop branch, and colour, weight, shadow and the two
       accent words are declared once at base and inherited here. */
    .oc-legacy-home-hero__title {
      margin: 0;
    }

    .oc-legacy-home-hero__product-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 18px 0 0;
    }

    /* the glass pill itself is declared once at base; only its padding changes here */
    .oc-legacy-home-hero__n99,
    .oc-legacy-home-hero__descriptor > span {
      padding: 8px 14px;
    }

    .oc-legacy-home-hero__descriptor {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .oc-legacy-home-hero__descriptor > span:last-child {
      grid-column: auto;
    }

    .oc-glass-hero__ctas {
      bottom: 44px;
      left: clamp(24px, 4vw, 54px);
      width: auto;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-start;
      transform: none;
    }

    .oc-glass-hero__cta {
      height: 48px;
      padding: 0 22px;
    }

    .oc-glass-hero__cta--ghost {
      color: #fff;
      background: rgba(255, 255, 255, .2);
      border-color: rgba(255, 255, 255, .5);
    }

    .oc-glass-hero__cta--ghost:hover { background: rgba(255, 255, 255, .3); }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-legacy-home-hero__slide { transition: none; }
    .oc-legacy-home-hero__slide picture img { animation: none; }
    .oc-glass-hero__cta:hover { transform: none; }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-glass-hero__cta--primary { background: #ffffff; }
    .oc-glass-hero__cta--ghost { color: #07270b; background: rgba(255, 255, 255, .88); }
    .oc-legacy-home-hero__n99,
    .oc-legacy-home-hero__descriptor > span { background: rgba(20, 24, 26, .55); }
  }
/* END_SECTION:oxiclear-legacy-product-hero */

/* START_SECTION:oxiclear-legacy-product-recommendations (INDEX:60) */
/* One 1320 spine, same construction as the PDP stage and the story (D-128). */
  .oc-pdp-recs {
    /* Spine: the percentage form, not 100vw. 100vw counts the classic scrollbar,
       so the 100vw form is ~15px wider than the viewport on Windows/Linux (and on
       macOS set to always-show scrollbars) and scrolls the page sideways. Every
       band on this page uses this same declaration. */
    width: min(100% - 32px, 1320px);
    margin: clamp(40px, 6vw, 84px) auto;
    color: #2d2d2d;
  }

  .oc-pdp-recs__head {
    margin-bottom: 22px;
    text-align: left;
  }

  .oc-pdp-recs__kicker {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    color: #454c56;
    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;
  }

  .oc-pdp-recs__kicker::before {
    display: inline-block;
    width: 24px;
    height: 2px;
    content: "";
    background: currentcolor;
  }

  .oc-pdp-recs__head h2 {
    margin: 0;
    color: #2d2d2d;
    text-transform: none;
  }

  /* The band's one glass surface: --stage-fill / --stage-edge / --stage-shadow. */
  .oc-pdp-recs__frost {
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: var(--oxg-radius-xl, 30px);
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  .oc-pdp-recs__grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding: clamp(22px, 3vw, 34px);
  }

  .oc-pdp-recs :is(a, button):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oc-pdp-rec {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
    background: rgba(255, 255, 255, .55);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06),
      0 12px 32px rgba(10, 14, 16, .10);
  }

  /* The mockup's grey PRODUCT tile is a placeholder; the real tile holds real media.
     Inset absolute, like the mockup's .hero-img img: a centred grid item cannot
     resolve height:100%, so the photo escaped the 140px tile and got clipped. */
  .oc-pdp-rec__media {
    position: relative;
    display: block;
    height: 140px;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, .62);
  }

  .oc-pdp-rec__image {
    position: absolute;
    top: 10px;
    left: 10px;
    display: block;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: contain;
  }

  .oc-pdp-rec__title {
    margin: 0;
    color: #14171c;
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-semibold);
    letter-spacing: var(--oc-tr-h3);
    line-height: var(--oc-lh-card);
  }

  .oc-pdp-rec__title a {
    color: inherit;
    text-decoration: none;
  }

  /* Price and button pin to the foot so cards line up on uneven titles. */
  .oc-pdp-rec__price {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: auto 0 0;
    color: #14171c;
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-bold);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .oc-pdp-rec__price s {
    color: #545c6a;
    font-weight: var(--oc-w-regular);
  }

  .oc-pdp-rec__form {
    margin: 0;
  }

  /* The shipped shop-card button, on the one action language declared in
     oxiclear-facelift-actions (D-119). That layer's selector allowlist does not
     reach this band, so the tokens are consumed here rather than added there. */
  .oc-pdp-rec__add {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 10px;
    color: var(--oc-action-primary-text, #07270b);
    border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55));
    border-radius: var(--oc-action-radius, 999px);
    background: var(--oc-action-primary-background, rgba(28, 177, 66, .2));
    box-shadow: var(--oc-action-shadow, 0 10px 26px rgba(7, 39, 11, .12), 0 2px 10px rgba(28, 177, 66, .16));
    cursor: pointer;
    font: inherit;
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-button);
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--oc-duration-fast, 160ms) ease,
      transform var(--oc-duration-fast, 160ms) ease,
      box-shadow var(--oc-duration-base, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oc-pdp-rec__add:hover {
    background: var(--oc-action-primary-background-hover, rgba(28, 177, 66, .32));
    transform: translateY(-2px);
  }

  .oc-pdp-rec__add:active {
    box-shadow: 0 4px 10px rgba(7, 39, 11, .12);
    transform: translateY(1px) scale(.985);
  }

  .oc-pdp-rec__add[disabled] {
    cursor: default;
    opacity: .65;
    transform: none;
  }

  .oc-pdp-rec__add--soldout {
    color: #3d443f;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .38);
    box-shadow: none;
  }

  .oc-pdp-rec__add--soldout:hover {
    background: rgba(255, 255, 255, .5);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-pdp-recs__frost {
      background: rgba(255, 255, 255, .92);
    }

    .oc-pdp-rec {
      background: rgba(255, 255, 255, .86);
    }

    .oc-pdp-rec__add {
      background: #ffffff;
    }

    .oc-pdp-rec__add--soldout {
      background: #eef0ec;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-recs__frost {
      background: rgba(255, 255, 255, .92);
    }

    .oc-pdp-rec {
      background: rgba(255, 255, 255, .86);
    }

    .oc-pdp-rec__add {
      background: #ffffff;
    }

    .oc-pdp-rec__add--soldout {
      background: #eef0ec;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-pdp-rec__add {
      transition: none;
    }

    .oc-pdp-rec__add:hover,
    .oc-pdp-rec__add:active {
      transform: none;
    }
  }
/* END_SECTION:oxiclear-legacy-product-recommendations */

/* START_SECTION:oxiclear-legacy-product-reviews (INDEX:61) */
/* Band 05 - reviews. Structure and materials from the approved PDP mockup
     (glass baseline, D-2026-08-21-126). The band is ours; everything inside
     #judgeme_product_reviews belongs to the app and is only restaged. */
  .oc-pdp-reviews {
    width: min(100% - 32px, 1320px);
    margin: clamp(40px, 6vw, 84px) auto 0;
    color: #2d2d2d;
  }

  .oc-pdp-reviews__head {
    margin-bottom: 22px;
    text-align: left;
  }

  .oc-pdp-reviews__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #454C56;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-pdp-reviews__kicker::before {
    display: inline-block;
    width: 24px;
    height: 2px;
    content: "";
    background: #454C56;
  }

  .oc-pdp-reviews__heading {
    margin: 0;
    color: #2d2d2d;
  }

  .oc-pdp-reviews__stage {
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: var(--oxg-radius-xl, 30px);
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  /* Judge.me exposes its palette as custom properties, so the ink is set by
     handing the app our values rather than by fighting its stylesheet. */
  .oc-pdp-reviews__widget {
    --jdgm-primary-color: #14171C;
    --jdgm-secondary-color: rgba(20, 23, 28, .08);
    --jdgm-star-color: #14171C;
    --jdgm-reviewer-name-color: #545C6A;
    --jdgm-paginate-color: #14171C;
    --jdgm-write-review-bg-color: var(--oc-action-primary-background, rgba(28, 177, 66, .88));
    --jdgm-write-review-text-color: var(--oc-action-primary-text, #07270b);

    padding: clamp(22px, 3vw, 34px);
  }

  /* The rules below carry an id because the app loads its own stylesheet after
     this one at runtime; the id wins the cascade without !important. */
  #judgeme_product_reviews .jdgm-rev-widg {
    padding: 0;
  }

  /* The band head already says "Customer Reviews"; the widget's own h2 repeats it. */
  #judgeme_product_reviews .jdgm-rev-widg__title {
    display: none;
  }

  #judgeme_product_reviews .jdgm-rev-widg__header {
    text-align: left;
  }

  /* Once the app has hydrated it lays the summary and the histogram out as one
     centred flex row. On the band they stack, left, above the cards. */
  #judgeme_product_reviews .jdgm-row-stars {
    display: block;
    padding-bottom: 0;
  }

  /* The row that carries the write-review control: its divider rule is the app's
     own rhythm, not this band's. */
  #judgeme_product_reviews .jdgm-row-actions {
    border-top: 0;
  }

  #judgeme_product_reviews .jdgm-rev-widg__summary,
  #judgeme_product_reviews .jdgm-widget-actions-wrapper {
    display: block;
    width: auto;
    margin: 0 0 16px;
    padding: 0;
    border-left: 0;
    text-align: left;
  }

  /* No display here on purpose: the app switches the histogram off by class
     while it loads and when a product has no reviews, and that has to hold. */
  #judgeme_product_reviews .jdgm-histogram {
    align-items: flex-start;
    width: auto;
    margin: 0 0 16px;
    padding: 0;
    border-left: 0;
    text-align: left;
  }

  #judgeme_product_reviews .jdgm-rev-widg__summary .jdgm-star {
    font-size: 14px;
  }

  #judgeme_product_reviews .jdgm-rev-widg__summary-text {
    justify-content: flex-start;
    color: #545C6A;
    font-size: var(--oc-fs-small);
  }

  /* Stars are information, not an action, so they carry ink (D-120). The app
     writes its brand teal straight into these two, with no token to reach. */
  #judgeme_product_reviews .jdgm-histogram__bar-content {
    background-color: #14171C;
  }

  #judgeme_product_reviews .jdgm-histogram .jdgm-star {
    color: var(--jdgm-star-color, #14171C);
  }

  /* The card grid: three cards across the 1320 spine, one card per review. */
  #judgeme_product_reviews .jdgm-rev-widg__reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
  }

  #judgeme_product_reviews .jdgm-rev {
    display: grid;
    grid-template-columns:
      minmax(0, max-content)
      minmax(0, max-content)
      minmax(0, max-content)
      minmax(0, 1fr);
    column-gap: 8px;
    align-content: start;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 20px;
    background: rgba(255, 255, 255, .38);
  }

  /* The app prints the header (avatar, stars, date, name) before the review
     text, and once hydrated it wraps those in .jdgm-row-* rows. display:contents
     lifts them all onto the card grid so the card can be placed in the mockup's
     order - stars, then the words, then who said them - in either state. */
  #judgeme_product_reviews .jdgm-rev__header,
  #judgeme_product_reviews .jdgm-row-rating,
  #judgeme_product_reviews .jdgm-row-profile,
  #judgeme_product_reviews .jdgm-row-extra {
    display: contents;
  }

  #judgeme_product_reviews .jdgm-rev > *,
  #judgeme_product_reviews .jdgm-rev__header > *,
  #judgeme_product_reviews .jdgm-rev__header > * > * {
    grid-column: 1 / -1;
  }

  #judgeme_product_reviews .jdgm-rev__icon,
  #judgeme_product_reviews .jdgm-rev__br {
    display: none;
  }

  #judgeme_product_reviews .jdgm-row-product {
    grid-row: 1;
  }

  #judgeme_product_reviews .jdgm-rev__rating {
    grid-row: 2;
    font-size: 14px;
  }

  #judgeme_product_reviews .jdgm-rev__content {
    grid-row: 3;
    margin-top: 10px;
  }

  #judgeme_product_reviews .jdgm-rev__title {
    margin-bottom: 4px;
    color: #14171C;
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-semibold);
  }

  #judgeme_product_reviews .jdgm-rev__body,
  #judgeme_product_reviews .jdgm-rev__body > p {
    /* Not italic: there is no italic cut in this system (D-171), so a slant here
       would be a browser-synthesised oblique. The quote reads as a quote through
       its own frame, not through a fake angle. */
    color: #454C56;
    font-size: var(--oc-fs-body);
    line-height: var(--oc-lh-body);
  }

  /* The "who" line: name, buyer badge, place and date on one row under the words. */
  #judgeme_product_reviews .jdgm-rev__author-wrapper,
  #judgeme_product_reviews .jdgm-rev__buyer-badge-wrapper,
  #judgeme_product_reviews .jdgm-rev__location,
  #judgeme_product_reviews .jdgm-rev__timestamp {
    grid-row: 4;
    margin-top: 10px;
    color: #545C6A;
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  #judgeme_product_reviews .jdgm-rev__author-wrapper {
    grid-column: 1;
  }

  #judgeme_product_reviews .jdgm-rev__buyer-badge-wrapper {
    grid-column: 2;
  }

  /* The verified badge is a teal pill by default; on the who line it is a word. */
  #judgeme_product_reviews .jdgm-rev__buyer-badge {
    padding: 0;
    color: #545C6A;
    background: none;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
  }

  #judgeme_product_reviews .jdgm-rev__location {
    grid-column: 3;
  }

  #judgeme_product_reviews .jdgm-rev__timestamp {
    grid-column: 4;
  }

  #judgeme_product_reviews .jdgm-rev__timestamp::before {
    margin-right: 6px;
    content: "\00b7";
  }

  #judgeme_product_reviews .jdgm-rev__actions {
    grid-row: 5;
  }

  #judgeme_product_reviews .jdgm-rev__reply {
    grid-row: 6;
  }

  /* The app prints an empty reply well on every review that has no reply; it is
     whitespace, so :empty misses it and it paints a bar across the card. */
  #judgeme_product_reviews .jdgm-rev__reply:not(:has(*)) {
    display: none;
  }

  /* The one button language (D-119) reaching the widget's own controls. The app
     gives no token for these, so the id carries them instead of !important.
     Height comes from line-height, not display: the app switches these controls
     on and off with display, and that switch has to keep working. */
  #judgeme_product_reviews .jdgm-write-rev-link,
  #judgeme_product_reviews .jdgm-btn {
    min-height: var(--oc-action-height, 48px);
    padding: 10px 20px;
    border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55));
    border-radius: var(--oc-action-radius, 999px);
    color: var(--oc-action-primary-text, #07270b);
    background: var(--oc-action-primary-background, rgba(28, 177, 66, .2));
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    line-height: 26px;
    text-align: center;
  }

  /* The app centres this button for a centred widget; the band reads left. */
  #judgeme_product_reviews .jdgm-write-rev-link {
    margin-left: 0;
  }

  #judgeme_product_reviews .jdgm-write-rev-link:hover,
  #judgeme_product_reviews .jdgm-btn:hover {
    color: var(--oc-action-primary-text, #07270b);
    background: var(--oc-action-primary-background-hover, rgba(28, 177, 66, .32));
    opacity: 1;
  }

  /* The 44px control floor. It used to arrive from the shared commerce layer,
     which reached this band by its old .legacy-product-reviews class; the band
     owns it now. Judge.me's sort select and every field in its write-review form
     sit under 44px otherwise. The id carries it past the app's own stylesheet
     without !important; the pill buttons above are id + class, so their 48px
     still wins. */
  #judgeme_product_reviews :where(.btn, button, input[type="submit"], input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), select, summary) {
    min-height: var(--oc-commerce-control, 44px);
  }

  #judgeme_product_reviews :where(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-reviews__stage {
      background: rgba(255, 255, 255, .92);
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-pdp-reviews__stage {
      background: rgba(255, 255, 255, .92);
    }
  }
/* END_SECTION:oxiclear-legacy-product-reviews */

/* START_SECTION:oxiclear-legacy-product-template (INDEX:62) */
/* The PDP sits on the body's warm paper. This used to paint #f6f9f9 under an aqua
     wash at 1660px - both dead since the page-root transparency round (D-123), and
     aqua is banned. Width is the baseline stage width; the one glass surface is the
     __product stage below. This section is the single owner of PDP styling: the
     .oc-legacy-pdp block in oxiclear-facelift-commerce was scrapped into here. */
  .oc-legacy-pdp {
    /* Spine: the percentage form, not 100vw. 100vw counts the classic scrollbar,
       so the 100vw form is ~15px wider than the viewport on Windows/Linux (and on
       macOS set to always-show scrollbars) and scrolls the page sideways. Every
       band on this page uses this same declaration. */
    width: min(100% - 32px, 1320px);
    margin: 0 auto;
    padding-top: clamp(24px, 4vw, 56px);
    color: #2d2d2d;
  }

  .oc-legacy-pdp a {
    color: inherit;
  }

  /* Crumbs: THE breadcrumb standard (D-197) - one small frost capsule, the
     same numbers as snippets/breadcrumb.liquid, plain ink links inside. The
     per-crumb blurred mini-pills are gone (blur gated off the paper stage). */
  .oc-legacy-pdp__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    margin: 0 0 14px;
    padding: 3px 10px;
    color: #454c56;
    font-size: 13px;
    line-height: 1.3;
    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);
  }

  .oc-legacy-pdp__crumb {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 6px;
    color: #454c56;
    font-weight: var(--oc-w-medium);
    text-decoration: none;
    border-radius: 999px;
    transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  a.oc-legacy-pdp__crumb:hover { color: #14171c; }

  .oc-legacy-pdp__crumb.is-current {
    color: #14171c;
    font-weight: var(--oc-w-semibold);
  }

  .oc-legacy-pdp__crumb-mark {
    color: #8a919d;
    padding: 0 1px;
  }

  /* Stage geometry is the mockup's: the gallery leads by a little, not by half again.
     No overflow clip here - the buy column is a sticky scroll target and an
     overflow-hidden ancestor would kill it, and nothing in this stage bleeds. */
  .oc-legacy-pdp__product {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 30px;
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  .oc-legacy-pdp__gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 24px;
  }

  .oc-legacy-pdp__fact-chips {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }

  .oc-legacy-pdp__fact-chip {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    width: fit-content;
    padding: 8px 13px;
    color: #14171C;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .05);
  }

  /* Only the chips over the hero carry the bullet; the trust row reads as text. */
  .oc-legacy-pdp__fact-chips .oc-legacy-pdp__fact-chip::before {
    display: inline-block;
    flex: none;
    width: 7px;
    height: 7px;
    background: #14171C;
    border-radius: 50%;
    opacity: .65;
    content: "";
  }

  .oc-legacy-pdp__thumbnails {
    display: flex;
    flex-direction: row;
    order: 2;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }

  .oc-legacy-pdp__thumbnail {
    position: relative;
    flex: 0 0 74px;
    width: 74px;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 4px;
    overflow: hidden;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 14px;
    scroll-snap-align: start;
    opacity: 0.72;
  }

  .oc-legacy-pdp__thumbnail.is-active {
    border-color: #14171C;
    box-shadow: 0 0 0 1px #14171C;
    opacity: 1;
  }

  .oc-legacy-pdp [data-legacy-media-hidden="true"] {
    display: none !important;
  }

  .oc-legacy-pdp__thumbnail:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oc-legacy-pdp__thumbnail img,
  .oc-legacy-pdp__placeholder,
  .oc-legacy-pdp__main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .oc-legacy-pdp__media-emblem {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #000000;
    font-size: var(--oc-fs-small);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }

  /* The hero tile: white, 20px, and tall enough to hold the column open next to the
     buy side. Centred so a short image sits in the middle of the tile, not at its top. */
  .oc-legacy-pdp__stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    order: 1;
    min-width: 0;
    min-height: 430px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 20px;
  }

  .oc-legacy-pdp__stage:focus {
    outline: none;
  }

  .oc-legacy-pdp__media {
    display: none;
    flex: none;
    width: 100%;
    aspect-ratio: var(--legacy-media-ratio, 1);
    align-items: center;
    justify-content: center;
  }

  .oc-legacy-pdp__media.is-active {
    display: flex;
  }

  .oc-legacy-pdp__media iframe,
  .oc-legacy-pdp__media video,
  .oc-legacy-pdp__media model-viewer {
    display: block;
    width: 100%;
    height: 100%;
  }

  .oc-legacy-pdp__zoom-trigger {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: crosshair;
    background: transparent;
    border: 0;
  }

  .oc-legacy-pdp__dots {
    display: none;
    order: 3;
  }

  .oc-legacy-pdp__details-column {
    min-width: 0;
  }

  .oc-legacy-pdp__sticky.is-sticky {
    position: sticky;
    top: 84px;   /* clears the floating header dock */
  }

  /* Was a full-width black slab welded to the card's top radius. Now a quiet chip:
     price information, not urgency. */
  .oc-legacy-pdp__sale-badge {
    width: fit-content;
    margin: 24px 24px 0 auto;
    padding: 7px 13px;
    color: #14171C;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
    text-transform: uppercase;
    letter-spacing: var(--oc-tr-eyebrow);
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .05);
  }

  .oc-legacy-pdp__sale-badge.is-hidden,
  .oc-legacy-pdp__compare.is-hidden,
  .oc-legacy-pdp__discount.is-hidden {
    display: none;
  }

  /* The buy column dissolves into the stage: one glass surface, not a card floating
     inside a card. Order rules absorbed from the scrapped commerce block. */
  .oc-legacy-pdp__details {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3.2vw, 44px);
    background: transparent;
  }

  /* One declared reading order for the column, so no family needs an order override
     of its own. DOM order already matches; the only real move is offer before
     description. */
  .oc-legacy-pdp__details > .oc-legacy-pdp__vendor,
  .oc-legacy-pdp__details > .oc-legacy-pdp__sku { order: 0; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__eyebrow { order: 1; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__title { order: 2; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__aqi { order: 3; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__lead { order: 4; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__summary { order: 5; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__proof { order: 6; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__offer { order: 7; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__description { order: 8; }
  .oc-legacy-pdp__details > .oc-legacy-pdp__meta { order: 9; }

  .oc-legacy-pdp__vendor,
  .oc-legacy-pdp__sku {
    margin: 0 0 10px;
    font-size: var(--oc-fs-small);
  }

  .oc-legacy-pdp__sku {
    text-align: right;
  }

  /* The h1 here is a product name, not a page headline, so it takes the product
     role rather than the hero one it would inherit from the h1 rule. */
  .oc-legacy-pdp__title {
    margin: 0 0 16px;
    color: #2d2d2d;
    font-size: var(--oc-fs-product);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-product);
    letter-spacing: var(--oc-tr-product);
    text-transform: none;
  }

  /* Kicker voice: ink, tracked, never a colour (was teal #267f82 - aqua is banned).
     The short rule in front is the band kicker's mark, now shared by the buy column. */
  .oc-legacy-pdp__eyebrow {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px;
    color: #454C56;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-legacy-pdp__eyebrow::before {
    display: inline-block;
    flex: none;
    width: 24px;
    height: 2px;
    background: #454C56;
    content: "";
  }

  .oc-legacy-pdp__lead {
    max-width: 520px;
    margin: 0 0 12px;
    color: #2d2d2d;
    font-size: var(--oc-fs-body-lg);
  }

  .oc-legacy-pdp__summary {
    max-width: 560px;
    margin: 0 0 24px;
    color: #454C56;
  }

  .oc-legacy-pdp__proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 28px;
    border-top: 1px solid #d9dede;
    border-left: 1px solid #d9dede;
  }

  .oc-legacy-pdp__proof div {
    min-width: 0;
    padding: 13px 14px;
    border-right: 1px solid #d9dede;
    border-bottom: 1px solid #d9dede;
  }

  .oc-legacy-pdp__proof dt,
  .oc-legacy-pdp__proof dd {
    margin: 0;
  }

  .oc-legacy-pdp__proof dt {
    color: #545C6A;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
    text-transform: uppercase;
  }

  .oc-legacy-pdp__proof dd {
    margin-top: 4px;
    color: #14171C;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-small);
  }

  .oc-legacy-pdp.is-premium-product .oc-legacy-pdp__title {
    max-width: 560px;
  }

  .oc-legacy-pdp.is-premium-product .oc-legacy-pdp__proof {
    gap: 8px;
    border: 0;
  }

  .oc-legacy-pdp.is-premium-product .oc-legacy-pdp__proof div {
    min-height: 72px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 16px;
    background: rgba(255, 255, 255, .38);
  }

  /* No add-button paint here: the button system in oxiclear-facelift-actions owns
     every action button. The black/teal pair that lived here was dead code. */
  .oc-legacy-pdp__description {
    position: relative;
    margin: 0 0 30px;
    padding-bottom: 20px;
    clear: both;
    overflow: hidden;
    color: #000000;
    word-wrap: break-word;
  }

  .oc-legacy-pdp__description-content {
    color: #000000;
  }

  .oc-legacy-pdp__description.is-collapsible:not(.is-open) .oc-legacy-pdp__description-content {
    position: relative;
    max-height: 100px;
    overflow: hidden;
  }

  .oc-legacy-pdp__description.is-collapsible:not(.is-open) .oc-legacy-pdp__description-content::after {
    position: absolute;
    inset: 0;
    display: block;
    content: "";
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, .75) 100%);
  }

  .oc-legacy-pdp__readmore-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    margin: 12px auto 0;
    padding: 0;
    color: #000000;
    font: inherit;
    font-weight: var(--oc-w-semibold);
    text-transform: none;
    cursor: pointer;
    background: transparent;
    border: 0;
  }

  .oc-legacy-pdp__readmore-toggle::before,
  .oc-legacy-pdp__readmore-toggle::after {
    flex: 1 1 auto;
    border-top: 1px solid #bcbcbc;
    content: "";
  }

  .oc-legacy-pdp__readmore-toggle[hidden] {
    display: none;
  }

  .oc-legacy-pdp__swatch {
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
  }

  .oc-legacy-pdp__swatch legend {
    display: inline-block;
    width: 100%;
    margin: 0 0 5px;
    padding: 0;
    color: #000000;
    font-size: var(--oc-fs-small);
    text-transform: uppercase;
  }

  .oc-legacy-pdp__swatch-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
  }

  .oc-legacy-pdp__swatch-element {
    position: relative;
    display: inline-block;
    margin: 0 0 20px;
  }

  .oc-legacy-pdp__swatch-element.is-color {
    margin-right: -5px;
    margin-bottom: 5px;
  }

  .oc-legacy-pdp__swatch-element input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .oc-legacy-pdp__swatch-element label {
    display: block;
    min-width: 35px;
    margin: 0;
    padding: 8px 20px;
    color: #000000;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
  }

  .oc-legacy-pdp__swatch-element input:focus-visible + label {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oc-legacy-pdp__swatch-element input:checked + label {
    color: #14171C;
    font-weight: var(--oc-w-semibold);
    background: rgba(255, 255, 255, .75);
    border-color: #14171C;
    box-shadow: 0 0 0 1px #14171C;
  }

  .oc-legacy-pdp__swatch-element .oc-legacy-pdp__color {
    position: relative;
    width: 35px;
    min-width: 35px;
    height: 35px;
    padding: 0;
    background: var(--legacy-swatch-color, #ffffff);
    border: 1px solid #000000;
    border-radius: 70px;
  }

  .oc-legacy-pdp__swatch-element .oc-legacy-pdp__color::after {
    position: absolute;
    inset: 0;
    display: block;
    content: "";
    border: 3px solid #ffffff;
    border-radius: 15px;
  }

  .oc-legacy-pdp__swatch-element input:checked + .oc-legacy-pdp__color {
    background: var(--legacy-swatch-color, #ffffff);
    border: 2px solid #000000;
    box-shadow: 0 7px 13px rgba(86, 95, 102, 0.2);
  }

  .oc-legacy-pdp__color--black { --legacy-swatch-color: #000000 !important; }
  .oc-legacy-pdp__color--royal-blue { --legacy-swatch-color: #4169e1 !important; }
  .oc-legacy-pdp__color--combat { --legacy-swatch-color: #6b7053 !important; }
  .oc-legacy-pdp__color--maroon { --legacy-swatch-color: #800000 !important; }
  .oc-legacy-pdp__color--oxigreen { --legacy-swatch-color: #71b62c !important; }
  .oc-legacy-pdp__color--lush-pink { --legacy-swatch-color: #ee9ab5 !important; }

  .oc-legacy-pdp__swatch-element.is-sold-out label {
    color: #000000;
    text-decoration: line-through;
    cursor: default;
    background-color: transparent;
    border-color: #e6e6e6;
    opacity: 0.4;
  }

  .oc-legacy-pdp__tooltip {
    position: absolute;
    bottom: 100%;
    left: -30px;
    z-index: 10;
    display: block;
    width: 100px;
    margin-bottom: 15px;
    padding: 10px;
    color: #ffffff;
    text-align: center;
    visibility: hidden;
    background: #14171C;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(10px);
    transition: 0.25s ease-out;
  }

  .oc-legacy-pdp__tooltip::after {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -13px;
    content: "";
    border-top: 10px solid #14171C;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
  }

  .oc-legacy-pdp__swatch-element:hover .oc-legacy-pdp__tooltip,
  .oc-legacy-pdp__swatch-element:focus-within .oc-legacy-pdp__tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .oc-legacy-pdp__variant-select {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
    box-shadow: 0 6px 16px rgba(36, 36, 36, .10);
  }

  .js .oc-legacy-pdp__variant-select {
    display: none;
  }

  .oc-legacy-pdp__quantity-field > label {
    display: inline-block;
    margin: 20px 0 10px;
    color: #000000;
    font-size: var(--oc-fs-small);
    text-transform: uppercase;
  }

  .oc-legacy-pdp__quantity {
    position: relative;
    width: 132px;
    margin-bottom: 1em;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
  }

  .oc-legacy-pdp__quantity input {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 12px 24px;
    color: #000000;
    text-align: center;
    background: transparent;
    border: 0;
    appearance: textfield;
  }

  .oc-legacy-pdp__quantity input::-webkit-inner-spin-button,
  .oc-legacy-pdp__quantity input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
  }

  .oc-legacy-pdp__quantity button {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 24px;
    padding: 0;
    color: #000000;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: var(--oxg-radius-pill, 999px);
    opacity: 0.5;
  }

  .oc-legacy-pdp__quantity [data-legacy-quantity-minus] { left: 0; }
  .oc-legacy-pdp__quantity [data-legacy-quantity-plus] { right: 0; }

  .oc-legacy-pdp__pricing {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    align-items: baseline;
  }

  /* The was-price pair takes its own line so the live price always starts one. */
  .oc-legacy-pdp__was {
    display: flex;
    flex-basis: 100%;
    gap: 6px;
    align-items: baseline;
  }

  .oc-legacy-pdp__compare {
    color: #545C6A;
    text-decoration: line-through;
  }

  /* Was #f26c4f, an off-palette orange. Ink on a quiet chip. */
  .oc-legacy-pdp__discount {
    padding: 3px 10px;
    color: #14171C;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
  }

  /* The price sits cleanly in ink. Never green, never on a pill (D-120). */
  .oc-legacy-pdp__price {
    display: block;
    width: 100%;
    margin: 0;
    color: #14171C;
    font-size: var(--oc-fs-price);
    font-weight: var(--oc-w-bold);
    line-height: var(--oc-lh-price);
    letter-spacing: var(--oc-tr-price);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .oc-legacy-pdp__unit-price {
    margin: 0 0 16px;
    font-size: var(--oc-fs-small);
  }

  /* Last line in the column now: the inclusive-pricing disclosure, kept quiet. */
  .oc-legacy-pdp__policies {
    margin: 4px 0 0;
    color: #545C6A;
    font-size: var(--oc-fs-small);
  }

  .oc-legacy-pdp__form-errors {
    margin: 15px 0;
    color: #b00020;
  }

  .oc-legacy-pdp__renew {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    padding: 0 20px;
    color: #14171C;
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    text-decoration: none;
    background: rgba(28, 177, 66, .08);
    border: 1px solid rgba(28, 177, 66, .32);
    border-radius: 999px;
    transition: transform .16s ease, background-color .16s ease;
  }

  .oc-legacy-pdp__renew:hover {
    background: rgba(28, 177, 66, .16);
    transform: translateY(-2px);
  }

  .oc-legacy-pdp__payment-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    margin-top: 20px;
  }

  /* Layout only. Every paint state of the add button - fill, radius, type, hover,
     disabled - is declared once in oxiclear-facelift-actions; the black slab that
     used to be repainted here was already dead under it. */
  .oc-legacy-pdp__add,
  .oc-legacy-pdp__payment-buttons .shopify-payment-button {
    width: 50%;
    max-width: 300px;
  }

  .oc-legacy-pdp__add {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .oc-legacy-pdp__payment-buttons .shopify-payment-button__button,
  .oc-legacy-pdp__payment-buttons .shopify-payment-button__button--unbranded {
    min-height: 46px;
    color: #ffffff;
    font-size: var(--oc-fs-button);
    text-transform: none;
    background: #000000;
    border-radius: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button {
      transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
    }

    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(36, 36, 36, .18);
    }

    .oc-legacy-pdp__swatch-element:not(.is-sold-out) label {
      transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
    }

    .oc-legacy-pdp__swatch-element:not(.is-sold-out) label:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 10px 24px rgba(36, 36, 36, .14);
    }
  }

  .oc-legacy-pdp__payment-buttons .shopify-payment-button__more-options {
    color: #000000;
    font-size: var(--oc-fs-small);
  }

  .oc-legacy-pdp__meta {
    margin: 0;
    padding: 10px 0;
  }

  .oc-legacy-pdp__zoom {
    width: min(92vw, 1200px);
    height: min(92vh, 1000px);
    padding: 40px;
    overflow: hidden;
    background: #ffffff;
    border: 0;
  }

  .oc-legacy-pdp__zoom::backdrop { background: rgba(0, 0, 0, 0.72); }

  .oc-legacy-pdp__zoom form {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 2;
  }

  .oc-legacy-pdp__zoom button {
    color: #000000;
    font-size: 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
  }

  .oc-legacy-pdp__zoom img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .oc-legacy-pdp__description ul.tabs {
    margin: 0 0 20px;
    padding: 0;
    font-size: var(--oc-fs-small);
  }

  .oc-legacy-pdp__description ul.tabs li {
    display: inline-block;
    margin-right: 20px;
    list-style: none;
  }

  .oc-legacy-pdp__description ul.tabs a {
    display: block;
    padding: 0 30px 10px 0;
  }

  .oc-legacy-pdp__description ul.tabs a:hover,
  .oc-legacy-pdp__description ul.tabs a.active {
    text-decoration: underline;
  }

  /* ==========================================================================
     THE APPROVED BUY COLUMN - premium N99 singles only.
     One flex column on a 16px rhythm: kicker, title, AQI tease, price + living
     line, includes well, quantity + Add to Bag, renew filters, trust chips.
     Every other family keeps the column it already had, so these rules all hang
     off the .is-premium-n99 root the same way the family classes already do.
     ========================================================================== */
  .is-premium-n99 .oc-legacy-pdp__details {
    gap: 16px;
    padding: clamp(28px, 3.4vw, 48px);
  }

  .is-premium-n99 .oc-legacy-pdp__eyebrow,
  .is-premium-n99 .oc-legacy-pdp__title,
  .is-premium-n99 .oc-legacy-pdp__unit-price,
  .is-premium-n99 .oc-legacy-pdp__swatch {
    margin-bottom: 0;
  }

  .is-premium-n99 .oc-legacy-pdp__offer,
  .is-premium-n99 .oc-legacy-pdp__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .is-premium-n99 .oc-legacy-pdp__swatch-items {
    gap: 8px;
  }

  .is-premium-n99 .oc-legacy-pdp__swatch-element {
    margin: 0;
  }

  /* The AQI tease. Shipped hidden; the script un-hides it only on a real reading.
     FULL-COLOUR BAND GLASS (21 Aug 2026): the cell IS the meter colour, frosted —
     the same language as the Air Check card on the homepage, which sets
     --aircheck-status to the API's own band colour and derives its surface from it
     with color-mix(). Here the script sets --oc-aqi-tint from `current.color` on
     the same payload, so the pill moves across all six bands with the meter
     instead of sitting in a fixed white frost.

     The tint is NOT trustworthy for contrast on its own: the Moderate band is pure
     #FFFF00 (luminance .89) while Very Poor is near-black maroon. So the script
     also measures the blended surface luminance and stamps data-aqi-ink, exactly
     as the Air Check ink switcher does, and the ink flips rather than being fixed.

     Before a reading arrives --oc-aqi-tint is unset and the pill falls back to the
     neutral white frost the rest of the buy column uses — never a guessed colour. */
  .oc-legacy-pdp__aqi {
    --oc-aqi-fill: color-mix(in srgb, var(--oc-aqi-tint, #ffffff) 82%, transparent);
    --oc-aqi-deep: color-mix(in srgb, var(--oc-aqi-tint, #c9cec4) 60%, #10130f);
    display: inline-flex;
    gap: 8px;
    align-items: center;
    width: fit-content;
    padding: 8px 14px;
    color: #14171C;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    text-decoration: none;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%),
      var(--oc-aqi-fill);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--oc-aqi-deep) 26%, transparent);
    transition: background-color 320ms var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  /* No reading yet: the neutral frost the other chips in this column wear. */
  .oc-legacy-pdp__aqi:not([style*="--oc-aqi-tint"]) {
    background: rgba(255, 255, 255, .38);
    box-shadow: none;
  }

  /* Ink flips on measured luminance, so pure yellow and deep maroon both read. */
  .oc-legacy-pdp__aqi[data-aqi-ink="light"] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .34);
  }

  .oc-legacy-pdp__aqi[hidden] {
    display: none;
  }

  .oc-legacy-pdp__aqi-band {
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--oc-aqi-tint, #C1C1C2);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .92);
  }

  /* Browsers without color-mix() get the raw band colour rather than no colour. */
  @supports not (background: color-mix(in srgb, #000 50%, transparent)) {
    .oc-legacy-pdp__aqi {
      background: var(--oc-aqi-tint, rgba(255, 255, 255, .38));
      box-shadow: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-legacy-pdp__aqi {
      background: var(--oc-aqi-tint, rgba(255, 255, 255, .92));
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-pdp__aqi {
      background: var(--oc-aqi-tint, rgba(255, 255, 255, .92));
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-legacy-pdp__aqi {
      transition: none;
    }
  }

  .is-premium-n99 .oc-legacy-pdp__pricing {
    gap: 0 12px;
  }

  .is-premium-n99 .oc-legacy-pdp__price {
    width: auto;
  }

  .oc-legacy-pdp__price-note {
    color: #545C6A;
    font-size: var(--oc-fs-small);
  }

  .oc-legacy-pdp__living {
    margin: 0;
    color: #454C56;
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  .oc-legacy-pdp__living[hidden] {
    display: none;
  }

  .oc-legacy-pdp__includes {
    padding: 14px 16px;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 16px;
  }

  .oc-legacy-pdp__includes p {
    margin: 0;
    color: #14171C;
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  .oc-legacy-pdp__includes p + p {
    margin-top: 8px;
  }

  .oc-legacy-pdp__includes-rule {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
  }

  /* The 21-day dial: a ring with the used arc filled. Decorative, no text of its own. */
  .oc-legacy-pdp__includes-rule::before {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
    background: conic-gradient(#14171C 0 62%, transparent 62% 100%);
    border: 2px solid #14171C;
    border-radius: 50%;
    content: "";
  }

  .is-premium-n99 .oc-legacy-pdp__qty-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
  }

  /* The stepper reads as a stepper; the label stays for screen readers only. */
  .is-premium-n99 .oc-legacy-pdp__quantity-field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .is-premium-n99 .oc-legacy-pdp__quantity {
    width: 122px;
    margin-bottom: 0;
  }

  .is-premium-n99 .oc-legacy-pdp__quantity input {
    height: 48px;
    padding: 12px 44px;
    color: #14171C;
    font-weight: var(--oc-w-semibold);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .is-premium-n99 .oc-legacy-pdp__quantity button {
    width: 44px;
    color: #14171C;
    font-size: 18px;
    font-weight: var(--oc-w-semibold);
    opacity: 1;
  }

  .is-premium-n99 .oc-legacy-pdp__payment-buttons {
    display: block;
    flex: 1;
    margin-top: 0;
  }

  .is-premium-n99 .oc-legacy-pdp__add {
    width: 100%;
    max-width: none;
  }

  /* Express checkout stacks UNDER Add to Bag rather than beside it, so the approved
     buy column still reads with one primary action first and the wallet buttons as
     the secondary path. The wrapper is display:block here, so they stack on their
     own; this only buys the gap. */
  .is-premium-n99 .oc-legacy-pdp__payment-buttons .shopify-payment-button {
    width: 100%;
    max-width: none;
    margin-top: 10px;
  }

  .is-premium-n99 .oc-legacy-pdp__payment-buttons .shopify-payment-button__button {
    width: 100%;
    border-radius: var(--oxg-radius-pill, 999px);
  }

  .oc-legacy-pdp__add-price {
    font-variant-numeric: tabular-nums lining-nums;
  }

  .oc-legacy-pdp__add-price[hidden] {
    display: none;
  }

  .is-premium-n99 .oc-legacy-pdp__renew {
    margin-top: 0;
  }

  .oc-legacy-pdp__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .oc-legacy-pdp__trust .oc-legacy-pdp__fact-chip {
    background: rgba(255, 255, 255, .38);
    border-color: rgba(255, 255, 255, .58);
    box-shadow: none;
  }

  @media screen and (max-width: 989px) {
    .oc-legacy-pdp__product {
      grid-template-columns: 1fr;
    }

    .oc-legacy-pdp__stage {
      min-height: 330px;
    }
  }

  @media screen and (max-width: 479px) {
    .oc-legacy-pdp__thumbnails {
      display: none;
    }

    .oc-legacy-pdp__dots {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      justify-content: center;
    }
  }

  @media screen and (max-width: 1199px) {
    .oc-legacy-pdp__payment-buttons {
      display: block;
    }

    .oc-legacy-pdp__add,
    .oc-legacy-pdp__payment-buttons .shopify-payment-button {
      width: 100%;
    }
  }

  @media screen and (max-width: 767px) {
    .oc-legacy-pdp__fact-chips {
      top: 26px;
      left: 26px;
    }

    .oc-legacy-pdp__product {
      display: block;
    }

    .oc-legacy-pdp__gallery {
      margin-bottom: 0;
      padding: 16px;
    }

    .oc-legacy-pdp__sticky.is-sticky {
      position: static;
    }

    .oc-legacy-pdp__details,
    .is-premium-n99 .oc-legacy-pdp__details {
      padding: 20px 18px 28px;
      border-radius: 0;
    }

    .oc-legacy-pdp__sale-badge {
      border-radius: 24px 24px 0 0;
    }

    .oc-legacy-pdp__payment-buttons {
      display: flex;
    }

    .oc-legacy-pdp__add,
    .oc-legacy-pdp__payment-buttons .shopify-payment-button {
      width: 50%;
    }
  }

  @media screen and (max-width: 480px) {
    .oc-legacy-pdp__gallery {
      display: block;
    }

    .oc-legacy-pdp__details,
    .is-premium-n99 .oc-legacy-pdp__details {
      padding: 20px 14px 26px;
    }

    /* Too narrow for a stepper beside a full-width button: the button takes its
       own line, the stepper keeps the one above. */
    .is-premium-n99 .oc-legacy-pdp__qty-row {
      flex-wrap: wrap;
    }

    .is-premium-n99 .oc-legacy-pdp__payment-buttons {
      flex-basis: 100%;
    }

    .oc-legacy-pdp__proof {
      grid-template-columns: 1fr;
    }

    .oc-legacy-pdp__thumbnails {
      display: none;
    }

    .oc-legacy-pdp__dots {
      display: flex;
      gap: 12px;
      justify-content: center;
      padding: 16px 0;
    }

    /* 44px touch target; the visible dot is the ::after. */
    .oc-legacy-pdp__dot {
      position: relative;
      width: 44px;
      height: 44px;
      margin: 0;
      padding: 0;
      cursor: pointer;
      background: transparent;
      border: 0;
    }

    .oc-legacy-pdp__dot::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      content: "";
      background: rgba(255, 255, 255, .9);
      border: 1px solid rgba(20, 23, 28, .3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .oc-legacy-pdp__dot.is-active::after {
      background: #14171C;
      border-color: #14171C;
    }

    .oc-legacy-pdp__dot.is-active {
      background: transparent;
    }

    .oc-legacy-pdp__payment-buttons {
      display: block;
    }

    .oc-legacy-pdp__add,
    .oc-legacy-pdp__payment-buttons .shopify-payment-button {
      width: 100%;
      max-width: 300px;
    }

    .oc-legacy-pdp__swatch-element {
      margin-bottom: 10px;
    }

    .oc-legacy-pdp__swatch-element.is-color {
      margin-bottom: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-legacy-pdp__tooltip { transition: none; }

    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button,
    .oc-legacy-pdp__swatch-element label,
    .oc-legacy-pdp__payment-buttons .shopify-payment-button__button:hover,
    .oc-legacy-pdp__swatch-element:not(.is-sold-out) label:hover,
    .oc-legacy-pdp__renew,
    .oc-legacy-pdp__renew:hover {
      transition: none;
      transform: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-pdp__product {
      background: rgba(255, 255, 255, .92);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .oc-legacy-pdp__details,
    .oc-legacy-pdp.is-premium-product .oc-legacy-pdp__details,
    .oc-legacy-pdp__quantity,
    .oc-legacy-pdp__variant-select,
    .oc-legacy-pdp__swatch-element label,
    .oc-legacy-pdp.is-premium-product .oc-legacy-pdp__proof div,
    .oc-legacy-pdp__crumb,
    .oc-legacy-pdp__aqi,
    .oc-legacy-pdp__includes,
    .oc-legacy-pdp__renew,
    .oc-legacy-pdp__trust .oc-legacy-pdp__fact-chip {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-legacy-pdp__product {
      background: rgba(255, 255, 255, .92);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .oc-legacy-pdp__details,
    .oc-legacy-pdp.is-premium-product .oc-legacy-pdp__details,
    .oc-legacy-pdp__quantity,
    .oc-legacy-pdp__variant-select,
    .oc-legacy-pdp__swatch-element label,
    .oc-legacy-pdp.is-premium-product .oc-legacy-pdp__proof div,
    .oc-legacy-pdp__crumb,
    .oc-legacy-pdp__aqi,
    .oc-legacy-pdp__includes,
    .oc-legacy-pdp__renew,
    .oc-legacy-pdp__trust .oc-legacy-pdp__fact-chip {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
/* END_SECTION:oxiclear-legacy-product-template */

/* START_SECTION:oxiclear-legacy-recently-viewed (INDEX:63) */
/* The carousel and card rules below used to live in
     sections/oxiclear-legacy-product-recommendations.liquid. That section became a
     static frost grid on 21 Aug 2026 (band 06 of the approved PDP mockup), which
     left this section as their only consumer, so they moved here with it. */
  .oc-legacy-pdp-carousel-wrap {
    position: relative;
    left: 50%;
    width: min(1660px, calc(100vw - 60px));
    padding: 30px 0;
    color: #000000;
    transform: translateX(-50%);
  }

  .oc-legacy-pdp-carousel__title {
    position: relative;
    padding-bottom: 10px;
    text-align: center;
  }

  .oc-legacy-pdp-carousel__title h2 {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 0 10px;
    padding-bottom: 10px;
    color: #000000;
    text-align: center;
    text-transform: none;
  }

  .oc-legacy-pdp-carousel__title h2::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 35px;
    height: 3px;
    margin: auto;
    content: "";
    background: #e1e1e1;
  }

  .oc-legacy-pdp-carousel__viewport {
    position: relative;
  }

  .oc-legacy-pdp-carousel__track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .oc-legacy-pdp-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .oc-legacy-pdp-carousel__item {
    flex: 0 0 25%;
    min-width: 0;
    padding: 0 15px;
    scroll-snap-align: start;
  }

  .oc-legacy-pdp-card {
    position: relative;
    color: #000000;
    text-align: center;
  }

  .oc-legacy-pdp-card a {
    color: #000000;
  }

  .oc-legacy-pdp-card__image-wrap {
    position: relative;
    overflow: hidden;
  }

  .oc-legacy-pdp-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
  }

  .oc-legacy-pdp-card__image img,
  .oc-legacy-pdp-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
  }

  .oc-legacy-pdp-card__title {
    margin: 0;
    font-weight: var(--oc-w-semibold);
    text-align: center;
  }

  .oc-legacy-pdp-card__price {
    margin: 5px 0 0;
    text-align: center;
  }

  .oc-legacy-pdp-card__price s {
    margin-right: 3px;
  }

  .oc-legacy-pdp-card__sale-price {
    color: #f26c4f;
  }

  .oc-legacy-pdp-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 10px 20px;
    color: #ffffff;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
    text-transform: uppercase;
    background: #000000;
  }

  .oc-legacy-pdp-carousel__arrow {
    position: absolute;
    top: calc(50% - 40px);
    z-index: 3;
    display: grid;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    place-items: center;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    background: #000000;
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    transition: transform 0.2s ease;
  }

  .oc-legacy-pdp-carousel__arrow:hover {
    transform: scale(1);
  }

  .oc-legacy-pdp-carousel__arrow.is-previous { left: -35px; }
  .oc-legacy-pdp-carousel__arrow.is-next { right: -35px; }

  @media screen and (max-width: 767px) {
    .oc-legacy-pdp-carousel-wrap {
      width: calc(100vw - 30px);
    }

    .oc-legacy-pdp-carousel__item {
      flex-basis: 50%;
    }

    .oc-legacy-pdp-carousel__arrow.is-previous { left: -25px; }
    .oc-legacy-pdp-carousel__arrow.is-next { right: -25px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-legacy-pdp-carousel__track { scroll-behavior: auto; }
    .oc-legacy-pdp-carousel__arrow { transition: none; }
  }
/* END_SECTION:oxiclear-legacy-recently-viewed */

/* START_SECTION:oxiclear-legacy-search (INDEX:64) */
.legacy-search {
    padding: 60px 30px;
    background: #ffffff;
    color: #000000;
  }

  .legacy-search__inner {
    width: min(100%, 780px);
    margin: 0 auto;
  }

  .legacy-search__header {
    margin: 0 auto 30px;
    text-align: center;
  }

  .legacy-search__header h1 {
    margin: 0;
  }

  .legacy-search__form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    width: min(100%, 760px);
    margin: 0 auto 45px;
  }

  .legacy-search__form input {
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #d6d6d6;
    border-radius: 0;
    color: #000000;
    background: #ffffff;
  }

  .legacy-search__form .btn {
    min-width: 110px;
    border-radius: 0;
    background: #000000;
    color: #ffffff;
  }

  .legacy-search__result {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    gap: 30px;
    padding: 30px 0;
    border-bottom: 1px solid #e1e1e1;
  }

  .legacy-search__image {
    display: block;
  }

  .legacy-search__image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .legacy-search__content--full {
    grid-column: 1 / -1;
  }

  .legacy-search__content h2 {
    margin: 0 0 12px;
    font-size: var(--oc-fs-card);
  }

  .legacy-search__content a {
    color: inherit;
    text-decoration: none;
  }

  .legacy-search__price {
    margin: 0 0 12px;
  }

  .legacy-search__price s {
    margin-right: 8px;
    color: #777777;
  }

  .legacy-search__price .sale-price {
    color: #f26c4f;
  }

  @media screen and (max-width: 767px) {
    .legacy-search {
      padding: 40px 20px;
    }

    .legacy-search__form {
      grid-template-columns: 1fr;
    }

    .legacy-search__result {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .legacy-search__content--full {
      grid-column: auto;
    }
  }
/* END_SECTION:oxiclear-legacy-search */

/* START_SECTION:oxiclear-legacy-shop-tabs (INDEX:65) */
/* [1] */

  /* [2] */
  .oc-legacy-shop {
    color: #000;
    background: transparent;
  }

  .oc-legacy-shop *,
  .oc-legacy-shop *::before,
  .oc-legacy-shop *::after {
    box-sizing: border-box;
  }

  /* Page gutter and section rhythm (home). Caps at 1240px, not the old 1170px. */
  .oc-legacy-shop__inner {
    width: min(calc(100% - var(--oc-space-page, clamp(16px, 4vw, 64px)) - var(--oc-space-page, clamp(16px, 4vw, 64px))), 1240px);
    margin: 0 auto;
    padding: 0 0 var(--oc-space-section, clamp(56px, 7vw, 108px));
  }

  /* [3] */
  .oc-legacy-shop__header {
    margin: 0 0 clamp(30px, 4vw, 50px);
    text-align: left;
  }

  /* [4] */
  .oc-legacy-shop__kicker {
    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;
  }

  .oc-legacy-shop__header h2 {
    margin: 0;
    color: #1a1e1c;                               /* dock */
    text-transform: none;
    text-wrap: balance;                           /* foundation */
    white-space: normal;                          /* dock */
  }

  /* [5] */
  .oc-legacy-shop__dots {
    display: none;
    margin-top: 8px;                              /* home */
    color: var(--oc-color-focus, #1CB142);        /* home */
    font-size: 22px;
    letter-spacing: .22em;                        /* home */
    line-height: 1;
  }

  .oc-legacy-shop__header p {
    display: none;
  }

  /* [6] */
  .oc-legacy-shop__desktop {
    display: block;
    padding: clamp(16px, 2vw, 22px);
    border-radius: var(--oxg-radius-xl, 30px);
    background: transparent;
  }

  /* [7] */
  .oc-legacy-shop__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;          /* commerce */
    scroll-padding-inline: 6px;
    scroll-snap-type: inline proximity;
    border: 1px solid rgba(255, 255, 255, .7);    /* glass */
    border-radius: var(--oc-radius-pill, 999px);
    background: rgba(228, 230, 226, .72);         /* glass */
    scrollbar-width: none;
  }

  .oc-legacy-shop__tabs::-webkit-scrollbar {
    display: none;
  }

  .oc-legacy-shop__tab {
    min-width: max-content;
    min-height: 46px;
    flex: 0 1 auto;                               /* glass — load-bearing for the one-row rail */
    margin: 0;
    padding: 9px 16px;                            /* glass */
    color: #3d443f;                               /* glass */
    /* 1px transparent border, not 0: the selected state adds a border, and at 0 width
       that would shift every tab by 2px when the selection moves. */
    border: 1px solid transparent;
    border-radius: var(--oc-radius-pill, 999px);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);              /* glass */
    letter-spacing: var(--oc-tr-body);
    line-height: var(--oc-lh-small);
    scroll-snap-align: start;
    white-space: nowrap;
    transition:
      background-color var(--oc-duration-fast, 160ms) ease,
      box-shadow var(--oc-duration-base, 260ms) ease,
      color var(--oc-duration-fast, 160ms) ease,
      transform var(--oc-duration-fast, 160ms) ease;
  }

  /* [8] */
  .oc-legacy-shop :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px;
    box-shadow: none;
  }

  /* The selected tab was near-opaque white (.97) with no blur, which is why this band
     read as flat next to the rest of the page. The mockup draws it at .75 over a
     frosted panel. */
  .oc-legacy-shop__tab[aria-selected="true"] {
    color: #15181b;
    border-color: rgba(255, 255, 255, .95);
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .05);
  }

  /* [9] */
  .oc-legacy-shop__tab:hover:not([aria-selected="true"]) {
    color: #15181b;
    background: rgba(255, 255, 255, .4);
  }

  .oc-legacy-shop__panel {
    padding: clamp(28px, 4vw, 58px) 0 0;          /* home */
  }

  .oc-legacy-shop__panel[hidden] {
    display: none;
  }

  .oc-legacy-shop__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);                  /* home */
  }

  /* [10] */
  .oc-legacy-shop__grid[data-card-count="1"] {
    grid-template-columns: minmax(0, 286px);
    justify-content: center;
  }

  .oc-legacy-shop__grid[data-card-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 286px));
    justify-content: center;
  }

  .oc-legacy-shop__grid[data-card-count="3"],
  .oc-legacy-shop__grid[data-card-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 286px));
    justify-content: center;
  }

  .oc-legacy-shop__empty {
    display: grid;
    min-height: clamp(220px, 24vw, 300px);        /* home */
    grid-column: 1 / -1;
    gap: 6px;
    place-content: center;
    padding: 32px;
    color: #666;
    border: 1px solid rgba(225, 225, 225, .82);   /* home */
    border-radius: var(--oc-radius-card, 22px);   /* home */
    background: rgba(255, 255, 255, .76);         /* home */
    box-shadow: var(--oc-shadow-card, 0 18px 45px rgba(36, 36, 36, .09), 0 2px 8px rgba(36, 36, 36, .05));
    text-align: center;
  }

  .oc-legacy-shop__empty strong {
    color: #242424;
    font-size: var(--oc-fs-card);
  }

  @media (min-width: 1200px) {
    /* [11] */
    .oc-legacy-shop__grid--five {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .oc-legacy-shop__grid--seven {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .oc-legacy-shop__grid--seven > * {
      grid-column: span 2;
    }

    .oc-legacy-shop__grid--seven > :nth-child(5) {
      grid-column: 2 / span 2;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    /* [12] */
    .oc-legacy-shop__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* [13] */
    .oc-legacy-shop__grid--five {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .oc-legacy-shop__grid--five > * {
      grid-column: span 2;
    }

    .oc-legacy-shop__grid--five > :nth-child(4) {
      grid-column: 2 / span 2;
    }

    .oc-legacy-shop__grid--seven {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .oc-legacy-shop__grid--seven > * {
      grid-column: span 2;
    }

    .oc-legacy-shop__grid--seven > :nth-child(7) {
      grid-column: 3 / span 2;
    }

    /* Tab rail left-aligns in the range where it wraps to two rows (home). */
    .oc-legacy-shop__tabs {
      justify-content: flex-start;
    }
  }

  /* [14] */
  .oc-legacy-shop-card {
    position: relative;                           /* commerce */
    display: flex;                                /* home */
    min-width: 0;
    min-height: 100%;                             /* home */
    flex-direction: column;                       /* home */
    overflow: hidden;                             /* home */
    padding: 14px 14px 18px;
    border: 1px solid var(--oc-color-line, #e1e1e1);   /* commerce */
    border-radius: 18px;                          /* commerce */
    background: rgba(255, 255, 255, .92);         /* home */
    box-shadow: 0 12px 34px rgba(0, 0, 0, .06);   /* commerce */
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  /* [15] */
  .oc-legacy-shop-card__media {
    display: grid;
    width: 100%;
    min-height: 0;                                /* [16] */
    aspect-ratio: 1 / 1;                          /* commerce + home */
    overflow: hidden;
    place-items: center;
    padding: clamp(10px, 1.5vw, 20px);            /* home */
    border-radius: 21px 21px 0 0;                 /* foundation */
    background: #f3f3f3;                          /* commerce */
  }

  .oc-legacy-shop-card__image,
  .oc-legacy-shop-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 260ms ease;             /* commerce */
  }

  .oc-legacy-shop-card__copy {
    display: flex;                                /* home */
    flex: 1 1 auto;                               /* home */
    flex-direction: column;                       /* home */
    padding: 18px 18px 22px;                      /* home */
    text-align: left;                             /* home */
  }

  .oc-legacy-shop-card__copy h3 {
    margin: 0;
    font-size: var(--oc-fs-card);
    line-height: var(--oc-lh-card);
  }

  .oc-legacy-shop-card__copy h3 a {
    color: #242424;
    text-decoration: none;
  }

  /* Price is pinned to the bottom of the copy column and left-aligned (home). */
  .oc-legacy-shop-card__price {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: flex-start;
    margin: auto 0 0;
    padding-top: 12px;
  }

  .oc-legacy-shop-card__price s {
    color: #8a8a8a;
  }

  .oc-legacy-shop-card__price strong {
    color: #1CB142;
    font-weight: var(--oc-w-bold);
  }

  /* [17] */
  .oc-legacy-shop-card__form {
    margin: 13px 0 0;
  }

  a.oc-legacy-shop-card__add {
    margin-top: 12px;
  }

  .oc-legacy-shop-card__add {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 10px;
    color: var(--oc-action-primary-text, #07270b);
    border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55));
    border-radius: 999px;
    background: var(--oc-action-primary-background, rgba(28, 177, 66, .2));
    box-shadow: var(--oc-action-shadow, 0 10px 22px rgba(7, 39, 11, .1), 0 2px 8px rgba(28, 177, 66, .14));
    cursor: pointer;
    font: inherit;
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-button);
    text-align: center;
    text-decoration: none;
    transition:
      background-color 160ms ease,
      transform 160ms ease,
      box-shadow 260ms var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oc-legacy-shop-card__add:active {
    box-shadow: 0 4px 10px rgba(7, 39, 11, .12);
    transform: translateY(1px) scale(.985);
  }

  .oc-legacy-shop-card__add[disabled] {
    cursor: default;
    opacity: .65;
    transform: none;
  }

  /* Neutral, but still glass - it used to be a flat white-grey lozenge with no frost,
     which made a sold-out card look like it belonged to a different site. */
  .oc-legacy-shop-card__add--soldout {
    color: #3d443f;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .38);
    box-shadow: none;
  }

  /* [18] */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-legacy-shop-card {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .oc-legacy-shop-card__add {
      background: #ffffff;
    }

    .oc-legacy-shop-card__add--soldout {
      background: #eef0ec;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-shop-card__add {
      background: #ffffff;
    }

    .oc-legacy-shop-card__add--soldout {
      background: #eef0ec;
    }
  }

  .oc-legacy-shop-card__availability {
    margin: auto 0 0;                             /* home */
    padding-top: 12px;                            /* home */
    color: #666;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
  }

  /* [19] */
  .oc-legacy-shop__more {
    display: inline-flex;                         /* foundation */
    width: fit-content;
    min-height: var(--oc-action-height, 48px);    /* actions */
    align-items: center;                          /* foundation */
    justify-content: center;                      /* foundation */
    margin: 34px auto 0;
    padding: 12px 24px;                           /* actions */
    color: var(--oc-action-primary-text, #07270b);
    border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55));
    border-radius: var(--oc-action-radius, 999px);
    background: var(--oc-action-primary-background, rgba(28, 177, 66, .2));
    box-shadow: var(--oc-action-shadow, 0 10px 26px rgba(7, 39, 11, .12), 0 2px 10px rgba(28, 177, 66, .16));
    cursor: pointer;
    appearance: none;
    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;
    transition:
      background-color var(--oc-duration-fast, 160ms) ease,
      border-color var(--oc-duration-fast, 160ms) ease,
      box-shadow var(--oc-duration-base, 260ms) var(--oc-ease-fluid, cubic-bezier(.22, .72, .22, 1)),
      color var(--oc-duration-fast, 160ms) ease,
      transform var(--oc-duration-fast, 160ms) ease;
  }

  /* Kept outside @media (hover: hover) because that is where the actions layer had
     it; guarding it now would change touch behaviour. See risks. */
  .oc-legacy-shop__more:hover {
    color: var(--oc-action-primary-text, #07270b);
    border-color: var(--oc-action-primary-border-hover, rgba(28, 177, 66, .75));
    background: var(--oc-action-primary-background-hover, rgba(28, 177, 66, .32));
    box-shadow: var(--oc-action-shadow-hover, 0 12px 30px rgba(7, 39, 11, .14), 0 4px 16px rgba(28, 177, 66, .30));
    transform: translateY(-1px);
  }

  .oc-legacy-shop__more:active {
    box-shadow: none;
    transform: translateY(1px) scale(.985);
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-legacy-shop__tab:hover {
      transform: translateY(-2px);
    }

    /* [20] */
    .oc-legacy-shop-card:focus-within {
      transform: translateY(-4px);
    }

    .oc-legacy-shop-card:hover {
      border-color: #5fd75c;                      /* commerce --oc-commerce-accent-soft */
      box-shadow: 0 24px 64px rgba(0, 0, 0, .13); /* commerce --oc-commerce-shadow-hover */
      transform: translateY(-3px);                /* commerce */
    }

    .oc-legacy-shop-card:focus-within .oc-legacy-shop-card__image,
    .oc-legacy-shop-card:focus-within .oc-legacy-shop-card__placeholder {
      transform: scale(1.025);                    /* custom */
    }

    .oc-legacy-shop-card:hover .oc-legacy-shop-card__image,
    .oc-legacy-shop-card:hover .oc-legacy-shop-card__placeholder {
      transform: scale(1.035);                    /* foundation */
    }

    .oc-legacy-shop-card__add:hover {
      color: var(--oc-action-primary-text, #07270b);
      background: var(--oc-action-primary-background-hover, rgba(28, 177, 66, .32));
      box-shadow: var(--oc-action-shadow-hover, 0 14px 28px rgba(7, 39, 11, .14), 0 4px 14px rgba(28, 177, 66, .28));
      transform: translateY(-2px);
    }
  }

  .oc-legacy-shop__mobile {
    display: none;
  }

  /* [21] */
  .oc-legacy-shop__accordion summary {
    min-height: 44px;                             /* commerce --oc-commerce-control */
    cursor: pointer;
    transition:
      background-color var(--oc-duration-fast, 160ms) ease,
      color var(--oc-duration-fast, 160ms) ease;
  }

  @media (max-width: 767px) {
    .oc-legacy-shop__desktop {
      display: none;
    }

    .oc-legacy-shop__mobile {
      display: block;
    }

    .oc-legacy-shop__inner {
      width: 100%;                                /* home */
      padding: 16px 12px 68px;                    /* home */
    }

    /* [22] */
    .oc-legacy-shop__accordion {
      margin-bottom: 10px;
      overflow: hidden;
      border: 1px solid var(--oc-color-line, #e1e1e1);
      border-radius: 18px;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 8px 26px rgba(36, 36, 36, .06);
    }

    .oc-legacy-shop__accordion summary {
      position: relative;
      padding: 17px 52px 17px 18px;               /* home — 52px clears the ± marker at right:18px */
      color: #242424;
      background: transparent;
      font-size: var(--oc-fs-small);
      font-weight: var(--oc-w-medium);
      list-style: none;
    }

    .oc-legacy-shop__accordion summary::-webkit-details-marker {
      display: none;
    }

    .oc-legacy-shop__accordion summary::after {
      position: absolute;
      top: 50%;
      right: 18px;
      content: "+";
      font-size: 20px;
      transform: translateY(-50%);
      transition: transform var(--oc-duration-base, 260ms) var(--oc-ease-fluid, cubic-bezier(.22, .72, .22, 1));
    }

    /* Neutral open state (home). The section's old #2563b1 blue never painted. */
    .oc-legacy-shop__accordion[open] summary {
      color: #242424;
      background: #f1f2f3;
    }

    /* [23] */
    .oc-legacy-shop__accordion[open] summary::after {
      content: "−";
      transform: translateY(-50%) rotate(180deg); /* foundation */
    }

    .oc-legacy-shop__accordion .oc-legacy-shop__grid {
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;                   /* home */
      padding: 16px;                              /* home */
    }

    .oc-legacy-shop__accordion .oc-legacy-shop__more {
      margin-bottom: 28px;
    }

    .oc-legacy-shop__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .oc-legacy-shop-card__media {
      max-height: 330px;                          /* home — caps the 1/1 ratio on phones */
    }
  }

  /* [24] */
  @media (max-width: 559px) {
    .oc-legacy-shop__dots {
      font-size: 20px;
    }

    .oc-legacy-shop__grid {
      grid-template-columns: 1fr;
    }
  }

  /* [25] */
  @media (prefers-reduced-motion: reduce) {
    .oc-legacy-shop *,
    .oc-legacy-shop *::before,
    .oc-legacy-shop *::after {
      animation: none;
      scroll-behavior: auto;
      transition: none;
    }

    .oc-legacy-shop__accordion summary,
    .oc-legacy-shop__accordion summary::after {
      transition: none;
    }

    .oc-legacy-shop__tab,
    .oc-legacy-shop-card {
      transform: none;
    }
  }
/* END_SECTION:oxiclear-legacy-shop-tabs */

/* START_SECTION:oxiclear-legacy-story (INDEX:66) */
.oc-legacy-story {
    color: var(--oc-legacy-story-text);
    background: var(--oc-legacy-story-bg);
  }

  .oc-legacy-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    min-height: 330px;
    margin-inline: auto;
    background-color: var(--oc-legacy-story-bg);
    background-image: var(--oxg-wash, radial-gradient(1100px 560px at 12% -8%, rgba(20, 23, 28, .10), transparent 60%), radial-gradient(900px 520px at 108% 26%, rgba(20, 23, 28, .06), transparent 55%)), var(--oc-legacy-story-background-image);
    background-position: var(--oc-legacy-story-background-position);
    background-repeat: no-repeat;
    background-size: contain;
  }

  .oc-legacy-story--media-right .oc-legacy-story__media {
    order: 2;
  }

  .oc-legacy-story__media {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 0;
    overflow: hidden;
    background: var(--oc-legacy-story-panel);
  }

  .oc-legacy-story__image,
  .oc-legacy-story__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: var(--oc-legacy-story-image-fit);
  }

  .oc-legacy-story__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: clamp(20px, 3vw, 36px);
    padding: 42px 50px;
    text-align: center;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
    backdrop-filter: blur(var(--oxg-blur, 18px)) saturate(var(--oxg-saturate, 120%));
    -webkit-backdrop-filter: blur(var(--oxg-blur, 18px)) saturate(var(--oxg-saturate, 120%));
  }

  .oc-legacy-story--has-logo .oc-legacy-story__copy {
    align-items: flex-start;
    text-align: left;
  }

  .oc-legacy-story__logo {
    display: block;
    width: 185px;
    height: auto;
    margin: 0 0 22px;
  }

  .oc-legacy-story__eyebrow {
    margin: 0 0 8px;
    color: var(--oc-legacy-story-accent);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-legacy-story__copy h2 {
    max-width: 24ch;
    margin: 0;
    color: var(--oc-legacy-story-text);
  }

  .oc-legacy-story__text {
    max-width: 57ch;
    margin-top: 20px;
    color: var(--oc-legacy-story-muted);
    font-size: var(--oc-fs-body-lg);
  }

  .oc-legacy-story__text p {
    margin: 0 0 12px;
  }

  .oc-legacy-story__text p:last-child {
    margin-bottom: 0;
  }

  .oc-legacy-story__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 28px 0 0;
    border-top: 0;
    border-left: 0;
  }

  .oc-legacy-story__facts div {
    padding: 13px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-md, 16px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: none;
  }

  .oc-legacy-story__facts dt {
    color: var(--oc-legacy-story-muted);
    font-size: var(--oc-fs-small);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-legacy-story__facts dd {
    margin: 5px 0 0;
    color: var(--oc-legacy-story-text);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-semibold);
    line-height: var(--oc-lh-small);
  }

  /* Layout only. The legacy black fill, its 18px/400 type and the #333 hover were
     scrapped on 20 Aug 2026 - every one of those declarations was already losing to
     the button system, so they painted nothing and only made the button harder to
     read. Fill, frost, radius and hover come from
     snippets/oxiclear-facelift-actions.liquid; the type comes from
     snippets/oxiclear-type.liquid. */
  .oc-legacy-story__button {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    margin-top: 20px;
    text-decoration: none;
  }

  .oc-legacy-story__button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .oc-legacy-story__button {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .oc-legacy-story__inner {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    .oc-legacy-story--media-right .oc-legacy-story__media {
      order: 2;
    }

    .oc-legacy-story__media {
      min-height: 0;
      padding: 0;
    }

    .oc-legacy-story__copy {
      margin: 16px 16px 30px;
      padding: 26px 24px 30px;
      border-radius: 24px;
    }

    .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media {
      padding-bottom: 30px;
    }

    .oc-legacy-story--has-logo .oc-legacy-story__copy {
      padding-top: 22px;
    }

    .oc-legacy-story--has-logo .oc-legacy-story__logo {
      width: 150px;
    }
  }

  @media (max-width: 560px) {
    .oc-legacy-story__media {
      min-height: 0;
      padding: 0;
    }

    .oc-legacy-story__copy {
      padding-right: 24px;
      padding-bottom: 30px;
      padding-left: 24px;
    }

    .oc-legacy-story__facts {
      grid-template-columns: 1fr;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-legacy-story__copy,
    .oc-legacy-story__facts div {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-story__copy,
    .oc-legacy-story__facts div {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
/* END_SECTION:oxiclear-legacy-story */

/* START_SECTION:oxiclear-legacy-technical-page (INDEX:67) */
.oxiclear-legacy-technical {
    color: #070707;
    background:
      var(--oxg-wash,
        radial-gradient(1100px 560px at 12% -8%, rgba(20, 23, 28, .10), transparent 60%),
        radial-gradient(900px 520px at 108% 26%, rgba(20, 23, 28, .06), transparent 55%));
    background-color: #f6f9f9;
  }

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

  .oxiclear-legacy-technical__2020-container {
    width: min(100%, 1170px);
    margin: 0 auto;
    padding: 15px;
  }

  .oxiclear-legacy-technical__2020-banner {
    display: block;
    width: 100%;
    height: auto;
  }

  .oxiclear-legacy-technical__2020-copy,
  .oxiclear-legacy-technical__2020-specifications {
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oxiclear-legacy-technical__2020-copy {
    margin-top: 10px;
  }

  .oxiclear-legacy-technical__2020-copy > h3,
  .oxiclear-legacy-technical__2020-specifications > h3 {
    margin: 1em 0;
  }

  .oxiclear-legacy-technical__2020-test {
    display: flex;
    align-items: center;
  }

  .oxiclear-legacy-technical__2020-test img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    flex: 0 0 300px;
    object-fit: contain;
  }

  .oxiclear-legacy-technical__2020-test p {
    display: inline-block;
  }

  .oxiclear-legacy-technical__2020-test--viral img {
    margin-right: 20px;
  }

  .oxiclear-legacy-technical__2020-test--carbon p {
    margin: 150px 0 80px 20px;
  }

  .oxiclear-legacy-technical__2020-specifications h3 {
    text-decoration: none;
  }

  .oxiclear-legacy-technical__report--2020 a {
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    color: #ffffff;
    background: rgba(119, 211, 210, .92);
    box-shadow: 0 12px 28px rgba(36, 36, 36, .10);
    font-size: var(--oc-fs-button);
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oxiclear-legacy-technical__report--2020 a:hover {
    color: #ffffff;
    background: rgba(119, 211, 210, .92);
  }

  .oxiclear-legacy-technical > .oxiclear-legacy-divider {
    width: 100%;
    margin-left: 0;
  }

  .oxiclear-legacy-technical__banner {
    min-height: 436px;
    background-image: var(--legacy-technical-banner);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .oxiclear-legacy-technical > h1 {
    margin: 30px 20px;
    text-align: center;
  }

  .oxiclear-legacy-technical__intro {
    display: grid;
    grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
    align-items: center;
    gap: 50px;
    padding-inline: clamp(15px, 2vw, 30px);
  }

  .oxiclear-legacy-technical__drawing {
    min-height: 433px;
    background-image: var(--legacy-technical-drawing);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* Phone rendition (24 Aug 2026), same idiom as the benefits bands and the FAQ
     banner. Box here is 328x300 CSS px on a 390px phone, contained, so 656 device
     px at 2x and 800 covers it. The smallest of the three wins by far: 22 KB -> 17 KB
     measured on the live CDN. Kept anyway so no instance of the full-resolution
     background pattern is left behind to be copied. */
  @media (max-width: 440px) {
    .oxiclear-legacy-technical__drawing {
      background-image: var(--legacy-technical-drawing-phone, var(--legacy-technical-drawing));
    }
  }

  .oxiclear-legacy-technical__intro > div:last-child {
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oxiclear-legacy-technical > h2 {
    width: min(1170px, calc(100% - 30px));
    margin: 40px auto 30px;
  }

  .oxiclear-legacy-technical__tabs,
  .oxiclear-legacy-technical__specifications {
    width: min(1170px, calc(100% - 30px));
    margin: 0 auto;
  }

  .oxiclear-legacy-technical__tabs > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .oxiclear-legacy-technical__tab-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 16px);
    margin-bottom: 18px;
  }

  .oxiclear-legacy-technical__tab-list label {
    display: grid;
    place-items: center;
    min-height: 78px;
    padding: 20px 24px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    color: #000;
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 10px 26px rgba(36, 36, 36, .06);
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    text-align: center;
    cursor: pointer;
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  #LegacyTechnicalDrdo:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalDrdo"],
  #LegacyTechnicalViral:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalViral"],
  #LegacyTechnicalCarbon:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalCarbon"] {
    background: rgba(105, 207, 209, .60);
    box-shadow: 0 14px 30px rgba(105, 207, 209, .32);
  }

  #LegacyTechnicalDrdo:focus-visible ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalDrdo"],
  #LegacyTechnicalViral:focus-visible ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalViral"],
  #LegacyTechnicalCarbon:focus-visible ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalCarbon"] {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oxiclear-legacy-technical__panel {
    display: none;
    grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr);
    align-items: center;
    gap: 30px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oxiclear-legacy-technical__panel--drdo {
    grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr);
  }

  #LegacyTechnicalDrdo:checked ~ .oxiclear-legacy-technical__panels .oxiclear-legacy-technical__panel--drdo,
  #LegacyTechnicalViral:checked ~ .oxiclear-legacy-technical__panels .oxiclear-legacy-technical__panel--viral,
  #LegacyTechnicalCarbon:checked ~ .oxiclear-legacy-technical__panels .oxiclear-legacy-technical__panel--carbon {
    display: grid;
  }

  .oxiclear-legacy-technical__panel img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 390px;
    object-fit: contain;
  }

  .oxiclear-legacy-technical__specifications {
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oxiclear-legacy-technical__report {
    margin: 35px 0 60px;
    text-align: center;
  }

  .oxiclear-legacy-technical__report a {
    display: inline-block;
    padding: 20px 40px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    color: #000;
    background: rgba(105, 207, 209, .92);
    box-shadow: 0 12px 28px rgba(36, 36, 36, .10);
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    text-decoration: none;
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oxiclear-legacy-technical__report a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .oxiclear-legacy-technical__tab-list label:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(36, 36, 36, .10);
    }

    .oxiclear-legacy-technical__report a:hover,
    .oxiclear-legacy-technical__report--2020 a:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: var(--oxg-shadow-lift, 0 26px 64px rgba(36, 36, 36, .13));
    }
  }

  @media (max-width: 767px) {
    .oxiclear-legacy-technical__2020-test {
      display: block;
    }

    .oxiclear-legacy-technical__2020-test img {
      width: 300px;
      margin-right: 0;
    }

    .oxiclear-legacy-technical__2020-test p,
    .oxiclear-legacy-technical__2020-test--carbon p {
      margin: 0;
    }

    .oxiclear-legacy-technical__2020-specifications h3 {
      text-decoration: underline;
    }

    .oxiclear-legacy-technical__banner {
      min-height: 400px;
    }

    .oxiclear-legacy-technical__intro {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .oxiclear-legacy-technical__drawing {
      min-height: 300px;
    }

    .oxiclear-legacy-technical__intro > div:last-child {
      padding: 22px 18px;
      border-radius: 24px;
    }

    .oxiclear-legacy-technical > h2 {
      width: calc(100% - 32px);
    }

    .oxiclear-legacy-technical__tab-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .oxiclear-legacy-technical__tab-list label {
      min-height: 56px;
      padding: 14px 20px;
    }

    .oxiclear-legacy-technical__panel,
    .oxiclear-legacy-technical__panel--drdo,
    #LegacyTechnicalDrdo:checked ~ .oxiclear-legacy-technical__panels .oxiclear-legacy-technical__panel--drdo,
    #LegacyTechnicalViral:checked ~ .oxiclear-legacy-technical__panels .oxiclear-legacy-technical__panel--viral,
    #LegacyTechnicalCarbon:checked ~ .oxiclear-legacy-technical__panels .oxiclear-legacy-technical__panel--carbon {
      grid-template-columns: minmax(0, 1fr);
    }

    .oxiclear-legacy-technical__panel,
    .oxiclear-legacy-technical__specifications,
    .oxiclear-legacy-technical__2020-copy,
    .oxiclear-legacy-technical__2020-specifications {
      border-radius: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oxiclear-legacy-technical__tab-list label,
    .oxiclear-legacy-technical__report a,
    .oxiclear-legacy-technical__report--2020 a {
      transition: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oxiclear-legacy-technical__intro > div:last-child,
    .oxiclear-legacy-technical__panel,
    .oxiclear-legacy-technical__specifications,
    .oxiclear-legacy-technical__2020-copy,
    .oxiclear-legacy-technical__2020-specifications {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oxiclear-legacy-technical__intro > div:last-child,
    .oxiclear-legacy-technical__panel,
    .oxiclear-legacy-technical__specifications,
    .oxiclear-legacy-technical__2020-copy,
    .oxiclear-legacy-technical__2020-specifications,
    .oxiclear-legacy-technical__tab-list label {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #LegacyTechnicalDrdo:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalDrdo"],
    #LegacyTechnicalViral:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalViral"],
    #LegacyTechnicalCarbon:checked ~ .oxiclear-legacy-technical__tab-list label[for="LegacyTechnicalCarbon"] {
      background: #14171C;
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-technical__banner {
    min-height: 0;
    aspect-ratio: 1600 / 436;
  }

  body.oc-facelift .oxiclear-legacy-technical__tab-list {
    gap: 6px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-pill);
    background: rgba(243, 243, 243, .86);
    scrollbar-width: none;
  }

  body.oc-facelift .oxiclear-legacy-technical__tab-list::-webkit-scrollbar {
    display: none;
  }

  body.oc-facelift .oxiclear-legacy-technical__tab-list label {
    min-width: 0;
    min-height: 46px;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--oc-radius-pill);
    transition: color var(--oc-duration-fast) ease, background-color var(--oc-duration-fast) ease, box-shadow var(--oc-duration-base) ease;
  }

  body.oc-facelift .oxiclear-legacy-technical__tab-list {
    min-height: 56px;
  }

  body.oc-facelift .oxiclear-legacy-technical__tab-list label {
    min-height: 54px;
    padding: 10px 14px;
    line-height: var(--oc-lh-button);
  }

  body.oc-facelift .oxiclear-legacy-technical__panel {
    margin-top: 24px;
    padding: clamp(22px, 4vw, 52px);
    overflow: hidden;
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-panel);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--oc-shadow-card);
  }

  body.oc-facelift .oxiclear-legacy-technical__panel img {
    border-radius: calc(var(--oc-radius-panel) - 8px);
  }

  body.oc-facelift .oxiclear-legacy-technical__2020-container,
  body.oc-facelift .oxiclear-legacy-technical__intro,
  body.oc-facelift .oxiclear-legacy-technical__tabs,
  body.oc-facelift .oxiclear-legacy-technical__specifications,
  body.oc-facelift .oxiclear-legacy-technical__report {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1180px);
    margin-inline: auto;
  }

  body.oc-facelift .oxiclear-legacy-technical__2020-copy,
  body.oc-facelift .oxiclear-legacy-technical__2020-test,
  body.oc-facelift .oxiclear-legacy-technical__specifications,
  body.oc-facelift .oxiclear-legacy-technical__2020-specifications {
    margin-top: 18px;
    padding: clamp(22px, 3.5vw, 44px);
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-card);
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--oc-shadow-card);
  }

  body.oc-facelift .oxiclear-legacy-technical__report a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    color: #fff;
    border-radius: var(--oc-radius-pill);
    background: #242424;
    text-decoration: none;
    transition: box-shadow var(--oc-duration-base) ease, transform var(--oc-duration-fast) ease;
  }

  body.oc-facelift .oxiclear-legacy-technical > h2 {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1180px);
    margin: clamp(36px, 5vw, 56px) auto 20px;
    color: var(--oc-color-ink);
  }

  @media (hover: hover) and (pointer: fine) {
    body.oc-facelift .oxiclear-legacy-technical__report a:hover,
    body.oc-facelift .oxiclear-legacy-technical__report a:focus-visible {
      box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
      transform: translateY(-2px);
    }
  }

  @media (max-width: 767px) {
    body.oc-facelift .oxiclear-legacy-technical__tab-list {
      justify-content: flex-start;
      border-radius: 18px;
    }

    body.oc-facelift .oxiclear-legacy-technical__panel {
      padding: 18px;
      border-radius: 22px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.oc-facelift .oxiclear-legacy-technical__report a {
      transition: none !important;
    }
  }
/* END_SECTION:oxiclear-legacy-technical-page */

/* START_SECTION:oxiclear-legacy-testimonials-page (INDEX:68) */
/* The root is full-width so the banner can ride the shared 1400px hero band
     like every other page (D-200, it sat in the 1170 column and broke the
     header/hero alignment); the reading column keeps the 1170 measure below. */
  .oxiclear-legacy-testimonials {
    padding: 15px 0 60px;
    color: #272727;
  }

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

  .oxiclear-legacy-testimonials > img {
    display: block;
    width: 100%;
    height: auto;
    border-style: solid;
  }

  .oxiclear-legacy-testimonials h1 {
    margin: 20px 0;
  }

  .oxiclear-legacy-testimonials article {
    width: min(1170px, calc(100% - 30px));
    margin-inline: auto;
    padding: clamp(18px, 2.5vw, 26px);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-lg, 22px);
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    box-shadow: 0 12px 30px rgba(36, 36, 36, .06);
    text-align: left;
    transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
  }

  .oxiclear-legacy-testimonials article + article {
    margin-top: 14px;
  }

  .oxiclear-legacy-testimonials article > strong {
    display: block;
    margin-bottom: 16px;
  }

  .oxiclear-legacy-testimonials article p {
    margin: 0 0 16px;
  }

  .oxiclear-legacy-testimonials article p:last-child {
    margin-bottom: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .oxiclear-legacy-testimonials article:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(36, 36, 36, .10);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oxiclear-legacy-testimonials article {
      transition: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oxiclear-legacy-testimonials article {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oxiclear-legacy-testimonials article {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* Consolidated from oxiclear-facelift-content (clean-at-source, D-2026-08-23-152).
     This section's facelift rules live here now; the layer keeps only cross-page blocks. */

  body.oc-facelift .oxiclear-legacy-testimonials {
    padding-bottom: var(--oc-space-section);
  }

  body.oc-facelift .oxiclear-legacy-testimonials article {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 980px);
    margin: 14px auto;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-card);
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--oc-shadow-card);
  }
/* END_SECTION:oxiclear-legacy-testimonials-page */

/* START_SECTION:oxiclear-legacy-three-part (INDEX:69) */
.oc-legacy-three {
    color: var(--oc-legacy-three-text);
    background: var(--oc-legacy-three-bg);
  }

  .oc-legacy-three__inner {
    width: min(100% - 30px, 1170px);
    margin-inline: auto;
    padding-block: 48px 40px;
  }

  .oc-legacy-three__header {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
  }

  .oc-legacy-three__header > p {
    margin: 0 0 10px;
    color: var(--oc-legacy-three-accent);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-legacy-three__header h2 {
    max-width: none;
    margin: 0;
    color: var(--oc-legacy-three-text);
  }

  .oc-legacy-three__header > div {
    max-width: 58ch;
    margin-top: 18px;
    color: var(--oc-legacy-three-muted);
  }

  .oc-legacy-three__header > div p {
    margin: 0;
  }

  .oc-legacy-three__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: clamp(28px, 3vw, 40px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 30px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 20px 55px rgba(36, 36, 36, .09);
  }

  .oc-legacy-three__card {
    --oc-three-accent: #14171C;
    --oc-three-secondary: #14171C;
    --oc-three-soft: rgba(20, 23, 28, .13);
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: 10px clamp(26px, 3vw, 42px) 14px;
    color: var(--oc-legacy-three-text);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .oc-legacy-three__card + .oc-legacy-three__card {
    border-left: 1px solid rgba(36, 36, 36, .1);
  }

  .oc-legacy-three__card--reusability {
    --oc-three-accent: #14171C;
    --oc-three-secondary: #14171C;
    --oc-three-soft: rgba(20, 23, 28, .14);
  }

  .oc-legacy-three__card--international {
    --oc-three-accent: #14171C;
    --oc-three-secondary: #14171C;
    --oc-three-soft: rgba(20, 23, 28, .14);
  }

  .oc-legacy-three__icon {
    display: grid;
    place-items: center;
    width: clamp(110px, 9vw, 126px);
    aspect-ratio: 1;
    margin: 0 auto 26px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    color: var(--oc-three-accent);
    background: var(--oc-three-soft);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--oc-three-accent) 17%, transparent);
    transition: transform 260ms cubic-bezier(.22, .72, .22, 1), box-shadow 260ms cubic-bezier(.22, .72, .22, 1);
  }

  .oc-legacy-three__icon svg {
    width: 68%;
    height: 68%;
    overflow: visible;
  }

  .oc-legacy-three__icon :is(path, rect, circle) {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .oc-legacy-three__icon .oc-legacy-three__icon-soft {
    fill: var(--oc-three-soft);
  }

  .oc-legacy-three__icon .oc-legacy-three__icon-secondary {
    color: var(--oc-three-secondary);
    stroke: var(--oc-three-secondary);
  }

  .oc-legacy-three__eyebrow {
    margin: 0 0 8px;
    color: var(--oc-legacy-three-accent);
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-legacy-three__card h3 {
    width: 100%;
    max-width: none;
    margin: 0 0 20px;
    padding: 0;
    color: var(--oc-legacy-three-text);
    text-align: center;
    text-wrap: balance;
  }

  .oc-legacy-three__text {
    width: 100%;
    max-width: 32ch;
    margin: 0 auto;
    color: var(--oc-legacy-three-muted);
    text-align: left;
  }

  .oc-legacy-three__text p {
    margin: 0;
  }

  .oc-legacy-three__card a {
    display: inline-flex;
    width: fit-content;
    gap: 12px;
    align-items: center;
    margin-top: auto;
    padding-top: 18px;
    color: var(--oc-legacy-three-text);
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    letter-spacing: var(--oc-tr-button);
    text-decoration: none;
    text-transform: none;
  }

  .oc-legacy-three__card a:hover {
    color: var(--oc-legacy-three-accent);
  }

  .oc-legacy-three__card a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oc-legacy-three__note {
    max-width: 92ch;
    margin: 22px auto 0;
    color: var(--oc-legacy-three-muted);
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
    text-align: center;
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-legacy-three__card:hover .oc-legacy-three__icon {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 18px 36px color-mix(in srgb, var(--oc-three-accent) 22%, transparent);
    }
  }

  @media (min-width: 768px) and (max-width: 1099px) {
    .oc-legacy-three__grid {
      grid-template-columns: 1fr;
      padding: 20px 28px;
    }

    .oc-legacy-three__card {
      display: flex;
      align-items: center;
      padding: 28px 24px;
    }

    .oc-legacy-three__card + .oc-legacy-three__card {
      border-top: 1px solid rgba(36, 36, 36, .1);
      border-left: 0;
    }

    .oc-legacy-three__icon {
      width: 104px;
      margin: 0 auto 20px;
    }

    .oc-legacy-three__card h3 {
      max-width: none;
      margin-bottom: 16px;
    }

    .oc-legacy-three__text {
      max-width: 58ch;
    }
  }

  @media (max-width: 767px) {
    .oc-legacy-three__inner {
      width: min(100% - 20px, 520px);
      padding-block: 32px;
    }

    .oc-legacy-three__grid {
      grid-template-columns: 1fr;
      padding: 10px 18px;
      border-radius: 24px;
    }

    .oc-legacy-three__card {
      display: flex;
      align-items: center;
      padding: 26px 4px;
    }

    .oc-legacy-three__card + .oc-legacy-three__card {
      border-top: 1px solid rgba(36, 36, 36, .1);
      border-left: 0;
    }

    .oc-legacy-three__icon {
      width: 90px;
      margin: 0 auto 18px;
    }

    .oc-legacy-three__card h3 {
      max-width: none;
      margin-bottom: 15px;
    }

    .oc-legacy-three__text {
      max-width: 34ch;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-legacy-three__icon {
      transition: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-three__grid {
      background: #fff;
    }
  }
/* END_SECTION:oxiclear-legacy-three-part */

/* START_SECTION:oxiclear-legacy-video-row (INDEX:70) */
.oc-legacy-video-row {
    background: var(--oxg-wash, radial-gradient(1100px 560px at 12% -8%, rgba(20, 23, 28, .10), transparent 60%), radial-gradient(900px 520px at 108% 26%, rgba(20, 23, 28, .06), transparent 55%)) #f6f9f9;
  }

  .oc-legacy-video-row__inner {
    display: grid;
    /* two-up since the seed-of-life video was removed — two equal cards fill the band
       rather than sitting in two of three tracks with a hole on the right */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
    width: min(100% - 30px, 1170px);
    margin: 0 auto;
    padding: clamp(30px, 4vw, 46px) 0 clamp(36px, 5vw, 56px);
    margin-bottom: 0;
  }

  .oc-legacy-video-row__item {
    padding: 10px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: var(--oxg-surface, rgba(255, 255, 255, .76));
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
    backdrop-filter: blur(var(--oxg-blur, 18px)) saturate(var(--oxg-saturate, 120%));
    -webkit-backdrop-filter: blur(var(--oxg-blur, 18px)) saturate(var(--oxg-saturate, 120%));
  }

  .oc-legacy-video-row__trigger {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .oc-legacy-video-row__trigger img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
  }

  .oc-legacy-video-row__dialog {
    width: min(854px, calc(100% - 30px));
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    background: #000;
  }

  .oc-legacy-video-row__dialog::backdrop {
    background: rgba(0, 0, 0, .78);
  }

  .oc-legacy-video-row__dialog video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
  }

  .oc-legacy-video-row__close {
    position: absolute;
    top: -38px;
    right: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    border: 0;
    background: #000;
    cursor: pointer;
    /* the close control is a glyph, not type: em keeps it scaled to the 34px box */
    font-size: 1.5em;
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-legacy-video-row__item {
      transition: transform var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1)), box-shadow var(--oxg-speed, 260ms) var(--oxg-ease, cubic-bezier(.22, .72, .22, 1));
    }

    .oc-legacy-video-row__item:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: var(--oxg-shadow-lift, 0 26px 64px rgba(36, 36, 36, .13));
    }
  }

  @media (max-width: 767px) {
    .oc-legacy-video-row__inner {
      grid-template-columns: 1fr;
      margin-bottom: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-legacy-video-row__item {
      transition: none;
      transform: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-legacy-video-row__item {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-video-row__item {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
/* END_SECTION:oxiclear-legacy-video-row */

/* START_SECTION:oxiclear-pdp-comfort (INDEX:71) */
/* This band owns its material. Values measured from the approved mockup:
     stage fill .62 / edge .88 / chip fill .38 / graphite #14171C, 1320 spine,
     84px band rhythm. Radius stays 30px at every width, and there is no
     small-screen width override: the spine is the same 1320 at every
     breakpoint. */
  .oc-pdp-comfort {
    /* Spine: the percentage form, not 100vw. 100vw counts the classic scrollbar,
       so the 100vw form is ~15px wider than the viewport on Windows/Linux (and on
       macOS set to always-show scrollbars) and scrolls the page sideways. Every
       band on this page uses this same declaration. */
    width: min(100% - 32px, 1320px);
    margin: clamp(40px, 6vw, 84px) auto 0;
    color: #2d2d2d;
  }

  .oc-pdp-comfort__head {
    margin: 0 0 22px;
  }

  .oc-pdp-comfort__kicker {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    color: #454C56;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-pdp-comfort__kicker::before {
    display: inline-block;
    width: 24px;
    height: 2px;
    content: "";
    background: #454C56;
  }

  .oc-pdp-comfort__heading {
    margin: 0;
    color: #2d2d2d;
    text-transform: none;
  }

  .oc-pdp-comfort__stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 30px;
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  /* Both renders are explainers, not lifestyle photography: the valve diagram's
     airflow arrows run to the left edge of the frame and the no-valve render is
     one centred silhouette, so neither survives a crop. The image therefore sits
     as a rounded tile on the glass at its own 1586x992 ratio - the mockup's
     image-in-frost pattern - rather than bleeding to the stage edge, which would
     letterbox it as soon as the copy column ran taller than the frame. Both
     halves share one gutter so the tile and the bullet column line up when the
     stage stacks. */
  .oc-pdp-comfort__media,
  .oc-pdp-comfort__copy {
    min-width: 0;
    padding: clamp(32px, 4vw, 56px);
  }

  .oc-pdp-comfort__media {
    display: grid;
    align-content: center;
  }

  .oc-pdp-comfort__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    background: #0E1014;
  }

  .oc-pdp-comfort__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .oc-pdp-comfort__list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .oc-pdp-comfort__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0;
  }

  .oc-pdp-comfort__mark {
    box-sizing: border-box;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
  }

  .oc-pdp-comfort__mark::before {
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #14171C;
    opacity: .65;
  }

  .oc-pdp-comfort__item p {
    max-width: 60ch;
    margin: 0;
    padding-top: 3px;
    color: #454C56;
    font-size: var(--oc-fs-body);
    line-height: var(--oc-lh-body);
  }

  .oc-pdp-comfort__item strong {
    color: #14171C;
  }

  /* The link to the other single sits under the last bullet, indented onto the
     bullet text column (30px mark + 14px gap) so it reads as a quiet aside to
     the list rather than a second heading. */
  .oc-pdp-comfort__counterpart {
    margin: 18px 0 0;
    padding-left: 44px;
    color: #545C6A;
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  .oc-pdp-comfort__counterpart a {
    color: #14171C;
    font-weight: var(--oc-w-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media screen and (max-width: 767px) {
    .oc-pdp-comfort__stage {
      grid-template-columns: 1fr;
    }

    .oc-pdp-comfort__media {
      padding-bottom: 0;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-comfort__stage {
      background: rgba(255, 255, 255, .92);
    }

    .oc-pdp-comfort__mark {
      background: rgba(255, 255, 255, .78);
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-pdp-comfort__stage {
      background: rgba(255, 255, 255, .92);
    }

    .oc-pdp-comfort__mark {
      background: rgba(255, 255, 255, .78);
    }
  }
/* END_SECTION:oxiclear-pdp-comfort */

/* START_SECTION:oxiclear-pdp-how-to-wear (INDEX:72) */
/* Band 03 owns its material. Values measured from the approved mockup:
     stage fill .62 / chip fill .38 / graphite #14171C, 1320 spine, 84px band rhythm.
     The band carries the spine itself rather than bleeding to 100vw: nothing here
     runs to the edge, and 100vw overflows by the scrollbar width off macOS. */
  .oc-pdp-wear {
    width: min(100% - 32px, 1320px);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 84px) 0 0;
    color: #2d2d2d;
  }

  .oc-pdp-wear__head {
    margin: 0 0 22px;
  }

  .oc-pdp-wear__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #454C56;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-pdp-wear__kicker::before {
    display: inline-block;
    width: 24px;
    height: 2px;
    content: "";
    background: #454C56;
  }

  .oc-pdp-wear__heading {
    margin: 0;
    color: #2d2d2d;
    text-transform: none;
  }

  .oc-pdp-wear__stage {
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: var(--oxg-radius-xl, 30px);
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  .oc-pdp-wear__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0;
    padding: clamp(22px, 3vw, 34px);
    list-style: none;
  }

  .oc-pdp-wear__step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }

  .oc-pdp-wear__n {
    box-sizing: border-box;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    color: #14171C;
    font-size: var(--oc-fs-body);
    font-weight: var(--oc-w-bold);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .oc-pdp-wear__step p {
    margin: 0;
    padding-top: 10px;
    color: #454C56;
    font-size: var(--oc-fs-body);
    line-height: var(--oc-lh-body);
  }

  .oc-pdp-wear__step b {
    color: #14171C;
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-wear__stage {
      background: rgba(255, 255, 255, .92);
    }

    .oc-pdp-wear__n {
      background: rgba(255, 255, 255, .78);
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-pdp-wear__stage {
      background: rgba(255, 255, 255, .92);
    }

    .oc-pdp-wear__n {
      background: rgba(255, 255, 255, .78);
    }
  }
/* END_SECTION:oxiclear-pdp-how-to-wear */

/* START_SECTION:oxiclear-pdp-know-your-mask (INDEX:73) */
/* BAND 02 - "Built to be checked". One head + one glass stage on the 1320
     spine, matching the story band (D-2026-08-21-128). Frost tabs per the
     approved mockup: no green, no black pill. Tabs are radio + label, the
     pattern already shipped in oxiclear-legacy-technical-page; the state
     selectors key off input position, not id, so a second instance of the
     section still switches its own panes. The band carries the spine itself
     rather than bleeding to 100vw: nothing here runs to the edge, and 100vw
     overflows by the scrollbar width off macOS. */
  .oc-pdp-know {
    width: min(100% - 32px, 1320px);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 84px) 0 0;
    color: #2d2d2d;
  }

  .oc-pdp-know__head {
    margin: 0 0 22px;
  }

  .oc-pdp-know__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #454C56;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-pdp-know__kicker::before {
    display: inline-block;
    width: 24px;
    height: 2px;
    content: "";
    background: #454C56;
  }

  .oc-pdp-know__heading {
    margin: 0;
    color: #2d2d2d;
    text-transform: none;
  }

  .oc-pdp-know__stage {
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: var(--oxg-radius-xl, 30px);
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  .oc-pdp-know__panel {
    position: relative;
    padding: clamp(22px, 3vw, 34px);
  }

  /* Visually hidden, still focusable: the label is the visible control. */
  .oc-pdp-know__radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .oc-pdp-know__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
  }

  .oc-pdp-know__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    cursor: pointer;
    color: #3d443f;
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--oxg-radius-pill, 999px);
  }

  .oc-pdp-know__radio:nth-of-type(1):checked ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(1),
  .oc-pdp-know__radio:nth-of-type(2):checked ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(2),
  .oc-pdp-know__radio:nth-of-type(3):checked ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(3),
  .oc-pdp-know__radio:nth-of-type(4):checked ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(4) {
    color: #14171C;
    background: rgba(255, 255, 255, .75);
    border-color: rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .05);
  }

  .oc-pdp-know__radio:nth-of-type(1):checked ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(1)::after,
  .oc-pdp-know__radio:nth-of-type(2):checked ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(2)::after,
  .oc-pdp-know__radio:nth-of-type(3):checked ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(3)::after,
  .oc-pdp-know__radio:nth-of-type(4):checked ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(4)::after {
    position: absolute;
    right: 16px;
    bottom: 7px;
    left: 16px;
    height: 2px;
    content: "";
    background: #14171C;
  }

  .oc-pdp-know__radio:nth-of-type(1):focus-visible ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(1),
  .oc-pdp-know__radio:nth-of-type(2):focus-visible ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(2),
  .oc-pdp-know__radio:nth-of-type(3):focus-visible ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(3),
  .oc-pdp-know__radio:nth-of-type(4):focus-visible ~ .oc-pdp-know__tabs .oc-pdp-know__tab:nth-child(4) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .oc-pdp-know__pane {
    display: none;
  }

  .oc-pdp-know__radio:nth-of-type(1):checked ~ .oc-pdp-know__panes .oc-pdp-know__pane:nth-child(1),
  .oc-pdp-know__radio:nth-of-type(2):checked ~ .oc-pdp-know__panes .oc-pdp-know__pane:nth-child(2),
  .oc-pdp-know__radio:nth-of-type(3):checked ~ .oc-pdp-know__panes .oc-pdp-know__pane:nth-child(3),
  .oc-pdp-know__radio:nth-of-type(4):checked ~ .oc-pdp-know__panes .oc-pdp-know__pane:nth-child(4) {
    display: block;
  }

  .oc-pdp-know__spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
  }

  .oc-pdp-know__spec {
    padding: 16px;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: var(--oxg-radius-md, 16px);
  }

  .oc-pdp-know__spec-title {
    display: block;
    margin-bottom: 4px;
    color: #14171C;
    font-size: var(--oc-fs-small);
  }

  .oc-pdp-know__spec-text {
    display: block;
    color: #454C56;
    font-size: var(--oc-fs-small);
    line-height: var(--oc-lh-small);
  }

  .oc-pdp-know__proof {
    margin-top: 16px;
  }

  .oc-pdp-know__proof p {
    max-width: 68ch;
    margin: 0;
    color: #14171C;
    font-size: var(--oc-fs-body);
    line-height: var(--oc-lh-body);
  }

  .oc-pdp-know__proof p + p {
    margin-top: 10px;
  }

  .oc-pdp-know__proof strong {
    font-weight: var(--oc-w-bold);
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-know__stage {
      background: rgba(255, 255, 255, .92);
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-pdp-know__stage {
      background: rgba(255, 255, 255, .92);
    }
  }
/* END_SECTION:oxiclear-pdp-know-your-mask */

/* START_SECTION:oxiclear-pdp-proof (INDEX:74) */
/* The proof band owns its material. Values are the approved mockup's:
     stage fill .62 / edge .88, selected-chip fill .75 / edge .95 on the anchor
     figure, chip fill .38 / edge .58 on the label, graphite #14171C ink,
     1320 spine, 84px band rhythm. */
  .oc-pdp-proof {
    /* Spine: the percentage form, not 100vw. 100vw counts the classic scrollbar,
       so the 100vw form is ~15px wider than the viewport on Windows/Linux (and on
       macOS set to always-show scrollbars) and scrolls the page sideways. Every
       band on this page uses this same declaration. */
    width: min(100% - 32px, 1320px);
    margin-inline: auto;
    padding: clamp(40px, 6vw, 84px) 0 0;
    color: #2d2d2d;
  }

  .oc-pdp-proof__head {
    margin: 0 0 22px;
  }

  .oc-pdp-proof__kicker {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    color: #454C56;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-pdp-proof__kicker::before {
    display: inline-block;
    width: 24px;
    height: 2px;
    content: "";
    background: #454C56;
  }

  .oc-pdp-proof__heading {
    margin: 0;
    color: #2d2d2d;
    text-transform: none;
  }

  /* Slim stage: claim on the spine, label chip parked at the end. */
  .oc-pdp-proof__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 34px);
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 30px;
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  .oc-pdp-proof__claim p {
    max-width: 54ch;
    margin: 0;
    color: #14171C;
    font-size: var(--oc-fs-body-lg);
    line-height: var(--oc-lh-body);
  }

  .oc-pdp-proof__claim p + p {
    margin-top: 12px;
  }

  /* The figure is the anchor: the brightest frost on the band, set in the
     graphite ink and lining tabular numerals so 99.46% reads as a measurement. */
  .oc-pdp-proof__claim strong {
    display: inline-block;
    padding: 2px 18px;
    color: #14171C;
    font-size: var(--oc-fs-price);
    font-weight: var(--oc-w-bold);
    font-variant-numeric: tabular-nums lining-nums;
    line-height: var(--oc-lh-price);
    letter-spacing: var(--oc-tr-price);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .05);
  }

  .oc-pdp-proof__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .oc-pdp-proof__chip {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 12px 18px;
    color: #14171C;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
  }

  .oc-pdp-proof__chip::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    content: "";
    background: #14171C;
    border-radius: 50%;
    opacity: .65;
  }

  @media screen and (max-width: 899px) {
    .oc-pdp-proof__stage {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }

    .oc-pdp-proof__chips {
      justify-content: flex-start;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-proof__stage,
    .oc-pdp-proof__claim strong,
    .oc-pdp-proof__chip {
      background: rgba(255, 255, 255, .92);
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-pdp-proof__stage,
    .oc-pdp-proof__claim strong,
    .oc-pdp-proof__chip {
      background: rgba(255, 255, 255, .92);
    }
  }
/* END_SECTION:oxiclear-pdp-proof */

/* START_SECTION:oxiclear-premium-product-story (INDEX:75) */
/* BAND 04 - the story. One head + one glass stage, per the approved
     N99-with-valve mockup. Copy is frozen under D-2026-08-16-095. The band
     carries the spine itself rather than bleeding to 100vw: nothing here runs
     to the edge, and 100vw overflows by the scrollbar width off macOS. */
  .oc-story-band {
    width: min(100% - 32px, 1320px);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 84px) 0 0;
    color: #2d2d2d;
  }

  .oc-story-band__head {
    margin: 0 0 22px;
  }

  .oc-story-band__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #454C56;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    letter-spacing: var(--oc-tr-eyebrow);
    text-transform: uppercase;
  }

  .oc-story-band__kicker::before {
    display: inline-block;
    width: 24px;
    height: 2px;
    content: "";
    background: #454C56;
  }

  .oc-story-band__head h2 {
    margin: 0;
    color: #2d2d2d;
    text-transform: none;
  }

  .oc-story-band__stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: var(--oxg-radius-xl, 30px);
    background: rgba(255, 255, 255, .62);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  .oc-story-band__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(32px, 4vw, 56px);
  }

  .oc-story-band__copy p {
    max-width: 68ch;
    margin: 0;
    color: #2d2d2d;
    font-size: var(--oc-fs-body-lg);
    line-height: var(--oc-lh-body);
  }

  .oc-story-band__copy p + p {
    margin-top: 14px;
  }

  .oc-story-band__copy strong {
    font-weight: var(--oc-w-bold);
  }

  .oc-story-band__media {
    position: relative;
    min-height: 380px;
  }

  .oc-story-band__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (max-width: 899px) {
    .oc-story-band__stage {
      grid-template-columns: 1fr;
    }

    .oc-story-band__media {
      order: -1;
      min-height: 280px;
    }
  }

  /* The catalog-family band carries the spine itself rather than bleeding to 100vw.
     Nothing in it runs to the edge, and 100vw counts the classic scrollbar, so the
     bleed overflowed by ~15px on Windows/Linux and scrolled the page sideways. The
     children sit inside this spine now — they must not re-inset themselves. */
  .oc-premium-story {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 36px);
    width: min(100% - 32px, 1320px);
    margin: 0 auto 56px;
    padding: clamp(28px, 4vw, 52px) 0;
    color: #2d2d2d;
  }

  .oc-premium-story h2,
  .oc-premium-story p,
  .oc-premium-story ul {
    margin-top: 0;
  }

  .oc-premium-story h2 {
    max-width: 680px;
    margin-bottom: 24px;
    color: inherit;
    text-transform: none;
  }

  .oc-premium-story__eyebrow {
    margin-bottom: 16px;
    color: #454C56;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
    text-transform: uppercase;
  }

  .oc-premium-story__hero,
  .oc-premium-story__feature-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oc-premium-story__hero {
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .88);
    box-shadow:
      0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12);
  }

  .oc-premium-story__hero-copy,
  .oc-premium-story__feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(48px, 6vw, 76px) clamp(28px, 4vw, 64px);
  }

  .oc-premium-story__hero-copy {
    position: relative;
    z-index: 2;
    padding-right: 72px;
    background: transparent;
  }

  .oc-premium-story__hero-copy p:last-child {
    max-width: 620px;
    margin-bottom: 0;
    color: #454C56;
  }

  .oc-premium-story__visual,
  .oc-premium-story__feature-media {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    background: #ffffff;
  }

  .oc-premium-story__proof-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(190px, 0.6fr);
    gap: 44px;
    align-items: center;
    padding: 48px clamp(28px, 4vw, 64px);
    border-radius: 30px;
    color: #ffffff;
    background: rgba(14, 16, 20, .76);
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }

  .oc-premium-story__proof-band .oc-premium-story__eyebrow {
    color: rgba(255, 255, 255, .72);
  }

  .oc-premium-story__proof-band h2,
  .oc-premium-story__proof-band p {
    margin-bottom: 0;
  }

  .oc-premium-story__proof-claim {
    max-width: 680px;
    color: rgba(255, 255, 255, .82);
    font-size: var(--oc-fs-body-lg);
  }

  .oc-premium-story__proof-claim strong {
    display: inline-block;
    padding: 2px 18px;
    color: #14171C;
    font-size: var(--oc-fs-price);
    line-height: var(--oc-lh-price);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    background: rgba(255, 255, 255, .62);
    box-shadow: none;
  }

  .oc-premium-story__proof-label {
    padding: 16px 24px;
    color: #14171C;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    line-height: var(--oc-lh-small);
    text-align: center;
    text-transform: uppercase;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    background: rgba(255, 255, 255, .62);
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oc-premium-story__feature-row {
    background: rgba(255, 255, 255, .62);
  }

  .oc-premium-story__feature-copy {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .oc-premium-story__feature-copy p,
  .oc-premium-story__feature-copy ul {
    max-width: 640px;
    color: #454C56;
  }

  .oc-premium-story__feature-copy ul {
    margin-bottom: 0;
    padding-left: 20px;
  }

  .oc-premium-story__feature-copy li + li {
    margin-top: 10px;
  }

  .oc-premium-story__feature-copy a {
    align-self: flex-start;
    margin-top: 8px;
    padding-bottom: 4px;
    color: #2d2d2d;
    font-size: var(--oc-fs-button);
    font-weight: var(--oc-w-semibold);
    text-decoration: none;
    border-bottom: 1px solid #14171C;
  }

  .oc-premium-story__choice {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 72px;
    padding: clamp(44px, 5.5vw, 72px) clamp(28px, 4vw, 64px);
    overflow: hidden;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: rgba(255, 255, 255, .62);
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oc-premium-story__choice h2 {
    margin-bottom: 0;
  }

  .oc-premium-story__choice-copy p {
    margin-bottom: 16px;
    color: #454C56;
  }

  .oc-premium-story__visual--catalog,
  .oc-premium-story__feature-media--catalog {
    display: grid;
    place-items: center;
    padding: clamp(32px, 5vw, 84px);
    background: #eef3f2;
  }

  .oc-premium-story__catalog-image,
  .oc-premium-story__catalog-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 620px;
    object-fit: contain;
  }

  .oc-premium-story__choice--catalog {
    border-bottom: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
  }

  @media screen and (max-width: 899px) {
    .oc-premium-story__hero,
    .oc-premium-story__feature-row,
    .oc-premium-story__proof-band,
    .oc-premium-story__choice {
      grid-template-columns: 1fr;
    }

    .oc-premium-story__hero-copy,
    .oc-premium-story__feature-copy,
    .oc-premium-story__proof-band,
    .oc-premium-story__choice {
      padding: 52px 28px;
    }

    .oc-premium-story__hero-copy {
      border-right: 0;
      border-bottom: 1px solid rgba(20, 23, 28, 0.12);
    }

    .oc-premium-story__visual,
    .oc-premium-story__feature-media {
      min-height: 460px;
    }

    .oc-premium-story__visual--catalog,
    .oc-premium-story__feature-media--catalog {
      min-height: 420px;
      padding: 40px 28px;
    }

    .oc-premium-story__proof-band {
      gap: 24px;
    }

    .oc-premium-story__proof-label {
      justify-self: start;
    }

    .oc-premium-story__choice {
      gap: 24px;
    }
  }

  @media screen and (max-width: 480px) {
    .oc-premium-story {
      margin-bottom: 40px;
    }

    .oc-premium-story__hero-copy,
    .oc-premium-story__feature-copy,
    .oc-premium-story__proof-band,
    .oc-premium-story__choice {
      padding: 42px 20px;
    }

    .oc-premium-story__visual,
    .oc-premium-story__feature-media {
      min-height: 390px;
    }

    .oc-premium-story__visual--catalog,
    .oc-premium-story__feature-media--catalog {
      min-height: 340px;
      padding: 28px 20px;
    }

  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-premium-story__hero,
    .oc-premium-story__feature-row,
    .oc-premium-story__choice,
    .oc-premium-story__hero-copy,
    .oc-premium-story__proof-label,
    .oc-premium-story__proof-claim strong {
      background: rgba(255, 255, 255, .92);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    /* The PDP band matches the other five stages, which is .92, not #fff. */
    .oc-story-band__stage {
      background: rgba(255, 255, 255, .92);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-premium-story__hero,
    .oc-premium-story__feature-row,
    .oc-premium-story__choice,
    .oc-premium-story__hero-copy,
    .oc-premium-story__proof-label,
    .oc-premium-story__proof-claim strong {
      background: rgba(255, 255, 255, .92);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .oc-story-band__stage {
      background: rgba(255, 255, 255, .92);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
/* END_SECTION:oxiclear-premium-product-story */

/* START_SECTION:template--product--recently-viewed (INDEX:100) */
.oc-grid-static,
  .oc-grid-static__inner {
    display: contents;
  }
/* END_SECTION:template--product--recently-viewed */

/* START_SECTION:template--product--recommendations (INDEX:101) */
.oc-grid-static,
  .oc-grid-static__inner {
    display: contents;
  }
/* END_SECTION:template--product--recommendations */

/* CSS from snippet stylesheet tags */
/* 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-color-swatch (INDEX:157) */
.oc-color-dot {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--oc-swatch, #c1c1c2);
    border: 1px solid rgba(20, 23, 28, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  /* Combat: a mini army camouflage. Hard-edged radial blobs in four fatigue
     tones over an olive ground read as mottle at 16px. */
  .oc-color-dot--camo {
    background:
      radial-gradient(closest-side at 30% 32%, #2e3720 0 42%, transparent 43%),
      radial-gradient(closest-side at 72% 26%, #6d7550 0 38%, transparent 39%),
      radial-gradient(closest-side at 68% 72%, #24301c 0 40%, transparent 41%),
      radial-gradient(closest-side at 26% 74%, #7d8a5e 0 34%, transparent 35%),
      #47543a;
  }
/* END_SNIPPET:oxiclear-color-swatch */

/* 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-commerce (INDEX:159) */
.oc-facelift {
    --oc-commerce-black: #000000; --oc-commerce-ink: #272727; --oc-commerce-dark-grey: #4e4e4e; --oc-commerce-grey: #818181; --oc-commerce-mid-grey: #bcbcbc; --oc-commerce-line: #e1e1e1; --oc-commerce-soft-line: #e6e6e6; --oc-commerce-surface: #f3f3f3; --oc-commerce-white: #ffffff; --oc-commerce-accent: #14171C; --oc-commerce-accent-soft: #14171C; --oc-commerce-radius-sm: 12px; --oc-commerce-radius: 18px; --oc-commerce-radius-lg: 24px; --oc-commerce-control: 44px; --oc-commerce-shadow: 0 18px 50px rgba(0, 0, 0, 0.08); --oc-commerce-shadow-hover: 0 24px 64px rgba(0, 0, 0, 0.13);
  }

  .oc-facelift :is(.legacy-generic-collection, .legacy-collection-page, .collection_grid, [class*="collection-list-layout--"], .oc-legacy-pdp, .product-section, .oc-legacy-pdp-recommendations, .oc-legacy-pdp-carousel-wrap, .product-recommendations, .recently-viewed-products, .legacy-search, .section-search-grid, .legacy-cart, .cart.table-wrap, cart-drawer.global-drawer, .legacy-customer, .grid__item--customer-accounts, .account-addresses__grid, .account--order---wrapper) {
    color: var(--oc-commerce-black);
  }

  .oc-facelift :is(.legacy-generic-collection, .legacy-collection-page, .collection_grid, [class*="collection-list-layout--"], .oc-legacy-pdp, .product-section, .oc-legacy-pdp-recommendations, .oc-legacy-pdp-carousel-wrap, .product-recommendations, .recently-viewed-products, .legacy-search, .section-search-grid, .legacy-cart, .cart.table-wrap, cart-drawer.global-drawer, .legacy-customer, .grid__item--customer-accounts, .account-addresses__grid, .account--order---wrapper, .legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .product-card-basic) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus) !important; outline-offset: 2px; box-shadow: none;
  }

  .oc-facelift :is(.legacy-generic-collection, .legacy-collection-page, .collection_grid, [class*="collection-list-layout--"], .oc-legacy-pdp, .product-section, .oc-legacy-pdp-recommendations, .oc-legacy-pdp-carousel-wrap, .product-recommendations, .recently-viewed-products, .legacy-search, .section-search-grid, .legacy-cart, .cart.table-wrap, cart-drawer.global-drawer, .legacy-customer, .grid__item--customer-accounts, .account-addresses__grid, .account--order---wrapper) :where(.btn, button:not(.oc-legacy-pdp__dot), input[type="submit"], input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), select, summary) {
    min-height: var(--oc-commerce-control);
  }

  .oc-facelift :is(.legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .product-card-basic, .grid__item--list-collections .grid-view-item, .section-search-grid .grid__item > a) {
    position: relative; min-width: 0; overflow: hidden; color: var(--oc-commerce-black); background: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  .oc-facelift :is(.legacy-collection-product-card__media, .oc-legacy-pdp-card__image-wrap, product-card.grid-view-item .grid-view-item-image, .grid__item--list-collections .grid__image, .section-search-grid .grid-item__image) {
    width: 100%; min-height: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--oc-commerce-surface);
  }

  .oc-facelift :is(.legacy-collection-product-card__image, .legacy-collection-product-card__placeholder, .oc-legacy-pdp-card__image img, .oc-legacy-pdp-card__placeholder, product-card.grid-view-item .grid-view-item-image img, .grid__item--list-collections img, .section-search-grid .grid-item__image img) {
    display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 260ms ease;
  }

  .oc-facelift .legacy-collection-product-card h3 {
    min-height: 2.7em; margin: 16px 0 8px; padding: 0 18px; font-size: var(--oc-fs-card); line-height: var(--oc-lh-card);
  }

  .oc-facelift .legacy-collection-product-card__price {
    margin: auto 0 0; padding: 0 18px 18px; color: var(--oc-commerce-black); font-weight: var(--oc-w-bold);
  }

  .oc-facelift .legacy-collection-product-card,
  .oc-facelift .oc-legacy-pdp-card {
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  .oc-facelift .oc-legacy-pdp-card__title {
    margin: 16px 0 8px; padding: 0 18px; font-size: var(--oc-fs-card); line-height: var(--oc-lh-card);
  }

  .oc-facelift .oc-legacy-pdp-card__price {
    margin: auto 0 0; padding: 0 18px 18px; color: var(--oc-commerce-black); font-weight: var(--oc-w-bold);
  }

  /* Badges are information, not actions: quiet frost chip in ink. The accent fill
     this carried became green when the palette re-pointed, and green means press. */
  .oc-facelift :is(.oc-legacy-pdp-card__badge, .legacy-product-sale-badge, .product-grid--badge, .badge) {
    color: #14171C; background: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(15, 20, 22, .05); border-radius: 999px;
  }

  .oc-facelift product-card.grid-view-item > div {
    padding-bottom: 18px;
  }

  .oc-facelift product-card.grid-view-item :where(.product-grid--vendor, .product-grid--title, .product-grid--price, .product-grid--rating) {
    padding-right: 18px; padding-left: 18px;
  }

  .oc-facelift product-card.grid-view-item .product-grid--title {
    margin-top: 16px;
  }

  .oc-facelift product-card.grid-view-item .product-grid--price,
  .oc-facelift .product-card-basic__price {
    color: var(--oc-commerce-black); font-weight: var(--oc-w-bold);
  }

  .oc-facelift :is(.oc-legacy-pdp-card__sale-price, product-card.grid-view-item .product-grid--price .sale-price, .legacy-search__price .sale-price, .legacy-customer__refunded, .order--refunded-total) {
    color: var(--oc-commerce-black);
  }

  .oc-facelift :is(product-card.grid-view-item, .product-card-basic) :where(.quick-add-button, .sold-out-button, .product-card-basic__add-button button, .product-card-basic__add-button a) {
    min-height: var(--oc-commerce-control); color: var(--oc-action-primary-text, #07270b); background: var(--oc-action-primary-background, rgba(28, 177, 66, .2)); border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55)); border-radius: var(--oc-action-radius, 999px);
  }

  .oc-facelift .product-card-basic {
    display: grid; grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.4fr); gap: 14px; padding: 12px;
  }

  .oc-facelift .product-card-basic__image {
    overflow: hidden; background: var(--oc-commerce-surface); border-radius: 10px;
  }

  .oc-facelift .product-card-basic__image img {
    display: block; width: 100%; height: 100%; object-fit: contain;
  }

  .oc-facelift .product-card-basic--info {
    min-width: 0;
  }

  @media (hover: hover) {
    .oc-facelift :is(.legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .product-card-basic, .grid__item--list-collections .grid-view-item, .section-search-grid .grid__item > a):hover {
      border-color: var(--oc-commerce-accent-soft); box-shadow: var(--oc-commerce-shadow-hover); transform: translateY(-3px);
    }

    .oc-facelift :is(.legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .grid__item--list-collections .grid-view-item, .section-search-grid .grid__item > a):hover :where(img, .legacy-collection-product-card__placeholder) {
      transform: scale(1.025);
    }
  }

  .oc-facelift .legacy-generic-collection {
    width: min(1360px, calc(100% - 48px)); padding: clamp(36px, 5vw, 72px) 0; background: var(--oc-commerce-white);
  }

  .oc-facelift :is(.legacy-generic-collection__header h1, .legacy-collection-page__heading h1, [class*="collection-list-layout--"] .list-collections--title) {
    color: var(--oc-commerce-ink);
  }

  .oc-facelift .legacy-generic-collection__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
  }

  .oc-facelift :is(.legacy-collection-page__tabs) {
    gap: 6px; padding: 8px; overscroll-behavior-inline: contain; scroll-padding-inline: 8px; scroll-snap-type: inline proximity; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius); box-shadow: var(--oc-commerce-shadow);
  }

  .oc-facelift .legacy-collection-page__tabs {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1400px); margin-inline: auto; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  }

  .oc-facelift .legacy-collection-page__tabs::-webkit-scrollbar { display: none; }

  .oc-facelift :is(.legacy-collection-page__tab) {
    min-height: var(--oc-commerce-control); padding: 10px 14px; color: #07270b; background-color: transparent; border: 1px solid transparent; border-radius: 999px;
  }

  .oc-facelift .legacy-collection-page__tab { flex: 0 0 auto; scroll-snap-align: start; }

  .oc-facelift :is(.legacy-collection-page__tab)[aria-selected="true"] {
    color: #07270b; background-color: rgba(28, 177, 66, 0.26); border-color: var(--oc-commerce-accent);
  }

  @media (hover: hover) and (pointer: fine) {
    .oc-facelift :is(.legacy-collection-page__tab):hover:not([aria-selected="true"]) {
      color: #07270b; background-color: rgba(28, 177, 66, 0.12);
    }

    .oc-facelift :is(.legacy-collection-page__tab)[aria-selected="true"]:hover {
      background-color: rgba(28, 177, 66, 0.36);
    }
  }

  .oc-facelift .legacy-collection-page { padding-top: clamp(10px, 1.5vw, 22px); }

  .oc-facelift .legacy-collection-page__hero {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1400px); margin-inline: auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: var(--oc-radius-panel); box-shadow: var(--oc-shadow-card);
  }

  .oc-facelift .legacy-collection-page__grid {
    gap: clamp(16px, 2vw, 28px);
  }

  .oc-facelift :is(.legacy-collection-page__load-more) {
    min-height: var(--oc-commerce-control); padding: 0 20px; color: var(--oc-action-primary-text, #07270b); background: var(--oc-action-primary-background, rgba(28, 177, 66, .2)); border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55)); border-radius: var(--oc-action-radius, 999px);
  }

  .oc-facelift .collection_grid {
    width: min(1440px, 100%); margin-inline: auto;
  }

  .oc-facelift :is(.collection_grid, .section-search-grid) .collection-main-body-inner.product-grid--wrapper {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
  }

  .oc-facelift :is(.collection_grid, .section-search-grid) .collection-main-body-inner.product-grid--wrapper > .grid__item {
    width: 100% !important; margin: 0; padding: 0;
  }

  .oc-facelift :is(.collection_grid, .section-search-grid) :where(.collection-info, .facets__form-inner.desktop, .collection-filters) {
    padding: 16px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.06);
  }

  .oc-facelift :is(.collection_grid, .section-search-grid) :where(.facets__summary, .filter-drawer-btn, .collection-filters__sort, .active-facets__button) {
    min-height: var(--oc-commerce-control); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift :is(.collection_grid, .section-search-grid) .active-facets__button {
    border-color: var(--oc-commerce-accent);
  }

  .oc-facelift [class*="collection-list-layout--"] {
    width: min(1360px, calc(100% - 48px)); margin-inline: auto;
  }

  .oc-facelift [class*="collection-list-layout--"] .grid-uniform--list-collections {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
  }

  .oc-facelift [class*="collection-list-layout--"] .grid__item--list-collections {
    width: 100% !important; margin: 0; padding: 0;
  }

  .oc-facelift .grid__item--list-collections .list-collections--indiv-collection-title {
    margin: 0; padding: 16px 18px 18px; color: var(--oc-commerce-black); font-size: var(--oc-fs-card);
  }

  /* The .oc-legacy-pdp block that lived here (root, product grid, gallery, thumbnails,
     stage, details card, sale badge, title, description fade, swatches, quantity,
     pricing, payment buttons, dots) was scrapped on 21 Aug 2026: the PDP section is
     the single owner of its styling now, with the approved glass baseline applied at
     source (D-2026-08-21 PDP round). Hardcoded aqua rings and the black add-button
     went with it. */

  .oc-facelift .product-section {
    width: min(1440px, calc(100% - 48px)); margin-inline: auto; padding: clamp(24px, 4vw, 56px) 0 0;
  }

  .oc-facelift .product-section .product-single {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); gap: clamp(24px, 3vw, 44px); align-items: start;
  }

  .oc-facelift .product-section .product-single > :where([data-product-media-wrapper], product-information) {
    width: 100% !important; min-width: 0; margin: 0; padding: 0; float: none;
  }

  .oc-facelift .product-section .product-single.product-media--right [data-product-media-wrapper] {
    grid-column: 2;
  }

  .oc-facelift .product-section .product-single.product-media--right product-information {
    grid-row: 1; grid-column: 1;
  }

  .oc-facelift .product-section :where(.product-media--grid__item, .product-media-slider, .single-media) {
    overflow: hidden; background: var(--oc-commerce-surface); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius-lg);
  }

  .oc-facelift .product-section :where(.product-media--grid__item, .single-media) img {
    object-fit: contain;
  }

  .oc-facelift .product-section :where(.thumbnail-media--thumbnails, .media-slider-navigation .swiper-slide) {
    overflow: hidden; background: var(--oc-commerce-surface); border: 1px solid transparent; border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift .product-section product-information {
    padding: clamp(26px, 3.2vw, 44px) !important; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius-lg); box-shadow: var(--oc-commerce-shadow);
  }

  .oc-facelift .product-section .legacy-product-sale-badge {
    width: fit-content; margin: 0 0 12px auto; padding: 8px 14px; color: var(--oc-commerce-black); background: var(--oc-commerce-accent); border-radius: 999px;
  }

  .oc-facelift .product-section .product-details-product-title {
    margin: 0; color: var(--oc-commerce-black); font-size: var(--oc-fs-product); font-weight: var(--oc-w-semibold); line-height: var(--oc-lh-product); letter-spacing: var(--oc-tr-product);
  }

  .oc-facelift .product-section .product-price-group {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  }

  .oc-facelift .product-section .product-price-group #ProductPrice {
    width: 100%; color: var(--oc-commerce-black); font-size: var(--oc-fs-price); font-weight: var(--oc-w-bold); letter-spacing: var(--oc-tr-price);
  }

  .oc-facelift .product-section :where(.compare-at-price, .sale-price) {
    color: var(--oc-commerce-grey);
  }

  .oc-facelift .product-section .legacy-product-discount {
    padding: 3px 8px; color: var(--oc-commerce-black); background: rgba(28, 177, 66, 0.22); border-radius: 999px;
  }

  .oc-facelift .product-section :where(.swatch, variant-dropdown) {
    display: block; margin-bottom: 16px;
  }

  .oc-facelift .product-section .swatch-items-wrapper {
    display: flex; flex-wrap: wrap; gap: 10px;
  }

  .oc-facelift .product-section .swatch-element {
    margin: 0;
  }

  .oc-facelift .product-section .swatch-element label {
    display: grid; min-width: var(--oc-commerce-control); min-height: var(--oc-commerce-control); place-items: center; padding: 9px 14px; color: var(--oc-commerce-black); background-color: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-mid-grey); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift .product-section .swatch-element.color label {
    padding: 0; border-radius: 50%;
  }

  .oc-facelift .product-section .swatch-element :checked + label,
  .oc-facelift .product-section .swatch-element.active label {
    border-color: var(--oc-commerce-black); box-shadow: 0 0 0 3px var(--oc-commerce-accent);
  }

  .oc-facelift .product-section .variant-dropdown > button {
    width: 100%; min-height: var(--oc-commerce-control); padding: 10px 14px; color: var(--oc-commerce-black); background: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-mid-grey); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift .product-section .dropdown-list {
    overflow: hidden; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius-sm); box-shadow: var(--oc-commerce-shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }

  .oc-facelift .product-section .dropdown-list--item {
    min-height: var(--oc-commerce-control); padding: 11px 14px;
  }

  .oc-facelift .product-section .dropdown-list--item.selected {
    color: var(--oc-commerce-black); background: rgba(28, 177, 66, 0.2);
  }

  .oc-facelift .product-section quantity-input .js-qty {
    width: 132px; min-height: var(--oc-commerce-control); overflow: hidden; background: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-mid-grey); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift .product-section quantity-input :where(.js-qty__adjust, .js-qty__num) {
    min-height: var(--oc-commerce-control);
  }

  .oc-facelift .product-section .paymentButtonsWrapper {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }

  .oc-facelift .product-section .paymentButtonsWrapper > * {
    width: 100%;
  }

  .oc-facelift .product-section .paymentButtonsWrapper .shopify-payment-button__button {
    width: 100%;
    max-width: none;
  }

  .oc-facelift .product-section .product--add-to-cart-button {
    min-height: 48px; color: var(--oc-action-primary-text, #07270b); background: var(--oc-action-primary-background, rgba(28, 177, 66, .2)); border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55)); border-radius: var(--oc-action-radius, 999px);
  }

  .oc-facelift .product-section .shopify-payment-button__button--unbranded {
    min-height: 48px !important; color: var(--oc-action-secondary-text, #07270b) !important; background: var(--oc-action-secondary-background, rgba(28, 177, 66, .08)) !important; border: 1px solid var(--oc-action-secondary-border, rgba(28, 177, 66, .32)) !important; border-radius: var(--oc-action-radius, 999px) !important;
  }

  .oc-facelift .product-section :where(.collapsible-tab, .legacy-product-description) {
    padding: 14px 0; border-top: 1px solid var(--oc-commerce-line); border-bottom: 1px solid var(--oc-commerce-line);
  }

  .oc-facelift .product-section .collapsible-tab .summary {
    min-height: var(--oc-commerce-control);
  }

  .oc-facelift .oc-legacy-pdp-carousel__item {
    display: flex;
    height: auto;
  }

  .oc-facelift .oc-legacy-pdp-carousel__item .oc-legacy-pdp-card {
    width: 100%;
  }

  .oc-facelift :is(.oc-legacy-pdp-recommendations, .oc-legacy-pdp-carousel-wrap, .product-recommendations, .recently-viewed-products) {
    padding-top: clamp(42px, 5vw, 64px); padding-bottom: clamp(42px, 5vw, 64px); background: transparent;
  }

  .oc-facelift :is(.oc-legacy-pdp-carousel__title h2, .product-page-related-products h2, .recently-viewed-products h2) {
    color: #2d2d2d;
  }

  .oc-facelift :is(.oc-legacy-pdp-carousel__arrow, .product-recommendations .swiper-button--prev, .product-recommendations .swiper-button--next, .recently-viewed-products .swiper-button--prev, .recently-viewed-products .swiper-button--next) {
    width: 44px; min-width: 44px; height: 44px; color: #14171C; background: rgba(255, 255, 255, .38); border: 1px solid rgba(255, 255, 255, .58); border-radius: 50%; transform: none;
    /* These sit at left/right 8px, so a 44px arrow overlaps the leading card's
       image: the backdrop is photography, not paper. */
    -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  }

  .oc-facelift .oc-legacy-pdp-carousel__arrow.is-previous {
    left: 8px;
  }

  .oc-facelift .oc-legacy-pdp-carousel__arrow.is-next {
    right: 8px;
  }

  .oc-facelift .legacy-search {
    padding: clamp(44px, 7vw, 96px) 24px; background: var(--oc-commerce-white);
  }

  .oc-facelift .legacy-search__inner {
    width: min(1120px, 100%);
  }

  .oc-facelift :is(.legacy-search__header h1, .section-search-grid .search--header h1) {
    text-wrap: balance;
  }

  .oc-facelift :is(.legacy-search__form, .section-search-grid .search-wrapper) {
    padding: 10px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius); box-shadow: var(--oc-commerce-shadow);
  }

  .oc-facelift .legacy-search__form input {
    height: var(--oc-commerce-control); border: 1px solid var(--oc-commerce-mid-grey); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift :is(.legacy-search__form .btn, .section-search-grid .search-input--btn, .section-search-grid button[type="submit"]) {
    min-height: var(--oc-commerce-control); color: var(--oc-action-primary-text, #07270b); background: var(--oc-action-primary-background, rgba(28, 177, 66, .2)); border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55)); border-radius: var(--oc-action-radius, 999px);
  }

  .oc-facelift .legacy-search__results {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  }

  .oc-facelift .legacy-search__result {
    grid-template-columns: minmax(132px, 0.8fr) minmax(0, 1.5fr); align-items: start; gap: 20px; padding: 14px; background: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }

  .oc-facelift .legacy-search__image {
    align-self: start; aspect-ratio: 1; overflow: hidden; background: var(--oc-commerce-surface); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift .legacy-search__image img {
    width: 100%; height: 100%; object-fit: contain;
  }

  .oc-facelift .legacy-search__content > p:last-child:not(.legacy-search__price) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .oc-facelift :is(.legacy-search__price, .section-search-grid .product-grid--price) {
    color: var(--oc-commerce-black); font-weight: var(--oc-w-bold);
  }

  .oc-facelift .section-search-grid .grid__item > a {
    display: block; height: 100%; padding-bottom: 18px; text-decoration: none;
  }

  .oc-facelift .section-search-grid :where(.grid-item__title, .grid-item__excerpt) {
    padding-right: 18px; padding-left: 18px;
  }

  .oc-facelift .section-search-grid .grid-item__title {
    margin-top: 16px; color: var(--oc-commerce-black); font-weight: var(--oc-w-semibold);
  }

  .oc-facelift :is(.legacy-cart, .cart.table-wrap) {
    padding-top: clamp(44px, 6vw, 84px); padding-bottom: clamp(44px, 6vw, 84px); background: var(--oc-commerce-white);
  }

  .oc-facelift .legacy-cart__heading {
    margin-bottom: clamp(28px, 4vw, 48px);
  }

  .oc-facelift :is(.legacy-cart__heading h1, .legacy-customer__title) {
    margin-top: 0;
    color: var(--oc-commerce-black);
    text-align: center;
    text-wrap: balance;
  }

  .oc-facelift .legacy-cart--empty .legacy-cart__inner {
    width: min(680px, calc(100% - 32px));
  }

  .oc-facelift .legacy-cart--empty .legacy-cart__empty {
    padding: clamp(28px, 5vw, 52px);
    border: 1px solid var(--oc-commerce-line);
    border-radius: var(--oc-commerce-radius-lg);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--oc-commerce-shadow);
    text-align: center;
  }

  .oc-facelift :is(.legacy-cart__inner, .cart.table-wrap) {
    width: min(1240px, calc(100% - 48px)); margin-inline: auto;
  }

  .oc-facelift :is(.legacy-cart__table-wrap, .cart-table) {
    overflow: hidden; background: rgba(255, 255, 255, 0.88); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius-lg); box-shadow: var(--oc-commerce-shadow);
  }

  .oc-facelift :is(.legacy-cart__table, .cart-table) th {
    color: var(--oc-commerce-dark-grey); background: var(--oc-commerce-surface); border-color: var(--oc-commerce-line);
  }

  .oc-facelift :is(.legacy-cart__table, .cart-table) td {
    border-color: var(--oc-commerce-line);
  }

  .oc-facelift :is(.legacy-cart__image, .cart__image) {
    display: block; overflow: hidden; background: var(--oc-commerce-surface); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift :is(.legacy-cart__image, .cart__image) img {
    width: 100%; height: 100%; object-fit: contain;
  }

  .oc-facelift :is(.legacy-cart__title, .cart__row--title) {
    color: var(--oc-commerce-black); font-weight: var(--oc-w-semibold);
  }

  .oc-facelift :is(.legacy-cart__sale, .cart-total-label__discount, .cart--order-discount-wrapper, .order-discount--cart-list) {
    color: var(--oc-commerce-black);
  }

  .oc-facelift .legacy-cart__footer {
    gap: 24px;
  }

  .oc-facelift :is(.legacy-cart__summary, .cart.table-wrap > .grid.cart__row > .grid__item:last-child) {
    padding: 24px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius); box-shadow: var(--oc-commerce-shadow);
  }

  .oc-facelift :is(.legacy-cart__subtotal strong, .cart__subtotal .money) {
    font-size: var(--oc-fs-price); font-weight: var(--oc-w-bold);
  }

  .oc-facelift :is(.legacy-cart__button, .cart--button-checkout, .cart--button-update) {
    min-height: 48px; padding: 0 20px; color: var(--oc-action-primary-text, #07270b); background: var(--oc-action-primary-background, rgba(28, 177, 66, .2)); border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55)); border-radius: var(--oc-action-radius, 999px);
  }

  .oc-facelift :is(.legacy-cart__button--secondary, .cart--button-update) {
    color: var(--oc-commerce-black); background: var(--oc-commerce-white);
  }

  .oc-facelift .cart.table-wrap .js-qty {
    overflow: hidden; background: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-mid-grey); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift .cart.table-wrap :where(.js-qty__adjust, .js-qty__num) {
    min-height: var(--oc-commerce-control);
  }

  .oc-facelift .legacy-customer {
    width: min(1180px, calc(100% - 32px)); margin-inline: auto;
  }

  .oc-facelift :is(.legacy-customer__centered, .grid__item--customer-accounts, .account-addresses__grid > .grid__item, .account--order---wrapper) {
    padding: clamp(22px, 3vw, 36px); background: rgba(255, 255, 255, 0.86); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06);
  }

  .oc-facelift :is(.legacy-customer__centered, .grid__item--customer-accounts.large--one-third) {
    width: min(100%, 520px) !important; margin-inline: auto;
  }

  .oc-facelift :is(.legacy-customer__columns, .account-area--order-details, .account-addresses__grid) {
    gap: 20px;
  }

  .oc-facelift :is(.legacy-customer__table-wrap, .legacy-customer__address-card) {
    overflow: hidden; padding: 22px; background: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius);
  }

  .oc-facelift :is(.legacy-customer, .grid__item--customer-accounts, .account-addresses__grid) :where(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), select, textarea) {
    min-height: var(--oc-commerce-control); padding: 10px 14px; color: var(--oc-commerce-black); background: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-mid-grey); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift :is(.legacy-customer, .grid__item--customer-accounts, .account-addresses__grid) :where(label, .label-font) {
    color: var(--oc-commerce-ink); font-weight: var(--oc-w-medium);
  }

  .oc-facelift :is(.legacy-customer, .grid__item--customer-accounts, .account-addresses__grid) :where(.legacy-customer__button, .account-section--btn, .btn) {
    min-height: var(--oc-commerce-control); padding: 10px 18px; color: var(--oc-action-primary-text, #07270b); background: var(--oc-action-primary-background, rgba(28, 177, 66, .2)); border: 1px solid var(--oc-action-primary-border, rgba(28, 177, 66, .55)); border-radius: var(--oc-action-radius, 999px);
  }

  .oc-facelift :is(.legacy-customer, .grid__item--customer-accounts, .account-addresses__grid) :where(.legacy-customer__button--secondary, .customer-account-cancel) {
    color: var(--oc-commerce-black); background: var(--oc-commerce-white);
  }

  .oc-facelift :is(.legacy-customer, .grid__item--customer-accounts, .account-addresses__grid) :where(.errors, .note) {
    padding: 14px 16px; color: var(--oc-commerce-black); background: var(--oc-commerce-surface); border: 1px solid var(--oc-commerce-line); border-left: 4px solid var(--oc-commerce-accent); border-radius: var(--oc-commerce-radius-sm);
  }

  @media (max-width: 1199px) {
    .oc-facelift .legacy-generic-collection__grid,
    .oc-facelift .legacy-collection-page__grid,
    .oc-facelift :is(.collection_grid, .section-search-grid) .collection-main-body-inner.product-grid--wrapper,
    .oc-facelift [class*="collection-list-layout--"] .grid-uniform--list-collections {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* PDP responsive rules moved into the section with the rest of its styling. */
    .oc-facelift .product-section .product-single {
      grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); gap: 24px;
    }

    .oc-facelift .product-section .paymentButtonsWrapper {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 989px) {
    .oc-facelift .legacy-generic-collection__grid,
    .oc-facelift .legacy-collection-page__grid,
    .oc-facelift :is(.collection_grid, .section-search-grid) .collection-main-body-inner.product-grid--wrapper,
    .oc-facelift [class*="collection-list-layout--"] .grid-uniform--list-collections {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oc-facelift .oc-legacy-pdp__product,
    .oc-facelift .product-section .product-single {
      display: block;
    }

    .oc-facelift .oc-legacy-pdp__gallery,
    .oc-facelift .product-section [data-product-media-wrapper] {
      margin-bottom: 24px;
    }

    .oc-facelift .oc-legacy-pdp__sticky.is-sticky,
    .oc-facelift .product-section .product-sticky {
      position: static;
    }

    .oc-facelift .legacy-search__results {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767px) {
    .oc-facelift .legacy-generic-collection,
    .oc-facelift [class*="collection-list-layout--"],
    .oc-facelift .product-section,
    .oc-facelift :is(.legacy-cart__inner, .cart.table-wrap) {
      width: calc(100% - 32px);
    }

    .oc-facelift .legacy-generic-collection {
      padding-top: 32px;
    }

    .oc-facelift .legacy-collection-page { padding-top: 10px; }

    .oc-facelift .legacy-collection-page__hero {
      width: calc(100% - 32px); border-radius: 20px;
    }

    .oc-facelift .legacy-generic-collection__grid,
    .oc-facelift :is(.collection_grid, .section-search-grid) .collection-main-body-inner.product-grid--wrapper,
    .oc-facelift [class*="collection-list-layout--"] .grid-uniform--list-collections,
    .oc-facelift .legacy-collection-page__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    }

    .oc-facelift :is(.legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .grid__item--list-collections .grid-view-item) {
      border-radius: var(--oc-commerce-radius);
    }

    .oc-facelift :is(.legacy-collection-product-card h3, .oc-legacy-pdp-card__title, product-card.grid-view-item .product-grid--title, .grid__item--list-collections .list-collections--indiv-collection-title) {
      margin-top: 12px; padding-right: 12px; padding-left: 12px;
    }

    .oc-facelift :is(.legacy-collection-product-card__price, .oc-legacy-pdp-card__price, product-card.grid-view-item .product-grid--price) {
      padding-right: 12px; padding-bottom: 14px; padding-left: 12px;
    }

    .oc-facelift :is(.legacy-collection-page__tabs) {
      overflow-x: auto; scroll-snap-type: x proximity;
    }

    .oc-facelift :is(.legacy-collection-page__tab) {
      flex: 0 0 auto; scroll-snap-align: start;
    }

    .oc-facelift .product-section product-information {
      padding: 24px !important; border-radius: 18px;
    }

    .oc-facelift .legacy-search {
      padding-right: 16px; padding-left: 16px;
    }

    .oc-facelift .legacy-search__form {
      grid-template-columns: 1fr;
    }

    .oc-facelift .legacy-search__result {
      grid-template-columns: 112px minmax(0, 1fr); gap: 14px;
    }

    .oc-facelift :is(.legacy-cart, .cart.table-wrap) {
      padding-top: 36px; padding-bottom: 36px;
    }

    .oc-facelift .legacy-cart__table tr,
    .oc-facelift .cart-table .cart__row.table__section {
      margin-bottom: 14px; padding: 14px; background: var(--oc-commerce-white); border: 1px solid var(--oc-commerce-line); border-radius: var(--oc-commerce-radius); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
    }

    .oc-facelift .legacy-cart__summary {
      text-align: left;
    }

    .oc-facelift :is(.legacy-cart__actions, .cart--checkout-default) {
      display: grid; grid-template-columns: 1fr; gap: 10px;
    }

    .oc-facelift :is(.legacy-cart__button, .cart--button-checkout, .cart--button-update) {
      width: 100%;
    }

    .oc-facelift :is(.legacy-customer__columns, .account-area--order-details, .account-addresses__grid) {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 479px) {
    .oc-facelift .product-section product-information {
      padding: 20px !important;
    }

    .oc-facelift .product-card-basic {
      grid-template-columns: 88px minmax(0, 1fr);
    }
  }

  @media (max-width: 339px) {
    .oc-facelift .legacy-search__result {
      grid-template-columns: 1fr;
    }

    .oc-facelift .legacy-search__image {
      aspect-ratio: 4 / 3;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-facelift :is(.legacy-generic-collection, .legacy-collection-page, .collection_grid, [class*="collection-list-layout--"], .oc-legacy-pdp, .product-section, .oc-legacy-pdp-recommendations, .oc-legacy-pdp-carousel-wrap, .product-recommendations, .recently-viewed-products, .legacy-search, .section-search-grid, .legacy-cart, .cart.table-wrap, cart-drawer.global-drawer, .legacy-customer, .grid__item--customer-accounts, .account-addresses__grid, .account--order---wrapper, .legacy-collection-product-card, .oc-legacy-pdp-card, product-card.grid-view-item, .product-card-basic) * {
      scroll-behavior: auto !important; animation: none !important; transition: none !important;
    }
  }
/* END_SNIPPET:oxiclear-facelift-commerce */

/* 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-home (INDEX:162) */
body.oc-facelift.template-index .homepage-wrapper {
    background:
      radial-gradient(circle at 12% 14%, rgba(105, 207, 209, .08), transparent 28%),
      #fff;
  }

  body.oc-facelift.template-index .oc-legacy-use-cases {
    z-index: 3;
    margin-top: clamp(-66px, -4.2vw, -42px);
    padding-inline: var(--oc-space-page);
  }

  body.oc-facelift.template-index .oc-legacy-use-cases__inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(4px, .8vw, 12px);
    width: min(100%, 1080px);
    padding: 18px clamp(12px, 2vw, 28px) 24px;
    overflow: hidden;
  }

  body.oc-facelift.template-index .oc-legacy-use-cases__item {
    min-height: 152px;
    gap: 12px;
    justify-content: flex-start;
    padding: 4px 6px 8px;
    border-radius: 18px;
    font-size: var(--oc-fs-small);
    transition: background-color var(--oc-duration-fast) ease, transform var(--oc-duration-base) var(--oc-ease-fluid);
  }

  body.oc-facelift.template-index .oc-legacy-use-cases__media {
    width: clamp(88px, 8vw, 116px);
    height: clamp(88px, 8vw, 116px);
    border: 0;
    box-shadow: 0 12px 26px rgba(36, 36, 36, .15);
  }

  body.oc-facelift.template-index .section-oxiclear-air-check {
    position: relative;
    padding: 0;
    background: var(--body-color, #fff);
  }

  body.oc-facelift.template-index .oc-legacy-story {
    padding: clamp(10px, 1.5vw, 22px) var(--oc-space-page);
    background: #fff;
  }

  body.oc-facelift.template-index .oc-legacy-story__inner {
    width: min(100%, 1320px);
    min-height: clamp(380px, 40vw, 540px);
    overflow: hidden;
    border: 1px solid rgba(225, 225, 225, .82);
    border-radius: var(--oc-radius-panel);
    background-color: var(--oc-legacy-story-bg);
    box-shadow: var(--oc-shadow-card);
  }

  body.oc-facelift.template-index .oc-legacy-story__media {
    min-height: 100%;
  }

  body.oc-facelift.template-index .oc-legacy-story__image {
    transition: transform 800ms var(--oc-ease-fluid);
  }

  body.oc-facelift.template-index .oc-legacy-story__copy {
    padding: clamp(32px, 4vw, 56px);
  }

  body.oc-facelift.template-index .oc-legacy-story__facts {
    gap: 8px;
    border: 0;
  }

  body.oc-facelift.template-index .oc-legacy-story__facts div {
    padding: 14px;
    border: 1px solid var(--oc-legacy-story-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .42);
  }

  body.oc-facelift.template-index .oc-legacy-protection-strip {
    padding: clamp(22px, 4vw, 58px) var(--oc-space-page);
  }

  body.oc-facelift.template-index .oc-legacy-protection-strip__inner {
    gap: clamp(14px, 2vw, 28px);
    width: min(100%, 1240px);
    padding: clamp(24px, 3vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: var(--oc-radius-panel);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 20px 55px rgba(36, 36, 36, .09);
  }

  body.oc-facelift.template-index .oc-legacy-three {
    padding: clamp(30px, 4vw, 56px) var(--oc-space-page);
    background: #fff;
  }

  body.oc-facelift.template-index .oc-legacy-three__inner {
    width: min(100%, 1240px);
    padding: 0;
  }

  body.oc-facelift.template-index .oc-legacy-three__grid {
    gap: 0;
  }

  body.oc-facelift.template-index .oc-legacy-three__card {
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  body.oc-facelift.template-index .oc-legacy-three__card + .oc-legacy-three__card {
    border-left: 1px solid rgba(36, 36, 36, .1);
  }

  body.oc-facelift.template-index .oc-legacy-three__icon {
    border-radius: 50%;
  }

  @media (min-width: 768px) and (max-width: 1099px) {
    body.oc-facelift.template-index .oc-legacy-three__card + .oc-legacy-three__card {
      border-top: 1px solid rgba(36, 36, 36, .1);
      border-left: 0;
    }
  }

  body.oc-facelift.template-index .oc-legacy-video-row {
    padding: clamp(22px, 4vw, 58px) var(--oc-space-page) clamp(54px, 7vw, 92px);
  }

  body.oc-facelift.template-index .oc-legacy-video-row__inner {
    gap: clamp(12px, 2vw, 24px);
    width: min(100%, 1320px);
    margin-bottom: 0;
  }

  body.oc-facelift.template-index .oc-legacy-video-row__item,
  body.oc-facelift.template-index .oc-legacy-video-row__trigger,
  body.oc-facelift.template-index .oc-legacy-video-row__trigger img {
    overflow: hidden;
    border-radius: var(--oc-radius-card);
  }

  body.oc-facelift.template-index .oc-legacy-video-row__trigger {
    position: relative;
    box-shadow: var(--oc-shadow-card);
    transition: box-shadow var(--oc-duration-base) var(--oc-ease-fluid), transform var(--oc-duration-base) var(--oc-ease-fluid);
  }

  body.oc-facelift.template-index .oc-legacy-video-row__dialog {
    overflow: hidden;
    border-radius: var(--oc-radius-card);
    box-shadow: 0 34px 100px rgba(0, 0, 0, .42);
  }

  body.oc-facelift.template-index .oc-legacy-video-row__dialog::backdrop {
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  body.oc-facelift.template-index .oc-legacy-video-row__close {
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  @media (hover: hover) and (pointer: fine) {
    body.oc-facelift.template-index .oc-legacy-use-cases__item:hover {
      background: rgba(241, 242, 243, .72);
      transform: translateY(-3px);
    }

    body.oc-facelift.template-index .oc-legacy-story:hover .oc-legacy-story__image {
      transform: scale(1.018);
    }

    body.oc-facelift.template-index .oc-legacy-video-row__trigger:hover {
      box-shadow: var(--oc-shadow-card-hover);
      transform: translateY(-5px);
    }
  }

  @media (max-width: 1024px) {
    body.oc-facelift.template-index .oc-legacy-use-cases {
      margin-top: -44px;
    }

    body.oc-facelift.template-index .oc-legacy-use-cases__inner {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body.oc-facelift.template-index .oc-legacy-use-cases__item:last-child {
      grid-column: auto;
    }

    body.oc-facelift.template-index .oc-legacy-use-cases__media {
      width: clamp(76px, 10vw, 98px);
      height: clamp(76px, 10vw, 98px);
    }

    body.oc-facelift.template-index .oc-legacy-story__copy {
      padding: 36px;
    }
  }

  @media (max-width: 767px) {
    body.oc-facelift.template-index .section-oxiclear-legacy-image-strip {
      display: none;
    }

    body.oc-facelift.template-index .oc-legacy-use-cases {
      margin-top: -30px;
      padding-inline: 10px;
    }

    body.oc-facelift.template-index .oc-legacy-use-cases__inner {
      display: grid;
      grid-auto-columns: 88px;
      grid-auto-flow: column;
      grid-template-columns: none;
      justify-content: start;
      width: 100%;
      padding: 12px 12px 16px;
      overflow-x: auto;
      border-radius: 20px;
      scroll-padding-inline: 12px;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }

    body.oc-facelift.template-index .oc-legacy-use-cases__inner::-webkit-scrollbar {
      display: none;
    }

    body.oc-facelift.template-index .oc-legacy-use-cases__item {
      min-height: 112px;
      gap: 8px;
      padding: 2px 4px 6px;
      scroll-snap-align: start;
    }

    body.oc-facelift.template-index .oc-legacy-use-cases__media {
      width: 72px;
      height: 72px;
    }

    body.oc-facelift.template-index .section-oxiclear-air-check {
      padding: 0;
    }

    body.oc-facelift.template-index .oc-legacy-story {
      padding: 8px 10px;
    }

    body.oc-facelift.template-index .oc-legacy-story__inner {
      min-height: 0;
      border-radius: 22px;
    }

    body.oc-facelift.template-index .oc-legacy-story--media-right .oc-legacy-story__media {
      order: 0;
    }

    body.oc-facelift.template-index .oc-legacy-story__copy,
    body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__copy {
      padding: 30px 24px 36px;
    }

    body.oc-facelift.template-index .oc-legacy-story__button {
      display: inline-flex;
      min-height: 48px;
    }

    body.oc-facelift.template-index .oc-legacy-story__facts {
      grid-template-columns: 1fr;
      width: 100%;
    }

    body.oc-facelift.template-index .oc-legacy-protection-strip {
      padding: 28px 10px;
    }

    body.oc-facelift.template-index .oc-legacy-protection-strip__inner {
      width: 100%;
      padding: clamp(22px, 3vw, 30px);
      border-radius: 24px;
    }

    body.oc-facelift.template-index .oc-legacy-three {
      padding: 26px 10px;
    }

    body.oc-facelift.template-index .oc-legacy-three__inner {
      width: 100%;
    }

    body.oc-facelift.template-index .oc-legacy-three__card {
      min-height: 0;
      border-radius: 0;
    }

    body.oc-facelift.template-index .oc-legacy-three__card + .oc-legacy-three__card {
      border-top: 1px solid rgba(36, 36, 36, .1);
      border-left: 0;
    }

    body.oc-facelift.template-index .oc-legacy-video-row {
      padding: 24px 10px 58px;
    }

    body.oc-facelift.template-index .oc-legacy-video-row__inner {
      gap: 14px;
    }
  }

  @media (max-width: 680px) {
    body.oc-facelift.template-index .oc-legacy-protection-strip__inner {
      padding: 22px 0 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.oc-facelift.template-index :is(
      .oc-legacy-use-cases__item,
      .oc-legacy-story__image,
      .oc-legacy-video-row__trigger
    ) {
      transition: none !important;
    }
  }
/* END_SNIPPET:oxiclear-facelift-home */

/* 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 */

/* START_SNIPPET:oxiclear-glass-home (INDEX:166) */
/* ============ 15) PHASE A (19 Aug 2026, D-2026-08-19-113/114): HOMEPAGE QUICK WINS ============
     Founder-approved homepage alignment, living-glass philosophy. CSS-only.
     A2 protection strip -> frost container (point colours kept: founder call)
     A3 video row -> frosted play button + soft ping
     A4 use-case icons -> floating glass orbs */

  /* A2 — protection strip: frost container only. The multicolour point accents
     STAY as designed — founder call (19 Aug 2026): small colour mixes give the site
     character, echoing the two-colour logo. The ban is on aqua as a UI system
     colour, not on character accents. */
  body.oc-facelift.template-index .oc-legacy-protection-strip__inner {
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .05), 0 12px 32px rgba(10, 14, 16, .1);
  }

  /* A3 — video row: frosted glass play button with a soft ping.
     SALMON PINK (founder's call, 20 Aug): colour only. The geometry, the blur, the
     white specular edge, the drop shadow, the ping timing and the white glyph are all
     untouched — the frost is the same material, just tinted. The fill sits at .42
     rather than the white version's .22 because salmon at .22 over a photographic
     thumbnail reads as a faint warm haze rather than a colour; .42 still passes the
     picture through. */
  body.oc-facelift.template-index .oc-legacy-video-row__item {
    position: relative;
    border-radius: 22px;
  }

  body.oc-facelift.template-index .oc-legacy-video-row__trigger {
    position: relative;
  }

  body.oc-facelift.template-index .oc-legacy-video-row__trigger::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 62px;
    height: 62px;
    margin: auto;
    background: rgba(250, 128, 114, .42);
    border: 1px solid rgba(250, 128, 114, .62);
    border-radius: 50%;
    /* dead flat (23 Aug): the specular bevel read as cheap on every pill and disc */
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    pointer-events: none;
  }

  body.oc-facelift.template-index .oc-legacy-video-row__trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
    /* A CSS triangle is made of mitred borders, so it MUST have square corners.
       oxiclear-facelift-home declared its own ::after on this same trigger — a
       hairline ring — carrying `border-radius: inherit`. The glass layer overrode
       every other property but that radius survived at 22px and rounded the mitre,
       which is what turned the arrow into a white blob behind the button. The
       facelift rule is deleted and the radius is pinned here so it cannot come back. */
    border-radius: 0;
    transform: translateX(3px);
    pointer-events: none;
  }

  body.oc-facelift.template-index .oc-legacy-video-row__item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 62px;
    height: 62px;
    margin: auto;
    border: 2px solid rgba(250, 128, 114, .55);
    border-radius: 50%;
    animation: oc-glass-ping 2.6s ease-out infinite;
    pointer-events: none;
  }

  @keyframes oc-glass-ping {
    0% { transform: scale(.7); opacity: 1; }
    80%, 100% { transform: scale(1.5); opacity: 0; }
  }

  /* The mission glow used to borrow @keyframes oc-aircheck-breathe from the Air
     Check section, whose frames bake in translateY(-50%) because that element is
     vertically centred. Applied to a corner-anchored glow it silently dragged it
     170 px up the left edge, off the corner it was placed on. This is the same
     breathe, without the positioning baked in. */
  @keyframes oc-glass-breathe {
    0%, 100% { transform: scale(1); opacity: .45; }
    50% { transform: scale(1.14); opacity: .8; }
  }

  @keyframes oc-glass-floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }

  /* A4 — use-case icons become idle-floating glass orbs */
  body.oc-facelift.template-index .oc-legacy-use-cases__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .06), 0 12px 26px rgba(10, 14, 16, .12);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    animation: oc-glass-floaty 7s ease-in-out infinite;
    transition: transform .25s cubic-bezier(.22, .72, .22, 1);
  }

  body.oc-facelift.template-index .oc-legacy-use-cases__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* A4 RE-PASS (19 Aug 2026): the frost fill and backdrop blur above sit BEHIND
     an opaque circular illustration that covers the orb edge to edge (measured:
     121 px artwork inside a 115 px orb), so no part of the glass ever reached the
     screen — the orbs read as plain circular photos with a ring. The dome puts the
     specular highlight and rim light ON TOP of the artwork, which is what actually
     makes a sphere read as glass. The fill and blur stay for the no-image case. */
  body.oc-facelift.template-index .oc-legacy-use-cases__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background:
      linear-gradient(148deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .2) 24%, rgba(255, 255, 255, 0) 48%),
      radial-gradient(115% 85% at 50% 112%, rgba(255, 255, 255, .3), transparent 58%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
    pointer-events: none;
  }

  body.oc-facelift.template-index .oc-legacy-use-cases__item:nth-child(2) .oc-legacy-use-cases__media { animation-delay: -1.2s; }
  body.oc-facelift.template-index .oc-legacy-use-cases__item:nth-child(3) .oc-legacy-use-cases__media { animation-delay: -2.4s; }
  body.oc-facelift.template-index .oc-legacy-use-cases__item:nth-child(4) .oc-legacy-use-cases__media { animation-delay: -3.6s; }
  body.oc-facelift.template-index .oc-legacy-use-cases__item:nth-child(5) .oc-legacy-use-cases__media { animation-delay: -4.8s; }
  body.oc-facelift.template-index .oc-legacy-use-cases__item:nth-child(6) .oc-legacy-use-cases__media { animation-delay: -6s; }

  @media (hover: hover) and (pointer: fine) {
    body.oc-facelift.template-index .oc-legacy-use-cases__item:hover .oc-legacy-use-cases__media {
      transform: translateY(-6px) scale(1.04);
    }
  }

  /* ============ 16) PHASE B: STORY STAGES ============
     B1 "MADE TO BE WORN" (story WITHOUT logo) -> frost stage + floating fact chips
     B2 "OUR MISSION" (story WITH logo) -> full-bleed monolith, copy over shade,
        breathing green glow, black logo inverted to white. Frozen copy untouched. */

  /* B1 — breathe story: one frosted stage.
     RE-PASS (19 Aug 2026): the stage was frost-on-frost. The base section gives
     .oc-legacy-story__copy its own 88% white card with a border, 30 px radius,
     shadow and blur, so the shipped result was a glass card floating inside a
     glass stage — two stacked surfaces where the approved treatment calls for
     ONE. The copy now dissolves into the stage (its rhythm and padding kept), so
     the photo and the words share a single frosted surface. */
  body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__copy {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__inner {
    background: rgba(255, 255, 255, .62) !important;
    border: 1px solid rgba(255, 255, 255, .88) !important;
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .06), 0 16px 40px rgba(10, 14, 16, .12) !important;
  }

  body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media {
    position: relative;
    /* the base section puts a 30 px ledge under this photo
       (.oc-legacy-story:not(--has-logo) .oc-legacy-story__media { padding-bottom: 30px }).
       Inside a single frosted stage that ledge is just a grey strip, and because the
       chips are positioned against the media's padding box it pushed the lower chip
       off the photograph — visible at 390 px. */
    padding-bottom: 0 !important;
  }

  /* RE-PASS (19 Aug 2026): the chips are positioned against the MEDIA box, but the
     photograph does not always fill it — at 390 px the image ran 30 px shorter than
     its box, leaving a #F6F6F6 strip along the bottom, and the "Washable & Reusable"
     chip slid off the photograph onto that strip. The approved treatment puts both
     chips ON THE PHOTO, so the photo now fills its box and the two boxes coincide at
     every width. */
  /* place-self, not height alone: the media is a grid with place-items:center, so the
     row is auto-sized and a percentage height has nothing definite to resolve against —
     the image kept falling back to its 600/339 intrinsic ratio and sat short of its box. */
  body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__image {
    place-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::before,
  body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::after {
    position: absolute;
    z-index: 2;
    padding: 10px 15px;
    color: #15181b;
    font-size: var(--oc-fs-small);
    font-weight: var(--oc-w-medium);
    white-space: nowrap;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 20, 22, .06), 0 12px 26px rgba(10, 14, 16, .14);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: oc-glass-floaty 6.5s ease-in-out infinite;
    pointer-events: none;
  }

  body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::before {
    content: "N99 Filtration";
    top: 14%;
    right: 8%;
  }

  body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::after {
    content: "Washable & Reusable";
    bottom: 12%;
    left: 8%;
    animation-delay: -3s;
  }

  /* B2 — mission monolith */
  /* Sized to the approved mockup, section 07 "Mission Monolith": a 480px glass-framed
     panel, not the 580px slab it had grown into. */
  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__inner {
    position: relative;
    grid-template-columns: 1fr !important;
    min-height: 480px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(10, 14, 16, .26);
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__media {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    order: 0 !important;
    /* block, not the base section's centred grid. As a grid the row was auto-sized to
       the photo, so the photo's height:100% resolved against ITSELF (877px) instead of
       the 480px panel and object-fit:cover never engaged — the image rendered at its
       intrinsic ratio and was clipped through the middle. A block box gives the
       percentage a definite parent. */
    display: block !important;
  }

  /* The photograph is a shallow-depth-of-field frame: sharp child on the right, a big
     soft blob of bokeh on the left, which read as a mistake rather than a choice
     behind the copy. Founder call (20 Aug): blur the whole thing so it becomes one
     even atmospheric backdrop and the words carry the section. The 1.06 scale hides
     the transparent edge a blur filter leaves behind, and the hover zoom the facelift
     layer gives story images is switched off here — this monolith is not a hover
     target and the two transforms would fight. */
  /* place-self, not height alone. The media is a grid with place-items:center, so the
     row is auto-sized by its content and a percentage height has nothing definite to
     resolve against — the photo was falling back to its intrinsic ratio and rendering
     877px tall inside a 578px panel, centred and clipped top and bottom. That is why
     it looked mis-scaled. Stretched, object-fit:cover finally does its job. */
  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    /* NO css blur. The photograph already carries its own depth of field — the child
       sharp, the foliage behind her thrown out of focus — and that is the blur that
       belongs here. A filter on the element blurred her too, which is what made the
       frame read as mush. What actually looked broken originally was the cover bug
       fixed alongside this (a clipped middle band at the intrinsic ratio), not the
       focus. Founder's call, 20 Aug: leave the lens alone. */
    filter: none;
  }

  /* the facelift layer zooms story photos on hover; this monolith is not a hover
     target, and a moving photograph under fixed copy reads as a wobble */
  body.oc-facelift.template-index .oc-legacy-story--has-logo:hover .oc-legacy-story__image {
    transform: none;
  }

  /* The dark shade. RE-PASS (19 Aug 2026): the shipped gradient stayed fully
     transparent for the first 25% and only reached .62 at the very bottom edge,
     but the copy column starts around a third of the way down — so the logo and
     the OUR MISSION kicker sat on bare photo. Measured against the actual mission
     photograph, white-on-photo contrast was 3.09:1 at the logo and 3.53:1 at the
     kicker, i.e. below the 4.5:1 the kicker needs as small text. The shade is now
     a two-part scrim: the vertical ramp starts at the top instead of a quarter
     down, and a left-hand scrim backs the copy column specifically, so the right
     side of the frame — where the child is — keeps its light. */
  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Neutral, and weighted to the copy side — see the hero for the reasoning. The
       girl was losing 30% of her light at the face to a ramp that spans the full
       width; the scrim now concentrates on the left where the words actually are. */
    background:
      linear-gradient(180deg, rgba(10, 10, 10, .02) 0%, rgba(10, 10, 10, .12) 32%, rgba(10, 10, 10, .58) 100%),
      linear-gradient(90deg, rgba(10, 10, 10, .48) 0%, rgba(10, 10, 10, .26) 42%, rgba(10, 10, 10, 0) 64%);
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__inner::before {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    z-index: 1;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 177, 66, .35), transparent 65%);
    filter: blur(22px);
    animation: oc-glass-breathe 7s ease-in-out infinite;
    pointer-events: none;
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__copy {
    position: relative;
    z-index: 2;
    /* the container itself still inherited the section's #2D2D2D ink, so anything
       added to this story later (a fact block, a note) would have rendered dark on
       a dark photograph. The white belongs on the container, not only on the three
       elements that happen to be there today. */
    color: #fff;
    align-items: flex-start;
    justify-content: flex-end !important;
    max-width: 760px;
    margin: 0 !important;
    padding: clamp(28px, 4vw, 52px) !important;
    text-align: left;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__copy h2 {
    max-width: none;
    color: #fff !important;
    text-shadow: 0 2px 20px rgba(6, 10, 12, .45);
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__eyebrow {
    color: #b8e986 !important;
  }

  /* Text formatting: the body was running 680px wide — far past a comfortable measure
     at 19px, which is why the block read as a slab rather than a paragraph. Held to
     about 56 characters, with the heading given room to breathe above it and the
     button separated from the prose. */
  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__text,
  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__text p {
    color: rgba(255, 255, 255, .88) !important;
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__text {
    /* The mockup asks for a 56 character measure. rem, not ch: this div inherits a
       larger font than the paragraph it holds, so a ch measure resolves against the
       wrong size. 29rem holds that measure with the paragraph at the body role. */
    max-width: 29rem;
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__text p {
    margin: 0;
    font-size: var(--oc-fs-body);
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__eyebrow {
    margin-bottom: 10px;
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__copy h2 {
    margin-bottom: 14px;
  }


  /* No wordmark on the photograph (founder's call, 20 Aug). It is hidden rather than
     unset in the template: the section only adds the .oc-legacy-story--has-logo class
     when logo_asset_filename is set, and that class is the hook every rule in this
     monolith selects on — clearing the setting would take the whole treatment with it.
     Dropping it also brings the panel down to the mockup's 480px, since the logo was
     the one piece of content pushing it past that floor. */
  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__logo {
    display: none;
  }

  /* The mockup's .ghost, for the one button that sits on a dark photograph. The
     !important flags this used to carry are gone: the button system dropped its
     #MainContent ID, so this (0,4,1) selector now outranks it honestly. Radius and
     height are inherited from the system - only the fill differs. */
  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__button {
    margin-top: 26px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__button:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-2px);
  }

  /* phase A+B: mobile, motion and blur fallbacks */
  @media screen and (max-width: 900px) {
    body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__inner { min-height: 420px; }
    body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::before,
    body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::after {
      padding: 8px 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.oc-facelift.template-index .oc-legacy-video-row__item::after { animation: none; opacity: 0; }
    body.oc-facelift.template-index .oc-legacy-use-cases__media { animation: none; }
    body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::before,
    body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::after { animation: none; }
    body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__inner::before { animation: none; opacity: .5; }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__inner { background: #fff !important; }
    body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::before,
    body.oc-facelift.template-index .oc-legacy-story:not(.oc-legacy-story--has-logo) .oc-legacy-story__media::after { background: #fff; }
    /* the mission ghost button leans on blur for its body; without blur it needs a
       little more fill or it thins out to an outline on the photograph */
    body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__button { background: rgba(255, 255, 255, .22); }
    body.oc-facelift.template-index .oc-legacy-video-row__trigger::before { background: rgba(20, 24, 26, .55); }
  }

  /* ============ 17) ONE STAGE (19 Aug 2026): the mockup background, unified ============
     The homepage had four backdrops stacked: .homepage-wrapper painted white with a
     leftover AQUA wash over the body's warm paper; the hero, air-check, shop, story and
     three-part bands each painted white again; and the video row painted its own oxg
     wash band — the visible seams. Every homepage band is now transparent so the single
     body stage (warm paper + two soft washes, set in the glass-dock layer = the approved
     mockup background) runs continuously from header dock to footer dock. */
  body.oc-facelift.template-index .homepage-wrapper,
  body.oc-facelift.template-index .section-oxiclear-air-check,
  body.oc-facelift.template-index .oc-legacy-use-cases,
  body.oc-facelift.template-index .oc-legacy-video-row,
  body.oc-facelift.template-index .oc-legacy-protection-strip,
  body.oc-facelift.template-index .oc-legacy-story,
  body.oc-facelift.template-index .oc-legacy-three {
    background: transparent !important;
  }

  /* ============ 19) BREATHING BENEFIT TILES (19 Aug 2026) ============
     The one treatment named in the approved nine-section mockup that had never been
     built. "Built for the air out there" was already a frost tile (.oc-legacy-three__grid
     paints the 76% white, 18 px blur, 30 px radius surface) carrying the three coloured
     coins from the 17 Aug icon set — but nothing on it moved, so it read as the only
     inert band on a page whose every other section breathes, floats, pings or drifts.

     Each coin now breathes its OWN coloured glow, staggered across the three, using the
     brand-green-free accent each card already defines. The breath is on box-shadow only,
     deliberately NOT on transform: the coin keeps a hover lift (translateY + scale) from
     the base section, and an infinite transform animation would have overridden it. */
  @keyframes oc-three-breathe {
    0%, 100% {
      box-shadow: 0 14px 30px color-mix(in srgb, var(--oc-three-accent) 15%, transparent);
    }
    50% {
      box-shadow: 0 18px 44px color-mix(in srgb, var(--oc-three-accent) 34%, transparent);
    }
  }

  body.oc-facelift.template-index .oc-legacy-three__icon {
    animation: oc-three-breathe 7s ease-in-out infinite;
  }

  body.oc-facelift.template-index .oc-legacy-three__card--reusability .oc-legacy-three__icon {
    animation-delay: -2.33s;
  }

  body.oc-facelift.template-index .oc-legacy-three__card--international .oc-legacy-three__icon {
    animation-delay: -4.66s;
  }

  @media (prefers-reduced-motion: reduce) {
    body.oc-facelift.template-index .oc-legacy-three__icon { animation: none; }
  }
/* END_SNIPPET:oxiclear-glass-home */

/* START_SNIPPET:oxiclear-legacy-collection-product-card (INDEX:168) */
.oc-shop-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e1e1e1;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 14px 14px 18px;
    transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .oc-shop-card:hover { border-color: rgba(20, 23, 28, 0.2); }

  .oc-shop-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
  }

  .oc-shop-card__image,
  .oc-shop-card__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
  }

  .oc-shop-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: var(--oc-w-semibold);
    letter-spacing: 0.02em;
    color: #14171c;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(20, 23, 28, 0.1);
    border-radius: 999px;
  }

  .oc-shop-card__title {
    margin: 14px 0 0;
    font-size: var(--oc-fs-card);
    font-weight: var(--oc-w-semibold);
    line-height: 1.25;
    letter-spacing: var(--oc-tr-h3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    text-transform: none;
  }

  .oc-shop-card__title a { color: #14171c; text-decoration: none; }

  .oc-shop-card__detail {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: var(--oc-w-medium);
    color: #545c6a;
  }

  /* Colour dots: 16px glass dots (module 13, 6.3), drawn inside a larger
     button with an invisible hit expansion so the tap target stays honest.
     Selected = white gap + ink ring: edge, never colour (6.5). */
  .oc-shop-card__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
  }

  .oc-shop-card__swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .oc-shop-card__swatch::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
  }

  .oc-shop-card__swatch[aria-pressed="true"] .oc-color-dot {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 2px #ffffff, 0 0 0 3.5px #14171c;
  }

  .oc-shop-card__swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .oc-shop-card__price {
    margin: 10px 0 0;
    font-size: 20px;
    font-weight: var(--oc-w-bold);
    letter-spacing: var(--oc-tr-price);
    font-variant-numeric: tabular-nums;
    color: #14171c;
  }

  .oc-shop-card__form { display: grid; margin-top: 14px; }

  a.oc-shop__add { display: flex; }

  .oc-shop-card a.oc-shop__add { margin-top: 14px; }

  .oc-shop__add {
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .oc-shop__add--soldout {
    --oc-action-background: rgba(255, 255, 255, 0.4);
    --oc-action-background-hover: rgba(255, 255, 255, 0.4);
    --oc-action-border: rgba(20, 23, 28, 0.14);
    --oc-action-border-hover: rgba(20, 23, 28, 0.14);
    --oc-action-text: #545c6a;
    --oc-action-elevation: none;
    --oc-action-elevation-hover: none;
  }

  @media screen and (max-width: 700px) {
    .oc-shop-card { padding: 10px 10px 14px; }
    .oc-shop-card__title { font-size: 15px; min-height: 2.55em; }
    .oc-shop-card__detail { font-size: 12px; }
    .oc-shop-card__price { font-size: 17px; }
    .oc-shop-card__badge { top: 8px; left: 8px; padding: 4px 8px; font-size: 10.5px; }
  }
/* END_SNIPPET:oxiclear-legacy-collection-product-card */