/**
 * Блок «Устройство станка» — своя вёрстка вместо t396 (Tilda).
 * Подключается только на страницах товара (см. functions.php).
 *
 * Схема по центру, под ней список выносок в четыре колонки. Высоту строк
 * считает браузер: подпись любой длины переносится, а не наезжает на соседнюю,
 * как было в разметке витрины с абсолютными координатами.
 */

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

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

/* размеры шрифта как были у витрины: 40 / 30 / 26 px */
.wsn-scheme__title {
	max-width: 1200px;
	margin: 0 auto 40px;
	padding: 0 20px;
	color: var(--uc-color-color-fRWotIFb, #222937);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.5px;
	text-align: center;
}

.wsn-scheme__title strong { font-weight: 500; }

.wsn-scheme__pic {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}

/* 543px — ширина схемы на витрине; на узком экране ужимается по месту */
.wsn-scheme__pic img {
	width: 100%;
	max-width: 543px;
	height: auto;
	display: inline-block;
}

/* ------------------------------------------------------------------ выноски */

/* Колонки, а не сетка: номера должны идти сверху вниз по столбцу (1-8, 9-16 …),
   а grid раскладывает построчно. Тот же приём, что во вкладке «Характеристики». */
.wsn-scheme__list {
	max-width: 1200px;
	margin: 36px auto 0;
	padding: 0 20px;
	list-style: none;
	column-count: 4;
	column-gap: 30px;
}

.wsn-scheme__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	margin-bottom: 14px;
	break-inside: avoid;   /* строка не рвётся между колонками */
}

/* Кружок с номером — фирменный голубой, цифра белая.
   Набор тот же, что у подписей рядом: 14px, только жирный. */
.wsn-scheme__num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--uc-color-color-BgrojJN1, #3d93ff);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.2px;
}

/* набор как во вкладке «Характеристики» (.wsn-spec в wsn-main.css) */
.wsn-scheme__text {
	color: #222937;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.2px;
}

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

@media (max-width: 1100px) {
	.wsn-scheme__title { font-size: 30px; }
	.wsn-scheme__list { column-count: 3; column-gap: 24px; }
}

@media (max-width: 780px) {
	.wsn-scheme__list { column-count: 2; }
}

@media (max-width: 520px) {
	.wsn-scheme { padding: 40px 0; }
	.wsn-scheme__title { font-size: 26px; margin-bottom: 24px; }
	.wsn-scheme__list { column-count: 1; }
}