/* WooCommerce Campaign Manager — BXGY stack ("Sepete Özel Fırsatlar")
 * Rendered above the cart body via woocommerce_before_cart.
 *
 * 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 the row needs, and the campaign terms
 * disclosure that the header's new "i" button opens.
 *
 * v8 also carries 2.20.4, which fixes two rules in this file that cancelled the
 * hidden attribute: the section (M26) and the collapsible body (U24). The filename
 * is deliberately NOT bumped for it -- 2.20.3 never shipped, so no cache anywhere
 * holds a v8 that lacks these two rules.
 *
 * v7 (2.20.2): the card stays an action surface after the shopper has used it.
 * The permanent "already added" checkmark and the "Sepetinizde" badge are gone --
 * both were the visual half of a one-unit-per-product ceiling -- and a compact
 * quantity badge pinned to the card corner takes their place. The "+" is now
 * rendered on every card, whether the shopper holds one already or not.
 * The card also stops dimming itself: an element with a live control in it 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 are unchanged and keep their existing selectors.
 *
 * Checkout is gone from the comment above because it is gone from the code: the
 * woocommerce_before_checkout_form registration was removed in 2.20.1 and this
 * stylesheet is now 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 simply repointed, so the [data-state] re-theming and all
 * existing selectors work untouched. Adds U10 — a stable inner wrapper with a
 * min-height so the AJAX swap cannot reflow the cart, and suppression of the
 * entrance animation on refreshed content so only the first render animates.
 */

/* Light-only by design. Flatsome ships no prefers-color-scheme rules, so a
 * dark-appearance variant here would put a dark card inside a page that stayed
 * white. Add dark tokens only when the theme grows a dark appearance to match. */
/* === SHARED TOKENS — keep in sync across all four stylesheets === */
:root {
    /* Materials — espresso preserved as brand anchor */
    --wc-ios-brand:          #2a0a04;
    --wc-ios-material-thick: rgba(42, 10, 4, 0.86);
    --wc-ios-material-reg:   rgba(42, 10, 4, 0.72);
    --wc-ios-blur:           saturate(180%) blur(30px);

    /* Semantic labels — opacity ladder, on-espresso */
    --wc-ios-label:   #ffffff;
    --wc-ios-label-2: rgba(255, 255, 255, 0.78);
    --wc-ios-label-3: rgba(255, 255, 255, 0.52);
    --wc-ios-label-4: rgba(255, 255, 255, 0.32);

    /* Fills — chips, tracks, card surfaces */
    --wc-ios-fill:   rgba(255, 255, 255, 0.10);
    --wc-ios-fill-2: rgba(255, 255, 255, 0.16);
    --wc-ios-sep:    rgba(255, 255, 255, 0.14);

    /* Light-surface set — BXGY cards, banner, cart */
    --wc-ios-bg:       #ffffff;
    --wc-ios-bg-2:     #f2f2f7;
    --wc-ios-ink:      #1c2d40;
    --wc-ios-ink-2:    rgba(28, 45, 64, 0.68);
    --wc-ios-hairline: rgba(15, 23, 42, 0.10);

    /* System colours */
    --wc-ios-blue:   #007AFF;
    --wc-ios-green:  #34C759;
    --wc-ios-red:    #FF3B30;
    --wc-ios-orange: #FF9500;

    /* Continuous-corner radius scale */
    --wc-ios-r-xs: 8px;
    --wc-ios-r-sm: 10px;
    --wc-ios-r-md: 14px;
    --wc-ios-r-lg: 20px;
    --wc-ios-r-xl: 28px;
    --wc-ios-r-pill: 999px;

    /* SF-derived type scale */
    --wc-ios-t-title1:   1.75rem;
    --wc-ios-t-title3:   1.25rem;
    --wc-ios-t-headline: 1.0625rem;
    --wc-ios-t-callout:  1rem;
    --wc-ios-t-subhead:  0.9375rem;
    --wc-ios-t-footnote: 0.8125rem;
    --wc-ios-t-caption:  0.75rem;

    /* Motion — the iOS sheet curve */
    --wc-ios-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --wc-ios-ease-std:   cubic-bezier(0.25, 0.1, 0.25, 1);
    --wc-ios-dur-sheet:  0.45s;
    --wc-ios-dur-fast:   0.2s;

    /* Elevation + safe area */
    --wc-ios-shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.34);
    --wc-ios-shadow-card:  0 8px 24px rgba(15, 23, 42, 0.08);
    --wc-ios-safe-b:       env(safe-area-inset-bottom, 0px);

    --wc-ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                   "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* === END SHARED TOKENS === */

.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);
    --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 } whatever the
 * specificity, so without this rule the hidden section still lays out and __inner's
 * min-height prints ~124px of empty space directly above the cart form. The trigger is
 * an ordinary cart: one holding nothing in any BXGY threshold scope.
 *
 * Any element in this component that takes [hidden] and also has a display rule of its
 * own needs its own line like this one. Checked at 2.20.4: the tab panels and the
 * carousel arrows have no display in their base rules, so [hidden] already works there. */
.wc-bxgy-progress-stack[hidden] {
    display: none;
}

/* U10 — stable wrapper. bxgy-stack_v3.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-progress[data-state="target_empty"] {
    --wc-bxgy-fill: var(--wc-ios-orange);
    --wc-bxgy-fill-soft: rgba(255, 149, 0, 0.14);
}

.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 {
    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;
}

.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-fill);
    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);
    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);
    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 {
    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;
}

.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, and the
 * display above would otherwise cancel it. Until 2.20.4 the button flipped its own
 * chevron and its own aria-expanded and changed nothing the shopper could see, which
 * also meant it reported aria-expanded="false" over content still 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);
}

.wc-bxgy-carousel__arrow--prev { left: -6px; }
.wc-bxgy-carousel__arrow--next { right: -6px; }

.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 ("3 tane ekleyin, indirim
 * acilsin" plus a sub-line under it), and 132px could not hold that: it wrapped to
 * four lines and pushed the price and the "+" out of the card. Widening is what buys
 * the copy its room. The row shows three or four instead of eight, which is the same
 * trade the reference design makes, and the track already scrolled anyway. */
.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;
}

.wc-bxgy-card__price del {
    opacity: 0.5;
    font-weight: 500;
}

.wc-bxgy-card__add {
    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;
}

.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.
 *
 * It is taken OUT of the flow rather than left in the foot with the price and the
 * button, because a struck-through price plus a chip plus a 28px button does not fit
 * one row, and the thing that would be squeezed is the button — the one element on
 * the card that must keep a full touch target.
 *
 * 2.20.3 moved it from the card's top-right to the image's top-left. In the row
 * layout the top-right corner is where the product name begins, so the badge sat on
 * top of the text; the thumbnail corner is both free and the conventional place for
 * a count.
 *
 * Both background and colour are set, so a client that forces its own dark ground
 * cannot leave this unreadable. Tabular figures and a minimum width keep the badge
 * from changing size 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(--wc-ios-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(--wc-ios-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:
 * a faded card with a live button in it invites nobody to press it. 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 without it a card that is BOTH in the cart and the one
 * that closes the gap would lose its green border to a brown one -- and the green
 * border is the single most important thing the row says. 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;
    }
}