/* ============================================================
   Range/category pages (Figma Soda 2132:8123, Kids 2132:10222,
   hydrate 2132:11989). Design px at 1440 via --u.
   ============================================================ */

.catpage { position: relative; }

/* hero reuses .chero (pages.css); sub casing comes from .chero .sub */
/* category hero jpgs are exported at the exact frame region (1440-wide) —
   the content-page 1869u box would re-crop them */
.catpage .chero img { left: 0; width: 100%; }

/* intro band: home's teal fade */
.catintro { position: relative; height: calc(801 * var(--u)); margin-top: calc(-20 * var(--u));
  background: linear-gradient(180deg, #54b8c2 0%, #75cad1 45%, #92d8de 75%, #b6e5e9 100%); }
.catintro h2 { z-index: 3; margin: 0; color: #fff; font-weight: 700;
  font-size: calc(64 * var(--u)); line-height: 1.15; }
.catintro p { z-index: 3; margin: 0; color: #fff; font-weight: 700;
  font-size: calc(36 * var(--u)); line-height: 1.45; }

.catintro.has-wash > h2, .catintro.has-wash > p { position: absolute; }

/* flavour tiles */
.catrow { position: relative; display: flex; z-index: 2; height: calc(675 * var(--u)); }
.catrow a { position: relative; display: block; flex: 1 1 0; height: 100%;
  background: var(--bg); overflow: hidden; }
.catrow img { position: absolute; left: calc(var(--cx) * var(--u)); top: calc(var(--cy, 158) * var(--u));
  width: calc(var(--w, 131) * var(--u)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
/* demo-home diagonal gradient fill, revived for the category tiles (Lee,
   8 Sep): same mechanic as .tile__fill — oversized skewed panel parked off
   to the left, slid in on hover over the tile's flat rest colour */
.catrow__fill { position: absolute; left: -25%; top: -10%; width: 150%; height: 120%;
  background: linear-gradient(180deg, var(--fill-a), var(--fill-b));
  transform: translateX(-105%) skewX(-10deg); transition: transform .8s var(--ease); }
.catrow a:hover .catrow__fill { transform: translateX(0) skewX(-10deg); }
/* hover per the cranberry state on frame 2132:8123 (8 Sep): the can lifts
   up-right with a small left tilt, and the flavour name fades in below */
/* Figma rotation is CCW-positive, CSS is CW-positive: frame's -8.75 = CSS +8.75 */
.catrow a:hover img { transform: translate(calc(32.6 * var(--u)), calc(-47.9 * var(--u))) rotate(8.75deg); }
.catrow__name { position: absolute; left: 0; right: 0; text-align: center; top: calc(549 * var(--u));
  color: #fff; font-weight: 700; font-size: calc(32 * var(--u)); pointer-events: none;
  text-shadow: 0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(0, 0, 0, .2); /* per Figma text effect */
  opacity: 0; transform: translateY(calc(12 * var(--u)));
  transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); }
.catrow a:hover .catrow__name { opacity: 1; transform: none; }

/* photo band ("What's actually…") */
.catg7 { position: relative; z-index: 1; height: calc(997 * var(--u)); overflow: hidden; color: #fff; }
.catg7 > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catg7 h2 { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto;
  font-weight: 700; font-size: calc(74 * var(--u)); }
.catg7__col { position: absolute; text-align: center; }
.catg7__col img { display: block; margin: 0 auto; }
.catg7__col .mg { font-weight: 700; font-size: calc(128 * var(--u)); line-height: 1; margin: 0; }
.catg7__col p { position: absolute; left: 0; right: 0; margin: 0;
  font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1.2; }
/* .catg7 prefix keeps it above pages.css's `.cpage p { margin:0 }`, which
   otherwise kills the auto-margin centring and flushes the block left */
.catg7 .catg7__close { position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center;
  width: calc(1092 * var(--u)); font-weight: 700; font-size: calc(32 * var(--u)); line-height: 1.4; }

/* CTA band */
.catcta { position: relative; z-index: 0; height: calc(524 * var(--u)); background: #0abcc5;
  color: #fff; }
.catcta h2 { position: absolute; left: 0; right: 0; top: calc(78 * var(--u));
  margin: 0 auto; width: max-content; max-width: calc(1005 * var(--u)); text-align: center;
  font-weight: 700; font-size: calc(54 * var(--u)); }
.catcta__btns { position: absolute; left: 0; right: 0; top: calc(268 * var(--u));
  display: flex; justify-content: center; gap: calc(28 * var(--u)); }
.catcta__btns a { display: inline-flex; align-items: center; justify-content: center;
  height: calc(66 * var(--u)); padding: 0 calc(44 * var(--u));
  border-radius: calc(33 * var(--u)); font-weight: 700; font-size: calc(28 * var(--u));
  text-decoration: none; }
.catcta__btns a.b1 { background: #fefeff; color: #20b4c2; }
.catcta__btns a.b2 { background: #f8d359; color: #fafdfd; }
/* inert "Coming soon" pill (hydrate): button look, no link, no hover */
.catcta__btns .catcta__soon { display: inline-flex; align-items: center; justify-content: center;
  height: calc(66 * var(--u)); padding: 0 calc(44 * var(--u)); border-radius: calc(33 * var(--u));
  font-weight: 700; font-size: calc(28 * var(--u)); background: #fefeff; color: #20b4c2; cursor: default; white-space: nowrap; }

/* master ribbon + generator art anchored to frame coords.
   z3: the waves ride OVER the tile rows, as in the frames */
.catart { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.catart .cribbon { z-index: 1; }
.catart .gstripes { z-index: 3; }

/* footer wave overlaps the CTA band */
.catpage .foot3 { z-index: 4; }

/* ── MOBILE (no category frames exist — extrapolated from the product/home
   mobile patterns: full-bleed hero w/ 44u title, stacked tiles like the home
   trio, centred point columns like the promise section. Desktop-coordinate
   art is hidden pending mobile placements from Lee. !important is needed
   because the desktop geometry lives in inline styles. ────────────────── */
@media (max-width: 640px) {
  /* unified divider wave (Lee, 8 Sep: product wave "size is good, use this
     for other screens") — the product-page 2v2 instance (557x727, ~48°
     matrix) riding the tiles→catg7 boundary; only `top` differs per page */
  .catpage .gstripes { display: flex; overflow: visible;
    left: calc(327.4 * var(--u)) !important; top: calc(-330 * var(--u)) !important;
    width: calc(557 * var(--u)) !important; height: calc(727 * var(--u)) !important;
    transform: matrix(0.66601, 0.74594, -0.74594, 0.66601, 0, 0) !important;
    transform-origin: top left !important; }
  /* reduced from home's 639x881 (Lee: "reducing the size of the whole
     ribbon so that it turns into the screen higher up") — at 0.75 the
     U-bend exits inside the hero instead of over the intro copy */
  .catart .cribbon { width: calc(480 * var(--u)) !important;
    height: calc(660 * var(--u)) !important;
    left: calc(-40 * var(--u)) !important; top: calc(10 * var(--u)) !important; }
  /* un-mirrored on mobile: enters top-left like home (Lee, 8 Sep) */
  .catart .cribbon.flip { transform: none; left: calc(-40 * var(--u)) !important; right: auto !important; }
  /* spine draws on scroll like desktop (Lee, 8 Sep) */
  .catintro { height: auto !important; padding: calc(56 * var(--u)) calc(38 * var(--u)); }
  .catintro h2, .catintro p { position: static !important; width: auto !important;
    left: auto !important; margin: 0 0 calc(20 * var(--u)); }
  .catintro h2 { font-size: calc(40 * var(--u)); }
  .catintro p { font-size: calc(26 * var(--u)); line-height: 1.4; }

  /* tiles stack full-width like the home trio */
  .catrow { flex-direction: column; height: auto; }
  .catrow a { flex: none; height: calc(485 * var(--u)); }  /* name clears the can (Lee) */
  /* kids cartons are shorter than cans — tighten the box-to-name gap */
  .pg-kids .catrow a { height: calc(400 * var(--u)); }
  .catrow img { left: 50% !important; top: calc(40 * var(--u)) !important;
    width: calc(126 * var(--u)) !important; margin-left: calc(-63 * var(--u)); }
  /* no hover on touch — name shows, can sits straight, fill sweeps on reveal */
  .catrow__name { opacity: 1; transform: none; top: auto; bottom: calc(24 * var(--u)); }
  .catrow a:hover img { transform: none; }

  .catg7 { height: auto !important; padding: calc(64 * var(--u)) 0 calc(50 * var(--u)); }
  .catg7 h2 { position: static !important; top: auto !important; width: auto;
    max-width: calc(330 * var(--u)); margin: 0 auto calc(44 * var(--u));
    text-align: center; font-size: calc(40 * var(--u)); }
  .catg7__col { position: static !important; left: auto !important; top: auto !important;
    width: calc(300 * var(--u)) !important; margin: 0 auto calc(44 * var(--u)); text-align: center; }
  .catg7__col img { position: static; margin: 0 auto calc(16 * var(--u)); }
  .catg7__col p { position: static !important; top: auto !important; }
  /* the closing line was still on desktop absolute coords and overprinted
     the columns (kids/hydrate). relative (not static) + z1: a static line
     paints UNDER the section's absolute img.bg */
  .catg7 .catg7__close { position: relative !important; z-index: 1;
    left: 0 !important; top: auto !important;
    width: auto; max-width: calc(330 * var(--u)); margin: 0 auto;
    font-size: calc(26 * var(--u)); }

  .catcta { height: auto !important; padding: calc(56 * var(--u)) calc(38 * var(--u)); }
  .catcta h2 { position: static; top: auto; margin: 0 0 calc(28 * var(--u));
    width: auto; max-width: 100%; font-size: calc(38 * var(--u)); text-align: left; padding: 0; }
  .catcta__btns { position: static; top: auto; display: flex; flex-direction: column;
    gap: calc(16 * var(--u)); align-items: flex-start; }
}

/* ── US multipacks row on /soda/ (Figma 2472:833, Lee 11 Sep): two 720-wide
   tiles; three cans per tile — sides 143x368 at (153/424, 157), centre
   159x410 at (281, 133). No hover lift, no name (per the frame). */
.catrow--packs a { flex: 1 1 0; }
.catrow--packs .catrow__trio { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.catrow--packs .catrow__trio img { position: absolute; top: calc(157 * var(--u)); width: calc(143 * var(--u)); height: auto;
  left: auto !important; margin: 0; transition: none; }
.catrow--packs .catrow__trio img:nth-child(1) { left: calc(153 * var(--u)) !important; }
.catrow--packs .catrow__trio img:nth-child(3) { left: calc(424 * var(--u)) !important; }
.catrow--packs .catrow__trio img.is-centre { left: calc(281 * var(--u)) !important; top: calc(133 * var(--u)); width: calc(159 * var(--u)); z-index: 1; }
.catrow--packs .catrow__trio img { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
/* hover parity with the flavour tiles (Lee, 11 Sep): cans lift, the
   gradient sweeps (light->mid via --fill-a/--fill-b on the tile), the name
   fades in below at the shared .catrow__name position */
.catrow--packs a:hover .catrow__trio img { transform: translateY(calc(-60 * var(--u))); }
/* the divider wave's crest reaches y561 under the Zest tile, exactly where
   the shared name sits (549+). Name up to 500 and a 60u lift (cans land at
   482) clears it by ~20u without touching the box height (Lee, 11 Sep: A) */
.catrow--packs .catrow__name { top: calc(500 * var(--u)); }
@media (max-width: 640px) {
  .catrow--packs a { height: calc(420 * var(--u)); }
  .catrow--packs .catrow__trio { width: calc(324 * var(--u)); left: 50%; transform: translateX(-50%); }
  .catrow--packs .catrow__trio img { top: calc(70 * var(--u)) !important; width: calc(112 * var(--u)) !important; }
  .catrow--packs .catrow__trio img:nth-child(1) { left: 0 !important; }
  .catrow--packs .catrow__trio img:nth-child(3) { left: calc(212 * var(--u)) !important; }
  .catrow--packs .catrow__trio img.is-centre { left: calc(100 * var(--u)) !important; top: calc(46 * var(--u)) !important; width: calc(124 * var(--u)) !important; }
}