/*
 * Каталог: то, чего нет на других страницах витрины.
 *
 * ⚠ Всё под `.katalog`. Плитка, строка отбора и сетка живут в shop.css и стоят
 * на пяти страницах сразу — от главной до корзины; правило без приставки
 * перекрасило бы их все. Здесь только добавки страницы каталога: порядок
 * показа, чипсы состояния, переключатель «Новый / Б.У» и кнопка сравнения.
 *
 * ⚠ Своих цветов нет — только токены витрины. Затемнение на наведении сделано
 * фильтром, а не вторым синим: тогда арендатор, выбравший зелёную кнопку,
 * получает зелёную и под курсором, а не внезапно синюю.
 */

/* ── порядок показа ─────────────────────────────────────────────────── */

.katalog .katalog__sort {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 13px;
}

.katalog .katalog__sort .lbl { color: var(--sh-muted); }

/* Выбранное — не ссылка: нажимать на то, что уже выбрано, некуда. */
.katalog .katalog__sort b {
	color: var(--sh-ink);
	font-weight: 600;
	border-bottom: 2px solid var(--sh-blue);
	padding-bottom: 2px;
}

/* ── строка отбора ──────────────────────────────────────────────────── */

/*
 * ⚠ Чипсы состояния — ссылки, а не переключатели формы: выбор должен
 * применяться нажатием, без «Показать». Ссылке нужен `inline-block`, иначе
 * вертикальные отступы не раздвигают строку и чипсы налезают друг на друга.
 */
.katalog .filters .chip {
	display: inline-block;
	line-height: 1.25;
}

/*
 * «Показать» — сплошная кнопка, а не чипс. Чипсы в этой же строке показывают
 * ВЫБРАННОЕ состояние, и синий чипс «Показать» рядом читался бы как «выбрано
 * состояние “Показать”».
 */
.katalog .filters .go {
	border: 0;
	background: var(--sh-blue);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 8px;
	cursor: pointer;
}

.katalog .filters .go:hover { filter: brightness(.93); }

@media (max-width: 900px) {
	/* На телефоне порядок показа уходит на свою строку: в одну с заголовком
	   он не помещается и рвёт счётчик позиций пополам. */
	.katalog .katalog__sort { margin-left: 0; flex-basis: 100%; }
}

/*
 * ── Чип раздела: имя и число рядом ──────────────────────────────────────
 *
 * ⚠ Число печатаем мельче и приглушённо: на чипе главное — имя раздела, а
 * счётчик при нём подсказка. Одинаковым размером они читались бы как «SSD 46»
 * — будто в названии раздела есть цифра.
 */
.katalog .filters .chip i {
	font-style: normal;
	margin-left: 5px;
	font-size: 11px;
	color: var(--sh-muted);
}

.katalog .filters .chip.is-on i { color: rgba(255, 255, 255, .82); }

/*
 * ── «Показать ещё» вместо номеров страниц ───────────────────────────────
 *
 * ⚠ Кнопка стоит по центру и во всю ширину списка: её нажимают редко — обычно
 * догрузку делает прокрутка, — но когда скриптов нет, она должна попадаться на
 * глаза сразу, а не прятаться слева под последней плиткой.
 *
 * ⚠ У ссылки в работе гасим только цвет и указатель, а текст оставляем на
 * месте: подмена подписи на «Загружаю…» дёргала бы высоту списка ровно в тот
 * миг, когда человек к ней прокрутился.
 */
.katalog__more { display: flex; justify-content: center; margin-top: 22px; }
.katalog__more.is-over { margin: 0; }

.katalog__more .more { display: inline-block; padding: 11px 26px;
	border: 1px solid var(--sh-line); border-radius: 999px;
	background: var(--sh-card); font-size: 14px; font-weight: 600; color: var(--sh-ink); }
.katalog__more .more:hover { text-decoration: none; border-color: var(--sh-blue); color: var(--sh-blue); }
.katalog__more .more.is-busy { opacity: .55; pointer-events: none; }
/*
 * ── Фильтры по характеристикам: колонка слева ───────────────────────────
 *
 * Макет: Figma wGC5YgBMUF7AxqsAquKJKC, кадры 93:2 и 93:405. Группа — белая
 * карточка с рамкой, как плитка товара; три вида элемента: флажки со
 * счётчиком справа, переключатель «Все / Есть / Нет» и чипы.
 *
 * ⚠ Только токены витрины (--sh-*): арендатор, перекрасивший витрину, получает
 * колонку своего цвета, и тёмная тема работает без второго набора правил.
 *
 * ⚠ Ноль — серым, а не скрытым: исчезающие пункты прыгают под пальцем при
 * каждом нажатии, и человек промахивается по соседнему.
 */
.katalog__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.katalog__main { min-width: 0; }

/* Строка «Раздел» у раздела с фильтрами кончается разделителем — прячем его. */
.katalog .filters > .sep:last-child { display: none; }

/* ⚠ Колонка не липнет: в макете она длиннее сетки, и липкая с прокруткой
   внутри прятала бы «Наличие» под вторую полосу прокрутки. */
.facets { font-size: 13px; min-width: 0; }
.facets__toggle { display: none; }
.facets__form { display: flex; flex-direction: column; gap: 10px; }
.facets__form.is-busy { opacity: .6; pointer-events: none; }
.facets__head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 2px 4px; }
.facets__head b { font-size: 15px; }

.facet { margin: 0; padding: 12px 12px 10px; border: 1px solid var(--sh-line); border-radius: var(--sh-radius);
	background: var(--sh-card); min-width: 0; }
.facet legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-weight: 600; font-size: 13px; color: var(--sh-ink); }
.facet legend + * { clear: both; }

.facet__opt { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; color: var(--sh-ink); }
.facet__opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.facet__opt i, .chipbox i, .seg__one i { font-style: normal; font-size: 11px; color: var(--sh-muted); }
.facet__opt input { margin: 0; accent-color: var(--sh-blue); }
.facet .is-off { opacity: .45; cursor: default; }

.facet__more summary { cursor: pointer; color: var(--sh-blue); padding: 4px 0 0; list-style: none; }
.facet__more summary::-webkit-details-marker { display: none; }
.facet__more[open] summary { display: none; }

/* Чипы: «4 · 6 · 8 · 10+ · 16+», «Все · Новый · Б.У». Флажок внутри спрятан —
   нажимается весь чип, а без скрипта форма уходит кнопкой «Показать». */
.facet__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipbox { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 12px; border: 1px solid var(--sh-line);
	border-radius: 999px; background: var(--sh-card); color: var(--sh-ink); cursor: pointer; }
.chipbox input, .seg__one input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chipbox:hover { border-color: var(--sh-blue); }
.chipbox.is-on { background: var(--sh-blue); border-color: var(--sh-blue); color: #fff; }
.chipbox.is-on i { color: rgba(255, 255, 255, .82); }
.chipbox:focus-within, .seg__one:focus-within { outline: 2px solid var(--sh-blue); outline-offset: 1px; }

/* Переключатель: три равные клетки в одной рамке, число под словом. */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--sh-line);
	border-radius: 8px; overflow: hidden; }
.seg__one { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px;
	text-align: center; cursor: pointer; font-size: 12px; color: var(--sh-ink); }
.seg__one + .seg__one { border-left: 1px solid var(--sh-line); }
.seg__one.is-on { background: var(--sh-soft); color: var(--sh-blue); font-weight: 600; }
.seg__one.is-on i { color: var(--sh-blue); }

.facet__range { display: flex; align-items: center; gap: 6px; }
.facet__range input { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--sh-line); border-radius: 8px;
	font: inherit; font-size: 13px; background: var(--sh-card); color: var(--sh-ink); }
.facet__range span { color: var(--sh-muted); }
.facet__hint { margin: 8px 0 0; font-size: 11px; color: var(--sh-muted); }

.facets .go { border: 0; background: var(--sh-blue); color: #fff; font: inherit; font-size: 13px; font-weight: 600;
	padding: 9px 18px; border-radius: 8px; cursor: pointer; }
.facets .go:hover { filter: brightness(.93); }
/* Со скриптом отбор применяется сам — кнопка лишняя. */
.facets__form.is-live .go { display: none; }

/* ── над сеткой: «Найдено 12 из 68» и выбранное чипами ── */
.katalog__found { font-size: 13px; color: var(--sh-muted); margin: 0 0 10px; }
.picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 12px; }
.picked__one { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
	background: var(--sh-soft); color: var(--sh-blue); }
.picked__one:hover { text-decoration: none; filter: brightness(.96); }
.picked__all { color: var(--sh-blue); text-decoration: underline; margin-left: 4px; }

@media (max-width: 900px) {
	/* Телефон: колонка — сворачиваемая панель над сеткой. */
	.katalog__body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.facets__toggle { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--sh-line);
		border-radius: var(--sh-radius); background: var(--sh-card); font-weight: 600; cursor: pointer; list-style: none; }
	.facets__toggle::-webkit-details-marker { display: none; }
	.facets__toggle i { font-style: normal; font-size: 11px; color: #fff; background: var(--sh-blue);
		border-radius: 999px; padding: 1px 7px; }
	.facets[open] .facets__toggle { margin-bottom: 10px; }
	.facets__head { display: none; }
	/* Кнопка на телефоне остаётся и со скриптом: колонку закрывают ею. */
	.facets__form.is-live .go { display: block; width: 100%; }
}

/* Описание раздела под товарами (ShopSeo::categoryText): справка для дочитавших и поисковика —
   тихой карточкой, теми же токенами --sh-*, что вся витрина. Только первая страница без отбора. */
.katalog__about {
	margin-top: 32px;
	padding: 22px 26px;
	border: .8px solid var(--sh-line);
	border-radius: 12px;
	background: var(--sh-card);
	color: var(--sh-ink);
	font-size: 15px;
	line-height: 1.6;
}
.katalog__about h2 { margin: 20px 0 8px; font-size: 17px; }
.katalog__about h2:first-child { margin-top: 0; }
.katalog__about p { margin: 0 0 12px; }
.katalog__about ul { margin: 0 0 12px; padding-left: 20px; }
.katalog__about > :last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.katalog__about { margin-top: 24px; padding: 16px; font-size: 14px; }
}