/* ============================================================
   SMOKEDONALDS
   HEADER CATALOG UNIFIED V86

   DARK = исходный красивый каталог.
   LIGHT = ТА ЖЕ панель.

   Меняются только изображения категорий через V85 JS.
   ============================================================ */


/* ============================================================
   LIGHT:
   внешний catalog-panel ничего не рисует
   ============================================================ */

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

body.site-home-modern.site-theme-light
.catalog-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;
}


/*
 * И active-состояние ничего дополнительного
 * на страницу не накладывает.
 */
html[data-site-theme="light"]
body.site-home-modern
.catalog-panel.active,

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

    background:
        transparent!important;

    background-color:
        transparent!important;

    background-image:
        none!important;

    box-shadow:
        none!important;

    filter:
        none!important;

    backdrop-filter:
        none!important;

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


/* ============================================================
   PANEL 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;

    box-shadow:
        none!important;

    filter:
        none!important;

    backdrop-filter:
        none!important;

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


/* ============================================================
   УБИРАЕМ ЛЮБЫЕ PSEUDO LAYERS
   ============================================================ */

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;
}


/* ============================================================
   КЛЮЧЕВОЕ:

   LIGHT DROPDOWN ПОЛУЧАЕТ РОВНО ТОТ ЖЕ
   VISUAL, ЧТО ТЕКУЩИЙ DARK ИЗ
   catalog-auth-redesign-v6.css
   ============================================================ */

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

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

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

    border-radius:
        24px!important;

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

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

    background-image:
        none!important;

    color:
        #f7f7f7!important;

    opacity:
        1!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;

    isolation:
        isolate!important;
}


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

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

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

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

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

    content:
        none!important;

    display:
        none!important;
}


/* ============================================================
   СТРОКИ

   Никаких светлых плашек.
   Тот же visual, что DARK.
   ============================================================ */

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

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

    background:
        transparent!important;

    background-color:
        transparent!important;

    background-image:
        none!important;

    color:
        #f7f7f7!important;

    border:
        1px solid
        transparent!important;

    border-bottom:
        0!important;

    outline:
        0!important;

    box-shadow:
        none!important;

    filter:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        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:
        #f7f7f7!important;
}


/*
 * description у текущего каталога скрыта,
 * как и в DARK.
 */
html[data-site-theme="light"]
body.site-home-modern
.catalog-item small,

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

    display:
        none!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(255,255,255,.065)!important;

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

    background-image:
        none!important;

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

    color:
        #fff!important;

    box-shadow:
        none!important;

    transform:
        none!important;
}


/* ============================================================
   СТАРЫЕ ВЛОЖЕННЫЕ УРОВНИ

   site.css содержит:
   background:#fff;
   background:#fbfbfb;
   background:#fafafa;

   Прибиваем их только внутри HEADER menu.
   ============================================================ */

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

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

body.site-home-modern.site-theme-light
.catalog-dropdown
.catalog-sublist,

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

    background:
        transparent!important;

    background-color:
        transparent!important;

    background-image:
        none!important;

    border:
        0!important;

    box-shadow:
        none!important;
}


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

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

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

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

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

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

    background:
        transparent!important;

    background-color:
        transparent!important;

    background-image:
        none!important;

    border:
        1px solid
        transparent!important;

    border-bottom:
        0!important;

    box-shadow:
        none!important;

    color:
        #f7f7f7!important;
}


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

   Картинка остаётся LIGHT/DARK из V85.
   Оболочка одинаковая.
   ============================================================ */

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

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

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

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

    background-image:
        none!important;

    color:
        #fff!important;

    box-shadow:
        none!important;
}


/*
 * Сами картинки НЕ фильтруем.
 */
html[data-site-theme="light"]
body.site-home-modern
.catalog-thumb img,

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

    opacity:
        1!important;

    filter:
        none!important;

    mix-blend-mode:
        normal!important;
}


/* ============================================================
   ВЕСЬ КАТАЛОГ — ЗВЕЗДА
   ============================================================ */

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

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

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

    border-color:
        transparent!important;

    color:
        #fff!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(255,255,255,.055)!important;

    border:
        0!important;

    color:
        #ff2424!important;

    box-shadow:
        none!important;
}


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

   НИ ОДНО правило DARK здесь не меняем.

   То есть тёмная тема остаётся ровно
   такой, какой она была в архиве.
   ============================================================ */


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

   Визуал тоже единый.
   Геометрию существующих media queries не меняем.
   ============================================================ */

@media(max-width:620px){

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

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

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

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

        box-shadow:
            0 20px 55px
            rgba(0,0,0,.42)!important;
    }
}



/* ============================================================
   HEADER CATALOG LIGHT PERFECT V86.1

   DARK = как сейчас.
   LIGHT = та же геометрия, но чистый светлый visual.

   Никакого glass-box внутри другого box.
   ============================================================ */


/* ============================================================
   1. ВНЕШНИЙ PANEL В LIGHT НИЧЕГО НЕ РИСУЕТ
   ============================================================ */

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

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

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

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

    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;
}


/* ============================================================
   2. PANEL-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-color:
        transparent!important;

    background-image:
        none!important;

    border:
        0!important;

    outline:
        0!important;

    border-radius:
        0!important;

    box-shadow:
        none!important;

    filter:
        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;

    filter:
        none!important;
}


/* ============================================================
   4. LIGHT DROPDOWN

   Геометрия остаётся от DARK.
   Меняем ТОЛЬКО визуальные цвета.
   ============================================================ */

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

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

    /*
     * Полностью глухой светлый фон.
     * Ничего с сайта под ним не просвечивает.
     */
    background:
        #f7f7f5!important;

    background-color:
        #f7f7f5!important;

    background-image:
        none!important;

    color:
        #151515!important;

    opacity:
        1!important;

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

    /*
     * Радиус ТОТ ЖЕ, что DARK.
     */
    border-radius:
        24px!important;

    /*
     * Вот это важно:
     * LIGHT больше не является стеклом.
     */
    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;

    filter:
        none!important;

    /*
     * Одна аккуратная внешняя тень.
     * Без inset-бокса внутри.
     */
    box-shadow:
        0 20px 48px
        rgba(0,0,0,.14)!important;

    isolation:
        isolate!important;
}


/* ============================================================
   5. У DROPDOWN НЕТ СОБСТВЕННЫХ OVERLAY
   ============================================================ */

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

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

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

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

    content:
        none!important;

    display:
        none!important;

    background:
        none!important;

    border:
        0!important;

    box-shadow:
        none!important;
}


/* ============================================================
   6. КАТЕГОРИИ

   Та же геометрия DARK:
   внутри общего контейнера просто строки.
   ============================================================ */

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-color:
        transparent!important;

    background-image:
        none!important;

    color:
        #151515!important;

    border:
        1px solid
        transparent!important;

    border-bottom:
        0!important;

    outline:
        0!important;

    box-shadow:
        none!important;

    filter:
        none!important;

    backdrop-filter:
        none!important;

    -webkit-backdrop-filter:
        none!important;

    transform:
        none!important;
}


/* ============================================================
   7. НИКАКИХ ПСЕВДО-ПЛАШЕК НА СТРОКАХ
   ============================================================ */

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

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

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

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

    content:
        none!important;

    display:
        none!important;

    background:
        none!important;

    border:
        0!important;

    box-shadow:
        none!important;
}


/* ============================================================
   8. ВЛОЖЕННЫЕ BRANCH / SUBLIST

   Старые site.css больше не смогут
   нарисовать второй белый контейнер.
   ============================================================ */

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

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

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

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

    background:
        transparent!important;

    background-color:
        transparent!important;

    background-image:
        none!important;

    border:
        0!important;

    outline:
        0!important;

    box-shadow:
        none!important;

    filter:
        none!important;
}


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

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

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

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

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

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

    background:
        transparent!important;

    border:
        1px solid
        transparent!important;

    border-bottom:
        0!important;

    box-shadow:
        none!important;
}


/* ============================================================
   9. ТЕКСТ
   ============================================================ */

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

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

    color:
        #151515!important;

    text-shadow:
        none!important;
}


/* ============================================================
   10. HOVER

   Тот же принцип DARK:
   только выбранная строка слегка проявляется.
   ============================================================ */

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;

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

    background-image:
        none!important;

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

    box-shadow:
        none!important;

    transform:
        none!important;
}


/* ============================================================
   11. КАРТИНКА

   Сами image_light/image_dark из V85 НЕ ТРОГАЕМ.
   ============================================================ */

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

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

    /*
     * Минимальная оболочка.
     * Не отдельная карточка.
     */
    background:
        rgba(0,0,0,.025)!important;

    background-image:
        none!important;

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

    box-shadow:
        none!important;

    color:
        #111!important;
}


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

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

    opacity:
        1!important;

    filter:
        none!important;

    mix-blend-mode:
        normal!important;
}


/* ============================================================
   12. ВЕСЬ КАТАЛОГ
   ============================================================ */

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

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

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

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

    color:
        #111!important;
}


/* ============================================================
   13. СТРЕЛКА
   ============================================================ */

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

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

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

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

    color:
        #ff2424!important;

    box-shadow:
        none!important;
}


/* ============================================================
   14. DARK НЕ ТРОГАЕМ ВООБЩЕ
   ============================================================ */


/* ============================================================
   15. MOBILE
   ============================================================ */

@media(max-width:620px){

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

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

        background:
            #f7f7f5!important;

        box-shadow:
            0 16px 38px
            rgba(0,0,0,.14)!important;
    }
}