/* Universal Eatz: one committed dark look pulled from the flyer. Black, flyer gold, brush red, cream text. Phone-first. */
:root{--bg:#0c0a08;--bg2:#141009;--card:#1b1610;--line:#3b2f21;--ink:#f4ead8;--muted:#b7a58c;--gold:#e9a934;--gold-d:#c98a1f;--orange:#d4671c;--red:#c8322a;--ok:#8fd694;
--display:"Anton",Impact,"Arial Narrow Bold",sans-serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);color-scheme:dark}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--gold)}
#app{max-width:560px;margin:0 auto;padding:0 16px calc(112px + env(safe-area-inset-bottom))}
.ribbon{position:sticky;top:0;z-index:5;margin:0 -16px;padding:6px 16px;background:var(--red);color:#fff;font:700 13px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-align:center}

/* hero */
.hero{text-align:center;padding:22px 0 8px}
.wordmark{width:min(100%,360px);height:auto;margin:0 auto}
.tag{margin:8px 0 0;font:400 clamp(24px,7.6vw,30px)/1 var(--display);text-wrap:balance;letter-spacing:.02em;text-transform:uppercase;color:var(--gold)}
.sub{margin:6px 0 12px;color:var(--muted);font:600 14px/1.3 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.pill{display:inline-block;margin:0;padding:7px 14px;border-radius:999px;background:var(--red);color:#fff;font:700 13px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.pill.closed{background:var(--line);color:var(--muted)}
.note{margin:10px 0 0;color:var(--muted);font-size:14px}
.sample{margin:14px 0 0;padding:10px 12px;border:1px dashed var(--gold-d);border-radius:10px;background:rgba(233,169,52,.08);color:var(--gold);font:600 13px/1.35 var(--cond);letter-spacing:.03em}

/* sections */
.sec{padding:22px 0 6px}
.step{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:400 26px/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.sec .step:not(:first-child){margin-top:24px}
.num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font:400 17px/1 var(--display)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{display:grid;grid-template-rows:auto 1fr auto;gap:2px;padding:0 0 10px;border:2px solid var(--line);border-radius:14px;background:var(--card);text-align:left;overflow:hidden;transition:border-color .15s,transform .1s}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card:active{transform:scale(.98)}
.card[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 24px rgba(233,169,52,.12)}
.cname{padding:8px 10px 0;font:700 17px/1.15 var(--cond)}
.cprice{padding:0 10px;color:var(--gold);font:700 15px/1.2 var(--cond)}
.desc{margin:10px 2px 0;color:var(--muted);font-size:14px}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips:not(.flav):not(.pay)>.chip:last-child:nth-child(odd){grid-column:1/-1} /* an odd protein count: the last chip goes full width instead of sitting alone on the left */
.chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--card);text-align:left;font:700 18px/1.1 var(--cond)}
.chip small{color:var(--muted);font:600 13px/1.1 var(--cond);letter-spacing:.04em;text-transform:uppercase}
.chip[aria-pressed=true],.chip:has(input:checked){border-color:var(--gold);background:var(--gold);color:#120d06}
.chip[aria-pressed=true] small,.chip:has(input:checked) small{color:#5a3f0e}
.chip input{position:absolute;opacity:0;pointer-events:none}
.builder{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.qty button{width:40px;height:40px;border:0;background:none;border-radius:50%;font-size:22px;line-height:1;color:var(--gold)}
.qty button:disabled{color:var(--line)}
.qty output{min-width:26px;text-align:center;font:700 18px/1 var(--cond)}
.btn{display:block;width:100%;padding:15px 18px;border:0;border-radius:12px;background:var(--gold);color:#120d06;font:700 18px/1.1 var(--cond);letter-spacing:.03em;text-transform:uppercase;text-align:center;text-decoration:none}
.btn:disabled{background:var(--line);color:var(--muted);cursor:default}
.btn.add{flex:1}
.btn.ghost{background:none;border:2px solid var(--line);color:var(--ink)}
.btn.pay{margin:14px 0 4px}
.rows{display:grid;gap:8px}
.row{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.row.on{border-color:var(--gold-d)}
.row img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex:none}
.rmeta{flex:1;display:flex;flex-direction:column}
.rname{font:700 17px/1.15 var(--cond)}
.rprice{color:var(--gold);font:700 14px/1.2 var(--cond)}
.foot{margin-top:28px;padding:18px 0 8px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;text-align:center}
.foot p{margin:4px 0}
.legal{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line);text-align:left}
.legal p{margin:6px 0;font-size:11px;line-height:1.4;color:var(--muted);opacity:.85}
.stepnote{margin-left:4px;font:600 12px/1 var(--cond);letter-spacing:.08em;color:var(--muted)}
.chips.flav{grid-template-columns:1fr 1fr 1fr}
.row.noimg{padding-left:14px}
.credit{margin-top:14px;font-size:12px;letter-spacing:.04em}

/* sticky bar: live total on the left (cart plus the plate being built), next action on the right */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:12px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 72%,rgba(12,10,8,0))}
.barin{display:flex;align-items:center;gap:12px;max-width:528px;margin:0 auto}
.sum{display:grid;flex:1;min-width:0;gap:1px}
.sumlbl{color:var(--muted);font:600 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.sumamt{color:var(--gold);font:400 28px/1 var(--display);letter-spacing:.02em}
.sumsub{color:var(--muted);font:600 12px/1.2 var(--cond);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .btn{flex:1;width:auto;min-height:52px;padding:12px 14px;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.bar.pop .sumamt{animation:pop .3s ease-out}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:none}}
.toast{position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom));z-index:11;max-width:92vw;padding:10px 16px;border-radius:999px;background:var(--ink);color:#120d06;font:700 14px/1 var(--cond);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;opacity:0;transform:translate(-50%,10px);transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.bar.pop .sumamt{animation:none}.toast{transition:none}}

/* checkout */
.sub-head{display:flex;align-items:center;gap:12px;padding:16px 0 6px}
.sub-head h1{margin:0;font:400 30px/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.back{border:0;background:none;color:var(--gold);font:700 16px/1 var(--cond);padding:8px 8px 8px 0}
.lines{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.lines li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.lmeta{display:flex;flex-direction:column;min-width:0}
.lname{font:700 16px/1.2 var(--cond)}
.lunit{color:var(--muted);font-size:13px}
.ltotal{min-width:64px;text-align:right;font:700 16px/1 var(--cond)}
.total{display:flex;justify-content:space-between;margin:12px 2px 0;padding-top:10px;border-top:1px solid var(--line);font:700 18px/1.2 var(--cond)}
.total strong{color:var(--gold);font-size:22px}
.empty{color:var(--muted)}
.form{display:grid;gap:14px;margin-top:22px}
.form label{display:grid;gap:6px;font:700 14px/1.2 var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;padding:13px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:var(--ink);font:400 17px/1.3 var(--body);text-transform:none;letter-spacing:0}
.form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.form fieldset{margin:0;padding:0;border:0;display:grid;gap:8px}
.form legend{padding:0;margin-bottom:2px;font:700 14px/1.2 var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.chips.pay .chip{position:relative;padding:12px;font-size:16px;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.chips.pay .chip:has(input:checked){color:#120d06}
.hidden-field{display:none}
.err{margin:0;padding:10px 12px;border-radius:10px;background:rgba(200,50,42,.15);border:1px solid var(--red);color:#ffb3ad}
.fine{margin:6px 0 0;color:var(--muted);font-size:13px;text-align:center}

/* done / failed */
.done{text-align:center;padding:30px 0 10px}
.check{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--ok);color:#0c0a08;font-size:36px;font-weight:700}
.done h1{margin:0;font:400 34px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.codelbl{margin:18px 0 0;color:var(--muted);font:600 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.code{margin:4px 0 0;font:400 46px/1 var(--display);letter-spacing:.06em;color:var(--gold)}
.payinfo{margin:16px 0 0;padding:14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:16px}
.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em}
.copy{margin-left:6px;padding:4px 10px;border:1px solid var(--gold-d);border-radius:999px;background:none;color:var(--gold);font:700 12px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.next{margin:18px 0 0;padding:0 0 0 22px;text-align:left}
.next li{margin:6px 0}
.summary{margin-top:18px;padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-align:left}
.summary h2{margin:0 0 8px;font:400 18px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.summary ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.summary li{display:flex;justify-content:space-between;gap:10px}
.done .btn.ghost{margin-top:18px}
.fail h1{color:#ffb3ad}
.fail p{text-align:left}
.ordertext{margin:14px 0;padding:12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);text-align:left;white-space:pre-wrap;font:14px/1.4 ui-monospace,Menlo,monospace}
.fail .btn+.btn{margin-top:10px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (min-width:600px){.hero{padding-top:34px}.tag{font-size:36px}}