/* =========================================================
   MOBILE HEADER INSIDE V22
   Верхняя строка + навигация являются одной шапкой.
   ========================================================= */

@media(max-width:900px){

    /*
     * Делаем саму шапку выше.
     * Вторая строка теперь физически находится внутри неё.
     */
    body.site-home-modern .home-nav-v1{
        position:relative !important;
        z-index:100 !important;

        display:grid !important;

        grid-template-columns:
            minmax(88px,1fr)
            44px
            minmax(105px,1.15fr)
            40px
            44px !important;

        grid-template-rows:
            66px
            38px !important;

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

        column-gap:8px !important;
        row-gap:0 !important;

        min-height:116px !important;

        padding:
            6px
            0
            6px !important;

        box-sizing:border-box !important;

        background:#07080a !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.08) !important;

        box-shadow:
            0 12px 30px
            rgba(0,0,0,.18) !important;
    }


    /*
     * Вторая строка.
     */
    body.site-home-modern .home-links-v1{
        grid-area:links !important;

        position:relative !important;

        display:grid !important;

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

        align-items:center !important;

        width:100% !important;
        height:38px !important;

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

        box-sizing:border-box !important;

        background:#07080a !important;

        border-top:
            1px solid
            rgba(255,255,255,.07) !important;
    }


    body.site-home-modern .home-links-v1 > a,
    body.site-home-modern .home-links-v1 > button{
        position:relative !important;

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

        width:100% !important;
        height:100% !important;

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

        border:0 !important;
        border-radius:0 !important;

        background:transparent !important;

        color:rgba(255,255,255,.88) !important;

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

        letter-spacing:.045em !important;
        text-transform:uppercase !important;

        text-decoration:none !important;
        white-space:nowrap !important;

        box-shadow:none !important;
    }


    /* Тонкие разделители */
    body.site-home-modern
    .home-links-v1 > *:not(:last-child)::after{
        content:"";

        position:absolute;

        right:0;
        top:11px;

        width:1px;
        height:16px;

        background:
            rgba(255,255,255,.09);
    }


    body.site-home-modern
    .home-links-v1 > a:active,

    body.site-home-modern
    .home-links-v1 > button:active{
        color:#ff2027 !important;
    }


    /*
     * Hero больше не должен начинаться визуально
     * посреди строки навигации.
     */
    body.site-home-modern .home-hero-v1{
        position:relative !important;
    }


    /*
     * Выпадающий каталог начинается под всей шапкой,
     * а не под её первой строкой.
     */
    body.site-home-modern .catalog-panel{
        top:116px !important;
    }

}


/* =========================================================
   IPHONE / ОБЫЧНЫЙ МОБИЛЬНЫЙ РАЗМЕР
   ========================================================= */

@media(max-width:560px){

    body.site-home-modern .home-nav-v1{
        grid-template-columns:
            92px
            42px
            minmax(80px,1fr)
            40px
            44px !important;

        grid-template-rows:
            68px
            38px !important;

        min-height:120px !important;

        padding:
            7px
            0
            7px !important;

        column-gap:6px !important;
    }


    body.site-home-modern .home-links-v1{
        height:38px !important;

        padding:0 2px !important;
    }


    body.site-home-modern .home-links-v1 > a,
    body.site-home-modern .home-links-v1 > button{
        font-size:9px !important;

        letter-spacing:.025em !important;

        padding:0 2px !important;
    }


    body.site-home-modern .catalog-panel{
        top:120px !important;
    }

}


/* =========================================================
   СОВСЕМ УЗКИЙ ЭКРАН
   ========================================================= */

@media(max-width:390px){

    body.site-home-modern .home-nav-v1{
        grid-template-columns:
            86px
            40px
            minmax(72px,1fr)
            38px
            40px !important;

        column-gap:5px !important;
    }


    body.site-home-modern .home-links-v1 > a,
    body.site-home-modern .home-links-v1 > button{
        font-size:8.5px !important;
        letter-spacing:0 !important;
    }

}


/* =========================================================
   СВЕТЛАЯ ТЕМА
   ========================================================= */

@media(max-width:900px){

    html[data-site-theme="light"]
    body.site-home-modern .home-nav-v1,

    body.site-theme-light.site-home-modern .home-nav-v1{
        background:#f5f5f3 !important;

        border-bottom-color:
            rgba(0,0,0,.09) !important;

        box-shadow:
            0 12px 28px
            rgba(0,0,0,.08) !important;
    }


    html[data-site-theme="light"]
    body.site-home-modern .home-links-v1,

    body.site-theme-light.site-home-modern .home-links-v1{
        background:#f5f5f3 !important;

        border-top-color:
            rgba(0,0,0,.08) !important;
    }


    html[data-site-theme="light"]
    body.site-home-modern .home-links-v1 > a,

    html[data-site-theme="light"]
    body.site-home-modern .home-links-v1 > button,

    body.site-theme-light.site-home-modern
    .home-links-v1 > a,

    body.site-theme-light.site-home-modern
    .home-links-v1 > button{
        color:#111 !important;
    }


    html[data-site-theme="light"]
    body.site-home-modern
    .home-links-v1 > *:not(:last-child)::after,

    body.site-theme-light.site-home-modern
    .home-links-v1 > *:not(:last-child)::after{
        background:
            rgba(0,0,0,.09) !important;
    }

}