/* ============================================================
   Commerce UI — header region pill + product buy block.
   Extracted from Figma 2300:72687 (Lemon & Elderflower, 4 Sep).
   Every colour derives from the flavour palette (--ink / --desc-bg)
   plus brand teal, so one design serves all 14 products.
   Everything here is dark until commerce.js arms it (body.commerce-on).
   ============================================================ */

/* ── header pill: flag · cart · burger (replaces the solo burger) ──
   two layouts per Figma 2391:73992 (US, with cart, 169u) and
   2391:74004 (ROW, no cart, 117u) — the pill hugs its right anchor */
.npill { position: absolute; right: calc(80 * var(--u)); top: calc(51 * var(--u));
  width: calc(169 * var(--u)); height: calc(49 * var(--u));
  background: var(--teal); border-radius: calc(10 * var(--u)); display: none; }
body:not(.market-us) .npill { width: calc(117 * var(--u)); }
/* pill breathes between the two layouts when the market flips (QA, 8 Sep) */
.npill { transition: width .35s var(--ease); }
.npill .burger { transition: left .35s var(--ease); }
body.commerce-on .npill { display: block; }
body.commerce-on .nav > .burger { display: none; }   /* the solo circle retires */

.npill button { position: absolute; padding: 0; }
.npill__flag { left: calc(18 * var(--u)); top: calc(10.5 * var(--u));
  width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.npill__flag img, .npill__flag svg { width: 100%; height: 100%; border-radius: 50%; display: block; }
.npill__flag .row-icon { display: none; }
body:not(.market-us) .npill__flag .us { display: none; }
body:not(.market-us) .npill__flag .row-icon { display: block; }

.npill__cart { left: calc(70 * var(--u)); top: calc(10.5 * var(--u));
  width: calc(31 * var(--u)); height: calc(28 * var(--u)); display: none; }
body.market-us .npill__cart { display: block; }
.npill__cart img { width: 100%; height: 100%; display: block; }
.npill__count { position: absolute; right: calc(-8 * var(--u)); top: calc(-8 * var(--u));
  min-width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(9 * var(--u));
  background: var(--yellow); color: #10576f; font-weight: 700;
  font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); text-align: center;
  padding: 0 calc(4 * var(--u)); }
.npill__count[hidden] { display: none; }

.npill .burger { left: calc(117.5 * var(--u)); top: 0; width: calc(41 * var(--u)); height: 100%;
  background: none; border-radius: 0; display: grid; place-content: center; gap: calc(6 * var(--u)); }
body:not(.market-us) .npill .burger { left: calc(62 * var(--u)); }
.npill .burger i { width: calc(25 * var(--u)); }

/* market dropdown */
.npill__menu { position: absolute; right: 0; top: calc(60 * var(--u)); z-index: 90;
  background: #fff; border-radius: calc(10 * var(--u)); overflow: hidden;
  box-shadow: 0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(0, 45, 60, .18); }
.npill__menu[hidden] { display: none; }
.npill__menu button { position: static; display: block; width: 100%; text-align: left;
  padding: calc(12 * var(--u)) calc(20 * var(--u)); color: #10576f;
  font-weight: 700; font-size: calc(16 * var(--u)); white-space: nowrap; }
.npill__menu button:hover { background: #e9f8f9; }
.npill__menu button.is-on { color: var(--teal); }

/* ── product page buy block (in .headzone, over the description band) ── */
.buy { position: absolute; z-index: 4; left: calc(547 * var(--u)); top: calc(509 * var(--u));
  width: calc(512 * var(--u)); height: calc(266 * var(--u)); /* design is 392 — restore when the buy-with-shop row un-darks */
  background: color-mix(in srgb, var(--desc-bg, #fdf5aa) 65%, #ffffff);
  border-radius: calc(22 * var(--u)); color: var(--ink, #78610e); display: none; }
body.commerce-on.market-us .buy.is-ready { display: block; }
.buy__price { position: absolute; left: calc(40 * var(--u)); top: calc(38 * var(--u));
  font-weight: 700; font-size: calc(52 * var(--u)); line-height: 1.1; }
.buy__size { position: absolute; left: calc(40 * var(--u)); top: calc(117 * var(--u));
  font-weight: 700; font-size: calc(20 * var(--u)); }
/* stars — fed by Stamped's public widget API (Lee, 4 Sep: build with Stamped) */
.buy__stars { position: absolute; right: calc(40 * var(--u)); top: calc(42 * var(--u)); text-align: center; }
.buy__stars[hidden] { display: none; }
.buy__stars .row { position: relative; display: inline-block; font-size: calc(26 * var(--u));
  line-height: 1; letter-spacing: calc(3 * var(--u));
  color: color-mix(in srgb, var(--ink, #78610e) 25%, transparent); }
.buy__stars .row b { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap;
  color: var(--ink, #78610e); font-weight: 400; }
.buy__stars .lbl { display: block; margin-top: calc(8 * var(--u));
  font-weight: 500; font-size: calc(16 * var(--u)); }

.buy__qty { position: absolute; left: calc(40 * var(--u)); top: calc(155 * var(--u));
  width: calc(89 * var(--u)); height: calc(71 * var(--u)); border-radius: calc(22 * var(--u));
  background: color-mix(in srgb, var(--ink, #78610e) 20%, transparent); }
.buy__qty span { position: absolute; left: calc(24 * var(--u)); top: 0; height: 100%;
  display: flex; align-items: center; font-weight: 700; font-size: calc(24 * var(--u)); }
.buy__qty button { position: absolute; right: calc(16 * var(--u)); width: calc(22 * var(--u));
  height: calc(22 * var(--u)); color: var(--ink, #78610e); font-size: calc(16 * var(--u));
  line-height: 1; padding: 0; }
.buy__qty button.up { top: calc(11 * var(--u)); }
.buy__qty button.down { bottom: calc(11 * var(--u)); }

.buy__atc { position: absolute; left: calc(182 * var(--u)); top: calc(155 * var(--u));
  width: calc(277 * var(--u)); height: calc(71 * var(--u)); border-radius: calc(22 * var(--u));
  background: #20b4c2; color: #fff; font-weight: 700; font-size: calc(36 * var(--u));
  transition: filter .3s var(--ease), opacity .3s var(--ease); }
.buy__atc:hover { filter: brightness(1.07); }
.buy__atc[disabled] { opacity: .55; cursor: default; font-size: calc(28 * var(--u)); }

/* buy-with-shop + more-payment-options ship dark until Shop Pay's official
   component (their purple, their assets) is signed off — checkout offers
   these wallets anyway */
.buy__shop, .buy__more { display: none; }

/* hydrate: coming soon in the US */
.buy--soon { height: auto; padding: calc(34 * var(--u)) calc(40 * var(--u)); box-sizing: border-box; }
.buy--soon p { margin: 0; font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1.3; }
.buy--soon .sub { font-weight: 500; font-size: calc(18 * var(--u)); margin-top: calc(10 * var(--u)); }
body.commerce-on.market-us .buy--soon { display: block; }

/* ── cart drawer (Figma 2321:73197) ─────────────────────── */
.cdrawer { position: fixed; inset: 0; z-index: 130; }
.cdrawer[hidden] { display: none; }
.cdrawer__scrim { position: absolute; inset: 0; background: rgba(0, 45, 60, .4);
  opacity: 0; transition: opacity .4s var(--ease); }
.cdrawer.is-open .cdrawer__scrim { opacity: 1; }
.cdrawer__panel { position: absolute; right: 0; top: 0;
  width: calc(512 * var(--u)); max-height: 100%; overflow-y: auto;
  background: rgba(32, 180, 194, .92); backdrop-filter: blur(6px);
  border-radius: 0 0 0 calc(22 * var(--u)); color: #fff;
  padding: calc(60 * var(--u)) calc(46 * var(--u)) calc(40 * var(--u)); box-sizing: border-box;
  transform: translateX(105%); transition: transform .45s var(--ease); }
.cdrawer.is-open .cdrawer__panel { transform: translateX(0); }
.cdrawer__x { position: absolute; left: calc(12 * var(--u)); top: calc(7 * var(--u));
  width: calc(42 * var(--u)); height: calc(42 * var(--u)); padding: calc(9 * var(--u)); }
.cdrawer__x svg { width: 100%; height: 100%; display: block; }

.cdrawer__line { padding: calc(23 * var(--u)) 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, .45); }
.cdrawer__line h4 { margin: 0 0 calc(12 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 700; }
.cdrawer__row { display: grid; grid-template-columns: calc(34 * var(--u)) calc(64 * var(--u)) 1fr calc(28 * var(--u));
  gap: calc(24 * var(--u)); align-items: center; }
.cdrawer__row img { height: calc(76 * var(--u)); width: auto; justify-self: center; }
.cdrawer__q { position: relative; width: calc(64 * var(--u)); height: calc(76 * var(--u));
  border-radius: calc(16 * var(--u)); background: rgba(255, 255, 255, .25); }
.cdrawer__q span { position: absolute; left: calc(14 * var(--u)); top: 50%; transform: translateY(-50%);
  font-weight: 700; font-size: calc(24 * var(--u)); }
.cdrawer__q button { position: absolute; right: calc(8 * var(--u)); width: calc(18 * var(--u));
  height: calc(20 * var(--u)); color: #fff; font-size: calc(13 * var(--u)); line-height: 1; padding: 0; }
.cdrawer__q .up { top: calc(12 * var(--u)); }
.cdrawer__q .down { bottom: calc(12 * var(--u)); }
.cdrawer__amt b { display: block; font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1.05; }
.cdrawer__amt i { font-style: normal; font-weight: 700; font-size: calc(16 * var(--u)); }
.cdrawer__rm { width: calc(28 * var(--u)); height: calc(28 * var(--u)); color: #fff;
  border: 2px solid #fff; border-radius: 50%; font-size: calc(14 * var(--u)); line-height: 1;
  opacity: .85; }
.cdrawer__rm:hover { opacity: 1; }

.cdrawer__empty { padding: calc(30 * var(--u)) 0 calc(10 * var(--u)); }
.cdrawer__empty p { margin: 0; font-weight: 700; font-size: calc(32 * var(--u)); line-height: 1.25; }
.cdrawer__empty .sub { font-weight: 500; font-size: calc(22 * var(--u)); margin-top: calc(10 * var(--u)); }

.cdrawer__total { display: flex; justify-content: space-between; align-items: baseline;
  padding: calc(34 * var(--u)) 0 calc(30 * var(--u)); }
.cdrawer__total[hidden] { display: none; }
.cdrawer__total span { font-weight: 700; font-size: calc(32 * var(--u)); }
.cdrawer__total b { font-weight: 700; font-size: calc(40 * var(--u)); color: #fff; }

.cdrawer__checkout { display: block; width: calc(239 * var(--u)); height: calc(62 * var(--u));
  border-radius: calc(22 * var(--u)); background: #fff; color: #20b4c2;
  font-weight: 700; font-size: calc(36 * var(--u)); }
.cdrawer__checkout[hidden] { display: none; }
.cdrawer__continue { display: block; margin-top: calc(20 * var(--u));
  width: calc(322 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(22 * var(--u));
  background: rgba(255, 255, 255, .7); color: #20b4c2; font-weight: 500; font-size: calc(28 * var(--u)); }
.cdrawer__ship { margin: calc(40 * var(--u)) 0 0; font-weight: 500; font-size: calc(24 * var(--u)); }

@media (max-width: 640px) { .cdrawer__panel { width: 100%; border-radius: 0; } }

/* ── US-store notice (non-US visitor picks the US store) ────
   same visual language as the cart drawer: teal glass card */
.usnotice { position: fixed; inset: 0; z-index: 140; }
.usnotice[hidden] { display: none; }
.usnotice__scrim { position: absolute; inset: 0; background: rgba(0, 45, 60, .45); }
/* card per Figma 2391:74018 (Location popup) */
.usnotice__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(533 * var(--u)); box-sizing: border-box; text-align: center;
  background: rgba(32, 180, 194, .9); backdrop-filter: blur(6px);
  border-radius: calc(22 * var(--u)); color: #fff;
  padding: calc(83 * var(--u)) calc(48 * var(--u)) calc(76 * var(--u)); }
.usnotice__x { position: absolute; right: calc(36 * var(--u)); top: calc(38 * var(--u));
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .25s var(--ease); }
.usnotice__x svg { width: 100%; height: 100%; display: block; }
.usnotice__x:hover { opacity: .7; }
.usnotice__card h3 { margin: 0 0 calc(34 * var(--u));
  font-weight: 700; font-size: calc(28 * var(--u)); line-height: 1.22; }
.usnotice__card p { margin: 0 0 calc(48 * var(--u));
  font-weight: 500; font-size: calc(28 * var(--u)); line-height: 1.22; }
.usnotice__go { display: block; margin: 0 auto;
  width: calc(401 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(22 * var(--u));
  background: #fff; color: #20b4c2; font-weight: 700; font-size: calc(32 * var(--u)); }
.usnotice__stay { display: block; margin: calc(20 * var(--u)) auto 0;
  width: calc(408 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(22 * var(--u));
  background: rgba(255, 255, 255, .9); color: #20b4c2; font-weight: 500; font-size: calc(28 * var(--u)); }
@media (max-width: 640px) {
  /* the desktop card ran TALLER than a phone screen — the centred card's
     top (and the ✕) sat above the viewport (Lee, 8 Sep). Tighter type +
     padding fits it on screen; max-height scrolls as a safety net. */
  .usnotice__card { width: calc(360 * var(--u));
    padding: calc(64 * var(--u)) calc(36 * var(--u)) calc(48 * var(--u));
    max-height: 86vh; max-height: 86svh; overflow: auto; }
  .usnotice__card h3 { font-size: calc(24 * var(--u)); }
  .usnotice__card p { font-size: calc(20 * var(--u)); margin-bottom: calc(36 * var(--u)); }
  /* full content width: the fixed 300u overflowed the padded card and
     skewed off-centre (Lee: centre the buttons) */
  .usnotice__go, .usnotice__stay { width: 100%; font-size: calc(20 * var(--u)); }
  .usnotice__x { width: calc(40 * var(--u)); height: calc(40 * var(--u));
    top: calc(24 * var(--u)); right: calc(24 * var(--u)); }
}

/* mobile buy block — Lee 4 Sep: adapt the desktop card (no mobile frame).
   Full-width card between the description copy and the can; the section
   grows only when commerce is armed, so the un-armed page matches the
   mobile frame exactly. */
@media (max-width:640px) {
  .buy { position: static; order: 3; width: calc(360 * var(--u));
    height: auto; margin: calc(28 * var(--u)) auto 0; padding-bottom: calc(36 * var(--u)); }
  body.commerce-on.market-us .buy.is-ready, body.commerce-on.market-us .buy--soon { display: block; }
  .buy__price { position: static; padding: calc(30 * var(--u)) 0 0 calc(30 * var(--u)); }
  .buy__size { position: static; padding-left: calc(30 * var(--u)); }
  /* stars join the flow — absolute right collided with the price on the
     narrower card */
  .buy__stars { position: static; text-align: left;
    padding: calc(10 * var(--u)) 0 0 calc(30 * var(--u)); }
  /* stars stay absolute within the card; left/top must be cleared or the
     desktop 547u/509u re-apply as RELATIVE offsets and shove the card
     off-screen right (this was "commerce block not showing on mobile") */
  .buy { position: relative; left: 0; top: 0; }
  /* relative, not static: the count span and arrows are absolute and must
     anchor to the qty box, not fly to the card's corners */
  .buy__qty { position: relative; left: 0; top: 0;
    margin: calc(20 * var(--u)) 0 0 calc(30 * var(--u));
    display: inline-block; vertical-align: middle; }
  /* counter and button stack on phones — explicit block with a 20u gap
     (Lee: they touched; add space above the button) */
  .buy__atc { position: static; display: block;
    width: auto; padding: 0 calc(30 * var(--u)); white-space: nowrap;
    margin: calc(20 * var(--u)) 0 0 calc(30 * var(--u));
    margin-right: calc(30 * var(--u)); }
  .buy--soon { margin-top: calc(28 * var(--u)); }
  .npill { right: calc(20 * var(--u)); top: calc(22 * var(--u)); }
}

/* US-only blocks (e.g. the where-to-buy store-finder map) */
body:not(.market-us) .us-only { display: none; }
body.market-us .row-only { display: none; }   /* international-only content (policy pages, 14 Sep) */