/* ============ Product page (PDP) — Design 3 ============
   Scoped to .ampd-page--product. Built on the existing plan-card system
   (.ampd-choose2 / .ampd-plan2 from choose-v2.css) so the approved plan copy,
   gift panel and selection behaviour carry over unchanged; this file adds the
   product header, the two-step framing, the demoted one-time row and the
   step-2 flavour list.

   Pattern sources (2026-07-27 teardowns):
   - Ovrload  — plan first / flavour second, only the selected plan expands,
                one-time demoted to the bottom, CTA names the next step.
   - PureSport — "MOST POPULAR" pill on the card edge, benefit list of concrete
                claims, free gift inset inside the plan that earns it.
   Deliberately NOT ported from either: countdown timers, entry popups. */

/* ---- One gutter for the whole page ----
   Everything on the page shares a 24px gutter: the header, the step panels and
   the CTA/trust line each carry it, so nothing is double-indented against the
   plan cards. The gallery is the deliberate exception — it runs full bleed.
   (The "All products" back link that used to sit above the gallery was removed
   on review; the only route back to the grid now is the browser's back.) */

/* The purchase section's tinted panel background reads as a strong colour wash
   behind the whole product page (purple on the AMPD scheme). Product pages sit
   on white — the plan cards carry their own border, so they still read as
   cards without it.

   The section's own padding goes to zero so the product gallery runs full
   bleed; the header, the step panels and the CTA/guarantee each carry the
   24px gutter themselves. Scoped, because the unscoped rule in choose-v2.css
   is shared with Design 2's buy section. */
.ampd-page--product .ampd-choose2 { background: var(--bg-white); padding: 0; }
.ampd-page--product .pdp-panel { padding: 0 24px 10px; }
/* CTA and trust line are siblings of the panels — the CTA has to stay outside
   them or it would disappear along with the plan list on step 2 — so they take
   the gutter as margin instead. */
.ampd-page--product .ampd-choose2__cta,
.ampd-page--product .ampd-guarantee-line { margin-left: 24px; margin-right: 24px; }
/* .ampd-btn-block is width:100%, which added to the margins overflowed the
   column by the full 48px — auto lets the margins define the width instead. */
.ampd-page--product .ampd-choose2__cta { width: auto; }
/* Trust line stacks one claim per row here rather than three across — at 375px
   the inline version wrapped mid-claim and the separator dots ended up orphaned
   at line ends. Left-aligned to the same gutter as everything else. */
.ampd-page--product .ampd-guarantee-line {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  margin-bottom: 32px;
}
.ampd-page--product .ampd-guarantee-line__item {
  display: inline-flex; align-items: center; gap: 8px;
}

/* ---- Product header ---- */
.ampd-page--product .pdp-head { padding: 20px 24px 10px; }

/* The rating row is centred with 12px side margins in the hero, which left it
   starting at 36px against the title's 24px. On a left-aligned product header
   it aligns to the same gutter as everything else. */
.ampd-page--product .pdp-head .ampd-hero__rating {
  justify-content: flex-start;
  margin: 0;
}
/* No forced line break — the title wraps naturally. text-wrap: balance keeps
   the two lines even rather than leaving one word stranded, and the emoji is
   tied to the last word with   in the markup so it can't orphan. */
.ampd-page--product .pdp-title {
  margin: 10px 0 0; font-family: var(--font-display); font-size: 26px; line-height: 1.18;
  font-weight: 800; letter-spacing: -0.02em; color: var(--ampd-ink);
  text-wrap: balance;
}
.ampd-page--product .pdp-sub {
  margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ampd-body);
}
.ampd-page--product .pdp-pricing {
  display: flex; align-items: baseline; gap: 10px; margin-top: 14px;
}
.ampd-page--product .pdp-pricing__now {
  font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--ampd-ink);
}
.ampd-page--product .pdp-pricing__was {
  font-size: 15px; color: var(--ampd-body); text-decoration: line-through;
}
.ampd-page--product .pdp-pricing__unit { font-size: 13px; color: var(--ampd-body); }

/* ---- Nutrition label ----
   Both reference sites park the nutritional detail behind a single quiet
   control; here it rides on the product image, bottom-left, so it costs no
   vertical space in the header. The wrapper exists purely to give the button
   a positioning context — it can't live inside .ampd-gallery itself, which is
   a horizontal scroller and would carry the button off with the slides. */
.ampd-page--product .pdp-gallery-wrap { position: relative; }
.ampd-page--product .pdp-nutrition {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 15px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(11, 11, 14, 0.1);
  box-shadow: 0 6px 18px -8px rgba(11, 11, 14, 0.35);
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--ampd-ink); cursor: pointer;
}
.ampd-page--product .pdp-nutrition svg { display: block; }
.ampd-page--product .pdp-nutrition[aria-expanded="true"] { border-color: var(--flav-accent); }

/* Drag-to-swipe, matching the VS and reviews rails elsewhere on the project.
   Snap has to be released mid-drag: mandatory snap fights the per-frame
   scrollLeft writes, so the nearest slide is re-snapped on release (JS). */
.ampd-page--product .pdp-draggable { cursor: grab; }
.ampd-page--product .pdp-draggable.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.ampd-page--product .pdp-draggable img { -webkit-user-drag: none; }

/* Square corners and flush to the header — the gallery runs full bleed, so a
   20px radius left four floating corners against the page edges, and the
   shared 18px top margin left a white band under the nav. */
.ampd-page--product .ampd-gallery { border-radius: 0; margin-top: 0; }

/* Slides run taller here than the shared 300px: bigger product photography, and
   the nutrition label is a dense document where every extra pixel is
   legibility. */
.ampd-page--product .ampd-gallery__slide { height: 410px; }

/* Pagination sits on the image rather than under it. Right-aligned, on the same
   centre line as the nutrition button: centred dots would have landed on top of
   that button, which runs to roughly 200px wide from the left edge. Dots get a
   shadow and a translucent-white resting state so they hold up over photography
   as well as the white nutrition label. */
.ampd-page--product .ampd-gallery-dots {
  position: absolute; right: 18px; bottom: 30px; z-index: 2;
  margin: 0; gap: 6px;
}
.ampd-page--product .ampd-gallery-dots .ampd-dot {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 3px rgba(11, 11, 14, 0.35);
}
.ampd-page--product .ampd-gallery-dots .ampd-dot[aria-current="true"] {
  background: var(--ampd-white);
}

/* The label is a document, not a photograph — contain it rather than cropping,
   on white so the artwork's own edge is the edge. The bottom padding keeps the
   artwork clear of the overlay button, which would otherwise sit on top of the
   "*Nutrient Reference Value" footnote. */
.ampd-page--product .ampd-gallery__slide--nutrition { background: var(--bg-white); }
.ampd-page--product .ampd-gallery__slide--nutrition img {
  object-fit: contain;
  box-sizing: border-box;
  padding: 8px 8px 58px;
}

/* ---- Step framing ----
   The numbered "1 Choose your plan" / "2 Choose your flavours" headings were
   removed on review, so .pdp-step / .pdp-step__n went with them. The two steps
   are still there in behaviour — the panels swap in place and step 2 keeps its
   "Back to plans" control. */
.ampd-page--product .pdp-panel[hidden] { display: none; }

/* ---- Purchase-type pills: Subscribe & Save / One-time ----
   Both modes carry all three supply lengths, so this is a filter over the same
   list rather than two different offers. Track and active fill are derived
   from --flav-accent, so they follow the colour scheme with everything else.
   Ovrload fills the active pill with a gradient; ours is solid, because the
   gradient belongs to primary CTAs only on this project. */
.ampd-page--product .pdp-mode {
  /* Top margin carries the separation the price row used to provide, now that
     the pills sit directly under the nutrition button. */
  display: flex; gap: 4px; padding: 4px; margin: 22px 0 16px;
  background: color-mix(in srgb, var(--flav-accent) 9%, white);
  border-radius: 999px;
}
.ampd-page--product .pdp-mode__opt {
  flex: 1; height: 42px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: color-mix(in srgb, var(--flav-accent) 72%, black);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
}
.ampd-page--product .pdp-mode__opt[aria-selected="true"] {
  background: var(--flav-accent); color: var(--ampd-white);
}
.ampd-page--product .ampd-plans[hidden] { display: none; }

/* Step 2's back control — returns to the plan list without losing the choice. */
.ampd-page--product .pdp-step-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px;
  font-size: 13px; font-weight: 500; color: var(--ampd-body);
}

/* ---- One-time row: present, but demoted (Ovrload's "try once") ---- */
.ampd-page--product .ampd-plan2--onetime .ampd-plan2__name { color: var(--ampd-body); }
.ampd-page--product .ampd-plan2--onetime .ampd-plan2__perday { display: none; }

/* ---- Buy section follows the active colour scheme ----
   Ported verbatim (scoped) from v9.css, which is what makes Design 2's buy
   section scheme-true; these pages don't load that layer, so they were stuck
   on the raw flavour colours — Citrus Orange and Watermelon Red — while the
   rest of the page was on AMPD purple. Every card border, tint, radio, flag
   and promo resolves through --flav-accent, so remapping it re-skins the whole
   selection. Flavour-true is kept in the citrus-family schemes, where orange
   and red are at home; the purple-led schemes harmonise. */
:root[data-theme="ampd"] .ampd-page--product .ampd-choose2,
:root[data-theme="ampd"] .ampd-page--product .ampd-choose2[data-flavour="watermelon"] {
  --flav-accent: var(--accent-primary);
}
:root[data-theme="grape"] .ampd-page--product .ampd-choose2 { --flav-accent: var(--accent-primary); }
:root[data-theme="grape"] .ampd-page--product .ampd-choose2[data-flavour="watermelon"] {
  --flav-accent: var(--brand-watermelon-red);
}

/* Resting borders carry a hint of the accent rather than flat grey, and the
   "Most Popular" flag takes v9's 76/24 depth lift so its white label clears
   4.5:1 on every scheme. */
/* :not() is needed here where v9.css doesn't need it — v9's version is a bare
   .ampd-plan2, which loses to [aria-checked="true"]; page-scoping this one
   raises it to the same specificity, so it would flatten the selected card's
   solid accent border too. */
.ampd-page--product .ampd-plan2:not([aria-checked="true"]) {
  border-color: color-mix(in srgb, var(--flav-accent) 16%, var(--line));
}
.ampd-page--product .ampd-plan2__flag { background: color-mix(in srgb, var(--flav-accent) 76%, black); }

/* Real bottle photography replaces the placeholder tile, so the dashed border
   and accent tint that marked it as a placeholder come off. The shot is a tall
   bottle (456x1044) in a square slot — contain it rather than cropping the cap
   and base off. Scoped: Design 2's gift panels are still placeholders. */
.ampd-page--product .ampd-gift2__img {
  width: 56px; height: 56px;
  background: var(--bg-white);
  border: 1px solid var(--line-softer);
  object-fit: contain;
  padding: 3px;
  box-sizing: border-box;
}

/* The "Included" badge on the gift panel is styled in v9.css, which these
   pages don't load — without it the badge renders as "FREE GiftIncluded".
   Ported here (including v9's AA contrast correction) rather than pulling in
   the whole v9 layer. */
.ampd-page--product .ampd-gift2__badge {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  background: color-mix(in srgb, var(--success) 14%, white);
  color: color-mix(in srgb, var(--success) 55%, black);
  font-size: 10.5px; font-weight: 700;
}

/* ---- Step 2: flavour / variety list ---- */
.ampd-page--product .pdp-flavours { display: flex; flex-direction: column; gap: 10px; }
/* Same card language as the plan list in step 1: white on white with an
   accent-tinted border at rest, accent border + tint when chosen. Everything
   resolves through --flav-accent so step 2 follows the colour scheme too. */
.ampd-page--product .pdp-flav {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px 16px; border-radius: 18px; text-align: left;
  background: var(--bg-white);
  border: 1.5px solid color-mix(in srgb, var(--flav-accent) 16%, var(--line));
  font-size: 15px; font-weight: 600; color: var(--ampd-ink);
}
.ampd-page--product .pdp-flav[aria-checked="true"] {
  border-color: var(--flav-accent);
  background: var(--flav-tint-bg);
}
.ampd-page--product .pdp-flav__radio {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--ampd-line); background: var(--ampd-white);
}
.ampd-page--product .pdp-flav[aria-checked="true"] .pdp-flav__radio {
  border-color: var(--flav-accent);
  box-shadow: inset 0 0 0 4px var(--ampd-white), inset 0 0 0 10px var(--flav-accent);
}
.ampd-page--product .pdp-flav__note {
  display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ampd-body);
}
/* Variety is only meaningful on a plan with more than one pouch. */
.ampd-page--product .pdp-flav--variety[hidden] { display: none; }

/* ---- Placeholder product imagery (no stock, no AI imagery — project rule) ---- */
.ampd-page--product .pdp-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 1 / 1; border-radius: 20px;
  background: repeating-linear-gradient(45deg, var(--tint-10) 0 12px, var(--bg-panel) 12px 24px);
  border: 1.5px dashed var(--ampd-line);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  line-height: 1.5; color: var(--ampd-body); padding: 16px;
}