/**
 * WooCommerce Campaign Manager — Exit Intent / Discovery / Quick View
 *
 * v9 (2.21.3): the BXGY popup rejoins the espresso family. v8 inverted the whole modal to a
 * light surface so the progress stack could keep the cart page's tokens; the cost was a popup
 * that matched nothing else the store opens, and two elements that never got the memo — the
 * base title rule is `--wc-ios-label !important` (white), which the light override could not
 * beat without an !important of its own, so the headline rendered white on white at contrast
 * 1.0; and the mobile grabber is white at 32%, invisible on the same sheet.
 *
 * The stack still needs a light ground, so it gets one the size of itself: `.wc-campaign-bxgy-slot`
 * is now a white inset panel on an espresso sheet. Every token inside it resolves exactly as it
 * does on the cart page, which is what keeps bxgy-progress_v9.css a sizing-only scope with no
 * colour in it — and both invisible-element bugs disappear rather than being patched, because
 * white-on-espresso is what the base rules were always saying.
 *
 * v8 (2.21.0): the BXGY popup. `.is-bxgy` turned the espresso modal into a light surface,
 * because the progress stack it carries is built on the light half of the token layer
 * (--wc-ios-bg / --wc-ios-ink). Adds the cart link under the card. The stack's modal-scoped
 * sizing stays in bxgy-progress_v9.css, so it rides that file's on-demand injection.
 *
 * v7 (2.15.1): iOS-inspired redesign. Espresso (#2a0a04) kept as the brand anchor but
 * expressed as a translucent material, with the light tag pills and amber dweller card
 * re-themed onto it. Mobile presents as a bottom sheet with grabber, drag-to-dismiss and
 * safe-area padding. Adds U5, U7, U14/U1, U15, U18 and U19.
 *
 * Light-only by design — see the note above the token block. Every selector name is unchanged
 * from v5: exit-intent_v19.js builds this DOM at runtime and depends on all of them.
 */

/* 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 === */

/* ========================================
   Overlays — iOS sheet dimming
   ======================================== */

#wc-campaign-exit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    animation: wcIosFadeIn var(--wc-ios-dur-fast) var(--wc-ios-ease-std) both;
}

/* Blur is on the overlay, never on the sheet: the sheet animates transform and
 * compositing a backdrop-filter alongside it is expensive on low-end devices. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #wc-campaign-exit-overlay {
        background: rgba(0, 0, 0, 0.38);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

@keyframes wcIosFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ========================================
   Exit modal — centred card on desktop
   ======================================== */

#wc-campaign-exit-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--wc-ios-brand);
    padding: 40px 30px;
    border-radius: var(--wc-ios-r-xl);
    z-index: 999999;
    max-width: 500px;
    width: 85%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    font-family: var(--wc-ios-font);
    box-sizing: border-box;
    animation: wcIosModalIn var(--wc-ios-dur-fast) var(--wc-ios-ease-std) both;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #wc-campaign-exit-modal {
        background: var(--wc-ios-material-thick);
        -webkit-backdrop-filter: var(--wc-ios-blur);
        backdrop-filter: var(--wc-ios-blur);
    }
}

@keyframes wcIosModalIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ========================================
   Close button
   ======================================== */

.wc-campaign-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--wc-ios-fill);
    border: none;
    padding: 0;
    font-size: 22px;
    cursor: pointer;
    color: var(--wc-ios-label);
    line-height: 1;
    width: 32px;
    height: 32px;
    aspect-ratio: 1 / 1;
    border-radius: var(--wc-ios-r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
    margin: 0;
}

.wc-campaign-close:hover {
    background: var(--wc-ios-fill-2);
}

.wc-campaign-close:active {
    transform: scale(0.92);
}

/* U14 — the modal CSS was the outlier; the other stylesheets already do this. */
.wc-campaign-close:focus-visible,
.wc-campaign-cta:focus-visible,
.wc-discovery-add-btn:focus-visible,
.wc-discovery-quick-view-btn:focus-visible,
.wc-discovery-tag:focus-visible,
.wc-discovery-cart-cta:focus-visible,
.wc-trigger-close:focus-visible,
.wc-campaign-floating-trigger:focus-visible {
    outline: 3px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

/* ========================================
   Title / description / primary CTA
   ======================================== */

.wc-campaign-content .wc-campaign-title {
    margin-top: 0;
    color: var(--wc-ios-label) !important;
    font-size: var(--wc-ios-t-title1);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.wc-campaign-desc {
    margin: 12px 0 26px;
    color: var(--wc-ios-label-2);
    font-size: var(--wc-ios-t-callout);
    line-height: 1.45;
    font-weight: 400;
}

.wc-campaign-cta {
    background: var(--wc-ios-label);
    color: #000;
    border: none;
    padding: 15px 30px;
    min-height: 50px;
    font-size: var(--wc-ios-t-headline);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--wc-ios-r-md);
    cursor: pointer;
    transition: transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                opacity var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.wc-campaign-cta:hover {
    opacity: 0.9;
}

.wc-campaign-cta:active {
    transform: scale(0.97);
}

.wc-campaign-cta:disabled {
    opacity: 0.65;
    cursor: default;
}

/* ========================================
   U7 — inline error, replaces four native alert() calls
   ======================================== */

.wc-campaign-error {
    display: block;
    margin: 12px 0 0;
    padding: 10px 14px;
    background: rgba(255, 59, 48, 0.14);
    border-radius: var(--wc-ios-r-sm);
    color: var(--wc-ios-red);
    font-size: var(--wc-ios-t-footnote);
    line-height: 1.4;
    text-align: center;
    animation: wcIosFadeIn var(--wc-ios-dur-fast) var(--wc-ios-ease-std) both;
}

/* ========================================
   U19 — empty state when a tag matches nothing
   ======================================== */

.wc-discovery-empty {
    padding: 28px 16px;
    color: var(--wc-ios-label-3);
    font-size: var(--wc-ios-t-subhead);
    line-height: 1.45;
    text-align: center;
}

/* ========================================
   Discovery Popup — Product Recommendations
   ======================================== */

#wc-campaign-exit-modal.wc-discovery-modal {
    max-width: 620px;
    padding: 40px 10px 25px;
}

/* ========================================
   BXGY popup (v9)

   Espresso sheet, like every other popup this store opens, with the progress stack
   sitting on a white inset panel inside it.

   v8 inverted the entire modal instead, because the stack is the cart page's markup
   verbatim and the cart page is light. That worked for the stack and broke the modal:
   the shell no longer matched any other popup, the base title rule is
   `--wc-ios-label !important` so the light override lost the cascade and the headline
   rendered white on white, and the mobile grabber — white at 32% — vanished on the one
   variant that is a bottom sheet.

   Giving the stack a panel the size of itself keeps what v8 wanted (every token inside
   the slot resolves exactly as on the cart page, so bxgy-progress_v9.css stays a
   sizing-only scope) without inverting anything above it. The title, description, close
   button, grabber and error all fall back to the base rules, which were correct all along.

   Both background and color are still set on every block below, so a client forcing a
   dark ground cannot produce unreadable text.
   ======================================== */

#wc-campaign-exit-modal.is-bxgy {
    max-width: 560px;
    padding: 34px 20px 22px;
    text-align: left;
    /* The base rule sets no ceiling, because a title, a line of copy and a button
       have never needed one. A meter, a terms block and a product row do: on a short
       laptop viewport this card is taller than the screen, and a modal centred with
       translate(-50%, -50%) puts the overflow off the top where it cannot be reached. */
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#wc-campaign-exit-modal.is-bxgy .wc-campaign-content {
    text-align: left;
}

/* Title and description keep their tighter scale here — a meter and a product row below
   need the room a 1.75rem title would take. Colour is deliberately not set: the base
   rules are white-on-espresso and that is now correct. The title's base rule carries
   !important, so re-stating a colour here would have to carry one too. */
#wc-campaign-exit-modal.is-bxgy .wc-campaign-title {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.3;
    text-align: left;
}

#wc-campaign-exit-modal.is-bxgy .wc-campaign-desc {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}

/* The light ground the stack needs, no larger than the stack. Everything inside resolves
   exactly as it does on the cart page, which is what lets bxgy-progress_v9.css carry
   sizing and no colour at all. */
#wc-campaign-exit-modal.is-bxgy .wc-campaign-bxgy-slot {
    margin-top: 4px;
    padding: 14px;
    border-radius: var(--wc-ios-r-lg);
    background: var(--wc-ios-bg);
    color: var(--wc-ios-ink);
}

/* The stack's own bottom margin is written for the gap above a cart table. */
#wc-campaign-exit-modal.is-bxgy .wc-campaign-bxgy-slot .wc-bxgy-progress-stack {
    margin-bottom: 0;
}

/* The way out to the cart. The card carries its own CTA, so this is a quiet
   secondary action rather than a second primary button competing with it.

   Scoped to .is-bxgy from v9: it sits outside the white panel, on the espresso sheet,
   so it draws on the material tokens and those only resolve correctly inside the modal. */
#wc-campaign-exit-modal.is-bxgy .wc-campaign-bxgy-cart-link {
    display: block;
    margin: 14px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--wc-ios-sep);
    border-radius: var(--wc-ios-r-md);
    background: var(--wc-ios-fill);
    color: var(--wc-ios-label);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

#wc-campaign-exit-modal.is-bxgy .wc-campaign-bxgy-cart-link:hover,
#wc-campaign-exit-modal.is-bxgy .wc-campaign-bxgy-cart-link:focus {
    background: var(--wc-ios-fill-2);
    color: var(--wc-ios-label);
    text-decoration: none;
}

#wc-campaign-exit-modal.is-bxgy .wc-campaign-bxgy-cart-link:focus-visible {
    outline: 2px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

.wc-discovery-grid {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.wc-discovery-grid.wc-discovery-slider-enabled {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--wc-ios-label-4) transparent;
}

.wc-discovery-grid::-webkit-scrollbar {
    height: 6px;
}

.wc-discovery-grid::-webkit-scrollbar-thumb {
    background: var(--wc-ios-label-4);
    border-radius: var(--wc-ios-r-pill);
}

.wc-discovery-card {
    flex: 1 1 0;
    min-width: 140px;
    max-width: 180px;
    background: var(--wc-ios-fill);
    border: 1px solid var(--wc-ios-sep);
    border-radius: var(--wc-ios-r-md);
    padding: 12px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                background var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
}

.wc-discovery-card:active {
    transform: scale(0.97);
}

.wc-discovery-grid.wc-discovery-slider-enabled .wc-discovery-card {
    flex: 0 0 auto;
    width: 160px;
    max-width: none;
    scroll-snap-align: start;
}

.wc-discovery-card a {
    text-decoration: none;
    color: inherit;
}

/* U15 — aspect-ratio + intrinsic size so the grid does not shift as it fills. */
.wc-discovery-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--wc-ios-r-sm);
    margin-bottom: 8px;
    display: block;
    background: var(--wc-ios-fill);
}

.wc-discovery-card-info {
    min-width: 0;
    flex: 1;
}

.wc-discovery-card-name {
    display: block;
    color: var(--wc-ios-label) !important;
    font-size: var(--wc-ios-t-footnote);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-discovery-card-name:hover {
    text-decoration: underline;
}

.wc-discovery-card-price {
    color: var(--wc-ios-label) !important;
    font-size: var(--wc-ios-t-footnote);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.wc-discovery-card-price span {
    color: var(--wc-ios-label) !important;
}

.wc-discovery-card-price del {
    opacity: 0.5;
    font-weight: 400;
}

.wc-discovery-card-price ins {
    text-decoration: none;
    font-weight: 700;
}

/* U19 — stock state on the grid, so add-to-cart is not where the shopper
 * first learns an item is unavailable. */
.wc-discovery-card-stock {
    display: block;
    margin: 0 0 6px;
    font-size: var(--wc-ios-t-caption);
    font-weight: 600;
    color: var(--wc-ios-orange);
}

.wc-discovery-card-stock--out {
    color: var(--wc-ios-label-3);
}

.wc-discovery-card--out-of-stock img {
    opacity: 0.55;
}

/* iOS filled control, 44pt minimum target */
.wc-discovery-add-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: var(--wc-ios-t-footnote);
    font-weight: 600;
    letter-spacing: -0.01em;
    border: none;
    background: var(--wc-ios-fill-2);
    color: var(--wc-ios-label);
    border-radius: var(--wc-ios-r-sm);
    cursor: pointer;
    transition: background var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
    box-sizing: border-box;
    margin: 0;
}

.wc-discovery-add-btn:hover {
    background: var(--wc-ios-label);
    color: var(--wc-ios-brand);
}

.wc-discovery-add-btn:active {
    transform: scale(0.96);
}

.wc-discovery-add-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

/* CSS-only activity indicator. The JS keeps setting .text(), so the label is
 * still available to assistive technology — this only adds the spinner. */
.wc-discovery-add-btn:disabled:not(.added)::after {
    content: '';
    width: 13px;
    height: 13px;
    margin-inline-start: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wcIosSpin 0.7s linear infinite;
}

@keyframes wcIosSpin {
    to { transform: rotate(360deg); }
}

.wc-discovery-add-btn.added {
    background: rgba(52, 199, 89, 0.22);
    color: var(--wc-ios-green);
    cursor: default;
}

.wc-discovery-card-error {
    color: var(--wc-ios-red);
    font-size: var(--wc-ios-t-caption);
    line-height: 1.35;
    margin-top: 6px;
}

/* ========================================
   Discovery card action buttons
   ======================================== */

.wc-discovery-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
}

.wc-discovery-quick-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 6px;
    font-size: var(--wc-ios-t-caption);
    font-weight: 600;
    background: transparent;
    border: none;
    border-radius: var(--wc-ios-r-xs);
    color: var(--wc-ios-label-3);
    cursor: pointer;
    transition: color var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
    text-decoration: none;
    margin: 0;
}

.wc-discovery-quick-view-btn:hover {
    color: var(--wc-ios-label);
}

/* ========================================
   Tag selector (Segments A & C)
   Re-themed onto espresso; raised to a real touch target.
   ======================================== */

.wc-discovery-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 16px;
    padding: 0 4px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--wc-ios-label-4) transparent;
}

.wc-discovery-tags::-webkit-scrollbar {
    height: 4px;
}

.wc-discovery-tags::-webkit-scrollbar-thumb {
    background: var(--wc-ios-label-4);
    border-radius: var(--wc-ios-r-pill);
}

.wc-discovery-tag {
    display: inline-flex;
    align-items: center;
    background: var(--wc-ios-fill);
    border: 1px solid var(--wc-ios-sep);
    border-radius: var(--wc-ios-r-pill);
    min-height: 36px;
    padding: 0 14px;
    margin: 0;
    font-size: var(--wc-ios-t-subhead);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                color var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
    white-space: nowrap;
    color: var(--wc-ios-label-2);
    flex-shrink: 0;
}

.wc-discovery-tag:hover {
    background: var(--wc-ios-fill-2);
    color: var(--wc-ios-label);
}

.wc-discovery-tag:active {
    transform: scale(0.96);
}

.wc-discovery-tag.active {
    background: var(--wc-ios-label);
    color: var(--wc-ios-brand);
    border-color: var(--wc-ios-label);
    font-weight: 600;
}

/* ========================================
   Rating badge
   ======================================== */

.wc-discovery-rating-badge {
    font-size: var(--wc-ios-t-caption);
    color: var(--wc-ios-orange);
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.wc-discovery-rating-badge .review-count {
    color: var(--wc-ios-label-3);
    font-size: var(--wc-ios-t-caption);
}

/* ========================================
   Floating Trigger Button
   ======================================== */

.wc-campaign-floating-trigger {
    position: fixed;
    bottom: calc(42px + var(--wc-ios-safe-b));
    left: 30px;
    width: 60px;
    height: 60px;
    padding: 0;
    background: var(--wc-ios-brand);
    border: 1px solid var(--wc-ios-sep);
    /* iOS app-icon proportion: ~22.5% of the box */
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999997;
    color: var(--wc-ios-label);
    overflow: visible;
    font-family: var(--wc-ios-font);
    font-weight: 600;
    transition: transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                box-shadow var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                background var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
    animation: wc-trigger-glow 2.8s ease-in-out infinite;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .wc-campaign-floating-trigger {
        background: var(--wc-ios-material-thick);
        -webkit-backdrop-filter: var(--wc-ios-blur);
        backdrop-filter: var(--wc-ios-blur);
    }
}

.wc-campaign-floating-trigger:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.wc-campaign-floating-trigger:active {
    transform: scale(0.92);
}

.wc-trigger-icon {
    font-size: 28px;
    line-height: 1;
    display: block;
    animation: wc-trigger-icon-bob 2.2s ease-in-out infinite;
}

/* U5 — dismiss affordance. Without it a shopper who explicitly declined
 * carries the badge on every page load for the whole cooldown. */
.wc-trigger-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wc-ios-brand);
    color: var(--wc-ios-label);
    border: 1px solid var(--wc-ios-sep);
    border-radius: var(--wc-ios-r-pill);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
}

.wc-trigger-close:hover {
    background: #43140a;
}

.wc-trigger-close:active {
    transform: scale(0.9);
}

.wc-trigger-talk {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--wc-ios-brand);
    color: var(--wc-ios-label);
    border: 1px solid var(--wc-ios-sep);
    border-radius: var(--wc-ios-r-sm);
    padding: 8px 10px;
    font-size: var(--wc-ios-t-footnote);
    line-height: 1.15;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: none;
    animation: wc-trigger-talk-pulse 2.4s ease-in-out infinite;
}

.wc-trigger-talk::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid var(--wc-ios-brand);
}

.wc-campaign-floating-trigger.hidden {
    display: none;
}

@keyframes wc-trigger-glow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); }
}

@keyframes wc-trigger-icon-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

@keyframes wc-trigger-talk-pulse {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 1; }
}

/* ========================================
   Quick View Modal
   ======================================== */

#wc-campaign-qv-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000000; /* above discovery popup */
    animation: wcIosFadeIn var(--wc-ios-dur-fast) var(--wc-ios-ease-std) both;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #wc-campaign-qv-overlay {
        background: rgba(0, 0, 0, 0.48);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

#wc-campaign-qv-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--wc-ios-brand);
    padding: 30px;
    border-radius: var(--wc-ios-r-lg);
    z-index: 1000001;
    max-width: 800px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    font-family: var(--wc-ios-font);
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: wcIosModalIn var(--wc-ios-dur-fast) var(--wc-ios-ease-std) both;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #wc-campaign-qv-modal {
        background: var(--wc-ios-material-thick);
        -webkit-backdrop-filter: var(--wc-ios-blur);
        backdrop-filter: var(--wc-ios-blur);
    }
}

#wc-campaign-qv-modal .wc-campaign-close {
    z-index: 2;
}

.wc-qv-content {
    display: flex;
    gap: 30px;
    text-align: left;
}

.wc-qv-gallery {
    flex: 1;
    min-width: 0;
}

.wc-qv-main-image {
    width: 90%;
    height: auto;
    border-radius: var(--wc-ios-r-md);
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0 auto 10px;
    display: block;
    background: var(--wc-ios-fill);
}

.wc-qv-thumbnails {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.wc-qv-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--wc-ios-r-xs);
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: opacity var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                border-color var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
}

.wc-qv-thumb.active,
.wc-qv-thumb:hover {
    opacity: 1;
    border-color: var(--wc-ios-label);
}

.wc-qv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wc-qv-info h2 {
    color: var(--wc-ios-label) !important;
    font-size: var(--wc-ios-t-title3);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: 10px;
}

.wc-qv-price {
    font-size: var(--wc-ios-t-title3);
    color: var(--wc-ios-label) !important;
    margin-bottom: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wc-qv-price span {
    color: var(--wc-ios-label) !important;
}

.wc-qv-price del {
    font-size: var(--wc-ios-t-callout);
    opacity: 0.6;
    margin-right: 10px;
    font-weight: 400;
}

.wc-qv-price ins {
    text-decoration: none;
    font-weight: 700;
}

.wc-qv-desc {
    color: var(--wc-ios-label-2);
    font-size: var(--wc-ios-t-footnote);
    line-height: 1.45;
    margin-bottom: 10px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wc-qv-add-btn {
    min-height: 50px;
    padding: 12px 20px;
    font-size: var(--wc-ios-t-headline);
    border-radius: var(--wc-ios-r-md);
    background: var(--wc-ios-label);
    color: var(--wc-ios-brand);
}

.wc-qv-add-btn:hover {
    opacity: 0.9;
    background: var(--wc-ios-label);
    color: var(--wc-ios-brand);
}

/* ========================================
   Dweller Popup (Segment D)
   Re-themed onto espresso; the amber card no longer inverts to a light surface.
   ======================================== */

.wc-dweller-images {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.wc-dweller-images a {
    flex: 0 0 auto;
}

.wc-dweller-images img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--wc-ios-r-sm);
    display: block;
    background: var(--wc-ios-fill);
}

.wc-discovery-dweller .wc-discovery-dweller-product {
    max-width: 100%;
    min-width: 0;
    flex: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "images info"
        "images actions";
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    text-align: left;
    border: 1px solid rgba(255, 149, 0, 0.45);
    border-radius: var(--wc-ios-r-md);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--wc-ios-fill-2);
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-dweller-images {
    grid-area: images;
    margin-bottom: 0;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-dweller-images img {
    width: 90px;
    height: 90px;
}

/* Fallback: no gallery — single image link */
.wc-discovery-dweller .wc-discovery-dweller-product > a:first-child {
    grid-area: images;
}

.wc-discovery-dweller .wc-discovery-dweller-product > a:first-child img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--wc-ios-r-sm);
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-info {
    grid-area: info;
    min-width: 0;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-actions {
    grid-area: actions;
    flex-direction: row;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    gap: 8px;
}

/* The card is dark now, so these keep !important but resolve to the light
 * label colour — they still have to beat Flatsome's link/price styling. */
.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-name {
    color: var(--wc-ios-label) !important;
    font-size: var(--wc-ios-t-subhead);
    white-space: normal;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-price,
.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-price span {
    color: var(--wc-ios-label) !important;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-price del {
    color: var(--wc-ios-label-3) !important;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-price ins {
    color: var(--wc-ios-label) !important;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-rating-badge {
    color: var(--wc-ios-orange);
    justify-content: flex-start;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-rating-badge .review-count {
    color: var(--wc-ios-label-3);
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-add-btn {
    background: var(--wc-ios-orange);
    color: #ffffff;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-add-btn:hover {
    background: #e08600;
    color: #ffffff;
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-add-btn.added {
    background: rgba(52, 199, 89, 0.22);
    color: var(--wc-ios-green);
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-quick-view-btn {
    color: var(--wc-ios-label-3);
}

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-quick-view-btn:hover {
    color: var(--wc-ios-label);
}

/* ========================================
   Reviews
   ======================================== */

.wc-discovery-reviews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}

.wc-discovery-review {
    background: var(--wc-ios-fill);
    border-radius: var(--wc-ios-r-sm);
    padding: 10px 12px;
    margin-bottom: 6px;
    border-inline-start: 3px solid var(--wc-ios-orange);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 8px;
    align-items: baseline;
    text-align: start;
}

.wc-discovery-review:last-child {
    margin-bottom: 0;
}

.wc-discovery-stars {
    font-size: var(--wc-ios-t-caption);
    margin-bottom: 0;
    letter-spacing: -1px;
}

.wc-discovery-stars .star-filled {
    color: var(--wc-ios-orange);
}

.wc-discovery-stars .star-empty {
    color: var(--wc-ios-label-4);
}

/* The nowrap + ellipsis this used to carry existed to truncate long real names.
 * U18 masks every author to "****", so the only thing ellipsis could clip now is
 * the verified badge. Wrap instead. */
.wc-discovery-review-author {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 2px;
    min-width: 0;
    font-weight: 600;
    font-size: var(--wc-ios-t-caption);
    color: var(--wc-ios-label-2);
    margin-bottom: 0;
}

/* U18 — the author is fully masked, so the verified label carries the trust
 * signal the redaction was costing. */
.wc-campaign-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 4px;
    font-size: var(--wc-ios-t-caption);
    font-weight: 500;
    color: var(--wc-ios-green);
    white-space: nowrap;
}

.wc-campaign-verified::before {
    content: "\2713";
    font-weight: 700;
    font-size: 0.9em;
}

.wc-discovery-review-text {
    grid-column: 1 / -1;
    font-size: var(--wc-ios-t-caption);
    color: var(--wc-ios-label-3);
    font-style: italic;
    line-height: 1.35;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   Discovery Cart CTA
   ======================================== */

.wc-discovery-cart-cta {
    background: var(--wc-ios-label);
    color: #000;
    border: none;
    padding: 15px 30px;
    min-height: 50px;
    font-size: var(--wc-ios-t-headline);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--wc-ios-r-md);
    cursor: pointer;
    transition: transform var(--wc-ios-dur-fast) var(--wc-ios-ease-std),
                opacity var(--wc-ios-dur-fast) var(--wc-ios-ease-std);
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    text-align: center;
    text-decoration: none;
}

.wc-discovery-cart-cta:hover {
    opacity: 0.9;
    color: #000;
}

.wc-discovery-cart-cta:active {
    transform: scale(0.97);
}

.wc-discovery-cart-cta.hidden {
    display: none;
}

/* ========================================
   Quick View Reviews (compact)
   ======================================== */

.wc-qv-reviews {
    margin-top: 8px;
    border-top: 1px solid var(--wc-ios-sep);
    padding-top: 6px;
}

.wc-qv-reviews-heading {
    font-size: var(--wc-ios-t-footnote);
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--wc-ios-label-2);
}

.wc-qv-review {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0 6px;
    padding: 4px 0;
    line-height: 1.3;
}

.wc-qv-review + .wc-qv-review {
    border-top: 1px solid var(--wc-ios-fill);
}

.wc-qv-review .wc-discovery-stars {
    font-size: var(--wc-ios-t-caption);
    letter-spacing: -1px;
    margin-bottom: 0;
}

.wc-qv-review-author {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 2px;
    min-width: 0;
    font-size: var(--wc-ios-t-caption);
    color: var(--wc-ios-label-3);
}

.wc-qv-review-text {
    grid-column: 1 / -1;
    margin: 1px 0 0;
    font-size: var(--wc-ios-t-caption);
    color: var(--wc-ios-label-3);
    font-style: italic;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   U1 — body scroll lock while a sheet is open
   ======================================== */

body.wc-campaign-modal-open {
    overflow: hidden;
}

/* ========================================
   Mobile — iOS bottom sheet presentation (<= 768px)
   ======================================== */

@media screen and (max-width: 768px) {
    /* .wc-discovery-modal is listed explicitly because #id.class outranks #id:
     * without it the discovery sheet keeps its 620px desktop cap and sits
     * left-aligned on tablets instead of spanning the screen. */
    #wc-campaign-exit-modal,
    #wc-campaign-exit-modal.wc-discovery-modal,
    #wc-campaign-exit-modal.is-bxgy,
    #wc-campaign-qv-modal {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        transform: none;
        border-radius: var(--wc-ios-r-xl) var(--wc-ios-r-xl) 0 0;
        box-shadow: var(--wc-ios-shadow-sheet);
        max-height: 92vh;
        max-height: 92dvh; /* survives the iOS URL bar collapsing */
        padding-bottom: calc(20px + var(--wc-ios-safe-b));
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: wcIosSheetIn var(--wc-ios-dur-sheet) var(--wc-ios-ease-sheet) both;
        will-change: transform;
    }

    /* Same specificity problem as above: the discovery modal's desktop padding
     * is set through #id.class, so it has to be restated here or the sheet loses
     * its safe-area bottom padding between 481px and 768px. */
    #wc-campaign-exit-modal.wc-discovery-modal {
        padding: 40px 10px calc(20px + var(--wc-ios-safe-b));
    }

    /* Third instance of the same specificity problem, for the same reason. */
    #wc-campaign-exit-modal.is-bxgy {
        padding: 26px 12px calc(20px + var(--wc-ios-safe-b));
    }

    /* Grabber */
    #wc-campaign-exit-modal::before,
    #wc-campaign-qv-modal::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 5px;
        border-radius: var(--wc-ios-r-pill);
        background: var(--wc-ios-label-4);
        pointer-events: none;
    }

    @keyframes wcIosSheetIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Drag-to-dismiss: JS sets --wc-sheet-y and toggles this class. While
     * dragging the transition is off so the sheet tracks the finger exactly. */
    #wc-campaign-exit-modal.wc-campaign-sheet-dragging,
    #wc-campaign-qv-modal.wc-campaign-sheet-dragging {
        animation: none;
        transition: none;
        transform: translateY(var(--wc-sheet-y, 0px));
    }

    #wc-campaign-exit-modal.wc-campaign-sheet-settling,
    #wc-campaign-qv-modal.wc-campaign-sheet-settling {
        animation: none;
        transform: translateY(var(--wc-sheet-y, 0px));
        transition: transform var(--wc-ios-dur-sheet) var(--wc-ios-ease-sheet);
    }

    .wc-qv-content {
        flex-direction: column;
        gap: 20px;
    }

    .wc-discovery-grid.wc-discovery-slider-enabled {
        max-height: min(56vh, 420px);
        overflow-y: auto;
    }
}

/* ========================================
   Mobile — layout adjustments (<= 480px)
   ======================================== */

@media screen and (max-width: 480px) {
    #wc-campaign-exit-modal {
        padding: 30px 16px calc(20px + var(--wc-ios-safe-b));
    }

    #wc-campaign-exit-modal.wc-discovery-modal {
        padding: 28px 14px calc(16px + var(--wc-ios-safe-b));
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
    }

    .wc-discovery-modal .wc-campaign-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .wc-campaign-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 20px;
        background: var(--wc-ios-fill-2);
    }

    .wc-campaign-content h2,
    .wc-campaign-content .wc-campaign-title {
        font-size: var(--wc-ios-t-title3);
        margin-bottom: 12px;
        padding: 0 6px;
        flex-shrink: 0;
    }

    .wc-campaign-desc {
        font-size: var(--wc-ios-t-subhead);
        margin-bottom: 22px;
    }

    .wc-campaign-cta {
        padding: 14px 20px;
        font-size: var(--wc-ios-t-callout);
    }

    .wc-discovery-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: nowrap;
        overflow: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }

    .wc-discovery-grid.wc-discovery-slider-enabled {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: none;
        padding-right: 4px;
        scrollbar-width: thin;
    }

    .wc-discovery-grid.wc-discovery-slider-enabled::-webkit-scrollbar {
        width: 4px;
        height: auto;
    }

    .wc-discovery-card,
    .wc-discovery-grid.wc-discovery-slider-enabled .wc-discovery-card {
        max-width: 100%;
        width: 100%;
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "image info"
            "actions actions";
        column-gap: 10px;
        row-gap: 8px;
        align-items: start;
        text-align: left;
        padding: 8px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--wc-ios-sep);
        border-radius: var(--wc-ios-r-md);
        scroll-snap-align: none;
    }

    .wc-discovery-card img {
        width: 72px;
        height: 72px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        flex-shrink: 0;
        margin-bottom: 0;
        border-radius: var(--wc-ios-r-sm);
    }

    .wc-discovery-card > a:first-child {
        grid-area: image;
        align-self: start;
    }

    .wc-discovery-card-info {
        grid-area: info;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .wc-discovery-card-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: var(--wc-ios-t-subhead);
        margin-bottom: 4px;
    }

    .wc-discovery-card-price {
        font-size: var(--wc-ios-t-subhead);
        margin-bottom: 4px;
        font-weight: 700;
    }

    .wc-discovery-card-price del {
        font-size: var(--wc-ios-t-caption);
        margin-right: 5px;
    }

    .wc-discovery-rating-badge {
        justify-content: flex-start;
    }

    .wc-discovery-card .wc-discovery-card-actions {
        grid-area: actions;
        margin-top: 0;
        padding-top: 8px;
        border-top: 1px solid var(--wc-ios-sep);
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: stretch;
        width: 100%;
    }

    .wc-discovery-card .wc-discovery-quick-view-btn {
        width: auto;
        flex: 1 1 0;
        font-size: var(--wc-ios-t-caption);
        min-height: 44px;
        border-radius: var(--wc-ios-r-sm);
        background: var(--wc-ios-fill);
        text-decoration: none;
        color: var(--wc-ios-label-2);
    }

    .wc-discovery-card .wc-discovery-add-btn {
        width: auto;
        flex: 1 1 0;
        min-height: 44px;
        padding: 8px 10px;
        font-size: var(--wc-ios-t-caption);
        flex-shrink: 0;
        margin-top: 0;
    }

    .wc-discovery-card .wc-discovery-card-actions > button:only-child {
        flex: 1 1 100%;
    }

    /* Tag pills */
    .wc-discovery-tags {
        gap: 6px;
        flex-shrink: 0;
    }

    .wc-discovery-tag {
        min-height: 34px;
        padding: 0 13px;
        font-size: var(--wc-ios-t-footnote);
    }

    /* Floating trigger */
    .wc-campaign-floating-trigger {
        bottom: calc(28px + var(--wc-ios-safe-b));
        left: 20px;
        width: 50px;
        height: 50px;
        border-radius: 12px;
    }

    .wc-trigger-icon {
        font-size: 24px;
    }

    .wc-trigger-talk {
        left: calc(100% + 8px);
        border-radius: var(--wc-ios-r-xs);
        padding: 6px 8px;
        font-size: var(--wc-ios-t-caption);
    }

    .wc-trigger-talk::before {
        border-top-width: 6px;
        border-bottom-width: 6px;
        border-right-width: 6px;
    }

    /* Dweller — centred stacked layout */
    #wc-campaign-exit-modal.wc-discovery-dweller {
        overflow-y: auto;
    }

    .wc-discovery-dweller .wc-campaign-content {
        overflow-y: visible;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        grid-template-columns: none;
        padding: 14px 12px;
        border-radius: var(--wc-ios-r-md);
        margin-bottom: 14px;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product img {
        width: 90px;
        height: 90px;
        border-radius: var(--wc-ios-r-sm);
        margin-bottom: 10px;
    }

    .wc-discovery-dweller .wc-dweller-images {
        width: 100%;
        gap: 6px;
        margin-bottom: 8px;
    }

    .wc-discovery-dweller .wc-dweller-images img {
        width: 72px;
        height: 72px;
        margin-bottom: 0;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-info {
        width: 100%;
        align-items: center;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-name {
        font-size: var(--wc-ios-t-subhead);
        white-space: normal;
        -webkit-line-clamp: 2;
        text-align: center;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-price {
        font-size: var(--wc-ios-t-callout);
        font-weight: 700;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-rating-badge {
        justify-content: center;
        margin-bottom: 4px;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-actions {
        border-top-color: var(--wc-ios-sep);
        flex-direction: row;
        width: 100%;
        padding-top: 10px;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-add-btn {
        font-size: var(--wc-ios-t-footnote);
        font-weight: 700;
        flex: 1.5 1 0;
    }

    .wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-quick-view-btn {
        background: var(--wc-ios-fill);
        font-size: var(--wc-ios-t-caption);
        flex: 1 1 0;
    }

    /* Reviews — single column */
    .wc-discovery-reviews {
        grid-template-columns: 1fr;
        margin: 8px 0;
    }

    .wc-discovery-review {
        padding: 10px 14px;
        margin-bottom: 8px;
        gap: 2px 8px;
        border-radius: var(--wc-ios-r-sm);
        background: var(--wc-ios-fill-2);
    }

    .wc-discovery-stars {
        font-size: var(--wc-ios-t-footnote);
        letter-spacing: 0;
    }

    .wc-discovery-review-author {
        font-size: var(--wc-ios-t-footnote);
    }

    .wc-discovery-review-text {
        font-size: var(--wc-ios-t-footnote);
        line-height: 1.5;
        margin-top: 4px;
        -webkit-line-clamp: 3;
        color: var(--wc-ios-label-2);
    }

    .wc-discovery-cart-cta {
        padding: 13px 20px;
        font-size: var(--wc-ios-t-callout);
        margin-top: 12px;
    }

    /* Dweller: let the modal scroll as a whole, not the grid independently */
    .wc-discovery-dweller .wc-discovery-grid.wc-discovery-slider-enabled {
        overflow-y: visible;
        flex: none;
    }
}

/* ========================================
   Reduced motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    #wc-campaign-exit-overlay,
    #wc-campaign-exit-modal,
    #wc-campaign-qv-overlay,
    #wc-campaign-qv-modal,
    .wc-campaign-error,
    .wc-campaign-floating-trigger,
    .wc-trigger-icon,
    .wc-trigger-talk {
        animation: none;
    }

    .wc-campaign-floating-trigger,
    .wc-trigger-close,
    .wc-trigger-talk,
    .wc-campaign-close,
    .wc-campaign-cta,
    .wc-discovery-card,
    .wc-discovery-add-btn,
    .wc-discovery-tag,
    .wc-discovery-cart-cta,
    .wc-qv-thumb {
        transition: none;
    }

    .wc-discovery-add-btn:disabled:not(.added)::after {
        animation: none;
    }
}