/* The browser's top layer keeps the bag above the canvas and try-on controls. */
html.bag-open,html.bag-open body{overflow:hidden}
.bag-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(480px,100%);max-width:100%;height:100%;height:100dvh;max-height:100%;border:0;padding:0;background:#f5eee8;color:#2a1a20;overflow:hidden;font-family:Manrope,sans-serif}
.bag-dialog::backdrop{background:rgba(24,12,18,.42)}
.bag-sheet{height:100%;display:flex;flex-direction:column;animation:bag-in 260ms var(--ease)}
@keyframes bag-in{from{transform:translateX(40px);opacity:.7}to{transform:none;opacity:1}}
.bag-head{display:flex;align-items:center;justify-content:space-between;padding:calc(24px + env(safe-area-inset-top)) 24px 20px}
.bag-head h2{font-size:28px;font-weight:400;letter-spacing:-.03em}
.bag-head h2 span{font-size:16px;vertical-align:middle;margin-left:8px}
.bag-close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e8dfda;transition:transform 160ms var(--ease)}
.bag-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.bag-lines{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 24px}
.bag-line{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 0}
.bag-line img{width:84px;height:112px;object-fit:cover;border-radius:10px}
.bag-line h3{font-size:20px;font-weight:500;margin:0 0 5px}
.bag-detail p{font-size:12px;line-height:1.5;color:#6c565e}
.bag-qty{display:inline-flex;align-items:center;margin-top:8px;background:#eae1dc;border-radius:999px}
.bag-qty button{width:44px;height:44px;font-size:20px}
.bag-qty span{min-width:20px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.bag-amount{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;padding:8px 0 0}
.bag-amount strong{font-size:17px;font-weight:500}
.bag-remove{font-size:12px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.bag-foot{padding:24px 24px calc(24px + env(safe-area-inset-bottom));background:#eee5df}
.bag-total{display:flex;justify-content:space-between;font-size:20px}
.bag-total strong{font-weight:500}
.bag-note{font-size:12px;line-height:1.5;margin:14px 0 20px;color:#6c565e}
.bag-continue{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 20px;min-height:52px;background:#2a1a20;color:#f5eee8;border-radius:999px;font-size:14px;transition:transform 160ms var(--ease)}
.bag-empty{padding:70px 0;text-align:center}
.bag-empty h3{font-size:28px;font-weight:300;margin-bottom:12px}
.bag-empty p{font-size:14px;line-height:1.6}
.bag-dialog button{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.bag-dialog button:focus-visible{outline:2px solid #8e1846;outline-offset:3px}
.bag-close:active,.bag-continue:active{transform:scale(.97)}
@media(max-width:360px){.bag-head,.bag-foot{padding-left:16px;padding-right:16px}.bag-lines{padding:0 16px}.bag-line{gap:10px;grid-template-columns:64px minmax(0,1fr) auto}.bag-line img{width:64px;height:92px}.bag-detail p{font-size:11px}.bag-qty button{width:36px}}
@media(prefers-reduced-motion:reduce){.bag-sheet{animation:none}.bag-close,.bag-continue{transition:none}}