/**
 * Nexcart Cart Page Styles
 *
 * Loaded only on the cart page. Depends on design tokens declared in
 * nexcart-public.css.
 *
 * @package Nexcart
 */

/* ================================================================
   LAYOUT
   ================================================================ */

.nexcart-cart {
    display: block;
    max-width: var(--nexcart-container-max);
    margin: 0 auto;
    padding: var(--nexcart-space-6) var(--nexcart-space-5) var(--nexcart-space-11);
    color: var(--nexcart-text);
    font-family: var(--nexcart-font-family);
    font-size: var(--nexcart-font-size-base);
    container-type: inline-size;
}

.nexcart-cart-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nexcart-space-3);
    margin-bottom: var(--nexcart-space-6);
}

.nexcart-cart-title {
    font-size: var(--nexcart-font-size-2xl);
    font-weight: var(--nexcart-font-weight-bold);
    letter-spacing: var(--nexcart-letter-spacing-tight);
    line-height: var(--nexcart-line-height-tight);
    margin: 0;
    color: var(--nexcart-text);
}

.nexcart-cart-item-count {
    font-size: var(--nexcart-font-size-sm);
    color: var(--nexcart-text-muted);
    font-weight: var(--nexcart-font-weight-medium);
}

.nexcart-cart-form {
    margin: 0;
}

.nexcart-cart-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nexcart-space-7);
    align-items: start;
}

@container (min-width: 768px) {
    .nexcart-cart-columns {
        grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
        gap: var(--nexcart-space-8);
    }
}

/* ================================================================
   ITEMS LIST — table-style
   ================================================================ */

.nexcart-cart-items-wrap {
    display: flex;
    flex-direction: column;
}

.nexcart-cart-items-head {
    display: none;
    padding: 0 0 var(--nexcart-space-3);
    border-bottom: 1px solid var(--nexcart-border);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: var(--nexcart-font-weight-medium);
    color: var(--nexcart-text-muted);
}

@container (min-width: 720px) {
    .nexcart-cart-items-head {
        display: grid;
        grid-template-columns:
            88px
            minmax(0, 1fr)
            minmax(140px, auto)
            minmax(96px, auto);
        column-gap: var(--nexcart-space-5);
        align-items: center;
    }
}

.nexcart-cart-col-head--product {
    grid-column: 1 / span 2;
}

.nexcart-cart-col-head--qty {
    justify-self: center;
}

.nexcart-cart-col-head--total {
    justify-self: end;
}

.nexcart-cart-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.nexcart-cart-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--nexcart-space-4);
    align-items: center;
    padding: var(--nexcart-space-5) 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--nexcart-border-subtle);
    border-radius: 0;
    transition:
        transform var(--nexcart-duration-slow) var(--nexcart-ease),
        opacity var(--nexcart-duration-slow) var(--nexcart-ease),
        border-bottom-color var(--nexcart-duration-base) var(--nexcart-ease);
}

.nexcart-cart-item:hover {
    border-bottom-color: var(--nexcart-border);
}

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

.nexcart-cart-item.is-updating {
    opacity: 0.7;
}

.nexcart-cart-item.is-removing {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

@container (min-width: 720px) {
    .nexcart-cart-item {
        grid-template-columns:
            88px
            minmax(0, 1fr)
            minmax(140px, auto)
            minmax(96px, auto);
        column-gap: var(--nexcart-space-5);
        padding: var(--nexcart-space-5) 0;
    }
}

.nexcart-cart-item-thumbnail {
    width: 72px;
    height: 72px;
    border-radius: var(--nexcart-radius-md);
    overflow: hidden;
    background: var(--nexcart-bg-surface-alt);
    border: 1px solid var(--nexcart-border-subtle);
    flex-shrink: 0;
}

@container (min-width: 720px) {
    .nexcart-cart-item-thumbnail {
        width: 88px;
        height: 88px;
    }
}

.nexcart-cart-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nexcart-cart-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-1);
}

.nexcart-cart-item-name {
    font-size: var(--nexcart-font-size-md);
    font-weight: var(--nexcart-font-weight-semibold);
    color: var(--nexcart-text);
    line-height: var(--nexcart-line-height-snug);
    letter-spacing: var(--nexcart-letter-spacing-tight);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nexcart-cart-item-name:hover {
    color: var(--nexcart-text-link-hover);
}

.nexcart-cart-item-variant {
    font-size: var(--nexcart-font-size-xs);
    color: var(--nexcart-text-muted);
    line-height: var(--nexcart-line-height-snug);
}

/* Per-unit hint surfaced only when quantity > 1, so shoppers can
   confirm the math behind the line total without folding a third
   column back onto the row. */
.nexcart-cart-item-unit-hint {
    font-size: var(--nexcart-font-size-xs);
    color: var(--nexcart-text-muted);
    line-height: var(--nexcart-line-height-snug);
    font-variant-numeric: tabular-nums;
}

/* Unit-price column is hidden in the new design — total shows price */
.nexcart-cart-item-unit-price {
    display: none;
}

/* -------- Quantity stepper: unified pill-shaped bar --------
   Shared affordance between the cart page and the side-cart drawer
   (drawer-scoped overrides live in nexcart-side-cart.css to survive
   theme CSS bleed-through). Single 40px pill with roomy 40×40 touch
   targets, wide tabular input, and strong inner dividers. */

.nexcart-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border: 1px solid var(--nexcart-border-strong);
    border-radius: var(--nexcart-radius-pill);
    background: var(--nexcart-bg-surface);
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    vertical-align: middle;
    line-height: 1;
}

.nexcart-qty-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--nexcart-text);
    border: none;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background var(--nexcart-duration-base) var(--nexcart-ease),
        color var(--nexcart-duration-base) var(--nexcart-ease);
}

.nexcart-qty-btn:hover {
    background: var(--nexcart-accent-soft);
    color: var(--nexcart-text);
}

.nexcart-qty-btn:active {
    background: var(--nexcart-border-subtle);
}

.nexcart-qty-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: -2px;
    background: var(--nexcart-accent-soft);
    box-shadow: inset 0 0 0 2px var(--nexcart-border-focus);
}

.nexcart-qty-btn[disabled],
.nexcart-qty-btn:disabled {
    color: var(--nexcart-text-disabled);
    cursor: not-allowed;
    background: transparent;
}

.nexcart-qty-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
}

.nexcart-qty-input {
    flex: 0 0 auto;
    width: 48px;
    min-width: 48px;
    max-width: 64px;
    height: 100%;
    padding: 0 2px;
    margin: 0;
    border: none;
    border-left: 1px solid var(--nexcart-border-strong);
    border-right: 1px solid var(--nexcart-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--nexcart-text);
    font-family: var(--nexcart-font-numeric);
    font-size: var(--nexcart-font-size-base);
    font-weight: var(--nexcart-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1;
    box-shadow: none;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
}

.nexcart-qty-input::-webkit-outer-spin-button,
.nexcart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: 0;
    height: 0;
    display: none;
}

.nexcart-qty-input:focus {
    outline: none;
}

.nexcart-qty-input:focus-visible {
    outline: 2px solid transparent;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px var(--nexcart-border-focus);
}

div.nexcart-cart-item-qty {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

@container (min-width: 720px) {
    div.nexcart-cart-item-qty {
        justify-content: center;
    }
}

.nexcart-cart-item-line-total {
    font-size: var(--nexcart-font-size-md);
    font-weight: var(--nexcart-font-weight-semibold);
    color: var(--nexcart-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* -------- Remove link as plain text under product name -------- */

.nexcart-cart-item-remove {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin-top: var(--nexcart-space-1);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--nexcart-text-muted);
    font-size: var(--nexcart-font-size-sm);
    font-weight: var(--nexcart-font-weight-normal);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--nexcart-duration-base) var(--nexcart-ease);
}

.nexcart-cart-item-remove:hover,
.nexcart-cart-item-remove:focus-visible {
    color: var(--nexcart-error-accent);
    background: transparent;
}

.nexcart-cart-item-remove:focus-visible {
    outline: 2px solid var(--nexcart-border-focus);
    outline-offset: 2px;
}

.nexcart-cart-item-remove svg {
    display: none;
}

/* Mobile layout: stack qty + total below the product row */
@container (max-width: 719px) {
    .nexcart-cart-item {
        grid-template-areas:
            "thumb body"
            "thumb meta";
        grid-template-columns: 72px minmax(0, 1fr);
        row-gap: var(--nexcart-space-3);
    }

    .nexcart-cart-item-thumbnail { grid-area: thumb; }
    .nexcart-cart-item-body { grid-area: body; }
    .nexcart-cart-item-meta-mobile {
        grid-area: meta;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--nexcart-space-3);
    }
}

@container (min-width: 720px) {
    .nexcart-cart-item-meta-mobile { display: contents; }
}

/* ================================================================
   ORDER SUMMARY (sidebar) — light gray card
   ================================================================ */

.nexcart-cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-5);
    padding: var(--nexcart-space-6) var(--nexcart-space-6) var(--nexcart-space-5);
    background:
        linear-gradient(135deg, var(--nexcart-bg-surface-alt) 0%, var(--nexcart-bg-surface) 100%);
    border: 1px solid var(--nexcart-border-subtle);
    border-top: 2px solid var(--nexcart-accent);
    border-radius: var(--nexcart-radius-lg);
    box-shadow: var(--nexcart-shadow-subtle);
}

@container (min-width: 768px) {
    .nexcart-cart-totals {
        position: sticky;
        top: var(--nexcart-space-5);
        padding: var(--nexcart-space-7) var(--nexcart-space-6) var(--nexcart-space-6);
    }
}

/* --------------------------------------------------------------
   Override the standard express-checkout card treatment when it
   sits inside the summary card. Strip the border, background,
   accent top-strip and shadow so the PayPal button reads as an
   alternate-payment affordance right under the primary CTA,
   matching the way Shopify, Stripe and Amazon render this slot.
   -------------------------------------------------------------- */

.nexcart-cart-totals .nexcart-express-checkout {
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-3);
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    overflow: visible;
}

.nexcart-cart-totals .nexcart-express-checkout::before {
    content: none;
}

.nexcart-cart-totals .nexcart-express-checkout-title--inline {
    display: flex;
    align-items: center;
    gap: var(--nexcart-space-3);
    margin: var(--nexcart-space-1) 0 0;
    font-size: var(--nexcart-font-size-xs);
    font-weight: var(--nexcart-font-weight-medium);
    color: var(--nexcart-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
    line-height: 1;
}

.nexcart-cart-totals .nexcart-express-checkout-title--inline::before,
.nexcart-cart-totals .nexcart-express-checkout-title--inline::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--nexcart-border);
}

.nexcart-cart-totals .nexcart-express-checkout-buttons {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    min-height: 45px;
    gap: var(--nexcart-space-2);
}

.nexcart-cart-totals .nexcart-express-checkout-skeleton {
    inset: 0;
}

.nexcart-cart-totals-heading {
    /* Hidden visually — the rows speak for themselves, matching competitor */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nexcart-cart-totals-list {
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    font-variant-numeric: tabular-nums;
}

.nexcart-cart-totals-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nexcart-space-3);
    font-size: var(--nexcart-font-size-base);
    color: var(--nexcart-text);
}

.nexcart-cart-totals-row dt {
    font-weight: var(--nexcart-font-weight-normal);
    color: var(--nexcart-text);
}

.nexcart-cart-totals-row-value {
    color: var(--nexcart-text);
    font-weight: var(--nexcart-font-weight-normal);
    font-variant-numeric: tabular-nums;
}

.nexcart-cart-totals-shipping .nexcart-cart-totals-row-value {
    color: var(--nexcart-text-muted);
}

.nexcart-cart-totals-discount .nexcart-cart-totals-row-value {
    color: var(--nexcart-success-accent);
}

.nexcart-cart-totals-grand {
    padding-top: var(--nexcart-space-6);
    margin-top: var(--nexcart-space-2);
    border-top: 2px solid var(--nexcart-accent);
    font-size: var(--nexcart-font-size-lg);
    color: var(--nexcart-text);
    font-weight: var(--nexcart-font-weight-bold);
    align-items: center;
}

.nexcart-cart-totals-grand dt {
    font-weight: var(--nexcart-font-weight-bold);
    font-size: var(--nexcart-font-size-lg);
    letter-spacing: 0.01em;
}

.nexcart-cart-totals-grand .nexcart-cart-totals-row-value {
    font-size: calc(var(--nexcart-font-size-xl) * 1.1);
    font-weight: var(--nexcart-font-weight-bold);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}

/* -------- Coupon toggle -------- */

.nexcart-coupon {
    border-top: none;
    padding-top: 0;
    margin-top: calc(var(--nexcart-space-2) * -1);
}

.nexcart-coupon-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--nexcart-space-1);
    background: transparent;
    border: none;
    padding: 0;
    color: var(--nexcart-text-muted);
    font-size: var(--nexcart-font-size-sm);
    font-weight: var(--nexcart-font-weight-normal);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nexcart-coupon-toggle svg {
    width: 12px;
    height: 12px;
    transition: transform var(--nexcart-duration-base) var(--nexcart-ease);
}

.nexcart-coupon[open] .nexcart-coupon-toggle svg,
.nexcart-coupon.is-open .nexcart-coupon-toggle svg {
    transform: rotate(180deg);
}

.nexcart-coupon-form {
    display: none;
    margin-top: var(--nexcart-space-3);
    gap: var(--nexcart-space-2);
    align-items: stretch;
}

.nexcart-coupon.is-open .nexcart-coupon-form {
    display: flex;
}

.nexcart-coupon-form .nexcart-field-input {
    flex: 1;
    min-height: var(--nexcart-touch-target);
    border-radius: 999px;
    padding: 0 var(--nexcart-space-4);
    background: var(--nexcart-bg-surface);
    border: 1px solid var(--nexcart-border);
}

.nexcart-coupon-form .nexcart-button {
    min-height: var(--nexcart-touch-target);
    padding: 0 var(--nexcart-space-4);
    font-size: var(--nexcart-font-size-sm);
    border-radius: 999px;
}

.nexcart-coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nexcart-space-3);
    padding: var(--nexcart-space-3) var(--nexcart-space-4);
    background: var(--nexcart-success-bg);
    border: 1px solid transparent;
    border-radius: var(--nexcart-radius-md);
    color: var(--nexcart-success-fg);
    font-size: var(--nexcart-font-size-sm);
    font-weight: var(--nexcart-font-weight-medium);
}

.nexcart-coupon-applied-code {
    display: inline-flex;
    align-items: center;
    gap: var(--nexcart-space-1);
    font-family: var(--nexcart-font-numeric);
    letter-spacing: var(--nexcart-letter-spacing-wide);
    text-transform: uppercase;
}

.nexcart-coupon-remove {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: var(--nexcart-font-size-xs);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--nexcart-radius-sm);
    transition: color var(--nexcart-duration-base) var(--nexcart-ease);
}

.nexcart-coupon-remove:hover,
.nexcart-coupon-remove:focus-visible {
    color: var(--nexcart-error-accent);
}

.nexcart-coupon-remove:focus-visible {
    outline: 2px solid var(--nexcart-border-focus);
    outline-offset: 2px;
}

/* -------- Primary CTA: accent pill --------
   Resolved through the accent-token family so dark mode and any merchant
   theme override stay in sync with the drawer checkout button. */

.nexcart-cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--nexcart-button-height-lg);
    padding: 0 var(--nexcart-space-5);
    background: var(--nexcart-accent);
    color: var(--nexcart-accent-foreground);
    font-size: var(--nexcart-font-size-md);
    font-weight: var(--nexcart-font-weight-semibold);
    letter-spacing: 0.02em;
    border: none;
    border-radius: var(--nexcart-radius-pill);
    text-decoration: none;
    box-shadow: var(--nexcart-shadow-subtle);
    transition:
        background-color var(--nexcart-duration-base) var(--nexcart-ease),
        color var(--nexcart-duration-base) var(--nexcart-ease),
        box-shadow var(--nexcart-duration-base) var(--nexcart-ease),
        transform var(--nexcart-duration-fast) var(--nexcart-ease);
}

.nexcart-cart-checkout-btn:hover,
.nexcart-cart-checkout-btn:focus-visible {
    background: var(--nexcart-accent-hover);
    color: var(--nexcart-accent-foreground);
    box-shadow: var(--nexcart-shadow-prominent);
    transform: translateY(-1px);
    text-decoration: none;
}

.nexcart-cart-checkout-btn:active {
    background: var(--nexcart-accent-active);
    transform: translateY(0);
    box-shadow: var(--nexcart-shadow-subtle);
}

.nexcart-cart-checkout-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--nexcart-shadow-focus);
}

/* -------- Trust footer: uppercase caption -------- */

.nexcart-cart-totals .nexcart-trust-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nexcart-space-3);
    padding-top: var(--nexcart-space-3);
    margin-top: var(--nexcart-space-2);
    border-top: 1px solid var(--nexcart-border-subtle);
}

.nexcart-cart-totals .nexcart-trust-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--nexcart-text-muted);
    font-size: 11px;
    font-weight: var(--nexcart-font-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nexcart-cart-totals .nexcart-trust-lock svg {
    display: inline-block;
    width: 12px;
    height: 12px;
    color: var(--nexcart-success-accent);
    flex-shrink: 0;
}

.nexcart-trust-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nexcart-trust-payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--nexcart-bg-surface);
    box-shadow: inset 0 0 0 1px var(--nexcart-border-subtle);
}

.nexcart-trust-payment svg {
    display: block;
    width: 100%;
    height: 100%;
}

.nexcart-cart-express-zone {
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-2);
    margin-top: var(--nexcart-space-2);
    width: 100%;
    box-sizing: border-box;
}

.nexcart-cart-express-zone > #nexcart-cart-paypal-btn,
.nexcart-cart-smart-buttons > #nexcart-cart-paypal-btn {
    display: block;
    width: 100%;
    min-height: 45px;
    box-sizing: border-box;
}

/* ================================================================
   EMPTY CART
   ================================================================ */

.nexcart-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nexcart-space-5);
    padding: var(--nexcart-space-11) var(--nexcart-space-5);
    text-align: center;
    background:
        linear-gradient(180deg, var(--nexcart-bg-surface) 0%, var(--nexcart-bg-surface-alt) 100%);
    border: 1px solid var(--nexcart-border-subtle);
    border-radius: var(--nexcart-radius-lg);
    box-shadow: var(--nexcart-shadow-medium);
}

.nexcart-cart-empty-illustration {
    width: 96px;
    height: 96px;
    color: var(--nexcart-text-subtle);
}

.nexcart-cart-empty-illustration svg {
    width: 100%;
    height: 100%;
}

.nexcart-cart-empty-title {
    font-size: var(--nexcart-font-size-xl);
    font-weight: var(--nexcart-font-weight-semibold);
    color: var(--nexcart-text);
    letter-spacing: var(--nexcart-letter-spacing-tight);
    margin: 0;
}

.nexcart-cart-empty-desc {
    font-size: var(--nexcart-font-size-sm);
    color: var(--nexcart-text-muted);
    margin: 0;
    max-width: 42ch;
}

/* ================================================================
   CROSS-SELLS
   ================================================================ */

.nexcart-cross-sells {
    margin-top: var(--nexcart-space-10);
    padding-top: var(--nexcart-space-7);
    border-top: 1px solid var(--nexcart-border);
}

.nexcart-cross-sells-title {
    font-size: var(--nexcart-font-size-xl);
    font-weight: var(--nexcart-font-weight-semibold);
    margin: 0 0 var(--nexcart-space-5);
    color: var(--nexcart-text);
    letter-spacing: var(--nexcart-letter-spacing-tight);
}

/* Flatter product cards when rendered inside cross-sells — mirrors the
   single-product related-products rail so the two "you might also like"
   surfaces read consistently. No card chrome, no inline CTA, no sale
   badge, name + price only. */
.nexcart-cross-sells .nexcart-product-box {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.nexcart-cross-sells .nexcart-product-box:hover,
.nexcart-cross-sells .nexcart-product-box:focus-within {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.nexcart-cross-sells .nexcart-product-box-image {
    aspect-ratio: 4 / 3;
    border-radius: var(--nexcart-radius-md);
    border: 1px solid var(--nexcart-border-subtle);
}

.nexcart-cross-sells .nexcart-product-box .nexcart-sale-badge,
.nexcart-cross-sells .nexcart-product-box-category,
.nexcart-cross-sells .nexcart-product-box-description,
.nexcart-cross-sells .nexcart-product-box-actions {
    display: none;
}

.nexcart-cross-sells .nexcart-product-box-content {
    padding: var(--nexcart-space-3) 0 0;
    gap: var(--nexcart-space-1);
}

.nexcart-cross-sells .nexcart-product-box-name {
    font-size: var(--nexcart-font-size-base);
    font-weight: var(--nexcart-font-weight-bold);
}

.nexcart-cross-sells .nexcart-product-box-price {
    margin-top: 0;
}

.nexcart-cross-sells .nexcart-product-box-price .nexcart-price,
.nexcart-cross-sells .nexcart-product-box-price .nexcart-price-sale {
    color: var(--nexcart-text);
    font-weight: var(--nexcart-font-weight-bold);
}

.nexcart-cross-sells .nexcart-product-box-price .nexcart-price-sale {
    color: var(--nexcart-sale-accent);
}

.nexcart-cross-sells .nexcart-product-box-price .nexcart-price-regular {
    display: none;
}

/* Horizontal-scrolling rail on mobile. Mirrors the
   related-products rail on single-product so the two
   "you might also like" surfaces behave identically at 360px. */
@media (max-width: 599px) {
    .nexcart-cross-sells .nexcart-product-grid {
        display: flex;
        grid-template-columns: none;
        gap: var(--nexcart-space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--nexcart-space-2);
        scroll-padding: var(--nexcart-space-4);
    }

    .nexcart-cross-sells .nexcart-product-grid > .nexcart-product-box {
        flex: 0 0 62%;
        max-width: 62%;
        scroll-snap-align: start;
    }
}

/* ================================================================
   STICKY MOBILE FOOTER
   ================================================================ */

.nexcart-cart.has-items .nexcart-cart-mobile-cta {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--nexcart-space-4);
    background: var(--nexcart-bg-surface);
    border-top: 1px solid var(--nexcart-border);
    box-shadow: var(--nexcart-shadow-elevated-up);
    z-index: var(--nexcart-z-sticky);
}

@container (min-width: 768px) {
    .nexcart-cart.has-items .nexcart-cart-mobile-cta {
        position: static;
        padding: 0;
        background: transparent;
        border-top: 0;
        box-shadow: none;
        z-index: auto;
    }
}