/* ===== Glass look (Figma: Light -45°/80%, Frost 4). Tweak these two numbers: ===== */
:root{--glass-frost:4px;--glass-light:.8}
.glass{position:relative;-webkit-backdrop-filter:blur(var(--glass-frost)) saturate(1.6);backdrop-filter:blur(var(--glass-frost)) saturate(1.6);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,calc(var(--glass-light)*.45)),inset -1px -1px 1px -.5px rgba(255,255,255,calc(var(--glass-light)*.12)),0 6px 20px rgba(0,0,0,.25)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,calc(var(--glass-light)*.14)),transparent 45%)}

/* Header bag button + badge */
.bag-btn{position:relative}
.bag-btn img{width:30px;height:30px;object-fit:contain;display:block}
.badge{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--lent);color:#121212;font:600 12px/18px var(--cond);text-align:center}
.badge[hidden]{display:none}

/* Bag screen */
.bag-overlay{position:fixed;inset:0;background:rgba(20,14,8,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:200}
.bag{position:fixed;left:50%;top:0;bottom:0;width:100%;max-width:430px;transform:translate(-50%,100%);z-index:210;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.25,1)}
.bag-open .bag{transform:translate(-50%,0)}
.bag-open .bag-overlay{opacity:1;pointer-events:auto}
.bag-head{display:flex;justify-content:space-between;align-items:center;padding:20px 16px 14px}
.bag-head h2{font-family:var(--cond);font-weight:500;font-size:20px}
.bag-close{background:none;border:none;color:var(--white);display:flex;padding:4px;cursor:pointer}
.bag-list{flex:1;overflow-y:auto;padding:0 12px;display:flex;flex-direction:column;gap:12px}
.bag-empty{margin:auto;color:var(--gray);font-size:20px}

/* Item card: 100px, radius 10, #312316 @40% */
.bag-item{flex:none;height:100px;padding:8px;display:flex;gap:12px;border-radius:10px;background:rgba(49,35,22,.4)}
.bag-thumb{flex:none;width:74px;height:84px;border-radius:5px;overflow:hidden;background:linear-gradient(135deg,#1a1510,#2d241a)}
.bag-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bag-info{display:flex;flex-direction:column;justify-content:center;gap:4px}
.bag-info b{font-weight:700;font-size:16px;line-height:1.1}
.bag-info span{font-weight:500;font-size:14px}
.qty{width:64px;height:24px;border-radius:30px;background:rgba(49,35,22,.6);display:flex;align-items:center;justify-content:space-between;padding:0 4px;margin-top:2px}
.qty button{width:22px;height:22px;background:none;border:none;color:var(--white);font-size:20px;line-height:1;cursor:pointer}
.qty em{font-style:normal;font-size:14px}

/* Ticker inside bag: #312316 @70% */
.bag-lent{flex:none;height:28px;margin:12px 12px;border-radius:10px;background:rgba(49,35,22,.7);overflow:hidden;white-space:nowrap;display:flex;align-items:center;font-family:var(--xcond);font-weight:500;font-size:16px;color:var(--accent)}
.bag-lent .lent-track span{line-height:28px}

/* Subtotal box: 129px = 12 pad + 36 subtotal + 8 gap + 40 button + 33 bottom */
.bag-sum{flex:none;height:129px;margin:0 12px 28px;padding:12px 12px 0;border-radius:24px;background:rgba(49,35,22,.7)}
.sum-row{height:36px;display:flex;justify-content:space-between}
.sum-row b{display:block;font-weight:600;font-size:18px;line-height:20px}
.sum-row span{display:block;font-weight:400;font-size:14px;line-height:16px}
.checkout{display:flex;align-items:center;justify-content:center;height:40px;margin-top:8px;border-radius:40px;background:rgba(106,76,44,.8);color:var(--white);font-weight:600;font-size:16px;text-decoration:none;cursor:pointer}
.checkout.disabled{opacity:.4;pointer-events:none}
.bag-sum p{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-weight:500;font-size:11px;line-height:13px}