/* ═══════════════════════════════════════════════════════════
   Cars page — showroom hero + amber premium tier (CSS only)
   ═══════════════════════════════════════════════════════════ */

html[data-route="cars"] body {
  background-color: #07080c !important;
  background-image:
    radial-gradient(1000px 560px at 15% -5%, rgba(249, 115, 22, 0.08), transparent 55%),
    radial-gradient(800px 480px at 85% 8%, rgba(251, 146, 60, 0.05), transparent 52%) !important;
}

html[data-route="cars"] .nav-link.active {
  color: #fed7aa !important;
}

html[data-route="cars"] .nav-link.active::after {
  background: linear-gradient(90deg, #f97316, #fdba74) !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.35) !important;
}

/* ── Hero — balanced height (not full-screen, not cramped) ── */
html[data-route="cars"] #root main > div[class*="min-h-screen"] {
  padding-top: 0 !important;
}

html[data-route="cars"] #root main > div > section:first-of-type {
  position: relative;
  isolation: isolate;
  min-height: min(44vh, 400px);
  display: flex;
  align-items: center;
  padding-top: 1.75rem !important;
  padding-bottom: 2rem !important;
  border-top-color: transparent !important;
  overflow: hidden;
}

html[data-route="cars"] #root main > div > section:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 7, 12, 0.72) 0%, rgba(6, 7, 12, 0.28) 44%, rgba(6, 7, 12, 0.88) 100%),
    radial-gradient(ellipse 55% 60% at 50% 42%, rgba(6, 7, 12, 0.15), transparent 70%),
    radial-gradient(760px 420px at 18% 55%, rgba(249, 115, 22, 0.09), transparent 58%),
    radial-gradient(680px 380px at 82% 45%, rgba(251, 146, 60, 0.06), transparent 55%),
    url("/assets/hero/cars-hero.webp") center 42% / cover no-repeat;
  animation: sv-cars-hero-drift 34s ease-in-out infinite alternate;
  transform-origin: center center;
}

html[data-route="cars"] #root main > div > section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(6, 7, 12, 0.12) 55%,
    rgba(6, 7, 12, 0.55) 100%
  );
}

html[data-route="cars"] #root main > div > section:first-of-type > .max-w-7xl {
  position: relative;
  z-index: 2;
  width: 100%;
}

html[data-route="cars"] #root main > div > section:first-of-type h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
  line-height: 1.08 !important;
  margin-bottom: 0.75rem !important;
}

html[data-route="cars"] #root main > div > section:first-of-type h1 span.text-amber-500 {
  background: linear-gradient(135deg, #ffedd5 0%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: none;
}

html[data-route="cars"] #root main > div > section:first-of-type p {
  margin-bottom: 0 !important;
}

html[data-route="cars"] #root main > div > section:first-of-type [class*="mb-6"] {
  margin-bottom: 1.25rem !important;
}

html[data-route="cars"] #root main > div > section:first-of-type [class*="bg-amber-500/10"] {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(251, 146, 60, 0.28) !important;
  backdrop-filter: blur(8px);
}

html[data-route="cars"] #root main > div > section:first-of-type .text-amber-400,
html[data-route="cars"] #root main > div > section:first-of-type .text-amber-500 {
  color: #fb923c !important;
}

/* Search bar — moderate spacing below hero */
html[data-route="cars"] #root main > div > section:nth-of-type(2) {
  padding-bottom: 1rem !important;
}

/* Catalog sections — full-width blocks, left-aligned carousels */
html[data-route="cars"] #root main > div > section:nth-of-type(3) {
  display: block !important;
  padding-top: 0.5rem !important;
  padding-bottom: 3rem !important;
}

html[data-route="cars"] #root main > div > section:nth-of-type(3) > .max-w-7xl {
  width: 100% !important;
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html[data-route="cars"] #root main > div > section:nth-of-type(3) > .max-w-7xl + .max-w-7xl {
  margin-top: 2.25rem !important;
}

html[data-route="cars"] #root main > div > section:nth-of-type(3) .max-w-7xl > div:last-child {
  justify-content: flex-start !important;
}

@keyframes sv-cars-hero-drift {
  0% { transform: scale(1.03); }
  100% { transform: scale(1.07); }
}

@media (max-width: 768px) {
  html[data-route="cars"] #root main > div > section:first-of-type {
    min-height: min(38vh, 320px);
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }

  html[data-route="cars"] #root main > div > section:first-of-type::before {
    background:
      linear-gradient(180deg, rgba(6, 7, 12, 0.78) 0%, rgba(6, 7, 12, 0.35) 42%, rgba(6, 7, 12, 0.92) 100%),
      url("/assets/hero/cars-hero-mobile.webp") center 45% / cover no-repeat;
  }

  html[data-route="cars"] #root main > div > section:nth-of-type(3) > .max-w-7xl + .max-w-7xl {
    margin-top: 1.75rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-route="cars"] #root main > div > section:first-of-type::before {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Catalog cards — wider + premium spec chips
   ═══════════════════════════════════════════════════════════ */

html[data-route="cars"] #root section:nth-of-type(3) div[style*="flexShrink: 0"],
html[data-route="cars"] #root section:nth-of-type(3) div[style*="flex-shrink: 0"] {
  width: min(92vw, 400px) !important;
}

@media (min-width: 768px) {
  html[data-route="cars"] #root section:nth-of-type(3) div[style*="flexShrink: 0"],
  html[data-route="cars"] #root section:nth-of-type(3) div[style*="flex-shrink: 0"] {
    width: min(46vw, 420px) !important;
  }
}

@media (min-width: 1280px) {
  html[data-route="cars"] #root section:nth-of-type(3) div[style*="flexShrink: 0"],
  html[data-route="cars"] #root section:nth-of-type(3) div[style*="flex-shrink: 0"] {
    width: min(380px, 32vw) !important;
  }
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap {
  gap: 0.5rem !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 0.625rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid transparent !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
  line-height: 1.2 !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span:nth-child(1) {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.12)) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  color: #bbf7d0 !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span:nth-child(2) {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.12)) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
  color: #bfdbfe !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span:nth-child(3):not(:last-child) {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(126, 34, 206, 0.12)) !important;
  border-color: rgba(192, 132, 252, 0.35) !important;
  color: #e9d5ff !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span:last-child {
  /* fuel color set by sv-fuel--* via cars-fuel-badges.js */
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.22), rgba(51, 65, 85, 0.14)) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #e2e8f0 !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--diesel {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.34), rgba(180, 83, 9, 0.18)) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  color: #fde68a !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--diesel svg {
  color: #fbbf24 !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--petrol {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(190, 18, 60, 0.16)) !important;
  border-color: rgba(251, 113, 133, 0.42) !important;
  color: #fecdd3 !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--petrol svg {
  color: #fb7185 !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--electric {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.34), rgba(2, 132, 199, 0.18)) !important;
  border-color: rgba(125, 211, 252, 0.48) !important;
  color: #e0f2fe !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--electric svg {
  color: #7dd3fc !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--hybrid-petrol-electric {
  background: linear-gradient(
    90deg,
    rgba(244, 63, 94, 0.34) 0%,
    rgba(244, 63, 94, 0.34) 50%,
    rgba(56, 189, 248, 0.34) 50%,
    rgba(56, 189, 248, 0.34) 100%
  ) !important;
  border-color: rgba(248, 250, 252, 0.22) !important;
  color: #f8fafc !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--hybrid-diesel-electric {
  background: linear-gradient(
    90deg,
    rgba(245, 158, 11, 0.34) 0%,
    rgba(245, 158, 11, 0.34) 50%,
    rgba(56, 189, 248, 0.34) 50%,
    rgba(56, 189, 248, 0.34) 100%
  ) !important;
  border-color: rgba(248, 250, 252, 0.22) !important;
  color: #f8fafc !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--hybrid-petrol-electric svg,
html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span.sv-fuel--hybrid-diesel-electric svg {
  color: #f8fafc !important;
}

html[data-route="cars"] #root section:nth-of-type(3) .glass-card .p-4 > .flex-wrap > span svg {
  flex-shrink: 0 !important;
}

/* Modal spec tiles — same palette as catalog chips (classes via cars-fuel-badges.js) */
html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div[class*="bg-white/5"] {
  border-radius: 0.75rem !important;
  padding: 0.85rem 0.65rem !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
  border: 1px solid transparent !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-modal-spec--year {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.12)) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-modal-spec--mileage {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.12)) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-modal-spec--engine {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(126, 34, 206, 0.12)) !important;
  border-color: rgba(192, 132, 252, 0.35) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-modal-spec--trans {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(13, 148, 136, 0.12)) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-fuel--diesel {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.34), rgba(180, 83, 9, 0.18)) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-fuel--petrol {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(190, 18, 60, 0.16)) !important;
  border-color: rgba(251, 113, 133, 0.42) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-fuel--electric {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.34), rgba(2, 132, 199, 0.18)) !important;
  border-color: rgba(125, 211, 252, 0.48) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-fuel--hybrid-petrol-electric {
  background: linear-gradient(
    90deg,
    rgba(244, 63, 94, 0.34) 0%,
    rgba(244, 63, 94, 0.34) 50%,
    rgba(56, 189, 248, 0.34) 50%,
    rgba(56, 189, 248, 0.34) 100%
  ) !important;
  border-color: rgba(248, 250, 252, 0.22) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-fuel--hybrid-diesel-electric {
  background: linear-gradient(
    90deg,
    rgba(245, 158, 11, 0.34) 0%,
    rgba(245, 158, 11, 0.34) 50%,
    rgba(56, 189, 248, 0.34) 50%,
    rgba(56, 189, 248, 0.34) 100%
  ) !important;
  border-color: rgba(248, 250, 252, 0.22) !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-modal-spec--year .text-white.font-semibold {
  color: #bbf7d0 !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-modal-spec--mileage .text-white.font-semibold {
  color: #bfdbfe !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-modal-spec--engine .text-white.font-semibold {
  color: #e9d5ff !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div.sv-modal-spec--trans .text-white.font-semibold {
  color: #ccfbf1 !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 > div[class*="sv-fuel--"] .text-white.font-semibold {
  color: #f8fafc !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 .text-gray-500.text-xs {
  color: rgba(248, 250, 252, 0.62) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 0.6875rem !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 .text-white.font-semibold {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)) !important;
  gap: 0.75rem !important;
}

@media (min-width: 768px) {
  html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2.sm\\:grid-cols-4 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Car detail modal — responsive width, single scroll
   ═══════════════════════════════════════════════════════════ */

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"][class*="overflow-y-auto"] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: block !important;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 85, 105, 0.45) transparent;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"][class*="overflow-y-auto"]::-webkit-scrollbar {
  width: 8px;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"][class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.45);
  border-radius: 999px;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"][class*="overflow-y-auto"] > div[class*="min-h-screen"] {
  min-height: auto !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0.5rem 0 1.5rem !important;
  display: block !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div.max-w-4xl.w-full[class*="overflow-hidden"] {
  width: min(96vw, 72rem) !important;
  max-width: min(96vw, 72rem) !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto !important;
  display: block !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div[class*="aspect-[16/9]"] {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-height: min(52vh, 520px) !important;
  min-height: 200px !important;
  height: auto !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div[class*="aspect-[16/9]"] > img {
  width: 100% !important;
  height: 100% !important;
  max-height: min(52vh, 520px) !important;
  object-fit: contain !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div.max-w-4xl .p-6 {
  flex: none !important;
  min-height: auto !important;
  padding: 1.25rem 1.5rem 1.5rem !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div.max-w-4xl .p-6 > div.mb-6 p.whitespace-pre-line {
  max-height: none !important;
  overflow: visible !important;
  column-count: 1 !important;
  margin-bottom: 0 !important;
  line-height: 1.65 !important;
  color: #cbd5e1 !important;
}

@media (min-width: 900px) {
  html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div.max-w-4xl .p-6 > div.mb-6 p.whitespace-pre-line {
    column-count: 2 !important;
    column-gap: 2rem !important;
  }
}

/* Fullscreen photo viewer — scale to max viewport (any photo size) */
html[data-route="cars"] #root div.fixed.inset-0[class*="z-[60]"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right))
    max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

html[data-route="cars"] #root div.fixed.inset-0[class*="z-[60]"] > img {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 640px) {
  html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div.max-w-4xl.w-full[class*="overflow-hidden"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div[class*="aspect-[16/9]"],
  html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div[class*="aspect-[16/9]"] > img {
    max-height: min(40vh, 280px) !important;
    min-height: 180px !important;
  }

  html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] div.max-w-4xl .p-6 {
    padding: 1rem !important;
  }

  html[data-route="cars"] #root div.fixed.inset-0[class*="bg-black/90"] .grid.grid-cols-2.sm\\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}