/**
 * Слой совместимости старой вёрстки с reset нового дизайна (css/index.css).
 *
 * Подключается через addString СРАЗУ после index.css (см. header.php), чтобы
 * универсальное правило box-sizing перебивало reset из index.css по порядку загрузки.
 * Удалить, когда старые блоки будут переведены на новый дизайн.
 */

/*
 * ГЛАВНОЕ (из-за этого «разъезжались» блоки).
 *
 * Старый reset.css задавал *,*::before,*::after{box-sizing:border-box} — все элементы
 * явно border-box. Новый index.css заменил это на html{border-box}+*{box-sizing:inherit}.
 * Из-за inherit дети намеренных content-box-обёрток (напр. .region-section-products-left/
 * right) сами становятся content-box, и .section-item{width:16.66%;padding:20px;border:1px}
 * выходит за пределы колонки → вся сетка товаров разъезжается.
 *
 * Возвращаем глобальный border-box. Универсальный * (специфичность 0,0,0) перебивает
 * index.css *{box-sizing:inherit} по порядку (грузимся последними), но НЕ трогает
 * намеренные content-box (hr, ползунок цены, .region-section-products-left/right) —
 * у них специфичность выше, чем у *, поэтому они сохраняют content-box, как в старом дизайне.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- Точечно старому блоку каталога (main_section) — как выглядело раньше --- */

/* index.css: html/body{font-size:10px} + *{font-size:inherit} — возвращаем базу 16px.
   Влияет на элементы без явного font-size, напр. .add-to-cart_btn («Купить»). */
.region-section {
    font-size: 16px;
    font-family: 'ALS Sector';
}

/* index.css h2{color:#7B7B7B} делает заголовок секции серым на чёрном фоне; старый — белый. */
.region-section h2 {
    color: #fff;
}

/* index.css a:hover{text-decoration:underline} — убираем подчёркивание на карточках товара. */
.region-section a:hover {
    text-decoration: none;
}


/* ═══ КАТАЛОГ, МОБИЛЬНАЯ ВЕРСИЯ ═══════════════════════════════════
   Плитка товаров упирается в красную рамку страницы, фото — в серую
   обводку карточки, шарики пролистывания заменены на полоску-шкалу.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Плитка вплотную к красной рамке. Отступ в 20px даёт <main>,
       ещё 1px — сам контейнер плитки; гасим оба. */
    .catalog-section-fix-size { margin-left: -20px; margin-right: -20px; }
    .catalog-section-products { padding-left: 0; padding-right: 0; }

    /* Название товара: 18px → 16px → 14px */
    /* padding, а не margin: соседнее margin-bottom: 5px у цены
       схлопывается с margin-top и сдвига не даёт. */
    .section-item-name { font-size: 14px; padding-top: 3px; }
    /* Цена в правом верхнем углу: было 18px */
    .section-item-price,
    .section-item-price-new,
    .section-item-price-old { font-size: 14px; }

    /* Артикул: было 14px */
    .section-item-vendor-code,
    .section-item-vendor-code-text,
    .section-item-vendor-code-value { font-size: 12px; }

    /* ВРАЩЕНИЕ ПАНДЫ ВРЕМЕННО ВЫКЛЮЧЕНО НА МОБИЛЬНОМ.
       Чтобы вернуть — удалить это правило. Кадры при этом не качаются:
       скрипт вращения сам пропускает скрытый блок (см. template.php). */
    .spin { display: none; }

    /* Крошки: текст — 5px — шарик — 5px — текст.
       Контейнер был flex с gap: 20px, плюс у красного шарика (::before,
       6px) стояли поля по 11px — от текста до шарика выходил 31px. */
    .bredcrumb-wrap .bredcrumb { gap: 0; }
    .bredcrumb-wrap .bredcrumb li::before { margin-left: 5px; margin-right: 5px; }

    /* Крошки ближе к логотипу.
       Между ними висел .header-logo-label — отдельная картинка-подпись
       ./upload/logo-label.svg, которая на стенде отдаёт 404 и занимает
       40px пустого места. Плюс после смены логотипа на десктопный она
       дублирует подпись, уже входящую в сам logo.svg. Прячем её на
       мобильном и подтягиваем крошки: зазор от логотипа — 10px. */
    .header-logo-label { display: none; }
    .bredcrumb-wrap { margin-top: -5px; }

    /* Правая группа иконок в шапке: убираем отрицательный margin,
       из-за которого корзина вылезала за поле и стояла в 4px от
       красной рамки. Теперь она отбита на те же 12px, что и бургер
       слева, и на столько же отбито «избранное» от корзины. */
    .header-main .header-action { margin-right: 0; gap: 12px; }

    /* Зазор под фотографией (был нулевой) */
    .card-slider-wrapper { margin-bottom: 7px; }

    /* Фото во всю ширину карточки */
    .card-slider-mobile .card-slider__item,
    .card-slider-mobile .card-slider__item img { width: 100%; }
    .card-slider-mobile .card-slider__item img { display: block; height: auto; }

    /* Вместо шариков — тонкая полупрозрачная шкала: отрезков столько,
       сколько фотографий у товара, активный отрезок светлее. */
    .card-slider-mobile .owl-dots {
        display: flex;           /* в потоке, под фотографией */
        gap: 2px;
        margin: 3px 0 0;         /* отступ от нижнего края фото */
        padding: 0 10px;
    }
    .card-slider-mobile .owl-dot {
        flex: 1 1 0;
        min-width: 0;
        padding: 0;
        margin: 0;
        border: 0;
        background: none;
    }
    .card-slider-mobile .owl-dot span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: rgba(255, 255, 255, 0.12) !important;
        transition: background 0.25s ease;
    }
    .card-slider-mobile .owl-dot.active span {
        background: rgba(255, 255, 255, 0.45) !important;
    }
}


/* ═══ СТРАНИЦЫ РАЗДЕЛОВ МЕНЮ (Для кого / Материал / Стили / Бренды) ═══
   Наполнение взято из вкладок десктопного меню каталога, поэтому вёрстка
   там рассчитана на широкую раскладку. Здесь — адаптация под узкий экран.
   ═══════════════════════════════════════════════════════════════════════ */
.menu-page { padding: 24px 0 60px; }
.menu-page .info-cards__sect:not(:first-child) { margin-top: 36px; }

@media (max-width: 767px) {
    .menu-page { padding: 16px 0 40px; }

    /* «Для кого»: было четыре колонки, на телефоне две */
    .menu-page .info-cards__list { gap: 20px 10px; }
    .menu-page .info-cards .info-card { width: calc(50% - 5px); }
    .menu-page .info-cards__title { font-size: 1.8rem; margin-bottom: 14px; }

    /* «Материал» и «Стили»: кружки по 150px не встают по два в ряд */
    .menu-page .kaleidoscope-popup { gap: 18px 10px; }
    .menu-page .kaleidoscope-popup-item { width: calc(50% - 5px); }
    .menu-page .kaleidoscope-popup-item__img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-bottom: 10px;
    }
    .menu-page .kaleidoscope-popup-item__label { max-width: none; text-align: center; }

    /* «Бренды»: строка «картинка + описание» разворачивается в столбец */
    .menu-page .brand-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 22px 0;
    }
    .menu-page .brand-item__img img { max-width: 160px; height: auto; }
    .menu-page .brand-item__links { display: flex; gap: 18px; flex-wrap: wrap; }
}

/* «Какой праздник»: плитка праздников на узком экране — в две колонки */
@media (max-width: 767px) {
    .menu-page .event-list { display: flex; flex-wrap: wrap; gap: 20px 10px; }
    .menu-page .event-item-topmenu { width: calc(50% - 5px); }
    .menu-page .event-item__img img { width: 100%; height: auto; display: block; }
}


/* ═══ БУРГЕР: нажатие на ссылку ═══════════════════════════════════════
   На тачскрине :hover залипает после касания — ссылка оставалась красной
   и подчёркнутой до следующего тапа. Отключаем наведение там, где мыши
   нет, и даём короткий отклик только на время самого нажатия.
   Класс .active (текущий раздел) при этом сохраняется — он объявлен
   ниже правил :hover, поэтому перебивает их.
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
    .mobile-menu__link:hover,
    .mobile-menu-add__link:hover { color: #B4B4B4; }

    .mobile-menu__sub-link:hover .mobile-menu__sub-text,
    .mobile-menu__sub-link:hover .mobile-menu__sub-icon .icon { color: #fff; }

    /* текущий раздел — оставляем фирменный красный */
    .mobile-menu__item.active .mobile-menu__link { color: var(--color-primary); }
    .mobile-menu__sub-item.active .mobile-menu__sub-text,
    .mobile-menu__sub-item.active .mobile-menu__sub-icon .icon { color: var(--color-primary); }

    /* подчёркивание от базовых стилей ссылок */
    .mobile-sidebar a,
    .mobile-sidebar a:hover,
    .mobile-sidebar a:focus,
    .mobile-sidebar a:active { text-decoration: none; }

    /* отклик на нажатие: лёгкое затухание, пока палец на ссылке */
    .mobile-menu__link:active,
    .mobile-menu-add__link:active,
    .mobile-menu__sub-link:active .mobile-menu__sub-text,
    .mobile-menu__sub-link:active .mobile-menu__sub-icon .icon { opacity: 0.55; }
}


/* ═══ ОПИСАНИЕ ТОВАРА: убираем остатки кнопки «Читать полностью» ═══════
   Сама кнопка скрыта (описание показываем целиком), но от неё оставались
   два следа: gap: 30px у контейнера и псевдоэлемент ::after — квадратик
   6×6 с рамкой 2px, повёрнутый углом вниз, то есть стрелка раскрытия.
   Заодно гасим любой разделитель перед блоком свойств.
   ═══════════════════════════════════════════════════════════════════════ */
.catalod-detail__desc .more-text { gap: 0; border-bottom: 0; }
.catalod-detail__desc .more-text::before,
.catalod-detail__desc .more-text::after { display: none; }
.catalog-detail-props::before,
.catalog-detail-props::after { display: none; }
.catalog-detail-props { border-top: 0; }


/* ═══ МОБИЛЬНЫЙ ПОРЯДОК БЛОКОВ В КАРТОЧКЕ ═════════════════════════════
   Видео-обзор — сразу после описания, комплектация — ниже размеров.
   Порядок задан явно, одним списком: раньше он был размазан по трём
   местам в index.css, и менять его вслепую было легко сломать.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .catalod-detail__main .catalod-detail__desc      { order: 8; }   /* описание */
    /* видео лежит в колонке с фотографиями (.catalod-detail__photo),
       она display: contents — поэтому адресуем от общего контейнера */
    .catalod-detail .video-review,
    .catalod-detail .wr_video_container              { order: 9; }   /* видео-обзор */
    .catalod-detail__main .catalog-detail-props      { order: 11; }  /* материал, размеры, вес */
    .catalod-detail__main .kit                       { order: 12; }  /* комплектация */
    /* Блок наличия разрезан на две половины: «Изделие в наличии!» стоит
       сразу под кнопками (они order: 5), а «Нужна консультация? Звоните!»
       уехал между описанием и материалом. Чтобы половинки можно было
       развести по потоку, сам .stock-note распущен через display: contents
       (см. блок ниже) — фона и рамки у него нет, терять нечего.
       Яндекс Pay из index.css съезжает на 7. */
    .catalod-detail__main .stock-note__left          { order: 10; }  /* в наличии: под описанием, перед телефоном */
    /* 02.11.2026 — строка «Оплата частями». Своего order у неё нет, то
       есть действовал бы 0, и блок уехал бы в начало колонки, под фото.
       Место по макету Влада — между ценой (3) и кнопками (5). */
    .catalod-detail__main .rv-parts                  { order: 4; }   /* оплата частями */
    .catalod-detail__main .catalod-detail__split     { order: 7; }   /* Яндекс Pay */
    /* описание — order: 8, следом видео — order: 9 (выше) */
    .catalod-detail__main .stock-note__call          { order: 10; }  /* телефон консультации */
    /* 16.10.2026 — «Подарочная упаковка». Своего order у неё не было,
       то есть действовал order: 0 — блок уезжал в самое начало потока и
       вставал сразу под фотографией товара, хотя в шаблоне он идёт сразу
       за «Комплектацией». Ставим ту же 12, что у .kit: при равном order
       порядок решает разметка, а там комплектация выше. Итог — упаковка
       сразу под комплектацией и перед блоком бренда (13). */
    .catalod-detail__main .rv-pack                   { order: 12; }  /* подарочная упаковка */
    .catalod-detail__main .asfour-scroll             { order: 13; }  /* блок бренда */
    .catalod-detail__main .catalog-detail-info       { order: 14; }
    .catalod-detail__main .element-detail-similar    { order: 15; }
    .catalod-detail__main .catalog-other             { order: 16; }
    .catalod-detail__main .catalog-deatail-tags      { order: 17; }
}


/* ═══ КАРТОЧКА НА МОБИЛЬНОМ: кнопки, свойства, размеры ════════════════ */
@media (max-width: 767px) {
    /* «Добавить в избранное» — только сердечко, справа от «Быстрой покупки».
       column-gap: 10px, потому что к нему прибавляется ещё 10px от самих
       элементов — в сумме на экране получается ровно 20px, как отступ
       кнопки «В корзину» от красной рамки слева. */
    .catalod-detail__action { column-gap: 10px; }

    /* Кнопки ближе к «долями»: в index.css у блока кнопок margin-top: 30px,
       а у «долями» — 15px. Выравниваем, чтобы отступ цена → долями и
       долями → кнопки был одинаковым, 15px. */
    .catalod-detail__action { margin-top: 15px; }
    .catalod-detail__action .btn-wish__label { display: none; }

    /* «Материал: Хрусталь» — кеглем описания товара */
    .catalod-detail__main .catalog-detail-props { font-size: 16px; }

    /* Слово «Вес:» добавляется стилем (content: "Вес: ") в index.css,
       в разметке его нет. Убираем — остаётся иконка гири и «1700 гр». */
    .catalog-detail-dimensions__weight .catalog-detail-dimensions__val::before {
        content: none;
    }

    /* Длина / ширина / высота + гиря — одной строкой.
       Базовые, самые плотные значения: на узких экранах иначе переносится. */
    .catalog-detail-dimensions { gap: 10px 6px; }
    .catalog-detail-dimensions__x { width: 16px; min-width: 0; }
    .catalog-detail-dimensions__weight { flex-basis: auto; gap: 6px; }

    /* Точка после «гр» */
    .catalog-detail-dimensions__weight .catalog-detail-dimensions__val::after {
        content: ".";
    }
}


/* ═══ РАЗМЕРЫ И ВЕС: зазоры по ширине экрана ══════════════════════════
   Строка «длина × ширина × высота + гиря» помещается впритык, поэтому
   зазор растёт ступенями: на узких телефонах он минимальный, иначе гиря
   срывается на вторую строку. Пределы проверены замером:
     393px (iPhone 14/15/16) — предел зазора 7px, берём 6
     412px (типовой Android) — помещается 10px
     430px (iPhone Pro Max)  — помещается 12px, при 14 уже переносится
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 400px) and (max-width: 767px) {
    .catalog-detail-dimensions { gap: 10px 10px; }
}
@media (min-width: 425px) and (max-width: 767px) {
    .catalog-detail-dimensions { gap: 10px 12px; }
    .catalog-detail-dimensions__x { width: 18px; }
}


/* Подзаголовок «Комплектации» — по центру и на 2px мельче (было 16px),
   но ТОЛЬКО на мобильном. Заголовки карточки центрирует правило
   «.catalod-detail__main h1, … h2» из index.css, и оно живёт в медиа
   до 767px. Раньше это правило стояло без медиазапроса: на десктопе
   заголовок «Комплектация» слева, а подпись под ним — по центру. */
@media (max-width: 767px) {
    .kit__subtitle {
        text-align: center;
        font-size: 14px;
    }
}


/* ═══ БЛОК НАЛИЧИЯ НА МОБИЛЬНОМ: ДВЕ ПОЛОВИНЫ ПОРОЗНЬ ═════════════════
   .stock-note — просто flex-обёртка без фона и рамки, поэтому на узком
   экране распускаем её через display: contents: «Изделие в наличии!»
   и «Нужна консультация? Звоните!» попадают в общий поток карточки и
   расходятся по своим order (6 и 9). Отступы, которые раньше давали
   margin и gap самой обёртки, возвращаем половинам поимённо.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .stock-note { display: contents; }
    /* Опущен на 10px относительно своего места. Именно position, а не
       margin: сдвиг в потоке утянул бы за собой всё, что ниже, — а тут
       соседи остаются, и просвет до следующего блока сам сокращается
       на те же 10px. */
    .stock-note__left { margin-top: 24px; position: relative; top: 10px; }
    .stock-note__call { margin-top: 20px; margin-left: 0; }
}


/* ═══ БЛОК ASFOUR НА МОБИЛЬНОМ: ЛОГОТИП И ПОДПИСИ ЦИФР ════════════════
   Логотип Asfour крупнее на 70%: 18.9cqw из index.css → 32.13cqw
   (cqw здесь — 1% ширины .asfour-box, см. index.css).
   Подписи под «№1», «6500» и «50+» — тем же кеглем, что «Официальный
   дилер в России»: 11.2px вместо 14px.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .asfour__logo     { width: 32.13cqw; }
    .asfour__stat-txt { font-size: 11.2px; }
}


/* ═══ БЛОК ASFOUR: РОЯЛЬ КРУПНЕЕ, «6500» В ТРИ СТРОКИ ════════════════
   Рояль на мобильном на 30% больше — но именно нарисованным размером,
   через transform: поток от transform не меняется, поэтому цифры,
   каллиграфия и текст вокруг остаются ровно там же, где стояли.
   Начало координат сдвинуто к центру самого рояля (52.48% ширины
   кадра, см. .asfour__hero-img в index.css), иначе он «уплыл» бы вбок.
   Картинка на чёрном фоне, а все подписи лежат выше её по слоям —
   разрастаясь, она ничего не закрывает.

   Подпись под «6500»: на мобильном «сотрудников / работает / в Asfour»
   тремя строками, без «Crystal». На десктопе — как было, в две строки:
   перенос скрыт, «Crystal» на месте.
   ═══════════════════════════════════════════════════════════════════════ */
.asfour__br-m { display: none; }

@media (max-width: 767px) {
    .asfour__hero-img { transform: scale(1.3); transform-origin: 52.48% 50%; }
    .asfour__br-m     { display: block; }
    .asfour__crystal  { display: none; }
}


/* ═══ БЛОК ASFOUR НА МОБИЛЬНОМ: ШАПКА НАД РОЯЛЕМ ═════════════════════
   Логотип с подписью дилера больше не врезан в рояль слева: он стоит
   по центру над ним, а между ним и роялем идёт первая половина текста
   (второй половине оставлено прежнее место — под «Безусловным лидером»).
   Обводка блока на узком экране убрана.

   Чтобы половину текста можно было поднять наверх, не трогая порядок
   в разметке (десктоп остаётся как был), .asfour на мобильном
   распускается в flex-колонку, и порядок задаётся явным списком —
   тем же приёмом, что и в самой карточке товара выше.

   Абзацев с классом .asfour__text три, и лежат они в разных местах
   блока, поэтому каждому свой селектор по соседу, а не общий.
   ═══════════════════════════════════════════════════════════════════════ */
.asfour__text_lead + .asfour__text { margin-top: 0; }   /* десктоп: разрыв абзаца без лишнего воздуха */

@media (max-width: 767px) {
    .asfour { border: 0; display: flex; flex-direction: column; }

    .asfour__logo   { order: 1; margin: 0 auto; }
    .asfour__dealer { order: 2; margin: 10px auto 0; text-align: center; }

    /* первая половина текста — между логотипом и роялем;
       отрицательный заход на «Безусловного лидера» здесь не нужен */
    /* .asfour перед классом — чтобы перебить «.asfour__lider + .asfour__text»
       из index.css: в разметке lead стоит сразу за «Безусловным лидером»
       и получал от него отрицательный отступ, наезжая на подпись дилера. */
    .asfour .asfour__text_lead { order: 3; margin-top: 20px; }

    /* Рояль больше не врезается в шапку. Отступ 40px, а не 0: рояль
       увеличен через scale(1.3) и рисуется примерно на 38px выше своей
       коробки — вплотную он накрыл бы последнюю строку текста. */
    .asfour__hero { order: 4; margin-top: 40px; }

    .asfour__lider { order: 5; }

    /* Абзацев .asfour__text в блоке три, и каждому нужно своё место.
       Забытый order здесь не «оставляет как было», а равен нулю —
       то есть уносит блок в самое начало, поэтому перечислены все.
       Общее правило для всех, что идут после lead, — и следом две
       точные поправки; порядок строк важен, специфичность одинаковая. */
    .asfour__text_lead ~ .asfour__text { order: 7; }                       /* «Русь Великая — официальный дилер» */
    .asfour__text_lead + .asfour__text { order: 6; margin-top: -3.4cqw; }  /* заход на надпись — как у прежнего первого абзаца */
    .asfour__row + .asfour__text       { order: 10; }                      /* «крупнейший в мире производитель» */

    .asfour__btns    { order: 8; }
    .asfour__row     { order: 9; }
    .asfour__quality { order: 11; }
    .asfour__certs   { order: 12; }
    .asfour__iec     { order: 13; }
}


/* ═══ КРУГИ ЗА ЦИФРАМИ В БЛОКЕ ASFOUR ════════════════════════════════
   Цвет взят из логотипа Asfour (единственная заливка в logo.svg —
   #a48a7b), прозрачность 50%. Диаметры разные: 70px за «№1», 85px
   за «6500». Круг центрирован за цифрой.

   z-index: 0 у самой цифры обязателен: он заводит собственный слой,
   иначе круг с z-index: -1 провалился бы под чёрный фон блока.
   inline-block — чтобы ширина была по самой цифре, а не по всей
   колонке: иначе круг встаёт по центру колонки и уезжает вбок.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .asfour__stat_one .asfour__stat-num,
    .asfour__stat_staff .asfour__stat-num {
        position: relative;
        z-index: 0;
        display: inline-block;
    }

    .asfour__stat_one .asfour__stat-num::before,
    .asfour__stat_staff .asfour__stat-num::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        background: #a48a7b;
        opacity: 0.5;
        z-index: -1;
    }

    /* за «№1» */
    .asfour__stat_one .asfour__stat-num::before {
        width: 70px;
        height: 70px;
        margin: -35px 0 0 -35px;
    }

    /* за «6500» */
    .asfour__stat_staff .asfour__stat-num::before {
        width: 85px;
        height: 85px;
        margin: -42.5px 0 0 -42.5px;
    }
}


/* ═══ «ДОЛЯМИ» НА МОБИЛЬНОМ: ВСЁ НА 30% МЕЛЬЧЕ ═══════════════════════
   Блок спорил по весу с кнопками «В корзину» и «Быстрая покупка»,
   стоящими сразу под ним. Каждый размер из index.css умножен на 0.7:
   плашка 34→23.8px, её поля 12→8.4px, логотип 85×13→59.5×9.1px,
   текст 16→11.2px, иконка-вопрос 16→11.2px, зазоры 12→8.4px.
   Масштабировать через transform нельзя: он ужал бы картинку,
   но оставил на месте исходную дыру в потоке.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .catalod-detail .doljami { gap: 8.4px; }

    .doljami__logo {
        height: 2.38rem;
        padding: 0 8.4px;
        border-radius: 4.2px;
    }
    .doljami__logo svg {
        width: 59.5px;
        height: 9.1px;
    }

    .doljami__text { font-size: 1.12rem; }

    .doljami__icon .icon {
        width: 11.2px;
        height: 11.2px;
    }
}


/* ═══ СЧЁТЧИКИ В ШАПКЕ: ЦИФРЫ ПО ЦЕНТРУ КРУЖКА ══════════════════════
   Кружок и так центрирует содержимое флексом, но цифры всё равно сидят
   выше середины: флекс ставит по центру строку целиком, а в ней под
   базовой линией зарезервировано место под нижние выносные элементы
   (у «р», «у», «д»), которых у цифр нет. Пустой «подвал» строки тянет
   цифры вверх примерно на 1px при кегле 12px.

   Компенсируем полем сверху. При border-box кружок не растёт: поле
   съедает высоту содержимого, и центрирование опускает цифры на
   половину поля. 0.25em — то же значение, что и в пагинации каталога,
   выбрано владельцем. Значение в em, поэтому поправка держится
   и если поменяется кегль.
   ═══════════════════════════════════════════════════════════════════════ */
.header-action__count { padding-top: 0.25em; }


/* ═══ ПАГИНАЦИЯ КАТАЛОГА: ЦИФРЫ ПО ЦЕНТРУ КРУЖКА ════════════════════
   Та же беда, что и со счётчиками в шапке, плюс своя: в gstyle.css
   у кружка 42×42 стоит line-height: 33px. Флекс центрирует строку
   целиком, а в строке под базовой линией пустует место под хвосты
   букв, которых у цифр нет, — цифры всплывают примерно на 2.7px.

   line-height: 1 убирает лишнюю высоту строки, поле сверху опускает
   цифру на половину своей величины. 0.25em выбрано владельцем
   по сравнению вариантов на семикратном увеличении; столько же
   стоит у счётчиков в шапке.

   Правило повторено для .active — в gstyle.css у активной страницы
   отдельный набор свойств с той же line-height.
   ═══════════════════════════════════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span,
.pagination > .active > a,
.pagination > .active > span {
    line-height: 1;
    padding-top: 0.25em;
}


/* ═══ АРТИКУЛ НА СВЕТЛОЙ КАРТОЧКЕ ════════════════════════════════════
   На мобильном артикул набран поверх тонкой линии, которая идёт через
   всю ширину (::before), а сам текст закрыт подложкой, чтобы линия
   не просвечивала под буквами. Подложка в index.css задана чёрной —
   на тёмной карточке она сливается с фоном и не видна, а на светлой
   (.bg-white, фон #fff) превращается в чёрную плашку поверх артикула.
   Задаём ей цвет фона светлой карточки.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .bg-white .catalod-detail__article span { background: #fff; }
}


/* ═══ ЗАТУХАНИЕ ХЛЕБНЫХ КРОШЕК НА СВЕТЛОЙ КАРТОЧКЕ ═══════════════════
   Строка крошек прокручивается вбок, и у правого края она уходит
   в градиент — чтобы обрыв не выглядел случайным. В index.css градиент
   задан чёрным: на тёмной карточке он сливается с фоном, а на светлой
   (.bg-white, фон #fff) остаётся тёмной плашкой поверх белого.
   Здесь он инвертирован.

   Прозрачный конец записан как rgba(255,255,255,0), а не transparent:
   ключевое слово transparent — это чёрный с нулевой прозрачностью,
   и на переходе появляется серая грязь.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .bg-white .bredcrumb-fade {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    }
}


/* ═══ КНОПКА «ЗАКАЗАТЬ ЗВОНОК» В МОБИЛЬНОМ ФУТЕРЕ ════════════════════
   В gstyle.css есть правило «.footer a» — оно специфичнее, чем
   «.btn_white» из index.css, и навязывает кнопке color: white и
   display: inline. Отсюда две беды разом: белый текст на белом фоне
   (надписи попросту не видно) и потерянная высота — у строчного
   элемента height не работает, кнопка схлопывается до высоты строки,
   19px вместо 52.

   Возвращаем кнопке её собственные свойства из index.css. Селектор
   с двумя классами, чтобы наверняка перебить «.footer a» и не задеть
   остальные ссылки футера — у них оформление своё.
   ═══════════════════════════════════════════════════════════════════════ */
.footer-mobile__callback .btn {
    display: inline-flex;
    height: 5.2rem;
    font-size: 1.6rem;
    color: var(--color-primary);
}


/* ═══ БЛОК НАЛИЧИЯ НА СВЕТЛОЙ КАРТОЧКЕ ═══════════════════════════════
   «Статуэтка в наличии!» и строки под ним в index.css заданы белым —
   на тёмной карточке так и задумано, а на светлой (.bg-white, фон #fff)
   текст пропадал. Красим в тот же серый, которым набрано описание
   товара, — #7B7B7B.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-white .stock-note__title,
.bg-white .stock-note__line {
    color: #000;
}

/* ==========================================================================
   Фильтр-строка над каталогом (rv-fb)
   Пришла на смену колонке фильтров слева. Колонка занимала 250px и на
   длинных списках верстала значения в две колонки по три строки каждое;
   на мобильном был отдельный список радиокнопок, где два значения одного
   свойства выбрать было нельзя. Теперь свойства — кнопки в ряд над
   плиткой, плитка забрала освободившуюся ширину.
   ========================================================================== */

/* строка фильтра — отдельный ряд внутри flex-контейнера каталога.
   Класс .catalog-section есть и на других страницах, поэтому перенос
   строк включаем только внутри обёртки каталога. */
.catalog-section-fix-size .catalog-section { flex-wrap: wrap; }
.rv-fb { flex: 0 0 100%; width: 100%; margin: 0 0 18px; }

.rv-fb__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* ── общая форма кнопки ─────────────────────────────────────────────── */
.rv-fb__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 6px 0 18px;
    border: 1px solid #555;
    border-radius: 20px;
    background: transparent;
    transition: border-color .15s ease, background-color .15s ease;
}
.rv-fb__item:hover { border-color: #8d8d8d; }

.rv-fb__label {
    font-size: 15px;
    line-height: 1;
    color: #9b9b9b;
    white-space: nowrap;
    transition: color .15s ease;
}

/* ── «Стоимость»: два кружка-переключателя сортировки ───────────────── */
.rv-fb__sort { padding-right: 5px; }
.rv-fb__sort .rv-fb__label { margin-right: 10px; }

.rv-fb__sortbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    border: 1px solid #555;
    border-radius: 50%;
    color: #9b9b9b;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rv-fb__sortbtn svg { width: 16px; height: 16px; display: block; }
.rv-fb__sortbtn:hover { border-color: #8d8d8d; color: #d6d6d6; }
.rv-fb__sortbtn.is-on {
    background: #4a7e67;
    border-color: #4a7e67;
    color: #fff;
}
.rv-fb__sortbtn.is-on:hover { color: #fff; }

/* подпись только для скринридеров */
.rv-fb__sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ── выпадающие свойства ────────────────────────────────────────────── */
.rv-fb__drop { padding: 0; }
.rv-fb__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px 0 18px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font: inherit;
}
.rv-fb__chev {
    width: 10px;
    height: 10px;
    border-right: 1.6px solid #9b9b9b;
    border-bottom: 1.6px solid #9b9b9b;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease, border-color .15s ease;
}
.rv-fb__drop.is-open .rv-fb__chev { transform: rotate(-135deg) translate(-3px, -3px); }

/* выбранное свойство горит зелёным */
.rv-fb__item.is-on {
    border-color: #4a7e67;
    background: #4a7e67;
}
.rv-fb__item.is-on .rv-fb__label { color: #fff; }
.rv-fb__item.is-on .rv-fb__chev { border-color: #fff; }
.rv-fb__sort.is-on { background: transparent; border-color: #555; }
.rv-fb__sort.is-on .rv-fb__label { color: #9b9b9b; }

/* ── панель со значениями ───────────────────────────────────────────── */
.rv-fb__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 240px;
    max-width: 340px;
    padding: 8px;
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    background: #141414;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
.rv-fb__panel_right { left: auto; right: 0; }

.rv-fb__panel-head { display: none; }

.rv-fb__search {
    width: 100%;
    height: 34px;
    margin-bottom: 6px;
    padding: 0 12px;
    border: 1px solid #3a3a3a;
    border-radius: 17px;
    background: #000;
    color: #e6e6e6;
    font-size: 14px;
}
.rv-fb__search::placeholder { color: #6f6f6f; }

.rv-fb__list {
    max-height: 320px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}
.rv-fb__opt > a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    color: #cfcfcf;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
}
.rv-fb__opt > a:hover { background: #222; color: #fff; }
.rv-fb__opt-cnt { flex: 0 0 auto; color: #6f6f6f; font-size: 13px; }
.rv-fb__opt.is-checked > a { color: #6fb392; }
.rv-fb__opt.is-checked > a::after {
    content: '×';
    margin-left: 4px;
    color: #6fb392;
    font-size: 18px;
    line-height: 1;
}
.rv-fb__empty { margin: 0; padding: 10px 12px; color: #6f6f6f; font-size: 14px; }

/* ── сброс ──────────────────────────────────────────────────────────── */
.rv-fb__reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    color: #c0392b;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}
.rv-fb__reset:hover { color: #e05446; text-decoration: none; }
.rv-fb__x {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}
.rv-fb__x::before,
.rv-fb__x::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    width: 14px;
    height: 1.6px;
    background: currentColor;
}
.rv-fb__x::before { transform: rotate(45deg); }
.rv-fb__x::after { transform: rotate(-45deg); }

/* ── старый фильтр: колонка слева и мобильная форма больше не нужны ─── */
.catalog-section-header .filter-line,
.catalog-section .mobile-filters { display: none !important; }

/* ── светлая тема каталога ──────────────────────────────────────────── */
.white .rv-fb__item,
.white .rv-fb__sortbtn { border-color: #cfcfcf; }
.white .rv-fb__label,
.white .rv-fb__sortbtn { color: #777; }
.white .rv-fb__chev { border-color: #777; }
.white .rv-fb__item.is-on .rv-fb__label,
.white .rv-fb__item.is-on .rv-fb__chev { color: #fff; border-color: #fff; }
.white .rv-fb__panel { background: #fff; border-color: #e0e0e0; box-shadow: 0 12px 34px rgba(0, 0, 0, .14); }
.white .rv-fb__opt > a { color: #333; }
.white .rv-fb__opt > a:hover { background: #f2f2f2; color: #000; }
.white .rv-fb__search { background: #fff; color: #222; }

/* ── мобильная версия: ряд прокручивается, список — шторкой снизу ───── */
@media (max-width: 767px) {
    .rv-fb { margin-bottom: 14px; }
    /* Одна строка, уходит за правый край, листается пальцем — тот же
       приём, что у хлебных крошек. Отрицательные поля убраны: из-за
       них строка вылезала на 9px за край экрана и последняя кнопка
       обрезалась бортом, — колонка каталога и так отступает сама. */
    .rv-fb { position: relative; }
    .rv-fb__row {
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        /* -webkit-overflow-scrolling здесь НЕ ставим: в Safari на iOS такой
           контейнер обрезает потомков с position:fixed, и шторка фильтра
           превращалась в полоску в одну строку. Инерция прокрутки в
           современных iOS работает и без этого свойства. */
        scrollbar-width: none;
        padding: 0;
        /* по 10px просвета с обеих сторон: красная рамка сайта — это
           border в 6px у body, и строка листалась прямо в неё, кнопки
           упирались в красное и слева, и справа */
        margin: 0 10px;
    }
    .rv-fb__row::-webkit-scrollbar { display: none; }

    /* Затухание у правого края: строка «уходит» за экран, а не
       обрывается. Появляется только когда листать действительно есть
       что, и гаснет, когда долистали до конца, — класс вешает скрипт
       строки фильтра. */
    .rv-fb::after {
        content: '';
        position: absolute;
        top: 0;
        right: 10px;
        width: 50px;
        height: 100%;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s ease;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), #000);
    }
    .rv-fb.is-scrollable::after { opacity: 1; }
    .rv-fb.is-at-end::after { opacity: 0; }
    .white .rv-fb::after {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    }
    .rv-fb__item { flex: 0 0 auto; }
    .rv-fb__reset { flex: 0 0 auto; }

    .rv-fb__panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1002;
        max-width: none;
        max-height: 72vh;
        padding: 0 12px 16px;
        border: 0;
        border-radius: 18px 18px 0 0;
        overflow: hidden;
    }
    .rv-fb__panel_right { left: 0; right: 0; }
    .rv-fb__panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 4px 10px;
        color: #fff;
        font-size: 17px;
    }
    .rv-fb__panel-close {
        border: 0;
        background: transparent;
        color: #9b9b9b;
        font-size: 26px;
        line-height: 1;
        padding: 0 6px;
    }
    .rv-fb__list { max-height: calc(72vh - 120px); }
    .rv-fb__opt > a { padding: 12px; font-size: 16px; }
}

/* Подборки разделов ближе к заголовку.
   От базовой линии заголовка до верхней кромки миниатюр было 53px:
   9px свободного места под строкой заголовка, 30px его нижнего отступа,
   15px отступа самих подборок и 20px внутреннего поля миниатюры.
   Нижний отступ заголовка трогать нельзя — он держит расстояние до
   строки фильтра в разделах без подборок, поэтому подтягиваем сами
   подборки. Стало около 20px. */
.catalog-section-header .subcategories { margin-top: -22px; }
.catalog-section-header .subcategories .carousel__item { padding-top: 0; }

/* Лента подборок по центру.
   owl раскладывает плитки во flex-строке и тянет её от левого края,
   поэтому при четырёх подборках справа оставалась пустая половина.
   Автоматические поля в flex съедают только свободное место: когда
   подборок много и лента шире экрана, поля обнуляются сами и
   прокрутка работает как раньше. */
.catalog-section-header .subcategories .owl-stage {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Подборки разделов: круглые иконки вместо фотографий
   Плитка была высотой 55vw при ширине около 32vw — вытянутый вверх
   прямоугольник. Фотографии в нём обрезались по бокам на треть, а
   чёрное поле, зашитое в сами файлы, показывалось целиком. Под круглую
   иконку нужен квадрат: тогда картинка видна целиком и ничего не режется.
   ========================================================================== */
.subcategories-carousel .owl-item .carousel__item,
.catalog-section-header .subcategories .carousel__item {
    height: auto;
}
.catalog-section-header .subcategories .subcategory__image-container {
    position: relative;
    top: auto;
    bottom: auto;
    /* иконка на 15% меньше плитки — сами плитки раздвигать нельзя,
       их ширину считает карусель */
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/* затемняющий градиент был нужен, чтобы подпись читалась поверх фотографии;
   подпись теперь под иконкой, и градиент только пачкал бы её край */
.catalog-section-header .subcategories .subcategory__image-container::before {
    display: none;
}
.catalog-section-header .subcategories .subcategory__title {
    position: static;
    padding: 10px 4px 0;
    text-align: center;
}

/* ==========================================================================
   Заголовок раздела, крошки и подборки — по левому краю
   ========================================================================== */
.catalog-section-header .bredcrumb,
.catalog-section-header .breadcrumb,
.catalog-section-header .catalog-title-wrapp,
.catalog-section-header .catalog-title {
    text-align: left;
    justify-content: flex-start;
}
.catalog-section-header .subcategories .owl-stage {
    margin-left: 0;
    margin-right: auto;
}
/* сам блок подборок сайт вдвигал внутрь на 160px с каждой стороны —
   из-за этого иконки стояли не по левому краю колонки, а заметно правее
   заголовка и плитки товаров */
.catalog-section-header .subcategories {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: auto;
}

/* Иконки подборок — чёрно-белые, цвет возвращается при наведении.
   Наведение включаем только там, где оно есть: на тач-экранах :hover
   залипает после касания, и иконка осталась бы цветной навсегда —
   поэтому на телефонах они просто цветные. */
.catalog-section-header .subcategories .subcategory__image-container,
.catalog-section-header .subcategories .subcategory__image {
    filter: grayscale(1);
    transition: filter .25s ease;
}
/* наведение возвращает цвет только там, где есть мышь: на тач-экранах
   :hover залипает после касания */
@media (hover: hover) {
    .catalog-section-header .subcategories .carousel__item:hover .subcategory__image-container,
    .catalog-section-header .subcategories .carousel__item:hover .subcategory__image {
        filter: grayscale(0);
    }
}
/* выбранная подборка цветная всегда */
.catalog-section-header .subcategories .carousel__item.is-active .subcategory__image-container,
.catalog-section-header .subcategories .carousel__item.is-active .subcategory__image {
    filter: grayscale(0);
}
.catalog-section-header .subcategories .carousel__item.is-active .subcategory__title {
    color: #fff;
}

/* Крестик у выбранной подборки: белый кружок с красным крестом,
   сидит на правом верхнем краю иконки. Иконка занимает 85% ширины
   плитки и центрирована, поэтому её правый край — на 7,5% от края. */
.catalog-section-header .subcategories .subcategory__off {
    position: absolute;
    /* центр крестика — на самом краю кружка, по диагонали вверх-вправо:
       иконка 111px, её правый край отступает от края плитки на 10px,
       а точка под 45° лежит на 32px ниже верха иконки */
    top: 32px;
    right: 10px;
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    transform: translate(50%, -50%);
    transition: background-color .15s ease;
}
.catalog-section-header .subcategories .subcategory__off::before,
.catalog-section-header .subcategories .subcategory__off::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    height: 2px;
    margin: -1px 0 0 -23%;
    border-radius: 2px;
    background: #c0392b;
}
.catalog-section-header .subcategories .subcategory__off::before { transform: rotate(45deg); }
.catalog-section-header .subcategories .subcategory__off::after { transform: rotate(-45deg); }
.catalog-section-header .subcategories .subcategory__off:hover { background: #ffecec; }

/* ПРОБА ШРИФТА: заголовок раздела каталога.
   Akzidenz-Grotesk Pro Regular Extended — начертание на сайте уже есть,
   объявлено в gstyle.css как 'Akzidenz-Grotesk Pro Ext'.
   43pt = 57,33px. Временная правка для оценки, легко снять. */
.catalog-section-header .catalog-title {
    font-family: 'Akzidenz-Grotesk Pro Ext', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 43pt;
}

/* ==========================================================================
   Подборки и заголовок: правка по макету
   ========================================================================== */

/* Заголовок раздела */
.catalog-section-header .catalog-title {
    font-family: 'Akzidenz-Grotesk Pro Ext', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 36pt;          /* 48px */
    color: #fff;
    margin-top: -20px;
}

/* Подписи под кружками — той же гарнитурой и ближе к иконке */
.catalog-section-header .subcategories .subcategory__title {
    font-family: 'Akzidenz-Grotesk Pro Ext', Arial, sans-serif;
    font-size: 11pt;          /* 14,67px */
    line-height: 1.2;
    padding-top: 5px;         /* было 10px — подписи поднялись на 5px */
    /* Страховка: если когда-нибудь появится подборка со словом длиннее
       плитки, оно разорвётся внутри своей плитки, а не выедет на соседнюю.
       Для сегодняшних названий не срабатывает — все слова помещаются. */
    overflow-wrap: break-word;
}

/* Ширину плитки карусель меряет по содержимому, поэтому задаём её явно.
   Иконка при этом остаётся прежнего размера, 111px.

   15.10.2026 — было 131px, стало 159px. При 131px на текст оставалось
   123px (минус боковые поля), а русские названия подборок длиннее:
   «подстаканники» — 135px, «Никелированные» — 151px. Перенести такое
   слово по пробелу некуда, и при overflow: visible оно выезжало на
   соседнюю плитку: в «Подстаканниках» вторая строка читалась сплошняком
   «подстаканникиподстаканникиподстаканники». 159px = 151px самого
   длинного слова во всех подборках + боковые поля; теперь каждая подпись
   переносится по словам и помещается в свою плитку.
   Кегль 11pt и иконку 111px не трогаем — просвет между кружками
   вырос с 20px до 48px. */
.catalog-section-header .subcategories .carousel__item {
    width: 159px;
    padding-left: 0;
    padding-right: 0;
}
.catalog-section-header .subcategories .subcategory__image-container {
    width: 111px;
}

/* Плитке при наведении и крестику нужно место сверху: карусель режет
   всё, что вылезает за её край. Даём запас внутренним отступом —
   он внутри области отсечения, поэтому ничего не обрезается. */
.catalog-section-header .subcategories .owl-stage-outer {
    padding-top: 18px;
    margin-top: -18px;
}

/* Увеличение при наведении: раньше росла только картинка внутри
   плитки и вылезала за её границы. Теперь плавно растёт вся иконка. */
.catalog-section-header .subcategories .subcategory__image {
    transform: none !important;
}
.catalog-section-header .subcategories .subcategory__image-container {
    transition: filter .25s ease, transform .25s ease;
}
@media (hover: hover) {
    .catalog-section-header .subcategories .carousel__item:hover .subcategory__image-container {
        transform: scale(1.06);
    }
}

/* Крошки на 7px выше. Сдвиг относительный: элемент остаётся в потоке
   на прежнем месте, поэтому заголовок и всё, что ниже, не двигается. */
.catalog-section-header .breadcrumb,
.catalog-section-header .bredcrumb {
    position: relative;
    top: -7px;
}

/* ==========================================================================
   Карточка товара: возврат того, что давали gstyle и gresponsive
   На карточке они отключены (условие $isCatalogElementPage в header.php),
   и вместе с ними ушли четыре вещи из утверждённой вёрстки. Возвращаем
   их теми же значениями, что были в исходных файлах. Область ограничена
   .catalod-detail: на остальных страницах gresponsive работает как прежде,
   дублировать его там незачем.
   ========================================================================== */

/* Описание товара. Было .more-text { font-size: 16px; color: #b3b3b3 }
   в gresponsive. Размер и поля возвращаем как было, а цвет делаем по теме:
   прежний #b3b3b3 хорош на чёрной карточке (контраст 9:1), но на белой
   почти не читается (около 2:1, ниже нормы). Поэтому тёмная тема получает
   прежний цвет (контраст 10:1), а белая — более тёмный #7b7b7b (4,2:1).
   Тот же #7b7b7b мы используем на белой карточке и в блоке наличия, так
   что цвета согласованы. Формально 4,2:1 чуть ниже нормы 4,5:1 — это
   касается всего вторичного текста белой карточки, решать надо разом. */
.catalod-detail .more-text {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 15px;
    color: #b3b3b3;
}
body.bg-white .catalod-detail .more-text { color: #7b7b7b; }

/* Кнопки «В корзину» и «Быстрая покупка». Было поле 10px сверху и снизу —
   без нижнего блок кнопок становился на 10px ниже (62px против 72px). */
.catalod-detail .btn { margin-top: 10px; margin-bottom: 10px; }

/* Характеристики материала: чипсы были блочными и с воздухом справа
   (gstyle: span.mater-type / s-mater-type / mater-subtype). Без этого
   они склеивались в одну строку. */
.catalod-detail span.mater-type {
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
}
.catalod-detail span.s-mater-type {
    display: inline-block;
    /* Разделитель между материалами рисует index.css через ::after
       («, »), плюс пробел из разметки. Отступ 12px поверх этого давал
       щель после запятой — «Металл (бронза),  янтарь». */
    margin-right: 0;
}
.catalod-detail span.mater-subtype {
    display: inline-block;
    vertical-align: top;
}

/* Блок похожих товаров выступал на 10px за колонку с каждой стороны —
   так выравнивались внутренние отступы плиток
   (gresponsive: .element-detail-similar, .element-detail-hit). */
.catalod-detail .element-detail-similar,
.catalod-detail .element-detail-hit {
    margin-left: -10px;
    width: calc(100% + 20px);
}
/* и воздух под блоком похожих — было в gstyle */
.catalod-detail .element-detail-similar { margin-bottom: 45px; }

/* ==========================================================================
   Мобильный поиск: раскрытие поля под SearchBooster
   В шапке на мобильном видна только лупа, само поле скрыто — а SearchBooster
   примонтирован именно к нему. Раньше по лупе открывалась старая модалка
   Битрикса, то есть второй, ненужный поиск. Теперь лупа раскрывает поле,
   и дальше работает SearchBooster со своими подсказками.
   ========================================================================== */
@media (max-width: 991px) {
    .search-form.rv-search-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100000;
        display: flex;
        align-items: center;
        gap: 10px;
        width: auto;
        padding: 10px 12px;
        background: #000;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
    }
    /* Специфичность важна: сайт прячет поле правилом
       .header-main .search-form input[type="text"] в index.css (0,3,1).
       Селектор ниже сильнее (0,4,1), иначе поле так и останется скрытым. */
    .header-main .search-form.rv-search-open input[type="text"],
    .header-main .search-form.rv-search-open input[type="search"],
    .search-form.rv-search-open input {
        display: block;
        flex: 1 1 auto;
        height: 44px;
        min-width: 0;
        padding: 0 16px;
        border: 1px solid #555;
        border-radius: 22px;
        background: #111;
        color: #fff;
        font-size: 16px;   /* меньше 16px — iOS зумит страницу при фокусе */
    }
    .header-main .search-form.rv-search-open input::placeholder { color: #8d8d8d; }
    .search-form.rv-search-open button { flex: 0 0 auto; }
    /* крестик закрытия */
    .search-form.rv-search-open .rv-search-close {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }
}

/* ==========================================================================
   Крошки в каталоге на мобильном — как в карточке товара
   Сайт прячет их правилом gresponsive .catalog-section-header .breadcrumb
   { display:none } до 767px. Возвращаем и делаем лентой с прокруткой,
   тем же приёмом, что в карточке: одна строка, уходит за правый край,
   листается пальцем, у края затухает.
   ========================================================================== */
@media (max-width: 767px) {
    .catalog-section-header .breadcrumb {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 14px;
        margin: 0 0 10px;
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        list-style: none;
        /* затухание у правого края — маской, чтобы не заводить лишний элемент */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    .catalog-section-header .breadcrumb::-webkit-scrollbar { display: none; }
    .catalog-section-header .breadcrumb > li {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* ── Отступ от описания до «Материал» ─────────────────────────────
   Было 38px: margin-top 28 у .catalog-detail-props плюс её же
   padding-top 10. Между «Материал» и размерами — 28px. Уравниваем:
   18 + 10 = 28. Замерено в браузере, не выведено из файлов. */
.catalod-detail .catalog-detail-props { margin-top: 18px; }


/* ══ БЛОК НАЛИЧИЯ И ТЕЛЕФОН ══════════════════════════════════════════
   Текст на 5px ближе к миниатюре: было 105px (85 миниатюра + 20 зазор),
   стало 100px. */
.stock-note__left { padding-left: 100px; }

/* Телефон консультации: никаких эффектов наведения.
   Раньше его красил общий a:hover — цвет менялся на цвет ссылок
   (на светлой карточке белый, то есть телефон пропадал) и добавлялось
   подчёркивание. Для номера это бессмысленно: позвонить можно только
   с телефона, и там наведения нет вовсе. */
.stock-note__phone,
.stock-note__phone:hover,
.stock-note__phone:focus,
.stock-note__phone:active {
    color: #AC2C28;
    text-decoration: none;
}
/* На устройствах с мышью номер не кликается: звонить с ноутбука некуда.
   На тач-устройствах правило не срабатывает, и нажатие набирает номер. */
@media (hover: hover) and (pointer: fine) {
    .stock-note__phone { pointer-events: none; cursor: default; }
}

/* ══ ЗНАЧЕНИЯ СВОЙСТВ ════════════════════════════════════════════════
   Материалы, техника исполнения и прочее — тем же серым, что описание
   товара. Ссылки внутри наследуют цвет: красный среди серого выглядел
   как ошибка. Подчёркивание при наведении оставляем — это подсказка,
   что по материалу можно перейти. */
.catalod-detail .catalog-detail-props__val,
.catalod-detail .catalog-detail-props__val a {
    color: #7B7B7B;
}
.catalod-detail .catalog-detail-props__val a:hover {
    color: #7B7B7B;
    text-decoration: underline;
}


/* ══ КНОПКИ КАРТОЧКИ: подпись по оптическому центру ═══════════════════
   Геометрически текст уже по центру — по 18px сверху и снизу. Но в
   ALS-Sector краска букв лежит ниже центра строки: над базовой линией
   14.3px, под ней 4.2px, тогда как сам шрифт заявляет 18 и 4. Разница
   даёт видимый сдвиг вниз на 2px. Замерено канвой по реальному шрифту.

   Сдвигаем не отступами: у .btn они почему-то не применяются даже с
   !important (проверено инлайновым стилем на самом элементе), поэтому
   подпись обёрнута в span и смещается относительным позиционированием. */
.catalod-detail__action .btn__label {
    position: relative;
    /* Подобрано замером: при -1px краска букв стоит ровно по центру
       кнопки (отклонение 0,05px). -2px давало перелёт вверх на 1px. */
    top: -1px;
}

/* ══ ЗАГОЛОВОК РАЗДЕЛА КАТАЛОГА ══════════════════════════════════════
   Был 36pt (48px). Сначала уменьшили втрое, до 16px, — оказалось мелко:
   заголовок сравнялся по кеглю с хлебными крошками. Остановились на 24px. */
.catalog-section-header .catalog-title {
    font-size: 28.8px;   /* 24px +20% */
}

/* Номер страницы при пагинации: с новой строки, вчетверо мельче
   прежнего заголовка (36pt / 4 = 9pt) и серым. */
.catalog-title__page {
    display: block;
    font-size: 9pt;
    color: #7B7B7B;
    /* Прилипала к заголовку — отодвинута вниз. Сначала 7px, потом
       владелец попросил ещё на 3px ниже. */
    margin-top: 10px;
}


/* ══ ЯНДЕКС СПЛИТ: ширина как у описания товара ══════════════════════
   Виджет рисует SDK Яндекса, а ширину ему резал жёсткий max-width:400px
   из шаблона компонента модуля (bitrix/components/yandex/yandexpay.widget).
   Настройка модуля widget_width (500px) при этом не работает: код,
   который её применял, там закомментирован.

   Файлы модуля не трогаем — их затрёт при обновлении. Перебиваем отсюда:
   селектор с родителем даёт больший вес, чем одиночный .ya-pay-widget
   в инлайновом теге, поэтому побеждает независимо от порядка.

   Контейнер .catalod-detail__split уже совпадает с описанием по ширине
   и левому краю (замерено: 660px, left 735) — снимаем ограничение,
   и виджет растягивается по колонке. */
.catalod-detail__split .ya-pay-widget {
    max-width: none;
    width: 100%;
}

/* ══ КОРЗИНА ══════════════════════════════════════════════════════════
   Вёрстка корзины (классы basket, basket-item, basket-result, bonus,
   coupon) лежит в index.css — дизайн-система была нарисована заранее.
   Здесь только то, чего в ней не оказалось. */

/* Крестик отмены промокода. В макете basket-banner.html он есть,
   а правила для .coupon__close в index.css нет вообще. */
.coupon__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 80px;
    height: 7.4rem;
    border-radius: 16px;
    background: #fff;
    color: #9B9B9B;
    cursor: pointer;
    transition: color 0.3s ease 0s;
}
.coupon__close:hover {
    color: var(--color-primary);
}

/* Карточка промокода в блоке скидок пока одна: бонусной системы
   на сайте нет, поэтому «Скидка личного кабинета» и «Списать бонусы»
   из макета не выводятся. Одинокую карточку в треть ширины ставим
   по центру, чтобы блок не выглядел обрезанным. */
.bonus__list_single {
    justify-content: center;
}

/* Пустая корзина: кнопка по центру под заголовком. */
.basket-empty {
    display: flex;
    justify-content: center;
    padding: 40px 0 20px;
}

@media (max-width: 767px) {
    .coupon__close {
        width: 48px;
        height: 4.5rem;
        border-radius: 12px;
    }
}


/* ══ ЛИЧНЫЙ КАБИНЕТ: строка под карточкой скидки ══════════════════════
   Сама карточка (.sale-card, малахитовая подложка) в index.css уже есть.
   Подписи под ней не было — «Данные заполнены на N%…» и сообщение о том,
   что скидка закреплена. */
.sale-card-note {
    margin-top: 14px;
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--color-primary);
    text-align: center;
}

/* Скидка уже получена — тон спокойный, без призыва */
.sale-card-note_done {
    color: #29675F;
}

@media (max-width: 767px) {
    .sale-card-note {
        margin-top: 10px;
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   Лупа в шапке: мобильная иконка отдельно от десктопной
   Линия старой ic-search — 3,58px при ширине 25, у сердечка рядом 2,58px:
   лупа выглядела жирнее соседей. Перерисованная ic-search-mob совпадает
   с ними по толщине. Красную десктопную кнопку поиска владелец просил не
   трогать, поэтому иконки две и переключаются по той же границе 991px,
   на которой шапка становится мобильной.
   Обе иконки покрашены currentColor, то есть светлая и тёмная шапка
   обслуживаются одним файлом — отдельная белая копия не нужна.
   ========================================================================== */
.search-form .ic-search_mob { display: none; }

@media (max-width: 991px) {
    .search-form .ic-search_desk { display: none; }
    .search-form .ic-search_mob { display: inline-block; }
}

/* ───────────────────────────────────────────────────────────────
   Плашка о cookie и юридические ссылки в подвале (06.10.2026)

   Плашка прижата к низу, но не во всю ширину и с отступом снизу:
   на мобильном под ней живут кнопка оформления заказа и кнопка чата,
   перекрывать их нельзя. Поэтому ширина ограничена, отступ снизу
   с запасом, и z-index ниже всплывашек Fancybox (они от 1050).
   ─────────────────────────────────────────────────────────────── */
.rv-cookie[hidden] { display: none !important; }
.rv-cookie {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    box-sizing: border-box;
    background: #1a1a1a;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    font-size: 14px;
    line-height: 20px;
}

.rv-cookie__text { flex: 1 1 auto; }
.rv-cookie__text a { color: #fff; text-decoration: underline; }

.rv-cookie__btn {
    flex: 0 0 auto;
    min-height: 44px;          /* палец */
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: #ac2c28;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

@media (max-width: 575px) {
    .rv-cookie {
        /* На узком экране в строку не помещается. */
        flex-direction: column;
        align-items: stretch;
        gap: 12px;

        /* 15.10.2026 — плашка прижата к низу экрана.
           Было bottom: 84px: 06.10 оставили запас под кнопку оформления
           заказа и кнопку чата. Ни той, ни другой на мобильном сейчас
           нет (Jivo снят), и из-за этого запаса плашка висела посреди
           экрана — выглядело как случайное место. Ничего её не двигало:
           ни transform, ни родитель с position, ни JS — только это
           значение, поэтому убираем причину, а не перебиваем поверх.
           Боковые отступы 16px остались из основного правила выше.
           env(safe-area-inset-bottom) — чтобы на айфонах плашка не
           заезжала под домашнюю полоску. Нижние углы прямые: плашка
           лежит на краю экрана, скругление там читалось бы как брак. */
        bottom: 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
        border-radius: 10px 10px 0 0;
    }
    .rv-cookie__btn { width: 100%; }
}

/* Юридические ссылки в подвале: в строку, с переносом на узком экране. */
.footer__polit,
.footer-mobile__polit {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.footer__requisites,
.footer-mobile__requisites {
    margin-top: 10px;
    font-size: 12px;
    line-height: 18px;
    opacity: .6;
}

/* Логотипы платёжных систем на /bezopasnost-platezhey/.
   Одна высота 32px, в ряд, на мобильном переносом — как просил
   платёжный сервис. Высоту задаём картинке, ширина сама. */
.pay-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    margin: 0 0 28px;
}

.pay-logos__item {
    height: 32px;
    width: auto;
    max-width: none;
    object-fit: contain;
}

/* Галочка согласия в окнах «Быстрая покупка», «Уведомить о поступлении»
   и «Нет в наличии» (правка по замечаниям юриста 07.10.2026).
   Окна чёрные, поэтому текст белый; ссылки подчёркнуты, чтобы их было
   видно без наведения. Кнопка «Отправить» блокируется, пока галочки нет —
   приглушаем её, иначе выглядит как сломанная. */
.rv-agree { margin-top: 18px; }

.rv-agree__label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 18px;
    color: #c9c9c9;
    text-align: left;
}

.rv-agree__label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #ac2c28;
    cursor: pointer;
}

.rv-agree__text a { color: #fff; text-decoration: underline; }

.btn-callback[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* Подвал (десктоп): ссылки документов — каждая на своей строке,
   размер/интерлиньяж/начертание как у адреса салона (.footer__address: 1.4rem / 1.6 / 400).
   Мобильный .footer-mobile__polit не трогаем. */
.footer__polit {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 1.4rem;
    line-height: 1.6;
}
.footer__polit a {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
}

/* Подпись Студии Артемия Лебедева — подвал. Размер текста = ссылки документов (.footer__polit a): 14px / 22.4px / 400 */
.al-credit{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:2.4rem;color:#fff}
.al-credit a{margin:0;padding:0}
.al-credit__brand{display:inline-block;line-height:0;color:#fff;margin-bottom:4px}
.al-credit__logo{display:block;width:114px;height:48px}
.al-credit__link{color:#fff;text-decoration:none;font-size:14px !important;line-height:22.4px !important;font-weight:400}
.al-credit__link:hover,.al-credit__brand:hover{opacity:.8}
.al-credit--mobile{align-items:center;text-align:center;margin:3.2rem auto 0}
/* ===== Предзаказ картин: карточка и окно брони (макет Влада, predzakaz-maket.html) ===== */

/* Статус над кнопкой: две строки, без палочек и плашек.
   По умолчанию карточка тёмная, .rv-pz--white — светлая. */
.rv-pz{margin:0 0 2.2rem}
.rv-pz__status{font-size:1.6rem;line-height:1.45;color:rgba(255,255,255,.6)}
.rv-pz__eta{font-size:2.2rem;line-height:1.3;font-weight:600;color:#fff}
.rv-pz--white .rv-pz__status{color:#6f6f6f}
.rv-pz--white .rv-pz__eta{color:#111}
.rv-pz__note{margin:1.6rem 0 0;max-width:520px;font-size:1.4rem;line-height:1.45;color:rgba(255,255,255,.6)}
.bg-white .rv-pz__note,.rv-pz--white~.rv-pz__note{color:#6f6f6f}

/* Окно брони */
.rv-pzm{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.55);overflow-y:auto;padding:5.6rem 1.6rem}
.rv-pzm.active{display:flex;align-items:flex-start;justify-content:center}
.rv-pzm__win{position:relative;width:100%;max-width:620px;margin:auto;padding:40px 44px;background:#fff;color:#111}
.rv-pzm__close{position:absolute;right:20px;top:14px;width:32px;height:32px;padding:0;font-size:32px;line-height:1;color:#111;background:none;border:0;cursor:pointer}
.rv-pzm__title{margin:0 0 24px;padding-right:32px;font-size:30px;line-height:1.2;font-weight:600;color:#111}
.rv-pzm__item{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;margin-bottom:22px}
.rv-pzm__pic{width:120px;aspect-ratio:3/2;object-fit:cover;display:block}
.rv-pzm__name{font-size:16px;line-height:1.35;font-weight:600}
.rv-pzm__meta{margin-top:2px;font-size:14px;line-height:1.4;color:#6f6f6f}
.rv-pzm__price{margin-top:6px;font-family:'Abril Fatface','Playfair Display',Georgia,serif;font-size:28px;line-height:1}
.rv-pzm__lead{margin:0 0 22px;font-size:16px;line-height:1.45;color:#6f6f6f}
.rv-pzm__form{display:grid;gap:12px}
.rv-pzm__two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rv-pzm__form input[type=text],.rv-pzm__form input[type=tel],.rv-pzm__form input[type=email],.rv-pzm__form textarea{width:100%;padding:15px 16px;background:#f1f1f1;border:1px solid transparent;border-radius:6px;color:#111;font:inherit;box-sizing:border-box}
.rv-pzm__form input::placeholder,.rv-pzm__form textarea::placeholder{color:#8b8b8b}
.rv-pzm__form input:focus,.rv-pzm__form textarea:focus{outline:none;border-color:#bbb;background:#fff}
.rv-pzm__form textarea{height:84px;resize:none}
.rv-pzm__agree{display:flex;gap:10px;align-items:flex-start;margin:6px 0 4px;font-size:13px;line-height:1.4;color:#6f6f6f;cursor:pointer}
.rv-pzm__agree input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#a3302e;cursor:pointer}
.rv-pzm__agree a{color:#6f6f6f;text-decoration:underline}
.rv-pzm__error{margin:0;font-size:14px;line-height:1.4;color:#a3302e}
.rv-pzm__btn{width:100%;height:60px;margin-top:6px;padding:0 24px;font-size:20px;font-weight:500;color:#fff;background:#a3302e;border:0;border-radius:6px;cursor:pointer}
.rv-pzm__btn[disabled]{opacity:.6;cursor:default}
.rv-pzm__btn--line{background:#fff;color:#a3302e;border:2px solid #a3302e}
@media (hover:hover){.rv-pzm__btn:hover{background:#b83634}.rv-pzm__btn--line:hover{background:#a3302e;color:#fff}}
@media (max-width:860px){
  .rv-pzm{padding:2.4rem 1.2rem}
  .rv-pzm__win{padding:28px 20px}
  .rv-pzm__title{font-size:24px}
  .rv-pzm__two{grid-template-columns:1fr}
  .rv-pzm__item{grid-template-columns:96px 1fr;gap:14px}
  .rv-pzm__pic{width:96px}
}

/* .catalod-detail__action — флекс-строка, поэтому статус и подпись занимают всю ширину:
   иначе они встают сбоку от кнопки, а в макете они над ней и под ней. */
.catalod-detail__action .rv-pz,.catalod-detail__action .rv-pz__note{flex:0 0 100%;width:100%}
/* Логотип Т-Банка в цене — часть истории про «Долями»; на предзаказе оплаты нет. */
.rv-pz-card .catalod-detail-price__bank{display:none}


/* ===== Единая система стикеров в плитке каталога =====
   Одна форма на все метки: «пилюля». Левый верхний угол, стопкой, 8px между.
   Цвета фирменные: скидка — красный кнопки «В корзину», новинка — зелёный
   активного фильтра. Размер холста — светлый: это характеристика, а не метка. */
.section-item-sticker.rv-st-box{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rv-st{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 11px;border-radius:999px;color:#fff;font-size:1.2rem;line-height:1;font-weight:600;white-space:nowrap}
.rv-st--sale{background:#ad2b2a}   /* как кнопка «В корзину» */
.rv-st--pz  {background:#7b6a55}
.rv-st--excl{background:#111}
.rv-st--hit {background:#4a4a4a}   /* графит */
.rv-st--new {background:#4a7e67}   /* как активный фильтр «Янтарь» */
.rv-st--size{background:#f1f1f1;color:#111}
/* «Высота …» и «Доставка от 2-х дней» остаются простым текстом, без пилюли */
.rv-st-text{display:block}

@media (max-width:767px){
  /* на мобильной плитке стек стикеров скрыт целиком — показываем только пилюли */
  .section-item-sticker.rv-st-box{display:flex;gap:6px}
  .rv-st{height:20px;padding:0 9px;font-size:1.1rem}
  .rv-st-text{display:none}
}

/* Текст в пилюлях. В gstyle.css правило «.section-item.white *{color:black}»
   специфичнее моего .rv-st, поэтому цвет и начертание задаём через !important —
   только своим классам, чужое не трогаем.
   Начертание как у текста «Высота …» в плитке: ALS-Sector, вес 400. */
.rv-st{
  font-family:ALS-Sector,Arial,sans-serif !important;
  font-weight:400 !important;
  color:#fff !important;
  line-height:1 !important;
}
.rv-st--size{color:#111 !important}


/* Надпись внутри пилюли. Флекс центрирует строчный бокс, но у ALS Sector
   восходящие и нисходящие несимметричны, и текст зрительно садится выше центра
   на ~1 px. Сдвигаем сам текст, пилюля остаётся на месте. */
.rv-st__t{display:block;transform:translateY(1px)}

/* Правило gstyle «.section-item.white *{color:black}» красит и вложенный span,
   поэтому цвет задаём именно ему, а не только самой пилюле. */
.section-item .rv-st .rv-st__t{color:inherit !important}
.section-item .rv-st--size .rv-st__t{color:#111 !important}

/* Плашка «Успейте купить» — тот же слот и габарит, что у «Эксклюзива».
   Иконка цельная (значок + надпись + подпись), поэтому внутри блока она одна. */
@media (max-width:767px){
  /* на мобильной слово «Эксклюзив» сужается с 12.9rem до 11.8rem — ведём иконку следом */
  }

/* Схема размеров по макету baget-shema.html: рисунок приходит готовым SVG,
   CSS отвечает только за раскладку и типографику подписей. */
.bg-white .rv-dim__svg{display:block;max-width:100%;height:auto;font-family:ALS-Sector,Arial,sans-serif}
.rv-dim__stack{display:none}
@media (max-width:767px){
  .rv-dim__row{display:none}
  .rv-dim__stack{display:block}
}

.rv-dim-block{margin:3.2rem 0 0}
/* На мобильной index.css красит ВСЕ заголовки внутри .catalod-detail__main
   в белый (там карточка тёмная). Окно брони лежит внутри этого же блока,
   фон у него белый — и оба заголовка, «Бронь картины» и «Картина
   забронирована», пропадали, оставляя пустое место. Чужое правило не трогаем,
   просто берём селектор весомее. */
@media (max-width: 767px) {
  .rv-pzm .rv-pzm__win .rv-pzm__title { color: #111; }
}

/* Плашка «Последний» собрана из тех же частей и теми же классами, что «Эксклюзив»,
   поэтому плашка, строка и отступы берутся из index.css и здесь не повторяются.
   Своё — только размеры руки и слова. */
.exclusive--last .rv-last__hand{display:block;height:3rem;width:auto;position:relative;top:7px;transform-origin:50% 100%;animation:rv-hand-wave 10s ease-in-out infinite}   /* вровень с бриллиантом 24×24 */
.exclusive--last .rv-last__word{display:block;width:13rem;height:auto;max-width:100%}                              /* десктоп: как «ЭКСКЛЮЗИВ», 12.9rem */
@media (max-width:767px){
  /* на мобильной равняем высоту букв: «ЭКСКЛЮЗИВ» — 11.8rem при пропорции 257×58,
     то есть буквы 2.66rem. Ширину отпускаем, иначе слово длиннее и строка поедет. */
  /* «ПОСЛЕДНИЙ» длиннее «ЭКСКЛЮЗИВ», и подпись у него тоже длиннее: при исходных
     размерах строка не влезает в плашку на 360 px. Поэтому все три части —
     рука, слово и подпись — уменьшены ровно на 15% от размеров «Эксклюзива»
     (24 -> 20.4, буквы 26.6 -> 22.6, шрифт 16 -> 13.6). Строка остаётся одна. */
  .exclusive--last .rv-last__hand{height:2.55rem}
  /* содержимое ниже, чем у «Эксклюзива», поэтому держим плашку той же высоты */
  .exclusive--last{min-height:9.6rem}
  .exclusive--last .rv-last__word{width:auto;height:2.26rem;max-width:none}
  .exclusive--last .rv-last__text{font-size:1.36rem}
  .exclusive--last .rv-last__text{white-space:nowrap}
}

/* ══ КАРТОЧКА: ПЛАШКА «В НАЛИЧИИ» И ХАРАКТЕРИСТИКИ ═══════════════════
   По макету Влада, 13.10.2026. Всё на своих классах.

   1. Блок «<Товар> в наличии!» — обычная флекс-строка на серой плашке:
      слева квадратная миниатюра, справа заголовок и две строки текста.
      В index.css миниатюра вынута из потока (absolute + top:50% +
      transform), а место под неё держит padding-left у .stock-note__left.
      Внутри плашки это не нужно и мешает, поэтому всю цепочку возвращаем
      в поток: position, смещения, отступы и transform сбрасываем явно.
      Фон у миниатюры и её обёртки — прозрачный, иначе смешивание идёт
      с их собственным белым, и вокруг фото остаётся белый квадрат.
      Радиус оставлен 8px — тот, что ты одобрил; у «Эксклюзива» он 16.  */
.rv-stock-plate{
    display:flex;
    align-items:center;
    gap:24px;
    /* Вертикальный отступ 6px вместо 24: высота плашки 96+12=108 вместо 144,
       это ровно −25%. Сверху и снизу поровну, миниатюра и текст по центру.
       Слева отступа нет совсем — плашка начинается там же, где кнопка
       «В корзину»; воздух вокруг миниатюры даёт горизонтальный padding. */
    padding:6px 24px;
    border-radius:8px;
    background:#121214;
}
/* телефон справа — по центру плашки по вертикали
   (контейнер .stock-note прижимает детей к верху) */
.stock-note__call{align-self:center}
.bg-white .rv-stock-plate{background:#F2F2F2}

.rv-stock-plate .stock-note__thumb{
    position:static;
    left:auto; right:auto; top:auto; bottom:auto;
    margin:0;
    transform:none;
    flex:0 0 96px;
    width:96px;
    height:96px;
    background:transparent;
}
.rv-stock-plate .stock-note__thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:transparent;
}
/* Смешивание — на самом <img>, режим зависит от темы карточки.
   На светлой плашке multiply гасит белый фон фото. На тёмной он,
   наоборот, топит фото в чёрное, а чёрный фон снимка остаётся
   квадратом — там нужен screen («Экран» в фотошопе): он гасит
   чёрное и оставляет светлое. Правило для тёмной задано базовым,
   светлое перебивает его за счёт лишнего класса .bg-white. */
.rv-stock-plate .stock-note__thumb img{mix-blend-mode:screen}
.bg-white .rv-stock-plate .stock-note__thumb img{mix-blend-mode:multiply}

.rv-stock-plate .stock-note__body{position:static; margin:0; flex:1 1 auto; min-width:0}

/*  2. Характеристики: подпись слева, от неё тонкая линия до значения,
       значения всех строк начинаются с одной вертикали. Сетка на две
       колонки, строки «распущены» через display:contents — поэтому
       ширину колонки задаёт самая длинная подпись, а не каждая строка
       сама по себе. Линия — псевдоэлемент подписи, тянется до колонки
       значений и стоит по нижней линии текста. Длинное значение
       переносится внутри своей колонки, линия при этом не ломается.   */
.rv-props{
    display:grid;
    /* fit-content, а не auto: линия внутри подписи растягивается, и при auto
       её «желаемая» ширина бесконечна — первая колонка съедала всю строку,
       а значениям оставалось 0. Доля 45% держит колонку подписей и ставит
       все значения на одну вертикаль. */
    grid-template-columns:fit-content(45%) minmax(0,1fr);
    column-gap:16px; row-gap:24px; align-items:baseline;
}
.rv-props .catalog-detail-props__item{display:contents}
.rv-props .catalog-detail-props__label{display:flex; align-items:baseline; white-space:nowrap}
.rv-props .catalog-detail-props__label::after{
    content:""; flex:1 0 84px; margin-left:8px;   /* +60px к каждой линии: короткие были 32px */
    border-bottom:1px solid rgba(255,255,255,.18);
}
.bg-white .rv-props .catalog-detail-props__label::after{border-bottom-color:#E4E4E4}
.rv-props .catalog-detail-props__val{min-width:0; overflow-wrap:anywhere}
/* Схема размеров и блок габаритов лежат внутри того же контейнера, что
   и строки характеристик. С тех пор как контейнер стал сеткой, они
   попадали во вторую колонку и сжимались вдвое: схема «Охотников»
   рисовалась 351px вместо 780. Растягиваем их на обе колонки — строк
   характеристик это не касается. */
.rv-props > .rv-dim-block,
.rv-props > .catalog-detail-dimensions{grid-column:1 / -1}


@media (max-width:767px){
    /* плашка во всю ширину, без сдвига; миниатюра мельче
       02.11.2026, по макету Влада: подложка выше примерно на 30% (84 → 110),
       миниатюра растёт вместе с ней (72 → 94). Положение, скругление 8px и
       цвет не трогаем, кегли текста тоже. Поля слева и справа по 16px — от
       края подложки до миниатюры и от края текстового блока до правого края
       ровно столько же; текстовый блок тянется flex: 1 1 auto, поэтому
       равенство держится само. Поля ужаты с 20 до 16, а зазор с 16 до 12:
       иначе подросшая миниатюра съедала ширину, заголовок «Картина в
       наличии!» уходил на две строки и плашка вырастала не на 30%, а на 46%.
       Тексты по вертикали центрируются относительно миниатюры: у плашки
       align-items: center, а миниатюра — самый высокий её ребёнок. */
    .rv-stock-plate{width:100%; box-sizing:border-box; margin-left:0; gap:12px; padding:8px 16px}
    .rv-stock-plate .stock-note__thumb{flex:0 0 94px; width:94px; height:94px}
    /* на мобильной .stock-note распущен через display:contents,
       поэтому плашка — обычный элемент колонки и занимает всю ширину */
    /* подписи здесь длиннее колонки, поэтому перенос разрешаем,
       а линию оставляем только там, где она реально помещается */
    /* на узком экране подписи длиннее, поэтому колонка шире и перенос разрешён */
    .rv-props{grid-template-columns:fit-content(52%) minmax(0,1fr); column-gap:12px; row-gap:18px}
    .rv-props .catalog-detail-props__label{white-space:normal}
}

/* ══ ОПТИЧЕСКОЕ ЦЕНТРИРОВАНИЕ ТЕКСТА В КНОПКАХ ═══════════ rv-btn-optical
   Замер в браузере (стенд, 1440): кнопка 58px, от верха кнопки до верха
   заглавных 20.6px, от базовой линии до низа 24.5px — текст сидит на
   3.9px выше середины. Так ведёт себя гарнитура ALS-Sector: в строке
   она стоит высоко, и align-items:center центрирует строку целиком,
   а не буквы. Компенсируем половиной разницы — 2px.
   Высота у всех этих кнопок задана жёстко, box-sizing:border-box,
   поэтому padding-top:4px сдвигает содержимое вниз ровно на 2px
   и не меняет ни габарит кнопки, ни кегль. */
.catalod-detail__action .btn,
.js-rv-pz-book,
.rv-pzm__btn{padding-top:4px}

/* ══ ЗАГОЛОВКИ РАЗДЕЛОВ КАРТОЧКИ ═══════════════════════════ rv-sect-title
   Один класс на «Размер картины» и «Комплектацию», а не две копии стилей:
   поправишь здесь — поедет в обоих местах. Это прежний вид заголовка схемы:
   шрифт сайта ALS-Sector, 2.4rem, полужирный, — вместо узкого Akzidenz 3.2rem,
   которым набрана «Комплектация» в index.css. Шрифт задаём явно: у <h2>
   общее правило index.css ставит Akzidenz, наследования не хватит. */
.rv-sect-title{
    font-family:"ALS-Sector",Arial,sans-serif;
    margin:0 0 .6rem;
    font-size:2.4rem;
    line-height:1.2;
    font-weight:600;
    color:#fff;
}
.bg-white .rv-sect-title{color:#111}
.rv-sect-note{margin:0 0 2rem; font-size:1.4rem; line-height:1.5; color:rgba(255,255,255,.6)}
.bg-white .rv-sect-note{color:#6f6f6f}
@media (max-width:767px){.rv-sect-title{font-size:2rem}}

/* ══ РУКА В ПЛАШКЕ «ПОСЛЕДНИЙ»: ПОКАЧИВАНИЕ ════════════ rv-hand-wave
   Раз в 10 секунд рука качается влево-вправо дважды и встаёт ровно
   по центру. Само движение — первая секунда цикла (10% кадров),
   остальные девять она стоит. Ось — у запястья: transform-origin
   50% 100%, то есть низ картинки по центру. Угол ±12°.
   Слово и подпись не трогаем — анимация только на <img> руки. */
@keyframes rv-hand-wave{
     0%{transform:rotate(0)}
     2%{transform:rotate(-12deg)}
     4%{transform:rotate(12deg)}
     6%{transform:rotate(-12deg)}
     8%{transform:rotate(12deg)}
    10%{transform:rotate(0)}
   100%{transform:rotate(0)}
}
/* кому движение мешает — показываем статичную руку */
@media (prefers-reduced-motion: reduce){
  .exclusive--last .rv-last__hand{animation:none}
}
/* ══ ЛИЧНЫЙ КАБИНЕТ: ВЕРХНИЙ БЛОК ═══════════════════════ lk-cards
   Шаг 1 по макету Влада lk-maket.html от 13.10.2026: переключатель
   профилей и четыре карточки. Цифры набраны Abril Fatface — той же
   гарнитурой, что цена в карточке товара. Логики за баллами пока нет,
   вёрстка готова к ней: .lk-card__note и .lk-bar уже описаны. */
.lk-who{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.lk-who__btn{
    font:500 1.5rem/1 "ALS-Sector",Arial,sans-serif;
    border:1px solid #e2e2e2;background:#fff;color:#111;
    padding:10px 18px;border-radius:999px;cursor:pointer;
}
.lk-who__btn_on{background:#4e2626;border-color:#4e2626;color:#fff}
.lk-who__btn_add{color:#7a7a7a;border-style:dashed}

.lk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lk-card{
    background:#f2f2f2;border-radius:16px;padding:30px 32px;min-height:172px;
    display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.lk-card__title{color:#7a7a7a;font-size:1.7rem;font-weight:500}
.lk-card__val{font:4.4rem/1 "Abril Fatface",Georgia,serif;margin-top:auto;color:#000}
/* Знак рубля у крупных цифр — ровно как в цене карточки товара.
   Там: .catalod-detail-price__val — Abril Fatface 86px, а знак в
   <span class="catalod-detail-price__curency"> — Abhaya Libre 54px,
   разделитель &nbsp;. Доля 54/86 = .628.
   Почему в ЛК он выглядел иначе: <small> наследовал Abril Fatface, а в
   этой гарнитуре знака ₽ нет — браузер подставлял Georgia, отсюда тонкий
   штрих и съехавшая база. Задаём ту же гарнитуру и ту же долю; доля в em,
   чтобы работала и на 4.4rem, и на мобильных 3.6rem. */
.lk-rub{font-family:var(--font-abhaya);font-size:.628em}
.lk-card__val_sm{font-size:3rem}
.lk-card__note{font-size:1.3rem;color:#7a7a7a;margin-top:10px}
.lk-card_dark{background:#343434 url(../icons/icon_rus.svg) no-repeat calc(100% - 20px) bottom;color:#fff}
.lk-card_dark .lk-card__title{color:#c9c9c9}
.lk-card_dark .lk-card__val{color:#fff}
.lk-card_dark .lk-card__note{color:#bdbdbd}
.lk-card__copy{display:inline-block;margin-left:12px;cursor:pointer;position:relative;vertical-align:middle}
.lk-card__copy-tip{display:none;position:absolute;left:50%;top:-24px;transform:translateX(-50%);
    font-size:1.2rem;white-space:nowrap;background:#111;color:#fff;padding:2px 8px;border-radius:4px}
.lk-card__copy.is-copied .lk-card__copy-tip{display:block}
.lk-bar{height:6px;background:#ddd;border-radius:3px;margin-top:12px;overflow:hidden}
.lk-bar i{display:block;height:100%;background:#4e2626}
.lk-card_dark .lk-bar{background:#555}
.lk-card_dark .lk-bar i{background:#fff}

@media (max-width:1100px){
    .lk-cards{grid-template-columns:repeat(2,1fr)}
    }
@media (max-width:767px){
    .lk-cards{grid-template-columns:1fr;gap:8px}
    .lk-card{min-height:0;padding:22px 24px}
    .lk-card__val{font-size:3.6rem}
    .lk-who{justify-content:flex-start}
}

/* ══ ЛИЧНЫЙ КАБИНЕТ: окно «Добавить компанию» ═════════════════════════
   13.10.2026. Само окно — окно брони картины (.rv-pzm*): фон, белый лист,
   крестик, заголовок, кнопки. Здесь только то, чего у брони нет:
   подсказки DaData и карточка реквизитов. Новых цветов нет — те же
   #f1f1f1, #6f6f6f и #a3302e, что в окне брони. */
.rv-cmp__field { position: relative; }

.rv-cmp__inn {
    width: 100%;
    padding: 15px 16px;
    background: #f1f1f1;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #111;
    font: inherit;
    box-sizing: border-box;
}
.rv-cmp__inn::placeholder { color: #8b8b8b; }
.rv-cmp__inn:focus { outline: none; border-color: #bbb; background: #fff; }
.rv-cmp__inn_err { border-color: #a3302e; background: #fff; }

/* Подсказки стоят в потоке, прямо под полем: окно растёт вместе со
   списком, и он не вылезает за белый лист на тёмную подложку. */
.rv-cmp__sugg {
    margin-top: 4px;
    max-height: 264px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
}
.rv-cmp__sugg-item {
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.3;
    border-top: 1px solid #e3e3e3;
    cursor: pointer;
}
.rv-cmp__sugg-item:first-child { border-top: 0; }
.rv-cmp__sugg-item small { display: block; margin-top: 2px; font-size: 13px; color: #6f6f6f; }
@media (hover: hover) { .rv-cmp__sugg-item:hover { background: #f7f7f7; } }

.rv-cmp__hint { margin: 8px 2px 0; font-size: 13px; line-height: 1.4; color: #6f6f6f; }
.rv-cmp__hint_err { color: #a3302e; }

/* Радиус окна и карточки — тот же, что у кнопок «Не та компания» и
   «Добавить»: .rv-pzm__btn, border-radius: 6px (строка выше в этом файле).
   Своего значения не придумываем. Окно правим только у этого окна
   (.rv-cmp), окно брони картины остаётся как было. */
.rv-cmp .rv-pzm__win { border-radius: 6px; }

.rv-cmp__found { margin-top: 20px; padding: 22px 24px; background: #f1f1f1; border-radius: 6px; }
.rv-cmp__name { font-size: 20px; line-height: 1.3; font-weight: 600; }
.rv-cmp__tag { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #2f6b45; }
/* Левый столбец — по самой длинной подписи («Предприниматель»), а не по
   жёстким 120px: иначе она налезала на значение. Подписи не переносим. */
.rv-cmp__req {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 6px;
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.4;
}
.rv-cmp__req dt { color: #6f6f6f; white-space: nowrap; }
.rv-cmp__req dd { margin: 0; }

.rv-cmp__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 860px) {
    /* На телефоне кнопка «Добавить» уходит наверх, под палец. */
    .rv-cmp__two { grid-template-columns: 1fr; }
    .rv-cmp__two .js-rv-cmp-add { order: -1; }
    /* Узкий экран: подпись встаёт над значением — двум столбцам тут тесно. */
    .rv-cmp__req { grid-template-columns: minmax(0, 1fr); row-gap: 2px; font-size: 14px; }
    .rv-cmp__req dt { margin-top: 10px; }
    .rv-cmp__req dt:first-child { margin-top: 0; }
}

/* ══ ЛИЧНЫЙ КАБИНЕТ: кабинет компании ════════════════════════════════
   Реквизиты, адреса и счета. Таблица реквизитов набрана так же, как
   карточка найденной компании в окне добавления: подпись серая слева,
   значение чёрное справа. */
.lk-req {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 14px 24px;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.4;
}
.lk-req dt { color: #6f6f6f; }
.lk-req dd { margin: 0; color: #111; }

.lk-req__note { margin: 28px 0 0; font-size: 1.4rem; line-height: 1.5; color: #6f6f6f; }
.lk-req__note a { color: #a3302e; }

.lk-req__del { margin: 36px 0 0; font-size: 1.4rem; }
.lk-req__del a { color: #6f6f6f; text-decoration: underline; }
@media (hover: hover) { .lk-req__del a:hover { color: #a3302e; } }

.lk-bills { width: 100%; border-collapse: collapse; font-size: 1.5rem; }
.lk-bills td { padding: 14px 0; border-bottom: 1px solid #e2e2e2; }
.lk-bills__ok { color: #29675F; }
.lk-bills__wait { color: #a3302e; }

@media (max-width: 767px) {
    .lk-req { grid-template-columns: 1fr; gap: 4px; }
    .lk-req dt { margin-top: 12px; }
}

/* ══ ШАПКА: АКТИВНЫЙ ПРОФИЛЬ В КНОПКЕ КАБИНЕТА ═══════════════════════
   14.10.2026. В кнопке стоит либо имя покупателя, либо короткое имя
   выбранной компании. Ширину кнопки не меняем: сейчас она 240 px, из
   них 40 на поля, 21 на корону и 10 на зазор — имени остаётся 169.
   Длинное название режем многоточием, полное лежит в title. */
/* Подпись — по центру заглавных букв (rv-hdr-auth-label).
   Тем же приёмом, что на кнопках карточки «В корзину» / «Быстрая покупка»:
   подпись обёрнута в span и смещается относительным позиционированием
   (.catalod-detail__action .btn__label выше в этом файле).
   Замер на стенде, 1440: центр кнопки 210.88, центр заглавных 209.23 —
   краска букв сидит на 1.65px выше. ALS-Sector в строке стоит высоко,
   и align-items:center центрирует строку целиком, а не буквы.
   Опускаем подпись на 1.5px: остаток 0.15px. Корону не трогаем — её
   центр совпадает с центром кнопки, то есть с новой осью заглавных. */
.header-auth__name {
    position: relative;
    top: 1.5px;
    display: block;
    /* Ровно 169px, а не max-width: иначе кнопка дышит под длину имени —
       с коротким «ИП Сергеенко В. В.» она ужималась до 214. */
    width: 169px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══ ШАПКА: КНОПКА КАБИНЕТА ПО ЦЕНТРУ СТРОКИ ═══════════ rv-hdr-auth-center
   14.10.2026. В index.css (блок «12. Шапка: текст опущен на 3px») кнопка
   кабинета попала в общий список вместе с текстовыми элементами шапки и
   получила position:relative; top:3px. Пока в ней было одно слово «Вход»,
   это и был сдвиг текста. Теперь это кнопка 48px, и вниз уезжает она
   целиком: её верх и низ оказались на 3px ниже красной кнопки поиска.
   Возвращаем кнопку в центр строки, а компенсацию метрик ALS-Sector
   переносим на саму подпись. */
.header .header-auth { top: 0; }

/* ══ ИСТОРИЯ ЗАКАЗОВ ПО ПРОФИЛЯМ ═════════════════════════════════════
   14.10.2026. Переключатель набран пилюлями ЛК (.lk-who / .lk-who__btn),
   своих иконок и цветов не вводим — только ссылки вместо кнопок.
   Пометка профиля — подпись под номером заказа, тем же серым, что дата. */
.lk-who_hist { justify-content: flex-start; margin-bottom: 20px; }
.lk-who_hist .lk-who__btn { text-decoration: none; }

.rv-hist-mark {
    margin-top: 4px;
    font-size: 1.3rem;
    line-height: 1.3;
    color: #7a7a7a;
}

@media (max-width: 767px) {
    .lk-who_hist { margin-bottom: 16px; }
}

/* ══ КАРТОЧКА КАРТИНЫ: ПОДАРОЧНАЯ КОРОБКА ════════════════════════════
   14.10.2026. В карточке — ссылка под кнопками; коробки показываются
   в двух окнах: в своём «Выберите коробку» и внутри штатного «Товар
   добавлен в корзину», под его кнопками.
   Оба окна идут под тему карточки: белая карточка — белое окно,
   чёрная — чёрное. Класс темы ставит карточка, поэтому в каталоге и на
   других страницах штатное окно остаётся прежним.
   Скругления везде 6px — как у кнопок сайта.                          */

/* ── ссылка под кнопками ─────────────────────────────────────────── */
/* 16.10.2026 — строка привязана к кнопкам покупки: 12px под рядом
   «В корзину / Быстрая покупка», слева вровень с «В корзину» (padding 0
   при flex:0 0 100% ставит её на левый край того же контейнера кнопок).
   Мелкая и серая, чтобы не спорить с кнопками; подчёркивание пунктиром. */
.catalod-detail__action .rv-giftlink {
    flex: 0 0 100%;              /* контейнер кнопок — флекс-строка */
    width: 100%;
    display: inline-flex;
    align-items: center;   /* текст по вертикали по центру иконки */
    gap: 10px;
    /* Контейнер кнопок — флекс с row-gap: 20px, он добавляется к отступу
       сверху, поэтому число отрицательное. 16.10.2026 отступ от кнопок
       увеличен с 12 до 22px, значение подобрано замером. */
    margin: -8px 0 0;
    /* Вся строка сдвинута вправо на 8px от края кнопки «В корзину». */
    padding: 0 0 0 8px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1.4rem;
    line-height: 1.3;
    /* Тёмная карточка — по умолчанию: #6f6f6f на чёрном не читается,
       берём тот же приглушённый белый, что у подписей .rv-sect-note. */
    color: rgba(255, 255, 255, .6);
    text-align: left;
    cursor: pointer;
}
.bg-white .catalod-detail__action .rv-giftlink { color: #6f6f6f; }

/* Подчёркивание пунктиром, в цвет самой строки. */
.catalod-detail__action .rv-giftlink span {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
}
/* Иконка 45px (16.10.2026, было 18): файл тот же, крупнее в 2,5 раза. */
.catalod-detail__action .rv-giftlink__ic { flex: none; display: block; width: 45px; height: 45px; }
@media (hover: hover) {
    .catalod-detail__action .rv-giftlink:hover span { text-decoration-style: solid; }
}

/* На телефоне «Добавить в избранное» переносится на свою строку и встаёт
   между кнопками и этой строкой. Строка принадлежит кнопкам, поэтому
   ставим её сразу за ними, а избранное уходит ниже. */
@media (max-width: 767px) {
    .catalod-detail__action .js-add2basket,
    .catalod-detail__action .fast-order-link { order: 1; }
    .catalod-detail__action .rv-giftlink     { order: 2; }
    .catalod-detail__action .btn-wish        { order: 3; }
}

/* ── плитка коробки ──────────────────────────────────────────────── */
/* Порядок: фото — название — цена — кнопка. Фото целиком, не обрезаем. */
.rv-boxes { display: flex; flex-wrap: wrap; gap: 12px; }
.rv-boxes_n2 > .rv-boxtile { flex: 1 1 calc(50% - 6px); max-width: calc(50% - 6px); }
.rv-boxes_n3 > .rv-boxtile { flex: 1 1 calc(33.333% - 8px); max-width: calc(33.333% - 8px); }

.rv-boxtile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
}
.rv-boxtile__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-bottom: 10px;
}
.rv-boxtile__pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rv-boxtile__name { font-size: 1.4rem; line-height: 1.3; text-align: center; color: #000; }
.rv-boxtile__price { margin-top: 6px; font-size: 1.7rem; font-weight: bold; text-align: center; color: #000; }

/* Кнопка — как «Быстрая покупка» (обводка); добавленная — как «В корзину». */
.rv-boxtile__add {
    width: 100%;
    height: 44px;
    margin-top: 12px;
    padding: 0 12px;
    font: inherit;
    font-size: 1.5rem;
    font-weight: 500;
    /* Красный по макету упаковки (16.10.2026): #973833 — и в карточке,
       и в окне «Товар добавлен в корзину», плитка там та же. */
    color: #973833;
    background: #fff;
    border: 2px solid #973833;
    border-radius: 6px;
    cursor: pointer;
}
.rv-boxes .rv-boxtile .rv-boxtile__add { margin-top: auto; }
.rv-boxtile__add_done { color: #fff; background: #973833; cursor: default; }
@media (hover: hover) {
    .rv-boxtile__add:not(.rv-boxtile__add_done):hover { color: #fff; background: #973833; }
}

/* ── коробки на тёмном фоне ──────────────────────────────────────── */
/* На чёрном белые квадраты фотографий выглядят заплатками, поэтому
   коробка стоит на светло-серой плашке, а фото смешивается с ней
   режимом multiply. Текст на плашке тёмный — он читается по фону
   плашки, а не окна. z-index у плитки и её предков не ставим:
   он создаёт свой слой, и смешивание перестаёт видеть плашку. */
.rv-std_dark .rv-boxtile,
.rv-pack_dark .rv-boxtile {
    padding: 14px 14px 16px;
    background: #F2F2F2;
    border-radius: 6px;
    color: #111;
}
.rv-std_dark .rv-boxtile__pic img,
.rv-pack_dark .rv-boxtile__pic img { mix-blend-mode: multiply; }

/* ── блок внутри штатного окна ───────────────────────────────────── */
.rv-boxes_std { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); }
.rv-boxes_std .rv-sect-title { margin: 0 0 4px; }
.rv-boxes_std .rv-sect-note { margin: 0 0 18px; }
.add-to-basket-popup-content { border-radius: 6px; }

/* штатное окно под белой карточкой */
.rv-std_white .add-to-basket-popup-content { background-color: #fff; color: #111; }
.rv-std_white .add-to-basket-popup-title { color: #111; }
/* Крестик нарисован двумя полосками в :before/:after, сама кнопка
   прозрачная. Красим полоски — если залить кнопку, выйдет серый квадрат. */
.rv-std_white .add-to-basket-popup-btn-close { background-color: transparent; }
.rv-std_white .add-to-basket-popup-btn-close:before,
.rv-std_white .add-to-basket-popup-btn-close:after { background-color: rgba(0, 0, 0, .75); }
/* Кнопки — те же, что в белой карточке: «Продолжить покупки» обводкой,
   «Оформить заказ» красной заливкой. */
.rv-std_white .add-to-basket-popup-btn {
    color: #fff;
    background-color: #a3302e;
    border: 2px solid #a3302e;
    border-radius: 6px;
}
.rv-std_white .add-to-basket-popup-btn-bg-grey {
    color: #a3302e;
    background-color: #fff;
}
@media (hover: hover) {
    .rv-std_white .add-to-basket-popup-btn-bg-grey:hover { color: #fff; background-color: #a3302e; }
    .rv-std_white .add-to-basket-popup-btn:hover { background-color: #b83634; border-color: #b83634; }
}
.rv-std_white .rv-boxes_std { border-top-color: #e3e3e3; }
.rv-std_white .rv-boxes_std .rv-sect-title { color: #111; }

/* штатное окно под чёрной карточкой — как было */
.rv-std_dark .rv-boxes_std .rv-sect-title { color: #fff; }

@media (max-width: 767px) {
    /* Телефон: плитки по две в ряд в окне корзины. */
    .rv-boxes_n2 > .rv-boxtile,
    .rv-boxes_n3 > .rv-boxtile { flex: 1 1 calc(50% - 6px); max-width: calc(50% - 6px); }
    .rv-boxtile__pic { height: 110px; }
    .rv-boxtile__price { font-size: 1.5rem; }
    .rv-boxtile__add { font-size: 1.4rem; }
}

/* ══ КАРТОЧКА: БЛОК «ПОДАРОЧНАЯ УПАКОВКА» ════════════════════════════
   14.10.2026. Стоит сразу после «Комплектации» и набран её же классами
   (.rv-sect-title / .rv-sect-note), поэтому шрифты и отступы здесь не
   повторяются. Коробки — те же плитки, что в окне корзины; стоят рядом
   и листаются вбок.                                                  */
/* Сверху воздух: блок идёт сразу за «Комплектацией», вплотную они слипаются. */
.rv-pack { margin: 40px 0; }

.rv-pack__wrap { position: relative; margin-top: 18px; }

/* Ряд с прокруткой: полосы на десктопе не видно, шаг прокрутки — плитка. */
.rv-pack__row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.rv-pack__row::-webkit-scrollbar { display: none; }
.rv-pack__row > .rv-boxtile {
    flex: 0 0 220px;
    max-width: 220px;
    scroll-snap-align: start;
}

/* Стрелки — иконки сайта; скрипт прячет их, когда ряд помещается целиком. */
.rv-pack__arr {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    color: #111;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    cursor: pointer;
}
.rv-pack__arr_prev { left: -8px; }
.rv-pack__arr_next { right: -8px; }
/* display:flex выше перебивает атрибут hidden — гасим стрелку явно. */
.rv-pack__arr[hidden] { display: none; }
.rv-pack__arr .icon { fill: currentColor; }
@media (hover: hover) { .rv-pack__arr:hover { border-color: #a3302e; color: #a3302e; } }

@media (max-width: 767px) {
    /* Телефон: листаем пальцем, стрелки не нужны. */
    .rv-pack__arr { display: none; }
    .rv-pack__row > .rv-boxtile { flex: 0 0 60%; max-width: 60%; }
    .rv-pack { margin-bottom: 32px; }
}
/* ══ ОКНО БЫСТРОЙ ПОКУПКИ ПОД ТЕМУ КАРТОЧКИ ══════════════════════════
   14.10.2026. Как и окно корзины: белая карточка — белое окно, чёрная —
   прежнее чёрное. Класс ставит карточка товара, поэтому в каталоге и на
   других страницах окно не меняется.
   Селекторы с id не для красоты: исходные правила окна заданы через
   #callback-popup_new, и без id наши их не перебивают.               */
#callback-popup_new.rv-fast_white .callback-popup-content { background-color: #fff; color: #111; }
#callback-popup_new.rv-fast_white .callback-popup-title { color: #111; }
#callback-popup_new.rv-fast_white .callback-popup-btn-close:before,
#callback-popup_new.rv-fast_white .callback-popup-btn-close:after { background-color: rgba(0, 0, 0, .75); }

/* Поля: тёмный текст, та же подчёркивающая линия. */
/* 15.10.2026 — мало задать color: в detail-hide-old-popups.css полям этого
   окна прописан -webkit-text-fill-color: #fff, а он сильнее color. В белой
   теме из-за этого набранный текст оставался белым по белому — поле
   выглядело пустым, хотя значение в нём было. Задаём и заливку текста. */
#callback-popup_new.rv-fast_white .form-input {
    color: #111;
    -webkit-text-fill-color: #111;
    caret-color: #111;
    border-color: #c9c9c9;
}
#callback-popup_new.rv-fast_white .form-input::placeholder {
    color: #8a8a8a;
    -webkit-text-fill-color: #8a8a8a;
}
#callback-popup_new.rv-fast_white .form-label { color: #6f6f6f; }

/* Кнопку НЕ перекрашиваем. 15.10.2026: раньше здесь она в белой теме
   становилась красной, как «В корзину». Зелёный #29675F — фирменный цвет
   от Red Keds, он остаётся в обеих темах окна. */

/* Чекбоксы и согласие — тёмный текст, ссылки красные. */
#callback-popup_new.rv-fast_white .rv-agree__label,
#callback-popup_new.rv-fast_white .rv-agree__text a { color: #a3302e; }

/* ══ АВТОЗАПОЛНЕНИЕ БРАУЗЕРА В ОКНЕ БЫСТРОЙ ПОКУПКИ ════════════ autofill
   15.10.2026. Подставленный Chrome телефон рисовался светло-голубым, текст
   по нему белый — поле читалось как пустое.

   Почему ПЕРВАЯ правка помогла только в белой теме. В странице есть
   инлайновый <style>, и он идёт ПОСЛЕ наших файлов. В нём лежит

       #callback-popup_new .callback-form-input-wrapp .form-input:focus
           { … box-shadow: none; }

   Вес: id + два класса + :focus. Моё прежнее правило для тёмной темы
   (id + .form-input + :-webkit-autofill + :focus) весило столько же, а
   стояло раньше — и проигрывало: box-shadow сбрасывался, голубая заливка
   возвращалась. Белой теме лишний класс .rv-fast_white добавлял веса,
   поэтому там всё работало. Теперь в селекторе есть .callback-form-input-wrapp,
   и правило перевешивает в обеих темах.

   Цвета не выдуманы: поле прозрачное, фон даёт окно — #000 у тёмного,
   #fff у белого (оба заданы тем же инлайновым стилем). */
#callback-popup_new .callback-form-input-wrapp .form-input:-webkit-autofill,
#callback-popup_new .callback-form-input-wrapp .form-input:-webkit-autofill:hover,
#callback-popup_new .callback-form-input-wrapp .form-input:-webkit-autofill:focus,
#callback-popup_new .callback-form-input-wrapp .form-input:-webkit-autofill:active,
#header-callback_new_new_new .callback-form-input-wrapp .form-input:-webkit-autofill,
#header-callback_new_new_new .callback-form-input-wrapp .form-input:-webkit-autofill:hover,
#header-callback_new_new_new .callback-form-input-wrapp .form-input:-webkit-autofill:focus,
#header-callback_new_new_new .callback-form-input-wrapp .form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #000 inset;
    box-shadow: 0 0 0 1000px #000 inset;
    -webkit-text-fill-color: #fff;
    color: #fff;
    caret-color: #fff;
}

/* Сообщение об отказе в быстрой покупке. Показывается, когда ответ
   сервера не JSON или success:false — раньше форма в этом случае молчала.
   Цвет на чёрном окне светло-красный, на белом — фирменный тёмный. */
.rv-fast-error {
    margin-top: 14px;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #ff8d8b;
}
#callback-popup_new.rv-fast_white .rv-fast-error { color: #a3302e; }

/* Белая тема окна: поле белое, текст и курсор тёмные. */
#callback-popup_new.rv-fast_white .callback-form-input-wrapp .form-input:-webkit-autofill,
#callback-popup_new.rv-fast_white .callback-form-input-wrapp .form-input:-webkit-autofill:hover,
#callback-popup_new.rv-fast_white .callback-form-input-wrapp .form-input:-webkit-autofill:focus,
#callback-popup_new.rv-fast_white .callback-form-input-wrapp .form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #111;
    color: #111;
    caret-color: #111;
}

/* ── Подпись у заполненного поля ─────────────────────────────────────
   Решение Влада, 15.10.2026: пустое поле — подпись лежит внутри как
   подсказка; поле заполнено — подписи нет совсем. Одинаково в обеих
   темах, неважно, набрали руками или подставил браузер.

   Как было: подпись всплывала наверх. Для набранного руками это делал
   класс .input-not-empty (его вешает скрипт по событию ввода), для
   автозаполненного — ничего, потому что Chrome событий не шлёт и
   подпись оставалась лежать поверх текста. Теперь оба случая просто
   убирают подпись, и расхождение между ними исчезает само. */
#callback-popup_new .callback-form-label.input-not-empty,
#callback-popup_new .form-label.input-not-empty,
#callback-popup_new .callback-form-input-wrapp .form-input:-webkit-autofill ~ .callback-form-label,
#callback-popup_new .callback-form-input-wrapp .form-input:-webkit-autofill ~ .form-label,
#header-callback_new_new_new .callback-form-label.input-not-empty,
#header-callback_new_new_new .form-label.input-not-empty,
#header-callback_new_new_new .callback-form-input-wrapp .form-input:-webkit-autofill ~ .callback-form-label,
#header-callback_new_new_new .callback-form-input-wrapp .form-input:-webkit-autofill ~ .form-label {
    display: none;
}

/* ══ ОКНО БЫСТРОЙ ПОКУПКИ: ДОВОДКА ══════════════════════════ 15.10.2026

   1. Скругление. Берём тот же радиус, что у окна «Добавить компанию»
      в кабинете и у кнопок .rv-pzm__btn — 6px. Своего значения не
      придумываем, чтобы окна сайта не разъезжались. Обе темы. */
#callback-popup_new .callback-popup-content { border-radius: 6px; }

/*  2. Блок выбора подарочной коробки в быстрой покупке прячем.
      На бой упаковка не едет, а на стенде в этом окне она мешает
      смотреть саму форму. Разметку не трогаем — убираем показом,
      вернуть = снять это правило. */
#callback-popup_new .rv-fastbox { display: none; }

/*  3. Кнопка «Отправить» — зелёная #29675F (фирменный цвет Red Keds)
      в обеих темах окна. Неактивная, пока не стоит галочка согласия, —
      тот же зелёный, просто бледнее. Раньше неактивность рисовалась
      общим opacity:.45, и на чёрном фоне кнопка не бледнела, а темнела:
      задаём цвет явно, он одинаков в обеих темах. */
#callback-popup_new .btn-callback.green[disabled],
#callback-popup_new .btn-callback.green:disabled,
#callback-popup_new .btn-callback[disabled] {
    background-color: #6E9D96;
    color: #fff;
    opacity: 1;
}

/* ══ МОБИЛЬНЫЙ ПОДВАЛ ═══════════════════════════════════ rv-ft, 16.10.2026
   Пиксель в пиксель по макету podval-mobile-maket.html. Разметка — один
   инклуд include/footer-mobile.php, стили — только этот блок.

   Точка перелома 991px: именно на ней index.css прячет десктопный подвал
   (.footer-desktop{display:none}). Десктоп от 992 не трогаем.

   Первым делом гасим унаследованное. В подвал затекают правила со всего
   сайта — .footer a{font-size:18px} из markup/assets/css/style.css, свои
   margin у p и a, line-height от body. Из-за них ссылки документов шли
   18px и разъезжались на 16px вместо 5px. Поэтому внутри подвала сначала
   обнуляем отступы и размер у всех вложенных, а дальше задаём ровно то,
   что в макете.

   Все селекторы ниже начинаются с .footer намеренно. В index.css внутри
   того же медиазапроса лежит

       .footer div { padding-right:0; padding-left:0; margin-top:10px }

   вес (0,1,1) — выше, чем у одиночного класса. Из-за него каждый блок
   подвала получал margin-top:10px, и отступы макета (6, 14, 26, 28, 32)
   не доезжали. Префикс .footer даёт (0,2,0) и перевешивает. По той же
   причине .footer a{font-size:18px} из style.css перебивался раньше
   только у телефона — теперь у всех ссылок разом.
*/
@media (max-width: 991px) {

    .footer { padding-left: 0; padding-right: 0; }

    .footer .rv-ft,
    .footer .rv-ft * {
        margin: 0;
        padding: 0;
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
        font-family: inherit;
    }

    .footer .rv-ft {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 16px 40px;
        color: #fff;
        font-family: "ALS Sector", Arial, sans-serif;
        font-size: 1.4rem;
        line-height: 1.2;
        font-weight: 400;
    }
    .footer .rv-ft a { color: #fff; }

    .footer .rv-ft__metro { color: rgba(255, 255, 255, .5); display: block; }
    .footer .rv-ft__station { font-size: 1.8rem; line-height: 1.2; margin-top: 6px; }

    .footer .rv-ft__addr {
        font-size: 1.8rem;
        line-height: 1.2;
        margin-top: 14px;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }

    .footer .rv-ft .footer-mobile__phone,
    .footer .rv-ft__phone {
        font-family: "Abril Fatface", Georgia, serif;
        font-size: 3.6rem;
        line-height: 1;
        margin-top: 28px;
        white-space: nowrap;
        letter-spacing: -.2px;
    }
    /* Размер задаём и ссылке: текст номера рисует она, а .footer a из
       style.css:5458 держит её на 18px. */
    .footer .rv-ft .footer-mobile__phone a,
    .footer .rv-ft__phone a {
        font: inherit;
        letter-spacing: inherit;
        text-decoration: none;
        color: #fff;
    }

    .footer .rv-ft__callback { margin-top: 26px; }
    .footer .rv-ft .rv-ft__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 190px;
        height: 46px;
        background: #fff;
        color: #ae2a2c;
        border-radius: 6px;
        font-size: 1.7rem;
        line-height: 1;
        text-decoration: none;
    }

    .footer .rv-ft__soc {
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;
        margin-top: 28px;
    }
    .footer .rv-ft__soc a {
        display: flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
    }

    .footer .rv-ft__about {
        font-weight: 700;
        font-size: 1.3rem;
        line-height: 1.55;
        margin-top: 30px;
        max-width: 340px;
    }

    .footer .rv-ft__legal {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin-top: 32px;
        width: 100%;
    }
    .footer .rv-ft__pz { flex: 0 0 auto; display: block; width: 150px; height: auto; }

    .footer .rv-ft__docs {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        text-align: left;
    }
    .footer .rv-ft__docs > div { display: flex; gap: 7px; flex-wrap: wrap; }
    .footer .rv-ft__docs a {
        display: inline;
        font-weight: 400;
        font-size: 1.1rem;
        line-height: 1.3;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
        white-space: nowrap;
    }

    .footer .rv-ft__req {
        font-size: 1.15rem;
        line-height: 1.55;
        color: rgba(255, 255, 255, .55);
        margin-top: 32px;
    }
    .footer .rv-ft__req span { white-space: nowrap; }

    /* Цифры ИНН и ОГРН iOS принимает за телефон и красит своим шрифтом.
       Гасим то, что подставил Safari. Только внутри реквизитов. */
    .footer .rv-ft__req a,
    .footer .rv-ft__req a[x-apple-data-detectors],
    .footer .rv-ft__req a[href^="tel"] {
        color: inherit !important;
        font: inherit !important;
        letter-spacing: inherit !important;
        text-decoration: none !important;
        pointer-events: none;
        -webkit-text-size-adjust: none;
    }

    /* Плашка Лебедева — существующий блок al-credit, лежит в том же
       контейнере. Своей вёрстки не заводим, только отступы по макету. */
    /* 16.10.2026 — плашка стояла левее центра. Сброс выше обнулил у блока
       его прежние align-items/margin:auto, а .al-credit я сделал блочным —
       ссылка растянулась на всю ширину колонки, и плашка внутри прижалась
       к левому краю. Возвращаем центрирование самим блоком: колонка flex,
       align-items:center, ссылке — ширина ровно по плашке. */
    .footer .rv-ft .al-credit {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        /* gap: 0 обязателен. У .al-credit в базовом стиле row-gap: 8px —
           пока блок был block, зазор не работал, а с переходом на flex ожил
           и прибавился к отступам: до «Задизайнено…» стало 24 вместо 16,
           между подписями 18 вместо 10. Отступы держим только margin'ами. */
        gap: 0;
    }
    .footer .rv-ft .al-credit__brand {
        display: block;
        width: 100px;
        margin-top: 30px;
        align-self: center;
    }
    .footer .rv-ft .al-credit__logo { display: block; width: 100px; height: 42px; }
    .footer .rv-ft .al-credit__link {
        display: block;
        font-size: 1.5rem;
        line-height: 1.3;
        margin-top: 16px;
        text-decoration: none;
    }
    .footer .rv-ft .al-credit__link + .al-credit__link { margin-top: 10px; }

    @media (max-width: 374px) {
        .footer .rv-ft__pz { width: 126px; }
        .footer .rv-ft__legal { gap: 14px; }
    }
}

/* ══ КАРТОЧКА: ДОВОДКА ХАРАКТЕРИСТИК И ПОДЗАГОЛОВКОВ ═══════ 16.10.2026

   1. Подзаголовки «Всё то, что входит в стоимость товара» и «Подходит
      к этому товару» стояли по левому краю, тогда как заголовки над ними
      по центру. Ни .rv-sect-title, ни .rv-sect-note своего выравнивания
      не задают — оба наследуют его от контейнера, и в этих двух блоках
      оно расходилось. Задаём явно, только здесь. */
@media (max-width: 767px) {
    .kit .rv-sect-note,
    .rv-pack .rv-sect-note { text-align: center; }
}

@media (max-width: 767px) {
    /* 2. «В наличии:» переносилось на две строки: на мобильном подписи
          был разрешён перенос (white-space:normal в блоке .rv-props выше).
          Возвращаем nowrap — подпись остаётся одной строкой. */
    .rv-props .catalog-detail-props__label { white-space: nowrap; }

    /* 3. Сжимается пунктир, а не подпись. Было flex:1 0 84px — линия не
          могла стать короче 84px и выдавливала значение; теперь у неё нет
          неснижаемой ширины, и в узкой строке она ужимается первой. */
    .rv-props .catalog-detail-props__label::after {
        flex: 1 1 24px;
        min-width: 24px;
    }
}

/* ══ ПЛИТКА КОРОБКИ: АРТИКУЛ И ССЫЛКИ ══════════════════════ 16.10.2026
   1. Фото и название ведут на карточку коробки, в той же вкладке. Ссылки
      лежат ВНУТРИ прежних .rv-boxtile__pic / .rv-boxtile__name — вся
      раскладка плитки висит на этих классах, менять их нельзя.
      Ссылке в плашке фото нужна полная высота: высоту держит
      .rv-boxtile__pic, а img мерит свой max-height по прямому родителю.
   2. Между названием и ценой — артикул: 1.2rem против 1.4rem у названия,
      серый тот же, что у подписи .rv-sect-note. Плитка светлая в ОБЕИХ
      темах (в тёмной она стоит на плашке #F2F2F2 с тёмным текстом),
      поэтому второго, более светлого серого не нужно.
   3. Отступы ровные: название → 4px → артикул → 4px → цена. */
.rv-boxtile__pic .rv-boxtile__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Вид названия не меняется: цвет наследуется, подчёркивания нет. */
.rv-boxtile__name .rv-boxtile__link,
.rv-boxtile__pic .rv-boxtile__link {
    color: inherit;
    text-decoration: none;
}

/* Подчёркивание — только там, где есть настоящее наведение. */
@media (hover: hover) {
    .rv-boxtile__name .rv-boxtile__link:hover { text-decoration: underline; }
}

.rv-boxtile__art {
    margin-top: 4px;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: center;
    color: #6f6f6f;
}

/* Цена стоит теперь после артикула — выравниваем шаг. Плитки без артикула
   сохраняют прежние 6px (правило выше не тронуто). */
.rv-boxtile__art + .rv-boxtile__price { margin-top: 4px; }

/* ══ ПЛИТКИ В ОКНЕ «ТОВАР ДОБАВЛЕН В КОРЗИНУ»: БЕЗ ССЫЛОК ══ 16.10.2026
   Плитки в карточке и в окне рисует одна функция, поэтому ссылки попадают
   в оба места. Из окна уводить не нужно — картина уже в корзине, окно бы
   закрылось. Гасим только переход: артикул, фото, название и кнопка
   «Добавить» остаются на месте. В блоке карточки ссылки работают. */
.rv-boxes_std .rv-boxtile__link {
    pointer-events: none;
    cursor: default;
}

/* ══ СХЕМА РАЗМЕРОВ: ТЁМНАЯ ТЕМА ═══════════════════════════ 16.10.2026
   Правило выше задано как «.bg-white .rv-dim__svg», то есть только для
   белой карточки. У SVG в атрибуте стоит ширина в пикселях, и на тёмной
   карточке он не сжимался: у офортов с крупной рамой стековая схема
   доходит до ~374px и на 360px выезжала бы за экран. Повторяем те же
   свойства без привязки к теме; правило для .bg-white не трогаем. */
.rv-dim__svg {
    display: block;
    max-width: 100%;
    height: auto;
    font-family: "ALS-Sector", Arial, sans-serif;
}

/* ══ СХЕМА РАЗМЕРОВ: БЕЗ РАЗДУВАНИЯ ТЕКСТА ═════════════════ 16.10.2026
   Мобильный Chrome сам увеличивает мелкий текст (font boosting): подпись
   «Пластина», которой в SVG задано 12.4px, рисовалась 16px и вылезала за
   узкую пластину на размерную линию. Внутри схемы кегль — часть чертежа,
   он уже посчитан под размер фигуры, поэтому раздувание выключаем.
   Касается и схемы картин: там подписи на телефоне раздувало так же. */
.rv-dim-block,
.rv-dim,
.rv-dim__row,
.rv-dim__stack,
.rv-dim__svg,
.rv-dim__svg text {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
}

/* ══ КАРТОЧКА, ДЕСКТОП: ОТСТУПЫ КОЛОНОК И ЛИПКОСТЬ ════════ 16.10.2026
   Только там, где колонки стоят рядом. В index.css они расходятся по
   вертикали на 991 и распускаются через display:contents на 767, поэтому
   весь блок живёт от 992 и мобильного не касается.

   1. Отступы. Было: gap 30px и колонки по calc(50% - 15px), то есть фото
      прижато к левому краю контента и к середине, текст — к середине и к
      правому краю. Стало: gap 0, колонки ровно по половине и у каждой по
      32px слева и справа. Между колонками получается 64px, по краям — 32.
      Крошки, заголовок, цена и описание лежат внутри правой колонки и
      сдвигаются вместе с ней.

   2. Липкость. Обе колонки — position: sticky, выравнивание по верху
      (иначе flex растянул бы их до общей высоты, и липнуть было бы нечему).
      Значение top считает js/rv_sticky.js и кладёт в --rv-sticky-top:
      короткая колонка липнет верхом под шапкой, длинная — низом, чтобы был
      виден её конец. Когда обе кончились, дальше едет вся страница.

      sticky не работает, если у предка overflow не visible, а у .wrapper
      стоит overflow:hidden (он держит горизонтальную прокрутку, снимать
      нельзя). Меняем его на overflow:clip — тот так же обрезает, но не
      создаёт прокручиваемую область, и sticky продолжает считать по окну.
      Под @supports: браузер без clip останется с hidden — просто без
      липкости, раскладка при этом целая.                                */
@media (min-width: 992px) {
    .catalod-detail { gap: 0; }

    .catalod-detail__photo,
    .catalod-detail__main {
        width: 50%;
        padding-left: 32px;
        padding-right: 32px;
    }

    @supports (overflow: clip) {
        /* 16.10.2026 — clip вешаем ТОЛЬКО на страницу карточки: на остальных
           страницах .wrapper остаётся с прежним overflow:hidden. Признак —
           наличие .catalod-detail внутри. Браузер без :has() просто отбросит
           правило, и карточка останется без липкости, раскладка целая. */
        .wrapper:has(.catalod-detail) { overflow: clip; }

        .catalod-detail__photo,
        .catalod-detail__main {
            position: sticky;
            align-self: flex-start;
            top: var(--rv-sticky-top, 16px);
        }
    }
}
/* ══ ЗАГОЛОВКИ БЛОКОВ «ДРУГИЕ ТОВАРЫ» ═════════════════════ 16.10.2026
   «Другие товары производителя», «Собери всю коллекцию», «Рекомендуем»
   получили заголовок тем же стилем, что «Подарочная упаковка»:
   .rv-sect-title + .rv-sect-note. Кегль, шрифт, цвет и отступы приходят
   из общих правил выше — здесь только выравнивание: ни .rv-sect-title,
   ни .rv-sect-note своего text-align не задают, а наследуют от
   контейнера, и у .catalog-other оно своё. Задаём явно: десктоп слева,
   телефон по центру — как у блоков «Комплектация» и «Упаковка». */
.catalog-other > .rv-sect-title,
.catalog-other > .rv-sect-note {
    text-align: left;
}

@media (max-width: 767px) {
    .catalog-other > .rv-sect-title,
    .catalog-other > .rv-sect-note {
        text-align: center;
    }
}

/* ══ ШАПКА: ВЕРХНЯЯ СТРОКА ПО ЦЕНТРУ ══════════════════════ 16.10.2026
   Строка «О нас / Доставка и оплата / Магазины и контакты … телефон,
   обратный звонок, адрес» стояла ближе к красной полосе, чем к ряду с
   логотипом: сверху 21px, снизу 42px (замер getBoundingClientRect на
   1440). Ставим её ровно посередине, перераспределяя её же вертикальный
   padding — высота строки, а значит и всей шапки, не меняется:
   было 16 + 23 + 16 = 55, стало 26.2 + 23 + 5.8 = 55.
   Только десктоп: ниже 992 строка вообще скрыта (index.css). */
@media (min-width: 992px) {
    .header .header-top {
        padding-top: 26.2px;
        padding-bottom: 5.8px;
    }
}

/* --- Шапка: ховер верхней строки на светлой теме (16.10.2026) -------------
   На карточке товара и в корзине шапка светлая (#f2f2f2, класс body.bg-white),
   а ссылки верхней строки при наведении белели — становились не видны.
   На светлой теме ховер делаем #111; подчёркивание остаётся штатное.
   Иконки соцсетей — те же ссылки, их белый ховер лечится этим же правилом.
   Телефон не трогаем — с компьютера по нему не звонят, ховера у него нет.
   На чёрных страницах (главная, каталог) правило не действует — там белый
   ховер верен. Только hover: hover, иначе залипает на тач-экранах.
   ------------------------------------------------------------------------- */
@media (hover: hover) {
    .bg-white .header-top a:not([href^="tel:"]):hover,
    .bg-white .header-top a:not([href^="tel:"]):focus-visible,
    .bg-white .header-top .header-top__callback:hover {
        color: #111;
    }
}

/* ══ КАРТОЧКА: БЛОК «ПОДАРОЧНАЯ УПАКОВКА» ПО МАКЕТУ ═══════ 16.10.2026
   Макет и спецификация: ~/Desktop/Claude Manager/deploy/upakovka/
   upakovka-blok-maket.html — спецификация внизу файла источник истины.

   Всё заскоплено под .rv-pack: ТЕ ЖЕ плитки (.rv-boxtile) идут в штатное
   окно «Товар добавлен в корзину», и там вид остаётся прежним.

   Пока только белая тема: для чёрной Влад даст фото портфеля на чёрном
   фоне, тогда доделаем (правила .rv-pack_dark ниже не трогаем).
   ------------------------------------------------------------------- */

/* Ряд: три колонки, промежуток 8, плитки одной высоты — кнопки встают
   на одну нижнюю линию. Прокрутка остаётся: у товара может быть и три
   коробки, тогда «Упаковка на заказ» четвёртая и ряд листается. */
.rv-pack .rv-pack__row { gap: 8px; align-items: stretch; }
.rv-pack .rv-pack__row > .rv-boxtile {
    flex: 0 0 calc((100% - 16px) / 3);
    max-width: calc((100% - 16px) / 3);
}
/* У «Упаковки на заказ» слева 20px под слово «или» — она на столько же уже,
   поэтому три плитки по-прежнему занимают ровно ширину колонки. */
.rv-pack .rv-pack__row > .rv-boxtile_custom {
    flex-basis: calc((100% - 16px) / 3 - 20px);
    max-width: calc((100% - 16px) / 3 - 20px);
    margin-left: 20px;
}

/* Плитка: поля 12 со всех сторон, рамка 1px (у обычных прозрачная). */
.rv-pack .rv-boxtile {
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
}
.rv-pack .rv-boxtile_custom { position: relative; border-color: #d9d9d9; }

/* Фото: зона 150 (моб. 110), смешиваем с фоном — у снимков белый квадрат. */
.rv-pack .rv-boxtile__pic { height: 150px; margin-bottom: 0; }
.rv-pack .rv-boxtile__pic img { max-height: 150px; mix-blend-mode: multiply; }
/* У «Упаковки на заказ» снимок с прозрачным фоном — смешивать нечего,
   а multiply на чёрном съел бы его целиком. */
.rv-pack .rv-boxtile_custom .rv-boxtile__pic img { mix-blend-mode: normal; }

/* Текст по спецификации. */
.rv-pack .rv-boxtile__name  { margin-top: 16px; font-size: 14px; line-height: 1.35; color: #111; }
.rv-pack .rv-boxtile__art   { margin-top: 4px;  font-size: 12px; color: #6f6f6f; }
.rv-pack .rv-boxtile__price { margin-top: 4px;  font-size: 18px; font-weight: 700; color: #111; }
.rv-pack .rv-boxtile__h     { margin-top: 16px; font-size: 16px; font-weight: 700; line-height: 1.25; color: #111; text-align: center; }
.rv-pack .rv-boxtile__note  { margin-top: 8px;  font-size: 13px; line-height: 1.4; color: #6f6f6f; text-align: center; }

/* Кнопка прижата к низу, но от текста до неё всегда не меньше 16:
   отступ вешаем на элемент перед кнопкой, он у плиток разный
   (цена у коробки, описание у «Упаковки на заказ»). */
.rv-pack .rv-boxtile > *:nth-last-child(2) { margin-bottom: 16px; }
.rv-pack .rv-boxtile__add {
    margin-top: auto;
    height: 44px;
    font-size: 15px;
    border-radius: 6px;
}
.rv-pack .rv-boxtile__add_order {
    color: #fff;
    background: #39655d;
    border-color: #39655d;
}
@media (hover: hover) {
    .rv-pack .rv-boxtile__add_order:hover { background: #2e524c; border-color: #2e524c; }
}

/* «Или» сидит НА левой линии рамки и разрывает её: фон слова = фон карточки. */
.rv-pack .rv-boxtile__or {
    position: absolute;
    left: 0;
    top: 44%;
    transform: translate(-50%, -50%);
    padding: 6px 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #6f6f6f;
    background: #fff;
}
.rv-pack_dark .rv-boxtile__or { color: #9a9a9a; background: #000; }

/* Чёрная карточка — по разделу «Тёмная тема» спецификации макета.
   Коробки стоят на светлой плашке (правило выше по файлу), «Упаковка на
   заказ» — без плашки, рамкой. Снимок портфеля с прозрачным фоном
   (Влад прислал 16.10), поэтому своя плашка под фото ему не нужна —
   он одинаково стоит и на белой, и на чёрной карточке. */
.rv-pack_dark .rv-boxtile_custom { background: transparent; border-color: #3a3a3a; }
.rv-pack_dark .rv-boxtile_custom .rv-boxtile__h    { color: #fff; }
.rv-pack_dark .rv-boxtile_custom .rv-boxtile__note { color: #9a9a9a; }
/* Кнопка «Добавить» стоит на светлой плашке — фон у неё плашечный. */
.rv-pack_dark .rv-boxtile__add:not(.rv-boxtile__add_order):not(.rv-boxtile__add_done) { background: #f2f2f2; }

@media (max-width: 767px) {
    /* Ряд листается пальцем, плитка 60%; перед «Упаковкой на заказ» 28. */
    .rv-pack .rv-pack__row > .rv-boxtile,
    .rv-pack .rv-pack__row > .rv-boxtile_custom { flex-basis: 60%; max-width: 60%; }
    .rv-pack .rv-pack__row > .rv-boxtile_custom { margin-left: 28px; }
    .rv-pack .rv-boxtile__pic { height: 110px; }
    .rv-pack .rv-boxtile__pic img { max-height: 110px; }
}

/* ── «Обратный звонок» на карточке товара ──────────────────────────────
   Кнопка «Заказать» в плитке «Упаковка на заказ» открывает ШТАТНОЕ окно
   формы 4 из подвала. На товарных страницах gstyle отключён, а вид этого
   окна жил только в нём — поэтому оболочку задаём здесь, ровно теми же
   размерами, что у окна «Быстрая покупка» (fast_order/template.php).
   Правила включаются только с классом rv-cb_open, который ставит скрипт
   карточки, — на остальных страницах окно работает по-прежнему.
   -------------------------------------------------------------------- */
#callback-popup.rv-cb_open {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, .6);
    z-index: 999;
}
#callback-popup.rv-cb_open .callback-popup-content {
    width: 100%;
    max-width: 688px;
    max-height: 100%;
    margin: 0 auto;
    padding: 55px 54px 63px;
    position: relative;
    overflow-y: auto;
    border-radius: 6px;
    box-sizing: border-box;
}
#callback-popup.rv-cb_open .callback-popup-title { margin-bottom: 25px; font-size: 28px; line-height: 28px; }
#callback-popup.rv-cb_open .callback-popup-btn-close {
    display: block;
    position: absolute;
    top: 23px;
    right: 23px;
    width: 18px;
    height: 18px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}
#callback-popup.rv-cb_open .callback-popup-btn-close:before,
#callback-popup.rv-cb_open .callback-popup-btn-close:after {
    content: '';
    position: absolute;
    left: 1px;
    width: 19px;
    height: 3px;
    transform-origin: center left;
}
#callback-popup.rv-cb_open .callback-popup-btn-close:after  { top: 1px;    transform: rotate(45deg); }
#callback-popup.rv-cb_open .callback-popup-btn-close:before { bottom: 1px; transform: rotate(-45deg); }

#callback-popup.rv-cb_open .callback-form { padding: 0; }
#callback-popup.rv-cb_open .form-input-wrapp,
#callback-popup.rv-cb_open .callback-form-textarea-wrapp { position: relative; padding-top: 0; }
#callback-popup.rv-cb_open .form-input,
#callback-popup.rv-cb_open .form-input-textarea {
    width: 100%;
    padding: 20px 11px 15px;
    position: relative;
    z-index: 2;
    border: 0;
    border-bottom: 1px solid #c9c9c9;
    background-color: transparent;
    transition: border-bottom-color .3s;
}
#callback-popup.rv-cb_open .form-input-textarea { min-height: 88px; resize: vertical; }
#callback-popup.rv-cb_open .form-label {
    position: absolute;
    top: 20px;
    left: 11px;
    margin: 0;
    z-index: 1;
    font-size: 19px;
    font-weight: normal;
    color: #6f6f6f;
    transition: all .3s;
}
#callback-popup.rv-cb_open .form-input:focus ~ .form-label,
#callback-popup.rv-cb_open .form-input-textarea:focus ~ .form-label,
#callback-popup.rv-cb_open .form-label.input-not-empty { top: -5px; left: 0; font-size: 14px; }
#callback-popup.rv-cb_open .form-input-alert { font-size: 14px; color: #ac2c28; opacity: 0; }
#callback-popup.rv-cb_open .form-input.invalid ~ .form-input-alert { opacity: 1; }
#callback-popup.rv-cb_open .callback-form-btn-wrapp { padding-top: 41px; }
#callback-popup.rv-cb_open .btn-callback {
    display: block;
    width: 100%;
    padding: 12px 15px 16px;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    border: 0;
    border-radius: 5px;
}
#callback-popup.rv-cb_open .btn-callback.green { background-color: #39655d; }
@media (hover: hover) { #callback-popup.rv-cb_open .btn-callback.green:hover { background-color: #2e524c; } }
#callback-popup.rv-cb_open .callback-form-agree-info { margin-top: 14px; font-size: 13px; color: #6f6f6f; }
#callback-popup.rv-cb_open .hidden { display: none; }

/* Белая карточка — белое окно, чёрная — чёрное: как у «Быстрой покупки». */
#callback-popup.rv-cb_white .callback-popup-content { background-color: #fff; color: #111; }
#callback-popup.rv-cb_white .callback-popup-title { color: #111; }
#callback-popup.rv-cb_white .callback-popup-btn-close:before,
#callback-popup.rv-cb_white .callback-popup-btn-close:after { background-color: rgba(0, 0, 0, .75); }
#callback-popup.rv-cb_white .form-input,
#callback-popup.rv-cb_white .form-input-textarea { color: #111; -webkit-text-fill-color: #111; }

#callback-popup.rv-cb_dark .callback-popup-content { background-color: #000; color: #fff; }
#callback-popup.rv-cb_dark .callback-popup-title { color: #fff; }
#callback-popup.rv-cb_dark .callback-popup-btn-close:before,
#callback-popup.rv-cb_dark .callback-popup-btn-close:after { background-color: rgba(255, 255, 255, .8); }
#callback-popup.rv-cb_dark .form-input,
#callback-popup.rv-cb_dark .form-input-textarea { color: #fff; -webkit-text-fill-color: #fff; border-bottom-color: #6b6b6b; }
#callback-popup.rv-cb_dark .form-label { color: #6b6b6b; }

@media (max-width: 767px) {
    #callback-popup.rv-cb_open .callback-popup-content { padding: 48px 16px 32px; }
    #callback-popup.rv-cb_open .callback-popup-title { font-size: 22px; line-height: 26px; }
}

/* ══ КАРТОЧКА: «В НАЛИЧИИ» И ТЕЛЕФОН ══════════════════════ 16.10.2026
   Плашка и телефон стоят в один ряд, а заголовок «<Товар> в наличии!»
   не переносится никогда: при нехватке места переносится РЯД (телефон
   уходит под плашку), а не слово.

   Порога по ширине экрана здесь нет и не нужно: плашке задан
   min-width: min-content, то есть уже своего содержимого она не
   сжимается, и flex-wrap переносит ряд сам ровно тогда, когда пара не
   влезает. Прежнее правило с @media 1400 убрано — оно решало то же
   самое вручную и на узких ширинах рвало заголовок.

   Место под длинный заголовок освобождено внутри плашки: миниатюра
   96→72, зазор до текста 24→16, боковые поля 24→20. Самый длинный
   заголовок на сайте — «Религиозная скульптура в наличии!».
   ------------------------------------------------------------------- */
@media (min-width: 768px) {
    .stock-note { flex-wrap: wrap; }
    .stock-note__left { flex: 0 1 auto; min-width: min-content; }
    .stock-note__call { flex: 0 0 auto; }
    .stock-note__phone { white-space: nowrap; }

    .rv-stock-plate { gap: 16px; padding: 6px 20px; }
    .rv-stock-plate .stock-note__thumb { flex: 0 0 72px; width: 72px; height: 72px; }
    /* min-content у тела считается по заголовку — он в одну строку. */
    .rv-stock-plate .stock-note__body { min-width: min-content; }
    .rv-stock-plate .stock-note__title { white-space: nowrap; }
}

/* ══ КАРТОЧКА: ПОЛОСА ТЕГОВ ПОД КОЛОНКАМИ ════════════════ 16.10.2026
   Блок «# + теги» переехал из правой колонки отдельной полосой под
   обеими колонками (разметка — в element.php, тут только ширина и
   отступы). Сам вид блока задан в index.css: flex, «#» слева, теги
   в строку с переносом — его не трогаем.
   Мобильный не меняется: там блок и раньше шёл последним и во всю
   ширину, поэтому правила ниже только для десктопа.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .catalog-deatail-tags_strip {
        width: 100%;
        margin-top: 48px;
    }
}

/* Воздух под полосой тегов — как над ней. Зазор давал <main> своим
   padding-bottom: 100px (после полосы в разметке ничего нет, пустых
   блоков и min-height там тоже нет — замерено getBoundingClientRect).
   Трогаем только страницу карточки: :has() ловит main, у которого
   полоса тегов стоит прямым потомком, на остальных страницах 100px
   остаются. Мобильный не трогаем. */
@media (min-width: 992px) {
    main:has(> .catalog-deatail-tags_strip) { padding-bottom: 48px; }
}

/* ───────────────────────────────────────────────────────────────────────
   «Популярные бренды»: отклик на наведение. 18.10.2026, задание Влада.
   Логотипы белые и приглушены до opacity .5 (gstyle.css:4915) — поэтому
   «серый → белый» это просто .5 → 1, подменять файлы и красить фильтром
   не нужно. Наведение только под @media (hover: hover): на тач-экранах
   :hover залипает после касания. Фокус с клавиатуры вынесен из
   медиазапроса — он не зависит от мыши.
   ─────────────────────────────────────────────────────────────────── */
@media (hover: hover) {
    .brend-slider__item {
        cursor: pointer;
    }
    .brend-slider__item img {
        transition: opacity .25s ease, transform .25s ease;
    }
    .brend-slider__item:hover img {
        opacity: 1;
        transform: scale(1.04);
    }
}
.brend-slider__item:focus-visible img {
    opacity: 1;
    transform: scale(1.04);
    transition: opacity .25s ease, transform .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .brend-slider__item img,
    .brend-slider__item:hover img,
    .brend-slider__item:focus-visible img {
        transition: opacity .25s ease;
        transform: none;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   Адреса доставки в личном кабинете (19.10.2026, макет deploy/lk)

   Разметка в local/templates/rusvelikaia/include/personal/addresses.php,
   логика — js/rv_lk_address.js. Меню кабинета своё, штатное (.lk-menu):
   оно уже совпадает с макетом — серая плашка, точки, коричневый активный.
   ═══════════════════════════════════════════════════════════════════ */

.rv-adr { --rv-adr-card: #f4f4f4; --rv-adr-soft: #9a9a9a; --rv-adr-mute: #777; }

.rv-adr__h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    color: #111;
    margin: 0 0 28px;
}
.rv-adr__h3 {
    font-size: 2rem;
    line-height: 1.2;
    color: var(--rv-adr-mute);
    margin: 0 0 18px;
}

/* ─── Карточка адреса ─────────────────────────────────────────────── */
.rv-adr-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    background: var(--rv-adr-card);
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 12px;
}
.rv-adr-card_hidden { display: none; }
.rv-adr-card__pin { display: grid; place-items: center; }
.rv-adr-card__t {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.rv-adr-card__t b { font-weight: 400; font-size: 1.8rem; color: #111; }
.rv-adr-card__t span { font-size: 1.6rem; color: #555; }

.rv-adr-card__ed {
    all: unset;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--rv-adr-soft);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.rv-adr-card__del {
    all: unset;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
}
@media (hover: hover) {
    .rv-adr-card__ed:hover { color: #111; }
    .rv-adr-card__del:hover svg { stroke: #a8312c; }
}

/* Подтверждение удаления — строкой в самой карточке, не окном браузера. */
.rv-adr-card_ask { background: #fff; outline: 1.5px solid #111; }
.rv-adr-card__ask {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 1.5rem;
    color: #111;
    border-top: 1px solid #e6e6e6;
    padding-top: 16px;
}
.rv-adr-card__ask button {
    all: unset;
    cursor: pointer;
    font-size: 1.5rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.rv-adr-card__ask [data-rv-adr-yes] { color: #a8312c; }
.rv-adr-card__ask [data-rv-adr-no] { color: var(--rv-adr-soft); }

.rv-adr__more {
    all: unset;
    cursor: pointer;
    display: inline-block;
    margin: 6px 0 0 4px;
    font-size: 1.5rem;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ─── Форма ───────────────────────────────────────────────────────── */
.rv-adr__new { margin-top: 48px; }

.rv-adr-f {
    position: relative;
    display: block;
    border-bottom: 1.5px solid #111;
    padding: 30px 0 10px;
}
.rv-adr-f__label {
    position: absolute;
    top: 6px;
    left: 0;
    font-size: 1.4rem;
    color: var(--rv-adr-mute);
}
.rv-adr-f__inp {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    font-family: inherit;
    font-size: 1.9rem;
    line-height: 24px;
    color: #111;
    border-radius: 0;
    -webkit-appearance: none;
}
.rv-adr-f__inp:focus { outline: none; }
.rv-adr-f__inp::placeholder { color: #b5b5b5; }

.rv-adr__hint {
    margin: 10px 0 0;
    font-size: 1.3rem;
    color: var(--rv-adr-soft);
}
.rv-adr__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
    gap: 24px;
    margin-top: 22px;
}

.rv-adr__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.rv-adr__btn {
    all: unset;
    cursor: pointer;
    margin-top: 40px;
    width: 478px;
    max-width: 100%;
    height: 64px;
    background: #a8312c;
    color: #fff;
    font-size: 1.8rem;
    display: grid;
    place-items: center;
    border-radius: 4px;
}
.rv-adr__btn[disabled] { opacity: .6; cursor: default; }
.rv-adr__cancel {
    all: unset;
    cursor: pointer;
    margin-top: 40px;
    font-size: 1.5rem;
    color: var(--rv-adr-soft);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.rv-adr__msg { margin-top: 40px; font-size: 1.5rem; color: #2f7a3a; }
.rv-adr__msg_bad { color: #a8312c; }

/* Подсказки DaData: обёртка .rv-suggest уже описана в блоке оформления
   заказа, здесь только то, что отличается, — список прижат к линии поля. */
.rv-adr-f.rv-suggest { position: relative; }
.rv-adr-f .rv-suggest__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    border-radius: 0 0 8px 8px;
    padding: 6px 0;
    max-height: 320px;
    overflow-y: auto;
}
.rv-adr-f .rv-suggest__item {
    padding: 12px 20px;
    font-size: 1.6rem;
    color: #111;
    cursor: pointer;
}
.rv-adr-f .rv-suggest__item b { font-weight: 400; }
.rv-adr-f .rv-suggest__item:first-child,
.rv-adr-f .rv-suggest__item.is-active { background: #f4f4f4; }

/* ─── Выбор адреса в оформлении заказа ────────────────────────────── */
.rv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.rv-chip {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    min-width: 180px;
    max-width: 260px;
}
.rv-chip b { font-weight: 400; font-size: 1.6rem; color: #111; }
.rv-chip span {
    font-size: 1.4rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rv-chip.is-on { border-color: #111; background: #fafafa; }
.rv-chip_new {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #111;
    font-size: 1.6rem;
    min-width: 0;
}
@media (hover: hover) {
    .rv-chip:hover { border-color: #111; }
}
.rv-chips-note {
    margin: 22px 0 0;
    font-size: 1.3rem;
    color: #9a9a9a;
}

/* ─── Мобильная (одна колонка, меню кабинета листается вбок) ──────── */
@media (max-width: 991px) {
    /* Штатный кабинет прячет меню на узком экране целиком. Здесь оно
       нужно: без него из раздела адресов некуда уйти. */
    .lk__content .lk__sidebar {
        display: block;
        width: 100%;
        flex-shrink: 1;
    }
    .lk__content { flex-direction: column; gap: 28px; }
    .lk__main { width: 100%; }
    .lk-menu {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .lk-menu::-webkit-scrollbar { display: none; }
    .lk-menu__item { flex: 0 0 auto; }
    .lk-menu__item_line { margin-top: 0; padding-top: 0; border-top: 0; }
    .lk-menu__link {
        min-height: 44px;
        white-space: nowrap;
        font-size: 1.5rem;
        padding: 0 14px;
        gap: 10px;
    }
    .lk-menu__link::before { display: none; }
    .lk__exit { display: none; }
}
@media (max-width: 760px) {
    .rv-adr__h2 { font-size: 2.4rem; }
    .rv-adr-card {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        padding: 16px;
        gap: 12px 14px;
    }
    .rv-adr-card__ed { grid-column: 2; grid-row: 2; justify-self: start; }
    .rv-adr-card__del { grid-column: 3; grid-row: 1; }
    .rv-adr__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rv-adr__row .rv-adr-f:last-child { grid-column: 1 / -1; }
    .rv-adr__btn { width: 100%; }
    .rv-adr__foot { display: block; }
    .rv-adr__cancel, .rv-adr__msg { display: inline-block; margin-top: 18px; }
    .rv-chip { min-width: 0; flex: 1 1 calc(50% - 5px); max-width: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Оформление заказа: ошибки незаполненных полей (20.10.2026,
   макет deploy/oformlenie/oformlenie-oshibki-maket.html)

   Разметку ставит js/rv_checkout_valid.js в шаблоне sale.order.ajax/rv2026.
   Красные строки Битрикса наверху страницы убраны в template.php.
   ═══════════════════════════════════════════════════════════════════ */

.rv-fail {
    --rv-err: #c0282d;
    position: relative;
}

/* Линия поля и подпись краснеют вместе: одного цвета линии мало —
   на узком экране она попадает под клавиатуру. */
.rv-fail.form-site__item::after,
.rv-fail.js-form-site-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.5px;
    height: 1.5px;
    background: var(--rv-err);
}
.rv-fail .form-site__label { color: var(--rv-err); }
.rv-fail input { caret-color: var(--rv-err); }

/* Плитка доставки — ошибка адреса показывается на ней. */
.rv-fail.order-check { box-shadow: inset 0 0 0 1.5px var(--rv-err); border-radius: 10px; }

.rv-fail__msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 8px 0 0;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #c0282d;
    width: 100%;
}
.rv-fail__msg svg { flex: none; margin-top: 1px; }

.rv-fail__sum {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #fbecec;
    border-radius: 6px;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #7a1d1f;
    width: 100%;
}
.rv-fail__sum b { font-weight: 400; color: #c0282d; }
.rv-fail__sum_plain { background: #fbecec; }

/* Вздрагивание — один раз. Под «уменьшить движение» класс не вешается
   вовсе (см. reduceMotion() в скрипте), но правило дублируем: с ним
   анимация не сыграет, даже если класс поставят. */
@keyframes rv-fail-nudge {
    0%, 100% { transform: none; }
    30% { transform: translateX(-6px); }
    60% { transform: translateX(4px); }
}
.rv-fail_nudge { animation: rv-fail-nudge .35s ease 1; }

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

/* Поля контактов лежат в flex-строке по половине ширины; сообщение
   должно занимать всю строку и вставать под своим полем, а не рядом. */
.form-site__content { flex-wrap: wrap; }
.form-site__content .rv-fail__msg { flex: 0 0 100%; }
.form-site__content .rv-fail__sum { flex: 0 0 100%; order: -1; }

/* Поправка к блоку ошибок оформления (20.10.2026).
   Линию рисует сам input (border-bottom), а не ::after обёртки, иначе
   у поля в фокусе поверх красной полосы остаётся его собственная чёрная.
   Подпись краснеет правилом той же силы, что и штатное «поднятие» подписи
   при фокусе, — иначе у незаполненного поля она оставалась серой. */
.rv-fail.form-site__item::after,
.rv-fail.js-form-site-item::after { content: none; }

.form-site .rv-fail input[type=text],
.form-site .rv-fail input[type=email],
.form-site .rv-fail input[type=tel],
.form-site .rv-fail input[type=text]:focus,
.form-site .rv-fail input[type=email]:focus,
.form-site .rv-fail input[type=tel]:focus { border-bottom-color: #c0282d; }

.form-site .rv-fail input + .form-site__label,
.form-site .rv-fail input:focus + .form-site__label,
.form-site .rv-fail input:not(:placeholder-shown) + .form-site__label { color: #c0282d; }

/* Сообщение встаёт сразу под своим полем, без провала. */
.form-site__content .rv-fail__msg { margin: -10px 0 6px; }

/* ═══════════════════════════════════════════════════════════════════
   Окно «Добавлено в корзину» (20.10.2026,
   макет deploy/oformlenie/korzina-dobavleno-maket.html)

   Телефон — шторка снизу, компьютер — карточка под иконкой корзины.
   Разметку ставит js/rv_cart_added.js. Штатное окно
   #add-to-basket-popup в этом потоке больше не показывается.
   ═══════════════════════════════════════════════════════════════════ */

.rv-added { --rv-ad-mute: #8a8a8a; --rv-ad-red: #a8312c; }

.rv-added__box {
    background: #fff;
    box-sizing: border-box;
}
.rv-added__hd {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.7rem;
    color: #111;
}
.rv-added__hd svg { flex: none; }
.rv-added__x {
    all: unset;
    cursor: pointer;
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-right: -12px;
}

.rv-added__it {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}
.rv-added__im {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: #f4f4f4;
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
}
.rv-added__im img { max-height: 56px; max-width: 56px; }
.rv-added__tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-added__tx b { font-weight: 400; font-size: 1.5rem; line-height: 1.3; color: #111; }
.rv-added__tx span { font-size: 1.4rem; color: var(--rv-ad-mute); }

.rv-added__tot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0 16px;
    font-size: 1.5rem;
    color: #444;
}
.rv-added__tot b { font-weight: 400; font-size: 1.8rem; color: #111; }

.rv-added__b1,
.rv-added__b2 {
    all: unset;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 100%;
    height: 52px;
    border-radius: 4px;
    font-size: 1.6rem;
    box-sizing: border-box;
    text-decoration: none;
}
.rv-added__b1 { background: var(--rv-ad-red); color: #fff; }
.rv-added__b2 { margin-top: 10px; color: #111; border: 1px solid #d6d6d6; }

/* ─── Телефон: шторка снизу ──────────────────────────────────────── */
.rv-added_sheet { position: fixed; inset: 0; z-index: 10000; }
.rv-added_sheet .rv-added__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity .25s ease;
}
.rv-added_sheet.is-open .rv-added__dim { opacity: 1; }
.rv-added_sheet .rv-added__box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px 18px 0 0;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.rv-added_sheet.is-open .rv-added__box { transform: none; }
.rv-added__grip {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #ddd;
    margin: 0 auto 14px;
}
html.rv-added-lock, html.rv-added-lock body { overflow: hidden; }

/* ─── Компьютер: карточка под иконкой корзины ────────────────────── */
.rv-added_card {
    /* 21.10.2026 — прибито к экрану, а не к документу: при absolute окно
       рисовалось от начала страницы и при нажатии «В корзину» ниже шапки
       уезжало за верхний край. Точные top и right ставит rv_cart_added.js
       (низ шапки либо 16px от края, правый край — по корзине в шапке);
       значения ниже — запасные, если скрипт почему-то не отработал. */
    position: fixed;
    right: 16px;
    top: 16px;
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 10000;
}
.rv-added_card .rv-added__box {
    position: relative;
    border-radius: 10px;
    padding: 16px 20px 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
}
.rv-added_card.is-open .rv-added__box { opacity: 1; transform: none; }
.rv-added_card .rv-added__box::before {
    content: "";
    position: absolute;
    right: 30px;
    top: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
}
.rv-added_card .rv-added__hd { font-size: 1.6rem; }
.rv-added_card .rv-added__b2 {
    border: none;
    height: 40px;
    margin-top: 4px;
    color: var(--rv-ad-mute);
    font-size: 1.4rem;
}

/* Иконка корзины коротко подпрыгивает. */
@keyframes rv-added-bump {
    0%, 100% { transform: none; }
    30% { transform: translateY(-5px) scale(1.06); }
    60% { transform: translateY(0) scale(.98); }
}
.rv-added-bump { animation: rv-added-bump .45s ease 1; }

@media (prefers-reduced-motion: reduce) {
    .rv-added-bump { animation: none; }
    .rv-added_sheet .rv-added__box,
    .rv-added_card .rv-added__box,
    .rv-added_sheet .rv-added__dim { transition: none; }
}

/* Штатное окно в этом потоке не показываем — его содержимое (упаковка)
   скрипт переносит в новое. Саму разметку оставляем: на ней держится
   окно «Вы подписались на обновление товара». */
#add-to-basket-popup.active.rv-added-off { display: none; }

/* ─── Подарочная коробка строкой + тёмная тема (20.10.2026) ───────── */

.rv-added__pack { padding: 12px 0 4px; border-bottom: 1px solid #eee; }
.rv-added__pack-h { font-size: 1.3rem; color: #8a8a8a; margin-bottom: 8px; }
.rv-added__pack-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.rv-added__pack-row::-webkit-scrollbar { display: none; }

.rv-added__gift {
    all: unset;
    cursor: pointer;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    box-sizing: border-box;
}
.rv-added__gift-pic {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background: #f4f4f4;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: none;
    position: relative;
}
.rv-added__gift-pic img { max-width: 44px; max-height: 44px; }
.rv-added__gift-price { font-size: 1.3rem; color: #111; white-space: nowrap; }

.rv-added__gift.is-on { border-color: #2f7a3a; }
.rv-added__gift.is-on .rv-added__gift-pic::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2f7a3a url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.rv-added__gift[disabled] { opacity: .6; cursor: default; }

/* ─── Тёмная тема: правила те же, что у rv-std_dark ───────────────── */
.rv-added_dark .rv-added__box { background: #111; }
.rv-added_dark .rv-added__hd { color: #fff; }
.rv-added_dark .rv-added__tx b { color: #fff; }
.rv-added_dark .rv-added__tx span,
.rv-added_dark .rv-added__pack-h { color: #9a9a9a; }
.rv-added_dark .rv-added__tot { color: #b5b5b5; border-color: #2a2a2a; }
.rv-added_dark .rv-added__tot b { color: #fff; }
.rv-added_dark .rv-added__it,
.rv-added_dark .rv-added__pack { border-bottom-color: #2a2a2a; }
.rv-added_dark .rv-added__im,
.rv-added_dark .rv-added__gift-pic { background: #1d1d1d; }
.rv-added_dark .rv-added__gift { border-color: #333; }
.rv-added_dark .rv-added__gift-price { color: #e6e6e6; }
.rv-added_dark .rv-added__b2 { color: #fff; border-color: #3a3a3a; }
.rv-added_dark .rv-added__grip { background: #3a3a3a; }
.rv-added_dark .rv-added__x svg { stroke: #9a9a9a; }
.rv-added_dark.rv-added_card .rv-added__box::before { background: #111; }
.rv-added_dark.rv-added_card .rv-added__b2 { color: #9a9a9a; }

/* ─── Оптическое центрирование текста в кнопках (20.10.2026) ──────────
   У ALS Sector нижний внутренний отступ шрифта больше верхнего, поэтому
   при обычном центрировании (grid/flex по центру) центруется СТРОЧНЫЙ
   бокс, а не сами буквы: глифы садятся выше середины кнопки. Замер
   ink-бокса (canvas actualBoundingBoxAscent/Descent) показал устойчивое
   смещение ≈0,07em вверх во всех кнопках, независимо от кегля и ширины
   экрана.

   Лечим один раз и общим приёмом: верхний внутренний отступ 0,14em при
   фиксированной высоте и box-sizing:border-box сдвигает содержимое вниз
   ровно на половину — то есть на те самые 0,07em. Подбирать числа под
   каждую кнопку не нужно: правило масштабируется вместе с кеглем. */

.rv-added__b1,
.rv-added__b2 { padding-top: .14em; }

.rv-added__gift-price { position: relative; top: .07em; }

/* Кнопки оформления заказа: только эти, общий .btn по всему сайту не
   трогаем — он стоит в десятках мест с разной вёрсткой. */
.order .btn.btn_big,
.popup-delivery .delivery-form__btn .btn { padding-top: .14em; }

/* Поправка к оптическому центрированию (20.10.2026, по замерам ink-бокса).
   Общее правило 0,14em подошло не всем: у кнопок разный кегль и разное
   центрирование (grid против flex), и часть из них уехала вниз. Ниже —
   значения, выверенные замером для каждой кнопки отдельно; разница
   верх/низ после них в пределах 1px. */

/* «Продолжить покупки»: на компьютере она 14px и была центрована верно,
   отступ ей не нужен; на телефоне она 16px и смещена. */
.rv-added__b2 { padding-top: 0; }
.rv-added_sheet .rv-added__b2 { padding-top: .09em; }

/* Цена коробки: на широком экране смещение заметнее. */
.rv-added__gift-price { top: .07em; }
@media (min-width: 720px) { .rv-added__gift-price { top: .13em; } }

/* Оформление заказа. */
@media (max-width: 719px) { .order .btn.btn_big { padding-top: .125em; } }

/* «Сохранить» в окне доставки. */
.popup-delivery .delivery-form__btn .btn { padding-top: .07em; }
@media (max-width: 719px) { .popup-delivery .delivery-form__btn .btn { padding-top: .03em; } }

/* «Оформить заказ» на оформлении сидела ровно на границе допуска (0,9–1,0px).
   Подобрано замером: запас до 1px должен быть, а не впритык. */
.order .btn.btn_big { padding-top: .115em; }
@media (max-width: 719px) { .order .btn.btn_big { padding-top: .09em; } }

/* Кнопка в окне быстрой покупки: смещение самое большое из всех (−4,2px),
   у неё своя вёрстка со старых времён. Отступ 4px даёт сдвиг 2px — ровно
   половину, как и у остальных кнопок. */
#callback-popup_new .btn { padding-top: 4px; }

/* Поправка: кнопка быстрой покупки — не .btn, а .btn-callback, и у неё
   уже стоит padding-top 12px. Добавляем 4px: содержимое <button>
   центруется в своём боксе, поэтому сдвиг получается вдвое меньше
   добавки — те самые 2px, которых не хватало. */
#callback-popup_new .btn-callback { padding-top: 16px; }

/* Ниже по файлу эту кнопку перебивает сокращённая запись padding у правила
   той же силы. Поэтому берём специфичность выше — с классом green, —
   а не надеемся на порядок строк. */
#callback-popup_new .btn-callback.green { padding-top: 16px; }

/* Высоту кнопки менять не надо: у неё было 12px сверху и 16px снизу
   (итого 52px). Выравниваем 14/14 — сумма та же, текст опускается ровно
   на 2px, высота остаётся 52px. */
#callback-popup_new .btn-callback.green { padding-top: 14px; padding-bottom: 14px; }

/* ─── Карточка промокода в корзине (20.10.2026) ──────────────────────
   Карточек в блоке скидок сейчас одна (бонусов и скидки кабинета на
   сайте нет), а ширина у неё была «треть ряда» из макета с тремя
   карточками. От этого заголовок «Применить промокод» ломался на две
   строки, а в поле помещалось «Промоко». Расширяем только одиночную
   карточку — раскладку с тремя не трогаем. */
.bonus__list_single .bonus-item { width: min(520px, 100%); }
.bonus__list_single .bonus-item__title { white-space: nowrap; }
.bonus__list_single .coupon,
.bonus__list_single .coupon__item { width: 100%; }
.bonus__list_single .coupon__item { align-items: stretch; }
.bonus__list_single .coupon__field { flex: 1 1 auto; min-width: 0; width: auto; }
.bonus__list_single .coupon__field input[type=text] { width: 100%; min-width: 0; }

@media (max-width: 767px) {
    /* На узком экране карточка и так во всю ширину — возвращаем поле
       в общий поток, чтобы «+» не выдавливал его за край. */
    .bonus__list_single .bonus-item { width: 100%; }
    .bonus__list_single .coupon__item { width: 100%; }
    .bonus__list_single .bonus-item__title { white-space: normal; }
}
/* ── Мобильная: шторка «Контакты» и лента новинок. 19.10.2026 ──────── */

/* иконка трубки оптически мельче соседних — чуть подрастим */
.rv-tab__ic_phone { width: 25px; height: 25px; }

.rv-sheet { position: fixed; inset: 0; z-index: 200; }
.rv-sheet__back { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.rv-sheet__card {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff; color: #141413;
    border-radius: 14px 14px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
}
html.rv-sheet-open body { overflow: hidden; }
.rv-sheet__grip { width: 36px; height: 4px; border-radius: 2px; background: #d9d9d9; margin: 0 auto 10px; }
.rv-sheet__row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; text-decoration: none; color: inherit;
    border-bottom: 1px solid #efefef;
}
.rv-sheet__row:last-of-type { border-bottom: 0; }
.rv-sheet__ic { flex: 0 0 24px; width: 24px; height: 24px; color: #973833; }
.rv-sheet__ic svg { width: 24px; height: 24px; }
.rv-sheet__txt { display: flex; flex-direction: column; gap: 2px; }
.rv-sheet__txt b { font-weight: 400; font-size: 15px; line-height: 1.25; }
.rv-sheet__txt i { font-style: normal; font-size: 13px; color: #8a8a8a; }
.rv-sheet__hours { padding: 12px 0 0; font-size: 13px; color: #8a8a8a; text-align: center; }


/* ═══ Лента «Новинки» — перенос на бой 20.10.2026 ═══ */

/* ── Лента «Новинки»: скругление внешних углов ───────────────────────
   Радиус взят с баннеров Asfour/Златоуст: в самом файле он 9px при
   ширине 900, а показываются они на 1440 в 603px — значит 6,0 CSS px
   (на 390 — 332px ширины, то есть 3,3px, округляем до 4).
   Скругляем контейнер целиком с overflow: hidden: углы режутся только
   снаружи, стыки карточек и линии между ними остаются прямыми, а
   стрелка прокрутки (она внутри контейнера) не вылезает за скругление. */
.new-products-wrapp {
    border-radius: 6px;
    overflow: hidden;
}

@media (max-width: 719px) {
    .new-products-wrapp { border-radius: 4px; }
}

/* Скругление ленты «Новинки»: радиус 10px, как у рамки сайта.
   Было на .new-products-wrapp — и не работало: обёртка на 30px выше
   карточек (сверху пустое поле), её скруглённый угол приходился на
   пустоту, а белые карточки рисовал .owl-stage-outer своим прямым углом.
   Поэтому режем именно его — он совпадает с лентой пиксель в пиксель. */
.new-products-wrapp {
    border-radius: 0;
    overflow: visible;
}

.new-products-wrapp .owl-stage-outer {
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 719px) {
    .new-products-wrapp .owl-stage-outer { border-radius: 10px; }
}

/* ── Лента «Новинки»: карточки отдельными плитками ───────────────────
   Прежнее скругление всей ленты убрано. Теперь каждая белая карточка —
   своя плитка: радиус 6px (как у баннеров) и щель 4px слева, сквозь неё
   виден чёрный фон. Разделители (border 1px #2d2d2d) гасим прозрачным
   цветом, а не удалением: ширина коробки остаётся прежней.
   Ширину карточки уменьшаем ровно на щель, поэтому правый край ленты
   и число карточек в ряду не меняются. Чёрный блок «105» не трогаем. */
.new-products-wrapp .owl-stage-outer {
    border-radius: 0;
}

.new-products .owl-item .catalog-section-item.new_product-main {
    margin-left: 4px;
    width: calc(100% - 4px);
    border-color: transparent;
    border-radius: 6px;
}

/* Лента новинок: блок «N новых изделий» строкой сверху, карточки
   листаются пальцем. Карусель на мобильной гасится скриптом шаблона. */
.rv-nov-head { display: none; }

@media (max-width: 719px) {
    .rv-nov-head {
        display: block;
        background: #111;
        border-radius: 6px;
        padding: 14px 16px;
        margin: 0 0 8px;
    }
    .rv-nov-head .teaser-digit { margin: 0; line-height: 1; }
    .rv-nov-head .teaser-digit a { font-size: 44px; color: #fff; text-decoration: none; }
    .rv-nov-head .teser-sign { display: block; margin-top: 4px; font-size: 13px; color: #cfcfcf; text-decoration: none; }

    .new-products.rv-nov-plain {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .new-products.rv-nov-plain::-webkit-scrollbar { display: none; }
    .new-products.rv-nov-plain > .catalog-section-item {
        flex: 0 0 44vw;
        width: 44vw;
        margin: 0;
        scroll-snap-align: start;
        border-radius: 6px;
        border-color: transparent;
    }
    .new-products.rv-nov-plain > .teaser { display: none; }
}

@media (max-width: 719px) {
    /* «N новых изделий» — не сверху, а слева от карусели, как на десктопе:
       это первая плитка ленты, дальше карточки. */
    .rv-nov-head { display: none; }
    .new-products.rv-nov-plain > .teaser {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 0 0 44vw;
        width: 44vw;
        padding: 14px 16px;
        background: #111;
    }
    .new-products.rv-nov-plain > .teaser .teaser-digit { margin: 0; line-height: 1; }
    .new-products.rv-nov-plain > .teaser .teaser-digit a { font-size: 44px; color: #fff; text-decoration: none; }
    .new-products.rv-nov-plain > .teaser .teser-sign { display: block; margin-top: 4px; font-size: 13px; color: #cfcfcf; text-decoration: none; }
}

@media (max-width: 719px) {
    /* Цифра новинок — крупная, как была. (Правки слайдера Asfour из этого
       же блока на стенде в волну не входят — здесь только новинки.) */
    .new-products.rv-nov-plain > .teaser .teaser-digit a { font-size: 72px; }
    .new-products.rv-nov-plain > .teaser .teser-sign { font-size: 12px; }
}

@media (max-width: 719px) {
    /* Карточка 44vw узкая, а картинка внутри осталась 210px и вылезала —
       из-за этого лента казалась высокой и пустой. Картинку вписываем в
       ширину карточки, высоту карточки отпускаем. */
    .new-products.rv-nov-plain > .catalog-section-item { height: auto; }
    .new-products.rv-nov-plain .new_product-main-pic {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .new-products.rv-nov-plain .new_product-main-pic img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

@media (max-width: 719px) {
    /* Откат подгонки: внутренняя вёрстка карточки рассчитана на ширину
       ~230px (как на бою) — при 44vw картинка и подпись наезжали друг на
       друга. Возвращаем боевую ширину и боевую высоту, меняется только
       способ прокрутки (пальцем, со snap) и скругление. */
    .new-products.rv-nov-plain > .catalog-section-item {
        flex: 0 0 230px;
        width: 230px;
        height: 370px;
    }
    .new-products.rv-nov-plain .new_product-main-pic {
        width: 210px;
        max-width: 210px;
        height: 210px;
        aspect-ratio: auto;
    }
    .new-products.rv-nov-plain .new_product-main-pic img {
        width: auto;
        height: auto;
        object-fit: initial;
    }
    .new-products.rv-nov-plain > .teaser { flex: 0 0 230px; width: 230px; }
}

/* ── Мобильное меню: раскрывающиеся пункты. 20.10.2026 ──────────────
   «Какой праздник», «Для кого», «Материал», «Стили», «Бренды» раньше
   вели на страницы, которых на бою нет. Теперь это кнопки: список
   раскрывается внутри меню (наполняет rv-mobile.js из вкладок меню
   каталога). Кнопке возвращаем вид обычного пункта. */
.rv-menu-fold__btn {
    width: 100%;
    background: none;
    border: 0;
    padding: 0 0 0 17px;
    font: inherit;
    font-size: 2rem;
    color: #B4B4B4;
    text-align: left;
    cursor: pointer;
}
.rv-menu-fold__sub {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height .3s ease;
}
.rv-menu-fold.is-open > .rv-menu-fold__btn { color: var(--color-primary); }
.rv-menu-fold.is-open > .rv-menu-fold__sub { margin-top: 20px; }

/* иконка Max в шторке «Контакты» — монохромная, как соседние */
.rv-sheet__ic svg,
.rv-sheet__ic img { width: 24px; height: 24px; }


/* ── Ошибки оформления: общий блок над формой. 20.10.2026 ───────────
   Пока проверка полей снята, сервер отвечает текстом — печатаем его
   заметно, но без драмы: светлая плашка в цвет бренда. */
.order__errors {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fdecec;
    color: #ac2c28;
    font-size: 14px;
    line-height: 1.4;
}
.order__errors-item + .order__errors-item { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   Скругление внутренних углов красной рамки. 18.10.2026, задание Влада.

   Рамка — это border: 20px #AC2C28 у body (на мобильной 10px). Скруглить
   её через border-radius нельзя: тогда скруглятся и внешние углы страницы,
   а содержимое body радиусом не обрезается — чёрная подложка всё равно
   лезла бы в угол квадратом.

   Поэтому углы закрываем «уголками» — псевдоэлементами на красных полосах,
   которые и образуют стык с подложкой: сверху это .main-info, снизу —
   подвал. В каждом уголке radial-gradient: внутри круга прозрачно, снаружи
   красный, то есть вырезана ровно четверть круга нужного радиуса.
   Разметка не меняется, обе темы работают одинаково: цвет берём у рамки.
   ═══════════════════════════════════════════════════════════════════ */

.main-info,
.footer {
    position: relative;
}
.main-info::after,
.footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 3;
    pointer-events: none;
}
/* верхний стык: уголки уходят вниз от красной полосы */
.main-info::after {
    top: 100%;
    background:
        radial-gradient(circle 10px at 10px 10px, transparent 99.5%, #AC2C28 100%) left  top / 10px 10px no-repeat,
        radial-gradient(circle 10px at 0    10px, transparent 99.5%, #AC2C28 100%) right top / 10px 10px no-repeat;
}
/* нижний стык: уголки уходят вверх от подвала */
.footer::before {
    bottom: 100%;
    background:
        radial-gradient(circle 10px at 10px 0, transparent 99.5%, #AC2C28 100%) left  bottom / 10px 10px no-repeat,
        radial-gradient(circle 10px at 0    0, transparent 99.5%, #AC2C28 100%) right bottom / 10px 10px no-repeat;
}

@media (max-width: 719px) {
    .main-info::after,
    .footer::before { height: 8px; }
    .main-info::after {
        background:
            radial-gradient(circle 8px at 8px 8px, transparent 99.5%, #AC2C28 100%) left  top / 8px 8px no-repeat,
            radial-gradient(circle 8px at 0   8px, transparent 99.5%, #AC2C28 100%) right top / 8px 8px no-repeat;
    }
    .footer::before {
        background:
            radial-gradient(circle 8px at 8px 0, transparent 99.5%, #AC2C28 100%) left  bottom / 8px 8px no-repeat,
            radial-gradient(circle 8px at 0   0, transparent 99.5%, #AC2C28 100%) right bottom / 8px 8px no-repeat;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   Подвал, десктоп (≥992px). 23.10.2026, макет deploy/podval/podval-desktop-maket.html.
   Три ряда через линию: связаться · каталог и покупателям · юридическое.
   Мобильный подвал (.footer-mobile / .rv-ft*) этим блоком не затрагивается —
   всё внутри @media (min-width: 992px).
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .rv-fd {
        --rv-fd-w7: rgba(255, 255, 255, .72);
        --rv-fd-w5: rgba(255, 255, 255, .5);
        --rv-fd-ln: rgba(255, 255, 255, .22);
        color: #fff;
        font-family: var(--font-site), Arial, sans-serif;
        padding: 56px 0 34px;
    }
    .rv-fd a { color: inherit; text-decoration: none; }
    .rv-fd a:hover { color: #fff; text-decoration: underline; }

    .rv-fd__row { padding-bottom: 38px; border-bottom: 1px solid var(--rv-fd-ln); }
    .rv-fd__row_menu { padding-top: 36px; }
    .rv-fd__row_legal { padding: 30px 0 0; border-bottom: 0; }

    /* ── ряд 1: связаться ── */
    .rv-fd__row_contact { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }
    .rv-fd__phone {
        font-family: var(--font-abril), serif;
        font-size: 64px; line-height: 1; letter-spacing: .005em; white-space: nowrap;
    }
    /* с компьютера по номеру не позвонить: оставляем его текстом — ни подчёркивания,
       ни смены цвета. Сама ссылка tel: в разметке остаётся: на ней подмена Ройстата. */
    .rv-fd__phone a,
    .rv-fd__phone a:hover { color: #fff; text-decoration: none; cursor: default; }
    .rv-fd__sub { display: flex; gap: 28px; margin-top: 16px; font-size: 17px; color: var(--rv-fd-w7); flex-wrap: wrap; }
    .rv-fd__sub span { white-space: nowrap; }
    .rv-fd__sub a { color: #fff; }
    .rv-fd__cb { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
    .rv-fd__cb:hover { text-decoration: underline; text-decoration-color: currentColor; }

    .rv-fd__k { font-size: 14px; color: var(--rv-fd-w5); margin-bottom: 8px; }
    .rv-fd__addr { font-size: 20px; line-height: 1.35; }
    .rv-fd__hours { font-size: 17px; color: var(--rv-fd-w7); margin-top: 8px; }
    .rv-fd__soc { margin-top: 18px; }
    .rv-fd__soc .social__list { display: flex; gap: 18px; align-items: center; }

    /* ── ряд 2: каталог и покупателям ── */
    .rv-fd__row_menu { display: grid; grid-template-columns: 3fr 1fr; gap: 48px; }
    .rv-fd__row_menu .rv-fd__k { margin-bottom: 16px; }
    .rv-fd .footer-catalog-menu {
        columns: 3; column-gap: 32px;
        list-style: none; margin: 0; padding: 0;
        font-size: 17px; line-height: 1.95;
    }
    .rv-fd .footer-catalog-menu__item { break-inside: avoid; }
    .rv-fd .footer-catalog-menu__item a { display: block; }
    .rv-fd__list { list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.95; }
    .rv-fd__list a { display: block; }

    /* у ссылок подвала в старом CSS висит margin-bottom: 30px — в колонках
       он давал провалы между пунктами. Гасим только внутри нового подвала. */
    .rv-fd .footer-catalog-menu__item a,
    .rv-fd__list a { margin: 0; }
    .rv-fd .footer-catalog-menu__item { margin: 0; }

    /* юридические ссылки идут одной строкой, а не столбиком: в старом CSS
       у .footer__polit a стоит display:block с большей специфичностью */
    .footer .rv-fd .rv-fd__docs a { display: inline-block; width: auto; margin: 0; }
    /* телефон: размер задаём и самой ссылке — у .footer-contacts__val a свой */
    .footer .rv-fd .rv-fd__phone a { font-size: inherit; line-height: inherit; font-family: inherit; }
    /* пункты «Покупателям»: гасим отступ списка из старого CSS */
    .footer .rv-fd .rv-fd__list .footer-menu__item { margin: 0; }
    .footer .rv-fd .rv-fd__req { white-space: normal; }

    /* ── ряд 3: юридическое ── */
    .rv-fd__row_legal { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; }
    /* .footer__polit от 16.10 ставит flex-direction: column — в новом подвале
       документы идут одной строкой, поэтому направление задаём явно. */
    .rv-fd__docs { display: flex; flex-direction: row; gap: 24px; flex-wrap: wrap; font-size: 15px; margin-bottom: 10px; }
    .rv-fd__pz { margin: 14px 0 10px; }
    .rv-fd__pzl { display: block; height: 32px; width: auto; }
    .rv-fd__req,
    .rv-fd__info { font-size: 14px; line-height: 1.6; color: var(--rv-fd-w7); max-width: 760px; margin: 0 0 6px; }

    .rv-fd__al { text-align: right; font-size: 14px; color: var(--rv-fd-w7); line-height: 1.5; }
    .rv-fd__al .al-credit__link { display: block; color: var(--rv-fd-w7); }
    .rv-fd__al .al-credit__link:last-child { color: #fff; }

    /* в макете узкий десктоп сжимает поля */
    @media (max-width: 1365px) {
        .rv-fd { padding-top: 44px; }
        .rv-fd__phone { font-size: 52px; }
        .rv-fd__row_contact { gap: 32px; }
        .rv-fd__row_menu { gap: 32px; }
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   Подвал, правки 25.10.2026.
   1. Плашка студии на десктопе получалась полупрозрачной: цвет ей давало
      .rv-fd__al { color: var(--rv-fd-w7) } — белый на 72%, и логотип
      (fill: currentColor), и строка «Задизайнено…» выходили розоватыми
      на красном. Прозрачности в самом SVG нет. Красим в чистый белый.
   2. Логотип «Презенталь» — вдвое крупнее, пропорционально.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .footer .rv-fd .rv-fd__al .al-credit__brand,
    .footer .rv-fd .rv-fd__al .al-credit__brand svg,
    .footer .rv-fd .rv-fd__al .al-credit__brand .al-credit__logo,
    .footer .rv-fd .rv-fd__al .al-credit__link {
        color: #fff;
        opacity: 1;
    }
    /* «Презенталь»: вдвое крупнее прежних 32px и минус 20% — 51px */
    .footer .rv-fd .rv-fd__pzl { height: 51px; }
}

/* На мобильном «Презенталь» оставлен прежним (150px): он стоит в одной
   строке со списком документов, и вдвое больший знак выезжает из колонки
   и обрезается. Увеличивать там — только вместе с перестройкой ряда. */


/* ═══════════════════════════════════════════════════════════════════════
   Подвал, десктоп: выравнивания по макету podval-desktop-maket-v2.html
   (25.10.2026). Шрифты и размеры прежние — меняются только выравнивание
   и отступы. Мобильный подвал не затрагивается: всё внутри min-width 992.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* ряд 1: адрес начинается вверху, вровень с телефоном, а «обратный
       звонок» и почта — сразу под телефоном, на уровне второй строки адреса */
    .rv-fd .rv-fd__row_contact { align-items: start; }
    .rv-fd .rv-fd__sub { margin-top: 10px; }

    /* ряд 3 идёт столбиком: ссылки → логотипы с подписями → абзац */
    .rv-fd .rv-fd__row_legal { display: block; padding-top: 28px; }
    .rv-fd .rv-fd__docs { line-height: 1; margin-bottom: 0; }

    /* два логотипа и подписи под ними: левая колонка тянется, правая по месту */
    .rv-fd__lg { display: grid; grid-template-columns: 1fr auto; gap: 32px; margin-top: 32px; }
    .rv-fd__lgcol { display: flex; flex-direction: column; align-items: flex-start; }

    /* одинаковая высота логотипов и общая верхняя линия */
    .rv-fd__logorow { height: 51px; display: flex; align-items: stretch; margin: 0 0 22px; }
    .footer .rv-fd .rv-fd__pz { margin: 0 0 22px; }
    .footer .rv-fd .rv-fd__pzl { height: 51px; width: auto; display: block; }
    .footer .rv-fd .rv-fd__logorow .al-credit__brand { display: block; height: 51px; line-height: 0; }
    .footer .rv-fd .rv-fd__logorow .al-credit__logo { display: block; height: 51px; width: auto; }

    /* базовый .al-credit — flex-колонка с margin-top 2.4rem и gap 8px:
       из-за них правый логотип стоял на 24px ниже левого, а строки
       расходились. Внутри сетки логотипов гасим и то, и другое. */
    .footer .rv-fd .rv-fd__lg .al-credit { margin: 0; gap: 0; }
    .footer .rv-fd .rv-fd__lg .al-credit a { margin: 0; }

    /* реквизиты и подпись студии — строка в строку */
    .footer .rv-fd .rv-fd__ln { font-size: 14px; line-height: 26px; margin: 0; }
    .footer .rv-fd .rv-fd__lgcol .rv-fd__req { color: var(--rv-fd-w7); max-width: none; margin: 0; }
    /* блок студии: текст по левому краю, правый край — по краю сетки */
    .footer .rv-fd .rv-fd__al { text-align: left; }
    .footer .rv-fd .rv-fd__al .rv-fd__ln,
    .footer .rv-fd .rv-fd__al .al-credit__link { color: #fff; display: block; }
    /* у .al-credit__link свой line-height 22.4px с !important — он сбивал
       строки правого блока относительно реквизитов на 3px */
    .footer .rv-fd .rv-fd__al .al-credit__link {
        font-size: 14px !important;
        line-height: 26px !important;
    }

    /* абзац про «Русь Великую» — под реквизитами */
    .footer .rv-fd .rv-fd__info { margin: 18px 0 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   КРАСНЫЕ БЛОКИ ГЛАВНОЙ — без чёрных полей по бокам. 21.10.2026.

   Блоки с классом .red-background («категории» с иконками, «Праздники»,
   «Дорогие подарки и сувениры») лежат внутри <main>, у которого поля
   25px (до 767px — 20px). Из-за них между красным блоком и красной
   рамкой сайта оставалась чёрная полоса.

   Фон вынесен на эти поля прозрачной рамкой: background-clip по
   умолчанию border-box, поэтому красное красится и под прозрачной
   рамкой, а содержимое блока (иконки, заголовки, карусель, текст)
   остаётся ровно на месте — двигается только фон. Отрицательные поля
   компенсируют ширину рамки, горизонтальной прокрутки не появляется.

   Цвета проверены getComputedStyle: у блоков и у рамки сайта
   (border у body) один и тот же #AC2C28 — стык не виден.
   Низ к подвалу НЕ сведён: подвал красится другим тоном (#AD2B2A),
   решение за Владом.

   Эти блоки есть только на главной (и на служебной index_seo.php);
   чёрные блоки (подборки товаров, «Самовары» и прочие) не затронуты.
   ═══════════════════════════════════════════════════════════════════ */

.red-background {
    margin-left: -25px;
    margin-right: -25px;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

@media (max-width: 767px) {
    .red-background {
        margin-left: -20px;
        margin-right: -20px;
        border-left-width: 20px;
        border-right-width: 20px;
    }
}

/* Низ главной встык к подвалу: у <main> поле снизу 100px, и между
   «Дорогие подарки и сувениры» и подвалом оставалась чёрная полоса
   со скруглением от рамки сайта. Снимаем её отрицательным полем —
   тем же приёмом, что у готового класса .last-elem. Разрешение Влада
   21.10.2026: своди, хотя подвал красится другим тоном (#AD2B2A
   против #AC2C28 у блока). */
.seo-description.red-background { margin-bottom: -100px; }


/* ═══════════════════════════════════════════════════════════════════
   ПРЕЛОАДЕР ОПЛАТЫ. 26.10.2026.

   Между «Оформить заказ» и QR-кодом Плайта проходит пара секунд, и всё
   это время покупатель видел страницу «Спасибо» с кнопкой «Оплатить
   заказ» — и нажимал её. Каждое такое нажатие — повторная регистрация
   того же заказа у банка; 26.10 на этом оплата ломалась с «Signature
   incorrect». Теперь поверх страницы висит прелоадер: фон размыт,
   нажать некуда, запасная ссылка появляется через 10 секунд.
   ═══════════════════════════════════════════════════════════════════ */

.rv-payload {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.rv-payload__box {
    max-width: 420px;
    text-align: center;
    color: #161616;
    font-family: var(--font-site), Arial, sans-serif;
}
.rv-payload__spin {
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    border: 3px solid rgba(168, 49, 44, .25);
    border-top-color: #a8312c;
    border-radius: 50%;
    animation: rv-payload-spin 0.9s linear infinite;
}
@keyframes rv-payload-spin { to { transform: rotate(360deg); } }

.rv-payload__title { font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
.rv-payload__hint  { font-size: 15px; line-height: 1.5; color: #55555a; }
.rv-payload__link {
    display: inline-block;
    margin-top: 18px;
    font-size: 15px;
    color: #a8312c;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* страница под прелоадером не должна прокручиваться «из-под» него */
.order_paywait { pointer-events: none; }
.order_paywait .rv-payload { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    .rv-payload__spin { animation-duration: 2.4s; }
}


/* ═══════════════════════════════════════════════════════════════════
   СТРАНИЦА ПОСЛЕ ОПЛАТЫ /payment-success/. 26.10.2026,
   макет deploy/oformlenie/oplata-proshla-maket.html.
   Заголовок — гарнитурой сайта (как «Корзина» и «Заказ оформлен»),
   Oswald из макета не тянем.
   ═══════════════════════════════════════════════════════════════════ */

.rv-ps {
    --rv-ps-soft: #8a8785;
    --rv-ps-line: #e8e6e4;
    --rv-ps-card: #f5f5f5;
    --rv-ps-red:  #a33533;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 24px 72px;
    box-sizing: border-box;
    color: #111;
    font-family: var(--font-site), Arial, sans-serif;
}
.rv-ps__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rv-ps__wrap { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }

.rv-ps__mark {
    width: 72px; height: 72px; border-radius: 50%;
    margin: 0 auto 26px; display: grid; place-items: center;
}
.rv-ps__mark svg { width: 34px; height: 34px; }
.rv-ps__mark_ok   { background: #ecf5ee; }
.rv-ps__mark_fail { background: #fbefee; }
.rv-ps__mark_wait { background: #f3f3f3; }
.rv-ps__spin {
    width: 30px; height: 30px; border-radius: 50%;
    border: 3px solid rgba(17,17,17,.18); border-top-color: #111;
    animation: rv-ps-spin .9s linear infinite;
}
@keyframes rv-ps-spin { to { transform: rotate(360deg); } }

.rv-ps__h1 {
    font-family: var(--font-grotesk), var(--font-site), Arial, sans-serif;
    font-size: 4.8rem; line-height: 1.1; color: #000; margin: 0;
}
.rv-ps__sub { margin-top: 16px; font-size: 17px; line-height: 1.5; color: #55514f; }
.rv-ps__sub_small { font-size: 15px; }
.rv-ps__timer { margin-top: 10px; font-size: 15px; color: var(--rv-ps-red); }

/* карточка заказа */
.rv-ps__ord {
    margin: 44px auto 0; text-align: left;
    border: 1px solid var(--rv-ps-line); border-radius: 20px; overflow: hidden;
}
.rv-ps__ordh {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 22px 28px; background: var(--rv-ps-card);
}
.rv-ps__ordh b { font-size: 20px; font-weight: 600; }
.rv-ps__ordh span { font: 400 12px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; color: var(--rv-ps-soft); }

.rv-ps__it {
    display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; align-items: center;
    padding: 20px 28px; border-top: 1px solid var(--rv-ps-line);
}
.rv-ps__it img { width: 64px; height: 78px; object-fit: contain; }
.rv-ps__nopic { display: block; width: 64px; height: 78px; background: var(--rv-ps-card); border-radius: 6px; }
.rv-ps__n { font-size: 16px; font-weight: 500; }
.rv-ps__a { margin-top: 4px; font-size: 13px; color: var(--rv-ps-soft); }
.rv-ps__p { font-size: 18px; font-weight: 600; white-space: nowrap; }

.rv-ps__rows { padding: 8px 28px 20px; border-top: 1px solid var(--rv-ps-line); }
.rv-ps__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 15px; }
.rv-ps__row > span { color: var(--rv-ps-soft); }
.rv-ps__row > div { text-align: right; }
.rv-ps__row_tot {
    font-size: 19px; font-weight: 600;
    border-top: 1px solid var(--rv-ps-line); margin-top: 6px; padding-top: 16px;
}
.rv-ps__row_tot > span { color: #111; }
.rv-ps__plait { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--rv-ps-soft); }

/* что дальше */
.rv-ps__next {
    margin: 28px auto 0; text-align: left;
    display: grid; grid-template-columns: auto 1fr; gap: 16px 18px;
    padding: 24px 28px; border-radius: 20px; background: var(--rv-ps-card);
}
.rv-ps__next i {
    width: 28px; height: 28px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; font: 600 13px 'IBM Plex Mono', ui-monospace, monospace;
    font-style: normal; color: var(--rv-ps-red);
}
.rv-ps__next p { font-size: 15px; line-height: 1.5; padding-top: 3px; margin: 0; }
.rv-ps__next b { font-weight: 600; }

/* кнопки */
.rv-ps__act { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rv-ps__btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 60px; padding: 0 48px; min-width: 320px; border-radius: 12px;
    background: var(--rv-ps-red); color: #fff; font-size: 18px; font-weight: 600;
    text-decoration: none !important;
}
.rv-ps__btn:hover { color: #fff; }
.rv-ps__lnk {
    color: #111; font-size: 15px;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.rv-ps__phone { margin: 0; font-size: 15px; color: #55514f; }
.rv-ps__phone a { color: var(--rv-ps-red); text-decoration: none; font-weight: 600; }

@media (max-width: 860px) {
    .rv-ps { padding: 36px 16px 48px; }
    .rv-ps__h1 { font-size: 3.4rem; }
    .rv-ps__sub { font-size: 15px; }
    .rv-ps__ordh, .rv-ps__it, .rv-ps__rows, .rv-ps__next { padding-left: 18px; padding-right: 18px; }
    .rv-ps__it { grid-template-columns: 56px 1fr; }
    .rv-ps__it img, .rv-ps__nopic { width: 56px; height: 68px; }
    .rv-ps__p { grid-column: 2; }
    .rv-ps__btn { width: 100%; min-width: 0; padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .rv-ps__fx { display: none; }
    .rv-ps__spin { animation-duration: 2.4s; }
}




/* ═══════════════════════════════════════════════════════════════════
   ДОСТАВКА ПО МОСКОВСКОЙ ОБЛАСТИ. 26.10.2026.
   Галочка «срочно» под плиткой МО и подсказка, когда адрес и способ
   доставки разошлись. Оформление не блокируем — только подсказываем.
   ═══════════════════════════════════════════════════════════════════ */

/* Список плиток доставки — flex с переносом, а не grid: без явной ширины
   галочка «срочно» и подсказка о несовпадении встают в соседнюю ячейку,
   рядом с чужой плиткой. Отводим им всю строку. 26.10.2026 */
.rv-urgent { flex: 0 0 100%; width: 100%; grid-column: 1 / -1; margin: -6px 0 8px; padding: 0 4px; }
.rv-urgent__row {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 15px; color: #161616; cursor: pointer;
}
.rv-urgent__row input { width: 18px; height: 18px; accent-color: #a8312c; cursor: pointer; }
.rv-urgent__hint { margin-top: 6px; font-size: 13px; line-height: 1.45; color: #8a8785; }

.rv-geo {
    flex: 0 0 100%; width: 100%;
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin: 4px 0 8px; padding: 12px 16px;
    background: #f5f5f5; border-radius: 10px;
    font-size: 15px; color: #161616;
}
.rv-geo__btn {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; color: #a8312c;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.rv-geo__btn:hover { text-decoration-color: currentColor; }
/* display:flex выше перебивает атрибут hidden — без этой строки пустая
   серая плашка видна всегда. 26.10.2026 */
.rv-geo[hidden], .rv-urgent[hidden] { display: none !important; }

@media (max-width: 767px) {
    .rv-geo { font-size: 14px; padding: 10px 14px; }
    .rv-urgent__row { font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════
   КОРЗИНА: блок по центру белой области. 26.10.2026.
   В index.css у .basket от 1480px стоят фиксированные поля
   margin-left/right: 142px, а ширина упирается в max-width 1200px.
   На широком экране остаток делится не поровну — блок с линиями,
   карточкой товара и промокодом уезжает влево (на 1920 — на 173 px),
   хотя заголовки внутри него центрированы. Центрируем сам блок,
   поля в 142 px при этом сохраняются как минимальные, поэтому на
   1280–1512 вид не меняется. Мобильной ширины правило не касается.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1480px) {
    .basket {
        margin-left: auto;
        margin-right: auto;
        max-width: min(1200px, 100% - 284px);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ПОДВАЛ НА ВСЮ ШИРИНУ. 26.10.2026.
   Контейнер подвала держал max-width 1170 и стоял уже шапки: слева и
   справа оставались поля по 151 px, из-за чего подвал выглядел вставкой
   посреди страницы. Приводим его к краям шапки — те же 25 px полей, что
   у .header-main, — и задаём всем трём рядам одинаковые колонки, чтобы
   правая колонка (адрес салона, «Покупателям», подпись студии) шла одной
   вертикалью. Мобильный подвал (.rv-ft*) не затрагивается.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .footer .st-width.footer-desktop {
        max-width: none;
        margin-left: 0; margin-right: 0;
        padding-left: 25px; padding-right: 25px;
    }

    /* одинаковая сетка во всех рядах: слева тянется, справа 380 px */
    .rv-fd__row_contact,
    .rv-fd__row_menu,
    .rv-fd__row_legal {
        /* 380 px — чтобы адрес салона ложился в две строки, а не в четыре */
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 48px;
    }
    .rv-fd__row_legal { align-items: start; }
    /* ряд юридического: ссылки-документы занимают всю строку над колонками */
    .rv-fd__docs { grid-column: 1 / -1; }
    .rv-fd__lg   { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
    /* абзац стоит в левой колонке первого ряда, под контактами */
    .rv-fd__info { margin-top: 26px; }

    /* каталог остаётся в три колонки и на широком экране */
    .rv-fd .footer-catalog-menu { column-count: 3; }
}


/* ═══════════════════════════════════════════════════════════════════
   ИСТОРИЯ ЗАКАЗОВ: миниатюры в свёрнутой строке. 26.10.2026,
   макет Влада lk-istoriya-miniatyury-maket.html.
   Строка заказа — flex со space-between; миниатюры встают третьим
   блоком между номером и суммой и забирают свободное место.
   ═══════════════════════════════════════════════════════════════════ */
.rv-hist-th {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 auto; min-width: 0;
}
.rv-hist-th__i {
    display: block; flex: none;
    width: 56px; height: 56px; border-radius: 10px;
    object-fit: cover; background: #fff;
}
/* товар без фотографии — просто серый квадрат, без надписей */
.rv-hist-th__i_empty { background: #e8e6e4; }
.rv-hist-th__more {
    display: grid; place-items: center; flex: none;
    width: 56px; height: 56px; border-radius: 10px;
    background: #e8e6e4; font-size: 15px; font-weight: 600; color: #55514f;
}

/* Строка заказа: номер — миниатюры — сумма — стрелка. Было flex со
   space-between, и миниатюры с суммой наезжали друг на друга. */
@media (min-width: 768px) {
    .unwrap-history__head {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center; gap: 28px;
    }
    .unwrap-history__head-left {
        flex-direction: column; align-items: flex-start; gap: 4px;
    }
    .unwrap-history__title { white-space: nowrap; }
}

/* Сумма отдельной строкой под подписью, а не рядом с ней; стрелка
   остаётся сбоку и занимает обе строки. */
.unwrap-history__head-right {
    display: grid; grid-template-columns: auto auto;
    align-items: center; column-gap: 18px; row-gap: 2px;
}
.unwrap-history__head-right .unwrap-history__count {
    grid-column: 1; grid-row: 1; text-align: right;
    font-size: 13px; line-height: 1.3; color: #8a8785;
}
.unwrap-history__head-right .unwrap-history__price {
    grid-column: 1; grid-row: 2; text-align: right;
    font-size: 21px; line-height: 1.2; font-weight: 600; white-space: nowrap;
}
.unwrap-history__head-right .unwrap-history__arr {
    grid-column: 2; grid-row: 1 / span 2;
}

@media (max-width: 767px) {
    /* на телефоне миниатюры идут строкой под номером заказа */
    .unwrap-history__head { flex-wrap: wrap; }
    .rv-hist-th { order: 3; flex: 0 0 100%; width: 100%; }
    .rv-hist-th__i, .rv-hist-th__more { width: 48px; height: 48px; }
    .rv-hist-th__more { font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════
   КОРЗИНА: промокод одной полосой. 26.10.2026,
   макет Влада korzina-promokod-maket.html.
   Полоса шириной с блок «Итого», тот же фон и радиус. Слева подпись
   с пояснением, справа поле и кнопка. Состояний три: пусто, применён,
   ошибка — высота полосы у всех одна, меняются только текст и рамка.
   Логика промокода прежняя, классы js-coupon-* не трогаются.
   ═══════════════════════════════════════════════════════════════════ */
.rv-promo {
    display: flex; align-items: center; gap: 24px;
    /* полоса стоит в одном контейнере с «Итого» и повторяет его поля —
       иначе края не сходятся: блок товаров уже «Итого» */
    margin: 28px 202px 0;
    background: #f5f5f5; border-radius: 20px;
    padding: 14px 14px 14px 32px;
    min-height: 84px;
}
.rv-promo__l { flex: 1; min-width: 0; font-size: 20px; font-weight: 600; color: #111; }
.rv-promo__l span {
    display: block; margin-top: 4px;
    font-size: 14px; font-weight: 500; color: #8a8785;
}
.rv-promo_ok .rv-promo__l b { color: #39655d; font-weight: 600; }
.rv-promo_err .rv-promo__l span { color: #a33533; }

/* на обёртке остаётся класс .coupon ради обработчика — гасим его
   старые правила, чтобы они не ломали полосу */
.rv-promo .rv-promo__form.coupon {
    display: flex; gap: 10px; flex: none;
    margin: 0; padding: 0; background: none; border: 0; width: auto; max-width: none;
}
.rv-promo__in {
    width: 340px; height: 56px;
    border: 1px solid transparent; border-radius: 12px; background: #fff;
    padding: 0 20px; font: 500 17px/1 var(--font-site), Montserrat, sans-serif;
    color: #111; outline: none;
}
.rv-promo__in:focus { border-color: #bdbab7; }
.rv-promo_err .rv-promo__in { border-color: #a33533; }
.rv-promo__btn {
    height: 56px; padding: 0 30px; border: 0; border-radius: 12px;
    background: #a33533; color: #fff;
    font: 600 17px/1 var(--font-site), Montserrat, sans-serif; cursor: pointer;
}
.rv-promo__btn:hover { background: #8f2d2b; }
.rv-promo__x {
    flex: none; margin-right: 18px; border: 0; background: none; cursor: pointer;
    font-size: 15px; color: #111;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: rgba(17, 17, 17, .45);
}
.rv-promo__x:hover { text-decoration-color: currentColor; }

@media (max-width: 1279px) {
    .rv-promo { margin-left: 57px; margin-right: 57px; }
}

@media (max-width: 767px) {
    /* поле и кнопка в одну строку на всю ширину, пояснение прячем */
    .rv-promo { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; min-height: 0; margin: 20px 0 0; }
    .rv-promo__l { font-size: 17px; }
    .rv-promo__l span { display: none; }
    /* текст ошибки — единственное пояснение, которое нужно и на телефоне */
    .rv-promo_err .rv-promo__l span { display: block; }
    .rv-promo__form { width: 100%; }
    .rv-promo__in { flex: 1; width: auto; min-width: 0; font-size: 15px; padding: 0 14px; }
    .rv-promo__btn { font-size: 15px; padding: 0 16px; }
    .rv-promo__x { margin: 0; text-align: left; }
}


/* ═══════════════════════════════════════════════════════════════════
   ШТОРКА ВХОДА ПО СМС на мобильной. 26.10.2026.
   Открывается кнопкой «Кабинет» в нижней панели у гостя; разметка —
   include/auth_sheet.php, поведение — js/rv_auth_sheet.js. Общие классы
   .rv-sheet* (подложка, карточка, ручка) уже есть выше — здесь только
   то, что принадлежит самой шторке входа. Десктопа не касается:
   первое правило прячет её от 992px.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* на десктопе шторки нет вовсе, даже если разметка отдана */
    .rv-ls { display: none !important; }
}

@media (max-width: 991px) {
    .rv-ls .rv-sheet__card {
        border-radius: 18px 18px 0 0;
        padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 30px rgba(0,0,0,.12);
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .rv-ls .rv-sheet__grip { width: 40px; background: #ddd; margin-bottom: 10px; }
    .rv-ls.is-busy, .rv-ls .rv-sheet__card.is-busy { opacity: .75; }

    /* шапка: назад — заголовок — крестик, кнопки 44×44 с выносом в поля */
    .rv-ls__hd { display: flex; align-items: center; gap: 10px; }
    .rv-ls__h { margin: 0; font-weight: 400; font-size: 22px; line-height: 1.2; color: #111; }
    .rv-ls__back,
    .rv-ls__x {
        all: unset; cursor: pointer; width: 44px; height: 44px;
        display: grid; place-items: center;
    }
    .rv-ls__back { margin-left: -12px; }
    .rv-ls__x { margin-left: auto; margin-right: -12px; }

    .rv-ls__sub { margin: 6px 0 20px; font-size: 15px; line-height: 1.4; color: #8a8a8a; }
    .rv-ls__sub b { font-weight: 400; color: #111; white-space: nowrap; }

    /* телефон */
    .rv-ls__fld { display: flex; flex-direction: column; gap: 8px; }
    .rv-ls__lbl { font-size: 13px; color: #8a8a8a; }
    .rv-ls__inp {
        all: unset; box-sizing: border-box;
        height: 56px; width: 100%;
        border: 1px solid #d6d6d6; border-radius: 4px;
        display: flex; align-items: center; padding: 0 16px;
        font-size: 20px; letter-spacing: .02em; color: #111;
        font-family: inherit;
    }
    .rv-ls__inp::placeholder { color: #c4c4c4; }
    .rv-ls__inp:focus { border-color: #111; }

    .rv-ls__b1 {
        all: unset; box-sizing: border-box; cursor: pointer;
        display: grid; place-items: center;
        width: 100%; height: 52px; margin-top: 16px;
        border-radius: 4px; font-size: 16px;
        background: #a8312c; color: #fff;
    }
    .rv-ls__b1[disabled] { opacity: .45; cursor: default; }

    /* «или» и кнопки входа по ID — ряд целиком прячется, если кнопок нет */
    .rv-ls__or {
        display: flex; align-items: center; gap: 12px;
        margin: 22px 0 14px; font-size: 13px; color: #8a8a8a;
    }
    .rv-ls__or::before,
    .rv-ls__or::after { content: ""; flex: 1; height: 1px; background: #eee; }

    .rv-ls__alt {
        display: block; text-align: center; margin-top: 18px;
        font-size: 14px; color: #111;
        text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #bbb;
    }
    .rv-ls__law {
        margin: 16px 0 0; font-size: 12px; line-height: 1.45;
        color: #8a8a8a; text-align: center;
    }
    .rv-ls__law a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #ccc; }

    /* код: клетки рисуем сами, ввод — одно прозрачное поле поверх них.
       Так работает подстановка кода из СМС на айфоне (one-time-code):
       отдельные поля по цифре она не заполняет. */
    .rv-ls__codewrap { position: relative; }
    .rv-ls__cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .rv-ls__cell {
        height: 60px; border: 1px solid #d6d6d6; border-radius: 4px;
        display: grid; place-items: center; font-size: 26px; color: #111;
    }
    .rv-ls__cell.is-on { border-color: #111; }
    .rv-ls__cell.is-on::after { content: ""; width: 1.5px; height: 26px; background: #111; }
    .rv-ls__cells.is-bad .rv-ls__cell { border-color: #c0392b; color: #c0392b; }
    .rv-ls__cells.is-bad .rv-ls__cell.is-on::after { background: #c0392b; }
    .rv-ls__code {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        opacity: 0; border: 0; padding: 0; margin: 0;
        font-size: 26px;            /* не 16px — иначе айфон зумит страницу */
        background: transparent; color: transparent; caret-color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .rv-ls__hint { margin-top: 14px; font-size: 14px; color: #8a8a8a; text-align: center; }
    .rv-ls__hint a { color: #111; }
    .rv-ls__hint_mute a { color: #8a8a8a; }
    /* 29.10.2026 — в тексте ошибки теперь бывает телефон ссылкой (шлюз
       не отправил СМС). При display:flex текст и ссылка становятся
       соседними колонками: номер отрывается от фразы и прижимается
       к правому краю. Обычный абзац по центру — текст течёт как текст.
       Класс живёт только в шторке входа (include/auth_sheet.php),
       ошибок других форм не касается. */
    .rv-ls__err {
        margin-top: 10px; font-size: 14px; color: #c0392b;
        display: block; text-align: center;
    }
    .rv-ls__err a { color: inherit; text-decoration: underline; white-space: nowrap; }
    .rv-ls__err[hidden] { display: none; }

    /* Кнопки входа по ID — тот же общий блок, что в десктопном окне
       (/local/include/id_login_buttons.php), только одет по макету.
       Если в модуле socialservices не включена ни одна служба, блок не
       выводится вовсе — и ряд «или» исчезает вместе с ним. */
    .rv-ls .auth-popup-social_id { margin: 0; }
    .rv-ls .auth-popup-social__title {
        display: flex; align-items: center; gap: 12px;
        margin: 22px 0 14px; font-size: 13px; color: #8a8a8a;
    }
    .rv-ls .auth-popup-social__title::before,
    .rv-ls .auth-popup-social__title::after { content: ""; flex: 1; height: 1px; background: #eee; }
    .rv-ls .auth-popup-social__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .rv-ls .auth-popup-social__item { min-width: 0; }
    .rv-ls .auth-popup-social__link {
        box-sizing: border-box; height: 52px;
        border: 1px solid #d6d6d6; border-radius: 4px;
        display: flex; align-items: center; justify-content: center; gap: 10px;
        font-size: 15px; color: #111; text-decoration: none;
    }
    .rv-ls .auth-popup-social__icon { display: flex; flex: 0 0 20px; }
    /* Подпись в десктопном окне подчёркнута и серая — в шторке по макету
       она обычная. Кегль 14px: надпись «Вход с Яндекс ID» в половину
       ширины экрана иначе выдавливает значок за край кнопки. */
    .rv-ls .auth-popup-social__label {
        font-size: 14px; line-height: 1.2; color: #111;
        text-decoration: none; white-space: nowrap;
    }
    .rv-ls .auth-popup-social__link { padding: 0 10px; gap: 8px; }

    /* Плашка cookie лежит на z-index 900, шторка — на 200, и плашка
       перекрывала низ карточки: кнопка «Получить код» не нажималась
       (поймано прогоном на 390). Пока шторка открыта — прячем плашку;
       закроют шторку — вернётся. Касается и шторки «Контакты», у неё
       была та же помеха. */
    html.rv-sheet-open .rv-cookie { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   ПОДТВЕРЖДЕНИЕ ПОЧТЫ В КАБИНЕТЕ. 27.10.2026,
   макет Влада lk-podtverzhdenie-pochty-maket.html.
   Три состояния у одного блока: не подтверждена, ввод кода, готово.
   Шесть клеток — рисунок поверх одного настоящего поля (оно прозрачное
   и лежит сверху), поэтому работает вставка кода целиком.
   ═══════════════════════════════════════════════════════════════════ */
.rv-ec { position: relative; margin-top: 10px; }
.rv-ec.is-busy { opacity: .6; pointer-events: none; }

.rv-ec__ok {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; color: #2f7a45;
}
.rv-ec__ok svg { width: 14px; height: 14px; }
.rv-ec__ok_phone { margin-top: 10px; }

.rv-ec__no { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv-ec__flag { font-size: 13px; font-weight: 500; color: #a33533; }
.rv-ec__btn {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: 600 14px/1.2 inherit; color: #111;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: rgba(17, 17, 17, .45);
}
.rv-ec__btn:hover { text-decoration-color: currentColor; }

.rv-ec__box { position: relative; margin-top: 16px; padding: 18px 20px; border-radius: 14px; background: #f5f5f5; }
.rv-ec__p { margin: 0; font-size: 14px; line-height: 1.5; color: #55514f; }
.rv-ec__p b { color: #111; font-weight: 600; }

.rv-ec__cells { display: flex; gap: 8px; margin-top: 14px; }
.rv-ec__cell {
    width: 46px; height: 54px; border-radius: 10px;
    background: #fff; border: 1px solid #d7d4d1;
    display: grid; place-items: center;
    font: 500 22px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
.rv-ec__cell.is-cur { border-color: #111; }

/* настоящее поле ввода лежит поверх клеток и не видно */
.rv-ec__code {
    position: absolute; left: 20px; top: 0; width: 332px; height: 54px;
    margin-top: 14px; opacity: 0; border: 0; background: none;
    font-size: 16px;  /* меньше 16px — Safari зумит страницу */
}
.rv-ec__cells + .rv-ec__code { top: auto; }

.rv-ec__re { margin-top: 12px; font-size: 13px; color: #8a8785; }
.rv-ec__again {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: 500 13px/1.2 inherit; color: #111;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.rv-ec__err { margin-top: 10px; font-size: 13px; color: #a33533; }

/* страница перехода по ссылке из письма */
.rv-ec-page { max-width: 560px; margin: 60px auto 80px; text-align: center; }
.rv-ec-page__ok {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 20px; font-weight: 600; color: #2f7a45;
}
.rv-ec-page__ok svg { width: 20px; height: 20px; }
.rv-ec-page__no { font-size: 20px; font-weight: 600; color: #a33533; }
.rv-ec-page__t { margin: 14px 0 26px; font-size: 15px; line-height: 1.5; color: #55514f; }

@media (max-width: 767px) {
    .rv-ec__cell { width: 40px; height: 50px; font-size: 20px; }
    .rv-ec__code { width: 288px; height: 50px; }
    .rv-ec-page { margin: 36px auto 50px; padding: 0 16px; }
}


/* ═══════════════════════════════════════════════════════════════════
   КАБИНЕТ: подсказки под полями и меню слева. 27.10.2026.
   ═══════════════════════════════════════════════════════════════════ */

/* Одна строка под телефоном и датой рождения вместо прежних абзацев. */
.rv-lknote {
    margin-top: 8px;
    font-size: 13px; line-height: 1.45; color: #8a8785;
}
.rv-lknote a {
    color: inherit;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
/* на десктопе ссылка на наведение не отзывается — это справка, не действие */
@media (hover: hover) {
    .rv-lknote a:hover { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
}
@supports not (color: color-mix(in srgb, currentColor 45%, transparent)) {
    .rv-lknote a { text-decoration-color: currentColor; }
}

/* Меню кабинета: наведение больше не повторяет выбранный пункт — иначе
   непонятно, где ты сейчас. Серый фон, тёмный текст и точка. Выбранный
   пункт на наведение не меняется вовсе. */
@media (hover: hover) {
    .lk-menu__item:not(.active):hover .lk-menu__link {
        background: #ebe9e7; color: #111;
        transition: background-color .15s ease;
    }
    .lk-menu__item:not(.active):hover .lk-menu__link::before { background: #111; }
    .lk-menu__item.active:hover .lk-menu__link { background: #502726; color: #fff; }
    .lk-menu__item.active:hover .lk-menu__link::before { background: #fff; }
}
/* на тач-устройствах наведения нет — гасим залипание подсветки */
@media (hover: none) {
    .lk-menu__item:not(.active):hover .lk-menu__link { background: none; color: #000; }
    .lk-menu__item:not(.active):hover .lk-menu__link::before { background: #C8C8C8; }
}

/* Дуга над «Избранным»: пункты разделяются отступами, линия лишняя. */
.lk-menu__item_line { margin-top: 0; padding-top: 0; border-top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   АДРЕСА ДОСТАВКИ: плитки с картой. 27.10.2026,
   макет Влада lk-adresa-karty-maket.html.
   Карта — статичная картинка Яндекса, её отдаёт наш прокси; ключ в
   настройках модуля, логотип Яндекса на картинке не закрываем.
   ═══════════════════════════════════════════════════════════════════ */
.rv-adr-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}
.rv-adr-t {
    display: flex; flex-direction: column;
    background: #f5f5f5; border-radius: 18px; overflow: hidden;
    color: #111; text-align: left;
    border: 0; padding: 0; font: inherit;
}
.rv-adr-t__map { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #eceae6; }
.rv-adr-t__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s;
    /* Снимок Яндекса пёстрый от значков организаций — приглушаем, чтобы
       плитка читалась как фон, а не как отдельная карта. Отключить POI
       в Static API v1 нечем, только theme=light (он уже в запросе).
       Фильтр накрывает и копирайт, но не прячет и не обрезает его. */
    filter: grayscale(.9) contrast(.9) brightness(1.05);
}
.rv-adr-t__nomap {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: repeating-linear-gradient(135deg, #eceae6 0 10px, #e6e3df 10px 20px);
}
.rv-adr-t__nomap span {
    font-size: 13px; font-weight: 500; color: #8a8785;
    background: #fff; padding: 6px 12px; border-radius: 999px;
}
/* Наша метка ровно по центру снимка: центр карты — и есть адрес. */
.rv-adr-t__pin {
    /* Метка лежит над картинкой и фильтра не наследует — остаётся яркой.
       Остриё капли — ровно точка адреса, то есть центр снимка: поэтому
       translate(-50%, -100%), а не половина высоты. viewBox взят с
       запасом, ореол вокруг острия выходит за него — overflow не режем.
       27.10.2026 */
    position: absolute; left: 50%; top: 50%; z-index: 2; filter: none;
    width: 34px; height: 51px;
    /* Поле зрения svg шире самой капли: внизу остаётся место под ореол,
       иначе его срезает общее правило svg { overflow: hidden }. Остриё
       сидит на 73,8 % высоты картинки — на столько и поднимаем, чтобы
       оно пришлось ровно в центр снимка. */
    transform: translate(-50%, -73.8%);
    pointer-events: none;
}
.rv-adr-t__tag {
    position: absolute; left: 12px; top: 12px; z-index: 2;
    background: #fff; border-radius: 999px; padding: 5px 11px;
    font-size: 12px; font-weight: 600;
}
.rv-adr-t__b { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.rv-adr-t__n { font-size: 17px; font-weight: 600; }
.rv-adr-t__a { margin-top: 6px; font-size: 14px; line-height: 1.45; color: #55514f; }
.rv-adr-t__warn { margin-top: 8px; font-size: 13px; color: #a33533; }
.rv-adr-t__act {
    margin-top: auto; padding-top: 14px;
    display: flex; align-items: baseline; gap: 16px;
    font-size: 13px; white-space: nowrap;
}
.rv-adr-t__act button {
    border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: #111;
    white-space: nowrap;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: rgba(17, 17, 17, .35);
}
.rv-adr-t__act .rv-adr-t__del { margin-left: auto; color: #8a8785; }

/* последняя плитка — пунктирная «Добавить адрес» */
.rv-adr-t_add {
    align-items: center; justify-content: center; gap: 12px; min-height: 250px;
    border: 1.5px dashed #d2cfcb; background: transparent;
    font-size: 16px; font-weight: 600; cursor: pointer;
}
.rv-adr-t__plus {
    /* плюс рисуем линиями, а не знаком шрифта: глиф «+» сидит на своей
       базовой линии и в круге выглядит сдвинутым вверх. 27.10.2026 */
    width: 52px; height: 52px; border-radius: 50%; background: #f5f5f5;
    display: grid; place-items: center;
}
.rv-adr-t__plus svg { width: 24px; height: 24px; display: block; }

@media (hover: hover) {
    .rv-adr-t:not(.rv-adr-t_add):hover .rv-adr-t__img { transform: scale(1.04); }
    .rv-adr-t_add:hover { border-color: #111; }
}

/* Форма внизу открывается плиткой «+ Добавить адрес» и закрывается
   «Отменить». Пока она закрыта, её не видно, а плитка «+» на месте. */
.rv-adr__new[hidden] { display: none; }
.rv-adr-grid.is-form .rv-adr-t_add { display: none; }

@media (max-width: 767px) {
    .rv-adr-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   КАБИНЕТ: содержимое по краям серой линии. 27.10.2026.
   Линия — это border-top у .lk__content, она идёт во всю ширину блока,
   а внутри и у неё, и у верхнего блока стоят поля по 45 px. Из-за них
   меню начиналось правее линии, а контент не доходил до её правого
   края. Поля снимаем — линия и содержимое встают по одной вертикали;
   промежуток меню ↔ контент (gap 42) и ширина колонок не меняются.
   Мобильной ширины правило не касается: там поля и так нулевые.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .lk__top,
    .lk__content { padding-left: 0; padding-right: 0; }

    /* Блок баллов и полоса «500 ₽» держали свою ширину 1180 и вставали
       по собственному центру — теперь тянутся по краям той же линии. */
    .lk__top .rv-lkp,
    .lk__top .rv-lkp__ask,
    .lk__top .rv-lkp__cab,
    .lk__top .rv-lkp__how,
    .lk__top .rv-ps { max-width: none; }
}

/* ===========================================================================
   Карточка: плашка «Изделие в наличии» — воздух сверху и снизу, 27.10.2026
   ---------------------------------------------------------------------------
   Единственная правка: вертикальный padding серой плашки +5px с каждой
   стороны, было 6px — стало 11px. Высота плашки растёт с 84 до 94px.
   Горизонтальные поля, скругление, миниатюра, тексты и ширина не трогаются:
   правило задаёт ТОЛЬКО padding-top и padding-bottom.
   Вертикальный отступ 6px стоял в трёх местах — в базовом правиле
   .rv-stock-plate (padding: 6px 24px) и в двух медиа-запросах,
   @media (max-width: 767px) и @media (min-width: 768px), оба padding: 6px 20px.
   Это правило идёт последним в файле и при равной специфичности (0,1,0)
   перебивает все три, не задевая горизонталь. Обе темы (.bg-white и тёмная)
   используют одну и ту же плашку, поэтому правка общая.
   =========================================================================== */
.rv-stock-plate {
    padding-top: 11px;
    padding-bottom: 11px;
}

/* ===========================================================================
   Меню каталога, левая колонка (десктоп) — 27.10.2026
   ---------------------------------------------------------------------------
   Было (замер getBoundingClientRect на стенде, 1680): плашка выбранного пункта
   отстоит от края тёмного блока сверху на 15px, слева и справа на 5px —
   контейнер .catalog-menu-sect имеет padding 15px 5px 5px. Боковые отступы
   верные, лишний только верхний: выравниваем его по боковым, 5px.
   Пункты шли вплотную (замер: 0), плашки сливались — ставим 4px.
   Hover и выбранный были одного цвета #2D2525, наведение не отличалось
   от выбора — разводим: выбранный как был, наведение на невыбранном
   полупрозрачное.
   Мобильную версию не трогаем: всё внутри @media (min-width: 992px).
   =========================================================================== */
@media (min-width: 992px) {
  /* 1. Верхний отступ плашки = боковым. Боковые 5px не трогаем. */
  .catalog-menu-sect {
    padding-top: 5px;
  }

  /* 2. Просвет между плашками. «Распродажу» исключаем — она отделена
        линией и имеет собственный отступ сверху (margin: 20px 13px 0). */
  .catalog-menu-sect__item + .catalog-menu-sect__item:not(.catalog-menu-sect__item_line) {
    margin-top: 4px;
  }

  .catalog-menu-sect__name {
    transition: background 0.15s ease;
  }
}

/* 3. Наведение — только там, где курсор есть. На выбранном пункте наведение
      ничего не меняет: правило ниже бьёт только по :not(.active), а оно
      специфичнее (0,3,0) исходного `.item:hover .name` (0,2,0) из index.css. */
@media (min-width: 992px) and (hover: hover) {
  .catalog-menu-sect__item:not(.active):hover .catalog-menu-sect__name {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
  }

  .catalog-menu-sect__item:not(.active):hover .catalog-menu-sect__name::before {
    background: #8a8a8a;
  }
}

/* ===========================================================================
   Подвал, десктоп: «Заказать обратный звонок» + почта — 27.10.2026
   ---------------------------------------------------------------------------
   Было: кегли разные и текст не стоял на одной линии. Причины две —
   у обёртки звонка свой размер из index.css (.footer-contacts__callback
   font-size: 1.3rem = 13px), а почта наследовала 17px от .rv-fd__sub;
   плюс у контейнера не было align-items, то есть выравнивания по базовой
   линии не происходило вовсе.
   Стало: оба 16px/500/белые, контейнер выравнивается по базовой линии,
   просвет 32px, отступ от телефона 14px.
   Подчёркивание в покое снято (раньше у .rv-fd__cb оно было постоянным),
   при наведении — 1px, 45% прозрачности, как в решении от 23.10.
   Мобильную не трогаем: всё внутри @media (min-width: 992px).
   =========================================================================== */
@media (min-width: 992px) {
  /* 2 и 3: одна базовая линия, просвет 32px, отступ от телефона 14px */
  .rv-fd .rv-fd__sub {
    display: flex;
    align-items: baseline;
    gap: 32px;
    margin-top: 14px;
  }

  /* 1: одинаковый кегль и начертание у обоих. Размер на обёртке звонка
        перебиваем явно — иначе 1.3rem из index.css оставит его мельче. */
  .rv-fd .rv-fd__sub,
  .rv-fd .rv-fd__sub .footer-contacts__callback,
  .rv-fd .rv-fd__sub a {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
  }

  .rv-fd .rv-fd__sub a,
  .rv-fd .rv-fd__sub .footer-contacts__callback a {
    color: #fff;
  }

  /* 4: в покое подчёркивания нет ни у звонка, ни у почты */
  .rv-fd .rv-fd__sub a,
  .rv-fd .rv-fd__sub .rv-fd__cb {
    text-decoration: none;
  }
}

/* 4: наведение — только там, где есть курсор. Подчёркивание 1px, 45%. */
@media (min-width: 992px) and (hover: hover) {
  .rv-fd .rv-fd__sub a:hover,
  .rv-fd .rv-fd__sub .rv-fd__cb:hover,
  .rv-fd .rv-fd__sub .footer-contacts__callback a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  }
}

/* ===========================================================================
   Кнопки шапки: «залипание» после закрытия окна входа. 28.10.2026
   ---------------------------------------------------------------------------
   Замер на стенде (1440): до клика кнопка «Вход» — белый текст, без
   подчёркивания, фон #502726. После закрытия окна входа текст становился
   серым и подчёркнутым, хотя мышь на кнопке не стоит: fancybox при закрытии
   возвращает фокус на кнопку, а bootstrap.min.css старого шаблона задаёт
   `a:focus, a:hover { color:#23527c; text-decoration: underline }`.
   Фиксируем кнопкам шапки их собственный цвет и отсутствие подчёркивания
   во всех состояниях — специфичность 0,2,0 выше бутстраповской 0,1,1.
   Правила самодостаточны: ни от какого другого блока не зависят.
   Фокус после закрытия окна снимает скрипт в footer.php, поэтому следа
   на кнопке не остаётся; переход по Tab работает как прежде.
   Мобильную шапку не трогаем — классы только десктопные.
   =========================================================================== */
.header-auth:link,
.header-auth:visited,
.header-auth:hover,
.header-auth:focus,
.header-auth:focus-visible,
.header-auth:active,
.catalog-menu__btn:link,
.catalog-menu__btn:visited,
.catalog-menu__btn:hover,
.catalog-menu__btn:focus,
.catalog-menu__btn:focus-visible,
.catalog-menu__btn:active {
    color: #fff;
    text-decoration: none;
}

/* Иконки «Избранное» и «Корзина» рядом — та же история: свой цвет
   наследуют от шапки, подчёркивания быть не должно ни в одном состоянии. */
.header-action__item:link,
.header-action__item:visited,
.header-action__item:hover,
.header-action__item:focus,
.header-action__item:focus-visible,
.header-action__item:active,
.header-social__item:link,
.header-social__item:visited,
.header-social__item:hover,
.header-social__item:focus,
.header-social__item:focus-visible,
.header-social__item:active,
.header-callback:link,
.header-callback:visited,
.header-callback:hover,
.header-callback:focus,
.header-callback:focus-visible,
.header-callback:active {
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SEO-БЛОК В ЧЕТЫРЕ КОЛОНКИ. 28.10.2026,
   макет deploy/podval/seo-blok-4-kolonki-maket.html

   Блок выравнен по подвалу: те же горизонтальные отступы (25px внутри
   рамки страницы, итого 45px от края экрана), та же сетка
   «каталог + Покупателям» (minmax(0,1fr) и 380px через 48px) и то же
   деление каталожной части на три колонки (columns: 3, зазор 32px).
   Поэтому края абзацев совпадают с колонками подвала на любой ширине —
   проверено замером на 1440 и 1920.

   Абзацы 1–3 идут потоком и выравниваются по высоте сами (column-fill
   по умолчанию balance), последний абзац стоит в колонке «Покупателям».
   Ниже 992px раскладка прежняя: абзацы в столбик, как было.
   ═════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .seo-description.red-background .container.rv-seo {
        max-width: none;
        /* По горизонтали отступ не нужен: сам контейнер уже стоит на 45px
           от края экрана — ровно там, где начинается первая колонка
           подвала. 81px сверху — до коробки заголовка, число владельца.
           Снизу нуль: расстояние от линии до телефона задаётся ниже, на
           самом подвале, — иначе оно складывалось бы из трёх отступов. */
        padding: 81px 0 0;
    }
    .seo-description.red-background .container.rv-seo h1 {
        margin: 0 0 40px;
    }
    .rv-seo__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 48px;
    }
    .rv-seo__flow {
        columns: 3;
        column-gap: 32px;
    }
    .rv-seo__flow p { margin: 0 0 1em; }
    .rv-seo__flow p:last-child { margin-bottom: 0; }
    .rv-seo__last p { margin: 0; }

    /* На десктопе текст показан целиком: блок «читать дальше» всегда
       раскрыт, сама кнопка не нужна. Разметка при этом одна на обе
       ширины — на мобильной кнопка работает как раньше. */
    .rv-seo .read-more { display: block; width: auto !important; }
    .rv-seo .read-more-button { display: none !important; }
    .rv-seo__flow .read-more p { margin: 0 0 1em; }
    .rv-seo__flow .read-more p:last-child { margin-bottom: 0; }

    /* Линия между SEO-текстом и подвалом — ровно такая же, как в подвале
       между рядом «связаться» и строкой «Каталог»: то же правило
       (1px solid rgba(255,255,255,.22)) на всю ширину ряда. Края совпадают
       сами: сетка SEO идёт от 45px до края минус 45px, как ряды подвала.
       Отступы взяты замером с той линии: 76px от последней строки текста
       до линии, 36px от линии до следующего блока. */
    .rv-seo__grid {
        padding-bottom: 76px;
        border-bottom: 1px solid rgba(255, 255, 255, .22);
    }

    /* От линии до телефона — 36px, как в подвале от такой же линии до
       «Каталог». Расстояние складывалось из трёх отступов подряд
       (контейнер SEO + .footer + .rv-fd), поэтому два гасим, а третий
       ставим ровно 36. Правило включается только на страницах, где SEO-блок
       есть: подвал без него сохраняет свой прежний отступ сверху.
       Соседство через `~`, а не `+`: на бою между <main> и подвалом стоит
       <script>, и соседний селектор там не срабатывал. */
    main:has(.rv-seo) ~ .footer { padding-top: 0; }
    main:has(.rv-seo) ~ .footer .rv-fd { padding-top: 36px; }
}

/* ===========================================================================
   Пустое состояние кабинета и избранного для гостя. 28.10.2026
   Вёрстка взята от пустой корзины, здесь только текст под заголовком,
   кнопка «Войти» и ссылка «Перейти в каталог» под ней. Вид одинаковый
   на десктопе и на мобильной — отдельных правил под ширину нет.
   =========================================================================== */
.rv-guest__text {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4;
    color: #8f8f8f;
}

.rv-guest__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.rv-guest__link {
    font-size: 16px;
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

@media (hover: hover) {
    .rv-guest__link:hover { text-decoration-color: currentColor; }
}

/* ===========================================================================
   Вход по почте и паролю: шаг в шторке и в окне. 28.10.2026
   ---------------------------------------------------------------------------
   По макету deploy/lk/vhod-pochta-parol-maket.html. На мобильной — третий шаг
   той же шторки (стили полей и кнопки уже есть в .rv-ls__*, добавляем только
   глазок, строку «Забыли пароль?» и кнопку-ссылку вместо прежней ссылки
   на /personal/). На десктопе — правая половина существующего окна с баннером
   Asfour: поля подчёркнутые, как у шага с телефоном, кнопка как «Войти».
   Старое окно с коллажем и «Зарегистрироваться» больше не вызывается.
   =========================================================================== */

/* ── шторка (мобильная) ─────────────────────────────────────────────────── */
.rv-ls__alt {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #111;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(17, 17, 17, .3);
}

.rv-ls__passwrap { position: relative; }

.rv-ls__eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #888;
    cursor: pointer;
}

.rv-ls__forgotrow {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.rv-ls__forgot,
.rv-mp__forgot {
    font-size: 14px;
    font-weight: 500;
    color: #111;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(17, 17, 17, .3);
}

/* ── окно (десктоп), правая половина ────────────────────────────────────── */
.rv-mp__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: #111;
    cursor: pointer;
}

.rv-mp__passitem { position: relative; }

.rv-mp__eye {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #888;
    cursor: pointer;
}

.rv-mp__err {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #c0322e;
}

.rv-mp__err a {
    color: #c0322e;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(192, 50, 46, .4);
}

.rv-mp__forgotrow {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.rv-mp__btn {
    width: 100%;
    margin-top: 18px;
}

/* Кнопка бледная, пока оба поля пустые — как в макете (.btn.off). */
.rv-ls__b1[disabled],
.rv-mp__btn[disabled] {
    background: #d4a19f;
    cursor: default;
}

/* ── два бага этого окна ────────────────────────────────────────────────── */

/* 1. «по логину и паролю» — была белой на светло-сером и пропадала.
      Делаем тёмной с тонким подчёркиванием; при наведении цвет не меняем. */
#auth-popup .js-open-login-form,
#auth-popup .js-open-login-form:link,
#auth-popup .js-open-login-form:visited,
#auth-popup .js-open-login-form:hover,
#auth-popup .js-open-login-form:focus,
#auth-popup .js-open-login-form:active {
    color: #111;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(17, 17, 17, .35);
}

/* 2. «Политикой конфиденциальности» и «Согласие…» были синими (#337ab7
      из бутстрапа). Делаем серыми, в тон соседнего текста. */
#auth-popup a[href*="privacy"],
#auth-popup a[href*="politika"],
#auth-popup a[href*="soglasie"],
#auth-popup a[href*="privacy"]:link,
#auth-popup a[href*="politika"]:link,
#auth-popup a[href*="soglasie"]:link,
#auth-popup a[href*="privacy"]:visited,
#auth-popup a[href*="politika"]:visited,
#auth-popup a[href*="soglasie"]:visited,
#auth-popup a[href*="privacy"]:hover,
#auth-popup a[href*="politika"]:hover,
#auth-popup a[href*="soglasie"]:hover,
#auth-popup a[href*="privacy"]:focus,
#auth-popup a[href*="politika"]:focus,
#auth-popup a[href*="soglasie"]:focus {
    color: #8f8f8f;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(143, 143, 143, .45);
}

/* Плавающая подпись в index.css перечисляет только input[type=text] и [type=tel],
   поэтому над полем пароля она не поднималась и наезжала на точки. Добавляем
   тот же подъём для password — значения те же, что в index.css:1317. */
#auth-popup input[type="password"]:hover + .auth-form__label,
#auth-popup input[type="password"]:focus + .auth-form__label,
#auth-popup input[type="password"]:not(:placeholder-shown) + .auth-form__label {
    transform: scale(0.75) translateY(-42px) translateX(-2px);
}

/* На шаге «почта и пароль» вход через Яндекс ID и VK ID не показываем —
   по макету там только поля. На шаге с телефоном блок остаётся как был. */
#auth-popup.rv-mp-on .auth-popup-social,
#auth-popup.rv-mp-on .auth-popup-social__title,
#auth-popup.rv-mp-on .auth-popup__label {
    display: none;
}

/* Подписи полей на этом шаге — статичные сверху, как в макете: плавающая
   подпись из index.css рассчитана на другую разметку и наезжала на точки
   пароля (у поля внутри ещё кнопка-глазок). */
#auth-popup .rv-mp .auth-form__label {
    position: static;
    transform: none;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    opacity: 1;
    pointer-events: none;
}

#auth-popup .rv-mp .auth-form__item {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
}

#auth-popup .rv-mp .auth-form__item input {
    width: 100%;
}

/* Разводим поля: без зазора подпись «Пароль» наезжала на значение
   верхнего поля — у шага свои статичные подписи, а не плавающие. */
#auth-popup .rv-mp .auth-form__item {
    margin-bottom: 20px;
}

#auth-popup .rv-mp .auth-form__item + .auth-form__item {
    margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════════
   SEO-БЛОК В ЧЕТЫРЕ КОЛОНКИ. 28.10.2026,
   макет deploy/podval/seo-blok-4-kolonki-maket.html

   Блок выравнен по подвалу: те же горизонтальные отступы (25px внутри
   рамки страницы, итого 45px от края экрана), та же сетка
   «каталог + Покупателям» (minmax(0,1fr) и 380px через 48px) и то же
   деление каталожной части на три колонки (columns: 3, зазор 32px).
   Поэтому края абзацев совпадают с колонками подвала на любой ширине —
   проверено замером на 1440 и 1920.

   Абзацы 1–3 идут потоком и выравниваются по высоте сами (column-fill
   по умолчанию balance), последний абзац стоит в колонке «Покупателям».
   Ниже 992px раскладка прежняя: абзацы в столбик, как было.
   ═════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .seo-description.red-background .container.rv-seo {
        max-width: none;
        /* По горизонтали отступ не нужен: сам контейнер уже стоит на 45px
           от края экрана — ровно там, где начинается первая колонка
           подвала. 81px сверху — до коробки заголовка, число владельца.
           Снизу нуль: расстояние от линии до телефона задаётся ниже, на
           самом подвале, — иначе оно складывалось бы из трёх отступов. */
        padding: 81px 0 0;
    }
    .seo-description.red-background .container.rv-seo h1 {
        margin: 0 0 40px;
    }
    .rv-seo__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 48px;
    }
    .rv-seo__flow {
        columns: 3;
        column-gap: 32px;
    }
    .rv-seo__flow p { margin: 0 0 1em; }
    .rv-seo__flow p:last-child { margin-bottom: 0; }
    .rv-seo__last p { margin: 0; }

    /* На десктопе текст показан целиком: блок «читать дальше» всегда
       раскрыт, сама кнопка не нужна. Разметка при этом одна на обе
       ширины — на мобильной кнопка работает как раньше. */
    .rv-seo .read-more { display: block; width: auto !important; }
    .rv-seo .read-more-button { display: none !important; }
    .rv-seo__flow .read-more p { margin: 0 0 1em; }
    .rv-seo__flow .read-more p:last-child { margin-bottom: 0; }

    /* Линия между SEO-текстом и подвалом — ровно такая же, как в подвале
       между рядом «связаться» и строкой «Каталог»: то же правило
       (1px solid rgba(255,255,255,.22)) на всю ширину ряда. Края совпадают
       сами: сетка SEO идёт от 45px до края минус 45px, как ряды подвала.
       Отступы взяты замером с той линии: 76px от последней строки текста
       до линии, 36px от линии до следующего блока. */
    .rv-seo__grid {
        padding-bottom: 76px;
        border-bottom: 1px solid rgba(255, 255, 255, .22);
    }

    /* От линии до телефона — 36px, как в подвале от такой же линии до
       «Каталог». Расстояние складывалось из трёх отступов подряд
       (контейнер SEO + .footer + .rv-fd), поэтому два гасим, а третий
       ставим ровно 36. Правило включается только на страницах, где SEO-блок
       есть: подвал без него сохраняет свой прежний отступ сверху.
       Соседство через `~`, а не `+`: на бою между <main> и подвалом стоит
       <script>, и соседний селектор там не срабатывал. */
    main:has(.rv-seo) ~ .footer { padding-top: 0; }
    main:has(.rv-seo) ~ .footer .rv-fd { padding-top: 36px; }
}

/* ---------------------------------------------------------------------------
   Шторка «Контакты»: строка «Заказать звонок». 30.10.2026
   Класс footer-callback на ней оставлен намеренно — на него вешается
   обработчик формы «Мы Вам перезвоним» прямой привязкой. Но этот же класс
   одет под кнопку подвала: в tmp/gresponsive.css при ≤991px у него
   `display:inline-block`, `color:white`, светлая подложка, скругление и
   паддинги 15/40, а в tmp/gstyle.css — свой цвет и нижний отступ. В шторке
   это давало белый заголовок на белом, иконку над текстом, рамку и
   неполную ширину. Возвращаем вид обычной строки .rv-sheet__row. */
.rv-sheet .rv-sheet__row.footer-callback {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 12px 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}
.rv-sheet .rv-sheet__row.footer-callback .rv-sheet__txt b { color: #111; }
.rv-sheet .rv-sheet__row.footer-callback .rv-sheet__txt i { color: #8a8a8a; }

/* ═══════════════════════════════════════════════════════════════════════
   ХАРАКТЕРИСТИКИ В КАРТОЧКЕ. 01.11.2026, образец inmyroom.ru
   ---------------------------------------------------------------------------
   Было: сетка в две колонки, короткая сплошная линия, значения прижаты
   влево по общей вертикали, оба текста серые, строки через 24px.
   Стало: подпись слева, пунктир на всё свободное место, значение у правого
   края. Длинное значение переносится по словам и остаётся справа, пунктир
   стоит на первой строке — строка выровнена по базовой линии.

   Пунктир — псевдоэлемент СТРОКИ, а не подписи. Так подпись не обязана
   растягиваться (и не ломается на две строки от flex-растяжения), а
   распорка сама занимает всё, что осталось между подписью и значением.
   ═══════════════════════════════════════════════════════════════════════ */
.rv-props {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: none;   /* прежняя сетка больше не нужна */
    /* align-items:baseline достался от сетки и мешал строкам занять всю
       ширину — значение не доходило до правого края */
    align-items: stretch;
}
.rv-props .catalog-detail-props__item {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0;
    color: #fff;
}
.rv-props .catalog-detail-props__item:not(:last-child) {
    /* 24px снизу приезжали из index.css и складывались с gap:12px */
    margin-bottom: 0;
}
.rv-props .catalog-detail-props__label {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;     /* название в одну строку */
    font-weight: 500;
    color: inherit;
}
/* Прежняя сплошная линия жила псевдоэлементом подписи — гасим, иначе
   перед пунктиром остаётся короткий штрих. */
.rv-props .catalog-detail-props__label::after { content: none; }

.rv-props .catalog-detail-props__item::after {
    content: "";
    order: 1;                /* между подписью и значением */
    flex: 1 1 auto;
    min-width: 12px;
    margin: 0 8px;
    border-bottom: 1px dashed #555;
}
.rv-props .catalog-detail-props__val {
    order: 2;
    flex: 0 1 auto;
    text-align: right;
    font-weight: 400;
    min-width: 0;
    overflow-wrap: anywhere;
    color: inherit;
}
/* Значения со ссылками (материалы, техника) тянут серый из блока
   «Значения свойств» и красный из index.css — в строке цвет один. */
.catalod-detail .rv-props .catalog-detail-props__val,
.catalod-detail .rv-props .catalog-detail-props__val a,
.rv-props .catalog-detail-props__val .mater-type a,
.rv-props .catalog-detail-props__val .mater-subtype a { color: inherit; }
.catalod-detail .rv-props .catalog-detail-props__val a:hover { color: inherit; text-decoration: underline; }
/* У span.mater-type свой margin-right: 50px — он оставлял пустые 50px
   между текстом и правым краем. */
.rv-props .catalog-detail-props__val span.mater-type { margin-right: 0; }

/* Белая карточка: тот же рисунок, другие цвета. Серого текста в строках
   характеристик больше нет ни в одной теме. */
.bg-white .rv-props .catalog-detail-props__item { color: #111; }
.bg-white .rv-props .catalog-detail-props__item::after { border-bottom-color: #cfcfcf; }

@media (max-width: 767px) {
    .catalod-detail__main .catalog-detail-props { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   КРАСНАЯ ПЛАШКА «НУЖНА КОНСУЛЬТАЦИЯ?»: СТЫКИ С ФОНОМ. 01.11.2026
   ---------------------------------------------------------------------------
   Первая версия закрывала углы масками radial-gradient — в Safari на
   iPhone они не рисовались (в Chromium рисовались), поэтому приём
   заменён на простой и совместимый: поверх стыка лежит полоска цвета
   страницы со скруглением снизу (над плашкой) и сверху (под ней).
   В углах при этом остаётся видна красная плашка — ровно это и нужно.
   Цвет берём у страницы: белая карточка — #fff, тёмная — #000.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Скругления на стыке с красной плашкой.
       Плашка растянута на всю ширину окна (margin: 24px -26px 0), а белая
       область страницы уже на 6 px с каждой стороны — это красная рамка
       html вокруг всей страницы. Поэтому белые накладки кладём ПОВЕРХ
       красного, но ровно по белой области (left/right: 6px): их скруглённые
       углы открывают красный, и он смыкается с рамкой по краям — как на
       макете. На всю ширину полоски класть нельзя: красные уголки совпали
       бы с рамкой и скругление было бы не видно. */
    .stock-note__call { position: relative; }
    .stock-note__call::before,
    .stock-note__call::after {
        content: '';
        position: absolute;
        left: 6px;
        right: 6px;
        height: 8px;
        z-index: 2;
        pointer-events: none;
        background: #000;            /* тёмная карточка */
    }
    .stock-note__call::before { top: 0;    border-radius: 0 0 8px 8px; }
    .stock-note__call::after  { bottom: 0; border-radius: 8px 8px 0 0; }

    .bg-white .stock-note__call::before,
    .bg-white .stock-note__call::after { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════════
   СХЕМА РАЗМЕРОВ КАРТИНЫ НА МОБИЛЬНОЙ. 01.11.2026
   ---------------------------------------------------------------------------
   Было: на узком экране показывался вариант «стопкой» — полотно сверху,
   полотно в багете снизу, и разницу в размере приходилось угадывать.
   Стало: тот же ряд, что на десктопе — обе фигуры рядом, в одном
   масштабе, выровненные по нижнему краю, как на образце (inmyroom).
   Рисунок — готовый SVG с viewBox, поэтому он сам ужимается по ширине
   экрана; горизонтальные картины влезают по той же причине.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .rv-dim__row   { display: block; }
    .rv-dim__stack { display: none; }
    /* width:100% раздувал одиночную схему (когда у картины нет размера
       с багетом и рисуется одно полотно) на всю ширину экрана. */
    .rv-dim__row .rv-dim__svg { width: auto; max-width: 100%; height: auto; }

    /* 01.11.2026 — схемы крупнее. Вширь внутри карточки расти было некуда:
       рисунок упирался в поля контейнера (338px из 390) и ужимался по
       max-width. Поэтому выпускаем ряд в поля страницы тем же приёмом, что
       и красная плашка (margin: 0 -26px): 338 → 390, то есть +15%. */
    .rv-dim__row { margin-left: -26px; margin-right: -26px; }
    /* На всю ширину тянется только пара «полотно + полотно в багете»
       (класс ставит rv_kart_scheme). Одиночная схема остаётся в своём
       размере по width: auto выше — иначе одно полотно раздувается. */
    .rv-dim__row .rv-dim__svg_pair { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════
   ОПЛАТА ЧАСТЯМИ — строка под кнопками карточки. 22.10.2026,
   по макету Влада (deploy/rassrochki/oplata-chastyami-maket.html).

   Заменила плашку «Долями» под ценой, полосу Яндекс Сплита и значок
   Т-Банка над ценой — те три выключены в шаблоне условием rv_parts_v1.
   Разметка — include/oplata-chastyami.php, поведение — js/rv_parts.js.
   ═══════════════════════════════════════════════════════════════════ */

.rv-parts {
    --rv-parts-ink:  #111;
    --rv-parts-mute: #7b7b7b;
    --rv-parts-line: #e4e2e0;
    --rv-parts-red:  #a33533;
    margin-top: 20px;
}
.rv-parts_dark {
    --rv-parts-ink:  #fff;
    --rv-parts-mute: rgba(255, 255, 255, .62);
    --rv-parts-line: rgba(255, 255, 255, .22);
    --rv-parts-red:  #e2726f;
}
.rv-parts[hidden] { display: none; }

/* ── строка (вариант 1 макета) ─────────────────────────────────────── */
.rv-parts__row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--rv-parts-ink);
    text-align: left;
    cursor: pointer;
}
.rv-parts__w { font-weight: 600; font-size: 17px; white-space: nowrap; }
.rv-parts__free { font-weight: 500; font-size: 15px; color: var(--rv-parts-mute); }
.rv-parts__chips { display: flex; gap: 6px; }
.rv-parts__chip {
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--rv-parts-line);
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--rv-parts-mute);
}
.rv-parts__chip[hidden] { display: none; }

/* 02.11.2026 — знаки сервисов вместо слов, по макету
   (deploy/rassrochki/oplata-chastyami-maket.html, классы lgd/lgp/ysw).
   Поля у каждого свои: у логотипа Долями буквы идут вплотную к краям
   рисунка, у Плайта внутри svg уже есть воздух, поэтому ему поля меньше.
   У Сплита рамки нет совсем: Яндекс отдаёт знак со своим полем, и наша
   рамка вокруг него выглядела бы второй обводкой. */
/* У Долями знак стоит на серой подложке без рамки — так на макете Влада
   от 02.11.2026. Серый тот же, что у плашки «в наличии» (#f2f2f2); на
   тёмной карточке вместо него полупрозрачный белый, иначе подложка
   проваливается в фон. */
.rv-parts__chip_dolyami {
    padding: 0 8px;
    color: var(--rv-parts-ink);
    background: #f2f2f2;
    border-color: transparent;
}
.rv-parts_dark .rv-parts__chip_dolyami { background: rgba(255, 255, 255, .12); }
.rv-parts__chip_dolyami svg { display: block; }
/* ── Оптическое центрирование знаков. 02.11.2026 ──────────────────────
   По блочной модели все три знака стоят ровно (align-items: center), но
   глазом смотрелись сдвинутыми: у каждого логотипа внутри свои поля.
   Замерено по пикселям на бою при восьмикратном увеличении, плашка 25px:
     Долями — краска сверху 8.0, снизу 9.6  → опустить на 0.8
     Сплит  — сверху 6.0,  снизу 7.0        → опустить на 0.5
   Сдвигаем transform'ом: раскладку он не трогает, высоту плашки тоже. */
.rv-parts__chip_dolyami svg { transform: translateY(0.8px); }
/* Плайт НЕ сдвигаем: его логотип симметричен внутри картинки (поля
   22,3% сверху и 21,5% снизу) и в плашке стоит ровно — по 6,5px с обеих
   сторон. Пиксельный замер показывал у него перекос только потому, что
   ловил рамку плашки, и сдвиг по этому замеру как раз ломал центровку. */
/* Сплит опускаем на четверть пикселя. Замеры у него пляшут в пределах
   ±1px (без сдвига выходило +0.93, с половиной пикселя −1.00), то есть
   это уже на грани точности метода; берём середину. */
.rv-parts__chip_split img,
.rv-parts__chip_split span  { transform: translateY(0.25px); }

.rv-parts__chip_plait { padding: 0 7px; }
.rv-parts__chip_plait img { display: block; height: 14px; width: auto; }
/* Сплит — значок плюс слово, на светло-серой подложке, как у Долями.
   Рамки нет: подложка сама отделяет знак от фона. */
.rv-parts__chip_split {
    gap: 5px;
    padding: 0 8px;
    background: #f2f2f2;
    border-color: transparent;
    color: var(--rv-parts-ink);
}
.rv-parts__chip_split img { display: block; }
/* В макете порядок знаков: Долями, Плайт, Сплит. В разметке Сплит стоит
   посередине (его место там было с прежней версии), поэтому отправляем
   его в конец ряда порядком, а не правкой шаблона. */
.rv-parts__chip_split { order: 3; }
.rv-parts_dark .rv-parts__chip_split { background: rgba(255, 255, 255, .12); }
.rv-parts__arr { width: 16px; height: 16px; color: var(--rv-parts-mute); transition: transform .2s ease; }
.rv-parts__row[aria-expanded="true"] .rv-parts__arr { transform: rotate(180deg); }
@media (hover: hover) { .rv-parts__row:hover .rv-parts__arr { color: var(--rv-parts-ink); } }

/* Проба бейджа Сплита: должна быть в раскладке, иначе Яндекс её не
   отрисует, — поэтому уводим за край экрана, а не прячем. */
/* 02.11.2026 — пробе обязательна ШИРИНА. Без неё абсолютно
   спозиционированный блок за краем экрана схлопывается в ноль, бейдж
   Яндекса внутри получает нулевую высоту, и проверка «отрисовался ли»
   всегда отвечала «нет» — знак Сплита не показывался никогда. С шириной
   бейдж рисуется (замерено на бою: высота 14px при size=s). */
.rv-parts__probe { position: absolute; left: -9999px; top: 0; width: 320px; }

/* ── раскрытие (вариант 2 макета) ──────────────────────────────────── */
.rv-parts__pop { position: relative; margin-top: 14px; max-width: 520px; }
.rv-parts__pop[hidden] { display: none; }
.rv-parts__popbox {
    position: relative;
    background: #fff;
    border: 1px solid var(--rv-parts-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
    padding: 22px 24px 18px;
    color: #111;
}
.rv-parts_dark .rv-parts__popbox { background: #1c1c1c; border-color: rgba(255,255,255,.18); color: #fff; }
.rv-parts__close {
    position: absolute; top: 10px; right: 12px;
    border: 0; background: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--rv-parts-mute);
}
.rv-parts__popbox h3 {
    display: flex; justify-content: space-between; align-items: center;
    margin: 0; font-weight: 600; font-size: 17px;
}
.rv-parts__popbox h3 span { font-weight: 500; font-size: 14px; color: var(--rv-parts-mute); }
.rv-parts__opt {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--rv-parts-line);
}
.rv-parts__opt:first-of-type { margin-top: 12px; }
.rv-parts__opt[hidden] { display: none; }
.rv-parts__n { font-weight: 600; font-size: 14px; }
.rv-parts__t { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--rv-parts-mute); }
.rv-parts__t b { color: inherit; font-weight: 600; }
.rv-parts_dark .rv-parts__t b { color: #fff; }
.rv-parts__go {
    border: 0; background: none; cursor: pointer;
    font-weight: 600; font-size: 14px; color: var(--rv-parts-red); white-space: nowrap;
}
@media (hover: hover) { .rv-parts__go:hover { text-decoration: underline; } }
.rv-parts__fn { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--rv-parts-mute); }
.rv-parts__ysw { display: inline-flex; align-items: center; }

/* ── телефон ───────────────────────────────────────────────────────── */
@media (max-width: 719px) {
    /* 02.11.2026, макет Влада: на телефоне строка одна — мелкая серая
       сумма, следом знаки сервисов, всё в один ряд между ценой и
       кнопками. Перенос запрещаем, стрелку убираем: в макете её нет, а
       место она занимает. Строка остаётся кликабельной — окно выбора
       открывается нажатием на неё целиком. */
    /* Кнопки стоят ровно посередине между строкой рассрочки и заголовком
       «Описание»: сверху зазор даёт margin-top кнопок (15px), снизу —
       margin-bottom у них же (13px) плюс собственные 2px у описания.
       Прежде было 29px сверху и 2px снизу — кнопки прижимались к тексту. */
    .rv-parts { margin: 10px 0 0; }
    .catalod-detail__main .catalod-detail__action { margin-bottom: 13px; }
    /* wrap, а не nowrap: на 390 всё встаёт в один ряд (занято 273 из 338),
       но когда Яндекс покажет третий знак — Сплит, — на узком экране ряду
       не хватит места, и лучше перенести знаки вниз, чем выпустить их за
       край. Стрелки в строке нет, поэтому перенос ничего не ломает. */
    .rv-parts__row { gap: 5px; flex-wrap: wrap; }
    /* Сумма 11px: при знаках, увеличенных на 15%, ряд в 12px перестал
       помещаться в 338 и переносился на две строки. */
    .rv-parts__w { font-size: 11px; font-weight: 500; color: var(--rv-parts-mute); white-space: nowrap; }
    .rv-parts__free { font-size: 12px; }
    .rv-parts__chips { gap: 5px; flex: 0 0 auto; }
    .rv-parts__arr { display: none; }
    /* знаки компактнее, иначе три штуки не встают в ряд на 360 */
    /* Знаки на 15% крупнее (02.11.2026, по слову Влада — предыдущие были
       мелковаты): высота 22 → 25, кегль 10 → 11, рисунки пропорционально.
       Чтобы три знака с суммой остались в одном ряду, зазоры между ними
       ужаты до 4px, а поля внутри — до 6px. */
    .rv-parts__chip { height: 25px; font-size: 11px; padding: 0 7px; }
    .rv-parts__chip_dolyami svg { width: 58px; height: 9px; }
    .rv-parts__chip_dolyami { padding: 0 7px; }
    .rv-parts__chip_plait img { height: 12px; }
    .rv-parts__chip_plait { padding: 0 6px; }
    .rv-parts__chip_split { padding: 0 7px; gap: 4px; }
    .rv-parts__chip_split img { width: 13px; height: 13px; }
    .rv-parts__chips { gap: 4px; }
    .rv-parts__pop { max-width: none; }
    .rv-parts__popbox { border-radius: 16px; padding: 18px 16px; }
    .rv-parts__opt { grid-template-columns: 1fr auto; gap: 4px 10px; }
    .rv-parts__n { grid-column: 1; }
    .rv-parts__t { grid-column: 1; }
    .rv-parts__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   «В ИЗБРАННОЕ» — КРУГЛАЯ КНОПКА В РЯДУ ПОКУПКИ. 02.11.2026
   ---------------------------------------------------------------------------
   Было: сердечко поверх фотографии, справа вверху. Стало: круглая кнопка
   третьей в ряду с «В корзину» и «Быстрая покупка» (перенос — в
   js/rv-mobile.js, функция favInRow).
   Иконки готовые, от Влада: icons/izbrannoe-krug.svg и
   izbrannoe-krug-aktivno.svg. Внутри у них свой фирменный красный, поэтому
   обе темы карточки выглядят одинаково — красный круг на фоне страницы.
   Активное состояние — класс active, его ставит общий обработчик
   избранного (markup/assets/js/main.js), он же работает и для гостя
   (cookie), и для вошедшего (UF_FAVORITES).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Ряд: кнопки делят остаток, круг не сжимается. nowrap — чтобы третья
       кнопка не срывалась на новую строку. */
    .catalod-detail__main .catalod-detail__action {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }
    .catalod-detail__action .btn.btn-add,
    .catalod-detail__action .btn.btn_border {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
        white-space: nowrap;
    }

    /* Сама кнопка: круг диаметром с высоту соседних кнопок (52px).
       Тап-зона — весь круг, это больше требуемых 44px. */
    .catalod-detail__action .rv-favbtn {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        margin: 0;
        padding: 0;
        border: 0;
        background: center / 52px 52px no-repeat url("../icons/izbrannoe-krug.svg");
        border-radius: 50%;
        cursor: pointer;
        position: static;
        display: block;
    }
    .catalod-detail__action .rv-favbtn.active {
        background-image: url("../icons/izbrannoe-krug-aktivno.svg");
    }
    /* Внутренности прежнего сердечка (две иконки спрайта и подпись
       «Добавить в избранное») не нужны: вид даёт фоновая картинка. */
    .catalod-detail__action .rv-favbtn .btn-wish__icon,
    .catalod-detail__action .rv-favbtn .btn-wish__label { display: none; }

    /* На телефоне наведения нет — подсветку не делаем, иначе на тач-экране
       она залипает после касания. */
    @media (hover: hover) {
        .catalod-detail__action .rv-favbtn:hover { opacity: .85; }
    }
}

/* ═══ ОТСТУП ПЕРЕД «ВАС МОЖЕТ ЗАИНТЕРЕСОВАТЬ» ══════════════════════════
   03.11.2026. Блок рекомендаций рисует SearchBooster: его скрипт
   (trade-widgets/init.js) находит НАШ контейнер карточки .catalod-detail
   и вставляет <sb-widget id="621"> сразу после него — insertAdjacentElement
   ('afterend'). Содержимое виджета лежит в shadow DOM, поэтому снаружи
   его не достать и стилями не поправить; трогать их классы и не нужно.

   Отступ вешаем на свой якорь и только когда виджет реально смонтирован
   (:has(+ sb-widget)): скрипт не отработал — тега нет, правила нет и
   лишней пустоты под карточкой не появляется.

   Десктоп (≥992px) — мобильная вёрстка не меняется. */
@media (min-width: 992px) {
    .catalod-detail:has(+ sb-widget) { margin-bottom: 70px; }
}