/* ============================================================================
   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-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); }

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

.wsn-header__cart { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }

.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;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.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; }

.wsn-header__phone { flex: none; display: flex; flex-direction: column; align-items: flex-end; margin-left: 34px; }

.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; }

.wsn-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(426px, 100%);
	height: 100%;
	padding: 24px 30px 40px;
	background: #fff;
	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__social { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.wsn-menu__social img { display: block; width: 32px; height: 32px; }

/* пока панель открыта, страница под ней не прокручивается */
body.wsn-lock { overflow: hidden; }

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

/* Высота шапки и размеры её содержимого одни на всех экранах: --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-kit { padding: 10px 0; }
.wsn-kit__grid { column-count: 2; column-gap: 70px; }

.wsn-kit__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-kit__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-kit__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-kit__ic--no { background: none; border-radius: 0; }

.wsn-kit__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-kit__dop p { margin: 0 0 10px; }
.wsn-kit__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: none; }
	.wsn-tabs__select-wrap { display: block; }
	.wsn-spec__cols, .wsn-kit__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;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	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__close {
	position: fixed; top: 20px; right: 20px; z-index: 1;
	padding: 10px; border: 0; background: none; color: #fff; cursor: pointer; line-height: 0;
}

.wsn-cart__box {
	box-sizing: border-box;
	max-width: 560px; margin: 25px auto; padding: 20px 30px;
	background: #fff; border-radius: 12px; color: #000;
}

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

.wsn-cart__head { padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.wsn-cart__title { 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__box { max-width: 100%; margin: 0; min-height: 100vh; border-radius: 0; padding: 20px; }
	.wsn-cart__close { top: 10px; right: 10px; }
	.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 ошибка рисовалась красной
   рамкой и красной плашкой во всю кнопку. Окно и его заголовок остались
   тильдовскими (t1122 в header-popups.php). */
.wsn-wait { margin: 24px 0 0; }
.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; }

/* Шапка окна: картинка, название и артикул товара — их подставляет скрипт по
   кнопке, с которой окно открыли. Пока товара нет, шапку не показываем. */
#rec2100359551 .t1122__header,
#rec2100359551 .t1122__divider { display: none; }
#rec2100359551.has-product .t1122__header,
#rec2100359551.has-product .t1122__divider { display: block; }
#rec2100359551 .t1122__product { display: flex; align-items: center; gap: 16px; }
#rec2100359551 .t1122__product-img {
	flex: 0 0 88px; width: 88px; height: 88px;
	background: #f4f6f8 center/contain no-repeat; border-radius: 8px; }
#rec2100359551 .js-product-title {
	font-size: 18px; font-weight: 600; line-height: 1.25; color: #232323; }
#rec2100359551 .t1122__product-option {
	margin: 6px 0 0; font-size: 14px; color: #8c8c8c; }