/* ══════════════════════════════════════════════════════════════
   common.css — единый источник правды для shared-компонентов.
   Подключается ВО ВСЕХ views ПЕРЕД page-specific CSS.
   Создано: 2026-04-08 (рефакторинг DRY, Фаза 3)
   ══════════════════════════════════════════════════════════════ */

/* 10.5 CSS Cascade Layers — декларируем порядок один раз здесь.
   Приоритет (от низкого к высокому): reset → tokens → components → pages → utilities.
   C-1/E-22: Migration ЗАВЕРШЕНА (2026-04-10). Все секции common.css в слоях:
   • @layer tokens    — :root (Design Tokens, CSS-переменные)
   • @layer components — loading, nav-progress, offline + bc, header, nav, toast, chat, more-sheet, drawer, ctree, footer
   • @layer reset     — global reset с [hidden] (!important)
   • @layer pages     — page-specific CSS (prod-*, cart, checkout, catalog, search)
   • @layer utilities — dark mode (переопределяет tokens) */
@layer reset, tokens, components, pages, utilities;

/* C-1/E-22: Step 3 — Design Tokens в @layer tokens.
   CSS-переменные в @layer доступны глобально (var() работает через все слои).
   Dark mode (@layer utilities) переопределяет эти же переменные — utilities > tokens. */
@layer tokens {

    /* ── Design Tokens ──────────────────────────────────────────── */
    :root {
        /* Accent (единый фиолетовый для всех страниц) */
        --accent: #8B5CF6;
        --accent-dark: #7C3AED;
        --accent-rgb: 139, 92, 246;
        /* UX-A:5.1 — RGB алиасы для rgba() в компонентах и dark mode */
        --danger-rgb: 239, 68, 68;
        --success-rgb: 16, 185, 129;
        --orange-rgb: 255, 140, 66;
        /* Home hero — тема-адаптивный: lavender→rose→sky (light), deep-purple (dark)
         * Light: near-white с whisper hue-shift — чистый холст для circuit SVG. Blob/glow/grid снижены — tech-вайб идёт от circuit, не от цветовых пятен. */
        --hero-from: #f8f6ff;
        --hero-to: #fdf8fb;
        --hero-end: #f5f7ff;
        --hero-text: #1a1030;
        --hero-text-rgb: 26, 16, 48;
        --hero-glass: rgba(255, 255, 255, .55);
        --hero-glass-border: rgba(0, 0, 0, .06);
        --hero-blob-op: .10;
        --hero-glow-op: .10;
        --hero-grid-op: .08;
        /* Circuit overlay — векторная плата поверх hero-градиента.
         * Light: едва заметный (.06) — не конкурирует с текстом.
         * Dark: атмосферный (.15) — tech-вайб без перегруза. */
        --hero-circuit-op: .14;

        /* CTA / действия */
        --orange: #FF8C42;
        --orange-dark: #FF6B35;
        --success: #10B981;
        --success-dark: #059669;
        /* UX-A:5.5/5.6 — тёмный success для градиентов */
        --danger: #EF4444;
        --warning: #F59E0B;
        /* H-2: авторитетный тёмно-красный (как Amazon/DNS) вместо кричащего малинового */
        --price-color: #D92B3A;
        /* На будущее: --price-sale: #ff2465 — для перечёркнутых/скидочных цен */

        /* Нейтральные */
        --bg: #f5f5fa;
        --card: #fff;
        --text: #111;
        --text-muted: #888;
        --border: #e8e8ee;
        /* [DARK-1.1] --card-rgb для rgba() случаев (bottom-nav frosted glass и др.) */
        --card-rgb: 255, 255, 255;

        /* Semantic surfaces (карточки, бейджи, статусы) — M-7 */
        --accent-surface: #faf8ff;
        /* лёгкий фиолетовый фон (selected offer, friendly-summary) */
        --card-muted: #e4e4e9d6;
        /* серый фон карточки каталога */
        --danger-surface: #FEE2E2;
        /* фон ошибки */
        --warning-surface: #FEF3C7;
        /* фон предупреждения */
        --tag-blue-bg: #e0f0ff;
        --tag-blue-text: #0066cc;

        /* Container widths — H-1: единые токены для всех страниц */
        --container-wide: 1440px;
        /* каталог, header, breadcrumbs */
        --container-content: 1200px;
        /* продукт, похожие товары */
        --container-form: 800px;
        /* корзина, чекаут */

        /* Тени */
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);

        /* mix-blend-mode для фото товаров:
       multiply = белый фон фото сливается с серым фоном карточки.
       ВАЖНО: в dark mode multiply даёт чёрный цвет (тёмный фон × тёмное фото) → normal. */
        --blend-img: multiply;

        /* Lightbox: тема-зависимый фон (белый в light = совместим с multiply blend) */
        --lb-bg-rgb: 255, 255, 255;

        /* Layout: фиксированные элементы — UX-6.1: менять только здесь */
        --bottom-nav-h: 54px;
        /* высота .bottom-nav на мобиле (product page) */

        /* AUDIT-4.4: Radius scale — 4 значения покрывают все UI */
        --radius-sm: 8px;
        /* маленькие: теги, иконки, мини-img */
        --radius: 12px;
        /* стандарт: карточки, кнопки, инпуты */
        --radius-lg: 16px;
        /* крупные блоки: формы, summary, mobile footer */
        --radius-pill: 20px;
        /* pills: chips, badges */

        /* C-3/E-18: Алиасы УДАЛЕНЫ — все файлы переведены на канонические переменные.
       --bg-main→--bg, --card-bg→transparent, --text-main→--text, --border-color→--border */

        /* C-6/E-21: rgba-фоны через переменные — CLAUDE.md: цвета только через CSS vars */
        --overlay-dark: rgba(0, 0, 0, .06);
        /* header action bg (light) */
        --overlay-dark-hover: rgba(0, 0, 0, .1);
        /* header action hover */
        --overlay-light: rgba(255, 255, 255, .18);
        /* brand header action bg */
        --overlay-light-hover: rgba(255, 255, 255, .28);
        /* brand header action hover */
        --overlay-light-md: rgba(255, 255, 255, .2);
        /* brand header search + badge */
        --toast-bg: rgba(31, 31, 31, .96);
        /* toast + cart-toast */
        --toast-error-bg: rgba(176, 42, 55, .96);
        /* cart-toast ошибка */

        /* AUDIT-4.2/4.3: цвета на accent-фоне (cart-footer, кнопки на цветном bg) */
        --danger-on-accent: #fca5a5;
        /* warning текст на accent-фоне */
        --text-on-accent: rgba(255, 255, 255, .6);
        /* полупрозрачный белый на цветном фоне */
        /* ВАЖНО: --on-color — непрозрачный белый для текста кнопок на цветном фоне
       (accent/orange/success). НЕ МЕНЯТЬ в dark mode! --card тёмный в dark mode,
       а кнопки остаются цветными → текст должен быть белым в обеих темах. */
        --on-color: #fff;
        --on-color-rgb: 255, 255, 255;

        /* z-index scale — C-2/E-17: единая шкала, «magic numbers» запрещены.
       ВАЖНО: изменять только здесь, во всех CSS использовать var(--z-*). */
        --z-counter: 20;
        /* .p-slider-counter */
        --z-scroll-top: 50;
        /* .btn-scroll-top */
        --z-header: 100;
        /* .c-header */
        --z-cart-footer: 110;
        /* .cart-footer (> header, не конфликтует при коротком экране) */
        --z-filter-overlay: 200;
        /* .c-filter-overlay */
        --z-filter-drawer: 201;
        /* .c-filter-drawer */
        --z-chat-fab: 900;
        /* .chat-fab */
        --z-bottom-nav: 1000;
        /* .bottom-nav */
        --z-sticky-footer: 1100;
        /* .p-footer (mobile product) */
        --z-overlay: 1250;
        /* .catalog-overlay, .more-overlay */
        --z-drawer: 1251;
        /* .catalog-drawer, .more-sheet */
        --z-cart-toast: 1300;
        /* .cart-toast (> .p-footer, подтверждение добавления) */
        --z-toast: 2000;
        /* .toast (глобальный) */
        --z-lightbox: 3000;
        /* .p-lightbox */
        --z-loading: 9999;
        /* .app-loading */
        --z-progress: 10000;
        /* .nav-progress */
        --z-offline: 10001;
        /* .offline-banner */
    }

}

/* end @layer tokens */

/* C-1/E-22: Step 4 — Loading/Progress/Offline в @layer components.
   ВАЖНО: prefers-reduced-motion с !important остаётся в components —
   в инвертированном !important-порядке слоёв components > pages > utilities,
   т.е. accessibility-!important перебивает page-анимации (корректное поведение). */
@layer components {

    /* ── Loading Screen ─────────────────────────────────────────── */
    /* ВАЖНО: overlay закрывает контент до загрузки шрифтов.
   JS (_loading.php) прячет через fonts.load('Material Symbols Rounded') — точный детект.
   CSS-анимация 3s — аварийный фолбэк если JS не сработал.
   3s = font-display:block период (был optional с 100мс окном → FOUT при холодном кэше).
   JS прячет раньше (обычно <500ms), анимация — только страховка. */
    .app-loading {
        position: fixed;
        inset: 0;
        z-index: var(--z-loading);
        background: var(--bg, #f5f5fa);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: app-loading-fadeout 3s ease forwards;
    }

    @keyframes app-loading-fadeout {

        0%,
        80% {
            opacity: 1;
            visibility: visible;
        }

        100% {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
    }

    .app-loading.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        animation: none;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .app-loading__spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--border, #e8e8ee);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: app-spin .6s linear infinite;
    }

    @keyframes app-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ── Navigation Progress Bar ───────────────────────────────── */
    .nav-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background: var(--accent);
        z-index: var(--z-progress);
        width: 0;
        pointer-events: none;
    }

    .nav-progress.is-active {
        width: 70%;
        transition: width 8s cubic-bezier(.1, .05, .1, 1);
    }

    /* ── Offline Banner ────────────────────────────────────────── */
    .offline-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-offline);
        background: var(--danger, #EF4444);
        color: #fff;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 12px;
        transform: translateY(-100%);
        transition: transform .3s ease;
    }

    .offline-banner.is-visible {
        transform: translateY(0);
    }

}

/* end @layer components (loading/progress/offline) */

/* ── Global Reset ───────────────────────────────────────────── */
/* C-1/E-22: Step 2 — обёрнут в @layer reset (наименьший риск).
   ВАЖНО: !important внутри @layer reset имеет НАИВЫСШИЙ приоритет среди layered !important
   (порядок инвертирован). [hidden] продолжает корректно перебивать display:flex в pages. */
@layer reset {

    [hidden] {
        display: none !important;
    }

    /* ВАЖНО: единственное место для box-sizing, body, tap-highlight, link/list/button resets.
   Все page-specific CSS (prod-*, catalog, cart, checkout) НЕ должны дублировать это. */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    html {
        /* Фикс: резервируем место под scrollbar — без этого при появлении/исчезновении
       scrollbar viewport "прыгает" по ширине */
        overflow-y: scroll;
        scrollbar-gutter: stable both-edges;
        /* 10.1 Плавный скролл к якорям и scroll-into-view */
        scroll-behavior: smooth;
    }

    /* UX-3.3: дублирующий reduced-motion удалён — полная версия с animation-iteration-count в конце файла */

    html,
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        /* C-4/E-19: единый источник — page-specific CSS переопределяет только переменную,
       не перебивает body напрямую. Fallback 0 = никакого padding без page CSS. */
        padding-bottom: var(--body-pb, 0);
    }

    /* UX-4.1: :where() снижает специфичность (0,1,1)→(0,0,1).
   ВАЖНО: любой класс на ссылке теперь побеждает без костылей :visited.
   Поддержка: Chrome 88+, Safari 14+, Firefox 82+ — OK для 2026. */
    :where(a),
    :where(a):visited {
        text-decoration: none;
        color: inherit;
    }

    ul {
        list-style: none;
    }

    button,
    select {
        cursor: pointer;
        font: inherit;
        border: none;
        background: none;
    }

    button,
    a,
    [role="button"] {
        -webkit-touch-callout: none;
    }

    /* 10.2 Брендированное выделение текста (Linear/Stripe паттерн) */
    ::selection {
        background: rgba(var(--accent-rgb), .2);
        color: inherit;
    }

    /* 10.3 Тонкий scrollbar в стиле macOS — избавляемся от "Windows XP" скроллбара */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        /* [CSS-3.3] rgba(0,0,0,.15) невидим на тёмном фоне → нейтральный серый виден в обеих темах */
        background: rgba(128, 128, 128, .3);
        border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(128, 128, 128, .5);
    }

    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 128, 128, .3) transparent;
    }

    button:focus,
    button:active,
    a:focus,
    a:active {
        outline: none;
    }

}

/* end @layer reset */

/* C-1/E-22: Step 5 — Shared Components (bc, header, nav, toast, chat, drawer, ctree, footer).
   @layer components < @layer pages — page CSS корректно переопределяет shared стили. */
@layer components {

    /* ── Breadcrumbs (pill chips) ───────────────────────────────── */
    .bc {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        font-size: 12px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        justify-content: flex-start;
    }

    .bc::-webkit-scrollbar {
        display: none;
    }

    .bc a,
    .bc>span {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 99px;
        text-decoration: none;
        background: var(--border);
        /* M-1+M-7: #ebebf0 → var(--border) — контраст 7:1 */
        color: var(--text-muted);
        /* [CSS-3.2] #555 → var() — в dark #555 нечитаем (1.5:1) */
        line-height: 1.2;
        /* 6.1 Добавлен transform для subtle lift-эффекта */
        transition: background .15s, color .15s, transform .15s;
    }

    /* 6.1 Фикс: было var(--border) — тот же цвет, hover не виден.
   [DARK-1.2] #d8d8df → var(--border) — в dark mode hardcoded светлый = выбивается */
    .bc a:hover {
        background: var(--border);
        filter: brightness(.92);
        color: var(--text);
        transform: translateY(-1px);
    }

    /* Текущая страница — accent-плашка.
   ВАЖНО: .bc__current — BEM-класс из _header.php, дублирует :last-child для надёжности */
    .bc> :last-child,
    .bc__current {
        background: var(--accent);
        color: #fff;
        font-weight: 500;
    }

    /* Кликабельная текущая крошка — accent с затемнением на hover */
    .bc a.bc__current:hover {
        background: var(--accent);
        filter: brightness(.84);
        color: #fff;
    }

    /* SEARCH-BC: clearable chip — «Поиск: query ✕»
       Клик → /search без запроса: мобилка авто-оверлей, десктоп фокус инпут.
       ВАЖНО: переопределяем .bc a (inline-block) и .bc a:hover (border-bg) — иначе сломает accent-цвет */
    .bc .bc__current--clear {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .bc .bc__current--clear:hover {
        background: var(--accent);
        filter: brightness(.84);
        color: #fff;
    }

    .bc__clear {
        display: inline-flex;
        align-items: center;
        opacity: .75;
        transition: opacity .12s;
    }

    .bc__clear .material-symbols-rounded {
        font-size: 14px;
    }

    .bc .bc__current--clear:hover .bc__clear {
        opacity: 1;
    }

    /* ВАЖНО: .bc--page — единый контейнер крошек на всех страницах (вне layout-контейнеров) */
    .bc--page {
        max-width: var(--container-wide);
        /* H-1: 1440px → переменная */
        margin: 0 auto;
    }

    /* C-1: крупнее на десктопе — 12px на full HD мониторе читается как «мелкий шрифт договора» */
    @media (min-width: 769px) {
        .bc {
            font-size: 13px;
        }

        .bc a,
        .bc>span {
            padding: 6px 14px;
        }
    }

    /* ── Header (sticky, shared across all pages) ────────────── */
    .c-header {
        position: sticky;
        top: 0;
        z-index: var(--z-header);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .c-header__back,
    .c-header__cart,
    .c-header__theme {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: var(--text);
        /* M-7: #333 → var(--text) */
        transition: background .15s;
        position: relative;
        text-decoration: none;
    }

    .c-cart-badge {
        position: absolute;
        top: -2px;
        right: -4px;
        background: var(--accent);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }

    .c-cart-badge--bounce {
        animation: badge-bounce .5s cubic-bezier(.34, 1.56, .64, 1);
    }

    .c-header__cart--shake .material-symbols-rounded {
        animation: cart-shake .4s ease;
    }

    /* M-8: мягче — scale(1.5) было слишком агрессивно, 1.2 выглядит premium */
    @keyframes badge-bounce {
        0% {
            transform: scale(1);
        }

        40% {
            transform: scale(1.2);
        }

        70% {
            transform: scale(0.95);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes cart-shake {

        0%,
        100% {
            transform: rotate(0);
        }

        20% {
            transform: rotate(-12deg);
        }

        40% {
            transform: rotate(10deg);
        }

        60% {
            transform: rotate(-6deg);
        }

        80% {
            transform: rotate(3deg);
        }
    }

    /* 5.1 Фикс: было var(--bg) = фон хедера → hover не виден.
   Заменяем на rgba overlay — универсально для любого фона.
   UX-A:1.4 — чёрный rgba(0,0,0) невидим на тёмном фоне → нейтральный серый (виден на обоих темах) */
    .c-header__back:hover,
    .c-header__cart:hover,
    .c-header__theme:hover {
        background: rgba(128, 128, 128, .12);
    }

    /* Брендированный хедер: белый overlay поверх accent-фона */
    .c-header--brand .c-header__back:hover,
    .c-header--brand .c-header__cart:hover,
    .c-header--brand .c-header__theme:hover {
        background: rgba(255, 255, 255, .15);
    }

    /* [2.1] Слот для дополнительных действий в хедере (напр. «Очистить» на корзине) */
    .c-header__action {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 7px 12px;
        border-radius: 20px;
        border: none;
        background: var(--overlay-dark);
        color: var(--text);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background .15s;
        white-space: nowrap;
    }

    .c-header__action:hover {
        background: var(--overlay-dark-hover);
    }

    .c-header--brand .c-header__action {
        background: var(--overlay-light);
        color: #fff;
    }

    .c-header--brand .c-header__action:hover {
        background: var(--overlay-light-hover);
    }

    .c-header__action .material-symbols-rounded {
        font-size: 18px;
    }

    /* Текст кнопки действия: скрыт на узких экранах */
    .c-header__action-text {
        display: none;
    }

    @media (min-width: 380px) {
        .c-header__action-text {
            display: inline;
        }
    }

    /* Иконка темы — плавный spin при переключении */
    .c-header__theme .material-symbols-rounded {
        transition: transform .3s ease;
    }

    .c-header__theme:active .material-symbols-rounded {
        transform: rotate(30deg);
    }

    /* H-2: Логотип всегда видим (и на мобилке, и на десктопе).
   ВАЖНО: убрали display:none — лого показывается на всех страницах для контекста бренда. */
    .c-header__logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    /* --show оставлен для обратной совместимости, логика скрытия убрана */
    .c-header__logo--show {
        display: flex;
    }

    /* H-2 Logo: inline SVG wordmark. 44px = высота кнопок (визуальная гармония).
       Ширина авто по aspect ratio (~92px). На мобилке тоже 44px — не влияет
       на высоту хедера (кнопки 44px уже задают min-height). */
    .c-header__logo svg {
        height: 44px;
        width: auto;
        display: block;
    }

    /* MOB-2: заголовок страницы в хедере (каталог → название раздела).
       Скрыт по умолчанию на десктопе (>767px) — там заголовок уже есть в .c-main__title.
       На мобиле показывается вместо логотипа — даёт контекст "где я". */
    .c-header__page-title {
        display: none;
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }

    /* MOB-2: на бренд-хедере текст белый */
    .c-header--brand .c-header__page-title {
        color: var(--on-color);
    }

    /* Брендированный хедер: фиолетовый фон, белые элементы */
    /* ВАЖНО: -webkit-font-smoothing: auto — antialiased делает белый на цветном тонким */
    .c-header--brand {
        background: var(--accent);
        border-bottom-color: var(--accent-dark);
        box-shadow: 0 2px 12px rgba(var(--accent-rgb), .3);
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
    }

    /* Фикс: логотип (SVG fill=currentColor) тоже должен быть белым на бренд-фоне */
    .c-header--brand .c-header__logo,
    .c-header--brand .c-header__cart,
    .c-header--brand .c-header__back,
    .c-header--brand .c-header__theme {
        color: var(--on-color);
    }

    .c-header--brand .c-header__search {
        background: var(--overlay-light-md);
        border-color: var(--overlay-light);
    }

    .c-header--brand .c-header__search span,
    .c-header--brand .c-header__search input {
        color: #fff;
    }

    .c-header--brand .c-header__search input::placeholder {
        color: rgba(255, 255, 255, .7);
    }

    .c-header--brand .c-cart-badge {
        background: #fff;
        color: var(--accent);
    }

    .c-header__search {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--bg);
        /* M-7: #f0f0f5 → var(--bg) */
        border-radius: 20px;
        padding: 8px 16px;
        min-width: 0;
        max-width: 1000px;
        /* 5.2 Focus ring: border прозрачный по умолчанию → при фокусе accent */
        border: 1px solid transparent;
        transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s;
    }

    /* 5.2 Focus ring в стиле Linear — тонкое свечение вокруг поиска */
    .c-header__search:focus-within {
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
        border-color: var(--accent);
    }

    /* Бренд-хедер: белый ring поверх accent-фона */
    .c-header--brand .c-header__search:focus-within {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .2);
        border-color: rgba(255, 255, 255, .4);
    }

    /* Иконка поиска — кликабельная кнопка для toggle exact mode */
    .c-header__search-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        border-radius: 50%;
        transition: background .15s, box-shadow .2s, transform .15s;
        flex-shrink: 0;
        outline: none;
    }

    /* UX: hover-подсветка — показываем что лупа = кнопка переключения режима */
    .c-header__search-icon:hover {
        background: rgba(255, 255, 255, .15);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
        transform: scale(1.1);
    }
    .c-header__search-icon:active {
        transform: scale(.95);
    }

    /* Фокус только для клавиатуры (Tab), не для мыши */
    .c-header__search-icon:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .c-header__search-icon .material-symbols-rounded {
        font-size: 22px;
    }

    /* Активный exact mode — иконка меняется через JS, доп. стилей не нужно */

    .c-header__search span {
        color: var(--text-muted);
        /* M-7: #888 → var(--text-muted) */
        font-size: 22px;
        flex-shrink: 0;
    }

    .c-header__search input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 16px;
        color: var(--text);
        /* M-7: #111 → var(--text) */
        min-width: 0;
        outline: none;
    }

    .c-header__search input::placeholder {
        color: var(--text-muted);
        /* M-7: #aaa → var(--text-muted) */
    }

    /* Скрываем нативный уродский OS-крестик — заменяем кастомной кнопкой */
    .c-header__search input::-webkit-search-cancel-button,
    .s-overlay__form input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    /* Кастомные кнопки очистки поиска — в стиле icon-кнопок проекта */
    .c-header__search-clear,
    .s-overlay__clear {
        display: none; /* по умолчанию скрыта */
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: none;
        background: none;
        color: var(--text-muted);
        border-radius: 50%;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: background .15s, color .15s;
    }
    .c-header__search-clear .material-symbols-rounded,
    .s-overlay__clear .material-symbols-rounded { font-size: 18px; }

    .c-header__search-clear:hover,
    .s-overlay__clear:hover {
        background: var(--overlay-dark);
        color: var(--text);
    }

    /* ВАЖНО: показываем кнопку только когда инпут не пустой — CSS :has(), без JS-visibility.
       :not(:placeholder-shown) = placeholder скрыт = в поле есть текст */
    .c-header__search:has(input[name="q"]:not(:placeholder-shown)) .c-header__search-clear,
    .s-overlay__form:has(input[type="search"]:not(:placeholder-shown)) .s-overlay__clear {
        display: flex;
    }

    /* ── Mobile Search Button ─────────────────────────────────────── */
    /* ВАЖНО: скрыта по умолчанию (desktop), показывается на мобиле через media query */
    .c-header__search-mob {
        display: none;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: none;
        color: var(--text);
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .15s;
    }

    .c-header__search-mob:hover {
        background: rgba(128, 128, 128, .12);
    }

    /* Brand-хедер: поиск без фона, цвет через --on-color (как остальные кнопки) */
    .c-header--brand .c-header__search-mob {
        background: none;
        color: var(--on-color);
    }

    .c-header--brand .c-header__search-mob:hover {
        background: rgba(255, 255, 255, .15);
    }

    /* ── Search Overlay ─────────────────────────────────────────────── */
    /* ВАЖНО: z-index выше хедера (--z-header:100), равен drawer (1251).
       position: fixed + inset:0 = полный экран поверх всего контента. */
    .s-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-drawer);
        background: var(--bg);
        display: flex;
        flex-direction: column;
    }

    /* Строка с кнопкой назад + форма поиска */
    .s-overlay__bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--card);
    }

    /* Кнопка «Назад» — закрывает overlay */
    .s-overlay__back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: none;
        color: var(--text);
        cursor: pointer;
        flex-shrink: 0;
        transition: background .15s;
    }

    .s-overlay__back:hover {
        background: var(--overlay-dark);
    }

    /* Форма внутри overlay — flex-контейнер с инпутом и exact-кнопкой */
    .s-overlay__form {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 4px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 6px 8px 6px 14px;
        transition: border-color .15s, box-shadow .15s;
    }

    .s-overlay__form:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
    }

    /* ВАЖНО: font-size 16px — iOS Safari не зумирует input при font-size ≥ 16px */
    .s-overlay__form input[type="search"] {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 16px;
        color: var(--text);
        outline: none;
        min-width: 0;
    }

    .s-overlay__form input[type="search"]::placeholder {
        color: var(--text-muted);
    }

    /* Кнопка переключения exact mode внутри overlay */
    .s-overlay__exact-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: none;
        color: var(--text-muted);
        border-radius: 50%;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .15s, color .15s, box-shadow .2s, transform .15s;
    }

    .s-overlay__exact-btn:hover {
        background: rgba(var(--accent-rgb), .12);
        color: var(--accent);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .08);
        transform: scale(1.1);
    }
    .s-overlay__exact-btn:active {
        transform: scale(.95);
    }

    .s-overlay__exact-btn--on {
        color: var(--accent);
        background: rgba(var(--accent-rgb), .1);
    }

    .s-overlay__exact-btn .material-symbols-rounded {
        font-size: 22px;
    }

    /* ── Autocomplete Dropdown ─────────────────────────────────────── */
    /* Контейнер dropdown — позиционируется relative к .c-header__search или .s-overlay__form */
    .ac-wrap {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
    }

    /* Dropdown список подсказок */
    .ac-drop {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        z-index: var(--z-filter-overlay);
        overflow: hidden;
        /* ВАЖНО: скрыт по умолчанию — JS добавляет .ac-drop--visible */
        display: none;
    }

    .ac-drop--visible {
        display: block;
    }

    /* Заголовок группы (Разделы / Товары) */
    .ac-group {
        padding: 8px 14px 4px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    /* Строка подсказки */
    .ac-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        cursor: pointer;
        color: var(--text);
        text-decoration: none;
        transition: background .1s;
        font-size: 14px;
        line-height: 1.3;
    }

    .ac-item:hover,
    .ac-item--active {
        background: rgba(var(--accent-rgb), .06);
    }

    /* Иконка в строке подсказки */
    .ac-item .material-symbols-rounded {
        font-size: 18px;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    /* Количество товаров в разделе */
    .ac-item__cnt {
        margin-left: auto;
        font-size: 12px;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    /* Цена товара */
    .ac-item__price {
        margin-left: auto;
        font-size: 13px;
        font-weight: 600;
        color: var(--price-color);
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Разделитель между группами */
    .ac-divider {
        height: 1px;
        background: var(--border);
        margin: 4px 0;
    }

    /* ── Responsive: мобильный поиск ─────────────────────────────────── */
    @media (max-width: 767px) {

        /* Скрываем desktop-форму, показываем иконку */
        .c-header__search {
            display: none !important;
        }

        .c-header__search-mob {
            display: flex;
        }

        /* Корзина скрыта на мобиле — уже есть в bottom-nav.
           Элемент остаётся в DOM для JS-анимаций (shake при add-to-cart) */
        .c-header__cart {
            display: none;
        }

        /* H-THEME: лого уменьшен — иначе доминирует над иконками back/search.
           44→36px: ширина SVG ~75px (aspect 2.08:1) → хедер выглядит balanced. */
        .c-header__logo svg {
            height: 36px;
        }

        /* MOB-2: показываем заголовок страницы, скрываем логотип когда title есть.
           :has() — если в хедере есть .c-header__page-title, значит страница передала заголовок. */
        .c-header:has(.c-header__page-title) .c-header__logo {
            display: none;
        }

        .c-header__page-title {
            display: block;
        }
    }

    /* Десктоп: логотип виден, стрелка скрыта, border-radius */
    @media (min-width: 960px) {

        /* HEADER-RESIZE: 20px padding = 84px высота (было 12px → 68px).
           32px по бокам — больше воздуха для premium-ощущения.
           gap: 12px — чуть просторнее чем мобильный 10px. */
        .c-header {
            max-width: 1440px;
            margin: 0 auto;
            border-radius: 0 0 1em 1em;
            padding: 20px 32px;
            gap: 12px;
        }

        .c-header__back {
            display: none;
        }

        .c-header__logo {
            min-width: 200px;
            display: flex;
        }

        /* HEADER-RESIZE: search bar пропорционально увеличен под 84px хедер.
           10px padding = ~42px высота (ближе к кнопкам 44px). */
        .c-header__search {
            padding: 10px 20px;
        }

        /* UX-A:10.2 — grid-хедер с колонкой под sidebar (catalog, search).
       ВАЖНО: управляется классом, а не page-specific CSS → нет cascade-зависимости от load order */
        /* H-THEME: grid-columns обновлены — тема убрана из хедера.
           logo(220px) | search(1fr) | cart(auto) | slot(auto)
           На каталоге back скрыт (display:none на desktop), не занимает колонку. */
        /* HEADER-UNIFY + RESIZE: padding совпадает со стандартным (20px 32px).
           Grid-колонки (220px) сохранены для выравнивания logo с sidebar каталога. */
        .c-header--sidebar-layout {
            display: grid;
            grid-template-columns: 220px 1fr auto auto;
            gap: 12px;
            padding: 20px 32px;
            align-items: center;
            margin-bottom: 10px;
        }
    }

    /* ── Bottom Navigation (mobile) ─────────────────────────────── */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-bottom-nav);
        display: flex;
        background: rgba(var(--card-rgb), 0.98);
        /* [DARK-1.2] #fff → var() — frosted glass в обеих темах */
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--border);
        padding: 8px 0 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: center;
    }

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 0;
        font-size: 10px;
        color: var(--text-muted);
        text-decoration: none;
        position: relative;
        /* 7.1 Добавлен transform — тактильный отклик на тап */
        transition: color .15s, transform .1s;
    }

    .nav-item .material-symbols-rounded {
        font-size: 24px;
    }

    .nav-item.active {
        color: var(--accent);
    }

    /* 7.1 Scale при тапе — "физическая" кнопка, мгновенный тактильный отклик */
    .nav-item:active {
        color: var(--text);
        /* UX-A:0.4 — было: #333, в dark mode чёрный на тёмном = невидимый */
        transform: scale(0.92);
    }

    .nav-label {
        font-size: 10px;
        font-weight: 500;
    }

    /* nav-icon-wrap — бабл крепится к иконке, не к nav-item */
    .nav-icon-wrap {
        position: relative;
        display: inline-flex;
    }

    .nav-badge {
        position: absolute;
        top: -4px;
        right: -6px;
        background: var(--price-color);
        /* H-2 + M-7: #FF2465 → var(--price-color) */
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        opacity: 0;
        transition: opacity .2s ease;
    }

    .nav-badge.show {
        opacity: 1;
    }

    .nav-badge:empty,
    .nav-badge[data-count="0"],
    #nav-cart-badge:empty,
    #nav-cart-badge[data-count="0"] {
        opacity: 0 !important;
    }

    /* Скрываем bottom-nav на десктопе */
    @media (min-width: 768px) {
        .bottom-nav {
            display: none;
        }
    }

    /* Ландшафт на мобилке — прячем bottom-nav, экран слишком короткий */
    @media (max-height: 450px) and (orientation: landscape) {
        .bottom-nav {
            display: none;
        }
    }

    /* ── Toast Notification ─────────────────────────────────────── */
    /* Решение 4.4=A: bottom:145px (над bottom-nav) */
    .toast {
        position: fixed;
        left: 50%;
        bottom: 145px;
        transform: translate(-50%, 20px);
        background: var(--toast-bg);
        color: #fff;
        padding: 10px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, transform .2s;
        z-index: var(--z-toast);
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .toast.show {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    .toast.error {
        background: rgba(var(--danger-rgb), .95);
        /* UX-A:0.5 — зависит от 5.1 */
    }

    /* Action toast — с кнопкой CTA */
    .action-toast {
        position: fixed; left: 12px; right: 12px;
        bottom: calc(var(--bottom-nav-h, 56px) + 108px);
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 12px 14px;
        border: 1px solid var(--border); border-radius: 14px;
        background: var(--card); color: var(--text);
        box-shadow: var(--shadow-sm);
        transform: translateY(12px); opacity: 0; pointer-events: none;
        z-index: var(--z-toast);
        transition: transform .18s ease, opacity .18s ease
    }
    .action-toast.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto }
    .action-toast__text { font-size: 13px; line-height: 1.3; font-weight: 600 }
    .action-toast__btn {
        flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
        min-height: 36px; padding: 0 12px; border-radius: 10px;
        background: var(--accent); color: var(--on-color);
        font-size: 13px; font-weight: 700; text-decoration: none
    }
    @media (min-width: 768px) {
        .action-toast { left: auto; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 40px)) }
    }

    /* ── Chat FAB (desktop) + Sheet (mobile) ────────────────────── */
    /* Решение 4.2=B: фиолетовый градиент */

    /* Desktop FAB — скрыт на мобилке */
    .chat-fab {
        display: none;
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: var(--z-chat-fab);
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    @media (min-width: 768px) {
        .chat-fab {
            display: flex;
        }
    }

    @keyframes chat-buzz {

        0%,
        100% {
            transform: scale(1) translateX(0);
        }

        20% {
            transform: scale(1.12) translateX(-4px);
        }

        40% {
            transform: scale(1.12) translateX(4px);
        }

        60% {
            transform: scale(1.06) translateX(-3px);
        }

        80% {
            transform: scale(1.06) translateX(3px);
        }
    }

    .chat-fab-main {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--card);
        /* [DARK-1.2] #fff → var(--card) */
        box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
        border: none;
        cursor: pointer;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .2s, background .8s, box-shadow .8s;
    }

    .chat-fab-main .material-symbols-rounded {
        font-size: 35px;
        color: var(--text);
        /* [DARK-1.2] #222 → var(--text) */
        transition: color .8s;
        font-weight: lighter;
    }

    .chat-fab-main:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 22px rgba(0, 0, 0, .22);
    }

    /* Пульс (ПК) */
    .chat-fab-main.is-pulsing {
        background: var(--accent);
        box-shadow: 0 4px 22px rgba(var(--accent-rgb), .5);
        animation: chat-buzz .45s ease-out 2;
    }

    .chat-fab-main.is-pulsing .material-symbols-rounded {
        color: #fff;
    }

    /* Sub-items TG/WA */
    .chat-fab-item {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--card);
        /* [DARK-1.2] #fff → var(--card) */
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        opacity: 0;
        transform: translateY(20px) scale(.7);
        transition: opacity .22s, transform .22s;
        pointer-events: none;
        text-decoration: none;
    }

    .chat-fab-item img {
        width: 36px;
        height: 36px;
        display: block;
    }

    .chat-fab.is-open .chat-fab-item:nth-child(2) {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition-delay: 0s;
    }

    .chat-fab.is-open .chat-fab-item:nth-child(1) {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition-delay: .07s;
    }

    /* Mobile Sheet «Ещё» — мессенджеры + тема.
       Открывается из bottom-nav (#nav-more-btn). На десктопе скрыт. */
    .more-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        z-index: var(--z-overlay);
    }

    .more-overlay.is-open {
        display: block;
    }

    .more-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-drawer);
        background: var(--card);
        /* [DARK-1.2] #fff → var(--card) */
        border-radius: 20px 20px 0 0;
        padding: 20px 20px calc(16px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    }

    .more-sheet.is-open {
        transform: translateY(0);
    }

    /* Секция мессенджеров — горизонтальный ряд */
    .more-sheet__chat {
        display: flex;
        gap: 24px;
        justify-content: center;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
    }

    .more-sheet__messenger {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--text);
        font-size: 13px;
        font-weight: 500;
    }

    .more-sheet__messenger img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: block;
    }

    /* Строки меню (тема и др.) */
    .more-sheet__row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 4px;
        background: none;
        border: none;
        color: var(--text);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        justify-content: center;
    }

    .more-sheet__row .material-symbols-rounded {
        font-size: 22px;
        color: var(--text-muted);
        transition: transform .3s ease;
    }

    .more-sheet__row:active .material-symbols-rounded {
        transform: rotate(30deg);
    }

    @media (min-width: 768px) {

        .more-sheet,
        .more-overlay {
            display: none !important;
        }
    }

    /* ── Catalog Drawer (mobile) ────────────────────────────────── */
    .catalog-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        z-index: var(--z-overlay);
    }

    .catalog-overlay.open {
        display: block;
    }

    /* ВАЖНО: height (не max-height) — чтобы flex-child body получил фиксированную высоту,
   а absolute-дети внутри (grid/tree) корректно заняли inset:0 и скроллились.
   max-height без height даёт body=0 → absolute дети тоже 0. */
    .catalog-drawer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-drawer);
        background: var(--card);
        /* [DARK-1.2] #fff → var(--card) */
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1);
        height: 55vh;
        display: flex;
        flex-direction: column;
    }

    .catalog-drawer.open {
        transform: translateY(0);
    }

    /* В режиме дерева drawer расширяется до 82vh */
    .catalog-drawer.cd--tree {
        height: 82vh;
    }

    .catalog-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        /* UX-2.3: #f0f0f5→var(--border) */
        flex-shrink: 0;
        gap: 4px;
    }

    .catalog-drawer__title {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: inherit;
        text-decoration: none;
    }

    .catalog-drawer__title:hover {
        color: var(--accent);
        /* UX-2.3: #4387fd→var(--accent) */
    }

    /* Кнопки шапки (закрыть / назад) */
    .catalog-drawer__head button {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        color: var(--text-muted);
        /* UX-2.3: #888→var(--text-muted) */
        border-radius: 50%;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
    }

    .catalog-drawer__head button:hover {
        background: var(--bg);
        /* UX-2.3: #f5f5fa→var(--bg) */
        color: var(--text);
        /* UX-2.3: #333→var(--text) */
    }

    /* UX-4.2: [hidden] глобально определён в начале файла — локальные [hidden]{display:none} удалены */
    .cd-back {
        color: var(--text-muted);
        /* UX-2.3: #555→var(--text-muted) */
        font-weight: 500;
    }

    /* Кнопка «›» — свернуть/развернуть всё дерево. Без фона, поворот при open. */
    .cd-toggle-all {
        color: var(--text-muted);
        /* UX-2.3: #bbb→var(--text-muted) */
        transition: transform .25s ease, color .2s;
    }

    .cd-toggle-all--open {
        transform: rotate(90deg);
        color: var(--accent);
    }

    /* ── Тело drawer: контейнер для двух видов ──────────────────── */
    /* Оба вида position:absolute — body получает высоту от flex:1 (drawer имеет height). */
    .catalog-drawer__body {
        position: relative;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Общие свойства обоих видов */
    .cd-view--grid,
    .cd-view--tree {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .22s ease;
    }

    /* Вид 1: 2-колоночная сетка */
    .cd-view--grid {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: start;
        gap: 8px;
    }

    /* Вид 2: дерево — скрыто по умолчанию */
    .cd-view--tree {
        padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(40px);
        opacity: 0;
        pointer-events: none;
    }

    /* Режим дерева: сетка уходит вниз, дерево появляется снизу */
    .catalog-drawer.cd--tree .cd-view--grid {
        transform: translateY(70%);
        opacity: 0;
        pointer-events: none;
    }

    .catalog-drawer.cd--tree .cd-view--tree {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .catalog-drawer__item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 13px;
        color: var(--text);
        /* UX-2.3: #222→var(--text) */
        text-decoration: none;
        background: var(--bg);
        /* UX-2.3: #f8f8fb→var(--bg) */
        transition: background .15s;
    }

    .catalog-drawer__item:hover {
        background: var(--border);
        /* UX-2.3: #efeff5→var(--border) */
    }

    .catalog-drawer__item .material-symbols-rounded {
        font-size: 20px;
        color: var(--accent);
        flex-shrink: 0;
    }

    @media (min-width: 768px) {

        .catalog-drawer,
        .catalog-overlay {
            display: none !important;
        }
    }

    /* ── Category Accordion Tree (.ctree) ────────────────────────────────────── */
    /* ВАЖНО: перенесено из catalog.css — ctree используется в catalog-drawer
   на ВСЕХ страницах (product, cart, checkout, catalog_index), не только catalog. */
    .ctree {
        padding: 4px 0;
    }

    .ctree__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Вложенные уровни — отступ 12px */
    .ctree__item .ctree__list {
        padding-left: 12px;
    }

    .ctree__row {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .ctree__link {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 8px;
        font-size: 13px;
        color: var(--text);
        /* UX-2.2: #444→var(--text) */
        transition: background .15s, color .15s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        text-decoration: none;
    }

    /* Иконка корневых секций (depth=0) — маленькая, в линию с текстом */
    .ctree__icon {
        font-size: 16px;
        flex-shrink: 0;
        opacity: .6;
    }

    .ctree__link--active .ctree__icon {
        opacity: 1;
    }

    a.ctree__link:hover {
        background: var(--bg);
        /* UX-2.2: #f5f5fa→var(--bg) */
        color: var(--text);
        /* UX-2.2: #111→var(--text) */
    }

    /* ВАЖНО: .ctree__link.ctree__link--active — двойная специфичность (0,2,0)
   побеждает a.ctree__link:hover (0,1,1) без !important */
    .ctree__link.ctree__link--active {
        background: var(--accent);
        color: #fff;
        font-weight: 600;
    }

    /* Секция без товаров — тихая, но навигируемая (<a href>).
   Листовые dim-узлы (без детей) прячем на десктопе — захламляют сайдбар.
   В drawer (мобилка) всё видно через .ctree--drawer переопределение. */
    .ctree__link--dim {
        color: var(--text-muted);
        /* UX-2.2: #c8c8d0→var(--text-muted) */
        font-size: 12px;
    }

    .ctree__item:not(.ctree__item--has-ch) .ctree__link--dim {
        display: none;
    }

    /* Dim-узел с детьми — кликабельный */
    .ctree__item--has-ch .ctree__link--dim {
        cursor: pointer;
    }

    /* Бейдж-счётчик товаров в секции (legacy_price режим) */
    .ctree__cnt {
        display: inline-block;
        margin-left: 4px;
        font-size: 10px;
        color: var(--text-muted);
        font-weight: 400;
    }

    .ctree__link--active .ctree__cnt {
        color: #fff;
        opacity: .7;
    }

    /* Кнопка разворота — круглая, тач-френдли, без бордера, мягкая тень при активации.
   ВАЖНО: border/background/padding сброшены — иначе <button> показывает дефолт браузера. */
    .ctree__tog {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        padding: 0;
        border-radius: 50%;
        font-size: 18px;
        color: var(--text-muted);
        /* UX-2.2: #bbb→var(--text-muted) */
        line-height: 1;
        cursor: pointer;
        transition: transform .25s ease, color .2s, background .2s, box-shadow .2s;
        position: relative;
        /* UX-6.2: для ::before tap area */
    }

    /* UX-6.2: WCAG 2.2 — 32px → 44px tap zone (borderline → compliant) */
    .ctree__tog::before {
        content: '';
        position: absolute;
        inset: -6px;
    }

    .ctree__tog:hover {
        color: var(--text);
        /* UX-2.2: #666→var(--text) */
        background: var(--bg);
        /* UX-2.2: #f0f0f5→var(--bg) */
    }

    /* Активное состояние: мягкая тень + фиолетовый акцент */
    .ctree__item--has-ch.open>.ctree__row>.ctree__tog {
        transform: rotate(90deg);
        color: var(--accent);
        background: rgba(var(--accent-rgb), .1);
        box-shadow: 0 1px 6px rgba(var(--accent-rgb), .25);
    }

    /* ── Hint-анимация: при появлении дерева кнопки › крутятся + пульс ──────── */
    @keyframes tog-hint {
        0% {
            transform: rotate(0deg) scale(1);
            color: var(--text-muted);
            /* UX-2.2: #bbb→var(--text-muted) */
        }

        25% {
            transform: rotate(180deg) scale(1.15);
            color: var(--accent);
        }

        50% {
            transform: rotate(360deg) scale(1);
            color: var(--accent);
        }

        100% {
            transform: rotate(360deg) scale(1);
            color: var(--accent);
        }
    }

    .ctree--hint .ctree__tog {
        animation: tog-hint .7s cubic-bezier(.4, 0, .2, 1) both;
    }

    /* Плавный аккордеон через max-height */
    .ctree__ch {
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s ease;
    }

    .ctree__item--has-ch.open>.ctree__ch {
        max-height: 2400px;
    }

    /* В drawer — чуть крупнее, и показываем все dim-узлы (полный каталог) */
    .ctree--drawer .ctree__link {
        font-size: 14px;
        padding: 8px 10px;
    }

    .ctree--drawer .ctree__item:not(.ctree__item--has-ch) .ctree__link--dim {
        display: block;
    }

    /* ── Shared Header Components (cart, checkout, product) ────────
   UX-5.4: .badge и .btn-back используются на cart + checkout страницах —
   перенесены в common.css. Page-specific CSS добавляют overrides для формы/размера. */

    /* Бейдж в header (количество товаров, сумма).
   ВАЖНО: base-стиль под brand-header (фиолетовый фон → белый текст).
   На светлых страницах (cart, checkout) переопределяется: .cart-page-title .badge / .co-page-title .badge */
    .badge {
        background: var(--overlay-light-md);
        /* C-6/E-21: rgba(255,255,255,.2) → var */
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 12px;
    }

    /* [CSS-2.1] .btn-back удалён — cart/checkout переведены на _header.php (задача 2.1).
   Кнопка «Назад» теперь — .c-header__back (ссылка в _header.php). */

    /* ── Cart Toast ─────────────────────────────────────────────── */
    /* L-7: унифицированный компонент (ранее дублировался в prod-offers.css и cart-bar.css
   с разными классами .show vs .is-show и разными bottom: 24px vs 170px).
   JS (product.cart.js) использует .show и .err — эти классы каноничны. */
    .cart-toast {
        position: fixed;
        left: 50%;
        bottom: 24px;
        transform: translate(-50%, 10px);
        background: var(--toast-bg);
        color: #fff;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.2;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
        /* E-4/E-17: Фикс z-index конфликта — было 1200 (= .p-footer), тост уходил за мобильный футер */
        z-index: var(--z-cart-toast);
        white-space: nowrap;
        max-width: calc(100vw - 24px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 12.1 Entrance: translateY + scale — появляется снизу вверх с лёгким раскрытием */
    .cart-toast.show {
        opacity: 1;
        transform: translate(-50%, 0);
        animation: toast-in .25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes toast-in {
        from {
            opacity: 0;
            transform: translate(-50%, 12px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translate(-50%, 0) scale(1);
        }
    }

    .cart-toast.err {
        background: var(--toast-error-bg);
    }

    /* На мобилке — над bottom-nav (54px) + запас */
    @media (max-width: 768px) {
        .cart-toast {
            bottom: 90px;
        }
    }

    /* ── Scroll To Top Button ────────────────────────────────────── */
    /* H-8: появляется при scrollY > 600, скрывается при scrollY < 200.
   bottom: 80px — над bottom-nav (54px высота + 26px воздух). */
    .btn-scroll-top {
        position: fixed;
        right: 16px;
        bottom: 80px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--card);
        color: var(--text-muted);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .2s, transform .2s;
        pointer-events: none;
        z-index: var(--z-scroll-top);
        cursor: pointer;
    }

    .btn-scroll-top.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    @media (min-width: 768px) {
        /* Сдвинуто правее chat-fab (right:20px + 56px ширина FAB + 8px gap = 84px) */
        .btn-scroll-top {
            bottom: 20px;
            right: 84px;
        }
    }

    /* ── Accessibility: Focus-visible ───────────────────────────── */
    /* L-2: глобальный outline для клавиатурных пользователей (мышь — без outline) */
    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    :focus:not(:focus-visible) {
        outline: none;
    }

    /* ── Accessibility: prefers-reduced-motion ──────────────────── */
    /* L-6: глобальный kill для людей с вестибулярными нарушениями.
   ВАЖНО: cart-bar.css имел локальный вариант — выносим глобально. */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* ── Shared Keyframes ──────────────────────────────────────────
   UX-3.4: shimmer перенесён сюда из catalog.css + prod-similar.css.
   ВАЖНО: common.css подключается на всех страницах — keyframe доступен везде. */
    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* ── Site Footer ─────────────────────────────────────────────── */
    /* [3.2] 2026-04-09: Создан (UX Audit: BUG-3).
   [3.3] 2026-04-10: F-1..F-7 — реальные данные, trust layer, 4 колонки, SEO-текст, Schema.org.
   [3.4] 2026-04-10: UX Audit v2 — trust разделители, стиль адреса. */
    .c-footer {
        background: var(--card);
        border-top: 1px solid var(--border);
        padding: 32px 16px 24px;
        margin-top: 40px;
        font-size: 13px;
        color: var(--text-muted);
    }

    .c-footer__inner {
        max-width: var(--container-wide);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* F-2: Trust layer — полоска фактов, span через весь grid */
    .c-footer__trust {
        grid-column: 1 / -1;
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 13px;
        color: var(--text-muted);
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }

    /* [3.3] Разделители между trust-фактами — точка-медиан */
    .c-footer__trust span+span::before {
        content: "\00b7";
        margin-right: 16px;
        color: var(--border);
    }

    .c-footer__col h4 {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 8px;
    }

    .c-footer__col a {
        display: block;
        padding: 3px 0;
        color: var(--text-muted);
        /* AUDIT-4.5: плавный hover — цвет + сдвиг */
        transition: color .15s, padding-left .15s;
    }

    /* AUDIT-4.5: hover — цвет + лёгкий сдвиг вправо (Stripe pattern) */
    .c-footer__col a:hover {
        color: var(--accent);
        padding-left: 4px;
    }

    .c-footer__col p {
        padding: 2px 0;
        margin: 0;
    }

    /* [3.3] Адрес в колонке контактов — отделяем от расписания */
    .c-footer__addr {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        font-size: 12px;
    }

    /* F-5: SEO-текст — мелкий, по центру, не заголовок */
    .c-footer__seo {
        grid-column: 1 / -1;
        font-size: 12px;
        color: var(--text-muted);
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .c-footer__copy {
        grid-column: 1 / -1;
        text-align: center;
        font-size: 12px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
    }

    /* H-THEME: кнопка смены темы — перенесена из хедера в футер.
       grid-column: 1/-1 → на всю ширину footer-grid, justify-content: center → по центру. */
    .c-footer__theme-wrap {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
    }

    .c-footer__theme {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 20px;
        padding: 6px 14px;
        font-size: 12px;
        font-family: inherit;
        cursor: pointer;
        transition: background .15s, color .15s, border-color .15s;
    }

    .c-footer__theme:hover {
        background: var(--overlay-dark);
        color: var(--text);
        border-color: var(--text-muted);
    }

    .c-footer__theme .material-symbols-rounded {
        font-size: 16px;
        transition: transform .3s ease;
    }

    .c-footer__theme:active .material-symbols-rounded {
        transform: rotate(30deg);
    }

    /* F-3: 2 колонки на планшете, 4 на десктопе — UX-A:2.4 (4 колонки на 768-960px тесные) */
    @media (min-width: 768px) and (max-width: 959px) {
        .c-footer__inner {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 960px) {
        .c-footer__inner {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* Учёт bottom-nav на мобилке: bottom-nav перекрывает последние 54px контента */
    @media (max-width: 767px) {
        .c-footer {
            padding: 20px 12px calc(16px + var(--bottom-nav-h));
            margin-top: 24px;
        }

        /* AUDIT P0: 2 колонки вместо 1 — убираем "кишку" */
        .c-footer__inner {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px 12px;
        }

        /* AUDIT P0: trust layer — 2 в ряд вместо столбца. Экономия ~60px высоты */
        .c-footer__trust {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px 0;
            font-size: 12px;
            padding-bottom: 12px;
        }

        /* AUDIT P0: разделитель · между фактами — компактнее чем столбик */
        .c-footer__trust span {
            padding: 0 8px;
        }

        .c-footer__trust span+span::before {
            /* НЕ скрываем — оставляем точку-разделитель */
            margin-right: 8px;
        }

        /* AUDIT P0: tap targets 44px (Apple HIG) — чуть компактнее */
        .c-footer__col a {
            padding: 8px 0;
        }

        /* AUDIT P0: заголовки секций — компактнее */
        .c-footer__col h4 {
            font-size: 13px;
            margin-bottom: 4px;
        }

        /* AUDIT P0: SEO текст — компактнее на мобилке */
        .c-footer__seo {
            font-size: 11px;
            margin-top: -4px;
        }

        /* AUDIT P0: copyright — убираем лишний padding */
        .c-footer__copy {
            padding-top: 12px;
            font-size: 11px;
        }
    }

}

/* end @layer components (shared components) */

/* C-1/E-22: Step 6 — Dark Mode в @layer utilities (наивысший приоритет).
   ВАЖНО: @layer utilities > tokens — dark переменные корректно перебивают light-defaults.
   utilities > pages — тёмная тема применяется даже если page CSS переопределил токен. */
@layer utilities {

    /* ── Dark Mode ───────────────────────────────────────────────── */
    /* M-3: dark mode через системный prefers-color-scheme + ручной [data-theme] toggle.
   Архитектура:
   • [data-theme="dark"]  — принудительно тёмная (игнорирует систему)
   • [data-theme="light"] — принудительно светлая (игнорирует систему)
   • без атрибута         — следует системе (@media prefers-color-scheme)
   JS пишет/читает localStorage('theme') и ставит data-theme на <html>.
   ВАЖНО: anti-FOUC inline script в _header.php применяет тему ДО рендера. */

    /* C-5/E-20: Тёмная тема — DRY через --dark-* переменные.
   ВАЖНО: единая точка изменения тёмных значений. Оба блока (@media + [data-theme])
   используют эти переменные — не дублируют конкретные значения. */
    :root {
        --dark-bg: #111116;
        --dark-card: #1c1c24;
        --dark-card-rgb: 28, 28, 36;
        /* [DARK-1.1] для rgba(var(--card-rgb), .98) */
        --dark-text: #f0f0f5;
        --dark-text-muted: #999;
        --dark-border: #2a2a35;
        --dark-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
        --dark-accent-surface: #1e1830;
        --dark-danger-surface: #2d1a1a;
        --dark-warning-surface: #2d2310;
        --dark-card-muted: rgba(255, 255, 255, 0.06);
        /* UX-A:0.2 */
        --dark-tag-blue-bg: #1a2a3d;
        /* UX-A:5.8 */
        --dark-tag-blue-text: #5bafff;
        /* UX-A:5.8 */
        /* Home hero — dark mode */
        --dark-hero-from: #0c0a1a;
        --dark-hero-to: #1a1035;
        --dark-hero-end: #0c0a1a;
        --dark-hero-text: #fff;
        --dark-hero-text-rgb: 255, 255, 255;
        --dark-hero-glass: rgba(0, 0, 0, .25);
        --dark-hero-glass-border: rgba(255, 255, 255, .08);
        --dark-hero-blob-op: .20;
        --dark-hero-glow-op: .18;
        --dark-hero-grid-op: .12;
        --dark-hero-circuit-op: .25;
        --dark-lb-bg-rgb: 17, 17, 22;       /* RGB тёмного фона lightbox в dark mode */
    }

    /* Системное предпочтение тёмной темы (если нет принудительного выбора) */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --bg: var(--dark-bg);
            --card: var(--dark-card);
            --card-rgb: var(--dark-card-rgb);
            --text: var(--dark-text);
            --text-muted: var(--dark-text-muted);
            --border: var(--dark-border);
            --shadow-sm: var(--dark-shadow-sm);
            --accent-surface: var(--dark-accent-surface);
            --danger-surface: var(--dark-danger-surface);
            --warning-surface: var(--dark-warning-surface);
            --blend-img: normal;
            /* ВАЖНО: multiply на тёмном фоне = чернота */
            --lb-bg-rgb: var(--dark-lb-bg-rgb);
            --card-muted: var(--dark-card-muted);
            --tag-blue-bg: var(--dark-tag-blue-bg);
            --tag-blue-text: var(--dark-tag-blue-text);
            /* Hero: deep-purple в dark mode */
            --hero-from: var(--dark-hero-from);
            --hero-to: var(--dark-hero-to);
            --hero-end: var(--dark-hero-end);
            --hero-text: var(--dark-hero-text);
            --hero-text-rgb: var(--dark-hero-text-rgb);
            --hero-glass: var(--dark-hero-glass);
            --hero-glass-border: var(--dark-hero-glass-border);
            --hero-blob-op: var(--dark-hero-blob-op);
            --hero-glow-op: var(--dark-hero-glow-op);
            --hero-grid-op: var(--dark-hero-grid-op);
            --hero-circuit-op: var(--dark-hero-circuit-op);
        }
    }

    /* Принудительная тёмная тема ([data-theme="dark"] на <html>) */
    [data-theme="dark"] {
        --bg: var(--dark-bg);
        --card: var(--dark-card);
        --card-rgb: var(--dark-card-rgb);
        --text: var(--dark-text);
        --text-muted: var(--dark-text-muted);
        --border: var(--dark-border);
        --shadow-sm: var(--dark-shadow-sm);
        --accent-surface: var(--dark-accent-surface);
        --danger-surface: var(--dark-danger-surface);
        --warning-surface: var(--dark-warning-surface);
        --blend-img: normal;
        /* ВАЖНО: multiply на тёмном фоне = чернота */
        --lb-bg-rgb: var(--dark-lb-bg-rgb);
        --card-muted: var(--dark-card-muted);
        --tag-blue-bg: var(--dark-tag-blue-bg);
        --tag-blue-text: var(--dark-tag-blue-text);
        /* Hero: deep-purple в dark mode */
        --hero-from: var(--dark-hero-from);
        --hero-to: var(--dark-hero-to);
        --hero-end: var(--dark-hero-end);
        --hero-text: var(--dark-hero-text);
        --hero-text-rgb: var(--dark-hero-text-rgb);
        --hero-glass: var(--dark-hero-glass);
        --hero-glass-border: var(--dark-hero-glass-border);
        --hero-blob-op: var(--dark-hero-blob-op);
        --hero-glow-op: var(--dark-hero-glow-op);
        --hero-grid-op: var(--dark-hero-grid-op);
        --hero-circuit-op: var(--dark-hero-circuit-op);
    }

}

/* end @layer utilities (dark mode) */