/* Rentlelo — Blinkit-Inspired Light Theme */
/* Self-hosted variable fonts. Was an @import of fonts.googleapis.com, which
   serialized the chain: app.css had to download+parse before the font request
   was even discovered (~811ms render-blocking). Devanagari is NOT covered by
   Inter/Manrope and still falls through to the system font, as before. */
/* Currency + a few symbols, split out of latin-ext. The rupee sign U+20B9 lives
   in latin-ext, so every ₹ price on the page used to pull the whole 84KB
   accented-Latin file. This face is 8.6KB; latin-ext now only downloads if a
   listing actually contains an accented character. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/inter-currency.woff2) format('woff2');
  unicode-range: U+2020, U+20A0-20C0, U+2113;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/manrope-currency.woff2) format('woff2');
  unicode-range: U+2020, U+20A0-20C0, U+2113;
}
/* Inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+02BD-02FF;
}
/* Inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+02BD-02FF;
}
/* Manrope latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Blinkit-Style Colors */
  --bg: #FFFFFF;
  --bg-secondary: #F7F7F7;
  --surface: #FFFFFF;
  --surface-hover: #F5F5F5;
  --border: #E8E8E8;
  --border-light: #F0F0F0;
  
  /* Text */
  --text: #1F1F1F;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  /* Accent - Fresh Green (Blinkit Yellow alternative) */
  --accent: #00A676;
  --accent-hover: #008C64;
  --accent-light: #E6F9F2;
  --accent-border: #B3E8D5;
  
  /* Status */
  --success: #00A676;
  --error: #E53935;
  --warning: #FF9800;
  --info: #2196F3;
  
  /* Blinkit Yellow for highlights */
  --highlight: #F8CB00;
  --highlight-light: #FFF9E0;
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  
  /* Radius - Blinkit style (rounded but not too much) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Legacy aliases — lots of inline markup references these names; without them the
     values resolve to nothing (transparent cards, no borders, unset radius). */
  --card: var(--surface);
  --line: var(--border);
  --radius: var(--radius-md);
  --brand: var(--accent);
  --radius-full: 9999px;
  
  /* Shadows - Subtle like Blinkit */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: 'Manrope', 'Inter', -apple-system, sans-serif;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══ TYPOGRAPHY ═══
   Manrope for display/headings, Inter for body. Prices get lining
   tabular figures so ₹ amounts align in grids and tables. */
h1, h2, h3, h4,
.desktop-section-title, .desktop-hero-title, .desktop-cta-title,
.hero-title, .cat-side-title {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h1 { font-size: 22px; font-weight: 800; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
.desktop-product-price, .lcard .price, .stat-tile .n, .price-table td {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ═══════════════════════════════════════════
   TOP BAR (Blinkit Yellow Header)
   ═══════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #F8CB00;
  padding: 12px 16px calc(12px + 4px);
  /* curved underside — the page scrolls up behind the corners */
  border-radius: 0 0 22px 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

.topbar-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Wordmark. One-time entrance: the letters settle in from wide tracking rather
   than a colour/gradient effect, which keeps it calm on the yellow bar. The
   "lelo" half draws its underline just after the type lands. */
.logo {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 800;
  color: #1A1A1A;
  text-decoration: none;
  letter-spacing: -0.5px;
  display: inline-block;
  animation: logoIn .62s cubic-bezier(.2,.7,.3,1) both;
}
.logo b {
  position: relative;
  display: inline-block;
  /* "lelo" keeps cycling out and back so the wordmark feels alive. Only
     opacity/transform animate — both composited, so this costs no layout work
     even though it never stops. 6s cycle: the motion is a small part of it, the
     rest is a hold, otherwise it reads as a nervous flicker. */
  animation: leloCycle 6s ease-in-out 1.1s infinite;
}
.logo b::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;   /* follows .logo b colour */
  transform: scaleX(0);
  transform-origin: left;
  animation: logoRule .5s .42s cubic-bezier(.2,.7,.3,1) forwards;
}
.logo:hover b { animation-play-state: paused; }
.logo:hover b::after { animation: none; transform: scaleX(1); }
@keyframes logoIn {
  from { opacity: 0; transform: translateY(-5px); letter-spacing: 2.5px; }
  to   { opacity: 1; transform: none;             letter-spacing: -0.5px; }
}
@keyframes logoRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes leloCycle {
  0%, 62%   { opacity: 1; transform: translateY(0)    scale(1); }
  70%       { opacity: 0; transform: translateY(-6px) scale(.92); }
  78%       { opacity: 0; transform: translateY(6px)  scale(.92); }
  88%, 100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .logo { animation: none; }
  .logo b::after { animation: none; transform: scaleX(1); }
  /* Keep the wordmark alive, but as a pure cross-fade. Reduced-motion is about
     vestibular triggers — movement, parallax, spin — and an opacity fade is the
     recommended substitute rather than removing the effect outright. */
  .logo b { animation: leloFade 6s ease-in-out 1.1s infinite; }
}
@keyframes leloFade {
  0%, 62%   { opacity: 1; }
  70%, 78%  { opacity: 0; }
  88%, 100% { opacity: 1; }
}

.logo b {
  color: #FFFFFF;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.location-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.1);
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: #1A1A1A;
}

.lang-toggle {
  background: rgba(0,0,0,0.1);
  border: none;
  border-radius: var(--radius-full);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #1A1A1A;
  cursor: pointer;
}

/* ═══════════════════════════════════════════
   SEARCH (Blinkit Style - Inside Header)
   ═══════════════════════════════════════════ */
.search-section {
  padding: 0;
}

.searchbar {
  display: flex;
  align-items: center;
  background: white;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.searchbar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: #1A1A1A;
  background: transparent;
}

.searchbar input::placeholder {
  color: #999;
}

.searchbar button {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.searchbar button:hover {
  color: var(--accent);
}

/* Search Suggestions */
.search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
  max-height: 400px;
  overflow-y: auto;
}

.search-suggestions.active {
  display: block;
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border-light);
}

.search-suggestion:last-child {
  border-bottom: none;
}

.search-suggestion:hover,
.search-suggestion.active {
  background: var(--bg-secondary);
}

.search-suggestion:first-child {
  border-radius: 12px 12px 0 0;
}

.search-suggestion:last-child {
  border-radius: 0 0 12px 12px;
}

.search-suggestion-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: 8px;
  flex-shrink: 0;
}

.search-suggestion-content {
  flex: 1;
  min-width: 0;
}

.search-suggestion-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: block;
}

.search-suggestion-text strong {
  font-weight: 700;
  color: var(--accent);
}

.search-suggestion-category {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.search-suggestion-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.search-suggestion:hover .search-suggestion-arrow {
  opacity: 1;
}

.search-section {
  position: relative;
}

/* ═══════════════════════════════════════════
   HERO CAROUSEL (Full Width, No Gaps)
   ═══════════════════════════════════════════ */
.hero-section {
  /* .container has no side padding — negative bleed margins overflowed the
     viewport 16px (h-scroll + mobile zoom-out that clipped the bottomnav) */
  margin: 0 0 8px;
}

.hero-carousel {
  position: relative;
  overflow: hidden;
  background: #1A1A1A;
  width: 100%;
  min-height: 200px;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 200px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
}

.hero-tag {
  display: inline-block;
  background: #F8CB00;
  color: #1A1A1A;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  width: fit-content;
}

.hero-title {
  font-size: 24px;
  font-weight: 800;
  color: white;
  line-height: 1.15;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 16px;
  max-width: 250px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F8CB00;
  color: #1A1A1A;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  width: fit-content;
  transition: all 0.15s;
}

.hero-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(248,203,0,0.4);
}

.hero-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s;
}

.hero-dot.active {
  background: #F8CB00;
  width: 24px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════
   QUICK CATEGORIES (Blinkit Horizontal Scroll)
   ═══════════════════════════════════════════ */








/* ═══════════════════════════════════════════
   SECTION HEADERS (Blinkit Style)
   ═══════════════════════════════════════════ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 12px;
  background: var(--bg);
  margin-bottom: 1px;
}

.section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.section-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════
   LISTING CARDS (Blinkit Product Card Style)
   ═══════════════════════════════════════════ */
.card-rail {
  display: flex;
  gap: 12px;
  padding: 0 16px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--bg);
}

.card-rail::-webkit-scrollbar { display: none; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px 16px 16px;
  background: var(--bg);
}

.lcard {
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  min-width: 160px;
  border: 1px solid var(--border);
  transition: all 0.15s;
}

.lcard:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.card-rail .lcard {
  min-width: 180px;
}

.lcard .ph {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-secondary);
  position: relative;
}

.lcard .ph.noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: var(--bg-secondary);
}

.lcard .body {
  padding: 10px 12px 12px;
}

.lcard .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lcard .loc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.price-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.price-chip small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.badge-featured {
  position: absolute;
  top: 8px;
  left: 8px;
  /* .lcard .ph is position:relative and comes AFTER this in the DOM, so with
     z-index:auto the photo painted straight over the badge — it was invisible
     on every card site-wide. */
  z-index: 2;
  background: var(--highlight);
  color: #1F1F1F;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   DELIVERY PROMISE (Blinkit Style)
   ═══════════════════════════════════════════ */
.promise-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-light);
  margin: 0 16px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-border);
}

.promise-icon {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.promise-text h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.promise-text p {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════
   CATEGORY GRID (Blinkit Style)
   ═══════════════════════════════════════════ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
  background: var(--bg);
  margin-bottom: 8px;
}

.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.cat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 2px solid var(--border);
  transition: all 0.15s;
}

.cat-item:hover .cat-icon {
  border-color: var(--accent);
  transform: scale(1.05);
}

.cat-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

/* ═══════════════════════════════════════════
   HOW IT WORKS (Blinkit Style Steps)
   ═══════════════════════════════════════════ */







/* ═══════════════════════════════════════════
   BOTTOM NAV (Blinkit Style)
   ═══════════════════════════════════════════ */
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 12px;
  transition: all 0.15s;
}

.bottomnav a:active,
.bottomnav a.active {
  color: var(--accent);
}

.bottomnav a .nico {
  font-size: 22px;
  line-height: 1;
}

.bottomnav .post-btn {
  position: relative;
  top: -14px;
}

.bottomnav .post-btn .nico {
  background: var(--accent);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(0,166,118,0.3);
  transition: all 0.15s;
}

.bottomnav .post-btn:hover .nico {
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════
   BUTTONS (Blinkit Style)
   ═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-secondary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

/* ═══════════════════════════════════════════
   CONTAINER
   ═══════════════════════════════════════════ */
.container {
  max-width: 480px;
  margin: 0 auto;
  padding-top: 118px; /* fixed .topbar is 104px tall */
  padding-bottom: 80px;
}

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════
   CTA (Blinkit Style)
   ═══════════════════════════════════════════ */
.cta-section {
  padding: 20px 16px;
  background: var(--bg);
  margin-bottom: 8px;
}

.cta-card {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

.cta-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.cta-title {
  font-size: 18px;
  font-weight: 800;
  color: white;
  margin-bottom: 8px;
}

.cta-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: var(--accent);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.15s;
}

.cta-btn:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════
   SKELETON
   ═══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-light) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.sk-card { height: 200px; margin-bottom: 12px; }
.sk-line { height: 14px; margin-bottom: 8px; }

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  z-index: 1000;
  opacity: 0;
  transition: all 0.2s;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  transition: all 0.15s;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,166,118,0.1);
}

/* ═══════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════ */
.error-text { color: var(--error); font-size: 12px; margin-top: 4px; }
.hint { color: var(--text-muted); font-size: 12px; }

/* ═══════════════════════════════════════════
   OWNER CARD
   ═══════════════════════════════════════════ */
.owner-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin: 16px 0;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-light);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.price-table tr {
  border-bottom: 1px solid var(--border-light);
}

.price-table td {
  padding: 10px 0;
  font-size: 13px;
}

.gallery {
  display: flex;
  overflow-x: auto;
  border-radius: var(--radius-md);
}

.gallery img {
  min-width: 100%;
  height: 280px;
  object-fit: cover;
}

.disclaimer {
  background: var(--highlight-light);
  border: 1px solid #F0E0A0;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 12px;
  color: #7A6800;
  margin: 12px 0;
}

.ad-slot {
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  margin: 0 16px 16px;
}

/* ═══════════════════════════════════════════
   BOOKING
   ═══════════════════════════════════════════ */
/* Segmented pill tabs (cylindrical) */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

.tab {
  flex: 1;
  padding: 9px 14px;
  text-align: center;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.tab.active {
  background: var(--accent);
  color: white;
  box-shadow: var(--shadow-sm);
}

.booking-card { margin: 0 16px 12px; }

.booking-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
}

.status-requested { background: #FFF3E0; color: #E65100; }
.status-accepted { background: var(--accent-light); color: var(--accent); }
.status-picked_up { background: #E3F2FD; color: #1565C0; }
.status-returned { background: var(--bg-secondary); color: var(--text-secondary); }
.status-completed { background: var(--accent-light); color: var(--accent); }
.status-declined { background: #FFEBEE; color: #C62828; }
.status-cancelled { background: #FFEBEE; color: #C62828; }
.status-disputed { background: #FFEBEE; color: #C62828; }

.booking-dates { font-size: 12px; color: var(--text-muted); margin: 4px 0; }

/* ═══════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════ */
.notif-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}

.notif-item.unread { background: var(--accent-light); }
.notif-body { font-size: 13px; font-weight: 500; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card-rail .lcard { min-width: 200px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Unread badges (chats bottomnav + header bell) */
.nav-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e02b2b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.nico { position: relative; display: inline-block; }

/* ═══════════════════════════════════════════
   MOTION (professional, transform/opacity only)
   ═══════════════════════════════════════════ */
/* Scroll-reveal: reveal.js tags elements .rv, flips .rv-in on viewport entry */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease var(--rv-d, 0ms), transform .65s cubic-bezier(.16,1,.3,1) var(--rv-d, 0ms);
  /* no will-change here: it pinned a compositor layer on every tagged element
     (131 on the homepage) for the whole page lifetime, which is exactly the
     kind of layer pressure that makes phone scrolling stutter. The browser
     promotes during the transition on its own. */
}
.rv.rv-in { opacity: 1; transform: none; }

/* Hero copy: slide-in per slide activation (keyed off .active toggle) */
.hero-slide .hero-tag,
.hero-slide .hero-title,
.hero-slide .hero-subtitle,
.hero-slide .hero-btn {
  opacity: 0;
  transform: translateY(12px);
}
.hero-slide.active .hero-tag,
.hero-slide.active .hero-title,
.hero-slide.active .hero-subtitle,
.hero-slide.active .hero-btn {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.hero-slide.active .hero-title    { transition-delay: .08s; }
.hero-slide.active .hero-subtitle { transition-delay: .16s; }
.hero-slide.active .hero-btn      { transition-delay: .24s; }

/* Micro-interactions. .pcard is excluded from the shared hover/lift below —
   it defines its own transform (with an image zoom), and two competing
   transform rules on the same element fight each other. */
.lcard, .cat-item, .cta-btn, .btn, .chip {
  transition: transform .18s ease, box-shadow .18s ease;
}
.lcard:active, .cat-item:active, .pcard:active { transform: scale(.985); }
.btn:active, .chip:active, .cta-btn:active { transform: scale(.96); }
@media (hover: hover) {
  .lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .cat-item:hover { transform: translateY(-2px); }
}

/* Hero dots: smooth width morph for the active dot */
.hero-dot { transition: width .25s ease, background .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-slide .hero-tag, .hero-slide .hero-title,
  .hero-slide .hero-subtitle, .hero-slide .hero-btn { opacity: 1; transform: none; transition: none; }
}

/* "Book" button on listing cards */
.card-book {
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .15s ease, background .15s ease;
}
.card-book:hover { background: var(--accent-hover); }
.card-book:active { transform: scale(.94); }

/* Chips: pill buttons/selects used across SPA screens (search filters, sort,
   listing actions, booking actions, wallet, support). The class was referenced
   everywhere but never defined — elements rendered browser-default. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  line-height: 1.2;
}
.chip:hover { background: var(--surface-hover); }
.chip.on {
  background: var(--accent-light);
  border-color: var(--accent-border);
  color: var(--accent);
}
.quick-replies { display: flex; flex-wrap: wrap; gap: 6px; }

/* Baseline for inputs rendered by SPA screens without a .field wrapper
   (search box, filter prices, wallet referral, post price units) */
#screen input:not([type="checkbox"]):not([type="radio"]):not(.chip),
#screen textarea:not(.chip),
#screen select:not(.chip) {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
}
#screen input:not(.chip):focus,
#screen textarea:not(.chip):focus,
#screen select:not(.chip):focus {
  outline: none;
  border-color: var(--accent);
}

/* Pro nav: desktop topnav links (header partial) + bottomnav refinements.
   Bottomnav is mobile-only; ≥1024px the topbar links take over. */
.topnav-links { display: none; }
.bottomnav a.active .nico svg { stroke-width: 2.5; }
.bottomnav a { -webkit-tap-highlight-color: transparent; }
.bottomnav .post-btn.active .nico { box-shadow: 0 4px 14px rgba(0,166,118,0.45); }
@media (min-width: 1024px) {
  .topnav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 26px;
    flex: 1;
  }
  .topnav-links a {
    color: #1A1A1A;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    transition: background .15s;
    position: relative;
  }
  .topnav-links a:hover { background: rgba(0,0,0,.08); }
  .topnav-links a.active { background: rgba(0,0,0,.12); }
  .topnav-links a.topnav-post {
    background: var(--accent);
    color: #fff;
    margin-left: 8px;
    font-weight: 700;
  }
  .topnav-links a.topnav-post:hover { background: var(--accent-hover); }
  .bottomnav { display: none; }
  .container { padding-bottom: 40px; }
  .chat-input { bottom: 0; }
}

/* Chat thread (chatThread in app.js; classes were never defined) */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  min-height: 40vh;
}
.msg {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}
.msg.mine {
  align-self: flex-end;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-bottom-right-radius: 4px;
}
.msg.theirs {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.msg .t { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 3px; text-align: right; }
.chat-input {
  position: sticky;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* clears fixed .bottomnav */
  display: flex;
  gap: 8px;
  padding: 8px 0;
  background: var(--bg);
}
.chat-input input { flex: 1; }
.chat-input button {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

/* Admin panel widgets (rendered by admin.js; classes were never defined) */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.stat-tile .n { font-size: 26px; font-weight: 800; line-height: 1.1; }
.stat-tile .lbl { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 8px 0 16px;
  font-size: 13.5px;
}
.admin-table th, .admin-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}
.admin-table tr:last-child td, .admin-table tr:last-child th { border-bottom: none; }
.admin-table th {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .4px;
}
/* Phones: wide tables (Users, KYC, Payouts) scroll sideways instead of
   clipping their last column off-screen */
@media (max-width: 640px) {
  .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ═══ CATEGORY PAGE (JioMart/Blinkit two-column) ═══
   Mobile: horizontal category rail + sort pills, single column.
   ≥1024px: sticky left sidebar (categories + filters), catalogue fills right. */
.cat-mobrail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 0 2px;
}
.cat-mobrail::-webkit-scrollbar { display: none; }
.cat-mobrail .chip { flex-shrink: 0; }
.cat-sidebar { display: none; }
.cat-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 4px;
}
.cat-h1 { font-size: 19px; margin: 0 0 4px; }
.cat-results-count {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  white-space: nowrap;
}
.cat-sort-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0 4px;
}
.cat-sort-pills::-webkit-scrollbar { display: none; }
.cat-sort-pills .chip { flex-shrink: 0; text-decoration: none; }
.catalogue-grid { margin-top: 12px; }

.cat-side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}
.cat-side-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.cat-side-list { display: flex; flex-direction: column; }
.cat-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}
.cat-side-link:hover { background: var(--surface-hover); }
.cat-side-link.on {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
}
.cat-side-icon { width: 22px; }
.cat-side-name { flex: 1; }
.cat-side-count {
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.cat-side-link.on .cat-side-count { color: var(--accent); background: rgba(255,255,255,.7); }
.cat-filters { display: flex; flex-direction: column; gap: 8px; }
.cat-filter-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-top: 4px; }
.cat-filters input, .cat-filters select {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  width: 100%;
}
.cat-filters input:focus, .cat-filters select:focus { outline: none; border-color: var(--accent); }
.cat-filter-row { display: flex; gap: 8px; }
.cat-filter-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; cursor: pointer; }
.cat-filter-check input { width: auto; }
.cat-filter-apply { border-radius: var(--radius-full); }
.cat-filter-clear {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
}
.cat-filter-clear:hover { color: var(--accent); }
/* Mobile filter trigger + sheet. Desktop keeps the always-visible sidebar form,
   so both the bar and the sheet are hidden at ≥1024px. */
.cat-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.cat-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cat-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.cat-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.cat-filter-reset {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
}
.cat-filter-reset:hover { color: var(--accent); }
.cat-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cat-sheet-close {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 6px;
}
.cat-filter-sheet .cat-filter-apply { margin-top: 6px; }
@media (min-width: 1024px) {
  .cat-filterbar { display: none; }
  /* inline style sets display:flex when opened — !important keeps a stale open
     sheet from surviving a resize past the breakpoint */
  .cat-filter-sheet { display: none !important; }
}

.cat-side-cta { text-align: center; }
.cat-side-cta-title { font-weight: 800; font-size: 14.5px; margin: 6px 0 2px; }

@media (min-width: 1024px) {
  .container.cat-page { max-width: 1280px; padding-left: 24px; padding-right: 24px; }
  .cat-mobrail, .cat-sort-pills { display: none; }
  .cat-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 16px;
  }
  .cat-sidebar {
    display: block;
    position: sticky;
    top: 130px; /* below the fixed 104px topbar */
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .cat-h1 { font-size: 24px; }
  .cat-results .card-grid.catalogue-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1360px) {
  .cat-results .card-grid.catalogue-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ CATEGORY SVG ICONS ═══
   Containers below were sized for emoji glyphs (font-size + text-align).
   SVGs need flex centring and inherit colour from the parent link instead. */
.cat-svg { display: block; flex-shrink: 0; }
.cat-side-icon,
.cathub-icon,
.reel-icon,
.shelf-ico { display: inline-flex; align-items: center; justify-content: center; }
.cat-side-icon { color: var(--text-secondary); }
.cat-side-link.on .cat-side-icon { color: var(--accent); }
.cathub-icon { color: var(--accent); }
.cathub-card:hover .cathub-icon { color: var(--accent-hover); }
/* reel captions sit on a photo — keep the glyph white like the text */
.reel-icon { color: #fff; opacity: .95; }
.shelf-ico { color: var(--accent); }
/* chips put the icon inline with the label */
.chip .cat-svg { display: inline-block; vertical-align: -3px; margin-right: 2px; }

/* ═══ CATEGORY SHELVES (homepage, below Fresh) ═══
   One block per category: name + up to 4 cards + a See-all pill. */
.shelf { margin-top: 6px; }
.shelf + .shelf { border-top: 1px solid var(--border-light); }
.shelf-head { align-items: center; padding-top: 22px; }
/* Emoji sits in its own rounded tile rather than inline in the sentence, where
   it fights the type's baseline and optical size. */
.shelf-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shelf-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--bg-secondary);
  font-size: 17px;
  line-height: 1;
  /* keep the glyph off the text baseline so tiles align regardless of emoji */
  padding-bottom: 1px;
}
.shelf-name {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shelf-all {
  flex-shrink: 0;
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.shelf-all:hover { border-color: var(--accent); background: var(--accent-light); }
@media (min-width: 1024px) {
  .shelf { margin-top: 10px; }
  .shelf .section-header { padding-left: 0; padding-right: 0; }
  .shelf .card-grid { padding-left: 0; padding-right: 0; }
  .shelf-ico { width: 40px; height: 40px; border-radius: 13px; font-size: 20px; }
  .shelf-name { font-size: 24px; letter-spacing: -0.035em; }
  .shelf-all { font-size: 13px; padding: 8px 16px; }
}

/* ═══ REEL SLIDER (portrait 9:16 category banners) ═══
   Native scroll-snap so swipe works with JS off; slider.js only wires the
   desktop arrows. Cards are 160x285 (9:16) on mobile, 190x338 on desktop. */
/* .container has NO side padding — each section supplies its own 16px (see
   .section-header / .card-grid). A negative-margin bleed here would overflow
   the viewport by 16px, the same bug that hit .hero-section. */
.reels { margin: 22px 0 6px; }
.reels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-bottom: 12px;
}
.reels-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.reels-nav { display: none; gap: 6px; }
.reels-arrow {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.reels-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.reels-arrow:disabled { opacity: .35; cursor: default; }

.reels-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Cards run off the right edge like a reel feed. Padding (not negative
     margin) keeps the page exactly viewport-width. scroll-padding makes the
     snap points respect that padding — without it the browser snaps the first
     card flush to the edge, silently scrolling the track 16px on load. */
  padding: 2px 16px 6px;
  scroll-padding-left: 16px;
}
.reels-track::-webkit-scrollbar { display: none; }

.reel {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  color: #fff;
  background: var(--bg-secondary);
  display: block;
  transition: transform .18s ease, box-shadow .18s ease;
}
.reel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.reel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Legibility floor for the caption regardless of how bright the photo is */
.reel-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 32%, rgba(0,0,0,0) 62%);
}
.reel-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.reel-icon { line-height: 1; height: 14px; }
.reel-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.reel-price {
  font-size: 9.5px;
  opacity: .92;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (min-width: 1024px) {
  .reels { margin: 30px 0 10px; }
  .reels-title { font-size: 20px; }
  .reels-nav { display: flex; }
  /* desktop track has no side padding, so the head must not either — otherwise
     the title sits 16px right of the first card */
  .reels-head { padding: 0; }
  .reels-track { padding: 2px 0 8px; gap: 10px; scroll-padding-left: 0; }
  .reel { width: 124px; border-radius: 14px; }
  .reel-name { font-size: 12px; }
  .reel-price { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .reels-track { scroll-behavior: auto; }
  .reel { transition: none; }
  .reel:hover { transform: none; }
}

/* ═══ CATEGORY HUB + CITY HUB ═══ */
.crumbs {
  font-size: 12.5px;
  color: var(--text-secondary);
  padding-top: 12px;
}
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 5px; opacity: .6; }

.cathub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0 8px;
}
.cathub-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cathub-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.cathub-icon { line-height: 1; height: 26px; }
.cathub-name { font-family: var(--font-head); font-weight: 700; font-size: 14px; margin-top: 4px; }
.cathub-hi { font-size: 12px; color: var(--text-secondary); }
.cathub-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.cathub-cities { margin: 26px 0 8px; }

.city-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  margin: 12px 0 6px;
}
.city-h1 { font-size: 22px; margin: 0 0 6px; }
.city-sub { font-size: 14px; color: var(--text-secondary); margin: 0 0 14px; }
.city-h2 { font-size: 17px; margin: 26px 0 2px; }
.city-stats { display: flex; gap: 22px; margin-bottom: 16px; }
.city-stat { display: flex; flex-direction: column; }
.city-stat b {
  font-family: var(--font-head);
  font-size: 20px;
  font-variant-numeric: lining-nums tabular-nums;
}
.city-stat span { font-size: 11.5px; color: var(--text-secondary); }
.city-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.city-cta .btn { width: auto; padding: 10px 18px; text-decoration: none; display: inline-block; }
.city-seo {
  margin: 30px 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.city-seo p { margin: 10px 0; }

@media (min-width: 700px) {
  .cathub-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
  .cathub-grid { grid-template-columns: repeat(6, 1fr); }
  .cathub-grid-compact { grid-template-columns: repeat(9, 1fr); }
  .city-hero { padding: 32px 28px; }
  .city-h1 { font-size: 30px; }
  .city-sub { font-size: 15.5px; }
}

/* ═══ SITE FOOTER ═══
   Shared across every SSR page. Mobile: stacked 2-col grid, sits above the
   fixed bottomnav (hence the extra bottom padding). ≥1024px: 5 columns. */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding: 28px 16px calc(90px + env(safe-area-inset-bottom, 0px));
}
.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.site-footer-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--text);
}
.site-footer-link {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 0;
}
.site-footer-link:hover { color: var(--accent); }
.site-footer-bottom {
  max-width: 1280px;
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.site-footer-contact a { color: var(--accent); text-decoration: none; font-weight: 600; }
.site-footer-contact a:hover { text-decoration: underline; }
.site-footer-sep { margin: 0 6px; opacity: .5; }

@media (min-width: 700px) {
  .site-footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer { padding: 40px 24px 32px; }
  .site-footer-grid { grid-template-columns: repeat(5, 1fr); gap: 28px 20px; }
  .site-footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Bottom sheets (booking modal, safety gate): full-width sheet on mobile,
   centered capped card on desktop */
.sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 200; /* above topbar/bottomnav (100), below toast (1000) */
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  background: var(--card);
  border-radius: 18px 18px 0 0;
  padding: 22px 18px;
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .sheet-overlay { align-items: center; padding: 24px; }
  .sheet { max-width: 560px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
}

/* ═══════════════════════════════════════════
   SEARCH SCREEN (SPA) — 3-column on desktop
   The shell (.container) is capped at 480px for the mobile-first SPA, which left
   ~480px of dead space each side on desktop. searchScreen adds .screen-wide.
   ═══════════════════════════════════════════ */
.srch-bar { margin-bottom: 10px; }
.srch-trend { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; }
.srch-trend .chip { cursor: pointer; }
.srch-side, .srch-rail { display: none; }   /* mobile: sidebars off */

.srch-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.srch-chips::-webkit-scrollbar { display: none; }
.srch-chips .chip { flex-shrink: 0; cursor: pointer; }

.srch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.srch-count { font-size: 13px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.srch-head select {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 11px;
}
.srch-grid { padding-left: 0; padding-right: 0; }

/* result card */
.scard { position: relative; }
.scard-fav {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-xs);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.scard-fav:hover { color: var(--error); }
.scard-fav.on { color: var(--error); }
.scard-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.scard-price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15.5px;
  font-variant-numeric: lining-nums tabular-nums;
}
.scard-price small { font-weight: 600; font-size: 11.5px; color: var(--text-secondary); }
.scard-cta {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-full);
  padding: 5px 12px;
}

.srch-empty { grid-column: 1/-1; text-align: center; padding: 26px 8px; }
.srch-empty-t { font-family: var(--font-head); font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.srch-empty-cats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.srch-empty-cats .chip { cursor: pointer; }

/* sidebar + rail cards */
.srch-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 15px;
  margin-bottom: 15px;
}
.srch-card-title { font-family: var(--font-head); font-size: 14.5px; font-weight: 800; margin-bottom: 10px; }
.srch-cats { display: flex; flex-direction: column; max-height: 330px; overflow-y: auto; }
.srch-cat {
  /* icon + label on one line — .cat-svg is display:block, so without flex the
     glyph pushes the name onto the next row */
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.srch-cat:hover { background: var(--surface-hover); }
.srch-cat .cat-svg { color: var(--text-secondary); }
.srch-cat.on .cat-svg { color: var(--accent); }
.srch-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-cat.on { background: var(--accent-light); color: var(--accent); font-weight: 700; }
.srch-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 10px 0 5px; }
.srch-side select, .srch-row input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg);
}
.srch-row { display: flex; gap: 8px; margin-bottom: 8px; }
.srch-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 7px 0; cursor: pointer; }
.srch-apply { border-radius: var(--radius-full); margin-top: 10px; }
.srch-clear, .srch-near {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.srch-clear:hover, .srch-near:hover { border-color: var(--accent); color: var(--accent); }

.srch-recent { display: flex; flex-direction: column; gap: 10px; }
.srch-rec { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--text); }
.srch-rec-ph {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-secondary);
  display: grid;
  place-items: center;
}
.srch-rec-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.srch-rec-t { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-rec-p { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.srch-railcats { display: flex; flex-wrap: wrap; gap: 6px; }
.srch-railcat {
  font-size: 12.5px;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 5px 11px;
}
.srch-railcat:hover { border-color: var(--accent); color: var(--accent); }
.srch-railall { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.srch-trustlist { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.srch-trustlist b { color: var(--text); }

@media (min-width: 1024px) {
  .container.screen-wide { max-width: 1320px; padding-left: 24px; padding-right: 24px; }
  .srch-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 280px;
    gap: 22px;
    align-items: start;
  }
  .srch-side, .srch-rail { display: block; position: sticky; top: 130px; }
  .srch-chips { display: none; }       /* sidebar list replaces the chip row */
  .srch-head select { display: none; } /* sidebar sort replaces it */
  .srch-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1440px) {
  .srch-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ TIME-LIMITED OFFERS ═══
   Countdown reflects a real owner-set end time (listings.offer_ends_at); the same
   % is applied to rent in bookings.service.js, so the struck price is honest. */
.badge-offer {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;                 /* same stacking fix as .badge-featured */
  background: var(--error);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}
/* if a card is both featured and on offer, stack them */
.badge-featured + .badge-offer { top: 34px; }

.price-was {
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 4px;
  text-decoration: line-through;
}
.price-chip.has-offer { display: inline-flex; align-items: baseline; gap: 2px; }
.price-chip.has-offer .price-was { font-size: .85em; }

.offer-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #FFF4F4;
  border: 1px solid #F6C6C6;
}
.offer-box-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.offer-tag {
  background: var(--error);
  color: #fff;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.offer-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.offer-count { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.offer-clock {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 14px;
  color: var(--error);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ═══════════════════════════════════════════
   LISTING CARD v2 (.pcard) — "Featured near you" only, pending approval.
   Kept alongside the original .lcard so the two can be compared side by side.
   ═══════════════════════════════════════════ */
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard:hover {
  transform: translateY(-3px);
  border-color: var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pcard-media {
  position: relative;
  aspect-ratio: 4 / 3;      /* objects read better than a hard square */
  background: var(--bg-secondary);
  overflow: hidden;
}
.pcard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.pcard:hover .pcard-img { transform: scale(1.045); }
.pcard-noimg {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transform: none !important;
}

.pcard-badges {
  position: absolute;
  top: 8px; left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 2;
}
.pcard-badge {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}
.pcard-badge.is-feat  { background: rgba(248,203,0,.95); color: #1A1A1A; }
.pcard-badge.is-offer { background: rgba(229,57,53,.95); color: #fff; }

.pcard-fav {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.92);
  color: var(--text-secondary);
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
  cursor: pointer;
  transition: color .15s, transform .15s;
}
.pcard-fav:hover { color: var(--error); transform: scale(1.08); }
.pcard-fav.on { color: var(--error); }
.pcard-fav.on svg { fill: currentColor; }

.pcard-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px 12px;
  flex: 1;
}
.pcard-title {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.64em;        /* keeps price rows aligned across a row of cards */
}
.pcard-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  min-width: 0;
}
.pcard-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-loc svg { flex-shrink: 0; }

.pcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.pcard-price {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.pcard-price small { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.pcard-was { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.pcard-cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent-border);
  background: var(--accent-light);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  transition: background .15s, color .15s;
}
.pcard:hover .pcard-cta { background: var(--accent); color: #fff; border-color: var(--accent); }

/* mobile rail sizing */
.card-rail .pcard { flex: 0 0 auto; width: 200px; }
@media (min-width: 1024px) {
  .pcard-title { font-size: 14.5px; }
  .pcard-price { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard-img, .pcard-cta, .pcard-fav { transition: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard-img { transform: none; }
}

/* live countdown inside a card's offer badge */
.pcard-clock {
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 800;
  margin-left: 3px;
  opacity: .95;
}

/* ═══ SCROLL MASCOT ═══
   Injected by js/scroll-mascot.js. CSS 3D (perspective + rotateX/Y) rather than
   a WebGL engine — same sense of depth, none of the payload. Doubles as
   back-to-top so it is not purely decorative. */
.mascot {
  position: fixed;
  right: 14px;
  bottom: calc(102px + env(safe-area-inset-bottom, 0px)); /* clears the 90px bottomnav */
  z-index: 90;                                            /* under sheets (200) + toast */
  width: 74px;
  height: 60px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  perspective: 260px;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.mascot.on { opacity: 1; transform: none; pointer-events: auto; }
.mascot:hover { transform: translateY(-3px); }
.mascot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }

.mascot-3d {
  display: block;
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  will-change: transform;
}
.mascot svg { display: block; overflow: visible; }

.mascot .m-body  { fill: var(--accent); stroke: #14312a; stroke-width: 2.4; stroke-linejoin: round; }
.mascot .m-rider { fill: #F8CB00; stroke: #14312a; stroke-width: 2.4; stroke-linejoin: round; }
.mascot .m-head  { fill: #14312a; }
.mascot .m-bar   { stroke: #14312a; stroke-width: 3; stroke-linecap: round; fill: none; }
.mascot .m-wheel { transform-origin: center; transform-box: fill-box; }
.mascot .m-wheel circle { fill: #fff; stroke: #14312a; stroke-width: 3; }
.mascot .m-wheel path { stroke: #14312a; stroke-width: 2.2; stroke-linecap: round; }

/* ground shadow squashes while moving — sells the weight */
.mascot-shadow {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -3px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  filter: blur(2px);
  transition: transform .18s ease-out, opacity .18s;
}
.mascot.moving .mascot-shadow { transform: scaleX(.86); opacity: .75; }

@media (min-width: 1024px) {
  .mascot { right: 22px; bottom: 22px; width: 86px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) { .mascot { display: none; } }

/* ═══ SKELETON LOADER ═══
   First page view of a session only (gated server-side in app.js). Vertical
   category slider on the right, mirroring vixitai.com/tools. */
.skel-lock { overflow: hidden; }
.skel {
  position: fixed;
  inset: 0;
  z-index: 9000;              /* above everything, below nothing that matters */
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 24px;
  transition: opacity .45s ease, transform .45s ease;
}
.skel-out { opacity: 0; transform: scale(1.015); pointer-events: none; }

.skel-inner {
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.skel-brand {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 18px;
}
.skel-brand b { color: var(--accent); }

.skel-head { display: flex; flex-direction: column; gap: 2px; }
.skel-hl {
  font-family: var(--font-head);
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(10px);
  animation: skelUp .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.skel-hl-2 { color: var(--accent); animation-delay: .12s; }
.skel-sub {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--text-secondary);
  opacity: 0;
  animation: skelUp .55s .24s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes skelUp { to { opacity: 1; transform: none; } }

.skel-bar {
  margin-top: 22px;
  height: 4px;
  width: min(320px, 100%);
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.skel-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--accent);
  transition: width .2s linear;
}
.skel-words { position: relative; height: 18px; margin-top: 12px; }
.skel-word {
  position: absolute;
  left: 0;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity .3s ease;
}
.skel-word.on { opacity: 1; }

/* right: the vertical slider */
.skel-right { display: none; }
.skel-mask {
  height: 340px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.skel-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: skelScroll 18s linear infinite;
}
@keyframes skelScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.skel-slide {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.skel-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(110deg, var(--bg-secondary) 0 35%, var(--border) 50%, var(--bg-secondary) 65% 100%);
  background-size: 300% 100%;
  animation: skelShimmer 1.8s ease-in-out infinite;
}
.skel-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.skel-t { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; }
.skel-d { font-size: 12px; color: var(--text-secondary); }
@keyframes skelShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (min-width: 900px) {
  .skel-inner { grid-template-columns: 1.05fr .95fr; gap: 48px; }
  .skel-right { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .skel-hl, .skel-sub { animation: none; opacity: 1; transform: none; }
  .skel-track, .skel-ico { animation: none; }
}

/* ═══ Festival layer (admin: 🎉 Festival) ═══
   Theme colors arrive via the #fest-css block head.ejs injects from
   server/src/lib/festivals.js; these are the static bones. */
.fest-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fest-strip-bg, #2D1B4E);
  color: var(--fest-strip-fg, #FFE082);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 12px 0 4px;
  font-size: 13.5px;
  font-weight: 600;
}
.fest-strip .fs-emoji { font-size: 18px; line-height: 1; }
.fest-strip .fs-msg { flex: 1; min-width: 0; }
.fest-strip a { color: inherit; text-decoration: underline; font-weight: 700; white-space: nowrap; }
.fest-strip .fs-x { background: none; border: none; color: inherit; opacity: .65; font-size: 14px; cursor: pointer; padding: 2px 4px; }
/* below the header stack (topnav 101/catnav 100) and every overlay; above content */
.fest-canvas { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
/* desktop home variant sits above .desktop-main, mirroring its width/padding */
.fest-strip-desk { max-width: 1392px; margin: 16px auto -8px; width: calc(100% - 48px); }

/* NEW badge — real recency (<48h), green with a soft pulse dot */
.pcard-badge.is-new { background: rgba(27,94,32,.92); color: #fff; display: inline-flex; align-items: center; gap: 5px; }
.pnew-dot { width: 6px; height: 6px; border-radius: 50%; background: #69F0AE; animation: pnewPulse 1.6s ease-in-out infinite; }
@keyframes pnewPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(105,240,174,.55); }
  50%      { box-shadow: 0 0 0 4px rgba(105,240,174,0); }
}

/* Festival hero slide — gradient bg from the active preset, oversized emoji */
.fest-hero { display: flex; }
.fest-hero-emoji {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(72px, 14vw, 150px);
  opacity: .9;
  pointer-events: none;
}

/* Live ticker — real activity only (see partials/live-ticker.ejs) */
.live-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-size: 12.5px;
  overflow: hidden;
}
.lt-dot { width: 7px; height: 7px; border-radius: 50%; background: #2E7D32; flex-shrink: 0; animation: pnewPulse 1.6s ease-in-out infinite; }
.lt-label { font-family: var(--font-head); font-weight: 800; font-size: 10.5px; letter-spacing: .06em; color: #2E7D32; flex-shrink: 0; }
.lt-items { position: relative; flex: 1; min-width: 0; height: 18px; }
.lt-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .45s ease;
  color: var(--text-muted, #666);
}
.lt-item.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pnew-dot, .lt-dot { animation: none; }
}
}
/* countdown digits inside SPA .badge-offer (SSR cards use .pcard-clock) */
.badge-offer b { font-weight: 800; margin-left: 3px; font-variant-numeric: tabular-nums; }
/* ═══ CARD ENTRANCE (rails + SPA grids) ═══
   Rails are excluded from the .rv scroll-reveal (a card parked off the right
   edge never intersects the viewport and would stay invisible), so their
   entrance is armed on the CONTAINER: reveal.js adds .rail-in when the rail
   scrolls into view and every child plays a one-shot staggered slide — cards
   off to the right animate too, then simply sit revealed inside the scroller.
   SPA grids (.cards-in) need no JS at all: freshly inserted children animate
   on insertion, so every search re-render and load-more sweeps in. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cardInX { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes cardInY { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .rail-in > * { animation: cardInX .55s cubic-bezier(.16,1,.3,1) .42s backwards; }
  .cards-in > * { animation: cardInY .5s cubic-bezier(.16,1,.3,1) .42s backwards; }
  .rail-in > :nth-child(1), .cards-in > :nth-child(1) { animation-delay: 0s; }
  .rail-in > :nth-child(2), .cards-in > :nth-child(2) { animation-delay: .06s; }
  .rail-in > :nth-child(3), .cards-in > :nth-child(3) { animation-delay: .12s; }
  .rail-in > :nth-child(4), .cards-in > :nth-child(4) { animation-delay: .18s; }
  .rail-in > :nth-child(5), .cards-in > :nth-child(5) { animation-delay: .24s; }
  .rail-in > :nth-child(6), .cards-in > :nth-child(6) { animation-delay: .3s; }
  .rail-in > :nth-child(7), .cards-in > :nth-child(7) { animation-delay: .36s; }
}