/**
 * Общие примитивы редизайна 2026 (заголовки секций, контейнер, кнопки).
 * Подключается после main.css. Источник: Figma «doorlock редизайн».
 */

/* --- Контейнер ---------------------------------------------------------- */
.section-container {
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	margin: 0 auto;
}

/* --- Ссылки по умолчанию -------------------------------------------------
   Общий вид для ссылок без своего класса ВНУТРИ текстового контента (CMS-текст:
   контакты, статьи, о компании и т.д, обычно оборачивается в <p>/<td>) —
   навигационные/интерфейсные ссылки без класса (шапка, мобильный таб-бар и
   т.п.) сидят в классованных <li>/<div>, этим селектором не задеваются. */
p a:not([class]),
td a:not([class]) {
	color: var(--color-accent);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}

p a:not([class]):hover,
td a:not([class]):hover {
	color: var(--color-text);
}

/* --- Хлебные крошки ------------------------------------------------------ */
.breadcrumbs {
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
	line-height: var(--lh-loose);
}

.breadcrumbs::before {
	content: none;
}

/* В main.css/style.css компонента разделитель ">" — по макете должен быть "/" */
.breadcrumbs a:not(:first-child)::before,
.breadcrumbs span::before {
	content: "/";
}

/* Последний (активный, без ссылки) пункт — красным */
.breadcrumbs span {
	color: var(--color-accent);
}

/* --- Плавающий баннер подписки (Figma 719:11021) -----------------------
   Красная плашка 256×70 у правого края экрана, как ширина reCAPTCHA.
   По умолчанию выезжает
   только квадрат 70×70 с иконкой конверта; при наведении плашка
   выдвигается целиком и открывается надпись «Подписаться на рассылку».
   z-index поверх контента, но ниже модалок (у них 100–200): в
   template_styles.css было 100000, из-за чего баннер перекрывал и модалки. */
.subscribe-banner {
	position: fixed;
	bottom: 6rem;
	right: 0;
	z-index: 99;
	width: 70px;
	height: 70px;
	transform: none;
	transition: width 0.35s ease;
}

.subscribe-banner__panel {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--color-accent);
	border-radius: 10px 0 0 10px;
}

.subscribe-banner__link {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	height: 100%;
	padding-left: 6px;
	padding-right: 0;
	gap: 12px;
	overflow: hidden;
	text-decoration: none;
}

.subscribe-banner__icon {
	flex: 0 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}

.subscribe-banner__icon svg {
	width: 100%;
	height: 100%;
}

.subscribe-banner__text {
	font-family: var(--font-base);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	line-height: 1.3;
	color: var(--color-text-invert);
	min-width: 0;
	white-space: normal;
}

.subscribe-banner .close-modal {
	display: flex;
	position: static;
	top: auto;
	right: auto;
	left: auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 44px;
	flex: 0 0 32px;
	margin: 0;
	padding: 0;
	transform: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.subscribe-banner .close-modal svg {
	width: 20px;
	height: 20px;
	transition: transform 0.2s ease;
}

.subscribe-banner .close-modal:hover svg,
.subscribe-banner .close-modal:focus-visible svg {
	transform: rotate(90deg) scale(1.15);
}

.subscribe-banner .close-modal:focus-visible {
	outline: 2px solid var(--color-text-invert);
	outline-offset: -4px;
}

@media (min-width: 1201px) {
	.subscribe-banner:hover,
	.subscribe-banner:focus-within {
		width: 256px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.subscribe-banner,
	.subscribe-banner .close-modal svg {
		transition: none;
	}
}

.popup-cookie.js_popup_cookie {
	padding: var(--space-8) 0;
}

.popup-cookie__inner {
	gap: var(--space-12);
	padding-inline: var(--layout-pad);
}

.popup-cookie__text {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
}

.popup-cookie__btn-ok {
	flex-shrink: 0;
	min-height: 44px;
	margin: 0;
}

@media (max-width: 1200px) {
	.popup-cookie.js_popup_cookie {
		bottom: var(--mobile-bar-height, 68px);
	}

	.popup-cookie__inner {
		flex-wrap: nowrap;
	}

	.popup-cookie__text {
		max-width: none;
	}

	.subscribe-banner {
		bottom: calc(140px + var(--cookie-banner-height, 0px));
		right: 0;
		width: 70px;
		height: 60px;
		transform: none;
	}

	.subscribe-banner__panel {
		width: 100%;
		border-radius: var(--radius-md) 0 0 var(--radius-md);
	}

	.subscribe-banner__link {
		padding: 0 0 0 2px;
	}

	.subscribe-banner__icon {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
	}

	.subscribe-banner__icon svg {
		width: 24px;
		height: 24px;
	}

	.subscribe-banner__text {
		display: none;
	}

	.subscribe-banner .close-modal {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	.subscribe-banner .close-modal svg {
		width: 26px;
		height: 26px;
	}

	body {
		padding-bottom: calc(var(--mobile-bar-height, 68px) + var(--cookie-banner-height, 0px));
	}
}

/* --- Выпадающие пункты «О компании» / «Документы» в верхнем меню -------- */
/* Раньше ширина была прибита 190px — длинные пункты («Сотрудники компании» и т.п.)
   обрезались. Ширина теперь по контенту. Чёрный бордюр + radius-md по макету.
   Проверено в live-разметке: пункты внутри выпадайки рендерятся как обычные
   .header__item (не .header__popup-company-item — та ветка шаблона тут не
   срабатывает, т.к. у пунктов нет вложенных детей), поэтому скоупим через
   .header__popup-company .header__item, отдельно от верхнего уровня меню. */
.header__popup-company {
	width: -moz-max-content;
	width: max-content;
	min-width: 200px;
	max-width: 320px;
	padding: var(--space-8) 0;
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-text);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.header__popup-company-wrapper {
	padding: 0;
}

.header__popup-company .header__item {
	margin-bottom: 0;
	padding: 0.5rem 0;
}

.header__popup-company .header__item a,
.header__popup-company .header__item button {
	display: block;
	padding: 0 1.5rem;
	overflow: visible;
	white-space: normal;
	line-height: var(--lh-normal);
}

/* Между пунктом меню и выпадайкой есть небольшой зазор (top:44px) — курсор
   при движении к меню теряет :hover раньше, чем доходит до самой выпадайки,
   и она закрывается. Вместо display:none/block (main.css) — opacity/
   visibility с задержкой на скрытие (не на показ), плюс :hover на самой
   выпадайке — так она не закрывается, пока курсор долетает до неё через
   зазор. pointer-events НЕ трогаем (visibility:hidden сама по себе убирает
   элемент из hit-теста) — переключение pointer-events через transition-delay
   с нулевой длительностью ненадёжно (в части браузеров срабатывает сразу,
   игнорируя задержку). Только десктоп — на мобиле это click-аккордеон
   (main.css), там нет фазы наведения и трогать её не нужно. */
@media (min-width: 1201px) {
	.header__popup-company {
		/* Зазор до выпадайки — актуален только для десктопного hover-раскрытия. */
		top: 44px;
		display: block;
		opacity: 0;
		visibility: hidden;
		/* opacity держим на той же задержке 0.2s, что и visibility — иначе меню
		   успевает чуть погаснуть при пересечении зазора и тут же вернуться
		   назад к opacity:1, что выглядит как мигание. */
		transition: opacity 0.15s ease 0.2s, visibility 0s linear 0.2s;
	}

	.header__item--company:hover .header__popup-company,
	.header__popup-company:hover {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
}


.main__header-alert {
	border: 2px solid var(--color-accent);
	border-radius: var(--radius-lg);
	padding: 0.5rem 1rem;
	font-weight: var(--fw-bold);
	color: var(--color-accent);
	text-align: center;

	max-width: var(--layout-max);
	width: 100%;
	margin: 1rem auto;
}

@media (max-width: 1700px) {
	.main__header-alert {
		width: auto;
		max-width: 100%;
		margin: 1rem var(--layout-pad);
	}
}

/* .main — flex-колонка с gap:var(--section-gap) МЕЖДУ секциями главной
   (баннер/комплектующие/о компании/новости), только когда .main напрямую
   содержит .about-company (т.е. на главной). Алерт — не секция, а тонкая
   плашка, но раз она тоже прямой ребёнок .main, тот же большой gap
   добавляется и после неё — гасим его отрицательным отступом, чтобы
   визуальный зазор остался равен собственному margin (1rem). Скоуплено
   именно этим селектором (не глобально на .main__header-alert), т.к. на
   остальных страницах .main — обычный block-поток без gap, и такой же
   отрицательный margin там утянул бы следующий блок через схлопывание
   отступов. */
.main:has(> .about-company)>.main__header-alert {
	margin-bottom: calc(1rem - var(--section-gap));
}

/* На мобилке этот список раскрывается внутри бургер-меню кликом (main.js уже
   переключает .active на .js_header_item_company_parent) — hover тут явно
   гасим (на телефоне нет фазы наведения), а раскрытие/скрытие анимируем
   через max-height вместо мгновенного display:none/block. */
@media (max-width: 1200px) {

	/* :hover на телефоне не отпускается (палец «залипает» в hover-состоянии
	   после тапа) — никакой отдельный hover-стиль тут не нужен вообще,
	   раскрытие/закрытие целиком решает .active (см. ниже, с !important —
	   иначе застрявший :hover с более ранним !important бы его перебивал). */
	.header__popup-company {
		display: block !important;
		position: relative;
		top: 0;
		width: 100%;
		min-width: 0;
		max-width: none;
		max-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		opacity: 0;
		background-color: transparent;
		border: none;
		border-radius: 0 !important;
		box-shadow: none;
		transition: max-height 0.3s ease, opacity 0.25s ease;
	}

	.header__item--company.active .header__popup-company {
		/* Скролл только на .header__list целиком (main.css), не на самой
		   выпадайке — иначе до кнопки «Написать директору» ниже не доскроллить. */
		max-height: 800px !important;
		opacity: 1 !important;
	}

	.header__popup-company-wrapper {
		padding: var(--space-8) var(--space-16) !important;
	}

	/* Раньше отступ ставился одновременно на li, на a/button и ещё раз в
	   template_styles.css (.header__popup-company-wrapper .header__item) —
	   в сумме получались неприятные большие промежутки. Сбрасываем всё в 0 и
	   задаём единственный источник отступа — сам пункт списка ниже. */
	.header__popup-company .header__item,
	.header__popup-company-wrapper .header__item {
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		width: auto !important;
	}

	.header__popup-company .header__item + .header__item,
	.header__popup-company-wrapper .header__item + .header__item {
		border-top: var(--border-width) solid var(--color-border) !important;
	}

	.header__popup-company .header__item a,
	.header__popup-company .header__item button {
		padding: var(--space-12) 0 !important;
		font-size: var(--fs-sm) !important;
		font-weight: var(--fw-regular);
		color: var(--color-text) !important;
		text-decoration: none !important;
	}

	.header__popup-company .header__item a:hover,
	.header__popup-company .header__item button:hover {
		color: var(--color-accent) !important;
	}
}

/* --- Шапка сайта -------------------------------------------------------- */
/* В макете шапка не прилипает — обычный поток документа. */
.header {
	position: static;
	background-color: var(--color-surface);
}

@media (max-width: 1200px) {
	.header {
		position: static;
	}
}

/* Шапка больше не fixed — компенсирующий отступ у контента не нужен. */
.main {
	padding-top: 0;
}

@media (max-width: 1200px) {
	.main {
		padding-top: 0;
	}
}

.header__top {
	background-color: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-border);
}

.header__top-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	min-height: var(--header-top-height);
	padding: 0 var(--layout-pad);
	gap: var(--space-20);
}

.header__city {
	flex: 0 0 auto;
	margin-right: 0;
	text-decoration: none;
}

.header__city svg {
	display: none;
}

.header__city::before {
	content: '';
	flex: 0 0 auto;
	width: 20px;
	height: 24px;
	margin-right: var(--space-10);
	background: url("../img/redesign/icon-pin-red.svg") no-repeat center / contain;
}

.header__city span {
	width: auto;
	flex-shrink: 0;
	overflow: visible;
	font-size: var(--fs-header-top);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-loose);
	white-space: nowrap;
	text-overflow: clip;
}

/* template_styles.css грузится после redesign.css и жёстко фиксирует
   ширину 120px (селектор специфичнее нашего) — из-за этого "Санкт-Петербург"
   обрезался. Бьём той же специфичностью + !important */
.header__top-inner .header__city span {
	width: auto !important;
}

/* Меню занимает всё свободное место и распределяет пункты по строке */
.header__list {
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--space-40);
	margin-right: 0;
	padding: 1rem;
}

.header__item {
	flex: 0 0 auto;
}

.header__item:not(:last-child) {
	margin-right: 0;
}

.header__item a,
.header__item button {
	font-size: var(--fs-header-top);
	font-weight: var(--fw-medium);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	justify-content: flex-start;
}

.header__item a:hover,
.header__item button:hover {
	color: var(--color-accent);
}

.header__contact-list {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: var(--space-30);
	align-items: center;
}

.header__contact-item {
	white-space: nowrap;
}

.header__contact-item:nth-child(1),
.header__contact-item:nth-child(2),
.header__contact-item--phone1 {
	margin-right: 0;
}

/* Телефон: красная иконка + номер, дополнительные номера прячутся под шеврон */
.header__contact-item--phone1 {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-10);
}

.header__contact-item--phone1::before {
	width: 18px;
	height: 18px;
	margin-right: 0;
	background-image: url("../img/redesign/icon-phone-red.svg");
}

.header__contact-item--phone1 a {
	font-size: var(--fs-header-top);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text);
}

.header__contact-item--phone1 a:hover {
	color: var(--color-accent);
}

.header__contact-toggle {
	flex: 0 0 auto;
	width: 8px;
	height: 5px;
	padding: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%23050000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	border: 0;
	cursor: pointer;
	transition: transform var(--transition);
}

.header__contact-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	min-width: 100%;
	margin: 0;
	margin-top: var(--space-8);
	padding: var(--space-16) var(--space-20);
	align-items: center;
	justify-content: center;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: opacity var(--transition), visibility var(--transition);
}

.header__contact-item--has-more:hover .header__contact-dropdown,
.header__contact-item--has-more:focus-within .header__contact-dropdown {
	visibility: visible;
	opacity: 1;
}

.header__contact-item--has-more:hover .header__contact-toggle,
.header__contact-item--has-more:focus-within .header__contact-toggle {
	transform: rotate(180deg);
}

.header__contact-dropdown a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-8);
	font-size: var(--fs-header-top);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text);
}

.header__contact-dropdown a:hover {
	color: var(--color-accent);
}

/* «Написать директору» открывает попап «Письмо директору» */
.header__contact-item--boss button {
	padding: 0;
	font-family: inherit;
	font-size: var(--fs-header-top);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-loose);
	color: var(--color-accent);
	text-decoration: underline dashed;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	cursor: pointer;
}

.header__contact-item--boss button:hover {
	color: var(--color-accent-hover);
}

/* Мобильная шапка: меню становится выпадающей колонкой — режим «одной строки» отключаем */
@media (max-width: 1200px) {
	.header__top-inner {
		justify-content: flex-start;
	}

	.header__list {
		flex: 0 1 auto;
		justify-content: flex-start;
		gap: 0;
		padding: 0 1rem !important;
	}

	.header__item a,
	.header__item button {
		font-size: var(--fs-lg);
		white-space: normal;
		padding: 0.5rem 0;
		position: relative;
	}
	
	.header__item {
		padding: var(--space-16) 0;
	}
	
	.header__item--company-link::after {
		position: absolute;
		right: 0;
    content: '';
    display: inline-block;
    width: 16px;
    height: 14px;
    margin-left: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='13' viewBox='0 0 8 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.95 6.364L0 1.414L1.414 0L7.778 6.364L1.414 12.728L0 11.314L4.95 6.364Z' fill='%231E1E1E'/%3E%3C/svg%3E%0A");
		/* иконка в исходном svg уже смотрит вправо — поворот не нужен, только в .active */
		transition: transform 0.25s ease;
	}

	/* main.css/template_styles.css меняют этой стрелке background-image на
	   :hover/.active (другая, v-образная иконка) — держим одну и ту же
	   иконку всегда, поворот делаем чисто transform-ом. */
	.header__item--company:hover .header__item--company-link::after,
	.header__item--company.active .header__item--company-link::after {
		background-image: url("data:image/svg+xml,%3Csvg width='8' height='13' viewBox='0 0 8 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.95 6.364L0 1.414L1.414 0L7.778 6.364L1.414 12.728L0 11.314L4.95 6.364Z' fill='%231E1E1E'/%3E%3C/svg%3E%0A") !important;
	}

	.header__item--company.active .header__item--company-link::after {
		transform: rotate(90deg);
	}
}

/* Кнопка «Написать директору» под списком пунктов в мобильном бургер-меню.
   На десктопе такая же кнопка уже выводится отдельно компонентом
   header_contacts — тут не дублируем, поэтому по умолчанию скрыто. Класс
   .header__contact-item--boss (см. правило выше) даёт готовый стиль кнопки. */
.header__list-boss-row {
	display: none;
}

@media (max-width: 1200px) {
	.header__list-boss-row {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: var(--space-16) 0;
		border-top: var(--border-width) solid var(--color-border);
	}

	.header__list-boss-row button {
		text-align: center;
	}
}

/* Строка «город + язык» вверху мобильного выпадающего меню (.header__list) — на
   десктопе город и язык уже есть отдельно в шапке, тут скрываем. */
.header__list-top-row {
	display: none;
}

@media (max-width: 1200px) {
	.header__list-top-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: var(--space-24) 0;
		border-bottom: var(--border-width) solid var(--color-border);
	}

	.header__list-top-row .header__city {
		display: flex;
		margin-right: 0;
	}

	.header__list-top-row .header__city span {
		width: auto;
	}

	.header__list-top-row .header__btn-item--lang {
		position: relative;
	}
}

.header__main-inner {
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	padding: var(--space-20) var(--layout-pad);
	gap: var(--space-20);
}

.header__logo {
	margin-right: 0;
}

.header__logo_img {
	display: block;
	width: 293px;
	max-width: 100%;
	height: 50px;
	object-fit: contain;
}

.header__catalog-btn {
	justify-content: center;
	gap: var(--space-20);
	min-width: 154px;
	height: 54px;
	margin-right: 0;
	padding: 0 var(--space-20);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text-invert);
	background-color: var(--color-surface-dark);
	border: var(--border-width) solid var(--color-surface-dark);
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.header__catalog-btn:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.header .header__catalog-btn-decktop {
	display: none;
}

/* бургер из макета: две белые полосы 36×2, при открытом каталоге складываются в крестик */
.header__catalog-btn-icon {
	position: relative;
	display: none;
	width: 36px;
	height: 14px;
	flex: 0 0 auto;
}

@media (min-width: 1201px) {
	.header__catalog-btn-icon {
		display: block;
	}
}

.header__catalog-btn-icon::before,
.header__catalog-btn-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 36px;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	transition: transform var(--transition), top var(--transition);
}

.header__catalog-btn-icon::before {
	top: 0;
}

.header__catalog-btn-icon::after {
	top: 12px;
}

.header__catalog-btn.active .header__catalog-btn-icon::before {
	top: 6px;
	transform: rotate(45deg);
}

.header__catalog-btn.active .header__catalog-btn-icon::after {
	top: 6px;
	transform: rotate(-45deg);
}

.header__search {
	flex: 1 1 auto;
	height: 54px;
	margin-right: 0;
	background-color: var(--color-surface-muted);
	border: 0;
	border-radius: var(--radius-md);
}

.header__search,
.header__search.active,
.header__search input,
.header__search input.active {
	border-radius: var(--radius-md);
}

.header__search {
	transition: linear 0.3s;
}

.header__search.active {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.header__search-list.active {
	border: none;
}

.header__search-list .header__search-item {
	border: none;
}

.header__search-list .header__search-item:hover a {
	border: none;
	color: var(--color-accent);
	text-decoration: underline;
}


.header__search-item-all .header__search-link {
	color: var(--color-accent);
	display: inline-block;
	color: var(--color-accent);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	vertical-align: middle;
	font-weight: var(--fw-bold);
	font-size: .8rem;
}


.header__search-item-all .header__search-link::after {
	content: '';
	display: inline-block;
	width: 0.8rem;
	height: 0.8rem;
	background: url("../img/redesign/arrow-link-red.svg") no-repeat center / contain;
	vertical-align: middle;
	margin-left: .25rem;
}



.header__search input {
	width: 100%;
	height: 54px;
	padding: 0 50px 0 var(--space-20);
	background-color: transparent;
	border-radius: var(--radius-md);
}

.header__search input::-moz-placeholder,
.header__search input:-ms-input-placeholder,
.header__search input::placeholder {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.header__search button {
	top: 50%;
	right: var(--space-20);
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background-image: url("../img/redesign/icon-search.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

.header__search-list {
	top: 54px;
	border-color: var(--color-border);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.header__btn-list {
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: var(--space-30);
}

.header__btn-item:not(:last-child) {
	margin-right: 0;
}

.header__btn-item button span,
.header__btn-item a span {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

/* Обёртка иконки + бейдж — общая позиция, чтобы бейдж лежал ровно на значке, а не на всей кнопке */
.header__icon-wrap {
	position: relative;
	display: inline-flex;
	margin-bottom: var(--space-10);
}

.header__icon-wrap .header__badge {
	position: absolute;
	top: -5px;
	right: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 1;
	color: #FFFFFF;
	background-color: var(--color-accent);
	border: 2px solid var(--color-surface);
	border-radius: 50%;
}

.header__badge:empty {
	display: none;
}

/* Пополнение избранного — бейдж пульсирует */
@keyframes badgePulse {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.5);
	}

	100% {
		transform: scale(1);
	}
}

.header__badge.js-badge-pulse {
	animation: badgePulse 0.5s ease;
}

/* Иконки «Избранное» и «Корзина» из макета — обе на одной высоте, чтобы подписи были на одном уровне */
.header__btn-item--favorite .header__icon-wrap {
	margin-bottom: var(--space-10);
}

/* Иконка через mask, а не img/background — так её можно перекрашивать через
   background-color на hover (в т.ч. в красный) */
.header__favorite-icon {
	display: block;
	width: 28px;
	height: 26px;
	background-color: var(--color-text);
	mask: url("../img/redesign/icon-favorite-header.svg") no-repeat center / contain;
	-webkit-mask: url("../img/redesign/icon-favorite-header.svg") no-repeat center / contain;
	transition: background-color var(--transition);
}

.header__btn-item--card a svg {
	display: none;
}

/* mask на самом .header__icon-wrap--cart обрезал бейдж (он лежит внутри этого же
   элемента) — переносим иконку на ::before, чтобы бейдж-ребёнок не попадал под маску */
.header__icon-wrap--cart {
	position: relative;
	width: 28px;
	height: 26px;
	overflow: visible;
}

.header__icon-wrap--cart::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-text);
	mask: url("../img/redesign/icon-cart-header.svg") no-repeat center / contain;
	-webkit-mask: url("../img/redesign/icon-cart-header.svg") no-repeat center / contain;
	transition: background-color var(--transition);
}

/* Наведение на «Избранное»/«Корзина»: иконка и подпись — красные, бейдж остаётся красным/белым текстом */
.header__btn-item--favorite:hover .header__favorite-icon,
.header__btn-item--card:hover .header__icon-wrap--cart::before {
	background-color: var(--color-accent);
}

.header__btn-item--favorite:hover span:last-child:not(.header__badge),
.header__btn-item--card:hover span:last-child:not(.header__badge) {
	color: var(--color-accent);
}

/* После переноса бейджа внутрь .header__icon-wrap подпись «Корзина» стала 3-м ребёнком <a> и
   легаси-правило .header__btn-item--card a span:nth-child(3) (main.css/template_styles.css) стало
   красить именно подпись, а не бейдж — специфичность та же, но main.css грузится раньше, поэтому
   явно сбрасываем эту метку здесь. */
.header__btn-item--card button span:nth-child(3),
.header__btn-item--card a span:nth-child(3),
.header__btn-item--favorite button span:nth-child(3) {
	position: static;
	width: auto;
	min-width: 0;
	height: auto;
	padding: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	background-color: transparent;
	border-radius: 0;
}

/* Переключатель языка — кастомная выпадайка вместо нативного <select>
   (open/close по клику через JS, .active на .header__btn-item--lang, см. main.js) */
.header__btn-item--lang {
	position: relative;
}

.header__lang-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 79px;
	height: 54px;
	padding: 0 26px 0 var(--space-10);
	font-family: inherit;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	text-align: center;
	color: var(--color-text);
	background-color: transparent;
	border: var(--border-width) solid var(--color-surface-dark);
	border-radius: var(--radius-md);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23050000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.header__lang-list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 100%;
	margin-top: var(--space-6);
	padding: var(--space-8) 0;
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-text);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.header__btn-item--lang.active .header__lang-list {
	display: block;
}

.header__lang-list a {
	display: block;
	padding: var(--space-6) var(--space-16);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.header__lang-list a:hover {
	color: var(--color-accent);
}

/* Кнопка «Войти» — чёрная 123×54 с белой иконкой профиля */
.header__btn-item--auth a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);
	min-width: 123px;
	height: 54px;
	padding: 0 var(--space-20);
	background-color: var(--color-surface-dark);
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.header__btn-item--auth a:hover {
	background-color: var(--color-accent);
}

.header__btn-item--auth a,
.header__btn-item--auth a:hover,
.header__btn-item--auth a:hover span,
.header__btn-item--account a,
.header__btn-item--account a:hover,
.header__btn-item--account a:hover span {
	text-decoration: none;
}

.header__btn-item--auth a svg {
	display: none;
}

.header__btn-item--auth a::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 24px;
	background: url("../img/redesign/icon-profile.svg") no-repeat center / contain;
}

.header__btn-item--auth a span {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text-invert);
}

/* Подпись кнопки приходит из /auth/index.php вне шаблона — подменяем на «Вход» */
.header__btn-item--guest a span {
	font-size: 0;
}

.header__btn-item--guest a span::after {
	content: 'Вход';
	font-size: var(--fs-md);
}

@media (max-width: 1200px) {
	.header__main-inner {
		padding: 0;
		gap: 0;
	}

	/* На мобиле в header__top-inner не остаётся видимого контента (город/меню/контакты
	   скрыты отдельно) — убираем пустую полосу над шапкой, которая давала лишний отступ. */
	.header__top {
		border-bottom: 0;
	}



	.header__top-inner {
		min-height: 0;
		padding: 0;
	}

	/* Каталог теперь открывается через нижний таб-бар — кнопку в шапке на мобиле прячем */
	.header__catalog-btn {
		display: none;
	}

	/* На мобильной версии кнопки шапки живут в отдельной панели */
	.header__btn-list {
		display: none;
	}
}

/* Переключатель языка — на мобиле переехал внутрь бургер-меню (см. components/bitrix/menu/top),
   на десктопе там уже есть свой (header__btn-item--lang), второй не нужен. */
.header__item--lang-mobile {
	display: none;
}

@media (max-width: 1200px) {
	.header__item--lang-mobile {
		display: block;
		margin-top: auto;
		padding-top: var(--space-20);
	}

	.header__item--lang-mobile select {
		width: 100%;
		padding: var(--space-10);
		font-size: var(--fs-md);
		color: var(--color-text);
		background-color: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-sm);
	}
}

@media (max-width: 1200px) {
	.header__mobile-top-inner {
		align-items: stretch;
		justify-content: space-between;
		height: 68px;
		padding: 0;
		border-bottom: var(--border-width) solid var(--color-border);
	}

	.header__logo {
		margin-left: 1rem;
	}

	.header__list {
		top: 107px;
		/* main.css ставит height:100vh при этом же top-отступе — низ блока
		   уезжает за экран, и до последних пунктов (в т.ч. «Написать
		   директору») нельзя доскроллить. Высота = вьюпорт минус отступ сверху. */
		height: calc(100vh - 107px - var(--mobile-bar-height, 68px) - var(--cookie-banner-height, 0px));
		padding-bottom: var(--space-20) !important;
	}

	.header__logo {
		display: flex;
		align-items: center;
	}

	.header__logo_img {
		width: 176px;
		height: 30px;
	}

	.header__mobile-buttons {
		align-items: stretch;
		height: 100%;
	}

	.header__mobile-buttons button,
	.header__mobile-buttons a {
		margin-left: 0;
	}

	.header__mobile-links {
		height: 100%;
	}

	.header__mobile-link-phone,
	.header__mobile-btn-search {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 100%;
		color: var(--color-text);
		background-color: var(--color-surface);
		border-left: var(--border-width) solid var(--color-border);
		border-right: var(--border-width) solid var(--color-border);
	}

	.header__mobile-link-phone svg,
	.header__mobile-btn-search svg {
		color: inherit;
	}

	.header__mobile-link-phone {
		color: var(--color-accent);
		/* fill: var(--color-accent); */
		/* stroke: var(--color-accent); */
	}

	.header__mobile-btn-search {
		border-left: 0;
	}

	.header__mobile-links a:last-child {
		margin-right: 0;
	}
	
	.header__mobile-links a:last-child svg {
			overflow: visible;
	}

	/* Бургер по макету — 3 полосы 30×2, превращаются в крестик анимацией
	   transform (не подменой картинки), поэтому иконка не "исчезает" на переходе */
	.header__mobile-btn-burger {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 100%;
		background-color: var(--color-surface-muted);
		background-image: none;
		border-right: var(--border-width) solid var(--color-border);
	}

	.header__mobile-btn-burger-line {
		position: absolute;
		left: 50%;
		width: 30px;
		height: 2px;
		margin-left: -15px;
		background-color: var(--color-text);
		transition: transform var(--transition), opacity var(--transition), top var(--transition);
	}

	.header__mobile-btn-burger-line:nth-child(1) {
		top: 24px;
	}

	.header__mobile-btn-burger-line:nth-child(2) {
		top: 33px;
	}

	.header__mobile-btn-burger-line:nth-child(3) {
		top: 42px;
	}

	.header__mobile-btn-burger.active .header__mobile-btn-burger-line:nth-child(1) {
		top: 33px;
		transform: rotate(45deg);
	}

	.header__mobile-btn-burger.active .header__mobile-btn-burger-line:nth-child(2) {
		opacity: 0;
	}

	.header__mobile-btn-burger.active .header__mobile-btn-burger-line:nth-child(3) {
		top: 33px;
		transform: rotate(-45deg);
	}

	/* main.css переключает иконку через background-image + меняет размер бокса
	   в .active — блокируем, у нас теперь анимация через span-полосы */
	.header__mobile-btn-burger.active {
		width: 60px;
		height: 100%;
		background-position: center;
		background-image: none;
	}

	/* Поиск по кнопке в шапке — полноширинная панель с крестиком, а не
	   маленький инпут-подсказка. Поле занимает всю панель (размер как у шапки
	   над ней), кроме зоны крестика справа — без своего скругления. */
	.header__search.mobileActive {
		display: flex;
		align-items: center;
		position: fixed;
		top: 69px;
		left: 0;
		right: 0;
		width: 100%;
		height: 68px;
		margin: 0;
		padding: 0;
		background-color: var(--color-surface);
		border-bottom: var(--border-width) solid var(--color-border);
		border-radius: 0;
		box-shadow: var(--shadow-md);
		z-index: 120;
	}

	.header__search.mobileActive input {
		width: 100%;
		height: 68px;
		padding: 0 70px 0 var(--layout-pad);
		background-color: var(--color-surface);
		border-radius: 0;
	}

	.header__search-mobile-close {
		display: none;
	}

	.header__search.mobileActive .header__search-mobile-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 68px;
		background-color: var(--color-surface);
		background-image: url("../img/redesign/icon-close.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 20px;
		border: 0;
		border-left: var(--border-width) solid var(--color-border);
		margin-top: 0;
	}

	.header__search.mobileActive .header__search-mobile-close {
		border-bottom: var(--border-width) solid var(--color-border);
	}


	.header__search.mobileActive .js_search-input {
		border-bottom: var(--border-width) solid var(--color-border);
	}

	.header__search.mobileActive .header__search-item-all {
		margin: 0 -16px;
		padding: 0 20px;
	}

	.header__search.mobileActive .header__search-list {
		position: fixed;
		top: 137px;
		left: 0;
		right: 0;
		width: 100%;
		max-height: calc(100vh - 137px);
		overflow-y: auto;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
}


/* Нижний таб-бар (мобилка) — порядок из макета: Главная, Каталог, Корзина, Избранное, Профиль.
   Разметка приходит из /include/slidebar.php (вне шаблона), поэтому меняем порядок через flex order. */
.popup-header-mobile-bottom-bar__bottom>a[href="/"] {
	order: 1;
}

.popup-header-mobile-bottom-bar__bottom>a[href="/katalog/"] {
	order: 2;
}

.popup-header-mobile-bottom-bar__bottom>div[id^="bx_basket"] {
	order: 3;
}

.popup-header-mobile-bottom-bar__bottom>a.slidebar__item {
	order: 4;
}

.popup-header-mobile-bottom-bar__bottom>a:not([href="/"]):not([href="/katalog/"]):not(.slidebar__item) {
	order: 5;
}


/* Полный редизайн нижнего таб-бара по макету 230:1215: 5 равных колонок на всю ширину,
   иконка 20px + подпись 12px, активный раздел (по текущему URL, см. main.js) — красный. */
.popup-header-mobile-bottom-bar__bottom {
	justify-content: stretch;
	-moz-column-gap: 0;
	column-gap: 0;
	padding: 0.25rem;
	background-color: var(--color-surface);
	box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.06), 0 0 6px rgba(0, 0, 0, 0.1);
}

.popup-header-mobile-bottom-bar__bottom>a,
.popup-header-mobile-bottom-bar__bottom>div[id^="bx_basket"] {
	position: relative;
	flex: 1 1 20%;
	height: 100%;
	justify-content: flex-start;
	padding-top: 10px;
	gap: 10px;
	color: var(--color-text);
	transition: color var(--transition);
}

.popup-header-mobile-bottom-bar__bottom>a:hover,
.popup-header-mobile-bottom-bar__bottom>div[id^="bx_basket"]:hover {
	color: var(--color-accent);
}

.popup-header-mobile-bottom-bar__bottom>div[id^="bx_basket"]>a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	/*! padding-top: 10px; */
	gap: 10px;
	width: 100%;
	height: 100%;
	color: inherit;
	position: relative;
}

.popup-header-mobile-bottom-bar__bottom svg {
	width: 20px;
	height: 20px;
	margin-bottom: 0;
	color: inherit;
}

.popup-header-mobile-bottom-bar__bottom span:not(.slidebar__cart-num) {
	font-size: 12px;
	font-weight: 500;
	color: inherit;
}

.popup-header-mobile-bottom-bar__bottom>a.active,
.popup-header-mobile-bottom-bar__bottom>div[id^="bx_basket"].active {
	color: var(--color-accent);
}

.popup-header-mobile-bottom-bar .bx-basket-block .slidebar__cart-num{
	top: -4px;
	text-align: center;
	padding: 0 !important;
}

/* Бейдж счётчика — круглый, лежит на верхнем правом углу иконки
   по макету 472:20829 (иконка 20пр в центре колонки: смещение бейджа от центра
   вправо на половину ширины иконки минус небольшой нахлёст). */
.popup-header-mobile-bottom-bar .slidebar__cart-num {
	position: absolute;
	top: 6px;
	left: 50%;
	margin-left: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	padding: 0;
	font-size: 9px;
	line-height: 1;
	color: var(--color-text-invert);
	background-color: var(--color-accent);
	border: 2px solid var(--color-surface);
	border-radius: 50%;
	text-align: center;
}

/* Всегда sticky внизу экрана, без скрытия по скроллу (main.js всё ещё тогглит .active,
   но он теперь ни на что не влияет) — и отступ снизу страницы на высоту бара,
   чтобы футер не перекрывался им. */
@media (max-width: 1200px) {
	.popup-header-mobile-bottom-bar {
		transform: translateY(0) !important;
	}

	body {
		padding-bottom: calc(var(--mobile-bar-height, 68px) + var(--cookie-banner-height, 0px));
	}
}

/* Липкая панель "Цена + Купить" на карточке товара (мобилка) — этот блок НЕ вложен
   в фиксированный .popup-header-mobile-bottom-bar (несмотря на общий класс __top для
   визуала), это отдельный элемент внутри карточки товара, поэтому позиционируем сами:
   докуем над нижним таб-баром. Показ/скрытие — см. main.js (скролл мимо блока покупки). */
@media (max-width: 1200px) {
	.product-item-detail-short-card-fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--mobile-bar-height, 68px) + var(--cookie-banner-height, 0px));
		z-index: 150;
		box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.06), 0 0 6px rgba(0, 0, 0, 0.1);
	}
}

/* Это мобильный виджет (main.css включает .active без учёта ширины экрана) — на ПК прячем */
@media (min-width: 1201px) {
	.product-item-detail-short-card-fixed.active {
		display: none !important;
	}
}

.section-divider {
	height: var(--border-width);
	margin: 0;
	border: 0;
	background-color: var(--color-border);
}

/* --- Подвал ------------------------------------------------------------- */
.footer {
	background-color: var(--color-surface-dark);
	color: var(--color-text-invert);
}

.footer__main {
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	padding: 80px var(--layout-pad) 60px;
	gap: var(--space-30);
	border-bottom: 0;
}

.footer__logo {
	margin-bottom: var(--space-20);
}

.footer__logo img {
	display: block;
	width: 293px;
	max-width: 100%;
	height: 50px;
	object-fit: contain;
}

.footer__logo-box {
	margin-right: var(--space-30);
}

.footer__list {
	margin-top: 0;
}

.footer__item:not(:last-child) {
	margin-bottom: var(--space-14);
}

/* Разделители между аккордеон-секциями подвала на мобилке — убираем, остаётся только нижняя полоса копирайта */
.footer__list:not(:last-child) {
	border-bottom: 0;
}

.footer__item span {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-loose);
	text-transform: uppercase;
	color: var(--color-text-invert);
}

.footer__item a {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-loose);
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.footer__item a:hover {
	color: var(--color-text-invert);
}

.footer__item--tel a {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text-invert);
	opacity: 1;
}

.footer__item-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 var(--space-24);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	text-transform: none;
	text-decoration: none;
	color: var(--color-text-invert);
	background-color: var(--color-accent);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--transition);
}

.footer__item-title:hover {
	background-color: var(--color-accent-hover);
}

/* Пункты категорий в колонке «Продукция» — плотнее по вертикали, чем обычные пункты подвала */
.footer__item.js_footer_list_4_item:not(:last-child) {
	margin-bottom: var(--space-8);
}

.footer__bottom {
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	padding: var(--space-30) var(--layout-pad);
	border-top: var(--border-width) solid var(--color-border-on-dark);
}

.footer__bottom span {
	font-family: var(--font-base);
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--color-text-invert);
}

.footer__bottom a {
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	line-height: var(--lh-loose);
	text-decoration: underline;
}

@media (max-width: 780px) {
	.footer__main {
		padding: 40px var(--layout-pad) 30px;
	}

	.footer__logo img {
		width: 200px;
		height: 34px;
	}

	/* Списки в мобильном футере по умолчанию развёрнуты (main.js ставит .opened при
	   загрузке), но клик по заголовку всё ещё сворачивает их (template_styles.css) —
	   тут только плотность отступов. */
	.footer__list>.footer__item:first-child {
		padding-bottom: var(--space-10);
	}

	.footer__item:not(:last-child) {
		margin-bottom: var(--space-10);
	}

	/* Промежуток между колонками подвала (лого/продукция/о компании/контакты и т.п.) */
	.footer__main {
		gap: var(--space-20);
	}

	/* main.css: .footer__item.active{margin-bottom:15px} — у заголовка (title
	   всегда несёт класс .active в разметке) отступ снизу не нужен, расстояние
	   до пунктов уже задаёт padding-bottom выше. */
	.footer__item.js_footer_list_title.active {
		margin-bottom: 1rem !important;
	}
}

/* --- Шапка секции ------------------------------------------------------- */
.section-head {
	display: flex;
	align-items: center;
	gap: var(--space-30);
	margin-bottom: var(--space-30);
}

.section-head__title {
	margin: 0;
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-text);
}

.section-head__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-loose);
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 3px dotted var(--color-accent);
	padding-bottom: 4px;
	color: var(--color-accent);
	width: auto;
}

.section-head__link::after {
	content: '';
	width: 16px;
	height: 16px;
	background: url("../img/redesign/arrow-link-red.svg") no-repeat center / contain;
}

.section-head__link:hover {
	color: var(--color-accent-hover);
	border-bottom-color: var(--color-accent-hover);
}

/* Стрелки слайдера в шапке */
.section-head__nav {
	display: flex;
	gap: var(--space-12);
	margin-left: auto;
}

.section-head__arrow {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background-color: var(--color-surface-dark);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	border-radius: var(--radius-md);
	transition: opacity var(--transition);
}

/* В arrow-slider-next-white.svg стрелка нарисована влево — для «вперёд» отражаем. */
.section-head__arrow--prev {
	background-image: url("../img/redesign/arrow-slider-next-white.svg");
}

.section-head__arrow--next {
	background-image: url("../img/redesign/arrow-slider-next-white.svg");
	transform: scaleX(-1);
}

.section-head__arrow:hover {
	opacity: 0.85;
}

.section-head__arrow.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

@media (max-width: 760px) {
	.section-head {
		flex-wrap: wrap;
		gap: var(--space-12);
		margin-bottom: var(--space-20);
	}

	.section-head__title {
		font-size: var(--fs-2xl);
	}

	.section-head__link {
		font-size: var(--fs-sm);
	}
}

/* --- Кнопки ------------------------------------------------------------- */
.btn-redesign {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	padding: var(--space-20) var(--space-24);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-align: center;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn-redesign--accent {
	color: var(--color-text-invert);
	background-color: var(--color-accent);
}

.btn-redesign--accent:hover {
	background-color: var(--color-accent-hover);
}

.btn-redesign--dark {
	color: var(--color-text-invert);
	background-color: var(--color-surface-dark);
}

.btn-redesign--dark:hover {
	background-color: var(--color-accent);
}

.btn-redesign--outline {
	color: var(--color-text);
	background-color: transparent;
	border-color: var(--color-surface-dark);
}

.btn-redesign--outline:hover {
	color: var(--color-text-invert);
	background-color: var(--color-surface-dark);
	border-color: var(--color-surface-dark);
}

/* --- Плавающая панель «быстрой покупки» на карточке товара --------------- */
/* Убрана полностью по просьбе пользователя — оставлена в DOM (на неё
   ссылается main.js), просто скрыта */
.header-quick-bye {
	display: none !important;
}

/* --- Карточка товара ---------------------------------------------------- */
.product-card {
	max-width: none;
	height: auto;
	min-height: 468px;
	padding: var(--space-20);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.product-card:hover {
	border-color: var(--color-accent);
}

.product-card__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 230px;
	margin: 0 0 var(--space-16);
	overflow: hidden;
	border-radius: var(--radius-xl);
	background-color: var(--color-surface);
}

.product-card__img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.product-card__name {
	margin: 0 0 var(--space-16);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	color: var(--color-text);
	/* обрезка длинного названия — раньше делалась на бэке через TruncateText */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(2em * var(--lh-normal));
}

.product-card__stock {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	line-height: 1.1;
	color: var(--color-text);
}

.product-card__stock::before {
	content: '';
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background-color: var(--color-success);
	border-radius: var(--radius-round);
}

.product-card__stock--out::before {
	background-color: var(--color-border-strong);
}

.product-card__price {
	display: block;
	margin: var(--space-30) 0 var(--space-30);
	font-size: var(--fs-xl);
	line-height: var(--lh-normal);
}

.product-card__price span:nth-child(1) {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
}

.product-card__bottom {
	flex-wrap: wrap;
	gap: var(--space-10);
	margin-top: auto;
}

/* строка «В корзину» + избранное */
/* .product-card__bottom .product-item-button-cont { flex-direction:column }
   в style.css компонента ломало ряд на 2 строки — специфичность выше нашего
   правила, поэтому переопределяем тем же селектором. */
.product-card__bottom .product-item-button-cont {
	order: 1;
	display: flex;
	flex-direction: row;
	gap: var(--space-10);
	width: 100%;
	margin-right: 0;
}

.product-card__card {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 50px;
	margin: 0;
	padding: 0 var(--space-16);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--color-text-invert);
	background-color: var(--color-surface-dark);
	background-image: none;
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.product-card__card:hover {
	background-color: var(--color-accent);
}

.product-item-button-cont .product-card__favorite,
.product-card__favorite {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	margin: 0;
	margin-left: 0;
	padding: 0;
	border: 0;
	background-color: var(--color-surface-muted);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 20px;
	background-image: url("../img/redesign/icon-heart-outline.svg");
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.product-item-button-cont .product-card__favorite.active,
.product-card__favorite.active {
	background-image: url("../img/redesign/icon-heart-filled.svg");
}

.product-card__favorite:hover {
	background-color: var(--color-surface-alt);
}

/* Кнопка «В избранное» на карточке товара (страница товара) — была звезда,
   меняем на такое же сердце, как в шапке и на карточке в каталоге */
.product-main__save-btn p::after {
	width: 20px;
	height: 20px;
	background-image: url("../img/redesign/icon-heart-outline.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

.product-main__save-btn.active p::after {
	background-image: url("../img/redesign/icon-heart-filled.svg");
}

/* строка «Купить в 1 клик» */
.product-item-button-container {
	order: 2;
	width: 100%;
}

.product-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 var(--space-16);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--color-text);
	background-color: transparent;
	border: var(--border-width) solid var(--color-surface-dark);
	border-radius: var(--radius-md);
	transition: background-color var(--transition), color var(--transition);
}

.product-card__btn:hover {
	color: var(--color-text-invert);
	background-color: var(--color-surface-dark);
}

/* --- Карточки в слайдерах "С этим товаром покупают"/"Сопутствующие товары":
   для товаров без торговых предложений кнопка "Купить в 1 клик" в разметке
   всегда идёт с inline style="display:none" — включаем её здесь, чтобы
   карточка выглядела как в каталоге (наличие / В корзину+сердечко / купить
   в 1 клик) -------------------------------------------------------------- */
.js-section__needToPurchase .product-card__btn {
	display: flex !important;
}

/* стрелки слайдера "С этим товаром покупают" и вкладки «Видео» — чёрная
   круглая кнопка, белая стрелка (были прозрачным фоном + тёмной стрелкой) */
.section__related__btns .accessories-slider__button-prev,
.section__related__btns .accessories-slider__button-next,
.product-video__nav .accessories-slider__button-prev,
.product-video__nav .accessories-slider__button-next {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-text);
	background-image: none !important;
	border-radius: var(--radius-round);
}

.section__related__btns .accessories-slider__button-prev::after,
.section__related__btns .accessories-slider__button-next::after,
.product-video__nav .accessories-slider__button-prev::after,
.product-video__nav .accessories-slider__button-next::after {
	content: "";
	width: 16px;
	height: 16px;
	background: no-repeat center / contain url("../img/redesign/arrow-tile-white.svg");
}

.section__related__btns .accessories-slider__button-prev::after,
.product-video__nav .accessories-slider__button-prev::after {
	transform: rotate(180deg);
}

/* --- Карточка товара: "Получить оптовые цены" / "Условия доставки" /
   "Проблема с товаром?" собраны в единый столбец под ценой-и-корзиной,
   по макету (236:4317) — три одинаковые серые строки с иконкой ------------ */

/* Три колонки (галерея / характеристики / цена-корзина) должны идти
   впритык через gap, а не растягиваться на всю ширину через space-between —
   иначе между колонками характеристик и покупки образуется пустой разрыв */
.product-main__content-bottom {
	justify-content: flex-start;
	gap: var(--space-30);
}

.product-main__content-bottom-left {
	max-width: 700px;
	flex: 1 1 auto;
}

.product-main__content-wrapper-table {
	max-width: 100%;
}

.product-main__content-bottom-right {
	max-width: 385px;
	flex-shrink: 0;
}

/* Вся карточка товара лежит в ОДНОМ grid-родителе .product-detail-layout:
   галерея (.product-item-detail-slider-container), характеристики
   (.product-main__content), блок покупки (.product-detail-layout__sidebar)
   и вкладки описания (.product-description) — прямые дети, без промежуточных
   обёрток (см. main.js, блоки переносятся туда через DOM). Раскладка на каждом
   разрешении задаётся только grid-template-areas, поэтому порядок блоков
   меняется без правок вёрстки. Ширина ограничена так же, как раньше был
   ограничен .product-main, иначе сайдбар вылезает за пределы контейнера сайта. */
.product-detail-layout {
	display: grid;
	align-items: start;
	gap: var(--space-30);
	max-width: var(--layout-max);
	margin: 0 auto var(--space-50);
	padding: 0 10px;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"gallery"
		"content"
		"sidebar"
		"description";
}

/* опустевшая секция остаётся в DOM (на неё может быть завязан сторонний код) */
.product-detail-layout > .product-main {
	display: none;
}

.product-detail-layout__gallery {
	grid-area: gallery;
	min-width: 0;
	margin-right: 0;
}

.product-detail-layout__content {
	grid-area: content;
	min-width: 0;
	width: 100%;
}

.product-detail-layout__sidebar.product-main__content-bottom-right {
	grid-area: sidebar;
	min-width: 0;
	width: 100%;
	max-width: 385px;
}

.product-detail-layout .product-description {
	grid-area: description;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* блок покупки больше не сосед характеристик — колонка занимает всю ширину */
.product-detail-layout__content .product-main__content-bottom {
	display: block;
}

.product-detail-layout__content .product-main__content-bottom-left {
	max-width: none;
	width: 100%;
	margin-right: 0;
}

/* Планшет (760–919px): галерея во всю ширину — рядом с ней блок покупки
   уже не помещается (460 + 385 + отступы), поэтому он встаёт справа от
   характеристик */
@media (min-width: 760px) and (max-width: 919px) {
	.product-detail-layout {
		grid-template-columns: minmax(0, 1fr) 385px;
		grid-template-areas:
			"gallery gallery"
			"content sidebar"
			"description description";
	}
}

/* Планшет/ноутбук (920–1399px): блок покупки — колонкой справа на всю высоту,
   слева друг под другом галерея и характеристики (третья колонка появляется
   только с 1400px, где хватает ширины на все три) */
@media (min-width: 920px) and (max-width: 1399px) {
	.product-detail-layout {
		grid-template-columns: minmax(0, 1fr) 385px;
		grid-template-areas:
			"gallery sidebar"
			"content sidebar"
			"description description";
	}
}

/* Десктоп: галерея | характеристики | блок покупки,
   вкладки описания — под первыми двумя колонками */
@media (min-width: 1400px) {
	.product-detail-layout {
		grid-template-columns: minmax(0, 460px) minmax(0, 1fr) 385px;
		grid-template-areas:
			"gallery content sidebar"
			"description description sidebar";
	}
}

/* Картинка товара — обычная статичная страница, без "прилипания" галереи к скроллу */
.product-main__sliders {
	position: static !important;
	top: auto !important;
}

/* На мобиле и планшете галерея — карточка с рамкой вокруг фото+миниатюр (макет 418:18766) */
@media (max-width: 1399px) {
	.product-main__sliders {
		padding: var(--space-14);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-xl);
	}
}

/* Название товара: в старой вёрстке до 1200px h1 прятался, а вместо него
   показывался .product-main__mobile-title, которого в этом шаблоне нет, —
   на средних разрешениях страница оставалась вообще без заголовка */
@media (min-width: 760px) and (max-width: 1200px) {
	.product-main__content-top h1 {
		display: block;
	}
}

.product-main__content-top h1 {
	width: auto;
	max-width: 100%;
}

/* "Доступные цвета" — жирным (как остальные заголовки блоков карточки товара) */
.product-item-detail-info-container-title {
	font-weight: var(--fw-bold);
}

/* Заголовок "Характеристики" + ссылка "Все характеристики" над таблицей */
.product-main__table-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-16);
	margin-bottom: var(--space-14);
}

.product-main__table-heading h4 {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.product-main__table-all-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
	/* на узкой колонке (планшет) ссылка переносится целиком, а не по словам
	   поверх заголовка */
	white-space: nowrap;
}

.product-main__table-all-link::after {
	content: '';
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: var(--color-accent);
	-webkit-mask: url("../img/redesign/arrow-link-red.svg") no-repeat center / contain;
	mask: url("../img/redesign/arrow-link-red.svg") no-repeat center / contain;
}

.product-main__content-wrapper-table-row {
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-6) !important;
	border-bottom: 1px solid var(--color-border);
}

.product-main__content-wrapper-table-row:last-child {
	border-bottom: none;
}

/* Характеристики: название и значение выравниваются по левому краю,
   между ними — крупный просвет; на широком контенте таблица сама
   раскладывается в две колонки (auto-fit) */
.product-main__content-wrapper-table.product-item-detail-properties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	-moz-column-gap: var(--space-50);
	column-gap: var(--space-50);
	max-width: none;
}

.product-main__content-wrapper-table-row {
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
	gap: var(--space-24);
	align-items: baseline;
	justify-content: start;
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
	overflow-wrap: anywhere;
}

.product-main__content-wrapper-table .product-main__content-wrapper-table-row dt {
	max-width: none;
	width: auto;
	margin-right: 0;
	text-align: left;
}

.product-main__content-wrapper-table .product-main__content-wrapper-table-row dd {
	margin: 0;
	text-align: right;
}

/* "Подробнее о скидке" — по макету красная подчёркнутая ссылка, не серо-синяя */
.product-main__login-sale-link {
	color: var(--color-accent);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
}

/* Свотч выбранного цвета — по макету обводка красная, а не серая */
.product-main__content-wrapper-offer dd.active {
	border-color: var(--color-accent) !important;
	outline-color: var(--color-accent) !important;
}

.product-main__utility-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-top: var(--space-12);
}

.product-main__utility-link {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	width: 100%;
	min-height: 60px;
	padding: var(--space-10) var(--space-20);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-xl);
	text-align: left;
}

.product-main__utility-link img {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.product-main__utility-link span {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 0.3rem;
}

/* "Способы получения заказа" — блок убран по просьбе (оставлен в DOM, на
   него ссылается main.js) */
.product-main__pick-up {
	display: none;
}

/* В component-level style.css уже был свой шеврон (:before) — оставляем
   только наш ::after справа, второй не нужен */
.product-main__pick-up h3:before,
.product-main__pick-up.opened h3:before {
	content: none;
}

.product-main__pick-up__toggler {
	display: flex;
	align-items: center;
	min-height: 40px;
	margin-bottom: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.product-main__pick-up__toggler::after {
	content: "";
	width: 16px;
	height: 16px;
	margin-left: auto;
	background: no-repeat center / contain url("../img/redesign/arrow-tile-black.svg");
	transform: rotate(90deg);
	transition: transform var(--transition);
}

.js-product-main__pick-up.opened .product-main__pick-up__toggler::after {
	transform: rotate(-90deg);
}

.product-main__pick-up-list {
	display: none;
	position: absolute;
	top: calc(100% + var(--space-6));
	left: 0;
	right: 0;
	z-index: 20;
	padding: var(--space-20);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.js-product-main__pick-up.opened .product-main__pick-up-list {
	display: block;
}

/* --- Блок "В наличии/цена/корзина" (.product-main__adding) — по макету --- */
/* Родной bitrix-элемент со статусом наличия (data-entity=availability_positive)
   оставлен в DOM — нативный JS каталога от него зависит (иначе падает с ошибкой
   и ломает кнопки корзины/избранного), просто визуально скрыт: у нас свой
   индикатор .product-main__availability. */
.product-main__content-wrapper-2 {
	display: none !important;
}

.product-main__adding {
	display: flex;
	flex-direction: column;
	padding: var(--space-24);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
}

.product-main__availability {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	margin-bottom: var(--space-12);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	text-align: left;
}

.product-main__availability::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-round);
	background-color: var(--color-success);
}

.product-main__availability--out-of-stock::before {
	background-color: var(--color-border-strong);
}

.product-main__price-row {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	margin-bottom: var(--space-12) !important;
}

.product-main__price-col {
	flex: 1 1 auto;
	min-width: 0;
}

.product-main__prices-box {
	margin-bottom: 0 !important;
}

.product-main__prices-box .price-measure {
	font-size: inherit;
}

.product-main__prices-box span:nth-child(1) {
	font-size: var(--fs-3xl) !important;
}

.product-main__save-btn {
	flex-shrink: 0;
	width: 64px !important;
	height: 64px;
	max-width: none !important;
	margin-top: 0 !important;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-surface-muted);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-lg);
	transition: border-color var(--transition);
}

.product-main__save-btn:hover {
	border-color: var(--color-accent);
}

.product-main__save-btn p {
	margin: 0;
}

.product-main__save-btn p::after {
	margin-left: 0;
	width: 24px;
	height: 24px;
}

.product-main__buy-row {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	margin-bottom: var(--space-16) !important;
}

.product-main__quantity {
	margin-right: 0 !important;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.product-main__quantity .sign {
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: none !important;
	font-size: var(--fs-2xl) !important;
	font-weight: var(--fw-bold) !important;
	background-color: transparent;
}

.product-main__quantity input {
	width: 44px !important;
	height: 44px !important;
	text-align: center;
	background-color: transparent !important;
	font-size: var(--fs-lg) !important;
	font-weight: var(--fw-bold) !important;
}

.product-main__buy-row [data-entity="quantity-block"],
.product-main__buy-row>div:last-child {
	flex: 1;
}

.product-main__btn-basket,
.product-main__btn-buy-now {
	display: block;
	padding: var(--space-16);
	text-align: center;
	border-radius: var(--radius-lg);
	font-size: var(--fs-md);
	line-height: 120%;
}

.product-main__btn-basket {
	flex: 1;
	background-color: var(--color-text);
	color: var(--color-text-invert);
	margin-bottom: 0 !important;
	transition: background-color var(--transition);
}

.product-main__btn-basket:hover {
	background-color: var(--color-accent);
}

.product-main__btn-buy-now {
	width: 100%;
	background-color: transparent;
	color: var(--color-text);
	border: var(--border-width) solid var(--color-text);
	transition: background-color var(--transition), color var(--transition);
}

.product-main__btn-buy-now:hover {
	background-color: var(--color-text);
	color: var(--color-text-invert);
}

.product-main__btn-buy-now--disabled,
.product-main__btn-buy-now--disabled:hover {
	color: var(--color-text-muted);
	background-color: transparent;
	border-color: var(--color-border);
	pointer-events: none;
	cursor: default;
}

/* "Сообщить о поступлении" — как "Купить в 1 клик", с отступом от кнопок выше */
.product-main__btn-subscribe {
	display: block;
	width: 100%;
	margin-top: var(--space-16);
	padding: var(--space-16);
	text-align: center;
	font-size: var(--fs-md);
	line-height: 120%;
	color: var(--color-text);
	background-color: transparent;
	border: var(--border-width) solid var(--color-text);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.product-main__btn-subscribe:hover {
	background-color: var(--color-text);
	color: var(--color-text-invert);
}

/* --- Слайдер товара: выбранная миниатюра — красная рамка, стрелки —
   чёрные круглые кнопки с белой стрелкой, по макету ------------------ */
/* outline вместо border: рисуется поверх содержимого и внутрь габаритов
   слайда, поэтому не срезается overflow-ом swiper-а у крайних миниатюр */
.product-main__slider-little .swiper-slide-thumb-active {
	border: none !important;
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.product-main__slider-little-button-prev,
.product-main__slider-little-button-next {
	width: 40px;
	height: 40px;
	background-color: var(--color-text);
	background-image: url("../img/redesign/arrow-tile-white.svg") !important;
	background-size: 14px 14px !important;
	background-position: center !important;
	border-radius: var(--radius-md);
	transform: rotate(180deg);
	position: static;
	flex-shrink: 0;
	order: 1;
	cursor: pointer;
}

.product-main__slider-little-button-next {
	transform: none;
	order: 3;
}

.product-main__slider-little-button-prev.swiper-button-disabled,
.product-main__slider-little-button-next.swiper-button-disabled {
	background-color: var(--color-surface-alt);
	opacity: 0.5;
	cursor: default;
}

/* Стрелки — по краям, миниатюры (макс. 3) — по центру между ними с
   равными промежутками, всё по вертикальному центру */
/* Контейнер галереи был уже, чем строка миниатюр+стрелки (40+16+325+16+40=437px
   при max-width:374px) — из-за этого стрелки/миниатюры вылезали на соседний
   информационный блок. Увеличиваем контейнер, чтобы всё помещалось. */
.product-main__sliders {
	max-width: 460px !important;
}

.product-main__slider-big .swiper-slide {
	width: 460px !important;
	height: 460px !important;
}

.product-item-detail-slider-image{
	border: none;
}

/* Фото занимало фиксированные 373×373 внутри квадратного блока галереи —
   справа и снизу от него оставалась пустая полоса (до 540px это уже
   исправлено в style.css компонента, здесь — для остальных разрешений) */
.product-item-detail-slider-container:not(.popup) .product-item-detail-slider-images-container {
	width: 100%;
	height: 100%;
}

.slider-controls__wrapper {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding-bottom: 2px !important;
}

.product-main__slider-little .swiper-slide{
	border: none;
}

.product-main__slider-little .swiper-slide.active {
	border: none;
	padding: 0;
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.product-main__slider-little {
	order: 2;
	flex: 0 0 325px;
	width: 325px;
	max-width: 325px;
	/*! overflow: hidden; */
}

/* На средних разрешениях галерея в рамке-карточке уже, чем 40+325+40 со
   стрелками, — ряд миниатюр тянется по свободному месту, а не фиксирован */
@media (min-width: 760px) and (max-width: 1399px) {
	.product-main__slider-little {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		min-width: 0;
		padding-bottom: 0.1rem;
	}
}

/* safe center: пока миниатюр мало — они по центру, как только их ряд шире
   контейнера, выравнивание падает на start, иначе центрирование срезало бы
   крайние миниатюры (и их рамку) с обеих сторон */
.product-main__slider-little .swiper-wrapper {
	justify-content: safe center;
}

.product-main__slider-little .swiper-slide {
	aspect-ratio: 1 / 1;
	padding: 0;
}

.product-main__slider-little .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Тонкий красный скроллбар под миниатюрами. Swiper сам вешает
   .swiper-scrollbar-lock (display:none), когда все миниатюры влезают,
   поэтому полоса появляется только при количестве фото больше трёх. */
.product-main__slider-little {
	padding-bottom: var(--space-20);
}

.product-main__slider-little .product-main__slider-little-scrollbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

.product-main__slider-little .product-main__slider-little-scrollbar .swiper-scrollbar-drag {
	background-color: var(--color-accent);
	border-radius: var(--radius-md);
}

/* --- Полноэкранная галерея товара (лайтбокс) ------------------------ */
/* Оверлей темнее и карточка по центру экрана: стрелки позиционируются от
   оверлея, поэтому только при центрированной карточке top:50% попадает
   ровно в центр изображения. safe — чтобы на низких экранах верх карточки
   не уезжал за границу вьюпорта. */
.popup-product-gallery {
	align-items: safe center;
	background: rgba(5, 0, 0, 0.65);
	/* симметричные отступы: стрелки позиционируются от padding-box оверлея,
	   при разных top/bottom их top:50% не совпадал бы с центром карточки */
	padding: var(--space-30) var(--space-10);
}

/* На узких экранах фиксированная ширина __inner могла превышать карточку —
   появлялся горизонтальный скролл и из-под края выглядывал соседний слайд */
.popup-product-gallery__inner {
	max-width: 100%;
}

.popup-product-gallery__slider {
	width: 100%;
	overflow: hidden;
}

.popup-product-gallery__slider-prev-btn,
.popup-product-gallery__slider-next-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-text);
	background-image: none;
	cursor: pointer;
	transition: background-color var(--transition);
}

.popup-product-gallery .popup-product-gallery__wrapper .popup-product-gallery__slider-prev-btn,
.popup-product-gallery .popup-product-gallery__wrapper .popup-product-gallery__slider-next-btn {
	top: 50%;
	transform: translateY(-50%);
}

.popup-product-gallery .popup-product-gallery__wrapper .popup-product-gallery__slider-next-btn {
	transform: translateY(-50%) rotate(180deg);
}

/* Стрелка — маской, чтобы перекрашивать её на ховере */
.popup-product-gallery__slider-prev-btn::before,
.popup-product-gallery__slider-next-btn::before {
	content: "";
	width: 12px;
	height: 20px;
	background-color: var(--color-text-invert);
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4833 1.18345C11.6378 1.33764 11.7604 1.52079 11.844 1.72241C11.9277 1.92403 11.9707 2.14017 11.9707 2.35845C11.9707 2.57673 11.9277 2.79287 11.844 2.99449C11.7604 3.19611 11.6378 3.37926 11.4833 3.53345L5.01663 10.0001L11.4833 16.4668C11.7949 16.7784 11.97 17.2011 11.97 17.6418C11.97 18.0825 11.7949 18.5052 11.4833 18.8168C11.1717 19.1284 10.749 19.3035 10.3083 19.3035C9.86759 19.3035 9.44493 19.1284 9.1333 18.8168L1.4833 11.1668C1.32879 11.0126 1.20621 10.8294 1.12258 10.6278C1.03894 10.4262 0.995893 10.2101 0.995893 9.99178C0.995893 9.7735 1.03894 9.55737 1.12258 9.35574C1.20621 9.15412 1.32879 8.97097 1.4833 8.81678L9.1333 1.16678C9.76663 0.533451 10.8333 0.533452 11.4833 1.18345Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4833 1.18345C11.6378 1.33764 11.7604 1.52079 11.844 1.72241C11.9277 1.92403 11.9707 2.14017 11.9707 2.35845C11.9707 2.57673 11.9277 2.79287 11.844 2.99449C11.7604 3.19611 11.6378 3.37926 11.4833 3.53345L5.01663 10.0001L11.4833 16.4668C11.7949 16.7784 11.97 17.2011 11.97 17.6418C11.97 18.0825 11.7949 18.5052 11.4833 18.8168C11.1717 19.1284 10.749 19.3035 10.3083 19.3035C9.86759 19.3035 9.44493 19.1284 9.1333 18.8168L1.4833 11.1668C1.32879 11.0126 1.20621 10.8294 1.12258 10.6278C1.03894 10.4262 0.995893 10.2101 0.995893 9.99178C0.995893 9.7735 1.03894 9.55737 1.12258 9.35574C1.20621 9.15412 1.32879 8.97097 1.4833 8.81678L9.1333 1.16678C9.76663 0.533451 10.8333 0.533452 11.4833 1.18345Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-color var(--transition);
}

.popup-product-gallery__slider-prev-btn:hover,
.popup-product-gallery__slider-next-btn:hover {
	background-color: var(--color-surface);
}

.popup-product-gallery__slider-prev-btn:hover::before,
.popup-product-gallery__slider-next-btn:hover::before {
	background-color: var(--color-text);
}

@media (max-width: 1200px) {
	.popup-product-gallery__slider-prev-btn::before,
	.popup-product-gallery__slider-next-btn::before {
		width: 6px;
		height: 10px;
	}
}

/* Зум по клику на фото: раньше блок был position:absolute без координат и без
   фона — вставал в поток оверлея и уезжал за экран */
.popup-zoomedImage {
	position: fixed;
	inset: 0;
	justify-content: safe center;
	align-items: safe center;
	padding: var(--space-20);
	background-color: var(--color-surface);
	overflow: auto;
}

.popup-zoomedImage img {
	max-width: none;
	height: auto;
}

@media (max-width: 1200px) {
	.popup-zoomedImage {
		padding: 0;
	}
}

/* На телефоне лайтбокс во весь экран: стрелки и крестик не нужны (свайп),
   закрытие — тапом по свободному месту вокруг фото */
@media (max-width: 760px) {
	.popup-product-gallery {
		padding: 0;
		height: 100dvh;
	}

	.popup-product-gallery .popup-product-gallery__wrapper {
		width: 100vw;
		height: 100dvh;
		padding: 0;
		background-color: transparent;
		overflow: hidden;
	}

	.popup-product-gallery__inner {
		width: 100%;
		height: 100%;
	}

	.popup-product-gallery__slider .swiper-slide {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* картинка занимает только своё место, а не весь слайд — иначе тап по
	   пустому полю вокруг фото попадал бы в <img> и открывал зум */
	.popup-product-gallery__slider .swiper-slide img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.popup-product-gallery__slider-prev-btn,
	.popup-product-gallery__slider-next-btn,
	.popup-product-gallery__btn-close {
		display: none;
	}
}

/* --- Вкладки описания товара: активная — красная рамка (было серая),
   порядок Описание/Характеристики/Статьи/Документы/Видео --------------- */
.product-description {
	margin-top: var(--space-40);
}

.product-description__tabs-buttons {
	display: flex;
	gap: var(--space-16);
}

.product-description__tabs-buttons button:not(:last-child) {
	margin-right: 0;
}

.product-description__tabs-buttons button {
	font-weight: var(--fw-semibold);
	border-radius: var(--radius-md);
	border: 1.5px solid transparent;
}

.product-description__tabs-buttons button.active {
	border-color: var(--color-accent);
}

/* main.css на ≤1200 ставит `overflow: scroll` без запаса по высоте — полоса
   прокрутки съедала низ кнопок (ряд всего 31px). Скроллим только по X и
   отводим место под тонкую полосу. */
@media (max-width: 1200px) {
	.product-description__tabs-buttons {
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: var(--space-10);
		scrollbar-width: thin;
		scrollbar-color: var(--color-accent) var(--color-surface-muted);
	}

	.product-description__tabs-buttons button {
		flex-shrink: 0;
	}

	.product-description__tabs-buttons::-webkit-scrollbar {
		height: 4px;
	}

	.product-description__tabs-buttons::-webkit-scrollbar-track {
		background-color: var(--color-surface-muted);
		border-radius: var(--radius-round);
	}

	.product-description__tabs-buttons::-webkit-scrollbar-thumb {
		background-color: var(--color-accent);
		border-radius: var(--radius-round);
	}
}

.product-description__tab-description {
	display: none;
}

.product-description__tab-description.active {
	display: block;
}

.product-description__tab-description,
.product-description__tab-description p,
.product-description__tab-description li {
	text-align: left;
	line-height: var(--lh-loose);
	overflow-wrap: anywhere;
}

.product-description__tab-description ul,
.product-description__tab-description ol {
	padding-left: var(--space-20);
}

.product-description__tab-description a[href^="tel:"],
.product-description__tab-description a[href^="mailto:"] {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-block: var(--space-8);
	line-height: var(--lh-loose);
}

/* общая обёртка вкладки (Характеристики/Документы/Видео/Статьи) с крупным
   заголовком перед контентом; переключение — инлайн-стиль display от JS,
   .active только подстраховка на случай если JS ещё не отработал */
.product-description__tab-panel {
	display: none;
}

.product-description__tab-panel.active {
	display: block;
}

.product-description__tab-title {
	margin-bottom: var(--space-20);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

/* --- Вкладка "Характеристики" — по макету: без нумерации, тонкие строки
   с разделителем, серый лейбл слева / чёрное значение справа ------------- */
.product-description__tab-table-item__increment {
	display: none;
}

/* На сайте закэширован старый combine-CSS бандл со счётчиком (::before на
   .product-description__tab-table-item) и красной точкой-маркером на карточках
   статей — явно глушим оба, т.к. redesign.css грузится последним и должен
   перебивать устаревший кэш */
.product-description__tab-table-item::before,
.product-description__tab-table-item.product-description__tab-table-item-article::before {
	content: none !important;
}

/* тот же старый кэш даёт margin-right:80px на общий класс — ломает ширину
   карточек статей/документов, которые сидят на этом же общем классе */
.product-description__tab-table-item {
	margin-right: 0 !important;
}

/* лишний вертикальный отступ между карточками статей (шёл из template_styles.css,
   рядность у нас теперь через flex-wrap + gap) */
.product-description__tab-table-item.product-description__tab-table-item-article+.product-description__tab-table-item.product-description__tab-table-item-article {
	margin-top: 0;
}

/* сама таблица по умолчанию display:none (кэш ждал класс .active прямо на
   ol), а .active теперь висит на обёртке .product-description__tab-panel —
   показываем таблицу всегда, видимость вкладки уже решает обёртка.
   Раскладка — колонки по ширине панели, весь контент по левому краю
   (в легаси-CSS строки центрировались и упирались в 280px). */
.product-description__tab-table {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	-moz-column-gap: var(--space-50);
	column-gap: var(--space-50);
	align-content: start;
	-moz-column-count: initial;
	column-count: initial;
	text-align: left;
}

.product-description__tab-table .product-description__tab-table-item {
	width: 100%;
	max-width: none;
	margin-left: 0 !important;
	text-align: left;
}

/* Кнопка «Раскрыть/Скрыть» убрана из шаблона: на десктопе она ничего не
   разворачивала, а на ≤1200 схлопывала список до первых 10 DOM-строк, среди
   которых почти все — скрытые строки других торговых предложений (реально
   оставалось 6 характеристик из 31). Показываем все строки на любой ширине,
   кроме отфильтрованных по выбранному офферу (--hidden). */
.product-description__tab-table .product-description__tab-table-item:not(.product-description__tab-table-item--hidden) {
	display: flex;
}

.product-description__tab-table-item__inner {
	padding-top: var(--space-14);
	padding-bottom: var(--space-14);
	border-bottom: 1px solid var(--color-border);
}

.product-description__tab-table-item-name {
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-regular);
	color: var(--color-text) !important;
	background-color: transparent !important;
}

.product-description__tab-table-item-value {
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-medium);
	color: var(--color-text);
}


/* --- Вкладка "Статьи" — карточки одинаковой высоты в 3 колонки, заголовок +
   красная ссылка "Читать статью" со стрелкой, по макету -------------------- */
/* flexbox, не grid: align-items:stretch у flex-wrap куда надёжнее выравнивает
   высоту карточек одного ряда, чем grid-row stretch (был замечен глюк) */
.product-description__tab-articles {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-20);
}

.product-description__tab-table-item-article {
	max-width: none;
	min-width: 0;
	flex: 0 1 calc((100% - 2 * var(--space-20)) / 3);
	align-self: flex-start !important;
}

.product-description__tab-table-item-article a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-16);
	width: 100%;
	height: 130px;
	padding: var(--space-20);
	text-decoration: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.product-description__tab-table-item-article-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text) !important;
}

.product-description__tab-table-item-article-cta {
	text-align: left !important;
	padding-left: 0 !important;
	white-space: normal !important;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-accent) !important;
}

.product-description__tab-table-item-article-cta::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: var(--space-6);
	vertical-align: middle;
	background: no-repeat center / contain url("../img/redesign/arrow-tile-red.svg");
}

/* --- Вкладка "Документы" — серые карточки в 2 колонки, иконка справа ---- */
.product-description__tab-documents {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-20);
}

.product-description__tab-documents li {
	flex: 0 1 calc(50% - var(--space-10));
	max-width: none !important;
	/* легаси до 1200px ставит margin: 0 auto, а правый auto гасится
	   правилом .product-description__tab-table-item — из-за этого одинокий
	   элемент уезжал вправо */
	margin: 0 !important;
}

.product-description__tab-documents a {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 80px;
	padding: 0 calc(var(--space-30) * 2) 0 var(--space-30);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-xl);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.product-description__tab-documents a::before {
	content: none;
}

.product-description__tab-documents a::after {
	content: "";
	position: absolute;
	right: var(--space-30);
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: no-repeat center / contain url("../img/redesign/icon-download.svg");
}

/* --- Вкладка "Видео": карточки-превью в слайдере ------------------------ */
.product-video {
	position: relative;
}

.product-video__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-10);
	margin-bottom: var(--space-20);
}

.product-video__nav .accessories-slider__button-prev {
	margin-right: 0;
}

.product-video__slider {
	overflow: hidden;
}

.product-video__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	text-decoration: none;
}

.product-video__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background-color: var(--color-surface-muted);
}

.product-video__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Кнопка воспроизведения поверх превью */
.product-video__thumb::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: var(--color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18' viewBox='0 0 16 18'%3E%3Cpath d='M15 8.13a1 1 0 0 1 0 1.74L1.5 17.6A1 1 0 0 1 0 16.73V1.27A1 1 0 0 1 1.5.4L15 8.13Z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 54% center;
	transition: background-color var(--transition);
}

.product-video__card:hover .product-video__thumb::after {
	background-color: var(--color-text);
}

.product-video__name {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

/* --- Вкладка "Видео": в ссылке лежит iframe плеера, а не текст, ---------
   поэтому сбрасываем оформление карточки-документа ---------------------- */
.product-description__tab-documents .product-description__tab-table-item-video a {
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
}

.product-description__tab-documents .product-description__tab-table-item-video a::after {
	content: none;
}

.product-description__tab-table-item-video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-xl);
}

@media (max-width: 920px) {
	.product-description__tab-documents .product-description__tab-table-item-video {
		flex: 0 1 100%;
	}
}


.product-card__ordered-btn,
.product-card__report-me-btn {
	order: 3;
	width: 100%;
	margin: 0;
	padding: var(--space-16);
	font-size: var(--fs-sm);
	text-align: center;
	border-radius: var(--radius-md);
	line-height: var(--lh-normal);
}

.product-card__report-me-btn {
	padding-inline: var(--space-6);
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.product-card__report-me-btn span {
	font-size: inherit;
	line-height: inherit;
}

@media (max-width: 920px) {
	.product-card {
		max-width: none;
		height: auto;
		min-height: 0;
		padding: var(--space-12);
	}

	.product-card__img {
		height: 130px;
		margin-bottom: var(--space-10);
	}

	/* Название показываем целиком: в каталоге на мобиле названия длинные
	   (особенно у автоматики) и обрезка в 3 строки съедала конец. */
	.product-card__name {
		font-size: var(--fs-sm);
		line-height: var(--lh-normal);
		margin-bottom: var(--space-10);
		display: block;
		-webkit-line-clamp: none;
		line-clamp: none;
		overflow: visible;
		min-height: 0;
	}

	.product-card__price {
		margin: var(--space-14) 0;
	}

	.product-card__price span:nth-child(1) {
		font-size: var(--fs-lg);
		line-height: var(--lh-normal);
	}

	.product-card__card,
	.product-card__btn {
		height: 44px;
		font-size: var(--fs-sm);
		margin-top: 0;
	}

	.product-item-button-cont .product-card__favorite,
	.product-card__favorite {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin-right: 0;
		order: 0;
	}

	.product-card__card {
		width: auto;
		white-space: nowrap;
	}
}

/* Кнопка «Показать ещё» — как в корзине и каталоге: чёрная заливка, radius-md.
   Перебивает и базовое правило main.css, и его же уменьшённый вариант в @media 1200. */
.product-similar__btn-more,
.product-similar__btn-less,
.product-similar__btn-more[class],
.product-similar__btn-less[class] {
	padding: 13px 50px;
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	background-color: var(--color-text);
	color: var(--color-text-invert);
	border: none;
	border-radius: var(--radius-md);
}

.product-similar__btn-more[class]:hover,
.product-similar__btn-less[class]:hover {
	background-color: var(--color-accent);
}

/* Слайдер «С этим товаром покупают»: main.css ограничивает карточку 275px, а на
   ≤920 сжимает её до 136×190 — внутри слайда карточка должна занимать его
   целиком, иначе на планшете карточки выглядят узкими полосками с пустотой. */
.product-similar .swiper-slide .product-card,
.product-similar__inner.js_product_similar_list-swiper .product-card {
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
}

/* main.css сжимает карточки рекомендаций до 136×190 — «мини-карточка» старого
   макета. Отменяем, чтобы они раскладывались по ширине контейнера. */
@media (max-width: 920px) {
	.product-similar__inner:not(.js_product_similar_list-swiper) {
		row-gap: var(--space-30);
		margin-bottom: var(--space-40);
	}

	.product-similar__inner:not(.js_product_similar_list-swiper) .product-card {
		width: auto;
		height: auto;
		margin: 0;
	}
}

/* Блоки рекомендованных товаров (пустая корзина, поиск, избранное) на мобиле —
   ровно 2 карточки в строке во всю ширину экрана. Базовый flex оставляет
   карточкам фиксированную ширину и пустые поля по краям, поэтому переводим в
   grid. Слайдерный вариант (js_product_similar_list-swiper) не трогаем. */
@media (max-width: 800px) {
	.product-similar__inner:not(.js_product_similar_list-swiper) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-10);
		row-gap: var(--space-40);
	}

	.product-similar__inner:not(.js_product_similar_list-swiper) .product-card {
		width: 100%;
		max-width: none;
	}
}

/* Каталог: карточки раскладываются гридом по ширине контейнера — минимум
   2 в строке на телефоне (макет 411:14635), дальше 3 и максимум 4, как на
   десктопе. Компонент оборачивает каждую карточку в bootstrap-сетку
   (.product-item-small-card > .row > .col-*), но самих стилей bootstrap на
   сайте нет, поэтому обёртки схлопываем через display:contents и раскладываем
   сами карточки грид-ом. main.css задаёт карточкам фиксированные 136×190 и
   max-width:275px — перебиваем тем же по специфичности селектором. */
.catalog-main__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-10);
	row-gap: var(--space-20);
}

.catalog-main__inner .product-item-small-card,
.catalog-main__inner .product-item-big-card,
.catalog-main__inner .product-item-line-card,
.catalog-main__inner .row,
.catalog-main__inner .col-xs-6,
.catalog-main__inner .col-xs-12,
.catalog-main__inner .col-sm-4,
.catalog-main__inner .col-sm-6,
.catalog-main__inner .col-md-3,
.catalog-main__inner .col-md-4,
.catalog-main__inner .col-md-12 {
	display: contents;
}

.catalog-main__inner .product-card {
	width: 100%;
	max-width: none;
	height: auto;
}

@media (min-width: 620px) {
	.catalog-main__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* дальше только шире карточки — больше четырёх в строке не ставим */
@media (min-width: 900px) {
	.catalog-main__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--space-20);
		row-gap: var(--space-30);
	}
}

/* Узкая карточка каталога (2 в строке на телефоне) — пропорции из макета
   411:14635: фото 143×92, название 12px, цена 16px, кнопки по 38px */
@media (max-width: 619px) {
	.catalog-main__inner .product-card__img {
		height: 92px;
	}

	.catalog-main__inner .product-card__name {
		font-size: var(--fs-xs);
	}

	.catalog-main__inner .product-card__stock {
		gap: var(--space-6);
		font-size: var(--fs-2xs);
	}

	.catalog-main__inner .product-card__price {
		margin: var(--space-10) 0;
	}

	.catalog-main__inner .product-card__price span:nth-child(1) {
		font-size: var(--fs-md);
		font-weight: var(--fw-bold);
	}

	.catalog-main__inner .product-card__bottom {
		gap: var(--space-6);
	}

	.catalog-main__inner .product-card__card,
	.catalog-main__inner .product-card__btn {
		height: 38px;
		padding-left: var(--space-8);
		padding-right: var(--space-8);
		font-size: var(--fs-xs);
	}

	.catalog-main__inner .product-item-button-cont .product-card__favorite,
	.catalog-main__inner .product-card__favorite {
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
	}
}

/* =========================================================================
   Секции главной страницы.
   Порядок подключения на боевом сервере:
   style.css компонентов → tokens.css → main.css → template_styles.css → этот файл.
   Поэтому вся вёрстка редизайна живёт здесь, а не в style.css компонентов.
   ========================================================================= */

/* --- Главный баннер ----------------------------------------------------- */
.main-slider {
	/* width обязателен: слайды Swiper имеют фиксированную ширину, без него секция
	   раздувается до max-content и появляется горизонтальный скролл. */
	width: 100%;
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	margin: 0 auto;
	padding: 0 var(--layout-pad);
}

@media (max-width: 1200px) {
	.main-slider {
		display: block;
		padding: 0;
		max-width: none;
	}
}

/* На вертикальных слайдах (<760px) баннер тянется на всю ширину, без ограничения */
@media (max-width: 760px) {
	.main-slider {
		max-width: none;
	}
}

/* Порядок секций главной как в макете: баннер → комплектующие/новинки → о компании → новости/видео.
   В /index.php (вне темы) «О компании» стоит последней, поэтому переставляем через flex order.
   Вертикальный ритм задаёт только gap — собственных внешних отступов у секций нет. */
.main:has(> .about-company) {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

/* Без сброса min-width флекс-элемент растягивается до min-content слайдера и рождает горизонтальный скролл. */
.main:has(> .about-company)>* {
	min-width: 0;
}

.main:has(> .about-company)>.main-slider {
	order: 1;
}

.main:has(> .about-company)>.accessories {
	order: 2;
}

.main:has(> .about-company)>.about-company {
	order: 3;
}

.main:has(> .about-company)>.news {
	order: 4;
}

.main-slider .swiper,
.main-slider .js-main-swiper {
	max-width: none;
	max-height: none;
	min-height: 0;
	padding: 0;
	margin: 0;
	display: block;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.main-slider a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-height: 314px;
	max-height: none;
	height: 245px;
	padding: 0 131px;
	background-color: var(--color-surface-dark);
	background-image: var(--bg-desktop);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--radius-xl);
}

.main-slider__title {
	max-width: 754px;
	margin: 0 0 var(--space-30);
	min-height: 0;
	text-align: left;
	text-transform: uppercase;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);
	line-height: 1.1;
	color: var(--color-text-invert);
}

.main-slider__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--space-20) var(--space-24);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--color-text-invert);
	background-color: var(--color-accent);
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.main-slider a:hover .main-slider__link {
	background-color: var(--color-accent-hover);
}

.main-slider .swiper-pagination {
	bottom: var(--space-10);
	display: flex;
	justify-content: center;
	gap: var(--space-10);
}

.main-slider .swiper-pagination-bullet {
	width: 14px;
	height: 14px;
	margin: 0 !important;
	opacity: 1;
	background-color: transparent;
	border: var(--border-width) solid var(--color-text-invert);
	border-radius: var(--radius-round);
}

.main-slider .swiper-pagination-bullet-active {
	position: relative;
	background-color: transparent;
	border-color: var(--color-accent);
}

.main-slider .swiper-pagination-bullet-active::after {
	content: '';
	position: absolute;
	inset: 3px;
	background-color: var(--color-accent);
	border-radius: var(--radius-round);
}

.main-slider .swiper-button-prev,
.main-slider .swiper-button-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.main-slider .swiper-button-prev:hover,
.main-slider .swiper-button-next:hover {
	background-color: var(--color-surface-alt);
}

.main-slider .swiper-button-prev::after,
.main-slider .swiper-button-next::after {
	content: '';
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	background-image: url("../img/redesign/arrow-slider-prev.svg");
}

.main-slider .swiper-button-next::after {
	background-image: url("../img/redesign/arrow-slider-next.svg");
}

.main-slider .swiper-button-prev {
	left: 0.5rem;
}

.main-slider .swiper-button-next {
	right: 0.5rem;
}

@media (max-width: 1200px) {
	.main-slider a {
		height: auto;
		/* 3200x628 — реальные пропорции десктопной картинки, чтобы contain не оставлял чёрных полос */
		aspect-ratio: 3200 / 628;
		padding: 40px 30px 70px;
		border-radius: 0;
		background-size: contain;
	}

	.main-slider .swiper,
	.main-slider .js-main-swiper {
		border-radius: 0;
	}

	.main-slider__title {
		font-size: var(--fs-2xl);
	}

	.main-slider .swiper-button-prev,
	.main-slider .swiper-button-next {
		display: none;
	}
}

/* 769–1640px: ниже 1640px (--layout-max 1600 + 2×20 паддинга) контейнер перестаёт
   упираться в максимум и сжимается вместе с окном, поэтому баннер тут тянется во всю
   доступную ширину с высотой по пропорциям. min-height из базового правила обязательно
   сбросить — иначе слайд выше своего aspect-ratio. background-size: 100% auto
   гарантирует, что картинка всегда влезает по ширине целиком (в отличие от cover,
   который режет края). Отступы и типографика в процентах/vw, чтобы контент не распирал
   слайд выше расчётной высоты. */
@media (min-width: 760px) and (max-width: 1640px) {
	.main-slider a {
		min-height: 0;
		height: auto;
		aspect-ratio: 3200 / 628;
		padding: 2% 4% 4%;
		background-size: 100% auto;
		background-position: center;
	}

	.main-slider__title {
		margin-bottom: 1.4%;
		font-size: clamp(14px, 2.2vw, 28px);
	}

	.main-slider__link {
		padding: 0.9vw 1.4vw;
		font-size: clamp(10px, 1.2vw, 15px);
	}

	.main-slider .swiper-pagination {
		bottom: clamp(12px, 3.5%, 26px);
	}
}

/* Ниже 760px слайд переходит в вертикальный формат баннера (750x1082) на полную заливку — только тут используется картинка-вариант IMG_MOBILE */
@media (max-width: 759.98px) {
	.main-slider a {
		aspect-ratio: 750 / 1082;
		background-image: var(--bg-mobile);
		background-size: cover;
	}
}

@media (max-width: 640px) {
	.main-slider a {
		padding: 24px 20px 60px;
	}

	.main-slider__title {
		font-size: var(--fs-xl);
	}

	/* На мобиле баннер во всю ширину экрана, без скруглений (макет) */
	.main-slider {
		padding: 0;
	}

	.main-slider .swiper,
	.main-slider .js-main-swiper,
	.main-slider a {
		border-radius: 0;
	}
}

/* --- «Комплектующие для» + «Новинки» ------------------------------------ */
.accessories {
	padding: 0;
}

.accessories__inner {
	display: block;
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	margin: 0 auto;
	padding: 0 var(--layout-pad);
}

.accessories-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-20);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1201px) {
	.catalog-tiles .accessories-tiles__item--wide {
		grid-column: span 2;
	}
}

.accessories-tiles__link {
	position: relative;
	display: flex;
	align-items: flex-start;
	height: 170px;
	padding: var(--space-30);
	overflow: hidden;
	background-color: var(--color-surface-muted);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-xl);
	transition: background-color var(--transition), border-color var(--transition);
}

.accessories-tiles__name {
	position: relative;
	z-index: 2;
	max-width: 190px;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-normal);
	text-transform: uppercase;
	color: var(--color-text);
}

.accessories-tiles__img {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 52%;
	height: 70%;
	object-fit: contain;
	border-radius: var(--radius-xl);
	transition: transform var(--transition);
}

.accessories-tiles__link:hover .accessories-tiles__img {
	transform: scale(1.08);
}

/* Товарные PNG на прозрачном фоне (плитки /katalog/) — не обрезаем, вписываем целиком */
.accessories-tiles__img--contain {
	height: 100%;
	object-fit: contain;
	object-position: bottom right;
	border-radius: 0;
}

.accessories-tiles__arrow {
	position: absolute;
	left: var(--space-30);
	bottom: var(--space-30);
	z-index: 2;
	width: 40px;
	height: 40px;
	opacity: 0;
	background: var(--color-accent) url("../img/redesign/arrow-tile-white.svg") no-repeat center / 16px 16px;
	border-radius: var(--radius-md);
	transition: opacity var(--transition);
}

.accessories-tiles__link:hover {
	background-color: var(--color-surface);
	border-color: var(--color-accent);
}

.accessories-tiles__link:hover .accessories-tiles__arrow {
	opacity: 1;
}

/* Плитка «Распродажа» на /katalog/ — постоянная красная обводка (не только на hover), см. макет каталога */
.accessories-tiles__link--accent {
	background-color: var(--color-surface);
	border-color: var(--color-accent);
}

.accessories-tiles__link--accent .accessories-tiles__arrow {
	opacity: 1;
}

/* Разделитель стоит ровно посередине зазора между плитками и слайдером */
.accessories-slider {
	margin-top: var(--section-gap);
	padding-top: var(--section-gap);
	border-top: var(--border-width) solid var(--color-border);
}

/* На мобиле margin+padding по --section-gap каждый суммарно дают удвоенный отступ (120px) —
   уменьшаем оба вдвое, разделитель остаётся по центру, но зазор не задвоен. */
@media (max-width: 1200px) {
	.accessories-slider {
		margin-top: var(--space-30);
		padding-top: var(--space-30);
	}
}

.accessories-slider .js-accessories-swiper {
	overflow: hidden;
}

.accessories-slider .js-accessories-swiper .swiper-wrapper {
	align-items: stretch;
}

.accessories-slider .js-accessories-swiper .swiper-slide {
	display: flex;
	height: auto;
}

.accessories-slider .js-accessories-swiper .swiper-slide>* {
	width: 100%;
}

.accessories-slider .js-accessories-swiper .product-card {
	height: 100%;
}

.accessories-slider .js-accessories-swiper>.swiper-pagination {
	display: none;
}

@media (max-width: 1200px) {
	.accessories-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.accessories-tiles {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-12);
	}

	.accessories-tiles__link {
		height: 124px;
		padding: var(--space-20);
	}

	.accessories-tiles__name {
		max-width: 55%;
		font-size: var(--fs-sm);
	}

	.accessories-tiles__img {
		width: 45%;
	}

	.accessories-tiles__arrow {
		left: var(--space-20);
		bottom: var(--space-20);
	}
}

/* /katalog/ на мобилке — по макету плоский список с разделителями, а не плитки с фото */
@media (max-width: 800px) {
	.catalog-tiles {
		display: block;
		width: 100%;
	}

	.catalog-tiles .accessories-tiles__item {
		border-top: var(--border-width) solid var(--color-border);
		margin: 0 1rem;
		padding: 0 0.25rem;
	}
	
	.catalog-tiles .accessories-tiles__item:hover *{
		color: var(--color-accent);
	}

	.catalog-tiles .accessories-tiles__link,
	.catalog-tiles .accessories-tiles__link--accent {
		height: auto;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-16) 0;
		background-color: transparent;
		border: 0;
		border-radius: 0;
	}

	.catalog-tiles .accessories-tiles__name {
		max-width: none;
		font-size: var(--fs-md);
		font-weight: var(--fw-medium);
		text-transform: none;
	}

	.catalog-tiles .accessories-tiles__img {
		display: none;
	}

	.catalog-tiles .accessories-tiles__arrow {
		position: static;
		width: 8px;
		height: 8px;
		margin-left: auto;
		background: none;
		border: solid var(--color-text);
		border-width: 0 2px 2px 0;
		border-radius: 0;
		opacity: 1;
		transform: rotate(-45deg);
		margin-right: 0.1rem;
	}
}

/* --- «О компании» ------------------------------------------------------- */
.about-company {
	padding: var(--section-pad) 0;
	background-color: var(--color-surface-muted);
}

.about-company__inner {
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	margin: 0 auto;
	padding: 0 var(--layout-pad);
}

.about-company__title {
	max-width: 730px;
	margin: 0 0 var(--space-40);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-text);
}

.about-company__grid {
	display: grid;
	grid-template-columns: minmax(0, 925fr) minmax(0, 628fr);
	gap: var(--space-20);
	align-items: stretch;
}

.about-company__media {
	overflow: hidden;
	border-radius: var(--radius-xl);
	background-color: var(--color-surface-alt);
}

.about-company__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 620px;
	object-fit: cover;
}

.about-company__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--space-20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-company__item {
	overflow: hidden;
	border-radius: var(--radius-xl);
	background-image: url("../img/redesign/about-company_card-bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.about-company__link {
	position: relative;
	display: flex;
	align-items: flex-start;
	height: 100%;
	min-height: 140px;
	padding: var(--space-30);
	padding-right: 90px;
	background-color: rgba(0, 0, 0, 0.35);
	transition: background-color var(--transition);
}

.about-company__link:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

.about-company__name {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-normal);
	color: var(--color-text-invert);
}

.about-company__arrow {
	position: absolute;
	right: var(--space-30);
	bottom: var(--space-30);
	width: 40px;
	height: 40px;
	background: var(--color-accent) url("../img/redesign/arrow-tile-white.svg") no-repeat center / 16px 16px;
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.about-company__link:hover .about-company__arrow {
	background-color: var(--color-accent-hover);
}

@media (max-width: 1200px) {
	.about-company {
		padding: 50px 0;
	}

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

	.about-company__media img {
		min-height: 320px;
	}
}

@media (max-width: 640px) {
	.about-company__title {
		font-size: var(--fs-2xl);
		margin-bottom: var(--space-24);
	}

	.about-company__link {
		min-height: 110px;
		padding: var(--space-20);
		padding-right: 80px;
	}

	.about-company__arrow {
		right: var(--space-20);
		bottom: var(--space-20);
	}
}

/* --- Секция «Новости / Статьи» ------------------------------------------ */
.news {
	padding: 0;
	background-color: var(--color-surface);
}

.news__wrapper {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}

.news__left-box,
.news__links-list {
	display: none;
}

.news__inner {
	max-width: none;
}

.news__top,
.news-slider {
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	margin: 0 auto;
	padding: 0 var(--layout-pad);
}

/* Табы «Новости / Экспертные статьи» — по центру, как в макете */
.news__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	min-height: 40px;
	margin-bottom: var(--space-30);
	padding-top: 0;
}

.news__title-news,
.news__title-article {
	margin: 0;
	padding: 14px var(--space-20);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--color-text);
	background-color: transparent;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-md);
	transition: border-color var(--transition), background-color var(--transition);
}

.news__title-news.active,
.news__title-article.active {
	color: var(--color-text);
	text-decoration: none;
	background-color: var(--color-surface);
	border-color: var(--color-accent);
}

.news-slider {
	position: relative;
}

/* Заголовок секции и стрелки выносим в строку с табами */
.news-slider__head {
	position: absolute;
	top: -70px;
	left: var(--layout-pad);
	height: 40px;
	margin-bottom: 0;
}

.news-slider__nav {
	position: absolute;
	top: -70px;
	right: var(--layout-pad);
	margin-left: 0;
}

.news__slider-wrapper,
.news__articles-slider-wrapper {
	margin-bottom: 0;
}

.news-card {
	display: block;
	max-width: none;
	height: auto;
	padding: 0;
	background: none;
	border: 0;
}

.news-card__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.news-card__img-wrapper {
	position: relative;
	height: 230px;
	margin-bottom: var(--space-20);
	overflow: hidden;
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition);
}

.news-card:hover .news-card__img-wrapper {
	border-color: var(--color-accent);
}

.news-card__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
	transition: transform var(--transition);
}

.news-card:hover .news-card__img,
.news-articles-card:hover .news-articles-card__img {
	transform: scale(1.04);
}

/* template_styles.css задаёт .news-card__img-wrapper img object-fit:contain
   (селектор с тегом, специфичнее .news-card__img) — перекрываем на cover */
.news-card__img-wrapper img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

.news-articles-card__img-wrapper img {
	object-fit: cover;
}

.news-card__date {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 11px var(--space-14);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-loose);
	color: var(--color-text-invert);
	background-color: var(--color-accent);
	border-radius: var(--radius-md);
}

.news-card__more-link,
.news-articles-card__link {
	display: inline-flex;
	margin-top: auto;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition);
}

.news-card__more-link:hover,
.news-card__more-link:focus-visible,
.news-articles-card__link:hover,
.news-articles-card__link:focus-visible {
	color: var(--color-text);
	text-decoration: none;
}

.news-card__name {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	color: var(--color-text);
	transition: color var(--transition);
}

.news-card:hover .news-card__name {
	color: var(--color-accent);
}

/* Страница «Новости» — карточки были 270px с лишним анонсом текста под
   заголовком, по макету карточка 385px, только картинка+тег+заголовок */
.news-main__news-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--space-20);
	row-gap: var(--space-20);
}

.news-main__news-item {
	flex: none;
	min-width: 0;
}

.news-main__news-item .news-card {
	width: 100%;
	max-width: none;
}

.news-card__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-10);
	margin-top: var(--space-16);
}

.news-card__btn p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.news-card__btn .news-articles-card__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-10);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-decoration: underline;
}

.news-card__btn .news-articles-card__btn::after {
	content: '';
	width: 22px;
	height: 14px;
	background: var(--color-text);
	-webkit-mask: url("../img/redesign/arrow-tile-black.svg") no-repeat center / contain;
	mask: url("../img/redesign/arrow-tile-black.svg") no-repeat center / contain;
}

.news-main__more-news-wrap,
.article-main__card-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--space-24);
	margin-bottom: var(--space-30);
}

.news-main__more-news-btn,
.article-main__card-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	color: var(--color-text);
	text-decoration: none;
	transition: none;
}

.news-main__more-news-btn svg,
.article-main__card-more-btn svg {
	width: 26px;
	height: 22px;
	flex-shrink: 0;
}

.news-main__more-news-btn:hover,
.article-main__card-more-btn:hover,
.news-main__more-news-btn:focus-visible,
.article-main__card-more-btn:focus-visible {
	color: var(--color-text);
	background: transparent;
	text-decoration: none;
}

.news-main__more-news-btn:hover svg path,
.article-main__card-more-btn:hover svg path,
.news-main__more-news-btn:focus-visible svg path,
.article-main__card-more-btn:focus-visible svg path {
	fill: var(--color-text);
}

.news-card__text {
	display: block;
	margin: 0 0 var(--space-12);
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--color-text-secondary);
}

/* Теги-вкладки фильтра новостей — такой же вид, как у остальных вкладок на сайте */
.article-main__tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
	margin-bottom: var(--space-20);
}

.article-main__tag-item:not(:last-child) {
	margin-right: 0;
}

.article-main__tag-link {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 var(--space-20);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	background: #F2F2F2;
	border: 1.5px solid #F2F2F2;
	border-radius: var(--radius-md);
	transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.article-main__tag-link.active {
	background: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* --- Модалки: единая карточка по макету (594px, паддинг 50, r:20, тень,
   жирный заголовок 26/700, поля на сером фоне без рамки r:10, чёрная
   кнопка-сабмит r:10 вместо красной пилюли) — общий вид для "Письмо
   директору", "Получить оптовые цены", "Купить в 1 клик"/"без регистрации",
   "Проблема с товаром", "Скидка", "Вход" — все они (кроме скидки/входа)
   несут общий маркер-класс popup-write-to-boss__* дополнительно к своему
   собственному (см. template.php там) — новый попап этой семьи достаточно
   просто добавить эти же классы в разметке, никаких новых правил не нужно ------- */
.popup-write-to-boss__wrapper,
.popup-enter-email__wrapper,
.popup-discount__wrapper {
	max-width: 594px;
	padding: var(--space-50);
	box-shadow: var(--shadow-md);
}

.popup-write-to-boss__title,
.popup-enter-email__title,
.popup-discount__title {
	font-weight: var(--fw-bold);
	margin-bottom: var(--space-24);
}

.popup-write-to-boss__title {
	align-self: stretch;
	text-align: left;
	margin-bottom: var(--space-20);
}

.popup-write-to-boss__form {
	max-width: none;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

/* "Скидка" — просто текстовая карточка, без формы; по макету текст читается
   слева-направо, а не центрирован */
.popup-discount__wrapper {
	align-items: flex-start;
	text-align: left;
}

.popup-discount__title {
	align-self: center;
}

.popup-discount__content,
.popup-discount__content p {
	text-align: left;
	font-size: var(--fs-md);
}

/* --- "Купить в 1 клик" — заголовок/подзаголовок/разделитель + блок товара + количество ------ */
.popup-buy-to-one-click__subtitle {
	margin: 0 0 var(--space-16);
	text-align: center;
	font-size: var(--fs-md);
	color: var(--color-text);
}

/* Красный мобильный фон (main.css) был на общем .popup-buy-to-one-click__wrapper
   и .popup-write-to-boss__wrapper, а эти классы переиспользуют десятки других
   модалок (успех/ошибка формы, "нашли дилера", вход/регистрация, скидка,
   проблема с товаром и т.д.) — на мобиле они ВСЕ становились красными.
   main.css уже правлен (убран background-color), это просто пояснение. */

.popup-buy-to-one-click__divider {
	margin-bottom: var(--space-20);
}

.popup-one-click__productInfo {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	width: 100%;
	padding: var(--space-16);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	margin-bottom: var(--space-20);
}

/* Ссылка на связанные опции в строке с артикулом и печатью. */
.product-main__content-wrapper-1 {
	align-items: center;
	gap: var(--space-20);
}

.product-main__content-wrapper-1 span:nth-child(1),
.product-main__content-wrapper-1 span:nth-child(2) {
	margin-right: 0;
}

.product-main__content-wrapper-1 .needToPurchaseAnchor {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	width: auto;
	max-width: none;
	margin-top: 0;
	margin-left: 0;
	padding-left: 0;
	color: var(--color-text);
	text-decoration: none;
}

.product-main__content-wrapper-1 .needToPurchaseAnchor::before {
	position: static;
	left: 0;
	width: 22.77px;
	height: 22.77px;
	flex: 0 0 22.77px;
	filter: brightness(0);
}

.number-minus,
.number-plus {
	cursor: pointer;
	transition: color 0.2s ease;
}

.number-minus:hover,
.number-plus:hover {
	color: var(--color-accent);
}

.popup-one-click__productImage {
	border: none;
	margin: 0;
	padding: 0;
	max-width: 90px;
}

.popup-one-click__right {
	flex: 1 1 auto;
	min-width: 0;
}

.popup-one-click__productName {
	margin-bottom: var(--space-10);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.popup-delivery__quantity-wrapper {
	margin-right: 0;
}

/* Количество — единый бордюр вокруг всего блока, как на карточке товара;
   у кнопок +/- свой персональный бордюр убираем */
.popup-delivery__quantity-box {
	display: inline-flex;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	column-gap: 0;
}

.popup-delivery__quantity-box .quantity-box__btn {
	border: none;
	border-radius: var(--radius-sm);
}

.popup-write-to-boss__form input,
.popup-write-to-boss__form textarea,
.popup-enter-email__form input {
	margin-bottom: 0;
	border: none;
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

.popup-write-to-boss__btn-submit,
.popup-enter-email__btn-submit,
.popup-call-back__btn-submit,
.popup-become-a-dealer__btn-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	background-color: var(--color-text);
	color: var(--color-text-invert);
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	min-height: 50px;
	font-size: var(--fs-md);
}

.popup-write-to-boss__btn-submit:hover,
.popup-enter-email__btn-submit:hover,
.popup-call-back__btn-submit:hover,
.popup-become-a-dealer__btn-submit:hover {
	background-color: var(--color-accent);
}

.popup-write-to-boss__terms-label {
	order: 1;
	margin-bottom: 0 !important;
}

.popup-write-to-boss__terms-label a {
	color: var(--color-accent);
}

/* Текст согласия во всех попапах ужимался под узкий max-width:300px (main.css) —
   растягиваем на всю ширину формы, единым правилом для всех модалок сайта */
[class*="__terms-label"] p {
	max-width: none;
}

/* --- Попап "В вашем регионе есть наш дилер!" (создаётся из main.js при
   выборе города) — переиспользует .popup-buy-to-one-click__wrapper/__title
   (единая карточка), тут только текст-список и 2 кнопки, ранее совсем
   неоформленные --------------------------------------------------------- */
.popup__list {
	margin-bottom: var(--space-24);
	text-align: left;
}

.popup__list p {
	margin: 0 0 var(--space-10);
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--color-text);
}

.popup-dealer__button-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-16);
	width: 100%;
}

.popup-dealer__stay,
.popup-dealer__go {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 var(--space-20);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	border-radius: var(--radius-md);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.popup-dealer__go {
	background-color: var(--color-text);
	color: var(--color-text-invert);
	border: none;
}

.popup-dealer__go:hover {
	background-color: var(--color-accent);
}

.popup-dealer__stay {
	background-color: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-text);
}

.popup-dealer__stay:hover {
	background-color: var(--color-text);
	color: var(--color-text-invert);
}

/* --- Модалки авторизации (вход по sms/паролю, код подтверждения,
   восстановление/смена пароля, регистрация) — по макету 324:34478 и соседним:
   620px, чёрная рамка 1px, крупный заголовок 38px/700, свитчер-пилюли с
   рамкой (красная — активная), чёрная кнопка-пилюля сабмита, белая
   кнопка-пилюля вторичного действия ------------------------------------- */
.popup-enter-email__wrapper,
.popup-enter-sms__wrapper,
.popup-sms-code__wrapper,
.popup-change-password-email__wrapper,
.popup-new-password__wrapper,
.popup-registration-company__wrapper {
	max-width: 620px;
	border: 1px solid var(--color-text);
	box-shadow: none;
}

.popup-enter-email__title,
.popup-enter-sms__title,
.popup-sms-code__title,
.popup-change-password-email__title,
.popup-new-password__title,
.popup-registration-company__title {
	font-size: var(--fs-4xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-text);
	margin-bottom: var(--space-30);
}

.popup-sms-code__text,
.popup-new-password__text,
.popup-change-password-email__text {
	max-width: 100%;
	margin-bottom: var(--space-30);
	font-size: var(--fs-md);
	color: var(--color-text);
	text-align: center;
}

/* Свитчер sms/пароль — рамка вместо сплошной заливки, красная у активного */
.popup-enter-email__switcher,
.popup-enter-sms__switcher {
	display: flex;
	gap: var(--space-10);
	width: 100%;
	max-width: 372px;
	padding: 0;
	border: none;
	border-radius: 0;
}

.popup-enter-email__sms-btn,
.popup-enter-email__password-btn,
.popup-enter-sms__sms-btn,
.popup-enter-sms__password-btn {
	flex: 1;
	padding: var(--space-16) var(--space-10);
	background: transparent;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.popup-enter-email__sms-btn.active,
.popup-enter-email__password-btn.active,
.popup-enter-sms__sms-btn.active,
.popup-enter-sms__password-btn.active {
	background: transparent;
	border-color: var(--color-accent);
	color: var(--color-text);
}

/* radius-md — финально, не менять без явного запроса пользователя */
.popup-enter-sms__sms-btn.js_enter-sms_sms_btn.active,
.popup-enter-email__password-btn.active {
	border-radius: var(--radius-md);
}

/* Поля ввода — на всех формах авторизации: серый фон без рамки, r:10, h:60 */
.popup-enter-email__form input,
.popup-enter-sms__form input,
.popup-sms-code__form input,
.popup-change-password-email__form input,
.popup-new-password__form input,
.popup-registration-company__form input[type="text"],
.popup-registration-company__form input[type="password"],
.popup-registration-company__form input[type="email"] {
	height: 60px;
	margin-bottom: var(--space-16) !important;
	padding: 0 var(--space-20);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	border: none;
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

.popup-enter-email__form input::placeholder,
.popup-enter-sms__form input::placeholder,
.popup-sms-code__form input::placeholder,
.popup-change-password-email__form input::placeholder,
.popup-new-password__form input::placeholder,
.popup-registration-company__form input::placeholder {
	color: var(--color-text-muted);
}

/* Код подтверждения — один инпут на весь код (без переделки в 4 отдельных
   поля), но визуально широкий, крупный и с разрядкой букв под макет */
.popup-sms-code__form input {
	height: 100px;
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	text-align: center;
	letter-spacing: var(--space-16);
}

/* Кнопки-сабмит — чёрный фон, uppercase, радиус как у стандартной кнопки
   сайта (--radius-md). !important нужен т.к. легаси .popup__authForm
   input.popup__submit (template_styles.css) специфичнее и красит фон в красный */
.popup-enter-email__btn-submit,
.popup-enter-sms__btn-submit,
.popup-sms-code__btn-submit,
.popup-change-password-email__btn-submit,
.popup-new-password__btn-submit,
.popup-registration-company__btn-submit {
	width: 100% !important;
	height: 56px;
	padding: 0 !important;
	background-color: var(--color-text) !important;
	color: var(--color-text-invert);
	border-radius: var(--radius-md);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
}

.popup-enter-email__btn-submit:hover,
.popup-enter-sms__btn-submit:hover,
.popup-sms-code__btn-submit:hover,
.popup-change-password-email__btn-submit:hover,
.popup-new-password__btn-submit:hover,
.popup-registration-company__btn-submit:hover {
	background-color: var(--color-accent) !important;
}

/* Вторичная кнопка "зарегистрироваться"/"авторизоваться" — белая с чёрной
   рамкой, радиус как у стандартной кнопки сайта (был просто текстовый линк) */
.popup-enter-email__btn-register-new-company,
.popup-enter-sms__btn-register-new-company,
.popup-registration-company .popup-enter-email__btn-register-new-company {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	margin-top: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text);
	background-color: transparent;
	border: 1px solid var(--color-text);
	border-radius: var(--radius-md);
	transition: background-color var(--transition), color var(--transition);
}

.popup-enter-email__btn-register-new-company:hover,
.popup-enter-sms__btn-register-new-company:hover,
.popup-registration-company .popup-enter-email__btn-register-new-company:hover {
	color: var(--color-text-invert);
	background-color: var(--color-text);
}

/* Свитчер типа лица в регистрации (был обычный список radio+label) —
   те же пилюли-табы, что у sms/пароль */
.register__type-switcher {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--space-10);
	margin-bottom: var(--space-16);
}

.register__type-switcher input.uf_organiztion_type {
	display: none;
}

.register__type-switcher .register__type {
	padding-left: var(--space-10);
	margin-bottom: 0;
}

.register__type-switcher .register__type::before,
.register__type-switcher .register__type::after,
.register__type-switcher input.uf_organiztion_type:checked+.register__type::after {
	content: none !important;
}

.register__type {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 56px;
	padding: 0 var(--space-10);
	text-align: center;
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	background: transparent;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.register__type-switcher input.uf_organiztion_type:checked+.register__type {
	border-color: var(--color-accent);
}

/* --- Модалка "Регистрация личного кабинета" — раскладка полей по макету
   324:36773: свитчер → ИНН → имя+фамилия и телефон+email парами → пароли →
   чекбокс → капча → кнопки. Поля идут вразнобой в DOM (Bitrix сам решает
   порядок SHOW_FIELDS), поэтому визуальный порядок задаём через grid+order,
   не трогая PHP-шаблон компонента ------------------------------------ */
form[name="regform"].popup-registration-company__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-16);
	max-width: none;
	width: 100%;
}

form[name="regform"].popup-registration-company__form>* {
	grid-column: 1 / -1;
}

form[name="regform"] .register__type-switcher {
	order: 1;
}

form[name="regform"] .company__inn-wrapper {
	order: 2;
}

form[name="regform"] input[name="REGISTER[NAME]"],
form[name="regform"] input[name="REGISTER[LAST_NAME]"] {
	order: 3;
	grid-column: span 1;
}

form[name="regform"] input[name="REGISTER[LOGIN]"],
form[name="regform"] input[name="REGISTER[PHONE_NUMBER]"] {
	order: 4;
	grid-column: span 1;
}

form[name="regform"] input[name="REGISTER[PASSWORD]"] {
	order: 5;
}

form[name="regform"] input[name="REGISTER[CONFIRM_PASSWORD]"] {
	order: 6;
}

form[name="regform"] .uf-subscribe {
	order: 7;
}

.uf-subscribe {
	display: flex !important;
	align-items: flex-start;
	gap: var(--space-10);
}

.uf-subscribe input {
	float: none !important;
	margin: 2px 0 0 !important;
}

.uf-subscribe input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 16px !important;
	height: 16px;
	background-color: var(--color-surface);
	border: 1.5px solid var(--color-accent);
	border-radius: var(--radius-xs);
	cursor: pointer;
}

.uf-subscribe input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M3.5 8L0 4.5L1.5 3L3.5 5L8.5 0L10 1.5L3.5 8Z' fill='%23FF0000'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.uf-subscribe label {
	line-height: var(--lh-loose) !important;
}

.popup-registration-company .uf-subscribe a {
	color: var(--color-accent);
}

form[name="regform"] .customCaptcha {
	order: 8;
}

form[name="regform"] .popup_registration-company__errors {
	order: 9;
}

form[name="regform"] .popup-registration-company__button-wrapper {
	order: 10;
}

/* Легаси main.css вешает margin-bottom:20px на все __button-wrapper —
   отступ до кнопки "Войти"/"Зарегистрироваться" теперь задаём через
   .popupLinkText, а не двойным margin, так что убираем его тут */
.popup-enter-email__button-wrapper,
.popup-enter-sms__button-wrapper,
.popup-sms-code__button-wrapper,
.popup-change-password-email__button-wrapper,
.popup-new-password__button-wrapper,
.popup-registration-company__button-wrapper {
	margin-bottom: 0;
}

form[name="regform"] .popupLinkText {
	order: 11;
}

form[name="regform"] .policyText {
	order: 12;
}

.popup-enter-email__btn-lose-password,
.popup-enter-sms__btn-lose-password {
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
	text-decoration: underline;
}

.popup-enter-email__lose-password,
.popup-enter-sms__lose-password {
	margin-bottom: var(--space-16);
	text-align: center;
}

/* Кнопка + "Забыли пароль?" стояли в один ряд (main.css) — от полной
   ширины кнопки текст съезжает; ставим ссылку отдельной строкой снизу */
.popup-enter-email__button-wrapper {
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

/* Текст согласия на обработку персональных данных — под макетом */
.policyText {
	max-width: 520px;
	margin-top: var(--space-16);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
	text-align: center;
	color: var(--color-text-muted);
}

.popupLinkText {
	max-width: 520px;
	margin-top: var(--space-10);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
	text-align: center;
	color: var(--color-text-muted);
}

.policyText a {
	color: var(--color-accent);
	text-decoration: underline;
}

/* --- Модалка "Товар добавлен в корзину" — под общий стиль карточек-модалок:
   белая карточка с рамкой, жирный заголовок, две чёрные кнопки --------------- */
/* safe center — чтобы при контенте выше экрана верх не уезжал за границу */
.popup-added-to-cart {
	align-items: center;
	align-items: safe center;
}

.popup-added-to-cart__wrapper {
	max-width: 594px;
	padding: var(--space-50);
	border: 1px solid var(--color-text);
	border-radius: var(--radius-xl);
	justify-content: center;
	justify-content: safe center;
}

.popup-added-to-cart__title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	max-width: 100%;
}

.popup-added-to-cart__card {
	border-color: var(--color-border);
}

.popup-added-to-cart__button-wrapper {
	width: 100%;
	flex-wrap: nowrap;
}

.popup-added-to-cart__btn-submit,
.popup-added-to-cart__btn-to-cart {
	flex: 1 1 0;
	padding: 0 var(--space-20);
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	background-color: var(--color-text);
	color: var(--color-text-invert);
	border: 1px solid var(--color-text);
	border-radius: var(--radius-md);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.popup-added-to-cart__btn-submit:hover,
.popup-added-to-cart__btn-to-cart:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-invert);
}

.popup-added-to-cart__btn-close,
.popup-added-to-cart .popup-report-admission__btn-close {
	background-image: url("../img/redesign/icon-close.svg") !important;
}

/* "Проблема с товаром" не имела вообще никакой карточки — только оверлей */
.popup_product_trouble {
	display: none;
	align-items: flex-start;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: var(--space-30) var(--space-10);
	background: rgba(41, 41, 41, 0.37);
	z-index: 200;
	overflow-y: auto;
}

.popup_product_trouble.active {
	display: flex;
}

.popup_product_trouble-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	background-color: var(--color-surface);
	border-radius: var(--radius-xl);
	overflow-y: auto;
}

.popup_product_trouble__top {
	width: 100%;
}

.popup_product_trouble__title {
	display: block;
	text-align: left;
	font-size: 26px;
	line-height: 120%;
	color: var(--color-text);
}

.popup_product_trouble__btn-close {
	position: absolute;
	top: var(--space-20);
	right: var(--space-20);
	width: 16px;
	height: 16px;
	background: no-repeat center / contain url("../img/redesign/icon-close.svg");
}

.popup_product_trouble__form {
	position: relative;
	max-width: none;
	width: 100%;
}

/* Bitrix-кэш (page_*.css) вешает display:flex;flex-direction:row на этот
   составной селектор — специфичнее одного класса, перебиваем тем же селектором */
.popup_product_trouble-wrapper .popup_product_trouble__form {
	flex-direction: column;
}

/* Тот же кэш вдобавок ограничивает ВСЕХ детей формы max-width:calc(50% - 14px)
   (наследие старой 2-колоночной вёрстки) — форма теперь в один столбец, снимаем */
.popup_product_trouble-wrapper .popup_product_trouble__form>* {
	max-width: none;
}

.popup_product_trouble__form textarea {
	width: 100%;
	min-height: 50px;
	margin-bottom: var(--space-20);
	padding: 15px 18px;
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	resize: none;
}

/* Кнопка загрузки файла — красная во всю ширину, пунктирное подчёркивание вместо рамки */
.popup_product_trouble__form .popup-cv__input-file-label {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: none;
	width: 100%;
	height: 56px;
	margin-bottom: 0;
}

.popup_product_trouble__form .popup-cv__input-title {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
	text-decoration: none;
	border-bottom: 3px dotted var(--color-accent);
	padding-bottom: 2px;
}

/* Прикреплённый файл — скрепка/имя/размер/крестик-удаление, по макету 274:13006 */
.popup_product_trouble__form .file-inline-file {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.popup_product_trouble__form .files-name .f-wrap::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 18px;
	margin-right: var(--space-8);
	vertical-align: middle;
	background-color: var(--color-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M5 0C2.24 0 0 2.24 0 5v8a5 5 0 0 0 10 0V4a1 1 0 0 0-2 0v9a3 3 0 1 1-6 0V5a3 3 0 1 1 6 0v8a1 1 0 1 1-2 0V5a1 1 0 0 0-2 0v8a3 3 0 1 0 6 0V5c0-2.76-2.24-5-5-5z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M5 0C2.24 0 0 2.24 0 5v8a5 5 0 0 0 10 0V4a1 1 0 0 0-2 0v9a3 3 0 1 1-6 0V5a3 3 0 1 1 6 0v8a1 1 0 1 1-2 0V5a1 1 0 0 0-2 0v8a3 3 0 1 0 6 0V5c0-2.76-2.24-5-5-5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.popup_product_trouble__form .files-size {
	color: var(--color-text-muted);
}

.popup_product_trouble__form .files-storage-block {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.popup_product_trouble__form .del-but {
	position: relative;
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-color: var(--color-text);
	border-radius: var(--radius-round);
	cursor: pointer;
}

.popup_product_trouble__form .del-but::before,
.popup_product_trouble__form .del-but::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 1.5px;
	background-color: var(--color-text-invert);
}

.popup_product_trouble__form .del-but::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.popup_product_trouble__form .del-but::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- Модалка выбора города — по макету: крупная карточка, чёрная лупа,
   у каждого города радио-кружок (залит красным + белая точка у активного) --- */
.popup-choose-city {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 594px;
	max-height: calc(100vh - 40px);
	overflow-y: visible;
	padding: var(--space-50);
	border: none;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	max-width: calc(100vw - 40px);
}

.popup-choose-city__title {
	font-size: 26px;
	font-weight: var(--fw-bold);
	text-align: left;
	margin-bottom: var(--space-30);
}

.popup-choose-city__input {
	width: 100%;
	padding: 15px 20px 15px 46px;
	border: none;
	border-radius: var(--radius-md);
	background-color: var(--color-surface-muted);
	background-repeat: no-repeat;
	background-position: 18px center;
	background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='7.48649' cy='7.54023' rx='6.48649' ry='6.32978' stroke='%23050000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9458 12.2544L15.9999 16.2105' stroke='%23050000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.popup-choose-city__popular-citys-list {
	max-height: 18rem;
	overflow-y: auto;
	margin-top: var(--space-30);
	padding-right: var(--space-10);
	scrollbar-width: thin;
	scrollbar-color: var(--color-accent) var(--color-surface-muted);
	/* grid вместо column-count (main.css) — колоночная раскладка не
	   пересчитывала высоту контейнера сразу после скрытия части пунктов
	   фильтром, из-за чего карточка обрезалась при 1-2 совпадениях */
	column-count: initial;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 70px;
	align-content: start;
}

.popup-choose-city__popular-citys-list::-webkit-scrollbar {
	width: 4px;
}

.popup-choose-city__popular-citys-list::-webkit-scrollbar-track {
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

.popup-choose-city__popular-citys-list::-webkit-scrollbar-thumb {
	background-color: var(--color-accent);
	border-radius: var(--radius-md);
}

.popup-choose-city__popular-city-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-10);
	padding-left: 30px;
	margin-bottom: var(--space-20);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	cursor: pointer;
}

.popup-choose-city__popular-city-item.hide {
	display: none;
}

.popup-choose-city__popular-city-item:hover {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}

.popup-choose-city__popular-city-item--accent {
	font-weight: var(--fw-semibold);
}

.popup-choose-city__popular-city-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: var(--radius-round);
	background-color: var(--color-surface);
	border: 1px solid var(--color-text);
	box-sizing: border-box;
}

.popup-choose-city__popular-city-item.active::before {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='10' fill='%23FF0000'/%3E%3Ccircle cx='10' cy='10' r='4' fill='white'/%3E%3C/svg%3E");
	border: none;
}

.popup-choose-city__empty {
	margin-top: var(--space-30);
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--fs-md);
}

/* --- Попапы преимуществ (about-company__list) — вместо перехода на раздел --- */
.popup-advantage {
	display: none;
	align-items: flex-start;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: var(--space-30) var(--space-10);
	background: rgba(41, 41, 41, 0.37);
	z-index: 200;
	overflow-y: auto;
}

.popup-advantage.active {
	display: flex;
}

.popup-advantage__wrapper {
	position: relative;
	max-width: 660px;
	width: 100%;
	margin: 0 auto;
	padding: var(--space-50);
	background-color: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
}

.popup-advantage__title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	margin-bottom: var(--space-24);
}

.popup-advantage__content p {
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	color: var(--color-text);
	margin-bottom: var(--space-16);
}

.popup-advantage__content p:last-child {
	margin-bottom: 0;
}

.popup-advantage__subtitle {
	font-weight: var(--fw-semibold) !important;
}

.popup-advantage a {
	color: var(--color-accent);
	text-decoration: underline;
}

.popup-advantage__list {
	margin-bottom: var(--space-16);
}

.popup-advantage__list li {
	position: relative;
	padding-left: var(--space-20);
	font-size: var(--fs-md);
	margin-bottom: var(--space-10);
}

.popup-advantage__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-round);
	background-color: var(--color-accent);
}

.popup-advantage__card {
	padding: var(--space-20) var(--space-24);
	margin-bottom: var(--space-16);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-lg);
}

.popup-advantage__card:last-child {
	margin-bottom: 0;
}

.popup-advantage__card h3 {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	margin-bottom: var(--space-10);
}

.popup-advantage__card p {
	font-size: var(--fs-md);
	margin-bottom: 0;
}

.popup-advantage__card .popup-advantage__list {
	margin-bottom: 0;
}

.popup-advantage__btn-close {
	position: absolute;
	top: var(--space-20);
	right: var(--space-20);
	width: 16px;
	height: 16px;
	background: no-repeat center / contain url("../img/redesign/icon-close.svg");
}

/* --- Страница «Заказ оформлен» (было: голая дефолтная таблица Bitrix) ---- */
.order-confirm {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	max-width: 720px;
	margin: 0 auto var(--space-30);
}

.order-confirm__row-cards {
	display: flex;
	gap: var(--space-12);
}

.order-confirm__row-cards .order-confirm__card {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 760px) {
	.order-confirm__row-cards {
		flex-direction: column;
	}
}

.order-confirm__header {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
	margin-bottom: var(--space-8);
}

.order-confirm__icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	background: url("../img/redesign/icon-check.svg") no-repeat center / contain;
}

.order-confirm__title {
	margin: 0 0 var(--space-8);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.order-confirm__subtitle {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--color-text);
}

.order-confirm__subtitle a {
	color: var(--color-accent);
	text-decoration: underline;
}

.order-confirm__card {
	padding: var(--space-20);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
}

.order-confirm__card--summary {
	background-color: var(--color-surface-muted);
	border: none;
}

.order-confirm__card-title {
	margin: 0 0 var(--space-16);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.order-confirm__rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-confirm__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-16);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.order-confirm__row-label {
	color: var(--color-text-secondary, #6b6b6b);
}

.order-confirm__row--total {
	font-weight: var(--fw-bold);
}

.order-confirm__comment {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--color-text);
}

.order-confirm__items {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-confirm__item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: var(--space-16);
}

.order-confirm__item-img {
	display: block;
	width: 48px;
	height: 48px;
}

.order-confirm__item-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.order-confirm__item-name {
	grid-column: 2 / 4;
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	transition: color var(--transition);
}

.order-confirm__item-name:hover {
	color: var(--color-accent);
}

.order-confirm__item-qty {
	grid-column: 2;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary, #6b6b6b);
}

.order-confirm__item-price {
	grid-column: 3;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-align: right;
}

.order-confirm__card--pay {
	margin-top: var(--space-12);
}

@media (max-width: 1200px) {
	.news {
		padding-top: 50px;
	}

	.news__top {
		justify-content: flex-start;
	}

	/* Раньше полностью прятали (было завязано на абсолютное позиционирование
	   над табами, которое на мобиле съезжало) — теперь показываем в обычном
	   потоке: заголовок "Новости"/"Статьи" + ссылка "Все новости"/"Все статьи"
	   (уже стилизована в .section-head__link — красная, пунктир, стрелка). */
	.news-slider__head {
		position: static;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-12);
		margin-bottom: var(--space-20);
	}

	.news-slider__nav {
		display: none;
	}
}

@media (max-width: 760px) {
	.news__top {
		flex-wrap: wrap;
		margin-bottom: var(--space-20);
	}

	.news__title-news,
	.news__title-article {
		padding: var(--space-10) var(--space-14);
		font-size: var(--fs-sm);
	}

	.news-card__img-wrapper {
		height: 180px;
		margin-bottom: var(--space-12);
	}

	.news-card__date {
		top: var(--space-12);
		left: var(--space-12);
		padding: var(--space-8) var(--space-12);
		font-size: var(--fs-sm);
	}
}

/* --- Секция «Видео» ----------------------------------------------------- */
/* Вложена в .news, поэтому gap главной её не касается */
.videos-section {
	margin-top: var(--section-gap);
	padding: var(--section-pad) 0;
	background-color: var(--color-surface-muted);
}

.videos-section__inner {
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	margin: 0 auto;
	padding: 0 var(--layout-pad);
}

.news__video-top {
	padding-top: 0;
}

.news__video-title {
	margin: 0;
}

.news__video-slider-wrapper {
	padding-bottom: 0;
}

.news .news__video-slider-wrapper .swiper-wrapper {
	padding-bottom: 0;
}

.news-video-card {
	position: static;
	display: block;
	max-width: none;
	height: auto;
}

.news-video-card__preview {
	position: relative;
	display: block;
	height: 216px;
	margin-bottom: var(--space-20);
	overflow: hidden;
	border-radius: var(--radius-xl);
	background-color: var(--color-surface-alt);
}

/* Старая иконка Youtube из main.css — вместо неё красная кнопка из макета */
.news-video-card::after {
	content: none;
}

.news-video-card__img {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 60px;
	background: var(--color-accent) url("../img/redesign/icon-play.svg") no-repeat center / 22px 22px;
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.news-video-card:hover .news-video-card__play {
	background-color: var(--color-accent-hover);
}

.news-video-card__name {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	color: var(--color-text);
	transition: color var(--transition);
}

.news-video-card:hover .news-video-card__name {
	color: var(--color-accent);
}

@media (max-width: 1200px) {
	.videos-section {
		margin-top: 50px;
		padding: 50px 0;
	}
}

@media (max-width: 760px) {
	.news-video-card__preview {
		height: 200px;
		margin-bottom: var(--space-12);
	}

	.news-video-card__play {
		width: 60px;
		height: 46px;
		background-size: 18px 18px;
	}
}

/* --- Страница «Видео» (/video/) — карточки и фильтры по макету ---------- */
.video-main__video-cards-wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--space-20);
	row-gap: var(--space-20);
}

.video-main__video-card.news-video-card {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.video-main__selectors-wrapper {
	column-gap: var(--space-20);
	row-gap: var(--space-20);
}

.video-main__select {
	width: 304px;
}

.video-main__select .choices__inner,
.video-main__select .is-open .choices__inner {
	min-height: 56px;
	border-color: var(--color-text);
	border-radius: 11px;
}

/* "Показать больше" — без рамки-пилюли, с иконкой обновления слева, по макету 340:41849 */
.video-main__more-video-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	border: none;
	background: none;
	font-weight: var(--fw-semibold);
}

.video-main__more-video-btn::before {
	content: '';
	width: 26px;
	height: 22px;
	background: no-repeat center / contain url("../img/redesign/icon-show-more.svg");
}

/* --- Страница новости (/news/...) — сайдбар "вернуться" + дата + шеринг по
   макету 293:25140 (был единственной колонкой без сайдбара) --------------- */
.article-main__layout {
	display: grid;
	grid-template-columns: 385px minmax(0, 1fr);
	gap: var(--space-40);
	align-items: start;
}

.article-main__content img {
	/*max-width: 100%;
	height: auto;
	border-radius: var(--radius-xl);*/
}

/* main.css задаёт фото новости height:460px + object-fit:cover — вертикальные
   изображения обрезались сверху и снизу. Показываем целиком */
.textblock1_news-detail .textblock1__photo {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 620px;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

/* Дата теперь показывается в бейдже сайдбара, дублирующий текст в начале контента скрываем */
.article-main__content>p:first-child {
	/*display: none;*/
}

.article-main__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	grid-column: 1;
}

.article-main__content {
	grid-column: 2;
}

.article-main__back-btn {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	height: 60px;
	padding: 0 var(--space-20);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-xl);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-decoration: none;
}

.article-main__back-arrow {
	width: 9px;
	height: 14px;
	flex-shrink: 0;
	background-color: var(--color-text);
	transform: rotate(180deg);
	-webkit-mask: url("../img/redesign/arrow-slider-next.svg") no-repeat center / contain;
	mask: url("../img/redesign/arrow-slider-next.svg") no-repeat center / contain;
}

.article-main__sidebar-card {
	padding: var(--space-20);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.article-main__date-badge {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 var(--space-14);
	margin-bottom: var(--space-20);
	background-color: var(--color-accent);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-invert);
}

.article-main__share {
	padding-top: var(--space-20);
	border-top: 1px solid var(--color-border);
}

.article-main__share-title {
	display: block;
	margin-bottom: var(--space-16);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.article-main__share-list {
	display: flex;
	gap: var(--space-12);
}

.article-main__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background-color: #F2F2F2;
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.article-main__share-btn:hover {
	background-color: var(--color-border);
}

.article-main__share-btn svg {
	width: 28px;
	height: 28px;
}

.article-main__share-btn svg path {
	fill: var(--color-text);
}

@media (max-width: 1200px) {
	.article-main__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.article-main__sidebar {
		order: -1;
		grid-column: 1;
	}

	.article-main__content {
		grid-column: 1;
	}
}

/* --- Страница «Производители» (/brands/) — 5 карточек 304px в ряд по макету, не резиновые 23% --- */
.manufacturers-list-main {
	padding-left: 0;
	padding-right: 0;
}

.manufacturer-card {
	width: 304px;
	max-width: 304px;
	min-width: 304px;
	background-color: var(--color-surface);
}

.manufacturer-card__inner {
	padding-bottom: 47.4%;
}

.manufacturer-card__img {
	object-fit: contain;
	padding: var(--space-16);
}

@media (max-width: 480px) {
	.manufacturer-card {
		width: 100%;
		min-width: 0;
		max-width: none;
	}
}

/* --- Страница «Сертификаты» (/dokumenty/sertifikaty/) — карточки-ссылки
   вместо маркированного скролл-списка, серый фон + иконка загрузки как в макете --- */
.certificates-main__bottom-list[class] {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-20);
	row-gap: var(--space-20);
	max-height: 220px !important;
	padding: var(--space-10) var(--space-10) var(--space-20);
	margin-left: 0;
	list-style: none;
	overflow-y: auto;
	scrollbar-width: none;
	scrollbar-color: var(--color-border) var(--color-surface-muted);
}

.certificates-main__bottom-list[class]::-webkit-scrollbar {
	width: 0;
}

.certificates-main__bottom-list[class]::-webkit-scrollbar-track {
	background: var(--color-surface-muted);
}

.certificates-main__bottom-list[class]::-webkit-scrollbar-thumb {
	background: var(--color-border);
}

.certificates-main__bottom-list[class]:hover {
	scrollbar-width: thin;
}

.certificates-main__bottom-list[class]:hover::-webkit-scrollbar {
	width: 6px;
}

.certificates-main__item-top {
	border: none !important;
}

.certificates-main__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-30);
}

.certificates-main__item {
	width: 100%;
	min-width: 0;
	max-width: none;
}

.certificates-main__link-item[class] {
	width: 385px;
	max-width: 100%;
	margin: 0;
	margin-left: 0;
	list-style: none;
}

.certificates-main__link {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	min-height: 100px;
	padding: var(--space-20);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-xl);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	text-decoration: none;
}

.certificates-main__link::before {
	content: '';
	flex-shrink: 0;
	width: 34px;
	height: 40px;
	background: no-repeat center / contain url("../img/redesign/icon-certificate-red.svg");
}

.certificates-main__link::after {
	content: none;
}

/* --- Страница «Для бизнеса» (/dlya-biznesa/) — тёмные карточки-плитки
   "С нами удобно" по макету (520x140, тёмно-серая заливка, белый текст) --- */
.business-main__cose-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-20);
}

@media (max-width: 1200px) {
	.business-main__cose-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.business-main__cose-list {
		grid-template-columns: 1fr;
	}
}

.business-main__cose-item {
	position: relative;
	max-width: none;
	min-height: 140px;
	padding: var(--space-24);
	background-color: #373333;
	background-image: url("../img/redesign/about-company_card-bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border: none;
	overflow: hidden;
}

@media (max-width: 1200px) {

	/* main.css прибивает карточку к 128x64px на мобильном — карточки должны тянуться по сетке */
	.business-main__cose-item {
		width: 100%;
		height: auto;
	}
}

.business-main__cose-item::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.45);
}

.business-main__cose-text {
	position: relative;
	z-index: 1;
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-invert);
}

/* --- "Готовы к сотрудничеству?" — заголовок + подзаголовок над кнопками -- */
/* забыли контейнер контенту — у .business-main нет боковых полей, в отличие от остальных секций сайта */
.business-main {
	padding: 0 var(--layout-pad);
}

.business-main__group-subtitle {
	display: block;
	max-width: 570px;
	margin: 0 auto var(--space-30);
	font-size: var(--fs-md);
	color: var(--color-text);
	text-align: center;
}

.business-main__obj-head .section-head__title {
	text-align: left;
}

/* --- "Наши объекты" (бизнес-страница) — всегда слайдер (был отдельно
   desktop-грид без слайдера и mobile-swiper), текст поверх фото с
   затемнением снизу, по макету 332:37525 ------------------------------- */
.business-main__obj-list {
	display: none !important;
}

.business-main__obj-list-mobile {
	display: block !important;
	padding: 0;
}

.business-main__obj-list-mobile .swiper-wrapper {
	align-items: stretch;
}

.business-main__obj-list-mobile .swiper-slide {
	height: auto;
}

.business-main__obj-list-mobile .swiper-pagination {
	display: none;
}

.business-main__obj-item-mobile {
	position: relative;
	max-width: none;
	height: 100%;
}

.business-main__obj-img-link {
	position: relative;
	height: 320px;
	margin-bottom: 0;
	border: none;
	border-radius: var(--radius-xl);
}

.business-main__obj-img-link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
}

.business-main__obj-title-link,
.business-main__obj-text {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 0 var(--space-20);
	text-align: left;
	color: var(--color-text-invert);
}

.business-main__obj-title-link {
	bottom: 56px;
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
}

.business-main__obj-text {
	bottom: var(--space-20);
	font-size: var(--fs-sm);
}

/* --- Подвал: сетка колонок ---------------------------------------------- */
/* Пропорции колонок из макета: лого / продукция / о компании / для бизнеса / контакты. */
.footer__main {
	display: grid;
	grid-template-columns: 293fr 274fr 177fr 267fr 267fr;
	align-items: start;
	-moz-column-gap: var(--space-40);
	column-gap: var(--space-40);
	row-gap: var(--space-40);
}

ul.footer__list,
.footer__list {
	margin-top: 0;
	padding-top: 0;
	padding-right: 0;
}

.footer__list:not(:last-child) {
	margin-right: 0;
}

/* template_styles.css грузится после redesign.css и рисует разделитель под
   первым пунктом каждого списка подвала — убираем (!important обязателен
   из-за порядка подключения, см. комментарий в header.php) */
.footer__list>.footer__item:first-child {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.footer__logo-box {
	margin-right: 0;
}

/* Колонка с двумя блоками («О компании» + «Документы») */
.footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

/* Заголовок-ссылка без списка: «Дилеры», «Производители», «Контакты» */
.footer__list--link .footer__item {
	margin-bottom: 0;
}

.footer__list--link .footer__list-link {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-loose);
	text-transform: uppercase;
	color: var(--color-text-invert);
}

.footer__list--link .footer__list-link:hover {
	color: var(--color-accent);
}

/* template_styles.css рисует стрелку-аккордеон для любого .footer__list > .footer__item:first-child —
   но «Дилеры»/«Производители»/«Контакты» это не заголовки секций (js_footer_list_title), а
   самостоятельные ссылки без раскрывающегося списка, и JS-обработчик клика по ним не навешен —
   стрелка была декоративной и нерабочей. Убираем её именно там. */
@media (max-width: 780px) {
	.footer__list>.footer__item:first-child:not(.js_footer_list_title):before {
		content: none;
	}
}

/* Заголовок списка отделён от пунктов на 30px, пункты — через 14px */
.footer__item.js_footer_list_title {
	margin-bottom: var(--space-30);
}

/* Колонка контактов */
.footer__list-contacts {
	display: flex;
	flex-direction: column;
	max-width: none;
	min-width: 0;
}

.footer__list-contacts .footer__item span {
	text-transform: none;
}

.footer__list-contacts .footer__item a,
.footer__list-contacts .footer__item {
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	line-height: var(--lh-loose);
	color: var(--color-text-invert);
	overflow-wrap: anywhere;
}

.footer__list-contacts .footer__item a:hover {
	color: var(--color-accent);
}

.footer__item--subtitle {
	margin-top: var(--space-24);
	margin-bottom: var(--space-30);
}

/* Адрес, телефон и почта — с белыми иконками из макета */
.footer__item--address,
.footer__item--tel,
.footer__item--mail {
	position: relative;
	padding-left: 28px;
	padding-right: 28px;
}

.footer__item--address::before,
.footer__item--tel::before,
.footer__item--mail::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.footer__item--address::before {
	width: 15px;
	height: 18px;
	background-image: url("../img/redesign/icon-pin-white.svg");
}

.footer__item--tel::before {
	width: 18px;
	height: 18px;
	background-image: url("../img/redesign/icon-phone-white.svg");
}

.footer__item--mail::before {
	width: 18px;
	height: 14px;
	top: 6px;
	background-image: url("../img/redesign/icon-mail-white.svg");
}

.footer .footer__item--call-back {
	margin-top: var(--space-24);
	opacity: 1;
}

/* Нижняя полоса: разделитель во всю ширину, контент — по контейнеру */
.footer__bottom {
	max-width: none;
	padding-top: 34px;
	padding-bottom: 34px;
	padding-left: max(var(--layout-pad), (100% - var(--layout-max)) / 2);
	padding-right: max(var(--layout-pad), (100% - var(--layout-max)) / 2);
	border-top: var(--border-width) solid var(--color-border-on-dark);
}

@media (max-width: 1200px) {
	.footer__main {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		-moz-column-gap: var(--space-30);
		column-gap: var(--space-30);
	}

	/* Логотип занимает всю первую строку — иначе на планшете он съедает
	   колонку и списки сжимаются до нечитаемой ширины. */
	.footer__logo-box {
		grid-column: 1 / -1;
	}
}

/* template_styles.css (грузится после redesign.css) задаёт колонкам подвала
   width: calc(25% - 15px) — внутри грид-ячейки это ломает раскладку. */
@media (min-width: 781px) and (max-width: 1200px) {

	.footer__logo-box,
	.footer__col,
	.footer__list {
		width: auto !important;
		max-width: none !important;
	}
}

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

	/* main.css рисует белую линию под логотипом на ≤920 — в редизайне её нет */
	.footer__logo-box {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

@media (max-width: 780px) {
	.footer__main {
		display: flex;
		flex-direction: column;
	}

	.footer__bottom {
		padding-top: var(--space-20);
		padding-bottom: var(--space-20);
	}
}

/* --- Крестик закрытия модалок и попапа выбора города --------------------- */
/* Единая иконка-крестик для ВСЕХ попапов сайта (десятки разных классов
   *__btn-close по всем компонентам) — атрибутный селектор по общему суффиксу
   класса вместо ручного перечисления, применяется ко всем без исключения. */
[class*="__btn-close"] {
	top: 1.5rem;
	right: 1.2rem;
	padding: 1rem;
	background-image: url("../img/redesign/icon-close.svg");
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity var(--transition);
}

[class*="__btn-close"]:hover {
	opacity: 0.6;
}

/* Крестик выбора города — визуально меньше, но кликабельная область больше */
.popup-choose-city__btn-close {
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
}

/* Крестик "Получить оптовые цены" — по запросу меньше стандартного */
.popup-get-wholesale-prices__btn-close {
	width: 14px;
	height: 14px;
}

@media (max-width: 760px) {
	.popup-write-to-boss__btn-close {
		background-image: url("../img/redesign/icon-close-white.svg");
	}
}

/* --- Полноэкранные модалки на мобиле (макеты 406:12061 "Выберите город" /
   406:11495 "Письмо директору" / 406:12549 "Услуги" (popup-advantage) /
   418:23145 "Проблема с товаром"): общая шапка 68px (заголовок слева +
   крестик-бокс 60×68 справа), карточка на весь экран без затемнения/скруглений. */
@media (max-width: 760px) {

	.popup-choose-city,
	.popup-write-to-boss,
	.popup-advantage,
	.popup_product_trouble,
	.popup-enter-email,
	.popup-get-wholesale-prices,
	.popup-buy-to-one-click {
		padding: 0;
		background: var(--color-surface);
	}

	.popup-choose-city,
	.popup-write-to-boss__wrapper,
	.popup-enter-email__wrapper,
	.popup-discount__wrapper,
	.popup-advantage__wrapper,
	.popup_product_trouble-wrapper {
		width: 100vw;
		max-width: none;
		height: 100vh;
		max-height: none;
		margin: 0;
		padding: calc(68px + var(--space-20)) var(--layout-pad) var(--space-20);
		background-color: var(--color-surface);
		border-radius: 0;
		box-shadow: none;
		overflow-y: auto;
	}

	/* .popup-choose-city сама себе оверлей (нет отдельной обёртки-фона, в отличие
	   от write-to-boss/advantage/trouble) — фиксируем на весь экран, а не relative */
	.popup-choose-city {
		position: fixed;
		top: 0;
		left: 0;
		transform: none;
	}

	.popup-write-to-boss__wrapper,
	.popup-enter-email__wrapper,
	.popup-discount__wrapper,
	.popup-advantage__wrapper,
	.popup_product_trouble-wrapper {
		position: relative;
	}

	.popup-choose-city__title,
	.popup-write-to-boss__title,
	.popup-advantage__title,
	.popup_product_trouble__top {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 68px;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0 84px 0 var(--layout-pad);
		font-size: var(--fs-xl);
		font-weight: var(--fw-bold);
		text-align: left;
		color: var(--color-text);
		background-color: var(--color-surface);
		border-bottom: var(--border-width) solid var(--color-border);
		z-index: 1;
	}

	.popup_product_trouble__top .popup_product_trouble__title {
		font-size: inherit;
		font-weight: inherit;
	}

	.popup-choose-city__btn-close,
	.popup-write-to-boss__btn-close,
	.popup-advantage__btn-close,
	.popup_product_trouble__btn-close,
	.popup-enter-email__btn-close,
	.popup-get-wholesale-prices__btn-close,
	.popup-buy-to-one-click__btn-close {
		top: 0;
		right: 0;
		width: 60px;
		height: 68px;
		background-color: var(--color-surface);
		background-image: url("../img/redesign/icon-close.svg");
		background-size: 20px;
		border-left: var(--border-width) solid var(--color-border);
		border-bottom: var(--border-width) solid var(--color-border);
		z-index: 2;
	}

	/* "Выберите город" — список городов в один столбец (в макете 375px нет
	   места под вторую колонку), поле поиска — на всю ширину */
	.popup-choose-city__popular-citys-list {
		grid-template-columns: 1fr;
		column-gap: 0;
		max-height: none;
	}
}



/* --- Мини-попап "Ваш город Москва?" — кнопки в общем стиле сайта --------- */
.popup-accept-city__buttons-list[class] {
	border-top: none;
}

.popup-accept-city__btn {
	height: 44px;
	padding: 0 var(--space-20);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	border-radius: var(--radius-md);
	transition: background-color var(--transition), color var(--transition);
}

.popup-accept-city__btn--yes {
	background-color: var(--color-text);
	color: var(--color-text-invert);
	border: none;
}

.popup-accept-city__btn--yes:hover {
	background-color: var(--color-accent);
}

.popup-accept-city__btn--no {
	background-color: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-text);
}

.popup-accept-city__btn--no:hover {
	background-color: var(--color-text);
	color: var(--color-text-invert);
}

/* На мобиле — не маленький плавающий блок в углу, а полноширинный бар прямо
   под шапкой ("Ваш город Москва? Выбрать другой") */
@media (max-width: 760px) {
	.popup-accept-city {
		position: fixed;
		top: 69px;
		left: 0;
		right: 0;
		width: 100%;
		padding: var(--space-16) var(--layout-pad);
		border: none;
		border-bottom: var(--border-width) solid var(--color-border);
		border-radius: 0;
		box-shadow: var(--shadow-sm);
	}

	.popup-accept-city__title {
		margin-bottom: var(--space-12);
		font-size: var(--fs-md);
		font-weight: var(--fw-medium);
	}

	.popup-accept-city__buttons-list[class] {
		border-top: none;
		padding-top: 0;
	}

	.popup-accept-city__btn {
		flex: 1 1 0;
		text-align: center;
	}
}

/* --- Карточка статьи на /articles/ (без лишнего текста/кнопки, по макету) - */
/* Убрали в шаблоне анонс-текст и дублирующую кнопку "Подробнее" (вложенный
   <a> внутри <a> — невалидный HTML), карточка стала компактнее — подгоняем
   высоту под новый минимальный контент (фото + заголовок). */
.article-main__card-list .news-articles-card {
	max-width: 385px;
	width: 100%;
	height: auto;
	border-radius: var(--radius-xl);
	/* main.css прячет карточки через display:none + .show-N (старая пагинация, .show-N нигде не добавляется) — всегда показываем */
	display: flex !important;
}

.article-main__card-list .news-articles-card__img {
	height: 230px;
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.article-main__card-list .news-articles-card__img-wrapper {
	position: relative;
}

.article-main__card-list .news-articles-card__date {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 11px var(--space-14);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-loose);
	color: var(--color-text-invert);
	background: var(--color-accent);
	border-radius: var(--radius-md);
}

.article-main__card-list .news-articles-card__bottom {
	height: auto;
	padding: var(--space-16) var(--space-20);
}

.article-main__card-list .news-articles-card__name {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	margin-bottom: 0;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.article-recommendation__inner .news-articles-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: none;
	width: 100%;
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	border: none;
}

.article-recommendation__inner .news-articles-card__img-wrapper {
	position: relative;
	height: auto;
	height: 256px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--ui-border-radius-md);
	border: var(--border-width) solid var(--color-border);
}

.article-recommendation__inner .news-articles-card__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform var(--transition);
}

.article-recommendation__inner .news-articles-card__date {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 11px var(--space-14);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-loose);
	color: var(--color-text-invert);
	background: var(--color-accent);
	border-radius: var(--radius-md);
}

.article-recommendation__inner .news-articles-card__bottom {
	display: flex;
	flex: 1 1 auto;
	height: auto;
	padding: var(--space-16) var(--space-20);
}

.article-recommendation__inner .news-articles-card__bottom>*:last-child {
	margin-bottom: 0;
}

.article-recommendation__inner .swiper-slide {
	display: flex;
	height: auto;
}

.article-recommendation__inner .swiper-slide .news-articles-card {
	height: 100%;
}

.article-recommendation__inner .news-articles-card__text {
	display: none;
}

.article-recommendation__inner .news-articles-card__name {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.article-recommendation__top {
	align-items: center;
	flex-wrap: nowrap;
	margin-bottom: var(--space-20);
}

/* заголовок сжимается и переносится сам, стрелки остаются в одной строке с ним */
.article-recommendation__top h2 {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}

.article-recommendation h2 {
	margin-bottom: 0;
}

.article-recommendation__button-prev,
.article-recommendation__button-next {
	display: block;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--radius-md);
	background-color: var(--color-text);
	background-image: none;
	position: relative;
}

.article-recommendation__button-prev {
	margin-left: auto;
	margin-right: var(--space-10);
}

.article-recommendation__button-prev::after,
.article-recommendation__button-next::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-text-invert);
	-webkit-mask: url("../img/redesign/arrow-tile-white.svg") no-repeat center / 18px 12px;
	mask: url("../img/redesign/arrow-tile-white.svg") no-repeat center / 18px 12px;
}

.article-recommendation__button-prev::after {
	transform: rotate(180deg);
}

.article-recommendation__button-prev.swiper-button-disabled,
.article-recommendation__button-next.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* --- Мега-меню «Каталог» в шапке — по макету (611:11748): широкая серая
   колонка категорий слева, справа сетка карточек-подкатегорий без картинок,
   с числом товаров и круглой кнопкой-стрелкой ------------------------------ */
.popup-catalog .popup-catalog__wrapper {
	max-width: 1760px;
	border-radius: 0;
}

.popup-catalog .popup-catalog__category-list {
	flex: 0 0 638px;
}

/* В макете строки категорий идут впритык (50px каждая), без зазора */
.popup-catalog .popup-catalog__categoty-item:not(:last-child) {
	margin-bottom: 0;
}

.popup-catalog .popup-catalog__categoty-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 50px;
	padding: 0 var(--space-10);
	font-weight: var(--fw-bold);
	transition: color 0.2s;
}

.popup-catalog .popup-catalog__categoty-btn:hover {
	color: var(--color-accent);
}

/* По макету стрелка — простая тонкая стрелка без фонового кружка/квадрата */
.popup-catalog .popup-catalog__categoty-btn::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-left: var(--space-10);
	background: no-repeat center / contain url("../img/redesign/arrow-tile-black.svg");
}

.popup-catalog .popup-catalog__categoty-btn:hover::after {
	background-image: url("../img/redesign/arrow-tile-red.svg");
}

.popup-catalog__categoty-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-right: var(--space-10);
	border-radius: var(--radius-md);
	object-fit: contain;
	background-color: var(--color-surface);
}

.popup-catalog__categoty-name {
	flex: 1;
}

.popup-catalog .popup-catalog__tab {
	flex: 1;
}

.popup-catalog .popup-catalog__tab-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-20);
}

.popup-catalog .popup-catalog__tab-item {
	width: auto;
	min-height: 100px;
	border-radius: var(--radius-xl);
	transition: border-color 0.2s;
}

.popup-catalog .popup-catalog__tab-item:hover {
	border-color: var(--color-accent);
}

.popup-catalog .popup-catalog__tab-item a {
	position: relative;
	height: 100%;
	padding: var(--space-20);
}

.popup-catalog .popup-catalog__tab-item img {
	display: none;
}

.popup-catalog .popup-catalog__tab-item-text {
	max-width: calc(100% - 56px);
	height: auto;
	justify-content: flex-start;
	gap: var(--space-10);
}

.popup-catalog .popup-catalog__tab-item-text h4 {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	margin-bottom: 0;
}

.popup-catalog .popup-catalog__tab-item-text span {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.popup-catalog .popup-catalog__tab-item::after {
	content: "";
	position: absolute;
	right: var(--space-20);
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: var(--color-text) no-repeat center / 16px url("../img/redesign/arrow-tile-white.svg");
	border-radius: var(--radius-md);
}

.popup-catalog .popup-catalog__tab-item:hover::after {
	background-color: var(--color-accent);
}

/* --- Меню «Категории» на странице раздела каталога (по макету) ---------- */
/* Раньше переиспользовался плиточный вид из бургер-меню шапки (карточки
   370px с картинкой и счётчиком товаров) — по макету это компактный
   вертикальный список в карточке с заголовком "Категории". */
.catalog__section-list {
	flex-shrink: 0;
	width: 318px;
}

.catalog__section-list-title {
	margin: 0 0 var(--space-16);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.catalog__section-list-card {
	padding: var(--space-20);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-text);
	border-radius: var(--radius-xl);
}

.catalog__section-list .popup-catalog__tab-inner {
	display: flex;
	flex-direction: column;
	column-gap: 0;
	row-gap: var(--space-8);
	margin-left: 1rem;
}

.catalog__section-list .popup-catalog__tab-item {
	width: auto !important;
	max-width: none !important;
	border: none;
	border-radius: 0;
}

.catalog__section-list .popup-catalog__tab-item a {
	display: flex;
	align-items: center;
	padding: 0;
}

.catalog__section-list .popup-catalog__tab-item::after {
	display: none;
}

.catalog__section-list .popup-catalog__tab-item-text {
	max-width: none;
	width: 100%;
	height: auto;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.catalog__section-list .popup-catalog__tab-item-text h4 {
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	color: var(--color-text);
	margin-bottom: 0;
}

.catalog__section-list .popup-catalog__tab-item-count {
	flex-shrink: 0;
	margin-left: auto;
	padding: 6px 8px;
	background-color: var(--color-surface-muted);
	border-radius: 10px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	line-height: 1;
	color: var(--color-text);
}

.catalog__section-list .popup-catalog__tab-item--active .popup-catalog__tab-item-text h4 {
	color: var(--color-accent);
}

/* Строка текущего раздела ("Замки  287") — активная, просто жирным,
   без стрелки (стрелка "назад" теперь у отдельной строки родителя выше).
   Без своих отступов — расстояние до следующего пункта задаёт row-gap
   родительского списка, как между всеми остальными пунктами */
.catalog__section-list .popup-catalog__tab-item--current .popup-catalog__tab-item-text h4 {
	font-weight: var(--fw-semibold);
}

.catalog__section-list .popup-catalog__tab-item--current .popup-catalog__tab-item-count {
	font-weight: var(--fw-semibold);
}

/* Строка родительской категории ("‹ Замки") — обычная ссылка наверх,
   без счётчика; стрелка назад стоит именно тут */
.catalog__section-list .popup-catalog__tab-item--parent .popup-catalog__tab-item-text h4 {
	font-weight: var(--fw-regular);
}

.catalog__section-list .popup-catalog__tab-item--parent .popup-catalog__tab-item-text::before {
	content: '';
	flex-shrink: 0;
	width: 7px;
	height: 12px;
	margin-right: var(--space-10);
	margin-left: -1rem;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 1L1 6L6 11' stroke='%23050000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.catalog__section-list .popup-catalog__tab-item--extra {
	display: none;
}

.catalog__section-list .js_section_list_inner.open .popup-catalog__tab-item--extra {
	display: block;
}

.catalog__section-list-more {
	display: block;
	margin-top: var(--space-16);
	padding: 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-accent);
	text-decoration: underline dashed;
	text-underline-offset: 3px;
	cursor: pointer;
}

.catalog__section-list-more:hover {
	color: var(--color-accent-hover);
}

/* Категории + фильтр стоят в общей левой колонке (318px, вертикальный
   flex), товары — рядом справа; секция.php оборачивает первые два блока
   в .catalog-main__sidebar, поэтому колонка не разъезжается по гриду.
   !important — компонентные style.css (catalog/.default, catalog.section.list/
   subsection_list) грузятся Bitrix-ом ПОСЛЕ redesign.css и содержат старое
   flex-wrap:wrap (нужен был для 3-колоночной плитки категорий до редизайна),
   из-за чего товары уезжали под сайдбар вместо колонки справа. */
.catalog-main__content-wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	column-gap: var(--space-30);
}

.catalog-main__sidebar {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	row-gap: var(--space-12);
	width: 318px;
}

.catalog-main__sidebar .catalog__section-list,
.catalog-main__sidebar .catalog-main__menu {
	width: auto;
	margin-right: 0;
	margin-bottom: 0;
}

@media(max-width: 1200px){
	.catalog-main__sidebar .catalog__section-list,
	.catalog-main__sidebar .catalog-main__menu {
		margin-bottom: 1rem;
		margin-left: .7rem;
	  margin-right: .7rem;
	}
}

.catalog-main__content {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none !important;
	width: auto !important;
}

/* Корневая /katalog/ — тайлы категорий тут единственный ребёнок обёртки, без
   сайдбара (категорий/фильтра нет), поэтому должны занимать всю ширину */
.catalog-main__content-wrapper>.accessories-tiles.catalog-tiles {
	flex: 1 1 auto;
	width: 100%;
}

@media (max-width: 1200px) {
	.catalog-main__content-wrapper {
		flex-direction: column;
	}

	.catalog-main__sidebar {
		width: 100%;
	}

	.catalog-main__content {
		width: 100% !important;
	}
}

/* --- Карточка «Фильтры» (custom:catalog.smart.filter) -------------------- */
.catalog-main__menu {
	padding: var(--space-20);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
}

.catalog-main__menu-title {
	margin: 0 0 var(--space-16);
	padding-bottom: var(--space-16);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

@media (max-width: 1200px) {
	.catalog-main__menu-title {
		display: none;
	}
}

/* Номер группы фильтров ("1. Направление открывания") убран по макету —
   $filterIter больше не выводится в шаблоне, оставлено только название */
.bx-filter-parameters-box-hint,
.catalog-main__filter-top h3 {
	font-family: var(--font-base);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.catalog-main__filter_element .bx-filter-param-text {
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
}

/* Шеврон группы фильтров: вверх — раскрыта, вниз — свёрнута */
.catalog-main__filter-top::after,
.bx-filter-parameters-box-title.catalog-main__filter-top::after {
	width: 13px;
	height: 8px;
	top: calc(50% - 4px);
	background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.36354 2.82802L11.3135 7.77802L12.7275 6.36402L6.36354 1.52588e-05L-0.000461578 6.36402L1.41354 7.77802L6.36354 2.82802Z' fill='%23050000'/%3E%3C/svg%3E");
	transform: rotate(180deg);
	transition: transform 0.25s ease;
}

.catalog-main__filter.open .catalog-main__filter-top::after,
.catalog-main__filter.open .bx-filter-parameters-box-title.catalog-main__filter-top::after {
	transform: rotate(0deg);
}

/* Чекбоксы фильтра: квадрат со скруглением, в checked — красная галочка */
.catalog-main__filter_element input[type="checkbox"]+.bx-filter-param-text::before,
.subscribe-info-cont .subscrube_agree {
	border: none;
	background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='3.5' stroke='%23050000'/%3E%3C/svg%3E") no-repeat center / contain;
}

.catalog-main__filter_element input[type="checkbox"]:checked+.bx-filter-param-text::before,
.subscribe-info-cont .subscrube_agree:checked {
	border: none;
	background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='3.5' stroke='%23FF0000'/%3E%3Cpath d='M6.28224 11.9999L3 8.80303L4.49577 7.34614L6.28224 9.09132L11.5042 3.99994L13 5.45682L6.28224 11.9999Z' fill='%23FF0000'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Группы фильтров за первыми шестью скрыты, пока не раскрыт список целиком */
.smartfilter .bx-filter-parameters-box:not(.bx-active) {
	display: none;
}

.smartfilter.smartfilter--open .bx-filter-parameters-box:not(.bx-active) {
	display: block;
}

/* Разделительная линия между группами фильтров — как под заголовком «Фильтры» */
.smartfilter .bx-filter-parameters-box.catalog-main__filter+.bx-filter-parameters-box.catalog-main__filter {
	margin-top: var(--space-16);
	padding-top: var(--space-16);
	border-top: 1px solid var(--color-border);
}

/* «Показать еще N» — красная ссылка с фирменным пунктирным подчёркиванием */
.menu_filter_link_more {
	width: fit-content;
	padding-bottom: 4px;
	border-bottom: 3px dotted var(--color-accent);
	color: var(--color-accent);
	text-decoration: none;
}

.menu_filter_link_more>p {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
}

/* Второй вариант подписи («Показать основные») виден только в раскрытом
   состоянии — базового правила, скрывающего его, в легаси-стилях не было */
.menu_filter_link_more p:nth-child(2) {
	display: none;
}

/* Мобильный "Фильтры" — полноэкранная модалка по макету 418:15055: шапка 68px
   (заголовок + крестик-бокс) + список групп фильтров под ней на весь экран. */
@media (max-width: 1200px) {
	.catalog-main__mobile-title.active {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 300;
		height: 68px;
		margin: 0;
		padding: 0 var(--layout-pad);
		background-color: var(--color-surface);
		border-bottom: var(--border-width) solid var(--color-border);
	}

	.catalog-main__mobile-title.active h2 {
		font-size: var(--fs-xl);
		font-weight: var(--fw-bold);
	}

	.catalog-main__mobile-title.active .catalog-main__mobile-filter-btn-close {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 68px;
		background-color: var(--color-surface);
		background-image: url("../img/redesign/icon-close.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 20px;
		border: 0;
		border-left: var(--border-width) solid var(--color-border);
	}

	.catalog-main__mobile-title.active .catalog-main__mobile-filter-btn-close svg {
		display: none;
	}

	.smartfilter.active {
		position: fixed;
		top: 69px;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		padding: var(--space-20) var(--layout-pad);
		background-color: var(--color-surface);
		overflow-y: auto;
		z-index: 299;
	}
}

/* Количество товаров под H1 категории — на десктопе по макету не выводится,
   но на мобиле (макет 411:14360) есть пилюля-бейдж рядом с заголовком */
.catalog-main__title--element_count {
	display: none;
}

@media (max-width: 1200px) {
	.catalog-main__title-wrapper {
		display: flex;
		align-items: center;
		gap: var(--space-8);
	}

	.catalog-main__title--element_count {
		display: flex !important;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: var(--space-6) var(--space-8);
		font-size: var(--fs-sm);
		font-weight: var(--fw-semibold);
		color: var(--color-text);
		background-color: var(--color-surface-muted);
		border-radius: var(--radius-sm);
	}
}

/* --- Пагинация каталога по макету 233:4229: по центру, чёрные квадратные
   стрелки по бокам, страницы — квадраты 40x40, активная — с рамкой ------- */
.catalog-main__bottom {
	margin-top: 4rem;
}

.catalog-main__show-buttons {
	display: none;
}

.catalog-main__pagination {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
}

.catalog-main__pagination a,
.catalog-main__pagination .pagination-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Сбрасываем легаси-отступы и подчёркивание из main.css, завязанные на
   позицию элемента (first/last-child) — расстояние задаёт gap контейнера */
.catalog-main__pagination a:first-child,
.catalog-main__pagination a:last-child,
.catalog-main__pagination a {
	margin: 0;
	text-decoration: none;
}

.catalog-main__pagination a:hover {
	background-color: var(--color-surface-muted);
	color: var(--color-accent);
}

.catalog-main__pagination a.active {
	border: 1px solid var(--color-text);
	color: var(--color-text);
}

.catalog-main__pagination a.active:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background-color: var(--color-surface);
}

.catalog-main__pagination a.un-active {
	opacity: 0.4;
	pointer-events: none;
}

.catalog-main__pagination .pagination-arrow {
	position: relative;
	font-size: 0;
	background-color: var(--color-text);
}

.catalog-main__pagination a.pagination-arrow:hover {
	background-color: var(--color-accent);
}

.catalog-main__pagination .pagination-arrow--disabled {
	background-color: var(--color-border);
	cursor: default;
	pointer-events: none;
}

.catalog-main__pagination .pagination-arrow::before {
	content: '';
	width: 16px;
	height: 16px;
	background-color: var(--color-text-invert);
	-webkit-mask: url("../img/redesign/arrow-slider-next.svg") no-repeat center / contain;
	mask: url("../img/redesign/arrow-slider-next.svg") no-repeat center / contain;
}

.catalog-main__pagination .pagination-arrow--prev::before {
	transform: scaleX(-1);
}

/* Чёрная кнопка-пилюля "Показать все фильтры" / "Скрыть фильтры" */
.catalog-main__menu-show {
	display: block;
	width: 100%;
	margin-top: var(--space-20);
	padding: var(--space-16) var(--space-30);
	background-color: var(--color-text);
	border-radius: var(--radius-pill);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text-invert);
	text-align: center;
	cursor: pointer;
}

.catalog-main__menu-show:hover {
	background-color: var(--color-accent);
}

.catalog-main__menu-show span:nth-child(2) {
	display: none;
}

.smartfilter--open .catalog-main__menu-show span:nth-child(1) {
	display: none;
}

.smartfilter--open .catalog-main__menu-show span:nth-child(2) {
	display: inline;
}

/* "Сбросить все фильтры" — жирная ссылка по центру под кнопкой,
   подчёркивание dashed (не сплошная линия) */
#del_filter.catalog-main__menu-link {
	margin-top: var(--space-20);
	width: 100%;
	background: none;
	border: none;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	text-align: center;
	text-decoration: underline dashed;
	text-underline-offset: 3px;
	color: var(--color-text);
	cursor: pointer;
}


/* --- Загрузка каталога при переключении фильтров ------------------------- */
/* Контейнер, который JCSmartFilter.insertToNodeCustom перезаписывает через
   AJAX (весь .catalog-main) — на время запроса блюрим старое содержимое
   и показываем спиннер по центру поверх всего. Контейнер может быть выше
   экрана, поэтому спиннер "липкий" по вертикали — держится по центру
   ТЕКУЩЕГО видимого окна, а не середины всего (иногда очень длинного) блока */
.js_catalog-loading {
	position: relative;
}

.js_catalog-loading>*:not(.catalog-loading-overlay) {
	filter: blur(4px);
	pointer-events: none;
	user-select: none;
}

.catalog-loading-overlay {
	position: absolute;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}

.catalog-loading-spinner {
	position: sticky;
	top: 50vh;
	margin: 0 auto;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
}

.catalog-loading-spinner::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border: 4px solid var(--color-border);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: catalog-loading-spin 0.8s linear infinite;
}

@keyframes catalog-loading-spin {
	to {
		transform: rotate(360deg);
	}
}

/* "Подобрано товаров XXX" — попап скрыт по просьбе (пока) */
.main__modef,
.catalog-main__filter-result {
	display: none !important;
}

/* --- Страница «Дилеры» (/kontakty/dealers/) ------------------------------ */
/* Список дилеров: тонкий вертикальный скроллбар (было: только для Chrome,
   цвет — акцентный красный на белом; ::-moz-scrollbar в Firefox не существует
   как псевдоэлемент — используем реальные scrollbar-width/scrollbar-color). */
.dealers-main__list {
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) var(--color-surface-muted);
	overflow-x: hidden;
	padding-bottom: var(--space-20);
	scroll-padding-bottom: var(--space-20);
}

.dealers-main__item {
	height: auto;
	min-height: 180px;
	flex-shrink: 0;
}

.dealers-main__address,
.dealers-main__phone,
.dealers-main__email,
.dealers-main__link {
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
	overflow-wrap: anywhere;
}

.dealers-main__address {
	color: var(--color-text-secondary);
}

.dealers-main__list::-webkit-scrollbar {
	width: 7px;
	height: 0;
	background-color: var(--color-surface-muted);
}

.dealers-main__list::-webkit-scrollbar-thumb {
	background-color: var(--color-border);
	border-radius: var(--radius-xs);
}

.dealers-main__list::-webkit-scrollbar:horizontal {
	display: none;
}

/* Выбранная карточка дилера — раньше заливалась акцентным фоном целиком
   (плюс инверсия цвета текста в main.css), из-за чего только последняя
   кликнутая карточка была красной, остальные — нет. По просьбе — вместо
   заливки только акцентная рамка, фон и цвет текста остаются обычными. */
.dealers-main__item.accent {
	background-color: transparent;
	border-color: var(--color-accent);
	border-width: 2px;
}

.dealers-main__item.accent *[class] {
	color: inherit;
}

/* Карта: секторы регионов по умолчанию серые (было — синеватые #D2D7E0 из
   /include/map.php); собственный !important-стиль на регион генерируется
   в components/bitrix/news.list/dealers/template.php из данных админки —
   бьём его специфичностью выше (два класса контейнера + атрибут) и
   !important, но не трогаем уже выбранный/наведённый регион (path--red/cyan). */
.dealers-main__card.map-main__card svg .region[data-region]:not(.path--red):not(.path--cyan) {
	fill: var(--color-border) !important;
}

/* /include/dealers_page/styles.php (вне репозитория) хардкодит выбранный
   регион в #FF3E3E — приводим к настоящему accent color */
.dealers-main__card.map-main__card svg .region.path--red {
	fill: var(--color-accent) !important;
}

/* template_styles.css зануляет отступ секции (section.dealers-main{margin-bottom:0}),
   из-за чего кнопка "Стать дилером" наслаивается на следующий контент страницы. */
section.dealers-main {
	margin-bottom: var(--section-gap);
}

@media (max-width: 768px) {

	/* SVG карты принудительно 430px (template_styles.css), а .dealers-main__card
	   зафиксирован короче (290px/190px в main.css) — карта вылезает за карточку,
	   и кнопка под ней накладывается на карту. Высота карточки — не меньше SVG. */
	.dealers-main__card {
		height: auto;
		min-height: 430px;
	}
}

/* кнопка вынесена из .dealers-main__card на отдельную строку (см. template.php) — вертикальные отступы вместо только margin-bottom */
.dealers-main__card__btn {
	margin: var(--space-40) 0;
}

.default__btn {
	border-radius: var(--radius-md);
}

/* --- Страница «Наши объекты» (/nashi-obekty/) — карта/сайдбар/вкладки ---- */
.objects-main-search-list li.active {
	background: var(--color-text);
	color: var(--color-text-invert);
}

.objects-main-map.js_objects_main_card svg .region:not(.path--blue):not(.path--red):not(.path--cyan) {
	fill: var(--color-border) !important;
}

.objects-main-map.js_objects_main_card svg .path--blue {
	fill: var(--color-border-strong) !important;
}

.objects-main-map.js_objects_main_card svg .path--red,
.objects-main-map.js_objects_main_card svg .path--cyan {
	fill: var(--color-accent) !important;
}

.objects-main-tabs-links {
	justify-content: flex-start;
}

.objects-main-tabs-links li {
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: transparent;
	color: var(--color-text);
}

.objects-main-tabs-links li.active {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-accent);
}

.objects-main-tabs-links li:hover:not(.active) {
	background: transparent;
	border-color: var(--color-text);
}

/* 4 карточки в ряд (были 3), пропорционально уменьшаем сами карточки вдвое */
.objects-main-tabs-items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-20);
}

.objects-main-item {
	width: 100%;
	max-width: none;
	min-width: 0;
	padding: var(--space-16) var(--space-12);
	margin-top: 0;
	aspect-ratio: auto;
	min-height: 240px;
	max-height: none;
	justify-content: flex-start;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.objects-main-item::before {
	content: none;
}

.objects-main-item-title,
.objects-main-item-text {
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	padding: 4px 6px;
	background: rgba(0, 0, 0, 0.72);
}

.objects-main-item-title {
	font-size: var(--fs-sm);
}

.objects-main-item-text {
	font-size: 12px;
	margin-top: var(--space-8);
}

.block-delivery__photo img {
	object-position: left center;
}

.about-main--dealer h1 {
	margin-bottom: var(--space-30);
}

.about-main--dealer h2 {
	margin: var(--space-40) 0 var(--space-16);
	font-size: var(--section-title-size);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	overflow-wrap: anywhere;
}

.about-main--dealer p,
.about-main--dealer li {
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
}

.about-main--dealer p {
	margin: 0 0 var(--space-16);
}

.about-main--dealer ul {
	margin: 0 0 var(--space-24);
	padding-left: var(--space-24);
	list-style: disc;
}

.about-main--dealer li {
	margin: var(--space-8) 0;
	padding-left: 0;
	list-style: inherit;
}

.about-main--dealer li::before {
	content: none;
}

.about-main--dealer li::marker {
	color: var(--color-accent);
}

.about-main--dealer a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

/* В тексте из CMS есть встроенный синий цвет ссылок. */
.about-main--dealer a span {
	color: inherit !important;
}

.about-main--dealer a:hover {
	color: var(--color-accent-hover);
}

.about-main--dealer a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

.about-main--dealer .dealer-files {
	padding-left: 0;
	list-style: none;
}

.about-main--dealer .dealer-file {
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
	max-width: 100%;
	min-height: 44px;
}

.about-main--dealer .dealer-file::before {
	content: "";
	flex: 0 0 34px;
	width: 34px;
	height: 40px;
	background: center / contain no-repeat;
}

.about-main--dealer .dealer-file--doc::before {
	background-image: url("../img/redesign/icon-document-doc.svg");
}

.about-main--dealer .dealer-file--pdf::before {
	background-image: url("../img/redesign/icon-document-pdf.svg");
}

/* --- Страница «Контакты» (/kontakty/) — карточки по макету вместо голого
   вертикального списка текстов (адрес/режим работы/телефон/почта) --- */
.main-contacts__content {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-20);
	row-gap: var(--space-20);
	max-width: 790px;
	min-width: 0;
	width: 100%;
}

.main-contacts__tab-article {
	box-sizing: border-box;
	width: 385px;
	max-width: 100%;
	min-height: 144px;
	padding: var(--space-20);
	border: var(--border-width) solid var(--color-text);
	border-radius: var(--radius-xl);
}

.main-contacts__tab-article:not(:last-child) {
	margin-bottom: 0;
}

.main-contacts__article-title {
	color: var(--color-text);
}

/* --- Страница «Контакты» (/kontakty/) — перестроена под макет 298:26563:
   без табов, единый блок 4 карточек (адрес/режим/телефон/почта), затем
   2 серые карточки с текстом + карта справа --- */
.contacts-info-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-20);
	margin: 0 0 var(--space-20);
	padding: 0;
	list-style: none;
}

.contacts-info-list__item {
	box-sizing: border-box;
	min-width: 0;
	padding: var(--space-20);
	border: var(--border-width) solid var(--color-text);
	border-radius: var(--radius-xl);
}

.contacts-info-list__title {
	margin-bottom: var(--space-10);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.contacts-info-list__text {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 400;
	color: var(--color-text);
}

.contacts-info-list__text--accent a,
.contacts-info-list__text--accent {
	color: var(--color-accent);
	text-decoration: underline;
	font-weight: var(--fw-medium);
}

@media (max-width: 1200px) {
	.contacts-info-list {
		grid-template-columns: 1fr;
	}

	.contacts-info-list__item {
		padding: var(--space-16);
	}

	.contacts-info-list__title,
	.contacts-info-list__text {
		font-size: var(--fs-sm);
	}
}

.contacts-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-20);
	margin-bottom: var(--space-40);
}

.contacts-details__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	min-width: 0;
}

.contacts-details__card {
	box-sizing: border-box;
	padding: var(--space-30);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-xl);
}

.contacts-details__card-title {
	margin-bottom: var(--space-20);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.contacts-details__card-text {
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text);
	white-space: pre-line;
}

.contacts-details__map {
	min-width: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.contacts-details__map img,
.contacts-details__map iframe,
.contacts-details__map>div {
	width: 100%;
	height: 100%;
	min-height: 360px;
	border-radius: var(--radius-xl);
	object-fit: cover;
}

@media (max-width: 1200px) {
	.contacts-details {
		grid-template-columns: 1fr;
	}

	.contacts-details__card {
		padding: var(--space-16);
	}

	.contacts-details__card-title {
		font-size: var(--fs-lg);
	}

	.contacts-details__card-text {
		font-size: var(--fs-sm);
	}

	.contacts-details__map img,
	.contacts-details__map iframe,
	.contacts-details__map>div {
		min-height: 280px;
	}
}

.contacts-staff-heading {
	margin: 0 0 var(--space-30);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

@media (max-width: 1200px) {
	.contacts-staff-heading {
		margin-bottom: var(--space-16);
		font-size: var(--fs-xl);
	}
}

/* Заголовок-дубль H1 на /kontakty/ скрыт по просьбе */
.main-contacts__title {
	display: none;
}

.main-contacts:has(> .subscribe-info-cont) {
	padding-inline: var(--layout-pad);
}

.main-contacts:has(> .subscribe-info-cont) > .main-contacts__title {
	display: block;
	font-size: var(--page-title-size);
	margin-bottom: var(--space-30);
}

.subscribe-info-cont {
	width: 100%;
	max-width: 560px;
}

.subscribe-info-cont:has(#subscribe-email) {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--space-12) var(--space-10);
}

.subscribe-info-cont .subscribe-info,
.subscribe-info-cont .subscribe-label,
.subscribe-info-cont .addSubscribe,
.subscribe-info-cont .error-subscrube {
	grid-column: 1 / -1;
	margin: 0;
}

.subscribe-info-cont #subscribe-email {
	grid-column: 1 / -1;
	min-width: 0;
	min-height: 54px;
	margin: 0;
	padding: var(--space-12) var(--space-16);
	font-size: var(--fs-md);
}

.subscribe-info-cont .subscrube_agree {
	appearance: none;
	-webkit-appearance: none;
	margin: 1px 0 0;
	cursor: pointer;
}

.subscribe-info-cont .subscrube_agree:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.subscribe-info-cont .subscrube_agree_lbl {
	min-width: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.subscribe-info-cont .error-subscrube {
	color: var(--color-accent);
}

.subscribe-info-cont .addSubscribe {
	margin-top: var(--space-8);
}

.subscribe-info-cont #addNewSubscribe {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: var(--space-12) var(--space-30);
}

/* Карточки сотрудников — были узкие вертикальные мини-карточки (150px,
   фото 64px), по макету широкие горизонтальные (520px, фото 152px) */
.main-contacts__staff-block-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	column-gap: var(--space-20);
	row-gap: var(--space-20);
}

.main-contacts__staff-block:not(:last-child) {
	margin-bottom: var(--space-40);
}

.main-contacts__staff-block-title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.staff-card {
	flex-direction: row;
	align-items: flex-start;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: var(--space-20);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	text-align: left;
}

.staff-card__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.staff-card__img {
	flex-shrink: 0;
	width: 152px;
	height: 152px;
	margin-bottom: 0;
	margin-right: var(--space-20);
	object-fit: cover;
}

.staff-card__name {
	margin-bottom: var(--space-12);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
}

.staff-card__position {
	margin-bottom: var(--space-16);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
}

.staff-card__email {
	margin-bottom: var(--space-16);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-accent);
	text-decoration: underline;
}

.staff-card__tel {
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
}

/* --- Страница «Сотрудники» (/kontakty/sotrudniki/) — вёрстка без обёртки
   .main-contacts (нет её max-width/padding), из-за чего контент растягивался
   во всю ширину без контейнера. Даём то же ограничение ширины прямо на
   списке вкладок — на /kontakty/ (где обёртка есть) это не мешает, т.к.
   значения совпадают с родителем */
.main-contacts__tabs-list {
	max-width: var(--layout-max);
	padding: 0 var(--space-10);
	margin: 0 auto var(--space-50);
}

.main-contacts__tabs-list::before {
	content: 'Наша команда';
	display: none;
	margin-bottom: var(--space-30);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

/* Заголовок нужен только на отдельной странице /kontakty/sotrudniki/,
   где нет обёртки .main-contacts (на /kontakty/ там уже есть свой h1) */
body:not(:has(.main-contacts)) .main-contacts__tabs-list::before {
	display: block;
}

@media (max-width: 1200px) {
	.main-contacts__tabs-list {
		padding: 0 var(--space-20);
	}
}

/* --- Страница «Для бизнеса» — блок "Напишите нам" (кнопки заявки/входа)
   и "Наши объекты" уже есть в разметке, но были стилизованы неверно:
   обе кнопки были красные-пилюли, нужна чёрная + чёрная контурная --- */
.business-main__button {
	border-radius: var(--radius-md);
}

.business-main__button--dark {
	background-color: var(--color-text);
	color: var(--color-text-invert);
}

.business-main__button--light {
	background-color: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-text);
}

.business-main__obj-img-link {
	border: none;
	border-radius: var(--radius-lg);
}

/* ============================================================
   Личный кабинет — общий вид (сайдбар, карточки, ссылки),
   по макетам 340:42003 (главная ЛК) и соседним разделам.
   Правим только БАЗОВЫЕ (desktop, без @media) правила —
   мобильная accordion-логика (main.css, @media max-width:1200px)
   не трогается, чтобы не сломать JS-переключение сайдбара.
   ------------------------------------------------------------ */
.office-my-profile__menu-item {
	border-bottom: none;
}

.office-my-profile__menu-item a,
.office-my-profile__menu-item button {
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.office-my-profile__menu-item.active a {
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
}

.office-my-profile__logout-btn {
	display: flex;
	justify-content: flex-start !important;
	align-items: center;
	gap: var(--space-16);
}

.office-my-profile__logout-btn svg {
	flex-shrink: 0;
}

.office-my-profile__top h1,
.office-my-profile__content>h1 {
	font-size: var(--fs-4xl);
	font-weight: var(--fw-bold);
}

/* --- Страница "Мой профиль" (bx_profile) — оборачиваем в карточку,
   как у остальных разделов ЛК ------------------------------------- */
.office-my-profile__content.bx_profile {
	padding: var(--space-30);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.office-my-profile__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-24);
}

.office-my-profile__top h1 {
	font-size: var(--fs-2xl);
}

.office-my-profile__change-dates-btn {
	padding: var(--space-14) var(--space-24);
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
	background-color: transparent;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-pill);
	transition: background-color var(--transition), color var(--transition);
}

.office-my-profile__change-dates-btn:hover {
	color: var(--color-text-invert);
	background-color: var(--color-accent);
}

.office-my-profile__photo-wrapper {
	margin-bottom: var(--space-24);
}

.office-my-profile__photo {
	width: 101px;
	height: 101px;
	border-radius: var(--radius-round);
	overflow: hidden;
}

.office-my-profile__lebel {
	margin-bottom: var(--space-16);
}

.office-my-profile__lebel span {
	display: block;
	margin-bottom: var(--space-6);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.office-my-profile__lebel p {
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.office-my-profile__sale-wrapper {
	margin-top: var(--space-24);
	padding-top: var(--space-24);
	border-top: 1px solid var(--color-border);
}

.office-my-profile__sale-title {
	margin-bottom: var(--space-14);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
}

.office-my-profile__sale-level span,
.office-my-profile__next-level span {
	font-weight: var(--fw-bold);
	color: var(--color-accent);
}

.office-my-profile__back-btn,
.office-my-profile__leave-btn {
	margin-top: var(--space-16);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-decoration: underline;
}

@media (max-width: 1200px) {
	
	.office-my-profile__left-menu {
		border: none;
		display: flex;
		flex-direction: row;
		width: 100%;
		gap: 1px;
		overflow-x: auto;
		
	}
	
	.office-my-profile__menu-item {
		 white-space: nowrap;
		margin: 0;
		padding: 0;
	}
	
	.office-my-profile__menu-item:first-child,  
	.office-my-profile__menu-item:last-child {
		border: none;
	}
	
	.office-my-profile__menu-item:last-child svg {
		display: none;
	}
	
	.office-my-profile__menu-item.active {
		text-decoration: underline;
		text-decoration-color: var(--color-accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}
	
	.office-my-profile__left-menu .office-my-profile__menu-item a:after{
		display: none;
	}
	
}

/* --- Страница "Мой профиль" (форма, без модалки) ---------------------- */
.profile-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	margin-bottom: var(--space-40);
}

.profile-form__messages:has(> :not(script)) {
	margin-bottom: var(--space-16);
}

.profile-form__messages .errortext {
	display: block;
	padding: var(--space-14) var(--space-20);
	color: #B00000;
	font-weight: var(--fw-semibold);
	background-color: rgba(255, 0, 0, 0.06);
	border: 1px solid #B00000;
	border-radius: var(--radius-md);
}

.profile-form__messages table.starter,
.profile-form__messages .bx-message {
	display: block;
	width: 100%;
	padding: var(--space-14) var(--space-20);
	color: #157347;
	font-weight: var(--fw-semibold);
	background-color: rgba(21, 115, 71, 0.08);
	border: 1px solid #157347;
	border-radius: var(--radius-md);
}

.profile-form__field input:invalid:not(:placeholder-shown),
.profile-form__field input.has-error {
	border-color: var(--color-accent);
}

.profile-form__card {
	padding: var(--space-30);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.profile-form__card-title {
	margin-bottom: var(--space-24);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.profile-form__card>.office-main__avatar {
	margin-bottom: var(--space-24);
}

.profile-form__fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-20);
	margin-bottom: var(--space-24);
}

.profile-form__field {
	position: relative;
	flex: 1 1 250px;
	min-width: 200px;
}

.profile-form__field-row {
	display: flex;
	flex: 1 1 100%;
	gap: var(--space-20);
}

.profile-form__field-row .profile-form__field {
	flex: 1 1 calc(50% - var(--space-10));
}

/* На мобиле телефон уходит на строку под e-mail */
@media (max-width: 1200px) {
	.profile-form__field-row {
		flex-wrap: wrap;
	}

	.profile-form__field-row .profile-form__field {
		flex: 1 1 100%;
	}
}

.profile-form__field span {
	display: block;
	margin-bottom: var(--space-6);
	font-family: var(--font-alt);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.profile-form__required {
	font-style: normal;
	color: var(--color-accent);
}

.profile-form__field input,
.profile-form__field select {
	width: 100%;
	height: 54px;
	padding: 0 var(--space-16);
	font-family: var(--font-base);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.profile-form__field input:focus,
.profile-form__field select:focus {
	outline: none;
	border-color: var(--color-accent);
}

.profile-form__field-hint {
	display: block;
	margin-top: var(--space-6);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.profile-form__field-error {
	display: block;
	margin-top: var(--space-6);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
}

.profile-form__field--error input,
.profile-form__field--error select {
	border-color: var(--color-accent);
}

.profile-form__field--error span {
	color: var(--color-accent);
}

.profile-form__save-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: auto;
	padding: var(--space-14) var(--space-24);
	font-weight: var(--fw-semibold);
	color: var(--color-text-invert);
	background-color: var(--color-text);
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color var(--transition);
}

.profile-form__save-btn:hover {
	background-color: var(--color-accent);
}

.profile-form__subscribe {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-10);
}

/* --- Карточки главной ЛК (office-main__*) --------------------------- */
.office-main__item {
	max-width: none;
	max-height: none;
	padding: var(--space-30);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.office-main__item-title {
	margin-bottom: var(--space-6);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

/* Карточка профиля ("Мой профиль") — выделена как в макете, серый фон, без рамки */
.office-main__item--company {
	background-color: var(--color-surface-muted);
	border: none;
}

.office-main__item--company .office-main__name-row span:last-child {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
}

.office-main__more-link a {
	color: var(--color-accent);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px;
}

.office-my-profile__content>h1 {
	margin-bottom: var(--space-30);
}

.office-main__item:not(.office-main__item--company) .office-main__item--item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: var(--space-20);
}

.office-main__item:not(.office-main__item--company) .office-main__card-icon {
	margin-bottom: 0;
}

.office-main__card-content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.office-main__card-content .office-main__more-link {
	margin-top: auto;
}

.office-main__profile-edit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	color: var(--color-accent);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.office-main__profile-edit-link svg {
	flex-shrink: 0;
}

.office-main__loyalty-level strong {
	display: inline-block;
	margin-left: var(--space-6);
	padding: var(--space-6) var(--space-10);
	color: var(--color-text-invert);
	background-color: var(--color-accent);
	border-radius: var(--radius-md);
}

.office-main__order-select-form.office-my-profile__find-form {
	display: none;
}

.office-main__empty-text a {
	color: var(--color-accent);
	text-decoration: underline;
}

.office-main__active-orders-row span:nth-child(1),
.office-main__active-orders-row span:nth-child(2),
.office-main__finiched-orders-row span:nth-child(1),
.office-main__finiched-orders-row span:nth-child(2) {
	font-weight: 500;
	text-decoration: none;
}

.office-main__addres-count-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Иконка вверху карточки (История заказов/Адреса/Программа лояльности/Помощь) */
.office-main__card-icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: var(--space-20);
}

/* Профиль — аватар слева + имя/контакты справа ------------------------- */
.office-main__profile-row {
	display: flex;
	align-items: stretch;
	flex: 1;
	gap: var(--space-40);
}

.office-main__avatar {
	position: relative;
	flex-shrink: 0;
	width: 160px;
	height: 160px;
}

.office-main__avatar-circle {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
	border: 4px solid var(--color-text);
	background: rgba(0, 0, 0, 0.7)
}

.office-main__avatar-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.office-main__avatar-placeholder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	opacity: 0.5;
	pointer-events: none;
}

.office-main__avatar-placeholder svg {
	width: 100%;
	height: 100%;
}

.office-main__avatar-upload-btn {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-text);
	border: 2px solid var(--color-surface);
	cursor: pointer;
	pointer-events: none;
	z-index: 2;
}

.office-main__item--company .office-main__avatar-upload-btn {
	border-color: var(--color-surface-muted);
}

.office-main__avatar-upload-btn svg {
	width: 20px;
	height: 20px;
}

.office-main__avatar-upload-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.office-main__avatar-form {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.office-main__avatar-spinner {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	background-color: rgba(5, 0, 0, 0.5);
	border-radius: 50%;
}

.office-main__avatar-spinner::before {
	content: '';
	display: block;
	width: 32px;
	height: 32px;
	border: 3px solid var(--color-surface);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: catalog-loading-spin 0.8s linear infinite;
}

.office-main__avatar.uploading .office-main__avatar-spinner {
	display: flex;
}

.office-main__profile-info {
	min-width: 0;
	padding-top: var(--space-6);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.office-main__profile-info .office-main__name-row:last-child {
	margin-bottom: 0;
}

.office-main__item--company .office-main__item--item {
	position: relative;
}

.office-main__profile-link {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--color-text);
	border-radius: var(--radius-md);
	transition: background-color var(--transition);
}

.office-main__profile-link:hover {
	background-color: var(--color-accent);
}

.office-main__profile-link svg {
	flex-shrink: 0;
}

/* --- Список заказов (office-my-profile__orders-*) -------------------
   main.css писался под старую flex-разметку (div'ы) и всё ещё цепляется к
   текущим <table>/<tr>/<td> через class/nth-child — сбрасываем ровно те
   свойства (display, column-gap, flex-basis, шрифт), которые протекают в
   новую разметку, остальное таблица считает сама (auto table layout,
   без фиксированных px-ширин колонок). */
.office-my-profile__orders-list {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 var(--space-10);
}

.office-my-profile__orders-item-titles {
	display: table-header-group;
	background-color: var(--color-surface-muted);
	margin-bottom: 0;
}

.office-my-profile__orders-item-titles th {
	padding: var(--space-16) var(--space-20);
	font-weight: var(--fw-bold);
	text-align: left;
	vertical-align: middle;
}

.office-my-profile__orders-item {
	display: table-row;
	column-gap: normal;
	align-items: normal;
}

.office-my-profile__orders-item td {
	padding: var(--space-16) var(--space-20);
	text-align: left;
	vertical-align: middle;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	font-size: inherit !important;
	font-weight: inherit !important;
}

.office-my-profile__orders-item td>a,
.office-my-profile__orders-item td>span {
	flex-basis: auto !important;
}

.office-my-profile__orders-item td:first-child {
	border-left: 1px solid var(--color-border);
	border-top-left-radius: var(--radius-xl);
	border-bottom-left-radius: var(--radius-xl);
}

.office-my-profile__orders-item td:last-child {
	border-right: 1px solid var(--color-border);
	border-top-right-radius: var(--radius-xl);
	border-bottom-right-radius: var(--radius-xl);
}

/* --- Кнопки фильтра статуса (вместо select), по макету --------------- */
.office-my-profile__orders-filter-buttons {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: var(--space-10);
	margin-bottom: var(--space-16);
	scrollbar-width: thin;
	scrollbar-color: var(--color-accent) var(--color-surface-muted);
}

.office-my-profile__orders-filter-buttons::-webkit-scrollbar {
	height: 6px;
}

.office-my-profile__orders-filter-buttons::-webkit-scrollbar-track {
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-round);
}

.office-my-profile__orders-filter-buttons::-webkit-scrollbar-thumb {
	background-color: var(--color-accent);
	border-radius: var(--radius-round);
}

.office-my-profile__orders-filter-btn {
	flex-shrink: 0;
	padding: var(--space-14) var(--space-16);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	background-color: var(--color-surface-muted);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.office-my-profile__orders-filter-btn.active {
	color: var(--color-accent);
	background-color: var(--color-surface);
	border-color: var(--color-accent);
}

.office-my-profile__orders-filters-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-16);
	margin-bottom: var(--space-20);
}

.office-my-profile__orders-label {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	margin-right: 0;
	font-weight: var(--fw-bold);
}

.office-my-profile__orders-label span {
	font-weight: var(--fw-bold);
}

.office-my-profile__orders-date-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.office-my-profile__orders-date-wrapper svg {
	position: absolute;
	left: var(--space-16);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	flex-shrink: 0;
	z-index: 2;
}

.office-my-profile__orders-date-wrapper input[type="date"] {
	position: relative;
	padding-left: 44px;
}

.office-my-profile__orders-date-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
	-webkit-appearance: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	color: transparent;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.office-my-profile__orders-date-wrapper input[type="date"]::-webkit-clear-button,
.office-my-profile__orders-date-wrapper input[type="date"]::-webkit-inner-spin-button {
	display: none;
}

.office-my-profile__orders-label input,
.office-my-profile__orders-class {
	height: 54px;
	padding: 0 var(--space-16);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.office-my-profile__orders-item-status,
.office-my-profile__orders-item-payment {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}

/* цвет надписи статуса = цвет её SVG-иконки */
.office-my-profile__orders-item-status--done,
.office-my-profile__orders-item-payment--done {
	color: var(--color-success);
}

.office-my-profile__orders-item-status--pending,
.office-my-profile__orders-item-payment--pending {
	color: var(--color-warning);
}

/* main.css: .office-my-profile__orders-item a:nth-child(1) (0,2,1) иначе перекрашивает ссылку "Оплатить" в зелёный */
a.office-my-profile__orders-item-payment--pending {
	color: var(--color-warning) !important;
}

.office-my-profile__orders-item-status--canceled {
	color: var(--color-accent);
}

.office-my-profile__orders-item-status svg,
.office-my-profile__orders-item-payment svg {
	flex-shrink: 0;
}

.office-my-profile__orders-item a.office-my-profile__orders-detail-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	color: var(--color-accent);
	font-weight: var(--fw-semibold);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px;
}

.office-my-profile__orders-item a:nth-child(5) {
	color: var(--color-accent);
}

.office-my-profile__orders-item a:nth-child(5)::before {
	background-image: url("../img/redesign/arrow-tile-red.svg") !important;
}

/* Список заказов на мобиле и планшете (макет 488:51410): вместо таблицы —
   карточки, в каждой строке жирная подпись слева и значение справа. Подписи
   берём из data-label у <td>, поэтому разметка остаётся таблицей на десктопе.
   До 1024px шесть колонок сжимались до ~125px и текст рвался на 3 строки,
   а сама таблица растягивала документ по горизонтали (футер выходил уже
   страницы) — поэтому карточки включены и на планшете. */
@media (max-width: 1024px) {

	/* .office-my-profile__orders-list в селекторе обязателен: в устаревшем
	   кэш-бандле Битрикса page_*.css лежит
	   `.office-my-profile__orders-list .office-my-profile__orders-item{display:table-row}`
	   (0,2,0) — одноклассовое правило ему проигрывает, строка оставалась
	   table-row и не растягивалась на всю ширину колонки. */
	.office-my-profile__orders-list,
	.office-my-profile__orders-list tbody,
	.office-my-profile__orders-list .office-my-profile__orders-item {
		display: block;
		width: auto;
	}

	.office-my-profile__orders-item-titles {
		display: none;
	}

	.office-my-profile__orders-list {
		border-spacing: 0;
	}

	.office-my-profile__orders-item {
		padding: var(--space-20);
		margin-bottom: var(--space-10);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
	}

	.office-my-profile__orders-list .office-my-profile__orders-item td {
		display: flex;
		align-items: center;
		gap: var(--space-10);
		width: auto;
		padding: 0 0 var(--space-20);
		border: none;
		/* базовое правило выше стоит с !important — перебиваем тем же */
		font-size: var(--fs-sm) !important;
	}

	.office-my-profile__orders-item td::before {
		content: attr(data-label);
		flex: 0 0 143px;
		font-weight: var(--fw-bold);
		color: var(--color-text);
	}

	.office-my-profile__orders-item td:first-child,
	.office-my-profile__orders-item td:last-child {
		border-radius: 0;
	}

	.office-my-profile__orders-item-detail-cell {
		padding-bottom: 0;
	}

	.office-my-profile__orders-item-detail-cell::before {
		content: none;
	}

	.office-my-profile__orders-item a.office-my-profile__orders-detail-link {
		font-size: var(--fs-md);
		text-decoration-style: solid;
	}
}

/* Фильтры заказов на мобиле: больший отступ под кнопками статусов и
   компактные поля дат в одну строку (в main.css у label max-width:128px,
   из-за чего поле с иконкой-календарём наезжало на соседнее). */
@media (max-width: 1200px) {
	.office-my-profile__orders-filter-buttons {
		margin-bottom: var(--space-10);
		padding-bottom: var(--space-10);
	}

	.office-my-profile__orders-filters-wrapper {
		flex-wrap: nowrap;
		gap: var(--space-10);
		margin-bottom: var(--space-30);
	}

	.office-my-profile__orders-label {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		margin: 0;
		gap: var(--space-6);
	}

	.office-my-profile__orders-label span {
		font-size: var(--fs-sm);
	}

	.office-my-profile__orders-date-wrapper {
		flex: 1 1 auto;
		min-width: 0;
	}

	.office-my-profile__orders-date-wrapper svg {
		left: var(--space-10);
		width: 16px;
		height: 16px;
	}

	.office-my-profile__orders-label input,
	.office-my-profile__orders-date-wrapper input[type="date"] {
		width: 100%;
		min-width: 0;
		height: 44px;
		margin-right: 0;
		padding: 0 var(--space-8) 0 32px;
		font-size: var(--fs-sm);
	}
}

/* --- Информация о заказе (office-my-profile__order-detalies-*) ------- */
.office-my-profile__order-detalies-repeat-btn {
	background-color: var(--color-text);
	border-radius: var(--radius-md);
}

/* "Правила возврата" переиспользует тот же класс кнопки, но по макету
   это просто подчёркнутая красная ссылка на серой плашке */
.office-my-profile__order-detalies--subtop .office-my-profile__order-detalies-repeat-btn {
	padding: var(--space-24) var(--space-30);
	background-color: var(--color-surface-muted);
	color: var(--color-accent);
	text-decoration: underline;
}

.office-my-profile__order-detalies-sum-box,
.office-my-profile__order-detalies-info-box {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
}

/* --- Отмена заказа (bx_my_order_cancel) ------------------------------ */
.office-my-profile__orders__backlink {
	display: inline-block;
	margin-bottom: var(--space-20);
	color: var(--color-accent);
	font-weight: var(--fw-medium);
	text-decoration: underline;
}

.bx_my_order_cancel {
	font-size: var(--fs-md);
	line-height: 1.5;
}

.bx_my_order_cancel a {
	color: var(--color-accent);
	font-weight: var(--fw-bold);
	text-decoration: underline;
}

.bx_my_order_cancel textarea {
	font-family: inherit;
	font-size: var(--fs-md);
	padding: var(--space-16);
}

.bx_my_order_cancel input[type="submit"] {
	margin-top: var(--space-20);
	padding: var(--space-16) var(--space-30);
	background-color: var(--color-text);
	color: var(--color-surface);
	border: none;
	border-radius: var(--radius-md);
	font-weight: var(--fw-bold);
}

/* --- Мои покупки (office-my-profile__purchases-*) --------------------
   Карточка товара по макету node-id=353-15816: фото 160×140, колонка
   «артикул → название → инфо о заказе → наличие», затем количество,
   цена и чёрная кнопка «Купить». */
.office-my-profile__purchases-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	width: 100%;
}

.office-my-profile__purchases-item {
	align-items: center;
	gap: var(--space-30);
	padding: var(--space-30);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.office-my-profile__purchases-item:not(:last-child) {
	margin-bottom: 0 !important;
}

.office-my-profile__purchases-photo-link {
	display: block;
	flex: 0 0 160px;
	margin-right: 0;
	line-height: 0;
}

.office-my-profile__purchases-photo-link img {
	width: 160px;
	height: 140px;
	object-fit: contain;
	border: none;
	border-radius: var(--radius-xl);
}

.office-my-profile__purchases-item-right-part {
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: row;
	align-items: center;
	gap: var(--space-30);
}

.office-my-profile__purchases-item-info {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: var(--space-12);
}

.office-my-profile__purchases-item-code {
	display: flex;
	gap: var(--space-6);
	margin-bottom: 0;
}

.office-my-profile__purchases-item-code span:nth-child(1),
.office-my-profile__purchases-item-code span:nth-child(2) {
	margin-right: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.office-my-profile__purchases-item-name h4 {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-text);
}

.office-my-profile__purchases-item-last-order-info {
	margin-top: var(--space-8);
	margin-bottom: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	line-height: var(--lh-loose);
	color: var(--color-text);
}

/* ссылка на заказ внутри строки — тем же чёрным, что и остальной текст
   (глобальные правила для <a> красят её в акцент) */
.office-my-profile__purchases-item-last-order-info a[href] {
	color: var(--color-text) !important;
}

.office-my-profile__purchases-item-last-order-info a[href]:hover {
	color: var(--color-accent) !important;
}

.office-my-profile__purchases-item-stock {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	margin-top: var(--space-8);
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	color: var(--color-text) !important;
}

.office-my-profile__purchases-item-stock::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-round);
	background-color: var(--color-success);
}

.office-my-profile__purchases-item-stock.sold::before {
	background-color: var(--color-border-strong);
}

.office-my-profile__purchases-item-rp-bottom {
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-30);
	margin-top: 0;
}

.office-my-profile__purchases-item-qty {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	white-space: nowrap;
}

.office-my-profile__purchases-price-wrapper {
	align-items: flex-end;
	min-width: 100px;
}

.office-my-profile__purchases-price-wrapper span:nth-child(1) {
	font-family: var(--font-base);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	color: var(--color-placeholder);
}

.office-my-profile__purchases-price-wrapper span:nth-child(2) {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-text);
	white-space: nowrap;
}

.office-my-profile__purchases-bye-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 50px;
	padding: 0 var(--space-16);
	background-color: var(--color-text);
	border-radius: var(--radius-md);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text-invert);
	transition: background-color 0.2s ease;
}

.office-my-profile__purchases-bye-btn:hover {
	background-color: var(--color-accent);
}

/* планшет: цена/количество/кнопка уходят под описание */
@media (max-width: 1200px) {
	.office-my-profile__purchases-item-right-part {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-16);
	}

	.office-my-profile__purchases-item-rp-bottom {
		justify-content: flex-start;
		gap: var(--space-20);
	}
}

/* --- Мои покупки: фильтр «тип фильтра → значение» ---------------------
   Первое поле — тип (категория / дата / товар), второе показывается под
   выбранный тип (класс .hide / .active переключает inline-скрипт шаблона).
   !important — легаси-правила в main.css заданы цепочками с :nth-child
   (специфичность до 0,6,0), простым классом их не перебить. */
.office-my-profile__purchases-top .office-my-profile__find-form .__select {
	height: 56px;
}

/* легаси прижимало «по дате» вправо (margin-left:auto) — теперь это просто
   второе поле фильтра и оно должно стоять сразу за первым */
.office-my-profile__purchases-top .office-my-profile__find-form .__select:nth-child(4) {
	margin-left: 0;
}

.office-my-profile__purchases-top .office-my-profile__find-form .__select.hide {
	display: none !important;
}

.office-my-profile__purchases-top .office-my-profile__find-form .__select__title {
	height: 56px;
	margin-bottom: 0 !important;
	padding: var(--space-16) var(--space-20) !important;
	border: 1px solid var(--color-text) !important;
	border-radius: var(--radius-md) !important;
	font-size: var(--fs-md) !important;
	font-weight: var(--fw-medium) !important;
	color: var(--color-text);
}

.office-my-profile__purchases-top .__select[data-state="active"] .__select__title {
	border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
	border-bottom-color: transparent !important;
}

.office-my-profile__purchases-top .office-my-profile__find-form .__select__content {
	top: 56px;
	border: 1px solid var(--color-text) !important;
	border-top: none !important;
	border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* легаси прятало первый пункт списка — это «Категория»/«Дата», т.е. сброс фильтра */
.office-my-profile__purchases-top .office-my-profile__find-form .__select__content label:nth-child(2) {
	display: flex;
}

.office-my-profile__purchases-top .__select[data-state="active"] .__select__label {
	max-height: 60px;
}

.office-my-profile__purchases-top .office-my-profile__find-form .__select__label {
	padding: var(--space-12) var(--space-20);
	border-radius: 0;
	font-size: var(--fs-sm);
	color: var(--color-text);
}

.office-my-profile__purchases-search input {
	height: 56px;
	padding: var(--space-16) 46px var(--space-16) var(--space-20) !important;
	border: 1px solid var(--color-text) !important;
	border-radius: var(--radius-md) !important;
	font-size: var(--fs-md) !important;
	font-weight: var(--fw-medium) !important;
	color: var(--color-text);
}

.office-my-profile__purchases-search button {
	top: 50%;
	right: var(--space-20);
	transform: translateY(-50%);
}

/* --- Мои покупки: мобильная версия (макет node-id=488-53861) ----------
   Порядок на странице: H1 → фильтр (тип + значение) → список карточек.
   Внутри карточки: фото слева, справа артикул → название → инфо о
   заказе → наличие → цена → «Купить». */
@media (max-width: 780px) {
	.office-my-profile__purchases {
		align-items: stretch;
	}

	/* фильтр показываем сразу, кнопка-аккордеон «Фильтры» не нужна */
	.office-my-profile__purchases-mobile-top {
		display: none !important;
	}

	.office-my-profile__purchases-top {
		display: block !important;
		width: 100%;
		margin-bottom: var(--space-20);
	}

	.office-my-profile__purchases-top .office-my-profile__find-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		width: 100% !important;
	}

	.office-my-profile__purchases-top .office-my-profile__find-form .__select {
		width: 100% !important;
		margin: 0 !important;
	}

	.office-my-profile__purchases-top .office-my-profile__find-form .__select__title,
	.office-my-profile__purchases-top .office-my-profile__find-form .__select__content {
		width: 100% !important;
	}

	.office-my-profile__purchases-search {
		width: 100% !important;
		margin: 0 !important;
	}

	.office-my-profile__purchases-search input {
		width: 100%;
	}
}

/* --- Мои покупки: карточка на мобиле (макет node-id=488-53861) --------
   Фото 87×76 слева, справа артикул → название → инфо о заказе →
   наличие, ниже строка «цена / количество» и кнопка «Купить». */
@media (max-width: 760px) {
	/* --- карточка товара (макет node-id=488-53861) --- */
	.office-my-profile__purchases-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		width: 100%;
	}

	.office-my-profile__purchases-item {
		align-items: flex-start;
		gap: var(--space-12);
		padding: var(--space-20) !important;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
	}

	.office-my-profile__purchases-item:not(:last-child) {
		margin-bottom: 0 !important;
	}

	.office-my-profile__purchases-photo-link {
		position: static;
		flex: 0 0 87px;
		margin: 0;
	}

	.office-my-profile__purchases-photo-link img {
		width: 87px;
		height: 76px;
		border: none;
		border-radius: var(--radius-xl);
	}

	.office-my-profile__purchases-item-right-part {
		flex: 1 1 auto;
		min-width: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-12);
	}

	.office-my-profile__purchases-item-info {
		gap: var(--space-10);
	}

	.office-my-profile__purchases-item-code span:nth-child(1),
	.office-my-profile__purchases-item-code span:nth-child(2) {
		font-size: var(--fs-2xs);
	}

	.office-my-profile__purchases-item-name h4 {
		font-size: var(--fs-xs);
	}

	.office-my-profile__purchases-item-last-order-info {
		max-width: none;
		margin-top: 0;
		font-size: var(--fs-xs);
	}

	.office-my-profile__purchases-item-stock {
		margin-top: 0;
		font-size: var(--fs-xs);
	}

	/* цена и количество в одну строку, кнопка «Купить» — под ними */
	.office-my-profile__purchases-item-rp-bottom {
		position: static;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--space-12);
		margin-top: 0;
	}

	.office-my-profile__purchases-item-qty {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		font-size: var(--fs-sm);
	}

	.office-my-profile__purchases-price-wrapper {
		grid-column: 1;
		grid-row: 1;
		align-items: flex-start;
		min-width: 0;
		margin-bottom: 0;
	}

	.office-my-profile__purchases-price-wrapper span:nth-child(1) {
		font-size: var(--fs-xs);
	}

	.office-my-profile__purchases-price-wrapper span:nth-child(2) {
		font-size: var(--fs-md);
	}

	.office-my-profile__purchases-bye-btn {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
		height: 50px;
		padding: 0 var(--space-16);
		border-radius: var(--radius-md);
		font-size: var(--fs-md);
		font-weight: var(--fw-semibold);
	}
}

/* --- Попап выхода из аккаунта (popup-exit) ---------------------------- */
.popup-exit {
	padding: var(--space-20);
}

.popup-exit__wrapper {
	max-width: 480px;
	padding: var(--space-40) var(--space-30);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
}

.popup-exit__title {
	margin-bottom: var(--space-30);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
}

.popup-exit__buttons-wrapper {
	flex-direction: row;
	gap: var(--space-10);
	width: 100%;
}

.popup-exit__btn-submit,
.popup-exit__btn-cansel {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 50px;
	padding: var(--space-14) var(--space-20);
	background-color: var(--color-text);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text-invert);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease-out;
}

.popup-exit__btn-submit:hover,
.popup-exit__btn-cansel:hover {
	background-color: var(--color-accent);
	color: var(--color-text-invert);
}

/* на мобиле карточка остаётся по центру, а не разворачивается на весь экран */
@media (max-width: 760px) {
	.popup-exit {
		padding: var(--space-20);
	}

	.popup-exit__wrapper {
		width: 100%;
		height: auto;
		padding: var(--space-30) var(--space-20);
		border-radius: var(--radius-xl);
	}

	.popup-exit__title {
		margin-bottom: var(--space-20);
		font-size: var(--fs-xl);
	}

	.popup-exit__btn-submit,
	.popup-exit__btn-cansel {
		width: auto;
		margin: 0;
		padding: var(--space-14) var(--space-16);
		background-color: var(--color-text);
		font-size: var(--fs-sm);
		color: var(--color-text-invert);
	}
}

/* --- Мои скидки (office-my-profile__discounts-*) ---------------------- */
.office-my-profile__discounts-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

/* --- Виджет прогресса скидки (product-main__credit-*) -----------------
   Общий переиспользуемый виджет ($userDiscount->output(), внешний класс,
   разметку поменять нельзя) — показывается на странице «Мои скидки»,
   в корзине (уже подключен через PERSONAL_DISCOUNT_HTML) и на товаре.
   По макету node-id=350-14762: белая карточка, серая шкала, красная
   заливка, кружок с текущим % на конце заливки, 0% слева / макс.% справа. */
.product-main__credit-wrapper--12-percentage {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--space-30);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.product-main__sale-wrapper--12-percentage p {
	margin: 0;
	font-weight: var(--fw-regular);
	color: var(--color-text);
	font-size: var(--fs-sm);
}

.product-main__sale-wrapper--12-percentage p span {
	font-weight: var(--fw-bold);
}

.product-main__credit-inner--12-percentage {
	position: relative;
	margin-bottom: var(--space-40);
	gap: var(--space-16);
}

.product-main__credit-inner--12-percentage::before {
	content: "0%";
	order: -1;
	flex-shrink: 0;
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.product-main__credit-bar--12-percentage {
	flex: 1 1 auto;
	width: auto;
	height: 10px;
	background-color: var(--color-surface-muted);
	border: none;
	border-radius: var(--radius-sm);
}

.product-main__credit-bar--12-percentage::before {
	content: none;
}

.product-main__credit-bar--12-percentage .product-main__credit-bar-scale--1,
.product-main__credit-bar--12-percentage .product-main__credit-bar-scale--2,
.product-main__credit-bar--12-percentage .product-main__credit-bar-scale--3 {
	display: none;
}

.product-main__credit-bar-progress--person {
	background-color: var(--color-accent) !important;
	background-image: none;
	border-radius: var(--radius-sm);
}

.product-main__credit-bar-progress:after {
	content: none;
	background-image: none;
}

/* кружок с текущим % — поверх правого края заливки */
.product-main__credit-bar-num--12-percentage[class] {
	position: absolute !important;
	top: 50% !important;
	right: 0 !important;
	bottom: auto;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background-color: var(--color-accent);
	border: 3px solid var(--color-surface);
	border-radius: var(--radius-round);
	color: var(--color-text-invert);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	white-space: nowrap;
	transform: translate(50%, -50%) !important;
	z-index: 12;
}

.product-main__credit-sum {
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.product-main__credit-sum p {
	margin: 0;
}

.product-main__credit-fixed-sum {
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	width: 100%;
	margin-top: var(--space-24);
	transform: none;
	text-align: center;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.product-main__credit-fixed-sum::before {
	content: "Сумма выкупа ";
	font-weight: var(--fw-regular);
	color: var(--color-text);
}

.office-my-profile__discounts-info .product-main__credit-bar-progress--person,
.office-my-profile__discounts-info .product-main__credit-bar--person {
	background-color: var(--color-accent) !important;
}

.office-my-profile__credit-text {
	max-width: none;
	padding: var(--space-30);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-xl);
}

/* --- Адреса доставки (office-my-profile__places-*) -------------------- */
.office-my-profile__places-item {
	padding: var(--space-20) var(--space-30);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.office-my-profile__places-item:not(:last-child) {
	margin-bottom: var(--space-10) !important;
}

.office-my-profile__places-item h2 {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
}

.office-my-profile__places-change-btn,
.office-my-profile__places-map-btn,
.office-my-profile__places-delete-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: var(--space-14);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

.office-my-profile__places-add-btn {
	background-color: var(--color-text);
	border: none;
	border-radius: var(--radius-md);
	color: var(--color-text-invert);
}

/* Страница "Редактирование адреса" (/personal/profiles/{id}/) — на сайте это
   отдельная страница, а не модалка (макет 353:15682 её рисует модалкой, но
   менять навигацию на попап рискованно для JS) — оформляем как карточку */
.office-my-profile__places-add-form {
	max-width: 600px;
	padding: var(--space-30);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.office-my-profile__places-add-label {
	display: block;
	margin-bottom: var(--space-16);
	font-weight: var(--fw-medium);
}

.office-my-profile__places-add-form input,
.office-my-profile__places-add-form select {
	width: 100%;
	height: 54px;
	margin-top: var(--space-6);
	padding: 0 var(--space-16);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

/* --- Мой менеджер (office-my-profile__maneger-*) ---------------------- */
.office-my-profile__maneger-card {
	max-width: none;
	display: flex;
	align-items: flex-start;
	gap: var(--space-30);
	padding: var(--space-30);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.office-my-profile__maneger-top-row {
	flex-direction: column;
	flex-shrink: 0;
	margin-bottom: 0 !important;
}

.office-my-profile__maneger-top-row img {
	width: 152px !important;
	height: 152px !important;
	margin-right: 0 !important;
}

.office-my-profile__maneger-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-30);
}

.office-my-profile__maneger-info .office-my-profile__maneger-label:not(:last-child) {
	margin-bottom: 0;
}

.office-my-profile__maneger-label span {
	font-weight: var(--fw-bold);
}

.office-my-profile__maneger-email {
	color: var(--color-accent) !important;
	text-decoration: underline;
}

/* --- Модалка добавления/редактирования адреса ------------------------- */
.office-my-profile__places-adding-btn {
	background: var(--color-text);
	border-radius: var(--radius-md);
	text-transform: none;
}

/* --- Десктопные размеры/раскладка ЛК -------------------------------
   Только от 1201px, чтобы не конфликтовать с мобильной accordion-
   логикой сайдбара и стеканием карточек в main.css (@media max-width:1200px). */
@media (min-width: 1201px) {
	.office-my-profile__wrapper {
		gap: var(--space-20);
	}

	.office-my-profile__left-menu {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 333px;
		margin-right: 0;
		margin-bottom: 0;
		padding: var(--space-30) !important;
		background-color: var(--color-surface);
		border: 1px solid var(--color-text);
		border-radius: var(--radius-xl);
	}

	.office-my-profile__menu-item a,
	.office-my-profile__menu-item button {
		padding: var(--space-14) 0;
		font-size: var(--fs-md);
	}

	.office-my-profile__menu-item:first-child a {
		padding-top: 0;
	}

	.office-my-profile__menu-item:last-child {
		margin-top: var(--space-14);
		padding-top: var(--space-14);
		border-top: 1px solid var(--color-border);
	}

	.office-my-profile__content {
		max-width: none;
		flex: 1 1 auto;
		min-width: 0;
		margin-bottom: 0;
	}

	.office-main {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.office-main__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-20);
		align-items: stretch;
		margin-bottom: 3rem;
	}

	.office-main__item {
		width: auto;
	}

	/* Карточка "Профиль" — 2 колонки из 3, как в макете */
	.office-main__item--double {
		grid-column: span 2;
	}
}


@media (max-width: 760px) {
	.office-my-profile__places{
	   margin-bottom: 4rem;	
	}
	
	.office-my-profile__maneger-card{
		justify-content: center;
		flex-direction: column;
	}
	
	.office-my-profile__maneger-top-row{
		width: 100%;
	}
	
	.office-my-profile__maneger-info{
		gap: 1rem;
	}
	
	.office-my-profile__maneger-label span{
		font-size: 16px !important;
		font-weight: 600 !important;
	}
	
  .office-my-profile__maneger-label p, .office-my-profile__maneger-label a {
    width: 100%;
    border: none;
    font-size: 16px;
		white-space: nowrap;
		padding: 0;
  }
	
}


.office-my-profile__maneger-label:last-child a {
  text-decoration: underline dotted;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.office-my-profile__maneger-label:first-child span{
	display: none;
}

.office-my-profile__maneger-label:first-child p{
	font-weight: 600;
	font-size: 20px;
}

.office-my-profile__maneger-label:first-child p.office-my-profile__maneger-position{
	margin-top: var(--space-6);
	color: var(--color-text-muted);
	font-weight: 400;
	font-size: 16px;
}

/* Карточка профиля в ЛК на мобиле: аватар по центру, телефон/e-mail/кнопка
   редактирования — каждый на своей строке, стрелка-ссылка скрыта
   (в строку с аватаром они не помещаются в 370px карточки). */
@media (max-width: 1200px) {
	.office-main__item--company .office-main__profile-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-20);
	}

	.office-main__item--company .office-main__avatar {
		margin-left: auto;
		margin-right: auto;
	}

	.office-main__item--company .office-main__profile-info {
		padding-top: 0;
		gap: var(--space-10);
	}

	.office-main__item--company .office-main__name-row {
		margin-bottom: 0;
	}

	.office-main__item--company .office-main__profile-edit-link {
		margin-top: 0;
	}

	.office-main__item--company .office-main__profile-link {
		display: none;
	}
}

/* --- Страница «Корзина» (/personal/cart/) — по макету 280:15205:
   карточки товаров с рамкой вместо общего списка, доступность "В наличии",
   квадратная серая кнопка удаления, крупный итог справа, серая карточка
   "Детали заказа" с чёрной кнопкой оформления заказа --------------------- */
.cart-main__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-20);
}

.cart-main__top h1 {
	font-size: 38px;
	font-weight: var(--fw-bold);
	margin-bottom: 0;
}

.cart-main__clear-btn {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	flex-shrink: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	color: var(--color-accent);
	text-decoration: underline dotted;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	border-bottom: none;
	padding-bottom: 0;
	cursor: pointer;
}

.cart-main__clear-btn::before {
	content: "";
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: url("../img/redesign/icon-trash-cart.svg") no-repeat center / contain;
	text-decoration: none;
	-webkit-mask: none;
	mask: none;
}

@media (max-width: 1200px) {
	.cart-main__clear-btn {
		font-size: var(--fs-sm);
		gap: var(--space-6);
	}

	.cart-main__clear-btn::before {
		width: 18px;
		height: 18px;
	}
}

/* на узких экранах в кнопке остаётся только «Очистить» */
@media (max-width: 760px) {
	.cart-main__clear-btn-suffix {
		display: none;
	}
}

/* Как и кнопка "Оформить заказ" — чёрная заливка, белый текст */
.cart-main__btn-more,
.cart-main__btn-less {
	background-color: var(--color-text);
	color: var(--color-text-invert);
	border: none;
	border-radius: var(--radius-md);
}

.cart-main__btn-more:hover,
.cart-main__btn-less:hover {
	background-color: var(--color-accent);
}

.cart-main__wrapper {
	column-gap: var(--space-40);
}

.cart-main__main-column,
.cart-main__list {
	max-width: 1175px;
}

.cart-main__list {
	padding: 0 !important;
	border: none;
	border-radius: 0;
	margin-bottom: var(--space-16);
}

.cart-main__item {
	position: relative;
	z-index: 6;
	display: flex;
	align-items: flex-start;
	padding: var(--space-20);
	margin-bottom: var(--space-16);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: none !important;
}

/* цена за 1 шт живёт внутри виджета количества, под самим числом */
.cart-main__price-text {
	display: none;
}

.cart-main__quantity-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.cart-main__unit-price {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 11px;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	white-space: nowrap;
	color: var(--color-text-muted);
}

.cart-main__unit-price span[id^="basket-item-price-"]::after {
	content: "/шт.";
}

.cart-main__unit-price-old {
	text-decoration: line-through;
}

/* компонентный style.css даёт border-top через .cart-main__list .cart-main__item:not(:first-child) — бьём той же специфичностью */
.cart-main__list .cart-main__item:not(:first-child) {
	border-top:  1px solid var(--color-border);
}

.cart-main__img-link {
	flex-shrink: 0;
}

.cart-main__img-link img {
	border: none;
}

.cart-main__right-part {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(180px, 1.2fr) minmax(120px, 1fr) auto;
	align-items: start;
	justify-content: space-between;
	gap: 1rem;
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	height: auto;
}

.cart-main__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-14);
	min-width: 0;
}

.cart-main__info .product-card__article {
	order: -1;
	width: 100%;
	text-align: left;
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

.cart-main__info .basket-item-info-name-link {
	margin-bottom: 0;
}

.cart-main__info .basket-item-info-name {
	max-width: none;
	font-size: var(--fs-md) !important;
	font-weight: var(--fw-bold) !important;
	-webkit-line-clamp: 2;
}

.cart-main__availability.product-main__availability {
	width: 100%;
	justify-content: flex-start;
	text-align: left;
	margin-bottom: 0;
	white-space: nowrap;
}

.cart-main__right-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);
	min-width: 0;
	margin-top: 0;
}

.cart-main__prices {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	gap: 4px;
	font-size: var(--fs-sm);
}

.cart-main__right-bottom .cart-main__quantity {
	position: static;
	order: 0;
	width: auto;
}

.cart-main__right-bottom .cart-main__quantity .sign {
	width: 40px !important;
	height: 44px !important;
}

/* без явной ширины input[type=number] растягивает виджет своей собственной шириной (~170px) */
.cart-main__right-bottom .cart-main__quantity input {
	width: 60px !important;
	height: 26px !important;
	font-size: var(--fs-md) !important;
}

.cart-main__prices {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 4px;
	font-size: var(--fs-sm);
}

.cart-main__sum {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	min-height: 110px;
}

.cart-main__sum span {
	font-size: 24px !important;
	font-weight: var(--fw-bold);
}

.cart-main__delete-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	margin-top: 30px;
	background-color: var(--color-surface-muted);
	background-image: none;
	border-radius: var(--radius-md) !important;
	transition: background-color var(--transition);
}

/* иконка — маской, чтобы перекрашивалась на ховере вместе с фоном;
   transform/position сбрасываем — у .basket-item-actions-remove::before лежит
   легаси-крестик из двух повёрнутых на 45° полос */
.cart-main__delete-btn::before {
	content: "";
	position: static;
	transform: none;
	width: 22px;
	height: 22px;
	background-color: var(--color-text);
	-webkit-mask: url("../img/redesign/icon-trash-square.svg") no-repeat center / contain;
	mask: url("../img/redesign/icon-trash-square.svg") no-repeat center / contain;
	transition: background-color var(--transition);
}

.cart-main__delete-btn::after {
	content: none;
}

.cart-main__delete-btn:hover {
	background-color: var(--color-text);
}

.cart-main__delete-btn:hover::before {
	background-color: var(--color-text-invert);
}

.cart-main__right-column {
	max-width: 385px;
	padding: var(--space-30);
	background-color: var(--color-surface-muted);
	border: none;
	border-radius: var(--radius-xl);
}

.cart-main__right-column-title {
	margin-bottom: var(--space-30);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.cart-main__right-column [data-entity="basket-checkout-aligner"] {
	display: flex;
	flex-direction: column;
}

.cart-main__weight-row {
	order: 1;
	border-top: none !important;
}

.cart-main__sale-row {
	order: 2;
	border-top: none !important;
}

.cart-main__persanal-sale-row {
	order: 3;
	border-top: none !important;
}

.cart-main__sum-row {
	order: 10;
	padding-bottom: 0;
	padding-top: var(--space-20);
	border-bottom: none;
	border-top: 1px solid var(--color-border);
}

.cart-main__make-an-oreder-btn {
	order: 20;
	margin-top: var(--space-30);
	background: var(--color-text);
	border-radius: var(--radius-md);
}

/* --- Корзина на мобиле и планшете (макет 471:12779): фото + название/наличие
   в первой строке, кнопка удаления в правом верхнем углу карточки, во второй
   строке сумма слева и счётчик с ценой за штуку справа ------------------ */
@media (max-width: 919px) {

	.cart-main__item {
		align-items: flex-start;
		gap: var(--space-12);
		padding: var(--space-10);
		margin-bottom: var(--space-10);
	}

	/* main.css сужает отступ у фото только с 760px — переносим сюда, чтобы
	   в диапазоне 761–919 не осталось десктопных 30px */
	.cart-main__img-link {
		margin-right: var(--space-10);
	}

	.cart-main__img-link,
	.cart-main__img-link img {
		width: 87px;
		height: 76px;
	}

	.cart-main__img-link img {
		object-fit: contain;
		border-radius: var(--radius-xl);
	}

	.cart-main__right-part {
		display: flex;
		/* в main.css колонка — без явного row флекс остаётся вертикальным */
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		/* в main.css высота карточки прибита к 110px — строки не помещаются */
		height: auto;
		max-width: none;
		row-gap: var(--space-12);
		column-gap: var(--space-10);
	}

	.cart-main__info {
		flex: 1 1 100%;
		gap: var(--space-8);
		/* место под кнопку удаления в правом верхнем углу */
		padding-right: 52px;
	}

	.cart-main__info .product-card__article {
		font-size: var(--fs-2xs);
	}

	.cart-main__info .basket-item-info-name {
		max-width: none;
		font-size: var(--fs-xs) !important;
		line-height: var(--lh-tight);
	}

	/* в кэш-бандле страницы имя ограничено 80% ширины — селектор той же силы */
	.cart-main__right-part .basket-item-info-name-link h2 {
		max-width: none;
	}

	.cart-main__availability.product-main__availability span {
		font-size: var(--fs-2xs);
	}

	.cart-main__sum {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
		justify-content: flex-start;
		white-space: nowrap;
		min-height: 0;
	}

	.cart-main__sum span {
		font-size: var(--fs-md) !important;
	}

	.cart-main__right-bottom {
		order: 2;
		flex: 0 0 auto;
		width: auto;
		margin-left: auto;
		gap: var(--space-6);
	}

	.cart-main__right-bottom .cart-main__quantity {
		min-width: 134px;
		padding: 4px;
		border-radius: var(--radius-md);
	}

	.cart-main__right-bottom .cart-main__quantity .sign {
		width: 32px !important;
		height: 32px !important;
		font-size: var(--fs-xl) !important;
	}

	.cart-main__right-bottom .cart-main__quantity input {
		width: 52px !important;
		height: 20px !important;
		font-size: var(--fs-sm) !important;
	}

	/* габариты в карточке макетом не предусмотрены */
	.cart-main__prices {
		display: none;
	}

	.cart-main__delete-btn {
		position: absolute;
		top: var(--space-10);
		right: var(--space-10);
		width: 40px;
		height: 40px;
		margin-top: 0;
	}

	.cart-main__delete-btn::before {
		width: 18px;
		height: 18px;
	}

	.cart-main__right-column {
		max-width: none;
		padding: var(--space-20);
	}
}

@media(max-width: 1200px) {
	
	.bx-section-desc{
		padding: 1rem;
	}
}


/* --- Удалённый товар: карточка остаётся на месте, гаснет и накрывается
   кнопкой "Восстановить" по центру ------------------------------------- */
.cart-main__item--removed > *:not(.cart-main__restore) {
	opacity: 0.35;
	pointer-events: none;
}

.cart-main__restore {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
}

.basket-items-list-item-removed-block {
	gap: var(--space-16);
}

[data-entity="basket-item-restore-button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 var(--space-24);
	background-color: var(--color-text);
	color: var(--color-text-invert);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background-color var(--transition);
}

[data-entity="basket-item-restore-button"]:hover {
	background-color: var(--color-accent);
}

.basket-items-list-item-clear-btn {
	display: none;
}

/* --- Страница «Оформление заказа» (/personal/order/make/) — по макету
   287:16126/287:17086: карточки-секции с чёрным заголовком, красный акцент
   у выбранного варианта (тип покупателя/способ доставки/способ оплаты),
   серая карточка "Детали заказа" — тот же язык, что и в корзине --------- */
.order-main__right-column-title {
	margin-bottom: var(--space-20);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.order-main__delivery-row span:first-child {
	color: var(--color-text-muted);
	font-weight: var(--fw-medium) !important;
}

.order-main__delivery-row.bx-soa-cart-total-line-total {
	border-bottom: none !important;
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-20) !important;
}

.order-main__delivery-row.bx-soa-cart-total-line-total span {
	font-weight: var(--fw-bold) !important;
	color: var(--color-text) !important;
}

.order-main__make-an-oreder-btn {
	background: var(--color-text) !important;
	border-radius: var(--radius-md);
}

/* Скидка в сайдбаре оформления заказа скрыта для авторизованных — уже видна в корзине */
.order-main__right-column .order-main__delivery-row.bx-soa-cart-total-line-highlighted,
.order-main__right-column .order-main__persanal-sale-row,
.order-main__right-column .product-main__credit-wrapper {
	display: none !important;
}

/* Товары в заказе — название на всю ширину строки (main.css ограничивал 275px) */
.order-main__item .order-main__left-part {
	flex: 1 1 auto;
	max-width: none;
	width: auto;
}

.order-main__left-part a h2,
.bx-soa-item-table .order-main__left-part h2 {
	max-width: none;
}

.order-main__item .order-main__right-part {
	flex-shrink: 0;
}

/* Способ оплаты — карточки были flex-по-центру, из-за чего пустая иконка-
   заглушка (::before легаси-разметки) сдвигала контент вправо неравномерно
   между короткой/длинной подписью; выравниваем по левому краю и в одну строку */
.bx-soa-pp .bx-soa-pp-company.order-main__pay-form-label {
	justify-content: flex-start;
}

.order-main__pay-form-label span::before {
	content: none;
}

.order-main__pay-form-label .bx-soa-pp-company-smalltitle {
	max-width: none;
	white-space: nowrap;
}

/* Тип покупателя (физ./юр. лицо) — красная рамка-пилюля + залитый радио-кружок
   у выбранного варианта, по образцу .popup-choose-city__popular-city-item */
.order-main__buyer-type-form-inner {
	gap: var(--space-20);
}

.order-main__buyer-type-form-inner label {
	display: inline-flex;
	align-items: center;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	width: calc(50% - var(--space-10)) !important;
	padding: var(--space-16) var(--space-20);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

@media (max-width: 760px) {
	.order-main__buyer-type-form-inner label {
		width: 100% !important;
	}
}

.order-main__buyer-type-form-inner input:checked+label {
	border-color: var(--color-accent);
}

.order-main__buyer-type-form-inner label::before,
.order-main__express-form-group label::before,
.order-main__pay-form-inner label::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='9.5' fill='white'/%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='9.5' stroke='%23050000'/%3E%3Ccircle cx='10' cy='10' r='4' fill='white'/%3E%3C/svg%3E");
}

.order-main__buyer-type-form-inner input:checked+label::before,
.order-main__express-form-group input:checked+label::before,
.order-main__pay-form-inner input:checked+label::before {
	border: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='10' fill='%23FF0000'/%3E%3Ccircle cx='10' cy='10' r='4' fill='white'/%3E%3C/svg%3E");
}

/* Поля покупателя (ФИО/E-mail/Телефон) — рамка/радиус как в макете 287:16589 */
.order-main__buyer-company-form-label span {
	font-size: var(--fs-sm);
	margin-bottom: var(--space-8);
}

/* спаны в лейбле — display:block (main.css), из-за этого звёздочка уходила на свою строку */
.order-main__buyer-company-form-label > label {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: var(--space-8);
}

.order-main__buyer-company-form-label > label > span {
	margin-bottom: 0;
}

.order-main__buyer-company-form-label .bx-authform-starrequired {
	color: var(--color-accent);
}

.order-main__buyer-company-form-label input {
	border-color: var(--color-border);
	border-radius: var(--radius-md);
}

/* Кастомный селект вместо нативного <select> (профиль покупателя).
   Сам <select> остаётся в DOM скрытым — он источник значения для формы. */

/* пустой ::before из style.css компонента лежит поверх поля и съедает клики слева */
.profile-control.bx-soa-location-input-container::before {
	content: none;
}

.custom-select {
	position: relative;
	width: 100%;
}

.custom-select > select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* Специфичность поднята (.custom-select .custom-select__*) — легаси-правила
   .order-main__buyer-company-form-label span/button перебивали одиночный класс. */
.custom-select .custom-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-10);
	width: 100%;
	min-height: 58px;
	padding: var(--space-10) 15px;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	line-height: 1;
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--transition);
}

.custom-select .custom-select__trigger:hover,
.custom-select--open .custom-select__trigger {
	border-color: var(--color-text);
}

.custom-select .custom-select__value {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	font-size: var(--fs-lg);
	line-height: 1;
}

.custom-select .custom-select__trigger::after {
	content: '';
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-color: var(--color-text);
	mask: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--transition);
}

.custom-select--open .custom-select__trigger::after {
	transform: rotate(180deg);
}

.custom-select .custom-select__list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	display: none;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: var(--space-6);
	list-style: none;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.custom-select--open .custom-select__list {
	display: block;
}

.custom-select .custom-select__item {
	padding: var(--space-10) var(--space-12);
	border-radius: var(--radius-sm);
	font-size: var(--fs-md);
	line-height: 120%;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.custom-select .custom-select__item:hover {
	background-color: var(--color-surface-muted);
}

.custom-select .custom-select__item--active {
	color: var(--color-accent);
}

.order-main__buyer-form-label input,
.order-main__buyer-company-form-label input,
.order-main__delivery-form-label input,
.order-main__comments-input,
.bx-soa input,
.bx-soa textarea,
.bx-soa .bx-ui-sls .dropdown-block {
	border-radius: var(--radius-md) !important;
}

/* Визуальный разделитель между "Тип покупателя" и полями покупателя внутри
   одной карточки (в макете это 2 отдельные карточки, но блок общий для JS) */
.order-main__buyer-type-form-inner {
	gap: var(--space-16);
	padding-bottom: var(--space-24);
	margin-bottom: var(--space-24) !important;
	border-bottom: 1px solid var(--color-border);
}

/* в main.css у вариантов width:100% — оба типа должны стоять в одну строку */
.order-main.new .order-main__buyer-type-form-inner label,
.order-main__buyer-type-form-inner label {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.order-main.new .order-main__buyer-type-form-inner label:not(:last-child),
.order-main__buyer-type-form-inner label:not(:last-child) {
	margin: 0;
}

/* Способ доставки — карточки .order-main__express-item, .bx-selected
   переключает JS (не нативный input:checked) */
.order-main__express-item {
	border-color: var(--color-border) !important;
}

.order-main__express-item.bx-selected {
	border-color: var(--color-accent) !important;
}

#bx-soa-delivery .order-main__express-item {
	max-width: none;
}

/* Убираем нумерованные подзаголовки групп ("1. Самовывоз" и т.д.) и
   картинки/логотипы служб доставки — единый заголовок "СПОСОБ ДОСТАВКИ"
   уже выводится статически перед блоком. Варианты доставки — в один ряд,
   только текст (жирное название + серая строка со сроком). */
.order-main__express-form-group-title {
	display: none;
}

#bx-soa-delivery .bx-soa-pp-item-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-16);
}

#bx-soa-delivery .order-main__express-form-group {
	margin-bottom: 0;
}

#bx-soa-delivery .order-main__express-item {
	width: 100%;
	padding: var(--space-16) var(--space-20);
}

#bx-soa-delivery .bx-soa-pp-company-image {
	display: none;
}

#bx-soa-delivery .order-main__express-item-text span {
	max-width: none;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

#bx-soa-delivery .order-main__express-item-text p {
	max-width: none;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

#bx-soa-delivery .bx-soa-location-input-container {
	margin-right: 0;
	margin-left: 0;
}

.order-main__buyer-form-label .bx-sls .dropdown-block {
	max-width: 100%;
	width: 100%;
	border: 1px solid var(--color-border);
	padding: 15px 15px 15px 30px;
	font-size: 16px;
	line-height: 120%;
	border-radius: var(--radius-md);
}

#bx-soa-delivery .order-main__express-item-text {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	column-gap: 10px;
	align-items: start;
}

#bx-soa-delivery .order-main__express-item-text .bx-soa-pp-company-graf-container {
	grid-row: 1 / span 2;
	grid-column: 1;
	width: 20px;
	margin: 0;
}

#bx-soa-delivery .order-main__express-item-text>span,
#bx-soa-delivery .order-main__express-item-text>p {
	grid-column: 2;
}

@media (max-width: 760px) {
	#bx-soa-delivery .bx-soa-pp-item-container {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1100px) and (min-width: 761px) {
	#bx-soa-delivery .bx-soa-pp-item-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

.order-main__express-item-text span,
.order-main__express-item-text p {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Описание выбранного способа доставки — во всю ширину блока (JS перемещает
   этот div из своей группы в контейнер грида как отдельный элемент) -------- */
.order-main__express-form-group-descr {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: var(--space-16);
	padding: var(--space-16);
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-xl);
	text-align: left;
}

.order-main__express-form-group-descr.hidden {
	display: none;
}

/* Способ оплаты — та же логика через .bx-selected */
.order-main__pay-form-label {
	border-color: var(--color-border-strong);
}

.order-main__pay-form-label.bx-selected {
	border-color: var(--color-accent) !important;
}


.order-main__right-column-wrapper {
	position: static !important;
	top: auto !important;
}

@media(max-width: 800px) {
	.order-main__right-column-wrapper {
		max-width: 100%;
	}
	.order-main__right-column{
		max-width: 100%;
	}
	
}

/* Звёздочка обязательного поля приходит разметкой (.bx-authform-starrequired),
   правило из main.css вешало вторую на КАЖДЫЙ span лейбла */
.order-main__buyer-company-form-label span::after {
	content: none;
}

.bx-authform-starrequired {
	margin-left: 4px;
	color: var(--color-accent);
	font-weight: var(--fw-regular);
}

/* Ошибка поля — простой красный текст под полем, без плашки и стрелки */
.bx-soa-tooltip.bx-soa-tooltip-static {
	position: static !important;
	max-width: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	filter: none;
}

.bx-soa-tooltip.bx-soa-tooltip-static .tooltip-arrow {
	display: none !important;
}

.bx-soa-tooltip.bx-soa-tooltip-static .tooltip-inner {
	max-width: none;
	padding: 0;
	background: none !important;
	border: none;
	border-radius: 0;
	color: var(--color-accent) !important;
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	text-align: left;
	white-space: normal;
}

.bx-soa-tooltip .tooltip-inner {
	max-width: 300px;
	padding: var(--space-8) var(--space-12);
	background: var(--color-surface) !important;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	color: var(--color-accent) !important;
	font-size: var(--fs-xs);
	line-height: 1.3;
}

.bx-soa-tooltip.bx-soa-tooltip-danger .tooltip-arrow,
.order-main__buyer-company-form-label .tooltip.bottom .tooltip-arrow {
	border-bottom-color: var(--color-accent) !important;
}

#bx-soa-order input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
#bx-soa-order textarea,
#bx-soa-order select,
#bx-soa-order .bx-ui-sls .dropdown-block {
	border-radius: var(--radius-sm) !important;
}

#bx-soa-order input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
#bx-soa-order textarea,
#bx-soa-order select,
#bx-soa-order .bx-ui-sls .dropdown-block {
	border-radius: var(--radius-sm) !important;
	box-shadow: none;
}

#bx-soa-order input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):focus,
#bx-soa-order textarea:focus,
#bx-soa-order select:focus,
#bx-soa-order .bx-ui-sls .dropdown-block:focus-within {
	border-color: var(--color-border-strong) !important;
	box-shadow: none !important;
	outline: none;
}

#bx-soa-order .form-control.error,
#bx-soa-order input.error,
#bx-soa-order textarea.error,
#bx-soa-order select.error {
	border-color: var(--color-accent) !important;
}

#bx-soa-order .form-control.error:focus,
#bx-soa-order input.error:focus,
#bx-soa-order textarea.error:focus,
#bx-soa-order select.error:focus {
	border-color: var(--color-accent) !important;
}

#bx-soa-order .bx-soa-customer-label,
#bx-soa-order .bx-soa-custom-label,
#bx-soa-order .form-group>label {
	margin-bottom: 4px;
	padding-bottom: 0;
}

.bx-soa-cart-total.order-main__right-column {
	color: var(--color-text);
	font-size: var(--fs-sm);
	line-height: 1.25;
}

.bx-soa-cart-total.order-main__right-column .order-main__delivery-row {
	padding: var(--space-10) 0;
	border: 0;
}

.bx-soa-cart-total.order-main__right-column .order-main__delivery-row span {
	font-size: var(--fs-sm);
	line-height: 1.25;
}

.bx-soa-cart-total.order-main__right-column .order-main__delivery-row:first-child .bx-soa-cart-t {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.bx-soa-cart-total.order-main__right-column .order-main__delivery-row:first-child .bx-soa-cart-d {
	display: none;
}

.bx-soa-cart-total.order-main__right-column .order-main__delivery-row.bx-soa-cart-total-line-total {
	margin-top: var(--space-8);
	padding-top: var(--space-16) !important;
	border-top: 1px solid var(--color-border) !important;
	border-bottom: 0 !important;
}

.bx-soa-cart-total.order-main__right-column .order-main__delivery-row.bx-soa-cart-total-line-total span {
	font-size: var(--fs-md);
	line-height: 1.2;
}

.bx-soa-cart-total.order-main__right-column .main-user-consent-request {
	display: block;
	margin-top: var(--space-12);
}

.bx-soa-cart-total.order-main__right-column .main-user-consent-request input[type="checkbox"] {
	display: none;
}

.bx-soa-cart-total.order-main__right-column .order-main__right-column-bottom-text {
	display: block;
	font-size: var(--fs-xs);
	line-height: 1.3;
	color: var(--color-text-muted);
}

/* Checkout layout and controls. */
.order-main__wrapper {
	max-width: calc(var(--layout-max) + 2 * var(--layout-pad));
	margin: 0 auto;
	padding: 0 var(--layout-pad);
}

.order-main__main-column {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
}

.order-main__list {
	width: 100%;
	max-width: none;
}

#bx-soa-properties {
	order: 1;
}

#bx-soa-delivery {
	order: 2;
}

#bx-soa-region {
	order: 3;
}

#bx-soa-paysystem {
	order: 4;
}

#bx-soa-comment {
	order: 5;
}

#bx-soa-basket {
	order: 6;
}

#bx-soa-orderSave {
	order: 7;
}

.order-main__main-column>.bx-soa-section,
.order-main__main-column>#bx-soa-comment {
	margin-bottom: var(--space-10) !important;
}

.order-main__buyer-details-title {
	margin: 0 0 var(--space-20);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.order-main.new .order-main__buyer-company-form-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-16);
	margin: 0;
}

.order-main.new .order-main__buyer-company-form-label.bx-soa-customer-field,
.order-main.new .order-main__buyer-company-form-label.bx-soa-customer-field.bx-soa-customer-field--fullWidth {
	width: auto;
	max-width: none;
	padding: 0;
}

.order-main.new .order-main__buyer-company-form-label.bx-soa-customer-field--additional-phone {
	grid-column: 3;
}

#bx-soa-comment.order-main__comments-section {
	padding: var(--space-20);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

#bx-soa-comment .form-group {
	margin: 0;
}

#bx-soa-comment .order-main__comments-title {
	display: block;
	margin-bottom: 4px;
	padding: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

#bx-soa-order .bx-soa-section-title,
#bx-soa-order .order-main__list-title {
	text-transform: none;
}

#bx-soa-paysystem .bx-soa-pp-company-image,
#bx-soa-paysystem .bx-soa-pp-company-graf-container img,
#bx-soa-paysystem .bx-soa-pp-company-graf-container [style*="background-image"] {
	display: none !important;
}

#bx-soa-delivery .order-main__express-item .bx-soa-pp-company-checkbox,
#bx-soa-paysystem .bx-soa-pp-company-checkbox,
.order-main__buyer-type-form-inner input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

#bx-soa-delivery .order-main__express-item .bx-soa-pp-company-graf-container::before,
#bx-soa-paysystem .order-main__pay-form-label::before {
	content: "";
	display: inline-block;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='9.5' fill='white'/%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='9.5' stroke='%23050000'/%3E%3Ccircle cx='10' cy='10' r='4' fill='white'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

#bx-soa-delivery .order-main__express-item.bx-selected .bx-soa-pp-company-graf-container::before,
#bx-soa-paysystem .order-main__pay-form-label.bx-selected::before {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='10' fill='%23FF0000'/%3E%3Ccircle cx='10' cy='10' r='4' fill='white'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
	.order-main.new .order-main__buyer-company-form-inner {
		grid-template-columns: 1fr;
	}

	.order-main.new .order-main__buyer-company-form-label.bx-soa-customer-field--additional-phone {
		grid-column: auto;
	}
}

.alert{
	border-radius: var(--radius-lg);
}

.alert-success {
    color: #3C763D;
    background-color: transparent;
    border: 2px solid #D6E9C6;
}
.alert-warning {
    color: #8A6D3B;
    background-color: transparent;
    border: 2px solid #FAEBCC;
}
.alert-danger {
    color: #A94442;
    background-color: transparent;
    border: 2px solid #EBCCD1;
}


.cart-main__empty-wrapper{
	text-align: left;
	align-items: flex-start;

	a{
		padding: 13px 50px;
		font-size: var(--fs-md);
		font-weight: var(--fw-medium);
		background-color: var(--color-text);
		color: var(--color-text-invert);
		border: none;
		border-radius: var(--radius-md);
	}
}

.favorite-main .cart-main__top {
	flex-wrap: wrap;
	gap: var(--space-16);
}

.favorite-main .cart-main__clear-btn {
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	white-space: normal;
}

@media (max-width: 640px) {
	.favorite-main .cart-main__top {
		align-items: flex-start;
		flex-direction: column;
	}

	.catalog-main__pagination {
		flex-wrap: wrap;
		gap: var(--space-8);
		max-width: 100%;
	}
}

.office-my-profile__order-detalies-info-buttons{
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	flex-wrap: wrap;
}

.office-my-profile__order-detalies-info-buttons > *{
	width: 320px;
	text-align: center;
}

@media (max-width: 768px) {
	.office-my-profile__order-detalies-info-buttons{
		flex-direction: column;
	}
}

@media (max-width: 780px) {
  .footer__item:first-child span::after{
	display: none;
  }
}

.popup-header-mobile-bottom-bar__top.product-item-detail-short-card-fixed {
	display: none !important;
	cursor: pointer;
}

/* ==========================================================================
   Батч 2026-09-08 — планшет/мобилка: отступы, плотность сеток, селекты
   ========================================================================== */

/* --- 1. «Сотрудники» (/kontakty/sotrudniki/) ---------------------------- */
/* main.css задаёт `ul[class] { padding: 0 }` — специфичность (0,1,1) выше,
   чем у одноклассового `.main-contacts__tabs-list` выше в этом файле, поэтому
   боковые отступы на странице не применялись (контент прилипал к краям).
   Повторяем правило с тегом в селекторе, чтобы выиграть по специфичности. */
ul.main-contacts__tabs-list {
	padding: 0 var(--space-10);
}

@media (max-width: 1200px) {
	ul.main-contacts__tabs-list {
		padding: 0 var(--layout-pad);
	}

	/* карточки сотрудников были flex-строкой с разной шириной — выравниваем сеткой */
	.main-contacts__staff-block-inner {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}

	.staff-card {
		max-width: none;
	}

	.staff-card__img {
		width: 120px;
		height: 120px;
	}

	.staff-card__email,
	.staff-card__tel {
		overflow-wrap: anywhere;
	}
}

/* --- 2. «Наши объекты» (/nashi-obekty/) --------------------------------- */
/* Плитки начинались вплотную под строкой вкладок (redesign обнулил
   `margin-top` у .objects-main-item, который раньше давал этот отступ). */
.objects-main-tabs-items {
	margin-top: var(--space-30);
}

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

	/* main.css в @media(max-width:992px) ставит width:calc(50% - 20px) — в гриде
	   это распирает плитку шире её колонки */
	.objects-main-item {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.objects-main-tabs-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10);
	}

	.objects-main-tabs-links {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.objects-main-tabs-links li {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* --- 3. «Новости» (/news/) — по 2 карточки в строке ---------------------- */
@media (max-width: 1024px) {
	.news-main__news-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- 4. «Статьи» (/articles/) — по 2 карточки в строке ------------------- */
@media (max-width: 1024px) {
	.article-main__card-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.article-main__card-list .news-articles-card {
		width: 100%;
		max-width: none;
	}
}

@media (max-width: 640px) {
	.article-main__card-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.staff-card {
		padding: var(--space-12);
	}

	.staff-card__img {
		width: 100px;
		height: 100px;
		margin-right: var(--space-12);
	}
}

/* --- 5. «Сертификаты» / «Паспорта и инструкции» — по 2 блока в строке ---- */
@media (min-width: 600px) and (max-width: 1199px) {
	.certificates-main__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	.certificates-main__item {
		width: 100%;
		min-width: 0;
		max-width: none;
	}
}

/* --- 6. «Для бизнеса» — карусель преимуществ ---------------------------- */
/* Мобильную карусель убрали: до 1200px показываем обычный список плиток
   (в main.css у него `display: none` на этой ширине — перекрываем). */
.business-main__cose-list-mobile[class] {
	display: none;
}

@media (max-width: 1200px) {
	.business-main__cose-list[class] {
		display: flex;
		justify-content: center;
		margin-bottom: 40px;
	}
}

/* У неактивных буллетов пагинации прозрачный фон + светлая рамка + opacity
   0.2, поэтому под каруселью висела одинокая красная точка. Заменили
   пагинацию на тонкий красный скроллбар — тот же приём, что у миниатюр
   карточки товара (разметка: template.php, инициализация: main.js). */
.business-main__cose-list-mobile[class] .business-main__cose-scrollbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background-color: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

.business-main__cose-list-mobile[class] .business-main__cose-scrollbar .swiper-scrollbar-drag {
	background-color: var(--color-accent);
	border-radius: var(--radius-md);
}

/* --- 7-8. «Видео» (/video/) --------------------------------------------- */
/* Выпадающие списки (Choices.js) на мобиле: фиксированные 304px не попадали
   в ширину контейнера, а шрифт падал до 12px. Дублируем селекторы main.css
   (`.my-select .is-open .choices__inner`, `.my-select .choices__list.
   choices__list--dropdown.is-active .choices__item`) — иначе они выигрывают
   по специфичности. Рамку/радиус самой менюшки не трогаем: `.my-select`
   уже оформляет её под сайт. */
.video-main__select .choices__inner,
.video-main__select .is-open .choices__inner,
.video-main__select .choices__item {
	font-size: var(--fs-md);
}

.video-main__select .choices__list.choices__list--dropdown.is-active .choices__item {
	padding: var(--space-12) var(--space-16);
	font-size: var(--fs-md);
}

.video-main__select .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: var(--color-surface-muted);
	color: var(--color-accent);
}

@media (max-width: 760px) {
	.video-main__select {
		width: 100%;
	}
}

/* Превью видео были 128px в высоту — вытянутая полоса; поднимаем высоту фото
   и слегка ужимаем карточку по ширине, чтобы она не съедала весь экран */
@media (max-width: 1200px) {
	.video-main__video-card.news-video-card .news-video-card__img {
		height: 200px;
	}
}

/* --- 9. «Видео» — по 2 записи в строке на планшете ----------------------- */
@media (min-width: 620px) and (max-width: 1200px) {
	.video-main__video-cards-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.video-main__video-card.news-video-card {
		width: 100%;
		max-width: none;
	}
}

@media (max-width: 619px) {
	.video-main__video-cards-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.video-main__video-card.news-video-card {
		max-width: none;
	}

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

/* --- 10. «Мои заказы» — футер во всю ширину ----------------------------- */
/* Основное лечение — карточки вместо таблицы до 1024px (см. блок выше).
   Здесь только страховка от горизонтального переполнения: если что-то внутри
   списка окажется шире колонки, документ не растянется и футер останется во
   всю ширину (clip, а не hidden — не создаёт контейнер прокрутки и не ломает
   sticky/собственный overflow у детей). */
@media (max-width: 1200px) {

	.office-my-profile,
	.office-my-profile__wrapper,
	.office-my-profile__orders,
	.office-my-profile__order-detalies {
		min-width: 0;
		max-width: 100%;
	}

	.office-my-profile__orders {
		overflow-x: clip;
	}
}

/* --- 11. «Информация о заказе» — отступ между количеством и ценой -------- */
@media (max-width: 1200px) {
	.office-my-profile__order-detalies-quantity {
		margin-right: var(--space-16);
	}
}

/* На узких экранах (<400px) строка товара разъезжалась: name-box зафиксирован
   на 165px, а price-box с `margin-left:auto` уезжал на отдельную строку к
   правому краю и сжимался до ~56px. Переводим строку в грид: слева картинка
   на всю высоту, справа название, под ним количество и цена в одну строку. */
@media (max-width: 399px) {
	.office-my-profile__order-detalies-list {
		padding: var(--space-10) !important;
	}

	.office-my-profile__order-detalies-item {
		grid-template-columns: auto auto minmax(0, 1fr);
		column-gap: var(--space-12);
		row-gap: var(--space-8);
		align-items: center;
		padding: var(--space-12) 0;
	}

	/* main.css управляет видимостью строк через `.…-list .…-item{display:none}`
	   + `:nth-child(1|2)` / `.list.active .item` (0,2,0…0,2,1) — переключить на
	   grid можно только правилами той же формы, иначе остаётся flex */
	.office-my-profile__order-detalies-list .office-my-profile__order-detalies-item:nth-child(1),
	.office-my-profile__order-detalies-list .office-my-profile__order-detalies-item:nth-child(2),
	.office-my-profile__order-detalies-list.active .office-my-profile__order-detalies-item {
		display: grid;
	}

	.office-my-profile__order-detalies-img-box {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin-right: 0;
	}

	.office-my-profile__order-detalies-name-box {
		grid-column: 2 / -1;
		grid-row: 1;
		flex-basis: auto;
	}

	.office-my-profile__order-detalies-quantity {
		grid-column: 2;
		grid-row: 2;
		margin-right: 0;
	}

	.office-my-profile__order-detalies-price-box {
		grid-column: 3;
		grid-row: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: flex-end;
		gap: var(--space-6);
		margin-left: 0;
	}

	/* «Товары в заказе» + «Правила возврата» в одну строку требуют 340px —
	   на 320px экране это распирало всю колонку и давало горизонтальный скролл */
	.office-my-profile__order-detalies--subtop {
		flex-wrap: wrap;
		gap: var(--space-10);
	}

	.office-my-profile__order-detalies-info-buttons>* {
		width: 100%;
		max-width: 320px;
	}
}

/* ==========================================================================
   Батч 2026-09-09 — карточка товара: «С этим товаром покупают» и «Статьи»
   ========================================================================== */

/* Карточки в ряду разной высоты (названия в 2-4 строки). Слайд тянется на
   высоту ряда, а блок кнопок прижимается к низу карточки — разница в длине
   названия уходит в отступ над кнопками. */
.product-similar__inner .swiper-wrapper {
	align-items: stretch;
}

.product-similar__inner .swiper-slide {
	height: auto;
}

.product-similar__inner .swiper-slide .product-card {
	height: 100%;
}

.product-similar__inner .product-card__bottom {
	margin-top: auto;
}

/* Стрелки слайдера «С этим товаром покупают» — квадрат 2rem, скругление sm */
.section__related__btns .accessories-slider__button-prev,
.section__related__btns .accessories-slider__button-next {
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-sm);
}

/* Вкладка «Статьи»: main.css на ≤1200 даёт строкам `margin: 0 auto`, и авто-поля
   растаскивали неполный ряд карточек по ширине контейнера. */
.product-description__tab-table-item-article {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Базовый flex-basis в треть контейнера на телефоне давал карточки по 110px —
   переводим на 2 в строке и растягиваем их по высоте ряда. */
@media (max-width: 760px) {
	.catalog-main .catalog-main__title-wrapper {
		padding-inline: 0;
	}

	.about-main .block-about-intro,
	.main-contacts .contacts-info-list,
	.main-contacts .contacts-details__col {
		margin-inline: calc(-1 * var(--layout-pad));
	}

	.about-main .block-about-intro,
	.main-contacts .contacts-details__card {
		padding-inline: var(--layout-pad);
	}

	.main-contacts .contacts-info-list__item {
		padding-inline: calc(var(--layout-pad) - var(--border-width));
	}

	.product-description__tab-table-item-article {
		flex-basis: calc((100% - var(--space-20)) / 2);
		align-self: stretch !important;
	}

	.product-description__tab-table-item-article a {
		height: 100%;
		min-height: 130px;
		padding: var(--space-16);
	}

	.product-description__tab-table-item-article-name,
	.product-description__tab-table-item-article-cta {
		font-size: var(--fs-sm);
	}
}

/* Общие правила типографики и адаптивности, октябрь 2026. */
.header__search-list .header__search-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--fs-sm);
}

.js_favorites_error {
	color: var(--color-accent);
	font-size: var(--fs-sm);
}

.product-similar__btn-more {
	min-height: 44px;
	max-width: 100%;
	white-space: normal;
}

#printPage,
.article-main__card-more-btn {
	min-height: 44px;
}

#printPage {
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
}

.main h1:not(.business-main__title, [class*="popup"]) {
	font-size: var(--page-title-size);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	overflow-wrap: anywhere;
}

.main .product-main__content-top h1,
.main .product-main__mobile-title {
	font-size: var(--product-title-size);
}

.product-main__content-top h1 {
	display: block;
}

.main .section-head__title,
.main .business-main__group-title {
	font-size: var(--section-title-size);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
}

.footer__item a {
	color: var(--color-text-invert);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.footer__item .footer__item-title {
	color: var(--color-text-invert);
	background-color: var(--color-accent);
	opacity: 1;
}

.footer__bottom,
.footer__bottom a,
.footer__bottom span {
	color: var(--color-text-invert);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.certificates-main__img {
	padding: var(--space-20);
}

.product-card .product-card__offerCount {
	position: static;
	width: 100%;
	margin-top: var(--space-12);
	padding: var(--space-12) 0 0;
	border: 0;
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
}

.product-card.product-card--hasOffers {
	margin-bottom: 0;
}

.product-card .item_plate.is_new_plate::before,
.product-item-detail-slider-block[data-plate="is_new_plate"]::before {
	content: none;
}

.product-card .item_plate.is_new_plate::after,
.product-item-detail-slider-block[data-plate="is_new_plate"]::after {
	content: "Новинка";
	top: var(--space-12);
	left: var(--space-12);
	padding: var(--space-6) var(--space-8);
	transform: none;
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
	color: var(--color-text-invert);
	background: var(--color-accent);
	border-radius: var(--radius-sm);
	z-index: 12;
}

.product-card__bottom {
	min-height: 96px;
	justify-content: flex-end;
}

.product-card__bottom .product-card__btn,
.product-card__bottom .product-card__card,
.product-card__bottom .product-card__report-me-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	height: 44px;
	padding-block: var(--space-8);
}

.product-card__bottom .product-card__favorite {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
}

.product-card .product-card__price .price-measure {
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
}

.accessories-slider .swiper-wrapper {
	align-items: stretch;
}

.accessories-slider .swiper-slide {
	height: auto;
}

.accessories-slider .swiper-slide .product-card {
	height: 100%;
}

.catalog-main__sidebar .catalog__section-list a,
.catalog-main__filter-top h3,
.catalog-main__filter_element .bx-filter-param-text {
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

.catalog-main__filter_element label {
	min-height: 44px;
	padding-block: var(--space-6);
}

.catalog-main__filter_element .bx-filter-param-text {
	padding-left: var(--space-30);
}

.catalog-main__filter_element input[type="checkbox"] + .bx-filter-param-text::before,
.subscribe-info-cont .subscrube_agree {
	width: 20px;
	height: 20px;
}

.banner:has(+ .business-main) {
	margin-bottom: var(--space-40);
}

@media (max-width: 1200px) {
	.main .product-item-detail-tab,
	.main .product-item-detail-info-container-title,
	.product-card .product-card__article {
		font-size: var(--fs-xs);
		line-height: var(--lh-normal);
	}

	.product-item-detail-tab {
		min-height: 44px;
	}

	.catalog__section-list-more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.news-slider > .news__top {
		padding-inline: 0;
		margin-top: var(--space-16);
	}

	.section-head__link,
	.product-main__print-btn,
	.product-main__save-btn,
	.catalog-main__mobile-filter-btn,
	.product-main__login-sale-link,
	.dealers-main__link,
	.news-main__more-news-btn,
	.article-main__card-more-btn,
	.video-main__more-video-btn {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.catalog-main__mobile-filter-btn {
		min-width: 44px;
		justify-content: center;
	}

	.popup-header-mobile-bottom-bar .slidebar__cart-num {
		min-width: 22px;
		width: max-content;
		height: auto;
		aspect-ratio: 1;
		right: auto;
		font-size: var(--fs-xs);
	}

	.main-slider .swiper-pagination {
		gap: 0;
	}

	.main-slider .swiper-pagination-bullet {
		position: relative;
		width: 44px;
		height: 44px;
		border: 0;
	}

	.main-slider .swiper-pagination-bullet::before {
		content: "";
		position: absolute;
		inset: 15px;
		border: 1px solid var(--color-text-invert);
		border-radius: var(--radius-round);
	}

	.main-slider .swiper-pagination-bullet-active::before {
		border-color: var(--color-accent);
	}

	.main-slider .swiper-pagination-bullet-active::after {
		inset: 19px;
	}
}

@media (max-width: 780px) {
	.footer__col {
		gap: var(--space-20);
	}

	.footer__list--link,
	.footer__list--link .footer__item {
		margin-bottom: 0;
	}

	.footer__item--address,
	.footer__item--tel,
	.footer__item--mail {
		padding-inline: 0;
	}

	.footer__item--address::before,
	.footer__item--tel::before,
	.footer__item--mail::before {
		content: none;
	}
}

@media (max-width: 760px) {
	.product-detail-layout,
	.product-description,
	.catalog-main,
	.main-contacts,
	.news-main,
	.article-main,
	.video-main,
	.manufacturers-list-main,
	.main section.objects-main-new,
	.business-main,
	.certificates-main,
	.cart-main,
	.breadcrumbs {
		padding-inline: var(--layout-pad);
	}

	.product-detail-layout .product-description,
	.main-contacts ul.main-contacts__tabs-list,
	.catalog-main__content-wrapper-parent .catalog-main__content .catalog-main__inner {
		padding-inline: 0;
	}

	.catalog-main__content-wrapper-parent .catalog-main__content .catalog-main__inner {
		column-gap: var(--space-10);
		row-gap: var(--space-20);
	}

	.main-contacts__staff-block-inner {
		width: 100%;
		margin-inline: 0;
	}

	.product-card .product-card__article,
	.product-card .product-card__stock,
	.product-card .product-card__price .price-measure,
	.product-card .product-card__price span:not(:first-child),
	.product-main__content-wrapper-table-row dt,
	.product-main__content-wrapper-table-row dd,
	.product-description__tabs-buttons button,
	.product-main__print-btn,
	.product-card__discount {
		font-size: var(--fs-xs);
		line-height: var(--lh-normal);
	}

	.product-card__bottom .product-card__card {
		min-width: 0;
		white-space: normal;
		padding: var(--space-6);
		line-height: var(--lh-tight);
	}

	.catalog-main__inner .product-card__favorite {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	.product-card__name {
		overflow-wrap: anywhere;
	}

	.product-detail-layout .product-main__slider-little {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		max-width: 100%;
	}

	.product-main__content-wrapper-1 {
		flex-wrap: wrap;
	}

	.product-card__price {
		min-height: 56px;
	}

	.product-card .product-card__offerCount {
		min-height: calc(2em * var(--lh-normal) + var(--space-12) + 1px);
	}

	.about-company__link {
		padding-right: var(--space-20);
		padding-bottom: 76px;
		min-height: 160px;
	}

	.about-company__name {
		overflow-wrap: anywhere;
	}

	.dealers-main__description-row {
		margin-bottom: var(--space-20);
	}

	.dealers-main__card__btn {
		margin-block: var(--space-20);
	}

	.article-main__layout {
		gap: var(--space-20);
	}

	.article-main__top,
	.article-main__sidebar {
		margin-bottom: var(--space-20);
	}

	.news-main,
	.catalog-main {
		margin-bottom: var(--space-40);
	}
}