/* ==========================================================================
   bag.css · Sacola lateral e aviso (toast)
   ========================================================================== */
/* sacola */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(23,22,20,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.scrim.on{opacity:1;visibility:visible;transition:opacity .3s}
.bag{position:fixed;top:0;right:0;bottom:0;z-index:85;width:min(440px,100%);background:var(--paper);display:flex;flex-direction:column;transform:translateX(104%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s;padding-top:env(safe-area-inset-top,0px);box-shadow:-30px 0 80px -40px rgba(0,0,0,.5)}
.bag.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bag-h{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.bag-h b{font:700 22px/1 var(--disp);letter-spacing:-.03em}
.bag-h small{display:block;margin-top:6px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.x svg{width:18px;height:18px}
.bag-l{flex:1;overflow:auto;padding:8px 22px;overscroll-behavior:contain}
.bi{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.bi .sw{width:44px;height:44px;border-radius:10px;background:var(--g)}
.bi b{display:block;font:650 15.5px/1.2 var(--disp)}
.bi small{display:block;margin-top:4px;font:500 10.5px/1.3 var(--mono);color:var(--mut)}
.bi .q{display:flex;align-items:center;gap:6px;margin-top:8px}
.bi .q button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);background:transparent;cursor:pointer;font:600 14px/1 var(--mono);padding:0}
.bi .q span{min-width:22px;text-align:center;font:600 13px/1 var(--mono)}
.bi .v{font:600 14px/1 var(--mono);text-align:right}
.empty{padding:50px 10px;text-align:center;color:var(--mut)}
.empty svg{width:56px;height:56px;margin:0 auto 14px;opacity:.5}
.bag-f{padding:18px 22px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:grid;gap:12px;background:var(--cream)}
.fr{font:500 11px/1.4 var(--mono);color:var(--mut)}
.fr .tr{height:6px;border-radius:9px;background:var(--line);margin-top:8px;overflow:hidden}
.fr .tr i{display:block;height:100%;width:0;background:var(--brown);border-radius:9px;transition:width .5s}
.tot{display:flex;justify-content:space-between;align-items:baseline}
.tot span{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.tot b{font:700 26px/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tot small{display:block;text-align:right;margin-top:5px;font:500 11px/1 var(--mono);color:var(--brown)}
.bag-f .btn{width:100%}
.bag-f .note{font:400 11.5px/1.45 var(--mono);color:var(--mut);text-align:center}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:95;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 13px/1 var(--mono);transition:opacity .3s,transform .3s;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}