/* ============================================================
   Product template (Figma "Product" frame, node 2027:9498).
   Loads with site.css (base) + home.css (footer). --u system.
   ============================================================ */

/* hero: photo, left-aligned headline, master ribbon down the right */
.phero { position: relative; height: calc(975 * var(--u)); overflow: hidden; }
.phero img.phero__bg { position: absolute; left: calc(-66 * var(--u)); top: 0;
  width: calc(1743 * var(--u)); max-width: none; /* wider than the frame by design — the global img cap left a bg strip at the right */
  height: 100%; object-fit: cover; }
.phero__scrim { display: none; /* design hero photo is pre-graded, no overlay */ }
.phero__title { position: absolute; z-index: 3; left: calc(92 * var(--u));
  top: calc(341 * var(--u)); width: calc(780 * var(--u)); margin: 0;
  color: #fff; font-weight: 700; font-size: calc(94 * var(--u)); line-height: .94; }

/* master ribbon — product page instance: pure mirror, Figma matrix
   [-1,0,1948 / 0,1,-355] on a 1945x2683 box */
.pribbon { position: absolute; z-index: 2; pointer-events: none;
  left: calc(3 * var(--u)); top: calc(-1330 * var(--u)); /* -355 frame - 975 headzone offset */
  width: calc(1945 * var(--u)); height: calc(2683 * var(--u));
  transform: scaleX(-1); /* mask pipeline drops the export's group mirror — restore it */
  /* the Figma group mirror is cancelled by pre-mirrored child vectors —
     rendered orientation is the master's own, tail down the right edge */ }
/* per-category ribbon placement (kids 2082:91, hydrate 2110:6393 — the
   master sits further left and lower than soda's; QA, 8 Sep) */
@media (min-width: 641px) {
  .range-kids .pribbon { left: calc(-777 * var(--u)); top: calc(-993 * var(--u)); }
  .range-hydrate .pribbon { left: calc(-974 * var(--u)); top: calc(-1051 * var(--u)); }
  /* soda's frame runs the ribbon OVER the can; kids/hydrate run it behind
     (Lee, 8 Sep) — lift the can above the z2 ribbon on those ranges */
  .range-kids .headzone > .pdesc__can,
  .range-hydrate .headzone > .pdesc__can { z-index: 3; }
}
.pribbon svg { width: 100%; height: 100%; display: block; }
.pribbon .spine { stroke-dasharray: 1 1.1;
  stroke-dashoffset: calc(1.05 * (1 - clamp(0, (var(--p, 0) - var(--a, 0)) * var(--k, 1), 1))); }

/* description block */
.pdesc { position: relative; height: calc(974 * var(--u)); background: var(--desc-bg, #fff); }
.pdesc p { position: absolute; z-index: 3; left: calc(568 * var(--u));
  top: calc(151 * var(--u)); width: calc(625 * var(--u)); margin: 0;
  color: var(--ink, #10576f); font-weight: 700; font-size: calc(34 * var(--u)); line-height: calc(38 / 34); }
/* pack shot beside the copy — node 2171:4493: 332x887 at (140, 1091) page = (140, 116) in .pdesc */
.headzone > .pdesc__can { position: absolute; z-index: 1; left: calc(140 * var(--u)); /* ribbon (z2) passes over the can, per the frames */
  top: calc(116 * var(--u)); width: calc(332 * var(--u)); height: auto; }

/* nutrition band */
.pnutri { position: relative; height: calc(928 * var(--u)); background: var(--band-bg, #f8e359); }
.pnutri__card { position: absolute; z-index: 3; left: calc(155 * var(--u));
  top: calc(108 * var(--u)); width: calc(430 * var(--u));
  background: rgba(255,255,255,.5); border-radius: calc(22 * var(--u));
  padding: calc(32 * var(--u)); box-sizing: border-box; color: var(--ink, #78610e); }
.pnutri__card h3 { margin: 0; font-size: calc(28 * var(--u)); font-weight: 700; }
.pnutri__card .serving { font-size: calc(15 * var(--u)); margin: calc(6 * var(--u)) 0; }
.pnutri__card .bar { height: calc(8 * var(--u)); background: var(--ink, #78610e); margin: calc(8 * var(--u)) 0; }
.pnutri__card .cal { display: flex; justify-content: space-between; align-items: baseline; }
.pnutri__card .cal .l { font-size: calc(19 * var(--u)); font-weight: 700; }
.pnutri__card .cal .v { font-size: calc(30 * var(--u)); font-weight: 700; }
.pnutri__card .dv { font-size: calc(13 * var(--u)); text-align: right; padding: calc(4 * var(--u)) 0; }
.pnutri__card table { width: 100%; border-collapse: collapse; font-size: calc(14 * var(--u)); }
.pnutri__card td { padding: calc(5 * var(--u)) 0; border-top: 1.5px solid color-mix(in srgb, var(--ink, #78610e) 25%, transparent); }
.pnutri__card td:last-child { text-align: right; }
.pnutri__card td.ind { padding-left: calc(18 * var(--u)); }
.pnutri__card .fine { font-size: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); line-height: 1.35; }
.pnutri__right { position: absolute; z-index: 3; left: calc(800 * var(--u)); top: calc(158 * var(--u));
  width: calc(554 * var(--u)); }
.pnutri__right h3 { margin: 0; color: var(--ink, #78610e); font-weight: 700; font-size: calc(40 * var(--u)); text-align: center; }
.pnutri__right .ing { list-style: none; margin: calc(60 * var(--u)) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(90 * var(--u)) calc(40 * var(--u)); }
.pnutri__right .ing li { color: var(--ink, #78610e); font-weight: 700;
  font-size: calc(28 * var(--u)); line-height: 1.2; text-align: center; }
/* fruit glyph comes per-frame with its own colours */
.pnutri__right .ing li img.ing__fruit { display: block; height: calc(105 * var(--u));
  width: auto; margin: 0 auto calc(16 * var(--u)); }
/* the shared glyphs take the flavour ink via mask */
.pnutri__right .ing li i { display: block; height: calc(105 * var(--u));
  margin: 0 auto calc(16 * var(--u)); background: var(--ink, #78610e);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat; }

/* photo pair */
.ppair { position: relative; height: calc(846 * var(--u)); display: flex; }
.ppair__ph { width: 50%; height: 100%; position: relative; margin: 0; }
.ppair img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* photographer credit fades in on hover, per the Figma treatment on
   2300:72687: small black line at the photo's top-left (QA, 8 Sep) */
.ppair__credit { position: absolute; left: calc(21 * var(--u)); top: calc(18 * var(--u));
  margin: 0; color: #000; font-weight: 500; font-size: calc(9 * var(--u)); line-height: 1;
  background: rgba(250, 253, 253, .75); border-radius: calc(12 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  opacity: 0; transition: opacity .3s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.ppair__ph:hover .ppair__credit { opacity: 1; }

/* related flavours */
.prelated { position: relative; height: calc(675 * var(--u)); background: #fff; margin-top: calc(66 * var(--u)); }
.prelated__tile { position: absolute; top: 0; width: calc(480 * var(--u)); height: 100%;
  background: linear-gradient(180deg, #00b9c3, #ffffff); display: block; }
.prelated__tile img { position: absolute; left: 50%; top: calc(158 * var(--u));
  transform: translateX(-50%); width: calc(144 * var(--u)); height: auto;
  transition: transform .35s cubic-bezier(.2,.7,.2,1); }
/* rollover per 2300:72687: can lifts 36u, name fades in below (#0E5168) */
.prelated__tile:hover img { transform: translateX(-50%) translateY(calc(-36 * var(--u))); }
.prelated__name { position: absolute; left: 0; right: 0; top: calc(526 * var(--u)); text-align: center;
  color: #0e5168; font-weight: 700; font-size: calc(28 * var(--u)); pointer-events: none;
  opacity: 0; transform: translateY(calc(10 * var(--u)));
  transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); }
.prelated__tile:hover .prelated__name { opacity: 1; transform: none; }

/* generator ribbon instance 2 — baked whole-node export (frame coords),
   node clip is inherent to the art; host clips at the frame edges */
.stripes--pv2 { position: absolute; z-index: 3; pointer-events: none; overflow: hidden;
  left: 0; top: calc(-305 * var(--u));
  width: calc(1440 * var(--u)); height: calc(2202 * var(--u)); }

/* per-range section flow (kids/hydrate frames differ from soda) */
.range-kids .stripes--pv2 { top: calc(-371 * var(--u)); }
.range-hydrate .stripes--pv2 { top: calc(-395 * var(--u)); }
.range-kids .prelated { margin-top: 0; height: calc(577 * var(--u)); }
.range-kids .foot3 { margin-top: 0; }
.range-hydrate .ppair { height: calc(822 * var(--u)); }
.range-hydrate .prelated { margin-top: 0; height: calc(697 * var(--u)); }
.range-hydrate .foot3 { margin-top: 0; }
/* soda footer overlaps the related band by 7 */
.range-soda .foot3 { margin-top: calc(-7 * var(--u)); }
/* soda's 66u gap between the photo pair and the related band reads as a bare
   white slot until the wave draws over it — extend the teal up to fill it */
/* the 66u gap between the photos and the rail is teal, not white. Hangs off
   .ppair (unclipped) — the rail is overflow:hidden for the carousel, which
   clipped the old ::before on the rail (Lee, 11 Sep: white gap) */
.range-soda .ppair::after { content: ''; position: absolute; left: 0; right: 0;
  top: 100%; height: calc(67 * var(--u)); background: #00b9c3; z-index: 0; }

/* ============================================================
   MOBILE product template — Figma 2352:73392 (400-wide frame,
   --u:0.25vw below 640px). Nav + footer come from the mobile
   home rules (home.css/site.css). Sections whose content length
   varies per flavour (description, ingredients) flow with the
   frame's measured spacings instead of fixed heights.
   ============================================================ */
@media (max-width:640px) {
  /* hero — override the legacy demo rules in site.css */
  .phero { height: 100vh; height: 100svh; aspect-ratio: auto; }
  .phero img.phero__bg { left: 0; width: 100%; }
  .phero__title { left: calc(52 * var(--u)); top: calc(351 * var(--u)); bottom: auto;
    width: calc(256 * var(--u)); font-size: calc(44 * var(--u)); }

  /* master ribbon: scaled mirrored instance, frame (-90,-31) 657x907 */
  .pribbon { left: calc(-90 * var(--u)); top: calc(-875 * var(--u));
    width: calc(657 * var(--u)); height: calc(907 * var(--u)); }

  /* home.css's anti-has-wash rules (.v3 .pdesc > p etc, specificity 0,2,1+)
     force absolute on desktop — out-rank them here for the flow layout */
  .v3 .pdesc > p { position: relative; z-index: 1; } /* relative: in flow AND above the wash svg */
  .v3 .pnutri { display: block; }
  .v3 .pnutri > .pnutri__card, .v3 .pnutri > .pnutri__right { position: relative; z-index: 1; }

  /* description: copy, then the can, heights flow per flavour */
  .pdesc { height: auto; padding: calc(52 * var(--u)) 0 calc(82 * var(--u)); }
  .pdesc p { left: auto; top: auto; /* home.css/has-wash offsets cleared */
    width: calc(324 * var(--u)); margin: 0 auto;
    font-size: calc(28 * var(--u)); line-height: calc(38.5 / 28); /* frame: 501u for 13 lines */ }
  .headzone > .pdesc__can { left: auto; top: auto; display: block;
    width: calc(221 * var(--u)); margin: calc(23 * var(--u)) auto 0; }
  /* DOM keeps the can before .pdesc (desktop z-order needs that); on mobile
     the flex order swaps them and the can is pulled up into space reserved
     inside .pdesc so it sits on the washed section background.
     reserve = 23 gap + can height at 221u + 82 tail; can height differs per
     range (soda can 590u, kids box 489u, hydrate can 602u). */
  .headzone { display: flex; flex-direction: column; }
  .headzone > .pdesc__can { order: 2; position: relative; z-index: 1; }
  .headzone > .pdesc { order: 1; }
  .range-soda .headzone > .pdesc { padding-bottom: calc(695 * var(--u)); }
  .range-soda .headzone > .pdesc__can { margin-top: calc(-672 * var(--u)); }
  .range-kids .headzone > .pdesc { padding-bottom: calc(594 * var(--u)); }
  .range-kids .headzone > .pdesc__can { margin-top: calc(-571 * var(--u)); }
  .range-hydrate .headzone > .pdesc { padding-bottom: calc(707 * var(--u)); }
  .range-hydrate .headzone > .pdesc__can { margin-top: calc(-684 * var(--u)); }

  /* nutrition + ingredients: one continuous band, flow layout */
  .pnutri { height: auto; padding: calc(80 * var(--u)) 0 calc(79 * var(--u)); }
  .pnutri__card { left: auto; top: auto; width: calc(341 * var(--u)); margin: 0 auto; }
  .pnutri__right { left: auto; top: auto; width: calc(312 * var(--u));
    margin: calc(80 * var(--u)) auto 0; }
  .pnutri__right .ing { grid-template-columns: 1fr; gap: calc(40 * var(--u)) 0;
    margin-top: calc(80 * var(--u)); }

  /* photo pair: stacked */
  .ppair { display: block; height: auto; }
  .ppair__ph { width: 100%; height: calc(475 * var(--u)); }
  .ppair__ph + .ppair__ph { height: calc(467 * var(--u)); }
  .ppair img { display: block; width: 100%; height: 100%; }

  /* wave: pura-stripes(2) instance, matrix from the frame. top 942 = below
     BOTH photos (475 + 467): it divides the photo pair from the related
     rail (Lee, 8 Sep — was riding over the second photo) */
  .stripes--pv2, .range-kids .stripes--pv2, .range-hydrate .stripes--pv2 {
    left: calc(327.4 * var(--u)); top: calc(612 * var(--u));
    width: calc(557 * var(--u)); height: calc(727 * var(--u));
    transform: matrix(0.66601, 0.74594, -0.74594, 0.66601, 0, 0);
    transform-origin: top left; overflow: visible; }

  /* related: swipe rail, one tile per viewport (tile 1 fits the 400 frame) */
  .prelated, .range-kids .prelated, .range-hydrate .prelated {
    height: calc(675 * var(--u)); margin-top: 0; display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory; }
  .prelated::-webkit-scrollbar { display: none; }
  .prelated__tile { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
  .range-soda .ppair::after { display: none; }
}

/* touch has no hover: credits + related names always visible on mobile */
@media (max-width: 640px) {
  .ppair__credit { opacity: 1; }
  /* +40u: at 526 the name sat over the can's bottom (Lee, 8 Sep) */
  .prelated__name { opacity: 1; transform: none; top: calc(566 * var(--u)); }
  .prelated__tile:hover img { transform: translateX(-50%); }

  /* footer wave rides up over the rail so its transparent crest never
     shows a white slice (crest is ~140u deep) */
  .range-soda .foot3, .range-kids .foot3, .range-hydrate .foot3 {
    margin-top: calc(-150 * var(--u)); }

  /* the flavour colour block extends behind the armed buy card: the card
     is order 3 in the headzone flex, so grow .pdesc's reserved padding and
     pull the card up into it (Lee, 8 Sep: colour stopped short) */
  /* per range: reserve = 23 gap + 80% of the can + card + 50 colour tail
     (Lee, 8 Sep: show ~80% of the can, then the card, then 50 of the
     flavour colour before the next section). Card overlaps the can's
     bottom 20% via its own negative margin. Card 368u (soon-card 228u);
     cans: soda 591u, kids 490u, hydrate 602u. */
  body.commerce-on.market-us .range-soda .headzone > .pdesc {
    padding-bottom: calc(914 * var(--u)); }
  body.commerce-on.market-us .range-kids .headzone > .pdesc {
    padding-bottom: calc(833 * var(--u)); }
  body.commerce-on.market-us .range-hydrate .headzone > .pdesc {
    padding-bottom: calc(783 * var(--u)); }
  body.commerce-on.market-us .range-soda .headzone > .pdesc__can {
    margin-top: calc(-891 * var(--u)); }
  body.commerce-on.market-us .range-kids .headzone > .pdesc__can {
    margin-top: calc(-810 * var(--u)); }
  body.commerce-on.market-us .range-hydrate .headzone > .pdesc__can {
    margin-top: calc(-760 * var(--u)); }
  body.commerce-on.market-us .range-soda .headzone > .buy {
    margin-top: calc(-118 * var(--u)); }
  body.commerce-on.market-us .range-kids .headzone > .buy {
    margin-top: calc(-98 * var(--u)); }
  body.commerce-on.market-us .range-hydrate .headzone > .buy,
  body.commerce-on.market-us .range-hydrate .headzone > .buy--soon {
    margin-top: calc(-120 * var(--u)); }
}

/* ── related rail: arrow-stepped carousel (Lee, 11 Sep). Three tiles
   visible; the track slides one tile per click and wraps. Arrows render
   only when there are more than three siblings (hydrate/kids stay static). */
.prelated { overflow: hidden; }
.prelated__track { position: absolute; inset: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.prelated__track.is-snapping { transition: none; }
.prelated__nav { position: absolute; z-index: 4; right: calc(100 * var(--u)); top: calc(84 * var(--u));
  display: flex; gap: calc(12 * var(--u)); }
.prelated__arrow { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border: 0; border-radius: 50%;
  background: #20b4c2; color: #fff; font: inherit; font-size: calc(24 * var(--u)); line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background .25s var(--ease), transform .25s var(--ease); }
.prelated__arrow:hover { background: #0e5168; transform: scale(1.06); }
.prelated__arrow:focus-visible { outline: 3px solid #f8d45b; outline-offset: 2px; }
@media (max-width: 640px) {
  /* phones already swipe the rail — arrows are redundant */
  .prelated__nav { display: none; }
  .prelated__track { position: static; display: contents; }
}

/* rail: a multipack tile (shared by flavour + pack pages). Same proportions
   as the soda-page pack tile (sides 143:159 centre) scaled so the centre can
   is exactly a single rail can (144u) and the sides 0.9 of it: the pack
   carries the same visual weight as its neighbours (Lee, 12 Sep: "a bit
   small") */
.prelated__trio { position: absolute; left: 50%; top: calc(158 * var(--u)); transform: translateX(-50%);
  display: flex; align-items: flex-start; width: max-content; }
.prelated__trio img { position: static; left: auto; top: auto; transform: none;
  width: calc(130 * var(--u)); height: auto; margin: calc(22 * var(--u)) calc(-14 * var(--u)) 0; }
.prelated__trio img:nth-child(2) { width: calc(144 * var(--u)); margin-top: 0; position: relative; z-index: 1; }
.prelated__tile:hover .prelated__trio img { transform: translateY(calc(-36 * var(--u))); }