/* JIAOZI — online ordering (dark) */
:root{
  --bg:#08080A; --panel:#131316; --panel-2:#191A1E;
  --text:#F3EAE0; --muted:#97908A; --gold:#E9B44C; --gold-2:#F7D992;
  --line:rgba(243,234,224,.10); --line-2:rgba(243,234,224,.06);
  --pad:clamp(16px,3.2vw,44px);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
img{max-width:100%;display:block}

/* nav */
.nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--pad);background:rgba(8,8,10,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
.brand{display:grid;line-height:1}
.brand__mark{font-family:Anton,Impact,sans-serif;letter-spacing:.16em;font-size:1.15rem}
.brand__sub{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.nav__right{display:flex;align-items:center;gap:1rem}
.nav__note{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cartbtn{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:#0A0A0B;
  border:0;border-radius:999px;padding:.55em 1em;font-size:.78rem;font-weight:700;letter-spacing:.04em;
}
.cartbtn b{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:#0A0A0B;color:var(--gold);font-size:.7rem}

/* hero */
main{max-width:1280px;margin-inline:auto;padding:clamp(1.6rem,4vw,3rem) var(--pad) 3rem}
.label{display:flex;align-items:center;gap:.6em;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.label .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.hero h1{
  font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.9;letter-spacing:-.01em;
}
.hero h1 em{color:var(--gold);font-style:normal}
.hero__sub{color:var(--muted);max-width:46ch;margin-top:1rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.6rem}
.chip{
  border:1px solid var(--line);background:transparent;border-radius:999px;padding:.5em 1em;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:.2s;
}
.chip:hover{border-color:rgba(233,180,76,.5);color:var(--text)}
.chip.is-on{background:var(--gold);border-color:var(--gold);color:#0A0A0B;font-weight:700}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;margin-top:1.6rem}
.card{
  background:var(--panel);border:1px solid var(--line-2);display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s,background .3s;overflow:hidden;
}
.card:hover{border-color:rgba(233,180,76,.35);transform:translateY(-3px);background:var(--panel-2)}
.card__media{position:relative;aspect-ratio:4/3.1;overflow:hidden;background:#0B0B0D}
.card__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.93) saturate(.98);transition:transform .8s}
.card:hover .card__media img{transform:scale(1.05)}
.card__media::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,#131316,transparent)}
.card__body{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.card__body h3{font-family:Anton,sans-serif;text-transform:uppercase;font-size:1.02rem;letter-spacing:.03em;font-weight:400}
.card__cat{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.5rem}
.price{color:var(--gold);font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums}
.add{
  border:1px solid var(--line);background:transparent;border-radius:999px;padding:.45em .9em;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:.2s;
}
.add:hover{background:var(--gold);border-color:var(--gold);color:#0A0A0B}
.add.is-in{background:rgba(233,180,76,.15);border-color:rgba(233,180,76,.6);color:var(--gold)}
.card.is-off{opacity:.45;pointer-events:none}
.card.is-off::before{content:"sold out";position:absolute;z-index:3;background:#0A0A0B;color:var(--muted);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.3em .6em}
.loading{color:var(--muted);font-size:.85rem;margin-top:1rem}

/* cart drawer */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:60;background:#0E0E11;
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .38s cubic-bezier(.2,1,.3,1);
  box-shadow:-30px 0 60px -40px rgba(0,0,0,.9);
}
.drawer.is-on{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;border-bottom:1px solid var(--line-2)}
.drawer__head h2{font-family:Anton,sans-serif;text-transform:uppercase;font-size:1.1rem;letter-spacing:.04em;font-weight:400}
.x{border:0;background:none;color:var(--muted);font-size:1rem;padding:.3rem .5rem;border-radius:8px}
.x:hover{background:rgba(255,255,255,.06);color:var(--text)}
.drawer__body{padding:1rem 1.1rem 2rem;overflow:auto;flex:1}
.empty{color:var(--muted);font-size:.85rem}
.ci{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding:.7rem 0;border-bottom:1px solid var(--line-2)}
.ci__name{font-size:.9rem;font-weight:550}
.ci__price{font-size:.85rem;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}
.ci__ctl{display:flex;align-items:center;gap:.3rem}
.ci__ctl button{width:26px;height:26px;border:1px solid var(--line);background:none;border-radius:7px;color:var(--muted)}
.ci__ctl button:hover{border-color:var(--gold);color:var(--gold)}
.ci__ctl span{min-width:22px;text-align:center;font-size:.85rem}

.checkout{margin-top:1rem;display:grid;gap:.6rem}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;background:#141418;padding:.25rem;border-radius:10px}
.seg__btn{border:0;background:none;border-radius:8px;padding:.55em;font-size:.8rem;font-weight:600;color:var(--muted)}
.seg__btn.is-on{background:var(--gold);color:#0A0A0B}
.f{display:grid;gap:.25rem}
.f span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.f span i{text-transform:none;letter-spacing:0;font-style:normal;opacity:.7}
.f input,.f select{
  background:#141418;border:1px solid var(--line);border-radius:9px;padding:.6em .7em;color:var(--text);font-size:.9rem;
}
.f input:focus,.f select:focus{outline:0;border-color:var(--gold)}
.totals{margin-top:.4rem;padding-top:.7rem;border-top:1px solid var(--line-2);display:grid;gap:.25rem}
.totals div{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}
.totals b{color:var(--text);font-variant-numeric:tabular-nums}
.totals .grand b{font-size:1.1rem;color:var(--gold)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;border-radius:10px;padding:.85em 1.2em;
  font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;transition:.2s;
}
.btn--gold{background:var(--gold);color:#0A0A0B}
.btn--gold:hover{background:var(--gold-2)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}
.fine{font-size:.68rem;color:var(--muted);line-height:1.5}

/* done modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(6,6,8,.86);backdrop-filter:blur(6px);display:none;place-items:center;padding:1rem}
.modal.is-on{display:grid}
.done{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.6rem;text-align:center}
.done h2{font-family:Anton,sans-serif;font-size:1.6rem;letter-spacing:.06em;color:var(--gold);margin:.2rem 0}
.done__sub{color:var(--muted);font-size:.84rem}
.steps{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.15rem;text-align:left}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.55rem .2rem;opacity:.4;border-top:1px solid var(--line-2);align-items:baseline}
.steps li b{grid-column:2;font-size:.84rem}
.steps li span{grid-column:2;font-size:.72rem;color:var(--muted)}
.steps li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted);grid-row:span 2;align-self:center}
.steps li.is-done{opacity:1}
.steps li.is-done::before{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.done__total{font-size:.9rem;color:var(--muted)}
.done__actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.link{background:none;border:0;color:var(--muted);font-size:.76rem;text-decoration:underline;margin-top:1rem}

/* footer + toast */
.foot{
  border-top:1px solid var(--line-2);padding:1.4rem var(--pad);display:flex;gap:1.5rem;flex-wrap:wrap;
  justify-content:space-between;font-size:.72rem;color:var(--muted);
}
.toast{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,150%);opacity:0;
  background:var(--gold);color:#0A0A0B;padding:.7rem 1.1rem;border-radius:999px;font-size:.78rem;font-weight:700;
  z-index:100;transition:.35s;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}

@media (max-width:640px){
  .nav__note{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
  .card__body h3{font-size:.9rem}
  .drawer{width:100%;height:92svh;top:auto;bottom:0;transform:translateY(102%);border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0}
  .drawer.is-on{transform:none}
}