/* EngineXpress. Каталог: раздел, марка, модель, поиск */
.cat { padding-bottom: var(--space-24); }
.cat__head { margin-bottom: var(--space-8); }
.cat__title { font: 700 40px/46px var(--font-sans); letter-spacing: -.02em; text-wrap: balance; max-width: 900px; }
.cat__count { margin-top: var(--space-2); font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* Следующий уровень: разделы, марки, модели */
.cat__next { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-10); }
.cat__next-a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font: 500 15px/20px var(--font-sans); text-decoration: none; transition: border-color .25s var(--ease), background .25s var(--ease); }
.cat__next-a span { color: var(--ink-3); font-size: 13px; }
.cat__next-a:hover { border-color: var(--brand-tint); background: var(--brand-soft); }
.cat__next-a.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.cat__next-a.is-active span { color: var(--on-brand-muted); }

.cat__layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-10); align-items: start; }

/* Левая колонка */
.cat__side { position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100vh - var(--header-h) - var(--space-8)); overflow: auto; scrollbar-width: thin; padding-right: 4px; }
.cat__side-head { display: none; }
.tree { display: grid; gap: 2px; padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.tree__a, .tree__b { display: flex; justify-content: space-between; gap: var(--space-3); padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 500 15px/20px var(--font-sans); }
.tree__a span, .tree__b span { color: var(--ink-3); font-weight: 400; font-size: 13px; }
.tree__a:hover, .tree__b:hover { background: var(--bg-alt); }
.tree__a.is-open { font-weight: 600; }
.tree__a.is-active, .tree__b.is-active { background: var(--brand-soft); color: var(--brand); }
.tree__sub { display: grid; gap: 1px; margin: 2px 0 6px 12px; padding-left: 8px; border-left: 1px solid var(--line); }
.tree__b { padding: 7px 10px; font-size: 14px; font-weight: 400; }
.tree__b.is-open { font-weight: 600; }
.tree__models { display: grid; gap: 1px; margin: 2px 0 6px 10px; padding-left: 8px; border-left: 1px solid var(--line); }
.tree__m { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 10px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 19px; }
.tree__m span { color: var(--ink-3); font-size: 13px; }
.tree__m:hover { background: var(--bg-alt); color: var(--ink); }
.tree__m.is-active { background: var(--brand-soft); color: var(--brand); }

.flt { padding-top: var(--space-6); display: grid; gap: var(--space-6); }
.flt__g { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.flt__g legend { padding: 0; margin-bottom: 10px; font: 600 15px/20px var(--font-sans); color: var(--ink); }
.flt__g--grid { grid-template-columns: 1fr 1fr; }
.flt .ex-check span { display: flex; gap: 6px; }
.flt .ex-check i { font-style: normal; color: var(--ink-3); font-size: 13px; }
.flt__price { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.flt__price .ex-input { height: 42px; padding: 0 12px; font-size: 15px; }
.flt__actions { display: grid; gap: var(--space-3); justify-items: center; }
.js .flt__actions .ex-btn { display: none; }
.js .cat__side.is-drawer .flt__actions .ex-btn { display: flex; }

/* Правая часть */
.cat__bar { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.cat__filters-btn { display: none; }
.cat__found { color: var(--ink-2); font-size: 15px; }
.cat__found b { color: var(--ink); }
.cat__sort { margin-left: auto; display: flex; gap: var(--space-2); }
.cat__sort .ex-select { height: 40px; width: auto; min-width: 220px; font-size: 15px; }
.cat__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.cat__chips .ex-chip .ex-ic { width: 14px; height: 14px; }

.cat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-5); }
.cat__vin { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-8); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--brand); color: var(--on-brand); }
.cat__vin h2 { font: 700 24px/30px var(--font-sans); }
.cat__vin p { grid-column: 1; color: var(--on-brand-muted); font-size: 16px; line-height: 24px; max-width: 560px; }
.cat__vin .ex-btn { grid-column: 2; grid-row: 1 / span 2; }

.cat__empty { padding: var(--space-10); border-radius: var(--radius-lg); background: var(--bg-alt); }
.cat__empty h2 { font: 700 24px/30px var(--font-sans); margin-bottom: var(--space-2); }
.cat__empty p { color: var(--ink-2); font-size: 16px; line-height: 26px; max-width: 620px; }
.cat__empty a { color: var(--accent); }
.cat__empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-12); }
.pager__a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 500; }
.pager__a:hover { border-color: var(--brand-tint); background: var(--brand-soft); }
.pager__a.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.cat__seo { max-width: 820px; margin-top: var(--space-24); padding-top: var(--space-10); border-top: 1px solid var(--line); }
.cat__seo h2 { font: 700 26px/32px var(--font-sans); margin-bottom: var(--space-4); }
.cat__seo p { color: var(--ink-2); font-size: 16px; line-height: 26px; }
.cat__seo p + p { margin-top: var(--space-3); }

.cat__overlay { position: fixed; inset: 0; z-index: 60; background: #020b4766; }
.cat__overlay[hidden] { display: none; }

@media (max-width: 1080px) {
  .cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cat__layout { grid-template-columns: minmax(0, 1fr); }
  .cat__filters-btn { display: inline-flex; }
  .cat__side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(360px, 88vw); max-height: none; padding: 0 var(--space-4) var(--space-6); background: var(--bg); transform: translateX(-102%); transition: transform .35s var(--ease); }
  .cat__side.is-drawer { transform: none; box-shadow: var(--shadow-lg); }
  .cat__side-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 60px; margin-bottom: var(--space-2); background: var(--bg); font-size: 18px; }
  .cat__side-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-md); background: var(--bg-alt); color: var(--ink); }
  .flt__actions { position: sticky; bottom: 0; padding: var(--space-3) 0; background: var(--bg); }
  .cat__sort { flex: 1; justify-content: flex-end; }
  .cat__sort .ex-select { min-width: 0; width: 100%; max-width: 230px; }
  .cat__found { display: none; }
}
@media (max-width: 640px) {
  .cat__title { font-size: 28px; line-height: 34px; }
  .cat__next { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-4)) var(--space-6); padding: 0 var(--space-4); }
  .cat__next-a { flex: none; }
  .cat__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .cat__vin { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); }
  .cat__vin .ex-btn { grid-column: 1; grid-row: auto; margin-top: var(--space-3); justify-self: start; }
  .cat__empty { padding: var(--space-6); }
  .cat__seo { margin-top: var(--space-16); }
}
@media (max-width: 860px) { .cat__sort { min-width: 0; } .cat__sort .dd__btn { min-width: 0; } .cat__filters-btn { flex: none; } }