/* ============================================================
   СТАТИЧЕСКИЕ СТРАНИЦЫ И ЛЕНДИНГИ (префикс lp-)
   Файл обслуживает static/*.tpl: о компании, услуги, доставка и т.п.
   Принцип вёрстки: секция — во всю ширину окна (фон, цветные полосы),
   .container внутри держит текст в отступах и совпадает с шапкой.
   Подключается после styles.css, чтобы переопределять его при нужде.
   ============================================================ */

.lp-section {
	padding: var(--sp-10) 0;
}

.lp-section--sunk {
	background: var(--surface-sunk);
}

.lp-section--accent {
	background: var(--accent-strong);
	color: var(--accent-ink);
}

.lp-section :last-child {
	margin-bottom: 0;
}

/* --- Хлебные крошки --- */
/* На лендингах не используются: у шаблона есть готовый блок .pagetools__crumbs со {speedbar}. */

/* --- Первый экран: карточка с фото, текст на затемнении (как .hero на главной) --- */
.lp-hero-img {
	padding: 0 0 var(--sp-6);
}

.lp-hero-card {
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: center;
	overflow: hidden;
	min-height: calc(var(--app-em)*27.5);
	/* Боковые отступы — как у .hero-copy на главной: текст не прижимается к краю карточки */
	padding: calc(var(--app-em)*3.25) calc(var(--app-em)*3.375) calc(var(--app-em)*2.75);
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow);
	/* В светлой теме затемнение белое (текст тёмный), в тёмной — тёмное (текст светлый).
	   Цвет текста берём из темы, поэтому и подложка задаётся готовым градиентом на тему. */
	/* Подложка под текстом заметно светлее, чем была: при .94 фото слева
	   почти пропадало («мутное»). Контраст тёмного текста это держит:
	   даже в худшем случае (тёмное пятно фото под белой вуалью .84)
	   расчётный контраст ≈ 7:1 при норме 4.5. */
	--hero-veil: linear-gradient(90deg,
			rgba(255, 255, 255, .90) 0%,
			rgba(255, 255, 255, .84) 32%,
			rgba(255, 255, 255, .50) 46%,
			rgba(255, 255, 255, .18) 60%,
			rgba(255, 255, 255, .04) 100%);
	/* Тот же принцип, но сверху вниз — для узких экранов, где текст во всю ширину */
	--hero-veil-v: linear-gradient(180deg,
			rgba(255, 255, 255, .95) 0%,
			rgba(255, 255, 255, .92) 45%,
			rgba(255, 255, 255, .66) 75%,
			rgba(255, 255, 255, .30) 100%);
	/* Мобильный герой: фото уходит под текст целиком, поэтому подложка почти белая на всей высоте */
	--hero-veil-m: linear-gradient(180deg,
			rgba(255, 255, 255, .97) 0%,
			rgba(255, 255, 255, .96) 40%,
			rgba(255, 255, 255, .94) 70%,
			rgba(255, 255, 255, .92) 100%);
	/* Зелёный для текста на accent-soft: у --accent-strong на этой подложке
	   контраст 4.46 — ниже нормы 4.5. Здесь 5.72. */
	--lp-accent-on-soft: #0b6d2c;
	/* Плашка: верхняя половина, низ растворяется в фото */
	--lp-badge-fill: var(--accent-strong);
	/* Затухание начинается ниже последней строки текста (она кончается на ~55% высоты), 
	   иначе контраст светлого текста падает ниже 4.5 */
	--lp-badge-fade: rgba(14, 128, 51, .55);
}

.lp-hero-card__bgwrap {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.lp-hero-card__bg {
	/* Фото по размеру обёртки. Анимация «дыхания» убрана 05.10.2026
	   по решению владельца: на его дисплее (дробный масштаб Windows) движение
	   фона читалось рывками, сделать его гладким не удалось.

	   Обрезку по закруглённому краю делает сама карточка (.lp-hero-card,
	   overflow: hidden). */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
}

.lp-hero-card__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hero-veil);
}

/* Тёмная тема: затемнение тёмное и плотнее — светлый текст на нём читается.
   Степень затемнения уменьшена по сравнению с исходной (было .95/.93/.68/.32/.20):
   фото под вуалью читалось как грязно-зелёное пятно. Цвет подложки почти
   нейтральный, без зелёного сдвига. */
[data-theme="dark"] .lp-hero-card {
	--hero-veil: linear-gradient(90deg,
			rgba(8, 12, 10, .88) 0%, rgba(8, 12, 10, .82) 32%, rgba(8, 12, 10, .48) 46%,
			rgba(8, 12, 10, .18) 60%, rgba(8, 12, 10, .05) 100%);
	--hero-veil-v: linear-gradient(180deg,
			rgba(10, 22, 16, .96) 0%, rgba(10, 22, 16, .94) 45%,
			rgba(10, 22, 16, .72) 75%, rgba(10, 22, 16, .36) 100%);
	--hero-veil-m: linear-gradient(180deg,
			rgba(10, 22, 16, .97) 0%, rgba(10, 22, 16, .96) 40%,
			rgba(10, 22, 16, .94) 70%, rgba(10, 22, 16, .92) 100%);
	--lp-accent-on-soft: var(--accent-strong);
	--lp-badge-fill: var(--accent-strong);
	--lp-badge-fade: rgba(110, 204, 143, .70);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lp-hero-card {
		--hero-veil: linear-gradient(90deg,
				rgba(8, 12, 10, .88) 0%, rgba(8, 12, 10, .82) 32%, rgba(8, 12, 10, .48) 46%,
				rgba(8, 12, 10, .18) 60%, rgba(8, 12, 10, .05) 100%);
		--hero-veil-v: linear-gradient(180deg,
				rgba(10, 22, 16, .96) 0%, rgba(10, 22, 16, .94) 45%,
				rgba(10, 22, 16, .72) 75%, rgba(10, 22, 16, .36) 100%);
		--hero-veil-m: linear-gradient(180deg,
				rgba(10, 22, 16, .97) 0%, rgba(10, 22, 16, .96) 40%,
				rgba(10, 22, 16, .94) 70%, rgba(10, 22, 16, .92) 100%);
		--lp-accent-on-soft: var(--accent-strong);
		--lp-badge-fill: var(--accent-strong);
		--lp-badge-fade: rgba(110, 204, 143, .55);
	}
}

.lp-hero-card__inner {
	display: grid;
	gap: var(--sp-4);
	justify-items: start;
}

/* Чип-надзаголовок — на мягком акцентном фоне темы.
   Цвет текста берём из --lp-accent-on-soft: в герое переменная задана темой
   карточки (там подложка темнее и нужен свой зелёный), в обычной секции её
   нет — тогда работает фолбэк на --accent-strong. Именно фолбэк (а не
   замещение цвета) нужен потому, что общий .lp-chip используется и в герое. */
.lp-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-2);
	border-radius: var(--r-pill);
	background: var(--accent-soft);
	color: var(--lp-accent-on-soft, var(--accent-strong));
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
}

.lp-chip .icon {
	width: calc(var(--app-em)*1.25);
	height: calc(var(--app-em)*1.25);
	color: inherit;
}

/* Базовые стили заголовка и лида — для любых лендингов */
.lp-title {
	margin-top: 0.5em;
	font-size: var(--fs-h1);
	letter-spacing: -.03em;
	line-height: 1.05;
	text-wrap: balance;
}

.lp-lead {
	max-width: calc(var(--app-em)*42);
	color: var(--news-text);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

/* Заголовок на карточке: цвета берём из темы, они сами читаются на её затемнении */
.lp-hero-card .lp-title {
	max-width: calc(var(--app-em)*33);
	color: var(--text);
	font-size: calc(var(--app-em)*3);
}

.lp-hero-card .lp-title em {
	color: var(--accent-strong);
	font-style: normal;
}

.lp-hero-card .lp-lead {
	max-width: calc(var(--app-em)*36);
	color: var(--news-text);
}

.lp-hero-card .lp-button {
	border: 0;
}

/* Второстепенная кнопка — светлая карточка на фото */
.lp-hero-card .lp-button--ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--app-em)*0.5625);
	min-height: var(--control-h);
	padding: 0 calc(var(--app-em)*1.125);
	border-radius: var(--r-lg);
	background: var(--surface);
	color: var(--text);
	font-size: var(--fs-ui);
	font-weight: 600;
	text-decoration: none;
	box-shadow: inset 0 0 0 var(--hair) var(--line);
	transition: background .2s ease, color .2s ease;
}

.lp-hero-card .lp-button--ghost:hover {
	background: var(--accent-soft);
	color: var(--accent-strong);
}

.lp-hero-card .lp-button--ghost:focus-visible {
	outline: calc(var(--hair)*2) solid var(--accent-strong);
	outline-offset: calc(var(--hair)*2);
}

/* Подзаголовок-утверждение под H1 */
.lp-hero-card__sub {
	max-width: calc(var(--app-em)*30);
	color: var(--text);
	font-size: calc(var(--app-em)*1.375);
	font-weight: 600;
	line-height: 1.3;
}

/* Строка преимуществ */
.lp-hero-card__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
	margin: var(--sp-2) 0 0;
	padding: 0;
	list-style: none;
}

.lp-hero-card__facts li {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--news-text);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.35;
}

/* Обёртка текста позиции нужна из-за flex: у .lp-hero-card__facts li текст
   и иконка — два flex-элемента, и прямой <br> внутри li стал бы flex-элементом,
   то есть перестал бы переносить строку. Внутри этой обёртки обычный поток.
   white-space: nowrap — каждая строка держится целиком («Более 15 лет»
   не разрывается пополам). */
.lp-hero-card__fact-text {
	white-space: nowrap;
}

/* Зачин позиции — жирнее основного текста. Отдельным классом, а не тегом <b>:
   в engine.css тег b переопределён на 600, отступить стилем нельзя
   (класс имеет приоритет над тегом). Здесь жирность задаётся только
   этим правилом. */
.lp-hero-card__fact-lead {
	font-weight: 700;
}

.lp-hero-card__fact-icon {
	display: grid;
	place-items: center;
	width: calc(var(--app-em)*3);
	height: calc(var(--app-em)*3);
	flex: none;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--lp-accent-on-soft);
}

.lp-hero-card__fact-icon .icon {
	width: calc(var(--app-em)*1.5);
	height: calc(var(--app-em)*1.5);
}

/* Зелёная плашка со скошенным левым краем.
   Занимает верхнюю половину высоты и растворяется вниз градиентом —
   не глухая заливка на всю высоту.
   Текст внутри отбит процентами — они считаются от ширины самой плашки,
   поэтому отступ держится при любой ширине окна. */
.lp-hero-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	height: 42%;
	width: min(26%, calc(var(--app-em)*23));
	background: linear-gradient(210deg,
			var(--lp-badge-fill) 0%,
			var(--lp-badge-fill) 30%,
			var(--lp-badge-fade) 70%,
			transparent 100%);
	clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
}

.lp-hero-card__badge-text {
	margin: 0;
	padding: calc(var(--app-em)*3.25) 8% 0 33%;
	color: var(--accent-ink);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.45;
}

.lp-hero-card__badge-text::after {
	content: "";
	display: block;
	width: calc(var(--app-em)*2.5);
	height: calc(var(--app-em)*0.1875);
	margin-top: var(--sp-4);
	background: currentColor;
	opacity: .85;
}

/* --- Изображения --- */
.lp-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

figure.lp-split__media {
	margin: 0;
}

/* В тёмной теме фото и карты НЕ приглушаются: раньше здесь стоял
   filter: brightness(.72) saturate(.9) от времён светлых заглушек, но на реальных
   снимках он читается как серая плёнка поверх картинки. */

/* --- Заголовок секции --- */
.lp-head {
	margin-bottom: var(--sp-8);
}

.lp-head__eyebrow {
	color: var(--accent-strong);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.lp-head h2 {
	margin-top: var(--sp-2);
	font-size: var(--fs-h2);
}

.lp-head p {
	max-width: calc(var(--app-em)*45);
	margin-top: var(--sp-3);
	color: var(--muted);
	font-size: var(--fs-sm);
}

/* --- Кнопки --- */
.lp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.lp-button {
	text-decoration: none;
}

/* --- Двухколоночный блок (текст + медиа) --- */
.lp-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	align-items: center;
	gap: var(--sp-10);
}

.lp-split--reverse>.lp-split__text {
	order: 2;
}

.lp-split--reverse>.lp-split__media {
	order: 1;
}

.lp-split__text {
	display: grid;
	gap: var(--sp-4);
}

.lp-split__text p {
	color: var(--news-text);
	font-size: var(--fs-body);
	line-height: 1.7;
}

.lp-split__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

/* Плавное приближение фото при наведении — как у «Нашей истории»:
   тот же множитель и та же кривая. Увеличивается сам <img>, а не контейнер:
   обрезку по скруглённому краю держит .lp-split__media (overflow: hidden),
   поэтому область обрезки не пересчитывается. */
.lp-split__media .lp-media {
	transition: transform 1.35s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) {
	.lp-split__media:hover .lp-media {
		transform: scale(1.04);
	}
}

/* Пользователь отключил анимации в системе — отклик не нужен */
@media (prefers-reduced-motion: reduce) {
	.lp-split__media .lp-media {
		transition: none;
	}

	.lp-split__media:hover .lp-media {
		transform: none;
	}
}

/* --- Метка-чип + крупный заголовок секции ---
   Общий приём для секций с чипом: пара «метка + h1» держится вместе
   (в колонке общий gap = sp-4, для неё это много).
   Кегль, цвет и интерлиньяж чипа перебивают `.lp-split__text p`:
   селектор «класс + тег» сильнее одного класса, поэтому без этого
   чип превратился бы в обычный абзац. --- */
.lp-sec-head {
	display: grid;
	justify-items: start;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

.lp-split__text .lp-chip {
	background: var(--accent-soft);
	color: var(--accent-strong);
	font-size: var(--fs-sm);
}

/* Размер — как у «Работаем по всей России»: --fs-h1 темы. */
.lp-sec-title {
	margin: 0;
	font-size: var(--fs-h1);
	line-height: 1.08;
	letter-spacing: -.02em;
}

.lp-sec-title em {
	color: var(--accent-strong);
	font-style: normal;
}

.lp-approach__list {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-approach__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--sp-3);
	color: var(--news-text);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

/* Кружок иконки — того же диаметра, что у .lp-point__icon.
   Фон белый, а не --accent-soft: секция лежит на --surface-sunk,
   и голубоватый кружок на ней терялся совсем. */
.lp-approach__icon {
	display: grid;
	place-items: center;
	width: calc(var(--app-em)*2.25);
	height: calc(var(--app-em)*2.25);
	border-radius: 50%;
	background: var(--surface);
	box-shadow: var(--shadow-tiny);
	color: var(--accent-strong);
}

.lp-approach__icon .icon {
	width: calc(var(--app-em)*1.25);
	height: calc(var(--app-em)*1.25);
}

.lp-approach__name {
	color: var(--text);
	font-weight: 700;
}

/* --- Логистика: контакты и примечания ---
   Жирный зачин отдельным классом, а не тегом <b>: в engine.css тег b
   переопределён на 600, класс перебивает его. --- */
.lp-geo__note-lead {
	color: var(--text);
	font-weight: 700;
}

.lp-geo__contacts {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--news-text);
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.lp-geo__contacts li {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.lp-geo__contacts .icon {
	width: calc(var(--app-em)*1.15);
	height: calc(var(--app-em)*1.15);
	flex: none;
	color: var(--accent-strong);
}

.lp-geo__contacts a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: inherit;
	text-decoration: none;
}

/* Кнопки — как в «Географии поставок»: белые с тонкой окантовкой.
   Иначе .soft-button на фоне секции почти не отличается от текста. */
.lp-geo .soft-button {
	background: var(--surface);
	box-shadow: inset 0 0 0 var(--hair) var(--line);
}

@media (hover: hover) {
	.lp-geo__contacts a:hover {
		color: var(--accent-strong);
	}
}

/* --- Почему выбирают нас: карточки + полоса метрик ---
   Блок занимает две строки: над полосой — обычный контейнер с отступами,
   сама полоса — во всю ширину окна, поэтому вынесена из .container.

   Фон — голубоватый, взятый замером с макета (#f9fafb: синий канал выше
   красного на 2). Токена такого оттенка в теме нет, поэтому значение
   задано здесь; в тёмной теме правило ниже перекрывает его. --- */
.lp-why {
	padding-bottom: 0;
	background: var(--surface-sunk);
}



/* Обращение к заголовку без .lp-head: плашка и заголовок стоят прямо в секции,
   как на макете (без общей обёртки с нижним отступом). */
.lp-why .lp-chip {
	background: var(--accent-soft);
	color: var(--lp-accent-on-soft, var(--accent-strong));
}

.lp-why__title {
	margin: var(--sp-4) 0 var(--sp-6);
	font-size: var(--fs-h1);
	line-height: 1.08;
	letter-spacing: -.02em;
}

.lp-why__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-why__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	/* Иконка и текст выровнены по верхнему краю: тогда плитки иконок
	   во всех карточках стоят на одной линии, независимо от длины текста. */
	align-items: start;
	align-content: start;
	gap: var(--sp-5);
	padding: var(--sp-5);
	/* Радиус карточки в образце ≈ 19.5 px при ширине 336 px; ближайший
	   токен проекта — --r-xl (22 px), разница 2 px незаметна. */
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow-tiny);
	/* Плавный отклик на наведение: карточка приподнимается, тень растёт.
	   Тот же приём и та же длительность, что у .lp-card в этом файле. */
	transition: box-shadow .2s ease, transform .2s ease;
}

/* Наведение на белую карточку.
   Условие (hover: hover) отсекает касательные экраны: на планшетах и телефонах
   :hover не сбрасывается и карточка залипает приподнятой. */
@media (hover: hover) {
	.lp-why__item:hover {
		/* 2 px вверх — как у .lp-card, чтобы отклик был единым по шаблону */
		transform: translateY(calc(var(--app-em)*-.125));
		/* --shadow-soft («средняя» тень темы) даёт заметный подъём
		   без резкого пятна: базовое состояние — --shadow-tiny. */
		box-shadow: var(--shadow-soft);
	}
}

/* Пользователь отключил анимации в системе.
   Сам переход гасит глобальное правило из styles.css (оно с !important
   исключает transform из transition-property), поэтому здесь достаточно
   снять подъём — как это сделано там же для .story-card. */
@media (prefers-reduced-motion: reduce) {
	.lp-why__item:hover {
		transform: none;
	}
}

/* Плитка иконки — как в образце: мягкий зелёный квадрат со скруглением.
   Размеры сняты с макета (карточка там ≈336 px, у нас ≈330 — масштаб 1:1):
   плитка ≈ 80 px, радиус плитки ≈ 14 px (это --r-lg), иконка внутри ≈ 45 px. */
.lp-why__icon {
	display: grid;
	place-items: center;
	width: calc(var(--app-em)*5);
	height: calc(var(--app-em)*5);
	flex: none;
	border-radius: var(--r-lg);
	background: var(--accent-soft);
	color: var(--accent-strong);
	/* Плитка прижата к верху карточки, а не центрируется по её высоте:
	   так все иконки в ряду стоят на одной линии, даже когда текст
	   в соседних карточках занимает разное число строк. */
	align-self: start;
	/* Плитка занимает обе строки своей колонки. Без этого авторазмещение
	   grid ставит текст во ВТОРУЮ колонку только для названия, а описание
	   уводит под плитку — название тогда обрезается по узкой колонке. */
	grid-row: span 2;
}

.lp-why__icon .icon {
	width: calc(var(--app-em)*2.75);
	height: calc(var(--app-em)*2.75);
}

.lp-why__name {
	align-self: start;
	/* Первая строка названия встаёт на уровень середины плитки иконки
	   (как на макете): высота плитки 80 px (--app-em*5, как у .lp-why__icon),
	   строка названия 24 px, отсюда отступ сверху (80 − 24) / 2 = 28 px.
	   Важно: множитель тот же (5), что у плитки, — иначе название
	   не сядет на её центр. */
	margin-top: calc((var(--app-em)*5 - var(--fs-h3)*1.25) / 2);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.25;
}

.lp-why__text {
	align-self: start;
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* --- Полоса метрик: во всю ширину окна, поверх затемнённого фото цеха ---
   Фото — собственная подложка-заглушка metrics-bg.webp; сама она уже затемнена
   и тонирована, поэтому в CSS добавляется только лёгкое затемнение слоем,
   чтобы белый текст читался на любой ширине окна (при растяжении видна
   разная часть кадра). */
.lp-why__strip {
	position: relative;
	margin-top: var(--sp-10);
	/* Высота полосы в образце 154 px при содержимом 52 px: отсюда отступ 48 px */
	padding: var(--sp-12) 0;
	/* Путь относительный, а не {THEME}/...: теги DLE подставляются только
	   в .tpl, в CSS они остаются текстом и картинка не загрузилась бы.
	   Относительно самого файла static.css путь images/... верный. */
	background: url("../images/metrics-bg.webp") center / cover no-repeat;
	isolation: isolate;
}

.lp-why__strip::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(8, 28, 19, .28);
}

.lp-why__metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-6);
	margin: 0;
	/* Те же боковые отступы, что у .container: полоса идёт во всю ширину окна,
	   а метрики внутри неё выровнены по карточкам — как на макете.
	   Отступы повторяют .container из styles.css: на обычных экранах половина
	   от sp-10 (= sp-5), на узких (до 47.5em) — половина от sp-6 (= sp-3).
	   Иначе метрики не совпали бы с колонкой карточек на телефоне. */
	padding: 0 max(var(--sp-5), calc((100% - var(--container)) / 2));
	list-style: none;
}

.lp-metric {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	color: #fff;
}

/* Плитка иконки в полосе — полупрозрачная светлая, чтобы фото проглядывало.
   В образце иконка ≈ 37 px в плитке ≈ 56 px. */
.lp-metric__icon {
	display: grid;
	place-items: center;
	width: calc(var(--app-em)*3.5);
	height: calc(var(--app-em)*3.5);
	flex: none;
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.lp-metric__icon .icon {
	width: calc(var(--app-em)*2.25);
	height: calc(var(--app-em)*2.25);
}

.lp-metric__body {
	display: grid;
	gap: calc(var(--sp-1) / 2);
}

.lp-metric__value {
	/* Высота цифр в образце ≈ 25 px при базовом 16 px — это уровень --fs-h1 */
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.lp-metric__label {
	font-size: var(--fs-sm);
	line-height: 1.3;
	color: rgba(255, 255, 255, .86);
}

/* --- Компания «Лама-ВМ»: фото + текст.
   БЕЗ белой подложки-карточки: блок лежит прямо на фоне секции, как на макете.
   Фон — --surface: в светлой теме белый (#ffffff), в тёмной — #212326.

   Переменная --lp-accent-on-soft задана здесь, чтобы пилюля «Наша история»
   выглядела точно так же, как плашка «О компании» в герое: мягкий зелёный фон
   и более тёмный зелёный текст. На такой пилюле базовый --accent-strong даёт
   контраст 4.46 — чуть ниже нормы AA 4.5; #0b6d2c даёт 5.72. */
.lp-story {
	background: var(--surface);
	--lp-accent-on-soft: #0b6d2c;
}

/* Тёмная тема: мягкая зелёная подложка сама тёмная (#1c2a21), поэтому тёмно-зелёный
   текст на ней не читался бы. Берём светлый зелёный темы — тот же приём,
   что у плашки в герое. */
[data-theme="dark"] .lp-story {
	--lp-accent-on-soft: var(--accent-strong);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lp-story {
		--lp-accent-on-soft: var(--accent-strong);
	}
}

.lp-story__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-10);
}

.lp-story__media {
	margin: 0;
	/* Пропорция 16:9 — как у исходного снимка: фото показывается целиком,
	   без обрезки. Высоту ряда задаёт более высокий столбец, а фото
	   центрируется по вертикали (align-items: center у .lp-story__card),
	   поэтому пустоты по краям не видно. */
	aspect-ratio: 16 / 9;
	align-self: center;
	border-radius: var(--r-lg);
	overflow: hidden;
}

.lp-story__media .lp-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Плавный отклик на наведение курсора (как у .story-card и .lama-category):
	   фото чуть наезжает внутрь рамки. Увеличение делает сам <img>, а не
	   контейнер: обрезку по скруглённому краю держит .lp-story__media
	   (overflow: hidden), поэтому при движении не пересчитывается область обрезки.
	   Длительность 1.35 s — втрое медленнее обычных откликов шаблона (.45 s). */
	transition: transform 1.35s cubic-bezier(.22, 1, .36, 1);
}

/* Наведение на фото.
   Условие (hover: hover) отсекает касательные экраны: на планшетах и телефонах
   :hover не сбрасывается и картинка залипает в увеличенном виде.
   Курсор и масштаб меняем только у самого фото. */
@media (hover: hover) {
	.lp-story__media:hover .lp-media {
		transform: scale(1.04);
	}
}

/* Пользователь отключил анимации в системе — отклик не нужен */
@media (prefers-reduced-motion: reduce) {
	.lp-story__media .lp-media {
		transition: none;
	}

	.lp-story__media:hover .lp-media {
		transform: none;
	}
}

/* justify-items: start — чтобы чип-надзаголовок остался пилюлей по своему тексту,
   а не растянулся на всю колонку (grid по умолчанию растягивает элементы).
   Абзацы при этом занимают всю доступную ширину: их max-content шире колонки. */
.lp-story__text {
	display: grid;
	justify-items: start;
	gap: var(--sp-4);
	align-content: center;
}

/* Пилюля «Наша история»: цвета приходят из .lp-story выше, поэтому вид точно
   такой же, как у плашки «О компании» в герое — мягкий зелёный фон, тёмно-зелёный
   текст, значок #i-history слева (он наследует цвет текста).
   Контраст текста на пилюле 5.72 — норма AA выдержана. */

/* Только абзацы: чип-пилюля под это правило не попадает (иначе цвет
   абзаца #3d3833 перебил бы цвет текста пилюли — у .lp-story__text p
   специфичность выше, чем у .lp-chip). */
.lp-story__text p:not(.lp-chip) {
	color: var(--news-text);
	font-size: var(--fs-body);
	line-height: 1.7;
}

.lp-story__title {
	margin-bottom: var(--sp-6);
	font-size: var(--fs-h1);
	line-height: 1.08;
	letter-spacing: -.02em;
}

/* Название компании в заголовке — зелёным (как в герое) */
.lp-story__title em {
	color: var(--accent-strong);
	font-style: normal;
}

/* --- Карточки ассортимента --- */
/* Шапка раздела «Ассортимент» — тот же стиль, что у блока
   «Почему выбирают нас»: плашка с иконкой слева и крупный заголовок
   с плотным межбуквенным интервалом. Раньше был .lp-head с мелким
   надзаголовком в разрядку — приводим к единому виду. */
.lp-catalog-section .lp-chip {
	background: var(--accent-soft);
	color: var(--lp-accent-on-soft, var(--accent-strong));
}

.lp-catalog__title {
	margin: var(--sp-4) 0 var(--sp-6);
	font-size: var(--fs-h1);
	line-height: 1.08;
	letter-spacing: -.02em;
}

.lp-catalog__lead {
	/* Как серый текст в разделе «Почему выбирают нас» (.lp-why__text):
	   тот же кегль 16 px и цвет --muted; ширина ограничена,
	   чтобы строка не тянулась во всю секцию. */
	max-width: calc(var(--app-em)*45);
	margin-bottom: var(--sp-8);
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* Примечание под таблицей характеристик: выглядит как комментарий,
   а не как оторванный абзац. */
.lp-specs__note {
	max-width: calc(var(--app-em)*50);
	margin-top: var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface-soft);
	border-left: 4px solid var(--accent-strong);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* Вводный lead в секции «Знакомые ситуации?» — под заголовком, перед карточками.
   Оформлен как выделенный блок-ответ: крупный текст на мягком светлом фоне. */
.lp-pick__lead {
	max-width: calc(var(--app-em)*50);
	margin: 0 0 var(--sp-8);
	padding: var(--sp-5) var(--sp-6);
	background: var(--surface-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	color: var(--text);
	font-size: var(--fs-lg);
	font-weight: 500;
	line-height: 1.45;
}

.lp-catalog {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Карточка ассортимента: фото сверху, под ним название и стрелка.
   Геометрия снята с макета: карточка ≈ 200 px шириной, фото 4:3 во всю
   ширину с внутренним отступом и скруглением, название в две строки внизу. */
.lp-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--sp-2);
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow-tiny);
	color: var(--text);
	font-size: var(--fs-ui);
	font-weight: 600;
	text-decoration: none;
	/* Плавный отклик на наведение: карточка приподнимается, тень растёт.
	   Длительность .6 s — втрое медленнее обычных откликов шаблона (.2 s),
	   по просьбе владельца. */
	transition: box-shadow .6s ease, color .6s ease, transform .6s ease;
}

.lp-card__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-lg);
	aspect-ratio: 4 / 3;
}

/* Увеличение фото — самое длинное из переходов карточки: 1.35 s
   (втрое медленнее базовых .45 s) с мягким замедлением в конце. */
.lp-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.35s cubic-bezier(.22, 1, .36, 1);
}

.lp-card__body {
	display: grid;
	/* Обе колонки по содержимому, пара «текст + стрелка» прижата к правому
	   краю карточки (justify-content: end). Ширина колонок по содержимому
	   нужна, чтобы стрелка стояла сразу за текстом, а не уезжала отдельно. */
	grid-template-columns: auto auto;
	justify-content: end;
	align-items: end;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-2) var(--sp-1);
}

.lp-card__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.3;
}

/* Стрелка — сразу за текстом, на уровне последней строки.
   Переход тоже замедлен втрое (.6 s вместо .2 s). */
.lp-card__icon {
	width: calc(var(--app-em)*1.125);
	height: calc(var(--app-em)*1.125);
	flex: none;
	color: var(--accent-strong);
	transition: transform .6s ease;
}

.lp-card__body .lp-card__icon {
	align-self: end;
	margin-bottom: calc(var(--app-em)*0.125);
}

@media (hover: hover) {
	.lp-card:hover {
		color: var(--accent-strong);
		transform: translateY(calc(var(--app-em)*-0.125));
		box-shadow: var(--shadow-soft);
	}

	/* Фото чуть наезжает внутрь рамки, стрелка сдвигается вправо */
	.lp-card:hover .lp-card__media img {
		transform: scale(1.05);
	}

	.lp-card:hover .lp-card__icon {
		transform: translateX(var(--sp-1));
	}
}

/* Пользователь отключил анимации в системе — отклик не нужен */
@media (prefers-reduced-motion: reduce) {
	.lp-card,
	.lp-card__media img,
	.lp-card__icon {
		transition: none;
	}

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

	.lp-card:hover .lp-card__media img {
		transform: none;
	}
}

.lp-card:focus-visible {
	outline: calc(var(--hair)*2) solid var(--accent-strong);
	outline-offset: calc(var(--hair)*2);
}

/* --- Преимущества --- */
/* --- География поставок: текст + карта России + панель условий ---
   Раскладка снята с макета: три колонки в отношении 1 : 1.32 (текст к карте)
   плюс панель по содержимому. На макете это 567 px и 750 px при контейнере
   1676 px, поэтому и отношение, и пропорции переносятся как есть.

   Фон голубоватый — тот же, что у блока «Почему выбирают нас» выше:
   на макете оба блока идут подряд на одном фоне #f9fafb. --- */
.lp-russia {
	background: var(--surface-sunk);
}

.lp-russia__grid {
	display: grid;
	/* Пропорции сняты с макета. Контейнер макета 1701 px, колонки:
	   текст 608 (35.7 %), карта 740 (43.5 %), панель 307 (18 %).
	   Отношение текст : карта = 1 : 1.22 — оно и задано здесь.

	   Важно: при такой ширине текстовой колонки абзац ломается на 4 строки,
	   как на макете. Это проверено замером переносов: строка «Мы
	   сотрудничаем с производственными предприятиями,» требует 480 px,
	   а «...складами,» в неё уже не влезает (567 px). */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) calc(var(--app-em)*17);
	column-gap: var(--sp-6);
	align-items: center;
}

.lp-russia__text {
	display: grid;
	justify-items: start;
	align-content: center;
	gap: var(--sp-4);
}

.lp-russia .lp-chip {
	background: var(--accent-soft);
	color: var(--lp-accent-on-soft, var(--accent-strong));
}

.lp-russia__title {
	margin: 0;
	/* Размер уровня H1 темы. Замер: высота прописной «Р» на макете 28 px
	   при контейнере 1701 px, то есть 1.65 % ширины контейнера. При нашей
	   колонке 1400 px это 23 px, что даёт --fs-h1 (34.4 px). */
	font-size: var(--fs-h1);
	line-height: 1.08;
	letter-spacing: -.02em;
}

/* «по всей России» — зелёным, курсив выключен */
.lp-russia__title em {
	color: var(--accent-strong);
	font-style: normal;
}

.lp-russia__lead {
	color: var(--news-text);
	font-size: var(--fs-body);
	line-height: 1.55;
}

/* Второе предложение начинается с новой строки — как на макете,
   где «Мы сотрудничаем…» стоит отдельной строкой, а не продолжает
   предыдущую. Это соответствует исходному тексту из двух предложений. */
.lp-russia__lead span {
	display: block;
}

/* Кнопка как на макете: белая с тонкой окантовкой. В теме .soft-button
   по умолчанию мягко-серая, поэтому фон переопределяется явно. */
.lp-russia .lp-russia__button {
	margin-top: var(--sp-8);
	background: var(--surface);
	color: var(--text);
	box-shadow: inset 0 0 0 var(--hair) var(--line);
}

.lp-russia__map {
	margin: 0;
}

.lp-russia__map img {
	display: block;
	width: 100%;
	height: auto;
	/* Карта в файле насыщеннее того, что на макете (у нас материк [194 226 208],
	   на макете [217 230 226]). Фильтр подобран замером в браузере: перебрал
	   5 вариантов и снял реальный рендер — этот дал минимальную ошибку (9
	   против 45 без фильтра). Подпись склада при этом только выигрывает:
	   контраст белого текста 6.08 (без фильтра 5.89). */
	filter: saturate(.6) brightness(1.06);
}

/* Тёмная тема: у файла карты вокруг материка лежит НЕПРОЗРАЧНАЯ светлая
   подложка (проверено по альфа-каналу: периметр файла прозрачный, а внутри
   есть светлое облако). Обычное затемнение не помогает: даже при
   brightness(.32) подложка даёт контраст 1.91 к фону — видно пятно.
   Инверсия с обратным поворотом тона делает подложку чёрной (сливается
   с фоном, контраст 1.07), а материк сохраняет зелёный тон и остаётся
   различимым (1.44). Вариант выбран замером из 6. */
[data-theme="dark"] .lp-russia__map img {
	filter: invert(1) hue-rotate(180deg) brightness(1.3);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lp-russia__map img {
		filter: invert(1) hue-rotate(180deg) brightness(1.3);
	}
}

/* Панель условий: белая карточка на голубоватом фоне — тот же приём,
   что у карточек в блоке «Почему выбирают нас».
   На макете панель по высоте занимает почти весь блок (≈96 %), поэтому она
   растягивается на всю строку сетки, а пункты центрируются внутри. */
.lp-russia__panel {
	display: grid;
	align-content: center;
	align-self: stretch;
	padding: var(--sp-5);
	border-radius: var(--r-xl);
	background: var(--surface);
}

.lp-russia__points {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-point {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-2);
}

/* Плитка иконки круглая — как на макете (там именно круги, не квадраты).
   Размер подобран замером: при 40 px самый длинный пункт
   («транспортные компании») начинал переноситься. */
.lp-point__icon {
	display: grid;
	place-items: center;
	width: calc(var(--app-em)*2.25);
	height: calc(var(--app-em)*2.25);
	flex: none;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent-strong);
}

.lp-point__icon .icon {
	width: calc(var(--app-em)*1.25);
	height: calc(var(--app-em)*1.25);
}

.lp-point__body {
	display: grid;
	gap: calc(var(--sp-1) / 2);
}

.lp-point__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.25;
}

.lp-point__label {
	color: var(--muted);
	font-size: var(--fs-meta);
	line-height: 1.35;
}

/* --- Вопросы и ответы --- */
/* Шапка секции здесь стоит отдельно от сетки, а не в колонке .lp-split__text,
   поэтому нужен свой отступ вниз — у .lp-sec-head он мал (sp-2). */
.lp-faq-section .lp-sec-head {
	margin-bottom: var(--sp-6);
}
.lp-faq {
	display: grid;
	gap: var(--sp-3);
}

.lp-faq__item {
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow-tiny);
}

.lp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-5);
	cursor: pointer;
	font-size: var(--fs-h4);
	font-weight: 600;
	list-style: none;
}

.lp-faq__q::-webkit-details-marker {
	display: none;
}

.lp-faq__q .icon {
	width: calc(var(--app-em)*1.125);
	height: calc(var(--app-em)*1.125);
	flex: none;
	color: var(--accent);
	transition: transform .2s ease;
}

.lp-faq__item[open] .lp-faq__q .icon {
	transform: rotate(180deg);
}

.lp-faq__q:focus-visible {
	outline: calc(var(--hair)*2) solid var(--accent-strong);
	outline-offset: calc(var(--hair)*-2);
	border-radius: var(--radius);
}

.lp-faq__a {
	padding: 0 var(--sp-5) var(--sp-5);
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.lp-faq__a a {
	color: var(--accent-strong);
	text-decoration: underline;
	text-decoration-thickness: var(--hair);
	text-underline-offset: calc(var(--app-em)*0.1875);
}

/* --- Призыв к действию ---
   Блок идёт во всю ширину контейнера, без ограничения по строке:
   так просил владелец (раньше стоял max-width 52em и текст упирался
   в невидимую границу посреди полосы). */
.lp-cta {
	display: grid;
	gap: var(--sp-4);
	justify-items: start;
}

/* CTA — последняя секция страницы. У .site-main есть нижний отступ
   (--sp-8), и из-под зелёной полосы он просвечивал серой полоской
   фона. Гасим его только там, где последняя секция — CTA. */
.site-main:has(> .lp-cta-section:last-child) {
	padding-bottom: 0;
}

.lp-cta h2 {
	color: var(--accent-ink);
	font-size: var(--fs-h2);
}

.lp-cta p {
	color: var(--accent-ink);
	opacity: .88;
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.lp-section--accent .primary-button {
	background: var(--accent-ink);
	color: var(--accent-strong);
}

.lp-section--accent .primary-button:hover {
	background: var(--surface);
	color: var(--accent-strong);
}

.lp-section--accent .soft-button {
	background: transparent;
	color: var(--accent-ink);
	box-shadow: inset 0 0 0 var(--hair) var(--accent-ink);
}

.lp-section--accent .soft-button:hover {
	background: var(--accent-ink);
	color: var(--accent-strong);
}

/* --- Главная страница (static/page-main.tpl) ---
   Свои правила только там, где общих блоков не хватило. Всё остальное —
   те же герой, секции, чипы, карточки, плитки, кнопки и CTA, что на
   «О компании»: ничего отдельного для главной не заводим. */

/* Карточка ассортимента с подписью: название и стрелка в первой строке,
   описание — во второй, на всю ширину. Модификатор, чтобы карточки
   «О компании» остались прежними (там только название и стрелка). */
.lp-card--desc .lp-card__body {
	grid-template-columns: minmax(0, 1fr) auto;
	justify-content: stretch;
	align-items: start;
}

/* Стрелка держится на уровне первой строки названия, а не уезжает вниз */
.lp-card--desc .lp-card__icon {
	align-self: start;
	margin: calc(var(--app-em) * .25) 0 0;
}

.lp-card__desc {
	grid-column: 1 / -1;
	margin-top: var(--sp-1);
	color: var(--muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.45;
}

/* Шесть плиток — три колонки по две в ряд.
   Ниже 66.25em работает общее правило .lp-why__list (две колонки),
   ниже 47.5em — одна: специфичность селекторов одинаковая, поэтому
   побеждают правила адаптива, записанные дальше по файлу. */
.lp-why__list--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Номер шага вместо иконки в плитке */
.lp-step__num b {
	color: inherit;
	font-size: calc(var(--app-em) * 1.75);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}

/* Три коротких факта в тизере «О компании» — одной строкой, с галочками */
.lp-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--news-text);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.lp-facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.lp-facts .icon {
	width: calc(var(--app-em) * 1.25);
	height: calc(var(--app-em) * 1.25);
	color: var(--accent-strong);
}

/* Отступ под сеткой карточек до одиночной кнопки («Вся продукция»,
   «Подобрать материал», «Обсудить заказ») */
.lp-section-actions {
	margin-top: var(--sp-8);
}

/* Мягкая кнопка на фоне страницы.
   .soft-button залит --surface-soft (#f8f7f6), а секции стоят на --bg
   (#f4f3f2): разница 1.03, кнопка читается как обычный текст с стрелкой.
   Делаем её белой с тонкой окантовкой — ровно так уже сделано для кнопок
   в «Контактах» на «О компании». */
.lp-button--outline {
	background: var(--surface);
	box-shadow: inset 0 0 0 var(--hair) var(--line);
}

/* Блок запроса цены: текст слева, короткая форма справа.
   Карточка на фоне секции --surface-sunk — как форма на «Контактах». */
.lp-quote {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
	align-items: center;
	gap: var(--sp-10);
	padding: var(--sp-8);
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow-soft);
}

.lp-quote__text {
	display: grid;
	justify-items: start;
	gap: var(--sp-4);
}

.lp-quote__text p:not(.lp-chip) {
	max-width: calc(var(--app-em) * 40);
	color: var(--news-text);
	font-size: var(--fs-body);
	line-height: 1.7;
}

/* Телефон под текстом: второй, самый быстрый путь к менеджеру */
.lp-quote__call {
	display: grid;
	gap: var(--sp-1);
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.lp-quote__call a {
	color: var(--accent-strong);
	font-size: var(--fs-h3);
	font-weight: 700;
	text-decoration: none;
}

.lp-quote__call a:hover {
	text-decoration: underline;
}

/* Поля — штатные .form-row / .form-label / .form-input из styles.css
   (те же, что в форме «Контактов»), здесь только подложка и отступы */
.lp-quote__form {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-6);
	border-radius: var(--r-lg);
	background: var(--surface-soft);
	box-shadow: inset 0 0 0 var(--hair) var(--line);
}

/* .form-row рассчитан на колонку формы и добавляет свой margin-top */
.lp-quote__form .form-row {
	margin-top: 0;
}

.lp-quote__submit {
	justify-content: center;
	margin-top: var(--sp-1);
}

/* Доставка: полоса пониже — фото 16:9 вместо 4:3, как у остальных
   двухколоночных блоков */
.lp-delivery .lp-split__media {
	aspect-ratio: 16 / 9;
}

/* Заголовок главной: «Упаковочные материалы» встают в одну строку.
   В «О компании» тот же заголовок ограничен 33em (528 px) и ломается на три
   строки; здесь ширина подобрана под первую строку (48 px × 22 знака ≈ 590 px),
   а перенос на вторую задаёт <br> в разметке. Плашка справа начинается
   с 1056 px — текст (≈ 664 px) до неё не достаёт.
   Селектор сильнее `.lp-hero-card .lp-title`, иначе базовые 33em победят. */
.lp-hero-card .lp-title.lp-title--wide {
	max-width: calc(var(--app-em) * 40);
}

/* --- Страницы продукции (static/page-product-*.tpl) --- */

/* Герой продукта: вместо фото — брендовая зелёная панель.
   Решение то же, что у полосы метрик: насыщенный фирменный цвет вместо
   фотографии-заглушки. Пузырьковый паттерн (тайл из окружений) намекает
   на тему упаковки и заполняет пустоту справа, где стоит слот под фото. */
.lp-hero-card--product {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Ccircle cx='42' cy='42' r='19'/%3E%3Ccircle cx='128' cy='36' r='13'/%3E%3Ccircle cx='84' cy='116' r='22'/%3E%3Ccircle cx='150' cy='128' r='9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 170px 170px repeat,
		linear-gradient(140deg, #12813a 0%, #0a5c25 100%);
}

/* Текст на панели — белый; акцент в заголовке — светлый зелёный
   (контраст с панелью ≈ 3,5:1 при крупном кегле — норма для заголовков). */
.lp-hero-card--product .lp-title {
	color: #fff;
}

.lp-hero-card--product .lp-title em {
	color: #9fe6b8;
}

.lp-hero-card--product .lp-hero-card__sub {
	color: rgba(255, 255, 255, .88);
}

.lp-hero-card--product .lp-lead {
	color: rgba(255, 255, 255, .92);
}

/* Главная кнопка на зелёном перекрашивается в белую: зелёная на зелёном
   терялась. Иконка наследует currentColor. */
.lp-hero-card--product .primary-button {
	background: #fff;
	color: #0b6d2c;
}

.lp-hero-card--product .primary-button:hover {
	background: #ecf3ee;
}

/* Второстепенная — прозрачная с белой рамкой: пара к белой primary */
.lp-hero-card--product .lp-button--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 var(--hair) rgba(255, 255, 255, .55);
}

.lp-hero-card--product .lp-button--ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* Факты на панели: текст белый (базовый --news-text на зелёном пропадает),
   плитка иконки — полупрозрачное белое «стекло», как в полосе метрик */
.lp-hero-card--product .lp-hero-card__facts li {
	color: #fff;
}

.lp-hero-card--product .lp-hero-card__fact-icon {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/* Пузырьковый паттерн медленно дрейфует: тайл 170 px, сдвиг кратен ему,
   поэтому цикл бесшовный. Градиент (второй слой) стоит на месте. */
@keyframes lp-pattern-drift {
	to {
		background-position: 340px 170px, 0 0;
	}
}

.lp-hero-card--product {
	animation: lp-pattern-drift 70s linear infinite;
}

/* Последовательное появление содержимого героя при загрузке */
@keyframes lp-hero-up {
	from {
		opacity: 0;
		transform: translateY(calc(var(--app-em)*1.125));
	}

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

.lp-hero-card--product .lp-hero-card__inner > * {
	animation: lp-hero-up .7s ease both;
}

.lp-hero-card--product .lp-hero-card__inner > :nth-child(2) {
	animation-delay: .08s;
}

.lp-hero-card--product .lp-hero-card__inner > :nth-child(3) {
	animation-delay: .16s;
}

.lp-hero-card--product .lp-hero-card__inner > :nth-child(4) {
	animation-delay: .24s;
}

.lp-hero-card--product .lp-hero-card__inner > :nth-child(5) {
	animation-delay: .32s;
}

.lp-hero-card--product .lp-hero-card__facts {
	animation: lp-hero-up .7s .4s ease both;
}

.lp-hero-card--product .lp-hero-product__media {
	animation: lp-hero-up .8s .5s ease both;
}

/* Галерея «Продукт в деле»: три фирменных кадра в ряд */
.lp-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-4);
	margin: 0;
}

.lp-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-tiny);
	transition: box-shadow .2s ease, transform .2s ease;
}

@media (hover: hover) {
	.lp-gallery__img:hover {
		transform: translateY(calc(var(--app-em)*-.125));
		box-shadow: var(--shadow-soft);
	}
}

/* Характеристики: таблица + фото продукта рядом */
.lp-specs-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: var(--sp-5);
	align-items: stretch;
}

.lp-specs-grid .lp-specs {
	height: 100%;
}

.lp-specs__media {
	margin: 0;
}

.lp-specs__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-tiny);
}

/* «Где применяется»: карточки с фото вместо плиток с иконками.
   Карточка становится блоком: фото сверху во всю ширину, подписи под ним. */
.lp-uses .lp-why__item {
	grid-template-columns: 1fr;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.lp-use__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.lp-uses .lp-why__name {
	margin: var(--sp-4) var(--sp-5) 0;
}

.lp-uses .lp-why__text {
	margin: 0 var(--sp-5) var(--sp-5);
}

/* Появление блоков при прокрутке: класс .reveal добавляет lib.js,
   без JS контент просто виден (прогрессивное улучшение) */
.reveal {
	opacity: 0;
	transform: translateY(calc(var(--app-em)*1.5));
	transition: opacity .6s ease, transform .6s ease;
}

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

/* Полное отключение анимаций по системной настройке */
@media (prefers-reduced-motion: reduce) {
	.lp-hero-card--product,
	.lp-hero-card--product .lp-hero-card__inner > *,
	.lp-hero-card--product .lp-hero-card__facts,
	.lp-hero-card--product .lp-hero-product__media {
		animation: none;
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Адаптив новых блоков: фото характеристик уходит под таблицу,
   галерея на телефоне собирается в стопку */
@media (max-width: 66.25em) {
	.lp-specs-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 47.5em) {
	.lp-gallery {
		grid-template-columns: 1fr;
	}
}

/* Слот под будущее фото: рамка-«стекло» справа на панели. Читается как
   намеренный макет («сюда встанет снимок»), а не как ошибка вёрстки. */
/* Слот под фото в герое: геометрия одна, а вид зависит от варианта.
   --slot — заглушка (пунктирная рамка-«стекло»), --photo — кадр на месте. */
.lp-hero-product__media {
	position: absolute;
	top: calc(var(--app-em)*3.25);
	right: calc(var(--app-em)*3.375);
	bottom: calc(var(--app-em)*8.5);
	width: 26%;
	margin: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
}

.lp-hero-product__media--slot {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--sp-3);
	padding: var(--sp-5);
	border: 2px dashed rgba(255, 255, 255, .38);
	background: rgba(255, 255, 255, .09);
	color: rgba(255, 255, 255, .85);
	text-align: center;
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.lp-hero-product__media--photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: inset 0 0 0 var(--hair) rgba(255, 255, 255, .25);
}

.lp-hero-product__media .icon {
	width: calc(var(--app-em)*3);
	height: calc(var(--app-em)*3);
	opacity: .75;
}

/* На средних ширинах текст важнее: слот убираем, текст дышит на всю панель */
@media (max-width: 66.25em) {
	.lp-hero-product__media {
		display: none;
	}
}

/* Характеристики товара: таблица «параметр — значение» на карточке.
   Значения прижаты вправо и выделены жирнее, названия приглушены; в тёмной
   теме карточка и линии берутся из токенов автоматически. */
.lp-specs {
	width: 100%;
	border: var(--hair) solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	border-collapse: separate;
	border-spacing: 0;
	padding: var(--sp-2) var(--sp-5);
	box-shadow: var(--shadow-tiny);
}

.lp-specs th,
.lp-specs td {
	padding: var(--sp-3) 0;
	border-bottom: var(--hair) solid var(--line);
	text-align: left;
	vertical-align: top;
}

.lp-specs th {
	width: 46%;
	font-weight: 500;
	color: var(--muted);
	padding-right: var(--sp-5);
}

.lp-specs td {
	text-align: right;
	font-weight: 600;
}

.lp-specs tr:last-child th,
.lp-specs tr:last-child td {
	border-bottom: 0;
}

/* Форма расчёта на обычном (не sunk) фоне: рамка отделяет карточку
   от белой страницы, тень остаётся фирменной. */
.lp-price-section:not(.lp-section--sunk) .lp-quote {
	border: var(--hair) solid var(--line);
}

/* --- Адаптив --- */
@media (max-width: 66.25em) {
	.lp-split {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	.lp-split--reverse>.lp-split__text {
		order: 1;
	}

	.lp-split--reverse>.lp-split__media {
		order: 2;
	}

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

	/* Компания: фото встаёт над текстом.
	   Пропорция 16:9 у .lp-story__media сохраняется и здесь: правила из
	   предыдущего блока для неё уже не нужны. */
	.lp-story__card {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	/* География поставок: три колонки не помещаются — карта и панель встают
	   под текстом, панель разворачивается в две колонки, чтобы не тянулась лентой */
	.lp-russia__grid {
		grid-template-columns: 1fr;
		row-gap: var(--sp-8);
	}

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

	/* Почему выбирают нас: карточки в две колонки, метрики — в две */
	.lp-why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Главная: блок запроса цены — текст над формой */
	.lp-quote {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	.lp-why__metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-6) var(--sp-8);
	}

	/* Герой: плашку прячем, затемнение делаем вертикальным */
	.lp-hero-card {
		min-height: calc(var(--app-em)*25);
	}

	.lp-hero-card__badge {
		display: none;
	}

	.lp-hero-card__veil {
		background: var(--hero-veil-v);
	}

	.lp-hero-card .lp-title {
		font-size: calc(var(--app-em)*2);
	}
}

@media (max-width: 47.5em) {
	.lp-section {
		padding: var(--sp-8) 0;
	}

	/* Главная: карточка запроса цены и поля внутри неё — компактнее */
	.lp-quote {
		padding: var(--sp-5);
	}

	.lp-quote__form {
		padding: var(--sp-5);
	}

	.lp-split__media {
		aspect-ratio: 16 / 9;
	}

	.lp-catalog {
		grid-template-columns: 1fr;
	}

	.lp-hero-img {
		padding-bottom: var(--sp-5);
	}

	/* Мобильный герой: боковые отступы, текст по центру, почти белая подложка.
	   На узком экране фото уходит под текст целиком, поэтому затемнение
	   делаем плотным по всей высоте — иначе текст теряется на светлых рулонах. */
	.lp-hero-card {
		min-height: auto;
		padding: var(--sp-8) var(--sp-6) var(--sp-6);
		border-radius: var(--radius);
		text-align: center;
	}

	.lp-hero-card__veil {
		background: var(--hero-veil-m);
	}

	.lp-hero-card__inner {
		justify-items: center;
	}

	.lp-hero-card .lp-title,
	.lp-hero-card .lp-lead,
	.lp-hero-card__sub {
		max-width: 100%;
	}

	.lp-hero-card .lp-title {
		font-size: calc(var(--app-em)*1.75);
	}

	.lp-hero-card__sub {
		font-size: calc(var(--app-em)*1.2);
	}

	.lp-hero-card__facts {
		justify-content: center;
		gap: var(--sp-4);
	}

	.lp-hero-card__facts li {
		font-size: var(--fs-meta);
	}

	.lp-hero-img .lp-actions {
		justify-content: center;
	}

	/* Почему выбирают нас: в одну колонку */
	.lp-why__list,
	.lp-why__metrics {
		grid-template-columns: 1fr;
	}

	/* Отступы полосы повторяют .container на узких экранах (sp-6, а не sp-10),
	   иначе метрики не совпадут с колонкой карточек */
	.lp-why__metrics {
		padding: 0 max(var(--sp-3), calc((100% - var(--container)) / 2));
	}

	.lp-why__title {
		font-size: calc(var(--app-em)*2);
	}

	.lp-why__item {
		padding: var(--sp-4);
	}

	/* География поставок: панель в одну колонку, заголовок меньше */
	.lp-russia__points {
		grid-template-columns: 1fr;
	}

	.lp-russia__title {
		font-size: calc(var(--app-em)*2);
	}
}

@media print {
	.lp-section--accent {
		background: none;
		color: #000;
	}

	.lp-section--accent .lp-cta h2,
	.lp-section--accent .lp-cta p {
		color: #000;
	}
}