/* Страница категории и карточка товара, контур v2. */

/* ============ Шапка категории ============ */

.vp-cathead { padding-top: 0; }

.vp-cathead__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h1);
    line-height: var(--vp-lh-h1);
    text-transform: uppercase;
    /* Отбивку снизу держит отступ секции: чипов подкатегорий под заголовком
       больше нет, и собственный margin оставлял на их месте дыру. */
}

/* Чипов подкатегорий (.vp-chip) в разметке больше нет: на странице категории
   их заменили плитки видов продукции, в поиске блок совпавших категорий снят
   по правкам клиента. Стили удалены вместе с последним местом их применения. */

/* ============ Раскладка каталога ============ */

.vp-catalog__layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--vp-space-8);
    align-items: start;
}

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

/* ============ Карточка товара в сетке ============ */

.vp-product__weight {
    display: flex;
    align-items: center;
    gap: var(--vp-space-2);
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
    color: var(--vp-text-soft);
}
.vp-product__weight img { width: 16px; height: 16px; }

.vp-product__from {
    font-size: var(--vp-fs-sm);
    color: var(--vp-text-soft);
}
.vp-product__price b {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: 1;
}

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

   Поэтому под название отводится фиксированная высота (лишнее обрезается
   многоточием), а цена прижимается к низу — тогда цена и кнопка стоят
   на одной линии независимо от того, есть ли у товара вес.

   Правила намеренно ограничены сетками каталога и поиска: те же карточки
   стоят на главной и в блоке «схожі», где высоту держит карусель. */
.vp-catalog__grid .vp-product__name,
.vp-search__grid .vp-product__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vp-catalog__grid .vp-product__name {
    -webkit-line-clamp: 2;
    min-height: calc(2 * var(--vp-lh-md));
}
/* В поиске колонок четыре, карточка уже — названия чаще уходят в три строки */
.vp-search__grid .vp-product__name {
    -webkit-line-clamp: 3;
    min-height: calc(3 * var(--vp-lh-md));
}

.vp-catalog__grid .vp-product__price,
.vp-search__grid .vp-product__price { margin-top: auto; }
.vp-catalog__grid .vp-product__cta,
.vp-search__grid .vp-product__cta { margin-top: var(--vp-space-1); }

/* Кнопку клиент просил жирнее и крупнее — в макете она набрана
   основным кеглем, а не мелким */
.vp-catalog__grid .vp-product__cta,
.vp-search__grid .vp-product__cta {
    padding: var(--vp-space-4) var(--vp-space-4);
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    font-weight: 700;
}

/* ============ Пустая выдача ============ */

/* В макете это узкий блок по центру области выдачи: заголовок переносится
   на две строки, подпись мелкая, кнопка по ширине блока. Без ограничения
   ширины заголовок растягивался в одну строку через всю колонку, и блок
   выглядел разъехавшимся. */
.vp-empty {
    max-width: 300px;
    margin: 0 auto;
    padding: var(--vp-space-16) 0;
    text-align: center;
}
.vp-empty__icon {
    display: grid;
    place-items: center;
    width: 84px; height: 84px;
    margin: 0 auto var(--vp-space-6);
    border-radius: var(--vp-radius-pill);
    background: var(--vp-bg-cream);
}
.vp-empty__icon img { width: 50px; height: 50px; }
.vp-empty__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
    margin-bottom: var(--vp-space-3);
}
.vp-empty__hint {
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
    color: var(--vp-text-soft);
}
.vp-empty .vp-btn {
    display: block;
    margin-top: var(--vp-space-6);
    min-height: 50px;
}

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

@media (max-width: 1023px) {
    .vp-catalog__layout { grid-template-columns: 1fr; }
    .vp-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .vp-catalog__grid { gap: var(--vp-space-4); }
}

/* ============ Панель фильтров ============ */

.vp-filter {
    display: flex;
    flex-direction: column;
    gap: var(--vp-space-6);
    padding: var(--vp-space-5);
    background: var(--vp-bg);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-md);
}

.vp-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vp-space-3);
}

/* Кегли и насыщенность подняты по правкам клиента: панель набиралась
   мелким и светлым, из-за чего названия групп не читались как заголовки.
   Значения из макета: «Фільтр» 20/700, названия групп 16/700 бордовым,
   подписи значений 15/500. */
.vp-filter__title {
    font-size: var(--vp-fs-lg);
    line-height: var(--vp-lh-lg);
    font-weight: 700;
}

.vp-filter__reset {
    font-size: var(--vp-fs-sm);
    font-weight: 700;
    color: var(--vp-brand);
}

.vp-filter__close { display: none; font-size: 28px; line-height: 1; }

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

.vp-filter__label {
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    font-weight: 700;
    color: var(--vp-brand);
}

.vp-filter__range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--vp-space-2);
}
.vp-filter__range .vp-input { padding: var(--vp-space-2) var(--vp-space-3); }
.vp-filter__dash { color: var(--vp-text-soft); }

.vp-filter__list { display: flex; flex-direction: column; gap: var(--vp-space-2); list-style: none; }

/* Чекбокс — это ссылка: фильтр обязан работать без JS */
.vp-check {
    display: flex;
    align-items: flex-start;
    gap: var(--vp-space-3);
    font-size: 15px;
    line-height: 20px;
    font-weight: var(--vp-fw-medium);
}

.vp-check__box {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: 1px;
    border: 1px solid var(--vp-border);
    border-radius: 3px;
    background: var(--vp-bg);
}
.vp-check.is-on .vp-check__box {
    background: var(--vp-brand);
    border-color: var(--vp-brand);
}
.vp-check.is-on .vp-check__label { color: var(--vp-brand); }

.vp-filter__toggle {
    align-self: flex-start;
    font-size: 15px;
    line-height: 20px;
    font-weight: var(--vp-fw-medium);
    color: var(--vp-brand);
}

.vp-filter__submit { width: 100%; }

/* Кнопка открытия фильтра — только на узких экранах. Сама панель над сеткой
   нужна всегда: в ней живёт сортировка. */
.vp-catalog__filter-btn { display: none; width: 100%; }

@media (max-width: 1023px) {
    .vp-catalog__filter-btn { display: block; }

    /* Панель выезжает на весь экран, кнопка «Показать товары» закреплена внизу */
    .vp-catalog__side {
        position: fixed;
        inset: 0;
        z-index: 150;
        display: none;
        background: var(--vp-bg);
        overflow-y: auto;
    }
    .vp-catalog__side.is-open { display: block; }

    .vp-filter {
        min-height: 100%;
        border: 0;
        border-radius: 0;
        padding-bottom: 96px;
    }
    .vp-filter__close { display: block; }
    .vp-filter__submit {
        position: fixed;
        left: var(--vp-space-4);
        right: var(--vp-space-4);
        bottom: var(--vp-space-4);
        width: auto;
    }
}

/* ============ Панель над сеткой ============ */

.vp-catalog__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vp-space-4);
    margin-bottom: var(--vp-space-5);
}

.vp-sort {
    display: flex;
    align-items: center;
    gap: var(--vp-space-3);
}
.vp-sort__label {
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    font-weight: var(--vp-fw-medium);
    color: var(--vp-text-soft);
    white-space: nowrap;
}
.vp-sort .vp-select { width: auto; min-width: 210px; }

/* ============ Показать ещё и пагинация ============ */

.vp-catalog__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vp-space-5);
    margin-top: var(--vp-space-8);
}
.vp-catalog__more .vp-btn { min-width: 260px; }

.vp-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vp-space-2);
    list-style: none;
}
.vp-pager__item {
    display: grid;
    place-items: center;
    min-width: 40px; height: 40px;
    padding-inline: var(--vp-space-2);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
    font-size: var(--vp-fs-sm);
}
.vp-pager__item.is-current,
.vp-pager__item:hover {
    background: var(--vp-brand);
    border-color: var(--vp-brand);
    color: var(--vp-text-invert);
}

@media (max-width: 1023px) {
    .vp-catalog__bar { flex-direction: column; align-items: stretch; }
    .vp-sort { justify-content: space-between; }
    .vp-sort .vp-select { min-width: 0; flex: 1 1 auto; }
}

/* ============ Карточка товара ============ */

.vp-pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--vp-space-12);
    align-items: start;
}

/* ---- Галерея ---- */

.vp-gallery__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    background: var(--vp-bg-cream);
    border-radius: var(--vp-radius-md);
    overflow: hidden;
}
.vp-gallery__main { width: 100%; height: 100%; object-fit: contain; }

.vp-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px; height: 40px;
}
.vp-gallery__arrow--prev { left: var(--vp-space-4); }
.vp-gallery__arrow--next { right: var(--vp-space-4); }
.vp-gallery__arrow svg { width: 16px; height: 16px; }

.vp-gallery__zoom {
    position: absolute;
    left: var(--vp-space-4);
    bottom: var(--vp-space-4);
    z-index: 2;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    color: var(--vp-brand);
}
.vp-gallery__zoom svg { width: 22px; height: 22px; }

.vp-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--vp-space-3);
    margin-top: var(--vp-space-4);
    list-style: none;
}
.vp-gallery__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: var(--vp-space-2);
    background: var(--vp-bg);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
    overflow: hidden;
}
.vp-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.vp-gallery__thumb.is-active { border-color: var(--vp-brand); }

/* Увеличенное фото */
.vp-gallery__lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--vp-space-6);
    background: rgba(8, 8, 8, .82);
}
.vp-gallery__lightbox[hidden] { display: none; }
/* Клиент: «увеличение фото работает на уменьшение». Так и было: снимки
   в каталоге 500×500, в галерее карточки они растянуты до ~630px, а в
   окне просмотра при max-width: 100% картинка рисовалась в своих 500px,
   то есть мельче, чем до нажатия. Здесь размер задаётся явно, поэтому
   снимок именно увеличивается. */
.vp-gallery__lightbox img {
    width: min(88vw, 88vh);
    height: auto;
    max-width: 88vw;
    max-height: 88vh;
    object-fit: contain;
}

/* ---- Блок покупки ---- */

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

.vp-buy__sku {
    align-self: flex-start;
    padding: var(--vp-space-2) var(--vp-space-4);
    background: var(--vp-bg-sand);
    border-radius: var(--vp-radius-sm);
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
    font-weight: var(--vp-fw-medium);
}

.vp-buy__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h2);
    line-height: var(--vp-lh-h2);
}

/* Розница и опт: клиент просил уменьшить первую и увеличить вторую —
   сейчас акценты стояли наоборот. Розница была набрана 75px (--vp-fs-display),
   опт — обычным 16px серым. */
.vp-buy__price {
    font-size: var(--vp-fs-lg);
    line-height: var(--vp-lh-lg);
    color: var(--vp-text-soft);
}
.vp-buy__price b {
    font-family: var(--vp-font-head);
    font-size: 52px;
    line-height: 1;
    color: var(--vp-brand);
}

.vp-buy__opt {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--vp-space-2);
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    color: var(--vp-text);
}
.vp-buy__opt-label { font-weight: 700; }
.vp-buy__opt b {
    font-family: var(--vp-font-head);
    font-size: 28px;
    line-height: 1;
    color: var(--vp-brand-alt);
}

.vp-buy__form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--vp-space-4);
    align-items: center;
}

.vp-stepper {
    display: grid;
    grid-template-columns: 44px 64px 44px;
    align-items: center;
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
    overflow: hidden;
}
.vp-stepper__btn { height: 52px; font-size: 20px; color: var(--vp-brand); }
.vp-stepper__input {
    height: 52px;
    border: 0;
    text-align: center;
    font-size: var(--vp-fs-md);
    background: var(--vp-bg);
    /* стрелки браузера рядом со своими кнопками выглядят мусором */
    -moz-appearance: textfield;
}
.vp-stepper__input::-webkit-outer-spin-button,
.vp-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Надписи в кнопках клиент назвал мелкими: базовые 18px остаются у главной
   кнопки, вторичные подтянуты к ним с 16px. */
.vp-buy__submit { height: 52px; font-size: var(--vp-fs-lg); font-weight: 700; }

.vp-buy__extra { display: flex; gap: var(--vp-space-4); flex-wrap: wrap; }
.vp-buy__extra .vp-btn {
    flex: 1 1 200px;
    min-height: 52px;
    font-size: var(--vp-fs-h4);
    font-weight: var(--vp-fw-medium);
    /* иконка и подпись в одну строку по центру, как в макете */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vp-space-2);
}
.vp-buy__extra .vp-btn img { flex: none; }

/* ---- Выгодно для компаний ---- */

.vp-corp {
    margin-top: var(--vp-space-4);
    padding: var(--vp-space-6);
    background: var(--vp-bg-cream);
    border-radius: var(--vp-radius-md);
}
.vp-corp__title {
    margin-bottom: var(--vp-space-5);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h4);
    line-height: var(--vp-lh-h4);
    text-align: center;
    text-transform: uppercase;
}
/* Левая и правая часть по правкам клиента выровнены по высоте: обе колонки
   тянутся на высоту блока и центрируют содержимое по вертикали. Раньше левая
   была на две строки короче правой и висела вверху. Кегли подняты с 14 на 16 —
   «мелкий шрифт» было вторым замечанием по этому блоку. */
.vp-corp__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--vp-space-6);
    align-items: stretch;
}

.vp-corp__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--vp-space-3);
}
/* Плашки, как в макете: заливка песочная, текст по центру */
.vp-corp__lead, .vp-corp__note {
    padding: var(--vp-space-3) var(--vp-space-4);
    background: var(--vp-bg-sand);
    border-radius: var(--vp-radius-sm);
    text-align: center;
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    font-weight: 700;
}
.vp-corp__lead span, .vp-corp__note span {
    display: inline-block;
    margin-top: var(--vp-space-1);
    font-weight: var(--vp-fw-medium);
    color: var(--vp-brand-alt);
}

.vp-corp__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--vp-space-4);
    list-style: none;
}
.vp-corp__list li {
    display: flex;
    gap: var(--vp-space-3);
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
}
.vp-corp__list li::before { content: "✓"; color: var(--vp-brand); }

.vp-corp__cta { width: 100%; margin-top: var(--vp-space-5); font-size: var(--vp-fs-h4); }

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

@media (max-width: 767px) {
    .vp-buy__form { grid-template-columns: 1fr; }
    .vp-stepper { justify-self: start; }
    .vp-corp__body { grid-template-columns: 1fr; }
}

/* ============ Полный состав ============ */

/* Рамка вокруг всего блока — правка клиента, в макете состав стоит в такой же
   рамке вместе с шапкой. */
.vp-sostav__panel {
    padding: var(--vp-space-6);
    background: var(--vp-bg);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-md);
}

.vp-sostav__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vp-space-4);
    margin-bottom: var(--vp-space-6);
}

.vp-sostav__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
}

/* Счётчик «Всього» стоит сразу за заголовком, как в макете; вправо
   отодвигается только кнопка. */
.vp-sostav__count {
    display: inline-flex;
    align-items: baseline;
    gap: var(--vp-space-2);
    padding: var(--vp-space-2) var(--vp-space-4);
    background: var(--vp-bg-sand);
    border-radius: var(--vp-radius-sm);
    font-size: var(--vp-fs-md);
}
.vp-sostav__count b { font-size: var(--vp-fs-lg); color: var(--vp-brand); }
.vp-sostav__label { color: var(--vp-text-soft); }

.vp-sostav__edit { margin-left: auto; font-size: var(--vp-fs-md); padding: var(--vp-space-3) var(--vp-space-5); }

/* Сетка позиций собрана на flex, а не на grid: последний неполный ряд по
   правкам клиента стоит по центру, grid так не умеет. Тот же приём, что
   у выбора упаковки в калькуляторе (.vp-packs). */
.vp-sostav__grid {
    --vp-sostav-cols: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vp-space-4);
    list-style: none;
}

.vp-sostav__item {
    width: calc((100% - (var(--vp-sostav-cols) - 1) * var(--vp-space-4)) / var(--vp-sostav-cols));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vp-space-2);
    padding: var(--vp-space-3);
    text-align: center;
    background: var(--vp-bg);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
}
.vp-sostav__media { display: block; width: 100%; aspect-ratio: 1 / 1; }
.vp-sostav__media img { width: 100%; height: 100%; object-fit: contain; }
.vp-sostav__name { font-size: var(--vp-fs-xs); line-height: var(--vp-lh-xs); }
.vp-sostav__qty { font-size: var(--vp-fs-sm); font-weight: var(--vp-fw-medium); }

.vp-sostav__warning {
    display: flex;
    align-items: flex-start;
    gap: var(--vp-space-3);
    margin-top: var(--vp-space-6);
    padding: var(--vp-space-4) var(--vp-space-5);
    background: var(--vp-bg-cream);
    border-radius: var(--vp-radius-sm);
    font-size: var(--vp-fs-sm);
    line-height: var(--vp-lh-sm);
}
.vp-sostav__warning-icon {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border: 1px solid var(--vp-brand);
    border-radius: var(--vp-radius-pill);
    color: var(--vp-brand);
    font-weight: var(--vp-fw-medium);
}

/* ============ Описание и характеристики ============ */

/* Характеристики слева, описание справа и в рамке — правка клиента.
   Колонки растянуты на общую высоту, поэтому блок больше не выглядит
   ступенькой. */
.vp-descr__grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--vp-space-8);
    align-items: stretch;
}
.vp-descr__title {
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
    margin-bottom: var(--vp-space-4);
}
/* внутри описания ширина уже ограничена .vp-prose, второй раз не нужно */
.vp-descr__grid .vp-prose { max-width: none; margin-inline: 0; }

.vp-descr__panel {
    padding: var(--vp-space-6);
    background: var(--vp-bg);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-md);
}

.vp-specs {
    padding: var(--vp-space-6);
    background: var(--vp-bg-cream);
    border-radius: var(--vp-radius-md);
}
.vp-specs__title {
    margin-bottom: var(--vp-space-4);
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
}
.vp-specs__list {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--vp-space-3) var(--vp-space-4);
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
}
.vp-specs__list dt { color: var(--vp-text-soft); }
.vp-specs__list dd { font-weight: 700; text-align: right; }

/* ============ Частые вопросы ============
   Формат повторяет калькулятор (.vp-faq* в calc.css) — так просил клиент.
   Стили здесь свои: calc.css подключается только в разделе калькулятора,
   на карточке товара его нет. Размер заголовка даёт .vp-section-title. */

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

.vp-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vp-space-4) var(--vp-space-5);
    align-items: start;
}
.vp-faq__item {
    padding: 0;
    background: var(--vp-bg-card);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
}
.vp-faq__item summary {
    display: flex;
    align-items: center;
    gap: var(--vp-space-4);
    padding: var(--vp-space-4) var(--vp-space-5);
    cursor: pointer;
    list-style: none;
    font-family: var(--vp-font-head);
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    color: var(--vp-brand);
}
.vp-faq__item summary::-webkit-details-marker { display: none; }

/* Плюс справа — в открытом состоянии становится минусом */
.vp-faq__item summary::after {
    content: "+";
    margin-left: auto;
    display: grid; place-items: center;
    flex: none;
    width: 28px; height: 28px;
    border-radius: var(--vp-radius-pill);
    background: var(--vp-brand);
    color: var(--vp-text-invert);
    font-family: var(--vp-font-body);
    line-height: 1;
}
.vp-faq__item[open] summary::after { content: "–"; }

.vp-faq__num {
    display: grid; place-items: center;
    flex: none;
    width: 28px; height: 28px;
    border-radius: var(--vp-radius-pill);
    background: var(--vp-brand);
    color: var(--vp-text-invert);
    font-family: var(--vp-font-body);
    font-size: var(--vp-fs-sm);
}

.vp-faq__item p {
    padding: var(--vp-space-4) var(--vp-space-5);
    border-top: 1px solid var(--vp-border);
    font-size: var(--vp-fs-sm);
    line-height: 22px;
    color: var(--vp-text-soft);
}

@media (max-width: 1023px) {
    .vp-sostav__grid { --vp-sostav-cols: 4; }
    .vp-descr__grid { grid-template-columns: 1fr; gap: var(--vp-space-6); }
    .vp-faq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .vp-sostav__panel { padding: var(--vp-space-4); }
    .vp-sostav__grid { --vp-sostav-cols: 3; }
    .vp-sostav__title { width: 100%; }
    .vp-sostav__edit { width: 100%; margin-left: 0; }
}

/* ============ Вам может понравиться ============ */

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

/* Переиспользуем механику карусели УТП, но без песочной плашки и разделителей */
.vp-also__wrap { background: none; padding: 0; }
.vp-also__item { flex: 0 0 300px; padding: 0; }
.vp-also__item::before { display: none; }
.vp-also__track { gap: var(--vp-space-6); }
.vp-also__item .vp-product { width: 100%; }

@media (max-width: 767px) {
    .vp-also__item { flex: 0 0 78%; }
    .vp-also__track { gap: var(--vp-space-4); }
}

/* ============ Страница поиска ============ */

/* Строка «За запитом "…" — знайдено товари». Была набрана Forum'ом в 32px
   и читалась вторым заголовком рядом с H1 — клиент назвал это «первый сегмент
   странно выделен». В макете это обычная подпись основной гарнитурой,
   жирная, с запросом бордовым. */
.vp-found {
    font-size: var(--vp-fs-lg);
    line-height: var(--vp-lh-lg);
    font-weight: 700;
}
.vp-found__q { color: var(--vp-brand-alt); font-weight: 700; }

/* Заголовок выдачи и сортировка — одной строкой: клиент просил поднять
   сортировку на уровень текста, раньше она стояла отдельной строкой
   над сеткой. */
.vp-search__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vp-space-4);
    margin-top: var(--vp-space-8);
}

.vp-search__sort { margin: 0; }

/* Сетка результатов — четыре колонки: боковой панели фильтров тут нет */
.vp-search__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vp-space-6);
    list-style: none;
}

@media (max-width: 1279px) {
    .vp-search__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .vp-search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    /* Заголовок и сортировка в одну строку не влезают — сортировка уходит вниз
       и растягивается, как на странице категории */
    .vp-search__head { flex-direction: column; align-items: stretch; }
    .vp-search__grid { gap: var(--vp-space-4); }
    .vp-search__sort { justify-content: space-between; }
    .vp-search__sort .vp-select { min-width: 0; flex: 1 1 auto; }
}

/* ============ Плитки видов продукции ============
   Стоят над списком товаров вместо прежних чипов подкатегорий.
   Ведут на те же SEF-адреса фильтра, что и чекбоксы в панели слева.

   По правкам клиента — кнопки одинакового размера «иконка + название»,
   как в макете. Отсюда сетка из шести равных колонок, а не свободный поток:
   плитки разной ширины он и просил убрать. Действие отдаёт не больше шести
   значений, поэтому ряд всегда один. */

.vp-types {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--vp-space-4);
    list-style: none;
    margin-bottom: var(--vp-space-8);
}

.vp-type {
    display: flex;
    align-items: center;
    gap: var(--vp-space-3);
    /* Высота фиксирована, а не задана содержимым: подписи бывают в одну
       и в две строки, и без этого «одинакового размера» не получается. */
    min-height: 76px;
    height: 100%;
    padding: var(--vp-space-3) var(--vp-space-4);
    background: var(--vp-bg);
    transition: border-color var(--vp-transition), background-color var(--vp-transition);
}
.vp-type:hover { border-color: var(--vp-brand); }

/* Подложка кружком белая всегда. На обычной плитке её не видно, а на активной
   с бордовой заливкой она держит иконку читаемой: иконки набора cat-* —
   это залитый бордовый круг, на бордовом фоне он бы пропал. */
.vp-type__media {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    background: var(--vp-bg);
    border-radius: var(--vp-radius-pill);
}
.vp-type__media img { width: 32px; height: 32px; object-fit: contain; }
/* Фото товара — запасной вариант для значений без иконки: квадрат вписываем
   в тот же кружок, чтобы плитка не выбивалась из ряда. */
.vp-type__photo { border-radius: var(--vp-radius-pill); }

.vp-type__label {
    display: block;
    font-size: var(--vp-fs-md);
    line-height: var(--vp-lh-md);
    font-weight: var(--vp-fw-medium);
    /* Подписи бывают длинными («Набори для глінтвейну»): в узкой колонке слово
       не влезает целиком и обрезалось рамкой карточки */
    overflow-wrap: break-word;
}

.vp-type--active,
.vp-type--active:hover {
    border-color: var(--vp-brand);
    background: var(--vp-brand);
}
.vp-type--active .vp-type__label { color: var(--vp-text-invert); }

/* Шесть колонок держатся только на широком экране: уже 1280 в колонку
   перестают влезать длинные подписи вроде «Набори для глінтвейну» */
@media (max-width: 1279px) {
    .vp-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* На мобильном плитки прячем: они занимают там весь первый экран,
   а фильтр с тем же набором значений никуда не делся. */
@media (max-width: 767px) {
    .vp-types { display: none; }
}