*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:15px/1.5 system-ui,Segoe UI,Inter,Arial,sans-serif;
  color:#eef;
  --panel:rgba(15,20,27,.42);
  --bd:#2a3a4b;
  --bg:#0b0f14;
  background:#0b0f14;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.muted{color:#a9b2bf}
.nav{display:flex;gap:12px;align-items:center;padding:10px 20px;background:rgba(5,8,12,.8);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--bd)}
.brand{font-weight:800}
.spacer{flex:1}
.btn{background:#0a8d8d;border:0;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.btn.p{background:#0aa7a7}
.btn:disabled{opacity:.6;cursor:not-allowed}
.chip{display:inline-block;background:#20303f;color:#9fd;padding:1px 6px;border-radius:999px;margin-left:6px}
.card{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
}
.table{width:100%;border-collapse:collapse}
.table tr+tr td{border-top:1px solid #334}
.table td{padding:12px}
.links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none}
.drawer{position:fixed;right:0;top:0;height:100%;width:420px;background:#0c1218;border-left:1px solid #20303f;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;z-index:30}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #20303f}
.drawer .list{flex:1;overflow:auto}
.total{display:flex;justify-content:space-between;font-weight:700;margin-top:6px}
.hero{position:relative}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.65)),url('assets/bg_robot.png');
  background-size:cover;
  background-position:center top;
  filter:saturate(95%);
}
.hero .card{position:relative;max-width:1200px;margin:120px auto;border:1px solid rgba(255,255,255,.12);background:rgba(12,16,22,.75)}
.hero-img{position:static;display:block;width:100%;max-width:920px;margin:16px auto 0;border-radius:12px}

/* background robot across store - FIXED HEAD POSITION */
.global-bg{
  position:fixed;
  inset:0;
  background:url('bg_robot.png') center 30%/cover no-repeat;
  z-index:-1;
  opacity:.22;
  pointer-events:none;
}

/* hero image fallback */
.hero-bg{
  background-image:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55)),url('hero_cart.png');
  background-size:cover;
  background-position:center top;
}

/* payment row */
.pp-inline{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.pp-box{display:inline-block;min-height:36px;min-width:150px}
.btn.bank{background:transparent;border:1px solid var(--bd);color:#9fd}
.btn.light{background:#e5e7eb;color:#111}
.pp-btn{min-width:120px}

/* cart qty controls */
.qty{display:flex;gap:6px;align-items:center}
.qty .num{min-width:24px;text-align:center;font-weight:700}
.list .row{display:flex;justify-content:space-between;align-items:center;margin:8px}