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