.header_opacity .header .header__inner::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 170px;

	background-image: linear-gradient(to bottom, 
		rgb(0 0 0 / 70%) 0%, 
		rgb(0 0 0 / 60%) 25%, 
		rgb(0 0 0 / 50%) 45%, 
		rgba(0 0 0 / 20%) 65%, 
		rgba(0, 0, 0, 0) 100%);

	pointer-events: none;
	z-index: 0;
}

.header_opacity .header__inner{
	margin: 0;
}

/* Содержимое шапки должно лежать поверх градиента */
.header_opacity .header .header__inner > * {
	position: relative;
	z-index: 1;
}

/* У фиксированной шапки свой фон — градиент не нужен */
.header_opacity #headerfixed .header__inner::before {
	display: none;
}

.banners-big__title{
	font-weight: 800;
	text-transform: uppercase;
	font-size: 34px;
	line-height: 120%;
	margin-top: 14px;
}

.banners-big__title span{
	display: block;
	color: #ffffff;
}

.banners-big__text{
	height: max-content;
	padding: 24px 39px 30px;
	border-radius: 8px;
	background-color: var(--light, rgb(0 0 0 / 40%));
	backdrop-filter: blur(20px);
	max-width: 550px;
	transform: translateY(-70px);
}

.banners-big__text-block,
.banners-big__top-text{
	-webkit-line-clamp: unset;
	line-clamp: unset;
	font-size: 16px;
	line-height: 130%;
	color: #ffffffc4;
	margin-top: 14px;
	opacity: 1;
}

.banners-big__text-block p:not(:last-child){
	margin-bottom: 10px;
}

.banners-big__text-block p:last-child{
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Затемнение по низу большого баннера.

   Зеркально верхнему градиенту у шапки: снизу плотнее, кверху сходит
   на нет. Нужно, чтобы карточки-преимущества читались на светлой
   нижней части фотографии.
   ------------------------------------------------------------------ */

/* У .banners-big__item в теме нет position — задаём контекст,
   иначе градиент привяжется к вышестоящему .maxwidth-banner */
.banners-big__item {
	position: relative;
}

.banners-big__item::after {
	content: "";

	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 260px;

	background-image: linear-gradient(to top, 
		rgb(0 0 0 / 74%) 0%, 
		rgba(0, 0, 0, 0.45) 25%, 
		rgb(0 0 0 / 29%) 50%, 
		rgb(0 0 0 / 0%) 75%,
		rgba(0, 0, 0, 0) 100%);

	pointer-events: none;
	z-index: 3;
}

/* Контейнер для секции (для глассморфизма нужен размываемый фоновый рисунок или градиент) */
.stats-section {
  display: flex;
  align-items: center;
  justify-content: center;

	/* Прижимаем ряд карточек к низу баннера по центру */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;

	padding-inline: var(--theme-page-width-padding, 16px);
	z-index: 6;
}

/* Сетка: 3 в ряд, автоматический перенос */
.stats-grid {
  display: grid;
  /* Создает 3 колонки, минимальная ширина карточки — 280px */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;

	/* Ряд не растягиваем на всю ширину экрана — держим по центру */
	max-width: 100%;
	margin-right: auto;
}

.glass-card {
  background: rgb(0 0 0 / 40%);
	/* border: 1px solid rgb(255 255 255 / 12%); */
  border-radius: 8px;
	padding: 14px 22px;
  color: #ffffff;
  transition: transform 0.3s ease, border-color 0.3s ease;

	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	max-width: 216px;
}

/* Анимация при наведении */
.glass-card:hover {
  transform: translateY(-3px);
}

.glass-card__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Крупный акцентный текст (500+, 100 000 м²) */
.glass-card__value,
.glass-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Подпись к карточке */
.glass-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.8);
}

/* Планшет: карточки ниже, отступ от низа меньше */
@media (max-width: 1199px) {
	.stats-section {
		bottom: 24px;
	}

	.glass-card {
		padding: 12px 16px;
	}

	.glass-card__value,
	.glass-card__title {
		font-size: 1.1rem;
	}

	.glass-card__text {
		font-size: 14px;
	}
}

/* Мобильные: поверх баннера ряд не помещается — прячем,
   чтобы не перекрывать заголовок и кнопки */
@media (max-width: 767px) {
	.stats-section {
		display: none;
	}
}

.banners-big__buttons a{
	font-size: 16px;
	padding: 16px 20px;
	height: unset;
	font-weight: 500;
}

.banners-big__inner{
	align-items: center;
}

.header  .slogan__text{
	opacity: 0.8;
}

/* ------------------------------------------------------------------
   Выпадашки в шапке (телефон, корзина, кабинет) перекрывались
   полосой меню.

   Внутри .header__inner лежат две обёртки-соседа: верхняя строка
   (лого, телефон, корзина) и полоса меню с классом .bg-glass.
   У .bg-glass есть backdrop-filter — он сам по себе создаёт контекст
   наложения, поэтому при равном z-index полоса меню, как более
   поздняя в DOM, рисуется поверх выпадашек. Поднимать z-index на
   самой выпадашке бесполезно: она заперта внутри своей обёртки.

   Поэтому явно разводим слои обёрток: меню — вниз, верхнюю строку —
   вверх. Селекторы намеренно не завязаны на конкретную вёрстку шапки
   Aspro, чтобы правка пережила смену её варианта в настройках темы.
   ------------------------------------------------------------------ */

/* Полоса меню — нижний слой.
   Важно: .header__main-part в этом варианте шапки лежит ВНУТРИ полосы
   меню, поэтому опираемся на .bg-glass / .header__menu-part и не
   поднимаем обёртку по вложенному .header__main-part. */
.header .header__inner > .bg-glass,
.header .header__inner > .maxwidth-theme:has(.header__menu-part),
.header .header__inner > .maxwidth-theme:has(.header__main-part) {
	position: relative;
	z-index: 5;
}

/* Верхняя строка с телефоном/корзиной — верхний слой */
.header .header__inner > .maxwidth-theme--no-padding,
.header .header__inner > .maxwidth-theme:has(.header__top-part) {
	position: relative;
	z-index: 40;
}

.header .header__top-part {
	position: relative;
	z-index: 40;
}

/* Сами выпадашки — поверх остального содержимого верхней строки */
.header .phones__dropdown,
.header .basket-dropdown,
.header .cabinet-dropdown {
	z-index: 50;
}

/* Блок, внутри которого открыта выпадашка, поднимаем над соседями,
   иначе следующие иконки в строке перекрывают её край */
.header .phones__inner:hover,
.header .header-cart:hover,
.header .header-cabinet:hover {
	position: relative;
	z-index: 50;
}

/* ==================================================================
   ЛЕНТА БРЕНДОВ ПОД HERO-БАННЕРОМ

   Бесконечная бесшовная прокрутка: дубликат набора добавляет JS
   (brands-marquee.js), CSS-анимация translateX(-50%) гонит трек по
   кругу. Сдвиг задаём margin-right на плитке, а не gap, — иначе на
   стыке половин появляется видимый шов.

   Логотипы брендов тёмные на прозрачном фоне, поэтому лента идёт на
   светлой подложке, а не поверх баннера.
   ================================================================== */

/* Фон именно белый, а не серый.

   У части логотипов подложка залита непрозрачным белым (Interbau —
   вообще JPEG, прозрачности там нет в принципе), поэтому на любом
   небелом фоне они проступают прямоугольниками.

   mix-blend-mode здесь не поможет: у .rv-marquee есть mask-image, а у
   трека will-change: transform — и то и другое создаёт контекст
   наложения, внутри которого смешивание замыкается и до фона секции
   не доходит. Совпадение цвета — единственный надёжный способ.

   Исключение — Schiedel: у него фирменная жёлтая плашка, она остаётся
   видимой намеренно. */
.rv-marquee-section {
	background-color: #f8f9fa;
	padding: 26px 0 26px;
	margin: 80px 0 0;
}

/* Микро-заголовок над логотипами.
   Капс задаём стилем, а не в тексте: так строка нормально читается
   скринридерами и копируется без «крика».

   Ширину и отступы берём те же, что у контентной сетки темы, чтобы
   текст встал ровно по левому краю остальных блоков страницы, а не
   прижался к краю окна. */
.rv-marquee__caption {
	width: calc(100% - 64px);
	max-width: 1400px;
	margin: 0 auto 18px;
	font-size: 16px;
	line-height: 140%;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: left;
	color: #22252a57;
}

.rv-marquee__caption span{
	color: #c47252;
}


.rv-marquee {
	position: relative;
	z-index: 1;
	width: 100%;

	/* вертикальный запас — чтобы подъём плитки при наведении не обрезался
	   (overflow: hidden режет по краю padding-box) */
	padding: 10px 0;
	overflow: hidden;

	/* мягко растворяем края, чтобы логотипы не «обрубались» */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.rv-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
}

/* Анимацию включаем классом — JS вешает его ТОЛЬКО после клонирования
   второй половины, иначе translateX(-50%) считается от одинарной ширины
   и на первом круге даёт рывок вместо бесшовного цикла. */
.rv-marquee__track.is-animating {
	/* Длительность рассчитывает custom.js от фактической ширины набора,
	   поэтому добавление новых брендов не ускоряет движение ленты. */
	animation: rv-marquee var(--rv-marquee-duration, 120s) linear infinite;
}

/* при наведении лента замирает — удобно рассмотреть и кликнуть */
.rv-marquee:hover .rv-marquee__track.is-animating {
	animation-play-state: paused;
}

.rv-marquee__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;

	margin-right: 68px;
	opacity: 0.9;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.rv-marquee__item:hover,
.rv-marquee__item:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
}

.rv-marquee__item img {
	display: block;
	height: 50px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	opacity: 0.72;
	transition: filter 0.3s ease, opacity 0.3s ease;
	filter: grayscale(100%);
}

.rv-marquee__item img:hover {
	opacity: 1;
	filter: unset;
}

@keyframes rv-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 991px) {
	.rv-marquee-section {
		padding: 20px 0;
	}

	.rv-marquee__caption {
		width: calc(100% - 32px);
		margin-bottom: 14px;
		font-size: 14px;
	}

	.rv-marquee__item {
		margin-right: 44px;
	}

	.rv-marquee__item img {
		height: 38px;
	}
}

/* Тем, кто просил меньше движения, ленту не крутим —
   JS в этом случае и не клонирует набор */
@media (prefers-reduced-motion: reduce) {
	.rv-marquee {
		overflow-x: auto;
	}

	.rv-marquee__track {
		animation: none !important;
	}
}

/* ==================================================================
   КИНЕМАТОГРАФИЧЕСКИЕ ЭФФЕКТЫ HERO-БАННЕРА

   Разметка — hero_fx.php, вложенные слои:
     .hero-fx__zoom  > .hero-fx__shift > .hero-fx__image
     .hero-fx__dust    (блики боке)

   Тёплое пятно света и падающие листья убраны 07.08.2026 по решению
   заказчика — оба давали лишний визуальный шум в кадре.

   Зум и параллакс разнесены по разным слоям намеренно: оба используют
   transform, и на одном элементе вторая анимация перетёрла бы первую.

   Всё анимируемое — только transform и opacity: они композитятся на GPU
   и не вызывают пересчёта макета.
   ================================================================== */

.hero-fx {
	position: absolute;
	inset: 0;
	overflow: hidden;

	/* фото и световые слои лежат под текстом баннера (.maxwidth-theme z-4) */
	z-index: 0;
	pointer-events: none;
}

.hero-fx__zoom,
.hero-fx__shift,
.hero-fx__image {
	position: absolute;
	inset: 0;
}

.hero-fx__image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	/* Базовое увеличение = запас, внутри которого параллакс двигает кадр.
	   6% дают по ~3% с каждой стороны (≈46px по ширине, ≈25px по высоте),
	   а сдвигаем максимум на 10px — чёрные края не появятся. */
	transform: scale(1.06);
}

/* --- 1. Очень медленный зум ------------------------------------- */

.hero-fx__zoom {
	/* alternate обязателен: без него на стыке цикла кадр скачком
	   возвращается с 1.03 на 1 — это отлично видно */
	animation: hero-fx-zoom 20s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes hero-fx-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.05); }
}

/* --- 2. Параллакс за мышью (значения ставит JS) ------------------ */

.hero-fx__shift {
	/* Сдвиг ставит custom.js, присваивая transform напрямую — через
	   CSS-переменную это стоило бы ~16 fps на слабой машине (смена
	   переменной перерисовывает слой, присвоение transform — нет).
	   Здесь задаём только нейтральное начальное положение. */
	transform: translate3d(0, 0, 0);
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 3. Блики боке ----------------------------------------------

   6 бликов одного типа: 4 средних (38–66px) и 2 крупных (104–118px).
   Различаются только размером и темпом анимаций — крупные двигаются
   заметно медленнее.

   Отдельная группа сильно размытых дисков (blur 15–30px) из ранней
   версии убрана: на светлом кадре они читались как бесполезные
   бледные пятна.

   БРОУНОВСКОЕ ПАРЕНИЕ. У каждого блика две анимации: дрейф и дыхание
   прозрачности. Периоды не кратны друг другу, поэтому траектория не
   повторяется и не читается как заводной механизм.

   Вращение вокруг оси и пульсация размера убраны 07.08.2026 ради
   производительности — обе стоили дорого при почти нулевой отдаче
   на этом кадре (подробности в комментариях ниже).

   ПАРАЛЛАКС. Смещение от мыши пишет JS в контейнер группы. Блики
   двигаются В ТУ ЖЕ сторону, что и фон, но сильнее: боке живёт
   перед камерой, а не за домом.

   Анимируются только transform и opacity — всё уходит на GPU.
   Замер при активном движении мыши: 60 fps, худший кадр 17 ms. */

.hero-fx__dust {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;

	/* над фотографией, под листьями и текстом баннера */
	z-index: 1;

	/* как и у .hero-fx__shift, сдвиг присваивает JS напрямую */
	transform: translate3d(0, 0, 0);
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Группа А: средние блики боке -------------------------------- */

/* Линейная прозрачность вместо радиальной: одна половина диска
   оранжевая, вторая уходит в ноль. Достался от версии с вращением,
   где поворот был виден именно благодаря асимметрии; сейчас работает
   просто как мягкая неравномерность заливки — кадру она идёт.

   Вложенность осталась от трёх анимаций, каждая из которых меняла
   transform и на одном узле перетёрла бы соседнюю:
     span      — дрейф по вертикали + дыхание прозрачности
     span > i  — несёт размеры для диска
     i::before — сам диск */

.hero-fx__dust span {
	position: absolute;

	width: var(--flare-size, 44px);
	height: var(--flare-size, 44px);

	/* центрируем по заданной точке */
	margin-left: calc(var(--flare-size, 44px) / -2);
	margin-top: calc(var(--flare-size, 44px) / -2);

	animation:
		hero-fx-flare-rise var(--flare-float, 28s) ease-in-out infinite alternate,
		hero-fx-flare-pulse var(--flare-pulse, 8s) ease-in-out infinite alternate;
	animation-delay: var(--flare-delay, 0s), var(--flare-delay, 0s);

	will-change: transform, opacity;
}

/* Промежуточный узел. Вращение вокруг своей оси убрано 07.08.2026:
   на слабых машинах оно стоило ещё ~6 fps (48 → 55 при CPU 6x), а на
   этом кадре почти не читалось — блик деликатный, поворот линейного
   градиента взглядом не ловится. Узел оставлен: он несёт размеры для
   диска в ::before и держит структуру слоёв. */
.hero-fx__dust span > i {
	display: block;
	width: 100%;
	height: 100%;
}

/* Сам диск: линейный градиент под своим углом.

   ПУЛЬСАЦИЯ РАЗМЕРА УБРАНА (07.08.2026) — она стоила дороже остальных
   трёх анимаций вместе взятых. Диск размыт через filter: blur(), и при
   каждой смене масштаба браузер пересчитывает размытие заново:
   закэшировать нечего, потому что меняется сам размер картинки.

   Замеры при CPU-throttling 6x: 12 бликов с пульсацией — 33 fps,
   без пульсации — 51 fps, а вместе с сокращением до 6 бликов — 55 fps
   при 58 fps на пустом кадре.

   blur остался: он статичный, считается один раз и дальше живёт
   готовой текстурой на GPU. will-change тут больше не нужен —
   без анимации transform он только резервировал бы память впустую. */
.hero-fx__dust span > i::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;

	background-image: linear-gradient(
		var(--flare-angle, 45deg),
		rgba(255, 138, 30, 0.85) 0%,
		rgba(255, 156, 52, 0.55) 38%,
		rgba(255, 176, 80, 0.18) 68%,
		rgba(255, 186, 96, 0) 100%
	);

	filter: blur(calc(1px + var(--flare-size, 44px) / 22));
}

@keyframes hero-fx-flare-rise {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--flare-sway, 20px), var(--flare-rise, -32px), 0); }
}

/* Дыхание прозрачности */
@keyframes hero-fx-flare-pulse {
	from { opacity: 0.30; }
	to   { opacity: 0.78; }
}

/* Планшеты и мобильные: параллакс и блики выключаем — мыши нет,
   а лишние composite-слои сажают батарею. Зум остаётся: он не зависит
   от курсора и практически бесплатен. */
@media (max-width: 991px) {
	.hero-fx__dust {
		display: none;
	}

	.hero-fx__shift {
		transform: none;
	}
}

/* Системная настройка «уменьшить движение» — оставляем статичный кадр */
@media (prefers-reduced-motion: reduce) {
	.hero-fx__zoom {
		animation: none;
	}

	.hero-fx__dust {
		display: none;
	}

	.hero-fx__shift {
		transform: none;
		transition: none;
	}
}

.val-flex{
	display: flex;
	flex-direction: column;
}

.val-flex a:not(.val-link){
	display: none !important;
}

.CATALOG_SECTIONS .sections-list__content-inner .mt > a {
	display: none !important;
}

.CATALOG_SECTIONS .content-row-hidden {
	grid-template-rows: 1fr;
}

.CATALOG_SECTIONS .sections-list__content-inner .mt a {
	color: #fff;
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
	text-decoration: none;
	width: max-content;
	line-height: 140%;
}

.val-link:before {
	content: "\2726";
	padding: 0 10px 0 0;
	opacity: 50%;
}

.CATALOG_SECTIONS .sections-list__item-products-count {
	display: none;
}

/* Подчёркивание выезжает слева направо при наведении */
.CATALOG_SECTIONS .sections-list__content-inner .mt a::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 1px;
	background-color: currentColor;
	transition: width 0.3s ease, right 0.3s ease, left 0.3s ease;
}

/* При наведении линия закрепляется слева и растягивается,
   при уходе курсора — уезжает вправо */
.CATALOG_SECTIONS .sections-list__content-inner .mt a:hover::after {
	left: 0;
	right: auto;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {

	.CATALOG_SECTIONS .sections-list__content-inner .mt a::after {
		transition: none;
	}
}

.CATALOG_SECTIONS .sections-list__item-content{
	padding: 0 24px 20px;
}

.CATALOG_SECTIONS .index-block__preview{
	color: #a0a0a0;
}

.CATALOG_SECTIONS {
	background-color: #F8F9FA;
}

.index-block__title{
	color: #212529;
	font-weight: 700;
}

.CATALOG_SECTIONS .grid-list--items .shine {
	height: 400px;
	aspect-ratio: unset;
}

/* ==================================================================
   БЛОК РАЗДЕЛОВ НА ГЛАВНОЙ: 2 строки + «Показать ещё»

   Сколько плиток помещается в 2 строки, зависит от ширины экрана,
   поэтому лишние прячем через :nth-child на каждом брейкпоинте, а не
   обрезкой массива в PHP — иначе на узких экранах пропадали бы
   разделы, которые туда как раз влезают.

   Раскладка сетки (см. css/autoload/grid-list.css):
     >= 1200px — 4 колонки → 2 строки = 8 плиток
     992-1199  — 3 колонки → 2 строки = 6 плиток
     601-991   — 2 колонки → 2 строки = 4 плитки
     < 601px   — горизонтальная лента (.mobile-scrolled), не трогаем

   Разворот: JS снимает класс .rv-sections-collapsed с сетки.
   ================================================================== */

.rv-sections-more {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

/* Кнопка нужна только пока блок свёрнут */
.rv-sections-more--hidden {
	display: none;
}

/* Кнопка крупнее штатной, но кегль не трогаем — растёт только «коробка».
   height: auto перебивает фиксированную высоту .btn из темы. */
.rv-sections-more__btn {
	cursor: pointer;
	height: auto;
	padding: 15px 44px;
	line-height: 1.2;
}

/* --- Прячем лишние плитки, пока блок свёрнут --- */

@media (min-width: 1200px) {

	.rv-sections-collapsed > *:nth-child(n + 9) {
		display: none;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {

	.rv-sections-collapsed > *:nth-child(n + 7) {
		display: none;
	}
}

@media (min-width: 601px) and (max-width: 991px) {

	.rv-sections-collapsed > *:nth-child(n + 5) {
		display: none;
	}
}

/* На мобильных блок — свайп-лента: показываем всё, кнопка не нужна */
@media (max-width: 600px) {

	.rv-sections-more {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Замыкающая плитка «Все разделы» (только мобильная лента).

   Живёт последним элементом внутри той же сетки, поэтому по умолчанию
   попала бы под :nth-child-скрытие выше — гасим её на ПК явно, а в
   ленте наоборот показываем.
   ------------------------------------------------------------------ */

.rv-sections-all {
	display: none;
}

@media (max-width: 600px) {

	.rv-sections-all {
		display: block;
	}

	.rv-sections-all__link {
		display: flex;
		align-items: center;
		justify-content: center;

		height: 100%;
		min-height: 200px;
		padding: 24px;

		text-align: center;
		text-decoration: none;

		background-color: #fff;
		border: 1px solid var(--stroke_black, #e5e5e5);
	}

	.rv-sections-all__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.rv-sections-all__icon {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 48px;
		height: 48px;

		border-radius: 50%;
		background-color: var(--theme-base-color, #f2875e);
		color: #fff;
	}

	.rv-sections-all__icon .svg svg {
		width: 12px;
		height: 20px;
		fill: currentColor;
	}

	.rv-sections-all__text {
		color: var(--title-text, #212529);
	}
}

/* ------------------------------------------------------------------
   Кнопка «Весь каталог» напротив заголовка блока (только ПК).

   Вставляется скриптом в готовую флекс-обёртку заголовка
   (.index-block__space-wrapper уже с justify-between), поэтому здесь
   только внешний вид и правила видимости.
   ------------------------------------------------------------------ */

.rv-sections-head-link {
	flex-shrink: 0;
}

/* До 991px обёртка заголовка переключается в колонку — кнопка там
   дублировала бы плитку «Все разделы», прячем */
@media (max-width: 991px) {

	.rv-sections-head-link {
		display: none;
	}
}

/* ==================================================================
   ЛОГОТИП-ВОДЯНОЙ ЗНАК НА ФОНЕ БЛОКА РАЗДЕЛОВ

   Крупный логотип в правой верхней части блока — в районе кнопки
   «Весь каталог». Читается боковым зрением как тиснение на бумаге,
   не мешая контенту.

   ЦВЕТ И ПРОЗРАЧНОСТЬ НАСТРАИВАЮТСЯ ЗДЕСЬ ↓ (переменные ниже).

   Знак покрашен через mask-image, а не background-image: цвет тогда
   задаёт обычный background-color, то есть его можно менять одной
   переменной. С background-image покрасить внешний SVG нельзя —
   currentColor внутри подключённого файла не наследуется от страницы.
   ================================================================== */

.CATALOG_SECTIONS {
	position: relative;
	overflow: hidden; /* знак выходит за края — подрезаем по блоку */

	/* --- ПОДБОР ВНЕШНЕГО ВИДА ЗНАКА --- */

	/* Цвет логотипа. Примеры: #fff — белый (на светлом фоне почти не
	   виден), #000 — чёрный, var(--theme-base-color) — фирменный */
	--rv-logo-color: #000;

	/* Насыщенность. 0.03-0.06 — деликатное тиснение,
	   0.10-0.15 — заметный акцент, 1 — полностью плотный цвет */
	--rv-logo-opacity: 0.05;

	/* Размер знака относительно ширины блока */
	--rv-logo-width: 26%;

	/* Положение центра знака в блоке (по умолчанию — район кнопки
	   «Весь каталог», правый верхний угол) */
	--rv-logo-right: 7%;
	--rv-logo-top: 4%;
}

.CATALOG_SECTIONS::before {
	content: "";
	position: absolute;
	top: var(--rv-logo-top);
	right: var(--rv-logo-right);
	width: var(--rv-logo-width);
	aspect-ratio: 666 / 278;
	/* Цвет знака — это заливка блока, видимая сквозь маску */
	background-color: var(--rv-logo-color);
	opacity: var(--rv-logo-opacity);
	-webkit-mask-image: url(../images/svg/logo_watermark.svg);
	mask-image: url(../images/svg/logo_watermark.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	z-index: 0;

	display: none;
}

/* Контент блока — поверх знака */
.CATALOG_SECTIONS .sections-block,
.CATALOG_SECTIONS .index-block__headings {
	position: relative;
	z-index: 1;
}

/* На планшетах знак крупнее по доле ширины — блок уже */
@media (max-width: 991px) {

	.CATALOG_SECTIONS {
		--rv-logo-width: 75%;
	}
}

/* На мобильных знак прячем.

   Свободного поля в блоке там практически нет: заголовок занимает
   верхние ~23% высоты, сразу под ним начинается лента карточек и идёт
   до самого низа. Знак в любом положении оказался бы под карточками —
   вместо тиснения получалась бы грязь по краям. Логотип и так стоит
   в шапке, на маленьком экране дублировать его незачем. */
@media (max-width: 600px) {

	.CATALOG_SECTIONS::before {
		display: none;
	}
}

.group_description_block .val-flex{
	display: none;
}

.MIDDLE_ADV .banners-img-with-text-list__item-text{
	margin: 0 20px 20px;
}

/* ==================================================================
   ТЕГИ-ПИЛЮЛИ НА БАННЕРАХ MIDDLE_ADV + КАРТОЧКА ТОВАРА

   Разметка — шаблон компонента banners-with-text-mixed,
   данные готовит его result_modifier.php.

   Логика показа:
     ПК (>=992px)   заголовок гаснет по наведению, на его месте
                    появляются пилюли; карточка — тултип по наведению
     МОБ (<992px)   пилюли видны всегда под заголовком; карточка —
                    шторка снизу по тапу (класс is-open ставит JS)

   Всё анимируемое — только transform и opacity: композитятся на GPU
   и не вызывают пересчёта макета.
   ================================================================== */

/* Подсказка-плашка под сеткой — только для мобильных.

   На ПК скрыта: там теги раскрываются наведением, звать «нажмите»
   неверно, да и сама подсказка не нужна — эффект виден сразу.

   Не просто строка текста: инлайновая пилюля с мягкой заливкой
   фирменного цвета — так подсказка читается как подсказка, а не как
   оборванный заголовок, и не спорит по весу с плитками над ней.
   Ширина по содержимому (width: max-content), поэтому плашка не
   растягивается в пустую полосу на всю ширину экрана. */
.dh-adv__hint {
	display: none;
	align-items: center;
	gap: 9px;
	width: max-content;
	max-width: 100%;

	margin-top: 20px;
	padding: 10px 18px 10px 14px;

	background-color: rgba(242, 135, 94, 0.1);
	border-radius: 999px;

	color: var(--black, #222);
	font-size: 15px;
	line-height: 1.3;
}

@media (max-width: 991px) {

	.dh-adv__hint {
		display: inline-flex;
	}
}

.dh-adv__hint-icon {
	display: inline-flex;
	flex: 0 0 auto;

	/* Иконка рисуется через currentColor, поэтому фирменный цвет
	   задаём здесь — на текст он не распространяется */
	color: var(--theme-base-color, #f2875e);
}

.dh-adv__hint-icon svg {
	display: block;
}

/* Лёгкое покачивание — намёк на касание. Одноразовым его делать
   нельзя (пользователь может не смотреть в этот момент), поэтому
   повторяем с большой паузой: сама анимация занимает лишь первые
   ~12% цикла, остальное иконка стоит неподвижно. */
.dh-adv__hint-icon svg {
	animation: dh-adv-hint-tap 6s ease-in-out infinite;
}

@keyframes dh-adv-hint-tap {
	0%, 4%, 12%, 100% {
		transform: translateY(0);
	}

	7% {
		transform: translateY(2.5px);
	}
}

@media (max-width: 600px) {

	.dh-adv__hint {
		gap: 8px;
		padding: 9px 15px 9px 12px;
		font-size: 14px;
	}
}

/* Плитка с тегами: тултипу нужно выходить за границы кадра, поэтому
   overflow здесь снимаем. Побочный эффект — пропадает обрезка
   увеличения фото, поэтому картинку обрезаем на её собственном слое. */
.dh-adv__item.banners-with-text-mixed-list__item {
	overflow: visible;
}

.dh-adv__item .banners-with-text-mixed-list__item-image {
	border-radius: inherit;
	overflow: hidden;
}

/* Усиление штатного затемнения темы (.dark-block-after:after — градиент
   от прозрачного вверху к #0000007F внизу). Отдельный слой не добавляем:
   два градиента друг на друге дают видимую границу. У темы уже есть
   transition на opacity, поднимаем только плотность и высоту.

   По умолчанию включено — это состояние мобильных, где пилюли видны
   всегда и фон под ними должен быть затемнён постоянно. На ПК ниже
   гасим и возвращаем по наведению. */
.dh-adv__item .banners-with-text-mixed-list__item-image::after {
	top: 30%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 100%);
	opacity: 1;
	transition: opacity 0.32s ease;
}

.fsys__risk::before{
	display: none;
}

.dark-block-after:after{
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
}

.dh-adv__tags {
	position: absolute;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dh-adv__tag-wrap {
	position: relative;
}

.dh-adv__tag {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 9px 18px;

	/* тёмное стекло */
	background-color: rgba(20, 20, 22, 0.42);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);

	color: #fff;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		color 0.25s ease;
}

/* Наведённая пилюля читается как активная: стекло светлеет почти до
   белого, текст становится тёмным — контраст меняется на обратный,
   поэтому её ни с чем не спутать даже боковым зрением. */
.dh-adv__tag:hover,
.dh-adv__tag:focus,
.dh-adv__tag:focus-visible {
	background-color: rgb(255 255 255 / 16%);
	border-color: transparent;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
	color: #ffffff;
	text-decoration: none;
}

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

/* align-items оставляем stretch (значение по умолчанию).
   И center, и flex-start отменяют растягивание: колонка с текстом
   получает высоту по содержимому, и height:100% внутри неё считать
   не от чего — процент требует определённой высоты родителя. При
   stretch колонка занимает всю высоту строки, то есть высоту
   картинки, и кнопку можно прижать к её низу. */
.dh-adv__card {
	display: flex;
	gap: 14px;
	padding: 14px;

	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.dh-adv__card-image {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #f2f0ee;
}

.dh-adv__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Колонка тянется на всю высоту строки (её задаёт картинка, 96px),
   а space-between прижимает кнопку к нижнему краю — вровень с низом
   фото. Высоту берём через min-height, а не height:100%: если текст
   длинный, колонка вырастает выше картинки и кнопка уезжает вниз
   вместе с ней, вместо того чтобы наползать на заголовок. */
.dh-adv__card-body {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 100%;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Карточка без фото: колонке не от чего считать min-height (высоту
   строки задавала картинка), поэтому прижимать кнопку не к чему —
   просто ставим обычный отступ между заголовком и кнопкой. */
.dh-adv__card--no-image .dh-adv__card-body {
	min-height: 0;
}

.dh-adv__card-title {
	margin-bottom: 12px;
	color: var(--black, #222);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.dh-adv__card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Во флекс-колонке кнопка иначе сжимается по высоте под давлением
	   длинного заголовка; align-self не даёт ей растянуться на всю
	   ширину колонки — ширина остаётся по содержимому */
	flex: 0 0 auto;
	align-self: flex-start;
}

.dh-adv__card-close {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.06);
	cursor: pointer;
}

/* крестик рисуем двумя линиями — иконочный шрифт темы тут не нужен */
.dh-adv__card-close::before,
.dh-adv__card-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 2px;
	margin: -1px 0 0 -7.5px;
	background-color: #222;
	border-radius: 2px;
}

.dh-adv__card-close::before {
	transform: rotate(45deg);
}

.dh-adv__card-close::after {
	transform: rotate(-45deg);
}

/* Распорка нужна только мобильным — на ПК пилюли лежат поверх */
.dh-adv__tags-spacer {
	display: none;
}

/* ==================================================================
   ПК: пилюли вместо заголовка, карточка — тултип
   ================================================================== */

@media (min-width: 992px) {

	/* На ПК затемнение в покое не гаснет полностью, а лишь слабеет и
	   опускается: заголовок карточки лежит на светлом фото и без
	   подложки сливается с ним. При наведении градиент поднимается
	   выше и уплотняется — под пилюлями нужна плотная основа.

	   Ниже 992px правило не действует: там пилюли видны всегда,
	   поэтому фон под ними затемнён постоянно на полную. */
	.dh-adv__item .banners-with-text-mixed-list__item-image::after {
		top: 62%;
		opacity: 0.7;
		transition: opacity 0.32s ease, top 0.32s ease;
	}

	.dh-adv__item:hover .banners-with-text-mixed-list__item-image::after {
		top: 30%;
		opacity: 1;
	}

	.dh-adv__title {
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.dh-adv__item:hover .dh-adv__title {
		opacity: 0;
		transform: translateY(-6px);
	}

	/* Пилюли встают на место заголовка — те же отступы, что у
	   текстового блока баннера (20px, см. правило .MIDDLE_ADV выше) */
	.dh-adv__tags {
		right: 20px;
		bottom: 20px;
		left: 20px;
	}

	.dh-adv__tag-wrap {
		opacity: 0;
		transform: translateY(10px);
		pointer-events: none;
		transition:
			opacity 0.32s ease var(--dh-tag-delay, 0s),
			transform 0.32s ease var(--dh-tag-delay, 0s);
	}

	/* влетают по очереди: вторая пилюля с задержкой */
	.dh-adv__item:hover .dh-adv__tag-wrap {
		--dh-tag-delay: calc(var(--dh-tag-index, 0) * 0.07s);
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Тултип: над тегом, выезжает снизу вверх. Периметром плитки
	   не ограничен — ложится поверх соседних баннеров. */
	.dh-adv__card {
		position: absolute;
		bottom: calc(100% + 12px);
		left: 0;
		z-index: 20;
		width: 340px;
		max-width: 92vw;

		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);
		transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
	}

	.dh-adv__tag-wrap:hover .dh-adv__card,
	.dh-adv__tag-wrap:focus-within .dh-adv__card {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s;
	}

	/* Мостик между пилюлей и карточкой: без него курсор проваливается
	   в зазор, тултип успевает закрыться и мигает */
	.dh-adv__card::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 12px;
	}

	/* У правого края сетки тултип прижимаем к правому краю тега,
	   иначе он уедет за пределы экрана */
	.item-w25:nth-child(4n) .dh-adv__card,
	.banners-with-text-mixed-list__wrapper:last-child .dh-adv__card {
		left: auto;
		right: 0;
	}
}

/* ==================================================================
   МОБИЛЬНЫЕ: пилюли видны сразу, карточка — шторка снизу
   ================================================================== */

@media (max-width: 991px) {

	/* Текстовый блок баннера вырван из потока (absolute position-bottom),
	   поэтому пилюли не могут просто «встать под заголовок»: они лежат
	   отдельным слоем и заголовок наезжал бы на них. Прижимаем пилюли
	   к низу плитки, а внутри текстового блока держим распорку той же
	   высоты — заголовок останавливается ровно над ними. */
	.dh-adv__tags {
		right: 20px;
		bottom: 20px;
		left: 20px;
	}

	.dh-adv__tags-spacer {
		display: block;
		height: var(--dh-tags-height, 84px);
	}

	.dh-adv__tag {
		font-size: 14px;
		padding: 8px 15px;
	}

	/* Шторка прижата к низу экрана и ложится ПОВЕРХ нижней панели
	   сайта (её z-index 997). Перекрывать панель можно: пока шторка
	   открыта, навигация всё равно недоступна из-за затемнения.

	   z-index работает предсказуемо потому, что JS переносит шторку
	   в конец <body> — внутри плитки она была зажата чужим контекстом
	   наложения и ложилась под собственное затемнение. */
	.dh-adv__card {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1002;

		/* Нижний отступ учитывает безопасную зону у iPhone, иначе
		   кнопка упрётся в системную полосу-индикатор */
		padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 0px));
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28);

		transform: translateY(101%);
		visibility: hidden;
		transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.34s;
	}

	.dh-adv__tag-wrap.is-open .dh-adv__card,
	.dh-adv__card.is-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
	}

	.dh-adv__card-close {
		display: block;
	}

	.dh-adv__card-body {
		padding-right: 34px;
	}

	/* В шторке кнопка во всю ширину — align-self перебивает
	   flex-start из базового правила, иначе она сожмётся по тексту */
	.dh-adv__card-btn {
		width: 100%;
		align-self: stretch;
	}

	/* Затемнение под шторкой; общее на страницу, создаёт JS.
	   Нижнюю панель тоже перекрывает — иначе она осталась бы
	   единственным незатемнённым пятном на экране. */
	.dh-adv-overlay {
		position: fixed;
		inset: 0;
		z-index: 1001;
		background-color: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.dh-adv-overlay.is-visible {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0s;
	}
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {

	.dh-adv__title,
	.dh-adv__tag,
	.dh-adv__tag-wrap,
	.dh-adv__card,
	.dh-adv__item .banners-with-text-mixed-list__item-image::after {
		transition-duration: 0.01ms !important;
	}

	.dh-adv__hint-icon svg {
		animation: none;
	}
}

/* ==================================================================
   БЛОК «ИНЖЕНЕРНАЯ ЭКСПЕРТИЗА» (CUSTOM_TEXT на главной)

   Разметка — include/mainpage/components/custom_text/text.php,
   поведение — js/custom.js.

   Слева таймлайн-табы и текст слоя, справа статичная схема разреза.
   У каждого слоя свои точки: короткая плашка видна сразу, карточка
   с материалом раскрывается по наведению (на мобильных — шторка).
   ================================================================== */

.fsys {
	--fsys-accent: #C05A3A;
	--fsys-graphite: #22252A;
	--fsys-muted: #6b7076;
	--fsys-line: rgba(34, 37, 42, 0.09);

	padding-block: 8px;
}

/* --- Шапка блока ------------------------------------------------- */

.fsys__head {
	max-width: 820px;
	margin-bottom: 40px;
}

.fsys__title {
	margin: 0 0 12px;
	color: var(--fsys-graphite);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.fsys__subtitle {
	margin: 0;
	color: var(--fsys-muted);
	font-size: 16px;
	line-height: 1.5;
}

.fsys__subtitle b {
	color: var(--fsys-graphite);
	font-weight: 600;
}

/* --- Раскладка --------------------------------------------------- */

.fsys__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 48px;
	align-items: center;
}

/* Текст лежит выше схемы: её левый край заходит под колонку */
.fsys__left {
	position: relative;
	z-index: 1;
}

/* --- Таймлайн-меню ----------------------------------------------- */

.fsys__tabs {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;

	margin-bottom: 30px;
}

/* Линия проходит по центру кружков, а не под ними */
.fsys__tabs::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 0;

	height: 1px;
	margin-top: -0.5px;
	background-color: var(--fsys-line);
}

.fsys__tab {
	position: relative;
	z-index: 1;

	display: inline-flex;
	align-items: center;

	height: 42px;
	padding: 0;
	border: 1px solid rgba(34, 37, 42, 0.16);
	border-radius: 999px;
	background-color: #fff;

	color: var(--fsys-muted);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;

	transition:
		border-color 0.3s ease,
		color 0.3s ease,
		background-color 0.3s ease;
}

.fsys__tab-num {
	flex: 0 0 auto;
	width: 40px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Ширину капсулы анимируем через grid: width auto не интерполируется,
   а 1fr в grid-template-columns — да */
.fsys__tab-name {
	display: grid;
	grid-template-columns: 0fr;
	overflow: hidden;
	transition: grid-template-columns 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fsys__tab-name > span {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.24s ease, padding 0.34s ease;
}

.fsys__tab:hover:not(.is-active) {
	border-color: rgba(192, 90, 58, 0.4);
	color: var(--fsys-graphite);
}

/* Активный таб — обводка терракотом, без заливки */
.fsys__tab.is-active {
	border-color: var(--fsys-accent);
	color: var(--fsys-accent);
	cursor: default;
}

.fsys__tab.is-active .fsys__tab-name {
	grid-template-columns: 1fr;
}

.fsys__tab.is-active .fsys__tab-name > span {
	padding-right: 18px;
	opacity: 1;
	transition-delay: 0.1s;
}

/* --- Текстовая зона ---------------------------------------------- */

.fsys__panels {
	position: relative;
	min-height: 440px;
}

/* Панель въезжает сбоку: вертикальный сдвиг читался как дёрганье */
.fsys__panel {
	opacity: 0;
	transform: translateX(16px);
	transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fsys__panel.is-active {
	opacity: 1;
	transform: translateX(0);
}

.fsys__panel[hidden] {
	display: none;
}

.fsys__layer-title {
	margin: 0 0 18px;
	color: var(--fsys-graphite);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.3;
}

/* Единый строй блоков: заголовок терракотовый, текст серый,
   между блоками — едва заметная линия */
.fsys__row {
	padding-bottom: 8px;
	border-bottom: 1px solid #e3e4e8;
	margin-bottom: 8px;
}

.fsys__row--last {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.fsys__row-label {
	color: var(--fsys-accent);
	font-size: 15px;
	font-weight: 600;
}

.fsys__row-text {
	margin: 0;
	color: var(--fsys-muted);
	font-size: 15px;
	line-height: 1.55;
}

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

.fsys__risk {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-bottom: 0;
}

.fsys__risk:last-child {
	margin-bottom: 0;
}

.fsys__risk-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;
	margin-top: 2px;

	color: var(--fsys-accent);
}

.fsys__risk-text {
	color: var(--fsys-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* --- Бренды системы ---------------------------------------------- */

.fsys__brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	margin-top: 12px;
}

.fsys__brand {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 56px;
	padding: 0;
	border: 0;

	color: var(--fsys-graphite);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;

	transition: color 0.25s ease;
}

/* Логотипы приходят цветными PNG разной насыщенности: приглушаем их,
   чтобы ряд читался единым блоком, и возвращаем цвет при наведении. */
.fsys__brand-logo {
	display: block;
	width: auto;
	max-width: 150px;
	max-height: 52px;
	object-fit: contain;

	filter: grayscale(1);
	opacity: 0.68;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.fsys__brand:hover .fsys__brand-logo {
	filter: grayscale(0);
	opacity: 1;
}

.fsys__brand:hover {
	color: var(--fsys-accent);
	text-decoration: none;
}

/* Подсказка о бренде: страна и специализация */
.fsys__brand-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 6;

	display: flex;
	flex-direction: column;
	gap: 2px;

	padding: 8px 12px;

	background-color: rgba(20, 20, 22, 0.9);
	border-radius: 8px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);

	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
}

.fsys__brand:hover .fsys__brand-tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s;
}

.fsys__brand-tip-name {
	font-weight: 600;
}

.fsys__brand-tip-country,
.fsys__brand-tip-about {
	color: rgba(255, 255, 255, 0.65);
}

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

.fsys__actions {
	margin-top: 24px;
}

/* Графитовая, а не терракотовая: терракот на такой площади
   перетягивал на себя всё внимание блока */
.fsys__cta {
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	gap: 12px;

	padding: 15px 26px;
	border: 0;
	border-radius: 8px;
	background-color: var(--fsys-graphite);

	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;

	transition: background-color 0.3s ease;
}

.fsys__cta:hover {
	background-color: #2e333a;
	color: #fff;
}

.fsys__cta-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fsys__cta:hover .fsys__cta-arrow {
	transform: translateX(4px);
}

/* Блик слева направо — один проход на наведение */
.fsys__cta::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;

	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-18deg);
	pointer-events: none;
}

.fsys__cta:hover::after {
	animation: fsys-shine 0.75s ease-out;
}

@keyframes fsys-shine {
	from { left: -60%; }
	to   { left: 130%; }
}

.fsys__cta-text,
.fsys__cta-arrow {
	position: relative;
	z-index: 1;
}

/* --- Схема фасада ------------------------------------------------ */

.fsys__right {
	position: relative;
}

/* Никакого overflow: hidden — карточки точек выходят за границы кадра.

   Схема шире своей колонки и левым краем заходит под текст: слева у
   неё пустое поле, поэтому наложение не перекрывает сами слои. */
.fsys__scheme {
	position: relative;

	margin-left: -20%;
	width: 120%;
}

/**
 * Картинку с mix-blend-mode кладём в отдельный слой.
 *
 * darken смешивает элемент с тем, что под ним, — и заодно съедал
 * тень всплывающих карточек: тёмная тень на светлом фоне при этом
 * режиме просто исчезает. isolation: isolate запирает смешивание
 * внутри обёртки, карточки в него уже не попадают.
 *
 * Обёртка нужна ещё и потому, что z-index на самой .fsys__scheme
 * создавал контекст наложения и не давал карточкам всплыть выше.
 */
.fsys__scheme-media {
	position: relative;
	isolation: isolate;
	background: #f7f8fb;
}

.fsys__scheme-img {
	display: block;
	width: 100%;
	height: auto;

	/* Белый фон картинки сливается с сероватой подложкой блока.
	   Смешивание заперто в .fsys__scheme-media — см. выше. */
	mix-blend-mode: darken;
}

/* --- Стрелки переключения слоёв ---------------------------------- */

/**
 * Стеклянные кнопки поверх схемы, видны всегда.
 *
 * Лежат в .fsys__scheme, а не в .fsys__scheme-media: внутри обёртки
 * их бы затронул mix-blend-mode картинки и стекло почернело бы.
 *
 * z-index ниже точек (2) и карточек (6) — стрелка не должна
 * перекрывать раскрытую карточку.
 */
.fsys__nav {
	position: absolute;
	top: 50%;
	z-index: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;
	padding: 0;

	background-color: rgb(213 76 23 / 53%);
	backdrop-filter: blur(6px) saturate(160%);
	-webkit-backdrop-filter: blur(6px) saturate(160%);
	border: unset;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(34, 37, 42, 0.14);

	color: #ffffff;
	cursor: pointer;
	/* border: 1px solid #ffffff7a; */

	transition:
		background-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fsys__nav:hover {
	background-color: rgba(255, 255, 255, 0.82);
	/* box-shadow: 0 10px 26px rgba(34, 37, 42, 0.2); */
	color: var(--fsys-accent);
}

.fsys__nav:active {
	transform: scale(0.94);
}

/**
 * Схема расширена на 120% и сдвинута влево (margin-left: -20%),
 * поэтому проценты внутри неё не совпадают с видимым кадром.
 * Отсчитываем стрелки так, чтобы обе попали в видимую часть:
 * левая — за вылетом схемы, правая — с отступом от края экрана.
 */
.fsys__nav--prev {
	left: 19%;
}

.fsys__nav--next {
	right: 2%;
}

.fsys__nav svg {
	transition: transform 0.25s ease;
}

/* --- Точки ------------------------------------------------------- */

.fsys__point {
	position: absolute;
	z-index: 2;

	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.fsys__point.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s;
}

/**
 * Точка с раскрытой карточкой — поверх соседних.
 *
 * :focus-within и :has(:hover) обязательны. Курсор, перейдя с точки
 * на её карточку, снимает :hover с самой точки — z-index падал, и
 * плашка СОСЕДНЕЙ точки вылезала поверх открытой карточки.
 */
.fsys__point:hover,
.fsys__point:focus-within,
.fsys__point:has(:hover),
.fsys__point.is-open {
	z-index: 6;
}

/* Соседние плашки НЕ гасим: они несут пользу слоя и должны
   оставаться на виду. Наложение решается порядком слоёв выше —
   точка с раскрытой карточкой поднимается над соседями. */

.fsys__point-dot {
	position: absolute;
	inset: 0;

	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	cursor: pointer;
}

/* Пульсация отдельным кольцом, чтобы сама точка не «дышала» */
.fsys__point-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	animation: fsys-pulse 2.2s ease-out infinite;
}

@keyframes fsys-pulse {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}
	70%, 100% {
		opacity: 0;
		transform: scale(2.8);
	}
}

/* --- Короткая плашка (первый уровень) ---------------------------- */

/**
 * Видна сразу после смены слоя и влетает с задержкой по порядку точки
 * (--fsys-point-order). Объясняет пользу слоя одной фразой.
 */
.fsys__badge {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;

	display: flex;
	flex-direction: column;
	margin-left: 10px;
	padding: 8px 13px;

	background-color: rgba(20, 20, 22, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 8px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);

	color: #fff;
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;

	opacity: 0;
	transform: translate(-8px, 6px);
	transition:
		opacity 0.32s ease,
		transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

.fsys__point--flip .fsys__badge {
	left: auto;
	right: 50%;
	margin-left: 0;
	margin-right: 10px;
	transform: translate(8px, 6px);
}

/* Влетают по очереди после появления слоя */
.fsys__point.is-active .fsys__badge {
	opacity: 1;
	transform: translate(0, 0);
	transition-delay: calc(0.25s + var(--fsys-point-order, 0) * 0.18s);
}

.fsys__badge-lead {
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
}

.fsys__badge-main {
	font-weight: 600;
}

/* Плашка НЕ пропадает при раскрытии карточки: карточка выезжает вниз
   от точки, плашка остаётся сверху — они не перекрываются. */

/* --- Карточка материала (второй уровень) ------------------------- */

/**
 * Переменные дублируем на самой карточке.
 *
 * На мобильных JS переносит её в конец <body> (иначе шторка ложится
 * под собственное затемнение), и там она уже не наследует значения,
 * объявленные на .fsys: иконки и ссылка становились серыми, а линии
 * крестика — вовсе невидимыми.
 */
.fsys__card {
	--fsys-accent: #C05A3A;
	--fsys-graphite: #22252A;
	--fsys-muted: #6b7076;

	position: absolute;
	top: calc(100% - 16px);
	left: 50%;
	z-index: 1;

	width: 300px;
	margin-left: 30px;
	padding: 18px;

	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity 0.28s ease,
		transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s linear 0.28s;
}

.fsys__point--flip .fsys__card {
	left: auto;
	right: 50%;
	margin-left: 0;
	margin-right: 30px;
}

.fsys__point:hover .fsys__card,
.fsys__point:focus-within .fsys__card {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.28s ease, transform 0.3s ease, visibility 0s;
}

/* Мостик от точки к карточке: без него курсор проваливается в зазор.
   Карточка теперь ПОД точкой, поэтому мостик сверху. */
.fsys__card::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 16px;
}

.fsys__card-title {
	margin-bottom: 4px;
	color: var(--fsys-graphite);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.fsys__card-lead {
	margin: 0 0 12px;
	color: var(--fsys-muted);
	font-size: 14px;
	line-height: 1.45;
}

/* list-style-type — от темы, у неё свой маркер-тире на li:
   без сброса рядом с галочкой рисуются два маркера подряд */
.fsys__card-pros {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.fsys__card-pros li::before,
.fsys__card-pros li::marker,
.fsys__risks-list li::before,
.fsys__risks-list li::marker {
	content: none;
}

.fsys__card-pro {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-bottom: 5px;

	color: var(--fsys-graphite);
	font-size: 14px;
	line-height: 1.45;
}

.fsys__card-pro:last-child {
	margin-bottom: 0;
}

.fsys__card-pro-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 2px;
	color: var(--fsys-accent);
}

.fsys__card-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	color: var(--fsys-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.fsys__card-link:hover {
	color: var(--fsys-accent);
	text-decoration: none;
}

.fsys__card-link svg {
	transition: transform 0.25s ease;
}

.fsys__card-link:hover svg {
	transform: translateX(3px);
}

/* Крестик нужен только шторке на мобильных */
.fsys__card-close {
	display: none;
	position: absolute;
	top: 12px;
	right: 12px;

	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.06);
	cursor: pointer;
}

.fsys__card-close::before,
.fsys__card-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background-color: var(--fsys-graphite);
	border-radius: 2px;
}

.fsys__card-close::before {
	transform: rotate(45deg);
}

.fsys__card-close::after {
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------------
   Планшет
   ------------------------------------------------------------------ */

@media (max-width: 1199px) {

	.fsys__body {
		gap: 32px;
	}

	.fsys__title {
		font-size: 31px;
	}

	.fsys__panels {
		min-height: 480px;
	}

	.fsys__card {
		width: 260px;
	}
}

/* ==================================================================
   МОБИЛЬНЫЕ (<768px)

   Схема уходит наверх, табы едут лентой, карточка точки превращается
   в шторку снизу — как в блоке баннеров MIDDLE_ADV.
   ================================================================== */

@media (max-width: 767px) {

	.fsys__head {
		margin-bottom: 24px;
	}

	.fsys__title {
		font-size: 25px;
	}

	.fsys__subtitle {
		font-size: 15px;
	}

	.fsys__body {
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	/* Схема — первой: сначала показываем, о чём речь */
	.fsys__right {
		order: -1;
	}

	/* Заезжать некуда — колонка одна */
	.fsys__scheme {
		margin-left: 0;
		width: 100%;
	}

	/* Схема во всю ширину — стрелки прижимаем к её краям */
	.fsys__nav {
		width: 40px;
		height: 40px;
		margin-top: -20px;
	}

	.fsys__nav--prev {
		left: 8px;
	}

	.fsys__nav--next {
		right: 8px;
	}

	.fsys__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 8px;

		margin-bottom: 20px;

		scrollbar-width: none;
		-ms-overflow-style: none;

		margin-inline: calc(var(--theme-page-width-padding, 16px) * -1);
		padding-inline: var(--theme-page-width-padding, 16px);
	}

	.fsys__tabs::-webkit-scrollbar {
		display: none;
	}

	.fsys__tabs::after {
		display: none;
	}

	.fsys__tab {
		flex: 0 0 auto;
		height: 38px;
		font-size: 14px;
	}

	.fsys__tab-num {
		width: 36px;
	}

	.fsys__tab.is-active .fsys__tab-name > span {
		padding-right: 15px;
	}

	.fsys__panels {
		min-height: 0;
	}

	.fsys__layer-title {
		font-size: 20px;
	}

	.fsys__cta {
		width: 100%;
		justify-content: space-between;
	}

	/**
	 * Плашка переезжает ВНУТРЬ шторки.
	 *
	 * Поверх маленькой картинки она нечитаема и загораживает слои,
	 * поэтому показываем её первой строкой карточки: сначала польза
	 * слоя, следом материал, который её обеспечивает. JS переносит
	 * плашку в шторку вместе с карточкой.
	 */
	.fsys__badge {
		position: static;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 6px;

		margin: 0 0 14px;
		padding: 0 0 14px;

		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-radius: 0;
		border-bottom: 1px solid var(--fsys-line, rgba(34, 37, 42, 0.09));
		box-shadow: none;

		color: var(--fsys-graphite, #22252A);
		font-size: 17px;
		line-height: 1.3;
		white-space: normal;

		opacity: 1;
		transform: none;
		transition: none;
	}

	/* внутри схемы плашки не нужны — их место в шторке */
	.fsys__scheme .fsys__badge {
		display: none;
	}

	.fsys__badge-lead {
		color: var(--fsys-muted, #6b7076);
		font-size: 17px;
	}

	.fsys__badge-main {
		font-weight: 600;
	}

	/* Карточка — шторка снизу. JS переносит её в конец <body>, поэтому
	   селектор не завязан на положение внутри схемы.

	   top: auto обязателен. На десктопе карточка привязана сверху
	   (top: calc(100% + 14px)); если здесь оставить обе привязки —
	   и top, и bottom, — браузер вычислит высоту из них, и шторка
	   схлопнется до высоты паддингов, уехав за нижний край экрана. */
	.fsys__card {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1002;

		width: auto;
		height: auto;
		max-height: 85vh;
		overflow-y: auto;

		margin: 0;
		padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 0px));

		border-radius: 16px 16px 0 0;
		box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28);

		transform: translateY(101%);
		opacity: 1;
		transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.34s;
	}

	.fsys__point--flip .fsys__card {
		right: 0;
		margin-right: 0;
	}

	/* На тач-устройствах :hover срабатывает от тапа и залипает —
	   показываем шторку только по классу, который ставит JS */
	.fsys__point:hover .fsys__card,
	.fsys__point:focus-within .fsys__card {
		opacity: 1;
		visibility: hidden;
		transform: translateY(101%);
	}

	.fsys__card.is-open,
	.fsys__point.is-open .fsys__card {
		visibility: visible;
		transform: translateY(0);
		transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
	}

	.fsys__card::after {
		display: none;
	}

	.fsys__card-close {
		display: block;
	}

	.fsys__card-title {
		padding-right: 40px;
	}

	/* Ссылку превращаем в кнопку: пальцем целиться в строку текста
	   неудобно, нужна явная площадь нажатия */
	.fsys__card-link {
		justify-content: center;

		width: 100%;
		margin-top: 4px;
		padding: 13px 18px;

		border: 1px solid var(--fsys-accent, #C05A3A);
		border-radius: 8px;
	}

	/* Затемнение под шторкой; создаёт JS */
	.fsys-overlay {
		position: fixed;
		inset: 0;
		z-index: 1001;

		background-color: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.fsys-overlay.is-visible {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0s;
	}
}

/* Системная настройка «меньше движения» */
@media (prefers-reduced-motion: reduce) {

	.fsys__tab,
	.fsys__tab-name,
	.fsys__tab-name > span,
	.fsys__panel,
	.fsys__point,
	.fsys__badge,
	.fsys__card,
	.fsys__brand-tip,
	.fsys__cta,
	.fsys__cta-arrow {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.fsys__point-dot::after,
	.fsys__cta:hover::after {
		animation: none;
	}
}

/* ==================================================================
   БЛОК «МЫ СОПРОВОЖДАЕМ ПРОЕКТ» (внутри блока тизеров на главной)

   Разметка — include/mainpage/components/tizers/type_1.php,
   поведение — js/custom.js.

   Слева таймлайн из шести этапов, справа одно атмосферное фото.
   Стеклянные карточки этапов: полупрозрачный фон + blur. Линия слева
   заполняется по мере прокрутки — её высоту задаёт JS переменной
   --dhw-progress.
   ================================================================== */

.dhw {
	--dhw-accent: #C05A3A;
	--dhw-graphite: #22252A;
	--dhw-muted: #6b7076;

	/* Заполненная часть линии таймлайна: 0 → 1, ставит JS */
	--dhw-progress: 0;

	padding-block: 56px 8px;
}

/* --- Шапка блока ------------------------------------------------- */

.dhw__head {
	max-width: 1020px;
	margin-bottom: 44px;

	/* Заголовок выезжает сверху при появлении блока */
	opacity: 0;
	transform: translateY(-18px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dhw.is-visible .dhw__head {
	opacity: 1;
	transform: none;
}

.dhw__title {
	margin: 0 0 12px;

	color: var(--dhw-graphite);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.dhw__subtitle {
	margin: 0;

	color: var(--dhw-muted);
	font-size: 16px;
	line-height: 1.5;
}

.dhw__subtitle b {
	color: var(--dhw-graphite);
	font-weight: 600;
}

/* --- Раскладка --------------------------------------------------- */

.dhw__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: 56px;
	align-items: start;
}

/* --- Таймлайн этапов --------------------------------------------- */

.dhw__steps {
	position: relative;

	margin: 0;
	padding: 0;
	list-style: none;
}

/* Линия проходит по центру иконок: подложка и заполненная часть */
.dhw__steps::before,
.dhw__steps::after {
	content: "";
	position: absolute;
	top: 32px;
	bottom: 112px;
	left: 35px;

	width: 2px;
	border-radius: 2px;
}

.dhw__steps::before {
	background-color: rgba(34, 37, 42, 0.09);
}

/* Заполнение тянется сверху вниз вслед за прокруткой.
   Через scaleY, а не height: трансформация не заставляет браузер
   пересчитывать раскладку на каждом кадре скролла */
.dhw__steps::after {
	background-image: linear-gradient(to bottom, var(--dhw-accent), rgba(192, 90, 58, 0.35));

	transform: scaleY(var(--dhw-progress));
	transform-origin: top center;
	transition: transform 0.25s linear;
}

.dhw__step {
	position: relative;

	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 20px;
	align-items: start;

	/* Этапы появляются по очереди: задержка растёт с порядковым номером */
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease,
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--dhw-step-order, 0) * 130ms);
}

.dhw__step:not(:last-child) {
	margin-bottom: 12px;
}

.dhw.is-visible .dhw__step {
	opacity: 1;
	transform: none;
}

/* --- Стеклянная иконка ------------------------------------------- */

.dhw__step-icon {
	position: relative;
	z-index: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 64px;
	height: 64px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;

	background-color: rgb(255, 255, 255);
	box-shadow: 0 10px 30px rgba(34, 37, 42, 0.1);

	color: #22252A;

	transition:
		transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}

/* --- Текстовая часть --------------------------------------------- */

.dhw__step-body {
	padding: 18px 24px 20px;
	/* border: 1px solid rgba(255, 255, 255, 0.45); */
	border-radius: 24px;

	/* background-color: rgba(255, 255, 255, 0.5); */
	/* box-shadow: 0 14px 40px rgba(34, 37, 42, 0.05); */

	transition:
		transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}

/* Приподнимаем карточку вместе с иконкой: этап читается как одна
   сущность, а не как кружок отдельно и текст отдельно */
.dhw__step:hover .dhw__step-body,
.dhw__step:hover .dhw__step-icon {
	transform: translateY(-4px);
}

.dhw__step:hover .dhw__step-body {
	box-shadow: 0 22px 54px rgba(34, 37, 42, 0.09);
}

.dhw__step:hover .dhw__step-icon {
	box-shadow: 0 16px 36px rgba(192, 90, 58, 0.16);
}

.dhw__step-num {
	display: block;
	margin-bottom: 6px;

	color: var(--dhw-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	display: none;
}

.dhw__step-title {
	margin: 0 0 8px;

	color: var(--dhw-graphite);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
}

.dhw__step-text {
	margin: 0;

	color: var(--dhw-muted);
	font-size: 15px;
	line-height: 1.55;
}

/* --- Маркер уверенности ------------------------------------------ */

.dhw__step-mark {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	/* margin-top: 14px; */
	/* padding: 6px 12px 6px 9px; */
	/* border: 1px solid rgba(192, 90, 58, 0.18); */
	border-radius: 999px;

	/* background-color: rgba(192, 90, 58, 0.06); */

	color: var(--dhw-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.dhw__step-mark-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

/* --- Изображение ------------------------------------------------- */

/* Липнет к экрану: колонка этапов длинная, без этого фото уезжало бы
   вверх и правая половина блока пустовала */
.dhw__media {
	position: sticky;
	top: 110px;
}

/* z-index обязателен: без него рамка (position: relative, z-index: auto)
   не перекрывает тёплое пятно и оно ложится поверх фотографии */
.dhw__media-frame {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 28px;
	background-color: #f7f8fb;
	aspect-ratio: 1;
}

/* Ken Burns: очень медленный наезд после появления блока */
.dhw__media-image {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;

	transform: scale(1.06);
	transition: transform 6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dhw.is-visible .dhw__media-image {
	transform: scale(1);
}

/* --- Видео вместо статичного кадра -------------------------------

   Разметка и поведение — от темы (.video-block): она же даёт круглую
   кнопку play и открывает ролик в модалке по клику.

   В рамке видна только заглушка — .dhw__media-poster. Сам плеер лежит
   внутри служебного .video-block__fancy, который тема держит прозрачным
   (opacity: 0) и разворачивает в fancybox уже при запуске. Поэтому
   прятать плеер отдельными правилами не нужно: на странице его и так
   не видно.

   Ken Burns на заглушке сохраняется — у неё тот же класс
   .dhw__media-image, что и у обычной картинки блока. */

.dhw__media-video {
	position: relative;

	width: 100%;
	height: 100%;
}

/* Заглушка остаётся В ПОТОКЕ и растягивается на всю рамку.

   Абсолютное позиционирование тут не годится: у .video-block все прочие
   дети (кнопка play и служебный .video-block__fancy) абсолютные, и если
   вынуть из потока ещё и картинку, рамке нечем задать высоту — вся
   цепочка .dhw__media → .dhw__media-frame схлопывается в ноль.
   На десктопе это незаметно (высоту диктует aspect-ratio от ширины),
   а на планшете и мобильных блок исчезал совсем. */
.dhw__media-poster {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}



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

.dhw__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin: 28px 0 130px;
}

/* Графитовая, в тон кнопке блока «Инженерная экспертиза» */
.dhw__cta {
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	gap: 12px;

	padding: 17px 30px;
	border: 0;
	border-radius: 8px;
	background-color: var(--dhw-graphite);

	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;

	transition: background-color 0.3s ease;
}

.dhw__cta:hover {
	background-color: #2e333a;
	color: #fff;
}

.dhw__cta-arrow {
	display: inline-flex;
	flex: 0 0 auto;

	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dhw__cta:hover .dhw__cta-arrow {
	transform: translateX(4px);
}

/* Блик слева направо — один проход на наведение */
.dhw__cta::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;

	width: 45%;

	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-18deg);
	pointer-events: none;
}

.dhw__cta:hover::after {
	animation: dhw-shine 0.75s ease-out;
}

@keyframes dhw-shine {
	from { left: -60%; }
	to   { left: 130%; }
}

.dhw__cta-text,
.dhw__cta-arrow {
	position: relative;
	z-index: 1;
}

.dhw__actions-note {
	max-width: 340px;
	margin: 0;

	color: var(--dhw-muted);
	font-size: 14px;
	line-height: 1.45;
}

/* --- Планшет ------------------------------------------------------ */

@media (max-width: 1199px) {

	.dhw__body {
		gap: 36px;
	}

	.dhw__title {
		font-size: 32px;
	}

	.dhw__step-body {
		padding: 16px 20px 18px;
	}
}

/* Фото уходит наверх: в узкой колонке оно вставало слишком мелким,
   чтобы работать атмосферой */
@media (max-width: 991px) {

	.dhw {
		padding-block: 40px 8px;
	}

	.dhw__body {
		display: flex;
		flex-direction: column-reverse;
		gap: 32px;
	}

	.dhw__media {
		position: static;
	}

	.dhw__media-frame {
		aspect-ratio: 16 / 10;
	}

	.dhw__head {
		margin-bottom: 28px;
	}
}

/* --- Мобильные ----------------------------------------------------- */

@media (max-width: 767px) {

	.dhw__title {
		font-size: 26px;
	}

	.dhw__subtitle {
		font-size: 15px;
	}

	.dhw__step {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 14px;
	}

	.dhw__steps::before,
	.dhw__steps::after {
		top: 24px;
		bottom: 24px;
		left: 23px;
	}

	.dhw__step-icon {
		width: 48px;
		height: 48px;
	}

	.dhw__step-icon svg {
		width: 20px;
		height: 20px;
	}

	.dhw__step-body {
		padding: 14px 16px 16px;
		border-radius: 18px;
	}

	.dhw__step-title {
		font-size: 17px;
	}

	.dhw__step-text {
		font-size: 14px;
	}

	.dhw__media::after {
		right: -20px;
		bottom: -20px;

		width: 120px;
		height: 120px;
	}

	.dhw__actions {
		gap: 16px;
		margin-top: 32px;
	}

	.dhw__cta {
		width: 100%;
		justify-content: center;
	}

	.dhw__actions-note {
		max-width: none;
	}
}

/* Системная настройка «меньше движения» */
@media (prefers-reduced-motion: reduce) {

	.dhw__head,
	.dhw__step,
	.dhw__step-icon,
	.dhw__step-body,
	.dhw__media-image,
	.dhw__cta,
	.dhw__cta-arrow {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.dhw__steps::after {
		transition: none;
	}

	.dhw__cta:hover::after {
		animation: none;
	}
}

.tizers-list__item-image-picture{
	width: 100%;
	height: 192px;
	mix-blend-mode: darken;
	background-size: contain;
	background-repeat: no-repeat;
}

.tizers-list__item-image-wrapper--ICONS{
	max-width: 100%;
}

.tizers-list__item-name{
	font-weight: 700;
	font-size: 21px;
}

.tizers-list__item-descr{
	margin-top: 20px;
}
/* ==================================================================
   МОЗАИЧНАЯ ФОТОГАЛЕРЕЯ НА ДЕТАЛЬНЫХ СТРАНИЦАХ

   Блок «Фотогалерея» (.gallery-small) в режиме плитки: сетка из
   4 колонок, где каждая 1-я, 9-я, 17-я… плитка занимает квадрат 2×2.
   Ритм крупных и мелких кадров держит взгляд и не даёт странице
   превратиться в однообразную таблицу.

   Раскладку взяли с mercury.realestate, но правила переписаны:
   там крупные плитки прибиты к позициям 1, 8 и 11 под конкретную
   галерею из 48 фото. У нас в проектах фотографий 4–10, и жёсткие
   номера оставляли дыру в сетке.

   Поэтому здесь:
     — шаг 8n+1 вместо фиксированных номеров: мозаика повторяется
       и работает на любом количестве;
     — grid-auto-flow: dense — мелкие кадры затягивает в пустоты,
       которые остаются рядом с крупной плиткой;
     — если после крупной плитки осталось меньше 4 фото, она
       становится обычной: закрыть ряд всё равно нечем, и вместо
       мозаики получилась бы дыра.

   Штатный режим слайдера (.gallery-big) не трогаем — он свой.
   ================================================================== */

/* Заголовок «Фотогалерея» убран: галерея идёт первым блоком детальной
   страницы и в подписи не нуждается — фотографии говорят сами за себя.

   ⚠️Скрываем только внутри .big_gallery: класс .ordered-block__title
   общий для всех блоков детальной («Сотрудники», «Услуги» и прочие),
   и правило без этой привязки убрало бы заголовки и у них. */
.detail-block.big_gallery > .ordered-block__title {
	display: none;
}

.gallery-small .grid-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;

	/* Затягивает мелкие кадры в пустоты рядом с крупной плиткой:
	   без dense справа от неё остаётся незаполненный угол */
	grid-auto-flow: row dense;
}

.gallery-item-wrapper {
	position: relative;
}

.gallery-item-wrapper img {
	width: 100%;
}

/* Крупная плитка: квадрат 2×2 в начале каждого блока из восьми */
.gallery-small .gallery-item-wrapper:nth-child(8n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

/* Пропорция под квадрат 2×2 — иначе кадр не заполнит ячейку по высоте */
.gallery-small .gallery-item-wrapper:nth-child(8n + 1) .item {
	padding-top: 68%;
}

/* Хвост галереи: крупной плитке нужны минимум 4 кадра следом, иначе
   ряд не закрывается. Проверено на 4–48 фото: дыр внутри сетки нет */
.gallery-small .gallery-item-wrapper:nth-child(8n + 1):nth-last-child(-n + 4) {
	grid-column: auto;
	grid-row: auto;
}

.gallery-small .gallery-item-wrapper:nth-child(8n + 1):nth-last-child(-n + 4) .item {
	padding-top: 67%;
}

/* --- Планшет ------------------------------------------------------ */

@media (max-width: 991px) {

	.gallery-small .grid-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
}

/* Мозаика уместна, пока в ряду хотя бы 3 колонки: на двух крупная
   плитка занимает всю ширину и ритм пропадает */
@media (max-width: 767px) {

	.gallery-small .grid-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-small .gallery-item-wrapper:nth-child(8n + 1) {
		grid-column: auto;
		grid-row: auto;
	}

	.gallery-small .gallery-item-wrapper:nth-child(8n + 1) .item {
		padding-top: 67%;
	}
}

@media (max-width: 450px) {

	#main .gallery-small .grid-list:not(.mobile-scrolled) {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================
   Блок «О компании» на главной (COMPANY_TEXT)
   ------------------------------------------------------------------
   Плитки внутри текста, снятая обрезка текста и лента фотографий
   офиса с общим лайтбоксом. Разметку собирают:
     components/bitrix/news.detail/front_company/template.php (плитки)
     components/bitrix/news.detail/front_company/gallery.php  (фото)
   ================================================================== */

/* --- Заголовок ---------------------------------------------------- */

/* В поле «Название» лежит вёрстка: <br> и <span> с акцентом.
   Переносу нужна нормальная высота строки — у темы она рассчитана
   на однострочный заголовок */
.company-item .company-item__title .index-block__title {
	line-height: 125%;
}

/* Заголовок вынесен из левой колонки и идёт во всю ширину блока
   (см. types/type_2.php) — отступ до колонок задаём здесь */
.company-item .dhc-title-wrapper {
	margin-bottom: 32px;
}

@media (max-width: 767px) {

	.company-item .dhc-title-wrapper {
		margin-bottom: 24px;
	}
}

/* --- Текст -------------------------------------------------------- */

/* lineclamp-10 снят в type_2.php — здесь только ритм абзацев */
.company-item__text .dhc-text p {
	margin: 0 0 16px;
}

.company-item__text .dhc-text p:last-child {
	margin-bottom: 0;
}

.company-item__text .dhc-text blockquote {
	margin: 0 0 24px;
	padding: 0 0 0 20px;

	border-left: 3px solid var(--theme-base-color, #b85c38);

	font-size: 17px;
	line-height: 150%;
	font-style: normal;
}

/* --- Плитки внутри текста ----------------------------------------- */

.dhc-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;

	margin: 24px 0;
}

/* Ряд показателей: короткие плитки без описания встают плотнее */
.dhc-tiles--stats {
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

/* Графит — тот же цвет, что у блока фасадной системы (--fsys-graphite),
   поэтому текст внутри плитки светлый */
.dhc-tile {
	padding: 18px 20px;
	background-color: #f1eeeb;
	border-radius: 8px;
	transition: background-color 0.25s ease;
}

.dhc-tile__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 130%;
	color: #fff;
}

.dhc-tile__text {
	margin-top: 8px;

	font-size: 14px;
	line-height: 145%;

	/* Приглушённый белый: описание не должно спорить с заголовком */
	color: rgb(255 255 255 / 65%);
}

/* У показателя цифра — главное, поэтому она крупнее */
.dhc-tiles--stats .dhc-tile__title {
	font-size: 17px;
	font-weight: 600;
	color: #22252A;
}

/* --- Лента фотографий офиса --------------------------------------- */

.dhc-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.dhc-gallery{
	margin-top: 100px;
}

.dhc-card {
	position: relative;

	display: flex;
	flex-direction: column;

	/* Кнопка: сбрасываем всё, что навешивает браузер и тема */
	margin: 0;
	padding: 0;

	background: none;
	border: 0;
	border-radius: 12px;

	overflow: hidden;
	text-align: left;
	cursor: pointer;

	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dhc-card__media {
	position: relative;
	display: block;

	/* Фон под ленивым фото: пока кадр грузится, ячейка не «мигает» белым */
	background-color: #e6e3df;
	border-radius: 12px;

	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.dhc-card__img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 0.5s ease;
}

.dhc-card:hover .dhc-card__img {
	transform: scale(1.05);
}

.dhc-card__body {
	display: block;
	padding: 14px 2px 0;
}

.dhc-card__title {
	display: block;

	font-size: 16px;
	font-weight: 600;
	line-height: 130%;

	color: #1c1c1c;
}

.dhc-card__text {
	display: block;
	margin-top: 6px;

	font-size: 13px;
	line-height: 140%;

	color: #6b6560;
}

/* Счётчик кадров: сразу видно, что за карточкой не один снимок */
.dhc-card__count {
	position: absolute;
	top: 12px;
	right: 12px;
	min-width: 26px;
	padding: 4px 8px;
	background-color: rgb(0 0 0 / 55%);
	backdrop-filter: blur(6px);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: #fff;
}

/* --- Лайтбокс ------------------------------------------------------ */

.dhc-lightbox {
	position: fixed;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	/* Почти непрозрачный фон: сквозь 92% просвечивала шапка сайта
	   и отвлекала от снимка */
	background-color: rgb(0 0 0 / 97%);

	/* Выше фиксированной шапки темы (у неё 1000) и модалок Aspro */
	z-index: 100000;

	opacity: 0;
	visibility: hidden;

	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dhc-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.dhc-lightbox__stage {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	padding: 72px 96px;
}

.dhc-lightbox__media {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;

	overflow: hidden;
}

.dhc-lightbox__img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

	/* Смена прозрачности у изображения с новым src оставляла в Safari
	   старые растровые слои поверх текущего кадра */
	opacity: 1;
}

.dhc-lightbox__img.is-loading {
	opacity: 0;
	visibility: hidden;
}

.dhc-lightbox__nav,
.dhc-lightbox__close {
	position: absolute;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	padding: 0;

	background-color: rgb(255 255 255 / 10%);
	border: 0;
	border-radius: 50%;

	color: #fff;
	cursor: pointer;

	transition: background-color 0.25s ease;
}

.dhc-lightbox__nav:hover,
.dhc-lightbox__close:hover {
	background-color: var(--theme-base-color, #b85c38);
}

.dhc-lightbox__nav--prev {
	left: 24px;
}

.dhc-lightbox__nav--next {
	right: 24px;
}

.dhc-lightbox__close {
	top: 24px;
	right: 24px;
}

/* Подпись и счётчик: тематика текущего кадра и позиция в общей ленте */
.dhc-lightbox__caption {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);

	display: flex;
	align-items: center;
	gap: 12px;

	padding: 10px 18px;

	background-color: rgb(0 0 0 / 50%);
	backdrop-filter: blur(8px);
	border-radius: 24px;

	font-size: 14px;
	line-height: 1;

	color: #fff;

	white-space: nowrap;
}

.dhc-lightbox__counter {
	opacity: 0.65;
}

/* --- Планшет ------------------------------------------------------- */

@media (max-width: 991px) {

	.dhc-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.dhc-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.dhc-lightbox__stage {
		padding: 72px 16px;
	}

	/* Стрелки уводим вниз: по краям экрана они перекрывают сам кадр */
	.dhc-lightbox__nav {
		top: auto;
		bottom: 24px;
	}

	.dhc-lightbox__nav--prev {
		left: 24px;
	}

	.dhc-lightbox__nav--next {
		right: 24px;
	}

	/* Подпись поднимаем над рядом стрелок */
	.dhc-lightbox__caption {
		bottom: 90px;
	}
}

/* --- Мобильные ----------------------------------------------------- */

@media (max-width: 767px) {

	.dhc-tiles,
	.dhc-tiles--stats {
		grid-template-columns: 1fr;
	}

	.dhc-card__media {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 480px) {

	.dhc-gallery__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Системная настройка «уменьшить движение»: подъём и зум отключаем,
   оставляем только смену фона */
@media (prefers-reduced-motion: reduce) {

	.dhc-card,
	.dhc-card__img {
		transition: none;
	}

	.dhc-card:hover {
		transform: none;
	}

	.dhc-card:hover .dhc-card__img {
		transform: none;
	}
}

.COMPANY_TEXT .line-block{
	align-items: flex-start;
}

.theme-default, .theme-root, .theme-light, .theme-dark{
	--darkerblack_bg_black: var(--light, #F8F8F8) var(--dark, rgba(255, 255, 255, 0.08));
	--white_text_black: var(--light, #22252A) var(--dark, white);
}

.bg-glass{
	background-color: var(--light, #F8F8F8) var(--dark, rgba(0, 0, 0, 0.2));
}

.BRANDS .index-block--fon{
	background: #e4dbd1;
}

.BRANDS .brands-list__item,
.BRANDS .brands-mosaic__item{
	background: #efeae3;
	box-shadow: inset 0 0 0 1px #ffffff5e;
	border-radius: 6px;
	padding: 12px 16px;
}

.BRANDS .brands-list__image,
.BRANDS .brands-mosaic__image{
	mix-blend-mode: darken;
	opacity: 0.72;
	filter: grayscale(100%);
	transition: all .3s ease;
}

.BRANDS .brands-list__item:hover .brands-list__image,
.BRANDS .brands-mosaic__item:hover .brands-mosaic__image{
	opacity: 1;
	filter: unset;
	/* без darken белый фон PNG высветлял бы плитку под логотипом */
	mix-blend-mode: multiply;
}

.brands-mosaic__item:hover, .brands-mosaic__item:focus-visible{
	background: #fff !important;
}

.brands-mosaic__item{
	transition: all 0.3s ease;
}

.BRANDS .brands-list__items-wrapper {
	--items-count: 7;
}

.BRANDS .brands-list__image-wrapper{
	margin: 28px 0;
}


/* ====================================================================
   Блок SERVICES: переключатель услуг по типу клиента.
   Используется на главной и на /services/
   Разметка: local/templates/rosveb/components/bitrix/news.list/
             services-list-bg/template.php
   ==================================================================== */

.dh-services-tabs__nav {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 82px;
	/* background: #ffffff;
	width: unset;
	border-radius: 100px;
	padding: 4px 4px;
	border: 1px solid #d8d8d8;
	margin-top: 16px; */
}

.SERVICES .index-block__headings{
	margin-bottom: 0;
}

.dh-services-tabs__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	/* border: 1px solid rgba(0, 0, 0, 0.12); */
	border: none;
	border-radius: 8px;
	background-color: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
	border-color: #ebebeb;
	background-color: #ebebeb;
}

.dh-services-tabs__btn:hover {
	border-color: var(--theme-base-color, #b85c38);
	color: var(--theme-base-color, #b85c38);
}

.dh-services-tabs__btn.active {
	border-color: var(--theme-base-color, #b85c38);
	background-color: var(--theme-base-color, #b85c38);
	color: #fff;
	cursor: default;
}

.dh-services-tabs__btn:focus-visible {
	outline: 2px solid var(--theme-base-color, #b85c38);
	outline-offset: 2px;
}

/* Иконка наследует цвет текста кнопки: на активной вкладке белая,
   на ховере — фирменная. Размер задаётся только здесь */
.dh-services-tabs__icon {
	display: inline-flex;
	flex-shrink: 0;
}

.dh-services-tabs__icon svg {
	display: block;
	width: 20px;
	height: 20px;
	color: inherit;
}

/* Панель показывается только активная. Атрибут hidden снимает JS,
   поэтому дублируем правило классом — без него hidden проиграет
   специфичности display от grid-list */
.dh-services-tabs__panel[hidden] {
	display: none;
}

.dh-services-tabs__panel {
	display: none;
}

.dh-services-tabs__panel.active {
	display: block;
	animation: dh-services-fade 0.25s ease;
}

@keyframes dh-services-fade {

	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Карточки идут в широкой раскладке: у блока включён WIDE, из-за него
   обёртка приходит без класса — отступ по краям задаём сами */
.dh-services-tabs__panel {
	padding-left: var(--theme-page-width-padding, 32px);
	padding-right: var(--theme-page-width-padding, 32px);
}

/* Внутри контейнера темы отступ уже есть — не удваиваем */
.maxwidth-theme .dh-services-tabs__panel {
	padding-left: 0;
	padding-right: 0;
}

/* --- Мобильные: лента вкладок горизонтальным свайпом --------------- */

@media (max-width: 767px) {

	.dh-services-tabs__nav {
		display: flex;
		width: 100%;
		max-width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-bottom: 24px;
		padding-bottom: 4px;
		box-sizing: border-box;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dh-services-tabs__nav::-webkit-scrollbar {
		display: none;
	}

	.dh-services-tabs__btn {
		padding: 10px 18px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.dh-services-tabs__panel.active {
		animation: none;
	}

	.dh-services-tabs__btn {
		transition: none;
	}
}

.brands-mosaic__specs,
.brands-mosaic__item{
	height: auto;
}


/* ====================================================================
   Стрелки листания у каруселей в карточке товара
   («Другие цвета», «Добавить к заказу», «Подборки товаров»,
   «Вам может понравиться»).

   Тема прячет навигацию во всех блоках карточки правилом
   ".detail-block .slider-nav:not(.slider-complects){display:none}" —
   оно писалось под плиточный вывод. Возвращаем стрелки своему классу.
   Разметка: components/bitrix/catalog.section/catalog_block/template.php
   ==================================================================== */

/* стрелки позиционируются абсолютно — родителю нужен свой контекст,
   иначе правая кнопка уезжает за пределы блока */
.detail-block .catalog-block {
	position: relative;
}

.detail-block .slider-nav.slider-catalog-block {
	display: flex;

	position: absolute;
	top: 50%;
	margin-top: -22px;
	z-index: 2;
}

.detail-block .slider-nav.slider-catalog-block.swiper-button-prev {
	left: -22px;
	right: auto;
}

.detail-block .slider-nav.slider-catalog-block.swiper-button-next {
	right: -22px;
	left: auto;
}

/* карусель уже кончилась — стрелку гасим, но место сохраняем */
.detail-block .slider-nav.slider-catalog-block.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* до 1400px блок вплотную к краям экрана — прячем стрелки внутрь */
@media (max-width: 1400px) {

	.detail-block .slider-nav.slider-catalog-block.swiper-button-prev {
		left: 4px;
	}

	.detail-block .slider-nav.slider-catalog-block.swiper-button-next {
		right: 4px;
	}
}

/* на мобильных карусель листается свайпом — стрелки только мешают */
@media (max-width: 600px) {

	.detail-block .slider-nav.slider-catalog-block {
		display: none;
	}
}

/* ==========================================================================
   Секция «Отзывы + фотогалерея» (главная и /company/reviews/)
   Каркас портирован со стилистики отзывов Альт Сургута
   ========================================================================== */

.reviews.dhr-section {
	margin: 0 0 0;
}

/* Стрелки листалки от старого слайдера отзывов — блок больше не слайдер.
   Живут внутри обёртки .reviews-list.type_5 рядом с .dhr-reviews. */
.reviews-list.type_5 .slider-nav,
.reviews-list.type_5 .swiper-button-prev,
.reviews-list.type_5 .swiper-button-next,
.reviews.dhr-section .slider-nav,
.reviews.dhr-section .swiper-button-prev,
.reviews.dhr-section .swiper-button-next,
.index-block:has(> .reviews.dhr-section) > .slider-nav,
.index-block:has(> .reviews.dhr-section) > .swiper-button-prev,
.index-block:has(> .reviews.dhr-section) > .swiper-button-next {
	display: none !important;
}

.reviews__wrapper {
	width: 100%;
}

.reviews__container {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

/* --- Левая колонка: белая карточка с отзывами --- */

.reviews__left {
	flex: 1 1 calc(100% - 482px);
	min-width: 0;
	padding: 30px 40px;
	border-radius: 10px;
	box-shadow: 0 0 50px 0 #e8e8ee;
	background: #fff;
}

.reviews__left .inner {
	max-width: 100%;
}

.reviews__wrapper > .reviews__title {
	margin: 0 0 8px;
	font-size: 40px;
	font-weight: 700;
	color: #333;
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap: 8px;
}

.reviews__title {
	margin: 0 0 38px;
	font-size: 32px;
	font-weight: 700;
	color: #5d5d5d;
	line-height: 1.3;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	justify-content: space-between;
}

/* Название и подпись под ним — левая часть строки заголовка */
.reviews__title-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.reviews__title-name {
	line-height: 1.2;
	color: #b85c38;
}

.reviews__title-note {
	font-size: 17px;
	font-weight: 400;
	color: #8e90a0;
	line-height: 1.4;
}

/* Рейтинги площадок стоят в строке заголовка, справа от названия */
.reviews__title .reviews__ratings {
	margin-bottom: 0;
	flex-wrap: nowrap;
}

.reviews__subtitle {
	margin: 0 0 20px;
	font-size: 17px;
	color: #8e90a0;
	line-height: 1.4;
}

.reviews__wrapper > .reviews__subtitle {
	margin: 0 0 40px;
	max-width: 900px;
}

/* --- Рейтинги площадок: Яндекс + 2ГИС --- */

.reviews__ratings {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.reviews__yandex {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	text-decoration: none;
	color: inherit;
	background: #f8f5f2;
	border-radius: 8px;
	padding: 10px 14px 10px 10px;
}

.reviews__yandex:hover,
.reviews__yandex:focus {
	text-decoration: none;
	color: inherit;
}

.reviews__yandex-rating {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 40px;
	font-weight: 600;
	color: #2c2c2c;
	line-height: 1;
}

.reviews__yandex-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.reviews__yandex-advantages {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	flex-wrap: wrap;
	flex-direction: column;
}

.reviews__stars {
	display: flex;
	gap: 2px;
	align-items: center;
}

.reviews__star {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffc107;
}

.reviews__star svg {
	width: 100%;
	height: 100%;
}

.reviews__yandex-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	color: #22252A;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.reviews__yandex-arrow {
	transition: transform 0.2s ease;
}

.reviews__yandex:hover .reviews__yandex-count {
	color: #b85c38;
}

.reviews__yandex:hover .reviews__yandex-arrow {
	transform: translateX(4px);
}

/* --- Оценки по категориям --- */

.reviews__advantages {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	margin: 0 -40px 38px;
	padding: 0 40px;
}

.reviews__advantages:active {
	cursor: grabbing;
}

.reviews__advantages::-webkit-scrollbar {
	display: none;
}

.reviews__advantages-item {
	flex: 0 0 auto;
	min-width: 0;
	padding: 10px 15px;
	border-radius: 8px;
	border: 1px solid #d9dce2;
}

.reviews__advantages-title {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 17px;
	font-weight: 600;
	color: #2c2c2c;
}

.reviews__advantages-title span:first-of-type {
	color: #3CB200;
}

.reviews__advantages-check {
	display: inline-flex;
	width: 13px;
	height: 19px;
}

.reviews__advantages-check svg {
	width: 17px;
	height: 18px;
}

.reviews__advantages-rating {
	font-size: 15px;
	color: #8e90a0;
}

/* --- Карточки отзывов --- */

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

.reviews__review {
	position: relative;
	background: #f8f5f2;
	border-radius: 8px;
	padding: 20px;
}

/* Внешняя обёртка карточки: несёт id области правки Битрикса.
   Оформление — на вложенном .reviews__review, иначе в режиме
   правки фон уезжает на служебный контейнер. */
.reviews__item > .reviews__review {
	height: 100%;
}

/* Скрытая порция — правило идёт последним, чтобы перебивать display у обёртки */
.reviews__review--hidden {
	display: none !important;
}

.review__user {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	padding-right: 180px;
}

.review__user-photo {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.review__user-person {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Строго прямые потомки.

   Без `>` эти правила доставали и звёзды рейтинга: они тоже <span> и
   лежат глубже, внутри .review__user-meta. Первая звезда попадала под
   :first-child и красилась в графитовый, последняя — под :last-child и
   становилась серой, а средние оставались жёлтыми. Получался разнобой
   вместо ровного ряда. */
.review__user-person > span:first-child {
	font-weight: 600;
	font-size: 18px;
	color: #2c2c2c;
}

.review__user-person > span:last-child {
	font-size: 18px;
	color: #8e90a0;
}

.review__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.review__stars .rating__star {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffcc00;
}

.review__stars .rating__star--empty {
	color: #d9d9e0;
}

.review__stars .rating__star svg {
	width: 100%;
	height: 100%;
}

.review__text {
	margin: 0;
	font-size: 18px;
	line-height: 130%;
	color: #4a4a4a;
}

.review__text p {
	margin: 0 0 6px;
}

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

.review__source {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #8e90a0;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.review__source:hover {
	color: #b85c38;
}

.review__source:focus-visible {
	outline: 2px solid #b85c38;
	outline-offset: 3px;
}

.review__source-icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

/* --- Кнопка «Показать ещё» --- */

.reviews__button-wrap {
	margin-top: 24px;
	text-align: center;
}

.reviews__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 82px;
	background: #ffffff;
	border: 1px solid #b85c38;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	color: #b85c38;
	font-size: 16px;
	font-weight: 500;
}

.reviews__button:hover {
	background: #b85c38;
	color: #ffffff;
}

/* --- Правая колонка: masonry-фотогалерея --- */

body .reviews__right {
	flex: 0 0 450px;
	width: unset;
	padding: 0;
	margin: 0;
	float: unset;
	box-shadow: unset;
	z-index: unset;
	/* Колонка не тянется за левой и не залипает при скролле —
	   высота остаётся по содержимому галереи */
	position: static;
	align-self: flex-start;
	height: auto;
}

.small-gallery-block.ROSVEB-small-gallery-wrapper {
	position: relative;
}

.masonry-grid.dhr-gallery__grid {
	margin: 0;
}

.dhr-gallery__grid .grid-item {
	width: calc(50% - 5px);
	margin-bottom: 10px;
	float: left;
}

.dhr-gallery__link {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background-color: #E6E3DF;
	line-height: 0;
}

.dhr-gallery__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.dhr-gallery__link:hover .dhr-gallery__img {
	transform: scale(1.04);
}

/* Кнопка лежит поверх нижних фото — ощущение, что лента продолжается */
.dhr-gallery__button-wrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 90px 0 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(248 248 248 / 75%) 45%, #f8f8f8 80%);
	pointer-events: none;
	z-index: 2;
}

.dhr-gallery__button {
	pointer-events: auto;
	display: block;
	width: 100%;
	padding: 11px 20px;
	background: #b85c38;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	transition: background 0.2s ease;
}

.dhr-gallery__button:hover {
	background: #22252A;
	color: #ffffff;
}

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

@media (max-width: 1199px) {
	.reviews__left {
		flex: 1 1 calc(100% - 300px);
	}

	body .reviews__right {
		flex: 0 0 280px;
	}
}

@media (max-width: 991px) {
	.reviews__container {
		flex-wrap: wrap;
	}

	.reviews__left,
	body .reviews__right {
		flex: 1 1 100%;
	}

	.dhr-gallery__grid .grid-item {
		width: calc(33.333% - 7px);
	}

	.reviews__wrapper > .reviews__title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.reviews__left {
		padding: 20px 30px;
		border-radius: 20px;
	}

	.reviews__advantages {
		margin: 0 -30px 24px;
		padding: 0 30px;
	}

	.reviews__ratings {
		gap: 24px;
	}

	/* Заголовок и рейтинги перестают помещаться в строку */
	.reviews__title {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 16px;
	}

	.reviews__title .reviews__ratings {
		flex-wrap: wrap;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.reviews__left {
		box-shadow: unset;
		padding: 20px 0 0 0;
		border-top: 1px solid #e0e0e0;
		border-radius: 0;
	}

	.reviews__title {
		font-size: 22px;
		flex-wrap: wrap;
	}

	.reviews__advantages {
		margin: 0 -16px 24px;
		padding: 0 16px;
	}

	.reviews__yandex-rating {
		font-size: 32px;
	}

	.reviews__button {
		width: 100%;
		padding: 10px 20px;
	}

	.dhr-gallery__grid .grid-item {
		width: calc(50% - 5px);
	}

	.review__user-person > span:first-child {
		font-size: 18px;
	}

	.review__user-person > span:last-child {
		font-size: 16px;
	}

	.review__text {
		font-size: 16px;
	}

	.review__user {
		padding-right: 0;
	}

	.review__source {
		position: static;
		margin-top: 14px;
	}
}

.faq-accordion__list .item-accordion-wrapper{
	background: #f8f9fa;
}

.faq-accordion__list .item-accordion-wrapper:hover{
	box-shadow: 0px 0px 0px 1px #b85c38;
}

#footer .footer__part-item:last-child{
	display: none;
}

#footer .footer__main-inner{
	--items-count: 3;
}

/* Меню «Разное» вторым блоком в первой колонке подвала */
#footer .footer__misc-menu {
	margin-top: 32px;
}

/* Заголовок без ссылки — такой же цвет, как у соседних меню */
#footer .footer__misc-menu .title span {
	color: #fff;
}

.rss{
	display: none;
}

.tab-nav__item{
	background-color: rgb(231 231 231 / 40%);
}

.chip{
	background-color: rgb(231 231 231 / 40%);
	border: none;
	height: 40px;
}

.introtext{
	background: #f8f5f2;
	border-radius: 8px;
	padding: 20px;
}


/* Типографика начало */

ul > li::before{
	content: "\2726";
	color: #b85c38;
	margin: 0 16px 0 -21px;
	background-color: unset;
	top: 1px;
	width: 32px;
	left: 21px;
	font-size: 22px;
}
	
ol {
	counter-reset: item;
	padding-left: 0;
	list-style: none;
	margin: 20px 0 30px;
}

ul {
	margin-bottom: 30px;
}
	
.detail ol > li {
	position: relative;
	padding-left: 44px;
	margin: 10px 0 20px 0;
	min-height: 26px;
	line-height: 1.5;
	font-size: 16px;
	font-weight: 500;
}

.content li{
	margin: 8px 0 8px 32px;
}
	
ol > li p{
	margin-bottom: 0;
}
	
ol > li h4{
	margin-bottom: 8px;
}
	
.detail ol > li:before {
	content: counter(item);
	counter-increment: item;
	position: absolute;
	left: 0;
	top: -3px;
	width: 30px;
	height: 30px;
	background: #b85c38;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

.detail-block blockquote{
	background: #f8f5f2;
	padding: 8px 20px 8px 41px;
	border-radius: 0 6px 6px 0;
}

.detail-block h2{
	color: #22252A;
	font-weight: 800;
}

.detail-block h3{
	font-weight: 700;
}

/* Типографика конец */





/* ==========================================================
   Статьи блога: изображения, CTA и серая зона тех. блоков
   ========================================================== */

/* --- Изображения в тексте статьи --- */
.detail.blog .content figure {
	margin: 32px 0;
}

.detail.blog .content figure img,
.detail.blog .content p > img {
	border-radius: 8px;
	max-width: 100%;
	height: auto;
	display: block;
}

/* Мелкие фото обтекаются текстом на ПК */
.detail.blog .content figure.art-figure--float-left,
.detail.blog .content figure.art-figure--float-right {
	max-width: 380px;
}

@media (min-width: 768px) {
	.detail.blog .content figure.art-figure--float-left {
		float: left;
		margin: 6px 32px 24px 0;
	}

	.detail.blog .content figure.art-figure--float-right {
		float: right;
		margin: 6px 0 24px 32px;
	}
}

/* На мобильных обтекание отключаем — фото отдельной строкой */
@media (max-width: 767px) {
	.detail.blog .content figure.art-figure--float-left,
	.detail.blog .content figure.art-figure--float-right {
		float: none;
		max-width: 100%;
		margin: 24px 0;
	}
}

/* --- Воздух вокруг заголовков внутри статьи --- */
.detail.blog .content h2 {
	margin-top: 56px;
	margin-bottom: 20px;
	clear: both;
}

.detail.blog .content h3 {
	margin-top: 40px;
	margin-bottom: 16px;
	clear: both;
}

/* Первый заголовок не отрывается от начала статьи */
.detail.blog .content > h2:first-child,
.detail.blog .content > h3:first-child {
	margin-top: 0;
}

/* Заголовок сразу после обтекаемого фото не должен ждать конца обтекания */
.detail.blog .content figure.art-figure--float-left + h2,
.detail.blog .content figure.art-figure--float-right + h2,
.detail.blog .content figure.art-figure--float-left + h3,
.detail.blog .content figure.art-figure--float-right + h3 {
	clear: none;
}

.detail.blog .content ul,
.detail.blog .content ol {
	margin-bottom: 24px;
}

.detail.blog .content blockquote {
	margin: 36px 0;
	clear: both;
}

/* --- CTA-блок в конце статьи: тёмный фон + глассморфизм --- */
.art-cta {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 48px;
	margin: 0;
	padding: 48px;
	border-radius: 16px;
	background: #22252A;
	overflow: hidden;
	color: #fff;
}

.art-cta__inner {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
}

.art-cta__title {
	margin: 0 0 16px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.art-cta__text {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.72);
}

.art-cta__text:last-of-type {
	margin-bottom: 28px;
}

.art-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0;
}

/* Кнопка — матовое стекло */
.art-cta__actions .btn {
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.art-cta__actions .btn:hover,
.art-cta__actions .btn:focus {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.art-cta__phone {
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
}

.art-cta__phone:hover {
	color: rgba(255, 255, 255, 0.75);
}

/* Карточки-цифры колонкой справа (классы .stats-grid / .glass-card общие) */
.art-cta .stats-grid {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	grid-template-columns: 1fr;
	width: 268px;
	margin-left: 0;
}

.art-cta .glass-card {
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	max-width: unset;
}

.art-cta .glass-card__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.66);
}

.art-cta .glass-card__title {
	font-size: 20px;
}

.art-cta__actions .btn {
	border: none;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	height: 48px;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.art-cta__text {
	font-size: 16px;
}

/* Фото справа внутри CTA (подключается при наличии .art-cta__media) */
.art-cta__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;
	z-index: 0;
	pointer-events: none;
}

.art-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Мягкий переход от фото к тёмному фону */
.art-cta__media:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #22252A 0%, rgba(34, 37, 42, 0.6) 40%, rgba(34, 37, 42, 0.1) 100%);
}

@media (max-width: 991px) {
	.art-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.art-cta .stats-grid {
		width: 100%;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

@media (max-width: 767px) {
	.art-cta {
		padding: 28px 20px;
		gap: 24px;
	}

	.art-cta__title {
		font-size: 21px;
	}

	.art-cta__actions {
		gap: 16px;
	}

	.art-cta__actions .btn {
		width: 100%;
		text-align: center;
	}

	.art-cta .stats-grid {
		grid-template-columns: 1fr;
	}

	/* На мобильных фото уводим в фон, чтобы не сжимало текст */
	.art-cta__media {
		width: 100%;
		opacity: 0.25;
	}

	.art-cta__media:after {
		background: linear-gradient(to bottom, rgba(34, 37, 42, 0.75) 0%, #22252A 85%);
	}
}

/* --- Ряд изображений внутри статьи (галерея-сетка) --- */
.detail.blog .content .art-row {
	display: grid;
	grid-template-columns: repeat(var(--art-row-cols, 4), minmax(0, 1fr));
	gap: 20px;
	margin: 32px 0;
	clear: both;
}

.detail.blog .content .art-row figure {
	margin: 0;
}

.detail.blog .content .art-row img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Вариант с одинаковой высотой кадров — для разноформатных фото */
.detail.blog .content .art-row--uniform img {
	height: 260px;
	object-fit: cover;
}

@media (max-width: 991px) {
	.detail.blog .content .art-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.detail.blog .content .art-row--uniform img {
		height: 220px;
	}
}

@media (max-width: 575px) {
	.detail.blog .content .art-row {
		grid-template-columns: 1fr;
	}

	.detail.blog .content .art-row--uniform img {
		height: auto;
	}
}

/* --- Таблицы внутри статьи --- */
.detail.blog .content table {
	width: 100%;
	margin: 32px 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
}

.detail.blog .content table th,
.detail.blog .content table td {
	padding: 14px 16px;
	border: 1px solid #E6E3DF;
	text-align: left;
	vertical-align: top;
}

.detail.blog .content table th {
	background: #F8F8F8;
	font-weight: 600;
}

.detail.blog .content table tbody tr:nth-child(even) td {
	background: #FCFBFA;
}

/* На узких экранах таблица прокручивается вбок, страница — нет */
@media (max-width: 767px) {
	.detail.blog .content table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		font-size: 14px;
	}

	.detail.blog .content table th,
	.detail.blog .content table td {
		padding: 10px 12px;
	}
}

/* --- Технические блоки после статьи: серая зона на всю ширину --- */
.detail.blog .detail-block.desc ~ .detail-block {
	position: relative;
	z-index: 0;
}

.detail.blog .detail-block.desc ~ .detail-block:before {
	content: "";
	position: absolute;
	top: -28px;
	bottom: -28px;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: #F8F8F8;
	z-index: -1;
}

/* Стыкуем подложки соседних блоков без щелей */
.detail.blog .detail-block.desc ~ .detail-block + .detail-block:before {
	top: -29px;
}

/* Воздух в начале и конце серой зоны */
.detail.blog .detail-block.desc + .detail-block {
	margin-top: 30px;
	padding-top: 40px;
}

.detail.blog .services-detail__bottom-info > .detail-block:last-child {
	margin-bottom: 52px;
	padding-bottom: 8px;
}

/* Заголовок "Дополнительно" скрываем — CTA говорит сам за себя */
.detail.blog .detail-block.dops > .ordered-block__title {
	display: none;
}

/* ==========================================================================
   Конфигуратор фасадов Feldhaus Klinker (/configurator/)
   Внешний виджет cadesignform.dk рисует свой интерфейс внутри .customizer.
   ========================================================================== */

/* Сцена виджета — квадрат 1800×1800, вписанный по ширине блока, и обрезается
   сверху/снизу. При 700px дом был виден на 60%, при 900px — на 77%; больше
   брать нельзя, иначе блок перестаёт помещаться на экран 1080p. */
.dhconf {
	width: 100%;
	height: 900px;
	margin-bottom: 40px;
}

.dhconf .customizer {
	width: 100%;
	height: 100%;
}

/* На узких экранах виджету нужно больше вертикали: панель инструментов
   переносится под сцену и при фиксированной высоте обрезает картинку. */
@media (max-width: 767px) {
	.dhconf {
		height: 80vh;
		min-height: 560px;
	}
}

/* Типографика темы (ul > li::before со звёздочкой ✦) бьёт по спискам внутри
   виджета — это 700+ позиций каталога кирпича. Списки конфигуратора
   служебные, маркеры им не нужны. */
.dhconf ul > li::before {
	content: none;
	margin: 0;
	width: auto;
}

/* YUI рендерит слайдер в body, когда его контейнер #slider ещё не создан.
   Осиротевший виджет тянется во всю ширину и даёт белую полосу 26px
   над шапкой. Целевой #slider внутри конфигуратора при этом не трогаем. */
body > span.yui3-widget.yui3-slider {
	display: none;
}

.FORMS .form-header{
	flex: unset;
}

.FORMS .btn-default{
	color: #fff !important;
	background: rgb(255 255 255 / 20%);
	border: 1px solid rgb(255 255 255 / 10%);
	backdrop-filter: blur(6px);
	font-weight: 400;
	padding: 0 50px;
}

/* Карточка товара: краткая инфографика о заказе, оплате и доставке */
.catalog-detail__bottom-info .dhpc {
	--dhpc-accent: #C05A3A;
	--dhpc-accent-dark: #A84A2D;
	--dhpc-dark: #22252A;
	--dhpc-muted: #6B7076;
	--dhpc-line: rgba(34, 37, 42, 0.09);
	--dhpc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	color: var(--dhpc-dark);
}

.catalog-detail__bottom-info .dhpc__lead {
	max-width: 820px;
	margin: 0 0 24px;

	color: var(--dhpc-muted);
	font-size: 16px;
	line-height: 1.65;
}

.catalog-detail__bottom-info .dhpc__steps,
.catalog-detail__bottom-info .dhpc__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.catalog-detail__bottom-info .dhpc__step,
.catalog-detail__bottom-info .dhpc__photo-card {
	position: relative;
	min-width: 0;

	border: 1px solid var(--dhpc-line);
	border-radius: 16px;
	background-color: #FFF;
	box-shadow: 0 0 0 rgba(34, 37, 42, 0.1);
	overflow: hidden;

	transition:
		transform 0.35s var(--dhpc-ease),
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.catalog-detail__bottom-info .dhpc__step {
	padding: 24px;
}

.catalog-detail__bottom-info .dhpc__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	margin-bottom: 20px;

	border-radius: 50%;
	background-color: rgba(192, 90, 58, 0.1);
	color: var(--dhpc-accent);

	transition:
		background-color 0.35s ease,
		color 0.35s ease,
		transform 0.35s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__number {
	position: absolute;
	top: 22px;
	right: 22px;

	color: rgba(34, 37, 42, 0.22);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;

	transition:
		color 0.35s ease,
		transform 0.35s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__title {
	margin: 0 0 10px;

	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.catalog-detail__bottom-info .dhpc__text {
	margin: 0;

	color: var(--dhpc-muted);
	font-size: 16px;
	line-height: 1.4;
}

.catalog-detail__bottom-info .dhpc__note {
	margin: 16px 0 0;

	color: var(--dhpc-muted);
	font-size: 15px;
	line-height: 1.5;
}

.catalog-detail__bottom-info .dhpc__schemes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.catalog-detail__bottom-info .dhpc__scheme {
	position: relative;
	min-width: 0;
	padding: 32px 30px;

	border: 1px solid var(--dhpc-line);
	border-radius: 18px;
	background-color: #FFF;
	box-shadow: 0 0 0 rgba(34, 37, 42, 0.1);

	transition:
		transform 0.3s var(--dhpc-ease),
		box-shadow 0.3s ease,
		border-color 0.3s ease;
	display: flex;
	flex-direction: column;
}

.catalog-detail__bottom-info .dhpc__scheme .dhpc__title {
	margin: 0 0 16px;

	color: var(--dhpc-dark);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.catalog-detail__bottom-info .dhpc__percent {
	margin: 0 0 20px;

	color: var(--dhpc-accent);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;

	transition:
		letter-spacing 0.3s var(--dhpc-ease),
		transform 0.3s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__percent span {
	font-size: 26px;
	font-weight: 600;
}

.catalog-detail__bottom-info .dhpc__percent em {
	color: var(--dhpc-muted);
	font-size: 26px;
	font-style: normal;
	font-weight: 600;
}

.catalog-detail__bottom-info .dhpc__percent em span {
	font-size: 18px;
}

.catalog-detail__bottom-info .dhpc__bar {
	display: flex;
	gap: 4px;
	height: 18px;
	margin-top: auto;
}

.catalog-detail__bottom-info .dhpc__bar span,
.catalog-detail__bottom-info .dhpc__bar i {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 18px;
	padding: 0 8px;

	border-radius: 100px;
	background-color: var(--dhpc-dark);
	color: #FFF;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;

	transition:
		filter 0.3s ease,
		transform 0.3s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__bar--split i {
	background-color: #D9DADE;
	color: var(--dhpc-dark);
}

.catalog-detail__bottom-info .dhpc__footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	margin-top: 20px;
	padding-bottom: 19px;
}

.catalog-detail__bottom-info .dhpc__footer p {
	margin: 0;
	color: var(--dhpc-muted);
	font-size: 15px;
	line-height: 1.4;
}

.catalog-detail__bottom-info .dhpc__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 18px;

	border: 1px solid rgba(192, 90, 58, 0.3);
	border-radius: 100px;
	background-color: rgba(192, 90, 58, 0.06);
	color: var(--dhpc-accent);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;

	transition:
		background-color 0.28s ease,
		border-color 0.28s ease,
		color 0.28s ease,
		transform 0.28s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__more span {
	display: inline-flex;

	transition: transform 0.28s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__photo-card img {
	display: block;
	width: 100%;
	height: 150px;

	object-fit: cover;

	transition: transform 0.65s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__photo-body {
	position: relative;
	padding: 20px;

	background-color: #FFF;

	transition: background-color 0.35s ease;
}

.catalog-detail__bottom-info .dhpc--cta {
	position: relative;
	min-height: 308px;

	border-radius: 24px;
	background-color: var(--dhpc-dark);
	box-shadow: 0 0 0 rgba(34, 37, 42, 0.18);
	overflow: hidden;

	transition:
		transform 0.38s var(--dhpc-ease),
		box-shadow 0.38s ease;
}

.catalog-detail__bottom-info .dhpc__cta-photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;

	width: 64%;
	overflow: hidden;
	border-radius: 0 24px 24px 0;

	pointer-events: none;
}

.catalog-detail__bottom-info .dhpc__cta-photo img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: 45% center;
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.36) 24%, rgba(0, 0, 0, 0.58) 32%, rgba(0, 0, 0, 0.78) 40%, rgba(0, 0, 0, 0.92) 48%, rgba(0, 0, 0, 0.98) 56%, #000 64%);
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.36) 24%, rgba(0, 0, 0, 0.58) 32%, rgba(0, 0, 0, 0.78) 40%, rgba(0, 0, 0, 0.92) 48%, rgba(0, 0, 0, 0.98) 56%, #000 64%);

	transition: transform 0.65s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__cta-deco {
	position: absolute;
	top: -230px;
	left: -190px;
	z-index: 2;

	width: 560px;
	height: 560px;

	background: radial-gradient(circle closest-side, rgba(192, 90, 58, 0.42) 0%, rgba(192, 90, 58, 0.34) 18%, rgba(192, 90, 58, 0.24) 34%, rgba(192, 90, 58, 0.15) 50%, rgba(192, 90, 58, 0.08) 65%, rgba(192, 90, 58, 0.03) 80%, rgba(192, 90, 58, 0) 100%);

	pointer-events: none;

	transition: transform 0.7s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__cta-content {
	position: relative;
	z-index: 3;

	max-width: 680px;
	padding: 50px;
}

.catalog-detail__bottom-info .dhpc__cta-title {
	margin: 0 0 14px;

	color: #FFF;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.catalog-detail__bottom-info .dhpc__cta-text {
	max-width: 520px;
	margin: 0 0 26px;

	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	line-height: 1.6;
}

.catalog-detail__bottom-info .dhpc__cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.catalog-detail__bottom-info .dhpc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 45px;
	padding: 15px 26px;

	border: 0;
	border-radius: 100px;
	background-color: var(--dhpc-accent);
	color: #FFF;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;

	transition:
		background-color 0.28s ease,
		box-shadow 0.28s ease,
		transform 0.28s var(--dhpc-ease);
	
	width: 274px;
}

.catalog-detail__bottom-info .dhpc__button span {
	display: inline-flex;

	transition: transform 0.28s var(--dhpc-ease);
}

.catalog-detail__bottom-info .dhpc__cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 11px 20px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 8px 24px rgba(0, 0, 0, 0.12);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #FFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;

	transition:
		background-color 0.28s ease,
		border-color 0.28s ease,
		box-shadow 0.28s ease,
		transform 0.28s var(--dhpc-ease);

	width: 274px;
}

.catalog-detail__bottom-info .detail-block.dops > .ordered-block__title {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.catalog-detail__bottom-info .dhpc__step:hover,
	.catalog-detail__bottom-info .dhpc__photo-card:hover {
		border-color: transparent;
		box-shadow: 0 18px 40px rgba(34, 37, 42, 0.1);
		transform: translateY(-5px);
	}

	.catalog-detail__bottom-info .dhpc__step:hover .dhpc__icon {
		background-color: #22252a;
		color: #FFF;
	}

	.catalog-detail__bottom-info .dhpc__step:hover .dhpc__number {
		color: var(--dhpc-accent);
		transform: translateY(-3px);
	}

	.catalog-detail__bottom-info .dhpc__scheme:hover {
		border-color: transparent;
		box-shadow: 0 18px 40px rgba(34, 37, 42, 0.1);
		transform: translateY(-4px);
	}

	.catalog-detail__bottom-info .dhpc__more:hover {
		border-color: var(--dhpc-accent);
		background-color: var(--dhpc-accent);
		color: #FFF;
		transform: translateY(-2px);
	}

	.catalog-detail__bottom-info .dhpc__more:hover span {
		transform: translateX(4px);
	}

	.catalog-detail__bottom-info .dhpc__photo-card:hover img {
		transform: scale(1.045);
	}

	.catalog-detail__bottom-info .dhpc--cta:hover .dhpc__cta-photo img {
		transform: scale(1.03);
	}

	.catalog-detail__bottom-info .dhpc--cta:hover .dhpc__cta-deco {
		transform: translate(14px, 10px) scale(1.04);
	}

	.catalog-detail__bottom-info .dhpc__button:hover {
		background-color: var(--dhpc-accent-dark);
		box-shadow: 0 12px 26px rgba(192, 90, 58, 0.32);
		transform: translateY(-2px);
	}

	.catalog-detail__bottom-info .dhpc__button:hover span {
		transform: translateX(4px);
	}

	.catalog-detail__bottom-info .dhpc__cta-link:hover {
		background-color: rgba(255, 255, 255, 0.18);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.24),
			0 12px 30px rgba(0, 0, 0, 0.2);
		color: #FFF;
		text-decoration: none;
		transform: translateY(-2px);
	}
}

@media (max-width: 767px) {
	.catalog-detail__bottom-info .dhpc__steps,
	.catalog-detail__bottom-info .dhpc__cards,
	.catalog-detail__bottom-info .dhpc__schemes {
		grid-template-columns: 1fr;
	}

	.catalog-detail__bottom-info .dhpc__scheme {
		padding: 26px 22px;
	}

	.catalog-detail__bottom-info .dhpc__scheme .dhpc__title {
		font-size: 21px;
	}

	.catalog-detail__bottom-info .dhpc__percent {
		font-size: 36px;
	}

	.catalog-detail__bottom-info .dhpc__footer {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.catalog-detail__bottom-info .dhpc__more {
		width: 100%;
		white-space: normal;
	}

	.catalog-detail__bottom-info .dhpc--cta {
		display: flex;
		flex-direction: column;
		min-height: 0;
		border-radius: 20px;
	}

	.catalog-detail__bottom-info .dhpc__cta-photo {
		position: static;

		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 0;
	}

	.catalog-detail__bottom-info .dhpc__cta-photo img {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.catalog-detail__bottom-info .dhpc__cta-deco {
		z-index: 0;
	}

	.catalog-detail__bottom-info .dhpc__cta-content {
		max-width: none;
		padding: 30px 24px 34px;
	}

	.catalog-detail__bottom-info .dhpc__cta-title {
		font-size: 24px;
	}

	.catalog-detail__bottom-info .dhpc__cta-actions {
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
	}

	.catalog-detail__bottom-info .dhpc__button,
	.catalog-detail__bottom-info .dhpc__cta-link {
		width: 100%;
		white-space: normal;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.catalog-detail__bottom-info .dhpc__cta-photo {
		width: 46%;
	}

	.catalog-detail__bottom-info .dhpc__cta-content {
		max-width: 57%;
		padding: 44px 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.catalog-detail__bottom-info .dhpc *,
	.catalog-detail__bottom-info .dhpc *::before,
	.catalog-detail__bottom-info .dhpc *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

.FORMS .form--BG_IMG{
	min-height: 650px;
}

.card-image-rounded_images .card-image{
	border-radius: 12px;
}

.card-image-rounded_images {
	width: 240px;
	height: 240px;
}

.sections-list__content-inner .lineclamp-5 {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sections-list__content-inner .lineclamp-5 a {
	padding-left: 10px;
	display: flex;
}

.sections-list__content-inner .lineclamp-5 .category-separator {
	display: none;
}

.page-product .sections-list__content-inner .lineclamp-5 a::before {
	content: "\2726";
	color: #b85c38;
	margin: -2px 6px 0 -9px;
	width: 21px;
	height: 22px;
	display: inline-block;
	font-size: 16px;
}

.services-list__childs-item-name {
	line-height: 120%;
}

.page-product .container,
.page-pokupatelyam .container,
.page-company-brands .container,
.page-contacts .container {
	background-color: #f8f9fa;
	padding: 30px 0 50px;
}

.page-product .main,
.page-pokupatelyam .main,
.page-company-brands .main,
.page-contacts .main{
	padding-bottom: 0 !important;
}

.page-contacts .contacts-detail__social{
	background: #f8f9fa;
}

.page-company-brands .ajax_load_btn > button{
	background-color: rgb(237 234 230); 
}

.page-product .sidebar{
	background-color: #fff;
	padding: 0 14px;
	border-radius: 8px;
	border: 1px solid var(--stroke_black, #e5e5e5);
}

.bx_filter_parameters:not(.mobile-scroll) > .bx_filter_parameters_box{
	background-color: #fff;
	padding: 0 14px;
	border-radius: 8px;
	border: 1px solid var(--stroke_black, #e5e5e5);
}

.bx_filter_parameters:not(.mobile-scroll) > .bx_filter_parameters_box .bx_filter_block{
	padding-bottom: 10px;
}

.sections-list__wrapper-compact .sections-list__item{
	background-color: #f1eeeb;
	border: none;
	transition: all .2s ease;
}

.sections-list__wrapper-compact .sections-list__item:hover{
	box-shadow:unset;
	transform: translateY(-2px);
}

.sections-list__wrapper-compact .sections-list__item .card-image-size{
	display: none;
}

.catalog_page .section-block .line-block{
	gap: 6px;
}

.catalog_page .section-block .sections-list__item .line-block{
	padding: 12px 20px;
}

.catalog_page .sections-list__item-products-count{
	display: none;
}

.sticker_item--hit {
	background-color: #cd8b72;
}

.brand-detail-info{
	max-height: 50px;
}

.brand-detail-info-wrapper{
	mix-blend-mode: darken;
	background-color: unset;
}

.page-product .catalog-detail__main-parts,
.page-product .props_block{
	background-color: #fff;
	border-radius: 12px;
}

/* ==================================================================
   СТРАНИЦА «ОПЛАТА И ДОСТАВКА» (/pokupatelyam/oplata-i-dostavka/)

   Разметка — pokupatelyam/oplata-i-dostavka/index.php,
   появление блоков при скролле — js/custom.js.

   Фирменная палитра: терракота #C05A3A — акцент, графит #22252A — текст
   и тёмные плашки, песочный #D7C7B5 — вспомогательный, #F8F8F8 — фон.

   Переменные объявлены на корне страницы — тот же приём, что у .dhw
   и .fsys на главной, отдельная тема-обёртка не нужна.

   ⚠️Префикс .dhpd- (delivery page das-haus). Прежняя версия страницы
   жила на .dhp-, её стили удалены вместе с разметкой: они были
   рассчитаны на другой HTML и раздували секции.
   ================================================================== */

.dhpd-page {
	--dhpd-accent: #C05A3A;
	--dhpd-accent-dark: #A84A2D;
	--dhpd-graphite: #22252A;
	--dhpd-sand: #D7C7B5;
	--dhpd-muted: #6B7076;
	--dhpd-line: rgba(34, 37, 42, 0.09);
	--dhpd-bg: #F8F8F8;
	--dhpd-card: #FFFFFF;

	/* Общая кривая: короткий разгон, мягкое торможение */
	--dhpd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	color: var(--dhpd-graphite);
}

/* ------------------------------------------------------------------
   Появление блоков при скролле

   Класс .dhpd-reveal стоит в разметке, но прячет содержимое только
   после того, как JS подтвердит свою работу классом .dhpd-js на <html>.
   Без скрипта страница остаётся полностью видимой — иначе контент
   пропал бы у поисковых роботов и при ошибке загрузки JS.
   ------------------------------------------------------------------ */

.dhpd-js .dhpd-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 0.65s ease,
		transform 0.65s var(--dhpd-ease);
	transition-delay: calc(var(--dhpd-order, 0) * 90ms);
}

/* ⚠️transform здесь НЕ сбрасываем: правило .dhpd-js .dhpd-reveal.is-visible
   (0,3,0) перебило бы подъём карточек при наведении (0,2,0), и hover
   визуально не работал бы. Достаточно вернуть смещение на ноль —
   дальше элемент управляет transform сам. */
.dhpd-js .dhpd-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------------
   Общие элементы секций
   ------------------------------------------------------------------ */

.dhpd-section {
	padding-block: 64px 8px;
}

.dhpd-head {
	max-width: 760px;
	margin-bottom: 40px;
}

.dhpd-eyebrow {
	display: inline-block;
	margin-bottom: 8px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: #22252a59;
	padding: 0px 14px;
	border-radius: 100px;
}

.dhpd-h2 {
	margin: 0 0 14px;

	color: var(--dhpd-graphite);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.dhpd-lead {
	margin: 0;

	color: var(--dhpd-muted);
	font-size: 18px;
	line-height: 1.3;
}

.dhpd-lead a {
	color: var(--dhpd-accent);
	border-bottom: 1px solid rgba(192, 90, 58, 0.35);
	transition: border-color 0.25s ease;
}

.dhpd-lead a:hover {
	border-bottom-color: var(--dhpd-accent);
}

.dhpd-hint {
	margin: 22px 0 0;

	color: var(--dhpd-muted);
	font-size: 15px;
	line-height: 1.55;
}

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

.dhpd-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;

	padding: 15px 26px;

	border: 0;
	border-radius: 100px;

	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;

	transition:
		background-color 0.28s ease,
		transform 0.28s var(--dhpd-ease),
		box-shadow 0.28s ease;
}

.dhpd-btn--dark {
	background-color: var(--dhpd-accent);
	color: #FFF;
}

.dhpd-page .dhpd-btn--dark:hover {
	background-color: var(--dhpd-accent-dark);
	box-shadow: 0 12px 26px #c05a3a33;
	color: #FFF;
	text-decoration: none;
	transform: none;
}

.dhpd-btn--accent {
	background-color: var(--dhpd-accent);
	color: #FFF;
}

.dhpd-page .dhpd-btn--accent:hover {
	background-color: var(--dhpd-accent-dark);
	box-shadow: 0 12px 26px rgba(192, 90, 58, 0.32);
	color: #FFF;
	text-decoration: none;
	transform: none;
}

.dhpd-btn__arrow {
	display: inline-flex;
	transition: transform 0.28s var(--dhpd-ease);
}

.dhpd-btn:hover .dhpd-btn__arrow {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------
   Фотографии и заглушки

   Пока заказчик не передал кадры, по путям лежат заглушки в фирменных
   цветах. Если файла нет совсем — рисуется .dhpd-photo__stub.
   ------------------------------------------------------------------ */

.dhpd-photo {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background-color: #ECEAE7;
}

.dhpd-photo__img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition: transform 0.6s var(--dhpd-ease);
}

.dhpd-photo__stub {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;

	width: 100%;
	height: 100%;
	min-height: 180px;
	padding: 20px;

	background-color: #E6E3DF;
	color: #9A938A;
	text-align: center;
}

.dhpd-photo__stub-icon {
	display: inline-flex;
	color: #B4ADA3;
}

.dhpd-photo__stub-text {
	font-size: 13px;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
   HERO

   Композиция по образцу .cmd__hero (CandleMaker): тёмная карточка,
   слева текст, справа фотография под градиентной маской.
   ------------------------------------------------------------------ */

.dhpd-hero {
	position: relative;
	display: flex;
	align-items: center;

	min-height: 340px;
	margin-bottom: 8px;
	padding: 48px 52px;

	border-radius: 24px;
	background-color: var(--dhpd-graphite);
	overflow: hidden;
}

.dhpd-hero__inner {
	position: relative;
	z-index: 3;

	width: 100%;
	max-width: 560px;
}

.dhpd-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	opacity: .7;
	margin-bottom: 22px;
	padding: 6px 18px;

	border-radius: 100px;
	background-color: rgb(255 255 255 / 10%);

	color: #FFF;
	font-size: 15px;
	font-weight: 300;
	line-height: 1;

	transition:
		transform 0.3s var(--dhpd-ease),
		background-color 0.3s ease;
}

.dhpd-hero:hover .dhpd-hero__badge {
	background-color: var(--dhpd-accent-dark);
	transform: translateY(-2px);
}

.dhpd-hero__text {
	margin: 0;

	color: rgba(255, 255, 255, 0.78);
	font-size: 18px;
	line-height: 1.55;
}

.dhpd-hero__text b {
	color: #FFF;
	font-weight: 600;
}

.dhpd-hero__marks {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px 26px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	flex-direction: column;
}

.dhpd-hero__marks li {
	position: relative;
	padding-left: 26px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.4;
	margin-bottom: 0;
}

/* Галочка — тот же приём, что у подписей блока .dhw на главной */
.dhpd-hero__marks li::before {
	content: '';
	position: absolute;
	top: 5px;
	left: 2px;
	width: 14px;
	height: 6px;
	margin: 0;
	border-left: 1.5px solid var(--dhpd-accent);
	border-bottom: 1.5px solid var(--dhpd-accent);
	transform: rotate(-45deg);
}

.dhpd-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;

	width: 55%;
	overflow: hidden;
	border-radius: 0 24px 24px 0;
}

.dhpd-hero__photo .dhpd-photo {
	width: 100%;
	height: 100%;
	border-radius: 0;
	background-color: transparent;
}

/* Левая половина кадра растворяется в фоне hero. Много промежуточных
   точек — иначе на градиенте виден излом кривой прозрачности. */
.dhpd-hero__photo .dhpd-photo__img,
.dhpd-hero__photo .dhpd-photo__stub {
	-webkit-mask-image: linear-gradient(to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.04) 10%,
		rgba(0, 0, 0, 0.12) 20%,
		rgba(0, 0, 0, 0.26) 30%,
		rgba(0, 0, 0, 0.45) 40%,
		rgba(0, 0, 0, 0.65) 50%,
		rgba(0, 0, 0, 0.82) 60%,
		rgba(0, 0, 0, 0.93) 70%,
		rgba(0, 0, 0, 0.98) 80%,
		#000 90%);
	mask-image: linear-gradient(to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.2) 10%,
		rgba(0, 0, 0, 0.5) 20%,
		#000 90%);
}

.dhpd-hero:hover .dhpd-hero__photo .dhpd-photo__img {
	transform: scale(1.03);
}

/* Тёплое свечение в углу — оживляет тёмную плашку */
.dhpd-hero__deco {
	position: absolute;
	right: -100px;
	bottom: -140px;
	z-index: 0;

	width: 380px;
	height: 380px;

	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%,
		rgba(192, 90, 58, 0.45),
		rgba(192, 90, 58, 0) 68%);

	pointer-events: none;
}

/* ------------------------------------------------------------------
   Схемы оплаты
   ------------------------------------------------------------------ */

.dhpd-schemes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.dhpd-page .dhpd-scheme {
	position: relative;

	padding: 32px 30px;

	border: 1px solid var(--dhpd-line);
	border-radius: 18px;
	background-color: var(--dhpd-card);
	box-shadow: 0px 0 0px rgba(34, 37, 42, 0.1);
	transition:
		transform 0.3s var(--dhpd-ease),
		box-shadow 0.3s ease;
}

.dhpd-page .dhpd-scheme:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(34, 37, 42, 0.1);
	border: 1px solid transparent;
}

.dhpd-scheme__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	margin-bottom: 20px;

	border-radius: 50%;
	background-color: rgba(192, 90, 58, 0.1);
	color: var(--dhpd-accent);

	transition:
		background-color 0.3s ease,
		transform 0.3s var(--dhpd-ease);
}

.dhpd-scheme:hover .dhpd-scheme__icon {
	background-color: var(--dhpd-accent);
	color: #FFF;
	transform: scale(1.06);
}

.dhpd-scheme__name {
	margin: 0 0 16px;

	color: var(--dhpd-graphite);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.dhpd-scheme__value {
	margin: 0 0 4px;

	color: var(--dhpd-accent);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.dhpd-scheme__value span {
	font-size: 26px;
	font-weight: 600;
}

.dhpd-scheme__value em {
	color: var(--dhpd-muted);
	font-size: 26px;
	font-style: normal;
	font-weight: 600;
}

.dhpd-scheme__value em span {
	font-size: 18px;
}

.dhpd-scheme__note {
	margin: 0 0 20px;

	color: var(--dhpd-muted);
	font-size: 16px;
	line-height: 1.45;
}

.dhpd-scheme__text {
	margin: 0;

	color: var(--dhpd-muted);
	font-size: 15px;
	line-height: 1.4;
}

/* Полоса соотношения платежей: показывает доли наглядно */
.dhpd-bar {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
}

.dhpd-bar__part {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	border-radius: 100px;
	color: #FFF;
	font-size: 13px;
	font-weight: 600;
	transition: filter 0.3s ease;
}

.dhpd-bar__part--full {
	flex: 1 1 100%;
	background-color: #22252a;
}

.dhpd-bar__part--first {
	flex: 0 0 70%;
	background-color: #22252a;
}

.dhpd-bar__part--second {
	flex: 1 1 30%;
	background-color: #d9dade;
	color: var(--dhpd-graphite);
}

.dhpd-scheme:hover .dhpd-bar__part {
	filter: saturate(1.12);
}

/* ------------------------------------------------------------------
   Индивидуальные условия
   ------------------------------------------------------------------ */

.dhpd-terms {
	display: flex;
	align-items: center;
	gap: 22px;

	margin-top: 20px;
	padding: 26px 30px;

	border: 1px solid var(--dhpd-line);
	border-radius: 18px;
	background-color: var(--dhpd-card);

	transition: box-shadow 0.3s ease;
}

.dhpd-terms:hover {
	box-shadow: 0 14px 32px rgba(34, 37, 42, 0.08);
}

.dhpd-terms__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: rgb(149 149 149 / 10%);
	color: var(--dhpd-accent);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.dhpd-terms:hover .dhpd-terms__icon {
	background-color: var(--dhpd-accent);
	color: #FFF;
}

.dhpd-terms__body {
	flex: 1 1 auto;
}

.dhpd-terms__title {
	margin: 0 0 6px;

	color: var(--dhpd-graphite);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.dhpd-terms__text {
	margin: 0;

	color: var(--dhpd-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Карточки доставки с фотографиями
   ------------------------------------------------------------------ */

.dhpd-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.dhpd-card {
	display: flex;
	flex-direction: column;

	border: 1px solid var(--dhpd-line);
	border-radius: 18px;
	background-color: var(--dhpd-card);
	overflow: hidden;
	box-shadow: 0 0 0 rgba(34, 37, 42, 0.1);

	transition:
		transform 0.3s var(--dhpd-ease),
		box-shadow 0.3s ease !important;
}

.dhpd-section li::before{
	display: none;
}

.dhpd-page .dhpd-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(34, 37, 42, 0.1);
}

.dhpd-card .dhpd-photo {
	aspect-ratio: 3 / 2;
	border-radius: 0;
}

.dhpd-card:hover .dhpd-photo__img {
	transform: scale(1.05);
}

.dhpd-card__body {
	position: relative;

	display: flex;
	flex-direction: column;
	flex: 1 1 auto;

	padding: 26px 26px 28px;
}

.dhpd-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;
	margin: -56px 0 16px;

	border-radius: 50%;
	background-color: #0000004d;
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 18px rgba(34, 37, 42, 0.14);
	color: #ffffff;

	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s var(--dhpd-ease);
}

.dhpd-card:hover .dhpd-card__icon {
	background-color: var(--dhpd-accent);
	color: #FFF;
	transform: translateY(-2px);
}

.dhpd-card__title {
	margin: 0 0 10px;

	color: var(--dhpd-graphite);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.dhpd-card__text {
	margin: 0;

	color: var(--dhpd-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
   Тёмная секция логистики
   ------------------------------------------------------------------ */

.dhpd-section--dark {
	margin-top: 64px;
	padding: 56px 52px 52px;

	border-radius: 24px;
	background-color: var(--dhpd-graphite);
}

.dhpd-head--light .dhpd-h2 {
	color: #FFF;
}

.dhpd-head--light .dhpd-lead {
	color: rgba(255, 255, 255, 0.68);
}

.dhpd-head--light .dhpd-eyebrow {
	color: var(--dhpd-sand);
}

/* Схема «склады → объект» */

.dhpd-geo {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	padding: 30px;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, 0.04);
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dhpd-geo:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

.dhpd-geo__col {
	flex: 1 1 0;
}

.dhpd-geo__label {
	display: block;
	margin-bottom: 14px;

	color: var(--dhpd-sand);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dhpd-geo__cities {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.dhpd-geo__cities li {
	padding: 10px 18px;

	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.05);

	color: #FFF;
	font-size: 15px;
	line-height: 1.2;

	transition:
		border-color 0.28s ease,
		background-color 0.28s ease,
		transform 0.28s var(--dhpd-ease);
	margin-bottom: 0;
	white-space: nowrap;
}

.dhpd-geo__cities li:hover {
	border-color: var(--dhpd-accent);
	background-color: rgba(192, 90, 58, 0.18);
	transform: translateY(-2px);
}

.dhpd-faq .accordion-head{
	background: #fff;
	border-radius: 14px;
}

.dhpd-geo__col--target {
	flex: 0 1 auto;
}

.dhpd-geo__to {
	display: inline-flex;
	align-items: center;
	gap: 12px;

	padding: 14px 22px;

	border-radius: 100px;
	background-color: var(--dhpd-accent);

	color: #FFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;

	transition: background-color 0.3s ease, transform 0.3s var(--dhpd-ease);
}

.dhpd-geo:hover .dhpd-geo__to {
	background-color: var(--dhpd-accent-dark);
	transform: translateY(-2px);
}

.dhpd-geo__to-icon {
	display: inline-flex;
}

.dhpd-geo__note {
	display: block;
	margin-top: 10px;

	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
	line-height: 1.4;
}

/* Плитки-цифры в языке блока COMPANY_TEXT с главной */

.dhpd-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;

	margin: 20px 0 0;
	padding: 0;

	list-style: none;
}

.dhpd-tile {
	padding: 24px 22px;
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.04);
	transition:
		transform 0.3s var(--dhpd-ease),
		border-color 0.3s ease,
		background-color 0.3s ease;
}

.dhpd-page .dhpd-tile:hover {
	transform: translateY(-3px);
	background-color: rgba(192, 90, 58, 0.08);
}

.dhpd-tile__value {
	display: block;
	margin-bottom: 6px;

	color: var(--dhpd-sand);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;

	transition: color 0.3s ease;
}

.dhpd-tile:hover .dhpd-tile__value {
	color: #FFF;
}

.dhpd-tile__label {
	display: block;

	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	line-height: 1.4;
}

/* Что берём на себя */

.dhpd-duties {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;

	margin: 16px 0 0;
	padding: 0;

	list-style: none;
}

.dhpd-duty {
	display: flex;
	align-items: center;
	gap: 14px;

	padding: 18px 20px;

	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.04);

	color: rgba(255, 255, 255, 0.8);
	font-size: 15px;
	line-height: 1.45;

	transition: background-color 0.3s ease, color 0.3s ease;
}

.dhpd-duty:hover {
	background-color: rgba(255, 255, 255, 0.07);
	color: #FFF;
}

.dhpd-duty__icon {
	display: inline-flex;
	flex: none;

	color: var(--dhpd-accent);

	transition: transform 0.3s var(--dhpd-ease);
}

.dhpd-duty:hover .dhpd-duty__icon {
	transform: scale(1.1);
}

/* ------------------------------------------------------------------
   FAQ

   Разметка и механика — штатные (Bootstrap collapse), как у аккордеона
   на сайте. Здесь только отступы блока: внешний вид карточек,
   стрелку и раскрытие целиком задаёт тема.
   ------------------------------------------------------------------ */

.dhpd-faq {
	margin-top: 4px;
}

/* ------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------ */
.dhpd-cta__main{
	padding: 50px;
}

.dhpd-cta {
	position: relative;
	margin-top: 64px;
	border-radius: 24px;
	background-color: var(--dhpd-graphite);
	overflow: hidden;
}

.dhpd-cta__deco {
	position: absolute;

	/* Отступы отрицательные на четверть размера: центр пятна остаётся
	   у левого верхнего угла, а мягкий край выходит за пределы секции
	   и обрезается её overflow — так граница не читается вовсе. */
	top: -230px;
	left: -190px;

	/* Над фотографией, но под текстом: смягчает стык кадра с фоном */
	z-index: 2;

	width: 560px;
	height: 560px;

	/* Свечение, а не фигура: центр в середине элемента, затухание
	   доведено до самого края через промежуточные точки. Резкий край
	   давали обрыв градиента на 68% (дальше шла пустота до границы)
	   и border-radius, обрезавший пятно по окружности. */
	background: radial-gradient(circle closest-side,
		rgba(192, 90, 58, 0.42) 0%,
		rgba(192, 90, 58, 0.34) 18%,
		rgba(192, 90, 58, 0.24) 34%,
		rgba(192, 90, 58, 0.15) 50%,
		rgba(192, 90, 58, 0.08) 65%,
		rgba(192, 90, 58, 0.03) 80%,
		rgba(192, 90, 58, 0) 100%);

	pointer-events: none;
}

/* Контент поверх фотографии; ширина ограничена, чтобы строки
   не заезжали на кадр (то же, что .dhpd-hero__inner в hero) */
.dhpd-cta__grid {
	position: relative;
	z-index: 3;

	max-width: 620px;
}

.dhpd-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 54px;
	height: 54px;
	margin-bottom: 20px;

	border-radius: 50%;
	background-color: rgba(192, 90, 58, 0.16);
	color: var(--dhpd-accent);

	transition: background-color 0.3s ease, color 0.3s ease;
}

.dhpd-cta:hover .dhpd-cta__icon {
	background-color: var(--dhpd-accent);
	color: #FFF;
}

.dhpd-cta__title {
	margin: 0 0 14px;

	color: #FFF;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.dhpd-cta__text {
	margin: 0 0 26px;

	color: rgba(255, 255, 255, 0.7);
	font-size: 16px;
	line-height: 1.6;
}

.dhpd-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.dhpd-cta__phone {
	color: #FFF;
	font-size: 20px;
	font-weight: 600;
	white-space: nowrap;

	transition: color 0.25s ease;
}

.dhpd-cta__phone:hover {
	color: var(--dhpd-sand);
}

/* Фотография фоном справа — приём тот же, что в hero */

.dhpd-cta__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;

	width: 64%;
	overflow: hidden;
	border-radius: 0 24px 24px 0;

	pointer-events: none;
}

/* Кадр шире слота: держим середину — там погрузка и борт фуры.
   Правый край занимает глухой борт, левый уходит под маску,
   поэтому смещение к центру оставляет в кадре сам сюжет. */
.dhpd-cta__photo .dhpd-photo__img {
	object-position: 45% center;
}

.dhpd-cta__photo .dhpd-photo {
	width: 100%;
	height: 100%;

	border-radius: 0;
	background-color: transparent;
}

/* Левый край кадра растворяется в фоне секции. Много промежуточных
   точек — иначе на градиенте виден излом кривой прозрачности.

   Слот здесь шире, чем в hero, поэтому растворение укладываем
   в левую треть: дальше начинается сама фура, гасить её не нужно. */
.dhpd-cta__photo .dhpd-photo__img,
.dhpd-cta__photo .dhpd-photo__stub {
	-webkit-mask-image: linear-gradient(to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.06) 8%,
		rgba(0, 0, 0, 0.18) 16%,
		rgba(0, 0, 0, 0.36) 24%,
		rgba(0, 0, 0, 0.58) 32%,
		rgba(0, 0, 0, 0.78) 40%,
		rgba(0, 0, 0, 0.92) 48%,
		rgba(0, 0, 0, 0.98) 56%,
		#000 64%);
	mask-image: linear-gradient(to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.06) 8%,
		rgba(0, 0, 0, 0.18) 16%,
		rgba(0, 0, 0, 0.36) 24%,
		rgba(0, 0, 0, 0.58) 32%,
		rgba(0, 0, 0, 0.78) 40%,
		rgba(0, 0, 0, 0.92) 48%,
		rgba(0, 0, 0, 0.98) 56%,
		#000 64%);
}

.dhpd-cta:hover .dhpd-cta__photo .dhpd-photo__img {
	transform: scale(1.03);
}

/* ==================================================================
   ПЛАНШЕТЫ
   ================================================================== */

@media (max-width: 1199px) {

	.dhpd-hero {
		padding: 42px 40px;
	}

	.dhpd-hero__photo {
		width: 48%;
	}

	.dhpd-h2 {
		font-size: 32px;
	}

	.dhpd-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.dhpd-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.dhpd-duties {
		grid-template-columns: 1fr;
	}

	.dhpd-section--dark {
		padding: 44px 36px 40px;
	}

	.dhpd-cta__main {
		padding: 44px 40px;
	}

	/* Кадр уже, чтобы текст не наезжал на фотографию */
	.dhpd-cta__photo {
		width: 46%;
	}

	.dhpd-cta__grid {
		max-width: 52%;
	}
}

/* ==================================================================
   МОБИЛЬНЫЕ
   ================================================================== */

@media (max-width: 767px) {

	.dhpd-section {
		padding-block: 44px 4px;
	}

	/* Hero: фотография уходит под текст, маска не нужна */
	.dhpd-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;

		min-height: 0;
		padding: 34px 24px;
	}

	.dhpd-hero__inner {
		max-width: none;
	}

	.dhpd-hero__photo {
		position: static;

		width: 100%;
		aspect-ratio: 900 / 314;
		border-radius: 16px;
	}

	.dhpd-hero__photo .dhpd-photo {
		border-radius: 16px;
	}

	.dhpd-hero__photo .dhpd-photo__img,
	.dhpd-hero__photo .dhpd-photo__stub {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.dhpd-hero__text {
		font-size: 16px;
	}

	.dhpd-hero__marks {
		gap: 8px 18px;
	}

	.dhpd-h2 {
		font-size: 26px;
	}

	.dhpd-head {
		margin-bottom: 28px;
	}

	.dhpd-schemes {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.dhpd-scheme {
		padding: 26px 22px;
	}

	.dhpd-scheme__value {
		font-size: 36px;
	}

	.dhpd-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Условия оплаты: иконка над текстом, кнопка на всю ширину */
	.dhpd-terms {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;

		padding: 24px 22px;
	}

	.dhpd-btn {
		width: 100%;
		justify-content: center;
	}

	.dhpd-section--dark {
		margin-top: 44px;
		padding: 36px 22px 34px;
	}

	/* Схема направления разворачивается по вертикали */
	.dhpd-geo {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 24px 22px;
	}

	.dhpd-geo__arrow {
		width: 2px;
		height: 40px;
		margin: 0 auto;

		background: linear-gradient(to bottom,
			rgba(215, 199, 181, 0.25),
			var(--dhpd-accent));
		display: none;
	}

	.dhpd-geo__arrow::after {
		top: auto;
		right: auto;
		bottom: 0;
		left: 50%;

		transform: translateX(-50%) rotate(135deg);
	}

	.dhpd-geo__to {
		width: 100%;
	}

	.dhpd-tiles {
		gap: 12px;
	}

	.dhpd-tile {
		padding: 20px 18px;
		margin-bottom: 0;
	}

	.dhpd-duty{
		margin-bottom: 0;
	}

	.dhpd-tile__value {
		font-size: 26px;
	}




	/* Узкий экран не делит на две колонки: кадр становится шапкой блока.
	   Порядок обычный (column) — в разметке фото идёт первым, а reverse
	   увёл бы его вниз, где скруглённые углы кадра не совпали бы
	   со скруглением секции. */
	.dhpd-cta {
		display: flex;
		flex-direction: column;

		margin-top: 44px;
	}

	.dhpd-cta__main {
		padding: 30px 24px 34px;
	}

	.dhpd-cta__photo {
		position: static;

		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 0;
	}

	.dhpd-cta__photo .dhpd-photo {
		border-radius: 0;
	}

	/* Свечение оставляем в левом верхнем углу, но под кадром:
	   на узком экране оно иначе легло бы пятном поверх фотографии */
	.dhpd-cta__deco {
		z-index: 0;
	}

	.dhpd-cta__photo .dhpd-photo__img,
	.dhpd-cta__photo .dhpd-photo__stub {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.dhpd-cta__grid {
		max-width: none;
	}

	.dhpd-cta__title {
		font-size: 24px;
	}

	.dhpd-cta__actions {
		gap: 14px;
	}

	.dhpd-cta__phone {
		font-size: 18px;
	}
}

@media (max-width: 480px) {

	.dhpd-tiles {
		grid-template-columns: 1fr;
	}

	.dhpd-hero__marks {
		flex-direction: column;
	}
}

/* ==================================================================
   ДОСТУПНОСТЬ

   Отключаем движение, если система просит покоя. Появление блоков
   при этом остаётся: важно, чтобы контент был виден, а не анимирован.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {

	.dhpd-js .dhpd-reveal,
	.dhpd-js .dhpd-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.dhpd-photo__img,
	.dhpd-btn,
	.dhpd-btn__arrow,
	.dhpd-scheme,
	.dhpd-card,
	.dhpd-tile,
	.dhpd-geo__cities li,
	.dhpd-geo__to,
	.dhpd-hero__badge,
	.dhpd-scheme:hover,
	.dhpd-card:hover,
	.dhpd-tile:hover,
	.dhpd-btn:hover,
	.dhpd-geo__cities li:hover,
	.dhpd-geo__to:hover,
	.dhpd-hero:hover .dhpd-hero__badge {
		transform: none;
	}

	.dhpd-card:hover .dhpd-photo__img,
	.dhpd-hero:hover .dhpd-hero__photo .dhpd-photo__img,
	.dhpd-cta:hover .dhpd-cta__photo .dhpd-photo__img {
		transform: none;
	}

}

.dhpd-duty__icon svg{
	width: 24px;
	height: 24px;
}

/* Legal documents and privacy controls — 2026-08-20 */
.dh-legal {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 0 64px;
  color: #252525;
  font-size: 16px;
  line-height: 1.65;
}
.dh-legal__header { margin-bottom: 36px; }
.dh-legal__eyebrow { margin: 0; color: #b65d3d; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dh-legal__updated { margin: 0; color: #777; font-size: 14px; }
.dh-legal section { margin-top: 34px; }
.dh-legal h2 { margin: 0 0 14px; font-size: 25px; line-height: 1.25; }
.dh-legal h3 { margin: 22px 0 8px; font-size: 18px; }
.dh-legal p { margin: 0 0 13px; }
.dh-legal a { color: #a94e30; text-decoration: underline; text-underline-offset: 2px; }
.dh-legal__contact { margin-top: 42px !important; padding: 22px 24px; border-left: 3px solid #b65d3d; background: #f7f4f1; }
.dh-legal-table-wrap { overflow-x: auto; border: 1px solid #e4ded8; border-radius: 8px; }
.dh-legal-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.dh-legal-table th,
.dh-legal-table td { padding: 14px 16px; border-bottom: 1px solid #e4ded8; text-align: left; vertical-align: top; }
.dh-legal-table th { background: #f7f4f1; font-weight: 700; }
.dh-legal-table tr:last-child td { border-bottom: 0; }
.dh-legal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.dh-legal-list a { display: flex; min-height: 118px; flex-direction: column; justify-content: center; padding: 20px 22px; border: 1px solid #e4ded8; border-radius: 8px; color: #252525; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.dh-legal-list a:hover { border-color: #b65d3d; transform: translateY(-2px); }
.dh-legal-list strong { margin-bottom: 6px; font-size: 17px; }
.dh-legal-list span { color: #707070; font-size: 14px; line-height: 1.45; }
.dh-requisites { display: grid; grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr); margin: 0; border-top: 1px solid #e4ded8; }
.dh-requisites dt,
.dh-requisites dd { margin: 0; padding: 14px 16px; border-bottom: 1px solid #e4ded8; }
.dh-requisites dt { color: #666; background: #f7f4f1; font-weight: 600; }
.dh-footer-legal { width: 100%; margin-top: 14px; font-size: 14px; line-height: 1.5; }
.dh-footer-legal__links { display: flex; flex-wrap: wrap; gap: 5px 15px; }
.dh-footer-legal__company { margin: 8px 0 0; color: rgba(255,255,255,.58); }
.footer .bottom-menu .item-link__sublink,
.footer a[href^="tel:"],
.footer a[href^="mailto:"],
.footer .dh-footer-legal a {
  color: rgba(255,255,255,.62);
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color .25s ease;
}
.footer .phones__dropdown a{
	color: var(--white_text_black);
}

.footer .bottom-menu .item-link__sublink:hover,
.footer a[href^="tel:"]:hover,
.footer a[href^="mailto:"]:hover,
.footer .dh-footer-legal a:hover { 
	color: #fff; 
}

.footer .phones__dropdown a:hover{
	color: #b85c38;
}

.dh-cookie { position: fixed; z-index: 10050; right: 22px; bottom: 22px; left: 22px; max-width: 980px; margin: 0 auto; opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease; }
.dh-cookie.is-visible { opacity: 1; transform: translateY(0); }
.dh-cookie__body { display: flex; align-items: center; gap: 24px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: #282725; box-shadow: 0 16px 46px rgba(0,0,0,.28); color: #fff; }
.dh-cookie__copy { flex: 1 1 auto; }
.dh-cookie__copy strong { display: block; margin-bottom: 5px; font-size: 17px; }
.dh-cookie__copy p { margin: 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.5; }
.dh-cookie__copy a { color: #fff; text-decoration: underline; }
.dh-cookie__actions { display: flex; flex: 0 0 auto; gap: 9px; }
.dh-cookie__actions .btn { white-space: nowrap; }
@media (max-width: 767px) {
  .dh-legal { padding-bottom: 42px; font-size: 15px; }
  .dh-legal-list { grid-template-columns: 1fr; }
  .dh-requisites { grid-template-columns: 1fr; }
  .dh-requisites dt { padding-bottom: 5px; border-bottom: 0; }
  .dh-requisites dd { padding-top: 5px; }
  .dh-cookie { right: 10px; bottom: 10px; left: 10px; }
  .dh-cookie__body { align-items: stretch; flex-direction: column; gap: 14px; padding: 17px; }
  .dh-cookie__actions { flex-direction: column; }
  .dh-cookie__actions .btn { width: 100%; }
}

.page-company-brands .partner-detail__card{
	background-color: #fff;
	box-shadow: 0px 6px 20px 0 rgb(0 0 0 / 4%);
	border: none;
}

/* Изображения товаров заполняют квадрат карточки; лишнее по краям
   обрезается симметрично, без белых полос сверху и снизу. 
.catalog-block__item .section-gallery-wrapper__item img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;

	object-fit: cover;
	object-position: center;
}*/
/* Разработчики */
#developer{
    transition: all 0.4s ease;
    text-decoration: unset;
    font-size: 16px;
}

.val-razrab{
    display: flex;
    align-items: center;
    flex-direction: row;
}

.developer__logo {
    max-height: 40px;
    max-width: 90px;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.developer__title {
    margin: 0 15px 0 0;
    font-size: 0.8em;
    line-height: 1.7;
}

#developer .svg-inline-developer_logo{
    opacity:.5;
    transition: all 0.4s ease;
}

#developer:hover .svg-inline-developer_logo {
    opacity: 1;
}

a.developer:hover .developer__logo{
    filter: none;
}

.developer__title{
    font-size: 14px;
}

.developer__logo svg {
    max-height: 40px;
    max-width: 90px;
}

.developer__logo svg path {
    fill: revert-layer !important;
}
/* Разработчики */

.contacts-detail__social .social__items{
	background-color: #f8f9fa !important;
}

/**/

.bottom-icons-panel__content {
	justify-content: space-around !important;
}

.bottom-icons-panel .bottom-icons-panel__content-link {
	text-decoration-line: unset !important;
}

.bottom-icons-panel__content-link {
	min-width: unset;
}

.bottom-icons-panel__content-text {
	font-size: 13px;
}

.SERVICES .index-block__preview {
	margin-bottom: 30px;
}

.footer__main-part-contact {
	max-width: unset;
}

.status-icon.instock{
	display: none;
}

.catalog-block__info-top .status-icon,
.catalog-detail__info-tech .status-icon{
	margin-right: 16px;
}

.catalog-block__info-top .line-block,
.catalog-detail__info-tech .line-block{
	column-gap:0;
}

.panel-collapse .accordion-body {
	background-color: #fff;
	border-radius: 0 0 14px 14px;
}






















/* 1600 Мобилки начало */
@media screen and (max-width: 1600px) {
	.header .header__top-part{
		padding: 0 30px;
	}

	.tizers-list__item-image-picture{
		height: 12vw;
	}

	.reviews__title{
		flex-wrap: wrap;
	}
}
 /* -- 1600 -- Мобилки конец */



 /* 1500 Мобилки начало */
@media screen and (max-width: 1500px) {
	.tizers-list__item-name {
		font-size: 1.0rem;
	}
}
 /* -- 1500 -- Мобилки конец */



 /* 1400 Мобилки начало */
@media screen and (max-width: 1400px) {
	.hero-fx__image,
	.main-slider .main-slider__item, 
	.banners-big__item{
		/* background-size: contain; */
		background-position: top right;
	}

	.reviews.dhr-section{
		padding-bottom: 60px;
	}

	.FAQS .faq-list{
		padding-top: 60px;
	}

	.catalog-block__item .catalog-block__info-title	span{
		line-height: 140%;
		display: inline-block;
	}
}
 /* -- 1400 -- Мобилки конец */



 /* 1300 Мобилки начало */
@media screen and (max-width: 1300px) {
	.banners-big__title {
		font-size: 24px;
	}

	.banners-big__text-block, .banners-big__top-text {
		font-size: 14px;
	}

	.banners-big__buttons{
		margin-top: 16px;
	}

	.banners-big__buttons-item .btn-default,
	.banners-big__buttons-item .btn-transparent{
		font-size: 14px;
		padding: 12px 16px;
	}

	.banners-big__buttons-item .btn.btn-default{
		background-color: #d87149;
		border-color: #d87149;
	}

	.banners-big__text{
		max-width: 400px;
		padding: 8px 26px 23px;
	}

	.banners-big__inner {
		align-items: unset;
		top: 28%;
		position: relative;
	}

	.glass-card{
		max-width: unset;
	}

	.glass-card__text{
		font-size: 14px;
	}

	.glass-card__value, 
	.glass-card__title{
		font-size: 1.0rem;
	}

	.stats-section{
		bottom: 30px;
	}

	.glass-card{
		padding: 10px 12px;
	}

	.reviews__yandex-rating{
		font-size: 30px;
	}

	.reviews__ratings{
		flex-direction: column;
	}
}
 /* -- 1300 -- Мобилки конец */


 /* 1200 Мобилки начало */
@media screen and (max-width: 1200px) {
	.hero-fx__image,
	.main-slider .main-slider__item, 
	.banners-big__item{
		background-position: right 10% center;
	}

	.BRANDS .brands-list{
		padding: 60px 0;
	}

	.reviews__left{
		padding: 20px 26px;
	}

	.reviews__advantages{
		margin: 0 -26px 38px;
		padding: 0 26px;
	}

	.card-image-rounded_images {
		width: 180px;
		height: 180px;
	}

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

	.dhco-final__title{
		font-size: 30px;
	}

	.dh-docs-grid {
		grid-template-columns: 1fr;
	}

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

	.dhd-requisites {
		grid-template-columns: 1fr;
	}
}
 /* -- 1200 -- Мобилки конец */



 /* 991 Мобилки начало */
@media screen and (max-width: 991px) {
	.hero-fx__image, .main-slider .main-slider__item, .banners-big__item {
		background-position: right 18% center;
	}

	.banners-big__inner {
		top: 12%;
	}

	.banners-big__text {
		width: 55%;
	}

	.rv-marquee-section {
		margin: 30px 0 0;
	}

	.index-block--padding-top-80 > div {
		padding-top: 50px;
	}

	.tizers-list__item-image-picture {
		height: 18vw;
	}

	.dhw__actions {
		margin: 28px 0 40px;
	}

	.PROJECTS .project-list{
		padding-top: 60px;
	}

	.FAQS .faq-list{
		padding-bottom: 50px;
	}

	.BLOG .items-list{
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.page-product .sections-block .line-block{
		flex-direction: column;
	}

	.card-image-rounded_images {
		width: 224px;
		height: 224px;
	}

	.dhco-final__title{
		font-size: clamp(34px, 3.5vw, 46px);
	}

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

	.dhd-buyer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
 /* -- 991 -- Мобилки конец */


 /* 768 Мобилки начало */
@media screen and (max-width: 768px) {
	.banners-big--adaptive-2 .banners-big__item .maxwidth-theme{
		height: 450px;
		background-position: center right;
	}

	.banners-big__title span {
		color: #22252a;
	}

	.banners-big__buttons-item .btn.btn-default {
		background-color: #b85c38;
		border-color: #b85c38;
	}

	.banners-big__buttons-item .btn-transparent{
		border: 1px solid #b85c38;
		color: #b85c38 !important;
	}

	.banners-big__buttons-item .btn.btn-transparent:is(:hover, :active, :focus){
		color: #fff !important;
		background-color: #b85c38;
	}

	.banners-big--adaptive-2 .banners-big__text-block{
		line-height: 140%;
	}
	
	.banners-big__buttons {
		margin-bottom: 20px;
	}	
	
	.index-block--padding-bottom-130 > div {
		padding-bottom: 70px;
	}

	.CUSTOM_TEXT .index-block{
		padding-bottom: 40px;
	}

	.TIZERS .tizers-list{
		padding-top: 70px;
	}

	.tizers-list__item-name {
		line-height: 130%;
		display: inline-block;
	}

	.tizers-list__item-descr {
		line-height: 140%;
	}

	.reviews__ratings {
		gap: 8px;
	}

	.reviews__left {
		padding: 50px 20px 0;
		margin: 0 -20px;
	}

	.form-fon{
		background-position: center right 33%;
	}

	.dhco-process__item,
	.dhco-benefit {
		min-height: unset;
	}

	.dhco-process__item p{
		margin: 0;
	}

	.dh-docs-grid {
		grid-template-columns: 1fr;
	}

	.dhd-buyer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.dhd-buyer-card {
		min-height: unset;
	}

	.dhd-buyer-card__link{
		padding-top: 12px;
	}
}
 /* -- 768 -- Мобилки конец */



 /* 600 Мобилки начало */
@media screen and (max-width: 600px) {
	.banners-big--adaptive-2 .banners-big__item .maxwidth-theme {
		background-position: center right 20%;
	}

	.index-block__preview{
		font-size: 16px;
	}

	.tizers-list__item-image-picture {
		height: 120px;
	}

	.tizers-list__item-image-wrapper--ICONS {
		background-color: #f8f8f8;
	}

	.accordion-head{
		padding: 14px 22px;
	}

	.panel-collapse .accordion-body {
		padding: 0px 22px 16px;
	}

	.accordion{
		gap: 8px;
	}

	.card-image-rounded_images {
		width: 100%;
		max-width: unset;
	}

	.page-product .card-image {
		border-radius: 12px;
		background-position: top;
	}

	.brands-grid__grid {
		grid-template-columns: 1fr;
	}

	.dhpd-hero__photo {
		height: 190px;
	}

	.dhd-buyer-grid {
		grid-template-columns: 1fr;
	}
}
 /* -- 600 -- Мобилки конец */


 
 /* 450 Мобилки начало */
@media screen and (max-width: 450px) {
	.banners-big--adaptive-2 .banners-big__item .maxwidth-theme {
		height: 500px;
		background-position: center right 33%;
	}

	.SERVICES .services-list{
		padding-top: 60px;
	}

	.form-fon{
		background-position: center right 40%;
	}

	.dha-expertise__directions {
		grid-template-columns: 1fr;
	}
}
 /* -- 450 -- Мобилки конец */