/* ==========================================================================
   PAK SHILAJIT — SECTION LAYOUTS
   Composition only. Every visual property here resolves to a token, and
   every interactive element is a component from components.css.
   ========================================================================== */


/* ==========================================================================
   HERO / BANNER
   Left-aligned (§5 rule 1). Not a centred hero with three icon cards
   underneath (§5 rule 2) — that pattern is the single most recognisable
   template layout on the web and the owner explicitly rejected it.
   ========================================================================== */

/* No padding on the section at all: the banner runs flush from the header to
   the proof ticker, and the ticker sits flush on the promise band below it.
   With a photographic background, external gaps read as mistakes — breathing
   room lives INSIDE the slide (see .hero-c__slide padding), where the artwork
   still bleeds behind it. */
.hero { position: relative; overflow: hidden; padding-block: 0; }

.hero__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); }
}

/* Below the two-column breakpoint the packshot comes FIRST.
   Stacked copy-then-media put the product roughly 640px down the page at
   390px wide — on a product carousel, on a site where mobile is 77% of
   impressions. It also meant the slide-1 packshot, which carries
   fetchpriority="high" as the intended LCP element, started below the fold. */
@media (max-width: 899px) {
  .hero__media { order: -1; }
}

.hero__title { max-width: 15ch; }
.hero__title em {
  font-style: normal;
  color: var(--accent-deep);
}
.hero__lead { margin-block-start: var(--sp-4); max-width: 46ch; }
.hero__cta { margin-block-start: var(--sp-5); }
.hero__trust { margin-block-start: var(--sp-5); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line); }

/* A warm glow anchored to the right of the banner, behind everything. This is
   what makes the packshot read as part of the background rather than as a
   picture pasted into a box — and it is still the one permitted gradient,
   the amber radial from the capsule label, just at section scale. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -12%;
  inset-inline-end: -8%;
  inline-size: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(253,185,19,.18), rgba(253,185,19,0) 68%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
/* The glow-stacking rule above ties with .sr-only on specificity and loads
   later, so it was flipping the live region to position:relative — putting a
   screen-reader-only span into flow as a 26px line box between the banner and
   the ticker. Restore it. */
.hero > .sr-only { position: absolute; }

.hero__media { position: relative; }
/* The banner artwork as an image belongs to the light phone banner only;
   from 700px up the same artwork is painted as the slide background. */
.hero__art { display: none; }

/* No box. The packshot floats on the glow, larger, with the spec chip over it.
   The bordered tile made it look like a catalogue thumbnail; without it the
   product sits IN the banner. */
.hero__shot {
  position: relative;
  /* 4:3 on a phone rather than a square — a square packshot cost about 90px
     of height in a banner that was already too tall. */
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  overflow: visible;
}
@media (min-width: 900px) {
  .hero__shot {
    aspect-ratio: 1 / 1;
    /* Capped, because a square packshot in a half-width column is 600px tall
       on a large monitor and drags the whole banner down with it. */
    max-inline-size: 420px;
    margin-inline: auto;
  }
}
.hero__shot::before {
  content: "";
  position: absolute;
  inline-size: 124%; aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(253,185,19,.46),
    rgba(253,185,19,.12) 44%,
    rgba(253,185,19,0) 68%);
  pointer-events: none;
}
.hero__shot img {
  position: relative;
  inline-size: 86%;
  filter: drop-shadow(var(--shadow-product));
}
@media (min-width: 900px) { .hero__shot img { inline-size: 100%; } }

/* The floating spec chip that used to sit on the banners was removed on the
   owner's instruction (2026-08-03) — the same facts live in the slide kicker
   and the stats row. */

/* ==========================================================================
   HERO CAROUSEL (§6C-3) — four slides, one per product
   One layout, four sets of content. Not four designs.

   Built on native CSS scroll-snap rather than a library, so it works with
   JavaScript disabled: the arrows and auto-advance are enhancement, and
   without them it degrades to a horizontally scrollable row rather than a
   blank box.

   THE RESERVED HEIGHT BELOW IS LOAD-BEARING. Changing slides must cause zero
   layout shift, and CLS on the hero is the single biggest Core Web Vitals
   risk on this page. min-block-size holds the track at the tallest slide's
   height at every breakpoint, so the shortest slide cannot collapse it.
   ========================================================================== */

.hero-c { position: relative; }

.hero-c__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-block-size: 440px;          /* reserved — see the note above */
}
.hero-c__track::-webkit-scrollbar { display: none; }

.hero-c__slide {
  position: relative;
  flex: none;
  inline-size: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  /* The banner's breathing room. Inside the slide rather than on the section,
     so the background photograph still bleeds edge to edge while the copy
     keeps clear of the header above and the ticker below. */
  padding-block: var(--sp-6);
}
@media (min-width: 900px) { .hero-c__slide { padding-block: var(--sp-6); } }

@media (min-width: 600px) { .hero-c__track { min-block-size: 440px; } }
/* Desktop banner trimmed (owner, 12 Aug) — the fold shows the ticker and
   the top of the next section instead of banner alone. */
@media (min-width: 900px) { .hero-c__track { min-block-size: 380px; } }
@media (min-width: 1200px) { .hero-c__track { min-block-size: 400px; } }

/* Desktop banner copy, one size down (owner, 12 Aug): the 60px headline and
   24px stack gaps made the banner own the whole fold. */
@media (min-width: 900px) {
  .hero-c__slide .hero__title { font-size: 46px; line-height: 1.06; }
  .hero-c__slide .hero__lead { font-size: 17px; margin-block-start: 12px; max-inline-size: 52ch; }
  .hero-c__slide .price.mbs-5 { margin-block-start: 14px; }
  .hero-c__slide .hero__cta { margin-block-start: 16px; }
  .hero-c__slide .hero__trust { margin-block-start: 16px; }
  .hero-c__slide .kicker { margin-block-end: 10px; }
}


/* --- Background art -------------------------------------------------------
   Applied only when the artwork actually exists on disk (the template checks
   file_exists), so until the files are uploaded the packshot layout stands and
   nothing renders half-built.

   The scrim is not decoration. Left-aligned copy over a photograph fails
   contrast the moment the photograph gets light, so the text side is washed
   back to the page background and fades out across the middle — which is also
   why the prompts ask for a quiet left half. */

/* The image itself is set by a per-page <style> block keyed on data-hero-bg —
   NOT by a custom property. A url() in a custom property resolves against the
   stylesheet that consumes it rather than the element that declares it, which
   silently pointed every background at /assets/assets/… and 404ed. */
.hero-c__slide.has-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.hero-c__slide.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* MOBILE: a dark overlay, not a bone wash (owner's call from a real device,
     3 Aug). The copy sits over the artwork's darkest region on a phone, and
     ink text on a translucent bone wash was unreadable there. A near-opaque
     ink overlay plus light-on-dark copy (below) is legible over every one of
     the four artworks, dark or light. */
  background: linear-gradient(to bottom,
    rgba(12, 11, 10, .72) 0%,
    rgba(12, 11, 10, .82) 55%,
    rgba(12, 11, 10, .92) 100%);
}
.hero-c__slide.has-bg > * { position: relative; z-index: 1; }

/* Light-on-dark copy pairs with the mobile overlay. Same roles as .band —
   bone headline, ash lead, amber kicker — so contrast is by-construction, and
   the secondary button flips to its on-band treatment. Desktop (min-width
   900px, below) restores ink-on-bone over the left wash. */
@media (min-width: 700px) and (max-width: 899px) {
  .hero-c__slide.has-bg .hero__copy .kicker { color: var(--accent); }
  .hero-c__slide.has-bg .hero__title { color: var(--on-band); }
  .hero-c__slide.has-bg .hero__title em { color: var(--accent); }
  /* Bone for the lead and trust items too, not ash: over the LIGHT artworks
     (gummies, capsules) the composite behind the overlay brightens, and ash
     measured 2.4–3.8:1 there. Bone measures ≥6:1 everywhere; the hierarchy
     between headline and lead survives on size and weight alone. */
  .hero-c__slide.has-bg .hero__lead { color: var(--on-band); }
  .hero-c__slide.has-bg .price__now { color: var(--on-band); }
  .hero-c__slide.has-bg .price__unit { color: var(--on-band); }
  .hero-c__slide.has-bg .hero__trust { border-color: var(--band-line); }
  .hero-c__slide.has-bg .trust-row__item { color: var(--on-band); }
  .hero-c__slide.has-bg .trust-row__item svg { color: var(--accent); }
  .hero-c__slide.has-bg .btn--secondary { --_bd: var(--on-band-soft); --_fg: var(--on-band); }
  .hero-c__slide.has-bg .btn--secondary:hover { --_bg: var(--on-band); --_fg: var(--ink); }
}

@media (min-width: 900px) {
  .hero-c__slide.has-bg {
    background-position: center right;
  }
  .hero-c__slide.has-bg::before {
    /* Desktop puts the product on the right, so the wash runs left to right —
       ink copy over bone, measured 11.6–16.8:1 against all four artworks.
       The dark mobile overlay above does NOT apply here. */
    background: linear-gradient(to right,
      var(--bg) 0%,
      rgba(250, 247, 242, .94) 32%,
      rgba(250, 247, 242, .40) 58%,
      rgba(250, 247, 242, 0) 80%);
  }
}

/* With real background art the product is already IN the picture, so the
   duplicate packshot is dropped and the copy takes the full column. */
.hero-c__slide.has-bg .hero__media { display: none; }
@media (min-width: 900px) {
  .hero-c__slide.has-bg .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero-c__slide.has-bg .hero__copy { max-inline-size: 46ch; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-c__track { scroll-behavior: auto; }
}

/* The arrows, counter and tick indicators were removed on 3 Aug 2026 — the
   banner auto-advances instead, and the track still swipes and still takes
   arrow keys. Their CSS went with them rather than sitting here unused; the
   JavaScript still null-checks each control, so restoring them is a matter of
   putting the markup and these rules back. */


/* Marquee of proof points below the hero — dense band against the open
   hero above it, which is where the uneven rhythm rule pays off. */
/* Decorative and aria-hidden, and every point on it is repeated in the trust
   row directly above. On a phone that duplication cost 83px of a banner that
   was already too tall, so it earns its place only from tablet up.
   No margin: it sits flush under the banner artwork and flush on the promise
   band below — the two gaps the owner circled in review. */
.ticker { display: none; }
@media (min-width: 700px) {
  .ticker {
    display: block;
    border-block: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
    margin-block-start: 0;
  }
}
.ticker__track {
  display: flex; align-items: center; gap: var(--sp-8);
  padding-block: var(--sp-4);
  white-space: nowrap;
  animation: ticker 38s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-micro); font-weight: var(--fw-head);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.ticker__item svg { inline-size: 14px; block-size: 14px; color: var(--accent-deep); }
@keyframes ticker { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }


/* ==========================================================================
   PRODUCT PAGE
   One layout, four products. Gallery left, buy box right, everything below
   the fold assembled from the shared component library.
   ========================================================================== */

/* minmax(0, 1fr), not an implicit auto track — see the note on .cart__grid.
   At 768px the PDP is still single-column and the spec table's min-content
   width pushed the page to 1029px inside a 753px viewport. */
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
@media (min-width: 900px) {
  .pdp__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.pdp__gallery { display: grid; gap: var(--sp-4); }
/* Desktop: the gallery rides along while the (now much longer) buy column
   scrolls past it, and releases at the bottom of the row. */
@media (min-width: 900px) {
  .pdp__gallery { position: sticky; inset-block-start: calc(var(--header-h, 72px) + var(--sp-5)); align-self: start; }
}

.pdp__shot {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* The one permitted gradient, borrowed from the capsule label. */
.pdp__shot::before {
  content: "";
  position: absolute;
  inline-size: 76%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(253,185,19,.42), rgba(253,185,19,0) 66%);
}
/* Full-bleed inside the frame (owner, 12 Aug): the uploaded product
   photography fills the tile edge to edge — no inner padding, no glow. */
.pdp__shot img {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: none;
  object-fit: cover;
  filter: none;
}
.pdp__shot::before { display: none; }

/* --- Gallery carousel ----------------------------------------------------
   Swipeable main shot with thumbnail tabs. The track is native scroll-snap
   (works with JS off); the thumbs and the eased glide are enhancement. With
   one image the track has one slide and the thumbs are not rendered. */
.pdp__shots-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.pdp__shots-track::-webkit-scrollbar { display: none; }
.pdp__shots-track .pdp__shot { flex: 0 0 100%; scroll-snap-align: center; }

.pdp__thumbs { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-3); flex-wrap: wrap; }
.pdp__thumb {
  inline-size: 64px; block-size: 64px;
  /* No inner padding (owner, 12 Aug): the thumbnail fills its frame. */
  padding: 0;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.pdp__thumb:hover { border-color: var(--ink-soft); }
.pdp__thumb[aria-current="true"] { border-color: var(--accent-deep); }
.pdp__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: calc(var(--radius) - 1px); }

/* Process shots sit under the packshot, not in a lightbox carousel. They are
   evidence, and evidence you have to click to see is evidence most people
   never see. */
.pdp__strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (min-width: 600px) { .pdp__strip { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } }
.pdp__strip .media-slot { aspect-ratio: 1 / 1; padding: var(--sp-3); }
.pdp__strip .media-slot span { font-size: var(--fs-micro); }

.pdp__head { border-block-end: 1px solid var(--line); padding-block-end: var(--sp-5); margin-block-end: var(--sp-5); }
/* The PDP h1 is a product name, not a landing headline — one size down from
   the global h1 on desktop (owner, 2026-08-03). */
@media (min-width: 900px) { .pdp__head h1 { font-size: var(--fs-h2-d); } }
.pdp__rate { display: flex; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-3); font-size: var(--fs-small); color: var(--ink-soft); flex-wrap: wrap; }
.pdp__rate a { color: var(--accent-deep); }

.pdp__price { margin-block-start: var(--sp-5); }
.pdp__price .price__now { font-size: var(--fs-h3); }

.pdp__options { display: flex; flex-direction: column; gap: var(--sp-6); margin-block: var(--sp-6); }

/* Quantity and add-to-cart on one line, at the same 48px height. Below 480px
   they stack, and the button goes full width. */
.pdp__add { display: flex; gap: var(--sp-3); align-items: center; }
.pdp__add .btn { flex: 1; }
@media (max-width: 479px) {
  .pdp__add { flex-direction: column; align-items: stretch; }
  .pdp__add .qty { align-self: flex-start; }
  /* flex:1 sets flex-basis:0 on the MAIN axis. Once the container turns
     vertical that axis is the block axis, so the add-to-cart button collapsed
     from 52px to 18px — on mobile, on the highest-frequency control on the
     site. Reset it: the button sizes itself, full width. */
  .pdp__add .btn { flex: none; inline-size: 100%; }
}

.pdp__assurance {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.pdp__assurance-item { display: flex; gap: var(--sp-3); font-size: var(--fs-small); }
.pdp__assurance-item svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--accent-deep); margin-block-start: 2px; }
.pdp__assurance-item b { font-weight: var(--fw-head); }

/* The 4-Checks strip, compact, on every product page. Phones swipe it
   (snapDots adds dots + the loop); 700px+ keeps the four-column grid. */
/* Double class: plain .checks is declared later in this file and would
   otherwise win the display race. */
.checks.checks--strip {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.checks.checks--strip::-webkit-scrollbar { display: none; }
.checks.checks--strip > .check { flex: 0 0 80%; scroll-snap-align: center; }
@media (min-width: 700px) {
  .checks.checks--strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
    overflow: visible;
  }
  .checks.checks--strip > .check { flex: none; }
}
@media (min-width: 1100px) { .checks.checks--strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.checks--strip .check h3 { font-size: var(--fs-body); }
.checks--strip .check p { font-size: var(--fs-small); }


/* ==========================================================================
   CART, CHECKOUT, ORDER
   Line items and the order summary are the same two components on the cart
   page, in the drawer and on the checkout — only the container changes.
   ========================================================================== */

/* minmax(0, 1fr) rather than the implicit `auto` track. An auto track is
   sized by its content's MIN-CONTENT width, so a wide data table pushed the
   whole single-column layout to 577px inside a 375px viewport on the account
   page. This is the standard fix and it applies to every single-column grid
   that can contain a table. */
.cart__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) {
  .cart__grid { grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr); gap: var(--sp-8); }
}

.cart__items { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }

.line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block-end: 1px solid var(--line);
}
@media (min-width: 600px) {
  .line { grid-template-columns: 88px minmax(0, 1fr) auto; align-items: start; }
}
.line__media {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid; place-items: center;
  overflow: hidden;
}
.line__media img { inline-size: 78%; }
.line__title { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); }
/* Full target on the cart line's product link — the thumbnail beside it is not
   a link, so this is the only way back to the product page. */
.line__title a { text-decoration: none; display: inline-flex; align-items: center; min-block-size: 44px; }
.line__variant { font-size: var(--fs-small); color: var(--ink-soft); margin-block-start: 2px; }
.line__controls { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-block-start: var(--sp-4); }
.line__price { font-weight: var(--fw-head); letter-spacing: -.01em; white-space: nowrap; }
@media (min-width: 600px) { .line__price { text-align: end; } }

/* Order summary. Sticky on desktop so the total stays visible down a long
   cart, static on mobile where a sticky box would eat the screen. */
.summary {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (min-width: 900px) {
  .summary { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-5)); }
}
.summary__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); font-size: var(--fs-small); }
.summary__row--total {
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-h4);
}
.summary__note { font-size: var(--fs-small); color: var(--ink-soft); margin-block-start: var(--sp-3); }

.gift-bar { padding-block: var(--sp-4); border-block-end: 1px solid var(--line); }

/* Empty state. Designed, not left to a default — an empty cart is a page a
   real customer sees, usually right before they leave. */
.cart__empty { max-width: var(--measure); padding-block: var(--sp-8); }

/* --- CHECKOUT -------------------------------------------------------------
   Two panels running the full height of the page: the form on the page
   background, the order summary on stone with a hairline between them. The
   header is stripped to a mark and a cart link, the footer to policy links.

   Layout follows the reference the owner supplied; every colour, weight,
   radius and type size is ours. A checkout that looks like a different site
   is the single most expensive place to break design consistency — it is
   where people decide whether to type a card number. */

/* The page itself is the flex column, so the footer sits at the bottom of a
   short viewport instead of halfway up it. */
.page-checkout { display: flex; flex-direction: column; min-block-size: 100vh; }

.co__header { border-block-end: 1px solid var(--line); background: var(--bg); }
.co__header-inner {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  block-size: var(--header-h);
}
.co__brand { justify-self: center; display: inline-flex; align-items: center; min-block-size: 44px; }
.co__brand img { block-size: 34px; inline-size: auto; }
.co__header-inner .icon-btn { justify-self: end; }

.co__main { flex: 1; }

.co__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .co__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.co__form-col { padding-block: var(--sp-7) var(--sp-8); }
@media (min-width: 900px) {
  .co__form-col { display: flex; justify-content: flex-end; padding-inline-end: var(--sp-8); }
}
.co__form { inline-size: 100%; }
@media (min-width: 900px) { .co__form { max-inline-size: 560px; } }

/* The summary panel bleeds to the viewport edge and runs the full height, so
   the split reads as two surfaces rather than as a card floating on a page. */
/* On mobile the summary is a bar at the TOP — you check what you are paying
   for before you fill anything in, not after. On desktop it returns to the
   right-hand column. */
.co__summary-col { background: var(--surface-2); border-block-end: 1px solid var(--line); order: -1; }
@media (min-width: 900px) {
  .co__summary-col {
    order: 0;
    border-block-end: 0;
    border-inline-start: 1px solid var(--line);
    padding-block: var(--sp-7) var(--sp-8);
    padding-inline-start: var(--sp-8);
    min-block-size: calc(100vh - var(--header-h));
    position: sticky;
    inset-block-start: 0;
  }
}
.co__summary { inline-size: 100%; }
@media (min-width: 900px) { .co__summary { max-inline-size: 460px; } }

/* Mobile: the summary collapses behind a bar showing the total. Desktop: the
   disclosure is irrelevant, so the marker is hidden and the panel forced open. */
.co__sum > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  min-block-size: 56px;
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-head);
}
.co__sum > summary::-webkit-details-marker { display: none; }
.co__sum > summary .co__sum-total { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); }
.co__sum > summary svg { inline-size: 18px; block-size: 18px; transition: transform var(--dur) var(--ease); }
.co__sum[open] > summary svg { transform: rotate(180deg); }
.co__sum-body { padding-block-end: var(--sp-6); }
/* Explicit, rather than relying on the UA's <details> hiding — which does not
   apply once <summary> is given a display of its own, and silently left the
   whole summary expanded on mobile. */
.co__sum:not([open]) > .co__sum-body { display: none; }
@media (min-width: 900px) {
  .co__sum > summary { display: none; }
  .co__sum:not([open]) > .co__sum-body,
  .co__sum[open] > .co__sum-body { display: block; padding-block-end: 0; }
}

.co__express-label {
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-block-end: var(--sp-4);
}

.co__or {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-block: var(--sp-6);
  font-size: var(--fs-micro);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.co__or::before, .co__or::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }

.co__section { margin-block-end: var(--sp-7); }
.co__section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-block-end: var(--sp-5);
}
.co__section-head h2 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
.co__note { font-size: var(--fs-small); color: var(--ink-soft); margin-block-start: calc(var(--sp-2) * -1); margin-block-end: var(--sp-4); }

/* Payment methods: a bordered stack where the selected method opens its own
   fields inline. Same .optset radio component, one container. */
.co__pay { border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.co__pay-row {
  display: flex; align-items: center; gap: var(--sp-4);
  min-block-size: 56px;
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  border-block-end: 1px solid var(--line);
}
.co__pay-row:last-child { border-block-end: 0; }
.co__pay-row input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; pointer-events: none; }
.co__pay-row:has(input:checked) { background: var(--accent-wash); }
.co__pay-row:has(input:focus-visible) { outline: 2px solid var(--accent-deep); outline-offset: -2px; }
.co__pay-row b { font-weight: var(--fw-head); font-size: var(--fs-body); }
.co__pay-marks { margin-inline-start: auto; display: flex; gap: var(--sp-2); align-items: center; }
.co__pay-mark {
  font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink-soft);
  background: var(--surface);
}
.co__pay-fields { padding: var(--sp-5); border-block-end: 1px solid var(--line); background: var(--surface); }

.co__consent {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
  padding-block-start: var(--sp-6);
  margin-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line);
}
.co__consent strong { color: var(--ink); font-weight: var(--fw-head); }

/* Order summary line: thumbnail carries the quantity, as a badge. */
.co__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: start; padding-block: var(--sp-4); }
.co__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid; place-items: center;
  overflow: visible;
}
.co__thumb img { inline-size: 78%; }
.co__thumb-qty {
  position: absolute;
  inset-block-start: -8px; inset-inline-end: -8px;
  min-inline-size: 22px; block-size: 22px;
  display: grid; place-items: center;
  padding-inline: 5px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 11px;
  font-size: 11px; font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.co__item-title { font-size: var(--fs-small); font-weight: var(--fw-head); line-height: 1.35; }
.co__item-sub { font-size: var(--fs-small); color: var(--ink-soft); margin-block-start: 2px; }
.co__item-price { font-size: var(--fs-small); font-weight: var(--fw-head); white-space: nowrap; }

.co__totals { border-block-start: 1px solid var(--line); margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); }
.co__total-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); font-size: var(--fs-small); }
.co__total-row--grand {
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-4);
  align-items: baseline;
}
.co__total-row--grand b { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-head); }
.co__ccy { font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-inline-end: var(--sp-2); }

.co__footer { border-block-start: 1px solid var(--line); padding-block: var(--sp-5); background: var(--bg); }
.co__footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.co__footer-links a { font-size: var(--fs-small); color: var(--ink-soft); display: inline-flex; align-items: center; min-block-size: 44px; }
.co__footer-links a:hover { color: var(--accent-deep); }
.co__footer-legal { color: var(--ink-soft); margin-block-start: var(--sp-2); }

.checkout__block { margin-block-end: var(--sp-7); }
.checkout__block h2 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); margin-block-end: var(--sp-5); }
.field-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 600px) { .field-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* Numbered "what happens next" steps on the thank-you page. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: step; }
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: grid; place-items: center;
  inline-size: 32px; block-size: 32px;
  border: 1px solid var(--accent-deep);
  color: var(--accent-deep);
  border-radius: 50%;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); margin-block-end: var(--sp-2); }
.step p { font-size: var(--fs-small); color: var(--ink-soft); }


/* ==========================================================================
   INTRO — the short paragraph about the products
   ========================================================================== */

.intro__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--sp-9); align-items: start; }
}
.intro__media {
  margin: var(--sp-6) 0 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border);
  background: var(--surface-2);
}
.intro__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro__media--empty {
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.intro__body p { font-size: var(--fs-lead); line-height: 1.62; }
@media (min-width: 768px) { .intro__body p { font-size: var(--fs-lead-d); } }

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
}
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat b {
  display: block;
  font-size: 26px; font-weight: var(--fw-head); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
/* The unit inside a stat figure ("ft", "days") drops to body size so the
   number keeps the emphasis. A nested span, not a second type size. */
.stat b .stat__unit { font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: inherit; }


/* ==========================================================================
   WHY SUN-DRIED — asymmetric comparison, not a three-card row
   ========================================================================== */

.compare { display: grid; gap: var(--sp-5); }
@media (min-width: 800px) { .compare { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }

.compare__col {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.compare__col--bad { background: transparent; border-style: dashed; }
.compare__col h3 { margin-block-end: var(--sp-5); }
.compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.compare__list li { display: flex; gap: var(--sp-3); font-size: var(--fs-small); line-height: 1.55; }
.compare__list svg { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 1px; }
.compare__col--good svg { color: var(--ok); }
.compare__col--bad  { color: var(--ink-soft); }
.compare__col--bad svg { color: #A9A096; }

/* Inside a dark band the columns must drop their light fill, or bone text
   lands on a white card at 1.07:1. Same class of bug as the promise band:
   a component that sets a background without also setting a foreground is
   only safe until someone puts it somewhere new. */
.band .compare__col {
  background: transparent;
  border-color: var(--band-line);
  color: var(--on-band);
}
.band .compare__col h2,
.band .compare__col h3 { color: var(--on-band); }
.band .compare__col--good svg { color: var(--accent); }
.band .compare__col--bad { color: var(--on-band-soft); }
.band .compare__col--bad svg { color: var(--on-band-soft); }


/* ==========================================================================
   THE 4 CHECKS — numbered evidence steps with media slots
   ========================================================================== */

.checks { display: grid; gap: var(--sp-6); }
@media (min-width: 700px)  { .checks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .checks { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }

/* Bronze on light, amber on the band. Amber as TEXT on the bone background is
   1.62:1 — the numbered markers were designed for the dark 4-Checks section
   and went unreadable the moment /our-process/ used them on a light one. */
.check__num {
  display: inline-grid; place-items: center;
  inline-size: 32px; block-size: 32px;
  border: 1px solid var(--accent-deep);
  color: var(--accent-deep);
  border-radius: 50%;
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-4);
}
.band .check__num { border-color: var(--accent); color: var(--accent); }
.check { display: flex; flex-direction: column; }
.check h3 { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); margin-block-end: var(--sp-3); }
.check p { font-size: var(--fs-small); margin-block-end: var(--sp-5); }
/* Same trick as the product-card CTA: the media slots land on one visual
   line across the row regardless of how much copy sits above them. */
.check .media-slot {
  margin-block-start: auto;
  aspect-ratio: 3 / 2;
  background: #15120F;
  border-color: var(--band-line);
  color: var(--on-band-soft);
}

.claim {
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  padding-inline-start: var(--sp-5);
  border-inline-start: 2px solid var(--accent);
}
@media (min-width: 768px) { .claim { font-size: 22px; } }


/* ==========================================================================
   HERO ARTWORK REVIEW — internal page only (preview/hero-images.html)
   Shows each render at the aspect the banner really uses, with the text safe
   zone marked, so a clipped or badly-placed product is obvious at a glance
   rather than after it ships.
   ========================================================================== */

.hero-review__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 900px) { .hero-review__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-6); } }

.hero-review__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.hero-review__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.hero-review__frame--d { aspect-ratio: 2400 / 800; }
.hero-review__frame--m { aspect-ratio: 1080 / 1440; }

/* The tinted overlay is the area the text wash covers. Anything of the
   product under it will be washed out on the live banner. */
.hero-review__zone {
  position: absolute;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-3);
  background: rgba(253, 185, 19, .16);
  border: 1px dashed var(--accent-deep);
  pointer-events: none;
}
.hero-review__zone span {
  font-size: var(--fs-micro);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.hero-review__zone--d { inset-block: 0; inset-inline-start: 0; inline-size: 44%; }
.hero-review__zone--m { inset-inline: 0; inset-block-end: 0; block-size: 42%; }


/* ==========================================================================
   BENEFITS GRID (§6C-bis)
   The one place on the site where centred text reads as intentional rather
   than lazy — an icon grid is a legitimate exception to the left-align rule
   (§5 rule 1). Everything else on the page stays left-aligned.

   Compliance note lives with the copy, not the CSS, but it governs what may
   go in these tiles: verbs are limited to supports / helps maintain /
   contributes to / is a source of. Never regulates, balances, boosts,
   increases, reduces, lowers, optimises, restores. Never a hormone, a
   biomarker, an organ or a disease.
   ========================================================================== */

/* Same peek carousel as the product row on mobile: one tile fills the column
   and the next shows about 20%. Eight tiles in a 2-up grid on a phone is four
   screens of scrolling past things nobody reads; a swipeable row is one
   gesture and the peek says so without an arrow. */
.benefits {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block-end: var(--sp-2);
  scroll-padding-inline-start: var(--gutter);
}
.benefits::-webkit-scrollbar { display: none; }
.benefits > * { flex: 0 0 85%; scroll-snap-align: start; }

@media (min-width: 560px) { .benefits > * { flex: 0 0 46%; } }

@media (min-width: 700px) {
  .benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-5);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-block-end: 0;
  }
  .benefits > * { flex: initial; }
}
@media (min-width: 1000px) {
  .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) { .benefits { scroll-behavior: auto; } }

.benefit {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  /* Tile treatment (owner, 5 Aug): each benefit is a bordered card so the
     row reads as a set, and the longer four-line copy has a frame to sit in. */
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease);
}
.benefit:hover { border-color: var(--line-strong); }

/* Circular thin outline behind each glyph. The ring is hairline and the glyph
   is lighter than the rest of the site's icons — that lightness is the whole
   visual character of this section. */
.benefit__icon {
  display: grid;
  place-items: center;
  inline-size: 68px;
  block-size: 68px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line-strong));
  border-radius: 50%;
  color: var(--accent-deep);
  margin-block-end: var(--sp-5);
  flex: none;
}
.benefit__icon svg { inline-size: 34px; block-size: 34px; }
@media (min-width: 1000px) {
  .benefit__icon { inline-size: 76px; block-size: 76px; }
  .benefit__icon svg { inline-size: 38px; block-size: 38px; }
}
.band .benefit__icon { border-color: var(--band-line); color: var(--accent); }

/* Two lines reserved for the title so a tile whose heading wraps does not
   push its neighbours' body copy out of alignment across the row. */
.benefit h3 {
  font-size: var(--fs-h4);
  letter-spacing: var(--tr-h4);
  min-block-size: calc(2 * 1.16em);
  margin-block-end: var(--sp-3);
}
/* Four lines of copy per tile, and four lines RESERVED, so a tile whose
   sentence runs three lines does not pull the row out of alignment. */
.benefit p { font-size: var(--fs-small); color: var(--ink-soft); max-inline-size: 34ch; line-height: 1.55; min-block-size: calc(4 * 1.55em); }
.benefit a { color: var(--accent-deep); }


/* ==========================================================================
   THE PROCESS FILM (§6C-11) — one vertical 9:16 film, harvest to finished jar
   Poster until played. NEVER autoplay with sound. A standard YouTube embed
   loads roughly a megabyte of third-party JavaScript before anyone presses
   play, so the iframe is lazy-loaded on click or the file is self-hosted.

   The chapter list beside it is not decoration: it is the on-page proof that
   all four checks are covered in one continuous piece of footage.
   ========================================================================== */

.film__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .film__grid {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: center;
  }
}

/* Width derives from the height cap, so a vertical film never dominates a
   laptop screen, and never overflows a phone. */
.film__player {
  position: relative;
  inline-size: min(100%, calc(min(80vh, 900px) * 9 / 16));
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.film__player video,
.film__player img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.film__player .media-slot { block-size: 100%; aspect-ratio: auto; border: 0; }

.film__chapters { list-style: none; margin: 0; padding: 0; max-inline-size: 46ch; }
.film__chapter { border-block-end: 1px solid var(--line); }
.film__chapter:first-child { border-block-start: 1px solid var(--line); }
/* Explicit classes, not element selectors: ".film__chapter span" also matched
   the time and the muted description nested inside the row, turning each of
   them into a full-width flex container and pushing the page sideways. */
.film__row {
  inline-size: 100%;
  min-block-size: 56px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--ink);
  text-align: start;
  transition: color var(--dur) var(--ease);
}
button.film__row { cursor: pointer; }
button.film__row:hover { color: var(--accent-deep); }
.film__label { min-inline-size: 0; }
.film__chapter b { font-weight: var(--fw-head); }
.film__time {
  flex: none;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-inline-size: 5ch;
}
.band .film__chapter,
.band .film__chapter:first-child { border-color: var(--band-line); }
.band .film__row { color: var(--on-band); }
.band .film__time { color: var(--on-band-soft); }


/* ==========================================================================
   VIDEO REVIEWS — full-bleed, five items, centre item larger
   ========================================================================== */

.vids { overflow: hidden; }
.vids__viewport {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  padding-block: var(--sp-2);
  scroll-padding-inline: var(--gutter);
}
.vids__viewport::-webkit-scrollbar { display: none; }
.vids__viewport > * { scroll-snap-align: center; }
/* Headroom for the centred item's 1.1 scale so it never clips. */
@media (min-width: 700px) { .vids__viewport { padding-block: var(--sp-6); } }


/* ==========================================================================
   GOLD STANDARD — story text beside the resin-flow loop
   ========================================================================== */

.wgold__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) {
  .wgold__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--sp-9);
    align-items: center;
  }
}

.wgold__point { margin-block-start: var(--sp-6); }
.wgold__point h3 { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); margin-block-end: var(--sp-2); }
.wgold__point p { color: var(--ink-soft); }

.wgold__media {
  inline-size: min(100%, 420px);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.wgold__media video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.wgold__media .media-slot { block-size: 100%; aspect-ratio: auto; border: 0; }

/* Standalone video stage (shop process video): 4:3 landscape, centred,
   capped so it reads as a feature rather than a wall. */
.video-stage {
  inline-size: min(100%, 680px);
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.video-stage video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.video-stage .media-slot { block-size: 100%; aspect-ratio: auto; border: 0; }


/* Contact page: the three office addresses, stacked in the summary rail. */
.contact-addresses { display: grid; gap: var(--sp-4); }
.contact-addresses h3 { margin-block-end: 4px; }
.contact-addresses p { line-height: 1.7; }


/* ==========================================================================
   PRODUCT-PAGE REVIEWS — list, load-more, write form
   ========================================================================== */

.is-hidden { display: none !important; }

.review-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 700px)  { .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The shared .review card is sized for the carousel; in the grid it fills. */
.review-list .review { inline-size: auto; }

/* Inside the dialog the panel already provides the frame, so the form itself
   carries no box and no padding of its own. */
.review-form { max-inline-size: 640px; }
.review-form .comment-respond,
.review-form .comment-form { margin: 0; padding: 0; }
.review-form p { margin-block: 0 var(--sp-3); }
.review-form .comment-form label { display: block; font-size: var(--fs-small); margin-block-end: 4px; }
.review-form .comment-form input[type="text"],
.review-form .comment-form input[type="email"],
.review-form .comment-form textarea,
.review-form .comment-form select {
  inline-size: 100%;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
  margin-block-end: var(--sp-4);
  font: inherit;
}
.review-form .form-submit input {
  cursor: pointer;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--ink);
  font-weight: var(--fw-head);
  padding: 12px 20px;
}


/* ==========================================================================
   SHOP PROOF STRIP — four checkable facts above the product grid
   ========================================================================== */

/* Phone: a swipeable snap carousel (snapDots adds the dots and the loop).
   700px+: the four cells sit in one bordered row. */
.shop-strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.shop-strip::-webkit-scrollbar { display: none; }

.shop-strip__cell {
  flex: 0 0 76%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-inline-end: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 700px) {
  .shop-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
  .shop-strip__cell { flex: none; }
  .shop-strip__cell:last-child { border-inline-end: 0; }
}
a.shop-strip__cell:hover b { color: var(--accent-deep); }

.shop-strip__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-deep);
}
.shop-strip__icon svg { inline-size: 18px; block-size: 18px; }

.shop-strip__text { display: flex; flex-direction: column; min-inline-size: 0; }
.shop-strip__text b { font-size: var(--fs-small); font-weight: var(--fw-head); transition: color var(--dur) var(--ease); }
.shop-strip__text span { font-size: var(--fs-micro); color: var(--ink-soft); }


/* Founder portraits on the About page: a 3:4 pair, side by side. */
.founder__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  max-inline-size: 520px;
}
.media-slot.founder__media,
.media-slot--filled.founder__media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}


/* ==========================================================================
   DOCUMENT CARDS — lab reports and facility certificates
   ========================================================================== */

.doc-grid { gap: var(--sp-5); }
.doc-card { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Certificates are portrait documents; the slot follows the paper. */
.doc-card .media-slot,
.doc-card .media-slot--filled { aspect-ratio: 3 / 4; }
.doc-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.doc-card__foot b { font-size: var(--fs-small); }
.doc-card__meta { display: block; font-size: var(--fs-micro); color: var(--ink-soft); margin-block-start: 2px; }


/* ==========================================================================
   FAQ + BLOG
   ========================================================================== */

.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--sp-9); align-items: start; }
  /* The heading tracks the reader down a long accordion instead of being
     stranded at the top with dead space beneath it. */
  .faq__grid > .sec-head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sp-7));
  }
}

.post {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.post:hover { border-color: var(--line-strong); }
.post__media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.post__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post:hover .post__media img { transform: scale(1.04); }
.post__body { display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); padding: var(--sp-5); }
.post__cat { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); font-weight: var(--fw-head); }
.post__title { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); line-height: 1.3; }
.post__title a { text-decoration: none; }
.post__title a::after { content: ""; position: absolute; inset: 0; }  /* whole card clickable */
.post { position: relative; }
.post__meta { margin-block-start: auto; padding-block-start: var(--sp-4); font-size: var(--fs-small); color: var(--ink-soft); }


/* ==========================================================================
   LONG-FORM — pillars, blog posts, policy pages
   One layout for all three. A policy page and a pillar page are the same
   shape: a heading, a date, a body at the measure, and a contents list.
   ========================================================================== */

.article__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
  margin-block: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.article__meta b { color: var(--ink); font-weight: var(--fw-head); }

.article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
@media (min-width: 1000px) {
  .article__grid { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--sp-8); }
}

/* Contents list. Sticky on desktop so it tracks the reader instead of being
   stranded at the top of a 3,000-word page. */
.toc { font-size: var(--fs-small); }
@media (min-width: 1000px) {
  .toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-5)); }
}
.toc h2 { font-size: var(--fs-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--ink-soft); margin-block-end: var(--sp-4); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; align-items: center; min-block-size: 44px; text-decoration: none; color: var(--ink-soft); border-block-end: 1px solid var(--line); }
.toc a:hover { color: var(--accent-deep); }

/* The direct answer, in the first screen. Answer-first is a content standard
   here, not a formatting preference: the block is self-contained, 40–60 words
   and lifts cleanly into a featured snippet. */
.answer {
  padding: var(--sp-5) var(--sp-6);
  background: var(--accent-wash);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-block-end: var(--sp-7);
}
.answer h2 { font-size: var(--fs-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--accent-deep); margin-block-end: var(--sp-3); }
.answer p { font-size: var(--fs-lead); line-height: 1.55; max-width: 62ch; }

.article__body h2 { margin-block: var(--sp-8) var(--sp-5); }
.article__body h3 { margin-block: var(--sp-6) var(--sp-4); }
.article__body ul, .article__body ol { max-width: var(--measure); padding-inline-start: var(--sp-5); }
.article__body li { margin-block-end: var(--sp-3); }
.article__body li::marker { color: var(--accent-deep); }

/* The author card. An article's credibility signature, not a section: the
   amber spine marks it as an aside, and nothing inside it is allowed to
   compete with the article's own headings. */
.author {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent-deep);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.author__head {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}
.author__id { min-inline-size: 0; }
.author__eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.author__name {
  font-family: var(--font-head, inherit);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  line-height: var(--lh-head);
  color: var(--ink);
  margin: 2px 0 0;
}
.author__bio {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-inline-size: 60ch;
}
.author__facts {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}
.author__facts li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.author__facts svg {
  inline-size: 14px;
  block-size: 14px;
  color: var(--accent-deep);
  flex: none;
}
.author__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: var(--sp-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-head);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-deep);
  text-underline-offset: 3px;
  min-block-size: 44px;
}
.author__link svg { inline-size: 16px; block-size: 16px; color: var(--accent-deep); }
.author__link:hover { color: var(--accent-deep); }
.author__mark {
  flex: none;
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-deep);
}
.author__mark svg { inline-size: 22px; block-size: 22px; }


/* Geo pages reuse everything above; this is the only addition they need. */
.geo__facts { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .geo__facts { grid-template-columns: repeat(3, 1fr); } }
.geo__fact { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.geo__fact b { display: block; font-size: var(--fs-h4); letter-spacing: var(--tr-h4); margin-block-end: var(--sp-2); }
.geo__fact span { font-size: var(--fs-small); color: var(--ink-soft); }


/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

/* Stone background sets the newsletter apart from the blog row above it
   without spending the page's one dark band on a signup form. */
.news-band { background: var(--surface-2); }

.news__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 800px) { .news__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.news form { max-width: 460px; }
.news .field__hint { margin-block-start: var(--sp-3); }


/* ==========================================================================
   PDP BUY BOX V2 — reference layout (owner screenshots, 3 Aug), our tokens
   ========================================================================== */

.pdp__pricebar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-block-start: var(--sp-4); }
.pdp__pricebar .price__now { font-size: var(--fs-h3); font-weight: var(--fw-head); letter-spacing: -.01em; }

.pdp__ribbon {
  margin-block-start: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
}

/* --- Segmented One-time / Subscribe toggle -------------------------------- */
.seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.seg__btn { position: relative; display: block; cursor: pointer; }
.seg__btn input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.seg__btn > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding-inline: var(--sp-3);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: var(--fw-head);
  color: var(--ink-soft);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.seg__btn:has(input:checked) > span { background: var(--ink); color: var(--on-band); }
.seg__badge {
  padding: 2px 7px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}
.seg__btn:has(input:focus-visible) > span { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* --- Frequency cards ------------------------------------------------------ */
.freq { display: flex; flex-direction: column; gap: var(--sp-3); margin-block-start: var(--sp-4); }
.freq[hidden] { display: none; }
.freq__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.freq__row:hover { border-color: var(--ink-soft); }
.freq__row:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.freq__row input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.freq__label { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.freq__label b { font-size: var(--fs-body); font-weight: var(--fw-head); }
.freq__label span { font-size: var(--fs-micro); color: var(--ink-soft); }
.freq__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.freq__price b { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.freq__price s { font-size: var(--fs-micro); color: var(--ink-soft); }
.freq__flag {
  position: absolute;
  inset-block-start: 0; inset-inline-end: var(--sp-4);
  transform: translateY(-50%);
}
.freq__row:has(input:focus-visible) { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* --- Buy 1 / 2 / 3 tiles -------------------------------------------------- */
.buytiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.buytile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-5) var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.buytile:hover { border-color: var(--ink-soft); }
.buytile:has(input:checked) {
  border-color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.buytile input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.buytile__flag {
  position: absolute;
  inset-block-start: 0; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 8px;
  background: var(--ink);
  color: var(--accent);
  border-radius: 999px;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.buytile__name { font-size: var(--fs-small); font-weight: var(--fw-head); }
.buytile__sub { font-size: 10px; color: var(--ink-soft); line-height: 1.35; }
.buytile__price { font-size: var(--fs-body); font-weight: var(--fw-head); margin-block-start: var(--sp-2); font-variant-numeric: tabular-nums; }
.buytile__unit { font-size: 10px; color: var(--ink-soft); }
.buytile:has(input:focus-visible) { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.pdp__cta { justify-content: center; gap: var(--sp-2); }
.pdp__reassure { margin-block-start: var(--sp-3); }

/* --- Perk tiles ----------------------------------------------------------- */
/* The tiles had a big gap above the divider and none at all below, so the
   description ran straight into them (owner, 10 Aug). Equal air above and
   below the tiles, plus clearance under the whole strip. */
.pdp__perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
  padding-block: var(--sp-5);
  margin-block-end: var(--sp-5);
  border-block-start: 1px solid var(--line);
}
@media (min-width: 600px) { .pdp__perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.perk { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; font-size: var(--fs-micro); color: var(--ink-soft); }
.perk b { color: var(--ink); }
.perk a { color: var(--accent-deep); }
.perk__icon {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}
.perk__icon svg { inline-size: 18px; block-size: 18px; color: var(--accent-deep); }


/* ==========================================================================
   PDP v3 (owner round, 8 Aug): white gallery, thumb carousel, servings
   panel, louder CTA, perk tiles
   ========================================================================== */

/* Gallery: the product sits on white, like a catalogue plate. */
.pdp__shot { background: #fff; }
.pdp__shot::before { display: none; }          /* drop the tinted gradient */

/* Fill the frame. The old inset was designed around a packshot that needed
   breathing room; on a real photograph it reads as a fat white border (owner,
   9 Aug). `contain` still means nothing is ever cropped — a square photo in a
   square frame simply fills it edge to edge.
   max-block-size and max-inline-size MUST be reset here: the base rule near
   the top of this file caps height at 84%, and setting block-size alone left
   the box 556 wide by 467 tall, so the picture shrank to 467 square with 44px
   of white down each side. That was the "still too small" report. */
.pdp__shot img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  filter: none;                 /* the packshot glow, pointless on a full-bleed photo */
}

/* A grid item and a flex item both default to min-width:auto, which means
   neither will shrink below its content's minimum. With one gallery image
   that was invisible; with seventeen, the track's min-content width is the
   sum of every slide, so the gallery burst out of its column and the main
   shot rendered at roughly twice its box. Every link in the chain has to be
   allowed to shrink. */
.pdp__gallery { grid-template-columns: minmax(0, 1fr); }
.pdp__gallery > *,
.pdp__shots-track,
.pdp__shots-track .pdp__shot { min-inline-size: 0; }

/* The breadcrumb is the first thing on a product page, so a full section's
   worth of air above it was pushing the product itself down the screen for no
   reason (owner, 9 Aug). 64px -> 16px; the product now starts ~50px higher. */
.single-product #main > .section--dense:first-child { padding-block-start: var(--sp-3); }

/* Desktop: the shot is square, so its height is its width. Cap the WIDTH from
   the viewport HEIGHT and the whole gallery — big image plus thumbnails —
   lands on one screen without scrolling, and the frame stays 1:1 so nothing
   letterboxes (owner, 9 Aug). */
@media (min-width: 900px) {
  .pdp__gallery { max-inline-size: min(100%, 62vh); }
}

/* Thumbs scroll horizontally at every width, with a smooth ride. */
.pdp__thumbs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block-end: 2px;
  min-inline-size: 0;
}
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb { flex: 0 0 auto; scroll-snap-align: center; background: #fff; }
.pdp__thumb[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Phone: smaller than the desktop h1, but the first pass overcorrected and
   the title stopped reading as the title (owner, 9 Aug). Sits between h3 and
   h2 now. */
.pdp__head h1 { font-size: 26px; }
@media (min-width: 600px) { .pdp__head h1 { font-size: var(--fs-h2); } }

/* Servings panel replaces the flat ribbon: three facts, hairline-separated. */
.servings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  overflow: hidden;
}
.servings__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  border-inline-end: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.servings__cell:last-child { border-inline-end: 0; }
.servings__cell b { font-size: var(--fs-small); font-weight: var(--fw-head); line-height: 1.25; }
.servings__cell span { font-size: var(--fs-micro); color: var(--ink-soft); }

/* Frequency select: full width now the price has moved to the tiles. */
.freq--select .field__select { inline-size: 100%; }

/* Tiles show the struck one-time price while subscribing. */
.buytile__was { font-size: 10px; color: var(--ink-soft); text-decoration: line-through; }

/* The CTA is the loudest thing in the buy box. */
.pdp__cta--loud {
  flex-direction: column;
  gap: 2px;
  padding-block: var(--sp-4);
  font-size: var(--fs-body);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent-deep) 70%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pdp__cta--loud:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent-deep) 80%, transparent); }
/* .btn sets white-space:nowrap, and this button centres its content — so
   a long "Add to cart — $109.98" overflowed and was clipped at BOTH ends,
   which is where the owner's missing "A" went. Let it wrap instead. */
.pdp__cta--loud { white-space: normal; }
.pdp__cta-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  min-inline-size: 0;
  font-weight: var(--fw-bold);
  text-align: center;
}
/* Small phones: one size down keeps it on a single line at 320px. */
@media (max-width: 380px) {
  .pdp__cta--loud { font-size: var(--fs-small); }
}
.pdp__cta-note { font-size: var(--fs-micro); font-weight: var(--fw-med); opacity: .8; letter-spacing: .02em; }

/* Perks become bordered tiles; two of them are links. */
.perks--tiles { gap: var(--sp-3); }
.perks--tiles .perk {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
a.perk:hover { border-color: var(--accent-deep); }
.perks--tiles .perk__icon {
  inline-size: 36px; block-size: 36px;
  flex: none;
  border: 0;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.perk__text { display: flex; flex-direction: column; min-inline-size: 0; }
.perk__text b { font-size: var(--fs-small); line-height: 1.25; }
.perk__text span { font-size: var(--fs-micro); color: var(--ink-soft); }

/* Perks swipe at EVERY width — four tiles never fit a buy-column cleanly.
   snapDots adds the dots and the loop (main.js). */
.perks--tiles {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  grid-template-columns: none;
}
.perks--tiles::-webkit-scrollbar { display: none; }
.perks--tiles .perk { flex: 0 0 68%; scroll-snap-align: start; }
@media (min-width: 500px) { .perks--tiles .perk { flex-basis: 46%; } }
@media (min-width: 1100px) { .perks--tiles .perk { flex-basis: 42%; } }

/* Lead paragraph needs air under the title (owner, 8 Aug). */
.pdp__head .lead { margin-block-start: var(--sp-4); }

/* --- The free-jar tier: the loudest tile in the ladder -------------------- */
/* Unselected tiles read unselected (owner, 12 Aug): the free tile keeps
   only its flag chip; the amber fill belongs to :checked alone. */
.buytile--free {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: none;
}
.buytile--free:has(input:checked) {
  border-color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.buytile__flag--free {
  background: var(--accent);
  color: var(--ink);
  font-size: 10px;
  padding: 3px 10px;
}
.buytile__save {
  align-self: center;
  margin-block-start: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.buytile--free:has(input:checked) .buytile__sub { color: var(--accent-deep); font-weight: var(--fw-head); }


/* --- Process evidence as a one-row rail that drives the big frame -------- */
.pdp__strip--rail {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-block-start: var(--sp-4);
}
.pdp__strip--rail::-webkit-scrollbar { display: none; }

.evshot {
  position: relative;
  flex: 0 0 46%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
@media (min-width: 600px)  { .evshot { flex-basis: 30%; } }
@media (min-width: 1100px) { .evshot { flex-basis: 23%; } }
.evshot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.evshot:hover { border-color: var(--ink-soft); }
.evshot[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.evshot__label {
  position: absolute;
  inset-inline: 0; inset-block-end: 0;
  padding: 14px 8px 6px;
  background: linear-gradient(180deg, rgba(12,11,10,0) 0%, rgba(12,11,10,.78) 60%);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: var(--fw-head);
  letter-spacing: .04em;
  text-align: center;
}
.evshot:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }


/* ==========================================================================
   WHY CHOOSE — quality argument beside a media panel. Mobile first: media
   on top, points beneath; side by side from 900px.
   ========================================================================== */

.why__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .why__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-8); align-items: start; }
}
.why__media {
  inline-size: min(100%, 460px);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.why__media video { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; background: #0C0B0A; }
.why__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.why__media .media-slot,
.why__media .media-slot--filled { block-size: 100%; aspect-ratio: auto; border: 0; }

.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.why__point { display: flex; gap: var(--sp-4); align-items: flex-start; }
.why__icon {
  flex: none;
  display: grid; place-items: center;
  inline-size: 42px; block-size: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.why__icon svg { inline-size: 19px; block-size: 19px; color: var(--accent-deep); }
.why__point h3 { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); margin-block-end: var(--sp-2); }
.why__point p { color: var(--ink-soft); font-size: var(--fs-small); }


/* ==========================================================================
   WHAT-TO-EXPECT TIMELINE — vertical rail on phones, horizontal from 900px
   ========================================================================== */

.timeline__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.timeline__step { position: relative; padding-inline-start: var(--sp-6); }
.timeline__step::before {
  content: "";
  position: absolute;
  inset-block: 6px 0;
  inset-inline-start: 5px;
  inline-size: 2px;
  background: var(--line);
}
.timeline__step:last-child::before { inset-block-end: auto; block-size: 0; }
.timeline__dot {
  position: absolute;
  inset-block-start: 4px; inset-inline-start: 0;
  inline-size: 12px; block-size: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.timeline__when {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: var(--fw-head);
}
.timeline__head { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); margin-block: 4px var(--sp-2); }
.timeline__text { color: var(--ink-soft); font-size: var(--fs-small); }
.timeline__note { margin-block-start: var(--sp-6); max-inline-size: 70ch; }

@media (min-width: 900px) {
  .timeline__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
  .timeline__step { padding-inline-start: 0; padding-block-start: var(--sp-6); }
  .timeline__step::before {
    inset-block: 5px auto;
    inset-inline: 12px 0;
    block-size: 2px;
    inline-size: auto;
  }
  .timeline__step:last-child::before { inline-size: 0; }
  .timeline__dot { inset-block-start: 0; }
}


/* ==========================================================================
   COMPARISON CHART — one provable number, on the dark band. Mobile first.
   ========================================================================== */

.compare-chart {
  background: var(--band);
  color: var(--on-band);
  background-size: cover;
  background-position: center;
  position: relative;
}
/* With artwork behind it, a scrim keeps the type at AA. */
.compare-chart.has-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.86), rgba(12,11,10,.92));
}
.compare-chart > .container { position: relative; }

.cchart__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) {
  .cchart__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-8); align-items: center; }
}
.cchart__lead .kicker { color: var(--accent); }
.cchart__stat {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-block: var(--sp-3) var(--sp-2);
  line-height: 1;
}
.cchart__stat b {
  font-size: clamp(64px, 18vw, 128px);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: -.03em;
}
.cchart__stat span { font-size: var(--fs-h3); color: var(--on-band); }
.cchart__claim { color: var(--on-band-soft); font-size: var(--fs-small); max-inline-size: 30ch; }

.cbar { margin-block-end: var(--sp-5); }
.cbar__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--on-band-soft);
}
.cbar__head b { color: var(--on-band); font-variant-numeric: tabular-nums; }
.cbar--ours .cbar__head b { color: var(--accent); }
.cbar__track {
  block-size: 34px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.cbar__fill { display: block; block-size: 100%; border-radius: var(--radius); }
.cbar__fill--them { background: rgba(255,255,255,.28); min-inline-size: 10px; }
.cbar__fill--ours { background: var(--accent); }
.cchart__note { color: var(--on-band-soft); font-size: var(--fs-small); margin-block: var(--sp-5); max-inline-size: 62ch; }


/* ==========================================================================
   US vs THE CATEGORY — stacked cards on phones, three columns from 800px
   ========================================================================== */

/* Two clean columns with a sticky header band: ours in amber, the category
   in grey. Mobile keeps the same shape at a smaller scale rather than
   collapsing into stacked cards, so the contrast is never lost. */
/* Phone: one comparison per card, swiped (snapDots adds dots + loop).
   800px+: a single bordered table, three columns per row. */
.vs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vs::-webkit-scrollbar { display: none; }
.vs__row {
  flex: 0 0 84%;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "point" "ours" "them";
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
@media (min-width: 800px) {
  .vs {
    display: block;
    overflow: visible;
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .vs__row {
    flex: none;
    grid-template-columns: minmax(0, .5fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
    grid-template-areas: "point ours them";
    align-items: stretch;
    border: 0;
    border-block-end: 1px solid var(--line);
    border-radius: 0;
  }
  .vs__row:last-child { border-block-end: 0; }
}

.vs__point {
  grid-area: point;
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: var(--fw-head);
}
@media (min-width: 800px) { .vs__point { background: transparent; } }

.vs__cell {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.vs__cell--ours {
  grid-area: ours;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-block-end: 1px solid var(--line);
  color: var(--ink);
  font-weight: var(--fw-med);
}
@media (min-width: 800px) {
  .vs__cell--ours { border-block-end: 0; border-inline-end: 1px solid var(--line); }
}
.vs__cell--them { grid-area: them; color: var(--ink-soft); }

.vs__tag {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: var(--fw-head);
  margin-block-end: 2px;
}
@media (min-width: 800px) { .vs__row:not(:first-child) .vs__tag { display: none; } }

.vs__mark {
  flex: none;
  display: grid; place-items: center;
  inline-size: 20px; block-size: 20px;
  margin-block-start: 1px;
  border-radius: 999px;
}
.vs__mark svg { inline-size: 12px; block-size: 12px; }
.vs__cell--ours .vs__mark { background: var(--accent); color: var(--ink); }
.vs__cell--them .vs__mark { background: color-mix(in srgb, var(--ink-soft) 16%, transparent); color: var(--ink-soft); }


/* --- Timeline: the benefit block under each stage ------------------------ */
.timeline__feel {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-block-start: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.5;
}
.timeline__feel-icon { flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 999px; background: var(--accent); }
.timeline__feel-icon svg { inline-size: 13px; block-size: 13px; color: var(--ink); }

/* --- Rating link above the product title -------------------------------- */
.pdp__ratelink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.pdp__ratelink:hover { color: var(--accent-deep); }
.pdp__ratelink:hover span { text-decoration: underline; }


/* --- Compact proof band -------------------------------------------------- */
.band--compact .sec-head h2 { font-size: var(--fs-h3); }
@media (min-width: 900px) { .band--compact .sec-head h2 { font-size: var(--fs-h3-d, var(--fs-h3)); } }
.band--compact .checks--strip .media-slot { display: none; }


/* ==========================================================================
   REVIEW DIALOG — rate, then media, then write
   ========================================================================== */

.rvdlg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--sp-4); }
.rvdlg[hidden] { display: none; }
.rvdlg__scrim { position: absolute; inset: 0; background: rgba(12,11,10,.6); backdrop-filter: blur(2px); }
.rvdlg__panel {
  position: relative;
  inline-size: min(100%, 560px);
  max-block-size: 90vh;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(12,11,10,.5);
}
.rvdlg__x { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); }
.rvdlg__step { display: none; }
.rvdlg__step.is-active { display: block; }
.rvdlg__title { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
.rvdlg__sub { color: var(--ink-soft); font-size: var(--fs-small); margin-block-start: var(--sp-2); }

.rvstars { display: flex; gap: var(--sp-2); justify-content: center; margin-block: var(--sp-6); }
.rvstars__btn {
  padding: var(--sp-2);
  background: none; border: 0; cursor: pointer;
  color: var(--line-strong);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rvstars__btn svg { inline-size: 34px; block-size: 34px; }
.rvstars__btn:hover { transform: scale(1.12); }
.rvstars__btn.is-on { color: var(--accent); }

.rvopts { display: grid; gap: var(--sp-3); margin-block: var(--sp-5); }
@media (min-width: 520px) { .rvopts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rvopt {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.rvopt:hover { border-color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.rvopt b { font-size: var(--fs-small); }
.rvopt span:last-child { font-size: var(--fs-micro); color: var(--ink-soft); }
.rvopt__badge {
  position: absolute;
  inset-block-start: 0; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  white-space: nowrap;
}
.rvopt--best { border-color: var(--accent-deep); }
.rvdlg__file { font-size: var(--fs-micro); color: var(--accent-deep); text-align: center; }
.rvdlg__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-block-start: var(--sp-4); }
.rvdlg__legal { margin-block-start: var(--sp-4); font-size: 11px; color: var(--ink-soft); line-height: 1.5; }
.rvdlg__tick {
  display: grid; place-items: center;
  inline-size: 52px; block-size: 52px;
  margin-block-end: var(--sp-4);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 26%, var(--surface));
}
.rvdlg__tick svg { inline-size: 26px; block-size: 26px; color: var(--accent-deep); }

/* Add-to-cart while the request is in flight. */
.pdp__cta.is-busy { opacity: .72; pointer-events: none; }


/* ==========================================================================
   BENEFITS MARQUEE — full-bleed ribbon, slow right-to-left, never stops
   ========================================================================== */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--band);
  color: var(--on-band);
  padding-block: var(--sp-4);
}
.marquee__track {
  display: flex;
  inline-size: max-content;
  animation: pks-marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  list-style: none;
  margin: 0;
  padding-inline: calc(var(--sp-7) / 2);
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: var(--fw-head);
  letter-spacing: .01em;
}
.marquee__icon {
  display: grid;
  place-items: center;
  inline-size: 28px; block-size: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.marquee__icon svg { inline-size: 15px; block-size: 15px; color: var(--accent); }

/* Two identical lists, so shifting by exactly half the track loops seamlessly. */
@keyframes pks-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}


/* ==========================================================================
   CHECKOUT V2 — column padding (no inner .container any more), shipping rows
   in the left column, boxed payment, summary coupon
   ========================================================================== */

.co__form-col { padding-inline: var(--sp-5); }
@media (min-width: 900px) { .co__form-col { padding-inline: var(--sp-6) var(--sp-8); } }
.co__summary-col { padding: var(--sp-5); }
@media (min-width: 900px) {
  .co__summary-col { padding: var(--sp-7) var(--sp-6) var(--sp-8) var(--sp-8); }
}

/* Shipping rows moved out of the review table (main.js). Same card language
   as the frequency rows. */
.co__ship-rows .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.co__ship-rows .woocommerce-shipping-methods li { position: relative; }
.co__ship-rows .woocommerce-shipping-methods label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 52px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  inline-size: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.co__ship-rows .woocommerce-shipping-methods li:has(input:checked) label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.co__ship-rows .woocommerce-shipping-methods input.shipping_method { accent-color: var(--accent-deep); inline-size: 18px; block-size: 18px; flex: none; margin: 0; }
.co__ship-rows .woocommerce-shipping-methods .woocommerce-Price-amount { margin-inline-start: auto; font-weight: var(--fw-head); }
/* The table's shipping row is redundant once its list is moved out. */
.co__totals tr.woocommerce-shipping-totals th { vertical-align: top; }
.co__totals tr.woocommerce-shipping-totals td > *:not(.woocommerce-Price-amount):not(.amount) { display: none; }

/* Summary items + coupon */
.co__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding-block: var(--sp-3); }
.co__item-info { min-inline-size: 0; }
.co__item-title { font-size: var(--fs-small); font-weight: var(--fw-head); line-height: 1.35; }
.co__item-sub { font-size: var(--fs-micro); color: var(--ink-soft); margin-block-start: 2px; }
.co__item-price { font-size: var(--fs-small); font-weight: var(--fw-head); white-space: nowrap; }

.co__coupon { display: flex; gap: var(--sp-3); margin-block: var(--sp-4); }
.co__coupon .field__input { flex: 1; background: var(--surface); }
.co__coupon .btn { flex: none; }
.co__coupon-msg { font-size: var(--fs-small); color: var(--ink-soft); }
.co__coupon-msg.is-error { color: var(--err); }
.co__coupon-msg:empty { display: none; }

.co__policies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-micro);
}
.co__policies a { color: var(--ink-soft); text-underline-offset: .25em; }
.co__policies a:hover { color: var(--ink); }


/* ==========================================================================
   SLIDE CART V2 — reference layout (owner screenshot, 3 Aug)
   ========================================================================== */

.panel[data-panel="cart"] .panel__head { border-block-end: 1px solid var(--line); }
.panel[data-panel="cart"] .panel__head .micro { font-size: var(--fs-h4); font-weight: var(--fw-head); letter-spacing: var(--tr-h4); text-transform: none; }

.cart__items--drawer { list-style: none; margin: 0; padding: 0; }
.cart__items--drawer .line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line);
}
.cart__items--drawer .line__media { inline-size: 64px; block-size: 64px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; }
.cart__items--drawer .line__media img { inline-size: 82%; block-size: 82%; object-fit: contain; }
.cart__items--drawer .line__title { font-size: var(--fs-small); font-weight: var(--fw-head); letter-spacing: 0; }
.cart__items--drawer .line__variant { font-size: var(--fs-micro); }
.cart__items--drawer .line__controls { margin-block-start: var(--sp-3); gap: var(--sp-3); }
.cart__items--drawer .line__price { font-size: var(--fs-small); text-align: end; }
.cart__items--drawer .btn--quiet { min-block-size: 32px; font-size: var(--fs-micro); }

/* Compact stepper for the drawer — a value between two 32px buttons. */
.qty--sm { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.qty--sm .qty__btn { inline-size: 32px; block-size: 32px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; font-size: var(--fs-body); color: var(--ink); }
.qty--sm .qty__val { min-inline-size: 28px; text-align: center; font-size: var(--fs-small); font-weight: var(--fw-head); font-variant-numeric: tabular-nums; }
.qty--sm.is-busy { opacity: .5; pointer-events: none; }

.drawer__totals { padding-block: var(--sp-4); border-block-start: 1px solid var(--line); margin-block-end: var(--sp-4); }
.drawer__totals .row b { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); }
.drawer__totals p { margin-block-start: var(--sp-2); }
.drawer__continue { justify-content: center; margin-block-start: var(--sp-2); }

/* --- PDP frequency dropdown (replaces the card list, owner 4 Aug) ---------- */
.freq--select { gap: var(--sp-2); }
.freq__pick { display: flex; align-items: center; gap: var(--sp-4); }
.freq__pick .field__select { flex: 1; }
.freq__saving { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.freq__saving b { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.freq__saving s { font-size: var(--fs-micro); color: var(--ink-soft); }

/* ==========================================================================
   CHECKOUT V3 — measured against the reference screenshot (owner, 4 Aug):
   centered composition, 460px form measure, 400px summary measure, one
   field rhythm, shipping options as proper selectable rows, compact summary
   items. Overrides the earlier checkout blocks (later in the cascade).
   ========================================================================== */

@media (min-width: 900px) {
  .co__grid { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); }
  .co__form-col { padding-block: var(--sp-7) var(--sp-9); }
  .co__form { max-inline-size: 460px; }
  .co__summary { max-inline-size: 400px; margin-inline-end: auto; }
}

/* --- One field rhythm ------------------------------------------------------ */
.co__form .form-row { margin: 0 0 var(--sp-4); gap: 6px; }
.co__form .form-row label {
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.co__form .form-row input.input-text,
.co__form .form-row select {
  block-size: 50px;
  border-radius: var(--radius);
}
.co__form .form-row input.input-text:focus,
.co__form .form-row select:focus,
.co__form .form-row textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.co__fields { gap: 0 var(--sp-4); }
.co__section { margin-block-end: var(--sp-6); }
.co__section-head { margin-block-end: var(--sp-4); }
.co__section-head h2 { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); }
.co__note { font-size: var(--fs-small); color: var(--ink-soft); margin-block-end: var(--sp-4); }

.woocommerce-account-fields { margin-block: var(--sp-2) 0; }
.woocommerce-account-fields .checkbox { font-size: var(--fs-small); }

/* --- Shipping options: input is a SIBLING of the label ---------------------
   <li><input class="shipping_method"><label>Method name <span class=amount>
   — the row is the li, the radio sits inline, the price pushes right. */
.co__ship-rows .woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 52px;
  padding-inline: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.co__ship-rows .woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.co__ship-rows .woocommerce-shipping-methods label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  min-block-size: 52px;
}
.co__ship-rows .woocommerce-shipping-methods .woocommerce-Price-amount { font-weight: var(--fw-head); white-space: nowrap; }

/* --- Payment group --------------------------------------------------------- */
.woocommerce-checkout-payment ul.wc_payment_methods { border-radius: var(--radius); }
.woocommerce-checkout-payment li.wc_payment_method > label { font-size: var(--fs-small); min-block-size: 52px; }
.woocommerce-checkout-payment .payment_box { font-size: var(--fs-micro); }
.woocommerce-privacy-policy-text { font-size: var(--fs-micro); color: var(--ink-soft); margin-block: var(--sp-4); }
.woocommerce-privacy-policy-text a { color: inherit; }

/* --- Summary column -------------------------------------------------------- */
.co__item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding-block: var(--sp-3); }
.co__thumb { position: relative; inline-size: 56px; block-size: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; }
.co__thumb img { inline-size: 84%; block-size: 84%; object-fit: contain; }
.co__thumb-qty {
  position: absolute;
  inset-block-start: -6px; inset-inline-end: -6px;
  inline-size: 20px; block-size: 20px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--on-band);
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--fw-head);
}
.co__thumb { overflow: visible; }
.co__thumb > img { border-radius: var(--radius); }
.co__item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.co__item-sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.co__item-price { padding-block-start: 2px; }

.co__coupon { margin-block: var(--sp-5); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--line-strong); }
.co__coupon .field__input { block-size: 48px; }

.co__totals table { margin-block-start: var(--sp-2); }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding-block: var(--sp-2); border-block-start: 0; font-size: var(--fs-small); }
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th { font-weight: var(--fw-reg); color: var(--ink-soft); }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  padding-block: var(--sp-4) 0;
  border-block-start: 1px solid var(--line-strong);
  font-size: var(--fs-h4);
  letter-spacing: var(--tr-h4);
}
[data-ship-mirror] { font-weight: var(--fw-head); }
.co__summary .blx-total-note { display: none; }
.co__summary-col .blx-sub-note { margin-block-start: var(--sp-5); }

/* ==========================================================================
   CHECKOUT V4 — Shopify-style single column (owner's build spec, 5 Aug).
   Every colour/face/size goes through the --cko-* aliases below, mapped to
   the site tokens; spacing and radii are literal because they are layout.
   Supersedes the co__ checkout blocks above (different class namespace).
   ========================================================================== */

:root {
  --cko-surface:      var(--surface);
  --cko-surface-2:    var(--surface-2);
  --cko-ink:          var(--ink);
  --cko-ink-soft:     var(--ink-soft);
  --cko-ink-mute:     var(--ink-soft);
  --cko-on-ink:       var(--on-band);
  --cko-accent:       var(--accent);
  --cko-accent-text:  var(--accent-deep);   /* amber darkened to text contrast */
  --cko-focus:        var(--accent-deep);
  --cko-line:         var(--line);
  --cko-line-strong:  var(--line-strong);
  --cko-font-display: var(--font);
  --cko-text-sm:      var(--fs-small);
  --cko-text-lg:      var(--fs-h3);
  --cko-radius:       var(--radius-lg);
}

.cko-main { padding-block: 1.5rem 3rem; padding-inline: var(--sp-5); }
.cko { max-width: 640px; margin: 0 auto; }
.cko-form { display: block; }

/* Desktop: form left, sticky summary right. */
@media (min-width: 1000px) {
  .cko { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .cko > form.cko-form { grid-column: 1; grid-row: 1; min-width: 0; }
  .cko > .cko-summary { grid-column: 2; grid-row: 1; position: sticky; top: 24px; margin: 0; }
}

/* Collapsible summary */
.cko-summary { border: 1px solid var(--cko-line); border-radius: var(--cko-radius); background: var(--cko-surface-2); margin-bottom: 1.5rem; }
.cko-summary__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; cursor: pointer; list-style: none; }
.cko-summary__bar::-webkit-details-marker { display: none; }
.cko-summary__label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cko-accent-text); font-weight: 500; }
.cko-summary__chev { width: 18px; height: 18px; transition: transform 200ms ease; }
.cko-summary[open] .cko-summary__chev { transform: rotate(180deg); }
.cko-summary__total { font-family: var(--cko-font-display); font-size: var(--cko-text-lg); font-weight: 600; }
.cko-summary__body { padding: 0 1rem 1rem; border-top: 1px solid var(--cko-line); }

.cko-line { display: grid; grid-template-columns: 48px 1fr auto; gap: 0.75rem; align-items: center; padding-top: 0.9rem; }
.cko-line__thumb { position: relative; width: 48px; height: 48px; }
.cko-line__thumb img { width: 48px; height: 48px; border-radius: var(--cko-radius); border: 1px solid var(--cko-line); object-fit: cover; }
.cko-line__qty { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--cko-ink); color: var(--cko-on-ink); border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.cko-line__name { font-size: var(--cko-text-sm); line-height: 1.3; }
.cko-line__meta { display: block; font-size: var(--fs-micro); color: var(--cko-ink-mute); margin-top: 2px; }
.cko-line__price { font-weight: 600; }
.cko-summary__lines { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cko-line); display: flex; flex-direction: column; gap: 0.4rem; }

/* Express block hides itself when no gateway fills it. */
.express-pay { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 480px) { .express-pay { grid-template-columns: repeat(3, 1fr); } }
.express-pay:empty { display: none; }
[data-express-wrap]:has(.express-pay:empty) { display: none; }
[data-express-wrap]:has(.express-pay:empty) + .pay-divider { display: none; }
.pay-divider { display: flex; align-items: center; gap: 1rem; color: var(--cko-ink-mute); font-size: var(--cko-text-sm); margin-block: 1.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
.pay-divider::before, .pay-divider::after { content: ""; flex: 1; height: 1px; background: var(--cko-line); }

/* Sections */
.cko-sec { padding-top: 1.5rem; }
.cko-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cko-sec__title { font-family: var(--cko-font-display); font-size: var(--cko-text-lg); font-weight: 600; margin: 0; letter-spacing: var(--tr-h3); }
.cko-sec__note { color: var(--cko-ink-mute); font-size: var(--cko-text-sm); margin: -0.4rem 0 1rem; }
.cko-signin { color: var(--cko-accent-text); font-size: var(--cko-text-sm); text-decoration: underline; text-underline-offset: 0.15em; }
.cko-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: var(--cko-text-sm); color: var(--cko-ink-soft); cursor: pointer; }
.cko-check input { width: 18px; height: 18px; accent-color: var(--cko-accent-text); }

/* Fields: one column, 48px min height so mobile taps are comfortable. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
.woocommerce-checkout .cko-form .form-row { margin: 0; padding: 0; }
.woocommerce-checkout .cko-form .form-row label { font-size: var(--cko-text-sm); font-weight: 500; color: var(--cko-ink); margin-bottom: 0.3rem; display: block; text-transform: none; letter-spacing: 0; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { width: 100%; border: 1px solid var(--cko-line-strong); border-radius: var(--cko-radius); padding: 0.8rem 0.9rem; font: inherit; background: var(--cko-surface); color: var(--cko-ink); min-height: 48px; block-size: auto; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus { outline: 2px solid var(--cko-focus); outline-offset: 1px; box-shadow: none; border-color: var(--cko-line-strong); }
.woocommerce .woocommerce-billing-fields h3 { display: none; }

#order_review { margin-top: 1.5rem; }
.cko-review { display: block; }

/* Shipping cards */
/* The bare "Shipping method" title has no __head wrapper, so it carried no
   bottom margin and sat flush on the first option (owner, 12 Aug). */
.cko-review .cko-sec__title { margin-block-end: 1rem; }
.cko-ship { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.cko-radio { position: relative; display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--cko-line-strong); border-radius: var(--cko-radius); padding: 0.9rem 1rem; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; font-size: var(--cko-text-sm); font-weight: 500; color: var(--cko-ink); text-transform: none; letter-spacing: 0; }
.cko-radio__price { margin-left: auto; font-weight: 600; white-space: nowrap; }
.cko-radio input { position: absolute; opacity: 0; pointer-events: none; }
.cko-radio__dot { width: 20px; height: 20px; border: 2px solid var(--cko-line-strong); border-radius: 50%; flex: none; display: grid; place-items: center; transition: border-color 200ms ease; }
.cko-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cko-accent-text); transform: scale(0); transition: transform 200ms ease; }
.cko-radio.is-selected, .cko-radio:has(input:checked) { border-color: var(--cko-accent-text); background: var(--cko-surface); }
.cko-radio:has(input:checked) .cko-radio__dot { border-color: var(--cko-accent-text); }
.cko-radio:has(input:checked) .cko-radio__dot::after { transform: scale(1); }
.cko-radio:focus-within { outline: 2px solid var(--cko-focus); outline-offset: 2px; }
.cko-ship__note { color: var(--cko-ink-mute); font-size: var(--cko-text-sm); }

/* Totals */
.cko-totals { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--cko-line); }
.cko-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--cko-text-sm); color: var(--cko-ink-soft); }
.cko-total-row--grand { font-family: var(--cko-font-display); font-size: var(--cko-text-lg); font-weight: 600; color: var(--cko-ink); padding-top: 0.6rem; border-top: 1px solid var(--cko-line); }

/* Discount box (between totals and payment) */
.cko-discount { display: flex; gap: 0.6rem; margin-block: 1.25rem 0.4rem; }
.cko-discount__input { flex: 1; min-width: 0; border: 1px solid var(--cko-line-strong); border-radius: var(--cko-radius); padding: 0.8rem 0.9rem; font: inherit; background: var(--cko-surface); color: var(--cko-ink); min-height: 48px; }
.cko-discount__input:focus { outline: 2px solid var(--cko-focus); outline-offset: 1px; }
.cko-discount .btn { flex: none; }
.cko-discount-msg { font-size: var(--cko-text-sm); color: var(--cko-ink-mute); margin-bottom: 0.5rem; }
.cko-discount-msg.is-error { color: var(--err); }
.cko-discount-msg:empty { display: none; }

/* Payment sits inside #order_review after the discount box. */
.woocommerce-checkout-payment { margin-top: 1rem; }

.cko-trust { display: flex; justify-content: center; margin-top: 1.5rem; color: var(--cko-ink-mute); font-size: var(--cko-text-sm); }
.cko-trust span { display: inline-flex; align-items: center; gap: 0.5rem; }
.cko-trust svg { width: 16px; height: 16px; }
.tabular { font-variant-numeric: tabular-nums; }

/* Desktop: the summary column is permanent — main.js keeps it open; the bar
   stops looking clickable and the chevron goes. */
@media (min-width: 1000px) {
  .cko-summary__bar { cursor: default; }
  .cko-summary__chev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cko-summary__chev, .cko-radio, .cko-radio__dot, .cko-radio__dot::after { transition: none; }
}
/* --- Video review: thumbnail in the list, clip in a lightbox ------------- */
/* A small thumbnail, not a player. The clip opens in the lightbox on tap
   (owner, 10 Aug) — at 220px it read as an embedded video people expected to
   play in place. */
.rvvid {
	position: relative; display: block; inline-size: 96px; max-inline-size: 96px;
	aspect-ratio: 4 / 5; margin-block: var(--sp-3) 0; padding: 0; border: 0;
	border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
	background: var(--surface-2); color: var(--paper);
}
.rvvid img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.rvvid::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(12,11,10,.55), transparent 55%);
}
.rvvid__play {
	position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
	translate: -50% -50%; z-index: 1;
	inline-size: 32px; block-size: 32px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255,255,255,.92); color: var(--ink);
	transition: scale .18s ease;
}
.rvvid:hover .rvvid__play, .rvvid:focus-visible .rvvid__play { scale: 1.08; }
.rvvid__play svg { inline-size: 13px; block-size: 13px; margin-inline-start: 1px; }
.rvvid__tag {
	position: absolute; z-index: 1; inset-block-end: 5px; inset-inline-start: 6px;
	font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}

.rvlb { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: var(--sp-4); }
.rvlb[hidden] { display: none; }
.rvlb__scrim { position: absolute; inset: 0; background: rgba(12,11,10,.82); }
.rvlb__panel { position: relative; inline-size: min(420px, 100%); }
.rvlb__panel video {
	inline-size: 100%; max-block-size: 82vh; display: block;
	border-radius: var(--radius-lg); background: #000;
}
.rvlb__x {
	position: absolute; inset-block-start: -46px; inset-inline-end: 0;
	background: rgba(255,255,255,.14); color: var(--paper); border-color: transparent;
}

/* --- Review score panel: big average + a bar per star, bars filter -------- */
.rvsum {
	display: grid; gap: var(--sp-5); align-items: center;
	grid-template-columns: minmax(0, 1fr);
	padding: var(--sp-5); margin-block-end: var(--sp-5);
	border: 1px solid var(--line); border-radius: var(--radius-lg);
	background: var(--surface);
}
@media (min-width: 700px) {
	.rvsum { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); }
}
.rvsum__score { display: grid; justify-items: center; gap: 6px; text-align: center; }
.rvsum__big {
	font-family: var(--font-display); font-size: clamp(44px, 9vw, 62px);
	line-height: 1; color: var(--ink);
}
.rvsum__count { font-size: var(--fs-small); color: var(--ink-soft); }

.rvsum__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rvbar {
	inline-size: 100%; display: flex; align-items: center; gap: 10px;
	padding: 5px 8px; border: 1px solid transparent; border-radius: var(--radius);
	background: none; cursor: pointer; text-align: start; color: inherit;
	transition: background-color .15s ease, border-color .15s ease;
}
.rvbar:hover:not(:disabled) { background: var(--surface-2); }
.rvbar.is-on { border-color: var(--accent); background: var(--accent-wash); }
.rvbar:disabled { opacity: .45; cursor: default; }
.rvbar .stars { flex: none; }
.rvbar__rail {
	flex: 1; block-size: 8px; border-radius: 99px; overflow: hidden;
	background: var(--surface-2); border: 1px solid var(--line);
}
.rvbar__fill { display: block; block-size: 100%; background: var(--accent); }
.rvbar__n { flex: none; min-inline-size: 3ch; text-align: end; font-size: var(--fs-small); color: var(--ink-soft); }
.rvbar--all { font-weight: 600; justify-content: space-between; }

.review-empty { text-align: center; padding-block: var(--sp-6); }

/* --- Slide cart: tighter ---------------------------------------------------
   Padding was only part of it. Measured on the live drawer, one product line
   was 165px and the footer 284px — the weight sat in a 48px quantity stepper,
   a 44px close button and loose line-heights on the title and plan text, not
   in the section padding (owner, 10 Aug). */
.panel[data-panel="cart"] .panel__head { padding-block: 10px; }
.panel[data-panel="cart"] .panel__head .icon-btn { inline-size: 36px; block-size: 36px; }
.panel[data-panel="cart"] .panel__body { padding-block: var(--sp-3); }
.panel[data-panel="cart"] .panel__foot { padding-block: var(--sp-3); }
.panel[data-panel="cart"] .panel__foot .stack-3 { gap: 6px; }
.panel[data-panel="cart"] .panel__foot .mbe-5 { margin-block-end: var(--sp-3); }
.panel[data-panel="cart"] .drawer__totals { margin-block: var(--sp-3); padding-block: var(--sp-3); }
.panel[data-panel="cart"] .drawer__totals .summary__note,
.panel[data-panel="cart"] .drawer__totals .muted { margin-block-start: 4px; font-size: var(--fs-micro); }
.panel[data-panel="cart"] .drawer__continue { margin-block-start: 4px; }

.panel[data-panel="cart"] .cart__items--drawer .line { padding-block: 10px; gap: var(--sp-3); }
.panel[data-panel="cart"] .cart__items--drawer .line__title { line-height: 1.3; }
.panel[data-panel="cart"] .cart__items--drawer .line__variant { line-height: 1.35; margin-block-start: 1px; }
.panel[data-panel="cart"] .cart__items--drawer .line__controls { margin-block-start: 6px; }
.panel[data-panel="cart"] .cart__items--drawer .qty--sm { block-size: 32px; }
.panel[data-panel="cart"] .cart__items--drawer .qty--sm .qty__btn { inline-size: 30px; block-size: 30px; }
.panel[data-panel="cart"] .cart__items--drawer .line__media { inline-size: 56px; block-size: 56px; }
.panel[data-panel="cart"] .cart__items--drawer .line { grid-template-columns: 56px minmax(0, 1fr) auto; }

/* Owner asked for a 40px head and a 200px foot (10 Aug). The head was driven
   by its close button, the foot by four stacked blocks each with their own
   margins — so both come down by shrinking the contents, not by clipping. */
.panel[data-panel="cart"] .panel__head {
  padding-block: 4px;
  min-block-size: 0;
  max-block-size: 40px;
}
.panel[data-panel="cart"] .panel__head .icon-btn { inline-size: 30px; block-size: 30px; }
.panel[data-panel="cart"] .panel__head .micro { font-size: var(--fs-body); line-height: 1.2; }

.panel[data-panel="cart"] .panel__foot { padding-block: 10px; }
.panel[data-panel="cart"] .panel__foot .stack-3 { gap: 5px; }
.panel[data-panel="cart"] .panel__foot .mbe-5 { margin-block-end: 8px; }
.panel[data-panel="cart"] .drawer__totals { margin-block: 8px; padding-block: 8px; }
.panel[data-panel="cart"] .drawer__totals .summary__note,
.panel[data-panel="cart"] .drawer__totals .muted { margin-block-start: 2px; }
/* Continue shopping reads as a link down here, not a second button. */
.panel[data-panel="cart"] .drawer__continue {
  block-size: auto;
  min-block-size: 0;
  padding-block: 4px;
  margin-block-start: 6px;
  font-size: var(--fs-small);
}
.panel[data-panel="cart"] .panel__foot .btn--primary { block-size: 46px; }
.panel[data-panel="cart"] .panel__foot .stack-3 .small { font-size: var(--fs-micro); }
.panel[data-panel="cart"] .drawer__totals { padding-block: 6px; margin-block: 6px; }
.panel[data-panel="cart"] .drawer__totals .summary__note,
.panel[data-panel="cart"] .drawer__totals .muted { font-size: var(--fs-micro); line-height: 1.35; }
/* Gift bar now leads the drawer body, so it needs a hairline under it rather
   than the margin it carried when it sat above the totals. */
.panel[data-panel="cart"] .drawer__gift {
  gap: 5px;
  padding-block-end: 10px;
  margin-block-end: 4px;
  border-block-end: 1px solid var(--line);
}

/* Phone: the platform line gets its own row under the stars instead of
   squeezing in beside them, where it wrapped mid-phrase (owner, 10 Aug). */
@media (max-width: 599px) {
  .pdp__ratelink { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
  .pdp__ratelink .pdp__rate {
    flex: 0 0 100%;
    margin-block-start: 0;
    font-size: var(--fs-micro);
    line-height: 1.35;
  }
}

/* --- The 300mg callout ---------------------------------------------------- */
.dose-note {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	margin-block-start: var(--sp-5);
	padding: var(--sp-4);
	background: var(--accent-wash);
	border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--radius);
}
/* The number stacks over its unit inside the circle — at one size the pair
   crowded the rim (owner, 12 Aug). */
.dose-note__badge {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 15px;
	line-height: 1;
	letter-spacing: .01em;
}
.dose-note__badge small {
	font-family: var(--font-body);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--accent) 75%, #fff);
}
.dose-note__head { font-weight: var(--fw-head); margin-block-end: 2px; }
.dose-note__text { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 599px) {
	.dose-note { gap: var(--sp-3); padding: var(--sp-3); }
	.dose-note__badge { inline-size: 46px; block-size: 46px; font-size: 12px; }
	.dose-note__badge small { font-size: 7px; }
}

/* The divider under the free-gift bar runs the full drawer width (owner,
   11 Aug): the block bleeds through the body's inline padding and puts it
   back inside itself, so only the border escapes. */
.panel[data-panel="cart"] .drawer__gift {
	margin-inline: calc(var(--sp-5) * -1);
	padding-inline: var(--sp-5);
}

/* Author box: the founder photo replaces the mountain mark when uploaded. */
.author__photo {
	flex: none;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--accent);
}
.author__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.author__role {
	font-size: var(--fs-micro);
	font-weight: var(--fw-head);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-deep);
	margin-block: -6px 6px;
}

/* Tracking box on the thank-you page and My Account order view. */
.pks-track-box {
	margin-block-start: var(--sp-5);
	padding: var(--sp-4);
	background: var(--accent-wash);
	border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
	border-radius: var(--radius-lg);
}

/* --- Wholesale page fixes (owner, 12 Aug) --------------------------------- */

/* The clips rail follows a heading-only hero; two full section paddings
   stacked into a visible hole. The hero keeps its bottom, the rail drops
   its top. */
#wholesale-videos { padding-block-start: 0; }

/* "50+ brands" cards sit on the band background; the default muted colours
   read as grey-on-white. Full-strength ink for heading and body both. */
#wholesale-clients .card__body h3,
#wholesale-clients .card__body p { color: var(--ink); }

/* ==========================================================================
   THANK-YOU PAGE v2 (owner, 12 Aug) — confirmation mark, fact tiles, order
   card with thumbnails, address aside. Class namespace: ty-*.
   ========================================================================== */

.ty-hero { text-align: center; max-inline-size: 560px; margin-inline: auto; margin-block-end: var(--sp-6); }
.ty-check { display: inline-grid; place-items: center; inline-size: 64px; block-size: 64px; color: var(--accent-deep); margin-block-end: var(--sp-4); }
.ty-check svg { inline-size: 100%; block-size: 100%; }
.ty-check__ring { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ty-draw 600ms ease-out forwards; }
.ty-check__tick { stroke-dasharray: 32; stroke-dashoffset: 32; animation: ty-draw 350ms ease-out 450ms forwards; }
@keyframes ty-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ty-check__ring, .ty-check__tick { animation: none; stroke-dashoffset: 0; }
}
.ty-kicker { font-size: var(--fs-micro); font-weight: var(--fw-head); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); margin-block-end: var(--sp-2); }
.ty-title { font-size: var(--fs-h1); margin-block-end: var(--sp-3); }
.ty-lead { color: var(--ink-soft); }

.ty-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3);
  max-inline-size: 760px; margin-inline: auto; margin-block-end: var(--sp-7);
}
@media (min-width: 700px) { .ty-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ty-fact { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--sp-3) var(--sp-4); text-align: center; }
.ty-fact dt { font-size: var(--fs-micro); font-weight: var(--fw-head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-block-end: 2px; }
.ty-fact dd { margin: 0; font-weight: var(--fw-head); font-size: var(--fs-small); }

.ty-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .ty-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-7); } }

.ty-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--sp-5); }
.ty-card + .ty-card { margin-block-start: var(--sp-4); }
.ty-card__title { font-size: var(--fs-h4); margin-block-end: var(--sp-4); }
.ty-card--help p { color: var(--ink-soft); margin-block-end: var(--sp-4); }

.ty-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.ty-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
.ty-line__thumb { position: relative; inline-size: 56px; block-size: 56px; }
.ty-line__thumb img { inline-size: 56px; block-size: 56px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.ty-line__qty {
  position: absolute; top: -7px; right: -7px;
  min-inline-size: 20px; block-size: 20px; padding-inline: 5px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; font-size: 11px; font-weight: var(--fw-head);
}
.ty-line__name b { display: block; font-size: var(--fs-small); line-height: 1.35; }
.ty-line__meta { display: block; font-size: var(--fs-micro); color: var(--ink-soft); margin-block-start: 2px; }
.ty-line__price { font-weight: var(--fw-head); white-space: nowrap; }

.ty-totals { margin: var(--sp-4) 0 0; padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); }
.ty-total { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-small); color: var(--ink-soft); }
.ty-total dd { margin: 0; }
.ty-total--grand { color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-body); padding-block-start: var(--sp-2); border-block-start: 1px solid var(--line); }

.ty-addr { font-style: normal; color: var(--ink-soft); line-height: 1.65; }

/* ==========================================================================
   POLICY MODAL — checkout keeps the customer (owner, 12 Aug): policy links
   open in a dialog instead of navigating away mid-purchase.
   ========================================================================== */

.cko-policy { border: 0; border-radius: var(--radius-lg); padding: 0; inline-size: min(720px, calc(100vw - 2rem)); max-block-size: 85vh; }
.cko-policy::backdrop { background: rgba(23, 19, 14, .55); }
.cko-policy__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border-block-end: 1px solid var(--line);
}
.cko-policy__title { font-size: var(--fs-h4); font-weight: var(--fw-head); margin: 0; }
.cko-policy__close {
  flex: none; display: grid; place-items: center;
  inline-size: 36px; block-size: 36px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--ink); cursor: pointer; font-size: 18px; line-height: 1;
}
.cko-policy__close:hover { background: var(--surface-2); }
.cko-policy__body { padding: var(--sp-5); overflow-y: auto; max-block-size: calc(85vh - 70px); }
.cko-policy__body.is-loading { display: grid; place-items: center; min-block-size: 160px; color: var(--ink-soft); }
/* The fetched page arrives whole; its own chrome is not wanted in a dialog. */
.cko-policy__body .breadcrumb, .cko-policy__body .crumbs { display: none; }
.cko-policy__body .section { padding-block: 0; }
.cko-policy__body .section + .section { padding-block-start: var(--sp-5); }

/* Contact card inside the checkout dialog (owner, 12 Aug). */
.cko-contact { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; }
.cko-contact li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); border-block-end: 1px solid var(--line); }
.cko-contact li:last-child { border-block-end: 0; }
.cko-contact span { font-size: var(--fs-micro); font-weight: var(--fw-head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.cko-contact a { font-weight: var(--fw-head); color: var(--ink); text-decoration: none; }
.cko-contact a:hover { color: var(--accent-deep); }
.cko-contact__note { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; }

/* ==========================================================================
   CHECKOUT V5 — the Shopify split (owner, 12 Aug: "100% same").
   White form column left, grey summary column right with a full-height
   hairline divider, minimal header, floating labels, policy links row.
   Payment area untouched (gateways arrive later).
   ========================================================================== */

/* Minimal header */
.cko-hdr { background: var(--surface); border-block-end: 1px solid var(--line); }
.cko-hdr__inner {
  max-inline-size: 1080px; margin-inline: auto;
  padding: 12px var(--sp-5);
  display: flex; align-items: center; justify-content: space-between;
}
.cko-hdr__brand img { display: block; block-size: 42px; inline-size: auto; }
.cko-hdr__cart { display: inline-flex; color: var(--accent-deep); }
.cko-hdr__cart svg { inline-size: 22px; block-size: 22px; }

/* Floating labels: label rests inside the field, floats on focus/value. */
.cko-form .form-row { position: relative; }
/* Specificity beats the older v4 rule (.woocommerce-checkout … label,
   ink/500) — the label is quiet gray in BOTH states, like Shopify's; only
   the typed value is ink. */
.woocommerce-checkout .cko-form .form-row > label {
  position: absolute; z-index: 2;
  inset-inline-start: 13px; top: 14px;
  margin: 0; padding: 0;
  font-size: var(--cko-text-sm); font-weight: 400; color: var(--cko-ink-mute);
  line-height: 1.2; pointer-events: none;
  transition: top 150ms ease, font-size 150ms ease;
}
.woocommerce-checkout .cko-form .form-row:focus-within > label,
.woocommerce-checkout .cko-form .form-row.is-filled > label { top: 6px; font-size: 11px; color: var(--cko-ink-mute); }
.cko-form .form-row input.input-text,
.cko-form .form-row textarea,
.cko-form .form-row select { padding: 1.35rem 0.85rem 0.4rem; }
/* Shopify shows no required asterisk. The required attribute still speaks
   to screen readers and validation. */
.cko-form .form-row .required { display: none; }
/* selectWoo renders its own box; give it the same height and label room. */
.cko-form .select2-container .select2-selection--single {
  block-size: 48px; display: flex; align-items: flex-end;
  border: 1px solid var(--cko-line-strong); border-radius: var(--cko-radius);
  padding: 0.35rem 0.85rem;
}
.cko-form .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; }
.cko-form .select2-container .select2-selection__arrow { block-size: 46px; }

/* Shipping method: the chosen option is an amber-tinted card. */
.cko-radio:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent-deep);
}
/* A single available rate shows as a plain box, no radio dot (Shopify). */
.cko-ship > .cko-radio:only-of-type .cko-radio__dot { display: none; }

/* Policy links row under the pay area. */
.cko-policies {
  list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0;
  border-block-start: 1px solid var(--cko-line);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
}
.cko-policies a {
  font-size: var(--fs-micro); color: var(--cko-ink-soft);
  text-decoration: underline; text-underline-offset: 0.15em;
}
.cko-policies a:hover { color: var(--cko-ink); }

/* The split (desktop). The divider position = container centre + half the
   width difference between the two columns (1080 total, 420 summary). */
@media (min-width: 1000px) {
  body.woocommerce-checkout .cko-main {
    background: linear-gradient(90deg, var(--surface) calc(50% + 120px), var(--surface-2) calc(50% + 120px));
    padding-block: 0; min-block-size: calc(100vh - 67px);
  }
  .cko { max-width: 1080px; grid-template-columns: minmax(0, 1fr) 420px; gap: 0; align-items: stretch; }
  .cko > form.cko-form { padding-block: 2rem 4rem; padding-inline-end: clamp(2rem, 4vw, 3.25rem); }
  .cko > .cko-summary {
    background: transparent; border: 0; border-radius: 0; margin: 0;
    border-inline-start: 1px solid var(--line);
    padding: 2rem 0 2rem clamp(1.5rem, 3vw, 2.5rem);
    position: static;
  }
  .cko-summary__bar { display: none; }
  .cko-summary__body {
    display: block; border-block-start: 0; padding: 0;
    position: sticky; top: 2rem;
  }
  .cko-summary .cko-line:first-child { padding-block-start: 0; }
}

/* Summary panel details (both widths). */
.cko-summary .cko-discount { margin-block: 1.1rem 0.3rem; }
.cko-summary__lines .cko-total-row--grand { font-size: var(--fs-h4); padding-block-start: 0.7rem; }

/* --- Checkout fields, screenshot-exact (owner, 12 Aug round 2) ------------ */

/* Flex, not grid: City / State / ZIP share one row via .pks-third, and when
   a country has no state field the remaining two split the row cleanly. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
}
.woocommerce-checkout .cko-form .form-row { flex: 0 0 100%; }
.woocommerce-checkout .cko-form .form-row.pks-third { flex: 1 1 0; min-inline-size: 26%; }
/* Phones stack them: City, State, ZIP each on a full row (owner, 12 Aug). */
@media (max-width: 699px) {
  .woocommerce-checkout .cko-form .form-row.pks-third { flex: 0 0 100%; min-inline-size: 100%; }
}

/* Selects float their label by CSS alone (:has) — a select virtually always
   holds a value, and the iPhone screenshot (12 Aug) proved the JS-only route
   fails on stale-cached assets. */
.woocommerce-checkout .cko-form .form-row:has(select) > label { top: 6px; font-size: 11px; }
/* Native select chrome ignores block padding on iOS — draw our own box. */
.woocommerce-checkout .cko-form .form-row select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m8 10 4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
  padding: 1.35rem 2.3rem 0.4rem 0.85rem;
}
/* An unfilled select would show "Select an option…" straight through the
   floated label zone — hidden until the row is filled. */
.cko-form .form-row:not(.is-filled):not(:focus-within) select { color: transparent; }

/* The reference's in-field icons: magnifier on Address, help on Phone.
   Decorative only, so pointer-events stay off. */
#billing_address_1_field, #billing_phone_field { position: relative; }
#billing_address_1_field::after, #billing_phone_field::after {
  content: ""; position: absolute; z-index: 2;
  inset-inline-end: 12px; top: 50%; transform: translateY(-50%);
  inline-size: 19px; block-size: 19px;
  pointer-events: none; opacity: 0.6;
  background: no-repeat center / contain;
}
#billing_address_1_field::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
#billing_phone_field::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.9 9.6a2.2 2.2 0 1 1 3.1 2c-.7.3-1 .7-1 1.4v.4'/%3E%3Ccircle cx='12' cy='16.6' r='.9' fill='%23616161' stroke='none'/%3E%3C/svg%3E");
}
#billing_address_1_field input.input-text,
#billing_phone_field input.input-text { padding-inline-end: 2.5rem; }

/* --- Mobile pay area: Add discount + Total above Pay now (12 Aug) --------- */
.cko-paysum { margin-block: 1.2rem; }
/* The pill hugs its text (owner, 12 Aug) — border on the summary only,
   sized to content, exactly like Shopify's Add discount chip. */
.cko-paysum__discount summary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  inline-size: fit-content;
  padding: 0.7rem 1rem; cursor: pointer; list-style: none;
  border: 1px solid var(--cko-line-strong); border-radius: var(--cko-radius);
  font-size: var(--cko-text-sm); font-weight: 500; color: var(--cko-ink);
}
.cko-paysum__discount summary::-webkit-details-marker { display: none; }
.cko-paysum__discount summary svg { inline-size: 18px; block-size: 18px; color: var(--cko-ink-soft); }
.cko-paysum__discount .cko-discount { margin: 0.8rem 0 0; padding: 0; }
.cko-paysum__discount .cko-discount-msg { padding: 0; }
.cko-paysum__total {
  display: flex; align-items: center; gap: 0.75rem;
  inline-size: 100%; margin-block-start: 1rem; padding: 0.4rem 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--cko-ink); text-align: start;
}
.cko-paysum__thumb img { inline-size: 40px; block-size: 40px; object-fit: cover; border: 1px solid var(--cko-line); border-radius: 8px; display: block; }
.cko-paysum__what { display: flex; flex-direction: column; }
.cko-paysum__what b { font-family: var(--cko-font-display); font-size: var(--cko-text-lg); font-weight: 600; line-height: 1.15; }
.cko-paysum__what span { font-size: var(--fs-micro); color: var(--cko-ink-mute); }
.cko-paysum__amount { margin-inline-start: auto; font-family: var(--cko-font-display); font-size: var(--cko-text-lg); font-weight: 600; }
.cko-paysum__chev { inline-size: 18px; block-size: 18px; color: var(--cko-ink-soft); flex: none; }
/* Desktop: the sticky right panel already shows discount + totals. */
@media (min-width: 1000px) { .cko-paysum { display: none; } }

/* --- Home blog cards: slider on phones, two per screen (owner, 12 Aug) ---- */
@media (max-width: 699px) {
  .posts-slider {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block-end: var(--sp-2);
  }
  .posts-slider::-webkit-scrollbar { display: none; }
  .posts-slider > .post {
    flex: 0 0 calc((100% - var(--sp-3)) / 2);
    scroll-snap-align: start;
  }
  .posts-slider .post__title { font-size: 13.5px; line-height: 1.3; }
  .posts-slider .post__meta { font-size: var(--fs-micro); }
}
/* The loop system rebuilds this track's nodes, so the reveal observer never
   marks them .is-in — at ANY width. Without this the blog cards sit at
   opacity 0 forever and the section reads as a blank gap above the footer
   (owner report, 13 Aug). */
.posts-slider > .reveal { opacity: 1; transform: none; }

/* --- PDP review sort (owner, 13 Aug) ------------------------------------- */
.review-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.review-sort__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.review-sort__select { inline-size: auto; min-inline-size: 160px; }

/* --- PDP buy-button attention shake (owner, 12 Aug) -----------------------
   A soft wiggle every ~2s: the shake lives in the first 20% of the cycle,
   the rest is still, so it reads as a nudge rather than a tremor. */
@keyframes pks-shake {
  0%, 20%, 100% { transform: translateX(0) rotate(0); }
  4%  { transform: translateX(-2px) rotate(-0.6deg); }
  8%  { transform: translateX(2px) rotate(0.6deg); }
  12% { transform: translateX(-1.5px) rotate(-0.4deg); }
  16% { transform: translateX(1px) rotate(0.2deg); }
}
[data-pdp-cta] .btn--primary,
button[data-pdp-cta],
.sticky-buy .btn {
  animation: pks-shake 2s ease-in-out infinite;
}
[data-pdp-cta] .btn--primary:hover, [data-pdp-cta] .btn--primary:focus-visible,
button[data-pdp-cta]:hover, button[data-pdp-cta]:focus-visible,
.sticky-buy .btn:hover, .sticky-buy .btn:focus-visible {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-pdp-cta] .btn--primary, button[data-pdp-cta], .sticky-buy .btn { animation: none; }
}


/* ==========================================================================
   WELCOME OFFER — first-order discount popup (owner, 13 Aug)
   ========================================================================== */

.wlc {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
/* display:flex above BEATS the UA [hidden] rule — without this line the
   popup is visible from second zero and every hidden-toggle is a no-op
   (the exact bug shipped in 1.51.0). */
.wlc[hidden] { display: none; }
body.wlc-open { overflow: hidden; }
.wlc__card {
  position: relative;
  inline-size: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -24px color-mix(in srgb, var(--ink) 60%, transparent);
  padding: var(--sp-7) var(--sp-6) var(--sp-5);
  text-align: center;
}
.wlc__close {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  inline-size: 36px;
  block-size: 36px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.wlc__close:hover { color: var(--ink); }
.wlc__title { font-size: var(--fs-h3); margin-block: var(--sp-3) var(--sp-2); }
.wlc__lead { color: var(--ink-soft); font-size: var(--fs-small); margin-block-end: var(--sp-4); }
.wlc__card .field { text-align: start; margin-block-end: var(--sp-3); }
.wlc__btn { inline-size: 100%; justify-content: center; }
.wlc__error {
  color: #B3261E;
  font-size: var(--fs-small);
  margin-block-end: var(--sp-3);
}
.wlc__dismiss {
  display: block;
  margin: var(--sp-3) auto 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  text-decoration: underline;
  cursor: pointer;
}
.wlc__fine {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--ink-soft);
}
.wlc__code {
  font-family: var(--font-head, inherit);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: var(--sp-3) var(--sp-4);
  margin-block: var(--sp-3);
  border: 1px dashed var(--accent-deep);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  user-select: all;
}

/* ==========================================================================
   PHOTO GALLERY — real production photography (owner, 13 Aug)
   ========================================================================== */

/* About: natural aspect ratios in columns, nothing cropped, nothing huge. */
.pgal--masonry { columns: 2; column-gap: var(--sp-4); }
@media (min-width: 800px) { .pgal--masonry { columns: 3; } }
.pgal--masonry .pgal__item { break-inside: avoid; margin: 0 0 var(--sp-4); }

/* Home: one swipeable row under the four checks, capped height. */
.pgal--strip {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block-end: var(--sp-2);
}
.pgal--strip::-webkit-scrollbar { display: none; }
.pgal--strip { cursor: grab; }
.pgal--strip.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.pgal--strip.is-dragging .pgal__img { pointer-events: none; }
.pgal--strip .pgal__item {
  flex: none;
  margin: 0;
  block-size: 220px;
  scroll-snap-align: start;
}
@media (min-width: 800px) { .pgal--strip .pgal__item { block-size: 280px; } }
.pgal--strip .pgal__img { block-size: 100%; inline-size: auto; }

.pgal__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* ==========================================================================
   REVIEWS CAROUSEL — "What customers say" with customer photos (13 Aug)
   ========================================================================== */

.rvc__viewport {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: var(--sp-2) var(--gutter) var(--sp-3);
  cursor: grab;
}
.rvc__viewport::-webkit-scrollbar { display: none; }
.rvc__viewport.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.rvc__viewport.is-dragging img { pointer-events: none; }
.rvc__card {
  flex: none;
  /* Two per screen on phones (owner, 13 Aug) — same rhythm as the video
     rail and the blog slider. */
  inline-size: calc((100vw - 2 * var(--gutter) - var(--sp-4)) / 2);
  margin: 0;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rvc__media { aspect-ratio: 4 / 5; overflow: hidden; }
.rvc__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.rvc__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.rvc__quote {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rvc__name { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-head); }
.rvc__verified {
  display: inline-block;
  margin-inline-start: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-body);
  color: var(--accent-deep);
}

/* Reviews carousel: score header + six-up desktop (owner, 13 Aug) */
.rvc__score {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: calc(var(--sp-4) * -1) var(--sp-5);
}
.rvc__score .stars { flex: none; }
.rvc__score-line { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.rvc__score-line strong { color: var(--ink); }
@media (min-width: 700px) {
  .rvc__card { inline-size: min(46vw, 300px); }
}
@media (min-width: 1000px) {
  .rvc__card { inline-size: calc((100vw - 2 * var(--gutter) - 5 * var(--sp-4)) / 6); }
  .rvc__quote { -webkit-line-clamp: 3; }
}
/* Phones: the photo takes less of the card so the words still lead. */
@media (max-width: 699px) {
  .rvc__media { aspect-ratio: 1 / 1; }
  .rvc__body { padding: var(--sp-3); }
  .rvc__quote { font-size: 13px; -webkit-line-clamp: 5; }
  .rvc__name { font-size: 13px; }
}

/* Review rewards: honeypot, staff replies, FTC disclosure (13 Aug) */
.pks-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.review__disclosure {
  display: inline-block;
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 8px;
  margin-inline-start: var(--sp-2);
}
.review__reply {
  margin-block-start: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 2px solid var(--accent-deep);
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}
.review__reply-head { margin: 0 0 var(--sp-1); font-weight: var(--fw-head); }
.review__reply-head span { color: var(--accent-deep); font-weight: var(--fw-body); }
.review__reply p { margin: 0; }


/* ==========================================================================
   LIGHT MOBILE BANNER (owner reference, 13 Aug)
   Phones drop the photographic background entirely: the packshot sits on a
   warm cream field with centred copy, which is what the owner's reference
   site does and what reads best on a 390px screen. Tablets and desktop are
   untouched — their rules all start at 700px.
   ========================================================================== */

@media (max-width: 699px) {
  .hero { background: var(--accent-wash); }
  .hero::before { display: none; }
  /* Slides are equal-height flex items and were centring their content, so
     the shorter slide floated 17px down and the artwork missed the top edge.
     Top-align on phones; the cream field fills any slack underneath. */
  .hero-c__slide { padding-block: 0 var(--sp-6); align-items: flex-start; }
  .hero-c__slide.has-bg { background-image: none; background-color: transparent; }
  .hero-c__slide.has-bg::before { display: none; }

  /* The packshot comes back — it is hidden site-wide under .has-bg. */
  .hero-c__slide.has-bg .hero__media { display: block; }

  /* Show the commissioned banner artwork itself (owner, 13 Aug). When a
     slide has artwork, that is the image; the plain packshot only appears
     on slides that have none. */
  .hero__art {
    display: block;
    /*
     * Full-bleed (owner, 13 Aug): the artwork escapes the container gutter
     * and the slide's top padding, so it starts at the very top edge of the
     * banner and runs edge to edge — then dissolves into the cream field at
     * the bottom instead of stopping on a hard line. The mask fades to
     * transparent, so whatever the banner background is, the image melts
     * into exactly that colour.
     */
    inline-size: calc(100% + 2 * var(--gutter));
    /* base.css caps every img at max-width:100%, which silently clamped the
       bleed back to the container width — the cap has to be lifted here. */
    max-inline-size: none;
    margin-inline: calc(var(--gutter) * -1);
    block-size: auto;
    /* 3:4 render, product in the top half, empty text band below: crop from
       the top so the product is whole and lands above the fade. */
    max-block-size: 340px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
  }
  /* The copy follows the fade closely — a wide gap would reintroduce the
     edge the mask just removed. */
  .hero-c__slide .hero__grid { gap: var(--sp-4); }
  .hero-c__slide.has-bg .hero__shot { display: none; }
  .hero__grid { gap: var(--sp-4); justify-items: center; }
  .hero__media { order: -1; inline-size: 100%; }
  .hero__shot { display: flex; justify-content: center; }
  .hero__shot img { max-block-size: 196px; inline-size: auto; }

  /* Centred copy, ink on cream. */
  .hero__copy { text-align: center; }
  .hero-c__slide .kicker { display: block; margin-block-end: 8px; }
  .hero__title { max-inline-size: none; font-size: 30px; line-height: 1.12; }
  .hero__lead { margin-inline: auto; max-inline-size: 34ch; font-size: 15px; }
  .hero__cta { justify-content: center; margin-block-start: var(--sp-4); }
  .hero__trust { margin-block-start: var(--sp-4); padding-block-start: var(--sp-3); }
  .hero__trust { justify-content: center; text-align: center; }
  .price { justify-content: center; }
}

/* Announcement bar: the short label on phones, the full one from 700px. */
.announce__lg { display: none; }
@media (min-width: 700px) {
  .announce__sm { display: none; }
  .announce__lg { display: inline; }
}

/* Product page: the check photo leads, the words follow (owner, 13 Aug). */
.check--media-first .media-slot { margin-block-end: var(--sp-4); }
.check--media-first p { margin-block-end: 0; }

/* One lab report on a product page: card at a readable width, not a lone
   quarter-width tile stranded in a four-column grid. */
.doc-grid--one { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .doc-grid--one { grid-template-columns: minmax(0, 420px); } }

/* Banner slide dots — phones only (owner, 13 Aug). */
.hero-c__dots { display: none; }
@media (max-width: 699px) {
  .hero-c__dots {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    padding-block: var(--sp-4) var(--sp-5);
    background: var(--accent-wash);
  }
  .hero-c__dot {
    inline-size: 8px;
    block-size: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 22%, transparent);
    cursor: pointer;
    transition: inline-size var(--dur) var(--ease), background-color var(--dur) var(--ease);
    /* The visual dot is 8px; the tap target around it is not. */
    position: relative;
  }
  .hero-c__dot::after {
    content: "";
    position: absolute;
    inset: -14px -8px;
  }
  .hero-c__dot[aria-current="true"] {
    inline-size: 22px;
    background: var(--accent-deep);
  }
}

/* --------------------------------------------------------------------------
   ARTICLE FAQ — the written Q&A rendered through the site accordion.
   Framed as its own block so it reads as an answerable index rather than
   more body copy (owner, 13 Aug).
   -------------------------------------------------------------------------- */
.post-faq {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line);
}
.post-faq__title {
  font-size: var(--fs-h2);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-head);
  margin-block-end: var(--sp-5);
}
@media (min-width: 768px) {
  .post-faq__title { font-size: var(--fs-h2-d); }
}
/* Inside an accordion the answers are already inside a panel, so the prose
   heading rhythm must not add a second layer of spacing. */
.post-faq .acc__panel > :first-child { margin-block-start: 0; }
.post-faq .acc__panel p + p { margin-block-start: var(--sp-3); }

}