/* ==========================================================================
   RECO — the shared recommendation surface  (fp-reco-*)
   --------------------------------------------------------------------------
   One rail shell + one nav + five card types, used by BOTH single-fp_product
   and archive-fp_deal. It lived in single-product.css under `fp-cmp-rivals-*`,
   a name that never matched reality (the compare page has never used it) and
   could not be reused without either duplicating the rules or importing a
   3,500-line page stylesheet. Extracted so a recommendation looks identical
   wherever it appears -- that consistency IS the product surface.

   Cards:  pick (alternatives) - bundle (buy-together) - store (cashback)
           drop (price history) - coupon (codes)
   Shell:  /* ─── Shelf ───
   The unit fp_reco_shelf_open() emits: a head, then a rail. It carries no
   surface of its own — the cards inside it are the surfaces, and a panel
   around a row of panels is the "card in a card" that makes a page feel
   heavy. .fp-reco-panel is the one exception, for shelves that deliberately
   sit on a tinted plate. */
.fp-reco-shelf { display: block; }

/* ─── Rail progress bar ───
   The affordance that says "there is more to the right" on a touch device,
   where the arrows are deliberately absent. Arrows answer that question for a
   mouse; a swipeable rail with no indicator answers it for nobody, and a
   category slider fed from page settings can hold twenty tiles.

   It renders only when the rail actually overflows — app.js sets
   data-fp-rail-over on the wrapper — so a rail of three cards on a wide screen
   shows nothing rather than a full-width bar that cannot move. */
.fp-reco-railwrap { position: relative; }
.fp-reco-railbar {
    display: none;
    height: 3px;
    margin: var(--fp-space-1) auto 0;
    width: 72px;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-slate-200);
    overflow: hidden;
}
.fp-reco-railwrap[data-fp-rail-over] .fp-reco-railbar { display: block; }
.fp-reco-railbar-thumb {
    display: block;
    height: 100%;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-text-main);
    transform-origin: left center;
    transition: transform 0.12s linear;
}
/* A mouse gets the arrows and does not need the bar as well. */
@media (hover: hover) and (pointer: fine) { .fp-reco-railbar { display: none !important; } }

/* ─── Eyebrow ───
   One rule, five tones. There were five near-identical declarations here, one
   per section (`-ai`, `-bundle-eyebrow`, `-panel-eyebrow`, `-loot-eyebrow`,
   `-pdrop-eyebrow`), differing only in two colours — so adding a shelf meant
   copying 200 characters and hoping the padding matched. The tone says what
   the shelf is about: lime = a win, green = cashback, indigo = FlashAI,
   ink = live/right-now, loot = the loot brand. */
.fp-reco-eyebrow {
    display: inline-flex; align-items: center; gap: var(--fp-space-1);
    width: max-content;
    font-size: var(--fp-role-meta); font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: var(--fp-space-075) var(--fp-space-2);
    border-radius: var(--fp-radius-pill);
}
.fp-reco-eyebrow--ai    { color: var(--fp-brand-indigo); background: var(--fp-brand-indigo-soft); }
.fp-reco-eyebrow--lime  { color: var(--fp-lime-ink);     background: var(--fp-lime); }
.fp-reco-eyebrow--green { color: var(--fp-green-dark);   background: var(--fp-green-soft); }
.fp-reco-eyebrow--ink   { color: var(--fp-on-dark);      background: var(--fp-text-main); }
.fp-reco-eyebrow--loot  { color: var(--fp-on-dark);      background: var(--fp-gradient-loot); }
.fp-reco-eyebrow--green .fp-reco-dot { background: var(--fp-green-deep); }
.fp-reco-eyebrow--ink   .fp-reco-dot { background: var(--fp-lime); }

.fp-reco-head > .fp-reco-headline + .fp-reco-nav, then .fp-reco-rail
   Nav:    fp_rail_nav() in inc/rail-nav.php, driven by [data-fp-slider-*]
   ========================================================================== */

/* The rail nav and several eyebrows pulse a dot. single-product.css owns
   `fp-ph-pulse`, which the deal archive does not load -- so this file carries
   its own. */
@keyframes fp-reco-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.fp-reco-dot { width: 6px; height: 6px; border-radius: var(--fp-radius-circle); background: var(--fp-brand-indigo); animation: fp-reco-pulse 1.6s ease-in-out infinite; }

/* "Top pick" tag. Same reason as the dot: it was defined next to a product-page
   section that the archive never renders. */
.fp-reco-toptag { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--fp-space-075); padding: var(--fp-space-05) var(--fp-space-175); font-size: var(--fp-role-meta); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fp-on-dark); background: var(--fp-green-deep); border-radius: var(--fp-radius-pill); box-shadow: 0 2px 6px var(--fp-green-glow); }

/* ── SECTION 18: Reco constellation — Smart alternatives (Compare Engine Layer 1) ── */
.fp-reco-header { display: flex; align-items: center; justify-content: space-between; gap: var(--fp-space-3); margin-bottom: var(--fp-space-3); flex-wrap: wrap; }
/* Grows so any trailing controls (see-all link, rail nav) pack to the right
   edge without needing a wrapper element around them. */
.fp-reco-headline { display: flex; flex-direction: column; gap: var(--fp-space-05); flex: 1 1 240px; min-width: 0; }
.fp-reco-h2 { margin: 0; font-size: var(--fp-role-h2); font-weight: 800; letter-spacing: -0.02em; color: var(--fp-text-main); line-height: 1.2; }
.fp-reco-sub { margin: 0; font-size: var(--fp-role-meta); color: var(--fp-text-muted); }
.fp-reco-all { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--fp-space-1); font-size: var(--fp-role-meta); font-weight: 800; color: #fff; text-decoration: none; padding: var(--fp-space-2) var(--fp-space-3); border-radius: var(--fp-radius-pill); background: var(--fp-gradient-indigo); box-shadow: 0 4px 12px var(--fp-brand-indigo-glow); transition: var(--fp-transition); }
.fp-reco-all:hover { transform: translateY(-1px); }
.fp-reco-rail {
    display: flex;
    gap: var(--fp-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--fp-space-1) var(--fp-space-1) var(--fp-space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fp-reco-rail::-webkit-scrollbar { display: none; }
/* Rail nav — lives in the rail's label row, not over the rail.
   Two earlier attempts both failed for the same reason: the arrows were
   absolutely positioned against the track. Outside it (left/right: -16px) they
   pushed the document past the viewport at 375px; inside it (left/right: 0)
   a 44px disc sat on the first card and clipped 40px off its price. A control
   that scrolls the rail belongs beside the rail's title, where every app
   carousel puts it — then it can never collide with content at any width. */
.fp-reco-nav {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--fp-space-2);
}
.fp-reco-arrow {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fp-surface);
    border: 1px solid var(--fp-slate-200);
    border-radius: var(--fp-radius-circle);
    color: var(--fp-text-main);
    cursor: pointer;
    box-shadow: var(--fp-shadow-sm);
    transition: var(--fp-transition);
}
.fp-reco-arrow:hover:not(:disabled) {
    background: var(--fp-brand-indigo);
    border-color: var(--fp-brand-indigo);
    color: #fff;
    box-shadow: 0 4px 12px var(--fp-brand-indigo-glow);
}
.fp-reco-arrow:active:not(:disabled) { transform: scale(0.94); }
/* A permanently visible control must show when it has nothing left to do —
   JS keeps this in sync with the rail's real scroll position. */
.fp-reco-arrow:disabled {
    color: var(--fp-slate-300);
    border-color: var(--fp-slate-100);
    box-shadow: none;
    cursor: default;
}
/* Any mouse/trackpad device gets the nav regardless of window width — touch
   devices swipe the rail natively and get no controls at all. */
@media (hover: hover) and (pointer: fine) { .fp-reco-nav { display: inline-flex; } }

/* Rival card */
.fp-reco-pick {
    position: relative;
    flex: 0 0 auto;
    width: 200px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
    padding: var(--fp-space-3);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow-sm);
    transition: var(--fp-transition);
}
.fp-reco-pick:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-md); border-color: var(--fp-slate-300); }
.fp-reco-pick--up {
    border-color: var(--fp-brand-indigo-border);
    background: linear-gradient(180deg, var(--fp-brand-indigo-soft) 0%, var(--fp-surface) 40%);
}
.fp-reco-pick--up .fp-reco-pick-true { color: var(--fp-brand-indigo); }
.fp-reco-pick-top { display: flex; align-items: center; justify-content: space-between; }
.fp-reco-pick-store { font-size: var(--fp-role-meta); font-weight: 700; color: var(--fp-text-muted); }
/* score = quiet indigo text — the delta pill is each rival card's one badge */
.fp-reco-pick-score { display: inline-flex; align-items: center; gap: var(--fp-space-075); font-size: var(--fp-role-meta); font-weight: 800; color: var(--fp-brand-indigo); }
.fp-reco-pick-img { display: block; border-radius: var(--fp-radius-md); overflow: hidden; background: var(--fp-slate-50); aspect-ratio: 1 / 1; }
.fp-reco-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-reco-pick-title { margin: 0; font-size: var(--fp-role-label); font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.fp-reco-pick-title a { color: var(--fp-text-main); text-decoration: none; }
.fp-reco-pick-price { display: flex; align-items: baseline; gap: var(--fp-space-1); }
.fp-reco-pick-true { font-size: var(--fp-role-h3); font-weight: 800; color: var(--fp-green-dark); }
.fp-reco-pick-true-lbl { font-size: var(--fp-role-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fp-green-text); }
.fp-reco-pick-delta { display: inline-flex; width: max-content; font-size: var(--fp-role-meta); font-weight: 800; padding: var(--fp-space-05) var(--fp-space-2); border-radius: var(--fp-radius-pill); }
.fp-reco-pick-delta--down { color: var(--fp-green-dark); background: var(--fp-green-soft); }
.fp-reco-pick-delta--upgrade { color: var(--fp-brand-indigo); background: var(--fp-brand-indigo-soft); }
.fp-reco-pick-why { display: flex; align-items: flex-start; gap: var(--fp-space-1); margin: 0; font-size: var(--fp-role-meta); font-weight: 600; color: var(--fp-text-main); }
.fp-reco-pick-why svg { flex-shrink: 0; color: var(--fp-green-text); margin-top: var(--fp-space-025); }
.fp-reco-pick-gain { display: flex; flex-direction: column; gap: var(--fp-space-1); }
.fp-reco-pick-gain-lbl { font-size: var(--fp-role-meta); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fp-brand-indigo); }
.fp-reco-pick-gain-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--fp-space-075); }
.fp-reco-pick-gain-list li { display: flex; align-items: flex-start; gap: var(--fp-space-1); font-size: var(--fp-role-meta); font-weight: 600; color: var(--fp-text-main); }
.fp-reco-pick-gain-list svg { flex-shrink: 0; color: var(--fp-brand-indigo); margin-top: var(--fp-space-05); }
.fp-reco-pick-actions { margin-top: auto; display: flex; align-items: center; gap: var(--fp-space-2); }
/* Primary = go look at the actual product. This rail recommends alternatives
   to VIEW, not a compare tool — "Compare" was reading as the main action. */
.fp-reco-pick-view { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--fp-space-125); padding: var(--fp-space-2) var(--fp-space-2); font-size: var(--fp-role-meta); font-weight: 800; color: #fff; text-decoration: none; background: var(--fp-gradient-indigo); border-radius: var(--fp-radius-sm); box-shadow: 0 4px 10px var(--fp-brand-indigo-glow); transition: var(--fp-transition); }
.fp-reco-pick-view:hover { transform: translateY(-1px); }
.fp-reco-pick-view svg { flex-shrink: 0; }
.fp-reco-pick-cmpadd { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--fp-brand-indigo); background: var(--fp-surface); border: 1.5px solid var(--fp-brand-indigo-border); border-radius: var(--fp-radius-circle); cursor: pointer; transition: var(--fp-transition); }
.fp-reco-pick-cmpadd:hover { background: var(--fp-brand-indigo-soft); }
.fp-reco-pick-cmpadd svg { transition: transform 0.2s ease; }
.fp-reco-pick-cmpadd[aria-pressed="true"] { background: var(--fp-brand-indigo); border-color: var(--fp-brand-indigo); color: #fff; }
.fp-reco-pick-cmpadd[aria-pressed="true"] svg { transform: rotate(45deg); }

/* Reco constellation — Zone A wrapper + segmented control */
.fp-reco { margin: 0; }

/* Zone A semantic toggle skin — green = save, indigo = upgrade */

/* ── SECTION 19: Zone B — "Trending deals" rich deal rail ───────── */
.fp-reco-bundle { margin: 0; }
.fp-reco-bundle-card { position: relative; flex: 0 0 auto; width: 178px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--fp-space-2); padding: var(--fp-space-3); background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg); box-shadow: var(--fp-shadow-sm); text-decoration: none; transition: var(--fp-transition); }
.fp-reco-bundle-card:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-md); border-color: var(--fp-slate-200); }
.fp-reco-bundle-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--fp-radius-md); overflow: hidden; background: var(--fp-slate-50); }
.fp-reco-bundle-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-reco-bundle-off { position: absolute; top: var(--fp-space-2); left: var(--fp-space-2); display: inline-flex; align-items: center; gap: var(--fp-space-05); font-size: var(--fp-role-meta); font-weight: 800; color: #fff; background: var(--fp-gradient-green); padding: var(--fp-space-075) var(--fp-space-2); border-radius: var(--fp-radius-pill); box-shadow: 0 4px 10px var(--fp-green-cta-glow); }
.fp-reco-bundle-store { font-size: var(--fp-role-meta); font-weight: 700; color: var(--fp-text-muted); }
.fp-reco-bundle-name { font-size: var(--fp-role-meta); font-weight: 700; line-height: 1.3; color: var(--fp-text-main); min-height: 2.5em; }
.fp-reco-bundle-prices { display: flex; align-items: baseline; gap: var(--fp-space-1); }
.fp-reco-bundle-now { display: inline-flex; align-items: center; gap: var(--fp-space-075); font-size: var(--fp-role-h3); font-weight: 900; color: var(--fp-green-text); }
.fp-reco-bundle-now svg { flex-shrink: 0; }
.fp-reco-bundle-was { font-size: var(--fp-role-meta); font-weight: 600; color: var(--fp-text-muted); text-decoration: line-through; }
.fp-reco-bundle-back { display: inline-flex; align-items: center; gap: var(--fp-space-075); font-size: var(--fp-role-meta); font-weight: 800; color: var(--fp-green-dark); }
.fp-reco-bundle-back svg { flex-shrink: 0; }
/* This rail is mostly price-drops — the tap target should read as an
   unmissable deal button, not just a colored link. */
.fp-reco-bundle-cta { margin-top: var(--fp-space-1); display: flex; align-items: center; justify-content: center; gap: var(--fp-space-125); padding: var(--fp-space-175) var(--fp-space-2); font-size: var(--fp-role-meta); font-weight: 800; color: #fff; background: var(--fp-gradient-green); border-radius: var(--fp-radius-sm); box-shadow: 0 4px 10px var(--fp-green-cta-glow); transition: var(--fp-transition); }
.fp-reco-bundle-cta svg { transition: var(--fp-transition); }
.fp-reco-bundle-card:hover .fp-reco-bundle-cta { transform: translateY(-1px); box-shadow: 0 6px 14px var(--fp-green-cta-glow); }
.fp-reco-bundle-card:hover .fp-reco-bundle-cta svg { transform: translateX(3px); }

/* ── SECTION 19B: For You — "Special offers, just for you" (light reward surface) ─ */
.fp-reco-panel { position: relative; overflow: hidden; border-radius: var(--fp-radius-lg); background: var(--fp-surface); border: 1px solid var(--fp-border); box-shadow: var(--fp-shadow-md); }
.fp-reco-panel-bg { position: absolute; inset: 0; background: radial-gradient(130% 90% at 100% 0%, var(--fp-green-soft) 0%, transparent 52%); pointer-events: none; }
.fp-reco-panel-inner { position: relative; padding: var(--fp-space-4); }
/* Row so the rail nav can sit opposite the headline. With the nav hidden on
   touch this renders identically to the old single-column head. */
.fp-reco-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fp-space-3); margin-bottom: var(--fp-space-4); }
.fp-reco-panel-headline { display: flex; flex-direction: column; gap: var(--fp-space-1); flex: 1 1 240px; min-width: 0; }
.fp-reco-panel-h2 { margin: 0; font-size: var(--fp-role-h2); font-weight: 800; letter-spacing: -0.02em; color: var(--fp-text-main); line-height: 1.2; }
.fp-reco-panel-sub { margin: 0; max-width: 46ch; font-size: var(--fp-role-meta); color: var(--fp-text-muted); }

/* Trending/setup rail — "N% buy this together" social-proof line */
.fp-reco-bundle-pair { font-size: var(--fp-role-meta); font-weight: 700; color: var(--fp-brand-indigo); }

/* SECTION 19B: Best cashback stores for you (reuses .fp-reco-panel-* shell below) */
.fp-reco-store-card { position: relative; flex: 0 0 auto; width: 168px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--fp-space-2); padding: var(--fp-space-3); background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg); box-shadow: var(--fp-shadow-sm); text-decoration: none; transition: var(--fp-transition); }
.fp-reco-store-card:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-md); border-color: var(--fp-slate-200); }
.fp-reco-store-toptag { position: absolute; top: var(--fp-space-2); right: var(--fp-space-2); }
/* Bigger mark, thinner ring of background around it — a cramped logo box
   reads small no matter how big the card gets. */
.fp-reco-store-logo { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--fp-radius-md); background: var(--fp-slate-50); overflow: hidden; flex-shrink: 0; }
.fp-reco-store-logo img { width: 36px; height: 36px; object-fit: contain; }
.fp-reco-store-coupons { font-size: var(--fp-role-meta); font-weight: 700; color: var(--fp-text-muted); background: var(--fp-slate-100); padding: var(--fp-space-075) var(--fp-space-15); border-radius: var(--fp-radius-pill); white-space: nowrap; }
.fp-reco-store-name { font-size: var(--fp-role-label); font-weight: 800; color: var(--fp-text-main); }
/* Cashback is the brand's core value prop here — vibrant green fill + white
   text, not quiet colored text, so it reads as the headline of the card. */
.fp-reco-store-rate { display: inline-flex; align-items: center; width: max-content; font-size: var(--fp-role-meta); font-weight: 800; color: #fff; background: var(--fp-gradient-green); padding: var(--fp-space-1) var(--fp-space-2); border-radius: var(--fp-radius-pill); box-shadow: 0 3px 8px var(--fp-green-cta-glow); }
.fp-reco-store-cta { margin-top: auto; padding-top: var(--fp-space-05); display: inline-flex; align-items: center; gap: var(--fp-space-1); font-size: var(--fp-role-meta); font-weight: 800; color: var(--fp-green-text); }
.fp-reco-store-cta svg { transition: var(--fp-transition); }
.fp-reco-store-card:hover .fp-reco-store-cta svg { transform: translateX(3px); }


/* SECTION 19D: Latest price drops — Price Block signature card */
.fp-reco-drop-card { position: relative; flex: 0 0 auto; width: 180px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--fp-space-1); padding: var(--fp-space-3); background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg); box-shadow: var(--fp-shadow-sm); text-decoration: none; transition: var(--fp-transition); }
.fp-reco-drop-card:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-md); border-color: var(--fp-slate-200); }
.fp-reco-drop-atl { position: absolute; top: var(--fp-space-2); right: var(--fp-space-2); font-size: var(--fp-role-meta); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fp-lime-ink); background: var(--fp-gradient-lime); padding: var(--fp-space-075) var(--fp-space-2); border-radius: var(--fp-radius-pill); box-shadow: 0 2px 8px var(--fp-lime-glow); }
.fp-reco-drop-thumb { display: block; width: 56px; height: 56px; border-radius: var(--fp-radius-md); overflow: hidden; background: var(--fp-slate-50); }
.fp-reco-drop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-reco-drop-name { font-size: var(--fp-role-meta); font-weight: 700; line-height: 1.3; color: var(--fp-text-main); min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fp-reco-drop-prices { display: flex; align-items: baseline; gap: var(--fp-space-1); font-variant-numeric: tabular-nums; }
.fp-reco-drop-now { font-size: var(--fp-role-h3); font-weight: 800; letter-spacing: -0.01em; color: var(--fp-text-main); }
.fp-reco-drop-was { font-size: var(--fp-role-meta); font-weight: 600; color: var(--fp-text-muted); text-decoration: line-through; }
.fp-reco-drop-spark { color: var(--fp-green-dark); line-height: 0; }
.fp-reco-drop-meta { font-size: var(--fp-role-meta); font-weight: 600; color: var(--fp-text-muted); }
.fp-reco-drop-cta { margin-top: var(--fp-space-05); display: inline-flex; align-items: center; gap: var(--fp-space-125); font-size: var(--fp-role-meta); font-weight: 800; color: var(--fp-brand-indigo); }
.fp-reco-drop-cta svg { transition: var(--fp-transition); }
.fp-reco-drop-card:hover .fp-reco-drop-cta svg { transform: translateX(3px); }

@media (min-width: 768px) {
    .fp-reco-panel-inner { padding: var(--fp-space-5); }
}

/* The drop card's savings chip. It lived in single-product.css as
   `.fp-ph-discount-off` and was reached by a card that now renders on the deal
   archive too, where that stylesheet is not loaded — a card that silently
   loses a chip on one of the two pages it ships on. */
.fp-reco-drop-off {
    align-self: center;
    display: inline-flex; align-items: center; gap: var(--fp-space-1);
    padding: var(--fp-space-125) var(--fp-space-2);
    font-size: var(--fp-role-meta); font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--fp-lime-ink);
    background: var(--fp-lime);
    border-radius: var(--fp-radius-pill);
    white-space: nowrap;
}
.fp-reco-drop-off svg { flex-shrink: 0; }