header.top{background:var(--char);color:#fff;position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top)}
.top .in{max-width:880px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.25rem;letter-spacing:.2px}
.brand img{width:36px;height:36px;border-radius:10px}
.brand b{color:var(--mustard)}
.track-btn{background:transparent;border:2px solid #ffffff44;color:#fff;border-radius:999px;padding:.4rem .85rem;font-weight:700;font-size:.85rem}
.hero{background:linear-gradient(160deg,var(--ember) 0%,var(--flame) 100%);color:#fff;padding:2rem 1rem 3.2rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:28px;background:var(--cream);border-radius:28px 28px 0 0}
.hero .in{max-width:880px;margin:0 auto;position:relative;z-index:1}
.hero h1{margin:0 0 .4rem;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.05;font-weight:900}
.hero p{margin:0;max-width:34ch;font-size:1.05rem;opacity:.95}
.hero .tag{display:inline-block;background:var(--mustard);color:var(--char);font-weight:800;padding:.25rem .7rem;border-radius:999px;font-size:.8rem;margin-bottom:.8rem}
main{max-width:880px;margin:0 auto;padding:0 1rem 7rem}
h2.sec{font-size:1.3rem;margin:1.4rem 0 .8rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.9rem}
.card{background:#fff;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);display:flex;gap:.9rem;align-items:center;border:2px solid transparent}
.card.in-cart{border-color:var(--flame)}
.card .emo{flex:none;width:68px;height:68px;border-radius:18px;background:var(--sauce);display:grid;place-items:center;font-size:2.2rem}
.card .info{flex:1;min-width:0}
.card h3{margin:0;font-size:1.05rem}
.card .desc{margin:.1rem 0 .3rem;color:var(--muted);font-size:.85rem}
.price{font-weight:900;color:var(--ember)}
.qty{display:flex;align-items:center;gap:.5rem}
.qty button{width:36px;height:36px;border-radius:50%;border:0;background:var(--char);color:#fff;font-size:1.2rem;font-weight:800;line-height:1}
.qty button.plus{background:var(--ember)}
.qty span{min-width:1.4rem;text-align:center;font-weight:800}
.add{background:var(--ember);color:#fff;border:0;border-radius:999px;padding:.5rem 1rem;font-weight:800}
.empty,.error{background:#fff;border-radius:var(--radius);padding:1.4rem;text-align:center;color:var(--muted)}
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,#fff7eaee 35%)}
.cartbar button{width:100%;max-width:880px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;
  background:var(--char);color:#fff;border:0;border-radius:999px;padding:.95rem 1.3rem;font-weight:800;font-size:1.02rem;box-shadow:var(--shadow)}
.cartbar .cnt{background:var(--mustard);color:var(--char);border-radius:999px;padding:.1rem .6rem;margin-right:.6rem}
.sheet-bg{position:fixed;inset:0;background:#0008;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--cream);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:1.2rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom))}
.sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.sheet h2{margin:0}
.x{background:#fff;border:0;border-radius:50%;width:38px;height:38px;font-size:1.2rem}
.line{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.line .n{flex:1;font-weight:700}
.line .n small{display:block;color:var(--muted);font-weight:400}
.total{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:900;padding:.9rem 0}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.4rem}
.pay label{border:2px solid var(--line);background:#fff;border-radius:12px;padding:.6rem .3rem;text-align:center;font-weight:700;font-size:.85rem;cursor:pointer}
.pay input{position:absolute;opacity:0;pointer-events:none}
.pay input:checked+span{color:var(--ember)}
.pay label:has(input:checked){border-color:var(--ember);background:var(--sauce)}
.pay label:focus-within{outline:3px solid var(--flame);outline-offset:2px}
.hint{color:var(--muted);font-size:.82rem;margin:.2rem 0 1rem}
.done{text-align:center;padding:.5rem 0}
.done .big{font-size:3rem}
.done .num{font-size:1.9rem;font-weight:900;color:var(--ember)}
.steps{display:flex;flex-direction:column;gap:.5rem;text-align:left;margin:1rem 0;background:#fff;border-radius:14px;padding:1rem}
.steps div{display:flex;gap:.6rem;align-items:center}
.dot{width:14px;height:14px;border-radius:50%;background:var(--line);flex:none}
.dot.on{background:var(--ok)}
.dot.bad{background:var(--bad)}
.dot.now{background:var(--mustard);box-shadow:0 0 0 4px #ffb81c44}
.badge{display:inline-block;border-radius:999px;padding:.15rem .7rem;font-weight:800;font-size:.8rem}
.badge.pending{background:#fff0c4;color:var(--warn)}
.badge.confirmed{background:#d9f3e3;color:var(--ok)}
.badge.cancelled{background:#fbe0da;color:var(--bad)}
.badge.paid{background:#d9f3e3;color:var(--ok)}
.badge.unpaid{background:#eee3d4;color:var(--muted)}
footer.f{text-align:center;color:var(--muted);font-size:.8rem;padding:1rem 1rem 6rem}
.install{display:none;margin:1rem 0 0}

@media(max-width:480px){
  .top .in{padding:.55rem .85rem}
  .brand{font-size:1.08rem}
  .hero{padding:1.5rem .9rem 2.8rem}
  .hero h1{font-size:clamp(1.85rem,9vw,2.45rem)}
  main{padding-right:.85rem;padding-left:.85rem}
  .grid{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .card{gap:.65rem;padding:.75rem}
  .card .emo{width:54px;height:54px;border-radius:15px;font-size:1.8rem}
  .card h3{font-size:.98rem}
  .add{padding:.5rem .8rem}
  .sheet-bg{align-items:flex-end}
  .sheet{max-height:94dvh;overflow-y:auto;overscroll-behavior:contain;padding:.85rem .9rem calc(1rem + env(safe-area-inset-bottom))}
  .pay{grid-template-columns:1fr}
  .pay label{padding:.75rem;text-align:left}
  .line{gap:.45rem}
  .line .price{font-size:.9rem;text-align:right}
}