/* ============================================================
   Amazon Shopping on Fire TV — 10-foot design system
   Dark cinematic UI tinted toward Amazon squid ink (#232F3E),
   Ember-like type, signature white focus ring + lift.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* Palette — tinted darks, never pure black */
  --bg-0: oklch(0.16 0.014 250);          /* deep squid-ink */
  --bg-1: oklch(0.20 0.016 250);
  --bg-2: oklch(0.24 0.018 250);
  --bg-3: oklch(0.30 0.02 250);
  --ink: oklch(0.96 0.004 240);
  --ink-dim: oklch(0.74 0.012 240);
  --ink-faint: oklch(0.58 0.014 240);

  --amz-yellow: #FFD814;
  --amz-yellow-hi: #FFE45E;
  --amz-orange: #FFA41C;
  --amz-teal: #37C6D0;
  --amz-teal-deep: #007185;
  --prime-blue: #53A8E2;
  --alexa-blue: #35C2F2;
  --deal-red: #CC0C39;
  --success: #2ECB70;
  --star: #FFA41C;

  --radius: 14px;
  --radius-sm: 9px;

  /* ---------- 10-foot safe zone ----------
     TV panels overscan. Everything the viewer must be able to read or reach
     lives inside the 5% action-safe margin; only deliberate bleed (the peeking
     next card in a rail) is allowed outside it. */
  --safe-x: 5vw;   /*  96px @1920 */
  --safe-y: 5vh;   /*  54px @1080 */
  --topbar-h: 7.4rem;

  /* ---------- Type scale ----------
     Floor is 24px at 1080p: below that, text stops resolving at 3m. Anything
     that must be *read* uses --t-body or larger. --t-caption is for supporting
     glyphs only (badges, units, struck-through list prices) — never prose. */
  --t-caption: 1.30rem;  /* 24px */
  --t-body:    1.52rem;  /* 28px */
  --t-lead:    1.85rem;  /* 34px */
  --t-title:   2.60rem;  /* 48px */
  --t-hero:    4.20rem;  /* 77px */

  /* ---------- Focus ----------
     Solid rings only. A large-blur shadow has to be re-rasterised every frame
     it animates, which is the single most reliable way to drop frames on TV
     silicon — so the ring never transitions, only `transform` does. */
  --focus-ring: 0 0 0 4px #fff, 0 0 0 9px oklch(0.13 0.014 250 / .92);
  --select-mark: var(--amz-yellow);
  --ease-out: cubic-bezier(.17,.84,.28,1);

  font-size: clamp(14px, 0.52vw + 8.4px, 22px); /* 18.4px @1920 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Hanken Grotesk', 'Amazon Ember', -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(120% 90% at 78% -10%, oklch(0.24 0.03 230 / .55), transparent 55%),
    radial-gradient(100% 80% at 10% 110%, oklch(0.20 0.03 280 / .4), transparent 50%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 60%);
  color: var(--ink);
  overflow: hidden;
  width: 100vw; height: 100vh;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  cursor: none; /* 10-ft UI: D-pad first. Mouse users still get hover via pointermove reveal */
}
body.mouse-mode { cursor: default; }

img { -webkit-user-drag: none; }

/* ---------- Focusable base ----------
   Three states, and every interactive element must express all three:

     unfocused  resting. The D-pad cursor is elsewhere.
     .tv-focus  the cursor is HERE. White ring + lift. Exactly one on screen.
     .is-selected  this is the current choice. Survives losing focus, which is
                what separates it from focus — a selected sort option stays
                selected while the cursor moves away to the grid.

   Focus and selection are orthogonal, so `.is-selected.tv-focus` is a real
   fourth rendering and is specified rather than left to cascade luck. */
.focusable { outline: none; }
.tv-focus { position: relative; z-index: 5; }

/* Selected — a yellow bar on the leading edge plus a faint tint. Deliberately
   NOT a ring: rings read as "the cursor is here" and must stay unambiguous. */
.is-selected { position: relative; background-color: oklch(0.87 0.17 92 / .13); }
.is-selected::after {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px;
  border-radius: 0 3px 3px 0; background: var(--select-mark);
}
/* Horizontal containers (rails, pill rows) mark the bottom edge instead. */
.is-selected.mark-under::after { left: 12%; right: 12%; top: auto; bottom: -6px; width: auto; height: 4px; border-radius: 3px; }
/* Selected *and* focused: the ring wins, the tint stays, the bar is redundant. */
.is-selected.tv-focus::after { opacity: 0; }

@keyframes bumpLeft  { 30% { transform: translateX(-7px); } }
@keyframes bumpRight { 30% { transform: translateX(7px); } }
@keyframes bumpUp    { 30% { transform: translateY(-7px); } }
@keyframes bumpDown  { 30% { transform: translateY(7px); } }
.bump-left  { animation: bumpLeft  .22s var(--ease-out); }
.bump-right { animation: bumpRight .22s var(--ease-out); }
.bump-up    { animation: bumpUp    .22s var(--ease-out); }
.bump-down  { animation: bumpDown  .22s var(--ease-out); }
.pressing { transform: scale(.97) !important; transition: transform .09s !important; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 1.1rem;
  padding: var(--safe-y) var(--safe-x) 1rem;
  background: linear-gradient(to bottom, oklch(0.13 0.014 250 / .96) 30%, oklch(0.13 0.014 250 / .75) 75%, transparent);
}
.brand { display: flex; align-items: baseline; gap: .14rem; margin-right: .9rem; flex-shrink: 0; }
.brand svg { height: 2rem; width: auto; display: block; transform: translateY(.31rem); }
/* The FIRE TV tag rendered at 15px — unreadable at 3m, and it was decoration
   rather than navigation. Removed from the bar; the wordmark carries the brand. */
.brand .tv-tag { display: none; }

.nav-pill {
  font: inherit; font-size: var(--t-caption); font-weight: 600; color: var(--ink-dim);
  background: transparent; border: none; padding: .55rem 1.15rem; border-radius: 999px;
  transition: transform .18s var(--ease-out), color .18s var(--ease-out), background-color .18s var(--ease-out);
  white-space: nowrap; letter-spacing: .01em;
}
/* Selected route — the bar under the label persists while the cursor is down
   in the grid, so the viewer never loses track of where they are. */
.nav-pill.active-route { color: var(--ink); background: oklch(1 0 0 / .09); }
.nav-pill.active-route::after {
  content: ''; position: absolute; left: 1.15rem; right: 1.15rem; bottom: -.3rem;
  height: 4px; border-radius: 3px; background: var(--select-mark);
}
.nav-pill { position: relative; }
.nav-pill.tv-focus { background: #fff; color: #10151b; box-shadow: var(--focus-ring); transform: scale(1.07); }
.nav-pill.active-route.tv-focus::after { opacity: 0; }
.nav-pill .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; margin-left: .45rem; padding: 0 .3rem;
  background: var(--amz-orange); color: #16130a; font-size: var(--t-caption); font-weight: 800; border-radius: 999px;
  vertical-align: .08rem;
}

.topbar .spacer { flex: 1; }

.top-icon {
  display: flex; align-items: center; gap: .5rem;
  font: inherit; font-size: var(--t-caption); font-weight: 600; color: var(--ink-dim);
  background: transparent; border: none; padding: .55rem 1rem; border-radius: 999px;
  transition: transform .18s var(--ease-out), color .18s var(--ease-out), background-color .18s var(--ease-out);
  white-space: nowrap;
}
.top-icon svg { width: 1.6rem; height: 1.6rem; }
.top-icon.tv-focus { background: #fff; color: #10151b; box-shadow: var(--focus-ring); transform: scale(1.08); }

#btnMic {
  background: rgba(255, 255, 255, 0.92);
  padding: .35rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);
}
#btnMic.tv-focus {
  background: #ffffff;
  box-shadow: var(--focus-ring), 0 4px 12px rgba(0,0,0,0.25);
  transform: scale(1.08);
}
.alexa-brand-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--t-body);
  line-height: 1;
  text-transform: none;
  font-weight: 500;
}
.alexa-blue-text {
  color: #00a8e8;
  font-family: "Bookman Old Style", Georgia, serif;
  font-weight: bold;
  font-style: italic;
  font-size: var(--t-lead);
  letter-spacing: -0.8px;
}
.alexa-sub-text {
  color: #333333;
  font-weight: 500;
  font-family: inherit;
  font-size: var(--t-caption);
}

.avatar {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--amz-teal-deep), var(--amz-teal));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--t-body); color: #fff; border: none;
  transition: all .18s var(--ease-out);
}
.avatar.tv-focus { box-shadow: var(--focus-ring); transform: scale(1.12); }
.clock { font-size: var(--t-caption); color: var(--ink-faint); font-weight: 600; min-width: 4.2ch; text-align: right; }

/* ============================================================
   SCREENS
   ============================================================ */
.screen { position: fixed; inset: 0; display: none; }
.search-layout, .results-layout, .cart-layout, .co-layout, .confirm-wrap { margin-top: var(--topbar-h); }
body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 6rem; z-index: 35;
  background: linear-gradient(to top, oklch(0.13 0.014 250 / .92), transparent); pointer-events: none;
}
.screen.active { display: block; animation: screenIn .38s var(--ease-out); }
@keyframes screenIn { from { opacity: 0; transform: translateY(18px) scale(.995); } }
.screen-scroll { position: absolute; inset: 0; overflow-y: hidden; padding-top: var(--topbar-h); }

/* ============================================================
   HOME — hero billboard
   ============================================================ */
.hero {
  position: relative; margin: .4rem var(--safe-x) 0; border-radius: 22px; overflow: hidden;
  min-height: 19rem; display: flex; align-items: stretch;
  background: linear-gradient(105deg, oklch(0.23 0.03 255) 0%, oklch(0.28 0.045 235) 58%, oklch(0.34 0.06 215) 100%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 86% 50%, oklch(0.9 0.06 200 / .12), transparent 60%);
}
.hero-copy { flex: 1.15; padding: 2rem 0 1.9rem 2.8rem; display: flex; flex-direction: column; justify-content: center; z-index: 2; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem;
  color: var(--amz-teal); font-weight: 700; font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase;
}
.hero-kicker::before { content: ''; width: 2.2rem; height: 2px; background: var(--amz-teal); }
.hero-title { font-size: var(--t-title); font-weight: 800; line-height: 1.05; letter-spacing: -.015em; max-width: 25ch; }
.hero-sub { margin-top: .7rem; font-size: var(--t-body); color: var(--ink-dim); max-width: 62ch; line-height: 1.4; }
.hero-price-row { display: flex; align-items: baseline; gap: .9rem; margin-top: .85rem; }
.hero-deal { background: var(--deal-red); color: #fff; font-weight: 800; font-size: var(--t-caption); padding: .22rem .7rem; border-radius: 6px; }
.hero-price { font-size: var(--t-title); font-weight: 800; color: var(--amz-yellow); }
.hero-list { color: var(--ink-faint); text-decoration: line-through; font-size: var(--t-caption); }
.hero-ctas { display: flex; gap: .9rem; margin-top: 1.1rem; }

.hero-visual { flex: .85; position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.hero-visual .tile { width: min(19rem, 26vw); aspect-ratio: 1; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 70px -18px rgba(0,0,0,.7); transform: rotate(1.5deg); }
.hero-visual img { width: 88%; height: 88%; object-fit: contain; }

/* Buttons */
.btn {
  font: inherit; font-weight: 700; border: none; border-radius: 999px;
  padding: .9rem 2rem; font-size: var(--t-body); letter-spacing: .01em;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
}
.btn svg { width: 1.5rem; height: 1.5rem; }
.btn-primary { background: var(--amz-yellow); color: #16130a; }
.btn-buy { background: var(--amz-orange); color: #1a1206; }
.btn-ghost { background: oklch(1 0 0 / .1); color: var(--ink); }
.btn-dark { background: var(--bg-3); color: var(--ink); }
.btn.tv-focus { box-shadow: var(--focus-ring); transform: scale(1.07); }
.btn-primary.tv-focus { background: var(--amz-yellow-hi); }

/* ---------- Rails (rows of cards) ---------- */
.rail { margin-top: 1.5rem; }
.rail:last-child { padding-bottom: 6rem; }
.rail-head { display: flex; align-items: baseline; gap: 1rem; padding: 0 var(--safe-x); margin-bottom: .3rem; }
.rail-title { font-size: var(--t-lead); font-weight: 800; letter-spacing: -.01em; }
.rail-hint { color: var(--ink-faint); font-size: var(--t-caption); font-weight: 500; }
.rail-track {
  display: flex; gap: 1.15rem; overflow-x: auto; padding: 1.2rem var(--safe-x) 1.4rem;
  scrollbar-width: none; scroll-behavior: smooth;
}
.rail-track::-webkit-scrollbar { display: none; }

/* ---------- Product card ---------- */
.card {
  /* Widened from 13.2rem: at the old size seven cards spanned the screen and
     the outer two sat in the overscan margin. Five fit inside the safe area,
     with the sixth peeking to signal the rail continues. */
  flex: 0 0 17rem; width: 17rem; text-align: left;
  background: transparent; border: none; font: inherit; color: inherit;
  transition: transform .2s var(--ease-out); padding: 0;
}
.card .tile {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius);
  background: #fff; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 26px -12px rgba(0,0,0,.55);
}
.card .tile img { width: 84%; height: 84%; object-fit: contain; }
.card.tv-focus { transform: scale(1.08); z-index: 6; }
.card.tv-focus .tile { box-shadow: var(--focus-ring); }
.card-info { padding: .8rem .15rem 0; }
.card-badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  font-size: var(--t-caption); font-weight: 800; letter-spacing: .02em;
  padding: .25rem .6rem; border-radius: 5px; color: #fff;
}
.card-badge.bestseller { background: #C45500; }
.card-badge.choice { background: #232F3E; }
.card-badge.pick { background: #6636B8; }
.card-badge.deal { background: var(--deal-red); }
.card-title { font-size: var(--t-body); font-weight: 600; line-height: 1.28; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; }
.stars { display: inline-flex; align-items: center; gap: .05rem; color: var(--star); font-size: var(--t-caption); letter-spacing: -.5px; }
.rating-count { color: var(--amz-teal); font-size: var(--t-caption); font-weight: 600; }
.card-price-row { display: flex; align-items: baseline; gap: .5rem; margin-top: .3rem; }
.price { font-weight: 800; font-size: var(--t-lead); }
.price sup { font-size: .62em; font-weight: 700; }
.price-list { color: var(--ink-faint); font-size: var(--t-caption); text-decoration: line-through; }
.prime-mark { display: inline-flex; align-items: center; gap: .28rem; color: var(--prime-blue); font-size: var(--t-caption); font-weight: 700; margin-top: .22rem; }
.prime-mark svg { width: 1rem; height: 1rem; }
.card-sns { display: none; font-size: var(--t-caption); color: var(--success); font-weight: 600; margin-top: .1rem; }

/* Placeholder tile for products without CDN image */
.ph-tile { container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 100%; height: 100%; }
.ph-jar {
  width: 42%; height: 62%; border-radius: 12% / 8%; position: relative;
  box-shadow: inset -8px 0 18px rgba(0,0,0,.25);
}
.ph-jar::before { content: ''; position: absolute; top: -9%; left: 12%; right: 12%; height: 12%; border-radius: 6px; background: inherit; filter: brightness(.7); }
.ph-jar::after { content: attr(data-initial); position: absolute; inset: 28% 8% auto; text-align: center; font-weight: 800; font-size: 20cqw; }
.ph-brand { font-size: 8cqw; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .75; color: #333; }

/* ============================================================
   SEARCH
   ============================================================ */
.search-layout { display: grid; grid-template-columns: 24rem 1fr; gap: 2.4rem; padding: 1rem var(--safe-x) 0; height: calc(100vh - var(--topbar-h)); }
.search-left { display: flex; flex-direction: column; gap: 1.3rem; }
.search-box {
  display: flex; align-items: center; gap: .8rem;
  background: oklch(1 0 0 / .08); border: 2px solid oklch(1 0 0 / .14);
  border-radius: 12px; padding: .95rem 1.2rem; font-size: var(--t-body); min-height: 3.6rem;
}
.search-box .caret { width: 2px; height: 1.5rem; background: var(--amz-teal); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.search-box .q { font-weight: 600; white-space: nowrap; overflow: hidden; }
.search-box .placeholder { color: var(--ink-faint); font-weight: 500; }

.kbd { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem; }
.key {
  font: inherit; font-size: var(--t-body); font-weight: 600; color: var(--ink);
  background: oklch(1 0 0 / .07); border: none; border-radius: 9px;
  aspect-ratio: 1.15; display: flex; align-items: center; justify-content: center;
  transition: all .13s var(--ease-out);
}
.key.wide { grid-column: span 2; aspect-ratio: auto; }
.key.tv-focus { background: #fff; color: #10151b; box-shadow: var(--focus-ring); transform: scale(1.12); }
.key svg { width: 1.2rem; height: 1.2rem; }

.voice-tip {
  display: flex; gap: .85rem; align-items: center; padding: 1rem 1.2rem;
  background: linear-gradient(120deg, oklch(0.3 0.07 230 / .5), oklch(0.26 0.05 260 / .45));
  border: 1px solid oklch(0.6 0.1 220 / .3); border-radius: var(--radius);
  color: var(--ink-dim); font-size: var(--t-body); line-height: 1.45;
}
.voice-tip .mic-dot { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--alexa-blue), #2364d2); display: flex; align-items: center; justify-content: center; }
.voice-tip .mic-dot svg { width: 1.3rem; height: 1.3rem; color: white; }
.voice-tip b { color: var(--ink); }

.search-right { overflow: hidden; display: flex; flex-direction: column; }
.sugg-title { font-size: var(--t-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: .4rem 0 .8rem; }
.sugg-list { display: flex; flex-direction: column; gap: .15rem; margin-bottom: 1.4rem; }
.sugg {
  display: flex; align-items: center; gap: .8rem; text-align: left;
  font: inherit; font-size: var(--t-body); color: var(--ink-dim); font-weight: 500;
  background: transparent; border: none; border-radius: 10px; padding: .6rem .9rem;
}
.sugg svg { width: 1.05rem; height: 1.05rem; opacity: .5; }
.sugg b { color: var(--ink); font-weight: 700; }
.sugg.tv-focus { background: oklch(1 0 0 / .1); box-shadow: var(--focus-ring); }
.sugg .go { margin-left: auto; opacity: .35; }

/* ============================================================
   RESULTS
   ============================================================ */
.results-layout { display: grid; grid-template-columns: 18rem 1fr; height: calc(100vh - var(--topbar-h)); }
.filter-rail { padding: 1.1rem 1.5rem 2.5rem 3rem; overflow-y: hidden; }
.filter-group .chip { width: calc(100% - 4px); } /* leave room for focus-ring + translateX */
.filter-group { margin-bottom: 1.5rem; }
.filter-label { font-size: var(--t-caption); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .55rem; }
.chip {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  font: inherit; font-size: var(--t-caption); font-weight: 600; color: var(--ink-dim);
  background: transparent; border: none; padding: .42rem .7rem; border-radius: 9px;
  transition: all .14s var(--ease-out);
}
.chip .box { width: 1.05rem; height: 1.05rem; border-radius: 5px; border: 2px solid var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.chip.on { color: var(--ink); }
.chip.on .box { background: var(--amz-teal); border-color: var(--amz-teal); color: #06282b; }
.chip.tv-focus { background: oklch(1 0 0 / .1); box-shadow: var(--focus-ring); transform: translateX(3px); }

.results-main { overflow-y: hidden; padding: 1.1rem var(--safe-x) 3rem 2.2rem; }
.results-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.results-title { font-size: var(--t-lead); font-weight: 750; }
.results-title b { color: var(--amz-teal); }
.results-count { color: var(--ink-faint); font-size: var(--t-caption); }
.sort-pill {
  margin-left: auto; font: inherit; font-size: var(--t-body); font-weight: 650; color: var(--ink-dim);
  background: oklch(1 0 0 / .08); border: none; border-radius: 999px; padding: .5rem 1.1rem;
  display: flex; align-items: center; gap: .5rem;
}
.sort-pill.tv-focus { background: #fff; color: #10151b; box-shadow: var(--focus-ring); }

/* Rufus strip */
.rufus-strip {
  position: relative;
  display: flex; gap: 1rem; align-items: flex-start;
  background: linear-gradient(115deg, oklch(0.27 0.06 210 / .65), oklch(0.24 0.05 265 / .55));
  border: 1px solid oklch(0.65 0.1 210 / .28);
  border-radius: var(--radius); padding: 1.05rem 1.3rem; margin-bottom: 1.35rem;
}
.rufus-ico { flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: linear-gradient(135deg, var(--amz-teal), #7a5cff); display: flex; align-items: center; justify-content: center; }
.rufus-ico svg { width: 1.35rem; height: 1.35rem; color: #fff; }
.rufus-body { flex: 1; }
.rufus-name { font-size: var(--t-caption); font-weight: 800; letter-spacing: .1em; color: var(--amz-teal); text-transform: uppercase; margin-bottom: .25rem; }
.rufus-text { font-size: var(--t-body); line-height: 1.5; color: var(--ink-dim); max-width: 88ch; }
.rufus-text b { color: var(--ink); }
.rufus-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .75rem; }
.rufus-chip {
  font: inherit; font-size: var(--t-caption); font-weight: 650; color: var(--ink);
  background: oklch(1 0 0 / .09); border: 1px solid oklch(1 0 0 / .16);
  border-radius: 999px; padding: .38rem .95rem; transition: all .15s var(--ease-out);
}
.rufus-chip.tv-focus { background: #fff; color: #10151b; box-shadow: var(--focus-ring); transform: scale(1.06); }

.results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem 1.15rem; padding: .5rem .2rem 4rem; }
.results-grid .card { width: auto; flex: none; }

.empty-state { text-align: center; padding: 5rem 2rem; color: var(--ink-dim); }
.empty-state .big { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: .6rem; }

/* ============================================================
   PDP
   ============================================================ */
.pdp-wrap { padding: .6rem var(--safe-x) 5rem; }
.pdp-grid { display: grid; grid-template-columns: 5.2rem minmax(24rem, 34rem) 1fr; gap: 1.6rem; align-items: start; }

.thumbs { display: flex; flex-direction: column; gap: .7rem; }
.thumb {
  width: 5.2rem; aspect-ratio: 1; border-radius: 10px; background: #fff; border: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  opacity: .55; transition: all .16s var(--ease-out); padding: .3rem;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.current {
  opacity: 1; outline: 3px solid var(--select-mark); outline-offset: 2px;
}
.thumb.tv-focus { opacity: 1; box-shadow: var(--focus-ring); transform: scale(1.1); }

.pdp-stage {
  position: sticky; top: 0;
  aspect-ratio: 1/1.02; border-radius: 20px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 26px 70px -20px rgba(0,0,0,.65);
}
.pdp-stage img { width: 86%; height: 86%; object-fit: contain; transition: opacity .18s; }

.pdp-info { min-width: 0; }
.pdp-brand-row { display: flex; align-items: center; gap: .9rem; margin-bottom: .35rem; }
.pdp-brand { color: var(--amz-teal); font-weight: 700; font-size: var(--t-caption); }
.pdp-title { font-size: 1.42rem; font-weight: 750; line-height: 1.25; letter-spacing: -.01em; margin-bottom: .55rem; }
.pdp-rating-row { display: flex; align-items: center; gap: .7rem; font-size: var(--t-caption); margin-bottom: .3rem; }
.pdp-rating-row .num { font-weight: 700; }
.pdp-bought { color: var(--ink-faint); font-size: var(--t-caption); margin-bottom: .8rem; }

.pdp-price-row { display: flex; align-items: baseline; gap: .8rem; margin: .5rem 0 .2rem; }
.pdp-deal { background: var(--deal-red); color: #fff; font-weight: 800; font-size: var(--t-caption); padding: .2rem .55rem; border-radius: 6px; }
.pdp-price { font-size: 2.1rem; font-weight: 800; color: var(--amz-yellow); letter-spacing: -.01em; }
.pdp-price sup { font-size: .5em; }
.pdp-unit { color: var(--ink-faint); font-size: var(--t-caption); }
.pdp-list { color: var(--ink-faint); font-size: var(--t-body); }
.pdp-list s { opacity: .9; }

.pdp-delivery { font-size: var(--t-caption); color: var(--ink-dim); margin: .6rem 0 1rem; line-height: 1.55; }
.pdp-delivery b { color: var(--success); font-weight: 750; }
.pdp-delivery .loc { display: flex; align-items: center; gap: .4rem; color: var(--ink-faint); font-size: var(--t-caption); margin-top: .15rem; }
.pdp-delivery .loc svg { width: .95rem; height: .95rem; }
.in-stock { color: var(--success); font-weight: 750; font-size: var(--t-body); margin-bottom: .9rem; }

.opt-label { font-size: var(--t-caption); font-weight: 700; color: var(--ink-dim); margin: .9rem 0 .5rem; }
.opt-label b { color: var(--ink); }
.opt-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.opt {
  font: inherit; font-size: var(--t-body); font-weight: 650; color: var(--ink);
  background: oklch(1 0 0 / .07); border: 2px solid oklch(1 0 0 / .14);
  border-radius: 10px; padding: .5rem 1rem; transition: all .15s var(--ease-out);
}
.opt.on {
  border-color: var(--select-mark); background: oklch(0.87 0.17 92 / .15); color: var(--ink);
}
.opt.tv-focus { box-shadow: var(--focus-ring); transform: scale(1.06); }
.opt small { display: block; font-size: var(--t-caption); color: var(--ink-faint); font-weight: 600; }

/* Subscribe & Save cards */
.buy-mode { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.mode-card {
  text-align: left; font: inherit; color: inherit; background: oklch(1 0 0 / .06);
  border: 2.5px solid oklch(1 0 0 / .13); border-radius: var(--radius); padding: .9rem 1.05rem;
  transition: all .16s var(--ease-out); position: relative;
}
.mode-card.on { border-color: var(--amz-orange); background: oklch(0.33 0.045 70 / .28); }
.mode-card.tv-focus { box-shadow: var(--focus-ring); transform: scale(1.03); }
.mode-name { font-weight: 750; font-size: var(--t-body); display: flex; align-items: center; gap: .5rem; }
.mode-save { background: var(--success); color: #052613; font-size: var(--t-caption); font-weight: 800; border-radius: 5px; padding: .12rem .4rem; }
.mode-price { font-size: var(--t-lead); font-weight: 800; margin-top: .3rem; }
.mode-sub { font-size: var(--t-caption); color: var(--ink-faint); margin-top: .2rem; line-height: 1.4; }

.qty-row { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem; }
.qty-btn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: none; font-size: 1.3rem; font-weight: 700;
  background: oklch(1 0 0 / .1); color: var(--ink); transition: all .14s var(--ease-out);
}
.qty-btn.tv-focus { background: #fff; color: #111; box-shadow: var(--focus-ring); transform: scale(1.12); }
.qty-val { font-size: var(--t-lead); font-weight: 800; min-width: 2ch; text-align: center; }

.pdp-ctas { display: flex; gap: .8rem; margin-top: 1.35rem; flex-wrap: wrap; }
.pdp-ctas .btn { padding: .88rem 2.1rem; font-size: var(--t-body); }

/* PDP sections below the fold */
.pdp-section { margin-top: 2.6rem; max-width: 92rem; }
.sec-title { font-size: 1.3rem; font-weight: 750; margin-bottom: 1rem; display: flex; align-items: center; gap: .7rem; }
.sec-title .ai-spark { color: var(--amz-teal); }
.about-cols { columns: 2; column-gap: 3rem; max-width: 88rem; }
.about-li { break-inside: avoid; display: flex; gap: .7rem; margin-bottom: .8rem; font-size: var(--t-body); color: var(--ink-dim); line-height: 1.5; }
.about-li svg { flex-shrink: 0; width: 1.1rem; height: 1.1rem; color: var(--amz-teal); margin-top: .2rem; }

.customers-say {
  background: oklch(1 0 0 / .045); border: 1px solid oklch(1 0 0 / .1);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; max-width: 78rem;
}
.cs-text { font-size: var(--t-body); line-height: 1.6; color: var(--ink-dim); max-width: 90ch; }
.cs-note { font-size: var(--t-caption); color: var(--ink-faint); margin-top: .6rem; display: flex; align-items: center; gap: .4rem; }
.aspect-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.aspect { font-size: var(--t-caption); font-weight: 650; border-radius: 999px; padding: .34rem .9rem; border: none; font-family: inherit; transition: all .14s var(--ease-out); }
.aspect.pos { background: oklch(0.42 0.09 155 / .3); color: oklch(0.85 0.12 155); }
.aspect.neg { background: oklch(0.42 0.1 25 / .28); color: oklch(0.84 0.09 30); }
.aspect.tv-focus { box-shadow: var(--focus-ring); transform: scale(1.07); }

.review-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; max-width: 92rem; }
.review-card {
  background: oklch(1 0 0 / .045); border: 1px solid oklch(1 0 0 / .09);
  border-radius: var(--radius); padding: 1.15rem 1.3rem; text-align: left; font: inherit; color: inherit;
  transition: all .16s var(--ease-out);
}
.review-card.tv-focus { box-shadow: var(--focus-ring); transform: scale(1.03); background: oklch(1 0 0 / .07); }
.rev-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.rev-title { font-weight: 750; font-size: var(--t-body); }
.rev-meta { font-size: var(--t-caption); color: var(--ink-faint); margin-bottom: .5rem; }
.rev-text { font-size: var(--t-body); line-height: 1.55; color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.verified { color: var(--amz-orange); font-size: var(--t-caption); font-weight: 700; }

/* Rufus panel on PDP */
.rufus-panel {
  background: linear-gradient(120deg, oklch(0.26 0.055 215 / .55), oklch(0.23 0.05 270 / .45));
  border: 1px solid oklch(0.65 0.1 215 / .25); border-radius: 18px;
  padding: 1.4rem 1.6rem; max-width: 78rem;
}
.rufus-answer {
  margin-top: 1rem; font-size: var(--t-body); line-height: 1.62; color: var(--ink);
  background: oklch(0 0 0 / .25); border-radius: 12px; padding: 1rem 1.2rem;
  min-height: 3.2rem; max-width: 92ch;
}
.rufus-answer.thinking { color: var(--ink-faint); }
.rufus-answer .cursor { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.15em; background: var(--amz-teal); animation: blink .9s steps(1) infinite; }

/* ============================================================
   CART
   ============================================================ */
.cart-layout { display: grid; grid-template-columns: 1fr 24rem; gap: 2.2rem; padding: 1rem var(--safe-x) 3rem; height: calc(100vh - var(--topbar-h)); }
.cart-list { overflow-y: hidden; padding-bottom: 3rem; }
.cart-h { font-size: 1.6rem; font-weight: 800; margin-bottom: .4rem; }
.cart-sub { color: var(--ink-faint); margin-bottom: 1.3rem; }
.cart-item {
  display: grid; grid-template-columns: 7.2rem 1fr auto; gap: 1.2rem; align-items: center;
  background: oklch(1 0 0 / .045); border: 1px solid oklch(1 0 0 / .08);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .9rem;
}
.cart-item .tile { width: 7.2rem; aspect-ratio: 1; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cart-item .tile img { width: 86%; height: 86%; object-fit: contain; }
.ci-title { font-weight: 650; font-size: var(--t-body); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ci-flavor { color: var(--ink-faint); font-size: var(--t-caption); margin-top: .2rem; }
.ci-sns { color: var(--success); font-size: var(--t-caption); font-weight: 650; margin-top: .25rem; }
.ci-stock { color: var(--success); font-size: var(--t-caption); margin-top: .2rem; }
.ci-actions { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.ci-link { font: inherit; font-size: var(--t-caption); font-weight: 600; color: var(--amz-teal); background: none; border: none; padding: .3rem .55rem; border-radius: 7px; }
.ci-link.tv-focus { background: #fff; color: #111; box-shadow: var(--focus-ring); }
.ci-right { text-align: right; }
.ci-price { font-size: var(--t-lead); font-weight: 800; }

.summary-card {
  align-self: start; position: sticky; top: 0;
  background: oklch(1 0 0 / .055); border: 1px solid oklch(1 0 0 / .1);
  border-radius: 18px; padding: 1.5rem 1.6rem;
}
.sum-row { display: flex; justify-content: space-between; font-size: var(--t-body); color: var(--ink-dim); margin-bottom: .55rem; }
.sum-row b { color: var(--ink); }
.sum-row.green { color: var(--success); }
.sum-total { display: flex; justify-content: space-between; font-size: var(--t-lead); font-weight: 800; border-top: 1px solid oklch(1 0 0 / .12); padding-top: .9rem; margin-top: .9rem; }
.summary-card .btn { width: 100%; margin-top: 1.1rem; }
.sum-note { font-size: var(--t-caption); color: var(--ink-faint); margin-top: .8rem; text-align: center; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.co-layout { display: grid; grid-template-columns: 1fr 24rem; gap: 2.2rem; padding: 1rem var(--safe-x) 3rem; height: calc(100vh - var(--topbar-h)); }
.co-main { overflow-y: hidden; padding-bottom: 3rem; }
.co-step { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.co-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: oklch(1 0 0 / .1); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--t-body); color: var(--ink-dim); }
.co-card {
  background: oklch(1 0 0 / .045); border: 1px solid oklch(1 0 0 / .09);
  border-radius: var(--radius); padding: 1.15rem 1.35rem;
}
.co-card h3 { font-size: var(--t-body); font-weight: 750; margin-bottom: .45rem; display: flex; align-items: center; justify-content: space-between; }
.co-card p { color: var(--ink-dim); font-size: var(--t-body); line-height: 1.5; }
.co-change { font: inherit; font-size: var(--t-caption); font-weight: 650; color: var(--amz-teal); background: none; border: none; padding: .3rem .6rem; border-radius: 7px; }
.co-change.tv-focus { background: #fff; color: #111; box-shadow: var(--focus-ring); }
.ship-opt { display: flex; align-items: flex-start; gap: .8rem; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: none; border-radius: 10px; padding: .6rem .8rem; transition: background .14s; }
.ship-opt.tv-focus { background: oklch(1 0 0 / .09); box-shadow: var(--focus-ring); }
.radio { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2.5px solid var(--ink-faint); margin-top: .15rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ship-opt.on .radio { border-color: var(--amz-teal); }
.ship-opt.on .radio::after { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--amz-teal); }
.ship-name { font-weight: 700; font-size: var(--t-body); }
.ship-name b { color: var(--success); }
.ship-sub { color: var(--ink-faint); font-size: var(--t-caption); margin-top: .15rem; }

/* ============================================================
   CONFIRMATION
   ============================================================ */
.confirm-wrap { height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 4rem; }
.check-ring { width: 7rem; height: 7rem; margin-bottom: 1.6rem; }
.check-ring circle { fill: none; stroke: var(--success); stroke-width: 4; stroke-dasharray: 302; stroke-dashoffset: 302; animation: draw .7s .1s var(--ease-out) forwards; }
.check-ring path { fill: none; stroke: var(--success); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .45s .65s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confirm-h { font-size: 2rem; font-weight: 800; letter-spacing: -.01em; }
.confirm-sub { color: var(--ink-dim); font-size: var(--t-body); margin-top: .6rem; line-height: 1.6; }
.confirm-sub b { color: var(--success); }
.confirm-order { color: var(--ink-faint); font-size: var(--t-caption); margin-top: .9rem; }
.confirm-ctas { display: flex; gap: .9rem; margin-top: 2rem; }

/* ============================================================
   ORDERS
   ============================================================ */
.orders-wrap { padding: 1rem var(--safe-x) 4rem; max-width: 80rem; }
.order-block { background: oklch(1 0 0 / .045); border: 1px solid oklch(1 0 0 / .09); border-radius: var(--radius); margin-bottom: 1.2rem; overflow: hidden; }
.order-head { display: flex; gap: 2.5rem; padding: .95rem 1.4rem; background: oklch(1 0 0 / .04); font-size: var(--t-caption); color: var(--ink-faint); }
.order-head b { display: block; color: var(--ink-dim); font-size: var(--t-body); margin-top: .1rem; }
.order-head .status { margin-left: auto; color: var(--success); font-weight: 700; align-self: center; font-size: var(--t-caption); }
.order-items { padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.order-item { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1.1rem; align-items: center; }
.order-item .tile { width: 5rem; aspect-ratio: 1; background: #fff; border-radius: 9px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.order-item .tile img { width: 85%; height: 85%; object-fit: contain; }

/* ============================================================
   ALEXA OVERLAY
   ============================================================ */
.alexa {
  position: fixed; inset: auto 0 0 0; z-index: 90; pointer-events: none;
  transform: translateY(110%); transition: transform .32s var(--ease-out);
}
.alexa.show { transform: translateY(0); }
.alexa-card {
  margin: 0 auto; max-width: 62rem;
  background: oklch(0.14 0.02 250 / .92); backdrop-filter: blur(22px);
  border: 1px solid oklch(0.5 0.08 230 / .35); border-bottom: none;
  border-radius: 22px 22px 0 0; padding: 1.3rem 2rem 1.5rem;
  box-shadow: 0 -20px 70px rgba(0,0,0,.55);
}
.alexa-line { height: 4px; border-radius: 4px; margin-bottom: 1rem; overflow: hidden; background: oklch(1 0 0 / .08); position: relative; }
.alexa-line::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, #2bd5ff 18%, #3f8cff 50%, #2bd5ff 82%, transparent);
  transform: translateX(-100%);
}
.alexa.listening .alexa-line::after { animation: alexaSweep 1.15s linear infinite; }
@keyframes alexaSweep { to { transform: translateX(100%); } }
.alexa-row { display: flex; gap: 1.1rem; align-items: flex-start; }
.alexa-orb { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #67e8ff, #1e6fe0 70%);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.alexa-orb svg { width: 1.4rem; height: 1.4rem; color: #fff; }
.alexa.listening .alexa-orb::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid oklch(0.75 0.13 230 / .6); animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.alexa-content { flex: 1; min-width: 0; }
.alexa-brand-display {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.alexa-sub-text-light {
  color: #dddddd;
  font-weight: 400;
  font-size: var(--t-caption);
  font-family: inherit;
}
.alexa-state { font-size: var(--t-caption); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--alexa-blue); margin-bottom: .3rem; }
.alexa-heard { font-size: var(--t-body); font-weight: 650; color: var(--ink); min-height: 1.5em; }
.alexa-heard .dim { color: var(--ink-faint); font-weight: 500; }
.alexa-reply { font-size: var(--t-body); color: var(--ink-dim); margin-top: .45rem; line-height: 1.55; max-width: 80ch; }
.alexa-hints { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.alexa-hint { font-size: var(--t-caption); color: var(--ink-faint); background: oklch(1 0 0 / .07); padding: .3rem .8rem; border-radius: 999px; }

/* ============================================================
   TOASTS / OVERLAYS
   ============================================================ */
.toast-zone { position: fixed; top: 5.6rem; right: var(--safe-x); z-index: 95; display: flex; flex-direction: column; gap: .7rem; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: .8rem;
  background: oklch(0.2 0.02 250 / .96); border: 1px solid oklch(1 0 0 / .14);
  border-radius: 12px; padding: .85rem 1.2rem; min-width: 19rem; max-width: 26rem;
  box-shadow: 0 16px 44px rgba(0,0,0,.5);
  animation: toastIn .3s var(--ease-out);
}
.toast.out { animation: toastOut .3s var(--ease-out) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }
.toast .t-ico { width: 2.1rem; height: 2.1rem; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: oklch(0.4 0.09 155 / .4); color: var(--success); }
.toast .t-ico.blue { background: oklch(0.38 0.08 230 / .45); color: var(--alexa-blue); }
.toast .t-ico svg { width: 1.2rem; height: 1.2rem; }
.toast .t-title { font-weight: 750; font-size: var(--t-body); }
.toast .t-sub { color: var(--ink-faint); font-size: var(--t-caption); margin-top: .1rem; }

/* Remote pairing panel */
.pair-pop {
  position: fixed; right: var(--safe-x); bottom: 2.4rem; z-index: 80;
  display: flex; gap: 1.1rem; align-items: center;
  background: oklch(0.18 0.018 250 / .97); border: 1px solid oklch(1 0 0 / .13);
  border-radius: 18px; padding: 1.1rem 1.3rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transform: translateY(160%); transition: transform .4s var(--ease-out);
}
.pair-pop.show { transform: none; }
.pair-qr { width: 8.6rem; height: 8.6rem; background: #fff; border-radius: 12px; padding: .5rem; display: flex; align-items: center; justify-content: center; }
.pair-qr img, .pair-qr canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.pair-info { max-width: 17rem; }
.pair-title { font-weight: 800; font-size: var(--t-body); display: flex; align-items: center; gap: .5rem; }
.pair-title svg { width: 1.15rem; height: 1.15rem; color: var(--amz-teal); }
.pair-sub { color: var(--ink-dim); font-size: var(--t-caption); line-height: 1.5; margin-top: .35rem; }
.pair-code { margin-top: .5rem; font-size: var(--t-body); font-weight: 800; letter-spacing: .3em; color: var(--amz-teal); }
.pair-connected { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; color: var(--success); font-weight: 700; font-size: var(--t-caption); }
.pair-connected .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }

/* Footer hint bar */
.hintbar {
  position: fixed; left: var(--safe-x); bottom: var(--safe-y); z-index: 40;
  display: flex; gap: 1.4rem; color: var(--ink-faint); font-size: var(--t-caption); font-weight: 600;
}
.hintbar .k, .ob-hint .k {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem; margin-right: .4rem;
  background: oklch(1 0 0 / .1); border: 1px solid oklch(1 0 0 / .16);
  border-radius: 6px; font-size: var(--t-caption); color: var(--ink-dim);
}

/* ============================================================
   ONBOARDING — concept intro (skippable in one press)
   ============================================================ */
/* While onboarding is up, the app behind it is out of the focus tree */
body.onboarding .topbar,
body.onboarding main,
body.onboarding .hintbar,
body.onboarding .pair-pop { display: none; }

.onboard {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center;
  background:
    radial-gradient(90% 110% at 82% 28%, oklch(0.24 0.032 230 / .6), transparent 55%),
    radial-gradient(80% 90% at 6% 105%, oklch(0.2 0.03 280 / .45), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 60%);
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.onboard.gone { opacity: 0; visibility: hidden; }

.ob-inner {
  width: 100%; max-width: 86rem; margin: 0 auto; padding: 0 4.5rem;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(17rem, .8fr);
  gap: 5rem; align-items: center;
}

/* Staggered reveal, timed to land as the boot splash fades */
.ob-copy > * { animation: obIn .65s var(--ease-out) both; }
.ob-copy > *:nth-child(1) { animation-delay: .85s; }
.ob-copy > *:nth-child(2) { animation-delay: .95s; }
.ob-copy > *:nth-child(3) { animation-delay: 1.05s; }
.ob-copy > *:nth-child(4) { animation-delay: 1.15s; }
.ob-copy > *:nth-child(5) { animation-delay: 1.25s; }
.ob-copy > *:nth-child(6) { animation-delay: 1.35s; }
.ob-pair { animation: obIn .7s var(--ease-out) 1.2s both; }
@keyframes obIn { from { opacity: 0; transform: translateY(18px); } }

.ob-kicker {
  display: flex; align-items: center; gap: .8rem;
  color: var(--amz-teal); font-weight: 700; font-size: var(--t-caption); letter-spacing: .18em; text-transform: uppercase;
}
.ob-kicker .flag {
  background: var(--amz-yellow); color: #16130a;
  font-size: var(--t-caption); font-weight: 800; letter-spacing: .1em;
  padding: .2rem .6rem; border-radius: 6px;
}
.ob-title { font-size: 3.3rem; font-weight: 800; line-height: 1.04; letter-spacing: -.02em; margin-top: 1.1rem; }
.ob-sub { margin-top: 1.05rem; font-size: var(--t-body); line-height: 1.62; color: var(--ink-dim); max-width: 52ch; }
.ob-sub b { color: var(--ink); }

.ob-steps { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.ob-steps li { display: flex; align-items: center; gap: .85rem; color: var(--ink-dim); font-size: var(--t-body); font-weight: 500; }
.ob-steps b { color: var(--ink); font-weight: 650; }
.ob-steps .n {
  flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1.5px solid oklch(0.55 0.09 210 / .55); color: var(--amz-teal);
  font-size: var(--t-caption); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.ob-ctas { display: flex; align-items: center; gap: .9rem; margin-top: 2rem; }
.ob-ctas .btn { text-decoration: none; }
.ob-ctas #obRepo svg:first-child { width: 1.15rem; height: 1.15rem; }

.ob-hint { display: flex; gap: 1.5rem; margin-top: 1.6rem; color: var(--ink-faint); font-size: var(--t-caption); font-weight: 600; }

.ob-pair { text-align: center; justify-self: center; }
.ob-qr {
  width: 15rem; height: 15rem; margin: 0 auto;
  background: #fff; border-radius: 20px; padding: .8rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  transform: rotate(-1.5deg); /* echoes the hero product tile */
}
.ob-qr img, .ob-qr canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.ob-qr-wait { width: 55%; height: 55%; border-radius: 12px; background: oklch(0.88 0.006 240); animation: obPulse 1.1s ease-in-out infinite alternate; }
@keyframes obPulse { to { opacity: .35; } }
.ob-scan { margin-top: 1.35rem; font-size: var(--t-caption); font-weight: 600; color: var(--ink-dim); }
.ob-code-label { margin-top: 1.05rem; font-size: var(--t-caption); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.ob-code { margin-top: .3rem; font-size: 1.45rem; font-weight: 800; letter-spacing: .3em; color: var(--amz-teal); }

@media (prefers-reduced-motion: reduce) {
  .ob-copy > *, .ob-pair { animation: none; }
}

/* Boot splash */
.splash {
  position: fixed; inset: 0; z-index: 200; background: var(--bg-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
  transition: opacity .5s, visibility .5s;
}
.splash.gone { opacity: 0; visibility: hidden; }
.splash svg { height: 3.4rem; }
.splash .bar { width: 15rem; height: 3px; background: oklch(1 0 0 / .1); border-radius: 3px; overflow: hidden; }
.splash .bar::after { content: ''; display: block; width: 40%; height: 100%; background: var(--amz-teal); border-radius: 3px; animation: load 1.1s var(--ease-out) infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(380%); } }