/* ============================================================================
   WEISAN — свои стили, вместо вёрстки Tilda.
   Сюда пишем всё, что переделано с нуля: свои классы, никакой зависимости
   от t396 / tn-elem / tn-atom и от брейкпоинтов Tilda (1511, 1471, 1199, 979,
   639, 429). Файл подключается на всех страницах и грузится последним,
   поэтому перебивать стили Tilda через !important не нужно.

   Правила:
   - префикс классов wsn-, БЭМ-подобно: .wsn-header, .wsn-header__logo, .wsn-header--dark;
   - mobile-first: базовые правила для телефона, дальше min-width;
   - никаких абсолютных координат и фиксированных высот из Tilda;
   - размеры в rem/%/clamp, не в жёстких px там, где это ширина или отступ;
   - цвета только из палитры ниже (брендбук WEISAN).
   ========================================================================= */

:root {
	/* палитра брендбука */
	--wsn-dark:   #222937;
	--wsn-mid:    #444d5e;
	--wsn-blue:   #1084d1;
	--wsn-bg:     #f6f8fb;
	--wsn-border: #e2e8f0;
	--wsn-gray1:  #616161;
	--wsn-gray2:  #929292;
	--wsn-green:  #5fee88;
	--wsn-teal:   #10d1a3;
	--wsn-red:    #ff3636;
	--wsn-yellow: #ffd24a;
	--wsn-white:  #ffffff;

	/* сетка: контейнер и поля по краям */
	--wsn-container: 1200px;
	--wsn-gutter: 16px;

	/* типографика */
	--wsn-font: Arial, Helvetica, sans-serif;
}

/* контейнер контента — один на все свои блоки */
.wsn-container {
	width: 100%;
	max-width: var(--wsn-container);
	margin-inline: auto;
	padding-inline: var(--wsn-gutter);
	box-sizing: border-box;
}

/* Брейкпоинты, на которых работаем (mobile-first, min-width):
   480px — крупный телефон
   768px — планшет
   1024px — ноутбук
   1280px — десктоп
   Другие значения не вводим, чтобы вёрстка не расползлась по числам Tilda. */

/* ============================================================================
   ШАПКА
   Одна разметка на все ширины вместо двух копий блока Tilda. Приклеена к верху,
   место под неё держит .wsn-header-spacer — его высота совпадает с высотой шапки
   на каждой ширине. Высоты сохранены прежние: 102 / 93 / 77 / 83 / 51 / 48.
   Цвета, размеры шрифтов и радиусы взяты из старой вёрстки один в один.
   ========================================================================= */

:root {
	--wsn-hdr-top: 32px;    /* высота тёмной полосы */
	--wsn-hdr-main: 70px;   /* высота основной строки */
	--wsn-hdr-pad: 30px;    /* поля по краям */
	--wsn-hdr-font: 'Montserrat', Arial, sans-serif;
}

.wsn-header,
.wsn-menu,
.wsn-header-spacer { font-family: var(--wsn-hdr-font); box-sizing: border-box; }

.wsn-header *,
.wsn-menu * { box-sizing: border-box; }

.wsn-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99999;
	background: #fff;
	/* тень снизу — та же, что у выпадашки «Покупателям», чтобы не плодить вариантов */
	box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

.wsn-header-spacer { height: calc(var(--wsn-hdr-top) + var(--wsn-hdr-main)); }

/* общий ряд: во всю ширину с полями по краям, как было */
.wsn-header__row {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
	padding-inline: var(--wsn-hdr-pad);
}

/* ---------- верхняя тёмная полоса ---------- */

.wsn-header__top { height: var(--wsn-hdr-top); background: #222937; }   /* тёмно-синий из брендбука, как у блока «Нужна помощь» */

.wsn-header__links { display: flex; align-items: center; gap: 38px; }
.wsn-header__links--right { margin-left: auto; }

.wsn-header__links a {
	color: #fff;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.55;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .2s ease-in-out;
}

.wsn-header__links a:hover { opacity: .6; }

/* ---------- основная строка ---------- */

.wsn-header__main { height: var(--wsn-hdr-main); }

.wsn-header__logo { flex: none; display: block; line-height: 0; }
.wsn-header__logo img { display: block; width: 110px; height: auto; }

.wsn-btn-catalog {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	height: 37px;
	padding-inline: 18px;
	border-radius: 100px;
	background: #69b2e2;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease-in-out;
}

.wsn-btn-catalog:hover { background: #4f9fd4; }

/* На широких экранах у кнопки только подпись — значок появляется на телефоне. */
.wsn-btn-catalog__ico { display: none; }

/* Телефон в вертикальном положении: подпись не помещается рядом со значками
   корзины, поэтому кнопка сжимается до круглого значка каталога. Граница та же,
   что у карточек товара, — 600px в портрете. */
@media (max-width: 600px) and (orientation: portrait) {
	.wsn-btn-catalog {
		min-width: 0;
		width: 37px;
		padding-inline: 0;
	}

	.wsn-btn-catalog__ico { display: block; }

	.wsn-btn-catalog__text { display: none; }
}

.wsn-nav { display: none; align-items: center; gap: 32px; margin-inline: auto; }

.wsn-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity .2s ease-in-out;
}

.wsn-nav__link:hover { opacity: .6; }
.wsn-nav__link--you { font-weight: 700; }
.wsn-nav__link--you img { display: block; width: 20px; height: 20px; }

.wsn-drop__arrow { display: block; width: 6px; height: 4px; transition: transform .2s ease-in-out; }
.wsn-drop__btn[aria-expanded="true"] .wsn-drop__arrow { transform: rotate(180deg); }

/* ---------- корзина и телефон ---------- */

/* Значки тянутся на всю высоту шапки, а промежутки между ними — их собственные
   поля: нажатие срабатывает и по пустому месту рядом со значком, а не только по
   самой картинке. Поэтому gap здесь нулевой, всё расстояние даёт padding. */
.wsn-header__cart { flex: none; display: flex; align-items: stretch; align-self: stretch; margin-left: auto; }

.wsn-cart-sum,
.wsn-cart-btn,
.wsn-cmp-btn,
.wsn-fav-btn {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 9px;   /* между соседями получается 18px, и они нажимаются */
}


.wsn-cart-sum { color: #000; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.wsn-cart-sum:empty { display: none; }

.wsn-cart-btn {
	position: relative;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
}

/* Обёртка значка — точка отсчёта для счётчика: кнопка теперь высотой во всю
   шапку, и от неё число считалось бы от верхнего края. */
.wsn-cart-btn__ico { position: relative; display: block; line-height: 0; }

.wsn-cart-btn img { display: block; width: 30px; height: 26px; }

/* число товаров кружком на значке; при нуле скрыто — класс вешает cart.js */
.wsn-cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border-radius: 100px;
	background: #ff8c1a;   /* оранжевый с уходом в жёлтый: значок цепляет взгляд, но не кричит */
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.wsn-cart-count.is-empty { display: none; }

/* ---------- избранное: значок в шапке ---------- */

/* Стоит слева от корзины. Пустое избранное — контур сердца, есть товары — залито
   красным (класс is-filled ставит assets/js/favorites.js). */
.wsn-fav-btn {
	position: relative;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.wsn-fav-btn svg {
	display: block;
	width: 26px;
	height: 26px;
	fill: #fff;
	stroke: #e02222;
	stroke-width: 1.8;
	stroke-linejoin: round;
	transition: fill .15s ease-in-out;
}

.wsn-fav-btn.is-filled svg { fill: #e02222; }

/* Значок сравнения слева от избранного: ведёт на /compare. Пока список пуст —
   тёмный, как остальные значки шапки; появились товары — синеет. */
.wsn-cmp-btn {
	line-height: 0;
	color: #111;
	transition: color .15s ease-in-out;
}

.wsn-cmp-btn svg { display: block; width: 26px; height: 26px; }

.wsn-cmp-btn.is-filled { color: #1084d1; }

/* Телефон в вертикальном положении: в шапке остаются только значки. Сумма заказа
   рядом с корзиной занимала половину строки и жалась к логотипу — количество
   товаров на самом значке говорит то же самое короче. */
@media (max-width: 600px) and (orientation: portrait) {
	.wsn-cart-sum { display: none; }

	/* Тёмная полоса со ссылками на площадки на телефоне только съедает высоту:
	   подписи всё равно не помещаются и обрезаются. Все её ссылки есть в боковом
	   меню. Заодно обнуляем её высоту в переменной, иначе распорка под шапкой
	   оставила бы пустое место. */
	:root { --wsn-hdr-top: 0px; }

	.wsn-header__top { display: none; }
}

/* Ширину блок берёт по содержимому — по строке с часами работы, она длиннее
   номера. Своего отступа слева у него нет: расстояния до соседей держит ряд,
   иначе слева от телефона получалось 58px против 24px справа. */
.wsn-header__phone { flex: none; display: flex; flex-direction: column; align-items: flex-end; }

.wsn-header__tel {
	color: #000;
	cursor: default;   /* набор номера мышкой не работает — палец тут только путает */
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
}

.wsn-header__hours { color: #000; font-size: 10px; font-weight: 500; opacity: .75; white-space: nowrap; }

/* ---------- кнопка меню ---------- */

.wsn-burger { flex: none; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; }
.wsn-burger img { display: block; width: 24px; height: 24px; }

/* ---------- выпадашка «Покупателям» ---------- */

.wsn-drop__panel {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	border-top: 1px solid #f6f6f6;   /* тонкая линия под шапкой — была и раньше */
	background: #fff;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
	animation: wsn-drop-in .2s ease-in-out;
}

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

@keyframes wsn-drop-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.wsn-drop__inner { justify-content: center; align-items: flex-start; gap: 90px; height: auto; padding-block: 30px 26px; }

.wsn-drop__title { flex: none; color: #000; font-size: 18px; font-weight: 400; line-height: 1.45; }

.wsn-drop__cols {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 10px 70px;
}

.wsn-drop__cols a {
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
	transition: opacity .2s ease-in-out;
}

.wsn-drop__cols a:hover { opacity: .6; }

/* ---------- панель меню для узких экранов ---------- */

.wsn-menu { position: fixed; inset: 0; z-index: 100000; }
.wsn-menu[hidden] { display: none; }

/* Панель занимает 80% ширины экрана и прижата к правому краю. Тень та же, что
   у шапки, только направлена влево — панель лежит поверх страницы. */
.wsn-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: 80%;
	height: 100%;
	padding: 24px 30px 40px;
	background: #fff;
	box-shadow: -12px 0 24px rgba(0, 0, 0, .08);
	overflow-y: auto;
	animation: wsn-menu-in .25s cubic-bezier(.16, 1, .3, 1);
}

@keyframes wsn-menu-in {
	from { transform: translateX(100%); }
	to   { transform: none; }
}

.wsn-menu__close { position: absolute; top: 20px; right: 20px; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; }
.wsn-menu__close img { display: block; width: 22px; height: 22px; }

.wsn-menu__tel { display: block; color: #000; font-size: 20px; font-weight: 700; letter-spacing: 1px; text-decoration: none; }
.wsn-menu__hours { display: block; margin-top: 2px; color: #000; font-size: 10px; font-weight: 500; opacity: .75; }

.wsn-menu__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; }

.wsn-menu__nav a,
.wsn-menu__sub-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
}

.wsn-menu__sub-btn img { display: block; width: 6px; height: auto; transition: transform .2s ease-in-out; }
.wsn-menu__sub-btn[aria-expanded="true"] img { transform: rotate(180deg); }

.wsn-menu__sub { display: flex; flex-direction: column; gap: 12px; padding-left: 14px; }
.wsn-menu__sub[hidden] { display: none; }
.wsn-menu__sub a { font-size: 14px; opacity: .8; }

/* Кнопка обратного звонка под номером: открывает то же окно, что ссылка
   в верхней строке шапки. Ширина по подписи, вид как у синих кнопок сайта. */
.wsn-menu__callback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	align-self: flex-start;
	height: 40px;
	margin-top: 18px;
	padding: 0 22px;
	border: 1px solid #1084d1;
	border-radius: 100px;
	background: #1084d1;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease-in-out;
}

.wsn-menu__callback:hover { background: #0d6ead; border-color: #0d6ead; }

.wsn-menu__social { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.wsn-menu__social img { display: block; width: 32px; height: 32px; }

/* ---------- открытое окно и полоса прокрутки ----------

   Пока открыто окно (корзина, избранное, окна Tilda), страница под ним не
   прокручивается: overflow: hidden на body. Вместе с прокруткой пропадает и её
   полоса — освободившиеся ~15px доставались содержимому, и страница дёргалась
   вширь на каждом открытии.

   Ширину полосы браузер меряет один раз при загрузке (assets/js/wsn-main.js
   кладёт её в --wsn-sbw) и на время открытого окна отдаём эти пиксели обратно
   отступом. Ничего не двигается, и никаких светлых лент по краю не остаётся.
   Там, где полоса накладная и ширины не занимает (телефоны, macOS), переменная
   равна нулю и правило ничего не меняет.

   Шапка приклеена к окну (position: fixed), отступ у body её не двигает —
   поэтому ей тот же отступ задаём отдельно. */
body.wsn-lock,
body.t-body_popupshowed {
	overflow: hidden;
	padding-right: var(--wsn-sbw, 0px);
}

body.wsn-lock .wsn-header,
body.t-body_popupshowed .wsn-header {
	box-sizing: border-box;
	padding-right: var(--wsn-sbw, 0px);
}

/* ---------- ширины ---------- */

/* Высота шапки и размеры её содержимого одни на всех экранах: --wsn-hdr-top
   32px и --wsn-hdr-main 70px из :root больше нигде не переопределяются.
   Раньше высота гуляла (70 / 61 / 51 / 45 / 48), тёмная полоса на узком экране
   пропадала, а логотип, телефон, кнопка «Каталог» и сумма корзины меняли размер —
   при сужении окна шапка прыгала. Меняются только поля по краям: без этого
   содержимое упиралось бы в границы экрана. */
@media (max-width: 639px) {
	:root { --wsn-hdr-pad: 10px; }
	.wsn-header__row { gap: 14px; }
	.wsn-header__phone { display: none; }
	.wsn-drop__inner { flex-direction: column; gap: 20px; padding-block: 20px 24px; }
	.wsn-drop__cols { grid-auto-flow: row; grid-template-rows: none; }
}

@media (min-width: 640px) and (max-width: 979px) {
	:root { --wsn-hdr-pad: 20px; }
	.wsn-header__links { gap: 22px; }
	.wsn-header__phone { display: none; }
}

@media (min-width: 980px) and (max-width: 1199px) {
	:root { --wsn-hdr-pad: 20px; }
}

/* меню целиком помещается в строку только на широких экранах,
   ниже 1280px оно уходит в панель за кнопкой справа */
@media (min-width: 1280px) {
	.wsn-nav { display: flex; gap: 22px; }
	.wsn-burger { display: none; }
	.wsn-header__cart { margin-left: 0; }
}

@media (min-width: 1472px) {
	.wsn-nav { gap: 32px; }
}

/* ============================================================================
   ФУТЕР
   Вместо блока t396 с абсолютными координатами и жёсткой высотой — flex с переносом.
   Брейкпоинтов нет вовсе: блоки встают в строку, пока помещаются, и переносятся
   сами, как только упрутся друг в друга. Ширины заданы через flex-basis и max-width.
   Размеры из старой вёрстки: тексты 14px, межстрочный 1.55, шаг строк 27px,
   заголовки колонок в овальной рамке 1px #1084d1 высотой 40px.
   ========================================================================= */

.wsn-footer {
	margin-top: 15px;
	background: #f6f8fb;
	font-family: var(--wsn-hdr-font);
	box-sizing: border-box;
}

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

.wsn-footer__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	max-width: 1512px;
	margin-inline: auto;
	/* поля по краям тоже без брейкпоинтов — сужаются вместе с экраном */
	padding-inline: clamp(10px, 2vw, 83px) clamp(10px, 1.5vw, 30px);
	row-gap: 22px;
}

.wsn-footer__grid--top    { padding-top: clamp(24px, 3.2vw, 48px); }   /* было 30–60px, уменьшено на 20% */
.wsn-footer__grid--bottom { padding-top: 11px; padding-bottom: clamp(18px, 2vw, 29px); }

/* колонка логотипа: от 200 до 450px, забирает свободное место.
   Сам логотип 150px, слева отступ 20 — в минимальные 200px помещается с запасом */
.wsn-footer__brand { flex: 1 1 200px; max-width: 450px; padding-left: 10px; }
.wsn-footer__logo { display: block; line-height: 0; }
.wsn-footer__logo img { display: block; width: min(150px, 100%); height: auto; }

/* Обе колонки лежат в общей обёртке: она переносится под логотип целиком,
   а когда тесно уже внутри неё — «Покупателям» уходит под «Каталог» */
.wsn-footer__cols {
	/* блок растёт до суммы максимумов колонок (250 + 380) и там останавливается;
	   свободное место сверх этого остаётся снаружи, между логотипом и блоком */
	flex: 1 1 500px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	/* промежутка между колонками нет: пока «Покупателям» не дошла до своих 380px,
	   лишняя ширина уходит в саму колонку, а не в дыру между ними.
	   Отступ по вертикали нужен только когда колонки складываются друг под друга */
	gap: 22px 0;
	/* максимум обёртки = сумма максимумов колонок: 380 + 380 */
	max-width: 760px;
}

/* «Каталог» — ровно 250px, «Покупателям» — от 250 до 380px */
.wsn-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
/* обе колонки одинаковые: минимум 250px, растут поровну до 380px.
   Приоритета ни у одной нет — свободное место делится пополам */
.wsn-footer__cols .wsn-footer__col { flex: 1 1 250px; max-width: 380px; }

.wsn-footer__head {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	height: 40px;
	margin-bottom: 16px;
	padding-inline: 22px;
	border: 1px solid #1084d1;
	border-radius: 400px;
	color: #1084d1;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

a.wsn-footer__head:hover { background: #1084d1; color: #fff; }

.wsn-footer__link {
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	text-decoration: none;
	transition: color .2s ease-in-out;
}

.wsn-footer__link:hover { color: #1084d1; }
.wsn-footer__link--strong { font-weight: 600; }

.wsn-footer__social { display: flex; align-items: center; gap: 13px; margin-top: 18px; }
.wsn-footer__social img { display: block; width: 36px; height: 36px; }

/* низ: реквизиты не шире 240px, дисклеймер — остальное, но не шире 720px
   и прижат вправо. Переносится сам, когда ему остаётся меньше 360px */
.wsn-footer__legal {
	flex: 0 1 240px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: #686868;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;
}

.wsn-footer__note {
	flex: 1 1 360px;
	max-width: 720px;
	margin: 0;
	margin-left: auto;
	align-self: flex-end;
	padding-bottom: 30px;
	color: #686868;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;
}

/* ============================================================================
   ВКЛАДКИ НА СТРАНИЦЕ ТОВАРА
   Своя замена блоку Tilda t1281: три вкладки по центру, активная подчёркнута
   тёмной чертой, на узких экранах вместо полосы выпадающий список.
   Размеры и цвета прежние: подпись 14px/500 #222937, активная 600 #222,
   черта #eee и #222, ширина содержимого 1200px по центру.
   ========================================================================= */

.wsn-tabs { padding: 52px 0 22px; margin-bottom: 30px; font-family: var(--t-text-font, Arial); box-sizing: border-box; }
.wsn-tabs * { box-sizing: border-box; }

.wsn-tabs__inner { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }

.wsn-tabs__bar { display: flex; margin-bottom: 20px; }

.wsn-tabs__tab {
	flex: 1 1 0;
	padding: 0 10px 18px;
	border: 0;
	border-bottom: 1px solid #eee;
	background: none;
	color: #222937;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	text-align: center;
	cursor: pointer;
	transition: color .2s ease-in-out, border-color .2s ease-in-out;
}

.wsn-tabs__tab:hover { color: #000; }
.wsn-tabs__tab.is-active { border-bottom-color: #222; color: #222; font-weight: 600; }
.wsn-tabs__tab:focus-visible { outline: 2px solid #2015ff; outline-offset: 2px; }

/* список для узких экранов; на десктопе его нет */
.wsn-tabs__select-wrap { display: none; }
.wsn-tabs__select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #222;
	border-radius: 3px;
	background: #fff;
	color: #222;
	font-family: inherit;
	font-size: 14px;
}

.wsn-tabs__panel { padding-bottom: 30px; }
.wsn-tabs__panel[hidden] { display: none; }

/* ---------- содержимое: описание ---------- */

.wsn-descr {
	padding: 10px 0;
	color: #222937;
	font-size: 14px;
	line-height: 1.55;
}

.wsn-descr p { margin: 0 0 12px; }
.wsn-descr p:last-child { margin-bottom: 0; }
.wsn-descr ul, .wsn-descr ol { margin: 0 0 12px; padding-left: 22px; }
.wsn-descr li { margin-bottom: 6px; }

/* ---------- содержимое: характеристики ---------- */

.wsn-spec {
	padding: 10px 0;
	color: #222937;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.2px;
}

.wsn-spec__cols { column-count: 2; column-gap: 70px; }
.wsn-spec__grp { break-inside: avoid; margin-bottom: 22px; }
.wsn-spec__grp:last-child { margin-bottom: 0; }
.wsn-spec__h { margin-bottom: 6px; font-weight: 700; }

/* ---------- содержимое: комплектация ----------
   Префикс свой (wsn-tkit), а не wsn-kit: под тем же именем идёт блок
   «Комплектация» с плитками (assets/css/good-kit.css), и его сетка на пять
   колонок перебивала здешние текстовые колонки — на телефоне список уезжал
   за край экрана. */

.wsn-tkit { padding: 10px 0; }
.wsn-tkit__grid { column-count: 2; column-gap: 70px; }

.wsn-tkit__row {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	break-inside: avoid;
	padding: 8px 0;
	color: #222937;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.2px;
}

/* галочка и крестик нарисованы фоном, отдельных картинок не нужно */
.wsn-tkit__ic { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; line-height: 1; border-radius: 50%; font-size: 14px; text-align: center; }
.wsn-tkit__ic--yes {
	background: #3d93ff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 12.4l3.4 3.4 7.7-7.7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px 17px no-repeat;
}
.wsn-tkit__ic--no { background: none; border-radius: 0; }

.wsn-tkit__dop {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid #e8ebf0;
	color: #222937;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.2px;
}

.wsn-tkit__dop p { margin: 0 0 10px; }
.wsn-tkit__dop p:last-child { margin-bottom: 0; }

/* ---------- содержимое: оплата и доставка ---------- */

.wsn-pay {
	padding: 10px 0;
	color: #222937;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.2px;
}

/* абзац в конце — как в исходнике: без своих отступов, перенос делает <br> перед ним */
.wsn-pay p { margin: 0; }

@media (max-width: 640px) {
	.wsn-tabs { padding-top: 30px; }

	/* На телефоне вкладки остаются кнопками, а не превращаются в выпадающий
	   список: он выглядел чужеродно. Кнопки-пилюли стоят в ряд и стараются
	   уместиться на экране, а что не влезло — переносится на вторую строку;
	   мотать вбок ничего не нужно. Активная залита фирменным синим. */
	.wsn-tabs__bar {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin-bottom: 22px;
	}

	.wsn-tabs__tab {
		flex: 0 1 auto;
		padding: 8px 14px;
		border: 1px solid #d5d9de;
		border-radius: 100px;
		font-size: 13px;
		white-space: nowrap;
	}

	.wsn-tabs__tab.is-active {
		border-color: #1084d1;
		background: #1084d1;
		color: #fff;
	}

	.wsn-tabs__select-wrap { display: none; }
	.wsn-spec__cols, .wsn-tkit__grid { column-count: 1; column-gap: 0; }
}

/* ============================================================================
   БЛОК «НУЖНА ПОМОЩЬ С ВЫБОРОМ СТАНКА?» на странице товара
   Замена блоку Tilda t396 (rec2344423631). Тёмная полоса #222937 во всю ширину
   и без скругления (по просьбе; в исходнике было 99% ширины и радиус 30px),
   внутри текст по центру и картинка справа. Размеры прежние: заголовок 40px/1.2,
   подзаголовок 14px/500, согласие 12px/500, поля и кнопка высотой 50px с радиусом 90.
   ========================================================================= */

.wsn-consult {
	background: #222937;
	font-family: var(--t-text-font, Arial);
	box-sizing: border-box;
}

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

.wsn-consult__inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	min-height: 321px;
	margin-inline: auto;
	padding: 50px 20px 34px;
}

/* текст центрируется по всей ширине блока, картинка на него не влияет —
   она лежит абсолютом справа, как и было в исходнике */
.wsn-consult__body { text-align: center; }

.wsn-consult__title {
	margin: 0;
	color: #fff;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.5px;
	white-space: nowrap;
}

.wsn-consult__sub {
	margin: 18px 0 0;
	color: #d2d4d7;   /* белый на 80% поверх #222937 — тем же тоном, но без прозрачности */
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.wsn-consult__form {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 715px;      /* ширина формы из исходника: 221 + 221 + 232 + два зазора по 20 */
	margin: 22px auto 0;
}

.wsn-consult__input,
.wsn-consult__phone {
	height: 50px;
	border: 1px solid #3d3f44;
	border-radius: 90px;
	background: none;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
}

.wsn-consult__input { width: 221px; padding-inline: 24px; }
.wsn-consult__input::placeholder { color: #a7aaad; }
.wsn-consult__input:focus,
.wsn-consult__phone:focus-within { border-color: #3d93ff; outline: none; }

.wsn-consult__phone { display: flex; align-items: center; gap: 8px; width: 221px; padding-inline: 20px; }
.wsn-consult__flag { font-size: 18px; line-height: 1; }
.wsn-consult__code { color: #fff; }

.wsn-consult__tel {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	background: none;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
}

.wsn-consult__tel::placeholder { color: #a7aaad; }
.wsn-consult__tel:focus { outline: none; }

.wsn-consult__btn {
	width: 232px;
	height: 50px;
	border: 0;
	border-radius: 90px;
	background: #3d93ff;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease-in-out;
}

.wsn-consult__btn:hover { background: #2b7fe0; }

/* Ошибка заполнения — одной строкой над подписью про согласие: поля стоят в
   ряд, и подписи под каждым не влезают, не сломав блок. */
.wsn-consult__error {
	margin: 14px 0 0;
	color: #ff9a9a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

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

.wsn-consult__input_bad { box-shadow: inset 0 0 0 2px #ff9a9a; }

/* Ответ на месте формы после отправки */
.wsn-consult__thanks {
	margin: 0;
	padding: 14px 0;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.wsn-consult__note {
	margin: 18px 0 0;
	color: #bdbfc3;   /* белый на 70% поверх #222937 */
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.5px;
}

/* картинка у правого края, прижата к верху полосы — как в исходнике */
.wsn-consult__pic {
	position: absolute;
	top: 0;
	right: -75px;   /* в исходнике картинка начиналась на 942px сетки 1200 и выходила за её край */
	width: 333px;
	height: auto;
	pointer-events: none;
}

/* Поведение по ширинам взято из исходника:
   ≤960 контент прижимается влево, картинка остаётся справа;
   ≤640 форма встаёт столбиком, кнопка во всю ширину;
   ≤360 картинка уходит вниз под текст. */

@media (max-width: 1140px) {
	.wsn-consult__inner { padding: 40px 20px 30px; }
	.wsn-consult__body { text-align: left; padding-right: 380px; }
	.wsn-consult__title { max-width: 545px; font-size: 30px; white-space: normal; }
	.wsn-consult__sub { max-width: 420px; }
	.wsn-consult__note { max-width: 500px; }
	/* поля тянутся по ширине, кнопка не влезает третьей и переносится на свою строку */
	.wsn-consult__form { max-width: 639px; margin-inline: 0; justify-content: flex-start; }
	.wsn-consult__input,
	.wsn-consult__phone { flex: 1 1 208px; width: auto; min-width: 0; }
	.wsn-consult__btn { flex: 1 1 100%; width: auto; max-width: 348px; }
	.wsn-consult__pic { right: 0; width: 333px; }
}

@media (max-width: 700px) {
	.wsn-consult__body { padding-right: 0; }
	.wsn-consult__title { max-width: 366px; }
	.wsn-consult__note { max-width: 299px; }
	/* жёсткий перенос в подзаголовке нужен только на широком экране —
	   на узком он рвёт фразу посередине */
	.wsn-consult__sub br { display: none; }
	/* всё столбиком во всю ширину, как было на телефоне */
	.wsn-consult__form { flex-direction: column; max-width: 326px; gap: 10px; }
	.wsn-consult__input,
	.wsn-consult__phone,
	.wsn-consult__btn { flex: 0 0 auto; width: 100%; max-width: 326px; }
}

/* Ниже 740px картинка рядом с формой не помещается: форма 326 + картинка 372
   плюс отступы. Раньше она налезала на кнопку — уводим её под текст */
@media (max-width: 740px) {
	.wsn-consult__inner { display: flex; flex-direction: column; padding-bottom: 0; }
	.wsn-consult__pic { position: static; width: 300px; margin: 14px auto 0; }
}

@media (max-width: 520px) {
	.wsn-consult__inner { padding: 34px 16px 0; }
	.wsn-consult__title { font-size: 30px; }
	.wsn-consult__sub { font-size: 13px; max-width: 248px; }
	.wsn-consult__note { font-size: 10px; max-width: 100%; }
	.wsn-consult__input,
	.wsn-consult__phone,
	.wsn-consult__btn { width: 100%; max-width: 328px; height: 44px; }
	.wsn-consult__btn { font-size: 13px; }
	.wsn-consult__pic { width: 265px; }
}

/* ============================================================================
   ОКНО КОРЗИНЫ
   Своя вёрстка, классы wsn-cart-*. Разметка — header-popups.php, поведение —
   assets/js/cart.js. Стилей витрины (t706, .t-input, .t-btnflex) здесь больше нет,
   поэтому размеры заданы явно, а не правками поверх её CSS.
   Внешний вид повторяет прежний со всеми накопленными правками: поля и кнопка
   40px без скруглений, шрифты на пункт меньше, вертикальные отступы вдвое меньше.
   ========================================================================= */

/* затемнение на весь экран; прокрутка длинной корзины идёт по нему, не по странице */
/* Затемнение само не прокручивается: длинный список крутится внутри белого окна.
   Раньше прокрутка висела на затемнении, и браузер рисовал поверх него вторую
   полосу — светлую, во всю высоту экрана, рядом с полосой страницы. */
.wsn-cart {
	position: fixed; inset: 0; z-index: 100001;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
	padding: 25px 20px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, .8);
	opacity: 0; transition: opacity .3s ease;
	font-family: 'Montserrat', Arial, sans-serif;
}
.wsn-cart[hidden] { display: none; }
.wsn-cart.is-open { opacity: 1; }

/* Крестик стоит в шапке окна, в правом верхнем углу. Раньше он висел на
   затемнении в углу экрана: на длинном списке было непонятно, к чему он
   относится, и на телефоне он налезал на адресную строку. Теперь он внутри
   шапки, а она прилипает к верху окна — на длинном списке заголовок и крестик
   всегда на виду. */
.wsn-cart__head .wsn-cart__close {
	position: static;
	order: 2;
	flex: 0 0 auto;
	padding: 0;
}

.wsn-cart__head .wsn-cart__title { order: 1; padding-right: 0; }

.wsn-cart__close {
	position: absolute; top: 0; right: 0; z-index: 2;
	padding: 8px; border: 0; background: none; color: #000; cursor: pointer; line-height: 0;
	opacity: .75; transition: opacity .15s ease-in-out;
}

.wsn-cart__close svg { width: 23px; height: 23px; }

.wsn-cart__close:hover { opacity: 1; }

.wsn-cart__box {
	box-sizing: border-box;
	position: relative;   /* точка отсчёта для крестика */
	width: 100%;
	max-width: 560px;
	/* окно не выше экрана, длинный список крутится внутри него */
	max-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	/* сверху отступа нет: его держит сама шапка, она прилипает к верху окна.
	   С отступом у окна над прилипшей шапкой оставалась полоса, в которой был
	   виден проезжающий список. */
	padding: 0 30px 20px;
	background: #fff; border-radius: 12px; color: #000;
}

/* ---------- шапка окна ---------- */

/* Шапка прилипает к верху окна: список под ней прокручивается, а название окна
   и крестик остаются на месте. Отрицательные поля растягивают её на всю ширину
   окна, поверх его внутренних отступов — иначе строки списка проглядывали бы
   сбоку от шапки. Верхние углы скруглены под углы самого окна. */
.wsn-cart__head {
	position: sticky;
	top: 0;
	z-index: 3;
	/* заголовок слева, крестик справа, оба по центру строки */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 -30px;
	padding: 20px 30px 15px;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	border-radius: 12px 12px 0 0;
}

/* Шапка окна «сохраните наш номер»: заголовка в нём нет, она держит только крестик. */
.wsn-cart__head_bare {
	justify-content: flex-end;
	min-height: 18px;
	padding-bottom: 0;
	border-bottom: 0;
}

.wsn-cart__title { padding-right: 40px; font-size: 23px; line-height: 1.35; font-weight: 600; }

/* ---------- строка товара ----------
   Название забирает всё свободное место, остальные колонки — по содержимому.
   У витрины это была таблица с фиксированными ширинами: длинное название
   переносилось, когда справа ещё оставалось пустое место. */

.wsn-cart__item {
	display: flex; align-items: center; gap: 20px;
	margin: 17px 0 8px;
}
.wsn-cart__pic {
	flex: 0 0 auto; width: 105px; height: 70px;
	background: #eee center / contain no-repeat; border-radius: 7px;
}
.wsn-cart__name { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.55; }
.wsn-cart__name a { color: inherit; text-decoration: none; }
.wsn-cart__name a:hover { text-decoration: underline; }
.wsn-cart__sku,
.wsn-cart__per { font-size: 11px; font-weight: 400; opacity: .7; }

.wsn-cart__qty { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.wsn-cart__minus,
.wsn-cart__plus {
	width: 16px; text-align: center; font-size: 17px; line-height: 1;
	opacity: .4; cursor: pointer; user-select: none;
}
.wsn-cart__num { min-width: 18px; text-align: center; font-size: 15px; }

.wsn-cart__sum { flex: 0 0 auto; font-size: 17px; white-space: nowrap; text-align: right; }
.wsn-cart__portion { display: block; font-size: 11px; font-weight: 400; opacity: .7; }

.wsn-cart__del {
	flex: 0 0 auto; width: 26px; text-align: center;
	font-size: 26px; line-height: 1; opacity: .4; cursor: pointer; user-select: none;
}
/* как у витрины: плюс, минус и крестик проявляются при наведении на строку */
.wsn-cart__item:hover .wsn-cart__minus,
.wsn-cart__item:hover .wsn-cart__plus,
.wsn-cart__item:hover .wsn-cart__del { opacity: 1; }

.wsn-cart__empty { padding: 10px 0 20px; font-size: 20px; font-weight: 600; }

/* ---------- сумма ---------- */

.wsn-cart__total {
	display: flex; align-items: baseline; gap: 12px;
	padding: 15px 0 10px; border-top: 1px solid rgba(0, 0, 0, .2);
	font-size: 17px;
}
.wsn-cart__count { margin-right: auto; }
.wsn-cart__total-sum { font-weight: 700; color: #408dda; white-space: nowrap; }

/* ---------- тексты и форма ---------- */

.wsn-cart__note {
	margin: 0; padding: 15px 0 5px;
	font-size: 14px; line-height: 1.55; font-weight: 500; color: #007fcb;
}
.wsn-cart__note strong { font-weight: 700; }

.wsn-cart__form { margin: 5px 0 10px; }
.wsn-cart__field { margin-bottom: 10px; }
.wsn-cart__label { display: block; padding: 0 10px 5px 0; font-size: 15px; line-height: 1.45; }
.wsn-cart__input {
	box-sizing: border-box; width: 100%; height: 40px; padding: 0 20px;
	border: 1px solid #777; border-radius: 0; background: transparent;
	font-family: inherit; font-size: 15px; color: #000; outline: none;
}
.wsn-cart__input::placeholder { color: #000; opacity: .5; }

/* подпись об ошибке — только под своим полем, общей красной плашки у нас нет */
.wsn-cart__error { display: none; margin-top: 5px; font-size: 13px; color: red; }
.wsn-cart__field.is-error .wsn-cart__error { display: block; }
.wsn-cart__field.is-error .wsn-cart__input { border-color: red; }

.wsn-cart__submit-wrap { margin: 15px 0 5px; padding-bottom: 10px; }
.wsn-cart__submit {
	box-sizing: border-box; width: 100%; height: 40px; padding: 0; border: 0; border-radius: 0;
	background: #408dda; color: #fff;
	font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
	transition: background-color .2s ease-in-out;
}
.wsn-cart__submit:hover { background: #3679bb; }

/* ------------------------------------------------------------------ *
 *  Заставка на время отправки заказа
 *
 *  Пока заказ уходит, содержимое окна прячется и на его месте крутится
 *  иконка с подписью. Так покупатель видит, что его нажатие сработало, и не
 *  жмёт кнопку второй раз — её попросту нет на экране.
 * ------------------------------------------------------------------ */
.wsn-cart__box.is-sending > *:not(.wsn-cart__sending) { display: none; }

.wsn-cart__sending {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 18px; min-height: 260px; padding: 40px 20px; text-align: center;
}
.wsn-cart__sending[hidden] { display: none; }

.wsn-cart__sending-title {
	font-size: 20px; font-weight: 600; color: #000;
}
.wsn-cart__sending-note {
	font-size: 15px; line-height: 1.5; color: #7b7b7b;
}

/* Крутилка. Восемь лепестков по кругу, у каждого своя прозрачность; вращаем
   всю обойму шагами по 45°, поэтому она щёлкает по позициям, а не плывёт —
   ровно как fa-spinner fa-pulse в админке. */
.wsn-cart__spinner {
	position: relative; width: 46px; height: 46px;
	animation: wsn-cart-spin 1s steps(8) infinite;
}
.wsn-cart__spinner span {
	position: absolute; top: 0; left: 50%;
	width: 5px; height: 14px; margin-left: -2.5px;
	background: #408dda; border-radius: 3px;
	transform-origin: 50% 23px;
}
.wsn-cart__spinner span:nth-child(1) { transform: rotate(0deg);   opacity: 1;    }
.wsn-cart__spinner span:nth-child(2) { transform: rotate(45deg);  opacity: .85;  }
.wsn-cart__spinner span:nth-child(3) { transform: rotate(90deg);  opacity: .7;   }
.wsn-cart__spinner span:nth-child(4) { transform: rotate(135deg); opacity: .55;  }
.wsn-cart__spinner span:nth-child(5) { transform: rotate(180deg); opacity: .4;   }
.wsn-cart__spinner span:nth-child(6) { transform: rotate(225deg); opacity: .3;   }
.wsn-cart__spinner span:nth-child(7) { transform: rotate(270deg); opacity: .2;   }
.wsn-cart__spinner span:nth-child(8) { transform: rotate(315deg); opacity: .12;  }

@keyframes wsn-cart-spin { to { transform: rotate(360deg); } }

/* Кому анимация мешает — тому просто статичная иконка */
@media (prefers-reduced-motion: reduce) {
	.wsn-cart__spinner { animation: none; }
}

/* ссылка только на «с Политикой конфиденциальности»: подчёркнута она одна,
   цвет у неё тот же серый и не меняется ни при наведении, ни при нажатии */
.wsn-cart__consent {
	margin: 5px 0 0; text-align: center;
	font-size: 11px; line-height: 1.55; font-weight: 300; color: #a3a3a3;
}
.wsn-cart__consent a,
.wsn-cart__consent a:link,
.wsn-cart__consent a:visited,
.wsn-cart__consent a:hover,
.wsn-cart__consent a:focus,
.wsn-cart__consent a:active { color: inherit; text-decoration: underline; }

/* ---------- узкие экраны ----------
   Ширины повторяют прежние: до 640px карточка уже, ниже 560px — во весь экран. */

@media (min-width: 641px) {
	.wsn-cart__box { max-width: 739px; }
}
@media (max-width: 560px) {
	/* На телефоне окно во весь экран: отступы вокруг него убираем, скругление тоже. */
	.wsn-cart { padding: 0; }
	.wsn-cart__box { max-width: 100%; max-height: 100%; min-height: 100vh; margin: 0; border-radius: 0; padding: 0 20px 20px; }
	/* шапка тянется на всю ширину поверх меньших отступов окна */
	.wsn-cart__head { margin: 0 -20px; padding: 20px 20px 15px; border-radius: 0; }
	.wsn-cart__item { flex-wrap: wrap; gap: 12px; }
	.wsn-cart__name { flex: 1 1 100%; order: 2; }
	.wsn-cart__pic { order: 1; }
	.wsn-cart__qty { order: 3; margin-left: auto; }
	.wsn-cart__sum { order: 4; }
	.wsn-cart__del { order: 5; }
}

/* ---------- опрос под статьёй: ответ вместо кнопок ---------- */

/* Строка «Спасибо! Ваш голос учтён!» встаёт по центру того же artboard, где
   были «Да» и «Нет»: у него задана высота, поэтому блок не меняет размер и
   страница под ним не прыгает. Кегль и начертание — как в попапе, который эта
   строка заменила. */
.wsn-poll-thanks {
	position: absolute;
	left: 0;
	right: 0;
	padding: 0 20px;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: #000;
	text-align: center;
}

@media screen and (max-width: 640px) {
	.wsn-poll-thanks { font-size: 16px; }
}

/* ---------- защита от глобального цвета ссылок Tilda ---------- */

/* CSS семи страниц-статей и /new210h содержит правило
   #allrecords a { color:#ff8562 } — селектор по id перебивает наши классы, и в
   шапке, меню и подвале ссылки становились оранжевыми. Повторяем свои цвета с
   тем же весом (#allrecords + класс).

   Правило общее, не привязано к конкретным страницам: такой же CSS приедет с
   любой другой страницы витрины, где у ссылок задан фирменный цвет Tilda.
   Значения — те же, что в правилах выше; правим их — правим и здесь. */

#allrecords .wsn-header__links a,
#allrecords .wsn-btn-catalog { color: #fff; }

#allrecords .wsn-nav__link,
#allrecords .wsn-drop__cols a,
#allrecords .wsn-menu__nav a,
#allrecords .wsn-menu__sub a,
#allrecords .wsn-footer__link { color: #000; }

#allrecords .wsn-header__tel,
#allrecords .wsn-menu__tel { color: #111; }

#allrecords .wsn-footer__head { color: #1084d1; }
#allrecords a.wsn-footer__head:hover { color: #fff; }

/* Ссылки, которые у нас наследуют цвет от своего блока (корзина, согласия под
   формами): без этой строки они тоже красились в оранжевый. */
#allrecords .wsn-cart__name a,
#allrecords .wsn-cart__consent a,
#allrecords .wsn-gift__consent a { color: inherit; }

/* ---------- страница снятого станка: «вышел из ассортимента → замена» ---------- */

/* Было копией блока Tilda: элементы стояли абсолютно, поэтому фото вылезало за
   карточку, а подпись перекрывала снимок. Здесь карточка — обычный столбец,
   размеры и цвета взяты с прежнего блока: серая плашка #E6E6E6, у новинки белая
   с синей рамкой, скругление 31 px. */

.wsn-repl { padding: 60px 20px 80px; }

.wsn-repl__row {
	display: flex;
	/* Карточки одной высоты, даже если у снятой модели нет фото: разной высоты
	   пара смотрелась сломанной. */
	align-items: stretch;
	justify-content: center;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}

.wsn-repl__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
	max-width: 500px;
	padding: 28px 24px 32px;
	border-radius: 31px;
	text-align: center;
}

/* У снятой модели фото обычно нет, и текст в растянутой карточке висел бы
   вверху — ставим его по центру. */
.wsn-repl__card_old { background: #e6e6e6; justify-content: center; }

.wsn-repl__card_new {
	position: relative;
	border: 3px solid #408dda;
	background: #fff;
}

.wsn-repl__title,
.wsn-repl__name {
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 26px;
	line-height: 1.3;
	font-weight: 500;
	color: #000;
}

/* Название — всегда под фото, с отступом от него; у карточки-новинки крупнее,
   как было в блоке витрины. */
.wsn-repl__name { margin-top: 20px; }
.wsn-repl__card_new .wsn-repl__name { font-size: 29px; }

/* Фото вписываем целиком: снимки станков разного соотношения, и обрезать их
   нельзя — станок должен быть виден полностью. */
.wsn-repl__pic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 300px;
	margin-top: 20px;
}

.wsn-repl__pic img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Плашка «Новинка» — в углу карточки, поверх пустого места, а не поверх станка */
.wsn-repl__badge {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 145px;
	height: auto;
}

.wsn-repl__arrow {
	flex: 0 0 auto;
	align-self: center;
	width: 96px;
	height: auto;
}

.wsn-repl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	margin-top: 20px;
	padding: 12px 28px;
	border: 1px solid #408dda;
	border-radius: 1000px;
	background: #408dda;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.wsn-repl__btn:hover { background: #1084d1; border-color: #1084d1; color: #fff; }

@media screen and (max-width: 979px) {
	.wsn-repl__row { flex-direction: column; align-items: center; gap: 24px; }
	.wsn-repl__card { width: 100%; max-width: 520px; }
	/* Стрелка смотрит вниз: карточки встали одна под другой */
	.wsn-repl__arrow { transform: rotate(90deg); }
	.wsn-repl__pic { height: 240px; }
}

@media screen and (max-width: 640px) {
	.wsn-repl { padding: 40px 16px 60px; }
	.wsn-repl__title, .wsn-repl__name { font-size: 20px; }
	.wsn-repl__card_new .wsn-repl__name { font-size: 22px; }
	.wsn-repl__pic { height: 190px; }
	.wsn-repl__badge { width: 110px; top: 16px; right: 16px; }
}

/* ---------- форма «Нужна помощь специалиста?» (block-contact.php) ---------- */

/* Раньше поля рисовал скрипт Tilda по настройкам элемента. Разметка теперь своя,
   а цвета и размеры взяты один в один из прежних data-field-* того же элемента:
   поле #4ea4dd со скруглением 10 и высотой 50, подпись 14/600 белым, серая
   строка подсказок #53a5e3, кнопка белая с текстом #1084d1, высотой 60 и
   скруглением до капсулы. */

.wsn-help { text-align: left; }

.wsn-help__field { margin-bottom: 24px; }

.wsn-help__label {
	display: block;
	margin-bottom: 10px;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
}

.wsn-help__input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: #4ea4dd;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 14px;
	color: #fff;
	outline: none;
}

/* Подсказка внутри поля — белым вполсилы: цвет #53a5e3 из настроек Tilda
   относился к строкам под полем, а на синем фоне поля он почти сливался. */
.wsn-help__input::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.wsn-help__input:focus { box-shadow: inset 0 0 0 2px #fff; }

/* Ошибка поля — белым по синему: красный на этом фоне читается плохо */
.wsn-help__error {
	margin: 8px 0 0;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
}

.wsn-help__error[hidden] { display: none; }
.wsn-help__input_bad { box-shadow: inset 0 0 0 2px #ffd2d2; }

.wsn-help__btn {
	display: block;
	width: 320px;
	max-width: 100%;
	height: 60px;
	margin: 4px 0 0;
	padding: 0 24px;
	border: 1px solid #fff;
	border-radius: 1000px;
	background: #fff;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	color: #1084d1;
	cursor: pointer;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.wsn-help__btn:hover { background: #dfecf7; border-color: #dfecf7; }
.wsn-help__btn[disabled] { opacity: .7; cursor: default; }

.wsn-help__consent {
	margin: 16px 0 0;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	color: #53a5e3;
}

.wsn-help__consent a { color: #53a5e3; text-decoration: underline; }
.wsn-help__consent a:hover { color: #fff; }
#allrecords .wsn-help__consent a { color: #53a5e3; }

/* Ответ вместо формы после отправки */
.wsn-help__thanks {
	margin: 0;
	padding: 40px 0;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	color: #fff;
}

@media screen and (max-width: 979px) {
	.wsn-help__label { font-size: 13px; }
	.wsn-help__input { height: 46px; font-size: 13px; }
	.wsn-help__btn { height: 50px; font-size: 13px; }
	.wsn-help__consent { font-size: 13px; }
}

@media screen and (max-width: 640px) {
	.wsn-help__field { margin-bottom: 16px; }
	.wsn-help__input { height: 40px; }
	.wsn-help__btn { width: 280px; height: 44px; }
}

/* ---------- форма «Сервисная заявка» (/support) ---------- */

/* Поля раньше рисовал скрипт Tilda. Разметка теперь своя, а размеры и цвета
   повторяют прежние data-field-* того же элемента: поле высотой 42 со
   скруглением 12 и рамкой 2px #cbcbcb, отступ между полями 14, кнопка 260×50
   капсулой на #408dda, подпись под формой серым #b6b6b6 по центру. */

.wsn-srv { text-align: left; }

.wsn-srv__field { margin-bottom: 14px; }

.wsn-srv__input,
.wsn-srv__area {
	display: block;
	width: 100%;
	border: 2px solid #cbcbcb;
	border-radius: 12px;
	background: #fff;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 16px;
	color: #000;
	outline: none;
	box-sizing: border-box;
}

.wsn-srv__input { height: 42px; padding: 0 16px; }
.wsn-srv__area  { min-height: 96px; padding: 10px 16px; resize: vertical; }

.wsn-srv__input::placeholder,
.wsn-srv__area::placeholder { color: #a7aaad; }

.wsn-srv__input:focus,
.wsn-srv__area:focus { border-color: #408dda; }

/* Телефон: флаг и код — подписью слева, поле начинается за ними */
.wsn-srv__phone { position: relative; }

.wsn-srv__flag,
.wsn-srv__code {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}

.wsn-srv__flag { left: 14px; }
.wsn-srv__code { left: 40px; color: #000; }
.wsn-srv__tel  { padding-left: 68px; }

/* Кнопка выбора файлов: само поле скрыто, нажимают на подпись */
.wsn-srv__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wsn-srv__file-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 20px;
	border: 1px solid #408dda;
	border-radius: 1000px;
	background: #408dda;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.wsn-srv__file-btn:hover { background: #397fc4; border-color: #397fc4; }

.wsn-srv__file-list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.wsn-srv__file-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 13px;
	line-height: 1.3;
	color: #555;
}

.wsn-srv__file-name { word-break: break-all; }

.wsn-srv__file-del {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid #cbcbcb;
	border-radius: 50%;
	background: #fff;
	font-size: 14px;
	line-height: 1;
	color: #888;
	cursor: pointer;
}

.wsn-srv__file-del:hover { border-color: #d33; color: #d33; }

.wsn-srv__error {
	margin: 0 0 12px;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #d33;
}

.wsn-srv__error[hidden] { display: none; }
.wsn-srv__input_bad { border-color: #d33; }

.wsn-srv__btn {
	display: block;
	width: 260px;
	max-width: 100%;
	height: 50px;
	margin: 0 auto;
	padding: 0 20px;
	border: 1px solid #408dda;
	border-radius: 1000px;
	background: #408dda;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.wsn-srv__btn:hover { background: #397fc4; border-color: #397fc4; }
.wsn-srv__btn[disabled] { opacity: .7; cursor: default; }

.wsn-srv__note {
	margin: 14px 0 0;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #b6b6b6;
	text-align: center;
}

.wsn-srv__note a { color: #b6b6b6; text-decoration: underline; }
#allrecords .wsn-srv__note a { color: #b6b6b6; }

/* Ответ вместо формы после отправки */
.wsn-srv__thanks {
	margin: 0;
	padding: 30px 0;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #000;
	text-align: center;
}

@media screen and (max-width: 960px) {
	.wsn-srv__btn { height: 48px; }
}

@media screen and (max-width: 320px) {
	.wsn-srv__btn { width: 280px; height: 44px; }
}

/* Окно «Готовы немного подождать?» — форма брони станка, которого нет в наличии.
   Поля свои, в стиле остальных анкет: у формы Tilda ошибка рисовалась красной
   рамкой и красной плашкой во всю кнопку. Само окно тоже своё — wsn-wait-modal
   в header-popups.php, стили ниже. */
.wsn-wait { margin: 24px 0 0; }

/* Ширину полей и кнопки считаем вместе с полями и рамкой: в окне Tilda это делал
   их сброс стилей, в своём окне его нет — поля вылезали за край на 30px. */
.wsn-wait__input,
.wsn-wait__btn { box-sizing: border-box; }
.wsn-wait__field { margin-bottom: 16px; }
.wsn-wait__label {
	display: block; margin-bottom: 6px;
	font-size: 15px; color: #232323; }
.wsn-wait__input {
	width: 100%; height: 48px; padding: 0 14px;
	font: inherit; font-size: 16px; color: #232323;
	background: #fff; border: 1px solid #d5d9de; border-radius: 8px;
	outline: none; transition: border-color .15s; }
.wsn-wait__input::placeholder { color: #9aa2ab; }
.wsn-wait__input:focus { border-color: #408dda; }
.wsn-wait__input_bad { border-color: #d63636; }

/* Телефон: флаг и код стоят подписью слева, в поле только десять цифр. */
.wsn-wait__phone { position: relative; }
.wsn-wait__flag {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	font-size: 18px; line-height: 1; pointer-events: none; }
.wsn-wait__code {
	position: absolute; left: 42px; top: 50%; transform: translateY(-50%);
	font-size: 16px; color: #232323; pointer-events: none; }
.wsn-wait__tel { padding-left: 72px; }

.wsn-wait__error {
	margin: -8px 0 14px; font-size: 14px; color: #d63636; }

.wsn-wait__btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; height: 52px; margin-top: 4px; padding: 0 18px;
	font: inherit; font-size: 16px; font-weight: 600; color: #fff;
	background: #408dda; border: 1px solid #408dda; border-radius: 100px;
	cursor: pointer; transition: background-color .15s, border-color .15s; }
.wsn-wait__btn:hover { background: #0871b7; border-color: #0871b7; }
.wsn-wait__btn:disabled { opacity: .7; cursor: default; }
.wsn-wait__btn-icon { font-size: 15px; }

.wsn-wait__note {
	margin: 14px 0 0; font-size: 12px; line-height: 1.4; color: #8c8c8c;
	text-align: center; }
.wsn-wait__note a { color: #c9c9c9; }

.wsn-wait__thanks {
	margin: 8px 0 0; font-size: 16px; color: #232323; text-align: center; }

/* Строка товара: картинка, название и артикул — их подставляет form-wait.js по
   кнопке, с которой окно открыли. Пока товара нет, строку не показываем: пустая
   полоса над заголовком читается как ошибка вёрстки. */
.wsn-wait-modal__product {
	display: none;
	align-items: center;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.wsn-wait-modal.has-product .wsn-wait-modal__product { display: flex; }

.wsn-wait-modal__pic {
	flex: 0 0 88px; width: 88px; height: 88px;
	background: #f4f6f8 center/contain no-repeat; border-radius: 8px;
}

.wsn-wait-modal__name {
	font-size: 18px; font-weight: 600; line-height: 1.25; color: #232323;
}

.wsn-wait-modal__sku { margin: 6px 0 0; font-size: 14px; color: #8c8c8c; }

/* Заголовок и пояснение — по центру, как было в окне на витрине. */
.wsn-wait-modal__head { position: relative; text-align: center; }

.wsn-wait-modal__head .wsn-cart__title { font-size: 26px; }

.wsn-wait-modal__descr {
	margin: 12px 0 0;
	font-size: 15px; line-height: 1.55; color: #232323;
}

/* Окно уже: полей всего два, на всю ширину корзины они выглядели бы потерянными.
   Столько же — у обратного звонка и у просьбы сохранить номер. */
.wsn-wait-modal .wsn-cart__box,
.wsn-cb-modal .wsn-cart__box,
.wsn-max .wsn-cart__box { max-width: 480px; }

/* ---------- окно «Заказать обратный звонок» ----------
   Заголовок, пояснение и поля — те же классы, что у окна брони: два окна с одной
   формой из двух полей, разводить их стили незачем. Своё здесь только сообщение
   об ошибке и благодарность. */
.wsn-cb { margin: 24px 0 0; }

.wsn-cb__error {
	margin: -8px 0 14px; font-size: 14px; color: #d63636;
}

.wsn-cb__thanks {
	margin: 8px 0 0; font-size: 16px; color: #232323; text-align: center;
}

/* ---------- окно «ДАВАЙТЕ МЫ ВАМ ПОЗВОНИМ» ----------
   Показывается само при уходе курсора за верх экрана. Слева форма из двух полей,
   справа картинка со станком; на узких экранах картинка уходит вниз. */
.wsn-exit .wsn-cart__box { max-width: 900px; }

.wsn-exit__grid {
	display: flex;
	align-items: center;
	gap: 30px;
}

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

.wsn-exit__title {
	color: #1084d1;
	font-size: 30px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.15;
	text-transform: uppercase;
}

.wsn-exit__sub {
	margin: 14px 0 0;
	max-width: 420px;
	font-size: 16px;
	line-height: 1.45;
	color: #232323;
}

.wsn-exit-form { margin-top: 20px; }

.wsn-exit__error { margin: -8px 0 14px; font-size: 14px; color: #d63636; }

.wsn-exit__thanks { margin: 8px 0 0; font-size: 16px; color: #232323; }

/* картинка справа: подрезаем по высоте окна, на узких уходит под форму */
.wsn-exit__pic { flex: 0 1 380px; min-width: 0; }

.wsn-exit__pic img { display: block; width: 100%; height: auto; }

@media (max-width: 760px) {
	.wsn-exit__grid { flex-direction: column-reverse; gap: 16px; }
	.wsn-exit__pic { flex: 0 0 auto; width: 100%; max-width: 360px; }
	.wsn-exit__title { font-size: 24px; }
	.wsn-exit__sub { font-size: 15px; }
}

/* ---------- окно «Друзья, сохраните наш номер» ----------
   Кнопка MAX синяя с переливом, кнопка Telegram — фирменного голубого цвета:
   так они выглядели в блоке Tilda. */
.wsn-max__img {
	display: block; width: 100%; height: auto;
	margin: 0 0 20px; border-radius: 8px;
}

.wsn-max__text {
	margin: 0; font-size: 15px; line-height: 1.55; color: #232323; text-align: center;
}

.wsn-max__accent { font-weight: 600; }
.wsn-max__warn { color: #a80000; font-weight: 600; }

.wsn-max__btns {
	display: flex; flex-direction: column; gap: 12px; margin-top: 24px;
}

.wsn-max__btn {
	display: flex; align-items: center; justify-content: center;
	box-sizing: border-box;
	height: 48px; padding: 0 18px;
	font-size: 16px; font-weight: 600; color: #fff !important; text-decoration: none;
	border-radius: 100px;
	transition: opacity .15s;
}

.wsn-max__btn:hover { opacity: .9; }

.wsn-max__btn_max { background: linear-gradient(0.201turn, #3cb3fc 0%, #1a6ff5 100%); }
.wsn-max__btn_tg  { background: #2aabee; }