html, body {
    overflow-x: hidden;
    max-width: 100%;
}
.cart-page-root {
    --cart-accent: #F5730C;
    --cart-accent-dark: #D9640A;
    --cart-border: #EDEDED;
    --cart-text-muted: #6B7280;
}

:root {
   
    --mini-cart-width: 380px;
}

@media (min-width: 1200px) {
    main:has(.mini_cart.open) #full-cart-container {
        padding-right: calc(var(--mini-cart-width) + 24px);
        transition: padding-right .2s ease;
    }
}

.cart-page-heading {
    margin-bottom: 24px;
}

    .cart-page-heading h1 {
        font-size: 26px;
        font-weight: 600;
        color: #222;
        margin: 0;
    }

/* ── Items card ─────────────────────────────────────────── */
.cart-items-card {
    border-radius: 14px;
    overflow: hidden;
}

.cart-head {
    background: #FAFAFA;
    border-bottom: 1px solid var(--cart-border);
}

.cart-head-product {
    flex: 1 1 40%;
}

.cart-head-price {
    flex: 0 0 15%;
}

.cart-head-qty {
    flex: 0 0 20%;
}

.cart-head-subtotal {
    flex: 0 0 15%;
}

.cart-head-remove {
    flex: 0 0 40px;
}

.cart-row-divider {
    border-color: var(--cart-border);
}

.cart-row:last-of-type + .cart-row-divider {
    display: none;
}

/* Desktop: single-line row matching the head columns above */
@media (min-width: 768px) {
    .cart-row {
        flex-wrap: nowrap;
    }

    .cart-row-product {
        flex: 1 1 40%;
        min-width: 0;
    }

    .cart-row-price {
        flex: 0 0 15%;
    }

    .cart-row-qty {
        flex: 0 0 20%;
    }

    .cart-row-subtotal {
        flex: 0 0 15%;
    }

    .cart-row-remove {
        flex: 0 0 40px;
    }
}

.cart-row-img img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--cart-border);
}

.cart-row-title {
    color: #1F2937;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

    .cart-row-title:hover {
        color: var(--cart-accent);
    }

/* ── Quantity stepper: one pill, not three boxes ───────────── */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cart-border);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.qty-stepper-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

    .qty-stepper-btn:hover:not(:disabled) {
        background: var(--cart-accent);
        color: #fff;
    }

    .qty-stepper-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.qty-stepper-input {
    width: 36px;
    border: none;
    text-align: center;
    font-weight: 600;
    color: #111827;
    background: transparent;
    -moz-appearance: textfield;
}

    .qty-stepper-input::-webkit-outer-spin-button,
    .qty-stepper-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* ── Remove button ──────────────────────────────────────── */
.cart-remove-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #9CA3AF;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

    .cart-remove-btn:hover {
        background: #FEF2F2;
        color: #DC2626;
    }

/* ── Continue shopping link ─────────────────────────────── */
.cart-continue-link {
    color: #374151;
    font-weight: 500;
    text-decoration: none;
}

    .cart-continue-link:hover {
        color: var(--cart-accent);
    }

/* ── Order summary (flat, no card elevation) ────────────── */
.cart-summary-panel {
    background: transparent;
    top: 96px; /* clears the sticky header — adjust to match its actual height */
}

.cart-summary-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.cart-summary-total-label {
    font-weight: 700;
    color: #111827;
}

.cart-summary-total-value {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--cart-accent);
}

/* ── Buttons in the existing orange theme ───────────────── */
.cart-btn-primary {
    background: var(--cart-accent);
    border-color: var(--cart-accent);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: .65rem 1rem;
    transition: background-color .15s ease;
}

    .cart-btn-primary:hover {
        background: var(--cart-accent-dark);
        border-color: var(--cart-accent-dark);
        color: #fff;
    }

.cart-btn-outline {
    background: transparent;
    border: 1px solid var(--cart-border);
    color: #374151;
    font-weight: 600;
    border-radius: 999px;
    padding: .65rem 1rem;
}

    .cart-btn-outline:hover {
        border-color: var(--cart-accent);
        color: var(--cart-accent);
    }

/* ── Empty state ────────────────────────────────────────── */
.cart-empty-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #FFF3EA;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cart-empty-icon-wrap i {
        font-size: 32px;
        color: var(--cart-accent);
    }

/* ── Focus visibility (accessibility floor) ─────────────── */
.qty-stepper-btn:focus-visible,
.cart-remove-btn:focus-visible,
.cart-btn-primary:focus-visible,
.cart-btn-outline:focus-visible {
    outline: 2px solid var(--cart-accent);
    outline-offset: 2px;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .qty-stepper-btn,
    .cart-remove-btn,
    .cart-btn-primary,
    .cart-btn-outline {
        transition: none;
    }
}
.btn-login {
    background-color: #111827;
    border-color: #111827;
}

    .btn-login:hover,
    .btn-login:focus {
        background-color: #f97316;
        border-color: #f97316;
        color: #fff;
    }