/* ==========================================================================
   Cheetah Cart Page – Elegant & Seamless
   ========================================================================== */

/* ============================================================
   PAGE TITLE
   Left-aligned for continuity with the rest of the site.
   Adds comfortable clearance from the sticky header and a
   cleaner typographic rhythm above the cart grid.

   Cheetah's page-title spacing contract:
     - The H1 owns ALL vertical rhythm above the title.
     - The wrapper <header> is zeroed universally in
       assets/css/core/layout.css via the shared
       .cheetah-page-header and .entry-header selectors.

   Only the H1 needs page-specific padding-top here. The wrapper
   reset used to be duplicated per page, which made the contract
   fragile — the shared .cheetah-page-header class was never zeroed
   globally, and the default page.php fallback used .entry-header
   (which no page CSS zeroed at all). See layout.css for the
   consolidated rule and the full rationale.

   Note: the previous selector list included .cheetah-cart-page__header
   (double underscore), which never matched the template class
   .cheetah-cart-page-header (single hyphen). It was a typo that
   happened to be harmless only because the wrapper needed no
   padding in the first place. Removed to avoid future confusion.
   ============================================================ */
.woocommerce-cart .page-title,
.woocommerce-cart .entry-title,
.woocommerce-cart .woocommerce-products-header {
    /* Clearance from the sticky header. If your header is position:fixed
       rather than sticky, bump this to:
       padding-top: calc(var(--cheetah-header-height, 80px) + 1rem); */
    padding-top: 1rem;
    margin: 0 0 0.5rem;
    text-align: left;
}

.woocommerce-cart .page-title,
.woocommerce-cart .entry-title,
.woocommerce-cart .woocommerce-products-header__title,
.cheetah-cart-page__title {
    margin: 0;
    font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--cheetah-heading, #0f172a);
}

/* Optional subtle accent — remove if you prefer a bare title */
.cheetah-cart-page__header .cheetah-cart-page__title::after,
.woocommerce-cart .cheetah-cart-page__header .page-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: var(--cheetah-primary, #2563eb);
    opacity: 0.85;
}

@media (max-width: 767px) {
    .woocommerce-cart .page-title,
    .woocommerce-cart .entry-title,
    .woocommerce-cart .woocommerce-products-header {
        padding-top: 1.75rem;
    }
}

/* ---- Cart grid ---- */
.cheetah-cart {
    display: grid;
    gap: 2rem;
    /* Title above now supplies its own top rhythm, so trim the extra
       top margin here to avoid a double gap. */
    margin-block: 1.25rem 1.25rem;
}

@media (min-width: 992px) {
    .cheetah-cart {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        align-items: start;
        gap: 2.5rem;
    }
}

/* ---- Table card ---- */
.cheetah-cart__table-wrap {
    background: var(--cheetah-bg, #fff);
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.045);
}

.cheetah-cart-table {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    table-layout: fixed;
}

/* Keep the remove control compact; the product column should own the flexible space. */
.cheetah-cart-table .product-remove {
    width: 48px;
    min-width: 48px;
    padding: 0.65rem 0.25rem;
    text-align: center;
}

.cheetah-cart-table .product-thumbnail {
    width: 84px;
    min-width: 84px;
}

.cheetah-cart-table .product-price {
    width: 96px;
}

.cheetah-cart-table .product-quantity {
    width: 112px;
    min-width: 112px;
}

.cheetah-cart-table .product-subtotal {
    width: 104px;
}

/* The outer wrapper provides the single cart-card border. Do not let WooCommerce
   add another border to the table/tbody/cells, which creates an awkward inset gap. */
.cheetah-cart-table,
.cheetah-cart-table thead,
.cheetah-cart-table tbody,
.cheetah-cart-table tfoot,
.cheetah-cart-table tr,
.cheetah-cart-table th,
.cheetah-cart-table td {
    border: 0 !important;
}

.cheetah-cart-table thead th {
    padding: 0.8rem 1.25rem;
    background: #f8fafc;
    color: var(--cheetah-secondary, #64748b);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--cheetah-border, #e2e8f0) !important;
}

.cheetah-cart-table tbody tr.cart_item {
    transition: background-color 150ms ease;
}

.cheetah-cart-table tbody tr.cart_item + tr.cart_item td {
    border-top: 1px solid #edf1f5 !important;
}

.cheetah-cart-table tbody tr.cart_item:hover td {
    background: #f8fbff;
}

.cheetah-cart-table td {
    padding: 1.15rem 1rem;
    vertical-align: middle;
    font-size: 0.9375rem;
    color: var(--cheetah-text, #1e293b);
}

.cheetah-cart-table .product-price,
.cheetah-cart-table .product-subtotal {
    white-space: nowrap;
    text-align: right;
}

.cheetah-cart-table .product-subtotal {
    font-weight: 700;
    color: var(--cheetah-heading, #0f172a);
}

.cheetah-cart-table thead .product-quantity {
    text-align: center;
}

.cheetah-cart-table .product-quantity {
    min-width: 112px;
    text-align: center;
}

/*
 * Quantity cell wrapper.
 *
 * The `.quantity` control is a fixed-width inline-flex element (104px).
 * The cell that holds it is 112px wide including 16px horizontal
 * padding, so its content box is only 80px. The control therefore
 * overflows the content box by 24px.
 *
 * `text-align: center` does NOT visually centre overflowing inline
 * content — when an inline-level box is wider than its containing
 * block, the overflow is pushed to one side. The control ends up
 * appearing left-aligned inside the cell even though `text-align:
 * center` is set.
 *
 * Wrapping the quantity output in a flex container with
 * `justify-content: center` sidesteps the overflow behaviour entirely:
 * flex layout centres its items within the container regardless of
 * whether they fit, so the control appears centred no matter how wide
 * it is or how narrow the cell becomes (for example on smaller
 * viewports, or when a very long-form price pushes other columns).
 *
 * The wrapper has no visual styling of its own — no padding, border,
 * background, or shadow. It exists only to own the flex layout. On
 * mobile, the parent `<td>` becomes a flex row itself (see the
 * responsive section below), where the wrapper naturally sizes to the
 * control and remains right-aligned by the parent's
 * `justify-content: space-between`.
 */
.cheetah-cart-quantity-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Keep the cart quantity control compact so it does not dominate the table.
   The global WooCommerce quantity component remains unchanged elsewhere. */
.cheetah-cart-table .product-quantity .quantity {
    display: inline-flex;
    width: 104px;
    min-width: 104px;
    height: 38px;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.cheetah-cart-table .product-quantity .cheetah-qty-btn {
    flex: 0 0 32px;
    width: 32px;
    height: 36px;
    font-size: 1rem;
    color: var(--cheetah-secondary, #64748b);
    background: #f8fafc;
    transition: background-color 150ms ease, color 150ms ease;
}

.cheetah-cart-table .product-quantity .cheetah-qty-btn:hover,
.cheetah-cart-table .product-quantity .cheetah-qty-btn:focus-visible {
    background: var(--cheetah-primary, #2563eb);
    color: #fff;
    outline: none;
}

.cheetah-cart-table .product-quantity .qty {
    flex: 1 1 auto;
    width: 40px;
    min-width: 0;
    height: 36px;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    border-left: 1px solid #e5eaf0 !important;
    border-right: 1px solid #e5eaf0 !important;
}

/* Remove button */
.cheetah-cart-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--cheetah-secondary, #64748b);
    background: transparent;
    transition: color 150ms ease, background-color 150ms ease;
    text-decoration: none;
}

.cheetah-cart-remove:hover,
.cheetah-cart-remove:focus-visible {
    color: #dc2626;
    background: #fef2f2;
    outline: none;
}

/* Thumbnail */
.cheetah-cart-thumb-link img,
.cheetah-cart-table .product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    background: #fff;
}

/* Product title */
.cheetah-cart-product-title {
    font-weight: 600;
    color: var(--cheetah-heading, #0f172a);
    text-decoration: none;
    line-height: 1.35;
    transition: color 150ms ease;
}

.cheetah-cart-product-title:hover {
    color: var(--cheetah-primary, #2563eb);
}

.cheetah-cart-table .variation,
.cheetah-cart-table .backorder_notification {
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cheetah-secondary, #64748b);
}

.cheetah-cart-table .variation p {
    margin: 0;
}

/* Quantity stepper */
.cheetah-cart-table .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d9e1eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.cheetah-cart-table .qty {
    width: 2.85rem;
    text-align: center;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600;
    padding: 0.48rem 0;
    background: transparent;
    -moz-appearance: textfield;
}

.cheetah-cart-table .qty::-webkit-outer-spin-button,
.cheetah-cart-table .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   CART ACTIONS – separated cleanly from the product table
   ============================================================ */
.cheetah-cart__actions {
    margin-top: 0.9rem;
    padding: 1rem 1.25rem;
    background: var(--cheetah-bg, #fff);
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.cheetah-cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}

/* Coupon – single seamless unit */
.cheetah-cart-coupon {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    max-width: 420px;
    min-width: 260px;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cheetah-cart-coupon:focus-within {
    border-color: var(--cheetah-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Kill every default border / shadow on the input */
.cheetah-cart-coupon .input-text,
.cheetah-cart-coupon .cheetah-cart-coupon__input,
.cheetah-cart-coupon input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0.7rem 1rem !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 0.9375rem;
    line-height: 1.4;
    height: auto !important;
}

.cheetah-cart-coupon .input-text::placeholder,
.cheetah-cart-coupon__input::placeholder {
    color: #94a3b8;
}

/* Apply button – flush with input, no extra border */
.cheetah-cart-coupon .button,
.cheetah-cart-coupon .cheetah-btn,
.cheetah-cart-coupon button[name="apply_coupon"] {
    position: relative;
    top: 0 !important;
    transform: none !important;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0.7rem 1.2rem !important;
    border: none !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--cheetah-border, #e2e8f0) !important;
    background: #f1f5f9 !important;
    color: var(--cheetah-heading, #0f172a) !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    height: auto !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cheetah-cart-coupon .button:hover,
.cheetah-cart-coupon .cheetah-btn:hover,
.cheetah-cart-coupon button[name="apply_coupon"]:hover {
    top: 0 !important;
    transform: none !important;
    background: var(--cheetah-primary, #2563eb) !important;
    color: #fff !important;
    border-left-color: var(--cheetah-primary, #2563eb) !important;
}

/* Update cart button */
.cheetah-cart-actions > .button,
.cheetah-cart-actions > .cheetah-btn--ghost,
.cheetah-cart-actions button[name="update_cart"] {
    padding: 0.7rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    background: #fff;
    color: var(--cheetah-secondary, #64748b);
    transition: all 0.15s ease;
}

.cheetah-cart-actions > .button:hover:not(:disabled),
.cheetah-cart-actions > .cheetah-btn--ghost:hover:not(:disabled),
.cheetah-cart-actions button[name="update_cart"]:hover:not(:disabled) {
    border-color: var(--cheetah-primary, #2563eb);
    color: var(--cheetah-primary, #2563eb);
    background: #eff6ff;
}

.cheetah-cart-actions > .button:disabled,
.cheetah-cart-actions button[name="update_cart"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================================================
   Order summary (sticky)
   ============================================================ */
.cheetah-cart-collaterals {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cheetah-cart-totals {
    background: var(--cheetah-bg, #fff);
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 14px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.045);
}

@media (min-width: 992px) {
    .cheetah-cart-totals {
        position: sticky;
        top: calc(var(--cheetah-header-height, 80px) + 1.5rem);
    }
}

.cheetah-cart-totals__title {
    margin: 0 0 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--cheetah-border, #e2e8f0);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cheetah-heading, #0f172a);
}

.cheetah-cart-totals__table {
    width: 100%;
    margin: 0 0 1.25rem;
    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    table-layout: fixed;
}

.cheetah-cart-totals__table th,
.cheetah-cart-totals__table td {
    padding: 0.78rem 0;
    border: 0 !important;
    background: transparent !important;
    font-size: 0.9375rem;
    line-height: 1.45;
    vertical-align: top;
}

.cheetah-cart-totals__table tbody tr + tr th,
.cheetah-cart-totals__table tbody tr + tr td {
    border-top: 1px solid #edf1f5 !important;
}

.cheetah-cart-totals__table th {
    width: 38%;
    padding-right: 1.25rem;
    color: var(--cheetah-secondary, #64748b);
    font-weight: 500;
    text-align: left;
}

.cheetah-cart-totals__table td {
    width: 62%;
    color: var(--cheetah-heading, #0f172a);
    font-weight: 600;
    text-align: right;
}

.cheetah-cart-totals__table .cart-discount th,
.cheetah-cart-totals__table .cart-discount td {
    color: #059669;
}

.cheetah-cart-totals__table .cart-discount a.woocommerce-remove-coupon {
    color: #dc2626;
    font-size: 0.8125rem;
    text-decoration: none;
}

.cheetah-cart-totals__table .cart-discount a.woocommerce-remove-coupon:hover {
    text-decoration: underline;
}

.cheetah-cart-totals__table .woocommerce-shipping-totals.shipping th,
.cheetah-cart-totals__table .woocommerce-shipping-totals.shipping td {
    padding-top: 0.78rem;
    padding-bottom: 0.78rem;
}

.cheetah-cart-totals__table .woocommerce-shipping-methods {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cheetah-cart-totals__table .woocommerce-shipping-methods li {
    margin: 0;
    padding: 0;
    line-height: 1.45;
}

.cheetah-cart-totals__table .woocommerce-shipping-methods li label {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: 100%;
    color: var(--cheetah-heading, #0f172a);
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
}

.cheetah-cart-totals__table .woocommerce-shipping-methods li label .woocommerce-Price-amount {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cheetah-cart-totals__table .woocommerce-shipping-destination {
    display: block;
    width: 100%;
    margin: 0.45rem 0 0.7rem;
    color: var(--cheetah-secondary, #64748b);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: right;
    overflow-wrap: normal;
}

.cheetah-cart-totals__table .woocommerce-shipping-destination strong {
    color: var(--cheetah-text, #1e293b);
    font-weight: 600;
}

.cheetah-cart-totals__table .order-total th,
.cheetah-cart-totals__table .order-total td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid var(--cheetah-border, #e2e8f0) !important;
    background: transparent !important;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cheetah-heading, #0f172a);
}

.cheetah-cart-totals__table .order-total th,
.cheetah-cart-totals__table .order-total td {
    border-radius: 0;
}

/* ============================================================
   Shipping calculator – modal address editor
   ============================================================ */
.woocommerce-shipping-destination {
    font-size: 0.875rem;
    color: var(--cheetah-secondary, #64748b);
    margin: 0.35rem 0 0.75rem;
}

.cheetah-shipping-calculator {
    display: inline-block;
}

/* The cart totals panel is a stacking context when it is sticky on desktop.
   Raise that parent while the modal is open so the fixed overlay can appear
   above the fixed site header instead of being painted underneath it. */
.cheetah-cart-totals.cheetah-shipping-modal-parent-open {
    z-index: 100010;
}

/* Trigger button */
.cheetah-shipping-calculator__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cheetah-heading, #0f172a);
    background: #fff;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 9px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    cursor: pointer;
}

.cheetah-shipping-calculator__trigger-icon {
    flex: 0 0 auto;
}

.cheetah-shipping-calculator__trigger:hover,
.cheetah-shipping-calculator__trigger:focus-visible,
.cheetah-shipping-calculator.is-open .cheetah-shipping-calculator__trigger {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: var(--cheetah-primary, #2563eb);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
    outline: none;
}

.cheetah-shipping-calculator__trigger:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   SHIPPING CALCULATOR MODAL — overlay as the layout container
   ==========================================================================
   The overlay is both the dimmed backdrop AND the layout container for the
   dialog. The dialog is a plain flex item with no positioning of its own.

   Why this structure (and not `position: fixed; top: 50%; left: 50%;
   transform: translate(-50%, -50%)` on the dialog):

     A CSS `transform` on the dialog turns it into the containing block
     for absolutely positioned descendants AND the reference frame that
     Select2 measures against when positioning its dropdown. With the
     dialog transformed, Select2's position math placed its dropdown at
     the bottom of the modal instead of beneath the country/state field.

     By keeping the dialog transform-free and letting the overlay own the
     layout, Select2's default `document.body` parent positions the
     dropdown correctly beneath the field.

   Vertical anchoring — top-anchored, not centered
   ------------------------------------------------
   The dialog is TOP-ANCHORED: it hugs the top of the overlay's content
   box (just below the fixed header), and all the remaining vertical
   space flows to the bottom of the overlay.

   This is the modern form-modal pattern (Notion, Linear, GitHub,
   Stripe, Radix UI) and it directly addresses the ergonomics of the
   shipping calculator form:

     • The dialog sits as high as possible, so its content — and any
       Select2 dropdown that opens beneath a field — is visible without
       the user having to scroll.
     • On mobile, when the soft keyboard shrinks the visible area, the
       dialog is not pushed further down by centering auto-margins, so
       the country/state dropdown still has room to display above the
       keyboard.
     • The bottom of the overlay is generous (see the overlay's
       padding-bottom), giving the dialog's content a large visual
       buffer and any dropdown plenty of vertical room to expand into.

   Horizontal centering is still handled by the overlay's
   `align-items: center`.

   The overlay's top padding reserves the fixed header's height plus a
   small offset, so the header stays visible above the dialog and the
   dialog's top edge is never covered.
   ========================================================================== */

.cheetah-shipping-calculator__backdrop {
    position: fixed;
    inset: 0;
    z-index: 99990;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* No `justify-content` — the dialog is top-anchored via its own
       `margin-block: 0` (see below), and the free vertical space falls
       naturally below the dialog. */

    /* Asymmetric padding: small at the top, generous at the bottom.

       The top offset is `header + 1rem` so the dialog sits just below
       the fixed header with a comfortable 1rem gap. The 2rem bottom
       padding is the minimum visual gap under the dialog and gives any
       dropdown or trailing content room to breathe. */
    padding:
            calc(var(--cheetah-header-offset, 0px) + 1rem)
            1rem
            2rem;

    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background: rgba(15, 23, 42, 0.48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/*
 * The `[hidden]` attribute is used as the single source of truth for
 * modal visibility. `display: none` overrides `display: flex` regardless
 * of source order because it carries `!important`.
 */
.cheetah-shipping-calculator__backdrop[hidden] {
    display: none !important;
}

/*
 * The dialog is a plain flex item. It has no `position`, no `top/left`,
 * no `transform`, and no `z-index` of its own — the overlay's stacking
 * context handles layering, and the flex container handles layout.
 *
 * `margin-block: 0` (both top and bottom auto-margins removed) keeps the
 * dialog pinned to the top of the overlay's content box. The overlay's
 * top padding therefore becomes the *only* gap between the fixed header
 * and the dialog — small, predictable, and independent of viewport
 * height. See the "Vertical anchoring" note above.
 */
.cheetah-shipping-calculator__dialog {
    display: flex;
    flex-direction: column;

    /* Horizontal centering is done by the overlay's `align-items: center`;
       the width is capped so it never exceeds the overlay's content box. */
    width: min(560px, 100%);

    /* Height cap: the overlay's content box (viewport minus header offset
       minus the overlay's own padding). The dialog's internal body then
       scrolls if its content exceeds this cap. */
    max-height: calc(100vh - var(--cheetah-header-offset, 0px) - 3rem);
    max-height: calc(100dvh - var(--cheetah-header-offset, 0px) - 3rem);

    /* Top-anchored. `margin-block: 0` removes the auto-margins that were
       previously centering the dialog vertically — this is the one-line
       change that reduces the top gap and increases the bottom gap. */
    margin-block: 0;
    margin-inline: 0;

    padding: 0;
    overflow: hidden;
    flex-shrink: 0;

    background: var(--cheetah-bg, #fff);
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);

    text-align: left;
}

.cheetah-shipping-calculator__header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid var(--cheetah-border, #e2e8f0);
    background: #fff;
}

.cheetah-shipping-calculator__heading {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--cheetah-heading, #0f172a);
}

.cheetah-shipping-calculator__description {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cheetah-secondary, #64748b);
}

.cheetah-shipping-calculator__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--cheetah-secondary, #64748b);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cheetah-shipping-calculator__close:hover,
.cheetah-shipping-calculator__close:focus-visible {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--cheetah-heading, #0f172a);
    outline: none;
}

.cheetah-shipping-calculator__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.35rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    text-align: left;
}

/* Keep the modal scrollbar visually integrated with the dialog instead of
   creating a second-looking scrollbar outside the rounded modal surface. */
.cheetah-shipping-calculator__body::-webkit-scrollbar {
    width: 10px;
}

.cheetah-shipping-calculator__body::-webkit-scrollbar-track {
    background: transparent;
}

.cheetah-shipping-calculator__body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.cheetah-shipping-calculator__body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.cheetah-shipping-calculator__dialog .shipping-calculator-form__fields,
.cheetah-shipping-calculator__dialog .form-row,
.cheetah-shipping-calculator__dialog .form-row label,
.cheetah-shipping-calculator__dialog input,
.cheetah-shipping-calculator__dialog select {
    text-align: left;
}

.cheetah-shipping-calculator__dialog .form-row {
    margin: 0;
}

.cheetah-shipping-calculator__dialog .form-row label {
    display: block;
    margin: 0 0 0.38rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cheetah-heading, #0f172a);
}

.cheetah-shipping-calculator__dialog .required {
    color: #dc2626;
}

.cheetah-shipping-calculator__dialog .input-text,
.cheetah-shipping-calculator__dialog select,
.cheetah-shipping-calculator__dialog .country_to_state,
.cheetah-shipping-calculator__dialog .state_select {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 9px;
    background: #fff;
    color: var(--cheetah-heading, #0f172a);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}

.cheetah-shipping-calculator__dialog .input-text:focus,
.cheetah-shipping-calculator__dialog select:focus,
.cheetah-shipping-calculator__dialog .country_to_state:focus,
.cheetah-shipping-calculator__dialog .state_select:focus {
    outline: none;
    border-color: var(--cheetah-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* --------------------------------------------------------------------------
   WooCommerce SelectWoo country / state controls

   The dropdown is intentionally kept on Select2's default parent
   (document.body). Because the dialog has no transform, Select2's
   position math places the dropdown directly beneath the field.

   The dropdown is NOT a descendant of the dialog when it lives on
   <body>, so all dropdown selectors are scoped to the
   `body.cheetah-shipping-modal-open` state class instead.
   -------------------------------------------------------------------------- */

/* Trigger box (still inside the dialog, where the original <select> was). */
.cheetah-shipping-calculator__dialog .select2-container {
    width: 100% !important;
    font-size: 0.9375rem;
}

.cheetah-shipping-calculator__dialog .select2-container--default .select2-selection--single {
    height: 44px;
    padding: 0;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 9px;
    background: #fff;
    color: var(--cheetah-heading, #0f172a);
    box-shadow: none;
}

.cheetah-shipping-calculator__dialog .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block;
    padding: 0 2.9rem 0 0.9rem;
    color: var(--cheetah-heading, #0f172a);
    line-height: 42px;
}

.cheetah-shipping-calculator__dialog .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
}

.cheetah-shipping-calculator__dialog .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0.7rem;
    width: 1.3rem;
    height: 42px;
}

.cheetah-shipping-calculator__dialog .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: -0.25rem;
    border-color: #64748b transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}

.cheetah-shipping-calculator__dialog .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #64748b transparent;
    border-width: 0 4px 5px 4px;
}

.cheetah-shipping-calculator__dialog .select2-container--default.select2-container--focus .select2-selection--single,
.cheetah-shipping-calculator__dialog .select2-container--default.select2-container--open .select2-selection--single {
    outline: none;
    border-color: var(--cheetah-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Dropdown panel — appended to <body>, scoped by the modal-open body class.

   The cart totals panel is intentionally raised to 100010 while the modal
   is open. Because that panel forms its own stacking context, the dropdown
   on <body> must sit ABOVE the entire panel, not merely above the dialog
   child. */
body.cheetah-shipping-modal-open .select2-container--open {
    z-index: 100020 !important;
}

body.cheetah-shipping-modal-open .select2-dropdown {
    z-index: 100021 !important;
    margin-top: 0.3rem;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

body.cheetah-shipping-modal-open .select2-search--dropdown {
    padding: 0.55rem;
    background: #fff;
}

body.cheetah-shipping-modal-open .select2-search--dropdown .select2-search__field {
    width: 100%;
    min-height: 40px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 8px;
    color: var(--cheetah-heading, #0f172a);
    font: inherit;
    box-shadow: none;
}

body.cheetah-shipping-modal-open .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--cheetah-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

body.cheetah-shipping-modal-open .select2-results {
    max-height: 260px;
    overflow-y: auto;
}

body.cheetah-shipping-modal-open .select2-results__option {
    padding: 0.65rem 0.75rem;
    color: var(--cheetah-heading, #0f172a);
    font-size: 0.9rem;
    line-height: 1.35;
}

body.cheetah-shipping-modal-open .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #eff6ff;
    color: var(--cheetah-primary, #2563eb);
}

body.cheetah-shipping-modal-open .select2-container--default .select2-results__option[aria-selected='true'] {
    background: transparent;
    color: var(--cheetah-heading, #0f172a);
    font-weight: 600;
}

.shipping-calculator-form__fields {
    display: grid;
    gap: 1rem;
}

.shipping-calculator-form__fields > .form-row-wide {
    width: 100%;
}

.shipping-calculator-form__fields > .form-row-half {
    width: 100%;
}

.shipping-calculator-form__actions {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--cheetah-border, #e2e8f0);
}

.cheetah-shipping-calculator__dialog .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0.8rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 10px;
    border: none;
    background: var(--cheetah-primary, #2563eb);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.cheetah-shipping-calculator__dialog .button:hover,
.cheetah-shipping-calculator__dialog .button:focus-visible {
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    outline: none;
}

.cheetah-shipping-calculator__dialog .button:active {
    transform: translateY(1px);
}

body.cheetah-shipping-modal-open {
    overflow: hidden;
}

@media (min-width: 640px) {
    .shipping-calculator-form__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shipping-calculator-form__fields > .form-row-wide {
        grid-column: 1 / -1;
    }

    .shipping-calculator-form__fields > .form-row-half {
        grid-column: span 1;
    }
}

/* --------------------------------------------------------------------------
   Mobile — the tightest possible top offset and a generous bottom buffer.
   --------------------------------------------------------------------------
   This is the primary ergonomic improvement for mobile devices. The dialog
   is anchored just 0.5rem below the header, so its content sits as high up
   as possible in the visible viewport. When the soft keyboard appears and
   shrinks the visible area, the country/state dropdown still has room to
   display below the field without being pushed off-screen.

   The bottom padding is deliberately larger than on desktop (1.5rem vs.
   2rem). Combined with the dialog's `margin-block: 0` top-anchoring, this
   creates a strong asymmetric visual balance — the dialog is anchored high,
   with the visual "weight" of the layout falling downward.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .cheetah-shipping-calculator__backdrop {
        /* Tighter than desktop: the mobile header offset plus a very small
           offset. The 0.5rem bottom padding is the minimum visual gap
           under the dialog; the dialog's top-anchored position pushes all
           remaining vertical space to the bottom of the viewport. */
        padding:
                calc(var(--cheetah-header-offset, 72px) + 0.5rem)
                0.5rem
                1.5rem;
    }

    .cheetah-shipping-calculator__dialog {
        width: 100%;

        /* The dialog's max-height must fit inside the overlay's content
           box: viewport height minus the overlay's top and bottom padding.
           Top padding here is `header + 0.5rem`, bottom is `1.5rem`, so
           the cap is `100dvh - header - 2rem`.
           Using 100dvh (not 100vh) ensures the cap tracks the visible
           viewport as the keyboard shrinks it, so the dialog always fits
           on screen and its own body scrolls internally. */
        max-height: calc(100vh - var(--cheetah-header-offset, 72px) - 2rem);
        max-height: calc(100dvh - var(--cheetah-header-offset, 72px) - 2rem);

        border-radius: 14px;
    }

    .cheetah-shipping-calculator__header,
    .cheetah-shipping-calculator__body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cheetah-shipping-calculator__body {
        scrollbar-gutter: auto;
    }
}

/* --------------------------------------------------------------------------
   Short desktop / tablet viewports — same asymmetric rhythm, scaled down.
   --------------------------------------------------------------------------
   On short viewports the vertical breathing room is naturally tighter, so
   the top and bottom padding are reduced proportionally. The asymmetry is
   preserved: the top stays small, the bottom stays larger. */
@media (min-width: 640px) and (max-height: 760px) {
    .cheetah-shipping-calculator__backdrop {
        padding:
                calc(var(--cheetah-header-offset, 0px) + 0.5rem)
                1rem
                1.25rem;
    }

    .cheetah-shipping-calculator__dialog {
        /* Overlay padding totals `header + 1.75rem`, so the dialog cap
           is `100dvh - header - 1.75rem`. */
        max-height: calc(100vh - var(--cheetah-header-offset, 0px) - 1.75rem);
        max-height: calc(100dvh - var(--cheetah-header-offset, 0px) - 1.75rem);
    }
}

/* Proceed to checkout */
.cheetah-cart-totals__checkout .checkout-button,
.cheetah-cart-totals__checkout .wc-forward {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.95rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--cheetah-primary, #2563eb);
    color: #fff !important;
    border-radius: 11px;
    border: none;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.cheetah-cart-totals__checkout .checkout-button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* ============================================================
   Cross-sells
   ============================================================ */
.cheetah-cart-collaterals .cross-sells {
    margin-top: 0.25rem;
}

.cheetah-cart-collaterals .cross-sells > h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cheetah-heading, #0f172a);
    margin: 0 0 1.15rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cheetah-border, #e2e8f0);
}

.cheetah-cart-collaterals .cross-sells .products,
.cheetah-cart-collaterals .cross-sells ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cheetah-cart-collaterals .cross-sells .product,
.cheetah-cart-collaterals .cross-sells li.product {
    margin: 0;
    padding: 0;
    width: 100% !important;
    float: none !important;
}

.cheetah-cart-collaterals .cross-sells .cheetah-product-card,
.cheetah-cart-collaterals .cross-sells .woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
}

@media (max-width: 767px) {
    .cheetah-cart-collaterals .cross-sells .products,
    .cheetah-cart-collaterals .cross-sells ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ============================================================
   Empty cart
   ============================================================ */
.cheetah-cart-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    max-width: 480px;
    margin: 0 auto;
}

.cheetah-cart-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--cheetah-secondary, #64748b);
    margin-bottom: 1.5rem;
}

.cheetah-cart-empty__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cheetah-heading, #0f172a);
    margin: 0 0 0.75rem;
}

.cheetah-cart-empty__text {
    color: var(--cheetah-secondary, #64748b);
    margin: 0 0 1.75rem;
    line-height: 1.6;
}

.cheetah-cart-empty__actions {
    margin-bottom: 2rem;
}

.cheetah-cart-empty__search {
    max-width: 360px;
    margin: 0 auto;
}

/* ==========================================================================
   RESPONSIVE — MOBILE CART CARD LAYOUT
   ==========================================================================
   Breakpoint matches WooCommerce's own `.shop_table_responsive` breakpoint
   (max-width: 768px) so the two never fall out of sync at exactly 768px.

   Layout per cart item:

     ┌────────────┬──────────────────────────────────────┐
     │            │  Product Title                [×]     │
     │            │  Variation / add-on meta              │
     │   IMG      │  ─────────────────────────────────    │
     │   84px     │  PRICE               $29.99           │
     │  (vert.    │  QUANTITY            [- 2 +]          │
     │  centered) │  ─────────────────────────────────    │
     │            │  SUBTOTAL            $59.98           │
     └────────────┴──────────────────────────────────────┘

   Specificity strategy
   --------------------
   Every cell-specific rule uses the full path
   `body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.CLASS`
   so its specificity (0,0,5,4) beats the neutralization rule
   `... > td` (0,0,4,4) AND WooCommerce's own `.shop_table_responsive td`
   rules. This is why `display: flex` and `position: absolute` on the
   specific cells are guaranteed to win the cascade.
   ========================================================================== */
@media (max-width: 768px) {

    /* ------------------------------------------------------------------
       Table shell — collapse to block so the grid on `tr.cart_item` is
       not fighting a table formatting context.
       ------------------------------------------------------------------ */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tfoot {
        display: block !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table thead {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       Each cart item row becomes a two-column grid card.
       ------------------------------------------------------------------ */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.woocommerce-cart-form__cart-item {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto !important;
        column-gap: 1rem !important;
        row-gap: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 1.25rem 1.15rem !important;
        clear: none !important;
        float: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        transition: background-color 150ms ease;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item + tr.cart_item {
        border-top: 1px solid #eef2f7 !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item + tr.cart_item > td {
        border-top: 0 !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item:hover > td {
        background: transparent !important;
    }

    /* ------------------------------------------------------------------
       Cell-level neutralization (safe properties only).
       `display` and `position` are intentionally NOT set here — each
       cell sets its own display/position in its dedicated rule below.
       Setting them here would create a specificity trap where the
       dedicated rules would have to out-specify this rule, which is
       exactly the bug that made an earlier iteration fail.
       ------------------------------------------------------------------ */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        box-shadow: none !important;
        vertical-align: top !important;
    }

    /* Hide every ::before/::after on cells by default. Specific cells
       re-enable the ::before label below. This keeps the label from
       appearing on cells that should not have one. */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td::before,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td::after {
        content: none !important;
        display: none !important;
    }

    /* ------------------------------------------------------------------
       Remove button — circular × control, absolute top-right.
       Specificity 0,0,5,4 beats the neutralization rule's 0,0,4,4, so
       `position: absolute` wins and the button is taken out of the grid
       flow into the top-right corner.
       ------------------------------------------------------------------ */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-remove {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        left: auto !important;
        bottom: auto !important;
        display: block !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        z-index: 5 !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-remove .cheetah-cart-remove,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-remove a.remove {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        color: #64748b !important;
        background: #f8fafc !important;
        border: 1px solid #eef2f7 !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
        text-decoration: none !important;
        transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-remove .cheetah-cart-remove svg {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        color: inherit !important;
        stroke: currentColor !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-remove .cheetah-cart-remove:hover,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-remove .cheetah-cart-remove:focus-visible {
        color: #dc2626 !important;
        background: #fef2f2 !important;
        border-color: #fecaca !important;
        transform: scale(1.06) !important;
        outline: none !important;
    }

    /* ------------------------------------------------------------------
       Thumbnail — left column, vertically centered across the full row.
       ------------------------------------------------------------------ */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-thumbnail {
        grid-column: 1 !important;
        grid-row: 1 / -1 !important;
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 84px !important;
        min-width: 84px !important;
        height: auto !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-thumbnail .cheetah-cart-thumb-link {
        display: block !important;
        width: 84px !important;
        height: 84px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-thumbnail img {
        display: block !important;
        width: 84px !important;
        height: 84px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        border: 1px solid #eef2f7 !important;
    }

    /* ------------------------------------------------------------------
       Product name — top-right, reserves space for the × button.
       ------------------------------------------------------------------ */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 0 2.75rem 0.5rem 0 !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: var(--cheetah-heading, #0f172a) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-name .cheetah-cart-product-title {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* ------------------------------------------------------------------
       Price / Quantity / Subtotal — label + value on ONE line.
       ------------------------------------------------------------------
       Each cell is a flex row (0,0,5,4 specificity — wins). The ::before
       pseudo renders the label from data-title on the left; the value
       child flows on the same line on the right. `flex-wrap: nowrap`
       guarantees they never wrap.
       ------------------------------------------------------------------ */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-price,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-quantity,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-subtotal {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding: 0.4rem 0 !important;
        text-align: right !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-price {
        grid-row: 2 !important;
        padding-top: 0.6rem !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-quantity {
        grid-row: 3 !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-subtotal {
        grid-row: 4 !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0 !important;
        margin-top: 0.4rem !important;
        border-top: 1px dashed #e5edf7 !important;
    }

    /* Re-enable the ::before label for these three cells. Specificity
       0,0,5,5 beats the neutralization rule's 0,0,4,5. */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-price::before,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-quantity::before,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-subtotal::before {
        content: attr(data-title) !important;
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #94a3b8 !important;
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Value — the direct child of the flex cell. `margin-left: auto`
       pushes it to the right of the flex line so the label stays on the
       left and the value sits on the same line. */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-price > *,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-quantity > *,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-subtotal > * {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: auto !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-price,
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-subtotal {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: var(--cheetah-heading, #0f172a) !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-subtotal {
        font-weight: 700 !important;
        font-size: 1rem !important;
    }

    /* Quantity stepper — compact, sits on the same flex line as the
       "QUANTITY" label. */
    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-quantity .quantity {
        display: inline-flex !important;
        width: 100px !important;
        min-width: 100px !important;
        height: 36px !important;
        border-radius: 8px !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-quantity .cheetah-qty-btn {
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 34px !important;
    }

    body.woocommerce-cart .cheetah-cart__table-wrap .cheetah-cart-table tbody tr.cart_item > td.product-quantity .qty {
        width: 38px !important;
        min-width: 0 !important;
        height: 34px !important;
    }

    /* ------------------------------------------------------------------
       Actions bar and totals
       ------------------------------------------------------------------ */
    .cheetah-cart__actions {
        padding: 1rem;
    }

    .cheetah-cart-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .cheetah-cart-coupon {
        max-width: none;
        width: 100%;
    }

    .cheetah-cart-actions > .button,
    .cheetah-cart-actions > .cheetah-btn--ghost,
    .cheetah-cart-actions button[name="update_cart"] {
        width: 100%;
        justify-content: center;
    }

    .cheetah-cart-totals {
        padding: 1.25rem 1.15rem;
    }

    .cheetah-cart-totals__table th {
        width: 44%;
    }

    .cheetah-cart-totals__table td {
        width: 56%;
    }

    .cheetah-cart-totals__table .order-total th,
    .cheetah-cart-totals__table .order-total td {
        font-size: 1rem;
    }
}