/* ============================================================
   SD HERO SEARCH OVERLAY V127

   Архитектура:

   REAL:
       form
         input
         data-live-search-panel

   DISPLAY:
       BODY
         sd-search-overlay-v127

   Поэтому:
   - штатный поиск не ломаем;
   - результат визуально прямо под поиском;
   - результат выше всех обычных блоков сайта.
   ============================================================ */


/* ============================================================
   ИСХОДНЫЙ PANEL

   Он нужен site.js,
   но пользователю его не показываем.
   ============================================================ */

body.site-home-modern
.sd-search-source-v127{

    /*
     * НЕ display:none.
     *
     * site.js продолжает штатно
     * переключать active.
     */

    visibility:
        hidden !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;

    box-shadow:
        none !important;
}


/* ============================================================
   ВЕРХНИЙ OVERLAY
   ============================================================ */

body.site-home-modern
.sd-search-overlay-v127{

    display:
        none !important;

    position:
        fixed !important;

    z-index:
        2147483000 !important;

    right:
        auto !important;

    bottom:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    overscroll-behavior:
        contain !important;

    -webkit-overflow-scrolling:
        touch !important;

    scrollbar-width:
        thin !important;

    pointer-events:
        auto !important;

    isolation:
        isolate !important;

    transform:
        none !important;

    translate:
        none !important;
}


body.site-home-modern
.sd-search-overlay-v127.active{

    display:
        block !important;
}


/* ============================================================
   РАМКА
   ============================================================ */

body.site-home-modern
.sd-search-overlay-v127{

    border-radius:
        12px !important;
}


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

html[data-site-theme="dark"]
body.site-home-modern
.sd-search-overlay-v127,

body.site-home-modern.site-theme-dark
.sd-search-overlay-v127{

    background:
        #0d0e10 !important;

    color:
        #f5f5f5 !important;

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

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


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

html[data-site-theme="light"]
body.site-home-modern
.sd-search-overlay-v127,

body.site-home-modern.site-theme-light
.sd-search-overlay-v127{

    background:
        #ffffff !important;

    color:
        #151515 !important;

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

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


/* ============================================================
   СТРОКА ТОВАРА
   ============================================================ */

body.site-home-modern
.sd-search-overlay-v127
.live-search-item{

    position:
        relative !important;

    z-index:
        2 !important;

    width:
        100% !important;

    box-sizing:
        border-box !important;
}


/* DARK ROW */

html[data-site-theme="dark"]
body.site-home-modern
.sd-search-overlay-v127
.live-search-item{

    color:
        #f5f5f5 !important;

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


html[data-site-theme="dark"]
body.site-home-modern
.sd-search-overlay-v127
.live-search-item:hover{

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


/* LIGHT ROW */

html[data-site-theme="light"]
body.site-home-modern
.sd-search-overlay-v127
.live-search-item{

    color:
        #151515 !important;

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


html[data-site-theme="light"]
body.site-home-modern
.sd-search-overlay-v127
.live-search-item:hover{

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


/* ============================================================
   НАЗВАНИЕ
   ============================================================ */

html[data-site-theme="dark"]
body.site-home-modern
.sd-search-overlay-v127
.live-search-name{

    color:
        #f5f5f5 !important;
}


html[data-site-theme="light"]
body.site-home-modern
.sd-search-overlay-v127
.live-search-name{

    color:
        #151515 !important;
}


/* ============================================================
   ЦЕНА
   ============================================================ */

body.site-home-modern
.sd-search-overlay-v127
.live-search-price{

    color:
        #ff2028 !important;
}


/* ============================================================
   EMPTY
   ============================================================ */

html[data-site-theme="dark"]
body.site-home-modern
.sd-search-overlay-v127
.live-search-empty{

    color:
        rgba(255,255,255,.60) !important;
}


html[data-site-theme="light"]
body.site-home-modern
.sd-search-overlay-v127
.live-search-empty{

    color:
        rgba(0,0,0,.55) !important;
}


/* ============================================================
   НИКТО НЕ МОЖЕТ ПЕРЕКРЫТЬ SEARCH OVERLAY
   ============================================================ */

body.site-home-modern
.sd-search-overlay-v127,

body.site-home-modern
.sd-search-overlay-v127 *{

    /*
     * Дочерние элементы остаются
     * внутри верхнего stacking context.
     */

    isolation:
        auto;
}


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

@media(max-width:620px){

    body.site-home-modern
    .sd-search-overlay-v127{

        border-radius:
            11px !important;
    }


    body.site-home-modern
    .sd-search-overlay-v127
    .live-search-item{

        min-height:
            64px !important;
    }

}