/* ==========================================================================
   FlymyMall Marketplace — web styles
   Standalone: shares nothing with the legacy forwarding site's CSS.
   No build step (matches this project's hand-managed public/css convention).
   ========================================================================== */

:root {
    --fmm-icon-black-filter: brightness(0);
    /* Brand palette.
       RESOLVED: the bound Figma variable "Main Primary Color" reads #fbbf24 on
       every frame queried (home screen, cart). The #FFBE2E in the "Triadic Badge
       Color System" frame is documentation that drifted from the live variable —
       the bound variable is what components actually render, so it wins. */
    --fmm-yellow: #fbbf24;
    --fmm-yellow-dark: #E09F0C;
    --fmm-yellow-soft: #FEF6E0;
    --fmm-teal: #18A999;
    --fmm-teal-soft: #E6F7F4;
    --fmm-success: #10B981;
    --fmm-success-soft: #D1FAE5;
    --fmm-violet: #7C5CFF;
    --fmm-violet-soft: #EFEBFF;
    --fmm-dark: #231F20;

    --fmm-text: #231F20;
    --fmm-muted: #6B7280;
    --fmm-faint: #9CA3AF;
    --fmm-border: #E5E7EB;
    --fmm-bg: #FFFFFF;
    --fmm-bg-alt: #F9FAFB;

    /* The hero headline is a serif; the UI is sans. Exact families still to be
       confirmed against the Figma text styles. */
    --fmm-font-display: "Inter", sans-serif;
    --fmm-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    --fmm-container: 1344px;
    --fmm-container-gutter: 24px;
    --fmm-bank-meta-padding: 16px;
    --fmm-bank-meta-gap: 24px;
    --fmm-bank-meta-background: rgba(255, 248, 230, .58);
    --fmm-seller-settings-nav-width: 274px;
    --fmm-seller-settings-tablet-nav-width: 210px;
    --fmm-payout-summary-width: 380px;
    --fmm-settings-layout-gap: 32px;
    --fmm-pdp-aside-width: 428px;
    --fmm-pdp-column-gap: 32px;
    --fmm-pdp-thumb-size: 64px;
    --fmm-pdp-gallery-gap: 40px;
    --fmm-pdp-panel-radius: 24px;
    --fmm-pdp-content-inset: 32px;
    --fmm-pdp-question-height: 34px;
    --fmm-pdp-aside-gap: 24px;
    --fmm-pdp-thumb-gap: 16px;
    --fmm-pdp-gallery-radius: 16px;
    --fmm-pdp-image-background: #F3F4F6;
    --fmm-pdp-accordion-radius: 16px;
    --fmm-pdp-question-icon-height: 14px;
    --fmm-category-sidebar-width: 296px;
    --fmm-category-filter-radius: 16px;
    --fmm-filter-checkbox-size: 16px;
    /* One height for every form control, so text, date and select fields sitting
       side by side in a row line up. */
    --fmm-field-h: 46px;
    /* Native select arrows can't be styled and differ per browser, so every
       dropdown hides its own and paints this one instead. */
    --fmm-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --fmm-radius: 12px;
    --fmm-radius-lg: 16px;
    --fmm-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
    --fmm-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
}

/* --- reset ---------------------------------------------------------------- */
.fmm *,
.fmm *::before,
.fmm *::after { box-sizing: border-box; }

.fmm {
    margin: 0;
    font-family: var(--fmm-font-ui);
    color: var(--fmm-text);
    background: var(--fmm-bg);
    -webkit-font-smoothing: antialiased;
}

.fmm img { max-width: 100%; display: block; }
/* `:where()` contributes ZERO specificity, so this reset is (0,1,0) — the same
   as a single class. Written as `.fmm a` it was (0,1,1) and silently BEAT every
   single-class rule that set a link colour: `.fmm-backtotop` and
   `.fmm-btn--dark` both declared white and rendered dark-on-dark, invisible. */
.fmm :where(a) { color: inherit; text-decoration: none; }
/* Same trap as the link reset above: as `.fmm button` this was (0,1,1) and beat
   every single-class button rule. Because `font` is a shorthand it reset
   font-size AND font-weight, so every <button class="fmm-btn"> rendered at the
   inherited 16px/400 instead of the 15px/700 .fmm-btn asks for — while the
   identical <a class="fmm-btn"> rendered correctly. That mismatch is what made
   "Add to Cart" wrap to two lines next to a single-line "Buy now". */
.fmm :where(button) { font: inherit; cursor: pointer; }

.fmm-container {
    max-width: var(--fmm-container);
    margin: 0 auto;
    padding: 0 var(--fmm-container-gutter);
}

.fmm-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- header --------------------------------------------------------------- */
.fmm-header { background: #000000; color: #fff; }

.fmm-header__bar {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 72px;
}

.fmm-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.fmm-logo img { display: block; width: 152px; height: 38px; object-fit: contain; }

/* search */
.fmm-search { flex: 1; max-width: 590px; margin: 0 auto; }
.fmm-search { position: relative; }
.fmm-search__suggestions {
    position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; right: 0;
    padding: 6px; background: #fff; border: 1px solid var(--fmm-border);
    border-radius: 12px; box-shadow: 0 12px 30px rgba(17, 24, 39, .16);
}
.fmm-search__suggestion {
    display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
    background: transparent; color: var(--fmm-text); text-align: left; cursor: pointer;
    font: inherit; font-size: 13px;
}
.fmm-search__suggestion:hover, .fmm-search__suggestion[aria-selected="true"] {
    background: #fff7df;
}
.fmm-search__form {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--fmm-yellow);
    border-radius: 999px;
    padding: 4px 4px 4px 20px;
}
.fmm-search__input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 15px;
    color: var(--fmm-text);
    background: transparent;
    padding: 8px 0;
}
.fmm-search__input::placeholder { color: var(--fmm-faint); }
.fmm-search__btn {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--fmm-yellow);
    color: var(--fmm-dark);
    flex-shrink: 0;
}
.fmm-search__btn:hover { background: var(--fmm-yellow-dark); }

/* header right */
.fmm-header__actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

.fmm-ship-to {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; color: #fff; white-space: nowrap;
}
.fmm-ship-to:hover { color: var(--fmm-yellow); }
.fmm-ship-to--locked { cursor:default; }
.fmm-ship-to--locked:hover { color:#fff; }
.fmm-country-label--verified {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; border: 1px solid rgba(45, 212, 191, .65);
    border-radius: 999px; color: #99F6E4; font-size: 12px; font-weight: 700;
}
.fmm-country-label--verified svg { color: #5EEAD4; flex: 0 0 auto; }

.fmm-header__divider { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); }

/* On an <a> and, for the notification bell, on a <button> — so it resets the
   default button chrome the same way .fmm-viconbtn does. */
.fmm-iconbtn {
    position: relative;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    padding: 0; cursor: pointer;
    background: transparent; border: 0; color: #fff; border-radius: 8px;
}
.fmm-iconbtn:hover { background: rgba(255, 255, 255, .1); }
.fmm-header__asset-icon {
    display: block;
    width: auto;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.fmm-header__asset-icon--cart { height: 17px; }
.fmm-header__asset-icon--offer { height: 18px; }
.fmm-header__asset-icon--bell { height: 20px; }

.fmm-badge {
    position: absolute; top: -2px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    background: var(--fmm-yellow); color: var(--fmm-dark);
    font-size: 11px; font-weight: 700; border-radius: 999px;
}
.fmm-badge--dot {
    min-width: 9px; height: 9px; padding: 0; top: 2px; right: 0;
    background: #EF4444;
}

.fmm-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--fmm-yellow-soft);
    border: 2px solid var(--fmm-yellow);
    object-fit: cover;
    display: grid; place-items: center;
    color: var(--fmm-dark); font-weight: 700; font-size: 14px;
}

/* --- category nav --------------------------------------------------------- */
.fmm-nav {
    background: #201F1F;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.fmm-nav__inner {
    display: flex; align-items: center; gap: 28px;
    height: 48px;
    overflow-x: auto;
    scrollbar-width: none;
}
.fmm-nav__inner::-webkit-scrollbar { display: none; }

.fmm-nav__link {
    font-size: 14px; color: #fff; white-space: nowrap;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.fmm-nav__link:hover { color: var(--fmm-yellow); }
.fmm-nav__link--all { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* --- "All Categories" mega menu ------------------------------------------- */
/*
 * The wrapper is the hover target, and the panel is glued to its bottom edge
 * with no gap, so the pointer can travel from trigger to panel without passing
 * over dead space that would close the menu.
 */
.fmm-mega { position: static; }

.fmm-nav__link--all.is-open { color: var(--fmm-yellow); }

.fmm-mega__panel {
    position: absolute;
    top: 100%; left: var(--fmm-container-gutter);
    z-index: 60;
    display: flex;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--fmm-line, #e6e6e6);
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
    overflow: hidden;
}

.fmm-mega__col { padding: 14px 10px; }

.fmm-mega__col--root {
    width: 236px;
    flex: 0 0 236px;
    border-right: 1px solid var(--fmm-line, #eee);
}

.fmm-mega__col--sub { width: 288px; flex: 0 0 288px; }

.fmm-mega__head {
    margin: 4px 10px 10px;
    font-size: 14px; font-weight: 700;
    color: var(--fmm-text, #1a1a1a);
}

.fmm-mega__row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--fmm-text, #1a1a1a);
    text-decoration: none;
    white-space: nowrap;
}

.fmm-mega__ico { display: inline-flex; color: #6b6b6b; }
.fmm-mega__label { flex: 1 1 auto; }

.fmm-mega__chev { flex: 0 0 auto; color: #b0b0b0; }

/* Active row mirrors the design's yellow wash + left marker. */
.fmm-mega__row.is-active,
.fmm-mega__row:hover,
.fmm-mega__row:focus-visible {
    background: rgba(245, 183, 0, .14);
    color: var(--fmm-text, #1a1a1a);
    outline: none;
}

.fmm-mega__row.is-active .fmm-mega__ico,
.fmm-mega__row:hover .fmm-mega__ico { color: var(--fmm-yellow, #f5b700); }

.fmm-mega__row.is-active .fmm-mega__chev { color: var(--fmm-yellow, #f5b700); }

.fmm-mega__row--sub { font-weight: 500; }

/* Scrim — the design dims the page behind an open menu. Sits under the panel
   (z 55 vs 60) and covers the viewport below the header. */
/*
 * Purely visual — it must not take pointer events.
 *
 * The scrim is a CHILD of .fmm-mega and covers the viewport, so while it
 * accepted hits the pointer was always inside the wrapper: `mouseleave` could
 * never fire and the menu only closed on Escape. `pointer-events: none` hands
 * the hit-testing back to the page, so leaving the trigger or panel closes the
 * menu the way hovering opened it.
 */
.fmm-mega__scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

.fmm-mega__count {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 600;
    color: #9a9a9a;
}

.fmm-mega__row.is-active .fmm-mega__count { color: #8a7300; }

.fmm-mega__subhead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
}

.fmm-mega__all {
    margin-right: 10px;
    font-size: 12px; font-weight: 600;
    color: var(--fmm-yellow, #f5b700);
    text-decoration: none;
    white-space: nowrap;
}

.fmm-mega__all:hover { text-decoration: underline; }

/* Real listings, not invented subcategory labels. */
.fmm-mega__item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--fmm-text, #1a1a1a);
}

.fmm-mega__item:hover { background: rgba(245, 183, 0, .14); }

.fmm-mega__thumb {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 7px;
    background: #f1f1f1;
}

.fmm-mega__itemtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.fmm-mega__itemtitle {
    font-size: 12.5px; font-weight: 500; line-height: 1.3;
    /* Titles are seller-written and run long; two lines keeps every row the
       same height so the pane cannot jitter as the pointer moves. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.fmm-mega__itemprice { font-size: 12px; font-weight: 700; }

/*
 * `.fmm-nav__inner` carries `overflow: auto` so the category strip can scroll
 * whenever the row is wider than the viewport (which happens well above phone
 * widths — around 1100px the strip no longer fits). The panel escapes that
 * clip because its containing block is the nav's `.fmm-container`, which sits
 * outside the scroller: absolutely positioned boxes are only clipped by an
 * overflow ancestor when their containing block is inside it.
 */
.fmm-nav .fmm-container { position: relative; }

/* Pointer-driven, so it is noise on a touch screen where the first tap would
   open the panel instead of following the link. */
@media (hover: none), (max-width: 860px) {
    .fmm-mega__panel { display: none !important; }
}

.fmm-nav__protection {
    margin-left: auto;
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600; color: var(--fmm-yellow);
    white-space: nowrap;
}
.fmm-nav__protection img { display: block; width: 14px; height: 14px; object-fit: contain; flex: 0 0 auto; }

/* --- hero ----------------------------------------------------------------- */
.fmm-hero { padding: 32px 0 8px; }
.fmm-hero__grid {
    display: grid;
    /* 756 / 1344 in the design. An even 1fr 1fr split, less the gap, left the
       copy column ~100px short and broke the headline onto a fourth line
       ("Delivered to / Nigeria." instead of one line). */
    grid-template-columns: 56% 1fr;
    gap: 32px;
    align-items: center;
}

.fmm-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    background: var(--fmm-yellow-soft);
    border: 1px solid var(--fmm-yellow);
    border-radius: 999px;
    font-size: 14px; font-weight: 600; color: #8A6100;
}
.fmm-pill__live {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--fmm-teal); font-weight: 600;
}
.fmm-pill__live::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--fmm-teal);
}

.fmm-hero__title {
    font-family: var(--fmm-font-display);
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.06;
    letter-spacing: -.02em;
    font-weight: 700;
    margin: 24px 0 20px;
}
/* The underline is the hand-drawn stroke from the design, not a straight border.
   It needs its own positioned layer: a background on an inline element is
   aligned to the full line box, which leaves the stroke noticeably too low. */
.fmm-hero__title em {
    display: inline-block;
    position: relative;
    font-style: normal;
    color: var(--fmm-yellow);
}
.fmm-hero__title em::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 7px;
    background: url("../../images/marketplace/icons/headline-underline.svg") no-repeat left bottom / 100% 7px;
    pointer-events: none;
}

.fmm-hero__lead {
    font-size: 17px; line-height: 1.75; color: #000;
    max-width: 580px; margin: 0 0 32px;
}
.fmm-hero__lead strong { color: var(--fmm-text); font-weight: 700; }

/* Inter draws a period as a circle. These lines end with a square full stop.
   The "." stays for reading and copying; font-size 0 keeps that round glyph
   from painting over the square. */
.fmm-stop {
    display: inline-block;
    width: 0.18em;
    height: 0.18em;
    margin-left: 0.08em;
    margin-right: 0.06em;
    /* overflow other than visible makes the box baseline its bottom edge,
       so the square sits on the text baseline like a period. */
    overflow: hidden;
    vertical-align: baseline;
    background: currentColor;
    border-radius: 0;
    line-height: 0;
}
.fmm-stop > span {
    font-size: 0;
    line-height: 0;
}

.fmm-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }
.fmm-hero__cta .fmm-btn img { display: block; width: 16px; height: 16px; object-fit: contain; flex: none; }
/* The arrow's stroke sits a hair above the button's center. Nudge it onto
   the same line as the lock and the label. */
.fmm-hero__cta .fmm-btn svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
    transform: translateY(0.5px);
}

/* buttons */
.fmm-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px;
    border-radius: var(--fmm-radius);
    font-size: 15px; font-weight: 700;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}
.fmm-btn--primary { background: var(--fmm-yellow); color: var(--fmm-dark); }
.fmm-btn--primary:hover { background: var(--fmm-yellow-dark); }
.fmm-btn--ghost {
    background: #fff; color: var(--fmm-text);
    border-color: var(--fmm-border); box-shadow: var(--fmm-shadow);
}
.fmm-btn--ghost:hover { border-color: var(--fmm-faint); }

/* hero art + floating trust cards */
.fmm-hero__art {
    position: relative;
    border-radius: var(--fmm-radius-lg);
    background:
        url("../../images/marketplace/icons/airplane-path.svg") no-repeat center / 92% auto,
        linear-gradient(160deg, var(--fmm-yellow-soft), #fff);
}
.fmm-hero__art > img {
    position: relative;
    width: 100%; height: auto;
    border-radius: 0;
}
.fmm-hero__art--empty {
    aspect-ratio: 4 / 3;
    border-radius: var(--fmm-radius-lg);
    background: linear-gradient(160deg, var(--fmm-yellow-soft), #fff);
    border: 1px solid var(--fmm-border);
}

/*
 * The hero's floating trust cards.
 *
 * Everything here is sized in `em` off one clamped base, so the whole card
 * scales with the viewport instead of staying at a fixed size. At laptop width
 * the fixed version was nearly as wide as the photo behind it — the four cards
 * covered the shopper's face and overlapped each other, with "Escrow-protected
 * payment" running underneath the card next to it.
 */
.fmm-trust {
    position: absolute;
    font-size: clamp(10.5px, 0.95vw, 14px);
    display: flex; align-items: center; gap: .85em;
    background: #fff;
    border-radius: .9em;
    box-shadow: var(--fmm-shadow-lg);
    padding: .85em 1.15em;
    max-width: 18em;
}
.fmm-trust__icon {
    width: 2.7em; height: 2.7em; border-radius: .72em;
    display: grid; place-items: center; flex-shrink: 0;
}
/* The markup hard-codes width/height on these, so they need overriding to
   take part in the scale. */
.fmm-trust__icon svg { width: 1.3em; height: 1.3em; }
.fmm-trust__icon img { display: block; width: 1.3em; height: 1.3em; object-fit: contain; }
.fmm-trust__icon--teal { background: var(--fmm-teal); color: #fff; }
.fmm-trust__icon--yellow { background: var(--fmm-yellow); color: var(--fmm-dark); }
.fmm-trust__icon--violet { background: var(--fmm-violet); color: #fff; }
.fmm-trust__icon--green { background: #F0FDF4; color: #22C55E; }
/* Each line stacks — these are spans (inline by default), so without this the
   label, title and note run together on one line. */
.fmm-trust > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fmm-trust__label {
    display: block;
    font-size: .72em; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--fmm-faint);
}
.fmm-trust__title { display: block; font-size: 1em; font-weight: 700; line-height: 1.3; }
.fmm-trust__note { display: block; font-size: .86em; color: var(--fmm-muted); line-height: 1.4; }
.fmm-trust__note--ok { color: var(--fmm-teal); }

/* Anchors are the card edges on the hero photo in the Figma frame.
   The escrow line is one row in that frame; a 15.5em cap wrapped it
   onto extra lines and dropped the card into the corner. */
.fmm-trust--tr { top: 6.8%; right: 5.6%; }
.fmm-trust--ml { top: 31.2%; left: 8%; }
.fmm-trust--bl { bottom: 7.9%; left: 5.4%; }
.fmm-trust--br { bottom: 9.4%; right: 3.5%; max-width: none; }
.fmm-trust--br .fmm-trust__title,
.fmm-trust--br .fmm-trust__note { white-space: nowrap; }

/* Long lead on laptop, the client's shorter one on phones (sheet row 114). */
.fmm-hero__lead--short { display: none; }

/*
 * Phone / tablet hero, client mockup (sheet row 114): pill centred, headline,
 * the short line, then the photo with its badges, then the two full-width
 * buttons. The copy column is flattened (display: contents) so the photo can
 * sit between the text and the buttons without duplicating any markup.
 */
@media (max-width: 860px) {
    .fmm-hero__lead--long { display: none; }
    .fmm-hero__lead--short { display: block; }
    .fmm-hero .fmm-hero__grid { gap: 0; grid-template-columns: minmax(0, 1fr); }
    .fmm-hero .fmm-hero__grid > div:first-child { display: contents; }
    /* Flattened, the copy's pieces are grid items themselves: keep them inside
       the column instead of their min-content width pushing the page sideways. */
    .fmm-hero .fmm-hero__grid > div:first-child > * { min-width: 0; max-width: 100%; }
    .fmm-hero .fmm-pill { order: 1; justify-self: center; }
    .fmm-hero .fmm-hero__title { order: 2; }
    .fmm-hero .fmm-hero__lead { order: 3; }
    .fmm-hero .fmm-hero__art { order: 4; margin: 4px 0 20px; overflow: hidden; border-radius: 18px; }
    .fmm-hero .fmm-hero__cta { order: 5; }
}

/* --- sections ------------------------------------------------------------- */
/* 56px top AND bottom put 112px of dead space between two stacked rails, which
   on the home page reads as a break between unrelated pages rather than the next
   shelf down. Tighter, and consecutive sections collapse their shared gap. */
.fmm-section { padding: 34px 0; }
.fmm-section + .fmm-section { padding-top: 0; }
.fmm-section--alt { background: var(--fmm-bg-alt); }
/* An alt-background section needs its own padding back — collapsing it would
   crop the tint against the section above. */
.fmm-section + .fmm-section--alt { padding-top: 34px; }

.fmm-section__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 28px;
}
.fmm-section__title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
/* Some section headings are set in the display serif in the design. */
.fmm-section__title--display {
    font-family: var(--fmm-font-display);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
}
.fmm-section__sub { font-size: 15px; color: var(--fmm-muted); margin: 6px 0 0; }
.fmm-section__link {
    font-size: 14px; font-weight: 700; color: var(--fmm-text);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.fmm-section__link:hover { color: var(--fmm-yellow-dark); }
/*
 * Must come AFTER the base rule. It was declared before it at the same
 * specificity, so `color: var(--fmm-text)` won and every "See All" rendered
 * near-black instead of the amber the design uses.
 */
.fmm-section__link--accent { color: var(--fmm-yellow); }
.fmm-section__link--accent:hover { color: var(--fmm-yellow-dark); }

/* --- product grid --------------------------------------------------------- */
.fmm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 24px;
}

.fmm-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.fmm-card:hover { box-shadow: var(--fmm-shadow-lg); transform: translateY(-2px); }

.fmm-card__media { position: relative; aspect-ratio: 1; background: var(--fmm-bg-alt); }
.fmm-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fmm-card__media--empty {
    display: grid; place-items: center;
    color: var(--fmm-faint); font-size: 13px;
}

.fmm-card__flags { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.fmm-card__off {
    position: absolute; top: 10px; right: 10px;
    background: #EF4444; color: #fff;
    font-size: 12px; font-weight: 700;
    padding: 4px 8px; border-radius: 6px;
}

.fmm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700;
    padding: 4px 9px; border-radius: 999px;
    background: #fff; color: var(--fmm-text);
    /* A pill is a single token. Without this "Brand New" broke onto two lines
       whenever the price beside it was wide, making that one card taller than
       its neighbours and pushing the row out of alignment. */
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid var(--fmm-border);
}
.fmm-chip--verified { background: var(--fmm-teal-soft); color: #0F766E; border-color: transparent; }
.fmm-chip--new { background: var(--fmm-yellow); color: var(--fmm-dark); border-color: transparent; }
.fmm-chip--like-new { background: var(--fmm-violet-soft); color: #4C35B8; border-color: transparent; }

.fmm-card__body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fmm-card__source { font-size: 12px; color: var(--fmm-muted); }
.fmm-card__title {
    font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.fmm-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.fmm-card__price b { font-size: 17px; font-weight: 800; }
.fmm-card__price s { font-size: 13px; color: var(--fmm-faint); }
.fmm-card__seller { font-size: 12px; color: var(--fmm-muted); }
.fmm-card__soldout { font-size: 12px; font-weight: 700; color: #EF4444; }

/* --- browse product card (category / search grids) ------------------------ */
.fmm-pc {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    overflow: hidden;
}
.fmm-pc:hover { box-shadow: var(--fmm-shadow-lg); }

.fmm-pc__media { position: relative; aspect-ratio: 1.05; background: #F4F5F7; }
/* Absolute media keeps portrait and landscape listing images in one fixed frame. */
.fmm-pc__media > a { position: absolute; inset: 0; display: block; }
.fmm-pc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fmm-pc__media--empty { display: grid; place-items: center; color: var(--fmm-faint); font-size: 13px; }

.fmm-pc__flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fmm-pc__plat {
    position: absolute; bottom: 10px; left: 10px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: var(--fmm-shadow);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 800; color: var(--fmm-muted);
}
.fmm-pc__plat svg { display: block; }
.fmm-pc__plat--facebook { color: #1877F2; }
.fmm-pc__plat--instagram { color: #E4405F; }
.fmm-pc__plat--tiktok { color: #111; }
.fmm-pc__plat--whatsapp { color: #25D366; }
.fmm-pc__plat--pinterest { color: #E60023; }
.fmm-pc__plat--ebay { color: #E53238; }

.fmm-pc__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fmm-pc__title {
    font-size: 14px; font-weight: 700; line-height: 1.35; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 38px;
}
.fmm-pc__sub {
    font-size: 12px; color: var(--fmm-muted); margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fmm-pc__pricerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.fmm-pc__price { font-size: 19px; font-weight: 800; }
.fmm-pc__was { font-size: 12px; color: var(--fmm-faint); margin-left: 6px; }
/* `auto`, not a fixed gap: the body is already `flex: 1`, so this pins the
   button row to the bottom of the card. Without it the row sat directly under
   whatever text preceded it, and a listing carrying a strike-through original
   price pushed its buttons a line lower than its neighbours' — cards were the
   same height while their controls disagreed. */
.fmm-pc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 10px; }
/* Two buttons share the narrowest grid column (232px), leaving ~70px of text
   room against the 72px "Add to Cart" needs. Trim the side padding and forbid
   the wrap outright so the pair stays one line tall at every column width. */
.fmm-pc__actions .fmm-btn { padding-inline: 10px; white-space: nowrap; }

.fmm-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.fmm-tag--green { background: #DCFCE7; color: #15803D; }
/* "Free Shipping" is longer than the old "Free Ship" label; a slightly
   smaller size keeps it on one line inside the price row. */
.fmm-tag--freeship { font-size: 10px; white-space: nowrap; }
.fmm-tag--blue { background: #DBEAFE; color: #1D4ED8; }

/* --- browse layout: filter sidebar + results ------------------------------ */
.fmm-browse { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
.fmm-browse__sidebar { display: grid; align-content: start; gap: 16px; min-width: 0; }
.fmm-browse__results { min-width: 0; }
.fmm-browse--category .fmm-browse__results[aria-busy="true"] { opacity: .58; pointer-events: none; transition: opacity .15s ease; }
.fmm-browse--category { grid-template-columns: var(--fmm-category-sidebar-width) minmax(0, 1fr); gap: 24px; }
.fmm-browse--category .fmm-filters { position: static; }
.fmm-category-page__container { max-width: calc(var(--fmm-container) + var(--fmm-container-gutter) + var(--fmm-container-gutter)); }

.fmm-filters {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-category-filter-radius);
    padding: 20px;
    position: sticky; top: 24px;
}
.fmm-filters__group + .fmm-filters__group { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--fmm-border); }
.fmm-filters__title { font-size: 14px; font-weight: 800; margin: 0 0 14px; }

.fmm-fl { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 5px 0; cursor: pointer; }
.fmm-fl input {
    appearance: none;
    flex: none;
    width: var(--fmm-filter-checkbox-size);
    height: var(--fmm-filter-checkbox-size);
    margin: 0;
    border: 1px solid var(--fmm-border-strong, var(--fmm-border));
    border-radius: 4px;
    background: #fff;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.fmm-fl input::before {
    content: "";
    width: 8px;
    height: 4px;
    border: solid var(--fmm-dark);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
}
.fmm-fl input:checked { background: var(--fmm-yellow); border-color: var(--fmm-yellow); }
.fmm-fl input:checked::before { transform: rotate(-45deg) scale(1); }
.fmm-fl input:focus-visible { outline: 2px solid var(--fmm-yellow-dark); outline-offset: 2px; }
.fmm-fl__count { margin-left: auto; font-size: 12px; color: var(--fmm-faint); }
.fmm-source-label { display: inline-flex; align-items: center; gap: 7px; color: var(--fmm-text); }
.fmm-source-label svg { flex: none; }
.fmm-source-label--facebook svg { color: #1877F2; }
.fmm-source-label--instagram svg { color: #E4405F; }
.fmm-source-label--tiktok svg { color: #111; }
.fmm-source-label--whatsapp svg { color: #25D366; }
.fmm-source-label--pinterest svg { color: #E60023; }
.fmm-source-label--ebay svg { color: #E53238; }
.fmm-category-source-icon { display: block; width: auto; max-width: 16px; object-fit: contain; flex: none; }

.fmm-price-range__slider {
    display: block;
    width: 100%;
    height: 20px;
    margin: 2px 0 12px;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.fmm-price-range__slider::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: var(--fmm-border);
}
.fmm-price-range__slider::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: var(--fmm-border);
}
.fmm-price-range__slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -6.5px;
    appearance: none;
    border: 0;
    border-radius: 50%;
    background: var(--fmm-yellow);
    box-shadow: var(--fmm-shadow);
}
.fmm-price-range__slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--fmm-yellow);
    box-shadow: var(--fmm-shadow);
}
.fmm-price-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.fmm-price-range__field {
    min-width: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--fmm-border);
    border-radius: 8px;
    color: var(--fmm-muted);
    background: #fff;
}
.fmm-price-range__field:focus-within { border-color: var(--fmm-yellow-dark); }
.fmm-price-range__field input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fmm-text);
    font: inherit;
    font-size: 13px;
}
.fmm-price-range__field input::-webkit-inner-spin-button,
.fmm-price-range__field input::-webkit-outer-spin-button { margin: 0; }
.fmm-price-range__separator { color: var(--fmm-faint); }
.fmm-price-range__field input::placeholder { color: var(--fmm-muted); opacity: 1; }
.fmm-price-range__slider:focus-visible {
    outline: 2px solid var(--fmm-yellow-dark);
    outline-offset: 3px;
}

.fmm-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
/* Chips left, count + sort pinned right, all on one line. A modifier rather
   than a change to .fmm-toolbar because other toolbars put their controls
   directly in the row and rely on it wrapping. */
.fmm-toolbar--split { flex-wrap: nowrap; }

@media (max-width: 720px) {
    /* Too narrow to hold both — let the tail drop rather than crush the chips. */
    .fmm-toolbar--split { flex-wrap: wrap; }
}

.fmm-toolbar__chips {
    /* Takes the free space and wraps internally, so the count/sort tail after
       it never gets pushed onto a line of its own. `1 1 0` (not `auto`) so the
       group shrinks below its content width instead of growing and shoving the
       tail off the line. */
    flex: 1 1 0;
    min-width: 0;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.fmm-toolbar__count { flex: 0 0 auto; font-size: 14px; font-weight: 700; white-space: nowrap; }
.fmm-toolbar__sort { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; white-space: nowrap; font-size: 13px; color: var(--fmm-muted); }
/* Toolbar dropdowns — sort and filter controls that sit above a result list.
   Deliberately lighter than a form field (38px vs --fmm-field-h) but drawn with
   the same chevron, so the two read as one family. Every sort/filter select in
   the app routes through this rule; do not hand-roll another one. */
.fmm-select,
.fmm-toolbar__sort select,
select.fmm-vselect {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer; color: var(--fmm-text); background-color: #fff;
    background-image: var(--fmm-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.fmm-select,
.fmm-toolbar__sort select {
    padding: 9px 34px 9px 12px;
    font: inherit; font-size: 13px; font-weight: 600;
    border: 1px solid var(--fmm-border); border-radius: 8px;
}
.fmm-select:hover,
.fmm-toolbar__sort select:hover { border-color: var(--fmm-faint); }
.fmm-select:focus-visible,
.fmm-toolbar__sort select:focus-visible,
select.fmm-vselect:focus-visible { outline: 2px solid var(--fmm-yellow); outline-offset: 1px; }
.fmm-select::-ms-expand,
.fmm-toolbar__sort select::-ms-expand,
select.fmm-vselect::-ms-expand { display: none; }
.fmm-fchip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--fmm-bg-alt); border: 1px solid var(--fmm-border);
    border-radius: 999px; padding: 5px 10px;
    font-size: 12px; font-weight: 600;
}
.fmm-fchip a { color: var(--fmm-faint); font-weight: 800; }
.fmm-fchip a:hover { color: var(--fmm-text); }
.fmm-clear { font-size: 12.5px; color: var(--fmm-muted); text-decoration: underline; }

/* pagination */
.fmm-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.fmm-pager__i {
    min-width: 38px; height: 38px; padding: 0 12px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 600;
    border: 1px solid var(--fmm-border); background: #fff;
}
.fmm-pager__i:hover { border-color: var(--fmm-faint); }
.fmm-pager__i--on { background: var(--fmm-dark); border-color: var(--fmm-dark); color: #fff; }
.fmm-pager__i--off { opacity: .4; pointer-events: none; }
.fmm-pager__gap { color: var(--fmm-faint); padding: 0 4px; }

.fmm-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.fmm-page-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.fmm-page-head p { font-size: 14.5px; color: var(--fmm-muted); margin: 0; }
.fmm-page-head__acts { display: flex; gap: 10px; flex-shrink: 0; }

/* The title and the action row cannot both fit on a phone, and the actions are
   flex-shrink:0, so they pushed the page wider than the viewport instead of
   giving way. Let them drop onto their own line. */
@media (max-width: 700px) {
    .fmm-page-head { flex-wrap: wrap; gap: 16px; }
    /* width:100% is what makes the wrap actually take effect. Left at
       flex-shrink:0 the row keeps its intrinsic width, so its children never
       run out of room and never wrap — it just hangs off the screen. */
    .fmm-page-head__acts { flex-wrap: wrap; flex-shrink: 1; width: 100%; }
    /* The 170px input is wider than a 320px phone can spare once the box's
       padding and icon are counted. */
    .fmm-searchbox { max-width: 100%; }
    .fmm-searchbox input { width: 100%; min-width: 0; }
}

/* Package accent rails stay within the card border at every breakpoint. */
.fmm-packages-page .fmm-pkg::before { display:none; }
.fmm-packages-page .fmm-pkg { border-top-width:3px; }
.fmm-packages-page .fmm-pkg.is-amber { border-top-color:#F59E0B; }
.fmm-packages-page .fmm-pkg.is-blue { border-top-color:#3B82F6; }
.fmm-packages-page .fmm-pkg.is-violet { border-top-color:#805BFF; }
.fmm-packages-page .fmm-pkg.is-green { border-top-color:#22C55E; }
.fmm-packages-page .fmm-pkg.is-red { border-top-color:#EF4444; }
.fmm-packages-page .fmm-pkg.fmm-incoming-package { border-top-color:#FFBE2E; }

@media (max-width: 560px) {
    .fmm-packages-page .fmm-pkgs,
    .fmm-packages-page .fmm-incoming-list__grid { grid-template-columns:minmax(0,1fr); }
    .fmm-packages-page .fmm-pkg { min-width:0; width:100%; }
    .fmm-packages-page .fmm-pkg__id { min-width:0; }
    .fmm-packages-page .fmm-pkg__idend { max-width:92px; min-width:0; }
    .fmm-packages-page .fmm-pkg__ref b { overflow-wrap:anywhere; word-break:break-word; }
    .fmm-packages-page .fmm-pkg__weights { grid-template-columns:minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.4fr); }
    .fmm-packages-page .fmm-pkg__billable b { flex-wrap:wrap; }
    .fmm-packages-page .fmm-pkgfilters { width:100%; }
    .fmm-packages-page .fmm-pkgfilters > button { flex:1 1 auto; }
}

/* Cold-load skeleton shaped like the Packages summary + compact card grid. */
.fmm-sk-packages__stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:30px; }
.fmm-sk-package-stat { min-width:0; min-height:157px; padding:20px; border:1px solid var(--fmm-border); border-radius:16px; background:#fff; }
.fmm-sk-package-stat__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.fmm-sk-package-stat__icon { width:40px; height:40px; border-radius:12px; }
.fmm-sk-package-stat__tag { width:48px; height:20px; border-radius:999px; }
.fmm-sk-package-stat__value { display:block; width:54px; height:29px; margin-bottom:7px; }
.fmm-sk-package-stat__label { display:block; width:86px; height:13px; }
.fmm-sk-packages__heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 18px; }
.fmm-sk-packages__heading > div:first-child { flex:1; max-width:330px; }
.fmm-sk-packages__heading .fmm-sk__line + .fmm-sk__line { margin-top:7px; }
.fmm-sk-packages__filters { display:flex; gap:9px; }
.fmm-sk-package-filter { width:78px; height:36px; border-radius:999px; }
.fmm-sk-package-filter--icon { width:38px; border-radius:10px; }
.fmm-sk-packages__bulk { display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.fmm-sk-packages__bulk .fmm-sk__line:last-child { margin-left:auto; width:110px; }
.fmm-sk-package-check { width:20px; height:20px; border:1px solid var(--fmm-border); border-radius:50%; }
.fmm-sk-packages__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.fmm-sk-package { display:flex; flex-direction:column; gap:8px; min-width:0; min-height:270px; padding:12px; border:1px solid var(--fmm-border); border-radius:12px; background:#fff; }
.fmm-sk-package__identity { display:flex; align-items:center; gap:8px; min-width:0; }
.fmm-sk-package__thumb { flex:none; width:34px; height:34px; border-radius:9px; }
.fmm-sk-package__copy { display:grid; flex:1; gap:4px; min-width:0; }
.fmm-sk-package__status { width:78px; height:13px; border-radius:5px; }
.fmm-sk-package__title { width:90%; height:12px; }
.fmm-sk-package__subtitle { width:74%; height:9px; }
.fmm-sk-package__ref { display:grid; gap:4px; width:42px; }
.fmm-sk-package__ref .fmm-sk { width:100%; height:7px; }
.fmm-sk-package__progress { display:grid; gap:5px; margin-top:6px; }
.fmm-sk-package__progress > .fmm-sk__line { height:10px; }
.fmm-sk-package__bar { height:4px; border-radius:99px; }
.fmm-sk-package__legend { display:flex; justify-content:space-between; }
.fmm-sk-package__legend i { width:34px; height:7px; border-radius:5px; background:var(--fmm-bg-alt); }
.fmm-sk-package__weights { display:grid; grid-template-columns:.85fr .9fr 1.5fr; gap:6px; height:46px; margin-top:4px; padding:9px 8px; border-radius:10px; background:var(--fmm-bg-alt); }
.fmm-sk-package__weights span { height:8px; margin-top:7px; border-radius:4px; background:#E8EAEE; }
.fmm-sk-package__dimensions { display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.fmm-sk-package__dimensions span { width:60px; height:8px; border-radius:4px; background:var(--fmm-bg-alt); }
.fmm-sk-package__dimensions span:last-child { width:88px; }
.fmm-sk-package__note { height:25px; border-radius:8px; }
.fmm-sk-package__actions { display:flex; gap:6px; margin-top:auto; }
.fmm-sk-package__button { flex:1; height:30px; border-radius:8px; }
.fmm-sk-package__more { width:30px; height:30px; border-radius:8px; }
@media (max-width:1180px) { .fmm-sk-packages__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px) { .fmm-sk-packages__stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .fmm-sk-packages__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) {
    .fmm-sk-packages__stats,.fmm-sk-packages__grid { grid-template-columns:minmax(0,1fr); }
    .fmm-sk-packages__heading { align-items:flex-start; flex-direction:column; }
    .fmm-sk-packages__filters { max-width:100%; flex-wrap:wrap; }
    .fmm-sk-package-stat { min-height:130px; }
}

/* Incoming package declaration, aligned to the Figma form and summary rail. */
.fmm-incoming-page .fmm-container { max-width: 1192px; }
.fmm-incoming-page .fmm-ksplit {
    grid-template-columns: minmax(0, 780px) minmax(0, 340px);
    gap: 24px;
}
.fmm-incoming-page .fmm-infobar.fmm-incoming__infobar {
    align-items: center;
    width: min(100%, 868px);
    min-height: 60px;
    border: 1px solid #FFBE2E4D;
    border-radius: 12px;
    background: #FFBE2E4D;
    color: #374151;
    padding: 16px;
    gap: 16px;
    font-size: 13px;
}
.fmm-incoming-page .fmm-infobar.fmm-incoming__infobar img { flex: none; width: 16px; height: 16px; object-fit: contain; }
.fmm-incoming-page .fmm-iplats { gap: 10px; }
.fmm-incoming-page .fmm-iplats button {
    gap: 8px;
    padding: 13px 20px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}
.fmm-incoming-page .fmm-iplats button img { display: block; flex: none; object-fit: contain; }
.fmm-incoming-page .fmm-iplats button img[src$="amazon.svg"] { width: 12px; height: 15px; }
.fmm-incoming-page .fmm-iplats button img[src$="ebay_icon.png"] { width: 17px; height: 10px; }
.fmm-incoming-page .fmm-iplats button > svg { flex: none; color: #667085; }
.fmm-incoming-page .fmm-iplats button.is-on {
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid #FFBE2E;
    border-radius: 12px;
    background: #FFBE2E0D;
}
.fmm-incoming-page .fmm-field input,
.fmm-incoming-page .fmm-field select { background: #F9FAFB; }
.fmm-incoming__tracking-field {
    position: relative;
    display: block;
    margin: 0;
    font-size: initial;
    font-weight: 400;
}
.fmm-field .fmm-incoming__tracking-field { margin: 0; }
.fmm-incoming__tracking-field img {
    position: absolute;
    z-index: 1;
    left: 13px;
    top: 50%;
    width: 18px;
    height: 16px;
    object-fit: contain;
    transform: translateY(-50%);
    pointer-events: none;
}
.fmm-field .fmm-incoming__tracking-field input { padding-left: 39px; }
.fmm-incoming-page .fmm-scard--rail { padding: 18px 20px; }
.fmm-incoming-page .fmm-scard--rail h2 {
    margin: 0 0 4px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid #EAECF0;
}
.fmm-incoming-page .fmm-scard--rail .fmm-vrev {
    min-height: 40px;
    padding: 8px 0;
    border-bottom: 1px solid #F0F1F3;
    font-size: 12px;
}
.fmm-incoming-page .fmm-scard--rail .fmm-vrev:last-of-type { border-bottom: 0; }
.fmm-incoming__source-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; text-align: right; }
.fmm-incoming__source-value img { display: block; width: 13px; height: 13px; object-fit: contain; }
.fmm-incoming__source-value img[src$="ebay_icon.png"] { width: 20px; height: 9px; }
.fmm-incoming__source-value svg { flex: none; color: #667085; }
.fmm-incoming__draft-status { margin: 8px 0 0; color: #15803D; text-align: center; font-size: 12px; }
.fmm-incoming__heading { display: flex; align-items: center; gap: 9px; }
.fmm-incoming__back { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #E5E7EB; border-radius: 50%; background: #fff; color: #344054; }
.fmm-incoming__sender-sources { margin: 0 0 16px; }
.fmm-incoming__sender-divider { height: 1px; margin: 4px 0 16px; border: 0; background: #EAECF0; }
.fmm-incoming-review { padding: 24px; }
.fmm-incoming-review__tracking {
    display: flex; align-items: center; gap: 14px;
    min-height: 68px; padding: 14px 16px;
    border: 1px solid #E5E7EB; border-radius: 12px; background: #F9FAFB;
}
.fmm-incoming-review__package-icon {
    display: grid; flex: none; place-items: center; width: 40px; height: 40px;
    border-radius: 50%; background: #FFF7ED; color: #F59E0B;
}
.fmm-incoming-review__package-icon img { display: block; width: 20px; height: 20px; object-fit: contain; }
.fmm-incoming-review__tracking em,
.fmm-incoming-review__meta em,
.fmm-incoming-review__items em {
    display: block; margin: 0 0 4px; color: #667085; font-size: 11px; font-style: normal;
}
.fmm-incoming-review__tracking em { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fmm-incoming-review__tracking b { display: block; color: #20242B; font-size: 16px; font-weight: 750; }
.fmm-incoming-review__meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    padding: 17px 0; border-bottom: 1px solid #EAECF0;
}
.fmm-incoming-review__meta > div { min-width: 0; }
.fmm-incoming-review__meta b,
.fmm-incoming-review__items b { display: block; color: #20242B; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.fmm-incoming-review__items { padding: 17px 0; border-bottom: 1px solid #EAECF0; }
.fmm-incoming-review__meta--bottom { border-bottom: 0; padding-bottom: 0; }
.fmm-incoming-review__sender { padding: 14px 0; border-bottom: 1px solid #EAECF0; }
.fmm-incoming-review__sender > em { display: block; margin-bottom: 9px; color: #667085; font-size: 11px; font-style: normal; }
.fmm-incoming-review__sender-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fmm-incoming-review__sender-grid small { display: block; margin-bottom: 3px; color: #667085; font-size: 10px; }
.fmm-incoming-review__sender-grid b { display: block; color: #20242B; font-size: 12px; overflow-wrap: anywhere; }
.fmm-incoming-page .fmm-ipcheck { padding: 14px 0 16px; border-top: 1px solid #EAECF0; }
.fmm-incoming-page .fmm-ipcheck li { font-size: 12.5px; }
.fmm-incoming-page .fmm-ipnote--warehouse { align-items: center; border-color: #E5E7EB; background: #F9FAFB; color: #344054; }
.fmm-incoming-review__warehouse-icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #F3F4F6; color: #98A2B3; }
.fmm-incoming-review__warehouse-icon img { display: block; width: 16px; height: 16px; object-fit: contain; }
.fmm-incoming-page .fmm-ipnote--warehouse b { margin-bottom: 3px; color: #20242B; }
.fmm-incoming-page .fmm-incoming-review__rail { padding: 18px 20px; }
.fmm-incoming-success-overlay { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; padding:24px; background:rgba(22,24,27,.48); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.fmm-incoming-success { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr); width:min(100%,1000px); max-height:calc(100vh - 48px); overflow:auto; border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.2); }
.fmm-incoming-success__main { min-width:0; padding:32px 30px; }
.fmm-incoming-page .fmm-incoming-success__hero { padding:0 14px 24px; }
.fmm-incoming-page .fmm-incoming-success__hero .fmm-confirm__tick { width:58px; height:58px; margin:0 auto 16px; box-shadow:0 0 0 9px #FFF4D6; }
.fmm-incoming-page .fmm-incoming-success__hero h1 { margin:0 0 10px; font-size:27px; }
.fmm-incoming-page .fmm-incoming-success__hero p { max-width:470px; font-size:14px; line-height:1.6; }
.fmm-incoming-success__receipt { padding:18px; border:1px solid #F1E8D8; border-radius:14px; background:#FFFCF6; }
.fmm-incoming-success__tracking { display:flex; align-items:center; gap:13px; padding-bottom:15px; border-bottom:1px solid #F0E8DA; }
.fmm-incoming-success__tracking-icon { display:grid; flex:none; place-items:center; width:38px; height:38px; border-radius:10px; background:#FFF2D6; }
.fmm-incoming-success__tracking-icon img { display:block; width:23px; height:23px; object-fit:contain; }
.fmm-incoming-success__tracking > span:nth-child(2) { min-width:0; flex:1; }
.fmm-incoming-success__tracking em,.fmm-incoming-success__details em { display:block; margin-bottom:4px; color:#667085; font-size:12px; font-style:normal; }
.fmm-incoming-success__tracking b { color:#20242B; font-size:15px; overflow-wrap:anywhere; }
.fmm-incoming-success__tracking button { display:grid; place-items:center; padding:5px; border:0; background:transparent; color:#667085; cursor:pointer; }
.fmm-incoming-success__details { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:18px; padding-top:14px; }
.fmm-incoming-success__details > div { min-width:0; }
.fmm-incoming-success__details b { display:flex; align-items:flex-start; gap:7px; color:#20242B; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.fmm-incoming-success__source img { display:block; width:17px; height:17px; object-fit:contain; }
.fmm-incoming-success__source img[src$="ebay_icon.png"] { width:24px; height:12px; }
.fmm-incoming-success__source svg { flex:none; color:#7A8494; }
.fmm-incoming-success__secure { display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px 14px; border:1px solid #FDE9B3; border-radius:11px; background:#fff; color:#4B5563; }
.fmm-incoming-success__secure > span { display:grid; flex:none; place-items:center; width:27px; height:27px; border-radius:7px; background:#FFF4D6; }
.fmm-incoming-success__secure > span img { display:block; width:16px; height:16px; object-fit:contain; }
.fmm-incoming-success__secure p { margin:0; font-size:12px; line-height:1.45; }
.fmm-incoming-success__secure b { color:#20242B; }
.fmm-incoming-success__actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.fmm-incoming-success__actions .fmm-btn { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:46px; padding:9px 14px; text-align:center; font-size:12px; }
.fmm-incoming-success__actions .fmm-btn img { display:block; flex:none; width:15px; height:15px; object-fit:contain; }
.fmm-incoming-success__next { display:flex; flex-direction:column; min-width:0; height:100%; padding:26px 24px 20px; border-left:1px solid #F0F1F3; background:#FCFCFD; }
.fmm-incoming-success__next h2 { display:flex; align-items:center; gap:9px; margin:0 0 18px; color:#20242B; font-size:16px; }
.fmm-incoming-success__next h2 > span { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:#FFF4D6; }
.fmm-incoming-success__next h2 > span img { display:block; width:16px; height:16px; object-fit:contain; }
.fmm-incoming-success__next .fmm-track { display:flex; flex:1; flex-direction:column; justify-content:space-between; margin-bottom:14px; }
.fmm-incoming-success__next .fmm-track__step { flex:1; gap:12px; min-height:62px; padding-bottom:0; }
.fmm-incoming-success__next .fmm-track__step:not(:last-child)::before { left:6px; top:15px; width:1px; background:#E0E4EA; }
.fmm-incoming-success__next .fmm-track__dot { display:grid; place-items:center; width:14px; height:14px; margin-top:1px; border:1px solid #D6DCE5; background:#fff; }
.fmm-incoming-success__next .fmm-track__dot.is-now { border:0; background:#FFBE2E; box-shadow:none; }
.fmm-incoming-success__next .fmm-track__step.is-done > .fmm-track__dot { background:#FFBE2E; color:#fff; }
.fmm-incoming-success__next .fmm-track__step.is-done:not(:last-child)::before { background:#E0E4EA; }
.fmm-incoming-success__next .fmm-track__dot svg { width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.fmm-incoming-success__next .fmm-track__dot img { display:block; width:8px; height:8px; object-fit:contain; }
.fmm-incoming-success__next .fmm-track__step > span:last-child { gap:2px; }
.fmm-incoming-success__next .fmm-track__step b { color:#20242B; font-size:12px; }
.fmm-incoming-success__next .fmm-track__step.is-done b { color:#EBA900; }
.fmm-incoming-success__next .fmm-track__step span span { color:#778092; font-size:10px; line-height:1.45; }
.fmm-incoming-success__next .fmm-track__step small { align-self:flex-start; margin-top:4px; padding:3px 9px; border-radius:999px; background:#FFF4D6; color:#D89500; font-size:9px; }
.fmm-incoming-success__estimate { display:grid; gap:4px; margin-top:auto; padding:12px 13px; border:1px solid #EDF0F4; border-radius:9px; background:#fff; }
.fmm-incoming-success__estimate em { color:#7A8494; font-size:10px; font-style:normal; }
.fmm-incoming-success__estimate b { color:#20242B; font-size:13px; }
.fmm-incoming-success__estimate span { color:#929AAA; font-size:9px; }
@media (max-width:700px) {
    .fmm-incoming-success-overlay { align-items:start; overflow:auto; padding:14px; }
    .fmm-incoming-success { grid-template-columns:minmax(0,1fr); max-height:none; }
    .fmm-incoming-success__main { padding:20px 16px; }
    .fmm-incoming-success__next { border-top:1px solid #F0F1F3; border-left:0; }
}

@media (max-width: 1000px) {
    .fmm-incoming-page .fmm-ksplit { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 900px) {
    .fmm-browse { grid-template-columns: 1fr; }
    .fmm-filters { position: static; }
}

/* --- categories page ------------------------------------------------------ */
.fmm-srcbanner {
    position: relative; overflow: hidden;
    background: linear-gradient(100deg, #FDE9A9, #FEF3D0 70%);
    border-radius: var(--fmm-radius-lg);
    padding: 32px 36px;
    margin-bottom: 44px;
}
.fmm-srcbanner__tag {
    display: inline-block;
    background: var(--fmm-dark); color: #fff;
    border-radius: 6px; padding: 5px 11px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.fmm-srcbanner h2 { font-size: 24px; font-weight: 800; margin: 14px 0 8px; letter-spacing: -.02em; }
.fmm-srcbanner p { font-size: 14px; line-height: 1.65; color: #6B5A2E; margin: 0 0 20px; max-width: 420px; }
.fmm-srcbanner__art {
    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
    width: 120px; height: 120px; color: rgba(255, 255, 255, .55);
}

.fmm-srcgrid { display: flex; flex-wrap: wrap; gap: 28px; }
.fmm-src { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 84px; }
.fmm-src__badge {
    width: 60px; height: 60px; border-radius: 14px;
    background: #fff; border: 1px solid var(--fmm-border);
    display: grid; place-items: center; overflow: hidden;
    font-size: 20px; font-weight: 800; color: var(--fmm-muted);
}
.fmm-src__badge img { width: 30px; height: 30px; object-fit: contain; }
/* Bundled brand logos; eBay is a wide wordmark and needs the extra width. */
.fmm-src__badge .fmm-src__logo[src$="/ebay.svg"] { width: 46px; height: 46px; }
.fmm-src:hover .fmm-src__badge { border-color: var(--fmm-yellow); }
.fmm-src__label { font-size: 12.5px; font-weight: 600; text-align: center; }

.fmm-catcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fmm-catcard {
    border: 1px solid var(--fmm-border); border-radius: 14px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 4px;
}
.fmm-catcard:hover { border-color: var(--fmm-yellow); box-shadow: var(--fmm-shadow); }
.fmm-catcard__icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--fmm-yellow-soft); color: var(--fmm-yellow-dark);
    display: grid; place-items: center; overflow: hidden;
    font-size: 15px; font-weight: 800; margin-bottom: 12px;
}
.fmm-catcard__icon img { width: 22px; height: 22px; object-fit: contain; }
.fmm-catcard__label { font-size: 15px; font-weight: 700; }
.fmm-catcard__sub { font-size: 12.5px; color: var(--fmm-muted); }

@media (max-width: 1000px) { .fmm-catcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .fmm-catcards { grid-template-columns: 1fr; }
    .fmm-srcbanner__art { display: none; }
}


/* --- category tiles ------------------------------------------------------- */
.fmm-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.fmm-cat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
}
.fmm-cat:hover { border-color: var(--fmm-yellow); box-shadow: var(--fmm-shadow); }
.fmm-cat__label { font-size: 15px; font-weight: 700; }
.fmm-cat__sub { font-size: 13px; color: var(--fmm-muted); }
.fmm-cat__count { font-size: 12px; color: var(--fmm-faint); margin-top: 6px; }

/* --- horizontal rails (carousels) ----------------------------------------- */
.fmm-rail {
    display: flex; gap: 20px;
    /* Cards stretch to the tallest in the row rather than each sizing to its own
       content, so a row reads as one shelf instead of a ragged bottom edge. */
    align-items: stretch;
    overflow-x: auto;
    /*
     * `mandatory` fought the arrows. A programmatic scrollBy of ~80% of the rail
     * width overshoots the last snap point, and mandatory snapping resolved that
     * by yanking the rail back to 0 — so clicking an arrow visibly did nothing on
     * the longer rails while a short drag worked fine. `proximity` keeps the snap
     * feel and lets the scroll land where it was sent.
     */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.fmm-rail::-webkit-scrollbar { display: none; }
.fmm-rail > * { flex: 0 0 246px; scroll-snap-align: start; }

.fmm-arrows { display: flex; gap: 10px; }
.fmm-arrow {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--fmm-border); background: #fff;
    display: grid; place-items: center; color: var(--fmm-text);
}
.fmm-arrow:hover { border-color: var(--fmm-faint); }
.fmm-arrow:disabled {
    opacity: .35;
    cursor: default;
}
.fmm-arrow:disabled:hover { border-color: var(--fmm-border); }

/* --- "Shop by Category" image tiles --------------------------------------- */
.fmm-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.fmm-cat-tile {
    background: #F4F5F7;
    border-radius: var(--fmm-radius-lg);
    min-height: 172px;
    padding: 22px 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    text-align: center;
}
.fmm-cat-tile:hover { background: #EDEEF1; }
.fmm-cat-tile__art {
    width: 96px; height: 96px;
    display: grid; place-items: center;
    border-radius: 10px; overflow: hidden;
}
.fmm-cat-tile__art img { width: 100%; height: 100%; object-fit: contain; }
.fmm-cat-tile__art--ph { background: #E6E8EB; color: var(--fmm-faint); font-size: 26px; font-weight: 800; }
.fmm-cat-tile__label { font-size: 15px; font-weight: 700; }

/* --- social card (image + platform pill + heart) -------------------------- */
/*
 * Product card.
 *
 * Renamed from .fmm-scard, which collided with the seller-settings panel of the
 * same name defined later in this file. That rule's `padding: 24px` was winning
 * on every product card, insetting the photo from the card edge and adding 48px
 * of height that varied with the content — which is why cards in a row ended up
 * different heights.
 */
.fmm-pcard {
    display: flex; flex-direction: column;
    /* No explicit height — the rail's `align-items: stretch` equalises the row.
       A `height: 100%` here resolved against the rail's auto height and made
       each card size to its own content instead, defeating the stretch. */
    background: #fff;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    overflow: hidden;
}
.fmm-pcard:hover { box-shadow: var(--fmm-shadow-lg); }
/*
 * Cards that sit inside a width wrapper (the seller rail uses
 * `<div style="flex:0 0 296px">`) need to fill it: the rail's stretch applies to
 * the wrapper, not to the card inside it, so a card without the optional
 * "FlymyMall Verified" chip came out ~32px shorter than its neighbours. Here the
 * parent HAS a definite stretched height, so 100% resolves properly.
 */
.fmm-rail > div > .fmm-pcard { height: 100%; }
.fmm-pcard__media { position: relative; aspect-ratio: 1; background: var(--fmm-bg-alt); }
/*
 * Absolutely positioned so the photo cannot size the box.
 *
 * With `height: 100%` in normal flow the percentage resolved against an
 * auto-height parent — i.e. to `auto` — so the image fell back to its intrinsic
 * ratio and stretched the media box past the square `aspect-ratio`. Product
 * shots are not all the same shape, so each card got a different image height
 * and the row ended up with ragged card heights.
 */
.fmm-pcard__media > a { position: absolute; inset: 0; display: block; }
.fmm-pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fmm-pcard__media--empty { display: grid; place-items: center; color: var(--fmm-faint); font-size: 13px; }

.fmm-plat {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px; font-weight: 700;
    box-shadow: var(--fmm-shadow);
}
/* Brand colour applies to the glyph only — the label stays near-black so it
   keeps its contrast on the white pill. */
.fmm-plat svg { flex-shrink: 0; }
.fmm-pdp .fmm-plat { gap: 5px; padding: 4px 10px; font-size: 10px; }
.fmm-pdp .fmm-plat > img { flex: none; object-fit: contain; }
.fmm-pdp .fmm-plat .fmm-platform-icon-wrap { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.fmm-pdp .fmm-plat .fmm-platform-icon--amazon { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.fmm-plat--facebook  svg { color: #1877F2; }
.fmm-plat--instagram svg { color: #E4405F; }
.fmm-plat--tiktok    svg { color: #111; }
.fmm-plat--whatsapp  svg { color: #25D366; }
.fmm-plat--pinterest svg { color: #E60023; }
.fmm-plat--ebay      svg { color: #E53238; }

.fmm-heart {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 0; display: grid; place-items: center;
    color: #9AA1AC; box-shadow: var(--fmm-shadow);
}
.fmm-heart:hover, .fmm-heart[aria-pressed="true"] { color: #EF4444; }

.fmm-pcard__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fmm-pcard__title {
    font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 39px;
}
.fmm-pcard__meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--fmm-muted);
}
.fmm-pcard__meta--verified { color: #8A6100; }
.fmm-pcard__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: auto;
}
.fmm-pcard__price { font-size: 20px; font-weight: 800; }

/* seller variant: title and price on one row, verified chip beneath */
.fmm-pcard--seller .fmm-pcard__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.fmm-pcard--seller .fmm-pcard__price { font-size: 16px; white-space: nowrap; }
.fmm-chip--outline {
    background: #fff; color: #8A6100;
    border: 1px solid var(--fmm-yellow);
    align-self: flex-start;
}

/* From Social card, matched to Figma node 2:6437. Scoped so generic cards and
   seller account panels that share the base class keep their own layouts. */
.fmm-pcard--social {
    border-color: #F3F4F6;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.fmm-pcard--social .fmm-pcard__media { background: #F3F4F6; }
.fmm-pcard--social .fmm-plat {
    top: 12px; left: 12px; gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    backdrop-filter: blur(4px);
    color: #111827; font-size: 12px; font-weight: 700; line-height: 16px;
}
.fmm-pcard--social .fmm-plat__figma-icon {
    position: static; inset: auto;
    display: block; width: 12px; height: 12px;
    object-fit: contain;
}
.fmm-pcard--social .fmm-heart {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 0;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    backdrop-filter: blur(4px);
}
.fmm-pcard--social .fmm-heart img {
    position: static; inset: auto;
    display: block; flex: 0 0 16px; width: 16px; height: 16px;
    object-fit: contain;
}
.fmm-pcard--social .fmm-heart[aria-pressed="true"] img { filter: none; }
.fmm-pcard--social .fmm-pcard__body { padding: 16px; gap: 6px; }
.fmm-pcard--social .fmm-pcard__title {
    min-height: 40px;
    color: #111827; font-size: 14px; font-weight: 700; line-height: 20px;
}
.fmm-pcard--social .fmm-pcard__meta {
    gap: 4px;
    color: #6B7280; font-size: 12px; font-weight: 400; line-height: 16px;
}
.fmm-pcard--social .fmm-pcard__meta--verified { color: #6B7280; }
.fmm-pcard--social .fmm-pcard__meta--verified img { display: block; width: 12px; height: 12px; }
.fmm-pcard--social .fmm-pcard__foot { padding-top: 6px; }
.fmm-pcard--social .fmm-pcard__price {
    color: #111827; font-size: 20px; font-weight: 700; line-height: 28px;
}
.fmm-pcard--social .fmm-chip {
    padding: 4px 8px;
    border: 0; border-radius: 6px;
    background: #F3F4F6; color: #4B5563;
    font-size: 10px; font-weight: 600; line-height: 15px;
}

/* --- verified picks (compact row cards) ----------------------------------- */
.fmm-vp-section .fmm-section__head { align-items: center; margin-bottom: 24px; }
.fmm-vp-section .fmm-section__title { font-size: 24px; line-height: 32px; letter-spacing: 0; }
.fmm-vp-section .fmm-section__link { color: #FFD700; font-size: 16px; font-weight: 600; line-height: 24px; }
.fmm-vp-section__tools { display: flex; align-items: center; gap: 16px; }
.fmm-vp-section__rail { gap: 19px; padding-bottom: 0; }
.fmm-vp-section__rail > * { flex-basis: 335px; }
.fmm-vp {
    position: relative;
    display: flex; align-items: stretch; gap: 16px;
    box-sizing: border-box; height: 128px;
    padding: 13px;
    background: #fff; border: 1px solid #F3F4F6;
    border-radius: 13px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.fmm-vp:hover { box-shadow: var(--fmm-shadow-lg); }
.fmm-vp__thumb {
    position: relative;
    width: 101px; height: 101px; flex-shrink: 0;
    border-radius: 9px; overflow: hidden; background: #F9FAFB;
}
.fmm-vp__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Source mark on a Verified Pick thumbnail. Brand colour on white so it reads
   against any product photo underneath. */
.fmm-vp__plat {
    position: absolute;
    left: 6px; top: 6px;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 6px; border-radius: 5px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    color: #111827; font-size: 8px; font-weight: 700; line-height: 12px;
}
.fmm-vp__plat img { width: 8px; height: 8px; }
.fmm-vp__plat svg { width: 8px; height: 8px; }
.fmm-vp__plat span { color: #111827; }
.fmm-vp__plat--facebook  { color: #1877F2; }
.fmm-vp__plat--instagram { color: #E4405F; }
.fmm-vp__plat--tiktok    { color: #111; }
.fmm-vp__plat--whatsapp  { color: #25D366; }
.fmm-vp__plat--pinterest { color: #E60023; }
.fmm-vp__plat--ebay      { color: #E53238; }
.fmm-vp__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fmm-vp__title {
    padding-right: 18px;
    font-size: 14px; font-weight: 700; line-height: 20px; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    height: 40px;
}
.fmm-vp__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 7px 0 8px; min-height: 16px; }
.fmm-vp__condition { padding: 2px 6px; border-radius: 5px; background: #F3F4F6; color: #4B5563; font-size: 9px; font-weight: 600; line-height: 13px; }
.fmm-vp__verified { display: inline-flex; align-items: center; gap: 3px; color: #6B7280; font-size: 9px; font-weight: 400; line-height: 13px; }
.fmm-vp__verified img { width: 10px; height: 10px; }
.fmm-vp__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.fmm-vp__price { color: #111827; font-size: 19px; font-weight: 700; line-height: 25px; }
.fmm-vp__add {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%; border: 0;
    background: #111827; color: #fff;
    display: grid; place-items: center;
}
.fmm-vp__add img { width: 11px; height: 12px; }
.fmm-vp__add:hover { background: #000; }
.fmm-vp__add:disabled { opacity: .45; cursor: not-allowed; }
.fmm-vp__heart {
    position: absolute; top: 13px; right: 13px;
    display: grid; place-items: center;
    width: 16px; height: 16px; padding: 0;
    border: 0; background: transparent;
}
.fmm-vp__heart img { width: 16px; height: 15px; }
.fmm-vp__heart[aria-pressed="true"] img { filter: brightness(.92) saturate(4) sepia(1) hue-rotate(315deg); }
.fmm-vp__heart:disabled { opacity: .45; cursor: not-allowed; }

/* --- dark promo banner ---------------------------------------------------- */
.fmm-promo {
    position: relative;
    isolation: isolate;
    min-height: 452px;
    background: #090a0d;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
}
.fmm-promo::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 3, 5, .97) 0%, rgba(2, 3, 5, .91) 31%, rgba(2, 3, 5, .54) 53%, rgba(2, 3, 5, .08) 100%);
}
.fmm-promo__body {
    position: relative;
    z-index: 1;
    width: 53%;
    padding: 40px;
}
.fmm-promo__pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 190, 46, .14);
    border: 1px solid rgba(255, 190, 46, .52);
    color: var(--fmm-yellow);
    border-radius: 999px; padding: 6px 14px;
    font-size: 13px; font-weight: 800; letter-spacing: .08em;
}
.fmm-promo__title {
    font-family: var(--fmm-font-ui);
    font-size: clamp(38px, 3.4vw, 46px); line-height: 1.04; font-weight: 800;
    letter-spacing: -.045em;
    margin: 28px 0 14px;
}
.fmm-promo__title em { color: var(--fmm-yellow); font-style: normal; }
.fmm-promo__lead {
    font-size: 20px; line-height: 1.8;
    color: rgba(255, 255, 255, .82);
    max-width: 560px; margin: 0 0 26px;
}
.fmm-promo__body .fmm-btn { box-shadow: 0 9px 20px rgba(255, 190, 46, .36); }
.fmm-promo__art { position: absolute; z-index: -2; inset: 0; background: #0B1020; }
.fmm-promo__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.fmm-promo__art--ph {
    min-height: 300px;
    background: linear-gradient(150deg, #16203A, #0B1020);
}
.fmm-promo__brand {
    position: absolute;
    top: 56px;
    right: 21.5%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 999px;
    background: rgba(65, 82, 84, .52);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}
.fmm-promo__brand span { color: var(--fmm-yellow); }
.fmm-promo__brand,
.fmm-promo__brand svg,
.fmm-promo__proof-card,
.fmm-promo__proof-card strong,
.fmm-promo__proof-card small { user-select: text; -webkit-user-select: text; pointer-events: auto; }
.fmm-promo__brand,
.fmm-promo__proof { z-index: 3; }
.fmm-promo__proof-card { position: relative; z-index: 4; }
.fmm-promo__proof {
    position: absolute;
    top: 50%;
    right: 40px;
    display: grid;
    gap: 12px;
    transform: translateY(-50%);
}
.fmm-promo__proof-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 164px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 16px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}
.fmm-promo__proof-card > span:last-child { display: grid; gap: 2px; }
.fmm-promo__proof-card strong { font-size: 12px; line-height: 1; }
.fmm-promo__proof-card small { color: rgba(255, 255, 255, .7); font-size: 11px; line-height: 1; }
.fmm-promo__proof-icon {
    width: 32px;
    height: 32px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
}
.fmm-promo__proof-icon--seller { color: var(--fmm-yellow); background: rgba(255, 190, 46, .3); }
.fmm-promo__proof-icon--pay { color: #38D996; background: rgba(56, 217, 150, .24); }

/* The US marketplace reassurance banner is a dedicated Figma composition. */
.fmm-promo--meetups .fmm-promo__body { width: auto; flex: 1 1 auto; padding: 40px; }
.fmm-promo--meetups .fmm-promo__pill {
    gap: 7px; padding: 6px 15px;
    border-color: rgba(255, 193, 7, .5);
    background: rgba(255, 193, 7, .2);
    font-size: 14px; letter-spacing: .1em;
}
.fmm-promo--meetups .fmm-promo__pill img { width: 14px; height: 14px; }
.fmm-promo--meetups .fmm-promo__title {
    margin: 28px 0 9px;
    font-size: 42px; line-height: 46px; font-weight: 900; letter-spacing: -1px;
}
.fmm-promo--meetups .fmm-promo__lead { margin-bottom: 28px; }
.fmm-promo--meetups .fmm-promo__lead strong { color: #fff; font-weight: 600; }
.fmm-promo--meetups .fmm-btn {
    gap: 9px; padding: 12px 28px;
    box-shadow: 0 5px 7px rgba(255, 193, 7, .35);
    font-size: 16px;
}
.fmm-promo--meetups .fmm-btn img { width: 12px; height: 14px; }
.fmm-promo--meetups .fmm-promo__brand { right: 21.5%; }
.fmm-promo--meetups .fmm-promo__brand img { width: 13px; height: 19px; }
.fmm-promo--meetups .fmm-promo__brand svg { width: 12px; height: 14px; flex: 0 0 auto; }
.fmm-promo--meetups .fmm-promo__proof { right: 40px; gap: 12px; }
.fmm-promo--meetups .fmm-promo__proof-card {
    box-sizing: border-box; width: 164px; min-width: 0;
    gap: 8px; padding: 13px 17px;
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
}
.fmm-promo--meetups .fmm-promo__proof-card strong,
.fmm-promo--meetups .fmm-promo__proof-card small { font-size: 12px; line-height: 16px; }
.fmm-promo--meetups .fmm-promo__proof-card small { color: #9ca3af; }
.fmm-promo--meetups .fmm-promo__proof-icon { border-radius: 12px; }
.fmm-promo--meetups .fmm-promo__proof-icon--seller {
    border: 1px solid rgba(255, 193, 7, .4); background: rgba(255, 193, 7, .2);
}
.fmm-promo--meetups .fmm-promo__proof-icon--pay {
    border: 1px solid rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .2);
}
.fmm-promo--meetups .fmm-promo__proof-icon img { display: block; max-width: 18px; max-height: 14px; }
.fmm-promo--meetups .fmm-promo__proof-icon svg { display: block; width: 18px; height: 18px; }

/* --- verification feature card -------------------------------------------- */
.fmm-verify {
    border: 1px solid var(--fmm-border);
    border-radius: 20px;
    padding: 52px 48px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.fmm-verify__pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--fmm-yellow-soft); color: #8A6100;
    border-radius: 999px; padding: 8px 14px;
    font-size: 13px; font-weight: 700;
}
.fmm-verify__title {
    font-size: clamp(28px, 3.2vw, 40px); line-height: 1.16; font-weight: 800;
    letter-spacing: -.02em; margin: 22px 0 16px;
    /* Breaks after "Reaches", as the design sets it. Unconstrained it ran the
       whole headline onto one long line. */
    max-width: 12ch;
}
.fmm-verify__lead { font-size: 15px; line-height: 1.75; color: var(--fmm-muted); max-width: 420px; margin: 0 0 30px; }

.fmm-btn--dark { background: var(--fmm-dark); color: #fff; }
.fmm-btn--dark:hover { background: #000; }

.fmm-verify__panel {
    background: #fff;
    border-radius: var(--fmm-radius-lg);
    box-shadow: var(--fmm-shadow-lg);
    /* `hidden` would clip the two cards that deliberately hang off the panel. */
    position: relative;
}
/* The photo is the only thing that needs its corners clipped. */
.fmm-verify__panel > .fmm-verify__shot {
    border-radius: var(--fmm-radius-lg) var(--fmm-radius-lg) 0 0;
}

/* Cards floating off the panel edges, as in the design. */
.fmm-verify__float {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--fmm-shadow-lg);
    padding: 11px 14px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.fmm-verify__float--report { top: -18px; right: -26px; }
/* Fully clear of the panel's left edge. At a smaller offset it covered the
   start of the "Item matches description" row rather than sitting beside it. */
.fmm-verify__float--package { left: -152px; bottom: 44px; }
.fmm-verify__floatico {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #E8F7F0;
    color: #15803D;
    flex-shrink: 0;
}
.fmm-verify__float b { display: block; font-size: 12.5px; }
.fmm-verify__float em {
    display: block; font-style: normal;
    font-size: 11px; font-weight: 500; color: var(--fmm-muted);
}

/* No room to hang off the panel on a narrow screen. */
@media (max-width: 900px) {
    .fmm-verify__float { display: none; }
}
.fmm-verify__shot {
    position: relative;
    aspect-ratio: 16 / 10;
    /* The inspector is a cut-out on white in the design, not a photo bled to the
       edges — a grey gradient behind it read as a missing image. */
    background: #fff;
    overflow: hidden;
}
.fmm-verify__shot img { width: 100%; height: 100%; object-fit: contain; }
.fmm-verify__pass {
    position: absolute; right: 14px; bottom: 14px;
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border-radius: 999px;
    padding: 7px 14px;
    font-size: 12.5px; font-weight: 700;
    box-shadow: var(--fmm-shadow-lg);
}
.fmm-verify__dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.fmm-verify__checks { padding: 18px 20px; display: grid; gap: 14px; }
.fmm-verify__check { display: flex; gap: 12px; align-items: flex-start; }
.fmm-verify__tick {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--fmm-yellow-soft); color: #8A6100;
    display: grid; place-items: center;
}
.fmm-verify__check b { display: block; font-size: 14px; }
.fmm-verify__check span { font-size: 12.5px; color: var(--fmm-muted); }

/* ==========================================================================
   Product detail page
   ========================================================================== */
.fmm-section:has(.fmm-pdp) > .fmm-container {
    max-width: calc(var(--fmm-container) + var(--fmm-container-gutter) + var(--fmm-container-gutter));
}
.fmm-pdp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--fmm-pdp-aside-width);
    gap: var(--fmm-pdp-column-gap);
    align-items: start;
}
.fmm-pdp__main { display: grid; gap: var(--fmm-pdp-column-gap); min-width: 0; }
.fmm-pdp__aside { display: grid; gap: var(--fmm-pdp-aside-gap); position: sticky; top: 24px; }
.fmm-pdp .fmm-panel { border-radius: var(--fmm-pdp-panel-radius); }
.fmm-pdp__main > .fmm-panel:not(:first-child) { padding: var(--fmm-pdp-content-inset); }

.fmm-panel {
    background: #fff;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 24px;
}

.fmm-crumbs { font-size: 13px; color: var(--fmm-muted); margin: 0 0 20px; }
.fmm-crumbs a:hover { color: var(--fmm-text); }

/* gallery */
.fmm-gal { display: grid; grid-template-columns: var(--fmm-pdp-thumb-size) minmax(0, 1fr); gap: var(--fmm-pdp-gallery-gap); }
.fmm-gal__thumbs { display: grid; gap: var(--fmm-pdp-thumb-gap); align-content: start; }
.fmm-gal__thumb {
    width: var(--fmm-pdp-thumb-size); height: var(--fmm-pdp-thumb-size);
    border-radius: 10px; overflow: hidden;
    border: 2px solid transparent; background: var(--fmm-bg-alt);
    padding: 0; display: block;
}
.fmm-gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fmm-gal__thumb.is-active { border-color: var(--fmm-yellow); }

.fmm-gal__main {
    position: relative;
    background: var(--fmm-pdp-image-background);
    border-radius: var(--fmm-pdp-gallery-radius);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: grid; place-items: center;
}
/* The photo is taken out of the grid. A percentage height inside this grid
   collapses, so the grey panel showed and the picture did not. */
.fmm-gal__main > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fmm-gal__actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 10px; }
.fmm-round {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 0;
    display: grid; place-items: center;
    color: var(--fmm-muted); box-shadow: var(--fmm-shadow);
}
.fmm-round:hover { color: var(--fmm-text); }

/* accordions */
.fmm-acc { border: 1px solid var(--fmm-border); border-radius: var(--fmm-pdp-accordion-radius); overflow: hidden; }
.fmm-acc + .fmm-acc { margin-top: 12px; }
.fmm-acc--open { border-color: var(--fmm-yellow); }
.fmm-acc__head {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 15px 18px;
    background: #fff; border: 0;
    font-size: 15px; font-weight: 700; text-align: left;
}
.fmm-acc--open .fmm-acc__head { background: var(--fmm-yellow-soft); }
.fmm-acc__icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid var(--fmm-border);
    display: grid; place-items: center; color: var(--fmm-yellow-dark); flex-shrink: 0;
}
.fmm-acc__chev { margin-left: auto; color: var(--fmm-muted); transition: transform .15s; }
.fmm-acc--open .fmm-acc__chev { transform: rotate(180deg); }
.fmm-acc__body { padding: 18px; font-size: 14px; line-height: 1.75; color: var(--fmm-muted); }
.fmm-acc__body[hidden] { display: none; }

.fmm-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.fmm-checks li { display: flex; gap: 10px; font-size: 14px; color: var(--fmm-text); }
.fmm-checks svg { color: var(--fmm-yellow-dark); flex-shrink: 0; margin-top: 4px; }

.fmm-note {
    display: flex; gap: 10px;
    background: #EFF6FF; border-radius: 10px;
    padding: 14px; margin-top: 16px;
    /* Pale blue panel, black copy. Other pages keep a blue icon; the product
       page turns that icon black too (rows 40 and 42). */
    font-size: 13px; font-weight: 600; line-height: 1.6; color: #111827;
}
/* Product page callouts keep the pale blue panel. The copy and the icon are black. */
.fmm-pdp .fmm-note,
.fmm-pdp .fmm-note span { color: #111827; }
.fmm-note svg { flex-shrink: 0; margin-top: 2px; color: #1D4ED8; }
.fmm-pdp .fmm-note svg { color: #111827; }

.fmm-readmore { color: var(--fmm-yellow-dark); font-weight: 700; font-size: 14px; }

/* buy box */
.fmm-buy__title { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 0 0 8px; }
.fmm-buy__cond { font-size: 13.5px; color: var(--fmm-muted); }
.fmm-buy__cond b { color: var(--fmm-text); font-weight: 600; }
.fmm-buy__price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.fmm-buy__price b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.fmm-buy__price s { font-size: 15px; color: var(--fmm-faint); }
.fmm-off-chip { background: #DCFCE7; color: #15803D; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }

.fmm-prot {
    position: relative;
    background: #FFF1D4;
    border-radius: 12px;
    padding: 12px;
    margin: 16px 0;
}
.fmm-prot__tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--fmm-dark); color: #fff;
    font-size: 9px; font-weight: 800; letter-spacing: .04em;
    padding: 5px 8px; border-radius: 5px;
}
.fmm-prot__tag svg { width: 14px; height: 14px; }
.fmm-prot__title { font-size: 14px; line-height: 1.3; font-weight: 800; letter-spacing: 0; margin: 8px 0 4px; }
.fmm-prot__text { font-size: 11px; line-height: 1.45; color: #4B5563; margin: 0 0 10px; }
.fmm-prot__check {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; display: grid; place-items: center; color: var(--fmm-yellow);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
}
.fmm-prot__check svg { width: 17px; height: 17px; }
.fmm-prot .fmm-btn--sm { gap: 6px; min-height: 28px; padding: 5px 10px; border-radius: 999px; font-size: 10px; }

.fmm-opt__label { font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.fmm-opt__label--caps { text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; color: var(--fmm-muted); }
.fmm-opt__row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.fmm-opt__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--fmm-border); border-radius: 10px;
    background: #fff; font-size: 14px; font-weight: 600;
}
.fmm-opt__btn.is-active { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }
.fmm-opt__btn:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.fmm-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); }

.fmm-btn--block { width: 100%; justify-content: center; }
.fmm-btn--soft { background: var(--fmm-yellow-soft); color: var(--fmm-dark); }
.fmm-btn--soft:hover { background: #FDEDC8; }
.fmm-btn--sm { padding: 9px 16px; font-size: 13px; }
.fmm-buy__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.fmm-pdp__aside > .fmm-panel:first-child > .fmm-btn--block { min-height: 48px; border-radius: 8px; font-size: 13px; }
.fmm-pdp__aside > .fmm-panel:first-child .fmm-buy__row .fmm-btn { min-height: 36px; padding: 8px 12px; border-radius: 8px; font-size: 11px; }
.fmm-btn:disabled { opacity: .55; cursor: not-allowed; }

/* seller strip */
.fmm-seller { display: flex; align-items: center; gap: 12px; }
.fmm-seller__av {
    width: 46px; height: 46px; border-radius: 50%;
    object-fit: cover; background: var(--fmm-bg-alt); flex-shrink: 0;
    display: grid; place-items: center; font-weight: 700; color: var(--fmm-muted);
}
.fmm-seller__name { font-size: 15px; font-weight: 700; }
.fmm-seller__rate { font-size: 12.5px; color: var(--fmm-muted); display: flex; align-items: center; gap: 4px; }
.fmm-seller__rate svg { color: var(--fmm-yellow); }
.fmm-seller .fmm-btn { margin-left: auto; }

/* quick questions */
/* Compact question pills that wrap naturally when a backend label is longer. */
.fmm-qq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fmm-qq__btn {
    display: flex; align-items: center; gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: var(--fmm-pdp-question-height);
    padding: 7px 12px;
    border: 1px solid var(--fmm-border); border-radius: 999px;
    background: #fff; font: inherit; font-size: 11px; font-weight: 400;
    text-align: left; white-space: nowrap; cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.fmm-qq__btn:hover:not(:disabled) { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }
.fmm-qq__btn--wide { margin-right: 100%; }
.fmm-qq__label { flex: 1; min-width: 0; line-height: 1.35; }
.fmm-qq__icon { display: block; width: auto; height: var(--fmm-pdp-question-icon-height); max-width: 18px; flex: none; object-fit: contain; }
/* Right-aligned status; empty until the row is sending or sent, so it takes no
   space in the default state. */
.fmm-qq__state {
    flex-shrink: 0; font-size: 11.5px; font-weight: 700;
    color: var(--fmm-muted); white-space: nowrap;
}
.fmm-qq__btn:disabled { cursor: default; }
.fmm-qq__btn.is-asked {
    background: #F3FBF6; border-color: #BBE7CD;
}
.fmm-qq__btn.is-asked .fmm-qq__label { color: var(--fmm-muted); }
.fmm-qq__btn.is-asked .fmm-qq__state { color: #15803D; }

/* totals */
.fmm-tot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.fmm-tot__k { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fmm-faint); }
.fmm-tot__v { font-size: 24px; font-weight: 800; display: block; margin-top: 4px; }
.fmm-tot__v--sm { font-size: 18px; }
.fmm-ship { display: flex; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fmm-border); }
.fmm-ship__ic {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--fmm-yellow-soft);
    display: grid; place-items: center;
}
.fmm-ship .fmm-ship__ic { color: #FFC130; }
.fmm-ship b { font-size: 13.5px; display: block; }
.fmm-ship span { font-size: 12.5px; color: var(--fmm-muted); line-height: 1.6; }

@media (max-width: 980px) {
    .fmm-pdp { grid-template-columns: 1fr; }
    .fmm-pdp__aside { position: static; }
}
@media (max-width: 560px) {
    .fmm-gal { grid-template-columns: 1fr; }
    .fmm-gal__thumbs { grid-auto-flow: column; grid-auto-columns: 64px; overflow-x: auto; }
    .fmm-gal__thumb { width: 64px; height: 64px; }
    .fmm-qq { gap: 10px; }
}

/* --- storefront ----------------------------------------------------------- */
.fmm-store__hero {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    overflow: hidden;
    margin-bottom: 28px;
}
.fmm-store__hero-top { min-height: 128px; padding: 26px 28px 20px; display: flex; gap: 22px; align-items: flex-start; background: linear-gradient(100deg, #FFF6D9, #FFFDF6 70%, #fff); }
.fmm-store__avwrap { position: relative; flex-shrink: 0; }
.fmm-store__av {
    width: 84px; height: 84px; border-radius: 50%;
    object-fit: cover; background: #fff;
    display: grid; place-items: center;
    font-size: 28px; font-weight: 800; color: var(--fmm-muted);
    border: 3px solid #fff; box-shadow: var(--fmm-shadow);
}
.fmm-store__tick {
    position: absolute; right: 2px; bottom: 2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--fmm-teal); color: #fff;
    border: 2px solid #fff;
    display: grid; place-items: center;
}
.fmm-store__identity { min-width: 0; }.fmm-store__name { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.fmm-store__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--fmm-muted); }
.fmm-store__meta svg { color: var(--fmm-yellow); }
.fmm-store__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fmm-store__chips .fmm-chip { gap: 3px; }
.fmm-store__chips .fmm-chip svg { width: 17px; height: 17px; flex: none; }
.fmm-store__description { padding: 22px 32px 26px; background: #fff; border-top: 1px solid rgba(255,255,255,.65); }
.fmm-store__bio { font-size: 16px; line-height: 1.55; color: var(--fmm-text); margin: 0; max-width: 760px; }
.fmm-store__cta { margin-left: auto; flex-shrink: 0; }
.fmm-store__cta .fmm-btn { min-width: 164px; min-height: 44px; justify-content: center; border-radius: 12px; font-size: 14px; font-weight: 800; }

.fmm-chip--blue { background: #DBEAFE; color: #1D4ED8; border-color: transparent; }
.fmm-chip--amber { background: var(--fmm-yellow-soft); color: #8A6100; border-color: transparent; }
.fmm-chip--response { background: #F1ECFF; color: #6D3CF6; border-color: transparent; }

.fmm-tabs {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-bottom: 18px; border-bottom: 1px solid var(--fmm-border);
    margin-bottom: 20px;
}
/* The tab row scrolls INSIDE itself. Five tabs are ~668px wide, which pushed
   the whole page to a horizontal scroll on a phone. A tab strip should not
   wrap — it should scroll — so the row is its own scroll container. */
/* A pill group on a grey track, per the design — the active tab is a raised
   white pill rather than a tinted rectangle. */
.fmm-tabs__list {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--fmm-bg-alt, #f4f4f5);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fmm-tabs__list::-webkit-scrollbar { display: none; }
.fmm-tab { flex: 0 0 auto; white-space: nowrap; }
/*
 * Scoped to the tab strip on purpose.
 *
 * `.fmm-tab` is declared a second time further down for the orders tab
 * component, with `background: none`. Same specificity, later in the file, so
 * it won — the active pill rendered transparent. Qualifying with the parent
 * beats it without touching the orders rule.
 */
.fmm-tabs__list .fmm-tab {
    padding: 8px 20px; border-radius: 999px;
    font-size: 14px; font-weight: 600; color: var(--fmm-muted);
}
.fmm-tabs__list .fmm-tab:hover { color: var(--fmm-text); }
.fmm-tabs__list .fmm-tab--on {
    background: #fff;
    color: var(--fmm-text);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.fmm-tabs__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.fmm-chipnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
/* `button` as well as `a`: a chip that changes a filter in place is a button,
   and the notifications chips became one — styling only `a` left them looking
   like default form controls. */
.fmm-chipnav a,
.fmm-chipnav button {
    display: inline-flex; align-items: center;
    border: 1px solid var(--fmm-border); border-radius: 999px;
    padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--fmm-text); background: #fff; cursor: pointer;
}
.fmm-chipnav a:hover,
.fmm-chipnav button:hover { border-color: var(--fmm-faint); }
.fmm-chipnav a.is-on,
.fmm-chipnav button.is-on { background: var(--fmm-dark); border-color: var(--fmm-dark); color: #fff; }

.fmm-prose { font-size: 14.5px; line-height: 1.85; color: var(--fmm-muted); max-width: 720px; }
.fmm-prose h1, .fmm-prose h2, .fmm-prose h3, .fmm-prose h4 { font-weight: 800; color: var(--fmm-text); margin: 26px 0 8px; }
.fmm-prose h1 { font-size: 28px; }
.fmm-prose h2 { font-size: 22px; }
.fmm-prose h3 { font-size: 16px; }
.fmm-prose h4 { font-size: 15px; }
/* Long-form legal pages (cookies, buyer/seller agreements) are the first prose
   in here to use lists and inline emphasis, so they get styled rather than
   falling back to the browser defaults, which do not match the type scale. */
.fmm-prose p { margin: 0 0 12px; }
.fmm-prose ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; }
.fmm-prose li { padding-left: 2px; }
.fmm-prose li::marker { color: var(--fmm-faint); }
.fmm-prose strong { color: var(--fmm-text); font-weight: 700; }
.fmm-prose a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fmm-prose a:hover { color: var(--fmm-text); }
.fmm-prose ol { margin: 0 0 14px; padding-left: 20px; }
.fmm-prose img, .fmm-prose video { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 0 16px; }
.fmm-prose figure { margin: 0 0 16px; }
.fmm-prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; margin: 0 0 16px; }
.fmm-prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.fmm-prose th, .fmm-prose td { border: 1px solid var(--fmm-border); padding: 8px 10px; text-align: left; }

.fmm-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 24px 0; }
.fmm-stat { border: 1px solid var(--fmm-border); border-radius: 12px; padding: 18px; }
.fmm-stat b { display: block; font-size: 22px; font-weight: 800; }
.fmm-stat span { font-size: 12.5px; color: var(--fmm-muted); }

.fmm-review { border-bottom: 1px solid var(--fmm-border); padding: 20px 0; display: flex; gap: 14px; }
.fmm-review:last-child { border-bottom: 0; }
.fmm-review__av {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--fmm-bg-alt); object-fit: cover;
    display: grid; place-items: center; font-weight: 700; color: var(--fmm-muted);
}
.fmm-review__stars { color: var(--fmm-yellow); display: flex; gap: 2px; }
.fmm-review__body { font-size: 14px; line-height: 1.7; color: var(--fmm-muted); margin: 8px 0 0; }

@media (max-width: 720px) {
    .fmm-store__hero-top { flex-direction: column; }
    .fmm-store__cta { margin-left: 0; }
}

/* --- cart ----------------------------------------------------------------- */
[x-cloak] { display: none !important; }

.fmm-cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.fmm-cart__summary { position: sticky; top: 24px; }

/* Compact order summary — this is a transaction total, not a general content
   panel. The smaller type and dense rhythm mirror the checkout design while
   keeping the existing live calculation and out-of-stock behaviour intact. */
.fmm-cart__summary {
    padding: 16px;
    border-radius: 12px;
}
.fmm-cart__summary-title {
    margin: 0 0 13px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
}
.fmm-cart__summary .fmm-sumrow {
    padding: 5px 0;
    font-size: 11px;
    line-height: 1.45;
}
.fmm-cart__summary .fmm-sumrow--total {
    margin-top: 8px;
    padding-top: 11px;
    font-size: 12px;
}
.fmm-cart__summary .fmm-sumrow--total b { font-size: 20px; }
.fmm-cart__summary-note {
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.45;
    color: var(--fmm-muted);
}
.fmm-cart__checkout {
    min-height: 35px;
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
}
.fmm-cart__checkout svg { width: 13px; height: 13px; }
.fmm-cart__protection {
    margin: 12px 0 0;
    padding: 10px;
    border-radius: 6px;
    background: #F8FAFC;
}
.fmm-cart__protection p {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
}
.fmm-cart__protection svg { width: 13px; height: 13px; }
.fmm-cart__summary .fmm-paymarks {
    justify-content: center;
    gap: 10px;
    margin-top: 13px;
}
.fmm-cart__summary .fmm-paymarks img {
    display: block;
    width: 26px;
    height: 18px;
    object-fit: contain;
}
.fmm-cart__summary .fmm-paymarks .fmm-paymarks__apple {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #6B7280;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}
.fmm-paymarks__apple svg { width: 10px; height: 12px; fill: currentColor; }

/* bulk selection bar */
.fmm-cart__bulk {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--fmm-border); border-radius: 12px;
    margin-bottom: 14px;
}
.fmm-cart__bulkacts { display: flex; gap: 16px; }
.fmm-cart__bulkacts button {
    background: none; border: 0; padding: 0;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--fmm-yellow-dark); text-decoration: underline;
}
.fmm-cart__bulkacts button:disabled { color: var(--fmm-faint); text-decoration: none; cursor: not-allowed; }

.fmm-line__pick { display: flex; align-items: flex-start; padding-top: 4px; }
.fmm-line__pick input { accent-color: var(--fmm-yellow); width: 17px; height: 17px; }

.fmm-line__plat {
    position: absolute; top: 8px; left: 8px;
    background: #fff; border-radius: 6px;
    padding: 2px 6px;
    font-size: 10px; font-weight: 800; color: var(--fmm-text);
    box-shadow: var(--fmm-shadow);
}
.fmm-line__price-inline { display: block; font-size: 19px; font-weight: 800; margin-top: 8px; }
.fmm-line__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.fmm-line__bin {
    background: none; border: 0; padding: 4px;
    color: var(--fmm-faint); line-height: 0;
}
.fmm-line__bin:hover:not(:disabled) { color: #B91C1C; }

.fmm-line {
    display: grid; grid-template-columns: auto 104px minmax(0, 1fr) auto; gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--fmm-border);
    transition: opacity .15s;
}
.fmm-line__thumb { position: relative; }
.fmm-line:first-child { border-top: 1px solid var(--fmm-border); }
.fmm-line.is-busy { opacity: .5; pointer-events: none; }

.fmm-line__thumb {
    width: 104px; height: 104px;
    border-radius: 10px; overflow: hidden;
    background: var(--fmm-bg-alt);
    display: block;
}
.fmm-line__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-line__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fmm-line__title { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 0; }
.fmm-line__meta { font-size: 12.5px; color: var(--fmm-muted); margin: 0; }
.fmm-line__oos { font-size: 12.5px; font-weight: 700; color: #B91C1C; margin: 0; }
.fmm-line__foot { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 8px; }

.fmm-qty { display: inline-flex; align-items: center; border: 1px solid var(--fmm-border); border-radius: 9px; overflow: hidden; }
.fmm-qty button {
    width: 34px; height: 34px; border: 0; background: #fff;
    font-size: 17px; font-weight: 700; color: var(--fmm-text); line-height: 1;
}
.fmm-qty button:hover:not(:disabled) { background: var(--fmm-bg-alt); }
.fmm-qty button:disabled { opacity: .35; cursor: not-allowed; }
.fmm-qty span { min-width: 38px; text-align: center; font-size: 14px; font-weight: 700; }

.fmm-line__remove { background: none; border: 0; padding: 0; font-size: 13px; color: var(--fmm-muted); text-decoration: underline; }
.fmm-line__remove:hover:not(:disabled) { color: #B91C1C; }
.fmm-photo-preview { position:relative; display:inline-flex; width:74px; height:74px; }
.fmm-photo-remove { position:absolute; top:-8px; right:-8px; z-index:2; width:22px; height:22px; padding:0; border:1px solid var(--fmm-border); border-radius:50%; background:#fff; color:#B91C1C; font-size:16px; line-height:18px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.fmm-photo-remove:hover { background:#B91C1C; color:#fff; }
.fmm-drop.is-dragging, .fmm-upload-box.is-dragging { border-color:var(--fmm-yellow); background:var(--fmm-yellow-soft); }

.fmm-line__price { text-align: right; white-space: nowrap; }
.fmm-line__price b { font-size: 17px; font-weight: 800; display: block; }
.fmm-line__price span { font-size: 12px; color: var(--fmm-muted); }

.fmm-sumrow { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 7px 0; color: var(--fmm-muted); }
.fmm-sumrow b { color: var(--fmm-text); font-weight: 700; }
.fmm-sumrow--total {
    margin-top: 10px; padding-top: 16px;
    border-top: 1px solid var(--fmm-border);
    font-size: 16px; color: var(--fmm-text); font-weight: 700;
}
.fmm-sumrow--total b { font-size: 21px; font-weight: 800; }

/* --- checkout chrome ------------------------------------------------------ */
.fmm-header--bare .fmm-header__bar { justify-content: space-between; }
.fmm-header__secure {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 17px; font-weight: 700; color: #fff;
}

.fmm-back {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 600; color: var(--fmm-muted);
    margin-bottom: 18px;
}
.fmm-back:hover { color: var(--fmm-text); }

/* Cart → Review → Payment */
.fmm-steps { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
.fmm-steps li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fmm-faint); }
.fmm-steps__n {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--fmm-border); color: var(--fmm-muted);
    font-size: 12px; font-weight: 800;
}
.fmm-steps .is-done { color: var(--fmm-teal); }
.fmm-steps .is-done .fmm-steps__n { background: var(--fmm-teal); color: #fff; }
.fmm-steps .is-now { color: var(--fmm-text); font-weight: 700; }
.fmm-steps .is-now .fmm-steps__n { background: var(--fmm-yellow); color: var(--fmm-dark); }

/* escrow reassurance banner */
.fmm-protbar {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--fmm-teal-soft);
    border-radius: 12px; padding: 15px 18px;
    margin-bottom: 22px;
    color: #0F766E;
}
.fmm-protbar svg { flex-shrink: 0; margin-top: 1px; }
.fmm-protbar b { display: block; font-size: 14px; }
.fmm-protbar span span { font-size: 13px; line-height: 1.6; }
.fmm-protbar--ok { background:#E8F8EE; color:#178A45; }
.fmm-protbar--warn { background:#FFF6DE; color:#8A6100; }
.fmm-protbar--warn b { font-size:12px; letter-spacing:.04em; text-transform:uppercase; }

/* what next */
.fmm-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fmm-next li { display: flex; gap: 12px; }
.fmm-next__n {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--fmm-yellow); color: var(--fmm-dark);
    display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
}
.fmm-next b { display: block; font-size: 13.5px; }
.fmm-next span span { font-size: 12.5px; color: var(--fmm-muted); line-height: 1.5; }

/* --- checkout ------------------------------------------------------------- */
.fmm-step__title { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; margin: 0 0 18px; }
.fmm-step__n {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--fmm-yellow); color: var(--fmm-dark);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 800; flex-shrink: 0;
}

.fmm-radio {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid var(--fmm-border); border-radius: 11px;
    padding: 14px 16px; cursor: pointer;
}
.fmm-radio + .fmm-radio { margin-top: 10px; }
.fmm-radio:hover { border-color: var(--fmm-faint); }
.fmm-radio:has(input:checked) { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }
.fmm-radio.is-disabled { opacity: .5; cursor: not-allowed; }
.fmm-radio input { margin-top: 3px; accent-color: var(--fmm-yellow); width: 16px; height: 16px; flex-shrink: 0; }
.fmm-radio > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fmm-radio b { font-size: 14px; font-weight: 700; }
.fmm-radio span span { font-size: 12.5px; color: var(--fmm-muted); line-height: 1.5; }

/* Checkout payment picker: payment rails and saved cards share the existing
   accessible radio controls, but read as a deliberately ordered payment flow. */
.fmm-payment-design { display: grid; gap: 18px; }
.fmm-payment-design .fmm-radio {
    position: relative;
    min-height: 68px;
    margin: 0;
    padding: 14px 44px 14px 16px;
    border-radius: 12px;
    border-color: #e4e7ec;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.fmm-payment-design .fmm-radio:hover {
    border-color: #c7ccd5;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .05);
}
.fmm-payment-design .fmm-radio:has(input:checked) {
    border-color: #f5ad00;
    background: #fffaf0;
    box-shadow: 0 0 0 3px rgba(245, 173, 0, .12);
}
.fmm-payment-design .fmm-radio:has(input:checked)::after {
    content: "✓";
    position: absolute;
    right: 15px;
    top: 50%;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #f5ad00;
    color: #182230;
    font-size: 12px;
    font-weight: 900;
}
.fmm-payment-design .fmm-radio input { margin-top: 1px; }
.fmm-payment-design .fmm-radio b { font-size: 14px; }
.fmm-payment-design .fmm-radio > span { gap: 2px; }
.fmm-payment-design .fmm-radio + .fmm-radio { margin-top: 10px; }

/* Marketplace checkout: FlymyMall is a shipping option with a second,
   dependent choice (door delivery or office collection). Keeping the second
   choice visually nested prevents it being mistaken for another courier. */
.fmm-radio--flymymall { border-color: var(--fmm-yellow); }
.fmm-flymymall-mode {
    margin: 10px 0 14px 28px; padding: 14px;
    border-left: 3px solid var(--fmm-yellow); border-radius: 0 10px 10px 0;
    background: var(--fmm-bg-alt);
}
.fmm-flymymall-mode .fmm-radio { background: #fff; }

@media (max-width: 560px) {
    .fmm-flymymall-mode { margin-left: 12px; padding: 12px; }
}

/* What a paid verification tier actually checks, listed under its description. */
.fmm-radio__checks { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.fmm-radio__checks em { font-style: normal; font-size: 12px; color: var(--fmm-muted); padding-left: 13px; position: relative; line-height: 1.5; }
.fmm-radio__checks em::before { content: "✓"; position: absolute; left: 0; color: var(--fmm-yellow); font-weight: 700; }

.fmm-check { display: flex; align-items: center; gap: 9px; font-size: 13px; margin-top: 14px; cursor: pointer; }
.fmm-check input { accent-color: var(--fmm-yellow); width: 15px; height: 15px; }

.fmm-return-accept-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    flex: 0 0 15px;
    margin: 0;
    border: 1px solid var(--fmm-border);
    border-radius: 3px;
    background: #fff;
}
.fmm-return-accept-toggle input[type="checkbox"]:checked {
    border-color: var(--fmm-yellow);
    background: var(--fmm-yellow);
}
.fmm-return-accept-toggle input[type="checkbox"]:checked::after {
    width: 7px;
    height: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    content: "";
    transform: rotate(-45deg) translateY(-1px);
}
.fmm-return-accept-toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--fmm-yellow);
    outline-offset: 2px;
}

/* Listing return override: keep the amber control, but draw the checkmark
   ourselves so it stays white and legible across browsers. */
.listing-return-postage-toggle { gap:12px; }
.listing-return-postage-toggle input[type="checkbox"] {
    appearance:none;
    -webkit-appearance:none;
    display:grid;
    place-content:center;
    flex:0 0 16px;
    width:16px;
    height:16px;
    margin:0;
    border:1px solid var(--fmm-border);
    border-radius:3px;
    background:#fff;
    cursor:pointer;
}
.listing-return-postage-toggle input[type="checkbox"]:checked {
    border-color:var(--fmm-yellow);
    background:var(--fmm-yellow);
}
.listing-return-postage-toggle input[type="checkbox"]:checked::after {
    content:"";
    width:8px;
    height:4px;
    border:2px solid #fff;
    border-top:0;
    border-right:0;
    transform:rotate(-45deg) translateY(-1px);
}
.listing-return-postage-toggle input[type="checkbox"]:focus-visible {
    outline:2px solid var(--fmm-yellow);
    outline-offset:2px;
}
.listing-return-reasons { display:grid; gap:14px; }
.listing-return-reason {
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px;
    align-items:center;
    gap:18px;
    margin:0;
}
@media (max-width:520px) {
    .listing-return-reason { grid-template-columns:1fr; gap:7px; }
}

.fmm-card-el {
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 14px 14px;
    background: #fff;
}

.fmm-form__err { font-size: 13px; color: #B91C1C; font-weight: 600; margin: 10px 0 0; }

/* --- orders --------------------------------------------------------------- */
.fmm-tab { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; }
.fmm-tab__count {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--fmm-border); color: var(--fmm-text);
    font-size: 11px; font-weight: 800;
}
.fmm-tab--on .fmm-tab__count { background: var(--fmm-yellow); }

.fmm-order { border: 1px solid var(--fmm-border); border-radius: 14px; overflow: hidden; }
.fmm-order__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; background: var(--fmm-bg-alt);
    border-bottom: 1px solid var(--fmm-border);
}
.fmm-order__num { font-size: 13.5px; font-weight: 700; }
.fmm-order__when { font-size: 12.5px; color: var(--fmm-muted); margin-left: 10px; }

.fmm-order__body { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; padding: 18px; }
.fmm-order__thumb {
    width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
    background: var(--fmm-bg-alt); display: block;
}
.fmm-order__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fmm-order__title { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 0 0 6px; }
.fmm-order__price { text-align: right; white-space: nowrap; }
.fmm-order__price b { font-size: 17px; font-weight: 800; }

.fmm-order__foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 14px 18px; border-top: 1px solid var(--fmm-border);
}

.fmm-chip--danger { background: #FEE2E2; color: #B91C1C; border-color: transparent; }

/* --- private listing ------------------------------------------------------ */
.fmm-privbar {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    background: var(--fmm-yellow-soft); color: #8A6100;
    border-radius: 10px; padding: 12px 18px; margin-bottom: 22px;
    font-size: 13.5px; font-weight: 600;
}
.fmm-privbar.is-urgent { background: #FEE2E2; color: #B91C1C; }
.fmm-privbar__time {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border-radius: 999px; padding: 5px 12px;
    font-size: 12.5px; font-weight: 700;
}

/* --- no results ----------------------------------------------------------- */
.fmm-noresults { text-align: center; padding: 56px 24px; }
.fmm-noresults__icon {
    width: 72px; height: 72px; margin: 0 auto 22px;
    border-radius: 50%; background: var(--fmm-bg-alt); color: var(--fmm-faint);
    display: grid; place-items: center;
}
.fmm-noresults h2 { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.fmm-noresults p { font-size: 14.5px; line-height: 1.7; color: var(--fmm-muted); margin: 0 auto 24px; max-width: 420px; }
.fmm-noresults__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- disputes ------------------------------------------------------------- */
.fmm-infobar {
    display: flex; align-items: flex-start; gap: 11px;
    background: #EFF6FF; color: #1D4ED8;
    border-radius: 10px; padding: 13px 16px; margin-bottom: 22px;
    font-size: 13.5px; line-height: 1.55;
}
.fmm-infobar svg { flex-shrink: 0; margin-top: 1px; }
.fmm-infobar--warn { background: var(--fmm-yellow-soft); color: #8A6100; }

/* stage list inside the dark dispute card */
.fmm-dstages { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; position: relative; }
.fmm-dstages li {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; color: rgba(255, 255, 255, .45);
    position: relative;
}
.fmm-dstages li:not(:last-child)::after {
    content: ""; position: absolute; left: 8px; top: 20px; height: 16px;
    width: 2px; background: rgba(255, 255, 255, .2);
}
.fmm-dstages__dot {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .3); position: relative; z-index: 1;
}
.fmm-dstages li.done { color: #fff; }
.fmm-dstages li.done .fmm-dstages__dot { background: var(--fmm-yellow); border-color: var(--fmm-yellow); }
.fmm-dstages li.now { color: var(--fmm-yellow); font-weight: 700; }
.fmm-dstages li.now .fmm-dstages__dot {
    border-color: var(--fmm-yellow);
    box-shadow: inset 0 0 0 3px var(--fmm-dark), inset 0 0 0 9px var(--fmm-yellow);
}

/* --- notifications + help ------------------------------------------------- */
.fmm-notif {
    display: flex; align-items: flex-start; gap: 14px;
    width: 100%; text-align: left;
    padding: 16px 18px; border: 0; border-bottom: 1px solid var(--fmm-border);
    background: #fff; font: inherit;
}
.fmm-notif:last-child { border-bottom: 0; }
.fmm-notif:hover { background: var(--fmm-bg-alt); }
.fmm-notif.is-unread { background: var(--fmm-yellow-soft); }
.fmm-notif.is-busy { opacity: .5; }
.fmm-notif b { display: block; font-size: 14px; }
.fmm-notif__body { display: block; font-size: 13px; color: var(--fmm-muted); line-height: 1.55; margin-top: 3px; }
.fmm-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex-shrink: 0; margin-top: 6px; }
.fmm-notif__dot.is-on { background: var(--fmm-yellow); }

.fmm-helphero { text-align: center; padding: 28px 0 40px; }
.fmm-helphero h1 { font-size: 32px; font-weight: 800; margin: 0 0 10px; letter-spacing: -.02em; }
.fmm-helphero p { font-size: 15px; color: var(--fmm-muted); margin: 0; }

/* --- offer detail --------------------------------------------------------- */
.fmm-offer__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.fmm-offer__fact {
    border: 1px solid var(--fmm-border); border-radius: 12px;
    padding: 14px 16px; display: grid; gap: 4px;
}
.fmm-offer__fact--warm { background: var(--fmm-yellow-soft); border-color: transparent; }
.fmm-offer__fact b { font-size: 14.5px; }

.fmm-offer__note {
    background: var(--fmm-bg-alt); border-radius: 12px;
    padding: 16px; margin-top: 16px;
}
.fmm-offer__note p { font-size: 14px; line-height: 1.7; color: var(--fmm-muted); margin: 6px 0 0; font-style: italic; }

.fmm-offer__save {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--fmm-teal-soft); color: #0F766E;
    border-radius: 10px; padding: 14px 16px; margin-top: 14px;
    font-weight: 700; font-size: 14px;
}

@media (max-width: 620px) { .fmm-offer__facts { grid-template-columns: 1fr; } }

/* --- dispute tracking reference screen ---------------------------------- */
.fmm-dispute-page { padding-top: 18px; }
.fmm-dispute-shell { max-width: 920px; margin: 30px auto 60px; }
.fmm-dispute-heading { margin: 0 0 20px; }
.fmm-dispute-heading h1 { font-size: 28px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.025em; }
.fmm-dispute-heading p { margin: 0; color: var(--fmm-muted); font-size: 13px; }
.fmm-dispute-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(220px, .9fr); gap: 22px; align-items: start; }
.fmm-dispute-main { display: grid; gap: 12px; min-width: 0; }
.fmm-dispute-success { background: #fff; border: 1px solid var(--fmm-border); border-top: 2px solid var(--fmm-yellow); border-radius: 9px; min-height: 126px; padding: 17px 20px 15px; text-align: center; }
.fmm-dispute-success__icon { width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 7px; display: grid; place-items: center; color: #EAA900; background: #FFF3D8; }
.fmm-dispute-success__icon svg { width: 18px; height: 18px; }
.fmm-dispute-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 99px; color: #A76B00; background: #FFF7E5; font-size: 9px; font-weight: 700; }
.fmm-dispute-pill i { width: 4px; height: 4px; border-radius: 50%; background: #F4B000; }
.fmm-dispute-success h2 { font-size: 14px; margin: 8px 0 3px; }
.fmm-dispute-success p { color: var(--fmm-muted); font-size: 10.5px; line-height: 1.45; margin: 0; }
.fmm-dispute-summary { padding: 16px 18px 15px; }
.fmm-dispute-label { text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 800; margin: 0 0 12px; }
.fmm-dispute-product { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--fmm-border); }
.fmm-dispute-product__image { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 6px; background: #E8D9CE; flex-shrink: 0; }
.fmm-dispute-product__image img { width: 100%; height: 100%; object-fit: cover; }
.fmm-dispute-product b { display: block; font-size: 10.5px; line-height: 1.3; }
.fmm-dispute-product small { display: block; font-size: 8.5px; color: var(--fmm-text); margin-top: 3px; }
.fmm-dispute-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; padding-top: 12px; }
.fmm-dispute-facts div { display: grid; gap: 3px; min-width: 0; }
.fmm-dispute-facts span { color: var(--fmm-muted); font-size: 8px; }
.fmm-dispute-facts b { font-size: 9px; line-height: 1.25; }
.fmm-dispute-fact-right { text-align: right; }
.fmm-dispute-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fmm-dispute-lower-grid .fmm-panel { padding: 16px 14px; }
.fmm-dispute-status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fmm-dispute-status-list li { display: flex; align-items: flex-start; gap: 9px; color: var(--fmm-muted); font-size: 9px; position: relative; }
.fmm-dispute-status-list li:not(:last-child)::after { content: ''; position: absolute; width: 1px; height: 13px; left: 6px; top: 15px; background: var(--fmm-border); }
.fmm-dispute-status-dot { display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid var(--fmm-border); border-radius: 50%; color: #fff; font-size: 8px; flex-shrink: 0; background: #fff; z-index: 1; }
.fmm-dispute-status-list li.is-current { color: var(--fmm-text); }
.fmm-dispute-status-list li.is-current .fmm-dispute-status-dot { background: var(--fmm-yellow); border-color: var(--fmm-yellow); }
.fmm-dispute-status-list b, .fmm-dispute-status-list small { display: block; }
.fmm-dispute-status-list small, .fmm-dispute-event small { color: var(--fmm-muted); font-size: 8px; margin-top: 2px; }
.fmm-dispute-event { display: flex; gap: 8px; position: relative; padding-bottom: 10px; font-size: 9px; }
.fmm-dispute-event:not(:last-child)::after { content: ''; position: absolute; left: 3px; top: 9px; bottom: -1px; width: 1px; background: var(--fmm-border); }
.fmm-dispute-event__dot { width: 7px; height: 7px; margin-top: 2px; border-radius: 50%; background: var(--fmm-yellow); flex-shrink: 0; z-index: 1; }
.fmm-dispute-event b, .fmm-dispute-event small, .fmm-dispute-event p { display: block; }
.fmm-dispute-event p { margin: 6px 0 0; padding: 7px; border-radius: 5px; background: var(--fmm-bg-alt); font-size: 8px; line-height: 1.35; }
.fmm-dispute-next { padding: 13px 16px; border-radius: 8px; background: #FFF7E5; color: #4E3C16; font-size: 9px; }
.fmm-dispute-next h2 { font-size: 10px; margin: 0 0 8px; }
.fmm-dispute-next h2 span { color: var(--fmm-yellow); font-size: 8px; }
.fmm-dispute-next ul { margin: 0; padding-left: 14px; display: grid; gap: 5px; }
.fmm-dispute-actions { padding: 16px 14px; }
.fmm-dispute-actions h2 { font-size: 12px; margin: 0 0 16px; }
.fmm-dispute-action-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--fmm-border); font-size: 8px; }
.fmm-dispute-action-row b { padding: 3px 5px; border-radius: 3px; color: #A76B00; background: #FFF3D8; font-weight: 600; }
.fmm-dispute-action-row strong { font-size: 8px; }
.fmm-dispute-actions .fmm-btn { min-height: 30px; margin-top: 8px; font-size: 9px; }
.fmm-dispute-action-note { margin: 13px 0 0; padding-top: 10px; border-top: 1px solid var(--fmm-border); text-align: center; color: var(--fmm-faint); font-size: 7.5px; line-height: 1.4; }
@media (max-width: 720px) { .fmm-dispute-shell { margin-top: 20px; } .fmm-dispute-grid { grid-template-columns: 1fr; } .fmm-dispute-actions { order: -1; } }
@media (max-width: 480px) { .fmm-dispute-lower-grid { grid-template-columns: 1fr; } .fmm-dispute-heading h1 { font-size: 24px; } }

/* Dispute detail states: the confirmation card is intentionally not rendered
   after submission; the API status selects Under Review or Evidence Needed. */
.fmm-dispute-state-page { max-width: 920px; margin: 28px auto 60px; }
.fmm-dispute-state-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.fmm-dispute-state-head h1 { margin:0 0 5px; font-size:28px; letter-spacing:-.025em; }
.fmm-dispute-state-head p { margin:0; color:var(--fmm-muted); font-size:13px; }
.fmm-dispute-message { font-size:11px; padding:9px 13px; }
.fmm-dispute-state-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:22px; align-items:start; }
.fmm-dispute-state-main { display:grid; gap:12px; min-width:0; }
.fmm-dispute-notice { padding:9px 12px; border-radius:6px; color:#2866c7; background:#eaf3ff; font-size:10px; }
.fmm-dispute-notice--blue { color:#2866c7; }
.fmm-dispute-review-card { padding:19px 20px 22px; border-radius:9px; background:linear-gradient(120deg,#19191b,#252326); color:#fff; min-height:170px; }
.fmm-dispute-created-card { padding:28px 20px; border:1px solid var(--fmm-border); border-top:2px solid var(--fmm-yellow); border-radius:9px; background:#fff; text-align:center; }
.fmm-dispute-created-icon { width:38px; height:38px; margin:0 auto 9px; border-radius:50%; display:grid; place-items:center; color:#d99b00; background:#fff3d8; font-weight:800; }
.fmm-dispute-state-pill.created { background:#fff4dc; color:#9a6400; }
.fmm-dispute-created-card h2 { margin:12px 0 6px; font-size:17px; }
.fmm-dispute-created-card p { margin:0; color:var(--fmm-muted); font-size:10px; line-height:1.5; }
.fmm-dispute-state-pill { display:inline-flex; padding:4px 8px; border-radius:99px; background:#493d0b; color:#ffc21d; font-size:8px; font-weight:800; letter-spacing:.05em; }
.fmm-dispute-state-pill.evidence { background:#fff4dc; color:#9a6400; }
.fmm-dispute-review-card h2,.fmm-dispute-evidence-card h2 { margin:14px 0 7px; font-size:19px; }
.fmm-dispute-review-card p,.fmm-dispute-evidence-card p { max-width:470px; margin:0; color:#c7c5c8; font-size:10px; line-height:1.5; }
.fmm-review-stages { list-style:none; display:grid; gap:10px; padding:0; margin:18px 0 0; font-size:9px; }
.fmm-review-stages li { display:flex; align-items:center; gap:8px; color:#77757a; }
.fmm-review-stages li i { width:12px; height:12px; border:1px solid #555; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:7px; }
.fmm-review-stages li.done,.fmm-review-stages li.now { color:#fff; }.fmm-review-stages li.done i,.fmm-review-stages li.now i { background:#ffc21d; border-color:#ffc21d; color:#4d3c00; }.fmm-review-stages li.now { color:#ffc21d; font-weight:700; }
.fmm-review-stages li.now i { font-size:0; }.fmm-review-stages li.now i::after { content:'✓'; font-size:7px; }
.fmm-dispute-state-aside { padding:16px 14px; }.fmm-dispute-state-aside h2 { margin:0 0 14px; font-size:13px; }.fmm-dispute-state-aside > div { display:flex; justify-content:space-between; gap:8px; padding:9px 0; border-top:1px solid var(--fmm-border); font-size:9px; }.fmm-dispute-state-aside .amber { color:#9a6400; background:#fff4dc; padding:3px 5px; border-radius:3px; font-size:8px; }.fmm-dispute-state-aside .red { color:#d33; }.fmm-dispute-state-aside .fmm-btn { margin-top:9px; min-height:31px; font-size:9px; }
.fmm-dispute-item-card { padding:14px 16px; }.fmm-dispute-item-card .fmm-dispute-product { padding-bottom:10px; border-bottom:1px solid var(--fmm-border); }.fmm-dispute-item-card .fmm-dispute-product__image { width:58px; height:58px; }.fmm-dispute-item-card .fmm-dispute-product small { margin-top:4px; font-size:8px; }.fmm-dispute-type-row { display:flex; justify-content:space-between; padding-top:10px; font-size:9px; }.fmm-dispute-type-row b { color:#c55454; background:#ffe9e9; padding:3px 5px; border-radius:99px; font-size:8px; }
.fmm-dispute-details,.fmm-dispute-activity { padding:15px 16px; }.fmm-dispute-details h2,.fmm-dispute-activity h2,.fmm-requested h2 { font-size:11px; margin:0 0 12px; }.fmm-dispute-details > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--fmm-border); font-size:9px; }.fmm-dispute-details b { text-align:right; }.fmm-dispute-details span,.fmm-dispute-activity small { color:var(--fmm-muted); }
.fmm-dispute-activity-row { display:flex; gap:9px; position:relative; padding:0 0 12px; font-size:9px; }.fmm-dispute-activity-row:not(:last-child)::after { content:''; position:absolute; left:3px; top:8px; bottom:-2px; width:1px; background:var(--fmm-border); }.fmm-dispute-activity-row i { width:7px; height:7px; margin-top:2px; border-radius:50%; background:var(--fmm-yellow); z-index:1; flex-shrink:0; }.fmm-dispute-activity-row b,.fmm-dispute-activity-row small,.fmm-dispute-activity-row p { display:block; }.fmm-dispute-activity-row p { margin:3px 0 0; color:var(--fmm-muted); }
.fmm-dispute-evidence-card { border-left:3px solid var(--fmm-yellow); padding:20px; }.fmm-dispute-evidence-card p { color:var(--fmm-text); }.fmm-dispute-warning { margin-top:15px; padding:10px; border-radius:5px; background:#fff0f0; color:#d33; font-size:9px; }.fmm-requested { padding:16px; }.fmm-requested > p { margin:-8px 0 12px; font-size:9px; }.fmm-example-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.fmm-example-grid button { min-height:54px; border:1px solid var(--fmm-border); border-radius:6px; background:#fafbfc; font-size:15px; }.fmm-example-grid button.is-requested { border:2px solid var(--fmm-text); background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.05); }.fmm-example-grid small { display:block; margin-top:6px; font-size:7px; }.fmm-upload-box { min-height:130px; margin-top:13px; border:1px dashed #cbd2dc; border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--fmm-faint); font-size:20px; }.fmm-upload-box b { color:var(--fmm-text); font-size:11px; }.fmm-upload-box span,.fmm-upload-box small { font-size:8px; }.fmm-upload-box button { padding:6px 10px; border:1px solid var(--fmm-border); border-radius:5px; background:#fff; font-size:8px; }
.fmm-evidence-upload-list { display:grid; gap:7px; margin-top:13px; }
.fmm-evidence-upload-item { display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid var(--fmm-border); border-radius:7px; background:#fff; }
.fmm-evidence-upload-preview { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; overflow:hidden; border-radius:5px; background:#f2f3f5; color:var(--fmm-muted); font-size:16px; }
.fmm-evidence-upload-preview img { width:100%; height:100%; object-fit:cover; }
.fmm-evidence-upload-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fmm-text); font-size:9px; font-weight:700; }
.fmm-evidence-upload-name small { display:block; margin-top:3px; color:var(--fmm-muted); font-size:8px; font-weight:400; }
.fmm-evidence-upload-remove { width:22px; height:22px; flex:0 0 22px; border:0; border-radius:50%; background:#ffe8e8; color:#c33; font-size:17px; line-height:20px; cursor:pointer; }
@media (max-width:720px) { .fmm-dispute-state-grid { grid-template-columns:1fr; }.fmm-dispute-state-aside { order:-1; }.fmm-dispute-state-head { align-items:flex-start; flex-direction:column; }.fmm-dispute-message { align-self:flex-end; } }
@media (max-width:480px) { .fmm-example-grid { grid-template-columns:repeat(2,1fr); } }
.fmm-requested > p.is-admin-request { color:var(--fmm-text); font-weight:700; }
.fmm-example-grid button.is-selected { border:2px solid var(--fmm-yellow); background:var(--fmm-yellow-soft); box-shadow:0 0 0 1px rgba(255,194,29,.2); }
.fmm-evidence-status-card { padding:16px; }
.fmm-evidence-status-card h2 { margin:0 0 12px; font-size:11px; }
.fmm-evidence-status-list { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.fmm-evidence-status-list li { position:relative; display:flex; gap:9px; align-items:flex-start; min-height:34px; color:var(--fmm-muted); font-size:9px; }
.fmm-evidence-status-list li:not(:last-child)::after { content:''; position:absolute; left:6px; top:14px; bottom:0; width:1px; background:var(--fmm-border); }
.fmm-evidence-status-list li i { position:relative; z-index:1; width:12px; height:12px; flex:0 0 12px; border:1px solid #bfc5cc; border-radius:50%; background:#fff; display:grid; place-items:center; font-style:normal; font-size:7px; }
.fmm-evidence-status-list li.done,.fmm-evidence-status-list li.now { color:var(--fmm-text); }
.fmm-evidence-status-list li.done i,.fmm-evidence-status-list li.now i { border-color:var(--fmm-yellow); background:var(--fmm-yellow); color:#4d3c00; font-weight:800; }
.fmm-evidence-status-list li.now b { font-weight:800; }
.fmm-evidence-status-list small { display:block; margin-top:3px; color:var(--fmm-muted); font-size:8px; }
.fmm-evidence-status-list li.now small { color:#b47a00; font-weight:700; }
.fmm-dispute-resolved-card { padding:26px 20px; border:1px solid #d9eadb; border-top:3px solid #3ca35b; border-radius:9px; background:#fff; text-align:center; }
.fmm-dispute-resolved-icon { width:40px; height:40px; margin:0 auto 9px; border-radius:50%; display:grid; place-items:center; color:#23783b; background:#e5f6e8; font-weight:800; font-size:18px; }
.fmm-dispute-state-pill.resolved { background:#e5f6e8; color:#23783b; }
.fmm-dispute-resolved-card h2 { margin:12px 0 7px; font-size:19px; }
.fmm-dispute-resolved-card p { max-width:520px; margin:0 auto; color:var(--fmm-muted); font-size:10px; line-height:1.5; }
.fmm-dispute-resolution-meta { display:flex; justify-content:center; gap:8px; margin-top:17px; font-size:9px; color:var(--fmm-muted); }.fmm-dispute-resolution-meta strong { color:var(--fmm-text); }
.fmm-dispute-status-card { padding:16px; }.fmm-dispute-status-card h2 { margin:0 0 13px; font-size:11px; }
.fmm-resolved-stages { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0; padding:0; }.fmm-resolved-stages li { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; color:var(--fmm-muted); font-size:8px; }.fmm-resolved-stages li.done { color:var(--fmm-text); font-weight:700; }.fmm-resolved-stages i { width:19px; height:19px; display:grid; place-items:center; border-radius:50%; background:var(--fmm-yellow); color:#4d3c00; font-style:normal; font-size:10px; }
.fmm-dispute-state-aside .green { color:#23783b; background:#e5f6e8; padding:3px 5px; border-radius:3px; font-size:8px; }
@media (max-width:480px) { .fmm-resolved-stages { grid-template-columns:repeat(2,1fr); row-gap:14px; } }
.fmm-dispute-notice--yellow { color:#7b5a00; background:#fff6d9; }
.fmm-evidence-order-card { padding:11px 14px; }.fmm-evidence-order-card .fmm-dispute-product { border:0; padding:0; }.fmm-evidence-order-card .fmm-dispute-product__image { width:34px; height:34px; }.fmm-evidence-order-card .fmm-dispute-product b,.fmm-evidence-order-card .fmm-dispute-product small { display:block; margin-top:2px; font-size:8px; }.fmm-evidence-order-card .fmm-dispute-product small:first-child { color:var(--fmm-muted); font-weight:700; }
.fmm-dispute-evidence-received-card { min-height:145px; padding:22px 20px; border:1px solid var(--fmm-border); border-radius:9px; background:#fff; text-align:center; }.fmm-dispute-evidence-received-card .fmm-dispute-resolved-icon { color:#d99b00; background:#fff5dd; }.fmm-dispute-evidence-received-card h2 { margin:12px 0 7px; font-size:17px; }.fmm-dispute-evidence-received-card p { margin:0; color:var(--fmm-muted); font-size:10px; }
.fmm-resolution-progress { padding:16px; }.fmm-resolution-progress h2,.fmm-submitted-evidence-summary h2 { margin:0 0 13px; font-size:11px; }.fmm-received-stages { list-style:none; display:grid; gap:12px; margin:0; padding:0; }.fmm-received-stages li { display:flex; gap:9px; align-items:flex-start; color:var(--fmm-muted); font-size:9px; }.fmm-received-stages li.done,.fmm-received-stages li.now { color:var(--fmm-text); }.fmm-received-stages li.now { color:#b47a00; }.fmm-received-stages i { width:13px; height:13px; flex:0 0 13px; display:grid; place-items:center; border:1px solid #d1d6dc; border-radius:50%; color:#b8bec5; font-style:normal; font-size:8px; }.fmm-received-stages li.done i { border-color:var(--fmm-yellow); background:var(--fmm-yellow); color:#4d3c00; }.fmm-received-stages li.now i { border:2px solid var(--fmm-yellow); color:var(--fmm-yellow); }.fmm-received-stages small { display:block; margin-top:3px; color:var(--fmm-muted); font-size:8px; }
.fmm-evidence-lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.fmm-submitted-evidence-summary { min-height:125px; padding:16px; position:relative; }.fmm-submitted-evidence-summary > small { position:absolute; top:17px; right:15px; color:var(--fmm-muted); font-size:7px; }.fmm-evidence-counts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }.fmm-evidence-counts div { min-height:45px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:5px; background:#f4f5f7; }.fmm-evidence-counts b { font-size:14px; }.fmm-evidence-counts strong { font-size:8px; }
@media (max-width:480px) { .fmm-evidence-lower-grid { grid-template-columns:1fr; } }
.fmm-refund-approved-page { max-width:900px; margin:0 auto; }.fmm-refund-case-head { display:flex; justify-content:flex-end; gap:8px; align-items:center; margin-bottom:13px; color:var(--fmm-muted); font-size:8px; }.fmm-refund-case-head b { padding:3px 7px; border-radius:99px; background:#f0f1f3; color:#555; font-size:8px; }
.fmm-refund-approved-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:16px; align-items:start; }.fmm-refund-approved-main { display:grid; gap:13px; }.fmm-refund-success-card { padding:27px 20px; border-radius:9px; background:linear-gradient(135deg,#ffc849,#f2b328); text-align:center; }.fmm-refund-success-icon { width:42px; height:42px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#f0ae18; font-size:22px; font-weight:800; }.fmm-refund-success-card > span { display:inline-block; padding:4px 9px; border-radius:99px; background:#ffdf80; color:#7d5a00; font-size:8px; font-weight:700; }.fmm-refund-success-card h1 { margin:13px 0 7px; font-size:18px; }.fmm-refund-success-card p { margin:0; color:#6d4e00; font-size:10px; }
.fmm-refund-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.fmm-refund-journey,.fmm-refund-resolution { padding:16px; }.fmm-refund-journey h2,.fmm-refund-resolution h2 { margin:0 0 13px; font-size:11px; }.fmm-refund-journey ol { list-style:none; margin:0; padding:0; display:grid; gap:13px; }.fmm-refund-journey li { display:grid; grid-template-columns:14px 1fr; column-gap:8px; font-size:9px; }.fmm-refund-journey li i { grid-row:span 2; color:var(--fmm-yellow); font-style:normal; }.fmm-refund-journey li b { font-size:9px; }.fmm-refund-journey li small { color:var(--fmm-muted); font-size:8px; margin-top:3px; }.fmm-refund-resolution > div { display:flex; justify-content:space-between; gap:8px; padding:10px 0; border-top:1px solid var(--fmm-border); font-size:9px; }.fmm-refund-resolution > div span { color:var(--fmm-muted); }.fmm-refund-resolution b { padding:3px 5px; border-radius:3px; background:#d8fae9; color:#198754; font-size:8px; }.fmm-refund-resolution strong { text-align:right; }
.fmm-refund-next { padding:14px 16px; border-radius:8px; background:#fff5dc; color:#795900; }.fmm-refund-next h2 { margin:0 0 9px; font-size:10px; }.fmm-refund-next p { margin:5px 0 0; font-size:8px; line-height:1.4; }
.fmm-refund-summary { padding:17px 15px; text-align:center; }.fmm-refund-summary h2 { margin:0 0 16px; text-align:left; font-size:12px; }.fmm-refund-summary > span { display:block; color:var(--fmm-muted); font-size:9px; }.fmm-refund-amount { display:block; margin:4px 0 8px; font-size:26px; }.fmm-refund-approved-label { display:inline-block; padding:5px 8px; border-radius:99px; background:#d8fae9; color:#198754; font-size:8px; }.fmm-refund-summary-timeline { margin:16px 0; padding:12px 10px; border-radius:7px; background:#fafafa; text-align:left; font-size:8px; }.fmm-refund-summary-timeline span { color:var(--fmm-muted); }.fmm-refund-summary-timeline strong { float:right; }.fmm-refund-summary-timeline small { display:block; clear:both; padding-top:10px; color:var(--fmm-muted); }.fmm-refund-summary .fmm-btn { margin-top:8px; }.fmm-refund-help { display:block; margin-top:15px; color:var(--fmm-muted); font-size:8px; text-decoration:underline; }
@media (max-width:720px) { .fmm-refund-approved-grid { grid-template-columns:1fr; }.fmm-refund-summary { order:-1; } }
@media (max-width:480px) { .fmm-refund-detail-grid { grid-template-columns:1fr; } }
.fmm-closed-dispute-page { max-width:900px; margin:0 auto; }.fmm-closed-case-head { margin-bottom:10px; color:var(--fmm-muted); font-size:8px; }.fmm-closed-title-row h1 { margin:0; font-size:20px; }.fmm-closed-title-row p { margin:4px 0 16px; color:var(--fmm-muted); font-size:10px; }.fmm-closed-dispute-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:16px; align-items:start; }.fmm-closed-main { display:grid; gap:12px; }.fmm-closed-order-card { position:relative; padding:10px 14px; }.fmm-closed-order-card .fmm-dispute-product { border:0; padding:0; }.fmm-closed-order-card .fmm-dispute-product__image { width:38px; height:38px; }.fmm-closed-order-card .fmm-dispute-product b,.fmm-closed-order-card .fmm-dispute-product small { display:block; margin-top:2px; font-size:8px; }.fmm-closed-order-card .fmm-dispute-product > strong { margin-left:auto; align-self:center; font-size:12px; }.fmm-closed-pill { position:absolute; top:10px; right:12px; padding:3px 7px; border-radius:99px; background:#f0f1f3; color:#555; font-size:7px; }
.fmm-closed-result-card { padding:22px 20px; border:1px solid var(--fmm-border); border-radius:9px; background:#fff; text-align:center; }.fmm-closed-result-icon { width:37px; height:37px; margin:0 auto 8px; display:grid; place-items:center; border-radius:50%; background:#fff5dd; color:#dda30d; font-size:18px; }.fmm-closed-result-card > span { display:inline-block; padding:4px 8px; border-radius:99px; background:#fff5dd; color:#9a6400; font-size:8px; font-weight:700; }.fmm-closed-result-card h2 { margin:12px 0 6px; font-size:16px; }.fmm-closed-result-card p { margin:0; color:var(--fmm-muted); font-size:9px; line-height:1.5; }
.fmm-closed-progress,.fmm-closed-resolution,.fmm-closed-history { padding:16px; }.fmm-closed-progress h2,.fmm-closed-resolution h2,.fmm-closed-history h2 { margin:0 0 14px; font-size:11px; }.fmm-closed-progress ol { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0; padding:0; }.fmm-closed-progress li { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-size:8px; }.fmm-closed-progress li:not(:last-child)::after { content:''; position:absolute; top:7px; left:calc(50% + 9px); width:calc(100% - 18px); height:2px; background:var(--fmm-yellow); }.fmm-closed-progress i { z-index:1; width:15px; height:15px; display:grid; place-items:center; border-radius:50%; background:var(--fmm-yellow); color:#4d3c00; font-style:normal; font-size:8px; }.fmm-closed-resolution > div { display:grid; grid-template-columns:85px 1fr; gap:10px; padding:9px 0; border-top:1px solid var(--fmm-border); font-size:9px; }.fmm-closed-resolution span { color:var(--fmm-muted); }.fmm-closed-resolution strong { text-align:right; }.fmm-closed-history-row { display:flex; gap:9px; position:relative; padding:0 0 12px; font-size:8px; }.fmm-closed-history-row:not(:last-child)::after { content:''; position:absolute; left:3px; top:8px; bottom:-2px; width:1px; background:var(--fmm-border); }.fmm-closed-history-row i { width:7px; height:7px; margin-top:2px; border-radius:50%; background:#e0e3e7; z-index:1; flex-shrink:0; }.fmm-closed-history-row:first-child i { background:var(--fmm-yellow); }.fmm-closed-history-row b,.fmm-closed-history-row small,.fmm-closed-history-row p { display:block; }.fmm-closed-history-row small,.fmm-closed-history-row p { margin-top:3px; color:var(--fmm-muted); }.fmm-closed-history-row p { margin-bottom:0; }
.fmm-closed-aside { display:grid; gap:12px; }.fmm-closed-help { padding:16px; border-radius:8px; background:#fff5dc; }.fmm-closed-help h2 { margin:0 0 8px; font-size:10px; }.fmm-closed-help p { margin:0; color:var(--fmm-muted); font-size:8px; line-height:1.5; }.fmm-closed-actions { padding:15px; }.fmm-closed-actions .fmm-btn { margin-top:8px; }.fmm-closed-actions .fmm-btn:first-child { margin-top:0; }.fmm-closed-actions .fmm-btn--link { border:0; background:transparent; color:var(--fmm-muted); text-decoration:underline; }
@media (max-width:720px) { .fmm-closed-dispute-grid { grid-template-columns:1fr; }.fmm-closed-aside { order:-1; } }
@media (max-width:480px) { .fmm-closed-progress ol { grid-template-columns:repeat(2,1fr); row-gap:14px; }.fmm-closed-progress li:not(:last-child)::after { display:none; } }
.fmm-dispute-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; }
.fmm-dispute-modal__backdrop { position:absolute; inset:0; background:rgba(18,18,20,.48); }
.fmm-dispute-modal__card { position:relative; width:min(440px,100%); padding:24px; border:1px solid var(--fmm-border); border-radius:12px; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.2); }
.fmm-dispute-modal__card h2 { margin:0 0 7px; font-size:18px; }
.fmm-dispute-modal__muted { margin:0 0 16px; color:var(--fmm-muted); font-size:12px; }
.fmm-dispute-modal__close { position:absolute; top:10px; right:12px; border:0; background:transparent; color:var(--fmm-muted); font-size:24px; cursor:pointer; }
.fmm-dispute-modal__card textarea { width:100%; min-height:110px; resize:vertical; padding:11px; border:1px solid var(--fmm-border); border-radius:8px; font:inherit; font-size:13px; box-sizing:border-box; }
.fmm-dispute-modal__actions { display:flex; gap:10px; margin-top:16px; }
.fmm-dispute-evidence-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fmm-dispute-evidence-list li { display:flex; gap:8px; align-items:center; padding:10px; border:1px solid var(--fmm-border); border-radius:7px; font-size:12px; }
.fmm-dispute-evidence-list a { color:var(--fmm-text); font-weight:600; }

/* --- order detail --------------------------------------------------------- */
.fmm-od { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.fmm-od__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.fmm-od__back {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--fmm-border); background: #fff;
    display: grid; place-items: center; color: var(--fmm-text); margin-top: 2px;
}
.fmm-od__back:hover { border-color: var(--fmm-faint); }
.fmm-od__head h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.02em; }
.fmm-od__head p { font-size: 14px; color: var(--fmm-muted); margin: 0; }

.fmm-od__item { display: flex; align-items: flex-start; gap: 16px; }
.fmm-od__meta { text-align: right; flex-shrink: 0; }
.fmm-od__meta b { display: block; font-size: 13.5px; margin-top: 2px; }

/* dark live-tracking card */
.fmm-live {
    background: var(--fmm-dark); color: #fff;
    border-radius: var(--fmm-radius-lg);
    padding: 26px 28px 34px;
}
.fmm-live__tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--fmm-yellow);
}
.fmm-live__tag::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--fmm-yellow);
}
.fmm-live h2 { font-size: 24px; font-weight: 800; margin: 12px 0 8px; letter-spacing: -.02em; }
.fmm-live p { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: 0; max-width: 420px; }

.fmm-live__rail { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 30px; position: relative; }
.fmm-live__rail::before {
    content: ""; position: absolute; left: 18px; right: 18px; top: 18px;
    border-top: 2px dashed rgba(255, 255, 255, .25);
}
/* The rail carries the full canonical journey now (up to nine nodes, not three),
   so it scrolls rather than crushing "Arrived at Warehouse" into a column too
   narrow to read. The dashed connector is pinned to the scrolling content, not
   the viewport, so it still runs the length of the rail. */
.fmm-live__rail { overflow-x: auto; scrollbar-width: thin; }
.fmm-live__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1 0 auto; min-width: 84px; }
.fmm-live__dot {
    width: 36px; height: 36px; border-radius: 50%;
    background: #2E2A2B; border: 2px solid rgba(255, 255, 255, .25);
    position: relative; z-index: 1;
    display: grid; place-items: center;
}
.fmm-live__node.is-done .fmm-live__dot { background: #fff; border-color: #fff; }
.fmm-live__node.is-now .fmm-live__dot {
    background: var(--fmm-yellow); border-color: var(--fmm-yellow);
    box-shadow: 0 0 0 6px rgba(251, 191, 36, .22);
}
.fmm-live__lbl { font-size: 11.5px; color: rgba(255, 255, 255, .7); text-align: center; }
.fmm-live__node.is-now .fmm-live__lbl { color: var(--fmm-yellow); font-weight: 700; }
.fmm-live__glyph { display:grid; place-items:center; width:18px; height:18px; color:var(--fmm-dark); line-height:0; }
.fmm-live__glyph svg { width:18px; height:18px; display:block; }
.fmm-live__node:not(.is-now):not(.is-done) .fmm-live__glyph { color:#8b8587; }
.fmm-action-icon { flex:0 0 15px; color:var(--fmm-faint); }
.fmm-od__acts a, .fmm-od__acts button { justify-content:flex-start; }
.fmm-od__acts a > span, .fmm-od__acts button > span { flex:1; }
.fmm-od__acts a > svg:last-child, .fmm-od__acts button > svg:last-child { margin-left:auto; }

.fmm-od__addr { display: flex; gap: 14px; background: var(--fmm-bg-alt); border-radius: 12px; padding: 16px; }
.fmm-od__addricon {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: #fff; color: var(--fmm-muted);
    display: grid; place-items: center;
}
.fmm-od__addr b { display: block; font-size: 14px; }
.fmm-od__addr span span { display: block; }

.fmm-od__acts { display: grid; gap: 10px; margin-top: 14px; }
.fmm-od__acts a,
.fmm-od__acts button {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left;
    border: 1px solid var(--fmm-border); border-radius: 10px;
    background: #fff; padding: 12px 14px;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--fmm-text);
}
.fmm-od__acts a:hover,
.fmm-od__acts button:hover:not(:disabled) { border-color: var(--fmm-faint); background: var(--fmm-bg-alt); }
.fmm-od__acts svg { color: var(--fmm-faint); flex-shrink: 0; }

@media (max-width: 1000px) { .fmm-od { grid-template-columns: 1fr; } }
.fmm-order-detail-page .fmm-container { max-width:1060px; }
.fmm-order-detail-page .fmm-od { grid-template-columns:minmax(0,1fr) 250px; gap:18px; }
.fmm-order-detail-page .fmm-panel { padding:16px; }
.fmm-order-detail-page .fmm-od__item { gap:14px; }
.fmm-order-detail-page .fmm-od__head h1 { font-size:26px; }
.fmm-order-detail-page .fmm-od__head p { font-size:13px; }
.fmm-order-detail-page .fmm-live { padding:22px 20px 27px; min-height:184px; position:relative; }
.fmm-order-detail-page .fmm-live h2 { font-size:20px; margin:10px 0 7px; }
.fmm-order-detail-page .fmm-live p { font-size:13px; max-width:420px; }
.fmm-order-detail-page .fmm-live__rail { margin-top:20px; padding-top:28px; }
.fmm-order-detail-page .fmm-live__rail::before { content:none; }
/* Each segment runs from this dot's center to the next. Gold up to the
   current step, dashed after it. The last node has nowhere to connect. */
.fmm-order-detail-page .fmm-live__seg {
    position:absolute; left:50%; top:18px; width:100%; height:3px; z-index:0;
    transform:translateY(-50%);
}
.fmm-order-detail-page .fmm-live__seg.is-gold { background:#F8B840; }
.fmm-order-detail-page .fmm-live__seg.is-dash {
    height:2px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.38) 0 7px, transparent 7px 13px);
}
.fmm-order-detail-page .fmm-live__node:last-child .fmm-live__seg { display:none; }
.fmm-order-detail-page .fmm-live__miles {
    position:absolute; top:18px; right:16px; min-width:64px; padding:8px 8px 7px;
    border-radius:10px; background:rgba(255,255,255,.08); text-align:center;
}
.fmm-order-detail-page .fmm-live__miles b { display:block; color:var(--fmm-yellow); font-size:18px; line-height:1; }
.fmm-order-detail-page .fmm-live__miles span {
    display:block; margin-top:4px; font-size:8px; letter-spacing:.08em;
    text-transform:uppercase; color:rgba(255,255,255,.65);
}
.fmm-order-detail-page .fmm-live__lbl { font-size:11px; line-height:1.25; max-width:88px; }
.fmm-order-detail-page .fmm-track__step { padding-bottom:18px; }
.fmm-order-detail-page .fmm-track__step b { font-size:11px; }
.fmm-order-detail-page .fmm-track__step span span { font-size:9px; }
/* Shipment history: gold for steps already reached, a hollow gold ring on the
   current one, grey for everything still ahead. Scoped here so other timelines
   keep their teal. The current step is also .is-done, so the ring and the grey
   segment under it have to come after the filled-gold rules. */
.fmm-order-detail-page .fmm-track__dot { background:#D9D9D9; box-shadow:none; }
.fmm-order-detail-page .fmm-track__step:not(:last-child)::before { background:#E4E4E4; }
.fmm-order-detail-page .fmm-track__step.is-done > .fmm-track__dot { background:#F8B840; }
.fmm-order-detail-page .fmm-track__step.is-done:not(:last-child)::before { background:#F8B840; }
.fmm-order-detail-page .fmm-track__step.is-now > .fmm-track__dot { background:#fff; box-shadow:inset 0 0 0 2px #F8B840; }
.fmm-order-detail-page .fmm-track__step.is-now:not(:last-child)::before { background:#E4E4E4; }
.fmm-order-detail-page .fmm-track__step:not(.is-done) b { color:#B0B0B0; font-weight:600; }
.fmm-order-detail-page .fmm-track__step.is-done b { color:#1c1c1c; font-weight:700; }
.fmm-order-detail-page .fmm-od__deliver {
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;
}
.fmm-order-detail-page .fmm-od__deliver h2 { font-size:16px; font-weight:800; margin:0; }
.fmm-order-detail-page .fmm-od__place {
    background:#F3F4F6; border-color:transparent; color:#4B5563;
    font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    padding:5px 10px; gap:5px;
}
.fmm-order-detail-page .fmm-od__place svg { width:12px; height:12px; }
.fmm-order-detail-page .fmm-od__addr { padding:16px; border-radius:12px; gap:14px; align-items:flex-start; }
.fmm-order-detail-page .fmm-od__addricon { width:40px; height:40px; }
.fmm-order-detail-page .fmm-od__addr b { font-size:14px; font-weight:700; }
.fmm-order-detail-page .fmm-od__addr .fmm-line__meta { font-size:13px; color:#6B7280; margin-top:2px; }
.fmm-order-detail-page .fmm-od__address-lines { display:block; margin-top:8px; font-size:13px; line-height:1.5; color:#6B7280; }
.fmm-order-detail-page .fmm-od__address-lines span { display:block; }
.fmm-order-detail-page .fmm-od__acts { gap:8px; margin-top:12px; }
.fmm-order-detail-page .fmm-od__acts a, .fmm-order-detail-page .fmm-od__acts button { padding:10px 12px; font-size:10px; border-radius:8px; }
.fmm-order-detail-page .fmm-od__act--danger,
.fmm-order-detail-page .fmm-od__act--danger span,
.fmm-order-detail-page .fmm-od__act--danger svg { color:#DC2626; }
.fmm-track__report {
    margin-left:auto; align-self:center; flex-shrink:0;
    color:#E8A31A; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.fmm-order-detail-page .fmm-od__rate {
    margin-top:14px; background:#FFF8EC; border:1px solid #F3E6C8; border-radius:16px; padding:16px;
}
.fmm-order-detail-page .fmm-od__rate b { display:block; font-size:14px; }
.fmm-order-detail-page .fmm-od__rate p { margin:6px 0 10px; font-size:12px; color:#6B7280; }
.fmm-od__stars { display:flex; gap:4px; }
.fmm-od__stars a { display:flex; width:22px; height:22px; opacity:.35; }
.fmm-od__stars a img { width:100%; height:100%; object-fit:contain; }
.fmm-od__stars a:hover { opacity:1; }
.fmm-od__stars:hover a { color:#F8B840; }
.fmm-od__stars a:hover ~ a { color:#E5E7EB; }
.fmm-od__rate-link { display:inline-block; margin-top:8px; color:#E8A31A; font-size:12px; font-weight:700; }
.fmm-issue { display:grid; gap:18px; }
.fmm-issue__kicker { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#9CA3AF; margin:0 0 12px; font-weight:800; }
.fmm-issue__pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fmm-issue__pair figure { margin:0; position:relative; background:#F3F4F6; border-radius:12px; overflow:hidden; min-height:140px; }
.fmm-issue__pair img { width:100%; height:180px; object-fit:cover; display:block; background:#fff; }
.fmm-issue__pair figcaption {
    position:absolute; top:10px; left:10px; background:rgba(17,24,39,.72); color:#fff;
    font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    border-radius:999px; padding:4px 8px;
}
.fmm-issue__pair .is-flagged { outline:2px solid #EF4444; outline-offset:-2px; }
.fmm-issue__flag {
    position:absolute; top:10px; right:10px; background:#FEE2E2; color:#B91C1C;
    font-size:10px; font-weight:800; border-radius:999px; padding:4px 8px;
}
.fmm-issue__note { display:block; margin:14px 0 0; padding:12px; background:#F9FAFB; border-radius:10px; font-size:13px; color:#4B5563; line-height:1.5; }
.fmm-issue__note b { display:block; font-size:12px; color:#111827; margin-bottom:2px; }
.fmm-issue__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.fmm-issue__grid b { display:block; margin-top:4px; font-size:13px; font-weight:700; }
.fmm-issue__grid .is-ok { color:#178A45; }
.fmm-issue__grid .is-hold { color:#DC2626; }
.fmm-issue__decide { margin-top:16px; padding-top:14px; border-top:1px solid var(--fmm-border); }
.fmm-issue__hold { margin:14px 0 0; font-size:12px; color:#6B7280; line-height:1.5; }

/* Report an issue, order again, receipt — the three buyer screens. */
.fmm-rpt__order { display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.fmm-rpt__order .fmm-order__thumb { width:64px; height:64px; flex-shrink:0; border-radius:10px; overflow:hidden; }
.fmm-rpt__order b { display:block; font-size:15px; }
.fmm-rpt__types { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fmm-rpt__type { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--fmm-border); border-radius:14px; padding:14px; cursor:pointer; background:#fff; }
.fmm-rpt__type.is-on { border-color:#F5C542; background:#FFF8E6; }
.fmm-rpt__type b { display:block; font-size:14px; }
.fmm-rpt__type em { display:block; margin-top:3px; font-style:normal; font-size:12px; color:var(--fmm-muted); }
.fmm-rpt__ico { width:36px; height:36px; border-radius:10px; background:#F3F4F6; flex-shrink:0; }
.fmm-rpt__ico { display:grid; place-items:center; color:#6B7280; }
.fmm-rpt__ico svg { width:20px; height:20px; }
.fmm-rpt__type.is-on .fmm-rpt__ico { background:#F8B840; }
.fmm-rpt__radio { width:18px; height:18px; border-radius:50%; border:1.5px solid #D1D5DB; margin-left:auto; flex-shrink:0; }
.fmm-rpt__radio.is-on { border-color:#F8B840; background:#F8B840; box-shadow:inset 0 0 0 3px #fff; }
.fmm-rpt__labelrow { display:flex; justify-content:space-between; margin:22px 0 8px; font-size:14px; }
.fmm-rpt__labelrow span { color:var(--fmm-muted); font-size:12px; }
.fmm-rpt__text { width:100%; border:1px solid var(--fmm-border); border-radius:12px; padding:12px 14px; font:inherit; font-size:14px; resize:vertical; }
.fmm-rpt__steps { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.fmm-rpt__steps li { display:flex; gap:10px; align-items:flex-start; font-size:13px; }
.fmm-rpt__steps span { width:22px; height:22px; border-radius:50%; background:var(--fmm-yellow); color:var(--fmm-dark); display:grid; place-items:center; font-size:12px; font-weight:800; flex-shrink:0; }
.fmm-again__tabs { display:inline-flex; gap:4px; padding:4px; border:1px solid #E6E8EC; border-radius:12px; margin-bottom:18px; background:#fff; }
.fmm-again__tabs button { border:0; background:transparent; border-radius:8px; padding:9px 22px; font:inherit; font-size:13px; font-weight:700; color:#6B7280; cursor:pointer; }
.fmm-again__tabs button.is-on { background:#F5B400; color:#1A1A1A; }
.fmm-again__grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.fmm-again__product { display:grid; grid-template-columns:minmax(240px, 42%) minmax(0,1fr); gap:22px; align-items:stretch; padding:18px; }
.fmm-again__photo { background:#F4F5F7; border-radius:16px; min-height:340px; display:grid; place-items:center; overflow:hidden; }
.fmm-again__photo img { width:78%; height:78%; object-fit:contain; }
.fmm-again__info h2 { margin:4px 0 6px; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.fmm-again__store, .fmm-again__line { display:flex; align-items:center; gap:8px; margin:0; color:#6B7280; font-size:13px; }
.fmm-again__store svg, .fmm-again__line svg, .fmm-again__note svg { width:16px; height:16px; flex-shrink:0; }
.fmm-again__price { display:flex; justify-content:space-between; gap:12px; margin:16px 0; padding:14px 0; border-top:1px solid var(--fmm-border); border-bottom:1px solid var(--fmm-border); }
.fmm-again__price em { display:block; font-style:normal; font-size:12px; color:#9CA3AF; }
.fmm-again__price b { display:block; margin-top:4px; font-size:16px; }
.fmm-again__price .is-end { text-align:right; }
.fmm-again__ready { display:flex; gap:10px; align-items:flex-start; background:#E7F8EE; color:#17803D; border-radius:12px; padding:14px 16px; }
.fmm-again__ready svg { width:22px; height:22px; flex-shrink:0; margin-top:1px; }
.fmm-again__ready b, .fmm-again__ready em { display:block; font-style:normal; }
.fmm-again__ready em { margin-top:3px; font-size:13px; color:#3F8F62; }
.fmm-again__facts { margin-top:14px; border:1px solid #ECEDEF; border-radius:14px; padding:14px 16px 6px; }
.fmm-again__facts h3 { margin:0 0 8px; font-size:14px; font-weight:700; }
.fmm-again__facts div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #F0F1F3; font-size:13px; }
.fmm-again__facts span { color:#9CA3AF; }
.fmm-again__amount { display:block; font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.fmm-again__buy { padding:22px 20px; }
.fmm-again__buy p { margin:10px 0; }
.fmm-again__buy .is-ok { display:flex; align-items:center; gap:8px; color:#17803D; font-weight:700; font-size:14px; }
.fmm-again__buy .is-ok i { width:8px; height:8px; border-radius:50%; background:#22A35A; display:block; }
.fmm-again__line svg { color:#F5B400; }
.fmm-again__qty { display:flex; justify-content:space-between; align-items:center; margin:18px 0 8px; font-size:14px; }
.fmm-again__qty div { display:flex; align-items:center; border:1px solid #E6E8EC; border-radius:10px; overflow:hidden; }
.fmm-again__qty button { width:34px; height:34px; border:0; background:#fff; cursor:pointer; font-size:16px; color:#374151; }
.fmm-again__qty b { min-width:22px; text-align:center; font-size:14px; }
.fmm-again__buy .fmm-btn { margin-top:12px; justify-content:center; }
.fmm-again__buy .fmm-btn--ghost { box-shadow:none; border-color:#E6E8EC; background:#fff; }
.fmm-again__note { display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; color:#9CA3AF; font-size:12px; line-height:1.5; }
.fmm-again__note svg { margin-top:1px; color:#9CA3AF; }
.fmm-rcpt__grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; align-items:start; }
.fmm-rcpt__hero { text-align:center; margin-bottom:18px; }
.fmm-rcpt__tick { width:54px; height:54px; border-radius:50%; background:var(--fmm-yellow); color:var(--fmm-dark); display:inline-grid; place-items:center; font-size:26px; font-weight:800; }
.fmm-rcpt__hero h1 { margin:12px 0 4px; font-size:28px; }
.fmm-rcpt__hero p { margin:0; color:var(--fmm-muted); }
.fmm-rcpt__meta, .fmm-rcpt__sum { display:grid; gap:10px; }
.fmm-rcpt__meta div, .fmm-rcpt__sum div, .fmm-rcpt__item { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.fmm-rcpt__meta span, .fmm-rcpt__sum span { color:var(--fmm-muted); font-size:13px; }
.fmm-rcpt__item { margin:18px 0; padding:16px 0; border-top:1px solid var(--fmm-border); border-bottom:1px solid var(--fmm-border); }
.fmm-rcpt__item .fmm-order__thumb { width:64px; height:64px; }
.fmm-rcpt__item span { display:block; }
.fmm-rcpt__item em { display:block; margin-top:4px; font-style:normal; color:var(--fmm-muted); font-size:12px; }
.fmm-rcpt__sum { background:#FFF8EC; border-radius:12px; padding:16px; }
.fmm-rcpt__sum h2 { margin:0 0 8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.fmm-rcpt__sum .is-total { border-top:1px solid #F3E6C8; padding-top:10px; font-size:16px; }
.fmm-rcpt aside h2 { margin:0 0 14px; font-size:16px; }
.fmm-rcpt aside .fmm-btn { margin-top:10px; }
.fmm-rcpt__safe { margin-top:14px; background:#E8F1FF; color:#1D4ED8; border-radius:12px; padding:12px; font-size:12px; line-height:1.5; }
@media (max-width:900px) {
    .fmm-rpt__types, .fmm-again__grid, .fmm-again__product, .fmm-rcpt__grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
    .fmm-issue__pair, .fmm-issue__grid { grid-template-columns:1fr; }
}
@media (max-width:1000px) { .fmm-order-detail-page .fmm-od { grid-template-columns:1fr; } }

/* orders master-detail */
.fmm-ordersplit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }

.fmm-searchbox {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--fmm-border); border-radius: 10px;
    padding: 9px 14px; background: #fff; color: var(--fmm-faint);
}
.fmm-searchbox input { border: 0; outline: 0; font: inherit; font-size: 13.5px; color: var(--fmm-text); width: 170px; }

.fmm-notebar {
    display: flex; align-items: center; gap: 10px;
    background: var(--fmm-yellow-soft);
    border-radius: 10px; padding: 13px 16px;
    font-size: 13.5px; color: #8A6100; font-weight: 600;
    margin-bottom: 20px;
}
.fmm-notebar svg { color: var(--fmm-yellow-dark); flex-shrink: 0; }

.fmm-order--pick { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fmm-order--pick:hover { border-color: var(--fmm-faint); }
.fmm-order--pick.is-picked { border-color: var(--fmm-yellow); box-shadow: 0 0 0 1px var(--fmm-yellow); }

.fmm-order__top {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px 0;
}
.fmm-order__ref { margin-left: auto; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-order__amt { font-size: 18px; font-weight: 800; margin: 6px 0 0; }

/* staged progress bar on an order card */
.fmm-stage { padding: 0 18px 4px; }
.fmm-stage__labels { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fmm-stage__labels span { font-size: 11.5px; color: var(--fmm-faint); }
.fmm-stage__labels span.is-on { color: var(--fmm-yellow-dark); font-weight: 700; }
.fmm-stage__bar { height: 6px; border-radius: 999px; background: var(--fmm-border); overflow: hidden; }
.fmm-stage__bar span { display: block; height: 100%; border-radius: 999px; background: var(--fmm-yellow); transition: width .3s; }

.fmm-order__note {
    display: flex; gap: 9px; align-items: flex-start;
    background: var(--fmm-bg-alt); border-radius: 9px;
    padding: 12px; margin: 16px 0 0;
    font-size: 12px; line-height: 1.55; color: var(--fmm-muted);
}
.fmm-order__note svg { flex-shrink: 0; margin-top: 1px; }

@media (max-width: 1000px) {
    .fmm-ordersplit { grid-template-columns: 1fr; }
}

/* escrow progress on an order card */
.fmm-prog { margin-top: 10px; max-width: 320px; }
.fmm-prog__bar { height: 5px; border-radius: 999px; background: var(--fmm-border); overflow: hidden; }
.fmm-prog__bar span { display: block; height: 100%; background: var(--fmm-teal); border-radius: 999px; transition: width .3s; }
.fmm-prog__stages { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.fmm-prog__stages span { font-size: 11px; color: var(--fmm-faint); }
.fmm-prog__stages span.is-on { color: var(--fmm-teal); font-weight: 700; }

/* tracking timeline */
.fmm-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fmm-track__step { display: flex; gap: 14px; padding-bottom: 20px; position: relative; }
.fmm-track__step:last-child { padding-bottom: 0; }
.fmm-track__step:not(:last-child)::before {
    content: ""; position: absolute; left: 5px; top: 16px; bottom: 0;
    width: 2px; background: var(--fmm-border);
}
.fmm-track__dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
    background: var(--fmm-border); position: relative; z-index: 1;
}
.fmm-track__dot.is-now { background: var(--fmm-teal); box-shadow: 0 0 0 4px var(--fmm-teal-soft); }

/* A nine-step journey needs completed steps to read as completed — with only the
   current one marked, the eight behind it looked as pending as the ones ahead.
   The three-stage bar this replaced never had enough steps for that to show. */
.fmm-track__step.is-done > .fmm-track__dot { background: var(--fmm-teal); }
.fmm-track__step.is-done:not(:last-child)::before { background: var(--fmm-teal); }
.fmm-track__step > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.fmm-track__step b { font-size: 14px; }
.fmm-track__step span span { font-size: 12.5px; color: var(--fmm-muted); }

@media (max-width: 560px) {
    .fmm-order__body { grid-template-columns: 68px minmax(0, 1fr); }
    .fmm-order__thumb { width: 68px; height: 68px; }
    .fmm-order__price { grid-column: 2; text-align: left; }
}

/* --- order confirmation --------------------------------------------------- */
.fmm-confirm { text-align: center; padding: 40px 0 36px; }
/* The design's tick is the brand yellow, not the teal used for verified badges. */
.fmm-confirm__tick {
    width: 64px; height: 64px; margin: 0 auto 24px;
    border-radius: 50%; background: var(--fmm-yellow); color: var(--fmm-dark);
    display: grid; place-items: center;
}
.fmm-confirm h1 { font-size: 30px; font-weight: 800; margin: 0 0 10px; letter-spacing: -.02em; }
.fmm-confirm p { font-size: 15px; line-height: 1.7; color: var(--fmm-muted); margin: 0 auto; max-width: 420px; }
.fmm-confirm__ref {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 20px;
    background: #fff; border: 1px solid var(--fmm-border);
    border-radius: 999px; padding: 8px 16px;
    font-size: 13px; color: var(--fmm-muted);
}
.fmm-confirm__ref b { color: var(--fmm-text); font-weight: 700; }
.fmm-confirm__ref:hover { border-color: var(--fmm-faint); }

.fmm-confirm__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px;
    align-items: start; max-width: 1000px; margin: 0 auto;
}
.fmm-confirm__grid .fmm-track__step { gap: 14px; padding-bottom: 24px; }
.fmm-confirm__grid .fmm-track__step:not(:last-child)::before { left: 13px; top: 29px; }
.fmm-confirm__grid .fmm-track__dot {
    width: 28px; height: 28px; margin-top: 0;
    display: grid; place-items: center;
    background: #F1F5F9; color: #94A3B8;
}
.fmm-confirm__grid .fmm-track__dot.is-now { background: #FFF3D8; color: #EAA900; box-shadow: none; }
.fmm-confirm__grid .fmm-track__step.is-done > .fmm-track__dot { background: var(--fmm-teal); color: #fff; }
.fmm-confirm__grid .fmm-track__step.is-done:not(:last-child)::before { background: var(--fmm-teal); }
.fmm-confirm__grid .fmm-track__dot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .fmm-confirm__grid { grid-template-columns: 1fr; } }

/* legacy done-block (kept for the offer-sent dialog) */
.fmm-done__tick {
    width: 72px; height: 72px; margin: 0 auto 24px;
    border-radius: 50%; background: var(--fmm-teal-soft); color: var(--fmm-teal);
    display: grid; place-items: center;
}

/* --- auth ----------------------------------------------------------------- */
.fmm-auth {
    max-width: 420px; margin: 0 auto;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 36px 32px;
}
.fmm-auth__title { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.fmm-auth__lead { font-size: 14px; color: var(--fmm-muted); margin: 0 0 26px; }
.fmm-auth__sent { font-size: 13.5px; color: var(--fmm-muted); margin: 0 0 18px; line-height: 1.6; }
.fmm-auth__alt { font-size: 13.5px; color: var(--fmm-muted); margin: 18px 0 0; text-align: center; }
.fmm-auth__alt button {
    background: none; border: 0; padding: 0;
    font: inherit; font-weight: 700; color: var(--fmm-yellow-dark); text-decoration: underline;
}
.fmm-auth__note {
    font-size: 12px; color: var(--fmm-faint); line-height: 1.6;
    margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--fmm-border);
}

.fmm-field { display: block; margin-bottom: 16px; }
.fmm-field > span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.fmm-field > .fmm-field__label { display: flex; align-items: center; gap: 6px; }
.fmm-name-lock-info {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: #7B8493;
    cursor: help;
}
.fmm-name-lock-info:focus-visible { outline: 2px solid var(--fmm-yellow); outline-offset: 2px; border-radius: 50%; }
.fmm-name-lock-tooltip {
    position: absolute;
    z-index: 20;
    left: -8px;
    bottom: calc(100% + 9px);
    width: min(280px, calc(100vw - 48px));
    padding: 9px 11px;
    border: 1px solid var(--fmm-border);
    border-radius: 8px;
    background: #231F20;
    color: #fff;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .16);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.fmm-name-lock-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 11px;
    border: 5px solid transparent;
    border-top-color: #231F20;
}
.fmm-name-lock-info:hover .fmm-name-lock-tooltip,
.fmm-name-lock-info:focus .fmm-name-lock-tooltip,
.fmm-name-lock-info:focus-within .fmm-name-lock-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* The field name lives in the placeholder instead of above the box. The <span>
   is hidden from sight but NOT from screen readers — a placeholder disappears
   the moment someone types, so it cannot be the only name an input has. */
.fmm-field--bare > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.fmm-field input,
.fmm-field select {
    width: 100%; height: var(--fmm-field-h); padding: 12px 14px;
    border: 1px solid var(--fmm-border); border-radius: 10px;
    font: inherit; font-size: 15px; line-height: 20px; background: #fff;
    color: var(--fmm-text);
}
.fmm-field input:focus,
.fmm-field select:focus { outline: 2px solid var(--fmm-yellow); outline-offset: -1px; border-color: transparent; }
.fmm-field input::placeholder { color: var(--fmm-faint); }

/* A leading icon inside the box. Anchored to the bottom and given the input's
   own height, so it stays centred against the field rather than against the
   label above it — and follows --fmm-field-h if that ever changes. */
.fmm-field--icon { position: relative; }
.fmm-field--icon input { padding-left: 42px; }
/* Two classes deep on purpose: `.fmm-field > span` is (0,1,1) and would
   otherwise win, forcing this back to a block with the label's 7px margin and
   knocking the icon off-centre. */
.fmm-field .fmm-field__icon {
    position: absolute;
    left: 14px;
    bottom: 0;
    height: var(--fmm-field-h);
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--fmm-faint);
    pointer-events: none;
}

/* A quieter label, for screens whose design does not shout the field name. */
.fmm-field--quietlabel > span { font-weight: 500; color: var(--fmm-muted); }
.fmm-field input:disabled,
.fmm-field select:disabled { background: var(--fmm-bg-alt); color: var(--fmm-muted); cursor: not-allowed; }

/* Native select chrome can't be sized, so it rendered at roughly half the height
   of the inputs beside it. Strip it and draw our own chevron instead. */
.fmm-field select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 40px; cursor: pointer;
    background-image: var(--fmm-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.fmm-field select::-ms-expand { display: none; }
/* The unselected "Choose one" placeholder option reads as placeholder text. */
.fmm-field select:has(option[value=""]:checked) { color: var(--fmm-faint); }
.fmm-field select option { color: var(--fmm-text); }

/* Date inputs keep the native picker; only the icon is toned to match. */
.fmm-field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
.fmm-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.fmm-btn--off { opacity: .45; pointer-events: none; }

/* --- account menu --------------------------------------------------------- */
.fmm-acct { position: relative; }
.fmm-acct__btn { background: none; border: 0; padding: 0; display: block; }
.fmm-acct__menu {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 190px; z-index: 50;
    background: #fff; color: var(--fmm-text);
    border: 1px solid var(--fmm-border); border-radius: 12px;
    box-shadow: var(--fmm-shadow-lg);
    padding: 8px;
}
.fmm-acct__who {
    display: block; padding: 8px 12px 10px;
    font-size: 12px; font-weight: 700; color: var(--fmm-faint);
    border-bottom: 1px solid var(--fmm-border); margin-bottom: 6px;
}
.fmm-acct__menu a,
.fmm-acct__menu button {
    display: block; width: 100%; text-align: left;
    padding: 9px 12px; border: 0; background: none;
    font: inherit; font-size: 14px; color: var(--fmm-text); border-radius: 8px;
}
.fmm-acct__menu a:hover,
.fmm-acct__menu button:hover { background: var(--fmm-bg-alt); }
.fmm-acct__menu form { margin: 0; }

/* The seller variant carries the whole settings list, so it needs the room and
   a little grouping. Same menu shell as the buyer header — one dropdown, not
   two that drift. */
.fmm-acct__menu--wide { min-width: 252px; padding: 8px 8px 10px; }

.fmm-acct__nav { display: flex; flex-direction: column; }

.fmm-acct__grp {
    padding: 12px 12px 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fmm-faint);
}

.fmm-acct__nav > span:first-child { padding-top: 4px; }

.fmm-acct__nav a,
.fmm-acct__nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    color: var(--fmm-text);
    background: none;
    cursor: pointer;
}

.fmm-acct__nav a > svg,
.fmm-acct__nav button > svg { flex-shrink: 0; color: var(--fmm-faint); }

.fmm-acct__nav a:hover,
.fmm-acct__nav button:hover { background: var(--fmm-bg-alt); }

.fmm-acct__nav a.is-on { font-weight: 700; background: var(--fmm-bg-alt); }
.fmm-acct__nav a.is-on > svg { color: var(--fmm-text); }

.fmm-acct__nav button.is-danger { margin-top: 6px; border-top: 1px solid var(--fmm-border); border-radius: 0 0 8px 8px; padding-top: 12px; color: #DC2626; }
.fmm-acct__nav button.is-danger > svg { color: #DC2626; }
.fmm-acct__nav button.is-danger:hover { background: #FEF2F2; }

/* --- account sections ----------------------------------------------------- */
.fmm-acctnav {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 22px;
    border-bottom: 1px solid var(--fmm-border);
}
.fmm-acctnav a {
    padding: 9px 16px; border-radius: 9px;
    font-size: 14px; font-weight: 600; color: var(--fmm-muted);
}
.fmm-acctnav a:hover { background: var(--fmm-bg-alt); color: var(--fmm-text); }
.fmm-acctnav a.is-on { background: var(--fmm-bg-alt); color: var(--fmm-text); font-weight: 700; }

.fmm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .fmm-grid2 { grid-template-columns: 1fr; } }

.fmm-field small { font-weight: 500; color: var(--fmm-faint); }
.fmm-field em.fmm-form__err { display: block; font-style: normal; margin-top: 6px; }

.fmm-addr {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    transition: opacity .15s;
}
.fmm-addr.is-busy { opacity: .5; pointer-events: none; }
.fmm-addr__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

.fmm-pm__icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    background: var(--fmm-bg-alt); color: var(--fmm-muted);
    display: grid; place-items: center;
}

/* --- messaging ------------------------------------------------------------ */
.fmm-convo { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.fmm-convo:hover { box-shadow: var(--fmm-shadow); }
.fmm-convo__av {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: var(--fmm-bg-alt); overflow: hidden;
    display: grid; place-items: center; font-weight: 700; color: var(--fmm-muted);
}
.fmm-convo__av img { width: 100%; height: 100%; object-fit: cover; }
.fmm-convo b { display: block; }
.fmm-convo__last {
    display: block; font-size: 13px; color: var(--fmm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px;
}

.fmm-thread { max-height: 55vh; overflow-y: auto; padding: 20px; display: grid; gap: 14px; }
.fmm-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fmm-msg--mine { align-items: flex-end; }
.fmm-msg__bubble {
    max-width: 78%;
    background: var(--fmm-bg-alt);
    border-radius: 14px 14px 14px 4px;
    padding: 11px 15px;
    font-size: 14px; line-height: 1.6;
}
.fmm-msg--mine .fmm-msg__bubble {
    background: var(--fmm-yellow-soft);
    border-radius: 14px 14px 4px 14px;
}
.fmm-msg__time { font-size: 11px; color: var(--fmm-faint); }

.fmm-composer {
    display: flex; gap: 10px; align-items: center;
    padding: 14px 16px; border-top: 1px solid var(--fmm-border); background: #fff;
}
.fmm-composer input {
    flex: 1; padding: 11px 14px;
    border: 1px solid var(--fmm-border); border-radius: 999px;
    font: inherit; font-size: 14px;
}
.fmm-composer input:focus { outline: 2px solid var(--fmm-yellow); outline-offset: -1px; border-color: transparent; }

.fmm-pc.is-busy, .fmm-order.is-busy { opacity: .5; pointer-events: none; }

/* --- wallet + transactions ------------------------------------------------ */
.fmm-wallet__card { background: linear-gradient(135deg, var(--fmm-yellow-soft), #fff 70%); }
.fmm-wallet__balance { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 0; }
.fmm-wallet__meta { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 22px; }
.fmm-wallet__meta b { display: block; font-size: 17px; font-weight: 700; margin-top: 4px; }

.fmm-txn { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--fmm-border); }
.fmm-txn:last-child { border-bottom: 0; }
.fmm-txn__icon {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
}
.fmm-txn__icon.fmm-txn--in { background: var(--fmm-teal-soft); color: var(--fmm-teal); }
.fmm-txn__icon.fmm-txn--out { background: #FEE2E2; color: #B91C1C; }
.fmm-txn b { display: block; }
.fmm-txn__amt { font-size: 15px; font-weight: 800; white-space: nowrap; }
.fmm-txn__amt.fmm-txn--in { color: var(--fmm-teal); }
.fmm-txn__amt.fmm-txn--out { color: #B91C1C; }

/* --- star rating input ---------------------------------------------------- */
.fmm-stars { display: flex; gap: 4px; }
.fmm-stars__btn { background: none; border: 0; padding: 2px; color: var(--fmm-border); line-height: 0; }
.fmm-stars__btn.is-on { color: var(--fmm-yellow); }
.fmm-stars__btn:hover { color: var(--fmm-yellow-dark); }

/* --- modal ---------------------------------------------------------------- */
.fmm-modal {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(16, 23, 40, .55);
    display: grid; place-items: center;
    padding: 24px;
}
.fmm-modal__box {
    background: #fff; border-radius: var(--fmm-radius-lg);
    padding: 28px; width: 100%; max-width: 420px;
    box-shadow: var(--fmm-shadow-lg);
}
/* Long forms (customs declaration): keep the box on screen and scroll its content. */
.fmm-modal__box--scroll {
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    overflow-y: auto; overscroll-behavior: contain;
}
.fmm-logout-modal__box {
    position: relative;
    width: 100%;
    max-width: 342px;
    padding: 25px 24px 24px;
    border-top: 4px solid #FBBF24;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}
.fmm-logout-modal__close {
    position: absolute;
    top: 7px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9CA3AF;
    font-size: 24px;
    line-height: 1;
}
.fmm-logout-modal__close:hover { color: #4B5563; }
.fmm-logout-modal__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #FFF8E8;
    color: #FBBF24;
}
.fmm-logout-modal__icon svg { width: 29px; height: 29px; }
.fmm-logout-modal__box h2 { margin: 0 0 10px; color: #231F20; font-size: 19px; line-height: 1.3; }
.fmm-logout-modal__box p { margin: 0 0 24px; color: #6B7280; font-size: 13px; line-height: 1.55; }
.fmm-logout-modal__confirm,
.fmm-logout-modal__cancel {
    display: block;
    width: 100%;
    min-height: 43px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}
.fmm-logout-modal__confirm { border: 0; background: #FBBF24; color: #111827; font-weight: 700; }
.fmm-logout-modal__confirm:hover { background: #F3B51D; }
.fmm-logout-modal__cancel { margin-top: 10px; border: 0; background: #fff; color: #4B5563; }
.fmm-logout-modal__cancel:hover { background: #F9FAFB; }
.fmm-verification-pricing__container { width:min(100%,1080px); max-width:1080px; box-sizing:border-box; }.fmm-verification-pricing-page { min-height:100vh; }.fmm-verification-pricing__hero { margin:28px 0 18px; padding:28px 24px 30px; border:1px solid #E5E7EB; border-radius:8px; }.fmm-verification-pricing__hero h1 { max-width:520px; margin:0 0 10px; font-size:28px; line-height:1.1; }.fmm-verification-pricing__hero p { max-width:520px; margin:0; font-size:13px; line-height:1.8; }.fmm-verification-pricing__section { margin:24px 0; }.fmm-verification-pricing__section h2 { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.03em; }.fmm-verification-pricing__item { display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 16px; border:1px solid #E5E7EB; border-bottom:0; background:#fff; }.fmm-verification-pricing__item:first-of-type { border-radius:7px 7px 0 0; }.fmm-verification-pricing__item:last-child { border-bottom:1px solid #E5E7EB; border-radius:0 0 7px 7px; }.fmm-verification-pricing__item.is-highlight { border-left:2px solid #FBBF24; }.fmm-verification-pricing__icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:5px; background:#FFFBEB; color:#111827; font-size:16px; }.fmm-verification-pricing__copy { min-width:0; flex:1; }.fmm-verification-pricing__copy b { display:block; font-size:13px; }.fmm-verification-pricing__copy small { display:block; margin-top:3px; font-size:10px; line-height:1.4; }.fmm-verification-pricing__price { min-width:75px; text-align:right; }.fmm-verification-pricing__price b { display:block; font-size:18px; }.fmm-verification-pricing__price small { display:block; font-size:8px; }.fmm-verification-pricing__notice { margin-top:24px; padding:18px 20px; border-radius:7px; background:#FFF7D6; font-size:11px; }.fmm-verification-pricing__notice b { font-size:12px; }.fmm-verification-pricing__notice p { margin:8px 0; }.fmm-verification-pricing__notice span { display:block; padding:9px; border-radius:4px; background:#FFF1B8; font-size:9px; }.fmm-verification-pricing__actions { display:flex; gap:10px; margin-top:24px; padding-top:12px; border-top:1px solid #E5E7EB; }.fmm-verification-pricing__actions .fmm-btn { min-height:36px; padding:8px 18px; font-size:11px; }
@media (max-width:700px) { .fmm-verification-pricing__container { padding-left:16px; padding-right:16px; }.fmm-verification-pricing__hero { padding:20px 16px; }.fmm-verification-pricing__hero h1 { font-size:23px; }.fmm-verification-pricing__hero p { font-size:11px; }.fmm-verification-pricing__item { align-items:flex-start; padding:10px; }.fmm-verification-pricing__price { min-width:62px; }.fmm-verification-pricing__copy b { font-size:11px; }.fmm-verification-pricing__copy small { font-size:9px; }.fmm-verification-pricing__actions { flex-wrap:wrap; } }
.fmm-verification-pricing-page { min-height:unset; }
.fmm-verification-pricing__supported { color:#475569; }.fmm-verification-pricing__supported strong { color:#111827; font-weight:700; }
.fmm-authentication-page { background:#fff; }.fmm-authentication-page .fmm-container { max-width:1080px; }.fmm-authentication-page__hero { max-width:none; margin:42px 0 24px; padding:24px 22px; border:1px solid #E5E7EB; border-radius:12px; text-align:left; background:linear-gradient(110deg,#fff 0%,#fff 67%,#FFF9E8 100%); }.fmm-authentication-page__hero .fmm-pill { display:inline-flex; margin-bottom:12px; }.fmm-authentication-page__hero h1 { max-width:520px; font-size:28px; line-height:1.15; }.fmm-authentication-page__hero p { max-width:540px; font-size:13px; line-height:1.8; }.fmm-authentication-page .fmm-cats { grid-template-columns:repeat(3,1fr)!important; gap:16px; margin-top:24px!important; }.fmm-authentication-page .fmm-cat { min-height:170px; padding:16px; border:1px solid #EEF0F3; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.03); }.fmm-authentication-page .fmm-cat__label { display:flex; align-items:center; gap:8px; font-size:15px; }.fmm-authentication-page .fmm-cat__label img { width:24px; height:24px; object-fit:contain; }.fmm-authentication-page .fmm-cat__sub { line-height:1.8; }.fmm-authentication-page .fmm-protsteps { margin-top:0; padding:28px 22px; border:1px solid #EEF0F3; border-radius:12px; }.fmm-authentication-page .fmm-section__head { text-align:center; }.fmm-authentication-page .fmm-section__title { font-size:18px; text-transform:none; }
.fmm-authentication-page .fmm-authentication-page__hero h1 { font-family:inherit; font-weight:800; text-align:left; }
@media (max-width:700px) { .fmm-authentication-page .fmm-cats { grid-template-columns:1fr!important; }.fmm-authentication-page__hero { padding:20px 16px; }.fmm-authentication-page__hero h1 { font-size:23px; } }
.fmm-authentication-page .fmm-cat { position:relative; box-sizing:border-box; min-height:210px; display:flex; flex-direction:column; align-items:stretch; }.fmm-authentication-page .fmm-cat .fmm-chip { position:absolute; top:16px; right:16px; margin:0!important; padding:4px 8px; font-size:8px; }.fmm-authentication-page .fmm-cat__label { padding-right:75px; }.fmm-authentication-page .fmm-cat__sub { margin-top:10px; }.fmm-authentication-page .fmm-readmore { display:flex; align-items:center; justify-content:space-between; width:100%; box-sizing:border-box; margin-top:auto!important; padding-top:12px; border-top:1px solid #EEF0F3; font-size:9px!important; color:#475569; }.fmm-authentication-page .fmm-readmore::after { content:'→'; color:#F59E0B; font-size:15px; margin-left:auto; }
.fmm-authentication-page__note { margin-top:16px; padding:16px 18px; border-radius:8px; background:#F3F4F6; color:#64748B; font-size:10px; }.fmm-authentication-page__note b { color:#374151; }.fmm-authentication-page__note p { margin:6px 0 0; }
.fmm-authentication-page .fmm-section__head { margin-top:56px!important; margin-bottom:24px; text-align:left; }
.fmm-authentication-page .fmm-section__title { margin:0; font-size:18px; font-weight:800; text-transform:none; }
.fmm-authentication-page .fmm-protsteps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0; padding:28px 22px; border:1px solid #E5E7EB; border-radius:12px; }
.fmm-authentication-page .fmm-protstep { min-height:196px; box-sizing:border-box; padding:22px; border:1px solid #DDE3EA; border-radius:14px; }
.fmm-authentication-page .fmm-protstep__n { width:30px; height:30px; margin-bottom:14px; background:#FFB91F; color:#111827; }
.fmm-authentication-page .fmm-protstep b { font-size:15px; line-height:1.25; }
.fmm-authentication-page .fmm-protstep p { font-size:14px; line-height:1.5; }
@media (max-width:900px) { .fmm-authentication-page .fmm-protsteps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .fmm-authentication-page .fmm-protsteps { grid-template-columns:1fr; padding:18px; } }

/* Authentication page: compact timeline reference layout */
.fmm-authentication-page__howto { margin-top:56px; padding:28px 22px 24px; border:1px solid #EEF0F3; border-radius:12px; }
.fmm-authentication-page__howto .fmm-section__head { margin:0 0 20px!important; text-align:center!important; }
.fmm-authentication-page__howto .fmm-section__title { font-size:18px!important; }
.fmm-authentication-page__howto .fmm-protsteps { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0; padding:0; border:0; }
.fmm-authentication-page__howto .fmm-protsteps:before { content:''; position:absolute; top:15px; left:8%; right:8%; height:1px; background:#E5E7EB; }
.fmm-authentication-page__howto .fmm-protstep { position:relative; min-height:0; padding:0 12px; border:0; border-radius:0; text-align:center; }
.fmm-authentication-page__howto .fmm-protstep__n { position:relative; z-index:1; width:38px; height:38px; margin:0 auto 14px; border:1px solid #E5E7EB; background:#fff; color:#374151; font-size:13px; }
.fmm-authentication-page__howto .fmm-protstep:last-child .fmm-protstep__n { border:0; background:#FFB91F; color:#111827; }
.fmm-authentication-page__howto .fmm-protstep b { display:block; margin-bottom:8px; font-size:11px; line-height:1.25; }
.fmm-authentication-page__howto .fmm-protstep p { margin:0; font-size:9px; line-height:1.55; color:#374151; }
@media (max-width:700px) { .fmm-authentication-page__howto .fmm-protsteps { grid-template-columns:repeat(2,1fr); gap:24px 0; }.fmm-authentication-page__howto .fmm-protsteps:before { display:none; } }
@media (max-width:420px) { .fmm-authentication-page__howto .fmm-protsteps { grid-template-columns:1fr; } }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'disputed'"] .fmm-ocard { padding:16px; min-height:250px; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'disputed'"] .fmm-ocard__title--lg { font-size:16px; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'disputed'"] .fmm-ofacts { margin-top:16px; }
.fmm-dispute-details__status { padding:9px 10px; border-radius:7px; background:#FFFBEB; }

/* Identity documents: structured account verification layout. */
.fmm-documents-page .fmm-asplit { align-items: start; }
.fmm-notifications-layout { display:grid; grid-template-columns:minmax(150px,180px) minmax(0,1fr); gap:18px; }
.fmm-notifications-layout > .fmm-pnav { display:none; }
.fmm-notifications-layout .fmm-nsplit { min-width:0; }
@media (max-width:760px) { .fmm-notifications-layout { grid-template-columns:1fr; } }
.fmm-documents-panel { display:grid; gap:18px; min-width:0; }
.fmm-documents-summary { display:flex; gap:16px; padding:22px 24px; border:1px solid #E7EAF0; border-radius:14px; background:linear-gradient(135deg,#FFFCF3 0%,#fff 62%); box-shadow:0 5px 16px rgba(15,23,42,.04); }
.fmm-documents-summary__icon { flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:#B77900; background:#FFF3C4; }
.fmm-documents-summary__icon svg { width:22px; height:22px; }
.fmm-documents-summary__body { flex:1; min-width:0; }
.fmm-documents-summary__topline { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.fmm-documents-eyebrow { display:block; margin-bottom:5px; color:#A16207; font-size:9px; font-weight:800; letter-spacing:.09em; }
.fmm-documents-summary h2,.fmm-documents-section-head h2 { margin:0; color:#24201D; font-size:18px; line-height:1.3; font-weight:800; }
.fmm-documents-summary p { margin:7px 0 0; color:#64748B; font-size:12px; line-height:1.55; }
.fmm-documents-summary__note { display:flex; align-items:center; gap:7px; margin-top:14px; color:#64748B; font-size:10px; }
.fmm-documents-summary__note svg { flex:0 0 auto; width:14px; height:14px; color:#94A3B8; }
.fmm-documents-section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-top:5px; }
.fmm-documents-section-head p { margin:4px 0 0; color:#64748B; font-size:11px; }
.fmm-documents-format { padding:5px 9px; border:1px solid #E5E7EB; border-radius:999px; color:#64748B; background:#F8FAFC; font-size:9px; white-space:nowrap; }
.fmm-documents-alert { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid #FDE68A; border-left:3px solid #F59E0B; border-radius:10px; background:#FFFBEB; }
.fmm-documents-alert__icon { display:grid; place-items:center; flex:0 0 20px; width:20px; height:20px; border-radius:50%; color:#fff; background:#F59E0B; font-size:12px; font-weight:800; }
.fmm-documents-alert b { display:block; color:#78350F; font-size:11px; }
.fmm-documents-alert p { margin:4px 0 0; color:#92400E; font-size:10px; line-height:1.45; }
.fmm-documents-alert p:empty { display:none; }
.fmm-documents-panel > .fmm-form__err { margin:0; padding:10px 12px; border-radius:8px; }
.fmm-documents-list { display:grid; gap:10px; }
.fmm-document-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:88px; padding:15px 17px; border:1px solid #E5E7EB; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.025); transition:border-color .15s,box-shadow .15s; }
.fmm-document-row:hover { border-color:#CBD5E1; box-shadow:0 5px 14px rgba(15,23,42,.06); }
.fmm-document-row.is-requested { border-color:#F6C453; box-shadow:0 0 0 2px #FFF7D6; }
.fmm-document-row__icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid #FDE68A; border-radius:11px; color:#B77900; background:#FFFBEB; font-size:10px; font-weight:800; letter-spacing:.02em; }
.fmm-document-row__icon svg { width:19px; height:19px; }
.fmm-document-row__content { min-width:0; }
.fmm-document-row__title { display:flex; align-items:center; gap:8px; min-width:0; }
.fmm-document-row__title b { color:#24201D; font-size:13px; }
.fmm-document-row__meta,.fmm-document-row__empty,.fmm-document-row__rejection { display:block; margin-top:5px; overflow:hidden; color:#64748B; font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.fmm-document-row__empty { color:#94A3B8; }
.fmm-document-row__rejection { color:#B91C1C; white-space:normal; }
.fmm-document-row__action { min-width:122px; justify-content:center; }
.fmm-documents-footer-note { display:flex; align-items:center; gap:8px; padding:2px 2px 0; color:#64748B; font-size:10px; }
.fmm-documents-footer-note svg { flex:0 0 auto; width:15px; height:15px; color:#94A3B8; }
@media (max-width:760px) {
    .fmm-documents-summary { padding:18px; }
    .fmm-documents-section-head { align-items:flex-start; flex-direction:column; gap:8px; }
    .fmm-document-row { grid-template-columns:36px minmax(0,1fr); gap:11px; padding:14px; }
    .fmm-document-row__icon { width:36px; height:36px; border-radius:9px; }
    .fmm-document-row__action { grid-column:2; width:max-content; }
}
@media (max-width:430px) {
    .fmm-documents-summary__topline { flex-direction:column; gap:10px; }
    .fmm-documents-summary__note { align-items:flex-start; }
    .fmm-document-row__action { width:100%; }
}
.fmm-snav { max-height:none!important; overflow-y:visible!important; }

/* Profile rail icons use a soft filled treatment while preserving the same
   icon shapes across Profile, Orders, and the account destinations. */
.fmm-pnav a > .fmm-pnav__icon--filled,
.fmm-pnav__out > .fmm-pnav__icon--filled {
    fill: currentColor;
    fill-opacity: .11;
    stroke-width: 1.9;
}
.fmm-pnav a.is-on > .fmm-pnav__icon--filled { fill-opacity: .18; }
.fmm-pnav__section-label { display:block; padding:7px 12px 4px; color:#94A3B8; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

/* Wishlist and Orders are destination pages, so they use the full content
   canvas instead of repeating the account rail. */
.fmm-wishlist .fmm-asplit,
.fmm-asplit:has(.fmm-tabs--underline) { display:block; }
.fmm-wishlist .fmm-asplit > .fmm-pnav,
.fmm-asplit:has(.fmm-tabs--underline) > .fmm-pnav { display:none; }
.fmm-wishlist .fmm-asplit > div,
.fmm-asplit:has(.fmm-tabs--underline) > div { width:100%; max-width:none; }
.fmm-wishlist .fmm-container,
.fmm-asplit:has(.fmm-tabs--underline) { max-width:1320px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-container { max-width:var(--fmm-container); }
.fmm-orders-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:-52px 0 12px; }
.fmm-orders-search { display:flex; align-items:center; gap:6px; width:180px; height:30px; padding:0 9px; border:1px solid #E5E7EB; border-radius:6px; color:#94A3B8; background:#fff; }
.fmm-orders-search svg { width:13px; height:13px; flex:0 0 auto; }.fmm-orders-search input { width:100%; border:0; outline:0; color:#374151; font:inherit; font-size:10px; }.fmm-orders-search input::placeholder { color:#94A3B8; }
.fmm-orders-filter,.fmm-orders-range { height:30px; padding:0 10px; border:1px solid #E5E7EB; border-radius:6px; color:#475569; background:#fff; font-size:10px; cursor:pointer; }
.fmm-orders-range { display:flex; align-items:center; gap:6px; }.fmm-orders-range svg { width:13px; height:13px; }.fmm-orders-range select { border:0; outline:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
.fmm-orders-notice { display:flex; align-items:center; gap:8px; margin:0 0 16px; padding:11px 13px; border:1px solid #FDE68A; border-radius:8px; background:#FFFBEB; color:#374151; font-size:10px; }.fmm-orders-notice img { width:16px; height:16px; object-fit:contain; }
.fmm-order-subfilters { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.fmm-order-subfilters button { padding:7px 12px; border:1px solid #E2E8F0; border-radius:999px; background:#fff; color:#64748B; font-size:10px; cursor:pointer; }
.fmm-order-subfilters button.is-on { border-color:#FBBF24; background:#FBBF24; color:#111827; font-weight:700; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ogrid--3 { grid-template-columns:minmax(0,700px); gap:16px; max-width:700px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard { border-radius:10px; padding:14px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ogrid--3 .fmm-ocard.is-selected { border-color:#FBBF24; box-shadow:0 0 0 1px #FBBF24 inset; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard .fmm-obtn--dark,
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard .fmm-obtn--brand { background:#FBBF24; border-color:#FBBF24; color:#111827; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard__foot { padding-left:0; padding-right:0; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ogrid--1 { max-width:700px; gap:10px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ogrid--1 .fmm-ocard--row.is-selected { border-color:#FBBF24; box-shadow:0 0 0 1px #FBBF24 inset; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard.is-selected { border-color:#FBBF24; box-shadow:0 0 0 1px #FBBF24 inset; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard--row { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:110px; padding:14px; border:1px solid #E5E7EB; border-radius:10px; background:#fff; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__thumb--lg { width:58px; height:58px; border-radius:5px; overflow:hidden; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__title { margin-bottom:4px; font-size:12px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__meta { margin-top:5px; font-size:9px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__price { display:block; margin-top:6px; font-size:14px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__side { display:flex; flex-direction:column; align-items:flex-end; gap:13px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__acts2 { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-obtn { padding:7px 10px; border-radius:5px; font-size:9px; }
.fmm-asplit:has(.fmm-tabs--underline) > div { position:relative; }
.fmm-asplit:has(.fmm-ogrid--1) > div { min-height:0; padding-right:0; }
.fmm-asplit:has(.fmm-ogrid--1) .fmm-ogrid--1 { max-width:none; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'active'"],
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'completed'"],
/* The completed tab's x-show gained a second condition, which silently broke
   the exact-match attribute selector above — the panel then stacked ABOVE the
   full-width list (sheet row 53). Match the class, not the expression. */
.fmm-asplit:has(.fmm-tabs--underline) .fmm-complete-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-refunded-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-pickup-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'cancelled'"] { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'active'"] .fmm-order-details,
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'completed'"] .fmm-order-details,
.fmm-asplit:has(.fmm-tabs--underline) .fmm-complete-layout .fmm-order-details,
.fmm-asplit:has(.fmm-tabs--underline) .fmm-refunded-layout .fmm-order-details { grid-column:2; grid-row:1; margin:0; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'active'"] .fmm-ogrid--3,
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'completed'"] .fmm-ogrid--1,
.fmm-asplit:has(.fmm-tabs--underline) .fmm-complete-layout .fmm-ogrid--1,
.fmm-asplit:has(.fmm-tabs--underline) .fmm-refunded-layout .fmm-ogrid--3 { grid-column:1; grid-row:1; max-width:none; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-pickup-layout .fmm-order-details { grid-column:2; grid-row:1; margin:0; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-pickup-layout .fmm-ogrid--3 { grid-column:1; grid-row:1; max-width:none; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'cancelled'"] .fmm-cancellation-details { grid-column:2; grid-row:1; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'cancelled'"] .fmm-ogrid--2 { grid-column:1; grid-row:1; max-width:none; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'cancelled'"] .fmm-ogrid--2 { grid-template-columns:minmax(0,700px); }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'disputed'"] { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'disputed'"] .fmm-dispute-details { grid-column:2; grid-row:1; }
.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'disputed'"] .fmm-ogrid--2 { grid-column:1; grid-row:1; grid-template-columns:minmax(0,700px); max-width:none; }
.fmm-dispute-details { padding:16px; border:1px solid #E2E8F0; border-radius:12px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.08); }.fmm-dispute-details__head { display:flex; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid #F1F5F9; }.fmm-dispute-details__head h2 { margin:0; font-size:13px; }.fmm-dispute-details__head small { display:block; margin-top:3px; color:#94A3B8; font-size:9px; }.fmm-dispute-details__head button { border:0; background:#F8FAFC; border-radius:50%; color:#64748B; font-size:17px; }.fmm-dispute-details h3 { margin:14px 0 7px; font-size:9px; letter-spacing:.08em; }.fmm-dispute-details__status { margin:0 0 10px; color:#D97706; font-size:11px; font-weight:700; }.fmm-dispute-details__copy { margin:0 0 16px; padding:10px; border-radius:7px; background:#F8FAFC; color:#475569; font-size:9px; line-height:1.45; }
.fmm-dispute-details__next { display:flex; justify-content:space-between; gap:8px; margin:0 0 14px; padding:10px; border-radius:7px; background:#FFFBEB; color:#64748B; font-size:9px; }.fmm-dispute-details__next b { color:#24201D; text-align:right; }.fmm-dispute-details__timeline-title { margin-top:12px!important; }.fmm-dispute-details__timeline { display:flex!important; flex-direction:column; gap:11px; margin:0 0 16px; padding-left:18px; border-left:1px solid #E2E8F0; }.fmm-dispute-details__timeline > div { position:relative; display:grid; gap:3px; color:#64748B; font-size:9px; }.fmm-dispute-details__timeline > div::before { content:''; position:absolute; left:-23px; top:1px; width:9px; height:9px; border:2px solid #CBD5E1; border-radius:50%; background:#fff; box-sizing:border-box; }.fmm-dispute-details__timeline > div.is-done::before { border-color:#FBBF24; background:#FBBF24; }.fmm-dispute-details__timeline > div.is-current { color:#24201D; font-weight:700; }.fmm-dispute-details__timeline > div.is-current::before { border-color:#FBBF24; box-shadow:0 0 0 3px #FEF3C7; }.fmm-dispute-details__timeline small { color:#94A3B8; font-size:8px; font-weight:400; }
.fmm-cancellation-details { padding:16px; border:1px solid #E2E8F0; border-radius:12px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.08); }
.fmm-cancellation-details__head { display:flex; justify-content:space-between; gap:8px; padding-bottom:13px; border-bottom:1px solid #F1F5F9; }.fmm-cancellation-details__head h2 { margin:0; font-size:13px; }.fmm-cancellation-details__head small { color:#64748B; font-size:9px; }
.fmm-cancellation-details__product { display:flex; gap:10px; margin:13px 0 17px; padding:10px; border-radius:8px; background:#F8FAFC; }.fmm-cancellation-details__product img { width:42px; height:42px; border-radius:5px; object-fit:cover; }.fmm-cancellation-details__product b,.fmm-cancellation-details__product small,.fmm-cancellation-details__product strong { display:block; }.fmm-cancellation-details__product b { font-size:10px; }.fmm-cancellation-details__product small { margin-top:3px; color:#64748B; font-size:8px; }.fmm-cancellation-details__product strong { margin-top:4px; font-size:11px; }
.fmm-cancellation-details h3 { margin:0 0 12px; font-size:9px; letter-spacing:.08em; }.fmm-cancellation-details__timeline { display:grid; gap:5px; padding-left:12px; border-left:1px solid #E2E8F0; font-size:9px; }.fmm-cancellation-details__timeline b { color:#24201D; }.fmm-cancellation-details__timeline small { color:#64748B; font-size:8px; }.fmm-cancellation-details__timeline p { margin:2px 0 7px; padding:9px; border-radius:6px; background:#F8FAFC; color:#475569; font-size:8px; line-height:1.4; }.fmm-cancellation-details__timeline .is-refund { margin-top:5px; color:#D97706; }.fmm-cancellation-details__timeline > span { color:#CBD5E1; }
.fmm-cancellation-details__support { display:block; margin-top:8px; padding:9px; border:1px solid #E2E8F0; border-radius:7px; color:#24201D; text-align:center; font-size:9px; text-decoration:none; }
.fmm-order-details { position:relative; z-index:1; top:auto; right:auto; width:300px; margin:0 0 16px auto; padding:18px; border:1px solid #E2E8F0; border-radius:12px; background:#fff; box-shadow:0 12px 30px rgba(15,23,42,.10); }
.fmm-order-details__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid #F1F5F9; }.fmm-order-details__head h2 { margin:0; color:#24201D; font-size:14px; font-weight:800; }.fmm-order-details__head button { width:24px; height:24px; border:0; border-radius:50%; background:#F8FAFC; color:#64748B; font-size:18px; line-height:1; cursor:pointer; }
.fmm-order-details__product { display:flex; gap:11px; margin:15px 0 16px; padding-bottom:15px; border-bottom:1px solid #E5E7EB; }.fmm-order-details__product img { width:50px; height:50px; object-fit:cover; border-radius:8px; background:#F8FAFC; }.fmm-order-details__product b,.fmm-order-details__product small,.fmm-order-details__product strong { display:block; }.fmm-order-details__product b { color:#24201D; font-size:11px; line-height:1.35; }.fmm-order-details__product small { margin-top:4px; color:#94A3B8; font-size:9px; }.fmm-order-details__product strong { margin-top:5px; color:#24201D; font-size:14px; }
.fmm-order-details__status { display:flex; justify-content:space-between; gap:10px; margin-bottom:15px; font-size:10px; }.fmm-order-details__status span { color:#64748B; }.fmm-order-details__status b { color:#DC2626; font-weight:700; }.fmm-order-details__timeline { position:relative; display:grid; gap:13px; margin:0 0 18px; padding-left:19px; color:#64748B; font-size:10px; }.fmm-order-details__timeline::before { content:''; position:absolute; left:4px; top:4px; bottom:4px; width:1px; background:#E2E8F0; }.fmm-order-details__timeline span { position:relative; }.fmm-order-details__timeline span::before { content:''; position:absolute; left:-19px; top:2px; width:8px; height:8px; border:2px solid #CBD5E1; border-radius:50%; background:#fff; box-sizing:border-box; }.fmm-order-details__timeline .is-done::before { border-color:#FBBF24; background:#FBBF24; }.fmm-order-details__timeline .is-current { color:#24201D; font-weight:700; }.fmm-order-details__timeline .is-current::before { border-color:#FBBF24; box-shadow:0 0 0 3px #FEF3C7; }.fmm-order-details__button { display:block; padding:11px; border-radius:8px; background:#FBBF24; color:#111827; text-align:center; font-size:10px; font-weight:800; text-decoration:none; }
@media (max-width:700px) { .fmm-orders-toolbar { margin:0 0 12px; justify-content:flex-start; flex-wrap:wrap; }.fmm-asplit:has(.fmm-tabs--underline) .fmm-ogrid--3 { grid-template-columns:1fr; } }
@media (max-width:900px) { .fmm-order-details,.fmm-cancellation-details,.fmm-dispute-details { position:relative; width:auto; margin:0 0 16px; }.fmm-asplit:has(.fmm-ogrid--1) > div { min-height:0; padding-right:0; }.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'active'"],.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'completed'"],.fmm-asplit:has(.fmm-tabs--underline) .fmm-complete-layout,.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'cancelled'"],.fmm-asplit:has(.fmm-tabs--underline) > div > div[x-show="tab === 'disputed'"],.fmm-asplit:has(.fmm-tabs--underline) .fmm-refunded-layout,.fmm-asplit:has(.fmm-tabs--underline) .fmm-pickup-layout { display:block!important; } }
.fmm-offers-page .fmm-asplit { display:block; }
.fmm-offers-page .fmm-asplit > .fmm-pnav { display:none; }
.fmm-offers-page .fmm-asplit > div { width:100%; max-width:none; }
.fmm-offers-page .fmm-container { max-width:1320px; }
.fmm-disputes-page .fmm-asplit,
.fmm-documents-full-page .fmm-asplit { display:block; }
.fmm-disputes-page .fmm-asplit > .fmm-pnav,
.fmm-documents-full-page .fmm-asplit > .fmm-pnav { display:none; }
.fmm-disputes-page .fmm-asplit > div,
.fmm-documents-full-page .fmm-asplit > div { width:100%; max-width:none; }
.fmm-disputes-page .fmm-container,
.fmm-documents-full-page .fmm-container { max-width:1320px; }
.fmm-disputes-page .fmm-container { max-width:var(--fmm-container); }
.fmm-auth-detail-page .fmm-container { max-width:1280px; }
.fmm-auth-detail-page .fmm-prothero { max-width:none; padding:54px 0 14px; text-align:center; }
.fmm-auth-detail-page .fmm-prothero h1 { margin:0 0 12px; font-size:36px; line-height:1.2; }
.fmm-auth-detail-page .fmm-prothero p { max-width:620px; margin:0 auto; font-size:16px; line-height:1.5; }
.fmm-auth-detail-page .fmm-prothero { box-sizing:border-box; width:100%; min-height:322px; margin:24px 0 0; padding:48px; border:1px solid rgba(234,179,8,.12); border-radius:16px; background:#FEF9C3; }
.fmm-auth-detail-page__icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 20px; border-radius:14px; background:#FBBF24; color:#111827; font-size:28px; line-height:1; }
.fmm-auth-detail-page .fmm-prothero h1 { margin:0 0 10px; font-family:var(--fmm-font-ui); font-size:38px; line-height:1.2; font-weight:700; color:#000; }
.fmm-auth-detail-page .fmm-prothero p { max-width:650px; font-size:16px; line-height:1.5; color:#000; }
.fmm-auth-detail-page > .fmm-container > .fmm-section__head { margin-top:38px!important; margin-bottom:22px; }
.fmm-auth-detail-page > .fmm-container > .fmm-section__head .fmm-section__title { font-size:26px; text-transform:none; }
.fmm-auth-detail-page .fmm-panel { min-height:104px; box-sizing:border-box; padding:24px; border:1px solid #E5E7EB; border-radius:14px; }
.fmm-auth-detail-page__brands { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.fmm-auth-detail-page__brands .fmm-panel { min-height:130px; padding:22px 20px; border:1px solid #EEF0F3; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.03); }
.fmm-auth-detail-page__brand-title { display:flex; align-items:center; gap:10px; font-size:17px; }
.fmm-auth-detail-page__brand-title > span { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#FFF9E6; color:#FBBF24; font-size:13px; font-weight:700; }
.fmm-auth-detail-page__brand-title strong { margin-left:auto; color:#111827; font-size:14px; font-weight:800; }
.fmm-auth-detail-page__brands .fmm-chip { padding:5px 10px; border:1px solid #F1F3F5; border-radius:5px; background:#F8F9FA; font-size:11px; }
.fmm-auth-detail-page__notes { margin-top:48px; padding:20px; border:1px solid #E5E7EB; border-radius:10px; background:#F8FAFC; color:#374151; }
.fmm-auth-detail-page__notes h2 { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:15px; font-weight:800; }
.fmm-auth-detail-page__notes h2 span { color:#475569; font-size:15px; }
.fmm-auth-detail-page__notes ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; font-size:13px; line-height:1.45; }
.fmm-auth-detail-page__notes li { display:flex; gap:10px; }
.fmm-auth-detail-page__notes li span { color:#94A3B8; font-size:16px; line-height:1.1; }
.fmm-documents-page .fmm-container { max-width:1280px; }
.fmm-documents-page .fmm-page-head { margin-bottom:24px; }
.fmm-documents-page .fmm-page-head h1 { font-size:30px; letter-spacing:-.5px; }
.fmm-documents-page .fmm-page-head p { font-size:14px; }
.fmm-documents-page .fmm-scard { border:1px solid #E5E7EB; border-radius:14px; box-shadow:0 2px 8px rgba(15,23,42,.03); background:#fff; }
.fmm-documents-page .fmm-scard[style*="margin-bottom:20px"] { padding:22px 24px!important; }
.fmm-documents-page .fmm-scard[style*="margin-bottom:14px"] { padding:16px 20px!important; }
.fmm-documents-page .fmm-scard b { color:#24201D; }
.fmm-documents-page .fmm-btn { min-height:36px; padding:8px 16px; border-radius:8px; }
@media (max-width:700px) { .fmm-documents-page .fmm-page-head h1 { font-size:25px; }.fmm-documents-page .fmm-asplit { grid-template-columns:1fr; }.fmm-documents-page .fmm-pnav { order:2; } }
.fmm-snav { max-height:none; overflow-y:visible; }
.fmm-verification-pricing__item-link { display:block; color:inherit; text-decoration:none; }
.fmm-verification-pricing__item-link:hover .fmm-verification-pricing__item { border-color:#FBBF24; background:#FFFCF0; }
.fmm-auth-detail-page .fmm-cats { grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:16px; }
.fmm-auth-detail-page .fmm-cat { min-height:110px; padding:20px; border:1px solid #E5E7EB; border-radius:12px; box-shadow:none; }
.fmm-auth-detail-page .fmm-cat__label { font-size:15px; }
.fmm-auth-detail-page .fmm-noresults__acts { justify-content:center; }
@media (max-width:900px) { .fmm-auth-detail-page .fmm-cats { grid-template-columns:repeat(2,minmax(0,1fr))!important; } }
@media (max-width:600px) { .fmm-auth-detail-page__brands { grid-template-columns:1fr; } }
@media (max-width:560px) { .fmm-auth-detail-page .fmm-cats { grid-template-columns:1fr!important; }.fmm-auth-detail-page .fmm-prothero { min-height:0; padding:32px 20px; }.fmm-auth-detail-page .fmm-prothero h1 { font-size:28px; } }
.fmm-authentication-page__hero { position:relative; overflow:hidden; box-sizing:border-box; width:100%; max-width:none; margin:24px 0 24px; padding:24px 20px; border:1px solid #E5E7EB; border-radius:10px; text-align:left; background:#fff; }
.fmm-authentication-page__hero:after { content:''; position:absolute; top:-80px; right:-80px; width:256px; height:256px; border-radius:999px; background:#FFD700; opacity:.1; filter:blur(32px); pointer-events:none; }
.fmm-authentication-page__hero > * { position:relative; z-index:1; }
.fmm-authentication-page__hero .fmm-pill { gap:6px; margin:0 0 12px; padding:4px 10px; border:1px solid rgba(255,215,0,.17); border-radius:999px; background:rgba(255,249,214,.74); color:#FBBF24; font-size:10px; font-weight:600; }
.fmm-authentication-page__hero .fmm-pill svg { width:11px; height:11px; }
.fmm-authentication-page__hero h1 { max-width:520px; margin:0 0 10px; font-size:24px; line-height:1.2; letter-spacing:-.4px; }
.fmm-authentication-page__hero p { max-width:540px; margin:0; font-size:12px; line-height:1.8; }
.fmm-authentication-page .fmm-authentication-page__hero { max-width:none!important; }
.fmm-authentication-page .fmm-authentication-page__hero .fmm-pill { align-self:flex-start; margin-left:0; padding:5px 10px; }
.fmm-authentication-page .fmm-authentication-page__hero { box-sizing:border-box; min-height:328px; padding:32px; border-radius:16px; text-align:left!important; }
.fmm-authentication-page .fmm-authentication-page__hero h1 { max-width:672px; margin:16px 0; font-family:Inter, sans-serif; font-size:36px; font-weight:700; line-height:46px; letter-spacing:-.9px; text-align:left; }
.fmm-authentication-page .fmm-authentication-page__hero p { max-width:672px; margin:0; font-family:Inter, sans-serif; font-size:18px; font-weight:400; line-height:36px; text-align:left; }
.fmm-authentication-page__howto { border:0; }
.fmm-authentication-page__howto { border:none!important; box-shadow:none!important; }
.fmm-authentication-page__howto .fmm-section__head { display:flex!important; justify-content:center!important; width:100%; text-align:center!important; }
.fmm-verification-pricing__icon img { width:18px; height:18px; object-fit:contain; }
.fmm-verification-pricing__brands { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }.fmm-verification-pricing__brands span { padding:3px 6px; border:1px solid #E5E7EB; border-radius:4px; background:#F8FAFC; color:#475569; font-size:9px; }.fmm-verification-pricing__brands b { margin-left:3px; color:#111827; font-size:9px; }

/* --- toast ---------------------------------------------------------------- */
.fmm-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    z-index: 60;
    background: var(--fmm-dark); color: #fff;
    border-radius: 10px; padding: 13px 22px;
    font-size: 14px; font-weight: 600;
    box-shadow: var(--fmm-shadow-lg);
    max-width: calc(100vw - 32px);
}
.fmm-toast--error { background: #B91C1C; }

@media (max-width: 900px) {
    .fmm-cart { grid-template-columns: 1fr; }
    .fmm-cart__summary { position: static; }
}
@media (max-width: 560px) {
    .fmm-line { grid-template-columns: auto 76px minmax(0, 1fr); }
    .fmm-line__thumb { width: 76px; height: 76px; }
    .fmm-line__price { grid-column: 2; text-align: left; }
}

/* --- empty state ---------------------------------------------------------- */
.fmm-empty {
    padding: 48px 24px; text-align: center;
    border: 1px dashed var(--fmm-border);
    border-radius: var(--fmm-radius);
    color: var(--fmm-muted); font-size: 15px;
}

/* --- footer --------------------------------------------------------------- */
.fmm-backtotop {
    display: block; text-align: center;
    background: var(--fmm-dark); color: #fff;
    border-top: 4px solid var(--fmm-yellow);
    padding: 16px; font-size: 14px; font-weight: 600;
    margin-top: 24px;
}
.fmm-backtotop:hover { color: var(--fmm-yellow); }

.fmm-footer { background: #111; color: #fff; padding: 0; }
.fmm-footer .fmm-container { padding-top: 64px; padding-bottom: 32px; }
.fmm-footer__grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px;
    padding-bottom: 24px;
}
.fmm-footer__title {
    margin: 0 0 24px;
    color: #fff;
    font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: .025em;
}
.fmm-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fmm-footer__list a { color: #A0A0A0; font-size: 14px; line-height: 20px; }
.fmm-footer__list a:hover { color: #fff; }

.fmm-footer__trust {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
    margin: 40px 0;
    padding: 33px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}
.fmm-tcard {
    display: flex; align-items: center; gap: 16px;
    min-height: 74px;
    padding: 16px;
    border: 1px solid #333;
    border-radius: 12px;
    background: rgba(26, 26, 26, .5);
    color: #fff;
    font-size: 14px; font-weight: 500; line-height: 20px;
}
.fmm-tcard__icon {
    display: grid; flex: 0 0 auto; place-items: center;
    width: 40px; height: 40px;
    border-radius: 9999px;
    background: #222;
}
.fmm-tcard__icon img { max-width: 22.5px; max-height: 18px; }

.fmm-footer__base {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 24px;
}
.fmm-footer__tag { margin: 8px 0 0; color: #A0A0A0; font-size: 14px; line-height: 20px; }
.fmm-footer__prefs { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.fmm-footer__prefs img { flex: 0 0 auto; }
.fmm-footer__prefs .fmm-ship-to {
    display: inline-flex; align-items: center; gap: 8px;
    padding-right: 16px;
    color: #A0A0A0;
    font-size: 14px; line-height: 20px;
}
.fmm-ship-to > img { width: 10.5px; height: 14px; }
.fmm-pref {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 17px;
    border: 1px solid #333;
    border-radius: 9999px;
    background: #1A1A1A;
    color: #fff;
    font-size: 14px; font-weight: 400; line-height: 20px;
}
.fmm-pref > img:not(.fmm-pref__chevron):not(.fmm-footer__flag):not(.fmm-pref__currency) { max-width: 14px; max-height: 14px; }
.fmm-pref__chevron { width: 12px; height: 12px; margin-left: 4px; }
.fmm-footer__flag { width: 16px; height: 9px; border-radius: 2px; object-fit: cover; opacity: .9; }
.fmm-pref-menu { position: relative; }
.fmm-pref-menu > summary { list-style: none; cursor: pointer; }
.fmm-pref-menu > summary::-webkit-details-marker { display: none; }
.fmm-pref-menu[open] .fmm-pref__chevron { transform: rotate(180deg); }
.fmm-pref > img:not(.fmm-pref__chevron):not(.fmm-footer__flag):not(.fmm-pref__currency) { width: 14px; height: 14px; }
.fmm-pref-menu__panel {
    position: absolute; z-index: 10; right: 0; bottom: calc(100% + 8px);
    display: grid; min-width: 176px; padding: 6px;
    border: 1px solid #333; border-radius: 12px;
    background: #1a1a1a; box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
}
.fmm-pref-menu__option {
    display: block; width: 100%; padding: 9px 11px;
    border: 0; border-radius: 8px; background: transparent;
    color: #fff; font: inherit; font-size: 14px; line-height: 20px; text-align: left;
}
button.fmm-pref-menu__option { cursor: pointer; }
button.fmm-pref-menu__option:hover, .fmm-pref-menu__option.is-current { background: #292929; }
.fmm-pref-menu__note { padding: 7px 11px 5px; color: #a0a0a0; font-size: 12px; line-height: 16px; }

.fmm-footer__legal {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px;
    margin-top: 40px;
    color: #A0A0A0;
    font-size: 12px; line-height: 16px;
}
.fmm-footer__legal > span:first-child { display: flex; flex-wrap: wrap; gap: 24px; }
.fmm-footer__legal a { margin: 0; }
.fmm-footer__legal a:hover { color: #fff; }

@media (max-width: 1080px) {
    .fmm-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .fmm-footer__trust { grid-template-columns: repeat(2, 1fr); }
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
    .fmm-cat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1080px) {
    /* Keep the floating brand and proof details inside the promo on laptops. */
    .fmm-promo__brand { right: 24%; }
    .fmm-promo__proof { right: 28px; }
    .fmm-verify { grid-template-columns: 1.1fr 1fr; }
    .fmm-promo__body { padding: 40px 32px; }
    .fmm-verify { padding: 40px 32px; gap: 32px; }
    /* The hero stays two-up on a laptop. It used to collapse here, which on a
       1024px screen dropped the shopper image a full screen below the copy and
       left the fold looking like a text page. Tighter columns instead; it only
       stacks at tablet width (see below). */
    .fmm-hero__grid { grid-template-columns: 52% 1fr; gap: 24px; }
    .fmm-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .fmm-header__bar { height: auto; flex-wrap: wrap; gap: 14px; padding: 14px 0; }
    .fmm-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
    .fmm-ship-to, .fmm-header__divider { display: none; }
    .fmm-header__actions { margin-left: auto; }
    /* The promo is a single, image-backed banner at every breakpoint. */
    .fmm-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .fmm-verify { grid-template-columns: 1fr; }
    .fmm-promo { min-height: 470px; }
    .fmm-promo__body { width: 78%; padding: 36px 32px; }
    .fmm-promo__lead { font-size: 17px; }
    .fmm-promo__proof { display: none; }
    .fmm-promo__brand { top: 24px; right: 24px; }
    .fmm-verify__panel { max-width: 520px; margin-inline: auto; }
    .fmm-hero__title { font-size: 40px; }
    .fmm-section { padding: 26px 0; }
}

@media (max-width: 860px) {
    .fmm-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 560px) {
    .fmm-container { padding: 0 16px; }
    .fmm-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .fmm-rail > * { flex-basis: 200px; }
    .fmm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    .fmm-trust { display: none; }
    .fmm-footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .fmm-footer__trust { grid-template-columns: 1fr; }
    .fmm-pc__actions { grid-template-columns: 1fr; }
}

/* --- buyer protection page ------------------------------------------------ */
.fmm-prothero { text-align: center; padding: 32px 0 8px; max-width: 640px; margin: 0 auto; }
.fmm-prothero h1 {
    font-family: var(--fmm-font-display);
    font-size: clamp(30px, 4vw, 44px); line-height: 1.15; font-weight: 700;
    margin: 22px 0 14px;
}
.fmm-prothero p { font-size: 16px; line-height: 1.75; color: var(--fmm-muted); margin: 0; }

.fmm-protsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fmm-protstep { border: 1px solid var(--fmm-border); border-radius: 14px; padding: 22px; }
.fmm-protstep__n {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--fmm-yellow); color: var(--fmm-dark);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 800; margin-bottom: 14px;
}
.fmm-protstep b { display: block; font-size: 15px; margin-bottom: 6px; }
.fmm-protstep p { font-size: 13px; line-height: 1.6; color: var(--fmm-muted); margin: 0; }

@media (max-width: 900px) { .fmm-protsteps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fmm-protsteps { grid-template-columns: 1fr; } }

/* --- product reviews page ------------------------------------------------- */
.fmm-review__big { display: block; font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.fmm-review__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--fmm-yellow); }

.fmm-ratebars { display: grid; gap: 8px; margin-top: 18px; text-align: left; }
.fmm-ratebar { display: grid; grid-template-columns: 12px 1fr 28px; align-items: center; gap: 10px; font-size: 12px; }
.fmm-ratebar__track { height: 7px; border-radius: 999px; background: var(--fmm-border); overflow: hidden; }
.fmm-ratebar__track span { display: block; height: 100%; background: var(--fmm-yellow); border-radius: 999px; }

/* Authentication page: Figma-style how-it-works cards */
.fmm-authentication-page .fmm-section__head { margin-top:56px!important; margin-bottom:24px!important; text-align:left!important; }
.fmm-authentication-page .fmm-section__title { margin:0; font-size:18px!important; font-weight:800; text-transform:none; }
.fmm-authentication-page .fmm-protsteps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0; padding:28px 22px; border:1px solid #E5E7EB; border-radius:12px; }
.fmm-authentication-page .fmm-protstep { min-height:196px; box-sizing:border-box; padding:22px; border:1px solid #DDE3EA; border-radius:14px; }
.fmm-authentication-page .fmm-protstep__n { width:30px; height:30px; margin-bottom:14px; background:#FFB91F; color:#111827; }
.fmm-authentication-page .fmm-protstep b { font-size:15px; line-height:1.25; }
.fmm-authentication-page .fmm-protstep p { font-size:14px; line-height:1.5; }
@media (max-width:900px) { .fmm-authentication-page .fmm-protsteps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .fmm-authentication-page .fmm-protsteps { grid-template-columns:1fr; padding:18px; } }

.fmm-review__photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.fmm-review__photos img {
    width: 84px; height: 84px; object-fit: cover;
    border-radius: 10px; border: 1px solid var(--fmm-border);
}

.fmm-review__acts { display: flex; gap: 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fmm-border); }
/* 4px of vertical padding takes these from 16px to 24px tall — the WCAG 2.5.8
   floor. They are bare buttons with no wrapping label, so the button IS the
   whole tap target, which made them the hardest thing on the page to hit. */
.fmm-review__acts button {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 0; padding: 4px 0;
    font: inherit; font-size: 13px; color: var(--fmm-muted);
}
.fmm-review__acts button:hover:not(:disabled) { color: var(--fmm-text); }

/* --- customer reviews screen ---------------------------------------------
   Scoped to the standalone product-review route. Product-detail review cards
   use the same data/actions but deliberately retain their own layout. */
.fmm-reviews-page__head { align-items: center; margin-bottom: 18px; }
.fmm-reviews-page__head h1 { font-size: 24px; line-height: 1.2; }
.fmm-reviews-page__back {
    width: 40px;
    height: 40px;
    border-color: #E5E7EB;
    background: #fff;
    color: #111827;
}
.fmm-reviews-page__back:hover { background: #F9FAFB; border-color: #D1D5DB; }
.fmm-reviews-page__head .fmm-btn--primary {
    min-height: 38px;
    border: 0;
    box-shadow: none;
    font-weight: 700;
}

/* The summary is a fixed right rail; all review interactions stay in the
   reading column on the left. */
.fmm-reviews-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 308px;
    gap: 30px;
    align-items: start;
}
.fmm-reviews-page__main { min-width: 0; }
.fmm-reviews-page__product {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 142px;
    margin-bottom: 24px;
    padding: 20px 24px;
}
.fmm-reviews-page__product-thumb { width: 94px; height: 94px; flex: 0 0 94px; }
.fmm-reviews-page__product > div {
    display: grid;
    gap: 9px;
}
.fmm-reviews-page__product > div > b { font-size: 18px !important; }
.fmm-reviews-page__product .fmm-review__stars { margin: 0; }
.fmm-reviews-page__rating {
    min-height: 322px;
    padding: 25px 24px;
    text-align: center;
}
.fmm-reviews-page__rating .fmm-review__big { font-size: 42px; }
.fmm-reviews-page__rating .fmm-line__meta { margin: 0; }
.fmm-reviews-page__rating .fmm-ratebars { margin-top: 12px; gap: 7px; }
/* The reference only shows the star number on the left of each bar; hiding the
   right count changes no API data and keeps the breakdown visually clean. */
.fmm-reviews-page__rating .fmm-ratebar { grid-template-columns: 12px 1fr; gap: 9px; }
.fmm-reviews-page__rating .fmm-ratebar > :last-child { display: none; }

/* Topic buttons are neutral outlined controls. The selected state remains
   visible for keyboard/screen-reader users without turning the whole pill into
   a coloured filter chip. The current sort is the only highlighted control. */
.fmm-reviews-page__filters {
    padding: 15px 16px;
    margin: 0 0 24px;
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
}
.fmm-reviews-page .fmm-fchip {
    background: #fff;
    border-color: #D1D5DB;
    color: #374151;
    padding: 8px 13px;
}
.fmm-reviews-page .fmm-fchip:hover,
.fmm-reviews-page .fmm-fchip.is-on {
    background: #fff;
    border-color: #9CA3AF;
    color: #111827;
}
.fmm-reviews-page .fmm-toolbar__sort select {
    min-height: 40px;
    border-color: #F7D994;
    background-color: #FFF8E5;
    color: #374151;
}

.fmm-reviews-page__item {
    padding: 24px;
    margin-bottom: 14px;
    border-radius: 12px;
}
.fmm-reviews-page__review-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.fmm-reviews-page__review-head .fmm-review__av { width: 48px; height: 48px; }
.fmm-reviews-page__review-meta { display: grid; gap: 4px; min-width: 0; }
.fmm-reviews-page__author,
.fmm-reviews-page__review-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fmm-reviews-page__author > b { font-size: 18px; font-weight: 700; line-height: 24px; }
.fmm-reviews-page__author .fmm-chip--verified {
    min-height: 24px;
    gap: 5px;
    padding: 3px 8px;
    border: 0;
    border-radius: 8px;
    background: #E7F5EB;
    color: #1D7D3A;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}
.fmm-reviews-page__author .fmm-chip--verified svg {
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    padding: 2px;
    border-radius: 50%;
    background: #21843E;
    color: #fff;
}
.fmm-reviews-page__review-rating { gap: 14px; }
.fmm-reviews-page__review-rating .fmm-review__stars svg { width: 14px; height: 14px; }
.fmm-reviews-page__review-rating .fmm-line__meta {
    margin: 0;
    color: #6B7280;
    font-size: 13px;
    line-height: 18px;
}
.fmm-reviews-page__review-title {
    display: block;
    padding-top: 16px;
    margin: 0 0 6px !important;
    color: #111827 !important;
}
.fmm-reviews-page__item > p,
.fmm-reviews-page__item .fmm-review__acts button,
.fmm-reviews-page__item .fmm-review__acts button:hover:not(:disabled) {
    color: #000000;
}
/* The review body currently has an inline muted colour, so this must be
   important to honour the Figma black text without touching other pages. */
.fmm-reviews-page__item > p {
    margin-top: 0 !important;
    color: #000000 !important;
}

@media (max-width: 720px) {
    .fmm-reviews-page__layout { grid-template-columns: 1fr; }
    .fmm-reviews-page__product,
    .fmm-reviews-page__rating { min-height: auto; }
    .fmm-reviews-page__filters { align-items: flex-start; }
}

/* --- seller: publish listing ---------------------------------------------- */
.fmm-shipopt {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--fmm-border); border-radius: 14px;
    padding: 16px 18px; cursor: pointer;
}
.fmm-shipopt:hover { border-color: var(--fmm-faint); }
.fmm-shipopt.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }
.fmm-shipopt__icon {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: #fff; color: var(--fmm-muted);
    display: grid; place-items: center;
}
.fmm-shipopt b { display: block; font-size: 15px; }
.fmm-shipopt span span { font-size: 12.5px; color: var(--fmm-muted); }
.fmm-shipopt__tick {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--fmm-border); background: #fff;
    display: grid; place-items: center; color: transparent;
}
.fmm-shipopt.is-on .fmm-shipopt__tick {
    background: var(--fmm-yellow); border-color: var(--fmm-yellow); color: var(--fmm-dark);
}

.fmm-pubsum { border-radius: var(--fmm-radius-lg); overflow: hidden; border: 1px solid var(--fmm-border); }
.fmm-pubsum h2 {
    background: var(--fmm-dark); color: #fff;
    font-size: 16px; font-weight: 800; margin: 0; padding: 18px 20px;
}
.fmm-pubsum__body { padding: 18px 20px 20px; background: #fff; }

/* --- packages dashboard --------------------------------------------------- */
.fmm-segment { display: inline-flex; background: var(--fmm-bg-alt); border-radius: 10px; padding: 4px; }
.fmm-segment a {
    padding: 8px 18px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--fmm-muted);
}
.fmm-segment a.is-on { background: var(--fmm-yellow); color: var(--fmm-dark); font-weight: 700; }

.fmm-statcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.fmm-statcard {
    border: 1px solid var(--fmm-border); border-radius: 14px;
    padding: 18px; display: block;
}
.fmm-statcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fmm-statcard__ico {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--fmm-bg-alt); color: var(--fmm-muted);
    display: grid; place-items: center;
}
.fmm-statcard__tag {
    font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--fmm-faint);
}
.fmm-statcard b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.fmm-statcard > span:last-child { font-size: 13px; color: var(--fmm-muted); }
.fmm-statcard--hot { background: var(--fmm-yellow); border-color: var(--fmm-yellow); }
.fmm-statcard--hot .fmm-statcard__ico { background: rgba(255,255,255,.5); color: var(--fmm-dark); }
.fmm-statcard--hot .fmm-statcard__tag,
.fmm-statcard--hot > span:last-child { color: rgba(35,31,32,.72); }

.fmm-pkgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fmm-pkg {
    border: 1px solid var(--fmm-border); border-radius: 14px;
    padding: 14px; display: flex; flex-direction: column; gap: 4px;
    transition: border-color .15s, opacity .15s;
}
.fmm-pkg.is-picked { border-color: var(--fmm-yellow); box-shadow: 0 0 0 1px var(--fmm-yellow); }
.fmm-pkg.is-busy { opacity: .5; pointer-events: none; }
.fmm-pkg__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fmm-pkg__pick input { accent-color: var(--fmm-yellow); width: 16px; height: 16px; }
.fmm-pkg__ref { font-size: 10.5px; color: var(--fmm-faint); font-weight: 700; letter-spacing: .04em; }
.fmm-pkg__title { font-size: 13.5px; line-height: 1.4; margin-top: 4px; }

.fmm-pkg__weights {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    background: var(--fmm-bg-alt); border-radius: 9px;
    padding: 10px; margin: 10px 0 8px;
}
.fmm-pkg__weights b { font-size: 12.5px; display: block; }
.fmm-pkg__billable { grid-column: 1 / -1; border-top: 1px solid var(--fmm-border); padding-top: 8px; }

.fmm-pkg__note {
    display: flex; align-items: flex-start; gap: 6px;
    background: #EFF6FF; color: #1D4ED8;
    border-radius: 7px; padding: 8px 10px; margin: 0 0 10px;
    font-size: 11.5px; line-height: 1.45;
}
.fmm-pkg__note svg { flex-shrink: 0; margin-top: 1px; }

.fmm-pkg__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.fmm-pkg__menu { position: relative; }
.fmm-pkg__menu > button {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--fmm-border); background: #fff;
    font-size: 15px; color: var(--fmm-muted); line-height: 1;
}

.fmm-pkgadd {
    width: 100%; margin-top: 20px;
    border: 1.5px dashed var(--fmm-border); border-radius: 14px;
    background: #fff; padding: 22px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--fmm-muted);
}
.fmm-pkgadd:hover { border-color: var(--fmm-yellow); color: var(--fmm-text); }
.fmm-pkgadd__plus {
    width: 24px; height: 24px; border-radius: 6px;
    border: 1.5px dashed var(--fmm-faint);
    display: grid; place-items: center; font-size: 15px;
}

/* sticky pay bar */
.fmm-paybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: #fff; border-top: 1px solid var(--fmm-border);
    box-shadow: 0 -6px 24px rgba(16,24,40,.08);
    padding: 14px 0;
}
.fmm-paybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fmm-paybar b { font-size: 20px; font-weight: 800; margin: 0 12px; }

@media (max-width: 1100px) { .fmm-pkgs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
    .fmm-statcards { grid-template-columns: repeat(2, 1fr); }
    .fmm-pkgs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .fmm-pkgs { grid-template-columns: 1fr; } }

/* --- checkout step pages (address / payment selection) -------------------- */
.fmm-addrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.fmm-addrcard {
    position: relative; display: block; cursor: pointer;
    border: 1px solid var(--fmm-border); border-radius: 14px;
    padding: 18px; padding-bottom: 44px;
}
.fmm-addrcard:hover { border-color: var(--fmm-faint); }
.fmm-addrcard.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }
.fmm-addrcard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fmm-addrcard__tick {
    margin-left: auto;
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--fmm-border); background: #fff;
    display: grid; place-items: center; color: transparent;
}
.fmm-addrcard.is-on .fmm-addrcard__tick {
    background: var(--fmm-yellow); border-color: var(--fmm-yellow); color: var(--fmm-dark);
}
.fmm-addrcard b { display: block; font-size: 15px; margin-bottom: 6px; }
.fmm-addrcard__lines { display: block; font-size: 13px; line-height: 1.6; color: var(--fmm-muted); }
.fmm-addrcard__lines span { display: block; }
.fmm-addrcard__phone {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: 13px; color: var(--fmm-muted);
}
.fmm-addrcard__edit {
    position: absolute; right: 18px; bottom: 14px;
    font-size: 12px; font-weight: 700; color: var(--fmm-yellow-dark);
}
.fmm-step__title { display: flex; align-items: center; }

/* --- write a review ------------------------------------------------------- */
.fmm-wr__item { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.fmm-wr__seller { text-align: right; padding-left: 20px; border-left: 1px solid var(--fmm-border); }
.fmm-wr__seller b { display: block; font-size: 13.5px; margin-top: 3px; }

.fmm-wr__step { padding: 24px 26px; border-bottom: 1px solid var(--fmm-border); }
.fmm-wr__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.fmm-wr__head h2 { font-size: 16px; font-weight: 800; margin: 0; }

.fmm-wr__rate { background: var(--fmm-bg-alt); border-radius: 12px; padding: 26px; text-align: center; }
.fmm-wr__rate p { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.fmm-wr__ratelabel { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--fmm-yellow-dark); min-height: 20px; }

/* .fmm-textarea is the same control outside a labelled .fmm-field wrapper. */
.fmm-field textarea,
.fmm-textarea {
    width: 100%; padding: 12px 14px; resize: vertical;
    border: 1px solid var(--fmm-border); border-radius: 10px;
    font: inherit; font-size: 14.5px; line-height: 1.6; background: #fff;
}
.fmm-field textarea:focus,
.fmm-textarea:focus { outline: 2px solid var(--fmm-yellow); outline-offset: -1px; border-color: transparent; }
.fmm-wr__count { display: flex; justify-content: space-between; font-size: 12px; color: var(--fmm-faint); }

.fmm-wr__photos { display: flex; gap: 12px; flex-wrap: wrap; }
.fmm-wr__photo { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; }
.fmm-wr__photo img { width: 100%; height: 100%; object-fit: cover; }
.fmm-wr__photo button {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px; border-radius: 50%; border: 0;
    background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 1;
}
.fmm-wr__upload {
    width: 84px; height: 84px; border-radius: 10px; cursor: pointer;
    border: 1.5px dashed var(--fmm-border); background: var(--fmm-bg-alt);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    font-size: 11px; color: var(--fmm-muted);
}
.fmm-wr__upload:hover { border-color: var(--fmm-yellow); }

.fmm-wr__rec { display: flex; gap: 14px; }
.fmm-wr__rec button {
    flex: 1; max-width: 220px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px; border: 1px solid var(--fmm-border); border-radius: 10px;
    background: #fff; font: inherit; font-size: 14px; font-weight: 600;
}
.fmm-wr__rec button.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }

.fmm-wr__foot { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 20px 26px; }

/* --- vendor shell -------------------------------------------------------
   The seller area has its own chrome in the design: a dark bar with the logo,
   one search, a bell and the avatar, then a second dark strip carrying four
   tabs with a yellow underline on the active one. Deliberately NOT the buyer
   header — different product, different navigation model. */

/* Needs its own stacking context above the page: the avatar dropdown lives
   inside the header, and without this it painted behind the first card on the
   page — open, but invisible. */
.fmm-vheader { position: relative; z-index: 60; background: var(--fmm-dark); color: #fff; }

.fmm-vheader__bar {
    max-width: var(--fmm-container);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.fmm-vlogo { color: #FFF; text-decoration: none; }

.fmm-vsearch {
    flex: 1;
    max-width: 520px;
    position: relative;
    margin: 0 auto;
}

.fmm-vsearch input {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 0 46px 0 18px;
    font: inherit;
    font-size: 14px;
    color: var(--fmm-text);
    background: #fff;
}

.fmm-vsearch input::placeholder { color: var(--fmm-faint); }

.fmm-vsearch button {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
}

.fmm-vheader__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

/* Used on an <a> and, since the notification bell, on a <button> too — hence
   the resets. Without them the browser paints its default button face, which on
   the dark vendor bar reads as a solid white disc with the icon lost inside it. */
.fmm-viconbtn {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.fmm-viconbtn:hover { background: rgba(255, 255, 255, .1); }

/* "Shopping" — the switch back to the buyer side, on the dark vendor bar. */
.fmm-vswitch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.fmm-vswitch:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }

/* Narrow vendor bars keep the icon and drop the word. */
@media (max-width: 720px) {
    .fmm-vswitch { padding: 0 9px; }
    .fmm-vswitch span { display: none; }
}

/* The unread pip. Static for now — the count comes from the notifications feed. */
.fmm-viconbtn__dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fmm-yellow);
}

.fmm-vavatar {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #4B5563 center/cover no-repeat;
    border: 2px solid rgba(255, 255, 255, .25);
}

.fmm-vtabs {
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    gap: 28px;
    max-width: var(--fmm-container);
    margin: 0 auto;
    padding: 0 24px;
    overflow-x: auto;
}

.fmm-vtabs a {
    position: relative;
    padding: 13px 2px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: #D1D5DB;
}

.fmm-vtabs a:hover { color: #fff; }

.fmm-vtabs a.is-on { color: var(--fmm-yellow); }

.fmm-vtabs a.is-on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--fmm-yellow);
}

@media (max-width: 860px) {
    .fmm-vheader__bar { gap: 14px; padding: 12px 16px; }
    .fmm-vsearch { max-width: none; }
    .fmm-vtabs { padding: 0 16px; gap: 20px; }
}

/* On a phone the wordmark, the search field and the icon buttons cannot share
   one row. .fmm-vsearch is flex:1 but its input's automatic minimum size stops
   it shrinking past ~176px, so instead of squeezing it pushed the icons off the
   right edge. Give the search its own row and let the icons sit beside the
   wordmark. */
@media (max-width: 560px) {
    .fmm-vheader__bar { flex-wrap: wrap; gap: 12px 14px; }
    .fmm-vsearch { order: 3; flex-basis: 100%; min-width: 0; }
    .fmm-vheader__actions { margin-left: auto; }
}

/* --- vendor page furniture ----------------------------------------------
   Shared by the seller screens: page head with a right-hand action, the
   four-across stat row (last card filled yellow), the pill tray + filters,
   and the offer card with its price panel. */

.fmm-vpage { padding: 32px 0 64px; background: var(--fmm-bg); }

.fmm-vwrap {
    max-width: var(--fmm-container);
    margin: 0 auto;
    padding: 0 24px;
}

.fmm-vhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.fmm-vhead h1 {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 5px;
}

.fmm-vhead p { font-size: 14px; color: var(--fmm-muted); margin: 0; }

.fmm-vstats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.fmm-vstat {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 18px 20px 20px;
    background: #fff;
}

.fmm-vstat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fmm-vstat__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--fmm-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-vstat__pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    color: #1D4ED8;
    background: #DBEAFE;
}

.fmm-vstat b {
    display: block;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 4px;
}

.fmm-vstat > span { font-size: 13px; color: var(--fmm-muted); }

/* The money card. Filled, so its icon well and label invert. */
.fmm-vstat--accent {
    border-color: transparent;
    background: var(--fmm-yellow);
}

.fmm-vstat--accent .fmm-vstat__ico { background: rgba(255, 255, 255, .45); }
.fmm-vstat--accent > span { color: rgba(35, 31, 32, .72); }

.fmm-vtoolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.fmm-vpills {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--fmm-bg-alt);
    border: 1px solid var(--fmm-border);
}

.fmm-vpills button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-muted);
    background: transparent;
}

.fmm-vpills button.is-on {
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
}

.fmm-vpills__n {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(35, 31, 32, .1);
}

.fmm-vpills button.is-on .fmm-vpills__n { background: rgba(35, 31, 32, .16); }

.fmm-vtoolbar__acts { display: flex; gap: 10px; }

/* One control shape across the seller area: the same 6px corner, type size and
   weight the action buttons use, so a select never reads as a different family
   of thing to the button beside it. */
.fmm-vselect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--fmm-border);
    background: #fff;
    border-radius: 6px;
    padding: 9px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    color: #374151;
}

.fmm-vselect:hover { border-color: var(--fmm-faint); }
.fmm-vselect svg { color: var(--fmm-faint); }
.fmm-vselect[disabled] { opacity: .55; cursor: default; }

/* --- offer card --- */

.fmm-voffers { display: grid; gap: 16px; }

.fmm-voffer {
    display: flex;
    gap: 18px;
    /* Centred, not top-aligned: the right column (price panel + action row) is
       taller than the left (title, badge, buyer), so flex-start left a band of
       dead space under the buyer line and pulled the row out of the balance the
       design has. */
    align-items: center;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 18px;
    background: #fff;
}

.fmm-voffer__thumb {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    background: var(--fmm-bg-alt);
}

.fmm-voffer__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-voffer__main { flex: 1; min-width: 0; }

.fmm-voffer__main h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}

.fmm-voffer__tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fmm-vtag {
    font-family: var(--fmm-font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    color: #1D4ED8;
    background: #EBF5FF;
}

.fmm-voffer__variant { font-size: 13px; color: var(--fmm-muted); }

.fmm-voffer__who {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}

.fmm-voffer__av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fmm-bg-alt);
    flex-shrink: 0;
}

.fmm-voffer__av img { width: 100%; height: 100%; object-fit: cover; }

.fmm-voffer__who b { display: block; font-size: 13px; font-weight: 600; }
.fmm-voffer__who em { display: block; font-size: 11.5px; font-style: normal; color: var(--fmm-faint); }

.fmm-voffer__ship {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    margin-left: 2px;
    border-left: 1px solid var(--fmm-border);
    color: var(--fmm-muted);
}

.fmm-voffer__ship.is-free { color: #15803D; font-weight: 600; }
.fmm-voffer__ship-icon { width: 15px; height: 12px; flex: 0 0 auto; }

.fmm-voffer__right {
    flex-shrink: 0;
    display: grid;
    gap: 12px;
}

.fmm-vprice {
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    background: var(--fmm-bg-alt);
    padding: 12px 14px;
}

.fmm-vprice__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fmm-vprice em {
    display: block;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--fmm-faint);
    margin-bottom: 3px;
}

.fmm-vprice s { font-size: 15px; color: var(--fmm-muted); }
.fmm-vprice__arrow { color: var(--fmm-faint); flex-shrink: 0; }
.fmm-vprice__offer { text-align: right; }
.fmm-vprice__offer b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }

.fmm-vprice__diff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--fmm-border);
    font-size: 12.5px;
    color: var(--fmm-muted);
}

.fmm-vprice__diff b { color: #DC2626; font-weight: 700; }
.fmm-vprice__diff[data-direction="above"] b { color: var(--fmm-success); }
.fmm-vprice__diff[data-direction="equal"] b { color: var(--fmm-muted); }

.fmm-voffer__acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* "Review Offer" broke onto two lines inside the narrow right column, which
   made the button twice as tall as "Decline" beside it and dragged the whole
   row out of shape. The labels are short and fixed — they should never wrap. */
.fmm-voffer__acts .fmm-btn { white-space: nowrap; }

.fmm-vclock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
    /* "23h 59m left" broke across two lines and made the chip taller than the
       buttons it sits beside. It is always short — never wrap it. */
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    color: #EA580C;
    background: #FFF7ED;
}

/* --- reviewed offer cards (Offers → Reviewed) ------------------------------
   Two columns of settled outcomes, not decisions. The row card above exists to
   help you choose; these exist to tell you what was chosen and hand you the one
   thing still to do, so each ends in a single full-width action. */
.fmm-vrgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fmm-vrcard {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fmm-line, #E5E7EB);
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px 0;
}

/* Accepted is the only outcome that is unambiguously good news, so it is the
   only one that tints. Countered and waiting stay neutral — they are still open. */
.fmm-vrcard.is-done {
    border-color: #BBF7D0;
    background: #F0FDF4;
}

.fmm-vrcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.fmm-vrbadge {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    color: var(--fmm-muted, #6B7280);
    background: #F3F4F6;
}

.fmm-vrbadge.is-counter  { color: #1E40AF; background: #EFF6FF; border-color: #BFDBFE; }
.fmm-vrbadge.is-waiting  { color: #EA580C; background: #FFF7ED; border-color: #FED7AA; }
.fmm-vrbadge.is-accepted { color: #15803D; background: #F0FDF4; border-color: #BBF7D0; }

.fmm-vrcard__ago { font-size: 12px; color: var(--fmm-faint, #9CA3AF); white-space: nowrap; }

.fmm-vrcard__body { display: flex; gap: 12px; }

.fmm-vrcard__thumb {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    overflow: hidden;
    background: #F3F4F6;
}

.fmm-vrcard__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-vrcard__info { flex: 1; min-width: 0; }

.fmm-vrcard__info h2 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 3px;
}

.fmm-vrcard__buyer { font-size: 12px; color: var(--fmm-muted, #6B7280); margin: 0; }
.fmm-vrcard__buyer b { font-weight: 600; color: var(--fmm-ink, #1A1A1A); }

.fmm-vrcard__was { font-size: 12px; color: var(--fmm-faint, #9CA3AF); margin: 4px 0 0; }
.fmm-vrcard__was s { color: inherit; }

.fmm-vrcard__price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

.fmm-vrcard__price b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

/* The divider is the card's own edge-to-edge rule, so it cancels the padding
   the body sits in rather than stopping short of it. */
.fmm-vrcard__acts {
    display: flex;
    gap: 10px;
    margin: 14px -16px 0;
    padding: 12px 16px;
    border-top: 1px solid var(--fmm-line, #E5E7EB);
}

.fmm-vrcard.is-done .fmm-vrcard__acts { border-top-color: #BBF7D0; }

.fmm-vrcard__acts > * { flex: 1; justify-content: center; }

.fmm-vmore { display: flex; justify-content: center; margin-top: 26px; }

@media (max-width: 1100px) {
    .fmm-vstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmm-voffer { flex-wrap: wrap; }
    .fmm-voffer__right { width: 100%; }
}

@media (max-width: 860px) {
    .fmm-vrgrid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .fmm-vstats { grid-template-columns: 1fr; }
    .fmm-vwrap { padding: 0 16px; }
}

/* --- fulfilment hub ------------------------------------------------------ */

.fmm-vsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

/* Right column is a FORM, not a summary rail.

   300px is right for a list's stats panel and wrong for a column of inputs: on
   Review AI Listing it cut "Choose a category" to "Choose c…" and squeezed the
   title field, while the photo grew to fill what was left. The design splits this
   screen far closer to half. */
.fmm-vsplit--form { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

@media (max-width: 1000px) {
    .fmm-vsplit--form { grid-template-columns: minmax(0, 1fr); }
}

/* The pill tray doubles as a link group on the Orders screen. */
.fmm-vpills a {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-muted);
}

.fmm-vpills a.is-on { color: var(--fmm-dark); background: var(--fmm-yellow); }

.fmm-vchips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.fmm-vchips button,
.fmm-vchips .fmm-vselect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fmm-border);
    background: #fff;
    border-radius: 999px;
    padding: 7px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    color: #4B5563;
}

/* The selected queue is the filled chip, matching the Listings/Orders/Offers
   switcher above it — an outlined "on" state read as just another chip. */
.fmm-vchips button.is-on {
    color: #000;
    border-color: transparent;
    background: var(--fmm-yellow);
}

.fmm-vcards { display: grid; gap: 16px; }

.fmm-vcard {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 16px;
    background: #fff;
}

.fmm-vcard.is-busy { opacity: .55; pointer-events: none; }

.fmm-vcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fmm-vcard__ref {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fmm-muted);
}

.fmm-vdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--fmm-faint);
}

.fmm-vdot--amber { background: #F59E0B; }
.fmm-vdot--red { background: #EF4444; }
.fmm-vdot--green { background: #22C55E; }
.fmm-vdot--blue { background: #3B82F6; }

.fmm-vstatus {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 6px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-vstatus.is-amber { color: #B45309; background: #FEF3C7; }
.fmm-vstatus.is-red { color: #B91C1C; background: #FEE2E2; }
.fmm-vstatus.is-green { color: #15803D; background: #DCFCE7; }
.fmm-vstatus.is-blue { color: #1D4ED8; background: #DBEAFE; }

.fmm-vcard__body { display: flex; gap: 14px; align-items: flex-start; }

.fmm-vcard__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    background: var(--fmm-bg-alt);
}

.fmm-vcard__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-vcard__body h2 { font-size: 15px; font-weight: 700; margin: 0 0 3px; }
.fmm-vcard__buyer { font-size: 12.5px; color: var(--fmm-muted); margin: 0 0 6px; }
.fmm-vcard__price { font-size: 16px; font-weight: 800; }

.fmm-vcard__when {
    font-size: 12px;
    color: var(--fmm-faint);
    white-space: nowrap;
    align-self: flex-end;
}

.fmm-valert {
    margin-top: 14px;
    border: 1px solid #FCA5A5;
    border-radius: 12px;
    background: #FEF2F2;
    padding: 13px 14px;
}

.fmm-valert__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #B91C1C;
    margin-bottom: 5px;
}

.fmm-valert p { font-size: 12.5px; line-height: 1.6; color: #7F1D1D; margin: 0; }

.fmm-valert__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 6px;
    color: #7F1D1D;
    background: #fff;
    border: 1px solid #FCA5A5;
}

/* One full-width primary action per card, as the design has it. */
.fmm-vaction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    background: var(--fmm-yellow);
    cursor: pointer;
}

.fmm-vaction:hover { background: var(--fmm-yellow-dark); }

.fmm-vaction--soft {
    color: #374151;
    background: #fff;
    border: 1px solid #D1D5DB;
}

.fmm-vaction--soft:hover { background: var(--fmm-bg-alt); }

.fmm-vaction[disabled] { opacity: .55; cursor: default; }

/* --- fulfilment: search bar, chip counts, inline label choice -------------- */

.fmm-vsearchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.fmm-vfind {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--fmm-border);
    border-radius: 6px;
    padding: 0 17px 0 12px;
    background: var(--fmm-bg-alt);
    color: var(--fmm-faint);
}

.fmm-vfind input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 10px 0;
    font: inherit;
    font-size: 14px;
    color: var(--fmm-text);
    background: transparent;
}

.fmm-vfind input::placeholder { color: var(--fmm-faint); }

.fmm-vfind:focus-within { border-color: var(--fmm-yellow); }

/* Count beside a queue chip. Reads from the seller-wide summary, so it is a
   real backlog figure rather than a count of what happens to be loaded. */
.fmm-vchips__n {
    display: inline-block;
    margin-left: 6px;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-vchips button.is-on .fmm-vchips__n {
    color: var(--fmm-dark);
    background: rgba(0, 0, 0, .12);
}

.fmm-vlabel {
    margin-top: 14px;
    border-top: 1px solid var(--fmm-border);
    padding-top: 14px;
}

.fmm-vlabel__opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 11px 12px;
    margin-bottom: 8px;
    cursor: pointer;
}

/* The chosen option is washed in brand yellow — the same signal the rest of the
   vendor area uses for "this is the active choice". */
.fmm-vlabel__opt.is-on { border-color: var(--fmm-yellow); background: #FFFBEB; }

.fmm-vlabel__opt input { margin-top: 2px; flex-shrink: 0; accent-color: #F5A524; }

.fmm-vlabel__opt b { display: block; font-size: 13px; font-weight: 700; }

.fmm-vlabel__opt em {
    display: block;
    font-style: normal;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fmm-muted);
    margin-top: 2px;
}

/* Guidance under a field — said before the seller types, not after the
   transfer bounces. */
.fmm-field__hint {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--fmm-muted);
}

/* Stripe-connect refusal, inside the Stripe card. Amber rather than red: it is
   not the seller's mistake, and there is a working alternative right below it. */
.fmm-kstripeerr {
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 11px 13px;
    margin-bottom: 14px;
    background: #FFFBEB;
}

.fmm-kstripeerr b { display: block; font-size: 13px; font-weight: 700; color: #92400E; }

.fmm-kstripeerr em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    line-height: 1.55;
    color: #78350F;
    opacity: .8;
    margin-top: 6px;
}

/* A field that takes the whole row inside .fmm-grid2 — used where pairing two
   controls would split a thing that reads as one (an account holder's name, a
   currency). */
.fmm-field--wide { grid-column: 1 / -1; }

/* Back beside Continue, right-aligned, as the four-step form draws it. */
.fmm-kactions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 620px) {
    .fmm-kactions { flex-direction: column-reverse; }
    .fmm-kactions .fmm-btn { width: 100%; justify-content: center; }
}

.fmm-kguide { list-style: none; margin: 10px 0 0; padding: 0; }

.fmm-kguide li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fmm-muted);
}

.fmm-kguide svg { flex-shrink: 0; margin-top: 2px; color: var(--fmm-faint); }

/* --- verification status summary (step 3) -------------------------------- */

.fmm-vstat {
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: 28px;
}

.fmm-vstat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fmm-vstat__top b { font-size: 16px; font-weight: 700; }
.fmm-vstat__count { font-size: 13px; color: var(--fmm-muted); margin: 4px 0 12px; }

.fmm-vstat > i {
    display: block;
    height: 8px;
    border-radius: 9999px;
    overflow: hidden;
    background: #F5F5F5;
}

.fmm-vstat > i > b { display: block; height: 100%; border-radius: 9999px; background: var(--fmm-yellow); }
.fmm-vstat__note { font-size: 12.5px; line-height: 1.55; color: var(--fmm-muted); margin: 12px 0 0; }

/* --- step 3 header (Figma 5:11655) --------------------------------------- */

.fmm-dhead { display: flex; align-items: center; gap: 16px; }

.fmm-dhead__back {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: 9999px;
    color: var(--fmm-text);
    background: #F5F5F5;
    cursor: pointer;
}

.fmm-dhead__back:hover { background: #EBEBEB; }

.fmm-dhead__bar { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.fmm-dhead__bar span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-align: center;
    color: var(--fmm-muted);
}

.fmm-dhead__bar i {
    display: block;
    height: 8px;
    border-radius: 9999px;
    overflow: hidden;
    background: #F5F5F5;
}

.fmm-dhead__bar b { display: block; height: 100%; border-radius: 9999px; background: var(--fmm-yellow); }

.fmm-dhead__title { font-size: 30px; line-height: 36px; font-weight: 700; margin: 20px 0 0; color: var(--fmm-text); }
.fmm-dhead__sub { font-size: 18px; line-height: 28px; margin: 12px 0 0; color: #4A4A4A; }

/* --- verification documents (onboarding, step 3) -------------------------- */

.fmm-kdocs { display: grid; gap: 32px; margin-top: 32px; }

.fmm-kdoc { display: flex; flex-direction: column; gap: 12px; }

.fmm-kdoc__head { display: flex; align-items: center; gap: 12px; }
.fmm-kdoc__head b { font-size: 18px; line-height: 28px; font-weight: 600; }

/* Dark for required, amber for optional — the two need to be distinguishable at
   a glance, because one blocks submission and the other does not. */
.fmm-kdoc__req {
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: #1A1A1A;
}

.fmm-kdoc__req.is-optional { color: #92400E; background: #FDE68A; }

.fmm-kdoc__what { font-size: 14px; line-height: 20px; color: var(--fmm-muted); margin: 0; }

.fmm-kdoc__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #D1D5DB;
    border-radius: 12px;
    padding: 42px 24px;
    text-align: center;
    cursor: pointer;
}

.fmm-kdoc__drop:hover { border-color: var(--fmm-yellow); background: #FFFBEB; }

.fmm-kdoc__disc {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 9999px;
    color: var(--fmm-muted);
    background: #F3F4F6;
}

.fmm-kdoc__drop b { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fmm-text); margin-bottom: 4px; }
.fmm-kdoc__drop em { font-style: normal; font-size: 14px; line-height: 20px; color: var(--fmm-muted); }

.fmm-kdoc__have {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-radius: 10px;
    padding: 11px 12px;
    margin-top: 12px;
    background: var(--fmm-bg-alt);
}

.fmm-kdoc__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

a.fmm-kdoc__name { color: inherit; text-decoration: underline; }

.fmm-kdoc__have > svg { flex-shrink: 0; color: var(--fmm-faint); }

.fmm-kdocnote {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 12px 13px;
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #78350F;
    background: #FFFBEB;
}

.fmm-kdocnote > svg { flex-shrink: 0; margin-top: 1px; color: #B45309; }
.fmm-kdocnote a { display: block; margin-top: 3px; font-weight: 700; color: #92400E; text-decoration: underline; }

/* City / State / ZIP, and anywhere else a row of three reads better than a
   pair plus an orphan. */
.fmm-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 700px) {
    .fmm-grid3 { grid-template-columns: minmax(0, 1fr); }
}

.fmm-ktaxnote {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--fmm-muted);
}

.fmm-ktaxnote > svg { flex-shrink: 0; color: #16A34A; }

/* --- "or use Stripe instead", inside the bank step ------------------------ */

.fmm-kalt {
    border-top: 1px solid var(--fmm-border);
    margin-top: 22px;
    padding-top: 18px;
}

.fmm-kalt__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fmm-kalt__head b { font-size: 13.5px; font-weight: 700; }
.fmm-kalt p { font-size: 12.5px; line-height: 1.55; color: var(--fmm-muted); margin: 5px 0 12px; }
.fmm-kalt__acct { font-size: 12.5px; color: var(--fmm-muted); margin: 0 0 12px; }
.fmm-kalt__acct b { display: block; font-size: 13px; color: var(--fmm-text); }

.fmm-klock {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 12px;
    color: #92400E;
}

.fmm-klock > svg { flex-shrink: 0; }

/* --- business details + payout preferences settings screens -------------- */
/* Figma 5:19170 and 5:18253. Both are settings screens behind the account
   rail, not steps of the onboarding wizard. */

.fmm-bform {
    display: block;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 33px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-bsec { margin-bottom: 32px; }
.fmm-bsec:last-of-type { margin-bottom: 0; }

.fmm-bsec > label {
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.fmm-bsec > h3 { font-size: 18px; line-height: 26px; font-weight: 600; margin: 0 0 16px; }

.fmm-bsec input,
.fmm-bsec select {
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 15px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--fmm-text);
    background: #fff;
}

.fmm-bsec select { padding: 13px 17px; }
.fmm-bsec input::placeholder { color: #9CA3AF; }
.fmm-bsec input:focus,
.fmm-bsec select:focus { outline: none; border-color: var(--fmm-yellow); }
.fmm-bsec input:disabled { color: var(--fmm-muted); background: var(--fmm-bg-alt); }

.fmm-bhint { display: block; margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--fmm-muted); }

.fmm-bsep { height: 1px; margin: 32px 0; background: #F3F4F6; }

.fmm-bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.fmm-bsoc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fmm-bsoc:last-child { margin-bottom: 0; }

.fmm-bsoc__lab {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.fmm-bsoc__lab > svg { flex-shrink: 0; color: var(--fmm-muted); }

.fmm-bsoc input {
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 15px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--fmm-text);
    background: #fff;
}

.fmm-bsoc input::placeholder { color: #9CA3AF; }
.fmm-bsoc input:focus { outline: none; border-color: var(--fmm-yellow); }

.fmm-bnote {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid #FDE096;
    border-radius: 12px;
    padding: 21px 21px 29px;
    margin-top: 32px;
    background: #FFF8E7;
}

.fmm-bnote__ico {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--fmm-yellow-dark);
    background: rgba(255, 190, 46, .2);
}

.fmm-bnote > span { font-size: 14px; line-height: 21px; color: #4B5563; }
.fmm-bnote b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fmm-text); margin-bottom: 2px; }

.fmm-bacts {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--fmm-border);
    padding-top: 25px;
    margin-top: 32px;
}

.fmm-bacts__save {
    border: 0;
    border-radius: 12px;
    padding: 14px 32px;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--fmm-text);
    background: var(--fmm-yellow);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    cursor: pointer;
}

.fmm-bacts__save:disabled { opacity: .55; cursor: not-allowed; }

.fmm-bacts__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 15px 33px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #4B5563;
    text-decoration: none;
    background: #fff;
}

/* Payout Preferences ------------------------------------------------------ */

.fmm-pfsplit { display: grid; grid-template-columns: minmax(0, 1fr) var(--fmm-payout-summary-width); gap: var(--fmm-settings-layout-gap); align-items: start; }

.fmm-pfopts { display: flex; flex-direction: column; gap: 16px; }

.fmm-pfopt {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 17px;
    background: #fff;
    cursor: pointer;
}

/* 2px border on the selected row, absorbed by one less pixel of padding so the
   rows do not shift as the choice moves. */
.fmm-pfopt.is-on { border: 2px solid var(--fmm-yellow); padding: 16px; background: #FFF8E7; }

.fmm-pfopt input { position: absolute; opacity: 0; pointer-events: none; }

.fmm-pfopt > i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    border: 2px solid #35373A;
    border-radius: 50%;
    background: #fff;
}

.fmm-pfopt.is-on > i {
    border-color: var(--fmm-yellow);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 20px var(--fmm-yellow);
}

.fmm-pfopt b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.fmm-pfopt em { display: block; font-style: normal; font-size: 14px; line-height: 20px; color: #35373A; }

/* The $ sits inside the field so the value reads as money, not as a number
   with a label next to it. */
.fmm-pfmoney { position: relative; display: block; }
.fmm-pfmoney > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    color: #35373A;
}
.fmm-pfmoney > input { padding-left: 33px !important; }

.fmm-pfside { display: flex; flex-direction: column; gap: 24px; }

.fmm-pfbal {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    background: var(--fmm-text);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.fmm-pfbal::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: #fff;
    opacity: .05;
    filter: blur(20px);
}

.fmm-pfbal__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 500; color: #D1D5DB; }
.fmm-pfbal > b { display: block; padding-top: 4px; font-size: 36px; line-height: 44px; font-weight: 700; }
.fmm-pfbal > em { display: block; font-style: normal; font-size: 14px; line-height: 20px; color: #FFF8E7; opacity: .8; }

.fmm-pfsum {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 30px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-pfsum > h3 {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fmm-border);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    margin: 0 0 20px;
}

.fmm-pfsum__row {
    display: block;
    margin-bottom: 20px;
}

.fmm-pfsum__row.is-last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.fmm-pfsum__row--amount { padding-bottom: 20px; border-bottom: 1px solid var(--fmm-border); }
.fmm-pfsum__row > span {
    display: block;
    color: var(--fmm-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-transform: uppercase;
}
.fmm-pfsum__row > b {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    text-align: left;
}
.fmm-pfsum__row > b.is-accent { color: var(--fmm-success); font-weight: 600; }
.fmm-pfsum__row > .fmm-pfsum__status {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 4px;
    background: var(--fmm-bg-alt);
    color: var(--fmm-muted);
    font-size: 10px;
    line-height: 18px;
}
.fmm-pfsum__row > .fmm-pfsum__status.is-active { background: var(--fmm-success-soft); color: var(--fmm-success); }

@media (max-width: 1100px) {
    .fmm-pfsplit { grid-template-columns: minmax(0, 1fr); }
}

/* Read-only schedule rows — the admin owns these values. */

.fmm-pfro { display: flex; flex-direction: column; gap: 16px; }

.fmm-pfro__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 17px;
    background: var(--fmm-bg-alt);
}

.fmm-pfro__row > span { min-width: 0; }
.fmm-pfro__row b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.fmm-pfro__row em { display: block; font-style: normal; font-size: 14px; line-height: 20px; color: #35373A; }

.fmm-pfro__row > i {
    flex-shrink: 0;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-align: right;
}

/* --- tax / compliance info (Figma 5:20068) ------------------------------- */

.fmm-txhead { margin-bottom: 20px; }

.fmm-txcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fmm-muted); margin-bottom: 10px; }
.fmm-txcrumb > b { font-weight: 600; color: var(--fmm-text); }
.fmm-txcrumb > i { font-style: normal; }

.fmm-txhead__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fmm-txhead__row h3 { font-size: 22px; line-height: 30px; font-weight: 700; margin: 0; }
.fmm-txhead__row em { display: block; font-style: normal; font-size: 13.5px; line-height: 20px; color: var(--fmm-muted); }

.fmm-txhead__acts { display: flex; align-items: center; gap: 14px; }
.fmm-txhead__acts > i { font-style: normal; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-txhead__acts .fmm-bacts__save { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 14px; }

.fmm-txalert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid #FECACA;
    border-radius: 12px;
    padding: 17px 44px 17px 17px;
    margin-bottom: 24px;
    background: #FEF2F2;
}

.fmm-txalert__ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: #DC2626;
}

.fmm-txalert__top { display: flex; align-items: center; gap: 10px; }
.fmm-txalert__top > b { font-size: 15px; line-height: 22px; font-weight: 700; color: #991B1B; }
.fmm-txalert__top > em {
    font-style: normal;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #DC2626;
}
.fmm-txalert p { margin: 3px 0 0; font-size: 13.5px; line-height: 20px; color: #7F1D1D; }

.fmm-txalert__x {
    position: absolute;
    top: 12px;
    right: 14px;
    border: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: #B91C1C;
    background: none;
    cursor: pointer;
}

.fmm-txcard {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-txcard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--fmm-border);
    padding-bottom: 17px;
    margin-bottom: 24px;
}

.fmm-txcard__head h4 { font-size: 17px; line-height: 24px; font-weight: 700; margin: 0; }
.fmm-txcard__head em { display: block; font-style: normal; font-size: 13px; line-height: 19px; color: var(--fmm-muted); }

/* Inputs inside the two-up row are not wrapped in .fmm-bsec, so they missed
   the base field styling and rendered at their intrinsic width. */
.fmm-bgrid input,
.fmm-bgrid select,
.fmm-txfield input {
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 15px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--fmm-text);
    background: #fff;
}

.fmm-bgrid input::placeholder,
.fmm-txfield input::placeholder { color: #9CA3AF; }

.fmm-bgrid input:focus,
.fmm-bgrid select:focus,
.fmm-txfield input:focus { outline: none; border-color: var(--fmm-yellow); }

.fmm-bgrid input:disabled,
.fmm-txfield input:disabled { color: var(--fmm-muted); background: var(--fmm-bg-alt); }

.fmm-txfield input { padding-right: 40px; }

.fmm-txfield { position: relative; display: block; }
.fmm-txfield > i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: #10B981;
}

.fmm-txverified {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    padding: 15px;
    margin-top: 24px;
    font-size: 13px;
    line-height: 19px;
    color: #166534;
    background: #F0FDF4;
}

.fmm-txverified > svg { flex-shrink: 0; margin-top: 1px; color: #16A34A; }
.fmm-txverified b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 1px; }

.fmm-txform {
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 17px;
    margin-bottom: 16px;
    background: #fff;
}

.fmm-txform:last-of-type { margin-bottom: 0; }
.fmm-txform.is-bad { border-color: #FECACA; background: #FFFBFB; }

.fmm-txform__row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }

.fmm-txform__ico {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-txform__ico.is-ok  { color: #16A34A; background: #F0FDF4; }
.fmm-txform__ico.is-bad { color: #DC2626; background: #FEF2F2; }

.fmm-txform__body { flex: 1 0 0; min-width: 180px; }
.fmm-txform__body > b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; line-height: 22px; font-weight: 700; }
.fmm-txform__body > span { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--fmm-muted); }
.fmm-txform__body > i { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; font-weight: 600; color: #B45309; }
.fmm-txform__body > i.is-plain { font-weight: 400; color: var(--fmm-muted); }

.fmm-txform__chip {
    font-style: normal;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-txform__chip.is-ok  { color: #166534; background: #DCFCE7; }
.fmm-txform__chip.is-bad { color: #fff; background: #DC2626; }

.fmm-txform__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fmm-txform__acts label { cursor: pointer; }

.fmm-txdrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 2px dashed #FECACA;
    border-radius: 12px;
    padding: 21px;
    margin-top: 16px;
    text-align: center;
    color: #B91C1C;
    background: #FEF2F2;
    cursor: pointer;
}

.fmm-txdrop > b { font-size: 13.5px; font-weight: 600; }
.fmm-txdrop > em { font-style: normal; font-size: 12px; opacity: .85; }

.fmm-txstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }

.fmm-txstats > span {
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    background: var(--fmm-bg-alt);
}

.fmm-txstats em { display: block; font-style: normal; font-size: 11.5px; color: var(--fmm-muted); }
.fmm-txstats b { display: block; margin-top: 3px; font-size: 16px; font-weight: 700; }

.fmm-txfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 17px;
    background: #fff;
}

.fmm-txfoot > span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fmm-muted); }
.fmm-txfoot__acts { display: flex; align-items: center; gap: 12px; }
.fmm-txfoot__acts .fmm-bacts__cancel { padding: 10px 22px; font-size: 14px; }
.fmm-txfoot__acts .fmm-bacts__save { padding: 11px 22px; font-size: 14px; }

/* --- business details tabs (5:19170 / 5:19598 / 5:20068 / 5:20593) ------- */

.fmm-btabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--fmm-border);
    margin-bottom: 24px;
}

.fmm-btabs > button {
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 11px 14px;
    margin-bottom: -1px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--fmm-muted);
    background: none;
    cursor: pointer;
}

.fmm-btabs > button:hover { color: var(--fmm-text); }
.fmm-btabs > button.is-on { border-bottom-color: var(--fmm-yellow); color: var(--fmm-text); }

/* Verification status card */

.fmm-vstat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid #FEF3C7;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .07);
}

.fmm-vstat__ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fmm-yellow-dark);
    background: #FFFBEB;
}

.fmm-vstat__body { flex: 1 0 0; min-width: 0; }
.fmm-vstat__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fmm-vstat__top > b { font-size: 17px; line-height: 24px; font-weight: 700; }
.fmm-vstat__top > em {
    font-style: normal;
    border: 1px solid #FDE68A;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-transform: capitalize;
    color: #B45309;
    background: #FEF3C7;
}

.fmm-vstat__body > p { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--fmm-muted); }

.fmm-vstat__count { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--fmm-muted); }
.fmm-vstat__bar { display: block; height: 10px; border-radius: 999px; overflow: hidden; background: #F3F4F6; }
.fmm-vstat__bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(to right, #F5C518, var(--fmm-yellow)); }

.fmm-vdhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fmm-vdhead h3 { font-size: 17px; line-height: 24px; font-weight: 700; margin: 0; }
.fmm-vdhead em { font-style: normal; font-size: 13px; color: var(--fmm-muted); }

.fmm-vdgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.fmm-vdcard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 21px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .02);
}

.fmm-vdcard.is-ok   { border-color: #DCFCE7; }
.fmm-vdcard.is-wait { border-color: #FDE68A; }
.fmm-vdcard.is-need { border-color: #FECACA; }

.fmm-vdcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }

.fmm-vdcard__ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-vdcard.is-ok   .fmm-vdcard__ico { color: #047857; background: #F0FDF4; }
.fmm-vdcard.is-wait .fmm-vdcard__ico { color: #B45309; background: #FFFBEB; }
.fmm-vdcard.is-need .fmm-vdcard__ico { color: #B91C1C; background: #FEF2F2; }

.fmm-vdcard__chip {
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-vdcard.is-ok   .fmm-vdcard__chip { border-color: #BBF7D0; color: #047857; background: #DCFCE7; }
.fmm-vdcard.is-wait .fmm-vdcard__chip { border-color: #FDE68A; color: #B45309; background: #FEF3C7; }
.fmm-vdcard.is-need .fmm-vdcard__chip { border-color: #FECACA; color: #B91C1C; background: #FEE2E2; }

.fmm-vdcard > b { font-size: 15px; line-height: 22px; font-weight: 700; }
.fmm-vdcard > em { font-style: normal; font-size: 13px; line-height: 19px; color: var(--fmm-muted); }

.fmm-vdfile {
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 11px 13px;
    margin-top: 8px;
    font-size: 13px;
    background: var(--fmm-bg-alt);
    overflow-wrap: anywhere;
}

.fmm-vdfile > i { display: block; font-style: normal; margin-top: 2px; font-size: 12px; color: var(--fmm-muted); }

.fmm-vdfile__name { display: flex; align-items: flex-start; gap: 8px; }
.fmm-vdfile__name > svg { flex-shrink: 0; margin-top: 2px; color: var(--fmm-muted); }
.fmm-vdfile__name > b { font-weight: 600; overflow-wrap: anywhere; }

.fmm-vdview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fmm-border);
    border-radius: 8px;
    padding: 6px 11px;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fmm-text);
    text-decoration: none;
    background: #fff;
}

.fmm-vdview:hover { border-color: var(--fmm-yellow); }

.fmm-vdrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 2px dashed #D1D5DB;
    border-radius: 12px;
    padding: 21px 13px;
    margin-top: 8px;
    text-align: center;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
    cursor: pointer;
}

.fmm-vdrop:hover { border-color: var(--fmm-yellow); }
.fmm-vdrop > b { font-size: 13.5px; font-weight: 600; color: var(--fmm-text); }
.fmm-vdrop > em { font-style: normal; font-size: 12px; }

.fmm-vdacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.fmm-vdreplace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 8px 14px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fmm-text);
    text-decoration: none;
    background: var(--fmm-bg-alt);
    cursor: pointer;
}

.fmm-vdacts .fmm-vdreplace { margin-top: 0; }
.fmm-vdlock { margin-top: 8px; font-size: 12.5px; color: var(--fmm-muted); }

/* Default shipping (Figma 5:20593) */

/* minmax(0,1fr) on BOTH tracks: this sits inside the settings grid's centre
   column, and a fixed 300px rail pushed the page into a horizontal scroll at
   normal widths. */
.fmm-shipsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: 24px;
    align-items: start;
}

.fmm-shiplabel {
    display: block;
    margin: 20px 0 12px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9CA3AF;
}

.fmm-shipnotice {
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 11px 13px;
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 19px;
    color: #92400E;
    background: #FFFBEB;
}

/*
 * auto-FILL, not auto-fit.
 *
 * The frame is a fixed two-column grid. auto-fit collapses the empty track, so
 * on a route where only one carrier quotes — which happens routinely — the lone
 * card stretched the full width and read as a different screen. auto-fill keeps
 * the second column, so one carrier sits in the left half exactly as two would,
 * and both still fold to a single column on a narrow viewport.
 */
.fmm-shipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

/* The card carries no padding of its own: the frame splits it into a header
   with its own rule beneath and a padded well for the options, so a full-width
   divider is possible at all. */
.fmm-shipcard {
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
}

.fmm-shipcard__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 17px;
    border-bottom: 1px solid #F9FAFB;
}

.fmm-shipcard__opts { display: flex; flex-direction: column; gap: 10px; padding: 16px; }

.fmm-shipcard__id { min-width: 0; }
.fmm-shipcard__id > b { display: block; font-size: 14px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; }
.fmm-shipcard__id > em { display: block; font-style: normal; font-size: 12px; line-height: 16px; color: #9CA3AF; }

.fmm-shipcard__ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fmm-yellow-dark);
    background: #FFFBEB;
}

.fmm-shipsel__body { flex: 1 0 0; min-width: 0; }
.fmm-shipsel__body > b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; line-height: 20px; font-weight: 600; }

/*
 * `fmm-shipsel`, not `fmm-shipopt`.
 *
 * This picker and the publish-listing one are different components that shared
 * a class name. The listing screen's `.fmm-shipopt span span` rule was quietly
 * winning here (the delivery window came out 12.5px in --fmm-muted rather than
 * the frame's 12px #9CA3AF, and the amber on the chosen row never applied),
 * while this block's own base rule — added later, so it won on order — was
 * silently restyling the listing, publish and private-listing screens in the
 * other direction. Separate names, no cascade fight either way.
 */
.fmm-shipsel__body > span { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: #9CA3AF; }

/* The chosen row is the only one drawn in full weight, and its delivery window
   turns amber rather than staying grey — the frame uses both to say "this is
   the one" without relying on the radio alone. */
.fmm-shipsel.is-on .fmm-shipsel__body > b { font-weight: 700; }
.fmm-shipsel.is-on .fmm-shipsel__body > span { color: #A16207; }

.fmm-shipsel__tag {
    font-style: normal;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: .25px;
    text-transform: uppercase;
    color: #fff;
    background: #F5C518;
}

/* Grey until chosen, full-strength once it is: the price a seller has actually
   committed to should not read the same as the ones they have not. */
.fmm-shipsel__price { flex-shrink: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: #374151; }
.fmm-shipsel.is-on .fmm-shipsel__price { color: var(--fmm-text); }

.fmm-shipnotes {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 15px 17px;
    margin-top: 16px;
    background: var(--fmm-bg-alt);
}

/* Divider between notes, as the frame draws it — on the gap, not as an element. */
.fmm-shipnotes > span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-shipnotes > span + span { border-left: 1px solid #F3F4F6; padding-left: 20px; }
.fmm-shipnotes svg { flex-shrink: 0; color: #16A34A; }

.fmm-shipnow {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-shipnow__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fmm-shipnow__head > b { font-size: 15px; font-weight: 700; }
.fmm-shipnow__head > em {
    font-style: normal;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--fmm-text);
    background: var(--fmm-yellow);
}

.fmm-shipnow__pick {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 190, 46, .35);
    border-radius: 12px;
    padding: 13px;
    background: #FFF8E7;
}

.fmm-shipnow__pick b { display: block; font-size: 14px; font-weight: 700; }
.fmm-shipnow__pick em { display: block; font-style: normal; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-shipnow__none { margin: 0; font-size: 13px; line-height: 19px; color: var(--fmm-muted); }

.fmm-shipnow__rows { margin-top: 14px; }
.fmm-shipnow__rows > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #F3F4F6;
    padding: 9px 0;
    font-size: 13px;
}
.fmm-shipnow__rows > span:last-child { border-bottom: 0; }
.fmm-shipnow__rows em { display: flex; align-items: center; gap: 7px; font-style: normal; color: var(--fmm-muted); }
.fmm-shipnow__rows em > svg { flex-shrink: 0; color: var(--fmm-muted); }
.fmm-shipnow__rows b { font-weight: 600; text-align: right; }

@media (max-width: 1100px) {
    .fmm-shipsplit { grid-template-columns: minmax(0, 1fr); }
}

.fmm-shipsel {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 13px;
    font-size: 14px;
    cursor: pointer;
}

/* Border grows inward, so choosing a row does not nudge the ones below it. */
.fmm-shipsel.is-on {
    border: 2px solid #F5C518;
    padding: 12px;
    background: #FFF9E6;
    box-shadow: 0 0 0 2px #F5C518, 0 4px 16px rgba(245, 197, 24, .18);
}

.fmm-shipsel input { position: absolute; opacity: 0; pointer-events: none; }

.fmm-shipsel > i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
    border: 1px solid #767676;
    border-radius: 50%;
    background: #fff;
}

/* A real 9.6px dot rather than an inset-shadow approximation, so it stays
   round and centred at any zoom. */
.fmm-shipsel.is-on > i {
    border-color: #FACC15;
    background: radial-gradient(circle at 50% 50%, #FACC15 0 4.8px, #fff 4.8px);
}

/* --- bank / payout account (Figma 5:17778) ------------------------------- */

.fmm-bkcard {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 25px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-bkcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.fmm-bkcard__head h3 { font-size: 18px; line-height: 26px; font-weight: 700; margin: 0; }
.fmm-bkcard__head em { display: block; font-style: normal; font-size: 13.5px; line-height: 20px; color: var(--fmm-muted); }

.fmm-bkstatus {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-bkstatus.is-ok { color: #047857; background: #ECFDF5; }
.fmm-bkstatus.is-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10B981; }

.fmm-bkempty { margin: 0; font-size: 14px; line-height: 22px; color: var(--fmm-muted); }

.fmm-bkacct { display: flex; align-items: center; gap: 16px; }

.fmm-bkacct__ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fmm-text);
    background: #FFF8E6;
}

.fmm-bkacct__id > b { display: block; font-size: 16px; line-height: 24px; font-weight: 700; }
.fmm-bkacct__id > em { display: block; font-style: normal; font-size: 14px; line-height: 20px; color: var(--fmm-muted); }

.fmm-bkverif {
    display: inline-block;
    border-radius: 6px;
    padding: 4px 10px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 16px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-bkmeta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--fmm-bank-meta-gap);
    border-radius: var(--fmm-radius);
    padding: var(--fmm-bank-meta-padding);
    margin-top: 20px;
    background: var(--fmm-bank-meta-background);
}

.fmm-bkmeta em {
    display: block;
    font-style: normal;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-bkmeta b { display: block; margin-top: 3px; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.fmm-bkmeta b.is-cap { text-transform: capitalize; }
.fmm-bkcard__actions { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.fmm-bkcard__actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 7px; padding: 0 16px; background: #fff; font-size: 12px; line-height: 18px; cursor: pointer; }
.fmm-bkcard__update { border: 1px solid var(--fmm-border); color: var(--fmm-text); }
.fmm-bkcard__remove { border: 0; color: #DC2626; }
.fmm-bkcard__actions button:focus-visible { outline: 2px solid var(--fmm-yellow); outline-offset: 2px; }

.fmm-bkhead { margin-bottom: 24px; }
.fmm-bkhead h3 { font-size: 18px; line-height: 26px; font-weight: 700; margin: 0; }
.fmm-bkhead em { display: block; font-style: normal; font-size: 13.5px; line-height: 20px; color: var(--fmm-muted); }

/* The two-up row inside a section needs its own labels. */
.fmm-bgrid > span { display: block; min-width: 0; }
.fmm-bgrid > span > label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 8px; }

/* --- payout & verification overview (settled profiles) ------------------ */

.fmm-manage {
    text-align: left;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    overflow: hidden;
    margin: 24px 0 20px;
    background: #fff;
}

.fmm-manage__head { padding: 21px 21px 17px; border-bottom: 1px solid var(--fmm-border); }
.fmm-manage__head > h2 { font-size: 17px; line-height: 24px; font-weight: 700; margin: 0 0 4px; }
.fmm-manage__head > p { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--fmm-muted); }

.fmm-manage__row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #F3F4F6;
    padding: 17px 21px;
    font: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
}

.fmm-manage__row:last-child { border-bottom: 0; }
.fmm-manage__row:hover { background: var(--fmm-bg-alt); }

.fmm-manage__ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-manage__ico.is-ok { color: #047857; background: #ECFDF5; }

.fmm-manage__body { flex: 1 0 0; min-width: 0; }
.fmm-manage__body > b { display: block; font-size: 15px; line-height: 22px; font-weight: 700; }
.fmm-manage__body > em { display: block; font-style: normal; font-size: 13.5px; line-height: 20px; color: var(--fmm-muted); overflow-wrap: anywhere; }
.fmm-manage__body > i { display: block; font-style: normal; margin-top: 2px; font-size: 12.5px; line-height: 18px; color: var(--fmm-yellow-dark); }

.fmm-manage__go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-text);
}

.fmm-editbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 18px;
    background: var(--fmm-bg-alt);
}

.fmm-editbar > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-text);
    background: none;
    cursor: pointer;
}

.fmm-editbar > button:hover { text-decoration: underline; }
.fmm-editbar > span { font-size: 13px; color: var(--fmm-muted); }

/* --- two-step verification (Figma 5:17379) ------------------------------ */

.fmm-account-content { min-width: 0; }
.fmm-seller-twofa {
    --twofa-content-width: 752px;
    --twofa-sidebar-width: 256px;
    --twofa-gap: 32px;
    --twofa-title-size: 32px;
    --twofa-title-line: 40px;
    --twofa-lead-size: 18px;
    --twofa-lead-line: 28px;
    --twofa-header-gap: 16px;
    --twofa-copy-gap: 8px;
    --twofa-option-padding: 20px;
    --twofa-button-padding: 12px;
    --twofa-card-copy-gap: 24px;
    --twofa-ink: #000;
    --twofa-selected: #FFBE2E;
}
.fmm-vpage.fmm-seller-twofa .fmm-ssplit {
    grid-template-columns: var(--twofa-sidebar-width) minmax(0, var(--twofa-content-width));
    gap: var(--twofa-gap);
}
.fmm-twofa-heading { margin-bottom: var(--twofa-gap); }
.fmm-twofa-back { display: inline-flex; align-items: center; gap: var(--twofa-copy-gap); color: var(--fmm-muted); font-size: 14px; line-height: 20px; margin-bottom: var(--twofa-header-gap); }
.fmm-twofa-back img, .fmm-twofa-method-icon, .fmm-2bc__btn img { flex-shrink: 0; }
.fmm-twofa-heading h1 { margin: 0 0 var(--twofa-copy-gap); font-size: var(--twofa-title-size); line-height: var(--twofa-title-line); color: var(--twofa-ink); }
.fmm-twofa-heading p { margin: 0; font-size: var(--twofa-lead-size); line-height: var(--twofa-lead-line); color: var(--twofa-ink); }
.fmm-seller-twofa .fmm-2fam { position: relative; padding: var(--twofa-option-padding); }
.fmm-seller-twofa .fmm-2fa > h2, .fmm-seller-twofa .fmm-2fam__top > b { color: var(--twofa-ink); }
.fmm-seller-twofa .fmm-2bc { padding: var(--twofa-gap); }
.fmm-seller-twofa .fmm-2bc__body > p { margin-bottom: var(--twofa-card-copy-gap); }
.fmm-seller-twofa .fmm-2bc__btn { padding: var(--twofa-button-padding) var(--twofa-card-copy-gap); }
.fmm-seller-twofa .fmm-2fam:has(input:focus-visible) .fmm-2fam__top > b { text-decoration: underline; text-underline-offset: .2em; }
.fmm-seller-twofa .fmm-2fam.is-on { border-color: var(--twofa-selected); }
.fmm-seller-twofa .fmm-2fam__top img { flex-shrink: 0; }
.fmm-seller-twofa .fmm-2fa__go { background: var(--twofa-selected); }
.fmm-seller-twofa .fmm-2fa__go:disabled, .fmm-seller-twofa .fmm-2fa__cancel:disabled { opacity: .5; cursor: not-allowed; }
.fmm-seller-twofa .fmm-2fa__acts { flex-wrap: wrap; }
.fmm-twofa-note { color: var(--fmm-muted); margin-top: var(--twofa-header-gap); }
.fmm-seller-twofa .fmm-2bc__codes > .fmm-2bc__btn { margin-top: var(--twofa-header-gap); }
@media (max-width: 900px) {
    .fmm-vpage.fmm-seller-twofa .fmm-ssplit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .fmm-seller-twofa { --twofa-title-size: 26px; --twofa-title-line: 34px; --twofa-lead-size: 16px; --twofa-gap: 24px; }
    .fmm-seller-twofa .fmm-2fa, .fmm-seller-twofa .fmm-2bc { padding: var(--twofa-header-gap); }
    .fmm-seller-twofa .fmm-2bc__btn { flex-wrap: wrap; max-width: 100%; }
    .fmm-seller-twofa .fmm-2fam__sub { gap: var(--twofa-copy-gap); }
}

.fmm-2fa {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-2fa > h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0 0 24px; }
.fmm-2fa__list { display: flex; flex-direction: column; gap: 16px; }

.fmm-2fam {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 21px;
    cursor: pointer;
}

/* 2px on the selected row against 1px elsewhere, absorbed by one less pixel of
   padding so the rows do not jump as the choice moves. */
.fmm-2fam.is-on { border: 2px solid var(--fmm-yellow); padding: 20px; background: #FFFDF5; }

.fmm-2fam input { position: absolute; opacity: 0; pointer-events: none; }

.fmm-2fam__ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    border-radius: 50%;
    color: var(--fmm-yellow-dark);
    background: #FFF8E6;
}

.fmm-2fam.is-on .fmm-2fam__ico { background: #FFF7ED; }

.fmm-2fam__body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.fmm-2fam__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fmm-2fam__top > b { font-size: 18px; line-height: 28px; font-weight: 700; }

.fmm-2fam__dot {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    border: 2px solid #D1D5DB;
    border-radius: 10px;
    background: #fff;
}

.fmm-2fam.is-on .fmm-2fam__dot {
    border-color: var(--fmm-yellow);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 20px var(--fmm-yellow);
}

.fmm-2fam__sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--fmm-muted); }

.fmm-2fam__sub > em {
    font-style: normal;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #166534;
    background: #DCFCE7;
}

.fmm-2fam__hint { padding-top: 4px; font-size: 14px; line-height: 20px; color: #9CA3AF; }

/* Backup recovery codes */

.fmm-2bc {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 33px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-2bc__ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--fmm-yellow-dark);
    background: #FFF8E6;
}

.fmm-2bc__body { min-width: 0; }
.fmm-2bc__body > h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0 0 8px; }
.fmm-2bc__body > p { font-size: 16px; line-height: 26px; color: var(--fmm-muted); margin: 0 0 16px; }

.fmm-2bc__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 13px 25px;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--fmm-text);
    background: var(--fmm-bg-alt);
    cursor: pointer;
}

.fmm-2bc__btn:disabled { opacity: .5; cursor: not-allowed; }
.fmm-2bc__off { font-size: 13px; line-height: 18px; color: var(--fmm-muted); margin: 10px 0 0; }

.fmm-2bc__codes { margin-top: 16px; }
.fmm-2bc__codes > p { font-size: 13px; line-height: 18px; color: #B45309; margin: 0 0 8px; }
.fmm-2bc__codes > div { display: flex; gap: 8px; flex-wrap: wrap; }
.fmm-2bc__codes code { border-radius: 6px; padding: 6px 10px; font-size: 13px; background: #F3F4F6; }

.fmm-2fa__acts {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--fmm-border);
    padding-top: 17px;
    margin-top: 32px;
}

.fmm-2fa__go {
    border: 0;
    border-radius: 12px;
    padding: 14px 32px;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--fmm-text);
    background: var(--fmm-yellow);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    cursor: pointer;
}

.fmm-2fa__cancel {
    border: 0;
    border-radius: 12px;
    padding: 14px 32px;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--fmm-muted);
    background: none;
    cursor: pointer;
}

.fmm-2fa__cancel:hover { color: var(--fmm-text); }

.fmm-2link {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 21px;
    margin-top: 24px;
    color: inherit;
    text-decoration: none;
    background: #fff;
}

.fmm-2link:hover { border-color: var(--fmm-yellow); }
.fmm-2link__ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}
.fmm-2link__body { flex: 1 0 0; min-width: 0; }
.fmm-2link__body > b { display: block; font-size: 16px; line-height: 24px; font-weight: 700; }
.fmm-2link__body > em { font-style: normal; font-size: 14px; line-height: 20px; color: var(--fmm-muted); }
.fmm-2link > svg { flex-shrink: 0; color: var(--fmm-muted); }

/* Two-step confirmation step (begin -> confirm) */

.fmm-2conf {
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 21px;
    margin-top: 20px;
    background: #FFFBEB;
}

.fmm-2conf__key { margin-bottom: 14px; }
.fmm-2conf__key > p { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: #92400E; }
.fmm-2conf__key > code {
    display: inline-block;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 15px;
    letter-spacing: 2px;
    background: #fff;
    overflow-wrap: anywhere;
}

.fmm-2conf__lead { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: #92400E; }
.fmm-2conf__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.fmm-2conf__row input {
    width: 132px;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 11px 14px;
    font: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--fmm-text);
    background: #fff;
}

.fmm-2conf__row input:focus { outline: none; border-color: var(--fmm-yellow); }
.fmm-2conf__row .fmm-2fa__go { padding: 11px 22px; font-size: 15px; }
.fmm-2conf__row .fmm-2fa__cancel { padding: 11px 12px; font-size: 14px; }

.fmm-2fa__on { font-size: 15px; line-height: 24px; font-weight: 600; color: #047857; }

/* --- login activity (Figma 5:18667) ------------------------------------- */
.fmm-signin-link { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid var(--fmm-yellow); border-radius:999px; background:var(--fmm-yellow); color:#000; font-size:13px; font-weight:700; text-decoration:none; }
.fmm-signin-link:hover { border-color:var(--fmm-yellow-dark); background:var(--fmm-yellow-dark); color:#000; }

.fmm-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--fmm-muted);
    text-decoration: none;
}

.fmm-back:hover { color: var(--fmm-text); }

.fmm-alogin {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid #FECACA;
    border-radius: 16px;
    padding: 21px;
    margin-bottom: 24px;
    background: #FEF2F2;
}

.fmm-alogin__ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #B91C1C;
    background: #FEE2E2;
}

.fmm-alogin__body { min-width: 0; }
.fmm-alogin__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fmm-alogin__top > b { font-size: 16px; line-height: 24px; font-weight: 700; color: #991B1B; }
.fmm-alogin__top > em {
    font-style: normal;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #fff;
    background: #DC2626;
}
.fmm-alogin__body > p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: #7F1D1D; }
.fmm-alogin__when { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: #B91C1C; }

.fmm-cursess {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-cursess__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.fmm-cursess__head > h2 { font-size: 18px; line-height: 28px; font-weight: 700; margin: 0; }

.fmm-cursess__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #047857;
    background: #ECFDF5;
}

.fmm-cursess__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10B981; }

.fmm-cursess__dev { display: flex; align-items: center; gap: 16px; }

.fmm-cursess__ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fmm-yellow-dark);
    background: #FFF8E6;
}

.fmm-cursess__id { min-width: 0; }
.fmm-cursess__id > b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; line-height: 24px; font-weight: 700; }
.fmm-cursess__id > b > em {
    font-style: normal;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    line-height: 15px;
    font-weight: 600;
    color: var(--fmm-yellow-dark);
    background: #FFF8E6;
}
.fmm-cursess__id > span { display: block; font-size: 14px; line-height: 20px; color: var(--fmm-muted); overflow-wrap: anywhere; }

.fmm-cursess__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    border-top: 1px solid var(--fmm-border);
    padding-top: 20px;
    margin-top: 20px;
}

.fmm-cursess__grid em { display: block; font-style: normal; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--fmm-muted); }
.fmm-cursess__grid b { display: block; margin-top: 3px; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.fmm-cursess__grid b.is-muted { font-weight: 500; color: var(--fmm-muted); }

.fmm-cursess__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-top: 1px solid var(--fmm-border);
    padding-top: 16px;
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--fmm-muted);
}

.fmm-cursess__note > svg { flex-shrink: 0; margin-top: 2px; color: #10B981; }

.fmm-ract {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 25px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-ract__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fmm-ract__head > h2 { font-size: 18px; line-height: 28px; font-weight: 700; margin: 0; }

.fmm-ract__all {
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--fmm-text);
    background: var(--fmm-bg-alt);
    cursor: pointer;
}

/* Scrolls inside itself rather than pushing the page sideways. */
.fmm-ract__table { overflow-x: auto; }

.fmm-ract__hrow,
.fmm-ract__row {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(110px, .9fr) minmax(120px, 1fr) minmax(110px, .8fr) minmax(140px, 1fr);
    gap: 16px;
    align-items: center;
}

.fmm-ract__hrow {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fmm-border);
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-ract__row {
    padding: 14px 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: 14px;
    line-height: 20px;
    color: var(--fmm-muted);
}

.fmm-ract__row:last-child { border-bottom: 0; }

.fmm-ract__dev { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fmm-ract__dev > i {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}
.fmm-ract__dev > b { font-weight: 600; color: var(--fmm-text); overflow-wrap: anywhere; }

.fmm-ract__chip {
    display: inline-block;
    font-style: normal;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-ract__chip.is-bad { color: #B91C1C; background: #FEE2E2; }

.fmm-ract__empty { margin: 0; font-size: 14px; line-height: 22px; color: var(--fmm-muted); }

/* --- seller shell navigation -------------------------------------------- */

/* A swap is usually a few tens of ms, so this is a cursor hint rather than a
   spinner — a loading bar for something that short reads as a glitch. */
body.is-navigating { cursor: progress; }
body.is-navigating main { opacity: .6; transition: opacity .12s ease .08s; }

/* --- change password screen (Figma 5:17009) ------------------------------ */

.fmm-pwcard {
    display: block;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 33px 33px 49px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-pwfield { display: block; margin-bottom: 24px; }
.fmm-pwfield > span { display: block; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 8px; }

.fmm-pwfield__box { position: relative; display: block; }

.fmm-pwfield__box > input {
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 14px 49px 15px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--fmm-text);
    background: #fff;
}

.fmm-pwfield__box > input::placeholder { color: #9CA3AF; }
.fmm-pwfield__box > input:focus { outline: none; border-color: var(--fmm-yellow); }

.fmm-pweye {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    border: 0;
    padding: 2px 0;
    color: var(--fmm-muted);
    background: none;
    cursor: pointer;
}

.fmm-pweye:hover { color: var(--fmm-text); }

.fmm-pwrule { height: 1px; margin: 0 0 24px; background: var(--fmm-border); }

.fmm-pwrules {
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 21px;
    background: #FAFAFA;
}

.fmm-pwrules > b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 12px; }
.fmm-pwrules ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9.5px; }

.fmm-pwrules li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--fmm-muted); }
.fmm-pwrules li.is-on { color: #047857; }

/* Unmet is the frame's 6px dot; met grows into a check, so the row changes
   meaning rather than just colour. */
.fmm-pwrules li > i {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #D1D5DB;
    transition: width .12s ease, height .12s ease, background-color .12s ease;
}

.fmm-pwrules li.is-on > i { width: 16px; height: 16px; color: #fff; background: #10B981; }

.fmm-pwacts { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 24px; }

.fmm-pwsubmit {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 14px 16px;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--fmm-text);
    background: var(--fmm-yellow);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    cursor: pointer;
}

.fmm-pwsubmit:disabled { opacity: .5; cursor: not-allowed; }

.fmm-pwlink {
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--fmm-muted);
    background: none;
    cursor: pointer;
}

.fmm-pwlink:hover { color: var(--fmm-text); text-decoration: underline; }
.fmm-pwlink:disabled { opacity: .6; cursor: not-allowed; text-decoration: none; }

/* --- email / phone screen (Figma 5:16643) -------------------------------- */

/* Security notice — indigo, deliberately not the amber used for actions, so a
   standing explanation cannot be mistaken for something needing attention. */
.fmm-snotice {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid #E0E7FF;
    border-radius: 16px;
    padding: 21px;
    margin-bottom: 24px;
    background: #EEF2FF;
}

.fmm-snotice > i {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #4338CA;
    background: #E0E7FF;
}
.fmm-snotice > i img { display: block; width: 18px; height: 18px; object-fit: contain; }

.fmm-snotice > span { font-size: 14px; line-height: 22.75px; color: #3730A3; }
.fmm-snotice b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: #4338CA; margin-bottom: 3px; }

.fmm-ccard {
    position: relative;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-ccard__head { display: flex; align-items: flex-start; gap: 20px; }

.fmm-ccard__ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 190, 46, .2);
    border-radius: 50%;
    color: var(--fmm-yellow-dark);
    background: #FFF8EA;
}
.fmm-ccard__ico img { display: block; max-width: 20px; max-height: 20px; object-fit: contain; }
.fmm-ccard__edit {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.fmm-ccard__edit img { display: block; width: 14px; height: 14px; object-fit: contain; }
.fmm-ccard__edit:focus-visible { outline: 2px solid var(--fmm-yellow); outline-offset: 2px; border-radius: 4px; }

.fmm-ccard__id { min-width: 0; }
.fmm-ccard__id > b { display: block; font-size: 18px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }

.fmm-ccard__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.fmm-ccard__meta > em {
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-cchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

.fmm-cchip > svg { flex-shrink: 0; }

.fmm-cchip.is-ok   { border-color: #A7F3D0; color: #047857; background: #ECFDF5; }
.fmm-cchip.is-wait { border-color: #FDE68A; color: #B45309; background: #FFFBEB; }
.fmm-cchip.is-off  { border-color: var(--fmm-border); color: var(--fmm-muted); background: var(--fmm-bg-alt); }

.fmm-ccard__acts { display: flex; align-items: center; gap: 16px; margin-top: 24px; }

.fmm-cbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 11px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--fmm-text);
    background: var(--fmm-bg-alt);
    cursor: pointer;
}

.fmm-cbtn--block { flex: 1 0 0; min-width: 0; }

.fmm-cbtn--primary {
    border-color: transparent;
    padding: 12px 16px;
    font-weight: 700;
    background: var(--fmm-yellow);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-cbtn:disabled { opacity: .55; cursor: not-allowed; }

.fmm-cform { margin-top: 20px; }
.fmm-cform__acts { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }

.fmm-ccode {
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 17px;
    margin-top: 20px;
    background: #FFFBEB;
}

.fmm-ccode > p { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: #92400E; }
.fmm-ccode > p b { overflow-wrap: anywhere; }

.fmm-ccode__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.fmm-ccode__row input {
    width: 132px;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 11px 14px;
    font: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--fmm-text);
    background: #fff;
}

.fmm-ccode__row input:focus { outline: none; border-color: var(--fmm-yellow); }

.fmm-cadd { padding-top: 8px; }
.fmm-cadd > h2 { font-size: 18px; line-height: 28px; font-weight: 700; margin: 0 0 16px; }

.fmm-cadd__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    border: 1px dashed #D1D5DB;
    border-radius: 16px;
    padding: 21px;
    font: inherit;
    color: inherit;
    background: #fff;
    cursor: pointer;
}

.fmm-cadd__btn:hover { border-color: var(--fmm-yellow); }

.fmm-cadd__ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fmm-border);
    border-radius: 50%;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}
.fmm-cadd__ico img { display: block; width: 16px; height: 18px; object-fit: contain; }

.fmm-cadd__txt { min-width: 0; }
.fmm-cadd__txt > b { display: block; font-size: 16px; line-height: 24px; font-weight: 700; }
.fmm-cadd__txt > em { font-style: normal; font-size: 14px; line-height: 20px; color: var(--fmm-muted); overflow-wrap: anywhere; }

/* --- username profile preview (Figma 5:16342) ---------------------------- */

.fmm-pprev__title { font-size: 14px; line-height: 20px; font-weight: 600; margin: 24px 0 12px; }

.fmm-pprev {
    position: relative;
    max-width: 448px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    overflow: hidden;
    padding: 29px 25px 25px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* Decorative corner disc, clipped by the card's own overflow. */
.fmm-pprev::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -64px;
    width: 128px;
    height: 128px;
    border: 1px solid #F3F4F6;
    border-bottom-left-radius: 999px;
    background: #FDFBF7;
}

.fmm-pprev__head { position: relative; display: flex; align-items: center; gap: 16px; }

.fmm-pprev__av {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: block;
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fmm-bg-alt);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-pprev__av img { width: 100%; height: 100%; object-fit: cover; }

.fmm-pprev__id { min-width: 0; }
.fmm-pprev__id > b { display: block; font-size: 18px; line-height: 22.5px; font-weight: 700; overflow-wrap: anywhere; }

.fmm-pprev__handle { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--fmm-muted); }
.fmm-pprev__handle > span { overflow-wrap: anywhere; }
.fmm-pprev__star { display: block; width: 12px; height: 12px; flex: 0 0 12px; }
.fmm-pprev__handle > svg { flex-shrink: 0; color: var(--fmm-yellow); }

.fmm-pprev__stats {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid rgba(255, 190, 46, .2);
    border-radius: 8px;
    padding: 13px;
    margin-top: 20px;
    background: #FFFDF9;
}

.fmm-pprev__badge { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #1F2937; }

.fmm-pprev__badge > i {
    display: flex;
    border-radius: 4px;
    padding: 6px;
    color: var(--fmm-yellow-dark);
    background: rgba(255, 190, 46, .2);
}

.fmm-pprev__badge.is-off { color: var(--fmm-muted); }
.fmm-pprev__badge.is-off > i { color: var(--fmm-muted); background: var(--fmm-bg-alt); }

.fmm-pprev__rate { display: flex; align-items: center; gap: 6px; }
.fmm-pprev__rate > svg { display: block; flex: 0 0 15.75px; width: 15.75px; height: 14px; color: var(--fmm-yellow); }
.fmm-pprev__rate > b { font-size: 14px; line-height: 20px; font-weight: 700; }
.fmm-pprev__rate > em { font-style: normal; font-size: 14px; line-height: 20px; color: var(--fmm-muted); }

.fmm-pprev__cap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 448px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--fmm-font-ui);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--fmm-muted);
}

.fmm-pprev__cap > svg { flex-shrink: 0; margin-top: 2px; }

/* --- username tips rail (Figma 5:16377) --------------------------------- */

.fmm-tips {
    border: 1px solid rgba(255, 190, 46, .2);
    border-radius: 12px;
    padding: 25px;
    background: #FFFDF9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-tips__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.fmm-tips__head > i {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--fmm-yellow-dark);
    background: rgba(255, 190, 46, .2);
}

.fmm-tips__head > h2 { font-size: 16px; line-height: 24px; font-weight: 700; margin: 0; }

.fmm-tips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.fmm-tips__list li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 20px;
    color: #4B5563;
}

.fmm-tips__list li > b { font-weight: 400; }
.fmm-pprev__badge > i img { display: block; width: 14px; height: 14px; object-fit: contain; }

/* The check is drawn on the marker rather than inlined per row, so the four
   items cannot drift apart. */
.fmm-tips__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 12.25px;
    height: 14px;
    background: var(--fmm-yellow);
    -webkit-mask: no-repeat center / 12.25px 10px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3L9 16l-7-7'/%3E%3C/svg%3E");
    mask: no-repeat center / 12.25px 10px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3L9 16l-7-7'/%3E%3C/svg%3E");
}

/* --- username form card (Figma 5:16309) --------------------------------- */

.fmm-ucard {
    position: relative;
    z-index: 1;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    overflow: visible;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-ucard__body { padding: 32px; }

.fmm-ucard__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--fmm-border);
    border-radius: 0 0 11px 11px;
    padding: 17px 32px 16px;
    background: #F9FAFB;
}

.fmm-ufield { display: block; max-width: 448px; }
.fmm-ufield > span { display: block; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 8px; }
.fmm-ufield > .fmm-ufield__label { display: flex; align-items: center; gap: 6px; }
.fmm-username-tip-tooltip { width: min(320px, calc(100vw - 48px)); }
.fmm-username-tip-tooltip > b { display: block; margin-bottom: 4px; color: #fff; font-weight: 600; }

/* The @ and the state tick sit inside the field, so the value reads as the
   handle a buyer would actually type. */
.fmm-ufield__box {
    position: relative;
    display: block;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #F9FAFB;
}

.fmm-ufield__box.is-ok { border-color: var(--fmm-yellow); }
.fmm-ufield__box.is-bad { border-color: #FCA5A5; }

.fmm-ufield__box > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: var(--fmm-muted);
}

.fmm-ufield__box > input {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 13px 49px 13px 41px;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--fmm-text);
    background: none;
}

.fmm-ufield__box > input:focus { outline: none; }

.fmm-ufield__box > svg {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fmm-yellow);
}

.fmm-ufield__box.is-bad > svg { color: #DC2626; }

.fmm-ustate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--fmm-yellow-dark, #B45309);
}

.fmm-ustate.is-bad { color: #DC2626; }
.fmm-ustate > svg { flex-shrink: 0; }

.fmm-urules { list-style: none; margin: 8px 0 0; padding-left: 4px; }
.fmm-urules li { font-size: 14px; line-height: 20px; color: var(--fmm-text); }

/* --- public profile preview (Figma 5:15963) ------------------------------ */

.fmm-sprev__title { font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 16px; padding-left: 4px; }

.fmm-sprev {
    position: relative;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-sprev__live {
    position: absolute;
    top: 14px;
    right: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 190, 46, .3);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 9.5px;
    line-height: 12.5px;
    font-weight: 700;
    color: var(--fmm-text);
    background: #FFF8E6;
}

.fmm-sprev__live.is-off { border-color: var(--fmm-border); color: var(--fmm-muted); background: var(--fmm-bg-alt); }
.fmm-sprev__live img { display: block; flex: none; width: 12px; height: 10px; object-fit: contain; }

.fmm-sprev__body { padding: 32px 24px 24px; }

.fmm-sprev__head { display: flex; align-items: flex-start; gap: 16px; }

.fmm-sprev__av {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: block;
    border: 1px solid #F3F4F6;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fmm-bg-alt);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-sprev__av img { width: 100%; height: 100%; object-fit: cover; }

.fmm-sprev__id { padding-top: 3px; min-width: 0; }
.fmm-sprev__id > b { display: block; font-size: 18px; line-height: 22.5px; font-weight: 700; overflow-wrap: anywhere; }

.fmm-sprev__rate { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.fmm-sprev__rate > svg { color: var(--fmm-yellow); flex-shrink: 0; }
.fmm-sprev__rate > b { font-size: 14px; line-height: 20px; font-weight: 600; }
.fmm-sprev__rate > em { font-style: normal; font-size: 14px; line-height: 20px; color: var(--fmm-muted); }

.fmm-sprev__body > p {
    font-size: 14px;
    line-height: 22.75px;
    color: rgba(35, 31, 32, .8);
    margin: 15px 0 0;
}

.fmm-sprev__meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid #F3F4F6;
    padding-top: 17px;
    margin-top: 24px;
}

.fmm-sprev__meta > span { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--fmm-muted); }
.fmm-sprev__meta svg { flex-shrink: 0; }
.fmm-sprev__meta img { display: block; flex: none; object-fit: contain; }

.fmm-sprev__note {
    border-top: 1px solid #F3F4F6;
    padding: 13px 24px 12px;
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--fmm-muted);
    background: #F9FAFB;
}

.fmm-sprev__acts { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

/* --- personal information form card (Figma 5:15474) ---------------------- */

.fmm-pcard {
    display: block;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-pcard__body { padding: 32px; }

/* The photo band runs the full width of the card, not inset with the fields. */
.fmm-pcard > .fmm-savatar {
    display: grid;
    justify-items: center;
    gap: 16px;
    margin: 0;
    padding: 32px;
    border-bottom: 1px solid #F3F4F6;
    background: rgba(255, 253, 249, .3);
}

.fmm-pcard > .fmm-savatar > span,
.fmm-pcard > .fmm-savatar img { width: 96px; height: 96px; }

.fmm-pcard > .fmm-savatar > span {
    border: 4px solid #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.fmm-pcard > .fmm-savatar label {
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    background: var(--fmm-yellow);
}

.fmm-pcard > .fmm-savatar b { font-size: 14px; font-weight: 500; color: var(--fmm-text); }

/* Amber, per the frame, and a heading above the body copy. */
.fmm-pcard .fmm-snote {
    gap: 16px;
    border: 1px solid #FEF9C3;
    border-radius: 8px;
    padding: 16px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
    color: #4B5563;
    background: #FEFCE8;
}

.fmm-pcard .fmm-snote > svg { width: 18px; height: 18px; }
.fmm-pcard .fmm-snote b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--fmm-text); }

.fmm-pcard .fmm-sfoot {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    border-top: 1px solid #F3F4F6;
    padding-top: 25px;
    margin-top: 24px;
}

/* --- seller settings hub (Figma 5:14821 / 5:14996) ----------------------- */

.fmm-shub { margin-bottom: 28px; }

.fmm-shub > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 8px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-shub__flag {
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #B91C1C;
    background: #FEF2F2;
}

.fmm-shub__card {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-shub__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    color: inherit;
    text-decoration: none;
}

.fmm-shub__row + .fmm-shub__row { border-top: 1px solid #F3F4F6; }
.fmm-shub__row:hover { background: var(--fmm-bg-alt); }
.fmm-shub__row.is-bad { background: #FEF2F2; }
.fmm-shub__row.is-bad .fmm-shub__ico { color: #B91C1C; background: #FEE2E2; }
.fmm-shub__row.is-bad em { color: #B91C1C; }

.fmm-shub__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 9999px;
    color: var(--fmm-text);
    background: #FFFDF9;
}

.fmm-shub__ico img {
    display: block;
    width: auto;
    height: auto;
    max-width: 23px;
    max-height: 18px;
}

.fmm-shub__row.is-bad .fmm-shub__ico img {
    filter: invert(22%) sepia(91%) saturate(3272%) hue-rotate(350deg) brightness(83%) contrast(92%);
}

.fmm-shub__ico--at { font-size: 18px; font-weight: 500; }

.fmm-shub__txt { flex: 1; min-width: 0; }
.fmm-shub__txt b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.fmm-shub__txt em { font-style: normal; font-size: 14px; line-height: 20px; color: var(--fmm-muted); overflow-wrap: anywhere; }

.fmm-shub__end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.fmm-shub__status-check { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; }
.fmm-shub__status-check svg { display: block; }
.fmm-shub__chev { flex-shrink: 0; color: var(--fmm-faint); }

.fmm-shub__ok {
    border: 1px solid #BBF7D0;
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    white-space: nowrap;
    color: #15803D;
    background: #F0FDF4;
}

/* Account Health rail. */
.fmm-ahealth {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 25px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-ahealth h2 { font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 16px; }

.fmm-ahealth__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    color: inherit;
    text-decoration: none;
}

.fmm-ahealth__row > svg { flex-shrink: 0; margin-top: 3px; }
.fmm-ahealth__row > svg.is-ok { color: #16A34A; }
.fmm-ahealth__row > svg.is-bad { color: #DC2626; }
.fmm-ahealth__row b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.fmm-ahealth__row b.is-bad { color: #DC2626; }
.fmm-ahealth__row em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--fmm-muted); }
.fmm-ahealth__row:hover b { text-decoration: underline; }

.fmm-aswitch,
.fmm-alogout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border-radius: 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    cursor: pointer;
}

.fmm-aswitch {
    justify-content: space-between;
    padding: 14px 16px;
    margin-top: 24px;
    color: #fff;
    background: var(--fmm-text);
    text-decoration: none;
}

.fmm-aswitch > span { display: flex; align-items: center; gap: 12px; }

.fmm-alogout {
    border: 1px solid #FECACA;
    padding: 15px 17px;
    margin-top: 12px;
    color: #DC2626;
    background: #fff;
}

.fmm-alogout:hover { background: #FEF2F2; }

.fmm-aver { text-align: center; font-size: 12px; color: var(--fmm-faint); margin: 24px 0 0; }

/* --- payout setup submitted / complete ----------------------------------- */

.fmm-done {
    max-width: 560px;
    margin: 8px auto 0;
    text-align: center;
}

.fmm-done__mark {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    color: #fff;
    background: var(--fmm-yellow);
}

.fmm-done__mark.is-ok { background: #16A34A; }

.fmm-done h1 { font-size: 30px; line-height: 38px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fmm-done__sub { font-size: 15px; line-height: 24px; color: var(--fmm-muted); margin: 10px 0 0; }

.fmm-done__card {
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    padding: 22px;
    margin-top: 26px;
    text-align: left;
    background: #fff;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, .05);
}

/* The under-review card is tinted, as the frame draws it — a state to sit
   with rather than a result to celebrate. */
.fmm-done__card--wait { border-color: #FDE68A; background: #FFFBEB; box-shadow: none; }

.fmm-done__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 4px;
}

.fmm-done__cardhead b { font-size: 15px; font-weight: 700; }

.fmm-done__row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.fmm-done__card .fmm-done__row + .fmm-done__row { border-top: 1px solid var(--fmm-border); }
.fmm-done__card--wait .fmm-done__row + .fmm-done__row { border-top-color: #FDE68A; }

.fmm-done__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    color: #B45309;
    background: #FEF3C7;
}

.fmm-done__ico.is-ok { color: #15803D; background: #DCFCE7; }

.fmm-done__row b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.fmm-done__row em { font-style: normal; font-size: 13px; line-height: 20px; color: var(--fmm-muted); }

.fmm-done__acts { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }

@media (min-width: 620px) {
    .fmm-done__acts { flex-direction: row; justify-content: center; }
    .fmm-done__acts > .fmm-btn { width: auto; min-width: 190px; }
}

/* --- review & submit, from Figma 5:12093 / 5:12143 ----------------------- */

/* Each review section is its own card in the frame, not a bordered block
   inside one big card. */
.fmm-rcard {
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    padding: 33px;
    margin-top: 24px;
    background: #fff;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, .05);
}

.fmm-rcard .fmm-krev__head { padding-bottom: 0; margin-bottom: 20px; border-bottom: 0; }
.fmm-rcard .fmm-krev__head b { gap: 12px; font-size: 20px; line-height: 28px; }
.fmm-rcard .fmm-krev__head button { font-size: 14px; font-weight: 500; color: #F59E0B; }

/* File rows: a bordered tile, the name over its filename, and the state. */
.fmm-krev__doc {
    gap: 16px;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 17px;
    margin-top: 16px;
    background: #F9FAFB;
}

.fmm-krev__tile {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--fmm-border);
    border-radius: 8px;
    color: var(--fmm-muted);
    background: #fff;
}

.fmm-krev__meta { flex: 1; min-width: 0; }
.fmm-krev__meta b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.fmm-krev__meta em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--fmm-muted); overflow-wrap: anywhere; }

.fmm-rdone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border-radius: 9999px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #15803D;
    background: #F0FDF4;
}

.fmm-rdone.is-wait { color: #92400E; background: #FFFBEB; }
.fmm-rdone.is-bad { color: #B91C1C; background: #FEF2F2; }

/* Submission Summary rail — white, and it owns the submit control. */
.fmm-rsum {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    padding: 33px;
    margin-top: 16px;
    background: #fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .08);
}

.fmm-rsum h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0; }

.fmm-rsum__list { display: flex; flex-direction: column; gap: 16px; }

.fmm-rsum__line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    color: #4B5563;
}

.fmm-rsum__line > svg { flex-shrink: 0; color: var(--fmm-yellow); }
.fmm-rsum__line.is-done > svg { color: #16A34A; }

.fmm-rsum__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 17px;
    background: #F9FAFB;
}

.fmm-rsum__status > span { font-size: 14px; font-weight: 500; color: #4B5563; }

.fmm-rsum__status > b {
    border: 1px solid var(--fmm-border);
    border-radius: 6px;
    padding: 5px 13px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-rsum__note { font-size: 12.5px; line-height: 1.55; color: var(--fmm-muted); margin: 0; }

.fmm-rsum__acts { display: flex; flex-direction: column; gap: 16px; }

.fmm-rsum__submit,
.fmm-rsum__edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border-radius: 12px;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}

.fmm-rsum__submit {
    border: 0;
    padding: 16px 24px;
    font-weight: 700;
    color: #1F2937;
    background: var(--fmm-yellow);
    box-shadow: 0 4px 7px rgba(251, 191, 36, .39);
}

.fmm-rsum__submit:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }

.fmm-rsum__edit {
    border: 1px solid var(--fmm-border);
    padding: 17px 25px;
    font-weight: 600;
    color: #4B5563;
    background: #fff;
}

.fmm-rsum__edit:hover { background: var(--fmm-bg-alt); }

/* --- review & submit (onboarding, step 4) -------------------------------- */

.fmm-krev {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 14px 16px;
    margin-top: 16px;
}

.fmm-krev__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--fmm-border);
}

.fmm-krev__head b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.fmm-krev__head b > svg { flex-shrink: 0; color: var(--fmm-faint); }

.fmm-krev__head button {
    border: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #B45309;
    background: none;
    cursor: pointer;
}

.fmm-krev__head button:hover { text-decoration: underline; }

.fmm-krev__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
}

.fmm-krev__row span { font-size: 12.5px; color: var(--fmm-muted); }
.fmm-krev__row b { font-size: 13px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.fmm-krev__doc {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 9px;
    padding: 10px 12px;
    margin-top: 10px;
    background: var(--fmm-bg-alt);
}

/* Selecting the growing element by tag or position kept catching the wrong
   child as this row gained parts — first the chip, then the icon tile. It is
   named now, so adding another child cannot break the layout again. */
.fmm-krev__doc > .fmm-chip { flex-shrink: 0; }

.fmm-krev__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 12px 13px;
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #78350F;
    background: #FFFBEB;
}

.fmm-krev__note > svg { flex-shrink: 0; margin-top: 1px; color: #B45309; }

/* Submission checklist, inside the dark summary rail. */
.fmm-ksum__line {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .62);
}

.fmm-ksum__line > svg { flex-shrink: 0; }
.fmm-ksum__line.is-done { color: #fff; }
.fmm-ksum__line.is-done > svg { color: #86EFAC; }

/* --- payout settings summary (onboarding, bank step) ---------------------- */

.fmm-kpsum {
    margin-top: 16px;
    border-radius: var(--fmm-radius-lg);
    padding: 16px 18px;
    color: #fff;
    background: var(--fmm-dark);
}

.fmm-kpsum h2 { font-size: 14px; font-weight: 800; margin: 0 0 12px; color: #fff; }

.fmm-kpsum__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.fmm-kpsum__row:last-child { border-bottom: 0; padding-bottom: 0; }
.fmm-kpsum__row span { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.fmm-kpsum__row b { font-size: 13px; font-weight: 700; }

.fmm-kpsum__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    color: #92400E;
    background: var(--fmm-yellow);
}

.fmm-kpsum__chip.is-ok { color: #14532D; background: #86EFAC; }

/* --- "Setup your payout" dialog ------------------------------------------ */

.fmm-pnudge { position: relative; max-width: 380px; text-align: left; }

.fmm-pnudge__x {
    position: absolute;
    top: 14px;
    right: 16px;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--fmm-faint);
    cursor: pointer;
}

.fmm-pnudge h2 { font-size: 17px; font-weight: 800; margin: 0 0 16px; }

.fmm-pnudge__warn {
    border: 1px solid #FDE68A;
    border-radius: 11px;
    padding: 13px 14px;
    background: #FFFBEB;
}

.fmm-pnudge__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #92400E;
    margin-bottom: 6px;
}

.fmm-pnudge__warn p {
    font-size: 12.5px;
    line-height: 1.6;
    color: #78350F;
    margin: 0;
}

.fmm-pnudge__secure {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 2px 0;
    color: var(--fmm-faint);
}

/* Without this the flex row squashed the shield to 8×16 — an SVG with a width
   attribute is still shrinkable, and it collapsed into a sliver. */
.fmm-pnudge__secure > svg { flex-shrink: 0; }

.fmm-pnudge__secure b { display: block; font-size: 13px; font-weight: 700; color: var(--fmm-text); }

.fmm-pnudge__secure em {
    display: block;
    font-style: normal;
    font-size: 12px;
    line-height: 1.55;
    color: var(--fmm-muted);
    margin-top: 2px;
}

.fmm-pnudge__later {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 0;
    background: none;
    padding: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--fmm-muted);
    cursor: pointer;
}

.fmm-pnudge__later:hover { color: var(--fmm-text); }

/* --- private reservation, on the listing-created screen ------------------- */

.fmm-lsres {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 16px;
    margin-bottom: 18px;
    background: #fff;
}

.fmm-lsres__warn {
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 9px;
    padding: 9px 11px;
    margin-bottom: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #92400E;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
}

.fmm-lsres__row { display: flex; align-items: center; gap: 12px; }

.fmm-lsres__av {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
}

.fmm-lsres__who { flex: 1; min-width: 0; }
.fmm-lsres__who b { display: block; font-size: 14px; font-weight: 700; }

.fmm-lsres__who em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--fmm-muted);
    margin-top: 1px;
}

.fmm-lsres__clock { text-align: right; flex-shrink: 0; }

.fmm-lsres__clock em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--fmm-faint);
}

/* Tabular figures so the seconds do not jiggle the layout as they tick. */
.fmm-lsres__clock b {
    display: block;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.fmm-lsres__bar {
    height: 5px;
    border-radius: 999px;
    margin-top: 12px;
    overflow: hidden;
    /* Not --fmm-bg-alt: at 1% elapsed the fill is a 10px sliver, and against a
       near-white track the whole bar read as a stray mark rather than a gauge. */
    background: #E5E7EB;
}

.fmm-lsres__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fmm-yellow);
    transition: width 1s linear;
}

.fmm-lsres__note { font-size: 12px; color: var(--fmm-muted); margin: 12px 0 0; }

/* --- "Add New Product" chooser ------------------------------------------- */

.fmm-addprod { position: relative; max-width: 440px; text-align: left; }

.fmm-addprod__x {
    position: absolute;
    top: 14px;
    right: 16px;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--fmm-faint);
    cursor: pointer;
}

.fmm-addprod h2 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }

.fmm-addprod__sub { font-size: 13px; color: var(--fmm-muted); margin: 0 0 18px; }

.fmm-addprod__opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
}

.fmm-addprod__opt.is-on { border-color: var(--fmm-yellow); background: #FFFBEB; }

.fmm-addprod__ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
}

.fmm-addprod__txt { flex: 1; min-width: 0; }
.fmm-addprod__txt b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }

.fmm-addprod__txt em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fmm-muted);
}

/* The radio sits at the far right, vertically centred against the title. */
.fmm-addprod__opt input { flex-shrink: 0; margin-top: 9px; accent-color: #F5A524; }

.fmm-addprod__cancel {
    display: block;
    width: 100%;
    margin-top: 12px;
    border: 0;
    background: none;
    padding: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--fmm-muted);
    cursor: pointer;
}

.fmm-addprod__cancel:hover { color: var(--fmm-text); }

/* Match the compact Add New Product chooser shown in the seller listings flow. */
.fmm-addprod-modal {
    z-index: 80;
    padding: 16px;
    background: rgba(16, 23, 40, .38);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.fmm-addprod-modal .fmm-modal__box {
    box-sizing: border-box;
    max-width: 500px;
    padding: 20px;
    border-radius: 18px;
}
.fmm-addprod { max-width: none; }
.fmm-addprod__x {
    top: 21px;
    right: 20px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: #F3F4F6;
    color: #6B7280;
    font-size: 18px;
}
.fmm-addprod h2 { margin: 0 32px 4px 0; font-size: 16px; line-height: 22px; font-weight: 700; }
.fmm-addprod__sub { margin: 0 0 20px; font-size: 11px; line-height: 15px; }
.fmm-addprod__opt {
    box-sizing: border-box;
    align-items: center;
    min-height: 80px;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.fmm-addprod__ico { width: 30px; height: 30px; border-radius: 8px; }
.fmm-addprod__ico--social { color: #F5A900; background: #FFF8E6; }
.fmm-addprod__ico--manual { box-sizing: border-box; border: 1px solid #E5E7EB; color: #555; background: #F3F4F6; }
.fmm-addprod__txt b { margin-bottom: 2px; font-size: 12px; line-height: 15px; font-weight: 700; }
.fmm-addprod__txt em { font-size: 10px; line-height: 1.5; }
.fmm-addprod__opt input {
    appearance: none;
    display: grid;
    flex: 0 0 16px;
    place-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid #D1D5DB;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.fmm-addprod__opt input::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fmm-yellow);
    content: "";
    transform: scale(0);
}
.fmm-addprod__opt input:checked { border-color: var(--fmm-yellow); }
.fmm-addprod__opt input:checked::before { transform: scale(1); }
.fmm-addprod__opt input:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
.fmm-addprod__continue {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    min-height: 38px;
    margin-top: 26px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.fmm-addprod__cancel { margin-top: 10px; padding: 4px 6px; font-size: 11px; line-height: 15px; }
@media (max-width: 480px) {
    .fmm-addprod-modal { padding: 14px; }
    .fmm-addprod-modal .fmm-modal__box { max-height: calc(100dvh - 28px); overflow-y: auto; padding: 18px; }
}

/* --- AI verification capture (inline on a Needs Photos card) -------------- */

/* The order and its capture panel are two cards in one grid cell, spaced like
   the list around them. */
.fmm-vcard-group { display: grid; gap: 16px; }

.fmm-vcap__gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
}

.fmm-vcap__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fmm-faint);
}

.fmm-vcap__head b { font-size: 13px; font-weight: 700; color: var(--fmm-text); }

.fmm-vcap__which { font-size: 12px; color: var(--fmm-muted); margin: 0 0 10px; }

/* Dashed, because it is a drop target as much as a prompt — the same visual
   grammar the listing-media uploader uses. */
.fmm-vcap__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1.5px dashed var(--fmm-border);
    border-radius: 10px;
    padding: 22px 16px;
    margin-bottom: 10px;
    text-align: center;
    color: var(--fmm-faint);
    background: var(--fmm-bg-alt);
}

.fmm-vcap__drop b { font-size: 13px; font-weight: 700; color: var(--fmm-text); }
.fmm-vcap__drop em { font-style: normal; font-size: 12px; color: var(--fmm-muted); }

.fmm-vcap__shots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.fmm-vcap__shot {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--fmm-bg-alt);
}

.fmm-vcap__shot img { width: 100%; height: 100%; object-fit: cover; }

.fmm-vcap__shot button {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
}

.fmm-vcap__shot button:hover { background: rgba(0, 0, 0, .8); }

.fmm-vcap__btns { display: flex; gap: 8px; }

/* The two buttons are <label>s wrapping hidden file inputs, so they need the
   pointer and the centring a <button> would have given them for free. */
.fmm-vcap__btns .fmm-btn { flex: 1; justify-content: center; cursor: pointer; }

@media (max-width: 620px) {
    .fmm-vcap__btns { flex-direction: column; }
}

@media (max-width: 620px) {
    .fmm-vsearchbar { flex-wrap: wrap; }
}

.fmm-vpanel {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 18px 20px;
    background: #fff;
}

.fmm-vpanel h2 { font-size: 15px; font-weight: 800; margin: 0 0 14px; }

.fmm-vsumrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--fmm-muted);
}

.fmm-vsumrow span { display: inline-flex; align-items: center; gap: 9px; }
.fmm-vsumrow b { font-weight: 700; color: var(--fmm-text); }

@media (max-width: 1000px) {
    .fmm-vsplit { grid-template-columns: minmax(0, 1fr); }
}

/* --- vendor listings ----------------------------------------------------- */

.fmm-vhead__acts { display: flex; gap: 10px; flex-wrap: wrap; }

.fmm-vchips__n {
    display: inline-block;
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    color: #B91C1C;
    background: #FEE2E2;
}

/* The search control is the WRAPPER, not the input — see .fmm-vfind above,
   which draws the border and lays the magnifier out beside the field. A second
   set of border/padding rules used to live here and gave every seller search
   box two visible outlines, one inside the other. The input stays flat. */
.fmm-vfind svg { flex-shrink: 0; color: var(--fmm-faint); pointer-events: none; }

/* Keeps the border, radius and type of the .fmm-vselect buttons it sits beside
   in the seller toolbar; only makes room for the chevron. */
select.fmm-vselect { padding-right: 34px; }

.fmm-vgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.fmm-vlist {
    display: flex;
    gap: 14px;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 16px;
    background: #fff;
}

.fmm-vlist.is-busy { opacity: .55; pointer-events: none; }

/* Out of stock reads as inactive, not broken. */
.fmm-vlist.is-dim { background: var(--fmm-bg-alt); }

.fmm-vlist__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    background: var(--fmm-bg-alt);
    border: 1px solid var(--fmm-border);
}

.fmm-vlist__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-vlist__body { flex: 1; min-width: 0; }

.fmm-vlist__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.fmm-vlist__top h2 { font-size: 15px; font-weight: 700; margin: 0; }

.fmm-vlist__sku { font-size: 12.5px; color: var(--fmm-muted); margin: 0 0 6px; }
.fmm-vlist__sku b { color: var(--fmm-yellow-dark); font-weight: 600; }

.fmm-vlist__price { display: block; font-size: 17px; font-weight: 800; margin-bottom: 12px; }

.fmm-vlist__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.fmm-vfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--fmm-border);
    font-size: 13px;
    color: var(--fmm-muted);
}

.fmm-vfoot .fmm-pager { margin: 0; }

@media (max-width: 900px) {
    .fmm-vgrid { grid-template-columns: minmax(0, 1fr); }
}

/* --- seller area: one button family -------------------------------------
   The Listings frame settles the shape of every control in the vendor pages:
   a 6px corner, 14px medium type, a #D1D5DB hairline on the quiet buttons and
   a filled yellow one for the single primary action. Applied at .fmm-vpage so
   Orders, Offers and Payout share it — the seller crosses between these
   screens constantly, and three button languages read as three products.
   Buyer-facing pages keep the larger .fmm-btn shape and are untouched. */

.fmm-vpage .fmm-btn {
    gap: 8px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.fmm-vpage .fmm-btn--sm { padding: 9px 17px; }
.fmm-vpage .fmm-btn--ghost { color: #374151; border-color: #D1D5DB; }
.fmm-vpage .fmm-btn--ghost svg { color: var(--fmm-faint); }
.fmm-vpage .fmm-btn--primary { color: #1A1A1A; font-weight: 600; }
.fmm-vpage .fmm-btn--sm.fmm-btn--primary { padding: 8px 16px; }

.fmm-vpage .fmm-vhead { margin-bottom: 24px; }

.fmm-vpage .fmm-vhead h1 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.fmm-vpage .fmm-vhead p { font-size: 14px; line-height: 20px; color: var(--fmm-text); }
.fmm-vpage .fmm-vhead__acts { gap: 12px; }
.fmm-vpage .fmm-vhead__acts .fmm-btn { box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.fmm-vpage .fmm-vhead__acts .fmm-btn--primary { font-weight: 700; color: #000; }

/* --- offer management (Figma 5: offers) ---------------------------------
   `.fmm-vstat` is also used by the verification flow later in this sheet.
   Keeping the Offer Management rules scoped prevents that unrelated component
   from turning these four overview cards into horizontal status notices. */
.fmm-vpage--offers { padding-top: 14px; }

.fmm-vpage--offers .fmm-vhead { margin-bottom: 24px; }
.fmm-vpage--offers .fmm-vhead h1 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 3px;
}
.fmm-vpage--offers .fmm-vhead p { font-size: 12px; line-height: 18px; }
.fmm-vpage--offers .fmm-vhead > .fmm-btn { padding: 8px 16px; font-size: 12px; line-height: 18px; }
.fmm-vpage--offers .fmm-vhead > .fmm-btn--ghost { color: #374151; }
.fmm-vpage--offers .fmm-voffers__export-icon { width: 12px; height: 12px; color: #374151; }

.fmm-vpage--offers .fmm-vstats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.fmm-vpage--offers .fmm-vstat {
    display: block;
    min-height: 145px;
    margin: 0;
    padding: 20px;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
}

.fmm-vpage--offers .fmm-vstat__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 13px;
}

.fmm-vpage--offers .fmm-vstat__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    color: var(--fmm-dark);
    background: var(--fmm-yellow-soft);
}
.fmm-vpage--offers .fmm-vstat__ico img { display: block; max-width: 18px; max-height: 18px; }
.fmm-vpage--offers .fmm-vstat__pill { margin-top: 11px; padding: 3px 8px; font-size: 10px; line-height: 14px; }

.fmm-vpage--offers .fmm-vstat > b {
    display: block;
    margin: 0 0 2px;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: 0;
    color: #111827;
}
.fmm-vpage--offers .fmm-vstat > span { display: block; font-size: 12px; line-height: 18px; color: #6B7280; }

.fmm-vpage--offers .fmm-vstat--accent { border-color: transparent; background: var(--fmm-yellow); }
.fmm-vpage--offers .fmm-vstat--accent .fmm-vstat__ico { background: rgba(255, 255, 255, .25); }
.fmm-vpage--offers .fmm-vstat--accent > span { color: rgba(35, 31, 32, .82); }

.fmm-vpage--offers .fmm-vtoolbar { margin-bottom: 24px; }
.fmm-vpage--offers .fmm-vpills {
    gap: 0;
    padding: 4px;
    border-radius: 10px;
    background: #fff;
    border-color: #F3F4F6;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.fmm-vpage--offers .fmm-vpills button {
    min-height: 34px;
    padding: 7px 17px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}
.fmm-vpage--offers .fmm-vpills button.is-on { font-weight: 600; }
.fmm-vpage--offers .fmm-vpills button.is-on .fmm-vpills__n {
    color: #111827;
    background: rgba(255, 255, 255, .28);
}
.fmm-vpage--offers .fmm-vpills__n {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 14px;
}

.fmm-vpage--offers .fmm-vtoolbar__acts { gap: 10px; }
.fmm-vpage--offers .fmm-vselect {
    min-height: 36px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}
.fmm-vpage--offers .fmm-vselect img { width: 12px; height: 12px; }
.fmm-vpage--offers select.fmm-vselect {
    padding-right: 36px;
    background-image: url("../../images/marketplace/icons/offers/category-chevron.svg");
    background-position: right 16px center;
}

.fmm-vpage--offers .fmm-vmore .fmm-btn--ghost {
    width: 209.17px;
    height: 52.5px;
    justify-content: center;
    padding: 0 20px;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    color: #4B5563;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.fmm-vpage--offers .fmm-vmore .fmm-btn--ghost svg { color: #4B5563; }

/* Reviewed offers use the roomier outcome-card layout from the Figma frame.
   This stays scoped to Offers so the shared card classes keep working in the
   other seller tools. */
.fmm-vpage--offers .fmm-vrgrid { gap: 16px; }
.fmm-vpage--offers .fmm-vrcard {
    min-height: 256px;
    padding: 20px 20px 0;
    border-color: #E5E7EB;
    border-radius: 12px;
    box-shadow: none;
}
.fmm-vpage--offers .fmm-vrcard.is-done {
    padding-left: 24px;
    border-color: #A7F3D0;
    border-left: 5px solid #10B981;
    background: #FFFFFF;
}
.fmm-vpage--offers .fmm-vrcard__top { margin-bottom: 16px; }
.fmm-vpage--offers .fmm-vrbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    font-family: var(--fmm-font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.fmm-vpage--offers .fmm-vrbadge.is-counter { color: #1D70E8; background: #DBEAFE; }
.fmm-vpage--offers .fmm-vrbadge.is-waiting { color: #F59E0B; background: #FEF3C7; }
.fmm-vpage--offers .fmm-vrbadge.is-accepted { color: #10B981; background: #D1FAE5; }
.fmm-vpage--offers .fmm-vrcard__ago {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #111827;
    font-size: 12px;
    line-height: 16px;
}
.fmm-vpage--offers .fmm-vrcard__ago svg { flex: 0 0 auto; }

.fmm-vpage--offers .fmm-vrcard__body { gap: 16px; }
.fmm-vpage--offers .fmm-vrcard__thumb { width: 96px; height: 96px; border-radius: 8px; }
.fmm-vpage--offers .fmm-vrcard__info h2 {
    margin-bottom: 2px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0;
    color: #000000;
}
.fmm-vpage--offers .fmm-vrcard__buyer {
    font-family: var(--fmm-font-ui);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    color: #000000;
}
.fmm-vpage--offers .fmm-vrcard__buyer b { font-weight: 400; color: #000000; }
.fmm-vpage--offers .fmm-vrcard__was {
    margin-top: 4px;
    font-family: var(--fmm-font-ui);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    color: #9CA3AF;
}
.fmm-vpage--offers .fmm-vrcard__was s { color: #9CA3AF; }
.fmm-vpage--offers .fmm-vrcard__price { gap: 12px; margin-top: 3px; }
.fmm-vpage--offers .fmm-vrcard__price b { font-size: 21px; line-height: 28px; }
.fmm-vpage--offers .fmm-vrcard.is-done .fmm-vrcard__price b {
    color: #10B981;
    font-family: var(--fmm-font-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
}
.fmm-vpage--offers .fmm-vrcard .fmm-voffer__ship {
    margin: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 5px;
    color: #4B5563;
    background: #F3F4F6;
    font-size: 12px;
    line-height: 16px;
}
.fmm-vpage--offers .fmm-vrcard .fmm-voffer__ship.is-free { color: #F59E0B; background: #FEF3C7; }

.fmm-vpage--offers .fmm-vrcard__acts {
    gap: 12px;
    margin: 18px 0 0;
    padding: 19px 0 20px;
    border-top: 1px solid #F3F4F6;
}
.fmm-vpage--offers .fmm-vrcard.is-done .fmm-vrcard__acts {
    margin-left: 0;
    border-top-color: #F3F4F6;
}
.fmm-vpage--offers .fmm-vrcard__acts .fmm-btn { min-height: 40px; padding: 9px 16px; }
.fmm-vpage--offers .fmm-vrcard__go {
    font-family: var(--fmm-font-ui);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    color: #1A1A1A;
}

/* Figma uses a mint card outline with a separate inset success rail. The rail
   cannot be an outer border: that makes the green touch the card edge and
   loses the thin mint strip visible around it. */
.fmm-vpage--offers .fmm-vrcard.is-done {
    position: relative;
    overflow: hidden;
    padding-left: 28px;
    border: 2px solid rgba(16, 185, 129, .20);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
}
.fmm-vpage--offers .fmm-vrcard.is-done::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 0;
    width: 3px;
    background: #10B981;
}
.fmm-vpage--offers .fmm-vrcard.is-done .fmm-vrcard__acts { margin-left: 0; }

/* Terminal Declined outcomes have their own two-column cards. They deliberately
   do not reuse the live-offer price-comparison row: there is no decision left
   to make, so the reason and return links are the useful information. */
.fmm-vpage--offers .fmm-vdoffers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
}
.fmm-vpage--offers .fmm-vdoffer {
    min-width: 0;
    padding: 24px;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
}
.fmm-vpage--offers .fmm-vdoffer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.fmm-vpage--offers .fmm-vdobadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .3px;
}
.fmm-vpage--offers .fmm-vdobadge.is-denied { color: #EF4444; background: #FEF2F2; }
.fmm-vpage--offers .fmm-vdobadge.is-expired,
.fmm-vpage--offers .fmm-vdobadge.is-cancelled,
.fmm-vpage--offers .fmm-vdobadge.is-buyer { color: #6B7280; background: #F3F4F6; }
.fmm-vpage--offers .fmm-vdoffer__date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6B7280;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
}
.fmm-vpage--offers .fmm-vdoffer__date img { width: 13px; height: 14px; flex: 0 0 auto; }
.fmm-vpage--offers .fmm-vdoffer__body { display: flex; gap: 20px; }
.fmm-vpage--offers .fmm-vdoffer__thumb {
    display: block;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 8px;
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
}
.fmm-vpage--offers .fmm-vdoffer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fmm-vpage--offers .fmm-vdoffer__info { min-width: 0; }
.fmm-vpage--offers .fmm-vdoffer__info h2 {
    margin: 0 0 3px;
    color: #374151;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}
.fmm-vpage--offers .fmm-vdoffer__info > p { margin: 0; color: #6B7280; font-size: 14px; line-height: 20px; }
.fmm-vpage--offers .fmm-vdoffer__info > p a { color: #2563EB; }
.fmm-vpage--offers .fmm-vdoffer__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.fmm-vpage--offers .fmm-vdoffer__price b { color: #374151; font-size: 24px; line-height: 28px; font-weight: 700; }
.fmm-vpage--offers .fmm-vdoffer__price span { color: #9CA3AF; font-size: 14px; line-height: 20px; }
.fmm-vpage--offers .fmm-vdoffer__note {
    margin: 16px 0 0;
    padding: 16px 18px;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    color: #4B5563;
    background: #FFFCF3;
    font-size: 14px;
    line-height: 20px;
}
.fmm-vpage--offers .fmm-vdoffer__note.is-expired { border-color: #E5E7EB; background: #F9FAFB; color: #6B7280; }
.fmm-vpage--offers .fmm-vdoffer__acts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.fmm-vpage--offers .fmm-vdoffer__acts .fmm-btn {
    min-height: 42px;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    background: #FFFFFF;
}

@media (max-width: 1100px) {
    .fmm-vpage--offers .fmm-vstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmm-vpage--offers .fmm-vdoffers { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .fmm-vpage--offers .fmm-vstats { grid-template-columns: 1fr; }
}

/* The chip tray's Filters control is a chip, not a select, so it takes the
   pill shape from the tray rather than the 6px one from .fmm-vselect. */
.fmm-vchips .fmm-vselect { border-radius: 999px; }
.fmm-vchips .fmm-vselect svg { color: #4B5563; }
.fmm-vchips__n { font-size: 12px; line-height: 16px; font-weight: 500; padding: 1.5px 6px; }

.fmm-vtoolbar__acts { gap: 12px; align-items: center; }

/* --- vendor listings: the Listings frame ---------------------------------
   What is left below is genuinely particular to this page — the listing card,
   its thumbnail and status pill, and the numbered pager. */

/* The filters sit on a card of their own in the frame, not loose on the page. */
.fmm-vlistings .fmm-vtoolbar {
    margin-bottom: 24px;
    padding: 17px;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

/* Sized rather than fluid: the toolbar puts it beside the sort control. */
.fmm-vlistings .fmm-vfind { flex: 0 0 auto; width: 256px; }

.fmm-vlistings .fmm-vgrid { gap: 24px; }

.fmm-vlistings .fmm-vlist {
    gap: 20px;
    padding: 21px;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
    border-color: #F3F4F6;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
}

.fmm-vlistings .fmm-vlist__thumb {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border-color: #F3F4F6;
}

/* Contained, not cropped — the frame gives the product room inside its tile. */
.fmm-vlistings .fmm-vlist__thumb img { width: 64px; height: 64px; object-fit: contain; }

/* Out of stock reads as inactive: paler tile, desaturated photo. */
.fmm-vlistings .fmm-vlist.is-dim { opacity: .8; }
.fmm-vlistings .fmm-vlist.is-dim .fmm-vlist__thumb { background: #fff; border-color: var(--fmm-border); }
.fmm-vlistings .fmm-vlist.is-dim .fmm-vlist__thumb img { width: 48px; height: 48px; opacity: .6; filter: saturate(0); }
.fmm-vlistings .fmm-vlist.is-dim .fmm-vlist__sku { color: var(--fmm-faint); }
.fmm-vlistings .fmm-vlist.is-dim .fmm-vlist__sku b { color: var(--fmm-muted); }

.fmm-vlistings .fmm-vlist__top { gap: 12px; margin-bottom: 4px; }
.fmm-vlistings .fmm-vlist__top h2 { font-size: 16px; line-height: 24px; font-weight: 600; color: #111827; }

.fmm-vlistings .fmm-vlist__sku { font-size: 14px; line-height: 20px; margin: 0; }
.fmm-vlistings .fmm-vlist__sku b { font-weight: 500; color: #E6A600; }

.fmm-vlistings .fmm-vlist__price {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: #111827;
    margin: 4px 0 16px;
}

/* Sentence case with a matching hairline, rather than the uppercase micro-pill
   the other seller screens use. */
.fmm-vlistings .fmm-vlist .fmm-vstatus {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 11px;
    border: 1px solid var(--fmm-border);
}

.fmm-vlistings .fmm-vlist .fmm-vstatus.is-blue { color: #1D4ED8; background: #EFF6FF; border-color: #DBEAFE; }
.fmm-vlistings .fmm-vlist .fmm-vstatus.is-amber { color: #C2410C; background: #FFF7ED; border-color: #FFEDD5; }
.fmm-vlistings .fmm-vlist .fmm-vstatus.is-red { color: #B91C1C; background: #FEF2F2; border-color: #FEE2E2; }
.fmm-vlistings .fmm-vlist .fmm-vstatus.is-green { color: #15803D; background: #F0FDF4; border-color: #DCFCE7; }

/* Shape and colour come from the seller button family above; the card only
   tightens the padding, since three of these sit on one row. */
.fmm-vlistings .fmm-vlist__acts .fmm-btn--ghost { padding: 7px 17px; box-shadow: none; }
.fmm-vlistings .fmm-vlist__acts .fmm-btn--primary { padding: 6px 16px; }

.fmm-vlistings .fmm-vfoot { margin-top: 24px; padding-top: 25px; font-size: 14px; }

.fmm-vlistings .fmm-pager { gap: 8px; }

.fmm-vlistings .fmm-pager__i {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #4B5563;
}

.fmm-vlistings .fmm-pager__i--on {
    color: #1A1A1A;
    background: #FFF8E5;
    border-color: var(--fmm-yellow);
}

@media (max-width: 900px) {
    .fmm-vlistings .fmm-vfind { flex: 1 1 auto; width: 100%; }
}

/* --- listing creation ---------------------------------------------------- */

.fmm-vseg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    background: #fff;
}

/* Full-width variant, for a segment sitting in a narrow rail rather than beside
   a page title — the two halves share the width instead of hugging their text. */
.fmm-vseg--block { display: flex; width: 100%; }
.fmm-vseg--block button { flex: 1; justify-content: center; }

.fmm-vseg button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    cursor: pointer;
    border-radius: 7px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-muted);
    background: transparent;
}

.fmm-vseg button.is-on { color: var(--fmm-dark); background: var(--fmm-yellow); }

.fmm-vbanner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid #FDE68A;
    border-radius: var(--fmm-radius-lg);
    background: var(--fmm-yellow-soft);
    padding: 18px 20px;
    margin-bottom: 22px;
}

.fmm-vbanner__ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
}

.fmm-vbanner b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.fmm-vbanner p { font-size: 13.5px; line-height: 1.65; color: #78350F; margin: 0 0 10px; }

.fmm-vbanner__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    color: #15803D;
    background: #fff;
}

.fmm-vpanel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.fmm-vpanel__head h2 { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.fmm-vpanel__head p { font-size: 13px; color: var(--fmm-muted); margin: 0; }

.fmm-vcount { font-size: 12.5px; color: var(--fmm-faint); white-space: nowrap; }

.fmm-vopt {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
    margin-left: 6px;
}

.fmm-vdrops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.fmm-vdrop {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 96px;
    padding: 18px;
    border: 1.5px dashed var(--fmm-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-vdrop:hover { border-color: var(--fmm-faint); }

.fmm-vdrop--accent {
    border-color: var(--fmm-yellow);
    color: var(--fmm-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-vdrop--wide { grid-auto-flow: column; min-height: 64px; }

.fmm-vslots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.fmm-vslot {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--fmm-faint);
    background: var(--fmm-bg-alt);
    border: 1px solid var(--fmm-border);
}

.fmm-vslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fmm-vslot span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 0;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    background: rgba(35, 31, 32, .58);
}

.fmm-vslot button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: rgba(35, 31, 32, .65);
}

.fmm-vticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.fmm-vticks li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--fmm-text);
}

.fmm-vticks svg { color: var(--fmm-yellow-dark); flex-shrink: 0; }

.fmm-vpanel--tint { border-color: #FDE68A; background: var(--fmm-yellow-soft); }

.fmm-vpanel--tint h3 {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #92400E;
    margin: 0 0 12px;
}

.fmm-vtips { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.fmm-vtips li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #78350F;
}

.fmm-vtips li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fmm-yellow-dark);
}

.fmm-vflow { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }

.fmm-vflow li {
    flex: 1;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.fmm-vflow b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
    border: 1px solid var(--fmm-border);
}

.fmm-vflow li.is-on b {
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
    border-color: var(--fmm-yellow);
}

.fmm-vflow span { font-size: 11.5px; color: var(--fmm-muted); }

.fmm-vlink {
    display: block;
    width: 100%;
    margin-top: 10px;
    /* Full width but only 18px tall without this — a 24px-tall strip is the
       WCAG 2.5.8 floor and costs nothing here. */
    padding: 6px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--fmm-yellow-dark);
    text-align: center;
}

@media (max-width: 700px) {
    .fmm-vdrops { grid-template-columns: 1fr; }
    .fmm-vslots { grid-template-columns: repeat(2, 1fr); }
}

/* --- transfer to bank ---------------------------------------------------- */

.fmm-vbal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-radius: var(--fmm-radius-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
    color: #fff;
    background: var(--fmm-dark);
}

.fmm-vbal > div > span { display: block; font-size: 13px; color: #D1D5DB; margin-bottom: 6px; }

.fmm-vbal b {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.fmm-vbal b i { font-size: 20px; font-style: normal; color: var(--fmm-yellow); }

.fmm-vbal__ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--fmm-yellow);
    background: rgba(255, 255, 255, .1);
}

.fmm-vpage--payout-transfer .fmm-vbal__ico {
    border-radius: 50%;
    color: #FFC83D;
    background: #1F1F1F;
}

.fmm-vamount {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 22px 24px 24px;
    margin-bottom: 18px;
    text-align: center;
    background: #fff;
}

.fmm-vamount label { display: block; font-size: 13px; color: var(--fmm-muted); margin-bottom: 14px; }

.fmm-vamount__field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}

.fmm-vamount__field i { font-size: 24px; font-style: normal; font-weight: 700; color: var(--fmm-faint); }

.fmm-vpage--payout-transfer .fmm-vamount__field i {
    font-family: "Inter", sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: 0;
    color: #9CA3AF;
}

.fmm-vamount__field input {
    width: 4ch;
    min-width: 0;
    max-width: calc(100% - 40px);
    border: 0;
    background: none;
    font: inherit;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: left;
    color: var(--fmm-text);
}

.fmm-vamount__field input:focus { outline: none; }

.fmm-vamount__quick { display: flex; gap: 8px; justify-content: center; }

.fmm-vamount__quick button {
    border: 1px solid transparent;
    background: #F2F3F5;
    border-radius: 999px;
    padding: 8px 20px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: #344054;
}

.fmm-vamount__quick button.is-on {
    color: var(--fmm-dark);
    border-color: var(--fmm-yellow);
    background: var(--fmm-yellow);
}

.fmm-vbank {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 13px 14px;
    background: var(--fmm-bg-alt);
}

.fmm-vpage--payout-transfer .fmm-vbank {
    justify-content: space-between;
    padding: 16px;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    background: #F9FAFB;
}

.fmm-vbank__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--fmm-muted);
    background: #fff;
}

.fmm-vpage--payout-transfer .fmm-vbank__ico {
    width: 42px;
    height: 42px;
    color: #4B5563;
    box-shadow: 0 2px 5px rgba(16, 24, 40, .06);
}

.fmm-vpage--payout-transfer .fmm-vlink,
.fmm-vpage--payout-transfer .fmm-vlink:hover {
    color: #FFC83D;
    font-weight: 500;
}

.fmm-vbank b { display: block; font-size: 14px; font-weight: 700; }
.fmm-vbank em { display: block; font-size: 12.5px; font-style: normal; color: var(--fmm-muted); }

.fmm-vbank__tick {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    color: #fff;
    background: #22C55E;
}

.fmm-vpage--payout-transfer .fmm-vbank__tick {
    background: #00A859;
}

.fmm-vpage--payout-transfer .fmm-vsecure svg {
    width: 11px;
    height: 12px;
    color: #9CA3AF;
}

.fmm-vrev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--fmm-muted);
}

.fmm-vrev b { font-weight: 700; color: var(--fmm-text); }
.fmm-vrev b.is-minus { color: #DC2626; }

.fmm-vrev--total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--fmm-border);
    font-size: 15px;
    font-weight: 700;
    color: var(--fmm-text);
}

.fmm-vrev--total b { font-size: 17px; font-weight: 800; color: #15803D; }

.fmm-vpage--payout-transfer .fmm-vrev--total b { color: #00A859; }

.fmm-vpage--payout-transfer .fmm-payout-transfer__continue { border-radius: 12px; }

.fmm-vnote {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--fmm-yellow-soft);
}

.fmm-vnote svg { color: var(--fmm-yellow-dark); flex-shrink: 0; margin-top: 1px; }
.fmm-vnote .fmm-psnotice__shield { width: 24px; height: 24px; color: var(--fmm-yellow); }
.fmm-vnote b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.fmm-vnote em { font-size: 12.5px; font-style: normal; line-height: 1.55; color: #78350F; }

.fmm-vpage--payout-transfer .fmm-vnote {
    width: min(350px, 100%);
    min-height: 106.5px;
    box-sizing: border-box;
    gap: 12px;
    padding: 24.5px 16px 16px;
    border: 1px solid #FEF9C3;
    border-radius: 12px;
    background: #FEF9F0;
}

.fmm-vpage--payout-transfer .fmm-vnote svg {
    color: #FFC83D;
    margin-top: 0;
}

.fmm-vpage--payout-transfer .fmm-vnote em { color: #4B5563; }

.fmm-vspeed {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    padding: 4px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    background: var(--fmm-bg-alt);
}

.fmm-vspeed button {
    flex: 1;
    border: 0;
    cursor: pointer;
    border-radius: 7px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--fmm-muted);
    background: transparent;
}

.fmm-vspeed button.is-on { color: var(--fmm-dark); background: #fff; box-shadow: var(--fmm-shadow); }

.fmm-vsecure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 11.5px;
    color: var(--fmm-faint);
}

.fmm-vpage--payout-status .fmm-ksplit {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 24px;
}

.fmm-vpage--available-payout .fmm-vsplit {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 24px;
}

.fmm-vpage--payout-account .fmm-vsplit {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 24px;
}

.fmm-pssummary .fmm-btn--block {
    min-height: 46px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}
.fmm-pssummary .fmm-btn--primary { margin-top: 20px !important; }
.fmm-pssummary .fmm-btn--ghost { margin-top: 14px !important; }
.fmm-pssummary .fmm-vsecure { gap: 8px; margin-top: 24px; font-size: 14px; font-weight: 400; }
.fmm-pssummary .fmm-pssecure__icon { width: 16px; height: 16px; color: #9CA3AF; }

@media (max-width: 620px) {
    .fmm-vamount__field input { font-size: 34px; }
}

@media (max-width: 1000px) {
    .fmm-vpage--payout-status .fmm-ksplit { grid-template-columns: minmax(0, 1fr); }
    .fmm-vpage--available-payout .fmm-vsplit { grid-template-columns: minmax(0, 1fr); }
    .fmm-vpage--payout-account .fmm-vsplit { grid-template-columns: minmax(0, 1fr); }
}

/* Confirm transfer */
.fmm-vpage--payout-confirm { padding-top: 20px; }
.fmm-vpage--payout-confirm .fmm-back { margin-bottom: 10px; font-size: 12px; }
.fmm-vpage--payout-confirm .fmm-vhead { margin-bottom: 22px; }
.fmm-vpage--payout-confirm .fmm-vsplit {
    grid-template-columns: minmax(0, 2fr) minmax(275px, 1fr);
    gap: 24px;
}

.fmm-payout-confirm__amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 20px 24px;
    text-align: center;
}
.fmm-payout-confirm__amount-label {
    margin-bottom: 4px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
}
.fmm-payout-confirm__amount > b { color: #111827; font-size: 38px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }

.fmm-payout-confirm__details { margin-top: 18px; padding: 0; overflow: hidden; }
.fmm-payout-confirm__details .fmm-vpanel__head {
    align-items: center;
    min-height: 50px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 18px;
    border-bottom: 1px solid #E5E7EB;
    background: #F9FAFB;
}
.fmm-payout-confirm__details .fmm-vpanel__head h2 { margin: 0; }
.fmm-payout-confirm__details-body { padding: 0 18px; }
.fmm-payout-confirm__detail-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 69px;
    border-bottom: 1px solid #F3F4F6;
}
.fmm-payout-confirm__detail-row:last-child { border-bottom: 0; }
.fmm-payout-confirm__detail-row > span { color: #667085; font-size: 11px; }
.fmm-payout-confirm__detail-row b { color: #111827; font-size: 12px; font-weight: 700; }
.fmm-payout-confirm__bank-name { display: flex; align-items: center; gap: 6px; }
.fmm-payout-confirm__bank-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: #9CA3AF;
    -webkit-mask: var(--bank-icon-url) center / contain no-repeat;
    mask: var(--bank-icon-url) center / contain no-repeat;
}

.fmm-payout-confirm__final { padding: 18px; overflow: hidden; }
.fmm-payout-confirm__final h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.fmm-payout-confirm__final h2 svg { color: #F59E0B; }
.fmm-payout-confirm__final .fmm-vrev { padding: 6px 0; font-size: 11.5px; }
.fmm-payout-confirm__final .fmm-vrev b { font-size: 11.5px; white-space: nowrap; }
.fmm-payout-confirm__final .fmm-payout-confirm__fee { color: #00A859; }
.fmm-payout-confirm__final .fmm-payout-confirm__arrival {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #F3F4F6;
}
.fmm-payout-confirm__arrival b { display: flex; align-items: center; gap: 4px; }
.fmm-payout-confirm__arrival svg { color: #98A2B3; }
.fmm-vpage--payout-confirm .fmm-payout-confirm__submit { min-height: 46px; margin-top: 18px; border-radius: 10px; }
.fmm-vpage--payout-confirm .fmm-payout-confirm__back { min-height: 40px; margin-top: 10px; border-radius: 8px; box-shadow: none; }
.fmm-vpage--payout-confirm .fmm-payout-confirm__terms {
    display: block;
    margin: 18px -18px -18px;
    padding: 14px 18px;
    border-top: 1px solid #F3F4F6;
    background: #F9FAFB;
    text-align: center;
    line-height: 1.45;
}
.fmm-payout-confirm__terms a { color: #F59E0B; }

@media (max-width: 760px) {
    .fmm-vpage--payout-confirm .fmm-vsplit { grid-template-columns: minmax(0, 1fr); }
}

/* Processing transfer */
.fmm-vpage--payout-result { padding-top: 20px; }
.fmm-vpage--payout-result .fmm-back { margin-bottom: 22px; font-size: 12px; }
.fmm-vpage--payout-result .fmm-payout-processing {
    grid-template-columns: minmax(0, 2fr) minmax(275px, 1fr);
    gap: 26px;
}
.fmm-payout-processing__main {
    min-height: 640px;
    box-sizing: border-box;
    padding: 34px 24px 40px;
    text-align: center;
    background: radial-gradient(circle at 50% 18%, #FFFCF4, #fff 38%);
}
.fmm-payout-processing__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 106px;
    height: 106px;
    margin: 0 auto 26px;
    border: 1px solid #FDE7A7;
    border-radius: 50%;
}
.fmm-payout-processing__badge::before,
.fmm-payout-processing__badge::after {
    content: "";
    position: absolute;
    border: 1px solid #FDE7A7;
    border-radius: 50%;
}
.fmm-payout-processing__badge::before { inset: 7px; }
.fmm-payout-processing__badge::after { inset: 14px; }
.fmm-payout-processing__badge-core {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 2px solid #FFB800;
    border-radius: 50%;
    background: #fff;
    color: #FFB800;
}
.fmm-payout-processing__title { margin: 0 0 12px; color: #FFB300; font-size: 22px; font-weight: 700; line-height: 1.2; }
.fmm-payout-processing__lead { max-width: 365px; margin: 0 auto; color: #111827; font-size: 13px; line-height: 20px; }
.fmm-payout-processing__amount {
    width: min(100%, 372px);
    box-sizing: border-box;
    margin: 32px auto 0;
    padding: 24px 28px 22px;
    border: 1px solid #FDECC8;
    border-radius: 10px;
    background: #FFF8E7;
    text-align: center;
}
.fmm-payout-processing__amount-label { display: block; color: #6B7280; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.fmm-payout-processing__amount-value { display: block; margin: 5px 0 16px; color: #000; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.fmm-payout-processing__bank { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid #FDE8B5; text-align: left; }
.fmm-payout-processing__bank-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #E5E7EB; border-radius: 50%; background: #fff; }
.fmm-payout-processing__bank em { display: block; margin-bottom: 3px; color: #6B7280; font-size: 11px; font-style: normal; }
.fmm-payout-processing__bank b { color: #111827; font-size: 13px; font-weight: 600; }
.fmm-vpage--payout-result .fmm-payout-processing__done { display: flex; width: min(100%, 372px); min-height: 50px; margin: 32px auto 0; border-radius: 9px; }
.fmm-payout-processing__history { display: block; width: max-content; margin: 26px auto 0; color: #6B7280; font-size: 13px; text-decoration: none; }
.fmm-payout-processing__history:hover { text-decoration: underline; }

.fmm-payout-processing__status { padding: 20px; }
.fmm-payout-processing__status h2 { margin: 0 0 22px; font-size: 15px; }
.fmm-payout-processing__status .fmm-pstrack li { padding-bottom: 30px; }
.fmm-payout-processing__status .fmm-pstrack li:last-child { padding-bottom: 0; }
.fmm-payout-processing__status .fmm-pstrack b { font-size: 12px; }
.fmm-payout-processing__status .fmm-pstrack em { font-size: 10.5px; }
.fmm-payout-processing__status .fmm-pstrack li.is-done:not(:last-child)::before { background: #E5E7EB; }
.fmm-payout-processing__status .fmm-pstrack li.is-done i {
    color: #fff;
    box-shadow: 0 0 0 4px #fff, 0 2px 5px rgba(0, 0, 0, .08);
}
.fmm-payout-processing__status .fmm-pstrack li.is-now i {
    border-color: #FFB800;
    background: #FFB800;
    box-shadow: 0 0 0 4px #fff, 0 2px 5px rgba(0, 0, 0, .08);
}
.fmm-payout-processing__status .fmm-pstrack li.is-now i::after { background: #fff; }
.fmm-payout-processing__status .fmm-pstrack li.is-now b { color: #FFB300; }
.fmm-payout-processing__status .fmm-pstrack li.is-now em { color: #6B7280; }
.fmm-payout-processing__status .fmm-pstrack li:not(.is-done):not(.is-now) i {
    border-color: #F3F4F6;
    background: #F3F4F6;
}
.fmm-payout-processing__status .fmm-pstrack li:not(.is-done):not(.is-now) b { color: #6B7280; }

.fmm-payout-processing__next {
    min-height: 260px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    border-radius: 12px;
    background: #1F1F1F;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    color: #E5E7EB;
}
.fmm-payout-processing__next h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #fff; font-size: 14px; }
.fmm-payout-processing__next h2 span { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #FFB800; color: #1F1F1F; font-size: 10px; font-weight: 800; }
.fmm-payout-processing__next ul { display: grid; gap: 13px; margin: 0 0 18px; padding: 0; list-style: none; }
.fmm-payout-processing__next li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 7px; color: #D1D5DB; font-size: 11.5px; line-height: 1.45; }
.fmm-payout-processing__next li::before { content: "➜"; color: #FFB800; }
.fmm-payout-processing__next a { display: flex; align-items: center; gap: 7px; padding-top: 18px; border-top: 1px solid #333; color: #FFB800; font-size: 11px; text-decoration: none; }
.fmm-payout-processing__next a:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .fmm-vpage--payout-result .fmm-payout-processing { grid-template-columns: minmax(0, 1fr); }
    .fmm-payout-processing__main { min-height: 0; }
}

/* Settled transfer */
.fmm-payout-result__settled { max-width: 850px; margin: 0 auto; padding-top: 14px; }
.fmm-payout-result__settled-header { padding: 0 0 37px; text-align: center; }
.fmm-payout-result__settled-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 47px;
    border: 1px solid #FFF3DC;
    border-radius: 50%;
}
.fmm-payout-result__settled-icon::before,
.fmm-payout-result__settled-icon::after {
    content: "";
    position: absolute;
    border: 1px solid #FFF3DC;
    border-radius: 50%;
}
.fmm-payout-result__settled-icon::before { inset: 7px; }
.fmm-payout-result__settled-icon::after { inset: 14px; }
.fmm-payout-result__settled-icon-core {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFB81C;
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 184, 28, .2);
}
.fmm-payout-result__settled-icon.is-bad .fmm-payout-result__settled-icon-core { background: #DC2626; box-shadow: 0 6px 16px rgba(220, 38, 38, .15); }
.fmm-payout-result__settled-header h1 { margin: 0 0 10px; color: #000; font-size: 26px; font-weight: 700; line-height: 1.2; }
.fmm-payout-result__settled-header p { margin: 0; color: #111827; font-size: 15px; }
.fmm-payout-result__settled-grid { grid-template-columns: minmax(0, 476px) minmax(0, 346px); gap: 28px; }

.fmm-payout-result__receipt {
    min-height: 280px;
    box-sizing: border-box;
    padding: 28px;
    border: 2px solid #FFF3DC;
    border-radius: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .06);
}
.fmm-payout-result__receipt-total { padding-bottom: 26px; margin-bottom: 10px; border-bottom: 1px dashed #E5E7EB; text-align: center; }
.fmm-payout-result__receipt-total > span { display: block; margin-bottom: 5px; color: #374151; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.fmm-payout-result__receipt-total > b { color: #000; font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.fmm-payout-result__currency { margin-right: 3px; font-size: 24px; font-weight: 400; letter-spacing: 0; }
.fmm-payout-result__receipt .fmm-vrev { padding: 11px 0; color: #667085; font-size: 13px; }
.fmm-payout-result__receipt .fmm-vrev b { color: #111827; font-size: 13px; font-weight: 600; }
.fmm-payout-result__bank-line { display: inline-flex; align-items: center; gap: 7px; }
.fmm-payout-result__bank-icon { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #F3F4F6; }
.fmm-payout-result__bank-glyph {
    display: block;
    width: 10px;
    height: 10px;
    background: #6B7280;
    -webkit-mask: var(--bank-icon-url) center / contain no-repeat;
    mask: var(--bank-icon-url) center / contain no-repeat;
}
.fmm-payout-result__reference { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #111827; font: inherit; font-weight: 600; cursor: pointer; }
.fmm-payout-result__reference svg { color: #9CA3AF; }

.fmm-payout-result__details { padding: 22px 20px; border-radius: 12px; }
.fmm-payout-result__details h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.fmm-payout-result__details .fmm-vrev { padding: 8px 0; font-size: 12px; }
.fmm-payout-result__details .fmm-vrev b { color: #111827; font-size: 12px; font-weight: 600; }
.fmm-payout-result__details .fmm-payout-result__status { display: inline-flex; align-items: center; gap: 6px; color: #00A859; font-weight: 500; }
.fmm-payout-result__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fmm-payout-result__details .fmm-payout-result__status.is-red { color: #DC2626; }
.fmm-payout-result__actions { margin-top: 20px; padding: 20px; border-radius: 12px; background: #F3F4F6; text-align: center; }
.fmm-vpage--payout-result .fmm-payout-result__actions .fmm-btn { min-height: 46px; border-radius: 8px; }
.fmm-payout-result__history { display: block; margin-top: 20px; color: #111827; font-size: 13px; text-decoration: none; }
.fmm-payout-result__history:hover { text-decoration: underline; }

@media (max-width: 800px) {
    .fmm-payout-result__settled-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- vendor settings shell ----------------------------------------------- */

.fmm-shead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }

.fmm-sback {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--fmm-border);
    color: var(--fmm-text);
    background: #fff;
}

.fmm-shead h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.fmm-shead p { margin: 0; color: var(--fmm-muted); font-size: 13.5px; }
.fmm-vpage:has(.fmm-snav-wrap) .fmm-shead p {
    margin: 0;
    color: #000;
    font-family: var(--fmm-font-ui);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    vertical-align: middle;
}

.fmm-ssplit {
    display: grid;
    grid-template-columns: 274px minmax(0, 1fr) 270px;
    gap: 32px;
    align-items: start;
}

/* Pages whose content owns its own right-hand panel. Without this the grid
   still reserved the 270px third track, squeezing the centre column and
   pushing the page into a horizontal scroll. */
.fmm-ssplit--wide { grid-template-columns: var(--fmm-seller-settings-nav-width) minmax(0, 1fr); }
.fmm-ssplit--profile-overview { grid-template-columns: 274px minmax(0, 1fr) 270px; gap:32px; }
.fmm-ssplit--profile-tab { grid-template-columns: 274px minmax(0, 1fr) 270px; gap:32px; }
.fmm-pi-context { display:none; }

.fmm-settings-rail { display:grid; gap:16px; position:sticky; top:16px; }
.fmm-settings-rail__card, .fmm-settings-rail__help { border:1px solid var(--fmm-border); border-radius:14px; padding:16px; background:#fff; }
.fmm-settings-rail__card h2, .fmm-settings-rail__help h2 { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:14px; font-weight:800; }
.fmm-settings-rail__completion { display:flex; justify-content:space-between; align-items:center; margin:-3px 0 8px; font-size:11px; color:#2D2D2D; }
.fmm-settings-rail__completion span { margin:0; color:#F5B400; }
.fmm-settings-rail__dot { width:9px; height:9px; border-radius:50%; background:#F5B400; }
.fmm-settings-rail__dot.is-green { background:#22A35A; }
.fmm-settings-rail__card p { margin:0; padding:9px 0; border-bottom:1px solid var(--fmm-border); font-size:11px; }
.fmm-settings-rail__card p:last-child { border-bottom:0; }
.fmm-settings-rail__card b, .fmm-settings-rail__card span { display:block; }
.fmm-settings-rail__card span { margin-top:2px; color:var(--fmm-muted); }
.fmm-settings-rail__progress { height:5px; margin:-5px 0 8px; border-radius:99px; background:#F3F4F6; overflow:hidden; }
.fmm-settings-rail__progress i { display:block; width:100%; height:100%; background:#F5B400; }
.fmm-settings-rail__secure { margin-top:12px; padding:12px; border-top:1px solid var(--fmm-border); font-size:11px; }
.fmm-settings-rail__secure span { line-height:1.45; }
.fmm-settings-rail__help { color:#fff; background:#302B29; border-color:#302B29; }
.fmm-settings-rail__help p { margin:0 0 14px; color:#D7D1CC; font-size:11px; line-height:1.55; }
.fmm-settings-rail__help .fmm-btn { margin-top:8px; font-size:11px; }
.fmm-settings-rail__help .fmm-btn--ghost { color:#fff; border-color:#716963; background:transparent; }
.fmm-pi-form { min-width:0; }
.fmm-pi-title { margin:0 0 3px; font-size:22px; line-height:1.2; font-weight:800; color:#262223; }
.fmm-pi-subtitle { margin:0 0 18px; color:var(--fmm-muted); font-size:13px; }
.fmm-pi-card { margin:0 0 16px; padding:16px; border:1px solid var(--fmm-border); border-radius:12px; background:#fff; }
.fmm-pi-card > h2 { margin:0 0 14px; padding-bottom:11px; border-bottom:1px solid var(--fmm-border); font-size:14px; font-weight:800; }
.fmm-pi-photo { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; column-gap:14px; row-gap:0; min-height:64px; }
.fmm-pi-photo .fmm-avatar { width:56px !important; height:56px !important; }
.fmm-pi-photo__avatar { display:flex; align-items:center; }
.fmm-pi-photo__avatar-wrap { position:relative; display:block; width:56px; height:56px; }
.fmm-pi-photo__icon { position:absolute; z-index:2; display:grid; width:20px; height:20px; place-items:center; padding:0; border:2px solid #fff; border-radius:50%; color:#fff; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.fmm-pi-photo__icon svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fmm-pi-photo__icon--edit { right:-3px; bottom:0; background:#FBBF24; }
.fmm-pi-photo__icon--remove { right:-3px; top:0; background:#EF4444; opacity:0; transition:opacity .15s ease; }
.fmm-pi-photo__avatar-wrap:hover .fmm-pi-photo__icon--remove,
.fmm-pi-photo__avatar-wrap:focus-within .fmm-pi-photo__icon--remove { opacity:1; }
.fmm-pi-photo__verified { justify-self:start; padding:3px 8px; border:1px solid #B7EACD; border-radius:999px; background:#F0FFF6; color:#159447; font-size:8px; font-weight:700; line-height:1; white-space:nowrap; }
.fmm-pi-photo__details { min-width:0; display:grid; grid-template-columns:1fr; align-items:center; gap:3px; }
.fmm-pi-photo__details > b { font-size:13px; }
.fmm-pi-photo__details small { color:var(--fmm-muted); font-size:11px; }
.fmm-pi-card .fmm-infobar { margin:0 0 14px !important; }
.fmm-pi-note { margin:8px 0 0; color:var(--fmm-muted); font-size:11px; }
.fmm-gender-options { display:flex !important; flex-direction:row !important; align-items:stretch; gap:10px; width:100%; margin-bottom:0 !important; }
.fmm-gender-option { display:flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:0 10px; border:1px solid var(--fmm-border); border-radius:7px; background:#fff; color:#2D2D2D; cursor:pointer; font-size:11px; font-weight:500; }
.fmm-gender-option { flex:1 1 0; margin:0; }
.fmm-gender-option:has(input:checked) { border-color:#FBBF24; background:#FFF9E6; }
.fmm-gender-option input { width:12px; height:12px; margin:0; accent-color:#1479E9; }
.fmm-gender-option > span { color:inherit; }
.fmm-pi-card__heading { display:flex; align-items:center; justify-content:space-between; }
.fmm-pi-edit { display:inline-flex; align-items:center; gap:2px; border:0; background:transparent; color:#E9A900; font-size:11px; font-weight:700; cursor:pointer; }
.fmm-pi-address { position:relative; padding:14px 34px 14px 12px; border:1px solid #F6D98A; border-radius:6px; background:#FFF8E5; color:#4B4037; font-size:11px; line-height:1.45; min-height:78px; }
.fmm-pi-address b, .fmm-pi-address span { display:block; }
.fmm-pi-address b { margin-bottom:3px; }
.fmm-pi-address__title { display:flex !important; align-items:center; gap:5px; }
.fmm-pi-address__title svg { width:13px; height:13px; fill:#1F2937; stroke:none; }
.fmm-pi-address__confirmed { position:absolute; top:12px; right:10px; display:grid !important; place-items:center; width:16px; height:16px; border-radius:50%; background:#FBBF24; color:#fff; }
.fmm-pi-address__confirmed svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.fmm-pi-preferences { padding-top:14px; padding-bottom:14px; }
.fmm-pi-preferences .fmm-grid2 { margin:0; }
.fmm-pi-actions { display:flex; justify-content:flex-end; align-items:center; gap:18px; margin-top:4px; }
.fmm-pi-cancel { border:0; padding:10px 0; background:transparent; color:var(--fmm-muted); font-size:12px; cursor:pointer; }
@media (max-width: 800px) { .fmm-pi-photo { grid-template-columns:56px minmax(0,1fr); } .fmm-pi-photo__details { grid-template-columns:1fr; } }

/* Stays put while the settings pane scrolls. Some of these screens are long
   (Returns & Policies carries a row per return reason) and the rail scrolling
   away left no way back to the other sections without returning to the top.
   `.fmm-ssplit` already sets `align-items: start`, so the rail is its own
   height rather than stretched, which is what sticky needs.

   The header is `position: relative`, not fixed, so 16px clears the viewport
   edge and nothing else. `max-height` is the guard for short viewports: a rail
   taller than the screen can never scroll itself back into view once pinned,
   so it gets its own scrollbar instead. */
.fmm-snav {
    border: 1px solid var(--fmm-border);
    border-radius: 24px;
    padding: 25px 17px;
    background: #fff;
    position: sticky;
    top: 16px;
    max-height: none;
    overflow-y: visible;
}

.fmm-snav__label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fmm-faint);
    padding: 10px 10px 8px;
}

.fmm-snav a,
.fmm-snav > button,
.fmm-snav__out {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--fmm-text);
}

.fmm-snav a:hover,
.fmm-snav > button:hover,
.fmm-snav__out:hover { background: var(--fmm-bg-alt); }

.fmm-snav a.is-on,
.fmm-snav > button.is-on {
    position: relative;
    font-weight: 600;
    color: #FBBF24;
    background: var(--fmm-yellow-soft);
}

.fmm-snav a.is-on::before,
.fmm-snav > button.is-on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--fmm-yellow);
}

.fmm-snav__out { color: #DC2626; margin-top: 6px; }

.fmm-snav__switch {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    border-radius: 10px;
    padding: 11px 12px !important;
    color: #fff !important;
    /* `.fmm-snav a` above sets `background: none` and, being (0,1,1) to this
       rule's (0,1,0), it won — so the dark pill never painted while the
       `!important` white text still applied. The result was white-on-white: the
       icon and the "Switch to Shopping" label were invisible and all a seller
       could see was the amber pip, an unlabelled toggle with no explanation.
       Every other declaration here already carries !important, as does :hover
       below; this was the one that was missed. */
    background: var(--fmm-dark) !important;
}

.fmm-snav__switch:hover { background: #000 !important; }
.fmm-snav__switch > img { display: block; flex: 0 0 auto; }
.fmm-snav__switch span { flex: 1; font-size: 13px; font-weight: 600; }

/* The switch's affordance — decorative, the whole row is the link. */
.fmm-snav__switch i {
    position: relative;
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: var(--fmm-yellow);
    flex-shrink: 0;
}

.fmm-snav__switch i::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
}

.fmm-scard {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 24px;
    background: #fff;
}

.fmm-scard h2 { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.fmm-username-page { min-width:0; }
.fmm-contact-page { min-width:0; }
.fmm-contact-page > .fmm-pi-subtitle { font-size:13px; line-height:20px; }
.fmm-contact-card { margin-bottom:14px; padding:14px 16px 12px; border:1px solid var(--fmm-border); border-radius:8px; background:#fff; }
.fmm-contact-card__top { display:flex; align-items:center; gap:10px; }
.fmm-contact-card__icon { display:grid; width:28px; height:28px; place-items:center; flex:none; border-radius:7px; background:#FFF8E5; color:#1F2937; }
.fmm-contact-card__icon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fmm-contact-card__top small,.fmm-contact-card__top b { display:block; }
.fmm-contact-card__top small { margin-bottom:3px; color:var(--fmm-muted); font-size:8px; text-transform:uppercase; }
.fmm-contact-card__top b { font-size:12px; }
.fmm-contact-card__bottom { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.fmm-contact-card__bottom button { border:0; background:none; color:#1F2937; font-size:10px; cursor:pointer; }
.fmm-contact-status { padding:3px 8px; border-radius:999px; font-size:8px; font-weight:700; }
.fmm-contact-status.is-verified { background:#D9FBEA; color:#159447; }
.fmm-contact-status.is-unverified { background:#FFE1E1; color:#E23B3B; }
.fmm-contact-card__links { display:flex; align-items:center; gap:10px; }
.fmm-contact-card__links button:first-child { color:#E9A900; }
.fmm-contact-card__links i { width:1px; height:12px; background:var(--fmm-border); }
.fmm-contact-notice { margin-top:12px; padding:9px 10px; border-radius:6px; background:#FFF1B8; color:#9A6B00; font-size:8px; }
.fmm-contact-add { display:block; width:100%; padding:10px; border:1px dashed #D1D5DB; border-radius:7px; background:#fff; color:var(--fmm-muted); font-size:10px; cursor:pointer; }
.fmm-contact-editor { margin:14px 0; padding:14px; border:1px solid var(--fmm-border); border-radius:8px; background:#F9FAFB; }
.fmm-contact-editor .fmm-field { margin-bottom:10px; }
.fmm-contact-send { min-height:28px; height:28px; padding:0 12px; font-size:10px; border-radius:6px; }
.fmm-contact-editor__verify { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; }
.fmm-contact-editor__verify .fmm-field { flex:1; margin:0; }
.fmm-contact-editor__verify .fmm-btn { align-self:end !important; justify-content:center; text-align:center; min-width:76px; min-height:46px; height:46px; padding:0 14px; border-radius:6px; font-size:10px; line-height:1; }
.fmm-password-page { min-width:0; }
.fmm-password-page > .fmm-pi-subtitle { font-size:12px; line-height:18px; }
.fmm-password-notice { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; padding:14px 16px; border:1px solid #F6D98A; border-radius:7px; background:#FFF8E5; font-size:10px; line-height:15px; }
.fmm-password-notice b { font-size:11px; }
.fmm-password-card { padding:16px; border:1px solid var(--fmm-border); border-radius:8px; background:#fff; }
.fmm-password-card .fmm-field { margin-bottom:14px; }
.fmm-password-card .fmm-field > span:first-child { font-size:10px; margin-bottom:5px; }
.fmm-password-card .fmm-field input { height:38px; }
.fmm-password-input { position:relative; display:block; }
.fmm-password-input input { width:100%; padding-right:38px !important; }
.fmm-password-input input::placeholder { font-family:Inter, sans-serif; font-weight:400; font-style:normal; font-size:14px; line-height:100%; letter-spacing:0; vertical-align:middle; }
.fmm-password-input button { position:absolute; top:50%; right:10px; display:grid; width:22px; height:22px; place-items:center; padding:0; transform:translateY(-50%); border:0; background:transparent; color:#9CA3AF; cursor:pointer; }
.fmm-password-input button:hover { color:#4B5563; }
.fmm-password-input button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fmm-password-rules { display:flex; flex-direction:column; gap:7px; margin:0 0 16px; padding:12px; border:1px solid var(--fmm-border); border-radius:6px; background:#F8F9FA; color:var(--fmm-muted); font-family:Inter, sans-serif; font-weight:400; font-style:normal; font-size:14px; line-height:20px; letter-spacing:0; vertical-align:middle; }
.fmm-password-rules b { color:#1F2937; font-family:Inter, sans-serif; font-weight:400; font-size:14px; line-height:20px; }
.fmm-password-rules span.is-valid { color:#22A35A; }
.fmm-password-rules span:not(.is-valid) { color:#B8C0CA; }
.fmm-password-rules span { display:flex; align-items:center; gap:7px; }
.fmm-password-rules span img,.fmm-password-rules span i { display:block; width:12px; height:12px; flex:none; }
.fmm-password-rules span i { border-radius:50%; background:#D1D5DB; }
.fmm-password-submit { display:flex; width:100%; min-height:38px; justify-content:center; align-items:center; margin-top:6px; border-radius:6px; font-size:11px; }
.fmm-password-forgot { display:block; margin:12px auto 0; border:0; background:none; color:var(--fmm-muted); font-size:9px; cursor:pointer; }
.fmm-password-tips { padding:16px; border:1px solid var(--fmm-border); border-radius:8px; background:#fff; font-size:11px; }
.fmm-password-tips h2 { display:flex; align-items:center; gap:7px; margin:0 0 14px; color:#1F2937; font-size:13px; }
.fmm-password-tips h2 span { color:#FBBF24; font-size:15px; }
.fmm-password-tips p { display:grid; grid-template-columns:12px 1fr; gap:7px; margin:0; padding:7px 0; color:#EF4444; line-height:15px; }
.fmm-password-tips p span { color:#4B5563; }
.fmm-password-tips p.is-good { color:#22A35A; }
.fmm-password-tips small { display:block; margin-top:10px; padding-top:14px; border-top:1px solid var(--fmm-border); color:var(--fmm-muted); }
.fmm-password-tips a { display:block; margin-top:6px; color:#2563EB; font-size:10px; text-decoration:none; }
.fmm-username-page > .fmm-pi-title { font-size:20px; line-height:28px; font-weight:700; letter-spacing:0; }
.fmm-username-page > .fmm-pi-subtitle { font-size:13px; line-height:20px; }
.fmm-username-card { padding:16px; border:1px solid var(--fmm-border); border-radius:8px; background:#fff; }
.fmm-username-card__identity { display:flex; align-items:center; gap:10px; }
.fmm-username-card__avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--fmm-bg-alt); flex:none; }
.fmm-username-card__avatar img { width:100%; height:100%; object-fit:cover; }
.fmm-username-card__identity small,.fmm-username-card__identity b { display:block; }
.fmm-username-card__identity small { font-size:10px; text-transform:uppercase; font-weight:700; }
.fmm-username-card__identity b { font-size:15px; }
.fmm-username-card__identity > div > b { display:inline-block; vertical-align:middle; }
.fmm-username-card__identity .fmm-pi-photo__verified { display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 6px; }
.fmm-username-field { display:block; margin-top:14px; }
.fmm-username-field > span { display:block; margin-bottom:5px; font-size:12px; font-weight:700; }
.fmm-username-field > div { display:flex; align-items:center; height:34px; border:1px solid var(--fmm-border); border-radius:6px; background:#fff; overflow:hidden; }
.fmm-username-field i { padding-left:10px; color:var(--fmm-muted); font-style:normal; }
.fmm-username-field input { flex:1; min-width:0; height:100%; border:0; padding:0 7px; background:transparent; outline:0; font-size:12px; }
.fmm-username-field > div > span { padding-right:10px; color:var(--fmm-muted); font-size:11px; }
.fmm-username-lock { display:grid; place-items:center; }
.fmm-username-lock svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fmm-username-field small { display:block; margin-top:4px; font-size:10px; color:var(--fmm-muted); }
.fmm-username-field .fmm-username-status { margin-top:4px; }
.fmm-username-status.is-checking { color:var(--fmm-muted); }
.fmm-username-status.is-available { color:#15803D; }
.fmm-username-status.is-unavailable { color:#B91C1C; }
.fmm-username-info { margin-top:14px; padding:14px; border:1px solid #F6D98A; border-radius:7px; background:#FFF8E5; font-size:11px; line-height:1.5; }
.fmm-username-info b { font-size:13px; }
.fmm-username-info p { margin:7px 0 0; }
.fmm-username-subheading { margin:16px 0 8px; font-size:14px; line-height:20px; }
.fmm-username-preview { display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px 12px; border:1px solid var(--fmm-border); border-radius:8px; background:#fff; font-size:10px; }
.fmm-username-preview b,.fmm-username-preview span { display:block; }
.fmm-username-preview > div:first-child b { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700; }
.fmm-username-preview > div:first-child b img { display:grid; width:20px; height:20px; padding:2px; place-items:center; border-radius:50%; background:#FFF8E5; }
.fmm-username-preview > div:first-child span { margin-top:2px; padding-left:25px; font-size:9px; }
.fmm-username-preview em { align-self:start; margin-top:1px; padding:3px 7px; border-radius:99px; background:#FFF8E5; color:#B47A00; font-size:7px; font-style:normal; }
.fmm-username-product { grid-column:1 / -1; display:flex; gap:8px; align-items:center; margin-top:4px; padding:8px; border-radius:5px; background:#F8F9FA; }
.fmm-username-product > b { display:grid; width:24px; height:24px; place-items:center; padding:0; background:#fff; color:#AAB2BD; }
.fmm-username-product > b img { width:20px; height:16px; display:block; object-fit:contain; }
.fmm-username-product small { display:block; color:var(--fmm-muted); font-size:9px; }
.fmm-username-actions { display:flex; gap:8px; margin-top:14px; }
.fmm-username-actions .fmm-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:1; min-height:30px; height:30px; padding:0 12px; border-radius:6px; font-size:11px; line-height:1; text-align:center; }
.fmm-username-actions .fmm-btn svg { width:11px; height:11px; fill:currentColor; stroke:none; flex:none; }
.fmm-username-actions .fmm-btn--ghost { border-color:#D9DEE5; background:#fff; color:#1F2937; }
.fmm-username-actions .fmm-btn--ghost.is-copied { border-color:#86EFAC; background:#F0FFF4; color:#15803D; animation:fmm-copy-pop .22s ease-out; }
.fmm-username-actions .fmm-btn--primary { background:#FBBF24; border-color:#FBBF24; color:#1F2937; }
@keyframes fmm-copy-pop { 0% { transform:scale(.97); } 70% { transform:scale(1.02); } 100% { transform:scale(1); } }
.fmm-private-safety { padding:16px; border:1px solid var(--fmm-border); border-radius:8px; background:#fff; text-align:center; }
.fmm-private-safety__lock { display:grid; place-items:center; width:40px; height:40px; margin:0 auto 10px; border-radius:50%; background:#ECFDF3; color:#22A35A; font-size:18px; }
.fmm-private-safety__lock svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fmm-private-safety h2 { margin:0 0 8px; font-size:12px; line-height:18px; font-weight:700; }
.fmm-private-safety p { margin:0 0 10px; color:var(--fmm-muted); font-size:10px; line-height:14px; }
.fmm-private-safety ul { margin:0; padding:10px 10px 10px 22px; border-radius:4px; background:#F8FAFC; color:var(--fmm-muted); text-align:left; font-size:9px; line-height:13px; }
.fmm-private-safety li { margin:0 0 5px; }
.fmm-private-safety li::marker { color:#22A35A; }
.fmm-private-safety li:last-child { margin-bottom:0; }
.fmm-private-safety a { display:block; margin-top:12px; color:#2563EB; font-size:9px; text-decoration:none; }

.fmm-savatar { display: grid; justify-items: center; gap: 8px; margin-bottom: 24px; }

.fmm-savatar > span {
    position: relative;
    display: block;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: visible;
    background: var(--fmm-bg-alt);
}

.fmm-savatar img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }

.fmm-savatar label {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
    border: 2px solid #fff;
}

.fmm-savatar b { font-size: 13px; font-weight: 600; color: var(--fmm-muted); }

.fmm-snote {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 20px;
    border-radius: 10px;
    padding: 13px 14px;
    background: var(--fmm-yellow-soft);
}

.fmm-snote svg { color: var(--fmm-yellow-dark); flex-shrink: 0; margin-top: 1px; }
.fmm-snote b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.fmm-snote span { font-size: 12.5px; line-height: 1.6; color: #78350F; }

.fmm-sfoot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--fmm-border);
}

.fmm-scard--rail { padding: 18px 20px; }

.fmm-scomplete { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }

.fmm-scomplete li { display: flex; gap: 10px; align-items: flex-start; }

.fmm-scomplete i {
    position: relative;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid var(--fmm-border);
    background: #fff;
}

.fmm-scomplete li.is-on i { border-color: #22C55E; background: #22C55E; }

.fmm-scomplete li.is-on i::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.fmm-scomplete b { display: block; font-size: 13px; font-weight: 600; }
.fmm-scomplete em { font-size: 12px; font-style: normal; color: var(--fmm-muted); }

.fmm-sbar {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--fmm-bg-alt);
    margin-bottom: 8px;
}

.fmm-sbar span { display: block; height: 100%; border-radius: 999px; background: #22C55E; }

.fmm-scard--rail p { font-size: 12.5px; font-weight: 600; color: var(--fmm-muted); margin: 0; }

/* Keep the Figma three-column settings composition together on tablet-sized
   content captures; only collapse it once there is genuinely no room for the
   navigation, form, and helper rail to coexist. */
@media (max-width: 900px) {
    .fmm-ssplit { grid-template-columns: 210px minmax(0, 1fr); }
    .fmm-ssplit > aside { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .fmm-ssplit { grid-template-columns: minmax(0, 1fr); }

    /* Single column now, so the rail sits above the pane rather than beside it.
       Pinned it would cover the settings the reader scrolled down to. */
    .fmm-snav {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

/* --- vendor onboarding (KYC) --------------------------------------------- */

/* Proportioned from the onboarding frames: form ~780, gap ~46, rail ~470 out
   of a ~1300 content width. The form column used to be 1fr with the card
   capped at 620px inside it, which parked the card on the left and stranded
   the rail on the right with ~400px of dead space between them. Sizing the
   columns instead of the card keeps the two adjacent, as drawn. */
.fmm-ksplit {
    display: grid;
    grid-template-columns: minmax(0, 780px) minmax(0, 470px);
    gap: 46px;
    align-items: start;
}

.fmm-kcard {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 24px;
    background: #fff;
}

.fmm-kcard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.fmm-kcard__head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.fmm-kcard__head p { font-size: 13.5px; line-height: 1.6; color: var(--fmm-muted); margin: 0; max-width: 330px; }

.fmm-kstep { text-align: right; flex-shrink: 0; }

.fmm-kstep span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--fmm-faint);
    margin-bottom: 7px;
}

.fmm-kstep i {
    display: block;
    width: 92px;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--fmm-bg-alt);
}

.fmm-kstep i b { display: block; height: 100%; border-radius: 999px; background: var(--fmm-yellow); }

/* Setup Progress — Figma 5:11348 "Progress Card" / 5:11353 "Vertical Timeline".
   Values below are the frame's; #E5E7EB and #6B7280 happen to be exactly our
   --fmm-border and --fmm-muted, so those use the tokens. */

.fmm-kprog {
    border: 2px solid rgba(229, 231, 235, .5);
    border-radius: 24px;
    padding: 34px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
}

.fmm-kprog > h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -.5px;
    margin: 0 0 32px;
    color: var(--fmm-text);
}

.fmm-ksteps { position: relative; list-style: none; margin: 0; padding: 0; }

/* One continuous bar, amber at the top fading to grey by halfway — the frame
   draws the connector as a single gradient rather than per-step segments, so
   it is decoration and does not track how many steps are done. */
.fmm-ksteps::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 9999px;
    background: linear-gradient(to bottom, var(--fmm-yellow), var(--fmm-border) 50%);
}

.fmm-ksteps li {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 40px;
}

.fmm-ksteps li:last-child { padding-bottom: 0; }

.fmm-ksteps i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 100px;
    font-style: normal;
    background: #fff;
    border: 2px solid var(--fmm-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}

/* Unreached: an 8px grey dot inside the white ring. */
.fmm-ksteps i::after {
    content: "";
    grid-area: 1 / 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fmm-border);
}

.fmm-ksteps i > svg { grid-area: 1 / 1; }

.fmm-ksteps li.is-done i {
    color: #fff;
    background: var(--fmm-yellow);
    border-color: var(--fmm-yellow);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.fmm-ksteps li.is-done i::after { display: none; }

.fmm-ksteps li.is-now i { border-color: var(--fmm-yellow); }
.fmm-ksteps li.is-now i::after { background: var(--fmm-yellow); }

.fmm-ksteps b {
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--fmm-text);
}

/* Unreached steps are dimmed as a whole rather than recoloured, so the label
   and its status fade together — the frame puts opacity on the row's text
   container, not a grey on the heading. */
.fmm-ksteps li:not(.is-done):not(.is-now) > span { opacity: .6; }

/* The step in progress keeps the amber card from the bank-step frame
   (5:10852); this frame draws it as plain pending. Padding and negative margin
   cancel out so the marker stays on the same axis as every other row. */
.fmm-ksteps li.is-now {
    border: 1px solid var(--fmm-yellow);
    border-radius: 10px;
    background: #FFFBEB;
    margin: 0 -10px 40px;
    padding: 10px;
}

.fmm-ksteps li.is-now:last-child { margin-bottom: 0; }
.fmm-ksteps li.is-now em { color: #B45309; }


.fmm-ksteps em {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    font-style: normal;
    font-weight: 500;
    color: var(--fmm-muted);
}

.fmm-ksteps em > svg { flex-shrink: 0; }
.fmm-ksteps li.is-done em { color: #16A34A; font-weight: 600; }

@media (max-width: 1000px) {
    .fmm-ksplit { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* The vendor page head reuses the buyer head's action slot. */
.fmm-vhead h1 { font-size: 25px; }

/* Cards written against the buyer shell still read correctly on the vendor
   grid — same border, radius and background, so no page needed rewriting to
   move across. */
.fmm-vpage .fmm-panel {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    background: #fff;
}

/* The secondary vendor nav sits under the page head, not beside the tabs. */
.fmm-vpage .fmm-acctnav { margin-bottom: 22px; }

/* --- per-order payout status --------------------------------------------- */

.fmm-pstop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fmm-border);
}

.fmm-pstop > div > span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--fmm-faint);
    margin-bottom: 4px;
}

.fmm-pstop b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }

.fmm-pstop .fmm-vstatus { display: inline-flex; align-items: center; gap: 6px; }

.fmm-psitem { display: flex; gap: 14px; align-items: center; padding: 16px 0; }

.fmm-psitem b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }

.fmm-psitem span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--fmm-muted);
}

.fmm-psamount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--fmm-bg-alt);
}

.fmm-psamount > span { font-size: 13.5px; color: var(--fmm-muted); }
.fmm-psamount b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

.fmm-pstrack { list-style: none; margin: 0; padding: 0; }

.fmm-pstrack li {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 20px;
}

.fmm-pstrack li:last-child { padding-bottom: 0; }

.fmm-pstrack li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 22px;
    bottom: 2px;
    width: 2px;
    background: var(--fmm-border);
}

.fmm-pstrack li.is-done:not(:last-child)::before { background: var(--fmm-yellow); }

.fmm-pstrack i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    color: var(--fmm-dark);
    background: var(--fmm-bg-alt);
    border: 2px solid var(--fmm-border);
}

.fmm-pstrack li.is-done i { background: var(--fmm-yellow); border-color: var(--fmm-yellow); }
.fmm-pstrack--payout li.is-done i { color: #fff; }

/* The stage in flight is a ring, not a fill — it hasn't happened yet. */
.fmm-pstrack li.is-now i { background: #fff; border-color: var(--fmm-yellow); }

.fmm-pstrack li.is-now i::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fmm-yellow);
}

.fmm-pstrack b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.fmm-pstrack li:not(.is-done):not(.is-now) b { font-weight: 500; color: var(--fmm-faint); }
.fmm-pstrack em { font-size: 12px; font-style: normal; color: var(--fmm-muted); }
.fmm-pstrack li.is-now em { color: var(--fmm-yellow-dark); }

.fmm-vnote em { font-size: 12.5px; font-style: normal; line-height: 1.6; color: #78350F; }

/* --- import from social -------------------------------------------------- */

.fmm-ialert {
    border: 1px solid #FCA5A5;
    border-radius: var(--fmm-radius-lg);
    background: #FEF2F2;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.fmm-ialert__head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 800;
    color: #DC2626;
    margin-bottom: 6px;
}

.fmm-ialert p { font-size: 12.5px; line-height: 1.6; color: #7F1D1D; margin: 0 0 8px; }

.fmm-ialert > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #B91C1C;
}

.fmm-ifield { position: relative; display: flex; align-items: center; }

.fmm-ifield svg { position: absolute; left: 14px; color: var(--fmm-faint); pointer-events: none; }

.fmm-ifield input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 0 14px 0 38px;
    font: inherit;
    font-size: 14px;
    background: var(--fmm-bg-alt);
}

.fmm-ifield input:focus { outline: none; border-color: var(--fmm-yellow); background: #fff; }

.fmm-ihint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    font-size: 12px;
    color: var(--fmm-muted);
}

.fmm-iplats { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }

.fmm-iplats button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fmm-border);
    background: #fff;
    border-radius: 999px;
    padding: 8px 15px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--fmm-text);
}

.fmm-iplats button.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }

.fmm-iplats button:disabled { opacity: .5; cursor: default; }

.fmm-iplats em { font-size: 10.5px; font-style: normal; color: var(--fmm-faint); }

.fmm-inote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    padding: 11px;
    font-size: 12px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-isteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.fmm-isteps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #78350F;
}

.fmm-isteps b {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
}

/* --- order issue details ------------------------------------------------- */

.fmm-iissue {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 13px 14px;
    background: var(--fmm-yellow-soft);
}

.fmm-iissue svg { color: #DC2626; flex-shrink: 0; margin-top: 1px; }
.fmm-iissue b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.fmm-iissue em { font-size: 12.5px; font-style: normal; color: #78350F; }

.fmm-ireturn {
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--fmm-bg-alt);
}

.fmm-ireturn > span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fmm-faint);
    margin-bottom: 4px;
}

.fmm-ireturn b { font-size: 13.5px; font-weight: 700; }

/* Facts grid inside the verdict card — buyer status, payout status, return
   tracking and carrier. Sits on the alert's tinted background, so the tiles use
   solid white to stay legible against it rather than another wash. */
.fmm-ifacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.fmm-ifact {
    min-width: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #FECACA;
}

.fmm-ifact > span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fmm-faint);
    margin-bottom: 4px;
}

.fmm-ifact > b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize;
    /* Tracking numbers and long refund labels must not push the tile wider than
       its grid column. */
    overflow-wrap: anywhere;
}

.fmm-ifact > b.is-red { color: #B91C1C; }

/* Tracking value + its Copy button share the line. */
.fmm-ifact__copy {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-transform: none !important;
}

.fmm-ifact__copy button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--fmm-border);
    border-radius: 7px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fmm-muted);
    background: #fff;
    cursor: pointer;
}

.fmm-ifact__copy button:hover { color: var(--fmm-text); border-color: var(--fmm-faint); }

/* A fees total is money leaving the seller, so it reads red — the base
   `--total` rule is green because every other place it appears is a payout. */
.fmm-vrev--total b.is-minus { color: #DC2626; }

/* Return tracking and destination, paired — they answer one question together. */
.fmm-iret {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.fmm-iret__col { min-width: 0; }

.fmm-iret__col > span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fmm-faint);
    margin-bottom: 5px;
}

.fmm-iret__col > b { display: block; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }

/* Address lines stack; `em` is reset because the block is not emphasis. */
.fmm-iret__col em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fmm-muted);
}

.fmm-iret__col em:first-child { font-weight: 700; color: var(--fmm-text); }

.fmm-iret__track { display: flex; align-items: center; gap: 8px; }

.fmm-iret__track button {
    flex-shrink: 0;
    border: 1px solid var(--fmm-border);
    border-radius: 7px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fmm-muted);
    background: #fff;
    cursor: pointer;
}

.fmm-iret__track button:hover { color: var(--fmm-text); border-color: var(--fmm-faint); }

@media (max-width: 620px) {
    .fmm-iret { grid-template-columns: 1fr; }
}

.fmm-icase {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--fmm-muted);
}

.fmm-icase b { font-weight: 700; color: var(--fmm-text); }

@media (max-width: 620px) {
    .fmm-ifacts { grid-template-columns: 1fr; }
}

/* --- listing submitted --------------------------------------------------- */

.fmm-lsdone {
    position: relative;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 34px 28px 30px;
    margin-bottom: 16px;
    text-align: center;
    background: #fff;
    overflow: hidden;
}

/* The accent strip the design runs across the top of the card. */
.fmm-lsdone::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--fmm-yellow);
}

.fmm-lsdone.is-bad::before { background: #DC2626; }

.fmm-lsdone__tick {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    color: #fff;
    background: var(--fmm-yellow);
    box-shadow: 0 0 0 6px var(--fmm-yellow-soft);
}

.fmm-lsdone.is-bad .fmm-lsdone__tick { background: #DC2626; box-shadow: 0 0 0 6px #FEE2E2; }

.fmm-lsdone h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }

.fmm-lsdone p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--fmm-muted);
    margin: 0 auto;
    max-width: 380px;
}

.fmm-lsitem {
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 16px;
    margin-bottom: 16px;
    background: #fff;
}

.fmm-lsitem__thumb {
    flex-shrink: 0;
    width: 74px;
    height: 74px;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    background: var(--fmm-bg-alt);
}

.fmm-lsitem__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-lsitem__cat {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--fmm-faint);
    margin-bottom: 4px;
}

.fmm-lsitem h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }

.fmm-lsitem__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fmm-lsitem__row b { font-size: 17px; font-weight: 800; }
.fmm-lsitem__row .fmm-vstatus { display: inline-flex; align-items: center; gap: 6px; }

/* A stage that will never run reads as stopped, not merely pending. */
.fmm-pstrack li em { display: block; }

/* --- Nigeria package cards ----------------------------------------------- */

.fmm-pkgs {
    display: grid;
    /* Packages live beside the account rail. A fixed four-column grid makes
       each card too narrow for a normal product name even on a wide desktop.
       Let the available content width choose the count while keeping every
       card wide enough for its thumbnail, title, reference and checkbox. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

.fmm-pkg {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 14px 14px 13px;
    background: #fff;
    /*
     * NO overflow:hidden here. The ⋮ menu's dropdown is an absolutely-positioned
     * child of the card, so clipping the container hides it entirely — the
     * button appeared to do nothing because the popup was being clipped away.
     * The top accent strip clips itself instead (border-radius on the pseudo).
     */
}

/* The accent strip that tells you at a glance where the box is. */
.fmm-pkg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* Round only the top corners so the strip hugs the card's radius. */
    border-radius: var(--fmm-radius-lg) var(--fmm-radius-lg) 0 0;
    background: var(--fmm-faint);
}

.fmm-pkg.is-amber::before { background: #F59E0B; }
.fmm-pkg.is-blue::before { background: #3B82F6; }
.fmm-pkg.is-violet::before { background: var(--fmm-violet); }
.fmm-pkg.is-green::before { background: #22C55E; }
.fmm-pkg.is-red::before { background: #EF4444; }

.fmm-pkg.is-picked { border-color: var(--fmm-yellow); box-shadow: 0 0 0 3px var(--fmm-yellow-soft); }
.fmm-pkg.is-busy { opacity: .55; pointer-events: none; }

.fmm-pkg__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.fmm-pkg__state {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--fmm-muted);
}

.fmm-pkg.is-amber .fmm-pkg__state { color: #B45309; }

/* Bulk-request payment modal (sheet #61). */
.fmm-bulkpay h2 { margin: 0 0 16px; font-size: 19px; font-weight: 800; color: #111827; }
.fmm-bulkpay__rows { border: 1px solid #F3F4F6; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.fmm-bulkpay__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; font-size: 13.5px; color: #4B5563;
}
.fmm-bulkpay__row b { font-weight: 700; color: #111827; }
.fmm-bulkpay__row--total { border-top: 1px solid #F3F4F6; background: #FFFBEB; }
.fmm-bulkpay__row--total span { font-weight: 700; color: #111827; }
.fmm-bulkpay__row--total b { font-size: 16px; font-weight: 800; }
.fmm-bulkpay__note { margin: 0 0 18px; font-size: 12.5px; line-height: 19px; color: #6B7280; }
.fmm-bulkpay__acts { display: flex; gap: 12px; }
.fmm-bulkpay__acts .fmm-btn { justify-content: center; }
@media (max-width: 560px) {
    .fmm-bulkpay__acts { flex-direction: column; }
}

/* Bulk return rows: one label picker per selected package. */
.fmm-bulkret__rows { margin: 0 0 14px; max-height: 260px; overflow-y: auto; border: 1px solid #F3F4F6; border-radius: 12px; }
.fmm-bulkret__row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; font-size: 13px;
}
.fmm-bulkret__row + .fmm-bulkret__row { border-top: 1px solid #F3F4F6; }
.fmm-bulkret__row > b { color: #111827; font-weight: 700; }
.fmm-bulkret__have { flex-basis: 100%; order: 3; color: #15803D; font-size: 12px; }

/* The round package-details button on each card (replaces the ⋮ menu). */
.fmm-pkg__info {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--fmm-yellow); color: var(--fmm-dark);
}
.fmm-pkg__info:hover { background: var(--fmm-yellow-dark); }

/* Arrival-photos option on the Incoming Package form. */
.fmm-incoming__photo-opt {
    display: flex; gap: 12px; align-items: flex-start;
    margin-top: 16px; padding: 14px 16px;
    border: 1px solid #FDE68A; border-radius: 12px; background: #FFFBEB;
    cursor: pointer;
}
.fmm-incoming__photo-opt input { width: 17px; height: 17px; margin-top: 2px; accent-color: #FFC72C; }
.fmm-incoming__photo-opt b { display: block; font-size: 14px; font-weight: 700; color: #1A1A1A; }
.fmm-incoming__photo-opt b em { font-style: normal; color: #B45309; }
.fmm-incoming__photo-opt small { display: block; margin-top: 4px; font-size: 12px; line-height: 18px; color: #6B7280; }

/* Inline "add an address" link under the home-delivery picker. */
.fmm-pp__pkg-addaddr {
    display: inline-block; margin-top: 6px;
    font-size: 12.5px; font-weight: 700; color: #B45309; text-decoration: none;
}
.fmm-pp__pkg-addaddr:hover { text-decoration: underline; }

/* "U.S. only" notice raised by gated footer links. */
.fmm-usonly-note {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
    z-index: 9000; padding: 11px 18px; border-radius: 10px;
    background: #1A1A1A; color: #fff; font-size: 13px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.fmm-usonly-note.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Shipping-paid marker on the card head. */
.fmm-pkg__paidtag {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    background: #DCFCE7; color: #15803D;
    font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.fmm-pkg.is-blue .fmm-pkg__state { color: #1D4ED8; }
.fmm-pkg.is-violet .fmm-pkg__state { color: #6D28D9; }
.fmm-pkg.is-green .fmm-pkg__state { color: #15803D; }
.fmm-pkg.is-red .fmm-pkg__state { color: #B91C1C; }

.fmm-pkg__ref { font-size: 9.5px; font-weight: 700; color: var(--fmm-faint); }

.fmm-pkg__track { display: flex; gap: 8px; align-items: flex-start; }

.fmm-pkg__track b {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    word-break: break-all;
    line-height: 1.35;
}

.fmm-pkg__track em { display: block; font-size: 10px; font-style: normal; color: var(--fmm-faint); margin-top: 2px; }

.fmm-pkg__pick input { width: 14px; height: 14px; accent-color: var(--fmm-yellow); }

.fmm-pkg__weights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    border-radius: 8px;
    padding: 9px 10px;
    background: var(--fmm-bg-alt);
}

.fmm-pkg__weights em {
    display: block;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fmm-faint);
    margin-bottom: 3px;
}

.fmm-pkg__weights b { font-size: 11.5px; font-weight: 700; }

.fmm-pkg__billable b { display: flex; flex-direction: column; gap: 1px; }
.fmm-pkg__billable i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--fmm-yellow-dark); }

.fmm-pkg__note {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 0;
    font-size: 9.5px;
    line-height: 1.45;
    color: var(--fmm-muted);
}

.fmm-pkg__note svg { flex-shrink: 0; margin-top: 1px; }
.fmm-pkg__note a { color: var(--fmm-yellow-dark); font-weight: 600; white-space: nowrap; }

.fmm-pkg__dims {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--fmm-border);
}

.fmm-pkg__dims em {
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fmm-faint);
}

.fmm-pkg__dims b { font-size: 10.5px; font-weight: 700; }

.fmm-pkg__foot { display: flex; gap: 6px; align-items: center; margin-top: auto; }
.fmm-pkg__foot .fmm-btn { font-size: 11px; padding: 8px 10px; }

.fmm-pkg__menu { position: relative; }

.fmm-pkg__menu > button {
    width: 28px;
    height: 30px;
    border: 1px solid var(--fmm-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: var(--fmm-muted);
}

@media (max-width: 1200px) { .fmm-pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fmm-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fmm-pkgs { grid-template-columns: minmax(0, 1fr); } }

/* --- package payment confirm --------------------------------------------- */

.fmm-pay {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    width: min(920px, 100%);
    max-height: 92vh;
    overflow: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--fmm-shadow-lg);
}

.fmm-pay__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 24px 26px;
    background: var(--fmm-yellow-soft);
}

.fmm-pay__lefttop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 22px;
}

.fmm-pay__lefttop button,
.fmm-pay__lefttop a {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--fmm-muted);
    background: rgba(255, 255, 255, .7);
}

.fmm-pay__ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 50%;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
}

.fmm-pay__total { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.fmm-pay__totallabel { font-size: 12.5px; color: var(--fmm-muted); margin-bottom: 20px; }

.fmm-pay__summary {
    width: 100%;
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}

.fmm-pay__summaryhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.fmm-pay__summaryhead b { font-size: 14px; font-weight: 800; }
.fmm-pay__summaryhead a { font-size: 12px; font-weight: 600; color: var(--fmm-yellow-dark); }

.fmm-pay__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--fmm-muted);
}

.fmm-pay__line b { font-weight: 700; color: var(--fmm-text); }

.fmm-pay__line--total {
    margin-top: 6px;
    padding-top: 11px;
    border-top: 1px solid var(--fmm-border);
    font-size: 14px;
    font-weight: 700;
    color: var(--fmm-text);
}

.fmm-pay__line--total b { font-size: 15px; font-weight: 800; }

.fmm-pay__secure {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 0;
    font-size: 11px;
    color: var(--fmm-muted);
}

.fmm-pay__right { padding: 22px 26px 26px; }

.fmm-pay__righttop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.fmm-pay__righttop h2 { font-size: 19px; font-weight: 800; margin: 0; }

.fmm-pay__righttop button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-pay__label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 10px; }

.fmm-paymethod {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--fmm-border);
    border-radius: 12px;
    padding: 13px 14px;
    cursor: pointer;
    background: #fff;
}

.fmm-paymethod.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }

.fmm-paymethod__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    color: var(--fmm-dark);
    background: var(--fmm-bg-alt);
}

.fmm-paymethod.is-on .fmm-paymethod__ico { background: rgba(255, 255, 255, .75); }

.fmm-paymethod b { display: block; font-size: 14px; font-weight: 700; }
.fmm-paymethod em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); }

.fmm-paymethod__tick {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--fmm-border);
}

.fmm-paymethod.is-on .fmm-paymethod__tick { background: var(--fmm-yellow); color: var(--fmm-dark); }

.fmm-payok {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    border-radius: 10px;
    padding: 12px 14px;
    background: #DCFCE7;
}

.fmm-payok svg { color: #15803D; flex-shrink: 0; margin-top: 1px; }
.fmm-payok b { display: block; font-size: 13px; font-weight: 700; color: #15803D; margin-bottom: 2px; }
.fmm-payok span { font-size: 12.5px; line-height: 1.55; color: #166534; }

@media (max-width: 780px) {
    .fmm-pay { grid-template-columns: minmax(0, 1fr); }
}

/* --- buyer account sidebar + wallet --------------------------------------- */

.fmm-wsplit {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 260px;
    gap: 22px;
    align-items: start;
}

.fmm-aside {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 10px;
    background: #fff;
}

.fmm-aside a {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 10px 11px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fmm-text);
}

.fmm-aside a:hover { background: var(--fmm-bg-alt); }

.fmm-aside a.is-on {
    position: relative;
    font-weight: 600;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-aside a.is-on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--fmm-yellow);
}

.fmm-wbal {
    border-radius: var(--fmm-radius-lg);
    padding: 20px 22px 22px;
    margin-bottom: 18px;
    color: var(--fmm-dark);
    background: linear-gradient(135deg, var(--fmm-yellow) 0%, #F0A912 100%);
}

.fmm-wbal__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.fmm-wbal__top span { font-size: 13px; font-weight: 600; }

.fmm-wbal__top button {
    border: 0;
    background: none;
    cursor: pointer;
    color: rgba(35, 31, 32, .6);
    display: grid;
    place-items: center;
}
.fmm-wbal__visibility-icon { display: block; width: 25px; height: 20px; }

.fmm-wbal__amount {
    display: block;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 18px;
}

.fmm-wbal__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.fmm-wbal__tiles > div {
    position: relative;
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .32);
}

.fmm-wbal__tiles span { display: block; font-size: 11.5px; margin-bottom: 4px; color: rgba(35, 31, 32, .72); }
.fmm-wbal__tiles b { font-size: 17px; font-weight: 800; }

.fmm-wbal__pip {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--fmm-dark);
    background: rgba(255, 255, 255, .75);
}
.fmm-wbal__pip img { display: block; width: 9px; height: 12px; }

.fmm-wacts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.fmm-wacts > * {
    display: grid;
    justify-items: center;
    gap: 8px;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 16px 8px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fmm-text);
}

.fmm-wacts > *:hover { border-color: var(--fmm-faint); }

.fmm-wacts span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--fmm-dark);
    background: var(--fmm-bg-alt);
}
.fmm-wacts span img { display: block; flex: none; max-width: none; object-fit: contain; }

.fmm-wallet-security-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: #EFF6FF;
}
.fmm-wallet-security-icon img { display: block; width: 16px; height: 16px; }

.fmm-wtxhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fmm-wtxhead h2 { font-size: 16px; font-weight: 800; margin: 0; }
.fmm-wtxhead a { font-size: 12.5px; font-weight: 600; color: var(--fmm-yellow-dark); }

.fmm-wtx {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    min-height: 58px;
    border-bottom: 1px solid var(--fmm-border);
}

.fmm-wtx:last-child { border-bottom: 0; }

.fmm-wtx__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 100%;
}
.fmm-wtx > .fmm-wtx__ico { display: grid; place-items: center; }

.fmm-wtx__ico.is-success { color: #15803D; background: #DCFCE7; }
.fmm-wtx__ico.is-failed { color: #DC2626; background: #FEE2E2; }
.fmm-wtx__ico.is-pending { color: #B77900; background: #FFF4CE; }
.fmm-wtx__ico.is-refunded { color: #2563EB; background: #DBEAFE; }
.fmm-wtx__ico.fmm-txn--in { color: #15803D; background: #DCFCE7; }
.fmm-wtx__ico.fmm-txn--out { color: #B91C1C; background: #FEE2E2; }
.fmm-wtx__ico--shipping,
.fmm-wtx__ico--marketplace { width: 48px; height: 48px; border-radius: 9999px; }
.fmm-wtx__ico.fmm-wtx__ico--shipping { background: #FFF7ED; }
.fmm-wtx__ico.fmm-wtx__ico--marketplace { background: #FAF5FF; }
.fmm-wtx__type-icon { display: block; flex: none; }

.fmm-wtx b { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-wtx span { display: block; font-size: 11.5px; color: var(--fmm-faint); }
.fmm-wtx__copy { min-width: 0; }
.fmm-wtx__copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmm-wtx__copy span { margin-top: 2px; }
.fmm-wtx__value { min-width: 90px; text-align: right; }
.fmm-wtx__value .fmm-wtx__amount { white-space: nowrap; }
.fmm-wtx__amount.is-success { color: #15803D; }
.fmm-wtx__amount.is-failed { color: #DC2626; }
.fmm-wtx__amount.is-pending { color: #B77900; }
.fmm-wtx__amount.is-refunded { color: #2563EB; }
.fmm-wtx__value .fmm-wtx__status { margin-top: 2px; font-size: 10.5px; line-height: 14px; font-weight: 500; }
.fmm-wtx__status.is-success { color: #15803D; }
.fmm-wtx__status.is-failed { color: #DC2626; }
.fmm-wtx__status.is-pending { color: #B77900; }
.fmm-wtx__status.is-refunded { color: #2563EB; }
.fmm-wtx b.is-in { color: #15803D; }
.fmm-wtx b.is-out { color: #DC2626; }

@media (max-width: 1100px) {
    .fmm-wsplit { grid-template-columns: 180px minmax(0, 1fr); }
    .fmm-wsplit > aside { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .fmm-wsplit { grid-template-columns: minmax(0, 1fr); }
    .fmm-wacts { grid-template-columns: repeat(2, 1fr); }
}

/* Wallet dashboard content proportions from the Figma reference. The account
   sidebar stays in the shared account shell; this narrows the overall frame so
   the balance, transaction panel and summary rail keep the intended ratio. */
.fmm-wallet-page .fmm-container { max-width: var(--fmm-container); }
.fmm-wallet-page .fmm-asplit--aside {
    grid-template-columns: 220px minmax(0, 1fr) 248px;
}
.fmm-wallet-page .fmm-panel { padding: 18px; }
.fmm-wallet-page .fmm-wbal {
    padding: 24px 22px;
    box-shadow: 0 4px 10px rgba(17, 24, 39, .10);
}
.fmm-wallet-page .fmm-wbal__amount { font-size: 36px; margin-bottom: 20px; }
.fmm-wallet-page .fmm-wbal__tiles > div { padding: 13px 14px; }
.fmm-wallet-page .fmm-wacts > * { padding: 24px 8px; }
.fmm-wallet-page .fmm-vpills,
.fmm-wallet-transactions-page .fmm-vpills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.fmm-wallet-page .fmm-vpills button,
.fmm-wallet-transactions-page .fmm-vpills button {
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #f5f6f8;
    font-size: 12px;
}
.fmm-wallet-page .fmm-vpills button.is-on,
.fmm-wallet-transactions-page .fmm-vpills button.is-on { background: var(--fmm-yellow); }

@media (max-width: 1180px) {
    .fmm-wallet-page .fmm-asplit--aside { grid-template-columns: 220px minmax(0, 1fr); }
    .fmm-wallet-page .fmm-asplit > aside { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .fmm-wallet-page .fmm-asplit--aside { grid-template-columns: minmax(0, 1fr); }
}

/* --- incoming package declaration ---------------------------------------- */

.fmm-iitem {
    position: relative;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 9px 40px 9px 13px;
    background: var(--fmm-bg-alt);
}

.fmm-iitem > span {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--fmm-faint);
    margin-bottom: 2px;
}

.fmm-iitem input {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-text);
    padding: 0;
}

.fmm-iitem input:focus { outline: none; }

.fmm-iitem > button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    /* 24px, not 22px: this is the WCAG 2.5.8 floor and the row's 40px right
       padding already reserves the space. */
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: var(--fmm-faint);
    background: transparent;
}

.fmm-iitem > button:hover { color: var(--fmm-text); background: rgba(0, 0, 0, .05); }

.fmm-iitems__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--fmm-muted);
}

.fmm-iitems__foot button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 17px tall bare, which is under the WCAG 2.5.8 floor of 24. min-height
       states the floor outright rather than leaving it to padding arithmetic. */
    min-height: 24px;
    padding: 4px 0;
    margin: -4px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fmm-yellow-dark);
}

.fmm-iitems__foot button:disabled { opacity: .45; cursor: default; }

.fmm-step {
    display: flex;
    align-items: center;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--fmm-bg-alt);
}

.fmm-step button {
    width: 38px;
    height: 40px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--fmm-muted);
}

.fmm-step input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 0;
    background: none;
    text-align: center;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}

.fmm-step input:focus { outline: none; }

/* --- payment receipt ----------------------------------------------------- */

.fmm-rcpt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--fmm-border);
    font-size: 13px;
    color: var(--fmm-muted);
}

.fmm-rcpt:last-of-type { border-bottom: 0; }
.fmm-rcpt b { font-size: 13.5px; font-weight: 700; color: var(--fmm-text); text-align: right; }

/* --- store profile ------------------------------------------------------- */

.fmm-spcover {
    position: relative;
    height: 104px;
    background: linear-gradient(120deg, var(--fmm-yellow) 0%, #FFD873 100%) center/cover no-repeat;
}

.fmm-spcover__btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: rgba(35, 31, 32, .6);
}
.fmm-spcover__btn img { width: 14px; height: 14px; filter: brightness(0) invert(1); }

.fmm-spid {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    margin-top: -28px;
    margin-bottom: 20px;
}

.fmm-spid > span:last-child { font-size: 12.5px; color: var(--fmm-muted); padding-top: 26px; }

.fmm-spid__av {
    position: relative;
    display: block;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--fmm-bg-alt);
    border: 3px solid #fff;
}

.fmm-spid__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.fmm-spid__av label {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--fmm-dark);
    background: var(--fmm-yellow);
    border: 2px solid #fff;
}
.fmm-spid__av label img { width: 12px; height: 12px; }

.fmm-spcount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--fmm-faint);
}
.fmm-store-location-input { position: relative; }
.fmm-store-location-input > img {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 14px;
    width: 11px;
    height: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}
.fmm-store-location-input > input { padding-left: 40px; }
.fmm-store-public-toggle input[type="checkbox"] {
    display: grid;
    place-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #fff;
}
.fmm-store-public-toggle input[type="checkbox"]:checked {
    border-color: var(--fmm-yellow);
    background: var(--fmm-yellow);
}
.fmm-store-public-toggle input[type="checkbox"]:checked::after {
    width: 9px;
    height: 5px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    content: "";
    transform: rotate(-45deg) translateY(-1px);
}
.fmm-store-public-toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--fmm-yellow);
    outline-offset: 2px;
}

/* The earlier .fmm-sprev block lived here and has been removed: it was the
   pre-Figma preview (38px avatar, tinted panel) and, sitting later in the file,
   it silently overrode the rebuilt one above. Two definitions of the same
   component is the bug; one of them had to go. */

/* ── Withdrawal sequence: select account, confirm, processing, details ──── */

/* The released-funds hero. Tinted rather than plain, so the "money is yours"
   state reads differently from the held one on the same screen. */
.fmm-vpanel--accent {
    border-color: #FDE68A;
    background: linear-gradient(180deg, var(--fmm-yellow-soft) 0%, #FFF 62%);
}

/* Available Payout hero, matched to the Figma white card and yellow top rule. */
.fmm-vpanel--available-hero {
    position: relative;
    overflow: hidden;
    min-height: 264px;
    padding: 32px 24px 30px;
    border-color: #EEF0F4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(17, 24, 39, .035);
    text-align: center;
}
.fmm-vpanel--available-hero::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: #FBBF24;
    content: "";
}
.fmm-payout-transfer-summary {
    padding: 24px;
    border-radius: 20px;
}
.fmm-payout-transfer-summary h2 {
    margin: 0 0 16px;
    color: #111827;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
}
.fmm-payout-transfer-summary .fmm-vrev {
    padding: 10px 0;
    border-bottom: 1px solid #EEF0F4;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 22px;
}
.fmm-payout-transfer-summary .fmm-vrev > span:first-child,
.fmm-payout-transfer-summary .fmm-vrev .fmm-payout-transfer-summary__label {
    color: #6B7280;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}
.fmm-payout-transfer-summary .fmm-vrev b {
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-align: right;
}
.fmm-payout-transfer-summary .fmm-vnote.fmm-payout-transfer-summary__secure {
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #F3F4F6;
    border-radius: 10px;
    background: #F9FAFB;
    color: #6B7280;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}
.fmm-payout-transfer-summary__secure svg { flex: 0 0 16px; color: #10B981; }
.fmm-payout-transfer-summary .fmm-payout-transfer-summary__action {
    display: flex;
    min-height: 66px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    border-radius: 12px;
    color: #111827;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}
.fmm-payout-transfer-summary .fmm-vsecure {
    margin: 16px 0 0 !important;
    color: #9CA3AF;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    text-align: center;
}
@media (max-width: 620px) {
    .fmm-payout-transfer-summary { padding: 20px; }
    .fmm-payout-transfer-summary .fmm-vrev { gap: 8px; }
    .fmm-payout-transfer-summary .fmm-vrev b { max-width: 58%; }
    .fmm-payout-transfer-summary .fmm-payout-transfer-summary__action { min-height: 56px; margin-top: 20px; }
}
.fmm-vpanel--available-hero .fmm-vstatus {
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
}
.fmm-vpanel__balance-label {
    display: block;
    margin: 25px 0 2px;
    color: var(--fmm-muted);
    font-size: 17px;
    line-height: 1.4;
}
.fmm-vpanel__balance-amount {
    display: block;
    color: var(--fmm-text);
    font-family: Inter, sans-serif;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 48px;
    text-align: center;
    vertical-align: middle;
}
.fmm-vpanel__balance-note {
    max-width: 470px;
    margin: 14px auto 0;
    color: #4B5563;
    font-size: 16px;
    line-height: 1.5;
}
@media (max-width: 620px) {
    .fmm-vpanel--available-hero { min-height: 230px; padding: 28px 18px 24px; }
    .fmm-vpanel__balance-label { margin-top: 22px; font-size: 15px; }
    .fmm-vpanel__balance-amount { font-size: 42px; }
    .fmm-vpanel__balance-note { font-size: 14px; }
}

.fmm-payout-source__heading {
    margin: 24px 0 16px;
    color: var(--fmm-text);
    font-size: 20px;
    font-weight: 700;
}
.fmm-payout-source {
    padding: 26px;
    border-radius: 20px;
}
.fmm-payout-source__top,
.fmm-payout-source__order,
.fmm-payout-source__amount {
    display: flex;
    align-items: center;
}
.fmm-payout-source__top {
    justify-content: space-between;
    gap: 24px;
}
.fmm-payout-source__order { min-width: 0; gap: 18px; }
.fmm-payout-source__icon {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border: 1px solid #EEF0F4;
    border-radius: 50%;
    background: #F8F9FB;
    color: #4B5563;
}
.fmm-payout-source__order-copy,
.fmm-payout-source__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.fmm-payout-source__label {
    color: #6B7280;
    font-size: 14px;
    line-height: 1.4;
}
.fmm-payout-source__order-copy a,
.fmm-payout-source__amount b {
    color: var(--fmm-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}
.fmm-payout-source__order-copy a {
    font-size: 16px;
    font-weight: 600;
}
.fmm-payout-source__amount {
    align-items: flex-end;
    text-align: right;
}
.fmm-payout-source__divider {
    height: 1px;
    margin: 24px 0 20px;
    background: #EEF0F4;
}
.fmm-payout-source__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 0;
}
.fmm-payout-source__row > span {
    color: #6B7280;
    font-size: 16px;
}
.fmm-payout-source__row > b {
    color: var(--fmm-text);
    font-size: 16px;
    font-weight: 500;
    text-align: right;
}
@media (max-width: 620px) {
    .fmm-payout-source { padding: 20px 18px; }
    .fmm-payout-source__top { gap: 12px; }
    .fmm-payout-source__order { gap: 12px; }
    .fmm-payout-source__icon { width: 46px; height: 46px; flex-basis: 46px; }
    .fmm-payout-source__label { font-size: 11px; }
    .fmm-payout-source__order-copy a,
    .fmm-payout-source__amount b { font-size: 14px; }
    .fmm-payout-source__row { gap: 12px; }
    .fmm-payout-source__row > span,
    .fmm-payout-source__row > b { font-size: 12px; }
}

/* Selected destination in the account picker. */
.fmm-vbank.is-on {
    border-color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
    box-shadow: 0 0 0 1px var(--fmm-yellow-dark) inset;
}
.fmm-vbank input[type="radio"] { flex-shrink: 0; accent-color: var(--fmm-yellow-dark); }

.fmm-payout-account-list {
    display: grid;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
}
.fmm-payout-account-option {
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    background: #FFFDF5;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.fmm-payout-account-option.is-on {
    border-color: #FBBF24;
    background: #FFFDF5;
    box-shadow: none;
}
.fmm-payout-account-option .fmm-payout-account-option__details {
    flex: 1;
    min-width: 0;
}
.fmm-payout-account-option__details b {
    margin-bottom: 4px;
    line-height: 1.4;
}
.fmm-payout-account-option__details em {
    margin-top: 3px;
    line-height: 1.4;
}
.fmm-payout-account-option input[type="radio"] {
    appearance: none;
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-content: center;
    margin: 0;
    border: 1.5px solid #E0E0E0;
    border-radius: 50%;
    background: #FFFDF5;
    cursor: pointer;
}
.fmm-payout-account-option input[type="radio"]::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FBBF24;
    content: "";
    transform: scale(0);
    transition: transform .12s ease;
}
.fmm-payout-account-option input[type="radio"]:checked { border-color: #E0E0E0; }
.fmm-payout-account-option input[type="radio"]:checked::before { transform: scale(1); }
.fmm-payout-account-option input[type="radio"]:focus-visible { outline: 2px solid #FBBF24; outline-offset: 2px; }
.fmm-payout-account-verified {
    max-width: 220px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
}
.fmm-payout-account-verified > svg { width: 16px; height: 18px; flex: 0 0 16px; color: #16A34A; }
.fmm-payout-account-verified > span { color: #166534; font-size: 9px; line-height: 1.4; }
.fmm-payout-account-verified > span b { margin-bottom: 2px; color: #15803D; font-size: 10px; line-height: 1.3; }
.fmm-vnote.fmm-payout-account-secure {
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid #FFCA284D;
    border-radius: 12px;
    background: #FFFDF5;
}
.fmm-payout-account-secure__icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 50%;
    background: #FFF1C2;
    color: #FBBF24;
}
.fmm-payout-account-secure > span:last-child { min-width: 0; }
.fmm-payout-account-secure b { color: #111827; }
.fmm-payout-account-secure em { color: #6B7280; line-height: 1.5; }

.fmm-payout-bank-add__card {
    width: min(100%, 548px);
    margin: 20px 0 0;
    overflow: hidden;
    border: 1px solid #F0F0F0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(17, 24, 39, .035);
}
.fmm-payout-bank-add__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-height: 122px;
    padding: 26px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFEFA;
}
.fmm-payout-bank-add__head-icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border: 1px solid #FFE7A3;
    border-radius: 50%;
    background: #FFFDF5;
    color: #FBBF24;
}
.fmm-payout-bank-add__head h1 {
    margin: 0 0 5px;
    color: #111827;
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.fmm-payout-bank-add__head p {
    max-width: 365px;
    margin: 0;
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 19px;
}
.fmm-payout-bank-add__form {
    display: grid;
    gap: 19px;
    padding: 26px;
}
.fmm-payout-bank-add__field {
    display: grid;
    gap: 6px;
    color: #111827;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
}
.fmm-payout-bank-add__control {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 42px;
    border: 1px solid #E5E7EB;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .045);
}
.fmm-payout-bank-add__control:focus-within {
    border-color: #FBBF24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, .16);
}
.fmm-payout-bank-add__control select,
.fmm-payout-bank-add__control input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 13px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #374151;
    font: 400 13px/20px Inter, sans-serif;
}
.fmm-payout-bank-add__control select { appearance: none; padding-right: 40px; cursor: pointer; }
.fmm-payout-bank-add__control select:has(option:checked[value=""]) { color: #9CA3AF; }
.fmm-payout-bank-add__select-wrap > svg {
    position: absolute;
    right: 12px;
    color: #6B7280;
    pointer-events: none;
}
.fmm-payout-bank-add__prefix,
.fmm-payout-bank-add__prefix-icon {
    flex: 0 0 auto;
    margin-left: 12px;
    color: #9CA3AF;
}
.fmm-payout-bank-add__prefix { font-size: 16px; font-weight: 700; }
.fmm-payout-bank-add__control:has(.fmm-payout-bank-add__prefix) input,
.fmm-payout-bank-add__control:has(.fmm-payout-bank-add__prefix-icon) input { padding-left: 10px; }
.fmm-payout-bank-add__other {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font: 400 13px/20px Inter, sans-serif;
}
.fmm-payout-bank-add__optional {
    border-top: 1px solid #F3F4F6;
    padding-top: 12px;
}
.fmm-payout-bank-add__optional summary {
    color: #374151;
    cursor: pointer;
    font: 500 12px/20px Inter, sans-serif;
}
.fmm-payout-bank-add__optional summary span { color: #9CA3AF; }
.fmm-payout-bank-add__optional-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding-top: 16px;
}
.fmm-payout-bank-add__optional .fmm-payout-bank-add__field > input,
.fmm-payout-bank-add__optional .fmm-payout-bank-add__field > select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #E5E7EB;
    border-radius: 9px;
    background: #fff;
    color: #374151;
    font: 400 12px/18px Inter, sans-serif;
}
.fmm-payout-bank-add__default {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 8px;
    color: #374151;
    font: 400 12px/18px Inter, sans-serif;
}
.fmm-payout-bank-add__default input { accent-color: #FBBF24; }
.fmm-payout-bank-add__error { margin: 0; }
.fmm-payout-bank-add__actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.fmm-payout-bank-add__actions .fmm-btn {
    min-height: 44px;
    justify-content: center;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.fmm-payout-bank-add__actions .fmm-btn--ghost { min-width: 84px; padding: 0 16px; }
.fmm-payout-bank-add__actions .fmm-btn--primary { flex: 1; color: #111827; }
@media (max-width: 620px) {
    .fmm-payout-bank-add__head { gap: 14px; padding: 22px 18px; }
    .fmm-payout-bank-add__form { gap: 16px; padding: 22px 18px; }
    .fmm-payout-bank-add__head-icon { width: 46px; height: 46px; flex-basis: 46px; }
    .fmm-payout-bank-add__optional-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The dark destination card on the Available Payout screen — a bank card, not
   a list row, because it is the one destination rather than a choice. */
.fmm-vbank--card {
    display: block;
    min-height: 314px;
    padding: 25px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(115deg, #1F2937 0%, #111827 100%);
    color: #F9FAFB;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 14px rgba(17, 24, 39, .14);
}
.fmm-vbank--card::before,
.fmm-vbank--card::after {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .045);
    content: "";
    pointer-events: none;
}
.fmm-vbank--card::before {
    width: 260px;
    height: 260px;
    top: -70px;
    right: -8px;
}
.fmm-vbank--card::after {
    width: 260px;
    height: 260px;
    left: -48px;
    bottom: -188px;
}
.fmm-vbank--card .fmm-vbank__details {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
}
.fmm-vbank--card .fmm-vbank__field { display: block; }
.fmm-vbank--card .fmm-vbank__field + .fmm-vbank__field { margin-top: 0; }
.fmm-vbank--card .fmm-vbank__field--holder { position: static; }
.fmm-vbank--card em {
    display: block;
    font-size: 12px;
    font-style: normal;
    color: #9CA3AF;
    margin-bottom: 8px;
}
.fmm-vbank--card b { display: block; font-size: 18px; font-weight: 700; color: #F9FAFB; }
.fmm-vbank--card .fmm-vbank__field--number b {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .16em;
    white-space: nowrap;
}
.fmm-vbank--card .fmm-vbank__field--holder b {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.fmm-vbank--card .fmm-vbank__ico {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 21px;
    width: auto;
    height: auto;
    background: transparent;
    color: #9CA3AF;
    border: 0;
}
.fmm-vbank--card .fmm-vbank__type {
    position: absolute;
    z-index: 1;
    right: 21px;
    bottom: 22px;
    padding: 5px 12px;
    border: 1px solid rgba(156, 163, 175, .48);
    border-radius: 6px;
    color: #F9FAFB;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}
@media (max-width: 620px) {
    .fmm-vbank--card { min-height: 294px; padding: 21px 18px; border-radius: 18px; }
    .fmm-vbank--card .fmm-vbank__details { min-height: 246px; }
    .fmm-vbank--card .fmm-vbank__field + .fmm-vbank__field { margin-top: 0; }
    .fmm-vbank--card em { font-size: 11px; margin-bottom: 5px; }
    .fmm-vbank--card b { font-size: 16px; }
    .fmm-vbank--card .fmm-vbank__field--number b { font-size: 16px; letter-spacing: .1em; }
    .fmm-vbank--card .fmm-vbank__field--holder b { font-size: 14px; }
    .fmm-vbank--card .fmm-vbank__ico { top: 22px; right: 20px; }
    .fmm-vbank--card .fmm-vbank__type { right: 20px; bottom: 22px; padding: 6px 12px; font-size: 13px; }
}

/* The "what happens next" rail beside a processing transfer. Dark, per the
   design, so it reads as guidance rather than another status panel. */
.fmm-vnote--dark {
    background: #111827;
    border-color: #111827;
    color: #E5E7EB;
}
.fmm-vnote--dark b { color: #FBBF24; }
.fmm-vnote--dark em { color: #D1D5DB; }

/* An active filter set on a toolbar select. */
.fmm-vselect.is-on {
    border-color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
    font-weight: 700;
}

/* ── Auth shell: create account, verify, complete profile, welcome ──────── */

/* Logo plus two help links. No search, no cart, no account menu — there is
   nowhere useful to send someone half-way through creating an account. */
.fmm-header--auth {
    background: var(--fmm-dark);
    border-bottom: 1px solid #3b3738;
    color: #fff;
}
.fmm-header--auth .fmm-header__bar { justify-content: space-between; }

.fmm-authnav { display: flex; gap: 24px; }
.fmm-authnav a {
    font-size: 13px;
    color: #d1d5db;
    text-decoration: none;
}
.fmm-authnav a:hover { color: #fff; }

.fmm-authfoot {
    padding: 26px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--fmm-faint);
    border-top: 1px solid var(--fmm-border);
}

/* Auth pages are short, so the footer used to stop wherever the card ended and
   leave a band of empty white beneath it. A full-height column with <main>
   taking up the slack pins it to the bottom of the screen — and still lets it
   sit below the fold normally when a step is tall enough to scroll. */
.fmm--authshell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.fmm--authshell > main { flex: 1 0 auto; }
.fmm--authshell > .fmm-authfoot { flex-shrink: 0; }

/* The centred card the whole flow lives in. */
.fmm-authpage {
    min-height: 62vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 80px;
    background: #FFF;
}
.fmm-authpage--welcome {
    align-items: center;
    min-height: calc(100vh - 150px);
    box-sizing: border-box;
    padding-top: 40px;
    padding-bottom: 40px;
}

.fmm-authcard {
    width: 100%;
    max-width: 400px;
    padding: 32px 30px;
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.fmm-authcard--wide { max-width: 520px; text-align: center; }
/* The reset panel replaces the login card in place, so it keeps that card's
   width — it wants only the centring, larger heading and larger icon from
   --wide, not the 520px. Both classes in the selector so it wins whatever the
   source order. The welcome screens stay wide: their buy/sell option rows need
   the room. */
.fmm-authcard--wide.fmm-authcard--formwidth { max-width: 400px; }
/* The code step centres its heading and destination line, unlike the form steps
   either side of it, which stay left-aligned against their fields. */
.fmm-authcard--centred { text-align: center; }

/* Centres ONLY the heading block. The profile step needs this: its title and
   lead sit centred, but the fields below keep their labels left-aligned against
   the inputs, so centring the whole card would drag those along too. */
.fmm-authcard--centrehead > h1,
.fmm-authcard--centrehead > .fmm-authcard__lead { text-align: center; }

.fmm-authcard h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 6px;
}
.fmm-authcard--wide h1 { font-size: 25px; margin-bottom: 10px; }

.fmm-authcard__lead {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fmm-muted);
    margin: 0 0 20px;
}
/* Login reads its lead in the body black rather than the muted grey. Scoped to
   a modifier so the register page keeps the quieter default. */
.fmm-authcard__lead--strong { color: var(--fmm-text); }

/* The soft circular glyph above a step's heading. */
.fmm-authicon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--fmm-yellow-soft);
    color: var(--fmm-yellow-dark);
}
.fmm-authcard--wide .fmm-authicon { width: 62px; height: 62px; }

/* The password-reset screens: a filled amber disc, a white glyph and two soft
   haloes that fade outwards. Deliberately its own modifier rather than a tweak
   to --ring: that one is the welcome tick, a tighter glow around a DARK glyph,
   and the two designs differ in every one of those three respects. The haloes
   are box-shadows, so they cost no layout space — hence the roomier bottom
   margin, which stops the outer ring crowding the heading. */
.fmm-authicon--glow {
    position: relative;
    background: var(--fmm-yellow);
    color: #FFF;
    margin-bottom: 26px;
    box-shadow: 0 0 0 12px rgba(251, 191, 36, .18),
                0 0 0 26px rgba(251, 191, 36, .08);
}

/* "Sent" tick over the envelope's corner. The white ring keeps it legible where
   it overlaps the amber disc. */
.fmm-authicon__badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #16A34A;
    color: #FFF;
    box-shadow: 0 0 0 3px #FFF;
}

/* The address the link went to. */
.fmm-authsent__email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 16px;
    padding: 14px 16px;
    border: 1px solid rgba(251, 191, 36, .45);
    border-radius: 10px;
    background: var(--fmm-yellow-soft);
    font-size: 15px;
    color: var(--fmm-text);
    /* A long address must wrap inside the box rather than widen the card. */
    word-break: break-word;
}
.fmm-authsent__email svg { flex: none; color: var(--fmm-muted); }

/* Back out of a step. Sits top-left above the heading, quiet rather than bold —
   `width: fit-content` keeps the click target on the words, and keeps the box
   at the left edge of a card whose text is otherwise centred. */
.fmm-authback {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 0 8px;
    padding: 6px 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--fmm-muted);
    cursor: pointer;
}
.fmm-authback:hover { color: var(--fmm-text); }

/* The same arrow treatment on the footer link. */
.fmm-authalt__back { display: inline-flex; align-items: center; gap: 6px; }

/* The success ring on the welcome screen. */
.fmm-authicon--ring {
    background: var(--fmm-yellow);
    color: #1F2937;
    box-shadow: 0 0 0 8px var(--fmm-yellow-soft), 0 0 0 16px rgba(251, 191, 36, .16);
}

/* "or" divider between the form and the social buttons. */
.fmm-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    color: var(--fmm-faint);
    font-size: 12px;
}
.fmm-author::before,
.fmm-author::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fmm-border);
}

/* The social rail. Every provider is one identical row, Google included —
   see .fmm-authsocial--google for why that one takes an overlay. */
.fmm-authsocials { display: grid; gap: 10px; }

.fmm-authsocial {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    background: #FFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fmm-ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fmm-authsocial > svg { flex: none; }
.fmm-authsocial:hover { background: var(--fmm-tint, #FAFAFA); border-color: #D5DBE3; }
.fmm-authsocial:disabled { opacity: .65; cursor: wait; }
.fmm-authsocial:focus-visible,
.fmm-authsocial:focus-within { outline: 2px solid var(--fmm-yellow); outline-offset: 2px; }

/* Google Identity Services renders its own button inside an iframe we cannot
   restyle — different height, type scale and radius from every other button on
   the card. So GIS is mounted invisibly ON TOP of our own row: the pixels are
   ours, the click is Google's. The mount clips, and clipping also clips hit
   testing, so the scaled-up iframe covers the row exactly and no further. */
.fmm-authsocial--google { padding: 11px 14px; }
.fmm-authsocial__gis {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    opacity: 0;
}
.fmm-authsocial__gis > div { transform: scale(1.3); transform-origin: center; }

/* Two providers side by side, as designed — but flex rather than two fixed
   columns, because the number of buttons is not fixed. Google is absent when no
   client id is configured and hides itself at runtime if its SDK fails, and a
   1fr 1fr grid would leave the survivor squashed into half the row with its
   label wrapped mid-word. Flexed children share whatever is there: two split it,
   one takes the width. The 190px basis wraps them to stacked on narrow screens,
   which is why there is no media query. */
.fmm-authsocials--pair { display: flex; flex-wrap: wrap; }
.fmm-authsocials--pair > * { flex: 1 1 120px; min-width: 0; }
.fmm-authsocials--pair .fmm-authsocial { justify-content: center; padding-left: 12px; padding-right: 12px; }

/* Remember me on the left, Forgot Password on the right. .fmm-check carries a
   14px top margin for its usual stacked context; the row owns the spacing here. */
.fmm-authrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.fmm-authrow .fmm-check { margin-top: 0; }

/* A white tick on the amber box. `accent-color` cannot do this — it colours the
   box and lets the browser choose the mark, which comes out dark on yellow — so
   the box is drawn by hand. Scoped to this row: .fmm-check is used elsewhere and
   those keep the native control. */
.fmm-authrow .fmm-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--fmm-border);
    border-radius: 4px;
    background: #fff;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.fmm-authrow .fmm-check input:checked {
    background: var(--fmm-yellow);
    border-color: var(--fmm-yellow);
}
.fmm-authrow .fmm-check input:checked::after {
    content: "";
    width: 9px;
    height: 5px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translateY(-1px);
}
.fmm-authrow .fmm-check input:focus-visible {
    outline: 2px solid var(--fmm-yellow);
    outline-offset: 2px;
}

.fmm-authnote { margin-top: 16px; font-size: 12.5px; line-height: 1.5; }

/* A legacy account is being introduced to the updated Marketplace experience.
   Keep this informational panel visually separate from validation errors. */
.fmm-auth-upgrade {
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 20px;
    padding: 13px 14px;
    border: 1px solid #D7E7FA;
    background: #F1F7FF;
    color: #28527D;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}
.fmm-auth-upgrade__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: #DCEBFC;
    color: #2563A6;
}
.fmm-authcard--resume-loading { min-height: 280px; justify-content: center; }
.fmm-authcard--resume-loading .fmm-authcard__lead { max-width: 290px; margin-left: auto; margin-right: auto; }
.fmm-auth-spinner {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid #F7D98A;
    border-top-color: #E5A900;
    border-radius: 50%;
    animation: fmm-auth-spin .8s linear infinite;
}

.fmm-authalt {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--fmm-muted);
}
.fmm-authalt a,
.fmm-authalt button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    /* Black and regular weight, as designed. Note `--fmm-ink` was never defined
       anywhere — that made the colour declaration invalid, so these links were
       quietly inheriting the muted grey above rather than the near-black they
       were meant to be. */
    font-weight: 400;
    color: var(--fmm-text);
    text-decoration: none;
    cursor: pointer;
}
.fmm-authalt a:hover,
.fmm-authalt button:hover { text-decoration: underline; }
/* The code screen stacks two of these: the primary one carries weight, the way
   back out sits quieter beneath it. */
.fmm-authalt--action { margin-top: 20px; }
.fmm-authalt--action button { font-weight: 600; }
.fmm-authalt--quiet { margin-top: 10px; }
.fmm-authalt--quiet button { color: var(--fmm-muted); }
/* Only the reset panel carries both: its rule sat tight under the submit button.
   The login footer (--rule alone) and the code screen (--quiet alone) keep their
   own spacing. */
.fmm-authalt--rule.fmm-authalt--quiet { margin-top: 28px; padding-top: 22px; }
/* Separated from the block above it by a rule, as designed. */
.fmm-authalt--rule { border-top: 1px solid var(--fmm-border); padding-top: 16px; }
.fmm-authalt--rule a { text-decoration: underline; }
.fmm-authalt button:disabled { color: var(--fmm-faint); cursor: default; text-decoration: none; }

.fmm-authfine {
    margin: 18px 0 0;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--fmm-faint);
}

/* The 6-digit code input — wide-tracked so the digits read as separate. */
.fmm-authcode {
      text-align: center;
      font-size: 24px !important;
      font-weight: 700;
      letter-spacing: .5em;
      text-indent: .5em;
  }

  .fmm-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 24px 0 6px; }
  .fmm-otp input { width: 100%; height: 48px; border: 1px solid var(--fmm-border); border-radius: 10px; background: #fff; color: var(--fmm-text); text-align: center; font-size: 18px; font-weight: 700; }
  .fmm-otp input:focus { outline: 2px solid var(--fmm-yellow); outline-offset: -1px; border-color: transparent; }

/* The generated store handle. */
.fmm-authhandle {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--fmm-yellow-soft);
}
.fmm-authhandle__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.fmm-authhandle__top span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #92400E;
}
.fmm-authhandle__top button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--fmm-ink);
    cursor: pointer;
}
.fmm-authhandle > b { display: block; font-size: 17px; font-weight: 800; }
.fmm-authhandle__note {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #78350F;
}
.fmm-authhandle__note.is-ok { color: #15803D; }
.fmm-authhandle__note.is-bad { color: #B91C1C; }

/* Shop or sell. */
.fmm-authchoose {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 22px 0 6px;
      text-align: left;
  }
  .fmm-authchoose--stack { grid-template-columns: 1fr; gap: 10px; }
  /* Icon | text | radio. The third column is the selection marker; without it
     the cards showed no indication of which one was picked. */
  .fmm-authchoose--stack button { display: grid; grid-template-columns: 38px 1fr 20px; column-gap: 12px; padding: 13px 14px; }
  /* Every cell is placed explicitly. Left to auto-flow, the description landed
     in the 20px radio column and wrapped one word per line. */
  .fmm-authchoose--stack .fmm-authchoose__ico { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .fmm-authchoose--stack b { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .fmm-authchoose--stack em { grid-column: 2; grid-row: 2; align-self: start; }
  .fmm-authchoose--stack .fmm-authchoose__pick { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.fmm-authchoose button {
    padding: 18px 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    background: #FFF;
    cursor: pointer;
    /* A <button> carries its own UA `text-align: center`, so the `text-align:
       left` on .fmm-authchoose never reached inside one — the title and
       description sat centred over a left-aligned icon. */
    text-align: left;
}

/* Selection marker. Hollow ring by default, filled with a tick once chosen. */
.fmm-authchoose__pick {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--fmm-border);
    border-radius: 50%;
    background: #FFF;
    transition: background .12s ease, border-color .12s ease;
}
.fmm-authchoose button.is-on .fmm-authchoose__pick {
    border-color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-dark)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 12px 12px no-repeat;
}
.fmm-authchoose button:hover { border-color: var(--fmm-faint); }
.fmm-authchoose button.is-on {
    border-color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}
.fmm-authchoose button:disabled { opacity: .7; cursor: default; }
.fmm-authchoose__ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--fmm-yellow-soft);
    color: var(--fmm-yellow-dark);
}
/* Continue sits under the cards, with the choice group giving the gap above. */
.fmm-authchoose + .fmm-btn--block,
.fmm-authchoose + .fmm-form__err + .fmm-btn--block { margin-top: 18px; }

/* Secondary to Continue, so it reads as the quiet way out rather than a second
   call to action — it was styled as bold amber, competing with the button. */
.fmm-authskip {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 6px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--fmm-muted);
    cursor: pointer;
}
.fmm-authskip:hover { color: var(--fmm-text); text-decoration: underline; }

.fmm-authchoose b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.fmm-authchoose em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fmm-muted);
}

@media (max-width: 640px) {
    .fmm-authpage { padding: 32px 14px 56px; }
    .fmm-authcard { padding: 26px 20px; }
    .fmm-authchoose { grid-template-columns: 1fr; }
    .fmm-authnav { gap: 14px; }
}

/* Private-listing confirmation: a lock rather than a tick — the point is that
   this listing is hidden, not that a task completed. */
.fmm-confirm__tick--lock { background: var(--fmm-yellow); color: #1F2937; }

/* A dropdown panel hung off a toolbar control (listing status filters). */
.fmm-vmenu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 214px;
    padding: 14px 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
}

/* ── Cart line trust chips + accepted-payment marks ─────────────────────── */

.fmm-line__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 2px;
}
.fmm-line__chips .fmm-chip { display: inline-flex; align-items: center; gap: 4px; }

/* The fee named inside the total, per the design. */
.fmm-sumrow--total em {
    display: block;
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    color: var(--fmm-faint);
    margin-top: 2px;
}

.fmm-paymarks {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.fmm-paymarks span {
    padding: 4px 8px;
    border: 1px solid var(--fmm-border);
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--fmm-muted);
    background: #FFF;
}

/* ── Checkout progress tracker (Details → Fulfilment → Review → Confirmation) ── */

.fmm-costeps {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin: 6px 0 30px;
    padding: 0;
}

.fmm-costeps li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 0 1 190px;
    min-width: 0;
}

/* The connector runs between the dots, so it starts and stops at their edges
   rather than under them. */
.fmm-costeps li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(-50% + 14px);
    width: calc(100% - 28px);
    height: 2px;
    background: var(--fmm-border);
}
.fmm-costeps li:first-child::before { display: none; }
.fmm-costeps li.is-done::before,
.fmm-costeps li.is-now::before { background: var(--fmm-yellow); }

.fmm-costeps__n {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 2px solid var(--fmm-border);
    background: #FFF;
    font-size: 12px;
    font-weight: 800;
    color: var(--fmm-faint);
}
.fmm-costeps li.is-done .fmm-costeps__n,
.fmm-costeps li.is-now .fmm-costeps__n {
    border-color: var(--fmm-yellow);
    background: var(--fmm-yellow);
    color: #1F2937;
}
/* Completed steps read as filled but quieter than the one you're on. */
.fmm-costeps li.is-done .fmm-costeps__n { background: var(--fmm-yellow); }

.fmm-costeps em {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: var(--fmm-faint);
    text-align: center;
}
.fmm-costeps li.is-now em { color: var(--fmm-ink); font-weight: 700; }
.fmm-costeps li.is-done em { color: var(--fmm-muted); }

@media (max-width: 640px) {
    .fmm-costeps { margin-bottom: 22px; }
    .fmm-costeps em { font-size: 10.5px; }
    .fmm-costeps li { flex-basis: 84px; }
}

/* A summary figure that isn't decided yet — visibly pending, not a number. */
.fmm-sumrow .is-pending {
    font-weight: 500;
    font-size: 12.5px;
    color: var(--fmm-faint);
}

/* Orders / Packages switch on the orders header. */
.fmm-toggle {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--fmm-border);
    border-radius: 9px;
    background: var(--fmm-tint, #FAFAFA);
}
.fmm-toggle > span,
.fmm-toggle > a {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fmm-muted);
    text-decoration: none;
}
.fmm-toggle > .is-on {
    background: var(--fmm-yellow);
    color: #1F2937;
    font-weight: 700;
}
.fmm-toggle > a:hover { color: var(--fmm-ink); }

/* ── Notifications filter rail ──────────────────────────────────────────── */

.fmm-nfilter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: start;
    position: sticky;
    top: 88px;
}
.fmm-nfilter__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fmm-faint);
    padding: 0 12px 8px;
}
.fmm-nfilter button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-muted);
    text-align: left;
    cursor: pointer;
}
.fmm-nfilter button:hover { background: var(--fmm-tint, #FAFAFA); color: var(--fmm-ink); }
.fmm-nfilter button.is-on {
    background: var(--fmm-yellow-soft);
    color: var(--fmm-ink);
    font-weight: 700;
}
.fmm-nfilter__icon { flex:0 0 auto; width:16px; height:16px; display:block; background:#64748B; -webkit-mask:var(--fmm-notification-icon) center / contain no-repeat; mask:var(--fmm-notification-icon) center / contain no-repeat; }
.fmm-nfilter button.is-on .fmm-nfilter__icon { background:#FBBF24; }
.fmm-nfilter button > span { flex:1; min-width:0; }
.fmm-nfilter button > span { text-align:left; }
.fmm-nfilter button > em { margin-left:auto; }
.fmm-nfilter button > .fmm-nfilter__icon { flex:0 0 16px; min-width:16px; }
.fmm-nfilter em {
    font-style: normal;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--fmm-yellow);
    font-size: 11px;
    font-weight: 800;
    color: #1F2937;
    text-align: center;
}
.fmm-nfilter__read {
    margin-top: 10px;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--fmm-faint) !important;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .fmm-nfilter { position: static; flex-direction: row; flex-wrap: wrap; }
    .fmm-nfilter__label { display: none; }
    .fmm-nfilter button { width: auto; }
}

/* ── Offer history timeline ─────────────────────────────────────────────── */

.fmm-ohist { list-style: none; margin: 0; padding: 0; }

.fmm-ohist li {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 0 0 20px 0;
}
.fmm-ohist li:last-child { padding-bottom: 0; }

/* The rail runs between dots, stopping at the last one. */
.fmm-ohist li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--fmm-border);
}
.fmm-ohist li:last-child::before { display: none; }

.fmm-ohist i {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid var(--fmm-border);
    background: #FFF;
}
.fmm-ohist li.is-now i {
    border-color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow);
}

.fmm-ohist b { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-ohist em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fmm-muted);
    margin-top: 2px;
}
.fmm-ohist span > span {
    display: block;
    font-size: 11.5px;
    color: var(--fmm-faint);
    margin-top: 4px;
}

/* ── Item screening ("Can FlymyMall Ship This?") ────────────────────────── */

.fmm-scr__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin: 0 0 18px;
    border-radius: 12px;
    border: 1px solid var(--fmm-border);
    background: var(--fmm-tint, #FAFAFA);
}
.fmm-scr__head b { display: block; font-size: 16px; font-weight: 800; }
.fmm-scr__head em {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--fmm-muted);
    margin-top: 2px;
}
.fmm-scr__head .fmm-chip { margin-left: auto; flex-shrink: 0; }

.fmm-scr__ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fmm-scr__head.is-green { border-color: #A7F3D0; background: #ECFDF5; }
.fmm-scr__head.is-green .fmm-scr__ico { background: #D1FAE5; color: #047857; }
.fmm-scr__head.is-amber { border-color: #FDE68A; background: var(--fmm-yellow-soft); }
.fmm-scr__head.is-amber .fmm-scr__ico { background: #FDE68A; color: #92400E; }
.fmm-scr__head.is-red { border-color: #FECACA; background: #FEF2F2; }
.fmm-scr__head.is-red .fmm-scr__ico { background: #FEE2E2; color: #B91C1C; }

.fmm-scr__label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fmm-faint);
    margin-bottom: 6px;
}
.fmm-scr__lead { font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.fmm-scr__detail {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--fmm-tint, #FAFAFA);
    font-size: 13px;
    line-height: 1.6;
    color: var(--fmm-muted);
}

/* One row of the prohibited / restricted list. */
.fmm-scr__row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fmm-border);
}
.fmm-scr__row:last-child { border-bottom: 0; }
.fmm-scr__row b { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-scr__row em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--fmm-faint);
    margin-top: 1px;
}
.fmm-scr__row span > span {
    display: block;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fmm-muted);
    margin-top: 4px;
}

.fmm-scr__how { margin: 0; padding-left: 18px; }
.fmm-scr__how li { font-size: 12.5px; line-height: 1.6; color: var(--fmm-muted); margin-bottom: 10px; }
.fmm-scr__how b { color: var(--fmm-ink); font-weight: 700; }

.fmm-scr__key { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.fmm-scr__key i {
    flex-shrink: 0;
    width: 10px; height: 10px;
    margin-top: 5px;
    border-radius: 50%;
}
.fmm-scr__key i.is-green { background: #10B981; }
.fmm-scr__key i.is-amber { background: var(--fmm-yellow); }
.fmm-scr__key i.is-red { background: #EF4444; }
.fmm-scr__key span { font-size: 12.5px; line-height: 1.55; color: var(--fmm-muted); }
.fmm-scr__key b { display: block; font-size: 13px; color: var(--fmm-ink); }

/* The hub address as one copyable block. */
.fmm-addrblock {
    margin: 8px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    background: var(--fmm-tint, #FAFAFA);
    font: inherit;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Account Health rows on the seller profile. */
.fmm-health {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fmm-border);
    color: inherit;
    text-decoration: none;
}
.fmm-health:last-child { border-bottom: 0; }
.fmm-health:hover b { text-decoration: underline; }
.fmm-health i {
    flex-shrink: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
}
.fmm-health i.is-ok { background: #10B981; }
.fmm-health i.is-warn { background: var(--fmm-yellow); }
.fmm-health b { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-health em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--fmm-muted);
    margin-top: 1px;
}

/* Drag-and-drop photo target on the Report an Issue screen. */
.fmm-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 18px;
    border: 1.5px dashed var(--fmm-border);
    border-radius: 12px;
    background: var(--fmm-tint, #FAFAFA);
    color: var(--fmm-muted);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.fmm-drop:hover { border-color: var(--fmm-yellow-dark); background: var(--fmm-yellow-soft); }

/* Main + aside, for pages with no left account rail.
   NOT fmm-wsplit — that is a THREE-column grid (rail / main / aside), so a page
   passing only two children puts its main content in the 190px rail slot. */
.fmm-2split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

@media (max-width: 960px) {
    .fmm-2split { grid-template-columns: minmax(0, 1fr); }
}

/* Notification feed and its dedicated filter rail. */
.fmm-nsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

@media (max-width: 900px) {
    .fmm-nsplit { gap: 16px; }
}

/* The count badge the rail used to show, on the chip instead. */
.fmm-nchips em {
    display: inline-block;
    margin-left: 6px;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-nchips .is-on em { background: rgba(255, 255, 255, .8); }

/* Address preview: each line on its own row. */
.fmm-addrprev { display: block; text-align: right; font-weight: 600; }
.fmm-addrprev > span { display: block; font-size: 12.5px; line-height: 1.5; }
.fmm-addrprev > span + span { font-weight: 500; color: var(--fmm-muted); }
.fmm-addrprev > span.is-ghost { color: var(--fmm-faint); font-style: italic; font-weight: 500; }

/* A social button whose provider is not wired server-side. Sits inline next to
   the label, not pushed to the edge, so the row stays optically centred. */
.fmm-authsocial__note {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--fmm-faint);
    background: var(--fmm-tint, #FAFAFA);
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   Loading skeletons

   Every skeleton here mirrors the DIMENSIONS of the real content it stands
   in for — the 84px order thumbnail, the 230px settings rail, the product
   card's 4:5 media block. That is the whole point: a skeleton that does not
   match what replaces it produces a visible jump on load, which is worse
   than a spinner because it looks like a bug.

   Pair each with the markup it shadows (partials/skeletons/*), never a
   generic block.
   ══════════════════════════════════════════════════════════════════════ */

.fmm-sk {
    background: linear-gradient(90deg,
        var(--fmm-bg-alt) 25%, #F1F3F5 37%, var(--fmm-bg-alt) 63%);
    background-size: 400% 100%;
    animation: fmm-sk-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes fmm-sk-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* A moving gradient behind every block is exactly the effect vestibular
   disorders react to. Hold a flat tone instead — the layout still
   communicates "content is coming". */
@media (prefers-reduced-motion: reduce) {
    .fmm-sk { animation: none; background: var(--fmm-bg-alt); }
}

/* Primitives ------------------------------------------------------------ */

.fmm-sk__line { height: 11px; }
.fmm-sk__line + .fmm-sk__line { margin-top: 8px; }
.fmm-sk__line--title { height: 15px; border-radius: 7px; }
.fmm-sk__line--lead  { height: 13px; }

.fmm-sk__w20 { width: 20%; }
.fmm-sk__w30 { width: 30%; }
.fmm-sk__w40 { width: 40%; }
.fmm-sk__w50 { width: 50%; }
.fmm-sk__w60 { width: 60%; }
.fmm-sk__w70 { width: 70%; }
.fmm-sk__w80 { width: 80%; }
.fmm-sk__w90 { width: 90%; }

.fmm-sk__chip   { height: 22px; width: 84px; border-radius: 999px; }
.fmm-sk__btn    { height: 34px; width: 118px; border-radius: 10px; }
.fmm-sk__avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.fmm-sk__input  { height: 42px; border-radius: 10px; width: 100%; }
.fmm-sk-snav {
    padding: 25px 17px;
    border: 1px solid var(--fmm-border);
    border-radius: 24px;
    background: #fff;
}
.fmm-sk-snav__label { padding: 10px 10px 8px; }
.fmm-sk-snav__label .fmm-sk__line { height: 9px; }
.fmm-sk-snav__row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 10px 12px; }
.fmm-sk-snav__icon { flex: none; width: 16px; height: 16px; border-radius: 5px; }
.fmm-sk-snav__logout { margin-top: 6px; }
.fmm-sk-snav__switch { width: 100%; height: 39px; margin-top: 12px; border-radius: 10px; }
.fmm-sk-snav__mobile { display: none; width: 110px; }
@media (max-width: 760px) {
    .fmm-sk-snav { min-height: 44px; padding: 16px 14px; border-radius: 10px; }
    .fmm-sk-snav__desktop { display: none; }
    .fmm-sk-snav__mobile { display: block; }
}
.fmm-sk-pcard { overflow: hidden; border: 1px solid var(--fmm-border); border-radius: 12px; background: #fff; }
.fmm-sk-bank-layout {
    grid-template-columns: var(--fmm-seller-settings-nav-width) minmax(0, 1fr) var(--fmm-payout-summary-width);
    gap: var(--fmm-settings-layout-gap);
}
@media (max-width: 1100px) {
    .fmm-sk-bank-layout { grid-template-columns: var(--fmm-seller-settings-nav-width) minmax(0, 1fr); }
    .fmm-sk-bank-layout > aside { grid-column: 2; }
}
@media (max-width: 900px) {
    .fmm-sk-bank-layout { grid-template-columns: var(--fmm-seller-settings-tablet-nav-width) minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .fmm-sk-bank-layout { grid-template-columns: minmax(0, 1fr); }
    .fmm-sk-bank-layout > aside { grid-column: auto; }
}
.fmm-sk-pcard__photo {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 32px;
    border-bottom: 1px solid #F3F4F6;
    background: rgba(255, 253, 249, .3);
}
.fmm-sk-pcard__avatar { width: 96px; height: 96px; border-radius: 50%; }
.fmm-sk-pcard__body { padding: 32px; }
.fmm-sk-pcard__field { margin-bottom: 16px; }
.fmm-sk-pcard__field > .fmm-sk__line { margin-bottom: 8px; }
.fmm-sk-pcard__field--spaced { margin-top: 16px; }
.fmm-sk-pcard__input { width: 100%; height: var(--fmm-field-h); border-radius: 10px; }
.fmm-sk-pcard__textarea { width: 100%; height: 117px; border-radius: 10px; }
.fmm-sk-pcard__note {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 93px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #FEF9C3;
    border-radius: 8px;
    background: #FEFCE8;
}
.fmm-sk-pcard__note .fmm-sk__line + .fmm-sk__line { margin-top: 8px; }
.fmm-sk-pcard__footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    min-height: 70px;
    margin-top: 24px;
    padding-top: 25px;
    border-top: 1px solid #F3F4F6;
}
.fmm-sk-side-rail > .fmm-sk__line--title { margin-bottom: 18px; }
.fmm-sk-side-rail__row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.fmm-sk-side-rail__dot { flex: none; width: 17px; height: 17px; border-radius: 50%; }
.fmm-sk-side-rail__row .fmm-sk__line + .fmm-sk__line { margin-top: 6px; }
.fmm-sk-side-rail__bar { width: 100%; height: 8px; margin: 16px 0 10px; border-radius: 999px; }
.fmm-sk-store-card { overflow: hidden; border: 1px solid var(--fmm-border); border-radius: var(--fmm-radius-lg); background: #fff; }
.fmm-sk-store-card__cover { width: 100%; height: 104px; border-radius: 0; }
.fmm-sk-store-card__identity { display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 0 24px; }
.fmm-sk-store-card__avatar { flex: none; width: 62px; height: 62px; margin-top: -28px; border: 3px solid #fff; border-radius: 50%; }
.fmm-sk-store-card__body { padding: 0 24px 24px; }
.fmm-sk-store-card__pair { margin-top: 18px; }
.fmm-sk-store-card__about { width: 100%; height: 140px; border-radius: 10px; }
.fmm-sk-store-card__specialties { margin-top: 18px; }
.fmm-sk-store-card__chips { display: flex; gap: 8px; margin: 12px 0 10px; }
.fmm-sk-store-card__specialty-input { width: 260px; max-width: 100%; height: 34px; border-radius: 8px; }
.fmm-sk-store-card__check { display: flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 24px; }
.fmm-sk-store-preview > .fmm-sk__line--title { margin: 4px 0 16px 4px; }
.fmm-sk-store-preview__card { overflow: hidden; padding: 32px 24px 0; border: 1px solid #F3F4F6; border-radius: 16px; background: #fff; }
.fmm-sk-store-preview__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.fmm-sk-store-preview__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; }
.fmm-sk-store-preview__head .fmm-sk__line + .fmm-sk__line { margin-top: 8px; }
.fmm-sk-store-preview__card > .fmm-sk__line + .fmm-sk__line { margin-top: 8px; }
.fmm-sk-store-preview__meta { display: flex; gap: 24px; margin-top: 24px; padding: 18px 0 20px; border-top: 1px solid #F3F4F6; }
.fmm-sk-store-preview__caption { height: 41px; margin: 0 -24px; border-radius: 0; }
.fmm-sk-store-preview__button { width: 100%; height: 44px; margin-top: 12px; border-radius: 10px; }
.fmm-sk-profile-hub__group { margin-bottom: 28px; }
.fmm-sk-profile-hub__title { height: 14px; margin: 3px 0 19px 8px; }
.fmm-sk-profile-hub__card { overflow: hidden; border: 1px solid var(--fmm-border); border-radius: 16px; background: #fff; }
.fmm-sk-profile-hub__row { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 20px; }
.fmm-sk-profile-hub__row + .fmm-sk-profile-hub__row { border-top: 1px solid #F3F4F6; }
.fmm-sk-profile-hub__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.fmm-sk-profile-hub__row .fmm-sk__line + .fmm-sk__line { width: 104px; margin-top: 8px; }
.fmm-sk-profile-hub__chevron { flex: none; width: 8px; height: 14px; border-radius: 4px; }
.fmm-sk-profile-health__card > .fmm-sk__line--title { margin-bottom: 16px; }
.fmm-sk-profile-health__row { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 8px 0; }
.fmm-sk-profile-health__dot { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; }
.fmm-sk-profile-health__row .fmm-sk__line + .fmm-sk__line { margin-top: 6px; }
.fmm-sk-profile-health__action { width: 100%; height: 52px; margin-top: 12px; border-radius: 12px; }
.fmm-sk-profile-health__card + .fmm-sk-profile-health__action { margin-top: 24px; }
.fmm-sk-profile-health__version { width: 126px; margin: 25px auto 0; }

/* Order / request card — mirrors .fmm-order exactly ---------------------- */

.fmm-sk-order { border: 1px solid var(--fmm-border); border-radius: 14px; overflow: hidden; }
.fmm-sk-order__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; background: var(--fmm-bg-alt);
    border-bottom: 1px solid var(--fmm-border);
}
.fmm-sk-order__body {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 16px; padding: 18px; align-items: start;
}
.fmm-sk-order__thumb { width: 84px; height: 84px; border-radius: 10px; }

/* Product card — mirrors .fmm-pc, including the media aspect ------------- */

.fmm-sk-pc { border: 1px solid var(--fmm-border); border-radius: 14px; overflow: hidden; }
/* 1.05, matching .fmm-pc__media exactly. Measured, not guessed — a 4/5 guess
   here rendered 298px tall against the real 227px, which is precisely the jump
   on load this whole file exists to prevent. */
.fmm-sk-pc__media { width: 100%; aspect-ratio: 1.05; border-radius: 0; }
.fmm-sk-pc__body { padding: 14px; }

/* Line row — mirrors .fmm-line ------------------------------------------ */

.fmm-sk-line {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--fmm-border);
}
.fmm-sk-line:last-child { border-bottom: 0; }
.fmm-sk-line__thumb { width: 56px; height: 56px; border-radius: 10px; }

/* Panel — a titled card of body copy ------------------------------------ */

.fmm-sk-panel {
    border: 1px solid var(--fmm-border); border-radius: 14px; padding: 20px;
}

/* Cart — mirrors .fmm-cart and its .fmm-line rows ------------------------ */

/* 360px, not the 320px .fmm-od uses. Borrowing the order-detail skeleton here
   slid the summary column 40px sideways on load. */
.fmm-sk-cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
/* 24px, not 17px: the real first column is a .fmm-line__pick holding a 17px
   checkbox, and the UA margin on the input resolves the track to 24px. Measured
   off a live row — at 17px everything to the right sat 7px too far left. */
.fmm-sk-cart__row {
    display: grid; grid-template-columns: 24px 104px minmax(0, 1fr) auto; gap: 18px;
    padding: 20px 0; border-bottom: 1px solid var(--fmm-border); align-items: start;
}
.fmm-sk-cart__row:first-child { border-top: 1px solid var(--fmm-border); }
.fmm-sk-cart__pick { width: 17px; height: 17px; border-radius: 4px; margin-top: 4px; }
.fmm-sk-cart__thumb { width: 104px; height: 104px; border-radius: 10px; }

/* Review card — mirrors the .fmm-panel a review renders into ------------- */

/* .fmm-sk-panel is 20px/14px, which suits the summary and form cards it was
   built for. A real .fmm-panel is 24px/--fmm-radius-lg, so a skeleton standing
   in for one needs those instead. */
.fmm-sk-panel--panel { padding: 24px; border-radius: var(--fmm-radius-lg); }

.fmm-sk-review__av { width: 40px; height: 40px; border-radius: 50%; flex: none; }

/* Both breakpoints below are copied from the real rules, not chosen: .fmm-cart
   collapses at 900px and .fmm-line at 560px. A skeleton that reflows at a
   different width than its content jumps on load. */
@media (max-width: 900px) { .fmm-sk-cart { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
    .fmm-sk-cart__row { grid-template-columns: 24px 76px minmax(0, 1fr); }
    .fmm-sk-cart__thumb { width: 76px; height: 76px; }
}

@media (max-width: 640px) {
    .fmm-sk-order__body { grid-template-columns: 64px minmax(0, 1fr); }
    .fmm-sk-order__thumb { width: 64px; height: 64px; }
    .fmm-sk-order__price { display: none; }
}

/* ── Password field: in-field reveal toggle + live rule checklist ──────────
   The toggle is a real <button> inside the field wrapper, not an overlay on
   the input, so it stays keyboard reachable and announces its own state. The
   input gets right padding equal to the button so long passwords never run
   underneath it. */

.fmm-pw { position: relative; }

.fmm-pw input { padding-right: 46px; }

.fmm-pw__eye {
    position: absolute; right: 6px; bottom: 6px;
    width: 34px; height: 34px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: none; cursor: pointer;
    color: var(--fmm-muted);
}
.fmm-pw__eye:hover { color: var(--fmm-text); background: rgba(0, 0, 0, 0.04); }
.fmm-pw__eye:focus-visible { outline: 2px solid var(--fmm-yellow); outline-offset: -2px; }

/* Rule list. Each row states a requirement and whether it is met yet —
   colour is never the only signal, the icon changes shape too, so it still
   reads for anyone who cannot distinguish the two colours. */
.fmm-pwrules { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fmm-pwcard .fmm-pwrules { padding: 21px; }
.fmm-pwrules li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--fmm-muted);
}
.fmm-pwrules li.is-met { color: #15803D; }
.fmm-pwrules__ico { flex-shrink: 0; width: 14px; height: 14px; }

@media (prefers-reduced-motion: no-preference) {
    .fmm-pwrules li { transition: color 120ms ease; }
}

/* Signup password checklist — same boxed list as the forgot/reset form. */
.fmm-pwreqs {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}
.fmm-pwreqs__title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}
.fmm-pwreqs ul { list-style: none; margin: 0; padding: 0; }
.fmm-pwreqs li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: #6b7280;
}
.fmm-pwreqs li.is-met { color: #10b981; }
.fmm-pwreqs li.is-unmet { color: #ef4444; }
.fmm-pwreqs li.is-neutral { color: #6b7280; }
.fmm-pwreqs__ico { flex-shrink: 0; width: 16px; height: 16px; display: block; }
.fmm-pwreqs li.is-neutral .fmm-pwreqs__ico { color: #d1d5db; }

@media (prefers-reduced-motion: no-preference) {
    .fmm-pwreqs li { transition: color 120ms ease; }
}

/* ── Header avatar carrying a photo ────────────────────────────────────────
   .fmm-avatar is a 36px grid cell holding a letter. When it holds an <img>
   instead, the image has to fill and crop rather than stretch, and the yellow
   ring should sit outside it. */

.fmm-avatar--photo { overflow: hidden; padding: 0; }
.fmm-avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Buttons inside a stacked card ─────────────────────────────────────────
   .fmm-scard is `display:flex; flex-direction:column`, so every child stretches
   to the full width by default — which turned the settings "Save" into a
   full-bleed bar it was never meant to be. Sizing to content is opt-in rather
   than a blanket override, because some cards do want a full-width action. */

.fmm-btn--inline { align-self: flex-start; width: auto; }

/* Cancelled-order card: reason + refund status.
   The API supplies both on the cancelled tab; the row keeps them on one line
   where there is space and stacks them when there is not. */
.fmm-order__reason {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 10px 0 0; padding: 10px 12px;
    background: var(--fmm-bg-alt); border-radius: 10px;
    font-size: 13px; color: var(--fmm-muted);
}
.fmm-order__reason b { color: var(--fmm-text); font-weight: 700; }

/* Cart: the reason a cart cannot be priced for delivery.
   Amber, not red — the cart is fine, it is the shipment quote that is blocked,
   and the buyer usually cannot fix it themselves (it is the seller's address). */
.fmm-cart__blocked {
    margin: 10px 0 0; padding: 10px 12px;
    background: var(--fmm-yellow-soft); border: 1px solid var(--fmm-yellow);
    border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: var(--fmm-text);
}

/* Seller header avatar carrying a photo.
   .fmm-vavatar is a 34px disc with a background colour; when it holds an <img>
   or an initial the child has to fill and centre inside it. */
.fmm-vavatar--photo { overflow: hidden; display: grid; place-items: center; padding: 0; }
.fmm-vavatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmm-vavatar--photo span { color: #fff; font-weight: 700; font-size: 13px; line-height: 1; }

/* ── Delivery step (packages) ────────────────────────────────────────────────

   One destination per package, one payment: a buyer can have two parcels
   delivered home and three held for collection, priced as a single total. The
   layout is a list of rows because that is the unit of choice — a batch-wide
   switch cannot express a split, which is the whole point of this screen.

   Wider than the default modal (420px) since each row carries a package, a
   mode toggle and a destination; it collapses to stacked rows on a phone. */
.fmm-delivery { max-width: 760px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; }

.fmm-delivery__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fmm-delivery__title { font-size: 19px; font-weight: 800; margin: 0; }
.fmm-delivery__x {
    border: 0; background: none; cursor: pointer; padding: 0 4px;
    font-size: 26px; line-height: 1; color: var(--fmm-muted);
}
.fmm-delivery__x:hover { color: var(--fmm-text); }

.fmm-delivery__bulk {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 16px 0 4px;
}

/* Amber, not red: home delivery being unreachable without an address on file is
   a missing prerequisite, not a failure — collection still works. */
.fmm-delivery__notice {
    margin: 14px 0 0; padding: 10px 12px;
    background: var(--fmm-yellow-soft); border: 1px solid var(--fmm-yellow);
    border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: var(--fmm-text);
}
.fmm-delivery__notice a { font-weight: 700; margin-left: 6px; }

/* The only scrolling region, so the total and the Pay button never leave the
   viewport however many packages are in the payment. */
.fmm-delivery__rows { margin: 14px 0 0; overflow-y: auto; flex: 1; min-height: 0; }

.fmm-delivery__row {
    display: grid; grid-template-columns: 1fr auto; gap: 10px 12px;
    align-items: center; padding: 12px 0;
    border-top: 1px solid var(--fmm-border);
}
.fmm-delivery__row:first-child { border-top: 0; }

.fmm-delivery__pkg { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fmm-delivery__pkg b {
    font-size: 13.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmm-delivery__pkg em { font-style: normal; font-size: 12px; color: var(--fmm-muted); }

/* Full width on its own line: address lines are long and truncating the place a
   parcel is going is the one thing this control must not do. */
.fmm-delivery__dest {
    grid-column: 1 / -1;
    width: 100%; height: 40px; padding: 8px 12px;
    border: 1px solid var(--fmm-border); border-radius: 9px;
    background: #fff; font-size: 13px; color: var(--fmm-text);
}
.fmm-delivery__dest:focus { outline: 2px solid var(--fmm-yellow); outline-offset: -1px; }

.fmm-delivery__split {
    margin: 12px 0 0; padding: 10px 12px;
    background: var(--fmm-bg-alt); border-radius: 10px;
    font-size: 12.5px; line-height: 1.55; color: var(--fmm-muted);
}
.fmm-delivery__split b { color: var(--fmm-text); font-weight: 700; }

.fmm-delivery__sum { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--fmm-border); }
.fmm-delivery__foot { display: flex; gap: 10px; margin: 18px 0 0; }
.fmm-delivery__foot .fmm-btn { flex: 1; justify-content: center; }

/* The segmented control also drives buttons here, not only the links it was
   written for on the orders header. */
.fmm-toggle > button {
    padding: 6px 16px; border: 0; background: none; cursor: pointer;
    border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--fmm-muted);
}
.fmm-toggle > button.is-on { background: var(--fmm-yellow); color: #1F2937; font-weight: 700; }
.fmm-toggle--sm > button { padding: 5px 12px; font-size: 12.5px; }

@media (max-width: 560px) {
    .fmm-delivery { padding: 20px; }
    .fmm-delivery__row { grid-template-columns: 1fr; }
    .fmm-delivery__row .fmm-toggle { justify-self: start; }
}

/* First-visit country confirmation. IP is only a suggestion; the choice is provisional. */
.fmm-country-gate{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px}
.fmm-country-gate__backdrop{position:absolute;inset:0;background:rgba(7,18,33,.64);backdrop-filter:blur(3px)}
.fmm-country-gate__dialog{position:relative;width:min(448px,100%);padding:34px;border:1px solid rgba(15,23,42,.07);border-radius:24px;background:linear-gradient(180deg,#fff 0,#fff 82%,#fbfcfd 100%);box-shadow:0 30px 90px rgba(2,12,27,.32);overflow:hidden}
.fmm-country-gate__dialog:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#07816d,#39b79f 55%,#ffc126)}
.fmm-country-gate__mark{display:grid;width:50px;height:50px;place-items:center;margin-bottom:18px;border:1px solid #ccebe5;border-radius:15px;background:linear-gradient(145deg,#f2fbf9,#e5f6f2);color:#07816d;box-shadow:0 8px 22px rgba(7,129,109,.12)}
.fmm-country-gate__eyebrow{margin-bottom:7px;color:#07816d;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.fmm-country-gate__dialog h2{margin:0 0 9px;color:#172033;font-size:1.65rem;line-height:1.2;letter-spacing:-.025em}
.fmm-country-gate__dialog>p{margin:0 0 20px;color:#647084;font-size:.96rem;line-height:1.6}
.fmm-country-gate__detected{display:flex;align-items:center;gap:8px;margin:-4px 0 18px;padding:10px 12px;border-radius:10px;background:#f5f8fa;color:#647084;font-size:.78rem;font-weight:600}
.fmm-country-gate__detected.is-conflict{background:#fff8e8;color:#785a13}
.fmm-country-gate__dialog .fmm-field>span{color:#273246;font-size:.8rem;font-weight:700}
.fmm-country-gate__selectwrap{position:relative;display:block}
.fmm-country-gate__flag{position:absolute;z-index:1;left:14px;top:50%;transform:translateY(-50%);font-size:1.25rem;line-height:1;pointer-events:none}
.fmm-country-gate__dialog select{width:100%;min-height:50px;padding-left:47px;border-color:#d8dee8;border-radius:11px;background-color:#fff;font-weight:600}
.fmm-country-gate__dialog select:focus{border-color:#07816d;box-shadow:0 0 0 3px rgba(7,129,109,.1)}
.fmm-country-gate__continue{min-height:51px;margin-top:16px;border-radius:11px;font-weight:800;box-shadow:0 8px 20px rgba(237,181,48,.2)}
.fmm-country-gate__privacy{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin-top:17px;color:#7a8495;font-size:.72rem;line-height:1.45;text-align:left}
.fmm-country-gate__privacy svg{flex:0 0 auto;margin-top:1px;color:#07816d}
@media(max-width:540px){.fmm-country-gate{align-items:end;padding:0}.fmm-country-gate__dialog{width:100%;padding:27px 22px calc(24px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}.fmm-country-gate__mark{width:46px;height:46px;margin-bottom:15px}.fmm-country-gate__dialog h2{font-size:1.45rem}}

/* --- product page: customer ratings & reviews ------------------------------ */

/* Score panel on the left, breakdown bars on the right. Collapses to one column
   on tablet so the bars keep a usable width rather than squeezing to a sliver. */
.fmm-rev {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 28px;
    align-items: start;
    padding: 24px;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    margin-top: 18px;
}
/* Contained, not a full-width band. At 1344px the bars ran most of the screen
   and the score sat marooned at the far left. */
.fmm-rev--card { max-width: 620px; }
.fmm-rev__score { text-align: center; }
.fmm-rev__score > b { display: block; font-size: 46px; font-weight: 800; line-height: 1; }
.fmm-rev__score em {
    display: block; font-style: normal;
    font-size: 12.5px; color: var(--fmm-muted); margin-top: 6px;
}
.fmm-rev__stars { display: inline-flex; gap: 2px; color: var(--fmm-yellow); margin-top: 8px; }
.fmm-rev__stars--sm { margin-top: 3px; }

.fmm-rev__bars { display: grid; gap: 8px; }
.fmm-rev__bar { display: grid; grid-template-columns: 52px 1fr 38px; align-items: center; gap: 12px; }
.fmm-rev__bar > span { font-size: 12.5px; color: var(--fmm-muted); }
.fmm-rev__bar > i { height: 8px; border-radius: 999px; background: var(--fmm-bg-alt); overflow: hidden; }
.fmm-rev__bar > i > b { display: block; height: 100%; border-radius: 999px; background: var(--fmm-yellow); }
.fmm-rev__bar > em {
    font-style: normal; font-size: 12px; color: var(--fmm-muted); text-align: right;
}

.fmm-rev__verified {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 14px 0 0; padding: 12px 16px;
    background: #E8F7F0; color: #15803D;
    border-radius: var(--fmm-radius);
    font-size: 13px; line-height: 1.5;
}
.fmm-rev__verified svg { flex-shrink: 0; margin-top: 1px; }
.fmm-rev__verified b { color: var(--fmm-text); }

/* Photo strips scroll rather than wrap, so a long set never pushes the reviews
   below the fold. */
.fmm-rev__photos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fmm-rev__photos::-webkit-scrollbar { display: none; }
.fmm-rev__photos img {
    width: 92px; height: 92px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover; border: 1px solid var(--fmm-border);
}
.fmm-rev__photos--sm { margin-top: 10px; }
.fmm-rev__photos--sm img { width: 64px; height: 64px; }

.fmm-rev__list { display: grid; gap: 16px; margin-top: 22px; }
.fmm-rev__item {
    display: flex; flex-direction: column; gap: 10px;
    padding: 33px; border: 1px solid #E5E7EB; border-radius: 16px;
    background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.fmm-rev__item .fmm-avatar { width: 48px; height: 48px; border: 0; background: linear-gradient(135deg, #A855F7, #EC4899); color: #fff; font-size: 18px; }
.fmm-rev__who { display: flex; align-items: flex-start; gap: 16px; }
.fmm-rev__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fmm-rev__name b { color: #000; font-size: 16px; font-weight: 600; line-height: 24px; }
.fmm-rev__when { margin-left: auto; color: #000; font-size: 12px; line-height: 16px; white-space: nowrap; }
.fmm-rev__meta { display: flex; align-items: center; gap: 8px; }
.fmm-rev__meta .fmm-rev__when { width: auto; margin: 0; }
.fmm-rev__when::before { content: '•'; margin-right: 8px; }
.fmm-rev__stars--sm { gap: 4px; margin-top: 0; }
.fmm-rev__star { display: grid; place-items: center; width: 15.75px; height: 14px; }
.fmm-rev__star img, .fmm-rev__star svg { display: block; width: 15.75px; height: 14px; }
.fmm-rev__title { display: block; color: #000; font-size: 18px; font-weight: 700; line-height: 28px; margin: 0; }
.fmm-rev__body { color: #000; font-size: 14px; line-height: 22.75px; margin: 0; }
.fmm-rev__acts { display: flex; gap: 16px; margin: 0; padding-top: 17px; border-top: 1px solid #E5E7EB; }
.fmm-rev__helpful {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: transparent;
    border-radius: 0; padding: 0;
    color: #000; font: inherit; font-size: 14px; font-weight: 400; line-height: 20px;
    cursor: pointer;
}
.fmm-rev__helpful:hover { color: var(--fmm-text); }
.fmm-rev__helpful img { width: 14px; height: 14px; }

@media (max-width: 860px) {
    .fmm-rev { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
    .fmm-rev__bar { grid-template-columns: 46px 1fr 34px; gap: 8px; }
    .fmm-rev__when { margin-left: 0; width: 100%; }
}


/* Verified-purchases note, inside the ratings card. */
.fmm-rev__verified {
    grid-column: 1 / -1;
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 0; padding: 12px 14px;
    background: #EFF4FF;
    border-radius: var(--fmm-radius);
    font-size: 13px; line-height: 1.45;
    color: #111827;
}
.fmm-rev__vico {
    display: grid; place-items: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: #DBE7FF; color: #111827;
}
.fmm-rev__vico img { width:14px; height:14px; display:block; filter: brightness(0); }
.fmm-rev__verified b { display: block; font-size: 13px; color: #111827; }
.fmm-rev__verified em {
    display: block; font-style: normal;
    font-size: 12px; color: #111827; margin-top: 2px;
}

/* Photo tile + the "+N more" overlay on the last one. */
.fmm-rev__photo { position: relative; flex-shrink: 0; display: block; }
.fmm-rev__photo > b {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(17, 24, 39, .62);
    color: #fff; font-size: 15px; font-weight: 800;
    border-radius: 10px; cursor: pointer;
}

/* Product review controls, matched to Figma node 2:1099. These are scoped
   because `.fmm-tabs` is also used for storefront, disputes and orders. */
.fmm-rev__filters {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 26px;
    padding-bottom: 25px;
    border-bottom: 1px solid #E5E7EB;
}
.fmm-rev__filter-chips {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.fmm-rev__filter-list {
    display: flex;
    gap: 8px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fmm-rev__filter-list::-webkit-scrollbar { display: none; }
.fmm-rev__filter-chip {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 0;
    border-radius: 9999px;
    background: #F3F4F6;
    box-shadow: none;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}
.fmm-rev__filter-chip:hover { color: #000; background: #E5E7EB; }
.fmm-rev__filter-chip.is-on,
.fmm-rev__filter-chip.is-on:hover {
    background: #000;
    color: #fff;
    box-shadow: none;
    font-weight: 500;
}
.fmm-rev__sort select {
    height: 40px; padding: 0 41px 0 17px;
    border: 1px solid #D1D5DB; border-radius: 8px;
    background: #fff var(--fmm-chevron) no-repeat right 12px center;
    color: #374151;
    font: inherit; font-size: 14px; font-weight: 500;
    appearance: none; cursor: pointer;
}
.fmm-rev__empty { margin-top: 24px; }

.fmm-rev__topics {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 16px;
}
.fmm-rev__topics > span { font-size: 13px; font-weight: 700; margin-right: 2px; }
.fmm-chip--pill {
    border: 1px solid var(--fmm-border);
    padding: 6px 13px; font-weight: 600; cursor: pointer;
}
.fmm-chip--pill:hover { border-color: var(--fmm-faint); }
.fmm-chip--pill.is-on {
    background: var(--fmm-dark); border-color: var(--fmm-dark); color: #fff;
}

@media (max-width: 720px) {
    .fmm-rev--card { max-width: none; }
    .fmm-rev__filters { align-items: stretch; }
    .fmm-rev__sort, .fmm-rev__sort select { width: 100%; }
}

/* Verified Purchase, pinned to the right of a review's header row. */
.fmm-rev__vp {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    background: #EBF5FF; color: #1D4ED8;
    border-radius: 9999px; padding: 4px 12px;
    font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
}
.fmm-rev__vp img { width: 12px; height: 12px; }
/* `when` no longer takes the auto margin — the chip does. */
.fmm-rev__who .fmm-rev__when { margin-left: 0; }

.fmm-rev__bought {
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 5px 0;
    border-top: 0;
    color: #000; font-size: 12px; line-height: 16px;
}
.fmm-rev__bought span { font-weight: 600; }
.fmm-rev__bought b { color: #000; font-weight: 400; margin-left: 0; }

.fmm-rev__acts { align-items: center; flex-wrap: wrap; }

/*
 * Helpful, once you have marked it.
 *
 * The count alone moving from (12) to (13) is easy to miss, so the control also
 * changes state: amber fill, filled thumb, and a short press animation. Clicking
 * again un-marks it, which is why this is a toggled state and not a one-way
 * "done" style.
 */
.fmm-rev__helpful { transition: background .14s ease, border-color .14s ease, color .14s ease; }
.fmm-rev__helpful:active { transform: scale(.96); }
.fmm-rev__helpful.is-on {
    color: #000;
}
.fmm-rev__helpful.is-on img { filter: sepia(1) saturate(3) hue-rotate(5deg); }
.fmm-rev__helpful.is-on span { font-weight: 700; }
/* One-shot pop on the transition into the marked state. */
@keyframes fmm-helpful-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.fmm-rev__helpful.is-on img { animation: fmm-helpful-pop .28s ease; }

/* Report reason list inside the dialog. */
.fmm-report__reasons { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.fmm-report__reasons .fmm-radio { margin: 0; }

.fmm-rev__report {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: none; padding: 0;
    color: #000; font: inherit; font-size: 14px; font-weight: 400; line-height: 20px;
    cursor: pointer;
}
.fmm-rev__report img { width: 12.25px; height: 14px; }
.fmm-rev__report:hover { color: var(--fmm-text); }
.fmm-rev__report:disabled { cursor: default; opacity: .6; }

/* Escrow marker, right-aligned on the actions row. */
.fmm-rev__prot {
    margin-left: auto;
    background: #DCFCE7; color: #15803D;
    border-radius: 9999px; padding: 4px 12px;
    font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
}

.fmm-rev__more { display:flex; margin-top:24px; padding-top:24px; border-top:1px solid #E5E7EB; }
.fmm-rev__more .fmm-btn { box-sizing:border-box; min-height:48px; padding:12px 32px; border-radius:12px; width:auto; height:auto; color:#fff; background:#000; border:1px solid #000; font-size:14px; line-height:24px; font-weight:600; }
.fmm-rev__more .fmm-btn:hover { color:#fff; background:#000; border-color:#000; }
.fmm-verified-purchase__icon { width:14px; height:14px; display:block; flex:0 0 auto; }

@media (max-width: 720px) {
    .fmm-rev__item { padding: 20px; }
    .fmm-rev__vp, .fmm-rev__prot { margin-left: 0; }
    .fmm-rev__more .fmm-btn { width: 100%; justify-content: center; }
}


/* Respect a reduced-motion preference — the pop is decorative. */
@media (prefers-reduced-motion: reduce) {
    .fmm-rev__helpful.is-on img { animation: none; }
    .fmm-rev__helpful:active { transform: none; }
}

/* "Calculated at checkout" in place of a figure that cannot exist yet. Styled
   as secondary so it never reads as an amount. */
.fmm-sumrow__pending { font-size: 12px; font-style: normal; color: var(--fmm-muted); }

/* --- checkout: items summary --------------------------------------------- */
.fmm-co__items { margin-bottom: 16px; }
.fmm-co__itemshead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 4px;
}
.fmm-co__itemshead h2 { font-size: 15px; font-weight: 800; margin: 0; }

.fmm-co__item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--fmm-border);
}
.fmm-co__thumb {
    flex: 0 0 52px; width: 52px; height: 52px;
    object-fit: cover; border-radius: 9px; background: #f1f1f1;
}
.fmm-co__itemtext { flex: 1 1 auto; min-width: 0; }
.fmm-co__itemtitle {
    margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fmm-co__itemmeta { margin: 2px 0 0; font-size: 12px; color: var(--fmm-muted); }
.fmm-co__itemright { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.fmm-co__qty { font-size: 12px; color: var(--fmm-muted); }

/* --- checkout: review-state sections -------------------------------------- */
/* Uppercase section label, no numbered circle — the design treats these as
   review blocks rather than sequential steps. */
.fmm-co__sechead {
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--fmm-muted); margin: 0 0 16px;
}

/* One chosen thing, summarised, with a way back to the picker. */
.fmm-co__row {
    display: flex; align-items: center; gap: 14px;
    /* Roomier than a list row: each of these is a whole decision (courier,
       address, card), and the design gives them air rather than stacking them
       tight against the section label. */
    padding: 16px 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
}
/*
 * margin-BOTTOM, not an adjacent-sibling rule.
 *
 * Each row is rendered by its own <x-if> template, and Alpine leaves that
 * <template> in the DOM and inserts the row after it — so consecutive rows are
 * never adjacent element siblings and `.fmm-co__row + .fmm-co__row` matched
 * nothing. The rows sat flush against each other at a 0px gap.
 */
.fmm-co__row { margin-bottom: 12px; }
.fmm-co__row:last-child { margin-bottom: 0; }
.fmm-co__rowtext b { line-height: 1.4; }
.fmm-co__rowtext span { line-height: 1.5; }

.fmm-co__rowico { flex: 0 0 auto; display: inline-flex; color: var(--fmm-muted); }
.fmm-co__rowtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fmm-co__rowtext b { font-size: 14px; font-weight: 700; }
.fmm-co__rowtext span { font-size: 12.5px; color: var(--fmm-muted); }

.fmm-co__change {
    flex: 0 0 auto;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700;
    color: var(--fmm-yellow, #f5b700);
}
.fmm-co__change:hover { text-decoration: underline; }

.fmm-co__cardmark {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 26px; padding: 0 7px;
    border-radius: 5px; background: #1a2a6b; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .04em;
}

/* The selected verification tier. Yellow rail + wash, per the design. */
.fmm-co__selected {
    /* The yellow rail now sits on the outer panel (.fmm-co__protect), so the
       inner card keeps a plain border — two stacked rails read as an error. */
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    background: rgba(245, 183, 0, .06);
    padding: 14px 16px;
}
.fmm-co__selectedhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fmm-co__selectedk {
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--fmm-muted);
}
.fmm-co__selectedprice { font-size: 14px; font-weight: 800; }
.fmm-co__selectedname { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; }
.fmm-co__selecteddesc { margin: 6px 0 0; font-size: 12.5px; color: var(--fmm-muted); line-height: 1.55; }
.fmm-co__selectedfoot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding-top: 11px;
    border-top: 1px solid rgba(245, 183, 0, .35);
    font-size: 12px; color: var(--fmm-muted);
}

.fmm-co__addcard {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 10px; padding: 11px;
    border: 1px dashed var(--fmm-border); border-radius: 10px;
    font-size: 13px; font-weight: 700; color: var(--fmm-text);
    text-decoration: none;
}
.fmm-co__addcard:hover { border-color: var(--fmm-faint); }

/* --- checkout: inline progress rail --------------------------------------- */
/*
 * Compact variant that sits beside the page heading. Same markup as the full
 * rail — label moves alongside the dot instead of under it, and the connectors
 * shrink to short ticks, so three steps fit in the space next to an h1.
 */
.fmm-page-head--steps { align-items: center; }

.fmm-costeps--inline {
    justify-content: flex-end;
    margin: 0;
    flex-wrap: wrap;
    gap: 0;
}
.fmm-costeps--inline li {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    padding-left: 34px;
}
.fmm-costeps--inline li:first-child { padding-left: 0; }
.fmm-costeps--inline li::before {
    top: 50%;
    left: 8px;
    width: 18px;
    transform: translateY(-50%);
}
.fmm-costeps--inline .fmm-costeps__n { width: 21px; height: 21px; font-size: 11px; border-width: 1.5px; }
.fmm-costeps--inline em { text-align: left; font-size: 12.5px; }
.fmm-costeps--inline li.is-now em { color: var(--fmm-text); font-weight: 700; }

@media (max-width: 760px) {
    /* Beside a 32px heading there is no room left — drop it under the title. */
    .fmm-page-head--steps { flex-wrap: wrap; align-items: flex-start; }
    .fmm-costeps--inline { justify-content: flex-start; }
}

/* Normal-case heading for the two blocks the design titles rather than labels. */
.fmm-co__sechead--lg {
    font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none;
    color: var(--fmm-text);
}

/* Protection panel carries the yellow rail on its outer edge in the design. */
.fmm-co__protect { border-left: 3px solid var(--fmm-yellow, #f5b700); }

/* Qty reads as a bordered pill, not loose text. */
.fmm-co__qty {
    align-self: flex-end;
    border: 1px solid var(--fmm-border);
    border-radius: 5px;
    padding: 1px 7px;
}

/* Chosen card: outlined in yellow with a filled tick, matching the design's
   selected-state treatment rather than a plain row. */
.fmm-co__row--card {
    border-color: var(--fmm-yellow, #f5b700);
    background: rgba(245, 183, 0, .05);
}

/* Review-order payment panel: the payment choice, card field, and secondary
   add-card action need a deliberate vertical rhythm instead of inheriting the
   roomier generic form spacing. */
.fmm-co__payment { padding: 20px; }
.fmm-co__payment .fmm-co__sechead--lg { margin-bottom: 14px; }
.fmm-co__payment .fmm-co__row--card { margin-bottom: 12px; }
.fmm-co__payment .fmm-payment-design { gap: 12px; }
.fmm-co__payment .fmm-payment-design > .fmm-radio { margin-top: 0; }
.fmm-co__payment .fmm-payment-design .fmm-radio {
    min-height: 48px;
    padding: 12px 14px;
}
.fmm-co__payment .fmm-payment-design .fmm-radio > span { gap: 3px; }
.fmm-co__payment .fmm-payment-design .fmm-line__meta { margin: 2px 0 5px; }
.fmm-co__payment .fmm-co__card-label {
    margin: 8px 0 10px;
    font-weight: 700;
    color: var(--fmm-text);
}
.fmm-co__payment #fmm-card-element { margin-top: 2px; }
.fmm-co__payment .fmm-check { margin-top: 10px; }
.fmm-co__payment .fmm-co__addcard { margin-top: 14px; }

/* A blocking stock refusal, with the way to resolve it attached. */
.fmm-co__stockerr {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #FCA5A5;
    border-radius: 10px;
    background: #FEF2F2;
}

/* --- empty cart ----------------------------------------------------------- */
/* The design frames the empty state in its own card rather than leaving it
   floating on the page, so it reads as the cart itself being empty. */
.fmm-emptycart {
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    padding: 56px 24px 44px;
    text-align: center;
}

.fmm-emptycart__icon {
    display: inline-grid; place-items: center;
    width: 68px; height: 68px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--fmm-yellow-soft, #FEF3C7);
    color: var(--fmm-yellow, #f5b700);
}

.fmm-emptycart__title { font-size: 19px; font-weight: 800; margin: 0 0 10px; }

.fmm-emptycart__body {
    max-width: 420px;
    margin: 0 auto;
    font-size: 14px; line-height: 1.6;
    color: var(--fmm-muted);
}

.fmm-emptycart__acts {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    margin-top: 24px;
}
.fmm-emptycart__acts .fmm-btn { border-radius: 999px; }

.fmm-emptycart__saved {
    display: inline-block;
    margin-top: 20px;
    font-size: 13px; color: var(--fmm-muted);
    text-decoration: underline;
}
.fmm-emptycart__saved:hover { color: var(--fmm-text); }

/* --- wishlist empty state ------------------------------------------------- */
/* The wishlist is a shopping destination in the reference, not an account
   sub-page: it uses the full container and continues with discovery rails. */
.fmm-wishlist__content { min-width: 0; }
.fmm-wishlist__page-head--saved { padding-left: 194px; margin-bottom: 18px; }
.fmm-sk-wishlist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; min-height: 61px; padding-left: 194px; margin-bottom: 18px; }
.fmm-sk-wishlist__head .fmm-sk__line + .fmm-sk__line { margin-top: 9px; }
.fmm-sk-wishlist__layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
.fmm-sk-wishlist__filters { padding: 2px 14px 2px 0; }
.fmm-sk-wishlist__filter-group + .fmm-sk-wishlist__filter-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fmm-border); }
.fmm-sk-wishlist__filter-row { display: flex; align-items: center; gap: 7px; height: 17px; margin-top: 5px; }
.fmm-sk-wishlist__filter-row span { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.fmm-sk-wishlist__filter-row i { width: 72px; height: 9px; }
.fmm-sk-wishlist__toolbar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; margin-bottom: 20px; border: 1px solid var(--fmm-border); border-radius: 10px; }
.fmm-sk-wishlist__toolbar span { width: 62px; height: 12px; }.fmm-sk-wishlist__toolbar i { width: 46px; height: 12px; }.fmm-sk-wishlist__toolbar i:last-child { width: 118px; height: 30px; margin-left: auto; }
.fmm-sk-wishlist__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fmm-wishlist__move { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0; border: 0; background: transparent; color: var(--fmm-yellow); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.fmm-wishlist__move:hover { color: var(--fmm-yellow-dark); }
.fmm-wishlist__move:disabled { opacity: .55; cursor: not-allowed; }
.fmm-wishlist__share { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--fmm-border); border-radius: 50%; background: #fff; color: var(--fmm-muted); cursor: pointer; }
.fmm-wishlist__share:hover { color: var(--fmm-text); border-color: var(--fmm-muted); }
.fmm-wishlist .fmm-heart[aria-pressed="true"], .fmm-wishlist .fmm-heart:hover { color: var(--fmm-yellow); }
.fmm-wishlist__empty {
    min-height: 302px;
    padding: 46px 24px 38px;
    text-align: center;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    background: #fff;
}

.fmm-nrail { display: grid; align-content: start; gap: 5px; padding: 14px 10px; border: 1px solid var(--fmm-border); border-radius: 8px; background: #fff; box-shadow: var(--fmm-shadow); }
.fmm-nrail__label { padding: 0 8px 8px; color: var(--fmm-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fmm-nrail button { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 10px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fmm-text); text-align: left; font-size: 11.5px; cursor: pointer; }
.fmm-nrail button:hover, .fmm-nrail button.is-on { background: #FFF7D6; }
.fmm-nrail__ico { display: grid; place-items: center; color: var(--fmm-muted); text-align: center; }
.fmm-nrail__ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmm-nrail button.is-on .fmm-nrail__ico { color: var(--fmm-yellow-dark); }
.fmm-nrail button em { min-width: 17px; padding: 2px 5px; border-radius: 999px; background: var(--fmm-bg-alt); color: var(--fmm-muted); font-size: 9px; font-style: normal; font-weight: 800; text-align: center; }
.fmm-nrail button.is-on em { background: #FDE68A; color: #9A6700; }

.fmm-notifications-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; }
.fmm-notifications-layout .fmm-nrail { gap: 8px; padding: 22px 20px; border-radius: 12px; min-height: 420px; }
.fmm-notifications-layout .fmm-nrail__label { padding: 0 14px 16px; font-size: 14px; letter-spacing: .08em; }
.fmm-notifications-layout .fmm-nrail button { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; padding: 14px; border-radius: 11px; font-size: 20px; font-weight: 700; }
.fmm-notifications-layout .fmm-nrail__ico svg { width: 22px; height: 22px; stroke-width: 1.8; }
.fmm-notifications-layout .fmm-nrail button em { min-width: 28px; padding: 5px 8px; font-size: 14px; }
.fmm-wishlist__empty-icon {
    width: 70px; height: 70px;
    display: grid; place-items: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    color: var(--fmm-yellow);
    background: var(--fmm-yellow-soft);
}
.fmm-wishlist__empty h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; }
.fmm-wishlist__empty p { margin: 0; color: var(--fmm-muted); font-size: 14px; line-height: 1.65; }
.fmm-wishlist__empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fmm-wishlist__empty-actions .fmm-btn { border-radius: 999px; }
.fmm-wishlist__saved { display: inline-block; margin-top: 18px; color: var(--fmm-muted); font-size: 13px; text-decoration: underline; }
.fmm-wishlist__saved:hover { color: var(--fmm-text); }
.fmm-wishlist__discovery { margin-top: 46px; }
.fmm-wishlist__rail + .fmm-wishlist__rail { margin-top: 42px; }
.fmm-wishlist__rail { scroll-margin-top: 24px; }

/* Filled wishlist — filters sit beside the saved catalogue instead of bringing
   back the account-navigation sidebar. */
.fmm-wishlist__saved-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: start; }
.fmm-wishlist__filters { padding: 2px 14px 2px 0; }
.fmm-wishlist__saved-layout .fmm-wishlist__filters { margin-top: -74px; }
.fmm-wishlist__filter-group + .fmm-wishlist__filter-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fmm-border); }
.fmm-wishlist__filter-group h2 { margin: 0 0 7px; color: var(--fmm-muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.fmm-wishlist__filter-group label { display: flex; align-items: center; gap: 7px; padding: 1px 0; color: var(--fmm-text); font-size: 11px; line-height: 1.35; cursor: pointer; }
.fmm-wishlist__filter-group input, .fmm-wishlist__toolbar input, .fmm-wishlist__select input { accent-color: var(--fmm-yellow); }
.fmm-wishlist__conditions { display: flex; flex-wrap: wrap; gap: 6px; }
.fmm-wishlist__conditions button { padding: 4px 9px; border: 1px solid var(--fmm-border); border-radius: 999px; background: #fff; color: var(--fmm-muted); font-size: 10px; line-height: 1.2; cursor: pointer; }
.fmm-wishlist__conditions button.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); color: var(--fmm-text); }
.fmm-wishlist__toolbar { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 0 12px; margin-bottom: 20px; border: 1px solid var(--fmm-border); border-radius: 10px; }
.fmm-wishlist__toolbar label, .fmm-wishlist__toolbar button { font-size: 12px; color: var(--fmm-muted); }
.fmm-wishlist__toolbar button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 0; cursor: pointer; }
.fmm-wishlist__toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.fmm-wishlist__toolbar select { margin-left: auto; min-height: 30px; padding: 0 10px; border: 1px solid var(--fmm-border); border-radius: 7px; background: #fff; color: var(--fmm-text); font: inherit; font-size: 12px; }
.fmm-wishlist__views { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--fmm-border); border-radius: 7px; }
.fmm-wishlist__views button { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border-radius: 4px; color: var(--fmm-muted); }
.fmm-wishlist__views button.is-on { color: var(--fmm-text); background: var(--fmm-bg-alt); }
.fmm-wishlist__products .fmm-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.fmm-wishlist__products .fmm-grid.fmm-wishlist__grid--list { grid-template-columns: 1fr; }
.fmm-wishlist__grid--list .fmm-pc { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.fmm-wishlist__grid--list .fmm-pc__media { min-height: 180px; }
.fmm-wishlist__grid--list .fmm-pc__body { justify-content: center; }
.fmm-wishlist__products .fmm-pc__body { gap: 8px; }
.fmm-wishlist__products .fmm-pc__actions { margin-top: 4px; }
.fmm-wishlist__no-match { margin: 28px 0; color: var(--fmm-muted); text-align: center; }
.fmm-wishlist__compare-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .42); }
.fmm-wishlist__compare { width: min(920px, 100%); max-height: min(760px, 92vh); overflow: auto; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 24px 64px rgba(15, 23, 42, .22); }
.fmm-wishlist__compare-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.fmm-wishlist__compare-head h2 { margin: 0 0 5px; font-size: 20px; font-weight: 800; }
.fmm-wishlist__compare-head p { margin: 0; color: var(--fmm-muted); font-size: 13px; }
.fmm-wishlist__compare-head button { width: 32px; height: 32px; border: 1px solid var(--fmm-border); border-radius: 50%; background: #fff; color: var(--fmm-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.fmm-wishlist__compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.fmm-wishlist__compare-grid article { overflow: hidden; border: 1px solid var(--fmm-border); border-radius: 12px; }
.fmm-wishlist__compare-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--fmm-bg-alt); }
.fmm-wishlist__compare-grid h3 { min-height: 42px; margin: 14px 14px 10px; font-size: 14px; line-height: 1.45; }
.fmm-wishlist__compare-grid dl { margin: 0; padding: 0 14px 14px; }
.fmm-wishlist__compare-grid dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--fmm-border); font-size: 12px; }
.fmm-wishlist__compare-grid dt { color: var(--fmm-muted); }.fmm-wishlist__compare-grid dd { margin: 0; font-weight: 700; text-align: right; }

@media (max-width: 800px) {
    .fmm-wishlist__page-head--saved { padding-left: 0; }
    .fmm-sk-wishlist__head { padding-left: 0; }
    .fmm-sk-wishlist__layout { grid-template-columns: 1fr; }
    .fmm-sk-wishlist__filters { display: none; }
    .fmm-sk-wishlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmm-wishlist__saved-layout { grid-template-columns: 1fr; }
    .fmm-wishlist__saved-layout .fmm-wishlist__filters { margin-top: 0; }
    .fmm-wishlist__filters { display: flex; gap: 18px; overflow-x: auto; padding: 0 0 12px; }
    .fmm-wishlist__filter-group { min-width: 155px; }
    .fmm-wishlist__filter-group + .fmm-wishlist__filter-group { margin: 0; padding: 0 0 0 18px; border-top: 0; border-left: 1px solid var(--fmm-border); }
}

@media (max-width: 640px) {
    .fmm-wishlist__empty { min-height: 0; padding: 38px 18px 30px; }
    .fmm-wishlist__empty-icon { width: 62px; height: 62px; }
    .fmm-wishlist__toolbar { gap: 10px; flex-wrap: wrap; padding: 8px 10px; }
    .fmm-wishlist__toolbar select { margin-left: 0; }
    .fmm-sk-wishlist__grid { grid-template-columns: 1fr; }
}

/* --- storefront: products toolbar ---------------------------------------- */
.fmm-storesearch {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    height: 38px;
    border: 1px solid var(--fmm-border);
    border-radius: 9px;
    background: #fff;
    color: var(--fmm-muted);
}
.fmm-storesearch:focus-within { border-color: var(--fmm-faint); }
.fmm-storesearch input {
    border: 0; outline: 0; background: none;
    font: inherit; font-size: 13px; color: var(--fmm-text);
    width: 150px; min-width: 0;
}
.fmm-storesearch input::placeholder { color: var(--fmm-faint); }

.fmm-viewtoggle {
    display: flex; align-items: center; gap: 2px;
    padding: 3px;
    border: 1px solid var(--fmm-border);
    border-radius: 9px;
}
.fmm-viewtoggle__btn {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 7px;
    color: var(--fmm-muted);
}
.fmm-viewtoggle__btn:hover { color: var(--fmm-text); }
.fmm-viewtoggle__btn.is-on { background: var(--fmm-bg-alt, #f4f4f5); color: var(--fmm-text); }

@media (max-width: 760px) {
    /* The toolbar cannot hold three controls beside a tab strip on a phone. */
    .fmm-tabs__tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
    .fmm-storesearch { flex: 1 1 auto; }
    .fmm-storesearch input { width: 100%; }
}

/* Storefront list view — one card per row, media on the left.
   Targets .fmm-pcard, which is what the storefront grid actually renders; the
   .fmm-pc rules first written here matched nothing, so the toggle highlighted
   without changing the layout. Same markup as the grid, reflowed, so the two
   views cannot drift apart. */
.fmm-grid--list { grid-template-columns: 1fr; gap: 12px; }

.fmm-grid--list .fmm-pcard { flex-direction: row; align-items: stretch; }

.fmm-grid--list .fmm-pcard__media {
    flex: 0 0 200px;
    width: 200px;
    aspect-ratio: auto;
}

.fmm-grid--list .fmm-pcard__body {
    flex: 1 1 auto;
    justify-content: center;
    padding: 18px 20px;
}

.fmm-grid--list .fmm-pcard__title { min-height: 0; }

@media (max-width: 620px) {
    /* Too narrow for a side-by-side row — fall back to the stacked card. */
    .fmm-grid--list .fmm-pcard { flex-direction: column; }
    .fmm-grid--list .fmm-pcard__media { flex-basis: auto; width: 100%; aspect-ratio: 1; }
}

/* --- storefront: About tab ------------------------------------------------ */
.fmm-about { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }

.fmm-about__h { font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.fmm-about__p { font-size: 14px; line-height: 1.7; color: var(--fmm-muted); margin: 0 0 14px; }

.fmm-about__k {
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--fmm-muted); margin: 20px 0 10px;
}

.fmm-about__side { display: grid; gap: 18px; }

/* Two-up fact tiles, centred like the design. */
.fmm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fmm-fact {
    display: grid; align-content: center; justify-items: center; gap: 9px;
    min-height: 136px;
    padding: 22px 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    text-align: center;
}
.fmm-fact__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #FFF8E3; color: var(--fmm-yellow, #f5b700); }
.fmm-fact__ico img { width: 20px; height: 20px; object-fit: contain; }
.fmm-fact__k {
    font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
    color: var(--fmm-muted);
}
.fmm-fact__v { font-size: 13.5px; font-weight: 800; line-height: 1.35; }

.fmm-about__rating { padding: 24px 28px; border-radius: 14px; }
.fmm-about__ratingrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fmm-about__ratingrow b { font-size: 32px; font-weight: 800; line-height: 1; }
.fmm-about__outof { font-size: 15px; color: var(--fmm-muted); }
.fmm-about__ratingrow .fmm-stars { margin-left: auto; font-size: 28px; line-height: 1; letter-spacing: 2px; color: var(--fmm-yellow, #f5b700); }
.fmm-about__ratingrow .fmm-stars > span:not(.fmm-stars__assets) { display: none; }
.fmm-stars__assets { display: inline-flex; align-items: center; gap: 5px; }
.fmm-stars__assets img { width: 27px; height: 27px; object-fit: contain; }

/* Trust grid — two columns of icon + copy.
   Named .fmm-strust, not .fmm-trust: that class already belongs to the hero's
   floating cards, which are `position: absolute`. Reusing it pulled these out
   of flow and stacked them on top of each other. */
.fmm-trustgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fmm-strust {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
}
.fmm-strust__ico {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--fmm-bg-alt, #f4f4f5);
    color: var(--fmm-text);
}
.fmm-strust__ico img { width: 20px; height: 20px; object-fit: contain; }
.fmm-strust__ico--verified { background: #ECFDF5; color: #10B981; }
.fmm-strust__ico--response { background: #F5F0FF; color: #8B3DFF; }
.fmm-strust__ico--inspection { background: #FFF7D6; color: #EFB000; }
.fmm-strust__ico--payment { background: #EAF2FF; color: #2563EB; }
.fmm-strust b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.fmm-strust > div > span { font-size: 12.5px; line-height: 1.55; color: var(--fmm-muted); }

@media (max-width: 900px) {
    .fmm-about { grid-template-columns: 1fr; }
    .fmm-trustgrid { grid-template-columns: 1fr; }
}

/* --- storefront: Reviews tab ---------------------------------------------- */
.fmm-srev { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.fmm-srev__main { min-width: 0; }

.fmm-srev__score { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: center; }
.fmm-srev__big { text-align: center; }
.fmm-srev__big b { display: block; font-size: 40px; font-weight: 800; line-height: 1; }
.fmm-srev__stars { display: inline-flex; align-items: center; gap: 4px; margin: 7px 0 5px; }
.fmm-srev__stars img { width: 14px; height: 14px; object-fit: contain; }
.fmm-srev__big em { display: block; font-style: normal; font-size: 12.5px; color: var(--fmm-muted); }

.fmm-srev__bars { display: grid; gap: 7px; }
.fmm-srev__bar { display: grid; grid-template-columns: 12px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.fmm-srev__star { font-size: 12px; color: var(--fmm-muted); text-align: right; }
.fmm-srev__track { height: 7px; border-radius: 99px; background: var(--fmm-bg-alt, #f1f1f1); overflow: hidden; }
.fmm-srev__track > span { display: block; height: 100%; border-radius: 99px; background: var(--fmm-yellow, #f5b700); }
.fmm-srev__n { font-size: 12px; color: var(--fmm-muted); }

.fmm-srev__topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.fmm-srev__topics span { padding: 6px 12px; border: 1px solid #F7D98B; border-radius: 999px; background: #FFFDF6; color: var(--fmm-text); font-size: 11px; }
.fmm-srev__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; margin: 18px 0; border-top: 1px solid var(--fmm-border); }
.fmm-srev__photos { display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid var(--fmm-border); border-radius: 999px; color: var(--fmm-muted); font-size: 12px; }
.fmm-srev__sort { display: inline-flex; align-items: center; gap: 8px; color: var(--fmm-muted); font-size: 12px; white-space: nowrap; }
.fmm-srev__sort select { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--fmm-border); border-radius: 7px; background: #fff; color: var(--fmm-text); font: inherit; font-size: 12px; }

.fmm-srevcard { margin-bottom: 12px; }
.fmm-srevcard__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.fmm-srevcard__head b { font-size: 14px; font-weight: 700; }
.fmm-srevcard__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.fmm-srevcard__avatar--empty { background: var(--fmm-bg-alt, #f1f1f1); }
.fmm-srevcard__author { display: grid; gap: 3px; min-width: 0; }
.fmm-srevcard__name, .fmm-srevcard__ratingline { display: flex; align-items: center; gap: 6px; }
.fmm-srevcard__stars { display: inline-flex; align-items: center; gap: 2px; height: 13px; }
.fmm-srevcard__stars img { width: 13px; height: 13px; object-fit: contain; }
.fmm-srevcard__when { font-size: 12px; color: var(--fmm-faint); }
.fmm-srevcard__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #BBF7D0;
    border-radius: 7px;
    background: #ECFDF5;
    color: #07864C;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}
.fmm-srevcard__verified img { width: 11px; height: 11px; object-fit: contain; }
.fmm-srevcard__title { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.fmm-srevcard__body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--fmm-muted); }
.fmm-srevcard__foot { display: flex; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fmm-border); }
.fmm-srevcard__foot button { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; background: transparent; color: var(--fmm-muted); font-size: 12px; cursor: pointer; }
.fmm-srevcard__foot button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* The write-a-review invitation, tinted as in the design. */
.fmm-srev__cta {
    padding: 20px;
    border-radius: 14px;
    background: var(--fmm-yellow-soft, #FEF6E0);
    text-align: left;
}
.fmm-srev__ctaico {
    display: grid; place-items: center;
    width: 34px; height: 34px; margin-bottom: 12px;
    border-radius: 9px; background: #fff; color: var(--fmm-yellow, #f5b700);
}
.fmm-srev__ctaico img { width: 17px; height: 17px; object-fit: contain; }
.fmm-srev__cta b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.fmm-srev__cta em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.55; color: var(--fmm-muted); margin-bottom: 16px; }

/* --- storefront: Policies tab --------------------------------------------- */
.fmm-pol { width: 100%; max-width: 1080px; }
.fmm-pol__lead { margin: 0 0 16px; font-size: 13.5px; color: var(--fmm-muted); }

.fmm-pol__item { border: 1px solid var(--fmm-border); border-radius: 12px; margin-bottom: 10px; }
.fmm-pol__item[open] { border-color: var(--fmm-faint); }

.fmm-pol__sum {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 15px 16px;
    cursor: pointer;
    list-style: none;
}
.fmm-pol__sum::-webkit-details-marker { display: none; }

.fmm-pol__ico {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--fmm-yellow-soft, #FEF6E0);
    color: var(--fmm-yellow, #f5b700);
}
.fmm-pol__text { flex: 1 1 auto; min-width: 0; }
.fmm-pol__text b { display: block; font-size: 14px; font-weight: 700; }
.fmm-pol__text em { display: block; font-style: normal; font-size: 12.5px; color: var(--fmm-muted); margin-top: 2px; }

.fmm-pol__chev { flex: 0 0 auto; width: 24px; height: 24px; padding: 5px; margin-top: 0; border-radius: 50%; background: #F3F4F6; color: var(--fmm-muted); transition: transform .15s ease; }
.fmm-pol__item[open] .fmm-pol__chev { transform: rotate(180deg); }

.fmm-pol__body {
    margin: 0 16px;
    padding: 13px 0 16px;
    border-top: 1px solid var(--fmm-border);
    font-size: 13px; line-height: 1.65; color: var(--fmm-text);
    white-space: pre-line;
}
.fmm-pol__hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; padding: 8px 10px; border-radius: 7px; background: #FFF7D6; color: #C58A00; font-size: 11px; line-height: 1.45; }
.fmm-pol__hint span { display: inline-grid; flex: 0 0 auto; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #F5B700; color: #fff; font-size: 9px; font-weight: 800; }

.fmm-pol__note {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 16px; padding: 14px 16px;
    border: 1px solid #FDE68A; border-radius: 12px;
    background: #FFFBEB;
}
.fmm-pol__noteico { flex: 0 0 auto; color: #B45309; margin-top: 1px; }
.fmm-pol__note b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.fmm-pol__note span { font-size: 12.5px; line-height: 1.6; color: #7C5E10; }

@media (max-width: 900px) {
    .fmm-srev { grid-template-columns: 1fr; }
    .fmm-srev__score { grid-template-columns: 1fr; gap: 16px; }
}

/* Protect-purchase page heading — the design sets it larger than a normal
   page title and lets it run to two lines. */
.fmm-protect__h { font-size: 30px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 8px; }
.fmm-tier__checks--none p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fmm-muted); }

@media (max-width: 620px) {
    .fmm-protect__h { font-size: 23px; }
    .fmm-protect__h br { display: none; }
}

/* --- checkout: protection tier cards -------------------------------------- */
/* Three abreast on the review screen, dropping to one on a narrow column. */
.fmm-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.fmm-tier {
    position: relative;
    display: flex; flex-direction: column;
    min-height: 470px;
    padding: 28px 22px 22px;
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    background: #fff;
}

/* The design outlines the recommended tier so the eye lands on it, and keeps
   that outline for whichever tier is actually chosen. */
.fmm-tier.is-featured { border-color: var(--fmm-yellow, #f5b700); }

.fmm-tier.is-on {
    border-color: var(--fmm-yellow, #f5b700);
    box-shadow: 0 0 0 3px rgba(245, 183, 0, .15);
}

.fmm-tier.is-disabled { opacity: .55; }

/* Top-RIGHT and flush with the card's top edge, as in the design — it reads as
   a tab on the card rather than a floating pill beside the title. */
.fmm-tier__ribbon {
    position: absolute;
    top: 0; right: 0;
    padding: 5px 12px;
    border-radius: 0 13px 0 10px;
    background: var(--fmm-yellow, #f5b700);
    color: #1F2937;
    font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.fmm-tier .fmm-btn { min-height: 40px; border-radius: 8px; font-weight: 700; }
.fmm-tier__ribbon--dark { background: #111827; color: #fff; }

.fmm-tier__badge {
    align-self: flex-end;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fmm-bg-alt, #f4f4f5);
    color: var(--fmm-muted);
    font-size: 10.5px; font-weight: 700;
}

.fmm-tier__name { font-size: 18px; font-weight: 800; line-height: 1.25; margin-top: 8px; }
.fmm-tier.is-featured .fmm-tier__name { margin-top: 18px; }

.fmm-tier__price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 14px 0 10px; }
.fmm-tier__price { display: block; }
.fmm-tier__price em {
    display: block; font-style: normal;
    font-size: 11px; color: var(--fmm-muted);
}
.fmm-tier__price b { font-size: 27px; font-weight: 800; line-height: 1.1; }
.fmm-tier__pricing { position: relative; flex: 0 0 auto; color: #2563EB; font-size: 11px; }
.fmm-tier__pricing summary { padding: 3px 0; border: 0; outline: 0; background: transparent; cursor: pointer; list-style: none; white-space: nowrap; }
.fmm-tier__pricing summary::-webkit-details-marker { display: none; }
.fmm-tier__pricing summary span { display: inline-grid; width: 12px; height: 12px; margin-left: 3px; place-items: center; vertical-align: -2px; transition: transform .15s ease; }
.fmm-tier__pricing summary svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fmm-tier__pricing[open] summary span { transform: rotate(180deg); }
.fmm-tier__pricing-popover { position: absolute; z-index: 3; right: 0; top: 28px; min-width: 150px; padding: 9px 10px; border: 1px solid var(--fmm-border); border-radius: 7px; background: #fff; box-shadow: 0 8px 20px rgba(15,23,42,.12); color: var(--fmm-muted); font-size: 11px; white-space: nowrap; }
.fmm-tier__pricing-popover b { color: var(--fmm-text); }

.fmm-tier__desc { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--fmm-muted); }

/* The checks sit in their own tinted well, as in the design, and take the
   remaining height so every card's button lines up. */
.fmm-tier__checks {
    flex: 1 1 auto;
    padding: 14px;
    border-radius: 10px;
    background: var(--fmm-bg-alt, #f7f7f8);
    margin-bottom: 16px;
}
.fmm-tier__k {
    display: block;
    font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--fmm-muted); margin-bottom: 8px;
}
.fmm-tier__checks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fmm-tier__checks li {
    position: relative;
    padding-left: 18px;
    font-size: 12.5px; line-height: 1.45;
}
.fmm-tier__checks li::before {
    content: "✓";
    position: absolute; left: 0; top: 0;
    color: var(--fmm-yellow, #f5b700);
    font-weight: 800;
}
.fmm-tier__result { margin: 0 0 14px; }
.fmm-tier__result-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fmm-tier__result-list span { padding: 4px 8px; border-radius: 5px; background: #FFF2C7; color: #B77900; font-size: 10px; line-height: 1.1; }

.fmm-tier__why { margin: 0 0 12px; font-size: 12px; color: var(--fmm-muted); }
.fmm-tier__off { margin: 0 0 12px; font-size: 12px; color: #B91C1C; }

.fmm-tier__note {
    display: block;
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid #FDE68A; border-radius: 10px;
    background: #FFFBEB;
    font-size: 12.5px; line-height: 1.55; color: #7C5E10;
}

/* --- notifications list --------------------------------------------------- */
.fmm-nchips { margin-bottom: 18px; }

.fmm-nlist { display: grid; gap: 10px; }

.fmm-nlist__sep {
    margin: 14px 0 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--fmm-faint);
    text-align: center;
    position: relative;
}
.fmm-nlist__sep::before,
.fmm-nlist__sep::after {
    content: "";
    position: absolute; top: 50%;
    width: calc(50% - 44px); height: 1px;
    background: var(--fmm-border);
}
.fmm-nlist__sep::before { left: 0; }
.fmm-nlist__sep::after { right: 0; }

.fmm-ncard {
    position: relative;
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    background: #fff;
}

/* An unread row is tinted; one that needs the buyer to do something is
   outlined as well, which is how the design separates "new" from "act". */
.fmm-ncard.is-unread { background: #FFFDF5; }
.fmm-ncard.is-action {
    border-color: var(--fmm-yellow, #f5b700);
    background: var(--fmm-yellow-soft, #FEF6E0);
}

.fmm-ncard__media { flex: 0 0 44px; }
.fmm-ncard__media img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.fmm-ncard__ico {
    display: block; width: 44px; height: 44px;
    border-radius: 9px;
    background: var(--fmm-bg-alt, #f4f4f5);
}
.fmm-ncard.is-action .fmm-ncard__ico { background: var(--fmm-yellow, #f5b700); }

.fmm-ncard__body { flex: 1 1 auto; min-width: 0; }

.fmm-ncard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fmm-ncard__when { font-size: 12px; color: var(--fmm-faint); }

/* Standard rows close with the age on the left and the status on the right;
   priority cards use __top instead and lead with theirs. */
.fmm-ncard__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 12px;
}

.fmm-nbadge {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    white-space: nowrap;
}
.fmm-nbadge.is-warning { background: #FEF3C7; color: #92400E; }
.fmm-nbadge.is-success { background: #DCFCE7; color: #15803D; }
.fmm-nbadge.is-info    { background: #DBEAFE; color: #1D4ED8; }
.fmm-nbadge.is-neutral { background: var(--fmm-bg-alt, #f4f4f5); color: var(--fmm-muted); }
/* The seller feed emits two tones the buyer feed never did — a rejected listing
   or a failed verification is `danger`, a payout is `muted`. Without these they
   fell through to the bare badge and read as unstyled text. */
.fmm-nbadge.is-danger  { background: #FEE2E2; color: #B91C1C; }
.fmm-nbadge.is-muted   { background: var(--fmm-bg-alt, #f4f4f5); color: var(--fmm-muted); }

.fmm-ncard__title { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.fmm-ncard__text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fmm-muted); }

.fmm-ncard__expiry {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px; padding: 4px 9px;
    border-radius: 999px;
    background: #FEE2E2; color: #B91C1C;
    font-size: 11.5px; font-weight: 700;
}

/* Above the row-wide hit area, so the buttons win the click. */
.fmm-ncard__acts { position: relative; z-index: 2; display: flex; gap: 10px; margin-top: 14px; }

.fmm-ncard__hit {
    position: absolute; inset: 0;
    z-index: 1;
    border: 0; background: none; padding: 0;
    cursor: pointer;
    border-radius: 12px;
}

.fmm-ncard__dot {
    position: absolute; top: 16px; right: 16px;
    z-index: 2;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fmm-yellow, #f5b700);
}

@media (max-width: 620px) {
    .fmm-ncard__acts { flex-wrap: wrap; }
}

/* ── Notifications: sticky preview panel ("focus" state) ────────────────────

   The third column of the notifications screen. Activating a private-listing
   row opens it alongside the feed, so the buyer can judge the listing without
   losing their place — the full review screen stays one click away, behind the
   panel's own primary button.                                               */

.fmm-nsplit.has-focus { grid-template-columns: minmax(0, 1fr) 336px; }

@media (max-width: 1100px) {
    /* Inside the account rail's column there is no room for a 336px preview
       beside the list; it drops underneath. */
    .fmm-nsplit.has-focus { grid-template-columns: minmax(0, 1fr); }
}

/* The card whose panel is open. Outlined rather than tinted: an action row is
   already yellow, so the ring is what separates "needs you" from "open". */
.fmm-ncard.is-focused { border-color: var(--fmm-yellow); box-shadow: 0 0 0 3px rgba(251, 191, 36, .32); }

/* With the panel carrying the buttons, the card keeps only its countdown. */
.fmm-ncard__focusbar {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 14px 0 0; padding: 10px;
    border: 1px solid var(--fmm-border);
    border-radius: 9px;
    background: #fff;
    font-size: 12.5px; font-weight: 700; color: var(--fmm-muted);
}

.fmm-nfocus {
    position: sticky;
    top: 88px;
    align-self: start;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .06);
    overflow: hidden;
}

.fmm-nfocus__head { position: relative; padding: 16px 44px 14px 16px; border-bottom: 1px solid var(--fmm-border); }
.fmm-nfocus__kind {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.fmm-nfocus__kind svg { color: var(--fmm-yellow); }
.fmm-nfocus__head h2 { margin: 6px 0 0; font-size: 17px; font-weight: 700; }
.fmm-nfocus__x {
    position: absolute; top: 14px; right: 12px;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 0; border-radius: 7px;
    background: none; color: var(--fmm-faint);
    cursor: pointer;
}
.fmm-nfocus__x:hover { background: var(--fmm-bg-alt); color: var(--fmm-text); }

/* Capped so a long panel scrolls inside itself and the sticky column never
   grows taller than the viewport it is pinned to. */
.fmm-nfocus__body { padding: 16px; overflow-y: auto; max-height: calc(100vh - 300px); }

.fmm-nfocus__expiry {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0 0 12px; padding: 4px 9px;
    border-radius: 999px;
    background: #FEE2E2; color: #B91C1C;
    font-size: 11.5px; font-weight: 700;
}

.fmm-nfocus__shot {
    display: block; width: 100%; aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: var(--fmm-bg-alt);
    object-fit: cover;
}
.fmm-nfocus__thumbs { display: flex; gap: 8px; margin-top: 10px; }
.fmm-nfocus__thumbs button { padding: 0; border: 1px solid var(--fmm-border); border-radius: 8px; background: none; cursor: pointer; line-height: 0; }
.fmm-nfocus__thumbs button.is-on { border-color: var(--fmm-yellow); }
.fmm-nfocus__thumbs img { width: 52px; height: 52px; border-radius: 7px; object-fit: cover; }

.fmm-nfocus__title { margin: 14px 0 0; font-size: 17px; font-weight: 700; line-height: 1.32; }
.fmm-nfocus__price { margin: 8px 0 0; font-size: 24px; font-weight: 800; }

.fmm-nfocus__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 11.5px; color: var(--fmm-faint); }
.fmm-nfocus__meta span { display: inline-flex; align-items: center; gap: 5px; }

.fmm-nfocus__seller {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 10px;
    border: 1px solid var(--fmm-border); border-radius: 10px;
    background: var(--fmm-bg-alt);
}
.fmm-nfocus__seller img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.fmm-nfocus__who { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; }
.fmm-nfocus__who svg { color: #2563EB; }
.fmm-nfocus__rate { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: 12px; color: var(--fmm-muted); }
.fmm-nfocus__rate svg { color: var(--fmm-yellow); }

.fmm-nfocus__foot { margin-top: auto; padding: 14px 16px 16px; border-top: 1px solid var(--fmm-border); background: var(--fmm-bg-alt); }
.fmm-nfocus__foot .fmm-btn { width: 100%; }
.fmm-nfocus__ignore {
    display: block; width: 100%; margin-top: 10px;
    border: 0; background: none;
    font-size: 12.5px; color: var(--fmm-faint); text-decoration: underline;
    cursor: pointer;
}

/* Below this width the third column would squeeze the feed, so the panel drops
   under the list and stops being sticky. */
@media (max-width: 1180px) {
    .fmm-nsplit.has-focus { grid-template-columns: 210px minmax(0, 1fr); }
    .fmm-nfocus { position: static; grid-column: 2 / -1; max-width: 420px; }
    .fmm-nfocus__body { max-height: none; }
}
@media (max-width: 900px) {
    .fmm-nsplit.has-focus { grid-template-columns: minmax(0, 1fr); }
    .fmm-nfocus { grid-column: 1 / -1; max-width: none; }
}

/* ── Private listing detail ────────────────────────────────────────────────

   Three columns: the gallery, the item's own detail, and the buy rail. The
   rail is its own column rather than a block under the detail because the
   reservation clock makes buying the point of the screen — it must never be
   below the fold on a long description.                                     */

/* Full-bleed when the ribbon sits outside the container, as it does here: it
   frames the whole screen, not one panel inside it. */
.fmm-section > .fmm-privbar { border-radius: 0; margin: 0 0 22px; }

.fmm-pl {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) 300px;
    gap: 26px;
    align-items: start;
}

/* ── gallery ── */
.fmm-pl__shot {
    position: relative;
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--fmm-bg-alt);
    overflow: hidden;
}
.fmm-pl__shot img { width: 100%; height: 100%; object-fit: cover; }
.fmm-pl__flag {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(17, 24, 39, .82); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
}
.fmm-pl__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.fmm-pl__thumbs button { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; line-height: 0; overflow: hidden; }
.fmm-pl__thumbs button.is-on { border-color: var(--fmm-yellow); }
.fmm-pl__thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* ── detail column ── */
.fmm-pl__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fmm-pl__title { margin: 12px 0 0; font-size: 26px; font-weight: 800; line-height: 1.25; }
.fmm-pl__price { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; }
.fmm-pl__price b { font-size: 28px; font-weight: 800; }
.fmm-pl__price s { font-size: 14px; color: var(--fmm-faint); }

.fmm-pl__excl {
    display: flex; gap: 10px;
    margin: 18px 0 0; padding: 14px 16px;
    border: 1px solid var(--fmm-yellow); border-radius: 12px;
    background: var(--fmm-yellow-soft);
}
.fmm-pl__excl svg { flex-shrink: 0; margin-top: 1px; color: #B4820C; }
.fmm-pl__excl b { display: block; font-size: 13.5px; font-weight: 800; color: #8A6100; }
.fmm-pl__excl em { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; line-height: 1.6; color: #8A6100; }

.fmm-pl__h { margin: 26px 0 10px; font-size: 16px; font-weight: 800; }
.fmm-pl__sub { margin: 0; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-pl__desc { margin: 0; font-size: 14px; line-height: 1.75; color: var(--fmm-muted); white-space: pre-line; }
.fmm-pl__desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fmm-pl__more { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: #2563EB; cursor: pointer; }

.fmm-pl__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.fmm-pl__specs > div { padding: 12px 14px; border: 1px solid var(--fmm-border); border-radius: 10px; }
.fmm-pl__specs span { display: block; font-size: 11px; color: var(--fmm-faint); }
.fmm-pl__specs b { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; }

.fmm-pl__ship {
    display: flex; align-items: center; gap: 12px;
    margin-top: 18px; padding: 14px 16px;
    border: 1px solid var(--fmm-yellow); border-radius: 12px;
}
.fmm-pl__ship > svg:first-child { flex-shrink: 0; color: var(--fmm-text); }
.fmm-pl__ship span { flex: 1; min-width: 0; }
.fmm-pl__ship b { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-pl__ship em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--fmm-faint); }
.fmm-pl__tick { flex-shrink: 0; color: var(--fmm-yellow); }

.fmm-pl__seller {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--fmm-border); border-radius: 12px;
}
.fmm-pl__seller img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.fmm-pl__who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 700; }
.fmm-pl__who > svg { color: #2563EB; }
.fmm-pl__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--fmm-muted); }
.fmm-pl__meta span { display: inline-flex; align-items: center; gap: 4px; }
.fmm-pl__seller .fmm-btn { margin-left: auto; flex-shrink: 0; }

/* ── buy rail ── */
.fmm-pl__rail { position: sticky; top: 88px; display: grid; gap: 16px; align-self: start; }
.fmm-pl__agreed { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-pl__icons { display: flex; gap: 6px; }
.fmm-pl__icons button {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 1px solid var(--fmm-border); border-radius: 8px;
    background: none; color: var(--fmm-muted); cursor: pointer;
}
.fmm-pl__icons button:hover { border-color: var(--fmm-yellow); color: var(--fmm-text); }
.fmm-pl__railprice { margin: 6px 0 14px; font-size: 26px; font-weight: 800; }

/* White with a real border — the secondary action next to Buy Now, which
   --ghost (borderless) does not read as. */
.fmm-btn--outline {
    border: 1px solid var(--fmm-text);
    background: #fff;
    color: var(--fmm-text);
}
.fmm-btn--outline:hover:not(:disabled) { background: var(--fmm-bg-alt); }

.fmm-pl__prot {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 14px 0 0;
    font-size: 11.5px; color: var(--fmm-muted);
}

.fmm-pl__flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.fmm-pl__flow li {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
    font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--fmm-faint);
}
/* The connector, drawn from each node to the next rather than as its own
   element, so the three nodes stay evenly distributed on any width. */
.fmm-pl__flow li { position: relative; }
.fmm-pl__flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;                       /* node centre: 34px tall */
    left: calc(50% + 21px);
    width: calc(100% - 42px);
    height: 1px;
    background: var(--fmm-border);
}
.fmm-pl__node {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--fmm-bg-alt); color: var(--fmm-muted);
}
.fmm-pl__flow .is-on { color: var(--fmm-text); }
.fmm-pl__flow .is-on .fmm-pl__node { background: var(--fmm-yellow); color: #1F2937; }

.fmm-pl__escrow {
    display: flex; gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--fmm-teal-soft);
}
.fmm-pl__escrow svg { flex-shrink: 0; margin-top: 1px; color: #0F766E; }
.fmm-pl__escrow b { display: block; font-size: 12.5px; font-weight: 800; color: #0F766E; }
.fmm-pl__escrow em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; line-height: 1.6; color: #115E59; }

@media (max-width: 1120px) {
    .fmm-pl { grid-template-columns: 260px minmax(0, 1fr); }
    .fmm-pl__rail { position: static; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 780px) {
    .fmm-pl { grid-template-columns: minmax(0, 1fr); }
    .fmm-pl__specs { grid-template-columns: minmax(0, 1fr); }
}

/* ── Private-listing checkout ──────────────────────────────────────────────

   Three client-side steps over one quote. Shares .fmm-sumrow and the payment
   breakdown partial with the cart checkout, so the money lines look and read
   the same in both.                                                         */

.fmm-expiry {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--fmm-yellow-soft); color: #8A6100;
    font-size: 12px; font-weight: 700;
    white-space: nowrap;
}

/* The reserved item, repeated on every step. */
.fmm-pchk__item { display: flex; align-items: center; gap: 14px; }
.fmm-pchk__thumb {
    flex: 0 0 72px; width: 72px; height: 72px;
    border-radius: 10px; background: var(--fmm-bg-alt);
    overflow: hidden;
}
.fmm-pchk__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fmm-pchk__flags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; font-size: 11.5px; color: var(--fmm-muted); }
.fmm-pchk__name { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.fmm-pchk__price { margin: 6px 0 0; font-size: 18px; font-weight: 800; }

.fmm-pchk__h {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 14px;
    font-size: 15.5px; font-weight: 800;
}

/* Selectable row — address, card, courier. The radio sits on the right, as the
   design has it, so the label reads before the control. */
.fmm-pick {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    border: 1px solid var(--fmm-border); border-radius: 12px;
    cursor: pointer;
}
.fmm-pick.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }
.fmm-pick > span { flex: 1; min-width: 0; }
.fmm-pick b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.fmm-pick b em {
    font-style: normal; padding: 1px 7px; border-radius: 999px;
    background: var(--fmm-yellow); color: #1F2937;
    font-size: 10px; font-weight: 800;
}
.fmm-pick span span, .fmm-pick > span > span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-pick a { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: #2563EB; }
.fmm-pick input[type="radio"] { flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--fmm-yellow); }

.fmm-pchk__add {
    display: block; padding: 12px;
    border: 1px dashed var(--fmm-border); border-radius: 12px;
    text-align: center; font-size: 13px; font-weight: 700; color: var(--fmm-muted);
}
.fmm-pchk__add:hover { border-color: var(--fmm-yellow); color: var(--fmm-text); }

/* A settled choice, shown back rather than re-offered. */
.fmm-pchk__row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin-top: 10px;
    border-radius: 12px; background: var(--fmm-bg-alt);
}
/* :not(.fmm-chip) so a trailing pill (the delivery ETA) keeps its own width
   instead of being stretched across the row by flex-grow. */
.fmm-pchk__row > span:not(.fmm-chip) { flex: 1; min-width: 0; }
.fmm-pchk__row b { display: block; font-size: 13px; font-weight: 700; }
.fmm-pchk__row > span > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-pchk__edit { padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 700; color: #2563EB; cursor: pointer; }

.fmm-pchk__brand {
    flex-shrink: 0;
    padding: 3px 7px; border-radius: 4px;
    background: #1A1F71; color: #fff;
    font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em;
}

.fmm-pchk__inc { color: #0F766E; }
.fmm-pchk__line { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12.5px; color: var(--fmm-muted); }
.fmm-pchk__warn {
    display: flex; align-items: center; gap: 7px;
    margin: 14px 0 0; padding: 9px 12px;
    border-radius: 8px; background: #FEF2F2; color: #B91C1C;
    font-size: 12px; font-weight: 700;
}
.fmm-pchk__back {
    display: block; width: 100%; margin-top: 12px;
    padding: 0; border: 0; background: none;
    font-size: 12.5px; color: var(--fmm-muted); text-align: center; cursor: pointer;
}
.fmm-pchk__back:hover { color: var(--fmm-text); text-decoration: underline; }

@media (max-width: 620px) {
    .fmm-pchk__item { flex-wrap: wrap; }
}
.fmm-pchk__head { margin: 0 0 22px; }
.fmm-pchk__head h1 { margin: 0; font-size: 28px; font-weight: 800; }
.fmm-pchk__head p { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 6px 0 0; font-size: 14px; color: var(--fmm-muted); }

/* ── Make an Offer ─────────────────────────────────────────────────────────

   The composer, and the commitment modal that gates it. The modal is wider
   than the shared .fmm-modal__box default because it carries a recap table —
   at 420px the figures wrapped away from their labels.                      */

.fmm-backlink {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
    font-size: 13px; font-weight: 600; color: var(--fmm-muted);
}
.fmm-backlink:hover { color: var(--fmm-text); }

.fmm-mo__item { display: flex; align-items: flex-start; gap: 16px; }
.fmm-mo__thumb {
    flex: 0 0 96px; width: 96px; height: 96px;
    border-radius: 12px; background: var(--fmm-bg-alt);
    overflow: hidden;
}
.fmm-mo__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fmm-mo__flags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.fmm-mo__name { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; }
.fmm-mo__label {
    display: block; margin-top: 12px;
    font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--fmm-faint);
}
.fmm-mo__listed { margin: 2px 0 0; font-size: 22px; font-weight: 800; }

/* The amount, given the weight the design gives it — this is the one number
   the buyer is choosing. */
.fmm-mo__field {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border: 1px solid var(--fmm-border); border-radius: 12px;
    background: var(--fmm-bg-alt);
}
.fmm-mo__field:focus-within { border-color: var(--fmm-yellow); background: #fff; }
.fmm-mo__field.is-bad { border-color: #DC2626; }
.fmm-mo__field > span { font-size: 20px; font-weight: 700; color: var(--fmm-faint); }
.fmm-mo__field input {
    flex: 1; min-width: 0;
    border: 0; background: none; outline: none;
    font-size: 30px; font-weight: 800; text-align: center; color: var(--fmm-text);
}

.fmm-mo__save {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: fit-content; margin: 12px auto 0; padding: 4px 12px;
    border-radius: 999px;
    background: var(--fmm-teal-soft); color: #0F766E;
    font-size: 12px; font-weight: 700;
}

.fmm-mo__quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.fmm-mo__quick button {
    padding: 8px 16px;
    border: 1px solid var(--fmm-border); border-radius: 9px;
    background: #fff;
    font-size: 13px; font-weight: 700; color: var(--fmm-text);
    cursor: pointer;
}
.fmm-mo__quick button:hover { border-color: var(--fmm-yellow); }
.fmm-mo__quick button.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }

.fmm-mo__hint { margin: 12px 0 0; font-size: 12px; color: var(--fmm-faint); text-align: center; }
.fmm-mo__opt { font-size: 12px; font-weight: 500; color: var(--fmm-faint); }
.fmm-mo__info { display: inline-flex; color: var(--fmm-faint); cursor: help; }

.fmm-mo__note {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--fmm-border); border-radius: 10px;
    font: inherit; font-size: 13.5px; resize: vertical;
}
.fmm-mo__note:focus { outline: none; border-color: var(--fmm-yellow); }

.fmm-mo__saverow { background: var(--fmm-teal-soft); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.fmm-mo__saverow b { color: #0F766E; }
.fmm-mo__left { color: #B91C1C; }

/* ── commitment modal ── */
.fmm-mo__modal { position: relative; max-width: 520px; max-height: 88vh; overflow-y: auto; text-align: center; }
.fmm-modal__x {
    position: absolute; top: 14px; right: 14px;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 0; border-radius: 50%;
    background: var(--fmm-bg-alt); color: var(--fmm-muted);
    cursor: pointer;
}
.fmm-modal__x:hover { color: var(--fmm-text); }

.fmm-mo__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-bottom: 14px;
    border-radius: 50%;
    background: var(--fmm-yellow); color: #1F2937;
}
.fmm-mo__modal h2 { margin: 0; font-size: 20px; font-weight: 800; }
.fmm-mo__lead { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--fmm-muted); }

.fmm-mo__terms { display: grid; gap: 10px; margin: 20px 0 0; text-align: left; }
.fmm-mo__terms > div {
    display: flex; gap: 10px;
    padding: 12px 14px;
    border-radius: 10px; background: var(--fmm-bg-alt);
}
.fmm-mo__terms svg { flex-shrink: 0; margin-top: 2px; color: var(--fmm-muted); }
.fmm-mo__terms .is-warn svg { color: #DC2626; }
.fmm-mo__terms b { display: block; font-size: 13px; font-weight: 700; }
.fmm-mo__terms em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 1.55; color: var(--fmm-muted); }

.fmm-mo__warn {
    display: flex; gap: 8px; text-align: left;
    margin: 14px 0 0; padding: 12px 14px;
    border: 1px solid var(--fmm-yellow); border-radius: 10px;
    background: var(--fmm-yellow-soft); color: #8A6100;
    font-size: 12px; line-height: 1.55; font-weight: 600;
}
.fmm-mo__warn svg { flex-shrink: 0; margin-top: 1px; }

.fmm-mo__recap {
    margin: 16px 0 0; padding: 14px;
    border: 1px solid var(--fmm-border); border-radius: 10px;
    text-align: left;
}
.fmm-mo__recap > b { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.fmm-mo__offer { color: #B91C1C; }
.fmm-mo__window { color: #B91C1C; font-size: 11.5px; }
.fmm-mo__verified { color: #B4820C; font-size: 11.5px; }

.fmm-mo__agree { margin-top: 16px; text-align: left; align-items: flex-start; }
.fmm-mo__acts { display: flex; gap: 10px; margin-top: 18px; }
.fmm-mo__acts .fmm-btn { flex: 1; }

@media (max-width: 620px) {
    .fmm-mo__item { flex-wrap: wrap; }
    .fmm-mo__acts { flex-wrap: wrap; }
}

/* ── Offer detail: per-state trim ──────────────────────────────────────────

   The states share one page; these are the pieces that differ between them. */

/* A refused outcome, in the same centred shape as a confirmed one — the tick
   swaps for a cross and the colour carries the meaning. */
.fmm-confirm__tick--bad { background: #FEE2E2; color: #DC2626; }

.fmm-od__status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.fmm-od__status em { font-style: normal; font-size: 12.5px; color: var(--fmm-muted); }

.fmm-od__waiting {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 14px; padding: 9px 12px;
    border-radius: 8px;
    background: var(--fmm-yellow-soft); color: #8A6100;
    font-size: 12.5px; font-weight: 700;
}

.fmm-od__save { background: var(--fmm-teal-soft); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.fmm-od__save b { color: #0F766E; }

.fmm-od__verify {
    display: flex; align-items: center; gap: 6px;
    margin: 12px 0 0;
    font-size: 11.5px; color: #B4820C; font-weight: 600;
}

.fmm-od__hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--fmm-faint); text-align: center; }

/* Counter composer trim. */
.fmm-cx__seller {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding: 12px 14px;
    border-radius: 10px; background: var(--fmm-yellow-soft);
}
.fmm-cx__seller b { display: block; font-size: 19px; font-weight: 800; }
.fmm-mo__hint.is-bad { color: #B91C1C; font-weight: 600; }
.fmm-od__gap {
    margin: 12px 0 0; padding: 8px 12px;
    border-radius: 8px; background: var(--fmm-teal-soft); color: #0F766E;
    font-size: 12px; font-weight: 700; text-align: center;
}

/* ── Accepted-offer payment ────────────────────────────────────────────────*/
.fmm-op__locked {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 0 20px; padding: 7px 13px;
    border-radius: 8px; background: var(--fmm-bg-alt); color: var(--fmm-muted);
    font-size: 12.5px; font-weight: 600;
}
.fmm-op__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 0 0 16px; padding-bottom: 14px;
    border-bottom: 1px solid var(--fmm-border);
}
.fmm-op__total span { font-size: 12.5px; color: var(--fmm-muted); }
.fmm-op__total b { font-size: 24px; font-weight: 800; }

/* What the money is protected by. Ticks rather than prose: each line is a
   separate guarantee, and buyers scan them. */
.fmm-op__assure { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.fmm-op__assure li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--fmm-muted);
}
.fmm-op__assure li::before {
    content: "";
    flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%;
    background: var(--fmm-teal-soft);
    box-shadow: inset 0 0 0 1.5px var(--fmm-teal);
}
.fmm-op__held {
    display: flex; gap: 9px; text-align: left;
    margin: 16px 0 0; padding: 12px 14px;
    border-radius: 10px; background: var(--fmm-teal-soft);
    font-size: 11.5px; line-height: 1.55; color: #115E59;
}
.fmm-op__held svg { flex-shrink: 0; margin-top: 1px; color: #0F766E; }
.fmm-op__held b { display: block; font-weight: 800; color: #0F766E; }

/* =========================================================================
   Nigeria buyer — Packages dashboard
   -------------------------------------------------------------------------
   Matches the "Dashboard for nigeria" frame. Loaded after the earlier package
   rules so it wins on the shared class names; anything not restated here (the
   grid breakpoints, the ⋮ menu) still comes from those.
   ========================================================================= */

/* --- stat cards ---------------------------------------------------------- */

.fmm-statcards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 34px;
}

.fmm-statcard {
    display: block;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    background: #fff;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}

a.fmm-statcard:hover { border-color: var(--fmm-yellow); box-shadow: 0 2px 14px rgba(17, 17, 17, .06); }

.fmm-statcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.fmm-statcard__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    /* Neutral default; each card tints it below. */
    background: var(--fmm-bg-alt);
    color: var(--fmm-muted);
}

.fmm-statcard__tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--fmm-bg-alt);
    color: var(--fmm-muted);
    white-space: nowrap;
}

.fmm-statcard b {
    display: block;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 6px;
}

.fmm-statcard > span:last-child { font-size: 14px; color: var(--fmm-muted); }

/* Tile and glyph colors from the "Stats Grid" Figma frame. */
.fmm-statcard--blue   .fmm-statcard__ico { background: #EFF6FF; color: #3B82F6; }
.fmm-statcard--blue   .fmm-statcard__tag { background: #EFF6FF; color: #3B82F6; }
.fmm-statcard--violet .fmm-statcard__ico { background: #FAF5FF; color: #A855F7; }
.fmm-statcard--violet .fmm-statcard__tag { background: #FFF6E5; color: #B45309; }
.fmm-statcard--orange .fmm-statcard__ico { background: #FFF7ED; color: #F97316; }
.fmm-statcard--orange .fmm-statcard__tag { background: #FFF6E5; color: #B45309; }

/* The one card the buyer has to act on carries the brand fill. */
.fmm-statcard--hot { background: var(--fmm-yellow); border-color: var(--fmm-yellow); }
.fmm-statcard--hot .fmm-statcard__ico { background: #fff; color: #0F0F13; }
.fmm-statcard--hot .fmm-statcard__tag { background: var(--fmm-dark); color: #fff; }
.fmm-statcard--hot > span:last-child { color: rgba(35, 31, 32, .74); }

/* --- section head + filters ---------------------------------------------- */

.fmm-pkghead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fmm-pkghead h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.fmm-pkghead p { font-size: 13.5px; color: var(--fmm-muted); margin: 5px 0 0; }

.fmm-pkgfilters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.fmm-pkgfilters button {
    font: inherit;
    font-size: 13px;
    padding: 9px 17px;
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    background: #fff;
    color: var(--fmm-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.fmm-pkgfilters button:hover { border-color: var(--fmm-faint); color: var(--fmm-text); }
.fmm-pkgfilters button.is-on { background: var(--fmm-dark); border-color: var(--fmm-dark); color: #fff; }

.fmm-pkgfilters .fmm-pkgfilters__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    background: #fff;
    color: var(--fmm-text);
    cursor: pointer;
}

.fmm-pkgfilters .fmm-pkgfilters__more:hover { border-color: var(--fmm-faint); }
.fmm-pkgfilters .fmm-pkgfilters__more img { display: block; width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px; }
.fmm-pkgfilters .fmm-pkgfilters__more.is-on {
    width: auto;
    gap: 8px;
    padding: 0 12px;
    border-color: var(--fmm-dark);
    background: var(--fmm-yellow-soft);
    color: var(--fmm-text);
    font-weight: 700;
}
.fmm-pkgfilters .fmm-pkgfilters__more.is-on span { font-size: 12px; line-height: 1; white-space: nowrap; }

.fmm-pkgfilter-control { position: relative; z-index: 40; }
.fmm-pkgfilter-menu {
    position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
    display: grid; gap: 3px; width: 220px; padding: 10px;
    max-height: min(340px, calc(100vh - 100px)); overflow-y: auto;
    border: 1px solid var(--fmm-border); border-radius: 12px;
    background: #fff; box-shadow: 0 12px 28px rgba(16,24,40,.14);
}
.fmm-pkgfilter-menu > b { padding: 5px 9px 7px; color: var(--fmm-muted); font-size: 11px; }
.fmm-pkgfilter-menu > button {
    padding: 8px 9px; border: 0; border-radius: 7px;
    background: transparent; color: var(--fmm-text); text-align: left;
    font: inherit; font-size: 12px; cursor: pointer;
}
.fmm-pkgfilter-menu > button:hover { background: #F7F5F2; }
.fmm-pkgfilter-menu > button.is-current { background: var(--fmm-yellow-soft); font-weight: 700; }

/* --- select-all row ------------------------------------------------------ */

.fmm-pkgbulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
}

.fmm-pkgsort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: var(--fmm-muted);
    cursor: pointer;
}
.fmm-pkgsort:hover { color: var(--fmm-text); }
.fmm-pkgsort b { font-weight: 500; }
.fmm-pkgsort-control { position: relative; }
.fmm-pkgsort-menu { top: calc(100% + 8px); }

/*
 * Round checkbox, per the design. The native input stays in the DOM (and keeps
 * keyboard focus and the screen-reader label) — only its painting is replaced.
 */
.fmm-pkgcheck {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}

.fmm-pkgcheck input {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.fmm-pkgcheck__box {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--fmm-border);
    border-radius: 50%;
    background: #fff;
    transition: background .15s, border-color .15s;
}

.fmm-pkgcheck__box::after {
    content: "";
    position: absolute;
    left: 6.5px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(43deg) scale(.4);
    opacity: 0;
    transition: opacity .12s, transform .12s;
}

.fmm-pkgcheck input:checked + .fmm-pkgcheck__box {
    background: var(--fmm-yellow);
    border-color: var(--fmm-yellow);
}

.fmm-pkgcheck input:checked + .fmm-pkgcheck__box::after { opacity: 1; transform: rotate(43deg) scale(1); }
.fmm-pkgcheck input:focus-visible + .fmm-pkgcheck__box { box-shadow: 0 0 0 3px var(--fmm-yellow-soft); }

.fmm-pkgcheck--solo { gap: 0; }

/* --- package card -------------------------------------------------------- */

.fmm-pkg {
    gap: 12px;
    border-radius: 16px;
    padding: 18px 16px 16px;
}

.fmm-pkg::before { height: 3px; }

/* Identity row: photo, status + name, then ref and the pay checkbox. */
.fmm-pkg__id { display: flex; align-items: flex-start; gap: 12px; }

.fmm-pkg__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--fmm-bg-alt);
    color: var(--fmm-faint);
    overflow: hidden;
}

.fmm-pkg__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-pkg__idmain { min-width: 0; flex: 1; }

/* The status is a filled pill here, not bare text — it is the first thing the
   buyer reads and it has to survive being one of five colours. */
.fmm-pkg__state {
    display: inline-block;
    max-width: 100%;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.35;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--fmm-bg-alt);
    color: var(--fmm-muted);
    /* Wraps rather than ellipsing: a status the buyer can only half-read is
       worse than one on two lines, and ours run to 21 characters. */
    white-space: normal;
    vertical-align: top;
}

.fmm-pkg.is-red    .fmm-pkg__state { background: #FEECEC; color: #DC2626; }
.fmm-pkg.is-amber  .fmm-pkg__state { background: #FFF6E5; color: #B45309; }
.fmm-pkg.is-blue   .fmm-pkg__state { background: #E8F0FE; color: #1D4ED8; }
.fmm-pkg.is-violet .fmm-pkg__state { background: #F3EDFF; color: #6D28D9; }
.fmm-pkg.is-green  .fmm-pkg__state { background: #E7F8EE; color: #15803D; }

.fmm-pkg__name {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 7px;
    /* Tracking numbers are one long unbroken token. */
    overflow-wrap: anywhere;
}

.fmm-pkg__when {
    display: block;
    font-size: 11.5px;
    font-style: normal;
    color: var(--fmm-muted);
    margin-top: 3px;
}

.fmm-pkg__idend { display: flex; align-items: flex-start; gap: 8px; flex: none; padding-left: 6px; }

.fmm-pkg__ref { display: block; text-align: right; }
.fmm-pkg__ref em { display: block; font-size: 9px; font-style: normal; color: var(--fmm-faint); }
.fmm-pkg__ref b { display: block; font-size: 11.5px; font-weight: 800; margin-top: 1px; }

/* --- shipment progress --------------------------------------------------- */

.fmm-pkg__prog { display: block; }

.fmm-pkg__prog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--fmm-text);
    margin-bottom: 7px;
}

.fmm-pkg__prog-head b { font-size: 12px; font-weight: 800; color: #2563EB; }

.fmm-pkg__prog-bar {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--fmm-bg-alt);
    overflow: hidden;
}

.fmm-pkg__prog-bar i { display: block; height: 100%; border-radius: 999px; background: #3B82F6; }

.fmm-pkg__prog-legend { display: flex; justify-content: space-between; margin-top: 6px; }
.fmm-pkg__prog-legend em { font-size: 9.5px; font-style: normal; color: var(--fmm-faint); }

/* --- weights, dimensions, note ------------------------------------------- */

.fmm-pkg__weights {
    /* Billable is the widest column because it carries a weight AND a price on
       one line — equal thirds pushed the price onto a second row. */
    grid-template-columns: .85fr .9fr 1.5fr;
    align-items: start;
    gap: 6px;
    border-radius: 12px;
    padding: 12px 11px;
}

.fmm-pkg__weights em { font-size: 8px; letter-spacing: .03em; margin-bottom: 5px; }
.fmm-pkg__weights b { font-size: 12px; font-weight: 800; }

/* Undo the earlier block's full-width billable row — see the header note. */
.fmm-pkg__billable { grid-column: auto; border-top: 0; padding-top: 0; }

/* Billable is the figure that gets charged, so it is the one that is coloured
   and the one that carries the price beside it. */
.fmm-pkg__billable em { color: #16A34A; }

.fmm-pkg__billable b {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.fmm-pkg__arrow { color: var(--fmm-faint); font-weight: 400; }
.fmm-pkg__billable i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--fmm-yellow-dark); }

.fmm-pkg__dims { padding-top: 0; border-top: 0; }
.fmm-pkg__dims em { display: inline-flex; align-items: center; gap: 5px; }
.fmm-pkg__dims em svg { color: var(--fmm-faint); }
.fmm-pkg__dims b { font-size: 11px; letter-spacing: .02em; }

.fmm-pkg__note {
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 9px 10px;
    border-radius: 10px;
    background: #EFF4FF;
    font-size: 9.5px;
    line-height: 1.4;
    color: #3F5A8A;
}

.fmm-pkg__note > span { flex: 1; min-width: 0; }

.fmm-pkg__note svg { color: #2563EB; margin-top: 0; }
.fmm-pkg__note a { color: #2563EB; font-weight: 600; }

.fmm-pkg__foot { gap: 8px; }
.fmm-pkg__foot .fmm-btn { font-size: 12px; padding: 11px 10px; border-radius: 10px; }

.fmm-pkg__menu > button { width: 34px; height: 38px; border-radius: 10px; }

/* --- create incoming package + shop from --------------------------------- */

.fmm-incoming-list { margin: 28px 0 8px; }
.fmm-incoming-list__head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.fmm-incoming-list__head h2 { margin:0; color:var(--fmm-text); font-size:20px; font-weight:750; }
.fmm-incoming-list__head p { margin:4px 0 0; color:var(--fmm-muted); font-size:13px; }
.fmm-incoming-list__head > a { color:#9A6700; font-size:13px; font-weight:650; text-decoration:none; }
.fmm-incoming-list__head > a:hover { text-decoration:underline; }
.fmm-incoming-list__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:14px; }
.fmm-incoming-card { min-width:0; padding:16px; border:1px solid var(--fmm-border); border-top:3px solid #FFBE2E; border-radius:13px; background:#fff; }
.fmm-incoming-card__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fmm-incoming-card__icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#FFF4D6; color:#A56A00; }
.fmm-incoming-card__status { padding:5px 9px; border-radius:999px; background:#FFF5DE; color:#9A6700; font-size:10px; font-weight:750; letter-spacing:.03em; }
.fmm-incoming-card h3 { margin:12px 0; color:var(--fmm-text); font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.fmm-incoming-card dl { display:grid; gap:9px; margin:0; }
.fmm-incoming-card dl > div { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.fmm-incoming-card dt { color:var(--fmm-muted); font-size:12px; }
.fmm-incoming-card dd { margin:0; color:var(--fmm-text); font-size:12px; font-weight:650; text-align:right; overflow-wrap:anywhere; }
.fmm-incoming-card__date { margin:13px 0 0; padding-top:10px; border-top:1px solid var(--fmm-border); color:var(--fmm-muted); font-size:11px; }
.fmm-incoming-list__head { grid-column:1/-1; margin:16px 0 -4px; }
.fmm-pkg.fmm-incoming-package { display:flex; flex-direction:column; min-height:300px; border-top:3px solid #FFBE2E; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.fmm-pkg.fmm-incoming-package:hover,.fmm-pkg.fmm-incoming-package:focus-visible { transform:translateY(-2px); border-color:#FFBE2E; box-shadow:0 8px 22px rgba(32,36,43,.1); outline:none; }
.fmm-incoming-package .fmm-pkg__idend { max-width:94px; }
.fmm-incoming-package__tracking { min-width:0; text-align:right; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.fmm-incoming-package__thumb { background:#FFF4D6!important; color:#A56A00!important; }
.fmm-incoming-package__state { display:inline-flex; align-self:flex-start; padding:4px 8px; border-radius:999px; background:#FFF4D6; color:#9A6700!important; }
.fmm-incoming-package .fmm-pkg__name { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.fmm-incoming-package__details { display:grid; gap:10px; margin-top:18px; padding:12px 10px; border-radius:11px; background:#F8F9FB; }
.fmm-incoming-package__details span { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.fmm-incoming-package__details em { color:#98A2B3; font-size:9px; font-style:normal; font-weight:700; text-transform:uppercase; }
.fmm-incoming-package__details b { color:#20242B; font-size:11px; text-align:right; overflow-wrap:anywhere; }
.fmm-incoming-package__view { display:flex; align-items:center; justify-content:center; gap:7px; min-height:36px; margin-top:auto; padding-top:12px; color:#20242B; font-size:11px; font-weight:700; }
/* Incoming package dialog (Packages → Incoming). Arrived boxes link to their
   "pending processing" package page; expected ones only show the declaration. */
.fmm-incoming-detail { position:relative; box-sizing:border-box; width:min(500px, calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 32px); overflow-y:auto; padding:28px; border-radius:16px; }
.fmm-incoming-detail *, .fmm-incoming-detail *::before, .fmm-incoming-detail *::after { box-sizing:border-box; }
.fmm-incoming-detail__close { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:10px; background:transparent; color:#6B7280; cursor:pointer; }
.fmm-incoming-detail__close:hover { background:#F3F4F6; color:#111827; }
.fmm-incoming-detail__head { display:flex; align-items:flex-start; gap:14px; padding-right:36px; }
.fmm-incoming-detail__icon { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:12px; background:#FFF6DD; color:#D99A00; }
.fmm-incoming-detail.is-arrived .fmm-incoming-detail__icon { background:#ECFDF5; color:#059669; }
.fmm-incoming-detail__chip { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; background:#EFF6FF; color:#1D4ED8; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.fmm-incoming-detail__chip i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.fmm-incoming-detail.is-arrived .fmm-incoming-detail__chip { background:#ECFDF5; color:#047857; }
.fmm-incoming-detail h2 { margin:8px 0 2px; color:var(--fmm-text); font-size:20px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.fmm-incoming-detail__sub { margin:0; color:var(--fmm-muted); font-size:13px; }
.fmm-incoming-detail__track { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; margin:22px 0 14px; padding:14px 16px; border:1px solid var(--fmm-border); border-radius:12px; background:#F9FAFB; }
.fmm-incoming-detail__track span { grid-column:1; color:#6B7280; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.fmm-incoming-detail__track b { grid-column:1; color:var(--fmm-text); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:16px; font-weight:700; overflow-wrap:anywhere; }
.fmm-incoming-detail__track button { grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--fmm-border); border-radius:10px; background:#fff; color:#374151; cursor:pointer; }
.fmm-incoming-detail__track button:hover { background:#F3F4F6; }
.fmm-incoming-detail__facts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; border:0; }
.fmm-incoming-detail__facts > div { padding:12px 14px; border:1px solid var(--fmm-border); border-radius:12px; }
.fmm-incoming-detail__facts dt { margin:0 0 4px; color:var(--fmm-muted); font-size:12px; }
.fmm-incoming-detail__facts dd { margin:0; color:var(--fmm-text); font-size:14px; font-weight:650; overflow-wrap:anywhere; }
.fmm-incoming-detail__note { display:flex; gap:10px; margin:16px 0 20px; padding:12px 14px; border-radius:12px; background:#F3F4F6; color:#4B5563; font-size:13px; line-height:1.5; }
.fmm-incoming-detail__note svg { flex:none; margin-top:2px; color:#9CA3AF; }
.fmm-incoming-detail.is-arrived .fmm-incoming-detail__note { background:#EFF6FF; color:#1E40AF; }
.fmm-incoming-detail.is-arrived .fmm-incoming-detail__note svg { color:#3B82F6; }
.fmm-incoming-detail__note b { display:block; margin-bottom:2px; font-weight:700; }
.fmm-incoming-detail__acts { display:flex; flex-direction:column; gap:10px; }
.fmm-incoming-detail__acts .fmm-btn { box-sizing:border-box; width:100%; justify-content:center; gap:8px; text-decoration:none; }
@media (max-width: 520px) {
    .fmm-incoming-detail { padding:22px 18px; }
    .fmm-incoming-detail__facts { grid-template-columns:1fr; }
}

.fmm-pkgadd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    padding: 26px;
    border: 1.5px dashed var(--fmm-border);
    border-radius: 16px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: var(--fmm-text);
    text-decoration: none;
}

.fmm-pkgadd:hover { border-color: var(--fmm-yellow); background: #FFFDF6; }
/* My Packages: Create Incoming Package | View My U.S. Warehouse, one dashed
   bar split down the middle (client mockup, sheet row 161). */
.fmm-pkgactions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
    border: 1.5px dashed var(--fmm-border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.fmm-pkgactions__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 26px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fmm-text);
    text-decoration: none;
    text-align: center;
}
.fmm-pkgactions__item + .fmm-pkgactions__item { position: relative; }
.fmm-pkgactions__item + .fmm-pkgactions__item::before {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    border-left: 1.5px solid var(--fmm-border);
}
.fmm-pkgactions__item:hover { background: #FFFDF6; color: var(--fmm-text); }
.fmm-pkgactions__ico { flex-shrink: 0; color: #4B5563; }
@media (max-width: 560px) {
    .fmm-pkgactions { grid-template-columns: 1fr; }
    .fmm-pkgactions__item + .fmm-pkgactions__item::before {
        left: 16px; right: 16px; top: 0; bottom: auto;
        border-left: 0; border-top: 1.5px solid var(--fmm-border);
    }
}

.fmm-sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.fmm-pkgadd__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px dashed var(--fmm-faint);
    border-radius: 6px;
    background: transparent;
    color: var(--fmm-muted);
    font-size: 0;
}

.fmm-shopfrom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 22px 0 0;
}

.fmm-shopfrom__label { font-size: 13px; color: var(--fmm-faint); }

.fmm-shopfrom__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--fmm-text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.fmm-shopfrom__pill:hover { border-color: var(--fmm-faint); box-shadow: 0 2px 10px rgba(17, 17, 17, .05); }
.fmm-shopfrom__pill b { color: var(--fmm-faint); letter-spacing: .05em; font-size: 11px; }

/* --- sticky pay bar ------------------------------------------------------ */

.fmm-paybar__inner { gap: 18px; }

/* Count above amount, as on the design — the amount is what people scan for,
   so it gets the size and the count reads as its caption. */
.fmm-paybar__sum { display: block; }
.fmm-paybar__sum em { display: block; font-size: 12.5px; font-style: normal; color: var(--fmm-muted); }
.fmm-paybar b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }

.fmm-paybar__acts { display: flex; gap: 10px; margin-left: auto; }
.fmm-paybar__acts .fmm-btn { padding: 12px 22px; font-size: 14px; }

@media (max-width: 900px) {
    .fmm-statcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .fmm-pkghead { align-items: flex-start; }
    /* Five actions no longer fit one row on a phone (sheet #59): grid them
       two-up, with the pay CTA spanning the full width, so nothing is cut
       off or needs horizontal scrolling. */
    .fmm-paybar__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-left: 0; width: 100%; }
    .fmm-paybar__acts .fmm-btn { justify-content: center; padding: 11px 8px; font-size: 13px; white-space: nowrap; }
    .fmm-paybar__acts .fmm-btn--primary { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .fmm-statcards { grid-template-columns: minmax(0, 1fr); }
    .fmm-pkgfilters { width: 100%; }
    .fmm-pkgfilters button { flex: 1; padding: 9px 10px; }
}

/* =========================================================================
   Nigeria buyer — Orders (Active / Completed / Cancelled / Disputed)
   -------------------------------------------------------------------------
   One card system, four arrangements. `.fmm-ocard` owns the frame and the
   tone; the tab decides the grid and which of the blocks below it uses.
   ========================================================================= */

/* --- tab bar ------------------------------------------------------------- */

/* Scoped to the modifier: .fmm-tabs__list is a rounded pill group on the
   product, storefront and disputes pages, and those must not change. */
.fmm-tabs--underline { padding-bottom: 0; border-bottom: 1px solid var(--fmm-border); margin-bottom: 26px; }

.fmm-tabs--underline .fmm-tabs__list {
    gap: 18px;
    padding: 0;
    border-radius: 0;
    background: none;
}

.fmm-tabs--underline .fmm-tab {
    position: relative;
    padding: 12px 0 14px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--fmm-muted);
}

.fmm-tabs--underline .fmm-tab--on { background: none; box-shadow: none; color: var(--fmm-text); font-weight: 800; }

/* The active underline sits ON the container border, not beside it. */
.fmm-tabs--underline .fmm-tab--on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--fmm-yellow);
}

.fmm-tabs--underline .fmm-tab__count {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--fmm-bg-alt);
    color: var(--fmm-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.fmm-tabs--underline .fmm-tab--on .fmm-tab__count { background: var(--fmm-bg-alt); color: var(--fmm-text); }

/* --- grids --------------------------------------------------------------- */

.fmm-ogrid { display: grid; gap: 20px; }
.fmm-ogrid--1 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fmm-ogrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fmm-ogrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- card frame ---------------------------------------------------------- */

.fmm-ocard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 16px;
    background: #fff;
    padding: 20px;
    transition: border-color .15s, box-shadow .15s;
}

.fmm-ocard:hover { border-color: #E2E4E9; box-shadow: 0 3px 16px rgba(17, 17, 17, .05); }

.fmm-ocard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fmm-ocard__ago { font-size: 12.5px; color: var(--fmm-muted); white-space: nowrap; }

.fmm-ocard__main { display: flex; align-items: flex-start; gap: 14px; }

.fmm-ocard__thumb {
    display: block;
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: 12px;
    background: var(--fmm-bg-alt);
    overflow: hidden;
}

.fmm-ocard__thumb--md { width: 88px; height: 88px; border-radius: 14px; }
.fmm-ocard__thumb--lg { width: 108px; height: 108px; border-radius: 14px; }
.fmm-ocard__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-ocard__info { min-width: 0; flex: 1; }

.fmm-ocard__title { font-size: 15px; font-weight: 800; line-height: 1.3; margin: 0; }
.fmm-ocard__title--lg { font-size: 18px; }
.fmm-ocard__title a { color: inherit; }

.fmm-ocard__store {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fmm-muted);
    margin: 6px 0 0;
}

.fmm-ocard__store svg { flex: none; }

.fmm-ocard__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--fmm-muted);
    margin: 8px 0 0;
}

.fmm-ocard__dot { color: var(--fmm-faint); }

.fmm-ocard__id { display: block; font-size: 12.5px; color: var(--fmm-faint); margin-top: 10px; }

/* ID on the left, price on the right, sharing a baseline. */
.fmm-ocard__idrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.fmm-ocard__idrow .fmm-ocard__id { margin-top: 0; }

.fmm-ocard__price { font-size: 19px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.fmm-ocard__price--lg { display: block; font-size: 24px; margin-top: 12px; }

/* --- status pill --------------------------------------------------------- */

.fmm-ostatus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    background: var(--fmm-bg-alt);
    color: var(--fmm-muted);
}

.fmm-ostatus__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Flat variant for the Completed tab: uppercase, no dot. */
.fmm-ostatus--flat {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 7px;
}

.fmm-ostatus.is-blue   { background: #E8F0FE; color: #1D4ED8; }
.fmm-ostatus.is-amber  { background: #FFF6E5; color: #B45309; }
.fmm-ostatus.is-orange { background: #FFF0E6; color: #C2410C; }
.fmm-ostatus.is-green  { background: #E4F7EC; color: #15803D; }
.fmm-ostatus.is-red    { background: #FEE7E7; color: #DC2626; }
.fmm-ostatus.is-muted  { background: var(--fmm-bg-alt); color: var(--fmm-muted); }

/* --- journey bar (Active) ------------------------------------------------ */

.fmm-ostage { display: block; }

.fmm-ostage__labels { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.fmm-ostage__labels span {
    font-size: 11.5px;
    color: var(--fmm-faint);
    white-space: nowrap;
}

/* Only the stage you're at is emphasised — the rest are context. */
.fmm-ostage__labels span.is-on { color: var(--fmm-text); font-weight: 700; }
.fmm-ostage__labels span:first-child { text-align: left; }
.fmm-ostage__labels span:last-child { text-align: right; }

.fmm-ostage__bar { height: 5px; border-radius: 999px; background: var(--fmm-bg-alt); overflow: hidden; }

.fmm-ostage__bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--fmm-yellow);
    transition: width .3s;
}

.fmm-ostage.is-blue   .fmm-ostage__bar i { background: #3B82F6; }
.fmm-ostage.is-orange .fmm-ostage__bar i { background: #F97316; }
.fmm-ostage.is-green  .fmm-ostage__bar i { background: #16A34A; }
.fmm-ostage.is-red    .fmm-ostage__bar i { background: #DC2626; }

/* --- fact block (Cancelled / Disputed) ----------------------------------- */

.fmm-ofacts {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--fmm-bg-alt);
}

/* Warm ground for a dispute — it is not a neutral state. */
.fmm-ofacts--warm { background: #FDFAF3; }

.fmm-ofacts > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.fmm-ofacts dt { font-size: 13px; color: var(--fmm-muted); }

.fmm-ofacts dd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.fmm-ofacts dd.is-green { color: #15803D; }
.fmm-ofacts dd.is-blue  { color: #2563EB; }
.fmm-ofacts dd.is-red   { color: #DC2626; }
.fmm-ofacts dd.is-muted { color: var(--fmm-muted); font-weight: 600; }

/* --- buttons ------------------------------------------------------------- */

.fmm-ocard__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.fmm-ocard__pair { display: flex; align-items: center; gap: 10px; width: 100%; }

.fmm-obtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, opacity .15s;
}

.fmm-obtn:disabled { opacity: .6; cursor: not-allowed; }

.fmm-obtn--dark { background: var(--fmm-dark); color: #fff; }
.fmm-obtn--dark:hover { background: #111; }

.fmm-obtn--brand { background: var(--fmm-yellow); color: var(--fmm-dark); }
.fmm-obtn--brand:hover { background: var(--fmm-yellow-dark); }

.fmm-obtn--ghost { background: #fff; border-color: var(--fmm-border); color: var(--fmm-text); }
.fmm-obtn--ghost:hover { border-color: var(--fmm-faint); }

.fmm-obtn--soft { background: var(--fmm-bg-alt); color: var(--fmm-text); }
.fmm-obtn--soft:hover { background: #F0F1F4; }

/* Square, so the primary button keeps the width it needs. */
.fmm-obtn--icon {
    flex: none;
    width: 46px;
    padding: 13px 0;
    background: #fff;
    border-color: var(--fmm-border);
    color: var(--fmm-text);
}

.fmm-obtn--icon:hover { border-color: var(--fmm-faint); }

/* --- Completed row ------------------------------------------------------- */

.fmm-ocard--row {
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
    padding: 22px;
}

.fmm-ocard--row .fmm-ocard__info { flex: 1; }

.fmm-ocard__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex: none;
    width: 330px;
    padding-left: 22px;
    border-left: 1px solid var(--fmm-border);
}

.fmm-ocard__acts2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.fmm-ocard__acts2 .fmm-obtn { flex: none; padding: 12px 14px; font-size: 13.5px; }

/* --- pagination ---------------------------------------------------------- */

.fmm-opager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--fmm-border);
}

.fmm-opager__count { font-size: 13.5px; color: var(--fmm-muted); margin: 0; }
.fmm-opager__pages { display: flex; align-items: center; gap: 8px; }

.fmm-opager__i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fmm-text);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.fmm-opager__i:hover:not(:disabled) { border-color: var(--fmm-faint); }
.fmm-opager__i:disabled { opacity: .35; cursor: not-allowed; }
.fmm-opager__i.is-on { background: var(--fmm-yellow); border-color: var(--fmm-yellow); color: var(--fmm-dark); }

.fmm-opager__gap { padding: 0 2px; color: var(--fmm-faint); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
    .fmm-ogrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .fmm-ocard--row { flex-direction: column; }
    .fmm-ocard__side { width: 100%; padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid var(--fmm-border); align-items: stretch; }
    .fmm-ostatus--flat { align-self: flex-start; }
    .fmm-tabs--underline .fmm-tabs__list { gap: 14px; }
}

@media (max-width: 700px) {
    .fmm-ogrid--2, .fmm-ogrid--3 { grid-template-columns: minmax(0, 1fr); }
    .fmm-opager { justify-content: center; }
    .fmm-ocard__acts2 { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Nigeria buyer — Package detail
   -------------------------------------------------------------------------
   Two columns; left is the parcel and its journey, right is the actions the
   buyer takes on it. Every block is a self-contained `.fmm-pd__card` so the
   order can change without touching this file. Modals (declaration/resize/
   pay) still use the earlier .fmm-pay / .fmm-modal styles — nothing here
   overrides them.
   ========================================================================= */

.fmm-pd {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
}
.fmm-section:has(.fmm-pd) > .fmm-container { max-width: 1096px; }

.fmm-pd__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fmm-pd__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fmm-pd__alert { grid-column: 1 / -1; }

.fmm-pd__card {
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 3px 10px rgba(16, 24, 40, .06);
}

.fmm-pd__shipment { padding: 0; overflow: hidden; }

.fmm-pd__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fmm-pd__cardhead b { font-size: 14.5px; font-weight: 800; }
.fmm-pd__cardhead b { display: flex; align-items: center; gap: 0; }
.fmm-pd__cardhead b svg,
.fmm-pd__cardhead b img {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 6px;
    margin: 0 8px 0 0 !important;
    border-radius: 9px;
    background: #F3F4F6;
}
.fmm-pd__cardhead b .fmm-pd__heading-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-right: 8px; border-radius: 9px;
    background: #F3F4F6; flex: none;
}
.fmm-pd__cardhead b .fmm-pd__heading-icon img {
    display: block; width: 18px; height: 14px; padding: 0; margin: 0 !important;
    border-radius: 0; background: transparent; object-fit: contain;
}
.fmm-pd__cardhead em { font-size: 12px; font-style: normal; color: var(--fmm-muted); }

/* --- top alert bar ------------------------------------------------------- */

.fmm-pd__alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #FFF6E5;
    border: 1px solid #F9DFA0;
}

.fmm-pd__alert-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: none; border-radius: 10px;
    background: #FEE9C7; color: #B45309;
}
.fmm-pd__alert-ico img { display: block; width: 14px; height: 14px; object-fit: contain; }

.fmm-pd__alert-body { flex: 1; min-width: 0; display: block; }
.fmm-pd__alert-body b { display: block; font-size: 14px; font-weight: 800; color: #92400E; }
.fmm-pd__alert-body em { display: block; font-size: 12.5px; font-style: normal; color: #92400E; margin-top: 3px; }

/* The alert's action (Complete Now) inherits `.fmm-obtn`'s `flex:1`, which
   stretches it across the whole right side of the bar. Snap back to
   intrinsic width; the alert's flex layout keeps it right-aligned by
   virtue of the body row already taking `flex:1`. */
.fmm-pd__alert .fmm-obtn { flex: none; padding: 11px 18px; white-space: nowrap; }
.fmm-pd__alert .fmm-obtn--brand { background: #F5A623; border-color: #F5A623; color: #fff; }

/* Pay bar under the alert: same shape, green "ready" palette. */
.fmm-pd__paybar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #ECFDF3;
    border: 1px solid #ABEFC6;
}
.fmm-pd__paybar > span { flex: 1; min-width: 0; }
.fmm-pd__paybar b { display: block; font-size: 14px; font-weight: 800; color: #05603A; }
.fmm-pd__paybar em { display: block; font-size: 12.5px; font-style: normal; color: #05603A; margin-top: 3px; }
.fmm-pd__paybar .fmm-obtn { flex: none; padding: 11px 22px; white-space: nowrap; }

/* Customs declaration: one block per item in the box (sheet row 117). */
.fmm-decl-item.is-multi { border: 1px solid var(--fmm-border); border-radius: 12px; padding: 12px 14px 4px; margin-bottom: 12px; }
.fmm-decl-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.fmm-decl-item__remove { border: 0; background: none; color: #B91C1C; font-weight: 700; font-size: 12px; cursor: pointer; padding: 4px; }
.fmm-decl-add { border: 1px dashed #F5A623; background: #FFFBEB; color: #92400E; font-weight: 700; font-size: 13px; border-radius: 10px; padding: 10px; width: 100%; cursor: pointer; margin: 2px 0 12px; }
.fmm-decl-total { margin: 0 0 12px; font-size: 13px; color: var(--fmm-muted); }
.fmm-decl-total b { color: var(--fmm-ink, #111); }

/* Document row while its file uploads. */
.fmm-obtn.is-busy { opacity: .7; cursor: progress; }

/* --- hero image ---------------------------------------------------------- */

.fmm-pd__hero {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    border-radius: 14px;
    /* Softer ground than the earlier flat purple — a slate-to-charcoal that
       reads as a package-tile placeholder, not a colour swatch. When a real
       photo is present it covers the tile via `object-fit: cover` below. */
    background: #1F2937 linear-gradient(135deg, #334155 0%, #0F172A 100%);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

/* Watermark box icon centred on the ground when no photo has been uploaded.
   The lightbox never opens for an empty tile (:disabled is set in the blade),
   so this is purely a visual — a plain gradient invites the buyer to click
   what looks like a photo that isn't there. */
.fmm-pd__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round' opacity='.16'%3E%3Cpath d='M3 8l9-4 9 4v8l-9 4-9-4z'/%3E%3Cpath d='M3 8l9 4 9-4M12 12v8'/%3E%3C/svg%3E") no-repeat center;
    background-size: 90px 90px;
    pointer-events: none;
}

/* And its label, so an unphoto'd package looks intentional rather than broken. */
.fmm-pd__hero::after {
    content: "No warehouse photo yet";
    position: absolute;
    top: 50%; left: 0; right: 0;
    transform: translateY(50px);
    text-align: center;
    color: rgba(255, 255, 255, .55);
    font-size: 11.5px;
    letter-spacing: .04em;
    pointer-events: none;
}

/* When the tile has an image, the placeholder + label must go — otherwise
   they'd shadow the actual photo. The blade wraps the img in a <template
   x-if>, so this rule keys on the img presence via :has() (Chrome/Safari
   support this, Firefox 121+). Older browsers just show a tiny watermark
   through a real photo, which is unattractive but not broken. */
.fmm-pd__hero:has(img)::before,
.fmm-pd__hero:has(img)::after { display: none; }

.fmm-pd__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fmm-pd__hero-photos {
    position: absolute; top: 14px; right: 14px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(0, 0, 0, .55); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    backdrop-filter: blur(6px);
}

.fmm-pd__hero-indicators {
    position: absolute; top: 27px; left: 16px;
    display: flex; align-items: center; gap: 7px;
}
.fmm-pd__hero-indicators i {
    display: block; width: 25px; height: 3px; border-radius: 999px;
    background: rgba(255, 255, 255, .35);
}
.fmm-pd__hero-indicators i.is-active { background: #FBBF24; }
.fmm-pd__hero-photos svg { flex: none; }
.fmm-pd__hero-photos::before { display: none; }
.fmm-pd__hero-status img { display: block; width: 10px; height: 10px; object-fit: contain; flex: none; }

.fmm-pd__hero-foot {
    position: absolute; left: 18px; right: 200px; bottom: 16px;
    display: block; color: #fff;
}

.fmm-pd__hero-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(245, 158, 11, .2); color: #FBBF24;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
    margin-bottom: 10px;
}
.fmm-pd__hero-status--consolidated {
    margin-left: 8px;
    background: rgba(34, 197, 94, .22); color: #4ADE80;
}
.fmm-pd__hero-status--pending {
    margin-left: 8px;
    background: rgba(255, 255, 255, .18); color: #fff;
}

.fmm-pd__hero-title { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; }
.fmm-pd__hero-sub  { display: block; font-size: 12.5px; font-style: normal; color: rgba(255, 255, 255, .78); margin-top: 4px; }

.fmm-pd__hero-id {
    position: absolute; right: 18px; bottom: 16px;
    display: block; font-size: 10.5px; letter-spacing: .05em;
    color: rgba(255, 255, 255, .68);
    text-align: right;
}
.fmm-pd__hero-id b { display: block; font-size: 13px; font-weight: 800; color: #fff; margin-top: 2px; }

/* --- source card --------------------------------------------------------- */

.fmm-pd__source { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; }

.fmm-pd__source-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--fmm-bg-alt); color: var(--fmm-muted);
    flex: none;
}
.fmm-pd__source-logo--amazon img { display: block; width: 23px; height: 23px; object-fit: contain; }

.fmm-pd__source-txt { flex: 1; min-width: 0; display: block; }
.fmm-pd__source-txt em { font-size: 10px; font-style: normal; letter-spacing: .06em; color: var(--fmm-faint); }
.fmm-pd__source-txt b { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; }

.fmm-pd__source-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: #FEF3C7; color: #92400E;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.fmm-pd__source-chip img { display: block; width: 12px; height: 12px; object-fit: contain; }
.fmm-pd__source-chip i { width: 6px; height: 6px; border-radius: 50%; background: #F59E0B; }
.fmm-pd__source-chip--ok { background: #DCFCE7; color: #15803D; }
.fmm-pd__source-chip--ok i { background: #16A34A; }

/* --- tracking number ----------------------------------------------------- */

.fmm-pd__tracking { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.fmm-pd__tracking {
    position: relative;
    margin: 0 20px 16px;
    padding: 12px;
    gap: 3px 10px;
    border: 1px solid #EAE7E4;
    border-radius: 13px;
    background: #F5F4F3;
}

.fmm-pd__tracking em { font-size: 10px; font-style: normal; letter-spacing: .06em; color: var(--fmm-faint); }
.fmm-pd__tracking b {
    flex: 1; min-width: 0;
    font-family: 'Menlo', 'Consolas', ui-monospace, monospace;
    font-size: 15px; font-weight: 700; letter-spacing: .02em;
    word-break: break-all;
}
.fmm-pd__tracking em + b { margin-top: 2px; }

/* Stack the label above the number, buttons on the right. */
.fmm-pd__tracking { flex-wrap: wrap; align-items: center; }
.fmm-pd__tracking > em { flex: 0 0 100%; }
.fmm-pd__tracking > b  { flex: 1 1 auto; }

.fmm-pd__tracking-acts { display: flex; gap: 8px; flex: none; }

.fmm-pd__iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    border: 1px solid var(--fmm-border);
    background: #fff; color: var(--fmm-muted);
    cursor: pointer;
}
.fmm-pd__iconbtn:hover { border-color: var(--fmm-faint); color: var(--fmm-text); }

/* --- 3-column meta grid -------------------------------------------------- */

.fmm-pd__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    border-width: 1px 0 0;
    border-radius: 0;
}

.fmm-pd__meta > div { padding: 12px 12px; border-left: 1px solid var(--fmm-border); text-align: center; }
.fmm-pd__meta > div:first-child { border-left: 0; }
.fmm-pd__meta em { font-size: 10px; font-style: normal; letter-spacing: .06em; color: var(--fmm-faint); }
.fmm-pd__meta b { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; margin-top: 4px; }

/* --- shipment timeline --------------------------------------------------- */

.fmm-pd__timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.fmm-pd__timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 0;
}

/* Connector between dots. */
.fmm-pd__timeline li + li::before {
    content: "";
    position: absolute; left: 13px; top: -2px;
    width: 2px; height: 14px;
    background: var(--fmm-border);
}

.fmm-pd__timeline-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: transparent; border: 0;
    color: transparent;
    align-self: start;
    position: relative;
}
.fmm-pd__timeline-dot img { display: block; width: 14px; height: 14px; object-fit: contain; }

.fmm-pd__timeline .is-done .fmm-pd__timeline-dot { background: #D1FAE5; }
.fmm-pd__timeline .is-now .fmm-pd__timeline-dot { background: #FEF3C7; }
.fmm-pd__timeline .is-pending .fmm-pd__timeline-dot { background: #F3F4F6; }
.fmm-pd__timeline .is-now .fmm-pd__timeline-dot img { width: 12px; height: 12px; }
.fmm-pd__timeline .is-pending .fmm-pd__timeline-dot img { opacity: .5; }
.fmm-pd__timeline-body em img { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; object-fit: contain; }

.fmm-pd__timeline-body { min-width: 0; display: block; align-self: center; }
.fmm-pd__timeline-body b { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-pd__timeline-body em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; }

.fmm-pd__timeline .is-now   .fmm-pd__timeline-body b  { color: #B45309; }
.fmm-pd__timeline .is-now   .fmm-pd__timeline-body em { color: #B45309; }
.fmm-pd__timeline .is-pending .fmm-pd__timeline-body b  { color: var(--fmm-muted); }
.fmm-pd__timeline .is-pending .fmm-pd__timeline-body em { color: var(--fmm-faint); }

.fmm-pd__timeline-when {
    align-self: center; font-size: 12px;
    color: var(--fmm-muted); white-space: nowrap;
}
.fmm-pd__timeline .is-now   .fmm-pd__timeline-when { color: #B45309; font-weight: 700; }
.fmm-pd__timeline .is-pending .fmm-pd__timeline-when { color: var(--fmm-faint); }

/* --- weights ------------------------------------------------------------- */

.fmm-pd__weights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.fmm-pd__weights > div {
    padding: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    background: #F5F4F3;
}

.fmm-pd__weights em { font-size: 10px; font-style: normal; letter-spacing: .06em; color: var(--fmm-faint); }
.fmm-pd__weights b  { display: block; font-size: 22px; font-weight: 800; margin-top: 8px; letter-spacing: -.02em; }
.fmm-pd__weights b i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--fmm-muted); margin-left: 3px; }

.fmm-pd__weights > .fmm-pd__weights-bill { background: #FFF8E6; border: 2px solid #F5B400; }
.fmm-pd__weights > .fmm-pd__weights-bill em { color: #D97706; font-weight: 700; }

.fmm-pd__note {
    display: flex; align-items: center; gap: 6px;
    margin: 12px 0 0; padding: 8px 10px;
    background: var(--fmm-bg-alt); border-radius: 10px;
    font-size: 12px; color: var(--fmm-muted);
}
.fmm-pd__note svg { color: var(--fmm-faint); flex: none; }

.fmm-pd__note--plain { background: none; padding: 8px 0 0; color: var(--fmm-faint); font-size: 11.5px; }

.fmm-pd__dimensions {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fmm-border);
}
.fmm-pd__dimensions-label {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fmm-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em;
}
.fmm-pd__dimensions-label img { display: block; width: 12px; height: 12px; object-fit: contain; }
.fmm-pd__dimensions > b { color: var(--fmm-text); font-size: 13px; font-weight: 800; white-space: nowrap; }

/* --- storage ring -------------------------------------------------------- */

.fmm-pd__ring {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

/* Ring is a conic-gradient background with a white inner circle mask. */
.fmm-pd__ring-svg {
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 50%;
    position: relative;
    flex: none;
}
.fmm-pd__ring-svg::before {
    content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff;
}
.fmm-pd__ring-svg b { position: relative; font-size: 22px; font-weight: 800; line-height: 1; }
.fmm-pd__ring-svg em { position: relative; display: block; font-size: 9px; font-style: normal; letter-spacing: .1em; color: var(--fmm-muted); margin-top: 2px; text-align: center; }

.fmm-pd__ring-body b  { display: block; font-size: 14px; font-weight: 800; }
.fmm-pd__ring-body em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 4px; line-height: 1.4; }

.fmm-pd__ringfoot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding-top: 12px; margin-top: 12px;
    border-top: 1px solid var(--fmm-border);
    font-size: 12px; color: var(--fmm-muted);
}
.fmm-pd__ringfoot b { color: #16A34A; font-weight: 700; }

/* --- documents + compliance rows ---------------------------------------- */

.fmm-pd__docprog {
    height: 4px; border-radius: 999px; background: var(--fmm-bg-alt);
    overflow: hidden; margin-bottom: 14px;
}
.fmm-pd__docprog i { display: block; height: 100%; background: #FBBF24; border-radius: 999px; }

.fmm-pd__docs, .fmm-pd__complist { display: flex; flex-direction: column; gap: 10px; }

.fmm-pd__doc {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--fmm-bg-alt);
}

.fmm-pd__doc-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9px; color: #fff;
    background: #F3F4F6; flex: none;
}

.fmm-pd__doc-ico img { display: block; width: 14px; height: 14px; object-fit: contain; }
.fmm-pd__doc.is-ok    .fmm-pd__doc-ico { background: #D1FAE5; }
.fmm-pd__doc.is-amber .fmm-pd__doc-ico { background: #FEF3C7; }
.fmm-pd__doc.is-red   .fmm-pd__doc-ico { background: #FEE2E2; }

.fmm-pd__doc-body { min-width: 0; display: block; }
.fmm-pd__doc-body b { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-pd__doc-body em { display: block; font-size: 11.5px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; }
.fmm-pd__doc-status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; vertical-align: 1px; }
.fmm-pd__doc-status-dot--ok { background: #16A36A; }
.fmm-pd__doc-status-icon { display: inline-block !important; width: 8px !important; height: 8px !important; margin-right: 4px; vertical-align: 0; object-fit: contain; }

/* Shared tag component the compliance rows + storage header both use. */
.fmm-pd__tag {
    display: inline-flex; align-items: center;
    padding: 4px 9px; border-radius: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    background: var(--fmm-bg-alt); color: var(--fmm-muted);
}
.fmm-pd__tag--ok     { background: #DCFCE7; color: #15803D; }
.fmm-pd__tag--warn   { background: #FEF3C7; color: #92400E; }
.fmm-pd__tag--danger { background: #FEE2E2; color: #B91C1C; }

/* --- shipping payment ---------------------------------------------------- */

.fmm-pd__paylines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.fmm-pd__payline { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.fmm-pd__payline span em {
    display: inline-block; margin-left: 6px; padding: 2px 6px;
    border-radius: 4px; background: #E5E7EB; color: #6B7280;
    font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .04em;
}
.fmm-pd__payline b { font-weight: 800; color: var(--fmm-text); }

.fmm-pd__payline--total {
    margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--fmm-border);
    font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fmm-muted);
}
.fmm-pd__payline--total b { font-size: 22px; letter-spacing: -.02em; color: var(--fmm-text); }

.fmm-pd__secure {
    display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
    font-size: 12px; color: var(--fmm-muted);
}
.fmm-pd__secure svg { color: #16A34A; }
.fmm-pd__secure b { font-weight: 700; color: var(--fmm-text); }

.fmm-pd__paymethods {
    display: flex; justify-content: center; gap: 12px; padding: 10px 0 0;
    font-size: 11px; color: var(--fmm-faint); text-transform: uppercase; letter-spacing: .1em;
}

.fmm-pd__line-meta { font-size: 12px; color: var(--fmm-muted); margin: 8px 0 0; }

/* --- escrow ribbon ------------------------------------------------------- */

.fmm-pd__protect {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: 12px;
    background: #fff; border: 1px solid var(--fmm-border);
    color: var(--fmm-text);
    box-shadow: 0 3px 10px rgba(16, 24, 40, .06);
}

.fmm-pd__protect-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    background: linear-gradient(135deg, #FDBA36, #F59E0B); color: #fff;
}
.fmm-pd__protect b { display: block; font-size: 13.5px; font-weight: 800; }
.fmm-pd__protect em { display: block; font-size: 12px; font-style: normal; margin-top: 3px; line-height: 1.5; color: var(--fmm-muted); }

/* Dark estimate area and light payment action footer from the package design. */
.fmm-pd__payment { padding: 0; overflow: hidden; background: #fff; }
.fmm-pd__payment-summary { padding: 20px 20px 5px; background: linear-gradient(110deg, #111111 0%, #17182D 100%); color: #fff; }
.fmm-pd__payment .fmm-pd__cardhead { margin: 0; padding: 18px 20px 12px; }
.fmm-pd__payment .fmm-pd__cardhead b { color: #fff; }
.fmm-pd__payment .fmm-pd__cardhead b svg,
.fmm-pd__payment .fmm-pd__cardhead b img { color: #F59E0B !important; background: rgba(255,255,255,.1); border-radius: 8px; }
.fmm-pd__payment .fmm-pd__cardhead { padding: 0 0 18px; }
.fmm-pd__payment .fmm-pd__paylines { margin: 0; padding: 0 0 20px; gap: 12px; }
.fmm-pd__payment .fmm-pd__payline { color: rgba(255,255,255,.62); }
.fmm-pd__payment .fmm-pd__payline b { color: #fff; }
.fmm-pd__payment .fmm-pd__payline span em { background: rgba(245,158,11,.2); color: #FBBF24; }
.fmm-pd__payment .fmm-pd__payline--total { align-items: flex-end; border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.55); }
.fmm-pd__payment .fmm-pd__total-value { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 3px; }
.fmm-pd__payment .fmm-pd__total-value > span:first-child { grid-column: 1 / -1; display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; line-height: 1.3; }
.fmm-pd__payment .fmm-pd__total-value > .fmm-pd__total-currency { color: rgba(255,255,255,.62); font-size: 18px; font-weight: 500; }
.fmm-pd__payment .fmm-pd__total-value > b { display: block; margin-top: 2px; color: #fff; font-size: 30px; line-height: 1; }
.fmm-pd__payment .fmm-pd__secure { justify-content: flex-end; flex: none; gap: 4px; margin: 0 0 6px; color: rgba(255,255,255,.45); font-size: 10px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.fmm-pd__payment .fmm-pd__secure svg { color: #FBBF24; }
.fmm-pd__payment .fmm-pd__secure b { color: #FBBF24; font-size: 10px; }
.fmm-pd__payment > .fmm-obtn { margin: 16px 20px 0; width: calc(100% - 40px); border-radius: 12px; background: #111; color: #fff; box-shadow: 0 8px 18px rgba(245,158,11,.16); }
.fmm-pd__payment .fmm-pd__paymethods { align-items: center; margin-top: 12px; padding: 0 10px 14px; color: #87909F; background: #fff; text-transform: none; letter-spacing: 0; font-size: 9px; }
.fmm-pd__paymethod { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.fmm-pd__paymethod > img { display: block; width: 13px; height: 13px; object-fit: contain; flex: none; }
.fmm-pd__pay-logo { display: block; height: 13px; flex: none; }
.fmm-pd__pay-logo--visa { width: 25px; }
.fmm-pd__pay-logo--mastercard { width: 18px; }
.fmm-pd__pay-logo--apple { width: 13px; color: #111827; }
.fmm-pd__payment .fmm-pd__line-meta { padding: 0 20px 14px; }

/* --- requests card ------------------------------------------------------- */

.fmm-pd__requests { display: flex; flex-direction: column; gap: 8px; }
.fmm-pd__reqstate { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fmm-border); font-size: 12.5px; color: var(--fmm-muted); }
.fmm-pd__reqstate p { margin: 0 0 4px; }

/* --- shared button variants used only on this page ---------------------- */

.fmm-obtn--wide { flex: none; width: 100%; margin-top: 4px; }
.fmm-obtn--xs   { padding: 7px 12px; font-size: 12px; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .fmm-pd { grid-template-columns: minmax(0, 1fr); }
    .fmm-pd__hero-foot { right: 18px; }
    .fmm-pd__hero-id { position: static; text-align: left; padding: 6px 18px 12px; background: rgba(0,0,0,.55); }
}

@media (max-width: 700px) {
    /* Category / delivery / value stay side by side, just tighter: stacked they
       turned three short facts into a screen-high block. */
    .fmm-pd__meta > div { padding: 10px 6px; }
    .fmm-pd__meta em { font-size: 9px; letter-spacing: .04em; }
    .fmm-pd__meta b { font-size: 12px; overflow-wrap: anywhere; }
    .fmm-pd__weights { grid-template-columns: minmax(0, 1fr); }

    /* The status chips drop under the store name instead of squeezing it
       ("Amazon US" was wrapping to "Am / US"). */
    .fmm-pd__source { flex-wrap: wrap; row-gap: 8px; }
    .fmm-pd__source-txt { flex: 1 1 calc(100% - 52px); }

    /* "Action Required" squeezed its text into a one-word column beside the
       button (sheet row 96): text beside the icon, button full width below. */
    .fmm-pd__alert { flex-wrap: wrap; align-items: flex-start; }
    .fmm-pd__alert-body { flex: 1 1 calc(100% - 50px); }
    .fmm-pd__alert .fmm-obtn { width: 100%; justify-content: center; }
}

/* =========================================================================
   Nigeria buyer — Photo lightbox
   -------------------------------------------------------------------------
   Figma gallery slide: a dimmed page behind a framed warehouse photo, with
   progress segments, package/status metadata, a close control and a caption.
   Kept independent of .fmm-modal because this covers the full viewport.
   ========================================================================= */

.fmm-lb {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}

.fmm-lb__bg {
    position: absolute; inset: 0;
    background: rgba(9, 12, 20, .64);
    backdrop-filter: blur(5px);
}

.fmm-lb__box {
    position: relative; z-index: 1;
    width: min(900px, calc(100vw - 48px));
    aspect-ratio: 1.28;
    max-height: 82vh;
    overflow: hidden;
    border-radius: 14px;
    background: #05080C;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.fmm-lb__progress {
    position: absolute; z-index: 3; top: 13px; left: 20px; right: 64px;
    display: flex; gap: 7px;
}
.fmm-lb__progress-segment {
    display: block; flex: 1; min-width: 0; height: 3px; padding: 0;
    border: 0; border-radius: 99px; background: rgba(255, 255, 255, .27);
    cursor: pointer;
}
.fmm-lb__progress-segment.is-viewed { background: rgba(255, 255, 255, .56); }
.fmm-lb__progress-segment.is-active { background: #fff; }
.fmm-lb__progress-segment:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.fmm-lb__top {
    position: absolute; z-index: 3; top: 22px; left: 20px; right: 18px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    color: #fff;
}

.fmm-lb__meta b { display: inline; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: #fff; }
.fmm-lb__status { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 11px; color: rgba(255, 255, 255, .72); }
.fmm-lb__status i { width: 6px; height: 6px; border-radius: 50%; background: #60A5FA; }
.fmm-lb__meta em { display: block; font-size: 10px; font-style: normal; color: rgba(255, 255, 255, .57); margin-top: 4px; }

.fmm-lb__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-top: -1px; border-radius: 8px;
    background: transparent; color: rgba(255, 255, 255, .8);
    border: 0; cursor: pointer;
}
.fmm-lb__close:hover { background: rgba(255, 255, 255, .18); }

.fmm-lb__stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: #05080C;
}

.fmm-lb__img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}

.fmm-lb__caption {
    position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    width: min(505px, calc(100% - 48px));
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px;
    background: rgba(17, 19, 24, .86);
    color: #fff;
    backdrop-filter: blur(12px);
}

.fmm-lb__caption-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; border-radius: 10px;
    background: rgba(59, 130, 246, .18); color: #60A5FA;
}
.fmm-lb__caption-copy { display: block; flex: 1; min-width: 0; }
.fmm-lb__caption b { display: block; font-size: 13px; font-weight: 700; }
.fmm-lb__caption em { display: block; font-size: 11px; font-style: normal; color: rgba(255, 255, 255, .62); margin-top: 3px; }

.fmm-lb__count {
    padding: 6px 12px; border-radius: 999px; margin-left: auto;
    background: rgba(255, 255, 255, .12);
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .fmm-lb { padding: 16px; }
    .fmm-lb__box { width: calc(100vw - 32px); aspect-ratio: 1 / 1.08; max-height: 78vh; }
    .fmm-lb__progress { top: 12px; left: 14px; right: 52px; gap: 4px; }
    .fmm-lb__top { top: 21px; left: 14px; right: 12px; }
    .fmm-lb__caption { bottom: 14px; width: calc(100% - 28px); gap: 9px; padding: 10px; }
    .fmm-lb__caption-icon { width: 36px; height: 36px; }
    .fmm-lb__caption em { font-size: 10px; }
}

/* =========================================================================
   Nigeria buyer — Confirm Payment polish
   -------------------------------------------------------------------------
   Small overrides on top of the earlier .fmm-pay* rules to bring the modal
   in line with the Figma: bigger wallet icon and total, softer left ground
   (still yellow but a touch lighter to match the frame), a proper backdrop
   behind the box, and a wider box so the two-column split breathes.
   ========================================================================= */

/* .fmm-modal already has its own backdrop earlier in this file — do NOT
   redefine it here, it's shared across every modal in the codebase. This
   block only touches classes scoped to the pay dialog. */

.fmm-pay {
    grid-template-columns: 360px minmax(0, 1fr);
    width: min(960px, 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

/* Slightly warmer, matches the Figma frame. */
.fmm-pay__left { background: #FFF8E6; padding: 22px 26px 28px; }

/* The wallet mark is the visual anchor of the left column; the Figma has
   it noticeably larger than the earlier 46px chip. */
.fmm-pay__ico {
    width: 64px; height: 64px;
    margin: 6px auto 16px;
    box-shadow: 0 6px 18px rgba(224, 159, 12, .35);
}
.fmm-pay__ico svg { width: 28px; height: 28px; }

.fmm-pay__total     { font-size: 38px; letter-spacing: -.03em; }
.fmm-pay__totallabel { margin-bottom: 22px; }

/* Package Summary card gets a thin border rather than floating in the tint;
   the Figma draws a soft border around it. */
.fmm-pay__summary {
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

/* "View Details" link colour matches the yellow-dark accent everywhere else. */
.fmm-pay__summaryhead a {
    display: inline-flex; align-items: center; gap: 4px;
    color: #2563EB;
}
.fmm-pay__summaryhead a::before {
    content: "";
    display: inline-block;
    width: 11px; height: 11px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 4h6v6' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 4l-9 9' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18 14v5a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 4h6v6' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 4l-9 9' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18 14v5a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}

/* The Amount to Deduct row is red in the Figma — the inline style on the
   blade sets colour, but the label side should follow. */
.fmm-pay__line { padding: 8px 0; font-size: 13.5px; }
.fmm-pay__line b { font-size: 13.5px; }
.fmm-pay__line--total b { font-size: 16px; }

/* Cancel link at the bottom of the right rail: black, centered, no pill. */
.fmm-vlink {
    display: block;
    margin: 12px auto 0;
    padding: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--fmm-text);
    background: none;
    border: 0;
    cursor: pointer;
    text-align: center;
}
.fmm-vlink:hover { color: #000; text-decoration: underline; }

/* =========================================================================
   Nigeria buyer — Delivery modal polish
   -------------------------------------------------------------------------
   The multi-package pay flow is drawn as a full page in the Figma; here
   it's still a modal (rewiring the route + state machine into a fresh
   /pay page is a bigger change than a visual polish) but each row now
   looks like the Figma's package card, and the summary + insurance
   section reads the same. Same state, same actions — new paint.
   ========================================================================= */

/* Section labels inside the modal — "SELECTED PACKAGES" / "PACKAGE INSURANCE". */
.fmm-delivery__sectionlabel {
    display: block;
    margin: 14px 0 10px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--fmm-faint);
}

/* Top row of the card: source + PKG id on the left, "Ready" pill right. */
.fmm-delivery__row-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.fmm-delivery__source { display: flex; align-items: center; gap: 10px; min-width: 0; }

.fmm-delivery__source-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--fmm-bg-alt); color: var(--fmm-muted);
    flex: none;
}

.fmm-delivery__source b  { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.fmm-delivery__source em { display: block; font-size: 11px; font-style: normal; color: var(--fmm-faint); margin-top: 2px; letter-spacing: .02em; }

.fmm-delivery__badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: #DCFCE7; color: #15803D;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    flex: none;
}
.fmm-delivery__badge i { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }

/* Middle row: image thumb, product name + meta, est. shipping. */
.fmm-delivery__row-body {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
}

.fmm-delivery__thumb {
    display: block;
    width: 60px; height: 60px; border-radius: 10px;
    background: var(--fmm-bg-alt);
    overflow: hidden;
}
.fmm-delivery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Reuse of the earlier .fmm-delivery__pkg name/meta pair — the previous
   ellipsis kept a two-word tracking on one line, which we do NOT want when
   the label is a product title. */
.fmm-delivery__pkg b {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 14px; font-weight: 700; line-height: 1.35;
}

.fmm-delivery__cost { text-align: right; }
.fmm-delivery__cost em { display: block; font-size: 10px; font-style: normal; letter-spacing: .06em; color: var(--fmm-faint); text-transform: uppercase; }
.fmm-delivery__cost b { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; }

/* Route (mode toggle + destination) tucked under the body, small ground so
   the visual weight stays on the product and price above. */
.fmm-delivery__row-route {
    display: flex; align-items: center; gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--fmm-border);
}
.fmm-delivery__row-route .fmm-toggle { flex: none; }
.fmm-delivery__row-route .fmm-delivery__dest { flex: 1; min-width: 0; margin: 0; }

/* The scroll body pads slightly so the last card's bottom breathes. */
.fmm-delivery__rows { padding-right: 2px; }

@media (max-width: 640px) {
    .fmm-delivery__row-body { grid-template-columns: 52px minmax(0, 1fr); }
    .fmm-delivery__cost { grid-column: 2 / -1; text-align: left; margin-top: 4px; }
    .fmm-delivery__row-route { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   Nigeria buyer — Pay Shipping page
   -------------------------------------------------------------------------
   Two columns and a sticky footer. Left = selected package cards + document
   audit; right = cost breakdown, insurance opt-in, payment method. Footer
   holds the total and the Pay Now button so the CTA is always in reach.
   Class prefix `.fmm-pp__` — package pay.
   ========================================================================= */

.fmm-pp {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    /* Room for the sticky footer so the last card never sits under it. */
    padding-bottom: 120px;
}

.fmm-pp__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fmm-pp__side {
    display: flex; flex-direction: column; gap: 16px; min-width: 0;
    position: sticky; top: 24px;
}

.fmm-pp__sectionlabel {
    display: block;
    margin: 12px 0 8px;
    font-size: 11px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-pp__sectionsub {
    margin: -4px 0 12px;
    font-size: 12.5px;
    color: var(--fmm-faint);
}

.fmm-pp__card {
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    background: #fff;
    padding: 18px;
}

.fmm-pp__cardhead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.fmm-pp__cardhead b { font-size: 14px; font-weight: 800; }

/* --- selected package cards --------------------------------------------- */

.fmm-pp__pkgs { display: flex; flex-direction: column; gap: 12px; }

.fmm-pp__pkg {
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px;
    border: 1px solid var(--fmm-border);
    border-radius: 14px;
    background: #fff;
}

.fmm-pp__pkg-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.fmm-pp__pkg-source { display: flex; align-items: center; gap: 10px; min-width: 0; }

.fmm-pp__pkg-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--fmm-bg-alt); color: var(--fmm-muted);
    flex: none;
}

.fmm-pp__pkg-source b  { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.fmm-pp__pkg-source em { display: block; font-size: 11px; font-style: normal; color: var(--fmm-faint); margin-top: 2px; letter-spacing: .02em; }

.fmm-pp__pkg-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: #DCFCE7; color: #15803D;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    flex: none;
}
.fmm-pp__pkg-badge i { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }

.fmm-pp__pkg-body {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center; gap: 14px;
}

.fmm-pp__pkg-thumb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 10px;
    background: var(--fmm-bg-alt); color: var(--fmm-faint);
    overflow: hidden;
}
.fmm-pp__pkg-thumb img { width: 100%; height: 100%; object-fit: cover; }

.fmm-pp__pkg-info { min-width: 0; display: block; }
.fmm-pp__pkg-info b  { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.fmm-pp__pkg-info em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 4px; }

.fmm-pp__pkg-cost { text-align: right; flex: none; }
.fmm-pp__pkg-cost em { display: block; font-size: 10px; font-style: normal; letter-spacing: .06em; color: var(--fmm-faint); text-transform: uppercase; }
.fmm-pp__pkg-cost b  { display: block; font-size: 17px; font-weight: 800; margin-top: 2px; }

.fmm-pp__pkg-route {
    display: flex; align-items: center; gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--fmm-border);
}
.fmm-pp__pkg-route .fmm-toggle { flex: none; }

.fmm-pp__pkg-dest {
    flex: 1; min-width: 0;
    height: 38px; padding: 8px 12px;
    border: 1px solid var(--fmm-border); border-radius: 9px;
    background: #fff; font-size: 13px; color: var(--fmm-text);
}
.fmm-pp__pkg-dest:focus { outline: 2px solid var(--fmm-yellow); outline-offset: -1px; }

/* --- notice ------------------------------------------------------------- */

.fmm-pp__notice {
    margin: 10px 0 0; padding: 10px 12px;
    background: var(--fmm-yellow-soft); border: 1px solid var(--fmm-yellow);
    border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: var(--fmm-text);
}
.fmm-pp__notice a { font-weight: 700; margin-left: 6px; }

.fmm-pp__notice--ok { background: #F0FDF4; border-color: #86EFAC; color: #14532D; }

.fmm-pp__blockers {
    margin-top: 10px; padding: 12px;
    background: #FEE2E2; border: 1px solid #FCA5A5;
    border-radius: 10px; color: #7F1D1D;
}
.fmm-pp__blockers p { margin: 0 0 4px; font-size: 12.5px; }
.fmm-pp__blocker { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fmm-pp__blockerbtn { padding: 7px 14px; font-size: 12px; white-space: nowrap; }
.fmm-pp__blockers p:last-child { margin-bottom: 0; }

/* --- documents summary --------------------------------------------------- */

.fmm-pp__docs { display: flex; flex-direction: column; gap: 10px; }

.fmm-pp__doc {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--fmm-bg-alt);
}

.fmm-pp__doc-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--fmm-faint); color: #fff; flex: none;
}
.fmm-pp__doc.is-ok    .fmm-pp__doc-ico { background: #16A34A; }
.fmm-pp__doc.is-amber .fmm-pp__doc-ico { background: #F59E0B; }

.fmm-pp__doc-body { min-width: 0; display: block; }
.fmm-pp__doc-body b  { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-pp__doc-body em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; }

.fmm-pp__doc-cta a {
    display: inline-flex; align-items: center;
    padding: 6px 12px; border-radius: 8px;
    background: #fff; border: 1px solid var(--fmm-border);
    font-size: 12px; font-weight: 700; color: var(--fmm-text);
    text-decoration: none;
}
.fmm-pp__doc-cta a:hover { border-color: var(--fmm-faint); }

/* --- right column: cost breakdown --------------------------------------- */

.fmm-pp__lines { display: flex; flex-direction: column; gap: 10px; }

.fmm-pp__line {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 13.5px;
}
.fmm-pp__line span { color: var(--fmm-muted); }
.fmm-pp__line b    { font-weight: 800; color: var(--fmm-text); }

.fmm-pp__line--total {
    margin-top: 6px; padding-top: 14px;
    border-top: 1px solid var(--fmm-border);
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fmm-muted);
}
.fmm-pp__line--total b { font-size: 22px; letter-spacing: -.02em; color: var(--fmm-text); }

.fmm-pp__line-meta { font-size: 12px; color: var(--fmm-muted); margin: 6px 0 0; }

/* --- insurance opt-in ---------------------------------------------------- */

.fmm-pp__insopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.fmm-pp__insopt {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--fmm-border); border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color .12s, background .12s;
}
.fmm-pp__insopt.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }

.fmm-pp__insopt input { position: absolute; opacity: 0; }

.fmm-pp__insopt-body { flex: 1; min-width: 0; display: block; }
.fmm-pp__insopt-body b  { display: block; font-size: 13.5px; font-weight: 700; }
.fmm-pp__insopt-body em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; }

.fmm-pp__insopt-tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--fmm-border); color: #fff; flex: none;
}
.fmm-pp__insopt.is-on .fmm-pp__insopt-tick { background: var(--fmm-yellow); color: var(--fmm-dark); }

.fmm-pp__insnote { margin: 10px 0 0; font-size: 11.5px; color: var(--fmm-faint); }

/* --- payment methods ---------------------------------------------------- */

.fmm-pp__methods { display: flex; flex-direction: column; gap: 10px; }

.fmm-pp__method {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--fmm-border); border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color .12s, background .12s;
}
.fmm-pp__method.is-on { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }
.fmm-pp__method input { position: absolute; opacity: 0; }

.fmm-pp__method-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--fmm-bg-alt); color: var(--fmm-dark);
    flex: none;
}
.fmm-pp__method.is-on .fmm-pp__method-ico { background: rgba(255, 255, 255, .75); }

.fmm-pp__method-body { flex: 1; min-width: 0; display: block; }
.fmm-pp__method-body b  { display: block; font-size: 14px; font-weight: 700; }
.fmm-pp__method-body em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; }

.fmm-pp__method-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    background: #DCFCE7; color: #15803D;
    border-radius: 4px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
}

.fmm-pp__method-tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--fmm-border); color: #fff; flex: none;
}
.fmm-pp__method.is-on .fmm-pp__method-tick { background: var(--fmm-yellow); color: var(--fmm-dark); }

.fmm-pp__short {
    margin-top: 14px; padding: 12px 14px;
    background: var(--fmm-yellow-soft); border: 1px solid var(--fmm-yellow);
    border-radius: 10px;
    font-size: 12.5px; line-height: 1.55; color: var(--fmm-text);
}
.fmm-pp__short b { display: block; margin-bottom: 4px; }
.fmm-pp__short a { font-weight: 700; text-decoration: underline; }

/* --- sticky footer ------------------------------------------------------- */

.fmm-pp__bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--fmm-border);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .06);
    padding: 14px 0;
}

.fmm-pp__bar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}

.fmm-pp__bar-summary { display: block; }
.fmm-pp__bar-summary em {
    display: block;
    font-size: 11px; font-style: normal; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fmm-muted);
}
.fmm-pp__bar-summary b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; }
.fmm-pp__bar-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--fmm-muted); margin-right: 8px; }

.fmm-pp__bar-acts { display: flex; gap: 10px; }
.fmm-pp__bar-acts .fmm-btn { padding: 12px 20px; font-size: 14px; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .fmm-pp { grid-template-columns: minmax(0, 1fr); }
    .fmm-pp__side { position: static; }
}

@media (max-width: 700px) {
    .fmm-pp__pkg-body { grid-template-columns: 56px minmax(0, 1fr); }
    .fmm-pp__pkg-cost { grid-column: 2 / -1; text-align: left; margin-top: 4px; }
    .fmm-pp__pkg-route { flex-direction: column; align-items: stretch; }
    .fmm-pp__insopts { grid-template-columns: minmax(0, 1fr); }
}

/* Compact package checkout, aligned to the supplied payment page reference. */
.fmm-pp-shell { max-width: 850px; }
.fmm-pp__pagehead { display: none; }
.fmm-pp-shell > .fmm-crumbs { margin-bottom: 26px; }
.fmm-pp { grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 22px; padding-bottom: 0; }
.fmm-pp__main { gap: 8px; }
.fmm-pp__side { position: static; gap: 14px; }
.fmm-pp__sectionlabel { margin: 2px 0 4px; color: #111827; font-size: 10px; letter-spacing: .07em; }
.fmm-pp__sectionsub { margin: -2px 0 4px; color: #374151; font-size: 11px; }
.fmm-pp__pkg { gap: 0; padding: 13px 14px 0; border-color: #E8EAEE; border-radius: 10px; box-shadow: 0 2px 8px rgba(17,24,39,.025); }
.fmm-pp__pkgs { gap: 10px; }
.fmm-pp__pkg-top { margin-bottom: 10px; }
.fmm-pp__pkg-source { gap: 8px; }
.fmm-pp__pkg-logo { width: 28px; height: 28px; border-radius: 50%; background: #F3F4F6; color: #424852; }
.fmm-pp__pkg-logo img { display: block; max-width: 17px; max-height: 17px; object-fit: contain; }
.fmm-pp__pkg-source b { color: #111; font-size: 11.5px; }
.fmm-pp__pkg-source em { margin-top: 1px; color: #6B7280; font-size: 9px; }
.fmm-pp__pkg-badge { padding: 3px 8px; border-radius: 4px; font-size: 9px; letter-spacing: 0; text-transform: none; }
.fmm-pp__pkg-badge i { display: none; }
.fmm-pp__pkg-body { display: block; margin: 0 0 9px 0; }
.fmm-pp__pkg-info b { color: #111; font-size: 11px; font-weight: 500; line-height: 1.4; }
.fmm-pp__pkg-info em { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #343A40; font-size: 9px; }
.fmm-pp__pkg-meta-icon { display: inline-flex; align-items: center; color: #30343B; }
.fmm-pp__pkg-cost { display: flex; align-items: center; justify-content: space-between; padding: 9px 0 10px; border-top: 1px solid #ECEEF1; text-align: left; }
.fmm-pp__pkg-cost em { color: #30343B; font-size: 10px; letter-spacing: 0; text-transform: none; }
.fmm-pp__pkg-cost b { margin: 0; color: #111; font-size: 11px; }
.fmm-pp__route-details { padding: 0 0 9px; border-top: 1px solid #ECEEF1; }
.fmm-pp__route-details summary { padding-top: 7px; color: #111827; cursor: pointer; font-size: 12px; font-weight: 700; }
.fmm-pp__pkg-route { margin-top: 8px; padding-top: 0; border-top: 0; flex-wrap: wrap; }
.fmm-pp__pkg-dest { height: 34px; font-size: 11px; }
.fmm-pp__couriers { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; }
.fmm-pp__courier {
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 8px 10px;
    border: 1.5px solid #E4E7EC; border-radius: 9px;
    background: #fff; cursor: pointer;
}
.fmm-pp__courier.is-on { border-color: #FFB900; background: #FFF8E4; }
.fmm-pp__courier.is-disabled { opacity: .55; cursor: not-allowed; }
.fmm-pp__courier input { width: 14px; height: 14px; margin: 0; flex: none; accent-color: #FFB900; }
.fmm-pp__courier-body { flex: 1; min-width: 0; }
.fmm-pp__courier-body b { display: block; color: #111; font-size: 12px; font-weight: 700; line-height: 1.3; }
.fmm-pp__courier-body em { display: block; margin-top: 2px; color: #6B7280; font-size: 10px; font-style: normal; line-height: 1.35; }
.fmm-pp__courier-price { flex: none; color: #111; font-size: 12px; font-weight: 800; }
.fmm-pp__courier-note { margin: 6px 0 0; color: #6B7280; font-size: 11px; line-height: 1.4; }
.fmm-pp__card { padding: 13px 14px; border-color: #ECEEF1; border-radius: 10px; box-shadow: 0 2px 7px rgba(17,24,39,.025); }
.fmm-pp__cardhead { margin-bottom: 12px; }
.fmm-pp__cardhead b { color: #202124; font-size: 11px; }
.fmm-pp__cardhead svg { color: #F5A900 !important; }
.fmm-pp__lines { gap: 8px; }
.fmm-pp__line { color: #30343B; font-size: 9.5px; }
.fmm-pp__line span { color: #30343B; }
.fmm-pp__line--total { margin-top: 5px; padding-top: 10px; font-size: 9px; }
.fmm-pp__line--total b { font-size: 18px; }
.fmm-pp__insopts { gap: 7px; }
.fmm-pp__insopt { gap: 6px; min-height: 48px; padding: 8px 9px; border-radius: 9px; }
.fmm-pp__insopt-body b { font-size: 9.5px; }
.fmm-pp__insopt-body em { margin-top: 1px; font-size: 9px; }
.fmm-pp__insopt-tick { width: 14px; height: 14px; background: transparent; border: 1px solid #CBD0D8; color: transparent; }
.fmm-pp__insopt-tick svg { display: none; }
.fmm-pp__insopt.is-on .fmm-pp__insopt-tick { background: #FFB900; border-color: #FFB900; box-shadow: inset 0 0 0 3px white; }
.fmm-pp__insnote { margin-top: 6px; color: #30343B; font-size: 9px; }
.fmm-pp__methods { gap: 7px; }
.fmm-pp__method { gap: 9px; min-height: 54px; padding: 8px 10px; border-radius: 9px; }
.fmm-pp__method-ico { width: 32px; height: 32px; border-radius: 8px; background: #F8F4E7; color: #2C2C2C; }
.fmm-pp__method.is-on .fmm-pp__method-ico { background: #FFF8E4; }
.fmm-pp__method-body b { font-size: 10px; }
.fmm-pp__method-body em { margin-top: 2px; font-size: 8.5px; }
.fmm-pp__method-tag { margin-left: 4px; padding: 2px 4px; font-size: 7px; }
.fmm-pp__method-tick { width: 14px; height: 14px; background: transparent; border: 1px solid #CBD0D8; color: transparent; }
.fmm-pp__method-tick svg { display: none; }
.fmm-pp__method.is-on .fmm-pp__method-tick { background: #FFB900; border-color: #FFB900; box-shadow: inset 0 0 0 3px white; }
.fmm-pp__bar { position: static; z-index: auto; padding: 13px 14px 14px; border: 1px solid #E8EAEE; border-radius: 10px; box-shadow: 0 3px 8px rgba(17,24,39,.09); }
.fmm-pp__bar-inner { display: block; padding: 0; }
.fmm-pp__bar-summary { display: block; margin-bottom: 10px; }
.fmm-pp__bar-topline, .fmm-pp__bar-amountline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fmm-pp__bar-topline em, .fmm-pp__bar-topline small { color: #5F6368; font-size: 8px; font-style: normal; font-weight: 500; letter-spacing: .04em; }
.fmm-pp__bar-amountline { margin-top: 3px; }
.fmm-pp__bar-amountline > b { color: #111; font-size: 17px; }
.fmm-pp__bar-payment { display: inline-flex; align-items: center; gap: 5px; color: #171717; font-size: 9px; font-weight: 600; }
.fmm-pp__bar-payment svg { color: #FFB900; }
.fmm-pp__bar-acts { display: block; }
.fmm-pp__bar-acts .fmm-btn { display: flex; width: 100%; min-height: 40px; justify-content: center; border-radius: 9px; font-size: 11px; }
.fmm-pp__doc { padding: 9px; border: 1px solid #E8EAEE; border-radius: 8px; background: #fff; }
.fmm-pp__doc-ico { width: 26px; height: 26px; border-radius: 8px; background: #FFF7E1; color: #202124; }
.fmm-pp__doc.is-ok .fmm-pp__doc-ico { background: #FFF7E1; color: #202124; }
.fmm-pp__doc.is-amber .fmm-pp__doc-ico { background: #FFF7E1; color: #202124; }
.fmm-pp__doc-body b { font-size: 10px; }
.fmm-pp__doc-body em { font-size: 9px; }
.fmm-pp__doc-cta a { padding: 5px 8px; font-size: 9px; }

@media (min-width: 1100px) {
    .fmm-pp-shell { max-width: 1096px; }
}

@media (max-width: 760px) {
    .fmm-pp-shell { max-width: 100%; }
    .fmm-pp { grid-template-columns: minmax(0, 1fr); }
    .fmm-pp__side { position: static; }
    .fmm-pp__insopts { grid-template-columns: minmax(0, 1fr); }
}

/* Pay Shipping — Figma "Main Content" (1440 frame).
   Icons are the export paths in public/assets/marketplace/pay-icons/.
   Delivery options stay on the package card; the frame has no courier block. */
@media (min-width: 761px) {
    .fmm-pp-shell { max-width: 1216px; }
}
.fmm-pp__ico { display: block; max-width: none; flex: none; }
.fmm-pp__pkg-meta-icon .fmm-pp__ico { width: 14px; height: 14px; }
.fmm-pp__sectionlabel--docs .fmm-pp__ico,
.fmm-pp__cardhead .fmm-pp__ico { width: 14px; height: 18px; }
.fmm-pp__doc-ico .fmm-pp__ico { height: 18px; width: auto; }
.fmm-pp__doc-cta .fmm-pp__ico { width: 10px; height: 16px; }
.fmm-pp__method-ico .fmm-pp__ico { height: 20px; width: auto; }
.fmm-pp__bar-payment .fmm-pp__ico { width: 16px; height: 14px; }
.fmm-pp { grid-template-columns: minmax(0, 789fr) minmax(260px, 395fr); gap: 32px; }
.fmm-pp__main { gap: 16px; }
.fmm-pp__side { gap: 18px; }
.fmm-pp__sectionlabel { margin: 0 0 12px; color: #111827; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.fmm-pp__sectionsub { margin: -6px 0 14px; color: #4B5563; font-size: 13px; line-height: 1.45; }
.fmm-pp__pkgs { gap: 16px; }
.fmm-pp__pkg {
    gap: 0; padding: 20px 22px 0;
    border: 1px solid #F3F4F6; border-radius: 12px;
    box-shadow: none; background: #fff;
}
.fmm-pp__pkg-top { margin-bottom: 14px; }
.fmm-pp__pkg-logo { width: 40px; height: 40px; border-radius: 50%; background: #F3F4F6; }
.fmm-pp__pkg-logo img { max-width: 22px; max-height: 22px; }
.fmm-pp__pkg-source b { color: #111827; font-size: 15px; font-weight: 700; }
.fmm-pp__pkg-source em { color: #6B7280; font-size: 12px; }
.fmm-pp__pkg-badge {
    padding: 4px 10px; border-radius: 6px;
    background: #E8F5E9; color: #2E7D32;
    font-size: 12px; font-weight: 600;
}
.fmm-pp__pkg-body { margin: 0 0 12px; }
.fmm-pp__pkg-info b { color: #111827; font-size: 14px; font-weight: 500; }
.fmm-pp__pkg-info em { gap: 6px; margin-top: 8px; color: #374151; font-size: 13px; }
.fmm-pp__pkg-cost { padding: 12px 0 14px; border-top: 1px solid #F3F4F6; }
.fmm-pp__pkg-cost em { color: #374151; font-size: 14px; }
.fmm-pp__pkg-cost b { color: #111827; font-size: 16px; font-weight: 700; }
.fmm-pp__route-details { border-top-color: #F3F4F6; }
.fmm-pp__route-details summary { font-size: 13px; }
.fmm-pp__courier { border-color: #EFEFEF; border-radius: 11px; }
.fmm-pp__courier.is-on { border-color: #FBBF24; background: #fff; }
.fmm-pp__courier input {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; margin: 0; flex: none;
    border: 2px solid #D1D5DB; border-radius: 50%;
    background: #fff; accent-color: auto;
}
.fmm-pp__courier input:checked {
    border-color: #FFC130;
    background: radial-gradient(circle, #FFC130 0 5px, #fff 5.5px);
}
.fmm-pp__courier.is-disabled input { opacity: .45; }

.fmm-pp__doccard {
    padding: 22px 24px 20px;
    border: 1px solid #F3F4F6; border-radius: 12px;
    background: #fff;
}
.fmm-pp__sectionlabel--docs {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 6px;
    color: #111827; font-size: 16px; font-weight: 700;
    letter-spacing: 0; text-transform: none;
}
.fmm-pp__doccard .fmm-pp__sectionsub { margin: 0 0 16px; }
.fmm-pp__docs { gap: 12px; }
.fmm-pp__doc {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px; min-height: 65px; padding: 12px 16px;
    border: 1px solid #EFEFEF; border-radius: 8px; background: #fff;
}
.fmm-pp__doc.is-amber { border: 1px dashed #D1D5DB; }
.fmm-pp__doc-ico {
    width: 40px; height: 40px; border-radius: 8px;
    background: #FFF8E6; color: #1A1A1A;
}
.fmm-pp__doc.is-ok .fmm-pp__doc-ico,
.fmm-pp__doc.is-amber .fmm-pp__doc-ico { background: #FFF8E6; color: #1A1A1A; }
.fmm-pp__doc-body b { color: #111827; font-size: 14px; font-weight: 700; }
.fmm-pp__doc-body em { margin-top: 2px; color: #6B7280; font-size: 12px; }
.fmm-pp__doc-cta a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 0; background: transparent; color: #111827;
}

.fmm-pp__card {
    padding: 20px 22px 18px;
    border: 1px solid #F3F4F6; border-radius: 12px;
    box-shadow: none; background: #fff;
}
.fmm-pp__cardhead { margin-bottom: 16px; }
.fmm-pp__cardhead b {
    display: flex; align-items: center; gap: 8px;
    color: #111827; font-size: 16px; font-weight: 700;
}
.fmm-pp__lines { gap: 12px; }
.fmm-pp__line { color: #374151; font-size: 14px; }
.fmm-pp__line span { color: #374151; }
.fmm-pp__line b { color: #111827; font-weight: 600; }
.fmm-pp__line--total { margin-top: 4px; padding-top: 14px; border-top-color: #F3F4F6; font-size: 12px; letter-spacing: .04em; }
.fmm-pp__line--total b { font-size: 22px; font-weight: 800; }
.fmm-pp__side .fmm-pp__card:has(.fmm-pp__insopts),
.fmm-pp__side .fmm-pp__card:has(.fmm-pp__methods) {
    padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.fmm-pp__insopts { gap: 14px; }
.fmm-pp__insopt {
    gap: 10px; min-height: 74px; padding: 14px 16px;
    border: 1.5px solid #EFEFEF; border-radius: 11px; background: #fff;
}
.fmm-pp__insopt.is-on { border-color: #FBBF24; background: #FFF8E7; }
.fmm-pp__insopt-body b { color: #111827; font-size: 14px; font-weight: 700; }
.fmm-pp__insopt-body em { margin-top: 4px; color: #6B7280; font-size: 13px; }
.fmm-pp__insopt-tick,
.fmm-pp__method-tick {
    width: 18px; height: 18px;
    border: 2px solid #D1D5DB; border-radius: 50%;
    background: #fff; color: transparent; box-shadow: none;
}
.fmm-pp__insopt-tick { width: 14px; height: 14px; }
.fmm-pp__insopt.is-on .fmm-pp__insopt-tick {
    border-color: #FBBF24;
    background: radial-gradient(circle, #FBBF24 0 4px, #fff 4.5px);
    box-shadow: none;
}
.fmm-pp__insnote {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px; color: #111827; font-size: 13px; line-height: 1.4;
}
.fmm-pp__insnote:not(:empty)::before {
    content: "";
    width: 6px; height: 6px; margin-top: 5px; flex: none;
    border-radius: 50%; background: #111827;
}
.fmm-pp__methods { gap: 14px; }
.fmm-pp__method {
    gap: 14px; min-height: 82px; padding: 16px 18px;
    border: 1.5px solid #EFEFEF; border-radius: 11px; background: #fff;
}
.fmm-pp__method.is-on { border-color: #FBBF24; background: #fff; }
.fmm-pp__method-ico,
.fmm-pp__method.is-on .fmm-pp__method-ico {
    width: 48px; height: 48px; border-radius: 12px;
    background: #FFF8E6; color: #1A1A1A;
}
.fmm-pp__method-body b { color: #111827; font-size: 15px; font-weight: 700; }
.fmm-pp__method-body em { margin-top: 4px; color: #6B7280; font-size: 13px; }
.fmm-pp__method-tag {
    margin-left: 8px; padding: 3px 7px;
    border-radius: 4px; background: #E8F5E9; color: #2E7D32;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.fmm-pp__method.is-on .fmm-pp__method-tick {
    border-color: #FFC130; background: #fff; box-shadow: none;
    background-image: radial-gradient(circle, #FFC130 0 5px, transparent 5.5px);
}
.fmm-pp__bar {
    padding: 18px 18px 16px;
    border: 1px solid #EFEFEF; border-radius: 12px;
    box-shadow: none; background: #fff;
}
.fmm-pp__bar-summary { margin-bottom: 14px; }
.fmm-pp__bar-topline em,
.fmm-pp__bar-topline small { color: #6B7280; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.fmm-pp__bar-amountline > b { color: #111827; font-size: 22px; font-weight: 800; }
.fmm-pp__bar-payment { gap: 8px; color: #171717; font-size: 14px; font-weight: 600; }
.fmm-pp__bar-acts .fmm-btn {
    min-height: 60px; border-radius: 12px;
    background: #FBBF24; color: #1A1A1A;
    font-size: 16px; font-weight: 700;
}
.fmm-pp__bar-acts .fmm-btn:hover { background: #E09F0C; }

@media (max-width: 760px) {
    .fmm-pp-shell { max-width: 100%; }
    .fmm-pp { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .fmm-pp__insopts { grid-template-columns: minmax(0, 1fr); }
}

/* Checkout confirmation uses the tighter Figma dialog proportions. */
.fmm-modal.fmm-pp-modal { background: rgba(16, 23, 40, .55); backdrop-filter: blur(4px); }
.fmm-pay.fmm-pp-pay {
    grid-template-columns: 41.5% minmax(0, 1fr);
    width: min(960px, max(660px, 62vw));
    min-height: 482px;
    max-height: min(92vh, 760px);
    border-radius: 16px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .24);
}
.fmm-pp-pay .fmm-pay__left { padding: 18px 24px 24px; }
.fmm-pp-pay .fmm-pay__ico { width: 56px; height: 56px; margin: 4px auto 10px; }
.fmm-pp-pay .fmm-pay__ico svg { width: 24px; height: 24px; }
.fmm-pp-pay .fmm-pay__total { font-size: 32px; }
.fmm-pp-pay .fmm-pay__totallabel { margin-bottom: 18px; font-size: 11px; }
.fmm-pp-pay .fmm-pay__summary { padding: 12px; border-radius: 11px; }
.fmm-pp-pay .fmm-pay__summaryhead { margin-bottom: 8px; }
.fmm-pp-pay .fmm-pay__summaryhead b { font-size: 12px; }
.fmm-pp-pay .fmm-pay__summaryhead a { color: var(--fmm-yellow); font-size: 11px; }
.fmm-pp-pay .fmm-pay__line { padding: 5px 0; font-size: 11px; }
.fmm-pp-pay .fmm-pay__line b { font-size: 11px; }
.fmm-pp-pay .fmm-pay__line--total { padding-top: 9px; font-size: 12px; }
.fmm-pp-pay .fmm-pay__line--total b { font-size: 13px; }
.fmm-pp-pay .fmm-pay__secure { margin-top: 14px; font-size: 9px; }
.fmm-pp-pay .fmm-pay__right { display: flex; flex-direction: column; padding: 26px 30px 24px; }
.fmm-pp-pay .fmm-pay__righttop { margin-bottom: 18px; }
.fmm-pp-pay .fmm-pay__righttop h2 { font-size: 18px; }
.fmm-pp-pay .fmm-pay__label { margin-bottom: 8px; font-size: 11px; }
.fmm-pp-pay .fmm-paymethod { gap: 10px; padding: 10px 12px; border-radius: 10px; }
.fmm-pp-pay .fmm-paymethod__ico { width: 30px; height: 30px; border-radius: 8px; }
.fmm-pp-pay .fmm-paymethod b { font-size: 12px; }
.fmm-pp-pay .fmm-paymethod em { font-size: 10px; }
.fmm-pp-pay .fmm-paymethod__tick { width: 18px; height: 18px; }
.fmm-pp-pay .fmm-pp-wallet-check .fmm-pay__line { padding: 5px 0; font-size: 11px; }
.fmm-pp-pay .fmm-pp-wallet-check .fmm-pay__line b { font-size: 11px; }
.fmm-pp-wallet-check__deduct { color: #DC2626 !important; }
.fmm-pp-pay .fmm-payok { margin-top: 12px; padding: 10px 12px; }
.fmm-pp-pay .fmm-payok b { font-size: 11px; }
.fmm-pp-pay .fmm-payok span { font-size: 10px; }
.fmm-pp-pay .fmm-payok--short { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }
.fmm-pp-pay .fmm-payok--short b { color: #991B1B; }
.fmm-pp-pay .fmm-btn--block { min-height: 40px; font-size: 12px; }
.fmm-pp-pay .fmm-vlink { margin: 12px auto 0; padding: 8px; font-size: 12px; }

/* Package card and VitalSwap payment steps. */
.fmm-pp-next { max-width: 1096px; margin: 0 auto; padding: 8px 0 48px; }
.fmm-pp-next__back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 0; border: 0; background: none; color: #656B78; font: inherit; cursor: pointer; }
.fmm-pp-next__back:first-letter { font-size: 24px; }
.fmm-pp-next__heading { margin-bottom: 24px; }
.fmm-pp-next__heading h1 { margin: 0 0 5px; color: #211F1F; font-size: 28px; font-weight: 750; }
.fmm-pp-next__heading p { margin: 0; color: #707785; font-size: 14px; }
.fmm-pp-cardpage__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); gap: 24px; align-items: start; }
.fmm-pp-next__panel { border: 1px solid #E5E7EB; border-radius: 12px; padding: 22px; background: #fff; box-shadow: 0 2px 8px rgba(18, 24, 40, .04); }
.fmm-pp-next__panel h2 { margin: 0 0 20px; font-size: 16px; font-weight: 700; }
.fmm-pp-next__field { display: block; margin: 0 0 16px; color: #333; font-size: 12px; font-weight: 600; }
.fmm-pp-next__field > span { display: block; margin-bottom: 7px; }
.fmm-pp-next__field input, .fmm-pp-next__field select, .fmm-pp-next__field .fmm-card-el { box-sizing: border-box; width: 100%; min-height: 46px; padding: 12px; border: 1px solid #DFE2E8; border-radius: 9px; background: #fff; color: #272727; font: inherit; font-size: 14px; }
.fmm-pp-next__field input:focus, .fmm-pp-next__field select:focus { outline: 2px solid rgba(255, 190, 25, .28); border-color: var(--fmm-yellow); }
.fmm-pp-next__field .fmm-card-el { padding: 13px; }
.fmm-pp-next__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fmm-pp-next__save { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; color: #555B66; font-size: 12px; }
.fmm-pp-next__secure { margin: 14px 0 0; color: #707785; text-align: center; font-size: 11px; }
.fmm-pp-next__summary { position: sticky; top: 18px; }
.fmm-pp-next__line { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #F0F1F3; color: #606775; font-size: 13px; }
.fmm-pp-next__line b { color: #252525; }
.fmm-pp-next__total { margin-top: 8px; padding-top: 16px; color: #242424; font-weight: 700; }
.fmm-pp-next__total b { font-size: 21px; }
.fmm-pp-next__summary > p { margin: 18px 0 0; color: #747B87; font-size: 12px; line-height: 1.5; }
.fmm-pp-cardpage .fmm-pp-next__heading { margin: 0 0 24px; }
.fmm-pp-cardpage .fmm-pp-next__heading h1 { margin-bottom: 3px; color: #111; font-size: 23px; letter-spacing: -.02em; }
.fmm-pp-cardpage .fmm-pp-next__heading p { color: #333; font-size: 11px; }
.fmm-pp-cardpage__grid { grid-template-columns: minmax(0, 1.36fr) minmax(300px, .9fr); gap: 24px; }
.fmm-pp-cardpage .fmm-pp-next__panel { padding: 22px 23px; border-radius: 12px; box-shadow: none; }
.fmm-pp-cardpage__formhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.fmm-pp-cardpage__formhead h2 { margin: 0; font-size: 15px; }
.fmm-pp-cardbrands { display: flex; align-items: center; gap: 6px; }
.fmm-pp-cardbrands img { display: block; width: 24px; height: 19px; object-fit: contain; }
.fmm-pp-cardpage .fmm-pp-next__field { margin-bottom: 15px; font-size: 10px; font-weight: 500; }
.fmm-pp-cardpage .fmm-pp-next__field > span { margin-bottom: 6px; }
.fmm-pp-cardpage .fmm-pp-next__field input, .fmm-pp-cardpage .fmm-pp-next__field select { min-height: 43px; padding: 10px 12px; border-color: #E1E4EA; border-radius: 9px; font-size: 12px; }
.fmm-pp-stripe-field { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #E1E4EA; border-radius: 9px; background: #fff; color: #9AA1AE; }
.fmm-pp-stripe-field:focus-within { border-color: var(--fmm-yellow); box-shadow: 0 0 0 2px rgba(255,190,25,.17); }
.fmm-pp-stripe-field > div { flex: 1; min-width: 0; padding: 11px 0; }
.fmm-pp-stripe-field > span { flex: 0 0 auto; color: #9AA1AE; font-size: 15px; }
.fmm-pp-stripe-field > span svg { display: block; }
.fmm-pp-stripe-field .fmm-pp-stripe-action { font-size: 15px; }
.fmm-pp-cardinfo { display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid #AAB0BA; border-radius: 50%; color: #858C98 !important; font-size: 9px !important; font-weight: 700; }
.fmm-pp-cardpage__grid .fmm-pp-next__row { gap: 14px; }
.fmm-pp-next__divider { height: 1px; margin: 4px 0 17px; background: #E9EBEF; }
.fmm-pp-cardpage__subhead { margin: 0 0 14px; font-size: 12px; font-weight: 700; }
.fmm-pp-next__save { position: relative; justify-content: space-between; gap: 14px; margin: 17px 0 0; color: #222; cursor: pointer; }
.fmm-pp-next__save span { display: flex; flex-direction: column; gap: 3px; }
.fmm-pp-next__save b { font-size: 10px; font-weight: 500; }
.fmm-pp-next__save small { color: #747B87; font-size: 9px; }
.fmm-pp-next__save input { position: absolute; right: 0; width: 35px; height: 20px; opacity: 0; cursor: pointer; }
.fmm-pp-next__save i { position: relative; flex: 0 0 35px; height: 20px; border-radius: 999px; background: #C9CDD4; transition: background .15s ease; }
.fmm-pp-next__save i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.fmm-pp-next__save input:checked + i { background: var(--fmm-yellow); }
.fmm-pp-next__save input:checked + i::after { transform: translateX(15px); }
.fmm-pp-cardpage__side { display: grid; gap: 17px; align-content: start; }
.fmm-pp-cardpage .fmm-pp-cardpage__side .fmm-pp-next__panel { padding: 18px; }
.fmm-pp-cardpage__amount { display: flex; flex-direction: column; align-items: center; min-height: 132px; justify-content: center; }
.fmm-pp-cardpage__amounticon { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 0 8px; border-radius: 50%; background: var(--fmm-yellow); color: #171717; font-size: 21px; font-weight: 700; box-shadow: 0 3px 8px rgba(255,190,25,.22); }
.fmm-pp-cardpage__amount b { color: #111; font-size: 27px; line-height: 1.1; }
.fmm-pp-cardpage__amount small { margin-top: 3px; color: #707785; font-size: 10px; }
.fmm-pp-cardpage .fmm-pp-next__summary h2 { margin: 0 0 11px; font-size: 12px; }
.fmm-pp-cardpage .fmm-pp-next__line { padding: 8px 0; font-size: 10px; }
.fmm-pp-cardpage .fmm-pp-next__line b { font-size: 10px; }
.fmm-pp-cardpage .fmm-pp-next__total { margin-top: 2px; padding-top: 12px; font-size: 11px; }
.fmm-pp-cardpage .fmm-pp-next__total b { font-size: 16px; }
.fmm-pp-cardpage__secure { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 28px; margin-bottom: 9px; border-radius: 7px; background: #EFFBF4; color: #13834D; font-size: 9px; }
.fmm-pp-cardpage__paybox .fmm-btn { min-height: 44px; border-radius: 9px; font-size: 11px; }
.fmm-pp-cardpage__paybox .fmm-btn > span { display: flex; align-items: center; justify-content: center; gap: 7px; }
.fmm-pp-cardpage__paybox .fmm-btn > span svg { flex: 0 0 auto; }
.fmm-pp-cardpage__paybox > p { margin: 10px 0 0; color: #333; text-align: center; font-size: 8px; line-height: 1.6; }
.fmm-pp-cardpage__paybox > p a { color: inherit; text-decoration: underline; }
.fmm-pp-authveil { position: fixed; z-index: 10050; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(22, 23, 27, .52); backdrop-filter: blur(5px); }
.fmm-pp-auth { display: grid; grid-template-columns: 41.5% minmax(0, 1fr); width: min(576px, 100%); min-height: 382px; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: 0 20px 65px rgba(0,0,0,.2); }
.fmm-pp-auth__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; background: #FFFBF2; text-align: center; }
.fmm-pp-auth__shield { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: #FFF6DE; color: #222; font-size: 25px; }
.fmm-pp-auth__brand h2 { margin: 0 0 12px; color: #111; font-size: 20px; line-height: 1.35; }
.fmm-pp-auth__brand p { margin: 0 0 24px; color: #333; font-size: 11px; line-height: 1.8; }
.fmm-pp-auth__brand small { display: inline-flex; align-items: center; gap: 5px; color: #707785; font-size: 10px; }
.fmm-pp-auth__brand small svg { flex: 0 0 auto; }
.fmm-pp-auth__details { padding: 27px 28px; }
.fmm-pp-auth__secure { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #F0F1F3; color: #15966B; font-size: 10px; }
.fmm-pp-auth__secure b { display: inline-flex; align-items: center; gap: 5px; }
.fmm-pp-auth__secure span { color: #707785; }
.fmm-pp-auth__secure img { width: 16px; height: 13px; object-fit: contain; vertical-align: middle; }
.fmm-pp-auth__line { display: flex; justify-content: space-between; padding-top: 16px; color: #6B7280; font-size: 12px; }
.fmm-pp-auth__line b { color: #263040; font-size: 14px; }
.fmm-pp-auth__cardbrand { width: 20px; height: 16px; object-fit: contain; vertical-align: middle; }
.fmm-pp-auth__connecting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 110px; margin: 20px 0; border: 1px solid #F0F1F3; border-radius: 9px; background: #F9FAFB; color: #374151; font-size: 12px; }
.fmm-pp-auth__connecting i { width: 27px; height: 27px; border: 3px solid #E7E9ED; border-top-color: var(--fmm-yellow); border-radius: 50%; animation: fmm-auth-spin .8s linear infinite; }
.fmm-pp-auth__connecting span { color: #737B88; font-size: 10px; }
.fmm-pp-auth__processing { width: 100%; height: 38px; border: 0; border-radius: 9px; background: #F5F5F6; color: #9AA0AA; }
.fmm-pp-auth__cancel { display: block; margin: 13px auto 0; border: 0; background: none; color: #606775; font: inherit; font-size: 11px; cursor: pointer; }
.fmm-pp-naira__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 24px; align-items: start; }
.fmm-pp-naira__item { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; border-bottom: 1px solid #EEE; font-size: 13px; }
.fmm-pp-naira__item span { color: #6D7480; }
.fmm-pp-naira__provider { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; padding: 14px; border-radius: 9px; background: #FFFAEB; color: #272727; font-size: 13px; }
.fmm-pp-naira__provider span { color: #727987; font-size: 11px; }
.fmm-pp-naira__total { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 18px; padding: 16px; border-radius: 10px; background: #FFFAEB; color: #555; font-size: 12px; }
.fmm-pp-naira__total b { color: #222; font-size: 24px; }
@keyframes fmm-auth-spin { to { transform: rotate(360deg); } }

@media (max-width: 780px) {
    .fmm-pay.fmm-pp-pay { grid-template-columns: minmax(0, 1fr); width: calc(100vw - 24px); min-height: 0; max-height: calc(100dvh - 24px); overflow-y: auto; }
    .fmm-pp-pay .fmm-pay__left { padding: 16px 20px 18px; }
    .fmm-pp-pay .fmm-pay__lefttop { margin-bottom: 14px; }
    .fmm-pp-pay .fmm-pay__right { display: block; padding: 20px; }
    .fmm-pp-pay .fmm-vlink { margin-top: 10px; padding: 8px; }
    .fmm-pp-next { padding: 8px 14px 32px; }
    .fmm-pp-cardpage__grid, .fmm-pp-naira__grid { grid-template-columns: minmax(0, 1fr); }
    .fmm-pp-next__summary { position: static; }
    .fmm-pp-auth { grid-template-columns: minmax(0, 1fr); max-height: calc(100dvh - 30px); overflow-y: auto; }
    .fmm-pp-auth__brand { padding: 22px; }
    .fmm-pp-auth__brand p { margin-bottom: 12px; }
    .fmm-pp-auth__details { padding: 20px; }
}

/* --- buyer account shell -------------------------------------------------- */
/* One grid for every account page, so the rail sits in the same place on all of
   them and navigating between them moves nothing. Replaces .fmm-wsplit (190px)
   and the .fmm-acctnav pill row, which disagreed with each other and with the
   Profile hub. `--aside` is for the pages that also have a right column. */

.fmm-asplit {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.fmm-asplit--aside { grid-template-columns: 220px minmax(0, 1fr) 260px; }
.fmm-asplit--profile {
    grid-template-columns: 220px minmax(0, 820px);
}
.fmm-ph__main { width: 100%; min-width: 0; }

/* --- buyer profile hub (/account/profile) --------------------------------- */

/* The rail. Taller and more detailed than `.fmm-aside` — two groups, counts and
   a sign-out — so it gets its own class rather than more modifiers on that one. */
.fmm-pnav {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 10px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
    position: sticky;
    top: 16px;
}

.fmm-pnav a,
.fmm-pnav__out {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    border-radius: 9px;
    padding: 10px 11px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fmm-text);
}

.fmm-pnav a > span,
.fmm-pnav__out > span { flex: 1; min-width: 0; }

.fmm-pnav a > svg,
.fmm-pnav__out > svg { flex-shrink: 0; color: var(--fmm-muted); }

.fmm-pnav a:hover,
.fmm-pnav__out:hover { background: var(--fmm-bg-alt); }

.fmm-pnav a.is-on {
    position: relative;
    font-weight: 600;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-pnav a.is-on > svg { color: var(--fmm-yellow-dark); }

.fmm-pnav a.is-on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--fmm-yellow);
}

.fmm-pnav__rule {
    display: block;
    height: 1px;
    margin: 8px 4px;
    background: var(--fmm-border);
}

.fmm-pnav__badge {
    flex-shrink: 0;
    min-width: 21px;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-pnav__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fmm-teal);
}

.fmm-pnav__out { color: #DC2626; }
.fmm-pnav__out > svg { color: #DC2626; }
.fmm-pnav__out:hover { background: #FEF2F2; }

/* Hero --------------------------------------------------------------------- */

.fmm-ph__hero {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    background: #fff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .05);
    overflow: hidden;
    margin-bottom: 20px;
}

.fmm-ph__banner {
    position: relative;
    height: 90px;
    background: radial-gradient(ellipse at 78% 58%, #48391f 0%, #302b22 56%, #252321 100%);
}

.fmm-ph__edit {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
}

.fmm-ph__edit img { display: block; width: 12px; height: 12px; object-fit: contain; }
.fmm-ph__edit:hover { background: rgba(255, 255, 255, .22); }

.fmm-ph__id {
    display: block;
    padding: 0 18px 14px;
    /* Pulls the avatar up over the banner without taking it out of flow, so the
       name block still sets the row height. */
    margin-top: -34px;
    /* And puts it IN FRONT of the banner. `.fmm-ph__banner` is positioned (it
       anchors the Edit Profile button), and a positioned element paints above a
       static sibling regardless of document order — so the top third of the
       avatar was disappearing behind the dark gradient. */
    position: relative;
    z-index: 1;
}

.fmm-ph__avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fmm-bg-alt);
    border: 3px solid #fff;
    box-shadow: var(--fmm-shadow);
    margin: 0 0 12px;
}

.fmm-ph__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fmm-ph__avatar b { font-size: 28px; font-weight: 700; color: var(--fmm-muted); }

.fmm-ph__idtext { min-width: 0; padding-bottom: 2px; }

.fmm-ph__idtext h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 3px;
}

.fmm-ph__idtext p {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--fmm-muted);
    margin: 0;
}

.fmm-ph__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-ph__social { display: none !important; }

.fmm-ph__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-ph__social a:hover { color: var(--fmm-text); background: var(--fmm-border); }

.fmm-ph__share {
    margin: 0 18px 16px;
    border: 1px solid #FDE8B5;
    border-radius: 12px;
    padding: 13px;
    background: #FFFBF0;
}

.fmm-ph__share-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 11px;
}

.fmm-ph__share-head .fmm-ph__share-username-icon {
    box-sizing: border-box;
    display: block;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 7px;
    color: #292524;
    background: #FFE9AA;
}

.fmm-ph__share blockquote {
    margin: 0 0 13px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--fmm-muted);
}

.fmm-ph__share-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.fmm-ph__share-acts .fmm-btn { min-width: 0; gap: 8px; }
.fmm-ph__share-acts .fmm-btn img { display: block; width: auto; height: 14px; object-fit: contain; }
.fmm-ph__share-acts .fmm-btn:first-child { flex: 1 1 auto; justify-content: center; text-align: center; }
.fmm-ph__share-acts .fmm-btn:last-child {
    box-sizing: border-box;
    flex: 0 0 108px;
    justify-content: center;
    padding-inline: 10px;
    white-space: nowrap;
}

/* Stats -------------------------------------------------------------------- */

.fmm-ph__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.fmm-ph__stat {
    border: 1px solid #F0F1F3;
    border-radius: 13px;
    padding: 12px 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04);
    text-align: center;
}

.fmm-ph__stat i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    margin-bottom: 9px;
    color: #292524;
    background: #FFF5DC;
}
.fmm-ph__stat i img { display: block; width: auto; height: 18px; object-fit: contain; }

.fmm-ph__stat b {
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    /* Wallet Balance and Rewards Earned put a currency string in the same slot
       as a two-digit count, so this has to be able to break. */
    overflow-wrap: anywhere;
}

.fmm-ph__stat span { display: block; font-size: 11.5px; color: var(--fmm-muted); margin-top: 3px; }

/* Row panels --------------------------------------------------------------- */

.fmm-ph__panel {
    border: 1px solid #F0F1F3;
    border-radius: var(--fmm-radius-lg);
    background: #fff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04);
    padding: 6px 10px 10px;
    margin-bottom: 16px;
}

.fmm-ph__panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--fmm-border);
    margin: 0 4px 6px;
    padding: 14px 6px 13px;
}

.fmm-ph__panel > header h2 { font-size: 15px; font-weight: 800; margin: 0; }
.fmm-ph__panel > header span { font-size: 11.5px; color: var(--fmm-faint); }

.fmm-ph__row {
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 0;
    padding: 12px 10px;
    border-bottom: 1px solid #F3F4F6;
    color: var(--fmm-text);
}

.fmm-ph__row:hover { background: var(--fmm-bg-alt); }

.fmm-ph__row > i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #292524;
    background: #FFF5DC;
}
.fmm-ph__row > i img { display: block; width: auto; height: 18px; object-fit: contain; }

.fmm-ph__row:hover > i { color: var(--fmm-yellow-dark); background: var(--fmm-yellow-soft); }

.fmm-ph__row > span { flex: 1; min-width: 0; }
.fmm-ph__row b { display: block; font-size: 13.5px; font-weight: 600; }
.fmm-ph__row em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; }

.fmm-ph__chev { flex-shrink: 0; color: var(--fmm-faint); }

.fmm-ph__pill {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-ph__pill--amber { color: var(--fmm-yellow-dark); background: var(--fmm-yellow-soft); }
.fmm-ph__pill--blue  { color: #4338CA; background: #EEF2FF; }
.fmm-ph__pill--green { color: #15803D; background: #ECFDF3; }

.fmm-ph__logout { border-top: 1px solid var(--fmm-border); margin: 8px 4px 0; padding-top: 8px; }

.fmm-ph__logout button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    border: 1px solid #FECACA;
    background: #FEF2F2;
    cursor: pointer;
    font: inherit;
    border-radius: 10px;
    padding: 11px;
    font-size: 13.5px;
    font-weight: 600;
    color: #DC2626;
}

.fmm-ph__logout button:hover { background: #FEF2F2; }
.fmm-ph__logout button > img { display: block; width: 14px; height: 14px; object-fit: contain; }

/* Right column ------------------------------------------------------------- */

.fmm-ph__side { position: sticky; top: 16px; display: grid; gap: 16px; align-content: start; }

.fmm-ph__card {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 18px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
}

.fmm-ph__card--tint { background: var(--fmm-teal-soft); border-color: #CBEDE7; }
.fmm-ph__card--tint h3 svg { color: var(--fmm-teal); }

.fmm-ph__card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 3px;
}

.fmm-ph__card h3 svg { color: var(--fmm-yellow-dark); }
.fmm-ph__card-sub { font-size: 12px; color: var(--fmm-muted); margin: 0; }

.fmm-ph__card-btn { width: 100%; justify-content: center; margin-top: 14px; }

.fmm-ph__snap { display: grid; gap: 2px; margin-top: 14px; }

.fmm-ph__snap > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 9px;
    padding: 9px 10px;
    background: var(--fmm-bg-alt);
}

.fmm-ph__snap span { font-size: 12.5px; color: var(--fmm-muted); }
.fmm-ph__snap b { font-size: 13px; font-weight: 700; }

.fmm-ph__ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }

.fmm-ph__ticks li {
    position: relative;
    padding-left: 25px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fmm-text);
}

/* The tick is drawn, not a glyph: the emoji/dingbat check renders in a different
   font on every platform and would not sit on the teal disc. */
.fmm-ph__ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fmm-teal)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")
        center / 10px 10px no-repeat;
}

.fmm-ph__note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--fmm-muted);
    margin: 14px 0 0;
}

.fmm-ph__links { display: grid; gap: 2px; margin-top: 14px; }

.fmm-ph__links a {
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fmm-muted);
}

.fmm-ph__links a:hover { color: var(--fmm-text); background: var(--fmm-bg-alt); }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1180px) {
    /* The right column only summarises what the centre already says, so it drops
       below the content rather than squeezing the rail out of readability. */
    .fmm-asplit--aside { grid-template-columns: 220px minmax(0, 1fr); }
    .fmm-asplit > aside { grid-column: 1 / -1; }
    .fmm-ph__side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .fmm-asplit,
    .fmm-asplit--aside { grid-template-columns: minmax(0, 1fr); }
    .fmm-pnav { position: static; }
    .fmm-ph__side { grid-template-columns: minmax(0, 1fr); }
    .fmm-ph__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .fmm-ph__share-acts .fmm-btn:first-child,
    .fmm-ph__share-acts .fmm-btn:last-child { flex: 1 1 100%; }
}

/* --- buyer profile hub: loading placeholder ------------------------------- */
/* Shapes only. The three columns come from `.fmm-asplit` itself, which the
   skeleton reuses, so the layout cannot drift away from the real page. */

.fmm-sk-pnav {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 10px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
}

.fmm-sk-pnav__row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; }
.fmm-sk-pnav__icon { width: 17px; height: 17px; border-radius: 5px; flex: none; }
.fmm-sk-pnav__rule { display: block; height: 1px; margin: 8px 4px; background: var(--fmm-border); }

.fmm-sk-hero {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    background: #fff;
    box-shadow: var(--fmm-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

.fmm-sk-hero__banner { height: 90px; border-radius: 0; }

/* Same -34px lift and the same 76px disc as the real hero, so the avatar does
   not hop when the photo arrives. */
.fmm-sk-hero__id {
    display: block;
    padding: 0 18px 14px;
    margin-top: -34px;
    position: relative;
    z-index: 1;
}

.fmm-sk-hero__avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    border: 3px solid #fff;
    margin: 0 0 12px;
}

.fmm-sk-hero__share {
    margin: 0 18px 16px;
    border: 1px solid #FDE8B5;
    border-radius: 12px;
    padding: 13px;
    background: #FFFBF0;
}

/* The real quote is three lines at 12.5px/1.65 inside 12px/14px padding. */
.fmm-sk-hero__quote { height: 74px; border-radius: 10px; margin-bottom: 13px; }

.fmm-sk-stat {
    border: 1px solid #F0F1F3;
    border-radius: 13px;
    padding: 12px 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04);
    text-align: center;
}

.fmm-sk-stat__icon { width: 32px; height: 32px; border-radius: 9px; margin: 0 auto 9px; }

.fmm-sk-prow { display: flex; align-items: center; gap: 13px; padding: 12px 10px; }
.fmm-sk-prow__icon { width: 36px; height: 36px; border-radius: 10px; flex: none; }

.fmm-sk-snap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 9px;
    padding: 11px 10px;
    margin-bottom: 2px;
    background: var(--fmm-bg-alt);
}

/* --- wallet top-up (/account/wallet/topup) -------------------------------- */
/* Six screens off one component: choose method, dollars, naira, processing,
   success, failed. Two columns with the summary on the right, as designed. */

/* The Figma summary column is 350–403px, but that was sized for its 16–18px
   type; at the smaller scale used here 320 holds "Continue with VitalSwap →"
   and "Total to Pay" on one line each with room to spare. */
.fmm-tu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

/* The big amount block that opens every step. */
.fmm-tu__amount {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 22px;
    margin-bottom: 18px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
    text-align: center;
}

.fmm-tu__amount > span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fmm-muted);
    margin-bottom: 10px;
}

.fmm-tu__amount > b,
.fmm-tu__amount > label {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.fmm-tu__amount i { font-size: 22px; font-style: normal; color: var(--fmm-muted); }

/* The amount is an input on the rail screens and static text on the summary
   ones; both have to sit on the same baseline at the same size. */
.fmm-tu__amount input {
    width: 6.5ch;
    min-width: 4ch;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.fmm-tu__amount input:focus { outline: 0; box-shadow: none; }

/* Chrome/Safari spinners would sit inside a 40px display figure. */
.fmm-tu__amount input::-webkit-outer-spin-button,
.fmm-tu__amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fmm-tu__amount input[type=number] { -moz-appearance: textfield; }

.fmm-tu__bal {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 12px;
    margin-top: 12px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-tu__conv {
    display: block;
    margin-top: 12px;
}

.fmm-tu__conv b {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-tu__conv em {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    font-style: normal;
    color: var(--fmm-muted);
}

.fmm-tu__chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

.fmm-tu__chips button {
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    padding: 6px 14px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fmm-text);
}

.fmm-tu__chips button:hover { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }

.fmm-tu__card {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 18px;
    margin-bottom: 18px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
}

.fmm-tu__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fmm-tu__brands { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--fmm-faint); }

.fmm-tu__label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fmm-muted);
    margin-bottom: 10px;
}

/* A <button> is shrink-to-fit, and these are direct children of a block rather
   than of the grid the old modal wrapped them in — without this the two payment
   options sat at half the card's width. */
.fmm-tu__card > .fmm-paymethod,
.fmm-af__split .fmm-paymethod { width: 100%; }
.fmm-tu__card > .fmm-paymethod + .fmm-paymethod,
.fmm-af__split .fmm-paymethod + .fmm-paymethod { margin-top: 10px; }

/* The radio pip on a payment option; the whole row is the control. */
.fmm-tu__radio {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border: 2px solid var(--fmm-border);
    border-radius: 50%;
}

.fmm-paymethod.is-on .fmm-tu__radio {
    border-color: var(--fmm-yellow);
    background: radial-gradient(circle, var(--fmm-yellow) 0 42%, #fff 45%);
}

/* "Save card for future top-ups" — a switch, per the design. */
.fmm-tu__save {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    cursor: pointer;
}

.fmm-tu__save span { flex: 1; min-width: 0; }
.fmm-tu__save input { position: absolute; opacity: 0; width: 0; height: 0; }

.fmm-tu__save i {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--fmm-border);
    transition: background .15s ease;
}

.fmm-tu__save i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.fmm-tu__save input:checked + i { background: var(--fmm-yellow); }
.fmm-tu__save input:checked + i::after { transform: translateX(16px); }
.fmm-tu__save input:focus-visible + i { outline: 2px solid var(--fmm-yellow-dark); outline-offset: 2px; }

.fmm-tu__vs { display: flex; align-items: center; gap: 12px; }
.fmm-tu__vs b { display: block; font-size: 14px; font-weight: 800; }
.fmm-tu__vs em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); }

.fmm-tu__vsnote {
    margin: 14px 0 0;
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--fmm-bg-alt);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--fmm-muted);
}

.fmm-tu__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 0;
    font-size: 11.5px;
    color: var(--fmm-muted);
}

.fmm-tu__info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #DBEAFE;
    border-radius: var(--fmm-radius);
    padding: 13px 15px;
    background: #EFF6FF;
    font-size: 12.5px;
    line-height: 1.6;
    color: #1E3A8A;
}

.fmm-tu__info svg { flex-shrink: 0; margin-top: 2px; }

/* Right-hand summary. */
.fmm-tu__sum {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 18px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
    position: sticky;
    top: 16px;
}

.fmm-tu__sum h2 { font-size: 14px; font-weight: 800; margin: 0 0 14px; }

.fmm-tu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    font-size: 12.5px;
    color: var(--fmm-muted);
}

.fmm-tu__row b { font-size: 13px; font-weight: 700; color: var(--fmm-text); text-align: right; }

.fmm-tu__row--total {
    border-top: 1px solid var(--fmm-border);
    margin-top: 6px;
    padding-top: 12px;
}

.fmm-tu__row--total span { font-weight: 700; color: var(--fmm-text); }
.fmm-tu__row--total b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }

.fmm-tu__method {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 14px;
}

.fmm-tu__method svg { flex-shrink: 0; color: var(--fmm-muted); }
.fmm-tu__method em { display: block; font-size: 10.5px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--fmm-faint); }
.fmm-tu__method b { display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px; }

.fmm-tu__est { font-size: 11px; color: var(--fmm-faint); margin: 8px 0 0; text-align: right; }

.fmm-tu__note {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    padding: 13px 15px;
    margin: 14px 0 0;
    background: var(--fmm-bg-alt);
    font-size: 12px;
    line-height: 1.6;
    color: var(--fmm-muted);
}

.fmm-tu__note a { color: var(--fmm-yellow-dark); font-weight: 600; }

/* --- outcome screens ------------------------------------------------------ */

.fmm-tu__state { max-width: 680px; margin: 0 auto; padding: 30px 0 50px; text-align: center; }
.fmm-tu__state h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 20px 0 8px; }
.fmm-tu__state > p { font-size: 13.5px; color: var(--fmm-muted); margin: 0 auto 24px; max-width: 46ch; }
.fmm-tu__state .fmm-tu { grid-template-columns: minmax(0, 1fr) 320px; text-align: left; }

.fmm-tu__statecard {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 18px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
    text-align: left;
}

.fmm-tu__state > .fmm-tu__statecard { max-width: 420px; margin: 0 auto; }

.fmm-tu__newbal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: var(--fmm-radius);
    padding: 14px 16px;
    margin-top: 14px;
    background: var(--fmm-yellow-soft);
}

.fmm-tu__newbal span { font-size: 12.5px; font-weight: 700; }
.fmm-tu__newbal em { display: block; font-size: 11px; font-style: normal; font-weight: 500; color: var(--fmm-muted); margin-top: 2px; }

/* ── Busy / loading overlay (shown while payment request is in-flight) ──── */
.fmm-tu__busy-overlay {
    position: absolute; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(3px);
    border-radius: var(--fmm-radius);
    animation: fmm-tu-fadein .18s ease;
}
@keyframes fmm-tu-fadein { from { opacity: 0; } to { opacity: 1; } }

.fmm-tu__busy-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 36px 26px;
    background: #fff; border: 1px solid var(--fmm-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(20, 25, 35, .10);
    text-align: center; max-width: 280px;
    animation: fmm-tu-slideup .22s ease;
}
@keyframes fmm-tu-slideup { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.fmm-tu__busy-card > b { font-size: 13px; font-weight: 700; color: #1A1A2E; margin: 0; }
.fmm-tu__busy-card > p { font-size: 11px; color: var(--fmm-muted); margin: 0; line-height: 1.5; }

.fmm-tu__busy-spinner {
    display: block; width: 44px; height: 44px; border-radius: 50%;
    border: 3.5px solid #FEF3C7;
    border-top-color: #F59E0B;
    animation: fmm-tu-spin .8s linear infinite;
    flex-shrink: 0;
}

/* ── Inline button spinner ───────────────────────────────────────────────── */
.fmm-tu__btn-spinner {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    animation: fmm-tu-spin .7s linear infinite;
    flex-shrink: 0;
}

.fmm-btn--loading { opacity: .88; pointer-events: none; }
.fmm-btn--loading:not(:disabled) { cursor: wait; }
.fmm-tu__newbal b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.fmm-tu__spinner,
.fmm-tu__tick,
.fmm-tu__bang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
}

.fmm-tu__spinner { position: relative; border: 0; animation: none; }
.fmm-tu__spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 4px solid var(--fmm-yellow-soft);
    border-top-color: var(--fmm-yellow);
    border-radius: inherit;
    animation: fmm-tu-spin .9s linear infinite;
}
.fmm-tu__spinner img { position: relative; z-index: 1; display: block; width: 24px; height: 24px; }

@keyframes fmm-tu-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .fmm-tu__spinner::before { animation-duration: 3s; }
}

.fmm-tu__tick { color: #fff; background: var(--fmm-yellow); }
.fmm-tu__bang { font-size: 28px; font-weight: 800; color: #DC2626; background: #FEF2F2; }

/* Wallet funding outcome layouts, aligned with the compact Figma states. */
.fmm-tu__processing-state { max-width: 520px; padding-top: 34px; }
.fmm-tu__processing-shell { position: relative; max-width: 420px; margin: 0 auto; }
.fmm-tu__processing-card { position: relative; padding: 30px 26px 22px; text-align: center; }
.fmm-tu__processing-shield {
    position: absolute; z-index: 1; top: -13px; left: 50%; transform: translateX(-50%);
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    color: var(--fmm-yellow-dark); background: #fff; border: 1px solid var(--fmm-border);
}
.fmm-tu__processing-card .fmm-tu__spinner {
    width: 62px; height: 62px; color: var(--fmm-yellow-dark);
    margin: 0 auto 14px;
}
.fmm-tu__processing-card h1 { font-size: 21px; line-height: 27px; margin: 0 0 7px; }
.fmm-tu__processing-card > p { max-width: 36ch; margin: 0 auto 18px; font-size: 12px; line-height: 18px; color: var(--fmm-muted); }
.fmm-tu__processing-details { padding: 12px 14px; border: 1px solid #F6EBD6; border-radius: 9px; background: #FFFCF7; text-align: left; }
.fmm-tu__processing-details > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; font-size: 11px; }
.fmm-tu__processing-details > div + div { margin-top: 6px; }
.fmm-tu__processing-details > div > span { color: var(--fmm-muted); }
.fmm-tu__processing-details > div > b { color: var(--fmm-text); font-size: 12px; font-weight: 700; }
.fmm-tu__processing-method { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--fmm-border); border-radius: 999px; background: #fff; }
.fmm-tu__processing-state > .fmm-tu__warn { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 7px 13px; border: 1px solid var(--fmm-border); border-radius: 999px; background: #fff; font-size: 10px; }
.fmm-tu__processing-state > .fmm-tu__warn > span { width: 6px; height: 6px; border-radius: 50%; background: var(--fmm-yellow); }

.fmm-tu__success-state { max-width: 712px; padding-top: 34px; }
.fmm-tu__success-state > .fmm-tu__tick { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 100%; background: #FBBF24; box-shadow: 0 4px 8px rgba(245, 179, 26, .22); }
.fmm-tu__success-state > .fmm-tu__tick img { display: block; width: 32px; height: 36px; }
.fmm-tu__success-state > h1 { margin: 26px 0 5px; color: #253041; font-size: 26px; line-height: 32px; }
.fmm-tu__success-state > p { margin-bottom: 34px; font-size: 13px; line-height: 19px; }
.fmm-tu__success-grid { grid-template-columns: minmax(0, 1fr) 222px !important; gap: 22px; align-items: start; }
.fmm-tu__success-summary { padding: 20px 22px 21px; }
.fmm-tu__success-summary .fmm-tu__cardhead { padding-bottom: 16px; border-bottom: 1px solid var(--fmm-border); }
.fmm-tu__success-summary .fmm-tu__label { color: #404040; font-size: 14px; }
.fmm-tu__success-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 48px; font-size: 11px; }
.fmm-tu__success-row + .fmm-tu__success-row { border-top: 0; }
.fmm-tu__success-row > b { font-size: 11px; font-weight: 700; text-align: right; }
.fmm-tu__success-row > .fmm-tu__added-value { color: #20242B; }
.fmm-tu__success-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.fmm-tu__success-icon--added { color: #F59E0B; background: #FFF7ED; }
.fmm-tu__success-icon--fee { color: #4B5563; background: #F3F4F6; }
.fmm-tu__success-icon--total { color: #0284C7; background: #F0F9FF; }
.fmm-tu__success-icon--naira { color: #059669; background: #ECFDF5; }
.fmm-tu__success-icon--rate { color: #8B5CF6; background: #F5F3FF; }
.fmm-tu__success-icon--method { color: #242424; background: #F3F4F6; }
.fmm-tu__success-state .fmm-tu__success-newbal { margin-top: 1px; padding: 16px 16px; background: #FFF7E5; }
.fmm-tu__success-state .fmm-tu__success-newbal span { font-size: 11px; }
.fmm-tu__success-state .fmm-tu__success-newbal em { font-size: 9px; }
.fmm-tu__success-state .fmm-tu__success-newbal b { font-size: 18px; }
.fmm-tu__success-grid > aside { display: grid; gap: 12px; }
.fmm-tu__success-grid > aside .fmm-tu__sum { position: static; padding: 14px 16px; }
.fmm-tu__success-grid > aside .fmm-tu__sum h2 { margin-bottom: 12px; }
.fmm-tu__success-grid > aside .fmm-tu__row { font-size: 10px; }
.fmm-tu__success-grid > aside .fmm-tu__row b { font-size: 10px; }
.fmm-tu__success-grid > aside .fmm-tu__row--total { padding-top: 10px; margin-top: 3px; border-top: 1px solid var(--fmm-border); }
.fmm-tu__success-grid > aside .fmm-tu__row--total b { font-size: 13px; }
.fmm-tu__success-back { min-height: 42px; font-size: 12px; }
.fmm-tu__success-use { display: block; min-height: 30px; margin-top: 0; text-align: center; font-size: 10px; }
.fmm-tu__success-grid > aside > .fmm-tu__success-back { min-height: 42px; padding: 8px 14px; font-size: 12px; }
.fmm-tu__success-grid > aside > .fmm-tu__success-use { min-height: 30px; font-size: 10px; }

@media (max-width: 720px) {
    .fmm-tu__success-grid { grid-template-columns: minmax(0,1fr) !important; }
    .fmm-tu__success-state { padding: 22px 0 36px; }
    .fmm-tu__success-state > h1 { font-size: 21px; }
}

.fmm-tu__warn { font-size: 12px; color: var(--fmm-muted); margin: 18px 0 0; }
.fmm-tu__warn span { color: var(--fmm-yellow-dark); }

.fmm-tu__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.fmm-tu__acts .fmm-btn { min-width: 190px; justify-content: center; }

/* --- Add Funds dialog ----------------------------------------------------- */

/* Wide enough that the summary holds a label and its value on one line — the
   thing that broke at the original 760/240 — without the dialog filling the
   window, which is how the Figma-literal 920 read in practice. */
.fmm-af { max-width: 820px; }
.fmm-af__split { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }

.fmm-af__bal {
    border-radius: var(--fmm-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--fmm-bg-alt);
}

.fmm-af__bal em { display: block; font-size: 10.5px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--fmm-muted); }
.fmm-af__bal b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; }

.fmm-af__enter { text-align: center; margin-bottom: 4px; }

.fmm-af__enter > span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fmm-muted);
    margin-bottom: 8px;
}

.fmm-af__enter label {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.fmm-af__enter i { font-size: 20px; font-style: normal; color: var(--fmm-muted); }

.fmm-af__enter input {
    width: 6ch;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.fmm-af__enter input:focus { outline: 0; box-shadow: none; }
.fmm-af__enter input::-webkit-outer-spin-button,
.fmm-af__enter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fmm-af__enter input[type=number] { -moz-appearance: textfield; }

.fmm-af__sum {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    padding: 16px;
    background: var(--fmm-bg-alt);
}

.fmm-af__sum h3 {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fmm-muted);
    margin: 0 0 10px;
}

/* Continue is an anchor (it navigates), so it needs its own disabled look —
   :disabled does nothing to an <a>. */
.fmm-btn.is-disabled { opacity: .5; pointer-events: none; }

/* The responsive ladder for this flow lives with the type scale below, so the
   breakpoints and the sizes they override are read together rather than one
   quietly cancelling the other. */

/* --- wallet top-up: type + control scale ---------------------------------- */
/*
 * Derived from the Figma frames, then stepped DOWN one notch across the board.
 *
 * The Figma numbers are literal 1440-frame pixels (30px headings, a 48px amount
 * figure, 100px option rows), and taken at face value the flow rendered
 * noticeably heavier than the rest of the marketplace — the dialog in
 * particular filled the viewport. The design's proportions are kept; the
 * absolute sizes sit about one step smaller, which lines this flow up with the
 * headings and controls on the pages either side of it.
 *
 *   role            Figma   here
 *   page heading    30      26
 *   sub / lead      18      15
 *   amount figure   48      36
 *   section label   14      12
 *   option title    18      15
 *   body / row      14      13
 *   total value     24      20
 *   page button     56–60   48
 *   dialog button   52      46
 *   option row     100      76
 *
 * Scoped throughout. `.fmm-btn`, `.fmm-paymethod` and `.fmm-page-head` are
 * shared with checkout, package pay and order report.
 */

.fmm-tu-page .fmm-page-head h1 { font-size: 26px; line-height: 32px; }
.fmm-tu-page .fmm-page-head p { font-size: 15px; line-height: 22px; }

/* Buttons ------------------------------------------------------------------ */
/* min-height with small vertical padding, so the box keeps its height whatever
   the label wraps to. */
.fmm-tu .fmm-btn,
.fmm-tu__state .fmm-btn {
    min-height: 48px;
    padding: 8px 22px;
    font-size: 15px;
    justify-content: center;
}

.fmm-af .fmm-btn {
    min-height: 46px;
    padding: 8px 20px;
    font-size: 15px;
    justify-content: center;
}

.fmm-tu .fmm-vlink,
.fmm-tu__state .fmm-vlink { min-height: 44px; font-size: 14px; }
.fmm-af .fmm-vlink { min-height: 44px; font-size: 13.5px; }

/* Amount block ------------------------------------------------------------- */
.fmm-tu__amount { padding: 20px; }
.fmm-tu__amount > span { font-size: 12px; line-height: 18px; }
.fmm-tu__amount > b,
.fmm-tu__amount > label { font-size: 36px; line-height: 44px; }
.fmm-tu__amount i { font-size: 22px; line-height: 28px; }
.fmm-tu__bal { font-size: 12.5px; line-height: 18px; padding: 5px 12px; }
.fmm-tu__conv b { font-size: 14px; line-height: 20px; padding: 5px 14px; }
.fmm-tu__conv em { font-size: 12.5px; line-height: 18px; }

.fmm-tu__chips button,
.fmm-af__split .fmm-tu__chips button {
    min-height: 36px;
    padding: 0 15px;
    font-size: 13px;
}

/* Cards and labels --------------------------------------------------------- */
.fmm-tu__label { font-size: 12px; line-height: 18px; }
.fmm-tu__brands { font-size: 12px; }
.fmm-tu__secure { font-size: 12.5px; line-height: 18px; }
.fmm-tu__info { font-size: 13px; line-height: 20px; }
.fmm-tu__note { font-size: 13px; line-height: 20px; }
.fmm-tu__vsnote { font-size: 13px; line-height: 20px; }
.fmm-tu__vs b { font-size: 15px; line-height: 22px; }
.fmm-tu__vs em { font-size: 12.5px; line-height: 18px; }

/* Payment option rows ------------------------------------------------------ */
.fmm-tu__card > .fmm-paymethod,
.fmm-af__split .fmm-paymethod { min-height: 76px; padding: 14px 16px; gap: 14px; }
.fmm-tu__card > .fmm-paymethod b,
.fmm-af__split .fmm-paymethod b { font-size: 15px; line-height: 22px; }
.fmm-tu__card > .fmm-paymethod em,
.fmm-af__split .fmm-paymethod em { font-size: 12.5px; line-height: 18px; }
.fmm-tu__card > .fmm-paymethod .fmm-paymethod__ico,
.fmm-af__split .fmm-paymethod .fmm-paymethod__ico { width: 40px; height: 40px; border-radius: 11px; }

.fmm-tu__radio { width: 20px; height: 20px; }
.fmm-paymethod.is-on .fmm-tu__radio {
    background: radial-gradient(circle, var(--fmm-yellow) 0 26%, #fff 29%);
}

/* Summary rail ------------------------------------------------------------- */
.fmm-tu__sum h2 { font-size: 15px; line-height: 22px; margin-bottom: 12px; }
.fmm-tu__row { font-size: 13px; line-height: 19px; padding: 7px 0; }
.fmm-tu__row b { font-size: 13px; line-height: 19px; }
.fmm-tu__row--total span { font-size: 15px; line-height: 22px; }
.fmm-tu__row--total b { font-size: 20px; line-height: 28px; }
.fmm-tu__method em { font-size: 10.5px; }
.fmm-tu__method b { font-size: 13px; line-height: 19px; }
.fmm-tu__est { font-size: 11.5px; }

/* Card form ---------------------------------------------------------------- */
/* Elements renders its own iframe, so the field height comes from the
   container's padding. */
.fmm-tu__card .fmm-card-el { min-height: 46px; padding: 13px 14px; }
.fmm-tu-newcard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 14px;
}
.fmm-tu-newcard__field { display: grid; min-width: 0; gap: 6px; }
.fmm-tu-newcard__field--full { grid-column: 1 / -1; }
.fmm-tu-newcard__field > span {
    color: #111827;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.fmm-tu-newcard__stripe,
.fmm-tu-newcard__field input,
.fmm-tu-newcard__field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    border: 1px solid #E5E7EB;
    border-radius: 9px;
    padding: 11px 12px;
    background: #F3F4F6;
    color: #231F20;
    font: inherit;
    font-size: 13px;
}
.fmm-tu-newcard__stripe { display: flex; align-items: center; cursor: text; }
.fmm-tu-newcard__stripe > div,
.fmm-tu-newcard__stripe .__PrivateStripeElement { width: 100% !important; flex: 1 1 100%; min-width: 0; }
.fmm-tu-newcard__stripe iframe { width: 100% !important; }
.fmm-tu-newcard__field input::placeholder { color: #A1A1AA; }
.fmm-tu-newcard__field input:focus,
.fmm-tu-newcard__field select:focus,
.fmm-tu-newcard__stripe.StripeElement--focus,
.fmm-tu-newcard__stripe:focus-within { outline: 2px solid #FBBF24; outline-offset: 1px; }
.fmm-tu-newcard__stripe.StripeElement--invalid { border-color: #B91C1C; }
.fmm-tu__save { min-height: 38px; font-size: 13.5px; }

/* Outcome screens ---------------------------------------------------------- */
.fmm-tu__state h1 { font-size: 26px; line-height: 32px; }
.fmm-tu__state > p { font-size: 15px; line-height: 22px; max-width: 48ch; }
.fmm-tu__state .fmm-tu__row { font-size: 13px; }
.fmm-tu__newbal span { font-size: 13px; line-height: 19px; }
.fmm-tu__newbal em { font-size: 11.5px; }
.fmm-tu__newbal b { font-size: 20px; line-height: 28px; }
.fmm-tu__warn { font-size: 12.5px; line-height: 18px; }
.fmm-tu__spinner,
.fmm-tu__tick,
.fmm-tu__bang { width: 54px; height: 54px; }
.fmm-tu__bang { font-size: 24px; }

/* Add Funds dialog --------------------------------------------------------- */
.fmm-af .fmm-pay__righttop h2 { font-size: 18px; line-height: 24px; }
.fmm-af__bal { padding: 11px 13px; }
.fmm-af__bal em { font-size: 10.5px; }
.fmm-af__bal b { font-size: 19px; line-height: 26px; }
.fmm-af__enter > span { font-size: 12px; line-height: 18px; }
.fmm-af__enter label { font-size: 34px; line-height: 42px; }
.fmm-af__enter i { font-size: 21px; line-height: 26px; }
.fmm-af__sum { padding: 14px; }
.fmm-af__sum h3 { font-size: 12px; line-height: 18px; }

/* Bring the in-wallet dialog in line with the Figma top-up composition. */
.fmm-af {
    background: linear-gradient(90deg, #fff 0 calc(100% - 280px), #FFFCF6 calc(100% - 280px));
    overflow: hidden auto;
}
.fmm-af__split { gap: 16px; }
.fmm-af__bal {
    background: #FFFBF4;
    border: 1px solid #F3EEE5;
    border-radius: 10px;
    position: relative;
    padding-right: 54px;
}
.fmm-af__bal-ico { position: absolute; top: 50%; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; transform: translateY(-50%); border: 1px solid #F0ECE5; border-radius: 50%; background: #fff; color: #E7A900; }
.fmm-af__enter {
    padding: 14px 12px 12px;
    margin: 0;
    border: 1px solid #E8E9EC;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(17, 24, 39, .05);
}
.fmm-af__enter label { font-size: 38px; line-height: 46px; }
.fmm-af__enter input { width: 5.5ch; text-align: center; }
.fmm-af__split .fmm-tu__chips { margin: 12px 0 20px; }
.fmm-af__split .fmm-tu__chips button { background: #FFFBF4; border-color: transparent; }
.fmm-af__split .fmm-tu__chips button:hover { background: var(--fmm-yellow); }
.fmm-af__split .fmm-paymethod {
    min-height: 70px;
    border-radius: 10px;
}
.fmm-af__split .fmm-paymethod.is-on { border-color: #FBBF24; background: #FFFCF6; }
.fmm-af__split .fmm-paymethod__ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #D99000;
    background: #FFF5DE;
}
.fmm-af__split .fmm-paymethod.is-on .fmm-paymethod__ico { background: #FFF2D1; }
.fmm-af__naira { font-size: 17px; line-height: 1; font-weight: 700; }
.fmm-af__split .fmm-tu__radio { width: 16px; height: 16px; }
.fmm-af .fmm-tu__secure { justify-content: flex-start; margin-top: 12px; font-size: 10px; }
.fmm-af .fmm-tu__secure svg { color: #F4AA00; }
.fmm-af__actions { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.fmm-af__actions .fmm-btn {
    flex: 0 0 255px;
    width: 255px;
    max-width: 62%;
    min-height: 42px;
    padding: 8px 14px;
    font-size: 12px;
    justify-content: center;
}
.fmm-af__actions .fmm-vlink {
    flex: 0 0 auto;
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 8px 4px;
    font-size: 11px;
    white-space: nowrap;
}
.fmm-af__sum {
    min-height: 100%;
    border: 0;
    border-radius: 0;
    padding: 4px 0 12px 12px;
    background: transparent;
}
.fmm-af__sum h3 { color: #111827; border-bottom: 1px solid #EEEAE2; padding-bottom: 12px; margin-bottom: 8px; }
.fmm-af__sum .fmm-tu__row { font-size: 10px; line-height: 16px; gap: 8px; padding: 8px 0; color: #4B5563; }
.fmm-af__sum .fmm-tu__row b { font-size: 10px; line-height: 16px; white-space: nowrap; }
.fmm-af__sum .fmm-tu__row--total { border: 0; margin: 5px -2px 0; padding: 9px 10px; border-radius: 9px; background: #fff; box-shadow: 0 2px 5px rgba(17,24,39,.07); }
.fmm-af__sum .fmm-tu__row--total span,
.fmm-af__sum .fmm-tu__row--total b { color: #111827; font-size: 12px; line-height: 18px; }
.fmm-af__sum .fmm-af__fee.is-free b { color: #16A34A; }
.fmm-af__sum .fmm-af__fee b { color: #111827; }
.fmm-af__sum .fmm-af__charge { border-top: 1px solid #EEEAE2; margin-top: 4px; padding-top: 10px; color: #111827; font-weight: 700; }
.fmm-af__sum .fmm-af__charge b { font-size: 11px; }

/* Payment-method selection step, matching the Figma funding-summary layout. */
.fmm-tu-page > .fmm-container { max-width: var(--fmm-container); }
.fmm-tu-flow { min-width: 0; }
.fmm-tu-method-screen .fmm-tu {
    grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
    gap: 28px;
}
.fmm-tu-method-screen .fmm-page-head { margin-bottom: 20px; }
.fmm-tu-page .fmm-tu__brands { display: flex; align-items: center; gap: 4px; }
.fmm-tu-page .fmm-tu__brands img { display: block; width: 27px; height: 21px; object-fit: contain; }
.fmm-tu-method-screen .fmm-tu__amount {
    padding: 22px;
    margin-bottom: 16px;
}
.fmm-tu-method-screen .fmm-tu__amount > span { color: #111827; }
.fmm-tu-method-screen .fmm-tu__amount > b { font-size: 36px; line-height: 44px; }
.fmm-tu-method-screen .fmm-tu__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    margin-bottom: 0;
}
.fmm-tu-method-screen .fmm-tu__label { margin-bottom: 0; color: #111827; font-size: 14px; letter-spacing: 0; text-transform: none; }
.fmm-tu-method-screen .fmm-tu__card > .fmm-paymethod { margin: 0; }
.fmm-tu-method-screen .fmm-tu-method-cards { margin: 0; }
.fmm-tu-method-screen .fmm-tu__secure { margin: 4px 0 0; }
.fmm-tu-method-screen .fmm-tu__sum { position: static; padding: 18px; }
.fmm-tu-method-screen .fmm-tu__sum h2 { padding-bottom: 12px; border-bottom: 1px solid #EAECF0; }
.fmm-tu-method-screen .fmm-tu__row { font-size: 11px; }
.fmm-tu-method-screen .fmm-tu__row b { font-size: 11px; }
.fmm-tu-method-screen .fmm-tu__row b.is-free { color: #16A34A; }
.fmm-tu-method-screen .fmm-tu__row--total { margin-top: 7px; padding-top: 12px; }
.fmm-tu-method-screen .fmm-tu__row--total b { font-size: 17px; }
.fmm-tu-method-screen .fmm-tu__sum .fmm-btn { min-height: 42px; font-size: 12px; }
.fmm-tu-method-screen .fmm-tu__sum .fmm-vlink { min-height: 34px; margin-top: 8px; color: var(--fmm-muted); font-size: 11px; font-weight: 500; }
.fmm-tu-page .fmm-tu__sum .fmm-tu__change-method {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    margin: 8px 0 0;
    padding: 7px 10px;
    border: 1px solid #DFE2E8;
    border-radius: 9px;
    background: #fff;
    color: #111827;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}
.fmm-tu-page .fmm-tu__sum .fmm-tu__change-method:hover { border-color: #C9CDD4; background: #FAFAFA; text-decoration: none; }
.fmm-tu-method-screen .fmm-tu__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-color: #DBEAFE;
    padding: 12px 13px;
    background: #EFF6FF;
    color: #1E40AF;
    font-size: 10px;
    line-height: 1.55;
}
.fmm-tu-method-screen .fmm-tu__note svg { flex: 0 0 auto; color: #3B82F6; margin-top: 1px; }
.fmm-tu-naira .fmm-tu__amount { padding: 22px; }
.fmm-tu-naira .fmm-tu__amount > .fmm-tu__conv {
    margin: 12px 0 0;
    color: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
.fmm-tu-naira .fmm-tu__conv { margin-top: 12px; }
.fmm-tu-naira .fmm-tu__conv b {
    border: 1px solid #F3E0B4;
    border-radius: 8px;
    padding: 10px 14px;
    background: #FFFCF6;
    color: #111827;
    font-size: 16px;
    line-height: 22px;
}
.fmm-tu-naira .fmm-tu__conv em { margin-top: 10px; font-size: 11px; }
.fmm-tu-naira .fmm-tu__vs { min-height: 38px; }
.fmm-tu-naira .fmm-tu__vs .fmm-paymethod__ico {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #F8E5BC;
    border-radius: 9px;
    background: #FFFCF6;
    color: #F5A900;
}
.fmm-tu-naira .fmm-tu__vsnote {
    margin-top: 14px;
    border: 1px solid #ECEDEF;
    border-radius: 9px;
    padding: 14px;
    background: #F5F5F5;
    color: #272727;
    font-size: 12px;
    line-height: 1.55;
}
.fmm-tu-naira__summary-title { color: #111827; font-size: 11px; letter-spacing: .04em; }
.fmm-tu-naira .fmm-tu__sum h2 {
    margin: 0 0 9px;
    padding-bottom: 11px;
    border-bottom: 1px solid #EAECF0;
}
.fmm-tu-naira .fmm-tu__sum .fmm-tu__row { padding: 6px 0; font-size: 11px; line-height: 16px; }
.fmm-tu-naira .fmm-tu__sum .fmm-tu__row b { font-size: 11px; line-height: 16px; }
.fmm-tu-naira__total {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 12px;
    margin-top: 7px;
    border: 1px solid #F3E0B4;
    border-radius: 9px;
    padding: 11px 12px;
    background: #FFFCF6;
}
.fmm-tu-naira__total > span { color: #111827; font-size: 12px; font-weight: 600; }
.fmm-tu-naira__total > b { color: #111827; font-size: 17px; font-weight: 800; text-align: right; }
.fmm-tu-naira__total > em { grid-column: 1 / -1; color: var(--fmm-muted); font-size: 9px; font-style: normal; }
.fmm-tu-naira .fmm-tu__sum .fmm-btn--primary { min-height: 40px; padding: 8px 14px; font-size: 12px; }
.fmm-tu-naira .fmm-tu__sum .fmm-tu-naira__change {
    min-height: 34px;
    margin-top: 8px;
    border: 1px solid #DFE2E8;
    border-radius: 9px;
    background: #fff;
    box-shadow: none;
    color: #111827;
    font-size: 11px;
    font-weight: 500;
}
.fmm-tu-naira .fmm-tu__sum .fmm-tu-naira__change:hover { border-color: #C9CDD4; background: #FAFAFA; }
.fmm-tu-naira .fmm-tu__sum > .fmm-vlink {
    min-height: 30px;
    margin-top: 2px;
    color: var(--fmm-muted);
    font-size: 11px;
    font-weight: 500;
}
.fmm-tu-naira .fmm-tu__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-color: #ECEDEF;
    padding: 12px 13px;
    background: #F5F5F5;
    color: #272727;
    font-size: 10px;
    line-height: 1.55;
}
.fmm-tu-naira .fmm-tu__note img {
    flex: 0 0 auto;
    border-radius: 50%;
    padding: 2px;
    background: #fff;
    opacity: .55;
}
.fmm-tu-naira .fmm-tu__note b { font-size: 10px; }
.fmm-tu-naira .fmm-tu__note a { color: #272727; text-decoration: underline; }
.fmm-tu-method-cards {
    display: grid;
    gap: 8px;
    margin: 10px 0 12px;
    padding: 10px;
    border: 1px solid #F0EDE7;
    border-radius: 10px;
    background: #FFFCF6;
}
.fmm-tu-method-cards > p {
    margin: 0 2px 1px;
    color: var(--fmm-muted);
    font-size: 11px;
    font-weight: 600;
}
.fmm-tu-method-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 8px 10px;
    border: 1px solid var(--fmm-border);
    border-radius: 8px;
    background: #fff;
    color: var(--fmm-text);
    text-align: left;
    cursor: pointer;
}
.fmm-tu-method-card.is-on { border-color: #FBBF24; box-shadow: 0 0 0 1px #FBBF24 inset; }
.fmm-tu-method-card__brand {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #FFF5DE;
    color: #9A6700;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.fmm-tu-method-card__brand--add { font-size: 20px; font-weight: 500; }
.fmm-tu-method-card__details { display: block; flex: 1; min-width: 0; }
.fmm-tu-method-card__details b,
.fmm-tu-method-card__details em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmm-tu-method-card__details b { font-size: 12px; font-weight: 700; }
.fmm-tu-method-card__details em { margin-top: 2px; color: var(--fmm-muted); font-size: 10px; font-style: normal; }
.fmm-tu-method-card .fmm-tu__radio { width: 16px; height: 16px; }
.fmm-tu-method-card.is-on .fmm-tu__radio { border-color: var(--fmm-yellow); background: radial-gradient(circle, var(--fmm-yellow) 0 42%, #fff 45%); }
.fmm-tu-method-cards + .fmm-paymethod { margin-top: 0; }
.fmm-tu-selected-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    margin-bottom: 14px;
    padding: 9px 11px;
    border: 1px solid #FBBF24;
    border-radius: 9px;
    background: #FFFCF6;
}
.fmm-tu-selected-card .fmm-tu-method-card__details { flex: 1; min-width: 0; }
.fmm-tu-selected-card .fmm-tu-method-card__details b { display: block; font-size: 12px; }
.fmm-tu-selected-card .fmm-tu-method-card__details em { display: block; margin-top: 2px; color: var(--fmm-muted); font-size: 10px; font-style: normal; }
.fmm-tu-selected-card > button,
.fmm-tu-newcard__change {
    border: 0;
    padding: 5px 7px;
    background: transparent;
    color: #9A6700;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.fmm-tu-newcard__change { display: block; margin: 0 0 12px auto; }

/* Failed top-up state from the wallet funding result screen. */
.fmm-tu__failed-state { max-width: 760px; padding: 30px 0 54px; }
.fmm-tu__failed-panel {
    max-width: 700px; margin: 0 auto; padding: 34px 76px 28px;
    border: 1px solid #F0F1F3; border-radius: 16px; background: #fff;
    box-shadow: 0 2px 12px rgba(20, 25, 35, .025);
}
.fmm-tu__failed-icon {
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px;
    border-radius: 50%; background: #FFF0F0; color: #EF4444;
}
.fmm-tu__failed-icon i {
    display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #FCA5A5;
    border-radius: 50%; background: #FFF7F7; font-size: 18px; font-style: normal; font-weight: 600;
}
.fmm-tu__failed-panel > h1 { margin: 0 0 7px; font-size: 21px; line-height: 28px; }
.fmm-tu__failed-panel > p { max-width: 44ch; margin: 0 auto 18px; color: #5F6876; font-size: 12px; line-height: 18px; }
.fmm-tu__failed-transaction {
    padding: 13px 14px 10px; border: 1px solid #F5EBD9; border-radius: 10px;
    background: #FFFCF6; text-align: left;
}
.fmm-tu__failed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.fmm-tu__failed-head > b { color: #252525; font-size: 11px; font-weight: 700; }
.fmm-tu__failed-head .fmm-chip { padding: 4px 8px; border-radius: 999px; font-size: 9px; }
.fmm-tu__failed-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 34px; color: #667085; font-size: 10px; }
.fmm-tu__failed-row > b { color: #20242B; font-size: 11px; font-weight: 700; text-align: right; }
.fmm-tu__failed-rowicon { display: grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: #F2A900; background: #FFF7ED; }
.fmm-tu__failed-rowicon--fee { color: #4B5563; background: #F3F4F6; padding: 0; }
.fmm-tu__failed-rowicon--total { color: #0284C7; background: #F0F9FF; padding: 0; }
.fmm-tu__failed-rowicon--naira { color: #059669; background: #ECFDF5; padding: 0; }
.fmm-tu__failed-rowicon--method { color: #293241; background: #F3F4F6; }
.fmm-tu__failed-rowicon img { display: block; max-width: none; }
.fmm-tu__failed-rowicon:not(.fmm-tu__failed-rowicon--method):not(.fmm-tu__failed-rowicon--fee):not(.fmm-tu__failed-rowicon--total):not(.fmm-tu__failed-rowicon--naira) img { width: 10px; height: 13px; }
.fmm-tu__failed-rowicon--method img { width: 12px; height: 12px; }
.fmm-tu__failed-row--total { padding-top: 5px; margin-top: 3px; border-top: 1px dashed #F0E6D2; }
.fmm-tu__failed-row--total > span { font-weight: 600; color: #374151; }
.fmm-tu__failed-row--total > b { font-size: 11.5px; color: #111827; }
.fmm-tu__failed-actions { display: grid; gap: 8px; margin-top: 12px; }
.fmm-tu__failed-actions .fmm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; padding: 8px 14px; border-radius: 8px; font-size: 11px; }
.fmm-tu__failed-actions .fmm-btn--primary { color: #151515; }
.fmm-tu__failed-actions .fmm-btn--ghost { border: 1px solid #E8E9EC; background: #fff; }
.fmm-tu__failed-back { display: inline-flex; align-items: center; justify-content: center; min-height: 34px !important; margin-top: 3px; color: #747C89; font-size: 10px !important; font-weight: 500 !important; }

@media (max-width: 720px) {
    .fmm-tu__failed-state { padding: 22px 0 38px; }
    .fmm-tu__failed-panel { padding: 28px 20px 22px; border-radius: 13px; }
}

@media (max-width: 980px) {
    .fmm-af { background: #fff; overflow-y: auto; }
    .fmm-af__sum { padding: 14px; border: 1px solid #F0EDE7; border-radius: 10px; background: #FFFCF6; }
    .fmm-af__actions { flex-wrap: wrap; }
    .fmm-tu-method-screen .fmm-tu { grid-template-columns: minmax(0, 1fr); }
}

/* --- responsive ----------------------------------------------------------- */
/*
 * Four steps, and the dialog gets its own — it is the tallest thing here and
 * had no max-height at all, so on a short window it ran off the bottom of the
 * screen with no way to reach Continue.
 */

/* Laptop: the summary rail is the first thing to give. */
@media (max-width: 1200px) {
    .fmm-tu { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
    .fmm-tu__state .fmm-tu { grid-template-columns: minmax(0, 1fr) 290px; }
}

/* Tablet: one column, summary underneath, and it stops being sticky — a
   sticky element in a single column just pins itself to the top of its own
   row and never moves. */
@media (max-width: 980px) {
    .fmm-tu,
    .fmm-tu__state .fmm-tu { grid-template-columns: minmax(0, 1fr); }
    .fmm-tu__sum { position: static; }
    .fmm-af__split { grid-template-columns: minmax(0, 1fr); }
    /* The dialog's summary reads as a recap once it sits below the form. */
    .fmm-af__sum { order: 2; }
}

@media (max-width: 720px) {
    .fmm-tu-page .fmm-page-head h1,
    .fmm-tu__state h1 { font-size: 22px; line-height: 28px; }
    .fmm-tu-page .fmm-page-head p,
    .fmm-tu__state > p { font-size: 14px; line-height: 21px; }

    .fmm-tu__amount { padding: 16px; }
    .fmm-tu__amount > b,
    .fmm-tu__amount > label,
    .fmm-af__enter label { font-size: 30px; line-height: 38px; }
    .fmm-tu__amount i,
    .fmm-af__enter i { font-size: 19px; }

    .fmm-tu__card,
    .fmm-tu__sum,
    .fmm-tu__statecard { padding: 15px; }

    /* Five chips will not sit on one line on a phone; let them wrap evenly
       rather than scroll off the edge. */
    .fmm-tu__chips { gap: 7px; }
    .fmm-tu__chips button { flex: 1 1 auto; min-width: 62px; padding: 0 10px; }

    .fmm-tu__card > .fmm-paymethod,
    .fmm-af__split .fmm-paymethod { min-height: 68px; padding: 12px 13px; gap: 11px; }
    .fmm-tu__card > .fmm-paymethod .fmm-paymethod__ico,
    .fmm-af__split .fmm-paymethod .fmm-paymethod__ico { width: 34px; height: 34px; }

    .fmm-tu__row--total b,
    .fmm-tu__newbal b { font-size: 18px; line-height: 26px; }

    /* Stack the two-up header rows so a long label and its value stop
       colliding in a narrow column. */
    .fmm-tu__cardhead { flex-wrap: wrap; gap: 6px; }
    .fmm-tu__acts { flex-direction: column; }
    .fmm-tu__acts .fmm-btn { width: 100%; min-width: 0; }
    .fmm-tu-newcard { gap: 11px; }
}

@media (max-width: 480px) {
    .fmm-tu__amount > b,
    .fmm-tu__amount > label,
    .fmm-af__enter label { font-size: 26px; line-height: 34px; }
    .fmm-tu__amount i,
    .fmm-af__enter i { font-size: 17px; }
    .fmm-tu__amount input { width: 5.5ch; }

    /* A label and a figure on one 320px line is two truncated strings; give
       each row its own two lines instead. */
    .fmm-tu__row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .fmm-tu__row b { text-align: left; }
    .fmm-tu__newbal { flex-direction: column; align-items: flex-start; gap: 6px; }

    .fmm-tu__id,
    .fmm-tu__vs { flex-wrap: wrap; }
}

/* The dialog: never taller than the window, and scrollable when the content
   genuinely doesn't fit. */
.fmm-af {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 640px) {
    .fmm-modal:has(.fmm-af) { padding: 12px; }
    .fmm-af { max-height: calc(100vh - 24px); padding: 20px; }
    .fmm-af__split { gap: 16px; }
}

/* --- incoming package: review, rails and the sender confirm --------------- */

/* The tracking-number header on Review and on the confirmation. */
.fmm-ipsum {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    padding: 14px 16px;
    background: var(--fmm-bg-alt);
}

.fmm-ipsum__ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-ipsum em {
    display: block;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-ipsum b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }

.fmm-ipsum__label {
    display: block;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-ipsum__val { display: block; font-size: 13.5px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }

/* Two rail callouts. The note keeps its icon in a column beside the text; the
   warning stacks, because its heading is a full sentence and sitting it in a
   flex row alongside the body squeezed both into two narrow columns. */
.fmm-ipnote,
.fmm-ipwarn {
    border-radius: var(--fmm-radius);
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.55;
}

.fmm-ipnote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #DBEAFE;
    background: #EFF6FF;
    color: #1E3A8A;
}
.fmm-ipnote--processing { border-color: #E5E7EB; background: #FFFFFF; color: #374151; }
.fmm-ipnote--processing > img { flex: none; width: 14px; height: 14px; object-fit: contain; }

.fmm-ipwarn {
    display: block;
    border: 1px solid #FDE9C8;
    background: var(--fmm-yellow-soft);
    color: #7C4A03;
    margin-top: 0;
}

.fmm-ipnote svg,
.fmm-ipwarn svg { flex-shrink: 0; }

.fmm-ipnote b,
.fmm-ipwarn b {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 4px;
}

.fmm-ipnote b { display: block; }
.fmm-ipnote > span > b { display: flex; }

.fmm-iphelp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--fmm-muted);
}

.fmm-iphelp a { color: var(--fmm-muted); text-decoration: underline; text-underline-offset: 2px; }
.fmm-iphelp a:hover { color: var(--fmm-text); }

/* "Ready to Submit" — a tick per item, filled once that field is answered. */
.fmm-ipcheck { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.fmm-ipcheck li {
    position: relative;
    padding-left: 26px;
    font-size: 12.5px;
    color: var(--fmm-muted);
}

.fmm-ipcheck li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--fmm-border);
    border-radius: 50%;
    background: #fff;
}

.fmm-ipcheck li.is-on { color: var(--fmm-text); font-weight: 600; }

.fmm-ipcheck li.is-on::before {
    border-color: var(--fmm-teal);
    background: var(--fmm-teal)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")
        center / 10px 10px no-repeat;
}

/* Confirm Sender Information */
.fmm-ipconfirm { position: relative; max-width: 460px; text-align: center; }

.fmm-ipconfirm__bang {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-ipconfirm h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 14px 0 0; }
.fmm-ipconfirm .fmm-ipwarn { text-align: left; }
.fmm-ipconfirm .fmm-tu__label { text-align: left; }

.fmm-ipconfirm__rows {
    display: grid;
    gap: 2px;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    padding: 6px;
    text-align: left;
}

.fmm-ipconfirm__rows > div { display: flex; align-items: center; gap: 11px; padding: 9px 10px; }
.fmm-ipconfirm__rows > div + div { border-top: 1px solid var(--fmm-border); }
.fmm-ipconfirm__rows svg { flex-shrink: 0; color: var(--fmm-muted); }
.fmm-ipconfirm__rows em { display: block; font-size: 10.5px; font-style: normal; color: var(--fmm-faint); }
.fmm-ipconfirm__rows b { display: block; font-size: 13px; font-weight: 600; margin-top: 1px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .fmm-ipsum { flex-wrap: wrap; }
    .fmm-ipconfirm { padding: 22px; }
}

/* --- settings: rail icons, groups and sign-out ---------------------------- */
/* The rail gained an icon per row and a Log Out at the foot, so its rows are
   now a three-part flex line rather than a plain label. */

.fmm-snav a,
.fmm-snav button {
    display: flex;
    align-items: center;
    gap: 11px;
}

.fmm-snav a > svg:first-child,
.fmm-snav button > svg:first-child { flex-shrink: 0; color: var(--fmm-muted); }
.fmm-snav__download-icon {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 17px;
    max-height: 17px;
}
.fmm-snav a.is-on .fmm-snav__download-icon,
.fmm-snav button.is-on .fmm-snav__download-icon {
    filter: invert(78%) sepia(92%) saturate(1338%) hue-rotate(337deg) brightness(103%) contrast(101%);
}
.fmm-snav a .fmm-snav__download-icon.fmm-snav__download-icon--black,
.fmm-acct__nav a .fmm-snav__download-icon.fmm-snav__download-icon--black {
    filter: var(--fmm-icon-black-filter);
}
.fmm-snav a.is-on > svg:first-child,
.fmm-snav button.is-on > svg:first-child { color: #FBBF24; }
.fmm-snav a.is-on > svg.fmm-snav__profile-mark:first-child { color: var(--fmm-text); }
.fmm-snav__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-block;
    background: #000;
    -webkit-mask: var(--fmm-icon-url) center / contain no-repeat;
    mask: var(--fmm-icon-url) center / contain no-repeat;
}

.fmm-snav button.is-on .fmm-snav__icon {
    background: #FBBF24;
}

.fmm-twofa-page { max-width: 594px; }
.fmm-twofa-status { position:relative; display:flex; justify-content:space-between; min-height:126px; margin:26px 0 27px; padding:21px 20px; overflow:hidden; border:1px solid var(--fmm-border); border-radius:9px; background:#FFFDF5; }
.fmm-twofa-status::after { content:""; position:absolute; width:150px; height:150px; right:-52px; top:-75px; border-radius:50%; background:#FFF6D9; }
.fmm-twofa-status > div { position:relative; z-index:1; }
.fmm-twofa-status h2 { margin:0 0 5px; font-size:14px; }
.fmm-twofa-status p { display:flex; align-items:center; margin:0 0 13px; color:#22A35A; font-size:12px; }
.fmm-twofa-status p i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#22A35A; }
.fmm-twofa-status p span { display:inline; color:inherit; font-size:inherit; line-height:1; }
.fmm-twofa-status span { display:block; max-width:490px; font-size:12px; line-height:18px; }
.fmm-twofa-toggle { position:relative; z-index:2; width:39px; height:20px; margin:0 3px 0 20px; border:0; border-radius:99px; background:#FBBF24; }
.fmm-twofa-toggle i { position:absolute; top:3px; right:3px; width:14px; height:14px; border-radius:50%; background:#fff; }
.fmm-twofa-toggle:not(.is-on) { background:#CBD5E1; }
.fmm-twofa-toggle:not(.is-on) i { right:auto; left:3px; }
.fmm-twofa-toggle:disabled { opacity:.65; cursor:wait; }
.fmm-twofa-label { margin:0 0 12px 3px; font-size:12px; letter-spacing:.04em; }
.fmm-twofa-methods { display:grid; gap:12px; }
.fmm-twofa-method { position:relative; display:flex; align-items:center; gap:16px; width:100%; min-height:74px; padding:14px 16px; border:1px solid var(--fmm-border); border-radius:9px; background:#fff; text-align:left; font:inherit; cursor:pointer; }
.fmm-twofa-method.is-on { border:2px solid #FBBF24; padding:13px 15px; }
.fmm-twofa-method__icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:#FFF8E6; color:#24201D; font-size:9px; font-weight:800; }
.fmm-twofa-method__icon img { width:18px; height:18px; object-fit:contain; }
.fmm-twofa-method > span:nth-child(2) { display:grid; gap:4px; min-width:0; }
.fmm-twofa-method b { font-size:15px; }
.fmm-twofa-method small { font-size:11px; }
.fmm-twofa-method > i { margin-left:auto; color:#CBD5E1; font-size:25px; font-style:normal; }
.fmm-twofa-state { display:grid; place-items:center; width:20px; height:20px; }
.fmm-twofa-state img { width:12px; height:12px; object-fit:contain; opacity:.9; }
.fmm-twofa-state b { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#FBBF24; color:#fff; font-size:13px; line-height:1; }
.fmm-twofa-method em { position:absolute; top:-10px; right:17px; padding:4px 9px; border-radius:99px; background:#111; color:#fff; font-size:8px; font-style:normal; font-weight:700; }
.fmm-twofa-save { width:100%; height:43px; margin-top:26px; justify-content:center; }
.fmm-twofa-confirm { display:grid; gap:6px; margin-top:14px; padding:14px; border:1px solid #FBBF24; border-radius:9px; background:#FFFDF5; font-size:12px; }
.fmm-twofa-confirm > span { color:var(--fmm-muted); }
.fmm-twofa-confirm > div { display:flex; gap:8px; margin-top:4px; }
.fmm-twofa-confirm input { min-width:0; flex:1; height:38px; padding:0 11px; border:1px solid var(--fmm-border); border-radius:6px; font:inherit; }
.fmm-twofa-confirm button { min-width:78px; border:0; border-radius:6px; background:#FBBF24; color:#111; font:inherit; font-weight:700; cursor:pointer; }
.fmm-twofa-confirm button:disabled { opacity:.55; cursor:not-allowed; }
.fmm-twofa-qr { width:128px; height:128px; border:1px solid var(--fmm-border); border-radius:6px; background:#fff; }
.fmm-twofa-secret { width:max-content; padding:5px 7px; border-radius:4px; background:#fff; color:#374151; font-size:11px; letter-spacing:.08em; }
.fmm-offer-page { max-width:650px; }.fmm-offer-card { overflow:hidden; margin:22px 0; border:1px solid #E5E7EB; border-radius:10px; background:#fff; }.fmm-offer-card header { padding:16px 18px; background:#FCFCFB; }.fmm-offer-card h2 { margin:0 0 3px; font-size:14px; }.fmm-offer-card header p { margin:0; font-size:10px; }.fmm-offer-card label { position:relative; display:flex; align-items:center; gap:12px; min-height:58px; padding:10px 18px; border-top:1px solid #F1F1F1; cursor:pointer; }.fmm-offer-card label > span:nth-child(2) { display:grid; gap:3px; flex:1; }.fmm-offer-card b { font-size:11px; }.fmm-offer-card small { font-size:9px; }.fmm-offer-icon { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border-radius:50%; background:#FFF8E6; font-size:11px; }.fmm-offer-icon img { display:block; width:13px; height:13px; object-fit:contain; }.fmm-offer-card input { position:absolute; opacity:0; }.fmm-offer-card label > i { width:28px; height:14px; border-radius:99px; background:#D1D5DB; }.fmm-offer-card label > i::after { content:""; display:block; width:10px; height:10px; margin:2px; border-radius:50%; background:#fff; transition:transform .15s; }.fmm-offer-card input:checked + i { background:#FBBF24; }.fmm-offer-card input:checked + i::after { transform:translateX(14px); }.fmm-offer-save { float:right; min-width:116px; justify-content:center; }
.fmm-sessions-page { max-width:650px; }
.fmm-sessions-heading { display:flex; justify-content:space-between; align-items:center; margin:0 0 14px; font-size:10px; font-weight:800; color:#6B7280; letter-spacing:.06em; }
.fmm-sessions-heading i { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#36B37E; }
.fmm-sessions-heading small { padding:5px 10px; border-radius:20px; background:#F5F5F4; font-size:9px; font-weight:400; letter-spacing:0; }
.fmm-current-device { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid #A7E8D1; border-left:4px solid #36B37E; border-radius:9px; }
.fmm-device-icon,.fmm-quick-actions strong { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:9px; background:#D7F8EA; color:#20B882; }
.fmm-quick-actions strong img { width:20px; height:20px; object-fit:contain; }
.fmm-current-device > div:nth-child(2) { display:grid; gap:4px; flex:1; }.fmm-current-device b { font-size:14px; }.fmm-current-device em { width:max-content; margin-left:6px; padding:4px 8px; border-radius:12px; background:#36B37E; color:#fff; font-size:8px; font-style:normal; }.fmm-current-device small,.fmm-current-device span { color:#6B7280; font-size:10px; }.fmm-current-device label { padding:8px 12px; border-radius:8px; background:#D7F8EA; color:#20B882; font-size:10px; }
.fmm-sessions-label { display:flex; justify-content:space-between; margin:24px 0 10px; font-size:10px; letter-spacing:.06em; }.fmm-sessions-label a { color:#FBBF24; text-decoration:none; letter-spacing:0; }
.fmm-session-table { overflow:hidden; border:1px solid #E5E7EB; border-radius:10px; }.fmm-session-row { display:grid; grid-template-columns:1.2fr 1.2fr 1fr; gap:12px; align-items:center; min-height:58px; padding:10px 14px; border-bottom:1px solid #E5E7EB; font-size:10px; }.fmm-session-row:last-child { border-bottom:0; }.fmm-session-head { min-height:34px; background:#F8FAFC; font-size:8px; }.fmm-session-row span { display:grid; gap:3px; }.fmm-session-row small { color:#6B7280; font-size:9px; }.fmm-session-row button { width:max-content; border:0; background:none; color:#F43F5E; font-size:10px; cursor:pointer; }.fmm-session-row em { width:max-content; padding:6px 10px; border-radius:8px; background:#F3F4F6; color:#4B5563; font-style:normal; }
.fmm-quick-actions { overflow:hidden; border:1px solid #E5E7EB; border-radius:10px; }.fmm-quick-actions button { display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; border:0; border-bottom:1px solid #E5E7EB; background:#fff; text-align:left; font:inherit; cursor:pointer; }.fmm-quick-actions button:last-child { border-bottom:0; }.fmm-quick-actions span { display:grid; gap:3px; flex:1; }.fmm-quick-actions b { font-size:12px; }.fmm-quick-actions small { color:#6B7280; font-size:9px; }.fmm-quick-actions i { color:#CBD5E1; font-size:20px; }
.fmm-quick-actions button:first-child strong { background:#FFE4E8; color:#F43F5E; }
.fmm-quick-actions button:first-child b,.fmm-quick-actions button:first-child small { color:#F43F5E; }
.fmm-quick-actions button:nth-child(2) strong,
.fmm-quick-actions button:nth-child(3) strong { background:#FFF8E6; color:#24201D; }

.fmm-snav__rule {
    display: block;
    height: 1px;
    margin: 10px 4px;
    background: var(--fmm-border);
}

.fmm-snav__out {
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: #DC2626;
}

.fmm-snav__out > svg:first-child { color: #DC2626; }
.fmm-snav__out:hover { background: #FEF2F2; }

/* Settings sidebar: match the compact Figma rail typography and rhythm. */
.fmm-snav {
    font-family: Inter, sans-serif;
    border-radius: 24px;
    padding: 25px 17px;
}

.fmm-snav__label {
    padding: 10px 10px 8px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 16.5px;
    letter-spacing: .55px;
}

.fmm-snav a,
.fmm-snav > button,
.fmm-snav__out {
    min-height: 42px;
    padding: 9px 12px;
    gap: 12px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0;
}

.fmm-snav__icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.fmm-snav__rule {
    margin: 10px 4px;
}

/* --- settings overview ---------------------------------------------------- */

/* Who you are, plus the three figures worth surfacing. */
.fmm-sov__id {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 18px;
    margin-bottom: 16px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
}

.fmm-sov__av {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: visible;
    display: grid;
    place-items: center;
    background: var(--fmm-bg-alt);
}

/* Absolutely positioned so tall/wide photos are cropped to the box; the container
   keeps overflow:visible only so the verified pip can sit over the corner. */
.fmm-sov__av img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 14px; object-fit: cover; object-position: center; }
.fmm-sov__av b { font-size: 21px; font-weight: 700; color: var(--fmm-muted); }

.fmm-sov__pip {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--fmm-teal);
}

.fmm-sov__id > div > b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.fmm-sov__id > div > span { display: block; font-size: 13px; color: var(--fmm-muted); margin-top: 2px; overflow-wrap: anywhere; }

.fmm-sov__stats { display: flex; gap: 26px; margin-left: auto; }
.fmm-sov__stats > div { text-align: center; }
.fmm-sov__stats b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.fmm-sov__stats span { display: block; font-size: 11.5px; color: var(--fmm-muted); margin-top: 2px; }

/* A titled group of rows. */
.fmm-sov__card {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: 6px 10px 10px;
    margin-bottom: 16px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
}

.fmm-sov__card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--fmm-border);
    margin: 0 4px 4px;
    padding: 13px 6px 12px;
}

.fmm-sov__card > header h2 { font-size: 15px; font-weight: 800; margin: 0; }

.fmm-sov__card > header button {
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fmm-yellow-dark);
}

.fmm-sov__card > header button:hover { text-decoration: underline; }

/* One row. A button when it selects a panel, a div when it only reports. */
.fmm-sov__row {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    border-radius: 11px;
    padding: 12px 10px;
    color: var(--fmm-text);
}

.fmm-sov__row:hover { background: var(--fmm-bg-alt); }
.fmm-sov__row.is-static { cursor: default; }
.fmm-sov__row.is-static:hover { background: none; }

.fmm-sov__row > i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-sov__row:not(.is-static):hover > i { color: var(--fmm-yellow-dark); background: var(--fmm-yellow-soft); }

.fmm-sov__row > span { flex: 1; min-width: 0; }
.fmm-sov__row b { display: block; font-size: 13.5px; font-weight: 600; }
.fmm-sov__row em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; overflow-wrap: anywhere; }

/* The right-hand slot: a chip, a plain value, or a button. */
.fmm-sov__row .fmm-chip,
.fmm-sov__meta { flex-shrink: 0; text-decoration: none; }
.fmm-sov__meta { font-size: 12.5px; font-style: normal; color: var(--fmm-muted); }
.fmm-sov__chev { flex-shrink: 0; color: var(--fmm-faint); }

/* On a static row the chevron is its own button, so it still has a hit area. */
.fmm-sov__go {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.fmm-sov__go:hover { background: var(--fmm-border); }

/* Warm, high-contrast settings icons and badges from the supplied Figma frame. */
.fmm-sov__id,
.fmm-sov__card { border-color:#EEF0F3; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.fmm-sov__av { width:64px; height:64px; border:2px solid #FBBF24; border-radius:14px; }
.fmm-sov__av img { border-radius:11px; }
.fmm-sov__pip { background:#22C55E; }
.fmm-sov__stats > div + div { padding-left:14px; border-left:1px solid #F6E9C6; }
.fmm-sov__row > i { width:32px; height:32px; border-radius:8px; color:#28231C; background:#FFF8E6; }
.fmm-sov__row > i img { width:18px; height:18px; object-fit:contain; }
.fmm-sov__row:not(.is-static):hover > i { color:#28231C; background:#FFF0C2; }
.fmm-sov__card > header { border-bottom-color:#F3EBD7; }
.fmm-sov__row + .fmm-sov__row { border-top:1px solid #F7F3E9; }
.fmm-settings-overview-layout .fmm-chip--verified { color:#16803C; background:#EAF8EF; border-color:transparent; }
.fmm-settings-overview-layout .fmm-chip--amber { color:#B65D00; background:#FFF3D3; border-color:transparent; }
.fmm-settings-overview-layout .fmm-chip--blue { color:#2452D6; background:#EAF1FF; border-color:transparent; }
.fmm-sov__row--payment-method > i { color:#28231C; background:#FFF8E6; }

/* Settings overview follows the compact Figma composition at every viewport:
   the legacy rail belongs to the detailed settings panels, not this overview. */
.fmm-settings-overview-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; max-width:var(--fmm-container); margin:0 auto; }
.fmm-settings-overview-layout > .fmm-settings-rail { display:none !important; }
.fmm-settings-overview-layout > .fmm-snav-wrap { display:block; }
.fmm-settings-overview-layout > div { width:100%; min-width:0; }
.fmm-section:has(.fmm-settings-overview-layout) .fmm-crumbs { display:none; }
.fmm-section:has(.fmm-settings-overview-layout) .fmm-page-head { max-width:var(--fmm-container); margin:0 auto 18px; }

/* The supplied Settings frame is the narrow, single-column account overview. */
@media (max-width: 760px) {
    .fmm-settings-overview-layout { display:block; max-width:520px; }
    .fmm-settings-overview-layout > .fmm-snav-wrap { margin-bottom:14px; }
    .fmm-section:has(.fmm-settings-overview-layout) > .fmm-container { padding-left:12px; padding-right:12px; }
    .fmm-section:has(.fmm-settings-overview-layout) .fmm-crumbs { display:none; }
    .fmm-section:has(.fmm-settings-overview-layout) .fmm-page-head { margin:0 0 18px; }
    .fmm-section:has(.fmm-settings-overview-layout) .fmm-page-head h1 { margin:0 0 4px; font-size:22px; line-height:1.2; }
    .fmm-section:has(.fmm-settings-overview-layout) .fmm-page-head p { max-width:390px; margin:0; font-size:13px; line-height:1.45; }

    .fmm-sov__id { gap:12px; padding:16px; margin-bottom:14px; border-radius:15px; box-shadow:none; }
    .fmm-sov__av { width:64px; height:64px; }
    .fmm-sov__id > div > b { font-size:16px; }
    .fmm-sov__id > div > span { font-size:12px; }
    .fmm-sov__stats { width:auto; flex:0 0 auto; justify-content:space-around; gap:12px; padding-top:0; border-top:0; }
    .fmm-sov__stats > div { flex:1; }
    .fmm-sov__stats > div + div { border-left:1px solid #F1F2F4; }
    .fmm-sov__stats b { font-size:16px; }
    .fmm-sov__stats span { font-size:11px; }

    .fmm-sov__card { padding:0; margin-bottom:14px; border-radius:15px; box-shadow:none; overflow:hidden; }
    .fmm-sov__card > header { margin:0; padding:14px 16px; border-bottom:1px solid #F3F4F6; }
    .fmm-sov__card > header h2 { font-size:14px; }
    .fmm-sov__card > header button { font-size:11px; }
    .fmm-sov__row { gap:11px; min-height:59px; padding:11px 15px; border-radius:0; }
    .fmm-sov__row + .fmm-sov__row { border-top:1px solid #F5F5F5; }
    .fmm-sov__row > i { width:32px; height:32px; border-radius:8px; color:#28231C; background:#FFF8E6; }
    .fmm-sov__row b { font-size:12px; }
    .fmm-sov__row em { font-size:10.5px; }
    .fmm-sov__row .fmm-btn { margin-left:auto; }
}

@media (max-width: 430px) {
    .fmm-sov__id { flex-wrap:wrap; }
    .fmm-sov__stats { flex:1 0 100%; padding-top:10px; border-top:1px solid #F1F2F4; }
}

@media (max-width: 700px) {
    .fmm-sov__stats { width: auto; margin-left: 0; justify-content: space-around; gap: 8px; }
    .fmm-sov__row { flex-wrap: nowrap; }
    .fmm-sov__row > span { flex: 1; order: initial; }
    .fmm-sov__row > i { order: initial; }
    .fmm-sov__row .fmm-chip,
    .fmm-sov__meta,
    .fmm-sov__row .fmm-btn { order: initial; margin-left: auto; }
    .fmm-sov__chev { order: initial; margin-left: 0; }
}

/* --- item screening ("Can FlymyMall Ship This?") -------------------------- */

.fmm-scrhero {
    position: relative;
    overflow: hidden;
    border-radius: var(--fmm-radius-lg);
    padding: 34px 32px 30px;
    margin-bottom: 26px;
    color: #fff;
    background: linear-gradient(120deg, #221D1B 0%, #332A24 55%, #4E3C1F 100%);
}

.fmm-scrhero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fmm-yellow);
    background: rgba(251, 191, 36, .14);
}

.fmm-scrhero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 16px 0 8px; }
.fmm-scrhero > p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .76); margin: 0; max-width: 56ch; }

.fmm-scrhero__search {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    max-width: 560px;
}

.fmm-scrhero__search input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    padding: 0 14px;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.fmm-scrhero__search input::placeholder { color: rgba(255, 255, 255, .5); }
.fmm-scrhero__search input:focus { outline: 0; border-color: var(--fmm-yellow); background: rgba(255, 255, 255, .12); }
.fmm-scrhero__search .fmm-btn { flex-shrink: 0; min-height: 46px; padding: 0 22px; }

.fmm-scrhero__eg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.fmm-scrhero__eg > span { font-size: 12px; color: rgba(255, 255, 255, .6); }

.fmm-scrhero__eg button {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
}

.fmm-scrhero__eg button:hover { border-color: var(--fmm-yellow); color: #fff; }

/* Tab strip. The active tab takes the colour of what it lists. */
.fmm-scrtabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--fmm-border);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.fmm-scrtabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    padding: 8px 16px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--fmm-muted);
}

.fmm-scrtabs button:hover { border-color: var(--fmm-faint); color: var(--fmm-text); }
.fmm-scrtabs button em { font-size: 11px; font-style: normal; font-weight: 800; opacity: .85; }

.fmm-scrtabs button.is-on { color: var(--fmm-text); }
.fmm-scrtabs button.is-prohibited { border-color: #FCA5A5; background: #FEF2F2; color: #B91C1C; }
.fmm-scrtabs button.is-restricted { border-color: #FDE9C8; background: var(--fmm-yellow-soft); color: #7C4A03; }
.fmm-scrtabs button.is-authentication { border-color: #BFDBFE; background: #EFF6FF; color: #1E3A8A; }

.fmm-scrnote {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: var(--fmm-radius);
    padding: 11px 14px;
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #7C4A03;
    background: var(--fmm-yellow-soft);
}

.fmm-scrnote svg { flex-shrink: 0; margin-top: 1px; }

/* The category cards. A left rule carries the verdict colour. */
.fmm-scrlist { display: grid; gap: 12px; }

.fmm-scrcard {
    border: 1px solid var(--fmm-border);
    border-left: 3px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    padding: 15px 17px;
    background: #fff;
    box-shadow: var(--fmm-shadow);
}

.fmm-scrcard.is-prohibited { border-left-color: #DC2626; }
.fmm-scrcard.is-restricted { border-left-color: var(--fmm-yellow); }
.fmm-scrcard.is-authentication { border-left-color: #3B82F6; }

.fmm-scrcard__head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.fmm-scrcard__head b { font-size: 14px; font-weight: 700; }

.fmm-scrcard__ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-scrcard.is-prohibited .fmm-scrcard__ico { color: #B91C1C; background: #FEF2F2; }
.fmm-scrcard.is-restricted .fmm-scrcard__ico { color: var(--fmm-yellow-dark); background: var(--fmm-yellow-soft); }
.fmm-scrcard.is-authentication .fmm-scrcard__ico { color: #1E3A8A; background: #EFF6FF; }

.fmm-scrcard p { font-size: 12.5px; line-height: 1.6; color: var(--fmm-muted); margin: 9px 0 0; }
.fmm-scrcard__cat { display: block; font-size: 11px; color: var(--fmm-faint); margin-top: 8px; }

.fmm-scrchip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-scrcard.is-prohibited .fmm-scrchip { color: #B91C1C; background: #FEF2F2; }
.fmm-scrcard.is-restricted .fmm-scrchip { color: #7C4A03; background: var(--fmm-yellow-soft); }
.fmm-scrcard.is-authentication .fmm-scrchip { color: #1E3A8A; background: #EFF6FF; }
.fmm-scrchip.is-green { color: #15803D; background: #ECFDF3; }
.fmm-scrchip.is-amber { color: #7C4A03; background: var(--fmm-yellow-soft); }
.fmm-scrchip.is-red { color: #B91C1C; background: #FEF2F2; }

/* The screening tool */
.fmm-scr__toolhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fmm-scr__toolhead b { display: block; font-size: 14px; font-weight: 800; }
.fmm-scr__toolhead em { display: block; font-size: 12px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; }

.fmm-scr__modes { display: flex; gap: 8px; margin-bottom: 16px; }

.fmm-scr__modes button {
    flex: 1;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 9px 12px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--fmm-muted);
}

.fmm-scr__modes button.is-on {
    border-color: var(--fmm-yellow);
    background: var(--fmm-yellow-soft);
    color: var(--fmm-yellow-dark);
}

.fmm-scr__hint { font-size: 12px; line-height: 1.55; color: var(--fmm-muted); margin: 8px 0 0; }

.fmm-scr__egs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.fmm-scr__egs > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fmm-muted); }

.fmm-scr__egs button {
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    padding: 4px 12px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--fmm-text);
}

.fmm-scr__egs button:hover { border-color: var(--fmm-yellow); background: var(--fmm-yellow-soft); }

.fmm-scr__caveat { font-size: 11.5px; line-height: 1.55; color: var(--fmm-faint); margin: 14px 0 0; }

/* Recent screenings */
.fmm-scrrecent { display: grid; gap: 2px; }

.fmm-scrrecent button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 10px;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.fmm-scrrecent button:hover { background: var(--fmm-bg-alt); }
.fmm-scrrecent i { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--fmm-border); }
.fmm-scrrecent i.is-green { background: var(--fmm-teal); }
.fmm-scrrecent i.is-amber { background: var(--fmm-yellow); }
.fmm-scrrecent i.is-red { background: #DC2626; }
.fmm-scrrecent span { flex: 1; min-width: 0; }
.fmm-scrrecent b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.fmm-scrrecent em { display: block; font-size: 11.5px; font-style: normal; color: var(--fmm-muted); margin-top: 1px; }

/* Dedicated item-screening flow, reached from the public compliance guide. */
.fmm-screen-item { padding-top: 20px; }
.fmm-screen-item__heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin: 10px 0 22px; }
.fmm-screen-item__heading h1 { margin:0; font-size:28px; line-height:1.2; font-weight:800; }
.fmm-screen-item__heading p { margin:5px 0 0; max-width:620px; color:var(--fmm-muted); font-size:13px; line-height:1.5; }
.fmm-screen-item__instant { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid #FDE68A; border-radius:9px; color:#F59E0B; background:#FFFBEB; font-size:11px; white-space:nowrap; }
.fmm-screen-item__instant img { display:block; flex:none; }
.fmm-screen-item__layout { display:grid; grid-template-columns:minmax(0, 1.8fr) minmax(270px, 1fr); gap:20px; align-items:start; }
.fmm-screen-item__layout main,.fmm-screen-item__aside { display:grid; gap:16px; min-width:0; }
.fmm-screen-item__form-card { padding:22px; }
.fmm-screen-item__tool-icon { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:8px; color:#D99800; background:#FFF4CC; }
.fmm-screen-item__tool-icon img { width:18px; height:18px; object-fit:contain; }
.fmm-screen-item__form-card .fmm-field { display:block; margin-top:18px; }
.fmm-screen-item__form-card .fmm-field > span { display:block; margin-bottom:7px; font-size:12px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--fmm-text); }
.fmm-screen-item__form-card .fmm-field input { height:46px; }
.fmm-screen-item__search-input { position:relative; display:block; }
.fmm-screen-item__search-input > img { position:absolute; z-index:1; left:12px; top:50%; display:block; transform:translateY(-50%); pointer-events:none; }
.fmm-screen-item__search-input input { padding-left:38px; }
.fmm-screen-item__hint { margin:8px 0 0; }
.fmm-screen-item__hint b { color:var(--fmm-yellow-dark); }
.fmm-screen-item__examples { margin-top:14px; }
.fmm-screen-item__examples > span { flex-basis:100%; }
.fmm-screen-item__examples button { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; }
.fmm-screen-item__example-icon { display:grid; place-items:center; flex:none; width:16px; height:16px; color:#F59E0B; }
.fmm-screen-item__example-icon svg,.fmm-screen-item__example-icon img { display:block; width:14px; height:14px; object-fit:contain; }
.fmm-screen-item__example-icon svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fmm-screen-item__actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:18px; }
.fmm-screen-item__actions .fmm-btn { min-height:44px; padding:10px 14px; justify-content:center; font-size:12px; }
.fmm-screen-item__actions .fmm-btn--primary { gap:8px; }
.fmm-screen-item__actions .fmm-btn--ghost { white-space:nowrap; }
.fmm-screen-item__actions .fmm-btn--ghost svg { flex:none; color:#E09F0C; }
.fmm-screen-item__submit-icon { width:14px; height:14px; object-fit:contain; filter:brightness(0); }
.fmm-screen-item__suggestions { position:absolute; z-index:20; width:min(100%, 520px); margin-top:-2px; border:1px solid var(--fmm-border); border-radius:10px; background:#fff; box-shadow:var(--fmm-shadow-lg); overflow:hidden; }
.fmm-screen-item__form-card form { position:relative; }
.fmm-screen-item__suggestions button { display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:0; border-bottom:1px solid var(--fmm-border); background:#fff; text-align:left; cursor:pointer; }
.fmm-screen-item__suggestions button:hover { background:var(--fmm-bg-alt); }
.fmm-screen-item__suggestions button span { min-width:0; }
.fmm-screen-item__suggestions b,.fmm-screen-item__suggestions small { display:block; }
.fmm-screen-item__suggestions b { font-size:12px; }
.fmm-screen-item__suggestions small { margin-top:2px; color:var(--fmm-muted); font-size:11px; }
.fmm-screen-item__notice { margin:12px 0 0; padding:10px 12px; border-radius:8px; background:#FFFBEB; color:#92400E; font-size:12px; }
.fmm-screen-item__notice a { color:#B45309; font-weight:700; }
.fmm-screen-item__catalogue-state { margin:0; color:var(--fmm-muted); font-size:11px; line-height:1.5; }
.fmm-screen-item__retry { margin-top:10px; padding:6px 10px; border:1px solid var(--fmm-border); border-radius:7px; background:#fff; color:var(--fmm-text); font:inherit; font-size:11px; cursor:pointer; }
.fmm-screen-item__category-skeleton { display:grid; gap:8px; }
.fmm-screen-item__category-skeleton i { display:block; height:28px; border-radius:7px; background:linear-gradient(90deg,#F3F4F6 25%,#E9EBEF 38%,#F3F4F6 62%); background-size:400% 100%; animation:fmm-screen-item-shimmer 1.2s ease infinite; }
@keyframes fmm-screen-item-shimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
.fmm-screen-item__recent { padding:18px 20px; }
.fmm-screen-item__card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; font-size:13px; }
.fmm-screen-item__card-head button { padding:0; border:0; background:none; color:var(--fmm-yellow-dark); font:inherit; font-size:11px; cursor:pointer; }
.fmm-screen-item__recent .fmm-scrrecent button { background:var(--fmm-bg-alt); margin-bottom:6px; }
.fmm-screen-item__recent .fmm-scrrecent .fmm-screen-item__recent-icon { display:grid; flex:0 0 36px; place-items:center; width:36px; height:36px; border-radius:8px; background:#DCFCE7; }
.fmm-screen-item__recent .fmm-scrrecent .fmm-screen-item__recent-icon.is-amber { background:#FEF3C7; }
.fmm-screen-item__recent .fmm-scrrecent .fmm-screen-item__recent-icon.is-red { background:#FEE2E2; }
.fmm-screen-item__recent-icon img { width:14px; height:14px; object-fit:contain; }
.fmm-screen-item__local-note { display:block; margin:7px 0 0 10px; color:var(--fmm-faint); font-size:10px; }
.fmm-screen-item__aside > .fmm-scard:first-child { padding:22px 24px; }
.fmm-screen-item__how-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.fmm-screen-item__section-title { display:block; margin:0; font-size:13px; font-weight:800; }
.fmm-screen-item__fast-check { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; color:#15803D; background:#DCFCE7; font-size:10px; font-weight:700; white-space:nowrap; }
.fmm-screen-item__fast-check i { display:block; flex:none; width:11px; height:14px; background-color:#15803D; -webkit-mask:url('../../images/marketplace/screening-icons/instant.svg') center/contain no-repeat; mask:url('../../images/marketplace/screening-icons/instant.svg') center/contain no-repeat; }
.fmm-screen-item__steps { list-style:none; display:grid; gap:18px; margin:0; padding:0; counter-reset:screen-steps; }
.fmm-screen-item__steps li { position:relative; min-height:34px; padding-left:40px; counter-increment:screen-steps; }
.fmm-screen-item__steps li::before { content:counter(screen-steps); position:absolute; left:0; top:0; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#6B4B00; background:#FFF3C4; font-size:11px; font-weight:800; }
.fmm-screen-item__steps li:not(:last-child)::after { content:""; position:absolute; left:14px; top:32px; height:16px; border-left:1px solid #E5E7EB; }
.fmm-screen-item__steps b,.fmm-screen-item__steps span { display:block; }
.fmm-screen-item__steps b { margin-bottom:3px; font-size:11.5px; }
.fmm-screen-item__steps span { color:var(--fmm-muted); font-size:10.5px; line-height:1.5; }
.fmm-screen-item__warning { display:grid; grid-template-columns:14px minmax(0,1fr); align-items:start; gap:7px; margin:15px 0 0; padding:12px; border:1px solid #FDE68A; border-radius:9px; color:#A64B00; background:#FFFBEB; font-size:10.5px; line-height:1.55; }
.fmm-screen-item__warning img { display:block; margin-top:1px; }
.fmm-screen-item__category-list { display:grid; }
.fmm-screen-item__categories { padding:18px 20px; }
.fmm-screen-item__categories .fmm-screen-item__card-head { margin-bottom:12px; }
.fmm-screen-item__category-list > div { display:flex; align-items:center; gap:9px; min-height:50px; padding:6px 0; border-bottom:1px solid #F3F4F6; font-size:11px; }
.fmm-screen-item__category-mark { display:grid; flex:none; place-items:center; width:24px; height:24px; border-radius:7px; color:#15803D; background:#DCFCE7; }
.fmm-screen-item__category-mark.is-restricted { color:#B45309; background:#FEF3C7; }
.fmm-screen-item__category-mark.is-prohibited { color:#DC2626; background:#FEE2E2; }
.fmm-screen-item__category-mark img { width:12px; height:12px; object-fit:contain; }
.fmm-screen-item__category-name { min-width:0; color:var(--fmm-text); font-size:11px; font-weight:500; }
.fmm-screen-item__category-list u { margin-left:auto; border-radius:999px; padding:3px 7px; color:#15803D; background:#ECFDF3; font-size:9px; text-decoration:none; white-space:nowrap; }
.fmm-screen-item__category-list u.is-restricted { color:#B45309; background:#FFF7E6; }
.fmm-screen-item__category-list u.is-prohibited { color:#DC2626; background:#FEF2F2; }
.fmm-screen-item__full-list { box-sizing:border-box; display:flex; width:100%; align-items:center; justify-content:center; gap:8px; margin-top:12px; padding:10px; border:2px dashed #E5E7EB; border-radius:12px; color:var(--fmm-muted); font-size:10px; line-height:20px; text-decoration:none; }
.fmm-screen-item__full-list img { display:block; width:14px; height:12px; flex:none; object-fit:contain; }
.fmm-screen-item__help { padding:18px; border-radius:12px; color:#231F20; background:linear-gradient(125deg,#FFD85A,#FFCE42); }
.fmm-screen-item__help-icon { float:left; display:grid; place-items:center; width:30px; height:30px; margin:0 9px 6px 0; border-radius:8px; background:rgba(255,255,255,.45); }
.fmm-screen-item__help-icon img { display:block; width:16px; height:16px; object-fit:contain; filter:brightness(0) invert(1); }
.fmm-screen-item__help b,.fmm-screen-item__help small { display:block; }
.fmm-screen-item__help b { font-size:12px; }
.fmm-screen-item__help small { margin-top:2px; color:#765B17; font-size:10px; }
.fmm-screen-item__help p { clear:both; margin:12px 0; color:#765B17; font-size:11px; line-height:1.5; }
.fmm-screen-item__help a { display:flex; align-items:center; justify-content:center; min-height:36px; border-radius:8px; color:#fff; background:#231F20; font-size:10px; font-weight:700; text-decoration:none; }
@media (max-width: 760px) {
    .fmm-screen-item__layout { grid-template-columns:minmax(0,1fr); }
    .fmm-screen-item__heading { align-items:flex-start; }
    .fmm-screen-item__heading h1 { font-size:24px; }
}
@media (max-width: 520px) {
    .fmm-screen-item__heading { flex-direction:column; gap:10px; }
    .fmm-screen-item__form-card { padding:16px; }
    .fmm-screen-item__actions { grid-template-columns:minmax(0,1fr); }
    .fmm-screen-item__actions .fmm-btn--ghost { white-space:normal; }
}

/* Sidebar: how it works, and the derived category summary */
.fmm-scrsteps { list-style: none; margin: 0; padding: 0; counter-reset: scr; display: grid; gap: 14px; }

.fmm-scrsteps li { position: relative; padding-left: 32px; counter-increment: scr; }

.fmm-scrsteps li::before {
    content: counter(scr);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: var(--fmm-yellow-dark);
    background: var(--fmm-yellow-soft);
}

.fmm-scrsteps b { display: block; font-size: 13px; font-weight: 700; }
.fmm-scrsteps span { display: block; font-size: 12px; line-height: 1.55; color: var(--fmm-muted); margin-top: 2px; }

.fmm-scrcats { display: grid; gap: 2px; }

.fmm-scrcats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
}

.fmm-scrcats > div:nth-child(odd) { background: var(--fmm-bg-alt); }
.fmm-scrcats u { font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.fmm-scrcats u.is-prohibited { color: #B91C1C; }
.fmm-scrcats u.is-restricted { color: #7C4A03; }

/* While a check runs */
.fmm-scrwait { box-sizing:border-box; width:min(100%, 608px); max-width:608px; padding:32px 36px 28px; text-align:center; }

.fmm-scrwait__spin {
    position:relative; display:grid; place-items:center; width:100px; height:100px; margin:0 auto 18px;
    border:1px solid #FDE7A6; border-radius:50%;
    background:radial-gradient(circle, #FFCB38 0 34%, #FFF8E6 35% 51%, transparent 52%);
    animation:fmm-scr-pulse 1.8s ease-in-out infinite;
}
.fmm-scrwait__spin::before,.fmm-scrwait__spin::after { content:""; position:absolute; inset:7px; border:1px dashed #F8C84A; border-radius:50%; }
.fmm-scrwait__spin::after { inset:-7px; border-style:solid; border-color:#FDECC0; }
.fmm-scrwait__spin i { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; font-size:18px; font-style:normal; font-weight:700; }

@keyframes fmm-scr-pulse { 50% { transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .fmm-scrwait__spin { animation:none; } }

.fmm-scrwait h2 { font-size:20px; font-weight:800; margin:0 0 8px; }
.fmm-scrwait > p { font-size:12px; line-height:1.55; color:var(--fmm-muted); margin:0 auto; max-width:50ch; }

.fmm-scrwait__item {
    display:flex; align-items:center; gap:12px; max-width:340px; margin:18px auto 0;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    padding: 12px 14px;
    margin-top: 18px;
    background: var(--fmm-bg-alt);
    text-align: left;
}

.fmm-scrwait__item em { display: block; font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fmm-muted); }
.fmm-scrwait__item b { display: block; font-size: 13.5px; font-weight: 700; margin-top: 3px; overflow-wrap: anywhere; }
.fmm-scrwait__item-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; background:#FFF2C2; color:#F59E0B; font-size:22px; }
.fmm-scrwait__item-copy { min-width:0; }
.fmm-scrwait__item-copy small { display:block; color:#A16207; font-size:9px; font-weight:800; letter-spacing:.08em; }
.fmm-scrwait__item-copy small i { display:inline-block; width:3px; height:3px; margin-left:3px; border-radius:50%; vertical-align:middle; background:#FBBF24; animation:fmm-scr-dot 1s infinite alternate; }
.fmm-scrwait__item-copy small i:nth-child(2) { animation-delay:.2s; }.fmm-scrwait__item-copy small i:nth-child(3) { animation-delay:.4s; }
.fmm-scrwait__item-copy b { font-size:12px; }.fmm-scrwait__item-copy em { margin-top:2px; font-size:9px; font-weight:400; letter-spacing:0; text-transform:none; }
@keyframes fmm-scr-dot { to { opacity:.25; } }

.fmm-scrwait__steps { list-style:none; max-width:360px; margin:18px auto 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; }
.fmm-scrwait__steps li { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--fmm-faint); font-size:9px; line-height:1.25; }
.fmm-scrwait__steps li:not(:last-child)::after { content:""; position:absolute; top:10px; left:calc(50% + 18px); width:calc(100% - 36px); height:2px; background:#E5E7EB; }
.fmm-scrwait__steps i { z-index:1; display:grid; place-items:center; flex:none; width:20px; height:20px; border:1px solid #E5E7EB; border-radius:50%; background:#F9FAFB; }
.fmm-scrwait__steps li.is-now { color:#D99A00; font-weight:700; }.fmm-scrwait__steps li.is-now i { border-color:#FBBF24; background:#FBBF24; box-shadow:0 0 0 4px #FFF4CC; }
.fmm-scrwait__steps li.is-done { color:#374151; }.fmm-scrwait__steps li.is-done i { border-color:#FBBF24; background:#FBBF24; }
.fmm-scrwait__steps li.is-done i::after { content:"✓"; color:#fff; font-size:12px; }
.fmm-scrwait__progress { max-width:360px; margin:14px auto 0; text-align:left; }
.fmm-scrwait__progress > span { display:flex; justify-content:space-between; margin-bottom:5px; color:#6B7280; font-size:9px; }
.fmm-scrwait__progress > span b { color:#D99A00; }
.fmm-scrwait__progress > i { display:block; height:5px; overflow:hidden; border-radius:99px; background:#E5E7EB; }
.fmm-scrwait__progress > i b { display:block; height:100%; border-radius:inherit; background:#FBBF24; transition:width .35s ease; }
.fmm-scrwait > .fmm-scrwait__note { margin:12px auto 0; color:#9CA3AF; font-size:10px; }
@media (max-width:520px) { .fmm-scrwait { padding:24px 18px; }.fmm-scrwait__spin { width:82px; height:82px; }.fmm-scrwait__steps { gap:4px; }.fmm-scrwait__steps li { font-size:8px; } }

/* The verdict */
.fmm-scrres { max-width: 470px; text-align: center; position: relative; }

.fmm-scrres__mark {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
}

.fmm-scrres.is-green .fmm-scrres__mark { color: #15803D; background: #ECFDF3; }
.fmm-scrres.is-amber .fmm-scrres__mark { color: var(--fmm-yellow-dark); background: var(--fmm-yellow-soft); }
.fmm-scrres.is-red .fmm-scrres__mark { color: #B91C1C; background: #FEF2F2; }

.fmm-scrres h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 14px 0 8px; }
.fmm-scrres > p { font-size: 13px; line-height: 1.6; color: var(--fmm-muted); margin: 0 auto; max-width: 44ch; }

.fmm-scrres__item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius);
    padding: 13px 15px;
    margin-top: 18px;
    background: var(--fmm-bg-alt);
    text-align: left;
}

.fmm-scrres__item b { display: block; font-size: 13.5px; font-weight: 700; margin-top: 5px; overflow-wrap: anywhere; }
.fmm-scrres__item em { display: block; font-size: 11.5px; font-style: normal; color: var(--fmm-muted); margin-top: 2px; }

.fmm-scrres__why { margin-top: 18px; text-align: left; }
.fmm-scrres__why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.fmm-scrres__why li {
    position: relative;
    padding-left: 20px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fmm-text);
}

.fmm-scrres__why li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fmm-yellow);
}

.fmm-scrres__why p { font-size: 12.5px; line-height: 1.6; color: var(--fmm-muted); margin: 10px 0 0; }

.fmm-scrres__air {
    border: 1px solid #DBEAFE;
    border-radius: var(--fmm-radius);
    padding: 11px 14px;
    margin: 14px 0 0;
    background: #EFF6FF;
    text-align: left;
    font-size: 12px;
    line-height: 1.55;
    color: #1E3A8A;
}

.fmm-scrres__air b { display: block; font-weight: 800; margin-bottom: 2px; }

.fmm-scrres__acts { display: grid; gap: 10px; margin-top: 20px; }
.fmm-scrres__acts .fmm-btn { justify-content: center; }

/* Item-screening result: one scoped definition for the exported modal design. */
.fmm-modal__box.fmm-scrres--screen {
    --scr-accent:#F59E0B; --scr-border:#FDE68A; --scr-panel:#FFFBEB;
    position:relative; box-sizing:border-box; width:100%; max-width:560px;
    max-height:calc(100dvh - 48px); overflow-y:auto; padding:38px 32px 32px;
    border-radius:24px; background:#fff; color:#242424; text-align:left;
    box-shadow:0 24px 64px rgba(0,0,0,.24);
}
.fmm-scrres--screen:not(.is-green)::before {
    content:""; position:absolute; top:0; left:0; right:0; height:6px;
    background:linear-gradient(90deg,#FFBE2E,#F59E0B);
}
.fmm-scrres--screen .fmm-modal__x {
    position:absolute; top:20px; right:20px; display:grid; place-items:center;
    width:36px; height:36px; padding:0; border:0; border-radius:12px;
    background:#F3F4F6; color:#242424; font-size:25px; line-height:1; cursor:pointer;
}
.fmm-scrres--screen .fmm-modal__x:focus-visible { outline:2px solid var(--scr-accent); outline-offset:3px; }
.fmm-scrres--screen .fmm-scrres__header {
    display:flex; align-items:flex-start; gap:20px; margin:0 0 24px; padding:0;
}
.fmm-scrres--screen .fmm-scrres__header .fmm-scrres__mark {
    display:grid; place-items:center; flex:none; width:64px; height:64px; margin:0;
    box-sizing:border-box; border:2px solid var(--scr-border); border-radius:16px;
    color:var(--scr-accent); background:#FEF3C7;
}
.fmm-scrres--screen .fmm-scrres__mark img { display:block; width:30px; height:27px; object-fit:contain; }
.fmm-scrres--screen .fmm-scrres__heading-icon { display:block; flex:none; width:64px; height:64px; }
.fmm-scrres--screen .fmm-scrres__header-copy { min-width:0; flex:1; padding-top:6px; }
.fmm-scrres--screen h2 { margin:0 32px 6px 0; font-size:24px; line-height:1.25; letter-spacing:0; font-weight:700; }
.fmm-scrres--screen .fmm-scrres__lead { margin:0; max-width:none; color:#6B7280; font-size:14px; line-height:1.6; }
.fmm-scrres--screen .fmm-scrres__header.is-approved { flex-direction:column; align-items:center; text-align:center; gap:12px; }
.fmm-scrres--screen .is-approved h2 { margin-right:0; }
.fmm-scrres--screen .fmm-scrres__success-icon { display:block; width:112px; height:112px; object-fit:contain; margin:0; }
.fmm-scrres--screen .fmm-scrres__restricted-panel { padding:24px 20px 20px; border:1px solid var(--scr-border); border-radius:16px; background:var(--scr-panel); }
.fmm-scrres--screen .fmm-scrres__summary { display:flex; align-items:center; gap:12px; min-width:0; margin:0; }
.fmm-scrres--screen .fmm-scrres__item-icon {
    position:relative; display:grid; place-items:center; box-sizing:border-box; flex:none;
    width:44px; height:44px; border:1px solid var(--scr-border); border-radius:12px;
    color:var(--scr-accent); background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.fmm-scrres--screen .fmm-scrres__item-icon svg { position:absolute; inset:0; margin:auto; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fmm-scrres--screen .fmm-scrres__summary-copy { display:block; flex:1; min-width:0; }
.fmm-scrres--screen .fmm-scrres__summary-copy b { display:block; margin:0; font-size:16px; line-height:1.35; font-weight:700; overflow-wrap:anywhere; }
.fmm-scrres--screen .fmm-scrres__summary-copy em { display:flex; align-items:center; gap:5px; margin-top:3px; color:#6B7280; font-size:12px; line-height:1.4; font-style:normal; }
.fmm-scrres--screen .fmm-scrres__summary-copy em svg { flex:none; width:12px; height:12px; fill:currentColor; }
.fmm-scrres--screen .fmm-scrchip { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; padding:6px 12px; border-radius:999px; background:var(--scr-accent); color:#fff; font-size:12px; line-height:1.3; font-weight:700; text-decoration:none; white-space:nowrap; }
.fmm-scrres--screen .fmm-scrchip svg { width:12px; height:12px; flex:none; }
.fmm-scrres--screen .fmm-scrchip img { display:block; width:12px; height:12px; flex:none; }
.fmm-scrres--screen .fmm-scrres__summary > .fmm-scrchip--action { box-sizing:border-box; min-width:152.44px; min-height:28px; padding:6px 12px; gap:6px; border-radius:9999px; background:#F59E0B; font-size:10px; line-height:16px; }
.fmm-scrres--screen .is-approved .fmm-scrchip { margin-bottom:4px; padding:4px 8px; background:#ECFDF3; color:#15803D; font-size:10px; }
.fmm-scrres--screen .fmm-scrres__why { margin-top:18px; padding-top:16px; border-top:1px solid var(--scr-border); }
.fmm-scrres--screen .fmm-scrres__why > b { display:block; margin-bottom:14px; font-size:12px; line-height:1.4; font-weight:700; color:#B45309; letter-spacing:.03em; }
.fmm-scrres--screen .fmm-scrres__why ul { display:grid; gap:14px; padding:0; margin:0; list-style:none; }
.fmm-scrres--screen .fmm-scrres__why li { display:flex; align-items:flex-start; gap:12px; padding:0; margin:0; font-size:14px; line-height:1.4; }
.fmm-scrres--screen .fmm-scrres__why li::before { display:none; }
.fmm-scrres--screen .fmm-scrres__why li i { position:relative; display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:8px; color:#D97706; background:#FEF3C7; font-style:normal; }
.fmm-scrres--screen .fmm-scrres__why li i img,.fmm-scrres--screen .fmm-scrres__why li i svg { position:absolute; inset:0; margin:auto; width:14px; height:14px; object-fit:contain; }
.fmm-scrres--screen .fmm-scrres__fee-icon { filter:brightness(0) saturate(100%) invert(48%) sepia(92%) saturate(2178%) hue-rotate(9deg) brightness(97%) contrast(95%); }
.fmm-scrres--screen .fmm-scrres__reason-copy { min-width:0; }
.fmm-scrres--screen .fmm-scrres__reason-copy strong { display:block; color:#242424; font-size:14px; line-height:1.4; font-weight:600; }
.fmm-scrres--screen .fmm-scrres__reason-copy small { display:block; margin-top:2px; color:#6B7280; font-size:13px; line-height:1.4; }
.fmm-scrres--screen .fmm-scrres__notice {
    display:flex; align-items:flex-start; gap:12px; width:auto; max-width:none;
    margin:20px 0 0; padding:14px 16px; border:1px solid var(--scr-border);
    border-radius:12px; background:#FFF4CC; color:#92400E; text-align:left; font-size:13px; line-height:1.6;
}
.fmm-scrres--screen .fmm-scrres__notice > svg { flex:none; width:14px; height:14px; margin-top:3px; color:#FBBF24; }
.fmm-scrres--screen .fmm-scrres__notice > span:first-child { flex:none; }
.fmm-scrres--screen .fmm-scrres__notice--approved > span:first-child { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#FBBF24; color:#fff; font-size:11px; font-weight:700; }
.fmm-scrres--screen .fmm-scrres__notice p { margin:0; font:inherit; color:inherit; }
.fmm-scrres--screen .fmm-scrres__notice > span:last-child { min-width:0; }
.fmm-scrres--screen .fmm-scrres__acts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
.fmm-scrres--screen .fmm-scrres__acts .fmm-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:50px; padding:12px 10px; border-radius:12px; font-size:14px; line-height:1.4; font-weight:600; white-space:normal; }
.fmm-scrres--screen .fmm-scrres__acts .fmm-btn--primary { color:#242424; background:#FBBF24; box-shadow:0 2px 3px rgba(0,0,0,.05); }
.fmm-scrres--screen .fmm-scrres__acts .fmm-btn--ghost { border:1px solid #E5E7EB; background:#fff; color:#242424; box-shadow:none; }
.fmm-scrres--screen .fmm-scrres__action-icon { width:16px; height:16px; flex:none; object-fit:contain; }
.fmm-scrres--screen .fmm-scrres__action-icon--lock { filter:brightness(0); }
.fmm-scrres--screen .fmm-scrres__action-icon--refresh { color:#6B7280; }
.fmm-scrres--screen.is-green .fmm-scrres__acts { grid-template-columns:minmax(0,1fr); }
.fmm-scrres--screen .fmm-scrres__approved-panel { padding:16px; border-top:1px solid #F3F4F6; background:#FFFEFC; }
.fmm-scrres--screen .fmm-scrres__package-link { justify-self:center; color:#D99000; font-size:12px; text-decoration:underline; }
.fmm-scrres--screen .fmm-scrres__air { width:auto; max-width:none; margin:16px 0 0; padding:12px; font-size:12px; }
@media (max-width:540px) {
    .fmm-modal__box.fmm-scrres--screen { padding:32px 20px 20px; border-radius:20px; }
    .fmm-scrres--screen .fmm-modal__x { top:12px; right:12px; width:28px; height:28px; border-radius:9px; font-size:21px; }
    .fmm-scrres--screen .fmm-scrres__header { gap:12px; margin-bottom:20px; }
    .fmm-scrres--screen .fmm-scrres__header .fmm-scrres__mark { width:48px; height:48px; border-radius:12px; }
    .fmm-scrres--screen .fmm-scrres__mark img { width:24px; height:auto; }
    .fmm-scrres--screen .fmm-scrres__header-copy { padding:0; }
    .fmm-scrres--screen h2 { font-size:20px; }
    .fmm-scrres--screen .fmm-scrres__lead { font-size:12px; line-height:1.5; }
    .fmm-scrres--screen .fmm-scrres__restricted-panel { padding:16px; }
    .fmm-scrres--screen .fmm-scrres__summary { flex-wrap:wrap; gap:10px; }
    .fmm-scrres--screen .fmm-scrres__summary-copy { flex-basis:calc(100% - 54px); }
    .fmm-scrres--screen .fmm-scrres__summary-copy b { font-size:14px; }
    .fmm-scrres--screen .fmm-scrres__summary > .fmm-scrchip { margin-left:54px; font-size:10px; padding:5px 9px; }
    .fmm-scrres--screen .fmm-scrres__reason-copy strong { font-size:13px; }
    .fmm-scrres--screen .fmm-scrres__reason-copy small { font-size:12px; }
    .fmm-scrres--screen .fmm-scrres__notice { padding:12px; font-size:12px; }
    .fmm-scrres--screen .fmm-scrres__acts { gap:8px; margin-top:20px; }
    .fmm-scrres--screen .fmm-scrres__acts .fmm-btn { min-height:46px; font-size:12px; padding:10px 6px; }
}

/* Shipping compliance page: category-first layout from the supplied design. */
.fmm-scr-page .fmm-crumbs { display:none; }
.fmm-scr-page .fmm-scrhero {
    min-height:230px;
    overflow:visible;
    padding:30px 210px 24px 32px;
    margin:0 0 22px;
    border-radius:10px;
    background:
        radial-gradient(circle at 92% 4%, rgba(255,190,46,.12) 0 92px, transparent 93px),
        radial-gradient(circle at 43% 108%, rgba(255,190,46,.07) 0 100px, transparent 101px),
        linear-gradient(115deg,#211F20 0%,#28272C 68%,#29272B 100%);
}
.fmm-scr-page .fmm-scrhero__eyebrow { padding:0; background:none; font-size:10px; letter-spacing:.02em; }
.fmm-scr-page .fmm-scrhero__eyebrow img { padding:4px; box-sizing:content-box; border-radius:6px; background:rgba(251,191,36,.16); }
.fmm-scr-page .fmm-scrhero h1 { margin:10px 0 5px; font-size:28px; line-height:1.15; }
.fmm-scr-page .fmm-scrhero > p { max-width:560px; font-size:13px; line-height:1.45; }
.fmm-scrhero__search-wrap { position:relative; z-index:4; max-width:720px; margin-top:18px; }
.fmm-scr-page .fmm-scrhero__search { gap:0; max-width:none; margin-top:0; border:1px solid #E5E7EB; border-radius:9px; overflow:hidden; background:#fff; }
.fmm-scr-page .fmm-scrhero__search input { height:42px; padding:0 14px; border:0; border-radius:0; color:#27272A; background:#fff; font-size:12px; }
.fmm-scr-page .fmm-scrhero__search input::placeholder { color:#9CA3AF; }
.fmm-scr-page .fmm-scrhero__search input:focus { border:0; background:#fff; box-shadow:inset 0 0 0 1px #FBBF24; }
.fmm-scr-page .fmm-scrhero__search .fmm-btn { min-height:42px; border-radius:0; padding:0 20px; font-size:12px; }
.fmm-scrhero__suggestions { position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:100%; padding:5px; border:1px solid #E8EAF0; border-radius:10px; background:#fff; box-shadow:0 12px 32px rgba(15,23,42,.18); }
.fmm-scrhero__suggestions > button { display:flex; align-items:center; gap:10px; width:100%; padding:9px; border:0; border-radius:7px; text-align:left; background:#fff; }
.fmm-scrhero__suggestions > button:hover,.fmm-scrhero__suggestions > button.is-highlighted { background:#FFF9E9; }
.fmm-scrhero__suggestion-icon { display:grid; flex:none; place-items:center; width:28px; height:28px; border-radius:8px; color:#D43838; background:#FEECEC; }
.fmm-scrhero__suggestion-icon.is-restricted { color:#B77900; background:#FFF2D2; }
.fmm-scrhero__suggestion-icon i { font-size:15px; font-style:normal; }
.fmm-scrhero__suggestion-copy { flex:1; min-width:0; }
.fmm-scrhero__suggestion-copy b,.fmm-scrhero__suggestion-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fmm-scrhero__suggestion-copy b { color:#303039; font-size:12px; }
.fmm-scrhero__suggestion-copy small { margin-top:2px; color:#778092; font-size:10px; }
.fmm-scrhero__suggestions .fmm-scrchip { flex:none; padding:3px 7px; font-size:9px; }
.fmm-scr-page .fmm-scrhero__eg { gap:5px; margin-top:8px; }
.fmm-scr-page .fmm-scrhero__eg > span { font-size:9px; }
.fmm-scr-page .fmm-scrhero__eg button { padding:3px 8px; border-color:transparent; font-size:9px; }
.fmm-scrhero__trust { position:absolute; top:16px; right:17px; display:grid; gap:6px; }
.fmm-scrhero__trust span { display:flex; align-items:center; gap:8px; width:145px; min-height:34px; padding:0 12px; border-radius:99px; color:#C9C6C3; background:rgba(255,255,255,.075); font-size:12px; white-space:nowrap; }
.fmm-scrhero__trust i { display:grid; flex:none; place-items:center; color:#FBBF24; font-style:normal; }
.fmm-scrhero__trust i.is-secure { color:#34B46D; }
.fmm-scrhero__trust i.is-auth { width:12px; height:12px; background:#FFBE2E; -webkit-mask:url('../../images/marketplace/screening-icons/authentication.svg') center / contain no-repeat; mask:url('../../images/marketplace/screening-icons/authentication.svg') center / contain no-repeat; }
.fmm-scrhero__trust i.is-auth img { opacity:0; }
.fmm-scr-authnote { max-width:840px; margin:-10px 0 14px; font-size:12px; }
.fmm-scr-authnote a { color:#B77900; font-weight:700; text-decoration:underline; }
.fmm-scr-error { max-width:840px; margin:-8px 0 14px; }

.fmm-scr-page .fmm-scrtabs { display:flex; max-width:840px; gap:0; padding:0; margin:0; border:1px solid #E9EBEF; border-bottom:0; border-radius:10px 10px 0 0; overflow:hidden; }
.fmm-scr-page .fmm-scrtabs button { position:relative; display:flex; flex:1; justify-content:center; gap:6px; min-height:40px; padding:8px 10px; border:0; border-radius:0; background:#fff; font-size:11px; font-weight:500; }
.fmm-scr-page .fmm-scrtabs button.is-on { color:#303039; }
.fmm-scr-page .fmm-scrtabs button.is-on::after { position:absolute; right:0; bottom:0; left:0; height:2px; background:#FBBF24; content:""; }
.fmm-scrtabs__icon { display:grid; place-items:center; color:#737987; font-style:normal; }
.fmm-scrtabs__icon.is-prohibited { color:#737987; }
.fmm-scrtabs button.is-on.is-prohibited .fmm-scrtabs__icon { color:#E44A4A; }
.fmm-scrtabs button.is-on.is-restricted .fmm-scrtabs__icon { color:#F59E0B; }
.fmm-scrtabs button.is-on.is-authentication .fmm-scrtabs__icon { color:#6B7280; }
.fmm-scr-page .fmm-scrtabs button em { padding:2px 5px; border-radius:99px; color:#D23D3D; background:#FEE8E8; font-size:9px; }
.fmm-scr-page .fmm-scrtabs button.is-restricted em { color:#9A6500; background:#FFF0C7; }
.fmm-scr-page .fmm-scrtabs button.is-authentication em { color:#8A751E; background:#FFF5C9; }
.fmm-scr-page .fmm-scrnote { max-width:840px; min-height:31px; gap:6px; padding:8px 12px; margin:0 0 12px; border:1px solid #F2EBD9; border-radius:0 0 9px 9px; color:#77736A; background:#FFFCF5; font-size:10px; line-height:1.35; }
.fmm-scr-page .fmm-scrnote svg { width:11px; height:11px; color:#E6A300; }
.fmm-scr-skeleton { max-width:840px; }
.fmm-scr-skeleton__tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:8px 12px; border:1px solid #E9EBEF; border-radius:10px 10px 0 0; }
.fmm-scr-skeleton__tabs i { display:block; width:72%; height:14px; margin:auto; border-radius:5px; }
.fmm-scr-skeleton__note { height:31px; margin-bottom:12px; border-radius:0 0 9px 9px; }
.fmm-scr-skeleton__cards { display:grid; gap:9px; }
.fmm-scr-skeleton__card { display:flex; align-items:flex-start; gap:10px; min-height:82px; padding:11px 13px; border:1px solid #ECEEF2; border-left:3px solid #ECEEF2; border-radius:10px; }
.fmm-scr-skeleton__card > i { width:32px; height:32px; flex:none; border-radius:9px; }
.fmm-scr-skeleton__card > span { flex:1; display:grid; gap:7px; padding-top:2px; }
.fmm-scr-skeleton__card b { width:38%; height:11px; border-radius:5px; }
.fmm-scr-skeleton__card em { width:82%; height:9px; border-radius:5px; }
.fmm-scr-skeleton__card small { width:30%; height:7px; border-radius:5px; }
.fmm-scr-skeleton__popular { margin:26px 0 16px; }
.fmm-scr-skeleton__popular > span { display:grid; gap:6px; margin-bottom:10px; }
.fmm-scr-skeleton__popular > span b { width:160px; height:14px; border-radius:5px; }
.fmm-scr-skeleton__popular > span em { width:200px; height:9px; border-radius:5px; }
.fmm-scr-skeleton__popular > div { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.fmm-scr-skeleton__popular i { height:102px; border:1px solid #ECEEF2; border-radius:11px; }
.fmm-scr-page .fmm-scrlist { max-width:840px; gap:9px; }
.fmm-scr-page .fmm-scrcard--guide { display:grid; grid-template-columns:34px minmax(0,1fr) 12px; align-items:start; gap:10px; min-height:82px; padding:11px 13px; border:1px solid #ECEEF2; border-left:3px solid #ECEEF2; border-radius:10px; box-shadow:none; }
.fmm-scr-page .fmm-scrcard--guide.is-prohibited { border-left-color:#FF4B55; }
.fmm-scr-page .fmm-scrcard--guide.is-restricted { border-left-color:#F59E0B; }
.fmm-scr-page .fmm-scrcard--guide.is-authentication { border-left-color:#7C6FE8; }
.fmm-scr-page .fmm-scrcard--guide .fmm-scrcard__ico { width:32px; height:32px; border-radius:9px; }
.fmm-scr-page .fmm-scrcard--guide.is-prohibited .fmm-scrcard__ico { color:#F04452; background:#FFF0F0; }
.fmm-scr-page .fmm-scrcard--guide.is-restricted .fmm-scrcard__ico { color:#F59E0B; background:#FFF9E9; }
.fmm-scr-page .fmm-scrcard--guide.is-authentication .fmm-scrcard__ico { color:#6B5DD3; background:#F2F0FF; }
.fmm-scrcard__body { min-width:0; }
.fmm-scr-page .fmm-scrcard__head { gap:7px; }
.fmm-scr-page .fmm-scrcard__head b { font-size:12px; font-weight:700; }
.fmm-scr-page .fmm-scrcard--guide p { margin:3px 0 0; font-size:10px; line-height:1.45; }
.fmm-scrcard__meta { margin-top:6px; color:#737987; font-size:9px; }
.fmm-scrcard__meta::before { content:"•"; margin-right:5px; }
.fmm-scrcard__chev { padding-top:1px; color:#667085; font-size:20px; line-height:16px; }
.fmm-scr-page .fmm-scrcard--guide .fmm-scrchip { padding:2px 6px; font-size:8px; }
.fmm-scr-more { justify-self:center; min-height:34px; margin:2px 0 0; padding:0 15px; border:1px solid #E5E7EB; border-radius:8px; color:#555C68; background:#fff; font-size:10px; }
.fmm-scr-more:hover { border-color:#FBBF24; background:#FFFCF5; }
.fmm-scrpopular { margin:26px 0 16px; }
.fmm-scrpopular__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.fmm-scrpopular__head b,.fmm-scrpopular__head small { display:block; }
.fmm-scrpopular__head b { font-size:15px; }
.fmm-scrpopular__head small { margin-top:2px; color:#737987; font-size:10px; }
.fmm-scrpopular__head button { border:0; color:#E09F0C; background:none; font-size:10px; }
.fmm-scrpopular__grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.fmm-scrpopular__item { display:flex; min-height:102px; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid #ECEEF2; border-radius:11px; background:#fff; }
.fmm-scrpopular__item:hover { border-color:#FBBF24; }
.fmm-scrpopular__item i { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#302B29; background:#FFF8E6; font-style:normal; }
.fmm-scrpopular__item b { max-width:100%; overflow:hidden; color:#303039; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.fmm-scrpopular__item u { padding:2px 6px; border-radius:99px; text-decoration:none; font-size:8px; }
.fmm-scrpopular__item u.is-prohibited { color:#B91C1C; background:#FEE8E8; }
.fmm-scrpopular__item u.is-restricted { color:#9A6500; background:#FFF0C7; }
.fmm-scrpopular__item u.is-authentication { color:#5B50B7; background:#EFEDFF; }
.fmm-scr-cta { display:flex; align-items:center; gap:14px; min-height:92px; padding:16px 22px; border:1px solid #ECEEF2; border-radius:12px; }
.fmm-scr-cta > i { display:grid; flex:none; place-items:center; width:42px; height:42px; border-radius:11px; color:#E09F0C; background:#FFF8E6; font-style:normal; }
.fmm-scr-cta > span { flex:1; min-width:0; }
.fmm-scr-cta b,.fmm-scr-cta small { display:block; }
.fmm-scr-cta b { font-size:14px; }
.fmm-scr-cta small { margin-top:3px; color:#737987; font-size:10px; }
.fmm-scr-cta .fmm-btn { min-height:36px; padding:0 14px; font-size:10px; }
.fmm-scr-extra { max-width:600px; margin:12px auto 0; text-align:center; }
.fmm-scr-extra > button { border:0; color:#737987; background:none; font-size:10px; }
.fmm-scr-extra form { display:flex; align-items:end; gap:10px; margin-top:10px; padding:14px; border:1px solid #ECEEF2; border-radius:10px; text-align:left; }
.fmm-scr-extra .fmm-field { flex:1; margin:0; }
.fmm-scr-extra .fmm-btn { min-height:40px; }
.fmm-scr-page .fmm-2split { display:none !important; }

@media (max-width:760px) {
    .fmm-scr-page .fmm-scrhero { min-height:0; padding:24px 18px 20px; }
    .fmm-scr-page .fmm-scrhero { padding:24px 18px 20px; }
    .fmm-scrhero__trust { position:static; display:grid; justify-content:start; gap:5px; margin-bottom:14px; }
    .fmm-scrhero__trust span { min-height:30px; font-size:11px; }
    .fmm-scr-page .fmm-scrhero h1 { max-width:360px; font-size:24px; }
    .fmm-scr-page .fmm-scrhero > p { max-width:48ch; }
    .fmm-scr-page .fmm-scrhero__search { flex-direction:row; }
    .fmm-scr-page .fmm-scrhero__search .fmm-btn { width:auto; }
    .fmm-scrpopular__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .fmm-scr-skeleton__popular > div { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .fmm-scr-cta { flex-wrap:wrap; gap:10px; padding:14px; }
    .fmm-scr-cta > span { flex-basis:calc(100% - 56px); }
    .fmm-scr-cta .fmm-btn { flex:1; }
}
@media (max-width:440px) {
    .fmm-scr-page .fmm-scrhero__search { flex-direction:column; border:0; overflow:visible; background:transparent; }
    .fmm-scr-page .fmm-scrhero__search input { min-height:42px; border-radius:8px 8px 0 0; }
    .fmm-scr-page .fmm-scrhero__search .fmm-btn { width:100%; border-radius:0 0 8px 8px; }
    .fmm-scr-page .fmm-scrtabs button { gap:4px; padding:8px 4px; font-size:10px; }
    .fmm-scr-page .fmm-scrtabs button em { font-size:8px; }
    .fmm-scr-page .fmm-scrcard--guide { grid-template-columns:30px minmax(0,1fr) 8px; gap:8px; padding:10px; }
    .fmm-scr-page .fmm-scrcard__head { align-items:flex-start; }
    .fmm-scrpopular__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .fmm-scr-skeleton__popular > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .fmm-scr-extra form { flex-direction:column; align-items:stretch; }
}

@media (max-width: 700px) {
    .fmm-scr:not(.fmm-scr-page) .fmm-scrhero { padding: 26px 20px 24px; }
    .fmm-scr:not(.fmm-scr-page) .fmm-scrhero h1 { font-size: 24px; }
    .fmm-scr:not(.fmm-scr-page) .fmm-scrhero__search { flex-direction: column; }
    .fmm-scr:not(.fmm-scr-page) .fmm-scrhero__search .fmm-btn { width: 100%; }
    .fmm-scr:not(.fmm-scr-page) .fmm-scr__modes { flex-direction: column; }
}

/* ── Accepted offer awaiting payment ───────────────────────────────────────
   The prompt above the offers list and on the offer detail. Yellow rather
   than red: money is owed, but nothing has gone wrong yet — a red alert here
   would read as a failed payment, which is a different message entirely. */
.fmm-paynow {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--fmm-yellow-soft);
    border: 1px solid var(--fmm-yellow);
    border-radius: 12px;
}
.fmm-paynow__icon {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--fmm-yellow); color: var(--fmm-dark);
    display: grid; place-items: center;
}
.fmm-paynow__body { min-width: 0; flex: 1; }
.fmm-paynow__body b {
    display: block;
    font-size: 14px; font-weight: 800; color: var(--fmm-text);
}
.fmm-paynow__body span {
    display: block; margin-top: 2px;
    font-size: 13px; line-height: 1.5; color: var(--fmm-muted);
}
.fmm-paynow .fmm-btn { flex-shrink: 0; }

/* The offer-detail instance sits under a centred header, so it needs the
   margin the list instance gets from its grid gap. */
.fmm-confirm + .fmm-paynow { margin: 0 auto 24px; max-width: 560px; }

@media (max-width: 720px) {
    .fmm-paynow { flex-wrap: wrap; }
    .fmm-paynow .fmm-btn { width: 100%; }
}

/* ==========================================================================
   Nigeria landing page — redesign
   Hero is unchanged; everything below it is new: the three-step explainer, the
   dark global banner, the private-listing pitch, the four-card feature grid,
   the Discover More grid and the weekly-deals row.
   ========================================================================== */

.fmm-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; margin-bottom: 4px;
    border-radius: 999px;
    background: rgba(255, 198, 39, .15); color: #1A1A1A;
    font-size: 12px; line-height: 16px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
}
.fmm-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: #FFC627; }

/* --- How it works (Figma 1:43391) ----------------------------------------- */
.fmm-hsteps { background: #fff; }

.fmm-hsteps__head {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    max-width: 672px; margin: 0 auto 48px; text-align: center;
}

.fmm-hsteps__title {
    margin: 0;
    font-size: 41.6px; line-height: 40px; font-weight: 800;
    letter-spacing: -1.04px; color: #1A1A1A;
}
.fmm-hsteps__title em { font-style: normal; color: #FBBF24; }

.fmm-hsteps__lead { margin: 0; font-size: 18px; line-height: 28px; color: #6B7280; }

.fmm-hsteps__grid {
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    max-width: 1280px; margin: 0 auto; padding: 0; list-style: none;
}

/* Connector chevrons, drawn on the two gaps. Desktop only, as in the design. */
.fmm-hstep + .fmm-hstep::before {
    content: ""; position: absolute; top: 50%; left: -16px;
    transform: translateY(-50%);
    width: 12px; height: 18px;
    background: url("../../images/marketplace/figma/step-chevron.svg") center / contain no-repeat;
}

.fmm-hstep {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 25px;
    border: 1px solid #F3F4F6; border-radius: 22px;
    background: #F9FAFB;
}

.fmm-hstep__top {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin-bottom: 20px;
}

.fmm-hstep__num {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: #1A1A1A; color: #fff;
    font-size: 14px; line-height: 20px; font-weight: 700;
}

.fmm-hstep__tag {
    font-size: 12px; line-height: 16px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase; color: #9CA3AF;
}

.fmm-hstep__title {
    margin: 0 0 8px;
    font-size: 18px; line-height: 28px; font-weight: 700; color: #1A1A1A;
}

.fmm-hstep__lead {
    margin: 0 0 16px;
    font-size: 14px; line-height: 22.75px; color: #6B7280;
}

.fmm-hstep__link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
    font-size: 14px; line-height: 20px; font-weight: 700; color: #1A1A1A;
}
.fmm-hstep__link:hover { color: #B4780A; }

/* --- The mini UI mockups inside each step --------------------------------- */
.fmm-mock {
    display: flex; flex-direction: column; gap: 12px;
    width: 100%; margin-bottom: 20px; padding: 17px;
    border: 1px solid #F3F4F6; border-radius: 16px;
    background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-mock__head { display: flex; align-items: center; justify-content: space-between; }
.fmm-mock__head b {
    font-size: 10px; line-height: 15px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; color: #9CA3AF;
}
.fmm-mock__head em { font-style: normal; font-size: 16px; line-height: 24px; }

.fmm-mock__bars { display: flex; flex-direction: column; gap: 6px; }
.fmm-mock__bars i { height: 10px; border-radius: 999px; background: #F3F4F6; }

.fmm-mock__foot {
    display: flex; align-items: center; gap: 6px; padding-top: 13px;
    border-top: 1px solid #F3F4F6;
    font-size: 12px; line-height: 16px; font-weight: 600; color: #4B5563;
}

.fmm-mock__chrome { display: flex; align-items: center; gap: 6px; }
.fmm-mock__chrome i { width: 8px; height: 8px; border-radius: 50%; }
.fmm-mock__chrome .is-r { background: #FCA5A5; }
.fmm-mock__chrome .is-y { background: #FDE047; }
.fmm-mock__chrome .is-g { background: #86EFAC; }
.fmm-mock__chrome u { flex: 1; height: 16px; margin-left: 8px; border-radius: 999px; background: #F3F4F6; }

.fmm-mock__tiles { display: flex; gap: 8px; }
.fmm-mock__tile {
    display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0;
    padding: 9px; border: 1px solid #F3F4F6; border-radius: 8px; background: #F9FAFB;
}
.fmm-mock__block {
    display: grid; place-items: center;
    height: 40px; border-radius: 6px; background: #F3F4F6;
}
.fmm-mock__block.is-buy { background: rgba(255, 198, 39, .25); }
.fmm-mock__bar { height: 6px; border-radius: 999px; background: #E5E7EB; }

.fmm-mock__stages { display: flex; flex-direction: column; gap: 10px; }
.fmm-mock__stage {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; line-height: 16px; font-weight: 600; color: #4B5563;
}
.fmm-mock__stage.is-pending { color: #9CA3AF; }
.fmm-mock__ring {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid #FFC627;
}

/* --- Dark global banner (Figma 1:43799) ----------------------------------- */
.fmm-gband {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 60%) minmax(0, 40%); align-items: stretch;
    min-height: 520px;
    border-radius: 28px;
    background: linear-gradient(139.46deg, #1C1C1E 0%, #2A2A2C 40%, #1A1A1C 100%);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    color: #fff;
}

.fmm-gband__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fmm-gband__bg::before,
.fmm-gband__bg::after {
    content: ""; position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 190, 46, 1) 0%, rgba(255, 190, 46, 0) 70%);
}
.fmm-gband__bg::before { top: -128px; left: -128px; width: 500px; height: 500px; opacity: .2; }
.fmm-gband__bg::after  { bottom: -160px; left: 340px; width: 400px; height: 400px; opacity: .1; }

.fmm-gband__map {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 320px; height: 320px; opacity: .05;
}
.fmm-gband__arc { position: absolute; top: 0; right: 0; height: 100%; width: auto; }

/* The yellow hairline along the bottom edge of the card. */
.fmm-gband__accent {
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, rgba(255, 190, 46, 0) 0%, #FFBE2E 40%, #FFD060 60%, rgba(255, 208, 96, 0) 100%);
}

.fmm-gband__body {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; justify-content: center;
    padding: 56px 64px;
}

.fmm-gband__pill {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 17px; margin-bottom: 24px; border-radius: 999px;
    background: rgba(250, 204, 21, .1); border: 1px solid rgba(250, 204, 21, .3);
    color: #FFBE2E; font-size: 12px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
}
.fmm-gband__pill img { display: block; width: 14px; height: 14px; flex-shrink: 0; }

.fmm-gband__title {
    margin: 0 0 12px;
    font-size: clamp(30px, 3.3vw, 57.6px); line-height: 1.05; font-weight: 800;
    letter-spacing: -.02em; color: #fff;
}
.fmm-gband__title em { font-style: normal; color: #FFBE2E; }

.fmm-gband__lead {
    margin: 0 0 16px; max-width: 512px;
    font-size: 16px; line-height: 26px; color: #9CA3AF;
}

.fmm-gband__check {
    display: flex; align-items: center; gap: 8px; margin: 0 0 32px;
    font-size: 14px; line-height: 20px; font-weight: 500; color: #4ADE80;
}
.fmm-gband__check img { display: block; width: 14px; height: 14px; flex: 0 0 14px; }
.fmm-gband__check span { min-width: 0; }

.fmm-gband__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.fmm-gband__go {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 32px; border-radius: 16px;
    background: linear-gradient(135deg, #FFBE2E 0%, #FFD060 100%);
    color: #1C1C1E; font-size: 16px; font-weight: 700;
    box-shadow: 0 8px 16px rgba(255, 190, 46, .35);
}
.fmm-gband__go img { display: block; width: 16px; height: 16px; object-fit: contain; flex: none; }
.fmm-gband__go:hover { filter: brightness(.96); }

.fmm-gband__calc {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 0; border: 0; background: none;
    color: #fff; font-size: 14px; font-weight: 700;
}
.fmm-gband__calc img { display: block; flex: none; }
.fmm-gband__calc:hover { color: #FFBE2E; }

.fmm-shipest-host { display: inline-flex; }
body.fmm-shipest-open { overflow: hidden; }

.fmm-shipest {
    position: fixed; inset: 0; z-index: 2147482999;
    display: flex; align-items: safe center; justify-content: center;
    padding: 24px 16px;
    background: rgba(17, 17, 17, .55);
    overflow: auto;
}
.fmm-shipest__card {
    position: relative;
    width: min(580px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 22px 18px 16px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    color: #1A1A1A;
}
.fmm-shipest__x {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: transparent; color: #6B7280; font-size: 24px; line-height: 1;
}
.fmm-shipest__x:hover { background: #F3F4F6; color: #1A1A1A; }
.fmm-shipest__card h2 {
    margin: 0 0 4px; padding: 0 32px; text-align: center;
    font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
}
.fmm-shipest__lead {
    max-width: 420px; margin: 0 auto 4px; text-align: center;
    font-size: 13px; line-height: 18px; font-weight: 500; color: #9CA3AF;
}
.fmm-shipest__parcel {
    width: min(168px, 70%); height: auto; margin: 0 auto 8px;
}
.fmm-shipest__parcel img { width: 100%; height: auto; margin: 0 auto; object-fit: contain; }
.fmm-shipest__kicker {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px;
    font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B7280;
}
.fmm-shipest__kicker img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; flex: none; }
.fmm-shipest__grid { display: grid; gap: 10px; margin-bottom: 10px; align-items: start; }
.fmm-shipest__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fmm-shipest__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fmm-shipest__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
    .fmm-shipest__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fmm-shipest label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; line-height: 18px; font-weight: 600; color: #6B7280;
}
.fmm-shipest input,
.fmm-shipest select {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1px solid #E5E7EB; border-radius: 14px;
    background: #fff; color: #1A1A1A;
    font: inherit; font-size: 15px; font-weight: 600;
}
.fmm-shipest input:focus,
.fmm-shipest select:focus { outline: 2px solid rgba(255, 199, 44, .7); border-color: #FFC72C; }
.fmm-shipest input[readonly] { color: #1A1A1A; background: #fff; }
.fmm-shipest select {
    appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("../../images/marketplace/figma/ng-shipest/chevron.svg");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.fmm-shipest select.is-placeholder { color: #9CA3AF; font-weight: 500; }
.fmm-shipest select:disabled { color: #9CA3AF; background-color: #F9FAFB; }
.fmm-shipest__field { position: relative; display: block; }
.fmm-shipest__flag,
.fmm-shipest__globe {
    position: absolute; top: 50%; transform: translateY(-50%);
    pointer-events: none;
}
.fmm-shipest__flag { left: 14px; width: 28px; height: 20px; }
.fmm-shipest__globe { left: 14px; width: 18px; height: 18px; }
.fmm-shipest__field select.has-flag { padding-left: 50px; }
.fmm-shipest__grid--2 .fmm-shipest__field select { padding-left: 42px; background-color: #fff; }
.fmm-shipest__field select.has-flag { padding-left: 50px; }
.fmm-shipest__grid--2 label:last-child select { background-color: #F9FAFB; }
.fmm-shipest__money { position: relative; display: block; }
.fmm-shipest__money i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-style: normal; font-weight: 600; color: #9CA3AF; pointer-events: none;
}
.fmm-shipest__money input { padding-left: 32px; }
.fmm-shipest__state {
    position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
    font-size: 13px; line-height: 18px; font-weight: 600; color: #6B7280;
}
.fmm-shipest__pick {
    display: flex; align-items: center; width: 100%; height: 42px; padding: 0 36px 0 12px;
    border: 1px solid #E5E7EB; border-radius: 14px;
    background: #fff url("../../images/marketplace/figma/ng-shipest/chevron.svg") no-repeat right 14px center / 12px 8px;
    color: #1A1A1A; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.fmm-shipest__pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmm-shipest__pick.is-placeholder { color: #9CA3AF; font-weight: 500; }
.fmm-shipest__pick:disabled { color: #9CA3AF; background-color: #F9FAFB; cursor: default; }
.fmm-shipest__pick:focus { outline: 2px solid rgba(255, 199, 44, .7); border-color: #FFC72C; }
.fmm-shipest__menu {
    padding: 8px;
    border: 1px solid #E5E7EB; border-radius: 14px; background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    overflow: auto; overscroll-behavior: contain;
}
.fmm-shipest__menu input[type="search"] {
    position: sticky; top: 0; z-index: 1;
    height: 40px; margin-bottom: 6px; font-size: 14px; font-weight: 600; background: #fff;
}
.fmm-shipest__menu ul {
    list-style: none; margin: 0; padding: 0;
}
.fmm-shipest__menu li button {
    display: block; width: 100%; height: auto; min-height: 40px; padding: 8px 12px;
    border: 0; border-radius: 10px; background: transparent;
    color: #1A1A1A; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left;
    white-space: normal;
}
.fmm-shipest__menu li button:hover,
.fmm-shipest__menu li button[aria-selected="true"] { background: #FFF6DC; }
.fmm-shipest__menu-empty { margin: 4px 8px 8px; color: #9CA3AF; font-size: 13px; font-weight: 600; }
.fmm-shipest__delivery { margin-bottom: 10px; }
.fmm-shipest__delivery-label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: #6B7280;
}
.fmm-shipest__toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 4px; border-radius: 16px; background: #F3F4F6;
}
.fmm-shipest__toggle button {
    height: 38px; border: 0; border-radius: 12px;
    background: transparent; color: #9CA3AF; font-size: 15px; font-weight: 700;
}
.fmm-shipest__toggle button.is-on {
    background: #fff; color: #1A1A1A;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.fmm-shipest__error { margin: 0 0 12px; color: #B91C1C; font-size: 13px; font-weight: 600; }
.fmm-shipest__result {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #F9FAFB;
    font-size: 12px; font-weight: 600; color: #6B7280;
}
.fmm-shipest__result b { display: block; margin-top: 2px; color: #1A1A1A; font-size: 14px; }
.fmm-shipest__min {
    margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
    background: #FEF9C3; color: #854D0E; font-size: 12px; line-height: 18px;
}
/* Live EasyPost quotes: one row per carrier option, cheapest first. */
.fmm-shipest__rates { margin: 0 0 14px; border: 1px solid #F3F4F6; border-radius: 14px; overflow: hidden; }
.fmm-shipest__rate {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; font-size: 13px;
}
.fmm-shipest__rate + .fmm-shipest__rate { border-top: 1px solid #F3F4F6; }
.fmm-shipest__rate.is-best { background: #F0FDF4; }
.fmm-shipest__rate-name { min-width: 0; }
.fmm-shipest__rate-name b { display: block; color: #1A1A1A; font-weight: 700; }
.fmm-shipest__rate-name i { display: block; margin-top: 1px; color: #6B7280; font-size: 12px; font-style: normal; }
.fmm-shipest__rate-price { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fmm-shipest__rate-price em {
    padding: 2px 8px; border-radius: 999px;
    background: #DCFCE7; color: #15803D; font-size: 11px; font-weight: 700; font-style: normal;
}
.fmm-shipest__rate-price b { color: #1A1A1A; font-size: 14px; font-weight: 800; }
.fmm-shipest__rates-note {
    margin: 0; padding: 9px 14px; border-top: 1px solid #F3F4F6;
    background: #F9FAFB; color: #6B7280; font-size: 11.5px; line-height: 17px;
}
.fmm-dest-rotate { transition: opacity .25s ease; }
.fmm-dest-rotate.is-fading { opacity: 0; }
/* The destination line never wraps: long names scale the line down (via the
   rotator script) instead of pushing the hero taller. min-width:0 on the
   grid/flex parents stops the nowrap text from inflating its own column,
   which would defeat the measurement. */
.fmm-destline { display: inline-block; max-width: 100%; white-space: nowrap; vertical-align: bottom; }
.fmm-hero__grid > div, .fmm-gband__body { min-width: 0; }
.fmm-shipest__go {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 48px; border: 0; border-radius: 14px;
    background: #FFC72C; color: #0F1115; font-size: 16px; font-weight: 800;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .04);
}
.fmm-shipest__go img { width: 16px; height: 20px; }
.fmm-shipest__go:hover { background: #F2AF1E; }
.fmm-shipest__go:disabled { opacity: .7; cursor: wait; }
@media (max-width: 720px) {
    .fmm-shipest { padding: 12px; }
    .fmm-shipest__card { padding: 20px 12px 12px; border-radius: 18px; }
    .fmm-shipest__card h2 { font-size: 18px; line-height: 1.25; padding: 4px 36px 0; }
    .fmm-shipest__lead { font-size: 12px; line-height: 18px; }
    .fmm-shipest__parcel { width: min(132px, 56%); }
    .fmm-shipest__grid--3,
    .fmm-shipest__grid--2,
    .fmm-shipest__result { grid-template-columns: 1fr; }
    .fmm-shipest__go { height: 46px; font-size: 15px; }
    .fmm-shipest input,
    .fmm-shipest select,
    .fmm-shipest__pick { font-size: 16px; }
}

.fmm-gband__art {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}

.fmm-gband__shot { position: relative; }
.fmm-gband__shot > img {
    width: 260px; height: 360px; object-fit: cover;
    border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.fmm-gband__trusted {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 12px;
    background: #FFBE2E; color: #1C1C1E;
    font-size: 10px; font-weight: 800; letter-spacing: .25px; text-transform: uppercase;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
.fmm-gband__trusted img { display: block; width: 12px; height: 12px; flex: 0 0 12px; }

.fmm-gband__rating {
    position: absolute; left: 8.49%; right: 8.49%; bottom: 12px; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 17px; border-radius: 999px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
    color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.fmm-gband__stars { display: flex; gap: 2px; color: #FFBE2E; }
.fmm-gband__stars img { display: block; width: 13px; height: 12px; }

/* The four floating labels. Percentages track the 260px shot, so they hold
   their corners when the column narrows. */
.fmm-gchip {
    position: absolute; z-index: 4;
    display: flex; align-items: center; gap: 10px;
    min-width: 155px; padding: 11px 18px 11px 13px; border-radius: 16px;
    background: rgba(255, 255, 255, .93); border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    white-space: nowrap;
}
.fmm-gchip b  { display: block; font-size: 12px; line-height: 15px; font-weight: 700; color: #000; }
.fmm-gchip em { display: block; font-size: 10px; line-height: 15px; font-style: normal; color: #393C40; }

.fmm-gchip__ico {
    display: grid; place-items: center; flex: 0 0 32px;
    width: 32px; height: 32px; border-radius: 12px;
}
.fmm-gchip__ico--yellow { background: rgba(255, 190, 46, .2); border: 1px solid rgba(255, 190, 46, .3); color: #B4780A; }
.fmm-gchip__ico--green  { background: rgba(34, 197, 94, .2);  border: 1px solid rgba(34, 197, 94, .3);  color: #15803D; }
.fmm-gchip__ico img { display: block; width: 15px; height: 16px; object-fit: contain; }

.fmm-gchip--tl { top: 32px;     left: -80px; }
.fmm-gchip--tr { top: 80px;     right: -64px; }
.fmm-gchip--bl { bottom: 112px; left: -64px; }
.fmm-gchip--br { bottom: 80px;  right: -56px; }

/* --- Private listing pitch (Figma 1:44364) -------------------------------- */
.fmm-sband {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 612px) minmax(0, 1fr);
    min-height: 520px;
    border: 2px solid rgba(251, 191, 36, .12); border-radius: 36px;
    /* Exported panel (1344×520). The rings are in the image, so the old glow blobs are gone. */
    background: #fff6dc url("../../images/marketplace/figma/ng-sband/sband-bg.png") center / cover no-repeat;
}

.fmm-sband__body { position: relative; z-index: 2; padding: 40px 64px; }

.fmm-sband__title {
    margin: 0 0 24px;
    /* Figma: 63px/79.87px. Capped by available width so the second line
       ("on Instagram or TikTok?") cannot overrun the column. */
    font-size: clamp(26px, 2.6vw, 44px); line-height: 1.24; font-weight: 800;
    letter-spacing: -.024em; color: #1A1A1A; white-space: nowrap;
}

.fmm-sband__rule { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.fmm-sband__rule i { height: 3px; border-radius: 999px; background: #FFBE2E; }
.fmm-sband__rule i:nth-child(1) { width: 40px; }
.fmm-sband__rule i:nth-child(2) { width: 16px; opacity: .4; }
.fmm-sband__rule i:nth-child(3) { width: 8px;  opacity: .2; }

.fmm-sband__lead {
    margin: 0 0 16px; max-width: 470px;
    font-size: 18px; line-height: 32px; font-weight: 500; color: #4B5563;
}

.fmm-sband__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.fmm-sband__go {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 32px; border-radius: 16px;
    background: #FFBE2E; color: #1A1A1A; font-size: 18px; font-weight: 800;
    box-shadow: 0 8px 28px -4px rgba(255, 190, 46, .45);
}
.fmm-sband__go img { display: block; width: 14px; height: 12px; flex: none; }
.fmm-sband__go:hover { background: #F2AF1E; }

.fmm-sband__how {
    display: inline-flex; align-items: center; gap: 8px;
    color: #4B5563; font-size: 14px; font-weight: 600;
}
.fmm-sband__how img { display: block; width: 7px; height: 11px; flex: none; }
.fmm-sband__how:hover { color: #1A1A1A; }

.fmm-sband__proof {
    display: flex; align-items: center; gap: 16px;
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.fmm-sband__faces { display: flex; align-items: center; }
.fmm-sband__faces img,
.fmm-sband__faces i {
    width: 32px; height: 32px; margin-right: -10px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    object-fit: cover;
}
.fmm-sband__faces i {
    display: grid; place-items: center; margin-right: 0;
    background: #FFBE2E; color: #1A1A1A;
    font-size: 10px; font-weight: 800; font-style: normal;
}
.fmm-sband__prooftext { font-size: 12px; line-height: 15px; color: #6B7280; }
.fmm-sband__prooftext b { color: #1A1A1A; font-weight: 700; }

/* Card stage. Positions are percentages of the stage, as in the design. */
.fmm-sband__stage { position: relative; z-index: 2; min-height: 500px; }

.fmm-fcard {
    position: absolute; overflow: hidden;
    display: flex; flex-direction: column; gap: 12px;
    padding: 13px 1px 1px; border-radius: 22px;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .1);
}
.fmm-fcard--cream { background: linear-gradient(134.9deg, #FFF9ED 0%, #FFF3D0 100%); border: 1px solid rgba(255, 190, 46, .2); }
.fmm-fcard--dark  { background: #1A1A1A; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 50px -10px rgba(26, 26, 26, .35); }
.fmm-fcard--white { background: rgba(255, 255, 255, .95); border: 1px solid #fff; }

/* Figma insets on the 748x500 stage. Height comes from the content (the
   per-card image wells above), not from a bottom inset — pinning both edges
   stretched every card and closed the gaps the design leaves between them. */
.fmm-fcard--headphones { top: 5.03%;  right: 5.4%;   left: 57.6%; }
.fmm-fcard--watch      { top: 19.63%; right: 32.8%;  left: 32.8%; }
.fmm-fcard--pack       { top: 52.03%; right: 9.9%;   left: 47.8%; }
.fmm-fcard--headphones,
.fmm-fcard--watch,
.fmm-fcard--pack { gap: 8px; padding: 10px 1px 1px; }

.fmm-fcard__shot {
    position: relative; display: grid; place-items: center;
    height: 118px; margin: 0 1px; border-radius: 16px; overflow: hidden;
}
.fmm-fcard--watch .fmm-fcard__shot { height: 104px; }
.fmm-fcard--pack  .fmm-fcard__shot { height: 140px; }
.fmm-fcard--cream .fmm-fcard__shot { background: rgba(238, 229, 196, .64); }
.fmm-fcard--dark  .fmm-fcard__shot { background: rgba(255, 255, 255, .1); }
.fmm-fcard--white .fmm-fcard__shot { background: linear-gradient(153.8deg, #F9FAFB 0%, #F1F5F9 100%); }
.fmm-fcard__shot img { max-height: 76%; width: auto; object-fit: contain; }

.fmm-fcard__src {
    position: absolute; top: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border-radius: 11px;
    background: rgba(255, 255, 255, .9); border: 1px solid #F3F4F6;
    backdrop-filter: blur(4px);
    color: #374151; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.fmm-fcard__src img { width: 12px; height: 12px; max-height: none; object-fit: contain; }
.fmm-fcard__hot {
    position: absolute; top: 14px; left: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-radius: 12px;
    background: #FFBE2E; border: 1px solid rgba(229, 168, 34, .2);
    color: #1A1A1A; font-size: 12px; font-weight: 800;
    box-shadow: 0 8px 24px -4px rgba(255, 190, 46, .45);
}
.fmm-fcard__hot img { width: 14px; height: 14px; max-height: none; flex: none; object-fit: contain; }

.fmm-fcard__foot { display: block; padding: 0 16px 16px; }
.fmm-fcard--headphones .fmm-fcard__foot,
.fmm-fcard--watch .fmm-fcard__foot,
.fmm-fcard--pack .fmm-fcard__foot { padding: 0 12px 12px; }
.fmm-fcard--headphones .fmm-fcard__foot b,
.fmm-fcard--watch .fmm-fcard__foot b,
.fmm-fcard--pack .fmm-fcard__foot b { font-size: 13px; line-height: 18px; }
.fmm-fcard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fmm-fcard__mark { display: block; width: 14px; height: 14px; flex: none; object-fit: contain; }
.fmm-fcard__add {
    display: grid; place-items: center; flex: none;
    width: 24px; height: 24px; border-radius: 50%; background: #FFBE2E;
}
.fmm-fcard__add img { display: block; width: 10px; height: 10px; }
.fmm-fcard__foot b  { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: #1A1A1A; }
.fmm-fcard__foot em {
    display: block; font-size: 12px; line-height: 16px; font-style: normal; font-weight: 600;
    letter-spacing: .3px; text-transform: uppercase; color: #9CA3AF;
}
.fmm-fcard--dark .fmm-fcard__foot b  { color: #fff; }
.fmm-fcard--dark .fmm-fcard__foot em { color: rgba(255, 190, 46, .7); }

.fmm-sband__save {
    position: absolute; top: 33%; right: 10px; z-index: 3;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 13px; border-radius: 12px;
    background: #1A1A1A; border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, .25);
    color: #FFBE2E;
}
.fmm-sband__save img { display: block; width: 12px; height: 12px; flex: none; }
.fmm-sband__save b  { display: block; font-size: 10px; line-height: 12.5px; font-weight: 800; color: #fff; }
.fmm-sband__save em { display: block; font-size: 9px; line-height: 11.25px; font-style: normal; color: #9CA3AF; }

/* Bottom process strip, spanning both columns. */
.fmm-sband__flow {
    grid-column: 1 / -1; position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px;
    margin: 0; padding: 13px 32px 12px; list-style: none;
    background: rgba(255, 255, 255, .5); border-top: 1px solid rgba(255, 255, 255, .6);
    backdrop-filter: blur(6px);
}
.fmm-sband__stagerow {
    display: flex; align-items: center; gap: 8px; padding: 0 20px;
    font-size: 12px; line-height: 16px; font-weight: 700; color: #1A1A1A;
}
.fmm-sband__stagerow + .fmm-sband__stagerow::before { content: "——"; margin-right: 24px; color: #D1D5DB; font-weight: 400; }
.fmm-sband__stagenum {
    display: grid; place-items: center; flex: 0 0 24px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #FFBE2E; color: #1A1A1A;
}
.fmm-sband__stagenum.is-done { background: #0DBF7A; color: #fff; }
.fmm-sband__stagenum img { width: 12px; height: 12px; display: block; }

/* Same float as the US landing page. Each card has its own path so the
   stack never bobs as one piece. Travel is upward only: the backpack already
   sits on the bottom edge of the stage, and the band clips overflow. */
.fmm-sband { --sband-lift: 16px; }

@keyframes fmm-sband-headphones {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.8deg); }
    50%      { transform: translate3d(-8px, calc(var(--sband-lift) * -0.8), 0) rotate(1deg); }
}
@keyframes fmm-sband-watch {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0.7deg); }
    50%      { transform: translate3d(10px, calc(var(--sband-lift) * -1), 0) rotate(-1.1deg); }
}
@keyframes fmm-sband-pack {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0.5deg); }
    50%      { transform: translate3d(6px, calc(var(--sband-lift) * -0.7), 0) rotate(-0.9deg); }
}
@keyframes fmm-sband-save {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-6px, calc(var(--sband-lift) * -0.85), 0) scale(1.04); }
}
@keyframes fmm-sband-step {
    0%, 16%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 190, 46, 0); }
    7%            { transform: scale(1.16); box-shadow: 0 0 0 6px rgba(255, 190, 46, .42); }
}
@keyframes fmm-sband-step-done {
    0%, 16%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 191, 122, 0); }
    7%            { transform: scale(1.16); box-shadow: 0 0 0 6px rgba(13, 191, 122, .4); }
}
@keyframes fmm-sband-cta {
    0%, 100% { box-shadow: 0 8px 28px -4px rgba(255, 190, 46, .4); }
    50%      { box-shadow: 0 14px 34px -4px rgba(255, 190, 46, .72); }
}

.fmm-sband .fmm-fcard,
.fmm-sband .fmm-sband__save {
    will-change: transform;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.fmm-sband .fmm-fcard--headphones { animation-name: fmm-sband-headphones; animation-duration: 5.4s; animation-delay: -1.6s; }
.fmm-sband .fmm-fcard--watch      { animation-name: fmm-sband-watch;      animation-duration: 6.2s; animation-delay: -3.4s; }
.fmm-sband .fmm-fcard--pack       { animation-name: fmm-sband-pack;       animation-duration: 4.8s; animation-delay: -0.8s; }
.fmm-sband .fmm-sband__save       { animation-name: fmm-sband-save;       animation-duration: 4.2s; animation-delay: -2.1s; }
.fmm-sband .fmm-sband__stagenum { animation: fmm-sband-step 4.8s ease-in-out infinite; }
.fmm-sband .fmm-sband__stagerow:nth-child(2) .fmm-sband__stagenum { animation-delay: 1.2s; }
.fmm-sband .fmm-sband__stagerow:nth-child(3) .fmm-sband__stagenum { animation-delay: 2.4s; }
.fmm-sband .fmm-sband__stagerow:nth-child(4) .fmm-sband__stagenum { animation-name: fmm-sband-step-done; animation-delay: 3.6s; }
.fmm-sband__go { animation: fmm-sband-cta 3.2s ease-in-out infinite; }
.fmm-sband__go img,
.fmm-sband__go svg { transition: transform .25s ease; }
.fmm-sband__go:hover img,
.fmm-sband__go:hover svg { transform: translateX(4px); }

@media (max-width: 980px) {
    .fmm-sband { --sband-lift: 6px; }
    .fmm-sband__stage { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .fmm-sband .fmm-fcard,
    .fmm-sband .fmm-sband__save,
    .fmm-sband .fmm-sband__stagenum,
    .fmm-sband__go { animation: none; }
    .fmm-sband__go img,
    .fmm-sband__go svg { transition: none; }
}

/* The card build. Feature pages still use the link style. Labels are real text. */
.fmm-feat { display: flex; flex-direction: column; gap: 24px; }

/* Each row is a wide card beside a fixed 389px one; the sides alternate, which
   a single two-track grid cannot express. */
.fmm-feat__row { display: flex; gap: 24px; align-items: stretch; }

.fmm-feat__card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 400px; border-radius: 32px;
}
.fmm-feat__card--verify,
.fmm-feat__card--device { flex: 1 1 0; min-width: 0; justify-content: center; padding: 49px; }
.fmm-feat__card--private,
.fmm-feat__card--global { flex: 0 0 389px; justify-content: space-between; }

.fmm-feat__card--verify  { background: #FFF8EB; border: 1px solid #FFF0D6; }
.fmm-feat__card--private { background: #fff;    border: 1px solid #F3F4F6; padding: 33px; }
.fmm-feat__card--global  { background: #111827; padding: 32px; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .08); }
.fmm-feat__card--device  { background: #FFFDF9; border: 1px solid #F3EFE6; }

/* Shorter than the 400px bento floor. Height is set, not just a minimum,
   because the absolute phone was stretching the row back to ~400px. */
.fmm-feat__card--global,
.fmm-feat__card--device { height: 400px; min-height: 400px; }

.fmm-feat__body,
.fmm-mini,
.fmm-aimatch,
.fmm-status,
.fmm-phoneclock { user-select: text; }
.fmm-feat__card--verify .fmm-feat__title { white-space: nowrap; }
.fmm-feat__card--verify .fmm-feat__body { max-width: 440px; }
.fmm-feat__card--verify .fmm-feat__lead { max-width: 336px; }

/* The illustrations run off the right edge, so the copy needs a ceiling or it
   slides under them. */
.fmm-feat__body { position: relative; z-index: 2; max-width: 384px; }
.fmm-feat__card--private .fmm-feat__body,
.fmm-feat__card--global .fmm-feat__body { max-width: none; }

.fmm-feat__badge {
    display: inline-block; margin-bottom: 16px;
    padding: 4px 12px; border-radius: 999px;
    background: #FFE1AD; color: #B37E09;
    font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase;
}

.fmm-feat__title {
    margin: 0 0 16px;
    font-size: 30px; line-height: 36px; font-weight: 700; color: #111827;
}
.fmm-feat__title--sm { margin-bottom: 12px; font-size: 24px; line-height: 32px; }
.fmm-feat__card--global .fmm-feat__title { color: #fff; }

.fmm-feat__lead { margin: 0; font-size: 16px; line-height: 30px; color: #4B5563; }
.fmm-feat__lead--sm { font-size: 14px; line-height: 20px; color: #6B7280; }
.fmm-feat__card--global .fmm-feat__lead { color: #9CA3AF; }

.fmm-feat__link {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    margin-top: 16px;
    font-size: 16px; line-height: 24px; font-weight: 700; color: #111827;
}
.fmm-feat__link--ondark { color: #fff; }
.fmm-feat__link:hover { opacity: .75; }

/* --- Card 1 art ----------------------------------------------------------- */
.fmm-feat__art { position: absolute; inset: 0; pointer-events: none; }
.fmm-feat__shoe,
.fmm-feat__phone img,
.fmm-aimatch__art { position: absolute; }

.fmm-feat__shoe {
    position: absolute; top: 14%; right: 31%; width: 168px; z-index: 2;
    transform: rotate(-14deg); pointer-events: none; user-select: none;
}

.fmm-aimatch {
    position: absolute; top: 8%; right: 4%; z-index: 1;
    width: 280px; padding: 12px;
    border-radius: 24px; background: #fff;
    box-shadow: 0 18px 40px -20px rgba(17, 24, 39, .3);
    transform: rotate(-2.2deg);
    pointer-events: auto;
}
.fmm-aimatch__art {
    position: relative; inset: auto;
    display: block; width: 116%; max-width: none; height: 146px;
    margin: 0 0 10px -8%;
    object-fit: cover; object-position: center 8%;
    border-radius: 12px;
    pointer-events: none; user-select: none;
}
.fmm-aimatch__tag {
    position: absolute; z-index: 2; top: 22px;
    padding: 2px 6px; border-radius: 6px;
    background: #E5E7EB; color: #4B5563;
    font-size: 8px; line-height: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.fmm-aimatch__tag--listing { left: 46%; }
.fmm-aimatch__tag--received { right: 16px; background: #F59E0B; color: #fff; }
.fmm-aimatch__panel {
    position: relative; z-index: 2;
    padding: 12px;
    border-radius: 14px; background: #F4F5F7;
}
.fmm-aimatch__head,
.fmm-aimatch__strong {
    display: flex; align-items: center; gap: 8px;
    margin: 0; color: #111827; font-weight: 700;
}
.fmm-aimatch__head { font-size: 14px; line-height: 18px; }
.fmm-aimatch__head svg,
.fmm-aimatch__strong svg { flex: none; }
.fmm-aimatch__checks {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 10px 0; padding: 0 0 10px; list-style: none;
    border-bottom: 1px solid #E5E7EB;
}
.fmm-aimatch__checks li {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 8px; background: #fff;
    font-size: 11px; line-height: 14px; font-weight: 600; color: #1F2937;
}
.fmm-aimatch__checks li::before {
    content: "";
    width: 8px; height: 5px;
    border-left: 1.6px solid #10B880; border-bottom: 1.6px solid #10B880;
    transform: rotate(-45deg) translateY(-1px);
}
.fmm-aimatch__strong { font-size: 13px; line-height: 18px; }

.fmm-status {
    position: absolute; z-index: 4; top: 54%; right: 34%;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff;
    box-shadow: 0 10px 24px -12px rgba(17, 24, 39, .35);
    transform: rotate(2deg);
    pointer-events: auto;
}
.fmm-status__ico {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: #E7F8EF;
}
.fmm-status__copy { display: flex; flex-direction: column; }
.fmm-status__copy small { font-size: 11px; line-height: 14px; color: #9CA3AF; }
.fmm-status__copy b { font-size: 14px; line-height: 18px; color: #111827; }

.fmm-phoneclock {
    position: absolute; z-index: 1; left: 6%; right: 18%; top: 22%;
    padding: 0; text-align: center; color: #fff;
    background: none;
    text-shadow: 0 1px 8px rgba(20, 10, 40, .45);
    pointer-events: auto;
}
.fmm-phoneclock b { display: block; font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.fmm-phoneclock small { display: block; margin-top: 4px; font-size: 9px; line-height: 11px; font-weight: 500; white-space: nowrap; }

/* --- Card 2: the two listing cards ---------------------------------------- */
.fmm-feat__pair {
    position: relative; z-index: 2;
    display: flex; align-items: flex-end; justify-content: center;
    margin: 32px 0 0; min-height: 176px;
}

.fmm-mini {
    display: flex; flex-direction: column; gap: 4px;
    width: 114px; padding: 11px;
    border: 1px solid #F3F4F6; border-radius: 10px; background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.fmm-mini--private {
    width: 136px; margin-left: -14px; transform: scale(1.05);
    border-color: #FC0; box-shadow: 0 3.5px 7px rgba(0, 0, 0, .06);
}

.fmm-mini__top { display: flex; align-items: center; justify-content: space-between; }
.fmm-mini__kicker {
    font-size: 8px; line-height: 12px; font-weight: 700;
    letter-spacing: .2px; text-transform: uppercase; color: #9CA3AF;
}
.fmm-mini__kicker--dark { color: #111827; }

.fmm-mini__shot { display: block; height: 49px; border-radius: 7px; background: #F3F4F6; overflow: hidden; }
.fmm-mini__shot img { width: 100%; height: 100%; object-fit: cover; }

.fmm-mini__name  { font-size: 10.5px; line-height: 13px; font-weight: 500; color: #1F2937; }
.fmm-mini__price { font-size: 10.5px; line-height: 13px; font-weight: 700; color: #111827; }
.fmm-mini__price--lg { font-size: 11.4px; line-height: 14px; }
.fmm-mini__who   { font-size: 8.7px; line-height: 13px; color: #6B7280; }

.fmm-mini__box {
    display: flex; flex-direction: column; gap: 3px;
    padding: 6px 8px; border-radius: 5px;
    background: rgba(254, 252, 232, .5); border: 1px solid rgba(254, 249, 195, .5);
}
.fmm-mini__box span { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fmm-mini__box em { font-style: normal; font-size: 7.9px; line-height: 12px; color: #4B5563; }
.fmm-mini__box b  { font-size: 7.9px; line-height: 12px; font-weight: 500; color: #1F2937; }
.fmm-mini__box .is-gold em,
.fmm-mini__box .is-gold b { color: #B38F00; font-weight: 600; }

.fmm-mini__only { font-size: 7px; line-height: 10.5px; font-weight: 500; text-align: center; color: #9CA3AF; }

/* --- Card 3: the three social pills ---------------------------------------- */
.fmm-feat__socials {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin: 32px 0; padding: 40px 0;
}
.fmm-feat__socials i {
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255, 255, 255, .1); backdrop-filter: blur(4px);
}
.fmm-feat__socials i:nth-child(1) { transform: rotate(-12deg); }
.fmm-feat__socials i:nth-child(2) { margin-top: 16px; }
.fmm-feat__socials i:nth-child(3) { transform: rotate(12deg); }

/* --- Card 4 art ----------------------------------------------------------- */
/* Figma card is 931×400. The phone rect is x=1040.69 y=491.809, 201.689×394.48,
   so it starts 53.5px down and runs 48px past the card. The card clips that. */
.fmm-feat__phone {
    position: absolute; top: 13.375%; right: 10.92%;
    width: 21.67%; height: 98.62%; overflow: hidden;
}
.fmm-feat__phone img {
    position: absolute; max-width: none;
    width: 265.63%; height: 135.81%; left: -137%; top: -17.63%;
}

@keyframes fmm-dchip-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -8px, 0); }
}

.fmm-dchip {
    position: absolute; z-index: 2;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 5px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 22px -10px rgba(17, 24, 39, .28), 0 2px 6px rgba(17, 24, 39, .06);
    /* The art layer ignores the pointer. These chips opt back in so the
       label and value can be highlighted and copied. */
    pointer-events: auto;
    user-select: text;
    cursor: text;
    animation: fmm-dchip-float 4.8s ease-in-out infinite;
}
.fmm-dchip__ico,
.fmm-dchip svg { pointer-events: none; user-select: none; }
.fmm-dchip__ico {
    display: grid; place-items: center; flex: none;
    width: 26px; height: 26px; border-radius: 50%;
}
.fmm-dchip__ico svg { width: 13px; height: 13px; }
.fmm-dchip__copy b svg { width: 10px; height: 10px; }
.fmm-dchip__ico--blue   { background: #E8F0F8; color: #2060E8; }
.fmm-dchip__ico--amber  { background: #F8F8E8; color: #E0983F; }
.fmm-dchip__ico--violet { background: #F0F0FC; color: #9030E4; }
.fmm-dchip__ico--gold   { background: #F8F0B8; color: #A16207; }
.fmm-dchip__copy { display: flex; flex-direction: column; min-width: 0; }
.fmm-dchip__copy small {
    font-size: 7px; line-height: 9px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #98A0A8;
}
.fmm-dchip__copy b {
    display: flex; align-items: center; gap: 3px;
    font-size: 11px; line-height: 14px; font-weight: 800; color: #111827;
}
.fmm-dchip__copy em { font-style: normal; font-weight: 700; color: #009068; }

/* Chip rects on the 931×400 card, as a share of that card. */
.fmm-dchip--imei    { top: 19.31%; right: 22.63%; animation-duration: 5.2s; animation-delay: -1.4s; }
.fmm-dchip--battery { top: 40.38%; right: 6.10%;  animation-duration: 4.4s; animation-delay: -2.6s; }
.fmm-dchip--storage { top: 56.13%; right: 19.85%; min-width: 164px; padding: 8px 14px 8px 8px; gap: 8px; border-radius: 14px; animation-duration: 5.6s; animation-direction: reverse; animation-delay: -0.8s; }
.fmm-dchip--network { top: 82.63%; right: 6.12%;  animation-duration: 4.6s; animation-delay: -3.1s; }
.fmm-dchip--storage .fmm-dchip__ico { width: 32px; height: 32px; }
.fmm-dchip--storage .fmm-dchip__ico svg { width: 15px; height: 15px; }
.fmm-dchip--storage .fmm-dchip__copy small { font-size: 9px; line-height: 12px; }
.fmm-dchip--storage .fmm-dchip__copy b { font-size: 15px; line-height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .fmm-dchip { animation: none; }
}

/* --- Discover More (Figma Frame 1000004512, 1344×366) --------------------- */
/* Title line is 32px. Cards start 28px under that, which is the frame's y=60. */
.fmm-discover .fmm-section__title {
    font-size: 24px; line-height: 32px; font-weight: 700;
    letter-spacing: -.02em; color: #111827;
}
.fmm-discover .fmm-section__head { margin-bottom: 28px; }
.fmm-dgrid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px;
}
.fmm-dcard {
    display: flex; flex-direction: column; min-width: 0;
    color: #111827;
}
.fmm-dcard__media {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 1; border-radius: 12px; background: #F9FAFB;
}
.fmm-dcard__media img { width: 100%; height: 100%; object-fit: cover; }
.fmm-dcard__badge {
    position: absolute; top: 8px; left: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    height: 23px; padding: 0 6px; border-radius: 4px;
    font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0;
}
.fmm-dcard__badge--sale { background: #EF4444; color: #fff; }
.fmm-dcard__badge--hot { background: #FFCC00; color: #111827; }
.fmm-dcard__title {
    margin: 12px 0 0;
    font-size: 16px; line-height: 20px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fmm-dcard__price {
    margin-top: 8px;
    font-size: 16px; line-height: 20px; font-weight: 700;
}

/* --- Weekly deals row (Figma Frame 1000004515) ---------------------------- */
/* 570px shelf is two 273px cards plus the 24px gap between them. The panel
   takes whatever is left of the container. Arrows hang 13px off the shelf. */
.fmm-deals-section .fmm-section__title {
    font-size: 24px; line-height: 32px; font-weight: 700;
    letter-spacing: -.02em; color: #111827;
}
.fmm-deals-section .fmm-section__head { margin-bottom: 32px; }
.fmm-deals__card > .fmm-pcard { height: 100%; }

.fmm-deals {
    display: grid; grid-template-columns: minmax(0, 570px) minmax(0, 1fr);
    gap: 24px; align-items: stretch;
}
.fmm-deals:not(:has(.fmm-deals__shelf)) { grid-template-columns: minmax(0, 1fr); }

.fmm-deals__shelf { position: relative; min-width: 0; max-width: 570px; height: 375px; }
.fmm-deals__rail { height: 100%; gap: 24px; padding-bottom: 0; }
/* Grab the cards and drag. Smooth scrolling fights a live scrollLeft update,
   and snap yanks the row out from under the pointer. */
.fmm-deals__scroll {
    cursor: grab;
    scroll-behavior: auto;
}
.fmm-deals__scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
}
.fmm-deals__scroll.is-dragging,
.fmm-deals__scroll.is-dragging * { cursor: grabbing; }
.fmm-deals__rail > .fmm-deals__card { flex: 0 0 273px; height: 375px; min-width: 0; scroll-snap-align: start; }
.fmm-deals__card > * { height: 100%; }

.fmm-deals__arrow {
    position: absolute; top: 50%; z-index: 2;
    width: 32px; height: 32px; margin-top: -16px; padding: 0;
    display: grid; place-items: center;
    border: 1px solid #E5E7EB; border-radius: 50%;
    background: #fff; color: #6B7280;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 8px rgba(0, 0, 0, .05);
}
.fmm-deals__arrow--prev { left: -13px; }
.fmm-deals__arrow--next { right: -13px; }
.fmm-deals__arrow:hover { border-color: #D1D5DB; }
.fmm-deals__arrow:disabled { cursor: default; }

/* Figma's photo well is 212px inside the 375px card. The shared card sizes
   its image by aspect ratio, which at 273px wide is too tall for this row. */
.fmm-deals__card .fmm-pcard__media {
    height: 212px; aspect-ratio: auto; flex: 0 0 212px;
}
.fmm-pcard--deals {
    border-color: #F3F4F6; border-radius: 16px;
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .04);
}
.fmm-pcard--deals .fmm-pcard__meta {
    min-width: 0; color: #9CA3AF;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.fmm-pcard--deals .fmm-pcard__meta--auth { display: flex; }
.fmm-pcard--deals .fmm-pcard__meta--auth svg { flex: none; }
.fmm-pcard--deals .fmm-pcard__meta span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fmm-deals__promo {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    height: 375px; padding: 28px 0 28px 32px;
    border-radius: 32px; background: #FFBE2E;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .08);
}
.fmm-deals__top {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 16px 24px; padding-right: 32px;
}
.fmm-deals__body { flex: 1 1 auto; min-width: 0; }
.fmm-deals__title { margin: 0 0 6px; font-size: 24px; line-height: 32px; font-weight: 700; color: #111827; }
.fmm-deals__lead {
    margin: 0; max-width: 380px;
    font-size: 15px; line-height: 22px; font-weight: 400; color: #111827;
}
.fmm-deals__btn {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 124px; height: 40px; padding: 0 20px;
    border-radius: 999px; background: #fff; color: #111827;
    font-size: 14px; line-height: 20px; font-weight: 600;
}
.fmm-deals__btn:hover { background: #FFF8EB; }

.fmm-deals__strip {
    display: flex; gap: 9px; align-items: flex-end;
    margin-top: auto;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: none;
}
.fmm-deals__strip::-webkit-scrollbar { display: none; }

.fmm-dealcard {
    flex: 0 0 120px; width: 120px; height: 193px;
    display: flex; flex-direction: column;
    padding: 9px; box-sizing: border-box;
    border: 1px solid rgba(229, 231, 235, .7); border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .25);
}
.fmm-dealcard__shot {
    position: relative; display: block; overflow: hidden; flex: none;
    height: 73px; border-radius: 10px; background: #F3F4F6;
}
.fmm-dealcard__shot img { width: 100%; height: 100%; object-fit: cover; }
.fmm-dealcard__plat {
    position: absolute; top: 4px; left: 4px;
    display: inline-flex; align-items: center; gap: 3px;
    height: 16px; padding: 0 5px; border-radius: 5px;
    background: rgba(255, 255, 255, .92);
    color: #111827; font-size: 8px; font-weight: 700; line-height: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.fmm-dealcard__plat svg { width: 8px; height: 8px; }
.fmm-dealcard__body {
    display: flex; flex-direction: column; gap: 3px;
    min-height: 0; flex: 1; padding-top: 6px;
}
.fmm-dealcard__headline { display: flex; align-items: flex-start; gap: 4px; }
.fmm-dealcard__headline a { min-width: 0; flex: 1; }
.fmm-dealcard__title {
    margin: 0;
    font-size: 11px; line-height: 13px; font-weight: 700; color: #111827;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fmm-dealcard__wish {
    flex: none; width: 14px; height: 14px; margin-top: 1px; padding: 0;
    border: 0; background: transparent; color: #D1D5DB;
    display: grid; place-items: center;
}
.fmm-dealcard__wish img { width: 14px; height: 14px; display: block; }
.fmm-dealcard__chip {
    align-self: flex-start;
    padding: 1px 6px; border-radius: 4px;
    background: #F3F4F6; color: #6B7280;
    font-size: 9px; line-height: 14px; font-weight: 600;
}
.fmm-dealcard__seller {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #9CA3AF; font-size: 9px; line-height: 12px;
}
.fmm-dealcard__seller--verified {
    display: flex; align-items: center; gap: 3px; color: #6B7280;
}
.fmm-dealcard__seller--verified svg { flex: none; }
.fmm-dealcard__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-top: auto;
}
.fmm-dealcard__price { color: #111827; font-size: 14px; line-height: 18px; font-weight: 700; }
.fmm-dealcard__add {
    flex: none; width: 23px; height: 23px; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: #231F20; color: #fff;
}
.fmm-dealcard__add:hover { background: #111; }
.fmm-dealcard__add:disabled { opacity: .4; cursor: default; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .fmm-gband { grid-template-columns: 56% 44%; }
    .fmm-gband__title { font-size: 46px; line-height: 52px; }
    .fmm-gband__body { padding: 44px 40px; }
    .fmm-sband { grid-template-columns: 52% 48%; }
    .fmm-sband__title { font-size: 46px; line-height: 58px; }
    .fmm-sband__body { padding: 44px 40px; }
}

@media (max-width: 980px) {
    .fmm-hsteps__grid { grid-template-columns: 1fr; }
    .fmm-hstep + .fmm-hstep::before { display: none; }

    .fmm-gband,
    .fmm-sband { grid-template-columns: 1fr; }
    .fmm-gband__body,
    .fmm-sband__body { padding: 32px 26px; }
    .fmm-gband__title { font-size: 34px; line-height: 40px; }
    .fmm-sband__title { font-size: 32px; line-height: 40px; letter-spacing: -.02em; }
    .fmm-gband__art { padding: 24px; }

    /* Chips sit outside the 260px shot by design; stacked, that overflows. */
    .fmm-gchip--tl, .fmm-gchip--bl { left: -12px; }
    .fmm-gchip--tr, .fmm-gchip--br { right: -12px; }

    /* Cards are absolutely placed on a 748x500 stage in the design. Below this
       there is no stage to place them on, so they become a plain stack. */
    .fmm-sband__stage {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
        min-height: 0; padding: 0 26px 26px;
    }
    .fmm-fcard { position: static; }
    .fmm-fcard--pack { grid-column: span 2; }
    .fmm-sband__save { position: static; justify-self: start; grid-column: span 2; }

    /* Stacked, there is no room beside the copy for the illustrations, and
       they are decorative in every case — so they come out rather than
       overlap the text they sit next to. */
    .fmm-feat__row { flex-direction: column; }
    .fmm-feat__card--private,
    .fmm-feat__card--global { flex: 1 1 auto; }
    .fmm-feat__card--verify,
    .fmm-feat__card--device { padding: 32px 26px; flex: 1 1 auto; }
    .fmm-feat__body { max-width: none; }
    .fmm-feat__art { display: none; }
    .fmm-feat__art--verify,
    .fmm-feat__art--device {
        display: block; position: relative; min-height: 0; height: auto; margin-top: 20px;
    }
    .fmm-feat__art--verify { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .fmm-feat__art--verify .fmm-feat__shoe,
    .fmm-feat__art--verify .fmm-aimatch,
    .fmm-feat__art--verify .fmm-status {
        position: relative; top: auto; right: auto; left: auto; transform: none; margin: 0;
    }
    .fmm-feat__art--verify .fmm-feat__shoe { width: 120px; margin: 0 0 -36px 8px; z-index: 2; }
    .fmm-feat__art--verify .fmm-aimatch { width: min(280px, 100%); }
    .fmm-feat__art--device {
        display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 8px 12px; align-items: center;
    }
    .fmm-feat__art--device .fmm-feat__phone {
        position: relative; top: auto; right: auto; grid-column: 2; grid-row: 1 / span 4;
        width: 108px; height: auto; aspect-ratio: 201.7 / 394.5; margin: 0;
    }
    .fmm-feat__art--device .fmm-dchip--imei,
    .fmm-feat__art--device .fmm-dchip--battery,
    .fmm-feat__art--device .fmm-dchip--storage,
    .fmm-feat__art--device .fmm-dchip--network {
        position: relative; top: auto; right: auto; grid-column: 1; animation: none;
    }
    /* The desktop height is fixed. Stacked, the cards follow their text.
       min-height: 0 would let the basis-0 device card collapse. */
    .fmm-feat__card--global,
    .fmm-feat__card--device { height: auto; min-height: auto; }
    .fmm-feat__title { font-size: 24px; line-height: 31px; white-space: normal; }

    .fmm-deals { grid-template-columns: minmax(0, 1fr); }
    .fmm-deals__promo { height: auto; min-height: 360px; }

}

@media (max-width: 640px) {
    .fmm-hsteps__title { font-size: 26px; }
    .fmm-gband__title { font-size: 28px; line-height: 34px; }
    .fmm-sband__title { font-size: 26px; line-height: 33px; }

    .fmm-dgrid {
        display: flex; gap: 16px; overflow-x: auto;
        scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .fmm-dgrid::-webkit-scrollbar { display: none; }
    .fmm-dcard { flex: 0 0 220px; scroll-snap-align: start; }
    .fmm-deals__arrow { display: none; }
    .fmm-deals__top { align-items: flex-start; }
    .fmm-deals__lead { max-width: none; }
    .fmm-deals__promo { padding-top: 24px; padding-bottom: 20px; }

    /* The chips are decoration; below this width they cover the model. */
    .fmm-gchip { display: none; }
    .fmm-gband__shot > img { width: 210px; height: 290px; }
    .fmm-sband__stage { grid-template-columns: 1fr; }
    .fmm-fcard--pack, .fmm-sband__save { grid-column: span 1; }
    .fmm-sband__stagerow + .fmm-sband__stagerow::before { content: none; }
}

/* --- Second social seller row (Figma 1:45471) ----------------------------- */
.fmm-lux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }

.fmm-lux__card {
    position: relative;
    display: flex; flex-direction: column; gap: 16px;
    padding: 17px;
    border: 1px solid #F3F4F6; border-radius: 16px; background: #fff;
}

.fmm-lux__shot {
    position: relative; display: block; overflow: hidden;
    border-radius: 12px; background: #F9FAFB;
    aspect-ratio: 1 / 1;
}
.fmm-lux__shot img { width: 100%; height: 100%; object-fit: cover; }

.fmm-lux__badge {
    position: absolute; top: 11px; left: 7px;
    padding: 2.5px 8px; border-radius: 4px;
    font-size: 10px; line-height: 15px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
}
.fmm-lux__badge.is-yellow { background: #FC0;  color: #111827; }
.fmm-lux__badge.is-dark   { background: #000;  color: #fff; }

.fmm-lux__heart {
    position: absolute; top: 7px; right: 7px;
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; color: #6B7280;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05));
}

.fmm-lux__body { display: flex; flex-direction: column; gap: 4px; }

.fmm-lux__brand { font-size: 12px; line-height: 16px; font-weight: 500; color: #6B7280; }

.fmm-lux__title {
    display: block; overflow: hidden;
    font-size: 16px; line-height: 24px; font-weight: 500; color: #111827;
    /* One line, as in the design — the titles are long enough to wrap to three
       otherwise and the four cards stop lining up. */
    white-space: nowrap; text-overflow: ellipsis;
}
.fmm-lux__title:hover { color: var(--fmm-yellow-dark); }

.fmm-lux__price { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.fmm-lux__price b { font-size: 18px; line-height: 28px; font-weight: 700; color: #111827; }
.fmm-lux__price s { font-size: 14px; line-height: 20px; color: #9CA3AF; }

@media (max-width: 1100px) {
    .fmm-lux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 640px) {
    .fmm-lux { gap: 12px; }
    .fmm-lux__card { padding: 12px; gap: 12px; }
    .fmm-lux__title { font-size: 14px; }
    .fmm-lux__price b { font-size: 16px; }
}

/* ==========================================================================
   Feature explainers — Private Listings for U.S. Social Sellers
   Figma: node 1:46925. 256px rail + 1184px content on a 1440 frame.
   ========================================================================== */

.fmm-fpage { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 32px; align-items: start; }
.fmm-fpage__main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }

/* Every section sits on the same white card. */
.fmm-fcardbox {
    padding: 49px;
    border: 1px solid #F9FAFB; border-radius: 24px; background: #fff;
    box-shadow: 0 4px 40px rgba(0, 0, 0, .03);
}

/* --- Explore Features rail ------------------------------------------------ */
.fmm-fnav { position: sticky; top: 24px; }
.fmm-fnav__kicker {
    display: block; padding: 0 12px 12px;
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: #9CA3AF;
}
.fmm-fnav__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }

.fmm-fnav__row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: #374151;
}
.fmm-fnav__row:hover { background: #F9FAFB; }
.fmm-fnav__row.is-active { background: #FEF9C3; color: #1A1A1A; font-weight: 700; }
.fmm-fnav__row.is-soon { color: #9CA3AF; cursor: default; }
.fmm-fnav__row.is-soon:hover { background: transparent; }

.fmm-fnav__ico { display: grid; place-items: center; width: 20px; color: inherit; }
.fmm-fnav__soon {
    margin-left: auto; padding: 1px 7px; border-radius: 999px;
    background: #F3F4F6; color: #9CA3AF;
    font-size: 10px; font-style: normal; font-weight: 700;
}

/* --- Shared type ---------------------------------------------------------- */
.fmm-pleyebrow {
    display: block; margin-bottom: 13px;
    font-size: 14px; font-weight: 700; letter-spacing: .7px;
    text-transform: uppercase; color: #FFC72C;
}
.fmm-plh2 { margin: 0 0 6px; font-size: 36px; line-height: 40px; font-weight: 800; color: #1A1A1A; }
.fmm-plsub { margin: 0; font-size: 16px; line-height: 24px; color: #6B7280; }
.fmm-plhead { max-width: 672px; margin: 0 auto 56px; text-align: center; }
.fmm-plsub--left { margin-bottom: 18px; }

.fmm-plbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 24px; border-radius: 12px;
    background: #FFC72C; color: #000;
    font-size: 16px; line-height: 24px; font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(234, 179, 8, .2), 0 4px 6px -4px rgba(234, 179, 8, .2);
}
.fmm-plbtn:hover { background: #F0B81F; }
.fmm-plbtn--ghost {
    background: #fff; color: #1A1A1A;
    border: 1px solid #E5E7EB; box-shadow: none; font-weight: 600;
}
.fmm-plbtn--ghost:hover { background: #F9FAFB; }
.fmm-plbtn--dark { background: #000; color: #fff; box-shadow: none; padding: 14px 24px; }
.fmm-plbtn--dark:hover { background: #1A1A1A; }

/* --- Hero ----------------------------------------------------------------- */
/* Figma splits the hero 543/447, not 50/50. At 50/50 the body came out 442px
   and the two CTAs wrapped onto separate lines. */
.fmm-plhero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.21fr 1fr; gap: 24px; align-items: center; }
.fmm-plhero::before {
    content: ""; position: absolute; top: -128px; right: -128px;
    width: 384px; height: 384px; border-radius: 50%;
    background: #FEF9C3; filter: blur(32px); opacity: .5;
}
.fmm-plhero__body { position: relative; z-index: 2; }

.fmm-plpill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 28px; padding: 4px 12px; margin-bottom: 24px; border-radius: 999px;
    background: #FEF9C3; color: #1F2937;
    font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.fmm-plhero__title { margin: 0 0 24px; max-width: 463px; font-size: 45px; line-height: 45px; font-weight: 700; color: #111827; }
.fmm-plhero__lead { margin: 0 0 32px; max-width: 446px; font-size: 16px; line-height: 26px; color: #4B5563; }
.fmm-plhero__cta { display: flex; flex-wrap: wrap; gap: 16px; }

.fmm-plhero__art { position: relative; z-index: 2; min-height: 420px; }
.fmm-plcard {
    position: absolute; display: block;
    padding: 12px; border-radius: 16px; background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.fmm-plcard b  { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #000; }
.fmm-plcard em { display: block; font-size: 10px; font-style: normal; color: #9CA3AF; }
.fmm-plcard u  { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; text-decoration: none; color: #1A1A1A; }
.fmm-plcard__shot { display: block; height: 128px; border-radius: 12px; overflow: hidden; }
.fmm-plcard__shot img { width: 100%; height: 100%; object-fit: cover; }

.fmm-plcard--post     { top: 0;    left: 0;   width: 256px; transform: rotate(-6deg); }
.fmm-plcard--listing  { top: 86px; right: 0;  width: 288px; padding: 18px; border: 2px solid #FFC72C; }
.fmm-plcard--verified { bottom: 0; left: 28px; width: 240px; transform: rotate(3deg); }

.fmm-plcard--listing { transform: rotate(4deg); }
.fmm-plcard--listing .fmm-plcard__shot { height: 120px; margin-top: 8px; }
.fmm-plcard--listing b { font-size: 14px; }

.fmm-plcard__top { display: flex; align-items: center; justify-content: space-between; }
.fmm-plcard__tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 999px;
    background: #000; color: #FFC72C;
    font-size: 10px; font-style: normal; font-weight: 700; text-transform: uppercase;
}
.fmm-plcard__res { font-size: 10px; font-style: normal; font-weight: 700; color: #059669; }
.fmm-plcard__ok {
    display: flex; align-items: center; gap: 4px; margin-top: 8px;
    font-size: 12px; font-weight: 700; color: #000;
}

/* --- Six steps ------------------------------------------------------------ */
.fmm-plphase + .fmm-plphase { margin-top: 28px; }
.fmm-plarrow {
    display: grid; place-items: center; width: 40px; height: 40px;
    margin: 28px auto 0; border: 1px solid #E5E7EB; border-radius: 50%;
    background: #fff; color: #9CA3AF;
}
.fmm-plphase__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.fmm-plphase__n {
    display: grid; place-items: center; flex: 0 0 44px;
    width: 44px; height: 44px; border-radius: 12px;
    background: #1A1A1A; color: #FFC72C;
    font-size: 15px; font-weight: 800;
}
.fmm-plphase__head b  { display: block; font-size: 18px; font-weight: 800; color: #1A1A1A; }
.fmm-plphase__head em {
    display: block; font-size: 11.5px; font-style: normal; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #9CA3AF;
}

.fmm-plsteps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px; border-radius: 18px; background: #FBF6E9; align-items: start; }
.fmm-plstep {
    position: relative; display: flex; flex-direction: column;
    padding: 22px; border-radius: 14px; background: #fff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .05);
}
.fmm-plstep__n {
    position: absolute; top: -12px; left: -12px;
    display: grid; place-items: center; width: 28px; height: 28px;
    border-radius: 50%; background: #FFC72C;
    font-size: 13px; font-weight: 800; color: #1A1A1A;
}
.fmm-plstep__title { margin: 8px 0 6px; font-size: 17px; line-height: 24px; font-weight: 800; color: #1A1A1A; }
.fmm-plstep__lead { margin: 0 0 16px; font-size: 13.5px; line-height: 21px; color: #6B7280; }

/* Drawn mock-ups inside each step. */
.fmm-plmock {
    display: flex; flex-direction: column; gap: 8px; margin-top: auto;
    padding: 12px; border: 1px solid #F3F4F6; border-radius: 12px; background: #fff;
}
.fmm-plmock__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fmm-plmock--post .fmm-plmock__row:first-child { justify-content: flex-start; }
.fmm-plmock__row b  { display: block; font-size: 12px; font-weight: 700; color: #1A1A1A; }
.fmm-plmock__row em { display: block; font-size: 10.5px; font-style: normal; color: #9CA3AF; }
.fmm-plmock__row u  { font-size: 14px; font-weight: 800; text-decoration: none; color: #1A1A1A; }

.fmm-plmock__av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.fmm-plmock__shot { display: block; height: 96px; border-radius: 8px; overflow: hidden; background: #F3F4F6; }
.fmm-plmock__shot img { width: 100%; height: 100%; object-fit: cover; }
.fmm-plmock__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; color: #1A1A1A; }
.fmm-plmock__acts { display: inline-flex; align-items: center; gap: 10px; color: #1A1A18; opacity: .75; }
.fmm-plmock__fb { margin-left: auto; flex: none; display: grid; place-items: center; }

.fmm-plmock__url {
    padding: 8px 10px; border-radius: 8px; background: #F3F4F6;
    font-size: 11px; color: #4B5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Step 2: dark panel, per the Figma design */
.fmm-plmock--link { background: #1A1A18; border-color: #1A1A18; }
.fmm-plmock--link .fmm-plmock__url {
    display: flex; align-items: center; gap: 8px;
    background: #333331; color: #D1D5DB;
}
.fmm-plmock--link .fmm-plmock__url svg { flex: none; }
.fmm-plmock--link .fmm-plmock__busy { color: #FFC72C; }
.fmm-plmock--link .fmm-plmock__busy i { width: 7px; height: 7px; border: 0; background: #FFC72C; animation: none; }
.fmm-plmock__bar { height: 6px; border-radius: 4px; background: #3A3A38; overflow: hidden; }
.fmm-plmock__bar b { display: block; width: 62%; height: 100%; border-radius: 4px; background: #FFC72C; }
.fmm-plmock__pr { display: flex; align-items: center; gap: 8px; }
.fmm-plmock__pr svg { flex: none; }
.fmm-plmock__trk, .fmm-plmock__aim { display: flex !important; align-items: center; gap: 6px; }
.fmm-plmock__trk svg, .fmm-plmock__aim svg { flex: none; }
.fmm-plmock--ship .fmm-plmock__line b.is-chip {
    padding: 4px 10px; border-radius: 999px; background: #F3F4F6;
    font-size: 10.5px; color: #374151;
}
.fmm-plmock--verify .fmm-plmock__line { background: #F6F7F1; border-radius: 8px; padding: 7px 9px; }
.fmm-plmock__busy { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #B4780A; }
.fmm-plmock__busy i {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid #FDE68A; border-top-color: #FFC72C;
}

.fmm-plmock__pill {
    padding: 3px 8px; border-radius: 999px; background: #000; color: #FFC72C;
    font-size: 9.5px; font-style: normal; font-weight: 800; text-transform: uppercase;
}
.fmm-plmock__ref { font-size: 10.5px; font-style: normal; color: #9CA3AF; }
.fmm-plmock__ok {
    padding: 3px 8px; border-radius: 999px; background: #D1FAE5; color: #047857;
    font-size: 10px; font-style: normal; font-weight: 700;
}

.fmm-plmock__line { display: flex; align-items: center; justify-content: space-between; }
.fmm-plmock__line em { font-size: 11.5px; font-style: normal; color: #9CA3AF; }
.fmm-plmock__line b  { font-size: 12px; font-weight: 700; color: #1A1A1A; }
.fmm-plmock__line b.is-pending { color: #B4780A; }
.fmm-plmock__line b.is-ok { color: #059669; }

.fmm-plmock__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fmm-plmock__arr {
    position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%) rotate(-90deg);
    display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: #fff; color: #9CA3AF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.fmm-plmock__pair > span { display: block; }
.fmm-plmock__pair i {
    display: block; margin-bottom: 4px;
    font-size: 9px; font-style: normal; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: #9CA3AF;
}
.fmm-plmock__pair img { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; }

/* --- The locked listing page ---------------------------------------------- */
.fmm-pllock { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.fmm-pllist { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.fmm-pllist li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 20px; color: #374151; }
.fmm-pllist img, .fmm-pllist svg { margin-top: 3px; flex: 0 0 15px; }
.fmm-pllist b { font-weight: 700; }

.fmm-pldemo {
    position: relative; padding: 24px;
    border: 1px solid #F3F4F6; border-radius: 24px; background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.fmm-pldemo__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fmm-pldemo__tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; background: #000; color: #FFC72C;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.fmm-pldemo__res {
    padding: 6px 12px; border-radius: 999px; background: #D1FAE5; color: #047857;
    font-size: 12px; font-weight: 700;
}

.fmm-pldemo__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; height: 192px; }
.fmm-pldemo__main { display: block; min-height: 0; border-radius: 12px; overflow: hidden; }
.fmm-pldemo__main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-pldemo__side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
.fmm-pldemo__side i { display: block; min-height: 0; border-radius: 12px; overflow: hidden; }
.fmm-pldemo__side img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fmm-pldemo__title { margin: 16px 0 4px; font-size: 20px; line-height: 28px; font-weight: 700; color: #1A1A1A; }
.fmm-pldemo__meta { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: #9CA3AF; }

.fmm-pldemo__seller {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 13px; border-top: 1px solid #F3F4F6;
}
.fmm-pldemo__seller > span { display: flex; align-items: center; gap: 8px; }
.fmm-pldemo__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #E5E7EB; color: #6B7280; }
.fmm-pldemo__seller em { display: block; font-size: 12px; font-style: normal; color: #9CA3AF; }
.fmm-pldemo__seller b  { display: block; font-size: 14px; font-weight: 600; color: #1A1A1A; }
.fmm-pldemo__seller u  { font-size: 24px; font-weight: 800; text-decoration: none; color: #1A1A1A; }

.fmm-pldemo__buy {
    display: block; margin-top: 16px; padding: 12px; border-radius: 12px;
    background: #FFC72C; color: #000;
    font-size: 16px; font-weight: 700; text-align: center;
}

/* --- Purchase tracker ----------------------------------------------------- */
.fmm-pltrack {
    position: relative;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px;
    margin: 0; padding: 0; list-style: none;
}
/* The rule the dots sit on. Inset by half a column so it never pokes out
   past the first and last steps. */
.fmm-pltrack::before {
    content: ""; position: absolute; top: 23px; left: 10%; right: 10%;
    height: 2px; background: #E5E7EB;
}
.fmm-pltrack__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fmm-pltrack__dot {
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: #F3F4F6; color: #9CA3AF;
}
.fmm-pltrack__step.is-done .fmm-pltrack__dot { background: #000; color: #FFC72C; }
.fmm-pltrack__dot svg { max-width: 20px; max-height: 20px; }
.fmm-pltrack__step.is-now .fmm-pltrack__dot  { background: #FFC72C; color: #000; box-shadow: 0 0 0 4px #FEF9C3; }

.fmm-pltrack__step b  { margin-top: 12px; font-size: 14px; line-height: 20px; font-weight: 700; color: #1A1A1A; }
.fmm-pltrack__step em { font-size: 12px; line-height: 16px; font-style: normal; color: #9CA3AF; }
.fmm-pltrack__step.is-now em { color: #059669; font-weight: 600; }
.fmm-pltrack__step.is-todo b { color: #9CA3AF; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .fmm-fpage { grid-template-columns: 1fr; }
    .fmm-fnav { position: static; }
    .fmm-fnav__list { flex-direction: row; flex-wrap: wrap; }
    .fmm-fcardbox { padding: 32px 26px; }
    .fmm-plhero, .fmm-pllock { grid-template-columns: 1fr; gap: 32px; }
    .fmm-plhero__title { font-size: 34px; line-height: 38px; }
    .fmm-plh2 { font-size: 28px; line-height: 34px; }

    /* The hero cards are absolutely placed against a 420px stage; stacked there
       is no stage, so they become a plain row. */
    .fmm-plhero__art { min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .fmm-plcard { position: static; width: auto; transform: none; }

    .fmm-pltrack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .fmm-pltrack::before { display: none; }
}

@media (max-width: 640px) {
    .fmm-plsteps { grid-template-columns: 1fr; }
    .fmm-plhero__art { grid-template-columns: 1fr; }
    .fmm-pltrack { grid-template-columns: 1fr; }
    .fmm-pldemo__grid { height: 150px; }
}

/* ==========================================================================
   Feature explainer — AI-Powered Item Matching (Figma 1:47626)
   Reuses the shell from the private-listings page: .fmm-fpage, .fmm-fcardbox,
   .fmm-plhead, .fmm-pleyebrow, .fmm-plh2, .fmm-plsub, .fmm-plbtn.
   ========================================================================== */

/* --- Hero (dark) ---------------------------------------------------------- */
.fmm-amhero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center;
    padding: 49px;
    border-radius: 24px;
    background: linear-gradient(180deg, #FDFDFD 0%, #F4F6F8 100%);
    border: 1px solid #F3F4F6;
    color: #1A1A1A;
}
.fmm-amhero__body { position: relative; z-index: 2; }

.fmm-ampill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; margin-bottom: 20px; border-radius: 999px;
    background: #FDF3D8; color: #1A1A1A;
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.fmm-ampill svg { flex: none; }

.fmm-amhero__title {
    margin: 0 0 18px;
    font-size: 42px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; color: #1A1A1A;
}
.fmm-amhero__title em { font-style: normal; color: #FFC800; }

.fmm-amhero__lead { margin: 0 0 28px; max-width: 480px; font-size: 16px; line-height: 26px; color: #6B7280; }
.fmm-amhero__cta .fmm-plbtn--dark svg { margin-left: 6px; vertical-align: -1px; }
.fmm-amhero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.fmm-plbtn--ondark {
    background: rgba(255, 255, 255, .08); color: #fff;
    border: 1px solid rgba(255, 255, 255, .2); box-shadow: none; font-weight: 600;
}
.fmm-plbtn--ondark:hover { background: rgba(255, 255, 255, .16); }

.fmm-amstats {
    display: flex; align-items: center; gap: 28px;
    margin: 32px 0 0; padding-top: 26px;
    border-top: 1px solid #E5E7EB;
}
.fmm-amstats > div { position: relative; padding-right: 28px; }
.fmm-amstats > div + div::before {
    content: ""; position: absolute; left: -28px; top: 4px; bottom: 4px;
    width: 1px; background: #E5E7EB;
}
.fmm-amstats dt { font-size: 26px; font-weight: 800; color: #1A1A1A; }
.fmm-amstats dd { margin: 2px 0 0; font-size: 12.5px; color: #6B7280; }

.fmm-amhero__art { position: relative; z-index: 2; min-height: 340px; }
.fmm-amshot {
    position: absolute; display: block; overflow: hidden;
    border-radius: 16px; border: 6px solid #fff;
    box-shadow: 0 22px 45px -18px rgba(15, 23, 42, .35);
}
.fmm-amshot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-amshot--a { top: 0;    left: 4%;  width: 56%; height: 280px; }
.fmm-amshot--b { bottom: 0; right: 0;  width: 58%; height: 230px; }

.fmm-amchip {
    position: absolute; z-index: 3;
    padding: 9px 13px; border-radius: 12px; background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.fmm-amchip b  { display: block; font-size: 11.5px; font-weight: 800; color: #1A1A1A; }
.fmm-amchip em { display: block; font-size: 10px; font-style: normal; color: #6B7280; }
.fmm-amchip--warn { top: 42%; left: -4%; border-left: 3px solid #F59E0B; }
.fmm-amchip--ok   { bottom: 8%; left: 6%; border-left: 3px solid #059669; }
.fmm-amchip--i { display: flex; align-items: center; gap: 9px; border-left: 0; }
.fmm-amchip--i > svg { flex: none; }
.fmm-amhero__art .fmm-amchip--warn { top: 6%; left: auto; right: -3%; }
.fmm-amhero__art .fmm-amchip--ok { bottom: 26%; left: -5%; }

/* --- Side-by-side comparison ---------------------------------------------- */
.fmm-amcompare { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 0; align-items: stretch; border-radius: 16px; overflow: hidden; border: 1px solid #F3F4F6; }

.fmm-ampanel {
    display: flex; flex-direction: column; gap: 6px;
    padding: 24px; background: #F8F9FB;
}
.fmm-ampanel__tag {
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #9CA3AF;
}
.fmm-ampanel__shot { position: relative; display: block; height: 200px; border-radius: 12px; overflow: hidden; }
.fmm-ampanel__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-ampanel__flag {
    position: absolute; right: 12px; bottom: 12px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(245, 158, 11, .95); color: #1A1A1A;
    font-size: 10.5px; font-style: normal; font-weight: 800;
}
.fmm-ampanel b  { font-size: 15px; font-weight: 700; color: #1A1A1A; }
.fmm-ampanel em { font-size: 12.5px; font-style: normal; color: #6B7280; }

.fmm-amscore { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px 20px; background: #0A0A0A; color: #fff; }
.fmm-amscore__ico {
    display: grid; place-items: center;
    width: 62px; height: 62px; border-radius: 50%;
    background: #FFC800; color: #000; margin-bottom: 4px;
}
.fmm-amscore__label {
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #9CA3AF; text-align: center; letter-spacing: .18em;
}
.fmm-amscore__dial { color: #fff; }
.fmm-amscore__dial b { font-size: 46px; font-weight: 800; }
.fmm-amscore__dial i { font-style: normal; font-size: 20px; font-weight: 800; margin-left: 2px; }
.fmm-amscore__note {
    padding: 7px 16px; border-radius: 999px;
    background: rgba(255, 200, 0, .14); color: #FFC800;
    font-size: 12px; font-weight: 700; text-align: center;
}

/* --- What can be compared ------------------------------------------------- */
.fmm-amgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fmm-amcard {
    padding: 22px; border: 1px solid #F3F4F6; border-radius: 16px; background: #F9FAFB;
}
.fmm-amcard__ico {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px;
    background: #FDF3D8; color: #1A1A1A;
}
.fmm-amcard b { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 800; color: #1A1A1A; }
.fmm-amcard p { margin: 0; font-size: 13.5px; line-height: 20px; color: #6B7280; }

/* --- Honest verdicts ------------------------------------------------------ */
.fmm-amverdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fmm-amverdict {
    padding: 24px; border: 1px solid #E5E7EB; border-radius: 16px; background: #F7F8FA;
}
.fmm-amverdict.is-ok   { background: #F2FBF5; border-color: #C9ECD5; }
.fmm-amverdict.is-warn { background: #FFFBEA; border-color: #F2E0A0; }
.fmm-amverdict__ico { display: block; margin-bottom: 16px; }
.fmm-amverdict b { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 800; color: #1A1A1A; }
.fmm-amverdict p { margin: 0 0 14px; font-size: 13.5px; line-height: 21px; color: #6B7280; }
.fmm-amverdict em {
    display: inline-block; padding: 6px 13px; border-radius: 999px;
    font-size: 12px; font-style: normal; font-weight: 700;
    background: #E5E7EB; color: #4B5563;
}
.fmm-amverdict.is-ok em   { background: #DCFCE7; color: #15803D; }
.fmm-amverdict.is-warn em { background: #FDF3C7; color: #A16207; }

/* --- The process (dark) --------------------------------------------------- */
.fmm-amprocess {
    padding: 49px; border-radius: 24px;
    background: #0A0A0A;
    color: #fff;
}
.fmm-plhead--ondark .fmm-plh2  { color: #fff; }
.fmm-plhead--ondark .fmm-plsub { color: #9CA3AF; }

.fmm-amsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fmm-amstep { display: flex; flex-direction: column; }
.fmm-amstep__shot { display: block; height: 132px; margin-bottom: 14px; border-radius: 12px; overflow: hidden; }
.fmm-amstep__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-amstep__n {
    font-size: 20px; font-weight: 800; letter-spacing: .02em; color: #FFC800;
}
.fmm-amstep b { display: block; margin: 6px 0 6px; font-size: 15.5px; font-weight: 800; color: #fff; }
.fmm-amstep p { margin: 0; font-size: 13px; line-height: 20px; color: #9CA3AF; }

/* --- Example report ------------------------------------------------------- */
.fmm-amreport { text-align: left; }
.fmm-amreport .fmm-plsub { max-width: 520px; }
.fmm-amreport .fmm-plbtn { margin-top: 18px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .fmm-amhero { grid-template-columns: 1fr; padding: 32px 26px; }
    .fmm-amhero__title { font-size: 32px; line-height: 38px; }
    .fmm-amprocess { padding: 32px 26px; }

    /* The hero shots are absolutely placed against a 340px stage; stacked there
       is no stage, so they become a plain pair. */
    .fmm-amhero__art { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .fmm-amshot { position: static; width: auto; height: 160px; }
    .fmm-amchip { position: static; grid-column: span 2; }

    .fmm-amcompare { grid-template-columns: 1fr; }
    .fmm-amscore { width: auto; }
    .fmm-amgrid, .fmm-amsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmm-amverdicts { grid-template-columns: 1fr; }
    .fmm-amstats { flex-wrap: wrap; gap: 20px; }
}

@media (max-width: 640px) {
    .fmm-amgrid, .fmm-amsteps { grid-template-columns: 1fr; }
    .fmm-amhero__art { grid-template-columns: 1fr; }
    .fmm-amchip { grid-column: span 1; }
    .fmm-amhero__title { font-size: 27px; line-height: 33px; }
}

/* ==========================================================================
   Feature explainers 1, 2 and 5 — Device Verification, Luxury Authentication,
   Detailed Inspection. All three reuse the shell built for private-listings:
   .fmm-fpage, .fmm-fcardbox, .fmm-plhead, .fmm-pleyebrow, .fmm-plh2,
   .fmm-plsub, .fmm-plbtn.
   ========================================================================== */

.fmm-plhead--left { max-width: none; margin-left: 0; text-align: left; }

/* --- Detailed Inspection (Figma 1:48130) ---------------------------------- */
.fmm-inhero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.fmm-plpill svg { margin-right: 8px; vertical-align: -2px; }
.fmm-inhero__cta .fmm-plbtn svg { margin-left: 6px; vertical-align: -1px; }
.fmm-fcardbox--tint { background: #F4F6F8; }
.fmm-inhero__title {
    margin: 0 0 16px;
    font-size: 52px; line-height: 56px; font-weight: 800;
    letter-spacing: -1.5px; color: #111827;
}
.fmm-inhero__title em { font-style: normal; color: #FBBF24; }
.fmm-inhero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

.fmm-inhero__art { position: relative; min-height: 400px; }
.fmm-inshot { position: absolute; display: block; border-radius: 14px; overflow: hidden; background: #F3F4F6; border: 6px solid #fff; box-shadow: 0 20px 44px -16px rgba(15, 23, 42, .3); }
.fmm-inshot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-inshot--sub  { top: 0; right: 0; width: 66%; height: 215px; transform: rotate(3deg); }
.fmm-inshot--main { bottom: 46px; left: 4%; width: 62%; height: 205px; transform: rotate(-5deg); z-index: 2; }

.fmm-inflag {
    position: absolute; left: 12px; bottom: 12px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(245, 158, 11, .95); color: #1A1A1A;
    font-size: 10.5px; font-style: normal; font-weight: 800;
}

.fmm-incomplete {
    position: absolute; top: -8px; left: -6px; z-index: 3;
    display: flex; flex-direction: column; gap: 7px;
    padding: 14px 16px; border-radius: 14px;
    background: #fff; box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}
.fmm-incomplete b {
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #1A1A1A;
}
.fmm-incomplete em {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-style: normal; color: #15803D; font-weight: 600;
}
.fmm-incomplete em svg { flex: none; }
.fmm-incomplete em.is-issue { color: #B45309; }
.fmm-inflag--float {
    position: absolute; right: -6px; bottom: 28px; left: auto; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    background: #FFC800; box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
}

.fmm-ingallery { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.fmm-ingallery__main {
    position: relative; display: block;
    height: 380px; border-radius: 16px; overflow: hidden; background: #F3F4F6;
}
.fmm-ingallery__main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-ingallery__count {
    position: absolute; left: 14px; bottom: 14px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(0, 0, 0, .7); color: #fff;
    font-size: 11px; font-weight: 700; text-decoration: none;
}
.fmm-inflag--spot {
    left: 34%; top: 44%; bottom: auto;
    display: inline-flex; align-items: center; gap: 7px;
    background: #FFC800;
}
.fmm-inflag--spot u {
    width: 9px; height: 9px; border-radius: 50%;
    background: #fff; border: 2px solid #1A1A1A; box-sizing: border-box;
}
.fmm-ingallery__zoom {
    position: absolute; right: 14px; bottom: 14px;
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 50%; background: #fff; color: #0D0D0D;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .22);
}

.fmm-inthumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fmm-inthumb:last-child { grid-column: span 2; }
.fmm-inthumb {
    position: relative; display: block; min-height: 0;
    border-radius: 12px; overflow: hidden; background: #F3F4F6;
    border: 2px solid transparent;
}
.fmm-inthumb.is-active { border-color: #FBBF24; }
.fmm-inthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-inthumb em {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 4px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .6));
    color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700;
}

.fmm-inreport { border: 1px solid #F3F4F6; border-radius: 16px; overflow: hidden; }
.fmm-inreport__top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 24px; background: #0A0A0A;
}
.fmm-inreport__top b  { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #FFC800; }
.fmm-inreport__top em { display: block; font-size: 19px; font-weight: 800; font-style: normal; color: #fff; }
.fmm-inreport__flag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    background: #FFC800; color: #1A1A1A;
    font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap;
}
.fmm-inreport__flag.is-pass { background: #D1FAE5; color: #047857; }

.fmm-inspecs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0; margin: 0; padding: 0;
}
.fmm-inspecs > div {
    padding: 17px 24px; border-bottom: 1px solid #F3F4F6; border-right: 1px solid #F3F4F6;
}
.fmm-inspecs > div:nth-child(4n) { border-right: 0; }
.fmm-inspecs dt {
    margin-bottom: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #9CA3AF;
}
.fmm-inspecs dd { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 700; color: #1A1A1A; }
.fmm-inspecs dd.is-ok     { color: #059669; }
.fmm-inspecs dd.is-warn   { color: #B4780A; }
.fmm-inspecs dd.is-muted  { color: #9CA3AF; font-weight: 500; }

.fmm-ingrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fmm-incard { padding: 18px; border: 1px solid #F3F4F6; border-radius: 14px; background: #F9FAFB; }
.fmm-incard__tick { display: block; margin-bottom: 12px; color: #FFC72C; }
.fmm-incard__tick svg { display: block; }
.fmm-incard b { display: block; margin-bottom: 5px; font-size: 14.5px; font-weight: 800; color: #1A1A1A; }
.fmm-incard p { margin: 0; font-size: 12.5px; line-height: 19px; color: #6B7280; }

.fmm-inprocess { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fmm-inproc {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 22px 16px; border-radius: 14px; background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05); text-align: center;
}
.fmm-inproc__shot { display: grid; place-items: center; height: 92px; }
.fmm-inproc__shot img { display: block; max-width: 100%; max-height: 92px; width: auto; height: auto; border-radius: 10px; }
.fmm-inproc__n {
    display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; background: #FFC800;
    font-size: 12.5px; font-weight: 800; color: #1A1A1A;
}
.fmm-inproc b { margin-top: 4px; font-size: 15px; font-weight: 800; color: #1A1A1A; }

/* --- Device Verification (Figma 1:45744) ---------------------------------- */
.fmm-dvhero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.fmm-dvhero__title {
    margin: 0 0 16px;
    font-size: 46px; line-height: 52px; font-weight: 800;
    letter-spacing: -1.2px; color: #111827;
}
.fmm-dvhero .fmm-plbtn { margin-top: 24px; }

.fmm-dvhero__art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 260px; }
.fmm-dvshot { display: block; height: 240px; border-radius: 16px; overflow: hidden; background: #F3F4F6; }
.fmm-dvshot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-dvhero__art .fmm-amchip { position: static; }
/* Figma hero: one photo, chips floating over its edges. */
.fmm-dvhero__art--single { grid-template-columns: 1fr; }
.fmm-dvhero__art--single .fmm-dvshot { height: 300px; }
.fmm-dvhero__art--single .fmm-dvchip { position: absolute; }
.fmm-dvchip--a { top: 28%; left: -18px; bottom: auto; right: auto; }
.fmm-dvchip--b { top: auto; left: auto; bottom: 14%; right: -14px; }
.fmm-dvchip { display: flex; align-items: center; gap: 8px; }
.fmm-dvchip.fmm-amchip--ok, .fmm-dvchip.fmm-amchip--warn { border-left: 0; }
.fmm-dvchip > svg { width: 26px; height: 26px; flex: none; }

.fmm-dvhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.fmm-dvhead .fmm-plh2 { margin: 0; }

.fmm-dvdevices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.fmm-dvdevice {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px 12px; border: 1px solid #F3F4F6; border-radius: 14px; background: #F9FAFB;
    font-size: 13.5px; font-weight: 700; color: #1A1A1A; text-align: center;
}
.fmm-dvdevice i { display: grid; place-items: center; width: 44px; height: 44px; color: #9CA3AF; }

.fmm-dvgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fmm-dvcard { padding: 22px; border: 1px solid #F3F4F6; border-radius: 16px; background: #F9FAFB; }
.fmm-dvcard--iconed { display: flex; gap: 16px; align-items: flex-start; }
.fmm-dvcard__ico {
    display: grid; place-items: center; flex-shrink: 0;
    width: 47px; height: 47px; border-radius: 16px;
    background: #fff; border: 1px solid #F3F4F6; color: #374151;
}
.fmm-dvcard__ico svg { width: 100%; height: 100%; }
/* Sample report lightbox on the device-verification page. */
.fmm-dvreport-lightbox {
    position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
    padding: 24px; background: rgba(17, 17, 17, .78);
}
.fmm-dvreport-lightbox img { max-width: min(1100px, 100%); max-height: 90vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.fmm-dvreport-lightbox__x {
    position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.fmm-dvreport-lightbox__x:hover { background: rgba(255, 255, 255, .25); }

.fmm-dvcard b { display: block; margin-bottom: 8px; font-size: 16.5px; font-weight: 800; color: #1A1A1A; }
.fmm-dvcard p { margin: 0; font-size: 13.5px; line-height: 21px; color: #6B7280; }

.fmm-dvreport { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.fmm-dvcta { text-align: center; background: #FDF6DC; border-color: #FDF6DC; }
.fmm-dvcta .fmm-plbtn { background: #1A1A1A; color: #fff; }
.fmm-dvcta .fmm-plbtn:hover { background: #333; }
.fmm-dvcta .fmm-plsub { margin: 0 auto 22px; max-width: 560px; }

/* --- Luxury Authentication (Figma 1:46267) -------------------------------- */
.fmm-luhero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }

.fmm-lupill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 13px; margin-bottom: 20px; border-radius: 999px;
    background: #fff; border: 1px solid #E5E7EB;
    font-size: 14px; font-weight: 500; color: #1F2937;
}
.fmm-lupill i { width: 8px; height: 8px; border-radius: 50%; background: #D4AF1F; }

.fmm-luhero__title {
    margin: 0 0 16px;
    font-size: 52px; line-height: 56px; font-weight: 700;
    letter-spacing: -1.5px; color: #000;
}

.fmm-lustats { display: flex; flex-wrap: wrap; gap: 32px; margin: 26px 0 0; }
.fmm-lustats dt { font-size: 24px; line-height: 32px; font-weight: 700; color: #000; }
.fmm-lustats dd { margin: 0; font-size: 12px; line-height: 16px; color: #6B7280; }

.fmm-luhero__art { position: relative; }
.fmm-lushot {
    display: block; height: 380px; border-radius: 22px; overflow: hidden;
    border: 1px solid #F3F4F6; box-shadow: 0 9px 28px -5px rgba(0, 0, 0, .08);
}
.fmm-lushot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fmm-luwatch {
    position: absolute; top: -12px; right: -26px;
    display: block; width: 103px; height: 103px;
    border: 4px solid #fff; border-radius: 15px; overflow: hidden; background: #fff;
    box-shadow: 0 9px 28px -5px rgba(0, 0, 0, .08);
}
.fmm-luwatch img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fmm-lupass {
    position: absolute; left: -22px; bottom: -22px;
    display: flex; flex-direction: column; gap: 8px;
    width: 235px; padding: 19px;
    border: 1px solid #F3F4F6; border-radius: 15px;
    background: rgba(255, 255, 255, .95); backdrop-filter: blur(2px);
    box-shadow: 0 9px 28px -5px rgba(0, 0, 0, .08);
}
.fmm-lupass__top { display: flex; align-items: center; gap: 11px; }
.fmm-lupass__tick { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; border-radius: 50%; background: #DCFCE7; color: #047857; }
.fmm-lupass__top b  { display: block; font-size: 13px; font-weight: 700; color: #000; }
.fmm-lupass__top em { display: block; font-size: 11px; font-style: normal; color: #6B7280; }
.fmm-lupass__row {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 8px; border-top: 1px solid #F3F4F6;
}
.fmm-lupass__row em { font-size: 11px; font-style: normal; color: #6B7280; }
.fmm-lupass__row b  { font-size: 11px; font-weight: 500; color: #000; }

.fmm-lucats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fmm-lucat {
    border: 1px solid #F3F4F6; border-radius: 16px; overflow: hidden; background: #fff;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, .05);
}
.fmm-lucat__shot { display: block; height: 160px; overflow: hidden; background: #F3F4F6; }
.fmm-lucat__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-lucat b { display: block; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #000; }

.fmm-lusteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fmm-lustep { padding: 22px; border: 1px solid #F3F4F6; border-radius: 16px; background: #F9FAFB; }
.fmm-lustep__n {
    display: grid; place-items: center;
    width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%;
    background: #1A1A1A; color: #fff; font-size: 15px; font-weight: 800;
}
.fmm-lustep b { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 800; color: #1A1A1A; }
.fmm-lustep p { margin: 0; font-size: 13px; line-height: 20px; color: #6B7280; }

/* "What You Receive": sample certificate card beside the pitch (Figma). */
.fmm-lureceive { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.fmm-lucert { padding: 22px; border: 1px solid #F3F4F6; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .08); }
.fmm-lucert__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.fmm-lucert__head em { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9CA3AF; }
.fmm-lucert__head b { display: block; margin-top: 4px; font-size: 16.5px; font-weight: 800; color: #1A1A1A; }
.fmm-lucert__flag { padding: 4px 11px; border-radius: 999px; background: #DCFCE7; color: #15803D; font-size: 12px; font-style: normal; font-weight: 800; }
.fmm-lucert__row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid #F3F4F6; }
.fmm-lucert__row > i { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #FDF6D8; color: #FBBF24; }
.fmm-lucert__row > i svg { width: 100%; height: 100%; }
.fmm-lucert__row b { display: block; font-size: 14px; font-weight: 800; color: #1A1A1A; }
.fmm-lucert__row em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: #6B7280; }
.fmm-lureceive .fmm-plhead { margin-bottom: 18px; }

/* "Product Detail Inspection": close-up with verification chips (Figma). */
.fmm-luprecision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.fmm-luprecision__shot { position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.fmm-luprecision__shot img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.fmm-luprecision__chip {
    position: absolute; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 999px; background: #fff;
    font-size: 12.5px; font-weight: 700; color: #1A1A1A; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.fmm-luprecision__chip i { width: 8px; height: 8px; border-radius: 50%; background: #FBBF24; }
.fmm-luprecision__chip.is-top { top: 7%; right: 7%; }
.fmm-luprecision__chip.is-bottom { bottom: 7%; left: 5%; }
.fmm-luprecision__title { margin: 10px 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 34px; font-weight: 600; letter-spacing: -.01em; color: #1A1A1A; }
.fmm-luprecision .fmm-plsub { margin-bottom: 22px; }
.fmm-plbtn--dark { background: #1A1A1A; color: #fff; }
.fmm-plbtn--dark:hover { background: #333; color: #fff; }

.fmm-luwhy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fmm-luwhy__card { padding: 24px; border: 1px solid #F3F4F6; border-radius: 16px; background: #fff; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, .05); }
.fmm-luwhy__kicker {
    display: block; margin-bottom: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: #B4780A;
}
.fmm-luwhy__card b { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 800; color: #1A1A1A; }
.fmm-luwhy__card p { margin: 0 0 14px; font-size: 13.5px; line-height: 21px; color: #6B7280; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .fmm-inhero, .fmm-dvhero, .fmm-luhero, .fmm-dvreport { grid-template-columns: 1fr; gap: 28px; }
    .fmm-inhero__title { font-size: 34px; line-height: 40px; }
    .fmm-dvhero__title { font-size: 32px; line-height: 38px; }
    .fmm-luhero__title { font-size: 34px; line-height: 40px; }

    .fmm-ingallery { grid-template-columns: 1fr; }
    .fmm-inthumbs { grid-template-rows: none; grid-template-columns: repeat(5, 1fr); }
    .fmm-inthumb { height: 90px; }
    .fmm-inthumb:last-child { grid-column: auto; }
    .fmm-inspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmm-ingrid, .fmm-inprocess, .fmm-lucats, .fmm-lusteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmm-dvdevices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fmm-luwhy { grid-template-columns: 1fr; }

    /* The luxury hero's watch and pass card hang off a positioned stage; with
       one column there is no stage to hang from. */
    .fmm-luwatch, .fmm-lupass { position: static; width: auto; margin-top: 14px; }
    .fmm-luwatch { width: 103px; }
}

@media (max-width: 640px) {
    .fmm-ingrid, .fmm-inprocess, .fmm-lucats, .fmm-lusteps,
    .fmm-dvgrid, .fmm-dvdevices { grid-template-columns: 1fr; }
    .fmm-inspecs { grid-template-columns: 1fr; }
    .fmm-inhero__art, .fmm-dvhero__art { grid-template-columns: 1fr; }
    .fmm-lureceive, .fmm-luprecision { grid-template-columns: 1fr; gap: 24px; }
    .fmm-dvchip--a { left: 8px; }
    .fmm-dvchip--b { right: 8px; }
    .fmm-incomplete { grid-column: span 1; }
    .fmm-inthumbs { grid-template-columns: repeat(3, 1fr); }
    .fmm-inhero__art { min-height: 330px; }
    .fmm-inshot--sub  { width: 72%; height: 160px; }
    .fmm-inshot--main { width: 66%; height: 150px; bottom: 40px; }
    .fmm-incomplete { padding: 11px 13px; }
    .fmm-incomplete em { font-size: 11.5px; }
}

/* ==========================================================================
   Warehouse Address (Figma 1:41952) and Invite & Earn (Figma 1:42504)
   ========================================================================== */

/* --- Shared page head ----------------------------------------------------- */
@font-face {
    font-family:"FmmWarehouseIcons"; font-style:normal; font-weight:900; font-display:block;
    src:url("/assets/superadmin/plugins/global/fonts/@fortawesome/fa-solid-900.woff2") format("woff2");
}
.fmm-wa-page { padding:48px 0 64px; }
.fmm-wa-page > .fmm-container { max-width:1248px; }
.fmm-wa__head { margin-bottom: 20px; }
.fmm-wa__title { margin:0 0 8px; font-size:24px; line-height:1.3; font-weight:700; letter-spacing:0; color:#111; }
.fmm-wa__sub { margin:0 0 32px; font-size:14px; line-height:1.5; color:#111; }

.fmm-wa__crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 18px; font-size: 12.5px; color: #9CA3AF;
}
.fmm-wa__crumbs a { color: #6B7280; }
.fmm-wa__crumbs a:hover { color: var(--fmm-yellow-dark); }
.fmm-wa__crumbs b { font-weight: 600; color: #111827; }
.fmm-wa-page .fmm-wa__crumbs { margin:0 0 28px; font-size:12px; }
.fmm-wa-page .fmm-wa__crumbs b { font-weight:400; }

/* --- Notice banner -------------------------------------------------------- */
.fmm-wa__notice {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; margin-bottom: 32px;
    border: 1px solid #FDE68A; border-radius: 12px; background: #FFFBEB;
}
.fmm-wa__noticeico {
    display: grid; place-items: center; flex: 0 0 36px;
    width: 36px; height: 36px; border-radius: 12px;
    background: #FEF3C7; color: #F59E0B;
}
.fmm-wa__notice b { display:block; margin-bottom:4px; font-size:13px; font-weight:600; color:#92400E; }
.fmm-wa__notice span { font-size:13px; line-height:20px; color:#B45309; }

/* --- Address card --------------------------------------------------------- */
.fmm-wa__card {
    width:calc((100% - 24px) * 2 / 3); padding:24px;
    border:1px solid #F0F1F3; border-radius:16px; background:#fff;
    box-shadow:0 2px 8px rgba(16,24,40,.02);
}
.fmm-wa__cardhead {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding:0 0 20px;
}
.fmm-wa__cardhead b { display:block; font-size:18px; line-height:1.4; font-weight:700; color:#111; }
.fmm-wa__cardhead em { display:block; font-size:12px; line-height:1.5; font-style:normal; color:#111; }

.fmm-wa__fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; margin:0; padding:0; }
.fmm-wa__field {
    display: flex; align-items: center; gap: 12px;
    min-width:0; min-height:72px; padding:14px 0; border-bottom:1px solid #F7F7F8;
}
.fmm-wa__field--wide { grid-column:1 / -1; }
.fmm-wa__field:last-child { border-bottom:0; }
.fmm-wa__fieldico {
    display:grid; place-items:center; flex:0 0 36px;
    width:36px; height:36px; border-radius:12px;
    background:#FFF8E6; color:#231F20;
}
.fmm-wa__fieldico::before { font-family:"FmmWarehouseIcons"; font-weight:900; font-size:14px; line-height:1; }
.fmm-wa__fieldico[data-icon="user"]::before { content:"\f007"; }
.fmm-wa__fieldico[data-icon="city"]::before { content:"\f64f"; }
.fmm-wa__fieldico[data-icon="map"]::before { content:"\f279"; }
.fmm-wa__fieldico[data-icon="zip"]::before { content:"\f292"; }
.fmm-wa__fieldico[data-icon="globe"]::before { content:"\f0ac"; }
.fmm-wa__fieldico[data-icon="phone"]::before { content:"\f095"; }
.fmm-wa__fieldbody { flex: 1; min-width: 0; }
.fmm-wa__field dt {
    font-size:10px; line-height:1.5; font-weight:400; letter-spacing:.04em;
    text-transform:uppercase; color:#6B7280;
}
.fmm-wa__field dd {
    margin:3px 0 0; display:flex; align-items:baseline; gap:4px; flex-wrap:wrap;
    font-size:14px; line-height:1.5; font-weight:500; color:#231F20; overflow-wrap:anywhere;
}
.fmm-wa__id { color:#F59E0B; font-weight:500; }

.fmm-wa__copy {
    display: grid; place-items: center; flex: 0 0 32px;
    width: 32px; height: 32px; border-radius: 8px;
    background:#F9FAFB; border:1px solid #E5E7EB; color:#6B7280; cursor:pointer;
}
.fmm-wa__copy img { opacity:.6; }
.fmm-wa__copy:hover { background: #F9FAFB; border-color: var(--fmm-border); color: #374151; }

.fmm-wa__preview { margin-top:20px; padding:16px; background:#FFFCF5; border:1px solid #FFF8E6; border-radius:12px; }
.fmm-wa__previewlabel {
    display: block; margin-bottom: 8px;
    font-size:10px; font-weight:500; letter-spacing:.03em;
    text-transform:uppercase; color:#6B7280;
}
.fmm-wa__preview .fmm-addrblock { margin:0; padding:0; border:0; border-radius:0; background:none; font-size:13px; line-height:1.65; color:#111; }

.fmm-wa__acts { display:flex; gap:12px; margin-top:24px; padding:0; }
.fmm-wa__primary,
.fmm-wa__ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height:48px; padding:12px 20px; border-radius:12px;
    font-size:12px; line-height:1.4; font-weight:600; border:1px solid transparent; cursor:pointer;
}
.fmm-wa__primary { flex: 1; background: var(--fmm-yellow); color: var(--fmm-dark); }
.fmm-wa__primary:hover { background: var(--fmm-yellow-dark); }
.fmm-wa__ghost { background: #fff; color: #374151; border-color: var(--fmm-border); }
.fmm-wa__ghost:hover { background: #F9FAFB; }
.fmm-wa__primary img,.fmm-wa__ghost img { flex:none; filter:brightness(0); }
.fmm-wa__copy:focus-visible,.fmm-wa__primary:focus-visible,.fmm-wa__ghost:focus-visible { outline:2px solid #F59E0B; outline-offset:3px; }

.fmm-wa__hint { margin:16px 0 0; padding:0; font-size:12px; line-height:19px; color:#6B7280; }

/* --- Invite & Earn -------------------------------------------------------- */
@font-face { font-family:"FmmInviteIcons"; src:url("/assets/superadmin/plugins/global/fonts/@fortawesome/fa-solid-900.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:block; }
@font-face { font-family:"FmmInviteBrands"; src:url("/assets/superadmin/plugins/global/fonts/@fortawesome/fa-brands-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:block; }
.fmm-inv-icon { display:inline-block; flex:none; font-family:"FmmInviteIcons"; font-weight:900; font-style:normal; line-height:1; text-rendering:auto; }
.fmm-inv-icon--brand { font-family:"FmmInviteBrands"; font-weight:400; }
.fmm-inv-icon[data-icon="gift"]::before { content:"\f06b"; }
.fmm-inv-icon[data-icon="wallet"]::before { content:"\f555"; }
.fmm-inv-icon[data-icon="copy"]::before { content:"\f0c5"; }
.fmm-inv-icon[data-icon="link"]::before { content:"\f0c1"; }
.fmm-inv-icon[data-icon="globe"]::before { content:"\f0ac"; }
.fmm-inv-icon[data-icon="hashtag"]::before { content:"\f292"; }
.fmm-inv-icon[data-icon="chart"]::before { content:"\f080"; }
.fmm-inv-icon[data-icon="coins"]::before { content:"\f51e"; }
.fmm-inv-icon[data-icon="trend"]::before { content:"\f201"; }
.fmm-inv-icon[data-icon="users"]::before { content:"\f0c0"; }
.fmm-inv-icon[data-icon="clock"]::before { content:"\f017"; }
.fmm-inv-icon[data-icon="check"]::before { content:"\f058"; }
.fmm-inv-icon[data-icon="calendar"]::before { content:"\f133"; }
.fmm-inv-icon[data-icon="more"]::before { content:"\f141"; }
.fmm-inv-icon[data-icon="share"]::before { content:"\f1e0"; }
.fmm-inv-icon[data-icon="user-plus"]::before { content:"\f234"; }
.fmm-inv-icon[data-icon="dollar"]::before { content:"\f155"; }
.fmm-inv-icon[data-icon="infinity"]::before { content:"\f534"; }
.fmm-inv-icon[data-icon="info"]::before { content:"\f05a"; }
.fmm-inv-icon[data-icon="whatsapp"]::before { content:"\f232"; }
.fmm-inv-icon[data-icon="facebook"]::before { content:"\f09a"; }
.fmm-inv-icon[data-icon="instagram"]::before { content:"\f16d"; }
.fmm-invite-page { padding:34px 0 56px; }
.fmm-invite-page > .fmm-container { max-width:1248px; }
.fmm-invite-page .fmm-wa__crumbs { margin-bottom:32px; font-size:14px; }
.fmm-invite-page .fmm-wa__crumbs b { font-weight:400; }
.fmm-inv__hero { position:relative; isolation:isolate; display:flex; align-items:center; gap:32px; overflow:hidden; padding:48px 56px; margin-bottom:40px; border-radius:24px; background:linear-gradient(108deg,#FBBF24 0%,#FFE18A 53%,#FEF3C7 100%); box-shadow:0 12px 28px rgba(251,191,36,.07); }
.fmm-inv__hero::before,.fmm-inv__hero::after { content:""; position:absolute; z-index:-1; border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none; }
.fmm-inv__hero::before { width:260px; height:260px; right:-15px; top:-10px; }
.fmm-inv__hero::after { width:96px; height:96px; right:102px; top:40px; }
.fmm-inv__gift { display:grid; place-items:center; align-self:flex-start; flex:none; width:80px; height:80px; border:1px solid rgba(255,255,255,.4); border-radius:18px; background:rgba(255,255,255,.25); font-size:36px; }
.fmm-inv__herobody { flex:1; min-width:0; }
.fmm-inv__flag { display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; padding:5px 12px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(255,255,255,.35); color:#231F20; font-size:12px; line-height:1.2; }
.fmm-inv__title { margin:0 0 16px; font-size:48px; line-height:1.02; letter-spacing:-.02em; font-weight:750; color:#231F20; }
.fmm-inv__lead { max-width:490px; margin:0; font-size:18px; line-height:1.7; color:#302B25; }
.fmm-inv__heroact { display:flex; flex-direction:column; align-items:center; flex:none; gap:10px; padding-top:36px; }
.fmm-inv__copybtn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:18px 26px; border:0; border-radius:16px; background:#231F20; box-shadow:0 4px 6px rgba(0,0,0,.12); color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
.fmm-inv__copybtn .fmm-inv-icon { color:#FBBF24; }
.fmm-inv__copybtn:hover { background:#111; }
.fmm-inv__heroact em { font-size:12px; font-style:normal; color:#786D52; }
.fmm-inv__split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:32px; }
.fmm-inv__panel { min-width:0; padding:24px; border:1px solid #F0F1F3; border-radius:18px; background:#fff; box-shadow:0 2px 10px rgba(16,24,40,.025); }
.fmm-inv__split > .fmm-inv__panel { padding-bottom:72px; }
.fmm-inv__panel--wide { margin-bottom:32px; }
.fmm-inv__h2 { display:flex; align-items:center; gap:12px; margin:0 0 16px; color:#231F20; font-size:16px; line-height:1.4; font-weight:700; }
.fmm-inv__iconbox { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:12px; background:#FFF8E6; color:#231F20; font-size:14px; }
.fmm-inv__label { display:block; margin:18px 0 7px; color:#6B7280; text-transform:uppercase; font-size:11px; line-height:1.4; font-weight:500; letter-spacing:.05em; }
.fmm-inv__field { display:flex; align-items:center; gap:8px; min-height:54px; padding:10px 12px; border:1px solid #FDE9B5; border-radius:12px; background:#FFF8E1; }
.fmm-inv__field > .fmm-inv-icon { color:#FFB800; font-size:14px; }
.fmm-inv__field code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#231F20; font-family:inherit; font-size:14px; }
.fmm-inv__field--code code { font-weight:800; letter-spacing:.07em; }
.fmm-inv__field button { display:inline-flex; align-items:center; justify-content:center; flex:none; gap:4px; padding:6px 12px; border:0; border-radius:8px; background:#FBBF24; color:#231F20; font-size:12px; line-height:1.3; font-weight:600; cursor:pointer; }
.fmm-inv__share { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:12px; }
.fmm-inv__share a,.fmm-inv__share button { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:10px 8px; border:0; border-radius:10px; color:#fff; font-size:14px; font-weight:500; cursor:pointer; }
.fmm-inv__share .is-wa { background:#22C55E; }
.fmm-inv__share .is-fb { background:#2563EB; }
.fmm-inv__share .is-ig { background:linear-gradient(115deg,#A855F7,#EC4899,#FB923C); }
.fmm-inv__total { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; gap:4px; padding:22px 20px 20px; margin-bottom:16px; border-radius:16px; background:linear-gradient(110deg,#FBBF24,#FCDC80); }
.fmm-inv__total::before,.fmm-inv__total::after { content:""; position:absolute; z-index:-1; border-radius:50%; background:rgba(255,255,255,.16); width:96px; height:96px; top:-24px; right:-24px; }
.fmm-inv__total::after { width:64px; height:64px; top:auto; right:auto; bottom:-28px; left:-16px; }
.fmm-inv__total > span { display:flex; align-items:center; gap:7px; color:#795508; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.fmm-inv__total > b { color:#231F20; font-size:40px; line-height:1.15; font-weight:800; }
.fmm-inv__total > small { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.38); font-size:11px; font-weight:600; }
.fmm-inv__total small .fmm-inv-icon { color:#22C55E; }
.fmm-inv__tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fmm-inv__tile { padding:16px; border:1px solid #FFF0BF; border-radius:14px; background:#FFF8E1; }
.fmm-inv__tile > span { display:flex; align-items:center; gap:6px; color:#6B7280; font-size:12px; }
.fmm-inv__tile > b { display:block; margin:6px 0 3px; color:#231F20; font-size:24px; line-height:1.2; font-weight:750; }
.fmm-inv__tile > em { font-size:12px; font-style:normal; color:#9CA3AF; }
.fmm-inv__tile.is-pending { background:#FFFBEB; }
.fmm-inv__tile.is-pending > span,.fmm-inv__tile.is-pending > b,.fmm-inv__tile.is-pending > em { color:#EA8800; }
.fmm-inv__wallet { display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 16px; border:1px solid #DCFCE7; border-radius:12px; background:#F0FDF4; }
.fmm-inv__walleticon { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:#DCFCE7; color:#22C55E; font-size:14px; }
.fmm-inv__wallet b,.fmm-inv__wallet em { display:block; font-size:12px; line-height:1.4; font-weight:400; font-style:normal; color:#15803D; }
.fmm-inv__wallet em { color:#16A34A; }
.fmm-inv__recent { padding:0; }
.fmm-inv__tablehead { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 24px 20px; }
.fmm-inv__tabletitle { display:flex; align-items:center; gap:10px; }
.fmm-inv__tablehead .fmm-inv__h2 { margin:0; }
.fmm-inv__tablehead em { display:block; margin-top:2px; font-size:12px; font-style:normal; color:#6B7280; }
.fmm-inv__more { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:none; padding:10px 16px; border:0; border-radius:12px; background:#FFF8E1; color:#231F20; font-size:13px; cursor:pointer; }
.fmm-inv__more:disabled { opacity:.6; }
.fmm-inv__tablewrap { overflow:auto; border-radius:0 0 18px 18px; }
.fmm-inv__table { width:100%; min-width:680px; border-collapse:collapse; text-align:left; }
.fmm-inv__table th { padding:14px 24px; background:#F9FAFB; color:#6B7280; font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:500; }
.fmm-inv__table td { padding:16px 24px; border-bottom:1px solid #F9FAFB; color:#231F20; font-size:14px; }
.fmm-inv__table tr:last-child td { border-bottom:0; }
.fmm-inv__table th:nth-child(3),.fmm-inv__table td:nth-child(3),.fmm-inv__table th:nth-child(4),.fmm-inv__table td:nth-child(4) { text-align:center; }
.fmm-inv__table th:last-child,.fmm-inv__table td:last-child { text-align:right; }
.fmm-inv__friend { display:flex; align-items:center; gap:12px; }
.fmm-inv__av { position:relative; display:grid; place-items:center; flex:none; width:40px; height:40px; border:1px solid #FDE68A; border-radius:50%; background:#FFF8E1; color:#231F20; font-size:13px; font-weight:600; }
.fmm-inv__av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.fmm-inv__avbadge { position:absolute; right:-2px; bottom:-1px; display:grid; place-items:center; width:15px; height:15px; border:2px solid white; border-radius:50%; background:#fff; font-size:11px; }
.fmm-inv__avbadge.is-paid { color:#22C55E; }.fmm-inv__avbadge.is-pending { color:#F59E0B; }
.fmm-inv__friend b { display:block; font-size:14px; line-height:1.4; font-weight:500; }
.fmm-inv__friend em { display:block; font-size:12px; line-height:1.4; font-style:normal; color:#6B7280; }
.fmm-inv__date { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.fmm-inv__date .fmm-inv-icon { color:#6B7280; font-size:12px; }
.fmm-inv__table td.fmm-inv__reward { font-size:16px; font-weight:750; }
.fmm-inv__table td.fmm-inv__reward.is-paid { color:#16A34A; }.fmm-inv__table td.fmm-inv__reward.is-pending { color:#F59E0B; }
.fmm-inv__status { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid; border-radius:999px; font-size:12px; white-space:nowrap; }
.fmm-inv__status.is-paid { background:#F0FDF4; border-color:#DCFCE7; color:#15803D; }
.fmm-inv__status.is-pending { background:#FFFBEB; border-color:#FEF3C7; color:#B45309; }
.fmm-inv__status .fmm-inv-icon { font-size:11px; }
.fmm-inv__rowaction { display:inline-grid; place-items:center; width:28px; height:28px; border:0; border-radius:8px; background:#F3F4F6; color:#6B7280; cursor:pointer; }
.fmm-inv__steps { display:grid; gap:20px; margin:20px 0 0; padding:0; list-style:none; }
.fmm-inv__steps li { position:relative; display:flex; gap:16px; max-width:500px; }
.fmm-inv__steps li:not(:last-child)::after { content:""; position:absolute; width:1px; height:32px; left:22px; top:48px; background:#FCD34D; }
.fmm-inv__stepicon { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:16px; background:#FFF4D4; color:#231F20; font-size:16px; }
.fmm-inv__stepbody { min-width:0; padding-left:28px; }
.fmm-inv__stepbody > b { position:relative; display:block; padding:5px 0 8px; color:#231F20; font-size:14px; font-weight:600; }
.fmm-inv__stepbody > b em { position:absolute; left:-28px; top:3px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#FFF8E1; color:#F59E0B; font-size:12px; font-style:normal; }
.fmm-inv__stepbody > span { display:block; color:#6B7280; font-size:12px; line-height:2; }
.fmm-inv__note { display:flex; align-items:center; gap:10px; margin:24px 0 0; padding:12px 16px; border:1px solid #FDE9B5; border-radius:12px; background:#FFF8E1; color:#231F20; font-size:12px; line-height:1.4; }
.fmm-inv__note .fmm-inv-icon { color:#F59E0B; font-size:16px; }
.fmm-inv__policy { display:flex; align-items:center; gap:16px; padding:28px 24px; border:1px solid #F0F1F3; border-radius:18px; background:white; box-shadow:0 2px 10px rgba(16,24,40,.025); }
.fmm-inv__policybody { flex:1; min-width:0; color:#6B7280; font-size:14px; line-height:1.5; }
.fmm-inv__policybody > b { display:block; margin-bottom:2px; color:#231F20; font-weight:500; }
.fmm-inv__policy a { flex:none; color:#231F20; font-size:14px; font-weight:500; text-decoration:underline; }
.fmm-inv__detail { position:relative; }
.fmm-inv__detail h2 { padding-right:24px; font-size:22px; }
.fmm-inv__detail dl { display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:14px; }
.fmm-inv__detail dd { margin:0; text-align:right; }
.fmm-invite-page button:focus-visible,.fmm-inv__share a:focus-visible { outline:2px solid #D97706; outline-offset:3px; }
@media (max-width:1100px) {
    .fmm-inv__hero { padding:36px; gap:24px; }
    .fmm-inv__title { font-size:38px; }.fmm-inv__lead { font-size:16px; }
    .fmm-inv__gift { width:64px; height:64px; font-size:30px; }
    .fmm-inv__copybtn { padding:16px; font-size:14px; }
}
@media (max-width:800px) {
    .fmm-inv__hero { display:grid; grid-template-columns:auto minmax(0,1fr); padding:28px; }
    .fmm-inv__heroact { grid-column:2; align-items:flex-start; padding:0; }
    .fmm-inv__split { grid-template-columns:minmax(0,1fr); }
    .fmm-inv__split > .fmm-inv__panel { padding-bottom:28px; }
    .fmm-inv__policy { flex-wrap:wrap; }.fmm-inv__policy a { margin-left:52px; }
}
@media (max-width:480px) {
    .fmm-inv__hero { gap:16px; padding:24px 20px; }.fmm-inv__gift { width:44px; height:44px; font-size:24px; border-radius:12px; }
    .fmm-inv__flag { font-size:10px; padding:5px 8px; }
    .fmm-inv__title { font-size:30px; }.fmm-inv__title-break { display:none; }
    .fmm-inv__lead { font-size:14px; }.fmm-inv__panel { padding:20px; }
    .fmm-inv__recent { padding:0; }.fmm-inv__tablehead { padding:20px; gap:8px; }
    .fmm-inv__more { padding:8px; font-size:11px; }.fmm-inv__tablehead em { font-size:10px; }
    .fmm-inv__h2 { font-size:14px; }.fmm-inv__share { gap:8px; }.fmm-inv__share a,.fmm-inv__share button { font-size:12px; }
    .fmm-inv__tile { padding:12px; }.fmm-inv__stepbody { padding-left:24px; }
}
/* --- Warehouse responsive layout ----------------------------------------- */
@media (max-width:900px) { .fmm-wa__card { width:100%; max-width:784px; } }
@media (max-width:560px) {
    .fmm-wa-page { padding:28px 0 40px; }
    .fmm-wa__card { padding:18px; }
    .fmm-wa__notice { padding:14px; align-items:flex-start; }
    .fmm-wa__fields { grid-template-columns:minmax(0,1fr); }
    .fmm-wa__field { min-height:68px; }
    .fmm-wa__acts { flex-wrap:wrap; }
    .fmm-wa__primary,.fmm-wa__ghost { flex:1 1 180px; }
}

/* --- seller: pickup settings (Figma 5:21183) ------------------------------ */

/* "Last saved 2 hours ago", right of the page title. */
.fmm-pksaved {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    align-self: center;
    font-size: 12px;
    line-height: 16px;
    color: #9CA3AF;
    white-space: nowrap;
}

.fmm-pksaved em { font-style: normal; }
.fmm-pksaved svg { flex-shrink: 0; color: #16A34A; }
.fmm-pksaved.is-busy { color: var(--fmm-muted); }

/* 696px is the frame's column. Left to fill the rail's remaining width the
   rows stretched to ~830px and the Edit link and switch drifted a long way from
   the name they belong to. */
.fmm-pkwrap { display: flex; flex-direction: column; gap: 24px; max-width: 696px; }

.fmm-pkcard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.fmm-pkcard__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fmm-pkcard__head h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; }
.fmm-pkcard__head p { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: #9CA3AF; }

.fmm-pkcount {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #15803D;
    background: #F0FDF4;
}

.fmm-pklist { display: flex; flex-direction: column; gap: 16px; }

.fmm-pkloc {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 17px;
    background: rgba(249, 250, 251, .4);
}

/* Dimmed as a whole, the way the frame draws a switched-off location — the
   seller can still read it, it just stops looking like somewhere a buyer
   could be sent. */
.fmm-pkloc.is-off { opacity: .6; background: rgba(249, 250, 251, .6); }

.fmm-pkloc__ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fmm-yellow-dark);
    background: #FFF8E6;
}

.fmm-pkloc.is-off .fmm-pkloc__ico { color: #9CA3AF; background: #F3F4F6; }

.fmm-pkloc__body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 3.5px; }
.fmm-pkloc__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fmm-pkloc__title b { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.fmm-pkloc.is-off .fmm-pkloc__title b { color: var(--fmm-muted); }

.fmm-pkloc__tag {
    flex-shrink: 0;
    font-style: normal;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--fmm-yellow);
}

.fmm-pkloc__tag.is-off { font-weight: 600; color: var(--fmm-muted); background: #E5E7EB; }

.fmm-pkloc__line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    color: var(--fmm-muted);
}

.fmm-pkloc__line svg { flex-shrink: 0; }
.fmm-pkloc__line > span { overflow-wrap: anywhere; }
.fmm-pkloc.is-off .fmm-pkloc__line { color: #9CA3AF; }

.fmm-pkloc__acts { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.fmm-pkedit {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #D97706;
    cursor: pointer;
}

.fmm-pkedit:hover:not(:disabled) { color: #B45309; }
.fmm-pkedit:disabled { color: #D1D5DB; cursor: default; }

/* 48x26 with a 20px knob, as the frame draws it. */
.fmm-pkswitch {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: #D1D5DB;
    cursor: pointer;
    transition: background .15s ease;
}

.fmm-pkswitch.is-on { background: var(--fmm-yellow); }
.fmm-pkswitch:disabled { cursor: default; opacity: .6; }

.fmm-pkswitch > i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .15s ease;
}

.fmm-pkswitch.is-on > i { transform: translateX(22px); }

/* The switched-off row is already at .6 opacity; the frame dims its switch
   again on top of that, which is why this looks doubled. */
.fmm-pkloc.is-off .fmm-pkswitch { opacity: .4; }

.fmm-pkadd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 2px dashed rgba(72, 68, 63, .5);
    border-radius: 12px;
    padding: 16px 2px;
    background: none;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: rgba(72, 68, 63, .5);
    cursor: pointer;
}

.fmm-pkadd:hover { border-color: var(--fmm-yellow-dark); color: var(--fmm-yellow-dark); }

/* --- the inline add / edit panel ----------------------------------------- */

.fmm-pkform {
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 17px;
    margin-top: 12px;
    background: #fff;
}

.fmm-pkform__grid { display: grid; gap: 14px; }
.fmm-pkform__grid label { display: block; }
.fmm-pkform__grid label > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }

.fmm-pkform__grid input {
    width: 100%;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 11px 13px;
    font: inherit;
    font-size: 14px;
    background: #fff;
}

.fmm-pkform__grid input:focus { outline: none; border-color: var(--fmm-yellow); }

.fmm-pkform__def { margin-top: 14px; }
.fmm-pkform__note { margin: 14px 0 0; font-size: 12px; line-height: 16px; color: var(--fmm-muted); }

.fmm-pkform__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.fmm-pkform__del {
    margin-left: auto;
    border: 0;
    padding: 8px 4px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #DC2626;
    cursor: pointer;
}

.fmm-pkform__del:hover:not(:disabled) { color: #991B1B; }
.fmm-pkform__del:disabled { color: var(--fmm-faint); cursor: default; }

/* --- pickup instructions -------------------------------------------------- */

.fmm-pktext {
    width: 100%;
    min-height: 118px;
    resize: vertical;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 21px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    background: #fff;
}

.fmm-pktext:focus { outline: none; border-color: var(--fmm-yellow); }
.fmm-pktext::placeholder { color: #9CA3AF; }

.fmm-pkmeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    line-height: 16px;
    color: #9CA3AF;
}

.fmm-pkmeta > span { display: flex; align-items: center; gap: 4px; }
.fmm-pkmeta svg { flex-shrink: 0; }
.fmm-pkmeta .is-over { color: #B91C1C; font-weight: 600; }

@media (max-width: 640px) {
    .fmm-pkloc { flex-wrap: wrap; }
    .fmm-pkloc__acts { width: 100%; justify-content: flex-end; }
    .fmm-pksaved { margin-left: 0; width: 100%; }
}

/* --- seller: accept offers (Figma 5:21758) -------------------------------- */

.fmm-aowrap { display: flex; flex-direction: column; gap: 20px; max-width: 686px; }

.fmm-aohead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fmm-aohead h1 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.75px; }
.fmm-aohead p { margin: 6px 0 0; font-size: 16px; line-height: 24px; color: var(--fmm-muted); }

/* Reports whether anything is unsaved. The frame's chip said "Changes
   auto-saved" next to a Save button; this says what is actually true. */
.fmm-aostate {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 11px 17px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #4B5563;
    white-space: nowrap;
}

.fmm-aostate > i { width: 8px; height: 8px; border-radius: 999px; background: #4ADE80; flex-shrink: 0; }
.fmm-aostate.is-dirty > i { background: var(--fmm-yellow); }

.fmm-aocard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    padding: 29px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-aocard h2 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; }
.fmm-aocard > p,
.fmm-aocard__top p { margin: 0; font-size: 14px; line-height: 22.75px; color: var(--fmm-muted); }

.fmm-aocard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.fmm-aocard__top > div:first-child { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10.875px; }
.fmm-aocard__h2row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.fmm-aoico {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--fmm-muted);
    background: #F3F4F6;
}

.fmm-aobadge {
    font-style: normal;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #9CA3AF;
    background: #F3F4F6;
}

.fmm-aobadge.is-on { color: #15803D; background: #F0FDF4; }
.fmm-aobadge.is-warn { color: #92400E; background: #FEF3C7; }

/* Card 1 and 3's footers: a state pill and a sentence saying what it means. */
.fmm-aocard__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #F9FAFB;
    padding-top: 17px;
}

.fmm-aocard__foot em {
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #9CA3AF;
}

.fmm-aopill {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #9CA3AF;
    background: var(--fmm-bg-alt);
}

.fmm-aopill > i { width: 8px; height: 8px; border-radius: 999px; background: #D1D5DB; flex-shrink: 0; }
.fmm-aopill.is-on { color: #15803D; background: #F0FDF4; }
.fmm-aopill.is-on > i { background: #4ADE80; }
.fmm-aopill svg { flex-shrink: 0; }

/* The configurable half of the auto-counter card, dimmed while it is off —
   still readable, so a seller can see what enabling it would do. */
.fmm-aocard__body { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #F9FAFB; padding-top: 25px; }
.fmm-aocard.is-off .fmm-aocard__body { opacity: .55; }

.fmm-aonote { margin: 0; font-size: 12px; line-height: 18px; color: #9CA3AF; }

/* --- the percentage fields ----------------------------------------------- */

.fmm-aolabel {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-aofield { display: flex; align-items: flex-end; gap: 16px; }
.fmm-aofield > div:first-child { width: 320px; max-width: 100%; }

.fmm-aoinput { position: relative; }

.fmm-aoinput input {
    width: 100%;
    border: 2px solid #F3F4F6;
    border-radius: 12px;
    padding: 14px 50px 14px 18px;
    font: inherit;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    background: rgba(234, 230, 225, .12);
}

.fmm-aoinput input:focus { outline: none; border-color: var(--fmm-yellow); }
.fmm-aoinput input:disabled { color: #9CA3AF; background: var(--fmm-bg-alt); border-color: #E5E7EB; }

/* Chrome draws spinners that duplicate the stepper buttons beside the field. */
.fmm-aoinput input::-webkit-outer-spin-button,
.fmm-aoinput input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fmm-aoinput input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.fmm-aoinput__suffix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: #9CA3AF;
    pointer-events: none;
}

.fmm-aoinput__suffix.is-text { font-size: 14px; line-height: 20px; font-weight: 500; }
.fmm-aoinput--wide { max-width: 320px; }
.fmm-aoinput--wide input { padding-right: 82px; }

.fmm-aostep { display: flex; flex-direction: column; gap: 4px; }

.fmm-aostep button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fmm-border);
    border-radius: 8px;
    background: rgba(250, 247, 242, .19);
    color: var(--fmm-text);
    cursor: pointer;
}

.fmm-aostep button:hover { border-color: var(--fmm-yellow); color: var(--fmm-yellow-dark); }

/* --- worked examples ------------------------------------------------------ */

.fmm-aoex {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(245, 197, 24, .25);
    border-radius: 12px;
    padding: 20px 17px 15px;
    background: #FFF8E7;
}

.fmm-aoex__ico {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--fmm-text);
    background: var(--fmm-yellow);
}

.fmm-aoex b { font-size: 12px; line-height: 16px; font-weight: 600; }
.fmm-aoex p { margin: 2px 0 0; font-size: 12px; line-height: 19.5px; color: #4B5563; }
.fmm-aoex p b { font-weight: 600; color: var(--fmm-text); }
.fmm-aoex p b.is-red { color: #EF4444; }

/* The auto-counter example is the same block in grey — it describes a rule
   that is off by default, and an amber callout would read as active. */
.fmm-aoex.is-plain { border-color: var(--fmm-border); background: var(--fmm-bg-alt); padding: 15px 17px; }
.fmm-aoex.is-plain .fmm-aoex__ico { color: var(--fmm-muted); background: #E5E7EB; }
.fmm-aoex.is-plain > div > b { color: var(--fmm-muted); }
.fmm-aoex.is-plain p,
.fmm-aoex.is-plain p b { color: #9CA3AF; }

/* --- the auto-accept warning card ---------------------------------------- */

.fmm-aocard--warn { border-color: #FDE68A; background: #FFFBEB; }

/* --- toggles -------------------------------------------------------------- */

.fmm-aotoggle {
    position: relative;
    width: 48px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 4px;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: #E5E7EB;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05);
    cursor: pointer;
    transition: background .15s ease;
}

.fmm-aotoggle.is-on { background: var(--fmm-yellow); box-shadow: none; }

.fmm-aotoggle > i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    background: #fff;
    transition: transform .15s ease;
}

.fmm-aotoggle.is-on > i { border-color: transparent; transform: translateX(24px); }

/* --- save row ------------------------------------------------------------- */

.fmm-aoacts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0 16px; }

.fmm-aosave {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    padding: 14px 32px;
    background: var(--fmm-yellow);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--fmm-text);
    cursor: pointer;
}

.fmm-aosave:hover:not(:disabled) { background: var(--fmm-yellow-dark); }
.fmm-aosave:disabled { opacity: .5; cursor: default; }

.fmm-aocancel {
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 15px 25px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #4B5563;
    cursor: pointer;
}

.fmm-aocancel:hover:not(:disabled) { background: var(--fmm-bg-alt); }
.fmm-aocancel:disabled { opacity: .5; cursor: default; }

.fmm-aosaved {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    font-size: 12px;
    line-height: 16px;
    color: #9CA3AF;
    white-space: nowrap;
}

.fmm-aosaved em { font-style: normal; }
.fmm-aosaved svg { flex-shrink: 0; }

@media (max-width: 640px) {
    .fmm-aohead { flex-direction: column; }
    .fmm-aofield { flex-wrap: wrap; }
}

/* --- seller: help center (Figma 5:22210) ---------------------------------- */

.fmm-hcwrap { display: flex; flex-direction: column; gap: 32px; }

.fmm-hchead h1 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; }
.fmm-hchead p { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--fmm-muted); }

.fmm-hcresp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
    color: #9CA3AF;
}

.fmm-hcresp b { font-weight: 600; color: #4B5563; }
.fmm-hcresp svg { flex-shrink: 0; color: var(--fmm-yellow-dark); }

/* --- search --------------------------------------------------------------- */

.fmm-hcsearch { display: flex; flex-direction: column; gap: 12px; }

.fmm-hcsearch__box {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.fmm-hcsearch__box > svg { position: absolute; left: 20px; color: #9CA3AF; pointer-events: none; }

.fmm-hcsearch__box input {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 19px 130px 19px 57px;
    font: inherit;
    font-size: 16px;
    background: none;
}

.fmm-hcsearch__box input:focus { outline: none; }
.fmm-hcsearch__box input::placeholder { color: #9CA3AF; }
.fmm-hcsearch__box input::-webkit-search-cancel-button { -webkit-appearance: none; }

.fmm-hcsearch__box button {
    position: absolute;
    right: 16px;
    border: 0;
    border-radius: 12px;
    padding: 8px 20px;
    background: var(--fmm-yellow);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

.fmm-hcsearch__box button:hover { background: var(--fmm-yellow-dark); }

.fmm-hcchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fmm-hcchips > span { font-size: 12px; line-height: 16px; color: #9CA3AF; padding-right: 4px; }

.fmm-hcchips button {
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    padding: 7px 13px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    line-height: 16px;
    color: #4B5563;
    cursor: pointer;
}

.fmm-hcchips button:hover { border-color: var(--fmm-yellow); color: var(--fmm-yellow-dark); }

/* --- sections ------------------------------------------------------------- */

.fmm-hcsec { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.fmm-hcsec:last-child { margin-bottom: 0; }

.fmm-hcsec__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fmm-hcsec__head h2 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; }

.fmm-hclink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #CA8A04;
    text-decoration: none;
    cursor: pointer;
}

.fmm-hclink:hover { color: #A16207; }
.fmm-hclink svg { flex-shrink: 0; }

/* --- Quick Help ----------------------------------------------------------- */

.fmm-hcquick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.fmm-hccard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    padding: 21px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    text-decoration: none;
    color: inherit;
}

.fmm-hccard:hover { border-color: var(--fmm-yellow); }
.fmm-hccard > b { margin-top: 12px; font-size: 14px; line-height: 20px; font-weight: 600; }
.fmm-hccard > em { font-style: normal; font-size: 12px; line-height: 19.5px; color: var(--fmm-muted); }

.fmm-hccard__ico,
.fmm-hctopic__ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fmm-yellow-dark);
    background: #FFF8E6;
}

.fmm-hccard__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--fmm-yellow-dark);
}

/* --- article rows --------------------------------------------------------- */

.fmm-hclist {
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    overflow: hidden;
}

.fmm-hcrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 21px;
    border-bottom: 1px solid #F9FAFB;
    text-decoration: none;
    color: inherit;
}

.fmm-hcrow:last-child { border-bottom: 0; }
.fmm-hcrow:hover { background: var(--fmm-bg-alt); }

.fmm-hcrow__ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--fmm-yellow-dark);
    background: #FFF8E6;
}

.fmm-hcrow__body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fmm-hcrow__body > b { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.fmm-hcrow__body > em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--fmm-muted); overflow-wrap: anywhere; }
.fmm-hcrow__go { flex-shrink: 0; color: #D1D5DB; }

/*
 * The category tag.
 *
 * The frame colour-codes each pill (Beginner green, Pricing blue, Account
 * purple, Tips orange) against a difficulty field that does not exist. These
 * carry the article's real category instead, coloured BY that category so the
 * same topic is always the same colour rather than the colour being decorative.
 * An unlisted category falls through to the neutral default below.
 */
.fmm-hctag {
    flex-shrink: 0;
    font-style: normal;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--fmm-muted);
    background: var(--fmm-bg-alt);
    white-space: nowrap;
}

.fmm-hctag[data-cat="listings"]          { color: #16A34A; background: #F0FDF4; }
.fmm-hctag[data-cat="payments_billing"]  { color: #2563EB; background: #EFF6FF; }
.fmm-hctag[data-cat="payouts"]           { color: #2563EB; background: #EFF6FF; }
.fmm-hctag[data-cat="account_security"]  { color: #9333EA; background: #FAF5FF; }
.fmm-hctag[data-cat="account"]           { color: #9333EA; background: #FAF5FF; }
.fmm-hctag[data-cat="offers"]            { color: #EA580C; background: #FFF7ED; }
.fmm-hctag[data-cat="fulfillment"]       { color: #0891B2; background: #ECFEFF; }
.fmm-hctag[data-cat="communication"]     { color: #0891B2; background: #ECFEFF; }
.fmm-hctag[data-cat="analytics"]         { color: #DB2777; background: #FDF2F8; }

/* --- Browse Topics -------------------------------------------------------- */

.fmm-hctopics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.fmm-hctopic,
.fmm-hcfoot {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    padding: 21px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    text-decoration: none;
    color: inherit;
}

.fmm-hctopic:hover,
.fmm-hcfoot:hover { border-color: var(--fmm-yellow); }

.fmm-hctopic__ico { width: 48px; height: 48px; }
.fmm-hctopic__body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fmm-hctopic__body > b { font-size: 14px; line-height: 20px; font-weight: 600; }
.fmm-hctopic__body > em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--fmm-muted); }
.fmm-hctopic__n { flex-shrink: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: #9CA3AF; white-space: nowrap; }

.fmm-hcfoot { padding: 25px; }

.fmm-hcfoot__cta {
    flex-shrink: 0;
    border-radius: 12px;
    padding: 9px 17px;
    background: var(--fmm-yellow);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .fmm-hcquick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .fmm-hcquick,
    .fmm-hctopics { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .fmm-hcsearch__box input { padding-right: 20px; }
    .fmm-hcsearch__box button { position: static; margin: 0 12px 12px; }
    .fmm-hcsearch__box { flex-wrap: wrap; }
    .fmm-hctag { display: none; }
}

/* --- seller: contact support (Figma 5:22791) ------------------------------ */

.fmm-cswrap { display: flex; flex-direction: column; gap: 28px; max-width: 696px; }

.fmm-cshead h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; }
.fmm-cshead p { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--fmm-text); }

.fmm-cscard {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 16px;
    padding: 32px 32px 48px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
}

.fmm-cscard__head { display: flex; align-items: center; gap: 8px; }
.fmm-cscard__head h2 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; color: #1F2937; }

/* The accent bar beside the card title. */
.fmm-cscard__head > i {
    width: 4px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--fmm-yellow);
}

/* --- fields --------------------------------------------------------------- */

.fmm-csfield { display: flex; flex-direction: column; gap: 6px; }

/*
 * :not(.fmm-csdrop) throughout.
 *
 * The dropzone is ALSO a <label> and ALSO a direct child of .fmm-csfield — it
 * wraps its own file input so a click anywhere in it opens the picker. Without
 * the exclusion these three rules reached inside it: "Upload screenshots or
 * files" came out in the required-asterisk red, and the Choose Files button and
 * the upload icon both went grey.
 */
.fmm-csfield > label:not(.fmm-csdrop) {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #374151;
}

.fmm-csfield > label:not(.fmm-csdrop) > b { color: #F87171; }
.fmm-csfield > label:not(.fmm-csdrop) > span { font-weight: 400; color: #9CA3AF; }

.fmm-csselect,
.fmm-csinput { position: relative; display: flex; align-items: center; }

.fmm-csselect > svg { position: absolute; right: 16px; color: var(--fmm-muted); pointer-events: none; }
.fmm-csinput > svg { position: absolute; left: 16px; color: #9CA3AF; pointer-events: none; }

.fmm-csfield select,
.fmm-csfield input[type="text"],
.fmm-csfield textarea {
    width: 100%;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 13px 17px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: #374151;
    background: rgba(250, 247, 242, .14);
}

.fmm-csfield select { appearance: none; padding-right: 41px; cursor: pointer; }
.fmm-csfield input[type="text"] { padding-left: 41px; }

.fmm-csfield textarea {
    min-height: 146px;
    resize: vertical;
    padding: 13px 17px;
}

.fmm-csfield select:focus,
.fmm-csfield input:focus,
.fmm-csfield textarea:focus { outline: none; border-color: var(--fmm-yellow); }

.fmm-csfield ::placeholder { color: #9CA3AF; }

.fmm-cshint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    line-height: 16px;
    color: #9CA3AF;
}

.fmm-cshint > span { display: flex; align-items: center; gap: 6px; }
.fmm-cshint svg { flex-shrink: 0; }
.fmm-cshint > em { font-style: normal; flex-shrink: 0; }

/* --- the dropzone --------------------------------------------------------- */

.fmm-csdrop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 2px dashed var(--fmm-border);
    border-radius: 12px;
    padding: 34px;
    background: rgba(250, 247, 242, .14);
    cursor: pointer;
    text-align: center;
}

.fmm-csdrop.is-over { border-color: var(--fmm-yellow); background: #FFFBEB; }
.fmm-csdrop > b { font-size: 14px; line-height: 20px; font-weight: 600; color: #374151; }
.fmm-csdrop > em { font-style: normal; font-size: 12px; line-height: 16px; color: #9CA3AF; }
.fmm-csdrop__types { margin-top: -4px; }

.fmm-csdrop__ico {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    color: var(--fmm-yellow-dark);
}

.fmm-csdrop__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--fmm-border);
    border-radius: 8px;
    padding: 9px 17px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #374151;
}

.fmm-csdrop__btn.is-busy { color: var(--fmm-muted); }

/* The input covers the whole zone so a click anywhere opens the picker, and
   the visible "Choose Files" stays a plain span rather than a nested button. */
.fmm-csdrop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.fmm-csdrop input[type="file"]:disabled { cursor: not-allowed; }

/* --- attached files ------------------------------------------------------- */

.fmm-csfiles { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.fmm-csfiles li {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--fmm-border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--fmm-bg-alt);
    font-size: 13px;
}

.fmm-csfiles svg { flex-shrink: 0; color: var(--fmm-muted); }
.fmm-csfiles b { flex: 1 0 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.fmm-csfiles em { font-style: normal; flex-shrink: 0; font-size: 12px; color: #9CA3AF; }

.fmm-csfiles button {
    flex-shrink: 0;
    border: 0;
    padding: 4px;
    background: none;
    color: var(--fmm-muted);
    cursor: pointer;
}

.fmm-csfiles button:hover { color: #DC2626; }

/* --- expected response time ----------------------------------------------- */

.fmm-csnote {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(245, 184, 0, .2);
    border-radius: 12px;
    padding: 17px;
    background: #FFF8E1;
}

.fmm-csnote__ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(245, 184, 0, .2);
    color: var(--fmm-yellow-dark);
}

.fmm-csnote b { font-size: 14px; line-height: 20px; font-weight: 600; color: #1F2937; }
.fmm-csnote p { margin: 1px 0 0; font-size: 14px; line-height: 22.75px; color: #4B5563; }
.fmm-csnote p b { font-weight: 700; color: #E0A800; }

/* --- submit --------------------------------------------------------------- */

.fmm-csacts { display: flex; flex-direction: column; gap: 11.5px; padding-top: 8px; }

.fmm-cssend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 14px 24px;
    background: var(--fmm-yellow);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
}

.fmm-cssend:hover:not(:disabled) { background: var(--fmm-yellow-dark); }
.fmm-cssend:disabled { opacity: .55; box-shadow: none; cursor: default; }

.fmm-csconfirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    color: #9CA3AF;
    text-align: center;
}

.fmm-csconfirm svg { flex-shrink: 0; }

/* --- sent ----------------------------------------------------------------- */

.fmm-cssent { align-items: center; text-align: center; gap: 12px; }
.fmm-cssent h2 { margin: 0; font-size: 20px; font-weight: 700; }
.fmm-cssent p { margin: 0; font-size: 14px; line-height: 22px; color: var(--fmm-muted); }
.fmm-cssent p b { color: var(--fmm-text); }

.fmm-cssent__mark {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #15803D;
    background: #F0FDF4;
}

.fmm-cssent__acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

@media (max-width: 560px) {
    .fmm-cscard { padding: 24px 20px 32px; }
    .fmm-cshint { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* --- header notification bell + dropdown ---------------------------------
   The panel the design references (YouTube's) in marketplace clothing: a
   titled header, a scrolling list of avatar / title / time rows with an unread
   marker, and one "show more" at the foot. Shared by both headers — the
   trigger keeps whichever icon-button class its header already uses, so only
   the panel is new. */

.fmm-nbell { position: relative; }

.fmm-nbell__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
    width: 396px;
    max-width: calc(100vw - 24px);
    display: flex;
    flex-direction: column;
    color: var(--fmm-text);
    background: #fff;
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    box-shadow: var(--fmm-shadow-lg);
    overflow: hidden;
}

.fmm-nbell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--fmm-border);
}

.fmm-nbell__head b { font-size: 15px; font-weight: 700; }

.fmm-nbell__headacts { display: inline-flex; align-items: center; gap: 12px; }

.fmm-nbell__link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fmm-muted);
    cursor: pointer;
}

.fmm-nbell__link:hover { color: var(--fmm-text); text-decoration: underline; }

/* Fixed window, scrolled — the feed is unbounded and the page at the foot is
   where a long one belongs. */
.fmm-nbell__body { max-height: 420px; overflow-y: auto; }

.fmm-nbell__state {
    padding: 26px 20px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fmm-muted);
    margin: 0;
}

.fmm-nrow {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 13px 16px 13px 26px;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.fmm-nrow:hover { background: var(--fmm-bg-alt); }
.fmm-nrow + .fmm-nrow { border-top: 1px solid #F3F4F6; }

/* The unread marker sits in the row's left gutter, as in the reference. */
.fmm-nrow__dot {
    position: absolute;
    left: 11px;
    top: 22px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}

.fmm-nrow.is-unread { background: var(--fmm-yellow-soft); }
.fmm-nrow.is-unread:hover { background: #FDF0D2; }
.fmm-nrow.is-unread .fmm-nrow__dot { background: var(--fmm-yellow-dark); }

.fmm-nrow__av {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 16px;
    background: var(--fmm-bg-alt);
    border: 1px solid var(--fmm-border);
}

.fmm-nrow__av img { width: 100%; height: 100%; object-fit: cover; }

.fmm-nrow__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Two lines, then ellipsis. A notification body can be a paragraph, and one
   long row would push the rest of the feed out of the window. */
.fmm-nrow__title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--fmm-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fmm-nrow__body {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fmm-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fmm-nrow__when { font-size: 11.5px; color: var(--fmm-faint); }

.fmm-nbell__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fmm-text);
    border-top: 1px solid var(--fmm-border);
    background: #fff;
}

.fmm-nbell__more:hover { background: var(--fmm-bg-alt); }

@media (max-width: 480px) {
    .fmm-nbell__panel {
        position: fixed;
        top: var(--fmm-nbell-top, 64px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--fmm-nbell-top, 64px) - 12px);
    }
    .fmm-nbell__body { min-height: 0; max-height: 60vh; }
}

/* --- seller platform fee disclosure --------------------------------------
   Shown wherever a seller is choosing a number they will be paid on: the
   listing price, an offer they are about to accept, the counter they are about
   to send. The fee is FlymyMall's cut of the seller's side — never a buyer
   charge — so it always reads as a deduction with the net stated beneath it.  */
.fmm-payoutline {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    font-size: 13px; color: var(--fmm-muted); padding: 6px 0 0;
}
.fmm-payoutline b { color: var(--fmm-text); font-weight: 700; }
.fmm-payoutline--net {
    margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--fmm-border);
    font-size: 14px; color: var(--fmm-text); font-weight: 700;
}
.fmm-payoutline--net b { font-size: 17px; font-weight: 800; color: #15803D; }

/* Standalone explainer block (payout onboarding, wallet). */
.fmm-feenote {
    display: flex; gap: 11px; align-items: flex-start;
    background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px;
    padding: 13px 15px; font-size: 13px; line-height: 1.55; color: #78350F;
}
.fmm-feenote svg { flex: 0 0 auto; margin-top: 2px; color: #B45309; }
.fmm-feenote b { display: block; margin-bottom: 3px; font-size: 13.5px; }

/* Seller shipment confirmation, shown after the ship API succeeds. */
.fmm-ship-success { background: rgba(22, 22, 22, .42); }
.fmm-ship-success__box {
    position: relative;
    width: min(100%, 360px);
    padding: 30px 26px 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
    text-align: center;
}
.fmm-ship-success__close {
    position: absolute; top: 12px; right: 12px;
    width: 24px; height: 24px; border: 0; border-radius: 50%;
    color: #6B7280; background: #F3F4F6; font-size: 18px; line-height: 1;
    cursor: pointer;
}
.fmm-ship-success__icon {
    width: 58px; height: 58px; margin: 0 auto 16px;
    display: grid; place-items: center; border-radius: 50%;
    color: #fff; background: #22C55E; box-shadow: 0 0 0 8px #DCFCE7;
}
.fmm-ship-success__box h2 { margin: 0 0 7px; color: #111827; font-size: 18px; line-height: 25px; font-weight: 800; }
.fmm-ship-success__intro { margin: 0 0 22px; color: #6B7280; font-size: 12px; line-height: 18px; }
.fmm-ship-success__details {
    margin: 0 0 20px; padding: 12px 14px; border: 1px solid #F0F1F3;
    border-radius: 9px; background: #F9FAFB; text-align: left;
}
.fmm-ship-success__details > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #E5E7EB; font-size: 10px; }
.fmm-ship-success__details > div:last-child { border-bottom: 0; }
.fmm-ship-success__details dt { color: #6B7280; }
.fmm-ship-success__details dd { margin: 0; color: #111827; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.fmm-ship-success__status { padding: 3px 7px; border-radius: 4px; color: #15803D; background: #DCFCE7; text-transform: capitalize; }
.fmm-ship-success__payout {
    display: flex; min-height: 38px; align-items: center; justify-content: center;
    border-radius: 8px; color: #111827; background: var(--fmm-yellow); font-size: 12px; font-weight: 700;
}
.fmm-ship-success__tracking {
    margin-top: 14px; border: 0; padding: 4px 8px; color: #6B7280;
    background: transparent; font: inherit; font-size: 11px; cursor: pointer;
}
.fmm-ship-success__tracking:hover { color: #111827; }

/* The seller escrow timeline uses the marketplace yellow for completed steps. */
.fmm-vorder-escrow .fmm-track__step.is-done > .fmm-track__dot { background: var(--fmm-yellow); }
.fmm-vorder-escrow .fmm-track__step.is-done:not(:last-child)::before { background: var(--fmm-yellow); }
.fmm-vorder-escrow .fmm-track__dot.is-now {
    color: #B45309;
    background: var(--fmm-yellow-soft);
    box-shadow: 0 0 0 4px #FEF3C7;
}

/* Buyer Help Center landing page, aligned with the compact Figma layout. */
.fmm-support-page .fmm-container { max-width: 980px; }
.fmm-support-page .fmm-crumbs,
.fmm-support-page .fmm-pnav,
.fmm-support-page .fmm-asplit > aside { display: none !important; }
.fmm-support-page .fmm-asplit { display: block; }
.fmm-support-page .fmm-asplit > div { max-width: 840px; margin: 0 auto; }
.fmm-support-page .fmm-helphero {
    margin: 0 -20px 42px;
    padding: 8px 20px 48px;
    border-bottom: 1px solid #F1F3F5;
}
.fmm-support-page__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 13px; border: 1px solid #E5E7EB; border-radius: 999px;
    background: #fff; color: #374151; font-size: 11px;
}
.fmm-support-page .fmm-helphero h1 { margin-top: 14px; font-size: 38px; line-height: 46px; color: #080808; }
.fmm-support-page .fmm-helphero p { line-height: 20px; }
.fmm-support-page .fmm-search__form { position: relative; display:flex; align-items:center; border:1px solid #D9DEE5 !important; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.fmm-support-page .fmm-search__input { padding-right:92px; }
.fmm-support-page .fmm-search__btn { gap:0; width:74px; height:30px; border-radius:8px; font-size:11px; }
.fmm-support-page .fmm-search__btn svg { display:none; }
.fmm-support-page__popular { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:18px; font-size:10px; color:#6B7280; }
.fmm-support-page__popular button { border:1px solid #E5E7EB; border-radius:999px; padding:5px 11px; background:#fff; color:#6B7280; font:inherit; cursor:pointer; }
.fmm-support-page__section-title { border-left:3px solid #FBBF24; padding-left:9px; font-size:20px !important; }
.fmm-support-page .fmm-catcards { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.fmm-support-page .fmm-catcard { min-height:130px; padding:20px; border-radius:10px; }
.fmm-support-page .fmm-catcard__icon { width:36px; height:36px; border-radius:10px; margin-bottom:8px; }
.fmm-support-page .fmm-catcard__icon img,
.fmm-support-page__topic-icon img { width:20px; height:20px; object-fit:contain; }
.fmm-support-page .fmm-catcard__label { font-size:14px; }
.fmm-support-page .fmm-catcard__sub { font-size:11px; line-height:18px; }
.fmm-support-page__topic-list { display:grid; gap:12px; }
.fmm-support-page__topic-list a { display:flex; align-items:center; gap:14px; padding:17px 18px; border:1px solid #E1E5EA; border-radius:10px; color:inherit; text-decoration:none; }
.fmm-support-page__topic-list a:hover { border-color:#FBBF24; }
.fmm-support-page__topic-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#FFF8E6; color:#24201D; font-size:12px; }
.fmm-support-page__topic-list a span:nth-child(2) { display:grid; gap:3px; flex:1; }
.fmm-support-page__topic-list b { font-size:13px; }
.fmm-support-page__topic-list small { font-size:11px; color:#374151; }
.fmm-support-page__topic-list strong { font-size:25px; font-weight:400; }
@media (max-width: 600px) { .fmm-support-page .fmm-helphero h1 { font-size:32px; } .fmm-support-page__hero-break { display:none; } }
.fmm-offer-save { min-width:100px !important; padding:9px 14px !important; font-size:11px; justify-content:center; }

/* Saved payment methods — Figma account settings panel */
.fmm-pm-page { max-width:650px; }
.fmm-pm-add .fmm-btn { min-height:38px; padding:9px 18px; font-size:11px; }
.fmm-pm-page__title { margin:0 0 5px; font-size:22px; font-weight:800; }
.fmm-pm-page__subtitle { margin:0 0 18px; color:#111827; font-size:10px; line-height:1.8; }
.fmm-pm-trust { display:flex; align-items:center; gap:12px; margin:0 0 22px; padding:13px 15px; border-radius:10px; background:#EAF2FF; color:#1E3A8A; }
.fmm-pm-trust > span { display:grid; place-items:center; width:26px; height:26px; border:1px dotted #60A5FA; border-radius:50%; color:#60A5FA; font-size:15px; font-weight:700; }
.fmm-pm-trust b,.fmm-pm-trust small { display:block; }.fmm-pm-trust b { font-size:10px; color:#111827; }.fmm-pm-trust small { margin-top:3px; font-size:8px; color:#64748B; }
.fmm-pm-add { margin-bottom:18px; }.fmm-pm-list { display:grid; gap:12px; }
.fmm-pm-card { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; padding:14px 15px; border:1px solid #E5E7EB; border-radius:10px; background:#fff; }
.fmm-pm-card.is-default { border-color:#FBBF24; box-shadow:0 0 0 1px #FBBF24 inset; }
.fmm-pm-card__main { display:flex; align-items:center; gap:13px; min-width:0; }.fmm-pm-card__name { display:flex; align-items:center; gap:8px; }.fmm-pm-card__name b { font-size:12px; }.fmm-pm-card__main small { display:block; margin-top:5px; color:#64748B; font-size:9px; }.fmm-pm-card__main em { display:block; margin-top:3px; color:#16A34A; font-size:8px; font-style:normal; }
.fmm-pm-brand { display:inline-grid; place-items:center; white-space:pre-line; width:44px; height:32px; border:1px solid #D1D5DB; border-radius:6px; background:#F8FAFC; font-size:12px; font-weight:800; line-height:.8; }.fmm-pm-brand.is-visa { color:#1D4ED8; }.fmm-pm-brand.is-mastercard { color:#DC2626; font-size:13px; }.fmm-pm-brand.is-amex,.fmm-pm-brand.is-american_express { color:#2563EB; font-size:10px; }.fmm-pm-brand.is-card { color:#64748B; font-size:9px; }
.fmm-pm-brand img { display:block; max-width:28px; max-height:22px; object-fit:contain; }
.fmm-pm-card__actions { display:flex; gap:8px; }.fmm-pm-action { border:0; border-radius:7px; padding:7px 11px; font-size:10px; cursor:pointer; }.fmm-pm-action--edit { color:#111827; background:#F8FAFC; border:1px solid #E2E8F0; }.fmm-pm-action--remove { color:#DC2626; background:#FEE2E2; }.fmm-pm-action:disabled { opacity:.55; cursor:wait; }
.fmm-pm-action svg { width:11px; height:11px; margin-right:4px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.fmm-pm-action:disabled svg { opacity:.7; }
.fmm-pm-action--edit { display:none; }
.fmm-contact-breadcrumb { margin:0 0 20px; color:#64748B; font-size:10px; }.fmm-contact-breadcrumb span { margin:0 6px; color:#94A3B8; }.fmm-contact-breadcrumb b { color:#111827; }.fmm-contact-urgent { display:grid; gap:4px; margin:0 0 42px; padding:14px 16px; border:1px solid #FECACA; border-radius:9px; background:#FEF2F2; color:#DC2626; font-size:10px; }.fmm-contact-urgent b { font-size:10px; }.fmm-contact-urgent span { font-size:9px; }.fmm-buyer-contact-page .fmm-ssplit--wide { align-items:start; }.fmm-buyer-contact-page .fmm-cshead h1 { font-size:22px; }.fmm-buyer-contact-page .fmm-cscard { border-radius:10px; }
.fmm-buyer-contact-page .fmm-ssplit--wide { grid-template-columns:minmax(0,650px); gap:0; max-width:650px; margin:0 auto; }.fmm-buyer-contact-page .fmm-ssplit--wide > div:first-child { display:none; }.fmm-buyer-contact-page .fmm-cswrap { width:100%; max-width:650px; gap:18px; }.fmm-buyer-contact-page .fmm-cshead { margin:0 0 18px; }.fmm-buyer-contact-page .fmm-cshead p { max-width:640px; line-height:1.45; }.fmm-buyer-contact-page .fmm-cscard { box-sizing:border-box; width:100%; border:1px solid #E5E7EB; border-radius:10px; box-shadow:none; padding:20px; }.fmm-buyer-contact-page .fmm-cscard__head + .fmm-csfield { margin-top:0; }
.fmm-buyer-contact-page .fmm-vwrap { max-width:720px; margin:0 auto; }
.fmm-support-settings { max-width:650px; }.fmm-support-settings__head { margin-bottom:18px; }.fmm-support-settings__card { padding:20px; border:1px solid #E5E7EB; border-radius:10px; background:#fff; }.fmm-support-settings__card label { display:grid; gap:7px; margin-bottom:16px; }.fmm-support-settings__card label b { font-size:11px; }.fmm-support-settings__card label em { color:#EF4444; font-style:normal; }.fmm-support-settings__card label small { color:#64748B; font-weight:400; }.fmm-support-settings__card input,.fmm-support-settings__card select,.fmm-support-settings__card textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #D1D5DB; border-radius:7px; font:inherit; font-size:11px; background:#fff; }.fmm-support-settings__card textarea { resize:vertical; }.fmm-support-settings__card > form > label > small { color:#94A3B8; font-size:9px; }.fmm-support-settings__note { display:grid; gap:3px; margin:18px 0; padding:13px; border-radius:8px; background:#FFFBEB; color:#92400E; font-size:10px; }.fmm-support-settings__note span { padding-left:19px; color:#64748B; font-size:9px; }.fmm-support-settings__card button { width:100%; justify-content:center; min-height:40px; }.fmm-support-settings__attachment { margin-bottom:8px!important; }.fmm-support-settings__drop { display:grid; place-items:center; gap:6px; padding:20px 12px; border:2px dashed #D9DEE8; border-radius:8px; text-align:center; color:#64748B; }.fmm-support-settings__drop.is-over { border-color:#FBBF24; background:#FFFBEB; }.fmm-support-settings__drop strong { color:#FBBF24; font-size:22px; }.fmm-support-settings__drop b { color:#334155; font-size:11px; }.fmm-support-settings__drop button { width:auto; min-height:30px; padding:6px 12px; border:1px solid #D1D5DB; border-radius:6px; background:#fff; color:#D97706; font-size:10px; }.fmm-support-settings__files { display:grid; gap:5px; margin:0 0 14px; padding:0; list-style:none; }.fmm-support-settings__files li { display:flex; justify-content:space-between; padding:7px 9px; border-radius:6px; background:#F8FAFC; color:#475569; font-size:10px; }.fmm-support-settings__files button { width:auto; min-height:0; padding:0 3px; border:0; background:transparent; color:#DC2626; }
.fmm-buyer-contact-page .fmm-snav { position:static; max-height:none; overflow:visible; padding:16px 8px; border-radius:16px; }.fmm-buyer-contact-page .fmm-snav__label { padding:8px 10px 6px; font-size:8px; line-height:12px; }.fmm-buyer-contact-page .fmm-snav a, .fmm-buyer-contact-page .fmm-snav > button, .fmm-buyer-contact-page .fmm-snav__out { min-height:32px; padding:6px 9px; gap:8px; font-size:11px; line-height:15px; }.fmm-buyer-contact-page .fmm-snav__icon { width:15px; height:15px; flex-basis:15px; }
.fmm-pm-add-button { display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:228px; max-width:100%; min-height:41px; margin-top:18px; padding:0 22px; border:0; border-radius:9px; background:#FBBF24; color:#111827; font-size:11px; font-weight:700; cursor:pointer; }.fmm-pm-accepted { box-sizing:border-box; width:232px; height:111px; margin-top:24px; padding:15px 17px; border:1px solid #D9E2F0; border-radius:10px; background:#fff; }.fmm-pm-accepted > b { display:block; color:#64748B; font-size:8px; line-height:1; }.fmm-pm-accepted > div { display:flex; gap:9px; margin:13px 0 11px; }.fmm-pm-accepted .fmm-pm-brand { width:32px; height:25px; border:0; border-radius:2px; font-size:8px; }.fmm-pm-accepted .fmm-pm-brand img { max-width:32px; max-height:25px; }.fmm-pm-accepted small { color:#94A3B8; font-size:8px; }
.fmm-pm-accepted > b { display:flex; align-items:center; gap:4px; }
.fmm-pm-accepted__icon { display:block; width:10px; height:8px; margin:0; object-fit:contain; }
@media (max-width:700px) { .fmm-pm-card { align-items:flex-start; flex-direction:column; }.fmm-pm-card__actions { width:100%; }.fmm-pm-action { flex:1; }.fmm-pm-page__subtitle br { display:none; }.fmm-pm-add-button { width:100%; } }
.fmm-snav { max-height:none!important; overflow-y:visible!important; }

/* Final authentication timeline overrides */
.fmm-authentication-page__howto { margin-top:56px; padding:28px 22px 24px; border:1px solid #EEF0F3; border-radius:12px; }
.fmm-authentication-page__howto .fmm-section__head { margin:0 0 20px!important; text-align:center!important; }
.fmm-authentication-page__howto .fmm-section__title { margin:0; font-size:18px!important; font-weight:800; text-transform:none; }
.fmm-authentication-page__howto .fmm-protsteps { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:0; border:0; }
.fmm-authentication-page__howto .fmm-protsteps:before { content:''; position:absolute; top:19px; left:8%; right:8%; height:1px; background:#E5E7EB; }
.fmm-authentication-page__howto .fmm-protstep { position:relative; min-height:0; padding:0 12px; border:0; border-radius:0; text-align:center; }
.fmm-authentication-page__howto .fmm-protstep__n { position:relative; z-index:1; width:38px; height:38px; margin:0 auto 14px; border:1px solid #E5E7EB; background:#fff; color:#374151; font-size:13px; }
.fmm-authentication-page__howto .fmm-protstep:last-child .fmm-protstep__n { border:0; background:#FFB91F; color:#111827; }
.fmm-authentication-page__howto .fmm-protstep b { display:block; margin-bottom:8px; font-size:11px; line-height:1.25; }
.fmm-authentication-page__howto .fmm-protstep p { margin:0; font-size:9px; line-height:1.55; color:#374151; }
@media (max-width:700px) { .fmm-authentication-page__howto .fmm-protsteps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 0; }.fmm-authentication-page__howto .fmm-protsteps:before { display:none; } }
@media (max-width:420px) { .fmm-authentication-page__howto .fmm-protsteps { grid-template-columns:1fr; } }
/* Figma disputed-orders treatment */
.fmm-orders-notice--blue { border-color:#FBBF24; background:#FFFBEB; color:#92400E; }
.fmm-orders-notice--blue img { filter:none; }
.fmm-dispute-details__status-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px; margin-bottom:10px; border-radius:7px; background:#FFFBEB; color:#64748B; font-size:9px; }
.fmm-dispute-details__status-row b { color:#D97706; font-size:10px; }
.fmm-dispute-details { width:300px; box-sizing:border-box; padding:16px; }
.fmm-dispute-details__product { display:flex; align-items:center; gap:10px; margin:14px 0 16px; padding:9px; min-height:56px; border-radius:7px; background:#F8FAFC; }
.fmm-dispute-details__product img { width:42px; height:42px; flex:0 0 42px; border-radius:5px; object-fit:cover; background:#E2E8F0; }
.fmm-dispute-details__product b,.fmm-dispute-details__product small,.fmm-dispute-details__product strong { display:block; }
.fmm-dispute-details__product b { color:#24201D; font-size:10px; line-height:1.2; }
.fmm-dispute-details__product small { margin-top:4px; color:#94A3B8; font-size:8px; }
.fmm-dispute-details__product strong { margin-top:3px; color:#24201D; font-size:11px; }
.fmm-dispute-details__summary { margin:16px 0 12px; display:grid; gap:4px; }.fmm-dispute-details__summary b { color:#24201D; font-size:11px; }.fmm-dispute-details__summary small { color:#64748B; font-size:8px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-order-subfilters--tab { display:flex !important; grid-template-columns:none !important; grid-template-rows:none !important; flex-wrap:nowrap !important; align-items:center; gap:8px; margin:14px 0 16px; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-order-subfilters--tab[style*="display: none"] { display:none !important; }
.fmm-asplit:has(.fmm-tabs--underline) .fmm-order-subfilters--tab button { display:inline-flex !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important; min-height:28px; padding:6px 12px; border-radius:999px; white-space:nowrap; font-size:10px; }
@media (max-width:700px) { .fmm-order-subfilters--tab { flex-wrap:wrap; } }
.fmm-dispute-details__status-row + .fmm-dispute-details__next { margin-top:0; }
.fmm-dispute-details__timeline { position:relative; gap:13px; margin:0 0 17px; padding-left:0; border-left:0; }
.fmm-dispute-details__timeline::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:#E2E8F0; }
.fmm-dispute-details__timeline > div { min-height:22px; padding-left:10px; text-align:left; }
.fmm-dispute-details__timeline > div::before { left:-4px; top:2px; width:9px; height:9px; }
.fmm-dispute-details__timeline > div b { font-size:9px; }
.fmm-dispute-details__timeline > div small { font-size:8px; line-height:1.25; }
.fmm-dispute-details__timeline > div p { margin:4px 0 0; color:#94A3B8; font-size:8px; line-height:1.35; }
.fmm-dispute-details__timeline > div:last-child p { grid-column:1; text-align:left; }
.fmm-dispute-details__timeline > div:last-child { color:#24201D; text-align:right; }
.fmm-dispute-details__timeline > div:last-child small { text-align:left; color:#94A3B8; }
.fmm-dispute-details .fmm-order-details__button { margin-top:2px; min-height:34px; box-sizing:border-box; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard__top .fmm-ostatus { text-transform:uppercase; letter-spacing:.03em; font-size:10px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard__price-line { margin-top:4px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard__price-line .fmm-ocard__price { display:block; font-size:16px; line-height:22px; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-ocard:not(.is-selected) .fmm-ocard__foot .fmm-obtn--dark,
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-ocard:not(.is-selected) .fmm-ocard__foot .fmm-obtn--brand { background:#fff; border-color:#E5E7EB; color:#111827; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-ocard.is-selected .fmm-ocard__foot .fmm-obtn--dark,
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-ocard.is-selected .fmm-ocard__foot .fmm-obtn--brand { background:#F5B400; border-color:#F5B400; color:#111827; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard__foot .fmm-obtn { border-radius:8px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ostage__bar { height:6px; border-radius:999px; background:#E5E7EB; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ostage__bar i { border-radius:999px; }
.fmm-order-details__support { display:block !important; width:100%; min-height:50px; padding:14px; border:1px solid #E5E7EB; border-radius:8px; background:#fff; color:#111827; text-align:center; text-decoration:none; font-size:12px; box-sizing:border-box; }
.fmm-order-details__actions { display:grid; gap:12px; margin-top:24px; }
.fmm-order-details__support { display:flex !important; align-items:center; justify-content:center; width:100%; min-height:50px; padding:14px; border:1px solid #E5E7EB; border-radius:8px; background:#fff; color:#111827; text-align:center; text-decoration:none; font-size:12px; box-sizing:border-box; }
.fmm-order-details__trust { display:flex; align-items:flex-start; gap:10px; margin-top:24px; padding:12px; min-height:63px; border-radius:8px; background:#F9FAFB; color:#6B7280; font-size:10px; line-height:1.45; box-sizing:border-box; }
.fmm-order-details__trust svg { display:block; width:14px !important; height:16px !important; flex:0 0 14px; margin-top:1px; color:#6B7280; }
.fmm-order-details__timeline--active span { display:flex !important; flex-direction:column; gap:4px; min-height:60px; }
.fmm-order-details__timeline--active span b,
.fmm-order-details__timeline--active span small { display:block; line-height:1.35; }
.fmm-order-details__timeline--active span b { font-size:12px; }
.fmm-order-details__timeline--active span small { font-size:10px; color:#6B7280; }
.fmm-order-details__actions > a { height:50px; min-height:50px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.fmm-order-details__timeline--active { gap:0 !important; }
.fmm-order-details__timeline--active::before { bottom:20px !important; }
.fmm-order-details__timeline--active span:nth-child(1),
.fmm-order-details__timeline--active span:nth-child(2),
.fmm-order-details__timeline--active span:nth-child(3) { min-height:60px; }
.fmm-order-details__timeline--active span:nth-child(4) { min-height:44px; }
.fmm-order-details__timeline--active span:nth-child(5) { min-height:20px; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-order-details__button { height:48px; min-height:48px; padding:12px; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-order-details__actions { grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-order-details__actions > a { height:40px; min-height:40px; padding:9px 8px; font-size:10px; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-order-details__timeline--active { margin-top:14px; margin-bottom:10px; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'active'"] .fmm-order-details__trust { margin-top:14px; }
.fmm-completed-filters { justify-content:flex-start; }
.fmm-completed-filters button { min-height:30px; padding:7px 14px; }
.fmm-completed-filters button.is-on { background:#FBBF24; border-color:#FBBF24; color:#111827; }
.fmm-completed-filters button:not(.is-on) { background:#fff; color:#6B7280; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'completed'"] { grid-template-columns:minmax(0,2fr) minmax(300px,1fr); column-gap:24px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-completed-card-action { display:inline-flex; align-items:center; gap:5px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-completed-card-action img,
.fmm-section:has(.fmm-tabs--underline) .fmm-completed-icon-button img { width:13px; height:13px; object-fit:contain; }
.fmm-section:has(.fmm-tabs--underline) .fmm-completed-icon-button { display:flex; align-items:center; justify-content:center; gap:5px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-completed-details__actions .fmm-order-details__button { border:0; cursor:pointer; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'completed'"] .fmm-order-details__head { margin:-20px -20px 0; padding:20px; border-bottom:1px solid #E5E7EB; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'completed'"] .fmm-completed-details__footer { margin:16px -20px -20px; border-top:1px solid #E5E7EB; padding:14px 20px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-completed-details__rows > div { border-bottom:1px solid #E5E7EB; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'completed'"] { grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:24px; }
.fmm-section:has(.fmm-tabs--underline) > .fmm-container > .fmm-asplit > div > div[x-show="tab === 'completed'"] .fmm-order-details { width:100%; margin:0!important; padding:20px; box-sizing:border-box; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row { grid-template-columns:96px minmax(0,1fr) auto; gap:20px; padding:20px; border-radius:12px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row.is-selected { border-color:#F5B400; box-shadow:0 0 0 1px #F5B400 inset; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__side { align-items:flex-end; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row { min-height:156px; align-items:center; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__thumb--lg { width:96px; height:96px; border-radius:10px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__info { align-self:center; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__title--lg { font-size:16px; line-height:22px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__side { align-self:stretch; justify-content:center; gap:14px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__acts2 { justify-content:flex-end; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__side { width:max-content; min-width:0; display:grid; grid-template-rows:auto auto; align-content:center; justify-items:end; align-self:center; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__acts2 { width:max-content; height:32px; align-items:center; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__acts2 .fmm-obtn { height:32px; min-height:32px; display:inline-flex; align-items:center; white-space:nowrap; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__acts2 { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__acts2 .fmm-obtn--brand { order:-4; background:#F5B400; border-color:#F5B400; color:#111827; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-obtn { min-height:30px; padding:7px 12px; border-radius:7px; }
.fmm-section:has(.fmm-tabs--underline) .fmm-ocard--row .fmm-ocard__price--lg { margin-top:5px; font-size:18px; }
.fmm-completed-details__item { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid #E5E7EB; }
.fmm-completed-details__item img { width:48px; height:48px; object-fit:cover; border-radius:6px; }
.fmm-completed-details__item b,.fmm-completed-details__item small { display:block; }.fmm-completed-details__item b { font-size:13px; }.fmm-completed-details__item small { margin-top:4px; color:#6B7280; font-size:10px; }
.fmm-completed-details__rows { display:grid; }.fmm-completed-details__rows > div { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid #E5E7EB; font-size:10px; }.fmm-completed-details__rows span { color:#6B7280; }.fmm-completed-details__rows strong { font-size:11px; }.fmm-completed-details__delivered { padding:3px 7px; border-radius:5px; background:#DCFCE7; color:#15803D; font-size:9px; }.fmm-completed-details__store { color:#D99A00; }.fmm-completed-details__actions { margin-top:16px; }.fmm-completed-details__actions > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }.fmm-completed-details__actions > div a { padding:10px; border:1px solid #E5E7EB; border-radius:7px; color:#111827; text-align:center; text-decoration:none; font-size:10px; }.fmm-completed-details__footer { margin:16px -20px -20px; padding:14px 20px; border-top:1px solid #E5E7EB; color:#9CA3AF; font-size:9px; line-height:1.4; }
/* Completed cards use a two-row layout, independent of the legacy row card. */
.fmm-complete-layout .fmm-complete-card {
  display:grid; grid-template-columns:96px minmax(0,1fr) auto;
  grid-template-rows:auto auto; gap:18px 20px; padding:20px;
  border:1px solid #E5E7EB; border-radius:14px; background:#fff;
  box-shadow:0 2px 4px rgba(15,23,42,.05); min-width:0;
}
.fmm-complete-layout .fmm-complete-card.is-selected { border-color:#FBBF24; }
.fmm-complete-card .fmm-ocard__thumb { grid-column:1; grid-row:1 / 3; width:96px; height:96px; padding:8px; background:#F9FAFB; border-radius:10px; box-sizing:border-box; }
.fmm-complete-card .fmm-ocard__thumb img { width:100%; height:100%; object-fit:contain; }
.fmm-complete-card .fmm-ocard__info { grid-column:2; grid-row:1; min-width:0; align-self:start; }
.fmm-complete-card .fmm-ocard__title { font-size:14px; line-height:20px; margin:0 0 4px; }
.fmm-complete-card .fmm-ocard__meta { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; font-size:11px; color:#9CA3AF; }
.fmm-complete-card .fmm-ocard__side { grid-column:3; grid-row:1; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:8px; border:0; padding:0; width:auto; }
.fmm-complete-card .fmm-ocard__price { font-size:16px; line-height:22px; }
.fmm-complete-badge { display:inline-block; padding:3px 8px; border-radius:4px; background:#E8F5E9; color:#15803D; font-size:9px; line-height:14px; font-weight:600; }
.fmm-complete-card .fmm-ocard__acts2 { grid-column:2 / 4; grid-row:2; display:flex; align-items:center; gap:10px; padding:12px 0 0; border-top:1px solid #E5E7EB; width:100%; min-width:0; }
.fmm-complete-card .fmm-ocard__acts2 .fmm-obtn { flex:0 0 auto; height:30px; min-height:30px; padding:6px 12px; border-radius:6px; font-size:11px; font-weight:500; }
.fmm-complete-card .fmm-ocard__acts2 .fmm-obtn--brand { background:#FBBF24; border-color:#FBBF24; color:#111; }
.fmm-complete-card .fmm-ocard__acts2 .fmm-obtn--soft { margin-left:auto; }
.fmm-complete-layout .fmm-order-details__head small { display:block; margin-top:4px; font-size:11px; color:#6B7280; }
.fmm-complete-layout .fmm-completed-details__item { align-items:center; border:0; padding:20px 0 10px; }
.fmm-complete-layout .fmm-completed-details__rows > div:last-child { border-bottom:0; padding-bottom:8px; }
.fmm-complete-layout .fmm-completed-details__rows > div:last-child strong { font-size:16px; }
.fmm-complete-layout .fmm-completed-details__actions > button { width:100%; min-height:38px; border-radius:9px; font-size:13px; background:#FBBF24; color:#111; }
.fmm-complete-layout .fmm-completed-details__footer { background:#FAFBFC; border-radius:0 0 12px 12px; }
@media (max-width:600px) {
  .fmm-complete-layout .fmm-complete-card { grid-template-columns:64px minmax(0,1fr) auto; gap:12px; padding:14px; }
  .fmm-complete-card .fmm-ocard__thumb { width:64px; height:72px; grid-row:1; }
  .fmm-complete-card .fmm-ocard__acts2 { grid-column:1 / 4; flex-wrap:wrap; }
}

/* Marketplace layouts at narrow widths. These rules follow the page-specific
   styles above so older desktop declarations cannot undo the phone layout. */
.fmm-filter-toggle { display:none; }
.fmm-filter-toggle__label { display:none; }
.fmm-social-seller-slide { flex:0 0 296px; min-width:0; }

@media (max-width:900px) {
  .fmm-browse { display:grid; grid-template-columns:minmax(0,1fr); }
  .fmm-filter-toggle { display:block; position:absolute; width:1px; height:1px; opacity:0; }
  .fmm-filter-toggle__label {
    display:flex; align-items:center; justify-content:space-between;
    min-height:44px; padding:10px 16px; border:1px solid var(--fmm-border);
    border-radius:10px; background:#fff; font-size:14px; font-weight:700;
    cursor:pointer;
  }
  .fmm-filter-toggle:focus-visible + .fmm-filter-toggle__label { outline:2px solid var(--fmm-yellow); outline-offset:2px; }
  .fmm-filter-toggle:checked + .fmm-filter-toggle__label span { transform:rotate(180deg); }
  .fmm-browse__sidebar > .fmm-filters { display:none; }
  .fmm-filter-toggle:checked ~ .fmm-filters { display:block; }
}

@media (max-width:640px) {
  .fmm-container, .fmm-page-head, .fmm-pdp, .fmm-cart, .fmm-asplit { min-width:0; }
  .fmm-search, .fmm-search__form, .fmm-search__input { min-width:0; }
  .fmm-search__input { width:100%; }
  .fmm-header__bar { gap:10px; }
  .fmm-header__actions { gap:8px; }
  .fmm-header--bare .fmm-header__bar { gap:8px; }
  .fmm-header--bare .fmm-header__secure { font-size:12px; }
  .fmm-header--bare .fmm-header__actions { gap:6px; }
  .fmm-hero__title { font-size:clamp(30px,9vw,40px); overflow-wrap:anywhere; }
  .fmm-pill { display:block; max-width:100%; line-height:1.35; }
  .fmm-pill > svg { display:inline-block; vertical-align:middle; margin-right:6px; }
  .fmm-hero__cta > * { flex:1 1 100%; justify-content:center; }
  .fmm-promo--meetups .fmm-promo__body { padding:24px 18px; min-width:0; }
  .fmm-promo--meetups .fmm-promo__title { font-size:clamp(28px,8vw,38px); line-height:1.12; }
  .fmm-promo--meetups .fmm-promo__lead { font-size:15px; line-height:1.55; }
  .fmm-sband__title { white-space:normal; overflow-wrap:anywhere; }
  .fmm-sband__cta > * { max-width:100%; }
  .fmm-sband__proof { flex-wrap:wrap; gap:12px; }
  .fmm-sband__prooftext { flex:1 1 160px; }
  .fmm-gband__body, .fmm-sband__body { min-width:0; }
  .fmm-social-seller-slide { flex:0 0 min(296px,calc(100vw - 48px)); }
  .fmm-vp-section__rail > * { flex-basis:min(335px,calc(100vw - 32px)); }
  .fmm-vp { height:auto; min-height:128px; }
  .fmm-lux__price { flex-wrap:wrap; }
  .fmm-page-head__acts { min-width:0; }
  .fmm-searchbox { max-width:100%; min-width:0; }
  .fmm-searchbox input { width:100%; min-width:0; }
  .fmm-cart__bulk { flex-wrap:wrap; }
  .fmm-cart__bulkacts, .fmm-line__foot { flex-wrap:wrap; }
  .fmm-cart { grid-template-columns:minmax(0,1fr); }
  .fmm-cart > div, .fmm-cart > aside { min-width:0; }
  .fmm-co__main { grid-template-columns:minmax(0,1fr); }
  .fmm-co__main > * { min-width:0; }
  .fmm-steps { min-width:0; max-width:100%; flex-wrap:wrap; gap:8px 14px; }
  .fmm-steps li { font-size:12px; }
  .fmm-modal { padding:12px; }
  .fmm-modal__box { max-height:calc(100dvh - 24px); overflow-y:auto; padding:20px; }
  .fmm-rev__list, .fmm-rev__item { min-width:0; }
  .fmm-rev__item { padding:16px; }
  .fmm-rev__who { flex-wrap:wrap; gap:10px; min-width:0; }
  .fmm-rev__vp { margin-left:0; white-space:normal; }
  .fmm-rev__filters, .fmm-rev__filter-chips { min-width:0; max-width:100%; }
  .fmm-rev__filter-list { max-width:100%; }
  .fmm-plsteps { grid-template-columns:minmax(0,1fr); min-width:0; }
  .fmm-plstep, .fmm-plmock, .fmm-plmock__row { min-width:0; }
  .fmm-plmock__row { flex-wrap:wrap; }
  .fmm-vtoolbar__acts { width:100%; min-width:0; flex-wrap:wrap; }
  .fmm-vtoolbar__acts .fmm-vfind { flex:1 1 180px; }
  .fmm-vtoolbar__acts .fmm-vselect { max-width:100%; }
}

@media (max-width:980px) {
  /* On a phone the purchase panel belongs immediately after the gallery. */
  .fmm-pdp__main { display:contents; }
  .fmm-pdp__main > :first-child { order:1; min-width:0; }
  .fmm-pdp__aside { order:2; min-width:0; }
  .fmm-pdp__main > :not(:first-child) { order:3; min-width:0; }
}

@media (max-width:380px) {
  .fmm-line__right {
    grid-column:1 / -1;
    flex-direction:row-reverse;
    justify-content:space-between;
    align-items:center;
  }
  .fmm-lux { grid-template-columns:minmax(0,1fr); }
  .fmm-hero__title { font-size:30px; }
}

/* Keep the buyer settings content ahead of its long navigation on phones. */
.fmm-snav-wrap { position:sticky; top:16px; align-self:start; min-width:0; }
.fmm-snav-wrap .fmm-snav { position:static; }
.fmm-snav-toggle { display:none; }

@media (max-width:760px) {
  .fmm-snav-wrap { position:static; }
  .fmm-snav-toggle {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; min-height:44px; padding:10px 14px;
    border:1px solid var(--fmm-border); border-radius:10px;
    background:#fff; color:var(--fmm-text); font:inherit; font-size:14px;
    font-weight:700; cursor:pointer;
  }
  .fmm-snav-toggle:focus-visible { outline:2px solid var(--fmm-yellow); outline-offset:2px; }
  .fmm-snav-wrap .fmm-snav { display:none; margin-top:10px; }
  .fmm-snav-wrap .fmm-snav.is-open { display:block; }
}

/* Allow offer content to shrink and wrap at every width, not only tiny phones. */
.fmm-vpage--offers .fmm-voffers { grid-template-columns:minmax(0,1fr); }
.fmm-vpage--offers .fmm-voffer { min-width:0; }
.fmm-vpage--offers .fmm-voffer__main h2 { overflow-wrap:anywhere; }
.fmm-vpage--offers .fmm-voffer__right,
.fmm-vpage--offers .fmm-vprice { min-width:0; }
.fmm-vpage--offers .fmm-vprice__row,
.fmm-vpage--offers .fmm-voffer__acts { flex-wrap:wrap; }

/* Compact the offer queue tabs only on narrow phones. */
@media (max-width:380px) {
  .fmm-vpage--offers .fmm-vpills {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
  }
  .fmm-vpage--offers .fmm-vpills button {
    justify-content:center;
    padding:7px 4px;
    font-size:11px;
    text-align:center;
  }
}

/* Give the seller's item details room beside the thumbnail on narrow phones. */
@media (max-width:380px) {
  .fmm-seller-order-item {
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:8px 12px;
  }
  .fmm-seller-order-item > .fmm-line__thumb { grid-row:1 / span 2; }
  .fmm-seller-order-item > b:last-child { grid-column:2; }
  .fmm-seller-order-item .fmm-btn { max-width:100%; white-space:normal; }
  .fmm-seller-offer-shipping { display:grid; gap:4px; }
  .fmm-seller-offer-shipping b { font-size:16px; line-height:1.35; }
}

/* The buyer order timeline scrolls inside its card on tablet and phone screens. */
@media (max-width:1000px) {
  .fmm-order-detail-page .fmm-od { grid-template-columns:minmax(0,1fr); }
  .fmm-order-detail-page .fmm-live { min-width:0; }
}

@media (max-width:620px) {
  .fmm-order-detail-page .fmm-od__item {
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:12px;
    min-width:0;
  }
  .fmm-order-detail-page .fmm-od__meta {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px 10px;
    padding-top:12px;
    border-top:1px solid var(--fmm-border);
    text-align:left;
  }
  .fmm-order-detail-page .fmm-od__meta .fmm-tot__k { margin-top:0 !important; }
  .fmm-order-detail-page .fmm-od__meta b { margin-top:0; text-align:right; }
}

/* Keep buyer dispute facts and the price inside a phone-width card. */
.fmm-buyer-dispute-card__body { grid-template-columns:72px minmax(0,1fr) auto; }
.fmm-buyer-dispute-card__facts {
  grid-template-columns:minmax(0,1fr);
  text-align:left;
  overflow-wrap:anywhere;
}

@media (max-width:620px) {
  .fmm-buyer-dispute-card__body { grid-template-columns:72px minmax(0,1fr); }
  .fmm-buyer-dispute-card__body .fmm-order__price {
    grid-column:2;
    display:grid;
    gap:3px;
    text-align:left;
    white-space:normal;
  }
  .fmm-support-page .fmm-helphero { margin-inline:-16px; padding-inline:16px; }

  .fmm-dispute-states .fmm-dispute-notice,
  .fmm-dispute-states .fmm-dispute-review-card p,
  .fmm-dispute-states .fmm-review-stages,
  .fmm-dispute-states .fmm-dispute-state-aside > div,
  .fmm-dispute-states .fmm-dispute-state-aside .fmm-btn,
  .fmm-dispute-states .fmm-dispute-details > div,
  .fmm-dispute-states .fmm-dispute-activity-row,
  .fmm-dispute-states .fmm-dispute-item-card .fmm-dispute-product small,
  .fmm-dispute-states .fmm-dispute-type-row { font-size:12px; line-height:1.45; }
  .fmm-dispute-states .fmm-dispute-state-aside .amber,
  .fmm-dispute-states .fmm-dispute-state-pill,
  .fmm-dispute-states .fmm-dispute-type-row b { font-size:11px; }
  .fmm-dispute-states .fmm-dispute-details h2,
  .fmm-dispute-states .fmm-dispute-activity h2 { font-size:15px; }
}

/* Let a long search title wrap without losing its breadcrumb separator. */
@media (max-width:620px) {
  .fmm-browse-crumbs { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; }
  .fmm-browse-crumbs__current { min-width:0; overflow-wrap:anywhere; }
}

/* Keep the original price and discount together when the mobile price row wraps. */
.fmm-buy__compare { display:inline-flex; align-items:center; gap:8px; }

/* Use the full phone width for category source shortcuts. */
@media (max-width:399px) {
  .fmm-srcgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 8px; }
  .fmm-src { width:auto; min-width:0; }
  .fmm-srev__tools { flex-wrap:wrap; gap:10px; }
  .fmm-srev__tools .fmm-chipnav { width:100%; gap:8px; }
  .fmm-srev__photos { white-space:nowrap; }
  .fmm-srev__sort { margin-left:auto; }
}

/* Space the pricing breadcrumb when its labels wrap on a phone. */
.fmm-verification-pricing__crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }

/* Restore a phone-sized type scale for the authentication introduction. */
@media (max-width:700px) {
  .fmm-authentication-page .fmm-authentication-page__hero { min-height:0; padding:22px 20px; }
  .fmm-authentication-page .fmm-authentication-page__hero h1 { font-size:26px; line-height:1.2; letter-spacing:-.4px; margin:12px 0; }
  .fmm-authentication-page .fmm-authentication-page__hero p { font-size:14px; line-height:1.6; }
  .fmm-authentication-page .fmm-cat { min-height:0; }
  .fmm-verification-pricing__hero p { font-size:12px; line-height:1.65; }
  .fmm-verification-pricing__copy b { font-size:12px; line-height:1.3; }
  .fmm-verification-pricing__copy small { font-size:10.5px; line-height:1.45; }
  .fmm-verification-pricing__price small { font-size:9px; }
  .fmm-verification-pricing__notice { font-size:12px; line-height:1.5; }
  .fmm-verification-pricing__notice span { font-size:11px; line-height:1.5; }
  .fmm-authentication-page__howto .fmm-protstep b { font-size:13px; line-height:1.35; }
  .fmm-authentication-page__howto .fmm-protstep p { font-size:12px; line-height:1.5; }
  .fmm-authentication-page__note { font-size:12px; line-height:1.5; }
}

/* Keep the two login options legible on narrow cards. */
.fmm-authrow .fmm-check,
.fmm-authrow .fmm-vlink { flex-shrink:0; white-space:nowrap; }

/* Keep the country picker reachable on short phone and landscape screens. */
.fmm-country-gate__dialog { max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; }
@media (max-width:540px) {
  .fmm-country-gate__dialog { max-height:100vh; max-height:100dvh; }
}

/* Nigeria Packages: use the full dashboard width shown in the design. */
.fmm-orders-page .fmm-asplit--orders-full { grid-template-columns: minmax(0, 1fr); }
.fmm-packages-page .fmm-page-head { margin-bottom: 42px; }
.fmm-packages-page .fmm-statcards { gap: 16px; margin-bottom: 30px; }
.fmm-packages-page .fmm-pkgs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fmm-packages-page .fmm-pkg { gap: 8px; padding: 12px; }
.fmm-packages-page .fmm-pkg__id { gap: 8px; }
.fmm-packages-page .fmm-pkg__thumb { width: 34px; height: 34px; border-radius: 9px; }
.fmm-packages-page .fmm-pkg__idend { gap: 5px; padding-left: 0; }
.fmm-packages-page .fmm-pkg__ref b { font-size: 10px; }
.fmm-packages-page .fmm-pkg__name { font-size: 12px; margin-top: 4px; }
.fmm-packages-page .fmm-pkg__when { font-size: 10px; }
.fmm-packages-page .fmm-pkg__weights { padding: 9px 8px; gap: 4px; }
.fmm-packages-page .fmm-pkg__weights b,
.fmm-packages-page .fmm-pkg__billable i { font-size: 10px; }
.fmm-packages-page .fmm-pkg__note { padding: 7px 8px; font-size: 9px; }
.fmm-packages-page .fmm-pkg__foot .fmm-btn { padding: 8px 6px; font-size: 10px; border-radius: 8px; }
.fmm-packages-page .fmm-pkg__menu > button { width: 30px; height: 32px; border-radius: 8px; }
.fmm-packages-page .fmm-pkgadd { margin-top: 16px; padding: 17px; }
.fmm-packages-page .fmm-pkgactions { margin-top: 16px; }
.fmm-packages-page .fmm-pkgactions__item { padding: 17px 16px; }
.fmm-packages-page .fmm-pkghead { align-items: center; margin-top: 22px; }
.fmm-packages-page .fmm-shopfrom { margin-top: 16px; }
.fmm-packages-page .fmm-paybar {
    left: 50%; right: auto; bottom: 14px;
    width: min(calc(var(--fmm-container) - 48px), calc(100% - 48px));
    transform: translateX(-50%);
    border: 1px solid var(--fmm-border);
    border-radius: 12px;
    padding: 10px 14px;
}
.fmm-packages-page .fmm-paybar__inner { max-width: none; padding: 0; }

/* Packages summary cards — colours from the "Stats Grid" Figma frame (client
   sheet row 176): one yellow palette instead of a colour per card. White cards
   get a yellow icon tile with a black glyph and a pale amber tag; the active
   At Warehouse card is solid yellow with translucent white tile and tag. */
.fmm-packages-page .fmm-statcard--blue .fmm-statcard__ico { background:#FBBF24; color:#000; }
.fmm-packages-page .fmm-statcard--blue .fmm-statcard__tag { background:rgba(251,191,36,.08); color:#FBBF24; }
.fmm-packages-page .fmm-statcard--hot { background:#FFB822; border-color:#FFB822; }
.fmm-packages-page .fmm-statcard--hot .fmm-statcard__ico { background:rgba(255,255,255,.2); color:#0F0F13; }
.fmm-packages-page .fmm-statcard--hot .fmm-statcard__tag { background:rgba(255,255,255,.3); color:#0F0F13; }
.fmm-packages-page .fmm-statcard--hot b { color:#0F0F13; }
.fmm-packages-page .fmm-statcard--hot > span:last-child { color:rgba(15,15,19,.7); }
.fmm-packages-page .fmm-statcard--violet .fmm-statcard__ico { background:#FFB822; color:#000; }
.fmm-packages-page .fmm-statcard--violet .fmm-statcard__tag { background:#FFF8EB; color:#FFB822; }
.fmm-packages-page .fmm-statcard--orange .fmm-statcard__ico { background:#FFB822; color:#000; }
.fmm-packages-page .fmm-statcard--orange .fmm-statcard__tag { background:#FFF7ED; color:#FFB822; }
.fmm-packages-page .fmm-statcard__ico img { display:block; width:auto; height:auto; object-fit:contain; }
.fmm-packages-page .fmm-pkg { gap:5px; padding:12px 12px 10px; border-radius:12px; }
.fmm-packages-page .fmm-pkg::before { top:-1px; left:1px; right:1px; height:3px; border-radius:11px 11px 0 0; clip-path:inset(0 round 11px 11px 0 0); }
.fmm-packages-page .fmm-pkg__id { align-items:center; }
.fmm-packages-page .fmm-pkg__state { padding:3px 7px; border-radius:5px; }
.fmm-packages-page .fmm-pkg__state { display:inline-flex; align-items:center; gap:4px; }
.fmm-packages-page .fmm-pkg__state-icon { display:block; flex:none; width:10px; height:10px; background:currentColor; -webkit-mask-image:var(--status-icon); mask-image:var(--status-icon); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.fmm-packages-page .fmm-pkg.is-violet .fmm-pkg__state-icon { width:9px; height:11px; }
.fmm-packages-page .fmm-pkg__name { margin-top:3px; line-height:1.25; }
.fmm-packages-page .fmm-pkg__when { margin-top:2px; }
.fmm-packages-page .fmm-pkg__prog-head { margin-bottom:4px; font-size:11px; }
.fmm-packages-page .fmm-pkg__prog-head b { font-size:11px; }
.fmm-packages-page .fmm-pkg__prog-bar { height:4px; }
.fmm-packages-page .fmm-pkg__prog-legend { margin-top:4px; }
.fmm-packages-page .fmm-pkg__prog-legend em { font-size:9px; }
.fmm-packages-page .fmm-pkg__weights { padding:8px; border-radius:10px; }
.fmm-packages-page .fmm-pkg__weights em { margin-bottom:3px; }
.fmm-packages-page .fmm-pkg__dims { line-height:1.2; }
.fmm-packages-page .fmm-pkg__note { padding:6px 8px; border-radius:8px; }
.fmm-packages-page .fmm-pkg__foot { gap:6px; }
.fmm-packages-page .fmm-pkg__foot .fmm-btn { padding:7px 6px; font-size:10px; border-radius:8px; }
.fmm-packages-page .fmm-package-lock { display:block; flex:none; width:9px; height:11px; object-fit:contain; }
.fmm-packages-page .fmm-pkgfilters .fmm-pkgfilters__more img { width:20px; height:19px; flex-basis:20px; }

@media (max-width: 1180px) {
    .fmm-packages-page .fmm-pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .fmm-packages-page .fmm-statcards,
    .fmm-packages-page .fmm-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmm-packages-page .fmm-page-head { margin-bottom: 28px; }
}
@media (max-width: 560px) {
    .fmm-packages-page .fmm-pkgs { grid-template-columns: minmax(0, 1fr); }
    .fmm-packages-page .fmm-statcards { gap: 10px; }
    .fmm-packages-page .fmm-statcard { padding: 14px; }
    .fmm-packages-page .fmm-statcard b { font-size: 24px; }
    .fmm-packages-page .fmm-paybar__inner { gap: 8px; }
}

/* VitalSwap quote + payment outcome screens, aligned to the package checkout Figma. */
.fmm-pp-shell { max-width: var(--fmm-container); }
.fmm-pp-next { max-width: var(--fmm-container); }
.fmm-pp-naira { width: 100%; max-width: none; margin: 0 0 64px; padding: 0; }
.fmm-pp-naira__grid { display: grid; width: 100%; max-width: var(--fmm-container); margin: 0 auto; padding: 0 24px; grid-template-columns: minmax(0, 1.32fr) minmax(300px, .92fr); gap: 24px; align-items: start; }
.fmm-pp-naira__left { display: grid; gap: 14px; min-width: 0; }
.fmm-pp-naira__package, .fmm-pp-naira__conversion, .fmm-pp-naira__provider-card, .fmm-pp-naira__actions { border: 1px solid #E9EBEF; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(24,34,50,.025); }
.fmm-pp-naira__package { padding: 14px 15px 0; }
.fmm-pp-naira__product { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-bottom: 12px; }
.fmm-pp-naira__producticon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border: 1px solid #E8EBEF; border-radius: 9px; background: #F9FAFB; color: #9BA3AF; }
.fmm-pp-naira__productcopy { display: grid; flex: 1; min-width: 0; gap: 3px; color: #20242B; font-size: 12px; }
.fmm-pp-naira__productcopy b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fmm-pp-naira__productcopy small { color: #6B7280; font-size: 10px; }
.fmm-pp-naira__count { padding: 4px 7px; border-radius: 999px; background: #F3F4F6; color: #69717F; font-size: 9px; white-space: nowrap; }
.fmm-pp-naira__shipping { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0 12px; border-top: 1px solid #ECEEF1; color: #252932; font-size: 11px; }
.fmm-pp-naira__shipping b { font-weight: 750; }
.fmm-pp-naira__conversion { display: flex; flex-direction: column; align-items: center; padding: 18px 14px 16px; text-align: center; }
.fmm-pp-naira__usdlabel { color: #687286; font-size: 11px; }
.fmm-pp-naira__usd { margin-top: 4px; color: #A4ABB8; font-size: 20px; line-height: 1.1; text-decoration: line-through; }
.fmm-pp-naira__down { display: grid; place-items: center; width: 25px; height: 25px; margin: 13px 0 8px; border-radius: 50%; background: #FFF8E6; color: var(--fmm-yellow-dark, #EBA900); }
.fmm-pp-naira__paylabel { color: #16191F; font-size: 11px; }
.fmm-pp-naira__ngn { margin-top: 3px; color: #111318; font-size: clamp(23px, 3vw, 30px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.fmm-pp-naira__rate { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 5px 9px; border: 1px solid #EAEDF1; border-radius: 999px; background: #FAFBFC; color: #515A69; font-size: 9px; }
.fmm-pp-naira__rate svg { color: var(--fmm-yellow-dark, #EBA900); }
.fmm-pp-naira__right { display: grid; gap: 12px; min-width: 0; }
.fmm-pp-naira__right > h2 { margin: 2px 2px 0; color: #191C22; font-size: 12px; font-weight: 750; }
.fmm-pp-naira__provider-card { padding: 13px; }
.fmm-pp-naira__provider-head { display: flex; align-items: center; gap: 8px; }
.fmm-pp-naira__vsicon { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #172C55; color: #fff; }
.fmm-pp-naira__provider-head > span:nth-child(2) { display: grid; flex: 1; gap: 3px; color: #273244; font-size: 11px; }
.fmm-pp-naira__provider-head small { display: flex; align-items: center; gap: 4px; color: #15965B; font-size: 9px; }
.fmm-pp-naira__provider-head small i { width: 6px; height: 6px; border-radius: 50%; background: #20B26B; }
.fmm-pp-naira__selected { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--fmm-yellow); color: #fff; }
.fmm-pp-naira__provider-card > p { margin: 9px 0 12px; color: #687286; font-size: 9px; line-height: 1.6; }
.fmm-pp-naira__locked { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; border: 1px solid #FFF0C8; border-radius: 8px; background: #FFFAED; color: #252932; font-size: 9px; }
.fmm-pp-naira__locked span { display: inline-flex; align-items: center; gap: 5px; }
.fmm-pp-naira__locked svg { color: var(--fmm-yellow-dark, #EBA900); }
.fmm-pp-naira__locked b { font-variant-numeric: tabular-nums; font-size: 10px; }
.fmm-pp-naira__actions { padding: 13px; }
.fmm-pp-naira__actions .fmm-btn { min-height: 39px; border-radius: 8px; font-size: 10px; }
.fmm-pp-naira__cancel { display: block; margin: 11px auto 0; padding: 3px 10px; border: 0; background: transparent; color: #687286; font: inherit; font-size: 10px; cursor: pointer; }
.fmm-pp-naira__actions .fmm-pp-next__field { margin: 0 0 10px; font-size: 10px; }
.fmm-pp-naira__actions .fmm-pp-next__field > span { margin-bottom: 5px; }
.fmm-pp-naira__actions .fmm-pp-next__field input, .fmm-pp-naira__actions .fmm-pp-next__field select { min-height: 38px; font-size: 11px; }

.fmm-payresult__crumb { display: flex; align-items: center; gap: 7px; width: 100%; max-width: var(--fmm-container); margin: 22px auto 28px; color: #697386; font-size: 11px; }
.fmm-payresult__crumb a { color: inherit; text-decoration: none; }
.fmm-payresult__crumb b { color: #273244; font-weight: 600; }
.fmm-payprocessing { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--fmm-container); margin: 54px auto 80px; text-align: center; }
.fmm-payprocessing__eyebrow { margin-bottom: 45px; color: #242832; font-size: 13px; font-weight: 600; }
.fmm-payprocessing__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 36px; border: 2px solid var(--fmm-yellow); border-radius: 50%; color: var(--fmm-yellow-dark, #EBA900); box-shadow: 0 5px 17px rgba(255,190,25,.13); }
.fmm-payprocessing h1 { margin: 0 0 8px; color: #12151A; font-size: 19px; letter-spacing: -.02em; }
.fmm-payprocessing > p { margin: 0 0 26px; color: #303640; font-size: 11px; }
.fmm-payprocessing__summary { width: min(100%, 600px); padding: 18px 22px; border: 1px solid #F0F1F4; border-radius: 15px; background: #fff; box-shadow: 0 2px 12px rgba(24,34,50,.025); text-align: left; }
.fmm-payprocessing__summary > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; border-bottom: 1px solid #F2F3F5; color: #697386; font-size: 10px; }
.fmm-payprocessing__summary > div:last-child { border: 0; }
.fmm-payprocessing__summary b { display: flex; align-items: center; gap: 8px; color: #20242B; font-size: 11px; }
.fmm-payresult__methodicon { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #F5F6F8; color: #303640; font-style: normal; }
.fmm-payresult__methodicon img { display: block; width: 18px; height: 14px; object-fit: contain; }
.fmm-payprocessing__hold { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; padding: 8px 13px; border: 1px solid #E9EBEF; border-radius: 999px; color: #697386; font-size: 9px; }
.fmm-payresult { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .88fr); gap: 24px; width: 100%; max-width: var(--fmm-container); margin: 0 auto 64px; align-items: start; }
.fmm-payresult__main, .fmm-payresult__side { display: grid; gap: 14px; min-width: 0; }
.fmm-payresult__hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 24px; text-align: center; }
.fmm-payresult__successicon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 50%; background: var(--fmm-yellow); color: white; box-shadow: 0 4px 9px rgba(255,190,25,.2); }
.fmm-payresult__hero h1 { margin: 0 0 8px; color: #111318; font-size: 21px; }
.fmm-payresult__hero p { margin: 0; color: #555D69; font-size: 11px; line-height: 1.65; }
.fmm-payresult__status { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; padding: 5px 10px; border-radius: 999px; background: #E9FBF2; color: #14934F; font-size: 8px; font-weight: 750; }
.fmm-payresult__status i { width: 5px; height: 5px; border-radius: 50%; background: #21AD63; }
.fmm-payresult__receipt { padding: 18px 20px; }
.fmm-payresult__receipt > small { display: block; color: #414852; text-align: center; font-size: 9px; letter-spacing: .06em; }
.fmm-payresult__receipt > strong { display: block; margin: 4px 0 12px; color: #111318; text-align: center; font-size: 27px; letter-spacing: -.03em; }
.fmm-payresult__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 39px; border-bottom: 1px dashed #ECEEF1; color: #4F5865; font-size: 10px; }
.fmm-payresult__row:last-child { border-bottom: 0; }
.fmm-payresult__row b { color: #16191F; font-size: 10px; text-align: right; }
.fmm-payresult__method { display: inline-flex; align-items: center; gap: 6px; }
.fmm-payresult__buttons { display: flex; justify-content: center; align-items: center; gap: 16px; }
.fmm-payresult__buttons .fmm-btn { min-height: 38px; padding: 0 20px; font-size: 10px; }
.fmm-payresult__next { display: flex; gap: 10px; padding: 14px; }
.fmm-payresult__next > span { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFF5D9; color: var(--fmm-yellow-dark, #EBA900); }
.fmm-payresult__next b { color: #20242B; font-size: 11px; }
.fmm-payresult__next p { margin: 4px 0 0; color: #697386; font-size: 9px; line-height: 1.5; }
.fmm-payresult__timeline { padding: 15px; }
.fmm-payresult__timeline h2, .fmm-payresult__attempt h2, .fmm-payresult__complete h2, .fmm-payresult__help h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: #20242B; font-size: 11px; }
.fmm-payresult__attempt { padding: 18px 20px; }
.fmm-payresult__attempt h2 svg, .fmm-payresult__help h2 svg { color: #9BA3AF; }
.fmm-payresult__row--total { min-height: 54px; margin-top: 4px; border-bottom: 0; color: #20242B; font-size: 11px; }
.fmm-payresult__row--total b { font-size: 15px; }
.fmm-payresult__complete { padding: 17px; }
.fmm-payresult__complete h2 { margin-bottom: 12px; }
.fmm-payresult__complete .fmm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; width: 100%; border-radius: 7px; font-size: 10px; }
.fmm-payresult__another, .fmm-payresult__back { display: flex; justify-content: center; align-items: center; min-height: 36px; margin-top: 8px; border: 1px solid #E9EBEF; border-radius: 7px; color: #313947; font-size: 9px; text-decoration: none; }
.fmm-payresult__back { min-height: 32px; margin-top: 10px; border-width: 1px 0 0; border-radius: 0; color: #687286; }
.fmm-payresult__help { padding: 16px; }
.fmm-payresult__help h2 svg { color: var(--fmm-yellow-dark, #EBA900); }
.fmm-payresult__help > p { margin: 0 0 10px; color: #697386; font-size: 9px; line-height: 1.5; }
.fmm-payresult__help ul { display: grid; gap: 9px; margin: 0 0 12px; padding: 0; list-style: none; color: #4F5865; font-size: 9px; }
.fmm-payresult__help li::before { content: '✓'; margin-right: 7px; color: #A9B1BD; }
.fmm-payresult__help > div { padding: 10px; border: 1px solid #DCEBFF; border-radius: 8px; background: #F1F7FF; color: #1948A5; }
.fmm-payresult__help > div b { font-size: 9px; }
.fmm-payresult__help > div p { margin: 5px 0; font-size: 8px; line-height: 1.5; }
.fmm-payresult__help > div a { color: #1557D5; font-size: 9px; text-decoration: none; }
.fmm-payresult__hero--failed { min-height: 170px; }
.fmm-payresult__failureicon { display: grid; place-items: center; width: 53px; height: 53px; margin-bottom: 10px; border: 8px solid #FDEBEC; border-radius: 50%; background: #fff; color: #EF4444; }
.fmm-payresult__hero--failed h1 { font-size: 19px; }
.fmm-payresult__hero--failed p { color: #414852; }

@media (max-width: 700px) {
    .fmm-pp-naira { max-width: none; margin-top: 0; }
    .fmm-pp-naira__grid, .fmm-payresult { grid-template-columns: minmax(0, 1fr); }
    .fmm-pp-naira__grid { padding: 0 16px; }
    .fmm-payresult { width: auto; margin: 0 12px 64px; }
    .fmm-payresult__desktop { display: none; }
    .fmm-payprocessing { margin-top: 34px; }
    .fmm-payprocessing__eyebrow { margin-bottom: 28px; }
}

:root { --fmm-twofa-qr-size: 16rem; }
.fmm-seller-twofa .fmm-twofa-qr {
    width: min(100%, var(--fmm-twofa-qr-size));
    height: auto;
    aspect-ratio: 1;
}

/* Two-step verification: contextual recovery flow and shared action buttons. */
.fmm-seller-twofa .fmm-twofa-authorization > p,
.fmm-seller-twofa .fmm-2bc__body > div > p {
    color: var(--fmm-muted);
    line-height: var(--twofa-lead-line);
    margin: var(--twofa-copy-gap) 0 var(--twofa-card-copy-gap);
}
.fmm-seller-twofa .fmm-twofa-authorization .fmm-2conf__row { align-items: flex-end; }
.fmm-seller-twofa .fmm-twofa-code-field { margin: 0; flex: 1; min-width: 0; }
.fmm-seller-twofa .fmm-twofa-code-field input {
    width: 100%;
    height: var(--fmm-field-h);
    border-color: var(--fmm-border);
    background: var(--fmm-bg);
}
.fmm-seller-twofa .fmm-twofa-verification-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--twofa-copy-gap);
    margin-top: var(--twofa-header-gap);
}
.fmm-seller-twofa .fmm-btn {
    min-height: var(--fmm-field-h);
    padding: var(--twofa-button-padding) var(--twofa-header-gap);
    justify-content: center;
    text-decoration: none;
}
.fmm-seller-twofa .fmm-btn:disabled { opacity: .5; cursor: not-allowed; }
.fmm-seller-twofa .fmm-btn:focus-visible {
    outline: 2px solid var(--fmm-yellow-dark);
    outline-offset: 2px;
}
.fmm-seller-twofa .fmm-2fa__acts {
    border: 1px solid var(--fmm-border);
    border-radius: var(--fmm-radius-lg);
    padding: var(--twofa-header-gap);
    gap: var(--twofa-header-gap);
    background: var(--fmm-bg-alt);
}
.fmm-seller-twofa .fmm-2fa__on {
    margin-inline-start: auto;
    border: 1px solid var(--fmm-teal);
    border-radius: var(--fmm-radius);
    padding: var(--twofa-copy-gap) var(--twofa-button-padding);
    color: var(--fmm-teal);
    background: var(--fmm-teal-soft);
}
@media (max-width: 640px) {
    .fmm-seller-twofa .fmm-twofa-code-field { flex-basis: 100%; }
    .fmm-seller-twofa .fmm-2fa__on { margin-inline-start: 0; }
}
.fmm-seller-twofa { --twofa-section-title-size: 20px; }
.fmm-seller-twofa .fmm-2bc__body { flex: 1; }
.fmm-seller-twofa .fmm-2bc__body h2 {
    font-size: var(--twofa-section-title-size);
    line-height: var(--twofa-lead-line);
    font-weight: 700;
    margin: 0 0 var(--twofa-copy-gap);
}
.fmm-seller-twofa .fmm-2bc__codes { margin-top: 0; }

/* Business Details: dimensions from the supplied desktop design. */
.fmm-business-page {
    --business-content-width: 768px;
    --business-heading-size: 32px;
    --business-heading-line: 40px;
    --business-lead-size: 16px;
    --business-lead-line: 24px;
    --business-copy-gap: 8px;
    --business-field-gap: 16px;
    --business-card-padding: var(--fmm-settings-layout-gap);
    --business-field-height: 49px;
    --business-field-inset: 16px;
    --business-note-padding: 20px;
    --business-note-gap: 40px;
    --business-input-border: #D1D5DB;
    --business-note-border: #FDE096;
    --business-note-bg: #FFF8E7;
}
.fmm-settings-content { min-width: 0; }
.fmm-business-page .fmm-ssplit {
    grid-template-columns: var(--fmm-seller-settings-nav-width) minmax(0, var(--business-content-width));
    gap: var(--fmm-settings-layout-gap);
}
.fmm-business-heading { margin-bottom: var(--fmm-settings-layout-gap); }
.fmm-business-heading h1 {
    font-size: var(--business-heading-size);
    line-height: var(--business-heading-line);
    margin: 0 0 var(--business-copy-gap);
}
.fmm-business-heading p {
    font-size: var(--business-lead-size);
    line-height: var(--business-lead-line);
    color: var(--fmm-muted);
    margin: 0;
}
.fmm-business-form .fmm-bform {
    padding: var(--business-card-padding);
    border-radius: var(--fmm-radius-lg);
    background: var(--fmm-bg);
}
.fmm-business-form .fmm-bsec input,
.fmm-business-form .fmm-bsec select {
    height: var(--business-field-height);
    padding: 0 var(--business-field-inset);
    border-color: var(--business-input-border);
    background: var(--fmm-bg);
    border-radius: var(--fmm-radius);
}
.fmm-business-form .fmm-bsec input:disabled { background: var(--fmm-bg-alt); }
.fmm-business-form .fmm-business-stack { margin-top: var(--business-field-gap); }
.fmm-business-form .fmm-bsec > h3 + .fmm-bhint { margin-bottom: var(--business-field-gap); }
.fmm-business-form .fmm-bnote {
    margin-top: var(--business-note-gap);
    padding: var(--business-note-padding);
    border-color: var(--business-note-border);
    background: var(--business-note-bg);
}
.fmm-business-form .fmm-bnote a { color: inherit; text-decoration: none; }
.fmm-business-form .fmm-bnote a:hover { text-decoration: underline; }
.fmm-business-form .fmm-bacts { flex-wrap: wrap; }
.fmm-business-form .fmm-bacts__cancel { border-color: var(--business-input-border); background: var(--fmm-bg); }
.fmm-business-form :is(input, select, button, a):focus-visible { outline: 2px solid var(--fmm-yellow-dark); outline-offset: 2px; }
@media (max-width: 900px) {
    .fmm-business-page .fmm-ssplit { grid-template-columns: var(--fmm-seller-settings-tablet-nav-width) minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .fmm-business-page .fmm-ssplit { grid-template-columns: minmax(0, 1fr); }
    .fmm-business-page { --business-card-padding: var(--business-field-gap); }
}
@media (max-width: 640px) {
    .fmm-business-form .fmm-bgrid { grid-template-columns: minmax(0, 1fr); }
}

.fmm-business-form .fmm-bsec input,
.fmm-business-form .fmm-bsec select { font-size: var(--business-lead-size); }
.fmm-business-form .fmm-bsec select {
    appearance: none;
    background-image: url("../../assets/marketplace/business-details/chevron.svg");
    background-repeat: no-repeat;
    background-position: right var(--business-field-inset) center;
    padding-right: var(--business-card-padding);
}
.fmm-business-form .fmm-bsoc__lab { font-weight: 400; }
.fmm-business-form .fmm-bsoc__lab > svg { color: var(--fmm-faint); }

.fmm-settings-signin-copy { margin: 0 0 var(--fmm-bank-meta-padding); }

.fmm-business-icon { display: block; flex-shrink: 0; }

.fmm-business-feedback { display: block; margin-top: var(--business-copy-gap); }
.fmm-business-review-gaps {
    margin-top: var(--business-field-gap);
    padding: var(--business-note-padding);
    border: 1px solid var(--business-note-border);
    border-radius: var(--fmm-radius);
    background: var(--business-note-bg);
}
.fmm-business-review-gaps p { margin: 0 0 var(--business-copy-gap); }
.fmm-business-review-gaps ul { padding-left: var(--business-note-padding); }

/* Order detail → Payment: per-seller "Store → FlymyMall Hub" row. The label
   column takes the free width and wraps; the amount stays on one line at the
   top right; the policy chip and label state sit on one aligned line. */
.fmm-sumrow--hubship { align-items: flex-start; }
.fmm-sumrow--hubship .fmm-sumrow__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fmm-sumrow--hubship > b { flex: none; white-space: nowrap; text-align: right; }
.fmm-sumrow--hubship .fmm-sumrow__sub {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    margin-top: 6px; color: #667085; line-height: 1.4;
}
.fmm-sumrow--hubship .fmm-sumrow__sub > span:not(.fmm-chip) { white-space: nowrap; }

/* ==========================================================================
   Mobile design corrections — Figma "Mobile View of FlymyMall Website".
   Phone width only; desktop and tablet layouts are untouched.
   ========================================================================== */

/* The "International" option shows a globe, which is square — the flag box is 16×9. */
.fmm-footer__flag--globe { width: 14px; height: 14px; object-fit: contain; border-radius: 0; }

@media (max-width: 560px) {
    /* Footer: link columns two-up, FlymyMall Global full width underneath. */
    .fmm-footer .fmm-container { padding-top: 40px; }
    .fmm-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .fmm-footer__grid > div:nth-child(5) { grid-column: 1 / -1; }
    .fmm-footer__title { margin-bottom: 16px; font-size: 15px; line-height: 22px; }
    .fmm-footer__list { gap: 9px; }
    .fmm-footer__list a { font-size: 13px; line-height: 19px; }

    /* Trust cards 2×2. */
    .fmm-footer__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0; padding: 24px 0; }
    .fmm-tcard { gap: 8px; min-height: 56px; padding: 10px; font-size: 12px; line-height: 16px; }
    .fmm-tcard__icon { width: 28px; height: 28px; }
    .fmm-tcard__icon img { max-width: 16px; max-height: 14px; }

    /* Logo and tagline centred; "Delivering to" on its own line, then the three pills. */
    .fmm-footer__base { flex-direction: column; align-items: stretch; gap: 20px; }
    .fmm-footer__base > div:first-child { text-align: center; }
    .fmm-footer__base .fmm-logo { display: inline-block; }
    .fmm-footer__prefs { gap: 8px; flex-wrap: wrap; }
    .fmm-footer__prefs .fmm-ship-to { flex: 1 0 100%; padding-right: 0; }
    .fmm-footer__prefs .fmm-pref { padding: 6px 10px; gap: 5px; font-size: 12px; line-height: 18px; }
    .fmm-footer__prefs .fmm-pref__chevron { width: 10px; height: 10px; margin-left: 2px; }
    .fmm-footer__legal > span:first-child { gap: 14px 24px; }
}

@media (max-width: 560px) {
    /* Hero: the pill stays one line, the headline gets the design's open leading,
       and the four trust cards float on the photo instead of disappearing. */
    .fmm-hero .fmm-pill {
        display: inline-flex; max-width: 100%; gap: 6px;
        padding: 6px 12px; font-size: 10.5px; line-height: 1.3; white-space: nowrap;
    }
    .fmm-hero .fmm-pill > svg { width: 12px; height: 12px; margin: 0; flex: none; }
    .fmm-hero .fmm-pill__live { gap: 4px; padding: 1px 6px; border-radius: 999px; background: #ECFDF5; }
    .fmm-hero .fmm-pill__live::before { width: 5px; height: 5px; }
    .fmm-hero__title { font-size: 32px; line-height: 1.45; margin: 18px 0 14px; overflow-wrap: normal; }
    .fmm-hero__title em::after { bottom: -1px; }
    .fmm-hero__lead { font-size: 15px; line-height: 1.9; margin-bottom: 24px; }
    .fmm-hero__cta { gap: 12px; }
    .fmm-hero .fmm-trust { display: flex; font-size: 8.5px; padding: .8em 1em; }
    .fmm-hero .fmm-trust--tr { top: 9%; right: 4%; }
    .fmm-hero .fmm-trust--ml { top: 34%; left: 6%; }
    .fmm-hero .fmm-trust--bl { bottom: 7%; left: 4%; }
    .fmm-hero .fmm-trust--br { bottom: 9%; right: 3%; }
}

@media (max-width: 560px) {
    /* "Shop Global Brands" banner. */
    .fmm-gband__body { padding: 28px 20px 8px; }
    .fmm-gband__pill { padding: 6px 12px; margin-bottom: 18px; font-size: 10px; letter-spacing: .8px; }
    .fmm-gband__title { font-size: 30px; line-height: 37px; }
    .fmm-gband__lead { font-size: 14px; line-height: 26px; }
    .fmm-gband__check { margin-bottom: 24px; font-size: 11px; line-height: 16px; }
    .fmm-gband__cta { flex-direction: column; align-items: stretch; gap: 14px; }
    .fmm-gband__go { justify-content: space-between; padding: 16px 22px; font-size: 15px; }
    .fmm-gband__cta .fmm-shipest-host { justify-content: center; }
    .fmm-gband__art { padding: 32px 0 40px; }

    /* Photo with its four chips, sized and placed as in the mobile frame. */
    .fmm-gband__shot > img { width: 192px; height: 266px; border-radius: 20px; }
    .fmm-gband__trusted { top: 10px; right: 10px; padding: 4px 8px; font-size: 8.5px; gap: 4px; }
    .fmm-gband__trusted img { width: 10px; height: 10px; flex-basis: 10px; }
    .fmm-gband__rating { left: 50%; right: auto; bottom: 10px; width: max-content; transform: translateX(-50%); gap: 5px; padding: 5px 10px; font-size: 9.5px; }
    .fmm-gband__stars { flex: none; gap: 1px; }
    .fmm-gband__stars img { width: 9px; height: 9px; }
    .fmm-gchip { display: flex; gap: 6px; min-width: 0; padding: 6px 10px 6px 7px; border-radius: 10px; }
    .fmm-gchip b { font-size: 9.5px; line-height: 12px; }
    .fmm-gchip em { font-size: 7.5px; line-height: 11px; }
    .fmm-gchip__ico { flex-basis: 22px; width: 22px; height: 22px; border-radius: 8px; }
    .fmm-gchip__ico img { width: 11px; height: 11px; }
    .fmm-gchip--tl { top: 3px;   bottom: auto; left: -59px; right: auto; }
    .fmm-gchip--tr { top: 59px;  bottom: auto; right: -47px; left: auto; }
    .fmm-gchip--bl { top: 144px; bottom: auto; left: -47px; right: auto; }
    .fmm-gchip--br { top: 167px; bottom: auto; right: -41px; left: auto; }
}

@media (max-width: 560px) {
    /* "Found Something on Instagram or TikTok?" */
    .fmm-sband { border-radius: 24px; min-height: 0; }
    .fmm-sband__body { padding: 32px 20px 8px; }
    .fmm-sband__title { font-size: 26px; line-height: 42px; letter-spacing: -.02em; white-space: normal; margin-bottom: 14px; }
    .fmm-sband__rule { margin-bottom: 22px; }
    .fmm-sband__lead { font-size: 14px; line-height: 32px; margin-bottom: 20px; }
    .fmm-sband__cta { flex-direction: column; align-items: stretch; gap: 18px; }
    .fmm-sband__go { justify-content: center; padding: 16px 24px; font-size: 17px; }
    .fmm-sband__how { justify-content: center; }
    .fmm-sband__proof { flex-wrap: nowrap; gap: 14px; margin-top: 22px; padding-top: 22px; }
    .fmm-sband__faces img, .fmm-sband__faces i { width: 28px; height: 28px; margin-right: -8px; }
    .fmm-sband__prooftext { flex: 1 1 auto; min-width: 0; font-size: 11.5px; line-height: 15px; }
    .fmm-sband__prooftext br { display: none; }

    /* The three product cards overlap on a fixed stage, as in the mobile frame. */
    .fmm-sband__stage { display: block; position: relative; height: 330px; min-height: 0; padding: 0; margin-top: 18px; }
    .fmm-sband__stage .fmm-fcard { position: absolute; grid-column: auto; padding: 7px 1px 1px; gap: 6px; border-radius: 16px; }
    .fmm-sband__stage .fmm-fcard__shot { border-radius: 12px; }
    .fmm-sband__stage .fmm-fcard--headphones { top: 6px;   left: 39.6%; right: 7%;  z-index: 1; }
    .fmm-sband__stage .fmm-fcard--watch      { top: 46px;  left: 7.3%;  right: 42.8%; z-index: 2; }
    .fmm-sband__stage .fmm-fcard--pack       { top: 158px; left: 26.2%; right: 12.2%; z-index: 3; }
    .fmm-sband__stage .fmm-fcard--headphones .fmm-fcard__shot { height: 92px; }
    .fmm-sband__stage .fmm-fcard--watch .fmm-fcard__shot { height: 72px; }
    .fmm-sband__stage .fmm-fcard--pack .fmm-fcard__shot { height: 96px; }
    .fmm-sband__stage .fmm-fcard__foot { padding: 0 9px 9px; }
    .fmm-sband__stage .fmm-fcard__foot b { font-size: 9.5px; line-height: 13px; }
    .fmm-sband__stage .fmm-fcard__foot em { font-size: 8px; }
    .fmm-sband__stage .fmm-fcard__src { padding: 3px 6px; font-size: 7px; gap: 3px; }
    .fmm-sband__stage .fmm-fcard__src img { width: 8px; height: 8px; }
    .fmm-sband__stage .fmm-fcard__hot { padding: 4px 7px; font-size: 8px; gap: 3px; }
    .fmm-sband__stage .fmm-fcard__hot img { width: 9px; height: 9px; }
    .fmm-sband__stage .fmm-fcard__mark { width: 10px; height: 10px; }
    .fmm-sband__stage .fmm-fcard__add { width: 16px; height: 16px; }
    .fmm-sband__save { display: none; }

    /* Process strip as a 2×2 grid, a dash between the two columns. */
    .fmm-sband__flow { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 18px 6px; padding: 18px 14px 20px; }
    .fmm-sband__stagerow { padding: 0; gap: 7px; font-size: 10px; line-height: 14px; white-space: nowrap; }
    .fmm-sband__stagerow + .fmm-sband__stagerow::before { content: none; }
    .fmm-sband__stagerow:nth-child(even)::before { content: "——"; margin-right: 6px; color: #D1D5DB; font-weight: 400; font-size: 8px; letter-spacing: -1px; }
    .fmm-sband__stagenum { flex-basis: 22px; width: 22px; height: 22px; }
    .fmm-sband__stagenum img { width: 11px; height: 11px; }
}

@media (max-width: 560px) {
    /* Weekly Verified Deals: copy, button, then clear space before the cards. */
    .fmm-deals__promo { height: auto; min-height: 0; padding: 32px 0 30px 16px; border-radius: 18px; }
    .fmm-deals__top { flex-direction: column; align-items: flex-start; gap: 22px; padding-right: 16px; }
    .fmm-deals__title { margin-bottom: 10px; font-size: 26px; line-height: 34px; }
    .fmm-deals__lead { font-size: 16px; line-height: 31px; }
    .fmm-deals__btn { height: 40px; min-width: 124px; }
    .fmm-deals__strip { margin-top: 50px; }
}

@media (max-width: 560px) {
    /* Feature cards: the two illustrations overlap as in the mobile frame
       instead of stacking. The card clips whatever runs off its edges. */
    .fmm-feat__card--verify .fmm-feat__title { white-space: normal; }
    .fmm-feat__art--verify,
    .fmm-feat__art--device { display: block; position: relative; margin: 24px -26px -32px; }

    .fmm-feat__art--verify { height: 235px; margin-top: 4px; }
    .fmm-feat__art--verify .fmm-aimatch {
        position: absolute; top: 12px; left: 135px; right: auto; width: 226px; padding: 9px;
        border-radius: 16px; transform: rotate(-4deg);
    }
    .fmm-feat__art--verify .fmm-aimatch__art { height: 92px; margin-bottom: 9px; border-radius: 10px; }
    .fmm-feat__art--verify .fmm-aimatch__tag { top: 14px; font-size: 6.5px; padding: 1px 5px; }
    .fmm-feat__art--verify .fmm-aimatch__panel { padding: 10px; border-radius: 12px; }
    .fmm-feat__art--verify .fmm-aimatch__head { font-size: 11.5px; line-height: 15px; gap: 6px; }
    .fmm-feat__art--verify .fmm-aimatch__checks { gap: 5px; margin: 8px 0; padding-bottom: 8px; }
    .fmm-feat__art--verify .fmm-aimatch__checks li { padding: 3px 7px; font-size: 9.5px; line-height: 12px; }
    .fmm-feat__art--verify .fmm-aimatch__strong { font-size: 10.5px; line-height: 14px; }
    .fmm-feat__art--verify .fmm-feat__shoe {
        position: absolute; top: 50px; left: 0; right: auto; width: 192px; margin: 0; z-index: 3;
        transform: rotate(-14deg);
    }
    .fmm-feat__art--verify .fmm-status {
        position: absolute; top: 162px; left: 71px; right: auto; z-index: 4; margin: 0;
        padding: 6px 12px 6px 6px; gap: 6px; border-radius: 10px; transform: rotate(-2deg);
    }
    .fmm-feat__art--verify .fmm-status__ico { width: 24px; height: 24px; }
    .fmm-feat__art--verify .fmm-status__copy small { font-size: 9px; line-height: 11px; }
    .fmm-feat__art--verify .fmm-status__copy b { font-size: 11px; line-height: 14px; }

    .fmm-feat__art--device { height: 314px; }
    .fmm-feat__art--device .fmm-feat__phone {
        position: absolute; top: 30px; left: 50%; right: auto; transform: translateX(-50%);
        width: 170px; height: 332px; aspect-ratio: auto; margin: 0; grid-column: auto; grid-row: auto;
    }
    .fmm-feat__art--device .fmm-dchip--imei,
    .fmm-feat__art--device .fmm-dchip--battery,
    .fmm-feat__art--device .fmm-dchip--storage,
    .fmm-feat__art--device .fmm-dchip--network { position: absolute; grid-column: auto; z-index: 3; }
    .fmm-feat__art--device .fmm-dchip--imei    { top: 48px;  left: 64px; right: auto; }
    .fmm-feat__art--device .fmm-dchip--battery { top: 121px; right: 33px; left: auto; }
    .fmm-feat__art--device .fmm-dchip--storage { top: 177px; left: 15px; right: auto; min-width: 176px; }
    .fmm-feat__art--device .fmm-dchip--network { top: 268px; right: 35px; left: auto; }
}

/* The verify card carries a desktop and a mobile title; only one shows. */
.fmm-feat__title-mob { display: none; }

@media (max-width: 560px) {
    .fmm-feat__title-desk { display: none; }
    .fmm-feat__title-mob { display: inline; }

    /* Feature cards: the mobile frame's tighter padding and type. */
    .fmm-feat__card--verify,
    .fmm-feat__card--device { padding: 26px 17px 32px; }
    .fmm-feat__card--private,
    .fmm-feat__card--global { padding: 26px 17px; }
    .fmm-feat__art--verify,
    .fmm-feat__art--device { margin-left: -17px; margin-right: -17px; }
    .fmm-feat__card--verify .fmm-feat__title,
    .fmm-feat__card--device .fmm-feat__title { font-size: 23px; line-height: 30px; }
    .fmm-feat__card--verify .fmm-feat__lead,
    .fmm-feat__card--device .fmm-feat__lead { font-size: 14px; line-height: 25px; }
    .fmm-feat__badge { margin-bottom: 12px; font-size: 10px; padding: 3px 10px; }
}

@media (max-width: 560px) {
    /* Product page — Figma "Main Product Image Section" and "Product Info & Tabs". */
    .fmm-pdp__main > .fmm-panel,
    .fmm-pdp__main > .fmm-panel:not(:first-child) { padding: 16px; }

    /* Gallery: photo first on a grey box, then a row of four square thumbnails. */
    .fmm-gal { display: flex; flex-direction: column; gap: 24px; }
    .fmm-gal__main { order: 1; aspect-ratio: 311 / 222; border-radius: 12px; background: #F3F4F6; }
    .fmm-gal__main > img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; padding: 18px 0; }
    .fmm-gal__main .fmm-plat, .fmm-gal__actions { z-index: 1; }
    .fmm-gal__main .fmm-plat { top: 12px; left: 12px; padding: 6px 12px; font-size: 13px; }
    .fmm-gal__actions { top: 12px; right: 12px; gap: 8px; }
    .fmm-gal__actions .fmm-round { width: 32px; height: 32px; }
    .fmm-gal__actions .fmm-round svg { width: 14px; height: 14px; }
    .fmm-gal__thumbs {
        order: 2; display: grid; grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto;
        gap: 15px; overflow: visible;
    }
    .fmm-gal__thumbs > :nth-child(n+5) { display: none; }
    .fmm-gal__thumb {
        width: auto; height: auto; aspect-ratio: 1;
        border: 1px solid #E5E7EB; border-radius: 12px; background: #fff;
    }
    .fmm-gal__thumb.is-active { border: 2px solid var(--fmm-yellow); }
    .fmm-gal__thumb img { box-sizing: border-box; object-fit: contain; padding: 6px; }

    /* About this item. */
    .fmm-about__head { justify-content: space-between; gap: 10px; }
    .fmm-about__head h2 { font-size: 26px !important; line-height: 32px; }
    .fmm-about__head .fmm-chip { font-size: 10px; padding: 4px 9px; }
    .fmm-pdp .fmm-acc { border-radius: 16px; }
    .fmm-pdp .fmm-acc + .fmm-acc { margin-top: 16px; }
    .fmm-pdp .fmm-acc__head { gap: 16px; padding: 16px; font-size: 16px; }
    .fmm-pdp .fmm-acc__body { padding: 16px; font-size: 15px; line-height: 24px; color: #111827; }
    .fmm-pdp .fmm-checks { gap: 25px; margin-top: 24px; }
    .fmm-pdp .fmm-checks li { gap: 10px; font-size: 13px; line-height: 18px; }
    .fmm-pdp .fmm-checks svg { margin-top: 2px; }
    .fmm-pdp .fmm-acc__body .fmm-note {
        margin-top: 24px; padding: 14px 16px; gap: 10px;
        border: 1px solid #DBEAFE; border-radius: 8px; background: #EFF6FF;
        font-size: 12.5px; font-weight: 400; line-height: 21px; color: #111827;
    }
    .fmm-pdp .fmm-acc__body .fmm-note,
    .fmm-pdp .fmm-acc__body .fmm-note span { color: #111827; }
    .fmm-pdp .fmm-acc__body .fmm-note svg { color: #111827; }
}

@media (max-width: 560px) {
    /* Categories page — Figma "All Categories": two cards per row. */
    .fmm-catcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 17px; }
    .fmm-catcard {
        min-height: 122px; padding: 18px; gap: 4px; border-radius: 12px;
        border-color: #F3F4F6; box-shadow: 0 1px 3px rgba(17, 24, 39, .05);
    }
    .fmm-catcard__icon { width: 36px; height: 36px; margin-bottom: 14px; background: #FEF0C7; color: #111827; font-size: 14px; }
    .fmm-catcard__icon img { width: 20px; height: 20px; }
    .fmm-catcard__label { font-size: 14px; line-height: 19px; }
    .fmm-catcard__sub { font-size: 11px; line-height: 15px; }
}

/* Category page — phone filter bars and breadcrumb (mobile Figma). Hidden elsewhere. */
.fmm-mfilters { display: none; }
.fmm-browse-crumbs--mobile { display: none; }

@media (max-width: 560px) {
    .fmm-browse-crumbs--mobile { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 13px; color: #6B7280; }
    .fmm-browse-crumbs--mobile > span[aria-hidden],
    .fmm-browse-crumbs--mobile .fmm-browse-crumbs__current > span[aria-hidden] { color: #D1D5DB; }
    .fmm-browse-crumbs--mobile .fmm-browse-crumbs__current { color: #111827; font-weight: 600; }
    .fmm-category-page__container .fmm-page-head { margin-bottom: 16px; }
    .fmm-category-page__container .fmm-page-head h1 { font-size: 26px; line-height: 32px; }
    .fmm-category-page__container .fmm-page-head__acts { display: none; }

    .fmm-mfilters { display: block; margin: 0 -16px 22px; }
    .fmm-mfilters__row {
        display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
        padding: 0 16px; -webkit-overflow-scrolling: touch;
    }
    .fmm-mfilters__row::-webkit-scrollbar { display: none; }
    .fmm-mfilters button {
        flex: none; display: inline-flex; align-items: center; gap: 6px;
        border: 0; background: none; color: #4B5563; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
    }
    .fmm-mfilters button i {
        width: 6px; height: 6px; margin-top: -3px;
        border-right: 1.5px solid #9CA3AF; border-bottom: 1.5px solid #9CA3AF; transform: rotate(45deg);
    }
    .fmm-mfilters button.is-open i { margin-top: 3px; transform: rotate(-135deg); }
    .fmm-mfilters button.is-set { color: #111827; font-weight: 700; }
    .fmm-mfilters button.is-open { color: #111827; }
    .fmm-mfilters__row--text { gap: 24px; padding-bottom: 12px; border-bottom: 1px solid #E5E7EB; }
    .fmm-mfilters__row--text button { padding: 0; }
    .fmm-mfilters__all svg { color: #9CA3AF; }
    .fmm-mfilters__row--chips { gap: 17px; padding-top: 10px; }
    .fmm-mfilters__row--chips button { padding: 6px 8px; border-radius: 6px; background: #F9FAFB; }

    /* The old single "Filters" toggle gives way to the bars; the panel shows one group at a time. */
    .fmm-browse--category .fmm-filter-toggle__label { display: none; }
    .fmm-browse--category .fmm-filters { margin-bottom: 16px; }
    .fmm-browse--category .fmm-filters[data-only="source"] .fmm-filters__group:not([data-fgroup="source"]),
    .fmm-browse--category .fmm-filters[data-only="price"] .fmm-filters__group:not([data-fgroup="price"]),
    .fmm-browse--category .fmm-filters[data-only="condition"] .fmm-filters__group:not([data-fgroup="condition"]),
    .fmm-browse--category .fmm-filters[data-only="trust"] .fmm-filters__group:not([data-fgroup="trust"]),
    .fmm-browse--category .fmm-filters[data-only="subcategories"] .fmm-filters__group:not([data-fgroup="subcategories"]) { display: none; }

    /* Count and sort on one slim line instead of a boxed toolbar. */
    .fmm-browse--category .fmm-toolbar { padding: 0; margin-bottom: 14px; border: 0; background: none; box-shadow: none; flex-wrap: nowrap; }
    .fmm-browse--category .fmm-toolbar__count { font-size: 13px; }
    .fmm-browse--category .fmm-toolbar__sort { font-size: 12px; }
    .fmm-browse--category .fmm-toolbar__sort select { min-height: 32px; padding: 4px 28px 4px 10px; font-size: 12px; }

    /* Product cards: two-up, design sizes, "Add to Cart" only. */
    .fmm-browse--category .fmm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
    .fmm-browse--category .fmm-pc { border-radius: 12px; }
    .fmm-browse--category .fmm-pc__media { aspect-ratio: 163 / 129; }
    .fmm-browse--category .fmm-pc__media img { object-fit: cover; }
    .fmm-browse--category .fmm-pc__flags { top: 8px; left: 8px; gap: 5px; }
    .fmm-browse--category .fmm-pc__flags .fmm-chip { padding: 2px 7px; font-size: 9.5px; }
    .fmm-browse--category .fmm-heart { width: 28px; height: 28px; top: 8px; right: 8px; }
    .fmm-browse--category .fmm-pc__body { padding: 12px 10px 10px; gap: 6px; }
    .fmm-browse--category .fmm-pc__title { font-size: 14px; line-height: 20px; }
    .fmm-browse--category .fmm-pc__sub { font-size: 11px; line-height: 15px; color: #111827; }
    .fmm-browse--category .fmm-pc__pricerow { align-items: flex-start; }
    .fmm-browse--category .fmm-pc__pricerow > span:first-child { display: flex; flex-direction: column; }
    .fmm-browse--category .fmm-pc__price { font-size: 18px; line-height: 22px; }
    .fmm-browse--category .fmm-pc__was { margin-left: 0; font-size: 11px; }
    .fmm-browse--category .fmm-tag { padding: 2px 7px; font-size: 9.5px; }
    .fmm-browse--category .fmm-pc__actions { grid-template-columns: 1fr; padding-top: 8px; }
    .fmm-browse--category .fmm-pc__actions > a { display: none; }
    .fmm-browse--category .fmm-pc__actions .fmm-btn { min-height: 34px; padding-block: 6px; font-size: 13px; }
}

/* Filters bottom sheet (mobile Figma "Filters"). Parts are hidden outside phones. */
.fmm-msheet__head, .fmm-msheet__foot, .fmm-msheet__backdrop { display: none; }

@media (max-width: 560px) {
    html.fmm-msheet-open, html.fmm-msheet-open body { overflow: hidden; }

    .fmm-browse--category .fmm-filter-toggle:checked ~ .fmm-msheet__backdrop {
        display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(17, 24, 39, .75);
    }
    .fmm-browse--category .fmm-filter-toggle:checked ~ .fmm-filters {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 1001;
        display: flex; flex-direction: column;
        max-height: 82vh; margin: 0; padding: 0; overflow: hidden;
        border: 0; border-radius: 24px 24px 0 0; background: #fff;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);
        animation: fmm-msheet-up .22s ease-out;
    }
    @keyframes fmm-msheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

    .fmm-browse--category .fmm-msheet__head {
        position: relative; flex: none;
        display: flex; align-items: center; justify-content: space-between;
        padding: 30px 20px 16px; border-bottom: 1px solid #F3F4F6;
    }
    .fmm-msheet__grab { position: absolute; top: 12px; left: 50%; width: 48px; height: 6px; margin-left: -24px; border-radius: 999px; background: #D1D5DB; }
    .fmm-msheet__head h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; color: #111827; }
    .fmm-msheet__close { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; color: #9CA3AF; cursor: pointer; }

    /* Groups scroll between the fixed head and foot. */
    .fmm-browse--category .fmm-filter-toggle:checked ~ .fmm-filters > .fmm-filters__group { flex: none; margin: 0 20px; padding: 20px 0; }
    .fmm-browse--category .fmm-filter-toggle:checked ~ .fmm-filters { overflow-y: auto; }
    .fmm-browse--category .fmm-filters__group + .fmm-filters__group { margin-top: 0; border-top: 1px solid #F3F4F6; }
    .fmm-browse--category .fmm-filters__title { margin-bottom: 12px; font-size: 15px; font-weight: 700; color: #111827; }
    .fmm-browse--category .fmm-fl { padding: 7px 0; font-size: 14px; color: #4B5563; }
    .fmm-browse--category .fmm-fl__count { padding: 2px 8px; border-radius: 999px; background: #F9FAFB; font-size: 11.5px; color: #9CA3AF; }
    .fmm-browse--category [data-fgroup="source"] .fmm-fl { gap: 14px; padding: 9px 0; }
    .fmm-browse--category .fmm-fl input { width: 20px; height: 20px; border-radius: 5px; }

    .fmm-browse--category .fmm-msheet__foot {
        position: sticky; bottom: 0; flex: none; margin-top: auto;
        display: grid; grid-template-columns: 110px 1fr; gap: 12px;
        padding: 16px 16px 18px; border-top: 1px solid #F3F4F6; background: #fff;
    }
    .fmm-msheet__clear, .fmm-msheet__show {
        display: grid; place-items: center; height: 48px; border-radius: 12px;
        font-size: 14px; font-weight: 700; cursor: pointer;
    }
    .fmm-msheet__clear { background: #F3F4F6; color: #374151; }
    .fmm-msheet__show { background: #FBBF24; color: #111827; }
}
@media (max-width: 560px) {
    .fmm-browse--category .fmm-filters[data-only] .fmm-filters__group { border-top: 0; }
}

@media (max-width: 560px) {
    /* Cart — Figma "Main - Mobile App Container". */
    .fmm-cartpage .fmm-page-head { position: relative; display: block; margin-bottom: 22px; }
    .fmm-cartpage .fmm-page-head h1 { padding-right: 150px; font-size: 24px; line-height: 34px; }
    .fmm-cartpage .fmm-page-head p { font-size: 14px; color: #9CA3AF; margin-top: 4px; }
    .fmm-cartpage .fmm-page-head__acts { position: absolute; top: 3px; right: 0; left: auto; width: auto; }
    .fmm-cartpage .fmm-page-head__acts .fmm-chip { padding: 6px 10px; font-size: 11px; background: #ECFDF3; color: #15803D; }
    .fmm-cartpage .fmm-cart__bulk { display: none; }

    /* Each item is its own card: pick · thumb · details, then price | qty · bin. */
    .fmm-cartpage .fmm-line {
        position: relative;
        grid-template-columns: 24px 96px minmax(0, 1fr); gap: 0 14px;
        margin-bottom: 16px; padding: 16px;
        border: 1px solid #F3F4F6; border-radius: 16px; background: #fff;
        box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
    }
    .fmm-cartpage .fmm-line:first-child { border-top: 1px solid #F3F4F6; }
    .fmm-cartpage .fmm-line__pick { grid-column: 1; grid-row: 1; padding-top: 2px; }
    .fmm-cartpage .fmm-line__pick input { width: 20px; height: 20px; border-radius: 5px; }
    .fmm-cartpage .fmm-line__thumb {
        grid-column: 2; grid-row: 1 / span 6; width: 96px; height: 96px;
        border: 1px solid #F3F4F6; background: #fff;
    }
    .fmm-cartpage .fmm-line__thumb img { object-fit: contain; }
    .fmm-cartpage .fmm-line__body { display: contents; }
    .fmm-cartpage .fmm-line__body > * { grid-column: 3; margin-bottom: 6px; }
    .fmm-cartpage .fmm-line__title { font-size: 15px; line-height: 20px; }
    .fmm-cartpage .fmm-line__meta { font-size: 13px; }
    .fmm-cartpage .fmm-line__chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .fmm-cartpage .fmm-line__chips .fmm-chip { padding: 3px 8px; font-size: 11px; }
    .fmm-cartpage .fmm-line__chips .fmm-chip--verified { background: #F3F4F6; color: #4B5563; }
    .fmm-cartpage .fmm-line__chips .fmm-chip--verified svg { display: none; }
    /* "Protected" sits on the bottom edge of the photo. */
    .fmm-cartpage .fmm-line__chips .fmm-chip--amber {
        position: absolute; top: 84px; left: 62px; z-index: 1;
        padding: 3px 8px; border: 1px solid #E5E7EB; background: #fff; color: #111827; font-weight: 700;
    }

    .fmm-cartpage .fmm-line__price-inline {
        grid-column: 1 / -1; grid-row: 20;
        margin: 10px 0 0; padding-top: 16px; border-top: 1px solid #F3F4F6;
        font-size: 18px; line-height: 34px;
    }
    .fmm-cartpage .fmm-line__right {
        grid-column: 2 / -1; grid-row: 20; align-self: end; justify-self: end;
        flex-direction: row-reverse; align-items: center; gap: 18px; margin: 0;
    }
    .fmm-cartpage .fmm-qty { border-color: #E5E7EB; border-radius: 10px; background: #F9FAFB; }
    .fmm-cartpage .fmm-qty button { width: 30px; height: 32px; background: transparent; color: #6B7280; font-weight: 500; }
    .fmm-cartpage .fmm-qty span { min-width: 26px; font-size: 14px; }
    .fmm-cartpage .fmm-line__bin { color: #9CA3AF; }

    /* Order summary card. */
    .fmm-cartpage .fmm-cart__summary { padding: 20px; border-radius: 16px; }
    .fmm-cartpage .fmm-cart__summary-title { font-size: 18px; margin-bottom: 16px; }
    .fmm-cartpage .fmm-cart__summary .fmm-sumrow { font-size: 14px; }
    .fmm-cartpage .fmm-cart__summary .fmm-sumrow--total { align-items: flex-end; }
    .fmm-cartpage .fmm-cart__summary .fmm-sumrow--total span { font-size: 15px; font-weight: 700; color: #111827; white-space: nowrap; }
    .fmm-cartpage .fmm-cart__summary .fmm-sumrow--total b { font-size: 24px; line-height: 30px; }
    .fmm-cartpage .fmm-cart__checkout { min-height: 56px; border-radius: 12px; font-size: 16px; }
    .fmm-cartpage .fmm-cart__checkout svg { width: 15px; height: 15px; }
    .fmm-cartpage .fmm-cart__protection { padding: 14px 16px; border: 1px solid #FDE68A; border-radius: 10px; background: #FFFBEB; }
    .fmm-cartpage .fmm-cart__protection p { align-items: center; gap: 14px; font-size: 12.5px; color: #4B5563; }
    .fmm-cartpage .fmm-cart__protection p b { display: block; margin-bottom: 2px; font-size: 14px; color: #111827; }
    .fmm-cartpage .fmm-cart__protection svg { width: 18px; height: 18px; }
    .fmm-cartpage .fmm-paymarks img, .fmm-cartpage .fmm-paymarks__apple { filter: grayscale(1); opacity: .45; }
}

/* Account drawer — mobile Figma profile menu. Desktop keeps the dropdown. */
.fmm-adrawer { display: none !important; }

@media (max-width: 560px) {
    .fmm-acct > .fmm-acct__menu { display: none !important; }
    html.fmm-adrawer-open, html.fmm-adrawer-open body { overflow: hidden; }

    .fmm-adrawer { display: block !important; position: fixed; inset: 0; z-index: 1200; }
    .fmm-adrawer[style*="display: none"] { display: none !important; }
    .fmm-adrawer__scrim { position: absolute; inset: 0; background: rgba(17, 24, 39, .72); animation: fmm-fade .2s ease-out; }
    .fmm-adrawer__panel {
        position: absolute; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
        display: flex; flex-direction: column; background: #fff;
        box-shadow: -12px 0 30px rgba(0, 0, 0, .18); animation: fmm-adrawer-in .24s ease-out;
        color: #111827; text-align: left;
    }
    @keyframes fmm-adrawer-in { from { transform: translateX(100%); } to { transform: none; } }
    @keyframes fmm-fade { from { opacity: 0; } to { opacity: 1; } }

    .fmm-adrawer__head {
        position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px 14px;
        padding: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) 18px 20px; border-bottom: 1px solid #F3F4F6;
        background: linear-gradient(160deg, #FFFBEB 0%, #FFFFFF 75%);
    }
    .fmm-adrawer__avatar {
        position: relative; display: grid; place-items: center; width: 64px; height: 64px;
        border: 3px solid #fff; border-radius: 50%; background: #FEF3C7; box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
        font-size: 24px; font-weight: 800; color: #B45309;
    }
    /* The photo is a grid item, and `.fmm img { max-width: 100% }` leaves its
       height at the file's own size. A tall upload then spills out of the
       circle and the top is sliced by the drawer edge. Pin it to the face. */
    .fmm-adrawer__face {
        position: absolute; inset: 3px; display: grid; place-items: center;
        border-radius: 50%; overflow: hidden; background: #FEF3C7;
    }
    .fmm-adrawer__face img {
        position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
        object-fit: cover; object-position: center; border-radius: 0;
    }
    .fmm-adrawer__tick {
        position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center;
        width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: #FBBF24; color: #fff;
    }
    .fmm-adrawer__who { min-width: 0; padding-right: 40px; }
    .fmm-adrawer__who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 24px; font-weight: 800; }
    .fmm-adrawer__who em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 14px; color: #6B7280; }
    .fmm-adrawer__close {
        position: absolute; top: 16px; right: 16px; display: grid; place-items: center;
        width: 42px; height: 42px; border: 1px solid #E5E7EB; border-radius: 50%; background: #fff; color: #374151;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    }
    .fmm-adrawer__badge {
        grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 11px; border: 1px solid #FCD34D; border-radius: 999px; background: #FEF3C7;
        font-size: 11.5px; font-weight: 600; color: #78350F;
    }

    .fmm-adrawer__nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 16px; }
    .fmm-adrawer__group { margin: 14px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
    .fmm-adrawer__rule { display: block; height: 1px; margin: 12px 12px 0; background: #F1F5F9; }
    .fmm-adrawer__nav a {
        display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 12px; border-radius: 12px;
        font-size: 15px; font-weight: 500; color: #111827;
    }
    .fmm-adrawer__nav a i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #475569; }
    .fmm-adrawer__nav a.is-on { background: #FEF7D9; font-weight: 600; }
    .fmm-adrawer__nav a.is-on i { background: #FBBF24; color: #111827; }
    .fmm-adrawer__ok { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #D1FAE5; color: #059669; text-decoration: none; }

    .fmm-adrawer__foot { flex: none; padding: 14px 14px 18px; border-top: 1px solid #F3F4F6; text-align: center; }
    .fmm-adrawer__out {
        display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 10px; border: 0; border-radius: 14px;
        background: #FEF2F2; color: #DC2626; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer;
    }
    .fmm-adrawer__out i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; }
    .fmm-adrawer__foot p { margin: 12px 0 0; font-size: 11.5px; color: #94A3B8; }

    /* The drawer carries the account links, so the in-page rail is not repeated. */
    .fmm-asplit .fmm-pnav { display: none !important; }
}

@media (max-width: 560px) {
    /* Profile — mobile Figma: the page opens on the profile card. */
    .fmm-profilepage .fmm-crumbs,
    .fmm-profilepage .fmm-page-head { display: none; }
    .fmm-profilepage .fmm-ph__hero { border-radius: 16px; }
    .fmm-profilepage .fmm-ph__banner { height: 115px; }
    .fmm-profilepage .fmm-ph__edit { top: 16px; right: 16px; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; }
    .fmm-profilepage .fmm-ph__id { margin-top: -40px; padding: 0 17px 16px; }
    .fmm-profilepage .fmm-ph__avatar { width: 80px; height: 80px; border-radius: 14px; border-width: 4px; margin-bottom: 14px; }
    .fmm-profilepage .fmm-ph__idtext h2 { font-size: 20px; gap: 8px; }
    .fmm-profilepage .fmm-ph__idtext p { font-size: 13.5px; }
    .fmm-profilepage .fmm-ph__share { margin: 0 17px 20px; }
}

/* Orders — mobile Figma (Nigeria buyer dashboard). */
.fmm-completed-details__close { display: none; }

@media (max-width: 560px) {
    .fmm-orders-page .fmm-page-head { display: block; margin-bottom: 16px; }
    .fmm-orders-page .fmm-page-head h1 { font-size: 26px; line-height: 32px; }
    .fmm-orders-page .fmm-page-head p { font-size: 14px; }
    .fmm-orders-page .fmm-orders-package-switch {
        display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 18px 0 0; padding: 4px;
        border: 1px solid #E5E7EB; border-radius: 16px; background: #F3F4F6;
    }
    .fmm-orders-page .fmm-orders-package-switch > * { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px; font-size: 14px; text-align: center; }

    /* Search with a round filter button; the date range wraps underneath. */
    .fmm-orders-page .fmm-orders-toolbar { flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 0 0 14px; }
    .fmm-orders-page .fmm-orders-search { flex: 1 1 calc(100% - 64px); width: auto; height: 44px; padding: 0 16px; border-radius: 999px; }
    .fmm-orders-page .fmm-orders-search svg { width: 17px; height: 17px; }
    .fmm-orders-page .fmm-orders-search input { font-size: 14px; }
    .fmm-orders-page .fmm-active-filter { flex: 0 0 44px; }
    .fmm-orders-page .fmm-active-filter > summary.fmm-orders-filter {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; gap: 0; padding: 0; border: 1px solid #E5E7EB; border-radius: 50%;
        background: #fff; color: #4B5563; font-size: 0; line-height: 0; list-style: none; outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    .fmm-orders-page .fmm-active-filter > summary.fmm-orders-filter::-webkit-details-marker { display: none; }
    .fmm-orders-page .fmm-active-filter > summary.fmm-orders-filter svg { display: block; width: 16px; height: 16px; margin: 0; flex: none; }
    .fmm-orders-page .fmm-active-filter > summary.fmm-orders-filter:focus-visible { box-shadow: 0 0 0 3px rgba(251, 191, 36, .45); }
    .fmm-orders-page .fmm-active-filter[open] > summary.fmm-orders-filter { border-color: #FBBF24; background: #FFFBEB; color: #111827; }
    .fmm-orders-page .fmm-orders-search { border-color: #E5E7EB; background: #fff; }
    .fmm-orders-page .fmm-orders-search:focus-within { border-color: #FBBF24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .2); }
    .fmm-orders-page .fmm-orders-search input { height: 100%; background: transparent; }
    .fmm-orders-page .fmm-orders-range { height: 36px; border-radius: 999px; font-size: 12.5px; }

    /* Completed order cards: id strip, product, price, then the action stack. */
    .fmm-orders-page .fmm-complete-card {
        position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr);
        grid-template-areas: "thumb info" "thumb price" "acts acts";
        gap: 0 16px; padding: 74px 20px 20px; border: 1px solid #F3F4F6; border-radius: 16px; overflow: hidden;
        box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
    }
    .fmm-orders-page .fmm-complete-card.is-selected { border-color: #FBBF24; }
    .fmm-orders-page .fmm-complete-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 54px;
        border-bottom: 1px solid #F3F4F6; background: #FAFAFA;
    }
    .fmm-orders-page .fmm-complete-card > .fmm-ocard__thumb { grid-area: thumb; width: 104px; height: 120px; border-radius: 4px; }
    .fmm-orders-page .fmm-complete-card > .fmm-ocard__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .fmm-orders-page .fmm-complete-card > .fmm-ocard__info { grid-area: info; min-width: 0; }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__title--lg { margin: 0 0 6px; font-size: 16px; line-height: 21px; }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__meta { display: block; margin-top: 6px; font-size: 12.5px; color: #9CA3AF; }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__meta > span:first-child {
        position: absolute; top: 17px; left: 20px; z-index: 1; font-size: 14px; color: #4B5563;
    }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__dot { display: none; }
    .fmm-orders-page .fmm-complete-card > .fmm-ocard__side { display: contents; }
    .fmm-orders-page .fmm-complete-card .fmm-complete-badge {
        position: absolute; top: 14px; right: 18px; z-index: 1; padding: 4px 11px; border-radius: 6px; font-size: 12px;
    }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__price { grid-area: price; align-self: end; justify-self: end; font-size: 18px; }

    .fmm-orders-page .fmm-complete-card .fmm-ocard__acts2 {
        grid-area: acts; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; padding-top: 0; border-top: 0;
    }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__acts2 > * {
        display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0;
        border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; font-size: 14px; color: #374151;
    }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__acts2 > .fmm-obtn--brand {
        grid-column: 1 / -1; min-height: 52px; border: 0; background: #FBBF24; color: #111827; font-size: 16px; font-weight: 700;
    }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__acts2 > .fmm-obtn--brand::before { content: "↻"; font-size: 18px; }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__acts2 > .fmm-obtn--soft { grid-column: 1 / -1; }
    .fmm-orders-page .fmm-complete-card .fmm-ocard__acts2 img { width: 16px; height: 16px; }

    /* Completed details card, opened by tapping an order. */
    .fmm-complete-layout .fmm-order-details { margin-bottom: 18px; border-radius: 16px; scroll-margin-top: 12px; }
    .fmm-complete-layout .fmm-order-details__head { display: flex; align-items: flex-start; justify-content: space-between; }
    .fmm-completed-details__close {
        display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%;
        background: #F3F4F6; color: #4B5563; font-size: 14px; cursor: pointer;
    }
}

/* Orders filter button: funnel + label on desktop, the mobile Figma's three-line icon on phones. */
.fmm-orders-filter__lines { display: none; }
@media (max-width: 560px) {
    .fmm-orders-page .fmm-orders-filter__funnel { display: none !important; }
    .fmm-orders-page .fmm-active-filter > summary.fmm-orders-filter svg.fmm-orders-filter__lines { display: block; width: 18px; height: 18px; }
    .fmm-orders-page .fmm-active-filter > summary.fmm-orders-filter {
        color: #374151; border-color: #E5E7EB; box-shadow: 0 1px 3px rgba(17, 24, 39, .08);
    }
}

/* Packages — mobile Figma: full-width Orders | Packages switch. */
@media (max-width: 560px) {
    .fmm-packages-page .fmm-page-head { display: block; }
    .fmm-packages-page .fmm-page-head > .fmm-segment {
        display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 18px 0 0; padding: 4px;
        border: 1px solid #E5E7EB; border-radius: 16px; background: #F3F4F6;
    }
    .fmm-packages-page .fmm-page-head > .fmm-segment > * {
        display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px; font-size: 14px; text-align: center;
    }
}

/* Package cards — mobile Figma (Packages screen). Content unchanged, layout only. */
@media (max-width: 560px) {
    .fmm-packages-page .fmm-pkg { padding: 16px; border-radius: 16px; gap: 0; }

    /* Header: [checkbox] thumb · status / title / date · ref pill. */
    .fmm-packages-page .fmm-pkg__id { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
    .fmm-packages-page .fmm-pkg__id:has(.fmm-pkgcheck--solo:not([style*="display: none"])) { padding-left: 34px; }
    .fmm-packages-page .fmm-pkgcheck--solo { position: absolute; top: 4px; left: 0; }
    .fmm-packages-page .fmm-pkg__thumb {
        flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: #F1F5F9; overflow: hidden;
        display: grid; place-items: center; color: #94A3B8;
    }
    .fmm-packages-page .fmm-pkg__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .fmm-packages-page .fmm-pkg__idmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .fmm-packages-page .fmm-pkg__state {
        display: inline-flex; padding: 0; border: 0; background: none !important;
        font-size: 11.5px; line-height: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    }
    .fmm-packages-page .fmm-pkg__state-icon { display: none !important; }
    .fmm-packages-page .fmm-pkg__name { font-size: 16px; line-height: 21px; font-weight: 700; color: #111827; }
    .fmm-packages-page .fmm-pkg__when { font-size: 13px; line-height: 18px; color: #6B7280; font-style: normal; }
    .fmm-packages-page .fmm-pkg__idend { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
    .fmm-packages-page .fmm-pkg__ref {
        display: flex; flex-direction: column; align-items: flex-start; padding: 5px 8px; border-radius: 6px;
        background: #F1F5F9; text-align: left;
    }
    .fmm-packages-page .fmm-pkg__ref em { font-size: 9px; line-height: 12px; font-style: normal; font-weight: 600; text-transform: uppercase; color: #64748B; }
    .fmm-packages-page .fmm-pkg__ref b { font-size: 11px; line-height: 14px; font-weight: 700; color: #334155; }

    /* Progress: Origin … Delivered above a thin bar. */
    .fmm-packages-page .fmm-pkg__prog { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .fmm-packages-page .fmm-pkg__prog-head { display: none; }
    .fmm-packages-page .fmm-pkg__prog-legend { order: 1; display: flex; justify-content: space-between; font-size: 12px; color: #64748B; }
    .fmm-packages-page .fmm-pkg__prog-legend em { font-style: normal; }
    .fmm-packages-page .fmm-pkg__prog-legend em:nth-child(2) { display: none; }
    .fmm-packages-page .fmm-pkg__prog-bar { order: 2; height: 6px; border-radius: 999px; background: #F1F5F9; }

    /* Figures in a grey box, three columns. */
    .fmm-packages-page .fmm-pkg__weights {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
        margin-bottom: 14px; padding: 12px 12px; border: 0; border-radius: 12px; background: #F8FAFC;
    }
    .fmm-packages-page .fmm-pkg__weights em { display: block; margin-bottom: 2px; font-size: 10.5px; font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: #64748B; }
    .fmm-packages-page .fmm-pkg__weights b { font-size: 14px; line-height: 19px; font-weight: 700; color: #111827; }
    .fmm-packages-page .fmm-pkg__billable em { color: #16A34A; }
    .fmm-packages-page .fmm-pkg__billable b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
    .fmm-packages-page .fmm-pkg__billable i { font-style: normal; color: #D97706; }

    /* Info rows. */
    .fmm-packages-page .fmm-pkg__dims { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; }
    .fmm-packages-page .fmm-pkg__dims em { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #475569; }
    .fmm-packages-page .fmm-pkg__dims b { font-size: 13px; font-weight: 500; color: #111827; }
    .fmm-packages-page .fmm-pkg__note { margin-bottom: 0; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; }

    /* Actions under a divider: one wide button and a square menu button. */
    .fmm-packages-page .fmm-pkg__foot { gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid #F1F5F9; }
    .fmm-packages-page .fmm-pkg__foot > .fmm-btn { min-height: 48px; border-radius: 12px; font-size: 15px; }
    .fmm-packages-page .fmm-pkg__menu > button { width: 48px; height: 48px; border-radius: 12px; font-size: 18px; }
}
@media (max-width: 560px) {
    .fmm-packages-page .fmm-pkg__ref { padding: 4px 8px; }
    .fmm-packages-page .fmm-pkg__ref em { display: none; }
    .fmm-packages-page .fmm-pkg__ref b { font-size: 10.5px; letter-spacing: .02em; }
    .fmm-packages-page .fmm-pkg__name { font-size: 15px; line-height: 20px; }
    .fmm-packages-page .fmm-pkg__weights { grid-template-columns: .8fr .95fr 1.45fr; gap: 6px; padding: 12px; }
    .fmm-packages-page .fmm-pkg__weights em { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
    .fmm-packages-page .fmm-pkg__billable b { flex-wrap: nowrap; white-space: nowrap; font-size: 13.5px; }
    .fmm-packages-page .fmm-pkg__note, .fmm-packages-page .fmm-pkg__note span, .fmm-packages-page .fmm-pkg__note a { font-size: 11.5px; line-height: 15px; }
}
@media (max-width: 560px) {
    .fmm-packages-page .fmm-pkg__id { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
    .fmm-packages-page .fmm-pkg__thumb { grid-column: 1; grid-row: 1 / span 2; }
    .fmm-packages-page .fmm-pkg__idmain { grid-column: 2; grid-row: 1; }
    .fmm-packages-page .fmm-pkg__idend { grid-column: 2; grid-row: 2; align-items: flex-start; }
}

/* ==========================================================================
   How it Works — Discovery to Delivery (shared by the US and Nigeria home
   pages). Phone layout follows the mobile Figma; wider screens show more
   cards in the same dark band, with arrows.
   ========================================================================== */
.fmm-hiw {
    position: relative; overflow: hidden; padding: 44px 0 40px; border-radius: 28px; text-align: center; color: #fff;
    background:
        radial-gradient(60% 55% at 0% 0%, rgba(161, 120, 30, .45) 0%, transparent 70%),
        radial-gradient(120% 120% at 100% 100%, #1d1d1f 0%, #26262a 60%, #2b2a27 100%);
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .35);
}
.fmm-hiw::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, transparent, #FBBF24 50%, transparent);
}
.fmm-hiw__pill {
    display: inline-block; padding: 6px 14px; border: 1px solid rgba(251, 191, 36, .45); border-radius: 999px;
    background: rgba(251, 191, 36, .16); color: #E5D9B8; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.fmm-hiw__title { margin: 16px 0 12px; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.fmm-hiw__title em {
    font-style: normal;
    background: linear-gradient(transparent 70%, rgba(202, 138, 4, .85) 70%, rgba(202, 138, 4, .85) 86%, transparent 86%);
}
.fmm-hiw__hint { margin: 0 0 28px; font-size: 14px; font-weight: 600; color: #D1D5DB; }
.fmm-hiw__hint span { margin-left: 4px; color: #FBBF24; font-size: 17px; }

.fmm-hiw__track {
    position: relative; display: flex; gap: 24px; margin: 0; padding: 16px 40px 8px; list-style: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 40px; scrollbar-width: none;
    cursor: grab; user-select: none;
}
.fmm-hiw__track::-webkit-scrollbar { display: none; }
.fmm-hiw__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.fmm-hiw__track img { -webkit-user-drag: none; pointer-events: none; }
.fmm-hiw__card {
    position: relative; flex: 0 0 290px; scroll-snap-align: start; padding: 16px 16px 24px;
    border-radius: 18px; background: #fff; color: #111827; text-align: center;
}
.fmm-hiw__card + .fmm-hiw__card::before {
    content: ""; position: absolute; top: 90px; left: -25px; width: 26px; height: 3px; background: #FBBF24;
}
.fmm-hiw__card--dark { background: #1F1F1F; color: #fff; }
.fmm-hiw__num {
    position: absolute; top: -12px; right: -6px; z-index: 1; display: grid; place-items: center;
    width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: #FDD20A;
    color: #111; font-size: 12px; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.fmm-hiw__art { display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 492 / 256; }
.fmm-hiw__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmm-hiw__card b { display: block; margin-top: 16px; font-size: 18px; line-height: 24px; font-weight: 700; }
.fmm-hiw__card em { display: block; margin-top: 6px; font-size: 14px; font-style: normal; color: #6B7280; }
.fmm-hiw__card--dark em { color: #9CA3AF; }

.fmm-hiw__dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.fmm-hiw__dots i { width: 8px; height: 8px; border-radius: 50%; background: #D1D5DB; cursor: pointer; transition: width .2s, background .2s; }
.fmm-hiw__dots i.is-on { width: 24px; border-radius: 999px; background: #FBBF24; }

@media (max-width: 860px) {
    .fmm-hiw__title { font-size: 34px; }
    .fmm-hiw__track { padding-left: 24px; padding-right: 24px; scroll-padding: 0 24px; }
}

@media (max-width: 560px) {
    .fmm-hiw { padding: 26px 0 30px; border-radius: 20px; }
    .fmm-hiw__pill { padding: 5px 12px; font-size: 10.5px; }
    .fmm-hiw__title { margin: 14px 0 12px; font-size: 29px; }
    .fmm-hiw__hint { margin-bottom: 22px; font-size: 13px; }
    .fmm-hiw__hint span { font-size: 16px; }
    .fmm-hiw__track { gap: 20px; padding: 14px 15px 6px; scroll-padding: 0 15px; }
    .fmm-hiw__card { flex-basis: 250px; padding: 15px 15px 22px; border-radius: 16px; }
    .fmm-hiw__card + .fmm-hiw__card::before { top: 80px; left: -21px; width: 22px; }
    .fmm-hiw__num { width: 28px; height: 28px; font-size: 11.5px; }
    .fmm-hiw__card b { margin-top: 14px; font-size: 17px; line-height: 22px; }
    .fmm-hiw__card em { font-size: 13px; }
    .fmm-hiw__dots { gap: 7px; margin-top: 22px; }
    .fmm-hiw__dots i { width: 7px; height: 7px; }
    .fmm-hiw__dots i.is-on { width: 22px; }
}

/* --- package detail: warehouse states (Main Content_margin Figma pair) ---
   Pending processing = scanned in at Master Received, not yet weighed or priced.
   Ready for payment  = weighed, measured and priced by the warehouse. */
.fmm-pd__state {
    grid-column: 1 / -1;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 20px 22px; border: 1px solid; border-radius: 12px;
    font-size: 14px; line-height: 22px;
}
.fmm-pd__state b { display: block; font-weight: 700; }
.fmm-pd__state em { display: block; margin-top: 12px; font-style: normal; }
.fmm-pd__state-ico { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.fmm-pd__state--info { background: #EFF6FF; border-color: #DBEAFE; color: #1E40AF; }
.fmm-pd__state--info b { color: #1E3A8A; }
.fmm-pd__state--info .fmm-pd__state-ico { color: #3B82F6; }
.fmm-pd__state--ready { align-items: center; padding: 18px 22px; background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.fmm-pd__state--ready b { font-size: 18px; line-height: 26px; color: #166534; }
.fmm-pd__state--ready .fmm-pd__state-ico { width: 20px; height: 20px; margin-top: 0; align-self: flex-start; margin-top: 4px; color: #16A34A; }
.fmm-pd__state-btn { flex: none; margin-left: auto; padding: 11px 22px; white-space: nowrap; }
@media (max-width: 640px) { .fmm-pd__state--ready, .fmm-pd__paybar { flex-wrap: wrap; } .fmm-pd__state-btn, .fmm-pd__paybar .fmm-obtn { width: 100%; text-align: center; justify-content: center; } }

.fmm-pd__nophoto {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 336px; padding: 32px 20px; text-align: center;
    border: 2px dashed #E5E7EB; border-radius: 12px; background: #F9FAFB;
}
.fmm-pd__nophoto img { width: 157px; height: auto; margin-bottom: 18px; }
.fmm-pd__nophoto b { font-size: 14px; font-weight: 500; color: #374151; }
.fmm-pd__nophoto span { margin-top: 8px; font-size: 12px; line-height: 17px; color: #6B7280; }

.fmm-pd__source-chip--pending { background: #EFF6FF; color: #2563EB; border: 1px solid #DBEAFE; letter-spacing: .08em; }
.fmm-pd__source-chip--pending i { width: 8px; height: 8px; background: #2563EB; box-shadow: inset 0 0 0 2px #EFF6FF, 0 0 0 1px #2563EB; }
.fmm-pd__source-chip--ready { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; }
.fmm-pd__source-chip--ready i { background: #22C55E; }

.fmm-pd__meta b.is-empty, .fmm-pd__dimensions > b.is-empty { font-weight: 400; font-style: italic; color: #9CA3AF; }

.fmm-pd__weights.is-pending > div { background: #F3F4F6; }
.fmm-pd__weights-na { font-size: 14px !important; font-weight: 400 !important; font-style: italic; letter-spacing: 0 !important; color: #9CA3AF; }
.fmm-pd__fee {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding: 14px 16px; border: 1px solid var(--fmm-border); border-radius: 10px; background: #F3F4F6;
    font-size: 14px; color: #374151;
}
.fmm-pd__fee em { font-weight: 500; color: #6B7280; }

.fmm-pd__intake-req { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; }
.fmm-pd__intake-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #F3F4F6; }
.fmm-pd__intake-req b { display: block; font-size: 14px; font-weight: 600; color: #111827; }
.fmm-pd__intake-req em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; color: #6B7280; }
.fmm-pd__paylocked { padding: 20px 24px; text-align: center; }
.fmm-pd__paylocked button {
    width: 100%; height: 56px; border: 0; border-radius: 12px; background: #F3F4F6;
    font: inherit; font-size: 14px; color: #9CA3AF; cursor: not-allowed;
}
.fmm-pd__paylocked button b { font-size: 15px; font-weight: 600; }
.fmm-pd__paylocked p { margin: 24px 0 0; font-size: 12px; color: #6B7280; }