/** Shopify CDN: Minification failed

Line 4566:2 Unexpected "{"
Line 4566:3 Expected identifier but found "%"
Line 4567:8 Unexpected "@media"
Line 4569:72 Unterminated string token
Line 4572:80 Unexpected "`"
Line 4575:60 Unterminated string token
Line 4580:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


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

/* START_SECTION:oxiclear-account-hub (INDEX:47) */
/* 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: 14px; }

  /* 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: 20px; font-weight: 800; letter-spacing: -.01em; }
  .oc-hub__latest-date { margin: 2px 0 10px; font-size: 13px; 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: clamp(44px, 4.5vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: .95; }
  .oc-hub__filter-label { margin: 0 0 6px; max-width: 22ch; font-size: 12.5px; font-weight: 700; 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: #3ec13c; 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: 13px; 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: 14px; font-weight: 800; }
  .oc-hub__order-what small { display: block; font-size: 12px; color: #8a938b; }

  .oc-hub__order-total { font-size: 14px; font-weight: 800; 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: 13.5px; font-weight: 800; line-height: 1.3; }
  .oc-hub__item-meta strong a { text-decoration: none; }
  .oc-hub__item-meta small { display: block; margin-top: 2px; font-size: 12px; color: #8a938b; }
  .oc-hub__item-total { font-size: 13.5px; font-weight: 800; }

  .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: 13px; }
  .oc-hub__totals dt { color: #3d443f; }
  .oc-hub__totals dd { margin: 0; font-weight: 700; }
  .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: 15px; font-weight: 800; 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: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(15, 20, 22, .08);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    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: 12.5px; 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: 13px; 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: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a938b; }
  .oc-hub__profile-list dd { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }

  .oc-hub__profile-address { margin: 0 0 12px; font-size: 13px; }
  .oc-hub__profile-address strong { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3d443f; }
  .oc-hub__profile-address p { margin: 0; color: #3d443f; }
  .oc-hub__profile-note { margin: 12px 0 0; font-size: 12px; 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: clamp(19px, 2.1vw, 24px); font-weight: 800; letter-spacing: -.01em; }
  .oc-hub__signin-card > p { margin: 0 0 16px; font-size: 14px; color: #3d443f; }
  .oc-hub__signin-note { margin: 12px 0 0; font-size: 12.5px; color: #8a938b; }

  /* the invoices never render on screen */
  .oc-invoice { display: none; }

  @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; }
  }

  /* ---- INVOICE AS ITS OWN DOCUMENT ----
     Reached via ?invoice=<order id>. The script clones the invoice into
     .oc-invoice-doc and puts .oc-invoice-view on <body>; the rule below then
     removes every other top-level element from the layout — display:none, NOT
     visibility:hidden, so nothing keeps occupying space and the sheet count
     reflects the invoice alone. These are ordinary screen styles, so the iOS
     share sheet (which ignores print stylesheets) captures the same clean
     document a desktop print does. */

  body.oc-invoice-view > *:not(.oc-invoice-doc) { display: none !important; }

  /* This container is appended to <body>, OUTSIDE .oc-account, so it never
     inherits the border-box rule the rest of the account styles rely on. Without
     this its horizontal padding is added to width:100% and the document renders
     28px wider than the phone, cutting the Amount column off the right edge — in
     the screen render, which is exactly what the iOS share sheet saves. */
  .oc-invoice-doc,
  .oc-invoice-doc * { box-sizing: border-box; }

  .oc-invoice-doc {
    width: min(100%, 800px);
    margin: 0 auto;
    padding: 24px 20px 56px;
    color: #000;
    background: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12.5px;
    line-height: 1.5;
  }

  .oc-invoice-doc .oc-invoice { display: block; }

  .oc-invoice-doc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    font-family: var(--body-font-stack, system-ui, sans-serif);
  }

  .oc-invoice-doc .oc-invoice__head { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid #000; }
  .oc-invoice-doc .oc-invoice__head h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; }
  .oc-invoice-doc .oc-invoice__head p { margin: 0 0 2px; }
  .oc-invoice-doc .oc-invoice__meta { text-align: right; }
  .oc-invoice-doc .oc-invoice__meta p { white-space: nowrap; }
  .oc-invoice-doc .oc-invoice__meta span { display: inline-block; min-width: 68px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .oc-invoice-doc .oc-invoice__parties { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 14px 0; }
  .oc-invoice-doc .oc-invoice__parties h4 { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
  .oc-invoice-doc .oc-invoice__parties p { margin: 0; }
  /* Fixed layout with declared widths: the amount column must never be the one
     that gets squeezed off the right edge on a phone. */
  .oc-invoice-doc .oc-invoice__table { width: 100%; margin: 6px 0 12px; border-collapse: collapse; table-layout: fixed; }
  .oc-invoice-doc .oc-invoice__table th,
  .oc-invoice-doc .oc-invoice__table td { padding: 5px 6px; border-bottom: 1px solid #999; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
  .oc-invoice-doc .oc-invoice__table th { border-bottom: 2px solid #000; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
  .oc-invoice-doc .oc-invoice__table th:first-child,
  .oc-invoice-doc .oc-invoice__table tbody td:first-child { width: 46%; }
  .oc-invoice-doc .oc-invoice__table th:nth-child(2),
  .oc-invoice-doc .oc-invoice__table tbody td:nth-child(2) { width: 10%; }
  .oc-invoice-doc .oc-invoice__table th:nth-child(3),
  .oc-invoice-doc .oc-invoice__table tbody td:nth-child(3) { width: 21%; }
  .oc-invoice-doc .oc-invoice__table th:last-child,
  .oc-invoice-doc .oc-invoice__table tbody td:last-child { width: 23%; }
  .oc-invoice-doc .oc-invoice__table tbody td small { display: block; margin-top: 2px; font-size: 9.5px; color: #444; }
  .oc-invoice-doc .oc-invoice__table .num { text-align: right; }
  .oc-invoice-doc .oc-invoice__table tfoot td { padding: 3px 6px; border-bottom: 0; }
  .oc-invoice-doc .oc-invoice__grand td { border-top: 2px solid #000; font-size: 13px; font-weight: 700; }
  .oc-invoice-doc .oc-invoice__foot { margin: 10px 0 0; font-size: 9.5px; color: #333; }

  @media screen and (max-width: 560px) {
    .oc-invoice-doc { padding: 16px 14px 40px; font-size: 11.5px; }
    .oc-invoice-doc .oc-invoice__meta { text-align: left; }
    .oc-invoice-doc .oc-invoice__head h3 { font-size: 17px; }
    .oc-invoice-doc .oc-invoice__parties { gap: 10px 24px; }
    .oc-invoice-doc .oc-invoice__parties > div { flex: 1 1 45%; }
    .oc-invoice-doc .oc-invoice__table th,
    .oc-invoice-doc .oc-invoice__table td { padding: 5px 4px; }
    .oc-invoice-doc .oc-invoice__grand td { font-size: 12px; }
  }

  @page { margin: 14mm; }

  @media print {
    .oc-invoice-doc__actions { display: none !important; }
    .oc-invoice-doc { width: 100%; margin: 0; padding: 0; font-size: 11.5px; }
    .oc-invoice-doc .oc-invoice__table { page-break-inside: auto; }
    .oc-invoice-doc .oc-invoice__table tr { page-break-inside: avoid; }
  }
/* END_SECTION:oxiclear-account-hub */

/* START_SECTION:oxiclear-air-check (INDEX:48) */
/* ============================================================
     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;
    --pc-ink-soft: rgba(16, 20, 12, .66);
    --pc-ink-faint: rgba(16, 20, 12, .46);
    --pc-cell: rgba(255, 255, 255, .38);
    --pc-cell-bd: rgba(255, 255, 255, .58);
    --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;
  }

  .oc-aircheck[data-pulse-ink="light"] {
    --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;
    --pc-ink-soft: rgba(255, 255, 255, .76);
    --pc-ink-faint: rgba(255, 255, 255, .52);
    --pc-cell: rgba(255, 255, 255, .14);
    --pc-cell-bd: rgba(255, 255, 255, .26);
    --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; }
  /* font-family only. This used to be the `font` shorthand, which also reset size and
     weight - and at (0,1,1) it outscored every .oc-aircheck__chip rule, so the chips
     silently rendered at the UA's 16px/400 instead of their own 13px/700. */
  .oc-aircheck button { font-family: inherit; }

  .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: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .oc-aircheck__masthead h2 {
    margin: 0;
    color: #1a1e1c;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.08;
  }

  .oc-aircheck__masthead > p {
    margin: 0;
    color: #3d443f;
    font-size: 15px;
    line-height: 1.55;
  }

  .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;
    box-shadow:
      0 18px 48px color-mix(in srgb, var(--pc-deep) 32%, transparent),
      0 6px 20px rgba(10, 14, 16, .12),
      inset 0 1px 0 rgba(255, 255, 255, .5);
    -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: 11.5px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .oc-aircheck__livedot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3ec13c;
    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: 11.5px; font-weight: 700; }

  .oc-aircheck__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 7px 12px;
    color: var(--pc-ink);
    font-size: 13px;
    font-weight: 700;
    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); }
  }

  /* The page's one green, at the one alpha. This was .9 - a fourth shade. */
  .oc-aircheck__chip--strong {
    color: #07270b;
    background: rgba(62, 193, 60, .88);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px rgba(62, 193, 60, .22);
  }

  .oc-aircheck__chip--ghost { background: transparent; 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: var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-radius: 14px;
  }

  .oc-aircheck__prompt-copy strong { display: block; font-size: 13px; color: var(--pc-ink); }
  .oc-aircheck__prompt-copy span { display: block; margin-top: 2px; font-size: 11.5px; 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;
  }

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

  .oc-aircheck__bignum {
    position: relative;
    font-size: clamp(54px, 5.5vw, 76px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .95;
  }

  .oc-aircheck__bandchip {
    position: relative;
    display: inline-flex;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--pc-ink);
    background: var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-radius: 999px;
  }

  .oc-aircheck__place-block h3 { margin: 10px 0 0; font-size: 16px; font-weight: 800; color: var(--pc-ink); }
  .oc-aircheck__place-block p { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--pc-ink-soft); }

  .oc-aircheck__updated { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--pc-ink-soft); }

  .oc-aircheck__dominant {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;
    align-items: baseline;
    margin-top: 4px;
    font-size: 12.5px;
  }

  .oc-aircheck__dominant > span { color: var(--pc-ink-faint); font-weight: 700; }
  .oc-aircheck__dominant > strong { color: var(--pc-ink); font-weight: 800; }
  .oc-aircheck__dominant > p { margin: 0; color: var(--pc-ink-soft); font-weight: 700; }
  .oc-aircheck__dominant small { font-size: 11px; color: var(--pc-ink-faint); }

  .oc-aircheck__meaning {
    margin: 12px 0 0;
    max-width: 44ch;
    font-size: 13px;
    line-height: 1.55;
    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: 13px/700 pill, transparent until selected. */
  .oc-aircheck__tabs button {
    min-height: 44px;
    padding: 7px 13px;
    color: #3d443f;
    font-size: 13px;
    font-weight: 700;
    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), inset 0 1px 0 #fff;
    -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: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pc-ink-faint);
  }

  .oc-aircheck__panel-state { margin: 10px 0 0; font-size: 12px; 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;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .oc-aircheck__forecast-item {
    display: grid;
    gap: 3px;
    justify-items: center;
    padding: 9px 7px;
    background: var(--pc-cell);
    border: 1px solid var(--pc-cell-bd);
    border-radius: 12px;
    text-align: center;
  }

  .oc-aircheck__forecast-item time { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; 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: 14px; font-weight: 800; color: var(--pc-ink); }
  .oc-aircheck__forecast-item small { font-size: 10px; font-weight: 700; color: var(--pc-ink-soft); }

  .oc-aircheck__forecast-item.is-hourly { flex: 0 0 auto; min-width: 46px; }
  .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: 20px; }
  .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: 11px; font-weight: 800; color: var(--pc-ink-soft); }
  .oc-aircheck__pollutant strong,
  .oc-aircheck__pollen-card strong { font-size: 17px; font-weight: 800; color: var(--pc-ink); }
  .oc-aircheck__pollutant small,
  .oc-aircheck__pollen-card small { font-size: 10px; font-weight: 700; 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: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-ink-faint); }
  .oc-aircheck__pollen-days { display: grid; gap: 4px; font-size: 11px; font-weight: 600; 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: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-ink-faint); }
  .oc-aircheck__scale-head b { font-size: 12.5px; font-weight: 800; 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: inset -1px 0 0 rgba(255, 255, 255, .35); }
  .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: 10.5px;
    font-weight: 700;
    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: 600 14px/1 inherit;
    background: transparent;
    border: 0;
    outline: none;
    appearance: none;
  }

  .oc-aircheck__combobox input::placeholder { color: #9aa298; font-weight: 500; }
  .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;
    font-size: 15px;
    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] strong { font-size: 13.5px; font-weight: 700; }
  .oc-aircheck__suggestions li[data-air-option] span { font-size: 11.5px; color: #5a6a5c; }

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

  .oc-aircheck__suggestions > p { margin: 6px 12px 6px; font-size: 10.5px; color: #8a938b; }

  .oc-aircheck__save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    color: #07270b;
    font-size: 13px;
    font-weight: 800;
    background: rgba(62, 193, 60, .9);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px rgba(62, 193, 60, .2);
    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(95, 215, 92, .95); 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: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pc-ink-soft);
  }

  .oc-aircheck__favorites-head span { font-size: 11px; font-weight: 600; 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: 11px; color: var(--pc-ink-soft); }
  .oc-aircheck__favorites [data-air-favorite-open] strong { font-size: 13px; font-weight: 700; }
  .oc-aircheck__favorites [data-air-favorite-open] small { margin-left: 5px; font-size: 11px; font-weight: 600; 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);
    font-size: 14px;
    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: 12px; color: var(--pc-ink-faint); }

  .oc-aircheck__notice { margin: 0; font-size: 12px; font-weight: 600; 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: 11px; color: var(--pc-ink-faint); }
  .oc-aircheck__attribution a { color: inherit; text-decoration: underline; }
  .oc-aircheck__fineprint > p { margin: 0; font-size: 11px; 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;
      font-size: 11px;
      line-height: 1.35;
    }

    /* 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__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:49) */
.oc-b2b {
    --oc-b2b-aqua: #5cc6d0;
    --oc-b2b-aqua-bright: #69cfd1;
    --oc-b2b-night: #242424;
    --oc-b2b-ink: #000;
    --oc-b2b-soft-ink: #414141;
    --oc-b2b-muted: #666;
    --oc-b2b-line: #e1e1e1;
    --oc-b2b-soft: #f1f2f3;
    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(--oxg-wash,
        radial-gradient(1100px 560px at 12% -8%, rgba(0, 182, 217, .10), transparent 60%),
        radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .06), transparent 55%)),
      #f6f9f9;
    font-family: var(--oc-system-font-stack, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  }

  .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: #27727a;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .14em;
    line-height: 1.3;
    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);
    font-size: clamp(36px, 4.2vw, 58px);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1;
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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(92, 198, 208, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(92, 198, 208, .05), 0 0 0 72px rgba(92, 198, 208, .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);
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 1.02;
  }

  .oc-b2b__hero-copy h2 {
    max-width: 16ch;
    font-size: clamp(32px, 3.25vw, 48px);
    text-wrap: balance;
  }

  .oc-b2b__lead {
    max-width: 720px;
    margin: 22px 0 0;
    color: var(--oc-b2b-soft-ink);
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.58;
  }

  .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-night);
    border-radius: var(--oxg-radius-pill, 999px);
    color: #fff;
    background: var(--oc-b2b-night);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .22);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .045em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    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: #000;
  }

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .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: var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    font-size: 13px;
    font-weight: 650;
  }

  .oc-b2b__trust-list li::before {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oc-b2b-aqua);
    box-shadow: 0 0 0 4px rgba(92, 198, 208, .14);
    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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .oc-b2b__route-summary .oc-b2b__route-label {
    color: #27727a;
  }

  .oc-b2b__route-summary h2 {
    margin: 0 0 22px;
    color: var(--oc-b2b-ink);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.05;
  }

  .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(11, 47, 51, .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: #27727a;
    font-weight: 750;
  }

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

  .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);
    font-size: 17px;
    line-height: 1.62;
  }

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
      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), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

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

    .oc-b2b .oc-b2b__button--secondary:hover {
      box-shadow: 0 14px 30px rgba(36, 36, 36, .12), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }
  }

  .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), inset 0 1px 0 rgba(255, 255, 255, .92);
    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: 21px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
  }

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

  .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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__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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    text-align: center;
  }

  .oc-b2b__proof-points strong {
    color: var(--oc-b2b-ink);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
  }

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

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

  .oc-b2b__test-note p {
    margin: 0;
    color: var(--oc-b2b-soft-ink);
    font-size: 14px;
    line-height: 1.55;
  }

  .oc-b2b__text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #1f6870;
    font-weight: 700;
    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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
  }

  .oc-b2b__availability {
    margin: 16px auto 0;
    color: var(--oc-b2b-muted);
    font-size: 13px;
    line-height: 1.5;
    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: #27727a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .oc-b2b__process-list p {
    font-size: 14px;
  }

  .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), inset 0 1px 0 rgba(255, 255, 255, .16);
  }

  .oc-b2b__distribution-note .oc-b2b__kicker {
    color: var(--oc-b2b-aqua-bright);
  }

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

  .oc-b2b__distribution-note > p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 17px;
    line-height: 1.68;
  }

  .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
    scroll-margin-top: 120px;
  }

  .oc-b2b__response-note {
    display: flex;
    margin-top: 30px;
    padding: 18px;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(92, 198, 208, .32);
    border-radius: 14px;
    background: rgba(92, 198, 208, .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: 14px;
    line-height: 1.5;
  }

  .oc-b2b__direct-contact a {
    color: #1f6870;
    font-weight: 700;
  }

  .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: 13px;
    font-weight: 700;
    line-height: 1.4;
  }

  .oc-b2b__field :is(input, select, textarea) {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--oxg-line, rgba(11, 47, 51, .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: var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    font: inherit;
    line-height: 1.4;
    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(11, 47, 51, .3);
  }

  .oc-b2b__field :is(input, select, textarea):focus-visible,
  .oc-b2b :is(a, button):focus-visible {
    outline: 3px solid rgba(0, 149, 178, .55);
    outline-offset: 2px;
  }

  .oc-b2b__field :is(input, select, textarea):focus-visible {
    border-color: #27727a;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 182, 217, .14), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .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: 12px;
    line-height: 1.45;
  }

  .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: 19px;
  }

  .oc-b2b__fineprint {
    max-width: 920px;
    margin: 24px auto 0;
    color: var(--oc-b2b-muted);
    font-size: 12px;
    line-height: 1.55;
    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 > .oc-b2b__inner > h1 {
      font-size: clamp(34px, 9vw, 44px);
      line-height: 1.02;
    }

    .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__hero-copy h2 {
      font-size: clamp(32px, 9vw, 42px);
    }

    .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:50) */
.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; font-size: 24px; line-height: 1.3; }
  .legacy-error-page__copy { line-height: 1.7; }
  .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:51) */
.legacy-article {
    padding: 30px 30px 50px;
    color: #000000;
    background: #ffffff;
  }

  .legacy-article__inner {
    width: min(100%, 1660px);
    margin: 0 auto;
  }

  .legacy-article__header {
    margin-bottom: 30px;
    text-align: center;
  }

  .legacy-article__header h1 {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 10px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1px;
  }

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

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

  .legacy-article__image {
    margin-bottom: 28px;
  }

  .legacy-article__image img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Article body media: Admin-authored HTML carries width/height attributes for
     aspect reservation, so height must track the responsive width or the
     attribute height stretches the render. Figures span the full body column. */
  .legacy-article__body img {
    max-width: 100%;
    height: auto;
  }

  .legacy-article__body figure {
    margin: 26px 0;
  }

  .legacy-article__body figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #4a5a55;
  }

  .legacy-article__next-previous {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 0;
    margin-top: 30px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
  }

  .legacy-article__next-previous a,
  .legacy-article__sidebar a {
    color: inherit;
  }

  .legacy-article__comments {
    margin-top: 35px;
  }

  .legacy-article__comments h2,
  .legacy-article__sidebar h2 {
    font-size: 16px;
  }

  .legacy-article__comment-list {
    padding: 0;
    list-style: none;
  }

  .legacy-article__comment-list li {
    padding: 20px 0;
    border-bottom: 1px solid #e1e1e1;
  }

  .legacy-article__comment-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .legacy-article__comment-fields input,
  .legacy-article__comment-fields textarea {
    width: 100%;
    margin-bottom: 14px;
    border: 1px solid #d6d6d6;
    border-radius: 0;
  }

  .legacy-article__comment-fields input {
    height: 46px;
    padding: 0 12px;
  }

  .legacy-article__comment-fields textarea {
    min-height: 106px;
    padding: 12px;
  }

  .legacy-article__comment-form .btn {
    border-radius: 0;
    background: #000000;
    color: #ffffff;
  }

  .legacy-article__sidebar ul {
    padding: 0;
    margin: 0 0 35px;
    list-style: none;
  }

  .legacy-article__sidebar-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 15px;
  }

  .legacy-article__sidebar li {
    margin-bottom: 16px;
  }

  .legacy-article__sidebar time {
    display: block;
    margin-top: 4px;
    color: #777777;
    font-size: 13px;
  }

  @media screen and (max-width: 767px) {
    .legacy-article {
      padding: 40px 20px;
    }

    .legacy-article__layout,
    .legacy-article__comment-fields {
      grid-template-columns: 1fr;
    }

    .legacy-article__next-previous {
      flex-direction: column;
    }
  }

  /* 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-article__layout {
    gap: clamp(28px, 5vw, 68px);
  }

  body.oc-facelift .legacy-article__sidebar {
    height: fit-content;
    padding: 24px;
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-card);
    background: rgba(243, 243, 243, .86);
    box-shadow: var(--oc-shadow-card);
  }

  body.oc-facelift .legacy-article__main {
    min-width: 0;
    padding: clamp(24px, 4vw, 48px);
    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 .legacy-article__image,
  body.oc-facelift .legacy-article__image img {
    overflow: hidden;
    border-radius: var(--oc-radius-card);
  }

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

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

/* START_SECTION:oxiclear-legacy-benefits-page (INDEX:52) */
.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(0, 182, 217, .10), transparent 60%),
        radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .06), transparent 55%)),
      #f6f9f9;
    font-family: var(--body-font-stack);
    line-height: 1.6;
  }

  .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-benefits__breadcrumb {
    position: absolute;
    top: 540px;
    z-index: 999;
  }

  .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;
    font-size: 30px;
    font-weight: 600;
    line-height: 33px;
    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: #00b6d9;
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
  }

  .oxiclear-legacy-benefits__row:nth-of-type(2) { --oc-benefit-accent: #7168c9; }
  .oxiclear-legacy-benefits__row:nth-of-type(3) { --oc-benefit-accent: #4e9b58; }
  .oxiclear-legacy-benefits__row:nth-of-type(4) { --oc-benefit-accent: #4178b8; }
  .oxiclear-legacy-benefits__row:nth-of-type(5) { --oc-benefit-accent: #c9842f; }
  .oxiclear-legacy-benefits__row:nth-of-type(6) { --oc-benefit-accent: #00b6d9; }
  .oxiclear-legacy-benefits__row:nth-of-type(7) { --oc-benefit-accent: #4e9b58; }
  .oxiclear-legacy-benefits__row:nth-of-type(8) { --oc-benefit-accent: #7168c9; }

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

  .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), inset 0 1px 0 rgba(255, 255, 255, .94);
    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), inset 0 1px 0 rgba(255, 255, 255, .96);
    }
  }

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

  .oxiclear-legacy-benefits__copy h2 {
    margin: 0 0 30px;
    color: #070707;
    font-size: 24px;
    font-weight: 600;
    line-height: 33px;
  }

  .oxiclear-legacy-benefits__copy p {
    margin: 0 0 16px;
    color: inherit;
    font-size: 18px;
    line-height: 1.6;
  }

  .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 {
      font-size: 26px;
      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 h2 {
      font-size: 24px;
    }

    .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__breadcrumb {
    position: static;
    width: min(100%, 1170px);
    margin: 16px auto 0;
    padding: 0;
  }

  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 {
    font-family: var(--oc-font-display);
    font-size: clamp(25px, 3vw, 42px);
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.05;
    text-wrap: balance;
  }

  body.oc-facelift .oxiclear-legacy-benefits__copy p {
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.7;
  }

  @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:53) */
.legacy-blog {
    padding: 30px 30px 50px;
    color: #000000;
    background: #ffffff;
  }

  .legacy-blog__inner {
    width: min(100%, 1660px);
    margin: 0 auto;
  }

  .legacy-blog__title {
    margin-bottom: 30px;
    text-align: center;
  }

  .legacy-blog__title h1 {
    position: relative;
    margin: 0;
    padding-bottom: 10px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1px;
  }

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

  .legacy-blog__title a,
  .legacy-blog a {
    color: inherit;
  }

  .legacy-blog__rss {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    font-size: 11px;
    letter-spacing: 0.08em;
    vertical-align: middle;
  }

  .legacy-blog__rss svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

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

  .legacy-blog__post {
    display: grid;
    grid-template-columns: minmax(145px, 1fr) minmax(0, 3fr);
    gap: 30px;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #e1e1e1;
  }

  .legacy-blog__meta {
    font-size: 14px;
    line-height: 1.65;
  }

  .legacy-blog__meta p {
    margin: 0 0 8px;
  }

  .legacy-blog__meta time {
    display: block;
    margin-bottom: 14px;
  }

  .legacy-blog__image {
    display: block;
    margin-bottom: 24px;
  }

  .legacy-blog__image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .legacy-blog__summary h2 {
    margin: 0 0 16px;
    font-size: 22px;
  }

  .legacy-blog__summary h2 a,
  .legacy-blog__summary > p a {
    text-decoration: none;
  }

  .legacy-blog__sidebar h2 {
    margin: 0 0 18px;
    font-size: 16px;
  }

  .legacy-blog__sidebar-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 15px;
  }

  .legacy-blog__sidebar ul {
    padding: 0;
    margin: 0 0 35px;
    list-style: none;
  }

  .legacy-blog__sidebar li {
    margin-bottom: 16px;
  }

  .legacy-blog__sidebar time {
    display: block;
    margin-top: 4px;
    color: #777777;
    font-size: 13px;
  }

  @media screen and (max-width: 767px) {
    .legacy-blog {
      padding: 40px 20px;
    }

    .legacy-blog__layout,
    .legacy-blog__post {
      grid-template-columns: 1fr;
    }

    .legacy-blog__layout {
      gap: 35px;
    }

    .legacy-blog__post {
      gap: 18px;
    }
  }

  /* 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-blog__layout {
    gap: clamp(28px, 5vw, 68px);
  }

  body.oc-facelift .legacy-blog__post {
    margin-bottom: 22px;
    padding: clamp(22px, 3vw, 34px);
    background: rgba(255, 255, 255, .9);
  }

  body.oc-facelift .legacy-blog__sidebar {
    height: fit-content;
    padding: 24px;
    border: 1px solid var(--oc-color-line);
    border-radius: var(--oc-radius-card);
    background: rgba(243, 243, 243, .86);
    box-shadow: var(--oc-shadow-card);
  }

  @media (min-width: 768px) and (max-width: 989px) {
    body.oc-facelift .legacy-blog__layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:oxiclear-legacy-blog */

/* START_SECTION:oxiclear-legacy-cart (INDEX:54) */
.legacy-cart { padding: 60px 30px; background-color: #f6f9f9; background-image: var(--oxg-wash, radial-gradient(1100px 560px at 12% -8%, rgba(0, 182, 217, .10), transparent 60%), radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .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; font-size: 24px; line-height: 1.3; }
  .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: 13px; font-weight: 600; 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: var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96)); 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: 15px; font-weight: 600; text-decoration: none; }
  .legacy-cart__meta, .legacy-cart__property { margin-top: 4px; color: #666; font-size: 13px; line-height: 1.55; }
  .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: var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96)); text-align: center; }
  .legacy-cart__quantity input:focus-visible { outline: 2px solid var(--oxg-accent, #00b6d9); outline-offset: 2px; }
  .legacy-cart__discounts { margin: 8px 0 0; padding: 0; list-style: none; color: #f26c4f; font-size: 12px; }
  .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: var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96)); resize: vertical; }
  .legacy-cart__notes textarea:focus-visible { outline: 2px solid var(--oxg-accent, #00b6d9); 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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96)); 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%)); }
  .legacy-cart__summary-line { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 12px; }
  .legacy-cart__subtotal strong { font-size: 20px; }
  .legacy-cart__shipping { margin: 0 0 20px; font-size: 13px; }
  .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: uppercase; box-shadow: 0 12px 26px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .25); }
  .legacy-cart__button--secondary { background: #818181; border-color: #818181; }
  .legacy-cart__button:focus-visible { outline: 2px solid var(--oxg-accent, #00b6d9); outline-offset: 3px; }
  .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96)); 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%)); }
  .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), inset 0 1px 0 rgba(255, 255, 255, .25); }
  }

  @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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96)); }
    .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: 600; }
    .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:55) */
.legacy-collection-page {
    color: #000000;
    background-color: #f6f9f9;
    background-image: var(--oxg-wash,
      radial-gradient(1100px 560px at 12% -8%, rgba(0, 182, 217, .10), transparent 60%),
      radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .06), transparent 55%));
  }

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

  .legacy-collection-page__hero {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
  }

  .legacy-collection-page__hero img {
    display: block;
    width: 100%;
    height: auto;
  }

  .legacy-collection-page__heading {
    padding: 30px 15px 0;
    text-align: center;
  }

  .legacy-collection-page__heading h1 {
    margin: 0;
    color: #272727;
    font-size: 35px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 3px;
    text-transform: none;
  }

  .legacy-collection-page__heading span {
    display: block;
    margin-top: -2px;
    color: #272727;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 2px;
  }

  .legacy-collection-page__breadcrumb {
    width: min(100% - 30px, 1170px);
    margin: 2px auto 12px;
  }

  .legacy-collection-page__desktop {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    background: transparent;
  }

  .legacy-collection-page__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 8px 6px 20px;
  }

  .legacy-collection-page__tab {
    display: inline-block;
    padding: 14px 22px;
    color: #172b4d;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    appearance: none;
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    box-shadow: 0 10px 24px rgba(36, 36, 36, .05), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .legacy-collection-page__tab[aria-selected="true"] {
    color: #ffffff;
    background: var(--oxg-ink, #242424);
    border-color: var(--oxg-ink, #242424);
    box-shadow: 0 14px 30px rgba(36, 36, 36, .16), inset 0 1px 0 rgba(255, 255, 255, .22);
  }

  .legacy-collection-page__tab:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
  }

  .legacy-collection-page__panel {
    padding: clamp(28px, 4vw, 60px);
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
  }

  .legacy-collection-page__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
  }

  .legacy-collection-page__product {
    min-width: 0;
    height: 100%;
  }

  .legacy-collection-page__empty {
    grid-column: 1 / -1;
    display: grid;
    min-height: 180px;
    place-content: center;
    gap: 6px;
    padding: 30px;
    text-align: center;
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-lg, 22px);
    box-shadow: 0 12px 30px rgba(36, 36, 36, .06), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .legacy-collection-page__empty strong {
    font-size: 18px;
  }

  .legacy-collection-page__empty span {
    color: #626262;
  }

  .legacy-collection-product-card {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    text-align: center;
    padding: 16px 14px;
    background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-lg, 22px);
    box-shadow: 0 12px 30px rgba(36, 36, 36, .06), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .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;
    border-radius: 14px;
  }

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

  .legacy-collection-product-card h3 {
    flex: 1 0 auto;
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
  }

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

  .legacy-collection-product-card__price {
    flex: 0 0 auto;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    width: fit-content;
    min-height: 34px;
    margin: 0 auto 15px;
    padding: 6px 16px;
    color: #000000;
    font-size: 16px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-pill, 999px);
    box-shadow: 0 8px 18px rgba(36, 36, 36, .05), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .legacy-collection-page__mobile {
    display: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .legacy-collection-page__tab,
    .legacy-collection-product-card {
      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-collection-page__tab:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(36, 36, 36, .10), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }

    .legacy-collection-page__tab[aria-selected="true"]:hover {
      box-shadow: 0 16px 34px rgba(36, 36, 36, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
    }

    .legacy-collection-product-card:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: var(--oxg-shadow-lift, 0 26px 64px rgba(36, 36, 36, .13)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }
  }

  @media (min-width: 990px) {
    .legacy-collection-page .legacy-collection-page__grid[data-card-count="1"] {
      max-width: 320px;
      grid-template-columns: minmax(0, 1fr);
      margin-inline: auto;
    }

    .legacy-collection-page .legacy-collection-page__grid[data-card-count="2"] {
      max-width: 680px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-inline: auto;
    }

    .legacy-collection-page .legacy-collection-page__grid[data-card-count="3"] {
      max-width: 1020px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-inline: auto;
    }
  }

  @media (min-width: 1200px) {
    .legacy-collection-page .legacy-collection-page__grid[data-card-count="7"] {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .legacy-collection-page .legacy-collection-page__grid[data-card-count="7"] > .legacy-collection-page__product {
      grid-column: span 2;
    }

    .legacy-collection-page .legacy-collection-page__grid[data-card-count="7"] > .legacy-collection-page__product:nth-child(5) {
      grid-column: 2 / span 2;
    }
  }

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

  @media (max-width: 767px) {
    .legacy-collection-page__heading {
      padding-top: 30px;
    }

    .legacy-collection-page__heading h1 {
      font-size: 22px;
      line-height: 28px;
      letter-spacing: 0;
    }

    .legacy-collection-page__breadcrumb {
      width: calc(100% - 30px);
      margin-bottom: 10px;
    }

    .legacy-collection-page__desktop {
      display: none;
    }

    .legacy-collection-page__mobile {
      display: block;
      padding: 0 15px 30px;
    }

    .legacy-collection-page__accordion {
      margin: 0 0 12px;
      border-bottom: 0;
    }

    .legacy-collection-page__accordion summary {
      position: relative;
      display: block;
      box-sizing: border-box;
      width: 100%;
      min-height: 44px;
      padding: 15px 42px 15px 20px;
      color: #000000;
      font-weight: 700;
      list-style: none;
      cursor: pointer;
      background: var(--oxg-surface-strong, rgba(255, 255, 255, .88));
      border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
      border-radius: var(--oxg-radius-pill, 999px);
      box-shadow: 0 10px 24px rgba(36, 36, 36, .05), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }

    .legacy-collection-page__accordion summary:focus-visible {
      outline: 2px solid #000000;
      outline-offset: 2px;
    }

    .legacy-collection-page__accordion summary::-webkit-details-marker {
      display: none;
    }

    .legacy-collection-page__accordion summary::after {
      position: absolute;
      top: 50%;
      right: 15px;
      font-size: 18px;
      font-weight: 400;
      content: "+";
      transform: translateY(-50%);
    }

    .legacy-collection-page__accordion[open] summary {
      color: #ffffff;
      background: var(--oxg-ink, #242424);
      border-color: var(--oxg-ink, #242424);
      box-shadow: 0 14px 30px rgba(36, 36, 36, .16), inset 0 1px 0 rgba(255, 255, 255, .22);
    }

    .legacy-collection-page__accordion[open] summary::after {
      content: "−";
    }

    .oc-facelift .legacy-collection-page__mobile .legacy-collection-page__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      padding: 15px 0;
      background: transparent;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .legacy-collection-page__tab,
    .legacy-collection-product-card {
      transition: none;
    }

    .legacy-collection-page__tab:hover,
    .legacy-collection-product-card:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .legacy-collection-page__panel,
    .legacy-collection-product-card,
    .legacy-collection-page__empty {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .legacy-collection-page__panel,
    .legacy-collection-product-card,
    .legacy-collection-page__empty {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
/* END_SECTION:oxiclear-legacy-collection-page */

/* START_SECTION:oxiclear-legacy-company-page (INDEX:56) */
/* No stage paint here. This used to set #f6f9f9 under an aqua wash
     (rgba(0,182,217,.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);
    font-family: var(--oc-system-font-stack);
  }

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

  .oxiclear-legacy-company__breadcrumb {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* Size, weight, colour and alignment come from the content-page layer. */
  .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 {
    font-size: 31px;
    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__breadcrumb {
    padding-block: 0;
  }

  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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  /* 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;
  }

  /* Scoped through the section class on purpose. The shared display-heading rule in
     oxiclear-facelift-foundation sets -.025em at the same specificity, and Shopify
     concatenates {% stylesheet %} blocks alphabetically, so "foundation" previously
     landed after "content" and won ties. The extra class keeps this rule winning
     regardless of bundle position. */
  body.oc-facelift .oxiclear-legacy-company .oxiclear-legacy-company__copy h2 {
    color: #2d2d2d;
    font-size: clamp(30px, 4.1vw, 58px);
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 1.02;
  }

  body.oc-facelift .oxiclear-legacy-company__copy p {
    color: #2d2d2d;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.65;
  }

  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:57) */
.oxiclear-legacy-contact-page {
    color: #272727;
    background-color: #f6f9f9;
    background-image: var(--oxg-wash,
      radial-gradient(1100px 560px at 12% -8%, rgba(0, 182, 217, .10), transparent 60%),
      radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .06), transparent 55%));
    font-family: var(--oc-system-font-stack);
  }

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

  .oxiclear-legacy-contact-page__map-form {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    gap: clamp(18px, 2.5vw, 28px);
    width: min(1170px, calc(100% - 30px));
    margin: 0 auto;
  }

  .oxiclear-legacy-contact-page__map {
    min-height: 525px;
    overflow: hidden;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: var(--oxg-radius-xl, 30px);
    background: #fff;
    box-shadow: var(--oxg-shadow, 0 20px 55px rgba(36, 36, 36, .09));
  }

  .oxiclear-legacy-contact-page__map iframe {
    display: block;
    width: 100%;
    height: 525px;
    border: 0;
  }

  .oxiclear-legacy-contact-page__form {
    padding: clamp(32px, 4vw, 50px);
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
    font-family: var(--oc-system-font-stack);
  }

  .oxiclear-legacy-contact-page__form h2 {
    margin: 0 0 15px;
    color: #363636;
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
  }

  .oxiclear-legacy-contact-page__form input,
  .oxiclear-legacy-contact-page__form textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0 0 20px;
    padding: 12px 16px;
    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: var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .oxiclear-legacy-contact-page__form input:focus-visible,
  .oxiclear-legacy-contact-page__form textarea:focus-visible {
    outline: 2px solid var(--oxg-accent, #00b6d9);
    outline-offset: 2px;
    border-color: rgba(0, 182, 217, .55);
  }

  .oxiclear-legacy-contact-page__form textarea {
    min-height: 130px;
    resize: vertical;
  }

  .oxiclear-legacy-contact-page__form button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 15px 32px;
    border: 0;
    border-radius: var(--oxg-radius-pill, 999px);
    color: #fff;
    background: #000;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .25);
  }

  .oxiclear-legacy-contact-page__form button:focus-visible {
    outline: 2px solid var(--oxg-accent, #00b6d9);
    outline-offset: 3px;
  }

  .oxiclear-legacy-fa {
    font-family: "OxiClear Legacy FontAwesome";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .oxiclear-legacy-fa--clock::before {
    content: "\f017";
  }

  .oxiclear-legacy-fa--map-marker::before {
    content: "\f041";
  }

  .oxiclear-legacy-fa--phone::before {
    content: "\f095";
  }

  .oxiclear-legacy-fa--envelope::before {
    content: "\f0e0";
  }

  .oxiclear-legacy-fa--paper-plane::before {
    content: "\f1d9";
  }

  .oxiclear-legacy-contact-page__submit-icon {
    margin-right: 10px;
  }

  .oxiclear-legacy-contact-page > h1 {
    margin: 48px 20px 20px;
    color: #272727;
    font-size: 30px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 3px;
    text-align: center;
  }

  .oxiclear-legacy-contact-page > h1 span {
    line-height: 12px;
  }

  .oxiclear-legacy-contact-page__intro {
    width: min(1170px, calc(100% - 60px));
    margin: 0 auto 75px;
    color: #606060;
    font-size: 20px;
    line-height: 24px;
  }

  .oxiclear-legacy-contact-page__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    width: min(1170px, calc(100% - 30px));
    margin: 70px auto 60px;
  }

  .oxiclear-legacy-contact-page__facts article {
    position: relative;
    min-height: 190px;
    padding: 35px 15px 15px;
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
    text-align: center;
  }

  .oxiclear-legacy-contact-page__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: -72px auto 22px;
    border: 1px solid var(--oxg-border, rgba(255, 255, 255, .92));
    border-radius: 50%;
    color: #212b35;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 26px rgba(36, 36, 36, .10), inset 0 1px 0 #fff;
    font-size: 40px;
  }

  .oxiclear-legacy-contact-page__facts h2 {
    margin: 0 0 15px;
    color: #2d2d2d;
    font-size: 20px;
    font-weight: 500;
  }

  .oxiclear-legacy-contact-page__facts p {
    margin: 0;
    color: #272727;
    line-height: 1.5;
    text-align: left;
  }

  .oxiclear-legacy-contact-page__facts article:nth-child(n + 3) p {
    text-align: center;
  }

  @media (hover: hover) and (pointer: fine) {
    .oxiclear-legacy-contact-page__facts article,
    .oxiclear-legacy-contact-page__form 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-contact-page__facts article:hover {
      transform: translateY(-3px);
      box-shadow: var(--oxg-shadow-lift, 0 26px 64px rgba(36, 36, 36, .13)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }

    .oxiclear-legacy-contact-page__form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    .oxiclear-legacy-contact-page__map-form {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oxiclear-legacy-contact-page__map {
      grid-column: 1 / -1;
    }

    .oxiclear-legacy-contact-page__form {
      grid-column: 1 / 2;
    }

    .oxiclear-legacy-contact-page__intro {
      width: min(585px, calc(50% - 15px));
      margin-right: 0;
      margin-left: max(15px, calc((100% - 1170px) / 2));
    }
  }

  @media (max-width: 900px) {
    .oxiclear-legacy-contact-page__facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 70px;
    }
  }

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

    .oxiclear-legacy-contact-page__map,
    .oxiclear-legacy-contact-page__form {
      grid-column: auto;
    }

    .oxiclear-legacy-contact-page__form {
      padding: 35px 20px;
    }

    .oxiclear-legacy-contact-page > h1 {
      font-size: 22px;
      letter-spacing: 0;
    }

    .oxiclear-legacy-contact-page__intro {
      width: calc(100% - 32px);
    }

    .oxiclear-legacy-contact-page__facts {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oxiclear-legacy-contact-page__facts article,
    .oxiclear-legacy-contact-page__form button {
      transition: none;
    }

    .oxiclear-legacy-contact-page__facts article:hover,
    .oxiclear-legacy-contact-page__form button:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oxiclear-legacy-contact-page__form,
    .oxiclear-legacy-contact-page__facts article,
    .oxiclear-legacy-contact-page__form input,
    .oxiclear-legacy-contact-page__form textarea {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oxiclear-legacy-contact-page__form,
    .oxiclear-legacy-contact-page__facts 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-contact-page__map-form {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1240px);
    margin: clamp(22px, 3vw, 42px) auto;
    overflow: hidden;
    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);
  }

  body.oc-facelift .oxiclear-legacy-contact-page__map iframe {
    min-height: 100%;
  }

  body.oc-facelift .oxiclear-legacy-contact-page__form {
    padding: clamp(28px, 4vw, 52px);
    background: linear-gradient(145deg, rgba(243, 243, 243, .96), rgba(255, 255, 255, .94));
  }

  body.oc-facelift .oxiclear-legacy-contact-page__form h2 {
    font-family: var(--oc-font-display);
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.1;
  }

  body.oc-facelift .oxiclear-legacy-contact-page__form :is(input, textarea) {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--oc-color-line-strong);
    border-radius: var(--oc-radius-control);
  }

  body.oc-facelift .oxiclear-legacy-contact-page__intro {
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 780px);
    margin: clamp(22px, 3vw, 42px) auto;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.75;
  }

  body.oc-facelift .oxiclear-legacy-contact-page__facts {
    gap: clamp(12px, 2vw, 24px);
    width: min(calc(100% - var(--oc-space-page) - var(--oc-space-page)), 1240px);
    margin: 0 auto var(--oc-space-section);
  }

  body.oc-facelift .oxiclear-legacy-contact-page__facts article {
    padding: clamp(22px, 3vw, 34px);
    background: rgba(255, 255, 255, .9);
  }

  body.oc-facelift .oxiclear-legacy-contact-page__icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 50%;
    background: #f1f2f3;
  }

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

    body.oc-facelift .oxiclear-legacy-contact-page__map,
    body.oc-facelift .oxiclear-legacy-contact-page__form {
      grid-column: auto;
    }

    body.oc-facelift .oxiclear-legacy-contact-page__map {
      min-height: 0;
      border-right: 0;
      border-bottom: 1px solid var(--oc-color-line);
    }

    body.oc-facelift .oxiclear-legacy-contact-page__map iframe {
      height: clamp(340px, 50vw, 420px);
      min-height: 0;
    }
  }

  @media (min-width: 990px) and (max-width: 1024px) {
    body.oc-facelift .oxiclear-legacy-contact-page__map-form {
      grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    }

    body.oc-facelift .oxiclear-legacy-contact-page__map,
    body.oc-facelift .oxiclear-legacy-contact-page__form {
      grid-column: auto;
    }

    body.oc-facelift .oxiclear-legacy-contact-page__map {
      border-right: 1px solid var(--oc-color-line);
      border-bottom: 0;
    }
  }

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

    body.oc-facelift .oxiclear-legacy-contact-page__map iframe {
      min-height: 300px;
    }

    body.oc-facelift .oxiclear-legacy-contact-page__facts {
      grid-template-columns: 1fr;
      width: calc(100% - 20px);
    }
  }
/* END_SECTION:oxiclear-legacy-contact-page */

/* START_SECTION:oxiclear-legacy-customer-account (INDEX:58) */
/* OxiClear account dashboard — section-specific rules (shared primitives live
     in snippets/oxiclear-legacy-customer-styles.liquid). */

  .oc-dash__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-dash__latest { grid-area: latest; }
  .oc-dash__filter { grid-area: filter; }
  .oc-dash__orders { grid-area: orders; }
  .oc-dash__gear { grid-area: gear; }
  .oc-dash__help { grid-area: help; }
  .oc-dash__profile { grid-area: profile; }

  .oc-dash__empty { margin: 0 0 14px; color: #8a938b; font-size: 14px; }

  /* latest order */
  .oc-dash__latest-body {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
    justify-content: space-between;
  }

  .oc-dash__latest-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .oc-dash__latest-name a { text-decoration: none; }
  .oc-dash__latest-date { margin: 2px 0 10px; font-size: 13px; color: #3d443f; }

  .oc-dash__thumbstack { display: flex; padding-left: 10px; }

  .oc-dash__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-dash__thumb--more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3d443f;
    font-size: 12px;
    font-weight: 800;
    background: rgba(255, 255, 255, .8);
  }

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

  /* filter life */
  .oc-dash__filter-read {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 2px 0 12px;
  }

  .oc-dash__filter-num {
    font-size: clamp(44px, 4.5vw, 58px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .95;
  }

  .oc-dash__filter-label { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #3d443f; max-width: 22ch; }

  .oc-dash__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-dash__meter i {
    display: block;
    height: 100%;
    background: #3ec13c;
    border-radius: 999px;
    transition: width .8s cubic-bezier(.22, .72, .22, 1);
  }

  .oc-dash__meter i.is-wait { background: #e8a13a; }
  .oc-dash__meter i.is-alert { background: salmon; }

  .oc-dash__filter-copy { margin: 0 0 14px; font-size: 13px; color: #3d443f; }

  .oc-dash__restock { display: flex; flex-direction: column; gap: 8px; }

  /* order history */
  .oc-dash__order-list { margin: 0; padding: 0; list-style: none; }

  .oc-dash__order-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 11px 10px;
    text-decoration: none;
    border-radius: 16px;
    transition: background-color 160ms ease;
  }

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

  .oc-dash__order-list li + li .oc-dash__order-row { border-top: 1px solid rgba(15, 20, 22, .06); border-radius: 0 0 16px 16px; }

  .oc-dash__order-row.is-cancelled { opacity: .55; }

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

  .oc-dash__order-what { min-width: 0; }
  .oc-dash__order-what strong { display: block; font-size: 14px; font-weight: 800; }
  .oc-dash__order-what small { display: block; font-size: 12px; color: #8a938b; }

  .oc-dash__order-total { font-size: 14px; font-weight: 800; text-align: right; }

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

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

  .oc-dash__gear-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(15, 20, 22, .08);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: transform 160ms ease;
  }

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

  .oc-dash__gear-img { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 10px; background: #fff; }

  .oc-dash__gear-foot { margin: 0; font-size: 12.5px; color: #8a938b; }

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

  /* profile */
  .oc-dash__profile-list { margin: 0 0 12px; }
  .oc-dash__profile-list > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(15, 20, 22, .06); }
  .oc-dash__profile-list dt { flex: 0 0 64px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a938b; padding-top: 2px; }
  .oc-dash__profile-list dd { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }

  .oc-dash__profile-address { margin: 0 0 12px; font-size: 13px; }
  .oc-dash__profile-address strong { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3d443f; }
  .oc-dash__profile-address p { margin: 0; color: #3d443f; }

  .oc-dash__profile-note { margin: 12px 0 0; font-size: 12px; color: #8a938b; }

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

  @media screen and (max-width: 640px) {
    .oc-dash__order-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .oc-dash__order-row .oc-account__pill { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-dash__meter i { transition: none; }
    .oc-dash__gear-item, .oc-dash__gear-item:hover { transform: none; transition: none; }
  }
/* END_SECTION:oxiclear-legacy-customer-account */

/* START_SECTION:oxiclear-legacy-customer-addresses (INDEX:60) */
/* OxiClear address book — section rules. */

  .oc-addr__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
  }

  .oc-addr__editor { margin: 0 0 16px; }
  .oc-addr__editor--inline {
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(15, 20, 22, .08);
  }

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

  .oc-addr__lines { margin: 0 0 14px; font-size: 13.5px; color: #3d443f; }

  .oc-addr__card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

  .oc-addr__pagination { margin-top: 18px; text-align: center; }
/* END_SECTION:oxiclear-legacy-customer-addresses */

/* START_SECTION:oxiclear-legacy-customer-login (INDEX:61) */
/* OxiClear sign-in — section rules. */

  .oc-auth__masthead { justify-content: center; text-align: center; }

  .oc-auth__recover-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
  .oc-auth__recover-copy { margin: 0 0 16px; font-size: 13.5px; color: #3d443f; }

  .oc-auth__guest {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 20, 22, .08);
  }

  .oc-auth__guest p { margin: 0 0 8px; font-size: 13px; color: #8a938b; }
/* END_SECTION:oxiclear-legacy-customer-login */

/* START_SECTION:oxiclear-legacy-customer-order (INDEX:62) */
/* OxiClear order page — section rules (shared primitives in the customer
     styles snippet). The .oc-invoice block is print-only. */

  .oc-order__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .oc-order__main { display: grid; gap: 16px; min-width: 0; }
  .oc-order__side { display: grid; gap: 16px; min-width: 0; }

  .oc-order__cancelled { max-width: none; }

  /* timeline */
  .oc-order__timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }

  .oc-order__timeline li { position: relative; padding-top: 22px; min-width: 0; }

  .oc-order__timeline li i {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px; height: 14px;
    background: rgba(255, 255, 255, .8);
    border: 2px solid rgba(15, 20, 22, .18);
    border-radius: 50%;
  }

  .oc-order__timeline li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 20px;
    right: 4px;
    height: 2px;
    background: rgba(15, 20, 22, .1);
    border-radius: 2px;
  }

  .oc-order__timeline li:last-child::before { display: none; }

  .oc-order__timeline li.is-done i { background: #3ec13c; border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(62, 193, 60, .25); }
  .oc-order__timeline li.is-done::before { background: rgba(62, 193, 60, .5); }
  .oc-order__timeline li.is-live i { background: #e8a13a; border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(232, 161, 58, .3); }

  .oc-order__timeline strong { display: block; font-size: 12.5px; font-weight: 800; }
  .oc-order__timeline small { display: block; font-size: 11.5px; color: #8a938b; overflow-wrap: anywhere; }
  .oc-order__timeline small a { color: #14557d; font-weight: 800; text-decoration: none; }

  .oc-order__awb { margin: 14px 0 0; font-size: 12px; font-weight: 700; color: #8a938b; }

  /* items */
  .oc-order__items { margin: 0; padding: 0; list-style: none; }

  .oc-order__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
  }

  .oc-order__item + .oc-order__item { border-top: 1px solid rgba(15, 20, 22, .06); }

  .oc-order__item-img {
    width: 60px; height: 60px;
    object-fit: cover;
    background: #fff;
    border: 1px solid rgba(15, 20, 22, .06);
    border-radius: 14px;
  }

  .oc-order__item-img--blank { display: inline-block; background: rgba(255, 255, 255, .6); }

  .oc-order__item-meta { min-width: 0; }
  .oc-order__item-meta strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; }
  .oc-order__item-meta strong a { text-decoration: none; }
  .oc-order__item-meta small { display: block; margin-top: 2px; font-size: 12px; color: #8a938b; }
  .oc-order__item-discount { color: #c04a38 !important; }

  .oc-order__item-total { font-size: 14px; font-weight: 800; }

  /* totals */
  .oc-order__totals { margin: 14px 0 0; padding-top: 6px; border-top: 1px solid rgba(15, 20, 22, .1); }
  .oc-order__totals > div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 13px; }
  .oc-order__totals dt { color: #3d443f; }
  .oc-order__totals dd { margin: 0; font-weight: 700; }
  .oc-order__refund dd { color: #c04a38; }
  .oc-order__grand { border-top: 1px solid rgba(15, 20, 22, .1); margin-top: 4px; }
  .oc-order__grand dt, .oc-order__grand dd { font-size: 15px; font-weight: 800; color: #15181b; }

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

  .oc-order__issue-copy { margin: 0 0 14px; font-size: 13.5px; color: #3d443f; }
  .oc-order__issue-ctas { display: flex; flex-wrap: wrap; gap: 8px; }

  .oc-order__address { font-size: 13.5px; color: #3d443f; }
  .oc-order__address p { margin: 0; }

  /* the invoice never renders on screen */
  .oc-invoice { display: none; }

  @media screen and (max-width: 900px) {
    .oc-order__grid { grid-template-columns: 1fr; }
    .oc-order__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
    .oc-order__timeline li:nth-child(2)::before { display: none; }
  }

  {%- comment -%}
    The @media print block that lived here is DELETED (23 Aug 2026).

    A section's stylesheet block is bundled into the theme-wide compiled
    stylesheet whether or not the section ever renders — and this
    section can never render, because legacy customer accounts were deprecated
    on 26 Feb 2026. Its first line was `body * { visibility: hidden !important }`,
    scoped to nothing but @media print, so printing ANY page of oxiclear.com
    produced blank sheets. It also styled the bare `.oc-invoice` class, which the
    live account hub reuses, and fought the hub's own rules.

    Printable invoices now live in sections/oxiclear-account-hub.liquid, which
    builds the invoice as its own document in ordinary screen CSS rather than
    hiding the page behind print media.
  {%- endcomment -%}
/* END_SECTION:oxiclear-legacy-customer-order */

/* START_SECTION:oxiclear-legacy-customer-reset-password (INDEX:64) */
.oc-auth__narrow { max-width: 440px; margin: 0 auto; }
/* END_SECTION:oxiclear-legacy-customer-reset-password */

/* START_SECTION:oxiclear-legacy-faq-page (INDEX:65) */
.oxiclear-legacy-faq {
    color: #070707;
    background:
      var(--oxg-wash,
        radial-gradient(1100px 560px at 12% -8%, rgba(0, 182, 217, .10), transparent 60%),
        radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .06), transparent 55%));
    background-color: #f6f9f9;
    font-family: var(--oc-system-font-stack);
  }

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

  .oxiclear-legacy-faq > h1 {
    margin: 30px 20px 10px;
    font-size: 30px;
    font-weight: 600;
    line-height: 33px;
    text-align: center;
  }

  .oxiclear-legacy-faq > h1 span {
    line-height: 12px;
  }

  .oxiclear-legacy-faq > h2 {
    margin: 0 20px 30px;
    font-size: 28px;
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
  }

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .11em;
    line-height: 1.35;
    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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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: 16px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
  }

  .oxiclear-legacy-faq__list summary:focus-visible {
    outline: 3px solid var(--oxg-accent, #00b6d9);
    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(0, 182, 217, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
    font-weight: 700;
    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;
    line-height: 1.5;
  }

  .oxiclear-legacy-faq__answer a {
    color: #174f51;
    font-weight: 650;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

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

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }
  }

  @media (max-width: 767px) {
    .oxiclear-legacy-faq > h1 {
      font-size: 26px;
    }

    .oxiclear-legacy-faq > h2 {
      font-size: 24px;
    }

    .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);
    font-family: var(--oc-font-display);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 500;
    line-height: 1.3;
    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;
    font-family: var(--oc-font-display);
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 600;
  }

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

  body.oc-facelift .oxiclear-legacy-faq__list p {
    padding: 0 22px 22px;
    font-size: 15px;
    line-height: 1.7;
  }

  @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:66) */
.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;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.2;
  }

  .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: 18px;
    font-weight: 400;
    line-height: 1.35;
  }

  .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;
    font-size: 16px;
  }

  .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: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    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__header h1 {
      font-size: 28px;
    }

    .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:67) */
.oxiclear-legacy-how-to {
    width: min(1170px, calc(100% - 30px));
    margin: 0 auto;
    padding: 25px 0 15px;
    color: #272727;
    font-family: var(--oc-system-font-stack);
  }

  .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;
    font-size: 30px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 3px;
    text-align: center;
  }

  .oxiclear-legacy-how-to > h1 span {
    line-height: 12px;
  }

  .oxiclear-legacy-how-to > h2 {
    margin: 0 0 15px;
    font-size: 28px;
    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(0, 182, 217, .12);
    box-shadow: 0 12px 28px rgba(0, 182, 217, .16), inset 0 1px 0 rgba(255, 255, 255, .92);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    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(0, 182, 217, .26), inset 0 1px 0 rgba(255, 255, 255, .96);
  }

  #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: 3px solid var(--oxg-accent, #00b6d9);
    outline-offset: 3px;
  }

  .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
  }

  #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;
    font-size: 28px;
    font-weight: 700;
  }

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

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

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

  .oxiclear-legacy-how-to__help {
    margin: 15px 0;
    color: #000;
    font-size: 16px;
    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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

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

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

  .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(0, 182, 217, .22), inset 0 1px 0 rgba(255, 255, 255, .96);
    }
  }

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

    .oxiclear-legacy-how-to > h1 {
      font-size: 22px;
      letter-spacing: 0;
    }

    .oxiclear-legacy-how-to > h2 {
      font-size: 24px;
    }

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

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

    .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);
    font-family: var(--oc-font-display);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 500;
    line-height: 1.3;
    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;
    font-size: 16px;
  }

  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__panel h3 {
    font-family: var(--oc-font-display);
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.05;
  }

  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:68) */
.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: 14px;
    font-weight: 400;
    line-height: 1.2;
    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(0, 182, 217, .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(0, 182, 217, .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 #2563b1;
    outline-offset: 5px;
  }

  @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:69) */
.oxiclear-legacy-impact {
    color: #272727;
    background: #fff;
    font-family: var(--oc-system-font-stack);
  }

  .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;
    font-size: 30px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 3px;
    text-align: center;
  }

  .oxiclear-legacy-impact > h1 span {
    line-height: 12px;
  }

  .oxiclear-legacy-impact > p {
    line-height: 1.5;
  }

  .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 > h1 {
      font-size: 22px;
      letter-spacing: 0;
    }

    .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:70) */
.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:71) */
.oxiclear-legacy-native-page {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    color: #000;
    background: #fff;
    font-family: var(--oc-system-font-stack);
  }

  .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;
    font-family: var(--oc-system-font-stack);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1px;
    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: 18px;
    font-weight: 400;
  }

  .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:72) */
.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), inset 0 1px 0 rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  .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: inset 0 1px 0 #fff;
  }

  .oc-protection-strip__count {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: clamp(44px, 4vw, 58px);
    font-weight: 700;
    letter-spacing: -.075em;
    line-height: .8;
  }

  .oc-protection-strip__in-one {
    align-self: end;
    margin-left: 8px;
    font-size: clamp(16px, 1.45vw, 21px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    text-transform: uppercase;
  }

  .oc-protection-strip__protection {
    grid-column: 1 / -1;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1;
    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), inset 0 1px 0 rgba(255, 255, 255, .92);
    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: clamp(13px, 1.05vw, 15px);
    font-weight: 650;
    letter-spacing: -.018em;
    line-height: 1.2;
  }

  @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), inset 0 1px 0 rgba(255, 255, 255, .96);
    }
  }

  @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;
    }

    .oc-protection-point__label {
      font-size: 14px;
    }
  }

  @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;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
/* END_SECTION:oxiclear-legacy-pollutant-strip */

/* START_SECTION:oxiclear-legacy-product-hero (INDEX:73) */
/* 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 (the header dock sits directly above), and the logo's 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%;
    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: inset 0 1px 0 rgba(255, 255, 255, .52);
    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;
  }

  .oc-legacy-home-hero__logo {
    display: block;
    width: clamp(145px, 40vw, 175px);
    height: auto;
  }

  /* San Francisco, explicitly, in its two optical cuts. The theme's system-ui stack
     already resolves to SF on Apple hardware; naming the cuts and tracking by size is
     what actually applies SF's conventions instead of leaving everything at `normal`. */
  .oc-legacy-home-hero__title {
    margin: 17px 0 0;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, sans-serif;
    font-size: clamp(36px, 10.4vw, 44px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.015em;
    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-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
    font-size: clamp(10.5px, 2.95vw, 12.5px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .005em;
  }

  .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);
    font-weight: 700;
    letter-spacing: .005em;
    -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;
  }

  .oc-glass-hero__air {
    pointer-events: auto;
    position: absolute;
    /* Removed from the hero on mobile (founder, 22 Aug 2026). It is a desktop
       element only: the >=768px branch below is the sole place it displays. The
       phone reaches Air Check by the "Check your air" CTA, which sits in the hero
       at 138x44 and targets the same #air-check anchor. */
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    white-space: nowrap;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .005em;
    text-align: left;
    /* The pill is deep enough to carry the LIVE band colour, not just white text.
       Since D-132 the reading wears the meter's own colour, and the bright bands
       (Moderate is pure #FFFF00) measured 3.76:1 over the old .4 fill — under AA at
       this size. .62 puts every band clear of it without touching the hero art. */
    background: rgba(9, 12, 13, .62);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    cursor: pointer;
    opacity: 0;
    animation: oc-hero-floaty 6s ease-in-out infinite;
    transition: opacity .5s ease;
  }

  .oc-glass-hero__air.is-live { opacity: 1; }
  .oc-glass-hero__air:hover { background: rgba(9, 12, 13, .72); }

  @keyframes oc-hero-floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }

  .oc-glass-hero__air-dot {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    background: var(--hero-air-colour, #3ec13c);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
  }

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

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

  /* The reading wears the meter's own band colour, like the Air Check card and the
     PDP AQI cell (D-2026-08-21-130). The hardcoded #b8e986 green printed every band
     — including Poor and Severe — in a reassuring green. It stays only as the
     fallback for the moment before a real reading arrives. */
  .oc-glass-hero__air-val,
  .oc-glass-hero__air-band {
    color: var(--hero-air-colour, #b8e986);
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  }

  .oc-glass-hero__air-sep { opacity: .6; }
  .oc-glass-hero__air-cue { opacity: .7; font-weight: 700; }

  .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-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .005em;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 999px;
    transition: transform .16s ease, background-color .16s ease;
  }

  .oc-glass-hero__cta--primary {
    color: #07270b;
    font-weight: 800;
    background: rgba(62, 193, 60, .88);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px rgba(62, 193, 60, .24);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }

  .oc-glass-hero__cta--primary:hover {
    background: rgba(95, 215, 92, .92);
    transform: translateY(-2px);
  }

  /* the ghost is drawn for a dark frame; over the bright phone crop it needs the
     teaser's dark glass or the white-on-white washes out */
  .oc-glass-hero__cta--ghost {
    color: #fff;
    font-weight: 700;
    background: rgba(9, 12, 13, .46);
    border: 1px solid rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

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

  .oc-glass-hero__cta:focus-visible,
  .oc-glass-hero__air:focus-visible {
    outline: 2px solid #3ec13c;
    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;
    }

    /* no wordmark inside the frame: the header dock sits directly above it */
    .oc-legacy-home-hero__logo {
      display: none;
    }

    /* size and tracking only - colour, weight, shadow and the two accent words
       are declared once at base and inherited here. */
    .oc-legacy-home-hero__title {
      margin: 0;
      font-size: clamp(40px, 5.4vw, 74px);
      letter-spacing: -.02em;
    }

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

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

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

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

    /* teaser returns to the mockup's top-right corner */
    .oc-glass-hero__air {
      display: inline-flex;
      top: 22px;
      right: 22px;
      bottom: auto;
      padding: 11px 16px;
      font-size: 13px;
    }

    .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;
      font-size: 14px;
    }

    .oc-glass-hero__cta--ghost {
      background: rgba(255, 255, 255, .14);
      border-color: rgba(255, 255, 255, .4);
    }

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

  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .oc-legacy-home-hero__title { letter-spacing: -.02em; }
  }

  @media screen and (min-width: 1200px) {
    .oc-legacy-home-hero__title { letter-spacing: -.025em; }
  }

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

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oc-glass-hero__air { background: rgba(9, 12, 13, .78); }
    .oc-glass-hero__cta--primary { background: #3ec13c; }
    .oc-glass-hero__cta--ghost { background: rgba(20, 24, 26, .62); }
    .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:74) */
/* 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: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.2;
    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;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.05;
    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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  .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: 3px solid var(--oc-color-focus, #5cc6d0);
    outline-offset: 3px;
  }

  .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);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }

  /* 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-family: var(--oc-font-display, inherit);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.35;
  }

  .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: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .oc-pdp-rec__price s {
    color: #545c6a;
    font-weight: 400;
  }

  .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(255, 255, 255, .5));
    border-radius: var(--oc-action-radius, 999px);
    background: var(--oc-action-primary-background, rgba(62, 193, 60, .88));
    box-shadow: var(--oc-action-shadow, inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px rgba(62, 193, 60, .24));
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    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(95, 215, 92, .92));
    transform: translateY(-2px);
  }

  .oc-pdp-rec__add:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 10px rgba(62, 193, 60, .2);
    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: inset 0 1px 0 rgba(255, 255, 255, .7);
  }

  .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: #3ec13c;
    }

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

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-recs__frost,
    .oc-pdp-rec,
    .oc-pdp-rec__add {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .oc-pdp-recs__frost {
      background: rgba(255, 255, 255, .92);
    }

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

    .oc-pdp-rec__add {
      background: #3ec13c;
    }

    .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:75) */
/* 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: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    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;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.05;
  }

  .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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  /* 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(62, 193, 60, .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: 12.5px;
  }

  /* 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: 13.5px;
    font-weight: 700;
  }

  #judgeme_product_reviews .jdgm-rev__body,
  #judgeme_product_reviews .jdgm-rev__body > p {
    color: #454C56;
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.6;
  }

  /* 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: 12px;
    line-height: 1.4;
  }

  #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: 12px;
    font-weight: 600;
  }

  #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(255, 255, 255, .5));
    border-radius: var(--oc-action-radius, 999px);
    color: var(--oc-action-primary-text, #07270b);
    background: var(--oc-action-primary-background, rgba(62, 193, 60, .88));
    font-size: 14px;
    font-weight: 800;
    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(95, 215, 92, .92));
    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: 3px solid var(--oc-color-focus, #3ec13c);
    outline-offset: 3px;
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-reviews__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-pdp-reviews__stage {
      background: rgba(255, 255, 255, .92);
    }
  }
/* END_SECTION:oxiclear-legacy-product-reviews */

/* START_SECTION:oxiclear-legacy-product-template (INDEX:76) */
/* 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 same glass chip the rest of the baseline uses, ink not colour. */
  .oc-legacy-pdp__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
    color: #545C6A;
    font-size: 12.5px;
  }

  .oc-legacy-pdp__crumb {
    padding: 6px 12px;
    color: #454C56;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }

  .oc-legacy-pdp__crumb.is-current {
    color: #14171C;
  }

  .oc-legacy-pdp__crumb-mark {
    color: #545C6A;
  }

  /* 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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    -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: 12px;
    font-weight: 700;
    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), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }

  /* 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: 1px solid #000000;
    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: 11px;
    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: 11px;
    font-weight: 700;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    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), inset 0 1px 0 #fff;
  }

  .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: 95%;
  }

  .oc-legacy-pdp__sku {
    text-align: right;
  }

  .oc-legacy-pdp__title {
    margin: 0 0 16px;
    color: #2d2d2d;
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -.03em;
    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: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .14em;
    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: 19px;
    font-weight: 600;
    line-height: 1.4;
  }

  .oc-legacy-pdp__summary {
    max-width: 560px;
    margin: 0 0 24px;
    color: #454C56;
    font-size: 14px;
    line-height: 1.65;
  }

  .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: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .oc-legacy-pdp__proof dd {
    margin-top: 4px;
    color: #14171C;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
  }

  .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: 200;
    text-transform: uppercase;
    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: 90%;
    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;
    line-height: 1.6;
    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 #14171C;
    outline-offset: 2px;
  }

  .oc-legacy-pdp__swatch-element input:checked + label {
    color: #14171C;
    font-weight: 700;
    background: rgba(255, 255, 255, .75);
    border-color: #14171C;
    box-shadow: 0 0 0 1px #14171C, inset 0 1px 0 #fff;
  }

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .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: 11px;
    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: 12px;
    font-weight: 700;
    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: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .oc-legacy-pdp__unit-price {
    margin: 0 0 16px;
    font-size: 12px;
  }

  /* Last line in the column now: the inclusive-pricing disclosure, kept quiet. */
  .oc-legacy-pdp__policies {
    margin: 4px 0 0;
    color: #545C6A;
    font-size: 12.5px;
  }

  .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: 14px;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255, 255, 255, .28);
    border: 1px solid rgba(20, 23, 28, .18);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform .16s ease, background-color .16s ease;
  }

  .oc-legacy-pdp__renew:hover {
    background: rgba(255, 255, 255, .45);
    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: 12px;
    text-transform: uppercase;
    background: #000000;
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  }

  @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), inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }
  }

  .oc-legacy-pdp__payment-buttons .shopify-payment-button__more-options {
    color: #000000;
    font-size: 12px;
  }

  .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: 13.3px;
  }

  .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: 12.5px;
    font-weight: 700;
    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 1px 0 rgba(255, 255, 255, .5) inset,
      0 6px 16px color-mix(in srgb, var(--oc-aqi-deep) 26%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    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: 12.5px;
  }

  .oc-legacy-pdp__living {
    margin: 0;
    color: #454C56;
    font-size: 14px;
    line-height: 1.5;
  }

  .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;
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }

  .oc-legacy-pdp__includes p {
    margin: 0;
    color: #14171C;
    font-size: 13.5px;
    line-height: 1.55;
  }

  .oc-legacy-pdp__includes p + p {
    margin-top: 8px;
  }

  .oc-legacy-pdp__includes-rule {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
  }

  /* 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: 700;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .is-premium-n99 .oc-legacy-pdp__quantity button {
    width: 44px;
    color: #14171C;
    font-size: 18px;
    font-weight: 600;
    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.is-premium-product .oc-legacy-pdp__title {
      font-size: 27px;
    }

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

    .oc-legacy-pdp.is-premium-product .oc-legacy-pdp__title {
      font-size: 25px;
    }

    /* 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__lead {
      font-size: 17px;
    }

    .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:77) */
/* 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;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1px;
    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: 500;
    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: 11px;
    font-weight: 700;
    line-height: 14px;
    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:78) */
.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;
    font-size: 24px;
    line-height: 1.3;
  }

  .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: 20px;
  }

  .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:79) */
/* [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: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .oc-legacy-shop__header h2 {
    margin: 0;
    color: #1a1e1c;                               /* dock */
    font-family: var(--oc-font-display, inherit); /* foundation */
    font-size: clamp(30px, 4vw, 54px);            /* home */
    font-weight: 800;                             /* dock */
    letter-spacing: -.035em;                      /* home */
    line-height: .98;                             /* home */
    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, #3ec13c);        /* 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 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(18px);          /* commerce */
    backdrop-filter: blur(18px);                  /* commerce */
    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: 13px;
    font-weight: 700;                             /* glass */
    letter-spacing: 0;
    line-height: 1.3;
    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: 3px solid #3ec13c !important;
    outline-offset: 3px;
    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; the blur makes it actually glass rather than a white lozenge. */
  .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),
      inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }

  /* [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: 18px;
  }

  @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 */
    -webkit-backdrop-filter: blur(18px) saturate(160%);   /* dock */
    backdrop-filter: blur(18px) saturate(160%);           /* dock */
    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-family: var(--oc-font-display, inherit);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.35;
  }

  .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;
    font-size: 15px;
  }

  .oc-legacy-shop-card__price s {
    color: #8a8a8a;
  }

  .oc-legacy-shop-card__price strong {
    color: #20762a;
    font-weight: 800;
  }

  /* [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: #07270b;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
    background: rgba(62, 193, 60, .88);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .5),
      0 10px 22px rgba(62, 193, 60, .18);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    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: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 10px rgba(62, 193, 60, .2);
    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: inset 0 1px 0 rgba(255, 255, 255, .7);
  }

  /* [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: #3ec13c;
    }

    .oc-legacy-shop-card__add--soldout {
      background: #eef0ec;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-shop-card {
      -webkit-backdrop-filter: none;              /* dock */
      backdrop-filter: none;                      /* dock */
    }

    .oc-legacy-shop-card__add {
      background: #3ec13c;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .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: 14px;
    font-weight: 600;
  }

  /* [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: #07270b;                               /* actions --oc-action-primary-text */
    border: 1px solid #3ec13c;                    /* actions --oc-action-primary-border */
    border-radius: var(--oc-action-radius, 999px);
    background: #3ec13c;                          /* actions --oc-action-primary-background */
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);    /* actions --oc-action-shadow */
    -webkit-backdrop-filter: blur(10px) saturate(150%);   /* dock */
    backdrop-filter: blur(10px) saturate(150%);           /* dock */
    cursor: pointer;
    appearance: none;
    font-family: var(--oc-font-body, inherit);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    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: #07270b;
    border-color: #5fd75c;                        /* actions --oc-action-primary-border-hover */
    background: #5fd75c;                          /* actions --oc-action-primary-background-hover */
    box-shadow: 0 12px 28px rgba(0, 0, 0, .17);   /* actions --oc-action-shadow-hover */
    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: #07270b;
      background: rgba(95, 215, 92, .92);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 14px 28px rgba(62, 193, 60, .26);
      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__header h2 {
      font-size: clamp(30px, 10vw, 42px);         /* home */
    }

    .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: 14px;
      font-weight: 700;
      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:80) */
.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(0, 182, 217, .10), transparent 60%), radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .oc-legacy-story__copy h2 {
    max-width: 24ch;
    margin: 0;
    color: var(--oc-legacy-story-text);
    font-family: var(--oc-system-font-stack);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.02em;
  }

  .oc-legacy-story__text {
    max-width: 57ch;
    margin-top: 20px;
    color: var(--oc-legacy-story-muted);
    font-size: 18px;
    line-height: 1.5;
  }

  .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: var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .oc-legacy-story__facts dt {
    color: var(--oc-legacy-story-muted);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .oc-legacy-story__facts dd {
    margin: 5px 0 0;
    color: var(--oc-legacy-story-text);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
  }

  /* 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, type and hover all come from
     snippets/oxiclear-facelift-actions.liquid now. */
  .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: 3px solid var(--oc-legacy-story-accent);
    outline-offset: 4px;
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .oc-legacy-story__text {
      font-size: 16px;
      line-height: 1.2;
    }

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

    .oc-legacy-story--has-logo .oc-legacy-story__copy h2 {
      font-size: 20px;
      line-height: 1.15;
    }
  }

  @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;
    }

    .oc-legacy-story__copy h2 {
      font-size: 24px;
    }

    .oc-legacy-story__text {
      font-size: 18px;
    }

  }

  @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:81) */
.oxiclear-legacy-technical {
    color: #070707;
    background:
      var(--oxg-wash,
        radial-gradient(1100px 560px at 12% -8%, rgba(0, 182, 217, .10), transparent 60%),
        radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .06), transparent 55%));
    background-color: #f6f9f9;
    font-family: var(--oc-system-font-stack);
  }

  .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
  }

  .oxiclear-legacy-technical__2020-copy {
    margin-top: 10px;
  }

  .oxiclear-legacy-technical__2020-copy > p,
  .oxiclear-legacy-technical__2020-specifications > p {
    line-height: 1.6;
  }

  .oxiclear-legacy-technical__2020-copy > h3,
  .oxiclear-legacy-technical__2020-specifications > h3 {
    margin: 1em 0;
    font-size: 1.17em;
    line-height: 1.2;
  }

  .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;
    line-height: 1.6;
  }

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    font-size: 21px;
    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);
    font-size: 21px;
  }

  .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;
    font-size: 30px;
    font-weight: 600;
    line-height: 33px;
    text-align: center;
  }

  .oxiclear-legacy-technical > h1 span {
    line-height: 12px;
  }

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

  .oxiclear-legacy-technical__intro > div:last-child {
    padding: clamp(22px, 3vw, 36px);
    line-height: 1.9;
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
  }

  .oxiclear-legacy-technical > h2 {
    width: min(1170px, calc(100% - 30px));
    margin: 40px auto 30px;
    font-size: 30px;
    line-height: 33px;
  }

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    font-size: 18px;
    font-weight: 700;
    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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  #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: 3px solid var(--oxg-accent, #00b6d9);
    outline-offset: 3px;
  }

  .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
  }

  .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__panel p {
    line-height: 1.6;
  }

  .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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%));
  }

  .oxiclear-legacy-technical__specifications p {
    line-height: 1.6;
  }

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    font-size: 18px;
    font-weight: 700;
    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: 3px solid var(--oxg-accent, #00b6d9);
    outline-offset: 4px;
  }

  @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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }

    .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }
  }

  @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 > h1 {
      font-size: 26px;
    }

    .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);
      font-size: 24px;
    }

    .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: #69cfd1;
    }
  }

  /* 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;
    font-size: 14px;
    line-height: 1.2;
  }

  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__panel h3 {
    font-family: var(--oc-font-display);
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.05;
  }

  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__2020-copy h1,
  body.oc-facelift .oxiclear-legacy-technical__2020-test h2,
  body.oc-facelift .oxiclear-legacy-technical__specifications h2 {
    font-family: var(--oc-font-display);
    font-size: clamp(25px, 3vw, 40px);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.08;
  }

  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);
    font-family: var(--oc-font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.15;
  }

  @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:82) */
.oxiclear-legacy-testimonials {
    width: min(1170px, calc(100% - 30px));
    margin: 0 auto;
    padding: 15px 0 60px;
    color: #272727;
    font-family: var(--oc-system-font-stack);
  }

  .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;
    font-size: 21px;
    font-weight: 700;
  }

  .oxiclear-legacy-testimonials article {
    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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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;
    line-height: 1.5;
  }

  .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), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }
  }

  @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:83) */
.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: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }

  .oc-legacy-three__header h2 {
    max-width: none;
    margin: 0;
    color: var(--oc-legacy-three-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
  }

  .oc-legacy-three__header > div {
    max-width: 58ch;
    margin-top: 18px;
    color: var(--oc-legacy-three-muted);
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .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), inset 0 1px 0 rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  .oc-legacy-three__card {
    --oc-three-accent: #00b6d9;
    --oc-three-secondary: #1cdc00;
    --oc-three-soft: rgba(0, 182, 217, .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: #4e9b58;
    --oc-three-secondary: #5cc6d0;
    --oc-three-soft: rgba(78, 155, 88, .14);
  }

  .oc-legacy-three__card--international {
    --oc-three-accent: #7168c9;
    --oc-three-secondary: #5cc6d0;
    --oc-three-soft: rgba(113, 104, 201, .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), inset 0 1px 0 rgba(255, 255, 255, .94);
    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: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    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);
    font-size: clamp(26px, 2.2vw, 32px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.03em;
    text-align: center;
    text-wrap: balance;
  }

  .oc-legacy-three__text {
    width: 100%;
    max-width: 32ch;
    margin: 0 auto;
    color: var(--oc-legacy-three-muted);
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.58;
    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: 0.71rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .oc-legacy-three__card a:hover {
    color: var(--oc-legacy-three-accent);
  }

  .oc-legacy-three__card a:focus-visible {
    outline: 3px solid var(--oc-legacy-three-accent);
    outline-offset: 4px;
  }

  .oc-legacy-three__note {
    max-width: 92ch;
    margin: 22px auto 0;
    color: var(--oc-legacy-three-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    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), inset 0 1px 0 rgba(255, 255, 255, .96);
    }
  }

  @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;
      font-size: clamp(24px, 7vw, 27px);
    }

    .oc-legacy-three__text {
      max-width: 34ch;
      font-size: 14px;
      line-height: 1.5;
    }
  }

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

  @media (prefers-reduced-transparency: reduce) {
    .oc-legacy-three__grid {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
/* END_SECTION:oxiclear-legacy-three-part */

/* START_SECTION:oxiclear-legacy-video-row (INDEX:84) */
.oc-legacy-video-row {
    background: var(--oxg-wash, radial-gradient(1100px 560px at 12% -8%, rgba(0, 182, 217, .10), transparent 60%), radial-gradient(900px 520px at 108% 26%, rgba(28, 220, 0, .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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    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;
    font-size: 25px;
    line-height: 1;
  }

  @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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    }
  }

  @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:85) */
/* 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. blur(18px) is hardcoded rather than read from --oxg-blur,
     which drops to 12px under 768px and would make this band softer than its
     neighbours. 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: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    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;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.03em;
    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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  /* 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);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }

  .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: 15px;
    line-height: 1.6;
  }

  .oc-pdp-comfort__item strong {
    color: #14171C;
    font-weight: 700;
  }

  /* 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: 13.5px;
    line-height: 1.6;
  }

  .oc-pdp-comfort__counterpart a {
    color: #14171C;
    font-weight: 700;
    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);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .oc-pdp-comfort__mark {
      background: rgba(255, 255, 255, .78);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @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:86) */
/* 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: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    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;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.03em;
    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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .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: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums lining-nums;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }

  .oc-pdp-wear__step p {
    margin: 0;
    padding-top: 10px;
    color: #454C56;
    font-size: 14px;
    line-height: 1.55;
  }

  .oc-pdp-wear__step b {
    color: #14171C;
    font-weight: 700;
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-wear__stage {
      background: rgba(255, 255, 255, .92);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .oc-pdp-wear__n {
      background: rgba(255, 255, 255, .78);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @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:87) */
/* 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: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    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;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.03em;
    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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .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: 13px;
    font-weight: 700;
    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), inset 0 1px 0 #fff;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }

  .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 #14171C;
    outline-offset: 3px;
  }

  .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: 13px;
    font-weight: 700;
  }

  .oc-pdp-know__spec-text {
    display: block;
    color: #454C56;
    font-size: 12.5px;
    line-height: 1.5;
  }

  .oc-pdp-know__proof {
    margin-top: 16px;
  }

  .oc-pdp-know__proof p {
    max-width: 68ch;
    margin: 0;
    color: #14171C;
    font-size: 15px;
    line-height: 1.6;
  }

  .oc-pdp-know__proof p + p {
    margin-top: 10px;
  }

  .oc-pdp-know__proof strong {
    font-weight: 800;
  }

  @media (prefers-reduced-transparency: reduce) {
    .oc-pdp-know__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-pdp-know__stage {
      background: rgba(255, 255, 255, .92);
    }
  }
/* END_SECTION:oxiclear-pdp-know-your-mask */

/* START_SECTION:oxiclear-pdp-proof (INDEX:88) */
/* 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. blur(18px) is hardcoded rather than taken
     from --oxg-blur, which drops to 12px under 768px and would leave this band
     softer than the bands above and below it. */
  .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: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    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;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.03em;
    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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .oc-pdp-proof__claim p {
    max-width: 54ch;
    margin: 0;
    color: #14171C;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
  }

  .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: clamp(30px, 3vw, 38px);
    font-weight: 800;
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1.3;
    letter-spacing: -.02em;
    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),
      inset 0 1px 0 #fff;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }

  .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: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }

  .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);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @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:89) */
/* 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: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    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;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.03em;
    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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .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: clamp(16px, 1.4vw, 19px);
    line-height: 1.65;
  }

  .oc-story-band__copy p + p {
    margin-top: 14px;
  }

  .oc-story-band__copy strong {
    font-weight: 800;
  }

  .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;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.03em;
    text-transform: none;
  }

  .oc-premium-story p,
  .oc-premium-story li {
    font-size: 16px;
    line-height: 1.7;
  }

  .oc-premium-story__eyebrow {
    margin-bottom: 16px;
    color: #454C56;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.4 !important;
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    backdrop-filter: blur(18px) saturate(var(--oxg-saturate, 120%));
    -webkit-backdrop-filter: blur(18px) saturate(var(--oxg-saturate, 120%));
  }

  .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),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  .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);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
    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-band h2 {
    font-size: 30px;
  }

  .oc-premium-story__proof-claim {
    max-width: 680px;
    color: rgba(255, 255, 255, .82);
    font-size: 19px !important;
  }

  .oc-premium-story__proof-claim strong {
    display: inline-block;
    padding: 2px 18px;
    color: #14171C;
    font-size: 31px;
    line-height: 1.35;
    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-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
  }

  .oc-premium-story__proof-label {
    padding: 16px 24px;
    color: #14171C;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    backdrop-filter: blur(18px) saturate(var(--oxg-saturate, 120%));
    -webkit-backdrop-filter: blur(18px) saturate(var(--oxg-saturate, 120%));
  }

  .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 h2 {
    font-size: 36px;
  }

  .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: 13px;
    font-weight: 700;
    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)), var(--oxg-specular, inset 0 1px 0 rgba(255, 255, 255, .96));
    backdrop-filter: blur(18px) saturate(var(--oxg-saturate, 120%));
    -webkit-backdrop-filter: blur(18px) saturate(var(--oxg-saturate, 120%));
  }

  .oc-premium-story__choice h2 {
    margin-bottom: 0;
    font-size: 36px;
  }

  .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__proof-band--utility .oc-premium-story__proof-claim {
    font-size: 18px !important;
  }

  .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 h2 {
      font-size: 34px;
    }

    .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 h2,
    .oc-premium-story__feature-copy h2,
    .oc-premium-story__choice h2 {
      font-size: 29px;
    }

    .oc-premium-story p,
    .oc-premium-story li {
      font-size: 15px;
    }

    .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:114) */
.oc-grid-static,
  .oc-grid-static__inner {
    display: contents;
  }
/* END_SECTION:template--product--recently-viewed */

/* START_SECTION:template--product--recommendations (INDEX:115) */
.oc-grid-static,
  .oc-grid-static__inner {
    display: contents;
  }
/* END_SECTION:template--product--recommendations */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:cart-drawer (INDEX:132) */
/* ============================================================
     CART DRAWER SKIN — floating black glass dock (V2.6, 22 Aug 2026)

     Was: a white slab (rgba(255,255,255,.96)), 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: rgba(9, 11, 13, .55);
    --cart-drawer-text-color: #ffffff;
    --cart-drawer-text-color-transparent10: rgba(255, 255, 255, .1);
    --cart-drawer-text-color-transparent25: rgba(255, 255, 255, .18);
    --cart-drawer-text-color-transparent40: rgba(255, 255, 255, .34);
    --cart-drawer-text-color-transparent50: rgba(255, 255, 255, .45);
    --cart-drawer-text-color-transparent70: rgba(255, 255, 255, .72);
    --cart-drawer-border-color: rgba(255, 255, 255, .22);
    --on-sale-color: #ffffff;
    --oc-cart-rail: rgba(9, 11, 13, .86);
    color: #ffffff;
    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 rgba(255, 255, 255, .17);
    border-radius: 20px;
    box-shadow:
      0 10px 36px rgba(0, 0, 0, .38),
      inset 0 1px 0 rgba(255, 255, 255, .11);
  }

  @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: blur(24px) saturate(170%);
      backdrop-filter: blur(24px) saturate(170%);
    }
  }

  /* ---- 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: rgba(255, 255, 255, .14);
  }

  body cart-drawer.global-drawer .global-drawer__footer {
    border-top-color: rgba(255, 255, 255, .14);
  }

  /* ---- 5) CLOSE CONTROL: 44px frost chip -------------------- */
  body cart-drawer.global-drawer .global-drawer__close {
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
  }

  body cart-drawer.global-drawer .global-drawer__close:hover,
  body cart-drawer.global-drawer .global-drawer__close:focus-visible {
    color: #ffffff;
    background-color: rgba(62, 193, 60, .28);
    border-color: rgba(62, 193, 60, .5);
  }

  /* ---- 6) LINE ITEMS ---------------------------------------- */
  body cart-drawer.global-drawer .cart-drawer__product_card {
    background-color: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  }

  body cart-drawer.global-drawer .cart-drawer__product_card:not(:last-of-type) {
    border-bottom-color: rgba(255, 255, 255, .13);
  }

  /* 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: rgba(255, 255, 255, .92);
  }

  /* 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: #ffffff;
    background-color: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
  }

  body cart-drawer.global-drawer .cart-drawer__product-card--quantity {
    background-color: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .22);
  }

  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(62, 193, 60, .26);
  }

  body cart-drawer.global-drawer .cart-drawer__product-card--remove {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
  }

  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 ------------------------------------
     Green acts. Flat green, no frost: a translucent green over a
     translucent veil muddies into olive, and the blur it carried in
     glass-dock section 10 was a whole surface spent on a button. */
  body cart-drawer.global-drawer .global-drawer__footer .cart-drawer__footer--button:not(.btn--secondary) {
    color: #07270b;
    background-color: #3ec13c;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .38),
      0 8px 22px rgba(62, 193, 60, .26);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body cart-drawer.global-drawer .global-drawer__footer .cart-drawer__footer--button.btn--secondary {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .26);
  }

  /* ---- 8) EMPTY STATE: the "OxiClear Best Sellers" key ------ */
  body cart-drawer.global-drawer .cart-drawer__empty-btn-container .cart-drawer__empty-btn {
    color: #07270b;
    background-color: #3ec13c;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .38),
      0 8px 22px rgba(62, 193, 60, .26);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ---- 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 rgba(255, 255, 255, .17);
      border-radius: 20px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11);
    }
  }

  /* 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: #ffffff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    -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: #ffffff;
  }

  /* 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;
  }

  /* 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: 44px;
    align-items: center;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 12px;
  }

  @media (hover: hover) and (pointer: fine) {
    body cart-drawer.global-drawer .cart-drawer__recommendations .product-card-basic:hover {
      border-color: rgba(255, 255, 255, .28);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        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(62, 193, 60, .26);
      border-color: rgba(62, 193, 60, .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: #ffffff;
    background-color: rgba(255, 255, 255, .08);
  }

  body cart-drawer.global-drawer .cart-drawer__note--close-btn {
    color: #07270b;
    background-color: #3ec13c;
    border: 1px solid rgba(255, 255, 255, .28);
  }

  /* ---- 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: rgba(9, 11, 13, .96);
      --oc-cart-rail: rgba(9, 11, 13, .96);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    body cart-drawer.global-drawer[data-drawer-position="right"][aria-modal="true"] {
      --cart-drawer-color: rgba(9, 11, 13, .96);
      --oc-cart-rail: rgba(9, 11, 13, .96);
    }

    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-facelift-actions (INDEX:170) */
/* 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 {
    --oc-action-primary-background: rgba(62, 193, 60, .88);
    --oc-action-primary-background-hover: rgba(95, 215, 92, .92);
    --oc-action-primary-border: rgba(255, 255, 255, .5);
    --oc-action-primary-border-hover: rgba(255, 255, 255, .6);
    --oc-action-primary-text: #07270b;
    --oc-action-secondary-background: rgba(255, 255, 255, .88);
    --oc-action-secondary-background-hover: #f3f3f3;
    --oc-action-secondary-border: #c1c1c2;
    --oc-action-secondary-border-hover: #242424;
    --oc-action-secondary-text: #242424;
    --oc-action-focus: #5cc6d0;
    --oc-action-height: 48px;
    --oc-action-radius: 999px;   /* pill: founder's call 20 Aug, over the mockup's 14px */
    --oc-action-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px rgba(62, 193, 60, .24);
    --oc-action-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 32px rgba(62, 193, 60, .30);
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-aircheck__button,
    .oc-legacy-story__button,
    .legacy-collection-page__load-more,
    .oc-legacy-pdp__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);
    /* The frost belongs with the fill it blurs through. It used to live in the dock
       layer while the fill stayed opaque here, so the blur had nothing to work on. */
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    font-family: var(--oc-font-body);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
    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-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 4px 14px rgba(0, 0, 0, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
    --oc-action-elevation-hover: 0 8px 20px rgba(0, 0, 0, .11), inset 0 1px 0 #fff;
  }

  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,
    .legacy-collection-page__load-more,
    .oc-legacy-pdp__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-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-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
  ):focus-visible {
    outline: 3px solid var(--oc-action-focus);
    outline-offset: 3px;
  }

  body.oc-facelift [id="MainContent"] :where(
    .oc-aircheck__button,
    .legacy-collection-page__load-more,
    .oc-legacy-pdp__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,
      .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:171) */
.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: #5cc6d0; --oc-commerce-accent-soft: #69cfd1; --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: 3px solid var(--oc-commerce-accent) !important; outline-offset: 3px; 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: 17px; font-weight: 600; line-height: 1.35;
  }

  .oc-facelift .legacy-collection-product-card__price {
    margin: auto 0 0; padding: 0 18px 18px; color: var(--oc-commerce-black); font-size: 16px; font-weight: 700;
  }

  .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: 15px; line-height: 1.4;
  }

  .oc-facelift .oc-legacy-pdp-card__price {
    margin: auto 0 0; padding: 0 18px 18px; color: var(--oc-commerce-black); font-weight: 700;
  }

  /* 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: 700;
  }

  .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-commerce-white); background: var(--oc-commerce-black); border: 1px solid var(--oc-commerce-black); border-radius: var(--oc-commerce-radius-sm);
  }

  .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); font-size: clamp(28px, 3.4vw, 46px); font-weight: 650; line-height: 1.1; letter-spacing: -0.03em;
  }

  .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); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }

  .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: var(--oc-commerce-ink); background-color: transparent; border: 1px solid transparent; border-radius: 10px;
  }

  .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: var(--oc-commerce-black); background-color: rgba(92, 198, 208, 0.2); border-color: var(--oc-commerce-accent);
  }

  .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-commerce-white); background: var(--oc-commerce-black); border: 1px solid var(--oc-commerce-black); border-radius: var(--oc-commerce-radius-sm);
  }

  .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); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }

  .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: 16px;
  }

  /* 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); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }

  .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: clamp(28px, 3vw, 42px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em;
  }

  .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: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em;
  }

  .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(92, 198, 208, 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(92, 198, 208, 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-commerce-white); background: var(--oc-commerce-black); border: 1px solid var(--oc-commerce-black); border-radius: var(--oc-commerce-radius-sm);
  }

  .oc-facelift .product-section .shopify-payment-button__button--unbranded {
    min-height: 48px !important; color: var(--oc-commerce-black) !important; background: var(--oc-commerce-accent-soft) !important; border-radius: var(--oc-commerce-radius-sm) !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; font-size: clamp(28px, 3.4vw, 44px); font-weight: 650; letter-spacing: -.03em;
  }

  .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; -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) {
    font-size: clamp(34px, 4vw, 52px); font-weight: 650; line-height: 1.05; letter-spacing: -0.035em; 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); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }

  .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-commerce-white); background: var(--oc-commerce-black); border: 1px solid var(--oc-commerce-black); border-radius: var(--oc-commerce-radius-sm);
  }

  .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: 700;
  }

  .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: 600;
  }

  .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);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.05;
    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: 700;
  }

  .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); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }

  .oc-facelift :is(.legacy-cart__subtotal strong, .cart__subtotal .money) {
    font-size: clamp(22px, 2.4vw, 30px); font-weight: 700;
  }

  .oc-facelift :is(.legacy-cart__button, .cart--button-checkout, .cart--button-update) {
    min-height: 48px; padding: 0 20px; color: var(--oc-commerce-white); background: var(--oc-commerce-black); border: 1px solid var(--oc-commerce-black); border-radius: var(--oc-commerce-radius-sm);
  }

  .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: 600;
  }

  .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-commerce-white); background: var(--oc-commerce-black); border: 1px solid var(--oc-commerce-black); border-radius: var(--oc-commerce-radius-sm);
  }

  .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; font-size: 14px;
    }

    .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; font-size: 14px;
    }

    .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:172) */
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-contact-page > 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;
    font-size: clamp(34px, 5vw, 68px);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1;
    text-align: center;
    text-transform: none;
  }

  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-contact-page > 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 :is(.legacy-blog__title h1, .legacy-article__header h1, .legacy-error-page__heading h1) {
    font-size: clamp(34px, 5vw, 62px);
    font-weight: 650;
    line-height: 1;
  }

  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);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
  }

  body.oc-facelift .shopify-policy__body {
    overflow-wrap: anywhere;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.72;
  }

  body.oc-facelift .shopify-policy__body :is(h2, h3) {
    margin: clamp(30px, 4vw, 44px) 0 14px;
    color: var(--oc-color-ink);
    font-family: var(--oc-font-display);
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.15;
    text-align: left;
    text-wrap: balance;
  }

  body.oc-facelift .shopify-policy__body h2 {
    font-size: clamp(23px, 2.5vw, 30px);
  }

  body.oc-facelift .shopify-policy__body h3 {
    font-size: clamp(19px, 2vw, 24px);
  }

  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:173) */
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;
    --oc-color-focus: var(--nav-text-hover, #5cc6d0);
    --oc-color-focus-bright: #69cfd1;
    --oc-color-sale: var(--on-sale-color, #f26c4f);
    --oc-font-display: var(--header-font-stack);
    --oc-font-body: var(--body-font-stack);
    --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 .plyr {
    font-family: var(--oc-system-font-stack);
  }

  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-blog__title h1,
    .legacy-article__header 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
  ) {
    font-family: var(--oc-font-display);
    letter-spacing: -.025em;
    text-wrap: balance;
  }

  body.oc-facelift :is(
    .legacy-collection-product-card,
    .oc-legacy-pdp-card,
    .oc-legacy-three__card,
    .legacy-search__result,
    .legacy-blog__post,
    .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,
    .legacy-blog__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,
    .legacy-blog__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: inset 0 1px 0 rgba(255, 255, 255, .9);
    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(--oc-color-focus);
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc-color-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-blog,
    .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: 3px solid var(--oc-color-focus);
    outline-offset: 3px;
  }

  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,
      .legacy-blog__post,
      .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,
      .legacy-blog__post
    ):hover :is(
      .legacy-collection-product-card__image,
      .oc-legacy-pdp-card__image,
      .legacy-search__image img,
      .legacy-blog__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-blog__post,
      .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,
      .legacy-blog__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:174) */
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: clamp(11px, 1vw, 14px);
    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__copy h2 {
    font-family: var(--oc-font-display);
    font-size: clamp(30px, 4.1vw, 58px);
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 1.02;
  }

  body.oc-facelift.template-index .oc-legacy-story__text {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.65;
  }

  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), inset 0 1px 0 rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  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__header h2 {
    font-size: clamp(30px, 4vw, 54px);
    letter-spacing: -.035em;
    line-height: 1.02;
  }

  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%;
  }

  body.oc-facelift.template-index .oc-legacy-three__card h3 {
    font-family: var(--oc-font-display);
    font-size: clamp(26px, 2.2vw, 32px);
    font-weight: 700;
    letter-spacing: -.03em;
  }

  @media (min-width: 768px) and (max-width: 1099px) {
    body.oc-facelift.template-index .oc-legacy-three__card h3 {
      font-size: 28px;
    }

    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;
      font-size: 11px;
    }

    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__copy h2 {
      font-size: clamp(29px, 9vw, 42px);
      line-height: 1.04;
    }

    body.oc-facelift.template-index .oc-legacy-story__button {
      display: inline-flex;
      min-height: 48px;
      font-size: 16px;
    }

    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-three__card h3 {
      font-size: 24px;
    }

    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:175) */
.header-section,
  .footer-wrapper,
  cart-drawer.global-drawer,
  .breadcrumb,
  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: #5cc6d0; --oc-shell-aqua-soft: #69cfd1;
    --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);
  }
  .header-section :where(a, button, input):focus-visible,
  .footer-wrapper :where(a, button, input):focus-visible,
  cart-drawer.global-drawer :where(a, button, input, textarea):focus-visible,
  .breadcrumb a:focus-visible,
  back-to-top .back-to-top-button:focus-visible {
    outline: 2px solid var(--oc-shell-aqua-soft); outline-offset: 3px;
  }
  .header-section .header-section--wrapper,
  .header-section.sticky-header {
    background-color: var(--oc-shell-charcoal);
  }
  .header-section .site-header,
  .header-section .mobile-nav-bar-wrapper {
    --header-color: var(--oc-shell-charcoal); --nav-text-color: var(--oc-shell-white); --nav-text-hover: var(--oc-shell-aqua);
    color: var(--oc-shell-white); background-color: var(--oc-shell-charcoal); border-bottom-color: color-mix(in srgb, var(--oc-shell-white) 12%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 8px 30px rgba(0, 0, 0, 0.12);
  }
  .header-section.sticked .site-header,
  .header-section.sticked .mobile-nav-bar-wrapper {
    background-color: var(--oc-shell-charcoal);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 12px 36px rgba(0, 0, 0, 0.2);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header-section .header-section--wrapper,
    .header-section.sticky-header {
      background-color: transparent;
    }
    .header-section .site-header,
    .header-section .mobile-nav-bar-wrapper {
      background-color: var(--oc-shell-glass);
      border-bottom-color: rgba(255, 255, 255, 0.14);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 10px 32px rgba(0, 0, 0, 0.16);
      -webkit-backdrop-filter: blur(20px) saturate(120%);
      backdrop-filter: blur(20px) saturate(120%);
    }
    .header-section.sticked .site-header,
    .header-section.sticked .mobile-nav-bar-wrapper {
      background-color: var(--oc-shell-glass-dense);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 36px rgba(0, 0, 0, 0.2);
    }
  }
  .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:hover,
  .header-section .site-header__nav .first-level-dropdown > .site-nav__link:focus-visible {
    background-color: color-mix(in srgb, var(--oc-shell-white) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oc-shell-white) 12%, transparent);
  }
  .header-section .site-header__nav .site-nav__link[aria-current='page'] {
    color: var(--oc-shell-aqua); background-color: color-mix(in srgb, var(--oc-shell-aqua) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oc-shell-aqua) 36%, transparent);
  }
  .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-shell-aqua); background-color: color-mix(in srgb, var(--oc-shell-white) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oc-shell-white) 12%, transparent);
  }
  .header-section .site-nav__dropdown,
  .header-section .site-nav__subdropdown {
    color: var(--oc-shell-white); background-color: color-mix(in srgb, var(--oc-shell-charcoal) 95%, transparent); border: 1px solid color-mix(in srgb, var(--oc-shell-white) 11%, transparent);
    box-shadow: 0 22px 56px color-mix(in srgb, var(--oc-shell-ink) 28%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  }
  .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-shell-white);
  }
  .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-shell-aqua); background-color: color-mix(in srgb, var(--oc-shell-white) 7%, transparent);
  }
  .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); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .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: inset 0 1px 0 color-mix(in srgb, var(--oc-shell-white) 70%, transparent);
  }
  .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);
  }
  .footer-wrapper {
    color: var(--oc-shell-white); background-color: var(--oc-shell-charcoal);
  }
  .footer-wrapper .footer-main,
  .footer-wrapper .footer-bottom {
    --color-scheme-background-color: var(--oc-shell-charcoal); --color-scheme-text-color: var(--oc-shell-white); --color-scheme-border-color: color-mix(in srgb, var(--oc-shell-white) 12%, transparent);
    color: var(--oc-shell-white); background-color: var(--oc-shell-charcoal);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .footer-wrapper {
      background-color: var(--oc-shell-glass);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 -10px 30px rgba(0, 0, 0, 0.1);
      -webkit-backdrop-filter: blur(18px) saturate(120%);
      backdrop-filter: blur(18px) saturate(120%);
    }
    .footer-wrapper .footer-main,
    .footer-wrapper .footer-bottom {
      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,
      .footer-wrapper {
        -webkit-backdrop-filter: blur(12px) saturate(115%);
        backdrop-filter: blur(12px) saturate(115%);
      }
    }
  }
  @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,
    .footer-wrapper .footer-main,
    .footer-wrapper .footer-bottom {
      background-color: var(--oc-shell-charcoal);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  .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,
      transparent,
      color-mix(in srgb, var(--oc-shell-aqua) 70%, transparent),
      transparent
    );
    content: '';
  }
  .footer-wrapper .footer-article,
  .footer-wrapper .footer-content,
  .footer-wrapper .bottom--footer {
    color: color-mix(in srgb, var(--oc-shell-white) 84%, transparent);
  }
  .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-shell-white);
    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-shell-aqua); 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-shell-white);
    background-color: color-mix(in srgb, var(--oc-shell-white) 8%, transparent); border: 1px solid color-mix(in srgb, var(--oc-shell-white) 18%, transparent); border-radius: 14px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oc-shell-white) 10%, transparent);
  }
  .footer-wrapper .footer-email-input::placeholder,
  .footer-wrapper .newsletter-footer input.footer-email-input::placeholder {
    color: color-mix(in srgb, var(--oc-shell-white) 66%, transparent); opacity: 1;
  }
  .footer-wrapper .footer-email-input:focus,
  .footer-wrapper .newsletter-footer input.footer-email-input:focus {
    border-color: var(--oc-shell-aqua-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-shell-aqua) 22%, transparent);
  }
  .footer-wrapper .footer-email-submit {
    min-height: 50px; padding-right: 20px; padding-left: 20px;
    color: var(--oc-shell-ink-soft); background-color: var(--oc-shell-aqua); border-color: var(--oc-shell-aqua);
    border-radius: 14px; box-shadow: 0 10px 24px color-mix(in srgb, var(--oc-shell-ink) 18%, transparent);
    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-shell-ink-soft); background-color: var(--oc-shell-aqua-soft); border-color: var(--oc-shell-aqua-soft);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--oc-shell-ink) 24%, transparent); transform: translateY(-1px);
  }
  .footer-wrapper .social-media-footer ul li a {
    min-width: 44px; min-height: 44px; border: 1px solid color-mix(in srgb, var(--oc-shell-white) 14%, transparent);
    border-radius: 999px; background-color: color-mix(in srgb, var(--oc-shell-white) 6%, 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-shell-aqua); border-color: color-mix(in srgb, var(--oc-shell-aqua) 48%, transparent); background-color: color-mix(in srgb, var(--oc-shell-aqua) 12%, transparent);
  }
  .footer-wrapper .footer-bottom {
    border-top: 1px solid color-mix(in srgb, var(--oc-shell-white) 10%, transparent);
  }
  .breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 4px; width: fit-content; max-width: 100%;
    min-height: 52px; padding: 4px 8px; color: var(--oc-shell-copy);
    background-color: color-mix(in srgb, var(--oc-shell-white) 88%, transparent); border: 1px solid color-mix(in srgb, var(--oc-shell-ink) 9%, transparent); border-radius: 999px;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--oc-shell-white) 78%, transparent),
      0 10px 28px color-mix(in srgb, var(--oc-shell-ink) 9%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .breadcrumb .breadcrumb-item {
    display: inline-flex; align-items: center;
  }
  .breadcrumb .breadcrumb-item a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-right: 10px; padding-left: 10px; border-radius: 999px;
    transition:
      color var(--oc-shell-ease),
      background-color var(--oc-shell-ease);
  }
  .breadcrumb .breadcrumb-item a:hover,
  .breadcrumb .breadcrumb-item a:focus-visible {
    color: var(--oc-shell-ink-soft); background-color: color-mix(in srgb, var(--oc-shell-aqua-soft) 18%, transparent);
  }
  .breadcrumb .breadcrumb-item[aria-current='page'] {
    padding-right: 10px; color: var(--oc-shell-ink-soft); font-weight: 600;
  }
  .breadcrumb .breadcrumb-divider {
    color: var(--oc-shell-aqua);
  }
  .header-section .search-dropdown {
    --header-color: var(--oc-shell-charcoal); --nav-text-color: var(--oc-shell-white); --nav-text-hover: var(--oc-shell-aqua);
    color: var(--oc-shell-white); background-color: color-mix(in srgb, var(--oc-shell-charcoal) 95%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--oc-shell-white) 12%, transparent);
    border-radius: 0 0 24px 24px; box-shadow: 0 28px 64px color-mix(in srgb, var(--oc-shell-ink) 30%, transparent); clip-path: inset(0 0 0 round 0 0 24px 24px);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  }
  .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: color-mix(in srgb, var(--oc-shell-white) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--oc-shell-white) 16%, transparent); border-radius: 16px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oc-shell-white) 10%, transparent);
    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-shell-aqua-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-shell-aqua) 22%, transparent);
  }
  .header-section .predictive-search__input {
    min-height: 50px; color: var(--oc-shell-white);
  }
  .header-section .predictive-search__input::placeholder {
    color: color-mix(in srgb, var(--oc-shell-white) 68%, transparent); 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-shell-white);
    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-shell-aqua); background-color: color-mix(in srgb, var(--oc-shell-white) 9%, transparent);
  }
  .header-section .predictive-search__title,
  .header-section .predictive-search__nav::after {
    border-color: color-mix(in srgb, var(--oc-shell-white) 12%, transparent);
  }
  .header-section .predictive-search__list-item,
  .header-section .predictive-search__nav-button {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--oc-shell-white);
  }
  .header-section .predictive-search__nav-button {
    padding-right: 8px; padding-left: 8px;
  }
  .header-section .predictive-search__nav-button.active {
    color: var(--oc-shell-aqua);
  }
  .header-section .predictive-search__nav-button.active::after {
    background-color: var(--oc-shell-aqua);
  }
  .header-section .predictive-search__grid-item--page-or-article,
  .header-section .predictive-search__collection-link--no-image {
    background-color: color-mix(in srgb, var(--oc-shell-white) 7%, transparent); border: 1px solid color-mix(in srgb, var(--oc-shell-white) 11%, transparent); border-radius: 16px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oc-shell-white) 8%, transparent);
  }
  .header-section .predictive-search__collection-image,
  .header-section .predictive-search__collection-image img {
    border-radius: 14px;
  }
  .header-section .predictive-search__view-all-mobile {
    background-color: color-mix(in srgb, var(--oc-shell-charcoal) 88%, transparent); border-top-color: color-mix(in srgb, var(--oc-shell-white) 12%, transparent); -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .header-section .search-dropdown__overlay {
    background-color: color-mix(in srgb, var(--oc-shell-ink) 48%, transparent); -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:
      inset 0 1px 0 var(--oc-shell-white),
      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:
      inset 0 1px 0 color-mix(in srgb, var(--oc-shell-white) 15%, transparent),
      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: 13px;
    }
    .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:176) */
/* ============ 1) GREEN LEAD RE-SKIN (token overrides) ============ */
  body .header-section,
  body .footer-wrapper,
  body cart-drawer.global-drawer,
  body .breadcrumb,
  body back-to-top {
    --oc-shell-charcoal: #0a0c0d;
    --oc-shell-aqua: #3ec13c;        /* 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);   /* round 7: was 0.72, too dark when stuck */
  }

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

  :root:root {
    --oxg-accent: #3ec13c;
    --oxg-wash:
      radial-gradient(1100px 560px at 12% -8%, rgba(62, 193, 60, 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: min(1400px, calc(100% - 28px));
    margin: 14px auto 0;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 20px;
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.11);
  }

  @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: blur(24px) saturate(170%);
      backdrop-filter: blur(24px) saturate(170%);
    }
  }

  body .header-section.sticked .site-header,
  body .header-section.sticked .mobile-nav-bar-wrapper {
    box-shadow:
      0 14px 44px rgba(0, 0, 0, 0.44),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  /* round 7: the stuck dock was reading heavy. Fill lightened via --oc-shell-glass-dense
     (0.72 -> 0.60) and the blur deepened here, so legibility over scrolling content is
     bought with frost instead of darkness. */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body .header-section.sticked .site-header,
    body .header-section.sticked .mobile-nav-bar-wrapper {
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      backdrop-filter: blur(30px) saturate(180%);
    }
  }

  /* 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: min(1400px, calc(100% - 28px));
    margin: 0 auto 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.11);
  }

  /* ============ 4) MOBILE TUNING ============ */
  @media screen and (max-width: 767px) {
    body .header-section .site-header,
    body .header-section .mobile-nav-bar-wrapper {
      width: calc(100% - 20px);
      margin: 10px auto 0;
      border-radius: 16px;
    }

    body .footer-wrapper {
      width: calc(100% - 20px);
      margin: 0 auto 14px;
      border-radius: 20px;
    }
  }

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

  /* ============ 6) WHITE FROSTED FLOATING TILES (product/collection cards) ============ */
  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),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  @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),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
  }

  /* ============ 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 #3ec13c 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 #3ec13c.
     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. Only the focus colour stays with the palette. */
  html body.oc-facelift {
    --oc-action-focus: #3ec13c;
  }

  /* 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: #20762a !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(62, 193, 60, 0.16) !important;
    color: #20762a !important;
    box-shadow: inset 0 0 0 1.5px #3ec13c !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: 13.5px;
    font-weight: 700;
    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),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
  }

  body.oc-facelift .oxiclear-legacy-how-to__tab-list :is(input:checked + label, label:has(input:checked)) {
    background: #3ec13c !important;
    color: #07270b !important;
    border-color: #3ec13c !important;
    box-shadow: 0 12px 28px rgba(62, 193, 60, 0.35) !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: 14.5px;
  }

  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;
      font-size: 12px;
    }
  }


  /* ============ 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: #3ec13c;
    color: #07270b;
    border-color: #3ec13c;
    box-shadow: 0 12px 28px rgba(62, 193, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  @media (hover: hover) and (pointer: fine) {
    body .oxiclear-legacy-how-to__tab-list label:hover {
      box-shadow: 0 17px 34px rgba(62, 193, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }
  }

  /* 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(62, 193, 60, 0.2);
    color: #20762a;
    box-shadow: 0 14px 30px rgba(62, 193, 60, 0.22), inset 0 0 0 1.5px #3ec13c, inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }

  /* DRDO report buttons -> frosted green */
  body .oxiclear-legacy-technical__report a,
  body .oxiclear-legacy-technical__report--2020 a {
    color: #07270b;
    background: rgba(62, 193, 60, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 28px rgba(62, 193, 60, 0.24);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }

  body .oxiclear-legacy-technical__report a:hover,
  body .oxiclear-legacy-technical__report--2020 a:hover {
    color: #07270b;
    background: rgba(95, 215, 92, 0.9);
  }

  /* Frosted green for the primary buttons that live OUTSIDE #MainContent and so are
     not reached by the button system in oxiclear-facelift-actions. The in-content
     selectors that used to be listed here were dead - actions already painted them. */
  body .footer-wrapper .footer-email-submit,
  body cart-drawer.global-drawer .cart-drawer__footer--button:not(.btn--secondary),
  body cart-drawer.global-drawer .cart-drawer__empty-btn {
    color: #07270b;
    background: rgba(62, 193, 60, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 26px rgba(62, 193, 60, 0.24);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }

  /* ============ 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, big bold statement, CLEAN AIR in green */
  body .footer-wrapper .content-footer.border-none .footer-article::before {
    content: "";
    display: block;
    width: 132px;
    height: 38px;
    margin-bottom: 16px;
    background: url("/cdn/shop/files/oxiclear-logo-colored.png") left center / contain no-repeat;
  }

  body .footer-wrapper .content-footer.border-none .footer-article p {
    max-width: 340px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  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: 13px;
    font-weight: 800;
    letter-spacing: 0.22em;
    line-height: 1.2;
    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;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.08;
  }

  /* 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 #00b6d9, Reusability green #4e9b58, International purple #7168c9.
     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-shell-white);
  }

  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, #3ec13c, #5fd75c);
    box-shadow: 0 0 10px rgba(62, 193, 60, 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, #3ec13c, #5fd75c);
    box-shadow: 0 0 10px rgba(62, 193, 60, 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-shell-white);
    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:178) */
/* ============ 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), inset 0 1px 0 rgba(255, 255, 255, .95);
  }

  /* 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%;
    /* white specular kept: it is what makes the disc read as glass rather than paint */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 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), inset 0 1px 0 rgba(255, 255, 255, .95);
    -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 1px 0 rgba(255, 255, 255, .95), 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), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  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: 12.5px;
    font-weight: 800;
    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), inset 0 1px 0 #fff;
    -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(62, 193, 60, .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;
    font-size: clamp(26px, 3.2vw, 40px) !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 56ch at 15px. rem, not ch: this div inherits a larger font
       than the paragraph it holds, so a ch measure resolves against the wrong size —
       29rem is those 56 characters at 15px. */
    max-width: 29rem;
  }

  body.oc-facelift.template-index .oc-legacy-story--has-logo .oc-legacy-story__text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
  }

  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;
    line-height: 1.12;
    letter-spacing: -.01em;
  }


  /* 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);
    font-weight: 700;
    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 {
      font-size: 11px;
      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), inset 0 1px 0 rgba(255, 255, 255, .94);
    }
    50% {
      box-shadow: 0 18px 44px color-mix(in srgb, var(--oc-three-accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .94);
    }
  }

  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 */