/* Start:/local/templates/versta_desktop/components/bitrix/search.title/vd_overlay/style.css?179172675910531*/
/*
 * Поиск в шапке (экран 27, SiteHeader): поле-ссылка и оверлей под шапкой.
 * Открытие, фокус, Esc и блокировку прокрутки даёт ui.js; позицию (--vd-search-top) — script.js.
 * Цвета, шрифты, радиусы — токены --vd-*.
 */

.search-title {
    display: flex;
    min-width: 0;
}

/* ---------- Поле-ссылка в шапке ---------- */
.search-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 230px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vd-divider);
    font: 13px / 1 var(--vd-font-text);
    color: inherit;
    transition: border-color var(--vd-transition);
}

.search-trigger:hover,
.search-trigger[aria-expanded="true"] {
    color: inherit;
    border-bottom-color: currentColor;
}

.search-trigger__icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.search-trigger__text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .7;
}

/* Прозрачная шапка поверх фото: линия — полупрозрачный цвет текста */
.page--header-overlay .search-trigger {
    border-bottom-color: color-mix(in srgb, currentColor 30%, transparent);
}

.page--header-overlay .search-trigger:hover {
    border-bottom-color: currentColor;
}

/* Мега-меню открыто — шапка светлая, линия обычная */
.page--header-overlay .site-header.is-mega-open .search-trigger {
    border-bottom-color: var(--vd-divider);
}

/* ---------- Оверлей ---------- */
.search-overlay {
    position: fixed;
    top: var(--vd-search-top, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    /* Под модалками и дроверами ui.js */
    z-index: calc(var(--vd-z-layer) - 10);
}

.search-overlay[hidden] {
    display: none;
}

/* Затемнение страницы под панелью */
.search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: var(--vd-overlay);
    opacity: 0;
    transition: opacity var(--vd-transition);
}

.search-overlay.is-open .search-overlay__backdrop {
    opacity: 1;
}

.search-overlay__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-height: 100%;
    padding: 40px var(--vd-gutter) 48px;
    border-bottom: 1px solid var(--vd-divider);
    background: var(--vd-white);
    color: var(--vd-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--vd-transition), transform var(--vd-transition);
}

.search-overlay.is-open .search-overlay__panel {
    opacity: 1;
    transform: none;
}

.search-overlay__panel:focus {
    outline: none;
}

/* Строка ввода: крупный текст, красная каретка, «Esc — закрыть ✕» справа */
.search-overlay__form {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--vd-ink);
}

.search-overlay__input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: 400 clamp(30px, 3.06vw, 52px) / 1.1 var(--vd-font-text);
    letter-spacing: -.01em;
    color: var(--vd-ink);
    caret-color: var(--vd-accent);
    outline: none;
    appearance: none;
}

/* Фокус и так очевиден (каретка, линия под полем) — общий :focus-visible шаблона не нужен */
.search-overlay__input:focus-visible {
    outline: none;
}

.search-overlay__input::placeholder {
    color: var(--vd-text-5);
    opacity: 1;
}

.search-overlay__input::-webkit-search-cancel-button,
.search-overlay__input::-webkit-search-decoration {
    -webkit-appearance: none;
}

.search-overlay__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border: 0;
    background: none;
    font: 13px / 1 var(--vd-font-text);
    color: var(--vd-text-3);
    cursor: pointer;
    transition: color var(--vd-transition);
}

.search-overlay__close:hover {
    color: var(--vd-ink);
}

/* Идёт запрос — полоска под полем «дышит» */
.search-overlay.is-loading .search-overlay__form {
    border-bottom-color: var(--vd-text-3);
    transition: border-color .6s ease;
}

/*
 * Тело: слева (4fr) подсказки и «Недавно искали», справа (8fr) товары.
 * listbox растянут на обе колонки и делит их сеткой родителя (subgrid),
 * поэтому «Недавно искали» (вне listbox) встаёт в левую колонку под подсказки.
 */
.search-overlay__body {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    gap: 28px clamp(32px, 5vw, 72px);
}

/* Показывать нечего — тело не занимает места */
.search-overlay__body:not(:has(> :not([hidden]))) {
    display: none;
}

.search-overlay__results {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    min-width: 0;
}

.search-overlay__results[hidden] {
    display: none;
}

.search-overlay__status {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 640px;
    font-size: var(--vd-fs-body);
    line-height: 1.5;
    color: var(--vd-text-2);
}

.search-overlay__status[hidden] {
    display: none;
}

.search-overlay__recent {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.search-overlay__recent[hidden] {
    display: none;
}

.search-overlay__recent-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.search-overlay__recent-head .search-suggest__label {
    padding-bottom: 0;
}

.search-overlay__chips {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-overlay__chip {
    padding: 10px 14px;
}

/* ---------- Подсказки из ajax.php ---------- */
.search-suggest {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-suggest--hints {
    grid-column: 1;
    grid-row: 1;
}

.search-suggest--products {
    grid-column: 2;
    grid-row: 1 / -1;
    gap: 16px;
}

.search-suggest__label {
    padding-bottom: 10px;
    font: 11px / 1 var(--vd-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.search-suggest__hint {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--vd-surface-2);
    font: 16px / 1.25 var(--vd-font-text);
    color: var(--vd-ink);
}

.search-suggest__hint-text {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Совпадение ядро оборачивает в <b> — жирным, остальное обычным */
.search-suggest__hint-text b {
    font-weight: 700;
}

.search-suggest__meta {
    flex: none;
    font-size: 12px;
    line-height: 1;
    color: var(--vd-text-4);
    white-space: nowrap;
}

.search-suggest__hint--all {
    font-weight: 600;
}

.search-suggest__hint--all::after {
    content: '→';
}

.search-suggest__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.search-suggest__head .search-suggest__label {
    padding-bottom: 0;
}

.search-suggest__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.search-suggest__product {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--vd-ink);
}

.search-suggest__media {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--vd-radius-m);
    background: var(--vd-placeholder);
    overflow: hidden;
}

.search-suggest__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-suggest__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font: 13.5px / 1.3 var(--vd-font-text);
}

/* Цена плитки: .price из UI-кита, размер — по макету (14px) */
.search-suggest__price {
    gap: 4px 8px;
}

.search-suggest__price .price__current {
    font-size: 14px;
}

.search-suggest__price .price__old {
    font-size: 12px;
}

/* Выбранный стрелками вариант и наведение */
.search-suggest__hint:hover,
.search-suggest__hint.is-active,
.search-suggest__product:hover .search-suggest__name,
.search-suggest__product.is-active .search-suggest__name {
    color: var(--vd-accent);
}

.search-suggest__product.is-active .search-suggest__media {
    outline: 2px solid var(--vd-accent);
    outline-offset: 3px;
}

.search-suggest__all.is-active {
    color: var(--vd-accent);
}

/* ---------- Узкие экраны (планшеты получают десктоп-шаблон); точки — как у шапки ---------- */
@media (max-width: 1360px) {
    .search-trigger {
        width: 190px;
    }
}

/* Остаётся иконка: подпись только для скринридера */
@media (max-width: 1200px) {
    .search-trigger,
    .page--header-overlay .search-trigger {
        width: auto;
        padding: 6px 0;
        border-bottom-color: transparent;
    }

    .search-trigger__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 1024px) {
    .search-overlay__panel {
        gap: 28px;
        padding-block: 28px 36px;
    }

    .search-overlay__body {
        display: flex;
        flex-direction: column;
    }

    .search-overlay__results {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .search-suggest__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 767px) {
    .search-overlay__close {
        font-size: 0;
        gap: 0;
    }

    .search-overlay__close-x {
        font-size: 18px;
    }
}

/* End */


/* Start:/local/templates/versta_desktop/components/bitrix/sale.basket.basket.line/vd_minicart/style.css?17917267597117*/
/*
 * Мини-корзина (BES-62, экран 09): иконка в шапке и дровер.
 * Каркас дровера (.drawer, __head / __body / __foot), кнопки, степпер, цена, прогресс — из UI-кита (ui.css).
 */

/* ---------- Иконка в шапке ---------- */
.mini-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mini-cart__toggle {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 22px;
    color: inherit;
}

/* Иконка маленькая — расширяем область клика, не трогая раскладку шапки */
.mini-cart__toggle::before {
    content: '';
    position: absolute;
    inset: -11px -12px;
}

.mini-cart__icon {
    width: 20px;
    height: 22px;
}

.mini-cart__badge {
    position: absolute;
    top: -6px;
    right: -11px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--vd-radius-pill);
    background: var(--vd-accent);
    color: var(--vd-white);
    font: 700 10px / 17px var(--vd-font-text);
    text-align: center;
    pointer-events: none;
}

/* ---------- Дровер ---------- */

/* Плашка «Добавили: …» над списком */
.mini-cart__notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 32px 6px;
    padding: 14px 16px;
    border-radius: var(--vd-radius-m);
    background: var(--vd-ink);
    color: var(--vd-white);
    font-size: 13.5px;
    line-height: 1.3;
}

.mini-cart__notice[hidden] {
    display: none;
}

.mini-cart__notice::before {
    content: '✓';
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--vd-accent);
    font: 700 11px / 1 var(--vd-font-text);
}

.mini-cart__notice--error::before {
    content: '!';
}

.mini-cart__notice-name {
    font-weight: 600;
}

.mini-cart__body--empty {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

/* Пустое состояние из UI-кита рассчитано на страницу — в узком дровере заголовок скромнее */
.mini-cart__body--empty .empty-state__title {
    font-size: var(--vd-fs-h4);
}

.mini-cart__list {
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
}

/* Позиция: фото 88×110 + описание */
.mini-cart-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--vd-surface-2);
    transition: opacity var(--vd-transition);
}

.mini-cart-item.is-loading {
    opacity: .5;
    pointer-events: none;
}

.mini-cart-item__media {
    display: block;
    height: 110px;
    border-radius: var(--vd-radius-s);
    background: var(--vd-placeholder);
    overflow: hidden;
}

.mini-cart-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-item__info {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.mini-cart-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.mini-cart-item__name {
    min-width: 0;
    font: 600 14.5px / 1.3 var(--vd-font-text);
    overflow-wrap: anywhere;
}

.mini-cart-item__remove {
    margin: -5px -7px 0 0;
}

.mini-cart-item__variant {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--vd-text-3);
}

.mini-cart-item__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
}

.mini-cart-item__price {
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
}

.mini-cart-item__price .price__current {
    font-size: 15px;
}

/* Бесплатная доставка: текст + полоска */
.mini-cart__shipping {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

.mini-cart__shipping-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12.5px;
    line-height: 1.3;
}

.mini-cart__shipping-note {
    color: var(--vd-text-3);
    text-align: right;
}

/* «С этим покупают» */
.mini-cart__upsell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.mini-cart__upsell-title {
    font: 600 12px / 1 var(--vd-font-text);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.mini-cart__upsell-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-cart-rec {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--vd-divider);
    border-radius: var(--vd-radius-m);
    transition: border-color var(--vd-transition);
}

.mini-cart-rec:hover {
    border-color: var(--vd-ink);
    color: inherit;
}

.mini-cart-rec__media {
    display: block;
    height: 64px;
    border-radius: var(--vd-radius-s);
    background: var(--vd-placeholder);
    overflow: hidden;
}

.mini-cart-rec__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-rec__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.mini-cart-rec__name {
    display: -webkit-box;
    font: 600 12.5px / 1.25 var(--vd-font-text);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mini-cart-rec__price {
    font-size: var(--vd-fs-caption);
    line-height: 1.2;
    color: var(--vd-text-2);
}

/* «+» — кружок; ведёт на карточку: размер выбирают там */
.mini-cart-rec__plus {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vd-ink);
    color: var(--vd-white);
    transition: background-color var(--vd-transition);
}

.mini-cart-rec__plus::before,
.mini-cart-rec__plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.mini-cart-rec__plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.mini-cart-rec:hover .mini-cart-rec__plus {
    background: var(--vd-accent);
}

/* Итог и кнопки */
.mini-cart__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.mini-cart__total-label {
    font: 600 15px / 1 var(--vd-font-text);
}

.mini-cart__total-value {
    font: 700 26px / 1 var(--vd-font-text);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .mini-cart__notice {
        margin-inline: 20px;
    }

    .mini-cart__upsell-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mini-cart__total-value {
        font-size: 22px;
    }
}

/* End */


/* Start:/local/templates/versta_desktop/assets/css/pages/home.css?179172675922052*/
/*
 * VERSTA desktop — главная (экран 01, BES-54). Подключается из include/home/page.php: Layout::pageCss('home').
 * Значения — макет screens/01-home.html (артборд 1440): в комментариях — размер на 1440.
 *
 * Содержание:
 *  1. Каркас, нумерация блоков     6. Линейки (.home-lines)
 *  2. Hero (.home-hero)            7. Баннер акции (.home-promo)
 *  3. Индекс разделов (.home-index) 8. Амбассадоры (.home-amb)
 *  4. Хиты (.home-hits)            9. Журнал (.home-journal)
 *  5. Коллекция (.home-collection) 10. Перки (.home-perks)
 *                                  11. Узкие экраны
 */

/* ========== 1. Каркас, нумерация блоков ========== */
.home {
    --home-space: clamp(72px, 8.33vw, 120px);     /* 120 — между блоками */
    --home-space-m: clamp(56px, 6.67vw, 96px);    /* 96 — над «Хитами», под перками */
    --home-on-dark: rgba(255, 255, 255, .62);     /* вторичный текст на тёмном и на фото */

    counter-reset: vd-home;
}

/*
 * Номер блока «01…05» — CSS-счётчик: блок без данных не выводится, и нумерация не прерывается.
 * Номер есть у заголовков секций (include/home/section-head.php) и у надзаголовков коллекции
 * и амбассадоров (.home-eyebrow). Он декоративный (aria-hidden).
 */
.home-num::before {
    counter-increment: vd-home;
    content: counter(vd-home, decimal-leading-zero);
}

/* «02 — Коллекция» */
.home-eyebrow {
    font: 400 13px / 1.2 var(--vd-font-mono);
    color: var(--vd-text-3);
    text-transform: uppercase;
}

.home-eyebrow .home-num::after {
    content: '\00a0—\00a0';
}

.home-eyebrow--inverse {
    color: var(--home-on-dark);
}

/* Блок с полями страницы и отступом сверху */
.home-block {
    padding: var(--home-space) var(--vd-gutter) 0;
}

.home-head {
    margin-bottom: clamp(24px, 2.5vw, 36px);
}

/* Последний блок без перков — отступ до подвала */
.home > :last-child:not(.home-perks) {
    margin-bottom: var(--home-space-m);
}

/* ========== 2. Hero ========== */
/*
 * Первый экран под overlay-шапкой: шапка абсолютная (header.css), hero начинается от верха страницы.
 * Навигация «Кадр 01 / 03» — ниже шапки (--vd-header-h), текст — снизу.
 */
.home-hero {
    position: relative;
    height: clamp(600px, 100vh, 980px);
    height: clamp(600px, 100svh, 980px);
    background: var(--vd-ink);
    color: var(--vd-white);
    overflow: hidden;
    isolation: isolate;
}

.home-hero__slides {
    position: absolute;
    inset: 0;
}

.home-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}

.home-hero__slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity .8s ease, visibility 0s;
}

.home-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

/*
 * Затемнение сверху (шапка и «Кадр 01 / 03») и снизу (текст) — белый текст читается и на светлых
 * фото (баннеры в админке — студийные кадры на белом и снег). Макет: .45 → 0 к 26%, низ .66.
 */
.home-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, .5),
        rgba(10, 10, 10, .22) 18%,
        rgba(10, 10, 10, 0) 32%,
        rgba(10, 10, 10, 0) 44%,
        rgba(10, 10, 10, .7)
    );
}

.home-hero__body {
    position: absolute;
    right: var(--vd-gutter);
    bottom: clamp(32px, 3.9vw, 56px);
    left: var(--vd-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    align-items: end;
    gap: 24px 48px;
    text-shadow: 0 1px 16px rgba(10, 10, 10, .2);
}

.home-hero__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-width: 0;
}

.home-hero__eyebrow {
    font: 600 var(--vd-fs-caption) / 1.3 var(--vd-font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.home-hero__title {
    max-width: 100%;
    margin-left: -.04em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Размер — по самой длинной строке заголовка (result_modifier): короткое слово — во весь экран */
.home-hero__title--xl { font-size: var(--vd-fs-hero); line-height: .8; }   /* 220 */
.home-hero__title--l { font-size: var(--vd-fs-d2); line-height: .86; }     /* 120 */
.home-hero__title--m { font-size: var(--vd-fs-h1); line-height: .92; }     /* 76 */

.home-hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 6px;
}

.home-hero__text {
    font-size: var(--vd-fs-lead);
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}

.home-hero__btn {
    min-height: 52px;
    padding-inline: 26px;
    font-size: 14px;
    text-shadow: none;
}

/* «Кадр 01 / 03» и полоски */
.home-hero__nav {
    position: absolute;
    z-index: 2;
    top: calc(var(--vd-header-h) + 40px);
    right: var(--vd-gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font: 600 var(--vd-fs-micro) / 1 var(--vd-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Полоски и подпись видны и на светлом фото */
    filter: drop-shadow(0 0 6px rgba(10, 10, 10, .35));
}

.home-hero__nav[hidden] {
    display: none;
}

.home-hero__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-hero__dots {
    display: flex;
    gap: 6px;
}

/* Полоска 40×2, область нажатия — 40×20 */
.home-hero__dot {
    position: relative;
    width: 40px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.home-hero__dot::before,
.home-hero__dot::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    height: 2px;
}

.home-hero__dot::before {
    right: 0;
    background: rgba(255, 255, 255, .35);
    transition: background-color var(--vd-transition);
}

.home-hero__dot:hover::before {
    background: rgba(255, 255, 255, .6);
}

.home-hero__dot::after {
    width: 0;
    background: var(--vd-white);
}

.home-hero__dot.is-active::after {
    width: 100%;
}

/* Пока идёт прокрутка, активная полоска заполняется за интервал (data-interval="7000" в template.php) */
.home-hero.is-playing .home-hero__dot.is-active::after {
    animation: vd-home-hero-progress 7s linear both;
}

@keyframes vd-home-hero-progress {
    from { width: 0; }
    to { width: 100%; }
}

.home-hero__pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: none;
    color: var(--vd-white);
    cursor: pointer;
    transition: border-color var(--vd-transition);
}

.home-hero__pause:hover {
    border-color: var(--vd-white);
}

.home-hero__pause-icon {
    width: 10px;
    height: 10px;
}

.home-hero__icon-play,
.home-hero__pause.is-paused .home-hero__icon-pause {
    display: none;
}

.home-hero__pause.is-paused .home-hero__icon-play {
    display: inline;
}

/* ========== 3. Индекс разделов ========== */
.home-index {
    padding: clamp(28px, 3.06vw, 44px) var(--vd-gutter);
    border-bottom: 1px solid var(--vd-divider);
}

.home-index__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-index__link {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font: 700 var(--vd-fs-h4) / 1 var(--vd-font-display);   /* 30 */
    letter-spacing: .04em;
    text-transform: uppercase;
}

.home-index__count {
    font: 400 var(--vd-fs-caption) / 1 var(--vd-font-mono);
    letter-spacing: 0;
    color: var(--vd-text-4);
    transition: color var(--vd-transition);
}

.home-index__link:hover .home-index__count {
    color: var(--vd-accent);
}

.home-index__item--all {
    margin-left: auto;
}

/* ========== 4. Хиты ========== */
.home-hits {
    padding-top: var(--home-space-m);
}

/* ========== 5. Коллекция ========== */
.home-collection {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 40px clamp(40px, 5vw, 72px);
}

.home-collection--no-cover {
    grid-template-columns: minmax(0, 1fr);
}

.home-collection__cover {
    display: block;
    aspect-ratio: 15 / 16;       /* ≈ 733×780 */
    border-radius: var(--vd-radius);
    background: var(--vd-placeholder);
    overflow: hidden;
}

.home-collection__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.home-collection__cover:hover .home-collection__img {
    transform: scale(1.02);
}

.home-collection__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    min-width: 0;
}

.home-collection--no-cover .home-collection__body {
    max-width: 640px;
}

.home-collection__title {
    max-width: 100%;
    font-size: var(--vd-fs-h1);                            /* 76 */
    line-height: .92;
    overflow-wrap: anywhere;
}

.home-collection__text {
    max-width: 460px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--vd-text-2);
}

.home-collection__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Строки товаров (catalog.top [vd_home_rows]) */
.home-rows {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--vd-divider);
}

.home-rows__item {
    border-bottom: 1px solid var(--vd-divider);
}

.home-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
}

/* Вся строка — ссылка: акцентом при наведении только название */
.home-row:hover {
    color: inherit;
}

.home-row:hover .home-row__name {
    color: var(--vd-accent);
}

.home-row__img {
    width: 64px;
    height: 80px;
    border-radius: var(--vd-radius-s);
    background: var(--vd-surface);
    object-fit: cover;
}

.home-row__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.home-row__name {
    font: 600 15px / 1.3 var(--vd-font-text);
    transition: color var(--vd-transition);
}

.home-row__meta {
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--vd-text-4);
}

.home-row__price {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

/* ========== 6. Линейки ========== */
.home-lines__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-lines__list--3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.home-lines__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-lines__list--1 { grid-template-columns: minmax(0, 1fr); }

.home-line {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: clamp(420px, 41.67vw, 680px);                  /* 600 */
    border-radius: var(--vd-radius);
    background: var(--vd-placeholder);
    color: var(--vd-ink);
    overflow: hidden;
    isolation: isolate;
}

.home-line:hover {
    color: var(--vd-ink);
}

.home-line--photo,
.home-line--photo:hover {
    background: var(--vd-ink);
    color: var(--vd-white);
}

.home-line__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.home-line:hover .home-line__img {
    transform: scale(1.03);
}

/* Затемнение снизу под подписью */
.home-line--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, .62));
}

.home-line__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 28px 26px;
}

.home-line__count {
    font: 400 var(--vd-fs-caption) / 1 var(--vd-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-line__name {
    font: 700 clamp(32px, 3.06vw, 52px) / 1 var(--vd-font-display);   /* 44 */
    letter-spacing: .06em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.home-line__text {
    font-size: 14px;
    line-height: 1.45;
}

/* ========== 7. Баннер акции ========== */
.home-promo-wrap {
    padding: var(--home-space) var(--vd-gutter) 0;
}

.home-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px 48px;
    padding: clamp(32px, 3.9vw, 56px) clamp(28px, 4.44vw, 64px);
    border-radius: var(--vd-radius);
}

.home-promo--accent,
.home-promo--accent:hover {
    background: var(--vd-accent);
    color: var(--vd-white);
}

.home-promo--light,
.home-promo--light:hover {
    background: var(--vd-surface);
    color: var(--vd-ink);
}

.home-promo__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.home-promo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.home-promo__meta:empty {
    display: none;
}

.home-promo__eyebrow {
    font: 600 var(--vd-fs-caption) / 1.3 var(--vd-font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.home-promo--accent .home-promo__badge {
    background: var(--vd-white);
    color: var(--vd-ink);
}

.home-promo--light .home-promo__badge {
    background: var(--vd-accent);
    color: var(--vd-white);
}

.home-promo__title {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Размер — по длине заголовка (result_modifier) */
.home-promo__title--l { font-size: var(--vd-fs-d3); line-height: .88; }   /* 104 */
.home-promo__title--m { font-size: var(--vd-fs-h1); line-height: .92; }   /* 76 */
.home-promo__title--s { font-size: var(--vd-fs-h2); line-height: .95; }   /* 64 */

.home-promo__text {
    max-width: 640px;
    font-size: var(--vd-fs-lead);
    line-height: 1.5;
}

.home-promo__btn {
    padding-inline: 28px;
    font-size: 14px;
}

.home-promo--accent .home-promo__btn {
    border-color: var(--vd-white);
    background: var(--vd-white);
    color: var(--vd-ink);
}

.home-promo--light .home-promo__btn {
    border-color: var(--vd-ink);
    background: var(--vd-ink);
    color: var(--vd-white);
}

.home-promo:hover .home-promo__btn {
    opacity: .9;
}

/* ========== 8. Амбассадоры ========== */
.home-amb {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--home-space);
    background: var(--vd-ink);
    color: var(--vd-white);
}

.home-amb--photo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.home-amb__media {
    position: relative;
    min-height: clamp(420px, 44.44vw, 720px);              /* 640 */
}

.home-amb__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Надзаголовок сверху, цитата, внизу автор слева и «Стать амбассадором →» справа.
 * Ссылка стоит в нижнем правом углу той же строки, что и цитата с подписью (figure целиком —
 * подпись не отрывается от цитаты), поэтому подписи оставлено место справа.
 */
.home-amb__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    gap: 40px 24px;
    padding: clamp(48px, 5vw, 72px) clamp(28px, 5.56vw, 80px);
}

.home-amb:not(.home-amb--photo) .home-amb__body {
    padding-inline: var(--vd-gutter);
}

.home-amb__title {
    grid-column: 1 / -1;
}

.home-amb__figure {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    margin: 0;
}

.home-amb__quote {
    max-width: 980px;
    margin: 0;
    font-weight: 400;
    letter-spacing: -.01em;
    text-wrap: pretty;
}

/* Без фото цитата занимает больше ширины */
.home-amb:not(.home-amb--photo) .home-amb__quote {
    max-width: 1120px;
}

.home-amb__quote--l { font-size: clamp(28px, 2.92vw, 48px); line-height: 1.22; }   /* 42 */
.home-amb__quote--m { font-size: clamp(24px, 2.22vw, 36px); line-height: 1.3; }    /* 32 */
.home-amb__quote--s { font-size: clamp(20px, 1.81vw, 28px); line-height: 1.4; }    /* 26 */

.home-amb__author {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100% - 240px);
}

.home-amb__name {
    font: 600 16px / 1.2 var(--vd-font-text);
}

.home-amb__info {
    font-size: var(--vd-fs-small);
    line-height: 1.35;
    color: var(--home-on-dark);
}

.home-amb__link {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
    justify-self: end;
}

/* ========== 9. Журнал ========== */
.home-journal__list {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px var(--vd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-journal__list--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.home-journal__list--1 { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr); }

.home-article {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home-article__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--vd-radius);
    background: var(--vd-surface);
    object-fit: cover;
}

.home-article__date {
    font: 400 11.5px / 1 var(--vd-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.home-article__title {
    font: 600 20px / 1.3 var(--vd-font-text);
    text-wrap: pretty;
}

/* ========== 10. Перки ========== */
/* Содержимое — HTML включаемой области include/area/home-perks.php: <ul><li><strong>…</strong> текст</li></ul> */
.home-perks {
    margin: var(--home-space) var(--vd-gutter) var(--home-space-m);
    padding-top: 32px;
    border-top: 1px solid var(--vd-ink);
}

.home-perks ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px var(--vd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-perks li,
.home-perks p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--vd-text-2);
}

.home-perks strong,
.home-perks b {
    display: block;
    margin-bottom: 10px;
    font: 700 17px / 1.1 var(--vd-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vd-ink);
}

.home-perks a {
    border-bottom: 1px solid var(--vd-line-strong);
    color: var(--vd-ink);
}

.home-perks a:hover {
    border-bottom-color: currentColor;
    color: var(--vd-accent);
}

/* ========== 11. Узкие экраны (планшеты получают десктоп-шаблон) ========== */
@media (max-width: 1024px) {
    .home-hero__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-hero__aside {
        max-width: 560px;
    }

    .home-collection {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-collection__cover {
        aspect-ratio: 16 / 10;
    }

    .home-journal__list,
    .home-journal__list--2,
    .home-journal__list--1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-journal__item--big {
        grid-column: 1 / -1;
    }

    .home-perks ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .home-hero {
        height: clamp(520px, 92vh, 760px);
        height: clamp(520px, 92svh, 760px);
    }

    .home-hero__title--xl { font-size: 64px; }
    .home-hero__title--l { font-size: 52px; }
    .home-hero__title--m { font-size: 40px; }

    .home-index__link {
        font-size: 22px;
    }

    .home-index__item--all {
        flex-basis: 100%;
        margin-left: 0;
    }

    .home-lines__list,
    .home-lines__list--3,
    .home-lines__list--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-line {
        height: 420px;
    }

    .home-promo {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-promo__btn {
        justify-self: start;
    }

    .home-amb--photo {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-amb__media {
        min-height: 360px;
    }

    .home-amb__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .home-amb__author {
        max-width: none;
    }

    .home-amb__link {
        grid-row: 3;
        grid-column: 1;
        justify-self: start;
    }

    .home-journal__list,
    .home-journal__list--2,
    .home-journal__list--1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-perks ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* End */


/* Start:/local/templates/versta_desktop/components/bitrix/catalog.item/vd/style.css?179172675911122*/
/*
 * Плитка товара (макет ProductTile). Бейджи, свотчи, чипы, цена, кнопки — классы UI-кита (ui.css),
 * здесь — только раскладка плитки и её собственные элементы.
 */
.product-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ---------- Фото 3:4 ---------- */
.product-tile__media {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--vd-radius);
    background: var(--vd-placeholder);
    overflow: hidden;
    isolation: isolate;
}

.product-tile__link {
    position: absolute;
    inset: 0;
    display: block;
}

.product-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-tile__ph {
    height: 100%;
    border-radius: 0;
}

/* ---------- Бейджи и сердечко ---------- */
.product-tile__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 60px;
    pointer-events: none;
}

.product-tile__fav {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--vd-white) 94%, transparent);
    color: var(--vd-ink);
    cursor: pointer;
    transition: color var(--vd-transition), transform var(--vd-transition), opacity var(--vd-transition);
}

.product-tile__fav:hover {
    color: var(--vd-accent);
}

.product-tile__fav:active {
    transform: scale(.92);
}

.product-tile__fav-icon {
    width: 18px;
    height: 18px;
}

.product-tile__fav-icon path {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    transition: fill var(--vd-transition);
}

.product-tile__fav.is-active {
    color: var(--vd-accent);
}

.product-tile__fav.is-active .product-tile__fav-icon path {
    fill: currentColor;
}

.product-tile__fav.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* ---------- «⇄ Сравнить» под сердечком (параметр VD_COMPARE_URL; протокол — README «Сравнение») ----------
   Видна по наведению на плитку, с клавиатуры и пока товар в сравнении (.is-active ставит скрипт счётчика) */
.product-tile__compare {
    position: absolute;
    top: 56px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--vd-white) 94%, transparent);
    color: var(--vd-ink);
    opacity: 0;
    transition: color var(--vd-transition), background-color var(--vd-transition), transform var(--vd-transition), opacity var(--vd-transition);
}

.product-tile:hover .product-tile__compare,
.product-tile__compare.is-active {
    opacity: 1;
}

/* Клавиатура: только видимый фокус (:focus-visible), а не любой — после клика мышью фокус остаётся
   на «⇄», и :focus-within держал бы кнопку и панель открытыми. Отдельным правилом: браузер без :has()
   отбрасывает весь список селекторов, наведение при этом должно работать */
.product-tile__media:has(:focus-visible) .product-tile__compare {
    opacity: 1;
}

.product-tile__compare:hover {
    color: var(--vd-accent);
}

.product-tile__compare:active {
    transform: scale(.92);
}

.product-tile__compare-icon {
    width: 18px;
    height: 18px;
}

.product-tile__compare.is-active,
.product-tile__compare.is-active:hover {
    background: var(--vd-ink);
    color: var(--vd-white);
}

.product-tile .product-tile__compare.is-active:hover {
    opacity: .86;
}

.product-tile .product-tile__compare.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* ---------- Панель по наведению: размер — сразу в корзину ---------- */
.product-tile__panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--vd-radius-m);
    background: var(--vd-white);
    box-shadow: var(--vd-shadow-pop);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--vd-transition), transform var(--vd-transition);
}

.product-tile:hover .product-tile__panel,
.product-tile__panel.is-busy {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Остаётся в потоке фокуса: Tab по плитке показывает панель (только видимый фокус — см. правило «⇄» выше) */
.product-tile__media:has(:focus-visible) .product-tile__panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.product-tile__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Строка над чипами: подпись слева, цвет справа — моно 10.5px */
.product-tile__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font: 10.5px / 1 var(--vd-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

/* Подпись в одну строку и в приоритете, название цвета ужимается многоточием */
.product-tile__label,
.product-tile__head-color {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-tile__label {
    flex: 0 0 auto;
    max-width: 100%;
}

.product-tile__head-color {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

.product-tile__label.is-success {
    color: var(--vd-ink);
}

.product-tile__label.is-error {
    color: var(--vd-accent);
}

/* Равные ячейки: в ряд сколько влезает (от 36px), остаток не растягивается на всю строку */
.product-tile__sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
    gap: 6px;
}

.product-tile .product-tile__size {
    min-width: 0;
    height: 36px;
    padding: 0 6px;
    border-radius: var(--vd-radius-s);
    font-size: 12.5px;
}

.product-tile .product-tile__size:not(.is-disabled):hover,
.product-tile .product-tile__size.is-active {
    background: var(--vd-ink);
    border-color: var(--vd-ink);
    color: var(--vd-white);
}

.product-tile .product-tile__size.is-loading {
    opacity: .6;
    cursor: progress;
    pointer-events: none;
}

/* Длинная подпись («Свой размер») — на две ячейки */
.product-tile .product-tile__size--long {
    grid-column: span 2;
}

.product-tile .product-tile__size--wide {
    width: 100%;
}

.product-tile__quick-view {
    padding: 4px 0 2px;
    font: 600 13px / 1 var(--vd-font-text);
    text-align: center;
}

/* ---------- Цвета: точки-индикаторы, не кликаются (UI-кит .swatch--dot) ---------- */
.product-tile__colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 12px;
}

/* Цвет без картинки-образца в справочнике: штриховка вместо пустого кружка, название — в title.
   То же правило — в стилях карточки и фильтра (точка может стоять где угодно без них) */
.swatch--blank {
    background: repeating-linear-gradient(135deg, var(--vd-line-strong) 0 1.5px, var(--vd-white) 1.5px 4px);
}

.product-tile__colors-more {
    font-size: var(--vd-fs-micro);
    line-height: 12px;
    color: var(--vd-text-3);
}

/* Плитка без точек (цветов из справочника нет) в сетке, где у других плиток точки есть: место строки точек
   (12px + отступ 12px) остаётся пустым — название, цена и размеры в ряду сетки стоят на одной линии.
   Точек нет ни у одной плитки сетки — место не резервируем. */
.product-grid:has(.product-tile__colors) .product-tile__media + .product-tile__name {
    margin-top: 24px;
}

/* ---------- Текст ---------- */
.product-tile__name {
    font: 400 14.5px / 1.35 var(--vd-font-text);
    color: var(--vd-ink);
    overflow-wrap: anywhere;
}

.product-tile__sizes-line {
    font-size: 12.5px;
    line-height: 1;
    color: var(--vd-text-4);
}

.product-tile__cta {
    margin-top: 4px;
}

/* Планшеты без наведения: быстрое добавление — через карточку, «⇄» видна всегда */
@media (hover: none) {
    .product-tile__panel {
        display: none;
    }

    .product-tile__compare {
        opacity: 1;
    }
}

/* ---------- Быстрый просмотр: скелет модалки на время загрузки (assets/js/quick-view.js) ----------
   Модалку открывают из плитки, поэтому скелет живёт здесь: стили самого быстрого просмотра
   (catalog.element «vd_quick») приходят вместе с ответом. Раскладка — как у .quick-view. */
.quick-skeleton {
    display: grid;
    grid-template-columns: 580px minmax(0, 1fr);
    min-height: 520px;
}

.quick-skeleton__media {
    padding: 20px 20px 20px 104px;
}

.quick-skeleton__img,
.quick-skeleton__ph {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--vd-radius);
    object-fit: cover;
    background: var(--vd-placeholder);
}

.quick-skeleton__info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 56px 40px 40px;
}

.quick-skeleton__title {
    font: 700 28px / 1.05 var(--vd-font-display);
    letter-spacing: var(--vd-tracking-display);
    text-transform: uppercase;
    color: var(--vd-ink);
}

.quick-skeleton__line {
    display: block;
    width: 100%;
    height: 16px;
    border-radius: var(--vd-radius-s);
    background: var(--vd-surface-2);
    animation: vd-skeleton 1.2s ease-in-out infinite alternate;
}

.quick-skeleton__line--short {
    width: 40%;
}

.quick-skeleton__line--price {
    width: 30%;
    height: 28px;
}

.quick-skeleton__line--button {
    height: 54px;
    margin-top: 12px;
    border-radius: var(--vd-radius);
}

@keyframes vd-skeleton {
    to {
        opacity: .45;
    }
}

@media (max-width: 1100px) {
    .quick-skeleton {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .quick-skeleton__media {
        padding-left: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-skeleton__line {
        animation: none;
    }
}

/* End */


/* Start:/local/templates/versta_desktop/styles.css?179172675913122*/
/*
 * Типографика контента: HTML из визуального редактора (текстовые страницы, помощь, документы,
 * описания разделов, тексты новостей). Обёртка — <div class="content">…</div>,
 * раскладка страницы вокруг — .content-page в assets/css/layout.css.
 *
 * Битрикс подключает styles.css сам, в конце набора шаблона (после CSS компонентов),
 * и отдаёт его визуальному редактору. Поэтому:
 *  - все правила под :where(.content) — специфичность как у голого тега, любой класс компонента
 *    (.news-detail__text h2, .btn) их перекрывает независимо от порядка файлов;
 *  - у переменных есть запасные значения — в редакторе токенов base.css нет.
 */

:where(.content) {
    display: flow-root; /* обтекание картинок не вылезает за блок */
    max-width: 760px;
    font-size: var(--vd-fs-body, 15px);
    line-height: 1.65;
    color: var(--vd-text-2, #5f6268);
    overflow-wrap: break-word; /* длинные ссылки и цепочки &nbsp; не рвут колонку */
}

/* Широкая колонка: таблицы размеров, сертификаты */
:where(.content--wide) {
    max-width: none;
}

:where(.content) > :first-child {
    margin-top: 0;
}

:where(.content) > :last-child {
    margin-bottom: 0;
}

/* ---------- Заголовки ---------- */
:where(.content) :is(h1, h2, h3) {
    margin: 1.6em 0 .6em;
    font-family: var(--vd-font-display, Impact, 'Arial Narrow', sans-serif);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) h1 { font-size: clamp(32px, 2.78vw, 40px); line-height: 1; }
:where(.content) h2 { font-size: clamp(26px, 2.22vw, 32px); line-height: 1; }
:where(.content) h3 { font-size: 22px; line-height: 1.1; letter-spacing: .08em; }

:where(.content) :is(h4, h5, h6) {
    margin: 1.4em 0 .5em;
    font-family: var(--vd-font-text, 'Helvetica Neue', Helvetica, Arial, sans-serif);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) h4 { font-size: 17px; }
:where(.content) :is(h5, h6) { font-size: var(--vd-fs-body, 15px); }

/* Заголовок сразу после заголовка — без двойного отступа */
:where(.content) :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}

/* Редактор оборачивает заголовки в <strong> — вес уже 700 */
:where(.content) :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
    font-weight: inherit;
}

/* ---------- Текст ---------- */
:where(.content) :is(p, ul, ol, dl, table, pre, figure, blockquote) {
    margin: 0 0 1em;
}

:where(.content) :is(strong, b) {
    font-weight: 600;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) small {
    font-size: var(--vd-fs-small, 13px);
}

/* Выравнивание по ширине из редактора — с переносами, без «рек» пробелов */
:where(.content) [style*="justify"],
:where(.content) [align="justify"] {
    hyphens: auto;
}

/* Шрифт, вставленный из Word (Calibri, Times) — приводим к шрифту сайта */
:where(.content) [style*="font-family"],
:where(.content) font[face] {
    font-family: inherit !important;
}

:where(.content) a {
    color: var(--vd-ink, #0a0a0a);
    text-decoration: underline;
    text-decoration-color: var(--vd-line-strong, #d8d9dc);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--vd-transition, 200ms ease), text-decoration-color var(--vd-transition, 200ms ease);
}

:where(.content) a:hover {
    color: var(--vd-accent, #e8132b);
    text-decoration-color: currentColor;
}

:where(.content) hr {
    height: 0;
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--vd-divider, #ececee);
}

/* ---------- Списки ---------- */
:where(.content) :is(ul, ol) {
    padding-left: 1.3em;
}

:where(.content) li + li {
    margin-top: .4em;
}

:where(.content) li::marker {
    color: var(--vd-text-3, #686b71);
}

:where(.content) li > :is(ul, ol) {
    margin: .4em 0 0;
}

:where(.content) dt {
    font-weight: 600;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) dd {
    margin: .2em 0 .8em;
}

/* ---------- Цитата ---------- */
:where(.content) blockquote {
    margin-block: 1.6em;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--vd-ink, #0a0a0a);
    font-size: 20px;
    line-height: 1.45;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) blockquote p:last-child {
    margin-bottom: 0;
}

:where(.content) blockquote :is(cite, footer) {
    display: block;
    margin-top: 12px;
    font-size: var(--vd-fs-small, 13px);
    font-style: normal;
    color: var(--vd-text-3, #686b71);
}

/* ---------- Картинки, видео, фреймы ---------- */
:where(.content) :is(img, video, iframe) {
    max-width: 100%;
}

:where(.content) img {
    height: auto;
    border-radius: var(--vd-radius-s, 8px);
}

/* Высота из редактора (style="height: 400px") при ужатой ширине исказила бы пропорции */
:where(.content) img[style*="height"] {
    height: auto !important;
}

/* Картинка внутри строки текста (иконка) — не блочная */
:where(.content) p img:not(:only-child) {
    display: inline-block;
    vertical-align: middle;
}

/* Обтекание: float из редактора (style="float: left" или align="left") */
:where(.content) :is(img, figure)[style*="float: left"],
:where(.content) :is(img, figure)[style*="float:left"],
:where(.content) img[align="left"] {
    float: left;
    max-width: 50%;
    margin: .3em 28px 16px 0;
}

:where(.content) :is(img, figure)[style*="float: right"],
:where(.content) :is(img, figure)[style*="float:right"],
:where(.content) img[align="right"] {
    float: right;
    max-width: 50%;
    margin: .3em 0 16px 28px;
}

/* Картинка по центру (text-align: center у абзаца или margin auto) */
:where(.content) [style*="text-align: center"] img,
:where(.content) [style*="text-align:center"] img,
:where(.content) img[align="middle"] {
    margin-inline: auto;
}

:where(.content) figure img {
    width: 100%;
}

:where(.content) figcaption {
    margin-top: 10px;
    font-size: var(--vd-fs-small, 13px);
    line-height: 1.45;
    color: var(--vd-text-3, #686b71);
}

/* Видео-вставки (YouTube, VK, Rutube) — 16:9 на всю колонку */
:where(.content) iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vk.com"], [src*="vkvideo"], [src*="rutube"]) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--vd-radius-s, 8px);
}

/* ---------- Таблицы ---------- */
/*
 * 1. Таблица без ширины сама становится прокручиваемым блоком: по ширине — по содержимому,
 *    но не шире колонки; не влезает — горизонтальный скролл у таблицы, а не у страницы.
 * 2. Таблица с шириной из редактора (style="width: 100%", width="100%", фиксированная из Word) —
 *    на всю колонку. Просто блок со скроллом тут не годится: ширину получил бы блок (рамка, фон),
 *    а строки остались бы узкими. Поэтому:
 *    - одна группа строк (так пишут редактор и Word: только <tbody>) — таблица-блок со скроллом,
 *      а её <tbody> — таблица не уже блока: строки на всю колонку, широкое — прокручивается;
 *    - есть thead / tfoot / caption / colgroup (группы разъехались бы по колонкам) или браузер
 *      без :has() — обычная таблица на всю колонку без скролла, ячейки ужимаются (min-width: 0).
 * 3. Обёртка <div class="content__table"> — таблица на всю колонку, прокручивается обёртка.
 */
:where(.content) table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
}

/*
 * Ширина задана: атрибут width или свойство width в style (не border-width / max-width).
 * !important — иначе инлайновая ширина из Word (style="width: 638px") перебьёт колонку.
 */
:where(.content) table:where([width], [style^="width" i], [style*=" width" i], [style*=";width" i]) {
    display: table;
    width: 100% !important;
    overflow-x: visible;
}

:where(.content) table:where([width], [style^="width" i], [style*=" width" i], [style*=";width" i]):where(:not(:has(> thead, > tfoot, > caption, > colgroup, > tbody ~ tbody))) {
    display: block;
    overflow-x: auto;
}

:where(.content) table:where([width], [style^="width" i], [style*=" width" i], [style*=";width" i]):where(:not(:has(> thead, > tfoot, > caption, > colgroup, > tbody ~ tbody))) > tbody {
    display: table;
    width: 100%;
}

:where(.content__table) {
    max-width: 100%;
    margin: 0 0 1em;
    overflow-x: auto;
}

:where(.content__table) > table {
    display: table;
    width: 100%;
    margin: 0;
}

/* В обёртке таблица обычная — tbody снова группа строк (скролл у обёртки) */
:where(.content__table) > table > tbody {
    display: table-row-group;
    width: auto;
}

:where(.content) :is(th, td) {
    min-width: 4.5em; /* узкие колонки («84–88») не ломаются по тире — лучше прокрутка */
    padding: 12px 16px;
    border-top: 1px solid var(--vd-divider, #ececee);
    text-align: left;
    vertical-align: top;
}

/* Таблица с шириной без скролла — колонки ужимаются, а не вылезают за колонку текста */
:where(.content table:is([width], [style^="width" i], [style*=" width" i], [style*=";width" i])) :is(th, td) {
    min-width: 0;
}

/* Где таблица прокручивается (одна группа строк, обёртка) — узкие колонки снова держат ширину */
:where(.content table:is([width], [style^="width" i], [style*=" width" i], [style*=";width" i]):not(:has(> thead, > tfoot, > caption, > colgroup, > tbody ~ tbody))) :is(th, td),
:where(.content__table) :is(th, td) {
    min-width: 4.5em;
}

/* Ячейки из Word: нулевые отступы сверху-снизу («padding: 0cm 5.4pt») и чёрные рамки windowtext */
:where(.content) :is(th, td):where([style*="padding: 0cm" i], [style*="padding:0cm" i], [style*="padding: 0in" i], [style*="padding:0in" i]) {
    padding: 12px 16px !important;
}

:where(.content) :is(th, td):where([style*="windowtext" i]) {
    border-color: var(--vd-line-strong, #d8d9dc) !important;
}

:where(.content) th,
:where(.content) thead td {
    font-weight: 600;
    color: var(--vd-ink, #0a0a0a);
    background: var(--vd-surface, #f7f7f8);
}

:where(.content) :is(th, td) > :last-child {
    margin-bottom: 0;
}

:where(.content) caption {
    padding-bottom: 10px;
    font-size: var(--vd-fs-small, 13px);
    color: var(--vd-text-3, #686b71);
    text-align: left;
}

/* ---------- Код ---------- */
:where(.content) :is(code, kbd, samp) {
    padding: .1em .35em;
    border-radius: 4px;
    background: var(--vd-chip, #f4f4f6);
    font-family: var(--vd-font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: .9em;
}

:where(.content) pre {
    padding: 16px 20px;
    border-radius: var(--vd-radius-s, 8px);
    background: var(--vd-surface, #f7f7f8);
    font-family: var(--vd-font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 13px;
    overflow-x: auto;
}

:where(.content) pre code {
    padding: 0;
    background: none;
}

/* ---------- Узкие экраны: обтекание снимаем ---------- */
@media (max-width: 767px) {
    :where(.content) :is(img, figure)[style*="float"],
    :where(.content) img[align="left"],
    :where(.content) img[align="right"] {
        float: none !important;
        max-width: 100%;
        margin: 0 0 16px;
    }

    :where(.content) blockquote {
        font-size: 17px;
    }
}

/* End */


/* Start:/local/templates/versta_desktop/template_styles.css?1791726759911*/
/*
 * VERSTA desktop — утилиты, которые должны идти ПОСЛЕДНИМИ.
 *
 * Битрикс подключает этот файл сам, в конце набора шаблона — после CSS компонентов.
 * Поэтому здесь только то, что обязано перекрывать стили компонентов.
 * Токены, сброс и типографика — assets/css/base.css (выводится первым, см. Layout::addBaseCss).
 */

/* Скрыть визуально, оставить для скринридеров */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* End */
/* /local/templates/versta_desktop/components/bitrix/search.title/vd_overlay/style.css?179172675910531 */
/* /local/templates/versta_desktop/components/bitrix/sale.basket.basket.line/vd_minicart/style.css?17917267597117 */
/* /local/templates/versta_desktop/assets/css/pages/home.css?179172675922052 */
/* /local/templates/versta_desktop/components/bitrix/catalog.item/vd/style.css?179172675911122 */
/* /local/templates/versta_desktop/styles.css?179172675913122 */
/* /local/templates/versta_desktop/template_styles.css?1791726759911 */