/* POWPAX cart — nav button + slide-in drawer.
   Loaded by index.html and every product page; relies on the brand vars both already define. */

/* ---- nav button ---- */
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: .55em; font: 800 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--head); background: none; border: 0; padding: 0; cursor: pointer; transition: color .35s; }
.cart-btn:hover { color: var(--magenta-deep); }
.cart-btn:focus-visible { outline: 2px solid var(--magenta-deep); outline-offset: 4px; border-radius: 3px; }
.nav:not(.scrolled) .cart-btn { color: var(--pdp-navink, var(--head)); }
.cart-count { min-width: 1.65em; height: 1.65em; padding: 0 .4em; border-radius: 99px; background: var(--magenta-deep); color: var(--cream); font: 800 10px/1.65em var(--sans); letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; transform: scale(0); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.cart-count.is-on { transform: scale(1); }
.cart-count.is-bump { animation: cartBump .4s cubic-bezier(.16,1,.3,1); }
@keyframes cartBump { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* the cart button lives beside the nav list, not inside it — the list is display:none on
   phones, which left no way to open the cart there */
.nav-right { display: flex; align-items: center; gap: 2rem; }

/* ---- drawer ---- */
.cart-scrim { position: fixed; inset: 0; z-index: 190; background: hsl(240 3% 8% / .55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility .3s; }
.cart-scrim.is-open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 191; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--ink); color: var(--cream); transform: translateX(101%); transition: transform .38s cubic-bezier(.16,1,.3,1); box-shadow: -20px 0 60px hsl(240 3% 8% / .4); }
.cart-drawer.is-open { transform: none; }
.cart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.6rem 1.6rem 1.1rem; border-bottom: 1px solid hsl(40 33% 96% / .16); }
.cart-head h2 { font: 900 clamp(1.6rem, 4vw, 2.2rem)/1 var(--sans); text-transform: uppercase; letter-spacing: var(--track-display); color: var(--cream); }
.cart-close { background: none; border: 0; color: hsl(40 10% 62%); font: 800 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; padding: .5em; transition: color .2s ease-out; }
.cart-close:hover { color: var(--lime); }
.cart-close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.cart-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: .4rem 1.6rem 1rem; }
.cart-empty { display: grid; gap: 1.2rem; justify-items: start; padding: 3rem 0; }
.cart-empty p { color: hsl(40 10% 62%); font-weight: 500; line-height: 1.6; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid hsl(40 33% 96% / .12); }
.cart-line-media { width: 64px; aspect-ratio: 1; border-radius: 12px; background: var(--line-bg, hsl(240 3% 16%)); display: grid; place-items: center; overflow: clip; }
.cart-line-media img { width: 78%; height: 78%; object-fit: contain; }
.cart-line-info { display: grid; gap: .25rem; min-width: 0; }
.cart-line-name { font: 900 .95rem/1.15 var(--sans); text-transform: uppercase; letter-spacing: var(--track-tight); color: var(--cream); }
.cart-line-meta { font-weight: 600; font-size: .74rem; line-height: 1.4; color: hsl(40 10% 62%); }
.cart-line-tools { display: flex; align-items: center; gap: .8rem; margin-top: .35rem; }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid hsl(40 33% 96% / .22); border-radius: 99px; }
.cart-qty button { width: 28px; height: 28px; border: 0; background: none; color: var(--cream); font: 800 14px/1 var(--sans); cursor: pointer; border-radius: 99px; transition: background .18s ease-out; }
.cart-qty button:hover { background: hsl(40 33% 96% / .14); }
.cart-qty button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.cart-qty span { min-width: 2ch; text-align: center; font: 800 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.cart-remove { background: none; border: 0; color: hsl(40 10% 52%); font: 700 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; padding: .4em 0; transition: color .2s ease-out; }
.cart-remove:hover { color: var(--magenta); }
.cart-remove:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.cart-line-price { font: 900 .95rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--cream); white-space: nowrap; }

.cart-foot { flex: 0 0 auto; padding: 1.3rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom)); border-top: 1px solid hsl(40 33% 96% / .16); display: grid; gap: .9rem; }
.cart-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cart-sub-label { font: 800 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: hsl(40 10% 62%); }
.cart-sub-value { font: 900 1.5rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight); }
.cart-checkout { width: 100%; text-align: center; }
.cart-checkout[disabled] { opacity: .4; pointer-events: none; }
.cart-fine { font: 600 10px/1.6 var(--sans); color: hsl(40 10% 48%); text-wrap: pretty; }

/* toast on add */
.cart-toast { position: fixed; left: 50%; bottom: 1.4rem; z-index: 189; transform: translate(-50%, 140%); background: var(--lime); color: var(--ink); font: 800 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 1em 1.6em; border-radius: 99px; transition: transform .35s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.cart-toast.is-on { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-scrim, .cart-toast, .cart-count { transition: none; }
  .cart-count.is-bump { animation: none; }
}