/**
 * WooCommerce Campaign Manager — Exit Intent / Discovery / Quick View
 *
 * v14 (2.23.13): U55 -- the struck "was" price on the discovery card and the dweller card is the solid
 * --twm-cm-on-dark-was-price (#cfc2be) with no opacity; white at 0.5, and the dimmed label at 0.5 on the dweller
 * card, were 2.05 - 4.10:1 on the computer sheet. U56 -- --wc-ios-label-3 is white at 0.62 (twm-cm-tokens_v2.css),
 * 4.63:1 on the worst surface instead of 3.79. U58 -- the touch card's title may take two lines (line-clamp 2) and
 * the script gives it a title attribute with the full text.
 *
 * v13 (2.23.7): U34, colour by role on the dark popup (tokens in twm-cm-tokens_v2.css, a dependency of this
 * stylesheet's handle). Text that was the bright system red or green on the espresso ground (4.4 and 4.0:1,
 * 3.2 - 3.6 on the translucent sheet over a dimmed page) is --twm-cm-on-dark-red / --twm-cm-on-dark-green:
 * the coupon error, the discovery card error, "Added" and the verified label. The amber dweller card's button
 * is a --twm-cm-fill-orange background for its white text (2.2:1 before), darker on hover.
 *
 * v12 (2.23.3.1, Fizzy #789): the customer's own coupon in the exit popup. Only what the new blocks need:
 *  - .twm-cm-own-coupon (on the sheet and on the card) with --too-large for the state that applies nothing;
 *  - __urgent (the "Only N days left" line), __more and __more-link (the pointer to the customer's other
 *    coupons, a 44 px target), __desc--tight (the description sits closer to the urgency line).
 *  Everything else reuses the coupon popup's own classes. Light surface text colours come from the shared
 *  tokens; each block sets both its background and its colour.
 *
 * v11 (2.23.1, Fizzy #780): touch screens.
 *  - U45: the card (#twm-cm-exit-card) -- an automatic popup on a touch screen is a small card at
 *    the bottom with no overlay and no scroll lock. It sits above a fixed bar found at the foot
 *    of the screen (--twm-cm-card-bottom, measured by the script) and is capped at 480 px wide.
 *  - U47: every close control has a 44 px hit area; the BXGY and dweller sheets keep theirs in
 *    view while they scroll; the grabber is a real element (.twm-cm-grabber) with
 *    touch-action:none, so the drag is no longer taken for a scroll.
 *  - P34: no backdrop blur on phones (30 px on a sheet of up to 92 % of the screen, over a 4 px
 *    blurred overlay, while the sheet animated); the badge's endless glow, bob and pulse are gone.
 *  - U48: the badge is a pill -- open and dismiss are two 44 px targets side by side, it says when
 *    it is loading, and it fades in instead of appearing.
 *  - U42: .twm-cm-arming -- a new sheet or card ignores taps for its first 400 ms.
 *  - U35: reduced motion also stops the discovery and BXGY sheets and the drag settle.
 *
 * v10 (2.22.3): the popup shell.
 *  - U29: the scroll lock also targets <html>. Flatsome sets html{overflow-x:hidden}, and
 *    while the root's overflow is not visible, body's overflow never reaches the viewport --
 *    so the page behind every popup kept scrolling.
 *  - U30: the height cap .is-bxgy got in v8 now applies to every modal. The discovery and
 *    coupon popups are taller than a short laptop screen, and a modal centred with
 *    translate(-50%, -50%) puts its overflow off the top, close button included.
 *  - L55: the floating badge is a plain box holding two buttons (.wc-trigger-open and the U5
 *    .wc-trigger-close), and quick-view thumbnails sit in .wc-qv-thumb-btn. Both get an
 *    explicit reset, because Flatsome styles every <button>. The badge hides while Flatsome's
 *    off-canvas menu is open (html.has-off-canvas), which it used to float over.
 *
 * 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_v11.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_v11.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_v22.js builds this DOM at runtime and depends on all of them.
 */

/* 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). */

/* ========================================
   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%;
    /* U30 — every modal, not only .is-bxgy. A modal centred with translate(-50%, -50%) puts
       any overflow off the top of the screen, where it cannot be scrolled to. The mobile
       sheet rules below restate their own ceiling. */
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    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);
}

/* U47 -- 44 px to tap, whatever size the circle is drawn at. */
.wc-campaign-close::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
}

/* 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-trigger-open:focus-visible,
.wc-qv-thumb-btn: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(--twm-cm-on-dark-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_v11.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 height cap that used to live here moved to the base rule in v10 (U30). */
}

#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_v11.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;
}

/* U55 -- a solid colour, no opacity. The amount inside the <del> is a span with its own white !important colour (the rule
 * above), so the span is set too. The token is 5.25:1 on the worst surface (the dweller card on the computer sheet over a
 * white page), higher on the others; the line-through takes the <del>'s colour. */
.wc-discovery-card-price del,
.wc-discovery-card-price del span {
    color: var(--twm-cm-on-dark-was-price) !important;
    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(--twm-cm-on-dark-green);
    cursor: default;
}

.wc-discovery-card-error {
    color: var(--twm-cm-on-dark-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
   ======================================== */

/* U48 -- a pill: the open control (icon and label) and the dismiss control are two buttons side
 * by side, each at least 44 px, where the dismiss used to be a 24 px circle on the open button's
 * corner. No endless animation (P34): it fades in once. */
.wc-campaign-floating-trigger {
    position: fixed;
    bottom: calc(24px + var(--wc-ios-safe-b));
    left: 16px;
    display: flex;
    align-items: stretch;
    min-height: 48px;
    max-width: calc(100vw - 32px);
    padding: 0;
    background: var(--wc-ios-brand);
    color: var(--wc-ios-label);
    border: 1px solid var(--wc-ios-sep);
    border-radius: var(--wc-ios-r-pill);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
    z-index: 999997;
    font-family: var(--wc-ios-font);
    font-weight: 600;
    box-sizing: border-box;
    animation: wcIosFadeIn 0.3s var(--wc-ios-ease-std) both;
}

/* L55 — the badge's open control. Reset explicitly: Flatsome styles every <button>
 * (background, padding, min-height, text-transform, margin), same reason .wc-trigger-close
 * spells its properties out. */
.wc-trigger-open {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 46px;
    margin: 0;
    padding: 0 8px 0 14px;
    background: transparent;
    border: 0;
    border-radius: var(--wc-ios-r-pill) 0 0 var(--wc-ios-r-pill);
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    cursor: pointer;
}

.wc-trigger-open:active {
    background: var(--wc-ios-fill);
}

/* L55 — Flatsome's off-canvas menu sits at z-index 1042-1043; the badge (999997) floated over
 * it on phones. Flatsome adds has-off-canvas to <html> while the panel is open. */
html.has-off-canvas .wc-campaign-floating-trigger {
    display: none;
}

.wc-trigger-icon {
    font-size: 22px;
    line-height: 1;
    display: block;
    flex: none;
}

.wc-trigger-talk {
    font-size: var(--wc-ios-t-footnote);
    line-height: 1.2;
    white-space: nowrap;
    color: inherit;
}

/* U5 — dismiss affordance. Without it a shopper who explicitly declined
 * carries the badge on every page load. */
.wc-trigger-close {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 44px;
    min-height: 46px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--wc-ios-label-2);
    border: 0;
    border-left: 1px solid var(--wc-ios-sep);
    border-radius: 0 var(--wc-ios-r-pill) var(--wc-ios-r-pill) 0;
    box-shadow: none;
    font-size: 18px;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
}

.wc-trigger-close:hover,
.wc-trigger-close:active {
    background: var(--wc-ios-fill);
    color: var(--wc-ios-label);
}

/* U48 -- loading: the tap was taken, the popup is on its way. */
.wc-campaign-floating-trigger.is-loading {
    cursor: progress;
}

.wc-campaign-floating-trigger.is-loading .wc-trigger-open {
    pointer-events: none;
}

.wc-campaign-floating-trigger.is-loading .wc-trigger-icon {
    animation: twmCmWait 0.8s ease-in-out infinite alternate;
}

/* U48 -- the offer could not be loaded: the longer message may wrap. */
.wc-campaign-floating-trigger.is-failed .wc-trigger-talk {
    white-space: normal;
    max-width: 60vw;
    font-size: var(--wc-ios-t-caption);
}

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

@keyframes twmCmWait {
    from { opacity: 1; }
    to   { opacity: 0.35; }
}

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

/* L55 — each thumbnail sits in a button. Same explicit reset as .wc-trigger-open. */
.wc-qv-thumb-btn {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--wc-ios-r-xs);
    box-shadow: none;
    color: inherit;
    line-height: 0;
    cursor: pointer;
}

.wc-qv-thumb {
    display: block;
    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,
.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-card-price del span {
    color: var(--twm-cm-on-dark-was-price) !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(--twm-cm-fill-orange);
    color: #ffffff;
}

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

.wc-discovery-dweller .wc-discovery-dweller-product .wc-discovery-add-btn.added {
    background: rgba(52, 199, 89, 0.22);
    color: var(--twm-cm-on-dark-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(--twm-cm-on-dark-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;
}

.twm-cm-grabber {
    display: none;
}

/* U42 -- a sheet or card that just appeared ignores taps: the tap was meant for the page. */
#wc-campaign-exit-modal.twm-cm-arming,
#wc-campaign-qv-modal.twm-cm-arming,
.twm-cm-card.twm-cm-arming {
    pointer-events: none;
}

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

html.wc-campaign-modal-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));
    }

    /* P34 -- an opaque sheet and an unblurred overlay on phones: a backdrop-filter on a sheet
     * this size, while it animates, drops frames on a weak phone and reads as a flash. */
    #wc-campaign-exit-modal,
    #wc-campaign-qv-modal {
        background: var(--wc-ios-brand);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #wc-campaign-exit-overlay,
    #wc-campaign-qv-overlay {
        background: rgba(0, 0, 0, 0.45);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        animation-duration: 0.25s;
    }

    /* U47 -- the grabber is a real element, 44 px tall to hold, with touch-action:none so the
     * browser leaves the drag to the script instead of starting a scroll. */
    #wc-campaign-exit-modal > .twm-cm-grabber,
    #wc-campaign-qv-modal > .twm-cm-grabber {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 44px;
        z-index: 2;
        touch-action: none;
        cursor: grab;
    }

    #wc-campaign-exit-modal > .twm-cm-grabber::after,
    #wc-campaign-qv-modal > .twm-cm-grabber::after {
        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);
    }

    /* U47 -- these two sheets scroll as a whole, and an absolute close button scrolled away with
     * them. Sticky keeps it at the top of the sheet. The margins put it where it was (12 px from
     * the top and the side) and take its 32 px back out of the flow, so the content starts where
     * it did: top margin = 12 - padding-top, bottom margin = -(32 + top margin). */
    #wc-campaign-exit-modal.is-bxgy > .wc-campaign-close,
    #wc-campaign-exit-modal.wc-discovery-dweller > .wc-campaign-close {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    #wc-campaign-exit-modal.is-bxgy > .wc-campaign-close {
        margin: -14px 0 -18px auto; /* padding 26px 12px */
    }

    #wc-campaign-exit-modal.wc-discovery-dweller > .wc-campaign-close {
        margin: -28px 2px -4px auto; /* padding 40px 10px */
    }

    @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(16px + var(--wc-ios-safe-b));
        left: 12px;
    }

    .wc-trigger-open {
        padding: 0 6px 0 12px;
        gap: 6px;
    }

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

    .wc-trigger-talk {
        font-size: var(--wc-ios-t-caption);
    }

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

    /* U47 -- the sticky close at this width: 10 px from the top and the side. */
    #wc-campaign-exit-modal.wc-discovery-dweller > .wc-campaign-close {
        margin: -18px -4px -14px auto; /* padding 28px 14px */
    }

    #wc-campaign-exit-modal.is-bxgy > .wc-campaign-close {
        margin: -16px -2px -16px auto; /* padding 26px 12px */
    }

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

/* ========================================
   U45 — the card: an automatic popup on a touch screen
   ======================================== */

.twm-cm-card {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--twm-cm-card-bottom, 0px) + var(--wc-ios-safe-b));
    z-index: 999997;
    max-width: 480px;
    max-height: 40vh;
    max-height: 40dvh;
    margin: 0 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "body close"
        "cta cta"
        "error error";
    column-gap: 4px;
    row-gap: 12px;
    padding: 14px 8px 14px 16px;
    background: var(--wc-ios-brand);
    color: var(--wc-ios-label);
    border: 1px solid var(--wc-ios-sep);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    font-family: var(--wc-ios-font);
    text-align: left;
    animation: twmCmCardIn 0.2s var(--wc-ios-ease-std) both;
}

.twm-cm-card__body {
    grid-area: body;
    min-width: 0;
    padding-top: 4px;
}

/* U58 -- up to two lines (about 56 characters on a 360 px phone instead of 28); what still does not fit is cut with an
 * ellipsis and is in the title attribute the script sets. */
.twm-cm-card__title {
    margin: 0;
    color: var(--wc-ios-label);
    font-size: var(--wc-ios-t-headline);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.twm-cm-card__desc {
    margin: 4px 0 0;
    color: var(--wc-ios-label-2);
    font-size: var(--wc-ios-t-subhead);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.twm-cm-card__thumbs {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.twm-cm-card__thumbs img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--wc-ios-r-xs);
    background: var(--wc-ios-bg);
}

/* 44 px to tap; the drawn circle is 30 px (padding + content-box background). */
.twm-cm-card__close {
    -webkit-appearance: none;
    appearance: none;
    grid-area: close;
    align-self: start;
    width: 44px;
    height: 44px;
    min-height: 0;
    margin: -6px 0 0;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wc-ios-fill);
    background-clip: content-box;
    color: var(--wc-ios-label);
    border: 0;
    border-radius: var(--wc-ios-r-pill);
    box-shadow: none;
    font-size: 20px;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
}

.twm-cm-card__cta {
    -webkit-appearance: none;
    appearance: none;
    grid-area: cta;
    width: calc(100% - 8px);
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    background: var(--wc-ios-label);
    color: #000;
    border: 0;
    border-radius: var(--wc-ios-r-md);
    box-shadow: none;
    font-family: inherit;
    font-size: var(--wc-ios-t-callout);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    cursor: pointer;
}

.twm-cm-card__cta:disabled {
    opacity: 0.65;
    cursor: default;
}

.twm-cm-card__error {
    grid-area: error;
    margin-right: 8px;
}

.twm-cm-card__error:empty {
    display: none;
}

.twm-cm-card__error .wc-campaign-error {
    margin: 0;
}

.twm-cm-card__close:focus-visible,
.twm-cm-card__cta:focus-visible {
    outline: 3px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

@keyframes twmCmCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The live region that announces the card. */
.twm-cm-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   #789 — the customer's own coupon (sheet and card)
   ======================================== */

/* The description sits closer to the urgency line that follows it. */
.twm-cm-own-coupon__desc--tight {
    margin-bottom: 12px;
}

/* "Only 3 days left." A warm pill on the espresso surface: amber on a tint of itself. */
.twm-cm-own-coupon__urgent {
    display: inline-block;
    margin: 0 0 22px;
    padding: 5px 12px;
    background: rgba(255, 149, 0, 0.20);
    color: #ffc266;
    border-radius: var(--wc-ios-r-pill);
    font-size: var(--wc-ios-t-footnote);
    font-weight: 600;
    line-height: 1.3;
}

/* "2 more coupons in your account": a quiet line under the button, with a 44 px link. */
.twm-cm-own-coupon__more {
    margin: 12px 0 0;
    background: transparent;
    color: var(--wc-ios-label-2);
    font-size: var(--wc-ios-t-footnote);
    line-height: 1.4;
}

.twm-cm-own-coupon__more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    color: var(--wc-ios-label);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.twm-cm-own-coupon__more-link:hover {
    background: transparent;
    color: var(--wc-ios-label-2);
}

.twm-cm-own-coupon__more-link:focus-visible {
    outline: 3px solid var(--wc-ios-blue);
    outline-offset: 2px;
}

/* On the card the urgency line and the link sit under the description, small. */
.twm-cm-card .twm-cm-own-coupon__urgent {
    margin: 6px 0 0;
    padding: 3px 10px;
    font-size: var(--wc-ios-t-caption);
}

.twm-cm-card .twm-cm-own-coupon__more {
    margin: 2px 0 0;
}

.twm-cm-card .twm-cm-own-coupon__more-link {
    padding: 0 12px 0 0;
    justify-content: flex-start;
}

/* Too large for the cart: nothing is applied, so the button is the quiet "Continue shopping" and the
   explanation is the line to read. */
.twm-cm-own-coupon--too-large .wc-campaign-desc,
.twm-cm-own-coupon--too-large .twm-cm-card__desc {
    background: transparent;
    color: var(--wc-ios-label);
}

.twm-cm-own-coupon--too-large .wc-campaign-cta,
.twm-cm-own-coupon--too-large .twm-cm-card__cta {
    background: var(--wc-ios-fill-2);
    color: var(--wc-ios-label);
}

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

@media (prefers-reduced-motion: reduce) {
    /* U35 -- the class-qualified sheets outrank a bare #id, so they are named here too. */
    #wc-campaign-exit-overlay,
    #wc-campaign-exit-modal,
    #wc-campaign-exit-modal.wc-discovery-modal,
    #wc-campaign-exit-modal.is-bxgy,
    #wc-campaign-qv-overlay,
    #wc-campaign-qv-modal,
    .wc-campaign-error,
    .wc-campaign-floating-trigger,
    .wc-campaign-floating-trigger.is-loading .wc-trigger-icon,
    .twm-cm-card {
        animation: none;
    }

    #wc-campaign-exit-modal.wc-campaign-sheet-settling,
    #wc-campaign-qv-modal.wc-campaign-sheet-settling {
        transition: 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;
    }
}