/* WooCommerce Campaign Manager — BXGY stack ("Sepete Özel Fırsatlar")
 * Rendered above the cart body via woocommerce_before_cart.
 *
 * v11 (2.23.13): U55 -- the struck "was" price is the stack's muted ink (--wc-bxgy-muted, 5.04:1 on white) with no
 * opacity; ink at 0.5 on white was 3.00:1. U62 -- the "+", the terms "i" and the collapse toggle keep their drawn size
 * and get a 44 px hit area (::after with a negative inset, as .wc-campaign-close has). L130 -- the carousel arrows sit
 * at the start and end of the track in either direction, and their glyphs turn with it.
 *
 * v10 (2.23.7): U34, colour by role. The accent that carried white text (the unlock badge, the card's button,
 * the check disc) and the accent that was text on a soft tint (the "threshold met" pill) were the bright system
 * colour, 2.0 - 4.0:1. They now read --wc-bxgy-fill-solid and --wc-bxgy-accent-text, which the stack and its
 * [data-state] rules bind to the --twm-cm-fill-* and --twm-cm-text-* tokens (twm-cm-tokens_v2.css, which holds
 * every token and is a dependency of this stylesheet's handle). The meter, the border and the soft tint keep
 * --wc-bxgy-fill / --wc-bxgy-fill-soft: they carry no text. The card error is --twm-cm-text-red.
 *
 * v9 (2.21.0): the stack can also render inside the exit-intent popup. The modal-scoped block
 * at the foot of this file trims card padding, carousel card width and the meter for a ~520px
 * column, and drops the entrance animation, which stutters inside a dialog that is itself
 * animating in. It lives here rather than in exit-intent_v8.css so it rides this file's
 * on-demand injection: a page that never opens a BXGY popup downloads neither asset.
 *
 * v8 (2.20.3): the product card becomes a row -- image left, text right, ~300px -- because
 * the copy it now carries does not fit a 132px column. Adds the sub-line under the badge, the
 * __body wrapper and the campaign terms disclosure behind the header's "i" button.
 *
 * v8 also carries 2.20.4, which fixes two rules here that cancelled the hidden attribute: the
 * section (M26) and the collapsible body (U24). The filename is deliberately NOT bumped --
 * 2.20.3 never shipped, so no cache holds a v8 without them.
 *
 * v7 (2.20.2): the card stays an action surface after use. The permanent checkmark and the
 * "Sepetinizde" badge are gone -- both were the visual half of a one-unit-per-product ceiling
 * -- replaced by a compact quantity badge in the corner. The "+" renders on every card, and
 * the card no longer dims: an element with a live control must not read as spent.
 *
 * v6 (2.20.1): the card became an action surface. Adds the collapsible header toggle, the
 * ARIA tabs shell, the product carousel and its cards, and the shortfall badges. The meter,
 * the [data-state] re-theming and the compact "applied" card keep their selectors.
 *
 * Checkout is gone from the comment above because it is gone from the code: the
 * woocommerce_before_checkout_form registration went in 2.20.1 and this sheet is enqueued on
 * is_cart() only.
 *
 * v5 (2.19.2): L15 — a stale bundle name in a comment.
 *
 * v4 (2.15.1): migrated onto the shared iOS token layer. Every --wc-bxgy-* name is kept and
 * repointed, so existing selectors work untouched. Adds U10 -- a stable inner wrapper with a
 * min-height so the AJAX swap cannot reflow the cart, and no entrance animation on refreshed
 * content, so only the first render animates.
 */

/* Light-only by design (see twm-cm-tokens_v2.css). The --wc-ios-* and --twm-cm-* tokens this file reads are in
 * assets/css/twm-cm-tokens_v2.css, the stylesheet `twm-cm-tokens`, which this stylesheet depends on (L40, 2.23.7). */

.wc-bxgy-progress-stack {
    /* Component tokens are aliases now — the [data-state] rules below still
     * rebind them exactly as they did in v2. */
    --wc-bxgy-fill: var(--wc-ios-green);
    --wc-bxgy-fill-soft: rgba(52, 199, 89, 0.14);
    /* U34 -- the same accent by role: a background for white text, and text on the soft tint. */
    --wc-bxgy-fill-solid: var(--twm-cm-fill-green);
    --wc-bxgy-accent-text: var(--twm-cm-text-green);
    --wc-bxgy-card-bg: var(--wc-ios-bg);
    --wc-bxgy-border: var(--wc-ios-hairline);
    --wc-bxgy-text: var(--wc-ios-ink);
    --wc-bxgy-muted: var(--wc-ios-ink-2);
    --wc-bxgy-track: var(--wc-ios-hairline);
    --wc-bxgy-radius: var(--wc-ios-r-lg);
    --wc-bxgy-pad: 20px;

    display: block;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-family: var(--wc-ios-font);
}

/* M26 — the section is ALWAYS rendered and carries [hidden] when no campaign qualifies, so
 * the client keeps a stable swap target. The display above is an author declaration and beats
 * the user-agent's [hidden] { display: none }, so without this rule the hidden section still
 * lays out and __inner's min-height prints ~124px of empty space above the cart form. Any
 * ordinary cart triggers it.
 *
 * Any element here that takes [hidden] and has its own display rule needs a line like this.
 * Checked at 2.20.4: the tab panels and carousel arrows have no display in their base rules. */
.wc-bxgy-progress-stack[hidden] {
    display: none;
}

/* U10 — stable wrapper. bxgy-stack_v4.js swaps this element's *contents*, so the
 * <section>, its role="region" and its aria-label survive the refresh and the
 * live region announces the change instead of being replaced wholesale.
 * min-height keeps a single-card swap from reflowing the cart underneath. */
.wc-bxgy-progress-stack__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 104px;
}

/* Stack header — only rendered when 2+ cards are present. */
.wc-bxgy-progress-stack__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.wc-bxgy-progress-stack__title {
    margin: 0;
    font-size: var(--wc-ios-t-headline);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--wc-bxgy-text);
}

.wc-bxgy-progress-stack__count {
    flex-shrink: 0;
    font-size: var(--wc-ios-t-footnote);
    font-weight: 600;
    color: var(--wc-bxgy-muted);
    font-variant-numeric: tabular-nums;
}

.wc-bxgy-progress {
    position: relative;
    background: var(--wc-bxgy-card-bg);
    border-radius: var(--wc-bxgy-radius);
    box-shadow: var(--wc-ios-shadow-card);
    border: 1px solid var(--wc-bxgy-border);
    border-inline-start: 4px solid var(--wc-bxgy-fill);
    padding: var(--wc-bxgy-pad);
    color: var(--wc-bxgy-text);
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(8px);
    animation: wcBxgyProgressIn var(--wc-ios-dur-sheet) var(--wc-ios-ease-sheet) forwards;
}

/* nth-of-type (not nth-child) so the stack header <div> doesn't shift the
 * stagger sequence — these count only the <article> cards. */
.wc-bxgy-progress:nth-of-type(2) { animation-delay: 0.06s; }
.wc-bxgy-progress:nth-of-type(3) { animation-delay: 0.12s; }
.wc-bxgy-progress:nth-of-type(4) { animation-delay: 0.18s; }
.wc-bxgy-progress:nth-of-type(5) { animation-delay: 0.24s; }
.wc-bxgy-progress:nth-of-type(6) { animation-delay: 0.30s; }

@keyframes wcBxgyProgressIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* U10 — after the first AJAX refresh the cards are re-created, which replayed
 * the entrance animation on every cart update. iOS animates the value, not the
 * container: once the stack is live, only the meter moves. */
.wc-bxgy-progress-stack--live .wc-bxgy-progress {
    animation: none;
    opacity: 1;
    transform: none;
}

/* Per-state accent colours. target_partial and applied keep the brand green. */
.wc-bxgy-progress[data-state="spend_more"] {
    --wc-bxgy-fill: var(--wc-ios-blue);
    --wc-bxgy-fill-soft: rgba(0, 122, 255, 0.14);
    --wc-bxgy-fill-solid: var(--twm-cm-fill-blue);
    --wc-bxgy-accent-text: var(--twm-cm-text-blue);
}

.wc-bxgy-progress[data-state="target_empty"] {
    --wc-bxgy-fill: var(--wc-ios-orange);
    --wc-bxgy-fill-soft: rgba(255, 149, 0, 0.14);
    --wc-bxgy-fill-solid: var(--twm-cm-fill-orange);
    --wc-bxgy-accent-text: var(--twm-cm-text-orange);
}

.wc-bxgy-progress__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

/* The "i". Sized and coloured as the stack's collapse toggle, because they are the
 * same kind of control one level apart, and a shopper should not have to learn two
 * disclosure affordances on one panel. */
.wc-bxgy-progress__terms-toggle {
    position: relative; /* anchors the 44 px hit area below (U62) */
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--wc-ios-bg-2);
    color: var(--wc-bxgy-muted);
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 24px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

/* U62 -- 24 + 2 x 10 = 44 px to tap, the drawn "i" unchanged. */
.wc-bxgy-progress__terms-toggle::after {
    content: '';
    position: absolute;
    inset: -10px;
}

.wc-bxgy-progress__terms-toggle:hover,
.wc-bxgy-progress__terms-toggle[aria-expanded="true"] {
    background: var(--wc-ios-brand);
    color: var(--wc-ios-label);
}

.wc-bxgy-progress__terms-toggle:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

/* The disclosure. It pushes the meter down rather than floating over it: a panel
 * whose whole contents are replaced on every cart change is the worst possible
 * anchor for a positioned popover, and an inline region needs no anchor at all. */
.wc-bxgy-progress__terms {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: var(--wc-ios-r-sm);
    background: var(--wc-ios-bg-2);
    color: var(--wc-bxgy-text);
}

.wc-bxgy-progress__terms[hidden] {
    display: none;
}

.wc-bxgy-terms {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}

.wc-bxgy-terms__row {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.wc-bxgy-terms__key {
    flex: 0 0 62px;
    margin: 0;
    color: var(--wc-bxgy-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.wc-bxgy-terms__val {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--wc-bxgy-text);
    font-size: var(--wc-ios-t-caption);
    font-weight: 500;
    line-height: 1.35;
}

.wc-bxgy-progress__title {
    margin: 0;
    font-size: var(--wc-ios-t-callout);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--wc-bxgy-text);
}

.wc-bxgy-progress__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--wc-ios-r-pill);
    background: var(--wc-bxgy-fill-soft);
    color: var(--wc-bxgy-accent-text);
    font-size: var(--wc-ios-t-caption);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.wc-bxgy-progress__pill::before {
    content: "\2713"; /* checkmark */
    font-weight: 700;
    font-size: 0.8em;
}

.wc-bxgy-progress__message {
    margin: 0 0 14px;
    font-size: var(--wc-ios-t-subhead);
    line-height: 1.45;
    color: var(--wc-bxgy-muted);
}

.wc-bxgy-progress__meter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

/* iOS progress view: thinner track, fully rounded. */
.wc-bxgy-progress__bar {
    flex: 1;
    position: relative;
    height: 6px;
    background: var(--wc-bxgy-track);
    border-radius: var(--wc-ios-r-pill);
    overflow: hidden;
}

.wc-bxgy-progress__fill {
    display: block;
    height: 100%;
    background: var(--wc-bxgy-fill);
    border-radius: var(--wc-ios-r-pill);
    transition: width var(--wc-ios-dur-sheet) var(--wc-ios-ease-sheet);
}

.wc-bxgy-progress__label {
    flex-shrink: 0;
    font-size: var(--wc-ios-t-footnote);
    font-weight: 600;
    color: var(--wc-bxgy-text);
    min-width: 80px;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.wc-bxgy-progress__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 11px 18px;
    background: var(--wc-bxgy-fill-solid);
    color: #ffffff;
    border-radius: var(--wc-ios-r-md);
    font-size: var(--wc-ios-t-subhead);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    border: 0;
    box-sizing: border-box;
    transition: filter var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                box-shadow var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
    /* Neutral shadow so the glow doesn't clash with per-state accents. */
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.wc-bxgy-progress__cta:hover,
.wc-bxgy-progress__cta:focus {
    color: #ffffff;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.24);
    text-decoration: none;
}

.wc-bxgy-progress__cta:active {
    transform: scale(0.98);
}

.wc-bxgy-progress__cta:focus-visible {
    outline: 3px solid var(--wc-bxgy-fill);
    outline-offset: 2px;
}

.wc-bxgy-progress__cta::after {
    content: "\2192"; /* right arrow */
    font-weight: 700;
}

[dir="rtl"] .wc-bxgy-progress__cta::after {
    content: "\2190"; /* left arrow */
}

/* Compact "applied" card — single confirmation row, no meter/CTA/pill. */
.wc-bxgy-progress--applied {
    background: var(--wc-bxgy-fill-soft);
    box-shadow: none;
    border-inline-start-color: var(--wc-bxgy-fill);
}

.wc-bxgy-progress--compact {
    padding: 12px 16px;
}

.wc-bxgy-progress__applied-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: var(--wc-ios-t-subhead);
    line-height: 1.4;
    color: var(--wc-bxgy-text);
}

.wc-bxgy-progress__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wc-bxgy-fill-solid);
    color: #ffffff;
}

.wc-bxgy-progress__check::before {
    content: "\2713"; /* checkmark, matches the pill glyph */
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.wc-bxgy-progress__applied-title {
    font-weight: 600;
}

.wc-bxgy-progress__applied-msg {
    color: var(--wc-bxgy-muted);
}

@media (max-width: 600px) {
    .wc-bxgy-progress {
        --wc-bxgy-radius: var(--wc-ios-r-md);
        --wc-bxgy-pad: 16px;
    }

    .wc-bxgy-progress-stack__inner {
        min-height: 96px;
    }

    .wc-bxgy-progress-stack__title {
        font-size: var(--wc-ios-t-callout);
    }

    .wc-bxgy-progress__title {
        font-size: var(--wc-ios-t-subhead);
    }

    .wc-bxgy-progress__message {
        font-size: var(--wc-ios-t-footnote);
    }

    .wc-bxgy-progress__label {
        min-width: 70px;
        font-size: var(--wc-ios-t-caption);
    }

    .wc-bxgy-progress__applied-line {
        font-size: var(--wc-ios-t-footnote);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wc-bxgy-progress {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .wc-bxgy-progress__fill,
    .wc-bxgy-progress__cta {
        transition: none;
    }
}

/* =====================================================================
 * 2.20.1 — the action surface: toggle, tabs, carousel, cards, badges.
 *
 * Light-only by design, as the rest of this file. Every block below sets
 * both background and color, so a client that forces a dark ground cannot
 * leave text unreadable.
 * ================================================================== */

/* --- Collapse toggle ------------------------------------------------ */

.wc-bxgy-progress-stack__toggle {
    position: relative; /* anchors the 44 px hit area below (U62) */
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--wc-ios-r-sm);
    background: var(--wc-ios-bg-2);
    color: var(--wc-bxgy-text);
    cursor: pointer;
    transition: background 0.18s ease;
}

/* U62 -- 28 + 2 x 8 = 44 px to tap, the drawn button unchanged. */
.wc-bxgy-progress-stack__toggle::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.wc-bxgy-progress-stack__toggle:hover,
.wc-bxgy-progress-stack__toggle:focus {
    background: var(--wc-ios-hairline);
}

.wc-bxgy-progress-stack__toggle:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

/* The chevron is drawn rather than shipped as an asset, and it is the only
 * thing that rotates — aria-expanded is what actually carries the state. */
.wc-bxgy-progress-stack__toggle > span {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.18s ease;
}

.wc-bxgy-progress-stack--collapsed .wc-bxgy-progress-stack__toggle > span {
    transform: translateY(1px) rotate(-135deg);
}

.wc-bxgy-progress-stack__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* U24 — the collapse toggle hides this element with the hidden attribute, which the display
 * above would otherwise cancel. Until 2.20.4 the button flipped its own chevron and
 * aria-expanded while the content stayed visible and fully exposed to a screen reader. See
 * the note on .wc-bxgy-progress-stack[hidden] above. */
.wc-bxgy-progress-stack__body[hidden] {
    display: none;
}

/* --- Tabs ----------------------------------------------------------- */

.wc-bxgy-tabs__list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.wc-bxgy-tabs__list::-webkit-scrollbar {
    display: none;
}

.wc-bxgy-tabs__tab {
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid var(--wc-ios-hairline);
    border-radius: 999px;
    background: var(--wc-ios-bg);
    color: var(--wc-bxgy-muted);
    font-family: var(--wc-ios-font);
    font-size: var(--wc-ios-t-footnote);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wc-bxgy-tabs__tab:hover {
    color: var(--wc-bxgy-text);
    border-color: var(--wc-ios-ink-2);
}

.wc-bxgy-tabs__tab[aria-selected="true"] {
    background: var(--wc-ios-brand);
    border-color: var(--wc-ios-brand);
    color: var(--wc-ios-label);
}

.wc-bxgy-tabs__tab:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

.wc-bxgy-tabs__panel:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 4px;
    border-radius: var(--wc-bxgy-radius);
}

/* The tab already names the campaign, and the panel is aria-labelledby it, so
 * the card's own <h3> would be the same words announced twice. Hidden only
 * inside a panel — with one campaign there is no tab strip and that heading is
 * the only thing naming the offer. */
.wc-bxgy-tabs__panel .wc-bxgy-progress__title {
    display: none;
}

/* --- Carousel ------------------------------------------------------- */

.wc-bxgy-carousel {
    position: relative;
    margin-top: 12px;
}

.wc-bxgy-carousel__track {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 2px 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.wc-bxgy-carousel__track::-webkit-scrollbar {
    display: none;
}

.wc-bxgy-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--wc-ios-hairline);
    border-radius: 999px;
    background: var(--wc-ios-bg);
    color: var(--wc-bxgy-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

/* L130 -- "previous" sits at the start of the track and "next" at the end, whichever way the page reads. */
.wc-bxgy-carousel__arrow--prev { inset-inline-start: -6px; }
.wc-bxgy-carousel__arrow--next { inset-inline-end: -6px; }

/* The glyphs are the left and right arrows; on a right-to-left page they turn to point along the track. Two
 * blocks: a browser without :dir() would drop a rule that lists it. */
.wc-bxgy-carousel__arrow span {
    display: inline-block;
}

html[dir="rtl"] .wc-bxgy-carousel__arrow span,
body.rtl .wc-bxgy-carousel__arrow span {
    transform: scaleX(-1);
}

.wc-bxgy-carousel__arrow:dir(rtl) span {
    transform: scaleX(-1);
}

.wc-bxgy-carousel__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}

.wc-bxgy-carousel__arrow:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

/* --- Product card --------------------------------------------------- */

/* 2.20.3 -- a row, not a column.
 *
 * The badge stopped being three words in this release, and 132px could not hold it: it
 * wrapped to four lines and pushed the price and the "+" out of the card. The row shows three
 * or four cards instead of eight, the same trade the reference design makes, and the track
 * already scrolled. */
.wc-bxgy-card {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex: 0 0 300px;
    width: 300px;
    padding: 10px;
    scroll-snap-align: start;
    border: 1px solid var(--wc-ios-hairline);
    border-radius: var(--wc-ios-r-md);
    background: var(--wc-ios-bg);
    color: var(--wc-bxgy-text);
}

.wc-bxgy-card:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

/* Fixed square rather than aspect-ratio: in a row the image must not grow with the
 * text beside it, and the text is now the part that varies in height. */
.wc-bxgy-card__media {
    display: block;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border-radius: var(--wc-ios-r-sm);
    background: var(--wc-ios-bg-2);
}

/* Everything except the image and the corner count. min-width:0 is load-bearing:
 * without it a long product name or a three-line badge refuses to shrink and blows
 * the card past its own flex-basis. */
.wc-bxgy-card__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.wc-bxgy-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wc-bxgy-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--wc-bxgy-text);
    font-size: var(--wc-ios-t-caption);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.wc-bxgy-card__name:hover {
    text-decoration: underline;
}

.wc-bxgy-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}

.wc-bxgy-card__price {
    color: var(--wc-bxgy-text);
    font-size: var(--wc-ios-t-caption);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* U55 -- a solid muted ink, not the card's ink at half opacity (3.00:1 on white). --wc-ios-ink-2 over white is
 * 5.04:1 and the card is white in the cart and in the popup's panel. */
.wc-bxgy-card__price del {
    color: var(--wc-bxgy-muted);
    font-weight: 500;
}

.wc-bxgy-card__add {
    position: relative; /* anchors the 44 px hit area below (U62) */
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--wc-ios-brand);
    color: var(--wc-ios-label);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* U62 -- 28 + 2 x 8 = 44 px to tap, the drawn "+" unchanged. */
.wc-bxgy-card__add::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.wc-bxgy-card__add:hover {
    transform: scale(1.06);
}

.wc-bxgy-card__add[disabled] {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

/* The button is the only affordance on the card, so the pending state has to be
 * visible on the button itself and not somewhere else on the page. */
.wc-bxgy-card__add.is-loading {
    animation: wc-bxgy-pulse 0.9s ease-in-out infinite;
}

@keyframes wc-bxgy-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.wc-bxgy-card__add:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

/* The count of what the shopper already holds.
 *
 * Taken OUT of the flow rather than left in the foot, because a struck-through price plus a
 * chip plus a 28px button does not fit one row -- and the button is what would be squeezed.
 *
 * 2.20.3 moved it from the card's top-right to the image's top-left: in the row layout the
 * top-right is where the product name begins, so the badge sat on the text.
 *
 * Both background and colour are set, so a client forcing a dark ground cannot leave this
 * unreadable. Tabular figures and a min-width keep the badge steady between ×9 and ×10. */
.wc-bxgy-card__qty {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--wc-ios-brand);
    color: var(--wc-ios-label);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The arithmetic behind the badge's count. Quiet on purpose -- the instruction is the
 * badge, and this is only there for a shopper who wants to check it. Tabular figures
 * so the two amounts line up with the price directly beneath them. */
.wc-bxgy-card__sub {
    color: var(--wc-bxgy-muted);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.wc-bxgy-card__error {
    display: block;
    color: var(--twm-cm-text-red);
    font-size: var(--wc-ios-t-caption);
    line-height: 1.3;
}

/* --- Badges — the primary signal, not decoration -------------------- */

/* Ordering is bestsellers-first rather than gap-aware, so nothing else on a card
 * tells the shopper which item closes the deal. The closes-gap variant is
 * therefore filled and the others are not; that contrast is the whole point and
 * must not be flattened for visual tidiness. */
.wc-bxgy-card__badge {
    display: block;
    padding: 3px 7px;
    border-radius: var(--wc-ios-r-xs);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.wc-bxgy-card__badge--closes-gap {
    background: var(--twm-cm-fill-green);
    color: #ffffff;
}

.wc-bxgy-card__badge--shortfall {
    background: var(--wc-ios-bg-2);
    color: var(--wc-bxgy-text);
}

.wc-bxgy-card__badge--reward {
    background: rgba(255, 149, 0, 0.14);
    color: #7a4400;
}

.wc-bxgy-card--closes-gap {
    border-color: var(--wc-ios-green);
}

/* Kept as a hook, deliberately without the opacity it used to carry. Dimming said "you are
 * finished with this one", which stopped being true when the "+" stayed. The corner badge is
 * the whole signal now, and this border is the quietest support for it.
 *
 * The :not() matters: both rules set border-color at the same specificity and this one is
 * written second, so a card that is both in the cart and the one closing the gap would lose
 * its green border to a brown one. Being held already never outranks closing the gap. */
.wc-bxgy-card--in-cart:not(.wc-bxgy-card--closes-gap) {
    border-color: rgba(42, 10, 4, 0.28);
}

/* --- "See all" tail card -------------------------------------------- */

/* The tail card carries one link and does not need the width the product cards were
 * given for their copy. Kept narrow so it reads as the end of the row rather than as
 * a ninth product. */
.wc-bxgy-card--all {
    flex: 0 0 132px;
    width: 132px;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    background: var(--wc-ios-bg-2);
}

.wc-bxgy-card__all-link {
    color: var(--wc-bxgy-text);
    font-size: var(--wc-ios-t-caption);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

.wc-bxgy-card__all-link:hover {
    text-decoration: underline;
}

.wc-bxgy-card__all-link:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 2px;
    border-radius: var(--wc-ios-r-xs);
}

@media (max-width: 560px) {
    /* Near full-width, with the next card deliberately peeking past the edge so the
     * row still reads as scrollable without arrows to say so. width:auto is required
     * — the base rule sets an explicit width alongside the flex-basis, and without
     * this the card would keep its 300px regardless. */
    .wc-bxgy-card {
        flex: 0 0 min(300px, 82vw);
        width: auto;
    }

    .wc-bxgy-card--all {
        flex: 0 0 132px;
        width: 132px;
    }

    /* Touch scrolling is the interaction on a phone; the arrows would only take
     * space away from the cards. */
    .wc-bxgy-carousel__arrow {
        display: none;
    }

    /* The label column would otherwise take a third of a narrow screen. */
    .wc-bxgy-terms__key {
        flex-basis: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wc-bxgy-progress-stack__toggle > span,
    .wc-bxgy-card__add,
    .wc-bxgy-tabs__tab {
        transition: none;
    }

    .wc-bxgy-card__add:hover {
        transform: none;
    }

    .wc-bxgy-card__add.is-loading {
        animation: none;
        opacity: 0.6;
    }
}

/* ========================================
   Inside the exit-intent popup (v9)

   Same markup, same behaviour, narrower column. The popup mounts the stack in
   .wc-campaign-bxgy-slot inside #wc-campaign-exit-modal.is-bxgy, which is a light
   surface, so every token below resolves exactly as it does on the cart page and
   nothing has to be re-themed -- only re-measured.

   Scoped to the slot so none of it can reach the cart page, where this file is
   also loaded.
   ======================================== */

.wc-campaign-bxgy-slot .wc-bxgy-progress-stack {
    --wc-bxgy-pad: 14px;
}

.wc-campaign-bxgy-slot .wc-bxgy-progress-stack__inner {
    /* The cart page reserves height so an AJAX swap cannot reflow the page under
       the shopper. A modal is centred on its own content and has nothing below it
       to protect, so the reservation only ever shows as dead space. */
    min-height: 0;
    gap: 10px;
}

.wc-campaign-bxgy-slot .wc-bxgy-progress {
    /* The dialog is already animating in; a second, slower animation on the card
       inside it reads as the content arriving late. */
    opacity: 1;
    transform: none;
    animation: none;
    box-shadow: none;
    border-radius: var(--wc-ios-r-md);
}

.wc-campaign-bxgy-slot .wc-bxgy-progress__title {
    font-size: 15px;
}

.wc-campaign-bxgy-slot .wc-bxgy-progress__message {
    font-size: 14px;
}

/* 300px cards leave barely one and a half visible in a 520px column, which reads
   as a broken layout rather than a row to swipe. 232px shows two and the edge of
   a third, which is what says "there are more". */
.wc-campaign-bxgy-slot .wc-bxgy-card {
    flex: 0 0 232px;
    width: 232px;
}

.wc-campaign-bxgy-slot .wc-bxgy-carousel {
    margin-top: 10px;
}

/* The arrows overlap the first and last card in a narrow track; nudging them
   outward is not possible here, so they sit just inside the padding instead. */
.wc-campaign-bxgy-slot .wc-bxgy-carousel__track {
    padding-inline: 2px;
}

@media screen and (max-width: 768px) {
    /* 768px is where exit-intent_v*.css turns the modal into a full-width bottom
       sheet, so from there down the column is wide again and the cart page's own
       card width is the right one. Matching that breakpoint exactly matters: between
       the two, the card would be sized for a column that no longer exists. */
    .wc-campaign-bxgy-slot .wc-bxgy-card {
        flex: 0 0 84%;
        width: 84%;
    }
}