/* Стили розничного лендинга. Поверх копии design-base
(brand -> scale -> layout -> semantic -> этот файл).
Происхождение: это утверждённые заказчиком макеты пяти первых экранов
(06.08.2026), перенесённые в боевую сборку один в один. Дизайн-язык общий с
оптовым лендингом - Oswald + Nunito, зелёный #157A46, киношный тёмный кадр
и светлые деловые секции.
Что важно знать, прежде чем править:
1. Первых экранов ПЯТЬ, и они лежат на странице все сразу. Показывает один
класс v-1..v-5 на , его ставит скрипт в синхронно.
2. Фотографии первых экранов заданы ФОНОМ, а не тегом ![]()
. Скрытый ![]()
браузер скачивает всё равно - посетитель тянул бы восемь лишних кадров
ради одного видимого. Фон скрытого блока не запрашивается вообще.
3. Переменные ниже - локальная палитра макета. Акцент и радиус берутся из
brand.css (пять ручек базы), остальное - оттенки, которых у базы нет. */
:root{
--fir-900:#0A1E15; --fir-800:#0E2A1E;
--green:var(--accent); --green-600:#12603A; --green-400:#31A96A; --green-050:#E9F1EA;
--paper:#F5F4EE; --sage:#E4E9DC; --line:#DEE1D4;
--ink:#13231A; --ink-soft:#51604F;
--cream:#F3F5EE; --cream-dim:#C3D0C1;
--gold:#C9A24A;
--font-display:var(--font-display-brand,"Oswald","PT Sans Narrow",sans-serif);
--font-brand:"Nunito","Segoe UI",system-ui,sans-serif;
--font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--wrap:1160px; --radius-card:var(--radius);
--shadow-card:0 26px 64px -30px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--paper);
line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
color:var(--green);margin:0 0 1rem}
.eyebrow--light{color:var(--green-400)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6ch;
font-family:var(--font-display);font-size:1.02rem;font-weight:600;letter-spacing:.03em;
text-transform:uppercase;line-height:1;padding:1.05rem 1.9rem;border-radius:999px;
border:2px solid transparent;background:var(--green);color:#fff;
box-shadow:0 14px 30px -14px rgba(21,122,70,.8)}
.btn--lg{padding:1.2rem 2.3rem;font-size:1.1rem}
.btn--ghost{background:transparent;border-color:rgba(243,245,238,.45);color:var(--cream);box-shadow:none}
/* ---------- Шапка ---------- */
.topbar{display:flex;align-items:center;gap:2.5rem;height:78px}
/* Название в две строки: имя бренда и кто мы (правка заказчика 06.08.2026).
Пояснение мельче и тише имени - иначе шапка спорит с заголовком экрана. */
.topbar__brand{display:block;font-family:var(--font-brand);letter-spacing:-.01em;line-height:1.2}
.topbar__brand b{display:block;font-weight:800;font-size:1.35rem}
.topbar__brand i{display:block;font-style:normal;font-weight:400;font-size:.78rem;
opacity:.72;letter-spacing:0;margin-top:.15rem}
.topbar__nav{display:flex;gap:1.9rem;font-size:.92rem;font-weight:500;margin-left:auto}
.topbar__phone{font-family:var(--font-display);font-weight:600;font-size:1.12rem;letter-spacing:.02em}
.topbar--over{position:absolute;top:0;left:0;right:0;z-index:3;color:var(--cream)}
.topbar--over .topbar__nav{color:var(--cream-dim)}
.topbar--light{background:#fff;border-bottom:1px solid var(--line)}
/* ---------- ФОРМАТ А: киношный полноэкранный кадр ---------- */
.heroA{position:relative;min-height:100vh;display:flex;align-items:center;
overflow:hidden;background:var(--fir-900)}
.heroA__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.heroA__scrim{position:absolute;inset:0;
background:
linear-gradient(100deg,rgba(10,30,21,.94) 0%,rgba(10,30,21,.86) 34%,rgba(10,30,21,.38) 62%,rgba(10,30,21,.24) 100%),
linear-gradient(to top,rgba(10,30,21,.75) 0%,rgba(10,30,21,0) 42%)}
.heroA__body{position:relative;z-index:2;width:100%;padding-top:78px}
.heroA__col{max-width:730px;color:var(--cream)}
/* Интерлиньяж 1.1, а не .98 (правка заказчика 06.08.2026): строки заголовка
стояли слишком тесно. */
.heroA h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
font-size:clamp(2.6rem,4.4vw,4rem);line-height:1.1;letter-spacing:-.005em;margin:0 0 1.3rem}
.heroA h1 em{font-style:normal;color:var(--green-400)}
/* Заголовок оффера 3 длиннее прочих - кегль на ступень ниже, чтобы не рвался
на четвёртую строку с висящим словом. */
.heroA h1.h1--long{font-size:clamp(2.3rem,3.7vw,3.4rem)}
.heroB h1.h1--long{font-size:clamp(1.9rem,2.6vw,2.5rem)}
.hero__lead{font-size:1.16rem;color:var(--cream-dim);margin:0 0 2rem;max-width:36em}
.hero__cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.hero__note{font-size:.9rem;color:var(--cream-dim);max-width:20rem;line-height:1.45}
.hero__trust{display:flex;gap:2.4rem;list-style:none;margin:2.8rem 0 0;padding:2rem 0 0;
border-top:1px solid rgba(243,245,238,.16);color:var(--cream)}
.hero__trust li{max-width:11rem}
.hero__trust b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.5rem;
line-height:1;letter-spacing:.01em;color:var(--green-400)}
.hero__trust span{font-size:.85rem;color:var(--cream-dim);display:block;margin-top:.35rem}
/* Плашка акции в углу кадра */
.promo-chip{position:absolute;right:40px;bottom:40px;z-index:2;
background:rgba(21,122,70,.92);color:#fff;border-radius:var(--radius-card);
padding:1.05rem 1.5rem;max-width:19rem;box-shadow:var(--shadow-card)}
.promo-chip b{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
font-size:1.35rem;line-height:1.05;letter-spacing:.02em}
.promo-chip span{display:block;font-size:.86rem;opacity:.92;margin-top:.3rem}
/* ---------- ФОРМАТ Б: сплит, светлая половина + кадр ---------- */
.heroB{display:grid;grid-template-columns:1fr auto;min-height:calc(100vh - 79px)}
.heroB__col{display:flex;flex-direction:column;justify-content:center;
padding:4rem clamp(2rem,4.4vw,4.5rem) 4rem;max-width:none}
.heroB__inner{max-width:33rem;margin-left:auto;width:100%}
.heroB h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
font-size:clamp(2.3rem,3.4vw,3.3rem);line-height:1.12;margin:0 0 1.2rem;color:var(--ink)}
.heroB h1 em{font-style:normal;color:var(--green)}
.hero__lead{font-size:1.08rem;color:var(--ink-soft);margin:0 0 2rem}
.hero__cta{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.hero__note{font-size:.88rem;color:var(--ink-soft)}
.hero__trust--pills{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:2.4rem}
.heroB__pill{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.heroB__pill b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.18rem;
line-height:1.1;color:var(--green)}
.heroB__pill span{font-size:.8rem;color:var(--ink-soft);display:block;margin-top:.2rem;line-height:1.35}
.heroB__media{position:relative;overflow:hidden;background:var(--fir-900)}
.heroB__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroB__tag{position:absolute;left:28px;bottom:28px;background:rgba(10,30,21,.86);color:var(--cream);
border-radius:12px;padding:.7rem 1.1rem;font-size:.86rem;backdrop-filter:blur(3px)}
.heroB__tag b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05rem;
text-transform:uppercase;letter-spacing:.03em;color:#fff}
/* ---------- ФОРМАТ В: «живой шоурум» ----------
Восстановлен hero-вариант C оптового лендинга (удалён из него коммитом
90842ef, когда заказчик выбрал вариант A). Слева оффер на «дышащем» фоне -
размытой копии активного слайда; справа 54% экрана занимает витрина, которая
сама перелистывает линейку елей. Ель показывается ЦЕЛИКОМ (contain), поля
закрывает просвечивающий размытый фон. В макете слайд статичный - на живой
странице он меняется каждые 5 секунд с кроссфейдом. */
.heroC{position:relative;min-height:100vh;display:flex;align-items:center;
overflow:hidden;background:var(--fir-900)}
.heroC__bg{position:absolute;inset:-6%;background:#0A1E15 center/cover no-repeat;
filter:blur(26px) brightness(.5) saturate(1.15)}
.heroC__bgshade{position:absolute;inset:0;background:linear-gradient(90deg,
rgba(8,20,14,.9) 0%,rgba(8,20,14,.78) 30%,rgba(8,20,14,.55) 44%,
rgba(8,20,14,.15) 60%,rgba(8,20,14,0) 75%)}
.heroC__stage{position:absolute;top:0;right:0;bottom:0;width:54%;overflow:hidden}
.heroC__slide{position:absolute;inset:0;background:transparent center no-repeat;
background-size:contain}
.heroC__stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg,rgba(10,30,21,.55) 0%,rgba(10,30,21,.08) 16%,transparent 30%),
linear-gradient(180deg,rgba(10,30,21,.34) 0%,transparent 20% 58%,rgba(10,30,21,.85) 100%)}
.heroC__meta{position:absolute;left:2rem;right:2rem;bottom:1.5rem;z-index:2;
display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.heroC__kind{display:block;font-family:var(--font-display);font-weight:700;
text-transform:uppercase;font-size:1.9rem;line-height:1.05;letter-spacing:.02em;
color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.heroC__sub{display:block;font-size:.92rem;color:#DFE8DC;margin-top:.3rem;
text-shadow:0 1px 8px rgba(0,0,0,.7)}
.heroC__dots{display:flex;gap:.45rem;padding-bottom:.5rem;flex-shrink:0}
.heroC__dots i{width:30px;height:3px;border-radius:2px;background:rgba(243,245,238,.3)}
.heroC__dots i.is-on{background:var(--green-400)}
/* Текст отодвинут от левого края (правка заказчика 06.08.2026): в панели 46%
колонка упиралась в край окна. */
.heroC__body{position:relative;z-index:2;width:46%;padding:78px 0 0 clamp(1.5rem,3.4vw,3.5rem)}
.heroC__col{color:var(--cream);padding-right:2.5rem}
.heroC h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
font-size:clamp(1.9rem,2.9vw,2.9rem);line-height:1.12;margin:0 0 1.1rem}
.heroC h1 em{font-style:normal;color:var(--green-400)}
.hero__lead{font-size:1.05rem;color:var(--cream-dim);margin:0 0 1.8rem}
.hero__note{font-size:.88rem;color:var(--cream-dim);margin:.9rem 0 0;max-width:26rem}
.hero__trust{display:flex;gap:1.8rem;list-style:none;margin:2.2rem 0 0;padding:1.6rem 0 0;
border-top:1px solid rgba(243,245,238,.16)}
.hero__trust b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.35rem;
line-height:1;color:var(--green-400)}
.hero__trust span{font-size:.8rem;color:var(--cream-dim);display:block;margin-top:.3rem}
/* ---------- Секции ---------- */
.section{padding:100px 0}
.section--paper{background:var(--paper)}
.section--sage{background:var(--sage)}
.section__head{max-width:44rem;margin-bottom:3.2rem}
.section h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
font-size:clamp(2rem,3.1vw,2.9rem);line-height:1.02;margin:0 0 1rem}
.section__lead{font-size:1.1rem;color:var(--ink-soft);margin:0}
/* ---------- Лидеры продаж ---------- */
.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.lcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;
display:flex;flex-direction:column;box-shadow:0 20px 44px -34px rgba(0,0,0,.45)}
.lcard__frame{position:relative;aspect-ratio:4/5;background:var(--sage);overflow:hidden}
.lcard__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.lcard__body{padding:1.5rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.lcard__name{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
font-size:1.32rem;line-height:1.1;margin:0}
.lcard__why{font-size:.95rem;color:var(--ink-soft);margin:0}
.leaders__foot{display:flex;align-items:center;justify-content:space-between;gap:2rem;
margin-top:2.6rem;flex-wrap:wrap}
.leaders__note{font-size:.92rem;color:var(--ink-soft);margin:0;max-width:34rem}
/* ---------- Отзывы: раскладка один в один с оптовым лендингом ----------
Телефон 360fr + колонка отзывов 530fr: при этих долях низ колонок сходится
ровно (высота телефона = (360-18)x2200/1177+18 = 657px; отзывы 539x250 и
538x401 + промежуток 16px дают ту же высоту при W=530). Меняются скрины -
пересчитать W, иначе низ колонок разъедется. */
.vk{background:var(--fir-900);color:var(--cream);padding:100px 20px}
.vk__wrap{max-width:1000px;margin:0 auto}
.vk__head{text-align:center;margin-bottom:2.6rem}
.vk__title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.06;margin:0 0 .8rem;color:#fff}
.vk__lead{margin:0 0 1.8rem;font-size:1.08rem;color:var(--cream-dim)}
.btn--vk{background:#0077FF;color:#fff;box-shadow:0 16px 34px -16px rgba(0,119,255,.95)}
.btn--vk svg{width:20px;height:20px}
/* Кладка в две колонки: у скринов отзывов высоты разные, сетка с рядами
оставляла бы дыры. Сколько файлов лежит в assets/reviews - столько карточек. */
.vk-revs{columns:2;column-gap:20px}
.vk-rev{display:block;break-inside:avoid;margin:0 0 20px;overflow:hidden;border-radius:14px;
background:#17181A;border:1px solid rgba(255,255,255,.08)}
.vk-rev img{width:100%;height:auto;display:block}
.vk__foot{text-align:center;margin-top:1.2rem}
.vk__empty{color:var(--cream-dim);text-align:center}
/* ============ Остальные блоки страницы ============ */
/* Полоса доверия - сразу под первым экраном, тонкая, без картинок */
.strip{background:var(--fir-900);color:var(--cream);padding:26px 0}
.strip__list{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;margin:0;padding:0}
.strip__list li{border-left:2px solid var(--green-400);padding-left:14px}
.strip__list b{display:block;font-family:var(--font-display);font-weight:600;
text-transform:uppercase;font-size:.98rem;letter-spacing:.01em}
.strip__list span{display:block;font-size:.82rem;color:var(--cream-dim);margin-top:.25rem}
/* Литая или плёнка: два кадра одним планом рядом */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.compare__side{margin:0}
.compare__side img,.compare__slot{width:100%;aspect-ratio:3/2;border-radius:var(--radius-card);
object-fit:cover;display:block}
.compare__slot{background:repeating-linear-gradient(45deg,#EDEFE6 0 12px,#E6E9DE 12px 24px);
border:2px dashed #B9C0AE;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:.5rem;text-align:center;padding:1.5rem}
.compare__slot span{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
font-size:1.05rem;color:var(--ink-soft)}
.compare__slot i{font-style:normal;font-size:.85rem;color:var(--ink-soft);max-width:24rem}
.compare figcaption{margin-top:1rem;font-size:.95rem;color:var(--ink-soft)}
.compare figcaption b{display:block;font-family:var(--font-display);font-weight:600;
text-transform:uppercase;font-size:1.15rem;color:var(--ink);margin-bottom:.35rem}
/* Сравнительная таблица: наша колонка выделена, остальные приглушены */
.tablewrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:.95rem;min-width:720px}
.cmp th,.cmp td{padding:.95rem 1.1rem;text-align:left;vertical-align:top;
border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
font-size:.95rem;letter-spacing:.02em;color:var(--ink-soft);border-bottom:2px solid var(--line)}
.cmp thead th.is-us{color:var(--green);border-bottom-color:var(--green)}
.cmp tbody th{width:9.5rem;font-weight:600;color:var(--ink)}
.cmp td{color:var(--ink-soft)}
.cmp td.is-us{color:var(--ink);font-weight:600;background:var(--green-050)}
/* Цены: диапазоны и три закрывателя возражения «дорого» */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:1.6rem 1.8rem}
.price__kind{display:block;font-size:.88rem;color:var(--ink-soft);text-transform:uppercase;
letter-spacing:.04em;font-weight:600}
.price__num{display:block;font-family:var(--font-display);font-weight:700;
font-size:2.1rem;line-height:1.05;margin:.5rem 0 .4rem;white-space:nowrap}
.price__note{display:block;font-size:.86rem;color:var(--ink-soft)}
.closers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.closer{border-left:3px solid var(--green);padding:.2rem 0 .2rem 1.1rem;
font-size:.93rem;color:var(--ink-soft)}
.closer b{display:block;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
font-size:1.05rem;color:var(--ink);margin-bottom:.35rem}
/* Три шага */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;margin:0;padding:0}
.steps li{position:relative;padding-top:.4rem}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
border-radius:50%;background:var(--green);color:#fff;font-family:var(--font-display);
font-weight:700;font-size:1.15rem;margin-bottom:.9rem}
.steps b{display:block;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
font-size:1.2rem;margin-bottom:.4rem}
.steps p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.steps__warn{margin:2.2rem 0 0;padding:1.1rem 1.3rem;background:var(--green-050);
border-radius:var(--radius-card);font-size:.95rem;color:var(--ink)}
/* О производстве */
.about{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.about__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-card);display:block}
.about__facts{display:flex;flex-direction:column;gap:1.5rem}
.fact{font-size:.95rem;color:var(--ink-soft)}
.fact b{display:block;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
font-size:1.15rem;color:var(--ink);margin-bottom:.35rem}
/* Вопросы */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.qa b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.15rem;
color:var(--ink);margin-bottom:.4rem}
.qa p{margin:0;font-size:.93rem;color:var(--ink-soft)}
/* Финальный призыв */
.finale{background:var(--fir-900);color:var(--cream);padding:88px 0;text-align:center}
.finale h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.1;margin:0 auto 1rem;max-width:20em;color:#fff}
.finale p{max-width:38rem;margin:0 auto 2rem;color:var(--cream-dim)}
/* Страница целиком одним снимком: hero задан в 100vh, и при высоком окне
он растягивается на весь кадр. Здесь фиксируем ему рост обычного экрана,
чтобы под ним поместились лидеры и отзывы. На живой странице остаётся 100vh. */
.fullpage .heroA,.fullpage .heroC{min-height:900px}
.fullpage .heroB{min-height:821px}
/* ============ МОБИЛЬНАЯ ВЁРСТКА ============
Ширина 900px и уже. Правила разложены в том же порядке, что и десктопные.
Главное: у всех трёх форматов первого экрана снимается 100vh - на телефоне
контент выше экрана, и жёсткая высота обрезала бы кнопку. */
@media (max-width: 900px){
/* Поля по бокам: 20px читались как «впритык к краю» (правка заказчика). */
.wrap{padding:0 26px}
/* Шапка: разделы прячем, оставляем имя и телефон - на телефоне якорное меню
всё равно не нажимают, а место оно съедает. */
/* padding-block, а не padding: короткая запись обнуляла боковые поля,
которые задаёт .wrap, и название с номером липли к краям экрана. */
.topbar{height:auto;padding-block:14px;gap:1rem}
.topbar__nav{display:none}
.topbar__brand b{font-size:1.05rem}
.topbar__brand i{font-size:.68rem}
.topbar__phone{font-size:1rem;margin-left:auto}
/* Формат А. display:block обязателен: .heroA - флекс-контейнер, и плашка
акции, ставшая статичной, вставала бы флекс-элементом СБОКУ от текста
и уезжала за правый край. */
.heroA,.fullpage .heroA{min-height:auto;display:block}
.heroA__body{padding:104px 0 36px}
.heroA h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
.hero__lead{font-size:1rem;margin-bottom:1.6rem}
.hero__cta{flex-direction:column;align-items:flex-start;gap:.9rem}
.hero__cta .btn{width:100%}
.hero__note{max-width:none}
.hero__trust{flex-wrap:wrap;gap:1.1rem 1.4rem;margin-top:2rem;padding-top:1.4rem}
.hero__trust li{flex:0 0 calc(50% - .7rem);max-width:none}
.hero__trust b{font-size:1.25rem}
/* Плашка акции из угла кадра переезжает в поток под контент: поверх фото
на узком экране она накрывала бы кнопку. */
.promo-chip{position:static;margin:0 20px 28px;max-width:none}
/* Формат Б: колонки друг под другом, фото обычным кадром */
.heroB,.fullpage .heroB{display:flex;flex-direction:column;min-height:auto}
.heroB__media{order:-1}
.heroB__col{order:0}
.heroB__col{padding:2.4rem 20px 2.6rem}
.heroB__inner{max-width:none;margin-left:0}
.heroB h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
.hero__cta .btn{width:100%}
.hero__trust--pills{grid-template-columns:1fr;gap:.5rem;margin-top:1.8rem}
/* На телефоне кадру задаём пропорции самого снимка: ель видна целиком
и без полей по бокам. */
.heroB__media{aspect-ratio:3/4}
.heroB__media img{padding:0}
.heroB__tag{left:16px;right:16px;bottom:16px}
/* Формат В: витрина отдельным кадром сверху, оффер под ней */
.heroC,.fullpage .heroC{min-height:auto}
.heroC__stage{position:relative;width:100%;height:auto;aspect-ratio:1/1}
.heroC__body{width:100%;padding:1.6rem 0 2.6rem}
.heroC__col{padding-right:0}
.heroC h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
.heroC__meta{left:1rem;right:1rem;bottom:1rem}
.heroC__kind{font-size:1.25rem}
.heroC .btn{width:100%}
.hero__note{max-width:none}
.hero__trust{flex-wrap:wrap;gap:1.1rem 1.4rem;margin-top:1.8rem;padding-top:1.4rem}
.hero__trust li{flex:0 0 calc(50% - .7rem)}
/* Размытый «дышащий» фон на телефоне не виден за кадром - гасим, чтобы
не жечь батарею фильтром blur на весь экран. */
.heroC__bg{filter:none;background:var(--fir-900)}
.heroC__bgshade{background:linear-gradient(180deg,rgba(8,20,14,0) 0%,rgba(8,20,14,.9) 40%)}
/* Секции и лидеры продаж */
.section{padding:56px 0}
.section__head{margin-bottom:2rem}
.section h2{font-size:clamp(1.7rem,7vw,2.2rem)}
.section__lead{font-size:1rem}
.leaders{grid-template-columns:1fr;gap:20px}
.leaders__foot{flex-direction:column;align-items:stretch;gap:1.2rem;margin-top:1.8rem}
.leaders__foot .btn{width:100%}
/* Отзывы: кладка в одну колонку, скрин читается во всю ширину */
.vk{padding:56px 26px}
.vk__wrap{padding:0}
.vk__title{font-size:clamp(1.6rem,7vw,2.1rem)}
.vk__lead{font-size:1rem}
.vk-revs{columns:1}
.vk__foot .btn{width:100%}
}
/* ============ КАРУСЕЛЬ ============
Листание - обычный горизонтальный скролл с прилипанием: на телефоне
свайп работает сам, скрипт добавляет только стрелки и точки. */
.car{position:relative}
.car__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;padding-bottom:4px;
scrollbar-width:none;-ms-overflow-style:none}
.car__track::-webkit-scrollbar{display:none}
.car__track > *{scroll-snap-align:start;flex:0 0 auto}
.car__nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:1.6rem}
.car__dots{display:flex;gap:.45rem}
.car__dot{width:30px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
background:rgba(19,35,26,.2);transition:background .25s}
.car__dot.is-on{background:var(--green)}
.car__arrows{display:flex;gap:.6rem}
.car__arr{width:46px;height:46px;border-radius:50%;cursor:pointer;
border:1px solid var(--line);background:#fff;color:var(--ink);
font-size:1.1rem;line-height:1;transition:opacity .2s,border-color .2s}
.car__arr:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.car__arr:disabled{opacity:.32;cursor:default}
/* Тёмная секция отзывов: точки и стрелки на светлом фоне не видны */
.car--dark .car__dot{background:rgba(243,245,238,.25)}
.car--dark .car__dot.is-on{background:var(--green-400)}
.car--dark .car__arr{background:transparent;border-color:rgba(243,245,238,.32);color:var(--cream)}
.car--dark .car__arr:hover:not(:disabled){border-color:var(--green-400);color:var(--green-400)}
/* Ширины карточек в каруселях. Подобраны так, чтобы край следующей карточки
выглядывал - иначе не видно, что блок листается. */
.car__track.leaders{display:flex;grid-template-columns:none}
.car__track.leaders .lcard{width:460px}
/* Скрины отзывов разной высоты. Без flex-start карточки тянутся до самой
высокой, и под коротким отзывом висит пустая чёрная плашка. */
.car__track.vk-revs{display:flex;columns:auto;align-items:flex-start}
.car__track.vk-revs .vk-rev{width:520px;margin:0}
/* На компьютере лидеры продаж - не карусель: три карточки в ряд целиком
(правка заказчика 06.08.2026, третья карточка была обрезана краем). */
@media (min-width: 901px){
.car--leaders .car__track.leaders{display:grid;grid-template-columns:repeat(3,1fr);
overflow:visible;gap:28px}
.car--leaders .car__track.leaders .lcard{width:auto}
.car--leaders .car__nav{display:none}
}
/* Карусели на телефоне: карточка почти во всю ширину, край следующей виден */
@media (max-width: 900px){
.car__track{gap:14px}
.car__track.leaders .lcard{width:84vw}
.car__track.vk-revs .vk-rev{width:84vw}
.car__nav{margin-top:1.2rem}
.car__arr{width:42px;height:42px}
}
/* ============ ПРАВКИ ПОСЛЕ ПРОСМОТРА В БРАУЗЕРЕ 06.08.2026 ============
Замечания заказчика: шапка уезжает, разделы не кликаются, сплит на широком
экране разваливается, на телефоне шапка налезает на кадр. */
/* Клик по разделу листает к блоку, а не прыгает */
html{scroll-behavior:smooth}
#lidery,#otzyvy{scroll-margin-top:90px}
/* Шапка. Разделы и телефон были мелкие и тусклые - подняты в яркость и кегль. */
.topbar__nav{gap:2.1rem;font-size:1rem;font-weight:600}
.topbar--over .topbar__nav{color:var(--cream)}
.topbar__nav a{padding:.2rem 0;border-bottom:2px solid transparent}
.topbar__nav a:hover{border-bottom-color:var(--green-400)}
.topbar__phone{font-size:1.24rem;white-space:nowrap}
.topbar--over .topbar__phone{text-shadow:0 1px 12px rgba(0,0,0,.7)}
/* ФОРМАТ Б. На широком экране текст прижимался к правому краю своей половины,
и слева зияла пустота. Теперь колонка держит текст по левому краю с полем,
как и шапка над ней. */
.heroB__col{padding-left:max(24px,calc((100vw - var(--wrap))/2));padding-right:clamp(2rem,3vw,3.5rem)}
.heroB__inner{max-width:34rem;margin-left:0}
/* Кадр заказчика возвращён (правка 06.08.2026). Точка кадрирования правее
центра: ель стоит в правой части снимка. */
.heroB__media{background:var(--sage)}
.heroB__media img{object-position:64% 50%}
/* ФОРМАТ В. Текст первого экрана вставал не под названием компании, а сам по
себе: колонка считалась от края окна, шапка - от общей колонки страницы.
Теперь у обоих одно левое поле. */
.heroC__body{padding-left:max(24px,calc((100vw - var(--wrap))/2))}
.heroC__body .wrap{max-width:none;padding:0;margin:0}
.heroC__col{padding-right:clamp(1.5rem,2.5vw,3rem)}
@media (max-width: 900px){
/* Шапка на телефоне больше не висит поверх кадра: она налезала на слайдшоу
и на название, а номер упирался в правый край. Теперь это обычная тёмная
полоса в потоке. */
/* position:relative, а не static: фон первого экрана лежит абсолютом и
закрашивал бы обычную полосу шапки. relative оставляет её в потоке и
разрешает z-index. */
.topbar--over{position:relative;z-index:3;background:var(--fir-900)}
/* В формате В шапка по разметке идёт ПОСЛЕ витрины - на телефоне поднимаем
её наверх, иначе тёмная полоса с названием висит посреди экрана. */
/* align-items:stretch обязателен: у десктопного правила стоит center, и в
колонке он сжимал шапку и витрину по ширине содержимого. */
.heroC,.fullpage .heroC{display:flex;flex-direction:column;align-items:stretch}
.heroC .topbar--over{order:-1}
.heroC__stage{order:0}
.heroC__body{order:1}
.topbar{gap:.6rem}
.topbar__brand i{display:none} /* пояснение под именем - только на компьютере */
.topbar__brand b{font-size:1.12rem}
.topbar__nav{display:none}
/* Номер упирался в правый край и обрезался: даём ему сжиматься вместе с
именем бренда и убираем лишний зазор. */
.topbar__phone{font-size:clamp(.94rem,4.2vw,1.1rem);margin-left:auto;flex:0 0 auto}
.topbar__brand{min-width:0;overflow:hidden}
.heroA__body{padding-top:28px}
.heroC__body{padding-left:26px;padding-right:26px}
.heroB__col{padding-left:26px;padding-right:26px}
#lidery,#otzyvy{scroll-margin-top:0}
/* Плашка акции на телефоне не нужна совсем (правка заказчика 06.08.2026):
то же самое уже сказано в заголовке и в строке цифр под кнопкой. */
.promo-chip{display:none}
/* В сплите та же плашка называется иначе - её тоже убираем с телефона. */
.heroB__tag{display:none}
}
/* Первый экран сплита не влезал в окно: 1010 точек против 900 у остальных
вариантов, из-за чего строка с цифрами уезжала под нижний край. Ужимаем
вертикальный ритм колонки - высота сравнивается с прочими форматами. */
.heroB__col{padding-top:2.4rem;padding-bottom:2.4rem}
.heroB h1{margin-bottom:1rem}
.hero__lead{margin-bottom:1.5rem}
.hero__cta{gap:.7rem}
.hero__trust--pills{margin-top:1.7rem}
.heroB__pill{padding:.78rem .9rem}
/* Сплит: кадр без обрезки, без размытия и не впритык к краю окна.
Колонка под фото - не половина экрана, а ровно ширина самого кадра:
высота тянется на весь первый экран, ширина считается из пропорций
снимка (3:4). Поэтому фото заполняет свою колонку целиком, пустых полей
по бокам нет и обрезать ничего не нужно. */
/* Размер кадра не трогаем - только сдвигаем левее (правка заказчика
06.08.2026, показано стрелкой): между текстом и фото была дыра. */
.heroB__media{background:var(--paper);overflow:hidden;aspect-ratio:3/4;height:100%;
margin-right:clamp(20px,8vw,170px)}
/* Поля задаются padding'ом ВНУТРИ картинки, а не рамкой inset: у картинки
ширина auto берётся из её собственного размера и заданную рамку игнорирует.
object-fit считается от содержимого, то есть уже с учётом этих полей. */
/* Кадр: без обрезки, без размытия, к краю окна не липнет.
Колонка под фото не половина экрана, а ровно ширина самого кадра: высота
тянется на весь первый экран, ширина считается из пропорций снимка (3:4).
Поэтому фото заполняет свою колонку целиком - пустых полей по бокам нет,
и обрезать ничего не нужно. */
.heroB__media img{inset:0;width:100%;height:100%;padding:clamp(18px,2vw,36px);
object-fit:contain;object-position:center}
/* Плашка «Рассрочка 0%» в сплите убрана: ровно то же самое написано в
карточке под кнопкой, а поверх кадра с полями ей больше не на чем висеть. */
.heroB__tag{display:none}
/* ============ ПЯТЬ ПЕРВЫХ ЭКРАНОВ: показ и фотографии ============
Разметка всех пяти лежит на странице, видно один. Класс v-1..v-5 ставит
скрипт в (base.njk) синхронно, до первой отрисовки - иначе посетитель
успел бы увидеть один экран и через миг другой.
Без скрипта (или в приватном режиме, где localStorage недоступен) на
класса нет вообще. Правило ниже на этот случай показывает первый вариант:
страница обязана оставаться рабочей, даже если весь наш JS не выполнился. */
.hero { display: none; }
html:not([class*="v-"]) .hero--1,
.v-1 .hero--1, .v-2 .hero--2, .v-3 .hero--3 { display: flex; }
.v-4 .hero--4 { display: grid; }
.v-5 .hero--5 { display: flex; }
/* Фотографии первых экранов - фоном (причина в шапке файла).
Адреса вписаны здесь, а не в разметке: это оформление, а не содержание,
и правило «в разметке нет ссылок» из архитектуры про внешние адреса.
Адрес ОБЯЗАН быть абсолютным (/assets/...), а не относительным. Сборка ищет
ссылки на файлы ровно по этому виду: относительный «photos/x.jpg» она не
видит, считает картинку сиротой и удаляет её из dist - первый экран остаётся
без фона. Проверено на первом же прогоне. */
.heroA { background-image: url("/assets/photos/shourum.jpg.c34de622.jpg"); background-size: cover;
background-position: 50% 18%; }
.heroB__media { background-image: url("/assets/photos/el-lesnaya-s-ineem.jpg.2063218c.jpg");
background-size: contain; background-position: center; background-repeat: no-repeat; }
.heroC__slide { background-image: url("/assets/photos/showroom-1.jpg.e7bf622e.jpg"); }
/* Витрина варианта 5 листает линейку сама. Кадры перечислены классами, чтобы
скрипту не пришлось знать адреса файлов: он только переключает класс. */
.heroC__slide.s-1 { background-image: url("/assets/photos/showroom-1.jpg.e7bf622e.jpg"); }
.heroC__slide.s-2 { background-image: url("/assets/photos/showroom-2.jpg.968ea75f.jpg"); }
.heroC__slide.s-3 { background-image: url("/assets/photos/showroom-3.jpg.02843b98.jpg"); }
.heroC__slide.s-4 { background-image: url("/assets/photos/showroom-4.jpg.2db91ac7.jpg"); }
.heroC__slide.s-5 { background-image: url("/assets/photos/showroom-5.jpg.f8d02ee7.jpg"); }
.heroC__slide.s-6 { background-image: url("/assets/photos/showroom-6.jpg.dfaf1a2f.jpg"); }
/* ============ ПОДВАЛ И СЛУЖЕБНЫЕ СТРАНИЦЫ ============
Перенесено из прошлой версии файла без изменений. Первый экран, лидеры и
отзывы пришли из макетов, а подвал, «Политика» и «Условия» на них не
показывались - и при переносе остались бы вовсе без оформления.
Поймано прогоном tests/content_check.py: на 320 px из «Политики» вылезал
длинный адрес отказа от Метрики и давал горизонтальный скролл. */
.footer {
background: var(--neutral-900);
color: var(--neutral-200);
padding-block: var(--space-64);
}
.footer h2 { font-size: var(--text-lg); line-height: var(--lh-lg); }
.footer a { color: var(--neutral-0); }
.footer__req { --stack-gap: var(--space-8); font-size: var(--text-sm); line-height: var(--lh-sm); }
.footer__cols { --switcher-threshold: 34rem; }
.footer__legal { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--neutral-400); }
.doc { --stack-gap: var(--space-24); max-inline-size: var(--measure); }
.doc h2 { font-size: var(--text-xl); line-height: var(--lh-xl); }
.doc h3 { font-size: var(--text-lg); line-height: var(--lh-lg); }
.doc ul { --stack-gap: var(--space-8); padding-inline-start: var(--space-24); list-style: disc; }
.doc li + li { margin-block-start: var(--space-8); }
/* Длинный адрес (ссылка на отказ от Метрики) не переносится по словам и на
320 px вылезал за экран - горизонтальный скролл, а это критерий 1 спеки.
Ломаем такие строки в любом месте: правило узкое, только для служебных
текстов. */
.doc a { overflow-wrap: anywhere; }
/* ============ УВЕДОМЛЕНИЕ О COOKIE ============
Одна кнопка «Понятно» (решение 7): форм на сайте нет, значит это уведомление, а не
согласие; Метрика работает и до нажатия. Разметку создаёт cookie.js - без JS баннер
нечем было бы закрыть.
ЭТОТ БЛОК ВЫПАЛ ПРИ РЕДИЗАЙНЕ 06-08.08.2026 и восстановлен 08.08.2026 по жалобе
заказчика «куки вылезают внизу страницы». Без правил ниже баннер не всплывает над
окном, а просто падает в конец документа: его видит только тот, кто доскроллил до
подвала. Урок общий: скрипт, который создаёт разметку сам, не виден при переносе
вёрстки - его стили теряются молча, и ни один тест этого не ловил. */
:root { --cookie-h: 0px; }
.cookie {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 20;
background: var(--neutral-900);
color: var(--neutral-200);
padding-block: var(--space-12);
}
.cookie__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
}
/* Кегль мелкий намеренно: баннер обязан быть низким, иначе он съедает первый экран. */
.cookie__text {
flex: 1 1 18rem;
font-size: var(--text-xs);
line-height: var(--lh-xs);
max-inline-size: var(--measure);
}
.cookie__text a { color: var(--neutral-0); }
/* Кнопка та же .btn (акцент и фокус - оттуда), здесь только размер под баннер. */
.cookie__btn {
flex: 0 0 auto;
font-size: var(--text-base);
line-height: var(--lh-base);
padding-inline: var(--space-24);
}
/* Подвал обязан освободить место под баннером, иначе тот накрывает реквизиты. */
html.has-cookie body { padding-block-end: var(--cookie-h); }
html.has-cookie { --cookie-h: 96px; }
/* На телефоне баннер прижимается: в первой редакции он занимал 186px из 640 - треть
экрана - и накрывал кнопку в вариантах 3, 4 и 5 (замер в iframe 360x640).
Точную высоту скрипт кладёт в --cookie-h, правила ниже на неё и опираются. */
@media (max-width: 900px) {
.cookie { padding-block: 10px; }
.cookie__inner { gap: .5rem; }
.cookie__text { flex: 1 1 100%; font-size: .7rem; line-height: 1.3; }
.cookie__btn { flex: 1 1 100%; font-size: .92rem; padding-block: .45rem; }
/* Пока баннер висит, первый экран отдаёт ему высоту - иначе фиксированная полоса
накрывает ту самую кнопку, ради которой первый экран и существует.
У сплита и витрины отдаёт кадр (он крупный, ему не жалко), у формата А -
верхний отступ текста. Нажали «Понятно» - класс снимается, всё возвращается. */
html.has-cookie .heroB__media,
html.has-cookie .heroC__stage {
height: max(110px, calc(40vh - var(--cookie-h)));
min-height: 0;
}
html.has-cookie .heroA__body { padding-top: 78px; }
}
@media (max-width: 900px) and (max-height: 700px) {
html.has-cookie .heroB__media,
html.has-cookie .heroC__stage {
height: max(96px, calc(26vh - var(--cookie-h) / 2));
min-height: 0;
}
html.has-cookie .heroA__body { padding-top: 62px; }
/* Кадр у сплита уже упёрся в свой минимум (96px), а кнопке на 360x640 не хватало
ещё трёх десятков пикселей - добираем отступами колонки. Замер: iframe 360x640. */
html.has-cookie .heroB__col { padding-top: .5rem; padding-bottom: 1rem; }
html.has-cookie .heroC__body { padding-top: .5rem; }
}
.skip-link {
position: absolute;
inset-block-start: var(--space-8);
inset-inline-start: var(--space-8);
padding: var(--space-8) var(--space-16);
background: var(--neutral-0);
color: var(--ink);
border-radius: var(--radius);
transform: translateY(-200%);
z-index: 10;
}
.skip-link:focus { transform: none; }
/* Полоса цифр под кнопкой - список, а не абзацы: это перечисление. Маркеры и
отступы браузера снимаем здесь, иначе он рисует точки (поймано на прогоне). */
/* Только маркеры и левый отступ списка: вертикальные отступы и линия сверху
заданы выше (перенос макета) - обнулять их здесь значит слепить полосу цифр
с подписью под кнопкой, что и случилось на первом прогоне. */
.hero__trust { list-style: none; padding-left: 0; }
.hero__trust li { max-width: 11rem; }
.hero__trust b { display: block; }
.hero__trust span { display: block; }
/* Вариант 4 показывает те же цифры карточками - раскладка из макета. */
.hero__trust--pills { display: grid; grid-template-columns: repeat(3, 1fr);
gap: .7rem; margin-top: 2.4rem; border: 0; padding: 0; }
.hero__trust--pills li { background: #fff; border: 1px solid var(--line);
border-radius: 12px; padding: .9rem 1rem; max-width: none; }
.hero__trust--pills b { font-family: var(--font-display); font-weight: 600;
font-size: 1.18rem; line-height: 1.1; color: var(--green); }
.hero__trust--pills span { font-size: .8rem; color: var(--ink-soft);
margin-top: .2rem; line-height: 1.35; }
/* ============ ШАПКА ============
Одна разметка на пять вариантов. У четырёх кадр тёмный - шапка лежит поверх
него прозрачной; у сплита (вариант 4) слева светлая половина, и поверх неё
белый текст был бы не виден - там шапка становится белой полосой. */
.topbar-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 3;
color: var(--cream); }
.v-4 .topbar-wrap { position: static; background: #fff;
border-bottom: 1px solid var(--line); color: var(--ink); }
.v-4 .topbar__nav { color: var(--ink-soft); }
.topbar { display: flex; align-items: center; gap: 2.5rem; height: 78px; }
.topbar__brand { display: block; font-family: var(--font-brand);
letter-spacing: -.01em; line-height: 1.2; }
.topbar__brand b { display: block; font-weight: 800; font-size: 1.35rem; }
.topbar__brand i { display: block; font-style: normal; font-weight: 400;
font-size: .78rem; opacity: .72; letter-spacing: 0; margin-top: .15rem; }
.topbar__nav { display: flex; gap: 1.9rem; font-size: .92rem; font-weight: 500;
margin-left: auto; color: var(--cream-dim); }
.topbar__phone { font-family: var(--font-display); font-weight: 600;
font-size: 1.12rem; letter-spacing: .02em; }
/* Первый экран лежит под шапкой, поэтому его содержимое отступает на её высоту.
У сплита шапка в потоке - отступ не нужен. */
.heroA .heroA__body, .heroC__body { padding-top: 78px; }
@media (max-width: 900px) {
/* Разделы на телефоне прячем: их всё равно не нажимают, а место они съедают
у имени и телефона - тех двух вещей, ради которых шапка и нужна. */
/* ТОЛЬКО вертикальные отступы. Краткая запись «padding: 14px 0» ставит
боковые в ноль, а .topbar и .wrap висят на ОДНОМ элементе - и название с
телефоном прилипали к краям экрана. Ловилось только на живом телефоне. */
.topbar { height: auto; padding-top: 14px; padding-bottom: 14px; gap: 1rem; }
.topbar__nav { display: none; }
.topbar__brand b { font-size: 1.05rem; }
.topbar__brand i { font-size: .68rem; }
.topbar__phone { font-size: 1rem; margin-left: auto; }
/* Формат А: шапка висит поверх текста, отступ на её высоту обязателен. */
.heroA .heroA__body { padding-top: 96px; }
/* Формат В (вариант 5): на телефоне текст начинается ПОД кадром, а шапка
лежит поверх кадра - отступать на её высоту не от чего. Оставшиеся 96px
были пустой полосой между фотографией и надписью «сезонная цена»
(замечено заказчиком 07.08.2026 на 390). */
.heroC__body { padding-top: 1.2rem; }
}
/* На маленьком телефоне (360x640) фото первого экрана съедало три четверти
высоты, и кнопка уходила ниже сгиба - посетитель видел картинку и ничего,
что можно нажать. Ограничиваем кадр по высоте экрана, а не по пропорциям.
Обрезки при этом нет: у сплита кадр по-прежнему вписывается целиком. */
@media (max-width: 900px) {
.heroB__media { aspect-ratio: auto; height: 40vh; min-height: 220px; }
.heroC__stage { aspect-ratio: auto; height: 40vh; min-height: 220px; }
}
/* 40vh мало помогает, когда экран сам низкий: на 360x640 у сплита (вариант 4) и
у витрины (вариант 5) кадр идёт ПЕРВЫМ, и кнопка вставала на 618 и 600 px -
за сгибом. Замер: py-харнесс в iframe 360x640, кнопка .btn видимого экрана.
Поэтому на низких окнах кадр ужимаем и поджимаем отступы колонки. Порог по
ВЫСОТЕ, а не по ширине: на обычном телефоне (390x844) кадр остаётся крупным -
ровно тем, который принят заказчиком. */
@media (max-width: 900px) and (max-height: 700px) {
.heroB__media { height: 26vh; min-height: 150px; }
.heroC__stage { height: 26vh; min-height: 150px; }
.heroB__col { padding-top: 1.4rem; padding-bottom: 1.6rem; }
.heroC__body { padding-top: 1rem; padding-bottom: 1.6rem; }
}
/* ============ ПОЛЯ ПО КРАЯМ НА ТЕЛЕФОНЕ ============
Заказчик (07.08.2026): текст не должен липнуть к границам экрана.
Держим один отступ для ВСЕХ вариантов первого экрана и секций - раньше он
задавался в четырёх разных местах и в шапке терялся совсем. */
@media (max-width: 900px) {
.wrap { padding-left: 28px; padding-right: 28px; }
.heroB__col { padding-left: 28px; padding-right: 28px; }
.heroC__body { padding-left: 28px; padding-right: 28px; }
.heroC__col { padding-left: 0; padding-right: 0; }
.vk { padding-left: 28px; padding-right: 28px; }
/* Подпись на кадре витрины (вариант 5) лежит поверх фото своим слоем и
отступы .wrap до неё не доходят - задаём отдельно. */
.heroC__meta { left: 20px; right: 20px; }
}
/* Сплит на телефоне: перестаём быть сеткой. Пока .heroB оставался grid, колонка
с текстом вставала на 31px правее шапки - линии начала текста не совпадали.
ВАЖНО, ГДЕ ЗАДАВАТЬ display. Раньше здесь стояло «.heroB { display: block }»,
и это ломало сразу две вещи:
1) правило лежит НИЖЕ «.hero { display: none }» и весит столько же, поэтому
снимало скрытие с варианта 4 - он вылезал вторым первым экраном на всех
остальных вариантах;
2) display:block отменяет order, и фотография уезжала ПОД текст.
Поэтому раскладку задаём тем же селектором, что и показ варианта (.v-4
.hero--4), и оставляем flex - на нём работает order. */
@media (max-width: 900px) {
.v-4 .hero--4 { display: flex; flex-direction: column; padding: 0; }
/* Фото первым: на телефоне человек должен увидеть товар, а не текст. */
.heroB__media { order: -1; margin-right: 0; margin-left: 0; width: 100%; }
.heroB__inner { max-width: none; margin-left: 0; }
}
/* Правило показа варианта (.v-4 .hero--4) весит больше, чем .heroB, и держало
сетку даже на телефоне: колонка с текстом вставала на 31px правее шапки.
Поэтому мобильную раскладку задаём тем же весом - через класс варианта. */
@media (max-width: 900px) {
.v-5 .hero--5 { display: block; }
}