/* Наши правки вёрстки мультпласта.

   Файл подключается ТОЛЬКО на мультпласте и ПОСЛЕ перенесённых стилей
   старого сайта (блок site_css в base.html): при равной силе селектора
   выигрывает последний, поэтому задирать специфичность не нужно. */


/* --- Разделы каталога на телефоне: выпадающий список --------------------

   На /catalog/ и страницах разделов колонка «Продукция компании» до 850 px
   встаёт во всю ширину НАД плитками (template21: .catalog-right2 {width:100%;
   float:none}). Восемнадцать ссылок занимали около 470 px — весь первый
   экран телефона, и товары начинались только со второго.

   Сворачиваем список в карточку с кнопкой: сверху название текущего
   раздела, по нажатию раскрывается весь список. На широком экране колонка
   сбоку и видна целиком, как была — правила только внутри медиазапроса.

   Граница 850, а не 800: между ними (iPad 820 и 834) колонка уже стоит над
   плитками, а липкой перестаёт быть только ниже 800. Липкость в этой полосе
   гасим сами: закреплённая наверху кнопка шириной 220 px над плитками во
   всю ширину выглядела бы случайностью. */

.mp-catnav__toggle{display:none}

@media (max-width:850px){

    .catalog-sidebar.mp-catnav,
    .catalog-sidebar.mp-catnav.sidebar-fixed{position:static;width:auto;top:auto}

    /* Отступ от заголовка «Продукция компании» на витрине: у заголовка ни
       полей, ни запаса в высоте строки (18/18), и карточка вставала
       вплотную. На странице раздела обёртка заголовка пустая — там карточка
       первая на странице, и отступ ей не нужен. */
    .container-title:not(:empty) + .catalog-right2{margin-top:16px}

    .mp-catnav .catalog-sidebar-inner{
        border-radius:12px;
        overflow:hidden;
        box-shadow:0 1px 2px rgba(0,40,86,.06),0 8px 24px rgba(0,40,86,.08);
    }

    /* Кнопка: подпись мелко, раздел крупно, стрелка в круге справа. */
    .mp-catnav .mp-catnav__toggle{
        display:flex;align-items:center;gap:12px;
        width:100%;margin:0;padding:14px 16px 14px 18px;
        border:0;background:#fff;color:#002856;
        font:inherit;text-align:left;cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }
    .mp-catnav__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
    .mp-catnav__label{font-size:12px;line-height:16px;color:#6B819A}
    .mp-catnav__value{
        font-size:17px;line-height:22px;font-weight:600;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .mp-catnav__icon{
        flex:0 0 36px;height:36px;border-radius:50%;
        background:#EEF4FB;position:relative;
    }
    .mp-catnav__icon:before{
        content:"";position:absolute;left:50%;top:50%;
        width:8px;height:8px;border:solid #002856;border-width:0 2px 2px 0;
        transform:translate(-50%,-70%) rotate(45deg);
        transition:transform .25s ease;
    }
    .mp-catnav--open .mp-catnav__icon:before{transform:translate(-50%,-25%) rotate(-135deg)}

    /* Сворачивание через grid-template-rows 0fr -> 1fr: высота анимируется
       плавно и без замера списка скриптом. visibility прячет ссылки от
       клавиатуры и читалки, пока список закрыт, — с задержкой на время
       анимации, чтобы пункты не пропадали посреди сворачивания. */
    .mp-catnav .main-menu{
        display:grid;grid-template-rows:0fr;
        transition:grid-template-rows .3s ease;
    }
    .mp-catnav .main-menu > nav{
        min-height:0;overflow:hidden;
        visibility:hidden;transition:visibility 0s linear .3s;
    }
    .mp-catnav--open .main-menu{grid-template-rows:1fr}
    .mp-catnav--open .main-menu > nav{visibility:visible;transition-delay:0s}

    /* Пункты: пальцу нужно около 44 px — было 25. */
    .mp-catnav .listmeny ul{padding:0;border-top:1px solid #E3EBF3}
    .mp-catnav .listmeny li + li{border-top:1px solid #EEF3F8}
    .mp-catnav .listmeny a{padding:12px 18px;font-size:15px;line-height:20px}
    .mp-catnav .listmeny li.current > a{
        font-weight:600;background:#F2F7FC;
        box-shadow:inset 3px 0 0 #4D85C5;
    }

    @media (prefers-reduced-motion:reduce){
        .mp-catnav .main-menu,
        .mp-catnav__icon:before{transition:none}
    }
}