/*
 * Каталог: то, чего нет на других страницах витрины.
 *
 * ⚠ Всё под `.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; }