@charset "UTF-8";
/* Advanced Shipping Manager V17.11.0 storefront badge/modal/progress styles.
   Moved verbatim out of the header.tpl inline <style> block (was V17.10.11 lines 10459-11025).
   Linked from header.tpl as asm_storefront.css?v=17.11.0; bump ?v= with every change (R2 link uses ?v=17.11.0r2). */
/* V12.6 — Tile + product-page badge styles (preserved from V12.5) */
.oc-tile-free-ship {
    font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; color: #333 !important;
    background: #ffeb3b !important; padding: 2px 7px !important; border-radius: 3px !important; text-transform: uppercase !important;
    letter-spacing: 0.3px !important; display: inline-block !important; margin-left: 6px !important; vertical-align: middle !important;
    cursor: pointer !important; box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}
/* V12.6.5.12 FLAG-HOVER-SCALE-REMOVE-1: removed `:hover { transform: scale(1.05) }`
   and `transition: transform 0.15s ease`. When the flag sits inside Tile Conductor's
   `.oc-badges-wrap` alongside a sale flag, hovering caused wrapper reflow that
   triggered rebuild loops. Removing the hover scale eliminates the trigger. */
.oc-tile-free-ship i { margin-left: 3px; font-size:12px; }

/* V17.3.5 Pre-Order pill. Same geometry family as the FS pill so it sits beside
   sale + FS flags in .oc-badges-wrap without reflow; deliberately NO hover
   transform (FS-FLAG-HOVER-SCALE-REMOVE-1 lesson). The popup copy of this pill
   also carries .fs-pop-badge, inheriting the compact read-only popup rule below.
   Never receives .fs-flag-disabled: pre-order is not cart-state-dependent.
   V17_3_5_DEPLOY_MARKER */
.oc-tile-pre-order {
    font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; color: #fff !important;
    background: #37474f !important; padding: 2px 7px !important; border-radius: 3px !important; text-transform: uppercase !important;
    letter-spacing: 0.3px !important; display: inline-block !important; margin-left: 6px !important; vertical-align: middle !important;
    cursor: pointer !important; box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}
.oc-tile-pre-order i { margin-left: 3px; font-size:12px; }

/* V17.3.6 - wrapped-flag breathing room, TILE surfaces only: inside a narrow
   tile the pill pair wraps and the lines abutted (operator screenshot,
   snow-cone tile). Symmetric margins keep a same-line pair aligned with each
   other; product-page line, cart chips and the QAP header keep their tuned
   one-line geometry. Covers listing tiles and the related-products carousel
   (both are .product-thumb). V17_3_6_DEPLOY_MARKER */
.product-thumb .oc-tile-free-ship, .product-thumb .oc-tile-abs-free, .product-thumb .oc-tile-pre-order { margin-top: 3px !important; margin-bottom: 3px !important; }

/* V17.3.1 - the QAP popup header badge. The .oc-tile-* rules above already give it the exact pill
   geometry QAP's own .oc-price-saving uses beside it (11px / 700 / 2px 7px / 3px radius / uppercase
   / 0.3px tracking), so only two things change in the popup header. The tile margin goes, because
   #oc-pop-price is a flex row with its own 8px gap and the two would compound. And the badge is made
   non-interactive: .oc-tile-free-ship / .oc-tile-abs-free carry delegated document click handlers
   that open an ASM modal, and a modal over the open QAP popup is the shape of the archived critical
   FS-HIRE-MODAL-QAP-COLLAPSE-1. In the popup it is a read-only pill - no icon, no click.
   Visibility, not display, when it resolves to none: the slot holds, so the option list below does
   not jump on every tap. The badge blinking out IS the cue. V17_3_1_DEPLOY_MARKER */
#oc-pop-price .fs-pop-badge { margin-left: 0 !important; cursor: default !important; pointer-events: none !important; font-size: 10px !important; padding: 1px 6px !important; line-height: 14px !important; align-self: center !important; /* V17.3.4: optically centre the pill against the 18px price line instead of baseline-hanging; QAP V60.11 twins its Save pill. V17_3_4_DEPLOY_MARKER */ }
/* V17.3.3 compact pill: the tile geometry (11px / 2px 7px) made this a 26px box on QAP's 23px price
   line, so the BADGE set the header row height and its wrap/hide moved content. 10px / 1px 6px /
   lh14 keeps it a ~16px box, always under the price line; QAP V60.10 gives its Save pill the same
   numbers. Popup scope only: tile and product-page badges keep the original geometry.
   V17_3_3_DEPLOY_MARKER */

/* V17.1.0 L3 - muted per-value note beside none-resolved option values
   (approved mockup asm_v17_1_display_mockup.html). V17_1_0_DEPLOY_MARKER */
/* V17.2.3 F2 - the note was an inline span appended to the option label, so it flowed into the
   label's own text and wrapped. Own line now, left-aligned to the option NAME rather than to the
   option image.
   The indent is not ours to guess: the thumbnail is a stock .img-thumbnail sized by a theme
   setting. FTP (#46 v3.245+) owns the option row, MEASURES where the name starts inside the label,
   and publishes it as a custom property on the option group. We consume it; fallback 0 is the right
   default when FTP is absent, when the row has no image, and in any browser that drops the
   declaration for not knowing var().
   The layout mode of the row is not ours to assume either. Smart Option Totals #16 re-lays it out
   into flex boxes. These rules put the note on its own line in block, inline, flex AND grid rows
   alike, without redefining what any box IS: flex-wrap is inert on a non-flex box, flex-basis is
   inert outside a flex container, grid-column is inert outside a grid. flex is 1 1 (not 0 0) so the
   note SHRINKS to fit once the indent margin is added, instead of overflowing its own line.
   V17_2_3_DEPLOY_MARKER */
.fs-size-note { display: block; -webkit-flex: 1 1 100%; flex: 1 1 100%; min-width: 0; grid-column: 1 / -1; margin-left: 0; margin-top: 2px; font-size: 12px; font-style: italic; color: #8a8a8a; font-weight: 400; text-transform: none; letter-spacing: 0; }
.fs-has-note { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.fs-has-note .fs-size-note { margin-left: var(--ftp-opt-text-indent, 0px); }

.oc-tile-abs-free {
    font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; color: #fff !important;
    background: #00bcd4 !important; padding: 2px 7px !important; border-radius: 3px !important; text-transform: uppercase !important;
    letter-spacing: 0.3px !important; display: inline-block !important; margin-left: 6px !important; vertical-align: middle !important;
    cursor: pointer !important; box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}
.oc-tile-abs-free i { margin-left: 3px; font-size:12px; }

/* V12.6.5.10 FLAG-FADE-IN-REVERT-1 — V12.6.5.9's @keyframes fsFlagFadeIn
   + animation rule were a best-effort masking attempt for FS-FLAG-
   COEXISTENCE-SALE-FLAG-1 but made the flicker WORSE — the animation
   re-fired on every observer tick (every tile rebuild = fresh fade-in
   pass = constant shimmer). Removed in V12.6.5.10. Root-cause investigation
   (sale-flag-mod identification) is the next move per stress-test
   2026-05-13 finding. */

/* V12.6.5.9 FLAG-GREY-OUT-WHEN-INELIGIBLE-1 — Issue #7. When the cart is
   ineligible for free shipping (currently: contains a rental product), grey
   the flags to signal to the customer that the SHIPS FREE promo isn't
   currently active in their cart state. Click still works — opens info
   modal explaining the rental conflict. Toggled by JS helper
   updateFlagDisabledState() in $(document).ready below. */
.oc-tile-free-ship.fs-flag-disabled,
.oc-tile-abs-free.fs-flag-disabled {
    opacity: 0.5 !important;
    filter: grayscale(80%) !important;
    box-shadow: none !important;
}
.oc-tile-free-ship.fs-flag-disabled:hover,
.oc-tile-abs-free.fs-flag-disabled:hover {
    transform: none;
}

/* V12.6 — D29 — Desktop sticky progress bar
   V12.6.3 STICKY-Z-DROP-1: z-index dropped 999985 -> 1030 so Bootstrap
                            modals (z=1050) and most overlays cover sticky
                            naturally. No fade/hide event detection needed.
   V12.6.3 STICKY-COMPACT-1: tighter padding (10px -> 6px), smaller font
                            (13 -> 12px), slimmer bar (10 -> 3px), smaller
                            inner gap (15 -> 8px). Footprint now < 42px tall
                            desktop, < 36px mobile. */
/* V12.6.5.3 STICKY-1ROW-REVERT-1 + STICKY-ZOOM-SAFE-1 carry-forward
   Single row: message + bar + button + X. Bar is fixed-width 280px so it
   sits between message and button at a predictable size. Message takes
   remaining space via flex. Pale yellow / pale green state. Color C bar.

   Zoom-safe: width: 100vw + overflow-x: hidden + JS reparent to <body>.
   Pinch-zoom + Ctrl-zoom both safe. */

/* ================================================================
   V16.0.9 SLOT-FILL-AND-TRANSITION — two cosmetic mechanisms that
   complement the V54 reservation-intent slot contract. Neither
   affects the slot value or any cart/route decision; both purely
   visual smoothing.
   ================================================================ */

/* V16.0.9 WHITE-SLOT-FILL-1: opaque white background covering the
   FS slot area at the top of viewport. Prevents page content from
   showing through during the brief window between body-padding-top
   reservation (server-side, first paint) and the FS sticky JS
   mounting the bar element. When --crf-fs-h is 0px the pseudo
   has zero height and is invisible — no impact on dismissed/rental
   states. When --crf-fs-h is 41px and the bar is mounted (z-index
   1050), the bar covers this white fill (z-index 1045). Gated to
   >=768px to match the slot CSS — mobile uses bottom-pinned sticky
   with no slot reservation, so no fill needed on mobile. */
@media (min-width: 768px) {
    html > body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--crf-fs-h, 0px);
        background-color: #ffffff;
        z-index: 1045;
        pointer-events: none;
    }

    /* V16.0.9 SLOT-PADDING-TRANSITION-1: smooth body padding-top
       transition for legitimate state changes (rental added mid-
       cart-add → refreshEligibleTotal AJAX returns hire=1 →
       hideStickyBar → slot 41→0; dismissal-driven clearing; route
       changes). Gated by .crf-slot-ready class enabled at
       document.ready+100ms (set in FS's existing document.ready
       chain) so first paint has NO transition — body padding-top
       lands instantly at the PHP-published value. After the class
       lands, any slot change animates over 250ms. */
    html > body.crf-slot-ready {
        transition: padding-top 0.25s ease;
    }
}

#fs-sticky-progress {
    position: fixed; top: 0; left: 0;
    width: 100vw; max-width: 100vw;
    z-index: 1050;
    /* V12.6.5.7 STICKY-PALE-BLUE-INFO-1: pale blue (#dbeafe) reads as
       informational; previous pale yellow (#fef9c3) carried mild warning
       connotations conflicting with the friendly free-shipping invitation. */
    background: #dbeafe;
    border-bottom: 1px solid rgba(0,0,0,0.08); /* V16.0.7 1PX-GAP-FIX-1: was 0.5px sub-pixel which produced layout/paint mismatch (outerHeight rounded to 41 but painted bottom at ~40.5 left 0.5-1px gap below sticky vs nav#top positioned at top:var(--crf-fs-h)=41px). 1px integer + alpha 0.10->0.08 preserves visual weight. */
    padding: 8px 16px; font-family: 'Montserrat', sans-serif; font-size: 13px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: none;
    line-height: 1.35;
    overflow-x: hidden; box-sizing: border-box;
    transition: background 0.4s ease, border-color 0.4s ease;
}
#fs-sticky-progress.fs-unlocked {
    background: #dcfce7;
    border-bottom-color: rgba(40,167,69,0.4);
}
#fs-sticky-progress .fs-sp-inner {
    max-width: 1170px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    box-sizing: border-box;
}
#fs-sticky-progress .fs-sp-text { flex: 1 1 auto; font-weight: 500; color: #333; }
#fs-sticky-progress .fs-sp-text strong { color: #28a745; }
#fs-sticky-progress.fs-unlocked .fs-sp-text { color: #1e7e34; }
#fs-sticky-progress.fs-unlocked .fs-sp-text strong { color: #1e7e34; }
#fs-sticky-progress .fs-sp-bar {
    flex: 0 0 280px; height: 7px; background: rgba(0,0,0,0.08);
    border-radius: 3.5px; overflow: hidden;
    transition: background 0.4s ease;
}
#fs-sticky-progress.fs-unlocked .fs-sp-bar { background: rgba(40,167,69,0.15); }
#fs-sticky-progress .fs-sp-fill {
    height: 100%; border-radius: 3.5px;
    /* V12.6.5.7 BAR-BLUE-TO-GREEN-1: blue->green gradient on locked-state
       (matches pale-blue background, transitions to success-green). */
    background: linear-gradient(90deg, #3b82f6, #28a745);
    width: 0%; transition: width 0.4s ease, background 0.4s ease;
}
#fs-sticky-progress.fs-unlocked .fs-sp-fill { background: #28a745; width: 100% !important; }
#fs-sticky-progress .fs-sp-close {
    flex: 0 0 auto; cursor: pointer; color: #666; font-size: 16px;
    padding: 0 2px 0 6px; line-height: 1;
}
#fs-sticky-progress .fs-sp-close:hover { color: #000; }
#fs-sticky-progress .fs-banner-info {
    cursor: pointer; color: #2563eb; margin-left: 6px; font-size: 14px;
}
#fs-sticky-progress .fs-banner-info:hover { color: #1d4ed8; }

/* V12.6.5.18 FREE-SHIP-UNLOCK-CELEBRATION-1: celebration line that
   extends the sticky by one line on threshold cross. The element is
   always in the DOM (so its height transition works smoothly) but
   max-height collapses to 0 by default. Active state opens to
   ~36px for ~3.2s, then closes. Desktop default: line slots BELOW
   the main sticky content (sticky anchored at top → growth downward
   covers element below). Mobile override (further down) flips it
   to slot ABOVE the main content (sticky anchored at bottom →
   growth upward covers element above). Either way, page scroll
   position never changes because the sticky is position:fixed. */
#fs-sticky-progress .fs-sp-celebration {
    max-height: 0;
    overflow: hidden;
    background: #22a058;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 14px;
    box-sizing: border-box;
}
#fs-sticky-progress .fs-sp-celebration i {
    margin-right: 6px;
    font-size: 14px;
}
#fs-sticky-progress.fs-celebrate .fs-sp-celebration {
    max-height: 36px;
    padding: 8px 14px;
}

/* V12.6.5.22 SLOT-CONSUMER-MODE — Carefree V31.0.0 owns body padding-top
   and the nav#top + .fixed-stacked-menu top offsets through its slot system
   (--crf-ute-h / --crf-fs-h / --crf-promo-h). FS no longer declares any
   of these rules; FS JS writes the measured sticky height to --crf-fs-h
   on document.body so Carefree's calc() recomputes body padding live.
   Removing the legacy --fs-sticky-h :root variable + body.fs-sticky-active
   class triggered rule eliminates the dual-writer race that previously
   produced the 17px desktop header shift on home page load. */

.fs-cat-link {
    display: inline-block; margin-left: 8px; padding: 3px 11px;
    background: #28a745; color: #fff !important; font-weight: 500;
    border-radius: 3px; font-size: 12px; text-decoration: none !important;
    white-space: nowrap; line-height: 1.5;
}
.fs-cat-link:hover { background: #218838; color: #fff !important; }
.fs-cat-link i { margin-left: 4px; font-size: 10px; }
#fs-cart-banner .fs-cat-link {
    margin-left: 0; margin-top: 8px;
    padding: 4px 12px; font-size: 12px;
}

/* V12.6.5 MOBILE-FC-LINK-1 — pink inline-text hyperlink for float cart and
   any surface where "eligible items" should be tappable text instead of a
   button. Brand pink #e91e63 (matches View Cart / Checkout). */
.fs-eligible-link {
    color: #e91e63 !important;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}
.fs-eligible-link:hover { color: #b8104a !important; }

@media (max-width: 767px) {
    /* Mobile sticky: stays at BOTTOM (different surface than desktop).
       V12.6.5.3: X close button restored (was hidden in V12.6.4 MOBILE-
       STICKY-2LINE-1; operator wants it back). Inner flex stays column
       on mobile so message+bar stack above the X row. */
    #fs-sticky-progress {
        top: auto; bottom: 0;
        width: 100%; max-width: 100%;
        border-top: 2px solid #28a745; border-bottom: none;
        background: #fff;
        padding: 7px 12px; font-size: 12px;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.10);
    }
    /* V12.6.5.18 FREE-SHIP-UNLOCK-CELEBRATION-1 (mobile TAKEOVER):
       Mobile screen is space-constrained AND the area where the
       OC ATC toast renders. Extending the sticky to two lines
       creates a visual conflict. Instead: during .fs-celebrate the
       sticky's inner content is swapped for the celebration line —
       same single-line height as State C messaging. After 3.2s the
       swap reverts. Desktop keeps the extend (two-line) behaviour
       because there's room. */
    #fs-sticky-progress .fs-sp-celebration {
        display: none;
        max-height: none;
        padding: 7px 12px;
        font-size: 13px;
    }
    #fs-sticky-progress.fs-celebrate .fs-sp-inner {
        display: none;
    }
    #fs-sticky-progress.fs-celebrate .fs-sp-celebration {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #fs-sticky-progress.fs-unlocked {
        background: #fff;
        border-top-color: #28a745;
    }
    #fs-sticky-progress.fs-unlocked .fs-sp-text { color: #333; }
    #fs-sticky-progress.fs-unlocked .fs-sp-text strong { color: #28a745; }
    #fs-sticky-progress .fs-sp-inner {
        flex-direction: column; align-items: stretch; gap: 4px;
    }
    #fs-sticky-progress .fs-sp-text {
        white-space: normal; overflow: visible; text-overflow: clip;
        text-align: left; line-height: 1.3;
        padding-right: 24px; /* leave space for X in top-right */
    }
    #fs-sticky-progress .fs-sp-bar { display: none; }
    /* V12.6.5.3 MOBILE-X-RESTORED-1: X visible again. Positioned absolute
       top-right of sticky so it doesn't push message text around. */
    #fs-sticky-progress .fs-sp-close {
        display: block;
        position: absolute; top: 4px; right: 8px;
        font-size: 18px; color: #999; padding: 4px 6px;
    }
    .fs-cat-link {
        display: inline-block;
        margin: 0 auto; padding: 3px 10px; font-size: 11px;
        text-align: center; align-self: flex-start;
    }
    #fs-cart-banner .fs-cb-close-mobile { display: none !important; }
    /* V12.6.5.22: removed mobile body.fs-sticky-active + nav#top resets
       — Carefree V31 slot CSS is @media (min-width:768px) gated so it
       does not apply on mobile in the first place. */
}

/* V12.6 — D29 — Cart-page eligible-only banner
   V12.6.5.7: locked state pale blue #dbeafe (info), success pale green
   #dcfce7. Bar fill blue->green gradient pre-unlock, solid green unlocked. */
#fs-cart-banner {
    margin: 15px 0 20px 0; padding: 12px 18px;
    background: #dbeafe; border-left: 4px solid #3b82f6;
    border-radius: 3px; font-family: 'Montserrat', sans-serif; font-size: 14px;
    color: #555; display: none;
}
#fs-cart-banner.fs-eligible { background: #dcfce7; border-left-color: #28a745; }
#fs-cart-banner strong { color: #28a745; }
#fs-cart-banner .fs-cb-bar {
    height: 5px; background: rgba(0,0,0,0.08); border-radius: 2.5px; overflow: hidden;
    margin-top: 8px;
}
#fs-cart-banner.fs-eligible .fs-cb-bar { background: rgba(40,167,69,0.15); }
#fs-cart-banner .fs-cb-fill {
    height: 100%; border-radius: 2.5px;
    background: linear-gradient(90deg, #3b82f6, #28a745);
    width: 0%; transition: width 0.4s ease, background 0.4s ease;
}
#fs-cart-banner.fs-eligible .fs-cb-fill { background: #28a745; }

/* V12.6 — D28 — Cart-page line-item flag */
.fs-cart-flag { margin-top: 5px; }
.fs-po-cart-flag { margin-top: 5px; } /* V17.3.6 - own wrapper class so the FS chip dedupe never suppresses the PO chip. V17_3_6_DEPLOY_MARKER */

/* V12.6.2 — T3.2.b — product-page badge sits in its own <li> below GST */
.fs-badge-li { list-style: none !important; padding: 4px 0 0 0 !important; margin: 0 !important; }

/* V12.6.2 — T3.5.c / QAP-TOAST-COVERED-1 — fade class for sticky+banner
   when QAP or any modal opens so they don't cover the toast/buttons. */
#fs-sticky-progress.fs-faded,
#fs-cart-banner.fs-faded {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 250ms ease;
}
#fs-sticky-progress,
#fs-cart-banner {
    transition: opacity 250ms ease;
}

/* V12.6.2 — BANNER-INFO-ICON-MISSING-1 — info icon styling inside cart banner */
#fs-cart-banner .fs-banner-info:hover { color: #1d4ed8 !important; }

/* V12.6.5.9 CART-PAGE-PICKUP-DISCOUNT-VISIBILITY-1 — Issue #2 cosmetic
   workaround. Pickup discount info line shown on cart page when customer
   selects a pickup shipping method. Style mirrors the cart banner family
   but uses the pickup-blue palette (#2563eb) for visual coupling with
   the radio's "Discount off total" wording.
   V12.6.5.10 FLOAT-CART-PICKUP-INFO-LINE-1: same styling reused for the
   float-cart version (#fs-fc-pickup-info-line) with tighter padding
   appropriate to the float-cart real estate. */
#fs-pickup-info-line {
    display: none;
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    padding: 10px 14px;
    margin: 12px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #1e3a8a;
    border-radius: 4px;
    line-height: 1.45;
}
#fs-pickup-info-line strong { color: #2563eb !important; }
#fs-pickup-info-line i { margin-right: 6px; color: #2563eb; }
#fs-pickup-info-line .fs-pdi-note { color: #555; font-size: 12px; }

/* V12.6.5.10 FLOAT-CART-PICKUP-INFO-LINE-1 — float-cart variant.
   Tighter padding because the float-cart is space-constrained. */
#fs-fc-pickup-info-line {
    display: none;
    background: #eff6ff;
    border-left: 3px solid #2563eb;
    padding: 6px 10px;
    margin: 8px 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #1e3a8a;
    border-radius: 3px;
    line-height: 1.35;
}
#fs-fc-pickup-info-line strong { color: #2563eb !important; }
#fs-fc-pickup-info-line i { margin-right: 5px; color: #2563eb; }
#fs-fc-pickup-info-line .fs-pdi-note { color: #555; font-size: 11px; }

/* V12.6.5.18 MIXED-CART-EXPLAINER-1: rate-accordion note that
   answers the customer's "why isn't this $0?" question on mixed
   carts. Slate palette (informational, doesn't compete with the
   rate-label trio of blue/green/orange). Rendered at the top of
   3 surfaces: cart-page shipping accordion, MFM float-cart
   shipping accordion, checkout shipping-method picker. */
.fs-mixed-cart-note {
    padding: 12px 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 4px;
    margin-bottom: 14px;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
    font-family: 'Montserrat', sans-serif;
}
.fs-mixed-cart-note i { margin-right: 6px; color: #b45309; }
.fs-mixed-cart-note .fs-mc-q { font-weight: 600; color: #92400e; }

/* V12.6.5.21 THRESHOLD-MODAL-REDESIGN-1: 2-bucket layout for threshold
   modal. Replaces V20's "X in eligible items ships free / add other items
   too - your discount stays" abstract copy with visual flag chips and
   plain-English rules. Yellow bucket = the SHIPS FREE flag rule. Gray
   bucket = the no-flag behaviour with reassurance + mix-and-match close.
   No example panel - the rule copy already says everything. Threshold
   value rendered server-side via PHP at both sites, then class-bound JS
   updater keeps both in sync if window.freeShipThresh changes
   client-side (line 2138 pattern). */
.fs-bucket {
    border-radius: 8px;
    padding: 11px 13px;
    margin-bottom: 8px;
    text-align: left;
}
.fs-bucket-yellow { background: #fffbeb; border: 1px solid #fde68a; }
.fs-bucket-gray { background: #f8fafc; border: 1px solid #e2e8f0; }
.fs-bucket-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.fs-flag-yellow-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef9c3;
    color: #854d0e;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid #facc15;
    vertical-align: middle;
}
.fs-flag-yellow-chip i { font-size: 11px; }
.fs-flag-no-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e5e7eb;
    color: #4b5563;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid #9ca3af;
    vertical-align: middle;
}
.fs-flag-no-label i { font-size: 11px; color: #6b7280; }
.fs-bucket-condition {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #333;
    line-height: 1.45;
    margin: 0;
}
.fs-bucket-condition .fs-pri { font-weight: 500; }
.fs-line-neutral {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
    margin: 0 0 4px 0;
}
.fs-mix-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #15803d;
    font-weight: 500;
    margin: 6px 0 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fs-mix-tag i { font-size: 15px; }
.fs-modal-disclaimer {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
}
.fs-modal-h3-redesign {
    font-family: 'Comfortaa', cursive;
    margin: 0 0 14px 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: 1.35;
}
.fs-modal-icon-circle-redesign {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 10px auto;
    background: #dbeafe;
    color: #1e40af;
}