/*
  Страница каталога (/catalog).

  Готового макета этого экрана в вёрстке нет — каталог был только выпадающей
  панелью в шапке, — поэтому файл написан под уже принятый на витрине язык
  дизайна, а не придумывает свой:

    фон страницы     rgba(10, 11, 15, 1)
    панель/карточка  rgba(21, 22, 24, 1)
    вложенный чип    rgba(26, 27, 29, 1)
    приглушённый    rgba(108, 109, 112, 1)
    акцент           rgba(255, 141, 40, 1)
    радиусы          16px панели, 10-12px элементы, 90px «таблетки»

  Сетка товаров и сами карточки берутся из styles/main-page.css — здесь только
  сужается минимальная ширина колонки, потому что рядом появилась боковая
  панель и колонок в той же ширине помещается меньше.
*/

.catalog-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* шапка страницы */

.catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.catalog-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.catalog-head-text h1 {
  font-family: Onest;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  color: white;
  letter-spacing: 0%;
}

.catalog-head-count {
  font-family: Onest;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: rgba(108, 109, 112, 1);
}

.catalog-head-count b {
  color: white;
  font-weight: 700;
}

/* поиск и сортировка */

.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 6px 0 18px;
  border-radius: 12px;
  background: rgba(21, 22, 24, 1);
  min-width: 280px;
  flex: 1 1 280px;
}

.catalog-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  /* Рамка задана всегда прозрачной, а не только в фокусе: в styles.css есть
     общее правило `input:focus { border: 1px solid transparent !important }`,
     и без парной рамки в обычном состоянии поле дёргалось на пиксель при
     клике. */
  border: 1px solid transparent;
  outline: none;
  color: white;
  font-family: Onest;
  font-weight: 600;
  font-size: 14px;
}

.catalog-search input::placeholder {
  color: rgba(108, 109, 112, 1);
  font-weight: 500;
}

/* Крестик, который браузер сам рисует в type="search", — лишний: очистку
   поиска делает чип над сеткой, и два разных крестика путают. */
.catalog-search input::-webkit-search-cancel-button {
  display: none;
}

/*
  Кнопка поиска — одна иконка без подложки, как в поиске шапки: своя плашка
  цвета rgba(26,27,29) на поле цвета rgba(21,22,24) не читалась как кнопка и
  выглядела пятном.
*/
/*
  padding: 0 обязателен. В styles.css есть общее правило
  `button { padding: 10px 16px }`; у квадратных кнопок-иконок ширина задана
  жёстко, и эти отступы съедали содержимое — иконка сжималась до пары
  пикселей, и кнопка выглядела пустой плашкой.
*/
.catalog-search-go {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.catalog-search-go img {
  width: 18px;
  height: 18px;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.catalog-search-go:hover img {
  opacity: 1;
}

.catalog-sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 36px 0 18px;
  border-radius: 12px;
  background: rgba(21, 22, 24, 1);
  cursor: pointer;
}

.catalog-sort > span {
  font-family: Onest;
  font-weight: 600;
  font-size: 13px;
  color: rgba(108, 109, 112, 1);
  white-space: nowrap;
}

/*
  Сортировка на виджете `.select` из общей вёрстки (styles/header.css): его
  список рисуем мы сами, поэтому он выглядит одинаково во всех браузерах.
  Раньше здесь стоял системный <select> — его выпадающий список приходилось
  красить отдельно, и на тёмной странице он всё равно выпадал из оформления.
*/
.catalog-sort-select {
  position: static;
}

.catalog-sort-select .select-current {
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  min-height: auto;
}

.catalog-sort-select .select-current-left span {
  font-family: Onest;
  font-weight: 700;
  font-size: 14px;
  color: white;
  white-space: nowrap;
}

.catalog-sort-select .select-arrow {
  position: absolute;
  right: 16px;
  width: 12px;
  pointer-events: none;
}

/* Список шире самой строки: подписи сортировок длиннее выбранного значения. */
.catalog-sort-select .select-dropdown {
  left: 0;
  right: 0;
  min-width: 220px;
}

/*
  Тот же вид, что у кнопки «Каталог» в шапке: оранжевая подложка и тёмный
  текст. Иконка menu.svg нарисована цветом #322011 именно под неё — на тёмной
  кнопке её просто не было бы видно.
*/
.catalog-filters-button {
  display: none;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 141, 40, 1);
  color: rgba(50, 32, 17, 1);
  font-family: Onest;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.catalog-filters-button img {
  width: 18px;
  height: 18px;
}

.catalog-filters-button i {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 90px;
  background: rgba(50, 32, 17, 1);
  color: rgba(255, 141, 40, 1);
}

/* основная раскладка */

.catalog-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.catalog-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* боковая панель */

.catalog-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(21, 22, 24, 1);
  /* Липкая панель: список товаров длинный, и прокручивать его вверх ради
     смены категории неудобно. 96px — высота шапки, она тоже липкая. */
  position: sticky;
  top: 96px;
}

.catalog-side-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  font-family: Onest;
  font-weight: 700;
  font-size: 18px;
  color: white;
}

.catalog-side-close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(26, 27, 29, 1);
  cursor: pointer;
}

.catalog-side-close img {
  width: 16px;
  height: 16px;
}

.catalog-side-scroll {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
}

.catalog-group-title {
  font-family: Onest;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(108, 109, 112, 1);
  margin-bottom: 12px;
}

/* «таблетки» подборок */

.catalog-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-pill {
  cursor: pointer;
}

/* Настоящий input прячется, но остаётся в разметке: он несёт значение в
   форму и даёт переключение с клавиатуры. display:none выключил бы и то, и
   другое. */
.catalog-pill input,
.catalog-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.catalog-pill span {
  display: block;
  padding: 8px 14px;
  border-radius: 90px;
  background: rgba(26, 27, 29, 1);
  color: rgba(160, 161, 165, 1);
  font-family: Onest;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  transition: background 0.15s, color 0.15s;
}

.catalog-pill:hover span {
  color: white;
}

.catalog-pill.is-active span,
.catalog-pill input:checked + span {
  background: rgba(255, 141, 40, 0.12);
  color: rgba(255, 141, 40, 1);
}

.catalog-pill input:focus-visible + span,
.catalog-option input:focus-visible ~ .catalog-option-name {
  outline: 2px solid rgba(255, 141, 40, 0.6);
  outline-offset: 3px;
  border-radius: 4px;
}

/* строки списков (категории, типы) */

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.catalog-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: rgba(160, 161, 165, 1);
  font-family: Onest;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  transition: background 0.15s, color 0.15s;
}

.catalog-option:hover {
  background: rgba(255, 255, 255, 0.04);
  color: white;
}

.catalog-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-option-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.catalog-option-count {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 90px;
  background: rgba(26, 27, 29, 1);
  color: rgba(108, 109, 112, 1);
  font-size: 12px;
  font-weight: 600;
}

/*
  Отмеченная строка. Класс приходит с сервера, а :has() красит её сразу по
  клику — до того, как страница успела перезагрузиться с новым фильтром.
*/
.catalog-option.is-active,
.catalog-option:has(input:checked) {
  background: rgba(255, 141, 40, 0.12);
  color: rgba(255, 141, 40, 1);
}

.catalog-option.is-active .catalog-option-count,
.catalog-option:has(input:checked) .catalog-option-count {
  background: rgba(255, 141, 40, 0.16);
  color: rgba(255, 141, 40, 1);
}

/* галочка у типов товара */

.catalog-check {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  transition: background 0.15s, border-color 0.15s;
}

.catalog-option-check input:checked + .catalog-check {
  background: rgba(255, 141, 40, 1);
  border-color: rgba(255, 141, 40, 1);
}

.catalog-option-check input:checked + .catalog-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid rgba(10, 11, 15, 1);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ветки категорий */

.catalog-branch-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.catalog-branch-row .catalog-option {
  flex: 1;
  min-width: 0;
}

/*
  Кнопка сворачивания появляется только вместе со скриптом: сворачивать ветки
  умеет он. Без него подкатегории просто показаны все, и кнопка, которая ничего
  не делает, была бы обманом.
*/
.catalog-branch-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.catalog-js .catalog-branch-toggle {
  display: flex;
}

.catalog-branch-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.catalog-branch-toggle img {
  width: 12px;
  transition: transform 0.2s;
}

/*
  Развёрнутая ветка — состояние по умолчанию, а свёрнутая помечается классом.
  Наоборот было бы хуже: без JavaScript ни одна ветка не раскрылась бы и
  подкатегории стали бы недоступны совсем. Свёрнуты ветки без is-open, когда
  в <head> стоит метка catalog-js: так ветки свёрнуты уже на первой отрисовке.
*/
.catalog-branch-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 20px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.catalog-js .catalog-branch:not(.is-open) .catalog-branch-children {
  display: none;
}

.catalog-js .catalog-branch:not(.is-open) .catalog-branch-toggle img {
  transform: rotate(-90deg);
}

.catalog-option-child {
  font-size: 13px;
  padding: 7px 10px;
}

/* низ панели */

.catalog-side-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.catalog-reset-link {
  color: rgba(108, 109, 112, 1);
  font-family: Onest;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s;
}

.catalog-reset-link:hover {
  color: white;
}

.catalog-apply-button {
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 141, 40, 0.1);
  color: rgba(255, 141, 40, 1);
  font-family: Onest;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.catalog-apply-button:hover {
  background: rgba(255, 141, 40, 0.18);
}

/*
  С работающим JavaScript фильтр применяется сам, и кнопка на широком экране
  только мешает. Метку catalog-js ставит скрипт в <head> — без него
  (и без скрипта) кнопка остаётся на месте и форма отправляется ею.
  В шторке на узких экранах кнопка нужна всегда: там фильтры отмечают пачкой
  и применяют одним нажатием.
*/
.catalog-js .catalog-form .catalog-side-footer {
  display: none;
}

/* выбранные фильтры над сеткой */

.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  padding: 8px 12px 8px 14px;
  border-radius: 90px;
  background: rgba(21, 22, 24, 1);
  color: white;
  font-family: Onest;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}

.catalog-chip:hover {
  background: rgba(26, 27, 29, 1);
}

.catalog-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-chip img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.15s;
}

.catalog-chip:hover img {
  opacity: 1;
}

.catalog-chips-reset {
  margin-left: 4px;
  color: rgba(255, 141, 40, 1);
  font-family: Onest;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

/* сетка товаров */

/*
  Колонка уже, чем на главной: рядом стоит панель фильтров, и при исходных
  227px в оставшуюся ширину помещалось три карточки вместо четырёх.
  Пропорции самой карточки заданы в main-page.css через aspect-ratio, так что
  она подстраивается сама.
*/
.catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}

/* пусто */

.catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 24px;
  border-radius: 16px;
  background: rgba(21, 22, 24, 1);
  text-align: center;
}

.catalog-empty > img {
  width: 40px;
  height: 40px;
  opacity: 0.3;
  margin-bottom: 6px;
}

.catalog-empty-title {
  font-family: Onest;
  font-weight: 700;
  font-size: 18px;
  color: white;
}

.catalog-empty-text {
  max-width: 380px;
  font-family: Onest;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgba(108, 109, 112, 1);
}

.catalog-reset-button {
  margin-top: 12px;
  padding: 14px 28px;
  border-radius: 10px;
  background: rgba(255, 141, 40, 0.1);
  color: rgba(255, 141, 40, 1);
  font-family: Onest;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

/* постраничная навигация */

.catalog-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}

/* .show-more описан в main-page.css — здесь только то, что делает его ссылкой. */
.catalog-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s;
}

.catalog-more:hover {
  background: rgba(255, 141, 40, 0.18);
}

.catalog-more.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.catalog-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/*
  Номер страницы — .catalog-page-link, а не .catalog-page: этим именем уже
  названа обёртка всей страницы (форма), и её раскладку сносило правилами
  номера — контейнер получал inline-flex с align-items:center, колонки сетки
  схлопывались до половины ширины.
*/
.catalog-page-link {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(21, 22, 24, 1);
  color: rgba(160, 161, 165, 1);
  font-family: Onest;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.catalog-page-link:hover {
  background: rgba(26, 27, 29, 1);
  color: white;
}

.catalog-page-link.is-active {
  background: rgba(255, 141, 40, 0.12);
  color: rgba(255, 141, 40, 1);
}

.catalog-page-gap {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: rgba(108, 109, 112, 1);
}

.catalog-pager-count {
  font-family: Onest;
  font-weight: 600;
  font-size: 13px;
  color: rgba(108, 109, 112, 1);
}

.catalog-pager-count b {
  color: white;
  font-weight: 700;
}

/* затемнение под шторкой фильтров */

.catalog-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 890;
  background: rgba(0, 0, 0, 0.6);
}

.catalog-backdrop.is-open {
  display: block;
}

/* узкие экраны */

@media (max-width: 1100px) {
  .catalog-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-filters-button {
    display: inline-flex;
  }

  /*
    Панель переезжает в шторку слева. Разметка та же самая: два одинаковых
    списка полей внутри одной формы отправились бы вместе и передрались бы
    за одно и то же имя.
  */
  .catalog-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 900;
    width: min(340px, 88vw);
    max-height: 100vh;
    border-radius: 0 16px 16px 0;
    transform: translateX(-102%);
    transition: transform 0.25s ease;
  }

  .catalog-side.is-open {
    transform: none;
  }

  .catalog-side-head {
    display: flex;
  }

  .catalog-side-scroll {
    flex: 1;
    overflow-y: auto;
    /* Место под палец: последняя строка списка иначе прижималась к кнопке. */
    padding-bottom: 4px;
  }

  .catalog-side-footer {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* В шторке низ панели нужен всегда: кнопка «Показать» — единственный
     способ применить отмеченное, автоотправка там выключена. */
  .catalog-side-footer,
  .catalog-js .catalog-form .catalog-side-footer {
    display: flex;
  }

  .catalog-side-footer .catalog-apply-button {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .catalog-head {
    align-items: stretch;
  }

  .catalog-head-text h1 {
    font-size: 24px;
    line-height: 30px;
  }

  .catalog-toolbar {
    width: 100%;
  }

  .catalog-search {
    flex: 1 1 100%;
    min-width: 0;
    order: -1;
  }

  .catalog-sort {
    flex: 1;
    padding-left: 14px;
  }

  .catalog-sort > span {
    display: none;
  }

  .catalog-filters-button {
    flex-shrink: 0;
  }

  .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .catalog-empty {
    padding: 40px 18px;
  }

  .show-more.catalog-more {
    width: 100%;
    padding: 17px 20px;
  }
}