/* ══════════════════════════════════════════════════════════════
   Cart sidebar — Solution A's dark cart-drawer look, ported using
   the site's real design tokens from base.css (--c-drawer-bg,
   --c-footer-bg, --c-red, --f-serif, --f-sans, --border, etc.)
   and reusing existing components (.sec-label, .btn/.btn-primary/
   .btn-outline-white) instead of redefining them.

   SCOPE: this file contains ONLY #cart-items-sidebar and
   .cart-slidebar-container (+ descendants). Nav-level fixes that
   used to live here (mobile controls spacing, search icon styling,
   theme-toggle border fix, search overlay padding) have moved to
   nav.css and search-overlay.css respectively — keep it that way;
   anything not about the sidebar itself belongs in one of those.

   IMPORTANT — positioning target:
   _Layout.cshtml has an empty <div id="cart-items-sidebar"></div>
   in the header. site.js AJAX-loads _CartSideBar.cshtml's markup
   INTO that div, then toggles ".active" on #cart-items-sidebar
   itself (see $("#cart-btn-desktop, #cart-btn").click(...) and
   $("#cart-items-sidebar").on("click", "#shopping-cart-close",...)
   in site.js). So the fixed/slide-in panel styling below is
   written against #cart-items-sidebar, NOT .cart-slidebar-container
   — .cart-slidebar-container only needs to fill it.
   ══════════════════════════════════════════════════════════════ */

#cart-items-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--c-drawer-bg);
    border-left: 1px solid var(--border);
    z-index: 850;
    transform: translateX(100%);
    transition: transform var(--t-mid) var(--ease-out);
    overflow: hidden;
}

    #cart-items-sidebar.active {
        transform: translateX(0);
    }

.cart-slidebar-container {
    height: 100%;
    color: var(--c-text);
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
}

    /* ── Header ───────────────────────────────────────────────── */

    .cart-slidebar-container .ka-cart-header {
        align-items: flex-start;
        padding: 34px var(--gutter) 6px;
    }

    .cart-slidebar-container .sec-label {
        margin-bottom: 0;
    }

    .cart-slidebar-container .ka-cart-close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid var(--border-mid);
        color: var(--c-text-mid);
        font-size: 14px;
        cursor: pointer;
        transition: color 0.3s, border-color 0.3s;
    }

        .cart-slidebar-container .ka-cart-close:hover {
            color: var(--c-text);
            border-color: var(--border-strong);
        }

    .cart-slidebar-container .ka-cart-count {
        font-family: var(--f-serif);
        font-size: 34px;
        font-weight: 300;
        line-height: 1;
        padding: 6px var(--gutter) 26px;
        border-bottom: 1px solid var(--border);
    }

    /* ── Item list ────────────────────────────────────────────── */

    .cart-slidebar-container .ka-cart-items {
        flex: 1; /* .cart-slidebar-container is already d-flex flex-column (Bootstrap) */
        min-height: 0; /* required for overflow to work inside a flex child */
        overflow-y: auto;
        padding: 0 var(--gutter);
    }

    .cart-slidebar-container .ka-cart-item {
        gap: 20px;
        padding: 26px 0;
        border-bottom: 1px solid var(--border);
    }

    .cart-slidebar-container .ka-cart-item-image {
        position: relative;
        width: auto;
        aspect-ratio: 1 / 1; /* square at any height — width derives from the stretched height instead of a fixed px value */
        max-width: 110px;
        max-height: 110px; /* without a cap, aspect-ratio + stretch can size off the image's own intrinsic dimensions rather than the row's content height */
        flex-shrink: 0;
        align-self: stretch;
        border: 1px solid var(--border);
        background: var(--c-surface-hover);
        overflow: hidden;
    }

        .cart-slidebar-container .ka-cart-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .cart-slidebar-container .ka-remove-overlay {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 20px;
        height: 20px;
        background: var(--c-footer-bg);
        opacity: 0.85;
        z-index: 2;
    }

    .cart-slidebar-container .ka-remove-btn {
        /* .ka-remove-overlay sits on var(--c-footer-bg), which is
           intentionally always-dark regardless of theme (see base.css's
           own "footer always dark" comment on that variable). Using the
           theme-aware var(--c-text-mid) here made the icon invisible in
           light mode, since it flips to a dark color there — fix it to
           a light tone that stays legible on that always-dark overlay. */
        color: rgba(255, 255, 255, 0.6);
        font-size: 9px;
        cursor: pointer;
        transition: color 0.3s;
    }

        .cart-slidebar-container .ka-remove-btn:hover {
            color: var(--c-red);
        }

    .cart-slidebar-container .ka-cart-item-details {
        min-width: 0;
        justify-content: center;
    }

    .cart-slidebar-container .ka-cart-item-name {
        font-family: var(--f-serif);
        font-size: 20px;
        font-weight: 300;
        line-height: 1.15;
        color: var(--c-text);
        /* Clamp to 2 lines directly — don't rely on the shared pLengthClamp2
           class here, since display:block would silently override whatever
           display:-webkit-box it needs to actually clamp. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cart-slidebar-container .ka-cart-item-code {
        display: block;
        font-size: 11px;
        color: var(--c-text-muted);
        margin-top: 3px;
    }

    .cart-slidebar-container .ka-cart-item-footer {
        margin-top: 16px;
        gap: 12px;
    }

    .cart-slidebar-container .ka-qty-stepper {
        display: flex;
        align-items: center;
        border: 1px solid var(--border-mid);
        width: fit-content;
    }

    .cart-slidebar-container .ka-qty-stepper--disabled {
        opacity: 0.4;
    }

    .cart-slidebar-container .ka-qty-btn {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--c-text-mid);
        font-size: 11px;
        transition: color 0.3s;
    }

        .cart-slidebar-container .ka-qty-btn:hover {
            color: var(--c-text);
        }

    .cart-slidebar-container .ka-qty-input {
        width: 30px;
        text-align: center;
        font-size: 12.5px;
        background: transparent;
        border: none;
        border-left: 1px solid var(--border-mid);
        border-right: 1px solid var(--border-mid);
        color: var(--c-text);
        outline: none;
        -moz-appearance: textfield;
    }

        .cart-slidebar-container .ka-qty-input::-webkit-outer-spin-button,
        .cart-slidebar-container .ka-qty-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    .cart-slidebar-container .ka-cart-item-total {
        font-size: 14px;
        letter-spacing: 0.02em;
        color: var(--c-text);
        text-align: right;
    }

    .cart-slidebar-container .ka-price-was {
        color: var(--c-text-muted);
        font-weight: 300;
    }

    .cart-slidebar-container .ka-price-now {
        color: var(--c-text);
    }

    .cart-slidebar-container .ka-price-save {
        font-size: 11px;
        color: var(--c-text-muted);
        margin-top: 2px;
    }

    /* ── Footer / summary ─────────────────────────────────────── */

    .cart-slidebar-container .ka-cart-footer {
        padding: 28px var(--gutter) 34px;
        border-top: 1px solid var(--border);
        /* var(--c-footer-bg) is intentionally "always dark" (it's meant
           for the site's actual <footer>, see base.css's own comment on
           that variable) — this is the cart's checkout panel, not the
           footer, so it should follow the theme like the rest of the
           sidebar. var(--c-bg-mid) is theme-aware and still gives a
           subtly distinct surface from the item list above it. */
        background: var(--c-bg-mid);
    }

    .cart-slidebar-container .ka-cart-summary-line {
        font-size: 12.5px;
        color: var(--c-text-muted);
        margin-bottom: 10px;
    }

        .cart-slidebar-container .ka-cart-summary-line span:last-child {
            color: var(--c-text-soft);
        }

    .cart-slidebar-container .ka-cart-total {
        align-items: flex-end;
        padding-top: 18px;
        border-top: 1px solid var(--border);
    }

    .cart-slidebar-container .ka-cart-total-label {
        font-size: 10.5px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--c-text-mid);
    }

    .cart-slidebar-container .ka-cart-total-value {
        font-family: var(--f-serif);
        font-size: 32px;
        font-weight: 300;
        line-height: 1;
    }

    .cart-slidebar-container .ka-cart-actions {
        gap: 10px;
        margin-top: 24px;
    }

        .cart-slidebar-container .ka-cart-actions .btn {
            width: 100%;
        }

            .cart-slidebar-container .ka-cart-actions .btn:hover {
                transform: none; /* .btn's default lift looks odd on a full-width stacked pair */
            }

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

    .cart-slidebar-container .ka-cart-empty {
        flex: 1;
        padding: 0 var(--gutter);
        text-align: center;
    }

    .cart-slidebar-container .ka-cart-empty-img {
        max-width: 140px;
        opacity: 0.85;
        margin-left: auto;
        margin-right: auto;
    }

    .cart-slidebar-container .ka-cart-empty-title {
        font-family: var(--f-serif);
        font-size: 24px;
        font-weight: 300;
        color: var(--c-text);
    }

/* ── Page dim behind the cart ─────────────────────────────── */
.cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 849; /* just below #cart-items-sidebar (850) */
    background: rgba(10, 5, 2, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid); /* hide only after fading out */
}

    .cart-backdrop.active {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
    #cart-items-sidebar {
        width: 100vw;
    }

    .cart-slidebar-container .ka-cart-item {
        gap: 14px;
    }

    .cart-slidebar-container .ka-cart-item-image {
        /* On small screens the square (capped at 84px below) is often
           shorter than the details column, leaving a gap underneath it.
           Drop back to a fixed-width rectangle that stretches to fill
           the full row height instead — larger screens keep the square. */
        aspect-ratio: unset;
        width: 84px;
        max-width: 84px;
        max-height: none;
    }

    .cart-slidebar-container .ka-cart-item-name {
        font-size: 17px;
    }

    .cart-slidebar-container .ka-cart-total-value {
        font-size: 26px;
    }
}