/* ==========================================================================
   MIROLINE — страница категории: хлебные крошки, фильтры, панель, сетка
   Медиазапросы страницы держим здесь же, рядом с компонентами:
   responsive.css отвечает за общий каркас сайта.
   ========================================================================== */

/* --- Шапка категории --------------------------------------------------------- */

.cat-head {
  padding-block: var(--sp-6) var(--sp-8);
}

.cat-head__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Заголовок категории мельче общего h1: рядом с ним стоит счётчик моделей,
   и в 62px он перетягивал внимание с самой сетки товаров */
.cat-head__row h1 { font-size: 3rem; }

.cat-head__count {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

.cat-head__lead {
  max-width: 37.4em;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--c-ink-2);
}

/* Лента подкатегорий: на узком экране прокручивается вбок, а не переносится */
.subcats {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
}

.subcats::-webkit-scrollbar { display: none; }

/* Ленту можно тянуть курсором (subcats.js). Атрибуты ставит скрипт:
   data-scrollable — ленте есть куда двигаться, data-dragging — тянут сейчас. */
.subcats[data-scrollable] { cursor: grab; }
.subcats[data-dragging] { cursor: grabbing; }

.subcats a {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
  background: var(--c-surface);
  border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.subcats a:hover { background: var(--c-surface-2); }

.subcats a[aria-current] {
  background: var(--c-ink);
  color: var(--c-bg);
}

/* --- Раскладка страницы -------------------------------------------------------- */

.catalog {
  padding-bottom: var(--sp-16);
}

.catalog__layout {
  display: grid;
  /* ширина колонки нужна и панели: у краёв экрана она уходит в position: fixed
     и своей ширины из грида уже не получает */
  --filters-w: 16.5rem;
  grid-template-columns: var(--filters-w) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* --- Панель фильтров ------------------------------------------------------------ */

/* Десктоп: колонка слева едет за прокруткой — sticky-filters.js сдвигает
   панель внутри этой обёртки, поэтому обёртка тянется на высоту всего ряда.
   Ниже 1024 превращается в выдвижное окно справа — см. медиаблок в конце файла. */
.filters-col {
  align-self: stretch;
  position: relative;
}

.filters {
  /* короткой панели хватает нативного sticky; длинную ведёт sticky-filters.js
     через состояния ниже */
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  padding-right: var(--sp-2);
}

/* панель у края экрана: стоит на месте, товары едут мимо */
.filters[data-stick="top"],
.filters[data-stick="bottom"] {
  position: fixed;
  width: var(--filters-w);
}

.filters[data-stick="top"] { top: calc(var(--header-h) + var(--sp-4)); }
.filters[data-stick="bottom"] { top: auto; bottom: var(--sp-4); }

/* панель едет вместе со страницей от одного края к другому */
.filters[data-stick="park"] {
  position: absolute;
  top: var(--stick-offset, 0px);
  width: var(--filters-w);
}

.filters__head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}

.filter {
  border-bottom: 1px solid var(--c-line);
}

.filter:first-of-type { border-top: 1px solid var(--c-line); }

/* Стикеры идут первыми и рисуются плашками, а не списком: линия над ними
   отделяла их не от соседнего фильтра, а от заголовка панели. Селектор с
   :first-of-type — иначе правило выше (тоже с :first-of-type) сильнее. */
.filter--flags:first-of-type { border-top: 0; }

/* Под последним фильтром линия ничего не отделяет: дальше идёт кнопка сброса
   со своей рамкой, и две черты подряд читались как лишний разделитель. */
.filter:last-of-type { border-bottom: 0; }

.filter__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}

.filter__summary::-webkit-details-marker { display: none; }

.filter__summary:hover { color: var(--c-accent); }

/* стрелка вниз, разворачивается вверх у раскрытой группы */
.filter__summary::after {
  content: "";
  width: .4375rem;
  height: .4375rem;
  margin-left: auto;
  border-right: .0875rem solid currentColor;
  border-bottom: .0875rem solid currentColor;
  transform: translateY(-.125rem) rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}

.filter[open] > .filter__summary::after {
  transform: translateY(1px) rotate(-135deg);
}

/* счётчик выбранного внутри группы */
.filter__mark {
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: .25rem;
  display: none;
  place-items: center;
  font-size: .625rem;
  font-weight: 500;
  color: var(--c-white);
  background: var(--c-accent);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

.filter__mark[data-active] { display: grid; }

.filter__body {
  padding-bottom: var(--sp-6);
}


/* длинные списки не растягивают панель, а прокручиваются внутри.
   18rem подобраны так, чтобы восемь категорий помещались целиком */
.filter__list {
  display: grid;
  gap: var(--sp-3);
  max-height: 18rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* --- Чекбокс фильтра --------------------------------------------------------- */

/* Поле ввода растянуто на всю строку и невидимо, галочку рисует .check__box.
   Так зона нажатия — вся строка, а не квадрат 16×16, который мелковат
   для пальца и не проходит проверку размера цели. */
.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 1.5rem;
  /* тот же кегль, что у подписей цветов (.color-box) и размеров (.size-box) —
     в панели фильтров не должно быть двух разных размеров текста у значений */
  font-size: var(--fs-sm);
  color: var(--c-ink);
  cursor: pointer;
}

.check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.check__box {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-strong);
  border-radius: .1875rem;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.check:has(input:checked) .check__box {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* галочка — две стороны прямоугольника, повёрнутые на 45° */
.check:has(input:checked) .check__box::after {
  content: "";
  width: .5625rem;
  height: .3125rem;
  margin-top: -.125rem;
  border-left: 1.5px solid var(--c-white);
  border-bottom: 1.5px solid var(--c-white);
  transform: rotate(-45deg);
}

.check:has(input:focus-visible) {
  outline: 1px solid var(--c-accent);
  outline-offset: .1875rem;
  border-radius: var(--radius-sm);
}

.check__count {
  margin-left: auto;
  /* не крупнее самой подписи значения */
  font-size: .6875rem;
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

.check:hover { color: var(--c-accent); }

/* значение, под которое не осталось товаров при текущих условиях */
.check[data-empty],
.size-box[data-empty],
.color-box[data-empty] {
  opacity: .35;
  cursor: default;
}

.size-box[data-empty]:hover { border-color: var(--c-line); }

/* --- Размеры ------------------------------------------------------------------ */

.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
  gap: var(--sp-2);
}

.size-box {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.375rem;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.size-box input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.size-box:hover { border-color: var(--c-ink); }

.size-box:has(input:checked) {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}

.size-box:has(input:focus-visible) {
  outline: 1px solid var(--c-accent);
  outline-offset: .125rem;
}

/* --- Цвета --------------------------------------------------------------------- */

.color-grid {
  display: grid;
  /* колонка шире подписи в 14 px: иначе «фисташковый» и «черный/тигровый»
     рвутся посреди слова — названия цветов из 1С длинные */
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--sp-3) var(--sp-2);
}

.color-box {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  text-align: center;
  cursor: pointer;
  /* названия цветов из 1С бывают без пробелов («черный+голубой») и вылезают
     за колонку — разрешаем перенос внутри слова */
  overflow-wrap: anywhere;
}

.color-box input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.color-box__dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 0 0 1px rgba(28, 24, 21, .16);
  transition: box-shadow var(--t-fast) var(--ease);
}

/* HEX для значения не заполнен — кружок пустой, пунктиром: видно, что это
   цвет, но какой именно — не заявляем */
.color-box__dot[data-no-color] {
  background: var(--c-bg);
  box-shadow: none;
  border: 1px dashed rgba(28, 24, 21, .28);
}

.color-box:has(input:checked) .color-box__dot {
  box-shadow: inset 0 0 0 1px rgba(28, 24, 21, .16),
              0 0 0 .125rem var(--c-bg),
              0 0 0 .1875rem var(--c-ink);
}

.color-box:has(input:checked) { color: var(--c-ink); }

.color-box:has(input:focus-visible) .color-box__dot {
  outline: 1px solid var(--c-accent);
  outline-offset: .25rem;
}

/* --- Цена: два поля и двойной ползунок ------------------------------------------ */

.range__fields {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.range__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

.range__field input {
  width: 100%;
  min-width: 0;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--c-ink);
  background: none;
  border: 0;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.range__field input::-webkit-outer-spin-button,
.range__field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.range__dash {
  width: .5rem;
  height: 1px;
  flex-shrink: 0;
  background: var(--c-line-strong);
}

/* Два input[type=range] лежат друг на друге: полоса общая, тянутся оба конца.
   Сами дорожки скрыты, видимую линию рисуют .range__track и .range__fill. */
.range__slider {
  position: relative;
  height: 1.5rem;
  margin-bottom: var(--sp-2);
}

.range__track,
.range__fill {
  position: absolute;
  top: 50%;
  height: .125rem;
  border-radius: .125rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.range__track {
  left: 0;
  right: 0;
  background: var(--c-surface-2);
}

.range__fill { background: var(--c-ink); }

.range__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.range__thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1.5px solid var(--c-ink);
  cursor: grab;
  pointer-events: auto;
}

.range__thumb::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1.5px solid var(--c-ink);
  cursor: grab;
  pointer-events: auto;
}

.range__thumb:focus-visible::-webkit-slider-thumb { border-color: var(--c-accent); }
.range__thumb:focus-visible::-moz-range-thumb { border-color: var(--c-accent); }

/* --- Сброс -------------------------------------------------------------------- */

.filters__reset {
  width: 100%;
  margin-top: var(--sp-6);
}

/* --- Панель управления выдачей --------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.toolbar__found {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

.toolbar__sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.toolbar__filters {
  display: none;
  align-items: center;
  gap: var(--sp-2);
}

/* --- Выбранные фильтры ------------------------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

/* Плашки выбранных фильтров — кнопки, а не ссылки в тексте: подчёркивание
   в них лишнее. Селектор с элементом, чтобы перебить и общее правило для
   ссылок, и собственное подчёркивание у «Сбросить всё». */
.chips a { text-decoration: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .375rem var(--sp-3);
  font-size: var(--fs-xs);
  background: var(--c-surface);
  border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease);
}

.chip:hover { background: var(--c-surface-2); }

.chip::after {
  content: "";
  width: .5rem;
  height: .5rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% .075rem no-repeat,
    linear-gradient(currentColor, currentColor) center / .075rem 100% no-repeat;
  transform: rotate(45deg);
  opacity: .6;
}

.chip--reset {
  background: none;
  color: var(--c-ink-2);
  text-decoration: underline;
  text-underline-offset: .1875rem;
}

.chip--reset::after { content: none; }

.chip--reset:hover {
  background: none;
  color: var(--c-accent);
}

/* --- Сетка выдачи ------------------------------------------------------------------ */

/* три колонки вместо четырёх — рядом стоит панель фильтров.
   Селектор из двух классов перебивает правило .products в responsive.css. */
.catalog__main .products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalog__empty {
  padding: var(--sp-16) 0;
  text-align: center;
}

.catalog__empty p {
  max-width: 22.0em;
  margin: var(--sp-4) auto var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

/* --- Страницы ---------------------------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-12);
}

.pager__item {
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--sp-2);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.pager__item:hover {
  border-color: var(--c-ink);
  color: var(--c-ink);
}

.pager__item[aria-current] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}

/* стрелка на краю списка остаётся видимой, но перестаёт нажиматься:
   так не скачет ширина ряда при переходе на первую или последнюю страницу */
.pager__item[aria-disabled="true"] {
  opacity: .3;
  pointer-events: none;
}

.pager__gap {
  min-width: 1.25rem;
  color: var(--c-ink-2);
  border: 0;
  cursor: default;
}

.pager__nav svg { display: block; }

/* --- SEO-текст категории ------------------------------------------------------------- */

.catalog__seo {
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--c-line);
}

/* --- Адаптив --------------------------------------------------------------------------- */

/* Ниже 1024 фильтры уезжают в выдвижное окно слева — по кнопке в тулбаре */
@media (max-width: 1023px) {
  .catalog__layout { grid-template-columns: minmax(0, 1fr); }

  .filters {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-drawer);
    width: min(24rem, 88vw);
    max-height: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--c-bg);
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
  }

  .filters[data-open] { transform: translateX(0); }

  .filters__head { display: flex; }

  .filters__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 var(--sp-6) var(--sp-6);
  }

  .filters__foot {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--c-line);
  }

  .filters__reset { margin-top: 0; }

  .toolbar__filters { display: inline-flex; }
}

@media (min-width: 1024px) {
  /* на десктопе панель всегда видна, кнопки закрытия и применения не нужны */
  .filters__foot { display: none; }
}

@media (max-width: 767px) {
  .cat-head { padding-block: var(--sp-4) var(--sp-6); }

  .toolbar {
    gap: var(--sp-2);
    flex-wrap: wrap;
  }

  .toolbar__found {
    order: 3;
    width: 100%;
  }

  .toolbar__sort { margin-left: auto; }

  .toolbar__sort-label { display: none; }

  .catalog__main .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}