/**
 * Слой совместимости старой вёрстки с 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; }  /* в наличии: под описанием, перед телефоном */
    .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){
    /* плашка во всю ширину, без сдвига; миниатюра мельче */
    .rv-stock-plate{width:100%; box-sizing:border-box; margin-left:0; gap:16px; padding:6px 20px}
    .rv-stock-plate .stock-note__thumb{flex:0 0 72px; width:72px; height:72px}
    /* на мобильной .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; }
}