/* ═════════════════════════════════════════════════════════════════════════════
   cart.css — the shopper's cart (assets/js/cart.js): floating button, drawer, overlay, toasts.
   ONE definition, linked by every page that loads cart.js (index, public/store, public/product,
   shop). It used to be pasted into style.css and product.css; keep it here only.
   ═════════════════════════════════════════════════════════════════════════════ */

/* BRIDGE — assets/js/cart.js builds the shopper's floating cart button with style.cssText
   (purple, 60px, z-index 9999, scales on hover). It now also gives every element a cart-js-*
   class (toggle, badge, drawer, overlay, toasts); the classic values stay inline, which is why
   !important is still needed here. It sits below the cart drawer's own overlay (9998). */
.cart-js-toggle {
    width: 3.25rem !important;
    height: 3.25rem !important;
    right: var(--space-4) !important;
    bottom: var(--space-4) !important;
    background: var(--color-action) !important;
    color: var(--color-action-fg) !important;
    box-shadow: var(--shadow-overlay) !important;
    transform: none !important;
    z-index: var(--z-toast) !important;
}

.cart-js-badge {
    background: var(--color-danger-fg) !important;
    border-color: var(--color-bg-surface) !important;
    font-variant-numeric: tabular-nums;
}

/* BRIDGE — the cart drawer, its overlay and its toasts (cart.js). !important only where cart.js
   writes the property inline: drawer background, box-shadow, transition; overlay background,
   transition; toast container bottom/right; toast background, color, border-radius, box-shadow,
   font-weight, backdrop-filter, transition; the no-image placeholder's color. Left alone because
   the script animates them: drawer `right`, overlay opacity/pointer-events, toast
   transform/opacity, and every `display`. Everything else beats the script's injected
   <style id="cart-styles"> by specificity, so every rule is scoped under .cart-js-drawer /
   .cart-js-toasts (pos.php has its own .cart-header). */
.cart-js-drawer {
    background: var(--color-bg-surface) !important;
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-overlay) !important;
    transition: right var(--duration-base) var(--ease-out) !important;
    color: var(--color-fg-default);
}
.cart-js-overlay {
    background: var(--color-bg-overlay) !important;
    transition: opacity var(--duration-base) var(--ease-out) !important;
}
.cart-js-drawer .cart-header { padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.cart-js-drawer .cart-header h2 { font-size: var(--text-h3); font-weight: 600; color: var(--color-fg-default); text-transform: none; letter-spacing: 0; }
.cart-js-drawer .close-cart {
    width: var(--control-lg); height: var(--control-lg); border: 0; border-radius: var(--radius-md);
    background: transparent; color: var(--color-fg-muted); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.cart-js-drawer .cart-body { padding: 0 var(--space-4); background: var(--color-bg-surface); }
.cart-js-drawer .cart-vendor-group { background: none; border-radius: 0; box-shadow: none; padding: var(--space-4) 0; margin: 0; border-bottom: 1px solid var(--color-border); }
.cart-js-drawer .cart-vendor-title {
    margin: 0 0 var(--space-2); padding: 0; border: 0; color: var(--color-fg-muted);
    font-size: var(--text-small); font-weight: 500; text-transform: none; letter-spacing: 0;
}
.cart-js-drawer .cart-item { gap: var(--space-3); margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.cart-js-drawer .cart-item-img { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-sm); background: var(--color-bg-muted); color: var(--color-fg-subtle) !important; }
.cart-js-drawer .cart-item-info { min-width: 0; }
.cart-js-drawer .cart-item-title { font-size: var(--text-ui); font-weight: 500; line-height: var(--leading-snug); color: var(--color-fg-default); }
.cart-js-drawer .cart-item-remove {
    flex: none; width: var(--control-sm); height: var(--control-sm); margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 var(--space-2); padding: 0;
    border-radius: var(--radius-sm); color: var(--color-fg-subtle); font-size: 1.25rem;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.cart-js-drawer .cart-item-price { color: var(--color-fg-default); font-size: var(--text-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-js-drawer .cart-qty-ctrl { gap: var(--space-2); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.cart-js-drawer .cart-qty-ctrl span { min-width: 1.5rem; text-align: center; font-weight: 500; }
.cart-js-drawer .cart-qty-btn {
    width: var(--control-lg); height: var(--control-lg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
    background: var(--color-bg-surface); color: var(--color-fg-default); font-size: 1.125rem; font-weight: 500;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.cart-js-drawer .cart-vendor-footer { margin-top: var(--space-3); padding-top: 0; border-top: 0; color: var(--color-fg-muted); font-size: var(--text-ui); font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-js-drawer .cart-vendor-footer span:last-child { color: var(--color-fg-default); font-weight: 600; }
.cart-js-drawer .cart-global-footer { margin: 0; padding: var(--space-4) 0; background: none; border-top: 0; gap: var(--space-3); }
.cart-js-drawer .cart-global-total { font-size: 1.25rem; font-weight: 600; color: var(--color-fg-default); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cart-js-drawer .wa-checkout-btn {
    min-height: var(--control-lg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--color-money); color: var(--color-money-fg); box-shadow: none;
    font-size: 1rem; font-weight: 600; transition: background-color var(--duration-fast) var(--ease-out);
}
.cart-js-drawer .wa-checkout-btn:active { transform: scale(0.97); }
.cart-js-drawer .wa-checkout-btn[aria-disabled="true"],
.cart-js-drawer .wa-checkout-btn[aria-disabled="true"]:hover { background: var(--color-bg-muted); color: var(--color-fg-muted); cursor: not-allowed; transform: none; }
.cart-js-drawer .cart-vendor-group .wa-checkout-btn { width: 100%; margin-top: var(--space-3); }
.cart-js-drawer .cart-item-vendor { color: var(--color-fg-muted); font-size: var(--text-ui); }
.cart-js-drawer .cart-many-note { color: var(--color-fg-muted); font-size: var(--text-ui); margin: var(--space-3) 0 0; }
.cart-js-drawer .btn-clear-cart {
    min-height: var(--control-lg); border: 1px solid var(--color-danger-border); border-radius: var(--radius-md);
    background: var(--color-bg-surface); color: var(--color-danger-fg); font-size: var(--text-ui); font-weight: 500;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.cart-js-drawer .empty-cart { color: var(--color-fg-muted); }
/* The script's own :hover rules would otherwise still apply; neutralise, then restate for fine pointers. */
.cart-js-drawer .close-cart:hover { background: transparent; color: var(--color-fg-muted); }
.cart-js-drawer .cart-item-remove:hover { color: var(--color-fg-subtle); }
.cart-js-drawer .cart-qty-btn:hover { background: var(--color-bg-surface); }
.cart-js-drawer .wa-checkout-btn:hover { background: var(--color-money); transform: none; }
.cart-js-drawer .btn-clear-cart:hover { background: var(--color-bg-surface); color: var(--color-danger-fg); }
@media (hover: hover) and (pointer: fine) {
    .cart-js-drawer .close-cart:hover { background: var(--color-bg-muted); color: var(--color-fg-default); }
    .cart-js-drawer .cart-item-remove:hover { background: var(--color-danger-bg); color: var(--color-danger-fg); }
    .cart-js-drawer .cart-qty-btn:hover { background: var(--color-bg-muted); }
    .cart-js-drawer .wa-checkout-btn:hover { background: var(--color-money-hover); }
    .cart-js-drawer .btn-clear-cart:hover { background: var(--color-danger-bg); }
}

/* Toasts sit above the floating cart button instead of on top of it. */
.cart-js-toasts {
    right: var(--space-4) !important;
    bottom: calc(var(--space-4) * 2 + 3.25rem) !important;
    max-width: calc(100vw - var(--space-4) * 2);
}
.cart-js-toast {
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-overlay) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: var(--text-ui);
    font-weight: 500 !important;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important;
}
.cart-js-toast svg { flex: none; }
.cart-js-toast--success { background: var(--color-bg-inverse) !important; color: var(--color-fg-inverse) !important; }
.cart-js-toast--error { background: var(--color-danger-fg) !important; color: var(--color-fg-inverse) !important; }