/*
 * VERSTA desktop — UI-кит (BES-47): общие элементы для всех экранов.
 * Живая витрина: /local/tools/vd-test/ui-kit.php (с кукой versta_desktop=1).
 *
 * Содержание:
 *  1. Токены кита          9. Бейджи, статус, цена
 *  2. Кнопки, ссылки      10. Модалка, дровер
 *  3. Поля                11. Аккордеон
 *  4. Чипы                12. Трекер статуса, шаги чекаута
 *  5. Радио-карточка,     13. Крошки, пагинация, «Показать ещё»
 *     радио, чекбокс      14. Пустое состояние
 *  6. Переключатель       15. Заголовок секции
 *  7. Степпер количества  16. Плейсхолдер фото, прогресс
 *  8. Свотчи              17. Сетка плиток товаров (.product-grid)
 *                         18. Тост (.toast)
 *
 * Состояния — классами .is-active / .is-disabled / .is-error / .is-open
 * или нативно (:checked, :disabled, aria-*), если внутри есть input.
 */

/* ========== 1. Токены кита (дополняют base.css) ========== */
/*
 * Текст — только --vd-text-2/3/4 (проходят AA на белом и --vd-surface). Светлее — декор:
 * --vd-decor (base.css) — плейсхолдеры, стрелка селекта, плюс аккордеона, недоступный степпер.
 */
:root {
    --vd-text-5: #c3c5c9;                        /* недоступное: зачёркнутые размеры, крестики */
    --vd-control-line: #c9cbcf;                  /* обводка пустого радио */
    --vd-disabled-line: #f0f0f2;
    --vd-hairline: rgba(10, 10, 10, .14);        /* обводка светлых свотчей */
    --vd-overlay: rgba(10, 10, 10, .5);          /* подложка модалок и дроверов */
    --vd-on-dark-line: rgba(255, 255, 255, .6);  /* подчёркивание ссылок на фото */
    --vd-radius-l: 16px;                         /* модалка */
    --vd-radius-xs: 3px;                         /* бейджи */
    --vd-control-h: 56px;
    --vd-control-h-lg: 60px;
    --vd-z-layer: 1000;                          /* модалки и дроверы */
}

/* ========== 2. Кнопки и ссылки ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--vd-control-h);
    padding: 0 30px;
    border: 1px solid transparent;
    border-radius: var(--vd-radius);
    background: none;
    color: var(--vd-ink);
    font: 600 var(--vd-fs-body) / 1.1 var(--vd-font-text);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--vd-transition), border-color var(--vd-transition),
        color var(--vd-transition), opacity var(--vd-transition);
}

/* Глобальный a:hover красит ссылки в акцент — у кнопок цвет свой */
.btn:hover {
    color: var(--vd-ink);
}

.btn--primary,
.btn--primary:hover {
    background: var(--vd-ink);
    border-color: var(--vd-ink);
    color: var(--vd-white);
}

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

.btn--primary:hover,
.btn--accent:hover {
    opacity: .86;
}

.btn--outline {
    border-color: var(--vd-line);
    background: var(--vd-white);
}

.btn--outline:hover,
.btn--outline.is-active {
    border-color: var(--vd-ink);
}

/* Чёрная обводка: «Показать ещё», «В корзину» на плитке */
.btn--outline-ink {
    border-color: var(--vd-ink);
    background: var(--vd-white);
}

.btn--outline-ink:hover {
    background: var(--vd-ink);
    color: var(--vd-white);
}

/* Белая кнопка поверх фото */
.btn--light,
.btn--light:hover {
    background: var(--vd-white);
    border-color: var(--vd-white);
    color: var(--vd-ink);
}

.btn--light:hover {
    opacity: .9;
}

.btn--lg {
    min-height: var(--vd-control-h-lg);
    padding-inline: 34px;
    font-size: 16px;
}

.btn--sm {
    min-height: 48px;
    padding-inline: 22px;
    border-radius: var(--vd-radius-m);
    font-size: 14px;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* Квадратная кнопка-иконка (♡, сравнение) */
.btn--icon {
    width: var(--vd-control-h);
    padding: 0;
    font-size: 20px;
}

.btn--icon.btn--lg {
    width: var(--vd-control-h-lg);
}

.btn:disabled,
.btn.is-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn.is-loading {
    opacity: .6;
    cursor: progress;
    pointer-events: none;
}

/* Ссылка со стрелкой: «Все товары →» */
.link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    /* Не растягивается в колонке (flex / grid), в строке выравнивается как все */
    width: fit-content;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font: 600 14px / 1 var(--vd-font-text);
    color: var(--vd-ink);
}

.link-arrow::after {
    content: '→';
    transition: transform var(--vd-transition);
}

.link-arrow:hover::after {
    transform: translateX(3px);
}

.link-arrow--light {
    border-bottom-color: var(--vd-on-dark-line);
    color: var(--vd-white);
}

.link-arrow--light:hover {
    color: var(--vd-white);
    border-bottom-color: var(--vd-white);
}

/* Второстепенная подчёркнутая ссылка: «Сбросить», «Размерная сетка» */
.link-underline {
    padding-bottom: 2px;
    border: 0;
    border-bottom: 1px solid var(--vd-line-strong);
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.link-underline--muted {
    font-size: 12.5px;
    color: var(--vd-text-3);
}

/* Круглая кнопка-крестик: закрыть модалку, удалить позицию */
.btn-close {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--vd-text-4);
    cursor: pointer;
    transition: color var(--vd-transition), background-color var(--vd-transition);
}

.btn-close::before,
.btn-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.btn-close:hover {
    color: var(--vd-ink);
    background: var(--vd-chip);
}

.btn-close--sm {
    width: 28px;
    height: 28px;
    color: var(--vd-text-5);
}

.btn-close--sm::before,
.btn-close--sm::after {
    width: 12px;
}

/* Разделитель «или» (вход) */
.or-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--vd-fs-caption);
    color: var(--vd-text-4);
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vd-divider);
}

/* ========== 3. Поля ========== */
/*
 * <div class="field">
 *   <label class="field__box">
 *     <span class="field__label">Телефон</span>
 *     <input class="field__control" type="tel" data-vd-phone>
 *   </label>
 *   <p class="field__error">Проверьте номер</p>
 * </div>
 */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.field__box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-height: var(--vd-control-h);
    padding: 13px 18px 15px;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius);
    background: var(--vd-white);
    cursor: text;
    transition: border-color var(--vd-transition);
}

.field__box:hover {
    border-color: var(--vd-line-strong);
}

.field__box:focus-within,
.field.is-focused .field__box {
    border-color: var(--vd-ink);
}

.field__label {
    font: 400 var(--vd-fs-micro) / 1 var(--vd-font-text);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vd-text-4);
}

.field__label-req {
    color: var(--vd-accent);
}

.field__control {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: 600 16px / 1.2 var(--vd-font-text);
    color: var(--vd-ink);
    outline: none;
    appearance: none;
}

.field__control::placeholder {
    font-weight: 400;
    color: var(--vd-decor);
    opacity: 1;
}

/* Фокус показывает рамка .field__box */
.field__control:focus-visible {
    outline: none;
}

textarea.field__control {
    min-height: 88px;
    font-weight: 400;
    font-size: var(--vd-fs-body);
    line-height: 1.5;
    resize: vertical;
}

select.field__control {
    padding-right: 28px;
    cursor: pointer;
}

/* Стрелка селекта */
.field--select .field__box::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.5px solid var(--vd-decor);
    border-bottom: 1.5px solid var(--vd-decor);
    transform: rotate(45deg);
    pointer-events: none;
}

/* Поле без лейбла: «Москва ▾», «Комментарий курьеру» */
.field--plain .field__box {
    padding: 17px 18px;
}

.field--plain .field__control {
    font-size: var(--vd-fs-body);
}

.field--lg .field__control {
    font-size: 18px;
}

.field__hint {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--vd-text-3);
}

.field__error {
    display: none;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--vd-accent);
}

.field.is-error .field__box,
.field__box:has(.field__control[aria-invalid="true"]) {
    border-color: var(--vd-accent);
}

.field.is-error .field__error {
    display: block;
}

.field.is-disabled .field__box,
.field__box:has(.field__control:disabled) {
    background: var(--vd-surface);
    border-color: var(--vd-divider);
    cursor: not-allowed;
}

.field__box:has(.field__control:disabled) .field__control {
    color: var(--vd-text-3);
}

/* Сетка формы: 1 или 2 колонки */
.form-grid {
    display: grid;
    gap: 14px;
}

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

.form-grid__wide {
    grid-column: 1 / -1;
}

/* ========== 4. Чипы ========== */
/* <button class="chip is-active">…</button> или <label class="chip"><input type="radio" class="visually-hidden">…</label> */
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-pill);
    background: var(--vd-white);
    color: var(--vd-ink);
    font: 600 13px / 1 var(--vd-font-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--vd-transition), border-color var(--vd-transition),
        color var(--vd-transition);
}

.chip:hover {
    border-color: var(--vd-ink);
    color: var(--vd-ink);
}

.chip.is-active,
.chip:has(input:checked) {
    background: var(--vd-ink);
    border-color: var(--vd-ink);
    color: var(--vd-white);
}

.chip.is-disabled,
.chip:has(input:disabled) {
    background: var(--vd-surface);
    border-color: var(--vd-disabled-line);
    color: var(--vd-text-5);
    text-decoration: line-through;
    cursor: not-allowed;
}

.chip:has(input:focus-visible) {
    outline: 2px solid var(--vd-accent);
    outline-offset: 2px;
}

/* Мелкий: применённые фильтры */
.chip--sm {
    padding: 10px 14px;
    font-size: 12.5px;
}

/* Серый без рамки: подсказки поиска */
.chip--soft {
    border-color: var(--vd-chip);
    background: var(--vd-chip);
}

/* Квадратный: размеры */
.chip--square {
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    border-radius: var(--vd-radius-m);
    font-size: 14px;
}

.chip--square.chip--sm {
    height: 44px;
    font-size: 13px;
}

/* Крестик снятия фильтра */
.chip__remove {
    font-size: 11px;
    opacity: .8;
}

.chip__count {
    font-weight: 400;
    opacity: .6;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0; /* бывает <fieldset> */
}

/* ========== 5. Радио-карточка, радио, чекбокс ========== */
/*
 * <label class="radio-card">
 *   <input class="radio-card__input" type="radio" name="delivery">
 *   <span class="radio-card__mark" aria-hidden="true"></span>
 *   <span class="radio-card__body"><span class="radio-card__title">…</span><span class="radio-card__text">…</span></span>
 * </label>
 */
.radio-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius);
    background: var(--vd-white);
    cursor: pointer;
    transition: border-color var(--vd-transition), box-shadow var(--vd-transition);
}

.radio-card:hover {
    border-color: var(--vd-line-strong);
}

/* Выбранная: рамка 1.5px без сдвига контента */
.radio-card.is-active,
.radio-card:has(.radio-card__input:checked) {
    border-color: var(--vd-ink);
    box-shadow: inset 0 0 0 .5px var(--vd-ink);
}

.radio-card.is-disabled,
.radio-card:has(.radio-card__input:disabled) {
    opacity: .5;
    cursor: not-allowed;
}

.radio-card:has(.radio-card__input:focus-visible) {
    outline: 2px solid var(--vd-accent);
    outline-offset: 2px;
}

.radio-card__input,
.checkbox__input,
.radio__input,
.switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Точка радио — общая для .radio-card и .radio */
.radio-card__mark,
.radio__mark {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--vd-control-line);
    border-radius: 50%;
    background: var(--vd-white);
    transition: border var(--vd-transition);
}

.radio-card.is-active .radio-card__mark,
.radio-card__input:checked + .radio-card__mark,
.radio__input:checked + .radio__mark {
    border: 6px solid var(--vd-ink);
}

.radio-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.radio-card__title {
    font: 600 var(--vd-fs-body) / 1.2 var(--vd-font-text);
}

.radio-card__text {
    font-size: 13px;
    line-height: 1.35;
    color: var(--vd-text-3);
}

.radio-card__aside {
    flex: none;
    font: 600 14px / 1.2 var(--vd-font-text);
}

.radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

/* Чекбокс и простое радио */
.checkbox,
.radio {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.checkbox__box {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--vd-line-strong);
    border-radius: 5px;
    background: var(--vd-white);
    transition: background-color var(--vd-transition), border-color var(--vd-transition);
}

/* Галочка */
.checkbox__box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2.5px;
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--vd-white);
    border-bottom: 2px solid var(--vd-white);
    transform: rotate(45deg);
    opacity: 0;
}

.checkbox__input:checked + .checkbox__box,
.checkbox.is-active .checkbox__box {
    background: var(--vd-ink);
    border-color: var(--vd-ink);
}

.checkbox__input:checked + .checkbox__box::after,
.checkbox.is-active .checkbox__box::after {
    opacity: 1;
}

.checkbox:hover .checkbox__box,
.radio:hover .radio__mark {
    border-color: var(--vd-ink);
}

.checkbox__input:focus-visible + .checkbox__box,
.radio__input:focus-visible + .radio__mark {
    outline: 2px solid var(--vd-accent);
    outline-offset: 2px;
}

.checkbox:has(.checkbox__input:disabled),
.radio:has(.radio__input:disabled) {
    color: var(--vd-text-5);
    cursor: not-allowed;
}

.checkbox__label {
    flex: 1;
    min-width: 0;
}

/* Количество справа (фильтры) */
.checkbox__count {
    font: 12px / 1 var(--vd-font-mono);
    color: var(--vd-text-4);
}

/* ========== 6. Переключатель ========== */
/*
 * <label class="switch">
 *   <span class="switch__label">Только со скидкой</span>
 *   <input class="switch__input" type="checkbox" role="switch">
 *   <span class="switch__track" aria-hidden="true"></span>
 * </label>
 */
.switch {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
}

.switch__track {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--vd-line-strong);
    transition: background-color var(--vd-transition);
}

.switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--vd-white);
    transition: transform var(--vd-transition);
}

.switch__input:checked + .switch__track {
    background: var(--vd-ink);
}

.switch__input:checked + .switch__track::after {
    transform: translateX(18px);
}

.switch__input:focus-visible + .switch__track {
    outline: 2px solid var(--vd-accent);
    outline-offset: 2px;
}

.switch:has(.switch__input:disabled) {
    color: var(--vd-text-5);
    cursor: not-allowed;
}

/* ========== 7. Степпер количества ========== */
/*
 * <div class="stepper" data-vd-stepper>
 *   <button class="stepper__btn" type="button" data-vd-step="-1" aria-label="Меньше">−</button>
 *   <input class="stepper__value" type="number" value="1" min="1" max="99" aria-label="Количество">
 *   <button class="stepper__btn" type="button" data-vd-step="1" aria-label="Больше">+</button>
 * </div>
 */
.stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-m);
    background: var(--vd-white);
    font: 600 14px / 1 var(--vd-font-text);
}

.stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: none;
    color: var(--vd-ink);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: color var(--vd-transition);
}

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

.stepper__btn[aria-disabled="true"],
.stepper__btn:disabled {
    color: var(--vd-decor);
    cursor: default;
}

.stepper__value {
    width: 32px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: center;
    color: var(--vd-ink);
    appearance: textfield;
    -moz-appearance: textfield;
}

.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.stepper__value:focus-visible {
    outline: none;
    box-shadow: inset 0 -1.5px 0 var(--vd-ink);
}

/* Компактный — мини-корзина */
.stepper--sm {
    border-radius: var(--vd-radius-s);
    font-size: 13px;
}

.stepper--sm .stepper__btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.stepper--sm .stepper__value {
    width: 22px;
}

/* ========== 8. Свотчи ========== */
/*
 * Цвет из справочника передаётся переменной: <button class="swatch" style="--swatch-color:#2b2d31">,
 * картинка цвета — <img class="swatch__img">. Выбор — .is-active или input:checked внутри.
 */
.swatch {
    position: relative;
    display: inline-block;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--swatch-color, var(--vd-surface-2));
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--vd-transition);
}

/* Тонкая обводка поверх цвета/фото — видна и у белого */
.swatch::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--vd-hairline);
    pointer-events: none;
    transition: box-shadow var(--vd-transition);
}

.swatch__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swatch:hover {
    box-shadow: 0 0 0 2px var(--vd-white), 0 0 0 3.5px var(--vd-line-strong);
}

.swatch.is-active,
.swatch:has(input:checked) {
    box-shadow: 0 0 0 2px var(--vd-white), 0 0 0 3.5px var(--vd-ink);
}

.swatch:has(input:focus-visible) {
    outline: 2px solid var(--vd-accent);
    outline-offset: 4px;
}

/* Нет в наличии — диагональ */
.swatch.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

.swatch.is-disabled::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -10%;
    z-index: 2;
    width: 1.5px;
    height: 120%;
    background: var(--vd-ink);
    transform: rotate(45deg);
}

.swatch--lg {
    width: 30px;
    height: 30px;
}

/* Точка в плитке товара — не кликается */
.swatch--dot {
    width: 12px;
    height: 12px;
    cursor: default;
}

.swatch--dot:hover {
    box-shadow: none;
}

/* Фото-карточка цвета 64×80 (карточка товара): рамка внутри */
.swatch--photo {
    width: 64px;
    height: 80px;
    border-radius: var(--vd-radius-s);
    background: var(--vd-placeholder);
}

.swatch--photo::before {
    box-shadow: inset 0 0 0 1px var(--vd-line);
}

.swatch--photo:hover,
.swatch--photo.is-active,
.swatch--photo:has(input:checked) {
    box-shadow: none;
}

.swatch--photo:hover::before {
    box-shadow: inset 0 0 0 1px var(--vd-ink);
}

.swatch--photo.is-active::before,
.swatch--photo:has(input:checked)::before {
    box-shadow: inset 0 0 0 2px var(--vd-ink);
}

.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.swatches--dots {
    gap: 6px;
}

/* ========== 9. Бейджи, статус, цена ========== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--vd-radius-xs);
    background: var(--vd-ink);
    color: var(--vd-white);
    font: 700 10.5px / 1 var(--vd-font-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--hit,
.badge--new {
    background: var(--vd-ink);
}

.badge--sale {
    background: var(--vd-accent);
}

/* Белый — на фото («Текущая коллекция») */
.badge--light {
    background: var(--vd-white);
    color: var(--vd-ink);
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Статус заказа: цветная точка + текст */
.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 14px / 1.2 var(--vd-font-text);
    color: var(--vd-ink);
}

.status::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status--accent {
    color: var(--vd-accent);
}

.status--muted {
    color: var(--vd-text-3);
}

/* Цена: текущая + старая */
.price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.price__current {
    font: 700 15.5px / 1 var(--vd-font-text);
    white-space: nowrap;
}

.price__old {
    font-size: 13px;
    line-height: 1;
    color: var(--vd-text-4);
    text-decoration: line-through;
    white-space: nowrap;
}

.price--lg .price__current {
    font-size: 30px;
}

.price--lg .price__old {
    font-size: 16px;
}

/* ========== 10. Модалка и дровер ========== */
/*
 * Разметку и поведение даёт ui.js: [data-vd-open="id"], [data-vd-close],
 * VerstaDesktop.ui.open(id) / close(id) / openHtml(html, {type}).
 * Закрытый слой скрыт атрибутом hidden; при открытии получает .is-open.
 */
.modal,
.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--vd-z-layer);
}

.modal[hidden],
.drawer[hidden] {
    display: none;
}

.modal__overlay,
.drawer__overlay {
    position: fixed;
    inset: 0;
    background: var(--vd-overlay);
    opacity: 0;
    transition: opacity var(--vd-transition);
}

.modal.is-open .modal__overlay,
.drawer.is-open .drawer__overlay {
    opacity: 1;
}

/* Закрывающийся слой ещё виден (анимация, до hidden), но клики пропускает на страницу */
.modal:not(.is-open),
.drawer:not(.is-open),
[data-vd-closing] {
    pointer-events: none;
}

/* Модалка по центру; высокая — прокручивается целиком */
.modal {
    display: flex;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal__dialog {
    position: relative;
    width: 1080px;
    max-width: 100%;
    margin: auto;
    border-radius: var(--vd-radius-l);
    background: var(--vd-white);
    box-shadow: var(--vd-shadow-modal);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity var(--vd-transition), transform var(--vd-transition);
}

.modal.is-open .modal__dialog {
    opacity: 1;
    transform: none;
}

.modal__dialog:focus {
    outline: none;
}

.modal--sm .modal__dialog {
    width: 480px;
}

.modal--md .modal__dialog {
    width: 760px;
}

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.modal__body {
    padding: 40px;
}

/* Контент со своей раскладкой (быстрый просмотр) */
.modal__body--flush {
    padding: 0;
}

.modal__title {
    margin-bottom: 20px;
    padding-right: 32px;
    font: 700 34px / 1.05 var(--vd-font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Дровер справа на всю высоту */
.drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 500px;
    max-width: 100%;
    background: var(--vd-white);
    box-shadow: var(--vd-shadow-modal);
    transform: translateX(100%);
    transition: transform var(--vd-transition);
}

.drawer.is-open .drawer__panel {
    transform: none;
}

.drawer__panel:focus {
    outline: none;
}

/* Слева — фильтры на узких экранах */
.drawer--left .drawer__panel {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

.drawer--wide .drawer__panel {
    width: 640px;
}

/* Обёртка AJAX-контента (openHtml): внутри те же head / body / foot */
.drawer__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* Слой уже открыт, а css/js из ответа ещё грузятся (openHtml / openUrl) — крутилка вместо пустоты */
.modal.is-loading .modal__body:empty,
.drawer.is-loading .drawer__content:empty {
    position: relative;
    min-height: 200px;
}

.modal.is-loading .modal__body:empty::after,
.drawer.is-loading .drawer__content:empty::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 2px solid var(--vd-line);
    border-top-color: var(--vd-ink);
    border-radius: 50%;
    animation: vd-spin .8s linear infinite;
}

@keyframes vd-spin {
    to {
        transform: rotate(360deg);
    }
}

.drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 30px 32px 20px;
}

.drawer__title {
    font: 700 24px / 1 var(--vd-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.drawer__title-note {
    font-weight: 500;
    color: var(--vd-text-4);
}

.drawer__close {
    margin: -8px -10px -8px 0;
}

/* Дровер без шапки — крестик в углу */
.drawer__panel > .drawer__close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    margin: 0;
}

.drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 32px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.drawer__foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
    padding: 24px 32px 30px;
    border-top: 1px solid var(--vd-divider);
}

/* Прокрутка страницы под открытым слоем (класс на <html> ставит ui.js) */
.is-scroll-locked,
.is-scroll-locked body {
    overflow: hidden;
}

.is-scroll-locked body {
    padding-right: var(--vd-scrollbar, 0px);
}

/*
 * Чужие виджеты, пока открыт слой (класс на <html> ставит ui.js):
 *  - кнопка Bitrix24 (чат / обратный звонок) висела бы поверх модалки и дровера — прячем;
 *  - куки-баннер dbogdanoff.cookie (z-index 9999 инлайном) — опускаем под подложку, после закрытия вернётся.
 * !important — чтобы перебить их собственные и инлайн-стили.
 */
.is-layer-open .b24-widget-button-wrapper {
    display: none !important;
    visibility: hidden !important;
}

.is-layer-open .legacy-cookie {
    z-index: calc(var(--vd-z-layer) - 1) !important;
}

/* ========== 11. Аккордеон ========== */
/*
 * <div class="accordion" data-vd-accordion>            (data-vd-accordion="single" — открыт один)
 *   <div class="accordion__item">
 *     <h3 class="accordion__heading">
 *       <button class="accordion__toggle" type="button" aria-expanded="false">Состав и уход
 *         <span class="accordion__icon" aria-hidden="true"></span></button>
 *     </h3>
 *     <div class="accordion__panel" hidden><div class="accordion__content">…</div></div>
 *   </div>
 * </div>
 */
.accordion {
    border-top: 1px solid var(--vd-divider);
}

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

.accordion__heading {
    margin: 0;
    font: inherit;
}

.accordion__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 0;
    border: 0;
    background: none;
    color: var(--vd-ink);
    font: 600 var(--vd-fs-body) / 1.3 var(--vd-font-text);
    text-align: left;
    cursor: pointer;
}

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

/* Плюс, превращающийся в минус */
.accordion__icon {
    position: relative;
    flex: none;
    width: 12px;
    height: 12px;
    color: var(--vd-decor);
}

.accordion__icon::before,
.accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    margin-top: -.75px;
    background: currentColor;
    transition: transform var(--vd-transition);
}

.accordion__icon::after {
    transform: rotate(90deg);
}

.accordion__toggle[aria-expanded="true"] .accordion__icon::after {
    transform: rotate(0deg);
}

.accordion__content {
    padding-bottom: 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--vd-text-2);
}

/* Крупный: FAQ */
.accordion--lg .accordion__toggle {
    padding: 22px 0;
    font-size: 17px;
}

.accordion--lg .accordion__content {
    padding-bottom: 22px;
    font-size: var(--vd-fs-body);
}

/* Капсом: блоки фильтров */
.accordion--caps .accordion__toggle {
    padding: 20px 0 14px;
    font-size: var(--vd-fs-caption);
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.accordion--caps .accordion__content {
    padding-bottom: 20px;
}

/* ========== 12. Трекер статуса и шаги чекаута ========== */
/*
 * <ol class="tracker">
 *   <li class="tracker__step is-done"><span class="tracker__line"><span class="tracker__dot"></span></span>
 *     <span class="tracker__label">Оплачен</span><span class="tracker__date">12.07</span></li>
 *   <li class="tracker__step is-current" aria-current="step">…</li>
 *   <li class="tracker__step">…</li>
 * </ol>
 */
.tracker {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tracker__step {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.tracker__line {
    display: flex;
    align-items: center;
}

/* Линия до следующего шага */
.tracker__step:not(:last-child) .tracker__line::after {
    content: '';
    flex: 1;
    height: 2px;
    margin: 0 10px;
    background: var(--vd-line);
}

.tracker__step.is-done .tracker__line::after {
    background: var(--vd-ink);
}

.tracker__dot {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--vd-white);
    box-shadow: inset 0 0 0 1.5px var(--vd-line-strong);
}

.tracker__step.is-done .tracker__dot {
    background: var(--vd-ink);
    box-shadow: none;
}

.tracker__step.is-current .tracker__dot {
    background: var(--vd-accent);
    box-shadow: none;
}

.tracker__label {
    padding-right: 12px;
    font: 600 14.5px / 1.2 var(--vd-font-text);
    color: var(--vd-text-4);
}

.tracker__step.is-done .tracker__label,
.tracker__step.is-current .tracker__label {
    color: var(--vd-ink);
}

.tracker__date {
    margin-top: -7px;
    padding-right: 12px;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--vd-text-4);
}

/*
 * <ol class="steps">
 *   <li class="steps__item is-done"><span class="steps__num">1</span><span class="steps__label">Контакты</span></li>
 *   <li class="steps__item is-current" aria-current="step">…</li>
 *   <li class="steps__item">…</li>
 * </ol>
 */
.steps {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps__item {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.steps__item:last-child {
    flex: none;
}

/* Соединительная линия */
.steps__item:not(:last-child)::after {
    content: '';
    flex: 1;
    min-width: 16px;
    height: 1px;
    margin: 0 6px;
    background: var(--vd-line);
}

.steps__num {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vd-white);
    box-shadow: inset 0 0 0 1px var(--vd-line);
    color: var(--vd-text-4);
    font: 700 12.5px / 1 var(--vd-font-text);
}

.steps__item.is-current .steps__num {
    background: var(--vd-accent);
    box-shadow: none;
    color: var(--vd-white);
}

/* Пройденный шаг: вместо цифры галочка */
.steps__item.is-done .steps__num {
    position: relative;
    background: var(--vd-ink);
    box-shadow: none;
    color: transparent;
}

.steps__item.is-done .steps__num::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 8px;
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--vd-white);
    border-bottom: 2px solid var(--vd-white);
    transform: rotate(45deg);
}

.steps__label {
    font: 600 13.5px / 1.2 var(--vd-font-text);
    color: var(--vd-text-4);
    white-space: nowrap;
}

.steps__item.is-done .steps__label,
.steps__item.is-current .steps__label {
    color: var(--vd-ink);
}

a.steps__link:hover .steps__label {
    color: var(--vd-accent);
}

.steps__link {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ========== 13. Крошки, пагинация, «Показать ещё» ========== */
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 12.5px / 1.4 var(--vd-font-text);
    color: var(--vd-text-3);
}

.breadcrumbs__item {
    display: flex;
    gap: 10px;
    min-width: 0;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: '/';
}

.breadcrumbs__current {
    color: var(--vd-ink);
}

/* Пагинация: квадраты 40×40, текущая страница чёрная */
.pager__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 600 13px / 1 var(--vd-font-text);
}

.pager__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: var(--vd-radius-s);
    color: var(--vd-ink);
    transition: background-color var(--vd-transition), color var(--vd-transition);
}

a.pager__link:hover {
    background: var(--vd-chip);
    color: var(--vd-ink);
}

.pager__link.is-current {
    background: var(--vd-ink);
    color: var(--vd-white);
}

.pager__link--arrow {
    color: var(--vd-text-3);
}

.pager__link--gap {
    min-width: 24px;
    padding: 0;
    color: var(--vd-text-4);
}

.pager__link.is-disabled {
    color: var(--vd-text-5);
}

.pager__link--text {
    padding: 0 14px;
    color: var(--vd-text-3);
}

/* «Показать ещё» с прогрессом */
.load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.load-more__count {
    font-size: 13px;
    line-height: 1;
    color: var(--vd-text-3);
}

.load-more__bar {
    width: 240px;
    max-width: 100%;
}

.load-more__btn {
    min-height: 52px;
    padding-inline: 40px;
    font-size: 14px;
}

/* Обёртка шаблона main.pagenavigation «vd»: «Показать ещё» над страницами */
.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.pagination:empty {
    display: none;
}

/* ========== 14. Пустое состояние (include/ui/empty-state.php) ========== */
.empty-state {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 440px;
    padding: clamp(28px, 3.33vw, 48px);
    border: 1px solid var(--vd-divider);
    border-radius: var(--vd-radius);
}

.empty-state--plain {
    min-height: 0;
    padding: 0;
    border: 0;
}

.empty-state__eyebrow {
    font: 11px / 1 var(--vd-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.empty-state__big {
    font: 700 var(--vd-fs-d2) / .8 var(--vd-font-display);
    color: var(--vd-divider);
}

.empty-state__title {
    font: 700 clamp(30px, 2.78vw, 48px) / .95 var(--vd-font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.empty-state__text {
    max-width: 460px;
    font-size: var(--vd-fs-body);
    line-height: 1.55;
    color: var(--vd-text-2);
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 6px;
}

.empty-state__actions .btn {
    min-height: 52px;
    padding-inline: 24px;
    font-size: 14px;
}

/* ========== 15. Заголовок секции: «01 · Хиты сезона  ·····  Все товары →» ========== */
.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 24px;
}

.section-head__main {
    display: flex;
    align-items: baseline;
    gap: 20px;
    min-width: 0;
}

.section-head__num {
    flex: none;
    font: 13px / 1 var(--vd-font-mono);
    color: var(--vd-text-3);
}

.section-head__title {
    font: 700 var(--vd-fs-h3) / 1 var(--vd-font-display);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* На тёмном фоне */
.section-head--inverse {
    color: var(--vd-white);
}

.section-head--inverse .section-head__num {
    color: var(--vd-on-dark-line);
}

.section-head--inverse .link-arrow {
    color: var(--vd-white);
}

/* ========== 16. Плейсхолдер фото, прогресс ========== */
.ph {
    display: block;
    width: 100%;
    border-radius: var(--vd-radius);
    background: var(--vd-placeholder);
}

.ph--3x4 { aspect-ratio: 3 / 4; }
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph--1x1 { aspect-ratio: 1 / 1; }
.ph--16x9 { aspect-ratio: 16 / 9; }

/* Нативный <progress>: «Показано 10 из 18», до бесплатной доставки */
.progress {
    display: block;
    width: 100%;
    height: 2px;
    border: 0;
    border-radius: 0;
    background: var(--vd-divider);
    color: var(--vd-ink);
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
}

.progress::-webkit-progress-bar {
    background: var(--vd-divider);
}

.progress::-webkit-progress-value {
    background: var(--vd-ink);
}

.progress::-moz-progress-bar {
    background: var(--vd-ink);
}

.progress--thick {
    height: 3px;
    border-radius: 2px;
}

/* ========== 17. Сетка плиток товаров ========== */
/*
 * Плитки bitrix:catalog.item «vd» в catalog.top «vd_tiles», catalog.section, поиске, избранном:
 *   <div class="product-grid [product-grid--3]" data-entity="items"> …плитки… </div>
 * 4 колонки на 1440, --3 — рядом с боковой колонкой (фильтры). Колонки резиновые (minmax(0, 1fr)),
 * на узких экранах — меньше колонок. Атрибут sizes для фото плитки — параметр VD_IMG_SIZES.
 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px var(--vd-gap);
}

.product-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ========== 18. Тост (VerstaDesktop.ui.toast) ========== */
/*
 * <div class="toast [toast--error|toast--success] [is-visible]" role="status" aria-live="polite">Текст</div>
 * Регион создаёт ui.js (один на страницу; при открытом слое — внутри его диалога). Внизу по центру,
 * поверх слоёв, клики пропускает. Скрытый — прозрачный и пустой (текст ui.js убирает после анимации).
 * Не display: none — live-регион должен быть в дереве доступности до появления текста.
 */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    z-index: calc(var(--vd-z-layer) + 10);
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: max-content;
    max-width: min(480px, calc(100vw - 32px));
    padding: 14px 20px;
    border-radius: var(--vd-radius);
    background: var(--vd-ink);
    box-shadow: var(--vd-shadow-pop);
    color: var(--vd-white);
    font: 500 var(--vd-fs-small) / 1.45 var(--vd-font-text);
    text-align: left;
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity var(--vd-transition), transform var(--vd-transition);
    pointer-events: none;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Маркер тона — точка перед текстом */
.toast--error::before,
.toast--success::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vd-accent);
    transform: translateY(-1px);
}

.toast--success::before {
    background: var(--vd-white);
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transform: translateX(-50%);
        transition: opacity var(--vd-transition);
    }
}

/* ========== Узкие экраны (планшеты получают десктоп-шаблон) ========== */
@media (max-width: 1024px) {
    .modal__body {
        padding: 32px 24px;
    }

    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 20px;
    }
}

@media (max-width: 767px) {
    .form-grid--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-grid,
    .product-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 12px;
    }

    .modal {
        padding: 12px;
    }

    .modal__title {
        font-size: 26px;
    }

    .drawer__head {
        padding: 22px 20px 16px;
    }

    .drawer__body {
        padding-inline: 20px;
    }

    .drawer__foot {
        padding: 20px;
    }

    /* У шагов оставляем подпись только текущему */
    .steps__item:not(.is-current) .steps__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .tracker__label {
        font-size: 13px;
    }

    .tracker__date {
        font-size: 11.5px;
    }

    .empty-state {
        min-height: 0;
    }
}