/* ==================================================================
   FRAGRANCE BOX — SHARED TOP NAV
   Loaded by every public page (/, /order, /explore, /about, /products,
   /products/*). Dashboard.php uses its own simpler nav and does NOT load
   this file. Any change to the top bar happens here once.
   ================================================================== */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    height: 60px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    min-width: 0;
}
.nav-logo img { height: 28px; width: auto; flex-shrink: 0; }
.nav-wordmark {
    font-size: 0.8125rem; font-weight: 400;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #000;
    white-space: nowrap;
}

/* Right side wrapper: links + account/cta + hamburger (mobile) */
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* ── Pill-shaped links ─────────────────────────────────────── */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    list-style: none;
    margin: 0; padding: 0;
}
.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 0.875rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-links a:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}
.nav-links a:focus-visible {
    color: #000;
    background: rgba(0, 0, 0, 0.04);
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 2px;
}
.nav-link-active,
.nav-links a.nav-link-active,
.nav-links a.is-active {
    color: #000 !important;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── Sign In CTA pill ─────────────────────────────────────── */
.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    background: #000;
    color: #fff !important;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    min-height: 40px;
    border-radius: 999px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-cta:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.6);
}
.nav-cta:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 3px;
}

/* ── Account dropdown trigger ─────────────────────────────── */
.nav-account-wrap { list-style: none; }
.nav-account { position: relative; }
.nav-account-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    color: rgba(0, 0, 0, 0.75);
    transition: background 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 40px;
}
.nav-account-trigger:hover,
.nav-account.is-open .nav-account-trigger {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
.nav-account-trigger:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 2px;
}

.nav-account-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.nav-account-fallback {
    width: 28px; height: 28px; border-radius: 50%;
    background: #000; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 500;
    flex-shrink: 0;
}
.nav-account-name {
    font-size: 0.8125rem; font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.8);
    max-width: 160px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-account-chevron {
    width: 10px; height: 10px;
    color: rgba(0, 0, 0, 0.4);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}
.nav-account.is-open .nav-account-chevron { transform: rotate(180deg); }

/* ── Account dropdown menu ────────────────────────────────── */
.nav-account-menu {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    min-width: 260px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.2),
                0 4px 12px -4px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.2s ease,
                visibility 0s linear 0.2s,
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
}
.nav-account.is-open .nav-account-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.2s ease,
                visibility 0s linear 0s,
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-account-header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 0.875rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 4px;
}
.nav-account-header-text { min-width: 0; }
.nav-account-header-name {
    font-size: 0.8125rem; font-weight: 500; color: #000;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-account-header-email {
    font-size: 0.6875rem; color: rgba(0, 0, 0, 0.5);
    margin-top: 0.125rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 240px;
}

.nav-account-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.nav-account-item svg {
    width: 15px; height: 15px;
    color: rgba(0, 0, 0, 0.5);
    transition: color 0.15s ease;
    flex-shrink: 0;
}
.nav-account-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #000;
}
.nav-account-item:hover svg { color: #000; }

.nav-account-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 4px 6px;
}
.nav-account-item.danger { color: rgba(0, 0, 0, 0.6); }
.nav-account-item.danger svg { color: rgba(0, 0, 0, 0.4); }
.nav-account-item.danger:hover {
    background: rgba(179, 38, 30, 0.06);
    color: #b3261e;
}
.nav-account-item.danger:hover svg { color: #b3261e; }

/* ── Hamburger (mobile only) ──────────────────────────────── */
.nav-hamburger {
    display: none;
    position: relative;
    width: 36px; height: 36px;
    padding: 0;
    margin-right: -0.375rem;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-hamburger:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 2px;
    border-radius: 2px;
}
.nav-hamburger-bar {
    position: absolute;
    left: 8px; right: 8px;
    height: 1px;
    background: #000;
    transform-origin: center;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease;
}
.nav-hamburger-bar:nth-child(1) { top: 12px; }
.nav-hamburger-bar:nth-child(2) { top: 18px; }
.nav-hamburger-bar:nth-child(3) { top: 24px; }

.nav.is-open .nav-hamburger-bar:nth-child(1) { top: 18px; transform: rotate(45deg); }
.nav.is-open .nav-hamburger-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav-hamburger-bar:nth-child(3) { top: 18px; transform: rotate(-45deg); }

/* ── Reveal animation (when page fades in) ────────────────── */
.nav.page-hidden { opacity: 0; }
.nav.page-reveal {
    animation: fb-nav-appear 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}
@keyframes fb-nav-appear {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Mobile: drawer + persistent avatar button ────────────── */
@media (max-width: 720px) {
    .nav { height: 52px; padding: 0 1rem; }
    .nav-logo img { height: 24px; }
    .nav-wordmark { font-size: 0.6875rem; letter-spacing: 0.1em; }

    .nav-right { gap: 0.25rem; }
    .nav-hamburger { display: inline-block; }

    /* Drawer: only the three main links. Account stays in the top bar. */
    .nav-links {
        position: fixed;
        top: 52px; left: 0; right: 0;
        max-height: calc(100vh - 52px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.75rem 1.5rem 1.75rem;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.12);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.28s ease,
                    visibility 0s linear 0.42s;
    }
    .nav.is-open .nav-links {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.3s ease,
                    visibility 0s linear 0s;
    }

    .nav-links > li { width: 100%; }
    .nav-links > li > a {
        display: block;
        padding: 1.125rem 0.25rem;
        min-height: 0;
        font-size: 0.875rem;
        font-weight: 400;
        letter-spacing: 0.14em;
        color: rgba(0, 0, 0, 0.75);
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0;
        transition: color 0.2s ease, background 0.2s ease;
    }
    .nav-links > li:last-child > a { border-bottom: none; }
    .nav-links > li > a:hover,
    .nav-links > li > a:focus-visible {
        color: #000;
        background: rgba(0, 0, 0, 0.025);
    }
    .nav-links > li > a.nav-link-active,
    .nav-links > li > a.is-active {
        color: #000 !important;
        font-weight: 500;
        background: transparent;
    }

    /* Inline Sign In pill for guests — sized to match avatar on mobile */
    .nav-cta {
        min-height: 34px;
        padding: 0 0.875rem;
        font-size: 0.5625rem;
        letter-spacing: 0.18em;
    }

    /* Account trigger: compact avatar + chevron, name hidden */
    .nav-account-trigger {
        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
        gap: 0.25rem;
        min-height: 36px;
    }
    .nav-account-name { display: none; }
    .nav-account-avatar,
    .nav-account-fallback { width: 30px; height: 30px; }
    .nav-account-chevron { width: 9px; height: 5px; }

    /* Account dropdown: anchored to the top-right of the viewport */
    .nav-account-menu {
        position: fixed;
        top: 56px;
        right: 0.75rem;
        left: auto;
        width: min(300px, calc(100vw - 1.5rem));
        max-width: none;
        transform-origin: top right;
        z-index: 200;
    }
}

/* Prevent body scroll when drawer is open */
body.nav-open { overflow: hidden; }

/* ── Site search trigger ────────────────────────────────────
   Matches the pill-bar language: 40 px round icon button,
   subtle hover wash, focus ring. On desktop the label is
   shown beside the icon; on mobile only the icon. */
.nav-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.875rem 0 0.75rem;
    min-height: 36px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.65);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-search-trigger:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.2);
}
.nav-search-trigger:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 2px;
}
.nav-search-trigger svg {
    width: 15px; height: 15px;
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .nav-search-trigger {
        width: 36px;
        padding: 0;
        justify-content: center;
        gap: 0;
        border-color: transparent;
    }
    .nav-search-trigger-label { display: none; }
}

/* ── Search overlay ─────────────────────────────────────────
   Anchored under the nav on desktop (640 px panel), full-screen
   on mobile. Sits above every other z-layer. */
.nav-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.3s;
}
.nav-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s;
}

.nav-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(250, 250, 250, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-search-panel {
    position: absolute;
    top: 76px; left: 50%;
    transform: translate(-50%, -8px);
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100vh - 6rem);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.28),
                0 8px 20px -10px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-search-overlay.is-open .nav-search-panel {
    transform: translate(-50%, 0);
}

@media (max-width: 720px) {
    .nav-search-panel {
        top: 56px;
        left: 0;
        width: 100vw;
        transform: translate(0, -6px);
        max-height: calc(100dvh - 56px);
        max-height: calc(100vh - 56px);
        border-left: none;
        border-right: none;
        box-shadow: 0 20px 48px -24px rgba(0, 0, 0, 0.25);
    }
    .nav-search-overlay.is-open .nav-search-panel {
        transform: translate(0, 0);
    }
}

/* ── Search form ───────────────────────────────────────────── */
.nav-search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nav-search-form-icon {
    width: 18px; height: 18px;
    color: rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}
.nav-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.005em;
    color: #000;
    padding: 0.25rem 0;
    -webkit-appearance: none;
    appearance: none;
}
.nav-search-input::placeholder { color: rgba(0, 0, 0, 0.35); }
.nav-search-input::-webkit-search-cancel-button { display: none; }

.nav-search-clear {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border: none; border-radius: 50%;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-search-clear:hover { background: rgba(0, 0, 0, 0.08); color: #000; }
.nav-search-clear svg { width: 12px; height: 12px; }

.nav-search-close {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.6);
    font-family: inherit;
    font-size: 0.625rem; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-search-close:hover { color: #000; border-color: #000; }
.nav-search-close kbd {
    padding: 0.125rem 0.375rem;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.5625rem; font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.5);
}
@media (max-width: 540px) {
    .nav-search-close kbd { display: none; }
}

/* ── Status line (count / loading / error) ────────────────── */
.nav-search-status {
    display: none;
    padding: 0.625rem 1.125rem;
    font-size: 0.5625rem; font-weight: 500;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    background: rgba(0, 0, 0, 0.015);
}
.nav-search-status.is-visible { display: block; }

/* ── Results list ──────────────────────────────────────────── */
.nav-search-results {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    padding: 0.375rem;
}
.nav-search-results:empty { display: none; }

.nav-search-result {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 0.875rem;
    align-items: center;
    padding: 0.75rem 0.875rem;
    text-decoration: none;
    color: #000;
    border-radius: 4px;
    transition: background 0.15s ease;
    cursor: pointer;
}
.nav-search-result:hover,
.nav-search-result.is-active {
    background: rgba(0, 0, 0, 0.04);
}
.nav-search-result:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: -2px;
}

.nav-search-thumb {
    width: 46px; height: 46px;
    background: linear-gradient(180deg, #fafafa, #f1f1f1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.nav-search-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Icon-only thumb (non-product results, or products without an image).
   The arrow-up-right communicates "navigable destination" — on hover
   and keyboard-active result it nudges diagonally to reinforce the
   click affordance. */
.nav-search-thumb.is-icon {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}
.nav-search-thumb.is-icon svg {
    width: 18px; height: 18px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-search-result:hover    .nav-search-thumb.is-icon,
.nav-search-result.is-active .nav-search-thumb.is-icon {
    background: #000;
    border-color: #000;
    color: #fff;
}
.nav-search-result:hover    .nav-search-thumb.is-icon svg,
.nav-search-result.is-active .nav-search-thumb.is-icon svg {
    transform: translate(2px, -2px);
}

.nav-search-body { min-width: 0; }
.nav-search-title {
    font-size: 0.875rem; font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.3;
    color: #000;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-search-subtitle {
    font-size: 0.6875rem;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
    margin-top: 0.1875rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-search-excerpt {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.55;
    margin-top: 0.375rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav-search-hit {
    background: rgba(255, 228, 120, 0.45);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.nav-search-badge {
    font-size: 0.5rem; font-weight: 500;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.3125rem 0.5rem;
    align-self: flex-start;
    justify-self: end;
    white-space: nowrap;
}
.nav-search-result[data-type="product"]    .nav-search-badge { border-color: rgba(0, 0, 0, 0.55); color: #000; }
.nav-search-result[data-type="collection"] .nav-search-badge { border-color: rgba(26, 107, 44, 0.45); color: #1a6b2c; }
.nav-search-result[data-type="page"]       .nav-search-badge { border-color: rgba(0, 0, 0, 0.15); }

.nav-search-no-match {
    padding: 2rem 1.25rem 2.25rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.875rem; font-weight: 300; line-height: 1.7;
}
.nav-search-no-match strong { color: #000; font-weight: 500; }

/* ── Empty state (before any query) ────────────────────────── */
.nav-search-empty {
    padding: 1.75rem 1.25rem 2rem;
    text-align: center;
}
.nav-search-empty-title {
    font-size: 1rem; font-weight: 300;
    color: #000;
    margin-bottom: 0.5rem;
}
.nav-search-empty-body {
    font-size: 0.8125rem; font-weight: 300;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1.7;
    margin-bottom: 1.25rem;
    max-width: 36ch;
    margin-left: auto; margin-right: auto;
}
.nav-search-empty-body em {
    font-style: normal;
    color: #000;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.nav-search-empty-chips {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 0.375rem;
}
.nav-search-chip {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 0.4375rem 0.875rem;
    font-family: inherit;
    font-size: 0.625rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.nav-search-chip:hover {
    color: #000;
    border-color: #000;
    background: rgba(0, 0, 0, 0.03);
}

/* Accessibility utility */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* When search is open, lock body scroll (JS adds .search-open) */
body.search-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   PERSISTENT CART DOCK
   Floating trigger (bottom-right, all pages) + slide-in drawer.
   Premium luxury e-commerce pattern: always visible, never pushy.
   ═══════════════════════════════════════════════════════════════ */

/* ── Trigger (the circular floating button) ────────────────── */
.fb-cartdock {
    position: fixed;
    right: 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;
}
/* iOS safe-area support */
@supports (padding: env(safe-area-inset-bottom)) {
    .fb-cartdock { bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(1rem, 2vw, 1.5rem)); }
}

.fb-cartdock-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-cartdock-trigger:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 14px 44px -10px rgba(0, 0, 0, 0.5);
}
.fb-cartdock-trigger:active { transform: translateY(0) scale(0.97); }
.fb-cartdock-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.fb-cartdock-icon {
    width: 22px; height: 22px;
    font-size: 22px;                  /* iconify sizes via font-size */
    display: inline-block; line-height: 1; vertical-align: middle;
}

/* Animated concentric pulse behind the trigger — draws the eye to
   the cart when it's non-empty, then settles into a quiet halo. */
.fb-cartdock-pulse {
    position: absolute; inset: -4px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
}
.fb-cartdock[data-state="filled"] .fb-cartdock-pulse {
    animation: fb-dock-ping 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s 1;
}
@keyframes fb-dock-ping {
    0%   { opacity: 0.6; transform: scale(0.9); }
    100% { opacity: 0;   transform: scale(1.6); }
}

/* Count badge — top-right of the trigger. Only rendered when >0. */
.fb-cartdock-count {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
    background: #b89a4e;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.fb-cartdock[data-state="empty"] .fb-cartdock-count { display: none; }
.fb-cartdock-count.is-bumped { animation: fb-badge-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fb-badge-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}

/* Tooltip / ambient label that appears on hover: "3 fragrances in your box" */
.fb-cartdock-tip {
    position: absolute;
    right: calc(100% + 0.625rem);
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    background: #000;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    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);
}
.fb-cartdock-tip strong { font-weight: 600; }
.fb-cartdock-tip::after {
    content: '';
    position: absolute;
    top: 50%; right: -5px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: #000;
}
.fb-cartdock-trigger:hover ~ .fb-cartdock-tip,
.fb-cartdock-trigger:focus-visible ~ .fb-cartdock-tip {
    opacity: 1;
    transform: translateX(0);
}
@media (max-width: 720px) { .fb-cartdock-tip { display: none; } }

/* ── Drawer (the opened cart panel) ──────────────────────────
   Desktop: right-anchored side panel (320px wide).
   Mobile (<720px): bottom sheet filling the width.
   Both use the same DOM, just different positioning via media query. */
.fb-cartdock-drawer {
    position: fixed;
    inset: 0;
    z-index: 450;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.28s;
}
.fb-cartdock-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s;
}

.fb-cartdock-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.32s ease;
}
.fb-cartdock-drawer.is-open .fb-cartdock-backdrop { opacity: 1; }

.fb-cartdock-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: -16px 0 60px -16px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.fb-cartdock-drawer.is-open .fb-cartdock-panel {
    transform: translateX(0);
}

/* Mobile bottom-sheet variant */
@media (max-width: 720px) {
    .fb-cartdock-drawer { justify-content: stretch; align-items: flex-end; }
    .fb-cartdock-panel {
        width: 100%;
        height: auto;
        max-height: 85vh;
        max-height: 85dvh;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -16px 60px -16px rgba(0, 0, 0, 0.3);
        transform: translateY(100%);
    }
    .fb-cartdock-drawer.is-open .fb-cartdock-panel {
        transform: translateY(0);
    }
}

/* Panel header */
.fb-cartdock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.fb-cartdock-eyebrow {
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.1875rem;
}
.fb-cartdock-title {
    font-size: 1.125rem;
    font-weight: 200;
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin: 0;
}
.fb-cartdock-close-btn {
    flex: none;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.fb-cartdock-close-btn:hover { background: #000; color: #fff; border-color: #000; }
.fb-cartdock-close-btn svg { width: 14px; height: 14px; }

/* Progress bar */
.fb-cartdock-progress {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.fb-cartdock-progress-bar {
    display: block;
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.fb-cartdock-progress-fill {
    display: block;
    height: 100%;
    background: #b89a4e;
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Body */
.fb-cartdock-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0;
}
.fb-cartdock-list { list-style: none; padding: 0; margin: 0; }
.fb-cartdock-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.8125rem;
    line-height: 1.65;
    font-weight: 300;
}
.fb-cartdock-empty strong { color: #000; font-weight: 500; }
.fb-cartdock-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 1.25rem 0;
    padding: 0.625rem 0.75rem;
    background: rgba(184, 154, 78, 0.06);
    border: 1px solid rgba(184, 154, 78, 0.28);
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 300;
}
.fb-cartdock-note strong { color: #000; font-weight: 500; }
.fb-cartdock-note svg { width: 14px; height: 14px; color: #b89a4e; flex: none; }

/* Cart item row */
.fb-cartdock-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 1.25rem;
    transition: background-color 0.18s ease;
}
.fb-cartdock-item:hover { background: rgba(0, 0, 0, 0.02); }
.fb-cartdock-item + .fb-cartdock-item { border-top: 1px solid rgba(0, 0, 0, 0.04); }
.fb-cartdock-item-media {
    width: 44px; height: 56px;
    background: linear-gradient(180deg, #fafafa 0%, #f1f1f1 100%);
    overflow: hidden;
    display: block;
    text-decoration: none;
    flex: none;
}
.fb-cartdock-item-media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.fb-cartdock-item-info {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 0.125rem;
}
.fb-cartdock-item-brand {
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}
.fb-cartdock-item-name {
    font-size: 0.8125rem;
    font-weight: 300;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fb-cartdock-item-name:hover { text-decoration: underline; }
.fb-cartdock-item-meta {
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
}
.fb-cartdock-item-remove {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    flex: none;
}
.fb-cartdock-item-remove:hover { background: #000; color: #fff; border-color: #000; }
.fb-cartdock-item-remove svg { width: 12px; height: 12px; }

/* Footer CTAs */
.fb-cartdock-cta {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: grid;
    gap: 0.5rem;
}
.fb-cartdock-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    min-height: 48px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fb-cartdock-primary:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.4);
}
.fb-cartdock-primary svg { width: 14px; height: 10px; }
.fb-cartdock-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    min-height: 42px;
    background: transparent;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.14);
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fb-cartdock-secondary:hover { background: #000; color: #fff; border-color: #000; }

/* Body scroll lock when drawer is open */
body.fb-cartdock-open { overflow: hidden; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    .fb-cartdock-trigger,
    .fb-cartdock-panel,
    .fb-cartdock-drawer,
    .fb-cartdock-backdrop,
    .fb-cartdock-count,
    .fb-cartdock-tip { transition-duration: 0.12s !important; }
    .fb-cartdock-panel { transform: none !important; }
    .fb-cartdock-pulse { animation: none !important; }
}

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



/* ══════════════════════════════════════════════════════════════════
   MARKETPLACE — /sell · /authenticate · /verify
   Editorial layout shared by the three landing-and-wizard surfaces.
   Type system + colour palette inherits from the rest of the site
   (Inter, #000 / rgba(0,0,0,X), 1px hairlines, generous whitespace).
   ══════════════════════════════════════════════════════════════════ */

.mp-page {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 4rem;
}

/* ── Hero ────────────────────────────────────────────────── */
.mp-hero {
    text-align: center;
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
    max-width: 640px;
}
.mp-hero-eyebrow {
    font-size: 0.625rem; font-weight: 500;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
    margin-bottom: 1rem;
}
.mp-hero-title {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 200; letter-spacing: -0.01em;
    line-height: 1.12; margin: 0 0 1rem; color: #000;
}
.mp-hero-sub {
    font-size: 0.9375rem; font-weight: 300;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.65;
    max-width: 50ch; margin: 0 auto 2rem;
}
.mp-hero-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: left;
}
.mp-hero-step-num {
    font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.32em; color: rgba(0,0,0,0.32);
}
.mp-hero-step-title {
    font-size: 0.875rem; font-weight: 500;
    margin: 0.5rem 0 0.25rem; color: #000;
}
.mp-hero-step-text {
    font-size: 0.75rem; font-weight: 300;
    color: rgba(0, 0, 0, 0.55); line-height: 1.5; margin: 0;
}
@media (max-width: 600px) {
    .mp-hero-strip { grid-template-columns: 1fr; gap: 1.25rem; }
    .mp-hero-step  { padding-bottom: 1.25rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
    .mp-hero-step:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ── Card primitive ──────────────────────────────────────── */
.mp-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1.25rem;
}
.mp-card-title {
    font-size: 1.125rem; font-weight: 400;
    margin: 0 0 0.625rem; color: #000;
}
.mp-card-text {
    font-size: 0.8125rem; font-weight: 300;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.65; margin: 0 0 1rem;
}
.mp-card-foot {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 1.25rem 0 0;
    font-size: 0.6875rem; color: rgba(0, 0, 0, 0.5);
}
.mp-card-foot iconify-icon { font-size: 0.875rem; }

/* ── Wizard scaffolding ─────────────────────────────────── */
.mp-wizard { padding: clamp(1.75rem, 4vw, 2.5rem); }
.mp-steps {
    display: flex; gap: 0;
    list-style: none; padding: 0; margin: 0 0 1.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.mp-step {
    flex: 1 1 0;
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0 1rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.6875rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 500;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.mp-step span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.625rem; height: 1.625rem;
    border-radius: 50%;
    background: #fafafa; border: 1px solid rgba(0,0,0,0.1);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.625rem; font-weight: 600;
    color: rgba(0,0,0,0.55);
}
.mp-step.is-active { color: #000; border-bottom-color: #000; }
.mp-step.is-active span { background: #000; color: #fff; border-color: #000; }
.mp-step.is-done    { color: rgba(0,0,0,0.7); }
.mp-step.is-done span {
    background: #1a5c2a; color: #fff; border-color: #1a5c2a;
}
@media (max-width: 540px) {
    .mp-step { font-size: 0; gap: 0; padding: 0.375rem 0 0.875rem; }
    .mp-step.is-active { font-size: 0.625rem; padding-left: 0.5rem; }
    .mp-step span { font-size: 0.625rem; }
}

.mp-step-panel { display: none; }
.mp-step-panel.is-active { display: block; animation: mpFade 0.32s ease; }
@keyframes mpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.mp-step-title { font-size: 1.25rem; font-weight: 300; margin: 0 0 0.375rem; color: #000; letter-spacing: -0.005em; }
.mp-step-sub   { font-size: 0.8125rem; font-weight: 300; color: rgba(0,0,0,0.55); line-height: 1.6; margin: 0 0 1.5rem; }

.mp-step-actions {
    display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end;
    margin-top: 1.75rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.mp-step-actions .btn-ghost,
.mp-step-actions .mp-back-btn {
    background: transparent; border: 1px solid rgba(0,0,0,0.15);
    color: #000; padding: 0.875rem 1.25rem; min-height: 46px;
    border-radius: 999px; font-family: inherit;
    font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.5rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mp-step-actions .btn-ghost:hover,
.mp-step-actions .mp-back-btn:hover { border-color: #000; background: #fafafa; }

/* ── Form primitives ────────────────────────────────────── */
.mp-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.mp-form-grid .mp-field-wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .mp-form-grid { grid-template-columns: 1fr; } }

.mp-field { display: flex; flex-direction: column; gap: 0.4375rem; }
.mp-field-label {
    font-size: 0.5625rem; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
}
.mp-input {
    width: 100%; padding: 0.75rem 0.875rem;
    background: #fff; border: 1px solid rgba(0,0,0,0.18);
    border-radius: 3px;
    font-family: inherit; font-size: 0.875rem; color: #000;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mp-input:focus { outline: 0; border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.mp-textarea { resize: vertical; line-height: 1.5; }

.mp-fill-row { display: flex; align-items: center; gap: 1rem; }
.mp-fill-slider { flex: 1; }
.mp-fill-value {
    min-width: 3.5ch; font-variant-numeric: tabular-nums;
    font-weight: 500; color: #000; font-size: 0.875rem;
}

.mp-checkbox-group {
    display: flex; flex-direction: column; gap: 0.5rem;
    border: 0; padding: 0; margin: 0;
}
.mp-checkbox {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(0,0,0,0.1); border-radius: 3px;
    cursor: pointer;
    font-size: 0.8125rem; color: #000;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mp-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.mp-checkbox-frame {
    width: 1.125rem; height: 1.125rem;
    border: 1px solid rgba(0,0,0,0.3); border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mp-checkbox-frame iconify-icon { font-size: 0.8125rem; color: #fff; opacity: 0; transition: opacity 0.15s ease; }
.mp-checkbox input:checked + .mp-checkbox-frame { background: #000; border-color: #000; }
.mp-checkbox input:checked + .mp-checkbox-frame iconify-icon { opacity: 1; }
.mp-checkbox:hover { border-color: rgba(0,0,0,0.3); }

/* Offer input — large dollar amount input on submission steps */
.mp-offer-field { max-width: 360px; }
.mp-offer-input-wrap {
    display: flex; align-items: stretch;
    border: 1px solid rgba(0,0,0,0.18); border-radius: 3px;
    overflow: hidden;
}
.mp-offer-input-wrap:focus-within { border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.mp-offer-currency {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 0.875rem; background: #fafafa;
    color: rgba(0,0,0,0.55); font-size: 1rem; font-weight: 500;
    border-right: 1px solid rgba(0,0,0,0.1);
}
.mp-offer-input {
    border: 0; box-shadow: none; padding: 0.875rem 0.875rem;
    font-size: 1.125rem; font-weight: 500;
}
.mp-offer-input:focus { box-shadow: none; }

/* ── Photo grid + dropzone ──────────────────────────────── */
.mp-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.625rem;
    margin: 1rem 0 1.25rem;
}
.mp-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 3px; overflow: hidden;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.08);
    margin: 0;
}
.mp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-photo.is-uploading { background: #f0f0ee; }
.mp-photo-skeleton {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,0,0,0.3);
    font-size: 1.25rem;
}
.mp-photo-skeleton iconify-icon { animation: mpSpin 1s linear infinite; }
@keyframes mpSpin { to { transform: rotate(360deg); } }
.mp-photo-remove {
    position: absolute; top: 0.4375rem; right: 0.4375rem;
    width: 1.625rem; height: 1.625rem; border-radius: 50%;
    background: rgba(0,0,0,0.7); border: 0;
    color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.mp-photo-remove:hover { background: #000; }
.mp-photo-remove iconify-icon { font-size: 0.8125rem; }

.mp-photo-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.375rem;
    padding: 1.5rem 1rem;
    border: 1px dashed rgba(0,0,0,0.25);
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mp-photo-add:hover { border-color: #000; background: #fff; }
.mp-photo-add input { position: absolute; left: -9999px; }
.mp-photo-add iconify-icon { font-size: 1.5rem; color: rgba(0,0,0,0.55); }
.mp-photo-add-title { font-size: 0.8125rem; font-weight: 500; color: #000; }
.mp-photo-add-sub   { font-size: 0.6875rem; color: rgba(0,0,0,0.5); }
.mp-photo-hint {
    font-size: 0.6875rem; color: rgba(0,0,0,0.5);
    margin: 0.5rem 0 0; text-align: center;
}

/* ── Review/summary block ───────────────────────────────── */
.mp-review {
    background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: 3px;
    padding: 1rem 1.25rem; margin-top: 1rem;
}
.mp-review-list { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; padding: 0; }
.mp-review-list > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: baseline; }
.mp-review-list dt {
    font-size: 0.625rem; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(0,0,0,0.5); margin: 0;
}
.mp-review-list dd { font-size: 0.875rem; color: #000; margin: 0; }

/* ── Pay placeholder card ───────────────────────────────── */
.mp-pay-placeholder { text-align: center; padding: 3rem 1.5rem; }
.mp-pay-icon {
    display: inline-block; padding: 1rem; border-radius: 999px;
    background: #fafafa; border: 1px solid rgba(0,0,0,0.08);
    font-size: 1.5rem; color: rgba(0,0,0,0.6);
    margin-bottom: 1rem;
}
.mp-pay-card { padding: 1.25rem; }
.mp-pay-row { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0; }
.mp-pay-row--note { color: rgba(0,0,0,0.55); font-size: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgba(0,0,0,0.06); }
.mp-pay-label { font-size: 0.875rem; color: rgba(0,0,0,0.7); }
.mp-pay-value { font-size: 1.25rem; font-weight: 500; color: #000; font-variant-numeric: tabular-nums; }

/* ── Status-page primitives ─────────────────────────────── */
.mp-status-page { max-width: 720px; }
.mp-status-head { text-align: center; margin-bottom: 2rem; }
.mp-status-title { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 300; margin: 0.25rem 0 0.5rem; color: #000; letter-spacing: -0.01em; }
.mp-status-meta  { font-size: 0.875rem; color: rgba(0,0,0,0.55); margin: 0 0 1rem; }
.mp-status-pill {
    display: inline-flex; align-items: center;
    padding: 0.4375rem 0.875rem;
    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.7);
}
.mp-status-paid .mp-status-pill,
.mp-status-pill.mp-status-accepted    { background: #e8f5e9; color: #1a5c2a; }
.mp-status-pill.mp-status-declined,
.mp-status-pill.mp-status-withdrawn,
.mp-status-pill.mp-status-refunded    { background: #fce4ec; color: #7a1f1f; }

.mp-fact-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 0; }
.mp-fact-list > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
.mp-fact-list > div:last-child { border-bottom: 0; }
.mp-fact-list dt { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.5); margin: 0; }
.mp-fact-list dd { font-size: 0.875rem; color: #000; margin: 0; }

.mp-pricing-card .mp-pricing-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mp-pricing-card .mp-pricing-row:last-child { border-bottom: 0; }
.mp-pricing-row--quote .mp-pricing-value--quote { color: #1a5c2a; font-weight: 500; }
.mp-pricing-label { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.5); }
.mp-pricing-value { font-size: 1.5rem; font-weight: 300; color: #000; font-variant-numeric: tabular-nums; }
.mp-quote-notes { font-size: 0.8125rem; color: rgba(0,0,0,0.65); line-height: 1.6; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.06); }
.mp-quote-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }
.mp-quote-actions .btn-ghost {
    background: transparent; border: 1px solid rgba(0,0,0,0.15); color: #000;
    padding: 0.75rem 1rem; border-radius: 999px;
    font-family: inherit; font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase;
    cursor: pointer; transition: border-color 0.15s ease;
}
.mp-quote-actions .btn-ghost:hover { border-color: #000; }
.mp-quote-actions .mp-danger { color: #7a1f1f; border-color: rgba(122,31,31,0.3); }
.mp-repropose { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.06); }

.mp-photos-static { margin-top: 0.5rem; }
.mp-photos-static .mp-photo { aspect-ratio: 1 / 1; }

.mp-back-link { margin: 2rem 0 0; }
.mp-back-link a { color: rgba(0,0,0,0.65); font-size: 0.8125rem; text-decoration: none; }
.mp-back-link a:hover { color: #000; }

.mp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mp-muted { color: rgba(0,0,0,0.5); }
.mp-notes {
    background: #fafafa; border: 1px solid rgba(0,0,0,0.06); border-radius: 3px;
    padding: 0.875rem 1rem; font-size: 0.8125rem; color: rgba(0,0,0,0.7);
    line-height: 1.6; margin: 1rem 0 0; white-space: pre-wrap;
}

.mp-fineprint {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.6875rem; color: rgba(0,0,0,0.5);
}
.mp-fineprint iconify-icon { font-size: 0.875rem; color: rgba(0,0,0,0.5); flex-shrink: 0; }

.mp-error {
    background: #fce4ec; color: #7a1f1f;
    padding: 0.75rem 1rem; border-radius: 3px;
    font-size: 0.8125rem; margin: 1rem 0 0;
}

.mp-cta-btn {
    background: #000; color: #fff; border: 1px solid #000;
    padding: 0.875rem 1.75rem; border-radius: 999px;
    font-family: inherit;
    font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer; min-height: 46px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mp-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.4); }
.mp-cta-btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }

.mp-faq { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid rgba(0,0,0,0.08); }
.mp-faq-title { font-size: 1.25rem; font-weight: 300; margin: 0 0 1.5rem; }
.mp-faq-item {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 1rem 0;
}
.mp-faq-item summary {
    font-size: 0.9375rem; font-weight: 400; color: #000;
    cursor: pointer; padding: 0.5rem 0;
    list-style: none;
}
.mp-faq-item summary::-webkit-details-marker { display: none; }
.mp-faq-item p { font-size: 0.8125rem; color: rgba(0,0,0,0.65); line-height: 1.7; margin: 0.75rem 0 0; }

/* ── Verify-card variants ───────────────────────────────── */
.mp-verify {
    max-width: 540px; margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 1.25rem 4rem;
}
.mp-verify-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1); border-radius: 6px;
    padding: clamp(2rem, 5vw, 3rem);
    text-align: center;
    box-shadow: 0 24px 60px -30px rgba(0,0,0,0.18);
}
.mp-verify-card--authentic { border-color: rgba(26, 92, 42, 0.4); }
.mp-verify-card--voided    { border-color: rgba(122, 31, 31, 0.4); }

.mp-verify-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4rem; height: 4rem;
    border-radius: 50%;
    background: #1a5c2a; color: #fff;
    font-size: 2rem;
    margin-bottom: 1.25rem;
}
.mp-verify-icon--voided { background: #7a1f1f; }
.mp-verify-icon--unknown,
.mp-verify-icon--landing { background: #f5f5f4; color: rgba(0,0,0,0.55); }

.mp-verify-eyebrow {
    font-size: 0.625rem; font-weight: 500;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(0,0,0,0.45);
    margin: 0 0 0.75rem;
}
.mp-verify-title {
    font-size: clamp(1.375rem, 4vw, 1.75rem);
    font-weight: 300; letter-spacing: -0.005em; line-height: 1.18;
    margin: 0 0 0.5rem; color: #000;
}
.mp-verify-meta { font-size: 0.875rem; color: rgba(0,0,0,0.55); margin: 0 0 1.5rem; }
.mp-verify-facts {
    display: flex; flex-direction: column; gap: 0.75rem;
    text-align: left;
    background: #fafafa; border-radius: 4px;
    padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.mp-verify-facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.375rem 0; }
.mp-verify-facts dt { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin: 0; }
.mp-verify-facts dd { font-size: 0.875rem; color: #000; margin: 0; font-variant-numeric: tabular-nums; }
.mp-verify-foot { font-size: 0.8125rem; color: rgba(0,0,0,0.6); line-height: 1.6; margin: 1.5rem 0 0; }
.mp-verify-foot a { color: #000; }
.mp-verify-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.mp-verify-form .mp-cta-btn { align-self: center; }
.mp-verify-cta-row { font-size: 0.8125rem; color: rgba(0,0,0,0.55); margin-top: 1.5rem; }
.mp-verify-cta-row a { color: #000; font-weight: 500; }

.mp-code-block {
    background: #000; color: #fff;
    padding: 1rem 1.25rem; border-radius: 4px;
    font-family: ui-monospace, Menlo, monospace;
    text-align: center; margin: 1rem 0;
    letter-spacing: 0.22em;
}
.mp-verified-card { border-color: rgba(26,92,42,0.4); }
.mp-accepted-text { color: #1a5c2a; font-weight: 500; margin: 1rem 0 0; }
.mp-declined-text { color: #7a1f1f; font-weight: 500; margin: 1rem 0 0; }

.mp-auth-prompt { text-align: center; padding: clamp(2rem, 5vw, 3rem); }

/* ── Footer ──────────────────────────────────────────── */
.mp-footer {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: transparent;
}
.mp-footer-inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem) 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
@media (max-width: 600px) {
    .mp-footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
}
.mp-footer-eye {
    font-size: 0.5625rem; font-weight: 500;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(0,0,0,0.42);
    margin: 0 0 0.875rem;
}
.mp-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.mp-footer-links a {
    font-size: 0.8125rem; color: rgba(0,0,0,0.7);
    text-decoration: none;
    transition: color 0.15s ease;
}
.mp-footer-links a:hover { color: #000; }
.mp-footer-sub {
    font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(0,0,0,0.45); margin-left: 0.375rem;
}
.mp-footer-meta {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem) 2rem;
    font-size: 0.6875rem; color: rgba(0,0,0,0.4);
    border-top: 1px solid rgba(0,0,0,0.04);
    padding-top: 1.25rem;
}

/* Admin tweaks for marketplace tabs */
.admin-back-link {
    display: inline-block; margin: 0 0 1rem;
    font-size: 0.8125rem; color: rgba(0,0,0,0.65);
    text-decoration: none;
}
.admin-back-link:hover { color: #000; }
.admin-form-inline {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr auto;
    gap: 0.75rem; align-items: end;
}
@media (max-width: 720px) { .admin-form-inline { grid-template-columns: 1fr 1fr; } }
.admin-action-form { display: flex; flex-direction: column; gap: 0.75rem; }


/* ══════════════════════════════════════════════════════════════════
   MARKETPLACE V2 — font + FAQ + method picker + vial pill + responsive
   Adds the patterns the home page (index.php) has inline so the new
   marketplace surfaces inherit identical typography, FAQ animation,
   and accordion mechanics. Anything declared here can be overridden
   by the home page's inline <style> via cascade order.
   ══════════════════════════════════════════════════════════════════ */

/* ── Base typography parity with home page ─────────────── */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background: #fff;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Catch any stray horizontal overflow from photo grids etc. */
body { overflow-x: hidden; }

/* ── FAQ accordion — mirror of the home page's inline rules
   so /sell, /authenticate, /verify share the same look + animation. */
.mp-faq .faq-item,
.mp-faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0;
}
.mp-faq .faq-item:first-of-type,
.mp-faq-item:first-of-type {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.mp-faq .faq-item summary,
.mp-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 0;
    cursor: pointer;
    list-style: none;
    -webkit-appearance: none;
    font-size: clamp(0.8125rem, 2vw, 0.9375rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #000;
    transition: color 0.25s ease;
    user-select: none;
}
.mp-faq .faq-item summary::-webkit-details-marker,
.mp-faq-item > summary::-webkit-details-marker { display: none; }
.mp-faq .faq-item summary::marker,
.mp-faq-item > summary::marker { content: ''; }
.mp-faq .faq-item summary:hover,
.mp-faq-item > summary:hover { color: rgba(0, 0, 0, 0.6); }

.mp-faq .faq-hint {
    margin-left: auto;
    padding-right: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.mp-faq .faq-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mp-faq .faq-icon::before,
.mp-faq .faq-icon::after {
    content: '';
    position: absolute;
    background: #000;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.mp-faq .faq-icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.mp-faq .faq-icon::after  { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.mp-faq .faq-item[open] .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.mp-faq .faq-body,
.mp-faq-item > .faq-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.mp-faq .faq-item[open] .faq-body,
.mp-faq-item[open] > .faq-body { opacity: 1; }

.mp-faq .faq-body-inner,
.mp-faq-item .faq-body-inner { padding: 0 0 1.25rem; }
.mp-faq .faq-body-inner p,
.mp-faq-item .faq-body-inner p,
.mp-faq-item > p {
    font-size: clamp(0.8125rem, 1.8vw, 0.875rem);
    font-weight: 300;
    line-height: 1.9;
    color: rgba(0, 0, 0, 0.45);
    margin: 0.5rem 0 0;
}

/* ── Method-picker cards (Step 1 of /sell + /authenticate) ── */
.mp-method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0 0 1.5rem;
}
@media (max-width: 720px) {
    .mp-method-grid { grid-template-columns: 1fr; }
}
.mp-method-card {
    position: relative;
    cursor: pointer;
    display: block;
}
.mp-method-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mp-method-card-frame {
    display: block;
    padding: 1.25rem 1.25rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    height: 100%;
}
.mp-method-card:hover .mp-method-card-frame {
    border-color: rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.18);
}
.mp-method-card input:checked ~ .mp-method-card-frame {
    border: 2px solid #000;
    padding: calc(1.25rem - 1px) calc(1.25rem - 1px) calc(1.5rem - 1px);
    box-shadow: 0 14px 32px -18px rgba(0,0,0,0.32);
}
.mp-method-card input:focus-visible ~ .mp-method-card-frame {
    outline: 2px solid #000;
    outline-offset: 3px;
}
.mp-method-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.mp-method-card-head iconify-icon {
    font-size: 1.375rem; color: #000;
}
.mp-method-card-eye {
    font-size: 0.5625rem; font-weight: 500;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}
.mp-method-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    margin: 0 0 0.5rem;
    letter-spacing: -0.005em;
}
.mp-method-card-text {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.6);
    margin: 0 0 1rem;
}
.mp-method-card-bullets {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.mp-method-card-bullets li {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.75rem; line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
}
.mp-method-card-bullets iconify-icon {
    font-size: 0.875rem;
    color: #1a5c2a;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ── Method summary on status pages ─────────────────────── */
.mp-method-summary-line {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.9375rem;
}
.mp-method-summary-line iconify-icon {
    font-size: 1.125rem; color: rgba(0, 0, 0, 0.65);
}

/* ── Vial-mailer pill states ───────────────────────────── */
.mp-vial-state { margin: 0 0 0.875rem; }
.mp-vial-pill {
    display: inline-flex; align-items: center;
    padding: 0.375rem 0.75rem;
    background: #fff3e0;
    color: #7a4a00;
    border-radius: 999px;
    font-size: 0.625rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
}
.mp-vial-pill.mp-vial-sent     { background: #e3f2fd; color: #1d4f7c; }
.mp-vial-pill.mp-vial-received { background: #e8f5e9; color: #1a5c2a; }

/* ── Wizard step indicator: handle 5-step layouts on narrow viewports ── */
@media (max-width: 720px) {
    .mp-steps { gap: 0.125rem; flex-wrap: nowrap; overflow-x: auto; }
    .mp-step  { flex: 0 0 auto; padding: 0.375rem 0.625rem 0.875rem; gap: 0.375rem; }
}
@media (max-width: 480px) {
    .mp-step span { width: 1.375rem; height: 1.375rem; font-size: 0.5625rem; }
    .mp-step.is-active span,
    .mp-step.is-done span { font-size: 0.5625rem; }
}

/* ── Responsive guarantees on landing pages ─────────────── */
.mp-page,
.mp-verify {
    overflow-x: hidden;
}
@media (max-width: 480px) {
    .mp-hero-title  { font-size: clamp(1.625rem, 7vw, 2rem); }
    .mp-hero-sub    { font-size: 0.8125rem; }
    .mp-card        { padding: 1.25rem 1rem; }
    .mp-wizard      { padding: 1.25rem 1rem; }
    .mp-step-title  { font-size: 1.0625rem; }
    .mp-step-sub    { font-size: 0.75rem; }
    .mp-step-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .mp-step-actions .btn-ghost,
    .mp-step-actions .mp-back-btn,
    .mp-step-actions .mp-cta-btn { width: 100%; justify-content: center; }
}

/* ── Photo grid responsive — keep tiles a comfortable size on phones ── */
@media (max-width: 380px) {
    .mp-photos { grid-template-columns: repeat(2, 1fr); }
}

/* ── Fact list rows: shrink the term column on narrow phones so the
   value doesn't get squeezed into 2-3 chars per line. */
@media (max-width: 480px) {
    .mp-fact-list > div { grid-template-columns: 7rem 1fr; gap: 0.75rem; }
    .mp-verify-facts > div { grid-template-columns: 7rem 1fr; }
    .mp-review-list > div  { grid-template-columns: 7rem 1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   PRODUCT PICKER (sell wizard step 2)
   Search input → result grid of in-collection products → selected card.
   Visual language matches the rest of the marketplace (Inter, hairlines,
   black accents) and inherits .mp-* spacings.
   ══════════════════════════════════════════════════════════════════ */

.mp-pick-search {
    position: relative;
    margin: 0 0 1.25rem;
}
.mp-pick-search-icon {
    position: absolute; left: 0.875rem; top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.mp-pick-search-input {
    width: 100%;
    padding: 0.875rem 2.75rem 0.875rem 2.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.875rem;
    color: #000;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mp-pick-search-input:focus {
    outline: 0;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.mp-pick-search-clear {
    position: absolute; right: 0.625rem; top: 50%;
    transform: translateY(-50%);
    width: 1.625rem; height: 1.625rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    border: 0;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.mp-pick-search-clear:hover { background: rgba(0,0,0,0.1); color: #000; }
.mp-pick-search-clear iconify-icon { font-size: 0.75rem; }

.mp-pick-status {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    margin: 0 0 0.875rem;
    line-height: 1.5;
}

/* ── Result grid ────────────────────────────────────── */
.mp-pick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}
@media (max-width: 540px) {
    .mp-pick-grid { grid-template-columns: 1fr; }
}

.mp-pick-card {
    appearance: none; -webkit-appearance: none;
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: #000;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mp-pick-card:hover {
    border-color: rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.18);
}
.mp-pick-card:focus-visible {
    outline: 2px solid #000; outline-offset: 2px;
}
.mp-pick-card.is-picked {
    border: 2px solid #000; padding: calc(0.625rem - 1px);
}

.mp-pick-card-media {
    width: 64px; height: 64px;
    background: #fafafa; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mp-pick-card-media img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
}
.mp-pick-card-placeholder {
    color: rgba(0, 0, 0, 0.35);
    font-size: 1.5rem;
}
.mp-pick-card-meta {
    display: flex; flex-direction: column; gap: 0.1875rem;
    min-width: 0;
}
.mp-pick-card-brand {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
}
.mp-pick-card-name {
    font-size: 0.875rem;
    font-weight: 400;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-pick-card-row {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}
.mp-pick-card-conc {
    font-size: 0.625rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
}
.mp-pick-card-tv {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
}
.mp-pick-card-tv.estimate { background: #e8f5e9; color: #1a5c2a; font-weight: 500; }
.mp-pick-card-tv.quoted   { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.55); }

/* ── Selected card ────────────────────────────────────── */
.mp-pick-selected { margin: 0 0 1.5rem; }
.mp-pick-selected-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
@media (max-width: 540px) {
    .mp-pick-selected-card {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        gap: 0.625rem 0.875rem;
    }
    .mp-pick-change { grid-column: 1 / -1; justify-self: start; }
}
.mp-pick-selected-media {
    width: 80px; height: 80px;
    background: #fff; border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.05);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mp-pick-selected-media img { width: 100%; height: 100%; object-fit: contain; }
.mp-pick-selected-eyebrow {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 0.25rem;
}
.mp-pick-selected-brand {
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    margin: 0 0 0.125rem;
}
.mp-pick-selected-name {
    font-size: 0.9375rem;
    font-weight: 400;
    margin: 0 0 0.5rem;
    color: #000;
    line-height: 1.3;
}
.mp-pick-selected-tv {
    display: inline-flex; align-items: center; gap: 0.4375rem;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.65);
    margin: 0;
    padding: 0.4375rem 0.75rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
}
.mp-pick-selected-tv iconify-icon { font-size: 0.875rem; }
.mp-pick-selected-tv.estimate { background: #e8f5e9; color: #1a5c2a; font-weight: 500; }
.mp-pick-selected-tv small {
    display: block;
    font-size: 0.625rem;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0.1875rem;
    font-weight: 300;
    letter-spacing: 0.02em;
}
.mp-pick-change {
    background: transparent; border: 1px solid rgba(0,0,0,0.15);
    padding: 0.5rem 0.875rem; border-radius: 999px;
    color: #000; cursor: pointer;
    font-family: inherit;
    font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mp-pick-change:hover { border-color: #000; background: #fff; }

/* ── Detail (size + fill) shown after pick ──────────── */
.mp-pick-detail { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.06); }
.mp-pick-estimate {
    margin: 1rem 0 0;
    padding: 0.875rem 1rem;
    background: #fafafa;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.5;
}
.mp-pick-estimate strong {
    font-size: 1rem; font-weight: 500; color: #000;
    font-variant-numeric: tabular-nums;
}
.mp-pick-estimate small {
    display: block; margin-top: 0.25rem;
    font-size: 0.6875rem; color: rgba(0,0,0,0.5);
}

/* ── /authenticate picker — mode toggle + manual banner ──── */
.mp-pick-fallback {
    margin: 1.25rem 0 0;
    padding: 0.875rem 1rem;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.65);
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.mp-pick-mode-btn {
    background: transparent; border: 0;
    color: #000;
    font-family: inherit;
    font-size: 0.75rem; font-weight: 500;
    cursor: pointer; padding: 0;
    text-decoration: underline; text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.mp-pick-mode-btn:hover { color: rgba(0, 0, 0, 0.65); }
.mp-manual-banner {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: #fff8e6;
    border: 1px solid rgba(184, 134, 11, 0.25);
    border-radius: 4px;
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.75);
}
.mp-manual-banner iconify-icon {
    font-size: 0.9375rem;
    color: #b8860b;
    flex-shrink: 0;
}
.mp-manual-banner span { flex: 1; }
.mp-manual-banner .mp-pick-mode-btn { color: #b8860b; }
.mp-pick-shared {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── /sell Step 3 supporting-factors note ─────────────── */
.mp-checkbox-note {
    display: flex; align-items: flex-start; gap: 0.625rem;
    margin: 0.5rem 0 0;
    padding: 0.875rem 1rem;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.65);
}
.mp-checkbox-note iconify-icon {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.mp-checkbox-note em {
    font-style: normal;
    font-weight: 500;
    color: #000;
}

/* ── Picker collapse / View more · View less ─────────────
   Used by both /sell and /authenticate. Hides cards past the
   first PICK_PREVIEW (6) on initial load with a fade-out
   gradient at the bottom edge. The toggle button under the
   grid expands to the full set with a fade-in animation, and
   collapses back to 6 with a smooth scroll. Search-active
   state bypasses collapse entirely (handled in JS). */
.mp-pick-grid {
    position: relative;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-pick-card.is-collapsed { display: none; }

.mp-pick-grid.is-collapsed::after {
    content: "";
    position: absolute;
    left: -1rem; right: -1rem; bottom: -1px;
    height: 56px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%);
}

@keyframes mpPickReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mp-pick-grid.is-revealing .mp-pick-card:nth-child(n+7) {
    animation: mpPickReveal 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.mp-pick-grid.is-revealing .mp-pick-card:nth-child(7)   { animation-delay: 0ms; }
.mp-pick-grid.is-revealing .mp-pick-card:nth-child(8)   { animation-delay: 30ms; }
.mp-pick-grid.is-revealing .mp-pick-card:nth-child(9)   { animation-delay: 60ms; }
.mp-pick-grid.is-revealing .mp-pick-card:nth-child(10)  { animation-delay: 90ms; }
.mp-pick-grid.is-revealing .mp-pick-card:nth-child(11)  { animation-delay: 120ms; }
.mp-pick-grid.is-revealing .mp-pick-card:nth-child(n+12){ animation-delay: 150ms; }

.mp-pick-view-more {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    margin: 1rem auto 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    width: fit-content;
    align-self: center;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mp-pick-view-more iconify-icon {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.55);
    transition: transform 0.25s ease;
}
.mp-pick-view-more:hover {
    border-color: #000;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.32);
}
.mp-pick-view-more:hover iconify-icon { color: #000; }
.mp-pick-view-more:focus-visible {
    outline: 2px solid #000; outline-offset: 3px;
}

/* The button needs to live in a centering container — the picker
   parent is a column flex/block, so a margin: auto on the button is
   enough. Wrapping it in its own block to ensure correct layout. */
.mp-pick-mode .mp-pick-view-more,
.mp-pick-search ~ .mp-pick-view-more,
.mp-pick-grid + .mp-pick-view-more {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────────
   Live activity toast — subtle social-proof
   Bottom-left on desktop, bottom-center on mobile, sits above the
   sticky cart/promo dock (which live at right=20px) so we never
   collide. Premium minimal styling: white card, faint grey border,
   tiny pulse dot, soft enter/exit. Theme-matched to the existing
   .fb-cartdock and .fb-promo-toast surfaces.
   ───────────────────────────────────────────────────────────────── */
.fb-live-toast {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    max-width: min(360px, calc(100vw - 2.5rem));
    padding: 0.625rem 0.65rem 0.625rem 0.85rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.78);
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 0.005em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.4s;
    pointer-events: none;
}
.fb-live-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s;
}

.fb-live-toast-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: fbLiveDot 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes fbLiveDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}

.fb-live-toast-text {
    flex: 1 1 auto;
    min-width: 0;
    color: rgba(0, 0, 0, 0.78);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-live-toast-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
}
.fb-live-toast-close:hover { color: #000; background: rgba(0, 0, 0, 0.05); }
.fb-live-toast-close:focus-visible {
    outline: 2px solid #000;
    outline-offset: 1px;
}
.fb-live-toast-close svg { width: 11px; height: 11px; }

/* Mobile: anchor bottom-center, sit above the bottom safe-area + above
   any sticky cart dock the user has visible. */
@media (max-width: 540px) {
    .fb-live-toast {
        left: 50%;
        right: auto;
        bottom: max(1rem, env(safe-area-inset-bottom));
        transform: translateX(-50%) translateY(8px);
        max-width: calc(100vw - 1.5rem);
        font-size: 0.75rem;
    }
    .fb-live-toast.is-visible { transform: translateX(-50%) translateY(0); }
    /* If the cart dock is visible (icon only), nudge toast a little up so
       the user can still tap it. The cart dock lives bottom-right at
       1.25rem, so on narrow viewports we sit above it. */
    body:has(.fb-cartdock.is-visible) .fb-live-toast,
    body:has(.fb-promodock.is-visible) .fb-live-toast {
        bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem);
    }
}

/* Reduced-motion: instant fade, no slide, no pulse animation. */
@media (prefers-reduced-motion: reduce) {
    .fb-live-toast {
        transition: opacity 0.2s linear;
        transform: none;
    }
    .fb-live-toast.is-visible { transform: none; }
    .fb-live-toast-dot { animation: none; }
}

/* Hide on dashboard / admin / marketplace status pages so it never
   distracts from operational surfaces. The PHP layer also gates by
   page type — this is a belt-and-suspenders backup. */
body.is-admin-workspace .fb-live-toast,
.page-dashboard .fb-live-toast { display: none !important; }