/* ============================================================
   Cart drawer + nav cart button — everything .cart-* / .nav-cart
------------------------------------------------------------
   Lifted out of site.css into its own file because index.html does not load
   site.css — it carries an inline copy of the rest of the shell — and the
   cart now has to appear in the header of EVERY page, homepage included.
   Same reasoning as assets/nav-dd.css: a surface that must look identical on
   all sixteen pages gets exactly one source of truth rather than a copy in
   each place, which is how .chips, .faq-help and the .pdp-left collapse all
   drifted before.

   Load AFTER site.css. The header-collapse rules that also touch .nav-cart
   stay in site.css (and in index.html's inline block) because they are shared
   with .logo and belong with the header, not with the drawer — they are all
   (0,2,0) or tighter, so they still win over anything here regardless of order.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   Cart drawer — .cart-* (see assets/cart.js)
   ═══════════════════════════════════════════════════════════════ */
.nav-cart{position:relative;background:none;border:none;color:var(--text);cursor:pointer;padding:6px;display:inline-flex;align-items:center;transition:color .15s}
.nav-cart:hover{color:var(--green)}
.nav-cart svg{width:22px;height:22px;display:block}
.cart-count{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;background:var(--green);color:var(--ink);border-radius:999px;font-size:10.5px;font-weight:800;display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(74,214,255,.4)}
.cart-overlay{position:fixed;inset:0;background:rgba(6,6,9,.6);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:410px;max-width:93vw;background:#141418;color:#fff;z-index:230;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border-left:1px solid var(--line)}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)}
.cart-head h3{font-family:var(--head);font-size:18px;font-weight:800;letter-spacing:-.02em}
.cart-close{background:none;border:none;color:var(--muted-2);font-size:26px;line-height:1;cursor:pointer}
.cart-close:hover{color:#fff}
.cart-items{flex:1;overflow-y:auto;padding:14px 20px}
.cart-empty{text-align:center;padding:56px 20px;color:var(--muted)}
.cart-empty svg{width:46px;height:46px;stroke:var(--muted-2);margin:0 auto 14px;display:block}
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item-ico{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.cart-item-ico svg{width:22px;height:22px}
.cart-item-info{flex:1;min-width:0}
.cart-item-title{font-size:14px;font-weight:700;color:#fff}
.cart-item-meta{font-size:12px;color:var(--muted);word-break:break-all;margin-top:2px}
.cart-item-price{font-size:14px;font-weight:800;margin-top:3px;color:var(--green)}
.cart-item-remove{background:none;border:none;color:var(--muted-2);font-size:20px;line-height:1;align-self:flex-start;cursor:pointer}
.cart-item-remove:hover{color:#f87171}
.cart-foot{padding:20px;border-top:1px solid var(--line)}
.cart-subtotal{display:flex;justify-content:space-between;font-weight:800;font-size:18px;margin-bottom:14px;color:#fff}
.cart-subtotal span:last-child{color:var(--green)}
.cart-checkout{width:100%;padding:15px;border-radius:12px;background:var(--green);color:var(--ink);font-family:var(--head);font-weight:800;font-size:15px;border:none;cursor:pointer;transition:background .16s,transform .15s}
.cart-checkout:hover:not(:disabled){background:#2fc3f0;transform:translateY(-1px)}
.cart-checkout:disabled{opacity:.75;cursor:default;transform:none}
.cart-note{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}
@media (prefers-reduced-motion: reduce){ .cart-drawer,.cart-overlay{transition:none} }

@media (min-width: 961px) {
     the edge against the logo's 22px on the other side, and closer to the edge
     (16px) than to its own neighbour (24px). It read as shoved into the corner.
     Margin here rather than nav-in padding. Not applied below 961px: there the
     burger follows the cart, so the cart is not the element meeting the edge.
     (This used to note that 11 pages had no cart to worry about. They all have
     one now.) */
  .nav-cart{margin-right:6px}
}

@media (max-width: 640px) {
  /* header tap targets: padding-based hit expansion, compensating margins keep layout identical */
  header.nav .logo{display:inline-flex;align-items:center;padding:10px 0;margin:-10px 0}
  .nav-cart{padding:11px;margin:-5px}
  .cart-close{padding:12px;margin:-12px}
  .cart-item-remove{padding:10px;margin:-10px}
}