/* ============================================================
   CATALOG REMOVE FULLWIDTH LAYER V87

   Реальная проблема:
   .catalog-panel на HOME:
       left:0;
       right:0;

   То есть при открытии он создаёт элемент
   шириной во весь экран.

   Теперь panel существует ТОЛЬКО вокруг dropdown.
   ============================================================ */


/* ============================================================
   DESKTOP
   ============================================================ */

html body.site-home-modern
.topbar
.catalog-panel{

    /*
     * Больше НЕ растягиваем поверх всей страницы.
     */
    left:
        max(
            20px,
            calc(
                (
                    100% -
                    min(
                        1600px,
                        calc(100% - 64px)
                    )
                ) / 2
                + 238px
            )
        )!important;

    right:
        auto!important;


    /*
     * Ровно размер выпадающего каталога.
     */
    width:
        520px!important;

    max-width:
        min(
            520px,
            calc(100vw - 40px)
        )!important;


    /*
     * Сам panel вообще ничего не рисует.
     */
    background:
        transparent!important;

    background-color:
        transparent!important;

    background-image:
        none!important;

    border:
        0!important;

    outline:
        0!important;

    box-shadow:
        none!important;

    filter:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;


    /*
     * Убираем нижний запас,
     * который раньше входил в ту самую
     * полноширинную область.
     */
    padding:
        8px 0 0!important;

    margin:
        0!important;

    overflow:
        visible!important;

    pointer-events:
        none!important;
}


/* ============================================================
   ACTIVE
   ============================================================ */

html body.site-home-modern
.topbar
.catalog-panel.active{

    display:
        block!important;

    background:
        transparent!important;

    box-shadow:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;
}


/* ============================================================
   INNER

   Больше никакой grid-оболочки шириной 1600px.
   ============================================================ */

html body.site-home-modern
.topbar
.catalog-panel
.catalog-panel-inner{

    width:
        100%!important;

    max-width:
        none!important;

    margin:
        0!important;

    padding:
        0!important;

    display:
        block!important;

    background:
        transparent!important;

    border:
        0!important;

    outline:
        0!important;

    box-shadow:
        none!important;

    filter:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;

    pointer-events:
        none!important;
}


/* ============================================================
   DROPDOWN

   Сам каталог остаётся тем же.
   Меняем только привязку к старому grid.
   ============================================================ */

html body.site-home-modern
.topbar
.catalog-panel
.catalog-dropdown{

    /*
     * Старый:
     * grid-column:2 / span 2
     *
     * больше не нужен.
     */
    grid-column:
        auto!important;

    justify-self:
        auto!important;

    width:
        100%!important;

    max-width:
        100%!important;

    margin:
        0!important;

    pointer-events:
        auto!important;
}


/* ============================================================
   НИКАКИХ PSEUDO-OVERLAY
   ============================================================ */

html body.site-home-modern
.topbar
.catalog-panel::before,

html body.site-home-modern
.topbar
.catalog-panel::after,

html body.site-home-modern
.topbar
.catalog-panel
.catalog-panel-inner::before,

html body.site-home-modern
.topbar
.catalog-panel
.catalog-panel-inner::after{

    content:
        none!important;

    display:
        none!important;

    background:
        none!important;

    box-shadow:
        none!important;
}


/* ============================================================
   LIGHT

   Никакой отдельной полноширинной области.
   ============================================================ */

html[data-site-theme="light"]
body.site-home-modern
.topbar
.catalog-panel,

body.site-home-modern.site-theme-light
.topbar
.catalog-panel{

    background:
        transparent!important;

    background-image:
        none!important;

    box-shadow:
        none!important;

    filter:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;
}


/* ============================================================
   DARK

   Та же логика:
   dropdown красивый,
   panel невидимый.
   ============================================================ */

html[data-site-theme="dark"]
body.site-home-modern
.topbar
.catalog-panel,

body.site-home-modern.site-theme-dark
.topbar
.catalog-panel{

    background:
        transparent!important;

    box-shadow:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:980px){

    html body.site-home-modern
    .topbar
    .catalog-panel{

        left:
            max(
                14px,
                calc(
                    (
                        100% -
                        calc(100% - 28px)
                    ) / 2
                    + 162px
                )
            )!important;

        right:
            auto!important;

        width:
            min(
                500px,
                calc(100vw - 28px)
            )!important;

        max-width:
            calc(100vw - 28px)!important;
    }
}


/* ============================================================
   MOBILE

   На телефоне каталог может снова занимать
   доступную ширину, но не рисует overlay.
   ============================================================ */

@media(max-width:620px){

    html body.site-home-modern
    .topbar
    .catalog-panel{

        left:
            10px!important;

        right:
            auto!important;

        width:
            calc(100vw - 20px)!important;

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

        padding:
            6px 0 0!important;

        background:
            transparent!important;

        box-shadow:
            none!important;
    }


    html body.site-home-modern
    .topbar
    .catalog-panel
    .catalog-dropdown{

        width:
            100%!important;

        max-width:
            100%!important;
    }
}