/* ============================================================
   VD Motors — Brand Design System
   Primary: #532DF5 (Purple) | Dark: #1D242D | Accent: #FC013C
   Palette sourced from vdmotors.in
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── CSS Variables ──────────────────────────────────────── */
:root {
  /* ── Backward-compat aliases ── */
  --vd-pink:       #532DF5;
  --vd-purple:     #3D1FBE;
  --vd-dark:       #1D242D;
  --vd-bg:         #FFFFFF;
  --vd-bg-2:       #F4F4F4;
  --vd-text-muted: #A3AFB7;
  --vd-gradient-h: linear-gradient(90deg, #532DF5 0%, #FC013C 100%);
  --vd-gradient-hover: linear-gradient(135deg, #3D1FBE 0%, #CC002F 100%);
  --vd-shadow-lg:  0 12px 48px rgba(0,0,0,.14);
  --font-primary:  'Inter', sans-serif;
  --font-secondary:'Inter', sans-serif;
  --vd-primary:    #532DF5;
  --vd-secondary:  #FC013C;
  --nav-height:    72px;
  --page-top:      calc(var(--nav-height) + 36px);   /* navbar + announce bar */
  /* ── Core palette ── */
  --vd-black:    #1D242D;
  --vd-dark-2:   #232B35;
  --vd-blue:     #532DF5;
  --vd-blue-dark:#3D1FBE;
  --vd-cyan:     #FC013C;
  --vd-green:    #16BE0C;
  --vd-orange:   #FC013C;
  --vd-red:      #FC013C;
  --vd-white:    #FFFFFF;
  --vd-off:      #F4F4F4;
  --vd-surface:  #FAFBFB;
  --vd-text:     #070707;
  --vd-text-2:   #484848;
  --vd-muted:    #A3AFB7;
  --vd-border:   #E6E9EC;
  --vd-gradient: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  --vd-radius:   10px;
  --vd-radius-lg:16px;
  --vd-shadow:   0 2px 12px rgba(0,0,0,.07);
  --vd-shadow-md:0 4px 24px rgba(0,0,0,.10);
  --vd-shadow-lg:0 12px 48px rgba(0,0,0,.14);
}

/* ─── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--vd-text);
  background: var(--vd-white);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: var(--vd-text);
  line-height: 1.2;
}
a { text-decoration: none; transition: color .2s; }
img { max-width: 100%; height: auto; }
.container { max-width: 1280px; }

/* ─── Typography ─────────────────────────────────────────── */
.text-blue    { color: var(--vd-blue) !important; }
.text-cyan    { color: var(--vd-cyan) !important; }
.text-orange  { color: var(--vd-orange) !important; }
.text-green   { color: var(--vd-green) !important; }
.text-muted-vd{ color: var(--vd-muted) !important; }
.text-gradient-ev {
  background: var(--vd-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Section Helpers ────────────────────────────────────── */
.section-dark   { background: var(--vd-black); }
.section-off    { background: var(--vd-off); }
.section-white  { background: var(--vd-white); }
.section-py     { padding: 100px 0; }
.section-py-sm  { padding: 60px 0; }
@media (max-width:991px) { .section-py { padding: 64px 0; } .section-py-sm { padding: 40px 0; } }
@media (max-width:767px) { .section-py { padding: 48px 0; } }

/* ─── Section Header ─────────────────────────────────────── */
.section-header { margin-bottom: 52px; }
.section-header.center { text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vd-blue);
  margin-bottom: 10px;
}
.eyebrow-light { color: rgba(255,255,255,.5); }
.section-header h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  margin-bottom: 14px;
}
.section-header.dark h2 { color: #fff; }
.section-header p {
  font-size: 16px;
  color: var(--vd-text-2);
  max-width: 540px;
}
.section-header.center p { margin: 0 auto; }
.section-header.dark p { color: rgba(255,255,255,.6); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn-ev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .22s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-ev-primary {
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  color: #fff;
  border-color: transparent;
}
.btn-ev-primary:hover {
  background: linear-gradient(135deg, #FC013C 0%, #532DF5 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(252,1,60,.4);
}
.btn-ev-blue {
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  color: #fff;
  border-color: transparent;
}
.btn-ev-blue:hover {
  background: linear-gradient(135deg, #FC013C 0%, #532DF5 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(252,1,60,.4);
}
.btn-ev-red {
  background: #FC013C;
  color: #fff;
  border-color: #FC013C;
}
.btn-ev-red:hover {
  background: #532DF5;
  border-color: #532DF5;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(83,45,245,.35);
}
.btn-ev-dark {
  background: #1D242D;
  color: #fff;
  border-color: #1D242D;
}
.btn-ev-dark:hover {
  background: #FC013C;
  border-color: #FC013C;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(252,1,60,.35);
}
.btn-ev-gradient {
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  color: #fff;
  border-color: transparent;
}
.btn-ev-gradient:hover {
  background: linear-gradient(135deg, #FC013C 0%, #532DF5 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(252,1,60,.35);
}
.btn-ev-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.btn-ev-outline:hover {
  background: #FC013C;
  border-color: #FC013C;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(252,1,60,.35);
}
.btn-ev-outline-dark {
  background: transparent;
  color: #532DF5;
  border-color: #532DF5;
}
.btn-ev-outline-dark:hover {
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(252,1,60,.35);
}
.btn-ev-ghost {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.15);
}
.btn-ev-ghost:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.btn-ev-lg { padding: 16px 36px; font-size: 16px; border-radius: 100px; }
.btn-ev-sm { padding: 9px 20px; font-size: 13px; border-radius: 100px; }
.btn-ev-xs { padding: 6px 14px; font-size: 12px; border-radius: 100px; }

/* backward compat for old btn-vd classes */
.btn-vd { display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:100px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;border:2px solid transparent;cursor:pointer;transition:all .22s;white-space:nowrap;text-decoration:none; }
.btn-vd-primary { background:linear-gradient(135deg,#532DF5 0%,#FC013C 100%);color:#fff;border-color:transparent; }
.btn-vd-primary:hover { background:linear-gradient(135deg,#FC013C 0%,#532DF5 100%);border-color:transparent;color:#fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(252,1,60,.4); }
.btn-vd-outline { background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5); }
.btn-vd-outline:hover { background:linear-gradient(135deg,#532DF5 0%,#FC013C 100%);border-color:transparent;color:#fff;transform:translateY(-1px); }
.btn-vd-dark { background:#1D242D;color:#fff;border-color:#1D242D; }
.btn-vd-dark:hover { background:linear-gradient(135deg,#532DF5 0%,#FC013C 100%);border-color:transparent;color:#fff;transform:translateY(-1px); }
.btn-vd-white { background:#fff;color:#532DF5; }
.btn-vd-white:hover { background:linear-gradient(135deg,#532DF5 0%,#FC013C 100%);color:#fff;border-color:transparent; }
.btn-vd-sm { padding:9px 20px;font-size:13px;border-radius:100px; }
.btn-vd-lg { padding:16px 36px;font-size:16px;border-radius:100px; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge-ev {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1;
}
.badge-new      { background: #EDE8FF; color: var(--vd-blue); }
.badge-hot      { background: #FFF1F5; color: var(--vd-orange); }
.badge-bestseller{ background: #F0FDF4; color: var(--vd-green); }
.badge-offer    { background: var(--vd-orange); color: #fff; }
.badge-instock  { background: #F0FDF4; color: var(--vd-green); }
.badge-outstock { background: #FEF2F2; color: var(--vd-red); }
.badge-fame     { background: var(--vd-gradient); color: #fff; }

/* ─── Navbar ─────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   NAVBAR — Ather-inspired minimal dark nav
   ═══════════════════════════════════════════════════════════ */

/* Announce bar */
.nav-announce {
  background: linear-gradient(90deg, rgba(83,45,245,.18) 0%, rgba(252,1,60,.18) 100%);
  border-bottom: 1px solid rgba(252,1,60,.15);
  text-align: center;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  letter-spacing: .02em;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  transition: transform .3s;
}
.nav-announce a { color: rgba(255,255,255,.9); margin-left: 8px; font-weight: 700; }
.nav-announce.hide { transform: translateY(-100%); }

.vd-navbar {
  position: fixed;
  top: 36px; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  transition: background .35s, box-shadow .35s, backdrop-filter .35s, top .3s;
}
.vd-navbar.no-announce { top: 0; }
.vd-navbar .container {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  height: 100%;
  gap: 0;
}
.nav-transparent {
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav-white {
  background: rgba(4,6,12,.97);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-scrolled {
  background: rgba(4,6,12,.98) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.6);
}

/* Brand */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 32px;
}
.navbar-brand .brand-logo { height: 36px; width: auto; }
.navbar-brand span {
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  letter-spacing: -.6px;
  position: relative;
}
.navbar-brand span::before {
  content: '⚡';
  font-size: 14px;
  margin-right: 4px;
  filter: drop-shadow(0 0 6px rgba(83,45,245,.8));
}

/* Nav links */
.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
}
.nav-item .nav-link {
  color: rgba(255,255,255,.65);
  font-weight: 500;
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 6px;
  transition: color .2s, background .2s;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.nav-item .nav-link:hover { color: #fff; }
.nav-item .nav-link.active {
  color: #fff;
  font-weight: 600;
}
.nav-item .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, #532DF5 0%, #FC013C 100%);
  border-radius: 2px;
}
.nav-item .nav-link i.fa-chevron-down {
  font-size: 9px;
  opacity: .5;
  transition: transform .2s;
}
.nav-item.has-dropdown:hover .nav-link i.fa-chevron-down { transform: rotate(180deg); }

/* Actions */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: rgba(255,255,255,.65);
  background: transparent;
  transition: color .2s, background .2s;
  position: relative;
  border: none; cursor: pointer;
  font-size: 15px;
  text-decoration: none;
}
.nav-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.cart-badge {
  position: absolute;
  top: -2px; right: -3px;
  width: 16px; height: 16px;
  background: #EF4444;
  border-radius: 50%;
  font-size: 9px; font-weight: 800;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #000;
}

/* Search dropdown */
.nav-search-box {
  position: absolute;
  top: calc(100% + 12px); right: 0;
  width: 360px;
  background: #161D24;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  padding: 14px;
  z-index: 9999;
  display: none;
}
.nav-search-box.open { display: block; }
.nav-search-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: #fff;
  outline: none;
  transition: border-color .2s;
}
.nav-search-input::placeholder { color: rgba(255,255,255,.3); }
.nav-search-input:focus { border-color: #532DF5; }
.nav-search-results { margin-top: 8px; max-height: 320px; overflow-y: auto; }
.nav-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
}
.nav-search-item:hover { background: rgba(255,255,255,.06); }
.nav-search-item .si-img {
  width: 40px; height: 36px;
  object-fit: contain;
  border-radius: 6px;
  background: #EDE8FF;
  flex-shrink: 0;
}
.nav-search-item .si-name { font-size: 13px; font-weight: 600; color: #fff; }
.nav-search-item .si-meta { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
.nav-search-all { text-align: right; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.nav-search-all a { font-size: 12px; color: #532DF5; font-weight: 600; text-decoration: none; }

/* Hamburger */
.navbar-toggler {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none;
  cursor: pointer; padding: 6px;
  border-radius: 8px;
  transition: background .2s;
}
.navbar-toggler:hover { background: rgba(255,255,255,.08); }
.navbar-toggler span {
  display: block;
  width: 22px; height: 1.5px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: all .25s;
}

/* Hamburger → X animation */
.navbar-toggler.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navbar-toggler.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar-toggler.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav overlay — light theme */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: #fff;
  z-index: 1050;
  flex-direction: column;
  padding: 0 0 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav-overlay.open { display: flex; }
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: #fff;
  flex-shrink: 0;
}
.mobile-nav-cart-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: rgba(0,0,0,.05);
  color: #374151;
  font-size: 16px; text-decoration: none;
  position: relative;
  transition: background .2s, color .2s;
}
.mobile-nav-cart-btn:hover { background: rgba(83,45,245,.08); color: #532DF5; }
.mobile-nav-close {
  background: rgba(0,0,0,.05);
  border: none; border-radius: 8px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: #374151;
  cursor: pointer; font-size: 16px;
  transition: background .2s;
}
.mobile-nav-close:hover { background: rgba(0,0,0,.09); color: #070707; }

/* User strip */
.mobile-nav-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: rgba(83,45,245,.05);
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex-shrink: 0;
}
.mnu-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(83,45,245,.12);
  border: 1px solid rgba(83,45,245,.25);
  display: flex; align-items: center; justify-content: center;
  color: #532DF5; font-size: 15px; flex-shrink: 0;
}
.mnu-info { flex: 1; min-width: 0; }
.mnu-name { font-size: 13px; font-weight: 700; color: #070707; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnu-role { font-size: 11px; color: #888; margin-top: 1px; }
.mnu-cta {
  font-size: 11.5px; font-weight: 700; color: #532DF5; text-decoration: none;
  white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.mnu-cta i { font-size: 9px; }
.mnu-cta:hover { color: #3b1fd4; }

/* Mobile search */
.mobile-nav-search {
  position: relative; margin: 10px 16px 4px; flex-shrink: 0;
}
.mobile-search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,.3); font-size: 13px;
  pointer-events: none;
}
.mobile-search-input {
  width: 100%; padding: 10px 14px 10px 36px;
  background: #F4F4F4;
  border: 1px solid #E6E9EC;
  border-radius: 10px; font-size: 14px; color: #070707; outline: none;
  transition: border-color .2s, background .2s;
}
.mobile-search-input::placeholder { color: rgba(0,0,0,.35); }
.mobile-search-input:focus { border-color: #532DF5; background: #fff; }

/* Section headers */
.mobile-nav-section {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(0,0,0,.38);
  padding: 14px 20px 5px; flex-shrink: 0;
}

/* Nav links */
.mobile-nav-link {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 20px 10px 16px;
  text-decoration: none; color: #374151;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.mobile-nav-link:hover,
.mobile-nav-link:active { background: rgba(83,45,245,.05); color: #532DF5; }
.mnl-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.mnl-label { flex: 1; font-size: 15px; font-weight: 600; }
.mnl-arrow { font-size: 10px; color: rgba(0,0,0,.25); }

/* CTA row */
.mobile-nav-ctas {
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid rgba(0,0,0,.06);
  flex-shrink: 0;
}

/* ─── Mega dropdown ─────────────────────────────────────── */
.nav-mega-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%; transform: translateX(-50%);
  background: #161D24;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  min-width: 560px;
  padding: 20px;
  display: none;
  z-index: 9990;
  overflow: hidden;
}
.nav-item.has-dropdown { position: relative; }
.nav-item.has-dropdown:hover .nav-mega-dropdown { display: flex; gap: 16px; }

.nav-dropdown-products {
  display: flex;
  gap: 8px;
  flex: 1;
}
.nav-dropdown-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  transition: border-color .2s, background .2s;
  flex: 1;
}
.nav-dropdown-product:hover {
  border-color: rgba(83,45,245,.4);
  background: rgba(83,45,245,.08);
}
.nav-dropdown-product img {
  width: 100%; max-width: 90px; height: 68px;
  object-fit: contain;
  background: #EDE8FF;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 4px;
}
.ndp-name {
  font-size: 13px; font-weight: 700;
  color: #fff; margin-bottom: 3px;
}
.ndp-price {
  font-size: 11px;
  color: rgba(255,255,255,.4);
}

.nav-dropdown-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
  border-left: 1px solid rgba(255,255,255,.06);
  padding-left: 16px;
}
.nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-dropdown-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-dropdown-link i { width: 16px; text-align: center; font-size: 13px; }

/* ─── Hero (Full-screen EV style) ────────────────────────── */
.ev-hero {
  position: relative;
  min-height: 100vh;
  background: var(--vd-black);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-height);
}
.ev-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .35;
}
.ev-hero-glow {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83,45,245,.18) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-20%, -50%);
  pointer-events: none;
}
.ev-hero-content {
  position: relative; z-index: 2;
  padding: 80px 0 60px;
}
.ev-hero-content h1 {
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: -1.5px;
}
.ev-hero-content p {
  font-size: clamp(16px, 1.8vw, 19px);
  color: rgba(255,255,255,.65);
  margin-bottom: 36px;
  max-width: 520px;
  line-height: 1.7;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-stat-row {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.hero-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
}
.hero-stat-pill:first-child { border-radius: 10px 0 0 10px; }
.hero-stat-pill:last-child  { border-radius: 0 10px 10px 0; }
.hero-stat-pill + .hero-stat-pill { border-left: none; }
.hero-stat-pill .stat-val {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.hero-stat-pill .stat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}
.hero-scroll-hint {
  position: absolute;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.3);
  font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase;
  animation: bounceDown 2s infinite;
}
.hero-scroll-hint i { font-size: 16px; }
@keyframes bounceDown {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
/* Hero product image column */
.ev-hero-visual {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.ev-hero-visual img {
  max-height: 500px;
  filter: drop-shadow(0 20px 60px rgba(83,45,245,.25));
  animation: floatImg 4s ease-in-out infinite;
}
@keyframes floatImg {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ─── Hero Banner Slider ─────────────────────────────────── */
.hero-banner-section {
  position: relative;
  overflow: hidden;
  background: var(--vd-black);
  width: 100%;
  line-height: 0;
  margin-top: var(--page-top); /* push below announce bar + navbar */
}
.hero-banner-slide { display:none; width:100%; position:relative; }
.hero-banner-slide.active { display:block; }
.hero-banner-link {
  display: block; width: 100%;
  text-decoration: none; cursor: pointer; line-height: 0;
}
.hero-banner-link:not([href]) { cursor:default; pointer-events:none; }

/* ── Desktop image — full viewport below header ── */
.hero-banner-img-desktop {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  height: calc(100vh - var(--page-top));
  min-height: 520px;
}

/* Mobile image — portrait (hidden on desktop) */
.hero-banner-img-mobile {
  display: none;
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── Dots ── */
.hero-banner-dots {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 8px; z-index: 10;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.35); cursor: pointer;
  transition: all .3s; border: none; padding: 0;
}
.hero-dot.active { width: 28px; background: var(--vd-gradient); }

/* ── Arrows ── */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s; font-size: 14px;
}
.hero-arrow:hover { background: rgba(255,255,255,.28); }
.hero-arrow.prev { left: 18px; }
.hero-arrow.next { right: 18px; }

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
  /* When slide has a portrait mobile image — full height below header */
  .hero-banner-slide.has-mobile .hero-banner-img-desktop { display: none; }
  .hero-banner-slide.has-mobile .hero-banner-img-mobile  {
    display: block;
    width: 100%;
    height: calc(100vh - var(--page-top));
    min-height: 380px;
    object-fit: cover;
    object-position: center top;
  }
  /* No mobile image: landscape fills width, sensible height */
  .hero-banner-img-desktop {
    height: calc(100vh - var(--page-top));
    min-height: 280px;
  }
  .hero-arrow { width: 36px; height: 36px; font-size: 12px; }
  .hero-arrow.prev { left: 10px; }
  .hero-arrow.next { right: 10px; }
}

/* ─── Marquee Strip ──────────────────────────────────────── */
.marquee-strip {
  background: var(--vd-blue);
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marqueeScroll 30s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 32px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.25);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Product Card (Amazon-style) ────────────────────────── */
.product-card {
  background: #fff;
  border-radius: var(--vd-radius-lg);
  border: 1px solid var(--vd-border);
  overflow: hidden;
  transition: all .25s;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.product-card:hover {
  border-color: rgba(83,45,245,.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  transform: translateY(-4px);
}
.product-card-badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 5px;
  z-index: 2;
}
.product-card-image {
  background: var(--vd-surface);
  padding: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.product-card-image img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .4s;
}
.product-card:hover .product-card-image img { transform: scale(1.05); }
.product-card-body {
  padding: 18px 18px 14px;
  flex: 1; display: flex; flex-direction: column;
}
.product-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--vd-text);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-stars {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 10px;
}
.product-card-stars .stars { color: #F59E0B; font-size: 12px; }
.product-card-stars .count { font-size: 12px; color: var(--vd-muted); }
.product-card-pricing { margin-bottom: 8px; }
.price-mrp {
  font-size: 13px;
  color: var(--vd-muted);
  text-decoration: line-through;
}
.price-main {
  font-size: 20px;
  font-weight: 800;
  color: var(--vd-text);
  line-height: 1.1;
}
.price-save {
  font-size: 13px;
  color: var(--vd-orange);
  font-weight: 600;
}
.price-emi {
  font-size: 12px;
  color: var(--vd-blue);
  font-weight: 600;
}
.product-card-avail {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
  color: var(--vd-green);
  font-weight: 600;
  margin-bottom: 12px;
}
.product-card-avail .delivery { color: var(--vd-text-2); font-weight: 400; }
.product-card-actions {
  display: flex; gap: 8px;
  margin-top: auto;
}
.product-card-actions .btn-ev { flex: 1; justify-content: center; font-size: 13px; padding: 10px; }

/* ─── Vehicle Card (Dark style for dark sections) ─────────── */
.vehicle-card {
  background: var(--vd-dark-2);
  border-radius: var(--vd-radius-lg);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  transition: all .3s;
  display: flex; flex-direction: column;
  height: 100%;
}
.vehicle-card:hover {
  border-color: rgba(83,45,245,.4);
  box-shadow: 0 12px 40px rgba(83,45,245,.15);
  transform: translateY(-6px);
}
.vehicle-card-image {
  position: relative;
  background: rgba(255,255,255,.03);
  padding: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.vehicle-card-image img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .4s;
}
.vehicle-card:hover .vehicle-card-image img { transform: scale(1.06); }
.vehicle-card-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--vd-blue);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}
.vehicle-card-body {
  padding: 20px;
  flex: 1; display: flex; flex-direction: column;
}
.vehicle-card-name {
  font-size: 19px; font-weight: 800;
  color: #fff; margin-bottom: 14px;
}
.vehicle-specs-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.spec-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 100px;
}
.spec-pill i { color: var(--vd-cyan); font-size: 10px; }
.vehicle-card-pricing {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.vehicle-price-val {
  font-size: 20px; font-weight: 800; color: #fff;
}
.vehicle-price-emi {
  font-size: 12px; color: rgba(255,255,255,.5);
}
.vehicle-card-actions {
  display: flex; gap: 8px; margin-top: 14px;
}
.vehicle-card-actions .btn-ev { flex: 1; justify-content: center; font-size: 13px; }

/* ─── Key Numbers / Stats Bar ────────────────────────────── */
.stats-bar { padding: 64px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-lg);
  overflow: hidden;
}
.stat-item {
  padding: 40px 24px;
  text-align: center;
  border-right: 1px solid var(--vd-border);
}
.stat-item:last-child { border-right: none; }
.stat-item .stat-number {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  background: var(--vd-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-item .stat-label { font-size: 14px; color: var(--vd-text-2); font-weight: 500; }

/* ─── Feature Rows (Why VD) ──────────────────────────────── */
.feature-row { padding: 48px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--vd-border); }
.feature-icon-box {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--vd-off);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--vd-blue);
  margin-bottom: 18px;
}
.feature-row h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.feature-row p  { font-size: 15px; color: var(--vd-text-2); line-height: 1.7; }

/* Old why-card kept for compat */
.why-card { background:#fff;border-radius:var(--vd-radius-lg);padding:28px;text-align:center;border:1px solid var(--vd-border);transition:all .3s;height:100%; }
.why-card:hover { border-color:rgba(83,45,245,.3);box-shadow:var(--vd-shadow-md);transform:translateY(-3px); }
.why-icon { width:60px;height:60px;border-radius:16px;background:var(--vd-off);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px;color:var(--vd-blue); }
.why-card h4 { font-size:16px;margin-bottom:8px; }
.why-card p  { font-size:13px;color:var(--vd-text-2);line-height:1.6; }

/* ─── Finance / EMI Section ──────────────────────────────── */
.emi-section {
  background: linear-gradient(135deg, var(--vd-black) 0%, #251A40 100%);
  padding: 100px 0;
}
.emi-section h2 { color: #fff; font-size: clamp(28px,3.5vw,44px); margin-bottom: 12px; }
.emi-section p  { color: rgba(255,255,255,.6); font-size: 16px; }
.emi-highlight {
  font-size: clamp(36px,5vw,64px);
  font-weight: 900;
  background: var(--vd-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
  margin: 8px 0 16px;
}
.emi-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--vd-radius-lg);
  padding: 24px;
  text-align: center;
}
.emi-card .emi-val { font-size: 28px; font-weight: 800; color: #fff; }
.emi-card .emi-lbl { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }

/* Old finance strip kept */
.finance-strip { background: var(--vd-off); border-top:1px solid var(--vd-border); border-bottom:1px solid var(--vd-border); }
.emi-stat .amount { font-size:32px;font-weight:800;background:var(--vd-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.emi-stat .from   { font-size:13px;color:var(--vd-muted); }

/* ─── Partner Cards ──────────────────────────────────────── */
.partner-card {
  border-radius: var(--vd-radius-lg);
  padding: 32px;
  border: 1px solid var(--vd-border);
  transition: all .3s;
  height: 100%; display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.partner-card-dealer     { background: #EDE8FF; border-color: rgba(83,45,245,.2); }
.partner-card-franchise  { background: #FFF1F5; border-color: rgba(252,1,60,.2); }
.partner-card-master     { background: #F0FDF4; border-color: rgba(16,185,129,.2); }
.partner-card:hover { transform: translateY(-4px); box-shadow: var(--vd-shadow-md); }
.partner-card-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 16px;
}
.partner-card-dealer .partner-card-icon    { background: rgba(83,45,245,.12); color: var(--vd-blue); }
.partner-card-franchise .partner-card-icon { background: rgba(252,1,60,.12);  color: var(--vd-orange); }
.partner-card-master .partner-card-icon    { background: rgba(16,185,129,.12); color: var(--vd-green); }
.partner-card h4 { font-size: 18px; margin-bottom: 8px; }
.partner-card p  { font-size: 14px; color: var(--vd-text-2); flex: 1; margin-bottom: 20px; line-height: 1.6; }
.partner-earn {
  font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: 100px;
  margin-bottom: 20px;
}
.partner-card-dealer .partner-earn    { background: rgba(83,45,245,.1); color: var(--vd-blue); }
.partner-card-franchise .partner-earn { background: rgba(252,1,60,.1); color: var(--vd-orange); }
.partner-card-master .partner-earn    { background: rgba(16,185,129,.1); color: var(--vd-green); }

/* Old partner strip */
.partner-strip { background:var(--vd-black);padding:64px 0; }
.partner-strip h2 { color:#fff; }
.partner-strip p  { color:rgba(255,255,255,.6);font-size:16px;margin-bottom:32px; }

/* ─── Testimonials ───────────────────────────────────────── */
.testimonial-card {
  background: #fff;
  border-radius: var(--vd-radius-lg);
  padding: 28px;
  border: 1px solid var(--vd-border);
  box-shadow: var(--vd-shadow);
  transition: all .25s;
}
.testimonial-card:hover { box-shadow: var(--vd-shadow-md); transform: translateY(-2px); }
.testimonial-quote { font-size: 32px; color: var(--vd-off); line-height: 1; margin-bottom: 10px; }
.testimonial-stars { color: #F59E0B; margin-bottom: 12px; font-size: 14px; }
.testimonial-text  { font-size: 15px; color: var(--vd-text-2); line-height: 1.75; margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--vd-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px;
  flex-shrink: 0;
  object-fit: cover;
}
.testimonial-author .name     { font-weight: 700; font-size: 14px; }
.testimonial-author .location { font-size: 12px; color: var(--vd-muted); }

/* ─── Blog Cards ─────────────────────────────────────────── */
.blog-card {
  background: #fff;
  border-radius: var(--vd-radius-lg);
  overflow: hidden;
  border: 1px solid var(--vd-border);
  transition: all .25s;
  height: 100%; display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--vd-shadow-md); }
.blog-card-image { aspect-ratio: 16/9; overflow: hidden; background: var(--vd-off); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-card-image img { transform: scale(1.04); }
.blog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-tag { display:inline-block;background:var(--vd-off);color:var(--vd-blue);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:6px;margin-bottom:10px; }
.blog-card-title { font-size:16px;font-weight:700;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.blog-card-excerpt { font-size:13px;color:var(--vd-text-2);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px; }
.blog-card-meta { font-size:12px;color:var(--vd-muted);display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--vd-border); }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid var(--vd-border);
  overflow: hidden;
}
.faq-item:first-child { border-top: 1px solid var(--vd-border); }
.faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 4px;
  cursor: pointer;
  font-weight: 600; font-size: 15px;
  gap: 16px; user-select: none;
  color: var(--vd-text);
  transition: color .2s;
}
.faq-question:hover { color: var(--vd-blue); }
.faq-question .icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--vd-off);
  display: flex; align-items: center; justify-content: center;
  color: var(--vd-blue); transition: all .2s; font-size: 14px;
}
.faq-item.open .faq-question .icon { background: var(--vd-blue); color: #fff; transform: rotate(45deg); }
.faq-answer { display:none;padding:0 4px 18px;font-size:14px;color:var(--vd-text-2);line-height:1.75; }
.faq-item.open .faq-answer { display: block; }

/* ─── CTA Full-width ─────────────────────────────────────── */
.cta-section {
  position: relative;
  background: #080C23;
  padding: 110px 0;
  overflow: hidden;
  text-align: center;
  min-height: 460px;
  display: flex;
  align-items: center;
}
.cta-section > .container { width: 100%; }
.cta-section h2 { color: #fff; font-size: clamp(28px,4vw,44px); margin-bottom: 12px; }
.cta-section p  { color: rgba(255,255,255,.6); font-size: 16px; margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-banner {
  background: var(--vd-gradient);
  border-radius: var(--vd-radius-lg);
  padding: 60px;
  text-align: center; color: #fff;
}
.cta-banner h2 { color:#fff;margin-bottom:12px; }
.cta-banner p  { color:rgba(255,255,255,.8);margin-bottom:28px;font-size:16px; }

/* ─── Page Hero (inner pages) ────────────────────────────── */
.page-hero {
  background: var(--vd-black);
  padding: calc(var(--page-top) + 48px) 0 60px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(83,45,245,.12) 0%, transparent 70%);
}
.page-hero h1 { color: #fff; font-size: clamp(30px,4.5vw,50px); margin-bottom: 12px; }
.page-hero p  { color: rgba(255,255,255,.6); font-size: 16px; max-width: 520px; }
.breadcrumb-vd { display:flex;gap:8px;align-items:center;margin-bottom:14px; }
.breadcrumb-vd a { font-size:13px;color:rgba(255,255,255,.45); }
.breadcrumb-vd a:hover { color:rgba(255,255,255,.85); }
.breadcrumb-vd span { font-size:13px;color:rgba(255,255,255,.25); }
.breadcrumb-vd .current { font-size:13px;color:var(--vd-blue);font-weight:600; }

/* ─── Product Listing Page ───────────────────────────────── */
.listing-hero {
  background: var(--vd-black);
  padding: calc(var(--page-top) + 24px) 0 32px;
}
.listing-hero h1 { color: #fff; font-size: clamp(24px,3vw,36px); margin-bottom: 6px; }
.listing-hero p  { color: rgba(255,255,255,.5); font-size: 14px; }
.filter-sidebar {
  background: #fff;
  border-radius: var(--vd-radius-lg);
  border: 1px solid var(--vd-border);
  padding: 20px;
  position: sticky; top: calc(var(--page-top) + 16px);
}
.filter-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--vd-border); }
.filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vd-muted); margin-bottom: 10px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--vd-border);
  font-size: 13px; font-weight: 500;
  color: var(--vd-text-2);
  cursor: pointer; transition: all .2s;
  margin: 3px;
}
.filter-chip:hover, .filter-chip.active {
  border-color: var(--vd-blue);
  background: rgba(83,45,245,.06);
  color: var(--vd-blue);
}
.sort-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 16px;
}
.sort-bar .results-count { font-size: 14px; color: var(--vd-muted); }
.sort-select {
  padding: 8px 14px;
  border: 1.5px solid var(--vd-border);
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--vd-text);
  background: #fff; cursor: pointer;
  outline: none;
}
.sort-select:focus { border-color: var(--vd-blue); }

/* ─── Product Detail Page ────────────────────────────────── */
.detail-gallery-main {
  background: var(--vd-surface);
  border-radius: var(--vd-radius-lg);
  border: 1px solid var(--vd-border);
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.detail-gallery-main img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform .4s;
}
.detail-gallery-main:hover img { transform: scale(1.06); }
.detail-thumb-strip {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.detail-thumb {
  width: 72px; height: 72px;
  border-radius: 8px;
  border: 2px solid var(--vd-border);
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
  background: var(--vd-surface);
  display: flex; align-items: center; justify-content: center;
}
.detail-thumb:hover, .detail-thumb.active { border-color: var(--vd-blue); }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Buy panel */
.buy-panel {
  position: sticky;
  top: calc(var(--page-top) + 16px);
}
.buy-panel-inner {
  background: #fff;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-lg);
  padding: 28px;
}
.detail-price-mrp    { font-size: 14px; color: var(--vd-muted); text-decoration: line-through; }
.detail-price-main   { font-size: 34px; font-weight: 900; color: var(--vd-text); line-height: 1.1; }
.detail-price-off    { font-size: 15px; color: var(--vd-orange); font-weight: 700; }
.detail-price-save   { font-size: 14px; color: var(--vd-green); font-weight: 600; }
.detail-price-emi    { font-size: 14px; color: var(--vd-blue); font-weight: 600; }
.detail-divider      { border: none; border-top: 1px solid var(--vd-border); margin: 18px 0; }
.trust-badges-row    { display: flex; gap: 8px; flex-wrap: wrap; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--vd-off);
  padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--vd-text-2);
}
.trust-badge i { color: var(--vd-blue); }
.urgency-strip {
  display: flex; align-items: center; gap: 8px;
  background: #FFF1F5;
  border: 1px solid rgba(252,1,60,.2);
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; color: var(--vd-orange); font-weight: 600;
}
.social-proof {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--vd-muted);
}
.social-proof i { color: var(--vd-blue); }
.pincode-row {
  display: flex; gap: 8px;
}
.pincode-input {
  flex: 1; padding: 10px 14px;
  border: 1.5px solid var(--vd-border); border-radius: 8px;
  font-size: 14px; outline: none;
}
.pincode-input:focus { border-color: var(--vd-blue); }

/* Product tabs */
.product-tabs {
  border-bottom: 1px solid var(--vd-border);
  display: flex; gap: 0; overflow-x: auto;
}
.product-tab-btn {
  padding: 14px 20px;
  font-size: 14px; font-weight: 600;
  color: var(--vd-muted);
  border: none; background: none;
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all .2s;
}
.product-tab-btn:hover  { color: var(--vd-text); }
.product-tab-btn.active { color: var(--vd-blue); border-bottom-color: var(--vd-blue); }
.product-tab-pane { display: none; padding: 28px 0; }
.product-tab-pane.active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr:nth-child(even) td { background: var(--vd-off); }
.spec-table td {
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid var(--vd-border);
}
.spec-table td:first-child { font-weight: 600; color: var(--vd-text-2); width: 40%; }

/* ─── User Dashboard Sidebar ─────────────────────────────── */
.dash-layout {
  display: flex; min-height: 100vh; background: var(--vd-off);
}
.dash-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--vd-black);
  position: fixed; top: var(--page-top); left: 0; bottom: 0;
  overflow-y: auto; z-index: 200;
  padding: 20px 0;
  display: flex; flex-direction: column;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.dash-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 199;
  backdrop-filter: blur(2px);
}
.dash-overlay.show { display: block; }
.dash-mobile-toggle {
  display: none;
  align-items: center; gap: 8px;
  background: var(--vd-blue); color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; margin: 14px 0 0 0;
}
.dash-sidebar-logo {
  padding: 8px 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 12px;
}
.dash-sidebar-logo a {
  font-size: 20px; font-weight: 900; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.dash-user-info {
  padding: 12px 20px 16px;
  margin-bottom: 8px;
}
.dash-user-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--vd-gradient);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; color: #fff;
  margin-bottom: 10px;
}
.dash-user-name { font-size: 14px; font-weight: 700; color: #fff; }
.dash-user-role {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(83,45,245,.2); color: var(--vd-cyan);
  display: inline-block; margin-top: 4px;
}
.dash-nav { padding: 0 12px; flex: 1; }
.dash-nav-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.3);
  padding: 8px 8px 4px;
  margin-top: 10px;
}
.dash-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  font-size: 14px; font-weight: 500;
  transition: all .2s;
  margin-bottom: 2px;
}
.dash-nav-link i { width: 18px; text-align: center; font-size: 14px; }
.dash-nav-link:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
.dash-nav-link.active { background: rgba(83,45,245,.15); color: #fff; font-weight: 600; }
.dash-nav-link.active i { color: var(--vd-blue); }
.dash-logout {
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: auto;
}
.dash-logout a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: rgba(252,1,60,.7); font-size: 14px; font-weight: 500;
  transition: all .2s;
}
.dash-logout a:hover { background: rgba(239,68,68,.1); color: var(--vd-red); }
.dash-content {
  margin-left: 260px;
  flex: 1;
  padding: 28px;
  min-height: 100vh;
}
.dash-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--vd-border);
}
.dash-title { font-size: 22px; font-weight: 800; }
.dash-stat-card {
  background: #fff;
  border-radius: var(--vd-radius-lg);
  border: 1px solid var(--vd-border);
  padding: 22px;
  transition: all .2s;
}
.dash-stat-card:hover { box-shadow: var(--vd-shadow-md); }
.dash-stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 14px;
}
.dash-stat-val { font-size: 26px; font-weight: 900; color: var(--vd-text); }
.dash-stat-lbl { font-size: 13px; color: var(--vd-muted); margin-top: 2px; }

/* Status badges */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
}
.status-pending  { background: #FFF1F5; color: #D97706; }
.status-active, .status-confirmed, .status-approved { background: #F0FDF4; color: var(--vd-green); }
.status-completed, .status-delivered { background: #EDE8FF; color: var(--vd-blue); }
.status-cancelled, .status-rejected  { background: #FEF2F2; color: var(--vd-red); }
.status-inactive { background: var(--vd-off); color: var(--vd-muted); }

/* ─── Auth Pages ─────────────────────────────────────────── */
.auth-layout {
  min-height: 100vh;
  display: flex;
}
.auth-brand-panel {
  flex: 1;
  background: var(--vd-black);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px;
  position: relative; overflow: hidden;
}
.auth-brand-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(83,45,245,.15) 0%, transparent 60%);
}
.auth-form-panel {
  width: 480px; flex-shrink: 0;
  background: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 48px;
  overflow-y: auto;
}
.auth-form-panel h1 { font-size: 26px; margin-bottom: 6px; }
.auth-form-panel p  { font-size: 14px; color: var(--vd-muted); margin-bottom: 28px; }
.form-label-ev { font-size: 13px; font-weight: 600; color: var(--vd-text-2); margin-bottom: 5px; display: block; }
.form-control-ev {
  width: 100%; padding: 12px 15px;
  border: 1.5px solid var(--vd-border);
  border-radius: var(--vd-radius);
  font-size: 14px; color: var(--vd-text);
  background: var(--vd-surface);
  transition: border-color .2s, box-shadow .2s;
  font-family: 'Inter', sans-serif; outline: none;
}
.form-control-ev:focus { border-color: var(--vd-blue); box-shadow: 0 0 0 3px rgba(83,45,245,.1); background: #fff; }
.form-control-ev::placeholder { color: var(--vd-muted); }
/* old compat */
.form-control-vd { width:100%;padding:12px 15px;border:1.5px solid var(--vd-border);border-radius:var(--vd-radius);font-size:14px;color:var(--vd-text);background:var(--vd-surface);transition:border-color .2s,box-shadow .2s;font-family:'Inter',sans-serif;outline:none; }
.form-control-vd:focus { border-color:var(--vd-blue);box-shadow:0 0 0 3px rgba(83,45,245,.1);background:#fff; }
.form-label-vd { font-size:13px;font-weight:600;color:var(--vd-text-2);margin-bottom:5px;display:block; }

/* ─── Alert Flash ────────────────────────────────────────── */
.alert-vd {
  padding: 13px 16px; border-radius: var(--vd-radius);
  font-size: 14px; display: flex; align-items: flex-start;
  gap: 10px; margin-bottom: 18px;
}
.alert-vd-success { background: #F0FDF4; border: 1px solid rgba(16,185,129,.25); color: #0f766e; }
.alert-vd-error   { background: #FEF2F2; border: 1px solid rgba(239,68,68,.25);  color: #b91c1c; }
.alert-vd-info    { background: #EDE8FF; border: 1px solid rgba(83,45,245,.2);   color: #532DF5; }

/* ─── Footer ─────────────────────────────────────────────── */
.vd-footer {
  background: var(--vd-black);
  color: rgba(255,255,255,.55);
  padding: 64px 0 0;
}
.footer-brand .brand-name {
  font-size: 24px; font-weight: 900; color: #fff;
  display: block; margin-bottom: 12px; letter-spacing: -.5px;
}
.footer-brand p { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
.footer-social  { display: flex; gap: 8px; }
.social-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: 14px;
  transition: all .2s;
}
.social-btn:hover { background: var(--vd-blue); color: #fff; border-color: transparent; }
.footer-heading {
  font-size: 12px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 18px;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: rgba(255,255,255,.5); font-size: 14px; transition: color .2s, padding-left .2s; }
.footer-links a:hover { color: rgba(255,255,255,.9); padding-left: 3px; }
.footer-contact-item { display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:14px; }
.footer-contact-item .icon { width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--vd-blue);flex-shrink:0;margin-top:1px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 18px 0;
  margin-top: 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.footer-bottom p { font-size: 13px; margin: 0; }
.footer-bottom-links { display: flex; gap: 18px; }
.footer-bottom-links a { font-size: 13px; color: rgba(255,255,255,.4); }
.footer-bottom-links a:hover { color: rgba(255,255,255,.8); }
.footer-trust-row {
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: center;
}
.trust-badge-footer {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,.4); font-weight: 600;
}
.trust-badge-footer i { color: var(--vd-blue); }

/* ─── Category Chips (listing filters) ──────────────────── */
.cat-card {
  background: #fff;
  border-radius: var(--vd-radius-lg);
  padding: 28px 20px;
  text-align: center;
  border: 1.5px solid var(--vd-border);
  transition: all .25s;
  display: block; color: var(--vd-text);
}
.cat-card:hover { border-color: var(--vd-blue); box-shadow: var(--vd-shadow-md); transform: translateY(-3px); color: var(--vd-blue); }
.cat-icon  { font-size: 36px; margin-bottom: 12px; display: block; }
.cat-name  { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.cat-count { font-size: 13px; color: var(--vd-muted); }

/* ─── Step Indicator (partner reg) ──────────────────────── */
.step-indicator { display:flex;align-items:center;gap:0;margin-bottom:36px; }
.step-item { flex:1;display:flex;align-items:center; }
.step-circle { width:34px;height:34px;border-radius:50%;border:2px solid var(--vd-border);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--vd-muted);flex-shrink:0;position:relative;z-index:1;transition:all .2s; }
.step-item.active .step-circle { background:var(--vd-blue);border-color:transparent;color:#fff; }
.step-item.done .step-circle   { background:var(--vd-green);border-color:transparent;color:#fff; }
.step-line { flex:1;height:2px;background:var(--vd-border); }
.step-item.done .step-line { background:var(--vd-blue); }
.step-label { font-size:11px;font-weight:600;color:var(--vd-muted);margin-top:6px;white-space:nowrap; }
.step-item.active .step-label { color:var(--vd-blue); }

/* ─── Track Order timeline ───────────────────────────────── */
.track-card { background:#fff;border-radius:var(--vd-radius-lg);padding:36px;border:1px solid var(--vd-border);max-width:560px;margin:0 auto; }
.order-timeline { position:relative;padding-left:26px; }
.order-timeline::before { content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--vd-border); }
.timeline-step { position:relative;margin-bottom:24px; }
.timeline-step::before { content:'';position:absolute;left:-20px;top:4px;width:14px;height:14px;border-radius:50%;border:2px solid var(--vd-border);background:#fff; }
.timeline-step.done::before   { background:var(--vd-green);border-color:transparent; }
.timeline-step.active::before { background:var(--vd-blue);border-color:transparent;box-shadow:0 0 0 4px rgba(83,45,245,.15); }
.timeline-step .step-title { font-weight:700;font-size:14px; }
.timeline-step .step-time  { font-size:12px;color:var(--vd-muted); }

/* ─── Contact form ───────────────────────────────────────── */
.contact-form-card { background:#fff;border-radius:var(--vd-radius-lg);padding:36px;border:1px solid var(--vd-border); }

/* ─── Blog content ───────────────────────────────────────── */
.blog-content { line-height:1.85;font-size:16px;color:var(--vd-text); }
.blog-content h2 { font-size:22px;margin:32px 0 14px; }
.blog-content h3 { font-size:18px;margin:24px 0 12px; }
.blog-content p  { margin-bottom:16px; }
.blog-content ul,.blog-content ol { margin-bottom:16px;padding-left:22px; }
.blog-content li { margin-bottom:7px; }
.blog-content img { border-radius:var(--vd-radius);margin:22px 0;width:100%; }
.blog-content blockquote { border-left:3px solid var(--vd-blue);padding:14px 18px;background:var(--vd-off);border-radius:0 var(--vd-radius) var(--vd-radius) 0;margin:20px 0;font-style:italic;color:var(--vd-text-2); }

/* ─── Popup / chatbot colors ─────────────────────────────── */
.popup-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px); }
.popup-card { background:#fff;border-radius:var(--vd-radius-lg);overflow:hidden;max-width:480px;width:100%;position:relative;animation:popIn .3s ease; }
@keyframes popIn { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.popup-close { position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.15);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:1; }

/* Chatbot overrides to new palette */
#chatBtn { background: var(--vd-black) !important; }
#chatHead { background: var(--vd-black) !important; }
.cm-user { background: var(--vd-blue) !important; border-radius:12px 4px 12px 12px; }
#chatSend { background: var(--vd-blue) !important; }
#chatSend:hover { background: #FC013C !important; }
#chatInput:focus { border-color: var(--vd-blue) !important; }
#chatContactForm input:focus { border-color: var(--vd-blue) !important; }
.cbtn-primary { background: var(--vd-blue) !important; }
#chatLeaveContact { color: var(--vd-muted) !important; }

/* ─── Offer Banner Card ──────────────────────────────────── */
.offer-banner-card { border-radius:var(--vd-radius-lg);overflow:hidden;position:relative;aspect-ratio:16/5;display:flex;align-items:center; }
.offer-banner-card img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.offer-banner-content { position:relative;z-index:2;padding:28px 36px;background:linear-gradient(90deg,rgba(8,13,26,.8) 0%,transparent 100%);width:100%;height:100%;display:flex;align-items:center; }

/* ─── Spec strip (stat row) ──────────────────────────────── */
.spec-strip { background:var(--vd-black);padding:48px 0; }
.spec-strip-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px; }
.spec-strip-item { text-align:center;color:#fff; }
.spec-strip-item .icon { width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;color:var(--vd-cyan); }
.spec-strip-item .value { font-size:28px;font-weight:800;color:#fff; }
.spec-strip-item .label { font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;text-transform:uppercase;letter-spacing:.05em; }

/* ─── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-fade-up   { animation: fadeUp .6s ease forwards; }
.anim-slide-in  { animation: slideIn .5s ease forwards; }

/* ─── Utilities ──────────────────────────────────────────── */
.sticky-top-nav { padding-top: var(--page-top); }
.rounded-vd     { border-radius: var(--vd-radius); }
.rounded-vd-lg  { border-radius: var(--vd-radius-lg); }
.shadow-vd      { box-shadow: var(--vd-shadow); }
.shadow-vd-md   { box-shadow: var(--vd-shadow-md); }
.shadow-vd-lg   { box-shadow: var(--vd-shadow-lg); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1199px) {
  .dash-sidebar { width: 230px; }
  .dash-content { margin-left: 230px; }
}
@media (max-width: 991px) {
  :root { --nav-height: 64px; }   /* --page-top auto = 64+36 = 100px */
  .navbar-nav    { display: none !important; }
  .navbar-toggler{ display: flex; }
  .hero-stat-row { gap: 0; }
  .hero-stat-pill { padding: 12px 18px; }
  .stat-item { padding: 28px 16px; }
  .auth-brand-panel { display: none; }
  .auth-form-panel { width: 100%; }
  .dash-sidebar { transform: translateX(-100%); top: var(--page-top); }
  .dash-sidebar.open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,.4); }
  .dash-content { margin-left: 0 !important; padding: 16px; }
  .dash-mobile-toggle { display: flex; }
  .buy-panel { position: static; }
  .nav-announce { font-size: 11px; padding: 7px 12px; }
  .navbar-actions .btn-ev { display: none; }
  .at-page-hero { padding: calc(var(--page-top) + 32px) 0 50px; }
  .vd-navbar .container { padding-left: 16px; padding-right: 16px; }
  .navbar-brand { margin-right: 0; }
}
@media (max-width: 767px) {
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-arrow    { display: none; }
  .stats-grid    { grid-template-columns: repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item     { border-bottom: 1px solid var(--vd-border); }
  .cta-banner    { padding: 36px 20px; }
  .contact-form-card { padding: 24px 18px; }
  .hero-stat-pill .stat-val { font-size: 18px; }
}
@media (max-width: 480px) {
  .ev-hero-content h1 { letter-spacing: -1px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn-ev { text-align: center; justify-content: center; }
  .product-card-actions { flex-direction: column; }
}
@media print { .vd-navbar, .vd-footer, .dash-sidebar { display: none !important; } }

/* ═══════════════════════════════════════════════════════════
   ATHER-INSPIRED EXTENSIONS — VD Motors Premium UI
   ═══════════════════════════════════════════════════════════ */

/* ─── Nav product mega-dropdown ──────────────────────────── */
.nav-item.has-dropdown { position: relative; }
.nav-item.has-dropdown > .nav-link { display: inline-flex; align-items: center; gap: 5px; }
.nav-item.has-dropdown > .nav-link .fa-chevron-down {
  font-size: 9px; transition: transform .22s; opacity: .55;
}
.nav-item.has-dropdown:hover > .nav-link .fa-chevron-down { transform: rotate(180deg); }
.nav-mega-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(6,10,20,.98);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; padding: 18px;
  min-width: 520px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s cubic-bezier(.4,0,.2,1);
  z-index: 600;
  display: flex; gap: 6px; align-items: stretch;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.nav-item.has-dropdown:hover .nav-mega-dropdown {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-products { display: flex; gap: 5px; flex: 1; }
.nav-dropdown-product {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 10px; border-radius: 12px; flex: 1;
  transition: background .18s; text-decoration: none;
}
.nav-dropdown-product:hover { background: rgba(255,255,255,.06); }
.nav-dropdown-product img {
  height: 68px; width: 100%; object-fit: contain;
  margin-bottom: 9px; transition: transform .25s;
}
.nav-dropdown-product:hover img { transform: scale(1.06) translateY(-2px); }
.nav-dropdown-product .ndp-name {
  font-size: 12px; font-weight: 700; color: #fff; text-align: center;
}
.nav-dropdown-product .ndp-price {
  font-size: 10px; color: rgba(255,255,255,.45); margin-top: 2px;
}
.nav-dropdown-links {
  border-left: 1px solid rgba(255,255,255,.07);
  padding-left: 12px; display: flex; flex-direction: column;
  justify-content: center; gap: 1px; min-width: 148px;
}
.nav-dropdown-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px;
  color: rgba(255,255,255,.6); font-size: 13px; font-weight: 500;
  transition: all .15s; text-decoration: none;
}
.nav-dropdown-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-dropdown-link i { width: 16px; text-align: center; font-size: 13px; }

/* ─── Hero V2 — Ather full-viewport ─────────────────────── */
/* ═══════════════════════════════════════════════════════════
   HERO SECTION — Ather-inspired cinematic dark hero
   ═══════════════════════════════════════════════════════════ */

.ather-hero {
  position: relative;
  min-height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--page-top);
}

/* Layered background glows */
.ather-hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 72% 50%, rgba(83,45,245,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(6,182,212,.07) 0%, transparent 38%),
    radial-gradient(ellipse at 90% 10%, rgba(124,58,237,.06) 0%, transparent 32%);
}

/* Subtle grid texture */
.ather-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 100%, transparent 0%, black 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, transparent 0%, black 70%);
}

/* Inner layout */
.ather-hero-inner {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 60px 0 50px;
  position: relative;
  z-index: 2;
}

/* Left text block */
.ather-hero-text {
  position: relative;
  z-index: 3;
  max-width: 540px;
}

/* Badge pill */
.ather-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(83,45,245,.1);
  border: 1px solid rgba(83,45,245,.3);
  color: rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: fadeSlideDown .6s ease both;
}
.ather-hero-badge i { color: #FC013C; font-size: 10px; }
.ather-hero-badge .dot {
  width: 5px; height: 5px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  display: inline-block;
}

/* Main headline */
.ather-hero-text h1 {
  font-size: clamp(52px, 8vw, 108px);
  font-weight: 900;
  color: #fff;
  line-height: .92;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
  animation: fadeSlideUp .7s ease .1s both;
}
.ather-hero-text h1 .h-accent {
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.ather-hero-text .sub {
  font-size: clamp(14px, 1.4vw, 17px);
  color: rgba(255,255,255,.45);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 420px;
  animation: fadeSlideUp .7s ease .2s both;
}

/* CTA row */
.ather-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 52px;
  animation: fadeSlideUp .7s ease .3s both;
}

/* Spec strip */
.ather-hero-specs {
  display: flex;
  align-items: stretch;
  animation: fadeSlideUp .7s ease .4s both;
}
.ather-spec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 24px 0 0;
  margin-right: 24px;
  border-right: 1px solid rgba(255,255,255,.1);
  gap: 3px;
}
.ather-spec:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
.ather-spec .val {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ather-spec .lbl {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}

/* Right scooter area */
.ather-hero-panel-right {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 55%;
  overflow: hidden;
  z-index: 1;
}

/* Left + top edge blend into black background */
.ather-hero-panel-right::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, #000 0%, transparent 38%),
    linear-gradient(to bottom, #000 0%, transparent 18%);
  pointer-events: none;
  z-index: 2;
}

/* Bottom-edge vignette */
.ather-hero-panel-right::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to top, #000 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.ather-hero-panel-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 1;
  animation: floatScooter 6s ease-in-out infinite;
  filter: brightness(1.05) contrast(1.02);
}

@keyframes floatScooter {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

/* Scroll indicator */
.ather-hero-scroll {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.25);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  animation: bounceDown 2.5s ease-in-out infinite;
  z-index: 3;
  text-decoration: none;
}
.ather-hero-scroll .scroll-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
}

/* Keyframes */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounceDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ─── Product Showcase Strip (Ather-style) ──────────────── */
.ev-product-strip {
  background: #0E1120;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative; z-index: 3;
}
.ev-product-strip-inner {
  display: flex; overflow-x: auto; scrollbar-width: none;
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.ev-product-strip-inner::-webkit-scrollbar { display: none; }
.ev-strip-item {
  flex: 1; min-width: 170px;
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 16px; border-right: 1px solid rgba(255,255,255,.05);
  text-decoration: none; transition: background .2s; position: relative; cursor: pointer;
}
.ev-strip-item:last-child { border-right: none; }
.ev-strip-item::after {
  content: ''; position: absolute; bottom: 0; left: 18%; right: 18%;
  height: 2px; background: var(--vd-blue);
  transform: scaleX(0); transition: transform .25s ease;
}
.ev-strip-item:hover { background: rgba(255,255,255,.03); }
.ev-strip-item:hover::after { transform: scaleX(1); }
.ev-strip-item img {
  width: 120px; height: 90px;
  object-fit: cover; object-position: center;
  margin-bottom: 10px; border-radius: 8px;
  transition: transform .3s;
}
.ev-strip-item:hover img { transform: scale(1.06) translateY(-3px); }
.ev-strip-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.ev-strip-price { font-size: 11.5px; color: rgba(255,255,255,.4); }
.ev-strip-cta {
  font-size: 11px; color: var(--vd-blue); font-weight: 600;
  margin-top: 5px; opacity: 0; transition: opacity .2s;
}
.ev-strip-item:hover .ev-strip-cta { opacity: 1; }

/* ─── Ather-style section (full-width image + text) ──────── */
.ev-split-section {
  display: flex; align-items: stretch; min-height: 480px; overflow: hidden;
}
.ev-split-img { flex: 1; position: relative; min-height: 360px; overflow: hidden; }
.ev-split-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.ev-split-img.dark-bg { background: #111; }
.ev-split-img.off-bg  { background: #EDE8FF; }
.ev-split-content {
  flex: 1; padding: 64px 56px; display: flex;
  flex-direction: column; justify-content: center;
}
.ev-split-content.dark { background: #0a0a0a; }
.ev-split-content.light { background: #fff; }
.ev-split-content h2 { font-size: clamp(26px,3.5vw,40px); margin-bottom: 14px; }
.ev-split-content p  { font-size: 16px; line-height: 1.75; margin-bottom: 28px; }

/* ─── Ather-style vehicle card (homepage lineup) ─────────── */
.ather-vehicle-card {
  background: #111;
  border-radius: 20px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.06);
  transition: border-color .3s, transform .3s, box-shadow .3s;
  height: 100%; display: flex; flex-direction: column;
}
.ather-vehicle-card:hover {
  border-color: rgba(83,45,245,.35);
  box-shadow: 0 16px 48px rgba(83,45,245,.12);
  transform: translateY(-6px);
}
.ather-vehicle-card-img {
  background: #EDE8FF; padding: 0;
  display: block;
  position: relative; overflow: hidden; aspect-ratio: 4/3;
}
.ather-vehicle-card-img img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  padding: 0; margin: 0;
  display: block;
  transition: transform .4s;
}
.ather-vehicle-card:hover .ather-vehicle-card-img img { transform: scale(1.05); }
.ather-vehicle-card-badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--vd-blue); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
}
.ather-vehicle-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.ather-vehicle-card-name { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.ather-vehicle-specs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ather-spec-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 100px;
}
.ather-spec-chip i { color: var(--vd-cyan); font-size: 10px; }
.ather-vehicle-pricing {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ather-price-mrp {
  font-size: 12px; color: rgba(255,255,255,.3);
  text-decoration: line-through; margin-bottom: 2px;
}
.ather-price-main { font-size: 22px; font-weight: 900; color: #fff; line-height: 1.1; }
.ather-price-emi  { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 3px; }
.ather-vehicle-card-actions { display: flex; gap: 8px; margin-top: 14px; }
.ather-vehicle-card-actions .btn-ev { flex: 1; justify-content: center; }

/* ─── Stats bar (dark) ───────────────────────────────────── */
.ather-stats-bar {
  background: #111; padding: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ather-stats-inner {
  display: flex; max-width: 1280px; margin: 0 auto;
}
.ather-stat-item {
  flex: 1; padding: 36px 28px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.05);
}
.ather-stat-item:last-child { border-right: none; }
.ather-stat-num {
  font-size: clamp(30px,4vw,46px); font-weight: 900;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; margin-bottom: 8px;
}
.ather-stat-lbl { font-size: 13px; color: rgba(255,255,255,.4); font-weight: 500; }

/* ─── Responsive additions ───────────────────────────────── */
@media (max-width: 1199px) {
  .nav-mega-dropdown { min-width: 460px; }
}
@media (max-width: 991px) {
  .nav-mega-dropdown { display: none; }
  .ather-hero-panel-right { display: none; }
  .ather-hero-visual { position: static; transform: none; width: 100%; max-width: 100%; padding: 20px 0 0; }
  .ather-hero-inner { flex-direction: column; padding: 36px 0 20px; }
  .ather-hero-text { max-width: 100%; }
  .ather-hero-text h1 { letter-spacing: -2px; }
  .ather-hero-specs  { flex-wrap: wrap; }
  .ather-spec { padding: 12px 16px; }
  .ev-split-section { flex-direction: column; }
  .ev-split-img { min-height: 280px; }
  .ev-split-content { padding: 40px 28px; }
  .ather-stats-inner { flex-wrap: wrap; }
  .ather-stat-item { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,.05); }
}
@media (max-width: 767px) {
  .ather-hero-text h1 { font-size: clamp(38px,10vw,58px); letter-spacing: -1.5px; }
  .ather-hero-text .sub { font-size: 14px; }
  .ather-hero-actions .btn-ev { flex: 1; justify-content: center; }
  .ev-strip-item { min-width: 130px; padding: 16px 12px; }
  .ev-strip-item img { width: 80px; height: 60px; }
  .ather-spec .val { font-size: 18px; }
  .ather-stat-item { flex: 0 0 50%; }
}
@media (max-width: 480px) {
  .ather-hero-specs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 10px; }
  .ather-spec { border-right: 1px solid rgba(255,255,255,.06) !important; }
  .ather-spec:nth-child(2), .ather-spec:nth-child(4) { border-right: none !important; }
  .ather-spec:nth-child(1), .ather-spec:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.06); }
}

/* ═══════════════════════════════════════════════════════════════
   DARK-SITE GLOBAL — Ather-style dark overrides for public site
   All rules scoped to .dark-site to avoid affecting admin panel
   ═══════════════════════════════════════════════════════════════ */

/* ─── Global base ───────────────────────────────────────────── */
.dark-site {
  background: #000 !important;
  color: rgba(255,255,255,.82);
  --vd-bg:       #000;
  --vd-bg-2:     #0A0A0A;
  --vd-border:   rgba(255,255,255,.08);
  --vd-off:      #0A0A0A;
  --vd-surface:  #0D0D0D;
  --vd-text:     rgba(255,255,255,.82);
  --vd-text-2:   rgba(255,255,255,.65);
  --vd-text-muted: rgba(255,255,255,.4);
  --vd-muted:    rgba(255,255,255,.35);
  --vd-black:    #000;
  --vd-pink:     #532DF5;
}
.dark-site h1,.dark-site h2,.dark-site h3,
.dark-site h4,.dark-site h5,.dark-site h6 {
  color: #fff;
}
.dark-site p { color: rgba(255,255,255,.7); }
.dark-site a { color: rgba(255,255,255,.82); }
.dark-site a:hover { color: #fff; }
.dark-site hr { border-color: rgba(255,255,255,.08); }
.dark-site .text-muted { color: rgba(255,255,255,.45) !important; }
.dark-site .bg-white,.dark-site .bg-light { background: #0D0D0D !important; }
.dark-site section { background: #000; }

/* ─── Page hero (about, contact, finance, inner pages) ──────── */
.at-page-hero {
  background: #000;
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding: calc(var(--page-top) + 60px) 0 70px;
  position: relative;
  overflow: hidden;
}
.at-page-hero::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(83,45,245,.12) 0%, transparent 70%);
  pointer-events: none;
}
.at-page-hero .at-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 20px;
}
.at-page-hero h1 {
  font-size: clamp(52px, 8vw, 100px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: .95;
  color: #fff;
  margin-bottom: 28px;
}
.at-page-hero h1 span { color: var(--vd-blue, #532DF5); }
.at-page-hero .at-hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255,255,255,.55);
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: 36px;
}
.at-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── Section labels / eyebrows ─────────────────────────────── */
.at-section-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 14px;
}
.at-section-title {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 16px;
}
.at-section-sub {
  font-size: 16px;
  color: rgba(255,255,255,.5);
  max-width: 520px;
  line-height: 1.65;
}

/* ─── Vehicle listing hero ──────────────────────────────────── */
.at-listing-hero {
  background: #000;
  padding: calc(var(--page-top) + 14px) 0 50px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.at-listing-hero h1 {
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 12px;
}
.at-listing-hero p {
  font-size: 16px;
  color: rgba(255,255,255,.45);
  margin: 0;
}

/* ─── Filter sidebar ────────────────────────────────────────── */
.at-filter-sidebar {
  background: #0A0A0A;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 24px;
}
.at-filter-sidebar .filter-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 16px;
}
.at-filter-sidebar .filter-group { margin-bottom: 28px; }
.at-filter-sidebar .filter-group-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 10px;
}
.at-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: all .2s;
  margin: 0 6px 8px 0;
  background: transparent;
}
.at-filter-chip:hover,.at-filter-chip.active {
  border-color: #532DF5;
  color: #fff;
  background: rgba(83,45,245,.12);
}
.at-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 24px;
}
.at-sort-bar .results-count {
  font-size: 13px;
  color: rgba(255,255,255,.4);
}
.at-sort-select {
  background: #0D0D0D;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}

/* ─── Product card (Ather dark style) ───────────────────────── */
.at-product-card {
  background: #0D0D0D;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s, transform .25s;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.at-product-card:hover {
  border-color: rgba(255,255,255,.18);
  transform: translateY(-4px);
}
.at-product-card-img {
  background: radial-gradient(ellipse at 50% 65%, #1A1F30 0%, #0A0A0A 72%);
  display: block;
  padding: 0;
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.at-product-card-img img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  padding: 0; margin: 0;
  display: block;
  transition: transform .4s ease;
}
.at-product-card:hover .at-product-card-img img { transform: scale(1.04); }
.at-product-card-body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.at-product-card-cat {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 6px;
}
.at-product-card-name {
  font-size: 20px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.at-product-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.at-product-card-specs {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.at-product-card-spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.at-product-card-spec .sv {
  font-size: 15px; font-weight: 800;
  color: #fff;
}
.at-product-card-spec .sl {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.at-product-card-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.at-product-card-price .price-main {
  font-size: 22px; font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.at-product-card-price .price-mrp {
  font-size: 13px;
  color: rgba(255,255,255,.3);
  text-decoration: line-through;
}
.at-product-card-price .price-save {
  font-size: 12px;
  color: #4ADE80;
  font-weight: 700;
}
.at-product-card-actions {
  display: flex;
  gap: 10px;
}
.at-product-card-actions .btn-ev {
  flex: 1;
  justify-content: center;
  font-size: 13px;
  padding: 10px 16px;
}

/* ─── Dark overrides for existing old product-card ─────────── */
.dark-site .product-card {
  background: #0D0D0D !important;
  border-color: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.82) !important;
}
.dark-site .product-card:hover { border-color: rgba(255,255,255,.2) !important; }
.dark-site .product-card .product-name { color: #fff !important; }
.dark-site .product-card .product-price { color: #fff !important; }
.dark-site .product-card .product-mrp { color: rgba(255,255,255,.3) !important; }
.dark-site .product-card .product-image-wrap { background: #0A0A0A !important; }
.dark-site .product-card .btn-add-cart { background: rgba(255,255,255,.06) !important; color: #fff !important; border-color: rgba(255,255,255,.12) !important; }

/* ─── About / why cards ─────────────────────────────────────── */
.at-why-card {
  background: #0A0A0A;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 32px 28px;
  transition: border-color .25s, transform .25s;
  height: 100%;
}
.at-why-card:hover {
  border-color: rgba(255,255,255,.16);
  transform: translateY(-4px);
}
.at-why-icon {
  width: 52px; height: 52px;
  background: rgba(83,45,245,.15);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #532DF5;
  margin-bottom: 20px;
}
.at-why-title {
  font-size: 18px; font-weight: 800;
  color: #fff; margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.at-why-desc {
  font-size: 14px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
}

/* ─── Stats section ─────────────────────────────────────────── */
.at-stats-section {
  background: #000;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 64px 0;
}
.at-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
}
.at-stat-box {
  padding: 28px 32px;
  border-right: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.at-stat-box:last-child { border-right: none; }
.at-stat-num {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}
.at-stat-num span { color: var(--vd-blue, #532DF5); }
.at-stat-lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* ─── Mission / large quote section ────────────────────────── */
.at-mission {
  background: #000;
  padding: 100px 0;
  text-align: center;
}
.at-mission-quote {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1.1;
  max-width: 900px;
  margin: 0 auto 24px;
}
.at-mission-quote span { color: var(--vd-blue, #532DF5); }
.at-mission-sub {
  font-size: 16px;
  color: rgba(255,255,255,.45);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ─── Feature split section (Ather-style) ───────────────────── */
.at-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.at-feature.reverse { direction: rtl; }
.at-feature.reverse > * { direction: ltr; }
.at-feature-img {
  background: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 420px;
}
.at-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}
.at-feature-img.light-bg { background: #EDE8FF; }
.at-feature-content {
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 64px;
}
.at-feature-content .at-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 20px;
  display: block;
}
.at-feature-content h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 20px;
}
.at-feature-content p {
  font-size: 16px;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 440px;
}
.at-feature-list {
  list-style: none;
  padding: 0; margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.at-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.65);
}
.at-feature-list li::before {
  content: '';
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(83,45,245,.2);
  border: 1px solid #532DF5;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%232563EB' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ─── Finance page ──────────────────────────────────────────── */
.at-finance-hero {
  background: #000;
  padding: calc(var(--page-top) + 34px) 0 80px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.at-finance-hero h1 {
  font-size: clamp(44px, 7vw, 90px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: .95;
  margin-bottom: 20px;
}
.at-finance-hero p {
  font-size: 18px;
  color: rgba(255,255,255,.5);
  max-width: 500px;
  line-height: 1.6;
}
.at-dark-card {
  background: #0A0A0A;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 36px 32px;
}
.at-dark-card h3 {
  font-size: 22px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.at-emi-display {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.at-emi-display span { color: var(--vd-blue, #532DF5); }
.at-emi-label {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-bottom: 28px;
}
.at-range-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  margin-bottom: 6px;
}
.at-range-input {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  outline: none;
  margin-bottom: 24px;
}
.at-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #532DF5;
  cursor: pointer;
  border: 3px solid #000;
  box-shadow: 0 0 0 1px #532DF5;
}
.at-finance-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.at-finance-feature {
  background: #0A0A0A;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 24px 22px;
}
.at-finance-feature .ff-icon {
  font-size: 26px;
  margin-bottom: 12px;
  color: var(--vd-blue, #532DF5);
}
.at-finance-feature .ff-title {
  font-size: 16px; font-weight: 700;
  color: #fff; margin-bottom: 6px;
}
.at-finance-feature .ff-desc {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  line-height: 1.55;
}

/* ─── Contact page ──────────────────────────────────────────── */
.at-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.at-contact-item:last-child { border-bottom: none; }
.at-contact-icon {
  width: 46px; height: 46px;
  background: rgba(83,45,245,.12);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: #532DF5;
  flex-shrink: 0;
}
.at-contact-text .label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 4px;
}
.at-contact-text .value {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  font-weight: 500;
}
.dark-site .contact-form-card {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.82) !important;
}
.dark-site .why-card {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.82) !important;
}
.dark-site .why-card:hover { border-color: rgba(255,255,255,.18) !important; box-shadow: none !important; }
.dark-site .why-card h4 { color: #fff !important; }
.dark-site .why-card p  { color: rgba(255,255,255,.5) !important; }
.dark-site .why-icon {
  background: rgba(83,45,245,.12) !important;
  color: #532DF5 !important;
}
.dark-site .section-off { background: #000 !important; }
.dark-site .section-py, .dark-site .section-py-sm { background: #000; }
.dark-site .filter-sidebar {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.07) !important;
}
.dark-site .filter-sidebar .filter-title { color: rgba(255,255,255,.4) !important; }
.dark-site .filter-sidebar label { color: rgba(255,255,255,.6) !important; }
.dark-site .filter-sidebar .form-range { accent-color: #532DF5; }
.dark-site .filter-chip {
  background: transparent !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.6) !important;
}
.dark-site .filter-chip:hover, .dark-site .filter-chip.active {
  border-color: #532DF5 !important;
  background: rgba(83,45,245,.12) !important;
  color: #fff !important;
}
.dark-site .form-control,.dark-site .form-select {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.dark-site .form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.dark-site .form-control:focus,.dark-site .form-select:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: #532DF5 !important;
  box-shadow: 0 0 0 3px rgba(83,45,245,.2) !important;
  color: #fff !important;
}
.dark-site .form-label { color: rgba(255,255,255,.65) !important; }
.dark-site select option { background: #0D0D0D; color: #fff; }

/* ─── Footer dark overrides ─────────────────────────────────── */
.dark-site .site-footer {
  background: #000 !important;
  border-top: 1px solid rgba(255,255,255,.06);
}
.dark-site .footer-heading { color: #fff !important; }
.dark-site .footer-link { color: rgba(255,255,255,.45) !important; }
.dark-site .footer-link:hover { color: #fff !important; }
.dark-site .footer-bottom { border-top-color: rgba(255,255,255,.06) !important; }
.dark-site .footer-bottom p { color: rgba(255,255,255,.3) !important; }

/* ─── Pagination dark overrides ─────────────────────────────── */
.dark-site .pagination .page-link {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.65) !important;
}
.dark-site .pagination .page-link:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.dark-site .pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ─── FAQ dark overrides ────────────────────────────────────── */
.dark-site .accordion-item {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.07) !important;
  margin-bottom: 8px;
  border-radius: 12px !important;
  overflow: hidden;
}
.dark-site .accordion-button {
  background: #0A0A0A !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: none !important;
}
.dark-site .accordion-button:not(.collapsed) {
  background: rgba(83,45,245,.1) !important;
  color: #fff !important;
}
.dark-site .accordion-button::after { filter: invert(1); }
.dark-site .accordion-body {
  background: #0A0A0A !important;
  color: rgba(255,255,255,.55) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* ─── Breadcrumb dark ───────────────────────────────────────── */
.dark-site .breadcrumb-item { color: rgba(255,255,255,.4); }
.dark-site .breadcrumb-item a { color: rgba(255,255,255,.5); }
.dark-site .breadcrumb-item.active { color: rgba(255,255,255,.7); }
.dark-site .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.25); }

/* ─── Alert / badge dark ────────────────────────────────────── */
.dark-site .alert { border-radius: 10px; }
.dark-site .badge.bg-light { background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.8) !important; }
.dark-site .badge.bg-secondary { background: rgba(255,255,255,.08) !important; }

/* ─── Misc dark overrides ───────────────────────────────────── */
.dark-site .card {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.8) !important;
}
.dark-site .card-header {
  background: rgba(255,255,255,.04) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  color: #fff !important;
}
.dark-site .list-group-item {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.75) !important;
}
.dark-site .table { color: rgba(255,255,255,.75) !important; }
.dark-site .table th { color: rgba(255,255,255,.5) !important; border-bottom-color: rgba(255,255,255,.1) !important; }
.dark-site .table td { border-bottom-color: rgba(255,255,255,.06) !important; }
.dark-site .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.02) !important; }

/* ─── Responsive: feature & filter ─────────────────────────── */
@media (max-width: 991px) {
  .at-feature { grid-template-columns: 1fr; }
  .at-feature.reverse { direction: ltr; }
  .at-feature-content { padding: 40px 28px; }
  .at-feature-img { min-height: 300px; }
  .at-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .at-stat-box { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .at-finance-hero { padding: calc(var(--page-top) + 20px) 0 50px !important; }
  .at-finance-hero h1 { font-size: clamp(32px,8vw,52px); }
  .at-listing-hero { padding: calc(var(--page-top) + 10px) 0 32px; }
}
@media (max-width: 767px) {
  .at-page-hero { padding: calc(var(--nav-height) + 20px) 0 40px !important; min-height: auto !important; }
  .at-page-hero h1 { font-size: clamp(32px, 9vw, 56px) !important; }
  .at-page-hero .at-hero-sub { font-size: 15px !important; margin-bottom: 24px !important; }
  .at-hero-actions { flex-direction: column !important; }
  .at-hero-actions .btn-ev { text-align: center !important; justify-content: center !important; }
  .at-listing-hero { padding: calc(var(--nav-height) + 16px) 0 24px !important; }
  .at-listing-hero h1 { font-size: clamp(28px, 8vw, 44px) !important; }
  .at-section-title { font-size: clamp(26px, 7vw, 40px); }
  .at-dark-card { padding: 24px 20px; }
  .at-stats-grid { grid-template-columns: 1fr 1fr; }
  .at-feature { min-height: auto !important; }
  .at-feature-img { min-height: 220px !important; }
  .at-feature-content { padding: 28px 20px !important; }
  .at-feature-content h2 { font-size: clamp(24px, 7vw, 36px) !important; }
}

/* ─── Detail page dark overrides ───────────────────────────── */
.dark-site .detail-gallery-main {
  background: #0D0D0D !important;
  border-color: rgba(255,255,255,.07) !important;
}
.dark-site .detail-thumb {
  background: #0D0D0D !important;
  border-color: rgba(255,255,255,.1) !important;
}
.dark-site .detail-thumb:hover,
.dark-site .detail-thumb.active { border-color: #532DF5 !important; }
.dark-site .buy-panel-inner {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.08) !important;
}
.dark-site .detail-price-main { color: #fff !important; }
.dark-site .detail-price-mrp  { color: rgba(255,255,255,.3) !important; }
.dark-site .detail-price-off  { color: #FB923C !important; }
.dark-site .detail-price-save { color: #4ADE80 !important; }
.dark-site .detail-divider { border-top-color: rgba(255,255,255,.07) !important; }
.dark-site .trust-badge {
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(255,255,255,.08);
}
.dark-site .urgency-strip {
  background: rgba(251,146,60,.08) !important;
  border-color: rgba(251,146,60,.2) !important;
}
.dark-site .pincode-input {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.dark-site .pincode-input::placeholder { color: rgba(255,255,255,.3) !important; }
.dark-site .pincode-input:focus { border-color: #532DF5 !important; }
.dark-site .product-tabs {
  border-bottom-color: rgba(255,255,255,.08) !important;
  background: #0A0A0A !important;
}
.dark-site .product-tab-btn { color: rgba(255,255,255,.4) !important; background: none !important; }
.dark-site .product-tab-btn:hover { color: rgba(255,255,255,.75) !important; }
.dark-site .product-tab-btn.active { color: #532DF5 !important; border-bottom-color: #532DF5 !important; }
.dark-site .spec-table tr:nth-child(even) td { background: rgba(255,255,255,.03) !important; }
.dark-site .spec-table td { border-color: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.75) !important; }
.dark-site .spec-table td:first-child { color: rgba(255,255,255,.45) !important; }

/* ─── Search page dark overrides ───────────────────────────── */
.dark-site .search-hero-bg {
  background: #000 !important;
}
.dark-site .form-control-search {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* ─── Blog dark overrides ───────────────────────────────────── */
.dark-site .blog-card {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.07) !important;
}
.dark-site .blog-card:hover { border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
.dark-site .blog-card-image { background: #0D0D0D !important; }
.dark-site .blog-tag {
  background: rgba(83,45,245,.12) !important;
  color: #532DF5 !important;
}
.dark-site .blog-card-title { color: #fff !important; }
.dark-site .blog-card-title a { color: #fff !important; }
.dark-site .blog-card-excerpt { color: rgba(255,255,255,.45) !important; }
.dark-site .blog-card-meta { color: rgba(255,255,255,.3) !important; border-top-color: rgba(255,255,255,.07) !important; }

/* ─── Form controls (vd-specific) dark ─────────────────────── */
.dark-site .form-control-vd,
.dark-site .form-label-vd + .form-control-vd {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-radius: 10px;
}
.dark-site .form-control-vd::placeholder { color: rgba(255,255,255,.3) !important; }
.dark-site .form-control-vd:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: #532DF5 !important;
  box-shadow: 0 0 0 3px rgba(83,45,245,.2) !important;
}
.dark-site .form-label-vd { color: rgba(255,255,255,.55) !important; }

/* ─── Testimonial cards dark ────────────────────────────────── */
.dark-site .testimonial-card {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.07) !important;
}
.dark-site .testimonial-text { color: rgba(255,255,255,.65) !important; }
.dark-site .testimonial-name { color: #fff !important; }
.dark-site .testimonial-role { color: rgba(255,255,255,.35) !important; }

/* ─── Partner/bank logos dark ───────────────────────────────── */
.dark-site .partner-logo { filter: brightness(0) invert(1) opacity(.4); }
.dark-site .partner-logo:hover { opacity: .7; filter: brightness(0) invert(1) opacity(.7); }

/* ─── Dealer / franchise register forms dark ────────────────── */
.dark-site .register-form-card {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.08) !important;
}
.dark-site .dealer-hero-section { background: #000 !important; }

/* ─── CTA banner dark override ──────────────────────────────── */
.dark-site .cta-banner {
  background: linear-gradient(135deg, rgba(83,45,245,.2) 0%, rgba(83,45,245,.08) 100%) !important;
  border: 1px solid rgba(83,45,245,.25) !important;
}
.dark-site .cta-banner h2 { color: #fff !important; }
.dark-site .cta-banner p { color: rgba(255,255,255,.6) !important; }

/* ─── Track order dark ───────────────────────────────────────── */
.dark-site .track-card {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,.08) !important;
}
.dark-site .order-timeline { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.06) !important; }
.dark-site .timeline-step { border-color: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.4) !important; }
.dark-site .timeline-step.done { color: #4ADE80 !important; }
.dark-site .timeline-step .step-title { color: inherit !important; }
.dark-site .timeline-step .step-time { color: rgba(255,255,255,.3) !important; }

/* ─── FAQ dark overrides ─────────────────────────────────────── */
.dark-site .faq-item { border-bottom-color: rgba(255,255,255,.07) !important; }
.dark-site .faq-item:first-child { border-top-color: rgba(255,255,255,.07) !important; }
.dark-site .faq-question { color: rgba(255,255,255,.85) !important; }
.dark-site .faq-answer { color: rgba(255,255,255,.5) !important; background: rgba(255,255,255,.02) !important; }
.dark-site .faq-question .icon { background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.5) !important; }
.dark-site .faq-item.open .faq-question .icon { background: #532DF5 !important; color: #fff !important; }

/* ─── Blog show / content dark ───────────────────────────────── */
.dark-site .blog-content { color: rgba(255,255,255,.75) !important; }
.dark-site .blog-content h2,.dark-site .blog-content h3,.dark-site .blog-content h4 { color: #fff !important; }
.dark-site .blog-content a { color: #C4B7FF !important; }
.dark-site .blog-content blockquote {
  border-left-color: #532DF5 !important;
  background: rgba(83,45,245,.06) !important;
  color: rgba(255,255,255,.65) !important;
}
.dark-site .blog-content code { background: rgba(255,255,255,.06) !important; color: #86EFAC !important; }
.dark-site .blog-content pre { background: #161D24 !important; border-color: rgba(255,255,255,.08) !important; }
.dark-site .blog-content img { border-radius: 12px; }

/* ─── Service page dark ──────────────────────────────────────── */
.dark-site .page-hero + section { background: #000 !important; }

/* ─── Partner register / form section dark ───────────────────── */
.dark-site .form-control-vd[type=file] {
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.6) !important;
}
.dark-site h5 { color: #fff !important; }

/* ─── Section heading borders dark ──────────────────────────── */
.dark-site [style*="border-bottom:2px solid var(--vd-border)"],
.dark-site [style*="border-bottom: 2px solid var(--vd-border)"] {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.dark-site [style*="border-bottom:1px solid var(--vd-border)"],
.dark-site [style*="border-bottom: 1px solid var(--vd-border)"] {
  border-bottom-color: rgba(255,255,255,.07) !important;
}
.dark-site [style*="border-top:1px solid var(--vd-border)"],
.dark-site [style*="border-top: 1px solid var(--vd-border)"] {
  border-top-color: rgba(255,255,255,.07) !important;
}

/* ─── Bootstrap form controls dark override ──────────────────── */
.dark-site .form-control, .dark-site .form-select {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.dark-site .form-control:focus, .dark-site .form-select:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: #532DF5 !important;
  box-shadow: 0 0 0 3px rgba(83,45,245,.2) !important;
  color: #fff !important;
}
.dark-site .form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.dark-site .form-control:disabled, .dark-site .form-control[readonly] {
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.3) !important;
}
.dark-site .form-label, .dark-site .form-label.small { color: rgba(255,255,255,.5) !important; }
.dark-site .form-check-label { color: rgba(255,255,255,.65) !important; }
.dark-site .input-group-text {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.6) !important;
}

/* ─── User account pages dark ────────────────────────────────── */
.dark-site .user-account-section { background: #000 !important; }
.dark-site .card-header.bg-transparent { color: #fff !important; }
.dark-site .card-header h5, .dark-site .card-header h6 { color: #fff !important; }
.dark-site .alert-success { background: rgba(74,222,128,.08) !important; border-color: rgba(74,222,128,.2) !important; color: #4ADE80 !important; }
.dark-site .alert-danger { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.2) !important; color: rgba(255,100,100,.9) !important; }
.dark-site .alert-info { background: rgba(83,45,245,.08) !important; border-color: rgba(83,45,245,.2) !important; color: #C4B7FF !important; }
.dark-site .alert-warning { background: rgba(251,191,36,.08) !important; border-color: rgba(251,191,36,.2) !important; color: #FCD34D !important; }

/* ─── Navbar actions: hide CTA button below 768px ────────────── */
@media (max-width: 767px) {
  :root { --nav-height: 58px; --page-top: var(--nav-height); }   /* no announce bar */
  /* Announce bar hidden → navbar at top, reduced height */
  .vd-navbar { top: 0 !important; height: var(--nav-height) !important; }
  .vd-navbar .container { padding-left: 12px; padding-right: 12px; gap: 0; }
  .navbar-brand .brand-logo { height: 28px; }
  .navbar-brand span { font-size: 17px; }
  /* On phones, search + user icons live inside mobile drawer → hide */
  #searchWidget { display: none !important; }
  .nav-user-btn  { display: none !important; }
  /* Actions: just cart + hamburger */
  .navbar-actions { gap: 4px; }
  .nav-icon-btn { width: 36px; height: 36px; font-size: 14px; }
  .navbar-toggler { padding: 5px; gap: 4px; }
  .navbar-toggler span { width: 20px; }
  /* Hero padding: no announce bar offset */
  .at-page-hero { padding: calc(var(--nav-height) + 20px) 0 40px; }
  .page-hero     { padding: calc(var(--nav-height) + 20px) 0 44px; }
  .nav-search-box { width: calc(100vw - 32px); right: -8px; }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — VD Motors clean white/light mode
   Overrides all dark Ather-style hardcoded values
   ═══════════════════════════════════════════════════════════════ */

/* ─── Announce bar ──────────────────────────────────────────── */
.nav-announce {
  background: var(--vd-blue);
  border-bottom: none;
  color: rgba(255,255,255,.9);
}
.nav-announce a { color: #fff; font-weight: 800; text-decoration: underline; }

/* ─── Navbar ─────────────────────────────────────────────────── */
.nav-white {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.nav-scrolled {
  background: rgba(255,255,255,.98) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.08) !important;
}
.nav-transparent {
  background: rgba(255,255,255,.08);
}
.navbar-brand span { color: var(--vd-black); }
.nav-item .nav-link { color: #374151; }
.nav-item .nav-link:hover { color: var(--vd-blue); background: rgba(83,45,245,.05); }
.nav-item .nav-link.active { color: var(--vd-blue); font-weight: 700; }
.nav-item .nav-link.active::after { background: var(--vd-blue); }
.nav-icon-btn { color: #374151; }
.nav-icon-btn:hover { background: rgba(0,0,0,.05); color: var(--vd-blue); }
.cart-badge { border-color: #fff; }
.navbar-toggler span { background: rgba(0,0,0,.7); }
.navbar-toggler:hover { background: rgba(0,0,0,.06); }

/* Search dropdown light */
.nav-search-box {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
}
.nav-search-input {
  background: #F4F4F4;
  border: 1px solid #E6E9EC;
  color: #070707;
}
.nav-search-input::placeholder { color: rgba(0,0,0,.35); }
.nav-search-item:hover { background: rgba(0,0,0,.04); }
.nav-search-item .si-name { color: #070707; }
.nav-search-item .si-meta { color: rgba(0,0,0,.45); }
.nav-search-all { border-top: 1px solid rgba(0,0,0,.06); }
.nav-search-all a { color: var(--vd-blue); }

/* Mega dropdown light */
.nav-mega-dropdown {
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 24px 64px rgba(0,0,0,.1);
}
.nav-dropdown-product:hover { background: rgba(0,0,0,.04); }
.nav-dropdown-product .ndp-name { color: #070707; }
.nav-dropdown-product .ndp-price { color: rgba(0,0,0,.5); }
.nav-dropdown-links { border-left: 1px solid rgba(0,0,0,.08); }
.nav-dropdown-link { color: #374151; }
.nav-dropdown-link:hover { background: rgba(0,0,0,.04); color: var(--vd-blue); }

/* ─── Hero ──────────────────────────────────────────────────── */
.ather-hero {
  background: linear-gradient(135deg, #EDE8FF 0%, #F0F4FF 45%, #F8FAFC 100%);
}
.ather-hero-glow {
  background:
    radial-gradient(ellipse at 72% 50%, rgba(83,45,245,.1) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(6,182,212,.04) 0%, transparent 38%),
    radial-gradient(ellipse at 90% 10%, rgba(124,58,237,.04) 0%, transparent 32%);
}
.ather-hero::before {
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
}
.ather-hero-panel-right::before {
  background:
    linear-gradient(to right, #EDE8FF 0%, transparent 38%),
    linear-gradient(to bottom, #EDE8FF 0%, transparent 15%);
}
.ather-hero-panel-right::after {
  background: linear-gradient(to top, #F8FAFC 0%, transparent 100%);
}
.ather-hero-text h1 { color: #070707; }
.ather-hero-badge {
  background: rgba(83,45,245,.07);
  border: 1px solid rgba(83,45,245,.2);
  color: #374151;
}
.ather-hero-badge i { color: var(--vd-blue); }
.ather-hero-badge .dot { background: rgba(0,0,0,.18); }
.ather-hero-text .sub { color: #484848; }
.ather-spec { border-right: 1px solid rgba(0,0,0,.1); }
.ather-spec:last-child { border-right: none; }
.ather-spec .val { color: #070707; }
.ather-spec .lbl { color: rgba(0,0,0,.4); }
.ather-hero-scroll { color: rgba(0,0,0,.25); }
.ather-hero-scroll .scroll-line {
  background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent);
}

/* ─── Product strip ─────────────────────────────────────────── */
.ev-product-strip { background: #fff; border-bottom: 1px solid #E6E9EC; }
.ev-strip-item { border-right: 1px solid #E6E9EC; }
.ev-strip-item:hover { background: rgba(0,0,0,.02); }
.ev-strip-name { color: #070707; }
.ev-strip-price { color: rgba(0,0,0,.45); }
.ev-strip-item img {
  width: 120px; height: 90px;
  object-fit: cover; object-position: center;
  border-radius: 8px; margin-bottom: 10px;
  display: block; flex-shrink: 0;
}

/* ─── Vehicle cards ─────────────────────────────────────────── */
.ather-vehicle-card { background: #fff; border: 1px solid #E6E9EC; }
.ather-vehicle-card:hover { border-color: rgba(83,45,245,.35); box-shadow: 0 16px 48px rgba(83,45,245,.07); }
.ather-vehicle-card-img { background: #EDE8FF; }
.ather-vehicle-card-img img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0; margin: 0; display: block; }
.ather-vehicle-card-name { color: #070707; }
.ather-spec-chip { background: #EDE8FF; border: 1px solid #DDD6FE; color: #374151; }
.ather-spec-chip i { color: var(--vd-blue); }
.ather-vehicle-pricing { border-top: 1px solid #E6E9EC; }
.ather-price-mrp { color: rgba(0,0,0,.35); }
.ather-price-main { color: #070707; }
.ather-price-emi { color: rgba(0,0,0,.5); }

/* ─── Stats bar ─────────────────────────────────────────────── */
.ather-stats-bar { background: #EDE8FF; border-top: 1px solid #DDD6FE; border-bottom: 1px solid #DDD6FE; }
.ather-stat-item { border-right: 1px solid #DDD6FE; }
.ather-stat-item:last-child { border-right: none; }
.ather-stat-num {
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ather-stat-lbl { color: #374151; }

/* ─── Section classes ───────────────────────────────────────── */
.section-dark { background: #F4F4F4; }
.section-header.dark h2 { color: var(--vd-text); }
.section-header.dark p { color: var(--vd-text-2); }
.eyebrow-light { color: var(--vd-blue); }

/* ─── Split sections ────────────────────────────────────────── */
.ev-split-content.dark { background: #fff; }
.ev-split-img.off-bg  { background: #EDE8FF; padding: 0; }
.ev-split-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Why card with image (homepage) */
.why-card-v2 {
  background: #fff;
  border-radius: var(--vd-radius-lg);
  border: 1px solid var(--vd-border);
  overflow: hidden;
  transition: all .3s;
  height: 100%;
}
.why-card-v2:hover { transform: translateY(-4px); box-shadow: var(--vd-shadow-md); border-color: rgba(83,45,245,.25); }
.why-card-v2 .wc-img {
  width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #EDE8FF;
}
.why-card-v2 .wc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s; }
.why-card-v2:hover .wc-img img { transform: scale(1.04); }
.why-card-v2 .wc-body { padding: 22px 24px 24px; }
.why-card-v2 .wc-icon { font-size: 22px; color: var(--vd-blue); margin-bottom: 10px; }
.why-card-v2 h4 { font-size: 17px; font-weight: 800; margin-bottom: 8px; color: var(--vd-text); }
.why-card-v2 p  { font-size: 13.5px; color: var(--vd-text-2); line-height: 1.65; margin: 0; }

/* Partner card with image */
.partner-card-img-wrap {
  width: 100%; aspect-ratio: 3/2; overflow: hidden; border-radius: 12px; margin-bottom: 20px;
  background: #EDE8FF;
}
.partner-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.partner-card:hover .partner-card-img-wrap img { transform: scale(1.04); }

/* ─── Page heroes ───────────────────────────────────────────── */
.at-page-hero { background: #EDE8FF; }
.at-page-hero::before { background: radial-gradient(ellipse, rgba(83,45,245,.07) 0%, transparent 70%); }
.at-page-hero .at-eyebrow { color: #6B7280; }
.at-page-hero h1 { color: #070707; }
.at-page-hero h1 span { color: var(--vd-blue); }
.at-page-hero .at-hero-sub { color: #484848; }

.at-listing-hero { background: #EDE8FF; border-bottom: 1px solid #E6E9EC; }
.at-listing-hero h1 { color: #070707; }
.at-listing-hero p  { color: #6B7280; }

.page-hero { background: #EDE8FF; }
.page-hero::before { background: radial-gradient(circle, rgba(83,45,245,.07) 0%, transparent 70%); }
.page-hero h1 { color: #070707; }
.page-hero p  { color: #484848; }
.breadcrumb-vd a { color: #6B7280; }
.breadcrumb-vd a:hover { color: var(--vd-blue); }
.breadcrumb-vd span { color: #A3AFB7; }
.breadcrumb-vd .current { color: var(--vd-blue); }

.listing-hero { background: #EDE8FF; }
.listing-hero h1 { color: #070707; }
.listing-hero p  { color: #6B7280; }

/* ─── Ather product cards ───────────────────────────────────── */
.at-product-card { background: #fff; border: 1px solid #E6E9EC; }
.at-product-card:hover { border-color: rgba(83,45,245,.3); }
.at-product-card-img { background: #EDE8FF; display: block; }
.at-product-card-img img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0; margin: 0; display: block; }
.at-product-card-cat { color: #A3AFB7; }
.at-product-card-name { color: #070707; }
.at-product-card-desc { color: #484848; }
.at-product-card-spec .sv { color: #070707; }
.at-product-card-spec .sl { color: #6B7280; }
.at-product-card-price .price-main { color: #070707; }
.at-product-card-price .price-mrp { color: #A3AFB7; }

/* ─── Why/feature cards ─────────────────────────────────────── */
.at-why-card { background: #fff; border: 1px solid #E6E9EC; }
.at-why-card:hover { border-color: rgba(83,45,245,.25); }
.at-why-title { color: #070707; }
.at-why-desc { color: #484848; }

/* ─── Stats section ─────────────────────────────────────────── */
.at-stats-section { background: #EDE8FF; border-top: 1px solid #DDD6FE; border-bottom: 1px solid #DDD6FE; }
.at-stat-box { border-right: 1px solid #DDD6FE; }
.at-stat-num { color: #070707; }
.at-stat-lbl { color: #6B7280; }

/* ─── Mission section ───────────────────────────────────────── */
.at-mission { background: #fff; }
.at-mission-quote { color: #070707; }
.at-mission-sub { color: #484848; }

/* ─── Feature splits ────────────────────────────────────────── */
.at-feature { border-bottom: 1px solid #E6E9EC; }
.at-feature-img { background: #EDE8FF; }
.at-feature-img.light-bg { background: #EDE8FF; }
.at-feature-content { background: #fff; }
.at-feature-content .at-eyebrow { color: #6B7280; }
.at-feature-content h2 { color: #070707; }
.at-feature-content p { color: #484848; }
.at-feature-list li { color: #374151; }
.at-feature-img img { object-fit: cover; padding: 0; }

/* ─── Finance page ──────────────────────────────────────────── */
.at-finance-hero { background: #EDE8FF; border-bottom: 1px solid #E6E9EC; }
.at-finance-hero h1 { color: #070707; }
.at-finance-hero p  { color: #484848; }
.at-dark-card { background: #fff; border: 1px solid #E6E9EC; }
.at-dark-card h3 { color: #070707; }
.at-emi-display { color: #070707; }
.at-emi-label { color: #6B7280; }
.at-range-label { color: #6B7280; }
.at-range-input { background: #E6E9EC; }
.at-range-input::-webkit-slider-thumb { border-color: #fff; }
.at-finance-feature { background: #fff; border: 1px solid #E6E9EC; }
.at-finance-feature .ff-title { color: #070707; }
.at-finance-feature .ff-desc { color: #484848; }

/* ─── Contact items ─────────────────────────────────────────── */
.at-contact-item { border-bottom: 1px solid #E6E9EC; }
.at-contact-text .label { color: #6B7280; }
.at-contact-text .value { color: #070707; }

/* ─── Filter sidebar ────────────────────────────────────────── */
.at-filter-sidebar { background: #fff; border: 1px solid #E6E9EC; }
.at-filter-sidebar .filter-title { color: #6B7280; }
.at-filter-sidebar .filter-group-label { color: #A3AFB7; }
.at-filter-chip { border: 1px solid #E6E9EC; color: #374151; background: #fff; }
.at-sort-bar { border-bottom: 1px solid #E6E9EC; }
.at-sort-bar .results-count { color: #6B7280; }
.at-sort-select { background: #fff; border: 1px solid #E6E9EC; color: #070707; }

/* ─── Section labels ────────────────────────────────────────── */
.at-section-eyebrow { color: #6B7280; }
.at-section-title { color: #070707; }
.at-section-sub { color: #484848; }

/* ─── Spec strip ─────────────────────────────────────────────── */
.spec-strip { background: #EDE8FF; }
.spec-strip-item { color: #070707; }
.spec-strip-item .icon { background: #DDD6FE; color: var(--vd-blue); }
.spec-strip-item .value { color: #070707; }
.spec-strip-item .label { color: #6B7280; }

/* ─── btn-ev-outline fix for light sections ─────────────────── */
/* btn-ev-outline was for dark bg; on light sections use outline-dark */
.section-off .btn-ev-outline,
.ather-hero .btn-ev-outline,
.section-white .btn-ev-outline {
  color: var(--vd-text);
  border-color: var(--vd-border);
}
.section-off .btn-ev-outline:hover,
.ather-hero .btn-ev-outline:hover,
.section-white .btn-ev-outline:hover {
  background: var(--vd-off);
  border-color: var(--vd-blue);
  color: var(--vd-blue);
}

/* ─── Responsive stat bar light ─────────────────────────────── */
@media (max-width: 991px) {
  .ather-stat-item { border-bottom: 1px solid #DDD6FE; }
}

/* ─── Responsive feature light ──────────────────────────────── */
@media (max-width: 991px) {
  .at-stat-box { border-bottom: 1px solid #DDD6FE; }
}

/* ─── Global image cover safety-net ─────────────────────────
   Any image inside a named card/frame container that doesn't
   already have object-fit set gets cover by default.          */

/* Popup banner — fill modal frame */
.popup-overlay img,
.popup-banner img {
  width: 100%; height: auto; max-height: 75vh;
  object-fit: cover; object-position: center;
  border-radius: inherit; display: block;
}

/* Blog card hover zoom — already has cover, ensure no overflow */
.blog-card-image { border-radius: var(--vd-radius-lg) var(--vd-radius-lg) 0 0; }

/* Testimonial avatars */
.testimonial-avatar {
  width: 42px; height: 42px;
  border-radius: 50%; object-fit: cover; object-position: center;
  flex-shrink: 0;
}

/* Category icon images (circular) */
.category-icon img,
.cat-icon img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 50%;
}

/* ev-split-img already fixed in base rules above */

/* Feature/offer banner rows */
.feat-banner-img { overflow: hidden; position: relative; }
.feat-banner-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Partner/dealer card images */
.partner-card-img { overflow: hidden; position: relative; }
.partner-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Why-choose-us cards */
.wc-img { overflow: hidden; }
.wc-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Offer strip banners */
.offer-banner img,
.offer-card img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Admin banner index thumbnails */
.banner-thumb { overflow: hidden; }
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════════════════════════
   GLOBAL MOBILE RESPONSIVENESS — PUBLIC + PARTNER PANELS
   ════════════════════════════════════════════════════════════ */

/* ── Tablet (≤991px) ─────────────────────────────────────── */
@media (max-width: 991px) {
  /* Product detail: stack image + info */
  .pd-main-wrap { flex-direction: column !important; }
  .pd-img-col, .pd-info-col { width: 100% !important; }
  .pd-img-sticky { position: static !important; }

  /* Split sections stack */
  .ev-split-section { flex-direction: column !important; }
  .ev-split-img { min-height: 260px !important; }
  .ev-split-content { padding: 32px 24px !important; }

  /* Spec tabs / variant pickers */
  .spec-tab-list { overflow-x: auto; white-space: nowrap; }

  /* B2B cart two-panel → stack */
  .b2b-cart-wrap { flex-direction: column !important; }

  /* Checkout grid */
  .checkout-grid { grid-template-columns: 1fr !important; }

  /* Invoice page on mobile */
  .inv-meta  { grid-template-columns: 1fr !important; }
  .inv-dates { grid-template-columns: 1fr 1fr !important; }

  /* User order detail */
  .order-detail-grid { flex-direction: column !important; }

  /* Partners section */
  .ev-split-section .ev-split-img { order: -1; }
}

/* ── Mobile (≤767px) ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Public nav: remove announce bar on tiny screens */
  .nav-announce { display: none !important; }

  /* Hero section: single column */
  .ather-hero-inner { flex-direction: column !important; padding: 28px 0 16px !important; }
  .ather-hero-panel-right { display: none !important; }
  .ather-hero-text h1 { font-size: clamp(28px,8vw,44px) !important; letter-spacing: -1px !important; }
  .ather-hero-badge { flex-wrap: wrap; gap: 4px; }
  .ather-hero-badge .dot { display: none; }
  .ather-hero-actions { flex-direction: column; }
  .ather-hero-actions .btn-ev { text-align: center; justify-content: center; }
  .ather-hero-specs { grid-template-columns: 1fr 1fr; }

  /* Product strip: horizontal scroll */
  .ev-product-strip-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .ev-strip-item { min-width: 110px; }

  /* Product cards grid: 2 columns on phones */
  .at-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .at-product-card-img { aspect-ratio: 1/1 !important; }

  /* Vehicle cards: 1 column on phones */
  .ather-vehicle-cards-grid { grid-template-columns: 1fr !important; }

  /* Why cards: 1 column */
  .why-cards-row { --bs-gutter-x: 12px; }

  /* Split section: compact */
  .ev-split-content { padding: 24px 16px !important; }
  .ev-split-section { gap: 0 !important; }

  /* Product detail */
  .pd-gallery-main { height: 240px !important; }
  .pd-thumb-row { overflow-x: auto; white-space: nowrap; }
  .pd-thumb { display: inline-block; width: 60px; height: 48px; }

  /* Spec table */
  .spec-section { padding: 16px !important; }

  /* Checkout */
  .checkout-step-header { font-size: 13px; }
  .checkout-step-body { padding: 14px !important; }
  .summary-item-img { width: 48px !important; height: 38px !important; }

  /* User cart */
  .cart-item { flex-direction: column; gap: 10px; }
  .cart-item-img { width: 80px !important; height: 64px !important; }

  /* Modals: full-screen on mobile */
  .modal-dialog:not(.modal-sm) { margin: 0; max-width: 100%; min-height: 100vh; }
  .modal-content { border-radius: 0; min-height: 100vh; }

  /* Tables: horizontal scroll */
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Filter forms: stack inputs */
  .filter-form .row { flex-direction: column; gap: 8px; }
  .filter-form .col-md-3,
  .filter-form .col-md-2 { width: 100% !important; max-width: 100% !important; }

  /* Invoice template compact */
  .inv-head { flex-direction: column; gap: 12px; padding: 16px !important; }
  .inv-meta  { grid-template-columns: 1fr !important; gap: 12px !important; }
  .inv-dates { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .inv-bottom { grid-template-columns: 1fr !important; }
  .inv-items  { padding: 0 12px !important; }
  .inv-title-word { font-size: 20px !important; letter-spacing: 1px !important; }
  .inv-logo { height: 38px !important; }

  /* B2B cart: stack panels */
  [style*="col-lg-7"], [style*="col-lg-5"] { width: 100% !important; }

  /* Footer: stack columns */
  .vd-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px; }
  .vd-footer-brand { grid-column: 1 / -1; }

  /* Buttons full-width CTA on mobile */
  .btn-ev-lg { width: 100%; justify-content: center; }
  .ather-hero-actions .btn-ev-lg { width: 100%; }

  /* Pagination */
  .pagination { flex-wrap: wrap; gap: 3px; }

  /* Touch target minimum — only interactive controls */
  .btn-ev, button.btn-ev { min-height: 40px; }
  .nav-link, .dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .sidebar-item { padding: 12px 16px; min-height: 44px; }

  /* Hero banner: full cover, no side bleed */
  .hero-banner-section { margin-left: 0; margin-right: 0; }
  .hero-banner-img-desktop, .hero-banner-img-mobile { object-fit: cover; width: 100%; }

  /* Feature split section: stack, reduce height */
  .ev-split-section { flex-direction: column !important; }
  .ev-split-img { min-height: 200px !important; height: 200px !important; overflow: hidden !important; }

  /* Why-card v2: reduce image area on mobile */
  .why-card-v2 .wc-img { aspect-ratio: 16/9 !important; }

  /* Stats bar */
  .ather-stat-item { flex: 0 0 50% !important; padding: 20px 12px !important; }

  /* EMI / finance section */
  .emi-section { padding: 56px 0 !important; }
  .emi-cards-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .emi-highlight { font-size: clamp(28px, 8vw, 44px) !important; }
  .emi-card { padding: 16px !important; }
  .emi-card .emi-val { font-size: 22px !important; }

  /* Contact / booking forms: full-width inputs */
  .col-md-6, .col-md-4, .col-md-3 { width: 100% !important; max-width: 100% !important; }

  /* Category strip */
  .cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .cat-icon { width: 60px !important; height: 60px !important; }

  /* Section container: ensure readable margins on small phones */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Section header: reduce large bottom gap */
  .section-header { margin-bottom: 28px !important; }
  .section-header p { max-width: 100%; }

  /* Vehicle card: compact for 2-column col-6 layout */
  .ather-vehicle-card-body { padding: 14px 12px 14px !important; }
  .ather-vehicle-card-name { font-size: 14px !important; margin-bottom: 8px !important; line-height: 1.3 !important; }
  .ather-vehicle-specs { gap: 4px !important; margin-bottom: 10px !important; }
  .ather-spec-chip { font-size: 10px !important; padding: 3px 6px !important; gap: 3px !important; }
  .ather-vehicle-pricing { margin-bottom: 8px; }
  .ather-price-main { font-size: 16px !important; }
  .ather-price-mrp  { font-size: 11px !important; }
  .ather-price-emi  { font-size: 10px !important; }
  .ather-vehicle-card-actions { flex-direction: column !important; gap: 5px !important; margin-top: 10px !important; }
  .ather-vehicle-card-actions .btn-ev { font-size: 12px !important; padding: 7px 8px !important; min-height: 36px; }

  /* Hero specs: 2×2 grid */
  .ather-hero-specs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ather-spec { border-right: none !important; padding-right: 0 !important; margin-right: 0 !important; }

  /* Product strip: smaller items */
  .ev-strip-item { min-width: 110px !important; padding: 14px 10px !important; }
  .ev-strip-name  { font-size: 11px !important; }
  .ev-strip-price { font-size: 11px !important; }

  /* Feature split mini-stats: wrap nicely */
  .ev-split-content { padding: 28px 20px !important; }

  /* Why card: reduce gap inside */
  .why-card-v2 .wc-body { padding: 16px 14px 18px !important; }
  .why-card-v2 h4 { font-size: 14px !important; margin-bottom: 6px !important; }
  .why-card-v2 p  { font-size: 12px !important; }

  /* CTA section: less padding on mobile */
  .cta-section { padding: 60px 0 !important; min-height: auto !important; }

  /* FAQ section: gap between header and items */
  .faq-item { padding: 4px 0; }
  .faq-question { font-size: 15px !important; padding: 14px 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   VARIANT SELECTOR MODAL — Premium Design
   ═══════════════════════════════════════════════════════════ */

/* ── Modal card ───────────────────────────── */
#variantModal .modal-content {
  border-radius: 22px !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.22) !important;
}

/* ── Gradient header ──────────────────────── */
.vm-header {
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  padding: 18px 22px 14px;
}
.vm-progress-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.vm-prog-step {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.vm-prog-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(255,255,255,.45);
  transition: .25s; background: transparent;
}
.vm-prog-step.active .vm-prog-dot {
  border-color: #fff;
  background: rgba(255,255,255,.2);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}
.vm-prog-step.done .vm-prog-dot {
  border-color: #fff; background: #fff; color: #532DF5;
}
.vm-prog-label {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.45); transition: .25s;
}
.vm-prog-step.active .vm-prog-label,
.vm-prog-step.done .vm-prog-label { color: rgba(255,255,255,.9); }
.vm-prog-line {
  flex: 1; height: 2px; background: rgba(255,255,255,.2);
  margin: 0 6px 14px; border-radius: 2px; transition: background .3s;
}
.vm-prog-line.done { background: rgba(255,255,255,.65); }
.vm-header-title {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.vm-header-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 3px;
}
.vm-header-title h5 {
  color: #fff; font-weight: 800; font-size: 17px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
.vm-header-title p { color: rgba(255,255,255,.65); font-size: 12px; margin: 3px 0 0; }

/* ── Loading / Error ──────────────────────── */
.vm-loading { text-align: center; padding: 44px 24px; }
.vm-spinner { color: #532DF5; width: 2rem; height: 2rem; }
.vm-loading p { color: #9CA3AF; font-size: 13px; margin-top: 14px; margin-bottom: 0; }
.vm-error { text-align: center; padding: 44px 24px; }
.vm-error i { font-size: 32px; color: #DC2626; display: block; margin-bottom: 12px; }
.vm-error p { color: #DC2626; font-size: 13px; margin: 0; }

/* ── Body ─────────────────────────────────── */
.vm-body { padding: 22px 22px 6px; }
.vm-section { margin-bottom: 22px; }
.vm-section-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 12px; font-weight: 700; color: #374151;
  text-transform: uppercase; letter-spacing: .07em;
}
.vm-sec-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.vm-sec-dot-1 { background: #532DF5; }
.vm-sec-dot-2 { background: #10B981; }
.vm-sec-dot-3 { background: #F59E0B; }
.vm-sec-hint {
  font-size: 10px; font-weight: 500; color: #9CA3AF;
  text-transform: none; letter-spacing: 0; margin-left: auto;
}
.vm-color-chosen {
  font-size: 11px; color: #10B981; font-weight: 700;
  text-transform: none; letter-spacing: 0;
}

/* ── Range option cards ───────────────────── */
.vm-range-list { display: flex; flex-direction: column; gap: 10px; }
.vm-range-opt {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 16px;
  border: 2px solid #E5E7EB; border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.vm-range-opt:hover {
  border-color: #532DF5; background: #FAFAFE;
  transform: translateY(-2px); box-shadow: 0 4px 16px rgba(83,45,245,.12);
}
.vm-range-opt.selected {
  border-color: #532DF5;
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(83,45,245,.35);
  transform: translateY(-2px);
}
.vm-range-left { display: flex; align-items: center; gap: 13px; }
.vm-range-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(83,45,245,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #532DF5; flex-shrink: 0; transition: .2s;
}
.vm-range-opt.selected .vm-range-icon { background: rgba(255,255,255,.22); color: #fff; }
.vm-range-km { font-size: 16px; font-weight: 800; line-height: 1.1; }
.vm-range-desc { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
.vm-range-opt.selected .vm-range-desc { color: rgba(255,255,255,.7); }
.vm-range-price { font-size: 16px; font-weight: 800; color: #532DF5; white-space: nowrap; transition: color .2s; }
.vm-range-opt.selected .vm-range-price { color: #fff; }
.vm-range-check { font-size: 18px; color: #fff; display: none; margin-left: 6px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.2)); }
.vm-range-opt.selected .vm-range-check { display: block; }

/* Most Popular ribbon */
.vm-popular-badge {
  position: absolute; top: 0; right: 0;
  background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%);
  color: #fff; font-size: 8px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px 4px 10px; border-radius: 0 12px 0 12px;
}

/* ── Color section animated reveal ───────── */
.vm-color-slide {
  overflow: hidden; max-height: 0; opacity: 0; margin-bottom: 0 !important;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease .05s, margin-bottom .4s;
}
.vm-color-slide.open { max-height: 280px; opacity: 1; margin-bottom: 22px !important; }

/* ── Color grid ───────────────────────────── */
.vm-color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.vm-color-opt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: none; background: transparent; cursor: pointer;
  padding: 8px 10px; border-radius: 12px;
  transition: background .15s, transform .15s; min-width: 54px;
}
.vm-color-opt:hover { background: #F3F4F6; transform: translateY(-2px); }
.vm-color-opt.selected { background: #F0EFFF; }
.vm-color-circle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center; transition: .15s;
}
.vm-color-opt.selected .vm-color-circle {
  border-color: #532DF5;
  box-shadow: 0 0 0 3px rgba(83,45,245,.22), 0 2px 6px rgba(0,0,0,.2);
}
.vm-color-check { display: none; color: #fff; font-size: 13px; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.vm-color-opt.selected .vm-color-check { display: block; }
.vm-color-name { font-size: 10px; color: #6B7280; font-weight: 600; white-space: nowrap; }
.vm-color-opt.selected .vm-color-name { color: #532DF5; font-weight: 700; }

/* ── Quantity stepper ─────────────────────── */
.vm-qty-row {
  display: flex; align-items: center; gap: 0;
  background: #F9FAFB; border: 1.5px solid #E5E7EB;
  border-radius: 12px; overflow: hidden; width: fit-content;
}
.vm-qty-row button {
  width: 44px; height: 44px; border: none; background: transparent;
  font-size: 20px; cursor: pointer; color: #532DF5; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.vm-qty-row button:hover { background: #EDE8FF; }
.vm-qty-row input {
  width: 52px; height: 44px; border: none; background: transparent;
  text-align: center; font-size: 15px; font-weight: 800; color: #111827; outline: none;
}

/* ── Summary bar ──────────────────────────── */
.vm-summary-bar {
  background: linear-gradient(135deg, rgba(83,45,245,.07) 0%, rgba(252,1,60,.05) 100%);
  border: 1.5px solid rgba(83,45,245,.2); border-radius: 12px;
  padding: 11px 14px; font-size: 13px; color: #532DF5; font-weight: 700;
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}

/* ── Footer ───────────────────────────────── */
.vm-footer {
  padding: 10px 22px 22px; display: flex; gap: 10px;
  border-top: 1px solid #F3F4F6;
}
.vm-cancel-btn {
  flex: 1; padding: 12px 16px;
  border: 1.5px solid #E5E7EB; border-radius: 12px;
  background: #fff; color: #6B7280; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.vm-cancel-btn:hover { border-color: #9CA3AF; color: #374151; }

/* ── Add to Cart button ───────────────────── */
.vm-add-btn {
  flex: 2; padding: 12px 20px;
  background: linear-gradient(135deg, #532DF5 0%, #FC013C 100%);
  border: none; border-radius: 12px; color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity .2s, transform .15s, box-shadow .15s;
}
.vm-add-btn:disabled { background: #E5E7EB; color: #9CA3AF; cursor: not-allowed; }
.vm-add-btn:not(:disabled):hover {
  opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(83,45,245,.4);
}

/* ── Extra small (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  /* Product cards: 1 column on very small phones */
  .at-product-grid { grid-template-columns: 1fr !important; }

  /* Hero text */
  .ather-hero-text h1 { font-size: 26px !important; }

  /* Spec grid */
  .ather-hero-specs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ather-spec { padding: 10px 8px !important; border-radius: 8px !important; }
  .ather-spec .val { font-size: 18px !important; }

  /* Footer: single column */
  .vd-footer-grid { grid-template-columns: 1fr !important; }

  /* Section headings */
  .section-header h2 { font-size: clamp(22px, 6vw, 32px); }

  /* EMI section */
  .emi-highlight { font-size: clamp(32px, 8vw, 48px) !important; }

  /* Partner cards */
  .partner-card { padding: 20px 16px !important; }
  .partner-card-img-wrap { height: 140px !important; }

  /* Product card: stack action buttons on very small phones */
  .at-product-card-actions { flex-direction: column !important; gap: 6px !important; }
  .at-product-card-body { padding: 14px 16px 16px !important; }

  /* Stat bar */
  .ather-stats-inner { grid-template-columns: 1fr 1fr; gap: 0; }
  .ather-stat-item:nth-child(3),
  .ather-stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); }
}