/* Street Fellas — dish detail sheet + order cart.
   Same sheet physics as the El Greco system (translateY spring, swipe-to-close,
   veil); rebuilt around ordering: ingredients you can remove, extras you can
   add, a quantity stepper and a running total. */

[hidden]{display:none!important}

/* ── tappable dish rows ── */
.dish.tappable{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s}
.dish.tappable:active{opacity:.6}
.dish.tappable .dthumb{transition:transform .25s cubic-bezier(.32,1.2,.4,1)}
.dish.tappable:hover .dthumb{transform:scale(1.06)}
.dish-cust{font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc-light);background:var(--acc-dim);border-radius:100px;padding:3px 8px;white-space:nowrap}

/* ── sheet ── */
.sheet-veil{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150;opacity:0;pointer-events:none;transition:opacity .3s}
.sheet-veil.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:160;
  background:var(--bg2);border-radius:26px 26px 0 0;border:1px solid var(--border);border-bottom:none;
  padding:0;
  transform:translateY(105%);transition:transform .4s cubic-bezier(.32,1.2,.4,1);
  max-height:88vh;display:flex;flex-direction:column;
}
.sheet.open{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;border-radius:100px;background:var(--border);margin:10px auto 0;flex-shrink:0}
.sheet-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.sheet-close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:var(--card);color:var(--white);font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.sheet-hero{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.sheet-hero.ph{display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--acc-dim)}
.sheet-body{padding:18px 22px 0}
.sheet h3{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:1.3rem;margin-bottom:6px}
.sheet-price{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.1rem;color:var(--gold);margin-bottom:14px}
.sheet-desc{font-size:.84rem;color:var(--dim);line-height:1.6;font-weight:500;margin-bottom:20px}
.sheet-label{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc-light);margin-bottom:10px;
}
.sheet-hint{font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--dark-dim)}
.sheet-group{margin-bottom:22px}

/* ingredients you can tap off */
.ing-list{display:flex;flex-wrap:wrap;gap:8px}
.ing-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--card);border:1px solid var(--border);border-radius:100px;
  padding:7px 14px;font-size:.76rem;font-weight:600;color:var(--white);
  font-family:inherit;transition:.18s;
}
button.ing-pill{cursor:pointer}
button.ing-pill::before{content:'×';font-size:.95rem;line-height:1;color:var(--dark-dim);font-weight:800}
button.ing-pill:active{transform:scale(.94)}
button.ing-pill.off{
  color:var(--dark-dim);text-decoration:line-through;
  background:transparent;border-style:dashed;
}
button.ing-pill.off::before{content:'+';color:var(--acc-light)}
.ing-pill.fixed{opacity:.75}

/* add-extra + choice rows */
.opt-row{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:12px 14px;margin-bottom:8px;cursor:pointer;
  font:inherit;color:var(--white);text-align:left;transition:.18s;
}
.opt-row:active{transform:scale(.985)}
.opt-row.on{border-color:var(--acc);background:var(--acc-dim)}
.opt-box{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;
  color:transparent;            /* the tick only shows once the row is on */
}
.opt-box.radio{border-radius:50%}
.opt-row.on .opt-box{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.opt-name{flex:1;min-width:0;font-size:.82rem;font-weight:600}
.opt-price{font-family:'Archivo',sans-serif;font-weight:900;font-size:.8rem;color:var(--gold);white-space:nowrap}
.opt-max{font-size:.62rem;color:var(--dark-dim);font-weight:600;margin:-2px 0 10px}

/* similar */
.similar-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.similar-row::-webkit-scrollbar{display:none}
.similar-card{
  flex-shrink:0;width:120px;background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:10px;cursor:pointer;transition:transform .15s;text-align:left;color:var(--white);font:inherit;
}
.similar-card:active{transform:scale(.95)}
.similar-card img{width:100%;height:70px;border-radius:10px;object-fit:cover;margin-bottom:8px;background:var(--acc-dim)}
.similar-name{font-size:.72rem;font-weight:700;line-height:1.3;margin-bottom:4px}
.similar-price{font-family:'Archivo',sans-serif;font-weight:900;font-size:.76rem;color:var(--gold)}

/* sticky add-to-order bar */
.sheet-foot{
  flex-shrink:0;display:flex;align-items:center;gap:12px;
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);background:var(--bg2);
}
.qty{display:flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:100px;padding:4px}
.qty button{
  width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--white);
  font-size:1.15rem;font-weight:700;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;
}
.qty button:disabled{opacity:.3;cursor:default}
.qty span{min-width:22px;text-align:center;font-family:'Archivo',sans-serif;font-weight:900;font-size:.95rem}
.sheet-add{flex:1;padding:15px 18px}
.sheet-note{padding:0 22px 4px;font-size:.66rem;color:var(--dark-dim);font-weight:500;line-height:1.5}

/* ── cart ── */
.cart-fab{
  position:fixed;left:14px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:130;
  display:none;align-items:center;gap:9px;
  background:var(--acc);color:var(--acc-ink);border:none;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.8rem;
  padding:13px 18px;border-radius:100px;box-shadow:0 8px 26px rgba(255,201,60,.4);
  transition:transform .2s;
}
.cart-fab.show{display:flex}
.cart-fab:active{transform:scale(.94)}
.cart-count{
  background:var(--acc-ink);color:var(--acc);border-radius:100px;
  min-width:20px;height:20px;padding:0 6px;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;
}
.cart-box{
  position:fixed;left:0;right:0;bottom:0;z-index:170;
  background:var(--bg2);border:1px solid var(--border);border-bottom:none;
  border-radius:26px 26px 0 0;
  transform:translateY(110%);transition:transform .4s cubic-bezier(.32,1.2,.4,1);
  max-height:86vh;display:flex;flex-direction:column;
}
.cart-box.open{transform:translateY(0)}
.cart-head{padding:22px 22px 14px;border-bottom:1px solid var(--border);position:relative;flex-shrink:0}
.cart-head h3{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:1.25rem}
.cart-head p{font-size:.72rem;color:var(--dim);font-weight:500;margin-top:4px}
.cart-list{overflow-y:auto;padding:14px 22px 0;flex:1}
.cart-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px dashed var(--border)}
.cart-item-main{flex:1;min-width:0}
.cart-item-name{font-weight:700;font-size:.86rem}
.cart-item-mods{font-size:.7rem;color:var(--dim);line-height:1.55;margin-top:3px;font-weight:500}
.cart-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cart-item-price{font-family:'Archivo',sans-serif;font-weight:900;font-size:.88rem;color:var(--gold);white-space:nowrap}
.cart-del{background:none;border:none;color:var(--dark-dim);font-size:.68rem;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.cart-empty{text-align:center;color:var(--dim);font-size:.85rem;padding:36px 0 40px;font-weight:500}
.cart-foot{flex-shrink:0;padding:16px 22px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.cart-total span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700}
.cart-total b{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.5rem;color:var(--gold)}
.cart-note{font-size:.64rem;color:var(--dark-dim);font-weight:500;line-height:1.5;margin-top:10px;text-align:center}

@media(min-width:760px){
  .sheet,.cart-box{left:50%;right:auto;width:520px;transform:translate(-50%,105%)}
  .sheet.open,.cart-box.open{transform:translate(-50%,0)}
  .cart-fab{bottom:24px;left:40px}
}
@media print{.sheet,.sheet-veil,.cart-box,.cart-fab{display:none!important}}

/* ── "added — anything with that?" step ── */
.sheet-done{padding:26px 22px 8px;text-align:center}
.done-tick{
  width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  background:var(--acc);color:var(--acc-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:900;
  box-shadow:0 8px 24px rgba(255,201,60,.35);
}
.done-added{font-size:.8rem;color:var(--dim);font-weight:600;margin-bottom:20px}
.done-ask{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:1.2rem;line-height:1.15;margin-bottom:18px;
}
.done-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pair-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:10px;cursor:pointer;text-align:left;color:var(--white);font:inherit;
  transition:transform .15s,border-color .2s;
}
.pair-card:active{transform:scale(.95)}
.pair-card:hover:not(:disabled){border-color:var(--acc)}
.pair-card.added{border-color:var(--acc);background:var(--acc-dim);cursor:default}
.pair-card img{width:100%;height:68px;border-radius:10px;object-fit:cover;margin-bottom:8px;background:var(--acc-dim)}
.pair-name{font-size:.7rem;font-weight:700;line-height:1.3;margin-bottom:7px;min-height:2.6em}
.pair-add{display:flex;align-items:center;justify-content:space-between;gap:6px}
.pair-add span{font-family:'Archivo',sans-serif;font-weight:900;font-size:.72rem;color:var(--gold)}
.pair-add b{
  width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--acc-ink);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;line-height:1;flex-shrink:0;
}