
/* ============================================================
   SMOKEDONALDS
   MOBILE HEADER TWO ROWS V50.1
   ============================================================ */

@media (max-width:700px){

    /* ========================================================
       TOPBAR
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .topbar{

        position:absolute!important;

        top:0!important;
        left:0!important;
        right:0!important;

        width:100%!important;

        background:transparent!important;
        border:0!important;
        box-shadow:none!important;

        overflow:visible!important;

        z-index:1000!important;

    }


    /* ========================================================
       ГЛАВНАЯ СЕТКА
       1 строка: logo catalog city theme account
       2 строка: links links links links links
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .topbar
    .shell.home-nav-v1{

        width:calc(100% - 20px)!important;
        max-width:none!important;

        min-height:118px!important;
        height:auto!important;

        margin:0 auto!important;

        padding:
            8px
            0
            9px!important;

        display:grid!important;

        grid-template-columns:
            112px
            44px
            minmax(88px,1fr)
            42px
            42px!important;

        grid-template-rows:
            54px
            40px!important;

        grid-template-areas:
            "logo catalog city theme account"
            "links links links links links"!important;

        column-gap:7px!important;
        row-gap:7px!important;

        align-items:center!important;

        transform:none!important;
        translate:none!important;

        overflow:visible!important;

        box-sizing:border-box!important;

    }


    /* старые desktop-сдвиги отключаем только на mobile */

    html[data-site-theme]
    body.site-home-modern
    .home-nav-v1 > *{

        transform:none!important;
        translate:none!important;

        margin-top:0!important;
        margin-bottom:0!important;

    }


    /* ========================================================
       LOGO
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .home-logo-v1{

        grid-area:logo!important;

        position:relative!important;

        width:112px!important;
        min-width:112px!important;
        max-width:112px!important;

        height:52px!important;

        margin:0!important;
        padding:0!important;

        display:flex!important;

        align-items:center!important;
        justify-content:flex-start!important;

        transform:none!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-logo-v1 img{

        display:block!important;

        width:108px!important;
        max-width:108px!important;

        height:50px!important;

        margin:0!important;

        object-fit:contain!important;
        object-position:left center!important;

        transform:none!important;

    }


    /* ========================================================
       CATALOG
       только иконка
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .home-catalog-v1{

        grid-area:catalog!important;

        width:44px!important;
        min-width:44px!important;
        max-width:44px!important;

        height:44px!important;
        min-height:44px!important;
        max-height:44px!important;

        margin:0!important;
        padding:0!important;

        display:flex!important;

        align-items:center!important;
        justify-content:center!important;

        gap:0!important;

        font-size:0!important;

        border-radius:12px!important;

        transform:none!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-catalog-v1:hover,

    html[data-site-theme]
    body.site-home-modern
    .home-catalog-v1:active{

        transform:none!important;

    }


    /* оставляем иконку сетки */

    html[data-site-theme]
    body.site-home-modern
    .home-catalog-icon-v1{

        display:grid!important;

        width:16px!important;
        height:16px!important;

        transform:none!important;

    }


    /* ========================================================
       CITY
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .home-city-v1{

        grid-area:city!important;

        position:relative!important;

        width:100%!important;
        min-width:0!important;
        max-width:none!important;

        height:44px!important;
        min-height:44px!important;
        max-height:44px!important;

        margin:0!important;
        padding:
            0
            9px!important;

        display:grid!important;

        grid-template-columns:
            13px
            minmax(0,1fr)
            7px!important;

        gap:6px!important;

        align-items:center!important;

        border-radius:12px!important;

        overflow:hidden!important;

        transform:none!important;
        translate:none!important;

        box-sizing:border-box!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-city-v1 b{

        min-width:0!important;

        display:block!important;

        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;

        font-size:11px!important;

        line-height:1!important;

    }


    /* ========================================================
       THEME
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .site-theme-toggle-v33{

        grid-area:theme!important;

        position:relative!important;

        left:auto!important;
        right:auto!important;
        top:auto!important;
        bottom:auto!important;

        width:42px!important;
        min-width:42px!important;
        max-width:42px!important;

        height:42px!important;
        min-height:42px!important;
        max-height:42px!important;

        margin:0!important;
        padding:0!important;

        border-radius:50%!important;

        transform:none!important;
        translate:none!important;

        transition:none!important;
        animation:none!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .site-theme-toggle-v33:hover,

    html[data-site-theme]
    body.site-home-modern
    .site-theme-toggle-v33:active{

        transform:none!important;
        translate:none!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .site-theme-toggle-v33 svg{

        position:absolute!important;

        left:50%!important;
        top:50%!important;

        width:19px!important;
        height:19px!important;

        margin:0!important;

        transform:translate(-50%,-50%)!important;

        transition:none!important;
        animation:none!important;

    }


    /* ========================================================
       ACCOUNT
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .home-account-v1{

        grid-area:account!important;

        position:relative!important;

        width:42px!important;
        min-width:42px!important;
        max-width:42px!important;

        height:42px!important;
        min-height:42px!important;
        max-height:42px!important;

        margin:0!important;
        padding:0!important;

        display:flex!important;

        align-items:center!important;
        justify-content:center!important;

        border-radius:50%!important;

        font-size:11px!important;

        transform:none!important;
        translate:none!important;

    }


    /* ========================================================
       ВТОРАЯ СТРОКА
       МАГАЗИНЫ / О НАС / КОНТАКТЫ
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .home-links-v1{

        grid-area:links!important;

        position:relative!important;

        left:auto!important;
        right:auto!important;
        top:auto!important;
        bottom:auto!important;

        width:100%!important;
        min-width:0!important;

        height:40px!important;
        min-height:40px!important;

        margin:0!important;
        padding:0!important;

        display:grid!important;

        grid-template-columns:
            repeat(3,minmax(0,1fr))!important;

        gap:7px!important;

        align-items:stretch!important;

        visibility:visible!important;
        overflow:visible!important;

        transform:none!important;
        translate:none!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-links-v1 a,

    html[data-site-theme]
    body.site-home-modern
    .home-links-v1 button{

        width:100%!important;
        min-width:0!important;

        height:40px!important;
        min-height:40px!important;

        margin:0!important;
        padding:
            0
            5px!important;

        display:flex!important;

        align-items:center!important;
        justify-content:center!important;

        border:
            1px solid
            rgba(255,255,255,.14)!important;

        border-radius:10px!important;

        background:
            rgba(255,255,255,.055)!important;

        backdrop-filter:blur(12px)!important;
        -webkit-backdrop-filter:blur(12px)!important;

        color:#fff!important;

        font-size:10px!important;
        line-height:1!important;

        white-space:nowrap!important;

        text-align:center!important;

        text-shadow:
            0 1px 8px
            rgba(0,0,0,.5)!important;

        transform:none!important;

        box-sizing:border-box!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-links-v1 a:hover,

    html[data-site-theme]
    body.site-home-modern
    .home-links-v1 button:hover{

        transform:none!important;

        background:
            rgba(255,255,255,.09)!important;

    }


    /* ========================================================
       ЕДИНЫЙ GLASS
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .home-city-v1,

    html[data-site-theme]
    body.site-home-modern
    .site-theme-toggle-v33,

    html[data-site-theme]
    body.site-home-modern
    .home-account-v1{

        border:
            1px solid
            rgba(255,255,255,.16)!important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.11),
                rgba(255,255,255,.025)
            )!important;

        color:#fff!important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.13),
            0 6px 16px rgba(0,0,0,.18)!important;

        backdrop-filter:
            blur(14px)!important;

        -webkit-backdrop-filter:
            blur(14px)!important;

    }


    /* ========================================================
       УПРАВЛЯТЬ
       Ниже обеих строк, справа.
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .hero-manage{

        top:128px!important;
        right:16px!important;

        margin:0!important;

        z-index:20!important;

    }


    /* ========================================================
       КАТАЛОГ DROPDOWN
       ======================================================== */

    html[data-site-theme]
    body.site-home-modern
    .catalog-panel{

        top:118px!important;

    }


    /* декоративный дым не влияет на размеры */

    html[data-site-theme]
    body.site-home-modern
    .home-smoke-svg-v3{

        pointer-events:none!important;

        max-width:120px!important;
        max-height:70px!important;

    }

}


/* ============================================================
   IPHONE / ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ============================================================ */

@media (max-width:390px){

    html[data-site-theme]
    body.site-home-modern
    .topbar
    .shell.home-nav-v1{

        width:calc(100% - 14px)!important;

        grid-template-columns:
            96px
            40px
            minmax(76px,1fr)
            40px
            40px!important;

        column-gap:5px!important;
        row-gap:6px!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-logo-v1{

        width:96px!important;
        min-width:96px!important;
        max-width:96px!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-logo-v1 img{

        width:94px!important;
        max-width:94px!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-catalog-v1{

        width:40px!important;
        min-width:40px!important;
        max-width:40px!important;

        height:40px!important;
        min-height:40px!important;
        max-height:40px!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-city-v1{

        height:40px!important;
        min-height:40px!important;
        max-height:40px!important;

        padding:
            0
            6px!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-city-v1 b{

        font-size:10px!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .site-theme-toggle-v33,

    html[data-site-theme]
    body.site-home-modern
    .home-account-v1{

        width:40px!important;
        min-width:40px!important;
        max-width:40px!important;

        height:40px!important;
        min-height:40px!important;
        max-height:40px!important;

    }


    html[data-site-theme]
    body.site-home-modern
    .home-links-v1 a,

    html[data-site-theme]
    body.site-home-modern
    .home-links-v1 button{

        font-size:9px!important;

        padding:
            0
            3px!important;

    }

}

