/* LEP-8 criterion 7 — THE :root token block. The LEP-7 warm buyer palette is
   ported UNCHANGED (the first thirteen tokens, byte-identical to the embedded
   document); the additions below them exist so that NO hex or px literal
   appears anywhere outside this one block. The token spec runs over source
   AND built css. System font stack; tabular numerals on every money element. */
:root {
  --km-bg: #FAFAF7;
  --km-ink: #1F2421;
  --km-brand: #0E7A4E;
  --km-brand-ink: #FFFFFF;
  --km-accent: #F2B705;
  --km-good: #1E8E3E;
  --km-warn: #B26A00;
  --km-bad: #C5221F;
  --km-line: #E3E0D6;
  --km-soft: #F1EEE6;
  --km-muted: #6C7168;
  --km-radius: 10px;
  --km-touch: 48px;
  /* LEP-8 additions: spacing / type / size scale (tokens, so the no-px rule
     outside :root stays checkable). */
  --km-hairline: 1px;
  --km-focus: 2px;
  --km-sp-1: 2px;
  --km-sp-2: 4px;
  --km-sp-3: 6px;
  --km-sp-4: 8px;
  --km-sp-5: 10px;
  --km-sp-6: 12px;
  --km-sp-7: 14px;
  --km-sp-8: 16px;
  --km-fs-xs: 11px;
  --km-fs-sm: 13px;
  --km-fs-md: 14px;
  --km-fs-base: 16px;
  --km-fs-lg: 20px;
  --km-fs-xl: 28px;
  --km-shell: 480px;
  --km-pad-bottom: 84px;
  --km-img: 72px;
  --km-img-big: 220px;
  --km-ph-big: 160px;
  --km-skel: 92px;
  --km-badge-radius: 9px;
  --km-qty-num: 28px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--km-bg); color: var(--km-ink); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--km-fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
.shell { max-width: var(--km-shell); margin: 0 auto; padding: var(--km-sp-6) var(--km-sp-6) var(--km-pad-bottom); }
.hdr { display: flex; align-items: center; gap: var(--km-sp-4); padding: var(--km-sp-3) 0 var(--km-sp-5); }
.brand { font-size: var(--km-fs-lg); font-weight: 700; flex: 1; }
.place { font-size: var(--km-fs-sm); font-weight: 500; color: var(--km-muted); }
.basket {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--km-sp-3);
  min-height: var(--km-touch); min-width: var(--km-touch); padding: 0 var(--km-sp-7);
  border: var(--km-hairline) solid var(--km-line); border-radius: var(--km-radius);
  background: var(--km-brand-ink); color: var(--km-ink); text-decoration: none; font-weight: 600;
}
.bcount {
  background: var(--km-accent); color: var(--km-ink); border-radius: var(--km-badge-radius);
  font-size: var(--km-fs-sm); padding: 0 var(--km-sp-3); font-variant-numeric: tabular-nums;
}
.greet { font-size: var(--km-fs-lg); font-weight: 700; padding: var(--km-sp-1) 0 0; }
.sub { color: var(--km-muted); font-size: var(--km-fs-md); padding-bottom: var(--km-sp-4); }
.zslot { margin: var(--km-sp-4) 0 var(--km-sp-6); }
.zpill {
  display: flex; align-items: center; gap: var(--km-sp-4); min-height: var(--km-touch);
  background: var(--km-soft); border: var(--km-hairline) solid var(--km-line); border-radius: var(--km-radius);
  padding: var(--km-sp-3) var(--km-sp-6); font-size: var(--km-fs-md);
}
.zpill .zfee { flex: 1; font-variant-numeric: tabular-nums; }
.zchoose { border: var(--km-hairline) solid var(--km-line); border-radius: var(--km-radius); padding: var(--km-sp-6); background: var(--km-brand-ink); }
.zchoose p { font-size: var(--km-fs-md); margin-bottom: var(--km-sp-4); }
.zbtns { display: flex; flex-direction: column; gap: var(--km-sp-4); }
button, .linkbtn {
  min-height: var(--km-touch); min-width: var(--km-touch); border-radius: var(--km-radius);
  border: var(--km-hairline) solid var(--km-line); background: var(--km-brand-ink); color: var(--km-ink);
  font-size: var(--km-fs-base); font-weight: 600; font-family: inherit; cursor: pointer; padding: 0 var(--km-sp-8);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
button:focus-visible, a:focus-visible { outline: var(--km-focus) solid var(--km-ink); outline-offset: var(--km-focus); }
button:disabled { opacity: 0.5; cursor: default; }
.primary { background: var(--km-brand); border-color: var(--km-brand); color: var(--km-brand-ink); width: 100%; }
.ghost { background: var(--km-brand-ink); color: var(--km-ink); }
.wa { background: var(--km-brand-ink); border: var(--km-hairline) solid var(--km-brand); color: var(--km-brand); font-weight: 600; }
.prods { display: flex; flex-direction: column; gap: var(--km-sp-5); }
.prod {
  display: flex; gap: var(--km-sp-6); align-items: center; border: var(--km-hairline) solid var(--km-line);
  border-radius: var(--km-radius); background: var(--km-brand-ink); padding: var(--km-sp-5);
  color: var(--km-ink); text-decoration: none; min-height: var(--km-touch);
}
.prod.gone { opacity: 0.55; }
.pimg { width: var(--km-img); height: var(--km-img); border-radius: var(--km-radius); object-fit: cover; flex-shrink: 0; }
.ph {
  width: var(--km-img); height: var(--km-img); border-radius: var(--km-radius); background: var(--km-soft);
  color: var(--km-muted); font-size: var(--km-fs-xs); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--km-sp-2); flex-shrink: 0;
}
.ph.big { width: 100%; height: var(--km-ph-big); font-size: var(--km-fs-md); margin-bottom: var(--km-sp-5); }
.pimg.big { width: 100%; height: var(--km-img-big); margin-bottom: var(--km-sp-5); }
.pbody { flex: 1; min-width: 0; }
.pname { font-weight: 600; }
.pprice { font-variant-numeric: tabular-nums; font-weight: 700; }
.pstock { font-size: var(--km-fs-sm); color: var(--km-muted); }
.pstock.low { color: var(--km-warn); font-weight: 600; }
.pstock.out { color: var(--km-muted); font-weight: 600; }
.dname { font-size: var(--km-fs-lg); font-weight: 700; }
.dseller { color: var(--km-muted); font-size: var(--km-fs-md); margin-bottom: var(--km-sp-4); }
.prow { display: flex; align-items: center; gap: var(--km-sp-5); margin: var(--km-sp-3) 0; }
.dprice { font-size: var(--km-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; flex: 1; }
.ddesc { margin: var(--km-sp-5) 0; color: var(--km-ink); }
.money { border: var(--km-hairline) solid var(--km-line); border-radius: var(--km-radius); background: var(--km-brand-ink); padding: var(--km-sp-6); margin: var(--km-sp-6) 0; }
.money p { font-variant-numeric: tabular-nums; font-size: var(--km-fs-base); padding: var(--km-sp-1) 0; }
.money p.grand { font-weight: 700; }
.sticky { position: sticky; bottom: var(--km-sp-6); padding-top: var(--km-sp-4); }
.note { font-size: var(--km-fs-md); color: var(--km-muted); margin: var(--km-sp-4) 0; white-space: pre-wrap; }
.note.warn { color: var(--km-warn); }
.note.err { color: var(--km-bad); }
.line-row { display: flex; align-items: center; gap: var(--km-sp-4); border-bottom: var(--km-hairline) solid var(--km-line); padding: var(--km-sp-5) 0; }
.lbody { flex: 1; min-width: 0; }
.lname { font-weight: 600; }
.lunit { font-size: var(--km-fs-sm); color: var(--km-muted); font-variant-numeric: tabular-nums; }
.ltotal { font-weight: 700; font-variant-numeric: tabular-nums; }
.qty { display: flex; align-items: center; gap: var(--km-sp-2); }
.qty .qn { min-width: var(--km-qty-num); text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.skel { border-radius: var(--km-radius); background: var(--km-soft); height: var(--km-skel); margin-bottom: var(--km-sp-5); }
.foot { max-width: var(--km-shell); margin: 0 auto; padding: var(--km-sp-4) var(--km-sp-6) var(--km-sp-8); }
.foot .wa { width: 100%; }
h2 { font-size: var(--km-fs-lg); margin: var(--km-sp-4) 0; }
/* B6 timeline (LEP-8 criterion 3) */
.tline { margin: var(--km-sp-6) 0; }
.tstep { display: flex; gap: var(--km-sp-5); padding: var(--km-sp-4) 0; border-bottom: var(--km-hairline) solid var(--km-line); }
.tstate { font-weight: 600; flex: 1; }
.twhen { color: var(--km-muted); font-size: var(--km-fs-sm); font-variant-numeric: tabular-nums; }
.eta { font-size: var(--km-fs-base); font-weight: 600; margin: var(--km-sp-5) 0; }
.codecard { border: var(--km-hairline) solid var(--km-brand); border-radius: var(--km-radius); background: var(--km-brand-ink); padding: var(--km-sp-6); margin: var(--km-sp-6) 0; text-align: center; }
.codecard .code { font-size: var(--km-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.2em; padding: var(--km-sp-4) 0; }
/* Honest motion: nothing animates here anyway; if anything ever does, the
   user's reduced-motion preference wins. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}