/* ==========================================================================
   iDrugstore v4.0 — Premium Multi-Category Delivery Design System
   Nova identidade: laranja vibrante + preto premium. ZERO referência farmacêutica.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* Brand */
  --brand:        #FF5C00;
  --brand-dark:   #E04D00;
  --brand-darker: #C03E00;
  --brand-light:  #FFF0E6;
  --brand-xlight: #FFF7F2;
  --brand-glow:   rgba(255, 92, 0, .18);

  /* Ink */
  --ink:        #0A0A0F;
  --ink-800:    #1C1C27;
  --ink-600:    #374151;
  --ink-500:    #6B7280;
  --ink-400:    #9CA3AF;
  --ink-300:    #D1D5DB;
  --ink-200:    #E5E7EB;
  --ink-100:    #F3F4F6;
  --ink-50:     #F9FAFB;

  /* Surfaces */
  --surface:    #FFFFFF;
  --surface-2:  #FAFAFA;
  --surface-3:  #F4F5F7;

  /* Feedback */
  --success:  #10B981;
  --warning:  #F59E0B;
  --error:    #EF4444;
  --info:     #3B82F6;

  /* Typography */
  --font:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'SF Mono', 'Fira Code', monospace;

  /* Spacing scale */
  --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; --sp-20: 80px; --sp-24: 96px;

  /* Radius */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
  --shadow-brand: 0 8px 24px rgba(255,92,0,.30);

  /* Transitions */
  --t-fast:   .12s ease;
  --t:        .2s ease;
  --t-slow:   .35s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --nav-h:    68px;
  --max-w:    1200px;
  --sidebar-w: 256px;
}

/* ══════════════════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════════════════ */

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

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

body {
  font-family: var(--font) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font); }

/* ══════════════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════════════ */

.top-menu-wrapper {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: var(--nav-h) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--ink-200) !important;
  box-shadow: var(--shadow-xs) !important;
  z-index: 1000 !important;
}

.top-menu-wrapper .container {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
  gap: var(--sp-8) !important;
}

.top-menu-wrapper .col-a { flex-shrink: 0 !important; }
.top-menu-wrapper .col-b { flex: 1 !important; display: flex !important; justify-content: flex-end !important; }

/* Logo */
.top-menu-wrapper .logo {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Nav menu */
#menu {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-1) !important;
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
}
#menu li { display: flex !important; align-items: center !important; float: none !important; }
#menu li a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-600) !important;
  padding: 8px 14px !important;
  border-radius: var(--r-full) !important;
  transition: background var(--t), color var(--t) !important;
  white-space: nowrap !important;
}
#menu li a:hover { background: var(--ink-100) !important; color: var(--ink) !important; }
#menu li.active a { color: var(--brand) !important; background: var(--brand-light) !important; }
#menu li:last-child a {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  box-shadow: var(--shadow-brand) !important;
}
#menu li:last-child a:hover { background: var(--brand-dark) !important; }

/* Mobile hamburger */
.menu-nav-mobile {
  display: none !important;
  margin-left: auto !important;
}
.menu-nav-mobile a {
  width: 42px !important; height: 42px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 22px !important; color: var(--ink) !important;
  border-radius: var(--r-md) !important;
  background: var(--ink-100) !important;
}

/* Mobile menu overlay */
.menu-top-menu {
  display: none !important;
  position: fixed !important;
  top: var(--nav-h) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: var(--surface) !important;
  z-index: 9999 !important;
  padding: var(--sp-6) !important;
  overflow-y: auto !important;
}
.menu-top-menu[style*="display: block"], .menu-top-menu[style*="display:block"] { display: block !important; }
.menu-top-menu ul { list-style: none !important; }
.menu-top-menu ul li a {
  display: block !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  padding: var(--sp-4) 0 !important;
  border-bottom: 1px solid var(--ink-200) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════════ */

.parallax-container,
.parallax-container.parallax-home {
  min-height: 100vh !important;
  background: var(--ink) !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  padding-top: var(--nav-h) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Geometric background pattern */
.parallax-container::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(255,92,0,.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 10%, rgba(255,92,0,.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(255,92,0,.06) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

/* Hero content wrapper */
.parallax-search,
.search-wraps {
  width: 100% !important;
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--sp-8) !important;
}

/* Hero headline override */
.search-wraps h1,
.parallax-search h1,
.menu-header.search-wraps h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -2px !important;
  color: #fff !important;
  max-width: 700px !important;
  text-shadow: none !important;
  margin: 0 !important;
}

.search-wraps .search-text,
.parallax-search .search-text {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.65) !important;
  max-width: 560px !important;
  line-height: 1.7 !important;
}

/* Hero badge */
.id-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: var(--r-full) !important;
  letter-spacing: .3px !important;
}
.id-hero-badge span {
  display: inline-block !important;
  width: 8px !important; height: 8px !important;
  background: #4ADE80 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #4ADE80 !important;
  animation: pulse-dot 2s infinite !important;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}

/* Hero CTAs */
.id-hero-ctas {
  display: flex !important;
  gap: var(--sp-3) !important;
  flex-wrap: wrap !important;
}
.id-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: var(--r-full) !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--t-slow) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.id-btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: var(--shadow-brand) !important;
}
.id-btn-primary:hover {
  background: var(--brand-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(255,92,0,.4) !important;
  color: #fff !important;
}
.id-btn-ghost {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  backdrop-filter: blur(8px) !important;
}
.id-btn-ghost:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.id-btn-outline {
  background: transparent !important;
  color: var(--brand) !important;
  border: 2px solid var(--brand) !important;
}
.id-btn-outline:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

/* ── Hide legacy search tab widgets ── */
ul.search-menu,
.mobile-search-menu,
.border.mobile-search-menu,
h1.home-search-text,
p.home-search-subtext { display: none !important; }

/* ── Search wrapper (advance-search) ── */
.search-wraps,
.search-wraps.advance-search {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;  /* override framework's flex-start so forms fill full width */
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
}

/* Forms inside advance-search must be full width */
.search-wraps.advance-search > form,
.advance-search > .forms-search {
  width: 100% !important;
}

/* Search pill — direct flex container so Bootstrap cols don't escape */
.search-input-wraps,
.search-input-wraps.rounded30 {
  width: 100% !important;
  max-width: 600px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border-radius: var(--r-full) !important;
  padding: 6px 6px 6px 22px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.12) !important;
  overflow: hidden !important;
  float: none !important;
  gap: 0 !important;
}

/* Make .row a layout-transparent pass-through so its children
   become direct flex items of the pill — eliminates Bootstrap
   percentage-width and negative-margin interference entirely */
.search-input-wraps .row {
  display: contents !important;
}
.search-input-wraps .row::before,
.search-input-wraps .row::after { display: none !important; }

/* Columns as flex children of pill */
.search-input-wraps .col-sm-11,
.search-input-wraps .col-xs-10,
.search-input-wraps [class*="col-sm-1"]:not([class*="col-sm-1"]):first-child {
  flex: 1 1 auto !important;
  float: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  position: static !important;
}
.search-input-wraps .col-sm-1,
.search-input-wraps .col-xs-2 {
  flex: 0 0 auto !important;
  float: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
}

.search-input-wraps input[type="text"],
.search-input-wraps input[type="search"] {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  font-family: var(--font) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.search-input-wraps input::placeholder { color: var(--ink-400) !important; font-size: 14px !important; }

.search-input-wraps button,
.search-input-wraps [type="submit"] {
  position: static !important;  /* override framework's position:absolute;right:10px */
  flex-shrink: 0 !important;
  width: 48px !important; height: 48px !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 18px !important;
  transition: var(--t) !important;
  box-shadow: 0 4px 12px rgba(255,92,0,.4) !important;
  cursor: pointer !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}
.search-input-wraps button:hover,
.search-input-wraps [type="submit"]:hover {
  background: var(--brand-dark) !important;
  transform: scale(1.06) !important;
}

/* Multiple search forms (by-address, by-name, etc) — hide non-active */
.forms-search { margin: 0 !important; padding: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════════════════════════════════ */

.id-trust-bar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--ink-200) !important;
  padding: 14px 0 !important;
  overflow: hidden !important;
}
.id-trust-bar .container {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
}
.id-trust-bar .trust-items {
  display: flex !important;
  gap: var(--sp-8) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.id-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-600) !important;
  letter-spacing: .1px !important;
}
.id-trust-item i { color: var(--brand) !important; font-size: 16px !important; }

/* ══════════════════════════════════════════════════════════════════════
   SECTION SHELL
══════════════════════════════════════════════════════════════════════ */

section,
.id-section {
  padding: var(--sp-20) 0 !important;
}

.id-container {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
}

/* Override Bootstrap container */
.sections .container,
section .container {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
}

.id-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--brand) !important;
  margin-bottom: var(--sp-3) !important;
}

.id-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--ink) !important;
  line-height: 1.15 !important;
  margin-bottom: var(--sp-4) !important;
}
.id-title em {
  font-style: normal !important;
  color: var(--brand) !important;
}

.id-subtitle {
  font-size: 1.05rem !important;
  color: var(--ink-500) !important;
  line-height: 1.7 !important;
  max-width: 580px !important;
  margin-bottom: var(--sp-10) !important;
}

/* Override old framework h2 */
.sections h2,
section h2,
.sections h2:first-child {
  font-family: var(--font) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--ink) !important;
  line-height: 1.15 !important;
  margin-bottom: var(--sp-3) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}
.sections h2 .badge,
.sections h3.badge-style,
.sections .steps h3 {
  display: inline-block !important;
  background: var(--brand-light) !important;
  color: var(--brand) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: var(--r-full) !important;
  margin-bottom: var(--sp-3) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CATEGORIES
══════════════════════════════════════════════════════════════════════ */

.id-pharma-cats,
.id-categories {
  background: var(--surface) !important;
  padding: var(--sp-16) 0 !important;
}

.cats-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: var(--sp-4) !important;
}

@media (max-width: 1024px) { .cats-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 600px)  { .cats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: var(--sp-3) !important; } }

.cat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  padding: var(--sp-4) var(--sp-2) !important;
  border-radius: var(--r-lg) !important;
  text-decoration: none !important;
  transition: var(--t-slow) !important;
  cursor: pointer !important;
  background: transparent !important;
}
.cat-item:hover {
  background: var(--ink-50) !important;
  transform: translateY(-4px) !important;
}
.cat-item:hover .cat-icon { transform: scale(1.08) !important; box-shadow: var(--shadow-lg) !important; }

.cat-icon {
  width: 72px !important; height: 72px !important;
  border-radius: var(--r-xl) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: var(--t-slow) !important;
  box-shadow: var(--shadow-sm) !important;
}
.cat-icon svg { width: 32px !important; height: 32px !important; }

.cat-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-600) !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════════════════════════════ */

.section-how-it-works,
.id-how {
  background: var(--surface-3) !important;
  padding: var(--sp-20) 0 !important;
}

.id-how-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--sp-6) !important;
}
@media (max-width: 768px) { .id-how-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .id-how-grid { grid-template-columns: 1fr !important; } }

.id-how-card {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-8) var(--sp-6) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--ink-200) !important;
  position: relative !important;
  transition: var(--t-slow) !important;
}
.id-how-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
  border-color: var(--brand-light) !important;
}

.id-how-num {
  font-size: 56px !important;
  font-weight: 900 !important;
  color: var(--brand-light) !important;
  line-height: 1 !important;
  letter-spacing: -3px !important;
  margin-bottom: var(--sp-4) !important;
}

.id-how-icon {
  width: 52px !important; height: 52px !important;
  background: var(--brand-light) !important;
  border-radius: var(--r-lg) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: var(--sp-4) !important;
}
.id-how-icon svg { width: 26px !important; height: 26px !important; }

.id-how-card h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: var(--sp-2) !important;
  letter-spacing: -.3px !important;
}
.id-how-card p {
  font-size: 14px !important;
  color: var(--ink-500) !important;
  line-height: 1.6 !important;
}

/* Override old how-it-works */
.section-how-it-works .row { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   FEATURED MERCHANTS
══════════════════════════════════════════════════════════════════════ */

.section-feature-resto {
  background: var(--surface) !important;
  padding: var(--sp-20) 0 !important;
}
.section-feature-resto .container { max-width: var(--max-w) !important; }
.section-feature-resto p.center { color: var(--ink-500) !important; font-size: 16px !important; margin-bottom: var(--sp-8) !important; }

.section-feature-resto .col-md-5.border-light {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--sp-6) !important;
  margin-bottom: var(--sp-4) !important;
  transition: var(--t-slow) !important;
}
.section-feature-resto .col-md-5.border-light:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--brand-light) !important;
  transform: translateY(-2px) !important;
}

.section-feature-resto .logo-small {
  width: 80px !important; height: 80px !important;
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
  border: 1px solid var(--ink-200) !important;
}

.section-feature-resto h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: var(--sp-2) 0 4px !important;
  letter-spacing: -.3px !important;
}

/* Open tag */
.merchantopentag .open-tag,
.open-merchant,
[class*="open-tag"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--success) !important;
  background: #ECFDF5 !important;
  border-radius: var(--r-full) !important;
  padding: 3px 8px !important;
}
.close-merchant,
[class*="closed-tag"] {
  color: var(--ink-400) !important;
  background: var(--ink-100) !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--r-full) !important;
  padding: 3px 8px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CUISINE / CATEGORIES FROM DB
══════════════════════════════════════════════════════════════════════ */

.section-cuisine {
  background: var(--surface-3) !important;
  padding: var(--sp-20) 0 !important;
}
.section-cuisine .container { max-width: var(--max-w) !important; }
.section-cuisine h2 { margin-bottom: var(--sp-2) !important; }
.section-cuisine .sub-text { color: var(--ink-500) !important; margin-bottom: var(--sp-8) !important; }

.section-cuisine .img-cuisine {
  width: 100% !important;
  border-radius: var(--r-xl) !important;
  object-fit: cover !important;
  height: 280px !important;
}

.section-cuisine a.even,
.section-cuisine a.odd {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-600) !important;
  border: 1px solid var(--ink-200) !important;
  background: var(--surface) !important;
  margin-bottom: var(--sp-2) !important;
  transition: var(--t) !important;
}
.section-cuisine a:hover {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
  border-color: var(--brand-light) !important;
}
.section-cuisine a span {
  margin-left: auto !important;
  font-size: 11px !important;
  color: var(--ink-400) !important;
  background: var(--ink-100) !important;
  padding: 2px 8px !important;
  border-radius: var(--r-full) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   APP SECTION
══════════════════════════════════════════════════════════════════════ */

#mobile-app-sections {
  background: var(--ink) !important;
  padding: var(--sp-20) 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
#mobile-app-sections::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(255,92,0,.12) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
#mobile-app-sections .container-medium { max-width: var(--max-w) !important; margin: 0 auto !important; padding: 0 var(--sp-6) !important; }
#mobile-app-sections .container-medium > .row {
  display: flex !important; align-items: center !important; gap: var(--sp-16) !important;
}
#mobile-app-sections .app-image-wrap { display: flex !important; justify-content: center !important; }
#mobile-app-sections .app-phone { max-height: 500px !important; width: auto !important; }

#mobile-app-sections h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -1.5px !important;
  line-height: 1.15 !important;
  margin-bottom: var(--sp-4) !important;
}
#mobile-app-sections h3 {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.7 !important;
  margin-bottom: var(--sp-8) !important;
}
#mobile-app-sections .get-app {
  height: 48px !important;
  width: auto !important;
  border-radius: var(--r-md) !important;
  transition: var(--t) !important;
  opacity: .9 !important;
}
#mobile-app-sections .get-app:hover { opacity: 1 !important; transform: scale(1.03) !important; }
#getapp-wrap { display: flex !important; gap: var(--sp-4) !important; flex-wrap: wrap !important; }

/* ══════════════════════════════════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════════════════════════════════ */

.main-preloader { background: var(--ink) !important; }
.main-preloader .ploader {
  border-top-color: rgba(255,255,255,.15) !important;
  border-left-color: var(--brand) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════════ */

.section-footer,
footer {
  background: var(--ink) !important;
  color: rgba(255,255,255,.7) !important;
  padding: var(--sp-16) 0 var(--sp-8) !important;
  font-family: var(--font) !important;
}
.section-footer .container { max-width: var(--max-w) !important; margin: 0 auto !important; padding: 0 var(--sp-6) !important; }
.section-footer a { color: rgba(255,255,255,.6) !important; font-size: 14px !important; transition: color var(--t) !important; }
.section-footer a:hover { color: #fff !important; }
.section-footer h4 { color: #fff !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: var(--sp-4) !important; }
.section-footer-info { font-size: 13px !important; color: rgba(255,255,255,.5) !important; }
.section-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  margin-top: var(--sp-10) !important;
  padding-top: var(--sp-6) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--sp-4) !important;
  font-size: 13px !important;
}
/* Social icons */
.section-social li { display: inline-flex !important; }
.section-social li a {
  width: 36px !important; height: 36px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: var(--r-md) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important; color: rgba(255,255,255,.7) !important;
  transition: var(--t) !important;
}
.section-social li a:hover { background: var(--brand) !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════════════════
   PWA BANNER
══════════════════════════════════════════════════════════════════════ */

#id-pwa-banner {
  position: fixed !important;
  bottom: var(--sp-6) !important; left: var(--sp-6) !important;
  display: none !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  background: var(--ink-800) !important;
  color: #fff !important;
  padding: var(--sp-4) var(--sp-5) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  z-index: 9999 !important;
  max-width: 360px !important;
  animation: slideUp .4s var(--t-slow) !important;
}
#id-pwa-banner.show { display: flex !important; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.pwa-icon { width: 44px !important; height: 44px !important; background: var(--brand) !important; border-radius: var(--r-md) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.pwa-text { flex: 1 !important; }
.pwa-title { font-weight: 700 !important; font-size: 14px !important; }
.pwa-subtitle { font-size: 12px !important; color: rgba(255,255,255,.6) !important; }
.pwa-install { background: var(--brand) !important; color: #fff !important; border: none !important; padding: 8px 16px !important; border-radius: var(--r-full) !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; }
.pwa-close { background: none !important; border: none !important; color: rgba(255,255,255,.5) !important; font-size: 20px !important; line-height: 1 !important; padding: 4px !important; }

/* ══════════════════════════════════════════════════════════════════════
   CART & MISC
══════════════════════════════════════════════════════════════════════ */

.cart-mobile-handle {
  position: fixed !important;
  bottom: var(--sp-6) !important; right: var(--sp-6) !important;
  z-index: 8000 !important;
}
.cart-mobile-handle a {
  width: 56px !important; height: 56px !important;
  background: var(--brand) !important;
  border-radius: var(--r-full) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 22px !important; color: #fff !important;
  box-shadow: var(--shadow-brand) !important;
}
.cart-mobile-handle .badge {
  position: absolute !important;
  top: -4px !important; right: -4px !important;
  background: var(--ink) !important; color: #fff !important;
  font-size: 10px !important; font-weight: 700 !important;
  min-width: 18px !important; height: 18px !important;
  border-radius: var(--r-full) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}

/* Orange button overrides */
a.orange-button, button.orange-button, input.orange-button,
a.green-button, button.green-button, input.green-button {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: var(--r-full) !important;
  border: none !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  transition: var(--t) !important;
}
a.orange-button:hover, button.orange-button:hover,
a.green-button:hover, button.green-button:hover {
  background: var(--brand-dark) !important;
  color: #fff !important;
}

/* Ratings */
.rating-stars { display: flex !important; gap: 2px !important; }

/* Body offset for fixed nav */
body { padding-top: var(--nav-h) !important; }

/* ══════════════════════════════════════════════════════════════════════
   ANIMATIONS & SCROLL
══════════════════════════════════════════════════════════════════════ */

.id-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.id-animate.visible {
  opacity: 1;
  transform: translateY(0);
}
.id-animate-d1 { transition-delay: .1s; }
.id-animate-d2 { transition-delay: .2s; }
.id-animate-d3 { transition-delay: .3s; }
.id-animate-d4 { transition-delay: .4s; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .top-menu-wrapper .col-b { display: none !important; }
  .menu-nav-mobile { display: flex !important; }
  body { padding-top: var(--nav-h) !important; }
}

@media (max-width: 768px) {
  .parallax-container { min-height: auto !important; padding: 80px 0 60px !important; }
  .search-wraps, .parallax-search { padding: var(--sp-6) !important; }
  #mobile-app-sections .container-medium > .row { flex-direction: column !important; }
  .section-cuisine .col-md-3 { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ══════════════════════════════════════════════════════════════════════
   HOMEPAGE — EXTRA SECTIONS (injetadas pelo store_index.php)
══════════════════════════════════════════════════════════════════════ */

/* Stats section */
.id-stats-section {
  background: var(--brand) !important;
  padding: var(--sp-16) 0 !important;
}
.id-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--sp-8) !important;
  text-align: center !important;
}
@media (max-width: 768px) { .id-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.id-stat-num {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
  display: block !important;
}
.id-stat-label {
  font-size: 14px !important;
  color: rgba(255,255,255,.75) !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
  display: block !important;
}

/* Testimonials */
.id-testimonials {
  background: var(--surface-3) !important;
  padding: var(--sp-20) 0 !important;
}
.id-testimonials-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--sp-6) !important;
}
@media (max-width: 768px) { .id-testimonials-grid { grid-template-columns: 1fr !important; } }
.id-testimonial-card {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-8) !important;
  border: 1px solid var(--ink-200) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--t-slow) !important;
}
.id-testimonial-card:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-4px) !important; }
.id-testimonial-stars { color: #F59E0B !important; font-size: 16px !important; margin-bottom: var(--sp-4) !important; letter-spacing: 2px !important; }
.id-testimonial-text { font-size: 15px !important; color: var(--ink-600) !important; line-height: 1.7 !important; margin-bottom: var(--sp-6) !important; font-style: italic !important; }
.id-testimonial-author { display: flex !important; align-items: center !important; gap: var(--sp-3) !important; }
.id-testimonial-avatar {
  width: 44px !important; height: 44px !important;
  border-radius: var(--r-full) !important;
  background: var(--brand-light) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 18px !important; font-weight: 800 !important; color: var(--brand) !important;
}
.id-testimonial-name { font-weight: 700 !important; font-size: 14px !important; color: var(--ink) !important; }
.id-testimonial-role { font-size: 12px !important; color: var(--ink-400) !important; }

/* For merchants CTA */
.id-merchant-cta {
  background: var(--ink-800) !important;
  padding: var(--sp-20) 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.id-merchant-cta::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important; right: -20% !important;
  width: 600px !important; height: 600px !important;
  background: radial-gradient(circle, rgba(255,92,0,.15) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.id-merchant-cta-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--sp-10) !important;
  flex-wrap: wrap !important;
}
.id-merchant-cta h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -1px !important;
  line-height: 1.2 !important;
  margin-bottom: var(--sp-3) !important;
}
.id-merchant-cta p { font-size: 16px !important; color: rgba(255,255,255,.6) !important; }
.id-merchant-cta-text { max-width: 560px !important; }

/* FAQ */
.id-faq {
  background: var(--surface) !important;
  padding: var(--sp-20) 0 !important;
}
.id-faq-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--sp-6) var(--sp-12) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) { .id-faq-grid { grid-template-columns: 1fr !important; } }
.id-faq-item { border-bottom: 1px solid var(--ink-200) !important; padding-bottom: var(--sp-6) !important; }
.id-faq-q {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: var(--sp-2) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--sp-3) !important;
}
.id-faq-q::before {
  content: '↗' !important;
  color: var(--brand) !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.id-faq-a { font-size: 14px !important; color: var(--ink-500) !important; line-height: 1.7 !important; padding-left: 28px !important; }

/* ══════════════════════════════════════════════════════════════════════
   v5.0 — NEWSLETTER, FOOTER, BROWSE, MENU, AUTH, PROFILE, CART
══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   NEWSLETTER SECTION
────────────────────────────────────────────────────── */
.section-subcribe {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
  padding: var(--sp-16) 0 !important;
  text-align: center !important;
}
.section-subcribe h2 {
  color: #fff !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  margin-bottom: var(--sp-6) !important;
  letter-spacing: -0.5px !important;
  font-family: var(--font) !important;
}
.subscribe-footer .row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  flex-wrap: wrap !important;
  float: none !important;
}
.subscribe-footer [class*="col-"] {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}
.subscribe-footer input.email {
  width: 300px !important;
  max-width: 100% !important;
  height: 52px !important;
  border-radius: var(--r-full) !important;
  border: none !important;
  padding: 0 var(--sp-6) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.12) !important;
  font-family: var(--font) !important;
}
.subscribe-footer button.green-button,
.subscribe-footer .green-button {
  height: 52px !important;
  padding: 0 var(--sp-8) !important;
  background: var(--ink) !important;
  color: #fff !important;
  border: 2px solid transparent !important;
  border-radius: var(--r-full) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: var(--t) !important;
  font-family: var(--font) !important;
  display: inline-flex !important;
  align-items: center !important;
}
.subscribe-footer button.green-button:hover {
  background: transparent !important;
  border-color: rgba(255,255,255,.6) !important;
  color: #fff !important;
}
.footer-divider { display: none !important; }

/* ──────────────────────────────────────────────────────
   FOOTER ENHANCEMENTS
────────────────────────────────────────────────────── */
.section-footer .row {
  display: flex !important;
  flex-wrap: wrap !important;
  float: none !important;
}
.section-footer [class*="col-"] {
  float: none !important;
  flex: 1 !important;
  min-width: 180px !important;
  padding: 0 var(--sp-4) !important;
  margin-bottom: var(--sp-8) !important;
}
.section-footer h3 {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: var(--sp-5) !important;
  font-family: var(--font) !important;
}
.section-footer li {
  list-style: none !important;
  margin-bottom: var(--sp-2) !important;
  padding: 0 !important;
}
.section-footer li a {
  color: rgba(255,255,255,.55) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  transition: color var(--t) !important;
  text-decoration: none !important;
}
.section-footer li a:hover { color: #fff !important; }
.mytable.social-wrap {
  display: flex !important;
  gap: var(--sp-2) !important;
  flex-wrap: wrap !important;
}
.social-wrap .mycol { display: inline-flex !important; }
.social-wrap .mycol a {
  width: 40px !important;
  height: 40px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: var(--r-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: rgba(255,255,255,.65) !important;
  transition: var(--t) !important;
}
.social-wrap .mycol a:hover { background: var(--brand) !important; color: #fff !important; }
.section-footer .language-options {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.65) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  margin-top: var(--sp-3) !important;
  max-width: 100% !important;
}
.id-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  margin-top: var(--sp-4) !important;
  padding-top: var(--sp-6) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--sp-4) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.35) !important;
}

/* ──────────────────────────────────────────────────────
   BROWSE / LISTING PAGE
────────────────────────────────────────────────────── */
.section-browse {
  background: var(--surface-3) !important;
  min-height: calc(100vh - var(--nav-h)) !important;
  padding-bottom: var(--sp-16) !important;
}
.section-browse > .container {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: var(--sp-8) var(--sp-6) !important;
}
.section-browse h1,
.section-browse .browse-title {
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -0.5px !important;
  margin-bottom: var(--sp-6) !important;
}

/* Tabs wrapper */
.tabs-wrapper {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--sp-6) !important;
  margin-bottom: var(--sp-6) !important;
}

/* UIKit tabs — browse override */
.section-browse .uk-tab,
.tabs-wrapper .uk-tab {
  border-bottom: 2px solid var(--ink-200) !important;
  margin-bottom: var(--sp-6) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  gap: 0 !important;
}
.section-browse .uk-tab > li > a,
.tabs-wrapper .uk-tab > li > a {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-500) !important;
  padding: var(--sp-3) var(--sp-5) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: var(--t) !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  display: block !important;
}
.section-browse .uk-tab > li.uk-active > a,
.section-browse .uk-tab > li > a:hover,
.tabs-wrapper .uk-tab > li.uk-active > a,
.tabs-wrapper .uk-tab > li > a:hover {
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
  background: transparent !important;
}

/* Browse restaurant grid */
.section-browse .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -10px !important;
}
.section-browse .col-md-3,
.section-browse .col-md-4 {
  width: 25% !important;
  padding: 0 10px !important;
  margin-bottom: var(--sp-5) !important;
  float: none !important;
}
@media (max-width: 1024px) {
  .section-browse .col-md-3,
  .section-browse .col-md-4 { width: 33.333% !important; }
}
@media (max-width: 768px) {
  .section-browse .col-md-3,
  .section-browse .col-md-4 { width: 50% !important; }
}
@media (max-width: 480px) {
  .section-browse .col-md-3,
  .section-browse .col-md-4 { width: 100% !important; }
}

/* Browse merchant card */
.section-browse .col-md-3 > .border-light,
.section-browse .col-md-4 > .border-light,
.section-browse .border-light {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: var(--t-slow) !important;
  display: flex !important;
  gap: var(--sp-4) !important;
  padding: var(--sp-4) !important;
  align-items: flex-start !important;
}
.section-browse .border-light:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
  border-color: var(--brand-light) !important;
}
.section-browse .logo-small {
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
  border: 1px solid var(--ink-100) !important;
  flex-shrink: 0 !important;
}

/* Empty state when no merchants */
.section-browse .empty-state,
.section-browse p.center {
  text-align: center !important;
  padding: var(--sp-20) var(--sp-6) !important;
  color: var(--ink-400) !important;
  font-size: 15px !important;
}

/* ──────────────────────────────────────────────────────
   STORE / RESTAURANT MENU PAGE
────────────────────────────────────────────────────── */

/* Restaurant cover bar */
.restaurant-outer-wrap,
.restaurant-header-wrap,
.menu-restaurant-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--ink-200) !important;
}
.restaurant-header,
.restaurant-info-bar {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: var(--sp-6) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-5) !important;
}
.restaurant-header img,
.restaurant-header .logo-large {
  width: 88px !important;
  height: 88px !important;
  border-radius: var(--r-xl) !important;
  object-fit: cover !important;
  border: 2px solid var(--ink-100) !important;
  flex-shrink: 0 !important;
}
.restaurant-header h1,
.restaurant-header .restaurant-name {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -0.5px !important;
  margin-bottom: var(--sp-1) !important;
  font-family: var(--font) !important;
}
.restaurant-header .restaurant-meta {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-4) !important;
  flex-wrap: wrap !important;
  margin-top: var(--sp-2) !important;
}
.restaurant-header .meta-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  color: var(--ink-600) !important;
  font-weight: 500 !important;
}

/* Category sticky nav */
.restaurant-categories-bar,
.menu-categories-bar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--ink-200) !important;
  position: sticky !important;
  top: var(--nav-h) !important;
  z-index: 90 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
.restaurant-categories-bar .container,
.menu-categories-bar .container {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--sp-6) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.restaurant-categories-bar .container::-webkit-scrollbar { display: none !important; }
.menu-cat-link {
  padding: var(--sp-4) var(--sp-5) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-500) !important;
  white-space: nowrap !important;
  border-bottom: 3px solid transparent !important;
  transition: var(--t) !important;
  text-decoration: none !important;
  display: block !important;
}
.menu-cat-link:hover,
.menu-cat-link.active {
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
}

/* Main menu layout */
.menu-page-wrap,
.menu-main-wrap {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: var(--sp-8) var(--sp-6) !important;
  display: flex !important;
  gap: var(--sp-8) !important;
  align-items: flex-start !important;
}
.menu-content-area {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Category section titles */
.menu-section-title,
.food-category-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -0.3px !important;
  margin: var(--sp-8) 0 var(--sp-5) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
}
.menu-section-title::before {
  content: '' !important;
  width: 4px !important;
  height: 24px !important;
  background: var(--brand) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* Food item card */
.food-item,
.menu-item,
.product-card {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-4) !important;
  padding: var(--sp-4) !important;
  margin-bottom: var(--sp-3) !important;
  transition: var(--t-slow) !important;
  cursor: pointer !important;
}
.food-item:hover,
.menu-item:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--brand-light) !important;
  transform: translateX(2px) !important;
}
.food-item-img {
  width: 88px !important;
  height: 88px !important;
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: var(--surface-3) !important;
}
.food-item-info { flex: 1 !important; min-width: 0 !important; }
.food-item-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: var(--sp-1) !important;
  font-family: var(--font) !important;
}
.food-item-desc {
  font-size: 13px !important;
  color: var(--ink-500) !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: var(--sp-3) !important;
}
.food-item-price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
}
.food-item-add {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--r-full) !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: var(--t) !important;
  font-weight: 300 !important;
}
.food-item-add:hover { background: var(--brand-dark) !important; transform: scale(1.08) !important; }

/* Cart sidebar */
.cart-wrap,
#order-cart,
.order-cart-wrap {
  width: 336px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: calc(var(--nav-h) + var(--sp-6)) !important;
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
  max-height: calc(100vh - var(--nav-h) - var(--sp-8)) !important;
  display: flex !important;
  flex-direction: column !important;
}
.cart-header-bar {
  background: var(--brand) !important;
  color: #fff !important;
  padding: var(--sp-4) var(--sp-5) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
}
.cart-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: var(--sp-4) !important;
}
.cart-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--sp-3) 0 !important;
  border-bottom: 1px solid var(--ink-100) !important;
  gap: var(--sp-3) !important;
  font-size: 14px !important;
}
.cart-row:last-child { border-bottom: none !important; }
.cart-item-label { flex: 1 !important; color: var(--ink) !important; font-weight: 500 !important; }
.cart-item-count {
  color: var(--ink-400) !important;
  min-width: 28px !important;
  text-align: center !important;
  font-size: 13px !important;
}
.cart-item-subtotal { font-weight: 700 !important; color: var(--ink) !important; white-space: nowrap !important; }
.cart-footer-bar {
  border-top: 2px solid var(--ink-100) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  flex-shrink: 0 !important;
}
.cart-total-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: var(--sp-4) !important;
}
.cart-place-order {
  width: 100% !important;
  padding: var(--sp-4) !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--t) !important;
  font-family: var(--font) !important;
  text-align: center !important;
  display: block !important;
  text-decoration: none !important;
}
.cart-place-order:hover { background: var(--brand-dark) !important; color: #fff !important; }
.cart-empty-state {
  text-align: center !important;
  padding: var(--sp-10) var(--sp-6) !important;
  color: var(--ink-400) !important;
}
.cart-empty-icon {
  font-size: 48px !important;
  margin-bottom: var(--sp-3) !important;
  opacity: .4 !important;
}
.cart-empty-text { font-size: 14px !important; font-weight: 500 !important; }

/* ──────────────────────────────────────────────────────
   PUBLIC LOGIN / REGISTER
────────────────────────────────────────────────────── */
.id-auth-page {
  min-height: calc(100vh - var(--nav-h)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--sp-10) var(--sp-6) !important;
  background: var(--surface-3) !important;
}
.id-auth-card {
  background: var(--surface) !important;
  border-radius: var(--r-2xl) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: var(--sp-10) !important;
  width: 100% !important;
  max-width: 440px !important;
}
.id-auth-logo {
  text-align: center !important;
  margin-bottom: var(--sp-8) !important;
}
.id-auth-logo img { height: 40px !important; margin: 0 auto !important; }
.id-auth-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  text-align: center !important;
  margin-bottom: var(--sp-2) !important;
  letter-spacing: -0.5px !important;
  font-family: var(--font) !important;
}
.id-auth-sub {
  text-align: center !important;
  color: var(--ink-500) !important;
  font-size: 14px !important;
  margin-bottom: var(--sp-8) !important;
}
.id-form-group { margin-bottom: var(--sp-5) !important; }
.id-form-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-600) !important;
  margin-bottom: var(--sp-2) !important;
}
.id-form-input,
.id-auth-card input[type="text"],
.id-auth-card input[type="email"],
.id-auth-card input[type="password"],
.id-auth-card input[type="tel"] {
  width: 100% !important;
  height: 52px !important;
  border: 1.5px solid var(--ink-200) !important;
  border-radius: var(--r-lg) !important;
  padding: 0 var(--sp-4) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  transition: border-color var(--t) !important;
  font-family: var(--font) !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.id-form-input:focus,
.id-auth-card input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-xlight) !important;
}
.id-auth-submit {
  width: 100% !important;
  height: 52px !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--t) !important;
  font-family: var(--font) !important;
  margin-top: var(--sp-2) !important;
}
.id-auth-submit:hover { background: var(--brand-dark) !important; }
.id-auth-divider {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-4) !important;
  color: var(--ink-400) !important;
  font-size: 13px !important;
  margin: var(--sp-6) 0 !important;
}
.id-auth-divider::before, .id-auth-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--ink-200) !important;
}
.id-auth-switch {
  text-align: center !important;
  margin-top: var(--sp-6) !important;
  font-size: 14px !important;
  color: var(--ink-500) !important;
}
.id-auth-switch a { color: var(--brand) !important; font-weight: 600 !important; }
.id-auth-switch a:hover { color: var(--brand-dark) !important; }

/* ──────────────────────────────────────────────────────
   USER PROFILE / ACCOUNT PAGES
────────────────────────────────────────────────────── */
.id-profile-wrap {
  max-width: var(--max-w) !important;
  margin: var(--sp-8) auto !important;
  padding: 0 var(--sp-6) !important;
  display: flex !important;
  gap: var(--sp-8) !important;
  align-items: flex-start !important;
}
.id-profile-sidebar {
  width: 260px !important;
  flex-shrink: 0 !important;
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  overflow: hidden !important;
  position: sticky !important;
  top: calc(var(--nav-h) + var(--sp-6)) !important;
}
.id-profile-avatar-block {
  padding: var(--sp-8) var(--sp-6) !important;
  text-align: center !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
}
.id-profile-initials {
  width: 72px !important;
  height: 72px !important;
  border-radius: var(--r-full) !important;
  background: rgba(255,255,255,.2) !important;
  margin: 0 auto var(--sp-3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.id-profile-display-name {
  font-weight: 700 !important;
  color: #fff !important;
  font-size: 16px !important;
  margin-bottom: 4px !important;
}
.id-profile-display-email { color: rgba(255,255,255,.7) !important; font-size: 13px !important; }
.id-profile-nav-list { padding: var(--sp-3) 0 !important; }
.id-profile-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  padding: var(--sp-3) var(--sp-5) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-600) !important;
  transition: var(--t) !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
}
.id-profile-nav-item:hover,
.id-profile-nav-item.active {
  color: var(--brand) !important;
  background: var(--brand-xlight) !important;
  border-left-color: var(--brand) !important;
}
.id-profile-main { flex: 1 !important; min-width: 0 !important; }
.id-profile-card {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  padding: var(--sp-8) !important;
  margin-bottom: var(--sp-5) !important;
}
.id-profile-card-header {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: var(--sp-6) !important;
  padding-bottom: var(--sp-4) !important;
  border-bottom: 1px solid var(--ink-100) !important;
  font-family: var(--font) !important;
}

/* Order cards */
.id-order-item {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  padding: var(--sp-5) !important;
  margin-bottom: var(--sp-4) !important;
  transition: var(--t-slow) !important;
}
.id-order-item:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--brand-light) !important;
}
.id-order-item-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: var(--sp-3) !important;
}
.id-order-store { font-weight: 700 !important; color: var(--ink) !important; font-size: 16px !important; }
.id-order-date { font-size: 12px !important; color: var(--ink-400) !important; }
.id-order-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: var(--r-full) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
.id-order-badge.done { background: #ECFDF5 !important; color: #059669 !important; }
.id-order-badge.pending { background: #FFF7ED !important; color: #EA580C !important; }
.id-order-badge.cancelled { background: var(--ink-100) !important; color: var(--ink-400) !important; }
.id-order-amount { font-size: 17px !important; font-weight: 800 !important; color: var(--ink) !important; }

/* ──────────────────────────────────────────────────────
   CHECKOUT PAGE
────────────────────────────────────────────────────── */
.checkout-wrap {
  max-width: var(--max-w) !important;
  margin: var(--sp-8) auto !important;
  padding: 0 var(--sp-6) !important;
  display: flex !important;
  gap: var(--sp-8) !important;
  align-items: flex-start !important;
}
.checkout-form-col {
  flex: 1 !important;
  min-width: 0 !important;
}
.checkout-card {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  padding: var(--sp-6) !important;
  margin-bottom: var(--sp-5) !important;
}
.checkout-step-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: var(--sp-5) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  font-family: var(--font) !important;
}
.checkout-step-num {
  width: 30px !important;
  height: 30px !important;
  border-radius: var(--r-full) !important;
  background: var(--brand) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}
.checkout-summary-col {
  width: 360px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: calc(var(--nav-h) + var(--sp-6)) !important;
}
.checkout-summary-card {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  padding: var(--sp-6) !important;
  box-shadow: var(--shadow-sm) !important;
}
.checkout-summary-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: var(--sp-5) !important;
  padding-bottom: var(--sp-4) !important;
  border-bottom: 1px solid var(--ink-100) !important;
}
.checkout-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--sp-2) 0 !important;
  font-size: 14px !important;
  color: var(--ink-600) !important;
}
.checkout-summary-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--sp-4) 0 var(--sp-2) !important;
  border-top: 2px solid var(--ink-200) !important;
  margin-top: var(--sp-3) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
.checkout-confirm-btn {
  width: 100% !important;
  padding: var(--sp-4) !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--t) !important;
  margin-top: var(--sp-5) !important;
  font-family: var(--font) !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
}
.checkout-confirm-btn:hover { background: var(--brand-dark) !important; color: #fff !important; transform: translateY(-1px) !important; }

/* Payment radio options */
.payment-option {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-4) !important;
  padding: var(--sp-4) !important;
  border: 1.5px solid var(--ink-200) !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: var(--sp-3) !important;
  cursor: pointer !important;
  transition: var(--t) !important;
}
.payment-option:hover,
.payment-option.selected { border-color: var(--brand) !important; background: var(--brand-xlight) !important; }
.payment-option input[type="radio"] { accent-color: var(--brand) !important; }

/* ──────────────────────────────────────────────────────
   PAGINATION, BREADCRUMBS, EMPTY STATES
────────────────────────────────────────────────────── */
.pagination, ul.pagination {
  display: flex !important;
  gap: var(--sp-2) !important;
  justify-content: center !important;
  margin: var(--sp-10) 0 !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  list-style: none !important;
}
.pagination li { list-style: none !important; }
.pagination li a,
.pagination li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 var(--sp-3) !important;
  border-radius: var(--r-lg) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-600) !important;
  background: var(--surface) !important;
  border: 1px solid var(--ink-200) !important;
  transition: var(--t) !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
}
.pagination li a:hover { border-color: var(--brand) !important; color: var(--brand) !important; }
.pagination li.active > a,
.pagination li.active > span,
.pagination li > a:active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.pagination li.disabled > a,
.pagination li.disabled > span { opacity: .4 !important; cursor: default !important; pointer-events: none !important; }

/* Breadcrumbs */
.id-breadcrumbs {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: var(--sp-4) var(--sp-6) var(--sp-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  font-size: 13px !important;
  color: var(--ink-400) !important;
  flex-wrap: wrap !important;
}
.id-breadcrumbs a { color: var(--ink-500) !important; text-decoration: none !important; transition: color var(--t) !important; }
.id-breadcrumbs a:hover { color: var(--brand) !important; }
.id-breadcrumbs-sep { color: var(--ink-300) !important; }
.id-breadcrumbs-current { color: var(--ink) !important; font-weight: 600 !important; }

/* Generic empty state */
.id-empty {
  text-align: center !important;
  padding: var(--sp-20) var(--sp-6) !important;
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
}
.id-empty-ico { font-size: 56px !important; margin-bottom: var(--sp-4) !important; opacity: .25 !important; }
.id-empty-h { font-size: 20px !important; font-weight: 700 !important; color: var(--ink) !important; margin-bottom: var(--sp-2) !important; }
.id-empty-p { font-size: 15px !important; color: var(--ink-500) !important; margin-bottom: var(--sp-6) !important; }

/* Delivery / rating meta badges */
.meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-500) !important;
  background: var(--ink-50) !important;
  padding: 3px 10px !important;
  border-radius: var(--r-full) !important;
}
.meta-pill.rating { color: #92400E !important; background: #FEF3C7 !important; }
.meta-pill.open { color: #065F46 !important; background: #D1FAE5 !important; }
.meta-pill.closed { color: var(--ink-400) !important; background: var(--ink-100) !important; }

/* ──────────────────────────────────────────────────────
   FORM FIELDS (public frontend generic)
────────────────────────────────────────────────────── */
.id-input,
.id-select {
  width: 100% !important;
  height: 48px !important;
  border: 1.5px solid var(--ink-200) !important;
  border-radius: var(--r-lg) !important;
  padding: 0 var(--sp-4) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  transition: border-color var(--t), box-shadow var(--t) !important;
  font-family: var(--font) !important;
  outline: none !important;
}
.id-input:focus,
.id-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-xlight) !important;
}
.id-textarea {
  width: 100% !important;
  min-height: 120px !important;
  border: 1.5px solid var(--ink-200) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  transition: border-color var(--t) !important;
  font-family: var(--font) !important;
  outline: none !important;
  resize: vertical !important;
}
.id-textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-xlight) !important; }

/* ──────────────────────────────────────────────────────
   ALERTS / TOAST NOTIFICATIONS
────────────────────────────────────────────────────── */
.id-alert {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--sp-3) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  border-radius: var(--r-lg) !important;
  font-size: 14px !important;
  margin-bottom: var(--sp-4) !important;
  border: 1px solid transparent !important;
}
.id-alert.success { background: #ECFDF5 !important; border-color: #A7F3D0 !important; color: #065F46 !important; }
.id-alert.error   { background: #FEF2F2 !important; border-color: #FECACA !important; color: #991B1B !important; }
.id-alert.warning { background: #FFFBEB !important; border-color: #FDE68A !important; color: #92400E !important; }
.id-alert.info    { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }

/* ──────────────────────────────────────────────────────
   MOBILE RESPONSIVE — v5.0
────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .menu-page-wrap,
  .menu-main-wrap { flex-direction: column !important; padding: var(--sp-4) !important; }
  .cart-wrap, #order-cart, .order-cart-wrap {
    width: 100% !important;
    position: static !important;
    max-height: none !important;
  }
  .id-profile-wrap { flex-direction: column !important; }
  .id-profile-sidebar { width: 100% !important; position: static !important; }
  .checkout-wrap { flex-direction: column !important; }
  .checkout-summary-col { width: 100% !important; position: static !important; }
  .id-auth-card { padding: var(--sp-6) !important; }
  .subscribe-footer .row { flex-direction: column !important; }
  .subscribe-footer input.email { width: 100% !important; }
}
@media (max-width: 480px) {
  .section-browse .col-md-3,
  .section-browse .col-md-4 { width: 100% !important; }
  .id-auth-card { padding: var(--sp-5) !important; }
  .checkout-card,
  .checkout-summary-card { padding: var(--sp-4) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   v5.1 — PAGE-SPECIFIC OVERRIDES, BROWSE HERO, TABS, EMPTY STATES
══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   BROWSE PAGE HERO — orange-branded overlay
────────────────────────────────────────────────────── */
body.top-browse #parallax-wrap::before {
  background: linear-gradient(135deg, rgba(255,92,0,.88) 0%, rgba(200,60,0,.94) 100%) !important;
}
body.top-browse .search-wraps {
  text-align: center !important;
  padding: var(--sp-10) !important;
}
body.top-browse .search-wraps h1 {
  font-family: var(--font) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  color: #fff !important;
  margin-bottom: var(--sp-3) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.2) !important;
}
body.top-browse .search-wraps p {
  font-size: 18px !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 400 !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  line-height: 1.5 !important;
}
body.top-browse #parallax-wrap {
  min-height: 280px !important;
}

/* ──────────────────────────────────────────────────────
   #tabs — BROWSE PAGE TABS (Karenderia uses ul#tabs)
────────────────────────────────────────────────────── */
#tabs {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--sp-6) !important;
  border-bottom: 2px solid var(--ink-200) !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  gap: 0 !important;
}
#tabs::-webkit-scrollbar { display: none !important; }
#tabs > li { list-style: none !important; flex-shrink: 0 !important; }
#tabs > li > a {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: var(--sp-3) var(--sp-5) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-500) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: var(--t) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
}
#tabs > li.active > a,
#tabs > li > a:hover {
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
  background: transparent !important;
}
#tabs > li.noclick { cursor: default !important; }
#tabs > li i { font-size: 16px !important; }

/* ──────────────────────────────────────────────────────
   EMPTY STATES — browse / cuisine pages
────────────────────────────────────────────────────── */
.section-browse .col-md-12 > p,
.section-browse > .container > p,
p.text-center.no-results,
.no-restaurants {
  text-align: center !important;
  padding: var(--sp-16) var(--sp-6) !important;
  color: var(--ink-400) !important;
  font-size: 16px !important;
  font-family: var(--font) !important;
}

/* ──────────────────────────────────────────────────────
   FEATURED MERCHANTS SECTION — flex card layout
────────────────────────────────────────────────────── */
.section-feature-resto .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -12px !important;
}
.section-feature-resto .col-md-5.border-light {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-4) !important;
  padding: var(--sp-5) !important;
  width: calc(50% - 24px) !important;
  margin: 0 12px var(--sp-4) !important;
  float: none !important;
}
.section-feature-resto .col-md-1 { display: none !important; }
.section-feature-resto .col-md-5.border-light .col-md-3,
.section-feature-resto .col-md-5.border-light .col-sm-3 {
  width: auto !important;
  float: none !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.section-feature-resto .col-md-5.border-light .col-md-9,
.section-feature-resto .col-md-5.border-light .col-sm-9 {
  flex: 1 !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.section-feature-resto .col-md-5.border-light .row {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  margin: 0 0 var(--sp-2) !important;
  flex-wrap: wrap !important;
}
.section-feature-resto .col-md-5.border-light .row [class*="col-"] {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}
.section-feature-resto h4.concat-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: var(--sp-1) 0 var(--sp-1) !important;
  letter-spacing: -0.3px !important;
  font-family: var(--font) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 768px) {
  .section-feature-resto .col-md-5.border-light {
    width: 100% !important;
    margin: 0 0 var(--sp-3) !important;
  }
}

/* ──────────────────────────────────────────────────────
   MOBILE BANNER — hide on desktop (already shown via parallax)
────────────────────────────────────────────────────── */
.mobile-banner-wrap { display: none !important; }
@media (max-width: 768px) { .mobile-banner-wrap { display: block !important; } }

/* ──────────────────────────────────────────────────────
   SECTION GREY2 — override Karenderia default bg
────────────────────────────────────────────────────── */
.section-grey2 { background: var(--surface-3) !important; }
.sections { padding: var(--sp-16) 0 !important; }

/* ──────────────────────────────────────────────────────
   FULL-MAP WRAPPER — improve map tab area
────────────────────────────────────────────────────── */
.full-map-wrapper {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  min-height: 400px !important;
}
.view-full-map {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: var(--sp-3) var(--sp-5) !important;
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: var(--r-full) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-top: var(--sp-3) !important;
  transition: var(--t) !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
}
.view-full-map:hover { background: var(--brand-dark) !important; color: #fff !important; }

/* ──────────────────────────────────────────────────────
   MENU/STORE PAGE — Karenderia class overrides
────────────────────────────────────────────────────── */
.menu-view-wrap,
.menu-restaurant-wrap {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: var(--sp-6) !important;
}

/* Restaurant info header card */
.restaurant-info-wrap {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--sp-6) !important;
  margin-bottom: var(--sp-6) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-5) !important;
}
.restaurant-info-wrap img.logo-small {
  width: 88px !important;
  height: 88px !important;
  border-radius: var(--r-xl) !important;
  object-fit: cover !important;
  border: 2px solid var(--ink-100) !important;
  flex-shrink: 0 !important;
}

/* Rating stars (Raty plugin) */
img.raty-star { width: 16px !important; height: 16px !important; }

/* Order/add-to-cart buttons */
.add-item,
.add-item-btn,
button.addToCart {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  padding: var(--sp-2) var(--sp-4) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: var(--t) !important;
  font-family: var(--font) !important;
}
.add-item:hover, .add-item-btn:hover { background: var(--brand-dark) !important; }

/* ──────────────────────────────────────────────────────
   USER ACCOUNT PAGES (public frontend)
────────────────────────────────────────────────────── */
.user-account-wrap,
#user-panel,
.user-panel {
  max-width: var(--max-w) !important;
  margin: var(--sp-8) auto !important;
  padding: 0 var(--sp-6) !important;
}
.user-panel-card {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--sp-8) !important;
  margin-bottom: var(--sp-5) !important;
}

/* Order tracking status bar */
.order-status-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--sp-5) !important;
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--ink-200) !important;
  margin-bottom: var(--sp-4) !important;
  gap: var(--sp-3) !important;
  flex-wrap: wrap !important;
}
.order-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  flex: 1 !important;
  position: relative !important;
  text-align: center !important;
}
.order-step-dot {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--r-full) !important;
  border: 2px solid var(--ink-200) !important;
  background: var(--surface) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: var(--t) !important;
  z-index: 1 !important;
}
.order-step.done .order-step-dot {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.order-step.active .order-step-dot {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-xlight) !important;
  color: var(--brand) !important;
}
.order-step-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-400) !important;
  letter-spacing: 0.3px !important;
}
.order-step.done .order-step-label,
.order-step.active .order-step-label { color: var(--brand) !important; }