/* ============================================================
   HEADER CATALOG V85
   LIGHT = DARK GEOMETRY
   ============================================================ */


/* ============================================================
   ВАЖНО
   Геометрию DARK НЕ ИЗОБРЕТАЕМ.
   Просто фиксируем текущую существующую геометрию
   из catalog-auth-redesign-v6.
   ============================================================ */


/* PANEL */
html body.site-home-modern .catalog-panel{

    padding:
        10px 0 24px!important;

    background:
        transparent!important;

    pointer-events:
        none!important;
}


/* INNER */
html body.site-home-modern .catalog-panel-inner{

    width:
        min(
            1600px,
            calc(100% - 64px)
        )!important;

    max-width:
        none!important;

    margin:
        0 auto!important;

    padding:
        0!important;

    display:
        grid!important;

    grid-template-columns:
        210px
        138px
        minmax(180px,1fr)
        190px
        54px!important;

    gap:
        28px!important;

    align-items:
        start!important;

    pointer-events:
        none!important;
}


/* ============================================================
   DROPDOWN — ОДИН ЕДИНСТВЕННЫЙ КОНТЕЙНЕР
   ============================================================ */

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

    grid-column:
        2 / span 2!important;

    justify-self:
        start!important;

    width:
        500px!important;

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

    max-height:
        min(
            610px,
            calc(100dvh - 118px)
        )!important;

    margin:
        0!important;

    padding:
        9px!important;

    overflow-x:
        hidden!important;

    overflow-y:
        auto!important;

    pointer-events:
        auto!important;

    scrollbar-width:
        thin!important;

    border-radius:
        24px!important;
}


/* ============================================================
   ITEM — НИКАКОЙ КАРТОЧКИ ВНУТРИ КАРТОЧКИ
   ============================================================ */

html body.site-home-modern .catalog-item{

    display:
        grid!important;

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

    gap:
        12px!important;

    align-items:
        center!important;

    min-height:
        58px!important;

    margin:
        2px 0!important;

    padding:
        7px 10px!important;

    /*
     * Ключевое:
     * обычная строка прозрачная.
     */
    background:
        transparent!important;

    box-shadow:
        none!important;

    border:
        1px solid transparent!important;

    border-bottom:
        0!important;

    border-radius:
        15px!important;

    transform:
        none!important;

    transition:
        background .18s ease,
        border-color .18s ease!important;
}


/*
 * У старых стилей была красная псевдополоса.
 * В текущем DARK она уже фактически не нужна.
 */
html body.site-home-modern .catalog-item::before{

    display:
        none!important;

    content:
        none!important;
}


/*
 * Старые уровни site.css пытались снова
 * делать белые подкатегории.
 */
html body.site-home-modern
.catalog-branch.level-1 .catalog-item,

html body.site-home-modern
.catalog-branch.level-2 .catalog-item,

html body.site-home-modern
.catalog-branch.level-3 .catalog-item{

    background:
        transparent!important;

    box-shadow:
        none!important;

    border-bottom:
        0!important;

    padding:
        7px 10px!important;
}


/* ============================================================
   THUMB
   ============================================================ */

html body.site-home-modern .catalog-thumb{

    width:
        44px!important;

    height:
        44px!important;

    display:
        grid!important;

    place-items:
        center!important;

    overflow:
        hidden!important;

    border-radius:
        13px!important;
}


html body.site-home-modern .catalog-thumb img{

    width:
        100%!important;

    height:
        100%!important;

    padding:
        0!important;

    display:
        block!important;

    object-fit:
        cover!important;

    border-radius:
        12px!important;

    filter:
        none!important;

    opacity:
        1!important;
}


/* ============================================================
   TEXT
   ============================================================ */

html body.site-home-modern .catalog-item b{

    margin:
        0!important;

    font-size:
        17px!important;

    line-height:
        1.12!important;

    font-weight:
        900!important;
}


html body.site-home-modern .catalog-item small{

    display:
        none!important;
}


/* ============================================================
   ARROW
   ============================================================ */

html body.site-home-modern .catalog-item i{

    display:
        grid!important;

    place-items:
        center!important;

    width:
        28px!important;

    height:
        28px!important;

    border-radius:
        50%!important;

    color:
        #ff2424!important;

    font-size:
        19px!important;

    font-style:
        normal!important;

    line-height:
        1!important;
}


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

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

body.site-home-modern.site-theme-dark
.catalog-dropdown{

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

    background:
        rgba(11,12,14,.95)!important;

    color:
        #f7f7f7!important;

    backdrop-filter:
        blur(24px)
        saturate(125%)!important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(125%)!important;

    box-shadow:
        0 28px 80px
            rgba(0,0,0,.40),
        inset 0 1px 0
            rgba(255,255,255,.07)!important;
}


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

body.site-home-modern.site-theme-dark
.catalog-item{

    color:
        #f7f7f7!important;

    background:
        transparent!important;
}


html[data-site-theme="dark"]
body.site-home-modern
.catalog-item:hover,

body.site-home-modern.site-theme-dark
.catalog-item:hover{

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

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


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

body.site-home-modern.site-theme-dark
.catalog-item b{

    color:
        #f7f7f7!important;
}


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

body.site-home-modern.site-theme-dark
.catalog-thumb{

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

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

    color:
        #fff!important;
}


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

body.site-home-modern.site-theme-dark
.catalog-item i{

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

    border:
        0!important;
}


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

/*
 * Та же самая геометрия, что DARK.
 *
 * Меняются ТОЛЬКО цвета.
 */
html[data-site-theme="light"]
body.site-home-modern
.catalog-dropdown,

body.site-home-modern.site-theme-light
.catalog-dropdown{

    border:
        1px solid
        rgba(0,0,0,.13)!important;

    background:
        rgba(245,245,243,.94)!important;

    color:
        #171717!important;

    backdrop-filter:
        blur(24px)
        saturate(110%)!important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(110%)!important;

    box-shadow:
        0 28px 70px
            rgba(25,25,25,.16),
        inset 0 1px 0
            rgba(255,255,255,.80)!important;
}


/*
 * НЕТ белых отдельных блоков.
 */
html[data-site-theme="light"]
body.site-home-modern
.catalog-item,

body.site-home-modern.site-theme-light
.catalog-item{

    color:
        #171717!important;

    background:
        transparent!important;

    box-shadow:
        none!important;

    border:
        1px solid transparent!important;

    border-bottom:
        0!important;
}


/*
 * И даже вложенные уровни остаются прозрачными.
 */
html[data-site-theme="light"]
body.site-home-modern
.catalog-branch.level-1 .catalog-item,

html[data-site-theme="light"]
body.site-home-modern
.catalog-branch.level-2 .catalog-item,

html[data-site-theme="light"]
body.site-home-modern
.catalog-branch.level-3 .catalog-item,

body.site-home-modern.site-theme-light
.catalog-branch.level-1 .catalog-item,

body.site-home-modern.site-theme-light
.catalog-branch.level-2 .catalog-item,

body.site-home-modern.site-theme-light
.catalog-branch.level-3 .catalog-item{

    background:
        transparent!important;

    box-shadow:
        none!important;

    border-bottom:
        0!important;
}


/*
 * Hover — просто лёгкая подсветка,
 * как DARK.
 */
html[data-site-theme="light"]
body.site-home-modern
.catalog-item:hover,

body.site-home-modern.site-theme-light
.catalog-item:hover{

    background:
        rgba(0,0,0,.045)!important;

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

    box-shadow:
        none!important;

    transform:
        none!important;
}


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

body.site-home-modern.site-theme-light
.catalog-item b{

    color:
        #171717!important;
}


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

body.site-home-modern.site-theme-light
.catalog-thumb{

    border:
        1px solid
        rgba(0,0,0,.08)!important;

    background:
        rgba(0,0,0,.035)!important;

    color:
        #111!important;
}


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

body.site-home-modern.site-theme-light
.catalog-item i{

    background:
        rgba(0,0,0,.035)!important;

    border:
        1px solid
        rgba(0,0,0,.07)!important;
}


/* ============================================================
   ALL CATALOG
   ============================================================ */

html body.site-home-modern
.catalog-all .catalog-thumb{

    font-size:
        24px!important;
}


/* ============================================================
   MERCH
   На случай кэша старого HTML.
   ============================================================ */

.catalog-item[data-sd-merch-v85]{

    display:
        none!important;
}


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

@media(max-width:980px){

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

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

        grid-template-columns:
            150px
            112px
            minmax(0,1fr)
            48px!important;

        gap:
            12px!important;
    }


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

        grid-column:
            2 / span 2!important;

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


@media(max-width:620px){

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

        padding:
            7px 0 12px!important;
    }


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

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

        display:
            block!important;
    }


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

        width:
            100%!important;

        max-width:
            none!important;

        max-height:
            calc(100dvh - 84px)!important;

        padding:
            7px!important;

        border-radius:
            19px!important;
    }


    html body.site-home-modern
    .catalog-item{

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

        min-height:
            56px!important;

        gap:
            10px!important;

        padding:
            6px 8px!important;

        border-radius:
            13px!important;
    }


    html body.site-home-modern
    .catalog-thumb{

        width:
            42px!important;

        height:
            42px!important;

        border-radius:
            12px!important;
    }


    html body.site-home-modern
    .catalog-item b{

        font-size:
            15px!important;
    }
}



/* ============================================================
   LIGHT CATALOG — REMOVE OUTER SHELL V85.1

   LIGHT должен выглядеть так же по структуре, как DARK:
   только ОДИН контейнер .catalog-dropdown.
   ============================================================ */


/* ============================================================
   1. ВНЕШНЯЯ PANEL В LIGHT ПОЛНОСТЬЮ ПРОЗРАЧНА
   ============================================================ */

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

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

    background:
        transparent!important;

    background-image:
        none!important;

    border:
        0!important;

    outline:
        0!important;

    box-shadow:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;

}


/* ============================================================
   2. INNER ТОЖЕ НЕ ДОЛЖЕН ВЫГЛЯДЕТЬ КАК КОНТЕЙНЕР
   ============================================================ */

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

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

    background:
        transparent!important;

    background-image:
        none!important;

    border:
        0!important;

    outline:
        0!important;

    border-radius:
        0!important;

    box-shadow:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;

}


/* ============================================================
   3. УБИРАЕМ ПСЕВДО-СЛОИ У ВНЕШНЕЙ ОБОЛОЧКИ
   ============================================================ */

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

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

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

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

body.site-home-modern.site-theme-light
.catalog-panel::before,

body.site-home-modern.site-theme-light
.catalog-panel::after,

body.site-home-modern.site-theme-light
.catalog-panel-inner::before,

body.site-home-modern.site-theme-light
.catalog-panel-inner::after{

    content:
        none!important;

    display:
        none!important;

    background:
        none!important;

    border:
        0!important;

    box-shadow:
        none!important;

}


/* ============================================================
   4. ЕДИНСТВЕННЫЙ ВИДИМЫЙ КОНТЕЙНЕР — DROPDOWN
   ============================================================ */

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

body.site-home-modern.site-theme-light
.catalog-dropdown{

    background:
        rgba(246,246,244,.96)!important;

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

    border-radius:
        24px!important;

    box-shadow:
        0 22px 54px
        rgba(20,20,20,.16)!important;

    backdrop-filter:
        blur(22px)
        saturate(108%)!important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(108%)!important;

}


/* ============================================================
   5. ВНУТРЕННИЕ СТРОКИ — ПРОЗРАЧНЫЕ
   ============================================================ */

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

body.site-home-modern.site-theme-light
.catalog-dropdown
.catalog-item{

    background:
        transparent!important;

    background-image:
        none!important;

    border:
        1px solid
        transparent!important;

    border-bottom:
        0!important;

    outline:
        0!important;

    box-shadow:
        none!important;

}


/* ============================================================
   6. ВЛОЖЕННЫЕ BRANCH ТОЖЕ НЕ СОЗДАЮТ НОВЫЕ КОРОБКИ
   ============================================================ */

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

html[data-site-theme="light"]
body.site-home-modern
.catalog-branch.level-1,

html[data-site-theme="light"]
body.site-home-modern
.catalog-branch.level-2,

html[data-site-theme="light"]
body.site-home-modern
.catalog-branch.level-3,

body.site-home-modern.site-theme-light
.catalog-branch,

body.site-home-modern.site-theme-light
.catalog-branch.level-1,

body.site-home-modern.site-theme-light
.catalog-branch.level-2,

body.site-home-modern.site-theme-light
.catalog-branch.level-3{

    background:
        transparent!important;

    background-image:
        none!important;

    border:
        0!important;

    outline:
        0!important;

    box-shadow:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;

}


/* ============================================================
   7. HOVER
   ============================================================ */

html[data-site-theme="light"]
body.site-home-modern
.catalog-dropdown
.catalog-item:hover,

body.site-home-modern.site-theme-light
.catalog-dropdown
.catalog-item:hover{

    background:
        rgba(0,0,0,.045)!important;

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

    box-shadow:
        none!important;

}


/* ============================================================
   8. СТАРЫЕ LIGHT-ОБОЛОЧКИ ПО КЛАССАМ
   ============================================================ */

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

html[data-site-theme="light"]
body.site-home-modern
[class*="catalog-inner-"]{

    box-shadow:
        none!important;
}


/* Но dropdown НЕ обнуляем */
html[data-site-theme="light"]
body.site-home-modern
.catalog-dropdown{

    box-shadow:
        0 22px 54px
        rgba(20,20,20,.16)!important;
}


/* ============================================================
   DARK НЕ ТРОГАЕМ
   ============================================================ */