/* ============================================================
   Multipack pages — Figma "Product US bundle" 2472:565 (Lee, 11 Sep).
   Pack palette via --pk-light / --pk-mid / --pk-dark set on <main>.
   Loads after product.css and overrides its slots.
   ============================================================ */

/* description band: light colour, 928 tall like the flavour desc */
.bundle .pdesc { background: var(--pk-light); }
/* three cans, per frame 2472:569 (group at 237,198 in the band):
   left 190x490 at (106,221), centre 212x545 at (279,193), right (467,221) */
.bundle__cans { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.bundle__can { position: absolute; height: auto; }
.bundle__can--l { left: calc(106 * var(--u)); top: calc(221 * var(--u)); width: calc(190 * var(--u)); }
.bundle__can--c { left: calc(279 * var(--u)); top: calc(193 * var(--u)); width: calc(212 * var(--u)); z-index: 2; }
.bundle__can--r { left: calc(467 * var(--u)); top: calc(221 * var(--u)); width: calc(190 * var(--u)); }
/* copy: 537 wide at (727,114) per the frame, 34/38 bold in the dark ink */
.bundle .pdesc .bundle__copy { position: absolute; z-index: 3; left: calc(727 * var(--u)); top: calc(114 * var(--u));
  width: calc(537 * var(--u)); margin: 0; color: var(--pk-dark); font-weight: 700;
  font-size: calc(34 * var(--u)); line-height: calc(38 / 34); }

/* "US online exclusive" pill above the copy — explains the missing buy
   card to international visitors (Lee, 12 Sep); shown to everyone */
.bundle .pdesc .bundle__tag { position: absolute; z-index: 3; left: calc(727 * var(--u)); top: calc(60 * var(--u));
  width: auto; display: inline-block;   /* .pdesc p sets a 625u column width — hug the text instead */
  margin: 0; padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(20 * var(--u));
  background: var(--pk-dark); color: #fff; font-weight: 700; font-size: calc(16 * var(--u));
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; }

/* buy card: mid colour @90%, 512x404 at (725,509 in band) */
.bundle .buy--pack { left: calc(725 * var(--u)); top: calc(509 * var(--u)); width: calc(512 * var(--u));
  height: auto; padding-bottom: calc(46 * var(--u));
  background: color-mix(in srgb, var(--pk-mid) 90%, transparent); color: var(--pk-dark); }
.bundle .buy__price { position: static; padding: calc(46 * var(--u)) 0 0 calc(40 * var(--u)); }
/* size picker (frame 2472:874): "Size:" + pills, 20 bold; selected = light
   fill, unselected = mid @20% */
.buy__sizes { display: flex; align-items: center; gap: calc(10 * var(--u));
  margin: calc(19 * var(--u)) 0 0 calc(40 * var(--u)); font-weight: 700; font-size: calc(20 * var(--u)); }
.buy__sizes-lbl { margin-right: 0; }
.buy__size-btn { border: 0; border-radius: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u));
  background: color-mix(in srgb, var(--pk-mid) 20%, transparent); color: var(--pk-dark);
  font: inherit; font-weight: 700; cursor: pointer; transition: background .25s var(--ease); }
.buy__size-btn[aria-pressed="true"] { background: var(--pk-light); }
.buy__size-btn:hover { background: color-mix(in srgb, var(--pk-light) 60%, transparent); }
.buy__size-btn:focus-visible { outline: 2px solid var(--pk-dark); outline-offset: 2px; }
.bundle .buy__stars { top: calc(46 * var(--u)); right: calc(40 * var(--u)); }
.bundle .buy__qty { position: relative; left: 0; top: 0; display: inline-block; vertical-align: middle;
  margin: calc(26 * var(--u)) 0 0 calc(40 * var(--u)); }
.bundle .buy__atc { position: static; display: inline-block; vertical-align: middle;
  margin: calc(26 * var(--u)) 0 0 calc(53 * var(--u)); }
.bundle .buy__qty span, .bundle .buy__qty button { color: var(--pk-dark); }
.bundle .buy__qty { background: color-mix(in srgb, var(--pk-dark) 20%, transparent); }

/* ingredients band: mid colour, 599 tall, 4 centred cells (frame 2472:695) */
/* z3: paints over the master ribbon tail like the flavour nutrition band does (Figma shows the band clean) */
.bundle__ing { position: relative; z-index: 3; height: calc(599 * var(--u)); background: var(--pk-mid); color: var(--pk-dark); }
.bundle__ing h3 { position: absolute; left: calc(80 * var(--u)); top: calc(158 * var(--u)); margin: 0;
  width: calc(554 * var(--u)); text-align: center; font-weight: 700; font-size: calc(40 * var(--u)); line-height: .7; }
.bundle__ing .ing { position: absolute; left: calc(80 * var(--u)); top: calc(266 * var(--u)); width: calc(1267 * var(--u));
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 263fr 271fr 263fr 271fr; gap: 0 calc(80 * var(--u)); }
.bundle__ing .ing li { font-weight: 700; font-size: calc(28 * var(--u)); line-height: 1.2; text-align: center; }
.bundle__ing .ing li i { display: block; height: calc(91 * var(--u)); margin: 0 auto calc(16 * var(--u));
  background: var(--pk-dark); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* three-photo strip: 570 tall, thirds (frame 2472:862). The tri-wave sits
   -573u from the strip top on the bundle frame (2472:744) vs -305u on the
   846-tall flavour pair — same art, same x */
.bundle__strip { height: calc(570 * var(--u)); }
.bundle .stripes--pv2 { top: calc(-573 * var(--u)); }
.bundle__strip .ppair__ph { width: 33.3333%; }


/* ── mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* the flavour rules reserve 914u under .pdesc for the single can — the
     bundle's cans are in flow, so no reserve */
  .bundle .headzone > .pdesc { height: auto !important;
    padding: calc(56 * var(--u)) calc(38 * var(--u)) calc(60 * var(--u)) !important; }
  .bundle__cans { position: relative; height: calc(440 * var(--u)); margin: 0 auto calc(30 * var(--u)); width: calc(324 * var(--u)); }
  .bundle__can--l { left: 0; top: calc(30 * var(--u)); width: calc(118 * var(--u)); }
  .bundle__can--c { left: calc(96 * var(--u)); top: 0; width: calc(132 * var(--u)); }
  .bundle__can--r { left: calc(206 * var(--u)); top: calc(30 * var(--u)); width: calc(118 * var(--u)); }
  .bundle .pdesc .bundle__tag { position: static; display: inline-block; width: auto !important; margin: 0 0 calc(16 * var(--u)); font-size: calc(14 * var(--u)); }
  .bundle .pdesc .bundle__copy { position: static; width: auto; font-size: calc(22 * var(--u)) !important; line-height: 1.35; }
  .bundle .buy--pack { position: static; width: auto; margin: calc(28 * var(--u)) 0 0; }
  .bundle .buy__atc { display: block; margin: calc(20 * var(--u)) 0 0 calc(30 * var(--u)); }
  .bundle__ing { height: auto; padding: calc(56 * var(--u)) calc(38 * var(--u)); }
  .bundle__ing h3 { position: static; width: auto; line-height: 1.2; margin-bottom: calc(36 * var(--u)); }
  .bundle__ing .ing { position: static; width: auto; grid-template-columns: 1fr 1fr; gap: calc(36 * var(--u)) calc(20 * var(--u)); }
  .bundle__ing .ing li { font-size: calc(20 * var(--u)); }
  .bundle__strip { height: auto; flex-direction: column; }
  .bundle__strip .ppair__ph { width: 100%; height: calc(280 * var(--u)); }
}
/* per-pack fruit icon from Sanity (coloured SVG, like the flavour pages) */
.bundle__ing .ing li img.ing__fruit { display: block; height: calc(91 * var(--u)); width: auto; margin: 0 auto calc(16 * var(--u)); }