/* Deals by Mukesh — "Midnight Durbar" premium design system. Vanilla CSS, no build step.
   Noir + champagne gold + jewel tones. All text meets WCAG AA on dark surfaces. */

:root {
  --noir: #08080b;
  --noir-soft: #0e0e13;
  --card: #121218;
  --card-soft: #17171e;
  --text: #f6f1e3;          /* ivory — 17:1 on noir */
  --muted: #b8ad8d;         /* champagne gray — ~7:1 on noir */
  --faint: #978c72;         /* small secondary text — ~5:1 on noir */
  --line: rgba(212, 175, 55, 0.16);   /* gold hairline */
  --line-strong: rgba(212, 175, 55, 0.38);
  --gold: #d4af37;
  --gold-hi: #f0d878;
  --gold-deep: #8f6f1d;
  --gold-ink: #1a1405;      /* near-black text on gold */
  --ruby: #f43f5e;
  --ruby-soft: #fb7185;     /* ~7:1 on noir */
  --ruby-deep: #9f1239;
  --emerald: #10b981;
  --emerald-soft: #6ee7b7;  /* ~9:1 on noir */
  --emerald-deep: #065f46;
  --sapphire: #38bdf8;
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.6), 0 28px 70px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 8px 30px rgba(212, 175, 55, 0.16);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1400px 500px at 50% -180px, rgba(212, 175, 55, 0.07), transparent 65%),
    var(--noir);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* Visible keyboard focus everywhere (WCAG 2.2). */
:focus-visible {
  outline: 3px solid var(--gold-hi);
  outline-offset: 2px;
  border-radius: 6px;
}

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

/* ---------- Affiliate disclosure bar (top of page, before any affiliate link) ---------- */
.disclosure-bar {
  background: #000;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}
.disclosure-bar p {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.disclosure-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.9);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 8, 11, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  /* The collapsing header changes this element's height on scroll. Opt out
     of scroll anchoring so the browser never "corrects" scrollY mid-toggle
     and fights the collapse hysteresis in JS (that loop shook the hero). */
  overflow-anchor: none;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px 14px;
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand-mark {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.4), 0 0 26px rgba(212, 175, 55, 0.22);
}
.brand-word { min-width: 0; }
/* SEO H1: real crawlable text ("Deals by Mukesh — verified daily deals.")
   rendered with the wordmark artwork as a background, so the visible logo
   look is unchanged. Not cloaking: the text matches what the image says. */
.brand-h1 {
  margin: 0;
  height: 30px;
  width: 141px; /* matches wordmark aspect at 30px height (1082x230) */
  background: url(/logo-wordmark.png?v=20260915a) no-repeat left center / contain;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}
[data-theme="light"] .brand-h1 {
  background-image: url(/logo-wordmark-light.png?v=20260915a);
}
.brand-wordmark {
  height: 30px;
  width: auto;
}
.tagline {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.last-updated {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-hi);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--line-strong);
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.controls { display: flex; flex-direction: column; gap: 10px; }
.search-wrap { position: relative; }
.search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}
#search {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 13px 16px 13px 42px;
  border: 1.5px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  background: var(--noir-soft);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#search::placeholder { color: var(--faint); }
#search:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}

.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(212, 175, 55, 0.22);
  background: var(--noir-soft);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"], .chip.active {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: var(--gold-hi);
  color: var(--gold-ink);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
}

.sort-wrap {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
#sort {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(212, 175, 55, 0.22);
  background: var(--noir-soft);
  color: var(--text);
  cursor: pointer;
}

/* ---------- Hero: Today's Top Deals ---------- */
.hero {
  position: relative;
  background: var(--noir);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/* Jewel-tone aurora: emerald + gold + ruby glows drifting on noir. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(640px 340px at 18% 20%, rgba(16, 185, 129, 0.20), transparent 62%),
    radial-gradient(720px 380px at 82% 30%, rgba(212, 175, 55, 0.20), transparent 60%),
    radial-gradient(560px 320px at 55% 95%, rgba(244, 63, 94, 0.16), transparent 62%),
    radial-gradient(420px 260px at 88% 85%, rgba(56, 189, 248, 0.10), transparent 60%);
  animation: aurora 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aurora {
  0% { transform: translate3d(-2%, 1%, 0) scale(1); }
  50% { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); }
}
.hero-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 38px 20px 32px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-hi);
  margin-bottom: 10px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hero-head h2 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #fff6dd 10%, var(--gold-hi) 35%, #fff 55%, var(--gold) 80%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-text 7s linear infinite;
}
@keyframes shimmer-text {
  to { background-position: 220% center; }
}
.hero-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
}
.hero-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80vw, 330px);
  gap: 16px;
  overflow-x: auto;
  margin-top: 22px;
  padding: 4px 20px 16px;
  margin-left: -20px;
  margin-right: -20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }

/* Hero slider controls — arrows + counter so every top deal is reachable
   without guessing the strip is swipeable. */
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.hero-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 46px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hero-arrow {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold-hi);
  font-size: 1.25rem;
  line-height: 1;
  padding-bottom: 3px;
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.hero-arrow:hover:not(:disabled) { border-color: var(--gold); }
.hero-arrow:disabled { opacity: 0.3; cursor: default; }

.spot {
  scroll-snap-align: start;
  background: linear-gradient(170deg, rgba(30, 30, 40, 0.92), rgba(14, 14, 19, 0.96));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.spot:hover { transform: translateY(-4px); box-shadow: var(--glow-gold), var(--shadow-lg); }
.spot-img { position: relative; aspect-ratio: 16 / 10; background: #0b0b0f; }
.spot-img img { width: 100%; height: 100%; object-fit: cover; }
.spot-badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; gap: 6px;
}
/* Share button on hero cards — opens the same share sheet as grid cards. */
.spot-share {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(8, 8, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.spot-share:hover { border-color: var(--gold); color: var(--gold-hi); }
.spot-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.spot-merchant {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
}
.spot-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spot-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.spot-price { font-size: 1.65rem; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
.spot-was { font-size: 0.95rem; color: var(--faint); text-decoration: line-through; }
.spot-save {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ruby-soft);
}
.spot-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold-ink);
  text-decoration: none;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #c39a2b);
  border-radius: 12px;
  padding: 13px 16px;
  min-height: 48px;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.spot-cta:hover { filter: brightness(1.06); box-shadow: 0 8px 28px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.spot-cta:active { transform: scale(0.98); }

/* ---------- Trust strip ---------- */
.trust-strip {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.05), transparent);
}
.trust-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  gap: 10px 28px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.trust-tick {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
}

/* ---------- Main / tabs / feed ---------- */
.main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 20px 40px;
}
.tabs {
  display: inline-flex;
  gap: 6px;
  background: var(--noir-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 18px;
}
.tab {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  min-height: 44px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tab[aria-pressed="true"], .tab.active {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.12));
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tab-week { font-weight: 600; color: var(--faint); font-size: 0.78rem; }

.section-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.section-title .gold-word { color: var(--gold-hi); }
.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 14px;
}
.result-count {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.week-label {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Deal grid & cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

.card {
  background: linear-gradient(175deg, var(--card-soft), var(--card) 55%);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  animation: card-in 0.5s ease both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--glow-gold), var(--shadow-md);
  border-color: var(--line-strong);
}

.img-wrap { position: relative; aspect-ratio: 1 / 1; background: #1c1c22; overflow: hidden; }
.img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.card:hover .img-wrap img { transform: scale(1.05); }

.badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.badge-save { background: linear-gradient(180deg, var(--ruby-soft), var(--ruby-deep)); color: #fff; }
.badge-new { background: linear-gradient(180deg, var(--emerald-soft), var(--emerald-deep)); color: #04120c; }
.badge-hot { background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep)); color: var(--gold-ink); }
.badge-expired { background: #3a3a44; color: #c9c9d4; }
.badge-drop { background: linear-gradient(180deg, #7dd3fc, #0284c7); color: #04121f; }

.rank-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(212, 175, 55, 0.45);
}

.card-body {
  padding: 13px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.meta-left {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vote-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--noir-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 30px;
  min-width: 30px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.vote-btn[aria-pressed="true"] {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--gold);
  color: var(--gold-hi);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}
.name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.best-stats {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gold-hi);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 5px 9px;
}
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.deal-price {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}
.reg-price { font-size: 0.85rem; color: var(--faint); text-decoration: line-through; }
.save-inline { font-size: 0.76rem; font-weight: 800; color: var(--ruby-soft); }

.promo, .offer-line { font-size: 0.78rem; }
.promo {
  display: flex; align-items: center; gap: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.5);
  color: var(--emerald-soft);
  font-weight: 600;
  border-radius: 10px;
  padding: 7px 10px;
}
.promo button {
  font: inherit; font-size: 0.72rem; font-weight: 800;
  border: 0; border-radius: 8px;
  background: linear-gradient(180deg, var(--emerald-soft), var(--emerald));
  color: #04120c;
  padding: 6px 10px; min-height: 30px;
  cursor: pointer;
}
.offer-line {
  font-weight: 600;
  color: var(--gold-hi);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
}

.shop-btn {
  margin-top: auto;
  display: block;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-decoration: none;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #c39a2b);
  border-radius: 13px;
  padding: 13px 16px;
  min-height: 48px;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.shop-btn:hover { filter: brightness(1.07); box-shadow: 0 8px 28px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.shop-btn:active { transform: scale(0.98); }

/* ---------- Refer & Earn tab ---------- */
.ref-cat {
  grid-column: 1 / -1;
  margin: 14px 0 2px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.ref-cat:first-child { margin-top: 2px; }
.ref-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.ref-card {
  position: relative;
  background: linear-gradient(170deg, rgba(212, 175, 55, 0.10), rgba(18, 18, 24, 0.95) 45%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: card-in 0.5s ease both;
}
.ref-card:hover { transform: translateY(-4px); box-shadow: var(--glow-gold), var(--shadow-md); }
.badge-ref {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-hi);
  border: 1px solid var(--line-strong);
  background: rgba(212, 175, 55, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
}
.ref-reward {
  margin: 6px 0 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ref-name { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.ref-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ref-benefits li { position: relative; padding-left: 22px; font-size: 0.85rem; color: var(--text); opacity: 0.88; line-height: 1.45; }
.ref-benefits li::before { content: '\2713'; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }
.ref-blurb { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
.ref-cta { margin-top: 10px; }

/* ---------- Skeleton loaders ---------- */
.card.skeleton { pointer-events: none; animation: none; }
.sk-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(100deg, #17171e 40%, #22222b 50%, #17171e 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.sk-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 9px; }
.sk-line {
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(100deg, #17171e 40%, #22222b 50%, #17171e 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Load more / empty ---------- */
.load-more-wrap { text-align: center; margin: 26px 0 6px; }
.load-more-btn {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--gold-hi);
  background: transparent;
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 14px 34px;
  min-height: 52px;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(212, 175, 55, 0.08);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.load-more-btn:hover { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink); box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4); }
.load-more-btn:active { transform: scale(0.97); }

.empty { text-align: center; padding: 56px 20px; }
.empty-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text); }
.empty-sub { margin: 8px 0 0; color: var(--muted); }

/* ---------- Alerts band ---------- */
.alerts {
  margin-top: 44px;
  border-radius: 24px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(600px 220px at 15% 0%, rgba(212, 175, 55, 0.16), transparent 60%),
    radial-gradient(500px 260px at 90% 100%, rgba(16, 185, 129, 0.14), transparent 60%),
    linear-gradient(135deg, #0d1512 0%, #0a0f0d 60%, #08080b 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.alerts-inner { padding: 34px 28px; text-align: center; }
.alerts h2 { margin: 0; font-size: 1.45rem; font-weight: 900; letter-spacing: -0.01em; color: var(--gold-hi); }
.alerts-sub { margin: 8px 0 0; color: var(--muted); font-weight: 500; }
.alerts-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-radius: 999px;
  padding: 13px 24px;
  min-height: 52px;
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.alert-btn:hover { filter: brightness(1.07); box-shadow: 0 8px 30px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.alert-btn:active { transform: scale(0.97); }
.alert-btn svg { flex: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: #000;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  margin-top: 0;
}
.footer-brand {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 20px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(212,175,55,.35); }
.footer-brand span { font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.site-footer .disclosure,
.site-footer .copyright {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.footer-nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.footer-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 2px;
}
.footer-col a {
  font-size: 0.83rem;
  color: var(--faint);
  text-decoration: none;
}
.footer-col a:hover { color: var(--gold-hi); text-decoration: underline; }
.site-footer .disclosure {
  padding-top: 18px;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--faint);
}
.site-footer .disclosure strong { color: var(--gold-hi); }
.site-footer .copyright {
  padding-top: 12px;
  padding-bottom: 28px;
  font-size: 0.78rem;
  color: var(--faint);
}

/* ---------- Theme: "Champagne Morning" light mode ----------
   The site is dark-first ("Midnight Durbar"). Setting data-theme="light"
   on <html> flips the palette via variable overrides + targeted fixes
   for the few hardcoded dark surfaces. */
[data-theme="light"] {
  --noir: #f6f2e8;
  --noir-soft: #fffdf8;
  --card: #fffdf8;
  --card-soft: #f1ebdb;
  --text: #221b08;          /* warm near-black — 15:1 on ivory */
  --muted: #6f6143;         /* ~5.5:1 on ivory */
  --faint: #97876a;         /* ~4:1 on ivory */
  --line: rgba(143, 111, 29, 0.28);
  --line-strong: rgba(143, 111, 29, 0.5);
  --gold: #9a7a1e;
  --gold-hi: #8f6f1d;
  --gold-deep: #6e5513;
  --ruby: #e11d48;
  --ruby-soft: #be123c;     /* ~5.5:1 on ivory */
  --ruby-deep: #881337;
  --emerald: #059669;
  --emerald-soft: #047857;  /* ~5:1 on ivory */
  --emerald-deep: #065f46;
  --sapphire: #0284c7;
  --shadow-sm: 0 1px 2px rgba(60, 45, 10, 0.08), 0 2px 10px rgba(60, 45, 10, 0.08);
  --shadow-md: 0 4px 14px rgba(60, 45, 10, 0.10), 0 14px 34px rgba(60, 45, 10, 0.10);
  --shadow-lg: 0 10px 28px rgba(60, 45, 10, 0.12), 0 28px 70px rgba(60, 45, 10, 0.12);
  --glow-gold: 0 0 0 1px rgba(154, 122, 30, 0.4), 0 8px 30px rgba(154, 122, 30, 0.18);
}

/* Hardcoded dark surfaces that variables don't cover. */
[data-theme="light"] .site-header {
  background: rgba(246, 242, 232, 0.92);
  box-shadow: 0 10px 40px rgba(60, 45, 10, 0.10);
}
[data-theme="light"] .hero { color: var(--text); }
[data-theme="light"] .hero-head h2 {
  background: linear-gradient(100deg, #8f6f1d 10%, #b8912f 35%, #6e5513 55%, #a8842a 80%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="light"] .spot {
  background: linear-gradient(170deg, #fffdf8, #f1ebdb 90%);
}
[data-theme="light"] .spot-img { background: #e9e2cf; }
[data-theme="light"] .spot-price { color: var(--text); }
[data-theme="light"] .img-wrap { background: #e9e2cf; }
[data-theme="light"] .deal-price { color: var(--text); }
[data-theme="light"] .site-footer { background: #ece4cf; }
[data-theme="light"] .disclosure-bar { background: #1c1508; }
[data-theme="light"] .alerts {
  background:
    radial-gradient(600px 220px at 15% 0%, rgba(212, 175, 55, 0.20), transparent 60%),
    radial-gradient(500px 260px at 90% 100%, rgba(16, 185, 129, 0.12), transparent 60%),
    linear-gradient(135deg, #fffdf8 0%, #f5efdd 100%);
  color: var(--text);
}
[data-theme="light"] .alerts h2 { color: var(--gold-deep); }
[data-theme="light"] .ref-card {
  background: linear-gradient(170deg, rgba(212, 175, 55, 0.14), #fffdf8 55%);
}
[data-theme="light"] .sk-img,
[data-theme="light"] .sk-line {
  background: linear-gradient(100deg, #e7dfca 40%, #f5f0e1 50%, #e7dfca 60%);
  background-size: 200% 100%;
}
[data-theme="light"] .badge-expired { background: #ddd3b8; color: #6f6143; }
[data-theme="light"] .share-backdrop { background: rgba(40, 30, 10, 0.5); }
/* Theme-aware logos: bronze-on-transparent variants swap in for light mode. */
.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }
[data-theme="light"] .footer-brand img.logo-light { border-radius: 50%; }

/* ---------- Theme toggle button ---------- */
.header-meta {
  display: flex;
  align-items: center;
  gap: 10px;}
.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--noir-soft);
  color: var(--gold-hi);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.theme-toggle:hover { border-color: var(--gold); box-shadow: var(--glow-gold); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .header-inner { padding: 12px 14px; }
  .brand-row { flex-wrap: wrap; }
  .brand-lockup { flex: 1 1 auto; }
  .brand-mark { width: 46px; height: 46px; }
  .brand-wordmark { height: 24px; }
  .tagline { font-size: 0.74rem; }
  .last-updated { font-size: 0.66rem; padding: 6px 10px; }
  .main { padding: 16px 14px 32px; }
  .hero-inner { padding: 28px 14px 26px; }
  .hero-head h2 { font-size: 1.5rem; }
  .hero-track { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .trust-inner { padding: 12px 14px; gap: 8px 18px; }
  .feed-head { margin-bottom: 12px; }
  .disclosure-bar p { font-size: 0.66rem; }
  .alerts-inner { padding: 28px 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .card:hover .img-wrap img { transform: none; }
  .spot:hover { transform: none; }
  .hero-head h2 { -webkit-text-fill-color: var(--gold-hi); color: var(--gold-hi); background: none; }
}

/* ---- Share buttons & share sheet ---- */
.meta-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.share-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--muted);
  background: var(--noir-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.share-btn:hover {
  color: var(--gold-hi);
  border-color: var(--gold);
}
.share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 4, 8, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 max(1.5rem, env(safe-area-inset-bottom));
}
.share-backdrop[hidden] { display: none; }
.share-sheet {
  width: min(420px, calc(100% - 2rem));
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
.share-title {
  margin: 0 0 0.8rem;
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  text-align: center;
}
.share-options {
  display: flex;
  gap: 0.6rem;
}
.share-opt {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.3rem;
  border-radius: 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.share-opt-icon { font-size: 1.25rem; line-height: 1; }
.share-wa {
  color: #6ee7b7;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.45);
}
.share-ig {
  color: #f9a8d4;
  background: rgba(225, 48, 108, 0.1);
  border: 1px solid rgba(225, 48, 108, 0.5);
}
.share-copy {
  color: var(--gold-hi);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--line-strong);
}
.share-note {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.share-close {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

/* ---- Spotlight (single-deal deep link view) ---- */
.spotlight-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0.5rem 0 2rem;
}
.spotlight-back {
  display: inline-block;
  margin-bottom: 0.9rem;
  color: var(--gold-hi);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.spotlight-back:hover { text-decoration: underline; }
.spotlight-card .card { max-width: 100%; }
.spotlight-note {
  margin-top: 1rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.82rem;
}

/* ---------- Perk popup ---------- */
.perk-pop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(340px, calc(100vw - 32px));
  z-index: 80;
  background: linear-gradient(170deg, rgba(212, 175, 55, 0.14), var(--card) 55%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), var(--glow-gold);
  padding: 18px 18px 12px;
  transform: translateY(28px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.perk-pop.show { transform: none; opacity: 1; pointer-events: auto; }
.perk-pop-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.perk-pop-close:hover { color: var(--text); border-color: var(--line-strong); }
.perk-pop-eyebrow {
  display: block;
  margin-bottom: 6px;
  padding-right: 30px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.perk-pop-reward {
  margin: 0 0 4px;
  padding-right: 26px;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  background: linear-gradient(100deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.perk-pop-name { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; color: var(--text); }
.perk-pop-benefits { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.perk-pop-benefits li { position: relative; padding-left: 20px; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.perk-pop-benefits li::before { content: '\2713'; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }
.perk-pop-cta { margin: 2px 0 0; min-height: 44px; padding: 11px 14px; font-size: 0.88rem; }
.perk-pop-all {
  display: block;
  text-align: center;
  margin-top: 6px;
  width: 100%;
  padding: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: none;
  cursor: pointer;
}
.perk-pop-all:hover { text-decoration: underline; }
.perk-pop-bar { height: 3px; background: var(--line); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.perk-pop-bar > span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform-origin: left;
}
@keyframes perk-drain {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ============ Product-owner batch (2026-09-22): growth + conversion ============ */

/* 1. Collapsing sticky header — shrinks on scroll so it never covers CTAs */
.site-header .brand-row,
.site-header .header-inner,
.site-header .brand-mark,
.site-header .tagline,
.site-header .controls {
  transition: padding 0.25s ease, margin 0.25s ease, max-height 0.25s ease, opacity 0.2s ease;
}
.site-header.collapsed .header-inner { padding-top: 8px; padding-bottom: 8px; }
.site-header.collapsed .brand-row { margin-bottom: 6px; }
.site-header.collapsed .brand-mark { width: 38px; height: 38px; }
.site-header.collapsed .tagline { display: none; }
.site-header.collapsed .controls { display: none; }

/* 2. Telegram button in header */
.tg-head-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #229ED9;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.tg-head-btn:hover { background: #1b8bc0; color: #fff; }
@media (max-width: 560px) {
  .tg-head-btn { padding: 9px 11px; }
  .tg-head-label { display: none; }
}

/* 3. In-feed Telegram card (injected after the first few deals) */
.tg-feed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 28px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1b6fa8 0%, #229ED9 60%, #37b6f0 100%);
  color: #fff;
  text-decoration: none;
  min-height: 280px;
}
.tg-feed-card:hover { color: #fff; filter: brightness(1.06); }
.tg-feed-card .tg-feed-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
}
.tg-feed-card h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.tg-feed-card p { margin: 0; font-size: 0.88rem; opacity: 0.92; font-weight: 500; }
.tg-feed-card .tg-feed-cta {
  margin-top: 4px; padding: 10px 22px; border-radius: 999px;
  background: #fff; color: #14709f; font-weight: 800; font-size: 0.9rem;
}

/* 4. Full store names — never truncate mid-name */
.meta-left {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* 5. Compact mobile hero — a deal visible within a second.
   Cards are deliberately narrower than the viewport so the next card peeks
   in at the strip edge, signalling that the strip is swipeable. */
@media (max-width: 760px) {
  .hero-inner { padding: 18px 14px 18px; }
  .hero-eyebrow { font-size: 0.62rem; }
  .hero-head h2 { font-size: 1.25rem; margin: 2px 0; }
  .hero-sub { display: none; }
  .hero-track { margin-top: 12px; grid-auto-columns: min(72vw, 300px); }
}

/* 6. Category chips — short, no counts, smooth scroll */
.chips-cat { scroll-behavior: smooth; }
.chip { white-space: nowrap; }
/* Category "More" overflow menu: top 5 categories stay visible as chips,
   the rest live under this dropdown so the first screen stays scannable.
   The menu is rendered at body level and positioned fixed under the More
   button by JS — the chips row is a horizontal scroller (overflow-x: auto)
   and would clip any menu positioned inside it. */
.chip-more-wrap { flex: none; }
.chip-more-menu {
  position: fixed;
  /* top/left are set by JS (positionMoreMenu) relative to the viewport */
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--card, #14141b);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 300;
}
.chip-more-menu .chip {
  display: block;
  width: 100%;
  text-align: left;
  margin: 2px 0;
}
[data-theme="light"] .chip-more-menu { background: #fffdf6; }

/* 7. Price-drop / condition as card-body text (badges stay single on image) */
.deal-flag {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #ff5a5a);
}
.deal-flag.condition-flag { color: var(--muted); font-weight: 600; }
.deal-flag.bifl-flag { color: var(--gold); }
/* BIFL filter chip — gold outline so it reads as a trust tag, not a category */
.chip-bifl { border-color: var(--gold); color: var(--gold); }
.chip-bifl.active { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink); border-color: var(--gold-hi); }