/* Exact inventory styling from the supplied reference. */
.inv{--ink:#1a3365;--red:#ca9e66;--red-d:#b88a5a;--text:#4a5568;--line:#d8dfea;
     --tint:#eaeef5;--brand:#023e84;
     font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
     color:var(--ink);-webkit-font-smoothing:antialiased;background:#fff;--font-display:'Archivo','Arial Narrow',Helvetica,sans-serif}
.inv *{box-sizing:border-box}
.inv__wrap{max-width:1280px;margin:0 auto;padding:0 20px}

/* шапка страницы */
.inv__head{padding:26px 0 18px}
.inv__eyebrow{font-size:14px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
              color:var(--ink);margin:0 0 10px;display:flex;align-items:center;gap:10px}
.inv__eyebrow:before{content:"";width:28px;height:3px;background:var(--red)}
.inv__h1{font-family:var(--font-display);font-size:30px;line-height:1.06;font-weight:900;letter-spacing:-.02em;margin:0 0 8px}
/* длина строки: во всю ширину контейнера абзац доходил до 140 знаков */
.inv__lead{font-size:17px;line-height:1.5;color:var(--text);margin:0;max-width:52ch}
.inv__h1{max-width:20ch}

/* фильтры */
.inv__tools{border:1px solid var(--line);background:var(--tint);margin:0 0 22px}
.inv__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
             width:100%;min-height:56px;padding:0 16px;border:0;background:none;cursor:pointer;
             font:inherit;font-size:17px;font-weight:800;color:var(--ink);text-align:left}
.inv__toggle small{display:block;font-size:14px;font-weight:500;color:var(--text);margin-top:2px}
.inv__toggle i{font-style:normal;font-size:20px;line-height:1;transition:transform .2s}
.inv__tools.is-open .inv__toggle i{transform:rotate(180deg)}
.inv__panel{display:none;padding:0 16px 16px;border-top:1px solid var(--line)}
.inv__tools.is-open .inv__panel{display:block}
.inv__field{display:block;margin:14px 0 0}
.inv__field span{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;
                 text-transform:uppercase;color:#6a6a6a;margin:0 0 6px}
.inv__field select,.inv__field input{width:100%;height:52px;font:inherit;font-size:16px;
  padding:0 12px;border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:0}
.inv__field select:focus,.inv__field input:focus{outline:none;border-color:var(--ink)}
.inv__reset{margin:16px 0 0;min-height:48px;width:100%;border:2px solid var(--ink);
  background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:800;
  cursor:pointer;border-radius:10px}

.inv__count{font-size:15px;color:var(--text);margin:0 0 14px}
.inv__count b{color:var(--ink)}

/* карточка машины */
/* Карточки витрины проявляются по мере подхода к экрану и отзываются на
   курсор: кадр наезжает, стрелка темнеет. Скрытое стартовое состояние висит
   на классе js-rise, который ставит скрипт: без JavaScript витрина обычная.
   Наблюдаем за каждой карточкой отдельно — порог, взятый от всей сетки,
   при 28 машинах не набирался, и первый экран открывался пустым. */
.inv__grid{display:grid;gap:20px;margin:0 0 40px}
.js-rise .inv__card{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.16,.84,.44,1),transform .5s cubic-bezier(.16,.84,.44,1)}
.js-rise .inv__card.is-in{opacity:1;transform:none}
.inv__media img{transition:transform .55s cubic-bezier(.16,.84,.44,1)}
.inv__card:hover .inv__media img{transform:scale(1.04)}
.inv__card:hover .inv__go{color:var(--ink)}
.inv__card:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .js-rise .inv__card{opacity:1;transform:none;transition:none}
  .inv__media img,.inv__card:hover .inv__media img{transition:none;transform:none}
}
.inv__card[hidden]{display:none}
.inv__card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
           background:#fff;border-radius:14px;overflow:hidden;
           transition:border-color .15s,box-shadow .15s}
.inv__card:hover{border-color:var(--ink)}
.inv__card:hover{border-color:var(--ink)}
.inv__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--tint)}
.inv__media img{width:100%;height:100%;object-fit:cover;display:block}
.inv__photo-empty{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:20px;
  color:#5d6675;font-size:13px;font-weight:800;letter-spacing:.1em;text-align:center;text-transform:uppercase}
/* Метки поверх кадра: слева сверху, чтобы не спорить с ценой справа. */
.inv__badges{position:absolute;top:0;left:0;display:flex;flex-direction:column;
             align-items:flex-start;gap:4px;padding:10px}
.inv__badges span{font-size:12px;font-weight:900;letter-spacing:.12em;
                  text-transform:uppercase;padding:6px 10px;line-height:1}
.inv__badges .is-new{background:var(--ink);color:#fff}
.inv__badges .is-hot,.inv__badges .is-deal{background:#c62828;color:#fff;
  font-size:18px;padding:9px 15px}
.inv__body{padding:16px 16px 18px}
.inv__row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.inv__ym{font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
         color:#8a6528;margin:0}
.inv__price{flex:0 0 auto;background:var(--ink);color:#fff;font-size:19px;font-weight:800;
            padding:7px 12px;white-space:nowrap}
.inv__price--sold{background:#c62828;font-size:18px;padding:9px 15px;
  letter-spacing:.12em;text-transform:uppercase}
.inv__money{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.inv__compare{display:flex;align-items:center;gap:7px;font-size:12px;color:#6a6a6a;white-space:nowrap}
.inv__compare del{font-weight:700}.inv__compare small{font-size:12px;font-weight:800;color:#8a6528}
.inv__model{font-size:25px;line-height:1.12;font-weight:900;letter-spacing:-.02em;
            margin:5px 0 0;color:var(--ink)}
/* Линия под моделью идёт почти во всю карточку — она отделяет название
   от характеристик, а короткий штрих читался как случайный элемент. */
.inv__rule{height:3px;background:var(--red);width:100%;margin:12px 0 0}
.inv__chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.inv__chips li{background:var(--tint);border:1px solid var(--line);padding:6px 11px;
               font-size:15px;font-weight:600;color:var(--ink)}
.inv__vin{margin:12px 0 0;font-size:14px;letter-spacing:.04em;color:#6a6a6a;
          font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.inv__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
           margin:14px 0 0;font-size:15px;color:var(--text)}
.inv__stock{font-weight:700;color:var(--brand)}
.inv__go{font-weight:800;color:#8a6528}

.inv__empty{padding:40px 0;text-align:center;color:var(--text);font-size:17px}

/* Дополнительная цена защищена данными проекта, но на узкой карточке её
   длинная строка не должна обрезаться. Обычная donor-карточка без compare
   остаётся без изменений. */
@media (max-width:420px){
  .inv__compare{flex-direction:column;align-items:flex-end;gap:0}
}

@media (min-width:768px){
  .inv__wrap{padding:0 40px}
  .inv__h1{font-size:42px}
  .inv__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .inv__toggle{display:none}
  .inv__panel,.inv__tools.is-open .inv__panel{display:grid;
    grid-template-columns:repeat(4,1fr);gap:0 16px;padding:16px 20px;border-top:0}
  .inv__reset{grid-column:2/-1;justify-self:start;align-self:end;width:auto;min-width:200px;padding:0 26px}
}
@media (min-width:1100px){
  .inv__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inv__panel,.inv__tools.is-open .inv__panel{grid-template-columns:repeat(5,minmax(0,1fr))}
  .inv__reset{grid-column:1/-1}
}