:root {
            color-scheme: light;
            --red: #E1251B;
            --red-dark: #B71C13;
            /* Обычный фирменный красный, который НЕ приглушается в тёмной теме:
               им светят акценты, где нужна полная яркость (счётчик уведомлений,
               сердечки, плашки акций, «ХИТ», кнопки главной и отправки). */
            --red-bright: #E1251B;
            /* --navy — цвет ТЕКСТА и акцентов, --brand-surface — фирменная
               тёмная ПОВЕРХНОСТЬ (градиенты шапок, тёмные кнопки и плашки).
               Разделены, чтобы в тёмной теме текст стал светлым, а фирменные
               градиенты остались тёмными. */
            --navy: #0E1730;
            --navy-2: #14213D;
            --brand-surface: #0E1730;
            --brand-surface-2: #14213D;
            --ink: #0E1730;
            --muted: #6B7385;
            --line: rgba(14, 23, 48, 0.08);
            --bg: #F4F5F8;
            --white: #ffffff;
            /* Нейтральные подложки мелких плашек и кнопок-иконок. */
            --surface-2: #f3f4f7;
            --surface-3: #eceef3;
            --shadow: 0 12px 40px rgba(14, 23, 48, 0.12);
            --shadow-sm: 0 4px 16px rgba(14, 23, 48, 0.07);
            --nav-h: 68px;
            /* Единый размер плавающих кнопок шапки (сообщения, телефон,
               гамбургер) — чтобы иконка сообщений везде была одинаковой. */
            --fab-size: 40px;
            --fab-radius: 13px;
            --fab-icon: 20px;
            /* Безопасная зона сверху. В браузере/PWA её отдаёт env(), но в
               нативной оболочке Capacitor env(safe-area-inset-top) нередко
               равен 0 — из-за этого в приложении не было «прослойки» между
               верхом экрана и шапкой (поиском), в отличие от веб-версии, и
               строка статуса наезжала на контент. В нативе держим минимум. */
            --safe-top: env(safe-area-inset-top);
        }
        html.native-app { --safe-top: max(env(safe-area-inset-top), 30px); }

        /* ---------- Тёмная тема ----------
           data-theme ставит JS (см. applyTheme): «как в системе», «тёмная» или
           «светлая» из Настройки → Оформление. Переопределяем только палитру —
           вся вёрстка построена на этих переменных, поэтому поверхности, текст и
           рамки переворачиваются целиком. Фирменные градиенты (--brand-surface)
           остаются тёмными, они одинаково хороши в обеих темах. */
        :root[data-theme="dark"] {
            color-scheme: dark;
            --navy: #EDF0F6;
            --navy-2: #C9D0DE;
            --ink: #EDF0F6;
            --muted: #98A1B4;
            --line: rgba(255, 255, 255, 0.11);
            --bg: #0A0F1C;
            --white: #141A2A;
            --surface-2: #1D2434;
            --surface-3: #232B3C;
            --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
            --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.4);
        }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        /* Многие компоненты (.chips, .profile-menu-item и т.п.) сами задают
           display: flex/block той же специфичности, что и стандартное правило
           браузера для [hidden] — без !important элемент с атрибутом hidden
           всё равно остаётся видимым. */
        [hidden] { display: none !important; }
        button, a, input, select, textarea, [role="button"], .card, .hit-card { touch-action: manipulation; }
        html, body { margin: 0; padding: 0; min-height: 100%; color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

        body {
            background: var(--bg);
            color: var(--ink);
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            overflow-y: auto;
            min-height: 100vh;
            min-height: 100dvh;
        }

        /* ============ Экраны ============ */
        .screen { display: none; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px); animation: fade .35s ease; }
        .screen.active { display: block; }
        #cart.screen { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 168px); }
        @keyframes fade { from { opacity: 0; } to { opacity: 1; } }

        .wrap { padding: 0 20px; }

        /* ============ Reveal при скролле ============ */
        .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
        .reveal.in { opacity: 1; transform: none; }

        /* ============ HERO (Главная) ============ */
        .hero {
            position: relative;
            min-height: 92vh;
            background: radial-gradient(120% 80% at 80% 0%, #1E2E57 0%, var(--brand-surface) 55%, #0A1128 100%);
            /* Именно белый, а не var(--white): герой лежит на тёмном видео в
               любой теме, а --white в тёмной теме — это тёмная поверхность
               карточек (из-за этого «БИКРА» и заголовок становились чёрными). */
            color: #fff;
            padding: calc(var(--safe-top) + 20px) 24px 48px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .hero::before {
            content: "";
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: radial-gradient(120% 90% at 50% 10%, #000 30%, transparent 75%);
            pointer-events: none; z-index: 1;
        }
        .glow { position: absolute; width: 420px; height: 420px; border-radius: 50%;
            background: radial-gradient(circle, rgba(225,37,27,.45) 0%, transparent 65%);
            top: -140px; right: -160px; filter: blur(4px); pointer-events: none; z-index: 1; }

        /* Видео-фон hero (если assets/hero.mp4 отсутствует — остаётся градиент) */
        .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
        /* До события playing видео остаётся невидимым: иначе в Android WebView
           на месте ролика на секунду виден голый чёрный плеер без постера. */
        .hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s ease; }
        .hero-media video.ready { opacity: 1; }
        .hero-media .scrim { position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(10,17,40,.62) 0%, rgba(10,17,40,.58) 32%, rgba(8,14,34,.98) 100%); }

        .topbar { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
        .topbar img { flex: none; width: 40px; height: 40px; }
        .topbar .name { font-size: 20px; font-weight: 800; letter-spacing: 3px; }
        .topbar .tag { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.5); text-transform: uppercase; margin-top: 2px; }

        .hero-mid { position: relative; z-index: 2; margin-top: auto; }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 7px;
            font-size: 12px; font-weight: 600; letter-spacing: .5px;
            color: #fff; background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.14);
            padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
        }
        .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(225,37,27,.25); }

        .hero h1 {
            margin: 0; font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -1.5px;
        }
        .hero h1 .accent { color: var(--red); }
        .hero-greeting { display: none; width: fit-content; margin: 11px 0 0; padding: 5px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; letter-spacing: .1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
        .hero-greeting b { color: #ff6158; }
        .hero-greeting.show { display: flex; align-items: center; gap: 4px; }
        .hero p.lead {
            display: block; width: fit-content;
            margin: 12px 0 0; padding: 12px 16px;
            font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92); max-width: 350px;
            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;
        }
        .hero-greet {
            display: inline-flex; align-items: center; gap: 9px; width: fit-content;
            margin: 24px 0 10px; padding: 9px 16px;
            font-size: 15px; font-weight: 600; color: rgba(255,255,255,.95);
            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: 999px;
        }
        .hero-greet::before { content: ""; width: 20px; height: 2px; background: var(--red); border-radius: 2px; }
        .hero-greet b { color: var(--red); font-weight: 800; }

        .cta-row { display: flex; gap: 12px; margin-top: 30px; position: relative; z-index: 2; }
        .btn {
            border: none; border-radius: 16px; padding: 16px 22px; min-height: 56px; box-sizing: border-box; font-size: 15px; font-weight: 700;
            cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
            display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit;
        }
        .btn:active { transform: scale(.96); }
        .btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 26px rgba(225,37,27,.4); }
        .btn-primary:active { background: var(--red-dark); }
        .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.16); }

        .scroll-hint { text-align: center; margin-top: 34px; color: rgba(255,255,255,.4); font-size: 22px; position: relative; z-index: 2;
            animation: bob 1.8s ease-in-out infinite; }
        @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

        /* ============ Stats ============ */
        .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 8px; }
        .stat { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px 12px; text-align: center; box-shadow: var(--shadow-sm); }
        .stat .num { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--navy); }
        .stat .num .u { color: var(--red); }
        .stat .lbl { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.3; }
        .home-promo-ic .ic-svg { width: 23px; height: 23px; }
        .home-promo-arrow .ic-svg { width: 18px; height: 18px; }

        /* ============ Секции ============ */
        .section { margin-top: 40px; }
        .kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
        .h2 { font-size: 27px; font-weight: 800; letter-spacing: -.8px; margin: 8px 0 0; line-height: 1.15; }
        .body { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 14px 0 0; }

        /* Направления — баннер-карусель во всю ширину (в духе Ozon): один слайд
           на экран, свайп влево/вправо + автолистание, а не список вниз. */
        .dir-carousel { margin-top: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 22px; box-shadow: var(--shadow); }
        .dir-carousel::-webkit-scrollbar { display: none; }
        .dir-track { display: flex; }
        .dir-card {
            position: relative; flex: none; width: 100%; scroll-snap-align: center; overflow: hidden; min-height: 230px;
            display: flex; align-items: flex-end; padding: 20px; color: #fff; cursor: pointer;
        }
        .dir-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
        .dir-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,23,48,.05) 0%, rgba(14,23,48,.82) 100%); z-index: 1; }
        .dir-card .t { position: relative; z-index: 2; }
        .dir-card .t h3 { margin: 0; font-size: 20px; font-weight: 800; }
        .dir-card .t span { font-size: 13px; opacity: .82; }
        .dir-card .arrow { position: absolute; z-index: 2; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
            background: rgba(255,255,255,.15); backdrop-filter: blur(6px); display: grid; place-items: center; }

        /* Сетка категорий (открывается иконкой в баннере акций каталога) —
           те же карточки направлений, что и на главной, но в 2 колонки. */
        .cat-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 0 24px; }
        /* Формат 3:4, как у карточек товара: плитки направлений в каталоге и на
           сайте, и в приложении выглядят одинаково. */
        .cat-menu-card {
            position: relative; overflow: hidden; border: 0; border-radius: 20px; aspect-ratio: 3 / 4; padding: 0;
            display: flex; align-items: flex-end; box-shadow: var(--shadow); cursor: pointer; text-align: left;
        }
        .cat-menu-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
        .cat-menu-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,23,48,.05) 0%, rgba(14,23,48,.8) 100%); z-index: 1; }
        .cat-menu-card .t { position: relative; z-index: 2; padding: 14px; color: #fff; }
        .cat-menu-card .t h3 { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; }

        .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 30px 0 10px; color: #98a0b0; font-size: 11.5px; line-height: 1.5; text-align: center; }
        .legal-links a { color: #7b8498; text-decoration: none; }
        .legal-links a:active { color: var(--red); }

        /* Почему мы */
        .feat { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
        .feat-row { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
        .feat-row:last-child { border-bottom: none; }
        .feat-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(225,37,27,.1); color: var(--red); display: grid; place-items: center; }
        .feat-tx h4 { margin: 0; font-size: 16px; font-weight: 700; }
        .feat-tx p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

        /* CTA-блок */
        .cta-block { margin-top: 40px; background: linear-gradient(135deg, var(--brand-surface-2), var(--brand-surface)); border-radius: 26px; padding: 32px 26px; color: #fff; position: relative; overflow: hidden; }
        .cta-block .glow2 { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(225,37,27,.4), transparent 65%); bottom: -120px; left: -80px; }
        .cta-block h3 { position: relative; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
        .cta-block p { position: relative; margin: 10px 0 22px; font-size: 14.5px; color: rgba(255,255,255,.7); }
        .cta-block .btn { position: relative; width: 100%; justify-content: center; }

        /* ============ Каталог ============ */
        .page-head { padding: calc(var(--safe-top) + 20px) 20px 6px; }
        .page-head .kicker { color: var(--red); }
        .page-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -1px; margin: 6px 0 0; }
        /* Шапка каталога — один цветной блок (адрес + поиск + баннер акций), как
           зелёная полоса на главной Ozon. Раньше каждая из трёх секций (адрес,
           поиск, баннер) красилась своим отдельным linear-gradient — на стыках
           был заметен шов, потому что каждый градиент считает свои 0–100%
           заново от собственной высоты. Теперь фон — один слой-подложка
           (.catalog-color-backdrop, position:absolute) высотой во все три
           секции сразу; сами секции прозрачные и просто показывают его сквозь
           себя — шва нет физически. #catalog — positioning context для неё. */
        #catalog { position: relative; }
        /* Низ цветной зоны скруглён по бокам (как зелёная шапка у Ozon) —
           градиент не обрезается прямой линией во всю ширину. */
        .catalog-color-backdrop { position: absolute; top: 0; left: 0; right: 0; z-index: 0; border-radius: 0 0 22px 22px; background: linear-gradient(165deg, var(--brand-surface) 0%, var(--brand-surface-2) 55%, var(--red-dark) 130%); pointer-events: none; }
        /* Адрес + сообщения при скролле «отстают» от страницы (сдвигаются вниз
           относительно скролла) и растворяются — за счёт этого закреплённая
           строка поиска визуально НАЕЗЖАЕТ на них сверху, как у Ozon, а не
           просто уезжает вместе со всей страницей. --rise (0..1) считает JS
           тем же проходом, что и --pin. Поиск лежит выше по z-index, поэтому
           перекрывает адрес, когда доходит до него. */
        .catalog-head-top {
            position: relative; z-index: 1; padding-top: calc(var(--safe-top) + 16px); padding-bottom: 14px; background: transparent;
            transform: translate3d(0, calc(var(--rise, 0) * 22px), 0);
            opacity: calc(1 - var(--rise, 0));
        }
        /* overflow: hidden — иначе margin-top у .catalog-promo-banner (первый
           child) «схлопывается» наружу через родителя без верхнего padding. */
        .catalog-head-bottom { position: relative; z-index: 1; padding: 0 20px 20px; background: transparent; overflow: hidden; }
        .catalog-sticky-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        /* Иконка сообщений — своя копия только для каталога (глобальная
           .notification-bell здесь скрыта). Размер/радиус/иконка берутся из
           общих --fab-* выше, чтобы совпадать с остальными экранами. */
        .catalog-chat-btn { position: relative; flex: none; border: 0; background: rgba(255,255,255,.14); color: #fff; }
        body[data-active-screen="catalog"] .notification-bell { display: none; }
        /* Поиск + избранное — между адресом и баннером акций (как у Ozon),
           закреплены сверху при скролле: прозрачный фон изначально (сквозь него
           видна общая подложка), когда адрес/баннер уезжают вверх и строка
           «прилипает» — фон плавно переливается в белый. Раньше это делалось
           бинарным классом .pinned + CSS-transition — переход срабатывал в одной
           точке скролла и «резал глаз». Теперь белизна привязана к прогрессу
           скролла напрямую: JS считает --pin (0..1) по тому, насколько строка
           подошла к верху, и фон = rgba(255,255,255, --pin) — плавно, кадр в
           кадр со скроллом, как у Ozon. position: sticky — на прямом потомке
           #catalog (не внутри .catalog-head-top/-bottom), иначе прилипание
           держится только в пределах короткого блока. */
        .catalog-search-sticky {
            /* top — по безопасной зоне, а не 0: иначе закреплённая строка поиска
               прилипала к самому верху и уходила под строку статуса и Dynamic
               Island. Остальные шапки такой отступ получают из padding-top своей
               .page-head, а у поиска его не было. */
            position: sticky; top: var(--safe-top); z-index: 5; padding: 14px 20px;
            background: rgba(255, 255, 255, var(--pin, 0));
            /* Скругление низа — как у цветной подложки, чтобы закреплённая
               белая полоса повторяла форму шапки, а не резала экран прямой. */
            border-radius: 0 0 22px 22px;
            /* transform создаёт свой composite-слой — без него на iOS/Android
               при быстром скролле «пробивались» плашки скидок карточек ленты
               (тоже позиционированные) поверх закреплённой строки поиска. */
            transform: translateZ(0);
            transition: box-shadow .25s ease;
        }
        /* Полоса того же фона над строкой поиска — закрывает зону статуса, когда
           строка закреплена. background: inherit держит ту же прозрачность
           (--pin), поэтому в покое полоса прозрачна и сквозь неё виден градиент,
           а в закреплённом состоянии она белая, как и сама строка. */
        .catalog-search-sticky::before {
            content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
            height: var(--safe-top); background: inherit; pointer-events: none;
        }
        .catalog-search-sticky.pinned { box-shadow: 0 6px 16px rgba(8,14,34,.08); }
        /* Адрес доставки вместо заголовка «Каталог» (как у Ozon сверху слева) —
           сокращённый (улица, дом) из сохранённого профиля; без адреса — просьба его добавить. */
        .catalog-address { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.4px; text-align: left; cursor: pointer; }
        .catalog-address #catalogAddressText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* Стрелка — иконка, а не юникод-символ «⌄»: тот на части устройств
           (старый Android WebView, некоторые шрифты iOS) не рендерился вовсе. */
        .catalog-address-chevron { flex: none; display: grid; place-items: center; width: 16px; height: 16px; color: rgba(255,255,255,.65); transform: rotate(90deg); }
        .catalog-address-chevron svg { width: 13px; height: 13px; }
        .catalog-address.no-address { color: #ffd7d4; font-size: 17px; font-weight: 700; }
        /* Баннер акций — продолжение той же цветной полосы, без своего фона. */
        .catalog-promo-banner {
            display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; margin-top: 18px; padding: 0;
            border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer;
        }
        .catalog-promo-banner .t { color: rgba(255,255,255,.75); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
        .catalog-promo-banner .h { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
        .catalog-promo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 8px; }
        .catalog-promo-banner .btn-tag { padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 13px; font-weight: 700; }
        /* Переход к сетке категорий — кнопка «Каталог» с иконкой (как синяя
           кнопка «Каталог» у Ozon), на том же месте в баннере акций справа от
           «К акциям». Раньше это была безымянная круглая иконка — непонятно,
           куда она ведёт. */
        .catalog-categories-icon {
            flex: none; display: inline-flex; align-items: center; gap: 7px;
            height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
            background: rgba(255,255,255,.18); color: #fff;
            font: 800 13px inherit; letter-spacing: -.1px; white-space: nowrap; cursor: pointer;
        }
        .catalog-categories-icon svg { width: 17px; height: 17px; }
        .catalog-categories-icon:active { background: rgba(255,255,255,.28); }
        /* Ровно та же высота и позиция, что у плавающих кнопок сообщений/меню
           справа (top: safe-area + 16px, 44px), чтобы аватар стоял вровень с ними. */
        /* color: inherit обязателен — в WKWebView на iOS текст внутри
           непрозрачной <button> без явного color красится в системный синий. */
        .profile-page-head { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: default; pointer-events: none; }
        /* До входа в кабинет — как раньше: обычный текстовый заголовок,
           без аватара и без возможности что-то нажать. */
        .profile-avatar { display: none; }
        .profile-page-title { display: block; }
        .profile-page-name { display: none; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
        body.profile-authenticated .profile-page-head { padding-top: calc(var(--safe-top) + 16px) !important; cursor: pointer; pointer-events: auto; }
        body.profile-authenticated .profile-page-head:active { opacity: .7; }
        /* После входа — аватар вровень с плавающими кнопками сообщений/меню
           (top: safe-area + 16px, 44px), а рядом — имя клиента (как в Ozon), а не
           «Личный кабинет» / «Профиль». */
        body.profile-authenticated .profile-avatar { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-surface), var(--brand-surface-2)); color: #fff; font-size: 17px; font-weight: 800; }
        body.profile-authenticated .profile-page-title { display: none; }
        body.profile-authenticated .profile-page-name { display: block; }

        .catalog-search-row { display: flex; align-items: stretch; gap: 10px; }
        .search {
            flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
            background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 0 16px; box-shadow: var(--shadow-sm);
        }
        .search svg { flex: none; color: var(--muted); }
        .search input { border: none; outline: none; background: transparent; padding: 15px 0; width: 100%; font-size: 16px; color: var(--ink); font-family: inherit; }
.search .clear { border: none; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; padding: 4px; display: none; }
        .fav-filter { position: relative; flex: none; width: 52px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--red); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
        .fav-filter > span { display: grid; place-items: center; }
        .fav-filter .ic-svg { width: 24px; height: 24px; }
        .fav-filter.active .ic-svg { fill: currentColor; }
        .fav-filter:active { transform: scale(.94); }
        .fav-filter.active { border-color: rgba(225,37,27,.32); background: #fff4f3; }
        .fav-filter i { position: absolute; top: -7px; right: -6px; display: none; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border: 2px solid var(--bg); border-radius: 999px; background: var(--red); color: #fff; font-family: inherit; font-size: 10px; font-style: normal; font-weight: 800; line-height: 16px; text-align: center; }
        .fav-filter i.show { display: block; }

        /* Ряд фильтров-чипов больше не показывается на экране каталога — вместо
           него открывается сетка категорий из иконки в баннере акций (см.
           .catalog-categories-icon и #categories). Элемент остаётся в DOM
           скрытым (атрибут hidden), чтобы renderChips() не ломался на
           отсутствующем узле. */
        .chips { display: flex; gap: 8px; padding: 16px 20px 4px; overflow-x: auto; scrollbar-width: none; }
        .chips::-webkit-scrollbar { display: none; }
        .chip { flex: none; border: 1px solid var(--line); background: var(--white); color: var(--ink); padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .18s ease; font-family: inherit; }
        .chip.active { background: var(--brand-surface); border-color: var(--brand-surface); color: #fff; }

        /* ТОП / Хиты продаж */
        .hits-block { margin-top: 4px; }
        .hits-head { display: flex; align-items: center; padding: 16px 20px 10px; }
        .hits-head .t { font-size: 16px; font-weight: 800; }
        .hits { display: flex; gap: 12px; padding: 0 20px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
        .hits::-webkit-scrollbar { display: none; }
        .hits-rail { position: relative; }
        /* Визуально компактные кнопки сохраняют макет карточек, но на сенсорных
           экранах получают безопасную область нажатия не меньше 44 × 44 px. */
        @media (pointer: coarse) {
            .card-favorite { position: relative; }
            .card-favorite::before {
                content: "";
                position: absolute;
                inset: -7px;
            }
        }
        .hit-card { flex: none; width: 150px; min-height: 286px; display: flex; flex-direction: column; scroll-snap-align: start; cursor: pointer; transition: transform .15s ease; }
        .hit-card:active { transform: scale(.97); }
        .hit-img { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: var(--surface-3); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
        .hit-img img { width: 100%; height: 100%; object-fit: cover; }
        .card-favorite { display: grid; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: #6b7280; place-items: center; cursor: pointer; }
        .card-favorite .ic-svg { width: 18px; height: 18px; stroke-width: 2; }
        .card-favorite.active { color: var(--red); }
        .card-favorite.active .ic-svg { fill: currentColor; }
        .hit-badge { position: absolute; top: 8px; left: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 4px 8px; border-radius: 7px; box-shadow: 0 3px 8px rgba(225,37,27,.4); }
        .hit-name-row { min-height: 42px; margin-top: 9px; }
        .hit-name { font-size: 13px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .hit-price { font-size: 14.5px; font-weight: 800; color: var(--navy); white-space: nowrap; }
        .hit-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

        .count-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 20px 8px; }
        .count-row .t { font-size: 15px; font-weight: 700; }
        .count-row .c { font-size: 13px; color: var(--muted); }
        .favorites-back { margin-left: auto; padding: 0; border: 0; color: var(--red); background: transparent; font: 700 13px/1 inherit; cursor: pointer; }
        /* Выбранное направление выглядит отдельной страницей: рекламные и
           поисковые элементы общей ленты скрыты, наверху остаётся ясный
           заголовок категории и заметная кнопка возврата. */
        #catalog.category-mode .catalog-search-sticky,
        #catalog.category-mode .catalog-head-bottom,
        #catalog.category-mode .hits-block { display: none !important; }
        #catalog.category-mode .count-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 14px; }
        #catalog.category-mode .count-row .t { grid-column: 2; grid-row: 1; min-width: 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
        #catalog.category-mode .count-row .c { grid-column: 3; grid-row: 1; white-space: nowrap; }
        #catalog.category-mode { color: var(--ink); background: var(--bg); }
        #catalog.category-mode .count-row { background: var(--bg); color: var(--ink); }
        #catalog.category-mode #categoryBack:not([hidden]) { grid-column: 1; grid-row: 1; display: grid; width: 44px; height: 44px; margin: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--white); box-shadow: var(--shadow-sm); font-size: 0; place-items: center; }
        #catalog.category-mode #categoryBack::before { content: ""; width: 10px; height: 10px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg) translate(1px, -1px); }

        .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 20px; }
        .favorites-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 50vh; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
        .favorites-empty p { margin: 0; }
        /* Из пустого экрана должен быть выход в каталог, а не только надпись. */
        .favorites-empty .btn, .cart-empty-go { min-width: 200px; padding: 14px 26px; min-height: 50px; }
        .cart-empty-go { margin-top: 18px; }
        /* Нативные экраны «О приложении» — политика/соглашение зашиты в приложение. */
        .about-version { margin: 16px 4px 0; color: var(--muted); font-size: 12.5px; text-align: center; }
        .legal-article { padding: 4px 0 0; }
        .legal-article .kicker { display: block; margin-bottom: 6px; }
        .legal-article .updated { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
        .legal-article h2 { margin: 22px 0 8px; font-size: 17px; letter-spacing: -.2px; color: var(--navy); }
        .legal-article h2:first-of-type { margin-top: 0; }
        .legal-article p, .legal-article li { color: var(--ink); font-size: 14.5px; line-height: 1.58; }
        .legal-article p { margin: 8px 0; }
        .legal-article ul { margin: 8px 0; padding-left: 20px; }
        .legal-article .note { margin-top: 24px; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* min-width: 0 обязателен — у grid-элементов по умолчанию min-width: auto, и
   карточка с длинным непереносимым содержимым (название, бейдж) может распереть
   свою колонку на всю ширину сетки вместо равной с соседними. */
.card { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.my-orders { display: flex; flex-direction: column; gap: 12px; }
.my-order { position:relative; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
/* Заказ, открытый по ссылке из письма: подсветка гаснет сама, чтобы человек
   увидел, какой именно из списка ему показали. */
.my-order.is-highlighted { border-color: var(--red); box-shadow: 0 0 0 3px rgba(225, 37, 27, .16); }
.my-order-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 15px; font-weight: 800; }
.my-order-meta { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.order-timeline { display:flex; align-items:flex-start; gap:0; margin-top:14px; overflow-x:auto; padding:2px 0 5px; }
.order-timeline span { position:relative; display:grid; flex:1; min-width:76px; gap:5px; color:#9aa3b4; font-size:10px; font-weight:700; line-height:1.2; text-align:center; }
.order-timeline span::before { position:absolute; z-index:0; top:6px; left:-50%; width:100%; height:2px; background:#e4e8ee; content:""; }
.order-timeline span:first-child::before { display:none; }
.order-timeline i { position:relative; z-index:1; display:block; width:14px; height:14px; margin:auto; border:3px solid #e4e8ee; border-radius:50%; background: var(--white); }
.order-timeline .done { color:var(--navy); }.order-timeline .done::before { background:var(--red); }.order-timeline .done i { border-color:var(--red); background:var(--red); }.order-timeline .current i { box-shadow:0 0 0 4px rgba(225,37,27,.14); }.order-timeline.cancelled { display:block; padding:9px 11px; border-radius:10px; color:#b42318; background:#fff0f0; font-size:12px; font-weight:700; }
.my-order-address { display:flex; align-items:flex-start; gap:5px; margin-top:9px; color:var(--muted); font-size:12px; line-height:1.4; }.my-order-address svg{flex:none;width:14px;height:14px;margin-top:1px;color:var(--red)}
/* Шапка вида Ozon: маленькая стрелка слева, заголовок по центру той же
   строки — без подзаголовка-кикера и без крупного левого заголовка.
   Grid, а не position:absolute — стрелка и заголовок в одной строке сетки,
   поэтому align-items:center выравнивает их по факту, а не по отступу,
   подобранному под одну конкретную высоту шапки (там, где отступы
   сверху/снизу разные, абсолютный центр «плыл» относительно текста). */
.section-head-with-back { position:relative; display:grid; grid-template-columns: 44px 1fr 44px; align-items:center; min-height:22px; padding:calc(var(--safe-top) + 20px) 20px 22px; }
.section-head-with-back .kicker { display:none; }
.section-head-with-back h1 { grid-column: 2; margin:0; overflow-wrap:anywhere; font-size:18px; text-align:center; }
.section-head-with-back .section-back { grid-column: 1; justify-self:start; }
.messages-read-all { grid-column: 3; justify-self:end; display:grid; flex:none; width:30px; height:30px; padding:0; border:0; background:transparent; color:var(--navy); place-items:center; cursor:pointer; }
.messages-read-all:active { opacity:.5; }
.messages-read-all .ic-svg { width:20px; height:20px; }
.messages-read-all[hidden] { display:none; }

/* Список разделов на экране «Сообщения» — Поддержка / Скидки и акции / Заказы */
.msg-threads { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.msg-thread { display:flex; align-items:center; gap:12px; width:100%; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--white); box-shadow:var(--shadow-sm); font:inherit; text-align:left; cursor:pointer; }
.msg-thread-ic { display:grid; flex:none; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--bg); color:var(--navy); }
.msg-thread-ic .ic-svg { width:22px; height:22px; }
.msg-thread-body { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.msg-thread-body b { font-size:14.5px; color:var(--navy); }
.msg-thread-preview { overflow:hidden; color:var(--muted); font-size:12.5px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.msg-thread-meta { flex:none; }
.msg-thread-badge { display:inline-grid; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--red); color:#fff; font-size:11px; font-weight:800; place-items:center; }
/* Единый стиль карточки для всех разделов, но у каждого свой акцентный
   цвет — иначе список выглядит однообразно-неотличимым. «Скидки и акции»
   нарочно ярче остальных (тот же переливающийся градиент, что и на
   прежнем баннере акций на главной) — это самый «горячий» раздел. */
.msg-thread-support { background:linear-gradient(135deg, rgba(59,130,246,.1), rgba(59,130,246,.03)); border-color:rgba(59,130,246,.18); }
.msg-thread-support .msg-thread-ic { background: var(--white); color:#3b82f6; }
.msg-thread-orders { background:linear-gradient(135deg, rgba(34,160,107,.1), rgba(34,160,107,.03)); border-color:rgba(34,160,107,.18); }
.msg-thread-orders .msg-thread-ic { background: var(--white); color:#22a06b; }
.msg-thread-contact { background:linear-gradient(135deg, rgba(217,119,6,.12), rgba(217,119,6,.04)); border-color:rgba(217,119,6,.2); }
.msg-thread-contact .msg-thread-ic { background: var(--white); color:#d97706; }
.msg-thread-promo { border:0; background: linear-gradient(120deg, var(--brand-surface) 0%, var(--brand-surface-2) 55%, var(--red-dark) 130%); box-shadow:0 12px 26px rgba(14,23,48,.22); }
.msg-thread-promo .msg-thread-ic { background: var(--white); color:var(--red); }
.msg-thread-promo .msg-thread-body b { color:#fff; }
.msg-thread-promo .msg-thread-preview { color:rgba(255,255,255,.72); }
.section-back { display:grid; flex:none; width:30px; height:30px; padding:0; border:0; background:transparent; color:var(--navy); place-items:center; cursor:pointer; }
.section-back .back-chevron { width:9px; height:9px; border-width:2px; margin-left:2px; }
.section-back:active { opacity:.5; }
.section-back:focus-visible { outline:3px solid rgba(225,37,27,.22); outline-offset:2px; border-radius:6px; }
.my-order-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:13px; padding-top:12px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--muted); font:700 12px inherit; cursor:pointer; }
.my-order-toggle span:first-child { color:var(--red); font-weight:800; }
.my-order-toggle:focus-visible { outline:3px solid rgba(225,37,27,.2); outline-offset:2px; }
.my-order-chev { display:grid; flex:none; color:var(--muted); place-items:center; transition:transform .18s ease; }
.my-order-chev .ic-svg { width:16px; height:16px; transform:rotate(90deg); }
.my-order.open .my-order-chev .ic-svg { transform:rotate(-90deg); }
.my-order-accordion { padding-top:12px; }
.my-order-items { display:grid; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.my-order-item { display:flex; justify-content:space-between; gap:12px; font-size:13px; line-height:1.4; }
.my-order-item span:last-child { flex:none; font-weight:800; }
.web-orders-info { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 18px; }
.web-orders-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 22px; border-radius: 22px; color: var(--red); background: rgba(225,37,27,.09); font-size: 33px; font-weight: 700; }
.web-orders-icon svg { width: 32px; height: 32px; }
.web-orders-info h2 { margin: 0; color: var(--ink); font-size: 26px; letter-spacing: -.5px; }
.web-orders-info p { max-width: 360px; margin: 13px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.web-orders-link { display: inline-flex; align-items: center; gap: 9px; padding: 15px 20px; border-radius: 14px; color: #fff; background: var(--brand-surface); font-size: 16px; font-weight: 750; text-decoration: none; box-shadow: 0 8px 20px rgba(14,23,48,.18); }
.web-orders-link span { color: #fff; font-size: 19px; line-height: 1; }
.web-cabinet-login { min-height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 8px; }
.web-cabinet-login h2 { margin: 0; color: var(--ink); font-size: 26px; letter-spacing: -.5px; }
.web-cabinet-login p { max-width: 370px; margin: 13px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.cabinet-form { display: grid; width: min(100%, 380px); gap: 12px; text-align: left; }
.cabinet-form .co-input { width: 100%; box-sizing: border-box; }
.cabinet-form .btn { width: 100%; }
.cabinet-audience { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 380px); margin: 0 0 20px; padding: 4px; border-radius: 15px; background: var(--brand-surface); }
.cabinet-audience button { padding: 13px 7px; border: 0; border-radius: 12px; background: transparent; color: rgba(255,255,255,.7); font: 800 15px inherit; cursor: pointer; }
.cabinet-audience button.active { color: var(--navy); background: var(--white); box-shadow: 0 2px 7px rgba(0,0,0,.16); }
.business-cabinet { justify-content: flex-start; padding-top: 20px; }
.business-cabinet .web-orders-icon { margin-top: 2px; margin-bottom: 12px; }
.business-cabinet p { margin-top: 7px; }
.business-bank { display: grid; gap: 9px; padding: 2px 0; color: var(--muted); font-size: 12px; }
.business-bank summary { cursor: pointer; color: var(--navy); font-weight: 700; }
.cabinet-success { padding: 15px; border-radius: 13px; background: rgba(34,160,107,.1); color: #15734b; font-size: 14px; line-height: 1.45; text-align: left; }
.cabinet-password { position: relative; }
.cabinet-password .co-input { padding-right: 104px; }
.cabinet-password button { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-width: 92px; min-height: 44px; border: 0; border-radius: 12px; color: var(--red); background: transparent; font: 700 13px inherit; cursor: pointer; touch-action: manipulation; }
.cabinet-password button:active { background: rgba(238,36,28,.08); }
.cabinet-notice { width: 100%; margin: 0 0 12px; }
.cabinet-kb-done { display:none; justify-self: end; margin: -2px 0 1px; padding: 5px 2px; border: 0; color: var(--muted); background: transparent; font: 700 12px inherit; cursor: pointer; }.cabinet-form:focus-within .cabinet-kb-done{display:block}
.cabinet-switch { margin-top: 15px; border: 0; background: transparent; color: var(--red); font: 700 14.5px inherit; cursor: pointer; }
.cabinet-error { width: min(100%, 380px); margin: 0 0 12px; padding: 12px 14px; box-sizing: border-box; border-radius: 12px; background: rgba(225,37,27,.08); color: var(--red-dark); font-size: 14px; text-align: left; }
.cabinet-profile-open { padding: 9px 11px; border: 1px solid rgba(225,37,27,.2); border-radius: 10px; color: var(--red); background: rgba(225,37,27,.05); font: 700 12px inherit; cursor: pointer; }
.web-profile-panel { display: none; }
.web-profile-panel.show { display: block; }
.web-profile-form { display: none; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 16px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
.web-profile-form.show { display: grid; }
.web-profile-title { margin-bottom: 4px; color: var(--ink); font-size: 17px; font-weight: 800; }
.web-profile-form .co-input, .web-profile-form .btn { width: 100%; box-sizing: border-box; }
.web-profile-form .btn { min-height: 47px; }
        /* Быстрые карточки и карусели профиля (Избранное/Покупки, заказы, «Вы смотрели») */
        .profile-quick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
        .profile-quick-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); text-align: left; font: inherit; cursor: pointer; }
        .profile-quick-card .pqc-ic { color: var(--red); margin-bottom: 2px; }
        .profile-quick-card .pqc-ic .ic-svg { width: 22px; height: 22px; }
        .profile-quick-card b { font-size: 14.5px; color: var(--navy); }
        .profile-quick-card span { color: var(--muted); font-size: 12px; }
        .profile-carousel { margin: 18px 0 0; }
        .profile-carousel[hidden] { display: none; }
        .pc-title { margin-bottom: 10px; color: var(--navy); font-size: 15px; font-weight: 800; }
        .pc-track { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
        .pc-track::-webkit-scrollbar { display: none; }
        .poc-card { display: flex; flex: none; flex-direction: column; gap: 4px; width: 150px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); text-align: left; font: inherit; cursor: pointer; }
        .poc-card .st-dot { width: 8px; height: 8px; border-radius: 50%; }
        .poc-card b { font-size: 13px; color: var(--navy); }
        .poc-card span { color: var(--muted); font-size: 12px; }
        .poc-card small { color: #9098a8; font-size: 11px; }
        /* Полоска прогресса заказа — компактная версия order-timeline без подписей. */
        .poc-progress { display: flex; gap: 3px; margin: 2px 0; }
        .poc-progress i { flex: 1; height: 4px; border-radius: 2px; background: #e4e8ee; }
        .poc-progress i.done { background: var(--red); }
        .poc-card-promo { border-color: rgba(225,37,27,.18); background: rgba(225,37,27,.04); }
        .poc-card-promo b { color: var(--red); }
        .pc-viewed-card { display: flex; flex: none; flex-direction: column; gap: 6px; width: 120px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); text-align: left; font: inherit; cursor: pointer; }
        .pc-viewed-card img { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; object-fit: cover; background: var(--bg); }
        .pc-viewed-card b { overflow: hidden; color: var(--navy); font-size: 12px; line-height: 1.3; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .pc-viewed-card span { color: var(--red); font-size: 12px; font-weight: 800; }
        .profile-menu { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 20px; }
        /* Пунктов меню больше, чем помещается на маленьких экранах — список
           должен прокручиваться внутри шторки, а не обрезаться снизу. */
        /* Плотнее и компактнее — в духе списка меню Ozon, а не отдельные крупные карточки. */
        #profileMenuList { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
        .profile-menu-card { border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; }
        .profile-menu-item { display: flex; align-items: center; width: 100%; gap: 13px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 15px inherit; text-align: left; cursor: pointer; }
        .profile-menu-item:last-child { border-bottom: 0; }
        .profile-menu-item:active { background: #f7f8fa; }
        .profile-menu-item .pmi-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(14,23,48,.05); color: var(--navy); }
        .profile-menu-item .pmi-ic svg { width: 18px; height: 18px; }
        .profile-menu-item .pmi-tx { flex: 1; min-width: 0; }
        .profile-menu-item .pmi-chev { flex: none; color: #c3c7d1; }
        .profile-menu-item .pmi-chev svg { width: 20px; height: 20px; }
        .profile-menu-item.danger { color: var(--red); }
        .profile-menu-item.danger .pmi-ic { background: rgba(225,37,27,.08); color: var(--red); }
        .profile-menu-item[aria-expanded="true"] .pmi-chev { transform: rotate(90deg); }
        .profile-accordion { display: none; border-bottom: 1px solid var(--line); }
        .profile-accordion.open { display: block; }
        .profile-menu-card > .profile-accordion:last-child { border-bottom: 0; }
        .web-profile-form.nested { display: grid; margin: 0; padding: 3px 17px 18px; border: 0; box-shadow: none; background: transparent; }
        .profile-view-card { padding: 20px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); margin-bottom: 16px; }
        .profile-view-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
        .profile-view-row:first-child { padding-top: 0; }
        .profile-view-row:last-of-type { border-bottom: 0; }
        .pv-l { flex: none; color: var(--muted); font-size: 14.5px; }
        .pv-v { color: var(--ink); font-size: 17px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
        .profile-edit-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(225,37,27,.22); border-radius: 13px; color: var(--red); background: rgba(225,37,27,.05); font: 700 15.5px inherit; cursor: pointer; }
        .profile-edit-btn svg { width: 17px; height: 17px; }
        /* Пароль/выход/удаление аккаунта — на странице данных профиля, под
           формой редактирования, а не в гамбургере (☰). */
        .profile-edit-menu { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
        .web-profile-form-actions { display: flex; gap: 10px; }
        .web-profile-form-actions .btn { flex: 1; min-height: 47px; }
        .profile-cancel-btn { border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: var(--white); }
.cabinet-login-links { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.my-order-comment { margin-top: 10px; padding: 10px; border-radius: 10px; background: #f6f7f9; color: var(--ink); font-size: 12.5px; line-height: 1.4; }
.my-order-cancel-reason { margin-top: 10px; padding: 10px; border-radius: 10px; background: #fff4f3; color: var(--ink); font-size: 12.5px; line-height: 1.4; }
.my-order-cancel-reason b { color: var(--red); }
/* «Повторить заказ»/«Отменить заказ» — реальные кнопки в стиле приложения,
   а не голая непроработанная .product-action (как было раньше). */
.my-order-actions { display: flex; gap: 10px; margin-top: 14px; }
.my-order-actions .btn { flex: 1; min-height: 44px; padding: 0 10px; font-size: 14px; }
.my-order-cancel { border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: var(--white); }
.product-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: transparent; color: var(--red); font: 700 13.5px inherit; text-decoration: none; cursor: pointer; }
/* Высота всегда завязана на --support-kb (0px, когда клавиатура закрыта) —
   без отдельного класса-гейта, без ожидания порога: сжатие должно поспевать
   за анимацией клавиатуры кадр в кадр, иначе браузер сам скроллит страницу,
   чтобы показать поле ввода, и обнажает пустоту между сообщениями и клавиатурой. */
/* Чат поддержки закреплён как отдельный слой поверх страницы (position: fixed),
   а не в обычном потоке. Иначе на iOS при открытии клавиатуры Safari сам
   прокручивал документ вверх, чтобы показать поле ввода, — вся страница
   «уезжала» выше, чем нужно, и между полем и клавиатурой оставался серый
   провал. У фиксированного слоя прокручивать нечего: JS выставляет ему top и
   height ровно по видимой области (visualViewport), поэтому строка ввода всегда
   стоит впритык к клавиатуре (как в Тинькофф). top/height задаются в JS. */
#support.active { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; height: calc(100dvh - var(--support-kb, 0px)); min-height: 0; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); overflow: hidden; background: var(--white); flex-direction: column; }
/* Способы доставки: воздух до блока адреса, иначе они слипаются в один
   сплошной список и непонятно, где заканчивается выбор способа. */
.co-delivery-kinds { margin-bottom: 22px; }
.co-delivery-kinds + .co-subtitle { margin-top: 4px; }
.co-delivery-price { display: block; margin-top: 2px; color: var(--red); font-weight: 700; }

/* Пункт выдачи Ozon: способ доставки и кнопка карты стоят одной строкой.
   Кнопку в кнопку вложить нельзя, поэтому строка — обёртка с рамкой, а сам
   способ внутри неё без своей рамки: выглядит как одна строка, а нажатий в
   ней два. Список пунктов отдельным блоком не показываем — выбранный виден
   подписью прямо здесь, а меняют его на карте. */
.co-opt-row { display: flex; align-items: stretch; gap: 0; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); overflow: hidden; }
.co-opt-row.active { border-color: var(--red); background: var(--white); }
/* Рамка у строки одна — её собственная. Своя рамка способа внутри давала
   вторую, и на месте разделителя получалась двойная линия. */
.co-opts .co-opt-row .co-opt, .co-opts .co-opt-row .co-opt.active { flex: 1; min-width: 0; border-color: transparent; border-radius: 0; background: none; }
.co-opt-row .co-opt small { white-space: normal; }
.co-pvz-map { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none; width: 84px; padding: 8px 6px; border: 0; border-left: 1.5px solid var(--line); background: none; color: var(--red); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.co-opt-row.active .co-pvz-map { border-left-color: rgba(225,37,27,.35); }
.co-pvz-map .co-ic { display: inline-flex; }
.co-pvz-map:hover { background: rgba(225,37,27,.06); }
.co-summary-point span:last-child { max-width: 62%; text-align: right; }

/* «Печатает» — три точки бегущей волной, как в iOS. Слова в пузыре нет: он и
   так стоит на стороне менеджера, а подпись только шумит. */
/* Высота пузыря задана явно и не зависит от того, где сейчас точки: они
   двигаются трансформацией, а границы пузыря стоят на месте. Иначе появление и
   уход точек двигали бы ленту на разную величину. */
.support-typing { display: inline-flex !important; align-items: center; box-sizing: border-box; height: 41px; gap: 5px; padding: 0 14px; }
.support-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: support-typing-wave 1.2s infinite ease-in-out; }
.support-typing i:nth-child(2) { animation-delay: .15s; }
.support-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes support-typing-wave { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .support-typing i { animation: none; opacity: .6; } }

/* Три способа купить под ценой — одного размера. Высота задана жёстко, а не
   «не меньше»: у «Нашей доставки» подпись бывает длиннее, и на две строки
   кнопка вырастала вдвое — три кнопки рядом переставали читаться одним
   взглядом. Подпись одной строкой, длинную обрезаем многоточием: подробности
   человек читает в оформлении. */
.pr-buy-now, .pr-own-delivery, .pr-express {
    box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 100%; height: 52px; padding: 6px 14px; line-height: 1.2;
}
.pr-buy-now small, .pr-own-delivery small, .pr-express small {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Неоплаченный заказ: обратный отсчёт и кнопка оплаты прямо в карточке. */
.my-order-unpaid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid #f3c8c4; border-radius: 14px; background: #fff6f5; color: var(--red); font-size: 13px; font-weight: 700; }
.my-order-unpaid span { flex: 1 1 200px; }
.my-order-pay { padding: 10px 18px; font-size: 14px; }
:root[data-theme="dark"] .my-order-unpaid { background: rgba(225,37,27,.12); border-color: rgba(225,37,27,.35); }

/* Оповещение о неоплаченном заказе: небольшая карточка в правом верхнем углу
   поверх страницы. Полоса во всю ширину читалась как сообщение о поломке
   сайта и сдвигала содержимое вниз. */
/* «Сайт обновился»: вкладку держат открытой часами, и после выкладки в ней
   живёт вчерашний код. Плашка снизу по центру, не поверх содержимого справа —
   там уже висит напоминание об оплате, и две карточки в одном углу спорили бы
   друг с другом. */
.fresh-build-note { position: fixed; z-index: 64; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); box-shadow: 0 10px 26px rgba(20,20,30,.18); color: var(--ink); font-size: 13px; font-weight: 700; transform: translateX(-50%); }
.fresh-build-reload { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fresh-build-close { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; }
.fresh-build-close:hover { background: rgba(0,0,0,.06); color: var(--ink); }
:root[data-theme="dark"] .fresh-build-note { background: #1b1c22; border-color: rgba(255,255,255,.12); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
:root[data-theme="dark"] .fresh-build-close { color: rgba(255,255,255,.6); }
.unpaid-note { position: fixed; z-index: 65; top: calc(env(safe-area-inset-top, 0px) + 70px); right: 12px; display: flex; align-items: center; gap: 10px; max-width: min(340px, calc(100vw - 24px)); padding: 10px 12px; border: 1px solid #f3c8c4; border-radius: 14px; background: var(--white); box-shadow: 0 10px 26px rgba(20,20,30,.16); color: var(--red); }
.unpaid-note-ic { display: flex; flex: none; width: 18px; height: 18px; }
.unpaid-note-body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; font-size: 12px; }
/* Заголовок в одну строку: «Счёт за доставку» переносился и налезал на дату. */
.unpaid-note-body b { white-space: nowrap; }
.unpaid-note-body b { font-size: 13px; font-weight: 800; }
.unpaid-note-text { overflow: hidden; color: var(--ink-2, #6b7280); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
/* Плашку убирают свайпом — движение должно быть послушным, поэтому переход
   только на возврат, а не на само перетаскивание. */
.unpaid-note { touch-action: pan-y; transition: transform .18s ease, opacity .18s ease; }
.unpaid-note-close { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; }
.unpaid-note-close:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.unpaid-note-pay { flex: none; padding: 8px 13px; border: 0; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
:root[data-theme="dark"] .unpaid-note { border-color: rgba(225,37,27,.4); background: #1b1c22; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
:root[data-theme="dark"] .unpaid-note-text { color: rgba(255,255,255,.62); }
:root[data-theme="dark"] .unpaid-note-close { color: rgba(255,255,255,.6); }
:root[data-theme="dark"] .unpaid-note-close:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Наличие товара на складе самовывоза. */
.co-opt-stock { display: block; margin-top: 3px; color: #147647; font-size: 12px; font-weight: 700; }
.co-opt-stock:empty { display: none; }
.co-opt-stock.is-missing { color: var(--red); }

/* Варианты товара: размеры и плотности одной карточки, как на Ozon. */
.pr-variants:empty { display: none; }
.pr-variants { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; }
.pr-variant-title { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.pr-variant-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-variant { padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: #14213d; font-size: 14px; font-weight: 700; cursor: pointer; }
.pr-variant.active { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); color: var(--red); }
.pr-variant-more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--red); font-size: 13px; font-weight: 700; cursor: pointer; }
.pr-usage-more { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--red); font-size: 13px; font-weight: 700; cursor: pointer; }
/* Кнопки «купить иначе» — под кнопкой «В корзину». */
.pr-foot-extra:empty { display: none; }
.pr-foot-extra { margin-top: 10px; }

/* Предзаказ: оплата сейчас, отгрузка в указанный срок. Режим включается
   на сервере (PREORDER_ENABLED), пока выключен — блок не рисуется. */
.pr-preorder { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 2px; }
.pr-preorder-buy { padding: 13px 16px; border: 0; border-radius: 14px; background: #14213d; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.pr-preorder small { color: var(--muted); font-size: 12px; line-height: 1.4; }
/* Карточка заявки внутри переписки — под сообщением, которым её отправили. */
.support-messages .support-offer { max-width: min(78%, 620px); margin: 2px 0 6px; }
.support-messages .support-offer-own { align-self: flex-end; }
/* Ответ менеджера с отступом слева — на месте аватара, как у его сообщений. */
.support-messages .support-offer-manager { align-self: flex-start; }
.support-offer { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); font-size: 13px; }
.support-offer b { font-size: 14.5px; }
.support-offer span { color: var(--muted); }
.support-offer-status { font-weight: 700; }
.support-offer-confirmed .support-offer-status { color: #147647; }
.support-offer-declined .support-offer-status { color: var(--red); }
.support-offer-pay { margin-top: 8px; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--red); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.pr-order-request { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.pr-order-request-main, .pr-order-request-call { flex: 1 1 140px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: #14213d; font-size: 14px; font-weight: 700; cursor: pointer; }
.pr-order-request-main { border-color: transparent; background: var(--red); color: #fff; }
.pr-order-request small { flex-basis: 100%; color: var(--muted); font-size: 12px; line-height: 1.4; }
        /* Обе кнопки в две строки, как в приложении: сверху действие, снизу
           пояснение. У «Позвонить» второй шаг зелёный — это уже набор номера,
           а не переход к выбору способа связи. */
        .pr-order-request-main b, .pr-order-request-call b { display: block; font-size: 15px; font-weight: 800; }
        .pr-order-request-main small, .pr-order-request-call small { display: block; flex-basis: auto; margin-top: 2px; font-size: 12px; opacity: .82; color: inherit; }
        .pr-order-request-call.ready { border-color: transparent; background: #12a150; color: #fff; }
        /* Счётчик на месте кнопки «Связаться» — как в приложении: пока
           собираем заявку, правая половина считает количество. */
        .pr-order-request-qty { flex: 1 1 140px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
        .pr-order-request-qty button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; }
        .pr-order-request-qty span { min-width: 28px; text-align: center; font-size: 15px; font-weight: 800; color: var(--ink); }

/* Карточка персонального менеджера над перепиской в поддержке. */
.support-manager-card { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); }
.support-manager-card div { display: flex; flex-direction: column; min-width: 0; }
.support-manager-card b { font-size: 15px; }
.support-manager-card span { color: var(--muted); font-size: 12.5px; }
.support-manager-call { margin-left: auto; padding: 9px 14px; border-radius: 12px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.support-page-head { display: grid; grid-template-columns: 40px 38px minmax(0,1fr); align-items: center; gap: 9px; min-height:68px; padding: calc(var(--safe-top) + 10px) 112px 10px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.support-page-head .section-back { width:40px; min-height:40px; }
#support .wrap, #supportContent { display: flex; width: 100%; min-height: 0; padding: 0; flex: 1; flex-direction: column; }
.support-card { display: flex; min-height: 0; padding: 14px 16px 10px; background: var(--white); flex: 1; flex-direction: column; }
.support-empty { margin: auto; color: var(--muted); font-size: 14px; line-height: 1.45; text-align: center; }
.support-messages { display: flex; min-height: 100px; max-height: none; margin-bottom: 10px; padding: 4px 2px; overflow: auto; flex: 1; flex-direction: column; gap: 9px; scroll-behavior: smooth; }
.support-message { position: relative; max-width: min(84%, 560px); padding: 11px 13px; border-radius: 17px; white-space: pre-wrap; font-size: 15px; line-height: 1.38; }
.support-message.customer { align-self: flex-end; color: #fff; background: var(--brand-surface); border-bottom-right-radius: 5px; }
.support-message-sending { opacity: .78; animation: supportMessageIn .28s cubic-bezier(.2,.8,.2,1); }
@keyframes supportMessageIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: .78; transform: none; } }
@media (prefers-reduced-motion: reduce) { .support-message-sending { animation: none; } }

/* Нативная iOS-оболочка показывает состояние сети без модального окна:
   пользователь может продолжить читать уже загруженный каталог. */
.native-offline-banner {
    position: fixed;
    z-index: 10050;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    translate: -50% 0;
    max-width: calc(100vw - 32px);
    padding: 8px 14px;
    border-radius: 999px;
    background: #0e1730;
    color: #fff;
    box-shadow: 0 8px 24px rgb(14 23 48 / 24%);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.native-offline-banner[hidden] { display: none; }
/* Кружок жеста «потянуть вниз, чтобы обновить» — только в приложении на
   Android (см. assets/app/20-android-native.js). В покое спрятан над
   экраном, палец вытягивает его вниз. */
.pull-refresh {
    position: fixed;
    z-index: 10040;
    top: max(4px, env(safe-area-inset-top));
    left: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -60px);
    border-radius: 50%;
    background: var(--card, #fff);
    box-shadow: 0 6px 18px rgb(14 23 48 / 18%);
    pointer-events: none;
}
.pull-refresh::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    border: 2px solid var(--muted, #98A1B4);
    border-top-color: var(--brand, #E1251B);
    opacity: .55;
}
.pull-refresh.ready::after { opacity: 1; }
.pull-refresh.busy { transform: translate(-50%, 64px); transition: transform .18s ease; }
.pull-refresh.busy::after { opacity: 1; animation: pull-refresh-spin .7s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pull-refresh.busy::after { animation-duration: 2s; }
}
/* Кружка с логотипом слева от пузыря больше нет: «БИКРА» уже написана в
   шапке переписки, и повторять её у каждого ответа незачем. Кто ответил —
   человек или бот — говорит подпись со значком внутри пузыря. */
.support-message.manager { align-self: flex-start; color: var(--ink); background: #f0f2f5; border-bottom-left-radius: 5px; }
.support-message-bot { background: rgba(225,37,27,.06); }
.support-message-bot .support-manager-name { color: var(--red); }
/* Ответ бота про самовывоз в чате поддержки: адрес и сразу под ним своя карта —
   для каждого пункта отдельно (не общая карта на оба, как при оформлении). */
.support-pickup-cards { display: flex; flex-direction: column; gap: 10px; align-self: flex-start; max-width: min(88%, 420px); margin: -2px 0 4px; }
.support-pickup-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); }
.support-pickup-address { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.support-pickup-address .co-ic { flex: none; color: var(--red); }
.support-pickup-address b { display: block; font-size: 13.5px; }
.support-pickup-address small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.support-pickup-card .co-map { height: 130px; border: 0; border-radius: 0; margin: 0; }
/* Ответ бота на «Где мой заказ?» — сама карточка заказа (.my-order) или список
   на выбор, если активных заказов несколько. */
.support-order-lookup { align-self: flex-start; max-width: min(90%, 440px); margin: -2px 0 4px; }
.support-order-lookup .my-order { max-width: 100%; }
.support-order-lookup-empty { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--muted); font-size: 13px; line-height: 1.4; }
.support-order-lookup-list { display: flex; flex-direction: column; gap: 8px; }
.support-order-lookup-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-align: left; cursor: pointer; font: inherit; }
.support-order-lookup-item b { display: block; font-size: 13.5px; }
.support-order-lookup-item small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.support-order-lookup-item .ic-svg { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
/* Дорога в «Мои заказы» прямо из переписки: бот просит назвать номер, а пути
   за ним из чата не было ни одного очевидного — покупатель уходил искать сам и
   часто не возвращался. Стоит под ответом бота, как продолжение его реплики. */
.support-orders-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--text); font: 700 13px var(--sans, inherit); cursor: pointer; }
.support-orders-link .ic-svg { flex: none; width: 17px; height: 17px; color: var(--red); }
.support-orders-link .ic-svg:last-child { width: 14px; height: 14px; margin-left: -2px; color: var(--muted); }
.support-orders-link:active { background: var(--bg); }

/* Номер заказа — кнопка «скопировать» с видимым значком: на выделение текста
   и долгое нажатие рассчитывать нельзя, о них не догадываются. После нажатия
   значок на две секунды становится галочкой — буфер обмена невидим, и без
   отклика непонятно, сработало ли (класс .copied снимает таймер в 17-utils.js).

   Значок стоит в строке с номером, а не под ним, и зона нажатия расширена
   только вбок (padding у значка): если расширить и по высоте, строка станет
   выше на пустом месте. Номер при нехватке места ужимается, а не обрезается
   многоточием — обрезок номера бесполезен, его-то и просят назвать. */
.copy-code { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap; text-align: left; cursor: pointer; -webkit-user-select: text; user-select: text; }
.copy-code .ic-svg { flex: none; box-sizing: content-box; width: 16px; height: 16px; padding: 0 8px; opacity: .55; transition: opacity .15s ease; }
.copy-code:active .ic-svg { opacity: 1; }
.copy-code .copy-code-done { display: none; }
.copy-code.copied .copy-code-copy { display: none; }
.copy-code.copied .copy-code-done { display: block; opacity: 1; color: var(--success, #12a150); }
.my-order-code .copy-code { justify-content: center; font-size: 15px; font-weight: 700; letter-spacing: 2px; color: #0e1730; }
.my-order-code .copy-code .ic-svg { width: 17px; height: 17px; }
.support-form { display: flex; flex: none; align-items: end; gap: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.support-form .co-input { width: 100%; min-height: 46px; max-height: 120px; box-sizing: border-box; border: 0; border-radius: 23px; padding: 12px 16px; background: #f0f2f5; resize: none; }
.support-form .co-input:focus { outline: 2px solid rgba(225,37,27,.2); background: var(--white); }
.support-form .btn { display: grid; flex: 0 0 46px; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; place-items: center; font-size: 25px; line-height: 1; transition: transform .15s ease; }
.support-form .btn svg { width: 20px; height: 20px; transition: transform .2s ease; }
/* Пока сообщение уходит — иконка самолётика скрывается, а на её месте крутится
   кольцо-спиннер прямо внутри круглой кнопки. Раньше вместо этого кнопка
   подменяла иконку словом «Отправляется…», и надпись вылезала поверх кнопки. */
.support-form .btn.sending svg { opacity: 0; }
.support-form .btn.sending::after {
    position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff; border-radius: 50%; content: "";
    animation: supportSendSpin .7s linear infinite;
}
.support-form .btn { position: relative; }
@keyframes supportSendSpin { to { transform: rotate(360deg); } }
.support-attachment { display: grid; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; color: var(--red); background: #f0f2f5; place-items: center; font-size: 19px; cursor: pointer; }
.support-attachment svg { width: 18px; height: 18px; }
.support-attachment input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.support-manager-name { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: 11px; font-weight: 800; opacity: .78; }
.support-manager-name .ic-svg { width: 12px; height: 12px; flex: none; }
.support-file-remove { display: block; margin-top: 5px; padding: 0; border: 0; color: inherit; background: transparent; font: 700 11px inherit; text-decoration: underline; cursor: pointer; }
.support-file-name { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; width: calc(100% - 92px); margin: 8px 0 0 50px; gap: 8px; color: var(--muted); font-size: 12px; white-space: normal; }
.support-file-name[hidden] { display: none; }
.support-file-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-file-name button { display: grid; flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid #d9dee8; border-radius: 50%; color: #68758a; background: var(--white); font-size: 20px; line-height: 1; place-items: center; cursor: pointer; justify-self: end; }
.support-file-name button:active { transform: scale(.92); }
.support-message-file { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; color: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.support-message-file svg { width: 13px; height: 13px; flex: none; }
.support-message-image { display: block; max-width: 100%; max-height: 280px; margin-top: 8px; border-radius: 12px; cursor: zoom-in; }
.app-alert-overlay { position: fixed; z-index: 2000; inset: 0; display: grid; padding: 22px; background: rgba(14,23,48,.48); place-items: center; }
        .app-alert-dialog { width: min(100%, 390px); padding: 21px; border-radius: 20px; background: var(--white); box-shadow: 0 20px 60px rgba(0,0,0,.26); }.app-alert-dialog h3 { margin: 0 0 9px; color: var(--ink); font-size: 20px; }.app-alert-dialog p { margin: 0; color: var(--muted); line-height: 1.48; }.app-alert-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 18px; }.app-alert-buttons .btn,.app-alert-buttons .cabinet-profile-open { min-height: 44px; flex:1 1 160px; padding: 8px 12px; font-size: 13px; }
        .card:active { transform: scale(.97); box-shadow: var(--shadow); }
        .card-img { position: relative; aspect-ratio: 3/4; background: var(--surface-3); }
        .card-img img { width: 100%; height: 100%; object-fit: cover; }
        .product-promo-badge { position: absolute; top: 8px; right: 8px; z-index: 2; max-width: calc(100% - 16px); overflow: hidden; padding: 5px 7px; border-radius: 8px; color: #fff; background: var(--red); box-shadow: 0 3px 10px rgba(225,37,27,.32); font-size: 10px; font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
        .card-name-row, .hit-name-row { display: flex; min-width: 0; align-items: flex-start; gap: 7px; }
        .card-name-row .card-name, .hit-name-row .hit-name { flex: 1; min-width: 0; }
        .card-body { min-width: 0; padding: 13px 13px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
        .card-name { max-width: 100%; overflow-wrap: anywhere; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
        .card-spec { max-width: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.35; }
        .card-foot { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
        .price { display: flex; min-width: 0; flex: 1; flex-direction: column; color: var(--navy); }
        .price b { max-width: 100%; overflow-wrap: anywhere; white-space: normal; font-size: 17px; font-weight: 800; line-height: 1.12; }
        .price small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.1; }
        .price-now { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; order: -1; }
        /* Цена по акции выделяется сама: красная сумма рядом с зачёркнутой
           старой. Раньше отличить её от обычной можно было только по мелкому
           значку скидки — на витрине это терялось. */
        .price:has(.price-now) b { color: var(--red); }
        .price-old { color: #9098a8; font-size: 11px; font-weight: 600; text-decoration: line-through; }
        .price-off { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 6px; background: rgba(225,37,27,.12); color: var(--red); font-size: 10px; font-weight: 800; font-style: normal; }
        .price-off .ic-svg { width: 10px; height: 10px; }
        .hit-price.price b { font-size: 14.5px; }
        .hit-price.price .price-old { font-size: 10px; }
        .empty { text-align: center; padding: 60px 20px; color: var(--muted); display: none; }
        .empty p { margin: 14px 0 0; font-size: 15px; }
        .grid-sentinel { display: none; align-items: center; justify-content: center; padding: 22px 0 8px; }
        .catalog-end { display: none; padding: 20px 18px 30px; color: var(--muted); text-align: center; }
        .catalog-end.show { display: block; }
        .catalog-end span { display: block; font-size: 22px; line-height: 1; opacity: .7; }
        .catalog-end p { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
        .cabinet-consent { display: flex; align-items: flex-start; gap: 9px; margin: 12px 4px 0; color: var(--muted); font-size: 11px; line-height: 1.38; text-align: left; cursor: pointer; }
        .cabinet-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--red); }
        .cabinet-consent a { color: var(--red); text-decoration: none; }
        .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(225,37,27,.2); border-top-color: var(--red); animation: spin .7s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .skeleton-card { overflow: hidden; min-height: 290px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
        .skeleton-shine { height: 100%; background: linear-gradient(100deg, #f0f1f4 20%, #fafafa 40%, #f0f1f4 60%); background-size: 200% 100%; animation: skeleton 1.2s infinite; }
        @keyframes skeleton { to { background-position: -200% 0; } }

        /* ============ Контакты ============ */

        /* ============ Нижнее меню ============ */
        .tabbar {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
            height: calc(var(--nav-h) + env(safe-area-inset-bottom));
            padding-bottom: env(safe-area-inset-bottom);
            display: flex; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(20px);
            border-top: 1px solid var(--line);
            isolation: isolate;
            will-change: transform;
        }
        .tab { position: relative; flex: 1; border: none; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; transition: color .18s; }
        .tabbar .tab { padding-bottom: 0; }
        .tab svg { width: 24px; height: 24px; }
        .tab-ic { font-size: 22px; line-height: 1; }
        .tab.active { color: var(--red); }
        .tab:focus:not(:focus-visible) { outline: none; }
        .tab:focus-visible { outline: 2px solid rgba(225,37,27,.38); outline-offset: -3px; border-radius: 14px; }
        .tab-cart-icon { position: relative; display: grid; place-items: center; }
        /* box-sizing и line-height: рамка добавляла высоту сверх 18px, и цифра
   вставала выше центра кружка. */
        .tab-cart-count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; line-height: 1; border: 2px solid #fff; border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
        .tab-cart-count[hidden] { display: none; }

        .toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); transform: translateX(-50%) translateY(20px); opacity: 0; visibility: hidden; background: var(--brand-surface); color: #fff; padding: 13px 22px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease, visibility 0s linear .35s; z-index: 300; display: flex; align-items: center; gap: 9px; }
        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
        .toast .d { color: var(--red); font-size: 16px; }

        /* ============ Панель успешного заказа (выезжает сбоку) ============ */
        .order-success { position: fixed; top: calc(var(--safe-top) + 16px); right: 16px; z-index: 950; display: flex; align-items: center; gap: 12px; max-width: min(360px, calc(100% - 32px)); padding: 14px 16px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow); transform: translateX(calc(100% + 24px)); opacity: 0; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
        .order-success.show { transform: translateX(0); opacity: 1; }
        .order-success-ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(34,160,107,.12); color: #147a46; }
        .order-success-ic .ic-svg { width: 22px; height: 22px; }
        .order-success-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .order-success-tx b { font-size: 14.5px; color: var(--navy); }
        .order-success-tx span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
        .order-success-close { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }
        /* Конфетти стреляет снизу экрана к центру отдельным слоем поверх всего. */
        .confetti-layer { position: fixed; inset: 0; z-index: 960; overflow: hidden; pointer-events: none; }
        .confetti-piece { position: absolute; bottom: 0; width: 7px; height: 10px; border-radius: 2px; animation: confetti-rise var(--d, 1s) var(--delay, 0s) cubic-bezier(.15,.7,.25,1) forwards; }
        @keyframes confetti-rise { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--x, 0px), var(--rise, -50vh)) rotate(var(--r, 360deg)); opacity: 0; } }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
            .order-success { transition: opacity .01ms linear; }
            .confetti-piece { display: none; }
        }

        /* ============ Корзина ============ */
        /* Все плавающие круглые кнопки в шапке (сообщения, телефон в поддержке,
           гамбургер в профиле) — один размер и одна геометрия на всех экранах.
           Раньше каждая задавала свои width/height/border-radius и размер иконки
           (44/40/34 px, svg 22/21/20/18), из-за чего одна и та же иконка
           сообщений выглядела по-разному в каталоге, поддержке и профиле. */
        .notification-bell, .feedback-fab, .menu-fab, .catalog-chat-btn {
            display: grid; place-items: center;
            width: var(--fab-size); height: var(--fab-size);
            border-radius: var(--fab-radius);
            cursor: pointer;
        }
        .notification-bell svg, .feedback-fab svg, .menu-fab svg, .catalog-chat-btn svg,
        .notification-bell .ic-svg, .feedback-fab .ic-svg, .menu-fab .ic-svg, .catalog-chat-btn .ic-svg {
            width: var(--fab-icon); height: var(--fab-icon);
        }
        .notification-bell, .feedback-fab, .menu-fab {
            position: fixed; top: calc(var(--safe-top) + 16px); z-index: 160;
            border: 1px solid rgba(255,255,255,.22); background: rgba(14,23,48,.58); color: #fff;
            box-shadow: 0 7px 20px rgba(8,14,34,.2); backdrop-filter: blur(10px);
        }
        .notification-bell { right: 18px; }
        .feedback-fab { right: 72px; display: none; }
        .support-screen .feedback-fab { display: grid; }
        .support-screen .feedback-fab { right: 70px; }
        .support-screen .notification-bell { right: 18px; }
/* На самом экране «Сообщения» плавающая кнопка открытия сообщений не нужна —
   и она бы перекрыла кнопку «Прочитать всё» в шапке этого же экрана. */
body[data-active-screen="messages"] .notification-bell { display: none; }
/* В корзине плавающая кнопка сообщений мешала адресу доставки в шапке —
   там у экрана своя шапка, а сообщения доступны из каталога и профиля. */
body[data-active-screen="cart"] .notification-bell { display: none; }
.menu-fab { right: 72px; display: none; }
body[data-active-screen="profile"].profile-authenticated .menu-fab { display: grid; }
.profile-menu-card .profile-menu-item:last-child { border-bottom: 0; }
        /* box-sizing и line-height обязательны: рамка добавляла 4px к высоте, а
   строка оставалась 18px — цифра стояла выше центра кружка. */
        .notification-count { position: absolute; top: -6px; right: -6px; display: none; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; line-height: 1; border: 2px solid var(--bg); border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; place-items: center; }
        .notification-count.show { display: grid; }
        .notification-overlay.show { opacity: 1; pointer-events: auto; }
        .notification-sheet.show { transform: none; }
        .notification-sheet.dragging, .cart-sheet.dragging { transition:none; }
        body.sheet-open { position:fixed; right:0; left:0; width:100%; overflow:hidden; }
        .notification-item.unread { border-color: rgba(225,37,27,.3); background: rgba(225,37,27,.035); }
        .notification-empty { padding: 38px 12px; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
        .notification-empty b { display: inline-block; margin-bottom: 4px; color: var(--navy); font-size: 16px; }
        .cart-overlay { position: fixed; inset: 0; z-index: 210; background: rgba(8,14,34,.55);
            opacity: 0; pointer-events: none; transition: opacity .3s ease;
            -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
        .cart-overlay.show { opacity: 1; pointer-events: auto; }
        .cart-sheet {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 220; color: var(--navy); background: var(--white);
            border-radius: 26px 26px 0 0; padding: 0 20px calc(env(safe-area-inset-bottom) + 20px);
            max-height: 86vh; display: flex; flex-direction: column;
            transform: translateY(101%); pointer-events: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), bottom .25s ease;
            border: 1px solid rgba(14,23,48,.08); box-shadow: 0 -12px 44px rgba(14,23,48,.18);
        }
.cart-sheet.show { transform: none; bottom: var(--kb, 0px); pointer-events: auto; }
/* Форма заявки открывается на всю высоту экрана, а не нижней шторкой: поля
   ввода сразу стоят сверху, поэтому клавиатура их не перекрывает и ничего не
   нужно подскроллировать. Кнопка «Отправить заявку» прижата к низу — если
   клавиатура её закроет, это нормально: поля важнее. Сама форма при этом
   остаётся прижатой к низу экрана (bottom: 0), то есть не «подпрыгивает». */
#leadSheet.show {
    top: 0; bottom: 0; max-height: none;
    padding-top: calc(var(--safe-top) + 6px);
    border-radius: 0;
}
#leadSheet .lead-body { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
#leadSheet .lead-note { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
#leadSheet .lead-fields { display: flex; flex-direction: column; gap: 10px; }
#leadSheet .cart-foot { flex: none; }
        .cart-grip { width: 40px; height: 4px; border-radius: 2px; background: #d5dbe5; margin: 10px auto 4px; }
        [data-sheet-drag-handle] { width:64px; height:20px; margin-top:0; background:linear-gradient(transparent 8px,#cbd2dd 8px,#cbd2dd 13px,transparent 13px); cursor:grab; touch-action:none; }
        .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; }
        .cart-head h3 { margin: 0; font-size: 20px; font-weight: 800; }
        .cart-close { border: none; background: #fff1f0; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; color: var(--red); cursor: pointer; line-height: 1; }
        .kb-done { display: none; border: none; background: var(--brand-surface); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; padding: 7px 15px; border-radius: 999px; }
        .cart-sheet:focus-within .kb-done { display: inline-flex; }
        /* Раньше корзина была нижней шторкой (.cart-sheet), и .cart-items был её
           внутренним скролл-контейнером — отсюда overflow-y: auto. Теперь #cart
           обычный полноэкранный .screen, который скроллит сам документ, а этот
           вложенный скролл-узел остался лишним: на Android он перехватывал
           вертикальный жест над списком товаров (сам не скроллился, т.к. контент
           короче области, а событие уже «съедено»), и страница листалась только
           если палец касался области СНАРУЖИ cart-items — по факту у самого
           правого края. На iOS так не проявлялось. */
        .cart-items { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
        /* ---- Корзина в стиле Ozon: адрес сверху, строка «Выбрать все» с
           «поделиться»/«удалить», карточка товара с галочкой, фото, лайком,
           корзиной, счётчиком ± и кнопкой «Купить». ---- */
        .cart-head-top { display: flex; align-items: center; }
        .cart-address { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--navy); font: 800 17px inherit; letter-spacing: -.3px; text-align: left; cursor: pointer; }
        .cart-address-ic { flex: none; display: grid; place-items: center; color: var(--red); }
        .cart-address-ic .ic-svg { width: 18px; height: 18px; }
        .cart-address #cartAddressText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cart-address-chevron { flex: none; display: grid; place-items: center; width: 15px; height: 15px; color: var(--muted); transform: rotate(90deg); }
        .cart-address-chevron .ic-svg { width: 12px; height: 12px; }
        .cart-address.no-address { color: var(--muted); font-weight: 700; }
        .cart-toolbar { display: flex; align-items: center; gap: 8px; padding: 2px 0 10px; }
        .cart-select-all { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; color: var(--navy); font-size: 14px; font-weight: 700; cursor: pointer; }
        .cart-select-all input, .ci-check input { width: 21px; height: 21px; margin: 0; accent-color: var(--red); cursor: pointer; }
        .cart-tool-btn { display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 11px; background: var(--surface-2); color: #6b7385; cursor: pointer; }
        .cart-tool-btn .ic-svg { width: 17px; height: 17px; }
        .cart-tool-btn:active { transform: scale(.92); }
        .cart-item { display: grid; grid-template-columns: auto 64px minmax(0,1fr); column-gap: 12px; row-gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
        /* Снятая галочка — товар остаётся в списке, но видно, что он не в заказе. */
        .cart-item.unselected { opacity: .55; }
        .ci-check { grid-column: 1; grid-row: 1; display: grid; place-items: center; padding-top: 2px; cursor: pointer; }
        .cart-item img { grid-column: 2; grid-row: 1; width: 60px; height: 80px; border-radius: 14px; object-fit: cover; background: var(--white); }
        .ci-info { grid-column: 3; grid-row: 1; min-width: 0; }
        .ci-name { font-size: 14px; font-weight: 800; line-height: 1.25; }
        .ci-spec { font-size: 12px; color: var(--muted); margin-top: 2px; }
        .ci-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 5px; }
        .ci-price b { color: var(--navy); font-weight: 800; }
        .ci-price .price-old { font-size: 11.5px; white-space: nowrap; }
        .ci-price .price-off { white-space: nowrap; }
        /* Лайк, удаление и счётчик — одной строкой под товаром, счётчик справа. */
        .ci-actions { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 8px; }
        .ci-icon-btn { display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 11px; background: var(--surface-2); color: #8a93a4; cursor: pointer; }
        .ci-icon-btn .ic-svg { width: 17px; height: 17px; }
        .ci-icon-btn:active { transform: scale(.92); }
        .ci-fav.active { color: var(--red); background: #fff1f0; }
        .ci-fav.active .ic-svg { fill: currentColor; }
        .cart-qty { margin-left: auto; display: flex; align-items: center; gap: 9px; padding: 4px; border-radius: 13px; background: #fff4f3; border: 1px solid rgba(225,37,27,.12); }
        .cart-qty button { width: 32px; height: 32px; border: 1px solid rgba(225,37,27,.22); border-radius: 10px; background: var(--white); font-size: 20px; font-weight: 800; color: var(--red); cursor: pointer; line-height: 1; }
        .cart-qty button:active { transform: scale(.9); }
        .cart-qty .q { min-width: 18px; text-align: center; font-weight: 800; font-size: 15px; }
        .ci-buy { grid-column: 1 / -1; grid-row: 3; width: 100%; min-height: 42px; border: 0; border-radius: 13px; background: var(--red); color: #fff; font: 800 14px inherit; cursor: pointer; }
        .ci-buy:active { transform: scale(.985); background: var(--red-dark); }
        .cart-empty { text-align: center; padding: 40px 0 30px; color: var(--muted); display: none; }
        .cart-empty .ic { font-size: 40px; color: var(--red); }
        .cart-empty p { margin: 10px 0 0; font-size: 15px; }
        .cart-foot { padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--line); }
        .cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 15px; color: var(--muted); }
        .cart-total b { font-size: 23px; font-weight: 800; color: var(--navy); }
        .cart-foot .btn-primary { box-shadow: 0 10px 24px rgba(225,37,27,.36); }

        /* ============ Оформление / оплата ============ */
        .checkout { position: fixed; inset: 0; z-index: 240; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; pointer-events: none; overscroll-behavior-y: auto; touch-action: auto;
            transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.checkout.show { transform: none; pointer-events: auto; }
/* Только для ввода адреса: не даём iOS-клавиатуре перекрыть нижнюю часть оформления. */
.checkout.address-input-active { bottom: var(--kb, 0px); }
        /* Тот же компактный вид «стрелка + заголовок по центру», что и у остальных
           экранов (Заказы/Поддержка/и т.д.), а не отдельная круглая кнопка.
           Grid (как у .section-head-with-back) — иначе при разных отступах
           сверху/снизу абсолютный центр «плывёт» относительно текста заголовка. */
        .co-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; position: relative; background: var(--white); border-bottom: 1px solid var(--line);
            padding: calc(var(--safe-top) + 20px) 20px 14px; }
        .co-back { grid-column: 1; justify-self: start; }
        .back-chevron { display: block; width: 11px; height: 11px; border-bottom: 2.5px solid currentColor; border-left: 2.5px solid currentColor; border-radius: 1px; transform: rotate(45deg); margin-left: 4px; }
        .pr-cart-control { width: 100%; }
        .product-cart-stepper { display: flex; align-items: stretch; gap: 10px; width: 100%; }
        .product-cart-open { flex: 1; min-height: 56px; border: 0; border-radius: 16px; background: var(--red); color: #fff; font: 800 17px inherit; cursor: pointer; box-shadow: 0 10px 24px rgba(225,37,27,.34); }
        .product-cart-qty { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid rgba(225,37,27,.18); border-radius: 17px; background: #fff4f3; }
        .product-cart-qty button { width: 44px; min-height: 44px; border: 1px solid rgba(225,37,27,.22); border-radius: 13px; background: var(--white); color: var(--red); font: 800 24px/1 inherit; cursor: pointer; }
        .product-cart-qty b { min-width: 22px; text-align: center; font-size: 17px; }
        .co-head h3 { margin: 0; overflow-wrap: anywhere; font-size: 18px; font-weight: 800; text-align: center; }
        .co-body { flex: 1 1 0; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: scroll; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
        .co-group { flex: none; margin-bottom: 0; padding: 16px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
        .co-title { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
        .co-contact-group { padding: 0; overflow: hidden; }
        .co-contact-summary { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 88px; padding: 15px 16px; border: 0; background: transparent; color: var(--navy); font: inherit; text-align: left; cursor: pointer; }
        .co-contact-summary-icon { display: grid; flex: none; width: 38px; height: 38px; border-radius: 12px; color: var(--red); background: rgba(225,37,27,.08); place-items: center; }
        .co-contact-summary-icon svg { width: 20px; height: 20px; }
        .co-contact-summary-copy { display: grid; min-width: 0; gap: 3px; }
        .co-contact-summary-copy b { overflow: hidden; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
        .co-contact-summary-copy small { overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
        .co-contact-summary-copy .co-contact-email { color: #8a94a7; font-size: 11.5px; }
        .co-contact-chevron { margin-left: auto; color: var(--muted); font-size: 30px; font-weight: 300; line-height: 1; transition: transform .2s ease; }
        .co-contact-group.expanded .co-contact-chevron { transform: rotate(90deg); }
        .co-contact-fields { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; overflow: visible; border-top: 1px solid var(--line); background: var(--white); }
        .co-contact-fields[hidden] { display: none; }
        .co-contact-fields.inline { position: static; z-index: auto; max-height: none; border-radius: 0; box-shadow: none; }
        .co-contact-group.needs-details .co-contact-summary { min-height: 68px; }
        /* Кнопка адреса доставки в оформлении — открывает тот же список
           сохранённых адресов, что и в шапке каталога, вместо отдельного
           поля ввода. */
        .co-address-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
        .co-address-btn-ic { display: grid; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--red); background: rgba(225,37,27,.08); place-items: center; }
        .co-address-btn-ic svg { width: 17px; height: 17px; }
        .co-address-btn #coAddressBtnText { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .co-address-btn-chevron { flex: none; color: var(--muted); font-size: 22px; font-weight: 300; }
        #coAddr:has(+ .co-field-error) + .co-address-btn { border-color: var(--red); }
        .co-contact-fields.inline .co-contact-sheet-head { padding-top: 14px; }
        .co-contact-fields.inline .co-contact-sheet-head b { font-size: 18px; letter-spacing: -.2px; }
        .co-contact-fields.inline .co-contact-sheet-head button { display: none; }
        .co-contact-sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:4px 0 10px; }
        .co-contact-sheet-head b { display:block; font-size:26px; letter-spacing:-.6px; }.co-contact-sheet-head span { display:block; margin-top:4px; color:var(--muted); font-size:13px; }
        .co-contact-sheet-head button { display:grid; flex:none; width:40px; height:40px; padding:0; border:0; border-radius:50%; color:var(--navy); background:var(--bg); font:400 34px/1 Arial,sans-serif; place-items:center; cursor:pointer; }
        .co-delivery-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
        .co-subtitle { margin-bottom: 10px; color: var(--muted); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
        .co-pickup-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
        .co-pickup-head .co-subtitle { margin-bottom:0; }
        .co-nearest { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:8px 12px; border:1px solid #f4b5b1; border-radius:999px; background:#fff7f6; color:var(--red); font:700 12px/1 inherit; cursor:pointer; }
        .co-nearest:disabled { opacity:.55; cursor:wait; }
        .co-nearest[hidden] { display:none; }
        .co-opts { display: flex; flex-direction: column; gap: 10px; }
        .co-seg { display: flex; gap: 10px; }
        .co-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg);
            border: 1.5px solid transparent; border-radius: 16px; padding: 16px; font-size: 15px; font-weight: 600; color: var(--ink);
            cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
        .co-opt .co-ic { font-size: 20px; }
        .co-opt > span:not(.co-ic) { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
        .co-opt small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
        .co-opt.active { border-color: var(--red); background: var(--white); }
        .co-opts .co-opt.active::after { content: "✓"; margin-left: auto; color: var(--red); font-weight: 800; }
        .co-opt.disabled { opacity: .4; pointer-events: none; }
        .co-seg .co-opt { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px; font-size: 14px; line-height: 1.25; }
        .co-delivery-kinds .co-opt { align-items: flex-start; padding: 13px 14px; }
        .co-delivery-kinds .co-ic { margin-top: 1px; }
        .co-input { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 16px; font-size: 16px; font-family: inherit; outline: none; }
        .co-input:focus { border-color: var(--brand-surface); }
        .co-input.invalid { border-color: var(--red); background: rgba(225,37,27,.035); }
        .co-field-error { display: block; margin: -4px 4px 2px; color: var(--red); font-size: 12px; line-height: 1.3; }
        .co-map { height: 210px; border-radius: 16px; overflow: hidden; margin-bottom: 12px; background: var(--surface-3); border: 1px solid var(--line); }
        /* Пока карта не приехала, в её месте стоит подпись, а не пустая серая
           коробка: скрипт Яндекса весит немало, и молчащий прямоугольник
           читался как поломка. */
        .co-map:empty { display: grid; place-items: center; }
        .co-map:empty::after { content: "Загружаем карту…"; color: var(--muted); font-size: 13px; }
        .co-hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
        .app-update-banner { position: fixed; left: 12px; right: 12px; top: max(12px, var(--safe-top)); z-index: 950; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--brand-surface); color: #fff; box-shadow: 0 12px 30px rgba(7,12,28,.38); }
        .app-update-banner span { flex: 1; font-size: 13.5px; line-height: 1.35; }
        .app-update-download { flex-shrink: 0; padding: 8px 14px; border-radius: 10px; border: none; background: var(--red); color: #fff; font-size: 13px; font-weight: 750; }
        .app-update-close { flex-shrink: 0; width: 26px; height: 26px; border: none; background: transparent; color: rgba(255,255,255,.65); font-size: 15px; line-height: 1; }
        .push-offer { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end; justify-content: center; padding: 18px 16px max(22px, env(safe-area-inset-bottom)); background: rgba(7,12,28,.48); backdrop-filter: blur(3px); }
        .push-card { width: min(100%, 410px); padding: 26px 22px 19px; border-radius: 25px; background: var(--brand-surface); color: #fff; text-align: center; box-shadow: 0 18px 45px rgba(7,12,28,.42); }
        .push-bell { width: 56px; height: 56px; display: grid; place-items: center; margin: -50px auto 13px; border-radius: 20px; background: var(--red); font-size: 28px; box-shadow: 0 9px 22px rgba(225,37,27,.34); }

        /* ===== Фирменные SVG-иконки ===== */
        .ic-svg { width: 24px; height: 24px; flex: none; }
        [data-ic] { display: inline-flex; align-items: center; justify-content: center; }
        .tab-ic svg { width: 25px; height: 25px; display: block; }
        .feat-ic svg { width: 25px; height: 25px; }
        .co-opt .co-ic { display: grid; place-items: center; font-size: 0; }
        .co-opt .co-ic svg { width: 22px; height: 22px; }
        .cart-empty .ic svg { width: 46px; height: 46px; color: #c9cdd6; }
        .push-bell svg { width: 28px; height: 28px; color: #fff; }
        .hits-head .t { display: inline-flex; align-items: center; gap: 8px; }
        .hits-head .t [data-ic] svg { width: 20px; height: 20px; color: var(--red); }
        .catalog-end [data-ic] svg { width: 46px; height: 46px; color: #c9cdd6; }
        .pr-document svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--red); }
        .st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
        .my-order-comment svg, .my-order-meta svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }
        .push-card h3 { margin: 0; font-size: 21px; letter-spacing: -.3px; }
        .push-card p { margin: 9px 0 15px; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.45; }
        .push-arrow { margin: 2px 0 8px; color: #ffd9d5; font-size: 13px; font-weight: 750; animation: pushArrow 1s ease-in-out infinite; }
        .push-enable { width: 100%; border: 0; border-radius: 14px; padding: 15px 12px; background: var(--red); color: #fff; font: 800 16px inherit; box-shadow: 0 8px 20px rgba(225,37,27,.3); }
        .push-close { margin-top: 9px; border: 0; background: transparent; color: rgba(255,255,255,.65); font: 600 14px inherit; padding: 7px 12px; }
        @keyframes pushArrow { 50% { transform: translateY(5px); } }

        .promo-install-hint { position: fixed; left: 14px; right: 14px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); z-index: 320; display: flex; align-items: flex-start; gap: 11px; max-width: 520px; margin: auto; padding: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(14,23,48,.96); color: #fff; box-shadow: 0 15px 36px rgba(7,12,28,.35); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .24s ease, transform .24s ease; }
        .promo-install-hint.show { opacity: 1; transform: none; pointer-events: auto; }
        .promo-install-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--red); color: #fff; }
        .promo-install-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linejoin: round; }
        .promo-install-copy { min-width: 0; }
        .promo-install-hint b { display: block; font-size: 14px; line-height: 1.2; }
        .promo-install-hint span { display: block; margin-top: 5px; color: rgba(255,255,255,.74); font-size: 12px; line-height: 1.55; }
        .promo-inline-icon { display: inline-grid; width: 17px; height: 17px; margin: 0 1px -4px 3px; color: #fff; vertical-align: baseline; }
        .promo-inline-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
        .promo-add-home { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; padding: 1px 5px 1px 3px; border-radius: 7px; background: rgba(36,133,255,.18); color: #6eb1ff; font-style: normal; font-weight: 750; white-space: nowrap; }
        .promo-add-home svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
        .promo-install-hint button { flex: none; width: 28px; height: 28px; margin: -4px -4px 0 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font: 500 24px/1 Arial, sans-serif; cursor: pointer; }

        /* Стабильная типографика и узкие Android-экраны. */
        button, input, textarea, select { min-width: 0; max-width: 100%; }
        /* Safari на iPhone увеличивает страницу, если активное поле мельче 16px. */
        @media (max-width: 767px) {
            input, textarea, select { font-size: 16px !important; }
        }
        .body, .feat-tx, .my-order-meta, .support-message, .notification-item, .cabinet-error { overflow-wrap: anywhere; }
        .my-order-head > span:first-child { min-width: 0; overflow-wrap: anywhere; }
        .cabinet-audience button { min-width: 0; line-height: 1.2; }
        .admin-tab { display: none; }
        /* В чате убираем только нижнюю навигацию и только при реальной клавиатуре.
           Корзина, звонок и уведомления остаются доступны всегда. */
        .keyboard-open .tabbar { display: none !important; }
        /* Чат остаётся в обычной высоте экрана: поднимается только composer.
           Уменьшаем высоту самого экрана ровно на высоту клавиатуры — тогда
           список сообщений (flex:1) сам сжимается, а строка ввода остаётся
           внизу этого укороченного экрана, прямо над клавиатурой, без прыжка
           всего контента вверх (как было при padding-bottom на всю карточку). */
        .keyboard-open #support.active { padding-bottom: 0; }
        .keyboard-open #support.active .support-card { padding-bottom: 10px; }
        @media (hover: none) and (pointer: coarse) { .scroll-hint { display: none; } }

        @media (max-width: 380px) {
            .wrap { padding-right: 16px; padding-left: 16px; }
            .hero { padding-right: 18px; padding-left: 18px; }
            .hero h1 { font-size: 34px; }
            .page-head, .grid, .chips, .hits, .count-row, .co-body, .co-head, .co-foot, .pr-content { padding-right: 16px; padding-left: 16px; }
            .grid { gap: 10px; }
            .web-cabinet-login { min-height: 390px; padding-right: 0; padding-left: 0; }
            .cabinet-audience { width: 100%; }
            .cabinet-profile-open { flex: 1 1 136px; text-align: center; }
        }

        /* На компьютере приложение перестаёт выглядеть растянутой мобильной страницей. */
        @media (min-width: 760px) {
            :root { --nav-h: 76px; }
            /* На сайте строка поиска ведёт себя ровно так же, как на мобилке:
               прилипает сверху и переливается из прозрачного (виден общий
               градиент) в белый — поведение больше не отключается по ширине.
               Фон задаётся общим правилом через --pin, свой linear-gradient тут
               не нужен: он давал стык (120deg против 165deg подложки). */
            .wrap, .page-head, .grid, .count-row, .hits-head, .pr-content, .catalog-search-sticky, .catalog-head-bottom { width: min(1120px, 100%); margin-right: auto; margin-left: auto; }
            /* Подложка каталога раньше тоже упиралась в те же 1120px — на
               большом экране цветная зона превращалась в коробку с серыми
               полями по бокам («обрезано»), в отличие от полноэкранного фона
               .hero на главной. Разрываем её из центрированного потока и
               растягиваем на всю ширину окна, оставляя контент внутри
               центрированным как раньше. */
            .catalog-color-backdrop { left: 50%; right: auto; width: 100vw; margin-left: -50vw; }
            .chips, .hits { width: min(1120px, 100%); margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; }
            .hero { min-height: 680px; padding-top: 34px; padding-right: max(48px, calc((100vw - 1120px) / 2)); padding-left: max(48px, calc((100vw - 1120px) / 2)); }
            .hero-mid { max-width: 660px; padding-bottom: 54px; }
            .hero h1 { font-size: clamp(48px, 4.1vw, 64px); letter-spacing: -2.4px; }
            .hero p.lead { max-width: 500px; margin-top: 16px; padding: 15px 19px; font-size: 16px; border-radius: 18px; }
            .hero-greeting { margin-top: 14px; }
            /* Колонки фиксированной ширины, а не доли экрана: карточка держит
               один и тот же размер на любом мониторе. С долями она тянулась
               вслед за окном, и фотография в пропорции 3:4 обрезалась
               по-разному — на узком экране у товара пропадали края с
               размерами и подписями. */
            .grid { grid-template-columns: repeat(4, 260px); justify-content: center; }
            /* Целиком: в каталоге снимки с подписями по краям. Фон — цвет
               карточки: белым волосок округления 3:4 виден полосами. */
            .card-img img { object-fit: contain; background: var(--surface-3); }
            .hit-card { width: 184px; }
            .tabbar { top: auto; right: auto; bottom: 0; left: 50%; width: min(720px, calc(100% - 32px)); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; background: rgba(255,255,255,.88); box-shadow: 0 -8px 28px rgba(14,23,48,.08); transform: translate3d(-50%,0,0); }
            .tab { min-width: 0; flex: 1; flex-direction: column; gap: 4px; padding: 0 8px; font-size: 11px; }
            .tab svg { width: 24px; height: 24px; }
            .tab-ic { font-size: 22px; }
            html.admin-user .admin-tab { display: flex; }
            .dir-card { min-height: 420px; padding: 32px; }
            .dir-card .t h3 { font-size: 24px; }
            .dir-card .t span { font-size: 14px; }
            .cat-menu-grid { grid-template-columns: repeat(4, 1fr); }
            .web-cabinet-login { max-width: 560px; margin-right: auto; margin-left: auto; }
            .web-cabinet-login .cabinet-form, .cabinet-audience, .cabinet-error { width: min(100%, 460px); }
            /* На десктопе клавиатуры нет — возвращаем чат в обычный поток,
               иначе фиксированный слой ломает центрированную вёрстку сайта.
               При этом само окно переписки — ограниченной высоты со своим
               скроллом: раньше вся страница росла вместе с диалогом, и форма
               отправки уезжала вниз, до неё приходилось долистывать. */
            #support.active { position: static; height: auto; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
            .support-page-head { width: min(1120px, calc(100% - 64px)); box-sizing: border-box; margin: 0 auto; padding: 24px 136px 18px 0; border-bottom: 0; background: transparent; }
            #support .wrap { width: min(1120px, calc(100% - 64px)); margin: 0 auto; }
            /* flex:1 с базовым flex-basis:0% в неограниченном по высоте
               родителе игнорирует явную height — окно росло вместе с
               перепиской. flex:none возвращает управление высотой сюда. */
            .support-card { width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 20px 26px 16px; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-sm); flex: none; height: min(70vh, 720px); min-height: 420px; }
            .support-messages { padding: 10px 4px; }
            .support-form { padding-top: 14px; }
            .my-orders { max-width: 760px; margin-right: auto; margin-left: auto; }
        }

        /* ============ Страница товара ============ */
        .product { position: fixed; inset: 0; z-index: 250; background: var(--bg); display: flex; flex-direction: column;
            transform: translateX(100%); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
        .product.show { transform: none; }
        /* overscroll-behavior: contain — доскролл карточки до края не должен
           «пробиваться» на каталог позади (см. lockPageForSheet в openProduct). */
        .pr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
        /* Фото товара — карточка во всю ширину экрана со скруглённым низом (как
           у Ozon), а не картинка фиксированной высоты в 360px. padding-top на
           безопасную зону: раньше галерея начиналась от y=0, и верх фотографии
           «съедался» строкой статуса / Dynamic Island. Кнопки назад/поиск/
           поделиться/лайк лежат поверх этой зоны (см. .pr-float-head). */
        /* overflow-y: hidden обязателен: при overflow-x: auto вторая ось по
           спецификации сама становится прокручиваемой, и фотографию можно было
           таскать вверх-вниз внутри её же рамки. Двигаться ей теперь некуда, а
           pan-y в touch-action оставляет вертикальный жест странице: провёл по
           фотографии вниз — листается страница, вбок — переключается снимок. */
        .pr-gallery { display: flex; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--white); padding-top: calc(var(--safe-top) + 46px); border-radius: 0 0 22px 22px; }
        .pr-gallery::-webkit-scrollbar { display: none; }
        .pr-gallery img { flex: none; width: 100%; height: min(92vw, 440px); object-fit: contain; scroll-snap-align: center; background: var(--white); cursor: zoom-in; }
        .photo-viewer{position:fixed;z-index:1000;inset:0;display:grid;box-sizing:border-box;padding:64px 20px 38px;overflow:hidden;background:rgba(5,12,28,.94);place-items:center}.photo-stage{position:relative;display:grid;max-width:100%;max-height:calc(100vh - 102px);place-items:center}.photo-stage img{display:block;max-width:100%;max-height:calc(100vh - 102px);width:auto;height:auto;object-fit:contain;user-select:none}.photo-viewer button{position:absolute;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.2);font-size:24px;line-height:0;cursor:pointer}.photo-viewer .photo-close{top:14px;right:14px}.photo-viewer .photo-nav{top:50%;z-index:1;transform:translateY(-50%);background:rgba(14,23,48,.56);font-size:30px}.photo-viewer .photo-prev{left:8px}.photo-viewer .photo-next{right:8px}.photo-viewer .photo-counter{position:absolute;bottom:14px;left:50%;padding:6px 10px;border-radius:999px;color:#fff;background:rgba(255,255,255,.16);font-size:13px;font-weight:700;transform:translateX(-50%)}@media(max-width:560px){.photo-viewer{padding:58px 12px 32px}.photo-viewer button{width:38px;height:38px;font-size:22px}.photo-viewer .photo-prev{left:6px}.photo-viewer .photo-next{right:6px}}
        .pr-float-head { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-top) + 12px) 16px 0; pointer-events: none; }
        .pr-float-actions { display: flex; gap: 8px; }
        /* Кнопки над фотографией: сплошные, а не полупрозрачные. Через
           прозрачную сквозила фотография, и значок читался как грязь на
           снимке. В тёмной теме — тёмная подложка, светлый значок. */
        .pr-float-btn { pointer-events: auto; display: grid; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface); box-shadow: 0 4px 14px rgba(14,23,48,.16); place-items: center; cursor: pointer; }
        .pr-float-btn:active { transform: scale(.92); }
        .pr-float-btn.active { color: var(--red); }
        .pr-float-btn.active .ic-svg { fill: currentColor; }
        .pr-float-btn .ic-svg { width: 19px; height: 19px; }
        .pr-thumbs { display: flex; gap: 8px; padding: 12px 16px 2px; overflow-x: auto; scrollbar-width: none; }
        .pr-thumbs::-webkit-scrollbar { display: none; }
        .pr-thumb { flex: none; width: 48px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--white); cursor: pointer; opacity: .6; transition: all .15s ease; }
        .pr-thumb img { width: 100%; height: 100%; object-fit: contain; }
        .pr-thumb.active { border-color: var(--red); opacity: 1; }
        .pr-content { padding: 8px 20px 24px; }
        .pr-cat { display: flex; gap: 6px; color: var(--red); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
        .pr-cat button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
        .pr-cat button:hover, .pr-cat button:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
        /* Цена — между размером товара и наличием (внизу карточки её больше
           нет, там только «В корзину»). Крупно, как у Ozon. */
        .pr-price { margin: 10px 0 10px; color: var(--navy); font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; }
        .pr-price .price-now { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
        .pr-price .price-old { font-size: 14px; }
        .pr-price .price-off { font-size: 12px; }
        .pr-name { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 4px; line-height: 1.15; }
        .pr-spec { color: var(--muted); font-size: 14px; }
.pr-availability { display: inline-flex; margin-top: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(24, 151, 87, .1); color: #147a46; font-size: 13px; font-weight: 700; }
.pr-availability.out { background: rgba(225,37,27,.1); color: var(--red); }
.pr-documents { display: flex; flex-direction: column; gap: 8px; }
.pr-document { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--navy); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.pr-document:hover { border-color: rgba(237,35,29,.35); background: rgba(237,35,29,.035); }
.pr-document span { min-width: 0; overflow-wrap: anywhere; }
.pr-document small { margin-left: auto; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
#prPromo:empty { display: none; }
/* Маленькая аккуратная «таблетка» вместо полноширинного блока — как бейджи
   скидок/акций у крупных маркетплейсов рядом с ценой. */
.pr-promo-row { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; width: auto; margin-top: 12px; padding: 7px 12px; border: 1px solid rgba(225,37,27,.18); border-radius: 999px; background: rgba(225,37,27,.08); color: var(--red); font: inherit; text-align: left; cursor: pointer; }
.pr-promo-ic { flex: none; display: grid; place-items: center; color: var(--red); }
.pr-promo-ic .ic-svg { width: 14px; height: 14px; }
.pr-promo-tx { min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pr-promo-chev { flex: none; color: var(--red); opacity: .65; transition: transform .18s ease; }
.pr-promo-chev .ic-svg { width: 16px; height: 16px; }
.pr-promo-row.open .pr-promo-chev { transform: rotate(90deg); }
.pr-promo-details { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.pr-promo-details p { margin: 0 0 10px; color: var(--ink); font-size: 13px; line-height: 1.45; }
        /* ---------- Отзывы о товаре ---------- */
        /* Отзывы стоят под характеристиками во всю ширину карточки: это
           длинный текст, в узкой колонке он превращается в колодец. */
        .pr-reviews { margin-top: 28px; }
        /* Заголовок, общая оценка и разбивка по звёздам идут одной колонкой
           слева. Справа оценка стояла особняком и читалась как отдельное
           число, не связанное со списком отзывов под ней. */
        .rv-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
        .rv-summary { display: grid; gap: 10px; justify-items: start; }
        .rv-head h4 { font-size: 18px; font-weight: 800; margin: 0; }
        .rv-count { color: var(--muted); font-weight: 600; }
        .rv-average { display: flex; align-items: center; gap: 8px; font-size: 18px; }
        .rv-average b { font-weight: 800; }
        /* Заглушки на время загрузки: держат ровно то место, которое займут
           настоящие блоки. Без них карточка открывалась без склейки и отзывов,
           а через полсекунды всё под ними прыгало вниз. */
        @keyframes bikra-skeleton { 0%, 100% { opacity: .45 } 50% { opacity: .8 } }
        .pr-variant-skeleton span,
        .rv-skeleton span { display: block; border-radius: 8px; background: var(--surface-2); animation: bikra-skeleton 1.2s ease-in-out infinite; }
        .pr-variant-skeleton .pr-variant-title { width: 72px; height: 14px; }
        .pr-variant-skeleton .pr-variant-list { display: flex; gap: 8px; }
        .pr-variant-skeleton .pr-variant-list span { width: 84px; height: 38px; border-radius: 12px; }
        .rv-skeleton { display: grid; gap: 12px; }
        .rv-skeleton .rv-skeleton-line { height: 14px; }
        .rv-skeleton .rv-skeleton-block { height: 96px; border-radius: 14px; }
        /* Разбивка по оценкам: строка на звезду, полоса по доле, справа —
           сколько человек её поставило. Ширина ограничена: во всю карточку
           полоса на девятьсот отзывов выглядела бы как индикатор загрузки. */
        .rv-breakdown { display: grid; gap: 6px; width: min(260px, 60vw); }
        .rv-bar-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
        .rv-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
        .rv-bar i { display: block; height: 100%; border-radius: 999px; background: #f5a524; }
        .rv-bar-count { text-align: right; font-variant-numeric: tabular-nums; }
        .rv-stars { display: inline-flex; gap: 2px; color: #f5a524; font-size: 16px; line-height: 1; }
        .rv-stars i { font-style: normal; color: var(--line); }
        .rv-stars i.on { color: #f5a524; }
        .rv-stars.small { font-size: 13px; }
        .rv-item { padding: 14px 0; border-top: 1px solid var(--line); }
        .rv-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .rv-author { font-weight: 700; }
        /* Отметка о покупке — главное отличие от «отзывов из интернета»:
           её видно сразу, но она не спорит с текстом за внимание. */
        .rv-verified { font-size: 12px; color: #1f9d55; background: rgba(31,157,85,.12); padding: 3px 8px; border-radius: 999px; }
        .rv-item-meta { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
        .rv-date { font-size: 13px; color: var(--muted); }
        .rv-text { margin: 0; line-height: 1.55; white-space: pre-line; }
        .rv-answer { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-3); }
        .rv-answer b { display: block; font-size: 13px; margin-bottom: 4px; }
        .rv-answer p { margin: 0; line-height: 1.5; }
        .rv-empty { color: var(--muted); margin: 0 0 14px; }
        .rv-more, .rv-write { margin-top: 14px; width: 100%; padding: 12px; border-radius: 14px; font-weight: 700; cursor: pointer; }
        .rv-more { background: var(--surface-3); border: 1px solid var(--line); color: var(--text); }
        .rv-write { background: var(--red); border: 0; color: #fff; }
        .rv-form { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
        .rv-form h5 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
        .rv-form-stars { display: flex; gap: 6px; margin-bottom: 12px; }
        .rv-form-stars button { font-size: 30px; line-height: 1; background: none; border: 0; color: var(--line); cursor: pointer; padding: 0; }
        .rv-form-stars button.on { color: #f5a524; }
        .rv-form textarea { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 12px; font: inherit; resize: vertical; }
        .rv-form-foot { display: flex; gap: 10px; margin-top: 12px; }
        .rv-form-foot button { flex: 1; padding: 12px; border-radius: 12px; font-weight: 700; cursor: pointer; }
        .rv-cancel { background: var(--surface-3); border: 1px solid var(--line); color: var(--text); }
        .rv-submit { background: var(--red); border: 0; color: #fff; }
        .rv-submit:disabled { opacity: .5; cursor: default; }
        .rv-form-note { margin: 10px 0 0; color: var(--red); font-size: 14px; }

        /* Отзывы в профиле: две вкладки, как в маркетплейсах. */
        .profile-reviews { margin-top: 22px; }
        .rv-tabs { display: flex; gap: 8px; margin: 10px 0 14px; }
        .rv-tab { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-weight: 600; cursor: pointer; }
        .rv-tab.active { background: var(--red); border-color: var(--red); color: #fff; }
        .rv-tab span { opacity: .75; }
        .rv-waiting { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px; margin-bottom: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
        /* Документы организации: строка-ссылка со значком, датой и суммой. */
        .cabinet-documents { margin-top: 18px; }
        .doc-note { margin: 0 0 12px; color: var(--muted, #6B7385); font-size: 13.5px; }
        .doc-row { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); color: inherit; text-decoration: none; }
        .doc-row .doc-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--surface-3); }
        .doc-row .doc-ic svg { width: 18px; height: 18px; }
        .doc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
        .doc-body b { font-size: 14.5px; }
        .doc-body span { color: var(--muted, #6B7385); font-size: 12.5px; }
        .doc-get { flex: none; color: var(--red); font-weight: 700; font-size: 13.5px; }

        /* «Скрыть напоминание» — рядом с товаром, ссылкой: гасит точку в
           «Сообщениях», сам товар из списка не убирает. */
        .rv-waiting-row { margin-bottom: 10px; }
        .rv-waiting-row .rv-waiting { margin-bottom: 4px; }
        .rv-waiting-dismiss { padding: 0 0 6px; border: 0; background: none; color: var(--muted, #6B7385); font: 500 12.5px inherit; cursor: pointer; }
        .rv-waiting-dismiss:hover { text-decoration: underline; }
        .rv-waiting-hidden { display: block; padding: 0 0 6px; color: var(--muted, #6B7385); font-size: 12.5px; }
        .rv-waiting-row.is-dismissed .rv-waiting { opacity: .7; }
        .rv-waiting img { width: 56px; height: 74px; object-fit: cover; border-radius: 10px; background: var(--surface-3); }
        .rv-waiting-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .rv-waiting-body b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .rv-waiting-body span { font-size: 13px; color: var(--muted); }
        /* Пустые звёзды — приглашение оценить, а не оценка. */
        .rv-waiting-stars { font-size: 20px; letter-spacing: 3px; color: var(--line); }

        /* Приглашение оценить — сверху списка заказов, когда есть что оценить. */
        .rv-invite { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-bottom: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
        .rv-invite-stars { font-size: 20px; letter-spacing: 2px; color: #f5a524; }
        .rv-invite-body { display: flex; flex-direction: column; gap: 2px; }
        .rv-invite-body b { font-weight: 700; }
        .rv-invite-body span { font-size: 13px; color: var(--muted); }

        /* Цена за квадратный метр рядом с ценой за рулон: по ней товар и
           сравнивают между собой. */
        .pr-price-unit { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); font-size: 13px; font-weight: 600; color: var(--muted); }
        /* «Купить сейчас» — второй по важности после «В корзину»: заметная, но
           не спорит с ней за внимание. */
        .pr-buy-now { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; margin-top: 8px; padding: 11px; border: 1px solid var(--red); border-radius: 14px; background: transparent; color: var(--red); font-weight: 700; cursor: pointer; }
        .pr-buy-now small { font-weight: 500; font-size: 12px; opacity: .8; }
        /* Экспресс-курьер: тот же размер, что у «Купить сейчас», но спокойнее
           по цвету — это не основное действие, а способ доставки. Вне рабочего
           времени кнопка гаснет, но остаётся на месте с ближайшим сроком. */
        .pr-express { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; margin-top: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); font-weight: 700; cursor: pointer; }
        .pr-express small { font-weight: 500; font-size: 12px; color: var(--muted); }
        .pr-express.disabled { opacity: .55; cursor: default; }

        /* Срок доставки под кнопкой покупки: покупатель решает по нему так же,
           как по цене. Город берём тот, что он уже выбрал в шапке. */
        .pr-delivery-estimate { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; font-size: 13px; color: var(--muted); }
        .pr-delivery-days { font-weight: 600; color: var(--text); }
        .pr-delivery-change, .pr-delivery-ask { padding: 0; border: 0; background: none; color: var(--red); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

        /* Быстрый вход: две кнопки под формой. Отдельной регистрации нет —
           кабинет заводится сам, поэтому и подпись про это. */
        .cabinet-social { margin-top: 18px; }
        .cabinet-social-title { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 10px; }
        /* Кнопки входа — в фирменном виде сервисов: так их узнают с первого
           взгляда, а «серая кнопка с логотипом» читается как что-то своё. */
        .cabinet-social-buttons { display: grid; gap: 10px; }
        .cabinet-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 12px; border: 0; font-weight: 600; font-size: 15px; text-decoration: none; }
        .cabinet-social-btn.cabinet-social-vk { background: #0077ff; color: #fff; }
        .cabinet-social-btn.cabinet-social-vk:hover { background: #0066dd; }
        .cabinet-social-btn.cabinet-social-yandex { background: #000; color: #fff; }
        .cabinet-social-btn.cabinet-social-yandex:hover { background: #1a1a1a; }
        .cabinet-social-btn .cabinet-social-mark svg { display: block; }
        .cabinet-social-mark { display: inline-flex; flex: none; }
        .cabinet-social-btn:active { transform: scale(.99); }
        .cabinet-social-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

        .pr-section { margin-top: 24px; }
        .pr-section h4 { font-size: 16px; font-weight: 800; margin: 0 0 10px; }
        .material-calculator { padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; }
        .material-calculator-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 16px; border: 0; background: none; color: var(--navy); font: 800 14px inherit; text-align: left; cursor: pointer; }
        .material-calculator-toggle .pr-promo-chev { color: var(--muted); transition: transform .18s ease; }
        .material-calculator-toggle.open .pr-promo-chev { transform: rotate(90deg); }
        .material-calculator-body { padding: 0 16px 16px; }
        .material-calculator-body > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
        .material-calculator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
        .material-calculator label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
        .material-calculator input, .material-calculator select { width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--navy); background: var(--white); font: 700 14px inherit; outline: none; }
        .material-calculator input:focus, .material-calculator select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(225,37,27,.1); }
        .material-calculator-result { min-height: 42px; margin-top: 12px; color: var(--navy); font-size: 13px; line-height: 1.45; }
        .material-calculator-add { width: 100%; min-height: 52px; padding: 10px 12px; border: 0; border-radius: 16px; color: #fff; background: var(--red); font: 800 14px inherit; cursor: pointer; }
        .material-calculator-add:disabled { color: var(--muted); background: #e9edf3; cursor: not-allowed; }
        .material-calculator small { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.4; }
        .pr-under { padding: 0 20px 28px; }
        .pr-details { width: min(100%, 760px); margin: 0 auto; }
        .pr-detail-tabs { display: flex; gap: 6px; margin-top: 22px; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
        .pr-detail-tabs::-webkit-scrollbar { display: none; }
        .pr-detail-tab { flex: 1 0 auto; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font: 800 14px/1.2 inherit; white-space: nowrap; cursor: pointer; }
        .pr-detail-tab.active { color: var(--ink); background: var(--white); box-shadow: var(--shadow-sm); }
        .pr-detail-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
        .pr-detail-panel { min-width: 0; padding: 2px; }
        .pr-detail-panel .pr-section { margin-top: 20px; }
        .pr-desc { font-size: 15px; line-height: 1.6; color: var(--ink); }
        /* Абзацы из админки набирают с новой строки — сохраняем переносы,
           иначе описание слипается в сплошной текст. */
        .pr-desc { white-space: pre-line; }
        /* Свёрнутое описание: шесть строк и кнопка. На широком экране класс не
           ставится — там текст помещается целиком. */
        .pr-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
        .pr-usage { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
        .pr-usage li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.4; }
        .pr-usage li::before { content: "✓"; color: var(--red); font-weight: 800; flex: none; }
        /* Характеристики: слева название, справа значение. Длинные перечни
           («для газонов / для дренажа / …») раньше растягивались в одну жирную
           строку через весь блок и читались как сплошной текст — теперь каждый
           пункт отдельной меткой. */
        .pr-specs { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); }
        .pr-specs .row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 16px; align-items: start; padding: 13px 16px; font-size: 14px; }
        .pr-specs .row + .row { border-top: 1px solid var(--line); }
        .pr-specs .row .k { color: var(--muted); line-height: 1.4; }
        .pr-specs .row .v { color: var(--ink); font-weight: 700; line-height: 1.4; }
        .pr-specs .row .v-tags { display: flex; flex-wrap: wrap; gap: 6px; }
        .pr-specs .row .v-tags i { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 12.5px; font-style: normal; font-weight: 700; }
        .address-field { position: relative; }
        .address-suggestions { position: absolute; z-index: 260; top: calc(100% + 6px); left: 0; right: 0; display: none; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
        .address-suggestions.show { display: block; }
        .address-suggestion { display: block; width: 100%; padding: 13px 15px; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; }
        .address-suggestion:last-child { border-bottom: none; }
        .address-suggestion:active { background: var(--bg); }
        /* Лист выбора адреса доставки (несколько сохранённых, как у Ozon) —
           переиспользует .cart-sheet/.cart-overlay, как меню и заявка. Но
           открывается ещё и из блока доставки внутри «Оформления» (.checkout,
           z-index:240) — общий z-index шторок (220) держал её ПОД оформлением,
           лист был не виден, пока не закроешь checkout. Поднимаем выше. */
        #addressOverlay { z-index: 245; }
        #addressSheet { z-index: 246; max-height: 78vh; overflow-y: auto; transition: max-height .2s ease; }
        /* Пока открыта форма добавления адреса, лист раскрывается на весь экран
           (как «Укажите точный адрес» у Ozon): поле ввода уезжает наверх, на
           уровень глаз, подсказки DaData видны под ним, а кнопки «Отмена» и
           «Сохранить адрес» прижаты к низу — не в середине экрана над
           клавиатурой. Раньше лист оставался нижней шторкой, и при открытой
           клавиатуре поле ввода оказывалось у самого её края. */
        /* Высоту задают top и bottom, и оба — по краям экрана. bottom: 0 здесь
           обязателен: без него bottom берётся из .cart-sheet.show (var(--kb)), и
           на Android (где --kb реальный) лист сжимался до области над
           клавиатурой — кнопки «Отмена»/«Сохранить адрес» подтягивались вплотную
           под поле ввода. Теперь лист всегда во весь экран: поле ввода наверху,
           кнопки внизу, и клавиатура может их спокойно закрыть. */
        #addressSheet.address-form-open {
            top: 0; bottom: 0; max-height: none; border-radius: 0;
            display: flex; flex-direction: column;
            padding-top: calc(var(--safe-top) + 6px);
            overflow: hidden;
        }
        #addressSheet.address-form-open .cart-grip { display: none; }
        #addressSheet.address-form-open .address-form { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 10px; }
        /* Поле ввода прижато к верху, подсказки идут прямо под ним обычным
           потоком (а не absolute-слоем, который в полноэкранном режиме уехал бы
           к самому низу) и прокручиваются в отведённой им высоте.
           Растягивать поле на всё свободное место нельзя: когда подсказок нет —
           а их нет почти всегда, — посреди окна оставалась дыра в треть
           экрана. Прокручивается вся форма целиком. */
        #addressSheet.address-form-open .address-form { overflow-y: auto; }
        #addressSheet.address-form-open .address-field { display: block; min-height: 0; flex: none; }
        #addressSheet.address-form-open .address-suggestions {
            position: static; max-height: 38vh; overflow-y: auto;
            border: 0; border-radius: 0; box-shadow: none;
        }
        #addressSheet.address-form-open .address-form-actions { flex: none; padding-bottom: 4px; }
        .address-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
        .address-row:last-child { border-bottom: none; }
        .address-row-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); }
        .address-row.selected .address-row-radio { border-color: var(--red); background: radial-gradient(circle, var(--red) 0 40%, transparent 42%); }
        .address-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .address-row-text b { font-size: 15px; font-weight: 700; color: var(--ink); }
        .address-row-text small { font-size: 12.5px; color: var(--muted); }
        .address-row-delete { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
        .address-row-delete:active { background: var(--bg); }
        .address-row-delete svg { width: 16px; height: 16px; }
        .address-list-empty { padding: 20px 4px; color: var(--muted); font-size: 14px; text-align: center; }
        .address-add-btn { width: 100%; justify-content: center; margin-top: 10px; border: 1px solid var(--line); color: var(--ink); background: var(--white); }
        /* «На карте» — второй способ заполнить ту же строку, а не отдельный
           шаг. Поэтому кнопка стоит внутри поля справа, а не полосой под ним:
           полоса во всю ширину спорила за внимание с «Сохранить адрес». */
        .address-map-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            height: 40px;
            padding: 0 14px;
            border: 0;
            border-radius: 10px;
            background: rgba(225,37,27,.08);
            color: var(--red);
            font-family: inherit;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
        }
        /* Метка та же, что стоит в центре самой карты: капля со скруглением
           трёх углов, повёрнутая острым концом вниз. */
        .address-map-btn::before {
            content: "";
            width: 11px;
            height: 11px;
            flex: none;
            margin-top: -2px;
            background: var(--red);
            border-radius: 50% 50% 50% 0;
            transform: rotate(-45deg);
        }
        /* Поле с подписью над ним: без подписи «Улица и дом» и «Ориентир»
           отличались только текстом-подсказкой, который исчезает при вводе. */
        .address-label { display: grid; gap: 7px; min-width: 0; }
        .address-label-text { font-size: 12.5px; font-weight: 800; color: var(--muted); }
        #addressFormInput { padding-right: 112px; }
        /* Переключатели «что присылать». Тумблер рисуем сами: это единственное
           место на сайте, где он нужен, а стандартный checkbox в списке
           разделов выглядел бы формой, а не настройкой. */
        .notify-group { margin: 18px 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
        .notify-row { width: 100%; }
        /* display обязателен: строчному элементу ширина и высота не задаются,
           и тумблер не рисовался вовсе — оставались одни подписи. */
        .notify-switch { display: block; flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--line); transition: background .18s ease; }
        .notify-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
        .notify-switch.on { background: var(--red); }
        .notify-switch.on::after { transform: translateX(18px); }
        .notify-note { margin: 14px 4px 0; font-size: 12.5px; color: var(--muted); }
        /* Шаблоны закупки: список карточек, у каждой — состав и две кнопки.
           Кнопки под корзиной стоят в ряд и обе спокойные: главная кнопка
           экрана — «Перейти к оформлению» внизу, спорить с ней нечему. */
        /* Кнопки под корзиной. Раньше это были две одинаковые серые кнопки во
           всю ширину, и какая из них главная, приходилось решать чтением.
           Теперь главная занимает строку, а «Открыть шаблоны» — значок рядом:
           открывают список куда реже, чем сохраняют набранное. */
        .cart-template-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
        .cart-template-save { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 1; min-width: 0; min-height: 46px; border: 1px solid var(--red); border-radius: 13px; background: rgba(225,37,27,.06); color: var(--red); font-size: 14px; font-weight: 700; }
        .cart-template-open { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--white); color: var(--ink); cursor: pointer; }
        .cart-template-row .ic-svg { width: 18px; height: 18px; flex: none; }
        .cart-template-open .ic-svg { width: 19px; height: 19px; }
        /* Шапка раздела: сколько шаблонов занято из двадцати. Раньше предел
           обнаруживался только отказом на двадцать первом. */
        .templates-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 4px 0 18px; flex-wrap: wrap; }
        .templates-lead { max-width: 520px; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
        .templates-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .templates-count { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 12px; font-weight: 800; color: var(--muted); }
        .templates-save { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 13px; font-size: 13.5px; font-weight: 700; }
        .templates-save .ic-svg { width: 18px; height: 18px; flex: none; }
        .template-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 14px; background: var(--white); }
        .template-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
        .template-title { min-width: 0; }
        .template-head b { display: block; font-size: 16px; line-height: 1.3; }
        .template-count { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
        /* Плашка состояния: собрать заказ можно и с ней, но человек должен
           узнать о замене и подорожании до нажатия, а не из корзины. */
        .template-chip { flex: none; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
        .template-chip-ok { background: #e8f7ef; color: #147647; }
        .template-chip-warn { background: #fff4e5; color: #b25e00; }
        .template-chip-red { background: rgba(225,37,27,.1); color: var(--red); }
        /* Позиции — строками с количеством справа: так список читается глазами
           сверху вниз, а не разбирается по запятым. */
        .template-items { display: grid; gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
        .template-line { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; background: var(--white); font-size: 13px; line-height: 1.4; }
        .template-line span { flex: 1; min-width: 0; color: var(--muted); }
        .template-line b { flex: none; color: var(--ink); }
        .template-rest { padding: 9px 12px; background: var(--white); font-size: 12.5px; font-weight: 700; color: var(--red); }
        .template-warning { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--red); border-radius: 0 11px 11px 0; background: rgba(225,37,27,.06); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
        .template-actions { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 14px; }
        .template-actions .btn { flex: 1; justify-content: center; min-height: 46px; padding: 12px; border-radius: 13px; font-size: 14px; white-space: nowrap; }
        .template-icon-btn { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--white); color: var(--muted); cursor: pointer; }
        .template-icon-btn .ic-svg { width: 20px; height: 20px; }
        .template-icon-btn:hover { border-color: var(--red); color: var(--red); }
        /* Пустой список — приглашение, а не сообщение об ошибке. */
        .template-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border: 1px dashed var(--line); border-radius: 16px; background: var(--white); }
        .template-empty b { font-size: 15px; }
        .template-empty p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
        .template-empty-btn { margin-top: 6px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font-size: 13.5px; font-weight: 700; }

        /* Воздуха между полем и кнопками: без него «Отмена» и «Сохранить адрес»
           липли к строке ввода и читались как часть поля. */
        .address-form { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }
        .address-form-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
        .address-form-lead { margin: 0; max-width: 560px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
        .address-form-aside { display: grid; gap: 12px; align-content: start; min-width: 0; }
        .address-form-note { margin: 0; padding: 14px 16px; border-left: 3px solid var(--red); border-radius: 0 14px 14px 0; background: var(--white); font-size: 12.5px; line-height: 1.6; color: var(--muted); }
        /* Подъезд, этаж, квартира — в строку: три коротких числа, каждому
           хватает трети ширины, а вертикально они съедали бы пол-экрана. */
        /* Форма адреса — три смысловые части: сам адрес, что разобрал
           справочник, и уточнения для курьера. Раньше всё шло одним столбцом
           с одинаковыми отступами, и семь блоков подряд читались стеной. */
        .address-form { gap: 14px; }
        /* Разобранный справочником адрес: это не поле ввода, а то, что
           показывают на проверку. Поэтому фон, а не рамка, и текст помельче. */
        /* Между строкой адреса и уточнениями воздуха больше, чем между самими
           уточнениями: это граница двух разных дел — «куда везти» и «как
           найти», — и она должна читаться без подписи. */
        .address-extra { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
        .address-extra-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
        /* Четыре коротких значения в ряд: подъезд, этаж, квартира, домофон.
           Каждому хватает четверти ширины, а столбиком они съедали бы
           пол-экрана. */
        .address-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
        .address-details label { display: grid; gap: 6px; min-width: 0; }
        .address-details label span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
        .address-details .co-input { min-width: 0; padding-left: 8px; padding-right: 8px; text-align: center; }
        /* Строка, которую увидит курьер, — целиком и сразу, пока адрес
           заполняют, а не потом из накладной. */
        .address-preview { padding: 14px; border-left: 3px solid var(--red); border-radius: 0 14px 14px 0; background: rgba(225,37,27,.06); }
        .address-preview-title { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
        .address-preview p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
        .address-extra .co-input { font-size: 14px; padding-top: 12px; padding-bottom: 12px; }
        /* Воздух перед нижними кнопками: без него «Отмена» и «Сохранить»
           липли к тому, что стоит над ними, и читались как продолжение. */
        .address-form-actions { display: flex; gap: 12px; margin-top: 10px; }
        /* «Сохранить адрес» длиннее «Отмены» и на узком экране ломался на две
           строки: даём ему больше места и запрещаем перенос. */
        .address-form-actions .btn { flex: 1; justify-content: center; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
        .address-form-actions .btn-primary { flex: 1.5; }
        .co-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
        .co-line:last-child { border-bottom: none; }
        .co-line b { font-weight: 700; white-space: nowrap; }
        .co-line-img { flex: none; width: 45px; height: 60px; border-radius: 12px; object-fit: cover; background: var(--bg); }
        .co-line-product { display: grid; min-width: 0; gap: 3px; flex: 1; }
        .co-line-name { line-height: 1.35; }
        .co-line-spec { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.35; }
        .co-summary-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
        .co-summary-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
        .co-summary-row span:last-child { max-width: 65%; overflow-wrap: anywhere; text-align: right; }
        .co-summary-discount span:last-child { color: var(--red); font-weight: 700; }
        .co-summary-row[hidden] { display: none; }
        .promo-checkout-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
        .promo-checkout-title small { color:var(--muted); font-size:11px; font-weight:650; }
        /* Промокод — компактная строка после доставки, без заголовка. */
        .co-promo-group { margin-top: -4px; }
        .promo-checkout-row { display: grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap: 6px; padding:4px; border:1.5px solid var(--line); border-radius:14px; background:#f7f8fa; transition:border-color .18s,background .18s; }
        .promo-checkout-row:focus-within { border-color:rgba(14,23,48,.38); background: var(--white); }
        /* Без text-transform: uppercase — из-за него и плейсхолдер «Введите
           промокод» рисовался капсом. Сам код приводим к верхнему регистру уже
           при отправке на сервер, а не визуально в поле. */
        .promo-checkout-row .co-input { min-width: 0; min-height:38px; padding:8px 12px; border:0; background:transparent; font-size:14px; }
        .promo-checkout-row .co-input:focus { border-color:transparent; }
        .promo-checkout-row .btn { flex: none; min-width:92px; min-height:38px; padding: 0 12px; border: 0; border-radius:11px; background: var(--brand-surface); color: #fff; font-size: 12.5px; font-weight: 800; justify-content:center; }
        .promo-checkout-row .btn:disabled { opacity:.55; }
        .promo-checkout-hint { margin: 9px 0 0; }
        .promo-checkout-hint.success { color: #147a46; }
        .promo-checkout-hint.error { color: var(--red); }
        .promotions-empty { margin-bottom: 12px; padding: 30px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); text-align: center; }
        .promotions-empty p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
        .promotions-empty b { display: block; margin-bottom: 7px; color: var(--navy); font-size: 16px; }

        /* ---- Фильтры категорий акций ---- */
        .promo-filter-chips { display: flex; gap: 8px; margin-bottom: 14px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
        .promo-filter-chips::-webkit-scrollbar { display: none; }
        .promo-filter-chip { flex: none; border: 1px solid var(--line); background: var(--white); color: var(--ink); padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .18s ease; }
        .promo-filter-chip.active { background: var(--brand-surface); border-color: var(--brand-surface); color: #fff; }
        .promo-row { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); transition: transform .15s ease; }
        .promo-row.has-target { cursor: pointer; }
        .promo-row.has-target:active { transform: scale(.98); }
        .promo-row-badge.long b { font-size: 11.5px; letter-spacing: -.2px; }
        .promo-row-code { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 4px 9px; border-radius: 7px; background: rgba(225,37,27,.09); color: var(--red); font: 700 11.5px inherit; letter-spacing: .3px; cursor: pointer; }
        .promo-row-code .ic-svg { width: 13px; height: 13px; }
        .promo-row-expiry { display: inline-flex; align-items: center; gap: 4px; color: #9098a8; font-size: 11px; }
        .promo-row-expiry .ic-svg { width: 12px; height: 12px; flex: none; }
        .promo-row-apply .ic-svg { width: 18px; height: 18px; }
        .promo-row-chevron .ic-svg { width: 18px; height: 18px; }
        /* ---- Витрина акций: название предложения и товары в горизонтальной карусели ---- */
        .promo-showcase-list { display: grid; gap: 14px; }
        .promo-showcase { overflow: hidden; border: 0; border-radius: 22px; background: var(--white); box-shadow: 0 10px 26px rgba(14,23,48,.14); }
        .promo-showcase-head { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 18px 16px 16px; background: linear-gradient(120deg, var(--brand-surface) 0%, var(--brand-surface-2) 55%, var(--red-dark) 130%); }
        .promo-showcase-head::after { content: ""; position: absolute; top: -40px; right: -26px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(225,37,27,.5), rgba(225,37,27,0) 70%); pointer-events: none; }
        .promo-showcase-badge { position: relative; z-index: 1; display: grid; flex: none; width: 60px; height: 60px; border-radius: 17px; color: var(--red); background: var(--white); box-shadow: 0 8px 18px rgba(0,0,0,.2); place-items: center; text-align: center; }
        .promo-showcase-badge b { font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.3px; } .promo-showcase-badge.long b { font-size: 13px; }
        .promo-showcase-title { position: relative; z-index: 1; min-width: 0; flex: 1; } .promo-showcase-scope { color: rgba(255,255,255,.75); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; } .promo-showcase-title h3 { margin: 3px 0 0; color: #fff; font-size: 17px; line-height: 1.2; } .promo-showcase-title p { margin: 5px 0 0; color: rgba(255,255,255,.72); font-size: 12.5px; line-height: 1.4; }
        .promo-showcase-apply { position: relative; z-index: 1; display: grid; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 12px; color: #fff; background: rgba(255,255,255,.16); place-items: center; cursor: pointer; } .promo-showcase-apply .ic-svg { width: 18px; height: 18px; }
        .promo-showcase-meta { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 14px 16px; }
        .promo-showcase-use { flex: 1 1 auto; min-width: 132px; padding: 10px 14px; border: 0; border-radius: 12px; color: #fff; background: var(--red); font: 800 12.5px inherit; cursor: pointer; }
        .co-foot { padding: 16px 20px calc(env(safe-area-inset-bottom) + 16px); background: var(--white); border-top: 1px solid var(--line); }
        /* padding-bottom без env(safe-area-inset-bottom): панель и так стоит НАД
           нижним меню, которое уже занимает безопасную зону — из-за двойного
           учёта между кнопкой «Перейти к оформлению» и нижним баром оставался
           лишний пустой отступ. */
        .cart-foot-fixed { display: none; flex-direction: column; position: fixed; z-index: 90; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); box-sizing: border-box; padding: 12px 20px 12px; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(14,23,48,.06); }
        #cart.active ~ .cart-foot-fixed.show { display: flex; }
        @media (min-width: 760px) { .cart-foot-fixed { left: 50%; width: min(720px, calc(100% - 32px)); transform: translateX(-50%); border-radius: 18px 18px 0 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } }
    
.bikra-captcha{display:flex;min-height:100px;justify-content:center;margin:2px 0 8px}

/* ---------- Тёмная тема: точечные доводки ----------
   Остальное уже переворачивается через переменные палитры. Здесь — места, где
   светлая поверхность задана полупрозрачным белым (нужна прозрачность + blur)
   или отдельным светлым оттенком, который нельзя выразить общей переменной. */
:root[data-theme="dark"] .tabbar { background: rgba(16, 22, 36, .86); }
@media (min-width: 760px) { :root[data-theme="dark"] .tabbar { background: rgba(16, 22, 36, .9); box-shadow: 0 -8px 28px rgba(0,0,0,.45); } }
:root[data-theme="dark"] .support-page-head { background: rgba(16, 22, 36, .96); }
:root[data-theme="dark"] .pr-float-btn { color: var(--ink); background: rgba(22, 29, 46, .88); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
/* Серые «пузыри» чата и поля ввода. */
:root[data-theme="dark"] .support-message.manager,
:root[data-theme="dark"] .support-form .co-input { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .support-form .co-input:focus { background: var(--surface-3); }
/* Бледно-красные подложки (счётчик в корзине, избранное, промо) на тёмном
   фоне должны быть приглушённо-красными, а не почти белыми. */
:root[data-theme="dark"] .cart-qty,
:root[data-theme="dark"] .ci-fav.active,
:root[data-theme="dark"] .cart-close { background: rgba(225, 37, 27, .16); }
:root[data-theme="dark"] .cart-qty button { background: var(--surface-2); }
:root[data-theme="dark"] .order-timeline span::before,
:root[data-theme="dark"] .order-timeline i { background: var(--surface-3); border-color: var(--surface-3); }
/* Полоска-«ручка» шторки. У элемента оба класса (.cart-grip[data-sheet-drag-handle]),
   поэтому отдельное правило с solid-заливкой перекрывало градиент и вместо
   тонкой линии рисовался прямоугольник 64×20 по центру шторки. Задаём только
   градиент — и для .cart-grip тоже, чтобы он не остался с solid-фоном. */
:root[data-theme="dark"] .cart-grip,
:root[data-theme="dark"] [data-sheet-drag-handle] { background: linear-gradient(transparent 8px, #3b4560 8px, #3b4560 13px, transparent 13px); }
/* Грип без drag-handle (обычная тонкая полоска высотой 4px) — ровная заливка. */
:root[data-theme="dark"] .cart-grip:not([data-sheet-drag-handle]) { background: #3b4560; }
/* Скелетоны и «блик» загрузки. */
:root[data-theme="dark"] .skeleton-card { background: var(--surface-2); }
/* Поля ввода и кнопки-«призраки». */
:root[data-theme="dark"] .co-input,
:root[data-theme="dark"] .promo-checkout-row,
:root[data-theme="dark"] .co-opt,
:root[data-theme="dark"] .profile-cancel-btn,
:root[data-theme="dark"] .address-add-btn { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .address-map-btn { background: transparent; color: var(--muted); border-color: var(--line); }
:root[data-theme="dark"] .co-input::placeholder { color: var(--muted); }
:root[data-theme="dark"] .search { background: var(--surface-2); }
:root[data-theme="dark"] .search input { color: var(--ink); }
:root[data-theme="dark"] .search input::placeholder { color: var(--muted); }
:root[data-theme="dark"] .fav-filter { background: var(--surface-2); }
/* Закреплённая строка поиска переливается не в белый, а в цвет фона страницы. */
:root[data-theme="dark"] .catalog-search-sticky { background: rgba(10, 15, 28, var(--pin, 0)); }
:root[data-theme="dark"] .catalog-search-sticky.pinned { box-shadow: 0 6px 16px rgba(0,0,0,.5); }

/* Настройки → Оформление: текущее значение справа от пункта меню и галочка
   у выбранной темы (как в системных настройках). */
.profile-menu-item .pmi-val { flex: none; color: var(--muted); font-weight: 600; font-size: 14px; }
.theme-option .theme-check { flex: none; color: var(--red); opacity: 0; }
.theme-option .theme-check svg { width: 20px; height: 20px; }
.theme-option.active .theme-check { opacity: 1; }
.theme-option.active .pmi-tx { color: var(--red); }

/* Акции: длинное описание сворачивается (на телефоне карточка иначе занимала
   пол-экрана), у автоматической акции вместо кода — пометка. */
.promo-showcase-desc.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo-showcase-more { position: relative; z-index: 1; margin-top: 5px; padding: 0; border: 0; background: transparent; color: #fff; font: 800 12px inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Плашка стоит в белой части карточки (.promo-showcase-meta), поэтому тёмный
   текст на светлой подложке, а не белый на белом. */
.promo-row-auto { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 800; }

/* ---------- Тёмная тема: контраст текста и «спокойный» красный ----------
   Разбор по скриншотам с реального устройства. */

/* Описание и «Применение» в карточке товара были жёстко #374151 — тёмно-серым
   по тёмному, читать невозможно. */
:root[data-theme="dark"] .pr-desc,
:root[data-theme="dark"] .pr-usage li { color: #C3CAD8; }

/* Счётчик ± в карточке товара: плашка была светло-розовой (#fff4f3), а кнопки
   внутри — var(--white), то есть тёмными. Получалось наоборот: светлая рамка с
   тёмными кнопками и невидимой цифрой. */
:root[data-theme="dark"] .product-cart-qty { background: rgba(225,37,27,.14); border-color: rgba(225,37,27,.3); }
:root[data-theme="dark"] .product-cart-qty button { background: var(--surface-2); border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .product-cart-qty b { color: var(--ink); }
:root[data-theme="dark"] .cart-qty button { border-color: rgba(255,255,255,.14); }

/* «Заказ отменён» — светлая плашка #fff0f0 с тёмно-красным текстом: на тёмном
   фоне светилась белым прямоугольником. */
:root[data-theme="dark"] .order-timeline.cancelled { background: rgba(225,37,27,.14); color: #F0938C; }
/* Пройденные шаги отслеживания подписаны var(--navy) — в тёмной теме это уже
   светлый цвет, но линию и точки нужно приглушить, иначе шкала «ломается». */
:root[data-theme="dark"] .order-timeline .done::before,
:root[data-theme="dark"] .order-timeline .done i { background: var(--red); border-color: var(--red); }
:root[data-theme="dark"] .order-timeline .current i { box-shadow: 0 0 0 4px rgba(225,37,27,.22); }

/* Зелёные и синие плашки-статусы задавались тёмными оттенками текста. */
:root[data-theme="dark"] .pr-availability { background: rgba(24,151,87,.18); color: #6FD79F; }
:root[data-theme="dark"] .cabinet-success { background: rgba(34,160,107,.16); color: #6FD79F; }
:root[data-theme="dark"] .order-success-ic { background: rgba(34,160,107,.18); color: #6FD79F; }
:root[data-theme="dark"] .promo-checkout-hint.success { color: #6FD79F; }
:root[data-theme="dark"] .msg-thread-support .msg-thread-ic { color: #7FA9F5; }

/* Красный в тёмной теме: тот же фирменный, но глубже и без «свечения».
   Чистый #E1251B на почти чёрном фоне бьёт по глазам, а красные тени вокруг
   каждой кнопки удваивали количество красного на экране. */
:root[data-theme="dark"] {
    --red: #C7382E;
    --red-dark: #9E2A22;
}
/* Убираем красные ореолы — тень остаётся, но нейтральная. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .cart-foot .btn-primary,
:root[data-theme="dark"] .product-cart-open,
:root[data-theme="dark"] .push-enable,
:root[data-theme="dark"] .notification-enable,
:root[data-theme="dark"] .promo-showcase-badge,
:root[data-theme="dark"] .ci-buy { box-shadow: 0 8px 22px rgba(0,0,0,.45); }
:root[data-theme="dark"] .eyebrow .dot,
:root[data-theme="dark"] .hit-badge,
:root[data-theme="dark"] .product-promo-badge,
:root[data-theme="dark"] .promo-row-badge { box-shadow: none; }
/* Приглушённый оттенок (#F0938C) остаётся у красных подписей, которые НЕ были
   перечислены — они спокойнее на тёмном фоне. */
:root[data-theme="dark"] .cart-close,
:root[data-theme="dark"] .cart-clear,
:root[data-theme="dark"] .notification-clear,
:root[data-theme="dark"] .promo-checkout-hint.error,
:root[data-theme="dark"] .cart-address-ic,
:root[data-theme="dark"] .theme-option.active .pmi-tx,
:root[data-theme="dark"] .theme-option .theme-check { color: #F0938C; }

/* А вот перечисленные элементы в тёмной теме должны светить ОБЫЧНЫМ фирменным
   красным (--red-bright = #E1251B), а не приглушённым тёмным: счётчик
   уведомлений, сердечки, плашки акций и скидок, «ХИТ», кнопки на главной,
   кнопка отправки в поддержке, галочки и хлебные крошки в карточке товара,
   полоски прогресса активного заказа. */
:root[data-theme="dark"] .pr-cat,
:root[data-theme="dark"] .price-off,
:root[data-theme="dark"] .pr-usage li::before,
:root[data-theme="dark"] .pr-promo-ic,
:root[data-theme="dark"] .ci-fav.active,
:root[data-theme="dark"] .card-favorite.active,
:root[data-theme="dark"] .fav-filter.active,
:root[data-theme="dark"] .pr-float-btn.active { color: var(--red-bright); }
:root[data-theme="dark"] .price-off { background: rgba(225,37,27,.18); }
:root[data-theme="dark"] .ci-fav.active { background: rgba(225,37,27,.16); }
:root[data-theme="dark"] .notification-count,
:root[data-theme="dark"] .hit-badge,
:root[data-theme="dark"] .product-promo-badge,
:root[data-theme="dark"] #home .btn-primary,
:root[data-theme="dark"] .support-form .btn.btn-primary,
:root[data-theme="dark"] .poc-progress i.done { background: var(--red-bright); }
:root[data-theme="dark"] .order-timeline .done::before,
:root[data-theme="dark"] .order-timeline .done i { background: var(--red-bright); border-color: var(--red-bright); }
/* Подписи, которые на красной/тёмной подложке должны быть белыми, а не красными:
   быстрые ответы в поддержке, «Ближайший пункт» с иконкой, «Купить» в корзине,
   а также цифры и знаки ± в счётчиках. */
:root[data-theme="dark"] .co-nearest,
:root[data-theme="dark"] .co-nearest span { color: #fff; }
:root[data-theme="dark"] .ci-buy { color: #fff; }
:root[data-theme="dark"] .cart-qty button,
:root[data-theme="dark"] .product-cart-qty button { color: #fff; }

/* Доaудит: остальные жёстко заданные светлые плашки, которые в тёмной теме
   светились белыми/розовыми пятнами (нашёл проходом по всем hex-цветам в CSS). */
:root[data-theme="dark"] .fav-filter.active { background: rgba(225,37,27,.16); border-color: rgba(225,37,27,.3); }
/* Только НЕзаполненные деления: правило с :root[data-theme] специфичнее, чем
   `.poc-progress i.done`, и без второй строки закрашивало заполненную часть
   тоже — шкала активного заказа выглядела «сломанной» (пустой). */
:root[data-theme="dark"] .poc-progress i { background: var(--surface-3); }
:root[data-theme="dark"] .poc-progress i.done { background: var(--red); }
:root[data-theme="dark"] .profile-menu-item:active { background: var(--surface-2); }
:root[data-theme="dark"] .my-order-comment { background: var(--surface-2); }
:root[data-theme="dark"] .my-order-cancel-reason { background: rgba(225,37,27,.13); color: var(--ink); }
:root[data-theme="dark"] .cart-close { background: rgba(225,37,27,.16); color: var(--red); }
:root[data-theme="dark"] .ci-fav.active { background: rgba(225,37,27,.16); }
:root[data-theme="dark"] .material-calculator-add:disabled { background: var(--surface-3); }
:root[data-theme="dark"] .co-nearest { background: var(--surface-2); }
:root[data-theme="dark"] .support-attachment { background: var(--surface-2); }
/* Скелетон загрузки — «блик» по тёмной подложке, а не по белой. */
:root[data-theme="dark"] .skeleton-shine { background: linear-gradient(100deg, var(--surface-2) 20%, var(--surface-3) 40%, var(--surface-2) 60%); }
/* Иконки-кнопки в корзине и «мелкие» серые кнопки. */
:root[data-theme="dark"] .cart-tool-btn,
:root[data-theme="dark"] .ci-icon-btn { background: var(--surface-2); color: #9AA3B5; }

/* Уменьшаем количество красного: в кадре корзины сплошным красным была и кнопка
   «Купить» у каждого товара, и главная «Перейти к оформлению» — три-четыре
   красных пятна на экран. Оставляем сплошной красный только главному действию,
   «Купить» у товара делаем контурной. */
:root[data-theme="dark"] .ci-buy {
    background: transparent; color: #fff;
    border: 1.5px solid rgba(225,37,27,.42); box-shadow: none;
}
:root[data-theme="dark"] .ci-buy:active { background: rgba(225,37,27,.14); }
/* Рамка счётчика ± тоже была слишком «звонкой». */
:root[data-theme="dark"] .cart-qty { background: rgba(225,37,27,.1); border-color: rgba(255,255,255,.1); }
:root[data-theme="dark"] .product-cart-qty { border-color: rgba(255,255,255,.12); }

/* ---------- Закреплённые шапки экранов ----------
   Тот же принцип, что у строки поиска в каталоге: при прокрутке длинного списка
   шапка остаётся сверху, а под строкой статуса появляется фон — иначе время,
   сеть и батарея сливались с проезжающим под ними контентом. */
.sticky-head {
    position: sticky; top: 0; z-index: 6;
    background: var(--bg);
    /* Свой composite-слой: без него при быстром скролле сквозь шапку
       «пробивались» позиционированные элементы карточек (плашки скидок). */
    transform: translateZ(0);
    transition: box-shadow .25s ease;
}
.sticky-head.pinned { box-shadow: 0 6px 16px rgba(8,14,34,.08); }
:root[data-theme="dark"] .sticky-head.pinned { box-shadow: 0 6px 16px rgba(0,0,0,.5); }
/* Шапка внутри .sticky-head уже получает отступ безопасной зоны от .page-head —
   второй раз его добавлять не нужно. */
.sticky-head .page-head { padding-bottom: 8px; }
.sticky-head .cart-toolbar { padding: 0 20px 10px; }

/* Полоса под строкой статуса для экранов без своей закреплённой шапки (главная,
   «Сообщения», «Акции»): появляется, только когда страница прокручена. */
.status-scrim {
    position: fixed; top: 0; left: 0; right: 0; z-index: 4;
    height: var(--safe-top);
    background: var(--bg);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
body.scrolled .status-scrim { opacity: 1; }
/* На главной вверху лежит тёмное видео героя — там своя тёмная подложка. */
body[data-active-screen="home"] .status-scrim { background: var(--brand-surface); }

/* ---------- Чат поддержки на iOS: строка ввода строго над клавиатурой ----------
   #support.active — слой фиксированной высоты (её задаёт setKb по visualViewport),
   внутри flex-колонка: шапка, список сообщений, строка ввода. Когда открыта
   клавиатура, свободной высоты мало, и любой лишний расход её «выдавливает»
   строку ввода за нижний край. Именно это и произошло после ввода --safe-top:
   в нативной оболочке шапка стала выше на безопасную зону (в вебе env() = 0, а в
   нативе минимум 30px), плюс список сообщений держал min-height: 100px.
   Пока клавиатура открыта, снимаем оба расхода — только на iOS (и в приложении, и в Safari/PWA) и
   только на экране поддержки. */
html.ios-device body.keyboard-open #support.active .page-head { padding-top: 10px; }
html.ios-device body.keyboard-open #support.active .support-messages { min-height: 0; }

/* ── СРАВНЕНИЕ ТОВАРОВ (интерфейс приложения) ─────────────────────────
   На сайте у сравнения своя вёрстка (assets/site.css) — здесь нативный вид:
   плашка над нижними вкладками, экран с колонками товаров и таблицей. */
.compare-bar {
    position: fixed; z-index: 60; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
    display: flex; align-items: center; gap: 10px; padding: 12px 18px; white-space: nowrap;
    border: 0; border-radius: 16px; background: var(--brand-surface); color: #fff;
    font: 800 14px var(--sans); box-shadow: 0 10px 26px rgba(8,14,34,.28);
    transform: translate3d(-50%, 0, 0); cursor: pointer;
}
.compare-bar[hidden] { display: none; }
.compare-bar-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); font-size: 12px; }
.compare-bar-go { font-size: 16px; }

.compare-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 12px; }
.compare-diff { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.compare-diff input { width: 18px; height: 18px; accent-color: var(--red); }
.compare-clear { appearance: none; -webkit-appearance: none; padding: 0; border: 0; background: none; color: var(--red); font: 700 14px var(--sans); cursor: pointer; }
/* Колонки и таблица прокручиваются вбок вместе: у строки характеристики и
   у столбца товара должна быть одна ширина. */
.compare-scroll { overflow-x: auto; padding: 0 20px 24px; scrollbar-width: none; }
.compare-scroll::-webkit-scrollbar { display: none; }
.compare-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 12px; min-width: min-content; }
.compare-col { position: relative; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.compare-col img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; background: var(--surface-3); }
.compare-col-name { margin-top: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.compare-col-spec { margin-top: 3px; font-size: 12px; color: var(--muted); }
.compare-col-price { margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
.compare-col-open { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--red); font: 700 12.5px var(--sans); cursor: pointer; }
.compare-col-remove { position: absolute; z-index: 1; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(14,23,48,.55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.compare-table { min-width: min-content; margin-top: 16px; border-collapse: collapse; font-size: 13px; }
.compare-table th { width: 150px; padding: 10px 12px 10px 0; text-align: left; font-weight: 600; color: var(--muted); vertical-align: top; }
.compare-table td { width: 156px; padding: 10px 12px 10px 0; color: var(--ink); vertical-align: top; }
.compare-table tr + tr th, .compare-table tr + tr td { border-top: 1px solid var(--line); }
.compare-diff-row td { font-weight: 700; }
.compare-nodiff { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.compare-empty { padding: 46px 20px; text-align: center; color: var(--muted); }
.compare-empty .ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background: var(--surface-2); color: var(--red); }
.compare-empty .ic .ic-svg { width: 28px; height: 28px; }
.compare-empty b { display: block; font-size: 17px; color: var(--ink); }
.compare-empty p { margin: 8px 0 16px; font-size: 14px; line-height: 1.5; }
.compare-empty-go { padding: 12px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--red); font: 800 14px var(--sans); cursor: pointer; }
.pr-float-btn.active { color: var(--red); }

/* ── «СООБЩИТЬ О ПОСТУПЛЕНИИ» (вид приложения) ────────────────────────
   Кнопка под строкой наличия в карточке товара. На сайте у неё свой вид
   (см. site.css) — там она стоит в колонке покупки рядом с ценой. */
.pr-restock {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 10px 0 0; padding: 13px 16px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--white);
    color: var(--ink); font: 800 14px var(--sans); cursor: pointer;
}
.pr-restock .ic-svg { width: 18px; height: 18px; color: var(--red); }
.pr-restock:active { transform: scale(.98); }
.pr-restock.done { border-color: rgba(34,160,107,.4); background: rgba(34,160,107,.08); color: #22a06b; }
.pr-restock.done .ic-svg { color: #22a06b; }
.pr-restock[disabled] { opacity: .6; }
/* Поле ввода в диалоге askAppPrompt — по ширине окна, с отступом от текста. */
.app-alert-input { width: 100%; margin: 4px 0 14px; }

/* ── ФИЛЬТРЫ КАТАЛОГА (вид приложения) ───────────────────────────────
   Кнопка над лентой и шторка снизу — так же, как открываются корзина и
   заявка. На сайте у того же отбора своя вёрстка: колонка фильтров на
   странице категории (assets/site.css), ядро общее — window.bikraFilters. */
.catalog-filter-row { display: flex; align-items: center; gap: 10px; padding: 0 20px 12px; }
.catalog-filter-row[hidden] { display: none; }
.catalog-filter-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;
}
.catalog-filter-open svg { width: 17px; height: 17px; }
.catalog-filter-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; line-height: 1; place-items: center; }
.catalog-filter-reset { padding: 10px 6px; border: 0; background: none; color: var(--red); font: 700 13.5px var(--sans); cursor: pointer; }

.catalog-filter-sheet { display: flex; flex-direction: column; max-height: 86vh; }
.catalog-filter-body { flex: 1; overflow-y: auto; padding: 0 20px 8px; }
.catalog-filter-group { padding: 14px 0; border-top: 1px solid var(--line); }
.catalog-filter-group:first-child { border-top: 0; }
.catalog-filter-group h4 { margin: 0 0 8px; font: 800 12.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.catalog-filter-option { display: flex; align-items: center; gap: 10px; padding: 9px 8px; margin: 0 -8px; border-radius: 12px; cursor: pointer; }
.catalog-filter-option:active { background: var(--surface-2); }
.catalog-filter-option input { width: 19px; height: 19px; flex: none; margin: 0; accent-color: var(--red); }
.catalog-filter-option span { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink); }
.catalog-filter-option i { flex: none; font-style: normal; font-size: 12.5px; color: var(--muted); }
.catalog-filter-option.off { opacity: .45; }
.catalog-filter-more { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--red); font: 700 13px var(--sans); cursor: pointer; }
.catalog-filter-foot { flex: none; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.catalog-filter-foot .btn { width: 100%; justify-content: center; }

/* Тёмная тема для новых блоков карточки и поддержки: цвета берутся из
   переменных темы, а не из светлой палитры. */
:root[data-theme="dark"] .pr-variant { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .pr-variant.active { color: #ff6b60; border-color: #ff6b60; box-shadow: inset 0 0 0 1px #ff6b60; }
:root[data-theme="dark"] .pr-order-request-call { background: var(--surface-2); color: var(--ink); }
        /* Второй шаг зелёный и в тёмной теме: правило выше перекрашивало его
           обратно в серую поверхность. */
        :root[data-theme="dark"] .pr-order-request-call.ready { background: #12a150; color: #fff; }
:root[data-theme="dark"] .pr-preorder-buy { background: var(--surface-3); color: var(--ink); }
:root[data-theme="dark"] .support-offer { background: var(--white); color: var(--ink); }
:root[data-theme="dark"] .support-manager-card { background: var(--white); }

        /* Необязательные уведомления: карточка с пояснением и кнопкой в
           «Сообщениях» и «Поддержке». На компьютере разделы работают и без
           них, поэтому это предложение, а не преграда. */
        .push-optional { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
        .push-optional-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
        .push-optional-text b { font-size: 14.5px; }
        .push-optional-text span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
        .push-optional-btn { flex: none; border: none; border-radius: 12px; padding: 11px 16px; background: var(--red); color: #fff; font: 700 13px 'PT Sans', sans-serif; cursor: pointer; }
        .push-optional-btn:disabled { background: var(--muted); cursor: default; }

        /* Оформление шагами — как в приложении: карточка на каждый шаг,
           номер в кружке у заголовка. Разметка общая с сайтом, поэтому
           вид один и там, и там. */
        .co-step { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card); }
        .co-step + .co-step, .co-step + .co-group, .co-group + .co-step { margin-top: 10px; }
        .co-step-title { display: flex; align-items: center; gap: 9px; }
        .co-step-num { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--red-soft, rgba(225,37,27,.12)); color: var(--red); font-size: 12.5px; font-weight: 800; }
        .co-secure { margin: 8px 0 0; text-align: center; color: var(--muted); font-size: 11.5px; }

        /* Сообщения по виду приложения: карточка поддержки сверху, заголовок
           «ВСЕ сообщения» и кнопка «Прочитать всё» под списком веток. */
        .msg-support-card { margin-bottom: 14px; padding: 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0E1730 0%, #14213D 62%, #8E1610 165%); box-shadow: 0 14px 30px rgba(14, 23, 48, .26); }
        .msg-support-top { display: flex; align-items: center; gap: 11px; }
        .msg-support-ic { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18); }
        .msg-support-ic .ic-svg { width: 20px; height: 20px; color: #fff; }
        .msg-support-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #1FBF5C; border: 2.5px solid #14213D; }
        .msg-support-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .msg-support-copy b { font-size: 15px; }
        .msg-support-copy span { color: #7FE0A4; font-size: 11.5px; }
        .msg-support-actions { display: flex; gap: 8px; margin-top: 14px; }
        .msg-support-chat, .msg-support-call { flex: 1; display: grid; place-items: center; height: 44px; border: 0; border-radius: 12px; font: 700 13.5px 'PT Sans', sans-serif; cursor: pointer; text-decoration: none; }
        .msg-support-chat { background: var(--red); color: #fff; }
        .msg-support-call { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
        .msg-all-title { margin: 18px 0 10px; font: 700 16px 'PT Sans Narrow', sans-serif; text-transform: uppercase; color: var(--navy); }
        .msg-all-title span { color: var(--red); }
        .msg-read-all-btn { display: block; width: 100%; margin: 12px auto 0; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--muted); font: 700 13px 'PT Sans', sans-serif; cursor: pointer; }
        /* Значки веток разноцветные — как в приложении: поддержка красная,
           заказы тёмно-синие, акции зелёные. */
        .msg-thread-support .msg-thread-ic { background: var(--red); color: #fff; }
        /* Тёмно-синий здесь фирменный и одинаковый в обеих темах — это
           плитка значка, а не фон интерфейса, поэтому берём цвет напрямую. */
        .msg-thread-orders .msg-thread-ic { background: #14213D; color: #fff; }
        .msg-thread-promo .msg-thread-ic { background: #1B9A4B; color: #fff; }

        /* «Для компании» в кабинете: та же карточка, что у остальных данных
           профиля, — вид кабинета сайта не меняется. */
        .profile-business-card { margin-top: 10px; }
        .profile-business-title { margin-bottom: 8px; font: 700 15px 'PT Sans', sans-serif; color: var(--navy); }
        .profile-business-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

        /* Шапка поддержки — как в приложении: значок с зелёной отметкой,
           кто отвечает и кнопка звонка. Переписка ниже прежняя. */
        .support-hero { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
        .support-hero-ic { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, #0E1730, #14213D 60%, #B71C13 160%); }
        .support-hero-ic .ic-svg { width: 18px; height: 18px; color: #fff; }
        .support-hero-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #1FBF5C; border: 2.5px solid var(--white); }
        .support-hero-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
        .support-hero-copy b { font-size: 15px; color: var(--navy); }
        .support-hero-copy span { color: #1B9A4B; font-size: 11.5px; }
        .support-hero-call { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--red); color: #fff; text-decoration: none; }
        /* Трубка на красной кнопке всегда белая: значок наследует цвет
           текста, а общее правило для .ic-svg перекрашивало его в чернильный
           — на светлой теме кнопка выглядела с чёрной иконкой. */
        .support-hero-call .ic-svg { width: 19px; height: 19px; color: #fff; fill: currentColor; stroke: currentColor; }

/* «Наша доставка» в карточке товара: срок считается по расстоянию от склада
   до адреса покупателя, за триста километров срок называет менеджер. */
.pr-own-delivery-box { display: block; margin-top: 10px; }
/* Между «Купить сейчас» и следующей кнопкой такой же воздух, как дальше. */
.pr-buy-now + .pr-own-delivery-box, .pr-buy-now + .pr-express { margin-top: 10px; }
.pr-own-delivery {
    display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
    color: var(--text); font: 700 14px var(--sans); text-align: center; cursor: pointer;
}
.pr-own-delivery small { color: var(--muted); font-size: 12px; font-weight: 600; }
.pr-own-delivery:hover { border-color: var(--red); }
.pr-own-delivery.is-far small { color: var(--muted); }

/* Отдельная страница отзыва: одно дело на экране — товар, оценка, текст.
   Раньше форма пряталась внизу карточки товара, и до неё надо было
   догадаться пролистать. */
.rv-page { position: fixed; inset: 0; z-index: 260; overflow-y: auto; background: var(--bg); }
.rv-page-in { width: min(720px, 100%); margin: 0 auto; padding: calc(var(--safe-top) + 14px) 18px 40px; }
.rv-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rv-page-head b { font-size: 18px; }
.rv-page-back { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; }
.rv-page-product { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.rv-page-product img { flex: none; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--surface-3); }
.rv-page-product b { display: block; font-size: 15px; }
.rv-page-product span { color: var(--muted); font-size: 13px; }
.rv-page .rv-form { margin: 0; }

/* «Показать ещё» под лентой: дальше первых страниц каталог не растёт сам —
   иначе в документе накапливаются тысячи карточек и всё начинает подтормаживать. */
.feed-more { display: block; width: min(100%, 320px); margin: 16px auto 8px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); font: 700 15px inherit; cursor: pointer; }
/* Код заказа на выдачу: полосы Code 39 на белом — сканер читает их с экрана
   телефона так же, как с этикетки. Показывается только у самовывоза и только
   когда заказ готов. */
.my-order-code { display: grid; justify-items: center; gap: 6px; margin: 10px 0 2px; padding: 12px; border-radius: 14px; background: #fff; }
.my-order-code span { font: 800 10px/1 var(--sans, inherit); letter-spacing: 1px; color: #69758a; }
.my-order-code b { font-size: 15px; letter-spacing: 2px; color: #0e1730; }
.my-order-barcode { width: 100%; height: 58px; }

/* Ожидание ответа курьерской службы. Цена приходит через секунду-две, и
   замерший текст «считаем…» читался как зависшая кнопка: точки бегут, пока
   ждём, и исчезают вместе с ответом. Само слово не мигает — мигающая надпись
   на кнопке раздражает; движутся только точки. */
.pr-express-waiting::after {
    content: "…";
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: pr-express-dots 1.2s steps(4, end) infinite;
    clip-path: inset(0 100% 0 0);
}
@keyframes pr-express-dots {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
    .pr-express-waiting::after { animation: none; clip-path: none; }
}

/* Отправление Ozon в карточке заказа покупателя. Номер и пункт выдачи он
   раньше не видел вовсе: они сохранялись только в панели управления, и человек
   не знал, куда ехать и что отслеживать, — хотя Ozon уже вёз его заказ. */
.my-order-ozon { display: grid; gap: 6px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 91, 255, .06); }
.my-order-ozon b { font-size: 13px; }
.my-order-ozon span { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .8; }
.my-order-ozon svg { flex: none; width: 15px; height: 15px; }
.my-order-ozon .product-action { justify-self: start; margin-top: 2px; }

/* Заказ уехал в Ozon: своих этапов у нас нет, вместо полоски — объяснение,
   где смотреть путь дальше. */
.order-timeline.handed { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(0, 91, 255, .06); font-size: 13px; line-height: 1.45; }