/*
 * Стили черновой главной v2 (роут /home-v2).
 *
 * Файл сознательно отдельный и НЕ входит в сборку app.css: пока страница
 * живёт параллельно текущей главной, пересобирать общий бандл незачем.
 * При переключении на боевую главную — перенести в
 * resources/assets/sass/parisclub/pages/home/ и собрать через mix.
 *
 * Палитра взята из resources/assets/sass/_variables.scss:
 *   blue1 #009ccc, red1 #cc0066, black1 #231f20, gray5 #f5f7fa, gray-light-4 #dcdfe2
 */

.home-v2 {
    color: #231f20;
}

/*
 * Bootstrap рисует рамку фокуса по :focus (a:focus в app.css), а клик мышью
 * фокус наводит — рамка оставалась висеть на ссылке после нажатия. Особенно
 * заметно на target="_blank": вкладка открылась, фокус вернулся на ссылку.
 *
 * Гасим её и возвращаем по :focus-visible — там браузер сам решает, мышью
 * это было или с клавиатуры. Совсем убирать нельзя: при управлении
 * с клавиатуры рамка — единственный признак, где сейчас курсор.
 */
.home-v2 a:focus {
    outline: none;
}

.home-v2 a:focus-visible {
    outline: 2px solid #009ccc;
    outline-offset: 3px;
}

/* То же самое у кнопок: bootstrap вешает рамку на .btn:focus. */
.home-v2 .btn:focus,
.home-v2 .btn.focus,
.home-v2 .btn:active:focus {
    outline: none;
}

.home-v2 .btn:focus-visible {
    outline: 2px solid #009ccc;
    outline-offset: 3px;
}

/* ---------- Общая сетка секций ---------- */

.home-v2 .hv2-section,
.home-v2 .hv2-tiles-section,
.home-v2 .hv2-pluses-section {
    margin-bottom: 50px;
}

/*
 * Модификатора --soft больше нет.
 *
 * Он давал секциям «Акции», «Почему с нами работают» и «Статьи» подложку
 * #f5f7fa и поле 30px по бокам. Подложка при этом была невидима: body на всём
 * сайте залит ровно тем же #f5f7fa (app.css). Работало только поле — оно
 * сдвигало заголовки этих трёх блоков на 30px вправо от остальных, и ряд
 * заголовков страницы шёл лесенкой.
 *
 * Если такие блоки понадобится всё-таки выделить — подложка должна быть
 * другого цвета (например белого), и тогда её надо тянуть на всю ширину окна
 * либо оставлять заголовок снаружи, иначе выравнивание сломается снова.
 */

.home-v2 .hv2-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.home-v2 .hv2-section__title {
    margin: 0;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    color: #231f20;
}

.home-v2 .hv2-section__sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: #828a95;
}

.home-v2 .hv2-section__link {
    font-size: 14px;
    font-weight: 500;
    color: #009ccc;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
}

.home-v2 .hv2-section__link:hover,
.home-v2 .hv2-section__link:focus {
    color: #007ba3;
    border-bottom-color: currentColor;
    text-decoration: none;
}

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

/*
 * Блок сознательно живёт не в интерфейсной палитре сайта (#009ccc / #cc0066),
 * а в приглушённой товарной: фирменные цвета остаются на кнопках и ссылках
 * интерфейса, иначе они спорят с бельевыми тонами.
 *
 * Заголовки набраны PF Regal Display Pro — той же антиквой, которой набран
 * герой текущей главной (_home.scss:102). Начертание в проекте одно,
 * BoldItalic, поэтому им набирается только короткий заголовок, не абзац.
 */

/* Воздуха больше, чем у остальных секций: это первый экран. */
.home-v2 .hv2-tiles-section {
    margin-bottom: 80px;
}

.home-v2 .hv2-tiles {
    display: grid;
    /* Десять колонок, чтобы 6/4 читалось ровно как 60/40. */
    grid-template-columns: repeat(10, 1fr);
    gap: 26px;
    margin-top: 40px;
}

.home-v2 .hv2-tile {
    position: relative;
    display: flex;
    /*
     * Не flex-end: при нижнем выравнивании верх заголовка плавал вместе
     * с длиной подписи и заголовки в ряду скакали по высоте. Тянем тело
     * на всю карточку, заголовок держим у верха, кнопку уводим к низу.
     */
    align-items: stretch;
    overflow: hidden;
    padding: 36px 40px 38px;
    border-radius: 14px;
    color: #2b2320;
    text-decoration: none;
    transition: box-shadow .25s ease;
}

.home-v2 .hv2-tile:hover,
.home-v2 .hv2-tile:focus {
    color: #2b2320;
    text-decoration: none;
    box-shadow: 0 18px 40px -26px rgba(43, 35, 32, .55);
}

/* Ширины проставляет HomeV2Service::layoutTiles под фактическое число карточек. */
.home-v2 .hv2-tile--w4  { grid-column: span 4; }
.home-v2 .hv2-tile--w6  { grid-column: span 6; }
.home-v2 .hv2-tile--w10 { grid-column: span 10; }

.home-v2 .hv2-tile--lg { min-height: 340px; }
.home-v2 .hv2-tile--sm { min-height: 200px; }

/* ---- Слой картинки ---- */

/*
 * Два режима, задаются в config('home_v2.tiles_images'):
 *   cover  — снимок на всю карточку, поверх градиент, чтобы текст читался;
 *   cutout — вырезка с прозрачностью, стоит у правого нижнего угла на
 *            тональной заливке карточки. Подложка под текст ей не нужна:
 *            слева остаётся чистый цвет.
 */
.home-v2 .hv2-tile__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}

/* Зумим картинку, а не карточку целиком: иначе дёргается текст. */
.home-v2 .hv2-tile:hover .hv2-tile__media {
    transform: scale(1.04);
}

.home-v2 .hv2-tile__media--cover {
    background-position: center right;
    background-size: cover;
}

/*
 * Вырезка масштабируется ПО ВЫСОТЕ карточки, а не вписыванием (contain).
 *
 * Почему так: contain подгоняет картинку по той стороне, которая упрётся
 * первой, а коробки у карточек разной ширины — в итоге две вырезки с разными
 * пропорциями кадра рисовались разной высоты (386 px против 257) и макушки
 * не совпадали. При масштабе по высоте обе фигуры получают ровно высоту
 * карточки и встают на один уровень.
 *
 * Условие, которому обязаны отвечать файлы: одинаковая высота канваса
 * и фигура, стоящая на нижнем крае кадра. Ширина может отличаться —
 * она задаёт только то, насколько вырезка выступает влево.
 */
.home-v2 .hv2-tile__media--cutout {
    background-position: right bottom;
    background-size: auto 100%;
    /* Вырезка растёт от нижнего правого угла, чтобы не отрывалась от края. */
    transform-origin: right bottom;
}

/*
 * Карточке с вырезкой нужен запас по высоте: слева её подпирает текст,
 * поэтому крупнее фигура становится только за счёт роста карточки.
 * Ряд в гриде тянется по высокой карточке, поэтому сосед подстраивается сам.
 */
.home-v2 .hv2-tile--lg.hv2-tile--cutout {
    min-height: 400px;
}

/* Подложка под текстом: без неё на узких экранах текст ляжет на модель. */
.home-v2 .hv2-tile__media--cover:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* ---- Темы ---- */

/*
 * Пока фотографий нет, правая половина широкой карточки оставалась плоской
 * заливкой и читалась как неподгрузившаяся картинка. Мягкая тональная растяжка
 * делает пустоту намеренной. Когда фото появятся, слой .hv2-tile__media
 * ложится сверху и перекрывает её.
 */
.home-v2 .hv2-tile--sand  { background-color: #f2ede5; background-image: linear-gradient(115deg, #f2ede5 42%, #e5dbc9 100%); }
.home-v2 .hv2-tile--blush { background-color: #f6e6ec; background-image: linear-gradient(115deg, #f6e6ec 42%, #efd0dc 100%); }
.home-v2 .hv2-tile--cream { background-color: #f7efe1; background-image: linear-gradient(115deg, #f7efe1 42%, #efe0c4 100%); }
.home-v2 .hv2-tile--mauve { background-color: #ece6ef; background-image: linear-gradient(115deg, #ece6ef 42%, #dcd0e0 100%); }

.home-v2 .hv2-tile--sand  .hv2-tile__media--cover:after { background: linear-gradient(90deg, #f2ede5 16%, rgba(242, 237, 229, 0) 70%); }
.home-v2 .hv2-tile--blush .hv2-tile__media--cover:after { background: linear-gradient(90deg, #f6e6ec 16%, rgba(246, 230, 236, 0) 70%); }
.home-v2 .hv2-tile--cream .hv2-tile__media--cover:after { background: linear-gradient(90deg, #f7efe1 16%, rgba(247, 239, 225, 0) 70%); }
.home-v2 .hv2-tile--mauve .hv2-tile__media--cover:after { background: linear-gradient(90deg, #ece6ef 16%, rgba(236, 230, 239, 0) 70%); }

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

.home-v2 .hv2-tile__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
}

/*
 * Ширина текстовой колонки считается от ширины карточки, а не от её высоты:
 * привязка к --lg зажимала узкий «Предзаказ» до 56% и ломала кнопку на две строки.
 */
.home-v2 .hv2-tile--w10 .hv2-tile__body { max-width: 44%; }
.home-v2 .hv2-tile--w6  .hv2-tile__body { max-width: 54%; }
/* Узкая карточка отдаёт тексту всю ширину: 80% зажимали заголовок сезона. */
.home-v2 .hv2-tile--w4  .hv2-tile__body { max-width: 100%; }

.home-v2 .hv2-tile__title {
    display: block;
    font-family: 'PFRegalBoldItalicBold', 'Gotham Pro', sans-serif;
    font-style: italic;
    font-weight: bold;
    line-height: 1.08;
    color: #2b2320;
}

/*
 * Обе крупные карточки набраны одним кеглем, поэтому заголовки в верхнем
 * ряду читаются как один уровень. min-height резервирует место ровно под две
 * строки: у «Акций» заголовок в одну, и без резерва линия с подписью и кнопкой
 * вставала бы выше, чем у соседа.
 */
.home-v2 .hv2-tile--lg .hv2-tile__title { font-size: 36px; min-height: 78px; }
.home-v2 .hv2-tile--sm .hv2-tile__title { font-size: 28px; min-height: 61px; }

.home-v2 .hv2-tile__accent {
    display: block;
    color: #9c3f6e;
}

/*
 * Плашка-триггер над заголовком («У Вас за 3 дня», «Сезон открыт»):
 * заказчик просил, чтобы суть карточки схватывалась без чтения.
 * Белая полупрозрачная на тональной заливке — единственное светлое пятно
 * в карточке, глаз идёт на неё первой; цвет текста — тёмный тон страницы,
 * фирменные цвета сюда по-прежнему не заходят.
 */
.home-v2 .hv2-tile__badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, .72);
    color: #2b2320;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Единственная декоративная деталь на блок — короткая линия под заголовком. */
.home-v2 .hv2-tile__rule {
    display: block;
    width: 44px;
    height: 1px;
    margin: 18px 0 14px;
    background-color: rgba(43, 35, 32, .25);
}

.home-v2 .hv2-tile__note {
    display: block;
    /* Уже, чем колонка: на 330px подпись рвалась висячим словом. */
    max-width: 265px;
    /* Минимальный зазор до кнопки: остальное добирает её margin-top: auto. */
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b625d;
}

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

/*
 * Контурная, а не залитая: чёрный прямоугольник был последним интерфейсным
 * элементом блока и спорил с антиквой. Цвет — тёплый тёмно-коричневый, а не
 * чистый чёрный: чёрный на тёплой заливке холодит карточку.
 * Заливка появляется только на наведении, одна на все карточки.
 */
.home-v2 .hv2-tile__cta {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    /* auto прижимает кнопку к низу карточки — нижние края в ряду совпадают. */
    margin-top: auto;
    padding: 13px 26px;
    border: 1px solid rgba(61, 51, 46, .32);
    border-radius: 100px;
    background-color: transparent;
    color: #3d332e;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.home-v2 .hv2-tile:hover .hv2-tile__cta {
    border-color: #3d332e;
    background-color: #3d332e;
    color: #fff;
}

.home-v2 .hv2-tile__arrow {
    margin-left: 10px;
    transition: transform .2s ease;
}

.home-v2 .hv2-tile:hover .hv2-tile__arrow {
    transform: translateX(4px);
}


/*
 * Нижний ряд компактнее верхнего: это второстепенные входы, и запас воздуха
 * им не нужен. Ужаты отступы карточки, поля линии и зазор до кнопки —
 * без этого ряд шёл почти в высоту верхнего и спорил с ним по весу.
 */
.home-v2 .hv2-tile--sm {
    padding: 28px 32px 30px;
}

.home-v2 .hv2-tile--sm .hv2-tile__rule {
    margin: 12px 0 10px;
}

/*
 * Подписи шире, чем у верхнего ряда: 265px ломали их на две строки, а картинки
 * здесь нет, и место справа всё равно пустует. В одну строку — на 21px ниже.
 */
.home-v2 .hv2-tile--sm .hv2-tile__note {
    max-width: 400px;
    margin-bottom: 18px;
}

/* ---------- Наши плюсы ---------- */

/*
 * Полоса, а не четыре подписи на белом.
 *
 * Блок стоит между принятым первым экраном и товарным рядом, и без границ
 * читался как служебная строка: серый текст 14px на белом, без заголовка
 * и без краёв. Волосяные линии сверху и снизу плюс разделители колонок
 * держат его в рамке и не добавляют странице ещё одной серой плиты —
 * такая уже есть ниже, у «Почему с нами работают».
 */
.home-v2 .hv2-pluses-section {
    padding: 30px 0 32px;
    border-top: 1px solid #e7e9ee;
    border-bottom: 1px solid #e7e9ee;
}

.home-v2 .hv2-pluses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Зазор колонкам дают их собственные поля: gap разорвал бы разделители. */
    gap: 0;
}

.home-v2 .hv2-plus {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 28px;
}

.home-v2 .hv2-plus:first-child {
    padding-left: 0;
}

.home-v2 .hv2-plus:last-child {
    padding-right: 0;
}

.home-v2 .hv2-plus + .hv2-plus {
    border-left: 1px solid #e7e9ee;
}

/*
 * Тёплый серо-коричневый, а не чёрный: иконка здесь — метка колонки,
 * а не картинка, и не должна спорить с подписью по весу. Тон взят из
 * первого экрана (#6b625d подписей карточек), осветлён.
 */
.home-v2 .hv2-plus__icon {
    /* flex: none — на телефоне иконка стоит в строку и иначе сжимается. */
    flex: none;
    display: block;
    color: #8f8179;
}

.home-v2 .hv2-plus__icon svg {
    display: block;
    width: 30px;
    height: 30px;
}

.home-v2 .hv2-plus p {
    margin: 0;
    max-width: 250px;
    /*
     * Ровняет длину строк между собой. Без balance каждая подпись роняла вниз
     * одно висячее слово («…и производство / белья»), и ряд выглядел рваным.
     */
    text-wrap: balance;
    font-size: 14px;
    line-height: 1.5;
    color: #4b4c4c;
}

/* ---------- Топ продаж ---------- */

/*
 * Сетки у блока нет: карточки раскладывает products_slider (тот же, что
 * на странице товара).
 *
 * Своё здесь — только вертикальные отступы вокруг стрелок. Компонент держит
 * стрелки в нижнем поле своего контейнера (padding-bottom 40px, стрелка
 * прижата к нижнему краю), поэтому «опустить стрелки» — это увеличить поле:
 * тянуть их вниз позиционированием нельзя, вылезут за контейнер.
 * Нижний отступ секции ужат до 46px: стрелка стоит на 4px выше нижнего края
 * секции, и вместе получаются те же 50px, что у остальных блоков.
 */
.home-v2 .hv2-products-section .base-product-slider .swiper-container {
    padding-bottom: 58px;
}

/*
 * Карточка не тянется на всю ширину слайда.
 *
 * Внутри неё кадр ограничен `max-width: 340px` (_pr_card_block.scss), а сам
 * блок занимает 100%: пока в кадре 3-4 карточки, слайд уже 340px и это не
 * видно, но на 604px слайдер отдаёт одну карточку на весь экран — кадр
 * упирался в свои 340px, и справа от него оставалась пустая белая половина.
 *
 * Ширину слайдов задаёт Swiper инлайном, из CSS их число не поменять, —
 * поэтому ограничиваем саму карточку и центруем её в слайде. Ровно так же
 * ведёт себя каталог: `.p2-catalog-products-blocks-wrap-product` там тоже
 * `max-width: 340px` и `margin: auto` (_catalog_products.scss).
 */
.home-v2 .hv2-products-section .swiper-slide .pr-crd-block {
    max-width: 340px;
    margin: 0 auto;
}

.home-v2 .hv2-products-section {
    margin-bottom: 46px;
}

/* ---------- Плашка: акции, Telegram, журнал ---------- */

/*
 * Три нижних блока устроены одинаково — кадр сверху, текст под ним, вся
 * плашка ссылка. Оформление у них общее: скруглённый белый прямоугольник
 * с еле заметной рамкой и мягкой тенью. Держим одним правилом, а не тремя
 * копиями: иначе при следующей правке одна из плашек останется квадратной.
 *
 * overflow: hidden обязателен — без него кадр вылезает за скругление,
 * и на наведении из-под угла торчит прямоугольник.
 */
.home-v2 .hv2-promo,
.home-v2 .hv2-tg-card,
.home-v2 .hv2-journal-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(35, 31, 32, .04);
    color: #231f20;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.home-v2 .hv2-promo:hover,
.home-v2 .hv2-promo:focus,
.home-v2 .hv2-tg-card:hover,
.home-v2 .hv2-tg-card:focus,
.home-v2 .hv2-journal-card:hover,
.home-v2 .hv2-journal-card:focus {
    text-decoration: none;
    color: #231f20;
    border-color: #dcdfe2;
    box-shadow: 0 12px 26px rgba(35, 31, 32, .1);
    transform: translateY(-2px);
}

/*
 * Кадр наезжает медленнее, чем поднимается плашка: движение читается
 * как одно, а не как два одновременных рывка.
 */
.home-v2 .hv2-promo__img,
.home-v2 .hv2-tg-card__img img,
.home-v2 .hv2-journal-card__img img {
    transition: transform .45s ease;
}

.home-v2 .hv2-promo:hover .hv2-promo__img,
.home-v2 .hv2-tg-card:hover .hv2-tg-card__img img,
.home-v2 .hv2-journal-card:hover .hv2-journal-card__img img {
    transform: scale(1.04);
}

/* ---------- Акции ---------- */

/*
 * Сетка задаётся модификатором по числу акций: --1 на всю ширину,
 * --2 по половине, --3 по трети. Модификатор проставляет шаблон — от числа
 * зависит и пропорция кадра, которую он запрашивает у ресайзера.
 */
.home-v2 .hv2-promos {
    display: grid;
    gap: 20px;
}

.home-v2 .hv2-promos--1 { grid-template-columns: 1fr; }
.home-v2 .hv2-promos--2 { grid-template-columns: repeat(2, 1fr); }
.home-v2 .hv2-promos--3 { grid-template-columns: repeat(3, 1fr); }

.home-v2 .hv2-promo__media {
    display: block;
    position: relative;
    overflow: hidden;
    /* Видна, пока картинка грузится, и остаётся у акции без картинки. */
    background-color: #e7eef3;
}

.home-v2 .hv2-promo__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.home-v2 .hv2-promo__body {
    display: flex;
    flex-direction: column;
    /* Тянется на остаток высоты — нижние края карточек в ряду совпадают. */
    flex: 1 1 auto;
    gap: 6px;
    padding: 16px 18px 18px;
}

.home-v2 .hv2-promo__title {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
}

.home-v2 .hv2-promo__term {
    font-size: 12.5px;
    color: #828a95;
}

/*
 * Строка-ссылка, а не кнопка: до трёх контурных кнопок подряд спорили бы
 * с единственной кнопкой первого экрана. margin-top: auto прижимает её
 * к низу — строка стоит на одной высоте у всех карточек ряда.
 */
.home-v2 .hv2-promo__cta {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding-top: 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #009ccc;
}

.home-v2 .hv2-promo__cta svg {
    margin-left: 8px;
    transition: transform .2s ease;
}

.home-v2 .hv2-promo:hover .hv2-promo__cta svg {
    transform: translateX(4px);
}

/*
 * Одна акция — карточка ложится горизонтально: кадр слева, текст справа.
 * Вертикальной на всю ширину она бы вытянулась полосой в 1140px, под которой
 * висит строка заголовка, — так выглядит баннер, а не карточка.
 * Высоту задаёт min-height кадра: текста в теле на 1140px не хватает.
 */
.home-v2 .hv2-promos--1 .hv2-promo {
    flex-direction: row;
}

.home-v2 .hv2-promos--1 .hv2-promo__media {
    flex: 0 0 46%;
}

/*
 * 340px не случайны: кадр здесь 46% от 1140, то есть 524px, и при такой
 * высоте коробка получает те же пропорции 1.54, в которых шаблон просит
 * кроп у ресайзера, — cover тогда ничего не срезает по краям.
 */
.home-v2 .hv2-promos--1 .hv2-promo__img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 340px;
}

.home-v2 .hv2-promos--1 .hv2-promo__body {
    justify-content: center;
    gap: 10px;
    padding: 34px 40px;
}

.home-v2 .hv2-promos--1 .hv2-promo__title {
    font-size: 26px;
    line-height: 1.2;
}

/* Тело центрировано по вертикали — auto-отступ снизу его бы разорвал. */
.home-v2 .hv2-promos--1 .hv2-promo__cta {
    margin-top: 8px;
    padding-top: 0;
}

/* Две акции: карточка вдвое шире трёхколоночной, кегль догоняет. */
.home-v2 .hv2-promos--2 .hv2-promo__body {
    padding: 20px 22px 22px;
}

.home-v2 .hv2-promos--2 .hv2-promo__title {
    font-size: 19px;
}

/* ---------- Бренды ---------- */

.home-v2 .hv2-brands {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    align-items: center;
}

.home-v2 .hv2-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: 10px;
    border: 1px solid #dcdfe2;
    background-color: #fff;
}

.home-v2 .hv2-brand:hover {
    border-color: #009ccc;
}

.home-v2 .hv2-brand__icon svg {
    max-width: 100%;
    max-height: 44px;
    height: auto;
}

/* ---------- Цифры ---------- */

/*
 * Полоса набрана так же, как «плюсы» под первым экраном: те же волосяные
 * линии сверху и снизу, те же разделители колонок. Блоки говорят об одном
 * и том же и стоят в разных концах страницы — общая форма показывает,
 * что это пара, а не два случайных ряда по четыре колонки.
 */
.home-v2 .hv2-figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 30px 0 32px;
    border-top: 1px solid #e7e9ee;
    border-bottom: 1px solid #e7e9ee;
}

.home-v2 .hv2-figure {
    padding: 0 28px;
}

.home-v2 .hv2-figure:first-child {
    padding-left: 0;
}

.home-v2 .hv2-figure:last-child {
    padding-right: 0;
}

.home-v2 .hv2-figure + .hv2-figure {
    border-left: 1px solid #e7e9ee;
}

/*
 * Приглушённый акцент, а не фирменный малиновый #cc0066: в фирменном цвете
 * четыре крупных числа читались как рекламная плашка. #9c3f6e уже работает
 * на первом экране (.hv2-tile__accent), поэтому цифры остаются акцентом,
 * но той же приглушённой палитры. Чистые #cc0066 и #009ccc на этой
 * странице оставлены интерфейсу — ссылкам и кнопкам.
 */
.home-v2 .hv2-figure__value {
    display: block;
    font-size: 42px;
    line-height: 1;
    font-weight: bold;
    letter-spacing: -.01em;
    color: #9c3f6e;
    /* Одинаковая ширина цифр: иначе «1 693» и «287» стоят на разной сетке. */
    font-variant-numeric: tabular-nums;
}

.home-v2 .hv2-figure__label {
    margin: 10px 0 0;
    max-width: 210px;
    text-wrap: balance;
    font-size: 14px;
    line-height: 1.45;
    color: #4b4c4c;
}

.home-v2 .hv2-figures__text {
    margin-top: 30px;
    /* Длина строки под чтение, а не под ширину контейнера. */
    max-width: 760px;
}

.home-v2 .hv2-figures__text p {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #4b4c4c;
}

/* Раскрытие полного текста без JS: чекбокс + label */

.home-v2 .hv2-more__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.home-v2 .hv2-more__content {
    display: none;
}

.home-v2 .hv2-more__toggle:checked ~ .hv2-more__content {
    display: block;
}

.home-v2 .hv2-more__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #009ccc;
    cursor: pointer;
}

.home-v2 .hv2-more__label:before {
    content: 'Подробнее об условиях';
}

.home-v2 .hv2-more__toggle:checked ~ .hv2-more__label:before {
    content: 'Свернуть';
}

/*
 * Шеврон бордюрами, без иконки: без него строка читалась как переход
 * на страницу условий, а она разворачивает текст здесь же.
 * Разница в margin-top — оптическая: повёрнутый квадрат смещает
 * видимый центр фигуры, и без поправки стрелка прыгает при переключении.
 */
.home-v2 .hv2-more__label:after {
    content: '';
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.home-v2 .hv2-more__toggle:checked ~ .hv2-more__label:after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

/*
 * :focus-visible, а не :focus. Раскрытие сделано на скрытом чекбоксе,
 * и клик мышью по подписи наводит на него фокус — рамка оставалась висеть
 * после нажатия. С :focus-visible браузер сам решает: мышью — без рамки,
 * с клавиатуры — с рамкой. Совсем убирать нельзя: тогда управление
 * с клавиатуры теряет единственный признак, где сейчас курсор.
 */
.home-v2 .hv2-more__toggle:focus-visible ~ .hv2-more__label {
    outline: 2px solid #009ccc;
    outline-offset: 3px;
}

/* ---------- Стать партнёром ---------- */

/* ---------- Как мы работаем ---------- */

/*
 * Третий блок по четыре колонки после «плюсов» и цифр — поэтому не полоса
 * с разделителями, а белые плашки: на #f5f7fa body они видны, и блок
 * не читается повтором двух верхних. Скругление и тень — как у карточек
 * акций, без наведения: плашки не ссылки.
 */
.home-v2 .hv2-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.home-v2 .hv2-service {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 28px;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(35, 31, 32, .04);
}

/* Тон и размер — как у иконок «плюсов», чтобы наборы читались одной рукой. */
.home-v2 .hv2-service__icon {
    display: block;
    margin-bottom: 16px;
    color: #8f8179;
}

.home-v2 .hv2-service__icon svg {
    display: block;
    width: 30px;
    height: 30px;
}

.home-v2 .hv2-service__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
    color: #231f20;
    text-wrap: balance;
}

.home-v2 .hv2-service__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6b625d;
    text-wrap: pretty;
}

/* ---------- Стать партнёром ---------- */

.home-v2 .hv2-partner-section {
    text-align: center;
}

/*
 * Единственная залитая кнопка на странице — и это её работа: заявка
 * партнёра здесь главное действие, а все остальные кнопки контурные,
 * поэтому она читается как первичная, ничего не перекрикивая.
 *
 * Цвет — фирменный #009ccc, а не телеграмный #29ace8: кнопка к каналу
 * отношения не имеет, а этим синим на странице уже набраны ссылки.
 *
 * Кнопку рисует чужой компонент бутстраповскими классами
 * (btn btn-primary btn-block), их и перебиваем. Селектор с двумя классами
 * обязателен: одного .btn не хватает, чтобы перевесить .btn-primary
 * из app.css. И width: auto тоже обязателен — .btn-block растягивает
 * кнопку на всю ширину, а её здесь нужно центровать по строке.
 */
.home-v2 .hv2-partner-section .btn.btn-primary,
.home-v2 .hv2-partner-section .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 280px;
    padding: 15px 34px;
    border: 1px solid #009ccc;
    border-radius: 100px;
    background-color: #009ccc;
    background-image: none;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.home-v2 .hv2-partner-section .btn.btn-primary:hover,
.home-v2 .hv2-partner-section .btn.btn-primary:focus,
.home-v2 .hv2-partner-section .btn:hover,
.home-v2 .hv2-partner-section .btn:focus {
    /* Темнее на наведении: заодно белая надпись на нём читается увереннее. */
    border-color: #0086b0;
    background-color: #0086b0;
    color: #fff;
}

/* ---------- Telegram ---------- */

.home-v2 .hv2-tg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.home-v2 .hv2-tg-card__img {
    position: relative;
    display: block;
    /* Фиксированная пропорция: карточки не прыгают, пока грузятся картинки */
    padding-top: 100%;
    background-color: #e9eff4;
    overflow: hidden;
}

.home-v2 .hv2-tg-card__img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-v2 .hv2-tg-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background-color: rgba(35, 31, 32, .55);
}

.home-v2 .hv2-tg-card__play:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -5px;
    border-left: 14px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.home-v2 .hv2-tg-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: 13px 15px 16px;
}

.home-v2 .hv2-tg-card__text {
    font-size: 13px;
    line-height: 1.45;
    color: #4b4c4c;
}

.home-v2 .hv2-tg-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    font-size: 12px;
    color: #828a95;
}

/*
 * Значок канала в подвале карточки: он же подсказывает, что ссылка уводит
 * с сайта. Серый в покое, телеграмный синий на наведении — цвет появляется
 * только там, где курсор, и четыре синих значка не рябят в ряду.
 */
.home-v2 .hv2-tg-card__tg {
    display: flex;
    flex: none;
    color: #b4bcc6;
    transition: color .2s ease;
}

.home-v2 .hv2-tg-card:hover .hv2-tg-card__tg {
    color: #29ace8;
}

.home-v2 .hv2-tg__cta-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
    text-align: center;
}

/*
 * Контурная, как кнопки первого экрана: залитая была единственным
 * насыщенным пятном в нижней половине страницы и после того, как плашки
 * ушли в приглушённый тон, тянула внимание сильнее всего блока.
 * Механика та же, что у .hv2-tile__cta — заливка появляется на наведении.
 *
 * Синий тут тёмный, а не телеграмный #29ace8: на светлом фоне страницы
 * тот даёт контраст 2.4 к 1, текст кнопки читался бы бледнее подписей
 * рядом. #0f79ab даёт 4.5 — минимум для основного текста, и белый на нём
 * при наведении тоже читается.
 */
.home-v2 .hv2-tg__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Кнопок две (Telegram и MAX), 300px каждой уже не по ширине ряда. */
    min-width: 220px;
    padding: 13px 26px;
    border: 1px solid rgba(15, 121, 171, .38);
    border-radius: 100px;
    background-color: transparent;
    color: #0f79ab;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.home-v2 .hv2-tg__cta:hover,
.home-v2 .hv2-tg__cta:focus {
    border-color: #0f79ab;
    background-color: #0f79ab;
    color: #fff;
    text-decoration: none;
}

/* ---------- Журнал ---------- */

.home-v2 .hv2-journal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.home-v2 .hv2-journal-card__img {
    display: block;
    position: relative;
    padding-top: 52%;
    background-color: #edf1f5;
    overflow: hidden;
}

.home-v2 .hv2-journal-card__img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-v2 .hv2-journal-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 18px;
}

.home-v2 .hv2-journal-card__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.home-v2 .hv2-journal-card__date {
    font-size: 12px;
    color: #828a95;
}

.home-v2 .hv2-journal-card__text {
    font-size: 13px;
    line-height: 1.5;
    color: #4b4c4c;
}

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

/*
 * Логика мобильной раскладки карточек-входов.
 *
 * Вырезка живёт рядом с текстом, а не под ним, поэтому карточке нужна ширина.
 * Две колонки на планшете давали ~470px на карточку — это уже теснее рабочей
 * десктопной (674px), и фигура наезжала на заголовок. Поэтому ниже 992 сразу
 * одна колонка: карточка получает всю ширину экрана, и композиция остаётся
 * той же, что на десктопе, — текст слева, фигура справа.
 *
 * Ниже 600px ширины уже не хватает и в одну колонку: текстовая колонка
 * сжимается настолько, что название сезона перестаёт помещаться в строку.
 * Там вырезки убираются и карточка возвращается к тональной заливке.
 */

@media screen and (max-width: 1250px) {

    /* Карточки правок не требуют: сетка десятиколоночная, ужимается сам контейнер. */
    .home-v2 .hv2-brands {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

    /*
     * Одна колонка вместо двух: приоритет размером здесь всё равно не читается,
     * зато карточка сохраняет ширину, достаточную для вырезки.
     */
    .home-v2 .hv2-tiles {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .home-v2 .hv2-tile--w4,
    .home-v2 .hv2-tile--w6,
    .home-v2 .hv2-tile--w10 {
        grid-column: span 1;
    }

    .home-v2 .hv2-tile--lg { min-height: 250px; }
    .home-v2 .hv2-tile--sm { min-height: 200px; }
    .home-v2 .hv2-tile--lg.hv2-tile--cutout { min-height: 340px; }

    .home-v2 .hv2-tile--lg .hv2-tile__title { font-size: 32px; }
    .home-v2 .hv2-tile--sm .hv2-tile__title { font-size: 26px; }

    /* Карточки идут стопкой — выравнивать заголовки не с чем, резерв только мешает. */
    .home-v2 .hv2-tile--lg .hv2-tile__title,
    .home-v2 .hv2-tile--sm .hv2-tile__title {
        min-height: 0;
    }

    .home-v2 .hv2-tile__body,
    .home-v2 .hv2-tile--w4 .hv2-tile__body,
    .home-v2 .hv2-tile--w6 .hv2-tile__body,
    .home-v2 .hv2-tile--w10 .hv2-tile__body {
        max-width: 100%;
    }

    /* А вот карточке с вырезкой текст по-прежнему держим в колонке слева. */
    .home-v2 .hv2-tile--cutout .hv2-tile__body {
        max-width: 52%;
    }

    /*
     * Фон-фото (режим cover) остаётся под текстом на всю ширину, поэтому
     * боковой градиент его больше не спасает — гасим сплошной светлой вуалью.
     * Все четыре темы светлые, одного правила хватает на весь блок.
     */
    .home-v2 .hv2-tile__media--cover:after {
        background: rgba(255, 255, 255, .74) !important;
    }

    .home-v2 .hv2-tg {
        grid-template-columns: repeat(2, 1fr);
    }

    /*
     * Две колонки: разделитель остаётся только между парами, у первой
     * в каждом ряду его нужно снять — правило `+ .hv2-plus` даёт линию всем,
     * кроме первого, и на второй строке она повисла бы у левого края.
     */
    .home-v2 .hv2-pluses {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 28px;
    }

    .home-v2 .hv2-plus {
        padding: 0 24px;
    }

    .home-v2 .hv2-plus:nth-child(2n+1) {
        padding-left: 0;
        border-left: 0;
    }

    .home-v2 .hv2-plus:nth-child(2n) {
        padding-right: 0;
    }

    .home-v2 .hv2-promos,
    .home-v2 .hv2-journal {
        grid-template-columns: 1fr;
    }

    .home-v2 .hv2-services {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Разделители — только между парами: у первой в ряду линию снимаем. */
    .home-v2 .hv2-figures {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 26px;
    }

    .home-v2 .hv2-figure {
        padding: 0 24px;
    }

    .home-v2 .hv2-figure:nth-child(2n+1) {
        padding-left: 0;
        border-left: 0;
    }

    .home-v2 .hv2-figure:nth-child(2n) {
        padding-right: 0;
    }
}

@media screen and (max-width: 700px) {

    .home-v2 .hv2-tile {
        padding: 28px 26px 30px;
    }

    .home-v2 .hv2-tile--lg,
    .home-v2 .hv2-tile--sm {
        min-height: 190px;
    }

    /* Карточка с вырезкой ниже не опускается: иначе фигура вырождается в наклейку. */
    .home-v2 .hv2-tile--lg.hv2-tile--cutout {
        min-height: 240px;
    }

    .home-v2 .hv2-tile--lg .hv2-tile__title { font-size: 28px; }

    /* Колонка уже: фигура при такой высоте подходит к тексту ближе. */
    .home-v2 .hv2-tile--cutout .hv2-tile__body {
        max-width: 48%;
    }

    .home-v2 .hv2-tiles-section {
        margin-bottom: 50px;
    }

    .home-v2 .hv2-brands {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-v2 .hv2-section__title {
        font-size: 21px;
    }

    .home-v2 .hv2-figure__value {
        font-size: 32px;
    }

    .home-v2 .hv2-tg__cta {
        min-width: 0;
        width: 100%;
    }

    .home-v2 .hv2-services {
        grid-template-columns: 1fr;
    }

    .home-v2 .hv2-service {
        padding: 20px 20px 22px;
    }

    /* Кнопке заявки на телефоне её 280px уже не хватает — на всю ширину. */
    .home-v2 .hv2-partner-section .btn.btn-primary,
    .home-v2 .hv2-partner-section .btn {
        min-width: 0;
        width: 100%;
    }

    /*
     * Единственная акция возвращается к вертикальной карточке: кадру в 46%
     * на телефоне остаётся около 140px, и от снимка виден один столбик.
     */
    .home-v2 .hv2-promos--1 .hv2-promo {
        flex-direction: column;
    }

    .home-v2 .hv2-promos--1 .hv2-promo__media {
        flex: none;
    }

    .home-v2 .hv2-promos--1 .hv2-promo__img {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .home-v2 .hv2-promos--1 .hv2-promo__body {
        justify-content: flex-start;
        padding: 18px 20px 20px;
    }

    .home-v2 .hv2-promos--1 .hv2-promo__title {
        font-size: 20px;
    }

    .home-v2 .hv2-promos--1 .hv2-promo__cta {
        margin-top: auto;
        padding-top: 14px;
    }
}

@media screen and (max-width: 600px) {

    /*
     * Дальше вырезка не помещается: текстовой колонке остаётся меньше 250px,
     * и «Весна-лето 2027» перестаёт вставать в строку. Возвращаем карточке
     * тональную заливку — без картинки она самодостаточна, мы это видели.
     * Заодно телефон не качает 132 КБ ради декора.
     */
    .home-v2 .hv2-tile__media--cutout {
        display: none;
    }

    .home-v2 .hv2-tile--cutout .hv2-tile__body {
        max-width: 100%;
    }

    .home-v2 .hv2-tile--lg.hv2-tile--cutout {
        min-height: 190px;
    }
}

@media screen and (max-width: 480px) {

    .home-v2 .hv2-tg {
        grid-template-columns: 1fr;
    }

    .home-v2 .hv2-tile--lg .hv2-tile__title { font-size: 28px; }
    .home-v2 .hv2-tile--sm .hv2-tile__title { font-size: 24px; }

    .home-v2 .hv2-tile__cta {
        width: 100%;
        justify-content: center;
    }

    /*
     * Одна колонка, но иконка уходит влево от подписи: стопкой «иконка над
     * текстом» четыре пункта занимали почти весь экран телефона ради строки
     * доверия. В строку — вчетверо ниже, разделители меняются на межстрочные.
     */
    .home-v2 .hv2-pluses {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .home-v2 .hv2-plus {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 14px 0;
    }

    .home-v2 .hv2-plus:nth-child(2n+1),
    .home-v2 .hv2-plus:nth-child(2n) {
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
    }

    /* Первому пункту линия сверху не нужна: её роль играет край полосы. */
    .home-v2 .hv2-plus + .hv2-plus {
        border-top: 1px solid #e7e9ee;
    }

    .home-v2 .hv2-plus__icon svg {
        width: 26px;
        height: 26px;
    }

    .home-v2 .hv2-plus p {
        max-width: none;
        text-wrap: pretty;
    }
}