/*
 * Раздел 3 · Подбор по модели — блок «Выберите свой телефон» на хабе каталога.
 *
 * Решение Виталия 30.08.2026 (реестр, п. 218): вместо сетки из десяти плиток
 * марок на разделе стоит панель подбора, под ней строка ссылок на марки
 * и ходовые модели. Макет: десктоп 4390:35411, мобильный 4400:25585.
 *
 * Сама панель одета в glavnaya.css — это тот же компонент, что на главной.
 * Здесь только то, чем раздел от главной отличается: панель без рамки,
 * контролы в строку на десктопе и два блока ссылок под ней.
 */

.sh-podbor-razdel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 24px;
}

.sh-podbor-razdel__zagolovok {
	margin: 0;
	color: #1e1e1e;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.sh-podbor-razdel__pod {
	margin: 0;
	color: #525256;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.sh-podbor-razdel__marki,
.sh-podbor-razdel__hodovye {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sh-podbor-razdel__podzag {
	margin: 0;
	color: #1e1e1e;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * Строка марок. Это не украшение: товарной выдачи на хабе нет по решению 143,
 * и без неё со страницы не вело бы ни одной ссылки в марки и модели.
 * Промежуток 20 по горизонтали и 8 по вертикали — как в макете.
 */
.sh-podbor-razdel__ssylki {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.sh-podbor-razdel__marka {
	color: #a73afd;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
}

.sh-podbor-razdel__marka:hover,
.sh-podbor-razdel__marka:focus-visible {
	color: #9028e8;
	text-decoration: underline;
}

.sh-podbor-razdel__chipy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sh-podbor-razdel__primanka {
	margin: 0;
	color: #6e6e7a;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

/*
 * Панель на разделе — не карточка в ряду с баннером, а часть страницы:
 * рамка, фон и внутренние поля сняты. Селекты свой фон сохраняют.
 */
.sh-gl-podbor--stroka.sh-gl-podbor--stroka {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;

	/*
	 * ⚠ Панель на главной с 1024 залочена под ряд с баннером: glavnaya.css
	 * даёт ей flex: 0 0 420px и width: 420px. На разделе баннера нет, и без
	 * снятия этой пары панель оставалась 420 при контейнере 1280 — селекты
	 * схлопывались до 34 px. Поймано замером живой страницы 30.08.
	 */
	flex: 1 1 auto;
	width: auto;
	justify-content: flex-start;
}

/*
 * ⚠ Woodmart вешает на <label> свой margin-bottom: 5px, и на разделе он
 * превращает промежуток 12 между селектами в 17 — вне восьмёрочной шкалы.
 * На главной этого нет: там форма темы не грузится. Селекты, крестик, «Закрыть»
 * и затемнение листа — всё ярлыки, поэтому снимаем разом.
 * Поймано замером живой страницы на 375, глазами разница не читается.
 */
.sh-gl-podbor label { margin-bottom: 0; }

@media (min-width: 768px) {

	.sh-podbor-razdel__zagolovok { font-size: 24px; }

	.sh-podbor-razdel__pod { font-size: 16px; line-height: 1.45; }

	/*
	 * Контролы в одну строку: Марка 464 · Модель 464 · кнопка 304 при
	 * контейнере 1280 и промежутке 24 — ровно как в макете 4390:35411.
	 * Кнопка фиксирована, селекты делят остаток поровну, поэтому строка
	 * держится и на 1024, где контейнер уже.
	 */
	.sh-gl-podbor--stroka {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}

	.sh-gl-podbor--stroka .sh-gl-podbor__selekty {
		flex: 1 1 auto;
		flex-direction: row;
		gap: 24px;
		min-width: 0;
	}

	.sh-gl-podbor--stroka .sh-gl-vyb {
		flex: 1 1 0;
		min-width: 0;
	}

	.sh-gl-podbor--stroka .sh-gl-podbor__knopka.sh-gl-podbor__knopka {
		flex: 0 0 304px;
		width: 304px;
		height: 51px;
	}
}