[hidden] { display:none !important; }
/* Layout: a phone-first work order. Items stack; the running total stays pinned to the bottom. */
:root {
  --ink:#14222e; --muted:#566573; --line:#d6dee5; --paper:#f4f6f8; --card:#ffffff;
  --blue:#0b4f8f; --blue-ink:#ffffff; --blue-soft:#e4eef8; --bad:#b3261e; --good:#17703a;
  --display:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#e8eef3; --muted:#a3b1bd; --line:#31404c; --paper:#111a21; --card:#1a252e;
    --blue:#6db3f2; --blue-ink:#0a1c2c; --blue-soft:#1d3346; --bad:#ff9a92; --good:#7fdba0;
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.45 var(--body); }
.wrap { max-width:620px; margin:0 auto; padding:20px 16px 120px; }
header { margin-bottom:18px; }
.eyebrow { font:700 15px/1.1 var(--display); letter-spacing:.09em; color:var(--blue); }
h1 { font:700 38px/1.02 var(--display); margin:4px 0 8px; text-wrap:balance; }
h2 { font:700 25px/1.1 var(--display); margin:0; }
.sub { color:var(--muted); margin:0; }
.list { display:grid; gap:12px; }
.item { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; }
.item-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.price { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin:12px 0 6px; }
.sizes { display:flex; flex-wrap:wrap; gap:6px; border:0; padding:0; margin:0; }
.sizes legend { padding:0; }
.chip { position:relative; }
.chip input { position:absolute; opacity:0; inset:0; margin:0; }
.chip span { display:flex; align-items:center; justify-content:center; min-width:46px; height:44px; padding:0 10px; border:1px solid var(--line); border-radius:6px; font-weight:600; background:var(--card); }
.chip input:checked + span { background:var(--blue); border-color:var(--blue); color:var(--blue-ink); }
.chip input:focus-visible + span { outline:3px solid var(--blue); outline-offset:2px; }
.buy { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:2px; }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.stepper button { width:44px; height:44px; border:0; background:var(--card); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.stepper output { min-width:38px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; }
.btn { font:600 16px/1 var(--body); height:46px; padding:0 18px; border-radius:6px; border:1px solid var(--blue); background:var(--blue); color:var(--blue-ink); cursor:pointer; }
.btn.ghost { background:transparent; color:var(--blue); }
.btn.full { width:100%; height:52px; font-size:17px; }
.btn:disabled { opacity:.5; cursor:default; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.note { font-size:14px; min-height:20px; margin:8px 0 0; color:var(--muted); }
.note.bad { color:var(--bad); font-weight:600; }
.note.good { color:var(--good); font-weight:600; }
.bar { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:1px solid var(--line); padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.bar-in { max-width:620px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bar-total { font:700 26px/1 var(--display); font-variant-numeric:tabular-nums; }
.bar-count { font-size:13px; color:var(--muted); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:14px; }
.line { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:10px 0; border-bottom:1px solid var(--line); }
.line:last-of-type { border-bottom:0; }
.line-name { font-weight:600; min-width:0; }
.line-meta { color:var(--muted); font-size:14px; }
.line-total { font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.link { background:none; border:0; padding:0; color:var(--bad); font:inherit; font-size:14px; text-decoration:underline; cursor:pointer; justify-self:end; }
.sum { display:flex; justify-content:space-between; align-items:baseline; font:700 25px/1.1 var(--display); padding-top:12px; border-top:2px solid var(--ink); margin-top:4px; font-variant-numeric:tabular-nums; }
label.field { display:block; font-weight:600; margin-top:14px; }
label.field small { color:var(--muted); font-weight:400; }
input[type=text], input[type=email] { width:100%; height:46px; margin-top:5px; padding:0 12px; font:16px var(--body); color:var(--ink); background:var(--card); border:1px solid #8b99a5; border-radius:6px; }
.check { display:flex; gap:10px; align-items:flex-start; margin-top:12px; cursor:pointer; }
.check input { width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--blue); }
.trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.stack { display:grid; gap:10px; }
.order-no { font:700 44px/1 var(--display); color:var(--blue); font-variant-numeric:tabular-nums; margin:6px 0 10px; }
.state { padding:40px 0; color:var(--muted); }
@media (prefers-reduced-motion:no-preference) { .chip span, .btn { transition:background-color .12s; } }