/** Shopify CDN: Minification failed

Line 2864:0 Unexpected "@media"

**/
/* aricove-pdp.css — GENERATED by scripts/scope-css.mjs from the V6 mockup CSS.
   Every rule is scoped under .apdp so it cannot collide with the Impulse base theme
   (Guardrail §4.2 / S-4). Edit the source (_mockup-source/v6/css/v6-design.css) +
   re-run the scoper, not this file. Wrap PDP section markup in <div class="apdp">. */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Defensive reset: the Impulse base theme paints generic class names (.hero,
   .container, …) that collide with V6's. .apdp [class] = (0,2,0) beats Impulse's
   (0,1,0) single-class rules; it sits BEFORE the V6 rules below, so any V6
   background/border (also ≥0,2,0, later in source) wins on ties and repaints.
   This neutralises bleed-through for elements V6 leaves unstyled. */
.apdp [class] { background-color: transparent; border-color: transparent; box-shadow: none; text-transform: none; letter-spacing: normal; }
/* V6 has no base .btn rule (styling lives on modifiers), so an unmodified .btn
   inherits Impulse's display:block;width:100%. Normalise to auto-width inline-flex;
   .btn--full (later in source) re-applies width:100% for the hero CTA. */
.apdp .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; text-decoration: none; }
/* Impulse paints a generic .modal (assets/Custom.css): display:none (hides V6's
   guide modals — V6 toggles visibility via .modal-backdrop opacity, not the
   dialog's display) and white text for its dark-overlay modal (makes V6's table
   cells white-on-white). Force block + readable ink so .apdp .modal wins. */
.apdp .modal { display: block; color: var(--ink); }
.apdp .modal table td, .apdp .modal table td strong { color: var(--ink); }

.apdp {
  /* Brand palette (per handover §12).
     Off-white base shifted warm-cream → neutral #f4f4f4 (Wilson 2026-06-04, item 11).
     The whole cream family neutralised together so card-vs-page contrast steps are
     preserved (cream cards already sat on a cream page); gold accents stay warm. */
  --cream: #F4F4F4;
  --cream-2: #ECECEC;
  --cream-3: #E1E1E1;
  --paper: #FFFFFF;

  /* V6 — brand "loyal blue": #121d27 (per Wilson) */
  --navy: #121d27;
  --navy-deep: #121d27;
  --navy-ink: #0c141c;

  --gold: #B8924D;
  --gold-text: #7A5A28;
  --gold-soft: #E5D3A8;
  --gold-tint: #F5ECD7;

  --ink: #1A1F2B;
  --mute: #636A75;
  --rule: #E2DACB;
  --rule-soft: #EFE9DC;

  --success: #2C764A;
  --success-dot: #3EA66E;
  --warn: #B85C1F;
  --warn-dot: #D98324;
  --danger: #C0392B;

  /* Type — V6: headings use a humanist face ("Zapf Humanist"/Optima),
     falling back to Marcellus (loaded web font) then Candara, per Wilson markup.
     Optima renders natively on macOS; Marcellus guarantees the look everywhere else. */
  --serif: 'Optima', 'Zapf_Humanist', 'Marcellus', 'Candara', 'Segoe UI', serif;
  --display: 'Optima', 'Zapf_Humanist', 'Marcellus', 'Candara', 'Segoe UI', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sizing scale (slightly editorial) */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 46px;
  --fs-5xl: 60px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radius */
  --r-1: 2px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(20, 40, 68, 0.05);
  --sh-2: 0 4px 14px rgba(20, 40, 68, 0.07);
  --sh-3: 0 10px 30px rgba(20, 40, 68, 0.10);
  --sh-card: 0 1px 0 rgba(20, 40, 68, 0.04), 0 1px 2px rgba(20, 40, 68, 0.06);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms var(--ease);
  --t: 220ms var(--ease);

  --container: 1240px;
  --container-wide: 1380px;
}
.apdp /* ============================================================
   RESET + BASE
   ============================================================ */
*, .apdp *::before, .apdp *::after { box-sizing: border-box; }
.apdp, .apdp { margin: 0; padding: 0; }
.apdp { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.apdp {
  font-family: var(--sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.apdp img, .apdp svg { display: block; max-width: 100%; }
.apdp button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.apdp a { color: inherit; text-decoration: none; }
.apdp input, .apdp textarea, .apdp select { font: inherit; color: inherit; }
.apdp :focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 3px;
}
.apdp .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.apdp .skip-link {
  position: absolute; top: -100px; left: 12px;
  background: var(--navy); color: white;
  padding: 10px 16px; border-radius: 6px;
  z-index: 1000; font-weight: 600;
}
.apdp .skip-link:focus { top: 12px; }
.apdp /* ============================================================
   PRODUCT SWITCHER (top-level nav)
   ============================================================ */
.app-shell { min-height: 100vh; }
.apdp .product-switcher {
  position: sticky; top: 0; z-index: 90;
  background: var(--navy-deep);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.apdp .product-switcher__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.apdp .brand-mark {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.apdp .brand-mark .reg { font-size: 11px; vertical-align: super; opacity: 0.7; font-family: var(--sans); }
.apdp .brand-mark .tag {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--gold-soft);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.2);
  font-weight: 500;
}
.apdp .pdp-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 4px; flex: none; }
.apdp .pdp-tabs button {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255,255,255,0.7);
  transition: var(--t-fast);
}
.apdp .pdp-tabs button.is-active {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.apdp .pdp-tabs button:not(.is-active):hover { color: white; }
.apdp /* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
  background: var(--navy);
  color: white;
  font-size: 13px;
  text-align: center;
  padding: 10px 16px;
  letter-spacing: 0.2px;
  position: relative;
}
.apdp .announce .countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--gold-soft);
}
.apdp .announce__dismiss {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  border-radius: 4px;
}
.apdp .announce__dismiss:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.apdp /* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}
.apdp .site-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 24px;
  gap: 24px;
}
.apdp .site-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--ink); }
.apdp .site-nav a { padding: 4px 0; position: relative; }
.apdp .site-nav a:hover { color: var(--gold-text); }
.apdp .site-logo {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--navy-deep);
  text-align: center;
}
.apdp .site-logo .reg { font-size: 11px; vertical-align: super; opacity: 0.5; font-family: var(--sans); }
.apdp .site-utils {
  display: flex; gap: 18px; justify-content: flex-end;
  align-items: center;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.apdp .site-utils a, .apdp .site-utils button.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  background: none;
  border-radius: 4px;
  transition: var(--t-fast);
}
.apdp .site-utils a:hover, .apdp .site-utils button.cart-btn:hover { color: var(--gold-text); background: transparent; }
.apdp .site-utils__locale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.2px;
}
.apdp .site-utils__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--mute);
  transition: var(--t-fast);
}
.apdp .site-utils__social:hover { color: var(--navy-deep); background: var(--cream-2); }
.apdp .site-header__inner img { display: block; }
.apdp /* ============================================================
   PRESS RIBBON (WB only)
   ============================================================ */
.press-ribbon {
  background: var(--cream-2);
  border-bottom: 1px solid var(--rule);
  padding: 14px 24px;
  overflow: hidden;
}
.apdp .press-ribbon__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.apdp .press-ribbon__inner::-webkit-scrollbar { display: none; }
.apdp .press-ribbon__inner > * { flex-shrink: 0; }
.apdp .press-ribbon__featured {
  color: var(--gold-text);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.3px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
}
.apdp /* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.apdp .container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px;
}
.apdp .section { padding: 72px 0; }
.apdp .section-sm { padding: 48px 0; }
.apdp .section.cream-2 { background: var(--cream-2); }
.apdp .section.paper { background: var(--paper); }
/* Content-block bordering — hairline cards around the main content sections so
   blocks read as distinct and improve readability (BMDC 2026-06-05). Sections that
   already use internal bordered cards (research, from-the-pros, reviews) are left
   as-is to avoid double borders; the dark layer-explorer and the buy-box hero are
   excluded by design. */
.apdp [data-verify-section="press"] > .container,
.apdp [data-verify-section="ugc"] > .container,
.apdp [data-verify-section="promise"] > .container,
.apdp [data-verify-section="how-to-use"] > .container,
.apdp [data-verify-section="more-from-aricove"] > .container {
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
  padding: 44px 40px;
}
@media (max-width: 700px) {
  .apdp [data-verify-section="press"] > .container,
  .apdp [data-verify-section="ugc"] > .container,
  .apdp [data-verify-section="promise"] > .container,
  .apdp [data-verify-section="how-to-use"] > .container,
  .apdp [data-verify-section="more-from-aricove"] > .container {
    padding: 28px 20px; border-radius: 14px;
  }
}
.apdp .section.navy {
  background: var(--navy-deep);
  color: white;
}
.apdp .section.navy .h2, .apdp .section.navy h2 { color: white; }
.apdp .section.navy .lead { color: rgba(255,255,255,0.78); }
.apdp /* ============================================================
   TYPE
   ============================================================ */
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-weight: 600;
  color: var(--gold-text);
}
.apdp .h1, .apdp h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--navy-deep);
  text-wrap: balance;
}
.apdp .h2, .apdp h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--navy-deep);
  text-wrap: balance;
}
.apdp .h3, .apdp h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
  color: var(--navy-deep);
  text-wrap: balance;
}
.apdp .h4 {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-deep);
  margin: 0;
}
.apdp .lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--mute);
  font-weight: 400;
  text-wrap: pretty;
}
.apdp /* V6 — retire the Playfair italic "Disney" treatment: clean letterspaced humanist line */
.origin-line {
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px; /* slight bump (Wilson 2026-06-04, item 12) — the origin line, not the eyebrow */
  color: var(--gold-text);
  line-height: 1.4;
  margin: 0;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-wrap: balance;
}
.apdp .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-weight: 600;
  color: var(--gold-text);
  margin-bottom: 12px;
}
.apdp .section-eyebrow::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--gold);
}
.apdp /* ============================================================
   STARS
   ============================================================ */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.5px;
}
.apdp .stars--lg { font-size: 18px; gap: 2px; }
.apdp .stars__num {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-left: 8px;
  letter-spacing: 0;
}
/* ============================================================
   BUTTONS
   ============================================================ */
/* FB-C 2026-08-17: `.apdp` stond vóór dit commentaarblok in plaats van tegen
   `.btn` aan. Dat WERKTE — de browser leest het commentaar als witruimte, dus de
   selector parseerde als `.apdp .btn` (0,2,0) en versloeg `Custom.css:56 a.btn`
   (0,1,1) — maar puur bij toeval. Wie dit commentaar ooit herformatteert of
   verplaatst, laat de selector stil terugvallen op `.btn` (0,1,0); dan wint
   `a.btn{font-family:'Helvetica'!important}` weer en staat D1 in één klap op
   élke closing-CTA, 404-, cart-, giftcard-, blog- en account-knop sitewide.
   Nu expliciet geschreven: zelfde specificiteit, zelfde rendering, geen val. */
.apdp .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 8px;
  font-family: var(--sans) !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.1px;
  transition: var(--t-fast);
  text-align: center;
  white-space: nowrap;
}
.apdp .btn--gold {
  background: var(--gold);
  color: white;
  height: 56px;
  font-size: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.15);
}
.apdp .btn--gold:hover { background: #A78140; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(184, 146, 77, 0.25); }
.apdp .btn--gold:active { transform: translateY(0); }
.apdp .btn--navy {
  background: var(--navy-deep);
  color: white;
  height: 56px;
}
.apdp .btn--navy:hover { background: var(--navy-ink); }
.apdp .btn--outline {
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy-deep);
  height: 44px;
  padding: 10px 18px;
}
.apdp .btn--outline:hover { background: var(--navy); color: white; }
.apdp .btn--full { width: 100%; }
.apdp .btn--lg { height: 56px; font-size: 16px; padding: 0 28px; }
.apdp .btn--sm { height: 36px; font-size: 13px; padding: 0 14px; }
.apdp .btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (forced-colors: active) {
.apdp .btn--gold, .apdp .btn--navy { border: 2px solid CanvasText; }
}
.apdp /* ============================================================
   HERO LAYOUT
   ============================================================ */
.hero {
  padding: 32px 0 56px;
}
.apdp .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 1024px) {
.apdp .hero__grid { grid-template-columns: 1fr; gap: 32px; }
/* The base .hero { padding: .. 0 } zeros the horizontal padding that .container provides,
   so on full-width mobile the hero content runs to the browser edge. Restore a gutter
   (matches the container gutter of the sections below). BMDC 2026-06-22. */
.apdp .hero { padding-left: 24px; padding-right: 24px; }
}
.apdp /* Gallery */
.gallery {
  position: sticky;
  top: 96px;
  /* Vertical thumbnail rail LEFT of the main image (BMDC 2026-06-12) — applies to the
     WB and BP heroes alike (shared classes). DOM order stays main-then-thumbs; the
     grid placement swaps the visual order.
     container-type:inline-size exposes the gallery width as 100cqi so the thumbs rail
     can cap itself to the main-image height: main = (100cqi - 72px - 12px) wide and
     square, so max-height on the rail = calc(100cqi - 84px). BMDC 2026-08-16. */
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
  container-type: inline-size;
}
.apdp .gallery__main { grid-column: 2; grid-row: 1; }
.apdp .gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
  border-radius: 14px;
  overflow: hidden;
}
.apdp .gallery__main img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.apdp .gallery__badge {
  position: absolute;
  top: 18px; left: 18px;
  padding: 8px 12px;
  background: rgba(20, 40, 68, 0.92);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.apdp .gallery__thumbs {
  display: grid;
  grid-template-columns: 1fr; /* vertical rail (was repeat(6,1fr) row under the image) */
  grid-column: 1; grid-row: 1;
  align-content: start;
  gap: 8px;
  margin-top: 0;
  /* Cap the rail to the main-image height: main occupies (100cqi - 72px thumb-col -
     12px gap) and is square, so its height = calc(100cqi - 84px). overflow-y:auto
     shows a scrollbar only when there are more thumbs than fit. BMDC 2026-08-16. */
  max-height: calc(100cqi - 84px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.apdp .gallery__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: var(--t-fast);
  border: 2px solid transparent;
}
.apdp .gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.apdp .gallery__thumb.is-active { border-color: var(--navy); }
.apdp .gallery__thumb:hover { transform: translateY(-1px); }
.apdp .gallery__thumb--video::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 40, 68, 0.5);
  color: white;
  font-size: 16px;
}
/* BP mobile gallery: WB-style swipe slider with dots (no thumbnails). The desktop side-rail
   gallery (.bp-gallery) stays >=1025px. Placed after the base .gallery rules so the mobile
   toggle wins on source order. BMDC 2026-06-22. */
.apdp .bp-mslider { display: none; position: relative; }
.apdp .bp-mslider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.apdp .bp-mslider__track::-webkit-scrollbar { display: none; }
.apdp .bp-mslider__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; background: var(--cream-2); border-radius: 14px; overflow: hidden; }
.apdp .bp-mslider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apdp .bp-mslider__count { position: absolute; top: 14px; right: 14px; background: rgba(18,29,39,.72); color: #fff; font-size: 12px; padding: 3px 11px; border-radius: 999px; }
.apdp .bp-mslider__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.apdp .bp-mslider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--rule); cursor: pointer; transition: var(--t-fast); }
.apdp .bp-mslider__dot.is-active { background: var(--navy); width: 22px; border-radius: 999px; }
@media (max-width: 1024px) {
  /* Stacked layout: never keep the gallery sticky (it pins + overlaps the copy below).
     Covers cover/kids/bed which keep the side-rail gallery on mobile. */
  .apdp .gallery { position: static; top: auto; }
  .apdp .gallery.bp-gallery { display: none; }
  .apdp .bp-mslider { display: block; }
}
.apdp /* Hero info column */
.hero__info { display: flex; flex-direction: column; gap: 20px; }
.apdp .hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--mute);
  flex-wrap: wrap;
}
.apdp .hero__eyebrow-row a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.apdp .hero__eyebrow-row .divider { color: var(--rule); }
/* Eyebrow as a pill next to the stars (BMDC 2026-06-12) — same treatment as the BP
   hero's .bp-eyebrow-pill, shared here so the WB hero gets it from the stylesheet. */
.apdp .hero__eyebrow-row .eyebrow-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600;
  color: var(--gold-text); background-color: var(--gold-tint);
  border: 1px solid var(--gold-soft); border-radius: var(--r-pill);
  padding: 4px 12px 4px 13px;
}
/* Breadcrumb above the hero grid (ported from BP hero; aricove-pages.css isn't loaded
   on the PDP, so the rules live here). */
.apdp--hero .breadcrumb { font-size: 13px; color: var(--mute); display: flex; gap: 8px; align-items: center; margin: 0 0 18px; }
.apdp--hero .breadcrumb a { color: var(--mute); text-decoration: none; }
.apdp--hero .breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.apdp .hero__subhead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mute);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.apdp /* Price stack */
.price-stack {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.apdp .price-now {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.5px;
  line-height: 1;
}
.apdp .price-was {
  font-size: 16px;
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.apdp .price-badge {
  background: var(--gold-tint);
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.apdp .price-sub {
  font-size: 12px;
  color: var(--mute);
  margin-top: 6px;
}
.apdp /* Gift gate */
.gift-gate {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--gold-tint);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.apdp .gift-gate__icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.apdp .gift-gate strong { font-weight: 700; color: var(--gold-text); }
.apdp /* Benefits list */
.benefits {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.apdp .benefit { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.apdp .benefit__num {
  width: 26px; height: 26px;
  background: var(--navy-deep);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--serif);
}
.apdp .benefit__body { font-size: 14px; line-height: 1.55; color: var(--ink); }
.apdp .benefit__body strong { font-weight: 600; color: var(--navy-deep); display: block; margin-bottom: 2px; }
.apdp /* CTA proof card (pinned testimonial) */
.cta-proof {
  padding: 16px 18px;
  background: var(--paper);
  border: 1.5px solid var(--gold-soft);
  border-radius: 8px;
  position: relative;
}
.apdp .cta-proof::before {
  content: '“';
  position: absolute;
  top: -6px; left: 12px;
  font-family: var(--serif);
  font-size: 36px;
  color: var(--gold);
  line-height: 1;
  background: var(--paper);
  padding: 0 6px;
}
.apdp .cta-proof__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-deep);
  margin: 0 0 8px;
  text-wrap: pretty;
}
.apdp .cta-proof__attr {
  font-size: 12px;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 6px;
}
.apdp .cta-proof__attr strong { color: var(--ink); font-weight: 600; }
.apdp /* Stock line */
.stock-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}
.apdp .stock-dot {
  display: block;
  width: 8px; height: 8px;
  background: var(--success-dot);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.apdp .stock-dot::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--success-dot);
  border-radius: 50%;
  opacity: 0;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.apdp .stock-dot::before { animation: none; }
.apdp *, .apdp *::before, .apdp *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
.apdp /* Trust row */
.trust-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.apdp .trust-chip {
  padding: 6px 12px;
  background: var(--cream-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.apdp .trust-chip svg { color: var(--gold-text); }
.apdp .return-disclosure {
  font-size: 12px;
  color: var(--mute);
  line-height: 1.5;
  margin-top: -6px;
  text-wrap: pretty;
}
.apdp /* ============================================================
   PLACEHOLDER IMAGE
   ============================================================ */
.placeholder {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg,
      var(--cream-2) 0,
      var(--cream-2) 14px,
      var(--cream-3) 14px,
      var(--cream-3) 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.5px;
  padding: 16px;
  text-align: center;
}
.apdp .placeholder--navy {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 14px,
      rgba(255,255,255,0.07) 14px,
      rgba(255,255,255,0.07) 28px);
  color: rgba(255,255,255,0.7);
}
.apdp /* ============================================================
   SOCIAL PROOF SEAM
   ============================================================ */
.social-seam {
  padding: 36px 0;
  background: var(--cream-2);
  border-block: 1px solid var(--rule);
}
.apdp .social-seam__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px) {
.apdp .social-seam__grid { grid-template-columns: 1fr; gap: 18px; }
}
.apdp .social-seam__rating {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apdp .social-seam__rating .big {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy-deep);
}
.apdp .social-seam__rating .label { font-size: 12px; color: var(--mute); }
.apdp .social-seam__quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
.apdp .social-seam__quotes { grid-template-columns: 1fr; }
}
.apdp .quote-tile {
  padding: 14px 16px;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.apdp .quote-tile__source {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold-text);
  font-weight: 600;
  margin-bottom: 6px;
  display: flex; justify-content: space-between;
}
.apdp .quote-tile p { margin: 0; font-style: italic; }
.apdp /* ============================================================
   HOW-IT-WORKS
   ============================================================ */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
@media (max-width: 900px) {
.apdp .how-grid { grid-template-columns: 1fr; }
}
.apdp .how-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.apdp .how-card__img {
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
}
.apdp .how-card__body { padding: 22px; }
.apdp .how-card__num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--gold-text);
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.apdp .how-card h3 { margin-bottom: 10px; }
.apdp .how-card p { font-size: 14px; line-height: 1.55; color: var(--mute); margin: 0; }
.apdp .how-card__spec {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold-text);
  letter-spacing: 0.5px;
}
.apdp .demo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.apdp .demo-link::before { content: '▶'; color: var(--gold); font-size: 10px; }
.apdp .demo-link:hover { color: var(--gold-text); }
.apdp /* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare-wrap { overflow-x: auto; margin-top: 32px; }
.apdp .compare-hint {
  display: none;
  font-size: 11px;
  color: var(--mute);
  text-align: center;
  margin-top: 8px;
  font-family: var(--mono);
}
@media (max-width: 900px) {
.apdp .compare-hint { display: block; }
}
.apdp .compare {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.apdp .compare th, .apdp .compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.apdp .compare th {
  font-weight: 600;
  background: var(--cream-2);
  text-align: center;
  font-size: 13px;
}
.apdp .compare th:first-child { text-align: left; }
.apdp .compare th.aricove-col {
  background: var(--gold-tint);
  color: var(--gold-text);
  position: relative;
}
.apdp .compare td.aricove-col {
  background: rgba(229, 211, 168, 0.18);
  font-weight: 500;
}
.apdp .compare td:first-child { color: var(--mute); font-size: 13px; }
.apdp .compare td.win { color: var(--success); font-weight: 600; }
.apdp .compare td.lose { color: var(--warn); }
.apdp .compare__note {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--cream-2);
  border-left: 3px solid var(--navy);
  font-size: 13px;
  color: var(--mute);
  font-style: italic;
}
.apdp /* ============================================================
   BUNDLE
   ============================================================ */
.bundle-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 32px;
}
@media (max-width: 800px) {
.apdp .bundle-card { grid-template-columns: 1fr; }
}
.apdp .bundle-card__img {
  background: var(--cream-2);
  min-height: 360px;
}
.apdp .bundle-card__body { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.apdp .bundle-math { display: flex; flex-direction: column; gap: 10px; }
.apdp .bundle-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  font-size: 14px;
  align-items: baseline;
}
.apdp .bundle-row__num { font-family: var(--mono); font-size: 11px; color: var(--mute); padding-top: 2px; }
.apdp .bundle-row__label { color: var(--ink); }
.apdp .bundle-row__price { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.apdp .bundle-row.total { padding-top: 12px; border-top: 1px solid var(--rule); margin-top: 4px; }
.apdp .bundle-row.total .bundle-row__label { font-weight: 600; }
.apdp .bundle-row.total .bundle-row__price { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy-deep); }
.apdp .bundle-row.savings .bundle-row__price { color: var(--success); font-weight: 600; }
.apdp /* ============================================================
   SPECS TABLE
   ============================================================ */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin-top: 32px;
}
@media (max-width: 720px) {
.apdp .specs-grid { grid-template-columns: 1fr; }
}
.apdp .spec-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.apdp .spec-row__label { color: var(--mute); }
.apdp .spec-row__value { color: var(--ink); font-weight: 500; }
.apdp .cert-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed var(--rule);
}
.apdp .cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--cream-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: 0.3px;
}
.apdp .cert-badge .mono { font-family: var(--mono); font-size: 10px; color: var(--mute); margin-left: 4px; }
.apdp /* ============================================================
   FOUNDER NOTE
   ============================================================ */
.founder {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.apdp .founder__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-text) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
}
.apdp .founder__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--navy-deep);
  margin: 0;
  text-wrap: balance;
}
.apdp .founder__sig {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold-text);
}
.apdp .founder__sig small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--mute);
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}
.apdp /* ============================================================
   FAQ
   ============================================================ */
.faq {
  max-width: 820px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* BMDC 07-28 (chat, annotated screenshot): getting-started step images — when a step has an
   image it renders at the top of the card (icon hidden), 4:3, rounded. */
.apdp .howto-step__img { display: block; border-radius: 12px; overflow: hidden; margin: 0 0 14px; background: var(--cream-2, #f3efe9); }
.apdp .howto-step__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 900px) {
  /* A13 2026-08-18: align step images to full card width (contained, not full-bleed).
     .howto-step has padding-right: 20px but padding-left: 0 (desktop divider layout).
     At 430px: step content box = 368px; adding back only the right 20px gives
     calc(100% + 20px) = 388px = the card outer width → equal 21px margin on both sides
     of the image within the 430px viewport (container border 1px + padding 20px each side).
     At 375px: step content = 313px; image = 333px → same 21px margin each side.
     margin-left: 0 keeps the image flush with the step left edge (no overhang into
     the container left padding). border-radius restored: contained images keep 12px rounds. */
  .apdp .howto-step__img { width: calc(100% + 20px); margin-left: 0; margin-right: -20px; transform: none; border-radius: 12px; }
}
/* BMDC 07-28 (chat): optional 2-column FAQ — image left, heading + accordion right
   (Wilson 24-07 doc: "add an image on the left in the FAQ section"; asset landed 28-07).
   Only rendered when the section's image is set; without it the old centered layout is
   byte-identical. Mobile (≤900px) stacks the image above the heading. */
.apdp .faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.apdp .faq-figure { margin: 0; border-radius: 16px; overflow: hidden; background: var(--cream-2, #f3efe9); }
.apdp .faq-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 901px) {
  /* BMDC 07-28 (chat, r2): image column wider, FAQ column thinner — near 50/50 split
     (was 0.44fr ≈ 31% image). */
  .apdp .faq-layout { grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr); gap: 56px; align-items: stretch; }
  .apdp .faq-main { min-width: 0; }
  .apdp .faq-layout .faq { margin-top: 24px; }
}
@media (max-width: 900px) {
  /* BMDC 07-28 (chat): full-bleed left-to-right of the screen on mobile, mirroring the
     press-strip/pillars 100vw breakout pattern. */
  .apdp .faq-figure { margin: 0 0 22px; border-radius: 0; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
  .apdp .faq-figure img { height: auto; aspect-ratio: 4 / 3; }
}
.apdp .faq-item {
  border-bottom: 1px solid var(--rule);
}
/* Group heading within the FAQ (Wilson 2026-06-04 — 5 groups). */
.apdp .faq-group {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--gold-text);
  margin: 40px 0 8px; padding-bottom: 2px;
}
.apdp .faq-group:first-child { margin-top: 0; }
.apdp .faq-item__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 4px;
  text-align: left;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-deep);
  gap: 24px;
}
.apdp .faq-item__btn .plus {
  width: 24px; height: 24px;
  flex-shrink: 0;
  position: relative;
  transition: var(--t);
}
.apdp .faq-item__btn .plus::before, .apdp .faq-item__btn .plus::after {
  content: '';
  position: absolute;
  background: var(--navy-deep);
  border-radius: 1px;
}
.apdp .faq-item__btn .plus::before {
  top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%);
}
.apdp .faq-item__btn .plus::after {
  left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%);
  transition: var(--t);
}
.apdp .faq-item.is-open .faq-item__btn .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.apdp .faq-item__body {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mute);
  max-height: 0;
  transition: max-height 300ms var(--ease), padding 300ms var(--ease);
}
.apdp .faq-item.is-open .faq-item__body { max-height: 800px; padding-bottom: 22px; }
.apdp .faq-item__body p { margin: 0 0 10px; text-wrap: pretty; }
.apdp .faq-item__body p:last-child { margin-bottom: 0; }
.apdp /* ============================================================
   REVIEWS
   ============================================================ */
.reviews-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 24px;
  padding: 28px;
  background: var(--cream-2);
  border-radius: 14px;
}
@media (max-width: 720px) {
.apdp .reviews-summary { grid-template-columns: 1fr; gap: 24px; }
}
/* WB PDP boxed review-summary (Wilson/BMDC 2026-06-27): the WB reviews section bg is cream-2 —
   identical to the summary-box bg — so the box blended into the section and didn't read as a card.
   Lift it to a white card with a hairline border so the WB summary reads as a distinct box exactly
   like the Body Pillow PDP. Scoped to `.section.cream-2` → ONLY the WB reviews section; BP (a
   `paper` section) is untouched. */
.apdp .section.cream-2 .reviews-summary { background: var(--paper); border: 1px solid var(--rule); }
.apdp .reviews-summary__big {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy-deep);
}
.apdp .reviews-summary__distro { display: flex; flex-direction: column; gap: 4px; }
.apdp .distro-row {
  display: grid;
  grid-template-columns: 32px 1fr 36px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--mute);
}
.apdp .distro-bar { height: 6px; background: var(--cream-3); border-radius: 3px; overflow: hidden; }
.apdp .distro-bar__fill { height: 100%; background: var(--gold); }
.apdp .review-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 24px 0;
}
.apdp .review-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: var(--t-fast);
}
.apdp .review-chip:hover { border-color: var(--gold); }
.apdp .review-chip.is-active { background: var(--navy-deep); color: white; border-color: var(--navy-deep); }
.apdp .review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 720px) {
.apdp .review-grid { grid-template-columns: 1fr; }
}
.apdp .review-card {
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.apdp .review-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.apdp .review-card__name { font-weight: 600; font-size: 14px; }
.apdp .review-card__verified {
  font-size: 11.5px; color: var(--success); font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(44, 118, 74, 0.12);
  letter-spacing: 0.2px; white-space: nowrap;
}
.apdp .review-card__title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 8px 0;
}
.apdp .review-card__body { font-size: 14px; line-height: 1.6; color: var(--ink); }
.apdp .review-card__meta {
  display: flex; gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-size: 11px;
  color: var(--mute);
  flex-wrap: wrap;
}
.apdp .review-card__tag {
  padding: 2px 8px;
  background: var(--cream-2);
  border-radius: 999px;
  font-size: 11px;
  color: var(--gold-text);
  font-weight: 500;
}
.apdp /* ============================================================
   CLOSING CTA
   ============================================================ */
.closing {
  text-align: center;
  padding: 88px 0;
}
.apdp .closing h2 { color: white; margin-bottom: 18px; }
.apdp .closing .lead { max-width: 580px; margin: 0 auto 36px; color: rgba(255,255,255,0.78); }
.apdp .closing__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 56px;
  width: fit-content;
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 720px) {
.apdp .closing__stats { gap: 24px 40px; }
}
.apdp .stat__num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--gold-soft);
  line-height: 1;
}
.apdp .stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
}
.apdp /* ============================================================
   STICKY MOBILE BAR
   ============================================================ */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 10px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 80;
  box-shadow: 0 -4px 24px rgba(20, 40, 68, 0.08);
  transform: translateY(100%);
  transition: transform 240ms var(--ease);
}
.apdp .sticky-bar.is-visible { transform: translateY(0); }
@media (max-width: 900px) {
.apdp .sticky-bar { display: flex; flex-wrap: wrap; }
}
.apdp /* --- V6 Variant selects (size + weight) in sticky bars --- */
.vsel { display: flex; gap: 8px; flex-shrink: 0; }
.apdp .vsel__field { display: flex; flex-direction: column; gap: 2px; }
.apdp .vsel__cap { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--mute); font-weight: 700; }
/* Compact "guide" link inside the sticky-bar size/weight captions — opens the
   shared size/weight modal via event delegation (Wilson 2026-06-04, item 4). */
.apdp .vsel__guide {
  background: none; border: 0; padding: 0; margin-left: 4px;
  font: inherit; font-size: 9px; text-transform: none; letter-spacing: .2px;
  color: var(--gold-text); text-decoration: underline; cursor: pointer;
}
.apdp .vsel__guide:hover { color: var(--navy); }
.apdp .vsel__sel {
  appearance: none; -webkit-appearance: none;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A5A28' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px 26px 6px 10px;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600; color: var(--navy-deep);
  cursor: pointer; min-width: 76px;
}
.apdp .vsel__sel:hover { border-color: var(--gold-soft); }
.apdp .vsel__sel:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.apdp .sticky-bar .vsel { flex: 1 1 100%; order: -1; }
.apdp .sticky-bar .vsel__field { flex: 1; }
.apdp .sticky-bar .vsel__sel { width: 100%; }
.apdp .sticky-bar__info { flex: 1; min-width: 0; }
.apdp .sticky-bar__price { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--navy-deep); line-height: 1.1; }
.apdp .sticky-bar__variant { font-size: 11px; color: var(--mute); }
.apdp .sticky-bar__ctx { font-size: 11px; color: var(--gold-text); font-weight: 500; }
.apdp .sticky-bar .btn { height: 44px; padding: 0 16px; font-size: 14px; }
.apdp /* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 30, 54, 0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}
.apdp .modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.apdp .modal {
  background: var(--paper);
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  max-height: 86vh;
  /* BMDC 2026-07-01: size to content. Impulse's generic .modal{height:100%} (Custom.css) was
     leaking in and stretching the dialog to ~86vh regardless of content, leaving big empty
     space below short bodies (tf-* trust modals). .apdp .modal (0,2,0) beats .modal (0,1,0). */
  height: auto;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  transform: scale(0.96) translateY(8px);
  transition: transform 220ms var(--ease);
}
.apdp .modal-backdrop.is-open .modal { transform: scale(1) translateY(0); }
.apdp .modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--mute);
}
.apdp .modal__close:hover { background: var(--cream-2); color: var(--ink); }
.apdp .modal h2 { margin-bottom: 12px; }
.apdp .modal h3 { margin: 18px 0 8px; font-size: 17px; }
.apdp .modal p { font-size: 14px; line-height: 1.55; color: var(--mute); margin: 0 0 12px; }
.apdp .modal table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.apdp .modal table td, .apdp .modal table th { padding: 10px 8px; border-bottom: 1px solid var(--rule); text-align: left; }
.apdp .modal table th { font-weight: 600; color: var(--ink); background: var(--cream-2); }
.apdp /* ============================================================
   CART DRAWER
   ============================================================ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 30, 54, 0.5);
  backdrop-filter: blur(3px);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.apdp .drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.apdp .drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 100%;
  background: var(--cream);
  z-index: 260;
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 40px rgba(20, 40, 68, 0.18);
}
.apdp .drawer.is-open { transform: translateX(0); }
.apdp .drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.apdp .drawer__head h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: 18px;
}
.apdp .drawer__head .check {
  width: 22px; height: 22px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.apdp .drawer__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--mute);
}
.apdp .drawer__close:hover { background: var(--cream-2); color: var(--ink); }
.apdp .drawer__body {
  flex: 1;
  /* min-height:0 lets the scroll area shrink inside the flex column so the footer
     (and its checkout button) stays fully visible at any drawer height — C5 fix
     (Wilson 2026-06-18: checkout button was clipped on short viewports). */
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.apdp .drawer-item {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 13px;
  align-items: center;
  padding: 12px;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.apdp .drawer-item__img {
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
  border-radius: 8px;
  overflow: hidden;
}
.apdp .drawer-item__title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.apdp .drawer-item__variant { font-size: 12px; color: var(--mute); margin: 2px 0 6px; }
.apdp .drawer-item__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.apdp .drawer-item__price .was { color: var(--mute); text-decoration: line-through; font-weight: 400; margin-right: 6px; font-size: 12px; }
/* The drawer toggles several elements with the `hidden` attribute, but the UA's `[hidden]
   {display:none}` is specificity 0,0,1 — every `.apdp .drawer__x {display:flex}` below beats
   it, so `el.hidden = true` did nothing. That is why the free-shipping callout still claimed
   "you've unlocked free shipping" on an empty cart, and why the empty "You save" row showed
   under a $0.00 subtotal. Measured on WIP: hidden=true, height 46px and 20px. 0,3,0 wins. */
.apdp .drawer [hidden] { display: none; }
/* Free-shipping callout — green success confirmation (Wilson 06-27 cart-drawer redesign). */
.apdp .drawer__callout {
  padding: 11px 14px;
  background: #EAF1EB;
  border: 1px solid #D4E4D7;
  border-radius: 10px;
  font-size: 12.5px;
  color: #1F5235;
  font-weight: 600;
  display: flex; gap: 10px; align-items: center;
}
.apdp .drawer__callout > span[aria-hidden] {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.apdp .drawer__callout b { color: var(--success); text-transform: uppercase; letter-spacing: .3px; font-weight: 700; }
.apdp .drawer__trial {
  font-size: 12px;
  color: var(--mute);
  line-height: 1.55;
  padding: 0 4px;
  text-wrap: pretty;
}
.apdp .drawer__upsell {
  padding: 14px;
  background: var(--paper);
  border: 1px dashed var(--gold);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
}
.apdp .drawer__upsell .img { aspect-ratio: 1/1; background: var(--cream-2); border-radius: 4px; }
.apdp .drawer__upsell .label { font-size: 13px; font-weight: 600; line-height: 1.3; }
.apdp .drawer__upsell .sub { font-size: 11px; color: var(--mute); }
.apdp .drawer__upsell .add-btn { padding: 6px 12px; border: 1.5px solid var(--navy); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--navy-deep); transition: var(--t-fast); }
.apdp .drawer__upsell .add-btn:hover { background: var(--navy); color: white; }
.apdp .drawer__upsell .add-btn.is-added { background: var(--success); color: white; border-color: var(--success); }
.apdp .drawer__gift {
  font-size: 13px;
  color: var(--navy-deep);
  padding: 10px 14px;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--rule);
  font-weight: 500;
  display: flex; gap: 8px; align-items: center;
}
.apdp .drawer__foot {
  padding: 18px 24px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0; /* never let the footer (checkout button) be squeezed — C5 fix */
}
.apdp .drawer__continue {
  padding: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--mute);
  font-weight: 500;
}
.apdp .drawer__continue:hover { color: var(--navy); }
/* ---- Cart drawer optimized layout (BMDC 2026-06-05) ---- */
.apdp .drawer-item__main { min-width: 0; }
.apdp .drawer-item__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.apdp .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; flex: none; }
.apdp .qty-stepper__btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--navy-deep); background: var(--paper); }
.apdp .qty-stepper__btn:hover { background: var(--cream-2); }
.apdp .qty-stepper__val { min-width: 30px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.apdp .drawer-upsell { border-top: 1px solid var(--rule); padding-top: 14px; }
.apdp .drawer-upsell__head { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-text); margin-bottom: 10px; }
.apdp .drawer-upsell__list { display: flex; flex-direction: column; gap: 10px; }
.apdp .drawer-upsell__card[hidden] { display: none; }
.apdp .drawer-upsell__card { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 10px; }
.apdp .drawer-upsell__img { aspect-ratio: 1/1; background: var(--cream-2); border-radius: 6px; overflow: hidden; display: block; }
.apdp .drawer-upsell__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apdp .drawer-upsell__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apdp .drawer-upsell__name { font-size: 13px; font-weight: 600; color: var(--navy-deep); text-decoration: none; line-height: 1.3; }
.apdp .drawer-upsell__price { font-size: 12px; color: var(--mute); }
.apdp .drawer-upsell__add { padding: 7px 15px; border: 1.5px solid var(--navy); border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--navy-deep); transition: var(--t-fast); white-space: nowrap; }
.apdp .drawer-upsell__add:hover:not([disabled]) { background: var(--navy); color: white; }
.apdp .drawer-upsell__add[disabled] { opacity: 0.5; cursor: default; }
.apdp .drawer-discount { display: flex; gap: 8px; }
.apdp .drawer-discount__input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; font-size: 13px; background: var(--paper); color: var(--ink); }
.apdp .drawer-discount__input:focus { outline: none; border-color: var(--gold); }
.apdp .drawer-discount__apply { padding: 10px 16px; border: 1px solid var(--navy); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--navy-deep); white-space: nowrap; }
.apdp .drawer-discount__apply:hover { background: var(--navy); color: white; }
.apdp .drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
.apdp .drawer__subtotal .lbl { font-family: var(--serif); font-weight: 400; font-size: 17px; }
.apdp .drawer__shipnote { font-size: 11.5px; color: var(--mute); margin: -2px 0 2px; }
.apdp .drawer__pay { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.apdp .drawer__pay-cards { display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0.82; flex-wrap: wrap; }
.apdp .drawer__pay-secure { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mute); font-weight: 600; }
.apdp .drawer__pay-secure svg { color: var(--success); }
/* ---- Cart drawer: all-items list + per-line controls (Wilson 2026-06-18) ---- */
.apdp .drawer-items { display: flex; flex-direction: column; gap: 10px; }
.apdp .drawer-items__empty { color: var(--mute); font-size: 14px; text-align: center; padding: 12px 0; }
/* Richer empty state (Wilson 06-27 redesign): bag glyph + heading + shop button; "Most loved" upsell renders below. */
.apdp .drawer-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 12px 18px; }
.apdp .drawer-empty__ico { color: var(--gold); opacity: 0.9; }
.apdp .drawer-empty__title { font-family: var(--serif); font-size: 19px; color: var(--navy-deep); }
/* The empty-state CTA is an <a> inside .drawer, so base Impulse's `.drawer a:not(.btn)`
   (0,2,1 — :not() counts its argument) out-specifies a plain `.apdp .drawer-empty__btn`
   (0,2,0) and repaints the label in --colorDrawerText. Measured on WIP: black on gold,
   which is the contrast failure BMDC reported. Qualifying with .drawer makes it (0,3,0). */
.apdp .drawer .drawer-empty__btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; padding: 11px 22px; border-radius: 8px; background: var(--gold); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: var(--t-fast); }
.apdp .drawer .drawer-empty__btn:hover { background: #A78140; color: #fff; }
.apdp .drawer-item--added { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.apdp .drawer-item__img a { display: block; width: 100%; height: 100%; }
.apdp .drawer-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apdp .drawer-item__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.apdp .drawer-item__title { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; }
.apdp .drawer-item__title:hover { color: var(--navy); }
.apdp .drawer-item__remove { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--mute); background: transparent; }
.apdp .drawer-item__remove:hover { color: #b3261e; background: var(--cream-2); }
.apdp .drawer-item__variant { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); margin: 3px 0 6px; }
.apdp .drawer-item__swatch { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(20,40,68,0.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.apdp .drawer-item__swatch--empty { background: var(--cream-2); }
/* ---- C3 reassurance box ---- */
.apdp .drawer__reassure { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--navy-deep); }
.apdp .drawer__reassure span { display: flex; align-items: flex-start; gap: 8px; }
.apdp .drawer__reassure-ico { flex: none; }
/* ---- C4 savings row ---- */
.apdp .drawer__savings { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--success); }
.apdp .drawer__savings-was { color: var(--mute); text-decoration: line-through; font-weight: 400; font-size: 12px; margin-right: 6px; }
.apdp .drawer-upsell__rating { font-size: 11px; color: var(--mute); display: inline-flex; align-items: center; gap: 4px; }
.apdp .drawer-upsell__rating .stars { font-size: 11px; color: var(--gold); letter-spacing: 0.5px; }
/* ---- Trust signals row (BMDC 2026-08-13) ---- */
/* Three compact trust items evenly spread above the You-save/Subtotal block.
   Items use Aricove gold/navy rather than green. Width-capped so they stay on
   one row at the typical 380-420px drawer width; flex-wrap lets them fall to
   two lines gracefully if the viewport is narrower. */
.apdp .drawer__trust-signals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  /* BMDC 2026-08-14: rule moved from above the row to below it, so it separates the
     trust signals from the You-save/Subtotal block instead of doubling up with the
     full-width .drawer__foot border-top a few pixels higher. The -24px side margins
     bleed through .drawer__foot's 24px padding so the rule runs the full drawer
     width like that border-top; the padding puts the items back where they were.
     margin-top cancels .drawer__foot's 18px padding-top so the row sits flush against
     that border, and the symmetric 12px padding then centres it between the two rules. */
  margin: -18px -24px 0;
  padding: 12px 24px;
  border-bottom: 1px solid var(--rule);
}
.apdp .drawer__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
}
.apdp .drawer__trust-ico {
  display: inline-flex;
  flex: none;
  color: var(--gold);
}
.apdp .drawer__trust-ico svg { display: block; }
/* Round check for the policy items — BMDC's reference repeats one check rather than using a
   different pictogram per item. Same gold disc + white tick as .size-tile.is-active::after,
   so the drawer speaks the same visual language as the picker. */
.apdp .drawer__trust-ico--check {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
}
.apdp .drawer__trust-ico--check::after { content: '✓'; }
.apdp .drawer__trust-lbl {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.2;
  white-space: nowrap;
}

/* ===== Cart drawer — Wilson 2026-06-25 (Track 7) ========================= */
/* Off-white light-grey drawer surface (Wilson 06-27); white line-item cards pop against it. */
.apdp .drawer { background: #F4F4F4; height: 100dvh; }
.apdp .drawer__head,
.apdp .drawer__foot { background: #F4F4F4; }
/* "Your Cart (n)" — green check dropped in markup; count in a muted tone. */
.apdp .drawer__count { color: var(--mute); font-weight: 500; }
/* Qty stepper: force the theme sans on the value AND the −/+ (buttons don't inherit font-family). */
.apdp .qty-stepper__btn,
.apdp .qty-stepper__val { font-family: var(--sans); }
/* Tighter spacing around each line-item title/variant. */
.apdp .drawer-item { padding: 12px; gap: 13px; }
.apdp .drawer-item__titlerow { gap: 6px; }
.apdp .drawer-item__variant { margin: 2px 0 4px; }
.apdp .drawer-item__row { margin-top: 2px; }
/* Cross-sell variant selector (sits above the price). */
.apdp .drawer-upsell__variant {
  margin: 4px 0 3px; width: 100%; max-width: 100%;
  padding: 5px 8px; font-size: 12px; font-family: var(--sans);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 6px;
}
.apdp .drawer-upsell__variant:focus { outline: none; border-color: var(--gold); }
/* Secure-checkout button: white padlock + label, kept fully visible (mobile safe-area).
   Full-width that fills the footer exactly on every viewport — beats Impulse .btn
   (inline-block / width:auto / min-width:90px); border-box so padding can't overflow. (Wilson 06-27) */
.apdp .drawer__checkout { display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.5px; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
.apdp .drawer__checkout-lock { display: inline-flex; color: #fff; }
.apdp .drawer__checkout-lock svg { display: block; }
.apdp .drawer__foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
/* Reassurance lines: subtle, muted, outline icons, below the payment marks. */
.apdp .drawer__reassure {
  background: transparent; border: 0; border-radius: 0;
  padding: 8px 0 0; gap: 6px; font-size: 11.5px; color: var(--mute);
}
.apdp .drawer__reassure span { gap: 7px; align-items: center; }
.apdp .drawer__reassure-ico { display: inline-flex; color: var(--mute); flex: none; }
.apdp .drawer__reassure-ico svg { display: block; }

/* ===== Cart drawer — Wilson 2026-06-27 (OP-revisions refinements) ========= */
/* Header bar ONLY → warm cream #eee7d8 (the footer stays #F4F4F4). */
.apdp .drawer__head { background: #eee7d8; }
/* Pull the size/variant line tight under the product title. */
.apdp .drawer-item__variant { margin-top: 0; margin-bottom: 3px; }
.apdp .drawer-item__row { margin-top: 1px; }
/* Tighter totals/footer stack — Wilson marked "reduce space" above You save,
   between You save ↔ Subtotal, around the figures, and above the pay marks. */
.apdp .drawer__foot { gap: 8px; }
.apdp .drawer__savings { margin-bottom: -1px; }
.apdp .drawer__subtotal { margin-top: 0; }
/* Center the payment marks under/with the checkout button. */
.apdp .drawer__pay { justify-content: center; margin-top: 0; }
/* Reassurance: tighter gap between the two lines + less space above them. */
.apdp .drawer__reassure { padding-top: 4px; gap: 4px; }
/* "Pairs well with" — deliberately QUIET (Wilson 06-27: it was too prominent and
   risked inducing doubt about what's already in the basket). No card panel — just a
   hairline above a low-key, tight list with smaller thumbs + a muted header and Add,
   so it recedes and never competes with the in-cart line items. */
.apdp .drawer-upsell { background: transparent; border: 0; border-top: 1px solid var(--rule-soft); border-radius: 0; padding: 12px 0 0; }
.apdp .drawer-upsell__head { color: var(--mute); font-size: 10px; letter-spacing: 1px; margin-bottom: 6px; opacity: 0.85; }
.apdp .drawer-upsell__list { gap: 0; }
.apdp .drawer-upsell__card { background: transparent; border: 0; border-bottom: 1px solid var(--rule-soft); border-radius: 0; padding: 9px 0; gap: 10px; grid-template-columns: 40px 1fr auto; }
.apdp .drawer-upsell__card:last-child { border-bottom: 0; padding-bottom: 0; }
.apdp .drawer-upsell__name { font-size: 12px; }
.apdp .drawer-upsell__price { font-size: 11px; }
.apdp .drawer-upsell__rating { font-size: 10px; }
.apdp .drawer-upsell__variant { font-size: 11px; padding: 4px 7px; border-color: var(--rule-soft); color: var(--navy-deep); }
.apdp .drawer-upsell__add { padding: 5px 11px; font-size: 11px; border-width: 1px; color: var(--mute); border-color: var(--rule); }
.apdp .drawer-upsell__add:hover:not([disabled]) { background: var(--navy); color: #fff; border-color: var(--navy); }

.apdp /* ============================================================
   WB PICKER (two-stage)
   ============================================================ */
.picker {
  display: flex; flex-direction: column;
  gap: 20px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.apdp .picker__stage { display: flex; flex-direction: column; gap: 12px; }
.apdp .picker__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-deep);
}
.apdp .picker__label .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.apdp .picker__label .step-num {
  width: 22px; height: 22px;
  background: var(--navy-deep);
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  font-family: var(--serif);
}
.apdp .picker__label .guide-link {
  font-weight: 500;
  font-size: 12px;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.apdp .picker__label .guide-link:hover { color: var(--gold-text); }
.apdp .size-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.apdp .size-tile {
  position: relative;
  text-align: left;
  padding: 14px;
  background: var(--cream);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  transition: var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.apdp .size-tile:hover { border-color: var(--gold-soft); }
.apdp .size-tile.is-active {
  background: var(--gold-tint);
  border-color: var(--gold);
}
.apdp .size-tile.is-active::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 10px;
  width: 18px; height: 18px;
  background: var(--gold);
  color: white;
  border-radius: 50%;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.apdp .size-tile__name { font-weight: 600; font-size: 14px; color: var(--navy-deep); }
.apdp .size-tile__dim { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.apdp .size-tile__tag { font-size: 11px; color: var(--gold-text); margin-top: 4px; font-weight: 500; }
.apdp .weight-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.apdp .weight-pill {
  position: relative;
  padding: 10px 14px;
  background: var(--cream);
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-deep);
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.15;
  transition: var(--t-fast);
  min-width: 84px;
  gap: 3px;
}
.apdp .weight-pill .lb { font-size: 13px; white-space: nowrap; }
.apdp .weight-pill .body { font-size: 10px; color: var(--mute); font-weight: 500; white-space: nowrap; letter-spacing: 0.1px; }
.apdp .weight-pill:hover { border-color: var(--gold-soft); }
/* Selected (active) pill = gold fill, matching the size-tile selected state
   (D-0007 system consistency + Wilson 2026-06-04: "exactly one pill is gold-filled"). */
.apdp .weight-pill.is-active {
  background: var(--gold-tint);
  color: var(--navy-deep);
  border-color: var(--gold);
}
.apdp .weight-pill.is-active .body { color: var(--mute); }
/* "Most picked" pill: NO fill — a ribbon tag only, never competing with the
   selected state (Wilson 2026-06-04: stop the popular pill reading as selected). */
.apdp .weight-pill.is-popular {
  border-color: var(--gold-soft);
}
.apdp .weight-pill.is-popular.is-active {
  background: var(--gold-tint);
  border-color: var(--gold);
}
.apdp .weight-pill__pop {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap; line-height: 1.1;
}
.apdp .picker__callout {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  padding: 12px 14px;
  background: var(--cream-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}
.apdp .picker__callout strong { color: var(--gold-text); }
.apdp .picker__callout a { color: var(--navy); text-decoration: underline; font-weight: 500; }
.apdp /* ============================================================
   DTP SCIENCE
   ============================================================ */
.dtp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
@media (max-width: 900px) {
.apdp .dtp-grid { grid-template-columns: 1fr; }
}
.apdp .dtp-card {
  padding: 28px;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.apdp .dtp-card__step {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gold-text);
  margin-bottom: 14px;
}
.apdp .dtp-card h3 { font-size: 22px; margin-bottom: 12px; }
.apdp .dtp-card p { font-size: 14px; line-height: 1.6; color: var(--mute); margin: 0; }
.apdp .dtp-card__cite {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
  font-size: 11px;
  color: var(--mute);
  font-family: var(--mono);
}
.apdp /* ============================================================
   COOLING CROSS SECTION
   ============================================================ */
.cooling {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
.apdp .cooling { grid-template-columns: 1fr; }
}
.apdp .cooling__diagram {
  background: var(--paper);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--rule);
}
.apdp .cooling__list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.apdp .cooling__list-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
}
.apdp .cooling__list-item .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 5px;
}
.apdp /* ============================================================
   MANHERTZ NFL block (WB)
   ============================================================ */
.athlete {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  margin-top: 32px;
}
@media (max-width: 900px) {
.apdp .athlete { grid-template-columns: 1fr; }
}
.apdp .athlete__img {
  aspect-ratio: 4 / 5;
  background: var(--cream-2);
  border-radius: 14px;
  overflow: hidden;
}
.apdp .athlete__body { display: flex; flex-direction: column; gap: 20px; }
.apdp .athlete__credit {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--gold-text);
}
.apdp .athlete__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.45;
  color: var(--navy-deep);
  margin: 0;
  text-wrap: balance;
}
.apdp .athlete__sig {
  font-size: 13px;
  color: var(--mute);
}
.apdp .athlete__sig strong { color: var(--ink); font-weight: 600; display: block; font-size: 15px; }
.apdp /* ============================================================
   PRESS EDITORIAL STRIP (8 tiles)
   ============================================================ */
.press-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 900px) {
.apdp .press-grid { grid-template-columns: repeat(2, 1fr); }
}
.apdp .press-tile {
  padding: 24px 20px;
  background: var(--paper);
  border-radius: 10px;
  border: 1px solid var(--rule);
  text-align: center;
}
.apdp .press-tile__name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.apdp .press-tile__quote {
  font-size: 12px;
  color: var(--mute);
  line-height: 1.4;
  font-style: italic;
}
.apdp /* ============================================================
   HEAVINESS REASSURANCE (compressed FAQ — WB)
   ============================================================ */
.reassure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}
@media (max-width: 900px) {
.apdp .reassure-grid { grid-template-columns: 1fr; }
}
.apdp .reassure-card {
  padding: 24px;
  background: var(--paper);
  border-radius: 12px;
  border-top: 3px solid var(--gold);
  box-shadow: var(--sh-card);
}
.apdp .reassure-card h4 { font-family: var(--serif); font-size: 18px; margin: 0 0 10px; color: var(--navy-deep); }
.apdp .reassure-card p { font-size: 14px; line-height: 1.6; color: var(--mute); margin: 0; }
.apdp /* ============================================================
   AI summary (sr-only)
   ============================================================ */
.ai-summary { /* uses .sr-only */ }
.apdp /* ============================================================
   DTP SCIENCE — compact editorial layout (v4-lean WB)
   ============================================================ */
.science-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) {
.apdp .science-steps { grid-template-columns: 1fr; }
.apdp .science-step + .science-step { border-top: 1px solid var(--rule); border-left: 0 !important; }
}
.apdp .science-step {
  padding: 28px 24px 28px 0;
  border-top: 0;
}
.apdp .science-step + .science-step { border-left: 1px solid var(--rule); padding-left: 28px; }
.apdp .science-step__num {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 14px;
  letter-spacing: -1px;
}
.apdp .science-step__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 10px;
  line-height: 1.2;
}
.apdp .science-step__body { font-size: 14px; line-height: 1.6; color: var(--mute); margin: 0; text-wrap: pretty; }
.apdp .science-step__cite {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold-text);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.apdp /* COOLING — lighter version */
.cooling-clean { padding: 56px 0; }
.apdp .cooling-clean .cooling__diagram { background: transparent; padding: 0; border: 0; }
.apdp .cooling-clean .cooling__list { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.apdp /* ============================================================
   DESCENDED SECTION RHYTHM — WB v4-lean
   ============================================================ */
.section--quiet { padding: 56px 0; }
.apdp .section-eyebrow--center { display: flex; justify-content: center; }
.apdp .section__lead {
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mute);
  margin-top: 12px;
  text-wrap: pretty;
}
.apdp /* ============================================================
   WB v4 hero subtle adjustments — picker on its own
   ============================================================ */
.picker--quiet {
  background: var(--cream-2);
  border: 0;
  padding: 22px;
}
/* BMDC 2026-08-14: WB picker--quiet grey extended to cover + kids.
   (0,3,0) so it beats the anti-bleed reset (line 12, 0,2,0) and the inline
   .apdp .cv-picker / .kids-picker (0,2,0) regardless of sheet order.
   Padding deliberately left alone (cover keeps its tuned 16px). */
.apdp .hero__info .cv-picker,
.apdp .hero__info .kids-picker {
  background-color: var(--cream-2);
  border: 0;
}
.apdp .muted { color: var(--mute); }
.apdp .center { text-align: center; }
.apdp .flex { display: flex; }
.apdp .flex-col { display: flex; flex-direction: column; }
.apdp .gap-2 { gap: 8px; }
.apdp .gap-3 { gap: 12px; }
.apdp .gap-4 { gap: 16px; }
.apdp .mt-2 { margin-top: 8px; }
.apdp .mt-4 { margin-top: 16px; }
.apdp .mt-6 { margin-top: 24px; }
.apdp /* ============================================================
   ARICOVE-STYLE SECTIONS — align with live PDP rhythm
   ============================================================ */

.section-head {
  max-width: 720px;
  margin-bottom: 36px;
}
.apdp .section-head .section-eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
}
.apdp .section-head .h2 {
  margin: 0;
}
.apdp .section-lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 64ch;
  text-wrap: pretty;
}
.apdp /* Wholesome Benefits — 4-card grid (photo + title + body) */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
.apdp .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.apdp .benefits-grid { grid-template-columns: 1fr; }
}
.apdp .benefit-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apdp .benefit-tile__img {
  aspect-ratio: 4 / 5;
  background: var(--cream-2);
  border-radius: 10px;
  overflow: hidden;
}
.apdp .benefit-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.apdp .benefit-tile__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 4px 0 0;
  line-height: 1.2;
  text-wrap: balance;
}
.apdp .benefit-tile__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
  margin: 0;
  text-wrap: pretty;
}
.apdp /* Press Strip — "AS SEEN IN" editorial */
.press-strip { padding: 80px 0 64px; background: var(--cream); border-top: 1px solid var(--rule); }
.apdp .press-strip__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.apdp .press-strip__head .section-eyebrow { justify-content: center; }
.apdp .press-strip__intro { margin: 14px auto 0; max-width: 40em; color: var(--mute); font-size: 15px; line-height: 1.6; }
.apdp .press-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}
@media (max-width: 900px) {
.apdp .press-row { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}
@media (max-width: 560px) {
.apdp .press-row { grid-template-columns: 1fr; }
/* BMDC 2026-06-23 (Mobile-OP): homepage press strip keeps 2 columns on phones
   (opt-in via two_col_mobile; PDPs stay single-column). */
.apdp .press-row--2col-mobile { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
.apdp .press-row--2col-mobile .press-row__item { padding: 0 4px; }
.apdp .press-row--2col-mobile .press-row__logo img { height: 30px; }
}
.apdp .press-row__item {
  text-align: center;
  padding: 0 8px;
}
.apdp .press-row__name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  font-variant: small-caps;
}
.apdp .press-row__quote {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute);
  font-style: italic;
  margin: 0;
  text-wrap: pretty;
}
/* ===== Press — media-grid layout (Wilson 2026-06-27 Homepage H) ============
   Gated by .press-strip--media so the PDP logo strip (no modifier) is untouched.
   Desktop: large side image (left) + 2×4 logo/comment cards (right), left-aligned
   head. Mobile: image hidden (per comp), head centered, cards stay 2-up. */
.apdp .press-strip--media .press-strip__inner { display: grid; grid-template-columns: minmax(0, 0.82fr) 1.18fr; gap: 40px; align-items: stretch; }
.apdp .press-strip--media .press-strip__head { text-align: left; max-width: none; margin: 0 0 22px; }
.apdp .press-strip--media .press-strip__head .section-eyebrow { justify-content: flex-start; }
.apdp .press-strip--media .press-strip__intro { margin-left: 0; margin-right: 0; }
.apdp .press-strip--media .press-strip__media { border-radius: 16px; overflow: hidden; background: var(--cream-2); }
.apdp .press-strip--media .press-strip__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apdp .press-strip--media .press-strip__ph { width: 100%; height: 100%; min-height: 460px; background: var(--cream-2); border-radius: 16px; }
.apdp .press-strip--media .press-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.apdp .press-strip--media .press-row__item { background: #fff; border: 1px solid var(--rule-soft); border-radius: 12px; padding: 22px 16px; gap: 10px; justify-content: center; }
@media (max-width: 900px) {
  .apdp .press-strip--media .press-strip__inner { grid-template-columns: 1fr; gap: 0; }
  .apdp .press-strip--media .press-strip__media { display: none; }
  .apdp .press-strip--media .press-strip__head { text-align: center; }
  .apdp .press-strip--media .press-strip__head .section-eyebrow { justify-content: center; }
  .apdp .press-strip--media .press-row { gap: 12px; }
}
.apdp /* From The Pros — 3 portrait testimonials */
.pros-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
.apdp .pros-grid { grid-template-columns: 1fr; }
}
.apdp .pro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.apdp .pro-card__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--navy-deep);
  margin: 0 0 14px;
  text-wrap: balance;
}
.apdp .pro-card__quote::before {
  content: '“';
  display: block;
  font-family: var(--serif);
  font-size: 40px;
  color: var(--gold);
  line-height: 0.6;
  margin-bottom: 8px;
}
.apdp .pro-card__avatar {
  width: 180px; height: 180px; /* was 132px — BMDC 2026-06-12 */
  border-radius: 50%;
  background: var(--cream-2);
  margin-bottom: 16px;
  overflow: hidden;
}
.apdp .pro-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
/* "More from Aricove" collection rail (BMDC 2026-06-05). */
.apdp .morefrom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .apdp .morefrom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .apdp .morefrom-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
.apdp .morefrom-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.apdp .morefrom-card__img {
  border-radius: 12px; overflow: hidden; background: var(--cream-2);
  aspect-ratio: 1 / 1; margin-bottom: 12px;
  border: 1px solid var(--rule);
  transition: var(--t, 200ms ease);
}
.apdp .morefrom-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apdp .morefrom-card:hover .morefrom-card__img { box-shadow: var(--sh-card); transform: translateY(-2px); }
.apdp .morefrom-card__name { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--navy-deep); line-height: 1.3; }
.apdp .morefrom-card__price { margin-top: 4px; font-size: 14px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.apdp .morefrom-card__was { color: var(--mute); text-decoration: line-through; font-size: 13px; }
.apdp .morefrom-card__now { font-weight: 600; }
/* Review-video lightbox + play overlays (BMDC 2026-06-05) */
.apdp .vmodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.apdp .vmodal.is-open { opacity: 1; }
.apdp .vmodal[hidden] { display: none; }
.apdp .vmodal__backdrop { position: absolute; inset: 0; background: rgba(10,16,22,.82); }
.apdp .vmodal__dialog { position: relative; width: min(900px, 92vw); }
.apdp .vmodal__frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.apdp .vmodal__frame iframe, .apdp .vmodal__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.apdp .vmodal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.95); color: #141e26; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.apdp .has-video { position: relative; cursor: pointer; }
.apdp .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(20,30,38,.55); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background-color .2s ease, transform .2s ease; }
.apdp .has-video:hover .video-play { background: var(--gold); transform: translate(-50%,-50%) scale(1.06); }
.apdp .video-play svg { width: 20px; height: 20px; color: #fff; margin-left: 2px; }
.apdp .has-video:hover .video-play svg { color: #141e26; }
.apdp button.pro-card__avatar { padding: 0; border: 0; display: block; cursor: pointer; }
.apdp .research-figure__btn { display: block; width: 100%; height: 100%; min-height: inherit; padding: 0; border: 0; background: none; cursor: pointer; position: absolute; inset: 0; }
.apdp .research-figure__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Awards / Proven Results band (BMDC 2026-06-05) */
.apdp .awards { background: var(--paper); }
.apdp .awards__eyebrow { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-text); margin: 0 0 18px; }
.apdp .awards__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px; }
.apdp .awards__badge { display: flex; align-items: center; }
.apdp .awards__badge img { height: 56px; width: auto; display: block; }
.apdp .awards__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--cream-2); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--navy-deep); }
@media (max-width: 600px) { .apdp .awards__row { gap: 12px 18px; } .apdp .awards__chip { font-size: 11.5px; padding: 7px 14px; } }
.apdp .pro-card__name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-deep);
}
.apdp .pro-card__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--mute);
  margin-top: 4px;
}
.apdp /* The Aricove Promise — 3 trust cards */
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
.apdp .promise-grid { grid-template-columns: 1fr; }
}
.apdp .promise-card {
  text-align: center;
  padding: 36px 28px;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.apdp .promise-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold-text);
}
.apdp .promise-card__icon svg { width: 30px; height: 30px; }
.apdp .promise-card__icon img { width: 64px; height: 64px; object-fit: contain; }
.apdp .promise-card__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 12px;
}
.apdp .promise-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
  margin: 0;
  text-wrap: pretty;
}
.apdp /* How-it-works tweaks (cleaner — no specs ribbon) */
.how-card__spec { display: none; }
.apdp /* ============================================================
   V5 — TRUST BAND (customer volume + certs + founded year)
   ============================================================ */
.trust-band {
  background: var(--navy-deep);
  color: white;
  padding: 28px 0;
}
.apdp .trust-band__grid {
  display: grid;
  /* auto-fit so the band reads evenly with 4 OR 5 stats (volume stat is optional). */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  align-items: center;
}
@media (max-width: 900px) {
.apdp .trust-band__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}
.apdp .trust-band__primary {
  display: flex; flex-direction: column;
  gap: 4px;
  align-items: center; text-align: center; /* centred band (Wilson 2026-06-04, item 13) */
}
.apdp .trust-band__big {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-soft);
  letter-spacing: -0.5px;
}
.apdp .trust-band__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.65);
}
.apdp .trust-band__certs { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
/* BMDC 07-28 (chat): horizontal alignment across the WB-PDP trust band — when the cert
   medallion is present (.trust-band--certified) every cell's value zone becomes a fixed
   64px box (the OEKO-TEX disc height), cells top-align, and both stat/cert cells use the
   same 4px value→label gap, so 100,000+ · 143 · 4.94★ · the logo · 2018 and all their
   labels sit on the same horizontal lines. Bands without the medallion (homepage strip)
   keep the compact layout. */
.apdp .trust-band--certified .trust-band__grid { align-items: start; }
.apdp .trust-band--certified .trust-band__big { display: inline-flex; align-items: center; justify-content: center; height: 64px; }
.apdp .trust-band--certified .trust-band__certs { gap: 4px; }
.apdp .trust-band__certs-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
}
.apdp .trust-band__certs-list li::after { content: '·'; margin-left: 6px; color: rgba(255,255,255,0.3); }
.apdp .trust-band__certs-list li:last-child::after { content: ''; }
/* Assurances row (Wilson H3, homepage-only) — sits under the 4-stat grid. */
.apdp .trust-band__assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14); }
.apdp .trust-band__assurance { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.82); }
.apdp .trust-band__assurance svg { flex: none; color: var(--gold-soft); }
.apdp .trust-band__assurance + .trust-band__assurance { position: relative; }
/* Homepage trust band — light sand variant (Wilson 2026-06-25): distinct from the navy hero. */
.apdp .trust-band.trust-band--light { background: #EFE7D6; color: var(--ink); }
.apdp .trust-band--light .trust-band__big { color: var(--navy-deep); }
.apdp .trust-band--light .trust-band__label { color: var(--mute); }
.apdp .trust-band--light .trust-band__assurances { border-top-color: rgba(18,29,39,0.14); }
.apdp .trust-band--light .trust-band__assurance { color: var(--ink); }
.apdp .trust-band--light .trust-band__assurance svg { color: var(--gold-text); }
/* About "What you can count on" assurances band (aricove-about-count-on) — dark band,
   centred heading, 4 left-aligned columns of icon + label + sub (Wilson 2026-06-18). */
.apdp .count-on__head { text-align: center; margin-bottom: 40px; }
.apdp .count-on__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.apdp .count-on__col { display: flex; flex-direction: column; gap: 10px; }
.apdp .count-on__icon { color: var(--gold-soft); line-height: 0; }
.apdp .count-on__label { font-weight: 600; color: #fff; font-size: 15px; }
.apdp .count-on__sub { color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.55; }
@media (max-width: 700px) {
  .apdp .count-on__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .apdp .count-on__head { margin-bottom: 28px; }
}
.apdp /* ============================================================
   V5 — EXPERT CARD
   ============================================================ */
.expert-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
@media (max-width: 720px) {
.apdp .expert-card { grid-template-columns: 1fr; text-align: center; }
}
.apdp .expert-card__photo {
  width: 180px; height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream-2);
}
@media (max-width: 720px) {
.apdp .expert-card__photo { margin: 0 auto; width: 140px; height: 140px; }
}
.apdp .expert-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.apdp .expert-card__body { display: flex; flex-direction: column; gap: 12px; }
.apdp .expert-card__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--navy-deep);
  margin: 0;
  text-wrap: pretty;
}
.apdp .expert-card__attr {
  font-size: 13px;
  color: var(--mute);
  display: flex; flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.apdp .expert-card__attr strong { color: var(--ink); font-weight: 600; font-size: 14px; }
.apdp .expert-card__creds { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3px; }
.apdp .expert-card__note {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--warn);
  background: rgba(184, 92, 31, 0.06);
  border-left: 2px solid var(--warn);
  padding: 6px 10px;
  margin: 6px 0 0;
  border-radius: 0 4px 4px 0;
}
.apdp /* ============================================================
   V5 — UGC STRIP
   ============================================================ */
.ugc-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
.apdp .ugc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.apdp .ugc-grid { grid-template-columns: 1fr; }
}
.apdp .ugc-tile {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: var(--t);
}
.apdp .ugc-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.apdp .ugc-tile__img {
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
  overflow: hidden;
}
.apdp .ugc-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.apdp .ugc-tile__meta {
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.apdp .ugc-tile__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--navy-deep);
  line-height: 1.35;
}
.apdp .ugc-tile__attr {
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.3px;
}
.apdp .ugc-strip__cta {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--mute);
}
.apdp .ugc-strip__cta a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.apdp /* ============================================================
   V5 — HOW TO USE 4-step
   ============================================================ */
.howto-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: howto;
}
@media (max-width: 900px) {
.apdp .howto-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
/* A11 2026-08-18: minmax(0,1fr) prevents children with intrinsic widths wider than the
   track (e.g. the step image) from forcing the grid column to expand beyond the container. */
.apdp .howto-grid { grid-template-columns: minmax(0, 1fr); }
}
.apdp .howto-step {
  position: relative;
  padding: 24px 20px 24px 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.apdp .howto-step + .howto-step::before {
  content: '';
  position: absolute;
  left: -12px; top: 28px; bottom: 28px;
  width: 1px;
  background: var(--rule);
}
@media (max-width: 900px) {
.apdp .howto-step + .howto-step::before { display: none; }
}
.apdp .howto-step__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cream-2); color: var(--gold-text);
  margin-bottom: 2px;
}
.apdp .howto-step__icon svg { display: block; }
.apdp .howto-step__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold-text);
  letter-spacing: 1.5px;
  font-weight: 500;
}
.apdp .howto-step__title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0;
}
.apdp .howto-step__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
  margin: 0;
  text-wrap: pretty;
}
.apdp /* ============================================================
   V5 — QUANTIFIED OUTCOME
   ============================================================ */
.quantified {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border-left: 3px solid var(--gold);
  background: var(--gold-tint);
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
}
.apdp .quantified__head {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.2;
}
.apdp .quantified__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
}
.apdp .mockup-ribbon {
  background: var(--navy-deep);
  color: var(--gold-soft);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  padding: 6px 12px;
  letter-spacing: 1.2px;
}
.apdp /* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .hero { padding: 24px 0; }
  .pdp-tabs button { padding: 8px 14px; font-size: 12px; }
  .site-nav { display: none; }
  .site-header__inner { grid-template-columns: 1fr; gap: 12px; }
  .site-utils { justify-content: center; }
}
@media (max-width: 480px) {
.apdp .container, .apdp .container-wide { padding: 0 16px; }
.apdp .hero { padding-left: 16px; padding-right: 16px; }
.apdp .price-now { font-size: 30px; }
.apdp .h1, .apdp h1 { font-size: 30px; }
}
.apdp /* ============================================================
   V6 ADDITIONS — Wilson feedback markup
   ============================================================ */

/* Marcellus has a single (400) weight; nudge display sizing so headings
   read confident rather than thin, .apdp and relax the negative tracking that
   suited Playfair. */
/* font-weight 600 (BMDC 2026-07-01 · #21): match the Our Story hero / page-head headings so every
   page reads at the same boldness. Optima (first in the --display/--serif stack) has real weights,
   so the old base 400 rendered headings thinner than the 600-override pages. Sizes stay contextual. */
.h1, .apdp h1, .apdp .h2, .apdp h2, .apdp .h3, .apdp h3 { letter-spacing: 0.1px; font-weight: 600; }
.apdp .h1, .apdp h1 { font-size: clamp(36px, 4.4vw, 56px); }
.apdp /* --- Gallery badge: now carries an icon --- */
.gallery__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.apdp .gallery__badge svg { color: var(--gold-soft); flex-shrink: 0; }
.apdp /* --- Trust factors: clickable popovers, .apdp sit directly under the Add to cart button --- */
.trust-row--above { margin: -10px 0 -4px; justify-content: center; }
.apdp /* V6 — Ecosa-style trust cards (icon on top, .apdp label below) */
.trust-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: -10px; /* tighten gap under the delivery block (BMDC 2026-06-12); .hero__info flex gap is 20px */ }
.apdp .trust-card {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 15px 8px 13px; text-align: center; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
  transition: var(--t-fast);
}
.apdp .trust-card:hover { border-color: var(--gold-soft); background: var(--gold-tint); transform: translateY(-2px); }
.apdp .trust-card__icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-2); color: var(--gold-text);
  display: flex; align-items: center; justify-content: center;
}
.apdp .trust-card:hover .trust-card__icon { background: #fff; }
.apdp .trust-card__label { font-size: 11.5px; font-weight: 600; color: var(--navy-deep); line-height: 1.25; text-wrap: balance; }
@media (max-width: 560px) {
.apdp .trust-cards { grid-template-columns: repeat(2, 1fr); }
}
.apdp .trust-chip--btn {
  cursor: pointer;
  transition: var(--t-fast);
}
.apdp .trust-chip--btn:hover {
  border-color: var(--gold);
  background: var(--gold-tint);
  color: var(--gold-text);
}
.apdp .trust-chip--btn .chip-i {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  opacity: 0.6;
  flex-shrink: 0;
}
.apdp .trust-chip--btn:hover .chip-i { opacity: 1; }
.apdp /* Modal detail rows for trust-factor popups */
.detail-list { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 0; }
.apdp .detail-list__item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}
.apdp .detail-list__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold-text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.apdp .detail-list__item h4 { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.apdp .detail-list__item p { margin: 0; font-size: 13px; }
.apdp /* --- Delivery estimate widget --- */
.delivery {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cream-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
}
.apdp .delivery__icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-deep);
  flex-shrink: 0;
}
.apdp .delivery__text { line-height: 1.4; }
.apdp .delivery__text strong { color: var(--navy-deep); font-weight: 700; }
.apdp .delivery__text .lead-in { color: var(--mute); }
.apdp .delivery__cutoff {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--success);
  font-weight: 600;
  white-space: nowrap;
}
.apdp .delivery__cutoff .stock-dot { background: var(--success-dot); }
.apdp .delivery__instock { color: var(--success); font-weight: 700; }
/* Variant-aware stock states (Wilson 2026-06-04, item 7): low = yellow/amber,
   out-of-stock = red. Colour the whole cutoff line + its dot + the bold label. */
.apdp .delivery__cutoff.stock--low { color: var(--warn); }
.apdp .delivery__cutoff.stock--low .delivery__instock { color: var(--warn); }
.apdp .delivery__cutoff.stock--low .stock-dot { background: var(--warn-dot); }
.apdp .delivery__cutoff.stock--low .stock-dot::before { border-color: var(--warn-dot); }
.apdp .delivery__cutoff.stock--oos { color: var(--danger); }
.apdp .delivery__cutoff.stock--oos .delivery__instock { color: var(--danger); }
.apdp .delivery__cutoff.stock--oos .stock-dot { background: var(--danger); }
/* No pulse on the out-of-stock dot — a calm red, not an alarm. */
.apdp .delivery__cutoff.stock--oos .stock-dot::before { animation: none; border-color: var(--danger); opacity: 0; }
/* MCF delivery-widget @app slot: collapse to nothing until the badge is mounted
   (Wilson 2026-06-04, item 8 — the "blank field"). */
.apdp .apdp-app-block:empty { display: none; }
@media (max-width: 480px) {
.apdp .delivery { flex-wrap: wrap; }
.apdp .delivery__cutoff { margin-left: 0; }
}
.apdp /* --- Payment methods + security badges (below add to cart) --- */
.pay-trust {
  display: flex;
  align-items: center;
  /* justify-content:center (BMDC 2026-07-01 · #22): center the Secure-checkout text + payment
     marks under the full-width ATC button (was flex-start / left-aligned), mirroring the cart
     drawer's .drawer__pay-cards. */
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: -8px;
}
.apdp .pay-cards { display: flex; align-items: center; justify-content: center; gap: 5px; opacity: 0.78; }
.apdp .pay-card {
  height: 22px;
  min-width: 33px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--navy-deep);
}
.apdp .pay-card--visa { color: #1A1F71; }
.apdp .pay-card--mc { color: #B85C1F; }
.apdp .pay-card--amex { color: #15356A; }
.apdp .pay-card--paypal { color: #1A3A6B; font-style: italic; }
.apdp .pay-card--applepay { color: #111; }
.apdp .pay-card--gpay { color: #444; }
.apdp .pay-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--mute);
  font-weight: 500;
}
.apdp .pay-secure svg { color: var(--success); flex-shrink: 0; }
.apdp .pay-secure strong { color: var(--ink); font-weight: 600; }
.apdp /* --- Easy-return micro-note --- */
.return-disclosure strong { color: var(--ink); }
.apdp .easy-return {
  font-weight: 600; color: var(--success); white-space: nowrap;
}
.apdp .easy-return svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.apdp /* --- V6 Qualitative claims grid (Bearaby-style) --- */
.qual-claims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.apdp .qual-claim { display: flex; align-items: center; gap: 11px; }
.apdp .qual-claim__icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-2); color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.apdp .qual-claim__label { font-size: 13px; font-weight: 600; color: var(--navy-deep); line-height: 1.3; }
.apdp /* --- V6 Product detail tabs (Highlights / Materials / Dimensions / Care) --- */
.ptabs__nav {
  display: flex; gap: 22px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
}
.apdp .ptabs__tab {
  padding: 12px 0; margin-bottom: -1px;
  font-size: 14px; font-weight: 600; color: var(--mute);
  border-bottom: 2px solid transparent;
  transition: var(--t-fast);
}
.apdp .ptabs__tab.is-active { color: var(--navy-deep); border-bottom-color: var(--gold); }
.apdp .ptabs__tab:hover { color: var(--navy-deep); }
.apdp .ptabs__panel { padding: 16px 0 2px; }
.apdp .ptabs__bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.apdp .ptabs__bullets li { font-size: 14px; line-height: 1.55; color: var(--ink); }
.apdp .ptabs__bullets li::marker { color: var(--gold); }
/* Highlights = checkmark list, not disc bullets (BMDC 2026-06-05). */
.apdp .ptabs__checks { list-style: none; padding-left: 0; gap: 11px; }
.apdp .ptabs__checks li { position: relative; padding-left: 28px; }
.apdp .ptabs__checks li::marker { content: ''; }
.apdp .ptabs__checks li::before {
  content: '';
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold-soft, #e7d4ac);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23493f2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.apdp .ptabs__groups { display: flex; flex-direction: column; gap: 14px; }
.apdp .ptabs__group h4 { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy-deep); margin: 0 0 3px; letter-spacing: 0.1px; }
.apdp .ptabs__group p { font-size: 13px; line-height: 1.55; color: var(--mute); margin: 0; }
.apdp .ptabs__note { font-size: 12.5px; line-height: 1.55; color: var(--mute); margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--rule); }
.apdp /* --- V6 Research proof (quantified, .apdp barrier-removing) --- */
.research { background: var(--cream-2); }
.apdp .research-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;   /* Wilson 07-08: wider figure, narrower cards (shared WB research + BP expected-outcome, BMDC-confirmed) */
  gap: 32px;
  align-items: stretch;
}
.apdp .research-figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  min-height: 360px;
  background: var(--cream-3);
}
.apdp .research-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apdp .research-stats { display: flex; flex-direction: column; gap: 14px; }
.apdp .research-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.apdp .research-card__main { display: flex; align-items: center; gap: 22px; }
.apdp .research-card__num {
  font-family: var(--display);
  font-size: clamp(52px, 6vw, 72px);
  font-weight: 400;
  color: var(--navy-deep);
  line-height: 0.9;
  flex-shrink: 0;
}
/* ============================================================
   LOOK INSIDE — desktop material explorer (.lx)
   Rebuilt 2026-07-28 from design_handoff_look_inside (README + desktop.html).
   Section markup: sections/aricove-pdp-layers.liquid. Mobile twin: .m-layers in
   assets/aricove-pdp-mobile.css. Colours/type come from the .apdp tokens above —
   the handoff's warm cream (#FAF7F2) maps onto the neutralised --cream (Wilson
   2026-06-04 item 11) on purpose. --lx-ease is the handoff's final easing and is
   deliberately NOT the global --ease.
   ============================================================ */
.apdp .lx {
  --lx-ease: cubic-bezier(.22, .65, .18, 1);
  background: var(--cream);
  color: var(--ink);
  padding: 72px 0;
}
.apdp .lx__inner { max-width: 1320px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }
.apdp .lx__layout { display: grid; grid-template-columns: 1.6fr 0.95fr; gap: 60px; align-items: center; }
@media (max-width: 1180px) { .apdp .lx__layout { gap: 40px; } }
@media (max-width: 900px) {
  .apdp .lx__layout { gap: 30px; }
  .apdp .lx__h2 { font-size: clamp(26px, 3.6vw, 34px); }
  .apdp .lx__lead { font-size: 15px; }
}
@media (max-width: 720px) { .apdp .lx__layout { grid-template-columns: 1fr; gap: 34px; } }
/* BMDC 2026-08-05 — the stage is optional now (the Cover content set has no Look-Inside art
   yet). With no stage the copy panel runs on its own, centred and width-capped so it doesn't
   stretch to the full 1320px inner. */
.apdp .lx__layout--nostage { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }

/* ---------- Stage ---------- */
.apdp .lx__stage {
  position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden;
  /* fix/section-bg-collisions-2026-08-13 (Chrome-smoke 13-08): was var(--cream-2), which
     clashed with the cream-2 from-the-pros / kids-pros section directly below on WB and
     kids-bamboo. The stage is always filled with a product image so the background only
     shows at the rounded corners and during load; matching the outer .lx cream is correct. */
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(18,29,39,.04), 0 34px 70px -34px rgba(18,29,39,.32);
}
.apdp .lx__map {
  position: absolute; inset: 0; transform-origin: center center; background: var(--navy);
  transition: transform 900ms var(--lx-ease), opacity 620ms ease;
}
.apdp .lx__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apdp .lx__stage.is-focus .lx__map { opacity: 0; }

.apdp .lx__macro {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 700ms ease;
}
.apdp .lx__macro img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.1); transition: transform 1400ms var(--lx-ease);
}
.apdp .lx__macro.is-on { opacity: 1; }
.apdp .lx__macro.is-on img { transform: scale(1); animation: lx-breathe 22s ease-in-out 1.4s infinite alternate; }
@keyframes lx-breathe { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Warm unifying wash — exists ONLY so the mixed light/dark placeholder macros read as
   one family. Delete this rule (and .lx__wash in the section) once all four are
   re-shot on one background. */
.apdp .lx__wash {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
  transition: opacity .7s ease;
  background: linear-gradient(180deg, rgba(250,247,242,.10), rgba(184,146,77,.09) 55%, rgba(18,29,39,.14));
}
.apdp .lx__stage.is-focus .lx__wash { opacity: 1; }
.apdp .lx__vig {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 92% at 50% 42%, transparent 52%, rgba(18,29,39,.30) 100%);
}

/* ---------- Pins ---------- */
.apdp .lx__pins { position: absolute; inset: 0; z-index: 4; transition: opacity .45s ease; }
.apdp .lx__stage.is-focus .lx__pins { opacity: 0; pointer-events: none; }
.apdp .lx__pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250,247,242,.93); color: var(--navy);
  font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .22s var(--lx-ease), background-color .22s ease, color .22s ease;
}
.apdp .lx__pin::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid rgba(250,247,242,.65);
  animation: lx-ping 2.6s ease-out infinite;
}
.apdp .lx__pin:nth-child(2)::after { animation-delay: .5s; }
.apdp .lx__pin:nth-child(3)::after { animation-delay: 1s; }
.apdp .lx__pin:nth-child(4)::after { animation-delay: 1.5s; }
@keyframes lx-ping { 0% { transform: scale(.85); opacity: .75; } 100% { transform: scale(1.55); opacity: 0; } }
.apdp .lx__pin:hover { transform: translate(-50%, -50%) scale(1.12); background: var(--gold); color: #fff; }

/* ---------- Reset pill ---------- */
.apdp .lx__reset {
  position: absolute; top: 20px; right: 20px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 17px; border-radius: 999px; border: 0;
  background: var(--navy); color: #fff;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2px;
  cursor: pointer; opacity: 0; transform: translateY(-8px); pointer-events: none;
  box-shadow: 0 8px 24px rgba(18,29,39,.28);
  transition: opacity .35s ease, transform .35s var(--lx-ease), background-color .2s ease;
}
.apdp .lx__reset svg { width: 13px; height: 13px; }
.apdp .lx__reset:hover { background: var(--navy-ink); }
.apdp .lx__stage.is-focus .lx__reset { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Caption ---------- */
.apdp .lx__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 64px 28px 26px; pointer-events: none;
  background: linear-gradient(to top, rgba(18,29,39,.82), rgba(18,29,39,0));
}
.apdp .lx__cap-name {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 24px; line-height: 1.2; letter-spacing: .2px; color: #fff;
}
.apdp .lx__cap-sub { display: block; margin-top: 5px; font-size: 12.5px; letter-spacing: .3px; color: rgba(255,255,255,.72); }
.apdp .lx__cap-hint { color: var(--gold-soft); }

/* ---------- Panel ---------- */
.apdp .lx__panel { display: flex; flex-direction: column; justify-content: center; }
.apdp .lx__eyebrow {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--gold-text);
}
.apdp .lx__eyebrow::before { content: ""; display: block; width: 44px; height: 1.5px; background: var(--gold); }
.apdp .lx__h2 {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(32px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -.2px; margin: 0;
}
.apdp .lx__lead { color: var(--mute); font-size: 16.5px; line-height: 1.65; margin: 18px 0 0; max-width: 44ch; text-wrap: pretty; }

/* ---------- Accordion ---------- */
.apdp .lx__mats { list-style: none; margin: 28px 0 0; padding: 0; }
.apdp .lx__mat { border-top: 1px solid var(--rule); }
.apdp .lx__mat:last-child { border-bottom: 1px solid var(--rule); }
.apdp .lx__mat-head {
  width: 100%; background: transparent; border: 0; cursor: pointer; color: var(--ink);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 16px 4px; text-align: left; font-family: var(--sans);
}
.apdp .lx__mat-thumb {
  position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
  flex-shrink: 0; background: var(--cream-2); box-shadow: 0 1px 2px rgba(18,29,39,.06);
  transition: box-shadow .3s var(--lx-ease), transform .3s var(--lx-ease);
}
.apdp .lx__mat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); }
.apdp .lx__mat.is-active .lx__mat-thumb {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px var(--gold), 0 8px 18px -8px rgba(18,29,39,.4);
}
.apdp .lx__mat-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apdp .lx__mat-title { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.24; letter-spacing: .1px; color: var(--navy); }
.apdp .lx__mat-role { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold-text); }
.apdp .lx__mat-plus { position: relative; width: 17px; height: 17px; flex-shrink: 0; color: var(--gold); }
.apdp .lx__mat-plus::before, .apdp .lx__mat-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transition: transform .3s var(--lx-ease);
}
.apdp .lx__mat-plus::before { width: 14px; height: 1.6px; transform: translate(-50%, -50%); }
.apdp .lx__mat-plus::after { width: 1.6px; height: 14px; transform: translate(-50%, -50%); }
.apdp .lx__mat.is-open .lx__mat-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.apdp .lx__mat-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--lx-ease); }
.apdp .lx__mat.is-open .lx__mat-body { grid-template-rows: 1fr; }
.apdp .lx__mat-bodyinner { overflow: hidden; }
.apdp .lx__mat-copy { font-size: 14.5px; line-height: 1.66; color: var(--mute); padding: 0 26px 20px 68px; margin: 0; max-width: 50ch; text-wrap: pretty; }
/* BMDC 2026-08-05 — rows with no macro photo yet (the Cover design-detail set). The head is a
   3-column grid sized for thumb / text / plus; with the thumb gone the text column would
   shrink to its content and the plus would sit right beside the title. Drop to 2 columns and
   pull the body copy back to the left edge. */
.apdp .lx__mat-head--nothumb { grid-template-columns: 1fr auto; }
.apdp .lx__mat--nothumb .lx__mat-copy { padding-left: 4px; }

.apdp .lx__cert { margin: 24px 0 0; font-size: 12px; line-height: 1.6; color: var(--mute); max-width: 52ch; }
.apdp .lx__cert strong { color: var(--navy); font-weight: 600; }

@media (max-width: 640px) { .apdp .lx__mat-copy { padding-left: 0; } }

@media (prefers-reduced-motion: reduce) {
  .apdp .lx__map, .apdp .lx__macro, .apdp .lx__macro img,
  .apdp .lx__pin, .apdp .lx__reset, .apdp .lx__pins,
  .apdp .lx__wash, .apdp .lx__mat-body, .apdp .lx__mat-thumb,
  .apdp .lx__mat-plus::before, .apdp .lx__mat-plus::after { transition: none; }
  .apdp .lx__macro.is-on img, .apdp .lx__pin::after { animation: none; }
}

.apdp .research-card__head { display: flex; flex-direction: column; gap: 6px; }
.apdp .research-card__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; /* was 11px — BMDC 2026-06-12 */ font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold-text);
}
.apdp .research-card__tag svg { color: var(--gold-text); }
.apdp .research-card__claim {
  font-size: 16px; font-weight: 600; color: var(--navy-deep);
  margin: 0; line-height: 1.4;
}
.apdp .research-card__why {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mute);
  border-top: 1px solid var(--rule); padding-top: 16px;
}
.apdp .research-card__why strong { color: var(--navy-deep); font-weight: 700; }
/* Citation under each research stat (Wilson 2026-06-04 — verified sources). */
.apdp .research-card__cite {
  display: block; margin-top: 10px; font-size: 11.5px; font-style: italic;
  line-height: 1.45; color: var(--mute);
}
.apdp .research-note {
  margin: 28px auto 0; max-width: 780px; text-align: center;
  font-size: 11.5px; line-height: 1.55; color: var(--mute);
}
@media (max-width: 860px) {
.apdp .research-layout { grid-template-columns: 1fr; gap: 22px; }
.apdp .research-figure { min-height: 260px; }
.apdp .research-card__main { gap: 16px; }
}
.apdp /* --- Size tile icon (visualize points) --- */
.size-tile__head { display: flex; align-items: center; gap: 8px; }
.apdp .size-tile__icon { color: var(--gold-text); flex-shrink: 0; }
.apdp .size-tile.is-active .size-tile__icon { color: var(--gold); }
.apdp /* --- Benefit tile: quantified stat chip --- */
.benefit-tile__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 8px;
  font-family: var(--display);
}
.apdp .benefit-tile__stat .num {
  font-size: 26px;
  font-weight: 400;
  color: var(--gold-text);
  line-height: 1;
}
.apdp .benefit-tile__stat .unit {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--mute);
  text-transform: uppercase;
}
.apdp .benefit-tile__icon {
  position: absolute;
  top: 12px; left: 12px;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-deep);
  box-shadow: var(--sh-1);
}
.apdp .benefit-tile__img { position: relative; }
.apdp .benefit-survey-note {
  margin: 26px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 12px;
  color: var(--mute);
  font-family: var(--mono);
  letter-spacing: 0.2px;
}
.apdp /* ============================================================
   V6 — "WHAT'S INSIDE" CUTAWAY (Casper-style sectional view)
   ============================================================ */
.cutaway {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 900px) {
.apdp .cutaway { grid-template-columns: 1fr; gap: 32px; }
}
.apdp .cutaway__stage {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-ink) 100%);
  border-radius: 16px;
  padding: 56px 40px;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  overflow: hidden;
}
.apdp .cutaway__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  transform: rotateX(46deg) rotateZ(-32deg);
  transform-style: preserve-3d;
}
.apdp .cutaway__layer {
  height: 30px;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
  position: relative;
  cursor: pointer;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.apdp .cutaway__layer::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);
}
.apdp .cutaway__layer .pin {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.apdp .cutaway__layer.is-active {
  transform: translateZ(34px) scale(1.03);
  box-shadow: 0 18px 30px rgba(0,0,0,0.4);
}
.apdp .cutaway__hint {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.apdp .cutaway__list { display: flex; flex-direction: column; gap: 6px; }
.apdp .cutaway__item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--t-fast);
  text-align: left;
  width: 100%;
  background: none;
}
.apdp .cutaway__item:hover { background: var(--cream-2); }
.apdp .cutaway__item.is-active {
  background: var(--paper);
  border-color: var(--rule);
  box-shadow: var(--sh-2);
}
.apdp .cutaway__swatch {
  width: 16px; height: 16px;
  border-radius: 4px;
  margin-top: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.apdp .cutaway__item h4 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  color: var(--navy-deep);
  margin: 0 0 3px;
  line-height: 1.2;
}
.apdp .cutaway__item p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.apdp .cutaway__num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold-text);
  letter-spacing: 1px;
}
.apdp /* DTP science mini-row inside education section */
.dtp-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 760px) {
.apdp .dtp-mini { grid-template-columns: 1fr; }
}
.apdp .dtp-mini__item { display: flex; flex-direction: column; gap: 8px; }
.apdp .dtp-mini__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--gold-tint);
  color: var(--gold-text);
  display: flex; align-items: center; justify-content: center;
}
.apdp .dtp-mini__item h4 { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--navy-deep); margin: 0; }
.apdp .dtp-mini__item p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--mute); }
.apdp .dtp-mini__item .cite { font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; color: var(--gold-text); text-transform: uppercase; }
.apdp /* ============================================================
   V6 — PRESS WORDMARKS (typographic "logos")
   ============================================================ */
.press-row { align-items: stretch; }
.apdp .press-row__logo {
  color: var(--navy-deep);
  line-height: 1;
  margin-bottom: 10px;
}
.apdp .press-row__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.apdp /* ============================================================
   V6 — UGC: horizontal scroller + video tiles
   ============================================================ */
.ugc-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 24px 18px;
  margin: 0 -24px;
  scrollbar-width: thin;
}
@media (min-width: 1100px) {
.apdp .ugc-scroller { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; overflow: visible; margin: 0; padding: 6px 0 0; }
}
.apdp .ugc-scroller .ugc-tile { scroll-snap-align: start; }
.apdp .ugc-tile__img { position: relative; }
.apdp .ugc-tile--video .ugc-tile__play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,27,58,0.28);
  transition: var(--t-fast);
}
.apdp .ugc-tile--video:hover .ugc-tile__play { background: rgba(8,27,58,0.42); }
.apdp .ugc-tile__play span {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; padding-left: 4px;
  box-shadow: var(--sh-2);
  transition: transform var(--t-fast);
}
.apdp .ugc-tile--video:hover .ugc-tile__play span { transform: scale(1.08); }
.apdp .ugc-tile__dur {
  position: absolute;
  bottom: 8px; right: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: white;
  background: rgba(8,27,58,0.7);
  padding: 2px 6px;
  border-radius: 4px;
}
.apdp .ugc-scroll-hint {
  display: none;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  margin-top: 6px;
}
@media (max-width: 1099px) {
.apdp .ugc-scroll-hint { display: block; }
}
.apdp /* ============================================================
   V6 — TOP STICKY ADD-TO-CART BANNER (appears below the fold)
   ============================================================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 95;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 4px 20px rgba(8,27,58,0.08);
  transform: translateY(-100%);
  transition: transform 260ms var(--ease);
}
.apdp .topbar.is-visible { transform: translateY(0); }
@media (max-width: 900px) {
.apdp .topbar { display: none; }
}
.apdp .topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.apdp .topbar__thumb {
  width: 46px; height: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream-2);
  flex-shrink: 0;
}
.apdp .topbar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.apdp .topbar__name {
  font-family: var(--display);
  font-size: 17px;
  color: var(--navy-deep);
  line-height: 1.1;
}
.apdp .topbar__sub { font-size: 12px; color: var(--mute); }
.apdp .topbar__rating { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); margin-left: 4px; }
.apdp .topbar__spacer { flex: 1; }
.apdp .topbar__price {
  font-family: var(--display);
  font-size: 22px;
  color: var(--navy-deep);
  line-height: 1;
}
.apdp .topbar__cta { height: 46px; padding: 0 28px; }
.apdp /* ============================================================
   V6 — FOOTER EMAIL SIGNUP
   ============================================================ */
.footer-signup {
  margin-top: 16px;
  max-width: 38ch;
}
.apdp .footer-signup__label { color: white; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.apdp .footer-signup__sub { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 10px; }
.apdp .footer-signup__form { display: flex; gap: 8px; }
.apdp .footer-signup__input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: white;
  font-size: 13px;
}
.apdp .footer-signup__input::placeholder { color: rgba(255,255,255,0.45); }
.apdp .footer-signup__input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.apdp .footer-signup__btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--navy-ink);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: var(--t-fast);
}
.apdp .footer-signup__btn:hover { background: var(--gold-soft); }
.apdp .footer-signup__ok { color: var(--gold-soft); font-size: 13px; font-weight: 600; padding: 10px 0; }
.apdp /* --- Review date --- */
.review-card__date { font-size: 11px; color: var(--mute); font-weight: 400; }
.apdp .review-card__head .stars { margin-top: 4px; }
.apdp /* --- Bundle moved near buy box: tighter top margin when high on page --- */
.section--bundle-early { padding-top: 8px; }
.apdp /* --- Trust band live indicator --- */
.trust-band__big { display: inline-flex; align-items: baseline; gap: 8px; }
.apdp .trust-band__live {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--success-dot);
}
.apdp .trust-band__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success-dot);
  box-shadow: 0 0 0 0 rgba(62,166,110,0.6);
  animation: livePulse 2.2s ease-out infinite;
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(62,166,110,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(62,166,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,166,110,0); }
}

/* ============================================================
   WILSON R2 2026-06-10 — Track B: trust pop-up title row (icon
   left of title) + states-list fine print. The modal shell keeps
   height:auto (fits content) with max-height 86vh + scroll.
   ============================================================ */
/* Full-bleed divider under the title row (Wilson 2026-06-26 1500pm ref — all 4 trust pop-ups).
   Negative side margins break the rule out across the modal's 32px padding to the card edges;
   the matching padding re-insets the icon/title to the body alignment. Also shows on the
   size/weight guides (no icon) — reads consistent. Modal padding is 32px at every breakpoint. */
.apdp .modal__titlerow { display: flex; align-items: center; gap: 12px; margin: 0 -32px 22px; padding: 0 32px 18px; border-bottom: 1px solid var(--rule); }
.apdp .modal__titlerow h2 { margin-bottom: 0; }
.apdp .modal__title-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--cream-2); color: var(--gold-text);
}
.apdp .modal__title-icon[hidden] { display: none; }
.apdp .modal__fine { font-size: 12px; line-height: 1.65; color: var(--mute); }

/* Track H — weight-guide per-size tabs (hidden until per-size panels exist) */
.apdp .wg__tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.apdp .wg__tabs[hidden] { display: none; }
.apdp .wg__tab {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--paper); font-size: 13px; font-weight: 500; color: var(--ink);
}
.apdp .wg__tab.is-active { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }

/* Track C — OEKO-TEX round logo in the navy trust band (white disc for contrast) */
.apdp .trust-band__cert-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: #FFFFFF !important; overflow: hidden;
}
.apdp .trust-band__cert-logo img { width: 52px; height: 52px; display: block; }

/* Track D — research stats: numerals in the gold theme color (Wilson R2: "change
   color of the figure to the goldish yellowish theme color"). --gold-text is the
   AA-safe gold for type on the white cards (#B8924D fails 3:1 at display sizes).
   Cites step back (smaller + lighter-but-AA) so the reference reads as a footnote;
   the "why" body steps up to ink for clear hierarchy above the cite. */
.apdp .research-card__num { color: var(--gold-text); }
.apdp .research-card__why { color: var(--ink); }
.apdp .research-card__cite { font-size: 10.5px; color: #6E747E; font-weight: 400; }

/* [hidden] must win over the backdrop's display:flex (same fix as the cart drawer,
   D-0023) — otherwise the closed modal stays in the a11y tree at opacity 0. */
.apdp .modal-backdrop[hidden] { display: none; }

/* a11y (axe serious, 2026-06-10): the 8px "Most picked" flag was white on --gold
   (#B8924D, 2.89:1) — needs 4.5:1 at this size. --gold-text keeps the gold family
   AA-safe (≈6:1 on white text). Mobile twin fixed in aricove-pdp-mobile.css. */
.apdp .weight-pill__pop { background: var(--gold-text); }