/* ВНИМАНИЕ. С 02.09.2026 переключатели действуют только на телефоне:
   ПК-версия зафиксирована файлом kp-mob-club2f-fixed.css, и все
   правила вариантов ниже завёрнуты в @media (max-width: 899px).
   Правила без data-v - это исправленные ошибки, они общие. */

/* ============================================================
   «КЛУБ 2 ФИРМЕННЫЙ», ПРАВКИ ОТ 01.09.2026

   Двадцать два замечания Ростислава. Он просил вносить их
   вариантами, поэтому каждая правка живёт здесь под своим
   переключателем в панели «Варианты», а нулевое положение
   у всех - «как сейчас». Базовый файл kp-mob-club2f.css
   не тронут, палитры тоже.

   Порядок правил повторяет порядок замечаний, чтобы можно
   было свериться со списком.

   Одна правка сделана без варианта - цифры в кружках этапов
   стояли не по центру. Это не выбор оформления, а ошибка,
   и она просто исправлена внизу файла.
   ============================================================ */


/* ============================================================
   1-2. ШАПКА: цвет и логотип
   Замечания: «Телеграм такого же цвета, что и блок ниже»,
   «если блок оранжевый - лого белое».
   ============================================================ */
.c2-h__logo { display: block; line-height: 0; }
.c2-h__img { width: 78px; }
.c2-h__img--wh { display: none; }

.c2-h__nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.c2-h__ch {
  display: none; padding: 9px 15px; border-radius: 90px;
  font-size: 13px; font-weight: 800;
  background: transparent; color: currentColor;
  border: 2px solid currentColor;
}

/* шапка цвета первого экрана, логотип белый */







@media (max-width: 899px) {
  body[data-v-c2hdr="1"] .c2-h { background: var(--or); color: var(--on-or); }
  body[data-v-c2hdr="1"] .c2-h__img--or { display: none; }
  body[data-v-c2hdr="1"] .c2-h__img--wh { display: block; }
  body[data-v-c2hdr="1"] .c2-h__tg { background: var(--deep); color: var(--on-deep); }
}
/* ============================================================
   3-4. ПЕРВЫЙ ЭКРАН: белый текст
   Замечания: «фраза должна быть белого цвета», «текст белого цвета».

   Белым по оранжевому контраст 3.6. Для заголовка в 44-62 px
   это норма (крупному тексту хватает 3), для лида в 16 px -
   ниже нормы 4.5. Поэтому в варианте 2 белым набран только
   заголовок, а лид остаётся тёмным и читается.
   ============================================================ */





@media (max-width: 899px) {
  body[data-v-c2hero="1"] .c2-hero h1,
  body[data-v-c2hero="1"] .c2-hero .c2-lead { color: #fff; }
  body[data-v-c2hero="2"] .c2-hero h1 { color: #fff; }
}
/* ============================================================
   5. ФОТОГРАФИИ НА ПЕРВОМ ЭКРАНЕ
   Замечание: «увеличить фото, вторая может заходить на первое».
   ============================================================ */
/* на телефоне крупные снимки перекрывали лид и кнопку, поэтому
   они опускаются под текст и ложатся парой внахлёст */
/* снимки абсолютные внутри .c2-in, а он кончается сразу за кнопкой,
   поэтому отступ отрицательный: так пара уходит в свободное поле
   под текстом и ложится внахлёст */





@media (max-width: 899px) {
  body[data-v-c2foto="1"] .c2-hero { padding-bottom: 320px; }
  body[data-v-c2foto="1"] .c2-float--a { width: 168px; right: 16px; left: auto; top: auto; bottom: -250px; }
  body[data-v-c2foto="1"] .c2-float--b { width: 146px; left: 84px; right: auto; top: auto; bottom: -304px; z-index: 4; }
}
/* на широком экране места справа хватает, там снимки остаются
   рядом с текстом, просто крупнее */



/* ============================================================
   6. КАНАЛЫ СВЯЗИ
   Замечание: «минимум 4 канала: вк, телеграм, макс и позвонить,
   основная макс».

   Адреса ВК и Макса Ростислав ещё не прислал, у этих двух
   ссылок стоит заглушка и пометка data-need-link.
   ============================================================ */






@media (max-width: 899px) {
  body[data-v-c2conn="1"] .c2-h__ch { display: inline-flex; }
  body[data-v-c2conn="1"] .c2-h__ch--max {
    background: var(--acc-sm); color: var(--on-acc-sm); border-color: var(--acc-sm);
  }
  body[data-v-c2conn="1"] .c2-h__tg { background: transparent; color: currentColor; border: 2px solid currentColor; }
  body[data-v-c2conn="1"][data-v-c2hdr="1"] .c2-h__ch--max { background: var(--deep); color: var(--on-deep); border-color: var(--deep); }
}
/* на узком экране четыре кнопки в строку не влезают: логотип
   уходит наверх, связь становится второй строкой */
@media (max-width: 560px) {
  body[data-v-c2conn="1"] .c2-h { flex-wrap: wrap; gap: 10px; }
  body[data-v-c2conn="1"] .c2-h__nav { width: 100%; justify-content: flex-start; }
  body[data-v-c2conn="1"] .c2-h__ch,
  body[data-v-c2conn="1"] .c2-h__tg { font-size: 12px; padding: 8px 13px; }
}


/* ============================================================
   7 и 9. НАКЛЕЙКИ ПОВЕРХ
   Замечания: «наклейка должна быть поверх надписей, а не под»
   (обложка и «не больше двух на класс»).

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





@media (max-width: 899px) {
  body[data-v-c2stick="1"] .c2-st {
    position: relative; z-index: 6;
    margin-bottom: -6px;
  }
  body[data-v-c2stick="1"] .c2-tiles,
  body[data-v-c2stick="1"] .c2-plans,
  body[data-v-c2stick="1"] .c2-table,
  body[data-v-c2stick="1"] .c2-shots { position: relative; z-index: 1; }
}
/* ============================================================
   8. СЪЁМКИ: не лента, а сетка
   Замечание: «сделай вариант блока, где будет не по 1 фото,
   а по 6-9 для каждого варианта».

   Кадров у каждого места съёмки шесть. Вариант 1 кладёт их
   сеткой по три в ряд, вариант 2 - по два, крупнее.
   ============================================================ */









@media (max-width: 899px) {
  body[data-v-c2shoot="1"] .c2-shots--tall,
  body[data-v-c2shoot="2"] .c2-shots--tall {
    display: grid; overflow: visible; width: 100%;
    margin-left: 0; padding: 4px 0 0; gap: 8px;
  }
  body[data-v-c2shoot="1"] .c2-shots--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-v-c2shoot="2"] .c2-shots--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-v-c2shoot="1"] .c2-shots--tall > *,
  body[data-v-c2shoot="2"] .c2-shots--tall > * { flex: none; width: 100%; }
}
/* ============================================================
   10. ТЕКСТ В АКЦЕНТНОЙ КАРТОЧКЕ БЕЛЫЙ
   Замечание: «текст в блоке должен быть белым».

   Белым по оранжевому 3.6 при норме 4.5 для мелкого текста.
   Ростислав просил вариант - вот он, но по контрасту он слабее
   нулевого положения, где текст тёмный.
   ============================================================ */





@media (max-width: 899px) {
  body[data-v-c2ptxt="1"] .c2-card--or {
    color: #fff; --card-ink: #ffffff; --card-dim: #ffffff;
  }
  body[data-v-c2ptxt="1"] .c2-card--or .c2-tag { background: #fff; color: var(--or); }
}
/* ============================================================
   11-12. ЦЕНЫ И ТОЧКИ НА БЕЛОМ - ОРАНЖЕВЫЕ
   Замечания: «все цены на белом фоне оранжевые», «точки на белом
   фоне тоже можно сделать оранжевыми».

   Цена набрана 23 px жирным, ей хватает яркого --or.
   ============================================================ */





@media (max-width: 899px) {
  body[data-v-c2price="1"] .c2-card--white .c2-plan__top b { color: var(--or); }
  body[data-v-c2price="1"] .c2-card--white li::before { background: var(--or); opacity: 1; }
}
/* ============================================================
   13. ПОДЛОЖКА «СТАНДАРТА»
   Замечание: «сделай вариант с другой подложкой, но не оранжевой».
   ============================================================ */









@media (max-width: 899px) {
  body[data-v-c2pbg="1"] .c2-plan--hit {
    background: var(--graph); color: var(--on-graph);
    --card-ink: #ffffff; --card-dim: #ffffff;
  }
  body[data-v-c2pbg="1"] .c2-plan--hit .c2-tag { background: var(--acc-sm); color: var(--on-acc-sm); }
  body[data-v-c2pbg="2"] .c2-plan--hit {
    background: var(--soft); color: var(--text);
    border-color: var(--or); border-width: 3px;
    --card-ink: var(--text); --card-dim: color-mix(in srgb, var(--text) 76%, transparent);
  }
  body[data-v-c2pbg="2"] .c2-plan--hit .c2-tag { background: var(--acc-sm); color: var(--on-acc-sm); }
  body[data-v-c2pbg="2"] .c2-plan--hit .c2-plan__top b { color: var(--or); }
}
/* ============================================================
   14. СТОЛБЕЦ «СТАНДАРТ» В ТАБЛИЦЕ
   Замечание: «обведи этот столбец оранжевым полуовалом,
   сделай разные версии».
   ============================================================ */
/* 1 - полуовал: скруглённая шапка и такой же низ */





@media (max-width: 899px) {
  body[data-v-c2hit="1"] .c2-table thead .hit {
    background: var(--acc-sm); color: var(--on-acc-sm);
    border-radius: 90px 90px 0 0;
  }
  body[data-v-c2hit="1"] .c2-table tbody tr:last-child .hit { border-radius: 0 0 90px 90px; }
  body[data-v-c2hit="1"] .c2-table .hit {
    box-shadow: inset 2px 0 0 var(--or), inset -2px 0 0 var(--or);
  }
}
/* 2 - рамка целиком, углы скруглены слабо */





@media (max-width: 899px) {
  body[data-v-c2hit="2"] .c2-table .hit {
    box-shadow: inset 2px 0 0 var(--or), inset -2px 0 0 var(--or);
  }
  body[data-v-c2hit="2"] .c2-table thead .hit {
    border-radius: 16px 16px 0 0; box-shadow: inset 2px 2px 0 var(--or), inset -2px 0 0 var(--or);
  }
  body[data-v-c2hit="2"] .c2-table tbody tr:last-child .hit {
    border-radius: 0 0 16px 16px; box-shadow: inset 2px -2px 0 var(--or), inset -2px 0 0 var(--or);
  }
}
/* 3 - только шапка столбца, без обводки */




@media (max-width: 899px) {
  body[data-v-c2hit="3"] .c2-table thead .hit {
    background: var(--acc-sm); color: var(--on-acc-sm); border-radius: 12px 12px 0 0;
  }
}
/* ============================================================
   15. ТАБЛИЦА НА ТЕЛЕФОНЕ
   Замечание: «блок таблицы на мобильных очень плохо отображается».

   В варианте 1 на узком экране таблица прячется, а вместо неё
   показывается стопка карточек по тарифам - её собирает
   js/kp-mob-club2f.js из той же таблицы, чтобы данные не
   разъезжались с ней.
   ============================================================ */
.c2-tcards { display: none; }

@media (max-width: 899px) {
  body[data-v-c2tbl="1"] .c2-table { display: none; }
  body[data-v-c2tbl="1"] .c2-tcards { display: grid; gap: 12px; margin-top: 20px; }
}

.c2-tcard {
  border: 2.5px solid var(--edge); border-radius: var(--r);
  background: var(--white); color: var(--text);
  box-shadow: 5px 5px 0 var(--sh); padding: 16px 18px;
}
.c2-tcard--hit { border-color: var(--or); border-width: 3px; }
.c2-tcard h4 {
  margin: 0 0 10px; font-family: var(--disp); font-size: 18px; font-weight: 800;
  letter-spacing: -.03em; text-transform: uppercase;
}
.c2-tcard dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; }
.c2-tcard dt { font-size: 13px; color: var(--dim); }
.c2-tcard dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; }


/* ============================================================
   16. ЧЕТЫРЕ СТИЛЯ
   Замечание: «сделать блоки кликабельными, чтобы открывалось
   окно с фотографиями стиля; собрать вариант с большей
   информацией о дизайнах - это важно в продажах».

   1 - под каждым стилем появляется описание;
   2 - к описанию добавляется клик: открывается окно с кадрами
       этого стиля. Разметку окна ставит js.
   ============================================================ */
.c2-styleinfo { display: none; margin-top: 8px; font-size: 13px; line-height: 1.45; }



@media (max-width: 899px) {
  body[data-v-c2sty="1"] .c2-styleinfo,
  body[data-v-c2sty="2"] .c2-styleinfo { display: block; color: color-mix(in srgb, var(--sec-ink) 78%, transparent); }
}
.c2-styleopen { display: none; }




@media (max-width: 899px) {
  body[data-v-c2sty="2"] .c2-styleopen {
    display: inline-block; margin-top: 8px;
    padding: 6px 13px; border-radius: 90px;
    background: var(--acc-sm); color: var(--on-acc-sm);
    font-size: 12px; font-weight: 800; cursor: pointer;
  }
  body[data-v-c2sty="2"] .c2-shots figure { cursor: pointer; }
}
/* окно со снимками стиля */
.c2-modal {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(9, 10, 12, .82); padding: 18px;
  overflow-y: auto;
}
.c2-modal[open] { display: block; }
.c2-modal__box {
  max-width: 760px; margin: 40px auto; background: var(--white); color: var(--text);
  border: 2.5px solid var(--edge); border-radius: var(--r); padding: 20px;
}
.c2-modal__box h3 { margin: 0 0 6px; }
.c2-modal__box p { font-size: 14px; color: var(--dim); }
.c2-modal__grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.c2-modal__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 2px solid var(--edge); }
.c2-modal__close {
  margin-top: 16px; min-height: 46px; padding: 0 22px; border-radius: 90px;
  background: var(--acc-sm); color: var(--on-acc-sm); border: 0;
  font: inherit; font-weight: 800; cursor: pointer;
}


/* ============================================================
   17. ПРАВИЛА КЛАССА: карточки одной высоты
   Замечание: «почему этот блок выше, чем 1?».

   На широком экране карточки лежат рядом и тянутся каждая
   по своему тексту.
   ============================================================ */



/* ============================================================
   19. ГАРАНТИЯ ОРАНЖЕВЫМ
   Замечание: «сделай фон оранжевым».
   ============================================================ */




@media (max-width: 899px) {
  body[data-v-c2guard="1"] .c2-guard {
    background: var(--or); color: var(--on-or);
    --card-ink: var(--on-or); --card-dim: var(--on-or);
  }
}
/* ============================================================
   20. СРОКИ: цифры оранжевым
   Замечание: «7 дней, 15 и 40 текст оранжевым».

   Цифры лежат на белых карточках, там яркий --or читается:
   3.9 при норме 3 для крупного текста.
   ============================================================ */




@media (max-width: 899px) {
  body[data-v-c2term="1"] .c2-s[data-block="Сроки и гарантия"] .c2-card--white .c2-num { color: var(--or); }
}
/* ============================================================
   21-22. СВЕТЛЫЕ СЕКЦИИ ЗАМЕТНЕЕ
   Замечания: «фон этого блока почти не видно», «оттенок фона
   почти невидим, его как будто и нет».
   ============================================================ */





@media (max-width: 899px) {
  body[data-v-c2soft="1"] .c2-s--soft { --sec-bg: #dde3e8; }
  body[data-v-c2soft="2"] .c2-s--soft {
    --sec-bg: #d3dae1;
    border-top: 2px solid var(--edge); border-bottom: 2px solid var(--edge);
  }
}
/* ============================================================
   18. ЦИФРЫ В КРУЖКАХ - ИСПРАВЛЕНО БЕЗ ВАРИАНТА
   Замечание: «цифры в кружках не по центру».

   Причина: у Unbounded крупные внутренние поля, и при
   line-height по умолчанию цифра съезжала вниз.
   ============================================================ */
.c2-step { line-height: 1; font-family: var(--body); padding-bottom: 1px; }

/* ============================================================
   ВТОРОЙ КРУГ ЗАМЕЧАНИЙ. 01.09.2026, вечер

   Сначала четыре ошибки - они чинятся без вариантов,
   потом новые переключатели.
   ============================================================ */


/* ---------- ошибка: цифры в кружках стояли не по центру ----------
   Настоящая причина нашлась только сейчас: правило `.c2-card span`
   из базового файла специфичнее, чем `.c2-step`, и делало кружок
   блоком - цифра прижималась влево. Возвращаем сетку. */
.c2-card .c2-step,
.c2-steps .c2-step {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; margin-top: 0; margin-bottom: 10px;
  font-family: var(--body); font-size: 15px; line-height: 1;
  color: inherit;
}

/* ---------- ошибка: заголовок прилипал к первому блоку ----------
   Отступ давало правило «h2 + *», но следом за заголовком идёт
   звезда-вспышка. Она абсолютная, отступ доставался ей, а карточка
   вставала к заголовку вплотную. */
@media (max-width: 899px) {
  .c2-s h2 ~ .c2-card:first-of-type,
  .c2-s h2 ~ .c2-tcards,
  .c2-s h2 ~ .c2-plans { margin-top: 24px; }
}

/* ---------- ошибка: на ПК левая карточка стояла ниже правой ----------
   Отступ выше нужен только телефону. На широком экране «Съёмки»,
   «Уже в цене» и «Правила класса» раскладываются в две колонки одной
   сеткой с заголовком, и отступ доставался лишь первой карточке -
   она опускалась. Здесь отступ снимается, а колонки тянутся
   на одну высоту. */
@media (min-width: 900px) {
  .c2-s[data-block="Съёмки"] .c2-in,
  .c2-s[data-block="Что входит в цену"] .c2-in,
  .c2-s[data-block="Как выбрать тариф"] .c2-in { align-items: stretch; }

  .c2-s[data-block="Съёмки"] .c2-in > .c2-card,
  .c2-s[data-block="Что входит в цену"] .c2-in > .c2-card,
  .c2-s[data-block="Как выбрать тариф"] .c2-in > .c2-card {
    margin-top: 0; height: 100%;
  }
}

/* ---------- ошибка: карточки правил слиплись ---------- */
.c2-s[data-block="Как выбрать тариф"] .c2-card + .c2-card { margin-top: 16px; }

/* ---------- ошибка: вторая карточка правил стояла выше первой ----------
   На широком экране заголовок и карточки лежат в одной сетке,
   и отступ от заголовка доставался только первой карточке. */
@media (min-width: 900px) {
.c2-s[data-block="Как выбрать тариф"] .c2-card + .c2-card { margin-top: 0; }
  .c2-s[data-block="Как выбрать тариф"] .c2-in > .c2-card { margin-top: 0; }
}

/* ---------- межстрочное расстояние заголовка первого экрана ---------- */
.c2-hero h1 { line-height: .98; }


/* ============================================================
   СНИМОК ЗАХОДИТ НА СЛЕДУЮЩИЙ БЛОК
   Замечание: «этот снимок может заходить на 2 блок».
   ============================================================ */







@media (max-width: 899px) {
  body[data-v-c2foto="2"] .c2-hero { padding-bottom: 210px; overflow: visible; }
  body[data-v-c2foto="2"] .c2-float--a {
    width: 176px; right: 16px; left: auto; top: auto; bottom: -300px; z-index: 5;
  }
  body[data-v-c2foto="2"] .c2-float--b {
    width: 150px; left: 78px; right: auto; top: auto; bottom: -356px; z-index: 4;
  }
}
/* ============================================================
   КАДРЫ СЪЁМОК: оранжевая тень и чёрная рамка
   Замечание: «вариант, когда за фотографиями нет оранжевого
   момента, и вариант, когда нет ни его, ни чёрной рамки».
   ============================================================ */





@media (max-width: 899px) {
  body[data-v-c2shotfr="1"] .c2-shots img { box-shadow: none; }
  body[data-v-c2shotfr="2"] .c2-shots img { box-shadow: none; border: 0; }
}
/* ============================================================
   ПЛАШКА «ВЫБИРАЮТ ЧАЩЕ ВСЕГО» ПРИ БЕЛОМ ТЕКСТЕ
   Замечание: «это можно оставить тёмным с белым текстом».
   ============================================================ */




@media (max-width: 899px) {
  body[data-v-c2ptxt="1"] .c2-card--or .c2-tag { background: var(--deep); color: var(--on-deep); }
}
/* ============================================================
   ГАРАНТИЯ: белый заголовок
   Замечание: «с белым текстом».

   Положение 1 - белый заголовок, остальной текст тёмный: белым
   по оранжевому 3.6, заголовку в 19 px жирным этого хватает
   (норма 3), мелкому тексту - нет.
   Положение 2 - белым весь блок, как просили; подписи там читаются
   хуже, поэтому положения два.
   ============================================================ */






@media (max-width: 899px) {
  body[data-v-c2guard="1"] .c2-guard h3 { color: #fff; }
  body[data-v-c2guard="2"] .c2-guard {
    background: var(--or); color: #fff;
    --card-ink: #ffffff; --card-dim: #ffffff;
  }
  body[data-v-c2guard="2"] .c2-guard h3 { color: #fff; }
}
/* ============================================================
   ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ: снимки выше, кнопка ниже
   Замечание: «фотографии поднять к заголовку, кнопку отпустить ниже».
   ============================================================ */
@media (max-width: 899px) {
  /* снимки стоят справа от заголовка, поэтому текст держится левой
     части: замер на 390 показывал, что иначе кадр ложится на буквы
     и вылезает за правый край */
  body[data-v-c2heropos="1"] .c2-hero { padding-top: 18px; padding-bottom: 40px; }
  body[data-v-c2heropos="1"] .c2-hero h1 { max-width: 58%; min-width: 0; }
  body[data-v-c2heropos="1"] .c2-float--a { width: 130px; right: 12px; left: auto; top: 74px; bottom: auto; }
  body[data-v-c2heropos="1"] .c2-float--b { width: 110px; left: auto; right: 108px; top: 188px; bottom: auto; z-index: 4; }
  /* отступ отсчитан от низа нижнего снимка. Раньше между заголовком
     и лидом стояли наклейки и добавляли высоту сами; когда их убрали,
     лид поднялся и кадр лёг на первую строку - замер показал наезд
     на 31 точку, поэтому отступ увеличен на 44 */
  body[data-v-c2heropos="1"] .c2-hero .c2-lead { margin-top: 250px; max-width: 100%; }
  body[data-v-c2heropos="1"] .c2-hero .c2-btn { margin-top: 26px; }
}


/* ============================================================
   ПЕРВЫЙ ЭКРАН: ТРИ ДРУГИХ ДИЗАЙНА
   Замечание: «сделать ещё 3 варианта дизайна этого блока».

   1 - карточкой: содержимое лежит на белой плите с рамкой,
       оранжевый остаётся полем вокруг;
   2 - фото фоном: снимок на весь экран, текст поверх;
   3 - фактами: вместо снимков строка коротких фактов,
       экран становится тише и короче.
   ============================================================ */
/* 1. карточкой */







@media (max-width: 899px) {
  body[data-v-c2herod="1"] .c2-hero { padding: 26px 0 40px; }
  body[data-v-c2herod="1"] .c2-hero .c2-in {
    background: var(--white); color: var(--text);
    border: 2.5px solid var(--edge); border-radius: var(--r);
    box-shadow: 8px 8px 0 var(--edge);
    padding: 26px 20px 30px; max-width: 520px;
  }
  body[data-v-c2herod="1"] .c2-hero h1,
  body[data-v-c2herod="1"] .c2-hero .c2-lead { color: var(--text); }
  body[data-v-c2herod="1"] .c2-float { display: none; }
  body[data-v-c2herod="1"] .c2-badge { right: 14px; top: 10px; }
}
/* 2. фото фоном */








@media (max-width: 899px) {
  body[data-v-c2herod="2"] .c2-hero { background: var(--deep); padding: 40px 0 46px; }
  body[data-v-c2herod="2"] .c2-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/assets/img/shoot/school-1.webp") center 22% / cover no-repeat;
    opacity: .45;
  }
  body[data-v-c2herod="2"] .c2-hero .c2-in { position: relative; z-index: 2; }
  body[data-v-c2herod="2"] .c2-hero h1,
  body[data-v-c2herod="2"] .c2-hero .c2-lead { color: #fff; }
  body[data-v-c2herod="2"] .c2-float { display: none; }
  body[data-v-c2herod="2"] .c2-hero .c2-btn { background: var(--acc-sm); color: var(--on-acc-sm); }
}
/* 3. фактами */




@media (max-width: 899px) {
  body[data-v-c2herod="3"] .c2-hero { padding: 28px 0 34px; }
  body[data-v-c2herod="3"] .c2-float,
  body[data-v-c2herod="3"] .c2-badge,
  body[data-v-c2herod="3"] .c2-hero .c2-st { display: none; }
}
.c2-herofacts { display: none; }




@media (max-width: 899px) {
  body[data-v-c2herod="3"] .c2-herofacts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; margin-top: 20px;
  }
  body[data-v-c2herod="3"] .c2-herofacts div {
    background: var(--white); color: var(--text);
    border: 2px solid var(--edge); border-radius: 16px; padding: 12px 12px 14px;
  }
  body[data-v-c2herod="3"] .c2-herofacts b {
    display: block; font-family: var(--disp); font-size: 19px; letter-spacing: -.04em;
  }
}
/* на узком экране три плитки в ряд тесные, и «от 2 700 ₽» ломалось
   на три строки - там кегль меньше и поля уже */
@media (max-width: 430px) {
  body[data-v-c2herod="3"] .c2-herofacts { gap: 6px; }
  body[data-v-c2herod="3"] .c2-herofacts div { padding: 10px 9px 11px; }
  body[data-v-c2herod="3"] .c2-herofacts b { font-size: 15px; letter-spacing: -.05em; }
  body[data-v-c2herod="3"] .c2-herofacts span { font-size: 11px; }
}




@media (max-width: 899px) {
  body[data-v-c2herod="3"] .c2-herofacts span {
    display: block; margin-top: 4px; font-size: 12px; color: var(--dim);
  }
}
/* ============================================================
   СВЯЗЬ В ОДНОЙ КНОПКЕ
   Замечание: «собрать каналы связи в разворачиваемую кнопку
   с лого Макса».

   Файла с логотипом Макса в проекте нет, поэтому на кнопке пока
   буква в кружке и слово. Пришлёт картинку - подставлю.
   ============================================================ */
.c2-h__more { display: none; }








@media (max-width: 899px) {
  body[data-v-c2conn="2"] .c2-h__more {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px 9px 9px; border-radius: 90px; border: 0;
    background: var(--acc-sm); color: var(--on-acc-sm);
    font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  }
  body[data-v-c2conn="2"] .c2-h__more i {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--on-acc-sm); color: var(--acc-sm); font-style: normal; font-size: 13px;
  }
  body[data-v-c2conn="2"] .c2-h__ch,
  body[data-v-c2conn="2"] .c2-h__tg { display: none; }
  body[data-v-c2conn="2"] .c2-h__nav.is-open .c2-h__ch,
  body[data-v-c2conn="2"] .c2-h__nav.is-open .c2-h__tg { display: inline-flex; }
  body[data-v-c2conn="2"] .c2-h__nav.is-open { flex-wrap: wrap; }
}
/* ============================================================
   ЧЕТЫРЕ СТИЛЯ: каждый отдельным блоком
   Замечание: «сделать вариант, когда для каждого дизайна
   свой блок».
   ============================================================ */










@media (max-width: 899px) {
  body[data-v-c2sty="3"] .c2-s[data-block="Четыре стиля"] .c2-shots {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
    overflow: visible; width: 100%; margin-left: 0; padding: 4px 0 0;
  }
  body[data-v-c2sty="3"] .c2-s[data-block="Четыре стиля"] .c2-shots > * { flex: none; width: 100%; }
  body[data-v-c2sty="3"] .c2-s[data-block="Четыре стиля"] figure {
    background: var(--white); color: var(--text);
    border: 2.5px solid var(--edge); border-radius: var(--r);
    box-shadow: 5px 5px 0 var(--sh); padding: 14px; cursor: pointer;
  }
  body[data-v-c2sty="3"] .c2-s[data-block="Четыре стиля"] figcaption {
    margin-top: 12px; font-family: var(--disp); font-size: 20px; font-weight: 800;
    letter-spacing: -.03em; color: var(--text);
  }
  body[data-v-c2sty="3"] .c2-styleinfo { display: block; color: var(--dim); }
  body[data-v-c2sty="3"] .c2-styleopen {
    display: inline-block; margin-top: 10px;
    padding: 6px 13px; border-radius: 90px;
    background: var(--acc-sm); color: var(--on-acc-sm);
    font-size: 12px; font-weight: 800; cursor: pointer;
  }
}
/* ============================================================
   ТРЕТИЙ КРУГ ЗАМЕЧАНИЙ. 02.09.2026 — ТОЛЬКО ТЕЛЕФОН

   Ростислав: «пк версию не трогаем». Поэтому всё, что ниже,
   кроме карточек стилей по образцу, живёт внутри
   @media (max-width: 899px) и на широком экране не работает.
   ============================================================ */


/* ============================================================
   ЗНАЧОК НА ПЕРВОМ ЭКРАНЕ
   Замечание: «убрать стикер».
   ============================================================ */
@media (max-width: 899px) {
  body[data-v-c2badge="1"] .c2-hero .c2-badge { display: none; }
}


/* ============================================================
   ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ: ТРИ ПОДАЧИ
   Замечание: «сделать ещё варианты только для мобилки,
   в пк версии первый экран не меняя».

   1 - снимок во всю ширину под текстом, один вместо двух;
   2 - две колонки: слева текст, справа узкая лента снимков;
   3 - спокойный: без снимков, только слово и кнопка.
   ============================================================ */
@media (max-width: 899px) {
  /* 1. снимок во всю ширину */
  body[data-v-c2heromob="1"] .c2-hero { padding: 24px 0 26px; }
  body[data-v-c2heromob="1"] .c2-float--b { display: none; }
  body[data-v-c2heromob="1"] .c2-float--a {
    position: static; width: 100%; margin-top: 22px;
    transform: none; border-width: 3px;
  }
  body[data-v-c2heromob="1"] .c2-float--a img { aspect-ratio: 16 / 11; }
  body[data-v-c2heromob="1"] .c2-float--a b { font-size: 13px; }

  /* 2. две колонки */
  body[data-v-c2heromob="2"] .c2-hero { padding: 24px 0 28px; }
  body[data-v-c2heromob="2"] .c2-hero h1 { font-size: clamp(34px, 10vw, 46px); max-width: 100%; }
  body[data-v-c2heromob="2"] .c2-hero .c2-in {
    display: grid; grid-template-columns: 1fr 116px; gap: 14px 12px; align-items: start;
  }
  body[data-v-c2heromob="2"] .c2-hero h1,
  body[data-v-c2heromob="2"] .c2-hero .c2-lead,
  body[data-v-c2heromob="2"] .c2-hero .c2-btn,
  body[data-v-c2heromob="2"] .c2-hero .c2-st { grid-column: 1; }
  body[data-v-c2heromob="2"] .c2-float--a,
  body[data-v-c2heromob="2"] .c2-float--b {
    position: static; width: 100%; transform: none; grid-column: 2;
  }
  body[data-v-c2heromob="2"] .c2-float--a { grid-row: 1 / span 2; }
  body[data-v-c2heromob="2"] .c2-float--b { grid-row: 3 / span 2; }

  /* 3. спокойный, без снимков */
  body[data-v-c2heromob="3"] .c2-hero { padding: 30px 0 34px; }
  body[data-v-c2heromob="3"] .c2-float,
  body[data-v-c2heromob="3"] .c2-hero .c2-badge { display: none; }
  body[data-v-c2heromob="3"] .c2-hero .c2-lead { margin-top: 14px; max-width: 30ch; }
}


/* ============================================================
   ВОЗДУХ МЕЖДУ БЛОКАМИ
   Замечание: «в телефонной версии всё слишком плотно,
   не хватает промежуточных более лёгких блоков».

   1 - просто больше воздуха: секции выше, карточки просторнее;
   2 - к воздуху добавляются короткие полосы с одной мыслью
       между тяжёлыми секциями. Текст полос - факты, которые
       уже есть на странице.
   ============================================================ */
.c2-break { display: none; }

@media (max-width: 899px) {
  body[data-v-c2air="1"] .c2-s,
  body[data-v-c2air="2"] .c2-s { padding: 62px 0 68px; }
  body[data-v-c2air="1"] .c2-card,
  body[data-v-c2air="2"] .c2-card { padding: 24px; }
  body[data-v-c2air="1"] .c2-nums,
  body[data-v-c2air="2"] .c2-nums { gap: 18px; }
  body[data-v-c2air="1"] .c2-plans,
  body[data-v-c2air="2"] .c2-plans { gap: 20px; }
  body[data-v-c2air="1"] .c2-s h2 ~ .c2-card:first-of-type,
  body[data-v-c2air="2"] .c2-s h2 ~ .c2-card:first-of-type { margin-top: 30px; }

  body[data-v-c2air="2"] .c2-break {
    display: block; background: var(--white); color: var(--text);
    border-top: 2px solid var(--edge); border-bottom: 2px solid var(--edge);
    padding: 26px var(--pad);
  }
  body[data-v-c2air="2"] .c2-break span {
    display: block; max-width: 560px; margin: 0 auto;
    font-family: var(--disp); font-size: 20px; font-weight: 600;
    line-height: 1.15; letter-spacing: -.03em; text-transform: uppercase;
  }
  /* каждая вторая полоса заливается акцентом, чтобы они читались
     как ритм, а не как повтор одного блока */
  body[data-v-c2air="2"] .c2-break:nth-of-type(even) {
    background: var(--acc-sm); color: var(--on-acc-sm); border-color: var(--acc-sm);
  }
}


/* ============================================================
   ТАБЛИЦА НА ТЕЛЕФОНЕ: ЕЩЁ ТРИ ПОДАЧИ
   Замечание: «сделай 4 версии таблицы на телефоне».

   Вместе с прежними «таблицей» и «карточками» получается пять
   положений. Все подачи собираются из самой таблицы.
   ============================================================ */
.c2-tacc, .c2-tpick, .c2-tmini { display: none; }

@media (max-width: 899px) {
  body[data-v-c2tbl="2"] .c2-table,
  body[data-v-c2tbl="3"] .c2-table,
  body[data-v-c2tbl="4"] .c2-table { display: none; }

  body[data-v-c2tbl="2"] .c2-tacc,
  body[data-v-c2tbl="3"] .c2-tpick { display: block; margin-top: 22px; }
  body[data-v-c2tbl="4"] .c2-tmini {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; margin-top: 22px;
  }
}

/* ---------- списком с раскрытием ---------- */
.c2-tacc details {
  background: var(--white); color: var(--text);
  border: 2px solid var(--edge); border-radius: 16px;
  margin-bottom: 10px; overflow: hidden;
}
.c2-tacc summary {
  list-style: none; cursor: pointer; padding: 14px 42px 14px 16px;
  font-size: 15px; font-weight: 700; position: relative;
}
.c2-tacc summary::-webkit-details-marker { display: none; }
.c2-tacc summary::after {
  content: "+"; position: absolute; right: 12px; top: 10px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc-sm); color: var(--on-acc-sm); font-weight: 800;
}
.c2-tacc details[open] summary::after { content: "–"; }
.c2-tacc dl {
  margin: 0; padding: 0 16px 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
}
.c2-tacc dt { font-size: 13px; color: var(--dim); }
.c2-tacc dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; }
/* выделенный тариф отмечаем заливкой, а не цветом текста:
   ярким оранжевым мелкий текст на белом даёт 3.9 при норме 4.5,
   а у заливки контраст держит палитра */
.c2-tacc dt.is-hit, .c2-tacc dd.is-hit {
  background: var(--acc-sm); color: var(--on-acc-sm);
  border-radius: 90px; padding: 2px 9px;
}
.c2-tacc dt.is-hit { justify-self: start; }
.c2-tacc dd.is-hit { justify-self: end; }

/* ---------- выбор тарифа ---------- */
.c2-tpick__bar { display: flex; flex-wrap: wrap; gap: 6px; }
.c2-tpick__bar button {
  padding: 8px 13px; border-radius: 90px; cursor: pointer;
  border: 2px solid var(--edge); background: var(--white); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700;
}
.c2-tpick__bar button[aria-pressed="true"] {
  background: var(--acc-sm); color: var(--on-acc-sm); border-color: var(--acc-sm);
}
.c2-tpick__body {
  margin: 14px 0 0; padding: 16px;
  background: var(--white); color: var(--text);
  border: 2px solid var(--edge); border-radius: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
}
.c2-tpick__body dt { font-size: 13px; color: var(--dim); }
.c2-tpick__body dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; }

/* ---------- коротко, по двое ---------- */
.c2-tmini__card {
  background: var(--white); color: var(--text);
  border: 2px solid var(--edge); border-radius: 16px; padding: 14px;
}
.c2-tmini__card.is-hit { border-color: var(--or); border-width: 3px; }
.c2-tmini__card b {
  display: block; font-family: var(--disp); font-size: 16px; font-weight: 800;
  letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 8px;
}
.c2-tmini__card span { display: block; margin-top: 6px; font-size: 12px; }
.c2-tmini__card i { display: block; font-style: normal; color: var(--dim); }
.c2-tmini__card em { font-style: normal; font-weight: 700; }


/* ============================================================
   СТИЛИ ЦВЕТНЫМИ КАРТОЧКАМИ, ПО ОБРАЗЦУ
   Ростислав прислал образец: цветная плита со скруглением,
   крупное имя стиля, описание, строка цены, кнопка, а справа
   снимки альбомов под углом.

   Что адаптировано: цвет берётся наш (акцент палитры), шрифт наш,
   снимок один - наш разворот, повёрнутый на 4 градуса.
   Вместо цены стоит «входит в любой тариф»: у стиля своей цены
   нет, приписывать ему сумму нельзя.

   Описания стилей Ростислав ещё не прислал, поэтому под именем
   стоит общая правдивая строка.
   ============================================================ */











@media (max-width: 899px) {
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] .c2-shots {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
    overflow: visible; width: 100%; margin-left: 0; padding: 4px 0 0;
  }
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] .c2-shots > * { flex: none; width: 100%; }
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] figure {
    position: relative; overflow: hidden;
    background: var(--acc-sm); color: var(--on-acc-sm);
    border-radius: 28px; padding: 24px 20px 22px;
    min-height: 230px; cursor: pointer;
  }
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] figure img {
    position: absolute; right: -46px; bottom: 18px; width: 62%;
    aspect-ratio: 4 / 3; object-fit: cover;
    border: 0; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    transform: rotate(-4deg);
  }
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] figcaption {
    order: -1; margin: 0 0 10px;
    font-family: var(--disp); font-size: clamp(30px, 9vw, 42px); font-weight: 800;
    line-height: .95; letter-spacing: -.04em; color: var(--on-acc-sm);
    position: relative; z-index: 2;
  }
  body[data-v-c2sty="4"] .c2-styleinfo {
    display: block; position: relative; z-index: 2;
    max-width: 56%; font-size: 14px; font-weight: 600; color: var(--on-acc-sm);
  }
  body[data-v-c2sty="4"] .c2-styleprice {
    display: block; position: relative; z-index: 2;
    margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--on-acc-sm);
  }
  body[data-v-c2sty="4"] .c2-styleopen {
    display: inline-block; position: relative; z-index: 2; margin-top: 16px;
    padding: 12px 20px; border-radius: 90px;
    background: var(--white); color: var(--text);
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  }
}
/* каждая вторая карточка тёмная: четыре одинаковых оранжевых
   плиты подряд читались как одно пятно */






@media (max-width: 899px) {
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] figure:nth-child(even) {
    background: var(--deep); color: var(--on-deep);
  }
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] figure:nth-child(even) figcaption,
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] figure:nth-child(even) .c2-styleinfo,
  body[data-v-c2sty="4"] .c2-s[data-block="Четыре стиля"] figure:nth-child(even) .c2-styleprice {
    color: var(--on-deep);
  }
}
.c2-styleprice { display: none; }

/* ============================================================
   ЗАМЕТКА ПРО ГРУППОВЫЕ КАДРЫ. 02.09.2026

   Ростислав: «внизу каждого прайса оранжевым добавь, что групповые
   одинаковые у всех и каждый ученик минимум на 2 кадрах».
   Стоит в Лайт, Мини, Стандарте и Норме. В Персональном её нет:
   там групповые берутся по выбору ученика, и фраза была бы неправдой.

   Цвет - тёмный оранжевый #d62b00, а не яркий: ярким на белом
   мелкий текст даёт 3.9 при норме 4.5, тёмным - 4.9.
   На оранжевой карточке Стандарта заметка берёт цвет текста
   карточки: оранжевым по оранжевому её бы не было видно.
   ============================================================ */
/* селектор с карточкой обязателен: правило `.c2-card p` из базового
   файла специфичнее одиночного класса и красило заметку в общий
   приглушённый цвет */
.c2-card .c2-plan__note {
  margin-top: 14px; padding-top: 12px;
  border-top: 2px solid color-mix(in srgb, var(--or-ink, #d62b00) 30%, transparent);
  font-size: 14px; font-weight: 700; line-height: 1.4;
  color: var(--or-ink, #d62b00);
}

/* на цветных карточках оранжевым по оранжевому не видно, а белым
   по оранжевому - 3.7 при норме 4.5. Поэтому там заметка ложится
   на тёмную подложку: и заметна, и читается */
.c2-card--or .c2-plan__note,
.c2-card--ink .c2-plan__note,
.c2-card--graph .c2-plan__note {
  margin-top: 16px; padding: 12px 14px; border-top: 0; border-radius: 14px;
  background: var(--deep); color: #fff;
}

/* ============================================================
   ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА. 02.09.2026

   После ручной раскладки наклеек круглый значок на первом экране
   уехал вправо и на узком ПК-экране вылезал за край: документ
   становился шире окна на несколько пикселей, внизу появлялась
   полоса прокрутки.

   `overflow-x: hidden` на body не спасал - у html прокрутка своя.
   Ставим `clip` на сам html: он обрезает лишнее по горизонтали,
   но, в отличие от hidden, не создаёт новый контейнер прокрутки,
   поэтому снимки первого экрана продолжают заходить на следующий
   блок по вертикали.
   ============================================================ */
html { overflow-x: clip; }

/* ============================================================
   НАКЛЕЙКИ ПРИВЯЗАНЫ К ШИРИНЕ КОЛОНКИ. 02.09.2026

   Раскладка наклеек была записана в пикселях, а ширина колонки
   текста зависит от окна: на широком мониторе она 1180, на ноутбуке
   1080 и меньше. Пиксельный сдвиг оставался прежним, и наклейки
   уезжали относительно текста - у Ростислава одна вылезла за край.

   Теперь сдвиг по горизонтали записывается в cqw - это один процент
   ширины колонки. Колонка уже - сдвиг меньше, колонка шире - больше,
   наклейка держится того же места в макете.

   Чтобы cqw работал, колонка объявлена контейнером. На вёрстку это
   не влияет: ширину ей и так задаёт max-width.
   ============================================================ */
.c2-in { container-type: inline-size; }

/* ============================================================
   ЗАГОЛОВОК ПЕРВОГО ЭКРАНА НА УЗКОМ ЭКРАНЕ. 02.09.2026

   После смены текста на «Выпускные альбомы в Чите» самое длинное
   слово перестало помещаться: при 390 оно шире экрана. Кегль
   привязан к ширине, min-width нужен, чтобы элемент вообще
   разрешил себе стать уже слова.
   ============================================================ */
@media (max-width: 560px) {
  .c2-hero h1 { font-size: clamp(28px, 10.2vw, 46px); min-width: 0; }
}

/* ============================================================
   НОВЫЕ РАСКЛАДКИ ПЕРВОГО ЭКРАНА НА ТЕЛЕФОНЕ. 03.09.2026

   Ростиславу не понравился первый блок на телефоне. Собраны три
   новых положения переключателя «Раскладка на телефоне», чтобы
   выбирать глазами, а не описывать словами:
     2 - снимки уходят под текст и кнопку, ничего ни на что не лезет;
     3 - снимки меньше и прижаты к заголовку, пустоты между ними
         и текстом нет;
     4 - снимков на первом экране нет совсем.
   ============================================================ */
@media (max-width: 899px) {

  /* ---- 2. снимки под текстом ----
     сетка в две колонки: весь текст занимает обе, снимки встают
     рядом по одной. Так снимки перестают быть плавающими и не
     могут лечь на строки */
  body[data-v-c2heropos="2"] .c2-hero .c2-in {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px;
  }
  body[data-v-c2heropos="2"] .c2-hero .c2-in > * { grid-column: 1 / -1; }
  body[data-v-c2heropos="2"] .c2-hero h1 { order: 1; max-width: none; min-width: 0; }
  body[data-v-c2heropos="2"] .c2-hero .c2-lead { order: 2; margin-top: 14px; max-width: 100%; }
  body[data-v-c2heropos="2"] .c2-hero .c2-btn { order: 3; margin-top: 20px; justify-self: start; }
  body[data-v-c2heropos="2"] .c2-hero .c2-float {
    order: 4; grid-column: auto; position: static; width: auto;
    margin-top: 18px; inset: auto; transform: none; rotate: 0deg;
  }
  body[data-v-c2heropos="2"] .c2-hero .c2-float img { width: 100%; height: auto; }

  /* ---- 3. снимки меньше и вплотную к заголовку ----
     та же схема, что и в положении 1, но кадры уменьшены и подняты,
     а текст начинается сразу под ними */
  body[data-v-c2heropos="3"] .c2-hero { padding-top: 18px; padding-bottom: 40px; }
  body[data-v-c2heropos="3"] .c2-hero h1 { max-width: 58%; min-width: 0; }
  body[data-v-c2heropos="3"] .c2-float--a { width: 104px; right: 10px; left: auto; top: 58px; bottom: auto; }
  body[data-v-c2heropos="3"] .c2-float--b { width: 86px; left: auto; right: 88px; top: 132px; bottom: auto; z-index: 4; }
  body[data-v-c2heropos="3"] .c2-hero .c2-lead { margin-top: 172px; max-width: 100%; }
  body[data-v-c2heropos="3"] .c2-hero .c2-btn { margin-top: 22px; }

  /* ---- 4. без снимков ----
     первый экран как обложка: заголовок, строка о деле, кнопка */
  body[data-v-c2heropos="4"] .c2-hero .c2-float { display: none; }
  body[data-v-c2heropos="4"] .c2-hero h1 { max-width: 100%; min-width: 0; }
  body[data-v-c2heropos="4"] .c2-hero .c2-lead { margin-top: 16px; max-width: 100%; }
  body[data-v-c2heropos="4"] .c2-hero .c2-btn { margin-top: 22px; }
}

/* ============================================================
   НОВЫЕ ПОДАЧИ БЛОКА «ЧЕТЫРЕ СТИЛЯ» НА ТЕЛЕФОНЕ. 03.09.2026

   Сейчас четыре карточки идут в столбик и блок вырос до 1248
   точек - это три экрана прокрутки ради четырёх названий.
     5 - сетка два на два, блок вдвое короче;
     6 - лента с прокруткой пальцем вбок, блок в один экран;
     7 - список: маленький кадр слева, название и строка справа.
   ============================================================ */
@media (max-width: 899px) {

  /* общее для новых подач: карточка перестаёт быть цветной плитой */
  body[data-v-c2sty="5"] .c2-s[data-block="Четыре стиля"] figure,
  body[data-v-c2sty="6"] .c2-s[data-block="Четыре стиля"] figure,
  body[data-v-c2sty="7"] .c2-s[data-block="Четыре стиля"] figure {
    background: none; padding: 0; min-height: 0; border-radius: 0;
    color: inherit; overflow: visible; cursor: pointer;
  }
  body[data-v-c2sty="5"] .c2-s[data-block="Четыре стиля"] figure img,
  body[data-v-c2sty="6"] .c2-s[data-block="Четыре стиля"] figure img,
  body[data-v-c2sty="7"] .c2-s[data-block="Четыре стиля"] figure img {
    position: static; width: 100%; inset: auto;
    border-radius: 14px; box-shadow: none; transform: none;
  }
  body[data-v-c2sty="5"] .c2-styleprice, body[data-v-c2sty="6"] .c2-styleprice, body[data-v-c2sty="7"] .c2-styleprice,
  body[data-v-c2sty="5"] .c2-styleopen, body[data-v-c2sty="6"] .c2-styleopen, body[data-v-c2sty="7"] .c2-styleopen {
    display: none;
  }

  /* ---- 5. сетка два на два ---- */
  body[data-v-c2sty="5"] .c2-s[data-block="Четыре стиля"] .c2-shots {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px;
    overflow: visible; width: 100%; margin-left: 0; padding: 4px 0 0;
  }
  body[data-v-c2sty="5"] .c2-s[data-block="Четыре стиля"] .c2-shots > * { flex: none; width: auto; }
  body[data-v-c2sty="5"] .c2-s[data-block="Четыре стиля"] figure img { aspect-ratio: 4 / 3; object-fit: cover; }
  body[data-v-c2sty="5"] .c2-s[data-block="Четыре стиля"] figcaption {
    margin: 8px 0 0; font-family: var(--disp); font-size: 18px; font-weight: 800;
    letter-spacing: -.02em; line-height: 1.05; color: var(--sec-ink);
  }
  body[data-v-c2sty="5"] .c2-styleinfo { display: none; }

  /* ---- 6. лента вбок ----
     карточка занимает 68% ширины: край следующей виден и подсказывает,
     что ленту можно листать */
  body[data-v-c2sty="6"] .c2-s[data-block="Четыре стиля"] .c2-shots {
    display: flex; gap: 12px; width: 100%; margin-left: 0; padding: 4px 0 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  body[data-v-c2sty="6"] .c2-s[data-block="Четыре стиля"] figure {
    flex: 0 0 68%; scroll-snap-align: start;
  }
  body[data-v-c2sty="6"] .c2-s[data-block="Четыре стиля"] figure img { aspect-ratio: 4 / 3; object-fit: cover; }
  body[data-v-c2sty="6"] .c2-s[data-block="Четыре стиля"] figcaption {
    margin: 8px 0 0; font-family: var(--disp); font-size: 19px; font-weight: 800;
    letter-spacing: -.02em; color: var(--sec-ink);
  }
  body[data-v-c2sty="6"] .c2-styleinfo { display: none; }

  /* ---- 7. списком ----
     кадр слева, название и строка описания справа */
  body[data-v-c2sty="7"] .c2-s[data-block="Четыре стиля"] .c2-shots {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
    overflow: visible; width: 100%; margin-left: 0; padding: 4px 0 0;
  }
  body[data-v-c2sty="7"] .c2-s[data-block="Четыре стиля"] .c2-shots > * { flex: none; width: auto; }
  body[data-v-c2sty="7"] .c2-s[data-block="Четыре стиля"] figure {
    display: grid; grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 14px; align-items: center;
  }
  body[data-v-c2sty="7"] .c2-s[data-block="Четыре стиля"] figure img {
    grid-area: 1 / 1 / 3 / 2; aspect-ratio: 1 / 1; object-fit: cover;
  }
  body[data-v-c2sty="7"] .c2-s[data-block="Четыре стиля"] figcaption {
    grid-area: 1 / 2 / 2 / 3; margin: 0; align-self: end;
    font-family: var(--disp); font-size: 20px; font-weight: 800;
    letter-spacing: -.02em; color: var(--sec-ink);
  }
  body[data-v-c2sty="7"] .c2-styleinfo {
    grid-area: 2 / 2 / 3 / 3; display: block; align-self: start;
    margin-top: 4px; max-width: 100%; font-size: 13px; font-weight: 500;
    color: color-mix(in srgb, var(--sec-ink) 74%, transparent);
  }
}