/* ─────────────────────────────────────────────────────────
   МАШИНЫ: /cars и /cars/{code}
   Список машин в разборе и разобранных с мини-фильтром по марке
   и модели; карточка машины — сведения, снятые детали, вопрос
   «что снять под заказ». Плитка детали и заголовки — в core.css.
   ───────────────────────────────────────────────────────── */

.page-hero > .wrap{padding-top:32px;padding-bottom:30px}
.page-hero h1{margin:0 0 10px}
.page-hero .lead{margin:0}

/* ── Мини-фильтр ───────────────────────────────────────── */
.cars-page{padding-top:var(--gap)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips + .chips{margin-top:10px}
.chip-link{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;color:var(--ink);
  transition:border-color .13s,color .13s,background .13s}
.chip-link span{font-size:var(--t-xs);color:var(--dim);font-variant-numeric:tabular-nums}
.chip-link:hover{border-color:var(--accent);color:var(--accent)}
.chip-link.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip-link.on span{color:rgba(255,255,255,.8)}
/* Модели — вторым рядом, мельче: уточнение к выбранной марке.
   Выбранная модель — оранжевым контуром, а не тёмной заливкой: сплошной
   оранжевый уже занят маркой, а тёмная плашка рядом с ней читалась как
   «выключено» */
.chips-sub .chip-link{padding:6px 12px;font-size:var(--t-xs)}
.chips-sub .chip-link.on{background:var(--accent-bg);border-color:var(--accent);
  color:var(--accent-dk)}
.chips-sub .chip-link.on span{color:var(--accent)}

/* Выбор марки списком — когда плашками все не показать. Поле стоит в
   одном ряду с плашками, поэтому и выглядит плашкой: та же высота,
   та же рамка, то же скругление. Прямоугольное поле среди пилюль
   выпадало из ряда */
.brand-pick{display:flex;align-items:center;gap:10px;margin-top:10px}
.brand-pick label{margin:0;font-size:var(--t-sm);color:var(--muted);white-space:nowrap}
.brand-pick .combo{width:auto;min-width:250px;max-width:100%}
.brand-pick .combo-input{
  height:36px;padding:0 34px 0 14px;
  border-radius:var(--r-pill);border-color:var(--line);
  font-size:var(--t-sm);font-weight:500;
  background-position:right 14px center;
}
.brand-pick .combo-input:hover{border-color:var(--line-2)}
.brand-pick .combo-input:focus{border-color:var(--accent)}
/* Выпадающий список — от края поля, с тем же скруглением, что у панелей */
.brand-pick .combo-list{border-radius:var(--r)}
/* Без скрипта тут остаётся системный список и кнопка «Показать» */
.brand-pick .field{width:auto;min-width:250px;max-width:100%;height:36px;
  padding:0 12px;border-radius:var(--r-pill);font-size:var(--t-sm)}

@media(max-width:560px){
  .brand-pick{flex-wrap:wrap;gap:6px}
  .brand-pick .combo,
  .brand-pick .field{flex:1 1 100%;min-width:0}
  /* Плашки на телефоне занимали пять рядов до первой машины. Оставляем
     «Все марки» и шесть самых частых, остальные ищутся полем ниже.
     Выбранная марка показывается всегда, даже если она седьмая */
  .chips .chip-link:nth-child(n+8):not(.on){display:none}
}

.cars-count{margin:22px 0 14px;font-size:var(--t-sm);color:var(--muted)}

/* «Показать ещё» под списком */
.more-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:28px 0 8px}
.more-wrap .btn{min-width:240px}
.more-left{font-size:var(--t-xs);color:var(--dim)}

/* ── Плитка машины ─────────────────────────────────────── */
.car-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--gap)}
.car-card{display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--r);overflow:hidden;transition:box-shadow .2s}
.car-card:hover{box-shadow:var(--shadow)}
.car-card:hover .name{color:var(--accent)}
/* 4:3 — как снимок машины с телефона; через padding-top, как у деталей */
.car-card .shot{position:relative;height:0;padding-top:75%;overflow:hidden;
  background:var(--surface-2)}
.car-card .shot img,.car-card .shot .none{position:absolute;inset:0;width:100%;height:100%}
.car-card .shot img{object-fit:cover;transition:transform .35s ease}
.car-card:hover .shot img{transform:scale(1.04)}
.car-card .shot .none{display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:var(--t-sm)}
.car-card .body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.car-card .code{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.04em}
.car-card .name{font-size:var(--t-lg);font-weight:600;line-height:1.25;transition:color .15s}
.car-card .gen{font-size:var(--t-sm);color:var(--muted)}
/* Плашками, а не через «·»: разделитель при переносе вставал в начало
   строки — «· 131 000 км» */
.facts{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:8px 0 0;padding:0;
  font-size:var(--t-xs);color:var(--muted)}
.facts li{background:var(--surface-2);border-radius:3px;padding:3px 8px;white-space:nowrap}
/* Описание на плитке — две строки, целиком — на странице машины */
.car-card .note{margin:8px 0 0;font-size:var(--t-xs);color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.car-card .parts{margin-top:auto;padding-top:12px;font-size:var(--t-sm);font-weight:600;
  color:var(--accent)}
.car-card .parts.none{color:var(--dim);font-weight:500}

/* Статус: «В разборе» — действие ещё возможно (снять под заказ) */
.status{display:inline-block;font-size:11px;font-weight:600;line-height:1;
  padding:6px 9px;border-radius:3px;background:var(--dark);color:#fff}
.status[data-s="dismantling"]{background:var(--accent)}
/* Ждёт разбора — всё на машине: зелёный, «можно заказать что угодно» */
.status[data-s="accepted"]{background:var(--ok)}
.car-card .status{position:absolute;left:10px;top:10px;z-index:2}

/* ── Карточка машины ───────────────────────────────────── */
.car-top{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;margin:16px 0 0;
  padding:32px;background:var(--surface);border-radius:var(--r);align-items:start}
@media(max-width:820px){.car-top{grid-template-columns:1fr;gap:24px;padding:20px}}

.car-shots .big{position:relative;height:0;padding-top:75%;overflow:hidden;
  border-radius:var(--r);background:var(--surface-2)}
.car-shots .big img,.car-shots .big .none{position:absolute;inset:0;width:100%;height:100%}
.car-shots .big img{object-fit:cover}
.car-shots .big .none{display:flex;align-items:center;justify-content:center;color:var(--dim)}
.car-shots .strip{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.car-shots .strip img{flex:0 0 96px;width:96px;height:72px;object-fit:cover;
  border-radius:var(--r)}

.status-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;
  font-size:var(--t-sm);color:var(--muted)}
.car-info h1{font-size:var(--t-2xl);margin:0 0 6px;line-height:1.2}
.car-info .gen{margin:0;color:var(--muted);font-size:var(--t-sm)}

.car-note{margin:18px 0 0;padding:14px 16px;background:var(--surface-2);
  border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;font-size:var(--t-sm)}
.car-note p{margin:4px 0 0;color:var(--muted);line-height:1.55;white-space:pre-line}
.car-info .specs{margin:22px 0 0;border-top:1px solid var(--line)}
.car-info .specs div{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:var(--t-sm)}
.car-info .specs dt{flex:0 0 38%;margin:0;color:var(--muted)}
.car-info .specs dd{flex:1;margin:0}
.car-info .specs dd.mono{font-family:var(--mono);letter-spacing:.06em}
.car-info .specs small{display:block;margin-top:2px;font-family:var(--body);
  font-size:var(--t-xs);letter-spacing:0;color:var(--dim)}
.car-info .specs small a{color:var(--accent)}

.car-info .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.car-info .actions .btn{flex:1;min-width:170px}

section.block{padding:40px 0 0}

/* ── Вопрос по машине ──────────────────────────────────── */
.ask{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:32px;
  background:var(--surface);border-radius:var(--r);align-items:start}
@media(max-width:820px){.ask{grid-template-columns:1fr;gap:20px;padding:22px 20px}}
.ask-text h2{font-weight:400;margin:0 0 14px}
.ask-text h2 b{font-weight:600}
.ask-text p{margin:0 0 10px;color:var(--muted);line-height:1.6}
.ask-form{display:grid;gap:14px}
.ask-form textarea.field{resize:vertical;min-height:90px;font-family:inherit}
.ask-form .field.bad{border-color:var(--err)}
.ask-form .notice{margin:0}
.err{margin:0;color:var(--err);font-size:var(--t-sm)}