:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #0b0c10; color: #e9eef6; }
.top { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid #1b2230; position:sticky; top:0; background:#0b0c10; }
h1 { margin:0; font-size:20px; }
h2 { margin:0 0 12px; font-size:16px; }
.muted { color:#a9b4c5; }
.small { font-size:12px; }
.grid { display:grid; gap:16px; padding:16px; grid-template-columns: 1.6fr 1fr; }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }
.card { background:#111522; border:1px solid #1b2230; border-radius:14px; padding:14px; }
.menu { display:flex; flex-direction:column; gap:10px; }
.item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid #1b2230; border-radius:12px; }
.item strong { font-weight:650; }
.item .price { color:#cfe3ff; }
.controls { display:flex; align-items:center; gap:8px; }
.qty { min-width:24px; text-align:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid transparent; cursor:pointer; text-decoration:none; font-weight:650; }
.btn-sm { padding:6px 10px; border-radius:10px; }
.btn-ghost { background:transparent; border-color:#1b2230; color:#e9eef6; }
.btn-whats { background:#16a34a; color:white; }
.cart { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.cartRow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid #1b2230; border-radius:12px; }
.form { display:flex; flex-direction:column; gap:10px; margin:10px 0; }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; }
input { padding:10px; border-radius:12px; border:1px solid #1b2230; background:#0b0c10; color:#e9eef6; }
.totals { display:flex; justify-content:space-between; padding:10px; border-top:1px solid #1b2230; margin-top:10px; }

.foot { padding:16px; text-align:center; border-top:1px solid #1b2230; }

#hero{
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #1b2230;
}
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(11,12,16,.85), rgba(11,12,16,.35));
  pointer-events:none;
}
.top{
  position:sticky;
  top:0;
  z-index:10;
}
.top{
  position:sticky;
  top:0;
}
#hero{
  position:sticky;
  top:0;
}
.heroText{ position:relative; z-index:1; }
#whatsBtnTop{ position:relative; z-index:1; }