/* Десктопная обвязка публичного сайта (bikraapp.ru "/").
   Сами компоненты — карточки товара, хиты, цены, избранное, тосты — берутся
   из app.css, того же файла, что и в приложении: сайт не рисует свои
   карточки, а показывает наши. Здесь только то, чего в приложении нет:
   шапка сайта, герой, бегущая строка, баннер акций во всю ширину и подвал. */
:root {
    --site-navy: #0E1730;
    --site-navy-2: #14213D;
    /* Шрифт — тот же системный стек, что и в приложении (app.css). Из макетов
       взяты раскладка и анимации, но не гарнитура: PT Sans рядом с
       приложением читался бы как другой продукт. Крупные заголовки держим
       на весе и трекинге, а не на отдельной узкой гарнитуре. */
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    --disp: var(--sans);
}

/* app.css рассчитан на полноэкранные .screen приложения — на сайте страница
   обычная, прокручивается целиком. */
body.site-page { display: block; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; background: var(--bg); font-family: var(--sans); }
.site-page .container { width: min(1240px, 100%); margin: 0 auto; padding: 0 20px; }
/* Ни одна ссылка на сайте не подчёркивается: шапка, баннер акций, подвал —
   это кнопки и пункты меню, а не текстовые ссылки в абзаце. Исключение —
   правовые ссылки в самом низу (см. .ftr-copy a ниже). */
.site-page a { text-decoration: none; color: inherit; }
/* Элементы шапки и баннер акций — <button> (им нужен onclick в go()), а не
   ссылки. Без сброса браузер рисует им свою рамку outset и серый фон
   buttonface — именно из-за этого у иконок и адреса появлялась чёрная
   окантовка. appearance:none обязателен: с нативным видом кнопки часть
   движков игнорирует и заданный фон. */
.site-page .act,
.site-page .catbtn,
.site-page .topbar-address,
.site-page .promo-banner {
    appearance: none; -webkit-appearance: none;
    border: 0; background: none; padding: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}

/* ── ШАПКА ────────────────────────────────────────────────────────── */
/* Закреплена и «наезжает» на страницу при прокрутке — как строка поиска
   в каталоге приложения. Второй ряд (быстрые ссылки + адрес) намеренно
   вынесен из .hdr и уезжает вверх под неё. */
/* Скруглённый низ — как у закреплённой строки поиска в каталоге приложения:
   плашка повторяет её форму, а не режет экран прямой линией. */
/* В покое плашка полупрозрачная и «стеклянная» — сквозь неё просвечивает
   страница, как у закреплённой строки поиска в каталоге приложения. По мере
   прокрутки становится плотной, чтобы текст под ней не мешал читать. */
.site-page .hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border-radius: 0 0 22px 22px; transition: background .25s ease, box-shadow .25s ease; }
.site-page .hdr.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 6px 18px rgba(14,23,48,.12); }
.hdr-in { display: flex; align-items: center; gap: 16px; height: 68px; }
/* Логотип двумя файлами вместо CSS-фильтра: на светлом фоне надпись чёрная,
   на тёмном — белая, а красный знак в обоих случаях остаётся ровно
   фирменным (любой invert/hue-rotate его бы «увёл» в другой оттенок). */
.site-page .logo { display: flex; align-items: center; flex: none; margin-right: 12px; }
.site-page .logo img { height: 34px; width: auto; }
.site-page .logo .logo-light { display: none; }
:root[data-theme="dark"] .site-page .logo .logo-dark { display: none; }
:root[data-theme="dark"] .site-page .logo .logo-light { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-page .logo .logo-dark { display: none; }
    :root:not([data-theme="light"]) .site-page .logo .logo-light { display: block; }
}

/* color задаётся с той же специфичностью, что и общее правило
   «.site-page a { color: inherit }» — иначе надпись на красной кнопке
   наследовала бы тёмный цвет текста страницы. */
.site-page .catbtn { flex: none; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 16px; background: var(--red); color: #fff; font: 800 14px var(--sans); white-space: nowrap; transition: background .15s; }
.site-page .catbtn:hover { background: var(--red-dark); }
.catbtn svg { width: 18px; height: 18px; }

/* Поиск — тот же компонент .search из app.css (белая таблетка, лупа,
   крестик), тут только растягиваем его на всё свободное место. */
.site-page .hdr .search-wrap { flex: 1; min-width: 0; }
.site-page .hdr .search { height: 44px; padding: 0 16px; }
.site-page .hdr .search input { padding: 0; font-size: 15px; }
.site-page .hdr .search .clear { display: none; }
.site-page .hdr .search .clear.show { display: block; }

/* Подсказки поиска. Обёртка нужна только чтобы выпадающий список позиционировался
   по ширине поля, поэтому все размеры (flex, ширина) переехали с .search на неё. */
/* Именно block, а не flex-колонка: у .search из app.css есть свой flex: 1, и
   внутри колоночного контейнера он схлопывал таблетку по высоте до размера
   содержимого — поле выглядело сплющенным. */
.search-wrap { position: relative; display: block; min-width: 0; }
.site-page .hdr .search-wrap .search { width: 100%; box-sizing: border-box; }
.search-suggest { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: 0; max-height: min(64vh, 460px); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 18px 44px rgba(14,23,48,.16); }
.search-suggest[hidden] { display: none; }
.site-page .sg-item { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; }
.site-page .sg-item:hover, .site-page .sg-item[aria-selected="true"] { background: var(--surface-2, rgba(0,0,0,.04)); }
/* 3:4, как карточки товара в ленте, — квадрат обрезал рулоны по высоте. */
.sg-item img { flex: none; width: 42px; aspect-ratio: 3/4; object-fit: cover; border-radius: 9px; background: var(--surface-2, rgba(0,0,0,.05)); }
.sg-txt { min-width: 0; flex: 1; }
.sg-name { display: block; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-spec { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-price { flex: none; font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.sg-empty { padding: 14px 12px; font-size: 13.5px; color: var(--muted); }
.sg-all { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 13px 13px; background: none; color: var(--red); font: 800 13px var(--sans); cursor: pointer; }

/* Иконки отбиты от строки поиска воздухом, без разделительной линии —
   она дробила шапку на части. Логотип от кнопки «Каталог» отделён так же. */
.acts { display: flex; gap: 20px; align-items: center; margin-left: 14px; padding-left: 28px; }
.site-page .act { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink); font-size: 11px; font-weight: 600; }
.site-page .act .act-ic { display: grid; place-items: center; width: 24px; height: 24px; }
.site-page .act .act-ic svg { width: 23px; height: 23px; }
/* Оптическая правка: у «облачка» сообщений рисунок шире остальных иконок
   (19 единиц против 13 у профиля) и на общей линии выглядит крупнее и ниже.
   Геометрию иконки не трогаем — она общая с приложением, поправляем только
   её видимый размер здесь. */
.site-page .act .act-ic[data-ic="chat"] svg { width: 21px; height: 21px; }
.site-page .act:hover { color: var(--red); }
/* line-height: 1 вместо 18px: у счётчика сообщений поверх этого правила своя
   рамка (см. .notification-count в app.css), из-за которой коробка выше
   строки — цифра стояла над центром кружка. Центрует place-items ниже. */
.site-page .act-badge { position: absolute; top: -5px; right: 2px; display: none; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--red); color: #fff; font: 800 10px/1 var(--sans); font-style: normal; text-align: center; }
/* Счётчики избранного и сообщений app.js показывает классом .show — без
   этого правила бейдж оставался скрытым, сколько бы товаров ни добавили.
   Именно grid: у счётчика сообщений в app.css задан place-items: center, и
   с display: block цифра переставала центроваться в кружке. */
.site-page .act-badge.show { display: grid; place-items: center; }

.hdr-row2 { border-bottom: 1px solid var(--line); background: var(--surface-2, rgba(0,0,0,.02)); }
.hdr-row2-in { display: flex; align-items: center; gap: 20px; height: 40px; font-size: 13px; }
.quick-links { display: flex; align-items: center; gap: 20px; }
.site-page .quick-links a, .site-page .quick-links .quick-link-btn { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; transition: color .15s; }
.site-page .quick-links a:hover, .site-page .quick-links .quick-link-btn:hover { color: var(--red); }
.site-page .topbar-address { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
.site-page .topbar-address svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(-90deg); color: var(--muted); }

/* ── ЭКРАНЫ ПРИЛОЖЕНИЯ НА СТРАНИЦЕ САЙТА ──────────────────────────── */
/* Липкие шапки экранов (.sticky-head) рассчитаны на приложение, где они
   единственные вверху. На сайте сверху уже липнет своя шапка с z-index 50, и
   шапка экрана уезжала под неё: кнопка «Личный кабинет» с аватаром и именем
   оказывалась под строкой поиска, и нажать на неё было нельзя. */
.site-page .sticky-head { position: static; }
/* .screen из app.css рассчитан на полноэкранный слой мобильного приложения.
   На сайте экран — обычный блок в потоке страницы, под шапкой. */
.site-page .screen { position: static; inset: auto; height: auto; min-height: 0; padding: 0; overflow: visible; }
.site-page .screen:not(.active) { display: none; }
/* Главная приложения на сайте не показывается никогда: её роль играет
   витрина (герой + хиты + лента). В разметке она остаётся только потому,
   что assets/app.js обращается к её элементам (dirTrack и т.п.). */
.site-page #home { display: none !important; }
/* Нижняя панель вкладок — чисто мобильная навигация, на сайте её заменяют
   иконки в шапке. */
.site-page .tabbar, .site-page .notification-bell, .site-page .site-footer { display: none !important; }
/* Витринная часть видна только на экране каталога. */
/* Герой, бегущая строка, баннер акций и полоса приложения лежат на уровне
   страницы, а не внутри экрана, поэтому их видно откуда угодно, пока не
   спрячешь явно. Показываем только на витрине: на карточке товара, в корзине
   или в поддержке они не к месту. */
.site-page .site-hero, .site-page .ticker, .site-page .promo-banner, .site-page .app-strip { display: none; }
.site-page.site-showcase .site-hero { display: flex; }
.site-page.site-showcase .ticker { display: flex; }
.site-page.site-showcase .promo-banner { display: flex; }
.site-page.site-showcase .app-strip { display: flex; }
/* Лента на витрине показывает всё подряд, и отбор по характеристикам там ни к
   чему: кнопка над лентой только сбивала с толку. Отбор живёт на странице
   категории — у неё своя панель (.cat-filters). В приложении лента устроена
   иначе, и кнопка там нужна, поэтому правило только для сайта. */
.site-page.site-showcase .catalog-filter-row { display: none !important; }
.site-page:not(.site-showcase):not(.site-doc-active) .ftr { display: none !important; }
.site-page.site-doc-active .ftr { display: block; }
/* Корзина — законченная страница, а не промежуточный экран: подвал со
   ссылками и кнопками скачивания приложения нужен и под ней, сразу под
   «Рекомендуем». Оба :not() повторены, чтобы селектор перебил правило выше
   по специфичности, — иначе !important там оказывался сильнее. */
.site-page[data-active-screen="cart"]:not(.site-showcase):not(.site-doc-active) .ftr { display: block !important; }
/* В кабинете подвал тоже нужен: это законченные страницы, а не промежуточные
   экраны. Оба :not() повторены по той же причине — перебить правило выше. */
.site-page.site-cabinet:not(.site-showcase):not(.site-doc-active) .ftr { display: block !important; }
/* Внутренние экраны — в той же контентной колонке, что и витрина. */
.site-page .screen.active { width: min(1240px, 100%); margin: 0 auto; padding: 32px 20px 64px; }
.site-page #catalog.active { padding-top: 0; }

/* Кнопка «На главную» — только на внутренних экранах: на витрине возврат
   не нужен, там и так главная. */
.site-page .site-backbar { display: none; }
.site-page:not(.site-showcase) .site-backbar { display: block; padding: 14px 0 0; }
.site-page.site-has-own-back .site-backbar { display: none; }
/* На информационных страницах тёмный баннер прижат к шапке, а стрелка
   лежит поверх него слева — как в макетах. */
.site-page.site-doc-active .site-backbar { display: none; }
.site-page.site-doc-active .site-back { position: absolute; top: 22px; color: #fff; }
.site-page.site-doc-active .site-back:hover { color: #fff; background: rgba(255,255,255,.14); }
.site-page.site-doc-active .screen.active { padding-top: 0; }
.site-page .site-back { width: 38px; height: 38px; color: var(--ink); transition: color .15s, background .15s; border-radius: 12px; }
.site-page .site-back:hover { color: var(--red); background: var(--surface-2, rgba(0,0,0,.04)); }

/* Личный кабинет — карточкой по центру, как окно входа, а не растянутым
   на всю ширину экраном приложения. Оформление наше: тот же белый
   surface, скругления и тени, что у остальных блоков. */
.site-page #profile .web-cabinet-login {
    width: min(640px, 100%); margin: 8px auto 0; padding: 44px 40px;
    background: var(--white); border: 1px solid var(--line); border-radius: 22px;
    box-shadow: 0 18px 48px rgba(14,23,48,.10);
}
.site-page #profile .web-cabinet-login h2 { font-size: 30px; text-transform: uppercase; letter-spacing: -.4px; }
@media (max-width: 640px) {
    .site-page #profile .web-cabinet-login { padding: 32px 20px; border-radius: 18px; }
}

/* ── ШТОРКИ → МОДАЛЬНЫЕ ОКНА ──────────────────────────────────────── */
/* В приложении это нижние шторки (палец у нижнего края экрана). На десктопе
   шторка во всю ширину смотрится чужеродно — те же самые окна показываем
   по центру, как это делают маркетплейсы, но в нашей стилистике: те же
   цвета, скругления и содержимое, меняется только позиционирование. */
@media (min-width: 768px) {
    .site-page .cart-sheet {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: min(520px, calc(100vw - 48px));
        max-height: min(80vh, 720px);
        border-radius: 22px;
        padding: 0 24px 24px;
        box-shadow: 0 24px 70px rgba(14,23,48,.28);
        transform: translate(-50%, -46%) scale(.98);
        opacity: 0;
        transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
    }
    .site-page .cart-sheet.show { transform: translate(-50%, -50%); opacity: 1; bottom: auto; }
    /* «Ручка» шторки — жест только для телефона, в окне она не нужна. */
    .site-page .cart-sheet .sheet-handle, .site-page .cart-sheet .cart-sheet-handle { display: none; }
}

/* ── ОФОРМЛЕНИЕ ЗАКАЗА ────────────────────────────────────────────────
   В приложении это отдельный экран во весь телефон. На сайте — окно по
   центру в две колонки, как на маркетплейсах: слева способ оплаты,
   получатель, доставка и состав заказа, справа промокод, итоги и оплата.
   Порядок блоков задаётся в buildCheckoutLayout() (assets/site.js). */
@media (min-width: 1024px) {
    /* box-shadow вместо отдельного элемента-подложки: затемнение фона нужно
       только на сайте, и заводить ради него узел в общей разметке не стоит. */
    .site-page .checkout {
        inset: auto; top: 50%; left: 50%;
        width: min(1180px, calc(100vw - 56px));
        height: min(860px, calc(100vh - 72px));
        border-radius: 24px; overflow: hidden;
        box-shadow: 0 30px 80px rgba(14,23,48,.34), 0 0 0 100vmax rgba(9,14,28,.55);
        display: grid; grid-template-columns: minmax(0, 1fr) 372px; grid-template-rows: auto minmax(0, 1fr);
        transform: translate(-50%, -46%) scale(.985);
        transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease, visibility .22s;
        /* Обязательно: в приложении закрытое оформление уезжает за правый край
           экрана своим transform, а мы этот transform заменили на «по центру».
           Без opacity/visibility окно оставалось на экране мёртвым слоем —
           перехватывало прокрутку страницы и не давало себя закрыть. */
        opacity: 0; visibility: hidden;
    }
    .site-page .checkout.show { transform: translate(-50%, -50%); opacity: 1; visibility: visible; }
    .site-page .checkout .co-head { grid-column: 1 / -1; }
    .site-page .checkout .co-body { grid-column: 1; grid-row: 2; padding: 20px; }
    /* Итоги — правая колонка на всю высоту окна, со своей прокруткой. */
    .site-page .checkout .co-foot {
        grid-column: 2; grid-row: 2;
        display: flex; flex-direction: column; overflow-y: auto;
        padding: 20px; border-top: 0; border-left: 1px solid var(--line);
        background: var(--surface-2, rgba(0,0,0,.02));
    }
    /* Промокод — вверху колонки, итоги и «Оплатить» — внизу, у края окна:
       кнопка оплаты не должна прилипать к полю промокода. */
    .site-page .checkout .co-foot .co-promo-group { margin-bottom: 16px; }
    .site-page .checkout .co-foot .co-summary-lines { margin-top: auto; }
    .site-page .checkout .co-line-img { width: 60px; height: 80px; }

    /* Прокрутка внутри окна не должна «пробивать» на страницу под ним:
       без contain, докрутив колонку до края, человек начинал листать сайт. */
    .site-page .checkout .co-body, .site-page .checkout .co-foot { overscroll-behavior: contain; }

    /* Способы оплаты — тремя компактными плитками в ряд: вертикальный список
       из трёх широких строк занимал половину колонки. Иконка уезжает наверх,
       галочка выбранного — в угол, чтобы не растягивать плитку по ширине. */
    .site-page .checkout #coPay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .site-page .checkout #coPay .co-opt { position: relative; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 16px; }
    .site-page .checkout #coPay .co-opt .co-ic { width: 26px; height: 26px; color: var(--muted); }
    .site-page .checkout #coPay .co-opt.active .co-ic { color: var(--red); }
    .site-page .checkout #coPay .co-opt .co-ic .ic-svg { width: 22px; height: 22px; }
    .site-page .checkout #coPay .co-opt > span { font-size: 13.5px; line-height: 1.25; }
    .site-page .checkout #coPay .co-opt small { margin-top: 4px; font-size: 11.5px; line-height: 1.35; }
    .site-page .checkout #coPay .co-opt.active::after { position: absolute; top: 12px; right: 12px; margin: 0; font-size: 13px; }
    .site-page .checkout .co-foot .cart-total { margin: 10px 0 14px; font-size: 16px; }
    .site-page .checkout .co-foot .cart-total b { font-size: 26px; }
    /* Карта пунктов самовывоза в широкой колонке может быть выше. */
    .site-page .checkout .co-map { height: 300px; }
}

/* ── ИНФОРМАЦИОННЫЕ СТРАНИЦЫ (о компании, доставка, самовывоз, опт, возврат) ──
   Раскладка, плашки и анимации перенесены из макетов, но собраны на нашей
   палитре, нашем шрифте и наших иконках (штриховые, как ICONS в app.js) —
   чтобы страницы читались как часть того же продукта, что и каталог. */
.site-page .screen.site-doc { width: 100%; max-width: none; padding: 0 0 72px; }
.site-doc .doc-body { width: min(1240px, 100%); margin: 0 auto; padding: 56px 20px; }
.site-doc .doc-band { background: var(--surface-2, rgba(0,0,0,.025)); border-block: 1px solid var(--line); }

/* Тёмный герой страницы — та же гамма, что у баннера акций на витрине. */
.site-doc .doc-hero { background: linear-gradient(120deg, var(--site-navy) 0%, var(--site-navy-2) 60%, #2a1420 130%); color: #fff; }
.site-doc .doc-hero-in { width: min(1240px, 100%); margin: 0 auto; padding: 64px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.site-doc .doc-hero-narrow { grid-template-columns: 1fr; max-width: min(900px, 100%); }
.site-doc .doc-eyebrow { margin: 0 0 14px; color: #ff6d64; font: 800 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.site-doc .doc-title { margin: 0; font: 800 46px/1.08 var(--sans); letter-spacing: -1.2px; color: #fff; }
.site-doc .doc-lead { margin: 20px 0 0; max-width: 620px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); }
.site-doc .doc-hero-badge { display: inline-block; margin-top: 22px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 700; }

/* Показатели в герое — красная линия слева, как в макете. */
.site-doc .doc-hero-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.site-doc .doc-hero-num { padding-left: 18px; border-left: 3px solid var(--red); }
.site-doc .doc-hero-num b { display: block; font: 800 42px/1 var(--sans); letter-spacing: -1.5px; color: #fff; }
.site-doc .doc-hero-num b i { font-style: normal; font-size: 26px; color: var(--red); }
.site-doc .doc-hero-num span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.5); }

/* Заголовок секции. */
.site-doc .doc-head { margin-bottom: 30px; }
.site-doc .doc-head h2 { display: flex; align-items: center; gap: 12px; margin: 0; font: 800 32px/1.15 var(--sans); letter-spacing: -.7px; color: var(--ink); }
.site-doc .doc-head p { margin: 12px 0 0; max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.site-doc .doc-step-no { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; font: 800 17px var(--sans); }
.site-doc .doc-label { margin: 0 0 14px; color: var(--red); font: 800 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.site-doc .doc-body > p { margin: 14px 0 0; max-width: 820px; font-size: 15px; line-height: 1.75; color: var(--ink); }

/* Две колонки «текст + фото». */
.site-doc .doc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.site-doc .doc-split h2 { margin: 0 0 18px; font: 800 32px/1.15 var(--sans); letter-spacing: -.7px; color: var(--ink); }
.site-doc .doc-split p { margin: 0 0 14px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.site-doc .doc-split p:last-child { margin-bottom: 0; }
.site-doc .doc-split-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; background: var(--surface-2, #f0f2f5); }
.site-doc .doc-split-img img { width: 100%; height: 100%; object-fit: cover; }

/* Карточки с круглой иконкой — подъём и заливка иконки при наведении. */
.site-doc .doc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.site-doc .doc-cards-2 { grid-template-columns: repeat(2, 1fr); }
.site-doc .doc-card { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.site-doc .doc-card:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 14px 34px rgba(14,23,48,.10); }
.site-doc .doc-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: rgba(225,37,27,.10); transition: background .25s ease; }
.site-doc .doc-card:hover .doc-ic { background: var(--red); }
/* Штрих и скругления — как у ICONS в app.js, чтобы иконки не выбивались. */
.site-doc .doc-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease; }
.site-doc .doc-card:hover .doc-ic svg { stroke: #fff; }
.site-doc .doc-card h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.site-doc .doc-card p { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.site-doc .doc-card .doc-card-note { margin-top: 6px; color: var(--red); font-size: 13px; font-weight: 700; }
.site-doc .doc-card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.site-doc .doc-card ul li { position: relative; padding: 6px 0 6px 22px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.site-doc .doc-card ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.site-doc .doc-card-ok ul li::before { background: #2E8B3E; }
.site-doc .doc-card-no ul li::before { background: var(--muted); }
.site-doc .doc-num { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px; border-radius: 50%; background: var(--red); color: #fff; font: 800 15px var(--sans); }

/* Таймлайн: вертикальная линия, точки, год в отдельной колонке. */
.site-doc .doc-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 122px; }
.site-doc .doc-timeline::before { content: ''; position: absolute; left: 122px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.site-doc .doc-timeline li { position: relative; padding: 0 0 34px 34px; }
.site-doc .doc-timeline li:last-child { padding-bottom: 0; }
.site-doc .doc-timeline b { position: absolute; left: -122px; top: 0; width: 100px; text-align: right; font: 800 20px var(--sans); color: var(--muted); }
.site-doc .doc-timeline .tl-dot { position: absolute; left: -7px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(225,37,27,.15); }
.site-doc .doc-timeline h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.site-doc .doc-timeline p { margin: 8px 0 0; max-width: 560px; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* Пронумерованные шаги. */
.site-doc .doc-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.site-doc .doc-steps li { counter-increment: step; position: relative; padding: 24px 28px 24px 76px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); transition: border-color .25s ease, box-shadow .25s ease; }
.site-doc .doc-steps li:hover { border-color: var(--red); box-shadow: 0 12px 30px rgba(14,23,48,.08); }
.site-doc .doc-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 28px; top: 24px; font: 800 20px var(--sans); color: var(--red); }
.site-doc .doc-steps h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.site-doc .doc-steps p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* Таблица. */
.site-doc .doc-table { margin-top: 22px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--white); }
.site-doc .doc-tr { display: flex; justify-content: space-between; gap: 16px; padding: 15px 24px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.site-doc .doc-tr > * { flex: 1; }
.site-doc .doc-tr > *:last-child { text-align: right; }
.site-doc .doc-tr:last-child { border-bottom: 0; }
.site-doc .doc-th { background: var(--surface-2, rgba(0,0,0,.03)); color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.site-doc .doc-tr span { color: var(--muted); }
.site-doc .doc-tr b { color: var(--ink); }

.site-doc .doc-note { margin-top: 22px; padding: 16px 20px; border-left: 3px solid var(--red); border-radius: 0 14px 14px 0; background: rgba(225,37,27,.06); font-size: 14px; line-height: 1.6; color: var(--ink); }

.site-doc .doc-cta { margin-top: 52px; padding: 48px; border-radius: 22px; text-align: center; color: #fff; background: linear-gradient(120deg, var(--site-navy) 0%, var(--site-navy-2) 55%, var(--red-dark) 130%); }
.site-doc .doc-cta h2 { margin: 0; font: 800 30px/1.15 var(--sans); letter-spacing: -.6px; color: #fff; }
.site-doc .doc-cta p { margin: 12px 0 24px; color: rgba(255,255,255,.75); font-size: 15px; }

@media (max-width: 1023px) {
    .site-doc .doc-hero-in { grid-template-columns: 1fr; gap: 36px; padding: 48px 20px; }
    .site-doc .doc-cards { grid-template-columns: repeat(2, 1fr); }
    .site-doc .doc-split { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
    .site-doc .doc-title { font-size: 32px; letter-spacing: -.8px; }
    .site-doc .doc-head h2, .site-doc .doc-split h2 { font-size: 25px; }
    .site-doc .doc-hero-nums { grid-template-columns: 1fr; gap: 20px; }
    .site-doc .doc-cards, .site-doc .doc-cards-2 { grid-template-columns: 1fr; }
    .site-doc .doc-body { padding: 40px 20px; }
    .site-doc .doc-timeline { padding-left: 26px; }
    .site-doc .doc-timeline::before { left: 26px; }
    .site-doc .doc-timeline b { position: static; display: block; width: auto; margin-bottom: 6px; text-align: left; }
    .site-doc .doc-cta { padding: 30px 20px; }
    .site-doc .doc-tr { flex-direction: column; gap: 4px; }
    .site-doc .doc-tr > *:last-child { text-align: left; }
}
/* ── ГЕРОЙ ────────────────────────────────────────────────────────── */
/* Пока видео (1.8 МБ) грузится отложенно, за ним стоит фирменный градиент, а
   не кадр-заглушка: фотография успевала мелькнуть и подмениться видео, и это
   бросалось в глаза сильнее, чем спокойный тёмный фон. Видео проявляется
   поверх, когда действительно начало играть. */
.site-hero { position: relative; height: 72vh; min-height: 460px; max-height: 760px; display: flex; align-items: center; overflow: hidden; background: var(--site-navy); }
.site-hero .hero-media { background: linear-gradient(125deg, #0E1730 0%, #14213D 48%, #1B2E52 100%); }
.site-hero .hero-media video { opacity: 0; transition: opacity .6s ease; }
.site-hero .hero-media video.ready { opacity: 1; }
.site-hero .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.site-hero .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.site-hero .hero-media .scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,23,48,.86) 0%, rgba(14,23,48,.55) 55%, rgba(14,23,48,.15) 100%); }
.site-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.75); font: 700 12px var(--sans); }
.site-hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(225,37,27,.3); }
.site-hero h1 { margin: 16px 0 0; font: 700 58px/1.05 var(--disp); text-transform: uppercase; color: #fff; max-width: 640px; }
.site-hero h1 .accent { color: var(--red); }
/* Абзац лежит на полупрозрачной плашке с размытием — как в приложении
   (.hero p.lead в app.css). Без неё текст читался прямо по видео. */
/* Перенос строки задан в разметке (<br>), поэтому fit-content даёт ширину
   ровно по самой длинной строке, без пустой полосы справа. */
.site-hero .lead {
    display: block; width: fit-content; max-width: 100%;
    margin: 16px 0 0; padding: 14px 18px;
    font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.16); border-radius: 22px;
}
.site-hero .hero-greeting { margin: 16px 0 0; }
/* Текст героя прижат к левому краю контентной колонки. width обязателен:
   .container здесь — flex-элемент, и без явной ширины он сжимается по
   содержимому, а margin:auto центрует его — из-за этого текст «уезжал»
   в середину экрана вместо левого края. */
.site-hero-content { position: relative; z-index: 1; width: min(1240px, 100%); text-align: left; }
/* Затемнение у нижнего края — без него подсказка «Листать» терялась на
   светлых кадрах видео. */
.site-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(to top, rgba(10,15,28,.82), rgba(10,15,28,.35) 45%, transparent); pointer-events: none; }
/* Подсказка «Листать» лежит поверх видео, а кадр бывает и тёмным, и почти
   белым (стена склада). Раньше полоска была полупрозрачно-белой и на светлых
   кадрах пропадала вместе с бегущим по ней бликом — со стороны выглядело так,
   будто анимация сломалась. Теперь у полоски своя тёмная подложка со светлым
   контуром, а у текста — тень: читаются на любом кадре. */
.site-hero-hint { position: absolute; z-index: 2; bottom: 22px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(8,14,34,.6); }
.scroll-line { width: 3px; height: 38px; border-radius: 3px; background: rgba(8,14,34,.45); box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 2px 8px rgba(8,14,34,.35); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 60%; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 45%, #fff 55%, rgba(255,255,255,0)); animation: scrollDrop 1.6s 1.4s ease infinite; }
@keyframes scrollDrop { 0% { top: -50%; } 100% { top: 150%; } }

/* ── БЕГУЩАЯ СТРОКА + БАННЕР АКЦИЙ (без зазора, во всю ширину) ────── */
.ticker { background: var(--site-navy); overflow: hidden; height: 40px; display: flex; align-items: center; }
.ticker-track { display: flex; white-space: nowrap; animation: tickerRoll 26s linear infinite; }
/* Пауза под курсором убрана намеренно: строка живёт во всю ширину страницы,
   и мышь оказывается над ней просто по пути — со стороны это выглядело как
   зависший сайт, а не как «остановил, чтобы прочитать». */
.t-item { display: inline-flex; align-items: center; }
.t-text { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); padding: 0 22px; }
.t-dot { color: var(--red); }
@keyframes tickerRoll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* color/text-decoration заданы явно: баннер — ссылка <a>, и без них он
   получал бы системный синий цвет и подчёркивание поверх градиента. */
/* display здесь намеренно НЕ задаём: показом баннера управляет только пара
   правил выше (скрыт по умолчанию, flex на витрине). Иначе это правило,
   стоящее ниже и с той же специфичностью, перебивало бы скрытие, и баннер
   висел бы на всех экранах — в профиле, корзине и поддержке тоже. */
.site-page .promo-banner {
    width: 100%;
    align-items: center; justify-content: space-between; gap: 16px;
    padding: 28px max(20px, calc((100vw - 1240px) / 2 + 20px));
    background: linear-gradient(120deg, var(--site-navy) 0%, var(--site-navy-2) 55%, var(--red-dark) 130%);
    color: #fff; text-decoration: none;
}
.site-page .promo-banner:hover .promo-cta { background: rgba(255,255,255,.26); }
.promo-content { display: flex; flex-direction: column; gap: 6px; color: #fff; }
.promo-content .t { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); }
.promo-content .h { font: 700 24px var(--disp); text-transform: uppercase; }
.promo-cta { flex: none; padding: 10px 20px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: 700 13px var(--sans); white-space: nowrap; }

/* ── СЕКЦИИ: хиты и умная лента (компоненты — из app.css) ─────────── */
/* Хиты — та же горизонтальная карусель, что и в приложении (.hits из app.css).
   Свои отступы 20px и ограничение ширины 1120px из app.css здесь сбрасываем:
   иначе лента вложена в .container с такими же отступами и выглядит зажатой
   и сдвинутой, а не во всю ширину контентной колонки. */
.site-page .hits-head { width: auto; margin: 0 0 16px; padding: 0; }
.site-page .hits-head .t { font: 700 22px/1.2 var(--sans); letter-spacing: -.3px; text-transform: none; }
.site-page .hits-head .t [data-ic] svg { width: 20px; height: 20px; }
.site-page .hits { width: auto; margin: 0; padding: 0 0 6px; }
.site-page .hit-card { width: 210px; }
/* «Умная лента» — заголовок раздела, а не подпись-счётчик: крупнее, чем
   такая же строка в каталоге приложения. */
.site-page .count-row { margin-bottom: 20px; align-items: baseline; }
.site-page .count-row .t { font: 700 22px/1.2 var(--sans); letter-spacing: -.3px; text-transform: none; }
.site-page .grid { width: auto; margin: 0; padding: 0; grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* ── ПОДВАЛ ───────────────────────────────────────────────────────── */
.ftr { background: var(--site-navy); color: rgba(255,255,255,.7); padding: 48px 0 20px; }
/* align-items: start — иначе колонки растягиваются на высоту самой длинной
   и их содержимое «съезжает» относительно друг друга. */
.site-page .ftr-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: start; gap: 32px; padding: 0 20px; margin-bottom: 8px; }
.ftr h5 { font: 700 11px var(--sans); color: #fff; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.ftr ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; font-size: 13px; }
/* Явный цвет обязателен: tel:/mailto: без него получают системный синий
   цвет ссылок, который на тёмном подвале выглядит чужеродно. */
.site-page .ftr a, .site-page .ftr ul a, .site-page .ftr-link { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; color: rgba(255,255,255,.7); text-decoration: none; }
.site-page .ftr a:hover, .site-page .ftr ul a:hover, .site-page .ftr-link:hover { color: #fff; }
.site-page .ftr-copy a, .site-page .ftr-legal { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; color: rgba(255,255,255,.55); text-decoration: underline; text-underline-offset: 3px; }
.site-page .ftr-copy a:hover, .site-page .ftr-legal:hover { color: #fff; }
/* Подвал всегда тёмный — берём готовый вариант лого с белой надписью.
   Никаких фильтров: они бы ещё раз перекрасили уже белый текст в чёрный,
   а фирменный красный знак увели бы в грязно-тёмный оттенок. */
.ftr-logo img { height: 38px; width: auto; margin-bottom: 14px; }
.ftr-about { font-size: 13px; line-height: 1.6; max-width: 280px; color: rgba(255,255,255,.55); }
.ftr-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.ftr-store { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font: 700 11px var(--sans); }
.ftr-store:hover { background: rgba(255,255,255,.14); }
.ftr-store img { height: 22px; width: auto; }
.ftr-store.is-disabled { opacity: .6; cursor: default; }
/* .ftr-copy и .ftr-cols — это .container, у которого свои margin/padding с
   более высокой специфичностью: без .site-page отступы этих строк обнулялись,
   и «© 2008–2026 …» прилипало к разделительной линии. */
.site-page .ftr-copy { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding: 28px 20px 24px; font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.45); display: flex; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; }
/* Подвал показывается только после того, как лента догрузилась до конца —
   иначе при быстрой прокрутке он на долю секунды «подпрыгивал» вверх,
   пока подгружалась следующая страница товаров. */
.ftr { display: none; }
.ftr.show { display: block; }

/* ── АДАПТИВ ──────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .site-page .hits, .site-page .grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
    .site-hero h1 { font-size: 42px; }
    .site-page .hits, .site-page .grid { grid-template-columns: repeat(3, 1fr); }
    .ftr-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .hdr-in { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 10px; }
    .site-page .hdr .search-wrap { order: 3; width: 100%; }
    .acts { gap: 14px; }
    .act > span:last-child { display: none; }
    .hdr-row2-in { flex-wrap: wrap; height: auto; padding: 8px 0; gap: 8px; }
    .quick-links { flex-wrap: wrap; gap: 12px; }
    .topbar-address { margin-left: 0; }
    .site-hero { height: auto; padding: 44px 0 56px; min-height: 0; }
    .site-hero h1 { font-size: 32px; }
    .site-page .hits, .site-page .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .promo-banner { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
    .ftr-cols { grid-template-columns: 1fr; }
}

/* ── ТОЧЕЧНЫЕ ПРАВКИ ВИТРИНЫ И ЭКРАНОВ ────────────────────────────── */
/* Адрес доставки живёт в шапке сайта — в корзине второй такой же не нужен. */
.site-page .cart-address { display: none !important; }

/* Баннер акций и полоса приложения идут одной лентой, без зазора между ними:
   отступ до блока хитов держит уже сама полоса. */
.site-page.site-showcase .promo-banner { margin-bottom: 0; }

/* «Лента» и счётчик позиций — по краям сетки карточек: у .count-row из
   app.css свои боковые отступы 20px, из-за которых заголовок стоял левее
   первой карточки, а счётчик — правее последней. */
.site-page #catalog .count-row { width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* ── ПРАВКИ ПОСЛЕ ПЕРЕНОСА СТРАНИЦ ИЗ МАКЕТОВ ─────────────────────── */
/* Заголовок личного кабинета — по центру карточки, а не у левого края. */
.site-page #profile .web-cabinet-login { text-align: center; }
.site-page #profile .web-cabinet-login h2 { text-align: center; }

/* Стрелка «назад» на перенесённых страницах — вплотную к левому краю
   контентной колонки, а не с отступом контейнера. */
.site-page.site-doc-active .site-backbar .container { padding-left: 8px; }

/* Тёмные блоки в конце страниц стыкуются с подвалом без светлой щели. */
.site-page.site-doc-active .screen.active > *:last-child { margin-bottom: 0; }
.site-page.site-doc-active .ftr { margin-top: 0; }
.site-doc .cta-section, .site-doc .cta-block, .site-doc .about-cta,
.site-doc .contacts-cta, .site-doc .wholesale-cta { margin-bottom: 0 !important; }

/* ── СТЫКОВКА И ПАЛИТРА ПЕРЕНЕСЁННЫХ СТРАНИЦ ──────────────────────── */
/* Финальные баннеры страниц — в той же тёмной гамме, что баннер акций и
   подвал, а не сплошным ярко-красным: так они читаются как один блок с
   подвалом, а не как чужая вставка. */
.site-doc .about-cta, .site-doc .cta-band, .site-doc .contacts-cta, .site-doc .ws-cta {
    background: linear-gradient(120deg, var(--site-navy) 0%, var(--site-navy-2) 55%, var(--red-dark) 130%) !important;
    margin-bottom: 0 !important;
}
/* Между последним блоком страницы и подвалом не должно быть светлой щели. */
.site-page.site-doc-active .screen.active { padding-bottom: 0; }
.site-doc > *:last-child { margin-bottom: 0; }

/* Плюсы и «т» в крупных числах были почти вровень с самой цифрой. */
.site-doc .num-val em, .site-doc .hero-num-val span { font-size: 46%; vertical-align: super; margin-left: 2px; }

/* Номера шагов на «Возврате» — кружком в фирменном красном вместо
   блёклого серого квадрата. !important: в перенесённых стилях это правило
   задано селектором с id (#pageReturn .step-num), который иначе выигрывает. */
.site-doc .step-num {
    width: 34px !important; height: 34px !important; border-radius: 50% !important;
    background: var(--red) !important; color: #fff !important;
    font: 800 13px var(--sans) !important; letter-spacing: 0 !important;
}

/* Липкая панель разделов «Возврата» прижата к нашей шапке и такая же
   полупрозрачная; на этой странице скругление низа шапки убираем, иначе
   панель стыкуется с ней по дуге. Высота шапки разная на десктопе и телефоне,
   поэтому берём её из переменной — иначе панель либо висела бы с зазором,
   либо уезжала под шапку. */
.site-page { --sec-nav-top: 68px; }
.site-doc .sec-nav {
    top: var(--sec-nav-top) !important;
    background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--line) !important;
}
.site-page.site-doc-active:has(#pageReturn.active) .hdr { border-radius: 0; }

/* Иконки макетов — в нашей палитре и с нашей толщиной штриха. */
.site-doc svg[stroke]:not([stroke="none"]) { stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-doc .value-icon svg, .site-doc .pay-ic svg, .site-doc .adv-ic svg { stroke: var(--red); }

/* ── ФИНАЛЬНАЯ ОТДЕЛКА ПЕРЕНЕСЁННЫХ СТРАНИЦ ───────────────────────── */
/* Плюсы у крупных чисел стояли по базовой линии и «съезжали» вниз. */
.site-doc .num-val em, .site-doc .hero-num-val span { vertical-align: middle !important; position: relative; top: -.32em; }

/* Способ оплаты раскрывается поверх сетки, а не раздвигает её: раньше
   открытие одной карточки сдвигало вниз все соседние в той же строке. */
.site-doc .pay-card { position: relative; }
.site-doc .pay-card.open { z-index: 5; }
.site-doc .pay-card.open .pay-card-body {
    position: absolute; left: -1px; right: -1px; top: 100%;
    max-height: none !important; overflow: visible;
    background: var(--white); border: 1px solid var(--red); border-top: 0;
    border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px rgba(14,23,48,.16);
    animation: payDrop .2s ease;
}
@keyframes payDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Иконки-значки в блоках «Возврата» стояли выше первой строки текста. */
.site-doc .warn-box, .site-doc .note-box, .site-doc .info-box,
.site-doc .kit-note, .site-doc .contact-note { display: flex; align-items: center; gap: 12px; }
.site-doc .warn-box svg, .site-doc .note-box svg, .site-doc .info-box svg,
.site-doc .kit-note svg, .site-doc .contact-note svg { flex: none; align-self: center; margin-top: 0 !important; }

/* Стрелка «назад» — в одну строку с первой надписью страницы. */
.site-page.site-doc-active .site-backbar { height: auto; padding: 0; }
.site-page.site-doc-active .site-backbar .container { padding: 0; }
.site-page.site-doc-active .site-back { position: absolute; top: 62px; left: max(12px, calc((100vw - 1240px) / 2 - 30px)); }

/* Заголовки оптовой страницы были заметно крупнее остальных страниц. */
.site-doc#pageWholesale h1 { font-size: 40px !important; letter-spacing: -1px; }
.site-doc#pageWholesale h2 { font-size: 26px !important; }
.site-doc#pageWholesale .num-val { font-size: 38px !important; }

/* Профиль: пока человек не вошёл, заголовок «Личный кабинет» над карточкой
   лишний — он уже есть внутри самой карточки. Лежит он не прямым потомком
   экрана, а внутри .sticky-head > button.page-head, поэтому и селектор такой.
   У вошедшего клиента этот блок оставляем: там аватар и имя, и по нему
   открывается редактирование профиля. */
.site-page:not(.profile-authenticated) #profile .sticky-head { display: none; }
.site-page #profile .web-cabinet-login h2 { font-size: 22px; letter-spacing: -.2px; }

/* ── КОРЗИНА ─────────────────────────────────────────────────────────
   Две колонки, как на Ozon: слева товары, справа сводка с кнопкой оформления.
   Разметка та же, что в приложении, — узлы просто разложены по колонкам в
   buildCartLayout() (assets/site.js), поэтому все обработчики app.js живы. */
/* Сетка — на самом .wrap, строками: заголовок / панель выбора / товары со
   сводкой / рекомендации во всю ширину. */
.site-cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; column-gap: 24px; }
.site-cart > .site-cart-title { grid-column: 1 / -1; grid-row: 1; }
.site-page .site-cart > .cart-toolbar { grid-column: 1; grid-row: 2; }
.site-cart > .site-cart-main { grid-column: 1; grid-row: 3; min-width: 0; }
/* Сводка стоит в той же строке, что и список товаров: верхний край вровень
   с первой карточкой. Ровно одна строка — ниже во всю ширину идут
   рекомендации, и растянутая колонка налезала бы на них. */
.site-cart > .site-cart-side { grid-column: 2; grid-row: 3; }
.site-cart > #cartRecoCarousel { grid-column: 1 / -1; grid-row: 4; }
/* Пустая корзина — правой колонки нет (#cartFoot без .show), сетка схлопывается. */
.site-cart:not(:has(#cartFoot.show)) { grid-template-columns: minmax(0, 1fr); }
.site-cart:not(:has(#cartFoot.show)) .site-cart-side { display: none; }
.site-cart-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 800 30px/1.1 var(--sans); letter-spacing: -.7px; color: var(--ink); }
.site-cart-title span { font: 600 15px var(--sans); letter-spacing: 0; color: var(--muted); }
.site-page .site-cart-title .site-back { flex: none; margin-left: -8px; }
.site-page #cart .cart-toolbar { padding: 0 0 14px; }
/* Шапка экрана в приложении несёт адрес доставки; на сайте адрес скрыт, а
   панель выбора вынесена наверх — от .sticky-head остаётся пустая полоса. */
.site-page #cartStickyHead { display: none; }
/* Экран корзины начинается сразу под стрелкой «назад», без лишнего воздуха. */
.site-page #cart.screen.active { padding-top: 8px; }
/* Товары крупнее, чем на телефоне: 96×128 — те же 3:4, что и карточки ленты,
   просто читаемого на десктопе размера. */
.site-page .site-cart .cart-item { grid-template-columns: auto 96px minmax(0, 1fr) auto; padding: 16px; }
.site-page .site-cart .cart-item img { width: 96px; height: 128px; border-radius: 16px; }
/* Управление товаром — правой колонкой: количество и иконки в строку, под ними
   «Купить». На телефоне они идут отдельными строками под карточкой. */
.site-page .site-cart .ci-actions { grid-column: 4; grid-row: 1; justify-content: flex-end; gap: 8px; }
.site-page .site-cart .ci-buy { grid-column: 4; grid-row: 2; align-self: end; width: 100%; min-width: 190px; }

/* Правая колонка закреплена на уровне первого товара: список прокручивается,
   а сводка с кнопкой оформления остаётся на месте. top — высота залипающей
   шапки сайта плюс воздух. В приложении это фиксированная плашка внизу
   экрана (.cart-foot-fixed), здесь — липкая карточка сбоку. */
/* Сводка — обычный блок в потоке: стоит справа от первого товара и уезжает
   вверх вместе со страницей. Ни sticky, ни fixed: панель, висящая на экране
   до самого низа страницы, здесь не нужна. */
.site-page .site-cart-side { position: static; }
.site-page #cartFoot { position: static; left: auto; right: auto; bottom: auto; width: auto; transform: none; display: none; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px rgba(14,23,48,.07); }
.site-page #cartFoot.show { display: flex; }
.site-page #cartFoot .cart-total { margin: 8px 0 14px; font-size: 16px; }
.site-page #cartFoot .cart-total b { font-size: 24px; }

/* Рекомендации — во всю ширину под обеими колонками. */
.site-page #cart #cartRecoCarousel { margin-top: 40px; }
.site-page #cart #cartRecoCarousel .pc-title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; }

@media (max-width: 1023px) {
    .site-cart { grid-template-columns: minmax(0, 1fr); }
    .site-cart > .site-cart-side { grid-column: 1; grid-row: auto; }
    .site-cart > #cartRecoCarousel { grid-row: auto; }
    /* На узком экране колонок нет — сводка просто идёт в потоке под списком. */
    .site-page .site-cart-side { position: static; width: auto; }
    .site-page .site-cart .cart-item { grid-template-columns: auto 96px minmax(0, 1fr); }
    .site-page .site-cart .ci-actions { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; }
    .site-page .site-cart .ci-buy { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; width: 100%; }
}

/* Пустая корзина — по центру экрана, а не прижата влево. */
.site-page #cart .cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 46vh; }

/* Стрелка «назад» внутри героя перенесённых страниц: стоит в одной строке
   с надстрочником, поэтому не «плавает» — у каждой страницы своя высота
   этой строки, и абсолютное позиционирование туда не попадало. */
.site-doc [class*="eyebrow"], .site-doc [class*="kicker"] { display: inline-flex; align-items: center; gap: 8px; }
.site-doc .site-doc-back { width: 30px; height: 30px; margin-left: -6px; color: #fff; vertical-align: middle; }
.site-doc .site-doc-back:hover { color: #fff; background: rgba(255,255,255,.16); border-radius: 10px; }

/* Тост «товар в корзине»: в app.css он привязан к высоте нижней панели
   вкладок (--nav-h), которой на сайте нет, поэтому уводился за экран.
   Видимость дублируем здесь же — в паре с нашим правилом положения
   состояние .show иначе не отрабатывало. */
.site-page .toast { bottom: 28px; }
.site-page .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Подробности способа оплаты показываем отдельной панелью под сеткой:
   выпадающая внутри сетки карточка либо раздвигала соседей, либо
   перекрывала их — теперь ничего не смещается и ничего не закрывается. */
.site-doc .pay-detail { display: none; margin-top: 18px; padding: 24px 26px; border: 1px solid var(--red); border-radius: 16px; background: var(--white); animation: payDrop .2s ease; }
.site-doc .pay-detail.show { display: block; }
.site-doc .pay-detail h4 { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--ink); }
.site-doc .pay-card.open { border-color: var(--red); box-shadow: 0 10px 26px rgba(225,37,27,.14); }
.site-doc .pay-card.open .pay-card-body { display: none !important; }

/* Правая колонка на оптовой странице — карточка «Свяжитесь с нами». */
.site-doc .ws-contact-card { padding: 28px; border-radius: 18px; color: #fff; background: linear-gradient(140deg, var(--site-navy) 0%, var(--site-navy-2) 60%, var(--red-dark) 140%); }
.site-doc .ws-contact-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: #fff; }
.site-doc .ws-contact-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78); }
.site-doc .ws-contact-list { display: grid; gap: 10px; margin-bottom: 18px; }
.site-doc .ws-contact-list a { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 15px; }
.site-doc .ws-contact-list svg { width: 18px; height: 18px; fill: none; stroke: #ff6d64; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-doc .ws-contact-note { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; color: rgba(255,255,255,.6); }

/* Иконки шапки стоят на равных расстояниях независимо от счётчиков:
   у каждой одинаковая ширина, а бейдж вынесен из потока (absolute), иначе
   «Сообщения» с цифрой распирало шире соседей. */
.site-page .acts { gap: 4px; }
.site-page .act { width: 76px; justify-content: flex-start; text-align: center; }
.site-page .act > span:last-child { display: block; width: 100%; }
.site-page .act-badge { right: 14px; }

/* На экране регистрации карточка кабинета поднимается к самому верху —
   отдельного заголовка над ней нет, и пустое место сверху не нужно. */
.site-page #profile.screen.active { padding-top: 12px; }
.site-page #profile .web-cabinet-login { min-height: 0; margin-top: 0; padding-top: 34px; }

/* ── ШТОРКИ ПРИЛОЖЕНИЯ КАК ОКНА НА ДЕСКТОПЕ ───────────────────────── */
/* У формы заявки и формы адреса в app.css есть мобильные правила «на всю
   высоту экрана» (#leadSheet.show, #addressSheet.address-form-open) — они
   рассчитаны на телефон с клавиатурой и перебивали центрирование, из-за
   чего на сайте вылезала белая полоса во весь экран с одной кнопкой. */
@media (min-width: 768px) {
    .site-page #leadSheet.show,
    .site-page #addressSheet.address-form-open {
        top: 50% !important; bottom: auto !important;
        left: 50%; right: auto;
        width: min(520px, calc(100vw - 48px));
        max-height: min(80vh, 720px) !important;
        border-radius: 22px !important;
        padding: 0 24px 24px !important;
        transform: translate(-50%, -50%) !important;
        overflow-y: auto !important;
    }
    .site-page #leadSheet .lead-body,
    .site-page #addressSheet.address-form-open .address-form { display: block; flex: none; overflow: visible; }
    .site-page #addressSheet.address-form-open .address-field { display: block; flex: none; }
    .site-page #addressSheet.address-form-open .address-suggestions { position: static; max-height: 220px; }
}

/* Правая карточка на оптовой странице заканчивается вровень с формой. */
.site-doc .form-section { align-items: stretch !important; }
.site-doc .ws-contact-card { display: flex; flex-direction: column; height: 100%; }
.site-doc .ws-contact-note { margin-top: auto; }

/* ── ТЁМНАЯ ТЕМА: ЦВЕТНЫЕ ПЛАШКИ И ПОДСВЕТКИ ──────────────────────── */
/* Пастельные заливки макета (#f0fdf4, #fff5f5, #fffbeb) в тёмной теме
   светятся белесыми пятнами. Меняем на полупрозрачный тон того же цвета
   с читаемым светлым текстом — смысл (зелёный/красный/жёлтый) сохраняется. */
:root[data-theme="dark"] .site-doc .green,
:root[data-theme="dark"] .site-doc .ok { background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.35) !important; color: #86efac !important; }
:root[data-theme="dark"] .site-doc .red,
:root[data-theme="dark"] .site-doc .bad { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.35) !important; color: #fca5a5 !important; }
:root[data-theme="dark"] .site-doc .warn,
:root[data-theme="dark"] .site-doc .info-box { background: rgba(234,179,8,.12) !important; border-color: rgba(234,179,8,.35) !important; color: #fde68a !important; }
:root[data-theme="dark"] .site-doc .green *, :root[data-theme="dark"] .site-doc .ok *,
:root[data-theme="dark"] .site-doc .red *, :root[data-theme="dark"] .site-doc .bad *,
:root[data-theme="dark"] .site-doc .warn *, :root[data-theme="dark"] .site-doc .info-box * { color: inherit !important; }

/* Поиск отделён от иконок заметным воздухом (разделительной линии не рисуем):
   поле не тянется до самых иконок, между ними остаётся широкий зазор. */
/* flex: 0 1 — поле НЕ растягивается на всё свободное место: раньше оно
   упиралось прямо в иконки, и «воздух» между ними съедался. */
/* Поле тянется до упора, но не вплотную к иконкам: 10px + gap шапки дают
   ~30px воздуха — раньше зазор был 60px и выглядел провалом. */
.site-page .hdr .search-wrap { flex: 0 1 660px; margin-right: 10px; }
.site-page .acts { margin-left: auto; padding-left: 0; }
.site-page .hdr-in { gap: 20px; }

/* Стрелка «назад» на «Опте» и «Возврате»: их надстрочник — плашка-пилюля,
   внутри неё кнопка смотрелась вложенной. Выносим её из потока плашки. */
.site-doc .page-kicker { position: relative; padding-left: 0 !important; background: none !important; border: 0 !important; }
.site-doc .page-kicker .site-doc-back { margin-left: -8px; }

/* ── ТАЙМЛАЙН «ИСТОРИЯ КОМПАНИИ» ──────────────────────────────────── */
/* Линия — светло-красная. Пульсируют только крайние точки (начало и
   сегодняшний день), тихо: кольцо расходится наружу и растворяется, назад
   не сжимается — обратный ход читался как мигание. Промежуточные точки
   не анимируем: шесть пульсаций разом выглядели пёстро.
   Цвет из --red, поэтому в тёмной теме приглушается сам. */
.site-doc .timeline::before, .site-doc .tl-line { background: color-mix(in srgb, var(--red) 30%, transparent) !important; }
.site-doc .tl-item:first-child .tl-dot,
.site-doc .tl-item:last-child .tl-dot { animation: tlPulse 3s ease-out infinite; }
@keyframes tlPulse {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 32%, transparent); }
    to { box-shadow: 0 0 0 7px color-mix(in srgb, var(--red) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .site-doc .tl-item .tl-dot { animation: none !important; }
}

/* ── ЛИЧНЫЙ КАБИНЕТ ──────────────────────────────────────────────────
   Слева карточка клиента и меню разделов, справа — выбранный раздел.
   Сами разделы — обычные экраны приложения (#profileEdit, #orders,
   #favorites, #support, #promotions, #settings); панель переезжает внутрь
   активного экрана (см. syncCabinet в assets/site.js), и экран становится
   двухколоночным. Своей копии разделов на сайте нет. */
.site-page.site-cabinet .screen.active {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    align-items: start;
    column-gap: 28px;
}
/* Всё содержимое экрана уходит в правую колонку — панель занимает левую. */
.site-page.site-cabinet .screen.active > .cab-rail { grid-column: 1; grid-row: 1; }
/* Раздел прокручивается внутри своего окна, а не растягивает страницу:
   длинные списки заказов и избранного должны кончаться на высоте панели.
   Содержимое экрана собирает в .cab-panel syncCabinet (assets/site.js). */
.site-page.site-cabinet .screen.active > .cab-panel {
    grid-column: 2; grid-row: 1; min-width: 0;
    max-height: calc(100vh - 190px); min-height: 420px;
    overflow-y: auto; overscroll-behavior: contain;
    /* Место под тень и фокусные обводки карточек, которые иначе срезал бы
       край прокручиваемой области. */
    padding: 2px 4px 2px 2px;
}

.cab-rail { display: flex; flex-direction: column; gap: 10px; }
.cab-user { padding: 24px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); text-align: center; }
.cab-avatar { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: var(--red); color: #fff; font: 800 32px var(--sans); }
.cab-name { font: 800 17px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.cab-method { margin-top: 4px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.cab-method[hidden] { display: none; }

.cab-nav { display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); overflow: hidden; }
.site-page .cab-item, .site-page .cab-logout {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 14px; border: 0; border-radius: 14px; background: none;
    color: var(--ink); font: 600 14.5px var(--sans); text-align: left; cursor: pointer;
    transition: background .15s, color .15s;
}
.site-page .cab-item[hidden] { display: none; }
.site-page .cab-item:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
/* Активный раздел — красной заливкой и полосой слева, как в макете. */
.site-page .cab-item.active { position: relative; background: rgba(225,37,27,.08); color: var(--red); font-weight: 800; }
.site-page .cab-item.active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.cab-ic { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.cab-ic .ic-svg { width: 19px; height: 19px; }

.site-page .cab-logout { justify-content: center; margin-top: 2px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--muted); font-weight: 700; }
.site-page .cab-logout:hover { border-color: var(--red); color: var(--red); }

/* Заголовки разделов в приложении — компактные шапки экрана с кнопкой
   «назад». В кабинете назад некуда: раздел выбирается слева. */
.site-page.site-cabinet .screen.active .section-back { display: none; }

@media (max-width: 1023px) {
    /* Узкий экран — панель сверху, раздел под ней, как в приложении. */
    .site-page.site-cabinet .screen.active { grid-template-columns: minmax(0, 1fr); }
    /* Узкий экран — панель сверху, раздел под ней и без своей прокрутки:
       на телефоне листается вся страница целиком, как в приложении. */
    .site-page.site-cabinet .screen.active > .cab-panel { grid-column: 1; grid-row: auto; max-height: none; overflow: visible; }
    .site-page.site-cabinet .screen.active > .cab-rail { grid-column: 1; grid-row: auto; }
}

/* Раздел «Профиль» в кабинете — карточка с заголовком, полями в две колонки
   и ссылкой «Редактировать» справа (см. enhanceProfileSection в site.js). */
.site-page.site-cabinet .cab-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -4px 0 18px; }
.site-page.site-cabinet .cab-card-head h2 { margin: 0; font: 800 20px var(--sans); letter-spacing: -.3px; color: var(--ink); }
/* Кнопка «Редактировать» в шапке карточки — ссылкой, а не плашкой во всю ширину. */
.site-page.site-cabinet .cab-card-head .profile-edit-btn { width: auto; margin: 0; padding: 0; border: 0; background: none; color: var(--red); font: 700 14px var(--sans); }
/* align-content/align-items: start обязательны. Карточку профиля растягивает
   по высоте окружение экрана, и сетка без них раздавала лишнее место между
   строками — поля разъезжались по всей карточке. */
.site-page.site-cabinet .cab-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; align-content: start; align-items: start; }
/* И сама карточка должна быть по содержимому, а не во всю высоту колонки. */
.site-page.site-cabinet #webProfileView { display: block; height: auto; align-self: start; }
.cab-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cab-field-l { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cab-field-v { font-size: 15.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cab-field.cab-empty .cab-field-v { font-weight: 500; color: var(--muted); }
/* Выход из аккаунта уже есть в левой панели — второй такой же строкой
   в разделе профиля он только дублируется. */
.site-page.site-cabinet #webCabinetLogout { display: none; }
@media (max-width: 640px) {
    .site-page.site-cabinet .cab-fields { grid-template-columns: 1fr; }
}

/* Форма редактирования профиля — под карточкой данных, поля в две колонки,
   как в макете. Разметку формы рисует app.js, здесь только раскладка. */
.site-page.site-cabinet #webProfileForm.show { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.site-page.site-cabinet #webProfileForm .web-profile-title { grid-column: 1 / -1; }
/* E-mail, телефон и кнопки — во всю ширину: в макете рядом стоят только имя
   с фамилией. */
.site-page.site-cabinet #webProfileForm #webProfileEmail,
.site-page.site-cabinet #webProfileForm #webProfilePhone,
.site-page.site-cabinet #webProfileForm .web-profile-form-actions { grid-column: 1 / -1; }

/* Карточка «Реквизиты» — только на чтение, поэтому без кнопки
   редактирования; вместо неё подпись, кто эти данные меняет. */
.site-page.site-cabinet .cab-card-note { color: var(--muted); font-size: 12.5px; }
.site-page.site-cabinet #siteBusinessCard { margin-top: 16px; }

/* ── КАРТОЧКА ТОВАРА НА ДЕСКТОПЕ ─────────────────────────────────────
   Слева галерея, справа сведения и кнопка покупки, снизу во всю ширину
   рекомендации. Разметку рисует openProduct() в app.js; здесь только
   раскладка, а два узла переносит buildProductLayout() (assets/site.js). */
@media (min-width: 1024px) {
    /* Тело карточки — сетка. Прокрутка остаётся на нём же, как в приложении. */
    .site-page .product .pr-body {
        display: grid;
        /* Миниатюры · фото · сведения · покупка — как на маркетплейсе. */
        grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 340px);
        align-items: start;
        /* align-content обязателен: у .pr-body в app.css задан flex: 1, то есть
           определённая высота. Сетка в таком контейнере растягивает строки, и
           фотография, будучи выше своей строки, вылезала на следующую —
           характеристики и рекомендации наезжали на неё. */
        align-content: start;
        column-gap: 28px;
        width: min(1240px, 100%);
        margin: 0 auto;
        padding: 0 20px 48px;
        box-sizing: border-box;
    }
    /* Миниатюры — вертикальной лентой левее фотографии. */
    .site-page .product .pr-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; gap: 10px; padding: 0; overflow: visible; }
    .site-page .product .pr-thumb { width: 76px; height: 101px; }
    .site-page .product .pr-gallery { grid-column: 2; grid-row: 1; }
    .site-page .product .pr-content { grid-column: 3; grid-row: 1; padding: 0; }
    .site-page .product .pr-buy { grid-column: 4; grid-row: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
    /* Характеристики — под фотографией, во всю ширину левой части: в узкой
       средней колонке таблица «ключ — значение» ломалась. */
    .site-page .product .pr-under { grid-column: 1 / 4; grid-row: 2; margin-top: 28px; }
    /* Рекомендации — отдельной строкой под всеми колонками. Строка третья:
       вторую занимают характеристики, и без явного номера рекомендации
       наезжали на фотографию, когда сведения справа оказывались короче её. */
    .site-page .product #prSimilarCarousel { grid-column: 1 / -1; grid-row: 3; margin-top: 40px; }

    /* Кнопки над фотографией, а не поверх неё: стрелка «назад» слева,
       поиск, поделиться и избранное справа. */
    .site-page .product .pr-float-head {
        position: static; z-index: auto;
        width: min(1240px, 100%); margin: 0 auto;
        padding: 20px 20px 12px;
        box-sizing: border-box;
        pointer-events: auto;
    }
    /* Верхний отступ галереи в приложении оставлен под плавающие кнопки —
       здесь они в потоке, и он больше не нужен. */
    .site-page .product .pr-gallery { padding-top: 0; border-radius: 20px; overflow: hidden; }
    /* Фотография 3:4. Высота именно явная, а не через aspect-ratio: при
       расчёте строк сетка не знает высоту, выведенную из соотношения сторон,
       и считала строку по колонке со сведениями — фотография вылезала на
       характеристики и рекомендации. */
    .site-page .product .pr-gallery { height: min(34vw, 620px); }
    .site-page .product .pr-gallery img { width: 100%; height: 100%; object-fit: cover; }
    /* Лента миниатюр — той же высоты, со своей прокруткой, если их много. */
    .site-page .product .pr-thumbs { max-height: min(34vw, 620px); overflow-y: auto; }
    /* Кнопка покупки — внутри правой колонки, не плашкой. */
    .site-page .product .pr-buy > .co-foot { position: static; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
    .site-page .product .pr-buy .pr-price { font-size: 28px; }
    /* Рекомендации листаются вниз списком карточек, а не горизонтальной лентой. */
    .site-page .product #prSimilarCarousel .pc-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; overflow: visible; }
    .site-page .product #prSimilarCarousel .pc-viewed-card { width: auto; }

}

/* ── КАТЕГОРИИ НА ДЕСКТОПЕ ───────────────────────────────────────────
   Слева полный список направлений компании, справа — товары выбранного.
   Плитки направлений (их рисует renderCategoryMenu в app.js) на широком
   экране скрыты: они занимали всю страницу и не показывали, что внутри.
   Раскладку собирает buildCategoryLayout() в assets/site.js. */
/* Заголовок «Категории» со стрелкой «назад» — из разметки экрана приложения,
   где он и нужен. На сайте над меню каталога он лишний: сюда приходят из
   шапки, и путь показывают сами направления. */
.site-page #categories .page-head { display: none; }
/* Раскладка идёт во всю ширину окна, а не по колонке в 1240px (см. общее
   правило .site-page .screen.active): меню прижато к левому краю, и на
   широком мониторе рядом помещается больше плиток. */
.site-page #categories.screen.active.site-cat-two-col { width: 100%; max-width: none; padding: 24px 0 64px; }
.site-page #categories.site-cat-two-col .wrap { display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: start; align-content: start; column-gap: 32px; width: 100%; max-width: none; padding: 0 24px; }
/* Название направления должно умещаться в одну строку — на двух строках
   список выглядел рваным. */
.site-page #categories.site-cat-two-col .cat-nav-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Плитки направлений остаются на месте — они и есть правая часть, просто
   показываются только те, что входят в выбранное направление. Формат 3:4,
   как у карточек товара, поэтому в ряд их встаёт четыре, а не две широких. */
.site-page #categories.site-cat-two-col #categoryMenuGrid { grid-column: 2; grid-row: 2; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.site-page #categories.site-cat-two-col .cat-menu-card { min-height: 0; aspect-ratio: 3 / 4; }
.site-page #categories.site-cat-two-col .cat-menu-card[hidden] { display: none; }
.site-page #categories.site-cat-two-col .cat-side { grid-column: 2; grid-row: 1; }
/* Меню занимает всю левую часть по высоте, а не обрывается по содержимому. */
.site-page #categories.site-cat-two-col .cat-nav { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; }
.cat-nav { display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.site-page .cat-nav-item {
    appearance: none; -webkit-appearance: none;
    display: block; width: 100%; padding: 13px 14px;
    border: 0; border-radius: 14px; background: none;
    color: var(--ink); font: 600 14.5px/1.35 var(--sans); text-align: left; cursor: pointer;
    transition: background .15s, color .15s;
}
.site-page .cat-nav-item:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
.site-page .cat-nav-item.active { position: relative; background: rgba(225,37,27,.08); color: var(--red); font-weight: 800; }
.site-page .cat-nav-item.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }

.cat-side-head h2 { margin: 0 0 22px; font: 800 26px/1.15 var(--sans); letter-spacing: -.5px; color: var(--ink); }
.site-page .cat-side-cat { appearance: none; -webkit-appearance: none; padding: 0; border: 0; background: none; color: var(--red); font: 800 15px var(--sans); cursor: pointer; }
.site-page .cat-side-cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-page .cat-side-item {
    appearance: none; -webkit-appearance: none;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
    padding: 8px 10px; border: 0; border-radius: 12px; background: none;
    text-align: left; cursor: pointer; transition: background .15s;
}
.site-page .cat-side-item:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
/* Колонки заданы явно всем трём: без grid-column у цены авторазмещение
   забирало первую колонку и название уезжало вправо. */
.csi-name { grid-column: 1; grid-row: 1; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.csi-spec { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--muted); }
.csi-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.cat-side-empty { max-width: 560px; margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.site-page .cat-side-all { appearance: none; -webkit-appearance: none; padding: 12px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--red); font: 800 14px var(--sans); cursor: pointer; }
.site-page .cat-side-all:hover { border-color: var(--red); }

/* ── СТРАНИЦА КАТЕГОРИИ (#category) ──────────────────────────────────
   Экран есть только на сайте. Карточки товаров — те же .card из app.css,
   поэтому здесь только обвязка: тёмный баннер, колонка фильтров, панель
   сортировки и вид «списком». Всё на переменных темы, поэтому тёмная тема
   работает без отдельных правил, кроме самого баннера — он фирменно тёмный
   в обеих темах, как герой на главной. */
.site-page #category { padding-top: 0; }
.cat-top { padding: 26px 0 30px; background: linear-gradient(115deg, var(--site-navy) 0%, var(--site-navy-2) 60%, #1B2E52 100%); border-radius: 0 0 28px 28px; }
.cat-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: rgba(255,255,255,.55); font: 700 12px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.site-page .cat-crumbs button { appearance: none; -webkit-appearance: none; padding: 0; border: 0; background: none; color: rgba(255,255,255,.72); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.site-page .cat-crumbs button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cat-crumbs b { color: #fff; font-weight: 800; }
.cat-top-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 36px; margin-top: 18px; }
.cat-top-text { min-width: 0; }
.cat-top h1 { margin: 0; font: 800 40px/1.05 var(--disp); letter-spacing: -1.2px; color: #fff; }
.cat-top-lead { margin: 10px 0 0; max-width: 620px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.78); }
.cat-top-lead:empty { display: none; }
/* Счётчики: подпись сверху мелким, значение крупным — как показатели в
   тёмных блоках информационных страниц. */
.cat-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cat-stat { flex: none; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.08); }
.cat-stats dt { color: rgba(255,255,255,.6); font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.cat-stats dd { margin: 8px 0 0; color: #fff; font: 800 18px/1 var(--sans); white-space: nowrap; }

/* Отступ от тёмного баннера заметный: панель сортировки и колонка фильтров
   не должны выглядеть приклеенными к нему. */
.cat-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); align-items: start; gap: 28px; padding-top: 40px; padding-bottom: 60px; }
/* Фильтры едут вместе со страницей, но прилипают под шапкой, чтобы при
   длинном списке товаров условия оставались под рукой. */
.cat-filters { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow: auto; padding: 6px 18px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow-sm); }
.cat-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-filters-head h2 { margin: 16px 0 6px; font: 800 17px/1 var(--sans); color: var(--ink); }
.site-page .cat-filters-close, .cat-filters-foot { display: none; }
.cat-group { padding: 14px 0; border-top: 1px solid var(--line); }
.cat-group:first-child { border-top: 0; }
.cat-group h3 { margin: 0 0 8px; font: 800 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cat-option { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.cat-option:hover { background: var(--surface-2); }
.cat-option input { width: 17px; height: 17px; flex: none; margin: 0; accent-color: var(--red); cursor: pointer; }
.cat-option-text { min-width: 0; flex: 1; font-size: 14px; color: var(--ink); }
.cat-option-count { flex: none; font-size: 12.5px; color: var(--muted); }
/* Недоступное значение — только приглушённое. Модификатор специально не
   называется .empty: в app.css такой класс уже занят заглушкой «Ничего не
   найдено», и её text-align: center с серым цветом утаскивал текст строки
   к правому краю. */
.cat-option.cat-option-off { cursor: default; opacity: .45; }
.cat-option.cat-option-off:hover { background: none; }
.site-page .cat-group-more { appearance: none; -webkit-appearance: none; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--red); font: 700 13px var(--sans); cursor: pointer; }
.site-page .cat-group-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat-filters-empty { margin: 12px 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.cat-count { font-size: 14px; font-weight: 700; color: var(--muted); }
.cat-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--muted); }
.site-page .cat-sort select { appearance: none; -webkit-appearance: none; padding: 9px 34px 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7385' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; color: var(--ink); font: 700 13.5px var(--sans); cursor: pointer; }
.cat-view { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.site-page .cat-view button { appearance: none; -webkit-appearance: none; display: grid; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); place-items: center; cursor: pointer; }
.site-page .cat-view button svg { width: 18px; height: 18px; }
.site-page .cat-view button.active { background: var(--surface-2); color: var(--ink); }
/* Кнопка фильтров нужна только там, где колонка уезжает в шторку. */
.site-page .cat-filters-open { display: none; }

/* Поиск внутри категории — рядом с чипами условий, той же формы, что строка
   поиска в шапке. */
.cat-search { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0 14px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--muted); }
.cat-search svg { width: 18px; height: 18px; flex: none; }
.site-page .cat-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 14.5px var(--sans); outline: none; }
.site-page .cat-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.site-page .cat-chip { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.site-page .cat-chip:hover { border-color: var(--red); color: var(--red); }
.site-page .cat-chip svg { width: 13px; height: 13px; }
.site-page .cat-chip-reset { appearance: none; -webkit-appearance: none; padding: 8px 6px; border: 0; background: none; color: var(--red); font: 700 13px var(--sans); cursor: pointer; }
.site-page .cat-chip-reset:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-page .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* «Списком»: та же карточка, но фото слева, а описание и цена — строкой. */
.site-page .cat-grid.list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.site-page .cat-grid.list .card { flex-direction: row; }
.site-page .cat-grid.list .card-img { flex: none; width: 190px; aspect-ratio: 1; }
.site-page .cat-grid.list .card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.site-page .cat-grid.list .card-foot { margin-top: 14px; }

.cat-note { max-width: 620px; padding: 34px 0 10px; }
.cat-note p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.site-page .cat-note-action { appearance: none; -webkit-appearance: none; padding: 12px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--red); font: 800 14px var(--sans); cursor: pointer; }
.site-page .cat-note-action:hover { border-color: var(--red); }

/* Подвал на странице категории нужен — это обычная страница витрины, а не
   внутренний экран приложения (см. общее правило скрытия .ftr выше).
   Своя стрелка «назад» здесь тоже лишняя: наверху хлебные крошки. */
/* Оба :not() обязательны: общее правило скрытия перечисляет их и без них
   выигрывает по весу селектора — ровно так же написано правило для корзины. */
.site-page[data-active-screen="category"]:not(.site-showcase):not(.site-doc-active) .ftr { display: block !important; }
.site-page[data-active-screen="category"] .site-backbar { display: none; }

@media (max-width: 1280px) {
    .site-page .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    /* Планшет и телефон: колонка фильтров уезжает в шторку справа, товары
       занимают всю ширину — как в референсе. */
    .cat-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* Шторка выезжает снизу вверх — так до неё дотягивается большой палец, и
       это привычнее панели, приезжающей сбоку. */
    .cat-filters {
        position: fixed; z-index: 90; top: auto; right: 0; bottom: 0; left: 0;
        width: auto; max-height: 86vh; padding: 0 18px calc(18px + env(safe-area-inset-bottom));
        border: 0; border-radius: 22px 22px 0 0;
        transform: translate3d(0, 100%, 0); transition: transform .3s ease; visibility: hidden;
        display: flex; flex-direction: column;
    }
    .cat-filters.open { transform: none; visibility: visible; }
    /* Шапка шторки с «ручкой» сверху — привычный признак того, что панель
       тянется снизу и её можно закрыть. */
    .cat-filters-head { position: sticky; top: 0; z-index: 1; padding: 16px 0 6px; background: var(--white); }
    .cat-filters-head::before {
        content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 3px; background: var(--surface-3);
    }
    .site-page .cat-filters-close { display: grid; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); place-items: center; cursor: pointer; }
    .site-page .cat-filters-close svg { width: 18px; height: 18px; }
    /* Небольшой запас справа: полоса прокрутки перекрывала числа у значений. */
    .cat-filters-body { flex: 1; overflow: auto; padding-right: 6px; }
    .cat-filters-foot { display: block; padding-top: 12px; border-top: 1px solid var(--line); }
    .site-page .cat-filters-apply { appearance: none; -webkit-appearance: none; width: 100%; padding: 14px; border: 0; border-radius: 14px; background: var(--red); color: #fff; font: 800 15px var(--sans); cursor: pointer; }
    .cat-filters-scrim { position: fixed; z-index: 89; inset: 0; background: rgba(14,23,48,.45); }
    .site-page .cat-filters-open { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); color: var(--ink); font: 700 13.5px var(--sans); cursor: pointer; }
    .site-page .cat-filters-open svg { width: 17px; height: 17px; }
    .cat-filters-open-count { display: inline-grid; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; place-items: center; }
    .cat-top h1 { font-size: 30px; }
    .site-page .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .cat-top { padding: 18px 0 22px; }
    /* Тот же воздух между баннером и панелью сортировки, что на десктопе. */
    .cat-layout { padding-top: 22px; }
    .cat-toolbar { margin-bottom: 18px; }
    .cat-top h1 { font-size: 25px; letter-spacing: -.8px; }
    .cat-stats dd { font-size: 16px; }
    .cat-layout { padding-bottom: 40px; }
    /* На телефоне панель занимает одну строку: «Фильтры», сортировка на всю
       оставшуюся ширину и переключатель вида. Счётчик уходит строкой ниже. */
    .cat-toolbar { gap: 8px; }
    .cat-count { order: 3; width: 100%; }
    .cat-sort { flex: 1; min-width: 0; margin-left: 0; }
    .cat-sort > span { display: none; }
    .site-page .cat-sort select { width: 100%; padding: 9px 28px 9px 11px; font-size: 12.5px; }
    /* Пока открыта шторка фильтров, страница под ней не прокручивается. */
    body.cat-filters-shown { overflow: hidden; }
    .site-page .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .site-page .cat-grid.list .card-img { width: 120px; }
}

/* Плавающие кнопки экранов (телефон в поддержке, ☰ в профиле) переезжают в
   строку заголовка — см. dockScreenFabs() в site.js. Здесь снимаем с них
   фиксированное положение приложения и красим под светлую шапку сайта. */
.site-page .site-docked-fab {
    position: static; z-index: auto; flex: none; margin-left: auto;
    border: 1px solid var(--line); background: var(--white); color: var(--ink);
    box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Шапка профиля: аватар с именем слева, ☰ справа — на одной линии. */
.site-page #profile .sticky-head { display: flex; align-items: center; gap: 10px; }
.site-page #profile .profile-page-head { flex: 1; width: auto; }
/* Заголовок поддержки: телефон справа, вровень с названием экрана. */
.site-page #support .page-head { display: flex; align-items: center; gap: 10px; }
.site-page #support .page-head h1 { flex: 1; min-width: 0; }

/* Выход из пустой корзины в каталог (кнопку добавляет buildCartLayout). */
.site-page .site-cart-empty-action {
    appearance: none; -webkit-appearance: none; margin-top: 18px; padding: 13px 22px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--white);
    color: var(--red); font: 800 14.5px var(--sans); cursor: pointer;
}
.site-page .site-cart-empty-action:hover { border-color: var(--red); }

/* ── БАЗА МОБИЛЬНОЙ ОБВЯЗКИ ──────────────────────────────────────────
   Нижняя панель, меню и плавающие сообщения существуют только на телефоне —
   на десктопе их разметка есть, но она скрыта. */
.site-burger, .site-tabbar, .site-chat-fab, .site-menu, .site-menu-scrim { display: none; }

/* ── ТЕЛЕФОН: ШАПКА, НИЖНЯЯ ПАНЕЛЬ, МЕНЮ И ВИТРИНА ───────────────────
   Блок стоит в конце файла намеренно. Ранний @media (max-width: 767px)
   выше по файлу почти не работал: медиазапрос не добавляет веса селектору,
   и десктопные правила вида «.site-page .act > span» перебивали его. Поэтому
   мобильные правила пишем здесь и с тем же префиксом .site-page.
   Всё, что ниже, — только сайт: приложение, PWA и нативные сборки берут
   свою вёрстку из app/index.html и app.css и сюда не заглядывают. */
@media (max-width: 767px) {
    /* ШАПКА: логотип, поиск и кнопка меню — одна строка вместо пяти.
       «Каталог», профиль, избранное и корзина переехали в нижнюю панель,
       сообщения — в плавающую кнопку (см. syncMobileChrome в site.js). */
    .site-page .hdr-in { display: flex; align-items: center; gap: 10px; height: auto; padding: 9px 16px; }
    .site-page .hdr .logo { margin-right: 0; }
    .site-page .hdr .logo img { height: 25px; }
    .site-page .hdr .search-wrap { order: 2; flex: 1; min-width: 0; }
    .site-page .hdr .search { height: 40px; padding: 0 14px; }
    /* Кнопка меню — у правого края, как гамбургер в приложении: в разметке
       она стоит раньше поиска, поэтому переставляем порядком. */
    .site-page .hdr .site-burger { order: 3; }
    .site-page .hdr .search input { font-size: 14.5px; }
    .site-page .site-burger {
        display: grid; flex: none; width: 40px; height: 40px; padding: 0;
        border: 1px solid var(--line); border-radius: 13px; background: var(--white);
        color: var(--ink); place-items: center; cursor: pointer;
    }
    .site-page .site-burger svg { width: 20px; height: 20px; }
    /* Второй ряд шапки пустеет: ссылки и адрес уехали в меню. */
    .site-page .hdr-row2 { display: none; }

    /* НИЖНЯЯ ПАНЕЛЬ — как вкладки в приложении: иконка и подпись, активная
       подсвечена фирменным красным. */
    .site-page .site-tabbar {
        position: fixed; z-index: 70; right: 0; bottom: 0; left: 0;
        display: flex; align-items: stretch;
        height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--line); background: color-mix(in srgb, var(--white) 92%, transparent);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    }
    /* .acts остаётся обёрткой ради переноса целиком, но в раскладке панели
       участвуют сами кнопки — отсюда display: contents. */
    .site-page .site-tabbar .acts { display: contents; }
    /* Пять кнопок в ряд: подпись мельче, иначе «Избранное» переносится. */
    .site-page .site-tabbar { font-size: 10px; }
    .site-page .site-tabbar .site-tab-home,
    .site-page .site-tabbar .catbtn,
    .site-page .site-tabbar .act {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        height: auto; padding: 0; border-radius: 0; background: none;
        color: var(--muted); font: 600 10px var(--sans); white-space: nowrap;
    }
    .site-page .site-tabbar .catbtn svg,
    .site-page .site-tabbar .site-tab-home svg { width: 23px; height: 23px; }
    .site-page .site-tabbar .site-tab-home {
        appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
    }
    .site-page .site-tabbar .act .act-ic, .site-page .site-tabbar .act .act-ic svg { width: 23px; height: 23px; }
    .site-page .site-tabbar .act > span:last-child { display: block; }
    /* Активная вкладка подсвечена фирменным красным — класс tab-active
       ставит syncTabbarActive() по текущему экрану. «Каталог» больше не
       красный всегда: он горит, только когда открыт каталог. */
    .site-page .site-tabbar .catbtn { color: var(--muted); }
    .site-page .site-tabbar .site-tab-home,
    .site-page .site-tabbar .catbtn { color: var(--muted); }
    .site-page .site-tabbar .site-tab-home.tab-active,
    .site-page .site-tabbar .catbtn.tab-active,
    .site-page .site-tabbar .act.tab-active { color: var(--red); }
    /* Счётчики — у верхнего угла иконки, а не поверх неё. */
    .site-page .site-tabbar .act { position: relative; }
    .site-page .site-tabbar .act-badge { top: 2px; right: calc(50% - 24px); line-height: 1; display: none; }
    .site-page .site-tabbar .act-badge.show { display: grid; place-items: center; }
    /* Порядок вкладок: каталог, избранное, корзина, профиль. Профиль в
       разметке шапки идёт первым, поэтому расставляем через order. */
    .site-page .site-tabbar .site-tab-home { order: 1; }
    .site-page .site-tabbar .catbtn { order: 2; }
    .site-page .site-tabbar #favoritesFilter { order: 3; }
    .site-page .site-tabbar .acts .act:last-child { order: 4; }
    .site-page .site-tabbar .acts .act:first-child { order: 5; }

    /* СООБЩЕНИЯ — плавающей кнопкой над панелью, как в каталоге приложения. */
    .site-page .site-chat-fab { display: block; position: fixed; z-index: 69; right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); }
    /* place-content обязателен рядом с place-items: place-items центрует
       иконку внутри её дорожки, а саму дорожку (24px) grid прижимал к левому
       краю круга — иконка стояла у самого края и казалась обрезанной. */
    .site-page .site-chat-fab .act {
        display: grid; width: 46px; height: 46px; border-radius: 50%;
        background: var(--white); color: var(--ink); box-shadow: var(--shadow);
        place-items: center; place-content: center;
    }
    .site-page .site-chat-fab .act > span:last-child { display: none; }
    /* Счётчик прижат к краю круга и не обрезается краем кнопки. */
    /* line-height: 1 обязателен: в базовом правиле строка 18px, а рамка делает
       коробку выше — цифра съезжала ниже центра кружка. */
    .site-page .site-chat-fab .act-badge { top: -4px; right: -4px; border: 2px solid var(--bg); line-height: 1; }
    .site-page .site-chat-fab .act-badge.show { display: grid; place-items: center; }

    /* Карточка товара и оформление открываются во весь экран со своей нижней
       плашкой — на это время панель и кнопка сообщений убираются. */
    .site-page.site-overlay-open .site-tabbar,
    .site-page.site-overlay-open .site-chat-fab { display: none; }
    /* Запас под нижнюю панель даём всей странице, а не каждому экрану: с
       отступом на экране между контентом и подвалом зияла пустая полоса. */
    body.site-page.site-mobile-chrome { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }

    /* МЕНЮ — выезжает справа: адрес доставки и разделы сайта. */
    .site-page .site-menu-scrim { display: block; position: fixed; z-index: 88; inset: 0; background: rgba(14,23,48,.45); }
    .site-page .site-menu {
        display: flex; flex-direction: column; position: fixed; z-index: 89; top: auto; right: 0; bottom: 0; left: 0;
        max-height: 86vh; padding: 0 18px calc(18px + env(safe-area-inset-bottom)); background: var(--white);
        border-radius: 22px 22px 0 0; box-shadow: var(--shadow);
        transform: translate3d(0, 100%, 0); transition: transform .3s ease; visibility: hidden;
    }
    .site-page .site-menu.open { transform: none; visibility: visible; }
    /* «Ручка» сверху — тот же признак шторки, что у фильтров. */
    .site-page .site-menu-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 18px 0 10px; font: 800 17px var(--sans); color: var(--ink); }
    .site-page .site-menu-head::before {
        content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 3px; background: var(--surface-3);
    }
    .site-page .site-menu-close { display: grid; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); place-items: center; cursor: pointer; }
    .site-page .site-menu-close svg { width: 18px; height: 18px; }
    .site-page .site-menu-body { flex: 1; overflow: auto; }
    /* Внутри меню ссылки — крупными строками в столбик, а не мелкой лентой. */
    .site-page .site-menu .quick-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 6px; }
    .site-page .site-menu .quick-links .quick-link-btn { padding: 14px 2px; border-top: 1px solid var(--line); color: var(--ink); font: 600 15px var(--sans); text-align: left; }
    .site-page .site-menu .topbar-address { display: flex; width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; }
    .site-page .site-menu .topbar-address > span:first-child { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    body.site-menu-shown { overflow: hidden; }

    /* ГЕРОЙ: заголовок больше не вылезает за экран, подпись компактнее,
       подсказка «Листать» убрана — экран и так короткий. */
    .site-page .site-hero { height: auto; min-height: 0; padding: 28px 0 34px; }
    .site-page .site-hero h1 { font-size: clamp(25px, 7.2vw, 31px); letter-spacing: -1px; }
    .site-page .site-hero .eyebrow { font-size: 11px; }
    .site-page .site-hero .lead { margin-top: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; border-radius: 16px; }
    .site-page .site-hero::after { height: 90px; }
    .site-page .site-hero-hint { display: none; }

    /* Старая цена и скидка в карточке: в двух колонках на телефоне пара
       «1 118 ₽ · −10%» ломалась на две строки и разъезжала карточку. */
    .site-page .card .price-now { flex-wrap: nowrap; }
    .site-page .card .price-old { font-size: 10.5px; white-space: nowrap; }
    .site-page .card .price-off { font-size: 9.5px; white-space: nowrap; }
    .site-page .card .price b { font-size: 15.5px; }

    /* Витрина: заголовки блоков и карточки хитов под ширину телефона. */
    .site-page .hits-head .t { font-size: 18px; }
    .site-page .hit-card { width: 156px; }
    .site-page .promo-banner { gap: 14px; padding: 20px 18px; }
    .site-page .ticker { font-size: 11px; }

    /* Заголовки экранов и стрелки «назад»: в приложении они рассчитаны на
       полноэкранный слой, на сайте оказывались то великанами, то у самого
       края. Приводим к одному размеру и отступу. */
    .site-page .screen.active { padding-top: 18px; }
    .site-page .page-head h1 { font-size: 22px; letter-spacing: -.6px; }
    .site-page .page-head { gap: 8px; padding-left: 0; padding-right: 0; }
    .site-page .section-back { width: 36px; height: 36px; flex: none; }
    .site-page .site-backbar .container { padding-left: 6px; }
    .site-page .count-row .t { font-size: 18px; }

    /* Корзина: колонка с итогом рядом со списком на телефон не помещается —
       раскладываем всё в одну колонку по порядку разметки (список, итог,
       рекомендации), как в приложении. */
    .site-page .site-cart { display: block; }
    /* «Корзина» — по центру, стрелка «назад» остаётся у левого края.
       Счётчик товаров syncMobileChrome() уводит в строку «Выбрать все». */
    .site-page .site-cart-title { position: relative; justify-content: center; text-align: center; font-size: 23px; }
    .site-page .site-cart-title .section-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
    .site-page #cartToolbar #siteCartTitleCount { margin-left: auto; font: 600 13px var(--sans); color: var(--muted); white-space: nowrap; }
    /* Каталог: сначала список направлений во всю ширину, после выбора —
       плитки категорий направления и кнопка возврата к списку
       (см. buildCategoryLayout в site.js). */
    .site-page #categories .cat-nav { margin-top: 4px; border: 0; background: none; padding: 0; }
    .site-page #categories .cat-nav-item {
        padding: 15px 16px; margin-bottom: 8px;
        border: 1px solid var(--line); border-radius: 16px; background: var(--white);
        font-size: 15px; box-shadow: var(--shadow-sm);
    }
    .site-page .cat-mobile-back {
        appearance: none; -webkit-appearance: none; display: block;
        margin: 4px 0 12px; padding: 0; border: 0; background: none;
        color: var(--red); font: 800 15px var(--sans); text-align: left; cursor: pointer;
    }
    .cat-mobile-empty { margin: 8px 2px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

    /* Вход в кабинет: капча Яндекса не сжимается уже 300px, и поля вместе с
       ней вылезали за правый край карточки. Даём карточке всю ширину экрана
       и ужимаем её собственные поля — 300px теперь помещаются внутри. */
    .site-page #profile .web-cabinet-login { padding: 26px 14px; }
    .site-page #profile .cabinet-form { width: 100%; }

    /* Подвал в одну колонку — четыре не помещались, контакты уезжали за край. */
    .site-page .ftr { padding-top: 34px; }
    .site-page .ftr-cols { grid-template-columns: 1fr; gap: 26px; }
    .site-page .ftr-copy { margin-top: 22px; padding-top: 22px; }
}

/* ── СРАВНЕНИЕ ТОВАРОВ (вид сайта) ───────────────────────────────────
   Логика общая с приложением, вид свой: внизу полоса с выбранными товарами,
   на экране сравнения — широкая таблица во всю страницу. В приложении на этом
   же месте плашка над вкладками и колонки со свайпом (см. app.css). */
.site-compare-dock {
    position: fixed; z-index: 65; right: 0; bottom: 0; left: 0;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: color-mix(in srgb, var(--white) 94%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -8px 26px rgba(14,23,48,.10);
    transform: translate3d(0, 110%, 0); transition: transform .3s ease; visibility: hidden;
}
.site-compare-dock.show { transform: none; visibility: visible; }
.site-compare-in { display: flex; align-items: center; gap: 18px; }
.site-compare-items { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-compare-items::-webkit-scrollbar { display: none; }
.site-page .site-compare-item { position: relative; flex: none; width: 54px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; overflow: hidden; }
.site-compare-item img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.site-compare-item-x { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(14,23,48,.6); color: #fff; font-size: 12px; line-height: 1; }
.site-compare-hint { flex: none; font-size: 13px; color: var(--muted); }
.site-page .site-compare-clear { appearance: none; -webkit-appearance: none; padding: 0 6px; border: 0; background: none; color: var(--muted); font: 700 13.5px var(--sans); cursor: pointer; }
.site-page .site-compare-clear:hover { color: var(--red); }
.site-page .site-compare-open { appearance: none; -webkit-appearance: none; flex: none; padding: 13px 22px; border: 0; border-radius: 14px; background: var(--red); color: #fff; font: 800 14.5px var(--sans); cursor: pointer; }
.site-page .site-compare-open:hover { background: var(--red-dark); }
.site-compare-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Кнопка сравнения на карточке каталога — в углу фотографии, как «сердечко»
   в приложении, но появляется мягко и не мешает нажать саму карточку. */
.site-page .site-card-compare {
    position: absolute; z-index: 2; right: 8px; bottom: 8px;
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--line); border-radius: 10px;
    background: color-mix(in srgb, var(--white) 88%, transparent); color: var(--muted);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer;
}
.site-page .site-card-compare svg { width: 17px; height: 17px; }
.site-page .site-card-compare:hover { color: var(--ink); border-color: var(--ink); }
.site-page .site-card-compare.active { color: #fff; background: var(--red); border-color: var(--red); }

/* Экран сравнения: колонки товаров и таблица во всю ширину контентной зоны. */
.site-page #compare .compare-scroll { padding: 0; }
.site-page #compare .compare-tools { padding: 0 0 16px; }
.site-page #compare .compare-cols { grid-auto-columns: 210px; gap: 16px; }
.site-page #compare .compare-table { width: 100%; margin-top: 22px; font-size: 14px; }
.site-page #compare .compare-table th { width: 220px; padding: 12px 16px 12px 0; }
.site-page #compare .compare-table td { width: 210px; padding: 12px 16px 12px 0; }
/* Строки-различия подсвечены подложкой: на широком экране их видно сразу. */
.site-page #compare .compare-diff-row td { background: rgba(225,37,27,.05); }
.site-page #compare .compare-diff-row th { background: rgba(225,37,27,.05); }

@media (max-width: 767px) {
    /* На телефоне полоса сравнения встаёт над нижней панелью вкладок. */
    .site-page.site-mobile-chrome .site-compare-dock { bottom: calc(62px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
    .site-compare-in { gap: 12px; }
    .site-compare-hint { display: none; }
    .site-page .site-compare-open { padding: 11px 16px; font-size: 13.5px; }
    .site-page .site-compare-clear { display: none; }
    .site-page #compare .compare-cols { grid-auto-columns: 150px; gap: 10px; }
    .site-page #compare .compare-table th { width: 140px; }
    .site-page #compare .compare-table td { width: 150px; }
}

/* ── «СООБЩИТЬ О ПОСТУПЛЕНИИ» (вид сайта) ────────────────────────────
   В приложении это широкая кнопка под наличием (app.css). На сайте карточка
   товара трёхколоночная, и кнопка живёт в правой колонке под ценой — там же,
   где «В корзину», поэтому выглядит как её замена, а не как второй призыв. */
.site-page .pr-restock {
    margin-top: 12px; padding: 14px 18px; border-radius: 16px;
    border-color: var(--line); font-size: 14.5px;
}
.site-page .pr-restock:hover { border-color: var(--red); color: var(--red); }
.site-page .pr-restock:hover .ic-svg { color: var(--red); }
.site-page .pr-restock.done:hover { border-color: rgba(34,160,107,.5); color: #22a06b; }

/* ── ТЕКУЩИЙ РАЗДЕЛ В ШАПКЕ ──────────────────────────────────────────
   Ссылка того экрана, на котором человек сейчас, подсвечена и подчёркнута —
   иначе по второму ряду шапки не понять, где находишься. */
.site-page .quick-links .quick-link-btn.active { position: relative; color: var(--ink); font-weight: 700; }
.site-page .quick-links .quick-link-btn.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -9px;
    height: 2px; border-radius: 2px; background: var(--red);
}

/* ── ПОДДЕРЖКА НА ДЕСКТОПЕ ───────────────────────────────────────────
   Чат — основная работа на этом экране, и держать его в узкой колонке
   посреди пустого монитора незачем: разворачиваем на всю ширину страницы и
   на высоту окна, чтобы переписка листалась внутри, а не растягивала сайт. */
@media (min-width: 1024px) {
    .site-page #support.screen.active { width: 100%; max-width: none; padding-left: 28px; padding-right: 28px; }
    .site-page #support .wrap { width: 100%; max-width: none; }
    .site-page #support .page-head { width: 100%; max-width: none; }
    /* Высота: окно минус шапка сайта и отступы экрана. */
    .site-page #support #supportContent { min-height: calc(100vh - 260px); }
    .site-page #support .support-thread { max-height: calc(100vh - 340px); }
}

/* Панель сортировки и колонка фильтров отделены от тёмного баннера заметным
   воздухом. Селектор с .container обязателен: у него самого задан padding
   («.site-page .container { padding: 0 20px }»), и правило только по
   .cat-layout проигрывало ему по весу — отступ обнулялся, поэтому панель и
   выглядела приклеенной к баннеру. */
.site-page .container.cat-layout { padding-top: 52px; }
@media (max-width: 767px) { .site-page .container.cat-layout { padding-top: 26px; } }

/* Лента разделов «Возврата» на телефоне: прилипает выше (второго ряда шапки
   там нет) и компактнее по высоте — вкладок больше, чем ширины экрана, и
   лишние 2 пикселя высоты здесь ни к чему. */
@media (max-width: 767px) {
    .site-page { --sec-nav-top: 58px; }
    .site-page #pageReturn .sec-nav-in { padding: 0 16px; height: 46px; }
    .site-page #pageReturn .sec-nav a { padding: 0 14px; font-size: 12.5px; }
}

/* ── ПОЛОСА «УСТАНОВИТЕ ПРИЛОЖЕНИЕ» И СТРАНИЦА #pageApps ─────────────
   Полоса идёт сразу за баннером акций и повторяет его ритм, но взята другая
   гамма — синяя вместо красной, чтобы две плашки подряд не сливались в одну.
   Высота втрое меньше баннера: заметно, но не отвлекает от каталога. */
/* display здесь намеренно не задан: показ полосы решает правило витрины выше
   (.site-page.site-showcase .app-strip). Если задать display: flex тут, оно
   перебьёт скрытие — полоса вылезет на всех экранах сайта. */
/* Полоса идёт сразу за баннером акций и составляет с ним одну ленту: поэтому
   без скруглений, без зазора сверху и во всю ширину окна — содержимое при этом
   выровнено по той же сетке 1240px, что и у баннера. */
.site-page .app-strip {
    appearance: none; -webkit-appearance: none; align-items: center; gap: 16px;
    width: 100%; margin: 0 0 26px; padding: 16px max(20px, calc((100vw - 1240px) / 2 + 20px)); border: 0; border-radius: 0;
    background: linear-gradient(100deg, #14213D 0%, #1B2E52 55%, #24406F 100%);
    color: #fff; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm);
}
.site-page .app-strip:hover { background: linear-gradient(100deg, #1B2E52 0%, #24406F 55%, #2C4E86 100%); }
.app-strip-ic { display: grid; flex: none; width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.12); place-items: center; }
.app-strip-ic svg { width: 22px; height: 22px; }
.app-strip-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.app-strip-text b { font: 800 16px var(--sans); }
.app-strip-text span { font-size: 13.5px; color: rgba(255,255,255,.72); }
.app-strip-cta { flex: none; padding: 10px 18px; border-radius: 12px; background: var(--red); font: 800 13.5px var(--sans); }

.apps-hero { padding: 26px 0 34px; background: linear-gradient(115deg, var(--site-navy) 0%, var(--site-navy-2) 60%, #1B2E52 100%); border-radius: 0 0 28px 28px; }
.apps-hero-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 18px; }
.apps-hero-text { min-width: 0; }
.apps-hero h1 { margin: 0; font: 800 40px/1.05 var(--disp); letter-spacing: -1.2px; color: #fff; }
.apps-hero p { margin: 14px 0 0; max-width: 520px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.78); }
.apps-hero-shot { flex: none; width: min(460px, 42%); border-radius: 20px; }

/* Между тёмным баннером и белыми карточками нужен воздух: без него они
   читались как один слипшийся блок. Селектор с .container намеренно: правило
   `.site-page .container` весит больше одного класса и обнуляло отступ. */
.site-page .container.apps-body { padding: 56px 0 60px; }
.apps-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.apps-card { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow-sm); }
.apps-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.apps-card-ic { display: grid; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--surface-2); color: var(--red); place-items: center; }
.apps-card-ic svg { width: 24px; height: 24px; }
.apps-card h2 { margin: 0; font: 800 20px var(--sans); color: var(--ink); }
.apps-card-head p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
.site-page .apps-download {
    display: block; width: 100%; padding: 15px; border-radius: 15px;
    background: var(--red); color: #fff; font: 800 15px var(--sans); text-align: center;
}
.site-page .apps-download:hover { background: var(--red-dark); }
.apps-note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.apps-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.apps-store { padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; font: 700 13px var(--sans); color: var(--muted); }
.apps-store small { font-weight: 600; opacity: .75; }
.apps-steps { margin: 0; padding-left: 20px; color: var(--ink); font-size: 14.5px; line-height: 1.75; }
.apps-features { margin-top: 34px; }
.apps-features h2 { margin: 0 0 18px; font: 800 24px var(--sans); letter-spacing: -.4px; color: var(--ink); }
.apps-features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.apps-features-grid div { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.apps-features-grid b { display: block; margin-bottom: 6px; font-size: 15px; color: var(--ink); }
.apps-features-grid span { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1023px) {
    .apps-hero-in { flex-direction: column; align-items: flex-start; gap: 22px; }
    .apps-hero-shot { width: 100%; }
    .apps-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    /* На телефоне полоса становится в две строки: подпись уходит под заголовок,
       кнопка — вниз во всю ширину, иначе всё это не помещается. */
    .site-page .app-strip { flex-wrap: wrap; gap: 12px; padding: 14px 16px; border-radius: 0; }
    .app-strip-text b { font-size: 15px; }
    .app-strip-text span { font-size: 12.5px; }
    .app-strip-cta { width: 100%; text-align: center; }
    .apps-hero { padding: 18px 0 24px; }
    .apps-hero h1 { font-size: 27px; letter-spacing: -.8px; }
    .apps-hero p { font-size: 14.5px; }
    .apps-cards { grid-template-columns: minmax(0, 1fr); }
    .apps-features-grid { grid-template-columns: minmax(0, 1fr); }
}