/* Layout: Bobana's delivery-app shell. Cream paper with a faint hand-drawn ink painting behind; logo header, hero, sticky category chips,
   clay-art dish cards, a floating cart bar, and bottom sheets for options, cart, checkout and tracker. The panda paw with the boba pearl
   (from the logo) is the animated emblem. Brand: Chinese red, orange, tea brown, beige (Bobana brand guidelines). */
:root{
  --bg:#FBF3E8; --surface:#FFFDF9; --tile:#F3DDC7; --line:#EAD5BE; --text:#2E201C; --muted:#87584F; --brown:#87584F;
  --red:#DC4433; --red-d:#A92E21; --red-dd:#7E1F15; --gold:#F89824; --gold-d:#C9700D; --gold-ink:#4A2A00; --ok:#2E8F45; --red-t:#C4352A; --red-solid:#C4352A; --ok-t:#23703A; --ok-solid:#237A3B; --warn-t:#8A4B00;
  --shadow:rgba(135,88,79,.16); --scrim:rgba(46,24,18,.55); --ink:.55;
  --fd:"Shojumaru","Papyrus","Trattatello",fantasy; --f:"Delius","Comic Neue","Trebuchet MS",system-ui,sans-serif; --f-ar:"Alexandria",Tahoma,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1E1513;--surface:#2A1E1B;--tile:#3A2A25;--line:#4E3A33;--text:#FBEFE6;--muted:#D9BBA8;--red-t:#F57A66;--ok-t:#6FD08A;--warn-t:#F2B14A;
  --shadow:rgba(0,0,0,.4);--scrim:rgba(0,0,0,.7);--ink:.28;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1E1513;--surface:#2A1E1B;--tile:#3A2A25;--line:#4E3A33;--text:#FBEFE6;--muted:#D9BBA8;--red-t:#F57A66;--ok-t:#6FD08A;--warn-t:#F2B14A;
  --shadow:rgba(0,0,0,.4);--scrim:rgba(0,0,0,.7);--ink:.28;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;color:var(--text);font:700 16px/1.45 var(--f);
  background:radial-gradient(70% 50% at 15% 10%,rgba(248,152,36,.07),transparent 70%),radial-gradient(60% 50% at 90% 85%,rgba(220,68,51,.06),transparent 70%),var(--bg);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
#app[lang="ar"]{--f:var(--f-ar);--fd:var(--f-ar)}
#app{font-family:var(--f);position:relative}
.wrap{position:relative;z-index:1}
#ink{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--ink)}
#ink svg{position:absolute}
#ink .branch{top:-10px;inset-inline-end:-30px;width:min(70vw,460px)}
#app[dir="rtl"] #ink .branch{transform:scaleX(-1)}
#ink .reeds{bottom:-10px;inset-inline-start:-20px;width:min(40vw,240px)}
#ink .koi{bottom:6%;inset-inline-end:4%;width:min(34vw,190px)}
#ink .leaf{position:absolute;top:-40px;width:26px;height:26px}
.logoimg{display:block;height:48px;width:auto;border-radius:12px;background:#FBF3E8;padding:4px 8px}
.paw{display:block;overflow:visible}
#splash{position:fixed;inset:0;z-index:90;display:grid;place-items:center;align-content:center;gap:14px;background:var(--bg)}
#splash .paw{width:150px;height:auto}
#splash img{width:min(70vw,360px);border-radius:16px;background:#FBF3E8;padding:6px 12px}
#splash .splat{position:absolute;width:150px;height:150px;border-radius:50%;border:6px solid var(--brown);opacity:0}
.ar-t{font-family:var(--f-ar)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold-d);outline-offset:2px}
svg{display:block}
.wrap{max-width:1080px;margin:0 auto;padding-block:14px 120px}

/* header + hero */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand small{display:block;font:700 13px/1.3 var(--f);color:var(--muted);margin-top:3px;padding-inline-start:4px}
.seg{display:inline-flex;border-radius:999px;background:var(--surface);box-shadow:0 4px 12px var(--shadow);padding:4px;gap:2px}
.seg button{min-width:44px;border:0;background:transparent;border-radius:999px;padding:6px 12px;min-height:44px;font:900 14px var(--f)}
.seg button[aria-pressed="true"]{background:var(--red-solid);color:#fff}
.hero{margin-top:14px;border-radius:28px;padding:18px;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:6px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 100% 0%,#EF6A3A 0%,var(--red) 45%,var(--red-d) 100%);box-shadow:0 14px 30px rgba(169,46,33,.3)}
.hero h1{margin:0;font:400 clamp(24px,6.4vw,38px)/1.15 var(--fd);letter-spacing:.01em;text-wrap:balance}
.hero p{margin:6px 0 0;color:#FFE6CC;font-weight:800}
.hero .ha{width:150px;margin:-10px -6px -14px 0}
@media(min-width:700px){.hero{grid-template-columns:1fr 240px;padding:24px 28px}.hero .ha{width:240px}}

/* category chips */
.cats{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);display:flex;gap:8px;overflow-x:auto;padding-block:14px 10px;scrollbar-width:none;margin-top:6px}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;border:0;border-radius:999px;padding:8px 16px;min-height:44px;font:900 14px var(--f);background:var(--surface);color:var(--muted);box-shadow:0 3px 10px var(--shadow)}
.cat[aria-current="true"]{background:var(--text);color:var(--bg)}

/* menu grid */
.sec{padding-top:18px;scroll-margin-top:72px}
.sec h2{margin:0 0 12px;font:400 24px/1.2 var(--fd);color:var(--red);display:flex;align-items:baseline;gap:8px}
.sec h2 small{font:800 13px var(--f);color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:12px}
@media(min-width:760px){.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}}
.card{position:relative;border:0;padding:0;text-align:start;background:var(--surface);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;min-width:0;
  box-shadow:0 8px 22px var(--shadow);transition:box-shadow .2s}
.card:hover{box-shadow:0 12px 28px rgba(169,46,33,.2)}
.card .art{display:block;aspect-ratio:13/10;background:radial-gradient(circle at 45% 40%,#FFF8EC,#FBE3BF);padding:6px}
.card .art svg{width:100%;height:100%;overflow:visible}
.card .cb{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;flex:1}
.card .nm{display:block;font:900 16px/1.2 var(--f)}
.card .alt{display:block;font:700 13px/1.3 var(--f);color:var(--muted)}
.card .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 13px/1.35 var(--f);color:var(--muted);margin-top:2px}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.price{font:900 17px var(--f);color:var(--red-t);font-variant-numeric:tabular-nums}
.plus{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#F27A5E,var(--red) 55%,var(--red-d));box-shadow:0 4px 0 var(--red-dd),0 6px 12px rgba(169,46,33,.3),inset 0 2px 0 rgba(255,255,255,.35)}
.qbadge{position:absolute;top:8px;inset-inline-end:8px;min-width:28px;height:28px;border-radius:999px;padding:0 8px;display:grid;place-items:center;
  font:900 13px var(--f);color:var(--gold-ink);background:linear-gradient(180deg,#FFC071,#F89824);box-shadow:0 3px 8px rgba(201,112,13,.4)}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.tag{font:800 13px var(--f);border-radius:999px;padding:1px 8px;background:var(--tile);color:var(--muted)}
.tag.spicy{background:linear-gradient(180deg,#FF6A3D,#E2401A);color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:18px;padding:12px 18px;min-height:54px;
  font:900 16px var(--f);color:#fff;background:linear-gradient(180deg,#EC6A4E,var(--red) 55%,#C23826);
  box-shadow:0 5px 0 var(--red-dd),0 10px 18px rgba(169,46,33,.28),inset 0 2px 0 rgba(255,255,255,.35);transition:transform .08s,box-shadow .08s,opacity .2s,filter .2s}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--red-dd),0 4px 10px rgba(169,46,33,.25),inset 0 2px 0 rgba(255,255,255,.35)}
.btn.gold{color:var(--gold-ink);background:linear-gradient(180deg,#FFC071,#F89824 60%,#E5830F);box-shadow:0 5px 0 #B4600A,0 10px 18px rgba(201,112,13,.3),inset 0 2px 0 rgba(255,255,255,.5)}
.btn.gold:active{box-shadow:0 0 0 #B4600A}
.btn.ghost{color:var(--red-t);background:var(--surface);box-shadow:0 5px 0 var(--line),inset 0 0 0 2px var(--line)}
.btn.ghost:active{box-shadow:0 0 0 var(--line),inset 0 0 0 2px var(--line)}
.btn[aria-disabled="true"]{filter:grayscale(.7);opacity:.55}
.btn.wide{width:100%}
.btn .amt{font-variant-numeric:tabular-nums}

/* cart bar + toast */
#cartbar{position:fixed;z-index:25;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;width:min(520px,calc(100% - 28px));
  display:flex;align-items:center;gap:12px;border:0;border-radius:20px;padding:10px 16px;min-height:60px;color:#fff;font:900 16px var(--f);
  background:linear-gradient(180deg,#EC6A4E,var(--red) 55%,#C23826);box-shadow:0 5px 0 var(--red-dd),0 14px 28px rgba(169,46,33,.35)}
#cartbar .cnt{min-width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--gold-ink);background:linear-gradient(180deg,#FFC071,#F89824)}
#cartbar .lbl{flex:1;text-align:start}
#cartbar .amt{font-variant-numeric:tabular-nums}
#toast{position:fixed;z-index:60;left:50%;top:calc(14px + env(safe-area-inset-top,0px));translate:-50% 0;display:flex;align-items:center;gap:8px;
  background:var(--text);color:var(--bg);border-radius:999px;padding:10px 18px;font:900 15px var(--f);box-shadow:0 10px 30px rgba(0,0,0,.25);white-space:nowrap}
.pstamp{position:fixed;z-index:72;width:40px;pointer-events:none}
.pstamp .paw{width:40px;height:auto}
.emptyc .paw{width:110px;height:auto;margin:0 auto 4px}
#toast .paw{flex:none}
.fly{position:fixed;z-index:70;pointer-events:none}
.fly svg{width:100%;height:100%;overflow:visible}

/* sheets */
dialog{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;color:var(--text);overflow:visible}
dialog::backdrop{background:var(--scrim)}
.sheet{background:var(--bg);width:min(560px,100vw);max-height:94vh;display:flex;flex-direction:column;border-radius:28px 28px 0 0;position:fixed;inset:auto 0 0;margin-inline:auto;overflow:hidden}
@media(min-width:700px){.sheet{position:relative;inset:auto;border-radius:28px;margin:auto}dialog{margin:auto}}
.scroll{overflow:auto;overscroll-behavior:contain;overflow-anchor:none;flex:1}
.x{position:absolute;z-index:3;top:12px;inset-inline-end:12px;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--surface);box-shadow:0 4px 12px var(--shadow)}
.bigart{--k:0;position:sticky;top:0;z-index:2;background:radial-gradient(circle at 45% 42%,#FFF8EC,#FBE0B6 70%,#F4CF96);
  padding:calc(18px - 12px * var(--k)) 26px 4px;transition:box-shadow .2s;border-radius:0 0 22px 22px}
.bigart.pinned{box-shadow:0 10px 24px var(--shadow)}
.bigart svg{display:block;margin:0 auto;width:100%;height:auto;max-height:calc(36vh - 19vh * var(--k));overflow:visible}
.picks{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:4px 0 8px;min-height:8px}
.pk{font:700 13px/1.3 var(--f);background:#FFFDF9;color:#C4352A;border-radius:999px;padding:3px 9px;box-shadow:0 2px 6px rgba(135,88,79,.2)}
.opt .oicon{width:40px;height:40px;flex:none;overflow:visible}
.ftag{position:absolute;left:50%;top:38%;translate:-50% 0;z-index:3;pointer-events:none;font:700 18px/1 var(--f);color:#fff;background:var(--red-solid);border-radius:999px;padding:6px 12px;box-shadow:0 6px 14px rgba(169,46,33,.35);white-space:nowrap}
.body{padding:16px 18px 18px;display:grid;gap:12px}
.body h2{margin:0;font:400 28px/1.15 var(--fd);color:var(--red)}
.body .alt{margin:-8px 0 0;color:var(--muted);font-weight:800}
.body .d{margin:0;color:var(--muted)}
.base{display:flex;align-items:center;justify-content:space-between}
.base .dep{font:600 14px/1.3 var(--f);color:var(--muted)}
#addBtn .amt[data-v="0"],#addBtn:has(.amt[data-v="0"])>span:nth-child(2){display:none}
.exnote{display:flex;gap:8px;align-items:flex-start;border-radius:14px;padding:10px 12px;background:#FFF1C7;color:#5A3A00;font:800 13px/1.35 var(--f)}
.grp{border:0;margin:0;padding:14px;border-radius:20px;background:var(--surface);box-shadow:0 4px 14px var(--shadow);display:grid;gap:10px}
.gh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gh b{font:900 17px var(--f)}
.gh small{display:block;font:800 13px var(--f);color:var(--muted)}
.req{flex:none;font:900 13px var(--f);letter-spacing:.04em;text-transform:uppercase;border-radius:8px;padding:3px 8px;background:var(--tile);color:var(--muted)}
.req.need{background:var(--red-solid);color:#fff}
.req.ok{background:var(--ok-solid);color:#fff}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:10px;width:100%;border:2px solid var(--line);background:var(--bg);border-radius:14px;padding:10px 12px;min-height:50px;text-align:start;font:800 15px var(--f)}
.opt .tick{flex:none;width:24px;height:24px;border:2px solid var(--line);display:grid;place-items:center;background:var(--surface)}
.opt[data-type="one"] .tick{border-radius:50%}
.opt[data-type="many"] .tick{border-radius:7px}
.opt .tick svg{opacity:0;transform:scale(.4)}
.opt[aria-checked="true"]{border-color:var(--red);background:color-mix(in srgb,var(--red) 7%,var(--surface))}
.opt[aria-checked="true"] .tick{border-color:var(--red);background:var(--red)}
.opt[aria-checked="true"] .tick svg{opacity:1;transform:none}
.opt .lab{flex:1}
.opt .op{color:var(--muted);font-size:13px}
.notebox{display:grid;gap:6px;font:900 15px var(--f)}
.notebox textarea,.field textarea{width:100%;min-height:70px;border:2px solid var(--line);border-radius:14px;background:var(--surface);padding:10px 12px;font:700 15px var(--f);resize:vertical}
.foot{display:flex;gap:10px;align-items:center;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg);box-shadow:0 -6px 18px var(--shadow)}
.foot .btn{flex:1}
.step{display:flex;align-items:center;gap:4px;background:var(--surface);border-radius:16px;padding:4px;box-shadow:0 3px 10px var(--shadow)}
.step button{width:44px;height:44px;border-radius:12px;border:0;background:var(--tile);display:grid;place-items:center}
.step output{min-width:26px;text-align:center;font:900 17px var(--f);font-variant-numeric:tabular-nums}
.sh{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.sh h2{margin:0;font:400 26px var(--fd);color:var(--red);flex:1}
.sh .back{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface);box-shadow:0 4px 12px var(--shadow);display:grid;place-items:center}
#app[dir="rtl"] .flipx{transform:scaleX(-1)}

/* cart */
.line{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start;background:var(--surface);border-radius:20px;padding:10px;box-shadow:0 4px 14px var(--shadow)}
.line .th{border-radius:14px;background:radial-gradient(circle at 45% 40%,#FFF8EC,#FBE3BF);padding:2px}
.line .th svg{width:100%;height:auto;overflow:visible}
.line b{display:block;font:900 16px/1.2 var(--f)}
.line .ops{display:block;font:700 13px/1.35 var(--f);color:var(--muted)}
.line .lr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}
.lbtn{min-width:44px;border:0;background:none;color:var(--red-t);font:900 14px var(--f);padding:8px 4px;min-height:44px}
.sum{display:grid;gap:6px;background:var(--surface);border-radius:20px;padding:14px;box-shadow:0 4px 14px var(--shadow)}
.sum div{display:flex;justify-content:space-between;font-weight:800}
.sum .tot{font:900 19px var(--f);border-top:2px dashed var(--line);padding-top:8px}
.sum .tot span:last-child{color:var(--red-t);font-variant-numeric:tabular-nums}
.emptyc{text-align:center;padding:30px 10px;color:var(--muted)}
.emptyc b{display:block;color:var(--red);font:400 22px var(--fd);margin-top:6px}

/* checkout */
.ttype{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:18px;padding:5px;box-shadow:0 4px 14px var(--shadow)}
.ttype .pill{position:absolute;top:5px;bottom:5px;inset-inline-start:5px;width:calc(50% - 5px);border-radius:14px;background:linear-gradient(180deg,#EC6A4E,var(--red));box-shadow:0 4px 10px rgba(169,46,33,.3);transition:inset-inline-start .3s cubic-bezier(.3,1.4,.5,1)}
.ttype[data-t="dinein"] .pill{inset-inline-start:50%}
.ttype button{position:relative;z-index:1;border:0;background:transparent;border-radius:14px;min-height:50px;font:900 15px var(--f);display:flex;align-items:center;justify-content:center;gap:6px}
.ttype button[aria-pressed="true"]{color:#fff}
.field{display:grid;gap:6px}
.field>span{font:900 15px var(--f)}
.tables{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.tables button{border:2px solid var(--line);background:var(--surface);border-radius:12px;min-height:44px;font:900 15px var(--f)}
.tables button[aria-pressed="true"]{border-color:var(--red);background:var(--red);color:#fff}
.demonote{font:800 13px/1.4 var(--f);color:var(--muted);text-align:center}
.shake-hint{color:var(--red-t);font:900 13px var(--f)}


/* round 9: location, delivery fee, payment */
.locchip{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;border:0;border-radius:18px;background:var(--surface);box-shadow:0 4px 14px var(--shadow);padding:9px 14px;text-align:start;min-height:54px}
.locchip .li,.dcard .li{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red)}
.locchip>span:nth-child(2),.dcard .dt{flex:1;min-width:0}
.locchip small,.dcard small{display:block;font:800 13px var(--f);color:var(--muted)}
.locchip b{display:block;font:900 15px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{flex:none;font:900 24px/1 var(--f);color:var(--muted)}
.locmsg,.mapnote{margin:0;font:700 13px/1.4 var(--f);color:var(--muted)}
.locmsg{text-align:center}
.addrf{display:grid;grid-template-columns:1fr 1fr;gap:10px}.addrf .shake-hint{grid-column:1/-1}
.field input{width:100%;min-height:46px;border:2px solid var(--line);border-radius:14px;background:var(--surface);padding:8px 12px;font:700 15px var(--f)}
#locOk[aria-disabled="true"]{opacity:.55}
.dcard{display:flex;align-items:center;gap:10px;width:100%;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:10px 12px;text-align:start}
.dcard b{display:block;font:900 15px var(--f)}
.dcard.set{border-style:dashed;border-color:var(--red)}
.ttype[data-t="pickup"] .pill{inset-inline-start:50%}
.opt.pm .pmi{display:grid;place-items:center;width:28px;color:var(--text)}
.sum .free{color:var(--ok-t)}
.feenote{position:relative;margin:0;border-radius:12px;background:var(--tile);padding:9px 12px 12px;font:800 13px var(--f);overflow:hidden}
.feenote i{position:absolute;inset-inline-start:0;bottom:0;height:4px;background:var(--gold);border-radius:0 4px 4px 0}
.feenote.ok{background:color-mix(in srgb,var(--ok) 13%,var(--surface));color:var(--ok-t);padding-bottom:9px}
.feenote.sm{background:none;padding:0;color:var(--muted);font-size:13px}
.paysim{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 20px 34px}
.paysim .ph{width:150px}
.paysim h2{margin:4px 0 0;font:400 24px/1.2 var(--fd);color:var(--red)}
.paysim.ok h2{color:var(--ok-t)}
.paysim .sub{margin:0;font:900 16px var(--f)}
.trk .paid{font:900 13px var(--f);letter-spacing:.04em;color:#fff;background:var(--ok-solid);border-radius:8px;padding:2px 8px}
.trk .eta{margin:0;font:900 14px var(--f);color:var(--red-t)}
.areas .opt .alt{margin-inline-start:auto;font:700 13px var(--f);color:var(--muted)}
.bigart svg,#heroArt svg,#ink,#ink .leaf,#ink .fish,#ink .branch{will-change:transform}
.btn.geo{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px}
#sendLoc[aria-busy="true"]{opacity:.7}
.gstat{display:grid;gap:3px;border-radius:16px;padding:12px 14px;font:800 14px var(--f);background:var(--tile)}
.gstat b{font:900 15px var(--f)}
.gstat.ok{background:color-mix(in srgb,var(--ok) 13%,var(--surface))}.gstat.ok b{color:var(--ok-t)}
.gstat.no{background:color-mix(in srgb,var(--red) 10%,var(--surface))}.gstat.no b{color:var(--red-t)}
.gstat.warn b{color:var(--warn-t)}
.gstat a,.dcard small a{color:var(--red-t);font:900 13px var(--f)}
.osum{width:100%;max-width:420px;border-radius:16px;background:var(--surface);box-shadow:0 3px 10px var(--shadow);text-align:start}
.osum summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;cursor:pointer;font:800 14px var(--f);color:var(--muted);list-style:none}
.osum summary::-webkit-details-marker{display:none}
.osum summary b{margin-inline-start:auto;color:var(--text);font:900 15px var(--f);font-variant-numeric:tabular-nums}
.osum summary::after{content:"";flex:none;width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;rotate:45deg;margin:-4px 4px 0;transition:rotate .2s}
.osum[open] summary::after{rotate:225deg;margin-top:4px}
.osum .ol{display:grid;gap:8px;padding:2px 14px 12px;max-height:190px;overflow:auto;font:700 14px var(--f)}
.osum .or{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.osum .or>span{min-width:0}.osum .or>span:last-child{text-align:end;font-variant-numeric:tabular-nums}
.osum .or.it>span:last-child,.osum .or:not(.it)>span:first-child{flex:none;white-space:nowrap}
.scene{position:relative}.scene svg{position:absolute;inset:0;margin:auto;max-height:min(300px,100%)}
.osum .or small{display:block;color:var(--muted);font:700 13px var(--f)}
.osum .or.tot{border-top:2px dashed var(--line);padding-top:8px;font-weight:900}
.step button[aria-disabled="true"]{opacity:.4}
#addBtn{padding-inline:12px;gap:6px;white-space:nowrap}
@media (max-width:374px){#addBtn{flex-direction:column;gap:0;line-height:1.2;padding-block:6px}#addBtn>span:nth-child(2){display:none}#addBtn .amt{font-size:15px}}
.trk .meta{flex-wrap:wrap;justify-content:center;row-gap:4px}.trk .paid{white-space:nowrap}
/* tracker */
#track .sheet{height:min(760px,100vh);max-height:100vh;border-radius:28px 28px 0 0}
@media(min-width:700px){#track .sheet{border-radius:28px;height:min(760px,94vh)}}
.trk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));height:100%}
.trk .meta{display:flex;align-items:center;gap:8px;font:800 14px var(--f);color:var(--muted)}
.demo{font:900 13px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);background:linear-gradient(180deg,#FFC071,#F89824);border-radius:8px;padding:2px 8px}
.scene{width:100%;max-width:420px;flex:1;min-height:0;display:grid;place-items:center;border-radius:28px;background:radial-gradient(circle at 50% 45%,#FFF8EC,#FBE0B6 70%,#F4CF96)}
.scene svg{width:100%;height:100%;max-height:300px;overflow:visible}
.trk h2{margin:4px 0 0;font:400 28px/1.15 var(--fd);color:var(--red)}
.trk .sub{margin:0;color:var(--muted);font-weight:800}
.prog{width:100%;max-width:420px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative;padding-top:4px}
.prog .rail{position:absolute;top:20px;left:12.5%;right:12.5%;height:6px;border-radius:999px;background:var(--line)}
.prog .fill{position:absolute;top:20px;inset-inline-start:12.5%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--red),var(--gold));width:0}
.prog div.s{position:relative;display:grid;justify-items:center;gap:4px;font:800 13px/1.2 var(--f);color:var(--muted)}
.prog .d{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,var(--tile));box-shadow:inset -2px -3px 5px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.08)}
.prog .done .d{background:radial-gradient(circle at 35% 30%,#FFD3A0,var(--gold) 50%,#B4600A)}
.prog .now .d{background:radial-gradient(circle at 35% 30%,#F27A5E,var(--red) 55%,var(--red-d))}
.prog .now{color:var(--text)}
.trk .acts{display:flex;gap:10px;width:100%;max-width:420px}
.trk .acts .btn{flex:1}

/* ===== live site additions ===== */
.trackchip{border:2px solid color-mix(in srgb,var(--ok) 45%,var(--surface))}
.trackchip .li{background:var(--ok-solid);color:#fff}
.trackchip b{font:900 15px var(--f);color:var(--text)}
.trackchip .tbtn{margin-inline-start:auto;font:900 14px var(--f);color:var(--ok-t);padding:0 4px}
.paused{margin-top:12px;border-radius:16px;padding:12px 14px;font:800 15px/1.4 var(--f);background:color-mix(in srgb,var(--gold) 18%,var(--surface));color:var(--warn-t);text-align:center}
.card.soldout{cursor:not-allowed}
.card.soldout .art svg{filter:grayscale(.85);opacity:.55}
.card.soldout .plus{visibility:hidden}
.card .art{position:relative}
.sobadge{position:absolute;inset-inline-start:10px;top:10px;font:900 13px var(--f);color:#fff;background:var(--text);border-radius:999px;padding:3px 10px}
.opt.so{opacity:.55;cursor:not-allowed}
.opt .so-l{margin-inline-start:6px;font:900 13px var(--f);color:var(--red-t)}
.payel{min-height:180px;border-radius:18px;background:var(--surface);padding:14px;box-shadow:0 4px 14px var(--shadow)}
.paywait{margin:40px 0;text-align:center;color:var(--muted);font:800 15px var(--f)}
#payNow[aria-busy="true"],#place[aria-busy="true"]{opacity:.75;pointer-events:none}
#place[aria-disabled="true"]{opacity:.5}
#coPhone{min-height:50px;font-size:16px;color:var(--text)}
.fhint{font:700 13px/1.4 var(--f);color:var(--muted)}
.trk .acts{flex-wrap:wrap}
.trk .upd{flex-basis:100%;margin:0 0 2px;width:100%;text-align:center;font:800 13px var(--f);color:var(--muted)}
.foot-links{margin:28px 0 calc(110px + env(safe-area-inset-bottom,0px));text-align:center;font:800 13px/1.6 var(--f);color:var(--muted)}
.foot-links nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}
.foot-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;display:inline-block;min-height:44px;line-height:44px}
.foot-links p{margin:4px 0 0}
/* feedback after the order */
.fbcard{width:100%;max-width:420px;display:grid;justify-items:center;gap:2px;border-radius:18px;background:var(--surface);box-shadow:0 3px 10px var(--shadow);padding:10px 12px 6px}
.fbcard b{font:900 16px var(--f)}
.stars{display:flex;justify-content:center;gap:2px}
.stars button{border:0;background:none;padding:0;min-width:48px;min-height:48px;display:grid;place-items:center;color:var(--line);cursor:pointer;border-radius:12px}
.stars button.on{color:var(--gold)}
.stars button:focus-visible{outline:3px solid var(--red-t);outline-offset:1px}
.stars svg{width:36px;height:36px;fill:currentColor;stroke:var(--gold-d);stroke-width:.6}
.stars button:not(.on) svg{stroke:var(--muted);stroke-opacity:.7;stroke-width:1}
.stars.big svg{width:44px;height:44px}
.stars.big button{min-width:54px;min-height:54px}
.starlab{margin:-4px 0 0;min-height:1.45em;font:900 15px var(--f);color:var(--warn-t)}
.trk.fbv{justify-content:flex-start;overflow-y:auto;gap:12px}
.fbv .fbf{width:100%;max-width:420px;text-align:start}
.fbv textarea{min-height:96px;color:var(--text)}
.fbv .acts{margin-top:auto}
.phs{display:flex;flex-wrap:wrap;gap:10px}
.ph{position:relative;width:88px;height:88px;border-radius:14px;overflow:hidden;background:var(--tile)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph button{position:absolute;top:4px;inset-inline-end:4px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(30,18,14,.72);color:#fff;font:900 20px/1 var(--f);display:grid;place-items:center;cursor:pointer}
.ph.wait{display:grid;place-items:center}
.ph.wait .dot{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.ph.wait .dot{animation:none}}
.phadd{width:88px;height:88px;border:2px dashed var(--line);border-radius:14px;background:var(--surface);color:var(--muted);display:grid;place-content:center;justify-items:center;gap:2px;font:900 13px/1.2 var(--f);cursor:pointer;padding:4px}
.phadd span{font:900 28px/1 var(--f);color:var(--red-t)}
#fbSend[aria-busy="true"]{opacity:.75;pointer-events:none}
.fbdone{margin:0;font:900 15px var(--f);color:var(--ok-t)}
.trackchip.rate{border-color:color-mix(in srgb,var(--gold) 60%,var(--surface))}
.trackchip.rate .li{background:linear-gradient(180deg,#FFC071,#F89824);color:#fff}
.trackchip.rate .li svg{width:20px;height:20px;fill:#fff}
.trackchip.rate .tbtn{color:var(--warn-t)}
.trk .meta .rcpt{display:inline-flex;align-items:center;min-height:32px;padding:2px 12px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--red-t);font:900 13px var(--f);text-decoration:none;white-space:nowrap}
.trk .meta .rcpt::after{content:"↗";margin-inline-start:4px;font-size:12px}
[dir="rtl"] .trk .meta .rcpt::after{content:"↖"}
.allergy{margin:12px 0 0;border-radius:14px;padding:10px 12px;background:var(--tile);font:800 14px/1.45 var(--f);color:var(--text);text-align:center}
.allergy a{color:var(--red-t);font-weight:900;white-space:nowrap}
.foot-links p a{color:var(--red-t);font-weight:900}