/* ═══════════════════════════════════════════════════════════════
   FanFundU — Shopping & Rewards Page
   Rally Red #E12727 · Cream #F2E4B1 · Navy #1C2130 · Yellow #F99D20
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand-family tokens alias to program theme tokens (--brand-*, set by
     shared/program-config.js). Fallbacks = FanFundU defaults. */
  --red:        var(--brand-primary, #E12727);
  --red-deep:   var(--brand-primary-hover, #B81E1E);
  --red-soft:   rgba(225,39,39,.10);
  --cream:      var(--brand-text-on-primary, #F2E4B1);
  --cream-soft: var(--brand-surface, #FAF4DC);
  --paper:      var(--brand-background, #FBF7E9);
  --navy:       var(--brand-secondary, #1C2130);
  --navy-2:     #252c3d;
  --navy-3:     #2e3648;
  --ink:        #1C2130;
  --ink-2:      #5a6170;
  --ink-3:      #9aa0ac;
  --yellow:     var(--brand-accent, #F99D20);
  --yellow-d:   #c97d0a;
  --yellow-s:   rgba(249,157,32,.13);
  --green:      var(--brand-success, #18a060);
  --green-s:    rgba(24,160,96,.11);
  --white:      #ffffff;
  --line:       var(--brand-border, rgba(28,33,48,.09));
  --line-s:     rgba(28,33,48,.16);
  --nav-h:      64px;
  --r:          12px;
  --r-lg:       18px;
  --r-xl:       24px;
  --sh-sm:      0 1px 3px rgba(28,33,48,.05), 0 4px 12px rgba(28,33,48,.07);
  --sh:         0 2px 6px rgba(28,33,48,.06), 0 12px 28px -8px rgba(28,33,48,.13);
  --sh-lg:      0 4px 8px rgba(28,33,48,.06), 0 24px 48px -12px rgba(28,33,48,.22);
  --sh-red:     0 4px 16px rgba(225,39,39,.32);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'REM', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(28,33,48,.012) 0, rgba(28,33,48,.012) 1px,
    transparent 1px, transparent 14px);
}
a  { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

.sp-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
  position: relative; z-index: 1;
}

/* ════════════ NAV ════════════ */
.sp-nav {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  background: var(--navy);
  box-shadow: 0 2px 24px rgba(0,0,0,.30);
}
.sp-nav-inner {
  max-width: var(--sp-maxw, 1360px); width: 100%; margin: 0 auto;
  padding: 0 28px; height: 100%;
  display: flex; align-items: center; gap: 14px;
}
.sp-nav-logo { height: 28px; flex-shrink: 0; }
.sp-nav-logo img { height: 100%; width: auto; }
.sp-nav-div  { width: 1px; height: 26px; background: rgba(255,255,255,.11); flex-shrink: 0; margin: 0 2px; }
.sp-nav-links { display: flex; gap: 2px; }
.sp-nav-link {
  font-size: 13px; font-weight: 500;
  color: rgba(242,228,177,.58);
  padding: 7px 11px; border-radius: 8px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.sp-nav-link:hover { color: var(--cream); background: rgba(255,255,255,.07); }
.sp-nav-link.active { color: var(--cream); background: rgba(225,39,39,.20); }
.sp-nav-spacer { flex: 1; min-width: 0; }
.sp-nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(242,228,177,.75); cursor: pointer; transition: background .15s, color .15s;
}
.sp-nav-burger:hover { background: rgba(255,255,255,.11); color: var(--cream); }
.sp-nav-team {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px; padding: 6px 12px 6px 7px; flex-shrink: 1; min-width: 0;
}
.sp-nav-team-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: var(--cream); flex-shrink: 0;
}
.sp-nav-team-name { font-size: 11.5px; font-weight: 700; color: var(--cream-soft); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.sp-nav-team-earn { font-size: 10.5px; font-weight: 700; color: var(--yellow); line-height: 1.3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.sp-nav-lang-btn {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: rgba(242,228,177,.42);
  padding: 6px 9px; border-radius: 7px;
  transition: color .15s, background .15s; flex-shrink: 0;
}
.sp-nav-lang-btn:hover { color: var(--cream); background: rgba(255,255,255,.08); }
/* ── Notification bell ───────────────────────────────────────────── */
@keyframes stepIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sp-bell-wrap { position: relative; flex-shrink: 0; }
.sp-bell-btn {
  appearance: none; position: relative; width: 34px; height: 34px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(242,228,177,.70); cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.sp-bell-btn:hover { border-color: rgba(255,255,255,.26); color: var(--cream); background: rgba(255,255,255,.10); }
.sp-bell-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--navy); padding: 0 3px;
}
.sp-bell-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 300;
  width: 300px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 16px 40px rgba(0,0,0,.28);
  padding: 8px; animation: stepIn .15s ease forwards;
}
.sp-bell-menu-hd {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); padding: 6px 10px 10px;
}
.sp-bell-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.sp-bell-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px;
  border-radius: 9px;
}
.sp-bell-item.is-unread { background: rgba(225,39,39,.06); }
.sp-bell-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--red); flex-shrink: 0; margin-top: 5px; }
.sp-bell-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-bell-item-text { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.sp-bell-item-time { font-size: 11px; color: var(--ink-3); }
@media (max-width: 560px) { .sp-bell-menu { width: 260px; right: -40px; } }
/* Razor additions (Notification Center handoff): interactive rows get the
   shared header-popover hover tint (flagged for design review — the
   prototype's rows were inert), and the specified empty state. */
a.sp-bell-item-link:hover { background: rgba(28,33,48,.05); }
a.sp-bell-item-link.is-unread:hover { background: rgba(225,39,39,.10); }
.sp-bell-empty { padding: 28px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.sp-bell-empty svg { color: var(--ink-3); }
.sp-bell-empty-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.sp-bell-empty-sub { font-size: 12px; color: var(--ink-3); max-width: 220px; line-height: 1.45; }

.sp-nav-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  border: 2px solid rgba(225,39,39,.40);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: var(--cream); flex-shrink: 0;
}
/* Favorites nav link */
.sp-nav-link-fav {
  display: inline-flex !important; align-items: center; gap: 5px;
}
/* Mobile-only Favorites shortcut in the row-2 pill rail */
.sp-nav-link-favm { display: none; }
.sp-nav-fav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 800;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  margin-left: 1px; line-height: 1; flex-shrink: 0;
}
@media (max-width: 1180px)  {
  .sp-nav-div { display: none; }
  .sp-nav-burger { display: flex; }
  .sp-nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px;
    background: var(--navy-2); padding: 10px 20px 18px;
    box-shadow: 0 16px 28px rgba(0,0,0,.34);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .sp-nav-links.mobile-open { display: flex; }
  .sp-nav-links .sp-nav-link { padding: 13px 10px; font-size: 15px; border-radius: 8px; }
}
@media (max-width: 560px) {
  .sp-nav-team-name { max-width: 90px; }
}
/* ── Phone header (≤640px), Rakuten-style: search is the focus.
   Row 1: menu · logo ··· language · bell · profile.
   Row 2: the search, full width (nav-search-ui.js's trigger → full-screen search sheet).
   The section links (Shop, Deals, My Teams, Earnings, Favorites) live in the menu dropdown (≤1180px rule above);
   the admin Coach/Shop switch is in the profile menu ("Switch to Admin Dashboard"); Help is the round button
   at the bottom right (help-drawer.css). ── */
@media (max-width: 640px) {
  /* The header scrolls away; the category bar takes over as the sticky rail. Relative: anchors the menu dropdown. */
  .sp-nav { height: auto; position: relative; }
  .sp-cats { top: 0; }
  .sp-nav-inner { flex-wrap: wrap; row-gap: 10px; padding: 10px 14px 12px; gap: 8px; }
  .sp-nav-div, .sp-nav-team, .sp-nav .hp-nav-btn, .sp-nav .mode-switch { display: none; }
  /* Everything else in the bar (language slot, sign-in / profile, any page extras) sits on the right of row 1. */
  .sp-nav-inner > * { order: 5; }
  .sp-nav-burger { display: flex; order: 1; width: 40px; height: 40px; }
  .sp-nav-logo { height: 24px; order: 2; margin-right: auto; }
  .sp-nav-inner > [id$="langmenu-slot"] { order: 3; }
  .sp-nav .lang-menu-label { display: none; }
  .sp-nav .lang-menu-trigger { min-height: 40px; padding: 0 9px; gap: 4px; }
  .sp-nav-inner > .sp-bell-wrap { order: 4; }
  .sp-bell-btn { width: 40px; height: 40px; }
  .sp-nav-inner::before { content: ''; order: 6; flex-basis: 100%; height: 0; }
  .nav-srch-mtrigger { min-height: 46px; font-size: 14.5px; border-radius: 12px; }
  .sp-nav-inner > .sp-nav-links { order: 8; }
  .sp-nav-link-favm { display: inline-flex !important; gap: 8px; }
}

/* Category chips on phones: one swipeable row (no wrapping into a wall of pills). */
@media (max-width: 640px) {
  .sp-cats-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 7px; padding: 10px 14px; }
  .sp-cats-inner::-webkit-scrollbar { display: none; }
  .sp-cat, .sp-cat-browse-all-btn { flex-shrink: 0; min-height: 36px; padding: 8px 12px; }
}

/* ════════════ PROMO BANNER ════════════ */
.sp-promo {
  background: var(--navy-2);
  position: relative; overflow: hidden;
}
.sp-promo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 140% at -6% 55%, rgba(225,39,39,.22) 0%, transparent 55%),
    radial-gradient(ellipse 38% 70% at 104% 8%,  rgba(249,157,32,.07) 0%, transparent 50%),
    repeating-linear-gradient(
      -58deg,
      transparent 0, transparent 26px,
      rgba(255,255,255,.022) 26px, rgba(255,255,255,.022) 27px);
}

/* Hero decorative element */
.sp-promo-deco {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.sp-promo-deco svg { width: 100%; height: 100%; display: block; }

/* Hero team chip */
.sp-promo-team-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 5px 12px 5px 5px;
  margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: rgba(242,228,177,.72);
}
.sp-promo-team-chip-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--red); color: var(--cream);
  font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.sp-promo-team-chip-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22c582; flex-shrink: 0;
  animation: dot-pulse 1.8s ease-in-out infinite;
}
.sp-promo::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--red);
}
.sp-promo-inner {
  max-width: var(--sp-maxw, 1360px); margin: 0 auto; padding: 20px 32px 24px;
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(360px,1fr); gap: 16px 36px; align-items: center;
  position: relative; z-index: 1;
}
.sp-promo-copy-stack { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.sp-promo-media { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 12px; align-self: stretch; min-height: 0; }

/* Copy + stat panels for every slide are always rendered, stacked in the same grid
   cell, and crossfaded via opacity — so the stack's natural height is the tallest
   slide and the banner never resizes when the promotion changes. */
.sp-promo-copy-stack, .sp-promo-stat-stack {
  display: grid; min-width: 0;
}
.sp-promo-copy-stack > .sp-promo-copy,
.sp-promo-stat-stack > .sp-promo-stat {
  grid-area: 1 / 1;
  opacity: 0; pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
  transform: translateY(6px);
}
.sp-promo-copy-stack > .sp-promo-copy.active,
.sp-promo-stat-stack > .sp-promo-stat.active {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
/* Live heroes (Shopping Home + Deals spotlight) follow the visible slide.
   Hidden slides stay out of flow so a longer title or a wrapped button
   row cannot pad the others. Both pages use .sp-live-hero. */
.sp-live-hero .sp-promo-copy-stack { position: relative; }
.sp-live-hero .sp-promo-copy-stack > .sp-promo-copy:not(.active) {
  position: absolute; top: 0; left: 0; width: 100%;
}
.sp-promo-stat-stack { justify-items: center; align-items: center; }
.sp-promo-stat { width: 100%; }

/* Column wrapper when a compact goal-progress widget (Option 2 hero placement) sits above the countdown */
.sp-promo-stat-col { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.sp-promo-goal-corner {
  width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 8px 11px; backdrop-filter: blur(6px);
}
.sp-promo-goal-corner-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sp-promo-goal-corner-name {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--cream-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-promo-goal-corner-pct { font-size: 11px; font-weight: 800; color: var(--yellow); }
.sp-promo-goal-corner .sp-impact-bar.sm { background: rgba(255,255,255,.16); margin-bottom: 6px; }
.sp-promo-goal-corner-share {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; color: var(--cream); background: var(--red);
  border-radius: 999px; padding: 5px 0; transition: background .13s;
}
.sp-promo-goal-corner-share:hover { background: var(--red-deep); }
@media (max-width: 940px) { .sp-promo-goal-corner { max-width: 320px; margin: 0 auto; } }

.sp-promo-copy { min-width: 0; }
.sp-promo-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; row-gap: 6px; }
.sp-promo-pill {
  background: var(--red); color: var(--cream);
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; box-shadow: var(--sh-red);
  white-space: nowrap;
}
.sp-promo-ey-text {
  font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(242,228,177,.48);
}
.sp-promo-h1 {
  font-size: clamp(28px, 3.8vw, 54px);
  font-weight: 900; line-height: 1.04; letter-spacing: -.03em;
  color: var(--cream); margin-bottom: 12px; text-wrap: balance;
  max-width: 720px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.08em; max-height: 2.08em;
}
.sp-promo-h1 em { font-style: normal; color: var(--red); }
/* Standardized cashback rate line — one primary location under the headline */
.sp-promo-rate{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;line-height:1}
/* ── Shared hero stack slots — identical geometry on merchant & platform slides.
   brand-spacer reserves the logo row on platform heroes; support holds the rate line
   (merchant) or feature value line (platform); detail-slot is a fixed 2-line box so
   the CTA row is pinned to the same y-position on every slide of the rotation. */
.sp-promo-brand-spacer{visibility:hidden}
.sp-promo-support{min-height:32px;display:flex;align-items:center;margin:0 0 10px}
.sp-promo-value{font-size:16.5px;font-weight:700;color:rgba(242,228,177,.88);letter-spacing:-.01em;line-height:1.3}
.sp-promo-detail-slot{height:48px;margin-bottom:14px;overflow:hidden}
.sp-promo-detail-slot p{margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Live merchant heroes usually have no sub line. Don't reserve the 2-line box as blank space between the rate and the buttons. */
.sp-live-hero .sp-promo-support{margin-bottom:6px}
.sp-live-hero .sp-promo-detail-slot-empty{height:0;margin-bottom:0}
/* Same two-line cap as the shared hero rule. The promotion title is shortened
   to 64 characters before it is painted, so a third line is not used. */
.sp-live-hero .sp-promo-h1{
  font-size:clamp(24px, 3.15vw, 44px);
  line-height:1.08;
  min-height:2.16em;
  max-height:2.16em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.sp-rate-now{font-size:23px;font-weight:900;letter-spacing:-.02em;color:var(--cream)}
.sp-rate-back{font-size:15px;font-weight:600;color:rgba(242,228,177,.72)}
.sp-rate-upto{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(242,228,177,.8);border:1px solid rgba(242,228,177,.4);border-radius:5px;padding:4px 7px 3px}
.sp-rate-boost-tag{font-size:10px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--red);border-radius:5px;padding:4px 7px 3px}
.sp-rate-was{font-size:17px;font-weight:700;color:rgba(242,228,177,.42);text-decoration-line:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(230,57,57,.85)}
.sp-rate-arrow{font-size:15px;color:rgba(242,228,177,.5)}
.sp-promo-sub   { font-size: 14.5px; color: rgba(242,228,177,.60); margin-bottom: 6px; text-wrap: pretty; }
.sp-promo-sub-es { font-size: 15px; color: rgba(242,228,177,.66); font-style: italic; margin-bottom: 12px; }
/* Fixed-height reserved area for the promo code, always rendered in the same spot
   whether or not the active promo has a code — so headline/sub/CTAs never shift
   position when the hero rotates between coded and non-coded promotions. */
.sp-promo-code-slot { margin-bottom: 14px; }
.sp-promo-code-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(242,228,177,.08); border: 1.5px dashed rgba(242,228,177,.45);
  border-radius: 10px; padding: 6px 12px; box-sizing: border-box;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.sp-promo-code-chip:hover { background: rgba(242,228,177,.14); border-color: rgba(242,228,177,.7); }
.sp-promo-code-chip:active { transform: scale(.97); }
.sp-promo-code-lbl {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: rgba(242,228,177,.55);
}
.sp-promo-code-val {
  font-family: 'SF Mono', 'Roboto Mono', ui-monospace, monospace;
  font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--cream);
}
.sp-promo-code-chip.copied {
  background: rgba(58,181,116,.16); border-color: var(--green); border-style: solid;
}
.sp-promo-code-chip.copied .sp-promo-code-val { color: var(--green); }
.sp-promo-code-chip.copied svg { color: var(--green); flex-shrink: 0; }
/* Empty state: same box footprint, near-invisible so it doesn't draw attention
   when the active promo has no code. */
.sp-promo-code-chip-ghost {
  background: transparent; border-color: transparent; visibility: hidden;
  cursor: default; pointer-events: none;
}
.sp-promo-code-chip-ghost .sp-promo-code-lbl,
.sp-promo-code-chip-ghost .sp-promo-code-val { color: transparent; }

.sp-promo-ctas  { display: flex; gap: 10px; flex-wrap: wrap; }

/* Promo code baked into the primary CTA — mono segment, truncates rather than wraps */
.sp-btn-code{max-width:100%}
.sp-btn-code-val{font-family:'SF Mono','Roboto Mono',ui-monospace,monospace;font-weight:800;letter-spacing:.04em;background:rgba(0,0,0,.22);border-radius:6px;padding:2px 7px;max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Live heroes show the whole code. The 11ch cap is what turned Crocs into CROCSCO…. */
.sp-live-hero .sp-btn-code{max-width:none;flex-shrink:0}
.sp-live-hero .sp-btn-code-val{max-width:none;overflow:visible;text-overflow:clip}

/* ── Merchant Hero: brand logo lockup (primary placement, above headline) ──
   Fixed-size white plate = guaranteed clear space; object-fit:contain = never stretched. */
.sp-promo-brand{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.sp-promo-brand-plate{width:46px;height:46px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;padding:9px;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.sp-live-hero .sp-promo-brand-plate{width:64px;height:64px;border-radius:14px;padding:6px}
.sp-live-hero .sp-promo-brand-initials{font-size:18px}
.sp-live-hero .sp-promo-brand-name{font-size:22px}
.sp-promo-brand-plate img{width:100%;height:100%;object-fit:contain;display:block}
.sp-promo-brand-initials{font-size:15px;font-weight:900;letter-spacing:-.01em}
.sp-promo-brand-name{font-size:19px;font-weight:900;color:var(--cream);letter-spacing:-.01em}
/* Secondary placement: subtle brand badge on the lifestyle image */
.sp-promo-photo-brand{position:absolute;top:14px;left:14px;z-index:3;width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.94);padding:8px;box-shadow:0 2px 10px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-6px);transition:opacity .55s ease,transform .55s ease}
.sp-promo-photo-brand.active{opacity:1;transform:translateY(0)}
.sp-promo-photo-brand img{width:100%;height:100%;object-fit:contain;display:block}

/* ── Platform Hero: full-bleed media takeover ──
   Media layers sit behind .sp-promo-inner (which is z-index:1) and crossfade with
   the rotation. The media column stays in the grid but invisible, so the hero
   keeps the exact same height as merchant slides. */
.sp-promo-bg{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s ease;pointer-events:none;overflow:hidden}
.sp-promo-bg.active{opacity:1}
.sp-promo-bg image-slot,.sp-promo-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sp-promo-bg-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,17,28,.93) 0%,rgba(13,17,28,.74) 36%,rgba(13,17,28,.26) 66%,rgba(13,17,28,.42) 100%),linear-gradient(180deg,rgba(13,17,28,.35),rgba(13,17,28,0) 30%,rgba(13,17,28,.45) 100%)}
.sp-promo--platform .sp-promo-deco{opacity:0;transition:opacity .4s}
.sp-promo--platform .sp-promo-media>*{visibility:hidden}
.sp-promo-copy-platform .sp-promo-h1{max-width:15em}
.sp-promo-sub-platform{font-size:15.5px;line-height:1.55;color:rgba(242,228,177,.8);max-width:36em;margin-bottom:12px;text-wrap:pretty}
@media (max-width:940px){
  .sp-promo--platform .sp-promo-media{display:none}
  .sp-promo--platform .sp-promo-inner{padding-bottom:44px}
}

.sp-btn {
  padding: 11px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform .14s, box-shadow .14s, background .14s;
  white-space: nowrap; cursor: pointer; border: none; text-decoration: none;
}
.sp-btn-red  { background: var(--red); color: var(--cream); box-shadow: 0 3px 0 var(--red-deep); }
.sp-btn-red:hover  { transform: translateY(-1px); box-shadow: 0 5px 0 var(--red-deep); }
.sp-btn-ghost { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); color: rgba(242,228,177,.78); }
.sp-btn-ghost:hover { background: rgba(255,255,255,.13); color: var(--cream); }
.sp-btn-code.copied { background: var(--green); color: #08150e; box-shadow: 0 3px 0 rgba(0,0,0,.28); }
.sp-btn-code.copied:hover { transform: none; }

.sp-countdown { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; width: 100%; }
.sp-countdown-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(242,228,177,.4); text-align: center; white-space: nowrap;
}
.sp-countdown-units { display: flex; flex-wrap: nowrap; gap: 6px; align-items: flex-start; justify-content: center; }
.sp-countdown-unit  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-countdown-n {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px; padding: 7px 9px;
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  color: var(--cream); line-height: 1;
  min-width: 40px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sp-countdown-unit-lbl {
  font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(242,228,177,.38);
}
.sp-countdown-sep { font-size: 16px; font-weight: 900; color: rgba(242,228,177,.22); padding-top: 5px; line-height: 1; align-self: flex-start; }

/* Static "rate" badge shown in place of the countdown for evergreen (non-deadline)
   promos — same box treatment/footprint so the layout never shifts. */
.sp-ratebadge { padding: 12px 20px; width: 100%; box-sizing: border-box; }
.sp-ratebadge-value {
  font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  color: var(--yellow); font-variant-numeric: tabular-nums;
}
.sp-ratebadge-label {
  margin-top: 8px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cream);
}
.sp-ratebadge-sub {
  margin-top: 2px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242,228,177,.38);
}

/* Hero lifestyle photo — the dominant visual of the right side. Immersive, no heavy
   frame; badges/countdown live as light glass overlays ON the image. */
.sp-promo-photo {
  position: relative; width: 100%; flex: 1; min-height: 300px;
  border-radius: var(--r-lg); overflow: hidden; background: #10141f;
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,.10);
}
/* Subtle top+bottom scrims so overlaid labels stay legible without dimming the image */
.sp-promo-photo-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(8,11,20,.38) 0%, rgba(8,11,20,0) 26%, rgba(8,11,20,0) 62%, rgba(8,11,20,.52) 100%);
}
/* Small elegant corner badge — replaces the old floating "#1 TEAM EARNER" card */
.sp-promo-corner-badge {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(14,18,30,.62); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: 6px 14px 6px 10px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
}
.sp-promo-corner-badge.active { opacity: 1; transform: translateY(0); }
.sp-cb-value {
  font-size: 17px; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  color: var(--yellow); font-variant-numeric: tabular-nums;
}
.sp-cb-txt { display: flex; flex-direction: column; gap: 1px; }
.sp-cb-label { font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--cream); line-height: 1.1; white-space: nowrap; }
.sp-cb-sub { font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: rgba(242,228,177,.55); line-height: 1.1; white-space: nowrap; }
/* ── STANDARD HERO COUNTDOWN ──────────────────────────────────────────────
   One treatment for every hero (Shopping Home + Deals): the large boxed
   HRS : MIN : SEC timer, anchored to the bottom edge of the lifestyle /
   creative image panel. DAYS unit only appears when days remain. */
.sp-promo-cd-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 26px 14px 10px;
  background: linear-gradient(180deg, rgba(8,11,20,0) 0%, rgba(8,11,20,.58) 46%, rgba(8,11,20,.86) 100%);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
}
.sp-promo-cd-overlay.active { opacity: 1; transform: translateY(0); }
.sp-cdo-lbl { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--yellow); white-space: nowrap; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.sp-promo-cd-overlay.urgent .sp-cdo-lbl { color: #ff9a9a; }
.sp-cdo-units { display: flex; align-items: baseline; gap: 6px; }
.sp-cdo-unit { display: inline-flex; align-items: baseline; gap: 3px; }
.sp-cdo-n { font-size: 25px; font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.sp-promo-cd-overlay.urgent .sp-cdo-n { color: #fff; }
.sp-cdo-u { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,228,177,.62); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.sp-cdo-sep { font-size: 19px; font-weight: 900; color: rgba(242,228,177,.32); line-height: 1; }
@media (max-width: 560px) {
  .sp-promo-cd-overlay { padding: 22px 10px 8px; gap: 4px 10px; }
  .sp-cdo-n { font-size: 21px; }
}
/* Live heroes: dark pill on the lifestyle image. Labeled units, no colon groups. */
.sp-live-hero .sp-promo-cd-overlay {
  left: 12px; right: auto; bottom: 12px;
  width: max-content; max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 11, 20, .9);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  gap: 10px; flex-wrap: nowrap; align-items: center;
}
.sp-live-hero .sp-cdo-lbl { font-size: 10px; letter-spacing: .12em; }
.sp-live-hero .sp-cdo-n { font-size: 16px; }
.sp-live-hero .sp-cdo-u { font-size: 9px; letter-spacing: .08em; }
@media (max-width: 700px) {
  .sp-live-hero .sp-promo-cd-overlay { left: 8px; bottom: 8px; max-width: calc(100% - 16px); flex-wrap: wrap; }
}

@media (max-width: 1180px) {
  .sp-promo-photo { min-height: 280px; }
  .sp-promo-inner { grid-template-columns: minmax(0,1.2fr) minmax(300px,1fr); gap: 14px 20px; }
  .sp-countdown-n { font-size: 19px; padding: 6px 7px; min-width: 34px; }
  .sp-countdown-sep { font-size: 14px; }
}
@media (max-width: 940px) {
  .sp-promo-inner { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .sp-promo-copy-stack { grid-column: 1; grid-row: auto; }
  .sp-promo-media { grid-column: 1; grid-row: auto; width: min(100%, 460px); margin: 0 auto; }
  .sp-promo-photo { min-height: 0; height: 250px; flex: none; }
}
@media (max-width: 560px) {
  .sp-promo-inner { padding: 20px 14px 26px; }
  /* Long (often Spanish) CTA labels wrap instead of running off-card */
  .sp-promo-ctas .sp-btn { white-space: normal; text-align: center; justify-content: center; flex: 1 1 auto; min-width: 0; }
  .sp-promo-photo { height: 150px; }
  .sp-promo-corner-badge { top: 10px; right: 10px; }
  /* Phones: a compact hero — smaller store plate and headline, so the search and stores below are in reach. */
  .sp-promo-inner { padding: 16px 14px 20px; gap: 14px; }
  .sp-live-hero .sp-promo-brand-plate { width: 44px; height: 44px; border-radius: 10px; padding: 5px; }
  .sp-live-hero .sp-promo-brand-name { font-size: 18px; }
  .sp-live-hero .sp-promo-h1 { font-size: 22px; }
}

/* The Shopping hero (#sp-promo; the Deals spotlight keeps its own layout). Stacked (tablets): the photo first, so the
   slide's picture is on screen with its words */
@media (max-width: 940px) {
  #sp-promo .sp-promo-media { grid-row: 1; }
  #sp-promo .sp-promo-copy-stack { grid-row: 2; }
}
@media (max-width: 560px) {
  #sp-promo .sp-promo-media { width: 100%; }
  #sp-promo .sp-promo-photo { height: 140px; }
}
/* Phones: one Shop button, and "View all offers" as a text link under it */
@media (max-width: 700px) {
  #sp-promo .sp-promo-ctas .sp-btn-red { flex: 1 1 100%; }
  #sp-promo .sp-promo-ctas .sp-btn-ghost {
    flex: 1 1 100%; background: none; border: 0; padding: 4px 0 0; min-height: 0;
    font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
    text-decoration: underline; text-underline-offset: 3px; color: rgba(242,228,177,.85);
  }
  #sp-promo .sp-promo-ctas .sp-btn-ghost:hover { background: none; color: var(--cream); }
}

/* Phones: the swipe strip (shopping-ui.js renderSwipeHero). One card per slide, photo over words, snapping to the card
   under the finger; the next card peeks in at the right edge */
.sp-promo--swipe { padding: 14px 0 8px; }
.sp-swipe-track {
  position: relative; z-index: 1; display: flex; gap: 10px; padding: 0 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 14px;
  scrollbar-width: none;
}
.sp-swipe-track::-webkit-scrollbar { display: none; }
.sp-swipe-card {
  flex: 0 0 calc(100% - 24px); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; gap: 12px;
}
.sp-swipe-card .sp-promo-photo { flex: none; width: 100%; height: 150px; min-height: 0; }
.sp-swipe-card .sp-promo-copy { flex: 1; display: flex; flex-direction: column; }
.sp-swipe-card .sp-promo-ctas { margin-top: auto; }

/* The dots (one per slide, the current one wide) and the pause at the end of the row: under the photo on wide
   screens, under the strip on phones. 24px tap targets around small marks */
.sp-promo-dots { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 2px; }
.sp-promo--swipe .sp-promo-dots { padding-top: 6px; }
.sp-promo-dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
}
.sp-promo-dot::before {
  content: ''; display: block; width: 7px; height: 7px; border-radius: 999px; background: rgba(242,228,177,.35);
  transition: width .25s ease, background .25s ease;
}
.sp-promo-dot:hover::before { background: rgba(242,228,177,.6); }
.sp-promo-dot.active::before { width: 20px; background: var(--cream); }
.sp-promo-dot.active { width: 30px; }
.sp-promo-dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.sp-promo .sp-promo-dots .sp-promo-pause {
  position: static; opacity: 1; pointer-events: auto; width: 24px; height: 24px; margin-left: 6px;
  border: 0; background: none; color: rgba(242,228,177,.7);
}
.sp-promo .sp-promo-dots .sp-promo-pause:hover { background: rgba(255,255,255,.08); color: var(--cream); }

.sp-promo-photo-slide {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.03);
  transition: opacity .9s ease, transform 1.1s ease;
}
.sp-promo-photo-slide.active { opacity: 1; transform: scale(1); }
.sp-promo-photo-slide img,
.sp-promo-photo-slide image-slot { display: block; width: 100%; height: 100%; object-fit: cover; }

.sp-countdown-glass {
  background: rgba(18,22,34,.58);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 13px 16px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%; box-sizing: border-box;
}

/* Hero carousel — soft round chevrons, shown on hover or keyboard focus (always on touch). Counter sits where the dots were.
   Keyboard focus, not any focus: a mouse click focuses the button too, and the redraw every few seconds puts focus back,
   so after one click the arrows (and pause button) never hid again (:focus-within). */
.sp-promo-arrow {
  position: absolute; top: 50%; z-index: 4;
  width: 38px; height: 38px; margin-top: -19px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.92); color: var(--ink, #1C2130);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, background .13s, transform .16s ease;
}
.sp-promo-arrow.left { left: 14px; }
.sp-promo-arrow.right { right: 14px; }
.sp-promo:hover .sp-promo-arrow,
.sp-promo:has(:focus-visible) .sp-promo-arrow { opacity: 1; pointer-events: auto; }
.sp-promo-arrow:hover { background: #fff; }
.sp-promo-arrow.left:hover { transform: translateX(-1px); }
.sp-promo-arrow.right:hover { transform: translateX(1px); }
@media (hover: none), (max-width: 700px) {
  .sp-promo-arrow { opacity: 1; pointer-events: auto; width: 34px; height: 34px; margin-top: -17px; }
}

/* Requested-team status (renderPendingTeams): a quiet cream strip above the impact bar. */
.sp-pending {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  padding: 12px 28px; background: var(--cream-soft, #FAF4DC); border-bottom: 1px solid var(--line, rgba(28,33,48,.09));
  font-size: 13.5px; color: var(--ink, #1C2130);
}
.sp-pending-row { flex: 1 1 420px; }
.sp-pending-row + .sp-pending-row { margin-top: 6px; }
.sp-pending-sub { display: block; color: var(--ink-3, #5b6070); font-size: 12.5px; margin-top: 2px; }
.sp-pending-actions { display: flex; align-items: center; gap: 14px; }
.sp-pending-link { font-weight: 700; color: var(--red, #E12727); text-decoration: none; white-space: nowrap; }
.sp-pending-link:hover { text-decoration: underline; }
.sp-pending-close { background: none; border: 1px solid var(--line-strong, rgba(28,33,48,.2)); border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; color: var(--ink, #1C2130); }
/* A rejected team (renderPendingTeams): the same strip, marked as needing action — it stays until a new team is picked. */
.sp-pending--alert { background: color-mix(in srgb, var(--red) 8%, #fff); border-left: 4px solid var(--red); }
@media (max-width: 640px) {
  .sp-pending { padding: 12px 16px; }
  /* ~390px: the text takes the full width and the action sits under it, still a comfortable tap target */
  .sp-pending-row { flex-basis: 100%; }
  .sp-pending-actions { width: 100%; }
  .sp-pending-link { display: inline-block; padding: 8px 0; }
}

/* ════════════ YOUR TEAMS' PROGRESS (renderImpact) ════════════
   Its own low section on the page, not the hero's navy, so the stores stay near the top: the heading and one summary
   line, then one row of equal compact cards (three short lines each), the primary team first with its ★ label. */
/* ════════════ THE SHOPPER'S BAND (Index.cshtml .sp-you-band) ════════════
   Your Teams' Progress and Recent Sessions on one full-width band with a faint tint of the program's colour, so the
   page reads in zones (theirs, then the deals, then the categories) instead of one sea of white cards on cream. Only
   this band is tinted: the cream below it is the break. White cards keep their edges on it (a white band lost them).
   Hidden when both are empty (signed out, a shopper with no teams and no trips). */
.sp-you-band {
  --band-bg: color-mix(in srgb, var(--red) 5%, var(--paper));
  background: var(--band-bg);
  border-top: 1px solid color-mix(in srgb, var(--red) 9%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--red) 9%, transparent);
  padding: 8px 0 10px;
}
.sp-you-band:not(:has(section)) { display: none; }
/* One width with the main column below (.sp-main): Your Teams' Progress ran 56px wider, so the left edge zigzagged */
.sp-impact, #sp-resume-host .sp-resume-section {
  max-width: var(--sp-maxw, 1360px); margin: 0 auto; padding-left: 28px; padding-right: 28px;
}
.sp-impact { padding-top: 16px; padding-bottom: 2px; }
#sp-resume-host .sp-resume-section { padding-top: 24px; }
@media (max-width: 560px) {
  .sp-impact, #sp-resume-host .sp-resume-section { padding-left: 14px; padding-right: 14px; }
}

.sp-impact-head { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin-bottom: 10px; }
/* The same size as every section's heading (.sp-sec-h2) */
.sp-impact-head-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.sp-impact-head-total { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
/* Where the details are (My Teams), at the end of the heading line */
.sp-impact-myteams { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--red); text-decoration: none; white-space: nowrap; }
.sp-impact-myteams:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Up to four side by side; more scroll sideways, the next card peeking in (and any number on a phone, below) */
.sp-impact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.sp-impact.is-scroll .sp-impact-cards {
  grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(240px, 23.5%);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
}
.sp-impact.is-scroll .sp-impact-card { scroll-snap-align: start; }

.sp-impact-card {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  background: var(--white); border: 1px solid var(--line-s); border-radius: 14px;
  padding: 10px 12px; box-shadow: var(--sh-sm);
}

/* Line 1: who — its badge, name and school */
.sp-impact-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-impact-tab-logo {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: -.02em;
}
/* Up to two lines, so a long name ("Hammer High School Football Booster Club") isn't cut short */
.sp-impact-card-name {
  min-width: 0; font-size: 13.5px; font-weight: 800; line-height: 1.25; color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
/* The name (with its ★ / 📣), and under it the school or organization it belongs to */
.sp-impact-card-id { flex: 1; min-width: 0; }
.sp-impact-card-nameline { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
/* The school line, with the primary team's ★ label first */
.sp-impact-card-orgline { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; }
.sp-impact-card-orgline .sp-impact-card-org { min-width: 0; margin-top: 0; }
.sp-impact-card-org { font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sp-impact-primary-tag {
  flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--red); background: var(--red-soft); padding: 2px 7px; border-radius: 999px;
}
.sp-impact-raised-mark { flex-shrink: 0; font-size: 12px; cursor: help; }

/* Line 2: what's raised, the bar, the percent */
.sp-impact-card-progress { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-impact-earned-num { flex-shrink: 0; font-size: 13px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
.sp-impact-goalbar { flex: 1; min-width: 40px; }
.sp-impact-goalbar .ffu-goalbar-track { height: 7px; }
.sp-impact-pct-inline { flex-shrink: 0; font-size: 12px; font-weight: 900; color: var(--ink-2); }
.sp-impact-pct-inline.is-good { color: var(--green); }
/* Nothing raised yet: the goal and a faint, empty bar */
.sp-impact-card-progress.is-fresh .sp-impact-earned-num { font-weight: 800; color: var(--ink-2); }
.sp-impact-card-progress.is-fresh .sp-impact-goalbar { opacity: .45; }

/* Line 3: the next milestone, and the two actions — Share to Boost (red pill), Make a Direct Donation (red link) */
.sp-impact-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
/* Up to two lines beside the buttons: "$199.55 to the next milestone" was cut short on a narrow card */
.sp-impact-next {
  min-width: 0; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-impact-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sp-impact-share-cta, .sp-impact-donate-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 4px 10px; border-radius: 999px;
  font: inherit; font-size: 11.5px; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: background .13s, color .13s, transform .1s;
}
.sp-impact-share-cta { background: var(--red); color: #fff; border: 0; }
.sp-impact-share-cta:hover { background: var(--red-deep); }
.sp-impact-donate-link { background: transparent; color: var(--red); border: 1.5px solid var(--red-soft); }
.sp-impact-donate-link:hover { background: var(--red-soft); }
.sp-impact-share-cta:active, .sp-impact-donate-link:active { transform: scale(.96); }
.sp-impact-share-cta:focus-visible, .sp-impact-donate-link:focus-visible { outline: 3px solid var(--red-soft); outline-offset: 2px; }
/* A team not on the site yet: a quiet chip in place of the actions */
.sp-impact-notlive { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--line); padding: 4px 10px; border-radius: 999px; white-space: nowrap; cursor: help; }

/* A phone: one card at a time in a sideways row, the next peeking in, whatever the count (the many-teams rule above
   used to win here, so a phone squeezed two cramped cards side by side) */
@media (max-width: 720px) {
  .sp-impact { padding-top: 14px; }
  .sp-impact .sp-impact-cards, .sp-impact.is-scroll .sp-impact-cards {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 85%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  }
  .sp-impact-card { scroll-snap-align: start; }
  .sp-impact .sp-impact-cards:has(> :only-child) { grid-auto-columns: 100%; }
}

/* Earn potential (replaces 'first to shop here' placeholder) */
.sp-card-earn-potential {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--green);
  background: var(--green-s); border-radius: 10px; padding: 10px 13px;
  line-height: 1.3;
}
.sp-trend-earn-potential { color: var(--green) !important; }
.sp-trend-earn-potential svg { color: var(--green); }

/* Featured deals ending-soon pill */
.sp-deal-pill-ending {
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: 4px;
}

/* ════════════ CATEGORY FILTER ════════════ */
.sp-cats {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: var(--nav-h); z-index: 100;
  box-shadow: 0 2px 8px rgba(28,33,48,.04);
}
.sp-cats-inner {
  max-width: var(--sp-maxw, 1360px); margin: 0 auto; padding: 0 28px;
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
}
.sp-cats-inner::-webkit-scrollbar { display: none; }
.sp-cat {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 15px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .14s, border-color .14s;
  position: relative;
}
.sp-cat:hover { color: var(--ink); }
.sp-cat.active { color: var(--red); border-bottom-color: var(--red); }
.sp-cat-count {
  font-size: 10px; font-weight: 800; color: var(--ink-3);
  background: rgba(28,33,48,.07); border-radius: 999px;
  padding: 2px 6px; line-height: 1.5;
}
.sp-cat.active .sp-cat-count { background: var(--red-soft); color: var(--red); }
/* Desktop active tab reads clearly: red label + a thicker red underline. */
.sp-cat.active { font-weight: 800; }
@media (max-width: 560px) { .sp-cats-inner { padding: 0 14px; } .sp-cat { padding: 12px 11px; font-size: 13px; } }

/* ── Mobile: horizontal-scrolling category CHIPS with an unmistakable active state ── */
@media (max-width: 820px) {
  .sp-cats { box-shadow: 0 2px 10px rgba(28,33,48,.06); }
  .sp-cats-inner {
    gap: 8px; padding: 10px 14px;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .sp-cat {
    border: 1px solid var(--line); border-bottom: 1px solid var(--line);
    border-radius: 999px; padding: 9px 15px; min-height: 40px;
    font-size: 13.5px; font-weight: 700; color: var(--ink-2);
    background: #fff; scroll-snap-align: start;
  }
  .sp-cat:hover { color: var(--ink-2); }
  .sp-cat.active {
    background: var(--red); color: #fff; border-color: var(--red);
    box-shadow: 0 2px 8px rgba(225,39,39,.30);
  }
  .sp-cat.active .sp-cat-count { background: rgba(255,255,255,.24); color: #fff; }
  .sp-cat-divider { display: none; }
  .sp-cat-browse-all-btn {
    border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 14px; background: #fff; flex-shrink: 0;
  }
}

/* ════════════ MAIN CONTENT ════════════ */
.sp-main {
  max-width: var(--sp-maxw, 1360px); width: 100%; margin: 0 auto;
  padding: 32px 28px 72px;
  display: flex; flex-direction: column; gap: 44px;
}
.sp-sec-hdr {
  /* wraps: on a phone the "See all …" link drops under the heading ("Ver todas las tiendas nuevas →" ran past 320px) */
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; margin-bottom: 18px;
}
.sp-sec-ey  { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 3px; }
.sp-sec-h2  { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.sp-sec-more { font-size: 13px; font-weight: 600; color: var(--red); white-space: nowrap; display: flex; align-items: center; gap: 3px; min-height: 44px; }
.sp-sec-more:hover { text-decoration: underline; }
@media (max-width: 560px) { .sp-main { padding: 20px 14px 56px; gap: 32px; } }
/* ════════════ ZONES BELOW THE SHOPPER'S BAND ════════════
   The page in zones as you scroll: navy hero, the shopper's tinted band, the offers on cream, one navy strip mid-page
   (Top Offers, a second smaller hero), then the categories on a white band down to the navy footer. Only one dark
   break between the hero and the footer: dark category rows turned the bottom half into one heavy block that ran
   into the footer. Both run the full width from inside the main column (a shadow the size of the screen, clipped to
   the sides: no sideways scroll, unlike 100vw). */
.sp-zone-dark {
  background: var(--navy); box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax);
  padding: 30px 0 14px;
}
.sp-zone-dark .sp-sec-ey { color: var(--yellow); }
.sp-zone-dark .sp-sec-h2 { color: var(--white); }
.sp-zone-dark .sp-sec-more { color: var(--cream); }

.sp-cat-zone {
  display: flex; flex-direction: column; gap: 44px;
  background: var(--white); box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax 0 -100vmax);
  padding: 36px 0 72px; margin-top: 12px;
}
/* The zone's heading over its rows; each category row's name is an h3 under it */
.sp-cat-zone-hdr { margin-bottom: -22px; }
/* The white band runs down to the footer */
.sp-main:has(> .sp-cat-zone:last-child) { padding-bottom: 0; }
/* …and meets it: the shared footer's small top margin left a strip of cream between them */
.sp-shell:has(.sp-cat-zone) ~ .ft { margin-top: 0; }
@media (max-width: 560px) { .sp-cat-zone { gap: 32px; padding: 26px 0 56px; } .sp-cat-zone-hdr { margin-bottom: -14px; } }

/* ════════════ FEATURED DEALS ════════════ */
/* Horizontally scrollable row — manual only, snap + peek of next card */
.sp-featured-wrap{position:relative}
.sp-featured{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sp-featured::-webkit-scrollbar{display:none}
.sp-featured > *{flex:0 0 400px;scroll-snap-align:start}

.sp-featured-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:36px;height:36px;border-radius:999px;border:1px solid var(--line-s);background:rgba(255,255,255,.94);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-sm);transition:background .13s,color .13s}
.sp-featured-arrow:hover{background:var(--navy);color:var(--cream)}
.sp-featured-arrow.left{left:-14px}
.sp-featured-arrow.right{right:-14px}
@media (max-width: 700px){.sp-featured-arrow{display:none}}

/* ── Split-panel featured deal card (Option C · brand-forward) ── */
.sp-dc{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:row;min-height:176px;box-shadow:0 2px 14px rgba(28,33,48,.07);transition:transform .18s,box-shadow .18s}
.sp-dc:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(28,33,48,.14)}
.sp-dc.urgent{border-color:rgba(225,39,39,.28)}
.sp-dc-img{width:126px;flex-shrink:0;position:relative;overflow:hidden;background:var(--navy-2)}
.sp-dc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.sp-dc:hover .sp-dc-img img{transform:scale(1.07)}
.sp-dc-img-ov{position:absolute;inset:0;background:rgba(14,18,28,.14)}
/* Logo-first fallback panel — premium brand treatment, no lifestyle asset required */
.sp-dc-logopanel{width:126px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sp-dc-logopanel::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.18) 100%)}
.sp-dc-logopanel::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px)}
.sp-dc-logo-chip{position:relative;z-index:1;width:78px;height:78px;border-radius:20px;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.28),0 0 0 3px rgba(255,255,255,.18)}
.sp-dc-logo-chip img{width:52px;height:52px;object-fit:contain}
.sp-dc-badge{position:absolute;top:8px;left:8px;max-width:calc(100% - 52px);overflow:hidden;text-overflow:ellipsis;font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sp-dc-badge.red{background:var(--red);color:#fff}
.sp-dc-badge.navy{background:rgba(28,33,48,.84);color:var(--cream)}
.sp-dc-badge.green{background:var(--green);color:#fff}
.sp-dc-badge.yellow{background:var(--yellow);color:var(--navy)}
.sp-dc-body{flex:1;min-width:0;padding:13px 15px 14px;display:flex;flex-direction:column;gap:5px;position:relative}
.sp-dc-brand{display:flex;align-items:center;gap:10px}
.sp-dc-logo{width:42px;height:42px;border-radius:10px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sp-dc-logo img{width:60%;height:60%;object-fit:contain}
/* Featured Deals brand-row marks (Shopping Home and Deals "This Week").
   White plate matches compact merchant chips (hairline, not the dark-hero
   plate). A step up from 42px still clears the name, FLASH badge, and
   cashback row. Initials keep the brand color. */
/* Every featured-deal row is .sp-dc-photo-top (Shopping, All Stores, a category, the Deals page's band) */
.sp-dc-photo-top > .sp-dc .sp-dc-logo{width:48px;height:48px;border-radius:12px}
.sp-dc-photo-top > .sp-dc .sp-dc-logo.has-mark{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.07)}
.sp-dc-photo-top > .sp-dc .sp-dc-logo.has-mark img{width:74%;height:74%}
.sp-dc-name{font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--ink);line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-dc-rate-row{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap}
.sp-dc-rate-wrap{display:flex;flex-direction:column;align-items:flex-start}
.sp-dc-upto{font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);line-height:1;margin-bottom:2px}
.sp-dc-rate{font-size:24px;font-weight:900;color:var(--red);letter-spacing:-.03em;line-height:1}
.sp-dc-was{font-size:13px;font-weight:700;color:var(--ink-3);text-decoration-line:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--red);opacity:.75;margin-bottom:3px}
.sp-dc-arrow{font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:3px}
.sp-dc-ratelbl{font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:1px}
.sp-dc-desc{font-size:12px;font-weight:600;color:var(--ink-2);line-height:1.4;flex:1;min-height:34px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* Clean deal-card template (All Stores Featured + category Top Deals) — no left
   lifestyle/logo panel; logo-led body matching the Boosted Deals card language. */
.sp-dc-meta{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-height:24px;overflow:hidden;white-space:nowrap}
.sp-dc-meta .dls-promo-count{min-width:0;overflow:hidden;padding-left:5px;padding-right:5px}
.sp-dc-meta .sp-dc-code,.sp-dc-meta .dls-code-chip{flex-shrink:0}
/* Featured CTA + rate row: single line always — no wrapping, no baseline jumps */
.sp-dc-cta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-dc-rate-wrap{flex-direction:row;align-items:baseline;gap:4px}
.sp-dc-rate-wrap .sp-dc-upto{margin-bottom:0}
.sp-dc-timer{display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.sp-dc-timer.hot{color:var(--red)}
.sp-dc-code{font-family:'Courier New',monospace;font-size:9px;font-weight:800;letter-spacing:.10em;color:var(--yellow-d);background:var(--yellow-s);border:1px dashed rgba(249,157,32,.42);border-radius:5px;padding:1px 6px}
.sp-dc-live{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--ink-2)}
.sp-dc-live-dot{width:6px;height:6px;border-radius:50%;background:#22c582;flex-shrink:0;animation:dot-pulse 2s ease-in-out infinite}
.sp-dc-cta{width:100%;background:var(--navy);color:var(--cream);padding:9px 0;border-radius:999px;border:none;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.04em;transition:background .13s;margin-top:3px}
.sp-dc-cta:hover{background:var(--red)}
.sp-dc-cta.copied{background:var(--green);color:#fff}
.sp-dc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}
.sp-dc-see-all{font-size:11px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:color .13s}
.sp-dc-see-all:hover{color:var(--red);text-decoration:underline}
/* Phones: slim Featured Deals cards (Shopping + Deals) — a narrow logo/photo strip, one store logo (the strip's),
   tighter type, so a card is a quick scan instead of half a screen. */
@media (max-width: 640px) {
  .sp-featured > * { flex-basis: 84%; }
  .sp-dc { min-height: 0; }
  .sp-dc-img, .sp-dc-logopanel { width: 84px; }
  .sp-dc-logo-chip { width: 52px; height: 52px; border-radius: 14px; }
  .sp-dc-logo-chip img { width: 36px; height: 36px; }
  .sp-dc-badge { top: 6px; left: 6px; max-width: calc(100% - 12px); font-size: 7px; padding: 2px 6px; }
  .sp-dc-body { padding: 10px 12px 11px; gap: 4px; }
  /* The strip already shows the store's logo; the body names the store without a second logo. */
  .sp-dc.logo-first .sp-dc-brand .sp-dc-logo { display: none; }
  .sp-dc-logo { width: 32px; height: 32px; border-radius: 8px; }
  .sp-dc-name { font-size: 15px; }
  .sp-dc-rate { font-size: 19px; }
  .sp-dc-desc { font-size: 11.5px; min-height: 0; }
  .sp-dc-cta { padding: 8px 0; font-size: 11px; }
  /* Empty slots take no room on a phone: the boost-pill slot (no boost) and the code/count row (nothing to show).
     The brand row then sits at the top, clear of the bookmark + heart buttons in the corner. */
  .sp-dc-topslot:empty, .sp-dc-meta:empty { display: none; }
  .sp-dc-topslot:empty ~ .sp-dc-brand { padding-right: 56px; }
  .sp-dc-foot { margin-top: 2px; }
}

/* ════════════ FEATURED DEALS: THE PHOTO ACROSS THE TOP (.sp-dc-photo-top) ════════════
   Shopping's Featured Deals and the Deals page's featured band (2026-10-20). The photo was a 126px strip down the side,
   which kept a thin slice of any landscape lifestyle photo; across the top it's the biggest thing on the card, which is
   what an advertiser pays for. 2.3:1 is the hero's phone crop, so one landscape file (the hero's 1120 × 800,
   OpsAdImageSpec.Featured) fits the hero and these cards. Without a photo, the store's colour band with its logo. A
   portrait file (the old 280 × 400 spec) shows whole on a blurred copy of itself (FFUImages.fitPhoto), not cropped. */
.sp-dc-photo-top > .sp-dc { flex-direction: column; min-height: 0; }
.sp-dc-photo-top > .sp-dc .sp-dc-img, .sp-dc-photo-top > .sp-dc .sp-dc-logopanel { width: 100%; aspect-ratio: 2.3 / 1; }
.sp-dc-photo-top > .sp-dc:hover .sp-dc-img img { transform: scale(1.04); }
.sp-dc-photo-top > .sp-dc .sp-dc-body { flex: 1; position: static; }
.sp-dc-photo-top > .sp-dc .sp-dc-desc { flex: 0 0 auto; min-height: 0; }
.sp-dc-photo-top > .sp-dc .sp-dc-cta { margin-top: auto; }
/* The band shows the logo large: not again by the name */
.sp-dc-photo-top > .sp-dc.logo-first .sp-dc-brand .sp-dc-logo { display: none; }
/* Save and heart on the photo's corner (white chips, readable on any photo), so the text starts at the top; the empty
   boost slot and code row take no room (as on phones) */
.sp-dc-photo-top > .sp-dc .sp-bookmark-btn.focus, .sp-dc-photo-top > .sp-dc .sp-fave-btn.focus {
  background: rgba(255,255,255,.92); box-shadow: 0 1px 6px rgba(0,0,0,.18); color: var(--ink-3);
}
.sp-dc-photo-top > .sp-dc .sp-dc-topslot:empty, .sp-dc-photo-top > .sp-dc .sp-dc-meta:empty { display: none; }
/* A portrait photo: whole, centred on a blurred copy of itself */
.sp-dc-img.is-fit::before {
  content: ''; position: absolute; inset: -24px; background: var(--fit-bg) center / cover;
  filter: blur(18px) brightness(.82); transform: scale(1.08);
}
.sp-dc-img.is-fit img { position: relative; z-index: 1; object-fit: contain; }
/* Phones: a shorter band (the owner's call): the card stays a quick scan, about 290px instead of 330 */
@media (max-width: 640px) {
  .sp-dc-photo-top > .sp-dc .sp-dc-img, .sp-dc-photo-top > .sp-dc .sp-dc-logopanel { width: 100%; aspect-ratio: 3 / 1; }
}

.sp-deal {
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  min-height: 228px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; cursor: pointer;
  transition: transform .2s, box-shadow .2s; box-shadow: var(--sh-lg);
  background: var(--navy);
}
/* .sp-deal.large retired — all featured deals are uniform height */
.sp-deal:hover { transform: translateY(-3px); box-shadow: 0 12px 40px -8px rgba(28,33,48,.32); }
.sp-deal-bg    { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sp-deal-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14,18,28,.96) 0%, rgba(14,18,28,.52) 55%, rgba(14,18,28,.06) 100%);
}
.sp-deal-body  { position: relative; z-index: 1; }
.sp-deal-badges { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.sp-deal-pill  {
  font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.sp-deal-pill.red    { background: var(--red); color: var(--cream); }
.sp-deal-pill.yellow { background: var(--yellow); color: var(--navy); }
.sp-deal-pill.frost  { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.25); }
.sp-deal-pill.green  { background: var(--green); color: #fff; }
.sp-deal-store { font-size: 17px; font-weight: 900; color: rgba(255,255,255,.88); margin-bottom: 6px; letter-spacing: -.01em; }
.sp-deal-title {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  color: var(--cream); text-wrap: balance; margin-bottom: 10px;
}
.sp-deal.large .sp-deal-title { font-size: 24px; }
.sp-deal-meta  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-deal-rate  { font-size: 17px; font-weight: 900; color: var(--yellow); }
.sp-deal-rate-was { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.34); text-decoration: line-through; }
.sp-deal-note  { font-size: 12px; color: rgba(255,255,255,.48); }
/* Featured deal end-date row — cashback boosts get yellow tint */
.sp-deal-ending-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  margin-bottom: 2px;
}
.sp-deal-ending-row.cashback { color: var(--yellow); }

.sp-deal-cta   {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--red); color: var(--cream);
  padding: 9px 18px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 3px 0 var(--red-deep);
  transition: transform .14s, box-shadow .14s; cursor: pointer;
}
.sp-deal-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--red-deep); }

/* ════════════ RETAILER GRID ════════════ */
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1080px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .sp-grid { grid-template-columns: repeat(2, 1fr); } }

.sp-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px; cursor: pointer;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .18s, box-shadow .18s, border-color .18s; position: relative;
}
.sp-card:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: var(--line-s); }
.sp-card-top    { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sp-card-logo   {
  width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #fff; letter-spacing: -.01em;
}
.sp-card-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap; line-height: 1.6;
}
.sp-card-tag.red    { background: var(--red-soft);  color: var(--red); }
.sp-card-tag.yellow { background: var(--yellow-s);  color: var(--yellow-d); }
.sp-card-tag.navy   { background: rgba(28,33,48,.08); color: var(--ink-2); }
.sp-card-tag.green  { background: var(--green-s);   color: var(--green); }
.sp-card-name { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.sp-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-card-rate   { font-size: 17px; font-weight: 900; color: var(--green); letter-spacing: -.02em; }
.sp-card-rate span { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.sp-card-btn    {
  background: var(--navy); color: var(--cream);
  padding: 7px 13px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  transition: background .14s; white-space: nowrap;
}
.sp-card-btn:hover { background: var(--red); }
.sp-card-earned { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 4px; }
.sp-card-earned strong { color: var(--ink-2); font-weight: 700; }

/* ── Redesigned card layout (v2) ── */
.sp-card-hdr  { display: flex; align-items: center; gap: 13px; padding-right: 36px; }
.sp-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-card-info .sp-card-name { font-size: 17px; font-weight: 800; }
.sp-card-rate-hero  { display: flex; align-items: baseline; gap: 6px; }
.sp-card-rate-n     { font-size: 30px; font-weight: 900; color: var(--green); letter-spacing: -.03em; line-height: 1; }
.sp-card-rate-lbl   { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sp-card-btn-full {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; background: var(--navy); color: var(--cream);
  padding: 12px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  transition: background .14s, box-shadow .14s;
  font-family: inherit; border: none; cursor: pointer;
  min-height: 44px; margin-top: auto;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.sp-card-btn-full:hover { background: var(--red); box-shadow: 0 2px 0 var(--red-deep); }

/* ════════════ SOCIAL SECTION ════════════ */
.sp-social { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .sp-social { grid-template-columns: 1fr; } }

/* Activity Feed */
.sp-feed {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
}
.sp-feed-hdr {
  background: var(--navy); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.sp-feed-title { font-size: 13px; font-weight: 700; color: var(--cream); }
.sp-feed-live  {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #22c582;
}
.sp-feed-dot {
  width: 7px; height: 7px; border-radius: 999px; background: #22c582;
  animation: dot-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.72); }
}
.sp-feed-list { padding: 2px 0; }
.sp-feed-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
  animation: item-in .3s ease-out;
}
.sp-feed-item:last-child { border-bottom: none; }
@keyframes item-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sp-feed-avatar {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; color: #fff;
}
.sp-feed-text   { flex: 1; min-width: 0; }
.sp-feed-user   { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.sp-feed-action { font-size: 12px; color: var(--ink-2); }
.sp-feed-time   { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }
.sp-feed-amount { font-size: 13.5px; font-weight: 900; color: var(--green); flex-shrink: 0; }
.sp-feed-footer {
  padding: 13px 20px;
  background: var(--cream-soft); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.sp-feed-total-lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sp-feed-total-amt { font-size: 15px; font-weight: 900; color: var(--ink); }

/* Team activity — empty state (launch-safe, no fabricated feed) */
.sp-feed-empty-body { padding: 36px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.sp-feed-empty-icon { width: 44px; height: 44px; border-radius: 999px; background: var(--cream-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.sp-feed-empty-title { font-size: 14px; font-weight: 700; color: var(--ink); max-width: 32ch; }
.sp-feed-empty-sub { font-size: 12.5px; color: var(--ink-3); max-width: 34ch; }
.sp-social-solo { grid-template-columns: 1fr !important; }
.sp-social-solo .sp-share-col { max-width: 440px; }
@media (max-width: 960px) { .sp-social-solo .sp-share-col { max-width: none; } }

/* ── Shared shop footer: its base styles live in site-footer.css (every page); the shopping pages' own spacing ── */
.ft { margin-top: 8px; }
.ft-connect { margin-bottom: 24px; }

/* Share Panel */
.sp-share-col { display: flex; flex-direction: column; gap: 14px; }

.sp-earn-card {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: var(--r-xl); padding: 22px; position: relative; overflow: hidden;
}
.sp-earn-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg, transparent 0, transparent 28px,
    rgba(255,255,255,.016) 28px, rgba(255,255,255,.016) 29px);
}
.sp-earn-ey  { font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; position: relative; z-index: 1; }
.sp-earn-n   { font-size: 42px; font-weight: 900; letter-spacing: -.03em; color: var(--cream); line-height: 1; margin-bottom: 4px; position: relative; z-index: 1; }
.sp-earn-sub { font-size: 12.5px; color: rgba(242,228,177,.50); margin-bottom: 18px; position: relative; z-index: 1; }
.sp-earn-stats { display: flex; gap: 24px; position: relative; z-index: 1; }
.sp-earn-stat  { display: flex; flex-direction: column; gap: 2px; }
.sp-earn-stat-n   { font-size: 16px; font-weight: 900; color: var(--cream); letter-spacing: -.01em; }
.sp-earn-stat-lbl { font-size: 10px; font-weight: 600; color: rgba(242,228,177,.42); letter-spacing: .07em; text-transform: uppercase; }

.sp-share-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
}
.sp-share-hdr {
  background: var(--red); padding: 13px 18px;
  display: flex; align-items: center; gap: 8px;
}
.sp-share-hdr-title { font-size: 13px; font-weight: 800; color: var(--cream); }
.sp-share-body   { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sp-share-preview {
  background: var(--cream-soft); border: 1px solid rgba(28,33,48,.08);
  border-radius: var(--r); padding: 12px;
}
.sp-share-preview-lbl  {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 5px;
}
.sp-share-preview-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.52; }
.sp-share-btns { display: flex; flex-direction: column; gap: 8px; }
.sp-share-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity .13s, transform .12s; text-align: left;
}
.sp-share-btn:hover { opacity: .86; transform: scale(.99); }
.sp-share-btn-ico { width: 22px; height: 22px; flex-shrink: 0; }
.sp-share-btn-text { flex: 1; }
.sp-share-btn-label { font-size: 12.5px; font-weight: 700; display: block; }
.sp-share-btn-sub   { font-size: 10.5px; font-weight: 500; opacity: .70; display: block; }
.sp-share-btn.ig    { background: linear-gradient(135deg, #E1306C, #833AB4, #F56040); color: #fff; }
.sp-share-btn.fb    { background: #1877F2; color: #fff; }
.sp-share-btn.snap  { background: #FFFC00; color: #111; }
.sp-share-btn.copy  { background: var(--navy); color: var(--cream); }

/* ════════════ GRID VARIANTS ════════════ */
.sp-grid.sp-grid-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px)  { .sp-grid.sp-grid-3col { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .sp-grid.sp-grid-3col { grid-template-columns: repeat(2, 1fr); } }

/* ════════════ TRENDING / TEAM PICKS ════════════ */
.sp-trending-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 1080px) { .sp-trending-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sp-trending-row { grid-template-columns: 1fr 1fr; } }

.sp-trend-card {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 22px 22px;
  cursor: pointer; display: flex; flex-direction: column; gap: 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden;
}
.sp-trend-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--red);
}
.sp-trend-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-lg);
  border-color: rgba(225,39,39,.22);
}
.sp-trend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-trend-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--red-soft); color: var(--red);
  white-space: nowrap; line-height: 1.6;
}
.sp-trend-rate {
  font-size: 32px; font-weight: 900; color: var(--green);
  letter-spacing: -.03em; line-height: 1;
}
.sp-trend-rate span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.sp-trend-name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-top: 2px; }
.sp-trend-impact {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-2);
  background: var(--green-s); border-radius: 10px; padding: 10px 13px;
  line-height: 1.3;
}
.sp-trend-impact strong { color: var(--green); font-weight: 800; }
.sp-trend-btn {
  background: var(--navy); color: var(--cream);
  padding: 12px 0; border-radius: 999px; width: 100%;
  min-height: 44px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-align: center;
  transition: background .14s;
}
.sp-trend-btn:hover { background: var(--red); }

@media (max-width:560px){.sp-seasonal-head{padding:16px}.sp-seasonal-cta{width:100%;justify-content:center}}

/* ════════════ CATEGORY SECTION HEADERS ════════════
   A soft strip in the category's colour (FfuCategory.look: its tone and icon), with a solid edge on the left, the icon
   on a white chip, the name and its store count (2026-10-20: the rows read as one sea of white and logos). The tones are
   muted hues, none of them the program's red; one token each, so a program can retune them. */
:root {
  --cat-blue: #2563EB; --cat-green: #16A34A; --cat-pink: #DB2777; --cat-teal: #0891B2;
  --cat-amber: #D97706; --cat-violet: #7C3AED; --cat-indigo: #4F46E5; --cat-orange: #EA580C;
}
.sp-cat-tone-blue { --cat: var(--cat-blue); } .sp-cat-tone-green { --cat: var(--cat-green); }
.sp-cat-tone-pink { --cat: var(--cat-pink); } .sp-cat-tone-teal { --cat: var(--cat-teal); }
.sp-cat-tone-amber { --cat: var(--cat-amber); } .sp-cat-tone-violet { --cat: var(--cat-violet); }
.sp-cat-tone-indigo { --cat: var(--cat-indigo); } .sp-cat-tone-orange { --cat: var(--cat-orange); }
.sp-cat-sec-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 16px 10px 14px;
  border-radius: 14px; background: color-mix(in srgb, var(--cat) 9%, var(--white)); box-shadow: inset 4px 0 0 var(--cat);
}
.sp-cat-sec-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; margin-left: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--cat); box-shadow: 0 1px 3px rgba(28,33,48,.08);
}
.sp-cat-sec-label {
  font-size: 18px; font-weight: 800; color: var(--ink);
  letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-cat-sec-count { font-size: 12.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.sp-cat-sec-count::before { content: '·'; margin-right: 6px; }
.sp-cat-sec-see-all {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--red); white-space: nowrap; flex-shrink: 0;
}
/* A category page opens with its band (categoryBandHtml): the page's gap spaces it, not the row's margin */
.sp-cat-band-page { margin-bottom: 0; }
@media (max-width: 560px) {
  .sp-cat-sec-header { padding: 8px 12px 8px 10px; gap: 8px; }
  .sp-cat-sec-icon { width: 28px; height: 28px; }
  .sp-cat-sec-label { font-size: 15.5px; white-space: normal; line-height: 1.15; } /* wraps rather than "Shoes & Access…" */
  .sp-cat-sec-see-all { font-size: 12px; }
  .sp-cat-sec-count { display: none; } /* the See all link says the count on a phone */
}
/* The category view's heading: its look, small, beside its name */
.sp-cat-view-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--cat); background: color-mix(in srgb, var(--cat) 12%, var(--white));
}
/* Every category as a chip under the zone's heading: wraps on a desktop, scrolls sideways on a phone */
.sp-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-cat-chips-title { margin: 0 0 12px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.sp-cat-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line-s); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: border-color .13s, background .13s, transform .13s;
}
.sp-cat-chip:hover { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 7%, var(--white)); }
.sp-cat-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--cat) 35%, transparent); outline-offset: 2px; }
.sp-cat-chip-icon {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--cat); background: color-mix(in srgb, var(--cat) 12%, var(--white));
}
.sp-cat-chip-n { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
@media (max-width: 560px) {
  .sp-cat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .sp-cat-chips::-webkit-scrollbar { display: none; }
  .sp-cat-chip { flex-shrink: 0; }
}
.sp-cat-sec-see-all:hover { text-decoration: underline; }

/* ════════════ BROWSE ALL CTA ════════════
   The page's closing call to action, in the program's red (2026-10-20: it was navy, right above the navy footer, and
   read as part of it). Text in the program's colour for text on red (--cream). */
.sp-browse-all {
  width: 100%; background: var(--red); border-radius: var(--r-lg);
  padding: 22px 28px; display: flex; align-items: center; gap: 18px;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  border: 0; text-align: left; box-shadow: var(--sh-red);
}
.sp-browse-all:hover { background: var(--red-deep); }
.sp-browse-all:focus-visible { outline: 3px solid var(--red-soft); outline-offset: 3px; }
.sp-browse-all-icon {
  width: 48px; height: 48px; border-radius: 13px;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); flex-shrink: 0;
}
.sp-browse-all-text { flex: 1; min-width: 0; }
.sp-browse-all-title {
  font-size: 16px; font-weight: 800; color: var(--cream); letter-spacing: -.01em;
}
.sp-browse-all-sub { font-size: 12.5px; color: color-mix(in srgb, var(--cream) 82%, transparent); margin-top: 2px; }
.sp-browse-all-arrow { font-size: 24px; font-weight: 900; color: var(--cream); flex-shrink: 0; transition: transform .15s; }
.sp-browse-all:hover .sp-browse-all-arrow { transform: translateX(3px); }

/* ════════════ HOT DEALS — urgency badge in section header ════════════ */
.sp-hotdeals-urgency-badge {
  display: flex; align-items: center; gap: 6px;
  background: rgba(225,39,39,.10); border: 1px solid rgba(225,39,39,.22);
  color: var(--red); border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0; align-self: center;
}
.sp-hotdeals-urgency-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0;
  animation: dot-pulse 1.8s ease-in-out infinite;
}

/* ════════════ DEAL SOCIAL (likes, comments, shoppers) ════════════ */
.sp-deal-social {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sp-deal-like-btn, .sp-deal-comment-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
  font-family: inherit;
}
.sp-deal-like-btn {
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.75);
}
.sp-deal-like-btn:hover { background: rgba(255,255,255,.20); color: #fff; }
.sp-deal-like-btn.liked {
  background: rgba(225,39,39,.28); border-color: rgba(225,39,39,.48); color: #ff8a8a;
}
.sp-deal-like-btn svg { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.sp-deal-like-btn.liked svg { transform: scale(1.25); }
.sp-deal-comment-btn {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.55);
}
.sp-deal-comment-btn:hover, .sp-deal-comment-btn.open { background: rgba(255,255,255,.16); color: #fff; }
.sp-deal-shoppers {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.40);
}
.sp-deal-shoppers-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22c582; flex-shrink: 0;
  animation: dot-pulse 2s ease-in-out infinite;
}
.sp-deal-comments-panel {
  margin-top: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  animation: comments-in .2s ease-out;
}
@keyframes comments-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-deal-comment { display: flex; gap: 9px; align-items: flex-start; }
.sp-deal-comment-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
}
.sp-deal-comment-user  { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.86); }
.sp-deal-comment-text  { font-size: 11.5px; color: rgba(255,255,255,.60); line-height: 1.42; margin-top: 1px; }
.sp-deal-comment-time  { font-size: 10px; color: rgba(255,255,255,.28); margin-top: 2px; }
.sp-deal-view-all      { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.35); text-align: center; padding-top: 2px; cursor: pointer; }
.sp-deal-view-all:hover { color: rgba(255,255,255,.60); }

/* ════════════ RETAILER CARD SOCIAL ════════════ */
.sp-card-shoppers {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3);
}
.sp-card-shoppers-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22c582; flex-shrink: 0;
  animation: dot-pulse 2s ease-in-out infinite;
}

/* ════════════ PROMO MODULES ════════════ */
.sp-promo-modules {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 920px) { .sp-promo-modules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sp-promo-modules { grid-template-columns: 1fr; } }

.sp-promo-mod {
  border-radius: var(--r-lg); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
  cursor: pointer; position: relative; overflow: hidden; text-align: left;
  transition: transform .17s, box-shadow .17s; font-family: inherit;
}
.sp-promo-mod:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.sp-promo-mod.red  { background: linear-gradient(140deg, var(--navy) 0%, #1e2840 100%); border: 1px solid rgba(255,255,255,.06); }
.sp-promo-mod.warm { background: linear-gradient(140deg, #291800 0%, #3a2200 100%);     border: 1px solid rgba(249,157,32,.10); }
.sp-promo-mod.dark { background: var(--navy-3);                                          border: 1px solid rgba(255,255,255,.06); }
.sp-promo-mod-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.sp-promo-mod.red  .sp-promo-mod-eyebrow { color: var(--red); }
.sp-promo-mod.warm .sp-promo-mod-eyebrow { color: var(--yellow); }
.sp-promo-mod.dark .sp-promo-mod-eyebrow { color: rgba(242,228,177,.38); }
.sp-promo-mod-rate {
  font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1;
}
.sp-promo-mod.red  .sp-promo-mod-rate { color: var(--yellow); }
.sp-promo-mod.warm .sp-promo-mod-rate { color: var(--yellow); }
.sp-promo-mod.dark .sp-promo-mod-rate { color: var(--cream); }
.sp-promo-mod-title { font-size: 14.5px; font-weight: 800; color: var(--cream); letter-spacing: -.01em; line-height: 1.22; text-wrap: balance; }
.sp-promo-mod-sub   { font-size: 12px; color: rgba(242,228,177,.46); line-height: 1.4; }
.sp-promo-mod-cta   {
  margin-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: rgba(242,228,177,.48); display: flex; align-items: center; gap: 4px;
}
.sp-promo-mod:hover .sp-promo-mod-cta { color: var(--cream); }
.sp-promo-mod-shop-btn {
  background: rgba(255,255,255,.13); border: 1.5px solid rgba(255,255,255,.22);
  color: var(--cream); padding: 9px 16px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: background .13s; white-space: nowrap; min-height: 40px;
}
.sp-promo-mod:hover .sp-promo-mod-shop-btn { background: rgba(255,255,255,.22); }

/* ════════════ PROMO MINI COUNTDOWN ════════════ */
.sp-promo-mini-cd {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--yellow); letter-spacing: .02em;
}
.sp-promo-mini-cd-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0;
  animation: dot-pulse 1.8s ease-in-out infinite;
}

/* ════════════ TOAST ════════════ */
.sp-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--navy); border: 1px solid rgba(255,255,255,.12);
  color: var(--cream); padding: 13px 18px;
  border-radius: var(--r); font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  display: flex; align-items: center; gap: 9px;
  animation: toast-in .28s ease-out;
}
.sp-toast-dot { width: 9px; height: 9px; border-radius: 999px; background: #22c582; flex-shrink: 0; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════ SEARCH BAR SECTION ════════════ */
.sp-search-section {
  background: var(--navy-3);
  border-bottom: 1px solid rgba(255,255,255,.055);
  padding: 14px 0 16px;
}
.sp-search-wrap {
  max-width: var(--sp-maxw, 1360px); margin: 0 auto; padding: 0 28px;
  position: relative; z-index: 150;
}
.sp-search-bar {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 14px; height: 56px; overflow: hidden;
  transition: background .15s, border-color .18s, box-shadow .18s;
}
.sp-search-bar.focused {
  background: rgba(255,255,255,.11);
  border-color: rgba(225,39,39,.55);
  box-shadow: 0 0 0 3px rgba(225,39,39,.10);
}
.sp-search-icon {
  padding: 0 12px 0 18px; color: rgba(242,228,177,.38); flex-shrink: 0;
  display: flex; align-items: center; pointer-events: none;
}
.sp-search-bar.focused .sp-search-icon { color: rgba(242,228,177,.68); }
.sp-search-input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: none; outline: none;
  font-family: inherit; font-size: 16px; font-weight: 500;
  color: var(--cream); caret-color: var(--red);
}
.sp-search-input::placeholder { color: rgba(242,228,177,.32); }
.sp-search-clear {
  padding: 0 10px; color: rgba(242,228,177,.34); display: flex;
  align-items: center; flex-shrink: 0; transition: color .12s;
}
.sp-search-clear:hover { color: rgba(242,228,177,.78); }
.sp-search-submit {
  background: var(--red); color: var(--cream);
  height: 100%; padding: 0 24px; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0;
  border-left: 1.5px solid rgba(255,255,255,.07);
  transition: background .13s;
}
.sp-search-submit:hover { background: var(--red-deep); }

.sp-search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 28px; right: 28px;
  background: var(--navy-2); border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px; overflow: hidden; z-index: 500;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  animation: dropdown-in .15s ease-out;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-search-section-label {
  padding: 10px 16px 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(242,228,177,.28);
}
.sp-search-result {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; font-family: inherit;
  background: none; border: none; transition: background .12s; text-align: left;
}
.sp-search-result:hover { background: rgba(255,255,255,.06); }
.sp-search-result-logo {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff;
}
.sp-search-result-cat-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: var(--red-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
}
.sp-search-result-info { flex: 1; min-width: 0; }
.sp-search-result-name { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--cream); }
.sp-search-result-rel { padding: 7px 16px; }
.sp-search-result-rel .sp-search-result-name { font-size: 12.5px; color: rgba(242,228,177,.86); }
.sp-search-result-rel .nav-srch-rate { font-size: 18px; }
.sp-search-see-all {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 16px; margin-top: 4px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--red); background: rgba(225,39,39,.08); border: none; border-top: 1px solid rgba(255,255,255,.07);
  cursor: pointer; transition: background .12s; text-align: left;
}
.sp-search-see-all:hover { background: rgba(225,39,39,.14); }
.sp-search-see-all strong { color: var(--cream); }
.sp-search-result-meta { font-size: 11.5px; color: rgba(242,228,177,.46); margin-top: 1px; }
.sp-search-result-arrow {
  font-size: 14px; color: rgba(242,228,177,.22); flex-shrink: 0;
  transition: color .12s, transform .12s;
}
.sp-search-result:hover .sp-search-result-arrow { color: rgba(242,228,177,.65); transform: translateX(3px); }
.sp-search-empty { padding: 14px 18px; font-size: 13.5px; color: rgba(242,228,177,.46); }
.sp-search-empty strong { color: rgba(242,228,177,.72); }

.sp-search-quick-cats {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.sp-search-quick-cat {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  color: rgba(242,228,177,.62); padding: 6px 13px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .13s, color .13s, border-color .13s;
}
.sp-search-quick-cat:hover {
  background: rgba(255,255,255,.13); color: var(--cream);
  border-color: rgba(255,255,255,.22);
}
@media (max-width: 560px) { .sp-search-wrap { padding: 0 14px; } .sp-search-submit { padding: 0 16px; } }

/* ════════════ SEARCH DROPDOWN — RICH PRE-FILL ════════════ */
.sp-search-prefill { max-height: 460px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; }
.sp-search-prefill::-webkit-scrollbar { width: 4px; }
.sp-search-prefill::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 4px; }

.sp-search-dd-lbl {
  padding: 14px 16px 8px;
  font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242,228,177,.28);
}

/* Quick Access row */
.sp-search-ql-row {
  display: flex; gap: 7px; padding: 0 14px 14px;
  overflow-x: auto; scrollbar-width: none;
}
.sp-search-ql-row::-webkit-scrollbar { display: none; }

.sp-search-ql-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  background: var(--ql-bg, rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(242,228,177,.80); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: filter .12s, color .12s, border-color .13s;
}
.sp-search-ql-btn:hover {
  filter: brightness(1.35);
  color: var(--cream); border-color: rgba(255,255,255,.20);
}
.sp-search-ql-icon { display: flex; align-items: center; flex-shrink: 0; }

/* Trending stores */
.sp-search-trending-row {
  display: flex; gap: 8px; padding: 0 14px 14px;
  overflow-x: auto; scrollbar-width: none;
}
.sp-search-trending-row::-webkit-scrollbar { display: none; }

.sp-search-trending-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; font-family: inherit; flex-shrink: 0;
  transition: background .12s, border-color .12s;
  text-align: left;
}
.sp-search-trending-chip:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.17); }

.sp-search-trending-name {
  font-size: 12.5px; font-weight: 700; color: var(--cream); line-height: 1;
  white-space: nowrap;
}
.sp-search-trending-rate {
  font-size: 10.5px; font-weight: 700; color: var(--green); margin-top: 3px; line-height: 1;
  white-space: nowrap;
}

/* Popular search chips */
.sp-search-popular-chips {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 18px;
}
.sp-search-popular-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  color: rgba(242,228,177,.60); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.sp-search-popular-chip:hover {
  background: rgba(255,255,255,.13); color: var(--cream); border-color: rgba(255,255,255,.18);
}

/* ════════════════════════════════════════════════════════
   NAV SEARCH BAR — persistent across all pages
   ════════════════════════════════════════════════════════ */
.nav-srch-wrap {
  flex: 1 1 300px; min-width: 220px; max-width: 480px;
  position: relative; z-index: 210;
  margin: 0 6px;
}

/* Bar */
.nav-srch-bar {
  display: flex; align-items: center; height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.28);
  border: 1.5px solid rgba(255,255,255,.46);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 20px rgba(0,0,0,.28);
  transition: background .15s, border-color .18s, box-shadow .18s;
}
.nav-srch-bar:hover { background: rgba(255,255,255,.33); border-color: rgba(255,255,255,.56); }
.nav-srch-bar.focused {
  background: rgba(255,255,255,.34);
  border-color: rgba(225,39,39,.75);
  box-shadow: 0 0 0 3px rgba(225,39,39,.22), 0 6px 20px rgba(0,0,0,.24);
}
.nav-srch-icon {
  padding: 0 8px 0 15px;
  color: rgba(242,228,177,.85);
  display: flex; align-items: center; flex-shrink: 0;
  pointer-events: none; transition: color .15s;
}
.nav-srch-bar.focused .nav-srch-icon { color: var(--red); }
.nav-srch-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 600; /* 16px at every width: iPhones and iPads zoom into smaller fields */
  caret-color: var(--red); height: 100%;
}
.nav-srch-input::placeholder { color: rgba(250,244,220,.78); font-size: 13.5px; font-weight: 600; }
.nav-srch-clear {
  padding: 0 10px; color: rgba(242,228,177,.45);
  display: flex; align-items: center; flex-shrink: 0;
  transition: color .12s; height: 100%;
}
.nav-srch-clear:hover { color: var(--cream); }

/* Dropdown */
.nav-srch-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: max(100%, 520px);
  background: var(--navy-2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,.22), 0 28px 56px -8px rgba(0,0,0,.55);
  overflow: hidden;
  animation: nav-srch-slide .16s ease;
  max-height: 460px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.07) transparent;
  min-width: 320px;
}
.nav-srch-dropdown::-webkit-scrollbar { width: 4px; }
.nav-srch-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 4px; }
@keyframes nav-srch-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-srch-dd-lbl {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(242,228,177,.44);
}
.nav-srch-dd-count {
  background: rgba(225,39,39,.18); color: var(--red);
  font-size: 10px; font-weight: 800; border-radius: 999px;
  padding: 2px 8px; letter-spacing: .04em;
}
.nav-srch-result {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; font-family: inherit;
  background: none; border: none; text-align: left;
  transition: background .11s;
}
.nav-srch-result:hover, .nav-srch-result.is-active  { background: rgba(255,255,255,.055); } /* is-active: keyboard highlight (nav-search-ui.js) */
.nav-srch-result:focus  { background: rgba(255,255,255,.055); outline: none; }
.nav-srch-result-info   { flex: 1; min-width: 0; }
.nav-srch-result-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 800; color: var(--cream); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-srch-result-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-srch-best {
  flex-shrink: 0; font-size: 8.5px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
  color: rgba(242,228,177,.66); background: rgba(255,255,255,.08);
  border-radius: 4px; padding: 2px 4px; line-height: 1;
}
.nav-srch-result-rel { padding: 7px 14px; }
.nav-srch-result-rel .nav-srch-result-name { font-size: 13.5px; font-weight: 700; color: rgba(242,228,177,.86); }
.nav-srch-result-rel .nav-srch-rate { font-size: 18px; }

/* ── Concise rate states (match ad-module rate language) ── */
.nav-srch-rate {
  flex-shrink: 0; display: flex; align-items: baseline; gap: 4px;
  font-size: 22px; font-weight: 900; color: var(--green); letter-spacing: -.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nav-srch-rate-now { font-weight: 900; }
.nav-srch-rate-pre { font-size: 11px; font-weight: 800; color: var(--green); letter-spacing: 0; }
.nav-srch-result-rel .nav-srch-rate-pre { font-size: 10.5px; }
.nav-srch-rate-was { font-size: .68em; font-weight: 800; color: rgba(242,228,177,.40); text-decoration: line-through; }
.nav-srch-rate-arw { font-size: .68em; color: rgba(242,228,177,.40); }
.nav-srch-rate-boost .nav-srch-rate-now { color: #F99D20; }
/* Narrow dropdowns: the store name is the primary identifier, so the row sheds
   rate qualifiers and the Best chip before it ever truncates the name. */
@media (max-width: 640px) {
  .nav-srch-rate { font-size: 18px; }
  .nav-srch-result-rel .nav-srch-rate { font-size: 16px; }
  .nav-srch-rate-suffix { display: none; }
  .nav-srch-result { gap: 9px; padding: 8px 12px; }
  .nav-srch-result-name { font-size: 14px; }
  .nav-srch-best { display: none; }
}
@media (max-width: 440px) {
  .nav-srch-result-rel .nav-srch-rate { font-size: 15px; }
}
.nav-srch-result-rate {
  display: flex; align-items: baseline; gap: 2px; margin-top: 4px;
}
.nav-srch-rate-num {
  font-size: 15px; font-weight: 900; color: var(--green); letter-spacing: -.01em; line-height: 1;
}
.nav-srch-rate-lbl {
  font-size: 11.5px; font-weight: 600; color: rgba(24,160,96,.72); line-height: 1;
}
.nav-srch-arrow {
  font-size: 13px; color: rgba(242,228,177,.18); flex-shrink: 0;
  transition: color .12s, transform .12s;
}
.nav-srch-result:hover .nav-srch-arrow  { color: rgba(242,228,177,.60); transform: translateX(3px); }
.nav-srch-see-all {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 14px; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--red); background: rgba(225,39,39,.07);
  border: none; border-top: 1px solid rgba(255,255,255,.07); cursor: pointer;
  transition: background .12s; text-align: left;
}
.nav-srch-see-all:hover, .nav-srch-see-all.is-active  { background: rgba(225,39,39,.13); }
.nav-srch-see-all strong { color: var(--cream); }
/* "143 deals match …  Show them →" (FfuNavSearchUI.dealsRowHtml): the deals the words find, a real button row in the
   header search and the Deals page's own search box */
.nav-srch-deals {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px;
  border: 0; border-top: 1px solid rgba(255,255,255,.08); background: rgba(225,39,39,.12);
  color: var(--cream); font: inherit; text-align: left; cursor: pointer; transition: background .13s;
}
.nav-srch-deals:first-child { border-top: 0; }
.nav-srch-deals:hover, .nav-srch-deals:focus-visible, .nav-srch-deals.is-active { background: rgba(225,39,39,.22); outline: none; }
.nav-srch-deals-icon { display: flex; flex-shrink: 0; color: var(--red); }
/* Wraps rather than cutting off the words searched for: the header panel can be narrow */
.nav-srch-deals-text { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.nav-srch-deals-cta {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 7px 12px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 12.5px; font-weight: 800;
}
.nav-srch-empty {
  padding: 16px 16px; font-size: 14px; color: rgba(242,228,177,.48);
}
.nav-srch-empty strong { color: rgba(242,228,177,.75); }
.nav-srch-dd-hint {
  padding: 6px 14px 14px;
  font-size: 11px; color: rgba(242,228,177,.22); font-style: italic;
}

/* Active filter indicator in category / All Stores views */
.sas-filter-active-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: rgba(225,39,39,.07);
  border: 1px solid rgba(225,39,39,.16);
  border-radius: 9px;
  font-size: 13px; color: var(--cream-soft);
}
.sas-filter-active-banner svg { color: var(--red); flex-shrink: 0; }
.sas-filter-active-banner strong { color: var(--cream); }

/* Desktop header search sizing — one rule for every shopper page that shows
   the shared header search (nav-search-ui.js). Was a per-page <style> on
   /shopping and /deals (design Shopping Page.html), copied to /favorites. */
@media (min-width: 1181px) {
  .sp-nav-inner .nav-srch-wrap { flex: 1 1 560px; max-width: 720px; margin: 0 14px; }
  .sp-nav-inner { gap: 16px; }
  .sp-nav-inner .nav-srch-dropdown { width: 100%; min-width: 420px; max-width: 720px; }
}
@media (min-width: 1400px) {
  .sp-nav-inner .nav-srch-wrap { flex: 1 1 640px; max-width: 820px; }
  .sp-nav-inner .nav-srch-dropdown { max-width: 820px; }
}

/* Responsive nav search */
@media (max-width: 1180px) {
  .nav-srch-wrap { min-width: 160px; max-width: 440px; }
  .nav-srch-dropdown { left: auto; right: 0; min-width: 300px; width: 340px; }
}
/* Tablet widths: the full bar (logo, menu, search, an admin's Coach/Shop switch, help, bell, language, profile) ran
   about 20px past the screen; tighter gaps and a narrower search box fit it */
@media (min-width: 641px) and (max-width: 800px) {
  .sp-nav-inner { gap: 8px; }
  .nav-srch-wrap { min-width: 120px; }
}
/* ── Mobile search: header trigger + full-screen overlay ──
   On phones the inline dropdown is replaced by a full-screen search sheet
   (trigger button in the header → overlay with autofocused input). */
.nav-srch-mtrigger {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px;
  border-radius: 11px; padding: 0 13px; cursor: pointer;
  background: rgba(255,255,255,.28); border: 1.5px solid rgba(255,255,255,.46);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset;
  color: rgba(250,244,220,.85); font-family: inherit; font-size: 13.5px; font-weight: 600;
  text-align: left;
}
.nav-srch-mtrigger:active { background: rgba(255,255,255,.36); }
.nav-srch-mtrigger svg { flex-shrink: 0; }
.nav-srch-mtrigger-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-srch-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: var(--navy-2);
  display: flex; flex-direction: column;
  animation: nav-srch-slide .16s ease;
}
.nav-srch-ov-hd {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; flex-shrink: 0;
  background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-srch-ov-hd .nav-srch-bar { flex: 1 1 auto; min-width: 0; height: 46px; }
.nav-srch-ov-cancel {
  flex-shrink: 0; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--cream); background: none; border: none; cursor: pointer;
  min-height: 44px; padding: 0 8px;
}
.nav-srch-ov-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 0 28px; -webkit-overflow-scrolling: touch; }
.nav-srch-ov-body .nav-srch-result { min-height: 52px; padding: 10px 16px; }
.nav-srch-ov-body .nav-srch-dd-lbl { padding: 16px 16px 8px; }
.nav-srch-ov-body .nav-srch-qa-grid, .nav-srch-ov-body .nav-srch-list { padding-left: 16px; padding-right: 16px; }
.nav-srch-ov-body .nav-srch-see-all { min-height: 50px; }
.nav-srch-ov-body .nav-srch-empty { padding: 22px 16px; }
/* Phone: search gets header row 2 to itself (see the phone header block) — must override the base flex-basis above,
   so this rule lives AFTER the base .nav-srch-wrap definition. */
@media (max-width: 640px) {
  .sp-nav-inner > .nav-srch-wrap { order: 7; flex: 1 1 100%; min-width: 0; max-width: none; margin: 0; }
  /* The search trigger, then the shortcut row (nav-search-ui.js quickRowHtml) stacked under it. */
  .nav-srch-wrap-m { display: flex; flex-direction: column; gap: 12px; }
  .nav-ql {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -14px; padding: 0 14px 2px;
  }
  .nav-ql::-webkit-scrollbar { display: none; }
  .nav-ql-item {
    flex: 0 0 auto; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-decoration: none;
  }
  .nav-ql-ico {
    width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    transition: background .15s, border-color .15s;
  }
  .nav-ql-item:active .nav-ql-ico { background: rgba(255,255,255,.16); }
  .nav-ql-item.is-active .nav-ql-ico { background: rgba(225,39,39,.22); border-color: rgba(225,39,39,.6); }
  .nav-ql-lbl {
    font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; color: rgba(242,228,177,.8);
    max-width: 100%;
  }
  .nav-ql-item.is-active .nav-ql-lbl { color: var(--cream); }
}

/* ── Nav dropdown, nothing typed: Quick Access tiles (nav-search-ui.js searchPanelHtml) — one style, a line under each
   name saying what it's for; Share Hub tinted so it isn't forgotten. They were five pills in five colours. ── */
.nav-srch-qa-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 0 14px 14px; }
.nav-srch-qa {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 11px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  font-family: inherit; text-align: left; cursor: pointer; transition: background .12s, border-color .12s;
}
.nav-srch-qa:hover, .nav-srch-qa:focus-visible { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.26); outline: none; }
.nav-srch-qa-icon { display: flex; flex-shrink: 0; }
.nav-srch-qa-favs .nav-srch-qa-icon { color: var(--red); }
.nav-srch-qa-coupons .nav-srch-qa-icon { color: var(--green); }
.nav-srch-qa-share { background: rgba(167,139,250,.13); border-color: rgba(167,139,250,.42); }
.nav-srch-qa-share:hover, .nav-srch-qa-share:focus-visible { background: rgba(167,139,250,.22); border-color: rgba(167,139,250,.6); }
.nav-srch-qa-share .nav-srch-qa-icon { color: #c4b5fd; }
.nav-srch-qa-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-srch-qa-name { font-size: 13px; font-weight: 800; color: var(--cream); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-srch-qa-sub { font-size: 11.5px; font-weight: 600; color: rgba(242,228,177,.68); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Nav dropdown, nothing typed: Recent and Trending as the typed results' rows, two columns (one on a phone) ── */
.nav-srch-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; padding: 0 6px 8px; }
.nav-srch-list .nav-srch-result { border-radius: 9px; padding: 8px 10px; min-width: 0; }
.nav-srch-list .nav-srch-result-info { min-width: 0; }
.nav-srch-list .nav-srch-result-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; } /* a long name wraps rather than being cut */
/* A smaller rate than the typed results' so the name gets most of its half of the panel */
.nav-srch-list .nav-srch-rate-now { font-size: 13px; }
.nav-srch-list .nav-srch-rate-pre { font-size: 10.5px; }
/* Columns follow the panel's own width (it's as wide as the header search, narrow on a small laptop or the phone
   overlay): two below about 480px squeezed the names to a few letters */
.nav-srch-dropdown, .nav-srch-panel { container-type: inline-size; }
@container (max-width: 480px) {
  .nav-srch-qa-grid { grid-auto-flow: row; }
  .nav-srch-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Section divider ── */
.nav-srch-divider { height: 1px; background: rgba(255,255,255,.085); margin: 4px 0; }

/* Increase dropdown max-height for richer prefill */
.nav-srch-dropdown { max-height: 500px; }

/* ════════════ FAVORITES BUTTON ════════════ */
.sp-fave-btn {
  position: absolute; z-index: 5; cursor: pointer; border: none;
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .15s, background .15s;
}
/* Light-background cards */
.sp-fave-btn.card,
.sp-fave-btn.top10 {
  top: 10px; right: 10px;
  background: rgba(255,255,255,.90); color: #c4c4c4;
  box-shadow: 0 1px 6px rgba(0,0,0,.13);
}
.sp-fave-btn.card:hover,
.sp-fave-btn.top10:hover { color: var(--red); transform: scale(1.16); }
.sp-fave-btn.card.active,
.sp-fave-btn.top10.active { color: var(--red); }
/* Dark-background cards */
.sp-fave-btn.deal {
  top: 14px; right: 14px; z-index: 2;
  background: rgba(0,0,0,.40); color: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.18);
}
.sp-fave-btn.deal:hover { background: rgba(0,0,0,.65); color: #fff; transform: scale(1.1); }
.sp-fave-btn.deal.active { color: #ff7272; }
.sp-fave-btn.promo {
  top: 12px; right: 12px;
  background: rgba(255,255,255,.10); color: rgba(242,228,177,.40);
  border: 1px solid rgba(255,255,255,.10);
}
.sp-fave-btn.promo:hover { background: rgba(255,255,255,.20); color: var(--cream); transform: scale(1.1); }
.sp-fave-btn.promo.active { color: #ff7272; }
.sp-fave-btn.tile { top: 8px; right: 8px; z-index: 2; background: rgba(255,255,255,.92); color: #c4c4c4; box-shadow: 0 1px 5px rgba(0,0,0,.12); width: 26px; height: 26px; }
.sp-fave-btn.tile:hover { color: var(--red); transform: scale(1.14); }
.sp-fave-btn.tile.active { color: var(--red); }
.sp-fave-btn.focus { position: absolute; top: 10px; right: 10px; background: rgba(28,33,48,.05); color: #c4c4c4; width: 26px; height: 26px; }
.sp-fave-btn.focus:hover { color: var(--red); transform: scale(1.14); }
.sp-fave-btn.focus.active { color: var(--red); }
.sp-fave-btn svg { display: block; transition: fill .15s; }
.sp-fave-btn.active svg { fill: currentColor; }

/* ════════════ BOOKMARK BUTTON (save this specific offer — square, distinct from heart) ════════════ */
.sp-bookmark-btn { position: absolute; z-index: 5; cursor: pointer; border: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s, color .15s; }
.sp-bookmark-btn.deal { top: 14px; right: 50px; z-index: 2; background: rgba(0,0,0,.40); color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.18); }
.sp-bookmark-btn.deal:hover { background: rgba(0,0,0,.65); color: #fff; transform: scale(1.1); }
.sp-bookmark-btn.deal.active { color: var(--yellow); background: rgba(0,0,0,.55); }
.sp-bookmark-btn.focus { top: 10px; right: 44px; background: rgba(28,33,48,.06); color: #c4c4c4; width: 26px; height: 26px; border-radius: 7px; }
.sp-bookmark-btn.focus:hover { color: var(--navy); transform: scale(1.12); background: rgba(28,33,48,.12); }
.sp-bookmark-btn.focus.active { color: var(--yellow-d, #b8860b); background: rgba(249,157,32,.14); }
.sp-bookmark-btn svg { display: block; }
.sp-bookmark-btn.active svg { fill: currentColor; }

/* ════════════ DEFAULT STORE CARD — compact wide logo-tile system (Tier 1) ════════════ */
.sp-store-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 14px; }
@media (max-width: 1100px) { .sp-store-grid { grid-template-columns: repeat(4, 1fr); } }
.sp-store-tile {
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; position: relative;
  background: none; border: none; padding: 0; text-align: left;
}
.sp-store-tile.row { width: 182px; flex-shrink: 0; }
/* Compact wide tile — classic cashback-grid proportions, logo stays the anchor.
   The well is solid #fff. A brand tint here showed through transparent wordmarks
   as a gray/colored plate behind the mark (Popular, Just Added, category grids). */
.sp-store-logo-tile {
  position: relative; width: 100%; aspect-ratio: 2.1 / 1;
  background: #fff;
  border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(28,33,48,.07), 0 1px 2px rgba(28,33,48,.04);
  transition: transform .16s, box-shadow .16s;
}
.sp-store-tile:hover .sp-store-logo-tile {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(28,33,48,.10), 0 14px 30px -10px rgba(28,33,48,.24), 0 3px 10px rgba(28,33,48,.08);
}
.sp-store-badge {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  background: var(--navy); color: var(--cream);
  font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; line-height: 1.4;
  box-shadow: 0 2px 6px rgba(28,33,48,.18);
}
.sp-store-badge.boosted { background: var(--red); }
/* Quiet shop affordance — slides up on hover, never competes with the logo */
.sp-store-shop-ov {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 8px 10px; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--cream);
  background: linear-gradient(0deg, rgba(28,33,48,.78), rgba(28,33,48,0));
  opacity: 0; transform: translateY(6px); transition: opacity .16s, transform .16s;
  pointer-events: none;
}
.sp-store-tile:hover .sp-store-shop-ov { opacity: 1; transform: translateY(0); }
.sp-store-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.sp-store-name {
  font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* A store tile's name is its link for the keyboard and screen readers (a tile that was itself a link held the heart
   button, which a link can't contain); the tile around it still opens the store for a mouse or a tap. Shopping + Favorites. */
a.sp-store-link { display: block; }
a.sp-store-link:hover, a.sp-store-link:focus-visible { text-decoration: underline; }
.sp-store-rate { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.sp-store-rate-upto { font-size: 11px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .03em; }
.sp-store-rate-was { font-size: 11px; color: var(--ink-3); text-decoration: line-through; }
.sp-store-rate-n   { font-size: 14px; font-weight: 900; color: var(--green); letter-spacing: -.02em; }
.sp-store-rate-n.boosted { color: var(--red); }
.sp-store-rate-arrow { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.sp-store-rate-lbl { font-size: 11.5px; color: var(--ink-2); font-weight: 700; }
/* Phones: three small logo tiles across (rails: about three and a half in view), like the big cashback apps —
   a single-column grid made every logo screen-wide. */
@media (max-width: 680px) {
  .sp-store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .sp-store-tile { gap: 6px; }
  .sp-store-tile.row { width: 112px; }
  .sp-store-logo-tile { border-radius: 10px; }
  .sp-store-name { font-size: 12px; }
  .sp-store-rate-n { font-size: 13px; }
  .sp-store-rate-lbl, .sp-store-rate-upto { font-size: 10.5px; }
  .sp-store-badge { top: 5px; left: 5px; font-size: 7.5px; padding: 2px 5px; }
  /* The heart covered the end of a wide logo on a tile this small ("FINISH LI", "priceli"; 2026-10-20): a smaller heart
     tucked into the corner, and the logo kept in a narrower box clear of it (the logo's size is set inline,
     FfuMerchantLogo, so this one rule overrides it) */
  .sp-fave-btn.tile { top: 4px; right: 4px; width: 20px; height: 20px; }
  .sp-fave-btn.tile svg { width: 11px; height: 11px; }
  .sp-store-logo-tile .ffu-mlogo[data-fill="1"] img { width: 56% !important; height: 58% !important; }
}

/* ════════════ FOCUSED PROMO CARD (Tier 2 — selective, paid) ════════════ */
.sp-focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sp-focus-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; position: relative;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.sp-focus-card:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: var(--line-s); }
.sp-focus-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-focus-line {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-focus-rate { font-size: 14px; font-weight: 900; color: var(--green); }
.sp-focus-cta {
  flex-shrink: 0; background: var(--navy); color: var(--cream);
  padding: 10px 16px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .03em; min-height: 40px; display: flex; align-items: center;
  white-space: nowrap; transition: background .13s;
}
.sp-focus-card:hover .sp-focus-cta { background: var(--red); }
.sp-focus-boosted-badge {
  position: absolute; top: -8px; left: 14px; background: var(--red); color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
@media (max-width: 560px) { .sp-focus-grid { grid-template-columns: 1fr; } .sp-focus-card { flex-wrap: wrap; } }

/* ════════════ BOOSTED DEAL CARD — brand-first, Was→Now rate, peekable row (Tier 2) ════════════ */
.sp-bdc-card {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; flex: 0 0 29%; display: flex; flex-direction: column; gap: 11px;
  cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s;
}
.sp-bdc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--line-s); }
.sp-bdc-brand { display: flex; align-items: center; gap: 13px; }
.sp-bdc-brand-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-bdc-pill {
  align-self: flex-start; background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; padding: 2.5px 8px; border-radius: 999px;
}
.sp-bdc-name { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The rate under the store's name (offer-led card, 2026-10-20: it was the card's biggest line) */
.sp-bdc-rate-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.sp-bdc-was { font-size: 12px; color: var(--ink-3); text-decoration: line-through; }
.sp-bdc-arrow { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.sp-bdc-now { font-size: 16px; font-weight: 900; color: var(--red); letter-spacing: -.02em; }
.sp-bdc-lbl { font-size: 12px; color: var(--ink-2); font-weight: 700; }
/* The offer is the headline: two lines, so "…up to 30% off with Samsung's Education Offers" isn't cut mid-word. A
   two-line height is kept for a one-line offer, so the buttons line up across the row. */
.sp-bdc-headline {
  margin: 2px 0 0; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
  min-height: calc(2em * 1.3); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-bdc-actions { display: flex; align-items: stretch; gap: 8px; margin-top: 4px; }
.sp-bdc-cta {
  flex: 1; min-width: 0; text-align: center; background: var(--navy); color: var(--cream);
  padding: 11px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.25;
  transition: background .13s;
}
.sp-bdc-card:hover .sp-bdc-cta { background: var(--red); }
.sp-bdc-cta.copied { background: var(--green); }
.sp-bdc-share {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(28,33,48,.06); color: var(--ink-3); border: none; transition: background .13s, color .13s;
}
.sp-bdc-share:hover { background: var(--red-soft, rgba(230,57,57,.12)); color: var(--red); }
/* "Ends in …" and the code under the headline (offer-led card): readable chips, not the 9px code it was. The row keeps
   its height when empty, so the buttons line up across the row. */
.sp-bdc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:26px}
.sp-bdc-timer{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);background:color-mix(in srgb, var(--yellow) 18%, transparent)}
.sp-bdc-timer.hot{color:var(--red);background:var(--red-soft)}
.sp-bdc-code{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--ink);background:var(--yellow-s);border:1px dashed rgba(249,157,32,.55)}
.sp-bdc-foot{display:flex;align-items:center;margin-top:2px}
.sp-bdc-see-all{font-size:11px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:color .13s}
.sp-bdc-see-all:hover{color:var(--red);text-decoration:underline}
@media (max-width: 680px) { .sp-bdc-card { flex-basis: 82%; padding: 16px; } .sp-bdc-name { font-size: 15.5px; } .sp-bdc-now { font-size: 15px; } .sp-bdc-headline { font-size: 15.5px; } }

/* ════════════ HERO DEAL — secondary CTA ════════════ */
.sp-deal-see-all {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55);
  text-decoration: none; transition: color .13s;
}
.sp-deal-see-all:hover { color: #fff; text-decoration: underline; }

/* ════════════ HORIZONTAL SCROLL ROW ════════════ */
.sp-hrow-wrap { position: relative; }
.sp-hrow {
  display: flex; gap: 14px; align-items: stretch;
  overflow-x: auto; overflow-y: visible;
  padding: 4px 4px 18px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sp-hrow::-webkit-scrollbar { display: none; }
.sp-hrow > * { flex-shrink: 0; scroll-snap-align: start; }
.sp-hrow-nav {
  position: absolute; top: 50%; transform: translateY(-60%); z-index: 10;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--white); border: 1.5px solid var(--line-s);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); box-shadow: var(--sh); cursor: pointer;
  transition: background .13s, color .13s, transform .15s;
}
.sp-hrow-nav:hover { background: var(--navy); color: var(--cream); transform: translateY(-60%) scale(1.06); }
.sp-hrow-nav-left  { left: -18px; }
.sp-hrow-nav-right { right: -18px; }
/* Touch rails scroll natively; edge-floating arrows would add sideways page scroll */
@media (max-width: 620px) { .sp-hrow-nav { display: none; } }
/* Fixed widths for row-mode cards */
.sp-card.sp-card-row       { width: 276px; }
.sp-trend-card.sp-card-row { width: 276px; }

/* ════════════ TOP 10 CARD ════════════ */
.sp-top10-card {
  width: 242px; flex-shrink: 0; position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  display: flex; flex-direction: column;
}
.sp-top10-card:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.sp-top10-rank {
  position: absolute; top: 0; left: 0; z-index: 1;
  background: var(--navy); color: var(--cream);
  font-size: 19px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  padding: 7px 10px; border-radius: 0 0 var(--r) 0;
  font-variant-numeric: tabular-nums;
}
.sp-top10-rank.gold   { background: var(--yellow); color: var(--navy); }
.sp-top10-rank.silver { background: #9aa0ac;        color: #fff; }
.sp-top10-rank.bronze { background: #b8834a;        color: #fff; }
.sp-top10-body { padding: 46px 18px 16px; flex: 1; }
.sp-top10-logo {
  width: 42px; height: 42px; border-radius: 10px; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff;
}
.sp-top10-name  { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.sp-top10-rate  { font-size: 18px; font-weight: 900; color: var(--green); letter-spacing: -.02em; line-height: 1; }
.sp-top10-rate span { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.sp-top10-shoppers {
  margin-top: 5px; display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3);
}
.sp-top10-btn {
  display: block; width: calc(100% - 28px); margin: 0 14px 16px;
  background: var(--navy); color: var(--cream);
  padding: 11px 0; border-radius: 999px; border: none; cursor: pointer;
  min-height: 44px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .03em; text-align: center; transition: background .13s;
}
.sp-top10-btn:hover { background: var(--red); }

/* ════════════ HOT DEAL CARDS ════════════ */
.sp-hotdeal-card {
  width: 272px; flex-shrink: 0; position: relative;
  background: var(--navy-2);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.sp-hotdeal-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: rgba(255,255,255,.16); }
.sp-hotdeal-card.urgent {
  border-color: rgba(225,39,39,.40);
  border-top: 2px solid var(--red);
  background: linear-gradient(160deg, #1d1218 0%, var(--navy-2) 60%);
}
.sp-hotdeal-top {
  padding: 16px 16px 10px;
  display: flex; align-items: flex-start; gap: 12px;
}
.sp-hotdeal-logo {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff; letter-spacing: -.01em;
}
.sp-hotdeal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-hotdeal-badge {
  font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; display: inline-block; align-self: flex-start;
}
.sp-hotdeal-badge.red    { background: rgba(225,39,39,.22);  color: #ff8a8a; border: 1px solid rgba(225,39,39,.30); }
.sp-hotdeal-badge.navy   { background: rgba(255,255,255,.09); color: rgba(242,228,177,.65); border: 1px solid rgba(255,255,255,.12); }
.sp-hotdeal-badge.green  { background: rgba(24,160,96,.18);  color: #4de0a0; border: 1px solid rgba(24,160,96,.28); }
.sp-hotdeal-badge.yellow { background: rgba(249,157,32,.15); color: var(--yellow); border: 1px solid rgba(249,157,32,.28); }
.sp-hotdeal-store {
  font-size: 16px; font-weight: 900;
  color: rgba(242,228,177,.92); letter-spacing: -.02em;
}
.sp-hotdeal-body {
  padding: 0 16px 18px;
  flex: 1; display: flex; flex-direction: column; gap: 12px;
}
.sp-hotdeal-title {
  font-size: 13.5px; font-weight: 800; color: var(--cream);
  letter-spacing: -.01em; line-height: 1.22; text-wrap: balance;
}
.sp-hotdeal-rate {
  font-size: 24px; font-weight: 900; color: var(--yellow);
  letter-spacing: -.02em; line-height: 1;
}
.sp-hotdeal-rate span { font-size: 10.5px; font-weight: 600; color: rgba(242,228,177,.38); }
.sp-hotdeal-rate-was {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.26);
  text-decoration: line-through;
}
.sp-hotdeal-cd {
  background: rgba(0,0,0,.25); border-radius: 8px; padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.sp-hotdeal-cd.urgent { background: rgba(225,39,39,.14); }
.sp-hotdeal-cd-lbl {
  font-size: 8.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(242,228,177,.35); white-space: nowrap; line-height: 1; margin-bottom: 3px;
}
.sp-hotdeal-cd-time {
  font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; color: var(--cream); white-space: nowrap; line-height: 1;
}
.sp-hotdeal-cd.urgent .sp-hotdeal-cd-time { color: #ff8a8a; }
.sp-hotdeal-cd-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  animation: dot-pulse 1.8s ease-in-out infinite;
}
.sp-hotdeal-cd:not(.urgent) .sp-hotdeal-cd-dot { background: #22c582; }
.sp-hotdeal-cd.urgent .sp-hotdeal-cd-dot { background: var(--red); }
.sp-hotdeal-actions {
  display: flex; align-items: center; gap: 7px; margin-top: auto;
}
.sp-hotdeal-shop-btn {
  flex: 1; background: var(--red); color: var(--cream);
  padding: 11px 0; border-radius: 999px; border: none; cursor: pointer;
  min-height: 44px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-align: center; transition: background .13s; box-shadow: 0 2px 0 var(--red-deep);
}
.sp-hotdeal-shop-btn:hover { background: var(--red-deep); }

/* ════════════ NOTIFY BUTTON ════════════ */
.sp-notify-btn {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08); color: rgba(242,228,177,.42);
  transition: background .13s, color .13s, transform .14s, border-color .13s;
}
.sp-notify-btn:hover {
  background: rgba(255,255,255,.17); color: var(--cream);
  transform: scale(1.08); border-color: rgba(255,255,255,.26);
}
.sp-notify-btn.active {
  background: rgba(249,157,32,.16); border-color: rgba(249,157,32,.38);
  color: var(--yellow);
}
.sp-notify-btn.active:hover { background: rgba(249,157,32,.26); }
.sp-notify-btn svg { display: block; transition: fill .15s; }

/* ═══════════════════════════════════════════════════════════════
   ALL STORES PAGE  (sas- prefix)
   ═══════════════════════════════════════════════════════════════ */

.sas-page { display:flex; flex-direction:column; gap:20px; }

/* ── Sponsored / Featured Strip ── */
.sas-sponsored-strip {
  background:var(--navy-2); border-radius:var(--r-xl);
  padding:18px 22px 22px; position:relative; overflow:hidden;
}
.sas-sponsored-strip::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    -60deg, transparent 0, transparent 28px,
    rgba(255,255,255,.016) 28px, rgba(255,255,255,.016) 29px);
}
.sas-sponsored-label {
  display:flex; align-items:center; gap:6px;
  font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,228,177,.40); margin-bottom:14px; position:relative; z-index:1;
}
.sas-sponsored-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  position:relative; z-index:1;
}
@media (max-width:760px) { .sas-sponsored-row { grid-template-columns:1fr; } }

.sas-feat-card {
  border-radius:var(--r-lg); padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:10px; position:relative;
  overflow:hidden; cursor:pointer; min-height:188px;
  transition:transform .17s, box-shadow .17s;
}
.sas-feat-card:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.30); }
.sas-feat-sponsor-tag {
  position:absolute; top:10px; right:10px;
  font-size:8px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:rgba(255,255,255,.38); background:rgba(255,255,255,.08);
  padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
}
.sas-feat-name {
  font-size:17px; font-weight:900; color:rgba(255,255,255,.92);
  letter-spacing:-.02em; line-height:1;
}
.sas-feat-rate {
  font-size:28px; font-weight:900; color:var(--yellow); letter-spacing:-.02em; line-height:1;
}
.sas-feat-rate span { font-size:12px; font-weight:600; color:rgba(242,228,177,.42); }
.sas-feat-msg {
  font-size:12px; color:rgba(255,255,255,.50); line-height:1.42; flex:1; margin:0;
}
.sas-feat-cta {
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.22);
  color:var(--cream); padding:9px 16px; border-radius:999px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.04em;
  cursor:pointer; transition:background .12s;
}
.sas-feat-card:hover .sas-feat-cta { background:rgba(255,255,255,.22); }

/* ── A category page's sort bar (categoryViewHtml): the sorts (the deck's mode rail) and the store count ── */
.sas-filterbar {
  background:var(--navy-3); border-radius:var(--r-xl); overflow:hidden;
}
.sas-filterbar-inner { padding:12px 16px; display:flex; flex-direction:column; gap:10px; }
.sas-filter-row1 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sas-results-count {
  display:flex; align-items:baseline; gap:3px; flex-shrink:0; margin-left:auto;
}
.sas-results-n { font-size:18px; font-weight:900; color:var(--cream); letter-spacing:-.02em; }
.sas-results-lbl { font-size:11px; font-weight:600; color:rgba(242,228,177,.65); }
@media (max-width:760px) { .sas-results-count { margin-left:0; } }

/* ── All Stores' search and filters (allStoresDeckHtml): the Deals page's deck below, across the full width from inside
   the page column. Its colour is painted past the sides by a border image (outside the box, so no sideways scroll), not
   the zones' clipped shadow: the clip cut off the "More" categories menu that hangs below the deck ── */
.dls-disco.sas-disco { border:none; border-image:linear-gradient(#2a303e, #2a303e) fill 0 / 0 / 0 100vmax; }
.sas-disco .dls-disco-inner { padding-left:0; padding-right:0; }
/* Flush under the category bar when it opens the page: no Featured Deals above it (and not under the extension banner) */
.sp-main > .sas-page:first-child > .sas-disco:first-child { margin-top:-32px; }
@media (max-width:560px) { .sp-main > .sas-page:first-child > .sas-disco:first-child { margin-top:-20px; } }

/* ════════════ DISCOVERY DECK — intent headline + search + modes + filters ════════════
   Shared (2026-10-21): the Deals page's deck (deals-ui.js) and All Stores' filters (shopping-ui.js, .sas-disco) are one
   look, the owner's ask. Both pages load this file. */
.dls-disco{position:relative;background:#2a303e;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(0,0,0,.28)}
.dls-disco-inner{position:relative;max-width:var(--sp-maxw,1360px);margin:0 auto;padding:30px 28px 22px;display:flex;flex-direction:column;gap:16px}
.dls-disco-head{display:flex;flex-direction:column;gap:5px}
.dls-disco-ey{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.dls-disco-h2{margin:0;font-size:30px;font-weight:900;line-height:1.08;letter-spacing:-.01em;color:var(--cream);animation:dlsHeadIn .28s ease}
@keyframes dlsHeadIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Lifted (2026-10-20): the module's options and labels were at 28–55% strength on the navy, so they read as switched
   off (about 3.5:1 for the chips, 2:1 for the cashback label). Text now at 65–90%, chips with real surfaces and
   outlines, and one solid look for what's selected: red for a category or mode, green for cashback. */
.dls-disco-sub{margin:0;font-size:13.5px;font-weight:500;color:rgba(242,228,177,.75)}
.dls-disco-sub strong{color:var(--yellow);font-weight:800}

.dls-disco-row1{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* The field sits in a wrapper that takes its place in the row: the field clips its rounded corners, so the store
   autocomplete (dls-suggest, the header search's .nav-srch-dropdown look) hangs from the wrapper instead */
.dls-search-field{position:relative;flex:1 1 360px;min-width:230px;max-width:600px}
.dls-search-wrap{display:flex;align-items:center;height:54px;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.22);border-radius:16px;overflow:hidden;transition:border-color .15s,box-shadow .15s,background .15s;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.dls-suggest-host .nav-srch-dropdown.dls-suggest{z-index:30;width:100%;min-width:0}
.dls-suggest-count{flex-shrink:0;font-size:12px;font-weight:800;color:var(--green)}
.dls-search-wrap:focus-within{border-color:rgba(225,39,39,.55);background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(225,39,39,.12),0 10px 30px rgba(0,0,0,.22)}
.dls-search-icon{padding:0 10px 0 18px;color:rgba(242,228,177,.62);display:flex;align-items:center;flex-shrink:0;pointer-events:none}
.dls-search-input{flex:1;min-width:0;height:100%;background:none;border:none;outline:none;font-family:inherit;font-size:16px;/* 16px: iPhones zoom into smaller fields */font-weight:600;color:var(--cream);caret-color:var(--red)}
.dls-search-input::placeholder{color:rgba(242,228,177,.68);font-weight:500}
.dls-search-clear{padding:0 14px;color:rgba(242,228,177,.55);display:flex;align-items:center;border:none;background:none;cursor:pointer;transition:color .12s;flex-shrink:0;height:100%}
.dls-search-clear:hover{color:rgba(242,228,177,.72)}

.dls-mode-rail{display:flex;align-items:stretch;gap:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:5px;flex-shrink:0}
.dls-mode-tab{display:flex;align-items:center;gap:8px;font-family:inherit;font-size:12.5px;font-weight:700;color:rgba(242,228,177,.9);background:transparent;border:none;padding:0 16px;height:44px;border-radius:12px;cursor:pointer;white-space:nowrap;transition:background .13s,color .13s}
.dls-mode-tab:hover{color:#fff;background:rgba(255,255,255,.10)}
.dls-mode-tab.primary{font-size:13.5px;font-weight:800;padding:0 18px}
.dls-mode-tab.active{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(225,39,39,.35)}
.dls-mode-tab.active:hover{background:var(--red);color:#fff}
.dls-mode-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:dlsPulse 1.6s ease-in-out infinite;flex-shrink:0}
.dls-mode-tab.active .dls-mode-dot{background:#fff}
.dls-mode-x{display:inline-flex;align-items:center;margin-left:2px;opacity:.85}
.dls-mode-coupons.active{background:#18a060;box-shadow:0 6px 18px rgba(24,160,96,.35)}
.dls-mode-coupons.active:hover{background:#18a060;color:#fff}
@keyframes dlsPulse{0%,100%{opacity:1}50%{opacity:.35}}

.dls-disco-row2{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.dls-cat-wrap{position:relative;display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.dls-cat-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:0 1 auto;min-width:0}
.dls-cat-pills::-webkit-scrollbar{display:none}
.dls-cat-pill{font-family:inherit;font-size:12px;font-weight:700;color:rgba(242,228,177,.9);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s,border-color .12s}
.dls-cat-pill:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff}
.dls-cat-pill.active{background:var(--red);border-color:var(--red);color:#fff;font-weight:800}
/* “More” control + full-category menu — all categories, alphabetical, without crowding the chip row */
.dls-cat-more{flex-shrink:0;display:inline-flex;align-items:center;gap:5px}
.dls-cat-more.open{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.dls-cat-more svg{transition:transform .15s}
.dls-cat-more.open svg{transform:rotate(180deg)}
.dls-cat-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:#232a3b;border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:14px;box-shadow:0 18px 48px rgba(0,0,0,.5);min-width:440px}
.dls-cat-menu-title{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,228,177,.65);margin-bottom:10px}
.dls-cat-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.dls-cat-menu-item{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:inherit;font-size:12px;font-weight:600;color:rgba(242,228,177,.88);background:transparent;border:1px solid transparent;border-radius:8px;padding:7px 10px;cursor:pointer;text-align:left;white-space:nowrap}
.dls-cat-menu-item:hover{background:rgba(255,255,255,.07);color:var(--cream)}
.dls-cat-menu-item.active{background:var(--red);border-color:var(--red);color:#fff;font-weight:800}
.dls-cat-menu-check{font-size:11px;font-weight:800}
@media(max-width:640px){.dls-cat-menu{left:0;right:0;min-width:0}.dls-cat-menu-grid{grid-template-columns:repeat(2,1fr)}.dls-cat-menu-item{white-space:normal}}

.dls-cb-group{display:flex;align-items:center;gap:9px;flex-shrink:0;margin-left:auto}
.dls-cb-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,228,177,.65);white-space:nowrap}
.dls-cb-seg{display:flex;gap:2px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:3px}
.dls-cb-pill{font-family:inherit;font-size:11.5px;font-weight:700;color:rgba(242,228,177,.9);background:transparent;border:none;padding:5px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.dls-cb-pill:hover{color:#fff;background:rgba(255,255,255,.10)}
.dls-cb-pill.active{background:var(--green);color:#fff}

@media (max-width: 800px){
  .dls-disco-inner{padding:22px 16px 16px;gap:14px}
  .dls-disco-h2{font-size:23px}
  .dls-mode-rail{width:100%;overflow-x:auto;scrollbar-width:none}
  .dls-mode-tab{flex:1;justify-content:center}
  .dls-cb-group{margin-left:0;width:100%;justify-content:space-between}
}
@media (max-width: 560px){
  .dls-disco-h2{font-size:21px}
  .dls-search-field{max-width:100%;flex-basis:100%}
  .dls-search-wrap{height:50px}
  .dls-cb-group{flex-wrap:wrap;row-gap:6px}
  .dls-cb-pill{padding:5px 9px;font-size:11px}
}

/* The deck on phones and touch screens (Deals and All Stores) */
/* Browse modes wrap instead of scrolling a hidden-scrollbar row ("Cupones y Promos" fell out of view) */
@media (max-width: 800px) {
  .dls-mode-rail { flex-wrap: wrap; overflow: visible; }
  .dls-mode-tab { flex: 1 1 auto; }
}
/* Phone (2026-10-20): the four modes as an even 2 × 2 (they wrapped 3 + 1, three widths and Coupons stretched across a
   row), one size; the category chips scroll under a fade, so a chip cut by "More" reads as "more this way" */
@media (max-width: 640px) {
  .dls-mode-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dls-mode-tab, .dls-mode-tab.primary { justify-content: center; height: 42px; padding: 0 8px; font-size: 13px; }
  .dls-cat-pills {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 22px;
  }
}
/* Touch screens: larger tap areas for the filter pills */
@media (pointer: coarse) { .dls-cat-pill, .dls-cb-pill { min-height: 36px; } }

/* ── Alphabet Jump Nav ── */
/* Sticks under the sticky nav and category bar (--sp-sticky-top, measured by renderView), so any letter is one tap away
   however long the list: All Stores' directory may grow to 2,000 stores */
.sas-alpha-nav {
  display:flex; gap:3px; flex-wrap:wrap; padding:8px 0;
  position:sticky; top:var(--sp-sticky-top, 120px); z-index:50; background:var(--paper); border-bottom:1px solid var(--line);
}
.sas-alpha-btn {
  font-family:inherit; font-size:12px; font-weight:700;
  width:30px; height:30px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; transition:background .12s, color .12s;
}
.sas-alpha-btn.has-stores { color:var(--ink-2); background:rgba(28,33,48,.07); }
.sas-alpha-btn.has-stores:hover { background:var(--red-soft); color:var(--red); }
.sas-alpha-btn.empty {
  color:rgba(28,33,48,.18); background:transparent;
  cursor:default; pointer-events:none;
}

/* ── Grid area + letter sections ── */
.sas-grid-area { display:flex; flex-direction:column; gap:24px; }

.sas-alpha-section { }
.sas-alpha-head {
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:4px 0 10px;
  border-bottom:2px solid var(--line); margin-bottom:12px;
}
.sas-alpha-head-count {
  font-size:10px; font-weight:600; color:var(--ink-3); letter-spacing:0;
  background:rgba(28,33,48,.07); border-radius:999px; padding:2px 7px;
}

/* ── All Stores' A–Z directory (directoryRowHtml): one slim row per store, four columns, so 2,000 stores read as an
   index, not a sea of cards (owner's review, 2026-10-21). The ranked sorts show the store cards (.sp-store-grid). ── */
/* minmax(0,…): a long store name can't widen its column (1fr won't shrink below its content — sideways page scroll) */
.sas-dir-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 20px; }
@media (max-width:1100px) { .sas-dir-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px)  { .sas-dir-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px)  { .sas-dir-grid { grid-template-columns:minmax(0,1fr); } }
.sas-dir-row {
  display:flex; align-items:center; gap:12px; min-height:66px; padding:8px 8px;
  border-bottom:1px solid var(--line); border-radius:8px; cursor:pointer; transition:background .12s;
}
.sas-dir-row:hover { background:var(--white); }
/* One slot for every logo, a square mark or a wordmark's wide plate (48px tall: legible), so the names line up */
.sas-dir-logo { width:104px; flex-shrink:0; display:flex; align-items:center; }
.sas-dir-name {
  flex:1; min-width:0; font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.2; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sas-dir-rate { flex-shrink:0; font-size:14px; font-weight:900; color:var(--green); letter-spacing:-.02em; white-space:nowrap; }
.sas-dir-rate.boosted { color:var(--red); }
/* "Up to" before a tiered rate (All Stores' directory, Top Offers cards) */
.sas-dir-upto, .sp-bdc-upto { font-size: .6em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
/* The ranked sorts' "Show more": the next 48 cards */
.sas-more-btn {
  display:block; margin:20px auto 0; font-family:inherit; font-size:13px; font-weight:700; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:999px; padding:10px 22px; min-height:44px; cursor:pointer;
}
.sas-more-btn:hover { border-color:var(--navy); }

.sas-empty {
  text-align:center; padding:64px 32px;
  font-size:16px; color:var(--ink-3); font-weight:600;
}

/* Store catalog failed to load (shopping-data.js FfuCatalogStatus) — Shopping, Favorites, Merchant Detail. */
.ffu-catalog-unavailable {
  text-align:center; padding:56px 24px 60px; margin:24px auto; max-width:560px;
  background:var(--white); border:1.5px dashed rgba(28,33,48,.12); border-radius:var(--r-xl);
}
.ffu-catalog-unavailable-title { font-size:19px; font-weight:800; color:var(--ink); margin:0 0 8px; text-wrap:balance; }
.ffu-catalog-unavailable-body { font-size:14px; color:var(--ink-3); margin:0 auto 20px; max-width:380px; text-wrap:balance; }
.ffu-catalog-unavailable-retry {
  background:var(--navy); color:var(--cream); border:none; border-radius:999px;
  padding:0 24px; min-height:44px; font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .13s;
}
.ffu-catalog-unavailable-retry:hover { background:var(--red); }

/* ── Featured Partners on All Stores and a category (up to 3): the Featured Deals card at its carousel size (400px),
   one column on a phone. Stretched across the row, one card's photo band came out ~780px tall (2026-10-21). ── */
.sas-cat-deals-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 400px)); }

.sas-cat-deal-card {
  border-radius:var(--r-xl); overflow:hidden; position:relative;
  min-height:200px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px; cursor:pointer;
  transition:transform .2s, box-shadow .2s; box-shadow:var(--sh-lg);
  background:var(--navy);
}
.sas-cat-deal-card:hover {
  transform:translateY(-3px); box-shadow:0 12px 40px -8px rgba(28,33,48,.32);
}

.sas-placement-badge {
  position:absolute; top:10px; right:10px; z-index:5;
  font-size:8px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:rgba(255,255,255,.45); background:rgba(255,255,255,.10);
  padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.15);
}

/* sp-deal-pill.navy — was missing from original CSS */
.sp-deal-pill.navy { background:rgba(255,255,255,.14); color:rgba(255,255,255,.90); border:1px solid rgba(255,255,255,.22); }

/* ════════════ RETAILER CARD LAUNCH PLACEHOLDER ════════════ */
.sp-card-placeholder {
  font-size: 11px; color: var(--ink-3); font-style: italic;
  line-height: 1.35; padding: 2px 0;
}

/* ════════════ FAVORITES SAVED TAB ════════════ */
.sp-cat-count.fav { background: rgba(225,39,39,.10); color: var(--red); }
.sp-cat.sp-cat-saved { color: var(--red); opacity: .70; }
.sp-cat.sp-cat-saved:hover { opacity: 1; }
.sp-cat.sp-cat-saved.active { color: var(--red); border-bottom-color: var(--red); opacity: 1; }

/* Category filter — divider + Browse All button */
.sp-cat-divider {
  width: 1px; background: var(--line-s); align-self: stretch;
  margin: 8px 8px; flex-shrink: 0;
}
.sp-cat-browse-all-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 13px 16px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--red); white-space: nowrap; flex-shrink: 0;
  border: none; border-bottom: 3px solid transparent;
  background: none; cursor: pointer; letter-spacing: .01em;
  transition: color .14s, background .14s;
}
.sp-cat-browse-all-btn:hover,
.sp-cat-browse-all-btn.open { color: var(--red-deep); background: var(--red-soft); }
/* Leading "All Categories" trigger — sits first, next to Home, always visible */
.sp-cat-browse-all-lead {
  flex-shrink: 0; color: var(--red); font-weight: 800;
  gap: 6px; padding-left: 4px;
}
@media (max-width: 820px) { .sp-cat-browse-all-lead { padding: 9px 14px; } }

/* Browse All dropdown */
.sp-browse-dropdown {
  position: absolute; top: 100%; left: 28px; right: auto;
  background: var(--white);
  border: 1.5px solid var(--line-s);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 16px 40px -8px rgba(28,33,48,.18), 0 4px 12px rgba(28,33,48,.07);
  min-width: 240px;
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: min(520px, calc(100vh - 190px));
  z-index: 200;
  animation: dropdown-in .15s ease-out;
}
.sp-browse-dd-list { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.sp-browse-dd-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  background: none; border: none; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.sp-browse-dd-item:last-of-type { border-bottom: none; }
.sp-browse-dd-item:hover { background: var(--paper); color: var(--ink); }
.sp-browse-dd-item.active { background: var(--red-soft); color: var(--red); font-weight: 800; }
.sp-browse-dd-item.active .sp-browse-dd-count { background: rgba(225,39,39,.16); color: var(--red); }
.sp-browse-dd-head {
  padding: 9px 16px 7px; font-size: 10px; font-weight: 800; letter-spacing: .12em;
  color: var(--ink-3); text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.sp-browse-dd-label { flex: 1; }
.sp-browse-dd-count {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  background: rgba(28,33,48,.06); border-radius: 999px;
  padding: 2px 7px; white-space: nowrap;
}
.sp-browse-dd-sep { height: 1px; background: var(--line-s); }
.sp-browse-dd-all { flex-shrink: 0;
  width: 100%; padding: 11px 16px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--red); background: none; border: none; cursor: pointer;
  text-align: left; display: flex; align-items: center; gap: 6px;
  transition: background .12s;
}
.sp-browse-dd-all:hover { background: var(--red-soft); }

/* ════════════ FAVORITES SECTION ════════════ */
.sp-favorites-empty {
  text-align: center; padding: 60px 32px 68px;
  background: var(--white); border: 1.5px dashed rgba(28,33,48,.12);
  border-radius: var(--r-xl);
}
.sp-favorites-empty-icon {
  font-size: 44px; line-height: 1; margin-bottom: 14px;
  color: rgba(225,39,39,.22);
}
.sp-favorites-empty-text {
  font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 7px;
}
.sp-favorites-empty-sub {
  font-size: 13.5px; color: var(--ink-3); text-wrap: balance; max-width: 380px; margin: 0 auto;
}
.sp-favorites-group { }
.sp-favorites-group-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.sp-favorites-group-label::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.sp-favorites-deals-list { display: flex; flex-direction: column; gap: 8px; }
.sp-favorites-deal-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 12px 16px;
  cursor: pointer; transition: border-color .14s, box-shadow .14s;
}
.sp-favorites-deal-item:hover { border-color: var(--line-s); box-shadow: var(--sh-sm); }
.sp-favorites-deal-logo {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff; letter-spacing: -.01em;
}
.sp-favorites-deal-info { flex: 1; min-width: 0; }
.sp-favorites-deal-store {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1; margin-bottom: 3px;
}
.sp-favorites-deal-title {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-favorites-deal-rate {
  font-size: 16px; font-weight: 900; color: var(--green);
  letter-spacing: -.02em; flex-shrink: 0;
}

/* Inline fave button for favorites list rows */
.sp-fave-btn.fav-row {
  position: relative; top: auto; right: auto; box-shadow: none;
  background: none; color: rgba(28,33,48,.22);
  width: 28px; height: 28px; flex-shrink: 0;
}
.sp-fave-btn.fav-row:hover { color: var(--red); transform: scale(1.14); background: none; }
.sp-fave-btn.fav-row.active { color: var(--red); background: none; }

/* ════════════════ FAVORITES FAB ════════════════ */
.sp-fav-fab {
  position: fixed; bottom: 88px; right: 28px; z-index: 9000;
  display: flex; align-items: center; gap: 8px;
  background: var(--navy);
  border: 1.5px solid rgba(255,255,255,.16);
  color: var(--cream);
  padding: 11px 14px 11px 12px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.22);
  animation: fab-in .34s cubic-bezier(.34,1.56,.64,1) both;
  transition: background .15s, box-shadow .15s, transform .2s;
}
.sp-fav-fab:hover {
  background: var(--navy-2);
  box-shadow: 0 6px 28px rgba(0,0,0,.44);
  transform: translateY(-2px);
}
.sp-fav-fab-heart { color: #ff7272; flex-shrink: 0; }
.sp-fav-fab-label { /* inherits font */ }
.sp-fav-fab-count {
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
@keyframes fab-in {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sp-fav-fab.pulse { animation: fab-pulse .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes fab-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* Phones: no floating Favorites pill over the content — Favorites (with its count) is in the header menu. */
@media (max-width: 640px) {
  .sp-fav-fab { display: none; }
}

/* ════════════════ FAVORITES SECTION ENHANCEMENTS ════════════════ */
.sp-fav-total-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-soft); color: var(--red);
  font-size: 12px; font-weight: 800; letter-spacing: 0;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  vertical-align: middle;
}
.sp-fav-group-count {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  letter-spacing: 0; text-transform: none; margin-left: 2px;
}
/* Countdown badge in bookmarked promotions list */
.sp-fav-cd {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink-2); background: rgba(28,33,48,.06);
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.sp-fav-cd.urgent { color: var(--red); background: var(--red-soft); }

/* ════════════ DEAL SHARE BUTTON ════════════ */
.sp-deal-cta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.sp-share-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; cursor: pointer;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid transparent;
  transition: background .13s, border-color .13s, color .13s;
  white-space: nowrap;
}
.sp-share-trigger.compact { padding: 7px 8px; }

/* On full-bleed deal hero cards (dark bg image) */
.sp-share-deal {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.22);
  color: rgba(242,228,177,.62);
}
.sp-share-deal:hover, .sp-share-deal.open {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.34);
  color: var(--cream);
}

/* On promo module cards (dark bg) */
.sp-share-promo {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: rgba(242,228,177,.50);
}
.sp-share-promo:hover, .sp-share-promo.open {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.26);
  color: var(--cream);
}

/* On hot deal cards (light bg) */
.sp-share-hot {
  background: transparent;
  border-color: var(--line-s);
  color: var(--ink-3);
}
.sp-share-hot:hover, .sp-share-hot.open {
  background: var(--red-soft);
  border-color: rgba(225,39,39,.22);
  color: var(--red);
}

/* ── Share Popover ── */
.sp-share-popover {
  background: #fff;
  border: 1px solid rgba(28,33,48,.09);
  border-radius: 16px;
  box-shadow: 0 8px 40px -4px rgba(28,33,48,.22), 0 2px 10px rgba(28,33,48,.08);
  padding: 13px 14px 14px;
  width: 240px;
  animation: sp-share-in .16s cubic-bezier(.22,1,.36,1);
}
@keyframes sp-share-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sp-share-pop-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px;
}
.sp-share-pop-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-2);
}
.sp-share-pop-x {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); cursor: pointer; font-family: inherit; border: none; background: none;
  transition: background .1s, color .1s;
}
.sp-share-pop-x:hover { background: var(--paper); color: var(--ink); }

.sp-share-pop-actions {
  display: flex; gap: 4px;
}
.sp-share-action {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px 7px; border-radius: 10px; cursor: pointer;
  background: none; border: none; font-family: inherit;
  text-decoration: none; color: var(--ink);
  transition: background .12s;
}
.sp-share-action:hover { background: var(--paper); }
.sp-share-action.done { opacity: .75; }
.sp-share-action-sub { font-style: normal; font-weight: 600; color: var(--ink-3); }

.sp-share-action-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.sp-share-action:hover .sp-share-action-ico { transform: scale(1.09); }

.sp-share-action span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--ink-2); white-space: nowrap;
}

/* Wide logos (FfuMerchantLogo.isWide: a store whose square logo is a letterboxed wordmark) show their wordmark on a
   wider plate, the same height: the deal cards' logo chip and brand-row logo, and the hero's store plate */
.sp-dc-logo-chip.is-wide { width: 124px; max-width: calc(100% - 16px); border-radius: 16px; }
.sp-dc-logo-chip.is-wide img { width: 84%; height: 56%; }
.sp-dc .sp-dc-logo.is-wide, .sp-dc-photo-top > .sp-dc .sp-dc-logo.is-wide { width: 100px; }
.sp-dc .sp-dc-logo.is-wide img, .sp-dc-photo-top > .sp-dc .sp-dc-logo.is-wide.has-mark img { width: 86%; height: 62%; }
/* A logo-first card already shows the wide logo large in its panel: the name beside it gets the row (phones already
   drop that second logo for every card) */
.sp-dc.logo-first .sp-dc-brand .sp-dc-logo.is-wide { display: none; }
.sp-promo-brand-plate.is-wide, .sp-live-hero .sp-promo-brand-plate.is-wide { width: 140px; padding: 8px 12px; }
@media (max-width: 560px) {
  .sp-dc-logo-chip.is-wide { width: 92px; }
  .sp-dc-logo-chip.is-wide img { width: 84%; height: 56%; }
  .sp-live-hero .sp-promo-brand-plate.is-wide { width: 100px; padding: 6px 9px; }
}

/* ════════════ CONTINUE WHERE YOU LEFT OFF (shopping-ui.js recentSessionsHtml) ════════════
   Compact light cards like the team cards (the navy cards with a big red button each outweighed the hero): the store,
   when and its rate; the offer to go back for (its "Ends in …" and code), "Order tracked", or else the rate, large; a small "Shop again →"
   stretched over the card, so anywhere on it goes back to the store. */
.sp-resume-eyebrow {
  display: flex; align-items: center; gap: 6px;
}
.sp-resume-clear-all {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  font-family: inherit; cursor: pointer; border: none; background: none;
  padding: 5px 0; transition: color .13s; white-space: nowrap; flex-shrink: 0;
}
.sp-resume-clear-all:hover { color: var(--ink-2); }

/* Up to about five across: a short row stretches to fill (four cards left the right half empty), a long one scrolls */
.sp-resume-card {
  flex: 1 0 260px; max-width: 320px; position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border: 1px solid var(--line-s); border-radius: 14px;
  box-shadow: var(--sh-sm); padding: 12px 14px;
  transition: transform .16s, box-shadow .16s;
}
.sp-resume-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(28,33,48,.28); }
.sp-resume-card:has(.sp-resume-cta:focus-visible) { outline: 3px solid var(--red-soft); outline-offset: 2px; }

/* Dismiss ✕ (above the stretched Shop again; its tap area is the site-wide rule, site-base.css) */
.sp-resume-dismiss {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 999px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: pointer;
  transition: background .12s, color .12s;
}
.sp-resume-dismiss:hover { background: var(--line); color: var(--ink); }

/* The store, when, its rate */
.sp-resume-top { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 22px; }
.sp-resume-store-info { flex: 1; min-width: 0; }
.sp-resume-store-name {
  font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--ink); letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.sp-resume-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.sp-resume-rate { white-space: nowrap; } /* "Up to $300 cashback" moves down whole, not split over two lines */
.sp-resume-rate b { font-weight: 900; color: var(--green); }
.sp-resume-rate-was { color: var(--ink-3); text-decoration-color: var(--red); }

/* The offer to go back for: one or two lines, then "Ends in …" (the shared ending-soon window) and its code */
.sp-resume-offer { display: flex; flex-direction: column; gap: 6px; }
.sp-resume-offer-copy {
  margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-resume-new {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--green); background: var(--green-s);
}
.sp-resume-offer-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-resume-ends, .sp-resume-code {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.sp-resume-ends { color: var(--ink); background: color-mix(in srgb, var(--yellow) 18%, transparent); font-variant-numeric: tabular-nums; }
.sp-resume-ends.is-hot { color: var(--red); background: var(--red-soft); }
.sp-resume-code { color: var(--ink-2); border: 1px dashed var(--line-s); letter-spacing: .02em; }

/* An order came through from that trip */
.sp-resume-ordered {
  display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px;
  font-size: 12.5px; font-weight: 800; color: var(--green); background: var(--green-s);
}

/* No offer and no order: the rate, large, in the same slot */
.sp-resume-earn { display: flex; flex-direction: column; gap: 2px; }
.sp-resume-earn-rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.sp-resume-earn-rate b { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--green); }
.sp-resume-earn-rate .sp-resume-rate-was { font-size: 14px; }
.sp-resume-earn-upto { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sp-resume-earn-sub { font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* Shop again: a small link, stretched over the whole card */
.sp-resume-cta {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 0 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--red); cursor: pointer;
}
.sp-resume-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.sp-resume-card:hover .sp-resume-cta { text-decoration: underline; text-underline-offset: 3px; }
.sp-resume-cta:focus-visible { outline: none; }

/* A phone: wider cards, the next one peeking in */
@media (max-width: 560px) {
  .sp-resume-card { flex: 0 0 72vw; max-width: 300px; }
}

/* Right-edge peek fade — hints there are more session cards to scroll */
.sp-resume-section .sp-hrow-wrap::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 14px; width: 56px;
  background: linear-gradient(to right, transparent, var(--band-bg, var(--paper)));
  pointer-events: none; z-index: 5;
}
/* Only while there is more to the right (the scroll-right arrow shows): a short row fills the width, and the fade sat
   over the last card and its ✕ */
.sp-resume-section .sp-hrow-wrap:has(.sp-hrow-nav-right[hidden])::after { display: none; }

/* ════════════ SHARE TO BOOST MODAL ════════════ */
.sp-boost-backdrop {
  position: fixed; inset: 0; z-index: 9996;
  background: rgba(28,33,48,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
/* Fades in when it opens only: it redraws on Copy and on a template change, and the fade replayed each time */
.sp-boost-backdrop.is-entering { animation: boost-fade .15s ease-out; }
@keyframes boost-fade { from { opacity: 0; } to { opacity: 1; } }
.sp-boost-card {
  position: relative; width: 100%; max-width: 420px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 22px;
}
.sp-boost-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); background: var(--paper);
  transition: background .13s, color .13s;
}
.sp-boost-x:hover { background: var(--line); color: var(--ink); }

/* Success toast — floats above the header, confirms Copy Link */
.sp-boost-toast {
  position: fixed; top: 22px; left: 50%; transform: translate(-50%, -8px);
  display: flex; align-items: center; gap: 6px;
  background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 9px 16px; border-radius: 999px; box-shadow: var(--sh-lg);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  white-space: nowrap; z-index: 9998;
}
.sp-boost-toast svg { color: #22c582; flex-shrink: 0; }
.sp-boost-toast.show { opacity: 1; transform: translate(-50%, 0); }

.sp-boost-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-right: 28px; }
/* The deal share window (site-chrome.js ffuShare.offerSheet) shows the store's logo chip where this sheet shows the team's */
.ffu-offer-share-logo { flex-shrink: 0; display: flex; }
/* Its message carries the deal's full link: it wraps rather than running off the side */
.ffu-offer-share .sp-boost-tpl-preview { overflow-wrap: anywhere; }
.sp-boost-logo {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 900; letter-spacing: -.02em;
  box-shadow: var(--sh-sm);
}
.sp-boost-title { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.3; letter-spacing: -.01em; }
.sp-boost-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
/* The team's school under the title (TeamSchools) */
.sp-boost-school { font-size: 12.5px; font-weight: 700; color: var(--ink-3); margin-top: 2px; }

.sp-boost-linkrow { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.sp-boost-linkbox {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: 1.5px dashed var(--line-s); border-radius: 12px; background: var(--paper);
  padding: 0 14px; min-height: 56px; text-align: left;
}
.sp-boost-linkbox-url { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-boost-qr-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-boost-qr-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sp-boost-qr {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--line-s); display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 0; cursor: zoom-in; transition: border-color .13s, transform .1s, box-shadow .13s;
}
.sp-boost-qr:hover { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); transform: scale(1.03); }
.sp-boost-qr canvas { width: 100%; height: 100%; }

.sp-boost-qr-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(28,33,48,.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: boost-fade .16s ease-out;
}
.sp-boost-qr-modal {
  position: relative; background: #fff; border-radius: 20px; padding: 28px 30px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: var(--sh-lg);
}
.sp-boost-qr-modal canvas { width: 240px; height: 240px; border-radius: 8px; }
.sp-boost-qr-modal-lbl { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sp-boost-qr-modal-url { font-size: 13px; font-weight: 700; color: var(--ink); }

/* Prioritized action stack — Copy Link first & biggest, then Text, then Email */
.sp-boost-action-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.sp-boost-cta-copy, .sp-boost-cta-text, .sp-boost-cta-email {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 13px; font-weight: 800; text-align: center;
  transition: background .13s, border-color .13s, transform .1s, box-shadow .13s;
}
.sp-boost-cta-copy:active, .sp-boost-cta-text:active, .sp-boost-cta-email:active { transform: scale(.98); }

.sp-boost-cta-copy {
  min-height: 62px; font-size: 16.5px; letter-spacing: -.01em;
  background: var(--red); color: #fff; border: none;
  box-shadow: 0 3px 0 var(--red-deep), var(--sh-red);
  margin-bottom: 2px;
}
.sp-boost-cta-copy:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: 0 4px 0 var(--red-deep), var(--sh-red); }
.sp-boost-cta-copy.done { background: var(--green); box-shadow: 0 3px 0 #128052; }

.sp-boost-cta-text {
  position: relative;
  min-height: 56px; font-size: 14.5px; color: var(--ink);
  background: var(--green-s); border: 1.5px solid rgba(24,160,96,.35); color: #0f6e42;
}
.sp-boost-cta-text:hover { border-color: var(--green); background: rgba(24,160,96,.17); }

.sp-boost-tt {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
  box-shadow: var(--sh-sm); z-index: 2;
}
.sp-boost-tt::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.sp-boost-cta-text:hover .sp-boost-tt,
.sp-boost-cta-text:focus-visible .sp-boost-tt { opacity: 1; transform: translateX(-50%) translateY(0); }

.sp-boost-cta-email {
  min-height: 52px; font-size: 13.5px; color: var(--ink-2);
  background: #fff; border: 1.5px solid var(--line-s);
}
.sp-boost-cta-email:hover { border-color: var(--ink-2); color: var(--ink); }

.sp-boost-social { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; position: relative; }
.sp-boost-social-btn {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-s); transition: border-color .13s, transform .1s, background .13s;
}
.sp-boost-social-btn:hover { border-color: currentColor; }
.sp-boost-social-btn:active { transform: scale(.94); }
.sp-boost-social-btn.done { background: var(--green-s); border-color: var(--green); color: var(--green) !important; }
.sp-boost-ig-hint { font-size: 11px; font-weight: 600; color: var(--ink-2); }

.sp-boost-tpls { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 14px; }
.sp-boost-tpls-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 9px; }
.sp-boost-tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sp-boost-tpl-chip {
  padding: 7px 12px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--paper);
  transition: border-color .13s, background .13s, color .13s, transform .1s;
}
.sp-boost-tpl-chip:hover { border-color: var(--line-s); color: var(--ink-2); }
.sp-boost-tpl-chip.active { border-color: var(--red); background: var(--red); color: #fff; box-shadow: var(--sh-red); transform: translateY(-1px); }
.sp-boost-tpl-preview {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
  background: var(--paper); border-radius: 10px; padding: 11px 13px;
  border-left: 3px solid var(--red-soft);
}

.sp-boost-fullhub {
  display: block; text-align: center; font-size: 12.5px; font-weight: 700;
  color: var(--ink-3); padding-top: 4px;
}
.sp-boost-fullhub:hover { color: var(--red); text-decoration: underline; }

@media (max-width: 560px) {
  .sp-boost-backdrop { align-items: flex-end; padding: 0; }
  .sp-boost-card {
    max-width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; max-height: 92dvh; overscroll-behavior: contain;
    padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
  }
  /* The handle and the slide up are the shared sheet's (site-base.css .ffu-sheet-*) */
  .sp-boost-x { top: 14px; }
  .sp-boost-qr { display: none; }
  .sp-boost-qr-wrap { display: none; }
  .sp-boost-linkbox { min-height: 52px; }
  .sp-boost-cta-copy { min-height: 60px; font-size: 16px; }
  .sp-boost-cta-text { min-height: 60px; font-size: 15.5px; }
  .sp-boost-cta-email { min-height: 54px; font-size: 14px; }
  .sp-boost-social-btn { width: 46px; height: 46px; }
}

/* QR stays visible on tablet & desktop; only phones drop it */
@media (min-width: 561px) and (max-width: 680px) {
  .sp-boost-card { max-width: 460px; }
}

/* ── Outbound Interstitial ── */
.sp-oi-backdrop{position:fixed;inset:0;background:rgba(12,16,28,.62);backdrop-filter:blur(3px);z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;animation:spOiFade .18s ease}
@keyframes spOiFade{from{opacity:0}to{opacity:1}}
.sp-oi-card{background:#fff;border-radius:18px;width:min(450px,100%);position:relative;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35);animation:spOiPop .22s cubic-bezier(.2,.9,.3,1.2);font-family:inherit}
@keyframes spOiPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.sp-oi-head{position:relative;background:linear-gradient(135deg,#1C2130 0%,#252c3d 100%);padding:20px 48px 18px 26px;border-top:4px solid var(--red,#e12727)}
.sp-oi-head-deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sp-oi-head-ey{position:relative;font-size:10px;font-weight:800;letter-spacing:.14em;color:#F2E4B1;opacity:.85;text-transform:uppercase;margin-bottom:7px}
.sp-oi-head-title{position:relative;margin:0;font-size:21px;font-weight:900;line-height:1.18;color:#fff;letter-spacing:-.01em;text-wrap:pretty}
.sp-oi-head-title em{font-style:normal;color:#F2E4B1}
.sp-oi-x{position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-oi-x:hover{background:rgba(255,255,255,.22);color:#fff}
.sp-oi-body{padding:18px 26px 22px}
.sp-oi-brand{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.sp-oi-logo{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.07);overflow:hidden;flex-shrink:0}
.sp-oi-logo img{width:70%;height:70%;object-fit:contain}
.sp-oi-logo-initials{font-weight:900;color:#fff;font-size:16px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.sp-oi-name{font-size:19px;font-weight:800;color:#151a26}
.sp-oi-rate{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.sp-oi-rate-boost{align-self:center;font-size:9.5px;font-weight:900;letter-spacing:.08em;background:rgba(225,39,39,.1);color:var(--red,#e12727);border-radius:5px;padding:3px 6px}
.sp-oi-rate-upto{font-size:11px;font-weight:800;letter-spacing:.06em;color:#66707f;text-transform:uppercase}
.sp-oi-rate-was{font-size:15px;color:#9aa1ad;font-weight:700}
.sp-oi-rate-arrow{color:#9aa1ad;font-weight:700}
.sp-oi-rate-now{font-size:25px;font-weight:900;color:#18a060;line-height:1}
.sp-oi-rate-lbl{font-size:13px;color:#66707f;font-weight:600}
.sp-oi-code{display:flex;align-items:center;gap:10px;background:#f5f6f9;border:1.5px dashed #c9ceda;border-radius:11px;padding:10px 12px;margin-bottom:12px}
.sp-oi-code-val{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:14px;color:#151a26;letter-spacing:.04em}
.sp-oi-code-note{font-size:11.5px;color:#66707f;flex:1;line-height:1.35}
.sp-oi-code-copy{border:none;background:#e8eaf0;border-radius:7px;padding:5px 10px;font-size:11px;font-weight:800;cursor:pointer;color:#333c4e;font-family:inherit;flex-shrink:0}
.sp-oi-code-copy.copied{background:#18a060;color:#fff}
.sp-oi-team{display:flex;align-items:center;gap:9px;background:rgba(225,39,39,.07);border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:700;color:#8f1f1f;margin-bottom:10px;line-height:1.4}
.sp-oi-terms{font-size:11.5px;color:#7c8493;line-height:1.45;margin-bottom:15px}
.sp-oi-terms a{color:#66707f;font-weight:700;text-decoration:underline}
.sp-oi-terms a:hover{color:#151a26}
.sp-oi-continue{width:100%;border:none;border-radius:11px;background:var(--red,#e12727);color:#fff;font-weight:800;font-size:14.5px;padding:13px 16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;transition:filter .15s}
.sp-oi-continue:hover{filter:brightness(1.08)}
.sp-oi-continue:disabled{opacity:.75;cursor:default}
.sp-oi-details{display:block;text-align:center;margin-top:11px;font-size:12.5px;font-weight:700;color:#66707f;text-decoration:none}
.sp-oi-details:hover{color:#151a26;text-decoration:underline}
/* Brand-name links inside deal cards → Merchant Details */
a.sp-dc-brand{color:inherit;text-decoration:none}
a.sp-dc-brand:hover .sp-dc-name{text-decoration:underline}


/* ── Standardized deal urgency ──
   RATE BOOST header strip = strong red treatment, reserved for time-critical modules (Ending Soon cards & tiles, ≤7d).
   Promo/code countdown = labeled chip in the card body near the code. */
.dls-boost-strip{background:var(--red);color:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 14px;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;flex-shrink:0}
.dls-boost-strip>span:first-child{white-space:nowrap}
.dls-bs-time{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-transform:none;white-space:nowrap}
.dls-boost-soft{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--yellow-d);white-space:nowrap}
.dls-boost-quiet{font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
/* sp-dc cards are a horizontal flex row — pin the strip as an absolute full-width header
   and push both columns down so it reads as a thin top band, not a left column. */
.sp-dc{position:relative}
/* Featured (sp-dc) reserved boost slot — ALWAYS rendered at fixed height so boosted and
   non-boosted cards share identical geometry: logo row, rate row, copy and CTA all align.
   ≤7d boost → compact pill + labeled countdown (≤48h = filled pill) · 8–14d soft note ·
   >14d quiet date · no boost → empty spacer. No full-bleed red header in Featured Deals. */
.sp-dc-topslot{height:20px;flex-shrink:0;display:flex;align-items:center;gap:7px;padding-right:64px;overflow:hidden;white-space:nowrap}
.sp-dc-boost-pill{display:inline-block;background:rgba(225,39,39,.08);color:var(--red);border:1px solid rgba(225,39,39,.28);border-radius:999px;padding:4px 7px 3px;font-size:9.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sp-dc-topslot .dls-boost-soft,.sp-dc-topslot .dls-boost-quiet{font-size:10px}
.sp-dc-topslot.hot .sp-dc-boost-pill{background:var(--red);border-color:var(--red);color:#fff}
.dls-promo-count{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--yellow-d);background:var(--yellow-s);border:1px dashed rgba(249,157,32,.42);border-radius:999px;padding:3px 8px;white-space:nowrap}

/* ── Help Center chrome (design help-drawer.css .hp-nav-btn/.hp-fab, verbatim
   geometry) — the drawer is a separate unbuilt surface, so both link to /help.
   The Help FAB sits below the Favorites FAB (fav: bottom 88px / help: 28px). ── */
.hp-nav-btn { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; color: rgba(242,228,177,.85); font-size: 13px; font-weight: 700; letter-spacing: .01em; transition: background .15s, color .15s; flex-shrink: 0; text-decoration: none; }
.hp-nav-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
@media (max-width: 1180px) { .hp-nav-btn { padding: 0 9px; } .hp-nav-btn-label { display: none; } }
.hp-fab { position: fixed; bottom: 28px; right: 28px; z-index: 9000; display: flex; align-items: center; gap: 7px; padding: 11px 16px 11px 13px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 20px rgba(225,39,39,.38), 0 2px 6px rgba(0,0,0,.18); transition: background .15s, box-shadow .15s, transform .2s, opacity .2s; text-decoration: none; }
.hp-fab:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 6px 26px rgba(225,39,39,.45); }
@media (max-width: 560px) { .hp-fab { bottom: 16px; right: 16px; padding: 10px 13px 10px 11px; font-size: 12px; } }

/* Cookie notice on small screens: keep consent actions unobstructed and ensure
   shopping CTAs can scroll above the fixed notice before dismissal. */
@media (max-width: 720px) {
  body.ffu-cookie-banner-visible .sp-fav-fab,
  body.ffu-cookie-banner-visible .hp-fab {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    transform: translateY(14px) !important;
  }

  body.ffu-cookie-banner-visible .sp-shell {
    padding-bottom: 220px;
  }
}

/* Read by screen readers, not shown (status lines such as the Deals results count) */
.sp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Scroll-row arrows hide at either end and on rows that don't overflow (wireHScroll sets [hidden]; their display:flex
   above used to override it, so the left arrow always showed) */
.sp-featured-arrow[hidden], .sp-hrow-nav[hidden] { display: none; }

/* Hero carousels (Shopping hero, Deals spotlight): pause / play in the top-right corner — they turn every few seconds.
   Shown with the arrows: on hover (which also holds the rotation), on keyboard focus (WCAG 2.2.2: a keyboard user reaches
   it by Tab), and always on touch screens and phones, which have no hover. */
.sp-promo .sp-promo-pause {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .16s ease, background .13s;
}
.sp-promo:hover .sp-promo-pause,
.sp-promo:has(:focus-visible) .sp-promo-pause { opacity: 1; pointer-events: auto; }
@media (hover: none), (max-width: 700px) {
  .sp-promo .sp-promo-pause { opacity: 1; pointer-events: auto; }
}
.sp-promo .sp-promo-pause:hover { background: rgba(0,0,0,.55); }
.sp-promo .sp-promo-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Hero carousel on phones: the arrows sat across the Shop button — they move to the top-right corner, clear of the
   copy, beside the pause button */
@media (max-width: 700px) {
  .sp-promo-arrow { top: 14px; margin-top: 0; width: 34px; height: 34px; }
  .sp-promo-arrow.left { left: auto; right: 98px; }
  .sp-promo-arrow.right { right: 56px; }
}

/* The heart / bookmark buttons' touch-screen tap areas are the site-wide rule (site-base.css) */

/* While a dialog is open (store send-off, Favorites store picker) the floating buttons step aside: they sat above it */
body:has(.sp-oi-backdrop) .hp-fab, body:has(.sp-oi-backdrop) .sp-fav-fab,
body:has(.fav-picker-overlay) .hp-fab { display: none; }

/* Extension and app promo cards (Shopping, Merchant Detail) — one copy here; both pages used to inject the same
   block at runtime (shopping-ui.js, merchant-detail-ui.js). The app card uses the program's colour (var(--red)). */
.ext-promo{background:#fff;border-radius:16px;border:1.5px solid rgba(24,160,96,.18);border-left:4px solid #18a060;box-shadow:0 1px 3px rgba(28,33,48,.05),0 4px 14px rgba(28,33,48,.07);padding:18px 44px 18px 20px;display:flex;align-items:center;gap:16px;position:relative;animation:extPromoIn .22s ease}
@keyframes extPromoIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}
}
.ext-promo-icon{flex-shrink:0;width:48px;height:48px;border-radius:13px;background:rgba(24,160,96,.10);display:flex;align-items:center;justify-content:center;color:#18a060}
.ext-promo-copy{flex:1;min-width:0}
.ext-promo-eyebrow{font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:#18a060;margin-bottom:2px}
.ext-promo-headline{font-size:14.5px;font-weight:800;color:var(--ink,#1C2130);letter-spacing:-.01em;line-height:1.25;margin-bottom:3px}
.ext-promo-body{font-size:12.5px;color:var(--ink-2,#5a6170);line-height:1.5}
.ext-promo-ctas{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.ext-promo-install{display:flex;align-items:center;gap:7px;background:#18a060;color:#fff;border-radius:999px;font-size:13px;font-weight:800;font-family:inherit;padding:10px 20px;letter-spacing:.01em;white-space:nowrap;border:none;cursor:pointer;box-shadow:0 3px 10px rgba(24,160,96,.26);transition:background .14s,transform .1s,box-shadow .14s}
.ext-promo-install:hover{background:#13b368;transform:translateY(-1px);box-shadow:0 5px 16px rgba(24,160,96,.34)}
.ext-promo-cta-sub{font-size:10.5px;color:var(--ink-3,#9aa0ac);font-weight:600;letter-spacing:.025em;text-align:right}
.ext-promo-dismiss{font-size:11.5px;color:var(--ink-3,#9aa0ac);font-weight:600;font-family:inherit;background:none;border:none;cursor:pointer;padding:1px 0;text-align:right;white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(28,33,48,.14);transition:color .14s}
.ext-promo-dismiss:hover{color:var(--ink-2,#5a6170)}
.ext-promo-close{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-3,#9aa0ac);transition:background .14s,color .14s;padding:0;font-family:inherit;flex-shrink:0}
.ext-promo-close:hover{background:rgba(28,33,48,.07);color:var(--ink,#1C2130)}
@media (max-width:680px){.ext-promo{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 40px 16px 16px}
.ext-promo-ctas{align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:8px 14px;width:100%}
.ext-promo-cta-sub{display:none}
}
.app-promo{background:#fff;border-radius:16px;border:1.5px solid rgba(225,39,39,.18);border-left:4px solid var(--red);box-shadow:0 1px 3px rgba(28,33,48,.05),0 4px 14px rgba(28,33,48,.07);padding:18px 44px 18px 20px;display:flex;align-items:center;gap:16px;position:relative;animation:extPromoIn .22s ease}
.app-promo-icon{flex-shrink:0;width:48px;height:48px;border-radius:13px;background:rgba(225,39,39,.10);display:flex;align-items:center;justify-content:center;color:var(--red)}
.app-promo-eyebrow{color:var(--red) !important}
.app-promo-install{display:flex;align-items:center;gap:7px;background:var(--red);color:#fff;border-radius:999px;font-size:13px;font-weight:800;font-family:inherit;padding:10px 20px;letter-spacing:.01em;white-space:nowrap;border:none;cursor:pointer;box-shadow:0 3px 10px rgba(225,39,39,.26);transition:background .14s,transform .1s,box-shadow .14s}
.app-promo-install:hover{background:#c91f1f;transform:translateY(-1px);box-shadow:0 5px 16px rgba(225,39,39,.34)}
@media (max-width:680px){.app-promo{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 40px 16px 16px}
}