/* ================================================================
   CART PAGE
   Fully JS-rendered from the Store API (cart-page.js) — same client
   the mini-cart drawer uses. Mobile-first: single column, sticky
   checkout bar; desktop adds a sticky order-summary sidebar.
   ================================================================ */

.cart-page {
    padding-block: var(--sp-6) var(--sp-12);
}

.cart-page__title {
    font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
    color: var(--color-text);
    margin-bottom: var(--sp-6);
}

/* Empty-cart state reads as a single centered moment, not a form to
   fill in — bigger, centered title with a small eyebrow above it,
   instead of the plain left-aligned heading the item-list view uses.
   :has() looks forward to #cart-root regardless of source order, so
   this works even though the title renders before it. */
.cart-page:has(.cart-layout--empty) .cart-page__title {
    text-align: center;
    font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
}

.cart-page__eyebrow {
    display: none;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: var(--sp-2);
}

.cart-page:has(.cart-layout--empty) .cart-page__eyebrow {
    display: block;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: start;
}

@media (min-width: 900px) {
    .cart-layout {
        grid-template-columns: 1fr 360px;
    }

    /* No order-summary column to balance against once the cart is
       empty — #cart-summary just sits there `hidden`, but the grid
       track it reserves doesn't collapse on its own, which is exactly
       the empty gray gap on the right this fixes. */
    .cart-layout--empty {
        grid-template-columns: 1fr;
    }
}

/* ── Line items ───────────────────────────────────────────────── */

.cart-items {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cart-item {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-bottom: 1px solid var(--color-border);
    align-items: flex-start;
}

.cart-item:last-child { border-bottom: none; }

.cart-item__img {
    width: 84px;
    height: 84px;
    border-radius: var(--r-md);
    /* White, not gray — matches product-card.css's __img-wrap so the
       background-removal cutouts' edge fringe doesn't show as a halo. */
    background: var(--color-white);
    overflow: hidden;
}

.cart-item__img img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-1); }

.cart-item__info { min-width: 0; }

.cart-item__name {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    line-height: var(--lh-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.cart-item__variation {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-2);
}

.cart-item__unit-price {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-3);
}

.cart-item__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--r-full);
}

.cart-item__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    transition: background var(--t-fast), transform var(--t-press);
}

.cart-item__qty-btn:hover { background: var(--color-gray-100); }
.cart-item__qty-btn:active { transform: scale(0.9); }

.cart-item__qty-val {
    min-width: 1.5rem;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
}

.cart-item__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.cart-item__total {
    font-size: var(--text-md);
    font-weight: var(--fw-black);
    color: var(--color-text);
    white-space: nowrap;
}

.cart-item__remove {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    transition: color var(--t-fast), transform var(--t-press);
}

.cart-item__remove:hover { color: #ef4444; }
.cart-item__remove:active { transform: scale(0.95); }
.cart-item__remove svg { width: 13px; height: 13px; }

.cart-item.is-pending { opacity: 0.5; pointer-events: none; transition: opacity var(--t-fast); }

/* ── Empty state ─────────────────────────────────────────────── */

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-4);
    padding: var(--sp-16) var(--sp-4);
    background: var(--color-surface);
    border-radius: var(--r-xl);
}

.cart-empty__icon {
    width: 80px;
    height: 80px;
    border-radius: var(--r-full);
    background: var(--color-blue-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue);
}

.cart-empty__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.cart-empty__sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 32ch;
}

.cart-empty__cta {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-8);
    background: transparent;
    border: 1.5px solid var(--color-blue);
    color: var(--color-blue);
    border-radius: var(--r-full);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-press);
}

.cart-empty__cta:hover { border-color: var(--color-blue-dark); color: var(--color-blue-dark); }
.cart-empty__cta:active { transform: scale(0.97); }

/* ── Order summary ───────────────────────────────────────────── */

.cart-summary {
    background: var(--color-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

@media (min-width: 900px) {
    .cart-summary { position: sticky; top: calc(var(--utility-bar-h) + var(--nav-h) + var(--sp-4)); }
}

.cart-summary__title {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.cart-summary__row--discount { color: #16a34a; }

.cart-summary__row--total {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-md);
    font-weight: var(--fw-black);
    color: var(--color-text);
}

.cart-summary__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ── Coupon ──────────────────────────────────────────────────── */

.cart-coupon {
    display: flex;
    gap: var(--sp-2);
}

.cart-coupon__input {
    flex: 1;
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: var(--text-sm);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--t-fast);
}

.cart-coupon__input:focus { outline: none; border-color: var(--color-blue); }

.cart-coupon__submit {
    flex-shrink: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-navy);
    color: var(--color-white);
    border: none;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-press);
}

.cart-coupon__submit:hover { background: var(--color-navy-light); }
.cart-coupon__submit:active { transform: scale(0.96); }
.cart-coupon__submit:disabled { opacity: 0.5; cursor: not-allowed; }

.cart-coupon__msg {
    font-size: var(--text-xs);
    margin-top: calc(-1 * var(--sp-2));
}

.cart-coupon__msg--error { color: #dc2626; }
.cart-coupon__msg--success { color: #16a34a; }

.cart-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    background: var(--color-blue-subtle);
    color: var(--color-blue-dark);
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
}

.cart-coupon-chip button {
    display: flex;
    color: inherit;
    opacity: 0.7;
    transition: opacity var(--t-fast);
}

.cart-coupon-chip button:hover { opacity: 1; }

/* ── Checkout CTA ────────────────────────────────────────────── */

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-4);
    background: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background var(--t-fast), transform var(--t-press);
}

.cart-checkout-btn:hover { background: var(--color-blue-dark); }
.cart-checkout-btn:active { transform: scale(0.98); }

.cart-continue-shopping {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    transition: color var(--t-fast);
}

.cart-continue-shopping:hover { color: var(--color-blue); }

/* Sticky checkout bar — mobile only, mirrors the product page's sticky
   add-to-cart bar so the pattern feels consistent across the funnel */
.cart-sticky-bar {
    display: none;
}

@media (max-width: 899px) {
    .cart-sticky-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-fixed);
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-3) var(--sp-4);
        padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -8px 24px rgba(11, 37, 64, 0.08);
    }

    .cart-sticky-bar__total {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }

    .cart-sticky-bar__total-label {
        font-size: 0.625rem;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .cart-sticky-bar__total-val {
        font-size: var(--text-md);
        font-weight: var(--fw-black);
        color: var(--color-text);
    }

    .cart-sticky-bar .cart-checkout-btn { flex: 1; }

    body.woocommerce-cart { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
    body.woocommerce-cart .tab-bar { display: none; }
}

/* Desktop summary already contains the checkout button — hide the
   duplicate sitting inside the summary card on mobile in favour of
   the sticky bar version */
@media (max-width: 899px) {
    .cart-summary .cart-checkout-btn { display: none; }
}

/* ── Cross-sell ──────────────────────────────────────────────── */

.cart-cross-sell {
    margin-top: var(--sp-12);
}

.cart-cross-sell__title {
    font-size: var(--text-xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
    color: var(--color-text);
    margin-bottom: var(--sp-5);
}

.cart-cross-sell__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}

@media (min-width: 640px)  { .cart-cross-sell__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .cart-cross-sell__grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Skeleton ────────────────────────────────────────────────── */

.cart-skeleton .cart-item__img,
.cart-skeleton-line {
    background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.cart-skeleton-line { height: 12px; border-radius: var(--r-sm); }