/* Каталог и карточка модели. Отдельный файл, чтобы не трогать site.css,
   от которого зависит главная. Палитра и типографика — те же переменные. */

.crumbs{padding:18px 0 0;font-size:13px;color:#8B94A3}
.crumbs a{color:#8B94A3}
.crumbs a:hover{color:#E6EAF0}
.crumbs span{margin:0 4px}

.cat-head{padding:22px 0 26px}
.cat-head h1{font:700 clamp(26px,4vw,40px)/1.1 var(--f-disp,inherit);margin:0 0 10px;letter-spacing:-.01em}
.cat-head__d{max-width:70ch;color:#98A1AF;font-size:15px;line-height:1.6;margin:0}

.cat-layout{display:grid;grid-template-columns:236px 1fr;gap:32px;align-items:start;padding-bottom:64px}
@media(max-width:900px){.cat-layout{grid-template-columns:1fr;gap:18px}}

/* ——— фильтры ——— */
.filters{position:sticky;top:76px;background:#12171E;border:1px solid #1E252E;border-radius:10px;padding:16px}
@media(max-width:900px){.filters{position:static}}
.filters__hd{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:#8B94A3;margin-bottom:14px}
.filters__reset{background:none;border:0;color:#D8281F;font-size:12px;cursor:pointer;padding:0}
.f-grp{border:0;padding:0;margin:0 0 18px}
.f-grp legend{font-size:12px;color:#8B94A3;margin-bottom:8px;padding:0}
.f-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip input,.f-chk input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;padding:6px 10px;border:1px solid #263040;border-radius:6px;
  font-size:13px;color:#B9C2CF;cursor:pointer;transition:.15s}
.chip input:checked+span{background:#D8281F;border-color:#D8281F;color:#fff}
.chip input:focus-visible+span{outline:2px solid #6EA8FF;outline-offset:2px}
.f-chk{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;color:#B9C2CF;cursor:pointer}
.f-chk span{position:relative;padding-left:24px}
.f-chk span::before{content:"";position:absolute;left:0;top:1px;width:15px;height:15px;
  border:1px solid #364152;border-radius:3px;background:#0E1116}
.f-chk input:checked+span::before{background:#D8281F;border-color:#D8281F}
.f-chk input:checked+span::after{content:"";position:absolute;left:5px;top:4px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.f-chk input:focus-visible+span::before{outline:2px solid #6EA8FF;outline-offset:2px}

/* ——— строка результатов ——— */
.cat-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.cat-bar__n{margin:0;font-size:14px;color:#98A1AF}
.cat-bar__n span{color:#E6EAF0;font-weight:600}
.cat-bar__sort{font-size:13px;color:#8B94A3;display:flex;align-items:center;gap:8px}
.cat-bar__sort select{background:#12171E;color:#E6EAF0;border:1px solid #263040;border-radius:6px;
  padding:6px 8px;font:inherit;font-size:13px}

/* ——— сетка ——— */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr}}

.pcard{background:#12171E;border:1px solid #1E252E;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s}
.pcard:hover{border-color:#2C3746}
.pcard[hidden]{display:none}
/* contain, а не cover: техника снята по-разному, и обрезка по краям съедала
   то габариты, то половину машины. Лучше поля по бокам, чем «зум», на котором
   не понять, что продаётся. */
.pcard__pic{display:block;position:relative;aspect-ratio:4/3;background:#0E1116;overflow:hidden}
.pcard__pic img{width:100%;height:100%;object-fit:contain;display:block}
/* Мощность прямо на снимке: на превью каталога машины отличаются в основном
   размером, а масштаб по фото не читается — подпись под картинкой замечают не все. */
.pcard__badge{position:absolute;left:8px;top:8px;z-index:1;
  padding:3px 8px;border-radius:6px;font:600 13px/1.25 var(--f-disp,inherit);
  color:#E6EAF0;background:rgba(14,17,22,.82);backdrop-filter:blur(2px)}
.pcard__badge b{font-weight:700}
.pcard__badge span{font-weight:400;color:#B7BFCB;margin-left:5px;font-size:12px}
.pcard__pic .ph{width:100%;height:100%;display:block}
.pcard__b{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard__kw{margin:0;font:700 22px/1 var(--f-disp,inherit);color:#E6EAF0}
.pcard__kw small{font-size:13px;font-weight:400;color:#8B94A3;margin-left:4px}
.pcard__n{margin:0;font-size:15px;font-weight:600;line-height:1.3}
.pcard__n a{color:#E6EAF0;text-decoration:none}
.pcard__n a:hover{color:#fff;text-decoration:underline}
.pcard__eng{margin:0;font-size:13px;color:#8B94A3}
.pcard__meta{margin:0;display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;padding:3px 7px;border:1px solid #263040;border-radius:4px;color:#98A1AF}
.tag--avr{border-color:#2E4A2E;color:#7FBF7F}
.pcard__stock{margin:0;font-size:13px}
.stock--in_stock_ufa{color:#7FBF7F}
.stock--in_stock_supplier{color:#B9C2CF}
.stock--order,.stock--on_request{color:#8B94A3}
.pcard__price{margin:auto 0 0;padding-top:8px;font:700 18px/1 var(--f-disp,inherit);color:#E6EAF0}
.pcard__btns{display:flex;gap:10px;align-items:center;margin-top:10px}
.pcard__btns .btn{flex:1;text-align:center}
.cmp{display:flex;align-items:center;gap:6px;font-size:13px;color:#8B94A3;cursor:pointer;white-space:nowrap}
.cmp input{width:15px;height:15px;accent-color:#D8281F}

.cat-empty{text-align:center;padding:56px 20px;color:#98A1AF;font-size:15px;
  border:1px dashed #263040;border-radius:10px}
.cat-empty .btn{display:inline-block;margin-top:14px}

/* ——— панель сравнения ——— */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#12171E;
  border-top:1px solid #263040;box-shadow:0 -8px 24px rgba(0,0,0,.4)}
.cmpbar__in{display:flex;align-items:center;gap:14px;padding:12px 0;font-size:14px;color:#B9C2CF}
.cmpbar__list{flex:1;color:#8B94A3;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpbar__clear{background:none;border:0;color:#8B94A3;font-size:13px;cursor:pointer}
@media(max-width:640px){.cmpbar__list{display:none}}

/* ═══════════ карточка модели ═══════════ */
.mdl{padding-bottom:72px}
.mdl__top{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start;padding:20px 0 40px}
@media(max-width:900px){.mdl__top{grid-template-columns:1fr;gap:22px}}
.mdl__gal{background:#12171E;border:1px solid #1E252E;border-radius:10px;overflow:hidden}
.mdl__img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block}
.mdl__gal .ph{width:100%;aspect-ratio:4/3}
.mdl__nophoto{margin:0;padding:12px 14px;font-size:13px;color:#8B94A3;border-top:1px solid #1E252E}
.mdl__thumbs{display:flex;gap:8px;padding:10px;border-top:1px solid #1E252E}
.mdl__th{width:64px;height:48px;padding:0;border:1px solid #263040;border-radius:4px;overflow:hidden;
  background:none;cursor:pointer}
.mdl__th.is-on{border-color:#D8281F}
.mdl__th img{width:100%;height:100%;object-fit:cover;display:block}

.mdl__line{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#8B94A3}
.mdl__hd h1{margin:0 0 12px;font:700 clamp(24px,3.4vw,34px)/1.15 var(--f-disp,inherit);letter-spacing:-.01em}
.mdl__kw{margin:0 0 20px;font:700 42px/1 var(--f-disp,inherit);color:#E6EAF0}
.mdl__kw span{font-size:22px;font-weight:400;color:#98A1AF;margin-left:4px}
.mdl__kw small{display:block;font-size:14px;font-weight:400;color:#8B94A3;margin-top:6px}
.mdl__key{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:0 0 22px;padding:16px 0;
  border-top:1px solid #1E252E;border-bottom:1px solid #1E252E}
.mdl__key dt{font-size:12px;color:#8B94A3;margin-bottom:2px}
.mdl__key dd{margin:0;font-size:14px;color:#E6EAF0}
.mdl__price{margin:0 0 6px;font:700 28px/1 var(--f-disp,inherit);color:#E6EAF0}
.mdl__stock{margin:0 0 4px;font-size:14px}
.mdl__upd{color:#8B94A3;font-size:12px;margin-left:6px}
.mdl__honest{margin:0 0 18px;font-size:13px;color:#8B94A3}
.mdl__cta{display:flex;flex-wrap:wrap;gap:10px}

.mdl__sec{padding:34px 0;border-top:1px solid #1E252E}
.mdl__sec h2{margin:0 0 18px;font:700 clamp(19px,2.4vw,24px)/1.2 var(--f-disp,inherit)}
.mdl__sub{margin:-8px 0 18px;color:#98A1AF;font-size:14px}

.specs{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
@media(max-width:760px){.specs{grid-template-columns:1fr;gap:22px}}
.specs__g h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:#8B94A3}
.specs__g dl{margin:0}
.specs__g dl>div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  border-bottom:1px solid #171D25;font-size:14px}
.specs__g dt{color:#98A1AF;flex:0 0 auto}
.specs__g dd{margin:0;color:#E6EAF0;text-align:right}
.specs__g .is-unknown dd{color:#66707E;font-style:italic}
/* Неизвестные характеристики — одной строкой внизу группы, а не отдельной
   строкой на каждую. Группа, где не известно ничего, сжимается до заголовка
   с этой строкой и места почти не занимает. */
.specs__u{margin:8px 0 0;color:#8B94A3;font-size:13px;line-height:1.45}
.specs__g--empty{padding-bottom:4px}
.specs__g--empty h3{margin-bottom:4px}

.mdl__cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.terms__i h3{margin:0 0 6px;font-size:14px;color:#E6EAF0}
.terms__i p{margin:0;font-size:14px;line-height:1.6;color:#98A1AF}

.tcof{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.tcof label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#8B94A3}
.tcof input{background:#0E1116;border:1px solid #263040;border-radius:6px;padding:9px 10px;
  color:#E6EAF0;font:inherit;font-size:15px}
.tco-out .tco__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 14px}
.tco-out .tco__list>div{background:#12171E;border:1px solid #1E252E;border-radius:8px;padding:12px 14px}
.tco-out dt{font-size:12px;color:#8B94A3;margin-bottom:4px}
.tco-out dd{margin:0;font:600 17px/1.2 var(--f-disp,inherit);color:#E6EAF0}
.tco__warn{font-size:13px;line-height:1.6;color:#8B94A3;margin:0 0 8px}

.cat-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cat-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cat-grid--3{grid-template-columns:1fr}}

.leadf{max-width:520px;display:flex;flex-direction:column;gap:14px}
.leadf textarea,.leadf input[type=tel]{background:#0E1116;border:1px solid #263040;border-radius:6px;
  padding:11px 12px;color:#E6EAF0;font:inherit;font-size:15px;width:100%}

/* Печать: менеджер отправляет карточку клиенту PDF-ом. Убираем всё, что в
   бумаге бессмысленно (навигация, кнопки, калькулятор, липкая панель), и
   переводим текст в чёрное по белому — иначе принтер зальёт лист тёмным. */
@media print{
  .nav,.foot,.mdl__cta,#tco,.cmpbar,.crumbs,.mdl__thumbs{display:none!important}
  body{background:#fff!important;color:#000!important}
  .mdl__top{grid-template-columns:1fr 1fr;gap:20px}
  .mdl,.wrap{max-width:none;padding:0}
  h1,h2,h3,dt,dd,p,.mdl__kw,.mdl__price{color:#000!important}
  .specs__g dt,.mdl__key dt,.mdl__sub,.terms__i p{color:#444!important}
  .specs__g .is-unknown dd{color:#777!important}
  .mdl__gal,.mdl__sec,.specs__g dl>div{border-color:#ccc!important;background:#fff!important}
  .mdl__sec{page-break-inside:avoid}
}

/* Пометка «фото серии»: снимок не самой модели, а близкой машины того же
   производителя. Молчать об этом нельзя — клиент сверит с тем, что приехало. */
.pcard__photonote{margin:0;font-size:11px;color:#8B94A3;font-style:italic}

/* ═══════════ сравнение и КП ═══════════ */
.cmp-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.cmp-only{display:flex;align-items:center;gap:7px;font-size:14px;color:#98A1AF;cursor:pointer}
.cmp-only input{width:15px;height:15px;accent-color:#D8281F}
.cmp-kp{background:#12171E;border:1px solid #1E252E;border-radius:10px;padding:16px;margin-bottom:20px}
.cmp-kp__h{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:#8B94A3}
.cmp-kp__f{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
@media(max-width:640px){.cmp-kp__f{grid-template-columns:1fr}}
.cmp-kp__f label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#8B94A3}
.cmp-kp__f input{background:#0E1116;border:1px solid #263040;border-radius:6px;padding:9px 10px;
  color:#E6EAF0;font:inherit;font-size:15px}
.cmp-scroll{overflow-x:auto}
.cmp-t{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.cmp-t th,.cmp-t td{padding:10px 12px;text-align:left;border-bottom:1px solid #1B222C;vertical-align:top}
.cmp-t thead th{font-size:15px;color:#E6EAF0;border-bottom:1px solid #2C3746}
.cmp-t thead th a{color:#E6EAF0}
.cmp-t__note{display:block;font-size:11px;font-style:italic;color:#8B94A3;font-weight:400}
.cmp-t tbody th{color:#98A1AF;font-weight:400;width:190px}
.cmp-t td{color:#E6EAF0}
.cmp-t td.is-unknown{color:#8B94A3;font-style:italic}
.cmp-t tr.is-diff td{background:#161C24}
.cmp-t tr.is-diff th{color:#B9C2CF}

.kp-head{padding:0 0 16px;border-bottom:1px solid #263040;margin-bottom:18px}
.kp-head__co{margin:0;font-weight:600}
.kp-head__c,.kp-head__meta{margin:2px 0 0;font-size:13px;color:#98A1AF}

/* Режим КП: печатаем только шапку с реквизитами и таблицу. */
@media print{
  .nav,.foot,.crumbs,.cat-head,.cmp-actions,.cmp-kp,.cmpbar{display:none!important}
  body{background:#fff!important;color:#000!important}
  .kp-head{display:block!important;border-color:#999!important}
  .kp-head__co,.kp-head__c,.kp-head__meta{color:#000!important}
  .cmp-t th,.cmp-t td{color:#000!important;border-color:#ccc!important}
  .cmp-t tr.is-diff td{background:#f4f4f4!important}
  .cmp-t td.is-unknown{color:#777!important}
  .cmp-scroll{overflow:visible}
  .cmp-t{min-width:0}
}

/* Витрина на главной: четыре в ряд на десктопе — блок не должен спорить
   с каталогом по высоте, он лишь показывает, что отгрузка реальна. */
.cat-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.cat-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cat-grid--4{grid-template-columns:1fr}}
.sec--showcase .cta-line{margin-top:24px;text-align:center}
.pcard__size{margin:0;font-size:12px;color:#8B94A3}

/* Резерв высоты под таблицу сравнения: она рисуется скриптом, и без резерва
   содержимое прыгало на пол-экрана при её появлении. */
.cmp-slot{min-height:680px}
@media(max-width:560px){.cmp-slot{min-height:760px}}