/* Каталог: панель фильтров и лента карточек.
   Всё на токенах сайта (--or, --bg-r, --b, --fd, --fm, --fb) — своей палитры
   здесь нет намеренно, иначе каталог разойдётся с остальными страницами при
   первой же правке цвета. */

/* ── панель фильтров ──────────────────────────────────────────────────────── */
.fp{border:1px solid var(--b);border-radius:var(--r2);background:var(--bg-r);padding:22px 24px;margin-bottom:26px}
@media(max-width:640px){.fp{padding:16px;border-radius:var(--r)}}

.f-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1px solid var(--b2);
  border-radius:100px;background:transparent;color:var(--m);font-family:var(--fb);font-size:13px;
  white-space:nowrap;transition:border-color .18s,color .18s,background .18s}
.chip:hover{border-color:var(--or);color:var(--w)}
.chip.on{border-color:var(--or);color:var(--or);background:var(--or-dim)}

/* ── марки с логотипами ───────────────────────────────────────────────────── */
.f-makes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.mk{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 8px;border:1px solid var(--b2);
  border-radius:100px;background:transparent;color:var(--m);font-size:13.5px;transition:border-color .18s,color .18s,background .18s}
.mk:hover{border-color:var(--or);color:var(--w)}
.mk.on{background:var(--or);border-color:var(--or);color:#fff}
.mk-ic{width:26px;height:26px;border-radius:50%;background:#fff;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;overflow:hidden}
.mk-ic img{width:19px;height:19px;object-fit:contain}
.mk-ic span{font-family:var(--fd);font-weight:900;font-size:13px;color:#0D0B0A;line-height:1}
.mk.all .mk-ic{background:rgba(255,255,255,.14)}
.mk.all.on .mk-ic{background:rgba(255,255,255,.25)}
.mk.all .mk-ic span{color:#fff}
.mk-more{padding:8px 16px;border-radius:100px;border:1px solid var(--b2);color:var(--m);font-size:13.5px;transition:border-color .18s,color .18s}
.mk-more:hover{border-color:var(--or);color:var(--w)}

/* ── строка полей ─────────────────────────────────────────────────────────── */
.f-line{display:grid;grid-template-columns:1.1fr 1.1fr 1.2fr 1.2fr auto;gap:16px;align-items:end}
@media(max-width:980px){.f-line{grid-template-columns:1fr 1fr;gap:14px}.f-line .f-go{grid-column:1/-1}}
@media(max-width:520px){.f-line{grid-template-columns:1fr}}
.f-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.f-field label{font-size:12.5px;color:var(--m)}
.f-in,.f-sel{padding:12px 14px;background:var(--bg);border:1px solid var(--b2);border-radius:10px;
  color:var(--w);font-family:var(--fb);font-size:14px;outline:none;width:100%;min-width:0}
.f-in:focus,.f-sel:focus{border-color:var(--or)}
.f-in::placeholder{color:var(--m2)}
.f-sel{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff88' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.f-sel option{background:#161514;color:var(--w)}
.f-pair{display:flex;align-items:center;gap:8px}
.f-pair span{color:var(--m2);font-size:13px;flex-shrink:0}
.f-go{padding:12px 26px;background:var(--or);color:#fff;border-radius:10px;font-size:14px;font-weight:600;
  transition:background .2s,transform .2s;white-space:nowrap}
.f-go:hover{background:#4674f0;transform:translateY(-1px)}

.f-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--m);font-size:13.5px;transition:color .18s}
.f-toggle:hover{color:var(--w)}
.f-toggle .n{font-family:var(--fm);font-size:10px;background:var(--or);color:#fff;border-radius:100px;padding:1px 7px}
.f-more{display:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--b)}
.f-more.open{display:block}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.f-acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.f-reset{padding:11px 20px;border:1px solid var(--b2);border-radius:10px;color:var(--m);font-size:13px;transition:color .18s,border-color .18s}
.f-reset:hover{color:var(--w);border-color:var(--or)}

/* ── шапка результатов ────────────────────────────────────────────────────── */
.res{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.res-t{display:flex;align-items:center;gap:12px;min-width:0}
.res-t i{display:block;width:26px;height:1px;background:var(--b2);flex-shrink:0}
.res-t b{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--m);font-weight:400}
.res-n{font-family:var(--fm);font-size:11px;color:var(--w);background:var(--bg-r);border:1px solid var(--b2);
  border-radius:100px;padding:4px 11px;white-space:nowrap}
.res-upd{font-size:12px;color:var(--m2);white-space:nowrap}
@media(max-width:760px){.res-upd{flex-basis:100%;order:9}}
.res-r{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.res-save{padding:9px 16px;border:1px solid var(--b2);border-radius:9px;color:var(--m);font-size:13px;transition:color .18s,border-color .18s;white-space:nowrap}
.res-save:hover{border-color:var(--or);color:var(--w)}
.res-save.on{border-color:var(--or);color:var(--or)}
.res-sort{padding:9px 34px 9px 14px;font-size:13px;width:auto}
.res-view{display:flex;border:1px solid var(--b2);border-radius:9px;overflow:hidden}
.res-view button{padding:9px 11px;color:var(--m);display:flex;transition:background .18s,color .18s}
.res-view button svg{width:16px;height:16px}
.res-view button.on{background:var(--or);color:#fff}

/* ── сетка ────────────────────────────────────────────────────────────────── */
.cars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.cars-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cars-grid{grid-template-columns:1fr}}
.cars-grid.list{grid-template-columns:1fr;gap:12px}
.cars-grid.list .cc{display:grid;grid-template-columns:280px 1fr;align-items:stretch}
.cars-grid.list .cc-img,.cars-grid.list .cc-noimg{aspect-ratio:auto;height:100%;min-height:180px}
@media(max-width:640px){.cars-grid.list .cc{grid-template-columns:1fr}.cars-grid.list .cc-img{aspect-ratio:16/10;min-height:0}}

/* ── карточка ─────────────────────────────────────────────────────────────── */
.cc{position:relative;display:block;color:inherit;background:var(--bg-r);border:1px solid var(--b);
  border-radius:var(--r2);overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.cc:hover{border-color:var(--or);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.42),var(--or-glow)}
/* Пока кадр летит — переливающаяся заглушка на его месте. Первый показ лота
   парсер обслуживает, скачивая фото с площадки (замер: до 2,8 с), и без этого
   в сетке зияли чёрные дыры, которые читаются как «сайт сломался». */
.cc-img{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(100deg,#141312 30%,#1e1c1a 50%,#141312 70%);
  background-size:200% 100%;animation:sh 1.4s linear infinite}
.cc-img.ready{animation:none;background:#0a0a0a}
.cc-img img{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .35s var(--ease),transform .5s var(--ease)}
.cc-img img.on{opacity:1}
.cc:hover .cc-img img{transform:scale(1.05)}
.cc-noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(150deg,#16203a 0%,var(--bg-r) 100%);aspect-ratio:4/3}
.cc-noimg svg{width:38px;height:38px;color:rgba(43,92,230,.5)}

.cc-country{position:absolute;top:12px;left:12px;background:rgba(13,11,10,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:4px 11px;font-family:var(--fm);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cc-wm{position:absolute;top:13px;left:0;right:0;text-align:center;font-family:var(--fb);font-size:11.5px;
  font-weight:500;color:rgba(255,255,255,.5);pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.cc-util{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(13,11,10,.76);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:4px 11px;font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.82)}
.cc-util svg{width:11px;height:11px;color:var(--or)}
.cc-fav{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  background:rgba(13,11,10,.66);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);z-index:3;
  transition:background .18s,color .18s,border-color .18s}
.cc-fav:hover{background:var(--or);border-color:var(--or);color:#fff}
.cc-fav svg{width:15px;height:15px}
.cc-fav.on{color:#ff5a6e}
.cc-fav.on svg{fill:currentColor}

.cc-body{padding:16px 18px 18px}
.cc-name{font-family:var(--fd);font-size:21px;font-weight:900;text-transform:uppercase;line-height:1;margin-bottom:8px}
.cc-spec{font-size:12.5px;color:var(--m);line-height:1.45;margin-bottom:14px;min-height:36px}
.cc-plab{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--m2);margin-bottom:4px}
.cc-price{font-family:var(--fd);font-size:24px;font-weight:900;letter-spacing:.01em;color:var(--w)}
.cc-price.fork{font-size:19px}

/* каркасы на время загрузки — сетка не должна прыгать */
.sk{background:var(--bg-r);border:1px solid var(--b);border-radius:var(--r2);overflow:hidden}
.sk-img{aspect-ratio:4/3;background:linear-gradient(100deg,#141312 30%,#1c1a19 50%,#141312 70%);
  background-size:200% 100%;animation:sh 1.3s linear infinite}
.sk-line{height:12px;margin:16px 18px;border-radius:4px;background:#1c1a19}
.sk-line.s{width:55%}
@keyframes sh{0%{background-position:100% 0}100%{background-position:-100% 0}}

.empty{text-align:center;padding:70px 0;color:var(--m);font-size:15px;line-height:1.6}
.empty b{display:block;font-family:var(--fd);font-size:28px;font-weight:900;text-transform:uppercase;color:var(--w);margin-bottom:10px}

.saved{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.saved a{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--b);
  border-radius:100px;background:var(--bg-r);color:var(--m);font-size:12.5px}
.saved a:hover{border-color:var(--or);color:var(--w)}
.saved a b{font-weight:500;color:var(--w)}
.saved a i{color:var(--m2);font-style:normal;padding-left:2px}
.saved a i:hover{color:#ff5a6e}