/* Bag drawer styles extracted for maintainability */
:root{
  --ink:#0b0b0b; --muted:#6b6b6b; --line:#e9e9e9; --bg:#fff;
}
*{box-sizing:border-box}
.bag-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:.25s; z-index:1200; /* above header (z-index:1000) */
}
.bag-backdrop.is-open{opacity:1; pointer-events:auto}
.bag{
  position:fixed; top:0; right:0; bottom:0; width:min(560px, 100%);
  background:var(--bg); box-shadow:-30px 0 60px rgba(0,0,0,.25);
  transform:translateX(102%); transition:transform .33s cubic-bezier(.22,1,.36,1);
  display:grid; grid-template-rows:auto auto 1fr auto; border-radius:0; z-index:1300; /* above header */
}
.bag.is-open{transform:none}
.bag__head{display:flex; align-items:center; justify-content:space-between; padding:22px 22px 16px; border-bottom:1px solid var(--line)}
.bag__head h2{margin:0; font-size:18px; letter-spacing:.3px}
.bag__close{appearance:none; border:0; background:none; font-size:20px; cursor:pointer}
.bag__progress{padding:10px 22px 16px; border-bottom:1px solid var(--line)}
.bag__progress .bar{height:6px; background:#f0f0f0; border-radius:999px; overflow:hidden}
.bag__progress .bar span{display:block; height:100%; background:#111}
.bag__progress p{margin:8px 0 0; color:var(--muted); font-size:12px}
.bag__items{padding:14px 12px 8px; overflow:auto}
.bag-item{display:grid; grid-template-columns:88px 1fr auto; gap:12px; padding:14px; border:1px solid var(--line); border-radius:0; margin:10px}
.bag-item__img{width:88px; height:112px; object-fit:cover; border-radius:2px}
.bag-item__name{margin:0 0 4px; font-size:14px; font-weight:600}
.bag-item__variant{margin:0 0 8px; color:var(--muted); font-size:12px}
.bag-item__row{display:flex; align-items:center; gap:12px}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.qty__btn{width:28px;height:28px; border:0; background:#f6f6f6; cursor:pointer}
.qty__input{width:40px; height:28px; border:0; text-align:center; outline:none}
.link--muted{color:var(--muted); background:none; border:0; cursor:pointer}
.flag{font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--line)}
.flag--low{border-color:#d7b300}
.bag-item__price{font-weight:600; align-self:start}
.bag__foot{position:sticky; bottom:0; padding:14px 22px 20px; border-top:1px solid var(--line); background:#fff}
.totals{margin:0 0 12px}
.row{display:flex; justify-content:space-between; margin:6px 0}
.row--muted{color:var(--muted)}
.btn{width:100%; padding:14px 18px; border-radius:6px; border:1px solid #111; font-weight:600; letter-spacing:.3px; margin:8px 0; cursor:pointer}
.btn--primary{background:#111; color:#fff}
.btn--ghost{background:#fff; color:#111}
.small{color:var(--muted); font-size:12px; text-align:center; margin:6px 0 0}
@media (max-width:520px){ .bag{border-radius:0} }