/* ==================================================================
   FRAGRANCEBOX — SIGNUP-OFFER PROMOTION CLUSTER
   Extracted from cart-dock.css. This is one component with three
   surfaces: the bottom-left promotion dock, the countdown / coupon
   indicator in the nav, and the welcome modal plus its toast.

   It used to live inside cart-dock.css, which meant that any page
   setting `$navHideCartdock = true` (to keep the cart dock off a
   conversion page) silently lost these styles too, while nav.php went
   on rendering the markup. The modal then had no
   `position: fixed; visibility: hidden`, so it laid out as raw text in
   the top of the document. The styles now travel with the markup:
   includes/nav.php links this file wherever it emits promo markup,
   independent of whether the cart dock is shown.
   ================================================================== */

/* ==================================================================
   PROMOTION DOCK (bottom-left)
   Persistent affordance that mirrors the cart dock (bottom-right).
   Hidden by default server-side; nav.js toggles visibility once it
   knows whether the visitor has been shown the modal, dismissed it,
   or already claimed the discount. The circle is intentionally the
   same diameter as .fb-cartdock-trigger so the two floating docks
   frame the viewport symmetrically.
   ================================================================== */
.fb-promodock {
    position: fixed;
    left: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    pointer-events: auto;
    /* Fade/slide in when nav.js un-hides us — same easing as cartdock
       so the two docks settle in feeling like parts of one system. */
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    transition:
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.32s;
    visibility: hidden;
}
.fb-promodock.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}
/* iOS safe-area support — identical padding formula to cartdock */
@supports (padding: env(safe-area-inset-bottom)) {
    .fb-promodock { bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(1rem, 2vw, 1.5rem)); }
}
/* Don't render at all while the modal is open — the two would visually
   compete and the click-target overlap confuses assistive tech. */
.fb-promodock[hidden] { display: none; }
body.fb-promo-open .fb-promodock { opacity: 0; pointer-events: none; }

.fb-promodock-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow:
        0 8px 32px -8px rgba(0, 0, 0, 0.45),
        0 2px 8px -2px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease,
        background-color 0.22s ease;
    -webkit-tap-highlight-color: transparent;
}
.fb-promodock-trigger:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 14px 44px -10px rgba(0, 0, 0, 0.5);
}
.fb-promodock-trigger:active { transform: translateY(0) scale(0.97); }
.fb-promodock-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.fb-promodock-icon {
    width: 22px; height: 22px;
    font-size: 22px;                  /* iconify sizes via font-size */
    display: inline-block; line-height: 1; vertical-align: middle;
    transition: opacity 0.2s ease, transform 0.25s ease;
}
.fb-promodock-icon--check { display: none; }

/* Applied state — swap icon + tint to green so the success reads
   at a glance without requiring the tooltip. */
.fb-promodock[data-state="applied"] .fb-promodock-trigger {
    background: #1a5c2a;
    box-shadow:
        0 8px 32px -8px rgba(26, 92, 42, 0.5),
        0 2px 8px -2px rgba(26, 92, 42, 0.25);
}
.fb-promodock[data-state="applied"] .fb-promodock-trigger:hover {
    box-shadow: 0 14px 44px -10px rgba(26, 92, 42, 0.55);
}
.fb-promodock[data-state="applied"] .fb-promodock-icon--offer { display: none; }
.fb-promodock[data-state="applied"] .fb-promodock-icon--check { display: block; animation: fbPromoDockCheck 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fbPromoDockCheck {
    0%   { transform: scale(0.3) rotate(-25deg); opacity: 0; }
    55%  { transform: scale(1.2) rotate(0); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Pulse halo — identical pattern to cartdock, looped for the
   available state so it keeps drawing the eye until interacted with. */
.fb-promodock-pulse {
    position: absolute; inset: -4px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
}
.fb-promodock[data-state="available"] .fb-promodock-pulse {
    animation: fb-dock-ping 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.fb-promodock[data-state="applied"] .fb-promodock-pulse {
    /* Gentle single-ring confirmation on apply, then quiet */
    animation: fb-dock-ping 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s 1;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Percent badge — top-right of the circle, matches cartdock-count
   positioning so the two docks feel like the same component family. */
.fb-promodock-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px;
    background: #b89a4e;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: background 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-promodock[data-state="applied"] .fb-promodock-badge {
    background: #fff; color: #1a5c2a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.fb-promodock-trigger:hover .fb-promodock-badge { transform: scale(1.08); }

/* Tooltip — opens to the RIGHT (cart's is mirrored to the left).
   Hidden on touch/small viewports where hover isn't the primary
   interaction; the icon + badge already communicate the offer. */
.fb-promodock-tip {
    position: absolute;
    left: calc(100% + 0.625rem);
    white-space: nowrap;
    padding: 0.5rem 0.75rem 0.5625rem;
    background: #000;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; gap: 0.125rem;
    line-height: 1.2;
}
.fb-promodock-tip-title {
    font-size: 0.6875rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
}
.fb-promodock-tip-sub {
    font-size: 0.625rem; font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.02em;
}
/* Arrow pointing at the trigger (left edge of the tooltip) */
.fb-promodock-tip::before {
    content: '';
    position: absolute;
    top: 50%; left: -5px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: #000;
}
.fb-promodock-trigger:hover ~ .fb-promodock-tip,
.fb-promodock-trigger:focus-visible ~ .fb-promodock-tip {
    opacity: 1;
    transform: translateX(0);
}
@media (max-width: 720px) { .fb-promodock-tip { display: none; } }

/* Reduced-motion respect — turn off the perpetual pulse (can be
   distracting) but keep the fade-in so the dock still feels alive. */
@media (prefers-reduced-motion: reduce) {
    .fb-promodock,
    .fb-promodock-trigger,
    .fb-promodock-badge,
    .fb-promodock-tip { transition-duration: 0.12s !important; }
    .fb-promodock-pulse,
    .fb-promodock-icon--check { animation: none !important; }
}

/* ==================================================================
   PROMOTION WELCOME MODAL + APPLIED BADGE
   Matches the site's editorial-minimal aesthetic: pure white card,
   thin type, subtle borders, one black primary action. Animates in
   with a quiet scale+fade that never fights the content underneath.
   Renders ONLY when an active promo is configured (server-gated).
   ================================================================== */
.fb-promo-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    visibility: hidden; opacity: 0;
    transition: opacity 0.32s ease, visibility 0.32s;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.fb-promo-modal.is-open { visibility: visible; opacity: 1; }

.fb-promo-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px) saturate(115%);
    -webkit-backdrop-filter: blur(4px) saturate(115%);
    cursor: pointer;
}

/* ──────────────────────────────────────────────────────────
   EDITORIAL MODAL CARD
   Reference aesthetic: Le Labo / Aesop / Haus / Allbirds —
   confident typography as the hero, restrained surface, a
   single primary action. No decorative chrome; every element
   carries weight. Card scales fluidly between phone, tablet,
   and desktop thanks to clamp()-driven type.
   ────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────
   Iconify web-component defaults.
   The library inherits `color` and sizes from `font-size`, so
   every icon element behaves like ch — no per-icon sizing in JS.
   Setting an explicit width/height prevents layout shift while
   the icon SVG fetches on first use. */
iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
   CARD ARCHITECTURE — header / body / footer, no decoration.
   Referenced against premium Shopify themes (Impact, Broadcast,
   Prestige) and Klaviyo's enterprise-grade modal pattern. The
   card expresses three functional zones with one hairline rule
   separating the header from the body — nothing more.
   ────────────────────────────────────────────────────────── */
.fb-promo-modal-card {
    position: relative; z-index: 1;
    width: min(92vw, 440px);
    display: flex; flex-direction: column;
    background: #ffffff;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    box-shadow:
        0 32px 80px -24px rgba(0, 0, 0, 0.3),
        0 12px 32px -12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transform: translateY(16px);
    opacity: 0;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
}
.fb-promo-modal.is-open .fb-promo-modal-card {
    transform: translateY(0);
    opacity: 1;
}
/* Legacy selectors — hide anything lingering from previous designs */
.fb-promo-modal-spark,
.fb-promo-modal-eyebrow,
.fb-promo-modal-hero,
.fb-promo-modal-numeral,
.fb-promo-modal-rule { display: none !important; }

/* ── Header bar ──────────────────────────────────────────── */
.fb-promo-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.125rem 1rem 1.375rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #fff;
}
.fb-promo-modal-mark {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: rgba(0, 0, 0, 0.8);
}
.fb-promo-modal-mark img {
    width: 18px; height: auto;
    flex-shrink: 0;
}
.fb-promo-modal-mark-text {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1;
}

/* Close button — same understated styling the cart dock uses so
   the two chrome elements feel like one system. */
.fb-promo-modal-close {
    width: 2rem; height: 2rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.22s ease;
    flex-shrink: 0;
}
.fb-promo-modal-close iconify-icon,
.fb-promo-modal-close svg { font-size: 1rem; width: 1rem; height: 1rem; }
.fb-promo-modal-close:hover {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.08);
    color: #000;
    transform: rotate(90deg);
}
.fb-promo-modal-close:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.5); outline-offset: 2px;
}

/* ── Body ─────────────────────────────────────────────────── */
.fb-promo-modal-body {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 3vw, 1.5rem);
    gap: 0;
}

/* Offer badge — refined pill with a status dot, not a coupon block.
   Feels like a Shopify Checkout eyebrow ("Express checkout", "New!")
   rather than a retail tag. */
.fb-promo-modal-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4375rem 0.875rem 0.4375rem 0.75rem;
    background: #f5f5f4;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.68);
    line-height: 1;
    margin-bottom: 1.25rem;
}
.fb-promo-modal-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #1a5c2a;
    flex-shrink: 0;
    position: relative;
}
.fb-promo-modal-badge-dot::after {
    content: ''; position: absolute; inset: -4px;
    border-radius: 50%;
    background: rgba(26, 92, 42, 0.25);
    animation: fbPromoBadgeDot 2.2s ease-out infinite;
}
@keyframes fbPromoBadgeDot {
    0%   { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

.fb-promo-modal-title {
    font-size: clamp(1.375rem, 3.6vw, 1.625rem);
    font-weight: 300;
    letter-spacing: -0.005em;
    line-height: 1.22;
    margin: 0 0 0.625rem;
    color: #000;
    max-width: 22ch;
}
.fb-promo-modal-sub {
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: 0.01em;
    line-height: 1.5;
    margin: 0 0 1.5rem;
    max-width: 34ch;
}

.fb-promo-modal-desc {
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.7;
    margin: 0 0 1.5rem;
    max-width: 36ch;
}

/* ── Code chip (tap-to-copy) ──────────────────────────────
   Stacked card: tiny eyebrow label, monospaced code in the
   middle, a quiet "Tap to copy" action row below. Scales
   cleanly from 320px phones to large desktops because the
   intrinsic sizing uses em/ch units and a max-width cap
   instead of fixed pixel widths that broke the horizontal
   layout at tablet breakpoints. */
.fb-promo-code-pill {
    appearance: none; -webkit-appearance: none;
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4375rem;
    width: auto; max-width: 100%;
    padding: 0.875rem 1.25rem 0.75rem;
    margin: 0 auto 1.5rem;
    background: rgba(0, 0, 0, 0.015);
    border: 1px dashed rgba(0, 0, 0, 0.22);
    border-radius: 6px;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    position: relative; z-index: 1;
    text-align: center;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.fb-promo-code-pill:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.45);
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.2);
}
.fb-promo-code-pill:active { transform: translateY(0); }
.fb-promo-code-pill:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.55);
    outline-offset: 3px;
}
/* Admin preview / no-JS contexts shouldn't look clickable */
.fb-promo-code-pill--static { cursor: default; }
.fb-promo-code-pill--static:hover {
    transform: none; box-shadow: none;
    border-style: dashed; background: rgba(0, 0, 0, 0.015);
}

.fb-promo-code-label {
    font-size: 0.5rem; font-weight: 500;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
    line-height: 1;
}
.fb-promo-code-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* fluid type: 14 → 18px across 360 → 600px viewport, capped cleanly */
    font-size: clamp(0.875rem, 1rem + 0.4vw, 1.125rem);
    font-weight: 500;
    letter-spacing: 0.28em; color: #000;
    line-height: 1.1;
    /* Trim the right-side letter-spacing so the optical centre matches the card's axis */
    padding-left: 0.28em;
}
.fb-promo-code-action {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.375rem;
    margin-top: 0.1875rem;
    font-size: 0.5625rem; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
    line-height: 1;
    transition: color 0.18s ease;
}
.fb-promo-code-pill:hover .fb-promo-code-action { color: rgba(0, 0, 0, 0.72); }
.fb-promo-code-icon--copy,
.fb-promo-code-icon--done {
    font-size: 0.8125rem;             /* iconify sizes via font-size */
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.25s ease;
}
.fb-promo-code-icon--done { display: none; color: #1a7f37; }
.fb-promo-code-action-text--done { display: none; color: #1a7f37; }

/* Copied state: flip icon + text, lock border to solid green,
   lightly scale the code for a celebratory beat. */
.fb-promo-code-pill.is-copied {
    border-style: solid;
    border-color: rgba(26, 127, 55, 0.55);
    background: rgba(26, 127, 55, 0.04);
}
.fb-promo-code-pill.is-copied .fb-promo-code-icon--copy,
.fb-promo-code-pill.is-copied [data-copy-idle] { display: none; }
.fb-promo-code-pill.is-copied .fb-promo-code-icon--done,
.fb-promo-code-pill.is-copied [data-copy-done]  { display: inline-flex; }
.fb-promo-code-pill.is-copied .fb-promo-code-icon--done { animation: fbPromoCheck 0.35s ease; }
.fb-promo-code-pill.is-copied .fb-promo-code-val {
    animation: fbPromoCodePulse 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fbPromoCodePulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Desktop / tablet refinement — a touch more breathing room so
   the chip reads as an intentional CTA, not a crowded label. */
@media (min-width: 481px) {
    .fb-promo-code-pill {
        padding: 1rem 1.5rem 0.875rem;
        gap: 0.5rem;
    }
    .fb-promo-code-val { letter-spacing: 0.32em; }
}

/* Tight phones — relax the letter-spacing + padding so the
   code never has to truncate on a 320px viewport. */
@media (max-width: 360px) {
    .fb-promo-code-pill { padding: 0.75rem 0.875rem 0.625rem; }
    .fb-promo-code-val  { letter-spacing: 0.22em; font-size: 0.9375rem; }
    .fb-promo-code-action { font-size: 0.5rem; }
}

/* ── Footer zone ──────────────────────────────────────────── */
.fb-promo-modal-foot {
    display: flex; flex-direction: column; align-items: center;
    padding: 1rem clamp(1.25rem, 4vw, 2rem) clamp(1.125rem, 3vw, 1.5rem);
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    gap: 0.75rem;
    text-align: center;
}

/* Primary CTA — full-width black pill, same treatment as the
   site's .btn-primary and .wiz-cta-btn so the promo modal speaks
   the product language instead of inventing its own. */
.fb-promo-modal-cta {
    /* Same missing-reset problem as .mp-cta-btn in nav.css: on every page that
       does not ship its own `*,*::before,*::after{box-sizing:border-box}` this
       rendered 74-80px tall instead of the 46-50px its min-height asks for. It
       is most visible here because this pill carries "Continue with Google",
       the label the overflow was reported on. Scoped to this component. */
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.9375rem 1.75rem;
    font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.25em; text-transform: uppercase;
    background: #000; color: #fff;
    border: 1px solid #000; border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    position: relative;
    min-height: 48px;
    overflow: hidden;
    isolation: isolate;
}
.fb-promo-modal-cta::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.65s ease;
    z-index: -1;
}
.fb-promo-modal-cta:hover::before { transform: translateX(120%); }
.fb-promo-modal-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.5);
}
.fb-promo-modal-cta:active { transform: translateY(0); }
.fb-promo-modal-cta:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.55); outline-offset: 3px;
}
.fb-promo-modal-cta[disabled] { opacity: 0.75; cursor: progress; }

/* ── Three-state label stack ──────────────────────────────
   Three spans live in a vertical "shaft" inside the CTA; only
   one is visible at a time. Class changes on the parent button
   slide one in from the bottom while the previous one slides
   out the top — same mechanic Shopify's "Add to cart" button
   uses when it transitions through adding / added / viewing. */
/* CSS Grid stack — all three labels share the same grid cell.
   The container auto-sizes to the *widest* child in the natural
   layout pass, so the button can never truncate regardless of
   what copy an admin sets. This replaces the previous absolute-
   positioning trick that relied on a fixed ch-based min-width
   (which clipped "Claim Discount" to "IM DISCO" on any label
   longer than the hardcoded cap).

   Pattern reference: the same grid-stacking technique used by
   Radix UI Toast, shadcn's button-with-loading states, and
   Stripe's Checkout "Complete purchase" success animation. */
.fb-promo-cta-labels {
    display: grid;
    grid-template-areas: "stack";
    align-items: center;
    justify-items: center;
    overflow: hidden;
    line-height: 1;
    vertical-align: middle;
    /* 1.2em gives enough vertical room for the slide-in/out
       animation without vertically clipping glyph ascenders. */
    min-height: 1.2em;
}
.fb-promo-cta-label {
    grid-area: stack;                     /* all children overlap */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;                         /* allow the grid to size us */
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.32s ease;
    /* Will-change: the GPU hint is only needed while the modal
       is open, but setting it here is cheap and safe. */
    will-change: transform, opacity;
}
/* Default state — idle label visible, others waiting below */
.fb-promo-cta-label--idle { transform: translateY(0);      opacity: 1; }
.fb-promo-cta-label--done,
.fb-promo-cta-label--next { transform: translateY(120%);   opacity: 0; }

/* Claimed state: idle slides up + out, done slides in */
.fb-promo-modal-cta.is-claimed .fb-promo-cta-label--idle { transform: translateY(-120%); opacity: 0; }
.fb-promo-modal-cta.is-claimed .fb-promo-cta-label--done { transform: translateY(0);     opacity: 1; }
.fb-promo-modal-cta.is-claimed .fb-promo-cta-label--next { transform: translateY(120%);  opacity: 0; }

/* Next state: idle + done both above, next slides in */
.fb-promo-modal-cta.is-next .fb-promo-cta-label--idle { transform: translateY(-120%); opacity: 0; }
.fb-promo-modal-cta.is-next .fb-promo-cta-label--done { transform: translateY(-120%); opacity: 0; }
.fb-promo-modal-cta.is-next .fb-promo-cta-label--next { transform: translateY(0);     opacity: 1; }

/* ── Icons (arrow vs check) ────────────────────────────── */
.fb-promo-cta-arrow {
    font-size: 0.9375rem;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.fb-promo-modal-cta:hover .fb-promo-cta-arrow { transform: translateX(3px); }
.fb-promo-cta-check { font-size: 1rem; display: none; }

/* Claimed state — green surface + check icon */
.fb-promo-modal-cta.is-claimed {
    background: #1a5c2a; border-color: #1a5c2a;
}
.fb-promo-modal-cta.is-claimed .fb-promo-cta-arrow { display: none; }
.fb-promo-modal-cta.is-claimed .fb-promo-cta-check { display: inline-flex; animation: fbPromoCheck 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fbPromoCheck {
    0%  { transform: scale(0.3) rotate(-30deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(0); opacity: 1; }
    100%{ transform: scale(1) rotate(0); opacity: 1; }
}

/* Next state — return to the brand black, restore arrow, swap to
   a navigation cursor so the button telegraphs "link-like". The
   bg/border transition animates smoothly thanks to the existing
   transition rule on .fb-promo-modal-cta. */
.fb-promo-modal-cta.is-next {
    background: #000; border-color: #000;
    cursor: pointer;
}
.fb-promo-modal-cta.is-next .fb-promo-cta-arrow { display: inline-flex; animation: fbPromoArrowSlide 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.fb-promo-modal-cta.is-next .fb-promo-cta-check { display: none; }
@keyframes fbPromoArrowSlide {
    0%   { transform: translateX(-8px); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}

/* Reassurance line — the small-print Shopify-native brands put
   under the primary CTA. Icon + copy read as one unit thanks to
   the vertical-align adjustment on the inline web component. */
.fb-promo-modal-fineprint {
    display: inline-flex; align-items: center; gap: 0.4375rem;
    margin: 0;
    font-size: 0.625rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}
.fb-promo-modal-fineprint iconify-icon {
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

.fb-promo-modal-dismiss {
    margin: 0;
    padding: 0.375rem 0.75rem;
    background: transparent; border: none;
    font-size: 0.5625rem; color: rgba(0, 0, 0, 0.42);
    cursor: pointer;
    letter-spacing: 0.28em; text-transform: uppercase;
    font-weight: 500;
    transition: color 0.15s ease;
    font-family: inherit;
}
.fb-promo-modal-dismiss:hover { color: #000; }
.fb-promo-modal-dismiss:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 2px;
}

/* ── Responsive tuning ────────────────────────────────────── */
/* Tablet: keep the premium 440px column */
@media (min-width: 601px) {
    .fb-promo-modal-card { width: min(92vw, 440px); }
}
/* Phone: compress paddings + keep the brand mark visible (it
   always fits — the old display:none made the modal look broken). */
@media (max-width: 480px) {
    .fb-promo-modal-card { width: min(94vw, 380px); border-radius: 3px; }
    .fb-promo-modal-head { padding: 0.875rem 1rem 0.875rem 1.125rem; }
    .fb-promo-modal-body { padding: 1.5rem 1.25rem 1.25rem; }
    .fb-promo-modal-title { font-size: 1.25rem; }
    .fb-promo-modal-sub   { font-size: 0.75rem; margin-bottom: 1.25rem; }
    .fb-promo-modal-desc  { font-size: 0.6875rem; line-height: 1.6; max-width: 30ch; margin-bottom: 1.25rem; }
    .fb-promo-modal-foot  { padding: 0.875rem 1.25rem 1.125rem; }
    .fb-promo-modal-cta {
        padding: 0.8125rem 1.25rem;
        min-height: 46px;
        letter-spacing: 0.22em;
    }
    .fb-promo-modal-fineprint { font-size: 0.5625rem; }
}
/* Very small phones — drop the badge margin further so the body
   stack stays tight inside a 320px viewport. */
@media (max-width: 360px) {
    .fb-promo-modal-body { padding: 1.25rem 1rem 1rem; }
    .fb-promo-modal-badge { font-size: 0.5625rem; letter-spacing: 0.14em; }
}

/* Lock body scroll while modal is open */
body.fb-promo-open { overflow: hidden; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    .fb-promo-modal,
    .fb-promo-modal-card,
    .fb-promo-modal-close,
    .fb-promo-modal-cta { transition-duration: 0.12s !important; }
    .fb-promo-modal-card { transform: none !important; }
    .fb-promo-modal-cta::before { display: none; }
    .fb-promo-cta-arrow { transition: none !important; }
}

/* ── Promo claimed toast ─────────────────────────────────── */
.fb-promo-toast {
    position: fixed; z-index: 2100;
    left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(16px);
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    background: #000; color: #fff;
    font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.4);
    opacity: 0; visibility: hidden;
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
    pointer-events: none;
    font-family: 'Inter', system-ui, sans-serif;
}
.fb-promo-toast.is-visible {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.fb-promo-toast-icon {
    font-size: 0.9375rem;
    color: #7be08e;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .fb-promo-toast { bottom: 5.25rem; font-size: 0.625rem; padding: 0.625rem 0.875rem; }
}

/* ── Promo chip inside the cart drawer ──────────────────── */
.fb-cartdock-promo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    margin: 0 1.5rem 1rem;
    padding: 0.75rem 0.875rem;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    font-size: 0.75rem;
}
.fb-cartdock-promo-text {
    display: flex; flex-direction: column; gap: 0.1875rem;
    line-height: 1.3;
}
.fb-cartdock-promo-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
}
.fb-cartdock-promo-label {
    font-weight: 400; color: #000; font-size: 0.75rem;
}
.fb-cartdock-promo-remove {
    background: transparent; border: none; cursor: pointer;
    font-size: 0.5625rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
    padding: 0.25rem 0.5rem;
    font-family: inherit;
    transition: color 0.15s ease;
}
.fb-cartdock-promo-remove:hover { color: #000; }

/* ── Native control reset ─────────────────────────────────────────────────
   A <button> left on `appearance: auto` stays on the platform's own control
   renderer. Chrome only drops off it once a background is set, so a control
   with `background: transparent` is drawn as a real native button in
   WebKit/Safari no matter what else the rule specifies — which is what made
   these render unstyled to sighted users. Setting appearance:none only ever
   removes platform rendering, so this is safe to apply broadly. */
.fb-promo-modal-close,
.fb-promo-modal-dismiss,
.fb-promo-modal-cta,
.fb-promodock-trigger,
.fb-cartdock-promo-remove,
.fb-promo-code-pill {
    -webkit-appearance: none;
    appearance: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROMO DOCK — minimize, and a legible icon
   ══════════════════════════════════════════════════════════════════════════
   Two problems with the trigger as it stood.

   The glyph: the trigger is background:#000 with color:#fff, so the
   ticket-percent icon rendered as thin white strokes on a black disc. At 22px
   that reads as a blank white blob rather than a ticket. The icon now carries
   the brand gold, which separates it from its own black background instead of
   dissolving into it, and the applied state keeps a green tint so the two
   states stay distinguishable.

   The minimize: the dock occupied a 56px circle plus a hover tip in the
   bottom-left corner on every page, permanently. It now collapses to the icon
   alone, remembers the choice for the session, and the tip is suppressed while
   minimized so nothing overlaps the remaining control. */

.fb-promodock { align-items: center; }

.fb-promodock-icon {
  /* Was inheriting #fff from the trigger. Gold reads as a glyph at 22px. */
  color: #d8b45c;
}
.fb-promodock[data-state="applied"] .fb-promodock-icon { color: #8fd3a4; }

/* Minimize control. Sits beside the trigger, outside it. */
.fb-promodock-min {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}
.fb-promodock-min:hover { background: #000; color: #fff; transform: scale(1.06); }
.fb-promodock-min:focus-visible { outline: 2px solid #d8b45c; outline-offset: 2px; }
.fb-promodock-min-icon { width: 16px; height: 16px; font-size: 16px; display: block; }

/* ── Minimized: the icon only ─────────────────────────────────────────────
   Applied with .is-min on the dock. The badge and the pulse are decoration
   and are suppressed; the trigger stays a full-size tap target, so nothing
   about the target size is lost — only the label information. */
.fb-promodock.is-min { gap: 0; }
.fb-promodock.is-min .fb-promodock-trigger { width: 44px; height: 44px; }
.fb-promodock.is-min .fb-promodock-icon { width: 18px; height: 18px; font-size: 18px; }
.fb-promodock.is-min .fb-promodock-badge,
.fb-promodock.is-min .fb-promodock-pulse,
.fb-promodock.is-min .fb-promodock-tip { display: none; }
.fb-promodock.is-min .fb-promodock-min { display: none; }
/* Restored by the same button, which is itself hidden while minimized, so the
   trigger doubles as the restore target. */
.fb-promodock.is-min .fb-promodock-trigger::after {
  content: "Expand";
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .fb-promodock-min { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-promodock-min,
  .fb-promodock.is-min .fb-promodock-trigger { transition: none; }
}