:root{
  --bg:#f7f8fb; --card:#fff; --ink:#111; --muted:#6b7280; --accent:#111;
  --p1:#ffe8ef; --p2:#e6f7ff; --p3:#e9ffe8; --p4:#fff6d9;
  --shadow:0 12px 28px rgba(0,0,0,.08); --r:20px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,pretendard,Segoe UI,Roboto,Apple SD Gothic Neo,sans-serif}
.topbar{position:sticky;top:0;z-index:20;display:flex;gap:10px;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));backdrop-filter:saturate(1.3) blur(6px)}
.shop{font-weight:900;letter-spacing:.2px}
.table{color:var(--muted);font-weight:700}
.scene{padding:14px 14px 120px;display:grid;gap:14px}
.title-xl{font-size:28px;font-weight:900;line-height:1.2}
.text-muted{color:var(--muted)}
.chips{display:flex;gap:10px;overflow:auto;padding:6px 2px}
.chip{border:0;padding:10px 14px;border-radius:999px;background:#fff;color:#333;box-shadow:var(--shadow);white-space:nowrap;cursor:pointer}
.chip.active{background:var(--accent);color:#fff}
.slider{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px}
@media (min-width:720px){.slider{grid-auto-columns:48%}}
.card{scroll-snap-align:center;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:grid;gap:12px;position:relative}
.thumb{aspect-ratio:4/3;border-radius:16px;display:grid;place-items:center;overflow:hidden}
.thumb img{max-width:88%;height:auto;display:block}
.tag{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.9);padding:6px 10px;border-radius:999px;font-weight:700}
.price{font-weight:900}
.add{position:absolute;right:16px;bottom:16px;border:0;border-radius:999px;background:#111;color:#fff;padding:12px 14px;cursor:pointer}
.grid{display:grid;gap:12px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:12px;display:grid;gap:8px}
.tile .thumb{background:#fff}
.detail{display:grid;gap:14px}
.qtyrow{display:flex;justify-content:center;align-items:center;gap:16px}
.qtybtn{width:44px;height:44px;border-radius:999px;border:0;background:#fff;box-shadow:var(--shadow);font-size:20px;cursor:pointer}
.qty{font-size:28px;font-weight:900}
.opt-scroller{display:grid;grid-auto-flow:column;gap:12px;overflow:auto;padding-bottom:4px}
.opt{min-width:96px;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:10px;display:grid;gap:6px;place-items:center}
.plate{min-height:120px;border-radius:16px;background:linear-gradient(180deg,var(--p2),#fff);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:10px}
.badge{background:#ffd642;color:#111;border-radius:999px;padding:4px 8px;font-weight:800}
.cartbar{position:fixed;left:12px;right:12px;bottom:12px;background:#111;color:#fff;border-radius:20px;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;box-shadow:var(--shadow)}
.cart-left{display:flex;gap:10px;align-items:center;background:transparent;border:0;color:#fff;cursor:pointer}
.cart-total{font-weight:900}
[data-bg="1"] .thumb{background:var(--p1)} [data-bg="2"] .thumb{background:var(--p2)}
[data-bg="3"] .thumb{background:var(--p3)} [data-bg="4"] .thumb{background:var(--p4)}
dialog{border:0;border-radius:16px;box-shadow:var(--shadow);padding:18px;max-width:560px}
.section{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:12px;display:grid;gap:8px}
.row{display:flex;justify-content:space-between;align-items:center}
.btn{border:0;border-radius:12px;padding:12px 14px;font-weight:900;cursor:pointer}
.btn.primary{background:#111;color:#fff} .btn.ghost{background:#fff}
input[type=datetime-local],input[type=text]{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:12px}

/* --- Patched: Centered black/yellow bar, full-width touch --- */
.cartbar{left:12px; right:12px; bottom:12px; display:flex; justify-content:center; gap:12px}
.cartbar .cart-left{flex:1; justify-content:center; background:#111; color:#fff; border-radius:20px; padding:14px 16px}
.cartbar .cart-total{background:#ffd642; color:#111; border-radius:16px; padding:12px 14px; min-width:110px; text-align:center}
.cartbar .cart-left, .cartbar .cart-total { cursor:pointer; }
.cartbar.fullbtn { left:0; right:0; border-radius:0; padding:0; }
.cartbar.fullbtn .cart-left { border-radius:0; padding:18px; font-size:18px; }

/* Splash full-screen */
.splash {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: #000;
}
.splash img { max-width: 100%; height: auto; }
.splash .skip {
  position: absolute; bottom: 18px;
  background: rgba(255,255,255,.15);
  color: #fff; border: 0; border-radius: 999px;
  padding: 10px 14px; font-weight: 800; cursor: pointer;
}