/* 10-cart.css — Cart drawer, the bottle that flies into it, and the toast. */

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(22,36,31,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:80}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(430px,100%);background:var(--paper);
  z-index:90;transform:translateX(100%);transition:transform .38s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--display);font-weight:400;font-size:25px;margin:0}
.freebar{padding:16px 24px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.freebar p{margin:0 0 9px;font-size:13.5px}
.freebar .track{height:6px;border-radius:4px;background:rgba(22,36,31,.13);overflow:hidden}
.freebar .track i{display:block;height:100%;width:0;background:var(--verdant);border-radius:0 4px 4px 0;transition:width .5s cubic-bezier(.22,1,.36,1)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 24px}
.line-item{display:grid;grid-template-columns:44px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center;animation:qin .35s ease both}
.li-art{width:44px}
.li-name{font-family:var(--display);font-size:18px;line-height:1.2}
.li-price{font-size:13.5px;opacity:.6;margin-top:3px}
.li-controls{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.qty{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px}
.qty button{width:28px;height:26px;font-size:15px;line-height:1}
.qty span{min-width:22px;text-align:center;font-size:14px;font-weight:600}
.remove{font-size:12.5px;opacity:.6;text-decoration:underline;text-underline-offset:2px}
.remove:hover{opacity:1;color:var(--pomegranate)}
.empty{text-align:center;padding:56px 20px}
.empty svg{width:64px;margin:0 auto 20px;opacity:.35}
.empty p{margin:0 0 20px;opacity:.7}
.drawer-foot{padding:20px 24px 26px;border-top:1px solid var(--line)}
.drawer-foot .row{display:flex;justify-content:space-between;font-size:15px;padding:5px 0}
.drawer-foot .row.total{font-size:20px;font-weight:600;padding-top:12px;margin-top:8px;border-top:1px solid var(--line)}
.checkout{width:100%;background:var(--ink);color:var(--paper);border-radius:999px;padding:15px;font-size:15px;font-weight:600;margin-top:16px;transition:background .2s}
.checkout:hover{background:var(--ink-3)}
.ship-note{font-size:13px;opacity:.62;text-align:center;margin:12px 0 0}

/* ---------- flying bottle + toast ---------- */
.flyer{position:fixed;z-index:130;pointer-events:none;border-radius:50%}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,calc(100% + 40px));
  background:var(--ink);color:var(--paper);padding:13px 24px;border-radius:999px;
  font-size:14.5px;font-weight:500;z-index:100;transition:transform .35s cubic-bezier(.22,1,.36,1);
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 40px);
}
.toast.show{transform:translate(-50%,0)}
.toast i{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}