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

   Файл подключается ТОЛЬКО на мультпласте и ПОСЛЕ перенесённых стилей
   старого сайта (блок 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}
    }
}


/* --- Копирование почты и телефона на странице контактов ----------------

   Разметку добавляет copy-contact.js: оборачивает ссылку в .mp-copy-row и
   ставит рядом кнопку .mp-copy. Без скрипта классов нет, и страница
   выглядит как раньше.

   Строка — блочная, как была сама ссылка (display:block в вёрстке старого
   сайта), поэтому строки не съезжают. Ссылка внутри сжимается до ширины
   текста: нажатие мимо текста больше не открывает почтовую программу, а
   текст можно выделить мышью. -webkit-user-drag — для Safari: там
   атрибута draggable недостаточно.

   Селектор с .contact-block-inner не для красоты: у старого сайта
   `.contact-block-inner:not(.show-map) a {display:block}`, и :not(.класс)
   добавляет силы — короткий .mp-copy-row > a ему проигрывал. */
.mp-copy-row{display:block}
.contact-block-inner .mp-copy-row > a{display:inline;-webkit-user-drag:none;user-select:text}

/* Кнопка ниже строки (18 px при строке 20) и прижата к её верху с отступом
   в пиксель: так она помещается в строку при любом шрифте. С выравниванием
   по базовой линии кнопка вылезала на пиксель, а на телефоне базовая линия
   другая, и строки раздвигались. Зона нажатия больше самой кнопки —
   псевдоэлемент на 10 px во все стороны: пальцу 18 px мало. */
.mp-copy{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:18px;margin:1px 0 0 6px;padding:0;
    border:0;border-radius:4px;background:transparent;
    color:inherit;opacity:.5;cursor:pointer;vertical-align:top;
    -webkit-tap-highlight-color:transparent;
    transition:opacity .15s ease,background-color .15s ease;
}
.mp-copy:before{content:"";position:absolute;inset:-10px}
.mp-copy:hover,
.mp-copy:focus-visible{opacity:1;background:rgba(77,133,197,.12)}
.mp-copy:focus-visible{outline:2px solid #4D85C5;outline-offset:1px}
.mp-copy.is-done{opacity:1;color:#2E8B57}

/* Подсказка «Скопировано» над кнопкой. */
.mp-copy[data-tip]:after{
    content:attr(data-tip);
    position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
    padding:4px 8px;border-radius:6px;
    background:#1F2F40;color:#fff;
    font-size:12px;line-height:16px;white-space:nowrap;
    pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
    .mp-copy{transition:none}
}