/* SP Tata custom styles beyond Tailwind utilities */

/* ==========================================================================
   RESPONSIVE FOUNDATION
   Mobile-first base rules: prevent horizontal overflow anywhere on the site,
   make every image/media element responsive by default, and provide a
   fluid clamp()-based type scale used by key headings (see .fluid-h1 etc.
   below and their usage in route files). These rules intentionally sit
   ABOVE Tailwind's utility classes in cascade order (style.css is linked
   after the Tailwind CDN <script> in Layout.tsx) so utilities can still
   override them per-element when needed, while still guarding the whole
   site against accidental overflow.
   ========================================================================== */

/* Prevent ANY element from forcing horizontal scroll on the page */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Universal box-sizing safety (in case any hand-written width/padding combo
   would otherwise overflow its container) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Base responsive-media rules — every image/video/svg/canvas/iframe is
   fluid by default unless a component explicitly opts out. Combined with
   object-fit utility classes (already used throughout: object-cover etc.)
   this guarantees images never stretch or overflow their container. */
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
/* object-fit:cover images need explicit height driven by their container
   (aspect-ratio wrapper) rather than height:auto — Tailwind's h-full utility
   on those <img> tags already overrides this for that specific case. */
img[class*="h-full"], video[class*="h-full"] {
  height: 100%;
}

/* Tables that aren't wrapped in .table-scroll still shouldn't blow out the
   viewport on narrow screens */
table { max-width: 100%; }

/* Ultra-wide screen support (2560px+ monitors): the site's content
   containers cap at max-w-7xl (1280px) via Tailwind, which is intentional
   for readability, but on very large monitors we widen the outer shell
   slightly and add extra breathing room so the page doesn't look like a
   narrow column floating in empty space. */
@media (min-width: 1920px) {
  .max-w-7xl { max-width: 1440px; }
  .max-w-5xl { max-width: 1100px; }
  .max-w-4xl { max-width: 960px; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .vehicle-card:hover { transform: none; }
  .vehicle-card:hover .vehicle-card-img { transform: none; }
}

/* ==========================================================================
   SCROLL-REVEAL ANIMATION SYSTEM (IntersectionObserver-driven, see app.js)
   Base state: hidden + slightly offset. `.is-visible` (added once, on first
   viewport entry) animates to the resting state. Only `opacity`/`transform`
   are animated — never layout-affecting properties — and duration/easing
   are tuned to the "elegant, fast, 250-700ms" requirement. `.reveal-stagger`
   containers stagger their direct children via incremental transition-delay
   set inline by app.js (kept small: 60-90ms steps).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* Hero content entrance — a lighter, quicker variant used ONLY for the
   hero's text/buttons/stats layer, never the banner <img> itself, so image
   quality/sharpness is never affected by animation. Runs once on page load
   (no scroll-trigger needed since it's above the fold), with a small
   built-in stagger baked into nth-child delays for the direct children. */
.hero-content-enter > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-content-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-content-enter > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content-enter > *:nth-child(2) { animation-delay: 0.14s; }
.hero-content-enter > *:nth-child(3) { animation-delay: 0.23s; }
.hero-content-enter > *:nth-child(4) { animation-delay: 0.32s; }
.hero-content-enter > *:nth-child(5) { animation-delay: 0.41s; }
@keyframes hero-content-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content-enter > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

body { -webkit-font-smoothing: antialiased; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #0B4FA1;
  outline-offset: 2px;
}

/* Hero gradient overlay */
.hero-gradient {
  background: linear-gradient(180deg, rgba(7,26,51,0.10) 0%, rgba(7,26,51,0.65) 100%);
}

/* ==========================================================================
   UNIFIED HERO BANNER ("Banner SP TATA(2).jpg", native 1024x603, ~1.7:1)
   The container is locked to the IMAGE'S OWN aspect ratio (1024/603) at
   every breakpoint, so the box always ends exactly where the image ends —
   no letterbox bars, no blur-fill layer, no cropping, no upscaling. The
   image is shown via object-fit:cover at that identical ratio (a same-ratio
   box + cover is pixel-equivalent to contain here, and cover avoids any
   fractional sub-pixel gap at odd viewport widths). Text/buttons/stats are
   positioned per the image's own composition (sky 0-33%, signage 33-50%,
   car lineup 48-74%, clean pavement 74-100%; jets confined to the top-right
   70-85% x 18-31% region) so nothing ever sits on the building sign, cars
   or jets — see the two absolutely-positioned overlay blocks in home.tsx. */
.hero-banner-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #071a33;
  aspect-ratio: 1024 / 603;
}
.hero-banner-frame .hero-banner-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-banner-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 603;
    overflow: hidden;
    background: #071a33;
}

.hero-banner-frame picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-banner-frame .hero-banner-fg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: auto;
}

/* Desktop hero height fix */
@media screen and (min-width: 1025px) {
    .hero-banner-frame {
        aspect-ratio: auto;
        height: clamp(520px, 58vw, 680px);
        min-height: 520px;
        max-height: 680px;
    }

    .hero-banner-frame picture,
    .hero-banner-frame .hero-banner-fg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .hero-banner-frame .hero-banner-fg {
        object-fit: cover;
        object-position: center center;
    }
}

@media screen and (min-width: 1025px) {
    .hero-banner-frame {
        aspect-ratio: auto;
        height: clamp(500px, 42vw, 650px);
        min-height: 500px;
        max-height: 650px;
    }
}

/* Mobile hero banner height fix only */
@media screen and (max-width: 640px) {
    .hero-banner-frame {
        aspect-ratio: auto;
        height: clamp(360px, 58svh, 520px);
        min-height: 360px;
    }

    .hero-banner-frame picture {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .hero-banner-frame .hero-banner-fg,
    .hero-banner-frame picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}

@media screen and (max-width: 640px) {
    .hero-banner-frame {
        aspect-ratio: auto;
        height: clamp(360px, 58svh, 520px);
        min-height: 360px;
    }

    .hero-banner-frame picture,
    .hero-banner-frame .hero-banner-fg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .hero-banner-frame .hero-banner-fg {
        object-fit: cover;
        object-position: center center;
        image-rendering: auto;
    }
}

/* Small, LOCALIZED readability gradients — only directly behind the text
   block (top) and the stats/button strip (bottom), never a full-banner
   wash/darken. Each is its own short div positioned exactly behind its
   text, sized to that region only. */
.hero-text-gradient {
  background: linear-gradient(to bottom, rgba(3,10,20,0.58) 0%, rgba(3,10,20,0.30) 60%, rgba(3,10,20,0) 100%);
}
.hero-stats-gradient {
  background: linear-gradient(to top, rgba(3,10,20,0.55) 0%, rgba(3,10,20,0.28) 55%, rgba(3,10,20,0) 100%);
}

.glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ==========================================================================
   VEHICLE CARD HOVER — lift, soft shadow, border highlight, subtle image
   zoom. Transform/box-shadow/border-color only (no layout-affecting
   properties), so hover never triggers reflow.
   ========================================================================== */
.vehicle-card {
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.vehicle-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(7,26,51,0.18), 0 8px 16px -8px rgba(7,26,51,0.12);
  border-color: rgba(11,79,161,0.35);
}
.vehicle-card .vehicle-card-img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.vehicle-card:hover .vehicle-card-img {
  transform: scale(1.06);
}

/* ==========================================================================
   PREMIUM HOVER / PRESS / FOCUS TRANSITIONS
   Buttons, nav links, filter chips, location chips, floating contact
   buttons — smooth, fast (150-250ms), transform/opacity/color only.
   ========================================================================== */
a, button {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
a:active, button:active {
  transform: scale(0.97);
}
.btn-press:active { transform: scale(0.96); }

/* Floating WhatsApp/Call buttons: keep existing hover:scale-105 (Tailwind)
   but add a smoother press state + subtle shadow lift so the interaction
   feels tactile without altering their current visual design. */
.fixed a:active { transform: scale(0.94); }

/* Hide scrollbar for horizontal filter chips */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Range slider */
input[type=range] {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #0B4FA1;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Filter chips / location chips — smooth colour + lift transition on
   hover/press/focus (buttons already covered by the global a,button rule
   above; this adds a tiny lift for a more premium feel). */
[data-filter-chip], .location-chip {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
[data-filter-chip]:hover, .location-chip:hover {
  transform: translateY(-1px);
}

/* ==========================================================================
   SECTION SPACING SCALE (site-wide spacing audit)
   Standardized section vertical padding, replacing the previously
   inconsistent mix of py-10/py-12/py-14/py-16/py-20 combos across pages.
   `.section-y` = default section rhythm; `.section-y-lg` for hero-adjacent
   or visually heavier sections; `.section-y-sm` for compact utility
   sections (e.g. the showroom locator, which must not carry excess
   padding/min-height per the compacting requirement).
   ========================================================================== */
.section-y {
  padding-top: clamp(2rem, 1.6rem + 1.6vw, 3.5rem);
  padding-bottom: clamp(2rem, 1.6rem + 1.6vw, 3.5rem);
}
.section-y-lg {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem);
}
.section-y-sm {
  padding-top: clamp(1.5rem, 1.3rem + 0.8vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 1.3rem + 0.8vw, 2.25rem);
}

/* Table responsive helper */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   FLUID TYPOGRAPHY (clamp-based)
   Replaces stepped Tailwind breakpoint classes (text-4xl sm:text-5xl
   lg:text-7xl) on the highest-impact headings with a smoothly scaling
   clamp(min, preferred, max) value, so text grows continuously between
   320px and ultra-wide screens instead of jumping at fixed breakpoints.
   clamp(MIN, VW-based-PREFERRED, MAX) — VW value tuned so the size lands
   near the old Tailwind step at ~375px/768px/1440px reference widths.
   Usage: add the class alongside (not instead of) existing Tailwind
   classes for color/weight/margin; the font-size here wins by source order
   and !important is intentionally avoided so component-level overrides
   remain possible.
   ========================================================================== */
.fluid-h1 {
  font-size: clamp(1.875rem, 1.4rem + 2.6vw, 3.75rem);
  line-height: 1.12;
}
.fluid-h1-lg {
  /* For hero headings — audited down from an earlier, oversized max (5.5rem)
     so the heading never dominates the viewport, even on ultra-wide screens. */
  font-size: clamp(1.875rem, 1.35rem + 2.9vw, 3.75rem);
  line-height: 1.1;
}
/* Dedicated, smaller scale for the unified hero banner heading (req: "reduce
   the oversized hero heading") — distinct from .fluid-h1-lg which other page
   heroes (About/Fleet/Preowned/etc.) still use. */
.fluid-hero-h1 {
  font-size: clamp(1.5rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.12;
}
.fluid-h2 {
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2.25rem);
  line-height: 1.18;
}
.fluid-h3 {
  font-size: clamp(1.0625rem, 0.97rem + 0.5vw, 1.375rem);
  line-height: 1.3;
}
.fluid-h4 {
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
  line-height: 1.35;
}
.fluid-body-lg {
  font-size: clamp(0.9rem, 0.83rem + 0.35vw, 1.125rem);
  line-height: 1.6;
}
/* Compact scale for stat figures (touchpoints/states counts etc.) — these
   previously reused .fluid-h2 which, at hero scale, read as oversized. */
.fluid-stat {
  font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.75rem);
  line-height: 1.1;
}

/* ==========================================================================
   OVERFLOW-GUARD UTILITIES
   Small opt-in helper classes used on a handful of components (long price
   tables, comparison tables, filter-chip rows) that legitimately need
   horizontal scroll on narrow screens rather than wrapping/shrinking.
   ========================================================================== */
.overflow-guard {
  max-width: 100vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sticky sidebar / CTA bar: keep sticky elements from ever exceeding the
   viewport height so they don't create their own internal overflow when
   the viewport is short (e.g. landscape phones) */
.sticky-safe {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

/* ==========================================================================
   RESPONSIVE PICTURE HELPER
   Used by the WebP/PNG <picture> markup (see VehicleCard.tsx, home.tsx
   hero, cars.tsx gallery/hero) so the <picture> wrapper itself always
   behaves like a normal block-level, full-width, non-stretching image
   container — the actual fit/crop is still controlled by the object-fit
   utility class on the inner <img>.
   ========================================================================== */
picture {
  display: block;
  width: 100%;
  height: 100%;
}
picture img {
  width: 100%;
  height: 100%;
}

/* 2026 maintenance: readable hero, accessible navigation and stable images. */
.hero-text-gradient { height: 55%; background: linear-gradient(110deg,rgba(3,10,20,.82),rgba(3,10,20,.38) 60%,transparent); }
#home-hero .glass { background: rgba(7,26,51,.85); border-color: rgba(255,255,255,.75); backdrop-filter: none; }
#home-hero a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#site-header img[alt="SP Tata logo"], footer img[alt="SP Tata logo"] { object-fit: contain; background: white; }
#site-header .group:focus-within > div, #site-header .sp-menu-open > div { display: block; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: #fff; color: #071a33; padding: 12px 20px; border: 2px solid #0B4FA1; }
.skip-link:focus { top: 12px; }
.sp-form-status { margin-top: 16px; line-height: 1.6; color: #071a33; }
.sp-consent { display: block; font-size: 14px; margin: 16px 0; }
.sp-consent a { text-decoration: underline; }
.sp-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
button:disabled { opacity: .6; cursor: wait; }
@media (max-width:640px) {
  input,select,textarea { font-size:16px; }
  .hero-banner-frame { min-height: 400px; }
  #home-hero .hero-content-enter:first-of-type { padding-top: 16px; }
  #home-hero a { font-size:12px; }
  #home-hero a.hidden { display:none; }
  .hero-text-gradient { height: 58%; }
}
@media (prefers-reduced-motion:reduce) {
  .reveal,.reveal-left,.reveal-right,.reveal-scale { opacity:1!important;transform:none!important; }
}

/* Published price lists retain exact rupee values and horizontal table scrolling. */
.sp-price-note { font-size:14px; line-height:1.65; color:#475569; margin:12px 0 20px; }
.sp-price-table { margin:16px 0 28px; border:1px solid #dbe2eb; border-radius:12px; }
.sp-price-table table { width:100%; min-width:820px; border-collapse:collapse; font-size:13px; }
.sp-price-table th,.sp-price-table td { padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid #e2e8f0; }
.sp-price-table thead { background:#071a33; color:#fff; }
.sp-price-table tbody th { min-width:245px; font-weight:600; }
.sp-price-table td:nth-child(2),.sp-price-table td:nth-child(3),.sp-price-table td:nth-child(4) { white-space:nowrap; }
.sp-price-table tr:nth-child(even) { background:#f8fafc; }
.sp-price-table summary { cursor:pointer; color:#0b4fa1; margin-top:6px; }
.sp-price-table dl { min-width:230px; }
.sp-price-table dl div,.sp-quote-breakdown div { display:flex; justify-content:space-between; gap:24px; padding:8px 0; border-bottom:1px solid #e2e8f0; }
.sp-price-table dd,.sp-quote-breakdown dd { white-space:nowrap; font-weight:600; }
.sp-price-controls { display:flex; gap:20px; flex-wrap:wrap; align-items:end; margin:24px 0; }
.sp-price-controls label { flex:1; min-width:240px; font-weight:600; font-size:14px; }
.sp-price-controls select,.sp-price-controls input { display:block; width:100%; padding:12px; border:1px solid #cbd5e1; border-radius:8px; margin-top:8px; background:#fff; color:#071a33; }
.sp-quote-breakdown { max-width:700px; padding:20px; background:#f8fafc; border-radius:12px; margin:20px 0; }
.sp-model-prices { margin-top:28px; }
@media(max-width:640px) { .sp-price-controls { display:block; } .sp-price-controls label { display:block; margin:16px 0; } }

/* Official Tata product catalogue refresh */
.sp-product-hero{background:#071a33;color:white}.sp-product-hero-inner{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1.3fr;min-height:380px}.sp-product-copy{padding:56px 32px;align-self:center}.sp-product-eyebrow{font-size:11px;letter-spacing:.16em;color:#afc8e5;font-weight:700}.sp-product-copy h1{font-size:clamp(32px,4vw,54px);line-height:1.1;font-weight:800;margin:12px 0}.sp-product-copy>p:not(.sp-product-eyebrow){color:#d8e3ef;line-height:1.6;max-width:34em}.sp-product-price{font-size:28px;font-weight:800;margin:24px 0}.sp-product-price small{display:block;font-size:12px;font-weight:400;color:#c5d2e2;margin-top:4px}.sp-product-stage{background:#f3f6fa;display:flex;align-items:center;justify-content:center;padding:28px}.sp-product-stage img{width:100%;height:auto;max-height:440px;object-fit:contain}.sp-product-actions{display:flex;gap:10px;flex-wrap:wrap}.sp-product-actions a{padding:12px 18px;border:1px solid #91b0d3;border-radius:8px;font-size:13px;font-weight:700}.sp-product-actions a:first-child{background:white;color:#0b4fa1;border-color:white}.sp-product-facts{max-width:1280px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 32px}.sp-product-facts small{display:block;color:#64748b;font-size:12px;margin-bottom:6px}.sp-product-facts strong,.sp-product-facts a{font-size:14px;color:#0b4fa1}.sp-product-note{font-size:13px;line-height:1.7;color:#64748b;margin:16px 0}.sp-product-note a{text-decoration:underline;color:#0b4fa1}.sp-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sp-feature-panel{background:#f3f6fa;padding:20px;border:1px solid #e4eaf0;border-radius:12px}.sp-feature-panel h3{font-size:14px;font-weight:800;color:#0b4fa1;margin-bottom:12px}.sp-feature-panel ul{padding-left:18px;list-style:disc;color:#334155;font-size:14px;line-height:1.7}.sp-product-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}.sp-product-gallery figure{border-radius:10px;overflow:hidden;background:#f3f6fa}.sp-product-gallery img{width:100%;height:auto;aspect-ratio:1.65;object-fit:cover}.sp-product-gallery figcaption{padding:12px;font-size:12px;line-height:1.5;color:#334155}.vehicle-card-img{object-fit:contain!important;background:#f3f6fa}.vehicle-card>a:first-child{aspect-ratio:1.6!important}.sp-compare-table{width:100%;border-collapse:collapse;font-size:14px}.sp-compare-table th,.sp-compare-table td{padding:16px;border-bottom:1px solid #e2e8f0;min-width:220px;text-align:left;vertical-align:top}.sp-compare-table th:first-child,.sp-compare-table td:first-child{min-width:140px}.sp-compare-table thead{background:#f3f6fa}.sp-compare-table img{width:100%;height:140px;object-fit:contain}.sp-compare-table a{color:#0b4fa1;text-decoration:underline}.sp-compare-table small{display:block;color:#64748b;font-weight:400}
@media(max-width:767px){.sp-product-hero-inner{grid-template-columns:1fr}.sp-product-copy{padding:28px 20px}.sp-product-stage{padding:16px;min-height:190px}.sp-product-stage img{max-height:260px}.sp-product-facts{padding:20px;gap:16px;grid-template-columns:1fr}.sp-feature-grid{grid-template-columns:1fr}.sp-product-gallery{grid-template-columns:1fr}.sp-product-gallery img{max-height:270px}.sp-product-price{margin:18px 0}}

/* Variant-aware catalogue controls and equipment comparison */
[data-vehicle-listing]>h2{font-size:22px;font-weight:800;color:#071a33;margin:28px 0 16px}.sp-vehicle-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:20px;background:#f3f6fa;border:1px solid #dbe4ef;border-radius:14px;margin-bottom:14px}.sp-vehicle-controls label,.sp-variant-picker label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:#334155;min-width:0}.sp-vehicle-controls input,.sp-vehicle-controls select,.sp-variant-picker select{width:100%;min-width:0;min-height:46px;padding:10px;border:1px solid #c2cfdf;border-radius:7px;background:#fff;color:#172c47;font:inherit;font-size:16px}.sp-tool-button{align-self:end;min-height:46px;background:#0b4fa1;color:#fff;border-radius:7px;font-weight:700;padding:10px 16px}.sp-tool-status{font-size:14px;font-weight:700;color:#0b4fa1;margin:12px 0}.sp-tool-note{font-size:13px;line-height:1.7;color:#52647b;margin:12px 0 20px}.sp-tool-note a,.sp-variant-link,.sp-match-link{color:#0b4fa1;text-decoration:underline}.sp-match-details{padding:12px 20px 18px;border-top:1px solid #e4eaf2;font-size:13px}.sp-match-details p{font-weight:700;color:#0b4fa1}.sp-match-details small{display:block;color:#52647b;margin:6px 0;font-size:12px}.sp-variant-link{display:block;font-size:12px;margin-top:8px;white-space:normal}.sp-variant-comparison{min-width:0;max-width:100%;margin:32px 0;padding:22px;border:1px solid #dbe4ef;border-radius:14px;background:#fff;scroll-margin-top:100px}.sp-variant-comparison h2{font-size:22px;font-weight:800;color:#071a33;line-height:1.3}.sp-variant-pickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sp-variant-picker{display:grid;gap:12px;min-width:0;background:#f3f6fa;padding:16px;border-radius:10px}.sp-compare-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px;font-size:14px}.sp-compare-actions label{display:flex;gap:8px;align-items:center;min-height:44px}.sp-compare-actions input{width:18px;height:18px}.sp-compare-actions a{color:#0b4fa1;text-decoration:underline}.sp-equipment-scroll{overflow-x:auto;max-width:100%;min-width:0;border:1px solid #dbe4ef;border-radius:8px}.sp-equipment-table{border-collapse:collapse;width:100%;min-width:640px;font-size:13px;line-height:1.65;table-layout:fixed}.sp-equipment-table caption{text-align:left;background:#edf3fa;padding:12px 16px;font-weight:700}.sp-equipment-table th,.sp-equipment-table td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #e1e8f0;overflow-wrap:anywhere}.sp-equipment-table thead th{background:#071a33;color:#fff;font-weight:700}.sp-equipment-table th:first-child{width:29%}.sp-equipment-table tbody th{color:#334155;background:#f7f9fc;font-weight:600}.sp-equipment-table tbody tr:nth-child(even) td{background:#f8fafc}.sp-equipment-table a{color:#0b4fa1;text-decoration:underline}.sp-product-content{min-width:0}.sp-vehicle-controls :focus-visible,.sp-variant-comparison :focus-visible{outline:3px solid #1674d1;outline-offset:3px}
[data-vehicle-grid]>[hidden]{display:none!important}
@media(max-width:900px){.sp-vehicle-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.sp-vehicle-controls{grid-template-columns:1fr;padding:16px}.sp-variant-pickers{grid-template-columns:1fr}.sp-variant-comparison{padding:14px;margin:24px 0}.sp-equipment-table{min-width:610px}.sp-variant-comparison h2{font-size:20px}}

.sp-variant-picker [hidden]{display:none!important}
/* Dealership locations and city pages */
.sp-location-wrap{max-width:1180px;margin:auto;padding:24px}.sp-location-crumb{font-size:14px;line-height:1.8}.sp-location-hero{background:#071d49;color:#fff;padding:24px 0}.sp-location-hero h1{font-size:clamp(26px,4vw,44px);font-weight:800;line-height:1.2;margin:12px 0}.sp-location-hero p{color:#d9e6ff}.sp-location-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}.sp-location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.sp-location-card{border:1px solid #dce3ed;border-radius:16px;padding:24px;background:#fff;min-width:0}.sp-location-card h2,.sp-location-wrap>h2,.sp-city-links h2,.sp-location-legacy h2{font-size:21px;font-weight:750;color:#10244a;margin:18px 0 12px}.sp-location-card h3{font-size:21px;font-weight:750;line-height:1.4;margin:12px 0}.sp-location-card p,.sp-location-card address{font-size:15px;line-height:1.7;color:#475569;margin:12px 0;font-style:normal}.sp-location-badge{display:inline-block;background:#e9f1ff;color:#153f86;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700}.sp-location-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.sp-location-actions a,.sp-city-links>a{display:inline-flex;align-items:center;min-height:44px;border:1px solid #215aaf;border-radius:8px;padding:9px 12px;color:#174c9c;font-size:14px;font-weight:650}.sp-location-actions a:hover,.sp-city-links>a:hover{background:#edf4ff}.sp-location-card a:focus-visible,.sp-city-links>a:focus-visible{outline:3px solid #b16b00;outline-offset:3px}.sp-city-links{margin-bottom:30px}.sp-city-links>a{margin:4px}.sp-location-legacy{border-top:1px solid #dde4ef;padding-top:20px;margin-top:36px}[data-showroom-card][hidden]{display:none!important}@media(max-width:720px){.sp-location-layout,.sp-location-grid{grid-template-columns:1fr}.sp-location-wrap{padding:20px 16px}.sp-location-card{padding:20px}.sp-location-actions a{flex:1 1 130px;justify-content:center;text-align:center}}