/* =========================================================================
   Montserrat локально, пункт 35 плана. Google Fonts из шапки убран.
   Файл ОДИН вариативный на всю ось 400–900, а не три статических начертания:
   в вёрстке живьём встречаются 400, 500, 600, 700, 800 и 900, из Google
   приезжали только 400/700/900 — остальные браузер дорисовывал сам.
   Русской странице нужны два подмножества: cyrillic 24 КБ + latin 38 КБ.
   *-ext лежат рядом и качаются, только если на странице встретится их символ —
   об этом заботится unicode-range, лишнего запроса не будет.
   ========================================================================= */
@font-face {
font-display:swap;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('/content/themes/easy-theme/fonts/montserrat-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-display:swap;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('/content/themes/easy-theme/fonts/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-display:swap;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('/content/themes/easy-theme/fonts/montserrat-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-display:swap;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('/content/themes/easy-theme/fonts/montserrat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   servisbeton.ru — редизайн 2026, вариант v1 (текущие цвета сохранены)
   Подключается ПОСЛЕ style.css. Старые классы темы не переопределяем:
   всё новое живёт в пространстве имён .sb-*.
   ========================================================================= */

:root {
	/* палитра снята из собранного style.css, новых цветов не вводим */
	--sb-blue: #0d0320;         /* фон шапки и тёмных секций */
	--sb-violet: #3e324e;       /* панель меню, карточки на тёмном */
	--sb-violet-soft: rgba(62, 50, 78, .3);
	--sb-violet-line: #7a1195;  /* обводка акцентных элементов */
	--sb-yellow: #f0c014;       /* главная кнопка */
	--sb-green: #0e8125;        /* цена, галочки, акцент в заголовке. 08.09: был
	                               #18c139 — кислотный, на белом резал глаз */
	--sb-red: #de470d;
	--sb-gray-3: #2c2c2c;
	--sb-text: #26282c;        /* 08.09: основной текст сайта, был синеватый #091b36 */

	--sb-white: #fff;
	--sb-bg: #f4f4f6;
	--sb-line: rgba(255, 255, 255, .12);
	--sb-line-dark: rgba(38, 40, 44, .12);

	--sb-radius: 10px;
	--sb-radius-sm: 6px;
	--sb-gap: 24px;
	--sb-container: 1440px;

	--sb-shadow: 0 4px 24px rgba(13, 3, 32, .10);
	--sb-ease: 250ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- каркас ---------- */

.sb-container {
	width: 100%;
	max-width: var(--sb-container);
	margin: 0 auto;
	padding: 0 20px;
}

.sb-section {
	padding: 48px 0;
}

.sb-section--dark {
	background: var(--sb-blue);
	color: var(--sb-white);
}

/* ---------- типографика ---------- */

.sb-h1,
.sb-h2 {
	margin: 0 0 16px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.sb-h1 {
	font-size: clamp(28px, 4vw, 52px);
	text-transform: uppercase;
}

.sb-h2 {
	font-size: clamp(22px, 2.4vw, 34px);
}

.sb-accent {
	color: var(--sb-green);
}

/* ---------- кнопки ---------- */

.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--sb-radius-sm);
	font: 700 15px/1.2 inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sb-ease), color var(--sb-ease), transform var(--sb-ease);
}

.sb-btn--primary {
	background: var(--sb-yellow);
	color: var(--sb-text);
}

.sb-btn--primary:hover {
	background: #ffd028;
}

.sb-btn--ghost {
	background: transparent;
	border: 1px solid var(--sb-yellow);
	color: var(--sb-yellow);
}

.sb-btn--ghost:hover {
	background: var(--sb-yellow);
	color: var(--sb-text);
}

.sb-btn:active {
	transform: translateY(1px);
}

/* 🩸 тема красит любую button:hover своими правилами — держим свой вес выше,
   но без !important: хватает двух классов. См. .sb-btn.sb-btn--primary. */
.sb-btn.sb-btn--primary:hover,
.sb-btn.sb-btn--ghost:hover {
	text-decoration: none;
}

/* ---------- утилиты только для новых блоков ---------- */

.sb-grid {
	display: grid;
	gap: var(--sb-gap);
}

.sb-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sb-gap);
}

.sb-card {
	background: var(--sb-white);
	border-radius: var(--sb-radius);
	box-shadow: var(--sb-shadow);
}

.sb-card--dark {
	background: var(--sb-violet);
	color: var(--sb-white);
	box-shadow: none;
}

/* =========================================================================
   ШАПКА
   ========================================================================= */

/* ---------- плашка преимуществ ---------- */

.sb-topbar {
	background: var(--sb-blue);
	border-bottom: 1px solid var(--sb-line);
	color: var(--sb-white);
}

.sb-topbar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 05.09: под первым экраном полоса — самостоятельная лента во всю ширину, а не
   строчка шапки. Пункты переносятся; раньше лишние просто прятались по медиа-запросу
   и на узком экране половина преимуществ пропадала вместе с текстом. */
.sb-topbar--band {
	border-top: 0;
	border-bottom: 0;
}

.sb-topbar--band .sb-topbar__list {
	justify-content: flex-start;
	gap: 0;
}

.sb-topbar--band .sb-topbar__item {
	flex: 1 1 200px;
	padding: 14px 16px;
}

.sb-topbar--band .sb-topbar__item:first-child {
	padding-left: 16px;
}

.sb-topbar__item {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 10px 12px;
	border-left: 1px solid var(--sb-line);
	font-size: 12px;
	line-height: 1.25;
}

.sb-topbar__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.sb-topbar__item:last-child {
	padding-right: 0;
}

.sb-topbar__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.sb-topbar__text {
	display: block;
	min-width: 0;
}

.sb-topbar__text b {
	display: block;
	font-weight: 700;
	color: rgba(255, 255, 255, .72);
}

/* ---------- основная полоса ---------- */

.sb-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--sb-blue);
	/* 🩸 шапку НЕ ужимаем при скролле: тема уже ловила на этом тряску страницы,
	   когда класс переключался туда-сюда по 12 раз за прокрутку */
}

.sb-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
	min-height: 82px;
	padding: 10px 0;
}

.sb-header__logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.sb-header__logo svg {
	width: 132px;
	height: 52px;
}

/* меню: сетку и цвета задаём тут, разметку рисует старый walker темы */
.sb-header .sb-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-header .sb-menu > li > a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--sb-radius-sm);
	color: var(--sb-white);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--sb-ease), color var(--sb-ease);
}

.sb-header .sb-menu > li > a:hover {
	background: var(--sb-violet);
	color: var(--sb-white);
}

.sb-header__side {
	display: flex;
	align-items: center;
	gap: 18px;
}

.sb-header__phones {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.15;
}

.sb-header__phone {
	color: var(--sb-white);
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}

.sb-header__phone:hover {
	color: var(--sb-yellow);
}

.sb-header__note {
	margin-top: 2px;
	color: var(--sb-green);
	font-size: 12px;
	font-weight: 600;
}

.sb-header__social {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sb-header__social-link {
	display: block;
	line-height: 0;
}

.sb-header__cta {
	white-space: nowrap;
}

/* бургер: показывается только на узких, зона нажатия не меньше 44px */
.sb-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	cursor: pointer;
}

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

@media (max-width: 1439px) {

	.sb-header__inner {
		gap: 18px;
	}
}

@media (max-width: 1199px) {
	.sb-header .sb-menu,
	.sb-header__cta {
		display: none;
	}

	.sb-header__burger {
		display: flex;
	}

	.sb-header__inner {
		grid-template-columns: auto 1fr;
	}

	.sb-header__side {
		justify-content: flex-end;
	}
}

@media (max-width: 767px) {
	.sb-header__inner {
		min-height: 64px;
		gap: 12px;
	}

	.sb-header__logo svg {
		width: 96px;
		height: 38px;
	}

	.sb-header__phone {
		font-size: 16px;
	}

	.sb-header__note {
		font-size: 11px;
	}

	.sb-header__social {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-btn {
		transition: none;
	}
}

/* =========================================================================
   ПЕРВЫЙ ЭКРАН ГЛАВНОЙ (пункт 12 плана)
   ========================================================================= */

.sb-hero {
	position: relative;
	overflow: hidden;
	background: var(--sb-blue);
	color: var(--sb-white);
}

.sb-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 🩸 подложку держим на ::before-подобном span, а не на z-index: -1:
   отрицательный слой всплывает под футером при обрыве загрузки CSS */
.sb-hero__veil {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(90deg, rgba(13, 3, 32, .92) 0%, rgba(13, 3, 32, .78) 55%, rgba(13, 3, 32, .62) 100%);
}

.sb-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	align-items: start;
	gap: 32px;
	padding-top: 56px;
	padding-bottom: 56px;
}

.sb-hero__main {
	min-width: 0;
}

/* ---------- бейдж и заголовок ---------- */

.sb-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 7px 14px;
	border-radius: 100px;
	background: var(--sb-green);
	color: var(--sb-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.sb-hero__badge-icon {
	flex: 0 0 auto;
	fill: currentColor;
}

.sb-hero__title {
	max-width: 16em;
	margin-bottom: 12px;
	color: var(--sb-white);
}

.sb-hero__lead {
	max-width: 34em;
	margin: 0 0 28px;
	font-size: clamp(15px, 1.3vw, 19px);
	line-height: 1.45;
	color: rgba(255, 255, 255, .82);
}

/* =========================================================================
   БЛОК «РАССЧИТАТЬ СТОИМОСТЬ» (пункты 12–13 плана)
   Разметку полей рисует WPForms, здесь только раскладка и вид.
   ========================================================================= */

.sb-calc {
	position: relative;
	padding: 22px;
	/* 08.09: фиолетовой обводки нет — на тёмном фоне она читалась лишней рамкой */
	border-radius: var(--sb-radius);
	background: var(--sb-violet);
	box-shadow: 0 18px 48px rgba(13, 3, 32, .45);
}

.sb-calc__head {
	margin-bottom: 18px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--sb-white);
}

/* ---------- поля ---------- */

.sb-calc .wpforms-container,
.sb-calc .wpforms-form {
	margin: 0;
	padding: 0;
}

.sb-calc .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
}

.sb-calc .wpforms-field {
	flex: 1 1 100%;
	min-width: 0;
	padding: 0 0 14px;
}

/* марка и объём — в одну строку, как в макете */
.sb-calc .wpforms-field.sb-f-mark {
	flex: 1 1 58%;
}

.sb-calc .wpforms-field.sb-f-volume {
	flex: 1 1 34%;
}

.sb-calc .wpforms-field-label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: rgba(255, 255, 255, .72);
}

.sb-calc .wpforms-required-label {
	color: var(--sb-yellow);
}

.sb-calc input[type="text"],
.sb-calc input[type="tel"],
.sb-calc input[type="email"],
.sb-calc input[type="number"],
.sb-calc select,
.sb-calc textarea {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--sb-radius-sm);
	background: rgba(13, 3, 32, .55);
	color: var(--sb-white);
	font: 400 15px/1.3 inherit;
	transition: border-color var(--sb-ease), background var(--sb-ease);
}

.sb-calc select {
	/* родная стрелка на тёмном фоне теряется — рисуем свою */
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' fill-opacity='.7' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.sb-calc input::placeholder,
.sb-calc textarea::placeholder {
	color: rgba(255, 255, 255, .45);
}

.sb-calc input:focus,
.sb-calc select:focus,
.sb-calc textarea:focus {
	outline: none;
	border-color: var(--sb-yellow);
	background: rgba(13, 3, 32, .75);
}

/* чекбокс «нужна консультация» */
.sb-calc .wpforms-field-checkbox ul,
.sb-calc .wpforms-field-radio ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-calc .wpforms-field-checkbox li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.sb-calc .wpforms-field-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	flex: 0 0 18px;
	accent-color: var(--sb-yellow);
}

.sb-calc .wpforms-field-checkbox label {
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .82);
	cursor: pointer;
}

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

.sb-calc .wpforms-submit-container {
	padding: 4px 0 0;
}

.sb-calc button[type="submit"],
.sb-calc .wpforms-submit {
	width: 100%;
	min-height: 52px;
	padding: 14px 24px;
	border: 0;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-yellow);
	color: var(--sb-text);
	font: 800 16px/1.2 inherit;
	text-transform: none;
	cursor: pointer;
	transition: background var(--sb-ease);
}

/* 🩸 тема перехватывает button:hover своими правилами — держим свой вес выше */
.sb-calc .wpforms-form button[type="submit"]:hover,
.sb-calc .wpforms-form .wpforms-submit:hover {
	background: #ffd028;
	color: var(--sb-text);
}

.sb-calc .wpforms-error,
.sb-calc label.wpforms-error {
	margin-top: 4px;
	font-size: 12px;
	color: #ff8a63;
}

.sb-calc .wpforms-confirmation-container-full,
.sb-calc div[submit-success] > .wpforms-confirmation-container-full {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--sb-green);
	border-radius: var(--sb-radius-sm);
	background: rgba(24, 193, 57, .12);
	color: var(--sb-white);
}

/* ---------- адаптив первого экрана ---------- */

@media (max-width: 1199px) {
	.sb-hero__inner {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 24px;
	}
}

@media (max-width: 1023px) {
	.sb-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 36px;
		padding-bottom: 36px;
	}

	.sb-calc {
		order: -1;
	}
}

@media (max-width: 767px) {
	.sb-calc {
		padding: 18px;
	}

	.sb-calc .wpforms-field.sb-f-mark,
	.sb-calc .wpforms-field.sb-f-volume {
		flex: 1 1 100%;
	}
}

/* =========================================================================
   РЯД «ПОПУЛЯРНЫЕ МАРКИ» + «ДОСТАВКА» (пункты 14–15 плана)
   ========================================================================= */

.sb-section--light {
	background: var(--sb-bg);
	color: var(--sb-text);
}

/* пара равных колонок: сейчас это отзывы и вопросы */
.sb-row2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sb-gap);
	align-items: stretch;
}

.sb-row2 > .sb-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
}

.sb-row2 .sb-h2 {
	margin: 0 0 16px;
	font-size: clamp(18px, 1.6vw, 22px);
}

/* ---------- популярные марки ---------- */

.sb-popular__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.sb-popular__title {
	margin: 0;
	font-size: clamp(22px, 2.2vw, 30px);
}

.sb-popular__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 8px 14px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	color: var(--sb-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--sb-ease), border-color var(--sb-ease);
}

.sb-popular__all:hover {
	background: var(--sb-yellow);
	border-color: var(--sb-yellow);
	color: var(--sb-text);
}

/* 05.09 блок во всю ширину: карточки ложатся сеткой, карусель не нужна.
   auto-fit с minmax сам решает, сколько влезет в строку — от девяти на десктопе
   до двух на телефоне, и последний ряд не остаётся дырявым */
.sb-popular__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-popular__item {
	min-width: 0;
}

.sb-popular__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 14px 12px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--sb-ease), box-shadow var(--sb-ease), transform var(--sb-ease);
}

.sb-popular__card:hover {
	border-color: var(--sb-green);
	box-shadow: var(--sb-shadow);
	transform: translateY(-2px);
	color: var(--sb-text);
}

.sb-popular__img {
	width: 100%;
	max-width: 116px;
	height: auto;
	border-radius: var(--sb-radius-sm);
}

.sb-popular__name {
	display: block;
	line-height: 1.15;
}

.sb-popular__mark {
	display: block;
	font-size: 20px;
	font-weight: 800;
}

.sb-popular__mark--long {
	font-size: 14px;
	font-weight: 700;
}

.sb-popular__class {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: rgba(38, 40, 44, .6);
}

.sb-popular__price {
	margin-top: auto;
	padding-top: 2px;
	font-size: 13px;
	white-space: nowrap;
}

.sb-popular__price b {
	font-size: 15px;
	font-weight: 800;
}

.sb-popular__note {
	margin: 4px 0 0;
	font-size: 12px;
	color: rgba(38, 40, 44, .55);
}

/* ---------- доставка во всю ширину, с картой зоны ---------- */

.sb-delivery__title {
	margin-bottom: 20px;
	font-size: clamp(22px, 2.2vw, 30px);
}

.sb-delivery__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--sb-gap);
	align-items: stretch;
}

.sb-delivery__side {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
}

.sb-delivery__list {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.sb-delivery__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
}

.sb-delivery__check {
	flex: 0 0 auto;
	margin-top: 1px;
}

.sb-delivery__text {
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(38, 40, 44, .72);
}

.sb-delivery__text p {
	margin: 0 0 8px;
}

.sb-delivery__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: auto;
}

.sb-delivery__zones {
	color: var(--sb-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sb-delivery__zones:hover {
	color: var(--sb-violet-line);
}

/* карта: заглушка и iframe лежат друг на друге, iframe получает src по действию */
.sb-delivery__map {
	position: relative;
	min-height: 320px;
	border-radius: var(--sb-radius);
	overflow: hidden;
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-delivery__img,
.sb-delivery__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sb-delivery__img {
	object-fit: cover;
	cursor: pointer;
}

@media (max-width: 1023px) {
	.sb-row2,
	.sb-delivery__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-delivery__map {
		min-height: 260px;
	}
}

@media (max-width: 767px) {
	.sb-row2 > .sb-card,
	.sb-delivery__side {
		padding: 18px;
	}

	.sb-popular__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.sb-popular__list {
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	}

	.sb-topbar--band .sb-topbar__item {
		flex: 1 1 100%;
		border-left: 0;
		border-top: 1px solid var(--sb-line);
	}

	.sb-topbar--band .sb-topbar__item:first-child {
		border-top: 0;
	}
}

/* =========================================================================
   «ПОЧЕМУ ВЫБИРАЮТ НАС» (пункт 16 плана)
   ========================================================================= */

.sb-why__title {
	margin-bottom: 20px;
	font-size: clamp(22px, 2.2vw, 30px);
}

.sb-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
	gap: var(--sb-gap);
	align-items: stretch;
}

/* ---------- четыре цифры ---------- */

.sb-why__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 14px;
	margin: 0;
	padding: 22px;
	list-style: none;
}

.sb-why__fact {
	min-width: 0;
}

.sb-why__num {
	display: block;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 800;
	line-height: 1.05;
	color: var(--sb-text);
	white-space: nowrap;
}

.sb-why__lead {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.sb-why__sub {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.25;
	color: rgba(38, 40, 44, .55);
}

/* ---------- три карточки с фото ---------- */

.sb-why__card {
	position: relative;
	margin: 0;
	min-height: 200px;
	border-radius: var(--sb-radius);
	overflow: hidden;
	background: var(--sb-violet);
}

.sb-why__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* подпись читается поверх любого снимка только с собственной подложкой */
.sb-why__cap {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: 40px 16px 14px;
	background: linear-gradient(180deg, rgba(13, 3, 32, 0) 0%, rgba(13, 3, 32, .88) 55%);
	color: var(--sb-white);
}

.sb-why__cap-title {
	display: block;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
}

.sb-why__cap-text {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .8);
}

@media (max-width: 1199px) {
	.sb-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sb-why__facts {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.sb-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-why__facts {
		padding: 18px;
	}

	.sb-why__card {
		min-height: 170px;
	}
}

/* =========================================================================
   ОТЗЫВЫ И ЧАСТЫЕ ВОПРОСЫ (пункт 17 плана)
   05.09: карта зоны уехала внутрь блока доставки, здесь осталась пара колонок.
   ========================================================================= */

/* ---------- отзывы ---------- */

.sb-reviews__list {
	display: grid;
	gap: 12px;
}

.sb-reviews__item {
	padding: 14px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
}

.sb-reviews__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 8px;
}

.sb-reviews__text {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.45;
}

.sb-reviews__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.sb-reviews__name {
	font-size: 12px;
	font-weight: 700;
	color: rgba(38, 40, 44, .7);
}

.sb-reviews__video {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--sb-violet-line);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.sb-reviews__video:hover {
	text-decoration: underline;
}

/* ---------- вопросы ---------- */

.sb-faq__list {
	display: grid;
	gap: 8px;
}

.sb-faq__item {
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
}

.sb-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

/* родной маркер <summary> убираем в обоих движках */
.sb-faq__q::-webkit-details-marker {
	display: none;
}

.sb-faq__q::marker {
	content: "";
}

.sb-faq__chevron {
	flex: 0 0 auto;
	color: rgba(38, 40, 44, .45);
	transition: transform var(--sb-ease);
}

.sb-faq__item[open] .sb-faq__chevron {
	transform: rotate(180deg);
}

.sb-faq__a {
	margin: 0;
	padding: 0 14px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(38, 40, 44, .75);
}



@media (prefers-reduced-motion: reduce) {
	.sb-faq__chevron,
	.sb-popular__card {
		transition: none;
	}
}

/* ---------- три пункта из ACF в блоке «Почему выбирают нас» ---------- */

.sb-why__notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin: var(--sb-gap) 0 0;
	padding: 0;
	list-style: none;
}

.sb-why__note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	font-size: 13px;
	line-height: 1.4;
	color: rgba(38, 40, 44, .78);
}

.sb-why__note-icon {
	flex: 0 0 auto;
}

/* =========================================================================
   ПОДВАЛ (пункт 18)
   Одна лента на тёмном: бренд, три колонки ссылок, контакты и кнопка.
   Ниже тонкая полоса с копирайтом и служебными ссылками.
   ========================================================================= */

.sb-footer {
	background: var(--sb-blue);
	color: var(--sb-white);
	padding: 40px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.sb-footer__top {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) minmax(240px, auto);
	gap: 32px var(--sb-gap);
	align-items: start;
	padding-bottom: 32px;
}

/* ---------- бренд ---------- */

.sb-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sb-footer__logo {
	display: inline-flex;
	width: 150px;
}

.sb-footer__logo svg {
	width: 150px;
	height: 59px;
}

.sb-footer__tagline {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .65);
}

/* ---------- три колонки ссылок ---------- */

.sb-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sb-gap);
}

.sb-footer__col-title {
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 15px;
	color: var(--sb-white);
}

.sb-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.sb-footer__link {
	color: rgba(255, 255, 255, .65);
	text-decoration: none;
	transition: color var(--sb-ease);
}

.sb-footer__link:hover,
.sb-footer__link:focus-visible {
	color: var(--sb-yellow);
	text-decoration: none;
}

/* ---------- контакты, мессенджеры, кнопка ---------- */

.sb-footer__contacts {
	display: grid;
	gap: 14px;
	justify-items: start;
}

.sb-footer__phones {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	gap: 2px 10px;
}

.sb-footer__phone {
	font-size: 19px;
	font-weight: 800;
	color: var(--sb-white);
	text-decoration: none;
	white-space: nowrap;
}

.sb-footer__phone:hover,
.sb-footer__phone:focus-visible {
	color: var(--sb-yellow);
	text-decoration: none;
}

.sb-footer__phone-name {
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
}

/* «Круглосуточно» относится к обоим телефонам — растягиваем на всю ширину пары */
.sb-footer__note {
	grid-column: 1 / -1;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sb-green);
}

.sb-footer__side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.sb-footer__social {
	display: flex;
	gap: 8px;
}

.sb-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px; /* зона нажатия не меньше 44px, как в шапке */
}

.sb-footer__social-link svg {
	width: 34px;
	height: 34px;
}

.sb-footer__cta {
	padding: 12px 22px;
}

.sb-footer__mails {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.sb-footer__mail {
	font-size: 13px;
	color: rgba(255, 255, 255, .65);
	text-decoration: none;
}

.sb-footer__mail:hover,
.sb-footer__mail:focus-visible {
	color: var(--sb-yellow);
	text-decoration: none;
}

/* ---------- нижняя полоса ---------- */

.sb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 16px 0;
	border-top: 1px solid var(--sb-line);
	font-size: 12px;
	color: rgba(255, 255, 255, .45);
}

.sb-footer__copy {
	margin: 0;
}

.sb-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-footer__legal-link {
	color: rgba(255, 255, 255, .45);
	text-decoration: none;
}

.sb-footer__legal-link:hover,
.sb-footer__legal-link:focus-visible {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

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

@media (max-width: 1199px) {
	.sb-footer__top {
		grid-template-columns: minmax(200px, 1fr) minmax(0, 1.6fr);
	}

	.sb-footer__contacts {
		grid-column: 1 / -1;
		grid-template-columns: auto 1fr;
		align-items: center;
		justify-items: start;
	}

	.sb-footer__mails {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.sb-footer {
		padding-top: 32px;
	}

	.sb-footer__top {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* колонки ссылок на телефоне складываются в две — три не читаются */
	.sb-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.sb-footer__contacts {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.sb-footer__cta {
		width: 100%;
	}

	.sb-footer__side {
		width: 100%;
	}

	.sb-footer__bottom {
		justify-content: flex-start;
	}
}

@media (max-width: 479px) {
	.sb-footer__cols {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   КАТАЛОГ: табы, фильтр, карточки (пункты 19–20 плана)
   ========================================================================= */

.sb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sb-catalog__title {
	margin-bottom: 12px;
}

.sb-catalog__lead {
	max-width: 900px;
	margin: 0 0 20px;
	color: rgba(38, 40, 44, .7);
}

/* ---------- табы типов бетона ---------- */

/* 🩸 Это ссылки на архивы категорий, а не переключатели: у каждого типа бетона
   есть свой URL, и до редизайна на него не вело ни одной ссылки с сайта. */
.sb-cat-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
}

.sb-cat-tab {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--sb-ease), border-color var(--sb-ease), color var(--sb-ease);
}

.sb-cat-tab:hover {
	border-color: var(--sb-yellow);
	background: var(--sb-yellow);
	color: var(--sb-text);
}

.sb-cat-tab--on,
.sb-cat-tab--on:hover {
	border-color: var(--sb-blue);
	background: var(--sb-blue);
	color: var(--sb-white);
}

/* ---------- раскладка «фильтр + список» ---------- */

.sb-cat-layout {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: var(--sb-gap);
	align-items: start;
}

.sb-cat-main {
	min-width: 0;
}

/* кнопка «Фильтры» нужна только там, где панель прячется */
.sb-cat-filters-toggle {
	display: none;
	margin-bottom: 16px;
}

/* ---------- панель фильтра ---------- */

.sb-cat-filters {
	position: sticky;
	top: 16px;
	padding: 4px 18px 18px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-cat-fs {
	margin: 0;
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--sb-line-dark);
}

.sb-cat-fs__legend {
	padding: 0;
	font-size: 15px;
	font-weight: 800;
}

.sb-cat-fs__body {
	margin-top: 12px;
}

.sb-cat-fs__body--cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 10px;
}

.sb-cat-check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}

.sb-cat-check input {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--sb-violet-line);
	cursor: pointer;
}

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

.sb-cat-price {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.sb-cat-price__field {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
}

.sb-cat-price__cap {
	color: rgba(38, 40, 44, .5);
	font-size: 13px;
}

.sb-cat-price__field input {
	width: 100%;
	min-width: 0;
	height: 38px;
	padding: 0;
	border: 0;
	background: none;
	font: 700 14px/1 inherit;
	color: inherit;
}

.sb-cat-price__field input:focus {
	outline: none;
}

/* двойной ползунок: две дорожки лежат друг на друге, кликабельны только бегунки */
.sb-cat-range {
	position: relative;
	height: 24px;
	margin-top: 14px;
}

.sb-cat-range__track,
.sb-cat-range__fill {
	position: absolute;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
}

.sb-cat-range__track {
	left: 0;
	right: 0;
	background: var(--sb-line-dark);
}

.sb-cat-range__fill {
	background: var(--sb-violet-line);
}

.sb-cat-range__input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	padding: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none; /* дорожку не ловим, иначе верхний input перекроет нижний */
}

.sb-cat-range__input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 3px solid var(--sb-violet-line);
	border-radius: 50%;
	background: var(--sb-white);
	cursor: pointer;
	pointer-events: auto;
}

.sb-cat-range__input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 3px solid var(--sb-violet-line);
	border-radius: 50%;
	background: var(--sb-white);
	cursor: pointer;
	pointer-events: auto;
}

.sb-cat-range__input::-moz-range-track {
	background: none;
}

.sb-cat-range__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(122, 17, 149, .25);
}

/* ---------- сброс ---------- */

.sb-cat-reset {
	width: 100%;
	margin-top: 18px;
	background: var(--sb-violet);
	color: var(--sb-white);
	font-size: 14px;
}

.sb-btn.sb-cat-reset:hover {
	background: var(--sb-violet-line);
	color: var(--sb-white);
}

/* ---------- панель над списком ---------- */

.sb-cat-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-bottom: 18px;
}

.sb-cat-count {
	margin: 0;
	font-size: 14px;
	color: rgba(38, 40, 44, .65);
}

.sb-cat-count b {
	color: var(--sb-text);
	font-weight: 800;
}

.sb-cat-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	font-size: 14px;
	color: rgba(38, 40, 44, .65);
}

.sb-cat-sort select {
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	font: 700 14px/1 inherit;
	color: var(--sb-text);
	cursor: pointer;
}

.sb-cat-view {
	display: flex;
	gap: 6px;
}

.sb-cat-view__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: rgba(38, 40, 44, .45);
	cursor: pointer;
	transition: color var(--sb-ease), border-color var(--sb-ease);
}

.sb-cat-view__btn--on {
	border-color: var(--sb-violet-line);
	color: var(--sb-violet-line);
}

/* ---------- сетка карточек ---------- */

.sb-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* карточку прячет атрибут hidden — в бандле темы стилей на него нет */
.sb-cat-grid > [hidden] {
	display: none;
}

.sb-cat-empty {
	margin: 24px 0 0;
	padding: 24px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	text-align: center;
	color: rgba(38, 40, 44, .7);
}

/* ---------- карточка товара ---------- */

.sb-pcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	overflow: hidden;
	transition: border-color var(--sb-ease), box-shadow var(--sb-ease);
}

.sb-pcard:hover {
	border-color: var(--sb-violet-line);
	box-shadow: var(--sb-shadow);
}

.sb-pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--sb-gray-3);
	overflow: hidden;
}

.sb-pcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 11.09: разметка этой плашки с карточек СНЯТА — на картинках марка уже вшита
   прежним разработчиком, получалась вторая надпись о том же. Правила оставлены
   до чистых фото от клиента (пункт 71 плана), вернуть — один блок в шаблоне. */
.sb-pcard__grade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 12px 12px;
	background: linear-gradient(to top, rgba(13, 3, 32, .78), rgba(13, 3, 32, 0));
	text-align: center;
	line-height: 1.05;
}

.sb-pcard__gmark {
	display: block;
	color: var(--sb-white);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 800;
}

.sb-pcard__gclass {
	display: block;
	margin-top: 2px;
	color: var(--sb-green);
	font-size: clamp(16px, 1.6vw, 22px);
	font-style: normal;
	font-weight: 800;
}

.sb-pcard__certs {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	gap: 4px;
}

.sb-pcard__cert {
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(62, 50, 78, .92);
	color: var(--sb-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

.sb-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 12px;
}

.sb-pcard__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.sb-pcard__tag {
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--sb-violet);
	color: var(--sb-white);
	font-size: 11px;
	font-weight: 700;
}

.sb-pcard__tag--hit {
	background: var(--sb-green);
}

.sb-pcard__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.sb-pcard__title a {
	color: var(--sb-text);
	text-decoration: none;
}

.sb-pcard__title a:hover {
	color: var(--sb-violet-line);
}

.sb-pcard__price {
	margin: 0;
	font-size: 14px;
}

.sb-pcard__price b {
	color: var(--sb-green);
	font-size: 19px;
	font-weight: 800;
}

.sb-pcard__rating {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
}

.sb-pcard__reviews {
	margin-left: 4px;
	color: rgba(38, 40, 44, .5);
	font-size: 12px;
}

.sb-pcard__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

.sb-pcard__counter {
	display: flex;
	align-items: center;
	gap: 4px;
}

.sb-pcard__cbtn {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	font: 700 18px/1 inherit;
	cursor: pointer;
	transition: background var(--sb-ease), border-color var(--sb-ease);
}

.sb-pcard__cbtn:hover {
	border-color: var(--sb-yellow);
	background: var(--sb-yellow);
}

.sb-pcard__cval {
	width: 48px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	font: 700 14px/1 inherit;
	color: var(--sb-text);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* стрелки number-поля крадут половину ширины и не нужны: рядом свои кнопки */
.sb-pcard__cval::-webkit-outer-spin-button,
.sb-pcard__cval::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sb-pcard__unit {
	color: rgba(38, 40, 44, .5);
	font-size: 13px;
}

.sb-pcard__buy {
	width: 100%;
	min-height: 42px;
	padding: 10px 16px;
	text-transform: uppercase;
}

/* ---------- вид «списком» ---------- */

.sb-cat-grid--list {
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.sb-cat-grid--list .sb-pcard {
	flex-direction: row;
	align-items: stretch;
}

.sb-cat-grid--list .sb-pcard__media {
	flex: 0 0 200px;
	aspect-ratio: auto;
}

.sb-cat-grid--list .sb-pcard__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas:
		"tags  tags    tags"
		"title price   buy"
		"stars counter buy";
	align-items: center;
	gap: 8px 16px;
	padding: 16px;
}

.sb-cat-grid--list .sb-pcard__tags   { grid-area: tags; }
.sb-cat-grid--list .sb-pcard__title  { grid-area: title; font-size: 17px; }
.sb-cat-grid--list .sb-pcard__price  { grid-area: price; white-space: nowrap; }
.sb-cat-grid--list .sb-pcard__rating { grid-area: stars; }
.sb-cat-grid--list .sb-pcard__foot   { grid-area: counter; margin: 0; padding: 0; }

.sb-cat-grid--list .sb-pcard__buy {
	grid-area: buy;
	align-self: center;
	width: auto;
	min-width: 150px;
}

/* ---------- адаптив каталога ---------- */

@media (max-width: 1100px) {
	.sb-cat-layout {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.sb-cat-filters-toggle {
		display: inline-flex;
	}

	.sb-cat-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-cat-filters {
		position: static;
		display: none;
	}

	.sb-catalog--filters-open .sb-cat-filters {
		display: block;
	}

	.sb-cat-sort {
		margin-left: 0;
	}

	.sb-cat-grid--list .sb-pcard__body {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"tags  tags"
			"title price"
			"stars counter"
			"buy   buy";
	}

	.sb-cat-grid--list .sb-pcard__buy {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.sb-cat-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 10px;
	}

	.sb-cat-grid--list .sb-pcard {
		flex-direction: column;
	}

	.sb-cat-grid--list .sb-pcard__media {
		flex: none;
		aspect-ratio: 4 / 3;
	}

	.sb-pcard__body {
		padding: 10px;
	}

	.sb-cat-toolbar {
		gap: 10px 12px;
	}
}

/* ---------- хлебные крошки над блоком ---------- */

.sb-crumbs {
	padding-top: 20px;
	color: rgba(38, 40, 44, .55);
	font-size: 13px;
}

.sb-crumbs a {
	color: rgba(38, 40, 44, .55);
	text-decoration: none;
}

.sb-crumbs a:hover {
	color: var(--sb-violet-line);
	text-decoration: underline;
}

/* у блока каталога свой верхний отступ, крошки к нему прижимаем */
.sb-crumbs + .sb-catalog {
	padding-top: 16px;
}

/* 🩸 Сквозная плавающая панель `.quick-links` (Позвонить / Заявка / WhatsApp) прибита
   к правому краю окна и на ширинах 1440–1620 накрывает правый край контейнера — под
   ней оказывались переключатели вида. Отодвигаем панель управления каталогом ровно
   там, где свободного поля по краям ещё нет. */
@media (min-width: 1024px) and (max-width: 1620px) {
	.sb-cat-toolbar {
		padding-right: 96px;
	}
}

/* на телефоне шесть табов занимали четыре строки и уводили список за экран —
   кладём их в одну прокручиваемую ленту */
@media (max-width: 600px) {
	.sb-cat-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		margin-right: -20px;
		padding-right: 20px;
		scrollbar-width: none;
	}

	.sb-cat-tabs::-webkit-scrollbar {
		display: none;
	}

	.sb-cat-tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* =========================================================================
   ПРАВКИ 08.09 ПО ЗАМЕЧАНИЯМ: шапка, первый экран, полоса, марки, карта
   ========================================================================= */

/* ---------- сквозная типографика ---------- */

/* основной текст сайта: 16 px, отступ между абзацами 15 px, цвет #26282c.
   Бьём по контентным областям, а не по всему подряд: собранный Tailwind задаёт
   размеры утилитами, и глобальный font-size на body до них всё равно не дошёл бы. */
body {
	color: var(--sb-text);
}

/* 🩸 сюда просился ещё и `.sb-section p`, но он перебивал собственные размеры
   новых блоков: два класса весят больше одного, и «М100 В7,5» в карточке марки
   съезжало с 54 px на 16. Правим только контентные области, где размер задавать
   больше некому. */
.entry-content,
.page-content,
.text-content,
.stamps-content,
.sb-catalog__lead {
	font-size: 16px;
	line-height: 1.55;
}

.entry-content p,
.page-content p,
.text-content p,
.stamps-content p,
.sb-catalog__lead p,
.sb-delivery__text p {
	margin-bottom: 15px;
}

.entry-content p:last-child,
.page-content p:last-child,
.text-content p:last-child,
.sb-delivery__text p:last-child {
	margin-bottom: 0;
}

/* 🩸 зелёный из бандла темы (#18c139) остался в утилитах .bg-green/.text-green,
   которыми покрашены цены и плашки на нередизайненных страницах. Перебиваем их
   тут: redesign.css грузится после style.css, вес тот же, побеждает последний. */
.bg-green {
	background-color: var(--sb-green);
}

.text-green {
	color: var(--sb-green);
}

/* тот же зелёный в ховере кнопок темы — он собран прямо в style.css */
.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--sb-green);
	color: var(--sb-white);
}

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

/* значок пункта меню красится тем же цветом, что и подпись */
.sb-menu__icon {
	fill: currentColor;
}

/* стрелка выпадающего меню */
.sb-menu__arrow {
	display: inline-block;
	margin-left: 7px;
	vertical-align: middle;
	opacity: .75;
	transition: transform var(--sb-ease), opacity var(--sb-ease);
}

.sb-header .sb-menu > li:hover > a .sb-menu__arrow {
	opacity: 1;
	transform: rotate(180deg);
}

/* 🩸 «Каталог» — жёлтая кнопка из класса `btn-primary` (он приходит из ACF-поля
   пункта меню). В бандле темы у неё текст #4b244e, фиолетовый; рядом стоящие
   кнопки — тёмные. Выравниваем. */
.sb-header .sb-menu > li > a.btn-primary {
	color: var(--sb-text);
	font-size: 16px;
}

.sb-header .sb-menu > li > a.btn-primary:hover {
	background: var(--sb-yellow);
	color: var(--sb-text);
}

/* ---------- первый экран: три пункта под подзаголовком ---------- */

.sb-hero__lead {
	margin-bottom: 20px;
}

.sb-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-hero__point {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 15px;
	line-height: 1.25;
	color: rgba(255, 255, 255, .85);
}

.sb-hero__point b {
	display: block;
	color: var(--sb-white);
	font-weight: 700;
}

.sb-hero__point-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}

/* ---------- полоса преимуществ: карточка на стыке двух блоков ---------- */

/* 08.09: полоса перестала быть лентой во всю ширину и стала карточкой со
   скруглением, которая наезжает и на первый экран, и на блок «Популярные марки».
   Отрицательные поля сверху и снизу — именно это и дают; чтобы карточка ничего
   не накрыла, у первого экрана снизу и у следующей секции сверху добавлен запас. */
.sb-topbar--band {
	position: relative;
	z-index: 6;
	margin-top: -52px;
	margin-bottom: -52px;
	background: transparent;
	border: 0;
}

.sb-topbar--band .sb-topbar__list {
	justify-content: flex-start;
	gap: 0;
	padding: 6px 10px;
	border-radius: var(--sb-radius);
	background: var(--sb-violet);
	box-shadow: 0 18px 48px rgba(13, 3, 32, .38);
}

.sb-topbar--band .sb-topbar__item {
	flex: 1 1 180px;
	padding: 14px 16px;
	font-size: 13px;
}

.sb-topbar--band .sb-topbar__item:first-child {
	padding-left: 16px;
	border-left: 0;
}

/* запас под карточку сверху и снизу */
.sb-hero .sb-hero__inner {
	padding-bottom: 92px;
}

.sb-topbar--band + .sb-section {
	padding-top: 88px;
}

/* ---------- популярные марки: плитка 4 × 2 ---------- */

.sb-popular__list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- доставка ---------- */

.sb-delivery__list {
	font-size: 18px;
}

.sb-delivery__check {
	color: var(--sb-green);
}

/* карта теперь настоящая, заглушки под ней нет — задаём высоту сами */
.sb-delivery__map {
	min-height: 420px;
}

.sb-delivery__iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
}

/* ---------- адаптив правок ---------- */

@media (max-width: 1199px) {
	.sb-popular__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.sb-topbar--band {
		margin-top: -36px;
		margin-bottom: -36px;
	}

	.sb-hero .sb-hero__inner {
		padding-bottom: 76px;
	}

	.sb-topbar--band + .sb-section {
		padding-top: 72px;
	}
}

@media (max-width: 767px) {
	.sb-popular__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sb-hero__points {
		gap: 8px 18px;
	}

	.sb-hero__point {
		font-size: 14px;
	}

	.sb-delivery__list {
		font-size: 16px;
	}

	.sb-delivery__map,
	.sb-delivery__iframe {
		min-height: 300px;
	}
}

/* ---------- шапка: меню в одну строку ---------- */

/* 08.09: пункты выросли до 16 px и «Информация» уехала на вторую строку.
   Ужимаем не сам шрифт (его размер — требование), а всё вокруг: отступы, а на
   узких десктопах — мессенджеры и кнопку, они продублированы в плавающей панели
   справа и в подвале. */
/* 🩸 медиа-запрос тут не нужен и вреден: контейнер всё равно упирается в 1440 px,
   на 1600 разметка та же самая — с запросом на широком экране меню снова уезжало
   во вторую строку. Держим одни отступы на всех десктопных ширинах. */
.sb-header__inner {
	gap: 16px;
}

.sb-header .sb-menu {
	gap: 2px;
}

.sb-header .sb-menu > li > a {
	padding: 9px 8px;
	font-size: 16px;
}

.sb-header__side {
	gap: 12px;
}

@media (max-width: 1400px) {
	.sb-header__social {
		display: none;
	}
}

@media (max-width: 1300px) {
	.sb-header__cta {
		display: none;
	}
}

/* 🩸 Толщина и регистр пунктов приходят из бандла темы селектором по ИД:
   `#primary-menu>li>a:not(.btn-primary){font-weight:700;text-transform:uppercase}`.
   Селектор с ИД весит больше любого набора классов, поэтому обычные `.sb-menu > li > a`
   его не перебивали — размер применялся, а толщина и капитель нет. Бьём тем же ИД. */
#primary-menu > li > a,
#primary-menu > li > a:not(.btn-primary) {
	font-weight: 500;
	text-transform: none;
}

/* ---------- популярные марки: плитка под четыре колонки ---------- */

.sb-popular__img {
	max-width: 180px;
}

.sb-popular__card {
	padding: 18px 14px;
}

/* =========================================================================
   ОБЩИЕ ЭЛЕМЕНТЫ НОВЫХ БЛОКОВ (надзаголовок, кнопка-ссылка, карточка-примечание)
   ========================================================================= */

.sb-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	color: rgba(38, 40, 44, .55);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sb-eyebrow::before {
	content: "";
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background: var(--sb-green);
}

.sb-section--dark .sb-eyebrow {
	color: rgba(255, 255, 255, .6);
}

.sb-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--sb-ease), border-color var(--sb-ease);
}

.sb-link-btn:hover {
	border-color: var(--sb-yellow);
	background: var(--sb-yellow);
	color: var(--sb-text);
}

/* вторая кнопка карточки: тот же размер, что и жёлтая, но без заливки */
.sb-btn--line {
	background: var(--sb-white);
	border: 1px solid var(--sb-line-dark);
	color: var(--sb-text);
}

.sb-btn.sb-btn--line:hover {
	border-color: var(--sb-violet-line);
	background: var(--sb-white);
	color: var(--sb-violet-line);
}

.sb-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex: 0 1 400px;
	padding: 16px 18px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-note__icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--sb-violet-line);
}

.sb-note__title {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 800;
}

.sb-note__text {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(38, 40, 44, .7);
}

/* =========================================================================
   АКЦИИ
   ========================================================================= */

.sb-promo__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.sb-promo__title {
	margin: 0;
}

.sb-promo__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: var(--sb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-promo__item {
	min-width: 0;
}

.sb-promo__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
	overflow: hidden;
}

.sb-promo__media {
	display: block;
	aspect-ratio: 16 / 7;
	background: var(--sb-blue);
	overflow: hidden;
}

.sb-promo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sb-ease);
}

.sb-promo__card:hover .sb-promo__img {
	transform: scale(1.03);
}

.sb-promo__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	padding: 20px;
}

.sb-promo__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sb-promo__tag {
	padding: 3px 10px;
	border-radius: 4px;
	background: rgba(14, 129, 37, .12);
	color: var(--sb-green);
	font-size: 12px;
	font-weight: 700;
}

.sb-promo__name {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 800;
	line-height: 1.25;
}

.sb-promo__name a {
	color: var(--sb-text);
	text-decoration: none;
}

.sb-promo__name a:hover {
	color: var(--sb-violet-line);
}

.sb-promo__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(38, 40, 44, .7);
}

.sb-promo__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
}

.sb-promo__actions .sb-btn {
	width: 100%;
	text-transform: uppercase;
	font-size: 13px;
}

/* =========================================================================
   ЧЕСТНЫ И ОТКРЫТЫ В РАБОТЕ
   ========================================================================= */

.sb-gallery__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sb-gap);
	margin-bottom: 22px;
}

.sb-gallery__intro {
	max-width: 720px;
}

.sb-gallery__title {
	margin-bottom: 10px;
	text-transform: uppercase;
}

.sb-gallery__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(38, 40, 44, .7);
}

.sb-gallery__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.sb-gallery__tab {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
	transition: background var(--sb-ease), border-color var(--sb-ease);
}

.sb-gallery__tab:hover {
	border-color: var(--sb-yellow);
}

.sb-gallery__tab--on,
.sb-gallery__tab--on:hover {
	border-color: var(--sb-yellow);
	background: var(--sb-yellow);
}

/* мозаика: первый снимок на две колонки и две строки, остальные по одной ячейке */
.sb-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 200px;
	gap: 14px;
}

.sb-gallery__cell {
	position: relative;
	display: block;
	border-radius: var(--sb-radius);
	background: var(--sb-gray-3);
	overflow: hidden;
}

.sb-gallery__cell--big {
	grid-column: span 2;
	grid-row: span 2;
}

.sb-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sb-ease);
}

.sb-gallery__cell:hover .sb-gallery__img {
	transform: scale(1.05);
}

/* подпись читается поверх любого снимка только с собственной подложкой */
.sb-gallery__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 14px 12px;
	background: linear-gradient(to top, rgba(13, 3, 32, .82), rgba(13, 3, 32, 0));
	color: var(--sb-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.sb-gallery__cell--big .sb-gallery__caption {
	font-size: 17px;
	padding: 40px 18px 16px;
}

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

@media (max-width: 1100px) {
	.sb-gallery__head {
		flex-direction: column;
	}

	.sb-note {
		flex: 1 1 auto;
	}
}

@media (max-width: 900px) {
	.sb-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 180px;
	}

	.sb-promo__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.sb-gallery__grid {
		grid-auto-rows: 140px;
		gap: 10px;
	}

	.sb-gallery__cell--big {
		grid-column: span 2;
		grid-row: span 1;
	}

	.sb-promo__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.sb-promo__actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   ПРЕИМУЩЕСТВА БЕТОННОГО ЗАВОДА
   ========================================================================= */

.sb-benefits {
	background: var(--sb-blue);
	color: var(--sb-white);
}

.sb-benefits__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: 40px;
	align-items: start;
}

.sb-benefits__title {
	margin-bottom: 18px;
	color: var(--sb-white);
	text-transform: uppercase;
}

.sb-benefits__text {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.sb-benefits__text p {
	margin: 0 0 15px;
}

.sb-benefits__text--after {
	margin-top: 18px;
}

/* список достоинств из ACF: две колонки с галочками, разметку клиент не трогает */
.sb-benefits__text ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 32px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.sb-benefits__text li {
	position: relative;
	padding-left: 34px;
	color: var(--sb-white);
	font-size: 15px;
	line-height: 1.4;
	text-align: left !important; /* в поле у пунктов стоит инлайновый text-align: justify */
}

.sb-benefits__text li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(14, 129, 37, .55);
	border-radius: 6px;
	background: rgba(14, 129, 37, .18);
}

.sb-benefits__text li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 6px;
	width: 8px;
	height: 4px;
	border: 2px solid var(--sb-green);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}

.sb-benefits__media {
	margin: 0;
	border-radius: var(--sb-radius);
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}

.sb-benefits__img {
	display: block;
	width: 100%;
	height: auto;
}

.sb-benefits__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	border-radius: var(--sb-radius);
	background: rgba(255, 255, 255, .05);
	overflow: hidden;
}

.sb-benefits__card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
	padding: 22px 26px;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.sb-benefits__card:first-child {
	border-left: 0;
}

.sb-benefits__card-icon {
	flex: 0 0 auto;
	color: var(--sb-green);
	fill: currentColor;
}

.sb-benefits__card-title {
	display: block;
	margin-bottom: 4px;
	font-size: 17px;
	font-weight: 800;
}

.sb-benefits__card-text {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .72);
}

/* =========================================================================
   МАРКИ БЕТОНА И ОБЛАСТЬ ПРИМЕНЕНИЯ
   ========================================================================= */

.sb-stamps__head {
	max-width: 820px;
	margin: 0 auto 32px;
	text-align: center;
}

.sb-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 7px 16px;
	border-radius: 100px;
	background: rgba(62, 50, 78, .1);
	color: var(--sb-violet);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sb-stamps__title {
	margin-bottom: 12px;
}

.sb-stamps__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(38, 40, 44, .7);
}

.sb-stamps__layout {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: var(--sb-gap);
	align-items: start;
}

.sb-stamps__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.sb-stamps__mark {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 14px 18px;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	font-size: 18px;
	font-weight: 800;
	cursor: pointer;
	user-select: none;
	transition: background var(--sb-ease), color var(--sb-ease);
}

/* 🩸 стрелка внутри пункта перехватывала клик: обработчик табов в main.js смотрит
   на e.target и по svg не находил ни индекса, ни родителя-вкладки */
.sb-stamps__mark-arrow {
	flex: 0 0 auto;
	pointer-events: none;
	opacity: .4;
}

.sb-stamps__mark:hover {
	background: #ececf1;
}

.sb-stamps__mark--on,
.sb-stamps__mark--on:hover {
	background: var(--sb-green);
	color: var(--sb-white);
}

.sb-stamps__mark--on .sb-stamps__mark-arrow {
	opacity: 1;
}

.sb-stamps__help {
	padding: 22px;
	border-radius: var(--sb-radius);
	background: var(--sb-blue);
	color: var(--sb-white);
}

.sb-stamps__help-icon {
	color: var(--sb-yellow);
	fill: currentColor;
}

.sb-stamps__help-title {
	display: block;
	margin: 10px 0 6px;
	font-size: 17px;
	font-weight: 800;
}

.sb-stamps__help-text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}

.sb-stamps__help .sb-btn {
	width: 100%;
	font-size: 13px;
	text-transform: uppercase;
}

.sb-stamps__contents {
	min-width: 0;
}

.sb-stamps__hero {
	padding: 26px 28px;
	border-radius: var(--sb-radius) var(--sb-radius) 0 0;
	background: linear-gradient(120deg, var(--sb-blue) 0%, var(--sb-violet) 100%);
	color: var(--sb-white);
}

.sb-stamps__badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--sb-green);
	color: var(--sb-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sb-stamps__grade {
	margin: 0;
	font-size: clamp(30px, 4vw, 54px);
	font-weight: 800;
	line-height: 1.05;
}

.sb-stamps__grade i {
	font-style: normal;
	color: var(--sb-green);
}

.sb-stamps__card,
.sb-stamps__usage {
	padding: 22px 28px;
	background: var(--sb-white);
}

.sb-stamps__usage {
	margin-top: 16px;
	border-radius: var(--sb-radius);
	background: #fdf6dd;
}

.sb-stamps__card {
	border-radius: 0 0 var(--sb-radius) var(--sb-radius);
}

.sb-stamps__card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 800;
}

.sb-stamps__card-title svg {
	flex: 0 0 auto;
	color: var(--sb-violet-line);
	fill: currentColor;
}

.sb-stamps__mix {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-stamps__mix-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--sb-line-dark);
	font-size: 15px;
}

.sb-stamps__mix-name {
	min-width: 0;
	color: rgba(38, 40, 44, .75);
}

.sb-stamps__mix-value {
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 800;
	white-space: nowrap;
}

.sb-stamps__usage-list {
	counter-reset: sb-usage;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-stamps__usage-item {
	position: relative;
	padding: 12px 0 12px 52px;
	border-top: 1px solid rgba(38, 40, 44, .1);
	font-size: 15px;
	line-height: 1.5;
}

.sb-stamps__usage-item:first-child {
	border-top: 0;
}

.sb-stamps__usage-item::before {
	counter-increment: sb-usage;
	content: counter(sb-usage);
	position: absolute;
	left: 0;
	top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sb-yellow);
	color: var(--sb-text);
	font-size: 15px;
	font-weight: 800;
}

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

@media (max-width: 1100px) {
	.sb-benefits__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-benefits__media {
		max-width: 560px;
	}

	.sb-stamps__layout {
		grid-template-columns: 280px minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.sb-benefits__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-benefits__card {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}

	.sb-benefits__card:first-child {
		border-top: 0;
	}

	.sb-stamps__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-stamps__list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.sb-stamps__mix {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.sb-benefits__text ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-stamps__card,
	.sb-stamps__usage,
	.sb-stamps__hero {
		padding: 18px;
	}
}

/* 🩸 08.09: плавающая панель `.quick-links` (Позвонить / Заявка / WhatsApp) прибита
   к правому краю ОКНА, а контейнер сайта на 1440 упирается в тот же край. В итоге
   панель накрывала форму расчёта, полосу преимуществ, правую колонку галереи,
   значения состава в марках и переключатели вида в каталоге. На десктопе она к тому
   же дублирует шапку: там уже есть телефон, WhatsApp, Telegram и «Перезвоните мне».
   Оставляем её только там, где она правда нужна и шапка свёрнута в бургер.
   Откат — одной строкой: убрать это правило. */
/* 11.09: правило снято — панель свёрнута в одну иконку и больше ничего не
   накрывает, а юзер просил её и на десктопе. Раскладка ниже, в правках 11.09. */

/* =========================================================================
   ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ
   ========================================================================= */

.sb-services__head {
	max-width: 760px;
	margin: 0 auto 30px;
	text-align: center;
}

.sb-services__head .sb-h2 {
	text-transform: uppercase;
}

.sb-services__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(38, 40, 44, .7);
}

.sb-services__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-services__item {
	min-width: 0;
}

.sb-services__card {
	height: 100%;
	padding: 24px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-services__card-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 190px;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.sb-services__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-violet);
	color: var(--sb-white);
}

.sb-services__ico svg {
	fill: currentColor;
}

.sb-services__name {
	margin: 0;
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
}

.sb-services__kind {
	margin: 4px 0 0;
	font-size: 15px;
	color: rgba(38, 40, 44, .6);
}

.sb-services__photo {
	width: 190px;
	height: 110px;
	object-fit: contain;
}

/* ---------- строки прайса, общие для услуг и выезда ---------- */

.sb-price {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-price__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-top: 1px solid var(--sb-line-dark);
	font-size: 15px;
}

.sb-price__row:first-child {
	border-top: 0;
}

.sb-price__name {
	min-width: 0;
	font-weight: 600;
}

.sb-price__name i {
	font-style: normal;
	font-weight: 400;
	color: rgba(38, 40, 44, .6);
}

.sb-price__value {
	flex: 0 0 auto;
	white-space: nowrap;
	color: rgba(38, 40, 44, .65);
	font-size: 14px;
}

.sb-price__num {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--sb-green);
	color: var(--sb-white);
	font-size: 15px;
	font-weight: 800;
}

.sb-price__value--free {
	color: var(--sb-red);
	font-size: 15px;
	font-weight: 800;
}

/* ---------- выезд специалиста ---------- */

.sb-visit {
	margin-top: var(--sb-gap);
	padding: 28px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-visit__head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 22px;
}

.sb-visit__title {
	margin: 0;
	font-size: clamp(19px, 1.8vw, 26px);
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

.sb-visit__lead {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(38, 40, 44, .7);
}

.sb-visit__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.sb-visit__col {
	min-width: 0;
}

.sb-visit__subtitle {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
}

.sb-visit__includes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-visit__include {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 11px 0;
	font-size: 15px;
	line-height: 1.45;
}

.sb-visit__include-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(62, 50, 78, .1);
	color: var(--sb-violet);
	font-size: 14px;
	font-weight: 800;
}

.sb-visit__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 22px;
}

.sb-visit__actions .sb-btn {
	text-transform: uppercase;
}

.sb-visit__note {
	font-size: 14px;
	color: rgba(38, 40, 44, .6);
}

/* =========================================================================
   РЕАЛЬНЫЕ ПРОЕКТЫ
   ========================================================================= */

.sb-pill--green {
	background: rgba(14, 129, 37, .12);
	color: var(--sb-green);
}

.sb-projects__head {
	max-width: 900px;
	margin-bottom: 26px;
}

.sb-projects__title {
	margin-bottom: 10px;
	text-transform: uppercase;
}

.sb-projects__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(38, 40, 44, .7);
}

.sb-projects__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-projects__item {
	min-width: 0;
}

.sb-projects__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
	overflow: hidden;
}

.sb-projects__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--sb-gray-3);
	overflow: hidden;
}

.sb-projects__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sb-ease);
}

.sb-projects__media:hover .sb-projects__img {
	transform: scale(1.04);
}

.sb-projects__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: -37px 0 0 -37px;
	border-radius: 50%;
	background: rgba(13, 3, 32, .55);
	backdrop-filter: blur(2px);
	transition: background var(--sb-ease);
}

.sb-projects__media:hover .sb-projects__play {
	background: var(--sb-green);
}

.sb-projects__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
	padding: 18px 20px 20px;
}

.sb-projects__name {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
}

.sb-projects__thumbs {
	display: flex;
	gap: 8px;
	margin-top: auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.sb-projects__thumbs::-webkit-scrollbar {
	display: none;
}

.sb-projects__thumb {
	flex: 0 0 84px;
	height: 62px;
	border-radius: var(--sb-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	transition: border-color var(--sb-ease);
}

.sb-projects__thumb:hover {
	border-color: var(--sb-green);
}

.sb-projects__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
   СЕРТИФИКАТЫ И ДОКУМЕНТЫ
   ========================================================================= */

.sb-docs__title {
	margin-bottom: 20px;
}

.sb-docs__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: 36px;
	align-items: start;
}

.sb-docs__text {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(38, 40, 44, .8);
}

.sb-docs__text p {
	margin: 0 0 15px;
}

.sb-docs__text--after {
	margin-top: 8px;
}

.sb-docs__marks {
	padding: 24px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-docs__marks-title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
}

.sb-docs__marks-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-docs__marks-list li {
	position: relative;
	padding: 11px 0 11px 34px;
	border-top: 1px solid var(--sb-line-dark);
	font-size: 15px;
	line-height: 1.4;
}

.sb-docs__marks-list li:first-child {
	border-top: 0;
}

.sb-docs__marks-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sb-green);
}

.sb-docs__marks-list li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 17px;
	width: 7px;
	height: 3px;
	border: 2px solid #fff;
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}

.sb-docs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sb-gap);
	margin-top: 30px;
}

.sb-docs__panel {
	padding: 24px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-docs__panel-title {
	margin: 0 0 6px;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 800;
}

.sb-docs__panel-lead {
	margin: 0 0 18px;
	font-size: 15px;
	color: rgba(38, 40, 44, .65);
}

.sb-docs__certs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
	margin-top: 16px;
}

.sb-docs__cert {
	margin: 0;
}

.sb-docs__cert-link {
	position: relative;
	display: block;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	overflow: hidden;
}

.sb-docs__cert-link img {
	display: block;
	width: 100%;
	height: auto;
}

.sb-docs__cert-zoom {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-violet);
	color: var(--sb-white);
}

.sb-docs__cert-cap {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
}

.sb-docs__files {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-docs__file + .sb-docs__file {
	margin-top: 10px;
}

.sb-docs__file-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	color: var(--sb-text);
	text-decoration: none;
	transition: border-color var(--sb-ease), background var(--sb-ease);
}

.sb-docs__file-link:hover {
	border-color: var(--sb-violet-line);
	background: rgba(122, 17, 149, .04);
	color: var(--sb-text);
}

.sb-docs__file-ico {
	flex: 0 0 auto;
}

.sb-docs__file-name {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	font-weight: 700;
}

.sb-docs__file-dl {
	flex: 0 0 auto;
	color: var(--sb-violet-line);
}

.sb-docs__ask {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: var(--sb-radius-sm);
	background: rgba(62, 50, 78, .07);
}

.sb-docs__ask-title {
	display: block;
	margin-bottom: 3px;
	font-size: 15px;
	font-weight: 800;
}

.sb-docs__ask-text {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(38, 40, 44, .7);
}

.sb-docs__ask .sb-btn {
	flex: 0 0 auto;
	text-transform: uppercase;
	font-size: 13px;
}

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

@media (max-width: 1100px) {
	.sb-projects__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sb-docs__intro {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.sb-services__list,
	.sb-visit__grid,
	.sb-docs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-services__card-head {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.sb-services__photo {
		grid-column: 1 / -1;
		width: 100%;
		height: 150px;
	}
}

@media (max-width: 600px) {
	.sb-projects__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-docs__ask {
		flex-direction: column;
		align-items: flex-start;
	}

	.sb-docs__ask .sb-btn {
		width: 100%;
	}
}

.sb-docs__marks-note {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(38, 40, 44, .6);
}

/* =========================================================================
   ВСПЛЫВАЮЩИЕ ОКНА (макеты popup-na-vremya.png и vsplivauschee-na-uhod.png)
   ========================================================================= */

.sb-pop {
	width: 100%;
	border-radius: var(--sb-radius);
	background: var(--sb-blue);
	color: var(--sb-white);
	overflow: hidden;
	text-align: left;
}

.sb-pop__h {
	margin: 0 0 6px;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
}

.sb-pop__h2 {
	margin: 0 0 12px;
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 600;
	line-height: 1.2;
	color: rgba(255, 255, 255, .8);
}

.sb-pop__sub {
	margin: 0;
	font-size: clamp(15px, 1.6vw, 20px);
	line-height: 1.35;
	text-transform: uppercase;
}

.sb-pop__date {
	color: var(--sb-green);
	font-weight: 800;
}

.sb-pop__text {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .78);
}

/* ---------- плашки-преимущества внутри попапов ---------- */

.sb-pop__perks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.sb-pop__perks li {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	font-size: 13px;
	line-height: 1.25;
	color: rgba(255, 255, 255, .82);
}

.sb-pop__perks svg {
	flex: 0 0 auto;
}

/* ---------- попап промокода ---------- */

.sb-pop--promo {
	max-width: 560px;
}

.sb-pop__top {
	padding: 24px 26px 22px;
	background: var(--sb-white);
	color: var(--sb-text);
}

.sb-pop__logo {
	display: block;
	width: 130px;
	height: 51px;
	margin-bottom: 14px;
}

.sb-pop__code {
	position: relative;
	padding: 24px 26px;
	background: linear-gradient(120deg, var(--sb-blue) 0%, var(--sb-violet) 100%);
}

.sb-pop__code-cap {
	display: block;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
}

.sb-pop__code-value {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border: 2px dashed var(--sb-green);
	border-radius: var(--sb-radius);
	color: var(--sb-white);
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: .02em;
}

.sb-pop__code-value svg {
	flex: 0 0 auto;
	color: var(--sb-green);
}

.sb-pop__form {
	padding: 22px 26px 26px;
	background: var(--sb-violet);
}

.sb-pop__form-title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 600;
	color: var(--sb-white);
}

/* ---------- попап на уход ---------- */

.sb-pop--exit {
	max-width: 1040px;
}

.sb-pop__exit-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.sb-pop__exit-main {
	padding: 30px 32px;
	background: linear-gradient(120deg, var(--sb-blue) 0%, var(--sb-violet) 100%);
}

.sb-pop__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 7px 14px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .1);
	color: var(--sb-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sb-pop__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.sb-pop__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	font-size: 19px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.sb-pop__phone:hover {
	color: var(--sb-violet-line);
}

.sb-pop__perks--row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 22px;
}

.sb-pop__exit-media {
	position: relative;
	min-height: 340px;
}

.sb-pop__exit-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sb-pop__chips {
	position: absolute;
	right: 16px;
	top: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-pop__chips li {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 260px;
	padding: 10px 14px;
	border-radius: var(--sb-radius-sm);
	background: rgba(13, 3, 32, .72);
	backdrop-filter: blur(3px);
	color: var(--sb-white);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

.sb-pop__chips svg {
	flex: 0 0 auto;
}

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

@media (max-width: 860px) {
	.sb-pop__exit-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-pop__exit-media {
		order: -1;
		min-height: 200px;
	}

	.sb-pop__chips {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 12px;
	}

	.sb-pop__chips li {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.sb-pop__perks,
	.sb-pop__perks--row {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-pop__top,
	.sb-pop__code,
	.sb-pop__form,
	.sb-pop__exit-main {
		padding: 18px 20px;
	}

	.sb-pop__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sb-pop__phone {
		justify-content: center;
	}
}

/* 🩸 старые ограничения из бандла темы: `.exit-form{max-height:450px;overflow:hidden}`
   резал попап по высоте, `.white-popup{max-width:420px}` — по ширине */
.sb-pop.exit-form {
	max-height: none;
	max-width: 1040px;
	overflow: hidden;
}

.sb-pop.white-popup {
	max-width: 560px;
}

/* фото из бандла темы остаётся подложкой, градиент кладём поверх */
.promocode-popup__promocode.sb-pop__code {
	background-image: linear-gradient(120deg, rgba(13, 3, 32, .92) 0%, rgba(62, 50, 78, .72) 100%), url('/content/uploads/2023/06/popup-na-vremya.jpg');
	background-size: cover;
	background-position: center;
}

/* верхний чип не должен уезжать под крестик */
.sb-pop__chips {
	padding-right: 56px;
}

/* =========================================================================
   ВНУТРЕННЯЯ СТРАНИЦА С БОКОВОЙ КОЛОНКОЙ (карточка товара)
   ========================================================================= */

.sb-page {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--sb-gap);
	align-items: start;
}

.sb-page__main {
	min-width: 0;
}

/* ---------- боковая колонка ---------- */

.sb-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 16px;
}

.sb-aside__block {
	padding: 18px;
	border-radius: var(--sb-radius);
	background: var(--sb-violet);
	color: var(--sb-white);
}

.sb-aside__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 800;
}

.sb-aside__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-aside__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--sb-radius-sm);
	color: rgba(255, 255, 255, .85);
	font-size: 14px;
	text-decoration: none;
	transition: background var(--sb-ease), color var(--sb-ease);
}

.sb-aside__link::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-right: 2px;
	border-radius: 50%;
	background: var(--sb-green);
	order: -1;
}

.sb-aside__link:hover {
	background: rgba(255, 255, 255, .09);
	color: var(--sb-white);
}

.sb-aside__link--on,
.sb-aside__link--on:hover {
	background: rgba(255, 255, 255, .14);
	color: var(--sb-white);
	font-weight: 700;
}

.sb-aside__count {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .45);
	font-size: 12px;
}

.sb-aside__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding: 11px 12px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: var(--sb-white);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.sb-aside__all:hover {
	color: var(--sb-yellow);
}

/* в каталоге боковые блоки идут под фильтром, в одной колонке */
.sb-cat-side {
	min-width: 0;
}

.sb-cat-side .sb-aside {
	position: static;
	margin-top: 16px;
}

/* =========================================================================
   КАРТОЧКА ТОВАРА (пункты 21–22 плана)
   ========================================================================= */

.sb-product__crumbs {
	padding: 0 0 10px;
}

.sb-product__title {
	margin-bottom: 12px;
	font-size: clamp(22px, 2.6vw, 36px);
	text-transform: none;
}

.sb-product__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.sb-product__rating {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 14px;
}

.sb-product__rating b {
	margin-left: 6px;
	font-weight: 800;
}

.sb-product__reviews {
	color: rgba(38, 40, 44, .55);
}

.sb-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--sb-gap);
	align-items: start;
}

.sb-product__main {
	min-width: 0;
}

.sb-product__media {
	margin: 0 0 16px;
	border-radius: var(--sb-radius);
	overflow: hidden;
	background: var(--sb-gray-3);
}

.sb-product__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- четыре плашки под картинкой ---------- */

.sb-product__perks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.sb-product__perk {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
}

.sb-product__perk svg {
	flex: 0 0 auto;
}

/* ---------- вкладки ---------- */

.sb-product__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 -1px;
	padding: 0;
	list-style: none;
}

.sb-product__tab {
	padding: 12px 20px;
	border: 1px solid transparent;
	border-bottom: 2px solid transparent;
	color: rgba(38, 40, 44, .6);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
	transition: color var(--sb-ease), border-color var(--sb-ease);
}

.sb-product__tab:hover {
	color: var(--sb-text);
}

.sb-product__tab--on,
.sb-product__tab--on:hover {
	color: var(--sb-violet-line);
	border-bottom-color: var(--sb-violet-line);
}

.sb-product__panels {
	border-top: 1px solid var(--sb-line-dark);
}

.sb-product__panel {
	padding: 22px;
	border-radius: 0 0 var(--sb-radius) var(--sb-radius);
	background: var(--sb-white);
}

/* ---------- таблица характеристик ---------- */

.sb-specs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-specs__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-top: 1px dotted rgba(38, 40, 44, .25);
	font-size: 15px;
}

.sb-specs__row:first-child {
	border-top: 0;
}

.sb-specs__name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: rgba(38, 40, 44, .7);
}

/* точки-выноска между названием и значением, как в макете */
.sb-specs__row::after {
	content: "";
	flex: 1;
	order: 1;
	margin: 0 2px;
	border-bottom: 1px dotted rgba(38, 40, 44, .3);
	transform: translateY(-3px);
}

.sb-specs__value {
	order: 2;
	flex: 0 0 auto;
	font-weight: 800;
	white-space: nowrap;
}

.sb-specs--compact .sb-specs__row {
	padding: 8px 0;
	font-size: 14px;
	border-top: 0;
}

/* ---------- подсказка «?» ---------- */

.sb-tip {
	position: relative;
	display: inline-flex;
}

.sb-tip__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid var(--sb-line-dark);
	border-radius: 50%;
	background: var(--sb-white);
	color: var(--sb-violet-line);
	font: 700 11px/1 inherit;
	cursor: help;
}

.sb-tip__btn:hover {
	background: var(--sb-yellow);
}

.sb-tip__text {
	position: absolute;
	left: 50%;
	top: calc(100% + 8px);
	z-index: 20;
	display: none;
	width: 240px;
	margin-left: -120px;
	padding: 10px 12px;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-blue);
	color: var(--sb-white);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	box-shadow: var(--sb-shadow);
}

/* ---------- шаги «как купить» ---------- */

.sb-steps {
	counter-reset: sb-step;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.sb-steps__item {
	position: relative;
	padding: 12px 0 12px 52px;
	border-top: 1px solid var(--sb-line-dark);
	font-size: 15px;
	line-height: 1.5;
}

.sb-steps__item:first-child {
	border-top: 0;
}

.sb-steps__item::before {
	counter-increment: sb-step;
	content: counter(sb-step);
	position: absolute;
	left: 0;
	top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sb-yellow);
	font-size: 15px;
	font-weight: 800;
}

/* =========================================================================
   ПРАВАЯ КОЛОНКА ЗАКАЗА
   ========================================================================= */

.sb-order {
	position: sticky;
	top: 16px;
	padding: 22px;
	border-radius: var(--sb-radius);
	background: var(--sb-violet);
	color: var(--sb-white);
}

.sb-order__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 12px;
}

.sb-order__price b {
	color: var(--sb-green);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1;
}

.sb-order__price span {
	font-size: 18px;
	font-weight: 700;
}

.sb-order__compete {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin-bottom: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.sb-order__compete svg {
	flex: 0 0 auto;
	fill: var(--sb-yellow);
}

.sb-order__compete span {
	border-bottom: 1px dotted rgba(255, 255, 255, .5);
}

.sb-order__compete:hover {
	color: var(--sb-white);
}

.sb-order__counter {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 18px;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	overflow: hidden;
}

.sb-order__cbtn {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sb-text);
	font: 700 22px/1 inherit;
	cursor: pointer;
	transition: background var(--sb-ease);
}

.sb-order__cbtn:hover {
	background: var(--sb-yellow);
}

.sb-order__cvalue {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
	color: var(--sb-text);
	font-size: 16px;
	font-weight: 700;
}

.sb-order__cvalue input {
	width: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}

.sb-order__cvalue input::-webkit-outer-spin-button,
.sb-order__cvalue input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sb-order__cvalue input:focus {
	outline: none;
}

.sb-order__group {
	margin-bottom: 18px;
}

.sb-order__group-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
}

.sb-order__group-value {
	color: var(--sb-green);
	font-weight: 800;
}

.sb-order__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sb-order__opt {
	min-height: 40px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--sb-radius-sm);
	background: transparent;
	color: var(--sb-white);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--sb-ease), border-color var(--sb-ease);
}

.sb-order__opt:hover {
	border-color: var(--sb-yellow);
}

/* активный вариант помечает main.js — класс тот же, что и у старой вёрстки */
.sb-order__opt.additional-field__button--active {
	border-color: var(--sb-green);
	background: var(--sb-green);
	color: var(--sb-white);
}

.sb-order__specs {
	margin-bottom: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.sb-order__specs .sb-specs__name {
	color: rgba(255, 255, 255, .65);
}

.sb-order__specs .sb-specs__row::after {
	border-bottom-color: rgba(255, 255, 255, .25);
}

.sb-order__specs .sb-specs__value {
	color: var(--sb-white);
}

.sb-order__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-order__actions .sb-btn {
	width: 100%;
	text-transform: uppercase;
	font-size: 14px;
}

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

@media (max-width: 1280px) {
	.sb-product__grid {
		grid-template-columns: minmax(0, 1fr) 330px;
	}
}

@media (max-width: 1100px) {
	.sb-page {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-aside {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sb-product__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-order {
		position: static;
	}

	.sb-product__perks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.sb-aside {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-product__perks {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-product__panel {
		padding: 16px;
	}

	.sb-product__tab {
		padding: 10px 12px;
		font-size: 14px;
	}
}

/* 🩸 ссылки боковой колонки прижимались вправо: маркер стоял через ::before с
   order:-1, а space-between растаскивал их по краям. Считаем цифру, а не текст. */
.sb-aside__link {
	justify-content: flex-start;
}

.sb-aside__count {
	margin-left: auto;
}

/* пять вкладок карточки в одну строку на десктопе */
@media (min-width: 1101px) {
	.sb-product__tab {
		padding: 12px 14px;
	}
}

/* =========================================================================
   404 (пункты 32 и 53 плана)
   ========================================================================= */

.sb-404 {
	text-align: center;
}

.sb-404__code {
	margin: 0;
	color: rgba(122, 17, 149, .14);
	font-size: clamp(80px, 14vw, 180px);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.03em;
}

.sb-404__title {
	margin: -8px 0 12px;
}

.sb-404__lead {
	max-width: 620px;
	margin: 0 auto 26px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(38, 40, 44, .7);
}

.sb-404__search {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin: 0 auto 30px;
}

.sb-404__search input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	font: 400 15px/1 inherit;
	color: var(--sb-text);
}

.sb-404__search input:focus {
	outline: none;
	border-color: var(--sb-violet-line);
}

.sb-404__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.sb-404__link {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 16px 18px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
	color: var(--sb-text);
	text-align: left;
	text-decoration: none;
	transition: transform var(--sb-ease);
}

.sb-404__link:hover {
	transform: translateY(-2px);
	color: var(--sb-text);
}

.sb-404__link b {
	display: block;
	font-size: 16px;
	font-weight: 800;
}

.sb-404__link span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: rgba(38, 40, 44, .6);
}

.sb-404__link > svg {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--sb-violet-line);
}

.sb-404__link b,
.sb-404__link span {
	min-width: 0;
}

.sb-404__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 600px) {
	.sb-404__search {
		flex-direction: column;
	}

	.sb-404__search .sb-btn {
		width: 100%;
	}
}

/* =========================================================================
   ГЕО-СТРАНИЦА (пункт 29 плана)
   ========================================================================= */

.sb-geo__hero {
	position: relative;
	background: var(--sb-blue);
	color: var(--sb-white);
	overflow: hidden;
}

.sb-geo__veil {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(120deg, var(--sb-blue) 0%, var(--sb-violet) 100%);
}

.sb-geo__hero-inner {
	position: relative;
	padding-top: 22px;
	padding-bottom: 30px;
}

.sb-crumbs--dark,
.sb-crumbs--dark a {
	color: rgba(255, 255, 255, .6);
}

.sb-crumbs--dark a:hover {
	color: var(--sb-yellow);
}

.sb-geo__title {
	margin: 8px 0 18px;
	font-size: clamp(24px, 3.2vw, 44px);
	text-transform: none;
	color: var(--sb-white);
}

.sb-geo__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
	margin-bottom: 22px;
}

.sb-geo__price {
	margin: 0;
	font-size: 18px;
}

.sb-geo__price b {
	color: var(--sb-green);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
}

.sb-geo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sb-geo__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-geo__fact {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: var(--sb-radius);
	background: rgba(255, 255, 255, .07);
	font-size: 14px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .78);
}

.sb-geo__fact svg {
	flex: 0 0 auto;
}

.sb-geo__fact b {
	display: block;
	color: var(--sb-white);
	font-weight: 700;
}

.sb-geo__body {
	max-width: 1000px;
}

/* картинка города в тексте уводила строки в узкую колонку */
.sb-geo__body img.alignright {
	float: right;
	max-width: 320px;
	margin: 0 0 16px 24px;
	border-radius: var(--sb-radius-sm);
}

/* 22.09 (QA после выкатки): гео теперь в раскладке .sb-article, а бандл держит
   у старой обёртки `.soder` max-width: 500px — текст шёл узкой колонкой */
.sb-article__body .soder {
	max-width: none;
	font-size: inherit;
	font-weight: inherit;
	border-left: 0;
}

.sb-geo__body .soder {
	margin: 22px 0;
	padding: 18px 22px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-geo__body .soder ul,
.sb-geo__body .soder ol {
	margin: 10px 0 0;
	padding-left: 20px;
}

.sb-geo__cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.sb-geo__cta-title {
	margin: 0 0 8px;
	color: var(--sb-white);
	font-size: clamp(20px, 2.2vw, 30px);
}

.sb-geo__cta-text {
	margin: 0;
	max-width: 620px;
	color: rgba(255, 255, 255, .75);
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 900px) {
	.sb-geo__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.sb-geo__body img.alignright {
		float: none;
		max-width: 100%;
		margin: 0 0 16px;
	}
}

/* 🩸 `.main-page__wrapper` в бандле темы — сетка `335px 1fr` под боковую колонку.
   По пункту 24 колонку с гео-страниц, статей и поиска сняли, и контент остался
   зажат в первые 335 px, а справа зияла пустота. Без сайдбара — одна колонка. */
@media (min-width: 991px) {
	.main-page__wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   СВОИ МОДАЛКИ И ЛАЙТБОКС (js/sb-modal.js), пункт 34 плана.
   Раньше это рисовал Fancybox — 13 КБ его CSS лежали в бандле style.css и
   ехали на каждой из 1124 страниц ради восьми попапов и трёх галерей.
   ========================================================================= */

.sb-lb {
	position: fixed;
	inset: 0;
	z-index: 99992;
	opacity: 0;
	transition: opacity .2s ease;
}

.sb-lb[hidden] {
	display: none;
}

/* 🩸 собственный display у кнопок и подвала перебивает браузерное правило
   для [hidden] — стрелки «вперёд/назад» висели поверх попапа с формой,
   где листать нечего. Скрываем явно. */
.sb-lb [hidden] {
	display: none !important;
}

.sb-lb--shown {
	opacity: 1;
}

.sb-lb__bg {
	position: absolute;
	inset: 0;
	background: rgba(13, 3, 32, .88);
}

.sb-lb__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 64px 16px 56px;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.sb-lb__box {
	position: relative;
	margin: auto;
	max-width: 100%;
	padding: 32px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* тёмные попапы редизайна и картинки галереи рисуют себя сами —
   коробка под ними без фона и отступов */
.sb-lb--bare .sb-lb__box,
.sb-lb--media .sb-lb__box {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* 🩸 у всех попапов в разметке стоит класс .hidden (display:none) из бандла
   темы — раньше его перебивал .fancybox-content. Перебиваем сами. */
.sb-lb__content {
	display: block !important;
}

.sb-lb__img,
.sb-lb__video {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 140px);
	width: auto;
	border-radius: var(--sb-radius);
	background: #000;
}

.sb-lb__frame {
	position: relative;
	width: min(1040px, 92vw);
	aspect-ratio: 16 / 9;
	border-radius: var(--sb-radius);
	overflow: hidden;
	background: #000;
}

.sb-lb__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sb-lb__btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: var(--sb-radius-sm);
	transition: background-color .2s ease, color .2s ease;
}

/* крестик жёлтый: на белой шапке промокода белый на белом не читался */
.sb-lb__close {
	top: 12px;
	right: 12px;
	background: var(--sb-yellow);
	color: var(--sb-text);
}

.sb-lb__close:hover {
	background: #ffd42b;
}

.sb-lb__prev,
.sb-lb__next {
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .14);
	color: var(--sb-white);
}

.sb-lb__prev:hover,
.sb-lb__next:hover {
	background: rgba(255, 255, 255, .3);
}

.sb-lb__prev {
	left: 12px;
}

.sb-lb__next {
	right: 12px;
}

.sb-lb__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 64px;
	color: rgba(255, 255, 255, .85);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	pointer-events: none;
}

.sb-lb__counter {
	flex: none;
	opacity: .7;
}

body.sb-lb-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.sb-lb__stage {
		padding: 60px 10px 52px;
	}

	.sb-lb__box {
		padding: 20px 16px;
	}

	.sb-lb__prev,
	.sb-lb__next {
		width: 38px;
		height: 38px;
	}

	.sb-lb__prev {
		left: 4px;
	}

	.sb-lb__next {
		right: 4px;
	}
}

/* =========================================================================
   ПРАВКИ 11.09 ПО ЗАМЕЧАНИЯМ ЮЗЕРА — ГЛАВНАЯ
   Секция последняя в файле: вес селекторов тот же, побеждает то, что ниже.
   ========================================================================= */

/* ---------- доставка: три пункта крупнее, текст под ними в полную силу ---- */

.sb-delivery__item {
	font-size: 18px;
	font-weight: 700;
}

/* 🩸 текст был 13 px и на 72 % прозрачности — на светлой карточке он читался
   как сноска, хотя это обычный абзац о доставке. */
.sb-delivery__text {
	font-size: 16px;
	line-height: 1.55;
	color: var(--sb-text);
}

/* ---------- марки бетона: на десктопе 40 / 60 ---------- */

.sb-stamps__layout {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

@media (max-width: 1100px) {
	.sb-stamps__layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
}

/* 🩸 своё правило 40/60 стоит в файле ПОЗЖЕ старого одноколоночного и перебивало
   его на телефоне: список марок оставался в колонке 40 % и текст в спойлере
   сжимался в три слова на строку. Одну колонку возвращаем здесь же. */
@media (max-width: 900px) {
	.sb-stamps__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* марки — теперь кнопки, а не пункты списка: сбрасываем вид кнопки */
.sb-stamps__mark {
	width: 100%;
	border: 0;
	text-align: left;
	font-family: inherit;
	appearance: none;
}

.sb-stamps__mark-name {
	min-width: 0;
}

/* ---------- марки бетона: на телефоне спойлеры ---------- */

@media (max-width: 900px) {
	/* список в одну колонку: марка — строка-заголовок, под ней её описание */
	.sb-stamps--acc .sb-stamps__list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.sb-stamps--acc .sb-stamps__mark {
		border-radius: var(--sb-radius-sm);
	}

	/* раскрытая марка склеивается со своей панелью */
	.sb-stamps--acc .sb-stamps__mark--on {
		border-radius: var(--sb-radius-sm) var(--sb-radius-sm) 0 0;
	}

	.sb-stamps--acc .sb-stamps__mark-arrow {
		transition: transform var(--sb-ease);
	}

	.sb-stamps--acc .sb-stamps__mark--on .sb-stamps__mark-arrow {
		transform: rotate(90deg);
	}

	.sb-stamps--acc .sb-stamps__panel {
		margin: 0 0 4px;
		border-radius: 0 0 var(--sb-radius) var(--sb-radius);
		overflow: hidden;
	}

	/* внутри спойлера крупная плашка с маркой не нужна — она и есть заголовок */
	.sb-stamps--acc .sb-stamps__hero {
		display: none;
	}

	.sb-stamps--acc .sb-stamps__card {
		border-radius: 0;
	}

	.sb-stamps--acc .sb-stamps__usage {
		margin-top: 0;
		border-radius: 0;
	}

	/* блок «нужна помощь с выбором» остаётся в самом низу */
	.sb-stamps--acc .sb-stamps__help {
		margin-top: 18px;
	}
}

/* 🩸 своё правило display у панели перебивает браузерное [hidden] —
   тот же случай, что был со стрелками лайтбокса 09.09 */
.sb-stamps__panel[hidden] {
	display: none !important;
}

/* ---------- дополнительные услуги: насос во всю высоту карточки ---------- */

.sb-services__card {
	position: relative;
	overflow: hidden;
	padding-right: calc(46% + 8px);
}

.sb-services__card-head {
	grid-template-columns: auto minmax(0, 1fr);
}

/* 🩸 исходники 2019 года 450×205 — растягивать их нельзя, только вписывать.
   Contain даёт максимум, какой позволяет ширина колонки, cover срезал бы стрелу. */
.sb-services__photo {
	position: absolute;
	right: 0;
	top: 10px;
	bottom: 10px;
	width: 46%;
	height: auto;
	object-fit: contain;
	object-position: right center;
}

@media (max-width: 767px) {
	.sb-services__card {
		padding-right: 18px;
	}

	.sb-services__photo {
		position: static;
		display: block;
		width: 100%;
		max-width: 320px;
		height: auto;
		margin: 0 auto 6px;
	}
}

/* ---------- фотографии с площадок: стрелки на кадре и на ленте ---------- */

.sb-projects__media--gal {
	cursor: zoom-in;
}

/* прозрачная кнопка поверх кадра: клик открывает лайтбокс на текущем снимке */
.sb-projects__zoom {
	position: absolute;
	inset: 0;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.sb-projects__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-top: -19px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(13, 3, 32, .55);
	color: var(--sb-white);
	cursor: pointer;
	transition: background var(--sb-ease);
}

.sb-projects__arrow:hover {
	background: var(--sb-green);
}

.sb-projects__arrow--prev {
	left: 10px;
}

.sb-projects__arrow--next {
	right: 10px;
}

.sb-projects__count {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 3px 10px;
	border-radius: 100px;
	background: rgba(13, 3, 32, .6);
	color: var(--sb-white);
	font-size: 12px;
	font-weight: 700;
}

/* лента миниатюр со стрелками по краям */
.sb-projects__strip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.sb-projects__strip .sb-projects__thumbs {
	margin-top: 0;
	scroll-behavior: smooth;
}

.sb-projects__scroll {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 62px;
	padding: 0;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	cursor: pointer;
	transition: background var(--sb-ease), color var(--sb-ease), opacity var(--sb-ease);
}

.sb-projects__scroll:hover {
	background: var(--sb-green);
	border-color: var(--sb-green);
	color: var(--sb-white);
}

/* доехали до края — кнопка гаснет, но не прыгает */
.sb-projects__scroll.is-off {
	opacity: .35;
	pointer-events: none;
}

.sb-projects__thumb--on {
	border-color: var(--sb-green);
}

/* ---------- всплывающие окна ---------- */

/* 🩸 подложка была почти чёрно-фиолетовой (#0d0320) и сливалась с фиолетовым
   окном промокода: границы окна не читались. Чистый чёрный. */
.sb-lb__bg {
	background: rgba(0, 0, 0, .85);
}

/* окно промокода: уже и спокойнее по кеглям.
   🩸 Ширину тут держит `.sb-pop.white-popup{max-width:560px}` — селектор из ДВУХ
   классов, и одноклассовый `.sb-pop--promo` его не перебивает, сколько бы ниже
   он ни стоял. Пишем тоже двумя классами. */
.sb-pop.sb-pop--promo {
	max-width: 500px;
}

.sb-pop--promo .sb-pop__logo {
	width: 112px;
	height: 44px;
	margin-bottom: 12px;
}

.sb-pop--promo .sb-pop__h {
	font-size: clamp(20px, 2.2vw, 26px);
}

.sb-pop--promo .sb-pop__sub {
	font-size: 15px;
	line-height: 1.4;
}

.sb-pop--promo .sb-pop__top {
	padding: 20px 22px 18px;
}

.sb-pop--promo .sb-pop__code {
	padding: 18px 22px;
}

.sb-pop--promo .sb-pop__code-cap {
	margin-bottom: 10px;
	font-size: 13px;
}

.sb-pop--promo .sb-pop__code-value {
	padding: 12px 16px;
	font-size: clamp(20px, 2.4vw, 26px);
}

.sb-pop--promo .sb-pop__perks li {
	font-size: 12px;
}

.sb-pop--promo .sb-pop__form {
	padding: 18px 22px 22px;
}

.sb-pop--promo .sb-pop__form-title {
	margin-bottom: 12px;
	font-size: 15px;
}

/* отступ между полями формы — 15 px */
.sb-pop__form .wpforms-field {
	padding: 0 0 15px;
}

.sb-pop__form .wpforms-field:last-of-type {
	padding-bottom: 0;
}

/* ---------- первый экран на телефоне: сначала заголовок, потом форма ---- */

/* 🩸 форму поднимало наверх правило order: -1 — H1 уезжал под калькулятор.
   Юзер просил поменять их местами: сверху о чём страница, ниже расчёт. */
@media (max-width: 1023px) {
	.sb-hero__inner .sb-calc {
		order: 0;
	}
}

/* ---------- бургер-меню: без фиолетовой подложки ---------- */

.mobile-sidebar-item {
	background: transparent;
	padding: 0;
	margin: 20px;
}

.mobile-sidebar-item__title {
	border-bottom-color: rgba(255, 255, 255, .25);
}

/* ---------- боковая панель: одна иконка, список по нажатию ---------- */

.quick-links__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sb-violet);
	color: var(--sb-white);
	box-shadow: 0 6px 18px rgba(13, 3, 32, .35);
	cursor: pointer;
	transition: background var(--sb-ease);
}

.quick-links__button:hover {
	background: var(--sb-violet-line);
}

.quick-links__ico {
	fill: currentColor;
}

.quick-links__ico--close,
.quick-links--open .quick-links__ico--call {
	display: none;
}

.quick-links--open .quick-links__ico--close {
	display: block;
}

/* свёрнуто: список уехал за правый край и не ловит нажатия */
.quick-links__list {
	transform: translateX(110%);
	opacity: 0;
	visibility: hidden;
	transition: transform .25s ease, opacity .25s ease, visibility .25s;
}

.quick-links--open .quick-links__list {
	transform: none;
	opacity: 1;
	visibility: visible;
}

/* ---------- кнопка «наверх» ---------- */

/* 🔴 на бою в правом нижнем углу сидит виджет Живосайта — поднимаем кнопку
   над ним, иначе они встанут друг на друга. На стенде Живосайта нет.
   22.09 (юзер, боевой): у Живосайта кроме плашки чата ещё круглая кнопка звонка —
   она занимает 90–155 px от низа окна, «наверх» на 96 px сидела прямо под ней.
   Столбик поднят: «наверх» 170 px, кнопка связи над ней 232 px (170 + 52 + 10). */
.scroll-top {
	left: auto;
	right: 17px;
	bottom: 170px;
	z-index: 21;
}

/* =========================================================================
   ПРАВКИ 11.09, ЧАСТЬ 2 — КАТАЛОГ, КАРТОЧКА, ПЛАВАЮЩИЕ КНОПКИ
   ========================================================================= */

/* ---------- полоса преимуществ перед подвалом (макет v1-cat.png) ---------- */

.sb-bar {
	padding: 26px 0;
	background: var(--sb-blue);
	color: var(--sb-white);
}

.sb-bar__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-bar__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	padding: 16px 18px;
	border-radius: var(--sb-radius-sm);
	background: rgba(255, 255, 255, .05);
}

.sb-bar__icon {
	flex: 0 0 auto;
	color: var(--sb-green);
	fill: currentColor;
}

.sb-bar__body {
	min-width: 0;
}

.sb-bar__title {
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
}

.sb-bar__text {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .72);
}

@media (max-width: 1023px) {
	.sb-bar__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sb-bar__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.sb-bar__item {
		padding: 12px 14px;
	}
}

/* ---------- каталог: фильтр липнет, ничего не задевая ---------- */

/* 🩸 Липкий элемент ездит внутри СВОЕГО родителя и наезжает на соседей ниже.
   Пункты доставки переехали под список (`.sb-cat-under`), в колонке остался
   один фильтр — но тогда родитель становится ростом с него и липкость мертва.
   Растягиваем колонку на всю высоту ряда: фильтру есть где ехать, а наезжать
   больше не на что. */
.sb-cat-side {
	align-self: stretch;
}

.sb-cat-under {
	margin-top: 28px;
}

.sb-cat-under .sb-aside {
	position: static;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sb-gap);
}

@media (max-width: 700px) {
	.sb-cat-under .sb-aside {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* кнопка «Фильтры» на телефоне: жёлтый контур на светлом фоне не читался */
.sb-cat-filters-toggle.sb-btn--ghost {
	border-color: var(--sb-violet);
	background: var(--sb-violet);
	color: var(--sb-white);
}

.sb-cat-filters-toggle.sb-btn--ghost:hover {
	background: var(--sb-violet-line);
	border-color: var(--sb-violet-line);
	color: var(--sb-white);
}

/* ---------- карточка товара: порядок блоков на телефоне ---------- */

@media (max-width: 1100px) {
	/* 🩸 `display: contents` растворяет обёртку левой колонки, и картинка, плашки
	   и вкладки становятся такими же элементами сетки, как блок заказа. Только так
	   их можно переставить относительно друг друга: обычным `order` соседа изнутри
	   обёртки не обойти. */
	.sb-product__main {
		display: contents;
	}

	.sb-product__media {
		order: 1;
	}

	.sb-order {
		order: 2;
	}

	.sb-product__perks {
		order: 3;
	}

	.sb-product__tabs {
		order: 4;
	}

	/* пункты доставки и каталог продукции — вниз, над подвалом */
	.sb-page > .sb-aside {
		order: 2;
		margin-top: 28px;
	}

	.sb-page__main {
		order: 1;
	}
}

/* ---------- всплывающие окна: отступ полей ровно 15 px ---------- */

/* 🩸 Между полями WPForms сидит `grid-gap: 25px` из бандла темы
   (`.wpforms-field-container{display:grid;grid-gap:25px}`) — он складывался
   с нашим отступом. Гасим сетку, расстояние держит padding поля. */
.sb-pop__form .wpforms-field-container {
	grid-gap: 0;
	gap: 0;
}

/* ---------- плавающие кнопки: обе в правом нижнем углу ---------- */

/* 11.09: панель была прибита к середине правого края и только на телефоне.
   Юзер просил свести её с кнопкой «наверх» в один столбик и показывать везде. */
.quick-links {
	top: auto;
	right: 17px;
	bottom: 232px; /* 22.09: над кнопкой звонка Живосайта, см. .scroll-top */
	width: auto;
	transform: none;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 10px;
	z-index: 21;
}

.quick-links__button,
.scroll-top {
	width: 52px;
	height: 52px;
	padding: 0;
	flex: 0 0 auto;
}

.quick-links__button {
	position: relative;
	margin: 0;
}

/* 🩸 display у кнопки «наверх» не трогаем: её показывает jQuery через fadeIn,
   а он пишет `display` инлайном и перебьёт любое наше правило. Значок центрируем
   отступами, а не флексом: (52 − 26) / 2 = 13. */
.scroll-top {
	padding: 13px;
}

.scroll-top svg {
	display: block;
	width: 26px;
	height: 26px;
}

/* пульс на кнопке вызова: мягкое кольцо, пока панель закрыта */
.quick-links__button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--sb-violet);
	animation: sb-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

.quick-links--open .quick-links__button::after {
	animation: none;
	opacity: 0;
}

.quick-links__ico {
	transition: transform .25s ease;
}

.quick-links--open .quick-links__ico--close {
	transform: rotate(90deg);
}

@keyframes sb-pulse {
	0% { transform: scale(1); opacity: .7; }
	70% { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.quick-links__button::after {
		animation: none;
	}
}

/* плашки списка: панель больше не прижата к краю окна, скругляем целиком */
.quick-links__list {
	gap: 8px;
}

.quick-links__list .quick-link {
	width: 92px;
	height: auto;
	min-height: 0;
	padding: 10px 6px;
	border-radius: 12px;
	font-size: 11px;
	line-height: 1.2;
}

.quick-links__list .quick-link svg {
	width: 22px;
	height: 22px;
}

.quick-links__list .quick-link .mt-2 {
	margin-top: 6px;
}

/* =========================================================================
   ТЕКСТОВЫЕ СТРАНИЦЫ (доставка, цены, о заводе …) — правки 11.09
   Заголовки прежнего разработчика шли капителью и с подчёркиванием в две
   линии, содержание лежало полосой поверх текста. Приводим к редизайну.
   ========================================================================= */

.sb-article {
	max-width: 100%;
}

.sb-article__crumbs {
	margin-bottom: 10px;
	padding: 0;
}

.sb-article__h1 {
	margin: 0 0 22px;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.sb-article__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 36px;
	align-items: start;
}

.sb-article--wide .sb-article__grid {
	grid-template-columns: minmax(0, 1fr);
}

.sb-article__body {
	min-width: 0;
	/* 22.09, юзер: колонка текста доходит до сайдбара. Раньше стояло 78ch —
	   между текстом и сайдбаром оставалась пустая полоса. Строку и так ограничивает
	   сайдбар 300 px + контейнер 1440 px. */
	max-width: none;
}

.sb-article--wide .sb-article__body {
	max-width: 90ch;
}

.sb-article__thumb {
	float: right;
	max-width: 320px;
	margin: 0 0 18px 24px;
	border-radius: var(--sb-radius);
}

.sb-article__wide {
	margin-top: 40px;
}

/* ---------- типографика текста ---------- */

/* 🩸 Оба правила — из бандла темы: `.page-content h2{border-bottom:2px solid;
   display:inline-block;text-transform:uppercase}` и то же для `.entry-title`.
   Снимаем подчёркивание и капитель, кегли берём из редизайна. */
.sb-article__body h2,
.page-content h2 {
	display: block;
	margin: 36px 0 14px;
	border-bottom: 0;
	font-size: clamp(21px, 2vw, 28px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
}

.sb-article__body h2:first-child,
.page-content h2:first-child {
	margin-top: 0;
}

.sb-article__body h3,
.page-content h3,
.sb-article__body h4,
.page-content h4 {
	margin: 26px 0 10px;
	border-bottom: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: none;
}

.entry-title,
.page-content h1.entry-title {
	border-bottom: 0;
	text-transform: none;
}

/* зелёная черта слева — единственный декор заголовка, как у .sb-eyebrow */
.sb-article__body h2::before {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	margin-bottom: 12px;
	border-radius: 2px;
	background: var(--sb-green);
}

.sb-article__body ul,
.sb-article__body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.sb-article__body li {
	margin-bottom: 7px;
	line-height: 1.55;
}

.sb-article__body a:not(.sb-btn):not(.btn-primary) {
	color: var(--sb-violet-line);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sb-article__body a:not(.sb-btn):not(.btn-primary):hover {
	color: var(--sb-green);
}

/* 🩸 В бандле у таблиц `table-layout: fixed` и кегль 18 px: в колонке текста
   (78ch вместо прежних 1200 px) заголовки «Морозостойкость» и «Водонепроницаемость»
   обрезались на полуслове. Ширину колонок считаем по содержимому. */
.sb-article__body table,
.sb-article__wide table {
	table-layout: auto;
	font-size: 15px;
	border-radius: var(--sb-radius-sm);
	overflow: hidden;
	margin-bottom: 18px; /* 22.09: абзац под прайсом прилипал к таблице */
}

.sb-article__body table th,
.sb-article__wide table th {
	padding: 10px 8px !important;
	font-size: 14px;
	line-height: 1.25;
}

.sb-article__body table td,
.sb-article__wide table td {
	font-size: 15px;
}

/* на телефоне прайс в шесть колонок не ужимается до читаемого — пусть едет вбок.
   🩸 Одного `overflow-x` мало: таблица послушно сжимается по ширине экрана.
   Ширину ей задаёт содержимое, поэтому запрещаем переносы внутри ячеек. */
@media (max-width: 767px) {
	.sb-article__body table,
	.sb-article__wide table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.sb-article__body table td,
	.sb-article__wide table td,
	.sb-article__body table th,
	.sb-article__wide table th {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* ---------- боковая колонка: оглавление и заявка ---------- */

.sb-article__side {
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.sb-toc {
	padding: 18px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-toc__title {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(38, 40, 44, .55);
}

.sb-toc__list {
	counter-reset: sb-toc;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 60vh;
	overflow-y: auto;
}

.sb-toc__item {
	position: relative;
	padding: 7px 0 7px 26px;
	border-top: 1px solid var(--sb-line-dark);
}

.sb-toc__item:first-child {
	border-top: 0;
}

.sb-toc__item::before {
	counter-increment: sb-toc;
	content: counter(sb-toc);
	position: absolute;
	left: 0;
	top: 7px;
	font-size: 12px;
	font-weight: 800;
	color: var(--sb-green);
}

.sb-toc__link {
	color: var(--sb-text);
	font-size: 14px;
	line-height: 1.35;
}

.sb-toc__link:hover {
	color: var(--sb-violet-line);
}

.sb-toc-cta {
	padding: 20px 18px;
	border-radius: var(--sb-radius);
	background: var(--sb-blue);
	color: var(--sb-white);
}

.sb-toc-cta__title {
	display: block;
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 800;
}

.sb-toc-cta__text {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}

.sb-toc-cta__btn {
	width: 100%;
}

.sb-toc-cta__phone {
	display: block;
	margin-top: 14px;
	color: var(--sb-white);
	font-size: 19px;
	font-weight: 800;
}

.sb-toc-cta__note {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--sb-green);
}

@media (max-width: 1023px) {
	.sb-article__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.sb-article__body {
		max-width: none;
	}

	/* на телефоне оглавление идёт ПОД текстом: сверху нужен сам текст,
	   а не список из одиннадцати ссылок на экран */
	.sb-article__side {
		position: static;
		order: 2;
	}

	.sb-article__thumb {
		float: none;
		display: block;
		max-width: 100%;
		margin: 0 0 16px;
	}
}

/* =========================================================================
   ПРАВКИ 11.09, ЧАСТЬ 3 — капсулы типов бетона мельче и со сворачиванием
   ========================================================================= */

.sb-cat-tabs-wrap {
	margin-bottom: 24px;
}

.sb-cat-tabs {
	margin-bottom: 0;
	gap: 8px;
}

/* свёрнуто — две строки капсул: 2 × 36 + отступ между строками */
.sb-cat-tabs--clamp {
	max-height: 80px;
	overflow: hidden;
}

.sb-cat-tab {
	min-height: 36px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
}

.sb-cat-tabs__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sb-violet-line);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.sb-cat-tabs__more:hover {
	color: var(--sb-green);
}

.sb-cat-tabs__more svg {
	transition: transform var(--sb-ease);
}

.sb-cat-tabs-wrap--open .sb-cat-tabs__more svg {
	transform: rotate(180deg);
}

/* на телефоне капсулы едут лентой вбок — сворачивать нечего */
@media (max-width: 600px) {
	.sb-cat-tabs--clamp {
		max-height: none;
		overflow-x: auto;
	}

	.sb-cat-tabs__more {
		display: none;
	}
}

/* =========================================================================
   ПРАВКИ 17.09 — сайдбары под шапкой, оглавление везде, статьи, рубрики,
   контакты, пункты доставки
   ========================================================================= */

/* ---------- липкие колонки не заезжают под шапку ---------- */

/* 🩸 У всех липких колонок стояло `top: 16px`, а шапка сама липкая (82 px на ПК):
   верх блока заказа и оглавления прятался под неё. Высоту шапки кладёт в
   `--sb-head-h` js/sb-article.js — на телефоне и при переносе меню она другая.
   Запасное значение — высота шапки на ПК, если скрипт не доехал. */
:root {
	--sb-sticky-top: calc(var(--sb-head-h, 82px) + 16px);
}

.sb-order,
.sb-aside,
.sb-article__side {
	top: var(--sb-sticky-top);
}

/* оглавление не должно уходить ниже экрана вместе с призывом под ним */
.sb-toc__list {
	max-height: max(160px, calc(100vh - var(--sb-sticky-top) - 370px));
}

/* якоря заголовков тоже встают под шапку, а не за неё */
.sb-article__body [id] {
	scroll-margin-top: calc(var(--sb-head-h, 82px) + 20px);
}

/* текущий раздел в оглавлении */
.sb-toc__link.is-current {
	color: var(--sb-violet-line);
	font-weight: 700;
}

/* ---------- каталог: пункты доставки в сайдбаре под фильтром ---------- */

/* Одна разметка на обе раскладки. На ПК три элемента сетки: фильтр (1,1),
   блоки (1,2) и список товаров справа на обе строки. На телефоне — столбик
   в порядке разметки: фильтр, список, блоки. */
@media (min-width: 901px) {
	.sb-cat-layout {
		grid-template-rows: auto 1fr;
	}

	.sb-cat-side {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
	}

	.sb-cat-main {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.sb-cat-under {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		margin-top: 0;
	}

	.sb-cat-under .sb-aside {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* липкий фильтр наехал бы на пункты доставки под ним */
	.sb-cat-filters {
		position: static;
	}
}

/* ---------- мобильное оглавление под H1 ---------- */

.sb-toc-m {
	display: none;
}

@media (max-width: 1023px) {
	.sb-toc-m {
		display: block;
		position: sticky;
		top: var(--sb-head-h, 0px);
		z-index: 20; /* под шапкой (30), над текстом */
		margin: 0 -20px 22px;
		background: var(--sb-white);
		box-shadow: 0 1px 0 var(--sb-line-dark), 0 6px 16px rgba(13, 3, 32, .06);
	}

	.sb-toc-m__btn {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 52px;
		padding: 8px 20px;
		border: 0;
		background: transparent;
		color: var(--sb-text);
		text-align: left;
		cursor: pointer;
	}

	.sb-toc-m__icon {
		flex-shrink: 0;
		color: var(--sb-green);
	}

	.sb-toc-m__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
		flex: 1;
	}

	.sb-toc-m__cap {
		font-size: 12px;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: rgba(38, 40, 44, .55);
	}

	.sb-toc-m__now {
		overflow: hidden;
		font-size: 14px;
		font-weight: 700;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.sb-toc-m__now:empty {
		display: none;
	}

	.sb-toc-m__arrow {
		flex-shrink: 0;
		transition: transform var(--sb-ease);
	}

	.sb-toc-m--open .sb-toc-m__arrow {
		transform: rotate(180deg);
	}

	.sb-toc-m__list {
		counter-reset: sb-toc;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: min(60vh, 420px);
		margin: 0;
		padding: 4px 20px 10px;
		overflow-y: auto;
		overscroll-behavior: contain;
		list-style: none;
		background: var(--sb-white);
		box-shadow: 0 14px 24px rgba(13, 3, 32, .14);
	}

	.sb-toc-m__item {
		position: relative;
		padding-left: 26px;
		border-top: 1px solid var(--sb-line-dark);
	}

	.sb-toc-m__item:first-child {
		border-top: 0;
	}

	.sb-toc-m__item::before {
		counter-increment: sb-toc;
		content: counter(sb-toc);
		position: absolute;
		left: 0;
		top: 12px;
		font-size: 12px;
		font-weight: 800;
		color: var(--sb-green);
	}

	.sb-toc-m__link {
		display: block;
		padding: 10px 0;
		color: var(--sb-text);
		font-size: 15px;
		line-height: 1.35;
		text-decoration: none;
	}

	.sb-toc-m__link.is-current {
		color: var(--sb-violet-line);
		font-weight: 700;
	}

	/* в колонке на телефоне оглавление не нужно — оно уже под заголовком */
	.sb-article__side .sb-toc {
		display: none;
	}

	/* якорь встаёт под шапку И под плашку оглавления */
	.sb-article__body [id] {
		scroll-margin-top: calc(var(--sb-head-h, 0px) + 72px);
	}
}

/* ---------- статья: строка под заголовком ---------- */

.sb-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: -10px 0 22px;
	color: rgba(38, 40, 44, .6);
	font-size: 13px;
}

.sb-article__cat {
	padding: 4px 10px;
	border-radius: var(--sb-radius-sm);
	background: rgba(14, 129, 37, .1);
	color: var(--sb-green);
	font-weight: 700;
	text-decoration: none;
}

.sb-article__cat:hover {
	background: var(--sb-green);
	color: var(--sb-white);
}

.sb-article__read {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* 🩸 В статьях прежнего разработчика картинки стоят `alignleft` 300 px и
   обтекаются текстом; в колонке 78ch на телефоне это полоска текста в два слова */
.sb-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sb-radius-sm);
}

@media (max-width: 600px) {
	.sb-article__body .alignleft,
	.sb-article__body .alignright {
		float: none;
		display: block;
		margin: 0 0 16px;
	}
}

.sb-related {
	margin-top: 56px;
}

.sb-related__title {
	margin-bottom: 20px;
}

/* ---------- карточки статей ---------- */

.sb-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-post {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
	transition: transform var(--sb-ease), box-shadow var(--sb-ease);
}

.sb-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 32px rgba(13, 3, 32, .16);
}

.sb-post__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: #ebe9ef;
	color: rgba(38, 40, 44, .35);
}

/* 🩸 без абсолютного позиционирования картинка с width/height в атрибутах
   растягивала рамку `aspect-ratio` по своей пропорции — карточки выходили разной высоты */
.sb-post__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sb-post__img--doc {
	padding: 14px;
	object-fit: contain;
	background: var(--sb-white);
}

.sb-post__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.sb-post__cat {
	color: var(--sb-green);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sb-post__title {
	color: var(--sb-text);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
}

/* вся карточка — одна ссылка на статью */
.sb-post__title::after {
	content: '';
	position: absolute;
	inset: 0;
}

.sb-post:hover .sb-post__title {
	color: var(--sb-violet-line);
}

.sb-post__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
	color: rgba(38, 40, 44, .72);
	font-size: 14px;
	line-height: 1.5;
}

.sb-post__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--sb-violet-line);
	font-size: 14px;
	font-weight: 700;
}

@media (max-width: 1023px) {
	.sb-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sb-posts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- рубрика ---------- */

.sb-archive__page {
	color: rgba(38, 40, 44, .45);
	font-weight: 600;
}

.sb-archive__lead {
	max-width: 78ch;
	margin: -8px 0 20px;
	color: rgba(38, 40, 44, .75);
}

.sb-archive__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}

.sb-archive__count {
	margin-left: 6px;
	opacity: .55;
	font-weight: 600;
}

.sb-archive__empty {
	padding: 40px 0;
}

.sb-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 36px;
}

.sb-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-white);
	color: var(--sb-text);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.sb-pager a.page-numbers:hover {
	border-color: var(--sb-yellow);
	background: var(--sb-yellow);
}

.sb-pager .page-numbers.current {
	border-color: var(--sb-blue);
	background: var(--sb-blue);
	color: var(--sb-white);
}

.sb-pager .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.sb-pager .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- пункты доставки ---------- */

.sb-points {
	margin: 28px 0 32px;
	padding: 22px 22px 18px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-article__body .sb-points h2 {
	margin-top: 0;
}

.sb-points__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

/* 🩸 ссылки в тексте статьи красятся правилом `.sb-article__body a:not(…):not(…)` —
   вес (0,3,1); наши правила того же веса стоят ниже и перебивают его порядком */
.sb-article__body .sb-points a.sb-points__tab {
	color: var(--sb-text);
	text-decoration: none;
}

.sb-points__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-points__group {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sb-points__letter {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-blue);
	color: var(--sb-white);
	font-size: 13px;
	font-weight: 800;
}

.sb-article__body .sb-points__list,
.sb-points__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-article__body .sb-points__list li {
	margin: 0;
	line-height: 1;
}

.sb-article__body .sb-points a.sb-points__link {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 11px;
	border: 1px solid var(--sb-line-dark);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-bg);
	color: var(--sb-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background var(--sb-ease), border-color var(--sb-ease);
}

.sb-article__body .sb-points a.sb-points__link:hover {
	border-color: var(--sb-yellow);
	background: var(--sb-yellow);
	color: var(--sb-text);
}

.sb-points--clamp .sb-points__body {
	position: relative;
	max-height: 300px;
	overflow: hidden;
}

.sb-points--clamp .sb-points__body::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(rgba(255, 255, 255, 0), var(--sb-white));
	pointer-events: none;
}

.sb-points--open .sb-points__body {
	max-height: none;
}

.sb-points--open .sb-points__body::after {
	display: none;
}

.sb-points__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sb-violet-line);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.sb-points__more:hover {
	color: var(--sb-green);
}

.sb-points__more svg {
	transition: transform var(--sb-ease);
}

.sb-points--open .sb-points__more svg {
	transform: rotate(180deg);
}

@media (max-width: 600px) {
	.sb-points {
		margin-left: -20px;
		margin-right: -20px;
		padding: 18px 20px 16px;
		border-radius: 0;
	}

	.sb-points__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-right: -20px;
		padding-right: 20px;
		scrollbar-width: none;
	}

	.sb-points__group {
		flex-direction: column;
		gap: 6px;
	}
}

/* ---------- контакты ---------- */

.sb-contacts__lead {
	margin: -10px 0 26px;
	color: rgba(38, 40, 44, .7);
	font-size: 17px;
}

.sb-contacts__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--sb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-contacts__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 22px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-contacts__card--accent {
	background: var(--sb-blue);
	color: var(--sb-white);
}

.sb-contacts__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--sb-yellow);
	color: var(--sb-blue);
}

.sb-contacts__cap {
	color: rgba(38, 40, 44, .6);
	font-size: 13px;
	font-weight: 600;
}

.sb-contacts__card--accent .sb-contacts__cap {
	color: rgba(255, 255, 255, .65);
}

.sb-contacts__value {
	color: var(--sb-text);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
}

a.sb-contacts__value:hover {
	color: var(--sb-violet-line);
}

.sb-contacts__value--mail {
	font-size: 17px;
}

.sb-contacts__card--accent .sb-contacts__value {
	color: var(--sb-green);
}

.sb-contacts__social {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.sb-contacts__social-link {
	display: inline-flex;
}

.sb-contacts__plants {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--sb-gap);
	margin-top: 36px;
}

.sb-contacts__addr {
	padding: 26px;
	border-radius: var(--sb-radius);
	background: var(--sb-white);
	box-shadow: var(--sb-shadow);
}

.sb-contacts__h2 {
	margin: 0 0 8px;
	font-size: clamp(21px, 2vw, 28px);
	font-weight: 800;
	line-height: 1.2;
}

.sb-contacts__note {
	margin: 0 0 18px;
	color: rgba(38, 40, 44, .7);
	font-size: 14px;
}

.sb-contacts__h3 {
	margin: 20px 0 6px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(38, 40, 44, .55);
}

.sb-contacts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-contacts__addr-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--sb-line-dark);
	font-size: 15px;
	line-height: 1.45;
}

.sb-contacts__addr-item:first-child {
	border-top: 0;
}

.sb-contacts__pin {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50% 50% 50% 4px;
	background: var(--sb-green);
	color: var(--sb-white);
	font-size: 12px;
	font-weight: 800;
}

.sb-contacts__map {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	border-radius: var(--sb-radius);
	background:
		radial-gradient(circle at 30% 40%, rgba(14, 129, 37, .12) 0 6px, transparent 7px),
		radial-gradient(circle at 62% 58%, rgba(14, 129, 37, .12) 0 6px, transparent 7px),
		repeating-linear-gradient(45deg, #e6e4ea 0 2px, #efedf2 2px 22px);
	box-shadow: var(--sb-shadow);
}

.sb-contacts__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sb-contacts__map-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-blue);
	color: var(--sb-white);
	font-size: 15px;
	font-weight: 700;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.sb-contacts__map--on .sb-contacts__map-btn {
	display: none;
}

.sb-contacts__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-top: 36px;
	padding: 30px 34px;
	border-radius: var(--sb-radius);
	background: var(--sb-blue);
	color: var(--sb-white);
}

.sb-contacts__cta-title {
	margin-bottom: 6px;
	color: var(--sb-white);
}

.sb-contacts__cta-text {
	margin: 0;
	color: rgba(255, 255, 255, .72);
}

.sb-contacts__cta .sb-btn {
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.sb-contacts__plants {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-contacts__map {
		min-height: 380px;
	}

	.sb-contacts__cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px 20px;
	}
}

@media (max-width: 600px) {
	.sb-contacts__value {
		font-size: 20px;
	}

	.sb-contacts__addr {
		padding: 20px;
	}
}

/* ---------- галочка согласия на обработку ПДн во всех формах (17.09) ---------- */

/* Поле добавлено скриптом `ops/pdn_setup.py` с классом `sb-consent`. В окнах
   бандл центрирует всё содержимое формы — галочка вставала над текстом. */
.wpforms-container .sb-consent ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wpforms-container .sb-consent li {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	text-align: left;
}

.wpforms-container .sb-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 1px 0 0 !important;
	accent-color: var(--sb-green);
}

/* только подпись у самой галочки: общий заголовок поля скрыт (`label_hide`),
   и `display` на все label его бы проявил */
.wpforms-container .sb-consent label.wpforms-field-label-inline {
	display: block !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: left !important;
}

.wpforms-container .sb-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wpforms-container .sb-consent a:hover {
	color: var(--sb-green);
}

.wpforms-container .sb-consent label.wpforms-error {
	margin-top: 4px !important;
	color: var(--sb-red) !important;
	font-size: 12px !important;
}

/* контакты на телефоне: карточки в строку «значок — текст», иначе четыре карточки
   занимали два экрана до адресов заводов */
@media (max-width: 600px) {
	.sb-contacts__cards {
		gap: 10px;
	}

	.sb-contacts__card {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		padding: 14px 16px;
	}

	.sb-contacts__icon {
		grid-row: 1 / span 3;
		align-self: start;
		width: 40px;
		height: 40px;
		margin: 0;
	}

	.sb-contacts__value {
		font-size: 19px;
	}

	.sb-contacts__value--mail {
		font-size: 16px;
	}

	.sb-contacts__social {
		margin-top: 6px;
	}
}

/* гео-страницы (17.09): последний пункт содержания ведёт на «Популярные марки» —
   блок вне колонки текста, отступ под липкую шапку ставим ему отдельно */
#sb-popular-title {
	scroll-margin-top: calc(var(--sb-head-h, 82px) + 20px);
}

@media (max-width: 1023px) {
	#sb-popular-title {
		scroll-margin-top: calc(var(--sb-head-h, 0px) + 20px);
	}
}

/* =========================================================================
   ТЗ КЛИЕНТА 21.09: ПЕРВЫЙ ЭКРАН ПО МАКЕТУ v1, ГАЛЕРЕЯ, БЫСТРЫЕ ССЫЛКИ
   ========================================================================= */

/* ---------- первый экран: шесть пунктов панелью, три карточки на стыке ---------- */

/* Полосы под первым экраном больше нет, её пункты внутри (page-home.php).
   Карточки выступают за нижний край первого экрана, как в макете: у хиро
   снимаем обрезку и поднимаем его над следующей секцией. Видео и подложка
   и так лежат внутри по inset: 0, обрезка им не нужна. */
.sb-hero {
	z-index: 3;
	overflow: visible;
}

.sb-hero .sb-hero__inner {
	padding-bottom: 40px;
}

/* 🩸 Разделители: линия у КАЖДОГО пункта слева и сверху, а сам пункт сдвинут
   на 1 px влево и вверх. У пунктов первого столбца и первой строки эта линия
   уходит за край панели и обрезается overflow: hidden. Так линии всегда стоят
   только МЕЖДУ пунктами, сколько бы их ни было в строке на любой ширине.
   Раньше линию снимали у :first-child — и после переноса вторая строка
   начиналась с лишней черты, а в конце первой её не хватало. */
.sb-hero__points,
.sb-hero__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border-radius: var(--sb-radius);
}

.sb-hero__points {
	/* пары идут столбцом: сверху вниз, потом следующий столбец */
	grid-template-columns: none;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(13, 3, 32, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.sb-hero__point,
.sb-hero__card {
	margin: -1px 0 0 -1px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	border-left: 1px solid rgba(255, 255, 255, .14);
}

.sb-hero__point {
	padding: 13px 16px;
	font-size: 14px;
}

.sb-hero__point-icon {
	width: 24px;
	height: 24px;
	color: var(--sb-yellow);
}

.sb-hero__cards {
	position: relative;
	margin: 18px 0 -96px;
	background: var(--sb-violet);
	box-shadow: 0 18px 48px rgba(13, 3, 32, .38);
}

.sb-hero__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 18px;
}

.sb-hero__card-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	color: var(--sb-yellow);
}

.sb-hero__card-body {
	display: block;
	min-width: 0;
}

.sb-hero__card-title {
	display: block;
	margin-bottom: 4px;
	color: var(--sb-white);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.sb-hero__card-text {
	display: block;
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
	line-height: 1.35;
}

/* запас под выступ карточек: 96 − 40 = 56 px выступа + обычный воздух секции */
.sb-hero + .sb-section {
	padding-top: 100px;
}

/* 🩸 Высоту первого экрана раньше задавала форма, а не левая колонка: карточки
   оставались внутри, и под ними появлялась полоса пустого фона. Форме тоже даём
   право опуститься на 56 px (не дальше карточек) — теперь высоту держит текст.
   Над кнопкой был отступ 30 px из стилей WPForms — пустое место внутри формы. */
.sb-hero__inner .sb-calc {
	margin-bottom: -56px;
}

.sb-hero .sb-calc .wpforms-form .wpforms-submit {
	margin-top: 6px;
}

/* до 1023 px одна колонка: заголовок → пункты → форма → карточки.
   display: contents разворачивает левую колонку в сетку хиро — иначе карточки
   стояли бы между пунктами и формой и уводили расчёт на экран ниже. */
@media (max-width: 1023px) {
	.sb-hero__inner {
		gap: 0;
	}

	.sb-hero__main {
		display: contents;
	}

	.sb-hero__badge {
		justify-self: start;
	}

	.sb-hero__inner .sb-calc {
		margin-top: 22px;
		margin-bottom: 0;
	}

	.sb-hero__cards {
		order: 1;
		margin: 16px 0 0;
		box-shadow: none;
	}

	.sb-hero .sb-hero__inner {
		padding-bottom: 36px;
	}

	.sb-hero + .sb-section {
		padding-top: 48px;
	}
}

@media (max-width: 767px) {
	/* на телефоне пара — строка: слева первый, справа второй */
	.sb-hero__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-flow: row;
	}

	.sb-hero__point {
		padding: 11px 12px;
		font-size: 13px;
	}

	.sb-hero__point-icon {
		width: 22px;
		height: 22px;
	}

	.sb-hero__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-hero__card {
		padding: 14px 16px;
	}

	.sb-hero__card-icon {
		width: 40px;
		height: 40px;
	}
}

/* ---------- галерея: пропорции ячеек при любой ширине ---------- */

/* ТЗ: прежняя схема вёрстки — ячейка position: relative + padding-bottom: 75%,
   картинка position: absolute. Высота ячейки теперь идёт от её ширины (4:3),
   а не от зашитых 200/180/140 px — те сплющивали снимки на узком экране.
   Раскладку под число фото выбирает sb-gallery.php (классы --cols3 / --wide),
   чтобы в последней строке не оставалось пустых ячеек. */
.sb-gallery__grid {
	--sb-gal-gap: 14px;
	grid-auto-rows: auto;
	gap: var(--sb-gal-gap);
}

.sb-gallery__grid--cols3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sb-gallery__cell {
	height: 0;
	padding-bottom: 75%;
}

/* большая на 2 × 2 растягивается на две строки сама: её 75% чуть меньше суммы строк */
.sb-gallery__cell--big {
	height: auto;
	min-height: 0;
}

/* широкая на две колонки и одну строку — той же высоты, что соседние:
   ¾ от ширины одной колонки, (W − gap) / 2 × 0,75 */
.sb-gallery__cell--wide {
	grid-column: span 2;
	padding-bottom: calc(37.5% - var(--sb-gal-gap) * .375);
}

/* последняя во всю строку (редкий остаток 1, см. sb_gallery_layout): та же высота строки */
.sb-gallery__cell--full {
	grid-column: 1 / -1;
	padding-bottom: calc(18.75% - var(--sb-gal-gap) * .5625);
}

.sb-gallery__img {
	position: absolute;
	inset: 0;
}

@media (max-width: 900px) {
	.sb-gallery__grid,
	.sb-gallery__grid--cols3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	/* на две колонки своя раскладка: крупная во всю ширину, остальные парами;
	   непарная последняя растягивается на строку */
	.sb-gallery__cell--big {
		grid-column: span 2;
		grid-row: span 1;
		height: 0;
		padding-bottom: 75%;
	}

	.sb-gallery__cell--wide,
	.sb-gallery__cell--full {
		grid-column: auto;
		padding-bottom: 75%;
	}

	.sb-gallery__cell:not(.sb-gallery__cell--big):last-child:nth-child(even) {
		grid-column: span 2;
		padding-bottom: calc(37.5% - var(--sb-gal-gap) * .375);
	}
}

@media (max-width: 600px) {
	.sb-gallery__grid {
		--sb-gal-gap: 10px;
		grid-auto-rows: auto;
	}
}

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

/* «Написать в WhatsApp» переносится на две строки, и плашка была выше соседних.
   Высота общая, содержимое по центру. */
.quick-links__list .quick-link {
	height: 78px;
	justify-content: center;
	overflow: hidden;
}

/* 22.09 (QA после выкатки): на телефоне таблицы прайса шире экрана. Сама таблица
   там блок с прокруткой (правило бандла), колонка цены доступна свайпом — но
   догадаться об этом нельзя. Подсказка над таблицей, только на узком экране.
   Обёртку `.wrap-table` ставит main.js. */
.wrap-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	.wrap-table::before {
		content: "Таблицу можно листать вбок →";
		display: block;
		margin-bottom: 6px;
		color: rgba(38, 40, 44, .55);
		font-size: 13px;
		text-align: right;
	}
}