/* Layout: airy, light-only menu (the owner prefers the light look). Pizza showcase on its own coloured plate
   → sticky section rail → wide, borderless food cards (photo opens a detail sheet with zoom, "+" adds to
   the order) → dotted price lists for drinks → dark banquet band. Accent logic: a calm flour/ink base and
   ONE bright flat colour, tomato, on everything you act on (+, add, active section, order total). Each dish
   only tints its own plate (--item, flat pastel, no glow). Cheese yellow is the marker stroke under key words. */
@property --item{syntax:"<color>";inherits:true;initial-value:#e2523b}
:root{
  --flour:#FAF8F4;   /* page */
  --surface:#FFFFFF;
  --ink:#1B1713;     /* text, logo ink */
  --ink-2:#6A6157;   /* secondary text */
  --line:#ECE5DA;
  --tomato:#C2391F;  /* the one accent: main action, active section, prices */
  --cheese:#F1B52E;
  --disc:#F6ECD6;    /* plate disc behind photos */
  --scrim:rgba(27,23,19,.38);
  --band-bg:#1B1713;--band-fg:#F6F1E8;--band-2:#B8AE9F;--band-line:#3A332C;
  --item:var(--tomato);
  color-scheme:light;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Golos Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --air:clamp(72px,10vw,128px);  /* space between sections */
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  /* Phone notch and, in a fullscreen Telegram Mini App, Telegram's floating Close / ⌄ ⋯ buttons:
     telegram-web-app.js sets --tg-safe-area-inset-* and --tg-content-safe-area-inset-* on <html>. */
  --safe-top:max(env(safe-area-inset-top,0px),calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)));
  --safe-bottom:max(env(safe-area-inset-bottom,0px),calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--flour);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:var(--safe-top);z-index:40;background:var(--flour)}
/* Fullscreen in Telegram: the page starts below Telegram's buttons; scrolling never collapses the app */
html.tg body{padding-top:var(--safe-top);overscroll-behavior:none}
html.tg{scroll-padding-top:calc(80px + var(--safe-top))}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.mono{font-family:var(--f-data);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--tomato);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand img{width:44px;height:44px}
.brand b{font:800 17px/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase}
.brand small{display:block;font:400 11px/1.2 var(--f-data);color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;margin-top:5px}

/* order button (header + rail) */
.bag{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--ink);color:var(--flour);border-radius:999px;padding:10px 16px 10px 14px;font:600 14px/1 var(--f-body);white-space:nowrap}
.bag svg{width:18px;height:18px}
.bag .n{min-width:22px;height:22px;border-radius:11px;background:var(--tomato);color:#fff;display:inline-grid;place-items:center;font:500 12px/1 var(--f-data);padding-inline:6px}
.bag .n:empty,.bag .n[data-zero]{display:none}
.bag.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.1)}}

/* showcase */
.show{--item:#e2523b;transition:--item 1.1s ease;position:relative;overflow-x:clip}
.show .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:24px 40px}
.show h1{font-size:clamp(38px,6.4vw,84px);line-height:.95;font-weight:800;text-transform:uppercase}
.show h1 span{display:block;color:var(--tomato)}
/* signature: a cheese-yellow marker stroke under key words */
.show h1 .mark{display:inline}
.mark{background:linear-gradient(transparent 62%,color-mix(in oklab,var(--cheese) 75%,transparent) 62% 90%,transparent 90%);padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.show .lead{margin-top:20px;max-width:46ch;color:var(--ink-2);font-size:17px}
.now{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:12px;max-width:520px}
.now .eyebrow{font:500 12px/1 var(--f-data);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);display:flex;gap:10px;align-items:center}
.now .eyebrow i{width:10px;height:10px;border-radius:50%;background:var(--item);transition:background 1.1s}
.now h2{font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1.05}
.now p{color:var(--ink-2);max-width:46ch;min-height:3.2em}
.now .buy{margin-top:6px}
.stage{position:relative;aspect-ratio:1;width:100%;max-width:600px;justify-self:center}
.stage .disc{position:absolute;inset:9%;border-radius:50%;background:color-mix(in oklab,var(--item) 26%,var(--disc));transition:background 1.1s}
.stage .pie{position:absolute;inset:3%;width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(40,20,0,.28));animation:turn 80s linear infinite;transition:opacity .35s ease,transform .5s ease}
.stage .pie.out{opacity:0;transform:scale(.92) rotate(-14deg)}
.stage .stamp{position:absolute;right:1%;bottom:3%;width:24%;transform:rotate(-12deg)}
@keyframes turn{to{rotate:360deg}}
.picks{grid-column:1/-1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 2px 6px}
.picks::-webkit-scrollbar{display:none}
.picks button{flex:none;display:grid;justify-items:center;gap:6px;width:78px;border:0;background:none;cursor:pointer;padding:6px 0;border-radius:12px;color:var(--ink-2);font:500 11px/1.2 var(--f-body)}
.picks img{width:54px;height:54px;object-fit:contain;transition:transform .3s}
.picks button:hover img{transform:scale(1.08)}
.picks button[aria-current="true"]{color:var(--ink)}
.picks button[aria-current="true"] img{transform:scale(1.14)}
.picks .bar{width:34px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.picks .bar b{display:block;height:100%;width:0;background:var(--tomato)}
.picks button[aria-current="true"] .bar b{animation:fill var(--dwell,7s) linear forwards}
.show.paused .picks button[aria-current="true"] .bar b{animation-play-state:paused}
@keyframes fill{to{width:100%}}
/* rail */
.rail{position:sticky;top:var(--safe-top);z-index:30;background:color-mix(in srgb,var(--flour) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.rail .wrap{display:flex;align-items:center;gap:12px;padding-block:10px}
.rail nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.rail nav::-webkit-scrollbar{display:none}
.rail nav a{flex:none;padding:9px 14px;border-radius:999px;color:var(--ink-2);text-decoration:none;font:500 14px/1 var(--f-body);white-space:nowrap}
.rail nav a:hover{color:var(--ink)}
.rail nav a.on{background:var(--tomato);color:#fff}

/* sections */
section.menu{padding-top:var(--air)}
.head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:10px 28px;margin-bottom:36px}
.head h2{font-size:clamp(32px,5vw,60px);font-weight:800;text-transform:uppercase;line-height:.95}
.head .meta{font:400 12px/1.4 var(--f-data);color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em;padding-bottom:6px}
.head p{grid-column:1/-1;max-width:60ch;color:var(--ink-2)}

.ctrl{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-bottom:36px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{appearance:none;border:1px solid var(--line);background:var(--surface);padding:9px 15px;border-radius:999px;font:500 14px/1 var(--f-body);cursor:pointer}
.chip:hover{border-color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--flour)}
.lbl{font:400 12px/1 var(--f-data);color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}

/* size switch */
.seg{display:inline-flex;border-radius:999px;padding:3px;gap:2px;background:var(--surface);border:1px solid var(--line)}
.seg button{appearance:none;border:0;background:transparent;padding:7px 11px;border-radius:999px;font:500 12.5px/1 var(--f-body);cursor:pointer;white-space:nowrap;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--flour)}

/* food cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:64px 44px}
.grid.compact{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:52px 32px}
.card{display:flex;flex-direction:column;gap:10px;min-width:0}
.ph{position:relative;display:grid;place-items:center;aspect-ratio:1/.84;width:100%;padding:0;border:0;background:none;cursor:zoom-in;isolation:isolate;margin-bottom:8px}
.ph::before{content:"";position:absolute;z-index:-1;width:76%;aspect-ratio:1;border-radius:50%;background:color-mix(in oklab,var(--item) 20%,var(--disc));transition:transform .45s ease}
.ph img{width:96%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(40,20,0,.22));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ph.sq img{width:74%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;filter:none}
.ph .none{font:400 12px/1 var(--f-data);color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
.card:hover .ph img{transform:rotate(-6deg) scale(1.04)}
.card:hover .ph::before{transform:scale(1.05)}
.card h3{font-size:21px;font-weight:600;line-height:1.15}
.grid.compact .card h3{font-size:17px}
.card h3 button{all:unset;cursor:pointer}
.card h3 button:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card h3 button:focus-visible{outline:2px solid var(--tomato);outline-offset:3px;border-radius:4px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font:400 11px/1 var(--f-data);text-transform:uppercase;letter-spacing:.07em;padding:5px 8px;border-radius:6px;background:var(--disc)}
.card .desc{color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.buy{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.wt{font:400 13px/1 var(--f-data);color:var(--ink-2)}
.price{font:500 22px/1 var(--f-data);color:var(--tomato);white-space:nowrap;margin-left:auto;font-variant-numeric:tabular-nums}
.price small{font-size:12px;color:var(--ink-2);margin-left:4px}
.grid.compact .price{font-size:19px}
.add{flex:none;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:var(--tomato);color:#fff;display:grid;place-items:center;transition:transform .2s,background .2s}
/* how many of this dish are already in the order */
.add,.plus{position:relative}
.add[data-q]::after,.plus[data-q]::after,.pill[data-q]::after{content:attr(data-q);position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding-inline:5px;border-radius:10px;background:var(--ink);color:var(--flour);font:500 11px/19px var(--f-data);text-align:center;border:2px solid var(--flour)}
.pill{position:relative}
.add:hover{transform:scale(1.08)}
.add:active{transform:scale(.94)}
.add svg{width:18px;height:18px}
.add.done{animation:pop .5s ease}
@keyframes pop{30%{transform:scale(1.25)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;border-radius:999px;padding:14px 22px;font:600 15px/1 var(--f-body);text-decoration:none;background:var(--tomato);color:#fff}
.btn:hover{background:#A92F18}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink)}

/* burgers + combos */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
.combos{display:grid;gap:14px;align-content:start}
.combo{border-radius:20px;background:var(--surface);border:1px solid var(--line);padding:22px;display:grid;gap:14px}
.combo h3{font-size:18px;font-weight:600}
.eq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 14px/1.2 var(--f-body)}
.eq span{padding:7px 10px;border-radius:8px;background:var(--disc)}
.eq i{font-style:normal;color:var(--ink-2);font-family:var(--f-data)}
.combo .buy{padding-top:0}
.combo .note{font-size:13px;color:var(--ink-2)}

/* sauces strip */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:48px;padding:18px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.strip img{width:56px;height:56px;object-fit:cover;border-radius:50%}
.strip h3{font-size:16px;font-weight:600}
.strip .pills{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 280px;min-width:0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 8px 7px 12px;border-radius:999px;background:var(--flour);border:1px solid var(--line);font-size:14px;cursor:pointer;white-space:nowrap}
.pill b{width:20px;height:20px;border-radius:50%;background:var(--tomato);color:#fff;display:grid;place-items:center;font:500 14px/1 var(--f-data)}
.pill:hover{border-color:var(--ink-2)}
.pill.info{cursor:default;padding-right:12px}

/* price lists */
.lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:48px 56px}
.list{min-width:0}
.list header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.list header img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.list h3{font-size:19px;font-weight:600}
.list header small{display:block;font:400 11px/1.3 var(--f-data);color:var(--ink-2);text-transform:uppercase;letter-spacing:.07em;margin-top:4px}
.row{display:flex;align-items:center;gap:8px;padding-block:6px}
.row .nm{min-width:0}
.row .nm em{display:block;font-style:normal;font-size:13px;color:var(--ink-2)}
.row .dots{flex:1;border-bottom:1.5px dotted var(--ink-2);opacity:.35;min-width:14px;align-self:flex-end;margin-bottom:9px}
.row .v{font:400 13px/1 var(--f-data);color:var(--ink-2);white-space:nowrap}
.row .p{font:500 15px/1 var(--f-data);color:var(--tomato);white-space:nowrap}
.row .plus{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.row .plus:hover{background:var(--tomato);border-color:var(--tomato);color:#fff}
.row .plus svg{width:12px;height:12px}
.row .plus.ghost{visibility:hidden}

/* banquet */
.band{background:var(--band-bg);color:var(--band-fg);margin-top:var(--air)}
.band .wrap{padding-block:var(--air)}
.band .head .meta,.band .head p,.band .row .nm em,.band .row .v,.band .list header small{color:var(--band-2)}
.band .row .dots{border-color:var(--band-2)}
.band .row .p,.band .list h3{color:var(--cheese)}
.band .list{border-top:1px solid var(--band-line);padding-top:18px}
.band .row .plus{background:transparent;border-color:var(--band-line);color:var(--band-fg)}
.band .row .plus:hover{background:var(--cheese);border-color:var(--cheese);color:#1B1713}

footer{padding-block:32px 120px;color:var(--ink-2);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center}
footer img{width:34px;height:34px;vertical-align:middle;margin-right:10px}

/* floating order bar, once something is in the order */
.dock{position:fixed;z-index:35;left:50%;bottom:calc(16px + var(--safe-bottom));transform:translate(-50%,0);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.dock[data-empty]{transform:translate(-50%,140%);opacity:0;pointer-events:none}
.dock .bag{padding:14px 20px 14px 16px;font-size:15px;box-shadow:0 18px 40px -14px rgba(0,0,0,.45)}
.dock .sum{font-family:var(--f-data);opacity:.8}

/* dialogs: dish sheet and order drawer */
dialog{border:0;padding:0;color:var(--ink);background:var(--surface);max-width:none;max-height:none;overscroll-behavior:contain}
dialog::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}
.sheet{width:min(1040px,calc(100% - 32px));border-radius:28px;overflow:hidden}
.sheet[open]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(24px);opacity:0}}
.zoom{position:relative;aspect-ratio:1;overflow:hidden;cursor:zoom-in;isolation:isolate;background:color-mix(in oklab,var(--item) 18%,var(--disc));touch-action:pan-y}
.zoom img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;transition:transform .35s ease;transform-origin:var(--ox,50%) var(--oy,50%)}
.zoom.sq img{inset:14%;width:72%;height:72%;object-fit:cover;border-radius:50%}
.zoom.on{cursor:zoom-out;touch-action:none}
.zoom.on img{transform:scale(2.2)}
.zoom .hint{position:absolute;left:16px;bottom:14px;font:400 11px/1 var(--f-data);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);background:color-mix(in srgb,var(--surface) 80%,transparent);padding:7px 10px;border-radius:999px}
.zoom .none{position:absolute;inset:0;display:grid;place-items:center;font:400 12px/1 var(--f-data);color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
.info{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:14px;min-width:0;max-height:min(88vh,760px);overflow:auto}
.info .sec{font:400 12px/1 var(--f-data);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.info h2{font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.05}
.info .d{font-size:17px}
.info .ing{color:var(--ink-2)}
.info .ing b{display:block;font:400 11px/1 var(--f-data);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;color:var(--ink-2)}
.sizes{display:grid;gap:8px}
.size{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);cursor:pointer;background:var(--flour)}
.size input{accent-color:var(--tomato);width:18px;height:18px;margin:0}
.size b{font-weight:600}
.size .wt{margin-left:4px}
.size .price{font-size:18px}
.size:has(input:checked){border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px}
.qty button{width:36px;height:36px;border-radius:50%;border:0;background:none;cursor:pointer;font:500 18px/1 var(--f-data)}
.qty button:hover{background:var(--disc)}
.qty output{min-width:30px;text-align:center;font:500 16px/1 var(--f-data)}
.info .act{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.info .act .btn{flex:1;min-width:200px}
.x{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(0,0,0,.3)}
.x svg{width:16px;height:16px}
.nav2{display:flex;gap:8px;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px}
.nav2 button{border:0;background:none;cursor:pointer;color:var(--ink-2);font:500 13px/1.3 var(--f-body);text-align:left;padding:4px 0;max-width:48%}
.nav2 button:last-child{text-align:right}
.nav2 button:hover{color:var(--ink)}
.nav2 span{display:block;font:400 11px/1 var(--f-data);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}

.drawer{margin:0 0 0 auto;height:100%;width:min(460px,100%);border-radius:28px 0 0 28px;display:none}
.drawer[open]{display:flex;flex-direction:column;animation:slide .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.drawer header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(22px + var(--safe-top)) 22px 16px}
.drawer h2{font-size:24px;font-weight:600}
.drawer .x{position:static;box-shadow:none;background:var(--flour)}
.lines{flex:1;overflow:auto;padding:0 22px;display:grid;align-content:start;gap:4px}
.line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding-block:12px;border-bottom:1px solid var(--line)}
.line .th{width:56px;height:56px;border-radius:50%;background:color-mix(in oklab,var(--item) 22%,var(--disc));display:grid;place-items:center;overflow:hidden}
.line .th img{width:100%;height:100%;object-fit:contain}
.line .nm{min-width:0}
.line .nm b{display:block;font-weight:600;line-height:1.25}
.line .nm small{color:var(--ink-2);font-size:13px}
.line .lp{font:500 16px/1 var(--f-data);text-align:right}
.line .qty{grid-column:2;justify-self:start;padding:2px}
.line .qty button{width:30px;height:30px;font-size:16px}
.line .rm{grid-column:3;justify-self:end;border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.empty{padding:40px 0;color:var(--ink-2);display:grid;gap:14px;justify-items:start}
.empty b{font:600 18px/1.3 var(--f-display);color:var(--ink)}
.drawer footer{display:grid;gap:12px;padding:18px 22px calc(22px + var(--safe-bottom));border-top:1px solid var(--line);color:var(--ink)}
.total{display:flex;justify-content:space-between;align-items:baseline;font:600 18px/1 var(--f-body)}
.total .mono{font-size:24px;color:var(--tomato)}
.drawer .hint{font-size:13px;color:var(--ink-2)}
.drawer .two{display:flex;gap:10px}
.drawer .two .btn{flex:1}

/* "added" note: a small bubble right above the order bar, where the dish goes; it never covers the section rail */
.toast{position:fixed;z-index:34;left:50%;bottom:calc(16px + 52px + 12px + var(--safe-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:9px 14px 9px 10px;
  font:500 14px/1.25 var(--f-body);max-width:calc(100% - 48px);box-shadow:0 12px 30px -12px rgba(40,20,0,.28);transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.toast::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:inherit;border:inherit;border-width:0 1px 1px 0;transform:translateX(-50%) rotate(45deg)}
.toast i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--tomato);color:#fff;display:grid;place-items:center}
.toast i svg{width:12px;height:12px}
.toast span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.on{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity .2s}}

@media (prefers-reduced-motion:reduce){
  .stage .pie{animation:none}
  .card:hover .ph img,.card:hover .ph::before{transform:none}
  .picks button[aria-current="true"] .bar b{animation:none;width:100%}
  .sheet[open],.drawer[open]{animation:none}
}
@media (max-width:900px){
  .show .wrap{grid-template-columns:1fr}
  .stage{max-width:440px;order:-1}
  .now{margin-top:24px}
  .split{grid-template-columns:1fr}
  .sheet[open]{grid-template-columns:1fr;max-height:calc(100dvh - var(--safe-top) - 12px);overflow:auto}
  .info{max-height:none}
  .zoom{aspect-ratio:5/4}
}
@media (max-width:600px){
  .brand small{display:none}
  .top .bag .t{display:none}
  .show .lead{font-size:16px}
  .head{grid-template-columns:1fr}
  .sheet{width:100%;border-radius:24px 24px 0 0;margin:auto 0 0}
  .drawer{width:100%;border-radius:24px 24px 0 0;height:auto;max-height:calc(100dvh - var(--safe-top) - 12px);margin:auto 0 0}
  .drawer header{padding-top:22px}
  .grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 14px}
  .grid.compact .buy{gap:8px}
  .grid.compact .price{margin-left:0;font-size:17px}
  .grid.compact .add{width:38px;height:38px;margin-left:auto}
}

/* ordering from the table: chip in the header, status in "my order" */
.top .tbl{margin-left:auto;margin-right:8px}
.brand{min-width:0}
.tbl{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 12px;font:600 13.5px/1 var(--f-body);cursor:pointer;white-space:nowrap}
.tbl i{width:8px;height:8px;border-radius:50%;background:#C98A00}
.tbl.ok i{background:#2E7D4F}
.tbl span{font:400 12px/1 var(--f-data);color:var(--ink-2)}
.tblbox{display:grid;gap:8px;padding:14px 16px;border-radius:16px;margin:4px 0 10px}
.tblbox b{font-weight:600}
.tblbox span,.tblbox em{font-size:14px}
.tblbox em{font-style:normal;color:#B42318}
.tblbox.ok{background:#E6F2EA;color:#1F5C39}
.tblbox.warn{background:#FBEFD9;color:#7A4A00}
.tblbox.bad{background:#FBE7E4;color:#8F1D13}
.codeform{display:flex;gap:8px}
.codeform input{width:7.5em;font:500 20px/1 var(--f-data);letter-spacing:.3em;text-align:center;padding:10px;border-radius:12px;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink)}
.codeform .btn{padding:12px 16px}
.lh{font:600 13px/1 var(--f-data);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin:14px 0 6px}
.sent{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:grid;gap:8px;margin-bottom:8px}
.sent .sh2{display:flex;align-items:center;gap:10px}
.sent .sh2 .mono{margin-left:auto;font-weight:500;white-space:nowrap}
.sent ul{margin:0;padding-left:18px;font-size:14px}
.sent li small{color:var(--ink-2)}
.sent .chg{font-size:13.5px;color:#7A4A00;background:#FBEFD9;padding:8px 10px;border-radius:10px}
.sent .rm{justify-self:start}
.st{display:inline-block;padding:3px 9px;border-radius:999px;font:500 11.5px/1.3 var(--f-data);white-space:nowrap}
.st.ok{background:#E6F2EA;color:#1F5C39}
.st.warn{background:#FBEFD9;color:#7A4A00}
.st.bad{background:#FBE7E4;color:#8F1D13}
.billrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0 6px;border-top:1px solid var(--line);margin-top:6px}
.billrow b{margin-right:auto}
.idform{display:grid;gap:6px}
.idform label{font:400 11px/1 var(--f-data);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin-top:4px}
.idform input{font:400 16px/1.2 var(--f-body);padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.idform .btn{margin-top:8px}
.link{border:0;background:none;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
#cart-foot>.btn{width:100%}
@media (max-width:600px){.top .tbl span{display:none}.top:has(.tbl) .brand b{display:none}}
.who{border-top:1px solid var(--line);padding-top:10px}
.who summary{cursor:pointer;font-size:14px;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:8px}
.who summary::-webkit-details-marker{display:none}
.who summary::before{content:"+";width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:500 14px/1 var(--f-data);color:var(--ink)}
.who[open] summary::before{content:"−"}
.who .idform{margin-top:8px}
.who .hint{margin-top:4px}
.sent .rm{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 12px;font:500 13px/1 var(--f-body);cursor:pointer;text-decoration:none}
.sent .rm:hover{border-color:var(--ink)}
.linkbtn{display:block;margin:6px auto 0;border:0;background:none;color:var(--ink-2);font:500 13.5px/1.4 var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sent .btn{justify-self:stretch}