/* ═══════════════════════════════════════════════════════════════════════════
   pdp.css — shared mobile layer for the product pages.

   Load AFTER styles.css and AFTER the page's own <style> block on:
     pdp-glp1-v1.html · pdp-nad-v3.html · pdp-glutathione-v1.html · how-to-inject.html

   Why this file exists: those four pages shipped with 1, 0, 0 and 0 media
   queries respectively. They are the pages that take the money, and on a phone
   they were rendering the laptop layout squeezed — the hero never stacked, so
   at 375px the text column collapsed to ~134px and a 76px product name ran off
   the edge. It looked fine only because body{overflow-x} clipped the remainder.

   Breakpoints match styles.css: 900 · 640 · 400 · landscape-phone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FLUID TOKENS ──────────────────────────────────────────────────────────
   This file was written against the demo-site stylesheet, whose :root defines a
   fluid type scale. The live styles.css has no such block, and without it every
   var() below resolves to nothing: headlines collapse to inherited 15px and the
   mobile gutters go to zero. The scale is carried here so the live stylesheet
   stays untouched. Values are verbatim from the demo :root. */
:root {
  --fluid: clamp(0rem, calc((100vw - 20rem) / 70), 1rem);
  --fs-d1: clamp(2.25rem,   calc(2.25rem   + 3.25   * var(--fluid)), 5.5rem);
  --fs-d2: clamp(2rem,      calc(2rem      + 2      * var(--fluid)), 4rem);
  --fs-d3: clamp(1.75rem,   calc(1.75rem   + 1.5    * var(--fluid)), 3.25rem);
  --fs-d4: clamp(1.5rem,    calc(1.5rem    + 1      * var(--fluid)), 2.5rem);
  --fs-d5: clamp(1.3125rem, calc(1.3125rem + 0.4375 * var(--fluid)), 1.75rem);
  --fs-lede:  clamp(1.0625rem, calc(1.0625rem + 0.1875 * var(--fluid)), 1.25rem);
  --fs-body:  1rem;
  --fs-meta:  0.875rem;
  --fs-label: 0.75rem;
  --lh-display: 1.04;
  --lh-body: 1.6;
  --ls-label: 0.10em;
  --ls-label-lg: 0.16em;
  --gutter-m: 20px;
  --edit-line: rgba(46, 42, 36, 0.12);
}

/* ── TYPE SCALE BINDING ────────────────────────────────────────────────────
   These classes are declared inside each page's own <style> block, which sits
   after the styles.css link and therefore outranks it at equal specificity.
   Re-binding them here (this file loads last) is what actually lets the fluid
   scale reach the product pages — otherwise "Glutathione" stays at 76px on a
   375px screen and gets sliced in half. */
.pdp-name    { font-size: var(--fs-d2); line-height: var(--lh-display); letter-spacing: -0.015em; }
.sec__h      { font-size: var(--fs-d2); line-height: var(--lh-display); letter-spacing: -0.015em; }
.hh__h       { font-size: var(--fs-d2); line-height: var(--lh-display); letter-spacing: -0.015em; }
.band h2     { font-size: var(--fs-d3); line-height: var(--lh-display); }
.who2 h3, .who2 h4,
.xcard__name,
.sitecard h3, .sitecard h4,
.flip h3, .flip h4 { font-size: var(--fs-d5); line-height: 1.12; }
.pdp-desc    { font-size: var(--fs-lede); line-height: var(--lh-body); }
.sec__p      { font-size: var(--fs-lede); line-height: var(--lh-body); }
.who2 p,
.acc-body p,
.pdp-included li,
.sitecard p,
.hh__note p,
.flip__back p,
.flip__back .sitelist li,
.safe .d     { font-size: var(--fs-body); line-height: var(--lh-body); }
.pdp-ship,
.pdp-mrow .k { font-size: var(--fs-meta); }
.pdp-mrow .v { font-size: var(--fs-body); }

/* Long product names must wrap, never run off the edge. */
.pdp-name, .sec__h, .hh__h, .who2 h3, .who2 h4, .xcard__name { overflow-wrap: break-word; }

@media (max-width: 900px) {

  /* ── HERO ────────────────────────────────────────────────────────────────
     Stop the two-column crush. 150px of desktop top padding is 38% of a
     landscape phone screen; the mobile nav is only 66px tall. */
  .pdp { padding: 96px var(--gutter-m) 24px; }

  .pdp-splithero {
    flex-direction: column;
    gap: 24px;
    padding: 0;
  }
  .pdp-splithero__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 38svh;
    border-radius: 12px;
  }
  .pdp-splithero__info {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* The source order already puts the CTA under the price (buy column, Wave 9), so mobile only
     needs spacing, not re-ordering. Explicit order values here would fight that order. */
  .pdp-pills    { flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .pdp-price    { margin-top: 18px; font-size: clamp(30px, 8vw, 38px); }
  .pdp-price .pdp-now { font-size: clamp(34px, 9vw, 44px); }
  .pdp-select   { margin-top: 16px; }
  .pdp-cta      { margin-top: 22px; }
  .pdp-ship     { margin-top: 10px; }
  .pdp-included { margin-top: 22px; grid-template-columns: 1fr; gap: 9px; max-width: none; }
  .pdp-meta     { margin-top: 24px; }
  .pdp-desc     { max-width: none; margin-top: 22px; }

  .pdp-cta .btn {
    width: 100%;
    max-width: none;
    padding: 0 20px;
    min-height: 52px;
    font-size: 13px;
  }

  /* ── SPEC ROWS ───────────────────────────────────────────────────────────
     A 180px flex:none label column inside a 330px screen leaves 150px for the
     value. Stack them instead. */
  .pdp-mrow    { flex-direction: column; gap: 4px; padding: 14px 0; }
  .pdp-mrow .k { width: auto; flex: 0 0 auto; letter-spacing: var(--ls-label); }

  /* ── SECTIONS ────────────────────────────────────────────────────────────
     88px top and bottom on every section compounds to ~880px of blank scroll. */
  .sec    { padding: 52px var(--gutter-m); }
  .sec__p { font-size: var(--fs-lede); margin-top: 18px; max-width: none; }

  /* ── "WHO IT'S FOR" ──────────────────────────────────────────────────────
     h4 was width:360px + flex:none, which pushed all four descriptions past
     the screen edge where they could not be scrolled to. */
  .who-band  { padding: 48px var(--gutter-m); }
  .who2__row { flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; padding: 18px 0; }
  .who2__n   { width: auto; flex: 0 0 auto; font-size: 16px; line-height: 1.4; }
  .who2 h3, .who2 h4 { width: auto; flex: 1 1 0; min-width: 0; }
  .who2 p    { flex: 1 0 100%; margin-top: 4px; }

  /* ── "WHY IT MATTERS" ────────────────────────────────────────────────────
     Two 129px columns on a phone, with the accordion answers clipped by a
     max-height the three pages each set differently (340/340/360). */
  .wm2 { flex-direction: column; gap: 26px; }
  .wm2__l, .wm2__r { flex: 1 1 auto; width: 100%; min-width: 0; padding-top: 0; }
  .acc-head { font-size: var(--fs-body); padding: 18px 0; min-height: 56px; }
  .acc-item.open .acc-body { max-height: 1400px; }

  /* ── BENEFITS ROWS ───────────────────────────────────────────────────────
     Same failure as .wm2, on the two pages that use .ben instead (sermorelin
     and GHK-Cu). The 72px desktop gap left the copy column about 79px wide,
     so body text rendered one or two words per line. */
  .ben { flex-direction: column; gap: 26px; }
  .ben__l, .ben__r { flex: 1 1 auto; width: 100%; min-width: 0; }

  /* ── REVIEWS ─────────────────────────────────────────────────────────────
     A 300px flex:none column plus a 64px gap inside 330px. */
  .rev { flex-direction: column; gap: 26px; }
  .rev__head { width: 100%; flex: none; }
  .rev__list { width: 100%; min-width: 0; }

  /* ── "WHAT'S INCLUDED" GRID ──────────────────────────────────────────────
     Four-across (nad, sermorelin, ghk-cu pages) leaves ~76px per column at
     390px, so the boxes ran ~40px past the right edge and clipped. */
  .incl-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }

  /* ── CROSS-SELL ──────────────────────────────────────────────────────────
     Two-across put a 34px product name inside 79px of text width. */
  .xrow  { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .xcard { min-height: 200px; border-radius: 12px; }
  .xcard__body { padding: 20px 22px; }
  .xcard__desc { font-size: 15px; }

  /* ── INJECTION STEP CARDS ────────────────────────────────────────────────
     Three-across gave 94×94px cards holding 26px headings. One at a time, with
     the next card peeking as the swipe affordance. */
  .ctrack { gap: 14px; scroll-padding-left: var(--gutter-m); overscroll-behavior-x: contain; }
  .cstep  { flex: 0 0 80%; perspective: 1200px; }
  .flip__front .cap { padding: 16px 18px 18px; }
  .flip .step { font-size: var(--fs-label); letter-spacing: var(--ls-label); }
  .flip__front .hint { font-size: 12px; animation: none; opacity: 0.9; text-shadow: none; }
  .flip__back { padding: 18px; justify-content: flex-start; }
  .flip__back .sitelist li { line-height: 1.4; padding: 8px 0 8px 18px; }
  .carrow { width: 46px; height: 46px; }
  .cdots  { display: none; }   /* 3 hard-coded dots for a 5-step track */

  /* ── HOW-TO-INJECT specifics ─────────────────────────────────────────────*/
  .hh       { padding: 96px var(--gutter-m) 16px; }
  .sites    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 32px; }
  .sitecard { padding: 20px 18px; }
  .safelist { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 40px; margin-top: 32px; }
  .band     { padding: 52px var(--gutter-m); }

  .pdp-disc { padding: 32px var(--gutter-m) 36px; }
}

@media (max-width: 480px) {
  .cstep { flex: 0 0 86%; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .pdp { padding: 72px var(--gutter-m) 12px; }
  .sec { padding: 32px var(--gutter-m); }
  .pdp-splithero__media { max-height: 56svh; }
}

/* ── TOKEN PATCHES ─────────────────────────────────────────────────────────
   how-to-inject.html hardcodes #fff five times. Pure white reads cold against
   bone; use the paper token so these surfaces sit in the brand system. */
.hh__note, .pdp-opt, .flip__face, .carrow, .sitecard { background: var(--edit-paper); }

/* ── INJECTION STEP CARDS: height follows content, never a fixed ratio ──────
   .flip__face is position:absolute + overflow:hidden inside a fixed-ratio box,
   so any back face taller than that ratio was silently clipped with no way to
   scroll to it. The "prep the site" card lists four injection sites on its
   back face and was losing the fourth at every width from 320px to 1536px.
   Stacking both faces in one grid cell makes the card as tall as its tallest
   face, at every width, instead of guessing a ratio that fits both faces of
   every card. */
.flip { aspect-ratio: auto; display: grid; min-height: 100%; }
.flip__face { position: relative; inset: auto; grid-area: 1 / 1; }
.flip__front .img { height: auto; aspect-ratio: 16 / 10; }

/* ── CROSS-SELL "This can be paired with" cards: transparent vial on a light card ── */
.xcard.xcard--vial { background-color: #ece7dd; background-repeat: no-repeat; background-position: center 30%; background-size: auto 60%; min-height: 340px; }
.xcard--vial .xcard__scrim { display: none; }
.xcard--vial .xcard__name { color: var(--edit-ink); }
.xcard--vial .xcard__desc { color: var(--edit-ink-soft); }
.xcard--vial .xcard__cta  { color: var(--edit-french-blue); }

/* ── QUALITY (labband) made grander: full-bleed French Blue, full-width grid ── */
.sec.labband { background: var(--edit-french-blue); }
.labband .sec__lbl { color: rgba(242,237,226,.75); }
.labband .sec__h { color: var(--edit-bone); }
.labband .sec__h em { color: #cbd8e8; }
.labband .sec__p { color: rgba(242,237,226,.85); }
.labband .labgrid { max-width: none; margin-top: 44px; }
.labband .labcard { background: rgba(242,237,226,.07); border-color: rgba(242,237,226,.20); }
.labband .labcard__h h3, .labband .labcard__h h4 { color: var(--edit-bone); }
.labband .labcard p { color: rgba(242,237,226,.82); }
.labband .labcard__chip { color: #e4ebf3; background: rgba(242,237,226,.12); border-color: rgba(242,237,226,.32); }

/* ── "WHO IT'S FOR" restyled to match the Quality card grid (glass cards on the French Blue band) ── */
.who-band .who2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 44px; border-top: none; }
.who-band .who2__row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px 28px; border-bottom: none; background: rgba(242,237,226,.07); border: 1px solid rgba(242,237,226,.20); border-radius: 14px; }
.who-band .who2__n { width: auto; flex: none; font-size: 18px; color: #cbd8e8; }
.who-band .who2 h3, .who-band .who2 h4 { width: auto; flex: none; font-size: 23px; }

/* ── $100 off first-order promo card (tirz/sema) ── */
.pdp-promo { max-width: 520px; margin-top: 24px; border: 1px solid rgba(46,42,36,.12); border-radius: 16px; padding: 22px 26px; background: var(--edit-paper); }
.pdp-promo__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pdp-promo__amt { display: flex; flex-direction: column; line-height: 1.04; }
.pdp-promo__off { font-family: var(--font-display); font-size: 30px; color: #7d8a5c; }
.pdp-promo__sub { font-family: var(--font-display); font-size: 30px; color: var(--edit-ink); }
.pdp-promo__tag { font-family: var(--font-text); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--edit-ink-soft); text-align: right; padding-top: 7px; }
.pdp-promo__rule { border-top: 1px dotted rgba(46,42,36,.3); margin: 18px 0; }
.pdp-promo__code { font-family: var(--font-text); font-size: 15px; color: var(--edit-ink); }
.pdp-promo__code strong { font-weight: 700; }

/* ── BUY-BOX EXTRAS (availability badge + in-hero accordions) ──────────────
   Shared across every product page; the accordion visuals themselves come
   from each page's own .pdp-acc styles and click handler. */
.pdp-avail {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--edit-french-blue);
  border: 1px solid rgba(79, 110, 146, 0.35);
  background: rgba(79, 110, 146, 0.07);
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.pdp-buyacc { margin-top: 30px; max-width: 520px; }
.pdp-buyacc .acc-body a { color: var(--edit-french-blue); }

/* Quality band, for the pages whose inline styles don't define it
   (tirzepatide, semaglutide, glutathione). Values match the inline
   declarations on the nad/sermorelin/ghk-cu pages. */
.incl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 48px; }
.incl { padding-top: 22px; border-top: 2px solid var(--edit-french-blue); }
.incl__n { font-family: var(--font-display); font-size: 20px; color: var(--edit-french-blue-soft); }
.incl h3, .incl h4 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--edit-ink); margin-top: 8px; }
.incl p { font-family: var(--font-text); font-size: 15px; line-height: 1.5; color: var(--edit-ink-soft); margin-top: 10px; }
@media (max-width: 900px) {
  /* Flex order: keep the badge first and the accordion block last. */
  .pdp-avail  { order: 0; align-self: flex-start; }
  .pdp-buyacc { order: 10; margin-top: 26px; max-width: none; }
  .incl-grid  { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
}

/* ── Buy column: the product stays in view while the detail scrolls (desktop only) ── */
@media (min-width: 901px) {
  .pdp-splithero__media { position: sticky; top: 104px; }
}

/* ── Buy box: the intro price is the headline, the ongoing monthly sits directly
      beneath it. Only the two GLP-1s carry an intro price, so .pdp-then is absent
      on the peptide pages and their single monthly figure stays the headline. ── */
.pdp-then {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.3;
  color: var(--edit-ink-soft);
  margin-top: 7px;
}


/* ── Plan ladder: the intro price stays the headline and the ongoing monthly sits
      directly beneath it; the prepaid options sit below that as a quiet third tier.
      Present on the two GLP-1s only. The plan is chosen inside the visit flow, so
      these are figures, not controls, and nothing here is clickable. ── */
.pdp-plans {
  margin-top: 20px;
  padding-top: 4px;
  border-top: var(--hairline-soft);
  max-width: 520px;
}
.pdp-plans__h {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--edit-ink-soft);
  padding: 14px 0 6px;
}
.pdp-plan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: var(--hairline-soft);
}
.pdp-plan__k {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--edit-ink);
}
.pdp-plan__k b {
  font-family: var(--font-text);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--edit-french-blue);
  border: 1px solid var(--edit-french-blue);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 8px;
  white-space: nowrap;
}
.pdp-plan__v {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--edit-ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pdp-plan__v em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--edit-ink-soft);
  margin-top: 3px;
}
.pdp-plans__note {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--edit-ink-soft);
  margin-top: 12px;
}

@media (max-width: 900px) {
  .pdp-plans { max-width: none; margin-top: 16px; }
  /* The badge is the first thing to overflow at 375px, so let the row wrap
     before the price column ever collides with the label. */
  .pdp-plan { flex-wrap: wrap; gap: 4px 16px; }
  .pdp-plan__k { flex: 1 1 auto; }
  .pdp-plan__v { text-align: right; }
}

/* Benefits ("What it gives back") — promoted from inline PDP styles so all PDPs share it */
.ben{max-width:1200px;}
.ben__head{margin-bottom:44px;}
.ben__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch;}
.ben__media{border-radius:14px;background-size:cover;background-position:center;min-height:520px;box-shadow:var(--shadow-lift);}
.ben__list{display:flex;flex-direction:column;justify-content:space-between;border-top:var(--hairline);}
.benrow{padding:28px 4px;border-bottom:var(--hairline-soft);}
.benrow:last-child{border-bottom:none;}
.benrow h3{font-family:var(--font-display);font-weight:400;font-size:27px;line-height:1.08;color:var(--edit-ink);}
.benrow p{font-family:var(--font-text);font-size:16px;line-height:1.55;color:var(--edit-ink-soft);margin-top:8px;}
@media (max-width:820px){ .ben__grid{grid-template-columns:1fr;gap:26px;} .ben__media{min-height:360px;order:-1;} }

/* Mobile: WHO IT'S FOR must stack cleanly (number over title over description). The inline
   PDP <style> sets .who2 h3{width:360px;flex:none} which, by source order, beat the pdp.css
   mobile fix and pushed the description off-screen. Higher specificity here forces the stack. */
@media (max-width: 900px) {
  .who-band .who2__row { flex-direction: column; align-items: flex-start; gap: 8px; flex-wrap: nowrap; }
  .who-band .who2__n,
  .who-band .who2 h3,
  .who-band .who2 h4,
  .who-band .who2 p { width: auto; max-width: 100%; flex: none; }
}