/* Секции главной страницы, контур v2. */

/* ============ Hero ============ */

/* Заголовок H1 живёт над SEO-текстом внизу страницы: верхней плашки
   с заголовком в новом макете нет. */
.vp-seotext__title {
    margin-bottom: var(--vp-space-6);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h2);
    line-height: var(--vp-lh-h2);
}

/* ============ Преимущества ============ */

/* Песочная плашка и внутренний отступ живут на обёртке, а не на прокручиваемом
   треке. Если отступ поставить треку, из-за scroll-snap-align: start прокрутка
   никогда не доходит до нуля — она упирается в 16px, и стрелка «назад»
   остаётся активной в самом начале списка. */
.vp-usp__wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--vp-space-4);
    background: var(--vp-bg-sand);
    border-radius: var(--vp-radius-md);
}

.vp-usp__track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    list-style: none;

    /* На десктопе шесть плиток помещаются целиком, прокрутка нужна на узких
       экранах. Своя реализация на scroll-snap вместо Splide: карусель здесь
       простая, а тянуть ради неё библиотеку — значит вернуть в v2 внешнюю
       зависимость, от которой контур намеренно избавлен. */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.vp-usp__track::-webkit-scrollbar { display: none; }

.vp-usp__item {
    position: relative;
    flex: 1 0 160px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--vp-space-3);
    padding: var(--vp-space-4) var(--vp-space-3);
    text-align: center;
    border-radius: var(--vp-radius-sm);
}

/* Разделители между плитками — в макете это вертикальные линии. */
.vp-usp__item + .vp-usp__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 100px;
    background: var(--vp-border);
}

/* Выделения первого пункта белой карточкой больше нет: по правке заказчика
   все пункты полосы одинаковые. Правила для .vp-usp__item.is-active убраны
   вместе с классом — состояние переключателя осталось только у вкладок
   главной, там свой класс .vp-tabs__item. */

.vp-usp__icon {
    display: grid;
    place-items: center;
    width: 72px; height: 72px;
    color: var(--vp-brand);
}
.vp-usp__icon img { width: 100%; height: 100%; }

.vp-usp__label {
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    font-weight: var(--vp-fw-medium);
}

/* Стрелки наполовину заходят на плашку, как в макете.
   Смещение считается от края плашки, а не от края контейнера: контейнер шире
   на величину бокового отступа (64px), и стрелки уезжали за пределы экрана. */
.vp-usp__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 50px; height: 50px;
    flex: 0 0 auto;
}
.vp-usp__arrow--prev { left: -25px; }
.vp-usp__arrow--next { right: -25px; }
.vp-usp__arrow svg { width: 20px; height: 20px; }

@media (max-width: 1023px) {
    .vp-usp__item { flex: 0 0 33%; }
    .vp-usp__arrow--prev { left: -16px; }
    .vp-usp__arrow--next { right: -16px; }
}

@media (max-width: 767px) {
    /* В макете на 390 видно две плитки */
    .vp-usp__item { flex: 0 0 50%; }
    .vp-usp__label { font-size: var(--vp-fs-sm); line-height: var(--vp-lh-sm); }
    .vp-usp__arrow { width: 40px; height: 40px; }
    .vp-usp__arrow svg { width: 16px; height: 16px; }
}

/* ============ Категории ============ */

.vp-cats__grid {
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: var(--vp-space-12);
    align-items: center;
}

.vp-cats__intro { text-align: left; }

.vp-cats__subtitle {
    margin-bottom: var(--vp-space-8);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h2);
    line-height: var(--vp-lh-h2);
    text-transform: uppercase;
}

.vp-cats__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vp-space-6);
    list-style: none;
}

@media (max-width: 1023px) {
    .vp-cats__grid { grid-template-columns: 1fr; gap: var(--vp-space-8); }
    .vp-cats__intro { text-align: center; }
}

@media (max-width: 767px) {
    .vp-cats__list { grid-template-columns: repeat(2, 1fr); gap: var(--vp-space-4); }
    .vp-cats__subtitle { margin-bottom: var(--vp-space-5); }
}

/* ============ Блоки товаров ============ */

.vp-blocks__group + .vp-blocks__group { margin-top: var(--vp-space-12); }

.vp-blocks__group > .vp-section-title { margin-bottom: var(--vp-space-8); }

.vp-blocks__list { list-style: none; }

.vp-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--vp-bg);
}

.vp-product__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.vp-product__media img { width: 100%; height: 100%; object-fit: cover; }

.vp-product__body {
    display: flex;
    flex-direction: column;
    gap: var(--vp-space-2);
    flex: 1 1 auto;
    padding: var(--vp-space-4);
}

.vp-product__name {
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    font-weight: var(--vp-fw-medium);
}

.vp-product__price {
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
    color: var(--vp-text-soft);
}
.vp-product__price b { color: var(--vp-brand); font-weight: var(--vp-fw-medium); }

/* Кнопка внутри ссылки-карточки: span, а не button — вложенные интерактивные
   элементы недопустимы, весь блок и так кликабелен. */
.vp-product__cta {
    margin-top: auto;
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
    padding: var(--vp-space-3) var(--vp-space-4);
}
.vp-product:hover .vp-product__cta {
    background: var(--vp-brand);
    color: var(--vp-text-invert);
}

.vp-blocks__more { margin-top: var(--vp-space-8); text-align: center; }

/* ============ SEO-текст ============ */

/* Текст приходит HTML-ом из админки, поэтому стили задаются по тегам.

   Ширина ограничена длиной строки, а не шириной контейнера: на 1312px строка
   выходит за 150 символов и текст перестаёт читаться. Блок центрируется
   внутри общего контейнера. */
/* Ширина SEO-текста — как у шапки: ограничение держит .vp-container,
   у которого этот же элемент. Своего max-width у .vp-prose быть не должно:
   класс идёт следом за .vp-container в каскаде и при равной специфичности
   перебивает его — что с 72ch (текст был уже), что с none (текст растекался
   на всю ширину экрана). */
.vp-prose h2, .vp-prose h3, .vp-prose h4 {
    font-family: var(--vp-font-head);
    margin-top: var(--vp-space-8);
    margin-bottom: var(--vp-space-4);
}
.vp-prose h2 { font-size: var(--vp-fs-h2); line-height: var(--vp-lh-h2); }
.vp-prose h3 { font-size: var(--vp-fs-h3); line-height: var(--vp-lh-h3); }
.vp-prose p { margin-bottom: var(--vp-space-4); }
.vp-prose ul, .vp-prose ol { margin: 0 0 var(--vp-space-4) var(--vp-space-6); }
.vp-prose li { margin-bottom: var(--vp-space-2); list-style: inherit; }
.vp-prose ul { list-style: disc; }
.vp-prose ol { list-style: decimal; }
.vp-prose a { color: var(--vp-link); text-decoration: underline; }
.vp-prose img { max-width: 100%; height: auto; }
.vp-prose table { width: 100%; overflow-x: auto; display: block; }
.vp-seotext__edit { margin-top: var(--vp-space-6); }

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

.vp-process { background: var(--vp-bg); }

.vp-process__plate {
    position: relative;
    padding: var(--vp-space-8);
    background: var(--vp-bg-sand);
    border-radius: var(--vp-radius-md);
}

/* Заголовок-«таблетка» наезжает на верхнюю границу плашки ровно наполовину */
.vp-process__title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap;
}

.vp-process__list {
    display: flex;
    align-items: flex-start;
    gap: var(--vp-space-10);
    list-style: none;
    margin-top: var(--vp-space-6);
}

.vp-process__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    gap: var(--vp-space-3);
}

/* Стрелка между шагами. Вставлена фоном-картинкой в псевдоэлемент: файл
   step-arrow.svg перекрашивается через currentColor, а в background-image
   он попадает как отдельный документ и цвет из страницы туда не доходит.
   Поэтому цвет зашит в data-URI. */
.vp-process__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    right: calc(var(--vp-space-10) / -1 - 2px);
    width: 31px; height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='15' viewBox='0 0 31 15' fill='none'%3E%3Cpath d='M16.264 0.574C20.257 4.351 24.978 6.602 30.426 7.329C24.978 8.055 20.257 10.307 16.264 14.084M30.426 7.329H0.574' stroke='%236A041C' stroke-width='1.148' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.vp-process__icon { flex: 0 0 auto; display: block; }
.vp-process__icon img { width: 42px; height: 42px; }

.vp-process__text {
    display: flex;
    flex-direction: column;
    gap: var(--vp-space-3);
}

.vp-process__num {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: var(--vp-radius-pill);
    background: var(--vp-brand);
    color: var(--vp-text-invert);
    font-size: var(--vp-fs-md);
    line-height: 1;
    font-weight: var(--vp-fw-medium);
}

.vp-process__name {
    font-size: var(--vp-fs-h4);
    line-height: var(--vp-lh-h4);
    font-weight: var(--vp-fw-medium);
}

.vp-process__desc {
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
}

@media (max-width: 1023px) {
    .vp-process__list { flex-wrap: wrap; gap: var(--vp-space-8); }
    .vp-process__item { flex: 1 1 45%; }
    /* На двух колонках стрелка между «вторым» и «третьим» указывала бы
       в пустоту — убираем совсем, порядок задают номера. */
    .vp-process__item::after { display: none; }
    .vp-process__title { white-space: normal; text-align: center; width: min(90%, 420px); }
}

@media (max-width: 767px) {
    .vp-process__plate { padding: var(--vp-space-6) var(--vp-space-4); }
    .vp-process__list { flex-direction: column; gap: var(--vp-space-6); }
    .vp-process__item { flex: 1 1 auto; }
}

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

.vp-brands__title { margin-bottom: var(--vp-space-8); }

.vp-brands__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vp-space-6);
    list-style: none;
}

/* Логотипы разной высоты — фиксируем контейнер и вписываем по содержимому,
   иначе крупный логотип задирает строку */
.vp-brands__row li {
    flex: 0 1 auto;
    display: grid;
    place-items: center;
    height: 50px;
}
.vp-brands__row img {
    max-height: 50px;
    max-width: 112px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .vp-brands__row { justify-content: center; gap: var(--vp-space-5); }
    .vp-brands__row li { height: 40px; }
    .vp-brands__row img { max-height: 40px; max-width: 90px; }
}

/* ============ Нам доверяют ============ */

.vp-trust { background: var(--vp-bg); }

.vp-trust__plate {
    position: relative;
    padding: var(--vp-space-8);
    background: var(--vp-bg-cream);
    border-radius: var(--vp-radius-md);
}

.vp-trust__title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap;
}

/* В макете это одна плашка с семью ячейками, разделёнными тонкими
   линиями: рамок и белой заливки у ячеек нет, иконка стоит слева
   от подписи, подпись выключена влево. Раньше здесь были отдельные
   белые карточки с иконкой сверху — клиент отметил это отдельно.

   Число колонок задано явно по брейкпоинтам, а не auto-fit: разделитель
   рисуется левой границей, и её нужно снимать у первой ячейки каждого
   ряда — без известного числа колонок nth-child этого не выразит. */
/* Первая колонка шире остальных: «Компаній та корпоративних клієнтів» —
   самая длинная подпись, и при равных колонках слово «корпоративних»
   выходило за отведённую ширину и упиралось в разделитель. */
.vp-trust__list {
    display: grid;
    grid-template-columns: 1.2fr repeat(6, 1fr);
    gap: var(--vp-space-4) 0;
    list-style: none;
    margin-top: var(--vp-space-6);
}

.vp-trust__item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--vp-space-3);
    height: 100%;
    padding: var(--vp-space-2) var(--vp-space-3);
    text-align: left;
}

/* Разделители рисует левая граница соседа — так их ровно на один меньше,
   чем ячеек, и по краям плашки лишних линий не появляется. */
.vp-trust__item + .vp-trust__item { border-left: 1px solid var(--vp-border); }
.vp-trust__item:nth-child(7n + 1) { border-left: 0; }

.vp-trust__icon { display: block; flex: none; color: var(--vp-brand); }
.vp-trust__icon img { width: 40px; height: 40px; display: block; }

.vp-trust__label {
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
    font-weight: var(--vp-fw-medium);
}

@media (max-width: 1279px) {
    .vp-trust__list { grid-template-columns: repeat(4, 1fr); }
    .vp-trust__item:nth-child(n) { border-left: 1px solid var(--vp-border); }
    .vp-trust__item:nth-child(4n + 1) { border-left: 0; }
}

@media (max-width: 1023px) {
    .vp-trust__title { white-space: normal; text-align: center; width: min(90%, 460px); }
    .vp-trust__list { grid-template-columns: repeat(3, 1fr); }
    .vp-trust__item:nth-child(n) { border-left: 1px solid var(--vp-border); }
    .vp-trust__item:nth-child(3n + 1) { border-left: 0; }
}

@media (max-width: 767px) {
    .vp-trust__plate { padding: var(--vp-space-6) var(--vp-space-4); }
    /* На узком экране в строке помещается две ячейки, и на подпись рядом
       с иконкой остаётся меньше ста пикселей — длинные слова упирались
       в разделитель. Поэтому иконка уходит наверх, а подпись получает
       всю ширину ячейки. */
    .vp-trust__list { grid-template-columns: repeat(2, 1fr); gap: var(--vp-space-5) 0; }
    .vp-trust__item {
        flex-direction: column;
        align-items: center;
        gap: var(--vp-space-2);
        text-align: center;
    }
    .vp-trust__item:nth-child(n) { border-left: 1px solid var(--vp-border); }
    .vp-trust__item:nth-child(2n + 1) { border-left: 0; }
}

/* ============ Почему выбирают нас ============ */

.vp-why__title { margin-bottom: var(--vp-space-8); }

/* Три колонки, блоки разной высоты со сдвигом — отсюда вид «бенто».
   Раскладка задана областями: колонки сами по себе не дают такого смещения,
   потому что высота блоков в каждой колонке разная. */
.vp-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Промежутки в макете разные: между колонками ~10px, между рядами ~24px.
       Замер по index-home-slider при контенте 1440. */
    gap: var(--vp-space-6) var(--vp-space-3);
    grid-template-areas:
        "production certified  branding"
        "production custom     branding"
        "wholesale  custom     official";
}

.vp-why__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--vp-radius-md);
    background: var(--vp-bg);
}

.vp-why__media { display: block; flex: 1 1 auto; min-height: 0; }
.vp-why__media img { width: 100%; height: 100%; object-fit: cover; }

.vp-why__body {
    display: block;
    padding: var(--vp-space-5);
}

.vp-why__name {
    margin-bottom: var(--vp-space-2);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
}

.vp-why__desc {
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
}

.vp-why__card--brand {
    justify-content: center;
    background: var(--vp-brand);
    color: var(--vp-text-invert);
}

/* Тёмный текст на золотом, а не белый как в макете: белый на #CB9145 даёт
   контраст 2.74:1 и не проходит даже порог для крупного текста (3:1).
   Тёмный — 7.32:1. Замер и варианты — в step-09. */
.vp-why__card--gold {
    justify-content: center;
    background: var(--vp-gold);
    color: var(--vp-text);
}

/* «Індивідуальні рішення»: в макете плитка с фото, но подпись под ним золотая,
   а не светлая. Отдельный модификатор, потому что --gold заливает всю плитку. */
.vp-why__card--gold-body .vp-why__body {
    background: var(--vp-gold);
    color: var(--vp-text);
}

@media (max-width: 1023px) {
    .vp-why__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "production certified"
            "production custom"
            "branding   custom"
            "branding   wholesale"
            "official   wholesale";
    }
}

@media (max-width: 767px) {
    .vp-why__grid {
        grid-template-columns: 1fr;
        gap: var(--vp-space-4);
        grid-template-areas:
            "production"
            "certified"
            "custom"
            "branding"
            "wholesale"
            "official";
    }
    .vp-why__media { flex: 0 0 auto; aspect-ratio: 16 / 10; }
}

/* ============ CTA ============ */

.vp-cta { background: var(--vp-bg); }

.vp-cta__plate {
    position: relative;
    display: grid;
    /* minmax(0, ...) вместо жёстких 484px: колонка фото должна уметь сжиматься,
       иначе на 1024-1279px кнопки выезжают за пределы экрана. */
    grid-template-columns: minmax(0, 484px) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--vp-space-8);
    min-height: 284px;
    padding-right: var(--vp-space-10);
    background: var(--vp-brand);
    border-radius: var(--vp-radius-lg);
    overflow: hidden;
    color: var(--vp-text-invert);
}

/* Фото уходит под левый край плашки. У картинки своя маска-растушёвка,
   поэтому она остаётся PNG и не обрезается по прямоугольнику. */
.vp-cta__media { display: block; align-self: stretch; }
.vp-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.vp-cta__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h2);
    line-height: var(--vp-lh-h2);
    text-transform: uppercase;
    margin-bottom: var(--vp-space-4);
}

.vp-cta__text {
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    max-width: 52ch;
}

.vp-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--vp-space-4);
}
.vp-cta__actions .vp-btn { white-space: nowrap; }

@media (max-width: 1279px) {
    .vp-cta__plate {
        grid-template-columns: 1fr;
        padding: 0 0 var(--vp-space-8);
        text-align: center;
    }
    .vp-cta__media { max-height: 220px; }
    .vp-cta__body { padding-inline: var(--vp-space-6); }
    .vp-cta__text { margin-inline: auto; }
    .vp-cta__actions { align-items: center; padding-inline: var(--vp-space-6); }
}

/* ============ Модальное окно ============ */

.vp-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--vp-space-4);
    background: rgba(8, 8, 8, .5);
}
.vp-modal[hidden] { display: none; }

.vp-modal__panel {
    position: relative;
    width: min(550px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--vp-space-10);
    background: var(--vp-bg);
    border-radius: var(--vp-radius-lg);
}

.vp-modal__close {
    position: absolute;
    top: var(--vp-space-3);
    right: var(--vp-space-4);
    font-size: 32px;
    line-height: 1;
    color: var(--vp-text);
}

/* Заголовок модалки в макете набран основным шрифтом жирнее обычного,
   а не Forum, как заголовки секций */
.vp-modal__title {
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
    font-weight: var(--vp-fw-medium);
    color: var(--vp-brand);
}

.vp-modal__lead {
    margin: var(--vp-space-3) 0 var(--vp-space-6);
    color: var(--vp-text-soft);
}

/* Поле с иконкой слева: рамка на обёртке, у самого поля её нет */
.vp-modal__field {
    display: flex;
    align-items: center;
    gap: var(--vp-space-4);
    padding: var(--vp-space-3) var(--vp-space-4);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
    background: var(--vp-bg);
    transition: border-color var(--vp-transition);
}
.vp-modal__field:focus-within { border-color: var(--vp-brand); }
.vp-modal__field img { flex: none; }

.vp-modal__field .vp-input,
.vp-modal__field .vp-textarea {
    border: 0;
    padding: 0;
    background: none;
    resize: none;
}
.vp-modal__field .vp-input:focus,
.vp-modal__field .vp-textarea:focus { outline: none; }

.vp-modal__field--area { align-items: flex-start; padding-block: var(--vp-space-4); }

.vp-modal__stack { flex: 1 1 auto; display: flex; flex-direction: column; }

.vp-modal__cap {
    font-size: var(--vp-fs-xs);
    line-height: var(--vp-lh-xs);
    color: var(--vp-text-soft);
}

.vp-modal__note {
    display: flex;
    align-items: center;
    gap: var(--vp-space-3);
    margin: 0;
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
    color: var(--vp-text-soft);
}
.vp-modal__note img { flex: none; }

.vp-modal__form { display: flex; flex-direction: column; gap: var(--vp-space-4); }

.vp-modal__status {
    margin: 0;
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
    min-height: 1.2em;
}
.vp-modal__status--ok    { color: var(--vp-brand); }
.vp-modal__status--error { color: var(--vp-brand-alt); }

/* ============ Вкладки на главной ============
   Верхняя полоса иконок переключает нижнюю панель. Полоса переиспользует
   разметку и стили карусели УТП (.vp-usp__*), надстройка — только здесь. */

.vp-tabs__heading {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h2);
    line-height: var(--vp-lh-h2);
    text-align: center;
}
/* Вторая половина заголовка в макете — бордовым курсивом */
.vp-tabs__heading em {
    font-style: italic;
    color: var(--vp-brand);
}

.vp-tabs__lead {
    margin: var(--vp-space-3) 0 var(--vp-space-8);
    text-align: center;
    color: var(--vp-text-soft);
}

.vp-tabs__plate {
    background: var(--vp-bg);
    border-radius: var(--vp-radius-md);
    padding: var(--vp-space-6);
}

/* Полоса вкладок: на плашке, без собственного фона */
.vp-tabs__wrap { background: none; padding: 0; }

/* Отступы держит кнопка — иначе они складываются с отступами плитки,
   и активная вкладка становится выше остальных */
.vp-tabs__item { padding: 0; }
.vp-tabs__item.is-active { background: none; border: 0; }

.vp-tabs__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vp-space-3);
    width: 100%;
    height: 100%;
    padding: var(--vp-space-4);
    text-align: center;
    cursor: pointer;
    border-radius: var(--vp-radius-sm);
    border: 1px solid transparent;
    transition: background-color var(--vp-transition), border-color var(--vp-transition);
}
.vp-tabs__btn:hover { background: var(--vp-bg); }

/* Активная вкладка: розовая карточка в рамке, иконка в бордовом кружке
   и толстая подчёркивающая линия на стыке с панелью */
.vp-tabs__item.is-active .vp-tabs__btn {
    background: #FDF3F4;
    border-color: var(--vp-brand);
    position: relative;
}
/* Полоса внутри карточки, а не под ней: трек прокрутки обрезает всё,
   что выходит за его границы по вертикали. */
.vp-tabs__item.is-active .vp-tabs__btn::after {
    content: "";
    position: absolute;
    left: var(--vp-space-4); right: var(--vp-space-4); bottom: 0;
    height: 4px;
    background: var(--vp-brand);
    border-radius: 2px 2px 0 0;
}
.vp-tabs__item.is-active .vp-usp__icon {
    width: 68px; height: 68px;
    padding: 8px;
    border-radius: var(--vp-radius-pill);
    background: var(--vp-brand);
    color: var(--vp-text-invert);
}
/* Иконки подключены через <img> и цвет не наследуют — инвертируем на заливке */
.vp-tabs__item.is-active .vp-usp__icon img { filter: brightness(0) invert(1); }

/* ---- Панель ---- */

.vp-panel {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: center;
    gap: var(--vp-space-10);
    margin-top: var(--vp-space-6);
    padding: var(--vp-space-10);
    background: var(--vp-bg-cream);
    border-radius: var(--vp-radius-md);
}
.vp-panel[hidden] { display: none; }

/* Панель без карточек (нет подходящих разделов) занимает всю ширину */
.vp-panel--wide { grid-template-columns: minmax(0, 1fr); }

.vp-panel__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h1);
    line-height: var(--vp-lh-h1);
}
.vp-panel__accent { color: var(--vp-brand); }

.vp-panel__text {
    margin: var(--vp-space-5) 0 var(--vp-space-8);
    color: var(--vp-text-soft);
}

.vp-panel__cta svg { width: 20px; height: 20px; }

.vp-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vp-space-5);
    list-style: none;
}

/* Карточка раздела в панели: фото и подпись, без круглого бейджа —
   в макете вкладок его нет, в отличие от карточек в «Ми пропонуємо» */
.vp-tile-cat { display: block; background: var(--vp-bg); }

/* Квадрат: фото товаров в базе квадратные (300x300...500x500), и в такой
   плитке они видны целиком. При широкой плитке cover срезал у большинства
   верх и низ. contain, а не cover: непрямоугольная заглушка и редкие
   неквадратные фото тоже должны показываться целиком, а не обрезаться. */
.vp-tile-cat__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--vp-bg);
}
.vp-tile-cat__media img { width: 100%; height: 100%; object-fit: contain; }

.vp-tile-cat__title {
    display: block;
    padding: var(--vp-space-4);
    text-align: center;
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
}

@media (max-width: 1279px) {
    .vp-panel { grid-template-columns: 1fr; gap: var(--vp-space-8); }
    .vp-panel__title { font-size: var(--vp-fs-h2); line-height: var(--vp-lh-h2); }
}

@media (max-width: 767px) {
    .vp-tabs__plate { padding: var(--vp-space-4); }
    .vp-panel { padding: var(--vp-space-5); }
    .vp-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vp-space-4); }
    .vp-tabs__item.is-active .vp-usp__icon { width: 56px; height: 56px; padding: 6px; }
}