/** Shopify CDN: Minification failed

Line 164:0 "@import" is only valid at the top level

**/
/* ============================================================
   CDW Mask PDP styles — ported from the Claude Design handoff
   (source: _design-handoffs/mask-pdp/styles/{pdp,tokens}.css).
   Scoped under .cpap-mask-pdp via CSS nesting so the prototype's
   global resets (body/h1../.container/.btn) cannot leak onto the
   shared theme header/footer. Poppins comes from the theme fonts.
   ============================================================ */

.cpap-mask-pdp{
  /* design-system tokens (tokens.css :root — real values) */
  /* ---------- BRAND CORE — Navy-teal ---------- */
  --cdw-navy:          #043146;  /* primary brand · text · primary buttons · dark sections */
  --cdw-navy-600:      #0a4a66;  /* hover partner / gradient stop */
  --cdw-navy-400:      #28586f;  /* secondary navy surfaces */
  --cdw-navy-900:      #1a3344;  /* deepest shade, footer */
  --cdw-blue:          #3575db;  /* secondary-button borders, links */

  /* ---------- SECONDARY — Sky blue (calm info) ---------- */
  --cdw-sky:           #8fcbe5;  /* info panels, "in cart" badge, accents on navy */
  --cdw-sky-soft:      #e6f3fa;  /* explainer panel bg */

  /* ---------- ACCENT — Gold / Amber (signature) ---------- */
  --cdw-gold:          #ffcf4c;  /* announcement bar, ratings, "viewed" badge, offers */
  --cdw-amber:         #feb62c;  /* CTA on navy backgrounds */
  --cdw-orange:        #fa8525;  /* USP / why-buy line icons */
  --cdw-cream:         #fff5dc;  /* warm section backgrounds */
  --cdw-cream-2:       #fff6db;
  --cdw-gold-tint:     #f2dfa6;  /* subtle offer panels */
  --cdw-gold-ink:      #7a5b00;  /* readable text on gold */

  /* ---------- SEMANTIC ---------- */
  --cdw-success:       #1f8a5b;
  --cdw-success-bg:    #eaf6ef;
  --cdw-sale:          #c2453a;
  --cdw-sale-dark:     #a4271e;

  /* ---------- NEUTRALS ---------- */
  --cdw-white:         #ffffff;
  --cdw-off-white:     #fafafa;
  --cdw-surface:       #f4f4f4;
  --cdw-surface-2:     #eeeeee;
  --cdw-border:        #e6e6e6;
  --cdw-border-strong: #d6d6d6;
  --cdw-border-faint:  rgba(0,0,0,.06);  /* #0000000f */
  --cdw-text-1:        #1a1a1a;
  --cdw-text-2:        #4a4a4a;
  --cdw-text-3:        #8a8a8a;
  --cdw-text-4:        #a3a3a3;
  --cdw-black:         #000000;

  /* ---------- SEMANTIC ROLE ALIASES ---------- */
  --fg-1:              var(--cdw-navy);    /* primary text & headings */
  --fg-2:              var(--cdw-text-2);
  --fg-3:              var(--cdw-text-3);
  --bg-1:              var(--cdw-white);
  --bg-2:              var(--cdw-off-white);
  --bg-surface:        var(--cdw-surface-2);
  --bg-info:           var(--cdw-sky-soft);
  --bg-warm:           var(--cdw-cream);
  --bg-dark:           var(--cdw-navy);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (matches Shopify Horizon tokens) ---------- */
  --fs-12: 12px;  /* H6 / micro / legal */
  --fs-14: 14px;  /* H5 / small / meta */
  --fs-15: 15px;  /* button label, dense body */
  --fs-16: 16px;  /* body */
  --fs-18: 18px;  /* H4 */
  --fs-20: 20px;
  --fs-24: 24px;  /* H3 */
  --fs-28: 28px;
  --fs-32: 32px;  /* H2 */
  --fs-40: 40px;  /* H1 (mobile cap) */
  --fs-44: 44px;  /* H1 (desktop) */

  /* line heights */
  --lh-display-tight: 1.05;
  --lh-display-loose: 1.15;
  --lh-body:          1.6;
  --lh-body-loose:    1.7;

  /* weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- SPACING & LAYOUT ---------- */
  --page-margin-mobile:  16px;
  --page-margin-desktop: 40px;
  --page-max:            1280px;
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 24px;
  --gap-2xl: 32px;
  --gap-3xl: 48px;
  --gap-4xl: 64px;

  /* ---------- RADII (per DESIGN-SYSTEM §6) ---------- */
  --r-pill:    100px;  /* buttons */
  --r-card:    4px;    /* product / content cards */
  --r-input:   4px;    /* form inputs */
  --r-modal:   14px;   /* popovers / modals desktop */
  --r-swatch:  32px;   /* round variant swatches */
  --r-square:  0;      /* media, badges, variant buttons */
  --r-tile:    10px;   /* category tiles */

  /* ---------- BORDER & ELEVATION ---------- */
  --border-1: 1px solid var(--cdw-border);
  --border-2: 1px solid var(--cdw-border-strong);
  --border-faint: 1px solid var(--cdw-border-faint);

  --shadow-soft:  0 1px 2px rgba(4,49,70,.04), 0 4px 16px rgba(4,49,70,.06);
  --shadow-hover: 0 4px 8px rgba(4,49,70,.06), 0 12px 32px rgba(4,49,70,.12);
  --shadow-drawer: 0 20px 60px rgba(4,49,70,.25);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- INTERACTION ---------- */
  --hit:           44px;   /* minimum touch target */
  --focus-ring:    3px solid var(--cdw-gold);
  --focus-offset:  2px;
  /* short aliases used throughout the markup (pdp.css :root) */
  /* short aliases — shorter to type, identical to DS values */
  --navy: var(--cdw-navy); --navy-600: var(--cdw-navy-600); --navy-400: var(--cdw-navy-400); --navy-900: var(--cdw-navy-900);
  --gold: var(--cdw-gold); --amber: var(--cdw-amber); --orange: var(--cdw-orange);
  --cream: var(--cdw-cream); --gold-tint: var(--cdw-gold-tint); --gold-ink: var(--cdw-gold-ink);
  --sky: var(--cdw-sky); --sky-soft: var(--cdw-sky-soft);
  --success: var(--cdw-success); --success-bg: var(--cdw-success-bg);
  --sale: var(--cdw-sale); --sale-dark: var(--cdw-sale-dark);
  --bg-2: var(--cdw-off-white); --surface: var(--cdw-surface); --surface-2: var(--cdw-surface-2);
  --border: var(--cdw-border); --border-strong: var(--cdw-border-strong); --border-faint: var(--cdw-border-faint);
  --text-1: var(--cdw-text-1); --text-2: var(--cdw-text-2); --text-3: var(--cdw-text-3); --text-4: var(--cdw-text-4);
  --blue: var(--cdw-blue);
  --sh-soft: var(--shadow-soft); --sh-hover: var(--shadow-hover); --sh-drawer: var(--shadow-drawer);
  /* base typography on the wrapper */
  font-family: var(--font-body); color: var(--navy); -webkit-font-smoothing: antialiased;
}

@keyframes shake{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-3px); } 75%{ transform: translateX(3px); } }

/* component rules, descendant-scoped via native CSS nesting */
.cpap-mask-pdp{
/* ============================================================
   CDW Mask PDP — page styles
   Imports the DS token sheet, then adds short aliases + PDP layout.
   ============================================================ */
@import url("./tokens.css");



*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; }
body{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4,h5,h6{ margin:0; color:var(--navy); font-weight:600; letter-spacing:-0.01em; text-wrap:balance; }
h1{ font-size:clamp(28px, 3vw, 36px); line-height:1.1; font-weight:700; }
h2{ font-size:28px; line-height:1.15; }
h3{ font-size:22px; line-height:1.15; }
h4{ font-size:17px; line-height:1.25; }
h5{ font-size:14px; line-height:1.45; }
p{ margin:0; text-wrap:pretty; }

:where(a,button,input,select,textarea):focus-visible{
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}

.container{ max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.section{ padding: 56px 0; }
.section-tight{ padding: 32px 0; }
.row{ display:flex; align-items:center; gap:8px; }
.flex-1{ flex:1; }
.text-2{ color:var(--text-2); }
.text-3{ color:var(--text-3); }
.text-navy{ color:var(--navy); }
.text-sale{ color:var(--sale); }
.fw-700{ font-weight:700; }
.fw-600{ font-weight:600; }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); }
.cdw-hl-yellow{ background-image:linear-gradient(transparent 62%, var(--gold) 62%); background-repeat:no-repeat; padding: 0 .12em; }

/* --- Button system (same shape as DS storefront kit) --- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 24px; border-radius:100px; font-weight:600; font-size:15px; border:1px solid; cursor:pointer; transition:background .12s,color .12s,border-color .12s; white-space:nowrap; font-family:inherit; }
.btn-primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-primary:hover{ background:var(--navy-600); border-color:var(--navy-600); }
.btn-secondary{ background:#fff; color:var(--navy); border-color:var(--blue); }
.btn-secondary:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-cta{ background:var(--amber); color:var(--navy); border-color:var(--amber); }
.btn-cta:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }
.btn-on-navy{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-on-navy:hover{ background:#fff; color:var(--navy); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--navy); padding:0 8px; }
.btn-ghost:hover{ text-decoration:underline; }
.btn-sm{ height:36px; padding:0 16px; font-size:13px; }
.btn-lg{ height:56px; padding:0 32px; font-size:16px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* --- Badges (square radius 0) --- */
.badge{ display:inline-flex; align-items:center; padding:4px 10px; font-size:10px; font-weight:700; letter-spacing:.04em; line-height:1.2; border-radius:0; text-transform:uppercase; }
.badge-sale{ background:var(--text-1); color:#fff; }
.badge-save{ background:var(--sale); color:#fff; }
.badge-viewed{ background:var(--gold); color:var(--navy); }
.badge-incart{ background:var(--sky); color:var(--navy); }
.badge-soldout{ background:#fff; color:#000; border:1px solid var(--border-strong); }
.badge-bundle{ background:var(--navy); color:var(--gold); }
.badge-best{ background:var(--gold); color:var(--navy); }
.badge-new{ background:var(--success); color:#fff; }

/* --- Pills (round) --- */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:12px; font-weight:600; }
.pill-cream{ background:var(--cream); color:var(--gold-ink); }
.pill-sky{ background:var(--sky-soft); color:var(--navy); }
.pill-success{ background:var(--success-bg); color:var(--success); }
.pill-sale{ background:#fee9e7; color:var(--sale); }
.pill-outline{ background:#fff; color:var(--navy); border:1px solid var(--border-strong); }
.pill-navy{ background:var(--navy); color:#fff; }

/* --- Placeholder pattern --- */
.ph{ background:repeating-linear-gradient(135deg, rgba(4,49,70,.06) 0 10px, rgba(4,49,70,0) 10px 20px), var(--surface); position:relative; display:flex; align-items:center; justify-content:center; color:var(--navy); }
.ph-sky{ background:repeating-linear-gradient(135deg, rgba(143,203,229,.35) 0 10px, rgba(143,203,229,0) 10px 20px), var(--sky-soft); }
.ph-cream{ background:repeating-linear-gradient(135deg, rgba(254,182,44,.22) 0 10px, rgba(254,182,44,0) 10px 20px), var(--cream); }
.ph-navy{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, rgba(255,255,255,0) 10px 20px), var(--navy); color:rgba(255,255,255,.5); }
.ph-label{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; padding:4px 8px; background:rgba(255,255,255,.85); border-radius:3px; color:var(--navy); }

.stars{ display:inline-flex; gap:1px; color:var(--amber); line-height:1; }
.stars svg{ width:1em; height:1em; }

/* ===== Live-style header chrome ===== */
.live-top{
  background: var(--navy);
  color:#fff;
  font-size:12px;
  height:36px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.live-top .center{ display:flex; align-items:center; gap:8px; font-weight:500; }
.live-top .nav-arrow{ position:absolute; top:0; height:36px; width:36px; display:grid; place-items:center; color:#fff; opacity:.7; background:none; border:0; }
.live-top .nav-arrow.l{ left:8px; }
.live-top .nav-arrow.r{ right:140px; }
.live-top .right{ position:absolute; right:24px; top:0; height:36px; display:flex; align-items:center; gap:18px; }
.live-top .right a{ font-size:12px; color:#fff; opacity:.92; }

.live-mid{ background:#fff; padding:18px 0; border-bottom:1px solid var(--border-faint); }
.live-mid .grid{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:24px; }
.live-mid .logo img{ height:46px; }
.live-mid .tagline{ font-size:24px; font-weight:700; color:var(--navy); text-align:center; line-height:1.1; }
.live-mid .tagline .hl{
  background-image:linear-gradient(transparent 64%, var(--gold) 64%);
  background-repeat:no-repeat;
  background-position: 0 .9em;
}
.live-mid .right{ display:flex; justify-content:flex-end; align-items:center; gap:14px; }
.live-mid .acct{ display:flex; align-items:center; gap:8px; color:var(--navy); }
.live-mid .acct .lbl{ font-size:11px; line-height:1.2; }
.live-mid .acct .lbl b{ font-weight:600; font-size:13px; display:block; }
.live-mid .cart-pill{ display:flex; align-items:center; gap:10px; background:var(--surface-2); padding:6px 14px; border-radius:8px; font-weight:700; color:var(--navy); font-size:13px; }

.live-buy{
  background: var(--cream);
  border-bottom: 1px solid var(--gold-tint);
}
.live-buy .grid{
  display:grid; grid-template-columns:repeat(3,1fr); align-items:center;
  padding: 14px 0; gap:24px;
}
.live-buy .cell{ display:flex; align-items:center; justify-content:center; gap:10px; font-weight:600; color:var(--navy); font-size:14px; }
.live-buy .cell svg{ color:var(--navy); }
.live-buy .div{ width:1px; background:rgba(4,49,70,.12); height:24px; align-self:center; }

.live-nav{ border-bottom: 1px solid var(--border); background:#fff; }
.live-nav .grid{ display:flex; align-items:center; gap:28px; height:54px; }
.live-nav a{ font-size:13px; font-weight:500; color:var(--navy); display:inline-flex; align-items:center; gap:4px; }
.live-nav a.loud{ font-weight:700; color:var(--navy); }
.live-nav a.loud::before{ content:""; display:inline-block; width:3px; height:14px; background:var(--gold); margin-right:6px; }
.live-nav .spacer{ flex:1; }
.live-nav .right{ display:flex; gap:18px; align-items:center; color:var(--navy); }

/* ===== Breadcrumb ===== */
.crumb{ font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:6px; padding: 16px 0 0; }
.crumb a{ color:var(--text-2); }
.crumb a:hover{ color:var(--navy); }
.crumb .sep{ opacity:.5; }
.crumb .here{ color:var(--text-3); }

/* ===== PDP hero layout ===== */
.pdp-hero{ display:grid; grid-template-columns: minmax(0, 1.18fr) minmax(420px, 1fr); gap:48px; align-items:flex-start; padding: 24px 0 16px; }

/* gallery */
.gallery{ position:relative; }
.gallery .stage{ aspect-ratio: 4/3.6; border: 1px solid var(--border); border-radius:4px; position:relative; overflow:hidden; background:#fff; }
.gallery .stage .body{ position:absolute; inset:0; display:grid; place-items:center; }
.gallery .stage img{ max-width: 78%; max-height: 78%; object-fit:contain; }
.gallery .stage .floating{ position:absolute; top:14px; left:14px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.gallery .stage .wishlist{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--border); display:grid; place-items:center; }
.gallery .stage .zoom-hint{ position:absolute; right:14px; bottom:14px; font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:6px; background:#fff; padding:6px 10px; border-radius:100px; border:1px solid var(--border); }
.gallery .stage .vid-overlay{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(4,49,70,.85); color:#fff; }
.gallery .stage .vid-overlay .play{ width:72px; height:72px; border-radius:50%; background:var(--gold); display:grid; place-items:center; color:var(--navy); }
.gallery .thumbs{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.gallery .thumb{ width:78px; height:78px; border:1.5px solid var(--border); border-radius:4px; overflow:hidden; cursor:pointer; background:#fff; padding:0; position:relative; }
.gallery .thumb.active{ border-color: var(--navy); }
.gallery .thumb img{ width:100%; height:100%; object-fit:contain; }
.gallery .thumb.video::after{ content:""; position:absolute; inset:0; background: rgba(4,49,70,.55); }
.gallery .thumb .play-mini{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; z-index:2; }
.gallery .thumb .vbadge{ position:absolute; bottom:3px; right:3px; background:var(--navy); color:#fff; font-size:9px; padding:1px 5px; border-radius:2px; font-weight:700; z-index:2; }

/* buy column */
.buy{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.buy .brand-row{ display:flex; align-items:center; gap:12px; font-size:11px; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.buy .brand-row .sku{ color:var(--text-3); font-weight:500; letter-spacing:.04em; }
.buy h1.title{ font-size: 30px; line-height: 1.1; color: var(--navy); font-weight: 700; }
.buy .fit-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.buy .stars-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); }
.buy .stars-row a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }

/* Price panel */
/* Price block — mirrors approved machine PDP styling (cpap-machine-pdp.liquid + cpap-pdp.css).
   No cream wrapper; bold ink price; inline red "$X OFF RRP"; 3 BNPL chips incl. PayPal. */
.price-panel{ background:transparent; padding: 0; border: 0; border-radius: 0; }
.price-panel .price-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.price-panel .price-now{ font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -0.02em; }
.price-panel .price-was{ font-size: 18px; color: var(--text-2); text-decoration: line-through; font-weight: 500; }
.price-panel .price-save{ font-size: 13px; font-weight: 800; color: var(--sale); letter-spacing: 0.02em; text-transform: uppercase; }
.price-panel .afterpay-line{ margin-top: 10px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-panel .afterpay-line strong{ color: var(--navy); font-weight: 700; }
.price-panel .paychip{ display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.price-panel .paychip--afterpay{ background: #b2fce4; color: #000; }
.price-panel .paychip--zip{ background: #1a0a3c; color: #fff; }
.price-panel .paychip--paypal{ background: #fff; border: 1px solid var(--border); color: #003087; }

/* Variant block */
.vblock{ display:flex; flex-direction:column; gap:10px; }
.vblock .hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.vblock .lbl{ font-size:13px; font-weight:600; color:var(--navy); }
.vblock .lbl .v{ color:var(--text-2); font-weight:500; margin-left:4px; }
.vblock .lbl .err{ color: var(--sale); font-weight:600; margin-left:8px; }
.vblock .helper{ font-size:12px; color: var(--navy); text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:5px; }
.size-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.size-grid.has-pack{ grid-template-columns: repeat(4, 1fr); }
.size-btn{ height:60px; border-radius: 0; border:1.5px solid var(--border-strong); background:#fff; color:var(--navy); font-size:14px; font-weight:600; cursor:pointer; padding: 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition: border-color .12s, background .12s, color .12s; font-family:inherit; }
.size-btn .lab{ font-size:15px; font-weight:700; }
.size-btn .meta{ font-size:10px; font-weight:500; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.size-btn:hover{ border-color: var(--navy); }
.size-btn.active{ background: var(--navy); color:#fff; border-color: var(--navy); }
.size-btn.active .meta{ color: rgba(255,255,255,.7); }
.size-btn.fitpack{ background: var(--cream); border-color: var(--gold-tint); }
.size-btn.fitpack.active{ background: var(--navy); color:#fff; border-color: var(--navy); }
.size-btn.fitpack .meta{ color: var(--gold-ink); font-weight:700; }
.size-btn.fitpack.active .meta{ color: var(--gold); }
.size-btn.err{ border-color: var(--sale); animation: shake .35s ease-in-out; }

@media (prefers-reduced-motion: reduce){ .size-btn.err{ animation: none; } }

/* Image/labelled swatches */
.swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{ display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:1.5px solid var(--border-strong); border-radius: 100px; cursor:pointer; background:#fff; color:var(--navy); font-size:13px; font-weight:600; font-family:inherit; }
.swatch:hover{ border-color: var(--navy); }
.swatch.active{ border-color: var(--navy); background: var(--navy); color:#fff; }
.swatch .sw{ width:28px; height:28px; border-radius:50%; background:#eef3f6; border:1px solid var(--border); position:relative; overflow:hidden; flex:none; }
.swatch .sw.her{ background: linear-gradient(135deg, #f5d4d6 50%, #eef3f6 50%); }
.swatch .sw.magnet{ background: #2a3744; }
.swatch.active .sw{ border-color: rgba(255,255,255,.5); }

/* No-size inline prompt */
.size-prompt{
  display:flex; align-items:center; gap:10px;
  background: #fff5f4; border:1px solid var(--sale); color: var(--sale-dark);
  padding: 10px 14px; border-radius: 4px; font-size:13px; font-weight:500;
}
.size-prompt .ic{ flex:none; }

/* Qty + ATC row */
.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--border-strong); border-radius:100px; overflow:hidden; background:#fff; height:48px; }
.qty button{ width:42px; height:48px; border:0; background:transparent; color:var(--navy); font-size:18px; font-weight:600; }
.qty button:hover{ background: var(--surface); }
.qty input{ width:36px; height:48px; border:0; text-align:center; font-family:inherit; font-size:15px; color:var(--navy); font-weight:600; outline:none; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.atc-row{ display:flex; gap:10px; align-items:stretch; }
.atc-row .btn{ flex:1; }

/* Express */
.express{ display:flex; gap:10px; align-items:stretch; }
.express .btn{ flex:1; background: #5a31f4; color:#fff; border-color: #5a31f4; font-weight:700; }
.express .btn .sp{ font-family: Georgia, serif; font-style: italic; font-weight:700; }
.express .btn:hover{ background:#4b22d6; border-color:#4b22d6; }
.express .pp{ flex:none; height:48px; padding: 0 18px; background: var(--gold); color:var(--navy); border-radius:100px; display:flex; align-items:center; font-weight:700; font-size:14px; border:0; }

/* Stock pill */
.stock{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.stock .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.stock.in .dot{ background: var(--success); box-shadow: 0 0 0 4px rgba(31,138,91,.15); }
.stock.in{ color: var(--success); }
.stock.low .dot{ background: var(--orange); box-shadow: 0 0 0 4px rgba(250,133,37,.15); }
.stock.low{ color: var(--orange); }
.stock.out .dot{ background: var(--text-3); }
.stock.out{ color: var(--text-3); }

/* Expert mask-fit help — reassurance panel for size-anxious buyers */
.expert-fit-help{
  display:flex; align-items:flex-start; gap:12px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-600) 100%);
  color:#fff; padding: 14px 16px; border-radius: 4px;
  position:relative; overflow:hidden;
}
.expert-fit-help::after{
  content:""; position:absolute; right:-30px; top:-30px; width:140px; height:140px;
  background: radial-gradient(circle at center, rgba(255,207,76,.18) 0%, transparent 70%);
  pointer-events:none;
}
.expert-fit-help .ic{
  width:42px; height:42px; border-radius:50%; background: var(--gold); color:var(--navy);
  display:grid; place-items:center; flex:none; position:relative; z-index:1;
}
.expert-fit-help .body{ position:relative; z-index:1; }
.expert-fit-help .body strong{ display:block; font-size:14px; font-weight:700; }
.expert-fit-help .body span{ display:block; font-size:12px; color: rgba(255,255,255,.85); margin-top:2px; line-height:1.5; }
.expert-fit-help .body a{ color: var(--gold); text-decoration:underline; text-underline-offset:2px; font-weight:600; }

/* Delivery block (kept v1) */
.delivery{
  background: var(--sky-soft); border:1px solid var(--sky); border-radius: 4px;
  padding: 14px 16px; display:flex; flex-direction:column; gap:10px;
}
.delivery .line{ display:flex; align-items:flex-start; gap:10px; }
.delivery .ic{ width:32px; height:32px; border-radius:8px; background:#fff; color: var(--navy); display:grid; place-items:center; flex:none; }
.delivery .ttl{ font-size:13px; font-weight:700; color:var(--navy); line-height:1.2; }
.delivery .sub{ font-size:12px; color:var(--text-2); line-height:1.5; margin-top:2px; }
.delivery .sub ul{ margin:4px 0 0; padding:0 0 0 14px; }
.delivery .sub li{ margin-bottom:1px; }
.delivery .ft{ border-top: 1px dashed rgba(4,49,70,.18); padding-top:8px; font-size:11px; color:var(--text-2); }

/* Compact trust strip */
.trust-compact{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px 16px; padding: 12px 0 0; border-top: 1px solid var(--border); }
.trust-compact .item{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--text-2); line-height:1.4; }
.trust-compact .item svg{ color:var(--orange); flex:none; margin-top:2px; }
.trust-compact .item b{ color:var(--navy); display:block; font-weight:600; }

/* Consultant CTA inline */
.consultant{ display:flex; align-items:center; gap:10px; padding: 12px 14px; border:1px solid var(--border); border-radius: 4px; }
.consultant .av{ width:42px; height:42px; border-radius:50%; background: linear-gradient(135deg, var(--cream), var(--gold-tint)); display:grid; place-items:center; color: var(--gold-ink); font-weight:700; font-size:14px; flex:none; }
.consultant .body{ flex:1; font-size:12px; color:var(--text-2); line-height:1.4; }
.consultant .body b{ display:block; color:var(--navy); font-size:13px; font-weight:600; }
.consultant a{ font-size:12px; color: var(--navy); text-decoration:underline; text-underline-offset:3px; font-weight:600; }

/* ===== Quick facts ribbon (below hero) ===== */
.qf{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:32px; }
.qf .item{ padding: 16px 20px; border-right: 1px solid var(--border); display:flex; gap:12px; align-items:flex-start; }
.qf .item:last-child{ border-right:0; }
.qf .ic{ color: var(--orange); flex:none; }
.qf .lbl{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.qf .val{ font-size:14px; font-weight:600; color:var(--navy); margin-top:2px; }

/* ===== Accordions ===== */
.acc{ border-top:1px solid var(--border); }
.acc details{ border-bottom:1px solid var(--border); }
.acc summary{
  list-style:none; cursor:pointer;
  padding: 20px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size: 17px; font-weight: 600; color: var(--navy);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .chev{ transition: transform .2s; color:var(--text-3); }
.acc details[open] summary .chev{ transform: rotate(180deg); color: var(--navy); }
.acc .body{ padding: 0 0 24px; color: var(--text-2); font-size: 14px; line-height: 1.65; max-width: 760px; }
/* Legacy-WYSIWYG normalisation — see docs/cdw-storefront/43-description-html-normalization.md.
   Constrains H1–H4 from migrated product descriptions to sane sub-heading sizes
   (they otherwise inherit the page display font and render at ~36px). */
.acc .body h1,
.acc .body h2,
.acc .body h3,
.acc .body h4{
  font-family: inherit;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.3;
  margin: 18px 0 8px;
  letter-spacing: 0;
  text-transform: none;
}
.acc .body h1{ font-size: 18px; }
.acc .body h2{ font-size: 16px; }
.acc .body h3{ font-size: 14px; }
.acc .body h4{ font-size: 13px; }
.acc .body h5{ color: var(--navy); font-size:13px; margin: 14px 0 6px; }
.acc .body p{ margin: 0 0 10px; }
.acc .body p:last-child{ margin-bottom: 0; }
/* Neutralise legacy WYSIWYG forced styles on spans */
.acc .body span[style*="font-weight: 400"]{ font-weight: inherit !important; }
.acc .body span[style*="color: rgb(43"]{ color: inherit !important; }
.acc .body a{ color: var(--gold-ink, #b8842a); text-decoration: underline; text-underline-offset: 2px; }
.acc .body a:hover{ color: var(--navy); }
/* Legacy data-variant-selector wrapper is now a transparent passthrough */
.acc .body [data-variant-selector]{ display: block; }
.acc .body ul{ margin: 4px 0; padding-left: 18px; }
.acc .body li{ margin-bottom: 4px; }
.acc .body table{ border-collapse: collapse; margin: 12px 0; font-size: 13px; width: 100%; max-width: 720px; }
.acc .body table td,
.acc .body table th{ padding: 8px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.acc .body table th{ background: var(--bg-2); font-weight: 600; color: var(--navy); }
.acc .spec-grid{ display:grid; grid-template-columns: 220px 1fr; gap: 10px 24px; max-width: 720px; font-size: 13px; }
.acc .spec-grid dt{ color: var(--text-3); font-weight:500; }
.acc .spec-grid dd{ margin:0; color: var(--navy); font-weight:600; display:flex; align-items:center; gap:6px; }
.acc .spec-grid .ttip{ width:16px; height:16px; border-radius:50%; background:var(--surface-2); color: var(--text-3); display:inline-grid; place-items:center; font-size:10px; font-weight:700; cursor:help; }
.acc .box-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 6px; max-width: 640px; }
.acc .box-list li{ display:flex; align-items:center; gap:10px; padding: 10px 14px; background: var(--bg-2); border-radius: 4px; }
.acc .box-list li svg{ color: var(--success); flex:none; }

/* Compatibility "Works with these machines" */
.compat{ background: var(--cream); border-radius: 4px; padding: 28px 28px 24px; }
.compat .hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:16px; }
.compat .hd .eyebrow{ color: var(--gold-ink); }
.compat .hd h3{ margin-top:4px; }
.compat .hd p{ font-size:14px; color: var(--text-2); margin-top: 4px; max-width: 600px; }
.compat .grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.compat .card{ background:#fff; border:1px solid var(--border); border-radius: 4px; padding: 14px; display:flex; gap:12px; align-items:center; }
.compat .card .img{ width:60px; height:60px; flex:none; }
.compat .card .br{ font-size:10px; font-weight:700; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase; }
.compat .card .nm{ font-size:13px; font-weight:600; color:var(--navy); line-height:1.2; margin-top:2px; }
.compat .card .ck{ font-size:11px; color: var(--success); font-weight:600; margin-top:4px; display:flex; align-items:center; gap:4px; }

/* Replacement parts strip */
.parts{ background:#fff; border:1px solid var(--border); border-radius: 4px; padding: 24px; }
.parts .hd{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom: 18px; }
.parts .hd h3{ margin-bottom:4px; }
.parts .hd p{ font-size:13px; color: var(--text-2); }
.parts .sub-cta{ background: linear-gradient(135deg, var(--gold) 0%, #ffe48a 100%); padding: 14px 16px; border-radius: 4px; display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.parts .sub-cta .ic{ width:42px; height:42px; border-radius:50%; background:#fff; color:var(--navy); display:grid; place-items:center; flex:none; }
.parts .sub-cta .body{ flex:1; }
.parts .sub-cta .body b{ display:block; font-size:14px; color:var(--navy); font-weight:700; }
.parts .sub-cta .body span{ font-size:12px; color: var(--gold-ink); }
.parts .grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.parts .card{ border:1px solid var(--border); border-radius: 4px; padding: 12px; display:flex; flex-direction:column; gap:8px; }
.parts .card .ph{ aspect-ratio:1/1; }
.parts .card .br{ font-size:10px; font-weight:700; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase; }
.parts .card .nm{ font-size:13px; font-weight:600; color:var(--navy); line-height:1.25; min-height:34px; }
.parts .card .cad{ font-size:11px; color: var(--text-2); display:flex; align-items:center; gap:4px; }
.parts .card .priceline{ font-size:15px; font-weight:700; color:var(--navy); }
.parts .card .priceline s{ font-size:12px; font-weight:500; color:var(--text-2); margin-left:6px; }
.parts .card .btn{ height:38px; font-size:13px; padding: 0 12px; }

/* Reviews */
.reviews{ display:grid; grid-template-columns: 320px 1fr; gap: 40px; }
.reviews .summary{ background: var(--bg-2); border-radius: 4px; padding: 22px; }
.reviews .summary .big{ font-size: 48px; font-weight: 700; color: var(--navy); line-height:1; }
.reviews .summary .bigsub{ font-size:13px; color: var(--text-2); margin-top:2px; }
.reviews .bar{ display:grid; grid-template-columns: 18px 1fr 36px; align-items:center; gap:10px; font-size:12px; color:var(--text-2); margin-top:8px; }
.reviews .bar .track{ background: var(--border); height:7px; border-radius: 100px; overflow:hidden; }
.reviews .bar .fill{ background: var(--amber); height:100%; }
.reviews .summary .ct{ font-size:12px; color: var(--text-3); margin-top: 6px; border-top:1px solid var(--border); padding-top:14px; }
.reviews .summary .ct h5{ margin-bottom:6px; }
.reviews .summary .chip{ display:inline-block; background:#fff; border:1px solid var(--border); color: var(--navy); padding: 3px 10px; border-radius: 100px; font-size:11px; font-weight:600; margin: 2px 4px 2px 0; }
.reviews .summary .chip b{ color: var(--success); font-weight:700; margin-right:4px; }
.reviews .list{ display:flex; flex-direction:column; gap: 20px; }
.reviews .list .review{ border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.reviews .list .review:last-child{ border-bottom: 0; }
.reviews .review .top{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--text-3); }
.reviews .review .top .vp{ color: var(--success); display:inline-flex; align-items:center; gap:3px; font-weight:600; }
.reviews .review .ttl{ font-size: 14px; color: var(--navy); font-weight: 600; margin-top:6px; }
.reviews .review .body{ font-size: 13px; color: var(--text-2); line-height: 1.65; margin-top: 4px; }
.reviews .review .meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color: var(--text-3); margin-top:8px; }
.reviews .review .meta b{ color: var(--navy); font-weight:600; }
.reviews .head-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
.reviews .head-row .select{ display:flex; gap:8px; }
.reviews .head-row select{ font-family:inherit; font-size:13px; height:40px; padding:0 14px; border:1px solid var(--border-strong); border-radius:100px; background:#fff; color:var(--navy); font-weight:500; }

/* Mask finder soft CTA */
.mf-cta{ background: var(--sky-soft); border:1px solid var(--sky); border-radius: 4px; padding: 20px 24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.mf-cta .ic{ width:48px; height:48px; border-radius:50%; background: #fff; color: var(--navy); display:grid; place-items:center; flex:none; }
.mf-cta .body{ flex:1; min-width:240px; }
.mf-cta .body h4{ margin-bottom:2px; }
.mf-cta .body p{ font-size:13px; color: var(--text-2); }

/* Cross-sell row */
.xsell .grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.xsell .card{ border:1px solid var(--border); border-radius: 4px; padding: 12px; display:flex; flex-direction:column; gap: 10px; transition: box-shadow .15s; }
.xsell .card:hover{ box-shadow: var(--sh-hover); }
.xsell .card .ph{ aspect-ratio:1/1; }
.xsell .card .br{ font-size:10px; font-weight:700; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase; }
.xsell .card .nm{ font-size:13px; font-weight:600; color:var(--navy); line-height:1.25; min-height:34px; }
.xsell .card .pl{ display:flex; align-items:baseline; gap:8px; }
.xsell .card .pl .now{ font-size:15px; font-weight:700; color:var(--navy); }
.xsell .card .pl s{ font-size:12px; color: var(--text-2); }
.xsell .add-all{ background: var(--cream); padding:14px 18px; border-radius:4px; display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.xsell .add-all .body{ font-size:13px; color: var(--text-2); }
.xsell .add-all .body b{ color: var(--navy); }

/* Sticky mini ATC (desktop, appears on scroll) */
.sticky-atc{
  position: fixed; left:0; right:0; bottom: 0;
  background:#fff; border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(4,49,70,.08);
  transform: translateY(100%); transition: transform .25s var(--ease-out);
  z-index: 30;
}
.sticky-atc.show{ transform: translateY(0); }
.sticky-atc .grid{ display:grid; grid-template-columns: auto 1fr auto auto; gap:18px; align-items:center; padding: 12px 0; }
.sticky-atc .img{ width:48px; height:48px; flex:none; }
.sticky-atc .body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sticky-atc .body .br{ font-size:10px; font-weight:700; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase; }
.sticky-atc .body .nm{ font-size:14px; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-atc .price{ font-weight:700; color:var(--navy); font-size:18px; display:flex; align-items:baseline; gap:8px; }
.sticky-atc .price .now.sale{ color: var(--sale); }
.sticky-atc .price s{ color: var(--text-2); font-size:13px; font-weight:500; }
.sticky-atc .mini-size{ display:flex; gap:6px; }
.sticky-atc .mini-size button{ width:36px; height:36px; border:1px solid var(--border-strong); background:#fff; color:var(--navy); font-weight:700; font-size:13px; border-radius:0; }
.sticky-atc .mini-size button.active{ background: var(--navy); color:#fff; border-color: var(--navy); }
.sticky-atc .btn{ height:44px; padding: 0 22px; }

/* Floating consultant button */
.fab-consult{
  position: fixed; right: 18px; bottom: 86px; z-index: 25;
  background: var(--navy); color:#fff; border-radius: 100px;
  padding: 12px 18px; display:flex; align-items:center; gap:8px;
  border:none; font-family:inherit; font-weight:600; font-size:13px;
  box-shadow: 0 10px 30px rgba(4,49,70,.25);
  transition: background .12s;
}
.fab-consult:hover{ background: var(--navy-600); }
.fab-consult .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; margin-right:2px; box-shadow: 0 0 0 4px rgba(34,197,94,.25); }

/* Section heads */
.shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom: 18px; }
.shead .eyebrow{ color: var(--text-3); margin-bottom:2px; }
.shead h2{ font-size: 26px; }
.shead .right a{ font-size:13px; font-weight:600; color: var(--navy); border-bottom: 1.5px solid var(--navy); padding-bottom:1px; }

/* ===== Mobile preview frame (Tweak) ===== */


/* ===== Mobile responsive ===== */
@media (max-width: 980px){
  .container{ padding: 0 16px; }
  .pdp-hero{ grid-template-columns: 1fr; gap: 28px; }
  .qf{ grid-template-columns: repeat(2, 1fr); }
  .qf .item:nth-child(2){ border-right: 0; }
  .qf .item:nth-child(1), .qf .item:nth-child(2){ border-bottom: 1px solid var(--border); }
  .compat .grid, .parts .grid, .xsell .grid{ grid-template-columns: repeat(2, 1fr); }
  .reviews{ grid-template-columns: 1fr; gap: 24px; }
  .live-mid .grid{ grid-template-columns: 1fr; gap:8px; text-align:center; }
  .live-mid .right{ justify-content:center; }
  .live-mid .tagline{ font-size:18px; }
  .live-buy .grid{ grid-template-columns: 1fr; gap:6px; padding: 10px 0; }
  .live-buy .div{ display:none; }
  .live-nav .grid{ overflow-x:auto; gap: 18px; }
  .live-nav .right{ display:none; }
  .section{ padding: 36px 0; }
  .buy h1.title{ font-size: 24px; }
  .gallery .stage{ aspect-ratio: 1/1; }
  .reviews .head-row{ flex-direction:column; align-items:flex-start; }
  .fab-consult{ display:none; }
  .sticky-atc .mini-size{ display:none; }
  .sticky-atc .grid{ grid-template-columns: 1fr auto; gap:10px; }
  .sticky-atc .img{ display:none; }
  .sticky-atc .price{ font-size:16px; }
  .sticky-atc{ transform: translateY(0); } /* always-visible on mobile */
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}
}