/* Карточка автомобиля и каталог направления В. */

/* Карточка: галерея, смета-выписка, характеристики — из car.css макета. */
.car-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.car-heading .eyebrow { margin-bottom: 16px; }
.car-heading h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
.car-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.car-information { display: grid; gap: 32px; min-width: 0; }
.gallery { padding: 16px; border-radius: 32px; }
.gallery-main { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 24px; background: var(--tint); }
.gallery-main img { height: 100%; }
.gallery-main .placeholder { height: 100%; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px 8px; }
.gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-thumbnails button { width: 96px; height: 64px; padding: 0; border: 3px solid var(--clear); border-radius: 16px; overflow: hidden; background: var(--field); }
.gallery-thumbnails button[aria-pressed='true'] { border-color: var(--accent); }
.gallery-thumbnails img { height: 100%; }
.photo-note { padding: 8px; }
.specifications { padding: 32px; }
.specifications h2 { font-size: 1.75rem; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin: 32px 0 0; }
.spec-grid dt { color: var(--muted); }
.spec-grid dd { margin: 8px 0 0; font-weight: 600; }
.inspection { display: flex; gap: 24px; padding: 8px; }
.inspection h2 { font-size: 1.5rem; }
.inspection p { color: var(--muted); margin-top: 16px; }
.inspection-icon, .estimate-icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 16px; background: var(--tint); color: var(--accent); }
.estimate { padding: 32px; }
.estimate-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.estimate-heading .eyebrow { margin-bottom: 8px; }
.estimate-heading h2 { font-size: 1.75rem; }
.estimate-subtitle { margin-top: 16px; }
.estimate-rows { margin: 24px 0 0; }
.estimate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.estimate-row dt { color: var(--muted); }
.estimate-row dd { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.estimate-total { margin-top: 24px; padding: 24px; background: var(--tint); border-radius: 24px; display: grid; gap: 8px; }
.estimate-total strong { font-size: clamp(2rem, 3.3vw, 2.75rem); line-height: 1.1; font-weight: 650; white-space: nowrap; }
.delivery { display: flex; gap: 16px; align-items: center; padding-block: 24px; }
.delivery > span { color: var(--accent); }
.delivery strong { font-size: 1.125rem; font-weight: 600; }
.delivery p { margin-top: 8px; }
.estimate .button { width: 100%; }
.estimate-note { margin-top: 24px; }
.unavailable { padding: 40px; display: grid; gap: 24px; justify-items: start; }
@media (max-width: 1100px) {
  .car-layout { gap: 24px; grid-template-columns: 1.15fr 1fr; }
  .estimate { padding: 24px; }
  .estimate-row { gap: 8px; }
}
@media (max-width: 900px) {
  .car-layout { grid-template-columns: 1fr; }
  .estimate { padding: 32px; }
  .estimate-total strong { font-size: 2.75rem; }
}
@media (max-width: 540px) {
  .car-heading { flex-direction: column; gap: 16px; }
  .gallery { border-radius: 24px; padding: 8px; }
  .gallery-main { aspect-ratio: 1.2; border-radius: 16px; }
  .gallery-controls { padding: 16px 8px 8px; flex-direction: column; align-items: stretch; gap: 8px; }
  .gallery-controls > p { text-align: right; white-space: nowrap; }
  .gallery-thumbnails button { width: 64px; height: 56px; }
  .specifications { padding: 24px; border-radius: 24px; }
  .spec-grid { gap: 24px 16px; }
  .inspection { padding: 0; gap: 16px; }
  .inspection-icon { display: none; }
  .estimate { padding: 24px; border-radius: 24px; }
  .estimate-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .estimate-total { padding: 24px 16px; }
  .estimate-total strong { font-size: 2rem; }
}

/* Каталог и витрина: отборы, лента стран, постраничка — из catalog.css макета. */
.catalog-layout { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 32px; align-items: start; }
.filter-panel { padding: 24px; border-radius: 24px; }
.filter-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-weight: 600; }
.filter-panel summary::-webkit-details-marker { display: none; }
.filter-panel summary svg { color: var(--accent); }
.filter-fields { display: grid; gap: 24px; padding-top: 24px; }
.filter-fields .field select { background: var(--field); box-shadow: none; padding: 16px 8px 16px 16px; }
.filter-fields .field select:disabled { color: var(--muted); opacity: 1; cursor: default; }
.filter-fields .button { padding: 16px 8px; }
.results-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; min-height: 48px; margin-bottom: 24px; }
.results-heading h2 { font-size: 1.5rem; }
.catalog-cards { gap: 24px; }
.catalog-cards .vehicle-content { padding: 24px 16px; }
.catalog-cards .vehicle-title { font-size: 1.25rem; }
.catalog-cards .price { font-size: 1.5rem; }
.catalog-cards .vehicle-price { margin-top: 16px; }
.catalog-cards .vehicle-meta { font-size: 1rem; }
.catalog-end { padding-block: 32px; text-align: center; color: var(--muted); }
.empty-state { padding: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.empty-state p { color: var(--muted); max-width: 48ch; }
.empty-icon { width: 80px; height: 80px; display: grid; place-items: center; background: var(--tint); border-radius: 24px; color: var(--accent); }
.empty-icon svg { width: 40px; height: 40px; }
@media (max-width: 1200px) {
  .catalog-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
  .catalog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reset-filters { align-self: end; }
}
@media (max-width: 540px) {
  .filter-panel { padding: 16px; }
  .filter-fields { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .catalog-cards { grid-template-columns: 1fr; }
  .catalog-cards .vehicle-content { padding: 24px; }
  .catalog-cards .price { font-size: 1.75rem; }
  .results-heading { margin-bottom: 16px; }
  .empty-state { padding: 32px 24px; }
  .empty-state .button { width: 100%; }
}

/* Лента стран: у макета её нет — там страна была полем отбора. У нас страны
   ещё и отдельные адреса, они попадают в карту сайта, поэтому лента ссылок */
.country-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.country-strip a { min-height: 48px; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.country-strip a:hover { color: var(--accent); background: var(--tint); }
.country-strip a.is-current { color: var(--accent-ink); background: var(--accent); }

/* 🔴 У макета миниатюры — кнопки, живущие скриптом. У нас это ссылки
   на оригиналы: они открываются и без JavaScript. Правила ниже повторяют
   вид кнопок макета для ссылок, иначе снимки шли колонкой во всю ширину */
.gallery-thumbnails a { display: block; flex: 0 0 auto; width: 96px; height: 64px; overflow: hidden; border: 3px solid var(--clear); border-radius: 16px; background: var(--field); }
.gallery-thumbnails a.is-active, .gallery-thumbnails a[aria-current='true'] { border-color: var(--accent); }
.gallery-thumbnails a img { height: 100%; }
/* Миниатюр у нас до двенадцати, а не две: лишние прокручиваются вбок,
   а не растят страницу */
.gallery-thumbnails { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }