:root{
  --radius: 14px;
  --bg:#ffffff; --fg:#111; --muted:#666; --chip:#f0f0f0;
  --pill:#111; --pill-fg:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";}
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{position:sticky;top:0;z-index:50;background:#fff8;backdrop-filter: blur(6px);padding:8px 12px}
.lang-switch{display:flex;gap:8px;justify-content:flex-end}
.pill{border:0;border-radius:999px;background:var(--pill);color:var(--pill-fg);padding:8px 14px;cursor:pointer;}

.hero-wrap{ position:relative; overflow:hidden; }
.hero-img{width:100%; display:block; height:48vh; object-fit:cover;}
.status-badge{
  position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
  background:#000c; color:#fff; padding:10px 18px; border-radius:999px; font-weight:700; z-index:2;
}
.hero-fade{
  position:absolute; left:0; right:0; bottom:0;
  height:28%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 85%, #fff 100%);
  pointer-events:none; z-index:1;
}

.hours-chip{display:inline-block;background:var(--chip);padding:8px 12px;border-radius:999px;color:#333}

.duo-row{display:grid;gap:16px;grid-template-columns: 1fr 1fr;margin:20px 0 32px}
@media (max-width:820px){.duo-row{grid-template-columns:1fr} .hero-img{height:38vh}}

.grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:720px){.grid{grid-template-columns:1fr}}

.card{border-radius:var(--radius);border:1px solid #eee;overflow:hidden;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:14px}
.card-body{display:flex;flex-direction:column;gap:8px}
.title{font-weight:700}
.allergen{color:var(--muted);font-size:14px}
.price{font-weight:700}
.qty-line{display:flex;align-items:center;gap:10px}
.qty-btn{width:36px;height:36px;border-radius:10px;border:1px solid #ddd;background:#fafafa;cursor:pointer;font-size:22px;line-height:0}
.qty{min-width:22px;text-align:center}

.sec-title{margin:0 0 6px}
.sec-sub, .sec-note{margin:4px 0;color:#333}

.order-grid{display:grid;grid-template-columns: 1fr 1fr auto;gap:16px;align-items:end}
@media (max-width:920px){.order-grid{grid-template-columns:1fr;align-items:stretch}}

.form label{display:block;margin-bottom:6px;color:#333}
.form input, .form select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #ddd;background:#fff}
.submit-btn{padding:12px 18px;border-radius:12px;border:0;background:#111;color:#fff;cursor:pointer}

.payment-wrap{position:relative;border:1px dashed #ddd;border-radius:12px;padding:16px;grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff}
.payment-wrap .qr{width:140px;height:140px;object-fit:contain;border-radius:12px;border:1px solid #eee;background:#fff}
.pending-veil.veil-on::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.7);backdrop-filter: blur(2px);}

.marquee{margin-top:10px;padding:10px;border-radius:8px;background:#fff6c7;color:#111;font-weight:600;white-space:nowrap;overflow:hidden}
.marquee > span{display:inline-block;padding-left:100%;animation:slide 12s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}