/** Shopify CDN: Minification failed

Line 1701:40 Unexpected "16px"

**/
/* ==========================================================================
   HLTH+ PDP v2 — ported from the Lovable "Product Page Enhancer" design
   ==========================================================================
   Layout, spacing, type scale and geometry are a faithful port of the Lovable
   source. The COLOUR layer is deliberately not: Lovable was built on the old
   HLTH palette (#391664 doing double duty as heading ink and CTA fill, white
   page, #803CEE accent, #F6F1FE tint). Every colour here resolves through
   hlth-tokens.css instead, so this template stays on the design system:

     Lovable                  ->  design system token
     ---------------------------------------------------------------
     bg-background  #FFFFFF   ->  --color-bg           #FAF8F2 cream
     bg-mist        #F6F1FE   ->  --color-brand-tint   #F1EBFC
     text-brand     #391664   ->  --color-ink          #241A32
     bg-brand       #391664   ->  --color-brand-deep   #4C1D95
     text-violet    #803CEE   ->  --color-brand        #7C3AED
     muted-fg       #635C72   ->  --color-body         #5D6472
     border         #E3DDEE   ->  --color-line         #ECE7DE  (decorative)
                                  --color-line-strong  #877F93  (controls)

   The cream page means Lovable's white inner tiles still read as a third
   level: cream page -> lavender panel -> white tile.

   THIS FILE IS THE REFERENCE DESIGN for the rest of the site, so it holds
   itself to three rules:

     1. No literals. Every colour, size, radius and leading resolves to a
        token in hlth-tokens.css. If a value isn't in the scale, the scale is
        wrong — don't hardcode around it.
     2. Shadow encodes z-position, never surface identity. The only shadow in
        this file is on the fixed sticky bar. Cards, panels, buttons, badges
        and hover states are flat; depth comes from the background ladder plus
        a 1px hairline, and selection is a border-colour change, not a lift.
     3. Borders that bound a CONTROL use --color-line-strong (3:1, WCAG
        1.4.11). --color-line is 1.16:1 and is decorative only.

   Body copy uses --color-body, not --color-ink-soft: the latter is 4.15:1 on
   the lavender panel this design leans on hardest, which fails AA.

   Depends on hlth-tokens.css (values) and hlth-theme.css (.hlth-btn,
   .hlth-heading, .hlth-container, .hlth-stars, ...). Load after both.
   ========================================================================== */

.hlth-pdp {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Every icon in this template is an inline <svg> with no width/height
   attribute, so an unsized one falls back to the SVG default of 300x150 and
   blows the layout apart. This is the backstop: 1em square unless a more
   specific rule below says otherwise. Never remove it. */
.hlth-pdp svg {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Lovable used max-w-7xl (1280px) for the split sections and max-w-6xl
   (1152px) for the centred ones. The system's --hlth-max-width is 1160px,
   which is close enough to 6xl to reuse; the wide split keeps its own. */
/* ONE container. These were 1280 / 1152 / 896 with a 24px gutter, against the
   theme's own 1160 / 20 — so the hero's left edge, the nutrients' left edge
   and every hlth-section's left edge were three different verticals down the
   same page. They all resolve to the site token now; --tight keeps a reading
   measure for the FAQ by capping the text, not by moving the frame. */
.hlth-pdp__wide,
.hlth-pdp__narrow,
.hlth-pdp__tight {
  max-width: var(--hlth-max-width);
  margin: 0 auto;
  padding-left: var(--hlth-gutter);
  padding-right: var(--hlth-gutter);
}
.hlth-pdp__tight > * { max-width: 896px; margin-left: auto; margin-right: auto; }
/* Narrower gutters on a phone. 20px each side is a tenth of a 390px screen
   spent on nothing, and the cards inside already carry their own padding.

   Set on the TOKEN, not on each container: full-bleed rails cancel the gutter
   with a negative margin, so a container that changed while the token did not
   left those rails overhanging the viewport by the difference. */
@media (max-width: 47.9375rem) {
  :root { --hlth-gutter: 16px; }
  .hlth-pdp__wide,
  .hlth-pdp__narrow,
  .hlth-pdp__tight { padding-left: var(--hlth-gutter); padding-right: var(--hlth-gutter); }
}

/* One section-padding rule, one breakpoint step. Everything else on the site
   invents its own value (ten distinct desktop paddings at last count) — this
   is the ladder they converge on. */
.hlth-pdp__pad { padding-top: 38px; padding-bottom: 38px; }
/* The hero runs tighter — it opens the page, so it needs less air above. */
.hlth-pdp__pad--hero { padding-top: 40px; padding-bottom: 40px; }
/* Trailing band that follows a section which has already padded. */
.hlth-pdp__pad-bottom { padding-bottom: 64px; }
@media (min-width: 1024px) {
  .hlth-pdp__pad { padding-top: 64px; padding-bottom: 64px; }
  .hlth-pdp__pad--hero { padding-top: 48px; padding-bottom: 48px; }
  .hlth-pdp__pad-bottom { padding-bottom: 80px; }
}

.hlth-pdp--tint { background: var(--color-brand-tint); }
/* Crisper opener than the cream page — used for heroes and the header, where
   cream reads heavier than the brand wants. */
.hlth-pdp--white { background: var(--color-white); }
/* Cream ground. A white card on a white section hides its own hairline, which
   is why the GLP-1 reviews sit on cream — the border is what makes them cards. */
.hlth-pdp--page { background: var(--color-bg); }


/* ---- Dark purple panel --------------------------------------------------
   The same treatment the GLP-1 landing pages use (.hlth-section--purple):
   --gradient-brand ground, white type, #DDCCFF on the italic accent. All AA
   on this ground — white 10.95:1, accent 7.38:1, body at 85% 8.29:1. */
.hlth-pdp--purple { background: var(--gradient-brand); color: var(--color-on-brand); }
.hlth-pdp--purple .hlth-pdp__h1,
.hlth-pdp--purple .hlth-pdp__h2,
.hlth-pdp--purple .hlth-pdp__nutrient h3 { color: var(--color-on-brand); }
.hlth-pdp--purple .hlth-pdp__h1 em,
.hlth-pdp--purple .hlth-pdp__h2 em { color: #DDCCFF; }
.hlth-pdp--purple .hlth-pdp__eyebrow { color: rgb(255 255 255 / 0.85); }
.hlth-pdp--purple .hlth-pdp__body,
.hlth-pdp--purple .hlth-pdp__nutrient p { color: rgb(255 255 255 / 0.85); }

/* Cards on the purple are a lift of the ground, not the white/tint ladder. */
.hlth-pdp--purple .hlth-pdp__nutrient {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.18);
}
.hlth-pdp--purple .hlth-pdp__badges li {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.22);
  color: var(--color-on-brand);
}
.hlth-pdp--purple .hlth-pdp__badges svg { color: #DDCCFF; }
.hlth-pdp--purple .hlth-pdp__rail-nav button {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.28);
  color: var(--color-on-brand);
}
.hlth-pdp--purple .hlth-pdp__rail-nav button:hover { background: rgb(255 255 255 / 0.16); }

/* Nutrient icon chip */
.hlth-pdp__nutrient-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  color: var(--color-brand);
}
.hlth-pdp__nutrient-icon svg { width: 22px; height: 22px; }
/* .hlth-icon-img sizes itself from --icon-size — see the note at that rule. */
.hlth-pdp--purple .hlth-pdp__nutrient-icon {
  background: rgb(255 255 255 / 0.14);
  color: var(--color-on-brand);
}
.hlth-pdp--rule { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }

/* ---- Shared atoms ------------------------------------------------------ */

.hlth-pdp__eyebrow {
  font-size: var(--fs-meta);
  font-weight: 600;
  /* 0.14em, matching .hlth-eyebrow. Two eyebrow specs on one page meant the
     same 12px caps sat at two different widths section to section. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0;
}
.hlth-pdp__eyebrow--tight { color: var(--color-body); }

.hlth-pdp__h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 16px 0 0;
}
/* Italic, and bright purple. The GLP-1 pages set their accent upright, but
   their heading is Libre Franklin — a sans, where an italic reads as a slant
   rather than a cut. This heading is Instrument Serif, which has a true
   italic, and that is the accent the face is designed for. Matching GLP-1's
   font-style literally lost the distinction rather than sharing it; matching
   its INTENT — one bright-purple accent per heading — is what carries across,
   and the colour is already identical at #803CEE. */
.hlth-pdp__h2 em { font-style: italic; color: var(--color-brand); }
/* Sub-section heading. This was an inline font-size override on .hlth-pdp__h2,
   which meant one class rendered at two different ramps. */
.hlth-pdp__h2--sub { font-size: var(--fs-h2); }
.hlth-pdp__h2--flush { margin-top: 0; }
.hlth-pdp__h2--center { text-align: center; margin-left: auto; margin-right: auto; }

.hlth-pdp__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-body);
  margin: 20px 0 0;
  max-width: 36rem;
}
/* Was an inline font-size:14px override, so "body" meant 16px in the
   stylesheet and 14px in the compare section. */
.hlth-pdp__body--sm { font-size: var(--fs-base); }
/* text-align included, which the name always implied. Both existing callers
   wanted it and neither got it from here: the compare section inherits it from
   a wrapper div, the page-cards intro patches it with an inline style. So this
   changes nothing that exists and stops the next caller having to work it out
   again. */
.hlth-pdp__body--center { margin-left: auto; margin-right: auto; max-width: 42rem; text-align: center; }

/* Sub-heading note under a section heading (options subtitle). */
.hlth-pdp__sub-note { margin: 4px 0 0; font-size: var(--fs-base); color: var(--color-body); }

.hlth-pdp__inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.hlth-pdp__inline-link:hover { color: var(--color-brand); }
.hlth-pdp__inline-link svg { width: 14px; height: 14px; }

/* Rating / trust bar */
.hlth-pdp__trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* Matched to the GLP-1 pages: bare amber stars, no pill. The purple chip read
   as a badge you could press rather than as a rating, and it made the same
   4.9 look like a different measurement on the two surfaces. 16px and 2px
   apart are the GLP-1 values. */
.hlth-pdp__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-star);
}
.hlth-pdp__stars svg { width: 16px; height: 16px; fill: currentColor; }
.hlth-pdp__rating { font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }
.hlth-pdp__reviews { font-size: var(--fs-base); color: var(--color-body); }
.hlth-pdp__apd { font-size: var(--fs-base); font-weight: 600; color: var(--color-brand); }

/* Trust icon row under CTAs */
.hlth-pdp__trustrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* 20px column gap put the four badges 36px over the 592px buy column and
     dropped "Secure Checkout" onto a second line by itself, which read as an
     afterthought rather than part of the set. */
  gap: 8px 16px;
  margin-top: 16px;
  font-size: var(--fs-meta);
  color: var(--color-body);
}
.hlth-pdp__trustrow span { display: inline-flex; align-items: center; gap: 6px; }
.hlth-pdp__trustrow svg { width: 14px; height: 14px; color: var(--color-brand); flex: none; }

/* Guarantee band */
.hlth-pdp__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius-surface);
  background: var(--color-brand-deep);
  color: var(--color-on-brand);
  padding: 20px;
  margin-top: 24px;
}
.hlth-pdp__guarantee svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.hlth-pdp__guarantee strong { display: block; font-size: var(--fs-base); font-weight: 600; }
.hlth-pdp__guarantee span { display: block; font-size: var(--fs-base); color: var(--color-on-brand-soft); }

/* Full-width CTA buttons (Lovable used rounded-full py-4) */
.hlth-pdp__cta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-brand-deep);
  color: var(--color-on-brand);
  padding: 16px 28px;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.hlth-pdp__cta:hover { opacity: 0.9; }
.hlth-pdp__cta--ghost {
  background: var(--color-white);
  border-color: var(--color-brand);
  color: var(--color-ink);
  margin-top: 12px;
}
.hlth-pdp__cta--ghost:hover { background: var(--color-brand-tint); opacity: 1; }
.hlth-pdp__cta svg { width: 16px; height: 16px; flex: none; }
/* The CTA shipped at three different paddings. Two tiers, named. */
.hlth-pdp__cta--sm { padding: 14px 28px; }

/* Trust bar / inline-link modifiers, replacing inline styles. */
.hlth-pdp__trustbar--center { justify-content: center; margin-top: 16px; }
.hlth-pdp__trustbar--indent { margin-top: 12px; }
.hlth-pdp__inline-link--tight { margin-top: 12px; }
.hlth-pdp__inline-link--center { display: flex; justify-content: center; width: 100%; }
.hlth-pdp__eyebrow--group { margin-top: 32px; }
.hlth-pdp__eyebrow--center { text-align: center; }

/* ---- Split layout (hero, subscribe, bundle, flavours) ------------------ */

.hlth-pdp__split {
  display: grid;
  gap: 48px;
  align-items: start;
}
@media (min-width: 1024px) {
  .hlth-pdp__split { grid-template-columns: 1fr 1fr; }
  .hlth-pdp__media--sticky { position: sticky; top: 24px; }
  /* Alternating image side down a page. Order only — the media panel stays
     first in the DOM so it is still read before the copy it belongs to. */
  .hlth-pdp__split--flip > :first-child { order: 2; }
}

/* No frame. The panel used to be a tinted, padded box with overflow:hidden —
   which put a lavender halo around every product shot, and clipped the bottom
   corners off anything sitting at the foot of the column (the nutrition bar
   lost its rounded corners to it). The image carries its own radius; the panel
   is now just a layout slot. */
.hlth-pdp__media {
  background: none;
  padding: 0;
}

/* Direct child on purpose. As a descendant selector this also caught the icons
   in .hlth-pdp__media-tiles and stretched them to width:100%, which beat the
   30px box they ask for. This rule is about the product photo, and the photo
   is the panel's own child. */
.hlth-pdp__media > img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-surface);
}
.hlth-pdp__media-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.hlth-pdp__media-tiles li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-tile);
  background: var(--color-white);
  padding: 12px 10px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-ink);
}
.hlth-pdp__media-tiles svg { width: 18px; height: 18px; color: var(--color-brand); }
.hlth-pdp--tint .hlth-pdp__media-tiles li { background: var(--color-brand-tint); }

/* ---- Hero image carousel -----------------------------------------------
   Slides can be a video as well as an image — the discovery kits ship the
   shaker as a GIF on one formula and an uploaded video on the other — so
   every rule that sizes a slide names both. A <video> left to itself is
   intrinsically sized and broke the 100%-wide snap column. */

.hlth-pdp__slides {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-surface);
}
.hlth-pdp__slides::-webkit-scrollbar { display: none; }
.hlth-pdp__slide { scroll-snap-align: start; }
.hlth-pdp__slide img,
.hlth-pdp__slide video,
.hlth-pdp__slide iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0;
  border-radius: var(--radius-surface);
}

.hlth-pdp__slide-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.hlth-pdp__slide-nav > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
}
.hlth-pdp__slide-nav > button:hover { background: var(--color-brand-tint); }
.hlth-pdp__slide-nav svg { width: 14px; height: 14px; }

.hlth-pdp__dots { display: inline-flex; align-items: center; gap: 2px; }
/* WCAG 2.2 SC 2.5.8 wants a 24x24 target. The dot stays visually 7px; the
   button around it is padded out to 24px so it is actually tappable. */
.hlth-pdp__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hlth-pdp__dot i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
  transition: width 0.15s ease, background 0.15s ease;
}
.hlth-pdp__dot[aria-current='true'] i {
  width: 20px;
  background: var(--color-brand);
}
.hlth-pdp__dot:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-pill); }

/* ---- Hero -------------------------------------------------------------- */

.hlth-pdp__h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 16px 0 0;
}
.hlth-pdp__h1 em { font-style: italic; color: var(--color-brand); }
/* The accent starts its own line: "Essential Nutrients," then "One Daily
   Ritual". The comma is the turn in the sentence, so leaving the break to
   wherever the column happened to run out put it mid-phrase at some widths
   and after the comma at others.

   display:block rather than a <br> in the markup, because the same heading
   pair is authored in the editor for every offer section and a hard break
   would apply to all of them. Scoped to the h1 inside the copy column, which
   is only ever the hero — the Discovery Pack and Flavours sections are h2 and
   keep flowing normally. The heading is still one string to a screen reader. */
.hlth-pdp__copy > .hlth-pdp__h1 em { display: block; }

/* Centred page-hero heading.
   Defined AFTER .hlth-pdp__h1 on purpose: that rule's `margin: 16px 0 0`
   shorthand resets the left/right margins, so an auto-centring modifier
   declared earlier in the file silently loses and the block sits left of
   centre. Same specificity, so source order is what decides it. */
.hlth-pdp__h1--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  /* Wide enough to keep a typical page headline to two lines. Tighter than
     this and a 46-character heading breaks to three, stranding a word. */
  max-width: 24ch;
  text-wrap: balance;
}
@media (max-width: 639.98px) {
  .hlth-pdp__h1--center { max-width: none; }
}

/* ---- Page hero ---------------------------------------------------------- */

.hlth-page-hero__intro { text-align: center; margin-left: auto; margin-right: auto; }
.hlth-page-hero__actions { display: flex; justify-content: center; }
/* A page hero is a banner, not a product shot — the PDP's square media panel
   is far too tall at full container width. */
.hlth-page-hero__media img { aspect-ratio: 16 / 9; }
@media (max-width: 639.98px) {
  .hlth-page-hero__media img { aspect-ratio: 3 / 2; }
}

.hlth-pdp__apd-line { margin: 16px 0 0; font-size: var(--fs-base); font-weight: 600; color: var(--color-brand); }

/* Benefit grid — two columns of hairline-separated rows */
.hlth-pdp__benefits {
  display: grid;
  column-gap: 32px;
  border-top: 1px solid var(--color-line);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .hlth-pdp__benefits { grid-template-columns: 1fr 1fr; } }
.hlth-pdp__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--color-line);
  padding: 14px 0;
}
.hlth-pdp__benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  margin-top: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
}
.hlth-pdp__benefit-icon svg { width: 16px; height: 16px; color: var(--color-brand); }
/* Brand artwork fills the slot instead of floating inside a tinted pill —
   see the note at the call site in hlth-pdp-hero. */
.hlth-pdp__benefit-icon--art { background: none; border-radius: 0; }
.hlth-pdp__benefit-title { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }
.hlth-pdp__benefit-body { display: block; font-size: var(--fs-base); color: var(--color-body); }

/* ---- Purchase option radio cards --------------------------------------- */

.hlth-pdp__options { margin-top: 20px; display: grid; gap: 16px; }

.hlth-pdp__option {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 2px solid var(--color-line-strong);
  border-radius: var(--radius-surface);
  background: var(--color-white);
  padding: 20px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* The card is a <label> so it can legally contain the frequency radios;
   the option's own radio is visually hidden but stays focusable. */
.hlth-pdp__option-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.hlth-pdp__option:has(.hlth-pdp__option-input:checked),
.hlth-pdp__option.is-selected {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
}
/* The head is the only <label> — everything else sits outside it so the
   radio's accessible name stays short. See the section's markup note. */
.hlth-pdp__option-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.hlth-pdp__option-headings { flex: 1; min-width: 0; }
.hlth-pdp__option:has(.hlth-pdp__option-input:focus-visible) {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* An option not connected to a product. Disabled on the storefront; in the
   theme editor it also carries an explanatory warning. */
.hlth-pdp__option--unconfigured {
  opacity: 0.7;
  cursor: not-allowed;
}
.hlth-pdp__option-warn {
  display: block;
  margin-bottom: 12px;
  border-radius: var(--radius-tile);
  background: var(--color-amber-tint);
  border: 1px solid var(--color-amber);
  padding: 10px 12px;
  font-size: var(--fs-meta);
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-amber-deep);
  cursor: default;
}
.hlth-pdp__option-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: 4px 12px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hlth-pdp__option-head { display: flex; align-items: flex-start; gap: 12px; }
.hlth-pdp__radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 4px;
  border: 2px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
}
.hlth-pdp__option:has(.hlth-pdp__option-input:checked) .hlth-pdp__radio,
.hlth-pdp__option.is-selected .hlth-pdp__radio { border-color: var(--color-brand); }
.hlth-pdp__radio i {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  opacity: 0;
}
.hlth-pdp__option:has(.hlth-pdp__option-input:checked) .hlth-pdp__radio i,
.hlth-pdp__option.is-selected .hlth-pdp__radio i { opacity: 1; }
.hlth-pdp__option-name { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--color-ink); }
.hlth-pdp__option-meta { display: block; font-size: var(--fs-base); color: var(--color-body); }
/* Matches .hlth-pdp__rows in the offer sections — label left, "Included"
   right. The class name stays because the mobile show-on-select rule keys off
   it. Rows are tighter than the offer version (12px, not 16px) because these
   sit inside an option card rather than a full-width section. */
.hlth-pdp__option-perks {
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
  display: grid;
  gap: 0;
}
.hlth-pdp__option-perks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-base);
  color: var(--color-ink);
}
.hlth-pdp__option-perks li:last-child { border-bottom: 0; }
.hlth-pdp__option-perks .hlth-pdp__row-yes { flex: none; white-space: nowrap; }
.hlth-pdp__option-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 16px;
}
/* Top-right of the card, beside the option name. Display face so it reads as
   a figure rather than a label. --fs-figure-lg (36px) is exactly 50% up from
   the 24px it first landed at, and is already a step on the scale — no new
   size invented for it. */
.hlth-pdp__option-perday {
  flex: none;
  margin-left: auto;
  text-align: right;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-figure-lg);
  line-height: var(--lh-heading);
  color: var(--color-ink);
  white-space: nowrap;
}
/* A card carrying a badge has it overhanging at top:-12px on the right, so
   the figure drops clear of it. */
.hlth-pdp__option:has(.hlth-pdp__option-badge) .hlth-pdp__option-perday { margin-top: 4px; }
/* The struck price is the reference, not the offer: lighter weight and body
   colour so the eye lands on the number being charged. --color-body clears
   4.5:1 on the card, so the saving stays readable rather than becoming
   decorative grey. */
.hlth-pdp__option-was {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--color-body);
  text-decoration-thickness: 1px;
}
.hlth-pdp__option-total { font-size: var(--fs-body); font-weight: 600; color: var(--color-ink); }
.hlth-pdp__option-note { display: block; margin: 4px 0 0; font-size: var(--fs-meta); color: var(--color-body); }

/* ---- Flavour picker ------------------------------------------------------
   The picker is the store's shared pdp-flavour-picker snippet, reused rather
   than reimplemented so the cart line-item properties stay identical across
   every surface that sells a pack. It is NOT forked to restyle it: the snippet
   already reads these --pdp-* custom properties with hardcoded fallbacks, so
   setting them here pulls it onto this page's tokens and leaves the shared
   file untouched for the pages that still want its original look. */
.hlth-pdp__flavours {
  --pdp-border: var(--color-line);
  --pdp-fg: var(--color-ink);
  --pdp-muted: var(--color-brand-tint);
  --pdp-muted-fg: var(--color-body);
  --pdp-accent: var(--color-brand);
  margin-top: 16px;
}
/* The snippet ships as a self-contained bordered card. Inside an option card
   that is a box in a box, so the frame comes off entirely and the picker
   adopts the same shape as its neighbours: a hairline rule above, an eyebrow
   heading, and rows on the same 1px lines as .hlth-pdp__option-perks.

   These selectors are two-class deep on purpose. The snippet's <style> is
   inline in the body, so it lands AFTER this file and wins any tie at equal
   specificity. */
.hlth-pdp__flavours .fp {
  background: none;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  padding: 16px 0 0;
  margin-bottom: 0;
  font-family: var(--font-body);
}
.hlth-pdp__flavours .fp__header { margin-bottom: 4px; }
/* Values copied from .hlth-pdp__freq-label, not approximated — this heading
   sits directly beneath "DELIVERY FREQUENCY" and any drift in size or
   tracking reads as two different kinds of label. */
.hlth-pdp__flavours .fp__title {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-body);
}
/* Green/red is off-palette. Brand for a complete pack, amber for short —
   and the count is stated in text too, so colour is never the only signal. */
.hlth-pdp__flavours .fp__counter {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.hlth-pdp__flavours .fp__counter.is-valid { background: var(--color-brand); color: var(--color-on-brand); }
.hlth-pdp__flavours .fp__counter.is-invalid { background: var(--color-amber-deep); color: var(--color-white); }
.hlth-pdp__flavours .fp__counter.is-empty { background: var(--color-brand-tint); color: var(--color-body); }

.hlth-pdp__flavours .fp__row {
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
}
.hlth-pdp__flavours .fp__row:last-child { border-bottom: 0; }
/* Circular, because the swatch ARTWORK is circular. A rounded-square frame
   around a round image leaves four corners of dead background and reads as a
   crop that went wrong. The artwork decides the frame, not the tile radius. */
.hlth-pdp__flavours .fp__swatch {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

/* Collapsed until its option is chosen. A 5-row allocation grid under an
   option you are not buying is a lot of height and reads as a decision you
   have to make. :has() drives it, with .is-selected mirrored by the script
   for browsers without it — same pattern as the perk rows. */
.hlth-pdp__option .hlth-pdp__flavours { display: none; }
.hlth-pdp__option:has(.hlth-pdp__option-input:checked) .hlth-pdp__flavours,
.hlth-pdp__option.is-selected .hlth-pdp__flavours { display: block; }
.hlth-pdp__flavours .fp__name { font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }
.hlth-pdp__flavours .fp__subtitle { font-size: var(--fs-meta); color: var(--color-body); }

/* Same control language as the frequency select: --color-line-strong border
   (1.4.11 applies to controls) and --radius-input. */
.hlth-pdp__flavours .fp__stepper {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-input);
}
.hlth-pdp__flavours .fp__stepper-btn {
  width: 40px;
  height: 40px;
  font-size: var(--fs-body);
  color: var(--color-brand);
  background: var(--color-white);
}
.hlth-pdp__flavours .fp__stepper-btn:hover:not(:disabled) { background: var(--color-brand-tint); }
.hlth-pdp__flavours .fp__stepper-val {
  width: 34px;
  line-height: 34px;
  font-size: var(--fs-base);
  color: var(--color-ink);
  border-left: 1px solid var(--color-line-strong);
  border-right: 1px solid var(--color-line-strong);
}
.hlth-pdp__flavours .fp__rec-link {
  font-size: var(--fs-meta);
  color: var(--color-brand);
  margin-top: 10px;
}
.hlth-pdp__flavour-error {
  margin: 8px 0 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-amber-deep);
}

/* ---- Delivery frequency (inside a subscription option card) ------------ */

.hlth-pdp__freq {
  display: block;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  min-inline-size: 0; /* fieldset defaults to min-content — kills the wrap */
}
.hlth-pdp__freq-label {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-body);
}
/* Own chevron, drawn from tokens, inset a deliberate 16px from the edge so it
   sits square with the rounded corner. The native arrow crowded the corner and
   its offset varies by platform, so the control never looked the same twice. */
.hlth-pdp__freq-field { position: relative; display: block; }
.hlth-pdp__freq-field::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-body);
  border-bottom: 2px solid var(--color-body);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.hlth-pdp__freq-select {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-input);
  background: var(--color-white);
  appearance: none;
  -webkit-appearance: none;
  /* Right padding clears the chevron so a long plan name never runs under it. */
  padding: 10px 40px 10px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}
.hlth-pdp__freq-select:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ---- Segmented pill toggle (formula / cycle) --------------------------- */

/* The track stretches because .hlth-pdp__buybox is a flex column with the
   default align-items: stretch. Rather than fight that, the pills share the
   width evenly so the control reads as one deliberate segmented switch. */
.hlth-pdp__toggle {
  display: flex;
  border: 1px solid rgb(128 60 238 / 0.18);
  border-radius: var(--radius-pill);
  background: rgb(128 60 238 / 0.05);
  padding: 4px;
  margin-top: 12px;
}
.hlth-pdp__toggle a,
.hlth-pdp__toggle button {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hlth-pdp__toggle a:hover,
.hlth-pdp__toggle button:hover { background: var(--color-white); }
.hlth-pdp__toggle [aria-current='page'],
.hlth-pdp__toggle [aria-pressed='true'] {
  background: var(--color-brand-deep);
  color: var(--color-on-brand);
}
.hlth-pdp__toggle--wide button { padding: 10px 24px; }

/* ---- Inclusions table -------------------------------------------------- */

/* --color-line, matching the benefit rows directly above. The lines looked
   fainter here only because the gradient deepens toward the foot of the hero,
   not because the token differed. */
/* A plain list, not a card. The border boxed a set of rows that already read
   as a group from their own dividers, and it pushed them 19px in from the
   column every other block lines up on. */
.hlth-pdp__rows {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-top: 1px solid var(--color-line);
  background: none;
}
.hlth-pdp__rows li:last-child { border-bottom: 0; }
.hlth-pdp__rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-line);
  padding: 14px 0;
  font-size: var(--fs-base);
}
.hlth-pdp__rows span:first-child { color: var(--color-ink); }
.hlth-pdp__row-yes { font-weight: 600; color: var(--color-brand); }
.hlth-pdp__row-no { font-weight: 600; color: var(--color-body); }

/* 40px above the figure and another gap below it left the price floating in
   the middle of the column rather than reading as the button's own line. */
/* Padded to the includes card's inner edge — 18px of padding plus its 1px
   border — so the figure and the saving pill sit on the same two verticals as
   the rows above them rather than 19px outside. */
.hlth-pdp__price-block { margin-top: 20px; margin-bottom: 4px; padding: 0 19px; }
/* In the build panel it is a row, not the page's headline figure. 72px there
   pushed the was/now onto its own block and the row ran to 100px tall. */
.hlth-pdp__build .hlth-pdp__price-block {
  margin: 0;
  padding: 16px 0 4px;
  border-top: 1px solid var(--color-line);
}
.hlth-pdp__build .hlth-pdp__price-big { font-size: 40px; gap: 10px; }
.hlth-pdp__build .hlth-pdp__price-unit { font-size: var(--fs-base); }
.hlth-pdp__build .hlth-pdp__price-was,
.hlth-pdp__build .hlth-pdp__price-note { margin-top: 2px; font-size: var(--fs-meta); }
.hlth-pdp__build .hlth-pdp__saving { font-size: 14px; padding: 7px 15px; }
.hlth-pdp__price-big {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-figure-lg);
  color: var(--color-ink);
  margin: 0;
}
.hlth-pdp__price-note { margin: 4px 0 0; font-size: var(--fs-base); color: var(--color-body); }

/* ---- Nutrients ---------------------------------------------------------- */

.hlth-pdp__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 48rem;
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
}
.hlth-pdp__badges li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Decorative pill, not a control — --color-line is correct here. The
     3:1 rule (WCAG 1.4.11) applies to UI components, not static badges. */
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  padding: 8px 16px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-ink);
}
.hlth-pdp__badges svg { width: 14px; height: 14px; color: var(--color-brand); }

/* Scroll-snap rail replaces the JS carousel — same visual, no dependency */
.hlth-pdp__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: 24px;
  margin: 48px 0 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hlth-pdp__rail::-webkit-scrollbar { display: none; }
.hlth-pdp__rail > li { scroll-snap-align: start; }
@media (min-width: 640px) { .hlth-pdp__rail { grid-auto-columns: calc(50% - 12px); } }
@media (min-width: 1024px) { .hlth-pdp__rail { grid-auto-columns: calc(33.333% - 16px); } }

.hlth-pdp__nutrient {
  height: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
  background: var(--color-brand-tint);
  padding: 26px 24px;
}
.hlth-pdp--tint .hlth-pdp__nutrient { background: var(--color-white); }
.hlth-pdp__nutrient h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-h3);
  color: var(--color-ink);
  margin: 0;
}
.hlth-pdp__nutrient p { margin: 12px 0 0; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-body); }

.hlth-pdp__rail-nav { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.hlth-pdp__rail-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
}
.hlth-pdp__rail-nav button:hover { background: var(--color-brand-tint); }
.hlth-pdp__rail-nav svg { width: 16px; height: 16px; }

/* ---- Endorsement -------------------------------------------------------- */

.hlth-pdp__endorse { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hlth-pdp__endorse { grid-template-columns: 0.85fr 1.15fr; } }
.hlth-pdp__quote {
  margin: 24px 0 0;
  border-left: 2px solid var(--color-brand);
  padding-left: 20px;
  font-size: var(--fs-h4);
  line-height: var(--lh-body);
  color: var(--color-body);
}
.hlth-pdp__attrib { margin: 20px 0 0; font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }
.hlth-pdp__attrib-sub { margin: 0; font-size: var(--fs-base); color: var(--color-body); }
.hlth-pdp__creds { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hlth-pdp__creds { grid-template-columns: repeat(3, 1fr); } }
.hlth-pdp__creds li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--radius-tile);
  background: var(--color-white);
  padding: 12px 16px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-ink);
}
.hlth-pdp__creds svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--color-brand); }

/* ---- Reviews ------------------------------------------------------------ */

.hlth-pdp__reviews-grid { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 768px) { .hlth-pdp__reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.hlth-pdp__review {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
  background: var(--color-brand-tint);
  padding: 24px;
  margin: 0;
}
.hlth-pdp__review-stars { display: inline-flex; gap: 2px; color: var(--color-brand); }
.hlth-pdp__review-stars svg { width: 14px; height: 14px; fill: currentColor; }
.hlth-pdp__review-title { margin: 16px 0 0; font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }
.hlth-pdp__review-body { flex: 1; margin: 8px 0 0; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-body); }
.hlth-pdp__review-by {
  margin: 20px 0 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-body);
}
.hlth-pdp__review-by em { font-style: normal; color: var(--color-brand); }

/* ---- Comparison --------------------------------------------------------- */

.hlth-pdp__compare-figure {
  position: relative;
  margin: 40px 0 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-white);
  overflow: hidden;
}
.hlth-pdp__compare-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.hlth-pdp__compare-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-deep);
  color: var(--color-on-brand);
  padding: 8px 16px;
  font-size: var(--fs-meta);
  font-weight: 600;
}
.hlth-pdp__compare-badge svg { width: 14px; height: 14px; }

.hlth-pdp__quiz-card {
  margin-top: 24px;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-surface);
  background: var(--color-white);
  padding: 28px 24px;
  text-align: center;
}
.hlth-pdp__quiz-card h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-h3);
  color: var(--color-ink);
  margin: 0;
}
.hlth-pdp__quiz-card p {
  max-width: 36rem;
  margin: 8px auto 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}
.hlth-pdp__quiz-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
@media (min-width: 640px) { .hlth-pdp__quiz-actions { flex-direction: row; } }
.hlth-pdp__quiz-actions .hlth-pdp__cta { width: auto; margin-top: 0; padding: 14px 28px; }

/* ---- Social ------------------------------------------------------------- */

.hlth-pdp__social { height: 100%; border-radius: var(--radius-surface); background: var(--color-white); overflow: hidden; margin: 0; }
.hlth-pdp__social img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* The handle and caption under each card are gone, so the card is the picture
   and nothing else — no figcaption, and no padded panel under it that would
   now be empty white. */

/* ---- Objections --------------------------------------------------------- */

.hlth-pdp__objections {
  /* Spaced white cards with a rotating chevron — the GLP-1 landing-page FAQ
     treatment, rather than the single bordered stack this used to be. */
  display: grid;
  gap: 12px;
  margin-top: 40px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.hlth-pdp__objection {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
}
.hlth-pdp__objection summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
}
.hlth-pdp__objection summary::-webkit-details-marker { display: none; }
.hlth-pdp__objection summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius-surface);
}
.hlth-pdp__objection-q {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-ink);
}
/* Chevron, rotating — matches hlth-faq-accordion on the GLP-1 pages. */
/* The same chevron in the same chip as the flavour disclosure. This was a
   hand-built caret out of two borders — a different glyph, a different weight
   and a different colour from every other disclosure on the page. */
.hlth-pdp__objection-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-brand-deep);
  transition: transform 0.18s ease;
}
.hlth-pdp__objection-mark svg {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}
.hlth-pdp__objection[open] .hlth-pdp__objection-mark { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .hlth-pdp__objection-mark { transition: none; }
}
.hlth-pdp__objection p {
  margin: 0;
  padding: 0 24px 20px;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}

/* ---- Final quiz band ---------------------------------------------------- */

.hlth-pdp__band {
  border-radius: var(--radius-surface);
  background: var(--color-brand-deep);
  color: var(--color-on-brand);
  padding: 40px 32px;
  text-align: center;
}
.hlth-pdp__band p:first-child {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-figure);
  margin: 0;
}
.hlth-pdp__band-sub {
  max-width: 32rem;
  margin: 12px auto 0;
  font-size: var(--fs-base);
  color: var(--color-on-brand-soft);
}
.hlth-pdp__band .hlth-pdp__cta {
  width: auto;
  background: var(--color-bg);
  color: var(--color-ink);
  margin-top: 24px;
  padding: 14px 28px;
}
.hlth-pdp__band .hlth-pdp__cta:hover { background: var(--color-brand-tint); opacity: 1; }

/* ==========================================================================
   Mobile buy-box ergonomics (P4)
   ==========================================================================
   Measured before these rules: Add To Cart sat ~2,600px down a 390px-wide
   viewport — about 3.5 screens — and the charge amount was ~700px above the
   button, so price and CTA were never on screen together.
   ========================================================================== */

.hlth-pdp__buybox { display: flex; flex-direction: column; }

@media (max-width: 1023px) {
  /* Benefit rows are brand copy, not a decision input. Push them below the
     options so the offer comes first. Order is only meaningful here; on
     desktop everything returns to source order. */
  .hlth-pdp__buybox > .hlth-pdp__benefits { order: 2; }
  .hlth-pdp__buybox > .hlth-pdp__options-wrap { order: 1; }

  /* A full-width 1:1 image plus a caption row ate ~500px before a single
     word of the offer. */
  .hlth-pdp__media img,
  .hlth-pdp__slide img,
  .hlth-pdp__slide video,
  .hlth-pdp__slide iframe { aspect-ratio: 4 / 3; }
  /* Except in the gallery, where the source photos are square. Squeezing a
     square photo into a 4:3 panel means object-fit crops the top and bottom
     off every one of them — which is why the main image lost the head and
     feet of a shot the thumbnail underneath was showing whole.

     The height saving above is about the stacked layout, where the image sits
     between the heading and the offer. The gallery earns that space back with
     its thumbnail strip, so it keeps the ratio its images are drawn at.

     There is a matching 1:1 restore below 48rem further down the file; this
     covers the 768-1023px band, which had nothing and was the gap. */
  .hlth-pdp__media--gallery .hlth-pdp__slide img,
  .hlth-pdp__media--gallery .hlth-pdp__slide video,
  .hlth-pdp__media--gallery .hlth-pdp__slide iframe { aspect-ratio: 1 / 1; }

  /* Perks only on the selected card — saves ~180px and makes the selection
     state far more legible. */
  .hlth-pdp__option .hlth-pdp__option-perks { display: none; }
  .hlth-pdp__option:has(.hlth-pdp__option-input:checked) .hlth-pdp__option-perks,
  .hlth-pdp__option.is-selected .hlth-pdp__option-perks { display: grid; }
}

/* ---- Sticky mobile add-to-cart ----------------------------------------- */

.hlth-pdp__stickybar { display: none; }

@media (max-width: 1023px) {
  .hlth-pdp__stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--color-white);
    border-top: 1px solid var(--color-line);
    box-shadow: var(--shadow-float);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .hlth-pdp__stickybar[hidden] { display: none; }
  .hlth-pdp__stickybar-info { display: grid; min-width: 0; }
  .hlth-pdp__stickybar-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hlth-pdp__stickybar-price { font-size: var(--fs-meta); color: var(--color-body); }
  .hlth-pdp__stickybar-btn {
    flex: none;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-brand-deep);
    color: var(--color-on-brand);
    padding: 13px 24px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
  }
  .hlth-pdp__stickybar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
}

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hlth-pdp *,
  .hlth-pdp__slides,
  .hlth-pdp__rail {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---- Page split: feature row -------------------------------------------- */
/* Brand icons placed with the copy they describe. Hairline-separated rows,
   matching the PDP's benefit list rather than inventing a new treatment. */
.hlth-page-split__features {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}
.hlth-page-split__features li {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--color-line);
  padding: 14px 0;
}
.hlth-page-split__feature-icon {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
}
.hlth-page-split__feature-title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-ink);
}
.hlth-page-split__feature-body {
  display: block;
  font-size: var(--fs-base);
  color: var(--color-body);
}

/* Uploaded icon images sit where an SVG glyph would. object-fit keeps a
   non-square brand PNG from distorting.

   The box comes from --icon-size, which hlth-icon-or-image emits from its
   `size` param. Do NOT reintroduce per-context width/height rules here. When
   the CSS sized the box independently of `size`, the two drifted — the hero
   asked for 18 and the CSS painted 30, so the browser picked a 36w source for
   a box needing 60 device px and every brand icon rendered soft. Change the
   `size` passed at the call site instead; then the srcset follows it. */
.hlth-icon-img {
  display: block;
  object-fit: contain;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
}

/* ==========================================================================
   Mobile touch ergonomics
   ==========================================================================
   Measured at 375px before this block: 34 interactive elements under the 44px
   comfortable-target height — carousel arrows at 32, toggle pills at 38,
   frequency pills at 40, inline links at 22. Structurally the layout was fine
   (zero overflow, grids collapsing correctly); it was purely that everything
   was too small to hit reliably with a thumb.

   44px is the comfortable minimum. WCAG 2.5.8 only requires 24, which the
   carousel dots already met — this is about it feeling usable, not just
   passing.
   ========================================================================== */

@media (max-width: 1023.98px) {
  /* Carousel and rail arrows */
  .hlth-pdp__slide-nav > button,
  .hlth-pdp__rail-nav button {
    width: 44px;
    height: 44px;
  }
  .hlth-pdp__slide-nav svg,
  .hlth-pdp__rail-nav svg { width: 18px; height: 18px; }

  /* Segmented toggles — formula and cycle */
  .hlth-pdp__toggle a,
  .hlth-pdp__toggle button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }


  /* Inline text links were 22px tall — pad the hit area without moving the
     text, so the rhythm around them is unchanged. */
  .hlth-pdp__inline-link {
    min-height: 44px;
    align-items: center;
  }

  /* Carousel dots keep their 24px visual target but get a 44px tall row so a
     thumb landing slightly high or low still hits. */
  .hlth-pdp__dot { height: 44px; }

  /* Primary actions get a little more height than the desktop 16px padding. */
  .hlth-pdp__cta { padding-top: 18px; padding-bottom: 18px; }
}

/* ---- Option detail, revealed on selection ------------------------------- */
/* Lets a third option (the flavour pack) sit in the radio group without
   costing much height when it is not the one being considered. */
.hlth-pdp__option-details {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}
.hlth-pdp__option:has(.hlth-pdp__option-input:checked) .hlth-pdp__option-details,
.hlth-pdp__option.is-selected .hlth-pdp__option-details { display: block; }

.hlth-pdp__option-details-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-body);
}
.hlth-pdp__option-detail-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Direct child: the pill is the outer span. As a descendant selector this also
   framed the quantity and the name inside it, giving three nested borders. */
.hlth-pdp__option-detail-list > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  padding: 5px 6px 5px 14px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
}
/* No swatch on this line, so nothing needs the room the swatch would take. */
.hlth-pdp__option-detail-list > span:not(:has(.hlth-pdp__option-detail-swatch)) { padding-right: 14px; }
.hlth-pdp__option-detail-qty { font-weight: 400; color: var(--color-body); }
/* Round, like the picker swatches — the artwork is round. */
.hlth-pdp__option-detail-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* ---- Page hero, two-column --------------------------------------------- */
.hlth-page-hero--split { align-items: center; }
.hlth-page-hero--split .hlth-pdp__h1 { margin-top: 16px; }
.hlth-page-hero--split .hlth-pdp__body { max-width: none; }
/* A hero image beside copy is a portrait-ish panel, not a 16/9 banner. */
.hlth-page-hero--split .hlth-page-hero__media img { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .hlth-page-hero--split .hlth-page-hero__media img { aspect-ratio: 1 / 1; }
}

/* ---- Payment icons ------------------------------------------------------ */
.hlth-pdp__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.hlth-pdp__payments li { display: inline-flex; }
.hlth-pdp__payments svg { width: 38px; height: 24px; }

/* ---- "Choose your option" rhythm ---------------------------------------- */
/* The first option card carries a badge at top:-12px, which collided with the
   subtitle above it. The options list needs clearance for that overhang. */
.hlth-pdp__options-wrap { margin-top: 40px; }
.hlth-pdp__options { margin-top: 28px; }

/* ---- Nutrition panel ---------------------------------------------------- */
.hlth-pdp__nutri {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hlth-pdp__nutri[hidden] { display: none; }
.hlth-pdp__nutri-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--hlth-rgb-ink) / 0.55);
}
.hlth-pdp__nutri-panel {
  position: relative;
  width: min(880px, 100%);
  max-height: 88vh;
  overflow: auto;
  border-radius: var(--radius-panel);
  background: var(--color-white);
  padding: 48px 24px 24px;
  box-shadow: var(--shadow-lift);   /* licensed: this is a floating overlay */
}
.hlth-pdp__nutri-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--color-ink);
  cursor: pointer;
}
.hlth-pdp__nutri-close:hover { background: var(--color-brand-tint); }
.hlth-pdp__nutri-rail { margin-top: 0; grid-auto-columns: 100%; }
@media (min-width: 768px) { .hlth-pdp__nutri-rail { grid-auto-columns: calc(50% - 12px); } }
.hlth-pdp__nutri-rail img { width: 100%; height: auto; border-radius: var(--radius-surface); }
.hlth-pdp__nutri-flavour {
  margin: 0 0 8px;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ---- Page cards: media ---------------------------------------------------
   Two modes. `icon` is a 48px brand glyph above the title; `cover` is a photo
   bleeding to the card edges, for cards about people rather than ideas. */
.hlth-page-card--cover { padding: 0; overflow: hidden; }
.hlth-page-card__cover { margin: 0; }
.hlth-page-card__cover img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hlth-page-card--cover .hlth-pdp__review-title { padding: 20px 24px 0; }
.hlth-page-card--cover .hlth-pdp__review-body { padding: 0 24px 24px; }
/* The card icon must NOT keep .hlth-pdp__benefit-icon's 32px tinted circle —
   a full-colour brand PNG needs to sit on its own and at its own size, or it
   gets squashed into the circle (measured 32x48 before this). */
.hlth-page-card__icon {
  width: auto;
  height: auto;
  margin-bottom: 14px;
  background: none;
  border-radius: 0;
}
/* .hlth-icon-img sizes itself from --icon-size — the call site passes 52. */
.hlth-page-card__icon svg { width: 28px; height: 28px; }

/* Narrow phones: the figure drops onto its own line under the option name,
   indented to clear the radio. width:100% here would overflow the card by
   exactly the margin — flex-basis does the wrap without the arithmetic. */
@media (max-width: 399.98px) {
  .hlth-pdp__option-head { flex-wrap: wrap; }
  .hlth-pdp__option-perday {
    flex: 1 0 100%;
    width: auto;
    /* padding, NOT margin — a 100% flex-basis plus a left MARGIN overflows the
       card by exactly that margin, because margins sit outside the box. */
    margin-left: 0;
    padding-left: 44px;
    margin-top: 6px;
    text-align: left;
    box-sizing: border-box;
  }
}

/* Trust row is a list now, one icon per promise. */
.hlth-pdp__trustrow { list-style: none; padding: 0; }
/* nowrap on the badge, not on the row. Each badge is one indivisible promise,
   so "Free Shipping" must never sit on a line above "$100+" — but the ROW
   still wraps, because four badges cannot fit a phone. */
.hlth-pdp__trustrow li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hlth-pdp__trustrow li svg { width: 15px; height: 15px; color: var(--color-brand); flex: none; }

/* The buy column is ~592px at 1280 and ~502px at 1100, but the four badges
   need 541px at 12px type. So between the point the two-column split kicks in
   and the point the column is genuinely wide enough, the row steps down one
   notch rather than dropping "Secure Checkout" onto a line by itself — a
   single orphaned badge reads as an afterthought rather than part of the set.
   This is meta text under a CTA, not body copy, so 11px is a fair trade for
   keeping the four promises legible as one group. */
   The column gap deliberately stays at 16px. Tightening it to ~6px would have
   let the type stay at 12px, but the gap BETWEEN badges would then be no
   bigger than the gap between an icon and its own label, and the four badges
   would read as one run-on string. Spacing hierarchy first, size second. */
@media (min-width: 60rem) and (max-width: 78.75rem) {
  .hlth-pdp__trustrow { font-size: var(--fs-micro); }
  .hlth-pdp__trustrow li svg { width: 13px; height: 13px; }
}

/* ---- Highlighted guarantee ---------------------------------------------
   For a promise that is itself a reason to buy (the trial-pack cashback)
   rather than standard reassurance. Reads as a callout, not a footnote. */
.hlth-pdp__guarantee--highlight {
  background: var(--color-brand-tint);
  border: 2px solid var(--color-brand);
  color: var(--color-ink);
  padding: 22px;
}
.hlth-pdp__guarantee--highlight svg { color: var(--color-brand); width: 26px; height: 26px; }
.hlth-pdp__guarantee--highlight strong {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}
.hlth-pdp__guarantee--highlight span span { color: var(--color-body); }

/* ---- Reviews rail + range filter ---------------------------------------- */
.hlth-pdp__review-filter { max-width: 420px; margin: 20px auto 0; }
.hlth-pdp__reviews-rail { margin-top: 32px; list-style: none; padding: 0 0 8px; }
.hlth-pdp__reviews-rail > li { scroll-snap-align: start; }
.hlth-pdp__reviews-rail .hlth-pdp__review { height: 100%; }
.hlth-pdp__review-date { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; color: var(--color-body); }

/* ---- Toggle on a tinted section ----------------------------------------
   The track is --color-brand-tint and so is a tint section, which makes the
   two identical (1.0:1) — the track disappears and only the selected pill
   is visible, so the unselected option reads as absent rather than
   unselected. On tint the track goes white and the boundary is carried by
   --color-line-strong, which clears the 3:1 UI-component rule. */
.hlth-pdp--tint .hlth-pdp__toggle,
.hlth-pdp--white .hlth-pdp__toggle {
  background: var(--color-white);
  border-color: var(--color-line-strong);
}
.hlth-pdp--tint .hlth-pdp__toggle { background: var(--color-white); }
/* Unselected pill needs a visible edge of its own on any ground. */
.hlth-pdp__toggle a:not([aria-current='page']),
.hlth-pdp__toggle button:not([aria-pressed='true']) {
  color: var(--color-ink);
}
.hlth-pdp--tint .hlth-pdp__toggle a:hover,
.hlth-pdp--tint .hlth-pdp__toggle button:hover { background: var(--color-brand-tint); }

/* ---- Image callout -------------------------------------------------------
   One badge laid over the product image, replacing the row of caption tiles
   that used to sit beneath it. The tiles repeated the same three claims down
   the page and added height the copy column did not match.

   Positioned against the media panel, which needs to establish a containing
   block for it — the panel is otherwise static. */
.hlth-pdp__media { position: relative; }
/* Re-stated AFTER the line above, which is the whole point of it being here.
   The overlay needs the panel to be a containing block, so it set
   position:relative — and because that rule sits later in the file than the
   sticky rule up in the layout section, it silently un-stuck the image column
   on desktop. Sticky is also a positioned element, so it serves the overlay
   just as well; it simply has to come last. */
@media (min-width: 1024px) {
  .hlth-pdp__media--sticky { position: sticky; top: 24px; }
}
.hlth-pdp__media-overlay {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  /* Opaque, not translucent: over a photo, a see-through chip puts type on an
     unpredictable background and the contrast ratio becomes whatever the image
     happens to be. */
  background: var(--color-white);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
}
.hlth-pdp__media-overlay svg { width: 18px; height: 18px; color: var(--color-brand); flex: none; }
@media (max-width: 47.9375rem) {
  .hlth-pdp__media-overlay { left: 12px; bottom: 12px; font-size: var(--fs-meta); padding: 8px 12px; }
}

/* Community clips size exactly like the stills they sit beside, so a rail of
   mixed photo and video keeps one rhythm. */
.hlth-pdp__social video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-brand-tint);
}


/* ---- Check marks --------------------------------------------------------
   The glyph already matched the GLP-1 pages stroke for stroke; the size and
   colour did not. There they are 16px in --lp-vivid, which is now
   --color-brand. On the deep purple panel they stay light so they hold
   contrast against it. */
.hlth-pdp__badges svg,
.hlth-pdp__creds svg {
  width: 16px;
  height: 16px;
  color: var(--color-brand);
  flex: none;
}

/* ---- Reviews: GLP-1 card -------------------------------------------------
   Matched value-for-value to sections/hlth-review-carousel, which is the block
   the GLP-1 landing pages actually use: a 3-up grid of white cards, NOT a
   one-up spotlight. Same border, radius, shadow, padding and type sizes, so
   the two surfaces are one component wearing one set of numbers.

   The PDP's cards were lavender-filled and borderless with the quote marks
   around the BODY; on the GLP-1 block the card is white with a hairline and
   the quote marks sit on the TITLE. */
.hlth-pdp--reviewgrid .hlth-pdp__reviews-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  gap: 20px;
  overflow: visible;
  margin-top: 48px;
}
.hlth-pdp--reviewcards .hlth-pdp__review {
  height: auto;
  padding: 26px 24px;
  display: grid;
  gap: 12px;
  align-content: start;
  background: var(--color-white);
  /* --color-line-cool, not --color-line: the cream hairline is for cream
     grounds and goes yellow against a white card. This is the token the
     landing block's .hlth-card uses. */
  border: 1px solid var(--color-line-cool);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
/* 30% larger than the base star, as on the landing block. */
.hlth-pdp--reviewcards .hlth-pdp__review-stars { color: var(--color-star); }
.hlth-pdp--reviewcards .hlth-pdp__review-stars svg { width: 21px; height: 21px; }
.hlth-pdp--reviewcards .hlth-pdp__review-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: var(--lh-heading);
  color: var(--color-ink);
}
.hlth-pdp--reviewcards .hlth-pdp__review-body {
  flex: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-body);
}
/* Author reads as a name, not as a label — no uppercase, no tracking. */
.hlth-pdp--reviewcards .hlth-pdp__review-by {
  margin: 4px 0 0;
  display: grid;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-body);
}
.hlth-pdp--reviewcards .hlth-pdp__review-by strong { font-weight: 600; color: var(--color-ink); }
/* Desktop grid needs no arrows; the mobile carousel below still does. */
.hlth-pdp--reviewgrid .hlth-pdp__rail-nav { display: none; }

@media (max-width: 63.9375rem) {
  .hlth-pdp--reviewgrid .hlth-pdp__reviews-rail {
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    grid-template-columns: none;
    overflow-x: auto;
  }
  .hlth-pdp--reviewgrid .hlth-pdp__rail-nav { display: flex; }
}

/* ---- Build your plan -----------------------------------------------------
   Third pass, and the last one. Two earlier versions put the controls in a
   2-column grid; with three of them the third orphaned onto its own row and
   left a dead cell, and the pills stretched to fill their column, which is
   what made them look inflated.

   Now each control is a ROW: label left, pills right, hairline between. The
   pills size to their content instead of to the grid, the panel takes exactly
   as many rows as there are questions — three here, two on a PDP where gender
   is already settled — and a fourth control would just be another row rather
   than a rebalanced grid.

   It also matches the flavour picker directly beneath it, which is already a
   list of label-left / control-right rows. One rhythm through the whole panel
   rather than two. */
/* Translucent rather than solid white, so the panel picks up whatever ground
   it is standing on — cream stays warm, lavender stays lavender — instead of
   being a white card dropped onto three different backgrounds. */
.hlth-pdp__build {
  display: block;
  margin-top: 20px;
  border-radius: var(--radius-surface);
  /* No fill. The hairline is enough to group the rows, and on white the tint
     was the only purple left in the buy column. */
  background: none;
  border: 1px solid rgb(128 60 238 / 0.18);
  padding: 0 18px;
  overflow: hidden;
}
.hlth-pdp__build-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.hlth-pdp__build-row + .hlth-pdp__build-row { border-top: 1px solid var(--color-line); }

/* Sentence case at reading size, not an uppercase eyebrow. The eyebrow above
   the panel already carries that job; repeating it per row made three labels
   shout at the same volume as the heading. */
.hlth-pdp__build-label {
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  flex: none;
}
/* Shrink to content — the whole point of the row layout. */
.hlth-pdp__build .hlth-pdp__toggle {
  margin: 0;
  flex: none;
  /* A wash, not a fixed lavender — inside the panel it has to work over cream
     as well as over the hero's gradient. */
  background: rgb(128 60 238 / 0.09);
  border-color: transparent;
}
.hlth-pdp__build .hlth-pdp__toggle--wide button { padding: 8px 18px; }
.hlth-pdp__build .hlth-pdp__eyebrow { display: none; }

/* The flavour picker is a list, not a pill pair, so it keeps its label above
   and spans the row. */
.hlth-pdp__build-row--full {
  display: block;
  padding: 16px 0;
}
.hlth-pdp__build-row--full .hlth-pdp__build-label { display: block; margin-bottom: 4px; }
/* The picker draws its own heading, so it gets the row label's treatment
   rather than the uppercase eyebrow it ships with — otherwise the last row in
   the panel is labelled in a different voice from the three above it. */
.hlth-pdp__build .hlth-pdp__flavours .fp__title {
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
}
.hlth-pdp__build .hlth-pdp__flavours .fp__header { margin-bottom: 8px; }

/* Below 30rem the label and pills stop fitting side by side. */
@media (max-width: 29.9375rem) {
  .hlth-pdp__build-row { display: block; }
  .hlth-pdp__build-row .hlth-pdp__build-label { display: block; margin-bottom: 8px; }
  .hlth-pdp__build .hlth-pdp__toggle { display: flex; }
}

/* Benefit rows in an offer section: two columns, since the offer column is
   wider than the old hero's and six stacked rows pushed the price too far
   down the page. */
.hlth-pdp__benefits--offer { margin-top: 24px; }
@media (min-width: 40rem) {
  /* 16px to 10px — a third out of the row gap, so six rows read as one block
     rather than six separate lines. */
  .hlth-pdp__benefits--offer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
  .hlth-pdp__benefits--stack { grid-template-columns: 1fr; }
}

/* ---- Gallery thumbnails --------------------------------------------------
   A grid beneath the main image, replacing the icon caption tiles. Four
   across, wrapping — eight product photos land as two clean rows.

   The selected thumb is marked by a brand ring AND stays fully opaque while
   the others dim: two signals, so it does not rely on colour alone. */
/* Flex, not a fixed four-column grid. Four tracks with three images left an
   empty cell at the end of the row; flexing means whatever is there spreads
   across the strip and fills it. */
.hlth-pdp__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.hlth-pdp__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-tile);
  background: var(--color-brand-tint);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.hlth-pdp__thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hlth-pdp__thumb:hover { opacity: 1; }
.hlth-pdp__thumb[aria-current='true'] { opacity: 1; border-color: var(--color-brand); }
.hlth-pdp__thumb:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* The gallery's main image is a 1:1 panel like the thumbs it sits above. */
.hlth-pdp__media--gallery .hlth-pdp__slides { border-radius: var(--radius-surface); overflow: hidden; }

/* ---- Saving pill ---------------------------------------------------------
   Beside the price, not buried in the note beneath it. Solid brand rather
   than a tint: this is the single most persuasive number on the page and a
   pale chip made it read as a footnote. --color-on-brand clears AA on it. */
/* The saving is the reason the price is what it is, so it is sized to be read
   with the figure rather than as a footnote beside it: base UI size instead of
   caption size, and enough padding that it reads as a badge at a glance. */
.hlth-pdp__saving {
  display: inline-block;
  vertical-align: middle;
  margin-left: 14px;
  padding: 10px 21px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hlth-pdp__price-was {
  margin: 6px 0 0;
  font-size: var(--fs-base);
  color: var(--color-body);
}
.hlth-pdp__price-was s { color: var(--color-body); text-decoration-thickness: 1px; margin-right: 6px; }

/* ---- Review cards: one height --------------------------------------------
   Cards were as tall as their longest quote, so a row of three had one card
   towering over its neighbours and the row read as broken rather than varied.

   Two things fix it together, and both are needed. Stretching alone makes the
   short cards tall with a pool of dead space; clamping alone still lets a
   long quote set the height for everyone. So: the track stretches, the card
   fills it, and the quote is capped at a fixed number of lines with the
   byline pinned to the bottom by an auto margin. */
.hlth-pdp--reviewcards .hlth-pdp__reviews-rail > li { display: flex; }
.hlth-pdp--reviewcards .hlth-pdp__review {
  height: auto;
  width: 100%;
  grid-template-rows: auto auto 1fr auto;
}
/* The title is allowed two lines, the quote six; beyond that the text is
   truncated with an ellipsis rather than pushing the card taller. */
.hlth-pdp--reviewcards .hlth-pdp__review-title,
.hlth-pdp--reviewcards .hlth-pdp__review-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hlth-pdp--reviewcards .hlth-pdp__review-title { -webkit-line-clamp: 2; }
.hlth-pdp--reviewcards .hlth-pdp__review-body { -webkit-line-clamp: 6; }
.hlth-pdp--reviewcards .hlth-pdp__review-by { margin-top: auto; padding-top: 12px; }

/* ---- Lead offer: gallery panel, price, nutrition bar ---------------------
   The gallery drops the tinted panel entirely. That lavender ground exists to
   give a single cut-out product shot somewhere to sit; behind a full-bleed
   photographic gallery it just tints the whole column. */
.hlth-pdp--lead .hlth-pdp__media,
.hlth-pdp--white .hlth-pdp--lead .hlth-pdp__media,
.hlth-pdp__media--gallery {
  background: none;
  padding: 0;
}
.hlth-pdp--white .hlth-pdp__media--gallery { background: none; }
.hlth-pdp__thumb { background: none; }

/* The price leads, the pill supports. At --fs-figure-lg the number and a
   solid-filled pill carried about the same weight, so the eye landed on the
   badge and the actual price read as a caption next to it. The figure steps
   up to --fs-h1 — already on the scale, no new size invented — and the pill
   steps down, so the number is unmistakably the larger of the two. */
.hlth-pdp__price-big {
  /* Roughly half again on --fs-h1. "Per daily serve" is a longer label than
     "a day", and at 48px the figure and the label read as the same weight of
     information — the number has to win its own line. */
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.02;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
/* The lead section sets its own gap, so the pill drops the left margin — but
   it kept a caption-size badge next to a 36px figure, which is where the
   saving went quiet on the one section that most needs to shout it. */
.hlth-pdp--lead .hlth-pdp__saving {
  margin-left: 0;
  /* Up 30%: 14px to 18px, padding to match. */
  font-size: 18px;
  padding: 10px 21px;
}

/* Full-width bar under the thumbnails, the way a nutrition panel link reads
   on a supplement PDP: one clear row, not a text link floating in a column. */
.hlth-pdp__nutrilink {
  display: flex;
  align-items: center;
  gap: 10px;
  /* width and text-align are here for the BUTTON form of this control. As an
     <a> it filled the column on its own; a <button> shrinks to its content, so
     when the nutrition link became a dialog trigger it quietly collapsed to
     half the column. */
  width: 100%;
  text-align: left;
  font-family: inherit;
  margin-top: 10px;
  padding: 16px 18px;
  border: 1px solid var(--color-line-cool);
  border-radius: var(--radius-tile);
  background: var(--color-white);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.hlth-pdp__nutrilink:hover { background: var(--color-brand-tint); }
.hlth-pdp__nutrilink svg { width: 18px; height: 18px; color: var(--color-brand); flex: none; }
/* The arrow is pushed to the far end; the label takes the space between. */
.hlth-pdp__nutrilink span { flex: 1; }

/* Frequency spans the group: a select is a wider control than a pair of pills,
   and half a row would crop the longer plan names. */

/* The frequency note. Quiet, because it is reassurance rather than a control —
   it exists to say the thing you were not asked is still yours to change. */
.hlth-pdp__build-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: var(--fs-meta);
  color: var(--color-body);
}
.hlth-pdp__build-note svg { width: 15px; height: 15px; color: var(--color-brand); flex: none; }

/* The picker sits on the tinted panel now, so it drops its own card. */
/* Panel is white, so the picker's rules use the cool hairline — white on
   white was invisible while the panel was tinted-then-repainted. */
.hlth-pdp__build .hlth-pdp__flavours { --pdp-border: var(--color-line-cool); }
.hlth-pdp__build .hlth-pdp__flavours .fp { background: none; border-top: 0; padding: 0; }
.hlth-pdp__build .hlth-pdp__flavours .fp__row { border-bottom-color: var(--color-line-cool); }

/* ---- Clinical spacing ----------------------------------------------------
   The plan panel goes white with a hairline instead of a lavender fill, and
   the flavour picker becomes its own card inside it. A single block of tint
   running the height of the buy column read as one heavy slab; white panels
   separated by air read as instruments on a bench, which is the register the
   product is sold in. */


/* A row value set as a pill, for a gift rather than an inclusion. Brand fill
   so it carries more weight than the plain "Included" beside it — that is the
   whole point of marking it differently. */
.hlth-pdp__row-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hlth-pdp__row-pill svg { width: 14px; height: 14px; flex: none; }

/* A row label that carries its own icon — the gift marker sits with the thing
   being given, not with the word FREE, which reads better and leaves the value
   column to say one thing consistently. */
.hlth-pdp__row-label { display: inline-flex; align-items: center; gap: 8px; }
.hlth-pdp__row-label svg { width: 16px; height: 16px; color: var(--color-brand); flex: none; }

/* ---- Rating as a pill ----------------------------------------------------
   The stars/score/count sat loose on the section ground. On the GLP-1 pages
   the equivalent row is a white chip, which gives the rating a definite edge
   instead of letting it float against whatever colour is behind it. */
.hlth-pdp__trustbar--pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}
.hlth-pdp--white .hlth-pdp__trustbar--pill { border: 1px solid var(--color-line-cool); }

/* The media column when it carries more than the image — the wrapper is what
   sticks, not the image panel inside it, or the nutrition bar would scroll
   away from the photo it belongs to. */
@media (min-width: 1024px) {
  .hlth-pdp__mediacol--sticky { position: sticky; top: 24px; }
}

/* ---- Gallery on mobile ---------------------------------------------------
   Thumbnails are a desktop affordance: they let you scan what else there is
   while the main image stays put. On a phone they eat a third of the viewport
   to show pictures too small to read, and the gesture people actually use is
   a swipe.

   So the same buttons become dots. Reusing the buttons rather than rendering a
   second set keeps one control, one set of aria-current state, and the same
   click handler — a phone and a desktop are looking at the same carousel. */
@media (max-width: 47.9375rem) {
  .hlth-pdp__thumbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  .hlth-pdp__thumb {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--color-line-strong);
    opacity: 1;
  }
  .hlth-pdp__thumb img { display: none; }
  .hlth-pdp__thumb[aria-current='true'] {
    background: var(--color-brand);
    border: 0;
    transform: scale(1.35);
  }
  /* The image takes the space the thumbnails gave up. */
  .hlth-pdp__media--gallery .hlth-pdp__slide img,
  .hlth-pdp__media--gallery .hlth-pdp__slide video,
  .hlth-pdp__media--gallery .hlth-pdp__slide iframe { aspect-ratio: 1 / 1; }
}

/* ---- Benefit rows on mobile ---------------------------------------------
   Six full-width rows is a long scroll before the price. Two across halves it,
   and these are short label/value pairs rather than prose, so they take the
   narrower measure without breaking. */
@media (max-width: 47.9375rem) {
  .hlth-pdp__benefits--offer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
  }
  .hlth-pdp__benefits--offer li { align-items: flex-start; }
  .hlth-pdp__benefits--offer .hlth-pdp__benefit-title { font-size: var(--fs-base); }
  .hlth-pdp__benefits--offer .hlth-pdp__benefit-body { font-size: var(--fs-meta); }
}

/* One question does not need a panel around it. On the one-off packs the only
   control is age; the border and the uppercase heading made a single pill pair
   read as a form to fill in rather than a choice to make. */
.hlth-pdp__build--single {
  border: 0;
  background: none;
  padding: 0;
  margin-top: 16px;
}
.hlth-pdp__build--single .hlth-pdp__build-row { padding: 0; }

/* Flavour swatch beside a row label — round, because the artwork is. */
.hlth-pdp__row-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* The saving rides on the sticky bar beside the price — a quiet tinted chip,
   not a second solid-purple pill competing with the add-to-cart next to it. */
.hlth-pdp__stickybar-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.hlth-pdp__stickybar-saving {
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  color: var(--color-brand-deep);
  padding: 2px 8px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hlth-pdp__stickybar-saving[hidden] { display: none; }

/* ---- Mobile ordering -----------------------------------------------------
   The nutrition bar sits under the image on desktop, which puts it BEFORE the
   whole buy box on a phone — a link out of the page at the exact moment the
   price and the button should have the floor.

   display:contents dissolves the media column on mobile so its two children
   become grid items of the split, and the bar can then be ordered after the
   copy. Only the bar needs an order; everything else keeps the default 0. */
@media (max-width: 63.9375rem) {
  .hlth-pdp__mediacol,
  .hlth-pdp__media--gallery { display: contents; }
  .hlth-pdp__mediacol > .hlth-pdp__nutrilink,
  .hlth-pdp__media--gallery > .hlth-pdp__nutrilink { order: 1; margin-top: 4px; }
  /* The split's 48px is a gutter BETWEEN two columns, which is the right
     distance side by side. Stacked it becomes vertical space, and 48px of it
     between the carousel and the rating chip under it read as a break in the
     page rather than a gap in a layout. */
  .hlth-pdp__split { gap: 24px; }
}

/* Dots ride on the image rather than under it — a row of their own costs a
   line of height on the screen where height is scarcest. */
.hlth-pdp__gallery-frame { position: relative; }
@media (max-width: 47.9375rem) {
  .hlth-pdp__gallery-frame .hlth-pdp__thumbs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: 0;
    z-index: 1;
  }
  /* On a photo the track needs its own ground to stay visible. */
  /* The dot stays 8px; the BUTTON gets 24px of target around it. An 8px hit
     area fails WCAG 2.5.8 and is a coin toss to tap besides. */
  .hlth-pdp__gallery-frame .hlth-pdp__thumb {
    background: none;
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hlth-pdp__gallery-frame .hlth-pdp__thumb::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.55);
    transition: background 0.15s ease;
  }
  .hlth-pdp__gallery-frame .hlth-pdp__thumb[aria-current='true']::after { background: var(--color-white); }
  .hlth-pdp__gallery-frame .hlth-pdp__thumbs { gap: 0; }
}

/* The age switch when it sits under the nutrition link rather than in the buy
   column: same panel dress, pulled tight to the link above it. */
.hlth-pdp__build--undermedia { margin-top: 10px; }

/* ---- Rail arrows ride the cards --------------------------------------- */
/* The nav had a row to itself under every carousel, which cost a band of
   vertical space to hold two buttons. Overlaid on the rail's own box it reads
   as part of the carousel instead of a separate control strip. */
.hlth-pdp__railwrap { position: relative; margin-top: 48px; }
.hlth-pdp__railwrap > .hlth-pdp__rail { margin-top: 0; }
.hlth-pdp__railwrap > .hlth-pdp__rail-nav {
  position: absolute;
  inset: 0 -6px auto;
  top: 0;
  bottom: 8px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The strip spans the rail, so it must not swallow clicks meant for a
     card underneath it — only the buttons themselves are targets. */
  pointer-events: none;
}
/* Pinned to the rail's own edges the arrows landed on whichever card had
   scrolled under them — usually across its title. Wide enough and there is
   container gutter to put them in, clear of every card. */
@media (min-width: 64rem) {
  .hlth-pdp__railwrap > .hlth-pdp__rail-nav { inset: 0 -56px auto; bottom: 8px; }
}
/* Too narrow for a gutter: they drop to the foot of the rail, over the cards'
   bottom padding rather than their copy. */
@media (max-width: 63.9375rem) {
  .hlth-pdp__railwrap > .hlth-pdp__rail-nav { top: auto; bottom: 10px; height: 40px; }
}
.hlth-pdp__railwrap > .hlth-pdp__rail-nav button {
  pointer-events: auto;
  background: var(--color-white);
  box-shadow: var(--shadow-float);
}
.hlth-pdp--purple .hlth-pdp__railwrap > .hlth-pdp__rail-nav button {
  background: var(--color-brand-deep);
  border-color: rgb(255 255 255 / 0.4);
}
.hlth-pdp--purple .hlth-pdp__railwrap > .hlth-pdp__rail-nav button:hover {
  background: var(--color-brand);
}

/* ---- Lavender gradient ground (matches the GLP-1 hero) ----------------- */
.hlth-pdp--gradient {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F0FC 38%, #E2D3F6 100%);
}

/* ---- Desktop: the rating sits with the benefits it vouches for --------- */
/* Above the h1 it was read before there was anything to rate. Ordering runs
   at desktop only, so the mobile stack is untouched. */
/* Eyebrow, heading, rating, then the copy. The rating vouches for the product
   the heading just named, so it reads before the description rather than after
   it. Ordering runs at every width now — the mobile stack was the one place
   the stars still sat above the h1. */
.hlth-pdp__copy {
  display: flex;
  flex-direction: column;
  /* min-width: 0 is doing real work. As a grid item this column defaults to
     min-width: auto, which refuses to shrink below its content's min-content
     width — and the flavour picker's min-content is wider than a phone. Open
     the picker and the column blew the grid track out to 419px in a 390px
     viewport, taking the panel and the page's horizontal scroll with it. */
  min-width: 0;
}
.hlth-pdp__copy > * { order: 10; min-width: 0; }
/* The section's OWN eyebrow only. The --group ones head the includes table
   and the build panel, and hoisting those put "First subscription order
   includes" above the h1 with nothing under it. */
.hlth-pdp__copy > .hlth-pdp__trustbar { order: 1; }
.hlth-pdp__copy > .hlth-pdp__h1,
.hlth-pdp__copy > .hlth-pdp__h2 { order: 2; }
/* The preheader reads as a subtitle to the heading above it, so it needs air
   between the two rather than sitting on the heading's baseline. */
.hlth-pdp__copy > .hlth-pdp__eyebrow:not(.hlth-pdp__eyebrow--group) { order: 3; margin-top: 14px; }
.hlth-pdp__copy > .hlth-pdp__build--age { order: 4; }
/* Straight under the age toggle, because the tabs answer the questions that
   come after "which formula is mine". This column orders every child
   explicitly, so a new one with no number of its own falls into the catch-all
   at the bottom — which is where the strip first landed, below the price and
   above the includes table. It needs a slot, not just a position in the DOM.

   Inserted at 5 rather than renumbered around: everything below shifts down
   one and keeps its relative order. */
.hlth-pdp__copy > .hlth-pdp__tabs { order: 5; }
/* Closing the tab strip, when the section puts it here rather than under the
   gallery. Same reasoning as the tabs above: this column numbers every child,
   so a new one without a number of its own drops to the catch-all and lands
   below the price. */
.hlth-pdp__copy > .hlth-pdp__nutrilink { order: 6; }
.hlth-pdp__copy > .hlth-pdp__sub,
.hlth-pdp__copy > .hlth-pdp__body { order: 7; }
.hlth-pdp__copy > .hlth-pdp__benefits { order: 8; }
/* The price follows the description — on the hero the benefit icons sit
   between them, on the packs nothing does. */
.hlth-pdp__copy > .hlth-pdp__build--bare { order: 9; }
/* The pill is inline-flex so it hugs its text, but a flex column stretches
   its children by default — which pulled a rating chip out to the full
   width of the buy column. */
.hlth-pdp__copy > .hlth-pdp__trustbar--pill { align-self: start; }
.hlth-pdp__copy > .hlth-pdp__trustbar { margin-bottom: 4px; }

/* ---- Gallery thumbnails: one line ------------------------------------- */
/* A four-column grid turned eight shots into two rows 291px tall, which is
   taller than some of the copy beside it. One scrolling row instead.

   Desktop only. Below 48rem the thumbs are already collapsed to dots over the
   image, and an unscoped rule here reinstated 68px thumbnails on top of them. */
@media (min-width: 48rem) {
  /* Grid, not flex. The thumbs contain width:100% images, which gave the flex
     algorithm a circular size to resolve and collapsed every item to its 4px
     border. One auto-flow row of equal columns sizes deterministically: N
     images always divide the strip exactly, so there is never a part-filled
     row. Capped and centred so three images do not become three slabs. */
  /* 1fr tracks, not a 96px cap. Capped, a short gallery stopped short of the
     column and centred the leftover; sharing the width means three images are
     as wide as eight are narrow, and the strip always meets both edges. */
  .hlth-pdp__gallery-frame .hlth-pdp__thumbs {
    display: grid;
    grid-auto-flow: column;
    /* Floor of 52px. Without one, a long gallery divided the strip until each
       thumbnail was a few pixels wide and showed nothing recognisable. Past
       the floor the tracks stop shrinking and the row scrolls instead. */
    grid-auto-columns: minmax(52px, 1fr);
    justify-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hlth-pdp__gallery-frame .hlth-pdp__thumbs::-webkit-scrollbar { display: none; }
  /* Square, and sized by its track rather than fixed at 68px tall. Stretched
     to a wide track while staying 68px high, the tile became a 180x68 letterbox
     and object-fit cropped the middle out of every shot — the images were
     there, but you could not tell what any of them were.

     Aspect-ratio ties the height to whatever width the track gives it, so the
     whole picture always shows. The cap stops a two-image gallery becoming two
     slabs; the row still meets both edges because the tracks keep sharing the
     full width and each tile centres in its own.

     The cap is the whole question here, and it has been wrong twice. At 92px
     and again at 140px it was still narrower than the track a three-image
     gallery gets in this column — the media column runs to about 555px, so
     three tiles get ~178px each — and every pixel of that difference showed
     as air, because a tile narrower than its track just centres and leaves
     the rest empty.

     200px is above the track width for three images at any realistic column
     size, so from three up the tiles fill their tracks exactly and the only
     gap left is the 10px gutter. It still catches the degenerate case: a one-
     or two-image gallery would otherwise stretch to 270px slabs. */
  .hlth-pdp__gallery-frame .hlth-pdp__thumb {
    width: 100%;
    min-width: 0;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* Fill the tile exactly. At width-only the image sized itself from its own
     1:1 ratio on the content box, leaving the border's 4px as slack below. */
  .hlth-pdp__gallery-frame .hlth-pdp__thumb img { height: 100%; }
}

/* ---- Controls sit ON the hero, not in boxes on top of it --------------- */
/* A white card over the gradient reads as a form dropped onto the page. The
   panel keeps its hairline for structure and drops the fill. */
/* The flavour row is NOT in this list: it lives inside the build panel, so
   giving it a fill and a border of its own drew a square frame bleeding out
   past the panel's rounded corner. */
.hlth-pdp__build,
.hlth-pdp__nutrilink,
.hlth-pdp__toggle { backdrop-filter: blur(6px); }
.hlth-pdp__nutrilink {
  background: rgb(128 60 238 / 0.05);
  border-color: rgb(128 60 238 / 0.18);
}
.hlth-pdp__toggle a,
.hlth-pdp__toggle button { background: transparent; }
/* The selected pill keeps the deep purple it wears everywhere else. Painting
   it white left white text on a white ground — the chosen option was the one
   you could not read. */
.hlth-pdp__toggle a[aria-current='page'],
.hlth-pdp__toggle button[aria-pressed='true'] {
  background: var(--color-brand-deep);
  color: var(--color-on-brand);
}

/* ---- Flavours expander ------------------------------------------------- */
.hlth-pdp__flavours { display: block; background: none; border: 0; }
/* Reads as one control in the panel's own row rhythm: label left, current
   state right, chevron last — the same shape as the Age and Serves rows. */
.hlth-pdp__flavours-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 8px 0;
  cursor: pointer;
  list-style: none;
  /* A tinted band with a pill radius: enough to read as one actionable item,
     not so much that it becomes a second panel inside the panel. It sits
     within the panel's own 18px padding, so nothing bleeds past the corner. */
  /* A wash over whatever is behind it rather than a fixed lavender. On the
     cream packs a solid brand tint was the one cool thing in a warm section. */
  background: rgb(128 60 238 / 0.09);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease;
}
.hlth-pdp__flavours-summary:hover { background: rgb(128 60 238 / 0.16); }
.hlth-pdp__flavours-summary .hlth-pdp__build-label {
  font-weight: 600;
  color: var(--color-brand-deep);
}

/* Overlapping stack, in serving order. Each swatch gets a ring in the band's
   own colour so the overlap reads as depth rather than as a smudge. */
/* The gap goes after the label, so the swatches and the chevron travel
   together at the right-hand end rather than trailing the label. */
.hlth-pdp__flavours-summary .hlth-pdp__build-label { flex: none; margin-right: auto; }
.hlth-pdp__flavours-swatches { display: inline-flex; flex: none; align-items: center; }
.hlth-pdp__flavours-swatches img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85);
}
.hlth-pdp__flavours-swatches img + img { margin-left: -9px; }
.hlth-pdp__flavours-summary:hover .hlth-pdp__flavours-swatches img { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7); }

.hlth-pdp__flavours-chev {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-white);
}

/* Narrow screens. Swatches plus label plus note could not all fit, and the
   row refused to shrink below its content — which pushed the whole build
   panel past the right edge of the viewport. The note goes: the swatches
   already say "five flavours", and the picker states the mix once open.
   The label may ellipsise rather than force the panel wide again. */
@media (max-width: 47.9375rem) {
  .hlth-pdp__flavours-summary { padding: 10px 12px; gap: 10px; }
  .hlth-pdp__flavours-summary .hlth-pdp__flavours-note { display: none; }
  .hlth-pdp__flavours-summary .hlth-pdp__build-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hlth-pdp__flavours-swatches img { width: 24px; height: 24px; }
  .hlth-pdp__flavours-swatches img + img { margin-left: -10px; }
}
.hlth-pdp__flavours-summary::-webkit-details-marker { display: none; }
.hlth-pdp__flavours-summary .hlth-pdp__build-label { flex: none; }
.hlth-pdp__flavours-note {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: var(--fs-meta);
  color: var(--color-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hlth-pdp__flavours-summary svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--color-brand-deep);
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}
.hlth-pdp__flavours[open] > .hlth-pdp__flavours-summary svg { transform: rotate(-90deg); }
/* Once it is open the picker itself shows the mix, so the summary of the mix
   is a second answer to a question nobody is still asking. */
.hlth-pdp__flavours[open] > .hlth-pdp__flavours-summary .hlth-pdp__flavours-note { display: none; }
/* The picker is the panel's last row, so it gets a rule above it like every
   other row and sits flush rather than inside a frame of its own. */
.hlth-pdp__flavours[open] > .fp { padding-bottom: 4px; }
.hlth-pdp__flavours-summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .hlth-pdp__flavours-summary svg,
  .hlth-pdp__flavours-summary { transition: none; }
}

/* ---- Rating pill reads on any ground, not just white ------------------- */
/* Translucent so it sits in whatever ground it is on, with an edge strong
   enough to find. Solid white was the pill not blending; no border at all was
   the pill disappearing. */
.hlth-pdp__trustbar--pill {
  background: rgb(128 60 238 / 0.05);
  border: 1px solid rgb(128 60 238 / 0.22);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

/* ---- Fixed flavour row (packs) ----------------------------------------- */
/* --static: no contents to list, so it is a statement rather than a control —
   no chevron, no hover, no pointer. --list opens onto the pack contents and
   behaves exactly like the hero's picker row. */
.hlth-pdp__flavours--static .hlth-pdp__flavours-summary {
  margin: 8px 0;
  cursor: default;
}
.hlth-pdp__flavours--static .hlth-pdp__flavours-summary:hover {
  background: rgb(128 60 238 / 0.09);
}
.hlth-pdp__flavours--static .hlth-pdp__flavours-summary:hover .hlth-pdp__flavours-swatches img {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85);
}

/* The contents list sits inside the panel row, so it drops the includes
   table's own top rule and closing margin — the band above is its heading. */
.hlth-pdp__rows--flavours {
  margin: 0 0 8px;
  border-top: 0;
}
.hlth-pdp__rows--flavours li { padding: 12px 0; }
.hlth-pdp__rows--flavours li:last-child { border-bottom: 0; }

/* ---- Flavour descriptions ---------------------------------------------- */
/* The name and its description stack, so the row still reads name-then-count
   across while the description sits under the name rather than beside it. */
.hlth-pdp__flavour-name { display: grid; gap: 2px; min-width: 0; }
.hlth-pdp__flavour-note {
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--color-body);
  line-height: 1.35;
}
.hlth-pdp__rows--flavours .hlth-pdp__row-label { align-items: center; }

/* ---- Flavour list rows: the quantity never wraps ----------------------- */
/* "2 Serves" broke across two lines whenever a description ran long, which
   pushed that row's value out of line with the four above it. The value is
   the column being scanned, so it holds its width and the copy gives way. */
.hlth-pdp__rows--flavours li { align-items: flex-start; }
.hlth-pdp__rows--flavours .hlth-pdp__row-label { min-width: 0; flex: 1; }
.hlth-pdp__rows--flavours .hlth-pdp__row-yes,
.hlth-pdp__rows--flavours .hlth-pdp__row-no {
  flex: none;
  white-space: nowrap;
  padding-top: 2px;
}
.hlth-pdp__rows--flavours .hlth-pdp__flavour-name { flex: 1; }

/* The picker's description wraps rather than truncating on a phone, where the
   column is too narrow to ellipsise anything usefully. */
@media (max-width: 47.9375rem) {
  .hlth-pdp__flavours .fp__subtitle { white-space: normal; }
  .hlth-pdp__flavours .fp__row { align-items: center; }
}

/* ---- RRP struck beside the price --------------------------------------- */
/* Sized off the figure it discounts rather than the body scale, so it reads
   as the old price and not as a caption that happens to be crossed out. */
/* 0.68em, up from 0.55. Sized off the live figure, so it tracks whatever the
   price is set at — but at 0.55 it sat close enough to the body scale that it
   read as fine print, and the whole point of a struck RRP is that the shopper
   registers the drop without reading. This is the size the Discovery Pack and
   the per-serve price both use. */
.hlth-pdp__price-rrp {
  font-family: var(--font-display);
  font-size: 0.68em;
  margin-left: 2px;
  color: var(--color-muted, var(--color-body));
  text-decoration-thickness: 1px;
  font-weight: 400;
}

/* ---- Price figure vs its unit ------------------------------------------ */
/* The number is the thing being compared, so it takes the display size; the
   unit sits beside it at reading size. Sizing both at 72px ran the line to
   three rows in the buy column and made "per daily serve" shout as loudly as
   the price it qualifies. */
.hlth-pdp__price-figure {
  font-size: 1em;
  line-height: 1;
}
/* Right-aligned to the same edge INCLUDED and FREE sit on in the rows above,
   so the column has one right margin rather than three. */
.hlth-pdp__price-big .hlth-pdp__saving { margin-left: auto; }
.hlth-pdp__price-big { width: 100%; }
/* Figure, unit and struck RRP share one baseline. They were each aligned
   differently — the figure and unit pinned to the bottom of the line box, the
   RRP centred in it — so on the Discovery Pack the old price floated between
   the two and the row read as three unrelated pieces. */
.hlth-pdp__price-big { align-items: baseline; }
.hlth-pdp__price-unit {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-body);
  align-self: baseline;
}
.hlth-pdp__price-rrp { align-self: baseline; }
/* A pill has no baseline worth aligning to, so it centres on the line and
   keeps its right edge. */
.hlth-pdp__price-big .hlth-pdp__saving { align-self: center; }

/* ---- Choice rows carry a line of help ---------------------------------- */
.hlth-pdp__build-label { display: grid; gap: 2px; }
.hlth-pdp__build-help {
  font-size: var(--fs-meta);
  color: var(--color-body);
  line-height: 1.35;
}

/* The picker as a line in the includes list: it is a disclosure, not a
   two-column row, so it spans and drops the row's flex layout. */
.hlth-pdp__rows-flavourline { display: block !important; padding: 0 !important; }
.hlth-pdp__rows-flavourline .hlth-pdp__flavours { border-top: 0; }
.hlth-pdp__rows-flavourline .hlth-pdp__flavours-summary { margin: 8px 0; }

/* With no label the toggle is the whole row, so it stops being pushed to one
   end by a space-between that has nothing to space against. */
.hlth-pdp__build-row--nolabel { justify-content: flex-start; }

/* The age row when it sits above the benefit icons: a row, not a panel — the
   icons under it already carry the section's structure. */
.hlth-pdp__build--age {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
}
.hlth-pdp__build--age .hlth-pdp__build-row { padding: 0 0 16px; }

/* Nothing but the price in it: no border, no padding, no rule above the
   figure — the box was framing a single number. */
.hlth-pdp__build--bare {
  border: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
}
.hlth-pdp__build--bare .hlth-pdp__price-block { border-top: 0; padding-top: 4px; }

/* ---- Flavour line, inline with the rows around it ---------------------- */
/* In the includes list it is one of the lines, so it drops the tinted band
   and the pill radius and takes the same shape as the rows above it: label
   left, its state right, on the same divider rhythm. */
.hlth-pdp__rows-flavourline { border-bottom: 1px solid var(--color-line); }
/* The <details> still carries the build-row's own margin and padding, which
   added 32px on top of the summary and made this line half again as tall as
   the three above it. */
.hlth-pdp__rows-flavourline .hlth-pdp__flavours { margin: 0; padding: 0; }
.hlth-pdp__rows-flavourline .hlth-pdp__flavours-swatches img { width: 22px; height: 22px; }
.hlth-pdp__rows-flavourline .hlth-pdp__flavours-swatches img + img { margin-left: -8px; }
.hlth-pdp__rows-flavourline .hlth-pdp__flavours-summary {
  margin: 0;
  padding: 14px 0;
  background: none;
  border-radius: 0;
  gap: 12px;
}
.hlth-pdp__rows-flavourline .hlth-pdp__flavours-summary:hover { background: none; }
.hlth-pdp__rows-flavourline .hlth-pdp__build-label {
  font-weight: 400;
  color: var(--color-ink);
}
.hlth-pdp__rows-flavourline .hlth-pdp__flavours-summary:hover .hlth-pdp__build-label { color: var(--color-brand-deep); }
.hlth-pdp__rows-flavourline .hlth-pdp__flavours-swatches img { box-shadow: 0 0 0 2px var(--color-white); }
.hlth-pdp__rows-flavourline .hlth-pdp__flavours-chev { background: none; width: 20px; height: 20px; }

/* Reads "4.75 — 200+ Verified Reviews". The count used to sit in brackets,
   which made the number look like an aside to the rating rather than the
   other half of the same statement. */
.hlth-pdp__reviews::before {
  content: "|";
  margin-right: 8px;
  color: var(--color-line-strong);
}

/* ---- Button label ------------------------------------------------------- */
/* The preamble that used to sit before the action is gone: every button is
   now the action and the arrow, so there is nothing for it to be lighter
   than. Its wrapping rules went with it — a two-word label has never needed a
   second line, and the reduced phone padding existed only to fit the longer
   string. The span stays as the label's own weight against the button's 600. */
.hlth-pdp__cta-act { font-weight: 700; }

/* ---- Content tabs --------------------------------------------------------
   No JavaScript. The radios are the state: each panel is shown by the checked
   radio that precedes it, matched on position. The radios stay in the DOM and
   stay focusable — hidden with clip rather than display:none, which would take
   them out of the tab order and leave the strip unreachable from the keyboard.

   One radio group, so arrow keys move between tabs natively. That is the
   behaviour a tab strip is meant to have, and here it comes for free. */
.hlth-pdp__tabs { margin: 18px 0 0; }
.hlth-pdp__tabin {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* Scrolls rather than wraps. Five labels wrapping to a second line reads as
   two rows of navigation instead of one strip. */
.hlth-pdp__tablist {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--color-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.hlth-pdp__tablist::-webkit-scrollbar { display: none; }
.hlth-pdp__tab {
  flex: 0 0 auto;
  /* The preheader's size. With nothing set these inherited the copy column's
     body size, so the labels sat as large as the prose they switch between —
     navigation competing with the thing being navigated. */
  font-size: var(--fs-meta);
  padding: 0 0 10px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--color-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hlth-pdp__tab:hover { color: var(--color-ink); }
.hlth-pdp__tabpanel { display: none; padding: 16px 0 0; color: var(--color-body); }
.hlth-pdp__tabpanel > :first-child { margin-top: 0; }
.hlth-pdp__tabpanel > :last-child { margin-bottom: 0; }

/* Position pairing, written out per index. :checked has no way to reach a
   sibling "the same number along", so each pair is its own rule. Twelve is
   the tab block's limit, so twelve is as far as this needs to go — and it has
   to go exactly that far. Raising the limit in the schema without extending
   these three lists gives you tabs that highlight nothing and blank the panel
   area when clicked, because no rule matches to display one. */
.hlth-pdp__tabin:nth-of-type(1):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(1),
.hlth-pdp__tabin:nth-of-type(2):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(2),
.hlth-pdp__tabin:nth-of-type(3):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(3),
.hlth-pdp__tabin:nth-of-type(4):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(4),
.hlth-pdp__tabin:nth-of-type(5):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(5),
.hlth-pdp__tabin:nth-of-type(6):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(6),
.hlth-pdp__tabin:nth-of-type(7):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(7),
.hlth-pdp__tabin:nth-of-type(8):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(8),
.hlth-pdp__tabin:nth-of-type(9):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(9),
.hlth-pdp__tabin:nth-of-type(10):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(10),
.hlth-pdp__tabin:nth-of-type(11):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(11),
.hlth-pdp__tabin:nth-of-type(12):checked ~ .hlth-pdp__tabpanels .hlth-pdp__tabpanel:nth-child(12) {
  display: block;
}
.hlth-pdp__tabin:nth-of-type(1):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(1),
.hlth-pdp__tabin:nth-of-type(2):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(2),
.hlth-pdp__tabin:nth-of-type(3):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(3),
.hlth-pdp__tabin:nth-of-type(4):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(4),
.hlth-pdp__tabin:nth-of-type(5):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(5),
.hlth-pdp__tabin:nth-of-type(6):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(6),
.hlth-pdp__tabin:nth-of-type(7):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(7),
.hlth-pdp__tabin:nth-of-type(8):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(8),
.hlth-pdp__tabin:nth-of-type(9):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(9),
.hlth-pdp__tabin:nth-of-type(10):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(10),
.hlth-pdp__tabin:nth-of-type(11):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(11),
.hlth-pdp__tabin:nth-of-type(12):checked ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(12) {
  color: var(--color-ink);
  border-bottom-color: var(--color-brand);
}
/* The focus ring belongs on the label, since the radio it came from is not
   on screen. Without this, tabbing to the strip shows nothing at all. */
.hlth-pdp__tabin:nth-of-type(1):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(1),
.hlth-pdp__tabin:nth-of-type(2):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(2),
.hlth-pdp__tabin:nth-of-type(3):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(3),
.hlth-pdp__tabin:nth-of-type(4):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(4),
.hlth-pdp__tabin:nth-of-type(5):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(5),
.hlth-pdp__tabin:nth-of-type(6):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(6),
.hlth-pdp__tabin:nth-of-type(7):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(7),
.hlth-pdp__tabin:nth-of-type(8):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(8),
.hlth-pdp__tabin:nth-of-type(9):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(9),
.hlth-pdp__tabin:nth-of-type(10):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(10),
.hlth-pdp__tabin:nth-of-type(11):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(11),
.hlth-pdp__tabin:nth-of-type(12):focus-visible ~ .hlth-pdp__tablist .hlth-pdp__tab:nth-child(12) {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Hero icons, one step up ------------------------------------------- */
/* Every icon on this template is an inline <svg> sized in px by its own rule,
   so there is no single multiplier to turn. This block restates the ones that
   appear in the hero at 110% of their base size, rounded to whole pixels —
   sub-pixel SVG strokes render soft, and these are 1.5–2.5px strokes where a
   half pixel is visible.

   Scoped to --lead, which is the offer section that carries the gallery. The
   same classes appear further down the page at their base size, where they sit
   beside body copy rather than a 72px price and do not need the step up.

   Deliberately not included: the gallery's own chevrons, the payment marks and
   the flavour-row chevron. Those are controls and logos rather than icons that
   sit with copy, and scaling them moves them off the grid they align to. */
.hlth-pdp--lead .hlth-pdp__trustrow svg { width: 15px; height: 15px; }
.hlth-pdp--lead .hlth-pdp__trustrow li svg { width: 17px; height: 17px; }
.hlth-pdp--lead .hlth-pdp__benefit-icon svg { width: 18px; height: 18px; }
.hlth-pdp--lead .hlth-pdp__row-label svg { width: 18px; height: 18px; }
.hlth-pdp--lead .hlth-pdp__row-pill svg { width: 15px; height: 15px; }
.hlth-pdp--lead .hlth-pdp__guarantee svg { width: 22px; height: 22px; }
.hlth-pdp--lead .hlth-pdp__guarantee--highlight svg { width: 29px; height: 29px; }
.hlth-pdp--lead .hlth-pdp__cta svg { width: 18px; height: 18px; }
.hlth-pdp--lead .hlth-pdp__build-note svg { width: 17px; height: 17px; }
.hlth-pdp--lead .hlth-pdp__nutrilink svg { width: 20px; height: 20px; }
.hlth-pdp--lead .hlth-pdp__badges svg { width: 15px; height: 15px; }
.hlth-pdp--lead .hlth-pdp__stars svg { width: 18px; height: 18px; }
.hlth-pdp--lead .hlth-pdp__creds svg { width: 15px; height: 15px; }
.hlth-pdp--lead .hlth-pdp__inline-link svg { width: 15px; height: 15px; }
.hlth-pdp--lead .hlth-pdp__media-overlay svg { width: 20px; height: 20px; }
.hlth-pdp--lead .hlth-pdp__media-tiles svg { width: 20px; height: 20px; }

/* ---- Price: the unit takes its own line -------------------------------- */
/* "Per Daily Serve" is long enough that the figure, the struck RRP, the unit
   and the saving pill could not share one line in the buy column. The pill
   was the item that wrapped, so it landed under the price with the RRP left
   stranded beside the unit and the row read as three unrelated fragments.

   Ordering the unit last and giving it the full width puts the two numbers
   and the pill together on the first line — price, what it was, what you
   save — and drops the label underneath, which is the line that can afford
   to be second.

   This was scoped to the cycle panel on the grounds that "Per Pack" next to
   "$99" is short enough to sit inline. It is — but the Discovery and Trial
   packs then priced themselves in a different shape to the hero directly
   above them, with a small RRP inline and the saving wrapped to its own row.
   Two price layouts on one page is the worse problem, so both blocks now
   read the same way. The markup was already identical; only these rules
   differed. */
.hlth-pdp__price-unit {
  order: 1;
  flex: 0 0 100%;
  margin-top: 4px;
}
/* Full size, matching the price it discounts. At 0.68em the two numbers read
   as a price and a footnote about a price; at the same size they read as a
   before and an after, which is the comparison the line exists to make. The
   strike and the grey are what mark it as the old one. */
.hlth-pdp__price-rrp { font-size: 1em; }
/* The billing line was 2px under the unit, so "Per Daily Serve" and the
   monthly total sat as one four-line block with no join between the price
   and its terms. */
[data-hlth-cycle-panel] .hlth-pdp__price-was { margin-top: 12px; }