/* ═══════════════════════════════════════════════════════════════
   FanFundU — Merchant Detail Page
   Extends shopping-styles.css variables and base styles
   ═══════════════════════════════════════════════════════════════ */

/* ════════════ HERO ════════════ */
.md-hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.md-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -58deg,
    transparent 0, transparent 26px,
    rgba(255,255,255,.018) 26px, rgba(255,255,255,.018) 27px
  );
}
.md-hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.md-hero-deco {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.md-hero-deco svg { width: 100%; height: 100%; display: block; }

.md-hero-inner {
  max-width: 1360px; margin: 0 auto;
  padding: 22px 32px 28px;
  position: relative; z-index: 1;
}

/* Breadcrumb */
.md-breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600;
  color: rgba(242,228,177,.34); margin-bottom: 26px;
  flex-wrap: wrap;
}
.md-breadcrumb a { color: inherit; transition: color .14s; }
.md-breadcrumb a:hover { color: rgba(242,228,177,.72); }
.md-bc-sep { color: rgba(242,228,177,.18); font-size: 14px; }

/* Hero grid */
.md-hero-grid {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 28px;
  align-items: start;
}

/* Left — identity */
.md-hero-identity {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.md-hero-logo {
  width: 160px; height: 88px; border-radius: 16px;
  /* Light chip so dark merchant logos (Nike etc.) stay readable on the dark hero */
  background: #fdfcf6;
  border: 1.5px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 2px 16px rgba(0,0,0,.28);
}
.md-hero-logo img {
  width: 130px; height: 58px; object-fit: contain; border-radius: 4px;
}
.md-hero-logo-txt {
  font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.02em;
}
/* Phones: a smaller logo chip beside the store name. */
@media (max-width: 640px) {
  .md-hero-logo { width: 112px; height: 62px; border-radius: 12px; }
  .md-hero-logo img { width: 92px; height: 42px; }
}
.md-hero-name {
  font-size: 34px; font-weight: 900; color: var(--cream);
  letter-spacing: -.03em; line-height: 1; margin-bottom: 7px;
}
.md-hero-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.md-hero-cat    { font-size: 12px; font-weight: 600; color: rgba(242,228,177,.46); }
.md-hero-meta-dot { color: rgba(242,228,177,.20); }
.md-hero-domain { font-size: 12px; font-weight: 500; color: rgba(242,228,177,.30); }

/* Tags row */
.md-hero-tags {
  display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 22px;
}
.md-hero-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; line-height: 1.6;
}
.md-hero-tag.red    { background: var(--red); color: var(--cream); box-shadow: 0 2px 10px rgba(225,39,39,.42); }
.md-hero-tag.green  { background: var(--green); color: #fff; }
.md-hero-tag.yellow { background: var(--yellow); color: var(--navy); }
.md-hero-tag.navy   { background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18); color: rgba(242,228,177,.70); }

/* "UP TO" prefix above the hero rate number */
.md-hero-rate-upto {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--yellow); line-height: 1; margin-bottom: 4px; display: block;
}

/* Rate block */
.md-hero-rate-block {
  display: flex; align-items: baseline; gap: 11px; margin-bottom: 7px;
}
.md-hero-rate-n {
  font-size: 84px; font-weight: 900; color: var(--green);
  letter-spacing: -.05em; line-height: .86;
}
.md-hero-rate-suffix {
  display: flex; flex-direction: column; gap: 5px; padding-bottom: 6px;
}
.md-hero-rate-label {
  font-size: 17px; font-weight: 700; color: rgba(242,228,177,.68); line-height: 1;
}
.md-hero-rate-was {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.28);
  text-decoration: line-through;
}
/* base rate shown for transparency — no strikethrough */
.md-hero-rate-base {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.40);
  letter-spacing: .01em;
}
.md-hero-rate-note {
  font-size: 13px; color: rgba(242,228,177,.44); margin-bottom: 28px; line-height: 1.4;
}

/* CTAs */
.md-hero-ctas {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.md-hero-shop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: var(--cream);
  padding: 13px 26px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--red-deep), 0 4px 18px rgba(225,39,39,.34);
  transition: transform .14s, box-shadow .14s; min-height: 50px;
}
.md-hero-shop-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--red-deep), 0 8px 24px rgba(225,39,39,.38);
}
.md-hero-fave-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.14);
  color: rgba(242,228,177,.55); padding: 12px 18px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .14s; min-height: 50px;
}
.md-hero-fave-btn:hover {
  background: rgba(255,255,255,.15); color: var(--cream);
  border-color: rgba(255,255,255,.28);
}
.md-hero-fave-btn.active {
  background: rgba(255,114,114,.12); border-color: rgba(255,114,114,.36); color: #ff7272;
}
.md-hero-fave-btn svg { transition: fill .15s; }

/* Anchor link below hero CTAs → scrolls to Promotions section */
.md-hero-promos-link {
  display: inline-flex; width: fit-content; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: #F2E4B1; text-decoration: none;
  margin-top: 12px; cursor: pointer; padding: 8px 14px;
  border: 1.5px solid rgba(242,228,177,.35); border-radius: 999px;
  background: rgba(242,228,177,.07);
  transition: color .15s, border-color .15s, background .15s;
}
.md-hero-promos-link:hover { color: #fff; border-color: rgba(242,228,177,.65); background: rgba(242,228,177,.12); }
.md-hero-promos-link svg { flex-shrink: 0; transition: transform .22s ease; }
.md-hero-promos-link:hover svg { transform: translateY(3px); }
.md-hero-fave-btn.active svg { fill: currentColor; }

/* Right — stats card */
.md-hero-card {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.10);
  border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.md-hero-card-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242,228,177,.30);
}
.md-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.md-stat {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 12px 14px;
}
.md-stat-n { font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1; margin-bottom: 3px; }
.md-stat-n.green  { color: var(--green); }
.md-stat-n.yellow { color: var(--yellow); }
.md-stat-n.cream  { color: var(--cream); }
.md-stat-n.red    { color: var(--red); }
.md-stat-l {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(242,228,177,.34);
}

.md-hero-live {
  display: flex; align-items: center; gap: 8px;
  background: rgba(34,197,130,.09); border: 1px solid rgba(34,197,130,.18);
  border-radius: 10px; padding: 10px 14px;
  font-size: 12.5px; font-weight: 700; color: #3de0a4;
}
.md-hero-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c582; flex-shrink: 0;
  animation: dot-pulse 1.8s ease-in-out infinite;
}
.md-hero-live-n { font-weight: 900; font-size: 16px; letter-spacing: -.01em; }

.md-hero-rank {
  display: flex; align-items: center; gap: 10px;
  background: rgba(249,157,32,.10); border: 1px solid rgba(249,157,32,.18);
  border-radius: 10px; padding: 10px 14px;
}
.md-hero-rank-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.md-hero-rank-text {
  font-size: 12px; font-weight: 600; color: rgba(242,228,177,.65); line-height: 1.35;
}
.md-hero-rank-text strong { color: var(--yellow); font-weight: 800; }

/* ════════════ MAIN CONTENT ════════════ */
.md-main {
  max-width: 1360px; margin: 0 auto;
  padding: 28px 32px 88px;
  display: flex; flex-direction: column; gap: 56px;
  background: var(--paper); position: relative; z-index: 1;
}

/* Section headers */
.md-sec-ey {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 4px;
}
.md-sec-h2 {
  font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.02em;
}
.md-sec-hdr { margin-bottom: 20px; }
.md-promo-stack-note {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--green);
}
.md-promo-stack-note svg { flex-shrink: 0; }

/* ════════════ PROMOTIONS ════════════ */
.md-promos-grid {
  display: grid;
  /* min(330px, 100%): a 360px phone has 328px of room, and a 330px minimum scrolled the page sideways */
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 14px;
}

.md-promo-card {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 11px;
  position: relative; overflow: hidden; min-height: 272px;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
/* The promotion a shared link (?deal=) points at. */
.md-promo-card.is-linked { box-shadow: 0 0 0 3px var(--red), 0 8px 24px rgba(225,39,39,.18); }
.md-promo-card:hover { box-shadow: var(--sh); transform: translateY(-2px); border-color: var(--line-s); }
.md-promo-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.md-promo-card.cashback::before       { background: var(--green); }
.md-promo-card.cashback_boost::before { background: linear-gradient(90deg, var(--red), var(--yellow)); }
.md-promo-card.coupon::before         { background: var(--yellow); }
.md-promo-card.deal::before           { background: var(--navy); }
/* Card-Linked Offer — blue accent. Add new types here + in the registry comment in merchant-detail-app.jsx. */
.md-promo-card.card_linked::before    { background: oklch(60% .15 248); }

.md-promo-top { display: flex; flex-direction: column; gap: 8px; }
.md-promo-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.md-promo-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.md-promo-top-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.md-promo-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; line-height: 1.7; white-space: nowrap;
}
.md-promo-badge.red    { background: var(--red-soft); color: var(--red); }
.md-promo-badge.green  { background: var(--green-s); color: var(--green); }
.md-promo-badge.yellow { background: var(--yellow-s); color: var(--yellow-d); }
.md-promo-badge.navy   { background: rgba(28,33,48,.07); color: var(--ink-2); }
.md-promo-badge.stackable {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--green-s); color: var(--green); cursor: help;
}
.md-promo-badge.stackable svg { flex-shrink: 0; }

.md-promo-expires {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-end;
  font-size: 11px; font-weight: 800; letter-spacing: .01em;
  color: #955200;
  background: rgba(249,157,32,.13);
  border: 1px solid rgba(249,157,32,.26);
  padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.md-promo-expires.urgent {
  color: var(--red);
  background: var(--red-soft);
  border-color: rgba(225,39,39,.24);
}
/* Save / bookmark button */
.md-promo-save-btn {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1.5px solid var(--line); background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; color: var(--ink-3); flex-shrink: 0;
  transition: background .14s, color .14s, border-color .14s, transform .12s;
}
.md-promo-save-btn:hover {
  background: var(--cream-soft); color: var(--red);
  border-color: rgba(225,39,39,.24); transform: scale(1.08);
}
.md-promo-save-btn.saved {
  background: var(--red-soft); color: var(--red);
  border-color: rgba(225,39,39,.30);
}

/* Subtle share trigger — quiet by default, only firms up on hover/open */
.md-promo-share-btn {
  width: 28px; height: 28px; border-radius: 8px;
  border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; color: var(--ink-3); opacity: .5; flex-shrink: 0;
  transition: opacity .14s, background .14s, color .14s, transform .12s;
}
.md-promo-share-btn:hover {
  opacity: 1; background: var(--cream-soft); color: var(--navy); transform: scale(1.08);
}

.md-promo-title {
  font-size: 15px; font-weight: 800; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.24; text-wrap: balance;
  min-height: 2.48em;
}
.md-promo-desc {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.52;
  position: relative; min-height: 3.04em; text-wrap: pretty;
}

/* Code reveal */
.md-code-row { display: flex; align-items: stretch; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.md-code-box {
  flex: 1; min-width: fit-content; background: var(--cream-soft); border: 1.5px dashed rgba(28,33,48,.18);
  border-radius: 10px; padding: 0 13px;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; cursor: pointer;
}
.md-code-val {
  font-family: 'Courier New', monospace; font-size: 15px; font-weight: 800;
  letter-spacing: .14em; color: var(--ink);
  transition: filter .2s;
}
.md-code-val.blurred { filter: blur(5px); user-select: none; pointer-events: none; }
.md-code-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); background: none; border: none; cursor: pointer;
  transition: opacity .15s;
}
.md-code-overlay:hover { opacity: .76; }
.md-code-copy-btn {
  background: var(--navy); color: var(--cream); padding: 0 14px;
  border-radius: 10px; min-height: 44px; flex: 1; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  transition: background .13s; white-space: nowrap; min-width: 68px;
}
.md-code-copy-btn:hover { background: var(--red); }
.md-code-copy-btn.copied { background: var(--green); }

.md-promo-get-btn {
  width: 100%; background: var(--navy); color: var(--cream);
  padding: 12px 16px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; transition: background .13s; margin-top: auto;
}
.md-promo-get-btn:hover { background: var(--red); }

/* ════════════ CHANNEL PILL ════════════
   Small label on PromoCards indicating WHERE an offer is redeemable.
   Add a new channel: add a [data-channel="key"] rule below, then register
   the key in CHANNEL_PILL_META in merchant-detail-app.jsx.
══════════════════════════════════════ */
.md-promo-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  width: fit-content;
  white-space: nowrap;
  line-height: 1.6;
  margin-top: -2px; /* tighten gap toward badge row */
}
/* online — restrained navy/ink tone; default online affiliate needs no pill but
   can be shown explicitly when a card also has in-store/gift-card variants. */
.md-promo-channel-pill[data-channel="online"] {
  background: rgba(28,33,48,.05);
  color: var(--ink-2);
  border: 1px solid rgba(28,33,48,.10);
}
/* in_store — teal; physical retail only */
.md-promo-channel-pill[data-channel="in_store"] {
  background: oklch(95% .04 185);
  color: oklch(28% .13 185);
  border: 1px solid oklch(87% .08 185);
}
/* card_linked — blue; card-linked offer (CLO), no checkout action needed */
.md-promo-channel-pill[data-channel="card_linked"] {
  background: oklch(95% .04 248);
  color: oklch(30% .13 248);
  border: 1px solid oklch(87% .08 248);
}
/* gift_card — warm gold; redeemed by buying merchant gift cards */
.md-promo-channel-pill[data-channel="gift_card"] {
  background: var(--yellow-s);
  color: var(--yellow-d);
  border: 1px solid rgba(212,167,40,.22);
}
/* app — red-soft; requires the merchant or FanFundU mobile app */
.md-promo-channel-pill[data-channel="app"] {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid rgba(225,39,39,.16);
}
/* local — green-mint; participating local or independent retail partner */
.md-promo-channel-pill[data-channel="local"] {
  background: oklch(95% .04 148);
  color: oklch(28% .13 148);
  border: 1px solid oklch(87% .08 148);
}

/* ════════════ HOW IT WORKS ════════════ */
.md-steps {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  gap: 0;
  align-items: start;
}
.md-step {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .18s, border-color .18s;
}
.md-step:hover { box-shadow: var(--sh-sm); border-color: var(--line-s); }
.md-step-head { display: flex; align-items: center; gap: 10px; }
.md-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--red); color: var(--cream);
  font-size: 13px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.md-step-icon { font-size: 26px; line-height: 1; }
.md-step-title { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.md-step-desc  { font-size: 12.5px; color: var(--ink-3); line-height: 1.52; }
.md-step-arrow {
  display: flex; align-items: center; justify-content: center;
  padding-top: 58px; color: var(--ink-3);
}

/* ════════════ TEAM IMPACT ════════════ */
.md-impact-card {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: 22px; padding: 36px 36px;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.md-impact-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg, transparent 0, transparent 28px,
    rgba(255,255,255,.012) 28px, rgba(255,255,255,.012) 29px
  );
}
.md-impact-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--red);
}
.md-impact-left { position: relative; z-index: 1; }
.md-impact-ey {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 10px;
}
.md-impact-n {
  font-size: 64px; font-weight: 900; color: var(--cream);
  letter-spacing: -.04em; line-height: .9; margin-bottom: 12px;
}
.md-impact-n em { font-style: normal; color: var(--yellow); }
.md-impact-desc {
  font-size: 14px; color: rgba(242,228,177,.56); line-height: 1.5;
  max-width: 420px; text-wrap: pretty;
}
.md-impact-right {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px; min-width: 165px;
}
.md-impact-stat {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px; padding: 13px 16px;
}
.md-impact-stat-n {
  font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1; margin-bottom: 3px;
}
.md-impact-stat-n.green  { color: var(--green); }
.md-impact-stat-n.yellow { color: var(--yellow); }
.md-impact-stat-n.cream  { color: var(--cream); }
.md-impact-stat-l {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(242,228,177,.36);
}

/* ════════════ POPULAR CATEGORIES ════════════ */
.md-cats-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.md-cat-tile {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 20px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; text-align: center; font-family: inherit; font-size: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.md-cat-tile:hover {
  border-color: rgba(225,39,39,.30); box-shadow: var(--sh-sm); transform: translateY(-2px);
}
.md-cat-tile-icon  { font-size: 30px; line-height: 1; }
.md-cat-tile-name  { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.md-cat-tile-count { font-size: 10px; color: var(--ink-3); font-weight: 600; }

/* ════════════ TERMS ════════════ */
.md-excl-wrap { max-width: 760px; }
.md-terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.md-terms-panel {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 22px 22px 24px;
}
.md-terms-panel-hdr {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.md-terms-panel-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.md-terms-panel-icon.green { background: var(--green-s); color: var(--green); }
.md-terms-panel-icon.red   { background: var(--red-soft); color: var(--red); }
.md-terms-panel-title { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }

.md-terms-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.md-terms-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--ink-2); line-height: 1.48;
}
.md-terms-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.md-terms-dot.green { background: var(--green); }
.md-terms-dot.red   { background: var(--red); }

.md-terms-note {
  background: var(--cream-soft); border: 1px solid rgba(28,33,48,.08);
  border-radius: 14px; padding: 16px 18px; margin-top: 16px;
}
.md-terms-note-label {
  font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.md-terms-note-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.md-terms-updated { font-size: 10.5px; color: var(--ink-3); margin-top: 10px; }

/* ════════════ TOAST ════════════ */
.md-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: 12px 18px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  display: flex; align-items: center; gap: 9px;
  animation: md-toast-in .26s ease-out;
}
@keyframes md-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.md-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c582; flex-shrink: 0; }

/* ════════════ MAXIMIZE EARNINGS CARD (hero right col) ════════════ */
.md-earn-card {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.13);
  border-radius: 20px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}

.md-earn-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.md-earn-kicker svg { stroke: var(--yellow); flex-shrink: 0; }

.md-earn-headline {
  font-size: 21px;
  font-weight: 900;
  color: var(--cream);
  letter-spacing: -.025em;
  line-height: 1.2;
  text-wrap: pretty;
}

/* Sections */
.md-earn-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-earn-section-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242,228,177,.36);
  margin-bottom: 2px;
}

/* Streak cards */
.md-earn-streak-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
}
.md-earn-streak-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; line-height: 1; }
.md-earn-streak-body { flex: 1; min-width: 0; }
.md-earn-streak-title { font-size: 14px; font-weight: 800; color: var(--cream); letter-spacing: -.01em; }
.md-earn-streak-desc  { font-size: 12px; color: rgba(242,228,177,.48); line-height: 1.4; margin-top: 3px; text-wrap: pretty; }
.md-earn-streak-pips  { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; }
.md-earn-streak-pip {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: rgba(255,255,255,.30); text-transform: uppercase;
}
.md-earn-streak-pip.done  { background: var(--green); border-color: var(--green); color: #fff; }
.md-earn-streak-pip.today { border-color: #ff7070; color: #ff7070; background: rgba(225,39,39,.15); }
.md-earn-streak-bonus       { text-align: right; flex-shrink: 0; padding-top: 2px; }
.md-earn-streak-bonus-n   { font-size: 28px; font-weight: 900; color: #ff7070; letter-spacing: -.03em; line-height: 1; }
.md-earn-streak-bonus-lbl { font-size: 9.5px; font-weight: 700; color: rgba(242,228,177,.38); text-transform: uppercase; letter-spacing: .07em; margin-top: 2px; }

/* Threshold cards */
.md-earn-thresh-card {
  padding: 12px 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.md-earn-thresh-top  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.md-earn-thresh-title { font-size: 14px; font-weight: 800; color: var(--cream); letter-spacing: -.01em; }
.md-earn-thresh-rate  { font-size: 24px; font-weight: 900; letter-spacing: -.03em; line-height: 1; flex-shrink: 0; }
.md-earn-thresh-rate.active { color: #ff7070; }
.md-earn-thresh-rate.base   { color: #4fd89a; }
.md-earn-thresh-desc { font-size: 12px; color: rgba(242,228,177,.48); line-height: 1.4; text-wrap: pretty; }
.md-earn-thresh-bar-wrap {
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.md-earn-thresh-bar {
  height: 100%; border-radius: 999px;
  transition: width .7s cubic-bezier(.22,1,.36,1);
}
.md-earn-thresh-bar.active { background: linear-gradient(90deg, var(--green), var(--yellow)); }
.md-earn-thresh-bar.locked { background: linear-gradient(90deg, var(--green), rgba(24,160,96,.3)); }
.md-earn-thresh-bar-row { display: flex; justify-content: space-between; }
.md-earn-thresh-lbl { font-size: 11px; font-weight: 700; color: rgba(242,228,177,.44); }
.md-earn-thresh-lbl.goal { color: #4fd89a; }

.md-earn-catgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.md-earn-catrow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.md-earn-catrow.top {
  background: rgba(34,197,130,.10);
  border-color: rgba(34,197,130,.22);
}
.md-earn-catrow-wasnow {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.md-earn-catrow-was {
  font-size: 11px; font-weight: 700;
  color: rgba(242,228,177,.32); text-decoration: line-through; letter-spacing: -.01em;
}
.md-earn-catrow-arrow {
  font-size: 10px; color: rgba(242,228,177,.28);
}
.md-earn-catrow-label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: rgba(242,228,177,.68);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-earn-catrow.top .md-earn-catrow-label { color: var(--cream); }
.md-earn-catrow-labelwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md-earn-catrow-labelwrap .md-earn-catrow-label { flex: none; }
.md-earn-catrow-note {
  font-size: 10.5px; font-weight: 600; color: rgba(242,228,177,.42);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-earn-catrow-rate {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.md-earn-catrow-rate.base      { color: #4fd89a; }
.md-earn-catrow-rate.highlight { color: #4fd89a; }
.md-earn-catrow-rate.flat      { color: var(--yellow); }

.md-earn-bonusrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
.md-earn-bonus-icon { font-size: 15px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.md-earn-bonus-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.md-earn-bonus-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.md-earn-bonus-text {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(242,228,177,.72);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-earn-bonus-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(242,228,177,.36);
  line-height: 1;
}
.md-earn-bonus-val {
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -.02em;
}
.md-earn-bonus-val.streak    { color: #ff7070; }
.md-earn-bonus-val.threshold { color: #4fd89a; }
.md-earn-bonus-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
}
.md-earn-bonus-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #4fd89a);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
}

.md-earn-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 2px;
}
.md-earn-footer-stat {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-wrap: wrap;
}
.md-earn-footer-n {
  font-size: 20px;
  font-weight: 900;
  color: var(--green);
  letter-spacing: -.03em;
  line-height: 1;
}
.md-earn-footer-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(242,228,177,.44);
}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 1080px) {
  /* minmax(0, …): a plain 1fr can't shrink below its widest no-wrap line (the Spanish tips in the earn card), which
     pushed the whole hero past a phone's edge and cut off the rate and the Shop button */
  .md-hero-grid         { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .md-earn-catgrid      { grid-template-columns: 1fr 1fr; }
  .md-hero-rate-n       { font-size: 68px; }
  .md-cats-grid         { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .md-impact-card       { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
}
@media (max-width: 720px) {
  .md-terms-grid        { grid-template-columns: 1fr; }
  .md-steps             { grid-template-columns: 1fr; gap: 12px; }
  .md-step-arrow        { display: none; }
}
@media (max-width: 600px) {
  .md-hero-inner        { padding: 16px 16px 20px; }
  .md-main              { display: flex; flex-direction: column; padding: 18px 16px 56px; gap: 26px; }
  .md-promo-banners     { gap: 8px; }
  .md-cats-grid         { grid-template-columns: repeat(2, 1fr); }
  .md-hero-rate-n       { font-size: 56px; }
  .md-hero-name         { font-size: 26px; overflow-wrap: anywhere; }
  .md-impact-n          { font-size: 48px; }
  .md-stats-grid        { grid-template-columns: 1fr 1fr; }
  .md-earn-catgrid      { grid-template-columns: 1fr; }
  /* Hero: full-width stacked CTAs — thumb-friendly, no wrap collisions */
  .md-hero-ctas         { flex-direction: column; align-items: stretch; }
  .md-hero-shop-btn, .md-hero-fave-btn { width: 100%; justify-content: center; }
  /* Maximize Earnings block: tighter so it reads as support, not a second hero */
  .md-earn-card         { padding: 18px 14px; }
  .md-earn-headline     { font-size: 17px; }
  /* Section rhythm */
  .md-sec-hdr           { margin-bottom: 14px; }
  .md-sec-title         { font-size: 19px; }
  /* Mobile module order (promotions first, the extension / app banners after the core modules) is the page's DOM
     order on phones (merchant-detail-ui.js renderMain): reordering with CSS left the keyboard on a different path
     than the screen. */
}

/* ════════════ COMPACT HERO CARD (when advanced offers present) ════════════ */
.md-hero-card.compact {
  justify-content: flex-start;
  gap: 0;
}
.md-hero-card-compact-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 4px;
  flex: 1;
}
.md-hero-compact-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.md-hero-compact-n {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
}
.md-hero-compact-n.green  { color: var(--green); }
.md-hero-compact-lbl {
  font-size: 12px;
  font-weight: 700;
  color: rgba(242,228,177,.50);
  line-height: 1.3;
  padding-bottom: 3px;
}
.md-hero-compact-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(242,228,177,.45);
  margin-top: 2px;
}
.md-hero-compact-sep { opacity: .4; }
.md-hero-compact-hint {
  font-size: 12px;
  color: rgba(242,228,177,.40);
  line-height: 1.5;
  margin-top: 4px;
  text-wrap: pretty;
}
.md-hero-compact-cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11px;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}

/* ════════════ SPOTLIGHT HERO HEADING ════════════ */
.md-spotlight-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}
.md-spotlight-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-wrap: pretty;
  margin: 0;
}
.md-spotlight-sub {
  font-size: 13.5px;
  color: rgba(255,255,255,.50);
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
  max-width: 56ch;
}

/* ════════════ EARNING SPOTLIGHT WRAPPER ════════════ */
.md-earning-spotlight {
  background: var(--ink);
  border-radius: 24px;
  padding: 32px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* pull it wider than the main column on large screens */
}
.md-earning-spotlight .md-sec-hdr { margin-bottom: 0; }
.md-earning-spotlight .md-sec-ey  { color: rgba(255,255,255,.45); }
.md-earning-spotlight .md-sec-h2  { color: #fff; }

/* override inner cards to sit on dark bg */
.md-earning-spotlight .md-catrate-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.md-earning-spotlight .md-catrate-card:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.md-earning-spotlight .md-catrate-label { color: #fff; }
.md-earning-spotlight .md-catrate-note  { color: rgba(255,255,255,.45); }
.md-earning-spotlight .md-catrate-rate-suf { color: rgba(255,255,255,.45); }
.md-earning-spotlight .md-catrate-tag.base { background: rgba(24,160,96,.20); color: #4fd89a; }
.md-earning-spotlight .md-catrate-tag.highlight { background: rgba(225,39,39,.20); color: #ff7070; }
.md-earning-spotlight .md-catrate-tag.flat { background: rgba(212,167,40,.20); color: #f5d06a; }
.md-earning-spotlight .md-catrate-rate-n { color: #4fd89a; }
.md-earning-spotlight .md-catrate-rate-n.highlight { color: #ff7070; }
.md-earning-spotlight .md-catrate-rate-n.flat { color: #f5d06a; }

/* booster panels on dark bg */
.md-earning-spotlight .md-booster-panel {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.md-earning-spotlight .md-booster-panel-title { color: #fff; }
.md-earning-spotlight .md-booster-panel-sub   { color: rgba(255,255,255,.45); }
.md-earning-spotlight .md-streak-card,
.md-earning-spotlight .md-thresh-card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.md-earning-spotlight .md-streak-card-title,
.md-earning-spotlight .md-thresh-title { color: #fff; }
.md-earning-spotlight .md-streak-card-desc,
.md-earning-spotlight .md-thresh-desc,
.md-earning-spotlight .md-thresh-bar-lbl { color: rgba(255,255,255,.50); }
.md-earning-spotlight .md-thresh-bar-lbl.goal { color: #4fd89a; }
.md-earning-spotlight .md-thresh-bar-wrap { background: rgba(255,255,255,.12); }
.md-earning-spotlight .md-streak-pip {
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.4);
}
.md-earning-spotlight .md-streak-pip.done { background: var(--green); border-color: var(--green); color: #fff; }
.md-earning-spotlight .md-streak-pip.today { border-color: #ff7070; color: #ff7070; background: rgba(225,39,39,.15); }
.md-earning-spotlight .md-streak-bonus-label { color: rgba(255,255,255,.45); }

/* kicker label at top of spotlight */
.md-earning-spotlight-kicker {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--yellow);
}
.md-earning-spotlight-kicker svg { stroke: var(--yellow); flex-shrink: 0; }

@media (max-width: 680px) {
  .md-earning-spotlight { padding: 24px 18px 28px; }
}

/* ════════════ EARN BY CATEGORY ════════════ */
.md-catrate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}
.md-catrate-card {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.md-catrate-card:hover { box-shadow: var(--sh); transform: translateY(-2px); border-color: var(--line-s); }
.md-catrate-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--green);
}
.md-catrate-card.flat::before      { background: var(--yellow); }
.md-catrate-card.highlight::before { background: linear-gradient(90deg, var(--red), var(--yellow)); }
.md-catrate-icon  { font-size: 26px; line-height: 1; }
/* Fallback when no emoji is resolved — shows colored initials */
.md-catrate-icon--fallback {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--cream-soft); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: var(--ink-2);
  letter-spacing: -.01em; line-height: 1;
}
.md-catrate-label { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.md-catrate-note  { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; }
.md-catrate-rate  { display: flex; align-items: baseline; gap: 2px; margin-top: auto; padding-top: 8px; }
.md-catrate-rate-n { font-size: 30px; font-weight: 900; color: var(--green); letter-spacing: -.04em; line-height: 1; }
.md-catrate-rate-n.flat      { color: var(--yellow-d); }
.md-catrate-rate-n.highlight { color: var(--red); }
.md-catrate-rate-suf { font-size: 12px; font-weight: 700; color: var(--ink-3); padding-bottom: 2px; }
.md-catrate-tag {
  display: inline-flex; align-items: center; width: fit-content;
  font-size: 9px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-top: 2px;
}
.md-catrate-tag.flat      { background: var(--yellow-s); color: var(--yellow-d); }
.md-catrate-tag.highlight { background: var(--red-soft); color: var(--red); }
.md-catrate-tag.base      { background: var(--green-s); color: var(--green); }

/* flat-dollar promo card */
.md-promo-card.flat_dollar::before { background: linear-gradient(90deg, var(--yellow-d), var(--yellow)); }
.md-flat-rate-display {
  display: flex; align-items: baseline; gap: 2px; margin: 2px 0 4px;
}
.md-flat-rate-n   { font-size: 38px; font-weight: 900; color: var(--yellow-d); letter-spacing: -.05em; line-height: 1; }
.md-flat-rate-suf { font-size: 13px; font-weight: 700; color: var(--ink-3); }

/* ════════════ REWARD BOOSTERS ════════════ */
.md-boosters-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.md-booster-panel {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 20px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.md-booster-panel-hdr  { display: flex; align-items: center; gap: 12px; }
.md-booster-panel-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.md-booster-panel-icon.streak    { background: rgba(225,39,39,.09); }
.md-booster-panel-icon.threshold { background: rgba(24,160,96,.09); }
.md-booster-panel-title { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.md-booster-panel-sub   { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* Streak cards */
.md-streak-card {
  background: var(--cream-soft); border: 1.5px solid rgba(28,33,48,.06);
  border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.md-streak-card-icon  { font-size: 22px; flex-shrink: 0; }
.md-streak-card-body  { flex: 1; min-width: 0; }
.md-streak-card-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.md-streak-card-desc  { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.md-streak-pips       { display: flex; gap: 4px; margin-top: 8px; }
.md-streak-pip {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid rgba(28,33,48,.10); background: rgba(28,33,48,.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: var(--ink-3); text-transform: uppercase;
}
.md-streak-pip.done  { background: var(--green); border-color: var(--green); color: #fff; }
.md-streak-pip.today { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.md-streak-bonus       { text-align: right; flex-shrink: 0; }
.md-streak-bonus-n     { font-size: 22px; font-weight: 900; color: var(--red); letter-spacing: -.03em; line-height: 1; }
.md-streak-bonus-label { font-size: 9.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* Threshold cards */
.md-thresh-card {
  background: var(--cream-soft); border: 1.5px solid rgba(28,33,48,.06);
  border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.md-thresh-top  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.md-thresh-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.md-thresh-rate  { font-size: 18px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.md-thresh-rate.active { color: var(--red); }
.md-thresh-rate.base   { color: var(--green); }
.md-thresh-desc  { font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.md-thresh-bar-wrap {
  background: rgba(28,33,48,.08); border-radius: 999px; height: 7px; overflow: hidden;
}
.md-thresh-bar {
  height: 100%; border-radius: 999px;
  transition: width .7s cubic-bezier(.22,1,.36,1);
}
.md-thresh-bar.active { background: linear-gradient(90deg, var(--green), var(--yellow)); }
.md-thresh-bar.locked { background: linear-gradient(90deg, var(--green), rgba(24,160,96,.3)); }
.md-thresh-bar-row    { display: flex; justify-content: space-between; margin-top: 4px; }
.md-thresh-bar-lbl    { font-size: 10px; font-weight: 700; color: var(--ink-3); }
.md-thresh-bar-lbl.goal { color: var(--green); }

@media (max-width: 900px) {
  .md-boosters-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .md-catrate-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .md-catrate-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════ CHANNEL SELECTOR ════════════ */
.md-channel-sel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.md-channel-sel-label {
  font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242,228,177,.34);
}
.md-channel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.md-channel-card {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 15px 14px 13px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; font-family: inherit;
  position: relative; overflow: hidden;
  transition: background .15s, border-color .15s, transform .12s;
  min-height: 96px;
}
.md-channel-card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
/* Selected states */
.md-channel-card.online.sel   { background: rgba(255,255,255,.13);  border-color: rgba(255,255,255,.40); }
.md-channel-card.instore.sel  { background: rgba(34,197,130,.13);   border-color: rgba(34,197,130,.48); }
.md-channel-card.giftcard.sel { background: rgba(249,157,32,.13);   border-color: rgba(249,157,32,.52); }

/* Top-right BEST badge */
.md-channel-best-badge {
  position: absolute; top: 7px; right: 8px;
  font-size: 7.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--yellow); color: var(--navy);
  line-height: 1.6;
}
/* Card content */
.md-channel-card-icon {
  width: 22px; height: 22px;
  margin-bottom: 5px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(242,228,177,.46);
}
.md-channel-card-icon svg { width: 22px; height: 22px; flex-shrink: 0; }
/* icon accent color mirrors selection state */
.md-channel-card.sel           .md-channel-card-icon { color: rgba(242,228,177,.90); }
.md-channel-card.instore.sel   .md-channel-card-icon { color: #4fd89a; }
.md-channel-card.giftcard.sel  .md-channel-card-icon { color: var(--yellow); }
.md-channel-card-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(242,228,177,.46); line-height: 1;
}
.md-channel-card.sel           .md-channel-card-label { color: rgba(242,228,177,.82); }
.md-channel-card.instore.sel   .md-channel-card-label { color: #4fd89a; }
.md-channel-card.giftcard.sel  .md-channel-card-label { color: var(--yellow); }

.md-channel-card-rate {
  font-size: 25px; font-weight: 900; letter-spacing: -.04em; line-height: 1.1;
  color: rgba(242,228,177,.60);
}
.md-channel-card.online.sel   .md-channel-card-rate { color: var(--cream); }
.md-channel-card.instore.sel  .md-channel-card-rate { color: #4fd89a; }
.md-channel-card.giftcard.sel .md-channel-card-rate { color: var(--yellow); }

.md-channel-card-sub {
  font-size: 9px; font-weight: 600; color: rgba(242,228,177,.28);
  line-height: 1.3; text-wrap: pretty;
}
.md-channel-card.sel .md-channel-card-sub { color: rgba(242,228,177,.48); }

/* ════════════ CHANNEL CONTEXT PANEL ════════════ */
.md-ch-ctx {
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
  opacity: 1;
  animation: ch-ctx-in .18s ease-out forwards;
}
@keyframes ch-ctx-in {
  from { transform: translateY(4px); }
  to   { transform: translateY(0); }
}
.md-ch-ctx.online   { background: rgba(255,255,255,.06);  border: 1px solid rgba(255,255,255,.11); }
.md-ch-ctx.instore  { background: rgba(34,197,130,.08);   border: 1px solid rgba(34,197,130,.22); }
.md-ch-ctx.giftcard { background: rgba(249,157,32,.08);   border: 1px solid rgba(249,157,32,.26); }

.md-ch-ctx-top {
  display: flex; align-items: flex-start; gap: 9px;
}
.md-ch-ctx-icon { font-size: 15px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.md-ch-ctx-desc {
  font-size: 12px; line-height: 1.52; text-wrap: pretty; margin: 0;
  color: rgba(242,228,177,.50);
}
.md-ch-ctx.giftcard .md-ch-ctx-desc { color: rgba(249,157,32,.62); }
.md-ch-ctx.instore  .md-ch-ctx-desc { color: rgba(77,216,154,.62); }

.md-ch-ctx-pills {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.md-ch-ctx-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.08); color: rgba(242,228,177,.46);
}
.md-ch-ctx.giftcard .md-ch-ctx-pill { background: rgba(249,157,32,.12); color: rgba(249,157,32,.62); }
.md-ch-ctx.instore  .md-ch-ctx-pill { background: rgba(34,197,130,.12); color: rgba(77,216,154,.68); }
.md-ch-ctx-pill.uplift {
  background: var(--yellow); color: var(--navy);
  font-weight: 800; letter-spacing: .04em;
}

/* ════════════ GIFT CARD SPECIAL BANNER ════════════ */
.md-gc-banner {
  background: linear-gradient(135deg, #191300 0%, #201900 65%, #191300 100%);
  border: 1.5px solid rgba(249,157,32,.26);
  border-radius: 20px;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative; overflow: hidden;
  margin-bottom: 20px;
}
/* Subtle diagonal lines */
.md-gc-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -55deg, transparent 0, transparent 22px,
    rgba(255,255,255,.011) 22px, rgba(255,255,255,.011) 23px
  );
}
/* Gold top accent line */
.md-gc-banner::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, rgba(249,157,32,.25), var(--yellow), rgba(249,157,32,.25));
}
.md-gc-banner-glow {
  position: absolute; right: -50px; top: -50px;
  width: 210px; height: 210px; border-radius: 50%;
  background: rgba(249,157,32,.09);
  pointer-events: none;
}
/* Left column */
.md-gc-banner-left { position: relative; z-index: 1; }
.md-gc-banner-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 9px;
}
.md-gc-banner-eyebrow svg { stroke: var(--yellow); flex-shrink: 0; }
.md-gc-banner-headline {
  font-size: 19px; font-weight: 900; color: #fff;
  letter-spacing: -.025em; line-height: 1.2;
  text-wrap: pretty; margin-bottom: 9px;
}
.md-gc-banner-desc {
  font-size: 13px; color: rgba(255,255,255,.48);
  line-height: 1.52; margin-bottom: 18px;
  max-width: 54ch; text-wrap: pretty;
}
.md-gc-banner-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--yellow); color: var(--navy);
  padding: 11px 22px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 4px 14px rgba(249,157,32,.26);
  transition: transform .13s, box-shadow .13s;
}
.md-gc-banner-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0,0,0,.25), 0 8px 20px rgba(249,157,32,.34);
}
.md-gc-banner-note {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800;
  color: var(--yellow);
  background: rgba(249,157,32,.13);
  border: 1px solid rgba(249,157,32,.32);
  padding: 7px 13px; border-radius: 9px;
  margin-bottom: 14px; margin-top: -2px;
  width: fit-content;
}
.md-gc-banner-note svg { stroke: var(--yellow); flex-shrink: 0; width: 13px; height: 13px; }
/* Right column */
.md-gc-banner-right {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; flex-shrink: 0;
  padding: 4px 0 4px 24px;
  border-left: 1px solid rgba(249,157,32,.16);
  min-width: 110px;
}
.md-gc-banner-rate-n {
  font-size: 58px; font-weight: 900; color: var(--yellow);
  letter-spacing: -.05em; line-height: .88;
}
.md-gc-banner-rate-lbl {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.40);
  letter-spacing: .05em; text-transform: uppercase;
}
.md-gc-banner-partner {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.36);
  margin-top: 4px;
}
.md-gc-banner-vs-row {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; margin-top: 4px;
}
.md-gc-banner-vs-was  { color: rgba(255,255,255,.26); text-decoration: line-through; font-size: 11px; }
.md-gc-banner-vs-arrow { color: rgba(255,255,255,.20); font-size: 10px; }
.md-gc-banner-vs-now  { color: var(--yellow); font-weight: 900; }
.md-gc-banner-vs-lbl  {
  font-size: 9px; font-weight: 700;
  color: rgba(249,157,32,.55); letter-spacing: .05em; text-transform: uppercase;
}

@media (max-width: 740px) {
  .md-gc-banner          { grid-template-columns: 1fr; gap: 18px; }
  .md-gc-banner-right    { border-left: none; border-top: 1px solid rgba(249,157,32,.15);
                           flex-direction: row; gap: 20px; padding: 14px 0 0;
                           align-items: flex-end; justify-content: flex-start; text-align: left; }
  .md-gc-banner-rate-n   { font-size: 44px; }
}
@media (max-width: 480px) {
  .md-channel-cards      { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .md-channel-card       { padding: 12px 10px 10px; min-height: 88px; }
  .md-channel-card-rate  { font-size: 21px; }
  .md-channel-card-label { font-size: 9px; }
  .md-channel-card-sub   { display: none; }
  .md-gc-banner          { padding: 20px 18px; }
}
@media (max-width: 360px) {
  .md-channel-cards      { grid-template-columns: 1fr; }
  .md-channel-card       { flex-direction: row; align-items: center; min-height: 56px; padding: 10px 14px; gap: 10px; }
  .md-channel-card-icon  { margin-bottom: 0; }
  .md-channel-card-sub   { display: none; }
}

/* ════════════ FEATURED PROMOTION BANNER ════════════
   Flexible high-prominence slot (replaces GiftCardSpecialBanner).
   Themes: --gift_card · --flash_sale · --partner · --default
════════════════════════════════════════════════════ */
.md-fp-banner {
  border-radius: 20px;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative; overflow: hidden;
  margin-bottom: 20px;
  /* base (gift_card) */
  background: linear-gradient(135deg, #191300 0%, #201900 65%, #191300 100%);
  border: 1.5px solid rgba(249,157,32,.26);
}
.md-fp-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -55deg, transparent 0, transparent 22px,
    rgba(255,255,255,.011) 22px, rgba(255,255,255,.011) 23px
  );
}
.md-fp-banner::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, rgba(249,157,32,.25), var(--yellow), rgba(249,157,32,.25));
}

/* ── gift_card (gold) ── */
.md-fp-banner--gift_card { background: linear-gradient(135deg, #191300 0%, #201900 65%, #191300 100%); border-color: rgba(249,157,32,.26); }
.md-fp-banner--gift_card::after { background: linear-gradient(90deg, rgba(249,157,32,.25), var(--yellow), rgba(249,157,32,.25)); }
.md-fp-banner--gift_card .md-fp-banner-glow  { background: rgba(249,157,32,.09); }
.md-fp-banner--gift_card .md-fp-banner-eyebrow,
.md-fp-banner--gift_card .md-fp-banner-stat-n { color: var(--yellow); }
.md-fp-banner--gift_card .md-fp-banner-cta   { background: var(--yellow); color: var(--navy); box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 4px 14px rgba(249,157,32,.26); }
.md-fp-banner--gift_card .md-fp-banner-cta:hover { box-shadow: 0 5px 0 rgba(0,0,0,.25), 0 8px 20px rgba(249,157,32,.34); }
.md-fp-banner--gift_card .md-fp-banner-note  { background: rgba(249,157,32,.13); border-color: rgba(249,157,32,.32); color: var(--yellow); }
.md-fp-banner--gift_card .md-fp-banner-note svg { stroke: var(--yellow); }
.md-fp-banner--gift_card .md-fp-banner-vs-now { color: var(--yellow); }
.md-fp-banner--gift_card .md-fp-banner-right { border-left-color: rgba(249,157,32,.16); }
.md-fp-banner--gift_card .md-fp-banner-vs-lbl { color: rgba(249,157,32,.55); }

/* ── flash_sale (red) ── */
.md-fp-banner--flash_sale { background: linear-gradient(135deg, #1a0505 0%, #200808 65%, #1a0505 100%); border-color: rgba(225,39,39,.30); }
.md-fp-banner--flash_sale::after { background: linear-gradient(90deg, rgba(225,39,39,.30), var(--red), rgba(225,39,39,.30)); }
.md-fp-banner--flash_sale .md-fp-banner-glow  { background: rgba(225,39,39,.11); }
.md-fp-banner--flash_sale .md-fp-banner-eyebrow,
.md-fp-banner--flash_sale .md-fp-banner-stat-n { color: #ff7070; }
.md-fp-banner--flash_sale .md-fp-banner-cta   { background: var(--red); color: var(--cream); box-shadow: 0 3px 0 var(--red-deep), 0 4px 14px rgba(225,39,39,.30); }
.md-fp-banner--flash_sale .md-fp-banner-cta:hover { box-shadow: 0 5px 0 var(--red-deep), 0 8px 20px rgba(225,39,39,.42); }
.md-fp-banner--flash_sale .md-fp-banner-note  { background: rgba(225,39,39,.13); border-color: rgba(225,39,39,.30); color: #ff7070; }
.md-fp-banner--flash_sale .md-fp-banner-note svg { stroke: #ff7070; }
.md-fp-banner--flash_sale .md-fp-banner-vs-now { color: #ff7070; }
.md-fp-banner--flash_sale .md-fp-banner-right { border-left-color: rgba(225,39,39,.18); }
.md-fp-banner--flash_sale .md-fp-banner-vs-lbl { color: rgba(225,39,39,.55); }
/* subtle border pulse when urgent */
.md-fp-banner--flash_sale[data-fp-urgent="true"] {
  animation: fp-border-pulse 2.4s ease-in-out infinite;
}
@keyframes fp-border-pulse {
  0%, 100% { border-color: rgba(225,39,39,.30); }
  50%       { border-color: rgba(225,39,39,.70); }
}

/* ── partner (blue) ── */
.md-fp-banner--partner { background: linear-gradient(135deg, #020d1a 0%, #051325 65%, #020d1a 100%); border-color: oklch(60% .15 248 / 28%); }
.md-fp-banner--partner::after { background: linear-gradient(90deg, oklch(60% .15 248 / 25%), oklch(60% .15 248), oklch(60% .15 248 / 25%)); }
.md-fp-banner--partner .md-fp-banner-glow  { background: oklch(60% .15 248 / 9%); }
.md-fp-banner--partner .md-fp-banner-eyebrow,
.md-fp-banner--partner .md-fp-banner-stat-n { color: oklch(72% .15 248); }
.md-fp-banner--partner .md-fp-banner-cta   { background: oklch(60% .15 248); color: #fff; box-shadow: 0 3px 0 oklch(40% .15 248), 0 4px 14px oklch(60% .15 248 / 28%); }
.md-fp-banner--partner .md-fp-banner-cta:hover { box-shadow: 0 5px 0 oklch(40% .15 248), 0 8px 20px oklch(60% .15 248 / 40%); }
.md-fp-banner--partner .md-fp-banner-note  { background: oklch(60% .15 248 / 13%); border-color: oklch(60% .15 248 / 30%); color: oklch(72% .15 248); }
.md-fp-banner--partner .md-fp-banner-note svg { stroke: oklch(72% .15 248); }
.md-fp-banner--partner .md-fp-banner-vs-now { color: oklch(72% .15 248); }
.md-fp-banner--partner .md-fp-banner-right { border-left-color: oklch(60% .15 248 / 16%); }
.md-fp-banner--partner .md-fp-banner-vs-lbl { color: oklch(60% .15 248 / 55%); }

/* ── default (cream/neutral) ── */
.md-fp-banner--default { background: linear-gradient(135deg, #0e1117 0%, #131922 65%, #0e1117 100%); border-color: rgba(242,228,177,.18); }
.md-fp-banner--default::after { background: linear-gradient(90deg, rgba(242,228,177,.15), rgba(242,228,177,.45), rgba(242,228,177,.15)); }
.md-fp-banner--default .md-fp-banner-glow  { background: rgba(242,228,177,.05); }
.md-fp-banner--default .md-fp-banner-eyebrow,
.md-fp-banner--default .md-fp-banner-stat-n { color: rgba(242,228,177,.80); }
.md-fp-banner--default .md-fp-banner-cta   { background: rgba(242,228,177,.90); color: var(--navy); box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 4px 14px rgba(242,228,177,.18); }
.md-fp-banner--default .md-fp-banner-cta:hover { box-shadow: 0 5px 0 rgba(0,0,0,.25), 0 8px 20px rgba(242,228,177,.28); }
.md-fp-banner--default .md-fp-banner-note  { background: rgba(242,228,177,.10); border-color: rgba(242,228,177,.22); color: rgba(242,228,177,.70); }
.md-fp-banner--default .md-fp-banner-note svg { stroke: rgba(242,228,177,.70); }
.md-fp-banner--default .md-fp-banner-vs-now { color: rgba(242,228,177,.80); }
.md-fp-banner--default .md-fp-banner-right { border-left-color: rgba(242,228,177,.12); }
.md-fp-banner--default .md-fp-banner-vs-lbl { color: rgba(242,228,177,.45); }

/* ── shared sub-elements ── */
.md-fp-banner-glow {
  position: absolute; right: -50px; top: -50px;
  width: 210px; height: 210px; border-radius: 50%; pointer-events: none;
}
.md-fp-banner-left { position: relative; z-index: 1; }

.md-fp-banner-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 9px;
}
.md-fp-banner-eyebrow svg { stroke: currentColor; flex-shrink: 0; }

.md-fp-banner-headline {
  font-size: 19px; font-weight: 900; color: #fff;
  letter-spacing: -.025em; line-height: 1.2; text-wrap: pretty; margin-bottom: 9px;
}
.md-fp-banner-desc {
  font-size: 13px; color: rgba(255,255,255,.48);
  line-height: 1.52; margin-bottom: 14px; max-width: 54ch; text-wrap: pretty;
}
.md-fp-banner-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 800; letter-spacing: -.01em;
  padding: 8px 15px; border-radius: 10px; border: 1.5px solid;
  margin-bottom: 16px; width: fit-content; line-height: 1.3;
}
.md-fp-banner-note svg { flex-shrink: 0; width: 14px; height: 14px; }

.md-fp-banner-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .025em;
  min-height: 50px; transition: transform .13s, box-shadow .13s;
}
.md-fp-banner-cta:hover   { transform: translateY(-2px); }
.md-fp-banner-cta:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* countdown timer */
.md-fp-banner-countdown {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.09); border: 1.5px solid rgba(255,255,255,.16);
  padding: 8px 15px; border-radius: 10px; margin-bottom: 16px; width: fit-content;
  font-variant-numeric: tabular-nums;
}
.md-fp-banner-countdown svg { stroke: currentColor; flex-shrink: 0; }
.md-fp-banner-countdown.urgent {
  color: #ff7070; background: rgba(225,39,39,.14); border-color: rgba(225,39,39,.40);
  animation: fp-countdown-pulse 1s ease-in-out infinite;
}
@keyframes fp-countdown-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .72; }
}
.md-fp-countdown-label {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.55); flex-shrink: 0;
}
.md-fp-banner-countdown.urgent .md-fp-countdown-label { color: rgba(255,100,100,.70); }
.md-fp-countdown-time  { display: flex; align-items: baseline; gap: 2px; }
.md-fp-countdown-unit  { font-size: 22px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.md-fp-countdown-sep   { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.30); margin-right: 4px; line-height: 1; padding-bottom: 1px; }
.md-fp-banner-countdown.urgent .md-fp-countdown-unit { color: #ff7070; }
.md-fp-banner-countdown.urgent .md-fp-countdown-sep  { color: rgba(255,100,100,.42); }

.md-fp-banner-expired {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  padding: 5px 11px; border-radius: 8px; margin-bottom: 14px; width: fit-content; letter-spacing: .05em;
}

/* right column */
.md-fp-banner-right {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; flex-shrink: 0;
  padding: 4px 0 4px 24px;
  border-left: 1px solid;
  min-width: 110px;
}
.md-fp-banner-stat-n   { font-size: 58px; font-weight: 900; letter-spacing: -.05em; line-height: .88; }
.md-fp-banner-stat-lbl { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.40); letter-spacing: .05em; text-transform: uppercase; }
.md-fp-banner-partner  { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.36); margin-top: 4px; }
.md-fp-banner-vs-row   { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; margin-top: 4px; }
.md-fp-banner-vs-was   { color: rgba(255,255,255,.26); text-decoration: line-through; font-size: 11px; }
.md-fp-banner-vs-arrow { color: rgba(255,255,255,.20); font-size: 10px; }
.md-fp-banner-vs-lbl   { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

@media (max-width: 740px) {
  .md-fp-banner             { grid-template-columns: 1fr; gap: 20px; }
  .md-fp-banner-right       { border-left: none; border-top: 1px solid rgba(255,255,255,.10);
                              flex-direction: row; gap: 20px; padding: 16px 0 0;
                              align-items: flex-end; justify-content: flex-start; text-align: left; }
  .md-fp-banner-stat-n      { font-size: 44px; }
  .md-fp-banner-headline    { font-size: 17px; }
}
@media (max-width: 540px) {
  .md-fp-banner             { padding: 22px 20px; }
  .md-fp-banner-cta         { width: 100%; justify-content: center; }
  .md-fp-banner-countdown   { width: 100%; }
  .md-fp-banner-note        { width: 100%; }
}
@media (max-width: 400px) {
  .md-fp-banner             { padding: 18px 16px; gap: 14px; }
  .md-fp-banner-headline    { font-size: 16px; }
  .md-fp-countdown-unit     { font-size: 19px; }
}

/* ════════════ MAXIMIZE EVEN MORE — PRO TIPS ════════════ */
.md-earn-protips {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px;
  margin-top: 2px;
}

/* Centred divider label */
.md-earn-protips-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.md-earn-protips-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.07);
}
.md-earn-protips-hdr-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(242,228,177,.30);
  white-space: nowrap;
}
.md-earn-protips-hdr-label svg { stroke: rgba(242,228,177,.30); flex-shrink: 0; }

/* Individual tip row */
.md-earn-protip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  transition: background .14s;
}
.md-earn-protip:hover { background: rgba(255,255,255,.06); }

/* Extension tip — slightly elevated */
.md-earn-protip--ext {
  background: rgba(225,39,39,.07);
  border-color: rgba(225,39,39,.16);
}
.md-earn-protip--ext:hover { background: rgba(225,39,39,.11); }

/* Icon wrap */
.md-earn-protip-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(242,228,177,.40);
  background: rgba(255,255,255,.07);
}
.md-earn-protip-icon-wrap.ext    { background: rgba(225,39,39,.18);   color: #ff7070; }
.md-earn-protip-icon-wrap.app    { background: rgba(255,255,255,.09); color: rgba(242,228,177,.48); }
.md-earn-protip-icon-wrap.bell   { background: rgba(34,197,130,.14);  color: #4fd89a; }
.md-earn-protip-icon-wrap.streak { background: rgba(249,157,32,.14);  color: var(--yellow); }
.md-earn-protip-icon-wrap.goal   { background: rgba(34,197,130,.14);  color: #4fd89a; }

/* Text */
.md-earn-protip-body {
  flex: 1;
  min-width: 0;
}
.md-earn-protip-title {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(242,228,177,.68);
  line-height: 1.25;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-earn-protip--ext .md-earn-protip-title { color: rgba(242,228,177,.88); }
.md-earn-protip-sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(242,228,177,.30);
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Install CTA button */
.md-earn-protip-cta {
  flex-shrink: 0;
  background: var(--red);
  color: var(--cream);
  border: none;
  border-radius: 999px;
  padding: 5px 13px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  min-height: 26px;
  box-shadow: 0 2px 0 var(--red-deep);
  transition: background .12s, transform .12s;
}
.md-earn-protip-cta:hover {
  background: #c91f1f;
  transform: translateY(-1px);
}

/* Badge pill (Soon, etc.) */
.md-earn-protip-tag {
  flex-shrink: 0;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.md-earn-protip-tag.soon {
  background: rgba(255,255,255,.07);
  color: rgba(242,228,177,.36);
  border: 1px solid rgba(255,255,255,.08);
}
.md-earn-protip-tag.installed {
  background: rgba(34,197,130,.15);
  color: #4fd89a;
  border: 1px solid rgba(34,197,130,.22);
}

/* App download protip variant */
.md-earn-protip--app-dl {
  background: rgba(225,39,39,.10);
  border-color: rgba(225,39,39,.26);
  box-shadow: inset 0 0 0 1px rgba(225,39,39,.08);
}
.md-earn-protip--app-dl:hover { background: rgba(225,39,39,.15); }
.md-earn-protip-icon-wrap.app-dl {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(225,39,39,.24); color: #ff7070;
}
/* Enlarged, bolder CTA for app download */
.md-earn-protip-cta--app {
  font-size: 11px;
  padding: 6px 14px;
  min-height: 30px;
  letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(225,39,39,.30);
}

/* Promo banners wrapper — collapses gap when both are hidden */
.md-promo-banners {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* When wrapper is empty (both banners dismissed/installed), shrink to nothing */
.md-promo-banners:empty { display: none; }

/* ════════════ ABOUT MERCHANT — hero trigger link + full-story modal ════════════ */
.md-hero-about-link {
  display: inline-block; margin-top: 6px;
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: oklch(78% .05 250 / .85);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: oklch(78% .05 250 / .4);
  transition: color .13s;
}
.md-hero-about-link:hover { color: oklch(85% .06 250); text-decoration-color: oklch(85% .06 250 / .7); }

.md-about-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pcd-fade-in .18s ease;
}
.md-about-modal {
  background: var(--white);
  border-radius: 26px;
  width: 100%; max-width: 640px; max-height: min(84vh, 780px);
  overflow-y: auto;
  position: relative;
  padding: 40px 40px 32px;
  animation: pcd-slide-up .22s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
}
.md-about-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28,33,48,.06); color: var(--ink-2); border: none; cursor: pointer;
  transition: background .12s, color .12s;
}
.md-about-close:hover { background: rgba(28,33,48,.12); color: var(--ink); }
.md-about-hero {
  display: flex; align-items: center; gap: 18px; margin-bottom: 24px;
}
.md-about-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); margin-bottom: 4px;
}
.md-about-name { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.md-about-body { display: flex; flex-direction: column; gap: 22px; }
.md-about-desc { font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.md-about-section {
  border-top: 1.5px solid var(--line); padding-top: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.md-about-section-h { font-size: 12.5px; font-weight: 800; letter-spacing: .03em; color: var(--ink); }
.md-about-section-p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.md-about-actions { margin-top: 28px; display: flex; justify-content: flex-end; }
.md-about-close-btn {
  background: var(--ink); color: var(--cream); border: none; border-radius: 999px;
  padding: 12px 26px; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: opacity .13s;
}
.md-about-close-btn:hover { opacity: .85; }
@media (max-width: 480px) {
  .md-about-modal { padding: 30px 22px 24px; border-radius: 20px; }
  .md-about-hero { gap: 12px; }
  .md-about-name { font-size: 21px; }
}

/* ════════════ PROMO CODE MODAL (shared pcd-* classes) ════════════ */
.pcd-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pcd-fade-in .18s ease;
}
@keyframes pcd-fade-in { from { opacity:0; } to { opacity:1; } }

.pcd-modal {
  background: var(--navy-2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 36px 28px 28px;
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  position: relative;
  animation: pcd-slide-up .22s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 40px 100px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.06);
}
@keyframes pcd-slide-up {
  from { transform: translateY(28px); opacity:0; }
  to   { transform: none; opacity:1; }
}
.pcd-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(242,228,177,.50);
  transition: background .12s, color .12s;
}
.pcd-close:hover { background: rgba(255,255,255,.16); color: var(--cream); }
.pcd-store {
  font-size: 16px; font-weight: 900; letter-spacing: -.01em;
  color: var(--cream); margin-top: 4px; text-align: center;
}
.pcd-title {
  font-size: 12.5px; font-weight: 600; color: rgba(242,228,177,.46);
  text-align: center; line-height: 1.38; text-wrap: balance; max-width: 280px;
}
.pcd-rate-row {
  display: flex; align-items: baseline; gap: 6px;
  background: rgba(255,255,255,.05); border-radius: 10px;
  padding: 8px 20px; margin: 2px 0;
}
.pcd-rate     { font-size: 32px; font-weight: 900; color: var(--yellow); letter-spacing: -.03em; }
.pcd-rate-was { font-size: 13px; font-weight: 600; color: rgba(242,228,177,.28); text-decoration: line-through; }
.pcd-rate-lbl { font-size: 13px; font-weight: 700; color: rgba(242,228,177,.46); }
.pcd-code-label {
  font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242,228,177,.28); align-self: flex-start; width: 100%; padding: 0 2px; margin-top: 6px;
}
.pcd-code-box {
  width: 100%; border: 2px dashed rgba(249,157,32,.42);
  background: rgba(249,157,32,.07); border-radius: 13px;
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: border-color .13s, background .13s; gap: 10px;
}
.pcd-code-box:hover { border-color: rgba(249,157,32,.72); background: rgba(249,157,32,.13); }
.pcd-code-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 26px; font-weight: 900; letter-spacing: .14em;
  color: var(--yellow); line-height: 1; flex: 1;
}
.pcd-code-hint {
  font-size: 9px; font-weight: 700; color: rgba(249,157,32,.38);
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; flex-shrink: 0;
}
.pcd-copy-btn {
  width: 100%; border: none; cursor: pointer; border-radius: 14px; min-height: 52px;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--red); color: var(--cream);
  box-shadow: 0 3px 0 var(--red-deep), 0 6px 24px rgba(225,39,39,.28);
  transition: background .13s, transform .10s, box-shadow .10s;
}
.pcd-copy-btn:hover  { background: var(--red-deep); transform: translateY(-1px); }
.pcd-copy-btn:active { transform: translateY(1px); }
.pcd-copy-btn.copied { background: var(--green); box-shadow: 0 3px 0 #0f6b3f, 0 6px 24px rgba(24,160,96,.26); }
.pcd-shop-btn {
  width: 100%; border: 1.5px solid rgba(255,255,255,.16); border-radius: 14px; min-height: 48px;
  background: rgba(255,255,255,.06); color: var(--cream);
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; transition: background .13s, border-color .13s;
}
.pcd-shop-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.pcd-no-code {
  font-size: 12.5px; font-weight: 600; color: rgba(242,228,177,.36);
  text-align: center; padding: 12px 16px; width: 100%;
  background: rgba(255,255,255,.04); border-radius: 10px; line-height: 1.45;
}
.pcd-footer {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; color: rgba(242,228,177,.22); text-align: center;
}
@media (max-width: 480px) {
  .pcd-modal  { padding: 28px 18px 22px; border-radius: 20px; }
  .pcd-code-text { font-size: 22px; }
}

/* ════════════ CLARITY & TRUST UPGRADES ════════════ */
/* hero was→now boosted rate */
.md-hero-rate-wasnow{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;font-weight:800}
.md-hero-rate-wasnow .was{color:rgba(255,255,255,.30);text-decoration:line-through;font-weight:700}
.md-hero-rate-wasnow .arrow{color:rgba(242,228,177,.40)}
.md-hero-rate-wasnow .now{color:#3de0a4}
.md-hero-rate-wasnow .boost-lbl{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(61,224,164,.80);background:rgba(34,197,130,.10);border:1px solid rgba(34,197,130,.22);padding:2px 7px;border-radius:999px}
/* eligibility warning */
.md-elig-warn{display:flex;align-items:flex-start;gap:9px;max-width:560px;background:rgba(249,157,32,.10);border:1px solid rgba(249,157,32,.32);border-radius:12px;padding:10px 13px;margin:0 0 14px;font-size:12.5px;line-height:1.45;color:#ffd9a3;font-weight:600}
.md-elig-warn svg{flex-shrink:0;margin-top:1px;color:var(--yellow)}
.md-elig-warn.on-light{color:#8a5a00;background:var(--yellow-s);border-color:rgba(249,157,32,.35);margin:0 0 16px}
/* how-to-earn steps (hero) */
.md-h2e{margin-top:16px;display:flex;flex-direction:column;gap:6px;max-width:520px}
.md-h2e-lbl{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:rgba(242,228,177,.42);margin-bottom:1px}
.md-h2e-row{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(242,228,177,.74);font-weight:500}
.md-h2e-num{width:19px;height:19px;border-radius:50%;background:rgba(242,228,177,.08);border:1px solid rgba(242,228,177,.22);color:var(--cream);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* expectations: timeline + tips */
.md-tt-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:stretch}
.md-tl-card,.md-tips-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-sm)}
.md-tt-card-lbl{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.md-tl-steps{display:flex;align-items:flex-start;gap:10px}
.md-tl-node{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.md-tl-node-top{display:flex;align-items:center;margin-bottom:5px}
.md-tl-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line-s);color:var(--ink-2);background:var(--paper);flex-shrink:0}
.md-tl-dot.done{background:var(--green-s);border-color:rgba(24,160,96,.35);color:var(--green)}
.md-tl-line{flex:1;height:2px;background:var(--line-s);margin:0 4px 0 8px;border-radius:1px}
.md-tl-title{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.md-tl-sub{font-size:11.5px;color:var(--ink-2);line-height:1.4}
.md-tl-chip{align-self:flex-start;font-size:9px;font-weight:800;letter-spacing:.1em;padding:2px 8px;border-radius:999px;margin-top:3px}
.md-tl-chip.pending{color:var(--yellow-d);background:var(--yellow-s)}
.md-tl-chip.confirmed{color:var(--green);background:var(--green-s)}
/* tips */
.md-tips-list{display:flex;flex-direction:column;gap:10px}
.md-tips-row{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.md-tips-row svg{flex-shrink:0;margin-top:2px;color:var(--green)}
/* similar stores */
.md-sim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.md-sim-card{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 15px;text-decoration:none;text-align:left;cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease;box-shadow:var(--sh-sm)}
.md-sim-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.md-sim-card:hover .md-sim-arrow{color:var(--red);transform:translateX(2px)}
.md-sim-logo{width:38px;height:38px;border-radius:9px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.md-sim-init{font-size:12px;font-weight:900;color:var(--ink-2)}
.md-sim-name{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.md-sim-rate{font-size:12px;font-weight:800;color:var(--green)}
.md-sim-rate .suf{font-weight:600;color:var(--ink-3)}
.md-sim-arrow{margin-left:auto;color:var(--ink-3);transition:transform .15s ease,color .15s ease;flex-shrink:0}
/* similar stores — logo-tile treatment (matches shopping module store cards) */
.md-sim-tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:16px 12px}
.md-sim-tilegrid .sp-store-tile{cursor:pointer}
.md-sim-tile-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.md-sim-tile-logo img{max-height:52%;max-width:60%;object-fit:contain;display:block}
.md-sim-tile-init{font-size:22px;font-weight:900;color:var(--ink-2);letter-spacing:-.02em}
/* Phones: three small tiles across, like every other store grid (shopping-styles.css .sp-store-grid). */
@media (max-width:680px){.md-sim-tilegrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}}
/* collapsible terms */
.md-terms-folds{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.md-terms-fold{background:var(--cream-soft);border:1px solid rgba(28,33,48,.08);border-radius:12px;overflow:hidden}
.md-terms-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:11px 15px;font-size:12px;font-weight:800;color:var(--ink-2);letter-spacing:.03em}
.md-terms-fold summary::-webkit-details-marker{display:none}
.md-terms-fold summary::after{content:'+';font-size:15px;color:var(--ink-3);line-height:1}
.md-terms-fold[open] summary::after{content:'\2013'}
.md-terms-fold p{padding:0 15px 13px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:760px){
  .md-tt-grid{grid-template-columns:1fr}
  .md-tl-steps{flex-direction:column;gap:16px}
  .md-tl-line{display:none}
  .md-h2e-row{font-size:12.5px}
  .md-sim-grid{grid-template-columns:repeat(2,1fr)}
  .md-sim-card{flex-direction:column;align-items:flex-start;gap:8px}
  .md-sim-arrow{display:none}
}

/* ── exclusions discovery + lightbox ── */
.md-hero-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.md-hero-excl-link{color:rgba(242,228,177,.50) !important;text-decoration-color:rgba(242,228,177,.30) !important}
.md-hero-excl-link:hover{color:rgba(242,228,177,.85) !important;text-decoration-color:rgba(242,228,177,.6) !important}
.md-hero-excl-note{display:flex;width:fit-content;align-items:flex-start;gap:7px;margin-top:12px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:12px;line-height:1.45;color:rgba(242,228,177,.55);padding:0;text-align:left}
.md-hero-excl-note svg{flex-shrink:0;margin-top:2px}
.md-hero-excl-note .lnk{color:var(--cream);text-decoration:underline;text-underline-offset:2px;font-weight:700;white-space:nowrap}
.md-hero-excl-note:hover .lnk{color:#fff}
.md-hero-excl-note.warn{color:#ffd9a3;font-weight:600;max-width:560px}
.md-hero-excl-note.warn svg{color:var(--yellow)}
.md-exm{max-height:min(88vh,760px);overflow-y:auto}
.md-exm-hdr{margin-bottom:22px;padding-right:36px}
.md-exm .md-about-name{font-size:22px}
.md-exm-body{display:flex;flex-direction:column;gap:20px}
.md-exm-sec-h{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.md-exm-sec-h.red{color:var(--red)}
.md-exm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.md-exm-list li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.45}
.md-exm-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:6px}
.md-exm-dot.navy{background:var(--navy-3)}
.md-exm-p{font-size:13px;color:var(--ink-2);line-height:1.55}
.md-exm-p.note{margin-top:9px;padding:10px 13px;background:var(--cream-soft);border:1px solid rgba(28,33,48,.08);border-radius:10px;font-size:12.5px}
.md-exm-warn{display:flex;gap:9px;align-items:flex-start;background:var(--yellow-s);border:1px solid rgba(249,157,32,.35);border-radius:10px;padding:10px 13px;font-size:13px;color:#8a5a00;font-weight:600;line-height:1.45}
.md-exm-warn svg{flex-shrink:0;margin-top:1px;color:var(--yellow-d)}
.md-exm-updated{font-size:11px;color:var(--ink-3)}
@media (max-width:480px){
  .md-exm .md-about-name{font-size:18px}
  .md-hero-excl-note{font-size:11.5px}
}

/* ── Merchant Detail refinements: tracking note · featured media · show-more ── */
.md-hero-track-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;font-weight:600;color:rgba(242,228,177,.55);max-width:520px}
.md-hero-track-note svg{flex-shrink:0;stroke:var(--green)}
.md-fp-banner.has-media{grid-template-columns:auto 1fr auto}
.md-fp-banner-media{position:relative;z-index:1;width:158px;height:158px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);align-self:center}
.md-fp-banner-media img{width:100%;height:100%;object-fit:cover;display:block}
.md-fp-banner-media image-slot{width:100%;height:100%;display:block}
.md-promos-more-wrap{display:flex;justify-content:center;margin-top:18px}
.md-promos-more{font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--ink);background:var(--white);border:1.5px solid var(--line-s);border-radius:999px;padding:10px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,box-shadow .15s}
.md-promos-more:hover{border-color:var(--red);box-shadow:var(--sh)}
@media(max-width:900px){.md-fp-banner.has-media{grid-template-columns:1fr auto}.md-fp-banner-media{display:none}}

/* Touch screens: the 28px save / share buttons get a larger tap area (an invisible ring, so layout stays) */
@media (pointer: coarse) {
  .md-promo-save-btn, .md-promo-share-btn { position: relative; }
  /* Sideways to half the 6px gap between them: wider rings overlapped and the share button took the save's taps */
  .md-promo-save-btn::after, .md-promo-share-btn::after { content: ''; position: absolute; inset: -8px -3px; }
}
/* A promotion reached from "See current promotions" or a shared link takes focus without a ring around the section */
#promotions-section:focus, .md-promo-card:focus { outline: none; }
.md-promo-card:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }