/**
 * Mobile-оптимизация concity.ru.
 *
 * Цель — поэтапная адаптация под мобильные экраны (375–768 px). Этот
 * файл подключается ПОСЛЕ styles.css и crutch.css, чтобы наши правила
 * перекрывали легаси 1.x.
 *
 * Структура файла:
 *   §1 Сквозные правила (любая ширина): touch-target, tap-highlight, …
 *   §2 @media (max-width: 1199px) — планшет / большой телефон ландшафт
 *   §3 @media (max-width: 991px)  — основной мобильный брейкпоинт
 *   §4 @media (max-width: 480px)  — узкий телефон (iPhone SE)
 *
 * Этапы:
 *   1.A — viewport, base font, touch targets, safe-area (этот коммит)
 *   1.B — шапка sticky + бургер-меню off-canvas
 *   1.C — каталог-листинг с off-canvas фильтром
 *   2.x — карточка товара, корзина, оформление и т.д.
 */

/* ============================================================ §1. СКВОЗНОЕ */

/* Убираем синий блик при тапе на ссылках/кнопках на iOS/Android. */
a, button, input, select, textarea, label {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* iOS Safari зумит страницу при фокусе на форму, если font-size инпута < 16px.
   Это поведение известное, единственный способ — явно ≥16px на всех инпутах
   формы (только для полей, на десктопе размер регулируется отдельными правилами
   form-control / .input — там font-size уже задан). */
@media (max-width: 1199px) {
    input[type=text], input[type=email], input[type=tel], input[type=password],
    input[type=search], input[type=number], input[type=url], input[type=date],
    textarea, select {
        font-size: 16px !important;
    }
}

/* ============================================================ §2. ≤ 1024px */

@media (max-width: 1199px) {
    /* Резерв под env() safe area — у iPhone X и новее есть «домашняя полоса».
       Не глобально, а у sticky/fixed элементов снизу — см. дальше. */
}

/* ============================================================ §3. ≤ 768px */

@media (max-width: 991px) {

    /* Базовая типографика — крупнее и удобнее для глаз на маленьких экранах.
       Десктоп остаётся как был. */
    html { -webkit-text-size-adjust: 100%; }
    body { font-size: 15px; line-height: 1.5; }

    /* Touch-target ≥ 44×44px (рекомендация HIG / Material). Применяем к
       очевидно-кликабельным элементам: кнопкам и крупным CTA. Не трогаем
       inline-ссылки внутри текста статьи — там «44px на букву» сломает поток. */
    .btn, button, [role="button"], input[type=submit], input[type=button],
    .addtocart, .shop_pages .page-link, .filterbtn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Контейнер — больше горизонтального воздуха по краям было слишком много;
       уменьшаем до комфортных 12px. */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Скрываем `mob_hide` элементы шапки — старая разметка 1.x уже
       так помечена для «многоканальный» и доп. подписей. Закрепляем. */
    .mob_hide { display: none !important; }

    /* Sticky-резерв под home-indicator iOS: пока ни одного fixed-bottom бара
       нет (будет в 1.B/1.C). Готовим утилитарный класс на будущее. */
    .has-safe-bottom {
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 12px) !important;
    }

    /* Боль из styles.css: горизонтальный скролл из-за фиксированной 956px-ширины
       у .maincats и подобных блоков. Универсальная страховка — никакой блок
       не должен вылезать за вьюпорт по ширине. Не каскадим на iframe (Youtube),
       img (responsive) и table (отдельно решаем в 2.x). */
    .maincats, .fuulblock, .mainblock, header .container,
    .home-hero, .home-hero__left, .home-hero__right,
    .shop_items_list, .shop_pages, footer .container {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Картинки по умолчанию — не вылезают за ширину родителя. */
    img { max-width: 100%; height: auto; }

    /* Длинные SKU / артикулы / URL в характеристиках не должны
       растягивать карточки. */
    .shoplistitem, .content_item {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Глобальная страховка от горизонтального скролла. Owl-карусели и
       пагинация в нескольких местах вылезают за viewport на 3–10 px из-за
       negative-margin родителей. На мобиле горизонтальный скролл всей
       страницы — это всегда ошибка UX. */
    html, body { overflow-x: hidden; }

    /* Описание категории каталога (.category_description) — длинный
       SEO-текст «Каталог - купить настенный кондиционер для вашего дома…».
       На мобиле занимает 200+ px над товарами, отвлекая от листинга.
       Прячем целиком — текст всё ещё индексируется поисковиками. */
    .category_description { display: none !important; }

    /* SEO-текст раздела внизу страницы каталога (виджет shop/seotext).
       На категории «Настенные» выводит «Разновидности бытовых
       кондиционеров» + 800-1500 знаков текста — на мобиле занимает
       3-4 экрана впустую.
       Виджет рендерится как <div class="description"> внутри .maintop,
       без .module-обёртки (wrapper=-1). Селектор без :has — для совместимости. */
    .maintop > .description,
    .maintop > .module > .modulebody > .description,
    .modulebody > .description:has(h2),
    .modulebody > .description:has(h3) {
        display: none !important;
    }
    /* Если .description обёрнут в .module — прячем сам .module целиком. */
    .module:has(> .modulebody > .description > h2),
    .module:has(> .modulebody > .description > h3),
    .module:has(> .modulebody > .description > .seotext-cat-title),
    .module:has(> .modulebody > .description > .seotext-more) {
        display: none !important;
    }

    /* Дубликат бургера в позиции `bottommobile` (виджет navbar) — на
       мобиле тулбар и так с бургером в шапке, второй внизу лишний и
       не работает. Скрываем все .navbar-toggle вне <header>. */
    .navbar-toggle:not(header .navbar-toggle) {
        display: none !important;
    }
    /* И сам контейнер второго навбара — если он рендерится в bottommobile,
       тулбар берёт всё горизонтальное место. Прячем целиком. */
    body > div > .bottommobile,
    .widgets-bottommobile {
        display: none !important;
    }

    /* Owl-carousel: его .owl-stage специально шире контейнера (там
       переключаются слайды), но родителю надо обрезать overflow. */
    .owl-carousel { overflow: hidden; }

    /* Пагинация — отдельные элементы должны переноситься. */
    .shop_pages .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        padding-left: 0;
    }
    .shop_pages .pagination > li {
        margin: 2px;
    }
}

/* ====================================================== §3.B Шапка mobile */

/* Этап 1.B — компактная sticky-шапка с бургером и off-canvas меню.
   Раньше на мобиле первая строка шапки разваливалась на 4 переноса
   (логотип → бургер → телефон → кнопка корзины), header занимал 893 px.
   Стягиваем всё в одну sticky-полосу ~60 px:
     [Logo] ............. [📞] [🛒-cart] [☰ бургер]
   Меню по нажатию бургера выезжает слева (off-canvas).
*/

@media (max-width: 991px) {

    /* Внешний контейнер с .fixheadfirst — это row, который раньше
       растекался на 4 ряда. Делаем sticky и сжимаем содержимое в линию. */
    header > .container > .row.fixheadfirst {
        position: sticky;
        top: 0;
        z-index: 1000;
        margin: 0 -12px;            /* выезжаем за padding .container */
        padding: 8px 10px;
        background: #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,.08);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 56px;
    }

    /* .fixheader — пустой плейсхолдер 145px, который legacy-шапка
       (position: fixed) использовала чтобы зарезервировать место под
       себя. У нас шапка sticky — она и так в потоке, плейсхолдер уже
       не нужен, на не-главной он создавал «дыру» под шапкой. Скрываем. */
    .fixheader { display: none !important; }

    /* На главной у <header class="homepage"> зашит min-height: 893px —
       место под hero-фоновую картинку, которая на мобиле не выводится.
       Получается ~220 px белой дыры под формой поиска. Убираем. */
    header.homepage {
        min-height: 0 !important;
        background-image: none !important;
    }

    /* Каждый «headnaviline»-блок раньше был col-xs-N в bootstrap 12-grid;
       на мобиле грид-классы давали ему по 100% ширины (каждый блок в свою
       строку). Сбрасываем: flex-item, авторазмер. */
    header > .container > .row.fixheadfirst > .headnaviline {
        width: auto !important;
        padding: 0;
        flex: 0 0 auto;
    }

    /* Логотип — занимает оставшееся место, не больше нужного. */
    header > .container > .row.fixheadfirst > .headnaviline:first-child {
        flex: 1 1 auto;
        min-width: 0;                /* чтоб картинка обрезалась если нужно */
        order: 0 !important;
    }

    /* Порядок flex-элементов в шапке (1:1 как на старом concity.ru):
       визуально слева направо:
       1) Логотип-иконка (1-я колонка)   — order 0
       2) Бургер (2-я колонка)            — order 1
       3) Поиск + телефон (3-я колонка)   — order 2
       4) Корзина (4-я колонка)           — order 3 */
    header > .container > .row.fixheadfirst > .headnaviline:nth-child(2) {
        order: 1 !important;
    }
    header > .container > .row.fixheadfirst > .headnaviline:nth-child(3) {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    header > .container > .row.fixheadfirst > .headnaviline:nth-child(4) {
        order: 3 !important;
    }
    /* Лого — крошечная иконка-завитушка (32px). Картинка широкая
       (1170×189), обрезаем шириной + overflow: видна только иконка слева. */
    header .logo {
        width: 32px !important;
        height: 32px !important;
        overflow: hidden !important;
        flex: 0 0 32px !important;
    }
    header .logo a { display: block !important; height: 100%; }
    header .logo img {
        max-height: 32px !important;
        width: auto !important;
        max-width: none !important;
    }
    header .logo span { display: none !important; }

    /* Бургер — оставляем 44×44, переносим в правый конец. */
    .navbar-toggle {
        margin: 0 !important;
        padding: 10px 12px !important;
        border: 1px solid #d4d8dc !important;
        border-radius: 4px !important;
        background: #fff !important;
        order: 99;                   /* всегда последний */
    }
    .navbar-toggle .icon-bar {
        background: #2a4d6e !important;
        width: 22px;
        height: 2px;
    }

    /* Шапка как на 1.x — поиск-иконка + телефон-номер видны inline.
       .toprightinf.newtop содержит #btnsearch (поиск), значок-трубку и
       ссылку tel:. На мобиле компактно: иконка-поиск, рядом номер
       телефона, лишние подписи («многоканальный») прячем. */
    .toprightinf.newtop {
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: nowrap;
        overflow: hidden;
    }
    /* Иконка-поиск — оранжевая, 28px.
       position:static обязателен: в legacy styles.css у #btnsearch
       position:absolute; right:12px — лупа вылетала из flex-потока
       и накрывала сумму корзины. */
    /* Декоративный оранжевый круг ::after из 1.x ездит мимо иконки
       (absolute-смещение) и накрывает номер телефона — прячем. */
    .toprightinf.newtop #btnsearch::after { display: none !important; }
    .toprightinf.newtop #btnsearch {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 18px !important;
        color: #f3ac51 !important;
        flex-shrink: 0;
    }
    /* Маленькая трубка перед номером (родной glyphicon). */
    .toprightinf.newtop .glyphicon-earphone {
        display: inline-block !important;
        font-size: 14px !important;
        color: #555 !important;
        margin-right: 2px !important;
    }
    /* Сам номер телефона — обычным текстом, кликабельная ссылка. */
    .toprightinf.newtop > a[href^="tel:"] {
        font-size: 13px !important;
        color: #2a4d6e !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }
    /* «- многоканальный » подпись скрываем. */
    .toprightinf.newtop .mob_hide { display: none !important; }

    /* Корзина (.fixrb) — иконка, бейдж. Кнопка-текст «заказать звонок»
       уходит, для звонка есть отдельная иконка-телефон. */
    .fixrb {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        float: none !important;
        width: auto !important;
        clear: none !important;
        flex-shrink: 0;                /* корзина не сжимается… */
    }
    .fixrb #btnbackphone { display: none !important; }
    /* …а блок поиск+телефон сжимается (min-width:0), телефон обрезается
       многоточием. Без этого при непустой корзине («45 900 руб.» шире,
       чем «0 руб.») номер телефона наезжал на корзину. */
    .toprightinf.newtop {
        min-width: 0;
        flex: 0 1 auto !important;
    }
    .toprightinf.newtop > a[href^="tel:"] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 0 1 auto;
    }
    /* Сумма в шапке — компактнее, чтобы «45 900 руб.» влезало в строку. */
    .fixrb .cartsumm {
        font-size: 13px !important;
        white-space: nowrap;
    }
    .fixrb .cartsumm small { font-size: 11px !important; }

    /* ========== Off-canvas меню (Bootstrap collapse → drawer слева) ========== */

    /* Контейнер меню: фикс позиция, шторка слева. Закрытое — за экраном.
       Состояние открыто/закрыто контролирует НАШ JS через класс .is-open
       на этом же элементе (mobile.js перехватил клик бургера и убрал
       data-toggle, чтобы Bootstrap collapse не мешал).
       ВСЕ ключевые свойства — с !important, потому что у Bootstrap и
       crutch.css для `.navbar-collapse` довольно высокая специфичность
       (с float/width/inline-display правилами), и без !important
       шторка отображалась как обычный inline-блок поверх контента. */
    /* Меню-«таблетка» под бургером — 1:1 как на старом concity.ru.
       position: absolute, ширина почти на весь экран, белый фон, тонкий
       бирюзовый бордер, скругление 5px. Раньше это был off-canvas drawer,
       но клиент попросил такой же стиль как на 1.x. */
    header .navbar-collapse.navic1,
    .navbar-collapse.navic1 {
        position: absolute !important;
        left: 10px !important;
        right: 10px !important;
        top: 100% !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;        /* пунктов мало — скролл не нужен */
        overflow: visible !important;
        background: #fff !important;
        border: 1px solid #28c88c !important;
        border-radius: 5px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
        padding: 8px 0 !important;
        margin: 6px 0 0 !important;
        z-index: 1500 !important;
        transition: none !important;
        display: none;
        float: none !important;
        transform: none !important;
        visibility: visible !important;
    }
    header .navbar-collapse.navic1.is-open,
    .navbar-collapse.navic1.is-open {
        display: block !important;
    }
    .navbar-collapse.navic1 .mobile-menu-close { display: none !important; }
    /* Затемнение фона при открытом меню. Сам overlay — псевдоэлемент
       на body, чтоб не плодить разметку. */
    body.has-mobile-menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1999;
        opacity: 1;
    }
    body.has-mobile-menu-open {
        overflow: hidden;            /* не скроллим фон */
    }

    /* Внутренние пункты меню — крупные тап-таргеты, разделители.
       Тоже !important и без `header`-префикса — навигация может рендериться
       как ul.navbar-nav без обёртки <header> в части шаблонов. */
    .navbar-collapse.navic1 .navbar-nav,
    .navbar-collapse.navic1 > .navbar-nav,
    .navbar-collapse.navic1 ul {
        margin: 0 !important;
        float: none !important;
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        list-style: none !important;
        height: auto !important;
    }
    .navbar-collapse.navic1 .navbar-nav > li,
    .navbar-collapse.navic1 ul > li,
    .navbar-collapse.navic1 .nav-item,
    .navbar-collapse.navic1 ul.dropdown-menu > li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
        overflow: visible !important;
        line-height: normal !important;
    }
    .navbar-collapse.navic1 .navbar-nav > li > a,
    .navbar-collapse.navic1 ul > li > a {
        font-size: 16px !important;
        padding: 14px 12px !important;
        color: #2a4d6e !important;
        line-height: 1.3 !important;
        display: block !important;
        text-align: left !important;
        text-decoration: none !important;
        background: transparent !important;
        /* Legacy задаёт отдельным пунктам float:left + фикс. width
           (из-за этого «Доставка и оплата» висела по центру). */
        float: none !important;
        width: 100% !important;
    }
    /* Сами li — без своих text-align и justify (раньше items центрировались
       или прижимались вправо вразброс из-за родительских flex-настроек). */
    .navbar-collapse.navic1 .navbar-nav > li,
    .navbar-collapse.navic1 ul > li {
        text-align: left !important;
    }
    /* Вложенное подменю (Услуги → Установка/Обслуживание/…): Bootstrap
       рисует .dropdown-menu absolute-оверлеем с рамкой ПОВЕРХ соседних
       пунктов. На мобиле — инлайн-аккордеон: всегда раскрыто, без рамок,
       с отступом-вложенностью. */
    .navbar-collapse.navic1 .dropdown-menu {
        position: static !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 0 14px !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    .navbar-collapse.navic1 .dropdown-menu > li:last-child {
        border-bottom: 0 !important;
    }
    .navbar-collapse.navic1 .navbar-nav > li > a:hover,
    .navbar-collapse.navic1 .navbar-nav > li > a:focus {
        background: #f5f7f9 !important;
    }

    /* Крестик закрытия меню — добавляется JS-ом как первый child. */
    .mobile-menu-close {
        position: absolute;
        top: 12px; right: 12px;
        width: 40px; height: 40px;
        border: 0;
        background: transparent;
        color: #444;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }
}

/* ====================================================== §3.C Каталог mobile */

/* Этап 1.C — фильтр уезжает в off-canvas (drawer справа), кнопка
   «Фильтры» — sticky bottom. Сейчас на мобиле .inshop_filter скрыт
   через legacy media query — у юзера вообще нет доступа к фильтрам.
   Мы фильтр восстанавливаем и тоггнаем по кнопке. */

@media (max-width: 991px) {

    /* === Сайдбар (.sidebar) над off-canvas-фильтром === */
    /* В сайдбаре кроме фильтра ещё есть форма поиска ("Введите параметры
       поиска"). При sticky-шапке её верхушка попадала под шапку. Даём
       сайдбару верхний padding, чтобы первое содержимое начиналось ниже
       и не перекрывалось. */
    .sidebar {
        padding-top: 16px !important;
    }
    /* «Свернуть/развернуть» — legacy desktop-кнопка из заголовка фильтра.
       Внутри off-canvas drawer она не нужна — у нас крестик ×, а
       свёрнутое состояние теряет смысл (drawer и так появляется по кнопке).
       Кроме того, jQuery .toggle() на ней конфликтует с нашим
       display: block !important на .inshop_filter. */
    .sidebar .fiilterbtn,
    .sidebar a.btnclean.fiilterbtn,
    a[href*="javascript"][onclick*="inshop_filter"] {
        display: none !important;
    }

    /* Заголовок виджета фильтра — на 1.x просто «ФИЛЬТР».
       Сам виджет рендерится через .moduletitle с тем же оформлением,
       что и «КАТАЛОГ» (фактурный фон, 22px uppercase 700 #323232).
       Прячем оригинальный текст «Подбор по параметрам» (font-size: 0)
       и через ::before подставляем «ФИЛЬТР». Размер/цвет/стиль —
       наследуются от глобального .moduletitle (см. crutch.css). */
    .sidebar .module:has(.inshop_filter) > .moduletitle {
        font-size: 0 !important;
        cursor: pointer !important;
        position: relative !important;
        user-select: none !important;
    }
    .sidebar .module:has(.inshop_filter) > .moduletitle::before {
        content: 'ФИЛЬТР';
        font-size: 22px;
        font-weight: 700;
        color: #323232;
        text-transform: uppercase;
        line-height: 1.2;
    }
    .sidebar .module:has(.inshop_filter) > .moduletitle::after {
        content: 'Развернуть ▾';
        font-size: 13px;
        font-weight: 400;
        color: #888;
        text-decoration: underline;
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        text-transform: none;
    }
    .sidebar .module.filter-expanded:has(.inshop_filter) > .moduletitle::after {
        content: 'Свернуть ▴';
    }
    /* Сам фильтр свёрнут по умолчанию — клиент попросил так. */
    .sidebar .module:has(.inshop_filter) > .modulebody {
        display: none !important;
    }
    .sidebar .module.filter-expanded:has(.inshop_filter) > .modulebody {
        display: block !important;
    }
    /* Прячем legacy «Свернуть/развернуть» внутри фильтра — наш JS теперь
       тогглит через клик по заголовку (см. mobile.js). */
    .sidebar .module:has(.inshop_filter) > .modulebody > a.fiilterbtn,
    .sidebar .module:has(.inshop_filter) > .modulebody > .btnclean {
        display: none !important;
    }

    /* Чекбоксы производителей: отказ от sprite-картинки 1.x в пользу
       чистого CSS — надёжнее, не зависит от загрузки PNG.
       Структура DOM:
         .vendorblock > .vendorblocklist > div > (input + label)
         .otherblock  > div > (input + label)
       Целим items по самому глубокому div, чтобы flex стянул input+label
       в одну строку. */
    .inshop_filter .vendorblock .vendorblocklist > div,
    .inshop_filter .likevendorblock .vendorblocklist > div,
    .inshop_filter .otherblock > div:not(.vendorblocklist) {
        display: flex !important;
        align-items: center !important;
        clear: both !important;
        padding: 6px 0 !important;
        gap: 10px !important;
    }
    /* Сам нативный input — виден, нормального размера, без backgrounds. */
    .inshop_filter .vendorblock input[type=checkbox],
    .inshop_filter .likevendorblock input[type=checkbox],
    .inshop_filter .otherblock input[type=radio] {
        position: static !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        accent-color: #21bea6;
        flex-shrink: 0;
    }
    /* Label — текст рядом с инпутом, без фоновой картинки. */
    .inshop_filter .vendorblock label,
    .inshop_filter .likevendorblock label,
    .inshop_filter .otherblock label {
        float: none !important;
        display: inline !important;
        padding-left: 0 !important;
        background: none !important;
        cursor: pointer;
        font-size: 14px !important;
        color: #323232 !important;
        line-height: 1.3 !important;
        text-transform: uppercase !important;
    }
    .inshop_filter form .btnclean { position: static !important; }

    /* Информационные HTML-плашки в сайдбаре («Доставка», «Монтаж
       кондиционеров», «Обслуживание» — виджеты с .icms-widget__html_block).
       На десктопе они полезны рядом с каталогом, на мобиле — раздувают
       сайдбар на ~700 px перед началом контента. У клиента есть статьи
       и страница услуг с тем же содержимым. */
    .sidebar .module:has(.icms-widget__html_block) {
        display: none !important;
    }

    /* Фильтр — inline в сайдбаре (как на 1.x), БЕЗ модалки/drawer.
       Снимаем все position: fixed, transform — отрисовываем в потоке.
       Раньше делал off-canvas drawer, клиент попросил вернуть как на
       исходнике. */
    .inshop_filter {
        display: block !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        overflow: visible !important;
        box-shadow: none !important;
        padding: 0 !important;
        z-index: auto !important;
        transform: none !important;
        visibility: visible !important;
        transition: none !important;
    }
    /* Крестик закрытия больше не нужен — фильтр всегда виден inline. */
    .inshop_filter .filter-drawer-close { display: none !important; }
    body.has-filter-open {
        overflow: hidden;
    }
    body.has-filter-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1999;
    }
    .filter-drawer-close {
        position: absolute;
        top: 12px; right: 12px;
        width: 40px; height: 40px;
        border: 0;
        background: transparent;
        color: #444;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    /* Заголовок «ПОДБОР ПО ПАРАМЕТРАМ» в drawer — был 22px uppercase
       (общий .moduletitle стиль) — для off-canvas-шторки слишком
       большой. Уменьшаем. Заголовки групп фильтра (Производители,
       Площадь, Цвет и т.д.) — рендерятся как <strong> внутри
       .vendorblock/.otherblock — оставляем как есть. */
    .inshop_filter .moduletitle {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #2a4d6e !important;
        padding-bottom: 8px !important;
        margin: 0 0 12px !important;
        border-bottom: 1px solid #e2e2e2;
        text-transform: uppercase !important;
        letter-spacing: 0.5px;
    }

    /* Кнопка «Очистить» внутри фильтра — крупнее, удобнее тапу. */
    .inshop_filter .btnclean {
        padding: 10px 12px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: inline-block !important;
    }

    /* Группы вендоров и характеристик: разделяем визуально. */
    .inshop_filter .vendorblock,
    .inshop_filter .likevendorblock,
    .inshop_filter .otherblock,
    .inshop_filter .priceblock {
        margin: 14px 0;
        padding-bottom: 14px;
        border-bottom: 1px solid #eef0f2;
    }

    /* Чекбоксы вендоров — крупная клик-зона. */
    .inshop_filter .vendorblocklist > div {
        padding: 6px 0;
    }
    .inshop_filter .vendorblocklist label {
        cursor: pointer;
        padding: 6px 4px;
        font-size: 15px;
    }

    /* Кнопка «Фильтровать» — наш live-фильтр её прячет, но если кому-то
       выпадет — крупная. */
    .inshop_filter .filterbtn {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }

    /* === Sticky bottom toolbar (Фильтры · Сортировка) === */

    /* Контейнер sticky-полосы добавляет mobile.js поверх body. */
    .mobile-catalog-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e2e2e2;
        box-shadow: 0 -2px 12px rgba(0,0,0,.06);
        z-index: 1500;
        display: flex;
        padding: 8px 10px calc(env(safe-area-inset-bottom, 0) + 8px);
        gap: 8px;
    }
    .mobile-catalog-bar > button {
        flex: 1 1 50%;
        background: #fff;
        border: 1px solid #d4d8dc;
        border-radius: 6px;
        padding: 10px;
        font-size: 14px;
        color: #2a4d6e;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
    }
    .mobile-catalog-bar .mcb-filters {
        background: #1abc9c;
        border-color: #1abc9c;
        color: #fff;
    }
    .mobile-catalog-bar .mcb-filters .badge {
        background: #fff;
        color: #1abc9c;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 18px;
        text-align: center;
    }

    /* Нижний padding у body, чтоб карточки не уезжали под sticky-бар. */
    body.has-mobile-catalog-bar {
        padding-bottom: 70px;
    }

    /* === Карточки товара в листинге — 1 колонка, без узких 280-px === */
    .shop_items_list .row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .shop_items_list .shoplistitem {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .shop_items_list .shoplistitem .image img {
        width: 100%;
        height: auto;
    }

    /* Сортировочный select — чуть компактнее в шапке листинга. */
    .shop-list-toolbar select {
        font-size: 16px;
        padding: 8px 10px;
        min-height: 40px;
    }

    /* Пагинация — крупные тап-таргеты ≥44px. */
    .shop_pages .page-link {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ====================================================== §3.D Карточка товара */

@media (max-width: 991px) {

    /* === Галерея товара === */
    /* Главное фото — на всю ширину карточки. На десктопе галерея в
       левой колонке шириной ~50%; на мобиле стек уже сработал (3 col
       по 100%), осталось картинку растянуть. */
    .shopitemimg, .img-tshop_gallery, .item-photo img {
        max-width: 100%;
        height: auto;
    }
    /* Лента миниатюр — горизонтальный скролл вместо переноса (4 ряда на
       мобиле занимают вертикальный экран без пользы). */
    .item_thumbs, .item-thumbs, .thumbs-container {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .item_thumbs > *, .item-thumbs > * {
        flex: 0 0 auto;
    }

    /* === Табы (Характеристики/Описание/Отзывы) === */
    /* На мобиле «Технические характеристики» съедает всю строку и табы
       «Описание»/«Отзывы» уезжают за вьюпорт. Решение:
        1. Шрифт табов меньше + uppercase off + padding compact.
        2. Длинный заголовок «Технические характеристики» обрезаем
           через CSS-replace: скрываем оригинал и подставляем «Параметры».
        3. Градиент справа — визуальная подсказка «есть ещё». */
    .nav-tabs.itempagenav {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid #ddd;
        margin: 0 -12px 12px;
        padding: 0 12px;
        position: relative;
        scrollbar-width: none;
    }
    .nav-tabs.itempagenav::-webkit-scrollbar { display: none; }
    .nav-tabs.itempagenav > li {
        flex: 0 0 auto;
        float: none !important;
    }
    .nav-tabs.itempagenav > li > a {
        padding: 10px 6px !important;        /* было 10/12 — теперь уже */
        font-size: 13px !important;
        text-transform: none !important;     /* uppercase ел ширину */
        letter-spacing: 0 !important;
        min-height: 44px;
        white-space: nowrap;
    }
    /* Маскировка «Технические характеристики» под «Параметры» — короче втрое.
       Прячем оригинальный текст-ссылку через 0/auto fz-трюк и подставляем
       data-attribute через ::before. Хак, но работает без правки шаблона. */
    .nav-tabs.itempagenav > li:first-child > a {
        font-size: 0 !important;             /* original text invisible */
    }
    .nav-tabs.itempagenav > li:first-child > a::before {
        content: 'Параметры';
        font-size: 13px;
        text-transform: none;
    }

    /* Градиент-подсказка справа — намёк, что табы скроллятся. */
    .itempagenav-wrap, .nav-tabs.itempagenav {
        background: linear-gradient(to right, transparent calc(100% - 24px), rgba(255,255,255,.95) 100%);
    }

    /* === Таблица характеристик === */
    /* Часто внутри .content_item_props лежит <table class="table"> с
       парой столбцов «название | значение». На мобиле длинное название
       вытесняет значение за viewport. Делаем стек: название над значением. */
    .content_item_props table, .item-chars table {
        display: block;
        width: 100% !important;
        border-collapse: collapse;
        padding: 0 4px;
    }
    .content_item_props table thead { display: none; }
    .content_item_props table tbody { display: block; }
    .content_item_props table tr {
        display: grid;
        /* Один столбец под названия, другой под значения. Меньше min — даём
           словам тип «производитель» перенестись по слогу, а не по букве. */
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #f3f3f3;
    }
    .content_item_props table td {
        padding: 0 !important;
        border: 0 !important;
        font-size: 13px;
        line-height: 1.35;
        /* word-break: break-word рвал слова по букве «производител / ь:».
           Заменяем на overflow-wrap break-word — он рвёт только на пробелах
           и дефисах, а слово целиком предпочитает перенести на следующую
           строку. На очень узких экранах CSS hyphens добавит перенос
           по слогам, если язык установлен. */
        overflow-wrap: break-word;
        word-break: normal;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .content_item_props table td:first-child {
        color: #777;
        font-weight: 500;
    }

    /* Sticky bottom CTA «В корзину» удалён (клиент: непонятна логика,
       на 1.x её не было; к тому же на карточке 9 addtocart-форм из
       каруселей и цена бралась не от того товара). На случай старого
       закешированного mobile.js — гасим бар принудительно. */
    .mobile-buy-bar { display: none !important; }
    body.has-mobile-buy-bar { padding-bottom: 0 !important; }

    /* === «Вы смотрели» / «Похожие» — горизонтальный свайп === */
    .item_alternatives .alt_grid,
    .shop-viewed .listitems > .owl-carousel {
        /* owl-carousel сам делает свайп — нам только не мешать */
    }

    /* === Скрываем виджет «Доставка / Монтаж / Обслуживание» === */
    /* На карточке товара (и на главной) есть блок .mainblock.service —
       три ячейки с обобщёнными плашками «Доставка / Монтаж / Обслуживание».
       На мобиле это раздутый сегмент 900+ px без конкретики, между CTA
       «В корзину» и табами характеристик. Скрываем — клиент сказал
       «вообще убрать на мобильной версии». */
    .mainblock.service { display: none !important; }
}

/* ============================================================ §3.E Корзина / оформление */

@media (max-width: 991px) {

    /* Поля формы оформления — отдельная строка под лейбл, крупные.
       НЕ затрагиваем поля фильтра (.priceblock, .otherblock) — там
       нужен компактный размер 98px как на 1.x (два поля «от/до»). */
    form input[type=text]:not(.inshop_filter input):not(.priceblock input):not(.otherblock input),
    form input[type=email], form input[type=tel],
    form input[type=password], form input[type=number], form textarea, form select {
        width: 100% !important;
        max-width: 100%;
        padding: 11px 12px !important;
        margin-bottom: 8px;
    }
    /* Принудительно возвращаем компактный размер инпутам прайс-блока. */
    .inshop_filter .priceblock input[type=text],
    .inshop_filter .otherblock input[type=text] {
        width: 98px !important;
        padding: 0 !important;
        text-align: center !important;
    }
    form label {
        display: block;
        font-size: 14px;
        color: #444;
        margin-bottom: 4px;
        font-weight: 500;
    }
    /* Радио «Способ доставки» (.dtypeblock .ditem): сама «пилюля» с
       градиентом — это .ditem (height 50/line-height 40, текст белый),
       label должен остаться inline ВНУТРИ пилюли. Наш form label
       (display:block) выталкивал подпись под кнопку — возвращаем. */
    .dtypeblock .ditem label {
        display: inline !important;
        color: #fff !important;
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    /* Цены в таблице корзины/заказа не переносим («45 900 руб.» рвалось
       на «45 / 900 руб.» в узкой колонке). Названию товара перенос можно. */
    .cart_table .price,
    .cart_table .totalprice,
    .cart_table .total_summ_price {
        white-space: nowrap;
    }

    /* Радио способов оплаты/доставки — карточки во всю ширину. */
    .shop_psys_list label,
    .shop_delivery_list label,
    .pay-method-list label,
    .delivery-method-list label {
        display: flex !important;
        align-items: center;
        padding: 14px;
        border: 2px solid #e2e2e2;
        border-radius: 6px;
        margin-bottom: 8px;
        cursor: pointer;
        gap: 10px;
    }
    .shop_psys_list input[type=radio]:checked + label,
    .shop_delivery_list input[type=radio]:checked + label {
        border-color: #21bea6;
        background: #f0fdfa;
    }

    /* Корзина — таблица товаров в виде карточек. */
    .shop_cart_items .item, .cart-items > li {
        padding: 12px 0;
        border-bottom: 1px solid #eef0f2;
    }
}

/* ============================================================ §3.F Климатик widget */

@media (max-width: 991px) {

    /* Климатик панель на мобиле — fullscreen, чтобы input не упирался в
       клавиатуру и сообщения читались. Реальные селекторы из
       templates/concity/_climatik_widget.tpl.php:
         #climatikFab — плавающая кнопка-аватар (внизу справа)
         #climatikChat .climatik-chat — открытая панель чата */
    #climatikChat.climatik-chat {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 9999 !important;
    }
    /* Поле ввода и кнопка отправки — фикс к низу, под home-indicator. */
    .climatik-chat__form,
    .climatik-chat__input,
    .climatik-chat__foot,
    .climatik-chat__footer {
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 8px) !important;
    }

    /* Плавающая кнопка Климатика — поднимаем над sticky-барами каталога
       и карточки товара (нижние полосы ~70 px). */
    #climatikFab.climatik-fab {
        bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
        right: 12px !important;
    }
    /* Тогда же bubble «над» fab подстраивается. */
    #climatikBubble.climatik-fab__bubble {
        bottom: calc(160px + env(safe-area-inset-bottom, 0)) !important;
    }
}

/* ====================================================== §3.G Главная и статьи */

@media (max-width: 991px) {

    /* === Главная: maincats === */
    /* В .maincats сетка 6 категорий — на мобиле стек по 2 в ряд. */
    .maincats { padding: 14px 0; }
    .maincats > div, .maincats .mainmenu_blocks_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .maincats .mainmenu_blocks_list > * {
        width: auto !important;
        margin: 0 !important;
    }
    .maincats .moduletitle {
        font-size: 22px !important;
        line-height: 1.2;
        text-align: center;
    }

    /* === Hero/баннер «Подбор за 4 шага» — везде на мобиле компакт ===
       Клиент попросил убрать иконку и весь пояснительный текст —
       оставить только заголовок и кнопку CTA. На мобиле это экономит
       ~150–200 px вертикали и не отвлекает от каталога. */
    .podbor-cta {
        flex-direction: column !important;
        text-align: center !important;
        padding: 14px !important;
        gap: 8px !important;
    }
    .podbor-cta__ico { display: none !important; }
    .podbor-cta__txt small { display: none !important; }
    .podbor-cta__btn { width: 100% !important; padding: 12px !important; }

    /* Аналогичный баннер в _podbor_banner.tpl.php (статьи + tshop_list).
       Структура: <div.podbor-banner>
                    <div>🛠</div>           ← иконка, прячем
                    <div>                    ← средний блок
                       <div>Заголовок</div>  ← оставляем
                       <div>Описание</div>   ← прячем
                    </div>
                    <a>Кнопка</a>            ← оставляем
                  </div>
       Inline-стили в HTML — приходится бить !important. */
    .podbor-banner {
        padding: 14px !important;
        gap: 10px !important;
    }
    .podbor-banner > div:first-child {
        display: none !important;            /* иконка 🛠 */
    }
    .podbor-banner > div:nth-child(2) > div:nth-child(2) {
        display: none !important;            /* «Ответьте на 4 простых вопроса …» */
    }
    .podbor-banner > div:nth-child(2) {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .podbor-banner > a {
        width: 100% !important;
        text-align: center !important;
        margin-top: 8px !important;
    }

    /* === Главная: сертификаты/доставка/бренды === */
    .fuulblock { padding: 30px 10px; }
    .fuulblock .mainblock { padding: 20px 10px; }

    /* === Главная: блоки преимуществ «Авторизованный диллер / Гарантия /
       Доставка» (.sertit) — иконка центрирована над текстом, текст по центру.
       Раньше иконка прижималась к левому краю, а заголовок и описание шли
       левым-аут — на мобиле смотрелось как нарезка строк. */
    .sertit {
        text-align: center !important;
        margin-bottom: 24px;
    }
    .sertit > img {
        display: block !important;
        margin: 0 auto 12px !important;
        max-width: 100px;
        height: auto;
    }
    .sertit > h4 {
        text-align: center !important;
        margin: 8px 0 6px !important;
    }
    .sertit > p {
        text-align: center !important;
        margin: 0 auto !important;
        max-width: 320px;
    }

    /* === Статьи === */
    .content_item,
    .articles_item,
    article {
        font-size: 16px;
        line-height: 1.6;
    }
    .content_item p, .articles_item p, article p {
        margin: 0 0 14px;
    }
    .content_item h2, .content_item h3,
    .articles_item h2, .articles_item h3,
    article h2, article h3 {
        font-size: 20px;
        line-height: 1.3;
        margin: 24px 0 10px;
    }

    /* === Прайс монтажа (install_price_table — 5 колонок) === */
    /* На 360px 5 колонок не помещаются. Горизонтальный скролл — только
       у внутренней обёртки таблицы (.install-price-table-scroll), чтобы
       примечание «Цены приблизительные…» не уезжало вместе с ней. */
    .install-price-table-wrap {
        margin: 14px -12px;
        padding: 0 12px;
    }
    .install-price-table-scroll,
    .install-price-table-wrap:not(:has(.install-price-table-scroll)) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .install-price-table {
        min-width: 600px;             /* гарантированно требует scroll */
    }
    .install-price-table th, .install-price-table td {
        padding: 6px 8px !important;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ====================================================== §3.H Сравнение, подбор */

@media (max-width: 991px) {

    /* === Сравнение === */
    /* Таблица сравнения — широкая по горизонтали (один столбец на товар).
       Реальная обёртка на странице — .cmp-table-wrap (см. compare.tpl.php).
       Горизонтальный скролл + sticky первая колонка (название
       характеристики), чтобы при свайпе было видно, что сравниваем. */
    .cmp-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cmp-table-wrap table th:first-child,
    .cmp-table-wrap table td:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 2;
        box-shadow: 2px 0 4px rgba(0,0,0,.08);
        min-width: 110px !important;
        max-width: 130px;
        width: 120px !important;
        white-space: normal;
        overflow-wrap: break-word;
    }
    /* Колонки товаров — компактнее, чтобы на экране помещалось ~1.5
       товара и был виден намёк на горизонтальный скролл. */
    .cmp-table-wrap table th, .cmp-table-wrap table td {
        min-width: 150px;
        max-width: 170px;
    }

    /* === Подбор — пошагово (один вопрос на экран) === */
    .podbor-step, .podbor-question {
        padding: 16px 12px;
    }
    .podbor-step .options, .podbor-question .options {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .podbor-step .options label, .podbor-question .options label {
        padding: 14px;
        border: 2px solid #e2e2e2;
        border-radius: 6px;
        cursor: pointer;
        min-height: 50px;
        display: flex;
        align-items: center;
    }

    /* === Вендоры === */
    /* Сетка логотипов 3-кол вместо 6. */
    .vendors-grid, .vendors-list, .vendor-thumbs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .vendors-grid > *, .vendors-list > * { width: auto !important; }

    /* === Альбомы (сертификаты, портфолио) === */
    /* Сетка фото 2-кол. */
    .albums_list .item, .albums_item .photo {
        width: 50% !important;
        padding: 4px;
    }
    .photos_list, .albums_list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }
    .photos_list > *, .albums_list > * { width: auto !important; margin: 0 !important; }
}

/* ====================================================== §3.I Пользовательские формы */

@media (max-width: 991px) {

    /* Логин / регистрация / профиль — стандартные ICMS-формы. */
    .login_form, .register_form, .users_form, .profile_edit {
        max-width: 100%;
        padding: 14px 12px;
    }
    .form-group { margin-bottom: 14px; }

    /* Кнопки submit — крупно. */
    .form-actions .btn, .form-buttons .btn {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }

    /* Поиск — overlay по иконке. */
    #search_mainblock {
        padding: 14px 10px !important;
    }
    #search_mainblock input[type=text] {
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Страница ошибки */
    .error-page, .page-404 {
        text-align: center;
        padding: 40px 20px;
    }
    .error-page h1, .page-404 h1 {
        font-size: 80px;
        margin: 0;
        color: #ccc;
    }
}

/* ============================================================ §4. ≤ 480px */

@media (max-width: 480px) {
    body { font-size: 14.5px; }
    .container { padding-left: 10px !important; padding-right: 10px !important; }

    /* На совсем узких экранах логотип чуть меньше. */
    header .logo img { max-height: 32px; }

    /* Главная: maincats — 1 колонка вместо 2 на iPhone SE. */
    .maincats > div, .maincats .mainmenu_blocks_list {
        grid-template-columns: 1fr;
    }

    /* Вендоры — 2 кол вместо 3. */
    .vendors-grid, .vendors-list, .vendor-thumbs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ───── Доп. фиксы по итогам мобильного аудита (июнь 2026) ───── */

@media (max-width: 991px) {
    /* Всплывающий пузырь Климатика перекрывает контент (поля цены
       фильтра, баннер подбора). Прячем только пузырь — сам FAB
       (снежинка) остаётся кликабельным. */
    .climatik-fab__bubble { display: none !important; }
}

/* Узкие экраны (iPhone SE/8, 360px-Android): телефон в шапке впритык
   к корзине — ужимаем номер, чтобы не наезжал. */
@media (max-width: 375px) {
    .toprightinf.newtop { gap: 4px !important; }
    .toprightinf.newtop > a[href^="tel:"] { font-size: 12px !important; }
}