/* === style.css (Шаг 2: Глобальные стили) === */

/* 1. ПОДКЛЮЧЕНИЕ ШРИФТОВ */
@font-face {
	font-family: 'Bahnschrift'; /* Мы даем имя этому шрифту для использования в CSS */
	src: url('../fonts/Bahnschrift.ttf') format('truetype'); /* Путь к твоему единственному файлу шрифта */
	/* Мы не указываем конкретный font-weight здесь, чтобы браузер пытался использовать этот файл для разных запрашиваемых жирностей.
	   Если бы у нас были отдельные файлы для Regular, Bold, Light, мы бы создали несколько блоков @font-face,
	   каждый со своим src и своим font-weight. */
	font-weight: 100 900; /* Попытка указать, что шрифт может поддерживать диапазон жирностей (характерно для вариативных шрифтов) */
	/* Если это не вариативный шрифт, браузер скорее всего привяжет его к normal/400 */
	font-style: normal;
}

/*
   ВАЖНО ПО ШРИФТАМ (повторение):
   С одним файлом Bahnschrift.ttf:
   - Если он вариативный и поддерживает жирности 300, 400, 700 - отлично!
   - Если он НЕ вариативный и содержит только одно стандартное начертание (например, Regular/400):
     * font-weight: 700 (bold) будет "синтезироваться" браузером (faux bold).
     * font-weight: 300 (light) скорее всего, отобразится как normal (400).
     * font-weight: 400 (normal) отобразится корректно.
   Для наилучшего качества отображения всех начертаний нужны либо отдельные файлы для каждой жирности,
   либо подтвержденный вариативный шрифт.
*/


/* 2. ГЛОБАЛЬНЫЕ СТИЛИ И ПЕРЕМЕННЫЕ */
:root {
	/* Цвета */
	--color-primary-orange: #FB7119;
	--color-background-page: #F4F4F4;
	--color-background-block: #FFFFFF; /* Для фона большинства блоков контента */
	--color-text-dark: #333333; /* Основной темный цвет текста */
	--color-text-light: #FFFFFF; /* Для текста на темных/цветных фонах (например, на кнопках) */
	--color-text-secondary: #868686; /* Для второстепенного серого текста, плейсхолдеров */
	--color-border-light: #CECECE; /* Светлая граница (например, для полей формы) */
	--color-border-medium: #B2B2B2; /* Более заметная серая граница (для разделителей) */
	--color-telegram: #19B7FB; /* Цвет кнопки Телеграм */
	--color-whatsapp: #00BC38; /* Цвет кнопки WhatsApp */

	/* Шрифты */
	--font-main: 'Bahnschrift', Arial, sans-serif; /* Bahnschrift основной, Arial и sans-serif как запасные */

	/* Отступы и единицы */
	--spacing-unit: 8px; /* Базовая единица для отступов (8px, 16px, 24px и т.д.) */
	--container-max-width: 1280px; /* Максимальная ширина контентной части */
	--container-padding-desktop: 20px; /* Боковые отступы контейнера на десктопе */
	--container-padding-mobile: 15px; /* Боковые отступы контейнера на мобильных */
}

/* Глобальный box-sizing для более предсказуемой модели блоков */
html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	font-family: var(--font-main);
	font-size: 16px; /* Базовый размер шрифта для обычного текста */
	line-height: 1.5; /* Базовая межстрочная высота */
	color: var(--color-text-dark);
	background-color: var(--color-background-page);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased; /* Улучшение отображения шрифтов в Chrome/Safari */
	-moz-osx-font-smoothing: grayscale; /* Улучшение отображения шрифтов в Firefox */

	position: relative; /* Необходимо для абсолютно позиционированных дочерних элементов (как фон) */
}

img {
	max-width: 100%;
	height: auto;
	display: block; /* Убирает лишние отступы под изображениями, если они inline */
}

a {
	color: var(--color-primary-orange);
	text-decoration: none;
}

a:hover {
	text-decoration: underline; /* Или другой эффект при наведении */
}

a.nav-link:focus {
	color: var(--color-text-dark)!important;
}

.nowrap {
	white-space: nowrap;
}

.css-chevron-arrow {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-style: solid;
	/* border-color будет задаваться ниже для конкретного контекста */
	border-width: 0 2px 2px 0; /* Толщина линий шеврона */
	padding: 0;
	transform: rotate(45deg); /* Изначально направлена вниз */
	transition: transform 0.2s ease, border-color 0.2s ease;
	vertical-align: middle; /* Для выравнивания с текстом */
	margin-left: 7px; /* Отступ от текста ссылки */
	margin-top:-10px;
}

/* Общий контейнер для ограничения ширины контента */
.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding-desktop);
	padding-right: var(--container-padding-desktop);
}

/* Стили для верхнего фонового изображения */
.page-background-lines-top {
	position: absolute;
	top: 0;
	left: 0; /* От левого края */
	width: 100%; /* На всю ширину окна/родителя */
	height: 746px; /* Твоя фиксированная высота */
	background-image: url('../img/bg-lines.png');
	background-repeat: no-repeat;
	background-position: top center; /* Центрируем фон */
	background-size: cover; /* Масштабируем, чтобы покрыть, сохраняя пропорции. Часть может обрезаться. */
	z-index: 0;
	pointer-events: none;
}

/* Обертка для всего видимого контента страницы, чтобы он был поверх фонов */
.wrapper {
	position: relative;
	z-index: 1; /* Выше, чем .page-background-lines-top */
	overflow-x: hidden; /* Предотвращает горизонтальный скролл, если какой-то элемент случайно вылезет */
}

/* Общие стили для кнопок */
.btn {
	display: inline-block;
	padding: 15px 30px; /* Примерные внутренние отступы, можно будет уточнить для каждой кнопки */
	font-family: var(--font-main);
	font-weight: 700; /* Кнопки обычно с жирным текстом */
	font-size: 20px;
	line-height: 1.2; /* Относительная высота строки (24px для 20px шрифта) */
	color: var(--color-text-light);
	background-color: var(--color-primary-orange);
	border: none;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

a.btn:hover {
	background-color: #e0600A; /* Немного темнее при наведении, можно вынести в переменную --color-primary-orange-hover */
	text-decoration: none;
	color: #ffffff;
}

a.btn-primary {
	background-color: var(--color-primary-orange);
}

.btn:active {
	transform: scale(0.98); /* Небольшой эффект "нажатия" */
}

/* Базовые стили для заголовков (можно будет уточнять размеры и отступы для каждого уровня) */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 2.5); /* Пример отступа снизу (20px) */
	font-weight: 700; /* Заголовки по умолчанию жирные */
	line-height: 1.2; /* Базовая высота строки для заголовков */
}

/* --- КОНЕЦ ГЛОБАЛЬНЫХ СТИЛЕЙ --- */

/* === HEADER STYLES (Полная версия CSS, кликабельный телефон) === */

/* --- Стили для самого блока Header --- */
.header {
	position: relative;
	z-index: 100;
}

/* --- Основной Grid-контейнер шапки (наш .container) --- */
.header-grid-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	column-gap: calc(var(--spacing-unit) * 2); /* 32px */
	align-items: stretch;
	padding-top: calc(var(--spacing-unit) * 3.75); /* 30px */
	padding-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
}

/* 1. ЛОГОТИП */
.header-logo-link {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	height: 80px;
	align-self: start;
	display: block;
}

.header-logo-img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ПРАВЫЙ БЛОК, СОДЕРЖАЩИЙ ВЕРХНИЙ РЯД И НАВИГАЦИЮ */
.header-right-content-area {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* width: 857px; */
	min-height: 80px;
}

/* Верхний ряд на ДЕСКТОПЕ: Телефон, Почта, Десктопный Переключатель */
.header-top-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

/* Группа: Телефон и Соцсети */
.header-phone-socials-group {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 1); /* 20px */
}

/* Общий класс для блоков [иконка + текст/ссылка] в контактах */
/* Если сам .header-contact-item является ссылкой, эти стили применятся к нему */
.header-contact-item {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 1); /* 8px */
	text-decoration: none; /* Убираем подчеркивание, если это ссылка */
	color: var(--color-text-dark); /* Базовый цвет текста для ссылки-контейнера */
}

.header-contact-item:hover { /* Общий ховер для кликабельных блоков контактов */
	opacity: 0.8;
	text-decoration: none;
}

/* Иконки внутри .header-contact-item */
.header-contact-item .header-contact-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.header-contact-item.header-phone .header-contact-icon { /* Иконка телефона */
	width: 30px;
	height: 30px;
}

/* Ссылка-контейнер для блока телефона */
.header-contact-item.header-phone {
	/* display: flex; align-items: center; gap: ...; уже есть от .header-contact-item */
}

/* Текст номера телефона внутри ссылки-контейнера */
.header-contact-item.header-phone .phone-number-text {
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text-dark); /* Цвет текста номера */
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Ссылка-контейнер для блока почты */
.header-contact-item.header-email {
	/* display: flex; align-items: center; gap: ...; уже есть */
}

/* Текст email внутри ссылки-контейнера (если почта тоже будет вся кликабельная) */
/* Если только текст является ссылкой, а .header-contact-item.header-email - это div, то стили для a внутри него */
.header-contact-item.header-email a { /* Предполагаем, что текст почты - это вложенная ссылка */
	color: var(--color-primary-orange);
	font-weight: 400;
	font-size: 16px;
	text-decoration: none;
}

.header-contact-item.header-email a:hover {
	opacity: 0.8; /* или другое поведение ховера */
}


/* Иконки соцсетей */
.header-socials {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 1); /* 12px */
}

.header-social-link img {
	width: 27px;
	height: 27px;
	display: block;
	transition: transform 0.2s ease;
}

.header-social-link:hover img {
	transform: scale(1.1);
}
.header-lang-switcher {
	/* display: none !important; */
}

.header-partners-link {
	display: flex;
	gap: 5px;
}


.btn-small {
	width: 140px;
	height: 31px;
	padding: 3px;
	font-size: 11px;
	line-height: 12px;
	border-radius: 5px;
}

.btn-orange {
	background-color: #FB7119;
}

.btn-dark {
	background-color: #333333;
}



/* Десктопный переключатель языка */
.header-lang-switcher.desktop-lang-switcher {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 0.75); /* 6px */
}

.desktop-lang-switcher .lang-switcher-item {
	font-family: var(--font-main);
	font-size: 16px;
	line-height: 1;
	color: var(--color-text-dark);
	cursor: pointer;
}

.desktop-lang-switcher .lang-switcher-item:hover {
	color: var(--color-primary-orange);
}

.desktop-lang-switcher .lang-switcher-item.lang-text-eng {
	color: var(--color-primary-orange);
	text-decoration: none;
}

.lang-switcher-interactive-toggle {
	display: block;
	width: 39px;
	height: 23px;
	background-color: var(--color-primary-orange);
	border-radius: 50px;
	padding: 2px;
	cursor: pointer;
	box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.12);
	position: relative;
	flex-shrink: 0;
}

.lang-switcher-interactive-knob {
	display: block;
	width: 19px;
	height: 19px;
	background-color: var(--color-background-block);
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: left 0.25s ease-in-out;
}

.lang-switcher-interactive-toggle.lang-eng-active .lang-switcher-interactive-knob {
	left: calc(100% - 19px - 2px);
}

/* Мобильный переключатель языка (изначально скрыт) */
.header-lang-switcher.mobile-lang-switcher {
	display: none;
}


/* --- Навигация (десктопная) --- */
.header-navigation {
	width: 100%;
}

.nav-list {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	position: relative;
}

.nav-link {
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-text-dark);
	text-decoration: none;
	display: block;
}

.nav-link:hover, .nav-link.active {
	color: var(--color-primary-orange);
	text-decoration: none;
}

.dropdown-arrow {
	font-size: 0.6em;
	margin-left: calc(var(--spacing-unit) * 0.5);
	display: inline-block;
	transition: transform 0.2s ease;
	vertical-align: middle;
}

.dropdown-arrow-in-menu {
	font-size: 1em;
	color: var(--color-primary-orange);
}

/* Выпадающее меню */
.dropdown-menu {
	display: none;
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: var(--color-background-block);
	border-radius: 20px;
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.11);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 190px;
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.nav-item.has-dropdown:hover > .dropdown-menu,
.nav-item.has-dropdown:focus-within > .dropdown-menu {
	display: block;
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.nav-item.has-dropdown:hover .nav-link .dropdown-arrow {
	/*transform: rotate(180deg);*/
}

.dropdown-menu li a {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text-dark);
	padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
	display: block;
	white-space: nowrap;
	text-decoration: none;
	text-align: left;
	line-height: 1.2;
}

.dropdown-menu li.dropdown-parent-link-item > a {
	color: var(--color-primary-orange);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dropdown-menu li:not(.dropdown-parent-link-item) a:hover {
	color: var(--color-primary-orange);
}


/* === HEADER ADAPTIVE STYLES === */

/* --- Стили для бургер-кнопки --- */
.header-burger-btn {
	display: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 110;
	width: 37px;
	height: 31px;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.header-burger-btn span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-primary-orange);
	border-radius: 2px;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Уточнил transition */
	transform-origin: center; /* Явно задаем точку трансформации */
}

.header-burger-btn span:nth-child(1) {
	transform: translateY(0) rotate(0); /* Исходное состояние */
}

.header-burger-btn span:nth-child(2) {
	opacity: 1; /* Исходное состояние */
}

.header-burger-btn span:nth-child(3) {
	transform: translateY(0) rotate(0); /* Исходное состояние */
}

/* Стили для "крестика", когда меню открыто */
.header-burger-btn.active span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

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

.header-burger-btn.active span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

.header-burger-btn.active span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

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

.header-burger-btn.active span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}


/* === TABLET STYLES ( <= 1240px ) === */
@media (max-width: 1240px) {
	.header-contact-item.header-phone .phone-number-text {
		font-size: 24px;
	}
}
/* === TABLET STYLES ( <= 1144px ) === */
@media (max-width: 1144px) {
	.header-partners-link {
		flex-direction: column;
	}
	.header-right-content-area {
		gap: 20px 0;
	}
}
/* === TABLET STYLES ( <= 1024px ) === */
@media (max-width: 1024px) {
	.header-socials {
		flex-direction: column;
	}
	.header-contact-item.header-phone .phone-number-text {
        font-size: 20px;
    }
	.header-partners-link a.btn-small {
		width: auto;
		padding: 3px 10px;
	}
}
/* === TABLET STYLES ( <= 900px ) === */
@media (max-width: 900px) {
	.header-socials {
		display: none;
	}
	.header-contact-item.header-phone .phone-number-text {
        font-size: 16px;
    }
	.header-grid-layout {
		grid-template-columns: 180px 1fr;
	}
	.header-logo-link {
		height: auto;
		align-self: center;
	}
}
/* === TABLET STYLES ( <= 768px ) === */
@media (max-width: 768px) {
	.header-grid-layout {
		grid-template-columns: auto auto 1fr;
		column-gap: calc(var(--spacing-unit) * 4);
		align-items: center;
		padding-top: calc(var(--spacing-unit) * 3);
		padding-bottom: calc(var(--spacing-unit) * 3);
	}

	.header-burger-btn {
		display: flex;
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}

	.header-logo-link {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		height: auto;
		align-self: center;
	}

	.header-logo-img {
		width: 160px;
		height: auto;
		display: block;
	}

	.header-right-content-area {
		grid-column: 3 / 4;
		grid-row: 1 / 2;
		width: auto;
		min-height: 0;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end; /* Прижимаем все к правому краю */
		gap: calc(var(--spacing-unit) * 10); /* Отступ между [Тел+Соц] и [Мобильным языком] */
	}

	.header-top-info-row {
		display: contents;
	}

	.header-phone-socials-group {
		gap: calc(var(--spacing-unit) * 1.5);
	}

	.header-partners-link {
		display: none;
	}

	.header-contact-item.header-phone .phone-number-text {
		font-size: 18px;
	}

	/* Текст номера на планшете */
	.header-contact-item.header-phone .header-contact-icon {
		width: 22px;
		height: 22px;
	}

	.header-social-link img {
		width: 24px;
		height: 24px;
	}

	.header-contact-item.header-email {
		display: none;
	}

	.header-lang-switcher.desktop-lang-switcher {
		display: none;
	}

	.header-lang-switcher.mobile-lang-switcher {
		display: flex;
		align-items: center;
		cursor: pointer;
		position: relative;
		/* margin-left: auto; /* Убрали, т.к. родитель justify-content: flex-end */
	}

	.mobile-lang-dropdown {
		display: none; /* Изначально скрыт */
		position: absolute;
		top: calc(100% + 5px); /* Появляется под элементом "Rus ▼" */
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--color-background-block);
		border: 1px solid #eee;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		list-style: none;
		margin: 0;
		padding: var(--spacing-unit) 0; /* 8px сверху/снизу, 0 по бокам (ссылки будут иметь паддинг) */
		min-width: 120px; /* Минимальная ширина списка */
		z-index: 1010; /* Выше других элементов шапки/меню */
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%) translateY(10px); /* Для анимации появления */
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.mobile-lang-dropdown.active-dropdown { /* Класс для показа и анимации */
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
		transition-delay: 0s;
	}

	.header-lang-switcher.mobile-lang-switcher .mobile-lang-arrow {
		transition: transform 0.3s ease; /* Добавляем transition для плавной анимации */
	}

	.header-lang-switcher.mobile-lang-switcher .mobile-lang-arrow.open-arrow { /* Класс для поворота стрелки */
		transform: rotate(225deg); /* Стрелка вверх */
	}

	.header-lang-switcher.mobile-lang-switcher.open .mobile-lang-dropdown { /* Класс .open будет добавляться JS */
		display: block;
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}

	/* Анимация стрелки в мобильном переключателе при открытии */
	.header-lang-switcher.mobile-lang-switcher.open .mobile-lang-arrow {
		transform: rotate(225deg); /* Стрелка вверх */
	}


	.mobile-lang-dropdown li a.lang-dropdown-link {
		display: block;
		padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2); /* 8px 16px */
		font-size: 15px;
		color: var(--color-text-dark);
		text-decoration: none;
		white-space: nowrap;
	}

	.mobile-lang-dropdown li a.lang-dropdown-link:hover {
		background-color: #f5f5f5;
		color: var(--color-primary-orange);
	}

	.mobile-lang-dropdown li a.lang-dropdown-link.current-lang {
		font-weight: 700;
		color: var(--color-primary-orange); /* Выделяем текущий язык */
		/* pointer-events: none; /* Делаем некликабельной ссылку на текущий язык */
		/* cursor: default; */
	}

	.mobile-lang-switcher .lang-text-rus {
		font-family: var(--font-main);
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		color: var(--color-primary-orange);
		padding-bottom: 2px;
		border-bottom: 1px dotted var(--color-primary-orange);
		margin-right: calc(var(--spacing-unit) * 0.75);
	}

	.mobile-lang-switcher .mobile-lang-arrow {
		display: inline-block;
		width: 7px;
		height: 7px;
		border: solid var(--color-primary-orange);
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
		margin-top: -2px;
	}

	.header-navigation {
		display: none;
	}
}

/* === MOBILE STYLES ( <= 480px ) === */
@media (max-width: 480px) {
	.header-grid-layout {
		grid-template-columns: auto auto 1fr;
		column-gap: calc(var(--spacing-unit) * 4.5);
		padding-top: calc(var(--spacing-unit) * 2.5);
		padding-bottom: calc(var(--spacing-unit) * 2.5);
		padding-left: var(--container-padding-mobile);
		padding-right: var(--container-padding-mobile);
	}

	.header-burger-btn span {
		height: 3px;
	}

	.header-burger-btn.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.header-burger-btn.active span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}

	.header-logo-img {
		width: 120px;
		height: auto;
	}

	.header-right-content-area {
		justify-content: space-between; /* <<<< ИЗМЕНЕНИЕ: Теперь Бургер, Лого, Телефон, Язык будут распределены */
		/* Это если мы изменим grid-template-columns для .header-grid-layout */
		/* Оставляем flex-end, если дети .header-right-content-area это телефон и язык */
		justify-content: flex-end; /* Телефон и язык прижаты вправо */
		gap: calc(var(--spacing-unit) * 4.5);
	}

	/* Если нужно распределить Бургер, Лого, Тел, Язык */
	/* .header-grid-layout { grid-template-columns: auto auto auto auto; justify-content: space-between; } */
	/* .header-right-content-area { display: contents; } */
	/* .header-phone-socials-group { grid-column: 3/4; /* и т.д. для других */
	.header-contact-item.header-phone { /* Весь блок телефона-ссылки */
		gap: 0; /* Убираем gap, т.к. текста нет */
	}

	.header-contact-item.header-phone .phone-number-text {
		display: none;
	}

	.header-contact-item.header-phone .header-contact-icon {
		display: inline-block;
		width: 28px;
		height: 28px;
		margin: 0;
	}

	.header-socials {
		display: none;
	}

	.mobile-lang-switcher .lang-text-rus {
		font-size: 14px;
	}

	.mobile-lang-switcher .mobile-lang-arrow {
		width: 6px;
		height: 6px;
		border-width: 0 1.5px 1.5px 0;
		margin-top: -1px;
	}

	.btn-small {
		width: 270px;
		padding-top: 10px;
	}
}

/* Стили для мобильного меню (пока заглушка) */
.mobile-nav-menu {
	display: none;
}

.mobile-nav-menu.active {
	display: block;
}

/* === КОНЕЦ HEADER STYLES === */

/* === HERO SLIDER STYLES (Версия с учетом новых требований к адаптации) === */
.hero-slider {
	padding-top: calc(var(--spacing-unit) * 3);
	padding-bottom: calc(var(--spacing-unit) * 3);
	position: relative;
}

.slider-wrapper {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
}

.slider-track {
	overflow: hidden;
	border-radius: 45px;
	box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.11);
	position: relative;
}

.slide {
	/* background-image будет задан инлайново в HTML */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	min-height: 464px;
	box-sizing: border-box;
	display: none;
	position: relative;
}

.slide.active {
	display: block;
	animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0.7;
	}
	to {
		opacity: 1;
	}
}

.slide-content-positioner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--spacing-unit) * 4); /* ~32px */
	padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 7); /* ~40px 56px */
	min-height: inherit;
	box-sizing: border-box;
}

.slide-image-part {
	flex: 0 0 40%;
	max-width: 455px;
	flex-shrink: 0;
}

.slide-image-part img {
	display: block;
	max-width: 100%;
	height: auto;
}

.slide-text-part {
	flex: 1 1 55%;
	max-width: 700px;
}

.slide-title {
	color: var(--color-text-light);
	font-family: var(--font-main);
	font-size: 56px;
	font-weight: 700;
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: 0;
	margin-top: 0;
}

.slide-subtitle {
	color: var(--color-text-dark);
	font-family: var(--font-main);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 3);
}

.slide-subtitle .subtitle-highlight {
	color: var(--color-text-light);
}

.slide-features-list {
	list-style: none;
	padding: 0;
	margin: 0 0 calc(var(--spacing-unit) * 3.5) 0;
}

.slide-features-list li {
	font-family: var(--font-main);
	font-size: 24px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.4;
	margin-bottom: var(--spacing-unit); /* << УМЕНЬШЕНО по твоему запросу ранее */
	display: flex;
	align-items: center;
}

.slide-features-list li:last-child {
	margin-bottom: 0;
}

.feature-icon {
	width: 30px;
	height: 30px;
	margin-right: var(--spacing-unit);
	flex-shrink: 0;
}

.slide-btn {
	width: 240px;
	height: 55px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/* --- Стрелки слайдера (ДЕСКТОП) --- */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 10;
	width: 66px;
	height: 66px;
	line-height: 0;
	transition: transform 0.2s ease;
}

.slider-arrow:hover {
	transform: translateY(-50%) scale(1.05);
}

.slider-arrow:active {
	transform: translateY(-50%) scale(0.95);
}

.slider-arrow-prev {
	left: -100px; /* <<<< ИЗМЕНЕНО: позиция левой стрелки */
}

.slider-arrow-next {
	right: -100px; /* <<<< ИЗМЕНЕНО: позиция правой стрелки */
}

.slider-arrow img {
	display: block;
	width: 100%;
	height: 100%;
}

.slider-arrow .arrow-image-right {
	transform: rotate(180deg);
}

/* --- Пагинация (точки) --- */
.slider-pagination {
	position: absolute;
	bottom: calc(var(--spacing-unit) * -4); /* 12px от низа .slider-wrapper */
	left: 50%;
	transform: translateX(-50%);
	display: none; /* <<<< ИЗНАЧАЛЬНО СКРЫТЫ */
	align-items: center; /* Для выравнивания точек, если они разной высоты (маловероятно) */
	gap: calc(var(--spacing-unit) * 3); /* 8px между точками */
	z-index: 10; /* Чтобы были поверх слайда, но под стрелками, если стрелки заезжают */
}

.slider-pagination .dot {
	width: 7px; /* Размер точки */
	height: 7px;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	background-color: var(--color-primary-orange); /* #FB7119 */
	border: 2px solid transparent;
}

.slider-pagination .dot:hover {
	transform: scale(1.15);
}

.slider-pagination .dot.active {
	background-color: transparent; /* Прозрачный фон */
	border: 2px solid var(--color-text-dark); /* #333 - Темно-серый ободок */
	transform: scale(1.25); /* Активная точка чуть больше */
}


/* === HERO SLIDER ADAPTIVE STYLES === */

@media (max-width: 768px) {
	a:hover {
		text-decoration: none;
	}

	.hero-slider {
		padding-top: calc(var(--spacing-unit) * 2);
		padding-bottom: calc(var(--spacing-unit) * 5);
	}

	.slider-track {
		border-radius: 30px;
	}

	.slide {
		min-height: auto; /* Высота будет определяться контентом */
	}

	.slide-content-positioner {
		display: flex; /* <<<< ОСТАЕТСЯ FLEX В РЯД */
		align-items: center;
		gap: calc(var(--spacing-unit) * 2.5); /* 20px - Уменьшаем отступ между товаром и текстом */
		padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3); /* ~24px внутренние отступы */
	}

	.slide-image-part { /* Товар на 768px */
		flex: 0 0 auto; /* Не растягивается, не сжимается, ширина по содержимому (картинке) */
		width: 300px; /* <<<< ЗАДАЕМ ФИКСИРОВАННУЮ ШИРИНУ ТОВАРУ (подбирать по макету 768px) */
		/* Если товар не должен уменьшаться, его ширина должна быть такой, как на десктопе,
		   либо немного меньше, если он все же чуть-чуть масштабируется.
		   Сейчас max-width на десктопе 455px. Это много для 768px, если текст должен влезть.
		   Нужно знать, какая ширина картинки товара на макете 768px.
		   Пока поставил 300px как пример. */
		max-width: 50%; /* Ограничиваем, чтобы не занимал слишком много места */
		margin-bottom: 40px;
	}

	.slide-image-part img {
		/* Стили по умолчанию max-width: 100%; height: auto; */
	}

	.slide-text-part { /* Текстовый блок на 768px */
		flex: 1 1 auto; /* Занимает оставшееся пространство, может сжиматься и растягиваться */
		max-width: none; /* Убираем max-width в px, чтобы мог сжаться */
	}

	.slide-title { /* "Большой выбор" на 768px */
		font-size: 40px;
		line-height: 1.15;
		margin-bottom: 0;
	}

	.slide-subtitle { /* "крепких прозрачных..." на 768px */
		font-size: 26px;
		line-height: 1.25;
		margin-bottom: calc(var(--spacing-unit) * 2.5);
	}

	/* .slide-subtitle .subtitle-highlight стили наследуются */
	.slide-features-list li { /* Характеристики на 768px */
		font-size: 18px;
		line-height: 1.4;
		margin-bottom: var(--spacing-unit);
		/* justify-content: flex-start; /* Галочка и текст слева */
	}

	.feature-icon {
		width: 25px;
		height: 25px;
	}

	.slide-btn { /* Кнопка на 768px */
		width: 295px;
		height: 55px;
		padding: 0;
		font-size: 18px;
		max-width: 100%;
	}

	/* СКРЫВАЕМ СТРЕЛКИ на 768px и меньше */
	.slider-arrow {
		display: none !important;
	}

	.slider-wrapper {
		max-width: 730px;
	}

	.slide-features-list {
		margin-bottom: 16px;
	}

	.slider-pagination {
		display: flex;
	}
}

@media (max-width: 480px) {
	a:hover {
		text-decoration: none;
	}

	.slider-track {
		border-radius: 25px;
	}

	.slide-content-positioner {
		flex-direction: column; /* <<<< НА МОБИЛЬНЫХ ТЕПЕРЬ В КОЛОНКУ */
		align-items: center; /* Центрируем */
		text-align: center;
		gap: calc(var(--spacing-unit) * 2);
		padding: calc(var(--spacing-unit) * 3) var(--spacing-unit);
	}

	.slide-image-part {
		width: 80%;
		max-width: 300px;
		margin-bottom: calc(var(--spacing-unit)*1.5);
		margin-top: -30px;
	}

	.slide-text-part {
		width: 90%;
	}

	.slide-title {
		font-size: 39px;
		text-align: left;
		margin-top: -10px;
	}

	.slide-subtitle {
		font-size: 24px;
		text-align: left;
		max-width: 95%;
		margin-bottom: 10px;
	}

	.slide-features-list li {
		font-size: 18px;
	}

	.slide-features-list li>img {
		margin-bottom: 1px;
	}

	.feature-icon {
		width: 30px;
		height: 30px;
	}

	.slide-btn {
		width: auto;
		max-width: 100%;
		padding: 12px 68px;
		font-size: 20px;
	}

	.slider-wrapper {

	}


	.hero-slider {
		padding-top: 5px;
		padding-bottom: 30px;
	}

	/* ПОКАЗЫВАЕМ ПАГИНАЦИЮ на мобильных (480px и меньше) */
	.slider-pagination {
		display: flex; /* Показываем точки на мобильных */
		bottom: calc(var(--spacing-unit) * -4); /* 12px от низа */
		gap: calc(var(--spacing-unit) * 2); /* 8px между точками */
	}

	.slider-pagination .dot {
		width: 7px; /* Точки чуть меньше на мобильных */
		height: 7px;
		/* border-width остается 2px или можно уменьшить до 1.5px */
	}

	.slider-pagination .dot.active {
		transform: scale(1.5); /* Чуть меньше увеличение для активной */
	}
}

/* === КОНЕЦ HERO SLIDER STYLES === */

/* === MOBILE NAVIGATION STYLES (Версия с правками) === */
.mobile-nav-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 990;
	opacity: 0;
	transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; /* Добавил visibility для лучшего скрытия */
	visibility: hidden;
}

.mobile-nav-overlay.active {
	display: block;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.mobile-nav {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	max-width: 85%;
	height: 90vh;
	background-color: var(--color-background-page); /* Основной белый фон меню */

	/* Фоновый узор с линиями */
	background-image: url('../img/bg-lines.png'); /* ЗАМЕНИТЬ ПУТЬ! */
	background-repeat: no-repeat; /* Чтобы узор не повторялся */
	background-position: center; /* Пример: узор в правом нижнем углу */
	/* Или 'center center' если он должен быть по центру */
	background-size: auto; /* Масштабирует узор, чтобы он полностью влез, не искажаясь */
	/* Или 'cover' если он должен заполнить, возможно обрезаясь */
	/* Или 'auto' если узор имеет фиксированный размер */

	box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
	padding: calc(var(--spacing-unit) * 2);
	box-sizing: border-box;
	transform: translateX(-105%);
	transition: transform 0.3s ease-in-out;
	z-index: 1000;
	overflow-y: auto;
}

.mobile-nav.active {
	transform: translateX(0);
}

/* --- Шапка мобильного меню --- */
.mobile-nav-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: calc(var(--spacing-unit) * 2);
	margin-bottom: calc(var(--spacing-unit) * 1.5);
	border-bottom: 1px solid #ddd; /* Линия под шапкой меню */
	flex-shrink: 0;
}

.mobile-nav-close-btn {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	width: 30px;
	height: 30px;
	position: relative;
}

.mobile-nav-close-btn span {
	display: block;
	position: absolute;
	width: 80%;
	height: 3px; /* Ширина палочек крестика */
	background-color: var(--color-primary-orange);
	left: 10%;
	top: 50%; /* Центрируем */
	transition: transform 0.3s ease;
}

.mobile-nav-close-btn span:nth-child(1) {
	transform: translateY(-50%) rotate(45deg);
}

.mobile-nav-close-btn span:nth-child(2) {
	transform: translateY(-50%) rotate(-45deg);
}

.mobile-nav-logo img {
	height: 30px;
	width: auto;
}

/* Уменьшенный логотип, подбирать высоту */
.mobile-nav-header-phone img {
	width: 26px;
	height: 26px;
	display: block;
}

/* Мобильный переключатель языка в шапке меню */
.mobile-nav-header .header-lang-switcher.mobile-lang-switcher {
	/* Стили наследуются из адаптивных стилей хедера или можно задать здесь */
}

.mobile-nav-header .mobile-lang-switcher .lang-text-rus {
	font-size: 16px; /* Убедимся, что размер соответствует */
	font-weight: 600;
	color: var(--color-primary-orange);
	border-bottom: 1px dotted var(--color-primary-orange);
	padding-bottom: 1px;
	line-height: 1.1;
}

.mobile-nav-header .mobile-lang-switcher .mobile-lang-arrow {
	border-color: var(--color-primary-orange);
}


/* --- Список навигации в мобильном меню --- */
.mobile-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	flex-grow: 1;
}

.mobile-nav-item {
	/* border-bottom: 1px solid #f0f0f0; /* УБРАЛИ ЛИНИИ МЕЖДУ ПУНКТАМИ */
}

.mobile-nav-item:last-child {
	border-bottom: none;
}

.mobile-nav-link,
.mobile-submenu-link {
	display: block;
	padding: calc(var(--spacing-unit) * 1.75) 0; /* 14px */
	font-size: 18px;
	font-weight: 700; /* Сделаем жирнее, как на макете */
	color: var(--color-text-dark);
	text-decoration: none;
	transition: color 0.2s ease;
	text-transform: uppercase; /* <<<< ВСЕ ПУНКТЫ ВЕРХНИМ РЕГИСТРОМ */
}

.mobile-nav-link:hover,
.mobile-submenu-link:hover,
.mobile-nav-link.active {
	color: var(--color-primary-orange);
}

/* Цвет активного пункта в мобильном меню (если он такой же, как в десктопном) */
.mobile-nav-link.active {
	color: var(--color-primary-orange);
}


/* Для пунктов с подменю */
.mobile-nav-item.has-submenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	/* border-bottom для основного пункта, если под ним сразу не идет открытое подменю */
	/* border-bottom: 1px solid #f0f0f0; */
}

.mobile-nav-item.has-submenu > .mobile-nav-link.main-link {
	flex-grow: 1;
	padding-right: var(--spacing-unit); /* Небольшой отступ справа от текста до стрелки */
}

.mobile-nav-item.has-submenu > .submenu-toggle {
	background: none;
	border: none;
	padding: calc(var(--spacing-unit) * 1.75);
	cursor: pointer;
	margin-left: auto;
	flex-shrink: 0;
	line-height: 0; /* Для точного позиционирования стрелки */
}

.mobile-nav-item.has-submenu > .submenu-toggle .dropdown-arrow {
	border-color: var(--color-text-dark);
	width: 8px;
	height: 8px;
	border-width: 0 2.5px 2.5px 0; /* Стрелка чуть жирнее */
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	margin: 0; /* Убираем margin-left, т.к. позиционируется кнопкой */
}

.mobile-nav-item.has-submenu.submenu-open > .submenu-toggle .dropdown-arrow {
	transform: rotate(225deg); /* Стрелка вверх */
	border-color: var(--color-primary-orange); /* Оранжевая при открытии */
}

.mobile-nav-item.has-submenu.submenu-open > .mobile-nav-link.main-link {
	color: var(--color-primary-orange); /* Родительский пункт оранжевый, когда подменю открыто */
}


.mobile-submenu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	display: none;
	padding-left: calc(var(--spacing-unit) * 3); /* 24px - отступ для вложенности */
	background-color: rgba(244, 244, 244, 0.7); /* Легкий полупрозрачный фон для подменю, чтобы линии были видны */
	/* border-top: 1px solid #eee; */ /* Если нужна линия над подменю */
}

.mobile-nav-item.has-submenu.submenu-open > .mobile-submenu {
	display: block;
}

.mobile-submenu-link {
	font-size: 16px;
	font-weight: 600; /* Подпункты тоже достаточно жирные */
	padding: calc(var(--spacing-unit) * 1.25) 0; /* 10px */
	/* border-top: 1px solid #eee; /* Убрали линии между подпунктами */
	text-transform: uppercase; /* <<<< ПОДПУНКТЫ ВЕРХНИМ РЕГИСТРОМ */
}

.mobile-submenu li:first-child .mobile-submenu-link {
	border-top: none;
}


/* --- Футер мобильного меню --- */
.mobile-nav-footer {
	padding-top: calc(var(--spacing-unit) * 2);
	margin-top: auto;
	flex-shrink: 0;
}

.mobile-nav-divider { /* Единственная линия перед контактами в футере */
	border: none;
	border-top: 1px solid #ccc; /* Более заметная линия */
	margin: 0 0 calc(var(--spacing-unit) * 2) 0;
}

.mobile-nav-contact-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}

.mobile-nav-phone-link,
.mobile-nav-email-link {
	display: flex;
	align-items: center;
	gap: var(--spacing-unit);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text-dark);
	text-decoration: none;
}

.mobile-nav-phone-link:hover,
.mobile-nav-email-link:hover {
	color: var(--color-primary-orange);
}

.mobile-nav-email-link { /* Email отдельно под телефоном */
	margin-top: calc(var(--spacing-unit) * 1);
}

.mobile-nav-contact-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.mobile-nav-socials {
	display: flex;
	gap: calc(var(--spacing-unit) * 1.5);
}

.mobile-nav-socials img {
	width: 28px;
	height: 28px; /* Иконки соцсетей в меню чуть крупнее */
}

.mobile-nav-item.has-submenu > .submenu-toggle {
	background: none;
	border: none;
	padding: calc(var(--spacing-unit) * 1.75); /* Сохраняем кликабельную зону */
	cursor: pointer;
	margin-left: auto;
	flex-shrink: 0;
	line-height: 0; /* Для чистого позиционирования CSS-стрелки */
	display: flex; /* Чтобы выровнять стрелку внутри кнопки, если нужно */
	align-items: center;
	justify-content: center;
}

.mobile-partners-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

/* Стили для стрелки-шеврона ВНУТРИ кнопки .submenu-toggle */
.mobile-nav-item.has-submenu > .submenu-toggle .dropdown-arrow {
	display: inline-block;
	width: 8px; /* Ширина шеврона */
	height: 8px; /* Высота шеврона */
	border-style: solid;
	border-color: var(--color-text-dark); /* Изначально темно-серая */
	border-width: 0 2px 2px 0; /* Рисуем правую и нижнюю границу */
	padding: 0;
	transform: rotate(45deg); /* Направлена вниз */
	transition: transform 0.3s ease, border-color 0.3s ease; /* Анимируем поворот и цвет */
	margin: 0; /* Убираем внешние отступы у самой стрелки */
}

/* Когда подменю открыто (класс .submenu-open на .mobile-nav-item.has-submenu) */
.mobile-nav-item.has-submenu.submenu-open > .submenu-toggle .dropdown-arrow {
	border-color: var(--color-primary-orange); /* Становится оранжевой */
	transform: rotate(225deg); /* Поворачиваем вверх (45 + 180) */
}


/* === КОНЕЦ MOBILE NAVIGATION STYLES === */

/* Вспомогательный класс для скрытия элементов через JS */
.hidden-by-js {
	display: none !important;
}

/* === PRODUCTION VOLUME SECTION STYLES (Обновлено) === */
.production-volume {
	background-color: var(--color-background-block); /* Белый фон секции */
	padding: calc(var(--spacing-unit) * 6) 0; /* ~48px сверху/снизу основного блока */
	text-align: center;
	max-width: 1280px;
	margin: calc(var(--spacing-unit) * 4) auto; /* Отступы сверху/снизу от других секций + центрирование */
	border-radius: 45px;
	box-shadow: 0px 0px 20px 9px rgba(0, 0, 0, 0.11);
}

.production-volume .section-inner-container {
	/* Если нужны специфичные паддинги внутри блока со скруглениями, то здесь */
	padding: 0 calc(var(--spacing-unit) * 2); /* 16px по бокам внутри, чтобы контент не прилипал */
}

/* Обертки для ограничения ширины текстовых блоков */
.production-intro-text,
.production-features-text,
.production-clients-block .section-clients-title { /* Заголовок клиентов тоже ограничен */
	max-width: 1124px;
	margin-left: auto;
	margin-right: auto;
}

.production-title {
	font-size: 36px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin: 0 auto;
	max-width: 860px;
	margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.production-title .highlight-orange {
	color: var(--color-primary-orange);
}

.stock-banner {
	display: inline-block;
	background-color: var(--color-primary-orange);
	color: var(--color-text-light);
	font-size: 40px;
	font-weight: 400;
	padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 7);
	border-radius: 50px;
	margin-bottom: calc(var(--spacing-unit) * 3);
	line-height: 1.2;
}

.zip-lock-subtitle {
	font-size: 36px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 3);
}

.zip-lock-subtitle span {
	font-weight: 700;
}

.section-divider-line { /* Новый стиль для разделителя */
	width: 505px;
	height: 1px;
	background-color: #B2B2B2; /* Цвет из твоего CSS */
	margin: calc(var(--spacing-unit) * 5) auto; /* 40px сверху/снизу, по центру */
}

.section-highlight-title {
	font-size: 36px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 3);
}

.section-text {
	font-size: 20px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.5;
	margin: 0 auto calc(var(--spacing-unit) * 3);
	max-width: 1050px;
}

.section-offer-text {
	font-size: 24px;
	font-weight: 400;
	color: var(--color-primary-orange);
	line-height: 1.4;
	/* max-width уже у родителя .production-features-text */
	margin: 0 auto calc(var(--spacing-unit) * 3.5);
}

.section-actions {
	margin-bottom: calc(var(--spacing-unit) * 3);
}

/* .btn-primary - использует стили .btn */
/* .btn-secondary - использует стили .btn (если они одинаковые) */


.section-clients-title {
	font-size: 36px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 5);
}

.clients-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit));
	margin-bottom: calc(var(--spacing-unit) * 5);
	align-items: start;
	max-width: 1178px; /* <<<< МАКСИМАЛЬНАЯ ШИРИНА СЕТКИ КЛИЕНТОВ */
	margin-left: auto;
	margin-right: auto;
}

.client-item {
	text-align: center;
}

.client-icon-wrapper {
	border-radius: 50%;
	margin: 0 auto calc(var(--spacing-unit) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.client-icon-wrapper img {
	/* УБИРАЕМ max-width и max-height, чтобы иконки отображались в исходном размере */
	display: block;
}

.client-name {
	font-size: 20px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 0.75);
	max-width: 188px;
}

.client-description {
	font-size: 15px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.4;
	margin-top: 0;
}

/* Стили для блока клиентов */
.clients-slider-wrapper {
	position: relative;
	max-width: 1178px;
	margin: 0 auto calc(var(--spacing-unit) * 2);
}

.clients-grid { /* На десктопе и планшете это грид */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 1);
	align-items: start; /* Элементы выравниваются по верху */
}

.client-item {
	text-align: center;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Если align-items: start у .clients-grid работает, то height: 100% не нужен,
   и justify-content не будет иметь такого эффекта. Проверим.
   Убираем height: 100% и justify-content: space-between, т.к. align-items:start у грида.
*/
.client-item {
	text-align: center;
	/* min-height: 300px; /* Пример, если нужно задать минимальную высоту для выравнивания пагинации */
	/* Но лучше, чтобы высота была по контенту */
}


.client-icon-wrapper {
	border-radius: 50%;
	margin: 0 auto calc(var(--spacing-unit) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
}

.client-icon-wrapper img {
	display: block; /* max-width/height убраны, чтобы были исходные */
}

.client-name {
	font-size: 20px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 0.75);
	max-width: 188px;
	margin-left: auto;
	margin-right: auto;
}

.client-description {
	font-size: 15px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.4;
	margin-top: 0;
	flex-grow: 1; /* Позволяет этому блоку занять доступное пространство, если .client-item - flex */
	/* Если .client-item не flex, это не будет работать */
}


.clients-slider-pagination {
	display: none; /* Изначально скрыта */
	justify-content: center;
	margin-top: calc(var(--spacing-unit) * 3);
	position: static;
	transform: none;
	left: auto;
	bottom: auto;
}


/* === АДАПТАЦИЯ СЕКЦИИ PRODUCTION VOLUME === */

@media (max-width: 768px) {
	.production-volume {
		/* Можно уменьшить padding или изменить max-width, если нужно */
		margin-left: calc(var(--spacing-unit) * 1.5); /* 12px */
		margin-right: calc(var(--spacing-unit) * 1.5); /* 12px */
		max-width: none; /* Занимает доступную ширину с учетом паддингов .container */
		padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 2); /* 32px 16px */
	}

	.production-intro-text,
	.production-features-text,
	.production-clients-block .section-clients-title {
		max-width: none; /* Текстовые блоки на всю ширину контейнера */
	}

	.production-title {
		font-size: 30px;
		max-width: none;
	}

	.stock-banner {
		font-size: 30px;
		padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
	}

	.zip-lock-subtitle {
		font-size: 30px;
	}

	.section-divider-line {
		width: 80%;
		max-width: 400px;
		margin: calc(var(--spacing-unit) * 4) auto;
	}

	.section-highlight-title {
		font-size: 30px;
	}

	.section-text {
		font-size: 18px;
		max-width: none;
	}

	.section-offer-text {
		font-size: 20px;
	}

	.section-clients-title {
		font-size: 30px;
		margin-bottom: calc(var(--spacing-unit) * 3);
	}


	.clients-slider-wrapper {
		max-width: none; /* На всю ширину */
	}

	.clients-grid { /* На 768px - 2 ряда по 3 элемента */
		grid-template-columns: repeat(3, 1fr); /* <<<< Строго 3 колонки */
		gap: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 1.5); /* Уменьшаем отступы */
	}

	.clients-slider-pagination {
		display: none !important;
	}

	/* Пагинация не нужна, если это грид */
}

@media (max-width: 480px) {
	/* Или брейкпоинт, где уже не влезают 3 в ряд, например 600px */
	.production-title {
		font-size: 26px;
		max-width: 275px;
	}

	.stock-banner {
		font-size: 24px;
	}

	.zip-lock-subtitle {
		font-size: 26px;
	}

	h3.section-highlight-title {
		color: var(--color-text, #333);
		text-align: center;
		font-family: Bahnschrift;
		font-size: 24px;
		font-style: normal;
		font-weight: 400;
		line-height: 130%; /* 31.2px */
	}

	.section-text {
		font-size: 16px;
	}

	.section-offer-text {
		font-size: 18px;
	}

	.section-clients-title {
		font-size: 26px;
	}

	.clients-slider-wrapper {
		/* Стили для обертки слайдера, если нужны */
	}

	.clients-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--spacing-unit);
		margin-bottom: -10px;
		gap: calc(var(--spacing-unit) * 14);
		scroll-padding-left: calc(10% + var(--spacing-unit));
		scroll-padding-right: calc(10% + var(--spacing-unit));
		padding-left: calc(var(--spacing-unit) * 10);
		padding-right: calc(var(--spacing-unit) * 10);
	}

	.clients-grid::-webkit-scrollbar {
		display: none;
	}

	.clients-grid {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}


	.client-item {
		flex: 0 0 75%;
		max-width: 270px;
		scroll-snap-align: center;
		transition: none;
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.client-item.active-client-slide { /* Класс для активного/центрального слайда */
		transform: scale(1);
		opacity: 1;
	}

	.client-item:last-child {
		margin-right: 0;
	}

	.client-icon-wrapper {
		border-radius: 50%;
		margin: 0 auto calc(var(--spacing-unit) * 2);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 190px;
		height: 150px;
	}

	.client-icon-wrapper img {
		/* Можно немного уменьшить, если нужно */
		/* max-width: 70px; max-height: 70px; */
	}

	.client-name {
		font-size: 18px;
	}

	.client-description {
		font-size: 14px;
		min-height: 4.2em; /* Примерная минимальная высота для 3 строк (1.4 * 3), чтобы выровнять те, у кого нет описания */
		/* Либо не задавать, если нужно, чтобы они были разной высоты */
	}

	.clients-slider-pagination {
		display: flex !important;
		justify-content: center;
		gap: 20px;
		margin-top: 0;
		margin-bottom: 30px;
	}

	.production-volume {
		padding-bottom: 10px;
	}

	.nowrap-mobile {
		white-space: nowrap;
	}

	.btn.btn-primary.get-offer {
		padding: 15px 10px;
		white-space: unset;
	}
}

/* === КОНЕЦ PRODUCTION VOLUME SECTION ADAPTIVE STYLES === */

/* === VIDEO SECTION STYLES (Только плеер) === */
.video-section {
	padding: 0;
	margin-top: 50px;
}

.video-container {
	padding-left: 0;
	padding-right: 0;
}

.video-player-wrapper {
	position: relative; /* Для будущих кастомных контролов или элементов, если понадобятся */
	max-width: 1280px; /* Ширина плеера */
	margin: 0 auto; /* Центрирование */
	border-radius: 40px; /* Скругление углов, как у других блоков */
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.11); /* Тень, как у других блоков */
	overflow: hidden; /* Чтобы скругление корректно обрезало видео */
	background-color: #000; /* Черный фон на случай, если видео не загрузится или имеет отступы */
	line-height: 0; /* Убирает возможный отступ под видео, если оно inline-block по какой-то причине */
}

.main-video-player {
	display: block; /* Убирает лишние отступы и позволяет задавать width/height */
	width: 100%; /* Занимает всю ширину обертки .video-player-wrapper */
	height: auto; /* Высота подстраивается под пропорции видео */
	/* border-radius: 40px; /* Не обязательно, если overflow: hidden у родителя работает */
}

/* Кастомная кнопка Play */
.custom-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* Центрирование */
	width: 80px; /* Размер кнопки, можно настроить */
	height: 80px;
	background-color: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый фон */
	border: none;
	border-radius: 50%; /* Круглая кнопка */
	cursor: pointer;
	z-index: 5; /* Поверх видео/постера */
	display: flex; /* Для центрирования иконки внутри */
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease, transform 0.2s ease;
	outline: none; /* Убираем стандартный контур фокуса, если будем делать свой */
}

.custom-play-button:hover {
	background-color: rgba(255, 255, 255, 1); /* Непрозрачный белый при наведении */
	transform: translate(-50%, -50%) scale(1.05);
}

.custom-play-button:focus-visible { /* Стиль фокуса для доступности */
	box-shadow: 0 0 0 3px var(--color-primary-orange);
}

.custom-play-button .play-icon { /* SVG иконка Play */
	width: 40px; /* Размер треугольника */
	height: 40px;
	fill: var(--color-primary-orange); /* Оранжевый цвет треугольника */
	margin-left: 5px; /* Небольшой сдвиг вправо, чтобы визуально был по центру круга */
}

/* Когда видео проигрывается (класс добавляется JS), скрываем кастомную кнопку */
.custom-play-button.is-hidden {
	display: none;
}

/* === КОНЕЦ VIDEO SECTION STYLES === */

/* === PRODUCTION DIRECTIONS SECTION STYLES (Flexbox для адаптации карточек) === */

/* --- Стили для .production-directions и его текстового содержимого --- */
/* (Эти стили остаются такими же, как в моем предыдущем полном ответе #38,
   включая твои правки для .production-title, .stock-banner, .zip-lock-subtitle и т.д.
   Я их скопирую сюда для полноты) */
.production-directions {
	background-color: var(--color-background-block);
	padding: calc(var(--spacing-unit) * 6) 0;
	text-align: center;
	max-width: 1280px;
	margin: calc(var(--spacing-unit) * 4) auto;
	border-radius: 45px;
	box-shadow: 0px 0px 20px 9px rgba(0, 0, 0, 0.11);
	padding-bottom: 25px;
	margin-top: 50px;
}

.production-directions .section-inner-container {
	padding: 0 calc(var(--spacing-unit) * 2);
}

.production-directions .production-intro-text,
.production-directions .production-features-text,
.production-directions .production-clients-block .section-clients-title {
	max-width: 1124px;
	margin-left: auto;
	margin-right: auto;
}

.directions-main-title {
	color: var(--color-text-dark);
	text-align: center;
	font-family: var(--font-main);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 5);
	max-width: 1124px;
	margin-left: auto;
	margin-right: auto;
}

/* Для первого блока заголовков, если они имеют другие классы и отступы */
.production-title {
	font-size: 36px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin: 0 auto;
	max-width: 860px;
	margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.production-title .highlight-orange {
	color: var(--color-primary-orange);
}

.stock-banner {
	display: inline-block;
	background-color: var(--color-primary-orange);
	color: var(--color-text-light);
	font-size: 40px;
	font-weight: 400;
	padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 7);
	border-radius: 50px;
	margin-bottom: calc(var(--spacing-unit) * 2.5);
	line-height: 1.2;
}

.zip-lock-subtitle {
	font-size: 36px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 3);
}

.zip-lock-subtitle span {
	font-weight: 700;
}

.section-divider-line {
	width: 505px;
	height: 1px;
	background-color: #B2B2B2;
	margin: calc(var(--spacing-unit) * 5) auto;
}

.section-highlight-title {
	font-size: 36px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 3);
}

.section-text {
	font-size: 20px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.5;
	margin: 0 auto calc(var(--spacing-unit) * 3);
	max-width: 1050px;
}

.section-offer-text {
	font-size: 24px;
	font-weight: 400;
	color: var(--color-primary-orange);
	line-height: 1.4;
	margin: 0 auto calc(var(--spacing-unit) * 3.5);
}

.production-directions .section-actions {
	text-align: center;
	margin-bottom: calc(var(--spacing-unit) * 3);
}

.directions-btn {
	display: inline-flex;
	/*width: 222px;*/
	width: auto;
	padding: 20px;
	height: 55px;
	justify-content: center;
	align-items: center;
}

.production-clients-block .section-clients-title {
	font-size: 36px;
	font-weight: 400;
	color: var(--color-text-dark);
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 5);
}

/* Стили для блока клиентов остаются как были (грид или слайдер) */
.clients-slider-wrapper { /* ... */
}

.clients-grid { /* ... */
}

.client-item { /* ... */
}

/* ... и т.д. */


/* --- Стили для .directions-grid (карточки продукции) --- */
.directions-grid { /* ДЕСКТОП: 5 элементов в ряд */
	display: flex; /* Используем Flexbox */
	justify-content: space-between; /* Распределяем 5 карточек по ширине */
	align-items: stretch; /* Карточки будут одной высоты в ряду */
	flex-wrap: wrap; /* Позволяем переноситься на новые строки, если не влезают */
	gap: calc(var(--spacing-unit) * 2.5); /* 20px - основной отступ между карточками */
	max-width: 1201px; /* Твоя максимальная ширина для этого блока */
	margin: 0 auto;
	margin-bottom: calc(var(--spacing-unit) * 5);
}

.direction-item { /* Карточка продукта */
	display: flex; /* Внутреннее содержимое карточки тоже flex */
	/* width: 224px; /* Убираем фиксированную ширину, будем управлять через flex-basis */
	flex-basis: calc(20% - calc(var(--spacing-unit) * 2.5 * 4 / 5)); /* (100% / 5_колонок) - (gap * (кол-во_промежутков / кол-во_колонок)) */
	flex: 0 0 224px; /* Не расти, не сжиматься, базовая ширина 224px. Если не влезут, перенесутся. */
	padding: 42px 16px 27px 16px;
	flex-direction: column;
	align-items: center;
	/* gap: 12px; /* Управляется отступами элементов ниже */
	border-radius: 20px;
	background: var(--color-background-block);
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.11);
	box-sizing: border-box;
	justify-content: center;
}

.direction-item-icon-wrapper {
	width: 180px;
	height: 162px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 12px; /* Заменяем gap у родителя */
}

.direction-item-icon-wrapper img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.direction-item-title {
	color: #000;
	text-align: center;
	font-family: var(--font-main);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	margin-top: auto;
	margin-bottom: auto;
}

.modernization-text span {
	white-space: nowrap;
	font-weight: 700;
}

/* Остальные стили для .production-directions .section-actions и футерного текста остаются как были */
.production-directions .section-actions.text-center {
	text-align: center;
	margin-bottom: calc(var(--spacing-unit) * 4);
}

.directions-btn {
	display: inline-flex;
	width: 222px;
	height: 55px;
	padding: 0;
	justify-content: center;
	align-items: center;
}

.directions-footer-text {
	text-align: center;
}

.market-experience-text {
	max-width: 1124px;
	margin-left: auto;
	margin-right: auto;
	color: var(--color-text-dark);
	font-family: var(--font-main);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: var(--spacing-unit);
}

.modernization-text {
	max-width: 1074px;
	margin-left: auto;
	margin-right: auto;
	color: var(--color-primary-orange);
	font-family: var(--font-main);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}


/* === АДАПТАЦИЯ СЕКЦИИ PRODUCTION DIRECTIONS (Карточки направлений) === */

@media (max-width: 1200px) {
	/* На этом брейкпоинте .directions-grid с flex-wrap: wrap и flex: 0 0 224px
	   уже должен начать переносить карточки, если они не влезают в 5 в ряд.
	   Например, если ширина контейнера станет меньше чем (224*5 + gap*4).
	   .directions-grid будет занимать max-width: 1201px или меньше, если родитель уже.
	*/
}

@media (max-width: 991px) {
	.directions-grid {
		/* Здесь, скорее всего, уже будет 3 или 4 карточки в ряду */
		justify-content: center; /* Центрируем ряды, если они неполные */
	}
}

@media (max-width: 768px) {

	.production-title {
		font-size: 27px;
	}

	/* ПЛАНШЕТ: 3 в первом ряду, 2 во втором (отцентрированные) */
	.production-directions {
		margin-left: calc(var(--spacing-unit) * 1.5);
		margin-right: calc(var(--spacing-unit) * 1.5);
	}

	.directions-main-title { /* Стили для заголовка секции */
	}

	.directions-grid {
		display: flex;
		flex-wrap: wrap; /* Позволяем перенос на новую строку */
		justify-content: center; /* Центрируем карточки в контейнере */
		gap: calc(var(--spacing-unit) * 2); /* 16px - отступы между карточками */
		max-width: calc(224px * 3 + var(--spacing-unit) * 2 * 2); /* Ширина для 3х карточек + 2 gap'а */
		/* (224*3) + (16*2) = 672 + 32 = 704px */
		margin-left: auto;
		margin-right: auto;
	}

	.direction-item {
		flex: 0 0 224px; /* Карточки сохраняют свою базовую ширину */
		/* Для создания эффекта 3+2:
		   Если у нас 5 элементов, первые 3 займут ряд.
		   Оставшиеся 2 перенесутся на новую строку.
		   Так как у .directions-grid стоит justify-content: center,
		   эти два элемента на новой строке будут отцентрированы.
		*/
	}

	/* Остальные стили для текстов и кнопки в этой секции на 768px */
	.market-experience-text {
		font-size: 18px;
		max-width: none;
	}

	.modernization-text {
		font-size: 20px;
		max-width: none;
	}
}


@media (max-width: 520px) {

	/* Переход к 2-м колонкам или подготовке к одной */
	.directions-grid {
		max-width: calc(224px * 2 + var(--spacing-unit) * 2 * 1); /* Ширина для 2х карточек + 1 gap */
		/* (224*2) + 16 = 448 + 16 = 464px */
	}

	/* .direction-item остается flex: 0 0 224px;
	   flex-wrap: wrap и justify-content: center у родителя сделают 2 в ряд,
	   а если останется одна, она будет по центру.
	*/
}

@media (max-width: 480px) {

	.stock-banner {
		font-size: 24px;
		padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
	}

	.zip-lock-subtitle {
		font-size: 24px;
	}

	.section-divider-line {
		width: auto;
	}

	.production-features-text .section-text {
		font-size: 18px;
	}

	.section-offer-text {
		font-size: 20px;
	}

	/* МОБИЛЬНЫЕ: карточки в одну колонку */
	.production-directions { /* Стили для секции */
	}

	.directions-main-title { /* Стили для заголовка */
		color: var(--color-text, #333);
		text-align: center;
		font-family: Bahnschrift;
		font-size: 20px;
		font-style: normal;
		font-weight: 400;
		line-height: 130%; /* 26px */
	}

	.directions-grid {
		flex-direction: column; /* <<<< ВСЕ КАРТОЧКИ В КОЛОНКУ */
		align-items: center; /* Центрируем карточки в этой колонке */
		gap: calc(var(--spacing-unit) * 2.5); /* 20px отступ между карточками */
		max-width: 100%;
	}

	.direction-item {
		flex: 0 1 auto; /* Позволяем сжиматься, если нужно, но не расти сверх своей ширины */
		width: 100%; /* Занимает всю доступную ширину родителя (который центрирован) */
		max-width: 320px; /* Ограничиваем максимальную ширину карточки */
	}

	/* Остальные стили для текстов и кнопки в этой секции на 480px */
	.market-experience-text {
		font-size: 15px;
	}

	.modernization-text {
		font-size: 17px;
	}

	.production-clients-block .section-clients-title {
		color: var(--color-text, #333);
		text-align: center;
		font-family: Bahnschrift;
		font-size: 24px;
		font-style: normal;
		font-weight: 400;
		line-height: 130%;
	}
}

/* === КОНЕЦ PRODUCTION DIRECTIONS SECTION STYLES === */

/* === CERTIFICATE SECTION STYLES === */
.certificate-section {
	background-color: var(--color-background-block);
	padding: calc(var(--spacing-unit) * 6) 0;
	max-width: 1280px;
	margin: calc(var(--spacing-unit) * 6.5) auto;
	border-radius: 45px;
	box-shadow: 0px 0px 20px 9px rgba(0, 0, 0, 0.11);
}

.certificate-section .section-inner-container {
	padding: 0 calc(var(--spacing-unit) * 2);
}

.certificate-content-wrapper { /* Обертка для изображения и текста */
	display: flex;
	align-items: center; /* Вертикальное выравнивание по центру */
	gap: calc(var(--spacing-unit) * 5); /* 40px - отступ между картинкой и текстом */
	max-width: 900px; /* Примерная общая ширина контента, чтобы не было слишком широко */
	margin: 0 auto; /* Центрируем этот блок */
}

.certificate-image-block {
	flex: 0 0 282px; /* Фиксированная ширина блока под картинку (как в твоем CSS для image 6) */
	/* height: 400px; /* Если нужна фиксированная высота для блока картинки */
}

.certificate-image-link {
	display: block; /* Чтобы ссылка занимала все место */
	cursor: zoom-in; /* Подсказка пользователю */
}

.certificate-preview-img {
	display: block;
	width: 100%; /* Картинка занимает всю ширину своего блока */
	height: auto; /* Высота подстраивается */
	border-radius: 8px; /* Небольшое скругление для превью */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень для превью */
}

.certificate-text-block {
	flex: 1 1 auto; /* Текстовый блок занимает оставшееся пространство */
	/* max-width: 491px; /* Ширина текстовых блоков по твоему описанию */
	/* Это будет применено к самим параграфам ниже */
}

.certificate-main-title { /* "Сертификат" */
	color: var(--color-text-dark);
	text-align: left; /* На десктопе заголовок слева, не по центру секции */
	font-family: var(--font-main);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2; /* normal */
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 3.5); /* 28px */
}

.certificate-highlight-text { /* "ООО «НПЗ» обладает..." */
	width: 100%; /* Занимает всю ширину родителя .certificate-text-block */
	max-width: 491px; /* Ограничение, как ты указал */
	color: var(--color-primary-orange);
	font-family: var(--font-main);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4; /* 42px */
	margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}

.certificate-description-text { /* Два абзаца под оранжевым текстом */
	width: 100%;
	max-width: 491px; /* Ограничение, как ты указал */
	color: var(--color-text-dark);
	font-family: var(--font-main);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4; /* 28px */
	margin-bottom: calc(var(--spacing-unit) * 1.5); /* 12px между абзацами */
}

.certificate-description-text:last-of-type {
	margin-bottom: 0;
}

/* --- Стили для Лайтбокса --- */
.lightbox-overlay {
	display: none; /* Управляется JS */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8); /* Затемнение */
	z-index: 10000; /* Очень высоко */
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
}

.lightbox-overlay.active {
	display: flex; /* Показываем и центрируем */
}

.lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	display: flex; /* Для img внутри, если нужно будет контролировать его размеры */
}

.lightbox-image {
	display: block;
	max-width: 100%;
	max-height: 100%; /* Или max-height: calc(100vh - 80px); чтобы оставить место для кнопки закрытия */
	object-fit: contain; /* Вписываем изображение, сохраняя пропорции */
	border-radius: 4px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.lightbox-close-btn {
	position: absolute;
	top: -15px; /* Чуть выше и правее картинки */
	right: -15px;
	background-color: var(--color-background-block);
	color: var(--color-text-dark);
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 28px;
	font-weight: 300;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	z-index: 10001;
}

.lightbox-close-btn:hover {
	background-color: #f0f0f0;
}

.black-text {
	color: var(--color-text-dark);
}

/* === АДАПТАЦИЯ CERTIFICATE SECTION === */
@media (max-width: 768px) {
	/* Планшет */
    .certificate-section {
        margin-left: calc(var(--spacing-unit) * 1.5);
        margin-right: calc(var(--spacing-unit) * 1.5);
    }

	.certificate-content-wrapper {
		gap: calc(var(--spacing-unit) * 3); /* Уменьшаем отступ */
		max-width: none; /* На всю ширину .section-inner-container */
		padding: 0 calc(var(--spacing-unit) * 2); /* Добавляем боковые отступы, если .section-inner-container их не имеет */
	}

	.certificate-image-block {
		flex: 0 0 220px; /* Уменьшаем блок картинки */
	}

	.certificate-main-title {
		font-size: 30px; /* Уменьшаем заголовок */
		margin-bottom: calc(var(--spacing-unit) * 2.5);
	}

	.certificate-highlight-text {
		font-size: 20px; /* Уменьшаем */
		line-height: 1.4; /* 28px */
		max-width: none; /* Текст будет занимать доступную ширину */
	}

	.certificate-description-text {
		font-size: 16px; /* Уменьшаем */
		line-height: 1.4; /* 22.4px */
		max-width: none;
	}

	section {
		margin-left: calc(var(--spacing-unit) * 1.5);
		margin-right: calc(var(--spacing-unit) * 1.5);
	}
}

@media (max-width: 600px) {
	/* Мобильные */
	.certificate-content-wrapper {
		flex-direction: column; /* Картинка сверху, текст снизу */
		text-align: center; /* Центрируем текст */
		gap: calc(var(--spacing-unit) * 3);
		padding: 0; /* Сбрасываем боковые отступы, т.к. секция уже имеет их */
	}

	.certificate-image-block {
		flex-basis: auto; /* Сбрасываем */
		width: 70%; /* Картинка занимает, например, 70% ширины */
		max-width: 280px; /* Но не более */
		margin: 0 auto; /* Центрируем */
	}

	.certificate-text-block {
		width: 100%;
		max-width: 400px; /* Ограничиваем ширину текстового блока */
		margin: 0 auto; /* Центрируем */
	}

	.certificate-main-title {
		text-align: center; /* Заголовок по центру на мобильных */
		font-size: 30px; /* Твои стили */
	}

	.certificate-highlight-text {
		text-align: center; /* Твои стили */
		font-size: 20px;
		max-width: 295px; /* Твои стил.production-title */
		margin-left: auto;
		margin-right: auto; /* Центрирование */
	}

	.certificate-description-text {
		text-align: center; /* Твои стили */
		font-size: 16px;
		max-width: 295px; /* Твои стили */
		margin-left: auto;
		margin-right: auto; /* Центрирование */
	}

    .nowrap {
        all: unset;
    }
}

/* === КОНЕЦ CERTIFICATE SECTION STYLES === */

/* === CONTACTS SECTION STYLES (Полная версия CSS) === */
.contacts-section {
	padding-top: calc(var(--spacing-unit) * 4); /* 48px Отступ сверху для заголовка секции */
	padding-bottom: calc(var(--spacing-unit) * 2); /* 48px Отступ снизу после всего блока */
	/* background-color: var(--color-background-page); /* Если нужен общий фон страницы */
}

.contacts-heading-container { /* Контейнер для заголовка и подзаголовка секции */
	max-width: 1200px;
	margin: 0 auto calc(var(--spacing-unit) * 3);
	text-align: center;
}
.contacts-main-title { /* Заголовок "Контакты" */
	color: var(--color-text-dark);
	font-family: var(--font-main);
	font-size: 40px;
	font-weight: 700;
	line-height: normal; /* Как указано */
	margin-top: 0;
	margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
}
.contacts-intro-text { /* Подзаголовочный текст */
	color: var(--color-text-dark);
	font-family: var(--font-main);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4; /* 28px */
	margin: 0;
	padding: 0 115px;
}

/* Обертка для блока карты и плавающего инфо-блока */
.contacts-map-block-wrapper {
	position: relative;
	max-width: 1280px;
	margin: 0 auto; /* Центрирование всего блока карты */
	border-radius: 40px;
	background-color: #e0e0e0; /* Временный фон, пока карта не загружена */
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.11);
	overflow: hidden;
	min-height: 550px; /* Примерная высота, карта должна ее заполнить */
}
.contacts-map { /* Сюда будет встроена Яндекс.Карта */
	width: 100%;
	height: 100%;
	min-height: inherit; /* Наследует min-height от родителя */
	position: absolute;
	top: 0; left: 0;
}

/* Информационный блок поверх карты (десктоп) */
.contact-info-float-block {
	display: flex;
	position: absolute;
	top: calc(var(--spacing-unit) * 5); /* ~40px от верха карты */
	left: 50%;
	transform: translateX(-50%);

	width: 1002px; /* Твоя ширина */
	padding: 28px 37px; /* Твои паддинги */
	box-sizing: border-box;

	justify-content: space-between; /* Левая панель | Разделитель | Правая панель */
	align-items: flex-start; /* Выравниваем панели по верху */
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.80); /* Полупрозрачный фон */
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.11);
	z-index: 5;
	/* gap убран, т.к. justify-content: space-between сам распределит */
}

.contact-info-left-panel {
	display: flex;
	flex-direction: column; /* Телефон, Группа(Режим+Email), Адрес - друг под другом */
	gap: calc(var(--spacing-unit) * 4); /* 12px - Отступ между этими тремя блоками */
	flex: 1 1 auto; /* Позволяем занимать доступное место */
	max-width: 500px; /* Примерное ограничение, если нужно */
	padding-top: 15px;
}
.contact-details-inline-group { /* Обертка для Режима работы и Email */
	display: flex;
	gap: calc(var(--spacing-unit) * 8); /* ~24px - Отступ между режимом работы и email */
	align-items: center;
	justify-content: space-between;
}
.contact-detail-item { /* Общий для телефона, режима, адреса, email */
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 1.25); /* 10px между иконкой и текстом */
}
.contact-detail-icon {
	width: 25px; height: 25px; flex-shrink: 0;
}
.contact-phone-link {
	color: var(--color-text-dark); font-family: var(--font-main); font-size: 24px;
	font-weight: 700; line-height: normal; text-transform: uppercase; text-decoration: none;
}
.contact-work-hours,
.contact-address {
	color: var(--color-text-dark); font-family: var(--font-main); font-size: 16px;
	font-weight: 400; line-height: 1.4; margin: 0;
}
.contact-email-link {
	color: var(--color-primary-orange); font-family: var(--font-main); font-size: 16px;
	font-weight: 400; line-height: 1.4; text-decoration: none;
}
.contact-phone-link:hover,
.contact-email-link:hover { text-decoration: underline; }

.contact-info-divider-vertical {
	width: 1px;
	/* height: 200px; /* Фиксированная высота */
	align-self: stretch; /* Растягивается по высоте родителя .contact-info-float-block */
	background: #D9D9D9;
	margin: 0 calc(var(--spacing-unit) * 10); /* Отступы от панелей (24px), если gap у родителя убран */
}
.contact-info-divider-horizontal {
	display: none;
	width: 80%; height: 1px; background: #D9D9D9;
	margin: calc(var(--spacing-unit) * 2.5) auto;
}

.contact-info-right-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--spacing-unit) * 2.5); /* 20px между текстом "Пишите нам" и кнопками */
	flex: 1 1 auto; /* Позволяем занимать доступное место */
	/* max-width: 300px; /* Примерное ограничение, если нужно */
}
.contact-online-text {
	color: var(--color-text-dark); font-family: var(--font-main); font-size: 24px;
	font-weight: 400; line-height: 1.4;
	margin: 0;
}
.contact-online-text .highlight-orange { color: var(--color-primary-orange); }

.contact-social-buttons {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing-unit) * 1.5); /* 12px между кнопками */
	width: 87%; /* Чтобы кнопки занимали доступную ширину панели */
}
.btn-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--spacing-unit) * 2);
	color: var(--color-text-light);
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 10px;
	height: 55px;
	padding: 0 calc(var(--spacing-unit) * 2.5);
	box-sizing: border-box;
	transition: opacity 0.2s ease;
}
.btn-social:hover { opacity: 0.9; }
.btn-social img { width: 20px; height: 20px; }
.btn-telegram { background: #19B7FB; }
.btn-whatsapp { background: #00BC38; }


/* === ADAPTIVE STYLES FOR CONTACTS SECTION === */
@media (max-width: 1023px) { /* Чуть раньше 991, т.к. блок 1002px */
	.contact-info-float-block {
		width: 95%; /* Уменьшаем ширину, чтобы влезло */
		padding: 20px;
		gap: calc(var(--spacing-unit) * 2);
	}
	.contact-info-divider-vertical {
		margin: 0 calc(var(--spacing-unit) * 1.5);
	}
}


@media (max-width: 768px) { /* Планшет */
	.contacts-intro-text {
		font-size: 18px;
		padding: 0;
	}

	.contacts-map-block-wrapper {
		min-height: auto; /* Высота будет по контенту */
		display: flex;
		flex-direction: column; /* Инфо-блок над картой */
		overflow: visible;
		box-shadow: none;
		border-radius: 0;
		background-color: transparent;
		margin-bottom: calc(var(--spacing-unit) * 4); /* Отступ под картой */
	}
	.contacts-map {
		position: relative;
		border-radius: 30px;
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.11);
		min-height: 400px;
		order: 2; /* Карта ПОСЛЕ инфо-блока */
		width: 100%; /* Карта на всю ширину контейнера .contacts-map-block-wrapper (который max-width 1280px) */
	}

	.contact-info-float-block {
		position: static;
		transform: none;
		flex-direction: column;
		align-items: center;
		width: 100%; /* На всю ширину родителя (который ограничен .container) */
		margin: 0 auto calc(var(--spacing-unit) * 3);
		order: 1;
		background: var(--color-background-block); /* НЕПРОЗРАЧНЫЙ белый фон */
		border-radius: 30px;
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.11); /* Тень остается */
		padding: calc(var(--spacing-unit) * 4); /* 24px */
		gap: calc(var(--spacing-unit) * 2.5);
	}

	.contact-info-left-panel,
	.contact-info-right-panel {
		width: 100%;
		text-align: center;
	}

	.contact-info-left-panel {
		padding-left: 50px;
		padding-right: 50px;
	}
	/* Раскладка в левой панели на планшете - элементы остаются как есть или тоже в колонку?
	   Пока оставляем как на десктопе (телефон, потом режим+почта, потом адрес) */
	.contact-details-inline-group {
		justify-content: normal;
	}


	.contact-info-divider-vertical { display: none; }
	.contact-info-divider-horizontal { display: block; }

	.contact-social-buttons {
		flex-direction: row; /* В ОДИН РЯД */
		justify-content: center;
		align-self: center;
		gap: calc(var(--spacing-unit) * 2);
		width: auto; /* Ширина по содержимому кнопок */
	}
	.btn-social {
		flex-grow: 0; /* Кнопки не растягиваются */
		/* width: auto; /* Ширина по тексту + паддинги */
		/* max-width: 220px; /* Ограничение ширины кнопки, если нужно */
		padding: 0 calc(var(--spacing-unit) * 3); /* 24px по бокам */
	}
}

@media (max-width: 480px) { /* Мобильный */

	.contacts-section {
		padding-bottom: 0;
		padding-top: 0;
	}

	.contacts-map-block-wrapper {
		margin-bottom: 30px;
	}

	.container.contacts-heading-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.contacts-heading-container { margin-bottom: calc(var(--spacing-unit) * 3); }
	.contacts-main-title { font-size: 30px; }
	.contacts-intro-text { font-size: 16px; }

	.contacts-map { min-height: 300px; border-radius: 20px; }

	.contact-info-float-block {
		/* width: 100%; /* Уже есть */
		padding: calc(var(--spacing-unit) * 2.5); /* 20px */
		border-radius: 20px;
		margin-bottom: calc(var(--spacing-unit) * 2.5);
		gap: calc(var(--spacing-unit) * 1);
	}

	.contact-info-left-panel {
		gap: calc(var(--spacing-unit) * 4);
		width: 90%;
	}
	.contact-details-inline-group { /* Режим работы и Email теперь в колонку */
		flex-direction: column;
		gap: calc(var(--spacing-unit) * 2);
		align-items: center; /* или flex-start, если текст должен быть слева */
	}
	.contact-detail-item { /* Иконка НАД текстом */
		text-align: left;
		gap: calc(var(--spacing-unit) * 0.75); /* 6px */
	}
	.contact-phone-link { font-size: 20px; }
	.contact-work-hours, .contact-address, .contact-email-link { font-size: 15px; }

	.contact-info-right-panel { /* Текст и кнопки в колонку */
		align-items: center; /* Все по центру */
		gap: calc(var(--spacing-unit) * 2);
	}
	.contact-online-text { font-size: 20px; }

	.contact-social-buttons {
		flex-direction: column; /* Кнопки СНОВА В КОЛОНКУ */
		align-items: stretch; /* Растягиваем по ширине родителя */
		gap: calc(var(--spacing-unit) * 1.5);
		width: 100%; /* Занимают всю ширину .contact-info-right-panel */
		max-width: 280px; /* Ограничиваем максимальную ширину кнопок */
	}
	.btn-social {
		max-width: none; /* Сбрасываем, чтобы align-items: stretch сработал */
	}
	.contact-detail-item.contact-address-block {
		width: 136%;
		margin-left: -15%;
	}
	.contact-detail-item.contact-phone-block {
		justify-content: center;
	}
}
/* === КОНЕЦ CONTACTS SECTION STYLES === */

/* === FEEDBACK FORM SECTION STYLES === */
.feedback-form-section {
	/* Ширина 1280px будет у .container или у самой секции, если .container внутри */
	/* Высота 426px - зададим min-height, т.к. на мобильных может быть выше */
	min-height: 426px;
	display: flex; /* Для центрирования .feedback-form-container, если он не 100% */
	/* padding: 38.5px 130px 37.5px 131px; /* Эти паддинги очень большие и специфичные,
											 лучше задать паддинги .container и центрировать .feedback-form-element */
	padding: calc(var(--spacing-unit) * 5) 0; /* 40px сверху/снизу */
	justify-content: center;
	align-items: center;
	/* align-self: stretch; /* Не нужно, если родитель не flex */
	border-radius: 40px;
	background: var(--color-background-block); /* #FFF */
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.11);
	max-width: 1280px; /* Ограничиваем ширину самой секции */
	margin: calc(var(--spacing-unit) * 4) auto; /* Отступы и центрирование секции */
	box-sizing: border-box;
	margin-bottom: 20px;
}

.feedback-form-container { /* Внутренний контейнер для формы */
	width: 100%;
	max-width: 1019px; /* Ширина формы по твоему описанию */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px; /* Между заголовком, формой и текстом политики */
}

.feedback-main-title { /* "Оставьте Вашу заявку" */
	color: var(--color-text-dark);
	text-align: center;
	font-family: var(--font-main);
	font-size: 40px;
	font-weight: 700;
	line-height: normal; /* 1.2 или 1.1 обычно */
	margin-top: 0;
	margin-bottom: 0; /* Отступ будет через gap родителя */
}

.feedback-form-element { /* Тег <form> */
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%; /* Занимает ширину .feedback-form-container */
	gap: calc(var(--spacing-unit) * 2.5); /* 20px - отступ между полем сообщения, рядом с инпутами и текстом политики */
}

.form-group {
	position: relative; /* Для позиционирования clear-input-btn */
	width: 100%; /* По умолчанию на всю ширину родителя */
}

/* Поле Сообщение */
.form-group-textarea textarea {
	display: block; /* Чтобы занимало всю ширину и можно было задать height */
	width: 100%; /* Занимает всю ширину .feedback-form-element (1000px по макету, но будет ограничено .feedback-form-container) */
	max-width: 1000px; /* Явная максимальная ширина, если нужно */
	height: 129px;
	padding: 18px 23px; /* Отступы внутри поля */
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid #CECECE;
	background: var(--color-background-block);
	font-family: var(--font-main);
	font-size: 16px; /* Шрифт для placeholder и вводимого текста */
	line-height: 1.4;
	resize: vertical; /* Разрешаем изменять размер только по вертикали */
}
/* Стили для placeholder, если нужно кастомизировать */
.form-group-textarea textarea::placeholder {
	color: #888; /* Пример цвета placeholder */
}

/* Ряд для полей Имя, Email и кнопки Отправить */
.form-fields-row {
	display: flex;
	justify-content: space-between; /* Распределяем элементы */
	align-items: flex-start; /* Выравниваем по верху, если высота разная (хотя здесь одинаковая) */
	width: 100%;
	max-width: 1000px; /* Общая ширина ряда */
	gap: calc(var(--spacing-unit) * 2.5); /* 20px - отступ между полями и кнопкой */
}

.form-group-input { /* Обертка для input + clear button */
	position: relative;
	/* width: 320px; /* Задано для input ниже */
	flex: 0 0 320px; /* Фиксированная ширина для полей Имя и Email */
}
.form-group-input input[type="text"],
.form-group-input input[type="email"] {
	width: 100%; /* Занимает всю ширину .form-group-input (320px) */
	height: 55px;
	padding: 0 18px; /* Внутренние отступы */
	/* padding-right: 40px; /* Оставляем место для кнопки очистки, если она будет внутри */
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid #CECECE;
	background: var(--color-background-block);
	font-family: var(--font-main);
	font-size: 16px;
}
.form-group-input input::placeholder {
	color: #888;
}

/* Кнопка очистки поля (крестик) */
.clear-input-btn {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 20px;
	color: #aaa;
	cursor: pointer;
	padding: 5px;
	line-height: 1;
	/* display: none; /* Управляется JS */
}
.clear-input-btn:hover {
	color: #555;
}

/* Кнопка Отправить */
.btn-submit-feedback {
	/* display: flex; /* Уже есть от .btn */
	flex: 0 0 300px; /* Фиксированная ширина */
	height: 55px;
	/* padding: 15px 111px 16px 110px; /* Эти паддинги сделают кнопку шире 320px.
										 Если ширина фиксирована, текст центрируется через flex. */
	padding: 0; /* Убираем, если текст центрируется flex-свойствами .btn */
	/* justify-content: center; align-items: center; /* Уже есть от .btn */
	/* border-radius: 10px; background: var(--color-primary-orange); /* Уже есть от .btn */
	/* Стили текста кнопки наследуются от .btn (белый, жирный) */
}

/* Текст под формой про политику конфиденциальности */
.form-privacy-notice {
	color: var(--color-text-dark);
	text-align: center;
	font-family: var(--font-main);
	font-size: 15px;
	font-weight: 300;
	line-height: normal; /* или 1.3 */
	margin-top: calc(var(--spacing-unit) * 2); /* 16px - дополнительный отступ сверху */
}
.form-privacy-notice .privacy-policy-link {
	color: var(--color-primary-orange);
	font-weight: 300; /* Наследуется или можно указать */
	text-decoration: underline;
}
.form-privacy-notice .privacy-policy-link:hover {
	text-decoration: none;
}


/* === АДАПТАЦИЯ FEEDBACK FORM SECTION === */
@media (max-width: 1023px) { /* Планшет - раскладка не меняется, но могут уменьшиться отступы */
	.feedback-form-section {
		padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 2); /* Уменьшаем боковые паддинги секции */
		min-height: auto; /* Высота по контенту */
		margin-left: calc(var(--spacing-unit) * 1.5);
		margin-right: calc(var(--spacing-unit) * 1.5);
		margin-top: 0;
	}
	.feedback-form-container {
		max-width: 100%; /* Форма занимает доступную ширину */
		gap: 30px;
	}
	.form-group-textarea textarea,
	.form-fields-row {
		max-width: 100%; /* Растягиваются по ширине */
	}
}

@media (max-width: 768px) { /* Планшет - поля Имя, Email и Кнопка могут начать переноситься, если не влезают */
	.form-fields-row {
		flex-wrap: wrap; /* Разрешаем перенос, если элементы не влезают */
		justify-content: center; /* Центрируем, если перенеслись */
		gap: calc(var(--spacing-unit) * 2); /* 16px */
	}
	.form-group-input,
	.btn-submit-feedback {
		flex-basis: calc(50% - var(--spacing-unit)); /* Два элемента в ряд, если есть место */
		/* Или каждый на 100% и друг под другом, если так задумано на планшете */
		/* flex-basis: 100%; */ /* Это сделает их колонкой */
		max-width: 213px; /* Ограничиваем максимальную ширину */
	}
}


@media (max-width: 480px) { /* Мобильный - все поля и кнопка в колонку */
	.feedback-form-section {
		padding: calc(var(--spacing-unit) * 3) var(--container-padding-mobile);
		border-radius: 30px; /* Меньше скругление */
	}
	.feedback-main-title {
		font-size: 28px; /* Уменьшаем заголовок */
	}
	.feedback-form-element {
		gap: calc(var(--spacing-unit) * 2); /* 16px */
	}
	.form-fields-row {
		flex-direction: column; /* <<<< ВСЕ В КОЛОНКУ */
		align-items: center;   /* Центрируем */
		width: 100%;
		gap: calc(var(--spacing-unit) * 2); /* 16px */
	}
	.form-group-textarea textarea {
		height: 100px; /* Уменьшаем высоту текстового поля */
	}
	.form-group-input,
	.btn-submit-feedback {
		flex-basis: auto; /* Сбрасываем */
		width: 100%;      /* На всю доступную ширину (будет ограничено max-width формы) */
		max-width: 340px; /* Например, чтобы не были слишком широкими на мобильном */
	}
	.form-privacy-notice {
		font-size: 13px;
	}
}
/* === КОНЕЦ FEEDBACK FORM SECTION STYLES === */

/* === FOOTER STYLES === */
.footer {
	padding: calc(var(--spacing-unit) * 3) 0; /* 24px сверху/снизу */
	background-color: var(--color-background-page); /* Или другой фон, если нужен */
	/* border-top: 1px solid #e0e0e0; /* Если нужна линия над футером */
}

.footer-container { /* Это наш .container внутри .footer */
	display: flex;
	justify-content: space-between; /* Распределяем 3 элемента по ширине */
	align-items: center; /* Выравниваем по центру вертикально */
	flex-wrap: wrap; /* Позволяем перенос на мобильных */
	gap: calc(var(--spacing-unit) * 2); /* 16px - отступ между элементами, если они не растянуты */
}

/* Стили для всех текстовых блоков в футере */
.footer .copyrightN,
.footer .privacy-policy-block,
.footer .site-developer {
	font-family: var(--font-main); /* Bahnschrift */
	font-size: 15px;
	font-style: normal;
	font-weight: 300;
	line-height: 1.4; /* normal - лучше задать явно */
	color: var(--color-text-dark); /* #333 */
	margin: 0; /* Убираем стандартные отступы параграфов */
	text-align: left; /* По умолчанию текст слева в каждом блоке */
}

/* Скрываем <br> для переносов по умолчанию */
.br-tablet {
	display: none;
}

/* Ссылка "Политика конфиденциальности" - оранжевая */
.footer .privacy-link {
	color: var(--color-primary-orange);
	text-decoration: none;
}
.footer .privacy-link:hover {
	text-decoration: underline;
}

/* Стили для обязательных полей формы с оранжевой звездочкой */

/* Родительский блок для инпута, которому нужна звездочка */
.form-fields-row .form-group.form-group-input {
	position: relative; /* Необходимо для абсолютного позиционирования звездочки */
}

/* Стиль для самой звездочки, созданной через псевдоэлемент ::after */
.form-fields-row .form-group.form-group-input::after {
	content: '*'; /* Символ звездочки */
	position: absolute;
	top: 56%; /* Вертикально по центру инпута */
	right: 15px; /* Отступ от правого края инпута (подберите значение) */
	transform: translateY(-50%); /* Точное вертикальное центрирование */
	color: var(--color-primary-orange); /* Оранжевый цвет звездочки (из ваших переменных) */
	font-size: 16px; /* Размер звездочки (подберите значение) */
	pointer-events: none; /* Чтобы звездочка не мешала кликам по инпуту или кнопке очистки, если она есть */
	z-index: 2; /* Чтобы была поверх инпута, но под возможной кнопкой очистки, если она выше */
}

/* Возможно, понадобится немного подвинуть текст в инпуте влево, чтобы он не налезал на звездочку,
   если текст будет очень длинным. Это делается через padding-right для самого input. */
.form-fields-row .form-group.form-group-input input[type="text"],
.form-fields-row .form-group.form-group-input input[type="email"],
.form-fields-row .form-group.form-group-input input[type="tel"] { /* Добавьте другие типы инпутов, если нужно */
	padding-right: 35px; /* Отступ справа внутри инпута, чтобы текст не заезжал под звездочку (подберите значение) */
}

/* Если у вас есть кнопка очистки поля, которая тоже позиционируется справа,
   нужно будет аккуратно настроить их взаимное расположение (например, звездочку чуть левее кнопки очистки).
   Пример, если кнопка очистки имеет класс .clear-input-btn: */
.form-fields-row .form-group.form-group-input .clear-input-btn {
	right: 10px; /* Пример, если кнопка очистки ближе к краю */
	z-index: 3; /* Выше звездочки */
}
/* И тогда для звездочки ::after right нужно будет сделать больше, например: */
/* .form-fields-row .form-group.form-group-input::after {
    right: 40px; /* Чтобы звездочка была левее кнопки очистки
} */

/* Ссылка "компания «Пиксель Плюс»" - обычным цветом текста */
.footer .developer-link {
	color: var(--color-text-dark);
	text-decoration: none;
}
.footer .developer-link:hover {
	text-decoration: underline; /* Можно оставить или убрать */
	color: var(--color-primary-orange); /* При наведении можно делать оранжевой */
}


/* === ADAPTIVE STYLES FOR FOOTER === */

@media (max-width: 768px) { /* Планшет */
	.footer-container {
		/* justify-content: space-between; остается */
		/* gap можно немного уменьшить, если нужно */
		/* gap: var(--spacing-unit) * 1.5; */
	}

	.footer .copyrightN,
	.footer .privacy-policy-block,
	.footer .site-developer {
		font-size: 13px; /* Уменьшаем шрифт */
		line-height: 1.5; /* Чуть больше для читаемости мелкого шрифта */
	}

	/* Показываем <br> для переносов на планшете */
	.br-tablet {
		display: inline; /* или block, в зависимости от того, как <br> должен работать */
	}

	/* Чтобы элементы не были слишком узкими, если их три в ряд */
	.footer .copyrightN {
		flex-basis: calc(33.333% - var(--spacing-unit) * 2); /* Примерно треть, минус отступы */
		/* text-align: left; */
	}
	.footer .privacy-policy-block {
		flex-basis: calc(33.333% - var(--spacing-unit) * 2);
		text-align: center; /* Центральный элемент можно отцентрировать */
	}
	.footer .site-developer {
		flex-basis: calc(33.333% - var(--spacing-unit) * 2);
		text-align: right; /* Правый элемент по правому краю */
	}
}

@media (max-width: 600px) { /* Мобильные экраны */
	footer.footer {
		padding: 0;
	}

	.footer-container {
		flex-direction: column; /* Элементы в столбец */
		align-items: center;    /* Центрируем элементы в столбце */
		gap: calc(var(--spacing-unit) * 1.5); /* 12px - отступ между элементами в столбце */
	}

	.footer .copyrightN,
	.footer .privacy-policy-block,
	.footer .site-developer {
		/* font-size: 13px; уже унаследован */
		text-align: center; /* Все элементы по центру */
		flex-basis: auto; /* Сбрасываем flex-basis */
		width: 100%;      /* Занимают всю ширину */
	}

	/* Скрываем <br> для переносов на мобильных, так как каждый элемент на новой строке */
	.br-tablet {
		display: none;
	}
	/* Для мобильной версии, если нужны другие переносы, можно добавить <br class="br-mobile"> */
	/* И в тексте HTML будет:
	   ООО «НПЗ» • г. Нижний Новгород • 2025г. <br class="br-mobile">
	   Политика конфиденциальности <br class="br-mobile">
	   Создание сайта — компания «Пиксель Плюс»
	*/

}
/* === КОНЕЦ FOOTER STYLES === */
.ymaps-2-1-79-ground-pane {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}