/* ═══════════════════════════════════════════════════════════════════
   BiteLens — Warm Theme Design System
   ─────────────────────────────────────────────────────────────────
   Shared tokens + components used across public, vendor, admin surfaces.
   Load once, style everywhere. No inline styles in templates.

   Version: 1.0 (2026-07)
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────── DESIGN TOKENS ───────────────────────── */
:root {
  /* Neutrals — warm cream to warm ink */
  --cream:        #fef8f0;
  --cream-2:      #fdf4e7;
  --white:        #ffffff;
  --ink:          #1c1917;
  --ink-2:        #292524;
  --muted:        #78716c;
  --muted-2:      #a8a29e;
  --border:       #f0e5d3;
  --border-2:     #e7d5b8;

  /* Signature — food-warm */
  --paprika:      #c2410c;   /* primary CTA — roasted terracotta */
  --paprika-dark: #9a3412;
  --paprika-soft: #fde3d3;
  --turmeric:     #f59e0b;   /* accent, verified, highlights */
  --turmeric-soft:#fef3c7;
  --spice:        #b91c1c;   /* dish spicy */
  --herb:         #16a34a;   /* fresh / "open now" */
  --herb-soft:    #dcfce7;
  --tea:          #78350f;   /* deep warm — copy accents */

  /* Shadows — warm-tinted, no neon */
  --shadow-soft:  0 1px 2px rgba(120,53,15,.06), 0 4px 12px rgba(120,53,15,.05);
  --shadow-lift:  0 4px 8px rgba(120,53,15,.08), 0 20px 40px rgba(120,53,15,.10);

  /* Geometry */
  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    22px;
  --radius-round: 999px;

  /* Spacing scale — snap all values to these */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Content max-widths */
  --w-content: 1200px;
  --w-narrow:  920px;
}

/* ─────────────────────────── RESET / BASE ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', 'Hind Siliguri', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, .display {
  font-family: 'Playfair Display', 'Hind Siliguri', Georgia, serif;
  letter-spacing: -.01em;
  color: var(--ink);
}
a { color: var(--paprika); text-decoration: none; }
a:hover { color: var(--paprika-dark); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.bn { font-family: 'Hind Siliguri', 'Inter', sans-serif; }

/* Scrollbar warm tint */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--radius-round); }
::-webkit-scrollbar-thumb:hover { background: var(--paprika); }

/* ───────────────────────── NAV ───────────────────────── */
.wt-nav {
  background: rgba(254,248,240,.94);
  backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  overflow: hidden;  /* defensive — prevents any child from bleeding sideways */
}
.wt-nav-wrap {
  max-width: var(--w-content); margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  min-width: 0;  /* allows flex children to shrink if needed */
}
/* Ensure logo doesn't clip on narrow screens — allow it to shrink but keep
   image proportional. Fixes the "otlyBD" truncation seen at very narrow
   viewports (~360px). */
.wt-nav-wrap .wt-logo { min-width: 0; overflow: hidden; }
.wt-nav-wrap .wt-logo-img { flex-shrink: 0; max-width: 40vw; height: auto; }
@media (max-width: 400px) {
  .wt-nav-wrap { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .wt-nav-wrap .wt-logo-img { max-height: 28px; }
  .wt-nav-wrap .wt-logo-mark { font-size: .95rem !important; }
}
/* Belt-and-braces: prevent horizontal scroll from anything overflowing */
html, body { overflow-x: hidden; }
.wt-logo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: 'Playfair Display', serif;
  font-weight: 800; font-size: 1.35rem;
  color: var(--ink);
}
.wt-logo:hover { color: var(--paprika); }
.wt-logo-mark {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--paprika) 0%, var(--turmeric) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 900;
  box-shadow: var(--shadow-soft);
}
.wt-logo-img { height: 34px; width: auto; border-radius: var(--radius-sm); }
.wt-nav-links { display: flex; gap: var(--sp-2); align-items: center; }
.wt-nav-links a {
  color: var(--muted);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-round);
  font-size: .92rem; font-weight: 500;
  transition: all .15s;
}
.wt-nav-links a:hover { color: var(--ink); background: var(--cream-2); }
.wt-nav-links a.active { color: var(--paprika); font-weight: 600; }
.wt-nav-right { display: flex; gap: var(--sp-2); align-items: center; }

/* ───────────────────────── BUTTONS ───────────────────────── */
.wt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-round);
  font-family: inherit; font-weight: 700; font-size: .92rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, background .15s, border-color .15s, color .15s;
}
.wt-btn:hover { transform: translateY(-1px); }
.wt-btn-primary   { background: var(--paprika); color: #fff; }
.wt-btn-primary:hover { background: var(--paprika-dark); color: #fff; }
.wt-btn-ink       { background: var(--ink); color: #fff; }
.wt-btn-ink:hover { background: var(--ink-2); color: #fff; }
.wt-btn-soft      { background: var(--cream-2); color: var(--ink); border-color: var(--border); }
.wt-btn-soft:hover{ background: var(--white); border-color: var(--paprika); color: var(--paprika); }
.wt-btn-outline   { background: transparent; color: var(--paprika); border-color: var(--paprika-soft); }
.wt-btn-outline:hover { background: var(--paprika-soft); color: var(--paprika-dark); }
.wt-btn-sm { padding: var(--sp-2) var(--sp-4); font-size: .82rem; }

/* Icon-only round button */
.wt-btn-icon {
  padding: var(--sp-3);
  min-width: 40px; height: 40px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
  font-size: 1rem;
}
.wt-btn-icon:hover { border-color: var(--paprika); color: var(--paprika); }

/* ───────────────────────── PILLS & BADGES ───────────────────────── */
.wt-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 4px 12px;
  border-radius: var(--radius-round);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
}
.wt-pill-open {
  background: var(--herb);
  color: #fff;
}
.wt-pill-open::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
  animation: wt-pulse 1.6s ease-in-out infinite;
}
.wt-pill-closed {
  background: var(--cream-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.wt-pill-closed::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-2);
}
.wt-pill-fresh {
  background: var(--herb-soft);
  color: #166534;
}
.wt-pill-verified {
  background: var(--turmeric);
  color: var(--ink);
  padding: 3px 10px;
  font-size: .7rem;
}
.wt-pill-live {
  background: var(--paprika-soft);
  color: var(--paprika-dark);
}
.wt-pill-live .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--herb);
  box-shadow: 0 0 0 3px rgba(22,163,74,.2);
  animation: wt-pulse 1.8s ease-in-out infinite;
}
@keyframes wt-pulse { 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }

.wt-chip {
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-round);
  font-size: .82rem;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
  text-decoration: none;
}
.wt-chip:hover { border-color: var(--paprika); color: var(--paprika); }
.wt-chip .em { font-size: .95rem; line-height: 1; }

/* Distance / count small tag */
.wt-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  border-radius: var(--radius-round);
  font-size: .78rem; font-weight: 700;
}

/* Freshness tint per bucket */
.wt-fresh--fresh   { color: var(--herb); }
.wt-fresh--active  { color: var(--herb); }
.wt-fresh--today   { color: var(--turmeric); }
.wt-fresh--recent  { color: var(--muted); }
.wt-fresh--stale,
.wt-fresh--dead    { color: var(--muted-2); }

/* ───────────────────────── LOCATION PILL ───────────────────────── */
.wt-loc-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-4) 6px 6px;
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-round);
  font-size: .88rem;
  box-shadow: var(--shadow-soft);
}
.wt-loc-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paprika); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
}
.wt-loc-pill strong { font-weight: 700; color: var(--ink); }
.wt-loc-pill button {
  background: none; border: none; color: var(--paprika);
  font-weight: 600; font-size: .82rem; cursor: pointer;
  padding: 4px 10px; border-radius: var(--radius-round); margin-left: auto;
  font-family: inherit;
}
.wt-loc-pill button:hover { background: var(--paprika-soft); }

/* ───────────────────────── SEARCH BAR ───────────────────────── */
.wt-search {
  display: flex; align-items: center;
  background: var(--white);
  border-radius: var(--radius-round);
  padding: 6px;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border);
  max-width: 480px;
}
.wt-search input {
  flex: 1; border: none; background: transparent;
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem; color: var(--ink);
  outline: none; font-family: inherit;
}
.wt-search input::placeholder { color: var(--muted-2); }
.wt-search .wt-btn-primary { padding: 10px 22px; }

/* ───────────────────────── HERO ───────────────────────── */
.wt-hero {
  padding: var(--sp-10) var(--sp-6) var(--sp-12);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  border-bottom: 1px solid var(--border);
}
.wt-hero-wrap {
  max-width: var(--w-content); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-12); align-items: center;
}
.wt-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 900; line-height: 1.03;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.wt-hero-title em {
  color: var(--paprika); font-style: normal;
  position: relative; display: inline-block;
}
.wt-hero-title em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 3px;
  height: 8px; background: rgba(245,158,11,.28);
  border-radius: 8px; z-index: -1;
}
.wt-hero-sub {
  font-size: 1.02rem; color: var(--muted);
  max-width: 460px; margin-bottom: var(--sp-6); line-height: 1.65;
}
.wt-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-suggestions .wt-label {
  font-size: .78rem; color: var(--muted);
  align-self: center; margin-right: 4px; font-weight: 500;
}

/* Hero right — stacked overlapping food photos */
.wt-hero-visual {
  position: relative;
  min-height: 440px;
}
.wt-food-card {
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--white);
  transition: transform .3s;
}
.wt-food-card:hover { transform: translateY(-3px); }
.wt-food-card img { width: 100%; height: 100%; object-fit: cover; }
.wt-food-card .placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--paprika-soft), var(--turmeric-soft));
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
}
.wt-food-card .wt-tag-corner {
  position: absolute; top: 12px; left: 12px;
}
.wt-food-card .wt-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  color: #fff;
}
.wt-food-card .wt-caption h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700; margin-bottom: 3px;
  color: #fff;
}
.wt-food-card .wt-caption p { font-size: .78rem; opacity: .88; }

.wt-hero-card-1 { top: 0; right: 60px; width: 62%; height: 300px; z-index: 2; transform: rotate(-2deg); }
.wt-hero-card-2 { bottom: 20px; right: 0; width: 46%; height: 220px; z-index: 3; transform: rotate(2deg); }
.wt-hero-card-3 { bottom: 40px; left: 20px; width: 44%; height: 180px; z-index: 1; transform: rotate(-3deg); }

.wt-deco-badge {
  position: absolute;
  background: var(--turmeric);
  color: var(--ink);
  padding: 8px var(--sp-4);
  border-radius: var(--radius-round);
  font-family: 'Playfair Display', serif;
  font-weight: 800; font-size: .82rem;
  box-shadow: var(--shadow-soft);
  transform: rotate(-6deg);
  z-index: 5;
}
.wt-deco-badge--top { top: -8px; right: 40px; }

/* ───────────────────────── SECTIONS ───────────────────────── */
.wt-section { padding: var(--sp-12) var(--sp-6); }
.wt-section--tinted { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wt-section--warm { background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wt-wrap { max-width: var(--w-content); margin: 0 auto; }

.wt-section-header {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: var(--sp-8); gap: var(--sp-5);
}
.wt-section-title {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 800; line-height: 1.15;
}
.wt-section-title em { color: var(--paprika); font-style: normal; }
.wt-section-sub { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.wt-section-link {
  font-size: .9rem; font-weight: 600; color: var(--paprika);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.wt-section-link:hover { color: var(--paprika-dark); }

/* ───────────────────────── VENDOR CARD ───────────────────────── */
.wt-vendor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.wt-vendor-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wt-vendor-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.wt-vendor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  color: inherit;
}
.wt-vendor-hero {
  position: relative; aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--paprika-soft), var(--turmeric-soft));
  overflow: hidden;
}
.wt-vendor-hero img { width: 100%; height: 100%; object-fit: cover; }
.wt-vendor-hero .wt-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--paprika); opacity: .5;
}
.wt-vendor-hero .wt-status {
  position: absolute; top: 12px; left: 12px;
}
.wt-vendor-hero .wt-distance {
  position: absolute; top: 12px; right: 12px;
}
.wt-vendor-hero .wt-verified {
  position: absolute; bottom: 12px; right: 12px;
}
.wt-vendor-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  flex: 1;
  display: flex; flex-direction: column;
}
.wt-vendor-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem; font-weight: 700;
  margin-bottom: 4px; letter-spacing: -.01em;
  color: var(--ink);
}
.wt-vendor-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--muted);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.wt-vendor-meta .wt-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
.wt-vendor-rating {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--tea); font-weight: 700; font-size: .85rem;
}
.wt-vendor-story {
  color: var(--ink-2); font-size: .84rem;
  line-height: 1.55; margin-bottom: var(--sp-4);
  flex: 1;
  font-style: italic;
}
.wt-vendor-freshness {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600;
  margin-bottom: var(--sp-3);
}
.wt-vendor-freshness::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.wt-vendor-actions { display: flex; gap: 8px; margin-top: auto; }
.wt-vendor-actions .wt-btn { padding: 10px var(--sp-4); font-size: .86rem; border-radius: var(--radius-sm); flex: 1; }
.wt-vendor-actions .wt-btn-icon { flex: 0 0 auto; }

/* Compact vendor card (for latest/related listings) */
.wt-vendor-card--compact .wt-vendor-hero { aspect-ratio: 16/9; }
.wt-vendor-card--compact h3 { font-size: 1rem; }
.wt-vendor-card--compact .wt-vendor-story { font-size: .78rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* ───────────────────────── CATEGORY CARDS ───────────────────────── */
.wt-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.wt-cat-card {
  position: relative;
  padding: 22px 12px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: all .2s;
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
}
.wt-cat-card:hover {
  background: var(--white);
  border-color: var(--paprika);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  color: inherit;
}
.wt-cat-icon {
  font-size: 2rem; margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(120,53,15,.15));
}
.wt-cat-icon i { color: var(--paprika); }
.wt-cat-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: .95rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.wt-cat-count { font-size: .76rem; color: var(--muted); }

/* ── Category state variants (New / Popular / Empty) ── */
.wt-cat-card.is-empty {
  background: rgba(254, 248, 240, .5);
  border-style: dashed;
  border-color: var(--border-2);
  opacity: .78;
}
.wt-cat-card.is-empty:hover {
  opacity: 1; border-style: solid;
  background: var(--white);
}
.wt-cat-card.is-empty .wt-cat-icon i { opacity: .55; }
.wt-cat-card.is-empty .wt-cat-name  { color: var(--tea); }
.wt-cat-card.is-popular {
  background: linear-gradient(180deg, var(--turmeric-soft) 0%, var(--white) 60%);
  border-color: rgba(245,158,11,.35);
}
.wt-cat-card.is-popular:hover { border-color: var(--turmeric); }

.wt-cat-badge {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 8px; border-radius: 999px;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
}
.wt-cat-badge.new     { background: var(--paprika-soft); color: var(--paprika-dark); }
.wt-cat-badge.popular { background: var(--turmeric); color: var(--ink); box-shadow: 0 2px 6px rgba(245,158,11,.35); }
.wt-cat-badge.popular i { font-size: .58rem; }

.wt-cat-empty-cta {
  color: var(--paprika); font-weight: 700; font-style: italic;
  font-family: 'Hind Siliguri','Inter',sans-serif;
}

/* ───────────────────────── STORY FEATURE ───────────────────────── */
.wt-story-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-12); align-items: center;
}
.wt-story-visual { position: relative; }
.wt-story-visual img {
  width: 100%; height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.wt-story-visual .wt-placeholder {
  width: 100%; height: 460px;
  background: linear-gradient(135deg, var(--paprika-soft), var(--turmeric-soft));
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: var(--paprika); opacity: .5;
}
.wt-story-quote {
  position: absolute;
  right: -20px; bottom: 30px;
  background: var(--white);
  padding: var(--sp-5) 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  max-width: 260px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  border-left: 4px solid var(--paprika);
}
.wt-story-quote::before {
  content: '“';
  position: absolute; top: -20px; left: 8px;
  font-size: 4rem; color: var(--turmeric);
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.wt-story-quote cite {
  display: block; margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-style: normal; font-size: .82rem;
  color: var(--muted);
}
.wt-story-eyebrow {
  color: var(--paprika); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.wt-story-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800; line-height: 1.15;
  margin-bottom: var(--sp-4);
}
.wt-story-body {
  font-size: 1rem; color: var(--ink-2);
  line-height: 1.75;
  margin-bottom: var(--sp-6);
}
.wt-story-body strong { color: var(--tea); }

/* ───────────────────────── AREAS STRIP ───────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   Areas — 3-tier discovery hierarchy
   Tier 1 (.wt-areas-featured):  top 3 by vendor count → rich cards
   Tier 2 (.wt-areas-rest):      remaining areas → compact chip grid
   Tier 3 (.wt-areas-more):      "See all" CTA when more than shown
   Old .wt-areas class kept below as fallback so any other page still
   using it doesn't break.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tier 1 — Featured area cards ── */
.wt-areas-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.wt-area-feature {
  position: relative;
  padding: 24px 20px 22px;
  background: linear-gradient(135deg, var(--white) 0%, var(--cream-2) 100%);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  min-height: 150px;
  overflow: hidden;
}
.wt-area-feature::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%, var(--paprika-soft) 0%, transparent 55%);
  opacity: .4; pointer-events: none;
}
.wt-area-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(120,53,15,.12);
  border-color: var(--paprika-soft);
}
.wt-area-feature-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--paprika); color: #fff;
  padding: 3px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(194,65,12,.25);
  z-index: 1;
}
.wt-area-feature-badge i { font-size: .65rem; }
.wt-area-feature-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--paprika-soft); color: var(--paprika);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; z-index: 1;
  transition: transform .3s, background .2s;
}
.wt-area-feature:hover .wt-area-feature-icon {
  transform: scale(1.08); background: var(--paprika); color: #fff;
}
.wt-area-feature-name {
  font-family: 'Playfair Display', 'Hind Siliguri', serif;
  font-size: 1.2rem; font-weight: 800;
  color: var(--ink); z-index: 1; line-height: 1.2;
}
.wt-area-feature-meta {
  font-size: .88rem; color: var(--muted);
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  z-index: 1;
}
.wt-area-feature-meta strong {
  color: var(--paprika-dark);
  font-size: 1rem; font-weight: 800;
}

/* ── Tier 2 — Compact chip grid for remaining areas ── */
.wt-areas-rest-label {
  text-align: center;
  font-size: .78rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--sp-3);
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}
.wt-areas-rest {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* Chip — shared between old .wt-areas and new .wt-areas-rest */
.wt-area-chip {
  padding: 12px var(--sp-4);
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  font-size: .88rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .15s;
  min-height: 44px; /* meets accessibility tap-target guidelines */
}
.wt-area-chip:hover {
  border-color: var(--paprika);
  color: var(--paprika);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  background: #fff;
}
.wt-area-chip i {
  color: var(--paprika); font-size: .78rem; flex-shrink: 0;
}
.wt-area-chip-name {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-area-chip .wt-count {
  background: var(--turmeric-soft);
  color: var(--tea);
  padding: 2px 8px;
  border-radius: var(--radius-round);
  font-size: .72rem; font-weight: 800;
  flex-shrink: 0;
}

/* ── Featured card sub-label (division name under area name) ── */
.wt-area-feature-sub {
  font-size: .74rem; color: var(--muted);
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  z-index: 1; margin-top: -2px;
}

/* ── Division group — grouping label + area chips for one division ── */
.wt-divisions {
  display: flex; flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.wt-division-group {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
}
.wt-division-group:first-child { border-top: none; padding-top: 0; }

.wt-division-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.wt-division-name {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: 'Playfair Display', 'Hind Siliguri', serif;
  font-size: 1.15rem; font-weight: 800;
  color: var(--ink);
}
.wt-division-name i {
  color: var(--paprika); font-size: .95rem;
  transform: translateY(-1px);
}
.wt-division-name-sub {
  color: var(--muted); font-weight: 600;
  font-size: .82rem; letter-spacing: .02em;
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}
.wt-division-count {
  font-size: .82rem; color: var(--muted);
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}
.wt-division-count strong { color: var(--paprika-dark); font-weight: 800; }

/* ── Tier 3 — "See all areas" CTA ── */
.wt-areas-more { text-align: center; margin-top: var(--sp-5); }

/* Legacy .wt-areas — kept so any other page still using the flat layout
   doesn't break. New homepage uses .wt-areas-featured + .wt-areas-rest. */
.wt-areas {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .wt-areas-featured { grid-template-columns: repeat(2, 1fr); }
  .wt-area-feature:nth-child(3) { grid-column: span 2; }
  .wt-area-feature-name { font-size: 1.1rem; }
}
@media (max-width: 560px) {
  .wt-areas-featured { grid-template-columns: 1fr; gap: var(--sp-3); }
  .wt-area-feature:nth-child(3) { grid-column: span 1; }
  .wt-area-feature { min-height: 130px; padding: 20px 18px; }
  .wt-areas-rest { grid-template-columns: repeat(2, 1fr); }
}

/* ───────────────────────── CTA BANNER ───────────────────────── */
.wt-cta-banner {
  background: linear-gradient(135deg, var(--paprika) 0%, var(--paprika-dark) 100%);
  color: #fff;
  padding: var(--sp-10) var(--sp-8);
  text-align: left;
  border-radius: var(--radius-lg);
  margin: 0 var(--sp-6);
  max-width: calc(var(--w-content) - var(--sp-12));
  margin-left: auto; margin-right: auto;
  position: relative;
  overflow: hidden;
}
.wt-cta-banner::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(245,158,11,.25) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.15) 0%, transparent 50%);
  pointer-events: none;
}
.wt-cta-banner > * { position: relative; z-index: 1; }
.wt-cta-banner h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; margin-bottom: var(--sp-3);
  color: #fff;
}
.wt-cta-banner p {
  font-size: 1rem; opacity: .92;
  max-width: 460px; margin: 0 auto var(--sp-6);
  line-height: 1.6;
}
.wt-cta-banner .wt-btn {
  background: var(--white); color: var(--paprika-dark);
  padding: var(--sp-4) var(--sp-8);
  font-size: 1rem;
}
.wt-cta-banner .wt-btn:hover { background: var(--turmeric-soft); color: var(--paprika-dark); }

/* ── 2-column split for CTA banner ── */
.wt-cta-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-8); align-items: center;
  position: relative; z-index: 1;
}
.wt-cta-left h2 { text-align: left; }
.wt-cta-left p { text-align: left; margin: 0 0 var(--sp-5); max-width: 480px; }

/* ── Trust pill badges ── */
.wt-cta-trust {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: var(--sp-5);
}
.wt-cta-trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  color: #fff; letter-spacing: .01em;
  backdrop-filter: blur(6px);
}
.wt-cta-trust-pill i { font-size: .78rem; color: var(--turmeric); }

/* ── Primary + secondary CTA row ── */
.wt-cta-actions {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap;
}
.wt-cta-secondary {
  color: #fff; text-decoration: none;
  font-size: .9rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 4px; opacity: .9;
  transition: opacity .15s, transform .15s;
}
.wt-cta-secondary:hover { opacity: 1; transform: translateX(2px); color: #fff; }
.wt-cta-secondary i { font-size: 1.1rem; color: #25D366; }

/* ── Right: live social-proof card ── */
.wt-cta-right { display: flex; justify-content: center; }
.wt-cta-stats-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 22px 24px;
  backdrop-filter: blur(10px);
  width: 100%; max-width: 400px;
}
.wt-cta-stats-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.75);
  margin-bottom: 14px;
}
.wt-cta-stats-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--herb);
  box-shadow: 0 0 0 4px rgba(22,163,74,.3);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(22,163,74,.3); }
  50%      { box-shadow: 0 0 0 8px rgba(22,163,74,.1); }
}
.wt-cta-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.wt-cta-stat { text-align: center; }
.wt-cta-stat-num {
  font-family: 'Playfair Display', 'Hind Siliguri', serif;
  font-size: 1.7rem; font-weight: 800; line-height: 1;
  color: #fff; margin-bottom: 4px;
}
.wt-cta-stat-label {
  font-size: .7rem; color: rgba(255,255,255,.7);
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  line-height: 1.3;
}
.wt-cta-stats-testimonial {
  font-size: .86rem; line-height: 1.55;
  color: rgba(255,255,255,.9); font-style: italic;
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}
.wt-cta-stats-testimonial i {
  color: var(--turmeric); font-size: .8rem; margin-right: 4px; font-style: normal;
}
.wt-cta-stats-attribution {
  margin-top: 6px; font-style: normal;
  font-size: .76rem; color: rgba(255,255,255,.65);
  font-weight: 600;
}

/* ── Footer contact block ── */
.wt-footer-contact {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.08);
}
.wt-footer-contact-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--turmeric);
  margin-bottom: 8px;
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}
.wt-footer-contact a {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted-2); text-decoration: none;
  font-size: .88rem; margin-bottom: 6px;
  transition: color .15s;
}
.wt-footer-contact a:hover { color: var(--turmeric); }
.wt-footer-contact a i { width: 14px; color: var(--turmeric); font-size: .82rem; }

/* ── Footer bottom row — "Made in Bangladesh ♥" centered ── */
.wt-footer-love {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--cream);
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}

/* ── Bigger social icons ── */
.wt-footer-brand .wt-socials a {
  width: 38px; height: 38px;
  font-size: 1rem;
}

/* ── Responsive tweaks for both CTA and footer ── */
@media (max-width: 900px) {
  .wt-cta-grid { grid-template-columns: 1fr; }
  .wt-cta-right { justify-content: flex-start; }
  .wt-cta-stats-card { max-width: none; }
  .wt-footer-wrap { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (max-width: 640px) {
  .wt-cta-banner { padding: var(--sp-8) var(--sp-5); }
  .wt-cta-left h2 { font-size: 1.5rem; }
  .wt-cta-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wt-cta-actions .wt-btn { width: 100%; justify-content: center; }
  .wt-cta-stat-num { font-size: 1.4rem; }
  .wt-footer-legal { flex-direction: column; text-align: center; gap: 6px; }
  .wt-footer-love { justify-content: center; }
}

/* ───────────────────────── FOOTER ───────────────────────── */
.wt-footer {
  background: var(--ink);
  color: var(--cream);
  padding: var(--sp-12) var(--sp-6) var(--sp-6);
}
.wt-footer-wrap {
  max-width: var(--w-content); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.wt-footer-brand h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  margin-bottom: var(--sp-3);
  color: #fff;
}
.wt-footer-brand p {
  color: var(--muted-2);
  max-width: 320px; font-size: .92rem; line-height: 1.65;
}
.wt-footer-brand .wt-socials {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-4);
}
.wt-footer-brand .wt-socials a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2);
  transition: all .2s;
  text-decoration: none;
}
.wt-footer-brand .wt-socials a:hover {
  background: var(--turmeric);
  border-color: var(--turmeric);
  color: var(--ink);
}
.wt-footer-col h5 {
  font-family: 'Inter', sans-serif;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--turmeric); font-weight: 700;
  margin-bottom: var(--sp-3);
}
.wt-footer-col ul { list-style: none; }
.wt-footer-col li { margin-bottom: var(--sp-2); }
.wt-footer-col a {
  color: var(--muted-2);
  font-size: .88rem;
  transition: color .15s;
  text-decoration: none;
}
.wt-footer-col a:hover { color: var(--turmeric); }
.wt-footer-legal {
  max-width: var(--w-content); margin: var(--sp-6) auto 0;
  color: var(--muted-2);
  font-size: .78rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
}
.wt-footer-legal a { color: var(--muted-2); }
.wt-footer-legal a:hover { color: var(--turmeric); }

/* ───────────────────────── FLOATING SEARCH BTN ───────────────────────── */
.wt-fab {
  position: fixed; bottom: var(--sp-6); right: var(--sp-6);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--paprika);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(194,65,12,.35);
  z-index: 40;
  transition: transform .2s;
}
.wt-fab:hover { transform: scale(1.08); color: #fff; }

/* ───────────────────────── LIVE TRACKER BANNER ───────────────────────── */
.wt-tracker-banner {
  background: linear-gradient(135deg, var(--white) 0%, var(--cream-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
  box-shadow: var(--shadow-soft);
}
.wt-tracker-title {
  display: flex; align-items: center; gap: var(--sp-3);
}
.wt-tracker-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paprika-soft);
  color: var(--paprika);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.wt-tracker-title h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.wt-tracker-title p {
  font-size: .8rem; color: var(--muted);
  margin: 2px 0 0;
}
.wt-legend { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.wt-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--muted);
}
.wt-legend-dot {
  width: 9px; height: 9px; border-radius: 50%;
}
.wt-legend-dot--open   { background: var(--herb);     box-shadow: 0 0 5px rgba(22,163,74,.4); }
.wt-legend-dot--busy   { background: var(--turmeric); box-shadow: 0 0 5px rgba(245,158,11,.4); }
.wt-legend-dot--closed { background: var(--muted-2); }

/* ───────────────────────── FILTER BAR ───────────────────────── */
.wt-filter-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-soft);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--sp-5);
}
.wt-filter-input, .wt-filter-select {
  background: var(--cream);
  border: 1px solid var(--border-2);
  color: var(--ink);
  border-radius: var(--radius-round);
  padding: 9px 16px;
  font-size: .88rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
  min-width: 130px;
}
.wt-filter-input:focus, .wt-filter-select:focus {
  border-color: var(--paprika);
  background: var(--white);
}
.wt-filter-input { min-width: 220px; flex: 1; }
.wt-filter-select option { background: var(--white); color: var(--ink); }

.wt-view-toggle {
  display: inline-flex; gap: 4px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
  padding: 4px;
}
.wt-view-btn {
  padding: 8px 16px;
  border-radius: var(--radius-round);
  font-size: .85rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.wt-view-btn.active {
  background: var(--paprika);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.wt-view-btn:hover:not(.active) {
  color: var(--ink);
}

/* ───────────────────────── MAP + SIDEBAR LAYOUT ───────────────────────── */
.wt-map-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-5);
  align-items: start;
}
/* ═══════════════════════════════════════════════════════════════
   MAP SYSTEM — unified sizing + styling for every Leaflet map
   ─────────────────────────────────────────────────────────────
   Purpose-driven size tiers (one place to tune, everywhere adapts):
     .spb-map--compact  → 180px→22vh→240px  (sidebar previews)
     .spb-map--admin    → 340px→45vh→500px  (admin picker forms)
     .spb-map--standard → 420px→55vh→560px  (vendor forms, profile tab)
     .spb-map--hero     → 480px→60vh→640px  (main explore, live tracking)
   All variants share the same base .spb-map styling (border, radius,
   overflow, warm cream fallback background). Add a variant by ONLY
   choosing a size class — border and colors are automatic.
   ═══════════════════════════════════════════════════════════════ */
.spb-map {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--cream-2);
  position: relative;
  width: 100%;
}
.spb-map--compact  { height: clamp(180px, 22vh, 240px); }
.spb-map--admin    { height: clamp(340px, 45vh, 500px); }
.spb-map--standard { height: clamp(420px, 55vh, 560px); }
.spb-map--hero     { height: clamp(480px, 60vh, 640px); }
@media (max-width: 640px) {
  .spb-map--admin    { height: clamp(300px, 40vh, 400px); }
  .spb-map--standard { height: clamp(340px, 50vh, 460px); }
  .spb-map--hero     { height: clamp(380px, 55vh, 500px); }
}
/* Give every Leaflet marker on any spb-map the warm paprika drop-shadow
   so pins look intentional against the cream tint. */
.spb-map .leaflet-marker-icon { filter: drop-shadow(0 3px 6px rgba(194,65,12,.35)); }

/* Legacy .wt-map-container — kept as backwards-compatible alias of the
   canonical .spb-map .spb-map--hero. New code should use .spb-map instead. */
.wt-map-container {
  height: clamp(480px, 60vh, 640px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--cream-2);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 640px) {
  .wt-map-container { height: clamp(380px, 55vh, 500px); }
}

/* Leaflet warm overrides — reset the dark neon styling */
.leaflet-tile-pane { filter: none; }  /* natural OSM colours are warm-friendly */
.leaflet-container { background: var(--cream-2) !important; }
.leaflet-popup-content-wrapper {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lift) !important;
  padding: 0 !important;
}
.leaflet-popup-tip { background: var(--white) !important; box-shadow: none !important; }
.leaflet-popup-content {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 12px 14px !important;
}
.leaflet-popup-close-button {
  color: var(--muted) !important;
  padding: 6px 8px !important;
}
.leaflet-popup-close-button:hover { color: var(--paprika) !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.85) !important;
  color: var(--muted) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--paprika) !important; }
.leaflet-bar a {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
.leaflet-bar a:hover { background: var(--cream-2) !important; color: var(--paprika) !important; }

/* Nearby vendors sidebar */
.wt-nearby-card {
  position: sticky;
  top: 90px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.wt-nearby-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.wt-nearby-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.wt-nearby-header .wt-nearby-sub {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 2px;
  display: none;
}
.wt-nearby-list {
  max-height: 480px;
  overflow-y: auto;
}
.wt-nearby-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex; gap: 12px; align-items: center;
  transition: background .15s;
  text-decoration: none;
  color: inherit;
}
.wt-nearby-item:last-child { border-bottom: none; }
.wt-nearby-item:hover { background: var(--cream); }
.wt-nearby-item.is-closed { opacity: .7; }
.wt-nearby-thumb {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--paprika-soft), var(--turmeric-soft));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.wt-nearby-thumb img { width: 44px; height: 44px; object-fit: cover; }
.wt-nearby-thumb i { color: var(--paprika); font-size: 1rem; }
.wt-nearby-body { flex: 1; min-width: 0; }
.wt-nearby-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: .88rem;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-nearby-meta {
  font-size: .72rem; color: var(--muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-nearby-side {
  flex-shrink: 0;
  text-align: right;
  font-size: .72rem;
}
.wt-nearby-distance {
  color: var(--paprika);
  font-weight: 800;
  font-size: .78rem;
}
.wt-nearby-rating {
  color: var(--tea); font-weight: 700;
  margin-top: 2px;
}
.wt-nearby-status {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  margin-top: 4px;
}

/* Locate Me / primary map action button */
.wt-locate-btn {
  padding: 9px 18px;
  background: var(--paprika);
  color: #fff;
  border: none;
  border-radius: var(--radius-round);
  font-weight: 700; font-size: .88rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, transform .15s;
  box-shadow: 0 4px 12px rgba(194,65,12,.25);
  font-family: inherit;
}
.wt-locate-btn:hover { background: var(--paprika-dark); transform: translateY(-1px); }

/* ───────────────────────── PAGINATION ───────────────────────── */
.wt-pagination {
  display: flex; justify-content: center;
  gap: 6px; flex-wrap: wrap;
  margin-top: var(--sp-8);
}
.wt-page-btn {
  min-width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all .15s;
  padding: 0 12px;
}
.wt-page-btn:hover { border-color: var(--paprika); color: var(--paprika); }
.wt-page-btn.active {
  background: var(--paprika); color: #fff;
  border-color: var(--paprika);
}

/* ───────────────────────── EMPTY STATE ───────────────────────── */
.wt-empty {
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--muted);
  background: var(--cream-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
}
.wt-empty .wt-empty-icon { font-size: 2.5rem; color: var(--paprika-soft); margin-bottom: var(--sp-3); }
.wt-empty h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin-bottom: var(--sp-2); color: var(--ink); }

/* ───────────────────────── MOBILE ───────────────────────── */
@media (max-width: 960px) {
  /* Map + sidebar → stack */
  .wt-map-grid { grid-template-columns: 1fr; }
  .wt-map-container { height: 400px; }
  .wt-nearby-card { position: static; }
  .wt-nearby-list { max-height: 340px; }
  /* Filter bar: allow scroll on narrow screens */
  .wt-filter-bar { overflow-x: auto; }
  .wt-filter-input { min-width: 160px; }
  .wt-hero-wrap { grid-template-columns: 1fr; gap: var(--sp-8); }
  .wt-hero-visual { min-height: 340px; }
  .wt-hero-card-1 { width: 65%; height: 240px; }
  .wt-hero-card-2 { width: 48%; height: 180px; }
  .wt-hero-card-3 { width: 46%; height: 150px; }
  .wt-vendor-grid { grid-template-columns: repeat(2, 1fr); }
  .wt-vendor-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .wt-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .wt-story-grid { grid-template-columns: 1fr; }
  .wt-story-visual img,
  .wt-story-visual .wt-placeholder { height: 320px; }
  .wt-story-quote { right: 0; max-width: 220px; }
  .wt-footer-wrap { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .wt-section-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .wt-section { padding: var(--sp-10) var(--sp-5); }
  .wt-hero { padding: var(--sp-8) var(--sp-5) var(--sp-10); }
  .wt-nav-links { display: none; }
  .wt-hero-title { font-size: 2.1rem; }
  .wt-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .wt-vendor-grid, .wt-vendor-grid--3 { grid-template-columns: 1fr; }
  .wt-hero-card-1 { width: 74%; height: 200px; right: 20px; }
  .wt-hero-card-2 { width: 55%; height: 150px; }
  .wt-hero-card-3 { width: 50%; height: 120px; }
  .wt-cta-banner { padding: var(--sp-10) var(--sp-5); margin: 0 var(--sp-3); }
  .wt-footer-wrap { grid-template-columns: 1fr; gap: var(--sp-6); }
  .wt-fab { width: 48px; height: 48px; bottom: var(--sp-4); right: var(--sp-4); font-size: 1.1rem; }
}

/* Fix: when both logo image AND site name text render together in .wt-logo,
   the .wt-logo-mark class was picking up placeholder-letter styling.
   Give the text a clean side-by-side layout instead. */
.wt-logo .wt-logo-mark:not(:only-child) {
  background: transparent !important;
  color: var(--ink) !important;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  display: inline;
  line-height: 1;
  letter-spacing: -.01em;
}
.wt-logo picture,
.wt-logo picture img,
.wt-logo .wt-logo-img {
  vertical-align: middle;
  display: inline-block;
}

/* ═══ Vendor detail overlap fixes (Phase 1 shipped) ═══════════
   These target three specific overlap bugs that appear once
   imgTag() started emitting <picture> wrappers and the Today's
   Special banner started rendering above the shop card. */

/* Fix 1b: pin .wt-logo layout as flex + gap so the icon and
   text sit cleanly side by side (existing rule below only
   restyled the text, didn't guarantee container layout). */
.wt-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wt-logo picture,
.wt-logo picture img,
.wt-logo .wt-logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Fix 2: vendor detail page — <picture> wrapper needs an
   explicit box so the responsive image doesn't overflow its
   84×84 rounded container. */
.vd-logo picture {
  width: 84px;
  height: 84px;
  display: block;
  overflow: hidden;
}
.vd-logo picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fix 3: Today's Special banner was pulled up (-30px) AND main
   grid was pulled up (-60px) simultaneously — they stacked and
   the banner's shadow bled into the sidebar Call Now button.
   Anchor the special to natural flow; skip the pull-up on main
   when a special exists. */
.vd-special-wrap {
  margin-top: 12px !important;
  margin-bottom: 22px !important;
}
.vd-special-wrap + .vd-main {
  margin-top: 0 !important;
}

/* ═══ Vendor detail — HARDENED overlap fixes (Phase 1 v2) ═══
   Previous fixes weren't enough. Two harder constraints below. */

/* HARDER Fix 2: Force .vd-logo to a rigid 84x84 box regardless of
   whether the child is <picture>, <img>, or a Font Awesome <i>.
   Use max-width/min-width to defeat any inherited flex growth,
   and use !important because we're overriding potentially inherited
   Bootstrap or legacy rules. */
.vd-logo {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  min-height: 84px !important;
  max-width: 84px !important;
  max-height: 84px !important;
  flex-shrink: 0;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
}
.vd-logo > * {
  max-width: 84px !important;
  max-height: 84px !important;
}
.vd-logo picture,
.vd-logo img,
.vd-logo > img {
  width: 84px !important;
  height: 84px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}
.vd-logo picture img {
  width: 100% !important;
  height: 100% !important;
}
.vd-logo i {
  font-size: 2rem;
  color: var(--paprika);
}

/* HARDER Fix 3: Special banner now lives INSIDE the left grid column
   (PHP moved it), so it can't overflow the sidebar. Remove the old
   negative-margin behaviour and give the card its own breathing room. */
.vd-special-card {
  background: linear-gradient(135deg, var(--paprika-soft), var(--turmeric-soft));
  border: 1px solid rgba(194,65,12,.2);
  border-radius: 18px;
  padding: 20px 24px 22px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(194,65,12,.15);
}
.vd-special-tag {
  position: absolute;
  top: 0; right: 0;
  background: var(--paprika);
  color: #fff;
  padding: 6px 16px;
  border-radius: 0 0 0 12px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vd-special-body {
  display: flex; gap: 18px;
  align-items: center;
  margin-top: 12px;
}
.vd-special-photo {
  width: 120px; height: 120px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(120,53,15,.2);
  background: var(--white);
}
.vd-special-photo picture,
.vd-special-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.vd-special-info { flex: 1; min-width: 0; }
.vd-special-name {
  font-family: 'Playfair Display', 'Hind Siliguri', serif;
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.vd-special-name-alt {
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  font-size: .95rem;
  color: var(--tea);
  margin-top: 4px;
  opacity: .85;
}
.vd-special-price-row {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.vd-special-price {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--paprika);
  line-height: 1;
}
.vd-special-note {
  background: var(--white);
  color: var(--paprika-dark);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Hide the old .vd-special-wrap in case any cached HTML still emits it */
.vd-special-wrap { display: none !important; }

@media (max-width: 560px) {
  .vd-special-photo { width: 90px !important; height: 90px !important; }
  .vd-special-body { gap: 14px; }
}

/* ═══ NUCLEAR: strip .wt-logo-mark placeholder styling when it sits
   next to a logo image. Previous fix left background-image (gradient)
   and box-shadow intact because `background: transparent` doesn't
   touch background-image. ═══ */
a.wt-logo > span.wt-logo-mark,
.wt-nav a.wt-logo > span.wt-logo-mark,
.wt-nav a.wt-logo > .wt-logo-mark:not(:only-child),
a.wt-logo picture ~ .wt-logo-mark,
a.wt-logo img ~ .wt-logo-mark {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: var(--ink) !important;
  font-family: 'Playfair Display', 'Hind Siliguri', Georgia, serif !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  display: inline !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  box-shadow: none !important;
  text-shadow: none !important;
  align-items: initial !important;
  justify-content: initial !important;
}

/* ═══ Logo sizing v3 — support both wide lockups AND square icons ═══
   Previous rule forced 40x40 square with object-fit:contain. That works
   for icon-only logos but shrinks wide lockups (like the full SpotlyBD
   wordmark, aspect ~3.7:1) to a 40x11 letterboxed strip that reads tiny.
   New rule: fix height at 40px, let width scale naturally up to a max.
   Square logos render 40x40. Wide lockups render 40 tall by whatever
   width the aspect ratio demands, capped at 200px so nothing dominates. */
.wt-logo picture,
.wt-logo picture img,
.wt-logo .wt-logo-img {
  height: 40px !important;
  width: auto !important;
  max-width: 200px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.wt-logo picture {
  overflow: visible !important;
}
/* Mobile: cap logo width tighter so it doesn't crowd nav on small screens */
@media (max-width: 560px) {
  .wt-logo picture,
  .wt-logo picture img,
  .wt-logo .wt-logo-img {
    max-width: 140px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}

/* ═══ Nav logo — aspect-adaptive sizing (v2 lockup fix) ═══
   Previous CSS forced 40×40, which shrinks wide lockup logos to
   an unreadable ~40×11 and can distort PNG rasters. New rule:
   fixed height (44px) with auto width and generous max-width.
   Result: icon-only logos still render ~44×44, wide lockups
   render at proper 3:1+ aspect ratio, ultra-wide caps at 260px. */
.wt-logo picture,
.wt-logo picture img,
.wt-logo picture source,
.wt-logo img,
.wt-logo .wt-logo-img {
  height: 44px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 260px !important;
  object-fit: contain !important;
  display: block !important;
}
/* Mobile: slightly smaller so the lockup doesn't push nav items off-screen */
@media (max-width: 640px) {
  .wt-logo picture,
  .wt-logo picture img,
  .wt-logo picture source,
  .wt-logo img,
  .wt-logo .wt-logo-img {
    height: 36px !important;
    max-width: 200px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Favorites — heart button + toast
   Used across vendor profile, listing cards, and nav badge.
   No localStorage inside CSS; only visual states driven by
   assets/js/favorites.js adding/removing .is-fav class.
   All display/state rules use !important because Font Awesome and
   wt-btn utilities have their own opinions we need to override.
   ═══════════════════════════════════════════════════════════════ */

/* ── Standalone .sbd-fav-btn (only when NOT paired with wt-btn) ──
   Provides its own padding/border/font. If .wt-btn is also present, the
   wt-btn family handles the base look and .sbd-fav-btn just contributes
   the label-swap + heart-color behavior. */
.sbd-fav-btn:not(.wt-btn) {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 14px;
  background: var(--white); color: var(--muted);
  border: 1.5px solid var(--border-2); border-radius: 10px;
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: all .15s;
  line-height: 1; user-select: none;
}
.sbd-fav-btn:not(.wt-btn):hover {
  border-color: #fecaca; color: #dc2626; background: #fef2f2;
}

/* ── Heart icon — outline by default, solid red when favorited ──
   Font Awesome 6 uses font-weight to distinguish `far` (400=outline)
   from `fas` (900=solid). HTML ships `.far.fa-heart`; we override
   font-weight to 900 on .is-fav. !important beats FA's `.far`
   utility which also sets font-weight. */
.sbd-fav-btn i { transition: color .2s, transform .2s; font-size: 1rem; }
.sbd-fav-btn:not(.is-fav) i { font-weight: 400 !important; color: currentColor; }
.sbd-fav-btn.is-fav       i { font-weight: 900 !important; color: #dc2626; transform: scale(1.15); }

/* ── Filled state colors — override wt-btn-outline paprika when active ── */
.sbd-fav-btn.is-fav {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

/* ── Label swap — the piece that was cache-broken before ──
   !important guarantees the rule wins over any inherited display
   from parent flex containers or older cached CSS. */
.sbd-fav-btn .sbd-fav-label-off,
.sbd-fav-btn .sbd-fav-label-on { display: inline; }
.sbd-fav-btn.is-fav       .sbd-fav-label-off { display: none !important; }
.sbd-fav-btn:not(.is-fav) .sbd-fav-label-on  { display: none !important; }

/* ── Compact heart used as overlay on listing cards ── */
.sbd-fav-mini {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: all .15s;
}
.sbd-fav-mini:hover { color: #dc2626; background: #fff; transform: scale(1.08); }
.sbd-fav-mini.is-fav { color: #dc2626; background: #fff; }
/* Two-icon-weight swap for the mini heart. !important beats FA's .far/.fas
   which also set font-weight — otherwise the icon stays outline forever. */
.sbd-fav-mini i { transition: transform .15s; }
.sbd-fav-mini:not(.is-fav) i { font-weight: 400 !important; }
.sbd-fav-mini.is-fav       i { font-weight: 900 !important; transform: scale(1.15); }

/* ── Nav badge showing favorites count ──
   Note: two `display:` declarations were merged into one — inline-flex only
   when the badge has content (JS sets style.display='none' when count is 0). */
.sbd-fav-nav-badge {
  min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  background: #dc2626; color: #fff;
  font-size: .68rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; letter-spacing: .02em;
}

/* Toast confirmation on add/remove */
.sbd-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  font-size: .92rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .3s, transform .3s;
  z-index: 9999; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.sbd-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.sbd-toast-add    { background: #dc2626; }
.sbd-toast-add    i { color: #fff; }
.sbd-toast-remove { background: var(--muted); }