/* ══════════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ (до 767px). 17.10.2026, по макету Влада
   ~/Desktop/Claude Manager/deploy/mobile/mobile-kartochka-maket.html —
   спецификация в конце файла источник истины.

   Десктоп здесь не трогаем вообще: весь файл внутри @media до 767px.
   Подключается после compat-old-blocks.css, версия — в имени (rv_asset).
   ══════════════════════════════════════════════════════════════════════ */

/* Нижняя панель живёт в разметке на всех страницах, а раскладку получает
   только внутри медиазапроса ниже. Без этой строки на десктопе она
   выводилась неоформленным списком ссылок в левом верхнем углу.
   На мобильном правило перебивается display: grid в блоке 2. */
.rv-tabbar { display: none; }

@media (max-width: 767px) {

/* ── 1. ПОИСК СВЕРХУ ─────────────────────────────────────────────────
   Шапка липкая, а уезжает ровно её верх (логотип): отрицательный top
   считает скрипт по реальной геометрии и кладёт в --rv-head-off. */
.header {
    position: sticky;
    top: var(--rv-head-off, 0px);
    z-index: 60;
}
/* Белый фон шапки — ТОЛЬКО на светлых страницах (карточка, корзина,
   оформление: у них body.bg-white). На главной и в каталоге сайт тёмный,
   там шапка остаётся чёрной — иначе белый логотип пропадает на белом. */
body.bg-white .header,
body.bg-white .header-main,
body.bg-white .header .header-logo-label { background: #fff !important; }
.header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* у строки свой gap — он добавлялся к отступу логотипа (8 + 10 = 18) */
    gap: 0 !important;
    padding-bottom: 10px;
    /* 17.10.2026 — линию под поиском убрали по слову Влада (в макете
       она была). Низ шапки теперь без разделителя. */
    border-bottom: 0 !important;
}
/* Логотип — своей строкой над поиском, по центру; он и уезжает вверх. */
.header-main .header-main__logo {
    /* В index.css логотип на мобильном вынут из потока и смещён — он
       ложился поверх поля поиска и уезжал за левый край (замерено
       left: -159 при ширине 354). Возвращаем в поток и центруем. */
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    /* по макету: логотип ~40, под ним 8 до поля, 10 под полем */
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
}
/* display здесь НЕ трогаем: им сайт переключает светлый и тёмный
   логотип по теме карточки — иначе показываются оба сразу. */
.header-main .header-main__logo picture,
.header-main .header-main__logo img {
    width: auto !important;
    max-width: 86%;
    height: 56px;
    max-height: 56px;
    margin: 0 auto !important;
    padding: 0 !important;
}
/* Поле вместо кнопки-лупы: показываем input, лупу кладём внутрь слева. */
.header .search-form {
    flex: 0 0 100%;
    max-width: 100%;
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    background: #f2f2f2;
    border: 0;
    border-radius: 8px;
    order: 3;
}
.header .search-form input#title-search-input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 auto;
    width: 100%;
    height: 42px;
    padding: 0;
    order: 2;
    font-size: 16px;      /* 16px — иначе iOS зумит страницу при фокусе */
    color: #111;
    background: transparent;
    border: 0;
    outline: none;
}
.header .search-form input#title-search-input::placeholder { color: #8a8a8a; }
.header .search-form button {
    order: 1;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    color: #8a8a8a;
    background: none;
    border: 0;
}
/* Лупа: была крупная чёрная — делаем 20px серой внутри поля. */
.header .search-form .ic-search_mob {
    width: 20px !important;
    height: 20px !important;
    display: block;
    fill: #8a8a8a !important;
    color: #8a8a8a !important;
}
.header .search-form .ic-search_desk { display: none; }

/* Старое: выезжающий чёрный поиск, бургер, сердечко и корзина в шапке. */
.search_modal,
.black_blur,
.header-main__btn.js-open-mobile-sidebar,
.header .header-action { display: none !important; }

/* ── 2. НИЖНЯЯ ПАНЕЛЬ ────────────────────────────────────────────── */
.rv-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* top и height задаём явно: какой-то чужой стиль (скорее всего из
       сторонней подключённой таблицы) ставит nav-у top: 0, и панель
       растягивалась во весь экран — замерено 664px при экране 664. */
    top: auto;
    height: auto;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #eee;
}
.rv-tab {
    /* у сайта есть свои рамки для ссылок в nav — гасим, в макете их нет */
    border: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    line-height: 1.1;
    color: #8a8a8a;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.rv-tab.is-active { color: #111; }
.rv-tab__ic { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; }
.rv-tab__cnt {
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #a3302e;
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
}
.rv-tab__cnt:empty { display: none; }
/* У сайта вкладки-ссылки получают вертикальные разделители (рамка или
   псевдоэлемент у соседей в nav) — в макете их нет, гасим. */
.rv-tabbar > *,
.rv-tabbar > * + * { border: 0 !important; box-shadow: none !important; }
.rv-tabbar > *::before,
.rv-tabbar > *::after { content: none !important; }
/* Сердечко поверх слайдера: у слайдов бывает свой контекст наложения. */

/* Воздух под контентом ровно на высоту панели — подвал не прячется. */
body { padding-bottom: var(--rv-tabbar-h, 64px); }
/* Чужие плавающие виджеты поднимаем над панелью. */
.rv-cookie, .js-rv-cookie, [class*="roistat"], [id*="roistat"],
.jivo-iframe-container, #jvlabelWrap {
    bottom: calc(var(--rv-tabbar-h, 64px) + var(--rv-buybar-h, 0px) + 8px) !important;
}

/* ── 3. ПОЛОСА ПОКУПКИ (только карточка товара) ──────────────────── */
.rv-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--rv-tabbar-h, 64px);
    z-index: 69;
    padding: 10px 16px;
    background: #fff;
    /* 02.11.2026 — вместо серой полоски сверху мягкая тень (по слову Влада).
       Панель выезжает снизу и прячется, когда основные кнопки карточки на
       экране: прятать нечего, пока покупатель и так их видит. Сдвигаем на
       свою высоту плюс высоту нижней навигации, чтобы уехала полностью. */
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
    transform: translateY(calc(100% + var(--rv-tabbar-h, 64px)));
    transition: transform .2s ease;
    will-change: transform;
}
.rv-buybar.rv-buybar_show { transform: none; }
/* Если человек просил систему не анимировать — показываем без выезда. */
@media (prefers-reduced-motion: reduce) {
    .rv-buybar { transition: none; }
}
.rv-buybar__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.rv-buybar__price {
    font-family: 'Abril Fatface', Georgia, serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    color: #111;
    white-space: nowrap;
}
.rv-buybar__dol { font-size: 12px; color: #6f6f6f; text-align: right; }
.rv-buybar__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Кнопки переезжают сюда как есть — свои обработчики они сохраняют. */
.rv-buybar .btn,
.rv-buybar .js-add2basket,
.rv-buybar .fast-order-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 16px;
}
.rv-buybar__btns > *:only-child { grid-column: 1 / -1; }
/* В теле карточки кнопки больше не нужны. */
/* Кнопки есть и под ценой, и в полосе внизу — в полосе это копии. */
.rv-buybar__copy { margin: 0 !important; }

/* 17.10.2026 — правки геометрии слайдера ОТКАЧЕНЫ: из-за них перестал
   работать свайп фотографий и пропала вступительная анимация (первый
   кадр уезжает, показывается второй и оба возвращаются). Слайдер живёт
   на своих размерах и transform, ломать их нельзя. Квадратный слайд и
   белые поля решаем иначе, после того как свайп снова проверен.       */

/* Пустой блок Яндекс Пэй давал 104px воздуха между строкой про коробку
   и плашкой «в наличии»: высота 0, а margin-top 30 плюс зазор колонки.
   Виджет сейчас ничего не рисует, поэтому отступы у него убираем. */
.catalod-detail__main .catalod-detail__split { margin: 0 !important; }

/* ── 4. СЕРДЕЧКО НА ФОТО ─────────────────────────────────────────── */
/* 01.11.2026. Было: скрипт считал координаты по картинке видимого слайда
   и ставил их инлайном. Пока слайдер не инициализировался, картинка
   стояла не на месте, и кнопка при загрузке оказывалась посреди верха
   фото, а вставала справа только после пересчёта (таймеры 400/1500 мс,
   load, resize) — то есть «прыгала».
   Стало: ни одного расчёта. Кнопка лежит в .catalod-detail__photo и
   позиционируется от него обычным absolute. Сам блок фото в разметке
   display: contents (его дети участвуют в колонке карточки напрямую),
   поэтому отсчитывать от него нельзя — делаем его обычным блоком с тем
   же order: 0, что у ленты внутри. Проверено: ни один блок карточки от
   этого не сдвинулся. Внутрь самой ленты .catalod-detail-img кнопку
   класть нельзя — лента прокручивается вбок, и кнопка уехала бы вместе
   со слайдом. */
.catalod-detail { position: relative; }
.catalod-detail__photo {
    display: block;
    position: relative;
    order: 0;
}
.rv-favfloat {
    position: absolute;
    z-index: 20;
    right: 6px;
    top: 6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.rv-favfloat .btn-wish { margin: 0; padding: 0; min-width: 0; }
.rv-favfloat .btn-wish__label { display: none; }
.rv-favfloat .btn-wish__icon { margin: 0; }

/* ── Блок «Нужна консультация? Звоните!» — красной полосой во всю
      ширину экрана, белым текстом (по правке Влада 17.10.2026).
      Красный тот же, что у верхней полосы доставки: rgb(173,43,42).
      Во всю ширину — приёмом 100vw с отрицательным margin, чтобы не
      зависеть от боковых полей страницы. */
.catalod-detail__main .stock-note__call {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 24px;
    padding: 18px 16px 22px;
    background: #ad2b2a;
    text-align: center;
}
.catalod-detail__main .stock-note__call-label {
    color: #fff;
    text-align: center;
}
.catalod-detail__main .stock-note__phone,
.catalod-detail__main .stock-note__phone:hover,
.catalod-detail__main .stock-note__phone:focus,
.catalod-detail__main .stock-note__phone:active {
    color: #fff;
    display: block;
    text-align: center;
}

/* ── 5. Воздух от строки про коробку до «Описания» ───────────────── */
.catalod-detail__main .rv-giftlink { margin-bottom: 0; }
/* Колонка — флекс с row-gap 20, он складывается с margin: чтобы от
   строки про коробку до «Описания» было ровно 32, ставим 2 (замерено). */
.catalod-detail__main .catalod-detail__desc { margin-top: 2px; }

/* ── 6. «Размер картины» / «Размер офорта» — всё по центру ───────
   Блок называется .rv-dim-block: в нём заголовок, подпись и две схемы
   (сама вещь и она же в багете). */
.rv-dim-block { text-align: center; }
.rv-dim-block .rv-sect-title,
.rv-dim-block .rv-sect-note { text-align: center; }
.rv-dim-block svg,
.rv-dim-block .rv-dim__svg { display: block; margin-left: auto; margin-right: auto; }
.rv-dim-block > div,
.rv-dim-block figure { margin-left: auto; margin-right: auto; }

/* ── 7. Подарочная упаковка: лента по макету ─────────────────────
   01.11.2026. Было: одна плитка 78% — на экране помещалась ровно одна,
   и лента выглядела как единственная карточка. Стало: 1,8 плитки,
   соседняя уходит в затухание у правого края — видно, что ряд
   продолжается. Картинка — квадрат во всю ширину плитки. */
/* Зазор между плитками 02.11.2026: вдвое меньше (16 → 8). Коробки стояли
   далеко друг от друга, ряд читался как отдельные карточки, а не лента. */
.rv-pack .rv-pack__row { gap: 8px; }
/* 42% (02.11.2026, по слову Влада — коробки были великоваты относительно
   остального содержимого карточки): при зазоре 16px, поле контейнера 26px
   и ряде, выпущенном вправо до рамки, на экран 390 входят ДВЕ плитки
   целиком и краешек третьей — видно, что ряд продолжается — вторая видна почти целиком, третья выглядывает
   краем под затуханием. Меряно с мобильным User-Agent (iPhone 13):
   в узком окне десктопного браузера контейнер уже, и доля другая. */
.rv-pack .rv-pack__row > .rv-boxtile,
.rv-pack .rv-pack__row > .rv-boxtile_custom { flex-basis: 42%; max-width: 42%; }

/* 02.11.2026 — внутри плитки всё сдвинуто вдвое плотнее (по слову Влада):
   картинка→название было 26px, цена→кнопка 26px, между подписями по 4px.
   Стало 13 / 13 / 2 / 2. Часть отступов приходит из compat-old-blocks
   (у названия и цены по 16px), поэтому их перебиваем здесь — этот файл
   грузится последним. */
.rv-pack .rv-boxtile__pic {
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 5px;
}
.rv-pack .rv-boxtile__name { margin-top: 8px; }
.rv-pack .rv-boxtile__pic img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Подписи по центру: название до трёх строк, артикул серым, цена жирной. */
.rv-pack .rv-boxtile__name {
    /* 02.11.2026 — кегли уменьшены примерно на 20% вместе с плиткой:
       15 → 12, артикул 13 → 11, цена 18 → 15. */
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* три строки всегда: у соседних коробок названия разной длины, и без
       этого артикул, цена и кнопка вставали на разной высоте. */
    min-height: calc(1.25em * 3);
}
.rv-pack .rv-boxtile__art {
    margin-top: 2px;
    font-size: 11px;
    text-align: center;
    color: #8a8a8a;
}
/* Отступ перед кнопкой задаёт не цена, а правило для предпоследнего
   элемента плитки в compat-old-blocks (16px) — оно специфичнее, поэтому
   половиним именно его. */
.rv-pack .rv-boxtile > *:nth-last-child(2) { margin-bottom: 8px; }
.rv-pack .rv-boxtile__price {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}
/* Кнопка 02.11.2026: 20% ширины она потеряла вместе с плиткой (160 → 126),
   поэтому в плитке остаётся во всю ширину — сжимать её ещё раз не нужно.
   Высота 44 → 38, кегль 16 → 14, чтобы не выглядела крупнее кнопок самой
   карточки. Прижимать её к низу через margin-top: auto нельзя: плитки
   тянутся по высоте самой длинной («Упаковка на заказ»), и между ценой и
   кнопкой появлялся провал в пол-экрана. Вместо этого равняем высоту
   названий — см. min-height выше. */
.rv-pack .rv-boxtile__add {
    width: 100%;
    height: 38px;
    margin: 5px 0 0;
    font-size: 14px;
}

/* ── «Упаковка на заказ»: кнопка вровень с «Добавить» ──────────────
   02.11.2026, по просьбе Влада. Блок шире соседних (65% против 42%),
   иначе длинное примечание уходило на пять строк и кнопка «Заказать»
   висела на 108px ниже кнопок «Добавить».
   Одной шириной не обойтись: картинка у этой карточки квадратная, и чем
   шире блок, тем он выше — расхождение только росло. Поэтому у неё своя
   высота картинки, подобранная так, чтобы низ содержимого совпал с
   соседями: это высота обычной плитки плюс 14px (у соседей ниже картинки
   идут три строки названия, артикул и цена, а здесь — заголовок и две
   строки примечания). В вычислении: 42vw — доля обычной плитки, 25px —
   поля и зазор. Меняешь долю плиток выше — пересчитай и это. */
.rv-pack .rv-pack__row > .rv-boxtile_custom {
    flex-basis: 65%;
    max-width: 65%;
}
.rv-pack .rv-boxtile_custom .rv-boxtile__pic {
    aspect-ratio: auto;
    height: calc(42vw - 25px);
}
.rv-pack .rv-boxtile_custom .rv-boxtile__note {
    font-size: 12px;
    line-height: 1.3;
    /* ровно три строки на любой ширине: на 360 примечание уходило на
       четвёртую, и кнопка снова съезжала вниз на 17px. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 3);
}

/* Затухания у правого края нет: по слову Влада 02.11.2026 градиент
   прозрачное→белое снят. Что ряд продолжается, видно по обрезанной
   второй плитке — подсказка полосой не нужна.

   Там же 02.11.2026: ряд уходит вправо до самой красной рамки страницы.
   Колонка карточки стоит внутри .wrapper с полем 20px (на 390: колонка
   26..364, wrapper 6..384), и ряд обрезался по колонке — между коробкой
   и рамкой оставалась белая полоса. Выпускаем ряд на эти 20px вправо;
   дальше его всё равно режет .wrapper с overflow-x: hidden, то есть
   ровно по рамке. Левый край не трогаем — первая плитка стоит по сетке
   карточки, как заголовок над ней. */
.rv-pack .rv-pack__row { margin-right: -20px; }

/* ── Видео-обзор: подрезка по краям ───────────────────────────────
   02.11.2026. По бокам ролика видны тонкие тёмные полоски. С нашей стороны
   их нет: у .video-review, __frame и самого iframe border 0, фон
   прозрачный, ширина ровно 338.00 без дробей. Полоски рисует плеер — у
   части роликов (сейчас это ВК Видео) превью вписывается в кадр с
   сохранением пропорций, и по краям остаётся его тёмный фон. Поправить
   содержимое чужого кадра нельзя, поэтому подрезаем сам кадр: растягиваем
   iframe на 4px больше по обеим сторонам и уводим на 2px влево и вверх,
   лишнее срезает overflow. Сперва подрезал только по бокам — после этого
   такая же полоска вылезла сверху, поэтому режем со всех четырёх сторон.
   Если полосок окажется больше двух пикселей — увеличить обе цифры. */
.video-review__frame {
    overflow: hidden;
    /* высоту держим сами: иначе кадр считается от содержимого, и растянуть
       iframe «на два пикселя выше» было бы не от чего. 16:9 — то же
       соотношение, что у кадра сейчас (338 × 190). */
    aspect-ratio: 16 / 9;
}
.video-review__frame iframe {
    display: block;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin: -2px 0 0 -2px;
}

/* ── Крошки в каталоге: как в карточке ─────────────────────────────
   02.11.2026. В каталоге разделы стояли вдвое дальше друг от друга, чем в
   карточке: точка-кружок там с полями по 10px, да ещё у списка gap 14 —
   между разделами выходило 40px против 16px в карточке. Приводим к
   карточке: поля точки 5px, зазор списка убираем. Правило только для
   мобильной, десктоп не трогаем. */
.catalog-section-header .breadcrumb { gap: 0; }
.catalog-section-header .breadcrumb li::before { margin: 0 5px; }

/* Заголовок раздела прилипал к крошкам: у .catalog-title margin-top −20px.
   Опускаем ровно на 15px → −5px. Селектор именно .catalog-title: мой
   прежний «main h1» зацеплял и название товара в карточке. */
.catalog-section-header .catalog-title { margin-top: -5px; }

/* ── 8. Крошки листаются пальцем ─────────────────────────────────
   Прокручивать надо САМУ .bredcrumb: это flex-строка с пунктами, а то,
   что снаружи, — обёртка с затуханием, и ещё выше .wrapper с
   overflow-x: hidden (замерено: scrollWidth 1830 при ширине 378). */
.bredcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.bredcrumb::-webkit-scrollbar { display: none; }
.bredcrumb > * { flex: 0 0 auto; white-space: nowrap; }
/* Затухание справа — только картинка, касание проходит сквозь. */
.bredcrumb-fade, .bredcrumb-fade * { pointer-events: none !important; }

/* ── 9. Тёмная тема карточки ─────────────────────────────────────── */
body:not(.bg-white) .header,
body:not(.bg-white) .header-main,
body:not(.bg-white) .header .header-logo-label { background: #111 !important; }

body:not(.bg-white) .header .search-form { background: #222; }
body:not(.bg-white) .header .search-form input#title-search-input { color: #fff; }
body:not(.bg-white) .header .search-form input#title-search-input::placeholder { color: rgba(255,255,255,.6); }
body:not(.bg-white) .header .search-form button { color: rgba(255,255,255,.6); }
body:not(.bg-white) .rv-tabbar { background: #111; border-top-color: #2a2a2a; }
body:not(.bg-white) .rv-tab { color: rgba(255,255,255,.6); }
body:not(.bg-white) .rv-tab.is-active { color: #fff; }
/* Тёмная карточка: тени не видно на чёрном, поэтому вместо неё тонкая
   линия сверху. 02.11.2026. */
body:not(.bg-white) .rv-buybar {
    background: #111;
    box-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
body:not(.bg-white) .rv-buybar__price { color: #fff; }
body:not(.bg-white) .rv-buybar__dol { color: rgba(255,255,255,.6); }

}