/* =========================================================================
   metall-rs.ru — адаптивная mobile/tablet шапка (<= 1100px)
   Namespace: .mrs-* / #mrs
   Desktop (> 1100px и НЕ mobile-UA) не затрагивается.
   ========================================================================= */

:root{
    --mrs-header-h: 54px;
    --mrs-botnav-h: 58px;

    --mrs-accent: #e62a34;              /* совпадает с rgb(230,42,52) сайта */
    --mrs-ink: #121212;
    --mrs-muted: #6b6b6b;
    --mrs-line: #ececec;
    --mrs-bg: #ffffff;
    --mrs-bg-soft: #f4f5f6;

    /* единая система слоёв — без хаоса вида 999999 */
    --mrs-z-header: 900;
    --mrs-z-botnav: 900;
    --mrs-z-overlay: 1000;
    --mrs-z-drawer: 1010;
    --mrs-z-catalog: 1020;
    --mrs-z-search: 1030;

    --mrs-ease: cubic-bezier(.4, 0, .2, 1);
    --mrs-dur: .3s;
}

/* по умолчанию (desktop) весь мобильный слой выключен */
#mrs{ display: none; }

/* ---------- ВКЛЮЧЕНИЕ мобильного слоя ---------- */
/* 1) любой браузер с шириной вьюпорта <= 1100px */
@media (max-width: 1100px){
    #mrs{ display: block; }

    #myHeader{ display: none !important; }

    body{
        padding-top: var(--mrs-header-h);
        padding-bottom: calc(var(--mrs-botnav-h) + env(safe-area-inset-bottom, 0px));
    }

    /* нейтрализуем «ручные» отступы под фиксированную desktop-шапку */
    .slider_right{ margin-top: 12px !important; }
    #breadcrumbs{ margin-top: 12px !important; }
    .cart_backround #breadcrumbs{ padding-top: 12px !important; }

    /* плавающие кнопки не должны перекрывать нижнее меню */
    #fab-wrap,
    .roulette-fab{
        bottom: calc(var(--mrs-botnav-h) + env(safe-area-inset-bottom, 0px) + 14px) !important;
    }
}

/* 2) устройство определено сервером как mobile/tablet (Mobile_Detect) —
      desktop-шапка вообще не выведена в разметку, поэтому включаем всегда */
body.mrs-ua-mobile #mrs{ display: block; }
body.mrs-ua-mobile #myHeader{ display: none !important; }
body.mrs-ua-mobile{
    padding-top: var(--mrs-header-h);
    padding-bottom: calc(var(--mrs-botnav-h) + env(safe-area-inset-bottom, 0px));
}
body.mrs-ua-mobile .slider_right{ margin-top: 12px !important; }
body.mrs-ua-mobile #breadcrumbs{ margin-top: 12px !important; }
body.mrs-ua-mobile .cart_backround #breadcrumbs{ padding-top: 12px !important; }
body.mrs-ua-mobile #fab-wrap,
body.mrs-ua-mobile .roulette-fab{
    bottom: calc(var(--mrs-botnav-h) + env(safe-area-inset-bottom, 0px) + 14px) !important;
}

/* блокировка прокрутки страницы позади открытых слоёв */
body.mrs-scroll-locked{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}
body.mrs-scroll-locked #fab-wrap,
body.mrs-scroll-locked .roulette-fab{ display: none !important; }

#mrs *,
#mrs *::before,
#mrs *::after{ box-sizing: border-box; }

#mrs button{
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* =======================================================================
   1. ВЕРХНЯЯ МОБИЛЬНАЯ ШАПКА  [ Burger ] [ LOGO ] [ Phone ] [ Search ]
   ======================================================================= */
.mrs-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mrs-header-h);
    display: flex;
    align-items: center;
    padding: 0 6px;
    background: var(--mrs-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    z-index: var(--mrs-z-header);
    overflow: hidden;
}
.mrs-header__group{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.mrs-header__group--right{ margin-left: auto; }

.mrs-header__logo{
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 190px);
    overflow: hidden;
}
.mrs-header__logo img{
    display: block;
    height: 22px;
    width: auto;
    max-width: 100%;
}

/* универсальная touch-кнопка >= 44x44 */
.mrs-iconbtn{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--mrs-ink);
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
}
.mrs-iconbtn:active{ background: rgba(0, 0, 0, .06); }
.mrs-iconbtn svg{
    width: 24px;
    height: 24px;
    display: block;
}

/* =======================================================================
   2. ПОЛНОЭКРАННЫЙ ПОИСК
   ======================================================================= */
.mrs-search{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--mrs-bg);
    z-index: var(--mrs-z-search);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s var(--mrs-ease), transform .22s var(--mrs-ease);
}
.mrs-search.is-open{
    opacity: 1;
    transform: none;
}
.mrs-search[hidden]{ display: none; }

.mrs-search__head{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mrs-line);
    flex: 0 0 auto;
}
.mrs-search__fieldwrap{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    background: var(--mrs-bg-soft);
    border-radius: 12px;
    padding: 0 10px;
}
.mrs-search__fieldwrap svg{
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--mrs-muted);
}
.mrs-search__field{
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 0;
    background: none;
    outline: none;
    font-size: 16px;                 /* >=16px — iOS не зумит */
    color: var(--mrs-ink);
}
.mrs-search__clear{
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mrs-muted);
    flex: 0 0 auto;
}
.mrs-search__clear svg{ width: 16px; height: 16px; }

.mrs-search__results{
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 12px calc(24px + env(safe-area-inset-bottom, 0px));
}
.mrs-search__results .one_s_res{ padding-left: 4px; }

/* =======================================================================
   3-4-7. BURGER MENU / боковая панель справа
   ======================================================================= */
.mrs-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity var(--mrs-dur) var(--mrs-ease);
    z-index: var(--mrs-z-overlay);
}
.mrs-overlay.is-visible{ opacity: 1; }
.mrs-overlay[hidden]{ display: none; }

.mrs-drawer{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(90vw, 420px);
    background: var(--mrs-bg);
    z-index: var(--mrs-z-drawer);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform var(--mrs-dur) var(--mrs-ease);
}
.mrs-drawer.is-open{ transform: translateX(0); }

.mrs-drawer__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 6px 8px 16px;
    border-bottom: 1px solid var(--mrs-line);
    flex: 0 0 auto;
}
.mrs-drawer__title{
    font-size: 16px;
    font-weight: 500;
}
.mrs-drawer__body{
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

/* --- 4. телефон + мессенджеры --- */
.mrs-contacts{
    padding: 14px 16px 16px;
    border-bottom: 1px solid var(--mrs-line);
}
.mrs-contacts__phone{
    font-size: 20px;
    font-weight: 500;
    color: var(--mrs-ink);
    display: inline-block;
    letter-spacing: .2px;
}
.mrs-contacts__note{
    margin-top: 4px;
    font-size: 12px;
    color: var(--mrs-muted);
}
.mrs-contacts__row{
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.mrs-messenger{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mrs-bg-soft);
    flex: 0 0 auto;
}
.mrs-messenger img{
    width: 24px;
    height: 24px;
    display: block;
}

/* --- 5. крупный пункт «Каталог» --- */
.mrs-catbtn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: 500;
    color: var(--mrs-ink);
    border-bottom: 1px solid var(--mrs-line);
}
.mrs-catbtn__ic{
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.mrs-catbtn__ic svg{ width: 22px; height: 22px; }
.mrs-catbtn__caret{
    color: var(--mrs-muted);
    flex: 0 0 auto;
}
.mrs-catbtn__caret svg{ width: 20px; height: 20px; }
.mrs-catbtn:active{ background: rgba(0, 0, 0, .04); }

/* --- 7. остальные пункты меню --- */
.mrs-menu-list{
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
.mrs-menu-list a{
    display: block;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--mrs-ink);
}
.mrs-menu-list a:active{ background: rgba(0, 0, 0, .05); }

.mrs-drawer__account{
    margin-top: auto;
    border-top: 1px solid var(--mrs-line);
    padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
.mrs-drawer__account a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--mrs-ink);
}
.mrs-drawer__account a svg{ width: 22px; height: 22px; color: var(--mrs-muted); }
.mrs-drawer__account .mrs-user-name{ font-weight: 500; }

/* =======================================================================
   5-6. ПОЛНОЭКРАННЫЙ МНОГОУРОВНЕВЫЙ КАТАЛОГ
   ======================================================================= */
.mrs-catalog{
    position: fixed;
    inset: 0;
    background: var(--mrs-bg);
    z-index: var(--mrs-z-catalog);
    transform: translateX(100%);
    transition: transform var(--mrs-dur) var(--mrs-ease);
}
.mrs-catalog.is-open{ transform: translateX(0); }
.mrs-catalog[hidden]{ display: none; }

.mrs-catalog__viewport{
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mrs-catalog__panel{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--mrs-bg);
    transform: translateX(100%);
    transition: transform var(--mrs-dur) var(--mrs-ease);
}
.mrs-catalog__panel.is-root{ transform: none; }
.mrs-catalog__panel.is-active{ transform: translateX(0); }

.mrs-catalog__bar{
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--mrs-header-h);
    padding: 0 6px;
    border-bottom: 1px solid var(--mrs-line);
    flex: 0 0 auto;
}
.mrs-catalog__title{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mrs-catalog__back{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    padding: 0 8px 0 4px;
    color: var(--mrs-ink);
    flex: 0 0 auto;
}
.mrs-catalog__back svg{ width: 22px; height: 22px; }
.mrs-catalog__close{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mrs-ink);
    flex: 0 0 auto;
}
.mrs-catalog__close svg{ width: 22px; height: 22px; }

.mrs-catalog__scroll{
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mrs-catalog__list{
    list-style: none;
    margin: 0;
    padding: 2px 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
.mrs-catalog__link,
.mrs-catalog__enter{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 14px;
    text-align: left;
    font-size: 15px;
    color: var(--mrs-ink);
    border-bottom: 1px solid var(--mrs-line);
}
.mrs-catalog__enter{ justify-content: space-between; }
.mrs-catalog__row{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.mrs-catalog__name{
    min-width: 0;
    overflow-wrap: anywhere;
}
.mrs-catalog__ic{
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}
.mrs-catalog__caret{
    color: var(--mrs-muted);
    flex: 0 0 auto;
    margin-left: 10px;
}
.mrs-catalog__caret svg{ width: 20px; height: 20px; display: block; }
.mrs-catalog__link:active,
.mrs-catalog__enter:active{ background: rgba(0, 0, 0, .04); }

.mrs-catalog__item--all a{
    display: block;
    padding: 14px 14px;
    font-weight: 500;
    color: var(--mrs-accent);
    border-bottom: 1px solid var(--mrs-line);
}

/* =======================================================================
   8-9-10. НИЖНЕЕ МОБИЛЬНОЕ МЕНЮ
   ======================================================================= */
.mrs-botnav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: var(--mrs-bg);
    border-top: 1px solid var(--mrs-line);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: var(--mrs-z-botnav);
}
.mrs-botnav__item{
    flex: 1 1 0;
    min-width: 0;
    height: var(--mrs-botnav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    font-size: 10px;
    line-height: 1;
    color: var(--mrs-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.mrs-botnav__item svg{
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}
.mrs-botnav__label{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mrs-botnav__item.is-active{ color: var(--mrs-accent); }
.mrs-botnav__item:active{ background: rgba(0, 0, 0, .04); }

/* бейдж корзины/избранного — переопределяем глобальные .cart_count/.com_count */
.mrs-botnav__badge.cart_count,
.mrs-botnav__badge.com_count,
.mrs-botnav__badge{
    position: absolute;
    top: 3px;
    left: 50%;
    right: auto !important;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--mrs-accent);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    display: inline-block;
    text-transform: none;
}

/* =======================================================================
   14. prefers-reduced-motion
   ======================================================================= */
@media (prefers-reduced-motion: reduce){
    .mrs-overlay,
    .mrs-drawer,
    .mrs-search,
    .mrs-catalog,
    .mrs-catalog__panel{
        transition-duration: .01ms !important;
    }
}

/* =======================================================================
   15. RESPONSIVE — узкие экраны
   ======================================================================= */
@media (max-width: 360px){
    .mrs-header__logo{ max-width: calc(100% - 180px); }
    .mrs-botnav__item{ font-size: 9px; }
    .mrs-contacts__phone{ font-size: 18px; }
}
@media (max-width: 320px){
    .mrs-iconbtn{ width: 40px; }
    .mrs-header__logo img{ height: 20px; }
}

/* голосовой поиск в мобильном оверлее */
.mrs-search__voice.is-listening{ color: var(--mrs-accent); }
.mrs-search__voice.is-listening svg{ animation: mrsVoicePulseM 1s ease-in-out infinite; }
@keyframes mrsVoicePulseM{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce){ .mrs-search__voice.is-listening svg{ animation: none; } }