/* ── Reset & Base ─────────────────────────────────── */
@import url('/vendor/bootstrap-icons/bootstrap-icons.css');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Remove mobile tap highlight & focus rings ─────────── */
* { -webkit-tap-highlight-color: transparent; }
*:focus { outline: none; }
*:focus-visible { outline: none; }
button:focus, a:focus, input:focus, select:focus, textarea:focus {
  outline: none; box-shadow: none;
}


:root {
  --bg:        #0d1117;
  --bg2:       #161b22;
  --bg3:       #21262d;
  --border:    #30363d;
  --accent:    #f7a236;
  --accent2:   #e35d2b;
  --green:     #3fb950;
  --red:       #f85149;
  --text:      #e6edf3;
  --muted:     #8b949e;
  --card-bg:   #161b22;
  --radius:    14px;
  --shadow:    0 4px 24px rgba(0,0,0,0.4);
}


/* ── Light Mode ─────────────────────────────────────── */
body.light {
  --bg:      #f6f8fa;
  --bg2:     #ffffff;
  --bg3:     #eaeef2;
  --border:  #d0d7de;
  --text:    #1f2328;
  --muted:   #656d76;
  --card-bg: #ffffff;
  --shadow:  0 4px 24px rgba(0,0,0,0.10);
}
body { transition: background-color .25s, color .25s; }

/* ── Theme Toggle Pill (Day/Night Slider) ───────────────── */
.theme-toggle-pill {
  position: relative;
  display: flex;
  align-items: center;
  width: 96px;
  height: 30px;
  border-radius: 100px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  user-select: none;
  background: #111;
  border: 1.5px solid #333;
  transition: background .35s ease, border-color .35s ease;
  overflow: hidden;
}
body.light .theme-toggle-pill {
  background: #d0d0d0;
  border-color: #aaa;
}
.theme-toggle-pill:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(247,162,54,0.15);
}
.toggle-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  pointer-events: none;
  transition: opacity .3s ease;
  white-space: nowrap;
  line-height: 1;
}
.toggle-label-night {
  left: 8px;
  color: rgba(255,255,255,0.9);
  opacity: 1;
}
.toggle-label-day {
  right: 8px;
  color: #444;
  opacity: 0;
}
body.light .toggle-label-night { opacity: 0; }
body.light .toggle-label-day   { opacity: 1; }
.toggle-knob {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(66px) translateY(-50%);
  transition: transform .42s cubic-bezier(.34,1.45,.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
body.light .toggle-knob {
  transform: translateX(0) translateY(-50%);
}
.knob-icon { pointer-events: none; }
.theme-toggle-pill .knob-sun  { display: none  !important; color: #f59e0b; }
.theme-toggle-pill .knob-moon { display: block !important; color: #334155; }
body.light .theme-toggle-pill .knob-sun  { display: block !important; }
body.light .theme-toggle-pill .knob-moon { display: none  !important; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(247,162,54,0.10) 0%, transparent 70%);
}


/* ── Navbar skeleton loading ─────────────────────────────────────────────────
   .navbar-loading hides the dynamic logo & channel buttons, shows shimmer
   bones instead. Class is removed by loadSiteConfig() once config arrives.
   ─────────────────────────────────────────────────────────────────────────── */

/* Skeleton bones inside the navbar — hidden by default */
.nav-sk {
  display: none;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-sk-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
}
.nav-sk-text {
  width: 96px;
  height: 14px;
  border-radius: 6px;
}

/* When loading: show skeleton, hide real logo + channels */
.navbar-loading .nav-sk        { display: flex; }
.navbar-loading .logo          { visibility: hidden; width: 0; overflow: hidden; margin: 0; padding: 0; }
.navbar-loading #navChannels   { visibility: hidden; }
.navbar-loading .nav-links     { visibility: hidden; }

/* Navbar sk-bone uses the same shimmer as card skeletons */
.nav-sk .sk-bone {
  background: linear-gradient(
    90deg,
    var(--bg3, #21262d) 0%,
    color-mix(in srgb, var(--bg3, #21262d) 60%, var(--text, #e6edf3)) 40%,
    var(--bg3, #21262d) 80%
  );
  background-size: 400% 100%;
  animation: skShimmer 1.4s ease-in-out infinite;
}
body.light .nav-sk .sk-bone {
  background: linear-gradient(
    90deg,
    #e2e8f0 0%, #f0f4f8 40%, #e2e8f0 80%
  );
  background-size: 400% 100%;
  animation: skShimmer 1.4s ease-in-out infinite;
}

/* Smooth fade-in for logo after skeleton removed */
.logo { transition: opacity .25s ease; }
.navbar-loading .logo { opacity: 0; }

/* ── Navbar ───────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13,17,23,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(247,162,54,0.15);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.25);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  padding: 11px 20px;
}
/* Keep the public navbar focused while preserving the site identity. */
.navbar .nav-sk,
.navbar .nav-links,
.navbar .nav-channels {
  display: none !important;
}
.navbar .logo {
  display: flex !important;
}
.logo {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--text);
  font-weight: 800; font-size: 1rem; letter-spacing: -0.03em;
}
.logo-icon { font-size: 1.1rem; }
.logo-text {
  /* Keep the brand tied to the selected theme. The old gradient used the
     legacy orange accent2 even when the custom palette had another accent. */
  background: none;
  color: var(--accent);
  -webkit-text-fill-color: currentColor;
}

.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-link {
  padding: 5px 13px; border-radius: 8px;
  text-decoration: none; color: var(--muted);
  font-size: 0.85rem; font-weight: 500;
  transition: all .18s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-link.active { color: var(--accent); background: rgba(247,162,54,0.1); font-weight: 600; }
body.light .navbar {
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.06);
}
/* search-wrap always dark */
body.light .search-input { color: var(--text); }
body.light .chip { background: var(--bg2); border-color: var(--border); color: var(--muted); }
body.light .chip:hover { background: var(--bg3); color: var(--text); }
body.light .deal-card { background: var(--bg2); border-color: var(--border); }
body.light .deal-card:hover { border-color: var(--accent); }
body.light .card-title { color: var(--text); }
body.light .footer { background: var(--bg2); border-color: var(--border); }

.btn-buyfast {
  margin-left: auto;
  padding: 9px 20px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-weight: 700; font-size: 0.9rem;
  text-decoration: none; display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 12px rgba(247,162,54,0.35);
  transition: transform .15s, box-shadow .15s;
}
.btn-buyfast:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(247,162,54,0.5); }

/* ── Hero ─────────────────────────────────────────── */
.hero {
  padding: 72px 24px 52px;
  text-align: center;
}
.hero-inner { max-width: 680px; margin: 0 auto; }

/* ── Search glow ring ──────────────────────────────────────── */
.search-glow-ring {
  position: relative;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(135deg, #8a9fc8 0%, #5a6a9a 40%, #3d4a7e 100%);
  box-shadow:
    0 0 8px rgba(100, 120, 180, 0.18),
    0 0 20px rgba(80, 100, 160, 0.10);
  max-width: 640px;
  margin: 0 auto;
  transition: box-shadow .3s;
}
.search-glow-ring:focus-within {
  box-shadow:
    0 0 14px rgba(120, 145, 200, 0.32),
    0 0 32px rgba(90, 115, 175, 0.18);
}

.search-wrap {
  display: flex; align-items: center; gap: 0;
  background: #0e0e18 !important;
  border: none;
  border-radius: 999px;
  padding: 7px 7px 7px 20px;
  box-shadow: none;
}
.search-icon { font-size: 1.1rem; margin-right: 4px; }
.search-icon-svg {
  flex-shrink: 0;
  margin-right: 10px;
  color: rgba(180,180,210,0.55);
  transition: color .2s;
}
.search-glow-ring:focus-within .search-icon-svg { color: #7b9ef4; }
.search-input {
  flex: 1; background: none; border: none; outline: none;
  color: #e8e8f0 !important; font-size: 1rem; font-family: inherit;
  padding: 9px 4px;
  min-width: 0;
}
.search-input::placeholder { color: rgba(180,180,210,0.55) !important; font-style: italic; }
.search-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; color: #fff; font-weight: 700; font-size: 0.9rem;
  padding: 11px 24px; border-radius: 999px; cursor: pointer;
  transition: opacity .15s, transform .15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.search-btn:hover { opacity: 0.88; transform: scale(1.03); }
.search-clear-btn {
  background: rgba(255,255,255,0.10);
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
  transition: background .15s, color .15s;
}
.search-clear-btn:hover { background: rgba(255,255,255,0.18); color: var(--text); }
/* search-clear always dark */
/* search bar light-mode overrides */
body.light .search-wrap {
  background: #f0f2f8 !important;
}
body.light .search-input {
  color: #1a1a2e !important;
}
body.light .search-input::placeholder {
  color: rgba(80,80,120,0.5) !important;
}
body.light .search-glow-ring {
  background: linear-gradient(135deg, #b0bce8 0%, #8a9fd8 40%, #6a7fc8 100%);
}
body.light .search-clear-btn {
  background: rgba(0,0,0,0.07);
  color: #444;
}
body.light .search-clear-btn:hover {
  background: rgba(0,0,0,0.13);
  color: #111;
}

.hero-sub {
  margin-top: 18px; color: var(--muted);
  font-size: 0.88rem; letter-spacing: 0.01em;
}

.chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: 20px;
}
.chip {
  padding: 7px 16px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.83rem; font-family: inherit;
  cursor: pointer; transition: all .18s;
}
.chip:hover { border-color: var(--accent); color: var(--text); background: var(--bg3); }

/* ── Sections ─────────────────────────────────────── */
.deals-section {
  max-width: 1200px; margin: 0 auto 52px;
  padding: 0 24px;
}
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.section-title {
  font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.title-icon { font-size: 1.3rem; }
.updated-badge {
  font-size: 0.78rem; color: var(--muted);
  background: var(--bg2); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px;
}

/* ── Cards scroll ─────────────────────────────────── */
.cards-scroll {
  display: flex; gap: 16px;
  overflow-x: auto;
  /* Fix 1: padding-top gives vertical room so card hover doesn't clip */
  padding: 8px 4px 10px 4px;
  /* Fix 3: GPU layer + momentum scroll */
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.cards-scroll::-webkit-scrollbar { height: 5px; }
.cards-scroll::-webkit-scrollbar-track { background: transparent; }
.cards-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Deal Card ─────────────────────────────────────── */
.deal-card {
  flex: 0 0 160px; width: 160px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease-out, box-shadow .18s ease-out;
  cursor: pointer; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  position: relative;
  will-change: transform;
  backface-visibility: hidden;
}
.deal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
}

/* Time badge — top LEFT of image */
.card-age {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  background: rgba(0,0,0,0.62); backdrop-filter: blur(4px);
  color: #e2e8f0; font-size: 0.68rem; font-weight: 500;
  padding: 3px 7px; border-radius: 20px;
  pointer-events: none;
}

.card-img-wrap {
  width: 100%; height: 145px; overflow: hidden;
  background: #f8f8f8;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.card-img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.deal-card:hover .card-img { transform: scale(1.05); }
.card-img-placeholder {
  font-size: 3rem; color: var(--muted);
}
.card-image-unavailable {
  position: absolute; top: 50%; left: 50%; right: auto; z-index: 6;
  transform: translate(-50%, -50%);
  min-height: 24px; max-width: calc(100% - 16px);
  padding: 5px 8px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(127, 0, 0, .55);
  font-size: .58rem; line-height: 1; font-weight: 900;
  letter-spacing: .04em; white-space: nowrap;
  pointer-events: auto; cursor: help;
}
.card-image-unavailable[hidden] { display: none; }

.card-body {
  padding: 10px 10px 8px;
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}

.card-title {
  font-size: 0.78rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 2px;
}

.card-price { font-size: 1.08rem; font-weight: 700; color: var(--text); }
.card-original {
  font-size: 0.72rem; color: var(--muted);
  text-decoration: none;
}
.card-save { font-size: 0.72rem; color: var(--green); font-weight: 600; }
.card-stock { font-size: 0.72rem; color: var(--red); font-weight: 600; }

.card-bottom-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.platform-badge {
  font-size: 0.68rem; font-weight: 700; padding: 2px 7px;
  border-radius: 20px;
}
.platform-amazon { background: #ff9900; color: #111; }
.platform-flipkart { background: #2874f0; color: #fff; }
.platform-meesho { background: #f43397; color: #fff; }

.card-discount {
  font-size: 0.7rem; font-weight: 700;
  color: var(--green);
}

/* ── Disclaimer ───────────────────────────────────── */
.disclaimer {
  text-align: center; font-size: 0.82rem; color: var(--accent);
  padding: 12px 24px 40px;
}

/* ── Footer ───────────────────────────────────────── */
.footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 48px 24px 24px;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 48px; flex-wrap: wrap;
}
.footer-brand { flex: 1; min-width: 200px; }
.footer-desc { margin-top: 10px; font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

.footer-links, .footer-social { min-width: 160px; }
.footer-heading { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.footer-links a {
  display: block; color: var(--muted); text-decoration: none;
  font-size: 0.88rem; margin-bottom: 10px;
  transition: color .15s;
}
.footer-links a:hover { color: var(--text); }

.social-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.social-btn {
  padding: 10px 18px; border-radius: 10px;
  font-size: 0.85rem; font-weight: 600;
  text-decoration: none; transition: opacity .15s;
}
.social-btn:hover { opacity: 0.85; }
.social-btn.whatsapp { background: #25d366; color: #fff; }
.social-btn.telegram   { background: #229ed9; color: #fff; }
.social-btn.custom-img { background: rgba(255,255,255,.12); color: var(--text,#fff); border: 1.5px solid rgba(255,255,255,.2); }

.footer-bottom {
  max-width: 1200px; margin: 32px auto 0;
  padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--muted); text-align: center;
}

/* ── Homepage product lookup result ───────────────── */
.product-result-section {
  margin-top: -18px;
  margin-bottom: 42px;
}
.product-result-section .cards-scroll {
  overflow-x: visible;
}
.product-result-note {
  margin: -8px 0 14px;
  color: var(--muted);
  font-size: .86rem;
}
.product-result-note.is-error {
  color: #fca5a5;
}
.product-result-section .deal-card {
  flex-basis: 190px;
  width: 190px;
}

/* ── Search results state ─────────────────────────── */
.no-results {
  text-align: center; padding: 40px;
  color: var(--muted); font-size: 0.95rem; width: 100%;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 640px) {
  .nav-links { display: none; }
  .hero { padding: 48px 16px 36px; }
  .deals-section { padding: 0 16px; }
  .catalog-section { padding: 0 16px 32px; }
  .footer-inner { gap: 28px; }
  .search-btn { padding: 10px 14px; }
}

/* ── Navbar right-side controls ──────────────────────────────────────────── */
.nav-right-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ── Rotating alert pill ─────────────────────────── */
.nav-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(230px, 42vw);
  padding: 9px 17px 9px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .2s, transform .2s, border-color .2s;
}
.nav-alert-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.3);
}
.nav-alert-pill.is-changing {
  animation: alert-pill-rotate .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes alert-pill-rotate {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  46% {
    opacity: 0;
    transform: translateY(-5px);
  }
  54% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-alert-pill .alert-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-pill-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--alert-pill-dot-color, #00e676);
  box-shadow: 0 0 0 0 var(--alert-pill-dot-glow, rgba(0,230,118,.65));
  animation: alert-pill-pulse 1.6s ease-out infinite;
}
@keyframes alert-pill-pulse {
  0% { box-shadow: 0 0 0 0 var(--alert-pill-dot-glow, rgba(0,230,118,.65)); opacity: 1; }
  70% { box-shadow: 0 0 0 8px transparent; opacity: .72; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
body.light .nav-alert-pill { background:rgba(0,0,0,.045); border-color:rgba(0,0,0,.14); }
.nav-alert-pill-style-pill { border-radius: 999px; }
.nav-alert-pill-style-circle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  max-width: 42px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.nav-alert-pill-style-circle .alert-pill-label { display: none; }
.nav-alert-pill-style-rounded { border-radius: 14px; }
.nav-alert-pill-style-square { border-radius: 3px; }
.nav-alert-pill-style-outline {
  background: transparent;
  border-color: currentColor;
}
.nav-alert-pill-style-gradient {
  background: linear-gradient(135deg, #7c3aed, #f7a236);
  border-color: transparent;
  color: #fff;
}
.nav-alert-pill-color-telegram { background: #229ed9; border-color: #229ed9; color: #fff; }
.nav-alert-pill-color-whatsapp { background: #25d366; border-color: #25d366; color: #071b0d; }
.nav-alert-pill-color-orange { background: linear-gradient(135deg, #f7a236, #e35d2b); border-color: transparent; color: #fff; }
.nav-alert-pill-color-purple { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.nav-alert-pill-color-accent { background: linear-gradient(135deg, #f7a236, #f59e0b); border-color: transparent; color: #16100a; }
.nav-alert-pill-style-outline.nav-alert-pill-color-telegram,
.nav-alert-pill-style-outline.nav-alert-pill-color-whatsapp,
.nav-alert-pill-style-outline.nav-alert-pill-color-orange,
.nav-alert-pill-style-outline.nav-alert-pill-color-purple,
.nav-alert-pill-style-outline.nav-alert-pill-color-accent {
  background: transparent;
  border-color: currentColor;
}
.nav-alert-pill-style-gradient.nav-alert-pill-color-telegram,
.nav-alert-pill-style-gradient.nav-alert-pill-color-whatsapp,
.nav-alert-pill-style-gradient.nav-alert-pill-color-orange,
.nav-alert-pill-style-gradient.nav-alert-pill-color-purple,
.nav-alert-pill-style-gradient.nav-alert-pill-color-accent {
  background: linear-gradient(135deg, #7c3aed, #f7a236);
  border-color: transparent;
  color: #fff;
}
/* Alert-pill presentation overrides: the selected shape owns layout while
   the selected color supplies the palette. */
.nav-alert-pill-color-telegram {
  --alert-pill-color: #229ed9;
  --alert-pill-bg: #229ed9;
  --alert-pill-text: #fff;
}
.nav-alert-pill-color-whatsapp {
  --alert-pill-color: #25d366;
  --alert-pill-bg: #25d366;
  --alert-pill-text: #071b0d;
}
.nav-alert-pill-color-orange {
  --alert-pill-color: #e35d2b;
  --alert-pill-bg: linear-gradient(135deg, #f7a236, #e35d2b);
  --alert-pill-text: #fff;
}
.nav-alert-pill-color-purple {
  --alert-pill-color: #7c3aed;
  --alert-pill-bg: #7c3aed;
  --alert-pill-text: #fff;
}
.nav-alert-pill-color-accent {
  --alert-pill-color: #f59e0b;
  --alert-pill-bg: linear-gradient(135deg, #f7a236, #f59e0b);
  --alert-pill-text: #16100a;
}
.nav-alert-pill-color-custom {
  --alert-pill-color: var(--alert-pill-custom-color, #229ed9);
  --alert-pill-bg: var(--alert-pill-custom-color, #229ed9);
  --alert-pill-text: var(--alert-pill-custom-text, #fff);
}
/* The selected alert color belongs to the blinking status dot only. */
.nav-alert-pill-color-telegram,
.nav-alert-pill-color-whatsapp,
.nav-alert-pill-color-orange,
.nav-alert-pill-color-purple,
.nav-alert-pill-color-accent {
  --alert-pill-dot-color: currentColor;
}
.nav-alert-pill-color-custom {
  --alert-pill-dot-color: var(--alert-pill-custom-color, #229ed9);
}
.nav-alert-pill .alert-pill-label {
  color: inherit;
}
.nav-alert-pill-style-pill,
.nav-alert-pill-style-rounded,
.nav-alert-pill-style-square {
  background: var(--alert-pill-bg) !important;
  border-color: var(--alert-pill-color) !important;
  color: var(--alert-pill-text) !important;
}
.nav-alert-pill-style-pill { border-radius: 999px !important; }
.nav-alert-pill-style-rounded { border-radius: 14px !important; }
.nav-alert-pill-style-square { border-radius: 3px !important; }
.nav-alert-pill-style-outline {
  background: transparent !important;
  border: 1px solid var(--alert-pill-color) !important;
  color: var(--alert-pill-color) !important;
  border-radius: 999px !important;
}
.nav-alert-pill-style-gradient {
  background: linear-gradient(135deg, color-mix(in srgb, var(--alert-pill-color) 72%, #7c3aed), var(--alert-pill-color)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.nav-alert-pill-style-circle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--alert-pill-bg) !important;
  border-color: var(--alert-pill-color) !important;
  color: var(--alert-pill-text) !important;
}
.nav-alert-pill-style-circle .alert-pill-label { display: none !important; }
/* The selected color belongs to the animated dot. Each style keeps its own
   visible surface and edge so non-pill variants do not collapse into the same
   faint neutral button. */
.nav-alert-pill.nav-alert-pill-style-pill,
.nav-alert-pill.nav-alert-pill-style-rounded,
.nav-alert-pill.nav-alert-pill-style-square,
.nav-alert-pill.nav-alert-pill-style-circle {
  background: rgba(255,255,255,.085) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: var(--text) !important;
}
.nav-alert-pill.nav-alert-pill-style-pill {
  border-radius: 999px !important;
}
.nav-alert-pill.nav-alert-pill-style-rounded {
  border-radius: 14px !important;
  background: rgba(255,255,255,.12) !important;
}
.nav-alert-pill.nav-alert-pill-style-square {
  border-radius: 3px !important;
  background: rgba(255,255,255,.105) !important;
}
.nav-alert-pill.nav-alert-pill-style-circle {
  background: rgba(255,255,255,.12) !important;
  border-width: 2px !important;
}
.nav-alert-pill.nav-alert-pill-style-outline {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  color: var(--text) !important;
}
.nav-alert-pill.nav-alert-pill-style-gradient {
  background: linear-gradient(135deg, #7c3aed, #f7a236) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
}
body.light .nav-alert-pill.nav-alert-pill-style-pill,
body.light .nav-alert-pill.nav-alert-pill-style-rounded,
body.light .nav-alert-pill.nav-alert-pill-style-square,
body.light .nav-alert-pill.nav-alert-pill-style-circle {
  background: #f1f4f8 !important;
  border-color: #c4ccd8 !important;
  color: #1f2328 !important;
}
body.light .nav-alert-pill.nav-alert-pill-style-rounded {
  background: #e9eef5 !important;
}
body.light .nav-alert-pill.nav-alert-pill-style-square {
  background: #edf1f6 !important;
}
body.light .nav-alert-pill.nav-alert-pill-style-outline {
  background: transparent !important;
  border-color: #7c8797 !important;
  color: #1f2328 !important;
}
body.light .nav-alert-pill.nav-alert-pill-style-gradient {
  background: linear-gradient(135deg, #7c3aed, #f7a236) !important;
  border-color: rgba(80,60,120,.28) !important;
  color: #fff !important;
}
.nav-alert-pill.nav-alert-pill-color-telegram { --alert-pill-dot-color: #229ed9; }
.nav-alert-pill.nav-alert-pill-color-whatsapp { --alert-pill-dot-color: #25d366; }
.nav-alert-pill.nav-alert-pill-color-orange { --alert-pill-dot-color: #e35d2b; }
.nav-alert-pill.nav-alert-pill-color-purple { --alert-pill-dot-color: #7c3aed; }
.nav-alert-pill.nav-alert-pill-color-accent { --alert-pill-dot-color: #f59e0b; }
@media (max-width: 640px) {
  .nav-alert-pill { max-width: 190px; padding: 8px 13px 8px 11px; font-size: .82rem; gap: 8px; }
  .alert-pill-dot { width: 9px; height: 9px; flex-basis: 9px; }
}

/* ── Dynamic Nav Channel Buttons ─────────────────── */
.nav-channels {
  display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
  overflow: hidden; min-width: 0; flex-shrink: 1;
}
.nav-channel-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px; border-radius: 8px;
  font-size: 0.78rem; font-weight: 600;
  text-decoration: none; color: #fff;
  transition: opacity .15s, transform .15s; white-space: nowrap; flex-shrink: 0;
}
.nav-channel-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.nav-channel-btn.telegram { background: #229ed9; }
.nav-channel-btn.whatsapp { background: #25d366; }
.nav-channel-btn.orange   { background: linear-gradient(135deg, #f7a236, #e35d2b); }
.nav-channel-btn.purple   { background: #7c3aed; }
.nav-channel-btn.accent      { background: linear-gradient(135deg, #f7a236, #f59e0b); }
.nav-channel-btn.custom-img  { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.15); }
@media (max-width: 768px) { .nav-channels { display: none; } }

/* Navbar links stay simple and neutral; configured colors remain available
   to outside-navbar/footer renderers. */
.nav-channel-btn,
.nav-channel-btn.telegram,
.nav-channel-btn.whatsapp,
.nav-channel-btn.orange,
.nav-channel-btn.purple,
.nav-channel-btn.accent,
.nav-channel-btn.custom-img {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
}
.nav-channel-btn:hover {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text);
}

/* ── User Panel Hamburger & Drawer ────────────────── */
/* ── Hamburger Button ─────────────────────────────────────────────────────── */
.user-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.user-hamburger:hover {
  border-color: var(--accent);
  background: rgba(247,162,54,0.10);
  box-shadow: 0 0 0 3px rgba(247,162,54,0.10);
}
.user-hamburger span {
  display: block; width: 100%; height: 1.8px;
  background: var(--text); border-radius: 2px;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
  transform-origin: center;
}
.user-hamburger span:nth-child(1) { width: 65%; }
.user-hamburger span:nth-child(3) { width: 80%; }
.user-hamburger.open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); width: 100%; }
.user-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.user-hamburger.open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); width: 100%; }
.user-hamburger.open {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 220;
}
body.light .user-hamburger {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
}
body.light .user-hamburger:hover {
  border-color: var(--accent);
  background: rgba(247,162,54,0.08);
}

@media (max-width: 768px) {
  .nav-inner { gap: 10px; padding: 8px 12px; }
  .navbar .nav-right-group { margin-left: auto; }
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.user-drawer-overlay {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s;
}
.user-drawer-overlay.open { display: block; opacity: 1; }

/* ── Drawer Panel ────────────────────────────────────────────────────────── */
.user-drawer {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: 270px; max-width: 82vw;
  background: rgba(13,17,23,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid rgba(247,162,54,0.12);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: 6px 0 32px rgba(0,0,0,.55), 1px 0 0 rgba(255,255,255,.03);
}
.user-drawer.open { transform: translateX(0); }
body.light .user-drawer {
  background: rgba(248,249,252,0.97);
  border-right-color: rgba(0,0,0,0.08);
  box-shadow: 6px 0 32px rgba(0,0,0,.12);
}

/* ── Drawer Header ───────────────────────────────────────────────────────── */
.user-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.user-drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
}
.user-drawer-header-actions .theme-toggle-pill {
  width: 70px;
  height: 28px;
  margin-left: 0;
}
.user-drawer-header-actions .toggle-label {
  font-size: .35rem;
}
.user-drawer-header-actions .toggle-label-night { left: 5px; }
.user-drawer-header-actions .toggle-label-day { right: 5px; }
.user-drawer-header-actions .toggle-knob {
  transform: translateX(40px) translateY(-50%);
}
body.light .user-drawer-header-actions .toggle-knob {
  transform: translateX(0) translateY(-50%);
}
body.light .user-drawer-header {
  border-bottom-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.user-drawer-title {
  font-size: .95rem; font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.user-drawer-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted); font-size: .8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.user-drawer-close:hover {
  border-color: rgba(255,80,80,0.5);
  background: rgba(255,80,80,0.10);
  color: #ff5050;
}
body.light .user-drawer-close {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}

/* ── Tile List ───────────────────────────────────────────────────────────── */
.user-drawer-tiles {
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  flex: 1;
}

.drawer-tile {
  display: flex; flex-direction: row; align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  text-decoration: none;
  min-height: 54px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text, #e6edf3);
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
  position: relative; overflow: hidden;
}
.drawer-tile-simple,
.drawer-tile-style-pill,
.drawer-tile-style-circle,
.drawer-tile-style-rounded,
.drawer-tile-style-square,
.drawer-tile-style-outline,
.drawer-tile-style-gradient { border-radius: 14px; }
.drawer-tile-style-outline {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07);
}
.drawer-tile-style-gradient {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.07);
}
.drawer-tile::before {
  content: none;
}
.drawer-tile:hover {
  transform: translateY(-1px);
  background: var(--bg3);
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.drawer-tile:active { transform: scale(.98); }

/* Light mode tiles */
body.light .drawer-tile {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: var(--text, #1a1a2e);
}
body.light .drawer-tile:hover {
  background: rgba(0,0,0,0.07);
  border-color: var(--tile-accent, rgba(0,0,0,0.15));
}

.drawer-tile-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text);
  background: var(--bg3);
  border: 1px solid var(--border);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.drawer-tile-label {
  font-size: .84rem; font-weight: 600; text-align: left;
  letter-spacing: .01em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Per-platform accent colours via CSS var */
.drawer-tile-telegram  { --tile-accent: #229ed9; background: rgba(34,158,217,0.07);  border-color: rgba(34,158,217,0.18); }
.drawer-tile-whatsapp  { --tile-accent: #25d366; background: rgba(37,211,102,0.07);  border-color: rgba(37,211,102,0.18); }
.drawer-tile-orange    { --tile-accent: #f7a236; background: rgba(247,162,54,0.07);  border-color: rgba(247,162,54,0.18); }
.drawer-tile-purple    { --tile-accent: #7c3aed; background: rgba(124,58,237,0.07);  border-color: rgba(124,58,237,0.18); }
.drawer-tile-accent    { --tile-accent: #f7a236; background: rgba(247,162,54,0.07);  border-color: rgba(247,162,54,0.18); }
body.light .drawer-tile-telegram  { background: rgba(34,158,217,0.08);  border-color: rgba(34,158,217,0.25); }
body.light .drawer-tile-whatsapp  { background: rgba(37,211,102,0.08);  border-color: rgba(37,211,102,0.25); }
body.light .drawer-tile-orange    { background: rgba(247,162,54,0.08);  border-color: rgba(247,162,54,0.25); }
body.light .drawer-tile-purple    { background: rgba(124,58,237,0.08);  border-color: rgba(124,58,237,0.25); }
body.light .drawer-tile-accent    { background: rgba(247,162,54,0.08);  border-color: rgba(247,162,54,0.25); }

.drawer-empty { color: var(--muted); font-size: .85rem; text-align: center; padding: 28px 0; }

/* Drawer links are intentionally neutral regardless of the saved button
   color. The color setting is still preserved for outside-navbar uses. */
.drawer-tile-simple,
.drawer-tile-simple.drawer-tile-telegram,
.drawer-tile-simple.drawer-tile-whatsapp,
.drawer-tile-simple.drawer-tile-orange,
.drawer-tile-simple.drawer-tile-purple,
.drawer-tile-simple.drawer-tile-accent,
.drawer-tile-simple.drawer-tile-custom-img {
  background: var(--bg2);
  border-color: var(--border);
}
.drawer-tile-simple .drawer-tile-icon {
  color: var(--text);
  background: var(--bg3);
  border-color: var(--border);
}
.drawer-tile-simple:hover {
  background: var(--bg3);
  border-color: var(--border);
}

/* ── Desktop: cards grid instead of horizontal scroll ── */
@media (min-width: 769px) {
  .cards-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    overflow-x: visible;
    padding: 8px 0 0 0;
  }
  .deal-card {
    flex: none;
    width: auto;
  }
}

/* Fix 4: suppress transitions on initial load to prevent theme flash */
body.preload, body.preload * { transition: none !important; }

/* ── Deal status badges (OVER / Out of Stock / Available) ─────────────────── */
.card-status {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 5px; text-transform: uppercase;
  pointer-events: none; user-select: none;
}
.card-status-over {
  background: #e53e3e; color: #fff;
  box-shadow: 0 2px 6px rgba(229,62,62,0.55);
}
.card-status-out_of_stock {
  background: #dc2626; color: #fff;
  box-shadow: 0 2px 8px rgba(185,28,28,0.60);
}
/* Available — show subtle green tick, mostly invisible */
.card-status-available { display: none; }

/* Dim the image slightly for ended/oos deals */
.deal-card[data-status="over"] .card-img,
.deal-card[data-status="out_of_stock"] .card-img {
  filter: grayscale(35%) brightness(0.88);
}

/* Keep unavailable products visible, but make the whole card feel subdued.
   The red badge stays bright because it sits outside the muted card body. */
.deal-card[data-status="out_of_stock"] {
  background: rgba(7, 9, 13, 0.86);
  border-color: rgba(120, 120, 120, 0.42);
}
.deal-card[data-status="out_of_stock"] .card-body {
  background: rgba(0, 0, 0, 0.14);
  opacity: 0.76;
}
.deal-card[data-status="out_of_stock"]:hover {
  border-color: rgba(220, 38, 38, 0.58);
}

/* Admin status pill */
.deal-status-pill {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; margin-left: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.deal-status-pill.active       { background: #2d6a4f; color: #b7e4c7; }
.deal-status-pill.over         { background: #742a2a; color: #fed7d7; }
.deal-status-pill.out_of_stock { background: #744210; color: #fbd38d; }

/* ══════════════════════════════════════════════════════
   EXTENDED THEMES — applied via data-theme="name"
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg:      #0d1117; --bg2: #161b22; --bg3: #21262d;
  --border:  #30363d; --accent: #f7a236; --accent2: #e35d2b;
  --text:    #e6edf3; --muted: #8b949e; --card-bg: #161b22;
  --shadow:  0 4px 24px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg:      #f6f8fa; --bg2: #ffffff; --bg3: #eaeef2;
  --border:  #d0d7de; --accent: #f7a236; --accent2: #e35d2b;
  --text:    #1f2328; --muted: #656d76; --card-bg: #ffffff;
  --shadow:  0 4px 24px rgba(0,0,0,0.10);
}

[data-theme="ocean"] {
  --bg:      #061824; --bg2: #0a2233; --bg3: #0f2d42;
  --border:  #1a4a6b; --accent: #00b4d8; --accent2: #0077a8;
  --text:    #e0f4ff; --muted: #7ab8d4; --card-bg: #0a2233;
  --shadow:  0 4px 24px rgba(0,0,0,0.5); --green: #4ade80; --red: #f87171;
}

[data-theme="forest"] {
  --bg:      #061209; --bg2: #0d1f0f; --bg3: #142b17;
  --border:  #1e4424; --accent: #4ade80; --accent2: #22c55e;
  --text:    #e0ffe8; --muted: #7bc98a; --card-bg: #0d1f0f;
  --shadow:  0 4px 24px rgba(0,0,0,0.5); --red: #f87171;
}

[data-theme="sunset"] {
  --bg:      #1a0d00; --bg2: #2a1a08; --bg3: #3d2510;
  --border:  #5c3a1a; --accent: #ff6b35; --accent2: #ff4500;
  --text:    #fff0e6; --muted: #c4916a; --card-bg: #2a1a08;
  --shadow:  0 4px 24px rgba(0,0,0,0.5); --green: #4ade80; --red: #f87171;
}

[data-theme="purple"] {
  --bg:      #0d0814; --bg2: #160d22; --bg3: #1f1430;
  --border:  #3a2060; --accent: #a855f7; --accent2: #7c3aed;
  --text:    #f0e8ff; --muted: #9d7ec4; --card-bg: #160d22;
  --shadow:  0 4px 24px rgba(0,0,0,0.5); --green: #4ade80; --red: #f87171;
}

[data-theme="rose"] {
  --bg:      #150810; --bg2: #200e18; --bg3: #2e1424;
  --border:  #5a2040; --accent: #f472b6; --accent2: #ec4899;
  --text:    #fff0f6; --muted: #c47899; --card-bg: #200e18;
  --shadow:  0 4px 24px rgba(0,0,0,0.5); --green: #4ade80; --red: #f87171;
}

[data-theme="midnight"] {
  --bg:      #010308; --bg2: #060c18; --bg3: #0c1428;
  --border:  #162040; --accent: #38bdf8; --accent2: #0ea5e9;
  --text:    #e8f4ff; --muted: #6899bb; --card-bg: #060c18;
  --shadow:  0 4px 24px rgba(0,0,0,0.6); --green: #4ade80; --red: #f87171;
}

[data-theme="crimson"] {
  --bg:      #120606; --bg2: #1e0a0a; --bg3: #2c1010;
  --border:  #5c1a1a; --accent: #ef4444; --accent2: #dc2626;
  --text:    #fff0f0; --muted: #c47878; --card-bg: #1e0a0a;
  --shadow:  0 4px 24px rgba(0,0,0,0.5); --green: #4ade80;
}

[data-theme="emerald"] {
  --bg:      #051210; --bg2: #091e1b; --bg3: #102b26;
  --border:  #1a4a40; --accent: #10b981; --accent2: #059669;
  --text:    #e0fff8; --muted: #6ab8a8; --card-bg: #091e1b;
  --shadow:  0 4px 24px rgba(0,0,0,0.5); --green: #4ade80; --red: #f87171;
}


[data-theme="gridnoir"] {
  --bg:      #0b0d13; --bg2: #13161f; --bg3: #1c2030;
  --border:  #252836; --accent: #ece83a; --accent2: #c9c61e;
  --text:    #f0f2ff; --muted:  #7c8098; --card-bg: #13161f;
  --shadow:  0 4px 24px rgba(0,0,0,0.6); --green: #4ade80; --red: #f87171;
}

/* Grid pattern background for gridnoir theme */
body[data-theme="gridnoir"] {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(236,232,58,0.07) 0%, transparent 70%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
}

/* Optional custom-theme background grid. The crossed/none option removes it. */
body[data-theme="coustom"][data-custom-grid="small"] {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 18px 18px;
}
body[data-theme="coustom"][data-custom-grid="medium"] {
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
}
body[data-theme="coustom"][data-custom-grid="large"] {
  background-image:
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* Apply the custom grid at the document level as well as the body level.
   This keeps it visible across the full page instead of making it appear
   only through a translucent broadcast/card surface. */
html[data-theme="coustom"][data-custom-grid="small"],
body[data-theme="coustom"][data-custom-grid="small"] {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 18px 18px;
}
html[data-theme="coustom"][data-custom-grid="medium"],
body[data-theme="coustom"][data-custom-grid="medium"] {
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
}
html[data-theme="coustom"][data-custom-grid="large"],
body[data-theme="coustom"][data-custom-grid="large"] {
  background-image:
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* Custom-theme grid surfaces
   The page background is not visible through opaque component surfaces. Paint
   the same grid on each public surface that has its own background so the
   selected grid remains visible through the whole site, including the mobile
   navbar, search field, deal bodies, footer, and Festival page. Product image
   areas intentionally stay clean and white. */
body[data-theme="coustom"][data-custom-grid="small"] {
  --custom-grid-size: 18px;
  --custom-grid-line: rgba(255,255,255,.045);
}
body[data-theme="coustom"][data-custom-grid="medium"] {
  --custom-grid-size: 30px;
  --custom-grid-line: rgba(255,255,255,.055);
}
body[data-theme="coustom"][data-custom-grid="large"] {
  --custom-grid-size: 46px;
  --custom-grid-line: rgba(255,255,255,.065);
}
body.light[data-theme="coustom"][data-custom-grid="small"],
body.light[data-theme="coustom"][data-custom-grid="medium"],
body.light[data-theme="coustom"][data-custom-grid="large"] {
  --custom-grid-line: rgba(0,0,0,.075);
}

body[data-theme="coustom"][data-custom-grid] .navbar,
body[data-theme="coustom"][data-custom-grid] .search-wrap,
body[data-theme="coustom"][data-custom-grid] .broadcast-msg-card,
body[data-theme="coustom"][data-custom-grid] .card-body,
body[data-theme="coustom"][data-custom-grid] .card-footer,
body[data-theme="coustom"][data-custom-grid] .footer,
body[data-theme="coustom"][data-custom-grid] .reference-product-card,
body[data-theme="coustom"][data-custom-grid] .festival-page,
body[data-theme="coustom"][data-custom-grid] .festival-card,
body[data-theme="coustom"][data-custom-grid] .festival-channel-link {
  background-image:
    linear-gradient(var(--custom-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--custom-grid-line) 1px, transparent 1px);
  background-size: var(--custom-grid-size) var(--custom-grid-size);
}

body[data-theme="coustom"][data-custom-grid] .search-wrap {
  background-color: color-mix(in srgb, var(--bg2) 92%, transparent) !important;
}
body[data-theme="coustom"][data-custom-grid] .festival-page {
  background-color: var(--bg);
}

/* ── All Products Catalog Grid ─────────────────────── */
.catalog-section { padding: 0 24px 32px; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px 0 4px;
}
@media (min-width: 600px)  { .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px)  { .cards-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .cards-grid { grid-template-columns: repeat(5, 1fr); } }

/* Override horizontal-scroll card sizing for grid layout */
.cards-grid .deal-card {
  flex: none;
  width: 100%;
  min-width: 0;
}

/* Taller image on wider cards */
@media (min-width: 600px) {
  .cards-grid .card-img-wrap { height: 170px; }
}




/* ── Skeleton loading cards ──────────────────────────────────────────────────
   Skeleton cards live inside the real deal containers (#recentCards etc.)
   They are replaced naturally when renderSection() writes real innerHTML.
   No JS needed to show them — they're server-rendered HTML from the start.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes skShimmer {
  0%   { background-position: -400% 0; }
  100% { background-position:  400% 0; }
}

.sk-bone {
  background: linear-gradient(
    90deg,
    var(--bg2, #161b22) 0%,
    var(--bg3, #21262d) 40%,
    var(--bg2, #161b22) 80%
  );
  background-size: 400% 100%;
  animation: skShimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}

/* Mirrors .card-img-wrap exactly */
.sk-card .sk-img {
  width: 100%;
  height: 145px;
  border-radius: 0;
}

.sk-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 10px 8px;
}

.sk-line {
  height: 10px;
  border-radius: 4px;
}
.sk-line-long  { width: 85%; }
.sk-line-short { width: 60%; }
.sk-line-price { width: 45%; height: 14px; margin-top: 2px; }

.sk-line-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.sk-badge {
  width: 48px;
  height: 18px;
  border-radius: 20px;
}

/* Stagger shimmer start so cards don't pulse in lockstep */
.sk-card:nth-child(1) .sk-bone { animation-delay: 0s;    }
.sk-card:nth-child(2) .sk-bone { animation-delay: .15s;  }
.sk-card:nth-child(3) .sk-bone { animation-delay: .30s;  }
.sk-card:nth-child(4) .sk-bone { animation-delay: .45s;  }
.sk-card:nth-child(5) .sk-bone { animation-delay: .60s;  }
.sk-card:nth-child(6) .sk-bone { animation-delay: .10s;  }
.sk-card:nth-child(7) .sk-bone { animation-delay: .25s;  }
.sk-card:nth-child(8) .sk-bone { animation-delay: .40s;  }

/* Light-mode skeleton tones */
body.light .sk-bone {
  background: linear-gradient(
    90deg,
    #e9ecef 0%,
    #f4f5f7 40%,
    #e9ecef 80%
  );
  background-size: 400% 100%;
  animation: skShimmer 1.6s ease-in-out infinite;
}

/* ── Sort bar (All Products) ──────────────────────────────────────────────── */
.sort-bar {
  overflow: visible;
  margin: 0 0 14px;
  padding: 0 2px;
}

/* ── Custom in-page sort dropdown ── */
.cdd-wrap {
  position: relative;
  display: inline-block;
  user-select: none;
}
.cdd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2, #161b22);
  border: 1.5px solid var(--border, #333);
  color: var(--text, #e6edf3);
  border-radius: 999px;
  padding: 7px 14px 7px 16px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
  white-space: nowrap;
  min-width: 148px;
  justify-content: space-between;
}
.cdd-wrap.open .cdd-trigger,
.cdd-trigger:hover {
  border-color: var(--accent, #f7a236);
  box-shadow: 0 0 0 3px rgba(247,162,54,.15);
}
.cdd-arrow {
  width: 10px;
  height: 6px;
  color: var(--accent, #f7a236);
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.cdd-wrap.open .cdd-arrow {
  transform: rotate(180deg);
}
.cdd-menu {
  max-width: calc(100vw - 32px);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--bg2, #1c2128);
  border: 1.5px solid var(--border, #333);
  border-radius: 12px;
  padding: 6px;
  z-index: 999;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  display: none;
  transform-origin: top left;
}
.cdd-wrap.open .cdd-menu {
  display: block;
  animation: cddOpen .18s cubic-bezier(.4,0,.2,1) both;
}
@keyframes cddOpen {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cdd-opt {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted, #8b949e);
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.cdd-opt:hover {
  background: var(--bg3, #2d333b);
  color: var(--text, #e6edf3);
}
.cdd-opt.active {
  color: var(--accent, #f7a236);
  background: rgba(247,162,54,.1);
}
body.light .cdd-trigger {
  background: #fff;
  border-color: var(--border, #ddd);
  color: #333;
}
body.light .cdd-menu {
  background: #fff;
  border-color: var(--border, #ddd);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
body.light .cdd-opt { color: #666; }
body.light .cdd-opt:hover { background: #f5f5f5; color: #111; }
body.light .cdd-opt.active { background: rgba(247,162,54,.12); color: #d48a1a; }

/* ── Broadcast Section ────────────────────────────────────────────────────── */
.broadcast-section {
  /* extends .deals-section sizing — max-width, padding, margin handled there */
}
.broadcast-hd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.broadcast-hd-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1.2;
  color: var(--accent, #f7a236);
}
[data-theme="gridnoir"] .broadcast-hd-icon { color: var(--accent, #ece83a); }
.broadcast-hd-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text, #e6edf3);
  line-height: 1.2;
}
.broadcast-hd-sub {
  font-size: 0.82rem;
  color: #ffffff;
  margin-top: 3px;
  line-height: 1.4;
}
.broadcast-msg-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.broadcast-content {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  word-break: break-word;
}
.broadcast-content a {
  color: var(--accent, #f7a236);
  text-decoration: none;
  font-weight: 600;
}
.broadcast-content a:hover { text-decoration: underline; }
.page-broadcast-wrap {
  width: min(100% - 32px, 920px);
  margin: 18px auto 0;
}
.page-broadcast-wrap .broadcast-msg-card {
  margin: 0;
}
.page-broadcast-wrap .broadcast-hd {
  margin-bottom: 12px;
}
@media (max-width: 520px) {
  .page-broadcast-wrap {
    width: min(100% - 24px, 920px);
  }
}
.broadcast-hd-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
body.light .broadcast-msg-card {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
body.light .broadcast-hd {
  border-bottom-color: rgba(0,0,0,0.1);
}
body.light .broadcast-content { color: var(--text, #1f2328); }
body.light .broadcast-hd-title { color: var(--text, #1f2328); }

/* ── Festival Telegram channels page ─────────────────────────────────────── */
.festival-page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.festival-nav {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.festival-brand, .festival-back, .festival-footer a {
  color: var(--text);
  text-decoration: none;
}
.festival-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.festival-brand span { font-size: 1.3rem; }
.festival-back {
  color: var(--muted);
  font-size: .85rem;
  transition: color .2s ease, transform .2s ease;
}
.festival-back:hover { color: var(--accent); transform: translateX(2px); }
.festival-main {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: 76px 0 64px;
  flex: 1;
}
.festival-eyebrow {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  margin-bottom: 16px;
}
.festival-main h1 {
  max-width: 820px;
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  margin-bottom: 20px;
}
.festival-intro {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 42px;
}
.festival-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 30px);
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.festival-card-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.festival-card-icon { font-size: 1.55rem; line-height: 1.2; flex: 0 0 auto; }
.festival-card h2 { font-size: clamp(1.1rem, 2vw, 1.45rem); margin-bottom: 5px; }
.festival-card-heading p { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.festival-rich-content { color: var(--text); line-height: 1.7; font-size: .96rem; }
.festival-rich-content a { color: var(--accent); font-weight: 700; }
.festival-channels-list { display: grid; gap: 10px; }
.festival-channel-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg3) 62%, transparent);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.festival-channel-link:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--bg3); }
.festival-channel-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  min-height: 30px;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000);
}
.festival-channel-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.festival-channel-copy strong { font-size: .95rem; }
.festival-channel-copy small { color: var(--muted); font-size: .76rem; }
.festival-channel-arrow { color: var(--accent); font-size: 1.25rem; }
.festival-state, .festival-note { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.festival-note { margin-top: 22px; }
.festival-footer {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 34px;
  color: var(--muted);
  font-size: .8rem;
}
.festival-footer a:hover { color: var(--accent); }
body.light .festival-channel-link { background: rgba(0,0,0,.02); }
body.light .festival-channel-link:hover { background: var(--bg3); }

/* ── Admin per-page broadcast controls ───────────────────────────────────── */
.broadcast-channel-row { display: flex; gap: 8px; align-items: center; }
.broadcast-channel-row input { flex: 1; min-width: 0; }
.broadcast-channel-remove {
  flex: 0 0 auto;
  border: 1px solid rgba(248,81,73,.45);
  color: var(--red);
  background: transparent;
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
}
.broadcast-channel-remove:hover { background: rgba(248,81,73,.1); }
.broadcast-channels-empty { color: var(--muted); font-size: .84rem; padding: 4px 0; }
@media (max-width: 620px) {
  .festival-nav, .festival-main, .festival-footer { width: min(100% - 28px, 920px); }
  .festival-nav { padding-top: 18px; }
  .festival-main { padding-top: 50px; }
  .broadcast-channel-row { flex-wrap: wrap; }
  .broadcast-channel-row input { flex-basis: calc(50% - 4px); }
  .broadcast-channel-remove { margin-left: auto; }
}


/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS & SMOOTHNESS — full-site polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes adi-fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes adi-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes adi-slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes adi-scaleIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes adi-popIn {
  0%   { opacity: 0; transform: scale(0.7);  }
  70%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1);    }
}

/* ── Page load fade-in ────────────────────────────────────────── */
body:not(.preload) { animation: adi-fadeIn .32s ease both; }

/* ── Navbar slide down ────────────────────────────────────────── */
.navbar { animation: adi-slideDown .42s cubic-bezier(.22,1,.36,1) both; }

/* ── Hero children stagger ────────────────────────────────────── */
.hero-inner > *:nth-child(1) { animation: adi-fadeInUp .55s cubic-bezier(.22,1,.36,1) .04s both; }
.hero-inner > *:nth-child(2) { animation: adi-fadeInUp .55s cubic-bezier(.22,1,.36,1) .12s both; }
.hero-inner > *:nth-child(3) { animation: adi-fadeInUp .55s cubic-bezier(.22,1,.36,1) .20s both; }
.hero-inner > *:nth-child(4) { animation: adi-fadeInUp .55s cubic-bezier(.22,1,.36,1) .28s both; }
.hero-inner > *:nth-child(5) { animation: adi-fadeInUp .55s cubic-bezier(.22,1,.36,1) .36s both; }

/* ── Chips bounce-in stagger ──────────────────────────────────── */
.chips .chip:nth-child(1)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .28s both; }
.chips .chip:nth-child(2)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .34s both; }
.chips .chip:nth-child(3)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .40s both; }
.chips .chip:nth-child(4)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .46s both; }
.chips .chip:nth-child(5)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .52s both; }
.chips .chip:nth-child(6)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .58s both; }
.chips .chip:nth-child(7)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .64s both; }
.chips .chip:nth-child(8)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .70s both; }
.chips .chip:nth-child(9)  { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .76s both; }
.chips .chip:nth-child(10) { animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .82s both; }

/* ── Chips hover lift ─────────────────────────────────────────── */
.chip {
  transition: all .2s cubic-bezier(.22,1,.36,1);
}
.chip:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--accent);
  color: var(--text);
  background: var(--bg3);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.chip:active { transform: scale(.96); transition-duration: .1s; }

/* ── Deal cards — richer hover + active ─────────────────────── */
.deal-card {
  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    box-shadow .22s ease,
    border-color .2s ease;
}
.deal-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 0 0 1.5px rgba(247,162,54,.3);
  border-color: rgba(247,162,54,.35);
}
.deal-card:active {
  transform: translateY(-2px) scale(.98);
  transition-duration: .1s;
}

/* Smoother image zoom */
.card-img { transition: transform .42s cubic-bezier(.22,1,.36,1); }
.deal-card:hover .card-img { transform: scale(1.09); }

/* Platform badge pop on hover */
.platform-badge { transition: transform .18s cubic-bezier(.34,1.45,.64,1); }
.deal-card:hover .platform-badge { transform: scale(1.1); }

/* ── Search bar focus ring expansion ────────────────────────── */
.search-glow-ring {
  transition: box-shadow .3s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.search-glow-ring:focus-within {
  transform: scaleX(1.012);
  box-shadow:
    0 0 0 3px rgba(120,145,200,.2),
    0 0 40px rgba(90,115,175,.18);
}

/* ── Search button ─────────────────────────────────────────── */
.search-btn {
  transition: opacity .15s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.search-btn:hover  { opacity: .92; transform: scale(1.04); box-shadow: 0 4px 18px rgba(247,162,54,.45); }
.search-btn:active { transform: scale(.96); transition-duration: .08s; }

/* ── CTA / BuyFast button ─────────────────────────────────── */
.btn-buyfast {
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.btn-buyfast:hover  { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 24px rgba(247,162,54,.5); }
.btn-buyfast:active { transform: scale(.97) translateY(0); transition-duration: .08s; }

/* ── Nav channel buttons ──────────────────────────────────── */
.nav-channel-btn {
  transition: opacity .15s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .18s;
}
.nav-channel-btn:hover  { opacity: 1; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.nav-channel-btn:active { transform: scale(.95); transition-duration: .08s; }

/* ── Logo hover shimmer ───────────────────────────────────── */
.logo { transition: opacity .2s, transform .2s cubic-bezier(.22,1,.36,1); }
.logo:hover { transform: scale(1.04); opacity: .88; }

/* ── Drawer tiles ─────────────────────────────────────────── */
.drawer-tile {
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .15s, border-color .15s;
}
.drawer-tile:hover  { transform: translateX(7px); box-shadow: 0 4px 20px rgba(0,0,0,.35); }
.drawer-tile:active { transform: translateX(3px) scale(.98); transition-duration: .08s; }

/* ── Footer links ──────────────────────────────────────────── */
.footer-links a {
  display: inline-block;
  transition: color .18s, transform .2s cubic-bezier(.22,1,.36,1);
}
.footer-links a:hover { color: var(--text); transform: translateX(4px); }

/* ── Social buttons ────────────────────────────────────────── */
.social-btn {
  transition: opacity .15s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.social-btn:hover  { opacity: .95; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.social-btn:active { transform: scale(.96); transition-duration: .08s; }

/* ── Updated badge pop-in ─────────────────────────────────── */
.updated-badge {
  animation: adi-scaleIn .38s cubic-bezier(.34,1.45,.64,1) .55s both;
  transition: background .2s, color .2s;
  cursor: default;
}
.updated-badge:hover { background: var(--bg3); }

/* ── Hamburger hover ──────────────────────────────────────── */
.user-hamburger { transition: border-color .2s, background .2s, box-shadow .2s, transform .18s; }
.user-hamburger:active { transform: scale(.93); }

/* ── Scroll reveal — sections & footer ───────────────────── */
.adi-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.adi-reveal.adi-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger delay helpers for JS-controlled reveals */
.adi-reveal-d1 { transition-delay: .05s; }
.adi-reveal-d2 { transition-delay: .10s; }
.adi-reveal-d3 { transition-delay: .15s; }

/* ── Suppress on preload to avoid FOUC ───────────────────── */
body.preload .navbar,
body.preload .hero-inner > *,
body.preload .chips .chip {
  animation: none !important;
}


/* Product lookup result only — the normal homepage remains unchanged. */
.reference-product-result { max-width: 700px; margin-left: auto; margin-right: auto; }
.reference-product-card { padding: 14px; background: #17191e; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; box-shadow: 0 14px 38px rgba(0,0,0,.28); overflow: hidden; }
.reference-product-summary { display: flex; gap: 12px; align-items: center; }
.reference-product-image-wrap { width: 100px; height: 100px; flex: 0 0 100px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 11px; overflow: hidden; position: relative; }
.reference-product-image { width: 100%; height: 100%; object-fit: contain; }
.reference-image-fallback { color: #fff; background: #dc2626; font-weight: 900; font-size: .55rem; line-height: 1.15; text-align: center; padding: 6px; }
.reference-product-info { min-width: 0; align-self: center; }
.reference-market { display: flex; align-items: center; gap: 5px; color: #999ba1; font-size: .57rem; letter-spacing: .03em; margin-bottom: 5px; }
.reference-amazon-a { color: #111; background: #f4f4f4; font: 700 1.1rem Georgia,serif; line-height: 16px; width: 17px; height: 17px; border-radius: 2px; text-align: center; }
.reference-meesho-m { color: #fff; background: #f43397; font: 800 .85rem Arial,sans-serif; line-height: 17px; width: 17px; height: 17px; border-radius: 4px; text-align: center; text-transform: lowercase; }
.reference-product-title { color: #f4f4f6; font-size: .82rem; line-height: 1.28; font-weight: 600; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reference-product-price { color: #f7f7f8; font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; }
.reference-product-original { color: #a3a4aa; font-size: .78rem; margin-top: 2px; }
.reference-product-actions { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.reference-buy-state { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0,226,155,.35); background: rgba(0,160,115,.22); color: #45e1b3; }
.reference-buy-state strong, .reference-buy-state small { display: block; }
.reference-buy-state strong { font-size: .78rem; font-weight: 600; }
.reference-buy-state small { margin-top: 2px; color: #7b9d96; font-size: .67rem; }
.reference-buy-button { flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 999px; background: #eff000; color: #101010; font-size: .73rem; line-height: 1.1; font-weight: 800; text-decoration: none; }
.reference-buy-button span { font-size: .9rem; }
.reference-result-status { display: none; }
@media (max-width: 640px) {
  .reference-product-result { margin-left: 14px; margin-right: 14px; }
  .reference-product-card { padding: 13px; }
  .reference-product-image-wrap { width: 100px; height: 100px; flex-basis: 100px; }
}