/* Sanamere test store
   Commerce structure measured from Nectar in NICHE-DNA.md. Type, palette,
   spacing and radius tokens measured from the premium red-light and
   wellness-device category in NICHE-DNA-REDLIGHT.md. Colour and copy are original. */

/* Self-hosted webfonts. Previously these loaded from api.fontshare.com at runtime,
   which returned HTTP 500 on 5 of 16 live page loads and dropped the entire type
   system to Georgia and a system sans on those visits. Fontshare fonts are released
   under the ITF Free Font License, which permits commercial use and self-hosting;
   only reselling or redistributing derivative fonts is disallowed, which this is not.
   11 faces, 201 KB total. Switzer is body and UI, Erode is the display voice,
   Bespoke Serif 700 is the wordmark only. */
@font-face{font-family:'Switzer';src:url('fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Erode';src:url('fonts/erode-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Erode';src:url('fonts/erode-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Erode';src:url('fonts/erode-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Erode';src:url('fonts/erode-500i.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'Erode';src:url('fonts/erode-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Erode';src:url('fonts/erode-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Bespoke Serif';src:url('fonts/bespoke-serif-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root {
  /* palette: warm editorial family measured against the premium red-light
     category in NICHE-DNA-REDLIGHT.md. Every text and ground pair named in
     this block was verified WCAG AA by tmp/wp2-contrast.js. */
  --pine:      #231D17;
  --pine-deep: #181310;
  --clay:      #B04A26;
  --clay-dark: #8F3A1C;
  --bone:      #FFFFFF;
  --oat:       #F7F5F2;
  --border:    #E8E1DA;
  --ink:       #16130F;
  --muted:     #6B6055;
  --sage:      #1F7A4D;
  --clay-lite: #D9743F;   /* accent for use ON dark grounds only */
  --white:     #FFFFFF;
  --dark-rgb:  24, 19, 16;

  /* section grounds: the warm rhythm ramp for long pages.
     ink and pine pass AA on every ground.
     muted passes on bone, oat, cream and sand only; on stone, tan or blush
     use ink or pine for secondary text instead.
     clay text passes on bone, oat and cream; on sand or deeper use
     clay-dark for text links. Solid clay fills with bone labels pass AA. */
  --cream: #FBF5F1;
  --sand:  #F0E3D9;
  --stone: #DCD6CB;
  --tan:   #E3D3B8;
  --blush: #E7CBB2;

  /* accents and utility tints, centralized from scattered literals */
  --wine:      #9E2B3D;   /* the one secondary accent: value anchors. bone on wine passes 7.3:1 */
  --amber:     #F0B429;   /* offer eyebrow, ON pine or pine-deep only */
  --sage-tint: #E8F3ED;   /* badge ground behind sage text, pair passes 4.7:1 */

  /* type scale: 9 steps, no half-pixel values, body anchored at 16px per the
     category measurement. Display size stays put: 60px already sits above the
     56px category median, and the gap was family and weight, not size. */
  --fs-micro:      12px;  /* badges, eyebrows, fine print */
  --fs-small:      14px;  /* captions, notes, small UI */
  --fs-body:       16px;  /* body copy and default UI */
  --fs-lead:       18px;  /* lead paragraphs */
  --fs-subhead:    22px;  /* feature leads, marquee, price-now */
  --fs-title:      24px;  /* h3 and card-level titles */
  --fs-headline:   28px;  /* h2 */
  --fs-display-sm: 40px;  /* PDP h1 and large feature numerals */
  --fs-display:    60px;  /* home h1 */

  /* geometry: 8px is the system, per measurement. Radius signals component
     role; the pill stays one role among several, not the universal shape. */
  --r:      8px;
  --r-pill: 200px;
  --shadow: rgba(0, 0, 0, 0.24) 0 1px 4px;

  /* layout: --max is the full-bleed canvas cap consumed by .wrap-lg,
     --content is the readable inner container, --text the long-form measure */
  --max:     1440px;
  --content: 1144px;
  --text:    768px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Switzer', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: 400;
  color: var(--ink);
  background: var(--bone);
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Form controls do not inherit type from the page by default, so any control whose
   own rule forgets to set a family falls back to the UA default. That is how the
   primary Add to Cart button was rendering in Arial on all six product pages while
   the rest of the site ran Switzer. Set it once here rather than per component.
   The colour half of this is the iOS Safari fix: mobile Safari paints button text
   system blue unless told otherwise, and headless Chrome never reproduces it. */
button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

/* Erode is the display voice on every h1/h2/h3; Switzer stays body and UI. */
h1, h2, h3 { margin: 0; font-family: 'Erode', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-display); line-height: 64px; }
h2 { font-size: var(--fs-headline); line-height: 32px; }
h3 { font-size: var(--fs-title); line-height: 28px; }

@media (max-width: 900px) {
  h1 { font-size: var(--fs-display-sm); line-height: 46px; }
  h2 { font-size: var(--fs-title); line-height: 28px; }
  h3 { font-size: var(--fs-subhead); line-height: 26px; }
}

.wrap    { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 24px; }
.wrap-lg { width: 100%; max-width: var(--max);     margin: 0 auto; padding: 0 24px; }
.muted   { color: var(--muted); }
.center  { text-align: center; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- focus states ---------- */
/* clay ring on light backgrounds (4.7:1 vs bone/white), bone ring on
   dark pine/pine-deep backgrounds (13.0:1); both clear the 3:1 bar */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-cta:focus-visible, .card:focus-visible, .faq summary:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}
.utility a:focus-visible, .utility button:focus-visible,
footer a:focus-visible {
  outline-color: var(--bone);
}

/* ---------- utility bar ---------- */
.utility {
  background: var(--pine-deep);
  color: var(--bone);
  font-size: var(--fs-small);
  line-height: 20px;
}
.utility .wrap-lg {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px;
}
.rotator { display: flex; align-items: center; gap: 14px; }
.rotator button {
  background: none; border: 0; color: var(--bone);
  cursor: pointer; font-size: var(--fs-small); line-height: 1; padding: 4px 6px;
  opacity: .7;
}
.rotator button:hover { opacity: 1; }
.utility-links { display: flex; gap: 22px; }
.utility-links a { text-decoration: none; opacity: .85; }
.utility-links a:hover { opacity: 1; }
@media (max-width: 760px) { .utility-links { display: none; } }

/* ---------- nav ---------- */
.nav { background: var(--white); color: var(--ink); border-bottom: 1px solid var(--border); }
.nav .wrap-lg {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; min-height: 68px;
}
.brand {
  font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.02em;
  text-decoration: none; color: var(--pine); white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 26px; flex: 1; }
.nav-links a {
  text-decoration: none; font-size: var(--fs-small); font-weight: 500;
  color: var(--ink); opacity: .92; white-space: nowrap;
}
.nav-links a:hover { opacity: 1; }
.tag {
  display: inline-block; margin-left: 8px;
  background: var(--clay); color: var(--white);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill);
  vertical-align: middle;
}
.nav-cta {
  background: rgba(176, 74, 38, .10); color: var(--clay);
  border: 0; border-radius: var(--r-pill);
  padding: 10px 20px; font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.nav-cta:hover { background: rgba(176, 74, 38, .18); }
.nav-icons { display: flex; gap: 18px; font-size: var(--fs-small); }
@media (max-width: 1000px) { .nav-links { display: none; } }

/* ---------- hero ---------- */
.hero { background: var(--bone); padding: 72px 0 56px; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } }

.eyebrow {
  display: inline-block; background: var(--pine); color: var(--bone);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 7px 14px;
  border-radius: var(--r-pill); margin-bottom: 20px;
}
.hero p.lede {
  font-size: var(--fs-lead); line-height: 28px; color: var(--muted);
  max-width: 520px; margin: 20px 0 28px;
}
.from {
  margin-top: 20px; font-size: var(--fs-small); font-weight: 600; color: var(--clay);
}
.hero-img {
  border-radius: var(--r); overflow: hidden;
  background: var(--oat); border: 1px solid var(--border);
}
.hero-img img { width: 100%; height: 440px; object-fit: contain; padding: 24px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--clay); color: var(--white);
  font-size: var(--fs-body); font-weight: 600; text-decoration: none;
  padding: 15px 34px; border-radius: var(--r); border: 0; cursor: pointer;
}
.btn-block { display: block; width: 100%; text-align: center; }
.btn-ghost {
  background: transparent; color: var(--pine);
  border: 1px solid var(--pine);
}
.btn-ghost:hover { background: var(--pine); color: var(--bone); }

/* ---------- trust row ---------- */
.trust { background: var(--white); border-block: 1px solid var(--border); padding: 30px 0; }
.trust-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
@media (max-width: 900px) { .trust-row { grid-template-columns: repeat(2, 1fr); } }
.trust-item svg { width: 34px; height: 34px; margin: 0 auto 10px; display: block; }
.trust-item span { font-size: var(--fs-small); font-weight: 500; line-height: 18px; display: block; }

/* ---------- proof bar ---------- */
.proof {
  background: var(--pine); color: var(--bone);
  padding: 16px 0; font-size: var(--fs-small); font-weight: 500;
}
.proof .wrap-lg {
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; text-align: center;
}

/* ---------- sections ---------- */
section.band     { padding: 76px 0; }
section.band.alt { background: var(--oat); }
.section-head { max-width: var(--text); margin: 0 0 40px; }
.section-head p { color: var(--muted); font-size: var(--fs-lead); line-height: 27px; margin: 12px 0 0; }

/* ---------- product grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 1050px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
/* WP14: the range rail is the only place the whole range is browsable, so the
   cards carry brand weight. Full-bleed photography cropped to a 4:3 plate
   replaces the thumbnail floating in a padded box, and the product name takes
   the Erode display role WP2 left open for this pass. */
.card-img { background: var(--cream); aspect-ratio: 4 / 3; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-title { font-family: 'Erode', Georgia, serif; font-size: var(--fs-title); font-weight: 600; line-height: 28px; letter-spacing: -.01em; }
.card-note  { font-size: var(--fs-small); color: var(--muted); line-height: 21px; flex: 1; }
.price { display: flex; align-items: baseline; gap: 9px; }
.price .now  { font-size: var(--fs-subhead); font-weight: 600; }
.price .was  { font-size: var(--fs-small); color: var(--muted); text-decoration: line-through; }
/* Rail price row: the struck former price is context, not a competing offer.
   A hairline makes the row read as the card's footer, and the struck value
   drops to micro so it cannot fight the real price. Scoped to the rail so the
   PDP buy column keeps its own .pdp .price treatment. */
#rail .price { gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
#rail .price .was { font-size: var(--fs-micro); }
.stock { font-size: var(--fs-micro); font-weight: 600; color: var(--sage); }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 30px;
}
.step .n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pine); color: var(--bone);
  display: grid; place-items: center;
  font-size: var(--fs-small); font-weight: 600; margin-bottom: 16px;
}
.step p { color: var(--muted); margin: 10px 0 0; font-size: var(--fs-small); line-height: 24px; }

/* ---------- table ---------- */
table.cmp {
  width: 100%; border-collapse: collapse;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; font-size: var(--fs-small);
}
table.cmp th, table.cmp td {
  padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border);
}
table.cmp caption {
  text-align: left; font-size: var(--fs-small); line-height: 20px;
  color: var(--muted); padding: 0 4px 12px;
}
table.cmp thead th { background: var(--pine); color: var(--bone); font-weight: 600; }
table.cmp tbody th { font-weight: 600; }
table.cmp tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ---------- faq ---------- */
.faq { max-width: var(--text); }
.faq details {
  border-bottom: 1px solid var(--border); padding: 20px 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-lead); list-style: none;
  display: flex; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--clay); font-size: var(--fs-subhead); line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq p { color: var(--muted); margin: 12px 0 0; line-height: 26px; }

/* ---------- PDP ---------- */
.pdp { padding: 44px 0 76px; }
.pdp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; }
@media (max-width: 980px) { .pdp-grid { grid-template-columns: 1fr; gap: 32px; } }
.gallery-main {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); display: grid; place-items: center; padding: 24px;
}
.gallery-main img { max-height: 460px; object-fit: contain; }
.thumbs { display: flex; gap: 12px; margin-top: 12px; }
.thumbs img {
  width: 84px; height: 84px; object-fit: contain; padding: 6px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
}
.thumbs img:hover { border-color: var(--clay); }
.pdp h1 { font-size: var(--fs-display-sm); line-height: 46px; }
@media (max-width: 900px) { .pdp h1 { font-size: var(--fs-headline); line-height: 36px; } }
.pdp .price { margin: 18px 0; }
.pdp .price .now { font-size: var(--fs-headline); }
.save {
  background: var(--oat); color: var(--clay); font-size: var(--fs-micro); font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
}
ul.bullets { padding-left: 0; list-style: none; margin: 22px 0; }
ul.bullets li {
  padding: 10px 0 10px 28px; position: relative;
  border-bottom: 1px solid var(--border); font-size: var(--fs-small); line-height: 23px;
}
ul.bullets li::before {
  content: ''; position: absolute; left: 4px; top: 18px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--clay);
}
.ship-note {
  background: var(--oat); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px; font-size: var(--fs-small); line-height: 22px; margin-top: 20px;
}
table.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-top: 12px; }
table.spec td,
table.spec th { padding: 12px 0; border-bottom: 1px solid var(--border); }
table.spec th { color: var(--muted); width: 42%; font-weight: 400; text-align: left; }

/* ---------- footer ---------- */
footer { background: var(--pine); color: var(--bone); padding: 56px 0 28px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
/* h3 is the correct level after the h2 sections; h4 kept in the selector so the
   pre-WP3 product-cap.html footer keeps its styling until reconciliation */
footer h3, footer .brand { color: var(--bone); }
footer h4 { margin: 0 0 14px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
footer a { display: block; text-decoration: none; opacity: .82; font-size: var(--fs-small); padding: 5px 0; }
footer a:hover { opacity: 1; }
footer .soon { display: block; opacity: .82; font-size: var(--fs-small); padding: 5px 0; }
.foot-note {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: 40px; padding-top: 22px;
  font-size: var(--fs-micro); line-height: 20px; opacity: .72; max-width: 900px;
}

/* ==========================================================================
   Nectar-fidelity modules
   Built to the module sequence measured from nectarsleep.com in NICHE-DNA.md:
   full-bleed photographic hero with a floating offer card, marquee ticker,
   4-up benefit tiles, dark interstitial banner, numbered construction
   accordion beside a product diagram, and chip-filtered horizontal carousel.
   Original palette throughout.
   ========================================================================== */

/* ---------- full-bleed hero ---------- */
.hero-bleed {
  position: relative; min-height: 620px;
  display: flex; align-items: center;
  background: var(--white);
  overflow: hidden;
}
.hero-bleed .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: 72% 30%;
  filter: none;
}
.hero-bleed .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.90) 0%, rgba(255,255,255,.74) 28%,
    rgba(255,255,255,.26) 55%, rgba(255,255,255,0) 100%);
}
.hero-bleed .wrap-lg { position: relative; padding-block: 56px; }
.hero-copy { max-width: 620px; }
.hero-kicker {
  color: var(--clay); font-size: var(--fs-subhead); font-weight: 600;
  letter-spacing: -.01em; margin: 0 0 6px;
}
.hero-bleed h1 { color: var(--pine); max-width: 12ch; }
.hero-badges {
  position: absolute; right: 0; top: 40px; text-align: center;
  color: var(--muted);
}
.hero-badges .lbl {
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  display: block; margin-bottom: 14px;
}
@media (max-width: 1100px) { .hero-badges { display: none; } }

/* floating offer card */
.offer-card {
  margin-top: 26px; max-width: 340px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px; box-shadow: var(--shadow);
}
.offer-card .lead {
  font-size: var(--fs-small); font-weight: 600; text-align: center; margin: 0 0 10px;
}
.countdown { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.countdown div {
  background: var(--pine); color: var(--bone);
  border-radius: 6px; padding: 7px 0; min-width: 58px; text-align: center;
}
.countdown b { display: block; font-size: var(--fs-lead); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: var(--fs-micro); letter-spacing: .1em; opacity: .8; }
.offer-card .btn { padding: 13px 20px; font-size: var(--fs-small); }
.offer-card .btn + .btn { margin-top: 8px; }
.stock-line {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; font-size: var(--fs-micro); font-weight: 600; color: var(--sage);
}
.stock-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.hero-from { color: var(--clay); font-size: var(--fs-subhead); font-weight: 600; margin-top: 22px; }

/* ---------- benefit tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  background: var(--oat); border-radius: var(--r);
  padding: 32px 20px; text-align: center;
}
.tile svg { width: 40px; height: 40px; margin: 0 auto 14px; display: block; }
.tile b { display: block; font-size: var(--fs-small); font-weight: 600; }
.tile a { font-size: var(--fs-micro); color: var(--clay); display: inline-block; margin-top: 6px; }

/* ---------- dark interstitial ---------- */
.interstitial {
  background: var(--pine); color: var(--bone);
  border-radius: var(--r); padding: 44px 32px; text-align: center;
}
.interstitial h2 { color: var(--bone); margin-bottom: 20px; }

/* ---------- construction accordion + diagram ---------- */
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .build-grid { grid-template-columns: 1fr; gap: 32px; } }
.layer {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border); padding: 0;
}
.layer summary {
  display: flex; align-items: center; gap: 14px; width: 100%;
  cursor: pointer; list-style: none; padding: 17px 0; font-weight: 600; font-size: var(--fs-lead);
}
.layer summary::-webkit-details-marker { display: none; }
.layer summary::after { content: '+'; margin-left: auto; color: var(--clay); font-size: var(--fs-subhead); }
.layer[open] summary::after { content: '\2212'; }
.layer .num {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--oat); color: var(--pine);
  display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 600;
}
.layer p { margin: 0 0 18px 40px; color: var(--muted); line-height: 25px; }
.build-img {
  background: var(--oat); border: 1px solid var(--border);
  border-radius: var(--r); padding: 30px;
}
.build-img img { width: 100%; height: 400px; object-fit: contain; }

/* ---------- chips + carousel ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.chip {
  border: 1px solid var(--border); background: var(--white);
  border-radius: var(--r-pill); padding: 8px 17px;
  font-size: var(--fs-small); font-weight: 500; cursor: pointer; color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--pine); color: var(--bone); border-color: var(--pine); }
.rail {
  display: flex; gap: 20px; overflow-x: auto; padding-bottom: 16px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
/* Cards run wider than the old 268px so six of them feel like a range, not a
   category grid. min() keeps 300px on desktop and hands mobile a card at 78%
   of the rail, which leaves the next card peeking as the scroll affordance. */
.rail > * { flex: 0 0 min(300px, 78%); scroll-snap-align: start; }
.rail-note { font-size: var(--fs-small); color: var(--muted); text-align: center; margin-top: 8px; }

/* ---------- sticky shop bar ---------- */
.sticky-shop {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 18px;
  width: min(760px, calc(100% - 48px));
  min-height: 72px;
  padding: 10px 12px 10px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--pine);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 32px));
  transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.sticky-shop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.sticky-shop-copy {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.sticky-shop-copy strong { font-size: var(--fs-body); }
.sticky-shop-copy span { font-size: var(--fs-small); opacity: .78; white-space: nowrap; }
.sticky-shop .btn { flex: none; padding: 12px 24px; }
.sticky-shop a:focus-visible { outline-color: var(--bone); }

@media (max-width: 640px) {
  .sticky-shop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-shop { transition: none; }
}

/* ---------- repeated comparison CTA ---------- */
section.band.cta-repeat-band { padding: 48px 0 104px; }

/* ---------- homepage module: lifestyle sequence ---------- */
.lifestyle-sequence {
  background: var(--white);
  border-top: 1px solid var(--border);
}
.lifestyle-intro {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr);
  gap: 20px 72px;
  align-items: end;
  padding-block: clamp(80px, 9vw, 132px);
}
.lifestyle-intro .section-label {
  grid-row: span 2;
  align-self: start;
  margin: 5px 0 0;
}
.section-label {
  color: var(--clay);
  font-size: var(--fs-micro);
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lifestyle-intro h2 {
  max-width: 16ch;
  font-size: clamp(var(--fs-headline), 4.2vw, var(--fs-display-sm));
  line-height: 1.02;
  letter-spacing: -.035em;
}
.lifestyle-intro > p:last-child {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 28px;
}
.lifestyle-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  min-height: clamp(520px, 43vw, 680px);
  background: var(--oat);
}
.lifestyle-row:nth-of-type(even) { background: var(--white); }
.lifestyle-row.is-reversed .lifestyle-photo { order: 2; }
.lifestyle-photo { min-height: 100%; overflow: hidden; }
.lifestyle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lifestyle-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(52px, 8vw, 124px);
}
.lifestyle-copy > span {
  color: var(--clay);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .08em;
}
.lifestyle-copy h3 {
  max-width: 11ch;
  font-size: clamp(var(--fs-title), 3.1vw, var(--fs-headline));
  line-height: 1.06;
  letter-spacing: -.03em;
}
.lifestyle-copy p {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 27px;
}
.lifestyle-copy a {
  color: var(--pine);
  font-size: var(--fs-small);
  font-weight: 600;
  text-underline-offset: 5px;
}

@media (max-width: 820px) {
  .lifestyle-intro {
    grid-template-columns: 1fr;
    align-items: start;
    padding-block: 72px;
  }
  .lifestyle-intro .section-label { grid-row: auto; }
  .lifestyle-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .lifestyle-row.is-reversed .lifestyle-photo { order: 0; }
  .lifestyle-photo { height: clamp(320px, 70vw, 520px); }
  .lifestyle-copy { min-height: 360px; padding: 48px 24px 60px; }
}

/* ---------- homepage module: day strip ---------- */
.day-strip {
  overflow: hidden;
  background: var(--pine);
  color: var(--bone);
  padding: clamp(88px, 9vw, 136px) 0 clamp(96px, 10vw, 148px);
}
.day-strip-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.day-strip .section-label { color: var(--bone); opacity: .72; margin: 0 0 18px; }
.day-strip h2 {
  max-width: 18ch;
  font-size: clamp(var(--fs-headline), 4vw, var(--fs-display-sm));
  line-height: 1.04;
  letter-spacing: -.035em;
}
.day-strip-head > p {
  max-width: 38ch;
  margin: 0;
  opacity: .76;
  font-size: var(--fs-lead);
  line-height: 27px;
}
.day-gallery {
  width: min(100% - 48px, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.day-gallery figure { margin: 0; min-width: 0; }
.day-gallery img {
  width: 100%;
  height: clamp(360px, 38vw, 540px);
  object-fit: cover;
}
.day-gallery figure:nth-child(even) img {
  height: clamp(320px, 33vw, 470px);
}
.day-gallery figcaption { padding-top: 18px; }
.day-gallery figcaption span {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .68;
}
.day-gallery h3 {
  max-width: 15ch;
  color: var(--bone);
  font-size: var(--fs-lead);
  line-height: 25px;
}

@media (max-width: 900px) {
  .day-strip-head { grid-template-columns: 1fr; align-items: start; }
  .day-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-gallery img,
  .day-gallery figure:nth-child(even) img { height: 420px; }
}

@media (max-width: 640px) {
  .day-gallery {
    width: 100%;
    grid-auto-flow: column;
    grid-auto-columns: 82vw;
    grid-template-columns: none;
    overflow-x: auto;
    padding: 0 24px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .day-gallery figure { scroll-snap-align: start; }
  .day-gallery img,
  .day-gallery figure:nth-child(even) img { height: 440px; }
}

/* ---------- homepage module: full-bleed image statement ---------- */
.image-statement {
  position: relative;
  min-height: clamp(660px, 58vw, 840px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--oat);
}
.image-statement > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.image-statement::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.82) 30%,
    rgba(255,255,255,.18) 62%,
    rgba(255,255,255,0) 100%);
}
.image-statement-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(64px, 8vw, 116px);
}
.image-statement-copy { max-width: 620px; }
.image-statement-copy .section-label { margin: 0 0 18px; }
.image-statement h2 {
  max-width: 15ch;
  color: var(--pine);
  font-size: clamp(var(--fs-headline), 5vw, var(--fs-display-sm));
  line-height: 1.01;
  letter-spacing: -.04em;
}
.image-statement .btn { margin-top: 32px; }

@media (max-width: 720px) {
  .image-statement {
    min-height: 720px;
    align-items: flex-end;
  }
  .image-statement > img { object-position: 62% center; }
  .image-statement::after {
    background: linear-gradient(0deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.90) 38%,
      rgba(255,255,255,.10) 76%,
      rgba(255,255,255,0) 100%);
  }
  .image-statement-inner { padding-block: 54px; }
}

/* ==========================================================================
   PDP blueprint modules (shared by all 8 product pages)
   Measured against the module sequence in .council/PDP-BLUEPRINT.md:
   breadcrumb, navy offer card with countdown, tabbed description, stacked
   format cards, spec medallions, alternating feature bands, returns
   interstitial, and the bundle upsell row. Palette tokens only; no green.
   ========================================================================== */

/* ---------- breadcrumb ---------- */
.crumbs { font-size: var(--fs-small); line-height: 20px; color: var(--muted); margin: 0 0 20px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.crumbs li + li::before { content: '\203A'; margin-right: 8px; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- navy offer card (buy column) ---------- */
.offer-navy {
  background: var(--pine); color: var(--bone);
  border-radius: var(--r); padding: 18px; margin: 0 0 22px;
}
.offer-navy .lead {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; margin: 0 0 10px; opacity: .85;
}
.offer-navy .countdown { margin-bottom: 10px; }
.offer-navy .countdown div { background: var(--pine-deep); }
.offer-navy .note { font-size: var(--fs-micro); line-height: 19px; text-align: center; opacity: .85; margin: 0; }

/* ---------- tabbed description ---------- */
.pdp-tabs { margin: 22px 0 4px; }
.tablist { display: flex; gap: 24px; border-bottom: 1px solid var(--border); }
.tablist button {
  background: none; border: 0; padding: 10px 2px; margin-bottom: -1px;
  font-size: var(--fs-small); font-weight: 600; font-family: inherit;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tablist button:hover { color: var(--pine); }
.tablist button[aria-selected="true"] { color: var(--pine); border-bottom-color: var(--clay); }
.tab-panel { padding: 14px 0 2px; font-size: var(--fs-small); line-height: 24px; color: var(--muted); }
.tab-panel p { margin: 0 0 10px; }
.tab-panel[hidden] { display: none; }

/* ---------- bundle upsell row ---------- */
.upsell {
  display: flex; align-items: center; gap: 16px;
  background: var(--oat); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 16px; margin: 20px 0;
}
.upsell img {
  width: 64px; height: 64px; object-fit: contain; flex: none;
  background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 4px;
}
.upsell .u-copy { flex: 1; font-size: var(--fs-small); line-height: 21px; color: var(--muted); }
.upsell .u-copy b { display: block; font-size: var(--fs-small); color: var(--ink); }
.upsell .u-price { white-space: nowrap; font-size: var(--fs-small); font-weight: 600; }
.upsell .u-price .was { font-size: var(--fs-small); color: var(--muted); text-decoration: line-through; font-weight: 400; margin-right: 6px; }
.upsell .u-link { white-space: nowrap; font-size: var(--fs-small); font-weight: 600; color: var(--clay); }
@media (max-width: 560px) { .upsell { flex-wrap: wrap; } }

/* ---------- find-your-format stacked cards ---------- */
.tier-list { display: grid; gap: 14px; }
.tier {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 24px; align-items: center;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 20px; text-decoration: none; color: inherit;
}
.tier.current { border-color: var(--clay); }
.tier-thumb {
  width: 132px; height: 100px; background: var(--oat); border-radius: 6px;
  display: grid; place-items: center; overflow: hidden;
}
.tier-thumb img { max-height: 88px; max-width: 116px; width: auto; object-fit: contain; }
.tier h3 { font-size: var(--fs-lead); line-height: 22px; }
.tier-flag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  background: var(--clay); color: var(--white);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill);
}
.check-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.check-list li { font-size: var(--fs-small); line-height: 20px; color: var(--muted); padding-left: 20px; position: relative; }
.check-list li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--clay); font-weight: 700;
}
.tier-price { text-align: right; white-space: nowrap; }
.tier-price .now { display: block; font-size: var(--fs-subhead); font-weight: 600; }
.tier-price .was { display: block; font-size: var(--fs-small); color: var(--muted); text-decoration: line-through; }
.tier-price .u-link { display: inline-block; margin-top: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--clay); }
@media (max-width: 760px) {
  .tier { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .tier-thumb { width: 96px; height: 80px; }
  .tier-thumb img { max-height: 68px; max-width: 84px; }
  .tier-price { grid-column: 2; text-align: left; }
  .tier-price .now, .tier-price .was { display: inline; margin-right: 8px; }
}

/* ---------- spec medallions ---------- */
.medals { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.medal {
  width: 180px; height: 180px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white);
  display: grid; place-items: center; text-align: center;
}
.medal b { display: block; font-size: var(--fs-headline); line-height: 38px; color: var(--pine); letter-spacing: -.01em; }
.medal span { display: block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; color: var(--muted); margin-top: 6px; }
@media (max-width: 700px) { .medals { gap: 20px; } .medal { width: 150px; height: 150px; } .medal b { font-size: var(--fs-headline); line-height: 32px; } }

/* ---------- alternating feature bands ---------- */
.feature-img {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); background: var(--oat);
}
.feature-img img { width: 100%; height: 340px; object-fit: cover; display: block; }
.build-grid.flip .feature-img { order: 2; }
.feature-copy p { color: var(--muted); font-size: var(--fs-lead); line-height: 27px; margin: 14px 0 0; max-width: 46ch; }
/* the seven benefit bands run tighter than generic sections so the page
   stays inside the blueprint's 9,000 to 11,000px band */
section.band:has(> .wrap > .build-grid > .feature-img) { padding: 60px 0; }
@media (max-width: 980px) {
  .build-grid.flip .feature-img { order: 0; }
  .feature-img img { height: 300px; }
}

/* ---------- construction accordion open-state fix ----------
   .layer is display:flex, which lays an open details out as a row (summary
   squeezed beside its own paragraph). Block restores the standard accordion
   stack: full-width summary, paragraph below. Closed items are unaffected. */
.layer { display: block; }

/* ---------- interstitial with copy line ---------- */
.interstitial p { max-width: 52ch; margin: 0 auto 22px; opacity: .88; font-size: var(--fs-body); line-height: 26px; }
/* interstitials sit on dark pine, so the clay focus ring fails the 3:1 bar there */
.interstitial a:focus-visible, .interstitial button:focus-visible { outline-color: var(--bone); }

/* ---------- support band links ---------- */
.step a { color: var(--clay); font-weight: 600; text-decoration: none; }
.step a:hover { text-decoration: underline; }


/* ================= PDP buy column: mirrors Nectar's module grammar =================
   Reference: dna/NECTAR-PDP-EXACT.md + dna/view-00..03.png.
   Grammar borrowed: fully-pill CTAs, selected state = blue border + pale-blue fill, a struck
   "regular" figure beside every option, and one pale-blue panel wrapping the add-on
   decisions together with the primary CTA. */

.pdp-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 468px; gap: 44px; align-items: start; }
@media (max-width: 1080px) { .pdp-grid-2 { grid-template-columns: 1fr; gap: 32px; } }

/* ---- gallery: vertical thumb rail to the LEFT of the main image ----
   Nectar pins the gallery while the buy column scrolls past it; without this the left
   column goes blank for most of the page. */
.pdp-col-gal { position: sticky; top: 24px; align-self: start; }
@media (max-width: 1080px) { .pdp-col-gal { position: static; } }
/* Main image on top, thumbnails as a horizontal scroller beneath it. The markup still
   lists the rail first, so order swaps it rather than restructuring every page. */
.gal { display: flex; flex-direction: column; gap: 12px; }
.gal-main { order: 1; background: var(--oat); border-radius: var(--r); overflow: hidden; position: relative; }
.gal-main img { width: 100%; height: 560px; object-fit: cover; display: block; }
.gal-rail {
  order: 2; display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: thin;
}
.gal-rail::-webkit-scrollbar { height: 6px; }
.gal-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.gal-rail button {
  padding: 0; border: 1px solid var(--border); background: var(--oat);
  border-radius: 6px; overflow: hidden; cursor: pointer;
  flex: none; width: 92px; aspect-ratio: 1 / 1; scroll-snap-align: start;
}
.gal-rail button[aria-pressed="true"] { border: 2px solid var(--clay); }
.gal-rail img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .gal-main img { height: 340px; }
  .gal-rail button { width: 72px; }
}
.gal-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  text-align: center; margin: 26px 0 0;
}
.gal-trust div { font-size: var(--fs-small); font-weight: 500; line-height: 18px; }
.gal-trust svg { width: 30px; height: 30px; margin: 0 auto 8px; display: block; color: var(--clay); }
.gal-note { margin: 16px 0 0; font-size: var(--fs-micro); color: var(--muted); }

/* ---- section label rows ---- */
.pick-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 22px 0 8px;
}
.pick-label { font-size: var(--fs-small); font-weight: 600; }
.pick-head a { font-size: var(--fs-small); color: var(--clay); text-decoration: underline; }

/* ---- selected-device summary row (Nectar's Select Size row) ---- */
.size-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 15px 16px; cursor: pointer; text-align: left; font: inherit;
}
.size-row:hover { border-color: var(--clay); }
.sr-name { font-size: var(--fs-lead); font-weight: 500; flex: 1; }
.sr-value { font-size: var(--fs-micro); color: var(--wine); }
.sr-now { font-size: var(--fs-lead); font-weight: 600; color: var(--clay); }
.sr-chev {
  width: 9px; height: 9px; flex: none; margin-left: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}

/* ---- format segmented control ---- */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg-btn {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 10px; cursor: pointer; text-align: center; font: inherit;
}
.seg-btn b { display: block; font-size: var(--fs-small); }
.seg-btn span { display: block; font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.seg-btn[aria-selected="true"] {
  border: 2px solid var(--clay); background: var(--cream); padding: 11px 9px;
}
.seg-btn[aria-selected="true"] b { color: var(--clay); }

/* ---- stacked tier cards ---- */
.tier-stack { display: grid; gap: 12px; }
.tier2 {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: stretch;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: inherit;
}
.tier2.current { border: 2px solid var(--clay); background: var(--cream); }
.tier-pane { position: relative; display: grid; place-items: center; padding: 14px; }
.tier-pane img { max-width: 100%; max-height: 118px; width: auto; object-fit: contain; }
.tier-ribbon {
  position: absolute; top: 10px; left: 10px; background: var(--white); color: var(--ink);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px; box-shadow: var(--shadow);
}
.tier-badge {
  position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .88);
  color: var(--ink); font-size: var(--fs-micro); font-weight: 600; padding: 3px 7px; border-radius: 3px;
}
.tier-body { padding: 16px 18px; display: flex; flex-direction: column; }
.tier-body > b { font-size: var(--fs-lead); line-height: 22px; }
.tier-body .check-list { margin: 9px 0 0; display: block; }
.tier-body .check-list li { margin-bottom: 3px; font-size: var(--fs-small); }
.tier-foot-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.tier-now { font-size: var(--fs-lead); font-weight: 600; }
.tier-radio {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border);
  flex: none; position: relative;
}
.tier2.current .tier-radio { border-color: var(--clay); }
.tier2.current .tier-radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--clay);
}
.tier-foot { margin: 10px 0 0; font-size: var(--fs-micro); color: var(--clay); text-align: right; }
@media (max-width: 560px) {
  .tier2 { grid-template-columns: 128px minmax(0, 1fr); }
  .tier-pane img { max-height: 84px; }
  .tier-body { padding: 13px 14px; }
}

/* ---- the pale-blue add-on panel ---- */
.addon-panel {
  background: var(--cream); border: 1px solid var(--sand); border-radius: 12px;
  padding: 16px; margin: 22px 0 0;
}
.sw-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 13px 14px;
}
.sw-row input.sw { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track {
  width: 40px; height: 22px; border-radius: 200px; background: var(--stone);
  flex: none; position: relative; transition: background .15s ease;
}
.sw-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow); transition: transform .15s ease;
}
.sw-row input.sw:checked + .sw-track { background: var(--clay); }
.sw-row input.sw:checked + .sw-track .sw-knob { transform: translateX(18px); }
.sw-row input.sw:focus-visible + .sw-track { outline: 2px solid var(--clay); outline-offset: 2px; }
.sw-label { flex: 1; font-size: var(--fs-small); font-weight: 500; color: var(--clay); }
.sw-price { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.sw-price .was { font-size: var(--fs-small); font-weight: 400; color: var(--muted); text-decoration: line-through; margin-right: 6px; }
.sw-row-kit.is-on { border: 2px solid var(--clay); padding: 12px 13px; }

.kit-flag {
  display: inline-block; position: relative; margin: 16px 0 9px;
  background: var(--pine); color: var(--bone);
  font-size: var(--fs-micro); font-weight: 600; padding: 6px 11px; border-radius: 5px;
}
.kit-flag::after {
  content: ''; position: absolute; left: 18px; bottom: -5px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid var(--pine);
}
.kit-items {
  display: none; align-items: stretch; gap: 6px; margin-top: 10px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 12px;
}
.kit-items.is-on { display: flex; }
.kit-item { flex: 1; text-align: center; min-width: 0; }
.kit-item img { width: 100%; height: 54px; object-fit: contain; display: block; margin-bottom: 6px; }
.kit-item b { display: block; font-size: var(--fs-micro); line-height: 16px; }
.kit-item span { display: block; font-size: var(--fs-micro); color: var(--muted); }
.kit-plus { align-self: center; color: var(--clay); font-weight: 700; flex: none; }

.btn-atc { margin-top: 14px; border-radius: var(--r-pill); padding: 17px 34px; font-size: var(--fs-lead); }
.btn-outline {
  background: transparent; color: var(--clay); border: 1px solid var(--clay);
  border-radius: var(--r-pill);
}
.btn-outline:hover { background: var(--clay); color: var(--white); }

.whole { margin-top: 12px; }
.whole-head {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--white); border: 1px solid var(--clay); border-radius: var(--r);
  color: var(--clay); font: inherit; font-weight: 600; font-size: var(--fs-small);
  padding: 15px 16px; cursor: pointer;
}
.whole.is-open .whole-head { border-radius: var(--r) var(--r) 0 0; }
.whole-head .sr-chev { border-color: var(--clay); }
.whole-body {
  background: var(--white); border: 1px solid var(--clay); border-top: 0;
  border-radius: 0 0 var(--r) var(--r); padding: 14px;
}
.whole-items { display: flex; gap: 8px; }
.whole-item { flex: 1; text-align: center; min-width: 0; }
.whole-item img { width: 100%; height: 46px; object-fit: contain; display: block; margin-bottom: 5px; }
.whole-item b { display: block; font-size: var(--fs-micro); line-height: 15px; }
.whole-item span { display: block; font-size: var(--fs-micro); color: var(--sage); font-weight: 600; }
.whole-price {
  margin: 14px 0 12px; font-size: var(--fs-lead); font-weight: 600;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.whole-price > span { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.whole-badge {
  background: var(--sage-tint); color: var(--sage) !important; font-size: var(--fs-micro) !important;
  font-weight: 700 !important; letter-spacing: .05em; padding: 4px 9px; border-radius: 3px;
}
.stock { margin: 14px 0 0; font-size: var(--fs-small); display: flex; align-items: center; gap: 9px; }
.stock b { letter-spacing: .04em; }
.stock svg { width: 22px; height: 22px; flex: none; color: var(--ink); }

/* ---- compare card ---- */
.quiz-card {
  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--r);
  padding: 18px; margin-top: 16px; text-align: center;
}
.quiz-card b { font-size: var(--fs-body); }
.quiz-card p { margin: 6px 0 0; font-size: var(--fs-small); line-height: 21px; color: var(--muted); }
.quiz-card a { color: var(--clay); text-decoration: underline; font-weight: 600; }

/* ---- cross-sell rows with value pills ---- */
.rule-head {
  display: flex; align-items: center; gap: 14px; margin: 26px 0 12px;
  font-size: var(--fs-small); font-weight: 600;
}
.rule-head::before, .rule-head::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.base-rows { display: grid; gap: 10px; }
.base-row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 13px; align-items: center;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px;
}
.base-thumb { width: 62px; height: 48px; background: var(--oat); border-radius: 5px; display: grid; place-items: center; overflow: hidden; }
.base-thumb img { max-height: 42px; max-width: 54px; object-fit: contain; }
.base-main b { display: block; font-size: var(--fs-small); line-height: 20px; }
.base-price { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--clay); margin-top: 3px; }
.val-pill {
  background: var(--oat); color: var(--muted); font-size: var(--fs-micro); font-weight: 500;
  padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.add-pill {
  background: transparent; border: 1px solid var(--clay); color: var(--clay);
  border-radius: var(--r-pill); font: inherit; font-weight: 600; font-size: var(--fs-small);
  padding: 9px 20px; cursor: pointer; white-space: nowrap;
}
.add-pill:hover { background: var(--clay); color: var(--white); }
.add-pill.is-added { background: var(--sage); border-color: var(--sage); color: var(--white); }

/* ---- sticky sub-nav: summary row + anchor tabs ---- */
.subnav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 70;
  background: var(--white); box-shadow: rgba(0, 0, 0, .10) 0 2px 14px;
  visibility: hidden; pointer-events: none;
  transform: translateY(-101%);
  transition: transform .22s cubic-bezier(.25, 1, .5, 1), visibility 0s .22s;
}
.subnav.is-visible {
  visibility: visible; pointer-events: auto;
  transform: translateY(0); transition-delay: 0s;
}
.subnav-top .wrap-lg { display: flex; align-items: center; gap: 18px; padding-block: 10px; }
.ss-id { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.ss-id img { width: 42px; height: 34px; object-fit: contain; background: var(--oat); border-radius: 4px; flex: none; }
.ss-id b { font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-id span { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.ss-price { font-size: var(--fs-lead); font-weight: 600; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ss-price .was { font-size: var(--fs-small); font-weight: 400; color: var(--muted); text-decoration: line-through; }
.ss-save { font-size: var(--fs-micro); font-weight: 600; color: var(--sage); }
.subnav .btn { padding: 12px 26px; border-radius: var(--r-pill); flex: none; }
.subnav-tabs { border-top: 1px solid var(--border); }
.subnav-tabs .wrap-lg { display: flex; gap: 26px; align-items: stretch; overflow-x: auto; padding-block: 0; }
.subnav-tabs a {
  padding-block: 11px 9px; border-bottom: 2px solid transparent;
  font-size: var(--fs-small); color: var(--muted); text-decoration: none; white-space: nowrap;
}
.subnav-tabs a:hover { color: var(--ink); }
.subnav-tabs a.is-active,
.subnav-tabs a[aria-current="location"] {
  color: var(--pine); border-bottom-color: var(--clay);
}
@media (max-width: 760px) {
  .subnav-tabs { display: none; }
  .ss-price { display: none; }
}
@media (prefers-reduced-motion: reduce) { .subnav { transition: none; } }

/* ---- "we think you'll like" carousel ---- */
.like-head { font-size: var(--fs-headline); margin: 0 0 22px; }
.like-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(276px, 1fr);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 18px; scrollbar-width: none;
}
.like-rail::-webkit-scrollbar { display: none; }
.like-card { scroll-snap-align: start; text-decoration: none; color: inherit; }
.like-img {
  display: grid; place-items: center; height: 250px; border-radius: var(--r);
  overflow: hidden; margin-bottom: 14px;
}
.like-img img { max-height: 200px; max-width: 84%; object-fit: contain; }
.like-card b { display: block; font-size: var(--fs-body); line-height: 22px; }
.like-price { display: flex; align-items: center; gap: 9px; font-size: var(--fs-body); font-weight: 600; margin-top: 5px; }
.like-bar { height: 3px; background: var(--border); border-radius: 3px; overflow: hidden; }
.like-bar span { display: block; height: 100%; width: 18%; background: var(--pine); border-radius: 3px; }

/* ---- placement selector (multi-placement products, e.g. the Band) ---- */
.place { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.place-btn {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 7px 5px 8px; cursor: pointer; font: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.place-btn span:last-child { font-size: var(--fs-micro); font-weight: 500; line-height: 15px; }
.place-thumb {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 5px; overflow: hidden;
  background: var(--oat); display: block;
}
.place-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-btn:hover { border-color: var(--clay); }
.place-btn[aria-selected="true"] {
  border: 2px solid var(--clay); background: var(--cream); padding: 6px 4px 7px;
}
.place-btn[aria-selected="true"] span:last-child { color: var(--clay-dark); font-weight: 600; }
.place-copy {
  margin: 12px 0 0; font-size: var(--fs-small); line-height: 21px; color: var(--muted);
  min-height: 42px;
}
@media (max-width: 560px) {
  .place { grid-template-columns: repeat(3, 1fr); }
}

/* ---- above-the-fold CTA (mirrors the main Add to Cart further down) ---- */
.btn-atc-top { margin-top: 18px; }
.atc-top-note {
  margin: 9px 0 0; text-align: center; font-size: var(--fs-micro); color: var(--muted);
}

/* ================= mobile ==================================================
   Root cause of the horizontal scroll on product pages: the buy grid used
   `grid-template-columns: 1fr`, which is `minmax(auto, 1fr)`. The `auto` floor
   means a column can never be narrower than its content's min-content width, and
   the horizontal thumbnail scroller's min-content is the sum of its fixed-width
   thumbs (9 x 92px on the Band). That forced the column, and the page, to
   ~750px inside a 390px viewport. Fix: `minmax(0, 1fr)` plus `min-width: 0` on
   the flex/grid descendants so the scroller is allowed to be the thing that
   scrolls. Everything below it is sizing and tap-target work. */

.pdp-grid-2 > * { min-width: 0; }
.pdp-col-gal, .gal, .gal-main, .gal-rail { min-width: 0; max-width: 100%; }

@media (max-width: 1080px) {
  .pdp-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* the long PDP needs tighter vertical rhythm on a phone */
  section.band { padding: 44px 0; }
  .section-head { margin-bottom: 26px; }
  .pdp { padding-top: 8px; }

  .gal-main img { height: 300px; }
  .gal-note, .tier-foot { font-size: var(--fs-micro); }

  /* trust icons: 3 across is too tight at 390 */
  .gal-trust { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
  .gal-trust div { font-size: var(--fs-micro); line-height: 16px; }
  .gal-trust svg { width: 26px; height: 26px; margin-bottom: 6px; }

  /* offer card + countdown were overflowing their own column */
  .offer-navy { padding: 14px; }
  .countdown { flex-wrap: wrap; gap: 5px; }
  .countdown div { min-width: 58px; padding: 7px 4px; }
  .countdown b { font-size: var(--fs-lead); }

  /* buy column controls */
  .size-row { flex-wrap: wrap; gap: 6px 10px; }
  .sr-name { flex: 1 1 100%; }
  .seg-btn { padding: 11px 8px; }
  .btn-atc { padding: 16px 20px; font-size: var(--fs-body); }

  /* add-on rows: keep price on its own line rather than squeezing the label */
  .sw-row { flex-wrap: wrap; row-gap: 6px; }
  .sw-label { flex: 1 1 auto; font-size: var(--fs-small); }
  .kit-items { flex-wrap: wrap; gap: 10px; }
  .kit-item { flex: 1 1 28%; min-width: 84px; }
  .kit-item span, .whole-item span, .val-pill, .tier-badge { font-size: var(--fs-micro); }
  .kit-plus { display: none; }
  .whole-items { flex-wrap: wrap; }
  .whole-item { flex: 1 1 40%; }

  /* cross-sell rows: stack the Add button under the product on narrow screens */
  .base-row { grid-template-columns: 52px minmax(0, 1fr); row-gap: 10px; }
  .base-thumb { width: 52px; height: 42px; }
  .add-pill { grid-column: 2; justify-self: start; padding: 10px 22px; }

  /* placement selector */
  .place { gap: 6px; }
  .place-btn span:last-child { font-size: var(--fs-micro); }
  .place-copy { font-size: var(--fs-small); line-height: 20px; min-height: 0; }

  /* tap targets: these were 17-24px tall */
  .rotator button { min-width: 44px; min-height: 44px; font-size: var(--fs-lead); }
  .utility .wrap-lg { min-height: 44px; }
  .crumbs { font-size: var(--fs-small); }
  .crumbs ol { gap: 4px 10px; }
  .crumbs a { display: inline-block; padding: 8px 0; }
  .crumbs li + li::before { margin-right: 10px; }
  .faq summary { padding-block: 16px; }
  .pick-head a, .quiz-card a { display: inline-block; padding: 6px 0; }

  /* the like-rail cards were wider than the screen */
  .like-rail { grid-auto-columns: minmax(232px, 1fr); gap: 14px; }
  .like-img { height: 200px; }
  .like-head { font-size: var(--fs-title); margin-bottom: 16px; }

  /* spec medallions */
  .medals { gap: 20px; }
  .medal { width: 136px; height: 136px; }
  .medal b { font-size: var(--fs-title); line-height: 30px; }
}

@media (max-width: 420px) {
  .gal-rail button { width: 66px; }
  .place { grid-template-columns: repeat(3, 1fr); }
  .countdown div { min-width: 52px; }
  .whole-price { font-size: var(--fs-lead); }
  /* sticky bar: keep the button reachable without crushing the name */
  .subnav-top .wrap-lg { gap: 10px; }
  .subnav .btn { padding: 12px 16px; font-size: var(--fs-small); }
  .ss-id img { display: none; }
}

@media (max-width: 760px) {
  /* 9px countdown labels were the one genuinely unreadable size; short uppercase
     micro-labels (ribbons, nav tag) stay small on purpose, which is genre-normal. */
  .countdown span { font-size: var(--fs-micro); }
  .whole-badge { font-size: var(--fs-micro) !important; }
  .tier-ribbon { font-size: var(--fs-micro); }

  /* last tap targets: the wordmark and standalone links that are a whole paragraph */
  .brand { display: inline-block; padding: 10px 0; }
  .step p a, .interstitial a:not(.btn) { display: inline-block; padding: 7px 0; }
}

@media (max-width: 560px) {
  /* label + sub-label were colliding side by side; stack them */
  .pick-head { flex-wrap: wrap; row-gap: 2px; }
  .pick-head .pick-sub { flex: 1 1 100%; }
}

/* ================= mobile: get the CTA above the fold ======================
   On a 390x844 phone the stacked layout put Add to Cart at ~1350px. Reordering so the
   buy stack comes straight after the H1, and pushing the description tabs, trust icons
   and rendering note below it, lands the CTA around 770px, above the fold without
   hiding anything or shrinking the hero into uselessness. */
@media (max-width: 1080px) {
  .pdp-grid-2 { display: flex; flex-direction: column; gap: 0; }
  /* let the gallery's children participate directly in the column ordering */
  .pdp-col-gal { display: contents; }
  .gal { order: 1; margin-bottom: 14px; }
  .pdp-grid-2 > div:not(.pdp-col-gal) { order: 2; display: flex; flex-direction: column; }
  .gal-trust { order: 3; margin-top: 30px; }
  .gal-note { order: 4; }

  /* inside the buy column: offer, title, buy stack, then the description */
  .pdp-grid-2 > div:not(.pdp-col-gal) > .offer-navy { order: 1; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > h1 { order: 2; margin: 16px 0 4px; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > #pdp-buy { order: 3; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > .pdp-tabs { order: 5; margin-top: 26px; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > * { order: 6; }
}

@media (max-width: 760px) {
  /* reclaim vertical space above the CTA */
  .gal-main img { height: 250px; }
  .offer-navy { padding: 12px; }
  .offer-navy .lead { margin-bottom: 8px; }
  .offer-navy .countdown { margin-bottom: 8px; }
  .countdown div { padding: 6px 4px; }
  .pick-head { margin: 14px 0 7px; }
  .btn-atc-top { margin-top: 12px; }
  /* the selected-device row is the first thing under the title, keep it compact */
  .size-row { padding: 12px 14px; }
}

@media (max-width: 760px) {
  /* Getting Add to Cart above an 844px fold. The hidden labels and note repeat
     information already visible in the selected-device row and CTA. */
  #pdp-buy > .pick-head:first-child { display: none; }
  .offer-navy .note { display: none; }
  .offer-navy .countdown { margin-bottom: 0; }
  .gal-main img { height: 240px; }
  .crumbs { margin-bottom: 12px; font-size: var(--fs-micro); }
  .pdp-grid-2 > div:not(.pdp-col-gal) > h1 { margin: 12px 0 2px; }
  .size-row { margin-top: 8px; }
}

/* ================= bigger, uncropped hero =================================
   The hero was a fixed-height box with object-fit: cover. Product shots are square
   (1600x1600), so a 342x240 mobile box was throwing away 30% of the image; that is
   the "squished" look. Desktop was only losing 4% but was needlessly small.
   Now the box carries a 1:1 aspect ratio to match the source, so nothing is cropped,
   and the PDP container is wider with a slightly narrower buy column so the image
   gets the space. Placement shots are 4:3 and lose a little from the sides, which is
   the right trade: those are lifestyle frames, not product truth. */
.pdp .wrap { max-width: 1240px; }
.pdp-grid-2 { grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; }
.gal-main { aspect-ratio: 1 / 1; }
.gal-main img { height: 100%; }

@media (max-width: 1080px) {
  .pdp-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* full-width square hero: 342x342 on a 390 phone, zero crop, up from 342x240 */
  .gal-main { aspect-ratio: 1 / 1; }
  .gal-main img { height: 100%; }
  /* the extra hero height has to come from somewhere: the offer card moves below the
     buy stack on mobile so Add to Cart still lands inside the first screen. The
     countdown is still on the page, and the sticky bar carries a persistent CTA. */
  .pdp-grid-2 > div:not(.pdp-col-gal) > .offer-navy { order: 5; margin-top: 26px; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > .pdp-tabs { order: 6; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > * { order: 7; }
  .gal-rail button { width: 78px; }
}

@media (max-width: 760px) {
  /* the taller square hero costs ~100px, so tighten the gaps around it to keep
     Add to Cart inside the first screen */
  .gal { margin-bottom: 10px; }
  .gal-rail { gap: 8px; padding-bottom: 2px; }
  .gal-rail button { width: 64px; }
  .crumbs { margin-bottom: 6px; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > h1 { margin: 8px 0 2px; }
  .size-row { margin-top: 4px; }
  .btn-atc-top { margin-top: 10px; }
}

/* ---------- brand lockup: inline mark + wordmark ----------
   The mark is inline SVG using currentColor, so the same markup reads charcoal in the nav
   and white in the footer with no second asset and no extra request. */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mark { width: 1em; height: 1em; flex: none; }
footer .brand { gap: 10px; }
@media (max-width: 420px) { .brand { gap: 7px; } }

/* ---------- brand typography ----------
   Three families, three jobs. Erode is the display voice on every h1/h2/h3,
   Switzer stays the body and UI face, and Bespoke Serif is caged to the
   wordmark (the logo lockup) at weight 700 only, the one weight it needs.
   The name also carries the serif inline via .brandname, so every mention of
   Sanamere reads as the brand rather than as ordinary body text. */
.brand { font-family: 'Bespoke Serif', Georgia, serif; font-weight: 700; letter-spacing: -.02em; }

.brandname {
  font-family: 'Bespoke Serif', Georgia, serif;
  font-weight: 700;
  font-size: 1.03em;   /* the serif runs optically smaller than Switzer at the same size */
  letter-spacing: -.005em;
}
/* inside already-bold contexts the serif should match, not fight */
h1 .brandname, h2 .brandname, h3 .brandname,
.tier-body b .brandname, .pick-main b .brandname,
.card-title .brandname, .sr-name .brandname, .ss-id b .brandname {
  font-weight: 700;
  font-size: 1.02em;
}
/* the footer disclaimer is small print; keep the inline name at text size */
.foot-note .brandname { font-size: 1em; font-weight: 700; }

/* ---------- one consistent lockup for every brand instance ----------
   Every mention of the name now carries the same three parts: the mark, the name in
   lowercase, and the trademark symbol. The mark is applied as a CSS mask filled with
   currentColor rather than inline SVG, so it needs no markup change, inherits the
   surrounding text colour, and scales with font-size.

   Note on the symbol: ™ is correct here and ® would not be. ™ asserts an unregistered
   mark, which is exactly the position: there is no trademark filing. ® would be a false
   claim of registration. */
:root {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='11'%3E%3Ccircle cx='24' cy='24' r='15.5'/%3E%3Cpath d='M12.69 12.69L7.03 7.03' stroke-width='9.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.brandname {
  text-transform: lowercase;
  white-space: nowrap;
}
.brandname::before {
  content: '';
  display: inline-block;
  width: .78em;
  height: .78em;
  margin-right: .24em;
  vertical-align: -.05em;
  background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
/* the symbol rides high and small, set in the UI face so it never competes with the serif */
.nav .brand > span::after {
  content: '\2122';
  font-family: 'Switzer', Arial, sans-serif;
  font-weight: 500;
  font-size: .5em;
  line-height: 1;
  vertical-align: .62em;
  margin-left: .1em;
  letter-spacing: 0;
  text-transform: none;
}
/* the nav and footer lockups already carry a real inline SVG mark, so they only need the symbol */
.brand { text-transform: lowercase; }

/* ================= polish pass, from the mobile-to-mobile Nectar diff =================
   Reference: tmp/nmob/n00-n01.png against tmp/mwalk/w00-w05.png. */

/* ---- offer card: eyebrow + headline left, countdown inset right ---- */
.offer-navy {
  display: flex; align-items: center; gap: 22px;
}
.offer-copy { flex: 1; min-width: 0; text-align: left; }
.offer-eyebrow {
  display: block; color: var(--amber); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px;
}
.offer-head { margin: 0 0 8px; font-size: var(--fs-lead); line-height: 25px; font-weight: 700; }
.offer-copy .note, .offer-cd .note { text-align: left; margin: 8px 0 0; }
.offer-cd { flex: none; }
.offer-cd .countdown {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px; padding: 10px 12px; margin: 0;
}
.offer-cd .countdown div { background: transparent; padding: 0 8px; min-width: 0; }
.offer-cd .note { text-align: center; }
@media (max-width: 900px) {
  .offer-navy { flex-direction: column; align-items: stretch; gap: 12px; }
  .offer-cd .countdown { justify-content: space-around; }
}
@media (max-width: 760px) {
  /* Nectar runs the offer band edge to edge on mobile */
  .pdp .offer-navy { padding: 16px 18px; }
}

/* ---- breadcrumbs: the all-caps micro treatment ---- */
.crumbs { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; }
.crumbs a { text-decoration: underline; text-underline-offset: 2px; }
.crumbs .brandname { text-transform: lowercase; font-size: 1.15em; }

/* ---- tier cards: images fill the pane, selected card floods with tint ---- */
.tier-pane img { max-height: none; max-width: 86%; height: auto; }
.tier2.current { background: var(--cream); }

/* ---- selected-device row: give the price Nectar's weight ---- */
.sr-now { font-size: var(--fs-subhead); }

/* ---- section labels in the buy column were timid ---- */
.pick-label { font-size: var(--fs-lead); }
.pick-head .pick-sub { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }

/* ---- placement selector: horizontal scroll instead of a 3+2 grid with a hole ---- */
@media (max-width: 560px) {
  .place { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

/* ---- cross-sell rows: pill sits right, not stranded under the price ---- */
@media (max-width: 760px) {
  .base-row { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; }
  .add-pill { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  .sw-price { margin-left: auto; }
}

/* ---- kill the dead zones around the trust icons on mobile ---- */
@media (max-width: 760px) {
  .gal-trust { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
  .gal-note { margin-top: 10px; }
  .pdp { padding-bottom: 10px; }
  .pdp + .band { padding-top: 30px; }
}

/* ---- restrained interaction response ---- */
.card, a.tier, a.tier2, .like-card .like-img, .base-row, .addon-panel, .quiz-card {
  transition:
    box-shadow .18s cubic-bezier(.2, .8, .2, 1),
    transform .18s cubic-bezier(.2, .8, .2, 1),
    border-color .15s ease;
}
.card:hover, a.tier:hover, a.tier2:hover, .like-card:hover .like-img {
  transform: translateY(-2px);
  border-color: var(--tan);
  box-shadow: rgba(35, 29, 23, .12) 0 10px 24px;
}
.btn {
  transition:
    background .15s ease,
    transform .14s cubic-bezier(.2, .8, .2, 1),
    box-shadow .15s ease;
}
.btn:hover {
  background: var(--clay-dark);
  transform: translateY(-1px);
  box-shadow: rgba(35, 29, 23, .16) 0 5px 14px;
}
.btn-ghost:hover { background: var(--pine); }
.btn:active { transform: translateY(0); box-shadow: none; }
.add-pill, .place-btn, .seg-btn, .q-opt, .chip,
.nav-cta, .size-row, .whole-head {
  transition:
    border-color .14s ease,
    background .14s ease,
    color .14s ease,
    transform .14s cubic-bezier(.2, .8, .2, 1);
}
.add-pill:hover, .place-btn:hover, .seg-btn:hover, .q-opt:hover, .chip:hover,
.nav-cta:hover, .size-row:hover, .whole-head:hover {
  transform: translateY(-1px);
}
.nav-links a, .nav-icons a, .subnav-tabs a {
  display: inline-block;
  transition:
    color .14s ease,
    opacity .14s ease,
    border-color .14s ease,
    transform .14s cubic-bezier(.2, .8, .2, 1);
}
.nav-links a:hover, .nav-icons a:hover, .subnav-tabs a:hover {
  transform: translateY(-1px);
}
.chip:hover { border-color: var(--clay); }

/* ---- the three-numbers band goes full charcoal, Nectar's stat-band pattern ---- */
.medals-band { background: var(--pine); color: var(--bone); }
.medals-band .section-head { max-width: none; text-align: center; margin-bottom: 34px; }
.medals-band .section-head p { color: rgba(255, 255, 255, .72); }
.medals-band .medal { background: transparent; border-color: rgba(255, 255, 255, .18); }
.medals-band .medal b { color: var(--clay-lite); }
.medals-band .medal span { color: rgba(255, 255, 255, .78); }

/* ================= finder quiz ================= */
.quiz-wrap { max-width: 660px; margin: 0 auto; padding: 40px 24px 90px; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#quiz-step { font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
#quiz-back {
  background: none; border: 0; color: var(--clay); font: inherit; font-size: var(--fs-small);
  font-weight: 600; cursor: pointer; padding: 8px 0;
}
.quiz-track { height: 4px; background: var(--oat); border-radius: 4px; overflow: hidden; margin-bottom: 34px; }
#quiz-bar { display: block; height: 100%; width: 0; background: var(--clay); border-radius: 4px; transition: width .25s ease; }
.q-title { font-size: var(--fs-headline); line-height: 36px; margin: 0 0 10px; }
.q-sub { color: var(--muted); font-size: var(--fs-small); line-height: 24px; margin: 0 0 26px; }
.q-opts { display: grid; gap: 10px; }
.q-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px; cursor: pointer; font: inherit;
}
.q-opt:hover { border-color: var(--clay); transform: translateY(-1px); }
.q-opt-main { flex: 1; }
.q-opt-main b { display: block; font-size: var(--fs-body); }
.q-opt-main span { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.q-chev {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}
.r-card {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px;
  border: 1px solid var(--border); border-radius: 12px; padding: 22px; margin: 18px 0;
  background: var(--white);
}
.r-img { background: var(--oat); border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.r-img img { max-width: 88%; max-height: 170px; object-fit: contain; }
.r-eyebrow { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--clay); }
.r-name { font-size: var(--fs-title); margin: 6px 0 8px; }
.r-blurb { margin: 0 0 8px; font-size: var(--fs-small); line-height: 23px; }
.r-why { margin: 0 0 8px; font-size: var(--fs-small); line-height: 21px; color: var(--muted); }
.r-skip { margin: 0 0 14px; font-size: var(--fs-small); line-height: 20px; color: var(--muted); font-style: italic; }
.r-price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.r-price .now { font-size: var(--fs-subhead); font-weight: 600; }
.r-price .was { font-size: var(--fs-small); color: var(--muted); text-decoration: line-through; }
.r-close { margin: 26px 0 4px; font-size: var(--fs-small); color: var(--muted); }
.r-actions { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.r-link { font-size: var(--fs-small); color: var(--clay); }
@media (max-width: 560px) {
  .q-title { font-size: var(--fs-title); line-height: 30px; }
  .r-card { grid-template-columns: 1fr; }
  .r-img img { max-height: 200px; }
}

/* flex items refuse to shrink below content min-width unless told; without this the
   placement scroller's tile row (5 x 96px) widens the whole mobile page */
#pdp-buy, .pdp-grid-2 > div > * { min-width: 0; }
.place { max-width: 100%; }

/* ================= PDP density pass =================
   Side-by-side with Nectar's buy column: theirs is ~15px body, 12-16px gaps between
   decisions, compact controls. Ours ran 16px with 20-26px gaps and oversized paddings,
   which is most of why theirs reads denser and more serious. */

/* narrower buy column, tighter grid */
.pdp-grid-2 { grid-template-columns: minmax(0, 1fr) 424px; gap: 40px; }

/* headline scale down toward Nectar's */
.pdp h1 { font-size: var(--fs-headline); line-height: 40px; }

/* offer card compact */
.offer-navy { padding: 14px 16px; }
.offer-head { font-size: var(--fs-lead); line-height: 23px; margin-bottom: 4px; }
.offer-copy .note, .offer-cd .note { font-size: var(--fs-micro); line-height: 16px; margin-top: 6px; }
.offer-cd .countdown { padding: 8px 10px; }
.countdown b { font-size: var(--fs-body); }

/* tabs + description tighter */
.pdp-tabs { margin-top: 2px; }
.tablist button { font-size: var(--fs-small); padding: 9px 0; }
.tab-panel { font-size: var(--fs-small); line-height: 22px; padding-top: 10px; }

/* decision-stack rhythm: this is the big one */
.pick-head { margin: 16px 0 7px; }
.pick-label { font-size: var(--fs-small); }
.pick-head a { font-size: var(--fs-small); }
.size-row { padding: 12px 14px; }
.sr-name { font-size: var(--fs-small); }
.sr-now { font-size: var(--fs-lead); }
.sr-value { font-size: var(--fs-micro); }
.seg-btn { padding: 10px 8px; }
.seg-btn b { font-size: var(--fs-small); }
.seg-btn span { font-size: var(--fs-micro); }

/* tier cards: Nectar's are compact rows, ours were lounges */
.tier-stack { gap: 8px; }
.tier2 { grid-template-columns: 148px minmax(0, 1fr); }
.tier-pane { padding: 10px; }
.tier-pane img { max-width: 92%; }
.tier-body { padding: 11px 13px; }
.tier-body > b { font-size: var(--fs-small); line-height: 20px; }
.tier-body .check-list { margin-top: 5px; }
.tier-body .check-list li { font-size: var(--fs-micro); line-height: 17px; margin-bottom: 2px; padding-left: 17px; }
.tier-foot-row { padding-top: 8px; }
.tier-now { font-size: var(--fs-lead); }
.tier-radio { width: 18px; height: 18px; }
.tier-ribbon { font-size: var(--fs-micro); padding: 3px 7px; }
.tier-foot { font-size: var(--fs-micro); margin-top: 7px; }

/* placement selector */
.place-copy { font-size: var(--fs-small); line-height: 19px; margin-top: 9px; min-height: 0; }
.place-btn span:last-child { font-size: var(--fs-micro); }

/* add-on panel */
.addon-panel { padding: 12px; margin-top: 16px; }
.sw-row { padding: 11px 12px; }
.sw-label { font-size: var(--fs-small); }
.sw-price { font-size: var(--fs-small); }
.sw-price .was { font-size: var(--fs-micro); }
.kit-flag { margin: 11px 0 7px; font-size: var(--fs-micro); padding: 5px 10px; }
.kit-items { padding: 10px; margin-top: 8px; }
.kit-item img { height: 46px; }
.kit-item b { font-size: var(--fs-micro); line-height: 15px; }
.kit-item span { font-size: var(--fs-micro); }
.btn-atc { margin-top: 11px; padding: 15px 30px; font-size: var(--fs-body); }
.whole { margin-top: 9px; }
.whole-head { padding: 12px 14px; font-size: var(--fs-small); }
.whole-body { padding: 12px; }
.stock { margin-top: 11px; font-size: var(--fs-small); }

/* compare card + cross-sell rows */
.quiz-card { padding: 14px; margin-top: 12px; }
.quiz-card b { font-size: var(--fs-small); }
.quiz-card p { font-size: var(--fs-small); line-height: 20px; margin-top: 4px; }
.rule-head { margin: 18px 0 9px; font-size: var(--fs-small); }
.base-rows { gap: 8px; }
.base-row { padding: 10px 12px; gap: 11px; }
.base-main b { font-size: var(--fs-small); line-height: 18px; }
.base-price { font-size: var(--fs-small); margin-top: 2px; }
.val-pill { font-size: var(--fs-micro); padding: 2px 7px; }
.add-pill { padding: 8px 17px; font-size: var(--fs-small); }

/* notes under the CTA */
.atc-top-note { font-size: var(--fs-micro); margin-top: 7px; }
.ship-note { padding: 12px 14px; font-size: var(--fs-small); line-height: 20px; margin-top: 14px; }
.pdp .wrap > * { min-width: 0; }

/* specs fold into an accordion row, Nectar's Product Specs pattern */
.spec-acc { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 16px; }
.spec-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-small); font-weight: 600; padding: 14px 2px;
}
.spec-acc summary::-webkit-details-marker { display: none; }
.spec-acc summary::after { content: '+'; font-size: var(--fs-subhead); color: var(--clay); font-weight: 400; }
.spec-acc[open] summary::after { content: '\2212'; }
.spec-acc .spec { margin: 0 0 12px; }
.spec th { font-size: var(--fs-small); }
.spec td { font-size: var(--fs-small); }
.spec th, .spec td { padding: 8px 10px 8px 0; }

/* returns paragraph under the ship note was a loose float; tie it in */
.pdp p[style*="margin-top:16px"] { font-size: var(--fs-small) !important; line-height: 19px !important; margin-top: 10px !important; }

@media (max-width: 760px) {
  .pdp h1 { font-size: var(--fs-headline); line-height: 34px; }
  .pick-label { font-size: var(--fs-small); }
  .tier2 { grid-template-columns: 118px minmax(0, 1fr); }
}

/* ================= colour density pass =================
   Nectar's buy column keeps colour in play constantly: accent prices, a clearly tinted
   add-on panel, saturated tier panes, coloured digits in a white countdown inset. After the
   clay retune ours had drifted to ink-on-white with occasional accent. Raise the dosage. */

/* prices carry the accent, everywhere a decision is made */
.tier-now, .base-price, .sr-now, .r-price .now, .pdp-total .pick-price .now { color: var(--clay); }
.pick-price .now { color: var(--clay); }

/* countdown: white inset with accent digits, Nectar's strongest colour pop */
.offer-cd .countdown { background: var(--white); border-color: var(--white); }
.offer-cd .countdown div { background: transparent; }
.offer-cd .countdown b { color: var(--clay); }
.offer-cd .countdown span { color: var(--pine); opacity: 1; }

/* add-on panel: unmistakably tinted, not faintly warm */
.addon-panel { background: var(--cream); border-color: var(--tan); }
.kit-items { border-color: var(--tan); }
.sw-row { border-color: var(--tan); }

/* tier panes: saturation back up so the stack reads as colour-blocked rows */
.tier2.current { background: var(--sand); }

/* selected states: fill deepens with the accent family */
.seg-btn[aria-selected="true"] { background: var(--sand); }
.seg-btn[aria-selected="true"] b { color: var(--clay-dark); }
.place-btn[aria-selected="true"] { background: var(--sand); }
.addon.is-on, .sw-row-kit.is-on { border-color: var(--clay); background: var(--cream); }

/* radio dots read bigger and warmer */
.tier2.current .tier-radio::after { inset: 3px; }
.tier-radio { border-width: 2px; }

/* value pills pick up warmth instead of grey */
.val-pill { background: var(--sand); color: var(--pine); }

/* whole-routine savings badge on the sage tint; the prior darker variant read
   more saturated but the pair failed AA at 4.47:1, so the token value stands */
.whole-badge { background: var(--sage-tint); }

/* benefit icons under the gallery: labels join the icons in accent */
.gal-trust div { color: var(--pine); }

/* ---- the slate tint read as a stray blue in a warm palette; retire it to warm stone ---- */
/* ---- slim countdown strip, mobile only: the full offer card sits below the buy stack
        there, so the urgency signal was invisible on the first screens ---- */
.cd-strip {
  display: none; background: var(--pine); color: var(--bone);
  font-size: var(--fs-micro); padding: 8px 14px; text-align: center;
}
.cd-strip b { font-weight: 700; color: var(--amber); }
.cd-strip span { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 760px) {
  .cd-strip { display: block; }
}

/* ---- product names lowercase, consistent with the wordmark ---- */
.pdp h1, .tier-body > b, .card-title, .base-main b, .ss-id b, .sr-name,
.like-card b, .kit-item b, .whole-item b, .r-name, .crumbs [aria-current="page"] {
  text-transform: lowercase;
}

@media (max-width: 760px) {
  /* reclaim the strip's 34px so Add to Cart stays inside the first screen */
  .gal-rail button { width: 58px; }
  .crumbs { margin-bottom: 4px; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > h1 { margin: 6px 0 2px; }
  .btn-atc-top { margin-top: 8px; }
}

@media (max-width: 760px) {
  /* the aspect-ratio:1/1 hero ignores img height trims, so reclaim comes from type + gaps */
  .pdp h1 { font-size: var(--fs-title); line-height: 32px; }
  .gal { margin-bottom: 6px; }
  .gal-rail { gap: 6px; }
  .gal-rail button { width: 48px; }
  .size-row { padding: 10px 12px; }
  .pick-head { margin: 10px 0 6px; }
  .atc-top-note { margin-top: 5px; font-size: var(--fs-micro); }
}

/* ---- the product lockup no longer borrows the wordmark serif ----
   Bespoke Serif is caged to the wordmark. Headings take Erode from the base
   rules; card-level product names stay in Switzer at their set weights. */

/* ---- final word on the mobile hero: stale numeric heights kept letterboxing the square ---- */
@media (max-width: 760px) {
  .gal-main img { height: 100%; }
}

@media (max-width: 760px) {
  /* Reading order was: title -> buy stack -> cross-sell -> offer -> description.
     The description belongs with the title's cluster: now title -> buy stack ->
     description -> offer -> logistics. */
  .pdp-grid-2 > div:not(.pdp-col-gal) > .pdp-tabs { order: 5; margin-top: 20px; }
  .pdp-grid-2 > div:not(.pdp-col-gal) > .offer-navy { order: 6; margin-top: 18px; }

  /* dead zone around the specs accordion and the trust row */
  .spec-acc { margin-top: 10px; }
  .gal-trust { margin-top: 6px; padding-top: 14px; border-top: 0; }
  .gal-note { margin-top: 6px; }
  .pdp { padding-bottom: 0; }
  .pdp + .band { padding-top: 22px; }
}

/* iOS Safari renders <button> text in system blue unless a colour is set explicitly.
   Chrome defaults it to black, which is why desktop checks never caught the blue
   selected-device row and placement labels. Buttons inherit text colour, always. */
button { color: inherit; }

/* tagline + spec note styling: the tagline is a display moment, so it takes
   the Erode italic rather than the wordmark serif */
.tagline {
  font-family: 'Erode', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lead); line-height: 26px; margin: 10px 0 12px;
}
.spec-note { font-size: var(--fs-small); line-height: 19px; color: var(--muted); margin: 0 0 10px; }

/* ================= de-vibe pass =================
   The tells being removed: full-pill buttons on an editorial serif brand, gradient-tinted
   panes, and glow shadows on hover. The category data cuts against full pills too: Casper
   runs 32px, Purple 48px, and Therabody (our closest visual cousin) runs near-square.
   New radius system: 6px buttons, 4px chips and flags, switches stay round because a
   toggle is a physical pill. */

.btn, .btn-atc, .btn-block, .btn-outline, .btn-ghost,
.nav-cta, .subnav .btn, .add-pill, .whole-head + .whole-body, .chip {
  border-radius: 6px;
}
.tag, .eyebrow, .pick-flag, .kit-flag { border-radius: 4px; }
.tier-ribbon, .tier-badge, .val-pill, .whole-badge { border-radius: 3px; }

/* gradient panes -> flat tints. gradients on UI chrome are the tell; flat colour is not */
.tint-slate { background: var(--stone); }
.tint-taupe { background: var(--tan); }
.tint-mauve { background: var(--blush); }
.tier2.current .tier-pane { background: var(--blush); }

/* progress bar + like-bar keep square ends */
.like-bar, .like-bar span, .quiz-track, #quiz-bar { border-radius: 0; }

/* ================= cohesion sweep =================
   One offer-card design everywhere: the hero card now matches the PDP's charcoal card
   instead of being its white inverse. */
.offer-card {
  background: var(--pine); border-color: var(--pine); color: var(--bone);
}
.offer-card .lead { color: rgba(255, 255, 255, .85); }

/* The timer used to be four white boxes punched into the dark card, which is the
   visual signature of a discount store and was the loudest object on a page whose
   whole position is the absence of theater. The card stays dark because it sits on
   a busy photograph and needs the contrast, but the timer is now a quiet tabular
   row rather than a scoreboard. The deadline is real and short, so it does not
   need to shout to be believed. */
.offer-card .countdown div {
  background: transparent;
  border: 0;
  padding: 0 2px;
  min-width: 0;
}
.offer-card .countdown { gap: 14px; margin-bottom: 16px; }
.offer-card .countdown b { color: var(--bone); font-weight: 600; }
.offer-card .countdown span { color: rgba(255, 255, 255, .55); opacity: 1; }
.offer-card .stock-line { color: rgba(255, 255, 255, .8); }
.offer-card .btn-ghost { color: var(--bone); border-color: rgba(255, 255, 255, .55); }
.offer-card .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  .card, a.tier, a.tier2, .like-card .like-img, .base-row, .addon-panel, .quiz-card,
  .btn, .add-pill, .place-btn, .seg-btn, .q-opt, .chip,
  .nav-cta, .size-row, .whole-head,
  .nav-links a, .nav-icons a, .subnav-tabs a {
    transition: none;
    transform: none !important;
  }
}

/* tier bullets lose the template checkmarks; plain muted lines read editorial */
.tier-body .check-list li { padding-left: 0; }
.tier-body .check-list li::before { content: none; }

/* ---- hero on mobile: the desktop crop (72% 30%) frames the room, which cuts the person
        out entirely at phone width. Pull the focal point onto her, drop the scrim to a
        vertical fade so the copy stays legible over the top of the photo, and give the
        offer card room so it stops overlapping the headline. ---- */
@media (max-width: 760px) {
  .hero-bleed { min-height: 0; }
  .hero-bleed .bg { background-position: 30% 42%; }
  .hero-bleed .scrim {
    background: linear-gradient(180deg,
      rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 34%,
      rgba(255,255,255,.55) 62%, rgba(255,255,255,.30) 100%);
  }
  .hero-bleed .wrap-lg { padding-block: 26px 30px; }
  .hero-copy h1 { font-size: var(--fs-display-sm); line-height: 46px; }
  .hero-kicker { font-size: var(--fs-lead); margin-bottom: 4px; }
  .offer-card { margin-top: 20px; max-width: none; }
}

@media (max-width: 760px) {
  /* Copy-over-photo works at desktop width where there is empty room beside the subject.
     At 390px the subject sits *behind* the headline and the offer card, so she reads as a
     washed-out texture. Stack instead: photo as its own band, copy on white beneath it. */
  .hero-bleed { display: block; }
  .hero-bleed .bg { position: relative; inset: auto; height: 280px; background-position: 32% 38%; }
  .hero-bleed .scrim { display: none; }
  .hero-bleed .wrap-lg { padding-block: 22px 26px; }
}

/* ==========================================================================
   WP6 section shapes: the varied PDP sequence (reference build on the Band
   page; WP5 rolls the same system to the other five PDPs). Shapes follow the
   WP1 category measurement: grids, full-bleed image statements, product
   explainers and editorial columns carry section shape, and strong ground
   changes mark the chapter breaks. Frozen tokens only; no new literals.
   ========================================================================== */

/* ---- section grounds: the warm rhythm ramp, one ground per chapter ---- */
.ground-cream { background: var(--cream); }
.ground-sand  { background: var(--sand); }
.ground-blush { background: var(--blush); }

/* ---- session explainer: numbered steps with big display numerals ---- */
.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px;
  margin: 0 0 56px; padding: 0; list-style: none;
}
.how-step .n {
  display: block; margin-bottom: 16px;
  font-family: 'Erode', Georgia, serif; font-weight: 600;
  font-size: var(--fs-display-sm); line-height: 1; color: var(--clay);
}
.how-step p { color: var(--muted); font-size: var(--fs-small); line-height: 23px; margin: 10px 0 0; }
@media (max-width: 860px) {
  .how-steps { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .how-step .n { margin-bottom: 10px; }
}

/* ---- diagram panel: the clean slot WP8 fills with an inline SVG. Until
       then it holds the flat full-length product frame. ---- */
.diagram-panel {
  margin: 0; padding: 22px;
  background: var(--bone); border: 1px solid var(--border); border-radius: var(--r);
}
.diagram-panel svg { display: block; width: 100%; height: auto; color: var(--pine); --diagram-accent: var(--clay); }
.diagram-panel-editorial { margin-top: 40px; }
.diagram-panel img { width: 100%; height: clamp(280px, 38vw, 440px); object-fit: cover; object-position: center 64%; }
.diagram-panel figcaption { margin-top: 14px; font-size: var(--fs-small); line-height: 22px; color: var(--muted); }

/* ---- wear grid: every wear position at once, not one per band ---- */
.wear-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.wear-grid figure { margin: 0; }
.wear-grid img {
  width: 100%; height: 190px; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: var(--r);
}
.wear-grid figcaption {
  margin-top: 10px; text-align: center; color: var(--pine);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 1000px) { .wear-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .wear-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- full-bleed statement: a supporting line under the headline ---- */
.image-statement-copy .lede {
  color: var(--muted); font-size: var(--fs-lead); line-height: 27px;
  max-width: 44ch; margin: 18px 0 0;
}

/* ---- editorial column: real copy at reading measure, no image prop.
       The secondary line takes pine because muted fails AA on blush. ---- */
.editorial-col { max-width: var(--text); }
.editorial-col h2 { margin-bottom: 18px; }
.editorial-col .lede { font-size: var(--fs-lead); line-height: 28px; color: var(--pine); margin: 0 0 34px; }
.editorial-col h3 { margin: 28px 0 8px; }
.editorial-col p { margin: 0; line-height: 26px; }

/* ==========================================================================
   WP11 editorial chassis: shared by why.html, how-we-sell.html and
   wavelengths.html. One clay-eyebrow hero, a reading-measure copy column, and
   ground changes as chapter breaks, the same WP1 pattern the product pages
   now use. Frozen tokens only; no new literals.
   ========================================================================== */

/* ---- editorial hero: plain clay eyebrow, display-size h1 ---- */
.ed-hero { padding: 84px 0 64px; }
.ed-hero .eyebrow { background: transparent; color: var(--clay); padding: 0; }
.ed-hero h1 { font-size: var(--fs-display); line-height: 58px; max-width: 720px; }
@media (max-width: 760px) {
  .ed-hero { padding: 48px 0 36px; }
  .ed-hero h1 { font-size: var(--fs-display-sm); line-height: 46px; }
}

/* ---- long-copy column at reading measure ---- */
.ed-copy { max-width: 640px; font-size: var(--fs-lead); line-height: 28px; }
.ed-copy > p { margin: 0 0 22px; }
.ed-copy > p:last-child { margin-bottom: 0; }
.ed-copy h2 { font-size: var(--fs-headline); margin: 0 0 18px; }
.ed-copy a:not(.btn) { color: var(--clay); font-weight: 500; }
/* clay text fails AA on sand, so links sitting on the deep tint take
   clay-dark instead, per the frozen :root contrast rules */
.ground-sand .ed-copy a:not(.btn) { color: var(--clay-dark); }

/* ---- refusal blocks: the four "will not" commitments, two-up on desktop ---- */
.refusal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
@media (max-width: 760px) { .refusal-grid { grid-template-columns: 1fr; gap: 24px; } }
.refusal { border-left: 3px solid var(--clay); padding: 4px 0 4px 20px; }
.refusal b { display: block; font-size: var(--fs-body); margin-bottom: 4px; }
.refusal p { margin: 0; font-size: var(--fs-small); line-height: 23px; color: var(--muted); }

/* ---- promise box: the 30-Day Wear Test ---- */
.promise { background: var(--oat); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; margin: 30px 0 0; }
.promise h3 { font-size: var(--fs-subhead); margin: 0 0 8px; }
.promise p { margin: 0; font-size: var(--fs-small); line-height: 24px; color: var(--muted); }

/* ---- closing statement plus CTA on a deep tint: pine text, not muted ---- */
.ed-close { max-width: 640px; margin: 0 auto; text-align: center; }
.ed-close h2 { margin-bottom: 14px; }
.ed-close p { color: var(--pine); font-size: var(--fs-lead); line-height: 27px; margin: 0 0 26px; }


/* ==========================================================================
   Cart: nav button, drawer, quote and checkout states (cart.js).

   Every money figure rendered inside the drawer comes from /api/quote; this
   section only styles what the server sent. ink on bone, muted on bone, wine
   on bone and white on clay are all pairs already verified in the frozen
   :root block; no new colours, no new type sizes.
   ========================================================================== */

body.cart-open { overflow: hidden; }

/* ---- nav entry point ---- */
.cart-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 10px 0;
  color: var(--pine); font-size: var(--fs-small); font-weight: 600;
  white-space: nowrap;
}
.cart-nav-btn svg { width: 21px; height: 21px; }
.cart-nav-count {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--clay); color: var(--white);
  font-size: var(--fs-micro); font-weight: 600;
  border-radius: var(--r-pill);
}
.cart-nav-count[hidden] { display: none; }
/* icon-only twin in the utility bar: shown at 760px and below, where the nav
   has no room for a third element and the utility links are hidden anyway */
.cart-util-btn {
  display: none; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 4px 6px;
  color: var(--bone);
}
.cart-util-btn svg { width: 20px; height: 20px; }
.cart-util-btn .cart-nav-label { display: none; }
@media (max-width: 760px) {
  .cart-nav-btn { display: none; }
  .cart-util-btn { display: inline-flex; }
}

/* ---- overlay + drawer shell ---- */
.cart-root {
  position: fixed; inset: 0; z-index: 80;
  visibility: hidden;
}
.cart-root.is-open { visibility: visible; }
.cart-overlay {
  position: absolute; inset: 0;
  background: rgba(var(--dark-rgb), .5);
  opacity: 0; transition: opacity .2s ease;
}
.cart-root.is-open .cart-overlay { opacity: 1; }
.cart-drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 100%);
  background: var(--bone); color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(28px); opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.cart-root.is-open .cart-drawer { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cart-overlay, .cart-drawer { transition: none; }
}

/* ---- drawer header ---- */
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.cart-head h2 { font-size: var(--fs-title); line-height: 28px; }
.cart-close {
  background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--pine); display: inline-flex;
}
.cart-close svg { width: 20px; height: 20px; }

/* ---- line list ---- */
.cart-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cart-line {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-name { font-size: var(--fs-body); font-weight: 600; }
.cart-line-tools {
  display: flex; align-items: center; gap: 14px; margin-top: 10px;
}
.cart-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r);
}
.cart-qty button {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--pine); padding: 0;
}
.cart-qty button:disabled { opacity: .35; cursor: default; }
.cart-qty button svg { width: 15px; height: 15px; }
.cart-qty-val {
  min-width: 28px; text-align: center;
  font-size: var(--fs-small); font-weight: 600;
}
.cart-remove {
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  color: var(--muted); font-size: var(--fs-small); text-decoration: underline;
}
.cart-remove:hover { color: var(--pine); }
.cart-line-total {
  font-size: var(--fs-body); font-weight: 600; white-space: nowrap;
  padding-top: 1px;
}
.cart-empty { padding: 40px 0; text-align: center; }
.cart-empty p { margin: 0 0 12px; font-size: var(--fs-lead); }
.cart-empty a { color: var(--clay); font-weight: 600; }

/* ---- footer: parcels, subtotal, messages, checkout ---- */
.cart-foot { border-top: 1px solid var(--border); padding: 16px 20px 20px; }
.cart-parcels {
  margin: 0 0 12px; padding: 11px 14px;
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--r);
  font-size: var(--fs-small); line-height: 22px;
}
.cart-subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--fs-body);
}
.cart-subtotal b { font-size: var(--fs-subhead); font-weight: 600; }
.cart-ship { margin: 4px 0 0; font-size: var(--fs-small); color: var(--muted); }
.cart-msg { margin: 12px 0 0; font-size: var(--fs-small); line-height: 22px; }
.cart-msg-error { color: var(--wine); }
.cart-msg-warn { color: var(--muted); }
#cart-checkout { margin-top: 14px; }
#cart-checkout:disabled { opacity: .55; cursor: default; }


/* ---- thank-you page: order confirmation states ----
   Same chassis as the rest of the site; the confirmation copy is set by the
   polling script from /api/order responses only. */
.ty { max-width: var(--text); margin: 0 auto; padding: 96px 0 112px; text-align: center; }
.ty h1 { font-size: var(--fs-display-sm); line-height: 46px; }
.ty-lede {
  margin: 18px auto 0; max-width: 52ch;
  font-size: var(--fs-lead); line-height: 28px; color: var(--muted);
}
.ty-parcels {
  margin: 22px auto 0; max-width: 52ch; padding: 11px 14px;
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--r);
  font-size: var(--fs-small); line-height: 22px; text-align: center;
}
.ty-ref { margin: 26px 0 0; font-size: var(--fs-small); color: var(--muted); }
.ty-ref b { font-weight: 600; word-break: break-all; }
.ty-actions { margin: 34px 0 0; }
@media (max-width: 900px) {
  .ty { padding: 64px 0 72px; }
  .ty h1 { font-size: var(--fs-headline); line-height: 32px; }
}