/**
 * Cheetah WooCommerce — Cart Drawer
 *
 * Site-wide styling for the shared sliding Cart Drawer, its header trigger,
 * and the optional floating trigger.
 *
 * The drawer deliberately does not reuse the cart-page table styles because
 * it is a site-wide component and needs its own responsive interaction model.
 *
 * @package Cheetah
 * @author  Jack Chung <wp-seo.info>
 * @since   1.0.0
 */

/*
 * Shared Cart Drawer tokens.
 *
 * The header mini-cart and the floating mini-cart live in the header
 * and footer respectively — outside the `.cheetah-cart-drawer` DOM
 * tree. The drawer's own custom properties (declared below on
 * `.cheetah-cart-drawer`) do not cascade to those sibling components,
 * which meant `var(--cheetah-cart-drawer-primary)` resolved to nothing
 * outside the drawer. That caused the header count badge and the
 * floating trigger to render with unstyled (transparent) surfaces:
 * white text on a transparent background, effectively invisible.
 *
 * Declaring the shared tokens at `:root` makes them available
 * everywhere on the page. Drawer-specific tokens (width, radius,
 * shadow, checkout button colours, etc.) remain scoped to
 * `.cheetah-cart-drawer` further down.
 */
:root {
    --cheetah-cart-drawer-primary: var(--cheetah-primary, #0d76b8);
    --cheetah-cart-drawer-bg: var(--cheetah-bg, #ffffff);
    --cheetah-cart-drawer-text: var(--cheetah-heading, #0f172a);
    --cheetah-cart-drawer-muted: var(--cheetah-secondary, #64748b);
    --cheetah-cart-drawer-heading: var(--cheetah-heading, #0f172a);
    --cheetah-cart-drawer-border: var(--cheetah-border, #e2e8f0);
}

.cheetah-cart-drawer {
    --cheetah-cart-drawer-width: 420px;
    --cheetah-cart-drawer-overlay: rgba(15, 23, 42, 0.48);
    --cheetah-cart-drawer-radius: 0;
    --cheetah-cart-drawer-shadow: 0 22px 70px rgba(15, 23, 42, 0.22);
    --cheetah-cart-drawer-duration: 280ms;

    /*
     * Checkout button — driven by the dedicated Cart Drawer options
     * (cart_drawer_checkout_bg / _text_color / _hover_bg / _hover_text_color).
     * Empty option values leave the dynamic CSS variables unset, in which
     * case the fallbacks below inherit the drawer's primary colour so the
     * button always matches the rest of the component.
     */
    --cheetah-cart-drawer-checkout-bg: var(--cheetah-cart-drawer-primary);
    --cheetah-cart-drawer-checkout-text: #ffffff;
    --cheetah-cart-drawer-checkout-hover-bg: var(--cheetah-cart-drawer-primary);
    --cheetah-cart-drawer-checkout-hover-text: #ffffff;

    position: fixed;
    inset: 0;
    z-index: 100020;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

.cheetah-cart-drawer.is-open,
.cheetah-cart-drawer.is-closing {
    visibility: visible;
}

.cheetah-cart-drawer.is-open {
    pointer-events: auto;
}

.cheetah-cart-drawer.is-closing {
    pointer-events: none;
}

.cheetah-cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: var(--cheetah-cart-drawer-overlay);
    opacity: 0;
    transition: opacity var(--cheetah-cart-drawer-duration) ease;
    cursor: pointer;
}

.cheetah-cart-drawer.is-open .cheetah-cart-drawer__backdrop {
    opacity: 1;
}

.cheetah-cart-drawer__dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(var(--cheetah-cart-drawer-width), 100vw);
    max-width: 100vw;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--cheetah-cart-drawer-text);
    background: var(--cheetah-cart-drawer-bg);
    border-left: 1px solid var(--cheetah-cart-drawer-border);
    border-radius: var(--cheetah-cart-drawer-radius) 0 0 var(--cheetah-cart-drawer-radius);
    box-shadow: var(--cheetah-cart-drawer-shadow);
    transform: translateX(100%);
    opacity: 0.98;
    transition: transform var(--cheetah-cart-drawer-duration) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--cheetah-cart-drawer-duration) ease;

    /* Suppress the translucent tap flash on iOS Safari and Android Chrome. */
    -webkit-tap-highlight-color: transparent;
}

.cheetah-cart-drawer[data-side="left"] .cheetah-cart-drawer__dialog {
    right: auto;
    left: 0;
    border-right: 1px solid var(--cheetah-cart-drawer-border);
    border-left: 0;
    border-radius: 0 var(--cheetah-cart-drawer-radius) var(--cheetah-cart-drawer-radius) 0;
    transform: translateX(-100%);
}

.cheetah-cart-drawer.is-open .cheetah-cart-drawer__dialog {
    transform: translateX(0);
    opacity: 1;
}

.cheetah-cart-drawer__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--cheetah-cart-drawer-border);
    background: var(--cheetah-cart-drawer-bg);
}

.cheetah-cart-drawer__header-content {
    min-width: 0;
}

.cheetah-cart-drawer__title {
    margin: 0;
    /* Heading colour is configurable independently of the panel text colour. */
    color: var(--cheetah-cart-drawer-heading, var(--cheetah-cart-drawer-text));
    font: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.cheetah-cart-drawer__count {
    display: block;
    margin-top: 0.22rem;
    color: var(--cheetah-cart-drawer-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.cheetah-cart-drawer__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--cheetah-cart-drawer-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.cheetah-cart-drawer__close:hover,
.cheetah-cart-drawer__close:focus-visible {
    color: var(--cheetah-cart-drawer-primary);
    background: color-mix(in srgb, var(--cheetah-cart-drawer-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--cheetah-cart-drawer-primary) 18%, transparent);
    outline: none;
}

.cheetah-cart-drawer__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.cheetah-cart-drawer__messages {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem 1rem 0;
}

.cheetah-cart-drawer__message {
    padding: 0.75rem 0.85rem;
    color: var(--cheetah-cart-drawer-text);
    background: #f8fafc;
    border: 1px solid var(--cheetah-cart-drawer-border);
    border-radius: 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.cheetah-cart-drawer__message--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cheetah-cart-drawer__message--error {
    background: #fef2f2;
    border-color: #fecaca;
}

.cheetah-cart-drawer__message--warning {
    background: #fffbeb;
    border-color: #fde68a;
}

.cheetah-cart-drawer__items {
    display: grid;
}

/*
 * Cart item row.
 *
 * Padding is symmetric on all four sides so the item's content — the
 * 76px thumbnail in particular — always has a 1rem buffer above the
 * bottom divider, no matter which column happens to be taller.
 *
 * The previous asymmetric padding (`1rem 1rem 0`, with `padding-top`
 * reduced to 0.85rem on subsequent rows and `padding-bottom` restored
 * only on the last row) left non-last items with zero bottom padding.
 * When the thumbnail column was taller than the text column, the row
 * height collapsed to `padding-top + 76px`, and the thumbnail's bottom
 * edge landed directly on the divider — the "thumbnail touching the
 * border" that the previous report flagged. Symmetric padding fixes it
 * structurally rather than patching individual rows.
 *
 * Row separation between items is therefore:
 *
 *   [item content]  ← 1rem →  [item content]
 *                    divider
 *
 * with 1rem of breathing room above and below every divider.
 */
.cheetah-cart-drawer-item {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1rem;
}

.cheetah-cart-drawer-item::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 0;
    left: 1rem;
    height: 1px;
    background: var(--cheetah-cart-drawer-border);
}

.cheetah-cart-drawer-item:last-child::after {
    display: none;
}

.cheetah-cart-drawer-item__thumbnail {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.cheetah-cart-drawer-item__thumbnail-link,
.cheetah-cart-drawer-item__thumbnail > img {
    display: block;
    width: 76px;
    height: 76px;
}

.cheetah-cart-drawer-item__thumbnail-link {
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid var(--cheetah-cart-drawer-border);
    border-radius: 10px;
}

.cheetah-cart-drawer-item__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cheetah-cart-drawer-item__content {
    position: relative;
    min-width: 0;
    padding-right: 2rem;
}

.cheetah-cart-drawer-item__main {
    min-width: 0;
}

.cheetah-cart-drawer-item__title {
    margin: 0;
    color: var(--cheetah-cart-drawer-text);
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.4;

    /* Break long unbreakable strings (SKU-shaped names, compound German
       nouns, Cyrillic without spaces) so they cannot overflow the drawer. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cheetah-cart-drawer-item__title a {
    color: inherit;
    text-decoration: none;
}

.cheetah-cart-drawer-item__title a:hover,
.cheetah-cart-drawer-item__title a:focus-visible {
    color: var(--cheetah-cart-drawer-primary);
    outline: none;
}

.cheetah-cart-drawer-item__meta {
    margin-top: 0.35rem;
    color: var(--cheetah-cart-drawer-muted);
    font-size: 0.75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cheetah-cart-drawer-item__meta p,
.cheetah-cart-drawer-item__meta dl {
    margin: 0;
}

.cheetah-cart-drawer-item__meta dd,
.cheetah-cart-drawer-item__meta dt {
    display: inline;
    margin: 0;
}

/*
 * Pricing row — symmetric three-column grid.
 *
 *   [price]   [quantity]   [subtotal]
 *   1fr       96px         1fr
 *
 * The quantity column is a FIXED 96px, and the two 1fr columns are equal
 * by construction. That keeps the quantity control — or the limit badge
 * that replaces it — at a stable position regardless of how long the
 * subtotal string is. The previous `minmax(0, 1fr) auto auto` layout let
 * the flexible price column absorb the difference whenever the subtotal
 * grew, which shifted the quantity control left or right from row to row.
 *
 * Overflow on the price and subtotal is handled with ellipsis so a very
 * long formatted price can never push the layout.
 */
.cheetah-cart-drawer-item__pricing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    align-items: center;
    column-gap: 0.6rem;
    margin-top: 0.75rem;
}

.cheetah-cart-drawer-item__price {
    min-width: 0;
    color: var(--cheetah-cart-drawer-text);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cheetah-cart-drawer-item__quantity {
    display: inline-grid;
    grid-template-columns: 27px 42px 27px;
    align-items: center;
    overflow: hidden;
    justify-self: center;
    height: 32px;
    background: #fff;
    border: 1px solid var(--cheetah-cart-drawer-border);
    border-radius: 9px;
}

/*
 * Per-order limit badge.
 *
 * Rendered by cart-drawer-item.php when the item is sold individually
 * or the effective min and max quantities are equal — the same condition
 * the cart page's own quantity hook detects. Occupying the same 96px
 * grid column as the ± stepper would, so the row layout is identical
 * whether the item is limit-restricted or not.
 *
 * Horizontal centring — belt and braces
 * -------------------------------------
 * As a grid item, the badge defaults to `justify-self: stretch`, which
 * would stretch it to fill the 96px middle column and leave the text
 * flush against the start edge. The two declarations below close every
 * path to that outcome:
 *
 *   • `justify-self: center` — the correct, direct mechanism. Stops the
 *     badge from stretching and centres it inside the grid cell.
 *   • `margin-inline: auto` — a redundant fallback for the rare case
 *     where a browser or a downstream override drops `justify-self`.
 *     Both properties are no-ops once the badge is already centred, so
 *     keeping both is free.
 *
 * `text-align: center` on the badge itself centres the label inside the
 * pill regardless of how the pill is positioned; `justify-content:
 * center` (set on the inline-flex container) achieves the same thing on
 * the flex axis. Either alone would suffice; together they make the
 * centring resilient to any single-property regression.
 *
 * Visual grammar matches the cart-page badge in woocommerce.css: neutral
 * slate pill, tabular numerals, single-line text.
 */
.cheetah-cart-drawer-item__quantity-limit {
    justify-self: center;
    margin-inline: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 26px;
    padding: 0.3rem 0.6rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.005em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cheetah-cart-drawer-item__quantity-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 30px;
    padding: 0;
    color: var(--cheetah-cart-drawer-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.cheetah-cart-drawer-item__quantity-button:hover,
.cheetah-cart-drawer-item__quantity-button:focus-visible {
    color: #fff;
    background: var(--cheetah-cart-drawer-primary);
    outline: none;
}

/*
 * The quantity buttons live inside `.cheetah-cart-drawer-item__quantity`
 * which has `overflow: hidden` (to clip the rounded-corner join between
 * the − / input / + cells). An outward focus ring would be clipped by
 * the wrapper, so the ring is drawn inward here.
 */
.cheetah-cart-drawer-item__quantity :focus-visible {
    outline-offset: -2px;
}

.cheetah-cart-drawer-item__quantity-input {
    width: 42px;
    height: 30px;
    padding: 0 0.2rem;
    color: var(--cheetah-cart-drawer-text);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--cheetah-cart-drawer-border);
    border-left: 1px solid var(--cheetah-cart-drawer-border);
    border-radius: 0;
    text-align: center;
    font: inherit;
    font-size: 0.75rem;
    appearance: textfield;
}

.cheetah-cart-drawer-item__quantity-input::-webkit-outer-spin-button,
.cheetah-cart-drawer-item__quantity-input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.cheetah-cart-drawer-item__quantity-input:focus {
    outline: none;
}

.cheetah-cart-drawer-item__subtotal {
    min-width: 0;
    color: var(--cheetah-cart-drawer-text);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cheetah-cart-drawer-item__quantity-label {
    color: var(--cheetah-cart-drawer-muted);
    font-size: 0.75rem;
}

.cheetah-cart-drawer-item__remove {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--cheetah-cart-drawer-muted);
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 120ms ease, color 120ms ease;
}

.cheetah-cart-drawer-item__remove:hover,
.cheetah-cart-drawer-item__remove:focus-visible {
    color: #b91c1c;
    background: #fef2f2;
    outline: none;
}

.cheetah-cart-drawer-item [aria-busy="true"] {
    cursor: wait;
    opacity: 0.55;
}

.cheetah-cart-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 42vh;
    padding: 2rem 1.25rem;
    text-align: center;
}

.cheetah-cart-drawer__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    color: var(--cheetah-cart-drawer-primary);
    background: color-mix(in srgb, var(--cheetah-cart-drawer-primary) 8%, transparent);
    border-radius: 50%;
}

.cheetah-cart-drawer__empty-title {
    margin: 1rem 0 0;
    /* Heading colour is configurable independently of the panel text colour. */
    color: var(--cheetah-cart-drawer-heading, var(--cheetah-cart-drawer-text));
    font-size: 1rem;
}

.cheetah-cart-drawer__empty-text {
    max-width: 300px;
    margin: 0.45rem 0 0;
    color: var(--cheetah-cart-drawer-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.cheetah-cart-drawer__empty-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: 1rem;
    padding: 0.55rem 0.9rem;
    color: #fff;
    background: var(--cheetah-cart-drawer-primary);
    border-radius: 9px;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 650;
}

.cheetah-cart-drawer__empty-link:hover,
.cheetah-cart-drawer__empty-link:focus-visible {
    filter: brightness(0.95);
    color: #fff;
    outline: none;
}

.cheetah-cart-drawer__coupon,
.cheetah-cart-drawer__shipping,
.cheetah-cart-drawer__totals {
    margin: 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--cheetah-cart-drawer-border);
}

.cheetah-cart-drawer__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.cheetah-cart-drawer__section-title {
    margin: 0;
    /* Heading colour is configurable independently of the panel text colour. */
    color: var(--cheetah-cart-drawer-heading, var(--cheetah-cart-drawer-text));
    font-size: 0.875rem;
    font-weight: 700;
}

.cheetah-cart-drawer__coupon-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
}

.cheetah-cart-drawer__coupon-input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    color: var(--cheetah-cart-drawer-text);
    background: #fff;
    border: 1px solid var(--cheetah-cart-drawer-border);
    border-radius: 9px;
    font: inherit;
    font-size: 0.8125rem;
}

.cheetah-cart-drawer__coupon-input:focus {
    border-color: var(--cheetah-cart-drawer-primary);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cheetah-cart-drawer-primary) 12%, transparent);
}

.cheetah-cart-drawer__coupon-apply,
.cheetah-cart-drawer__shipping-action {
    min-height: 40px;
    padding: 0.55rem 0.8rem;
    color: var(--cheetah-cart-drawer-primary);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--cheetah-cart-drawer-primary) 25%, var(--cheetah-cart-drawer-border));
    border-radius: 9px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.cheetah-cart-drawer__coupon-apply:hover,
.cheetah-cart-drawer__coupon-apply:focus-visible,
.cheetah-cart-drawer__shipping-action:hover,
.cheetah-cart-drawer__shipping-action:focus-visible {
    color: #fff;
    background: var(--cheetah-cart-drawer-primary);
    border-color: var(--cheetah-cart-drawer-primary);
    outline: none;
}

.cheetah-cart-drawer__coupon-form.is-loading {
    opacity: 0.65;
    pointer-events: none;
}

.cheetah-cart-drawer__coupons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.cheetah-cart-drawer__coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.35rem 0.45rem 0.35rem 0.65rem;
    color: var(--cheetah-cart-drawer-text);
    background: #f8fafc;
    border: 1px solid var(--cheetah-cart-drawer-border);
    border-radius: 999px;
    font-size: 0.72rem;
}

.cheetah-cart-drawer__coupon-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cheetah-cart-drawer__coupon-chip button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--cheetah-cart-drawer-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.cheetah-cart-drawer__coupon-chip button:hover,
.cheetah-cart-drawer__coupon-chip button:focus-visible {
    color: #b91c1c;
    background: #fee2e2;
    outline: none;
}

.cheetah-cart-drawer__shipping-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--cheetah-cart-drawer-muted);
    font-size: 0.8rem;
}

.cheetah-cart-drawer__shipping-value {
    color: var(--cheetah-cart-drawer-text);
}

.cheetah-cart-drawer__shipping-note,
.cheetah-cart-drawer__final-notice {
    margin: 0.6rem 0 0;
    color: var(--cheetah-cart-drawer-muted);
    font-size: 0.74rem;
    line-height: 1.5;
}

.cheetah-cart-drawer__shipping-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.cheetah-cart-drawer__totals-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.cheetah-cart-drawer__total-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: baseline;
    padding: 0.42rem 0;
    font-size: 0.8125rem;
}

.cheetah-cart-drawer__total-row dt {
    color: var(--cheetah-cart-drawer-muted);
}

.cheetah-cart-drawer__total-row dd {
    margin: 0;
    color: var(--cheetah-cart-drawer-text);
    text-align: right;
    overflow-wrap: anywhere;
}

.cheetah-cart-drawer__total-row--grand {
    margin-top: 0.35rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--cheetah-cart-drawer-border);
    font-size: 0.95rem;
}

.cheetah-cart-drawer__total-row--grand dt,
.cheetah-cart-drawer__total-row--grand dd {
    color: var(--cheetah-cart-drawer-text);
    font-weight: 750;
}

.cheetah-cart-drawer__footer {
    display: grid;
    gap: 0.55rem;
    flex: 0 0 auto;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    background: var(--cheetah-cart-drawer-bg);
    border-top: 1px solid var(--cheetah-cart-drawer-border);
}

.cheetah-cart-drawer__continue,
.cheetah-cart-drawer__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.cheetah-cart-drawer__continue {
    color: var(--cheetah-cart-drawer-text);
    background: #fff;
    border: 1px solid var(--cheetah-cart-drawer-border);
}

.cheetah-cart-drawer__continue:hover,
.cheetah-cart-drawer__continue:focus-visible {
    color: var(--cheetah-cart-drawer-primary);
    border-color: color-mix(in srgb, var(--cheetah-cart-drawer-primary) 30%, var(--cheetah-cart-drawer-border));
    outline: none;
}

/*
 * Checkout button — driven by the dedicated Cart Drawer options.
 * The fallback chain is:
 *   1. --cheetah-cart-drawer-checkout-* (set only when the admin
 *      configured a specific colour)
 *   2. --cheetah-cart-drawer-primary (the drawer accent)
 *   3. hard-coded #ffffff (guarantees contrast even with no variables)
 */
.cheetah-cart-drawer__checkout {
    color: var(--cheetah-cart-drawer-checkout-text, #ffffff);
    background: var(--cheetah-cart-drawer-checkout-bg, var(--cheetah-cart-drawer-primary));
    border: 1px solid var(--cheetah-cart-drawer-checkout-bg, var(--cheetah-cart-drawer-primary));
}

.cheetah-cart-drawer__checkout:hover,
.cheetah-cart-drawer__checkout:focus-visible {
    color: var(--cheetah-cart-drawer-checkout-hover-text, var(--cheetah-cart-drawer-checkout-text, #ffffff));
    background: var(--cheetah-cart-drawer-checkout-hover-bg, var(--cheetah-cart-drawer-checkout-bg, var(--cheetah-cart-drawer-primary)));
    border-color: var(--cheetah-cart-drawer-checkout-hover-bg, var(--cheetah-cart-drawer-checkout-bg, var(--cheetah-cart-drawer-primary)));
    filter: brightness(0.94);
    transform: translateY(-1px);
    outline: none;
}

.cheetah-cart-drawer__checkout.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.cheetah-cart-drawer.is-refreshing .cheetah-cart-drawer__body::before {
    content: "";
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    z-index: 3;
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--cheetah-cart-drawer-primary) 20%, transparent);
    border-top-color: var(--cheetah-cart-drawer-primary);
    border-radius: 50%;
    animation: cheetah-cart-drawer-spin 650ms linear infinite;
}

.cheetah-cart-drawer.is-refreshing .cheetah-cart-drawer__items {
    opacity: 0.68;
    transition: opacity 120ms ease;
}

@keyframes cheetah-cart-drawer-spin {
    to { transform: rotate(360deg); }
}

body.cheetah-cart-drawer-open,
html.cheetah-cart-drawer-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header mini cart
   --------------------------------------------------------------------------
   Compact pill that reads as a single integrated control: the icon and
   its item-count badge share one relatively-positioned wrapper so the
   badge can be absolutely placed at the icon's top-right corner, and
   the running total sits to the right of that group.

   Why the icon group is wrapped
   -----------------------------
   The previous markup rendered the icon and the count as sibling flex
   items, so the badge appeared to the right of the icon in the flow
   rather than overlapping its corner. On Firefox the combination of
   `inline-flex` + `gap` + SVG intrinsic sizing produced a visibly
   misaligned layout that also drifted depending on the total's length.

   Wrapping the icon and badge in `.cheetah-mini-cart__icon-wrap` and
   positioning the badge absolutely gives a rock-solid layout on every
   engine: the wrapper is a fixed 24×24px box, the badge anchors to its
   top-right corner, and the outer flex layout only has two children —
   the icon group and the total — separated by a stable gap.
   -------------------------------------------------------------------------- */
.cheetah-mini-cart {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.cheetah-mini-cart__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 40px;
    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;

    /* Suppress the native tap flash on iOS Safari and Android Chrome. */
    -webkit-tap-highlight-color: transparent;
}

.cheetah-mini-cart__toggle:hover,
.cheetah-mini-cart__toggle:focus-visible,
.cheetah-mini-cart__toggle[aria-expanded="true"] {
    color: var(--cheetah-cart-drawer-primary);
    background: color-mix(in srgb, var(--cheetah-cart-drawer-primary) 8%, transparent);
    outline: none;
}

/*
 * Icon group.
 *
 * Fixed 24×24px box that anchors the badge. `position: relative` is
 * required so the badge's `position: absolute` resolves against this
 * element rather than the button.
 *
 * `flex-shrink: 0` guarantees the box keeps its dimensions even when the
 * total pushes the flex container.
 */
.cheetah-mini-cart__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.cheetah-mini-cart__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* Kill the inline-element baseline gap that some browsers add below
       an inline-flex child. */
    line-height: 0;
}

/*
 * The icon SVG is forced to exactly 24×24px so its rendered size is
 * identical on every browser, regardless of the SVG's own width/height
 * attributes or any inherited `font-size`. This is what makes the badge
 * position predictable.
 */
.cheetah-mini-cart__icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

/*
 * Count badge — absolutely positioned at the icon's top-right corner.
 *
 * The white "halo" is drawn with `box-shadow: 0 0 0 2px …` rather than
 * a real border so the badge's internal padding isn't consumed by the
 * ring and the pill stays perfectly circular for single-digit counts.
 *
 * The two-digit case (10, 12, 99) grows the pill horizontally via
 * `min-width` + horizontal padding; it stays vertically centred on the
 * icon's corner either way.
 *
 * `pointer-events: none` keeps the badge out of the click target path —
 * a tap that lands on the badge should still activate the parent button.
 * Since the badge is inside the button in the DOM, this is defensive
 * rather than strictly necessary, but it prevents any edge case where a
 * browser might target the badge as the click origin.
 */
.cheetah-mini-cart__count,
.cheetah-floating-mini-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.3rem;
    color: #ffffff;
    background: var(--cheetah-cart-drawer-primary);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    pointer-events: none;
}

.cheetah-mini-cart__count {
    position: absolute;
    top: -6px;
    right: -7px;
    box-shadow: 0 0 0 2px var(--cheetah-cart-drawer-bg, #ffffff);
}

.cheetah-mini-cart__total {
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Floating mini cart
   --------------------------------------------------------------------------
   Placement is driven by the `data-position` attribute set in
   template-parts/woocommerce/floating-mini-cart.php, and offsets are
   driven by the Cart Drawer options via the CSS custom properties
   emitted by Cheetah_CSS_Generator. Local defaults below keep the
   component usable before dynamic CSS has been generated.
   -------------------------------------------------------------------------- */
.cheetah-floating-mini-cart {
    --cheetah-floating-offset: 16px;
    --cheetah-floating-bottom: 16px;
    --cheetah-floating-mobile-bottom: 12px;

    position: fixed;
    z-index: 99980;

    /* Suppress the native tap flash on iOS Safari and Android Chrome. */
    -webkit-tap-highlight-color: transparent;
}

.cheetah-floating-mini-cart[data-position="bottom-right"] {
    right: max(var(--cheetah-floating-offset), env(safe-area-inset-right));
    bottom: max(var(--cheetah-floating-bottom), env(safe-area-inset-bottom));
    left: auto;
    top: auto;
}

.cheetah-floating-mini-cart[data-position="bottom-left"] {
    left: max(var(--cheetah-floating-offset), env(safe-area-inset-left));
    bottom: max(var(--cheetah-floating-bottom), env(safe-area-inset-bottom));
    right: auto;
    top: auto;
}

.cheetah-floating-mini-cart[data-position="top-right"] {
    right: max(var(--cheetah-floating-offset), env(safe-area-inset-right));
    top: max(var(--cheetah-floating-bottom), env(safe-area-inset-top));
    left: auto;
    bottom: auto;
}

.cheetah-floating-mini-cart[data-position="top-left"] {
    left: max(var(--cheetah-floating-offset), env(safe-area-inset-left));
    top: max(var(--cheetah-floating-bottom), env(safe-area-inset-top));
    right: auto;
    bottom: auto;
}

/*
 * Floating trigger — solid primary-coloured circle.
 *
 * The icon uses `currentColor` (white) against the primary surface, so
 * the shape is always visible. Before the `--cheetah-cart-drawer-primary`
 * token was moved to `:root`, the `background` declaration was invalid
 * outside the drawer's DOM tree and the button rendered transparent,
 * giving white-on-white.
 */
.cheetah-floating-mini-cart__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: #ffffff;
    background: var(--cheetah-cart-drawer-primary);
    border: 1px solid color-mix(in srgb, var(--cheetah-cart-drawer-primary) 85%, #000);
    border-radius: 50%;
    box-shadow:
            0 12px 28px color-mix(in srgb, var(--cheetah-cart-drawer-primary) 40%, transparent),
            0 4px 10px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.cheetah-floating-mini-cart__trigger:hover,
.cheetah-floating-mini-cart__trigger:focus-visible {
    color: #ffffff;
    transform: translateY(-2px);
    filter: brightness(0.96);
    box-shadow:
            0 16px 32px color-mix(in srgb, var(--cheetah-cart-drawer-primary) 45%, transparent),
            0 6px 14px rgba(15, 23, 42, 0.14);
    outline: none;
}

.cheetah-floating-mini-cart__trigger:active {
    transform: translateY(0);
}

/*
 * Count badge for the floating cart — inverted colour scheme.
 *
 * The badge is a solid white circle with primary-coloured text and
 * border, so it stands out clearly against the primary-coloured trigger
 * behind it. `box-shadow` and the border combination give it the
 * "notification" feel without a second colour.
 */
.cheetah-floating-mini-cart__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 0.3rem;
    background: #ffffff;
    color: var(--cheetah-cart-drawer-primary);
    border: 2px solid var(--cheetah-cart-drawer-primary);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
    font-size: 0.6875rem;
    font-weight: 800;
}

.cheetah-cart-drawer [hidden] {
    display: none !important;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Focus rings
   ==========================================================================
   Every interactive element inside the drawer, the header mini-cart, and
   the floating mini-cart gets a consistent, high-contrast focus ring.

   This overrides the `outline: none` declarations on the individual
   `:focus-visible` rules above. Those rules still own the *state change*
   (background, border, text colour) which is good for mouse users; this
   section owns the *focus indicator*, which is what WCAG 2.4.7 actually
   requires for keyboard users.

   The rule uses `:is()` to reach a specificity equal to the individual
   `:focus-visible` rules and wins the cascade by appearing later in the
   file. It also covers the header mini-cart and floating trigger, both of
   which live outside the drawer's DOM tree.
   ========================================================================== */
:is(.cheetah-cart-drawer, .cheetah-mini-cart, .cheetah-floating-mini-cart) :focus-visible {
    outline: 2px solid var(--cheetah-cart-drawer-primary, #2563eb);
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .cheetah-cart-drawer {
        --cheetah-cart-drawer-width: min(480px, 86vw);
    }

    .cheetah-cart-drawer-item {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .cheetah-cart-drawer-item__thumbnail-link,
    .cheetah-cart-drawer-item__thumbnail > img {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 767px) {
    .cheetah-cart-drawer {
        --cheetah-cart-drawer-width: 100vw;
    }

    .cheetah-cart-drawer__dialog {
        width: 100vw;
        max-width: 100vw;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .cheetah-cart-drawer[data-side="left"] .cheetah-cart-drawer__dialog {
        border-right: 0;
        border-radius: 0;
    }

    .cheetah-cart-drawer__header {
        min-height: 64px;
        padding: 0.8rem 0.95rem;
    }

    .cheetah-cart-drawer__body {
        overscroll-behavior-y: contain;
    }

    .cheetah-cart-drawer-item {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 0.75rem;
        padding-inline: 0.85rem;
    }

    .cheetah-cart-drawer-item::after {
        right: 0.85rem;
        left: 0.85rem;
    }

    .cheetah-cart-drawer-item__thumbnail-link,
    .cheetah-cart-drawer-item__thumbnail > img {
        width: 68px;
        height: 68px;
    }

    .cheetah-cart-drawer-item__content {
        padding-right: 1.9rem;
    }

    /*
     * Mobile pricing layout switches to two rows:
     *   Row 1: [price]                 (spans both columns)
     *   Row 2: [quantity]  [subtotal]
     * The fixed 96px quantity column from desktop is released here —
     * the mobile row is short enough that both cells can size naturally.
     */
    .cheetah-cart-drawer-item__pricing {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.45rem;
        column-gap: 0.6rem;
        margin-top: 0.65rem;
    }

    .cheetah-cart-drawer-item__price {
        grid-column: 1 / -1;
        text-align: left;
    }

    .cheetah-cart-drawer-item__subtotal {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    .cheetah-cart-drawer-item__quantity,
    .cheetah-cart-drawer-item__quantity-limit {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        margin-inline: 0;
    }

    /*
     * iOS Safari auto-zooms into any focused <input> whose computed
     * font-size is below 16px. The coupon code input and the per-item
     * quantity input are intentionally small by design, so on mobile we
     * bump them to exactly 16px. Desktop keeps the tighter typography.
     */
    .cheetah-cart-drawer__coupon-input,
    .cheetah-cart-drawer-item__quantity-input {
        font-size: 16px;
    }

    .cheetah-cart-drawer__coupon,
    .cheetah-cart-drawer__shipping,
    .cheetah-cart-drawer__totals {
        margin-inline: 0.85rem;
    }

    .cheetah-cart-drawer__footer {
        padding-inline: 0.85rem;
    }

    /*
     * Bottom-anchored floating positions collapse to a tighter mobile
     * offset so the button doesn't collide with the device home indicator.
     * The top-anchored positions are unaffected — the safe-area inset only
     * applies to the bottom edge.
     */
    .cheetah-floating-mini-cart[data-position="bottom-right"],
    .cheetah-floating-mini-cart[data-position="bottom-left"] {
        bottom: max(var(--cheetah-floating-mobile-bottom), env(safe-area-inset-bottom));
    }

    /*
     * On mobile the running total duplicates information the drawer
     * already shows at the top of the cart. Hiding it here leaves just
     * the icon group — icon + badge — which is the standard mobile
     * pattern for a header mini-cart.
     */
    .cheetah-mini-cart__total {
        display: none;
    }
}

@media (max-width: 420px) {
    .cheetah-cart-drawer-item__pricing {
        gap: 0.45rem;
    }

    .cheetah-cart-drawer-item__quantity {
        grid-template-columns: 26px 40px 26px;
    }

    .cheetah-cart-drawer-item__quantity-input {
        width: 40px;
    }

    .cheetah-cart-drawer__coupon-form {
        grid-template-columns: 1fr;
    }

    .cheetah-cart-drawer__coupon-apply {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cheetah-cart-drawer__dialog,
    .cheetah-cart-drawer__backdrop,
    .cheetah-cart-drawer__close,
    .cheetah-cart-drawer-item__title a,
    .cheetah-cart-drawer-item__quantity-button,
    .cheetah-cart-drawer-item__remove,
    .cheetah-cart-drawer__empty-link,
    .cheetah-cart-drawer__coupon-apply,
    .cheetah-cart-drawer__shipping-action,
    .cheetah-cart-drawer__coupon-chip button,
    .cheetah-cart-drawer__continue,
    .cheetah-cart-drawer__checkout,
    .cheetah-mini-cart__toggle,
    .cheetah-floating-mini-cart__trigger {
        transition-duration: 1ms !important;
    }

    .cheetah-cart-drawer.is-refreshing .cheetah-cart-drawer__body::before {
        animation: none;
    }

    .cheetah-cart-drawer.is-refreshing .cheetah-cart-drawer__items {
        transition: none;
    }
}