:root {
  --bg: #f5f5f5;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #6b7280;
  --accent: #E53935;
  --accent-hover: #C62828;
  --accent-text: #ffffff;
  --border: #e5e7eb;
  --surface: #f9fafb;
}

* { box-sizing: border-box; margin: 0 }
body { background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, sans-serif }
a { color: inherit; text-decoration: none }
.container { max-width: 1100px; margin: 0 auto; padding: 16px }

/* Header */
.header { background: #ffffff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px rgba(0,0,0,.04) }
.header-row { display: flex; align-items: center; gap: 12px; min-height: 56px }
.logo { font-weight: 700; color: var(--accent); letter-spacing: .5px; font-size: 20px; white-space: nowrap }
.nav { display: flex; gap: 2px }
.nav a { padding: 6px 10px; color: var(--muted); font-size: 14px; border-radius: 6px }
.nav a:hover { color: var(--text); background: var(--surface) }
.search { margin-left: auto; display: flex; gap: 8px; min-width: 0 }
.search input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 8px; width: 200px; min-width: 0 }
.search input::placeholder { color: #9ca3af }
.search button { background: var(--accent); border: 0; color: var(--accent-text); padding: 8px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; white-space: nowrap }
.search button:hover { background: var(--accent-hover) }
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; white-space: nowrap }
.btn-contact { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 14px }
.btn-contact:hover { background: var(--accent-hover) }

/* Language switcher */
.lang-switch { display: flex; gap: 4px; font-size: 13px }
.lang-switch a { padding: 4px 8px; border-radius: 6px; color: var(--muted); font-weight: 500 }
.lang-switch a:hover { color: var(--text); background: var(--surface) }
.lang-switch a.active { color: var(--accent); font-weight: 700; background: rgba(229,57,53,.08) }

/* Hamburger */
.hamburger { appearance: none; border: 1px solid var(--border); background: #fff; color: var(--text); width: 36px; height: 36px; border-radius: 10px; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 18px }

/* Drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 9998; backdrop-filter: blur(2px) }
.drawer {
  position: fixed; top: 0; left: 0; height: 100vh; width: min(86vw, 320px);
  background: #fff; border-right: 1px solid var(--border);
  transform: translateX(-100%); transition: transform .25s ease; z-index: 9999; padding: 14px
}
.drawer.open { transform: translateX(0) }
.drawer-close { width: 100%; height: 36px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer }
.drawer-menu { display: flex; flex-direction: column; gap: 6px }
.drawer-menu a { display: block; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 15px }
.drawer-menu a:hover { border-color: var(--accent); color: var(--accent) }
.drawer-lang { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border) }
.drawer-lang a { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); color: var(--muted); font-weight: 500; font-size: 14px }
.drawer-lang a.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent) }
body.noscroll { overflow: hidden }
[hidden] { display: none !important }

/* Mobile */
.only-mobile { display: none !important }
.hide-on-mobile { display: flex !important }

@media (max-width: 900px) {
  .only-mobile { display: inline-flex !important }
  .hide-on-mobile { display: none !important }
  .hamburger { display: inline-flex }
  .header-row { gap: 8px }
  .logo { font-size: 17px }
  .search { gap: 6px; flex: 1 }
  .search input { flex: 1; max-width: 54vw; padding: 8px 8px; width: auto }
  .search button { flex: 0 0 auto; padding: 8px 10px }
  .catalog { grid-template-columns: 1fr !important }
  .sidebar { display: none }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 10px }
  .specs-grid { grid-template-columns: 1fr !important; gap: 8px }
  .viewer { grid-template-columns: 1fr !important }
  .thumbs-wrap { flex-direction: row !important; position: static !important }
  #thumbs-inner { flex-direction: row !important; max-height: none !important; overflow-x: auto !important }
  .thumb { width: 80px !important; flex: 0 0 80px }
  .thumb img { height: 60px !important }
  .carousel { padding: 0 36px }
  .ctrack { grid-auto-columns: 200px }
}

/* Hero */
.home-hero { text-align: center; max-width: 760px; margin: 40px auto 32px }
.home-hero h1 { font-size: 28px; margin-bottom: 10px }
.home-hero p.lead { color: var(--muted); line-height: 1.5 }
.home-search { display: flex; gap: 8px; justify-content: center; margin: 24px auto 12px; max-width: 580px }
.home-search input[type="text"] { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 15px; box-shadow: 0 1px 2px rgba(0,0,0,.05) }
.home-search input::placeholder { color: #9ca3af }
.home-search button { padding: 12px 20px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-text); font-weight: 700; cursor: pointer; font-size: 15px }
.home-search button:hover { background: var(--accent-hover) }
@media (max-width: 600px) {
  .home-hero { margin: 24px auto 20px }
  .home-hero h1 { font-size: 22px }
  .home-search { flex-direction: column }
  .home-search input[type="text"], .home-search button { width: 100% }
}

/* Section */
.section { max-width: 1100px; margin: 28px auto; padding: 0 16px }
.section h2 { font-size: 20px; margin-bottom: 14px }

/* Carousel (home sliders + similar/same_make) */
.carousel { position: relative; overflow: hidden; padding: 0 44px }
.carousel .cbtn, .carousel .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.95);
  color: var(--text);
  cursor: pointer; z-index: 2;
  font-size: 18px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: all .15s ease;
  opacity: .85;
}
.carousel .cbtn:hover, .carousel .nav:hover {
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  border-color: var(--accent);
  color: var(--accent);
}
.carousel .left, .carousel .prev { left: 4px }
.carousel .right, .carousel .next { right: 4px }
.ctrack, .carousel .track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none
}
.ctrack::-webkit-scrollbar, .carousel .track::-webkit-scrollbar { display: none }
.ccard, .carousel .card {
  scroll-snap-align: start; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .15s
}
.ccard:hover, .carousel .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08) }
.cthumb, .carousel .card .thumb { aspect-ratio: 4/3; background: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden }
.cthumb img, .carousel .card img { width: 100%; height: 100%; object-fit: cover; display: block }
.cmeta, .carousel .card .meta { padding: 8px 10px }
.ctitle, .carousel .card h3 { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 }
.cvin { color: var(--muted); font-size: 11px; margin-top: 2px }

/* Car card page */
.card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04) }
.btn { padding: 8px 14px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-text); cursor: pointer; font-weight: 600; font-size: 13px }
.btn:hover { background: var(--accent-hover) }

/* Gallery viewer */
.viewer { display: grid; grid-template-columns: 1fr 132px; gap: 12px; align-items: start }
.stage { position: relative; overflow: hidden; background: #f0f0f0; border-radius: 12px; border: 1px solid var(--border) }
.stage img { display: block; max-width: 100%; height: auto; margin: auto }
.stage .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,.9); color: var(--text); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.1) }
.stage .prev { left: 10px }
.stage .next { right: 10px }
.thumbs { overflow: hidden; border-radius: 12px; background: #f9fafb; border: 1px solid var(--border) }
.thumb { border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: #f9fafb; width: 100%; cursor: pointer }
.thumb.active { border-color: var(--accent) }
.thumb img { display: block; width: 100%; height: 88px; object-fit: cover }
.thumb-nav { background: #fff; border: 1px solid var(--border); border-radius: 8px; width: 100%; padding: 4px; cursor: pointer; color: var(--muted); font-size: 14px }
.thumb-nav:hover { border-color: var(--accent); color: var(--accent) }

/* Breadcrumbs */
.bc { padding: 8px 0 4px; font-size: 13px; color: var(--muted) }
.bc a { color: var(--accent) }
.bc a:hover { text-decoration: underline }

/* SEO text */
.seo-text { line-height: 1.6; color: var(--muted); font-size: 14px }
.seo-text a { color: var(--accent) }
.seo-text a:hover { text-decoration: underline }
.seo-block { line-height: 1.6; color: var(--muted); font-size: 14px }
.seo-block a { color: var(--accent) }

/* Specs table */
.card table { width: 100% }
.card th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 500 }
.card td { padding: 6px 8px; border-bottom: 1px solid var(--border) }

/* VIN chips */
.vin-block { max-width: 1100px; margin: 28px auto; padding: 0 16px }
.vin-grid { display: flex; flex-wrap: wrap; gap: 8px }
.vin-chip, .chip { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px;
  font-family: monospace; font-size: 13px; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.04) }
.vin-chip:hover, .chip:hover { border-color: var(--accent); color: var(--accent) }

/* Footer */
.footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 24px 16px; color: var(--muted); text-align: center; font-size: 13px }

/* Catalog layout */
.catalog { display: grid; grid-template-columns: 260px 1fr; gap: 20px }
.sidebar { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); max-height: 75vh; overflow: auto }
.sidebar h3 { margin: 8px 0 6px; font-size: 14px }
.sidebar ul { list-style: none; padding: 0; margin: 0 }
.sidebar li { margin: 3px 0 }
.sidebar a { color: var(--muted); font-size: 13px }
.sidebar a:hover { color: var(--accent) }
.sidebar-search { display: flex; gap: 8px; margin: 0 0 10px }
.sidebar-search input { flex: 1; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); outline: none }
.sidebar-search input::placeholder { color: #9ca3af }
.sidebar-search button { padding: 10px 12px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-text); cursor: pointer; white-space: nowrap; font-weight: 600 }

/* Grid cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px }
.noimg { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; color: #bbb }

/* Pills & pagination */
.pill { border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; background: #fff; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block }
.pill:hover { border-color: var(--accent); color: var(--accent) }
.pagination { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 16px 0 }

/* Mobile filter bar */
.mobile-filter-bar { display: none; margin: 8px 0 }
.mobile-filter-bar button { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; font-size: 14px }
@media (max-width: 900px) {
  .mobile-filter-bar { display: block }
}

/* Mobile inline brands (catalog) */
.mobile-brands-inline { display: none; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin: 10px 0 }
.mobile-only { display: none }
.mobile-brand-search { display: flex; gap: 8px; margin-bottom: 10px }
.mobile-brand-search input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text) }
.mobile-brand-search button { padding: 10px 12px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-text); cursor: pointer; font-weight: 600 }
.mobile-brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px }
.mbrand-item { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted) }
.mbrand-item:hover { color: var(--accent) }
.mbrand-title { font-size: 14px; margin: 0 0 8px }
@media (max-width: 900px) {
  .mobile-brands-inline { display: block }
  .mobile-only { display: block }
}

/* Inner links */
.inner-links { margin-top: 16px }
.inner-links a { color: var(--accent); font-size: 14px }
.inner-links a:hover { text-decoration: underline }

/* Car carousel (similar/same_make on car page) */
.car-carousel { position: relative }
.car-carousel .cbtn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; z-index: 2; font-size: 16px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.08) }
.car-carousel .cbtn:hover { border-color: var(--accent); color: var(--accent) }
.car-carousel .cbtn.left { left: -8px }
.car-carousel .cbtn.right { right: -8px }
.car-carousel .ctrack { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px }
.car-carousel .ctrack::-webkit-scrollbar { display: none }

/* FIX: carousel buttons */
.carousel .cbtn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:2px solid #d1d5db;background:#fff;color:#374151;cursor:pointer;z-index:2;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:all .15s;opacity:1}
.carousel .cbtn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.carousel .cbtn.left{left:2px}
.carousel .cbtn.right{right:2px}

/* FIX: thumbs height matches main photo */
.thumbs-wrap{max-height:520px;overflow:hidden}
#thumbs{max-height:500px;overflow-y:auto}
#stage-img{max-height:520px;object-fit:contain}

/* FIX: car page carousels — wider cards */
.car-carousel .ctrack{grid-auto-columns:180px;gap:12px}
.car-carousel .ccard{min-width:0}
.car-carousel .cthumb{aspect-ratio:4/3}
.car-carousel .ctitle{font-size:12px}
.car-carousel .cvin{font-size:10px}

/* OVERRIDE: carousel cards like site1 but light theme */
.carousel .ctrack{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:16px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch}
.carousel .ctrack::-webkit-scrollbar{display:none}
.carousel .ccard{scroll-snap-align:start;display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.carousel .ccard:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.carousel .cthumb{aspect-ratio:4/3;background:#f0f0f0;display:flex;align-items:center;justify-content:center}
.carousel .cthumb img{width:100%;height:100%;object-fit:cover}
.carousel .cmeta{padding:8px 10px}
.carousel .ctitle{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carousel .cvin{opacity:.7;font-size:12px}
.car-carousel .ctrack{grid-auto-columns:300px}
@media (max-width:640px){.car-carousel .ctrack{grid-auto-columns:260px}}