/**
 * Каталог /price — своя вёрстка вместо блоков Tilda.
 * Подключается только на этой странице (см. functions.php).
 *
 * Переписывается по частям: сначала шапка (было — две копии артборда t396),
 * дальше обвязка блока t951 и сайдбар с фильтрами.
 *
 * Все размеры шрифта оставлены ровно те, что были у артборда:
 * заголовок 48 / 44 (≤1451) / 38 (≤1259) / 34 (≤979) / 34 (≤639) / 32 (≤429) / 28 (≤409),
 * дата 16px. Брейкпоинты те же, что у Tilda.
 */

/* ------------------------------------------------------------- шапка */

.wsn-cathead {
	background: #fff;
	padding: 57px 20px 15px;
	font-family: 'Montserrat', Arial, sans-serif;
	text-align: center;
	box-sizing: border-box;
}

.wsn-cathead * { box-sizing: border-box; }

/* Заголовок залит градиентом через background-clip: сам текст прозрачный.
   -webkit-background-clip оставлен ради Safari — без префикса там пусто. */
.wsn-cathead__title {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.55;
	text-transform: uppercase;
	color: transparent;
	background-image: linear-gradient(0.753turn, rgba(16,132,209,1) 14%, rgba(17,208,164,1) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.wsn-cathead__date {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	color: #5C5C5C;
}

@media (max-width: 1451px) { .wsn-cathead__title { font-size: 44px; } }
@media (max-width: 1259px) { .wsn-cathead__title { font-size: 38px; } }
@media (max-width: 979px)  { .wsn-cathead__title { font-size: 34px; } }

/* до 640px витрина показывала вторую копию заголовка — «каталог weisan»,
   без слова «товаров»; здесь просто прячем это слово */
@media (max-width: 639px) {
	.wsn-cathead { padding-top: 40px; }
	.wsn-cathead__title { font-size: 34px; }
	.wsn-cathead__wide { display: none; }
}

@media (max-width: 429px) { .wsn-cathead__title { font-size: 32px; } }
@media (max-width: 409px) { .wsn-cathead__title { font-size: 28px; } }

/* ------------------------------------------------ страница сравнения */

.wsn-compare {
	background: #fff;
	padding: 40px 0 60px;
	font-family: 'Montserrat', Arial, sans-serif;
	box-sizing: border-box;
}

.wsn-compare * { box-sizing: border-box; }

.wsn-compare__cont {
	width: 100%;
	max-width: none;
	padding: 0 20px;
}

/* Заголовок повторяет каталожный — тот же градиент и начертание, но на четыре
   пункта мельче на каждой ширине: 44 / 40 / 34 / 30 / 28 / 24 против 48 / 44 /
   38 / 34 / 32 / 28. */
.wsn-compare__title {
	margin: 0;
	/* отступ до карточек — снизу у самого заголовка, чтобы он не зависел от того,
	   показана под ним подсказка про пустое сравнение или нет */
	padding-bottom: 50px;
	text-align: center;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.55;
	text-transform: uppercase;
	color: transparent;
	background-image: linear-gradient(0.753turn, rgba(16,132,209,1) 14%, rgba(17,208,164,1) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.wsn-compare__hint {
	margin: -30px 0 30px;
	text-align: center;
	font-size: 16px;
	line-height: 1.55;
	color: #5C5C5C;
}

/* Ссылка в подсказке — тем же серым и тем же шрифтом, что и остальной текст:
   от ссылки только подчёркивание. */
.wsn-compare__hint a {
	color: inherit;
	font: inherit;
	text-decoration: underline;
}

/* ---------- таблица сравнения ---------- */

/* Обёртка с прокруткой: таблица шире экрана и листается вбок пальцем, колесом
   и полосой снизу; такая же полоса есть сверху — её ведёт скрипт страницы. */
.wsn-cmp__wrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: 12px;
}

/* Своя полоса прокрутки над таблицей: внутренний блок нулевой высоты,
   ширину ему ставит скрипт — по ширине таблицы. */
.wsn-cmp__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 10px;
}

.wsn-cmp__scroll[hidden] { display: none; }

.wsn-cmp__scroll-inner { height: 1px; }

/* Ширины столбцов фиксированные: иначе длинные значения растягивали бы свой
   столбец, и товары получались бы разной ширины. Строки таблица равняет сама —
   ради этого от плашек-карточек и ушли. */
.wsn-cmp {
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

/* левый столбец с названиями строк не уезжает при прокрутке вбок */
.wsn-cmp__corner,
.wsn-cmp__group,
.wsn-cmp__name {
	position: sticky;
	left: 0;
	z-index: 1;
	width: 260px;
	min-width: 260px;
	background: #fff;
	font-weight: 400;
	vertical-align: top;
}

.wsn-cmp__head,
.wsn-cmp__val {
	width: 294px;
	min-width: 294px;
	vertical-align: top;
}

/* шапка столбца — та же карточка товара, только внутри ячейки */
.wsn-cmp__head { padding: 0 40px 20px 0; font-weight: 400; }

.wsn-cmp__corner { padding: 0 40px 20px 0; }

.wsn-cmp__group { padding: 18px 40px 6px 0; font-weight: 700; }

.wsn-cmp__name,
.wsn-cmp__val {
	padding: 6px 40px 6px 0;
	border-bottom: 1px solid #f0f2f5;
}

.wsn-cmp__grouprow td { border: none; }

@media (max-width: 959px) {
	.wsn-cmp__corner,
	.wsn-cmp__group,
	.wsn-cmp__name { width: 180px; min-width: 180px; }

	.wsn-cmp__head,
	.wsn-cmp__val { width: 260px; min-width: 260px; }

	.wsn-cmp__head,
	.wsn-cmp__corner,
	.wsn-cmp__group,
	.wsn-cmp__name,
	.wsn-cmp__val { padding-right: 20px; }
}

@media (max-width: 1451px) { .wsn-compare__title { font-size: 40px; } }
@media (max-width: 1259px) { .wsn-compare__title { font-size: 34px; } }
@media (max-width: 979px)  { .wsn-compare__title { font-size: 30px; } }
@media (max-width: 639px)  { .wsn-compare__title { font-size: 30px; } }
@media (max-width: 429px)  { .wsn-compare__title { font-size: 28px; } }
@media (max-width: 409px)  { .wsn-compare__title { font-size: 24px; } }

/* ------------------------------------------------- каркас: две колонки */

.wsn-catalog {
	background: #fff;
	padding: 0 0 60px;
	font-family: 'Montserrat', Arial, sans-serif;
	color: #000;
	box-sizing: border-box;
}

.wsn-catalog * { box-sizing: border-box; }

/* Каталог идёт во всю ширину окна, а не в колонку 1200px, как остальные блоки:
   у витрины он лежал в t-container_100, которому стили страницы гасили боковые
   отступы (padding-left/right: initial !important). Оставляем только поля 20px,
   чтобы содержимое не прилипало к краям экрана. */
.wsn-catalog__cont {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 20px;
}

/* Сайдбар фиксированной ширины, список тянется. Колонки — flex, поэтому сайдбар
   идёт до самого низа блока: кнопка «Загрузить ещё» лежит внутри правой колонки,
   а не подвалом во всю ширину, как было у витрины. */
.wsn-catalog__cols {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

/* 250px и отступ 30px — размеры сайдбара витрины (.t951__sidebar).
   Липкость (sticky) оттуда же, а вот max-height:100vh с внутренней прокруткой
   не переносим: фильтры выше экрана и обрезались собственной полосой прокрутки,
   хотя товаров рядом намного больше. Пусть колонка идёт во всю свою высоту. */
.wsn-catside {
	flex: 0 0 250px;
	position: sticky;
	top: 50px;
	/* своей полосы прокрутки у сайдбара нет никогда, ни при длинном списке
	   фильтров, ни при коротком: колонка всегда показана целиком */
	max-height: none;
	overflow: visible;
}

.wsn-catalog__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* ----------------------------------------------------- дерево разделов */

/* размер шрифта пунктов — 14px, как задавал блок витрины (на ≤480px 11px);
   начертание среднее (500) — по всему дереву, включая подразделы */
.wsn-cattree {
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}

/* Пункт дерева — ссылка на /catalog/<слаг>: её можно открыть в новой вкладке.
   Выглядит как обычный пункт списка, без подчёркивания. */
.wsn-cattree__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 0;
	border: 0;
	background: none;
	font: inherit;
	color: #000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.wsn-cattree__btn:hover,
.wsn-cattree__btn:focus { text-decoration: none; }

.wsn-cattree__name { flex: 1 1 auto; min-width: 0; }

.wsn-cattree__btn:hover { color: #1084d1; }

/* выбранный раздел — голубой целиком, вместе со значком */
.wsn-cattree__btn.is-active { color: #1084d1; }

/* стрелка: показывает, что у раздела есть подразделы */
.wsn-cattree__icon {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	color: #8b8f96;
}

.wsn-cattree__btn:hover .wsn-cattree__icon,
.wsn-cattree__btn.is-active .wsn-cattree__icon { color: #1084d1; }

/* внутренности раздела — список его подразделов */
.wsn-cattree__inner { padding-left: 14px; }

.wsn-cattree__inner[hidden] { display: none; }

/* ------------------------------------------------------------ фильтры */

/* всё в фильтрах — 14px, как t-descr_xxs у витрины (на ≤640px 12px) */
.wsn-catfilter {
	font-size: 14px;
	line-height: 1.55;
}

/* общая часть фильтров стоит под деревом разделов */
.wsn-catfilter_common { margin-top: 30px; }

/* заголовок всего блока фильтров */
.wsn-catfilter__head {
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
}

.wsn-catfilter__item { margin-bottom: 26px; }

/* фильтр не своего раздела просто скрыт, из разметки он не пропадает */
.wsn-catfilter__item[hidden] { display: none; }

.wsn-catfilter__title {
	margin-bottom: 10px;
	font-weight: 600;
}

/* ---------- цена ---------- */

/* Две ручки лежат поверх одной полосы: сами input-ы прозрачны, видимы только
   их бегунки. Так ползунок работает без скриптов витрины. */
.wsn-catfilter__slider {
	position: relative;
	height: 20px;
	margin-bottom: 14px;
}

.wsn-catfilter__track,
.wsn-catfilter__fill {
	position: absolute;
	top: 9px;
	height: 2px;
	border-radius: 2px;
}

.wsn-catfilter__track {
	left: 0;
	right: 0;
	background: #e3e5e8;
}

.wsn-catfilter__fill { background: #1084d1; }

.wsn-catfilter__range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;   /* ловим только сами бегунки */
}

.wsn-catfilter__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border: 2px solid #1084d1;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	pointer-events: auto;
}

.wsn-catfilter__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid #1084d1;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	pointer-events: auto;
}

.wsn-catfilter__pricebox {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wsn-catfilter__input {
	width: 100%;
	min-width: 0;
	height: 34px;
	padding: 0 8px;
	border: 1px solid #e3e5e8;
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: inherit;
	color: #000;
}

.wsn-catfilter__input:focus {
	outline: none;
	border-color: #1084d1;
}

.wsn-catfilter__dash { flex: 0 0 auto; color: #8b8f96; }

/* ---------- чекбоксы ---------- */

.wsn-catfilter__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 3px 0;
	cursor: pointer;
}

.wsn-catfilter__check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wsn-catfilter__box {
	flex: 0 0 auto;
	position: relative;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border: 1px solid #c9ccd1;
	border-radius: 3px;
	background: #fff;
}

.wsn-catfilter__check input:checked + .wsn-catfilter__box {
	border-color: #1084d1;
	background: #1084d1;
}

/* галочка рисуется рамкой повёрнутого прямоугольника — без картинок */
.wsn-catfilter__check input:checked + .wsn-catfilter__box::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wsn-catfilter__check input:focus-visible + .wsn-catfilter__box {
	outline: 2px solid #1084d1;
	outline-offset: 2px;
}

.wsn-catfilter__reset {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: #1084d1;
	cursor: pointer;
}

.wsn-catfilter__reset:hover { text-decoration: underline; }

/* ------------------------------------------- «Совместим со станком» */

.wsn-compat { position: relative; }

.wsn-compat__field { position: relative; }

.wsn-compat__input {
	width: 100%;
	height: 34px;
	padding: 0 28px 0 8px;
	border: 1px solid #e3e5e8;
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: inherit;
	color: #000;
}

.wsn-compat__input:focus {
	outline: none;
	border-color: #1084d1;
}

.wsn-compat__clear {
	position: absolute;
	top: 0;
	right: 0;
	width: 28px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: #8b8f96;
	cursor: pointer;
}

.wsn-compat__clear[hidden] { display: none; }

.wsn-compat__clear svg { width: 10px; height: 10px; }

/* Список висит поверх остального сайдбара, поэтому фильтры под ним не прыгают.
   Внутренняя прокрутка тут уместна: моделей больше восьмидесяти. */
.wsn-compat__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 5;
	max-height: 260px;
	overflow-y: auto;
	padding: 4px 0;
	border: 1px solid #e3e5e8;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.wsn-compat__list[hidden] { display: none; }

.wsn-compat__opt {
	display: block;
	width: 100%;
	padding: 6px 10px;
	border: 0;
	background: none;
	font: inherit;
	color: #000;
	text-align: left;
	cursor: pointer;
}

.wsn-compat__opt[hidden] { display: none; }

.wsn-compat__opt:hover { background: #f2f6fa; }

.wsn-compat__opt-name { display: block; }

.wsn-compat__empty {
	padding: 8px 10px;
	color: #8b8f96;
}

.wsn-compat__empty[hidden] { display: none; }

/* -------------------------------------------------------------- поиск */

.wsn-catsearch {
	position: relative;
	max-width: 320px;
	margin: 0 0 30px auto;
}

.wsn-catsearch__input {
	width: 100%;
	height: 40px;
	padding: 0 34px 0 12px;
	border: 1px solid #e3e5e8;
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: #000;
}

.wsn-catsearch__input:focus {
	outline: none;
	border-color: #1084d1;
}

.wsn-catsearch__btn,
.wsn-catsearch__clear {
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: #757575;
	cursor: pointer;
}

.wsn-catsearch__btn svg { width: 13px; height: 13px; }

.wsn-catsearch__clear { display: none; }

.wsn-catsearch__clear svg { width: 12px; height: 12px; }

/* крестик показываем только когда в поле что-то есть */
.wsn-catalog.has-query .wsn-catsearch__btn   { display: none; }
.wsn-catalog.has-query .wsn-catsearch__clear { display: flex; }

/* --------------------------------------------------- «Загрузить ещё» */

.wsn-catalog__more {
	margin-top: 50px;
	text-align: center;
}

.wsn-catalog__more[hidden] { display: none; }

/* кнопка витрины была на t-btnflex: синяя, скруглённая, 500-го начертания */
.wsn-catalog__more-btn {
	min-width: 200px;
	padding: 12px 30px;
	border: 0;
	border-radius: 30px;
	background: #1084d1;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease-in-out;
}

.wsn-catalog__more-btn:hover { background: #0d6ead; }

/* ------------------------------------------------------- номера страниц */

/* Вид тот же, что у блока «Дополнительная оснастка» на странице товара:
   кружок 38px, текущая страница в синей рамке, по краям стрелки. */
.wsn-catpages {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}

.wsn-catpages[hidden] { display: none; }

.wsn-catpages__list { display: flex; align-items: center; gap: 10px; }

.wsn-catpages__page {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	color: #8b8f96;
	cursor: pointer;
}

.wsn-catpages__page:hover { color: #222937; }

.wsn-catpages__page.is-active {
	border-color: #3d93ff;
	color: #222937;
	cursor: default;
}

.wsn-catpages__arrow {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: #3d93ff;
	line-height: 0;
	cursor: pointer;
}

.wsn-catpages__arrow:hover { color: #1084d1; }

/* Скрытая стрелка держит своё место: убери её из потока — и на первой
   и последней странице ряд номеров прыгал бы вбок. */
.wsn-catpages__arrow[hidden] {
	display: flex;
	visibility: hidden;
	pointer-events: none;
}

.wsn-catpages__arrow svg { width: 22px; height: 12px; display: block; }

/* ------------------------------------------------------------ адаптив */

@media (max-width: 1023px) {
	.wsn-catalog__cols { gap: 24px; }
	.wsn-catside { flex-basis: 220px; }
}

@media (max-width: 767px) {
	/* сайдбар уходит над списком: в одну строку колонки уже не помещаются */
	.wsn-catalog__cols { flex-direction: column; }
	/* на узком экране липкость мешает: сайдбар стоит над списком */
	.wsn-catside { flex-basis: auto; width: 100%; position: static; }
	.wsn-catsearch { max-width: none; margin-left: 0; }
}

@media (max-width: 639px) {
	.wsn-catfilter { font-size: 12px; }
	.wsn-catalog__more { margin-top: 34px; }
}

@media (max-width: 480px) {
	.wsn-cattree { font-size: 11px; }
}