/* Cart Toss — step 1: a product card, every colour a token. Nothing moves yet.

   ---- 1. TOKENS: three layers. One look for now (glass); step 6 adds two more ----
   1a PRIMITIVES (:root). Raw, hand-tuned values with no meaning. One tonal scale per colourway, each an analogous run
      with depth: ember (cream → amber → ember orange → wine), cobalt (ice → cyan → cobalt → indigo night),
      magenta (blush → peach → magenta → plum).
   1b COLOURWAY ALIASES ([data-color]). --c-50 … --c-950 point at the chosen scale. Change
      data-color and every colour on the page follows.
   1c SEMANTIC TOKENS (on .stage): what each colour is for: the stage, the card's surface and ink, the accent, the
      image well, the button, the chips, the pills.
   COMPONENT RULES use only semantic tokens. The exceptions are transparency helpers: color-mix(… N%, transparent). */

/* 1a · primitives */
:root {
  --sans: 'Geist', -apple-system, system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif;

  --ember-50: #FFF6EA; --ember-100: #FFE9C7; --ember-200: #FFD08A; --ember-300: #FFB054; --ember-400: #FF8A2C;
  --ember-500: #F5541A; --ember-600: #DE3A16; --ember-700: #AE2415; --ember-800: #74131C; --ember-900: #420A15; --ember-950: #23060C;

  --cobalt-50: #EEF7FF; --cobalt-100: #D5ECFF; --cobalt-200: #A3D8FF; --cobalt-300: #5CC0FF; --cobalt-400: #3A8DFF;
  --cobalt-500: #2B4EF7; --cobalt-600: #2838DE; --cobalt-700: #2026AC; --cobalt-800: #19196E; --cobalt-900: #0E0E40; --cobalt-950: #070723;

  --magenta-50: #FFF3F1; --magenta-100: #FFE2DC; --magenta-200: #FFC3B4; --magenta-300: #FF9C98; --magenta-400: #FF5E92;
  --magenta-500: #FF3A8C; --magenta-600: #D2156F; --magenta-700: #A00F63; --magenta-800: #600C4A; --magenta-900: #35082C; --magenta-950: #1E0419;

  --gold-300: #EACB8E;                                         /* the stars */
  --white: #FFFFFF; --black: #000000;
}

/* 1b · colourway aliases (with each colourway's swatch, which the radios show in every look) */
:root { --swatch-ember: var(--ember-500); --swatch-cobalt: var(--cobalt-500); --swatch-magenta: var(--magenta-500); }
[data-color="ember"] {
  --c-50: var(--ember-50); --c-100: var(--ember-100); --c-200: var(--ember-200); --c-300: var(--ember-300); --c-400: var(--ember-400);
  --c-500: var(--ember-500); --c-600: var(--ember-600); --c-700: var(--ember-700); --c-800: var(--ember-800); --c-900: var(--ember-900); --c-950: var(--ember-950);
}
[data-color="cobalt"] {
  --c-50: var(--cobalt-50); --c-100: var(--cobalt-100); --c-200: var(--cobalt-200); --c-300: var(--cobalt-300); --c-400: var(--cobalt-400);
  --c-500: var(--cobalt-500); --c-600: var(--cobalt-600); --c-700: var(--cobalt-700); --c-800: var(--cobalt-800); --c-900: var(--cobalt-900); --c-950: var(--cobalt-950);
}
[data-color="magenta"] {
  --c-50: var(--magenta-50); --c-100: var(--magenta-100); --c-200: var(--magenta-200); --c-300: var(--magenta-300); --c-400: var(--magenta-400);
  --c-500: var(--magenta-500); --c-600: var(--magenta-600); --c-700: var(--magenta-700); --c-800: var(--magenta-800); --c-900: var(--magenta-900); --c-950: var(--magenta-950);
}
/* the page behind the stage and the browser's theme colour (app.js reads --meta) */
[data-look="glass"] { --page: var(--c-800); --meta: var(--c-800); }

/* 1c · semantic tokens. Shared by every look: the light and the shadow that model the surfaces. */
:root { --highlight: var(--white); --lowlight: var(--black); }
/* A · PRISM GLASS: a smoked glass card, tinted with the colourway's deep tone, over a mesh that
   runs from the colourway's light (the glow behind the card) to its night (the frame's edges) */
[data-look="glass"] .stage {
  --well-depth: var(--c-500); --swatch-gap: var(--c-900); --swatch-ring: var(--white);
  --flash-core: var(--white);
  --stage-base: var(--c-700); --stage-halo: color-mix(in oklab, var(--c-400) 80%, transparent); --stage-1: var(--c-300); --stage-2: var(--c-500); --stage-3: var(--c-900); --stage-4: var(--c-600);
  --vignette: color-mix(in oklab, var(--c-950) 58%, transparent); --scrim: color-mix(in oklab, var(--c-950) 52%, transparent);
  --on-field: var(--white); --on-field-muted: color-mix(in srgb, var(--white) 84%, transparent); --grid-line: transparent;
  --surface: linear-gradient(162deg, color-mix(in oklab, var(--c-800) 68%, transparent), color-mix(in oklab, var(--c-900) 76%, transparent) 58%, color-mix(in oklab, var(--c-900) 70%, transparent));
  --surface-sheen: color-mix(in srgb, var(--white) 15%, transparent);
  --surface-2: color-mix(in srgb, var(--white) 9%, transparent);
  --surface-edge: color-mix(in srgb, var(--white) 30%, transparent); --surface-top: color-mix(in srgb, var(--white) 72%, transparent);
  --ink: var(--white); --ink-muted: color-mix(in srgb, var(--white) 84%, transparent); --ink-faint: color-mix(in srgb, var(--white) 74%, transparent);
  --control-edge: color-mix(in srgb, var(--white) 52%, transparent);
  --accent: var(--c-500); --on-accent: var(--white); --accent-soft: color-mix(in oklab, var(--c-300) 55%, transparent); --accent-text: var(--c-700);
  --glow: var(--c-300); --focus: var(--white);
  --well-spot: radial-gradient(64% 78% at 50% 58%, var(--c-50), var(--c-100) 42%, var(--c-200) 78%, var(--c-300));
  --well-edge: color-mix(in srgb, var(--white) 62%, transparent); --well-ink: var(--c-800);
  --floor: color-mix(in oklab, var(--c-900) 50%, transparent);
  --btn: var(--white); --on-btn: var(--c-950); --btn-icon: var(--c-600);
  --chip-on: var(--white); --on-chip-on: var(--c-700);
  --tag: var(--c-700); --on-tag: var(--white); --badge: var(--white); --on-badge: var(--c-700);
  --pill: color-mix(in oklab, var(--c-950) 38%, transparent); --pill-edge: color-mix(in srgb, var(--white) 30%, transparent);
  --on-pill: var(--white); --on-pill-muted: color-mix(in srgb, var(--white) 80%, transparent);
  --pill-icon: var(--white); --on-pill-icon: var(--c-700);
  --bag: var(--pill); --on-bag: var(--white); --bag-edge: var(--pill-edge);
  --shadow-tint: var(--c-950); --shade: var(--c-950);
  --sweep: color-mix(in oklab, var(--c-300) 60%, transparent); --flash: var(--c-200);
  --star: var(--gold-300); --star-off: color-mix(in srgb, var(--white) 26%, transparent);
  --em: linear-gradient(90deg, var(--white), var(--c-100) 50%, var(--white));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); color: var(--highlight); background: var(--page);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; overflow: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
p, h1, h2, dl, dd { margin: 0; }
svg { display: block; }

/* ---- 2. the stage, the frame, the ambient life ---- */
.stage {
  position: relative; height: 100dvh; display: grid; place-items: center; overflow: hidden; color: var(--on-field);
  background:
    radial-gradient(64% 40% at 50% 52%, var(--stage-halo, transparent), transparent 76%),
    radial-gradient(60% 42% at 12% 22%, var(--stage-4), transparent 70%),
    radial-gradient(55% 40% at 92% 38%, var(--stage-1), transparent 72%),
    radial-gradient(70% 45% at 18% 92%, var(--stage-3), transparent 70%),
    radial-gradient(60% 40% at 88% 98%, var(--stage-2), transparent 70%),
    var(--stage-base);
}
.frame { position: relative; width: 432px; height: 768px; flex: none; transform: scale(var(--k, 1)); }
.amb { position: absolute; inset: 0; pointer-events: none; }
/* glass: the frame's vignette, under the words and the card. It reaches past the frame (480 px a side, 200 px above
   and below: a 16:9 screen or a tall phone), so a screen that is not 9:16 stays framed with no seam; the scrims keep
   the words at the top and the foot readable. */
[data-look="glass"] .amb::after {
  content: ''; position: absolute; inset: -200px -480px;
  background:
    linear-gradient(180deg, var(--scrim) 200px, transparent 390px, transparent 790px, var(--scrim) 968px),
    radial-gradient(250px 400px at 50% 50%, transparent 40%, var(--vignette));
}

/* ---- 3. the frame's words, and the shop bar ---- */
.title { position: absolute; top: 30px; left: 0; right: 0; text-align: center; z-index: 1; }
.series {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 9px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--on-field-muted);
}
.series b { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: var(--on-badge); background: var(--badge); }
.title h1 { font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.title h1 em {
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.12em; letter-spacing: -.02em; padding: 0 .08em;
  background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hint { margin-top: 6px; font-size: 14px; color: var(--on-field-muted); }

.shopbar { position: absolute; left: 40px; right: 40px; top: 138px; height: 38px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--on-field-muted); }
.crumbs span:last-child { color: var(--on-field); }
.crumbs i { font-style: normal; opacity: .6; }
.bag {
  position: relative; height: 38px; padding: 0 16px 0 12px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--on-bag); background: var(--bag);
  box-shadow: inset 0 0 0 1px var(--bag-edge), 0 10px 22px -12px color-mix(in srgb, var(--shadow-tint) 50%, transparent); will-change: transform;
}
.bag-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* ---- 4. the card ---- */
.card { position: absolute; left: 40px; top: 186px; width: 352px; height: 448px; z-index: 2; }
.face {
  position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: var(--card-r, 30px); color: var(--ink);
}
.front { padding: 12px; }

/* glass: the faces, a tinted smoked glass with a white sheen and a crisp light edge */
[data-look="glass"] .face {
  --card-r: 32px;
  background: radial-gradient(120% 60% at 0% 0%, var(--surface-sheen), transparent 60%), var(--surface);
  box-shadow: inset 0 1.5px 0 var(--surface-top), inset 0 0 0 1px var(--surface-edge), inset 0 -30px 50px -30px color-mix(in srgb, var(--highlight) 14%, transparent), 0 40px 70px -34px color-mix(in oklab, var(--shadow-tint) 70%, transparent);
}

/* ---- 5. the front ---- */
.well { position: relative; height: 192px; flex: none; border-radius: 22px; overflow: hidden; isolation: isolate; }
.well-bg { position: absolute; inset: 0; background: var(--well-spot); }
[data-look="glass"] .well-bg { box-shadow: inset 0 0 0 1px var(--well-edge), inset 0 -24px 40px -28px color-mix(in oklab, var(--well-depth) 40%, transparent); }
.floor { position: absolute; left: 50%; bottom: 8px; width: 260px; height: 28px; margin-left: -130px; border-radius: 50%; background: radial-gradient(closest-side, var(--floor), color-mix(in srgb, var(--floor) 36%, transparent) 55%, transparent); will-change: transform, opacity; }
/* the photos are 4:3 with a clear margin above and below the shoe (≈14 %), so the box overhangs the well a little */
.shoe-box { position: absolute; left: 14px; top: -18px; width: 300px; height: 225px; will-change: transform; }
.shoe { position: absolute; left: 0; top: 0; width: 300px; height: 225px; object-fit: contain; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.shoe.is-cur { opacity: 1; }
.tag, .idx { position: absolute; top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tag { left: 12px; padding: 5px 9px; border-radius: 999px; color: var(--on-tag); background: var(--tag); }
.idx { right: 14px; top: 16px; font-weight: 600; color: var(--well-ink); }

.info { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 12px; padding: 0 6px; }
.name { font-size: 25px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; white-space: nowrap; }
.price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.price .cur { font-size: .55em; vertical-align: .62em; margin-right: 1px; opacity: .85; }
.rating { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.rating-n i { font-style: normal; opacity: .6; margin: 0 2px; }
.stars { position: relative; display: block; width: 74px; height: 14px; }
.stars > span { position: absolute; left: 0; top: 0; height: 14px; overflow: hidden; display: flex; gap: 1px; }
.stars-on { width: 96%; }                                      /* 4.8 of 5 */
.stars svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
.stars-off { color: var(--star-off); width: 100%; }
.stars-on { color: var(--star); }

.opt { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 0 6px; min-height: 32px; }
.opt-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.opt-label b { margin-left: 6px; color: var(--ink); font-weight: 700; letter-spacing: .06em; }
.opt-size { min-height: 18px; margin-top: 6px; }

/* the radios: native inputs, visually hidden; the label draws the swatch or the chip */
.swatches { display: flex; gap: 6px; }
.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 7px; padding: 0 2px; will-change: transform; }
.pick { position: relative; display: grid; place-items: center; cursor: pointer; }
.pick input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sw { width: 34px; height: 34px; }                             /* a 34 px target around a 26 px swatch */
.sw .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); transition: transform .2s; }
.chip { height: 38px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip .face-c { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; transition: background-color .18s, color .18s, box-shadow .18s; }
.pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
[data-look="glass"] .sw .dot { box-shadow: inset 0 -4px 6px color-mix(in srgb, var(--lowlight) 18%, transparent), inset 0 3px 5px color-mix(in srgb, var(--highlight) 45%, transparent), 0 0 0 2px color-mix(in srgb, var(--highlight) 35%, transparent); }
[data-look="glass"] .sw input:checked + .dot { box-shadow: inset 0 -4px 6px color-mix(in srgb, var(--lowlight) 18%, transparent), inset 0 3px 5px color-mix(in srgb, var(--highlight) 45%, transparent), 0 0 0 2.5px var(--swatch-gap), 0 0 0 5px var(--swatch-ring); transform: scale(.86); }
[data-look="glass"] .chip .face-c { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--control-edge); }
[data-look="glass"] .chip input:checked + .face-c { color: var(--on-chip-on); background: var(--chip-on); box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--shadow-tint) 60%, transparent); }

.add {
  position: relative; margin-top: auto; height: 50px; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; overflow: hidden; font-size: 16px; font-weight: 700; letter-spacing: -.01em; will-change: transform;
  color: var(--on-btn); background: var(--btn);
}
.add:focus-visible, .bag:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.add-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.add .add-icon { color: var(--btn-icon); }
[data-look="glass"] .add { border-radius: 999px; box-shadow: 0 14px 28px -12px color-mix(in oklab, var(--shadow-tint) 70%, transparent); }