/* ═══ Мегаменю «Решения и услуги»: вариант C, визуал Ф2 «Поисковая полоса» (12.10.2026),
   спокойная редакция после замечания владельца «громоздко, пёстро, непонятно что открылось» ═══
   Разметка: megamenu-desktop.php (.mm, от 1025 px), megamenu-mobile.php (.mm-m, экран бургера).
   Поведение: megamenu.js. Макет и ревью: docs/front/MEGAMENU-2026-10/ (final-visual.html, REVIEW-F2.md).
   Цвет и плашки: вариант V3 «Брендовый» (выбор владельца 12.10): голубая полоса поиска, белые
   плашки «Часто ищут», голубая плашка при наведении на услугу, тёмная нижняя полоса с заявкой.

   Почему селекторы с #horizontal-multilevel-menu-new: style.css компонента и main_styles.css
   красят ВСЕ a и div внутри пунктов шапки (.header #horizontal-multilevel-menu-new li a / li div,
   кегль 14-30px, цвет, padding 3px). Класс внутри id (1,2,0) перебивает их (1,1,2) без !important.
   Мобильный экран: .mobile-menu .m-menu ul / ul li a задают высоту 90vh, min-height 76px и padding
   с !important, поэтому там сбросы тоже с !important и с большей специфичностью. */

.mm, .mm-m {
    --mm-ink: var(--ds-ink, #0a225e);
    --mm-cyan: var(--ds-cyan, #00bef3);
    --mm-c700: var(--ds-cyan-700, #0078b0);
    --mm-c100: var(--ds-cyan-100, #c7f4ff);
    --mm-c50: #eefaff;    /* фон полосы поиска и наведения (визуал V3, 12.10) */
    --mm-c150: #b9e3f2;   /* рамка поля на голубом */
    --mm-s50: #f6f8fb;
    --mm-s100: #eef2f7;
    --mm-s200: #e1e8f0;
    --mm-s300: #cdd7e4;
    --mm-s500: #5f6e84;   /* 4,9:1 на белом; прежний #6b7a90 давал 4,36 */
    --mm-s600: #475467;
    --mm-s700: #344054;
    --mm-ease: cubic-bezier(.16, 1, .3, 1);
    box-sizing: border-box;
    font-family: var(--ds-font, 'PetraSans', sans-serif);
    text-align: left;
}
.mm *, .mm-m * { box-sizing: border-box; }
.mm [hidden], .mm-m [hidden] { display: none !important; }
.mm svg, .mm-m svg { flex: none; }
.mm-vh {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ───────── десктоп ───────── */
.mm { display: none !important; }

@media (min-width: 1025px) {
    /* Без JS (или пока он не загрузился): открытие наведением и фокусом. С JS класс .mm-js
       отключает это, и панелью управляет megamenu.js (задержки, клик, Escape, aria-expanded). */
    #horizontal-multilevel-menu-new li.menu__item:hover > .mm:not(.mm-js),
    #horizontal-multilevel-menu-new li.menu__item:focus-within > .mm:not(.mm-js),
    #horizontal-multilevel-menu-new .mm.is-open { display: block !important; }

    /* Выпадашка в ширину контейнера шапки, прижата к низу пункта. Затемнение страницы под ней:
       огромная тень, обрезанная clip-path по верхнему краю, чтобы шапка оставалась яркой. */
    #horizontal-multilevel-menu-new .mm {
        position: fixed;
        left: max(16px, calc((100% - 1226px) / 2));
        right: max(16px, calc((100% - 1226px) / 2));
        top: var(--mm-top, var(--hdr-h, 68px));
        /* --mm-bottom: высота занятого низа экрана (липкая полоса заявки, cookie), ставит megamenu.js */
        max-height: calc(100vh - var(--mm-top, var(--hdr-h, 68px)) - var(--mm-bottom, 0px) - 24px);
        max-height: calc(100dvh - var(--mm-top, var(--hdr-h, 68px)) - var(--mm-bottom, 0px) - 24px);
        overflow: auto;
        overscroll-behavior: contain;
        z-index: 5;
        margin: 0; padding: 0;
        background: #fff;
        border: 1px solid var(--mm-s200); border-top: 0;
        border-radius: 0 0 12px 12px;
        color: var(--mm-s700);
        font-size: 15px; line-height: 1.45; font-weight: 400;
        box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .25), 0 0 0 100vmax rgba(10, 34, 94, .28);
        clip-path: inset(0 -100vmax -100vmax -100vmax);
        white-space: normal;
        cursor: auto;
    }
    #horizontal-multilevel-menu-new .mm.is-open { animation: mm-in .16s var(--mm-ease); }

    /* пункт шапки, пока панель открыта: та же метка, что у текущего раздела */
    .header #horizontal-multilevel-menu-new li [data-mm-trigger][aria-expanded="true"] { color: var(--ds-cyan-700, #0078b0); }  /* триггер вне .mm: токены --mm-* тут не видны */
    @media (min-width: 1152px) {
        .header #horizontal-multilevel-menu-new li [data-mm-trigger][aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--ds-cyan, #00bef3); }
    }

    /* общий сброс div и span внутри панели: шапка красит «li div», а в режиме бургера (до 1151 px)
       main_styles.css делает «.menu__list--open li span» абсолютной стрелкой 21x11 */
    #horizontal-multilevel-menu-new li .mm div { font-size: inherit; font-weight: inherit; color: inherit; padding: 0; line-height: inherit; }
    #horizontal-multilevel-menu-new .mm span:not(.mm-vh) {
        position: static; width: auto; height: auto; top: auto; right: auto; background: none; transition: none; transform: none;
    }

    #horizontal-multilevel-menu-new .mm .mm-w { margin: 0; padding: 0 28px; }
    #horizontal-multilevel-menu-new .mm :focus-visible { outline: 2px solid var(--mm-c700); outline-offset: 2px; border-radius: 4px; }

    /* верх: поиск + «Каталог услуг», под ним тихая строка «Часто ищут» */
    #horizontal-multilevel-menu-new .mm .mm-band { background: var(--mm-c50); border-bottom: 1px solid var(--mm-c100); }
    #horizontal-multilevel-menu-new .mm .mm-band .mm-w { display: grid; gap: 10px; padding-top: 16px; padding-bottom: 14px; }
    #horizontal-multilevel-menu-new .mm .mm-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
    #horizontal-multilevel-menu-new .mm .mm-sf { margin: 0; min-width: 0; }
    #horizontal-multilevel-menu-new .mm .mm-sx {
        display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 14px;
        background: #fff; border: 1px solid var(--mm-c150); border-radius: 8px; min-width: 0; color: var(--mm-s500);
        transition: border-color .15s var(--mm-ease), box-shadow .15s var(--mm-ease);
    }
    #horizontal-multilevel-menu-new .mm .mm-sx:hover { border-color: var(--mm-s500); }
    #horizontal-multilevel-menu-new .mm .mm-sx:focus-within { border-color: var(--mm-c700); box-shadow: 0 0 0 3px var(--mm-c100); color: var(--mm-c700); }
    #horizontal-multilevel-menu-new .mm .mm-sx input {
        flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
        font: inherit; font-size: 16px; color: var(--mm-ink); box-shadow: none; -webkit-appearance: none; appearance: none;
    }
    #horizontal-multilevel-menu-new .mm .mm-sx input::placeholder { color: var(--mm-s500); opacity: 1; }
    #horizontal-multilevel-menu-new .mm .mm-sx input::-webkit-search-cancel-button { display: none; }
    #horizontal-multilevel-menu-new .mm .mm-slot { display: flex; align-items: center; }
    #horizontal-multilevel-menu-new .mm .mm-sx kbd {
        font: 600 12px/1 var(--ds-font, 'PetraSans', sans-serif); color: var(--mm-s500); background: var(--mm-s50); box-shadow: none;
        border: 1px solid var(--mm-s200); border-radius: 5px; padding: 4px 7px; margin-right: 6px;
    }
    #horizontal-multilevel-menu-new .mm .mm-clr {
        width: 34px; height: 34px; border: 0; border-radius: 6px; background: none; color: var(--mm-s500);
        cursor: pointer; display: grid; place-items: center; padding: 0;
    }
    #horizontal-multilevel-menu-new .mm .mm-clr:hover { background: var(--mm-s100); color: var(--mm-ink); }
    #horizontal-multilevel-menu-new .mm .mm-all {
        display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 0;
        font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-decoration: none;
        color: var(--mm-c700); background: none;
    }
    #horizontal-multilevel-menu-new .mm .mm-all:hover { color: var(--mm-ink); }
    #horizontal-multilevel-menu-new .mm .mm-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; line-height: 1.4; }
    #horizontal-multilevel-menu-new .mm .mm-ph { color: var(--mm-s600); margin-right: 2px; }
    #horizontal-multilevel-menu-new .mm .mm-pill {
        display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
        background: #fff; box-shadow: 0 1px 2px rgba(10, 34, 94, .10);
        color: var(--mm-ink); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none;
        transition: background-color .15s var(--mm-ease), color .15s var(--mm-ease);
    }
    #horizontal-multilevel-menu-new .mm .mm-pill:hover { background: var(--mm-ink); color: #fff; }

    /* индекс или результаты */
    #horizontal-multilevel-menu-new .mm .mm-body { padding-top: 16px; padding-bottom: 16px; }
    #horizontal-multilevel-menu-new .mm .mm-idx {
        display: grid; gap: 28px; align-items: start;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    #horizontal-multilevel-menu-new .mm .mm-col { display: grid; gap: 16px; align-content: start; }
    /* надзаголовок колонки: «По требованию», «По задаче», «ИТ и ПО». Пустой держит высоту,
       чтобы разделы соседних колонок стояли на одной линии */
    #horizontal-multilevel-menu-new .mm .mm-sup {
        margin: 0 0 -8px; min-height: 16px; font-size: 12px; line-height: 16px; font-weight: 600;
        letter-spacing: .07em; text-transform: uppercase; color: var(--mm-s500);
    }
    /* ИТ и ПО тише: заголовки разделов не синие, а серые */
    #horizontal-multilevel-menu-new .mm .mm-col.is-quiet .mm-gh { color: var(--mm-s600); }
    /* раздел-строка (Кибероснова, strip в megamenu-data.php) под колонками 1-3: пока колонки 4-5 длиннее,
       там пустое место. Колонки 4-5 (.is-tall) идут через обе строки сетки; вторая строка 1fr, поэтому
       лишняя высота длинной колонки уходит в неё, а не раздвигает первую. Услуги строки - в один ряд.
       Строка не влезла в экран: JS ставит .mm-rowoff и переносит её услуги в другой раздел */
    #horizontal-multilevel-menu-new .mm .mm-idx.has-row { grid-template-rows: auto 1fr; row-gap: 20px; }
    #horizontal-multilevel-menu-new .mm .mm-idx.has-row > .mm-col.is-tall { grid-row: 1 / span 2; }
    #horizontal-multilevel-menu-new .mm .mm-row { grid-column: 1 / span 3; grid-row: 2; }
    /* услуги строки в один ряд поровну, сколько бы их ни было (сейчас 4) */
    #horizontal-multilevel-menu-new .mm .mm-row .mm-gl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 28px; }
    #horizontal-multilevel-menu-new .mm .mm-idx.mm-rowoff { grid-template-rows: none; row-gap: 28px; }
    #horizontal-multilevel-menu-new .mm .mm-idx.mm-rowoff > .mm-col.is-tall { grid-row: auto; }
    #horizontal-multilevel-menu-new .mm .mm-idx.mm-rowoff > .mm-row { display: none; }
    /* предел раздела (класс .mm-cap ставит JS; без JS видно всё) */
    #horizontal-multilevel-menu-new .mm.mm-cap .mm-gl:not(.is-all) > li.mm-x { display: none; }
    #horizontal-multilevel-menu-new .mm .mm-gx {
        display: inline-flex; align-items: center; height: auto; margin: 2px 0 0; padding: 2px 0; border: 0; border-radius: 4px; background: none; cursor: pointer;
        font: 600 14px/1.25 var(--ds-font, 'PetraSans', sans-serif); color: var(--mm-c700);
    }
    #horizontal-multilevel-menu-new .mm .mm-gx:hover { color: var(--mm-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
    #horizontal-multilevel-menu-new .mm .mm-gh {
        display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
        margin: 0 0 6px; padding: 0 0 6px; border-bottom: 1px solid var(--mm-s200);
        font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none;
        color: var(--mm-ink); overflow-wrap: anywhere; hyphens: auto;
    }
    #horizontal-multilevel-menu-new .mm .mm-gh a {
        display: inline; height: auto; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; background: none;
    }
    #horizontal-multilevel-menu-new .mm .mm-gh a:hover { color: var(--mm-c700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
    #horizontal-multilevel-menu-new .mm .mm-gl { list-style: none; margin: 0; padding: 0; }
    #horizontal-multilevel-menu-new .mm .mm-gl li { display: block; margin: 0; padding: 0; height: auto; }
    #horizontal-multilevel-menu-new .mm .mm-gl li::marker { content: none; }
    /* перенос строки без отступа (владелец 12.10: висячий отступ некрасив); пункты разделены
       интервалом 8px, строки внутри пункта плотнее (1,25), так перенос не путается с соседом */
    #horizontal-multilevel-menu-new .mm .mm-svc {
        display: block; height: auto; margin: 0 -8px; padding: 3px 8px; text-indent: 0; background: none; border-radius: 6px;
        font-size: 14px; line-height: 1.25; font-weight: 400; color: var(--mm-s600); text-decoration: none;
        white-space: normal; overflow-wrap: anywhere; hyphens: auto;
        transition: background-color .12s var(--mm-ease), color .12s var(--mm-ease);
    }
    #horizontal-multilevel-menu-new .mm .mm-svc:hover { background: var(--mm-c50); color: var(--mm-c700); }
    #horizontal-multilevel-menu-new .mm .mm-svc small { display: block; margin-top: 1px; font-size: 13px; color: var(--mm-s500); }
    #horizontal-multilevel-menu-new .mm mark { background: var(--mm-c100); color: inherit; border-radius: 2px; padding: 0 1px; }

    /* нижняя полоса с заявкой: прилипает к низу панели. Над ней затухание, пока есть что прокручивать
       (класс .more ставит JS) */
    #horizontal-multilevel-menu-new .mm .mm-foot { position: sticky; bottom: 0; z-index: 2; background: var(--mm-ink); color: rgba(255, 255, 255, .82); }
    #horizontal-multilevel-menu-new .mm .mm-foot::before {
        content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; pointer-events: none;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff); opacity: 0; transition: opacity .2s var(--mm-ease);
    }
    #horizontal-multilevel-menu-new .mm.more .mm-foot::before { opacity: 1; }
    #horizontal-multilevel-menu-new .mm .mm-foot .mm-w { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
    #horizontal-multilevel-menu-new .mm .mm-foot p { margin: 0; font-size: 15px; line-height: 1.4; }
    #horizontal-multilevel-menu-new .mm .mm-foot b { color: #fff; font-weight: 600; }
    #horizontal-multilevel-menu-new .mm .mm-foot .mm-cta {
        display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; flex: none;
        background: var(--mm-cyan); color: var(--mm-ink); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
        transition: background-color .15s var(--mm-ease);
    }
    #horizontal-multilevel-menu-new .mm .mm-foot .mm-cta:hover { background: #fff; }
    #horizontal-multilevel-menu-new .mm .mm-foot :focus-visible { outline-color: var(--mm-cyan); }
    /* пока панель открыта, кнопки в правом нижнем углу прячем: чат Битрикс24 с крестиком (footer.php)
       и «наверх» наезжали на «Оставить заявку». Липкую полосу заявки не прячем: панель кончается над ней (--mm-bottom). */
    body:has(#horizontal-multilevel-menu-new .mm.is-open) :is(.b24-widget-button-wrapper, #cds-chat-hide, .btn-up) { visibility: hidden !important; }

    /* результаты поиска */
    #horizontal-multilevel-menu-new .mm .mm-res { min-height: 160px; }
    #horizontal-multilevel-menu-new .mm .mm-n { margin: 0 0 10px; font-size: 14px; color: var(--mm-s500); }
    #horizontal-multilevel-menu-new .mm .mm-rl {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 32px; max-width: 960px;
        list-style: none; margin: 0; padding: 0;
    }
    #horizontal-multilevel-menu-new .mm .mm-rl.one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
    #horizontal-multilevel-menu-new .mm .mm-rl .mm-svc { padding-top: 6px; padding-bottom: 6px; font-size: 15px; color: var(--mm-s700); }
    #horizontal-multilevel-menu-new .mm .mm-more { margin: 16px 0 0; font-size: 14px; color: var(--mm-s500); }
    #horizontal-multilevel-menu-new .mm .mm-more a { display: inline; height: auto; padding: 0; font-size: inherit; color: var(--mm-c700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; }
    #horizontal-multilevel-menu-new .mm .mm-empty { display: grid; gap: 14px; max-width: 62ch; padding: 4px 0 8px; color: var(--mm-s600); font-size: 15px; overflow-wrap: anywhere; }
    #horizontal-multilevel-menu-new .mm .mm-empty p { margin: 0; }
    #horizontal-multilevel-menu-new .mm .mm-empty b { color: var(--mm-ink); }
    #horizontal-multilevel-menu-new .mm .mm-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
    #horizontal-multilevel-menu-new .mm .mm-sugg a {
        display: inline-flex; align-items: center; height: auto; text-decoration: none;
        font: 500 14px/1 var(--ds-font, 'PetraSans', sans-serif); color: var(--mm-ink); background: var(--mm-s50);
        border: 1px solid var(--mm-s200); border-radius: 999px; padding: 8px 13px; cursor: pointer; margin: 0;
    }
    #horizontal-multilevel-menu-new .mm .mm-sugg a:hover { border-color: var(--mm-c700); color: var(--mm-c700); }
    #horizontal-multilevel-menu-new .mm .mm-acts { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
    #horizontal-multilevel-menu-new .mm .mm-btn {
        font: 600 14px/1 var(--ds-font, 'PetraSans', sans-serif); color: var(--mm-ink); background: #fff;
        border: 1px solid var(--mm-s300); border-radius: 8px; padding: 11px 15px; cursor: pointer; margin: 0;
    }
    #horizontal-multilevel-menu-new .mm .mm-btn:hover { border-color: var(--mm-ink); }
}

/* узкий десктоп и ноутбук с зумом: три колонки индекса */
@media (min-width: 1025px) and (max-width: 1179px) {
    #horizontal-multilevel-menu-new .mm .mm-idx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* колонки 4-5 уходят во второй ряд: строка Киберосновы встаёт последней на всю ширину */
    #horizontal-multilevel-menu-new .mm .mm-idx.has-row { grid-template-rows: none; row-gap: 28px; }
    #horizontal-multilevel-menu-new .mm .mm-idx.has-row > .mm-col.is-tall { grid-row: auto; }
    #horizontal-multilevel-menu-new .mm .mm-row { grid-column: 1 / -1; grid-row: auto; }
}
/* низкий экран (зум 200%, ноутбук с панелями): популярные прячем, поле и индекс важнее */
@media (min-width: 1025px) and (max-height: 600px) {
    #horizontal-multilevel-menu-new .mm .mm-pills { display: none; }
}

@keyframes mm-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* ───────── мобильный экран бургера ───────── */
.mobile-menu .mm-m {
    height: calc(100vh - 50px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    color: var(--mm-s700);
    font-size: 16px; line-height: 1.5;
}
@supports (height: 100dvh) {
    .mobile-menu .mm-m { height: calc(100dvh - 50px); }
}
.mobile-menu .mm-m :focus-visible { outline: 3px solid var(--mm-c700); outline-offset: 2px; border-radius: 4px; }
.mobile-menu .mm-m .mm-band { background: var(--mm-c50); border-bottom: 1px solid var(--mm-c100); padding: 12px 16px 14px; }
.mobile-menu .mm-m .mm-sf { margin: 0; }
.mobile-menu .mm-m .mm-sx {
    display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 2px 0 14px;
    background: #fff; border: 1px solid var(--mm-c150); border-radius: 8px; color: var(--mm-s500);
}
.mobile-menu .mm-m .mm-sx:focus-within { border-color: var(--mm-c700); box-shadow: 0 0 0 3px var(--mm-c100); color: var(--mm-c700); }
.mobile-menu .mm-m .mm-sx input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
    font: inherit; font-size: 16px; color: var(--mm-ink); box-shadow: none; -webkit-appearance: none; appearance: none;
}
.mobile-menu .mm-m .mm-sx input::placeholder { color: var(--mm-s500); opacity: 1; }
.mobile-menu .mm-m .mm-sx input::-webkit-search-cancel-button { display: none; }
.mobile-menu .mm-m .mm-slot { display: flex; align-items: center; }
.mobile-menu .mm-m .mm-clr {
    width: 44px; height: 44px; border: 0; border-radius: 6px; background: none; color: var(--mm-s500);
    cursor: pointer; display: grid; place-items: center; padding: 0;
}
.mobile-menu .mm-m .mm-pl { margin: 10px 0 6px; font-size: 13px; color: var(--mm-s600); }
/* таблетки в одну строку с прокруткой вбок: блок не растёт по высоте */
.mobile-menu .mm-m .mm-pills {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.mobile-menu .mm-m .mm-pills::-webkit-scrollbar { display: none; }
.mobile-menu .m-menu .mm-m .mm-pill {
    flex: none; display: inline-flex !important; align-items: center; min-height: 44px !important; padding: 0 14px !important;
    border: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(10, 34, 94, .10);
    color: var(--mm-ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.mobile-menu .mm-m .mm-body { padding: 4px 16px 28px; }
.mobile-menu .mm-m .mm-lbl { margin: 18px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mm-s500); }
.mobile-menu .mm-m .mm-acc { border-bottom: 1px solid var(--mm-s200); }
.mobile-menu .mm-m .mm-acc > summary {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0; list-style: none; cursor: pointer;
    font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--mm-ink);
}
.mobile-menu .mm-m .mm-acc > summary::-webkit-details-marker { display: none; }
.mobile-menu .mm-m .mm-acc > summary::marker { content: none; }
.mobile-menu .mm-m .mm-acc > summary svg { flex: none; margin-left: auto; transition: transform .2s var(--mm-ease); }
.mobile-menu .mm-m .mm-acc[open] > summary svg { transform: rotate(180deg); }
.mobile-menu .m-menu .mm-m ul.mm-gl,
.mobile-menu .m-menu .mm-m ul.mm-rl { height: auto !important; overflow: visible !important; margin: 0; padding: 0 0 12px !important; list-style: none; }
.mobile-menu .m-menu .mm-m ul li a.mm-svc,
.mobile-menu .m-menu .mm-m ul li a.mm-hub {
    display: block !important; min-height: 0 !important; padding: 12px 0 !important; text-indent: 0;   /* 20 + 24 = цель касания 44 px */
    font-size: 16px; line-height: 1.25; font-weight: 400; color: var(--mm-s700); text-decoration: none; overflow-wrap: anywhere;
}
.mobile-menu .m-menu .mm-m ul li a.mm-hub { display: inline-flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 6px; text-indent: 0; padding-left: 0 !important; font-weight: 600; color: var(--mm-c700); }
.mobile-menu .mm-m .mm-svc small { display: block; margin-top: 2px; text-indent: 0; font-size: 13px; color: var(--mm-s600); }
.mobile-menu .mm-m mark { background: var(--mm-c100); color: inherit; border-radius: 2px; padding: 0 1px; }
.mobile-menu .m-menu .mm-m a.mm-all {
    display: inline-flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 6px; min-height: 48px !important; padding: 0 !important; margin-top: 8px;
    font-size: 16px; font-weight: 600; color: var(--mm-c700); text-decoration: none;
}
.mobile-menu .m-menu .mm-m.mm-cap ul.mm-gl:not(.is-all) > li.mm-x { display: none !important; }
.mobile-menu .mm-m .mm-gx {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 600 16px/1.25 var(--ds-font, 'PetraSans', sans-serif); color: var(--mm-c700);
}
.mobile-menu .mm-m .mm-res { padding-top: 16px; }
.mobile-menu .mm-m .mm-foot { display: grid; gap: 12px; margin: 20px 0 8px; padding: 16px; border-radius: 10px; background: var(--mm-ink); color: rgba(255, 255, 255, .82); }
.mobile-menu .mm-m .mm-foot p { margin: 0; font-size: 15px; line-height: 1.4; }
.mobile-menu .mm-m .mm-foot b { color: #fff; font-weight: 600; }
.mobile-menu .m-menu .mm-m a.mm-cta {
    display: flex !important; align-items: center; justify-content: center; min-height: 48px !important; padding: 0 16px !important; border-radius: 8px;
    background: var(--mm-cyan); color: var(--mm-ink); font-size: 16px; font-weight: 600; text-decoration: none;
}
.mobile-menu .mm-m .mm-foot :focus-visible { outline-color: var(--mm-cyan); }
/* чат, его крестик, липкая полоса заявки и «наверх» поверх открытой шторки закрывают пункты: прячем на время меню */
body:has(#mobile-menu-toggle:checked) :is(.b24-widget-button-wrapper, #cds-chat-hide, .sticky-cta, .btn-up) { visibility: hidden !important; }
.mobile-menu .mm-m .mm-n { margin: 0 0 6px; font-size: 14px; color: var(--mm-s600); }
.mobile-menu .mm-m .mm-more { margin: 14px 0 0; font-size: 15px; color: var(--mm-s600); }
.mobile-menu .m-menu .mm-m .mm-more a { display: inline !important; min-height: 0 !important; padding: 0 !important; color: var(--mm-c700); font-weight: 600; text-decoration: underline; }
.mobile-menu .mm-m .mm-empty { display: grid; gap: 14px; color: var(--mm-s600); overflow-wrap: anywhere; }
.mobile-menu .mm-m .mm-empty p { margin: 0; }
.mobile-menu .mm-m .mm-empty b { color: var(--mm-ink); }
.mobile-menu .mm-m .mm-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
/* подсказки лежат внутри .m-menu ul li: его правило для ссылок (min-height 76px, padding, column) сбрасываем */
.mobile-menu .m-menu .mm-m .mm-sugg a {
    display: inline-flex !important; flex-direction: row !important; align-items: center; text-decoration: none;
    min-height: 44px !important; font: 500 15px/1 var(--ds-font, 'PetraSans', sans-serif); color: var(--mm-ink); background: var(--mm-s50);
    border: 1px solid var(--mm-s300); border-radius: 999px; padding: 0 16px !important; cursor: pointer; margin: 0;
}
.mobile-menu .mm-m .mm-acts { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.mobile-menu .mm-m .mm-btn {
    min-height: 44px; font: 600 15px/1 var(--ds-font, 'PetraSans', sans-serif); color: var(--mm-ink); background: #fff;
    border: 1px solid var(--mm-s300); border-radius: 8px; padding: 0 16px; cursor: pointer; margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    #horizontal-multilevel-menu-new .mm.is-open { animation: none; }
    .mm *, .mm-m *, .mm .mm-foot::before { transition: none !important; }
}