body.show-menu {
    overflow: hidden;
}

#menuToggle {
    display: none;
}

.navBox .nav .has-sub > h3 > a {
    padding-right: 35px
}

.navBox .nav .has-sub .sub {
    background: url("../images/arrow-down.svg") no-repeat;
    background-size: contain;
}

.navBox .nav .has-sub.choice .sub,
.navBox .nav .has-sub a:hover .sub {
    background: url("../images/arrow-down-white.svg") no-repeat;
    background-size: contain;
}

@media (max-width: 767px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        width: 100% !important;
    }
    
    /* Важно: не ставим max-width всем элементам (ломает Owl Carousel: .owl-stage должен быть шире 100%).
       box-sizing оставляем глобально, а max-width применяем точечно к медиа. */
    body * {
        box-sizing: border-box;
    }

    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    .header {
        height: auto !important;
        padding-bottom: 6px;
        padding-top: 6px;
        overflow-x: hidden;
        max-width: 100vw;
    }

    .header .inner {
        height: auto;
        padding-right: 12px;
        padding-left: 12px;
        padding-top: 6px;
        padding-bottom: 6px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .header .inner .txt span {
	font-size: 14px;
    }

    .header .inner h3 {
        font-size: 14px;
    }

    .header .inner .logo {
        margin-top: 0;
    }

    .header .inner .txt {
        font-size: 11px;
        position: static !important;
        right: auto;
        top: auto;
        text-align: left;
        padding-right: 0 !important;
        margin-top: 2px;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        word-wrap: break-word;
    }
    
    .header .inner .txt span {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.2 !important;
    }
    
    .header .inner .txt span br {
        display: block !important;
    }

    /* Скрываем контакты в header когда меню открыто */
    .show-menu .header .inner .txt {
        display: none;
    }

    .navBox {
        top: 0;
        bottom: auto;
        left: auto;
        right: 0;
        transform: none;
    }

    /* Overlay для затемнения фона когда меню открыто */
    .navBox::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s cubic-bezier(0.77,0.2,0.05,1.0), visibility 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        z-index: 1000;
        pointer-events: none;
    }

    .show-menu .navBox::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .navBox .menuToggle {
        display: block;
        position: relative;
        top: auto;
        right: auto;
        margin-left: auto;

        z-index: 1001;

        -webkit-user-select: none;
        user-select: none;
    }

    .navBox .menuToggle span
    {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;

        background: #000;
        border-radius: 3px;

        z-index: 1;

        transform-origin: 4px 0;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
    }

    .navBox .menuToggle span:first-child
    {
        transform-origin: 0 0;
    }

    .navBox .menuToggle span:last-child
    {
        transform-origin: 0 100%;
    }

    .show-menu .navBox .menuToggle span
    {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

    .show-menu .navBox .menuToggle span:nth-last-child(2)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    .show-menu .navBox .menuToggle span:nth-last-child(1)
    {
        transform: rotate(-45deg) translate(-1px, 1px);
    }

    .navBox .nav
    {
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        max-width: 400px;
        height: 100vh;
        padding: 80px 30px 210px;
        background-color: #F5F6FA;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0 0;
        transform: translate(100%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        z-index: 1001;
    }

    .nav > div > ul {display: block}

    .show-menu .navBox .nav {
        box-shadow: 0 0 10px #85888C;
        z-index: 1001;
    }

    .navBox .nav > div:first-child {
        height: 100%;
        overflow: auto;
    }

    .navBox .nav li
    {
        display: block;
        transition-delay: 2s;
        float: none;
        text-align: left;
    }

    .show-menu .navBox .nav
    {
        transform: none;
    }

    .nav > div > ul > li > ul {
        position: relative;
        top: 0;
        width: 100%;
        background: none;
        box-shadow: none;
    }

    .navBox .nav .txt {
        display: block;
        position: absolute;
        text-align: left;
        left: 50px;
        bottom: 50px;
        top: auto;
    }

    .navBox .nav .txt span {
        font-size: 26px;
    }

    .nav > div > ul li h3 a {
        padding: 0 10px;
    }
}