/* ============================================================
   SD HOME PRODUCTS BORDER HOVER FINAL V117

   Причина проблемы:

   .home-popular-viewport-v7
       overflow-y: hidden

   +

   .home-popular-card-v7:hover
       transform: translateY(-4px / -5px)

   При hover карточка физически выходила вверх
   за пределы viewport, поэтому верхняя рамка обрезалась.

   Решение:
   - внешнюю карточку НЕ двигаем вообще
   - border во всех состояниях одинаковый
   - hover сохраняем через тень, картинку, блик и стрелку
   - размеры / свайп / 5 карточек НЕ трогаем
   ============================================================ */


/* ============================================================
   ОБЩАЯ ГЕОМЕТРИЯ КАРТОЧКИ
   ============================================================ */

body.site-home-modern
.home-popular-card-v7{

    /*
     * Карточка всегда остаётся внутри scroll viewport.
     */
    transform:none !important;

    box-sizing:border-box !important;

    /*
     * Больше не анимируем положение всей карточки.
     */
    transition:
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease !important;
}


/* ------------------------------------------------------------
   HOVER / FOCUS / CLICK

   КРИТИЧНО:
   ни translateY, ни scale всей карточки больше нет.
   ------------------------------------------------------------ */

body.site-home-modern
.home-popular-card-v7:hover,

body.site-home-modern
.home-popular-card-v7:focus,

body.site-home-modern
.home-popular-card-v7:focus-visible,

body.site-home-modern
.home-popular-card-v7:active{

    transform:none !important;
}


/* ============================================================
   DARK THEME
   ОДНА И ТА ЖЕ ОБВОДКА ВО ВСЕХ СОСТОЯНИЯХ
   ============================================================ */

html[data-site-theme="dark"]
body.site-home-modern
.home-popular-card-v7,

html[data-site-theme="dark"]
body.site-home-modern
.home-popular-card-v7:hover,

html[data-site-theme="dark"]
body.site-home-modern
.home-popular-card-v7:focus,

html[data-site-theme="dark"]
body.site-home-modern
.home-popular-card-v7:focus-visible,

html[data-site-theme="dark"]
body.site-home-modern
.home-popular-card-v7:active,

body.site-home-modern.site-theme-dark
.home-popular-card-v7,

body.site-home-modern.site-theme-dark
.home-popular-card-v7:hover,

body.site-home-modern.site-theme-dark
.home-popular-card-v7:focus-visible{

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

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

    border-radius:18px !important;
}


/*
 * Hover остаётся визуально живым,
 * но карточка физически никуда не двигается.
 */

html[data-site-theme="dark"]
body.site-home-modern
.home-popular-card-v7:hover,

body.site-home-modern.site-theme-dark
.home-popular-card-v7:hover{

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.065),

        0 17px 38px
        rgba(0,0,0,.31),

        0 0 20px
        rgba(255,255,255,.018) !important;
}


/* ============================================================
   LIGHT THEME
   ОДНА И ТА ЖЕ ОБВОДКА ВО ВСЕХ СОСТОЯНИЯХ
   ============================================================ */

html[data-site-theme="light"]
body.site-home-modern
.home-popular-card-v7,

html[data-site-theme="light"]
body.site-home-modern
.home-popular-card-v7:hover,

html[data-site-theme="light"]
body.site-home-modern
.home-popular-card-v7:focus,

html[data-site-theme="light"]
body.site-home-modern
.home-popular-card-v7:focus-visible,

html[data-site-theme="light"]
body.site-home-modern
.home-popular-card-v7:active,

body.site-home-modern.site-theme-light
.home-popular-card-v7,

body.site-home-modern.site-theme-light
.home-popular-card-v7:hover,

body.site-home-modern.site-theme-light
.home-popular-card-v7:focus-visible{

    border:
        1px solid
        rgba(20,20,20,.18) !important;

    border-color:
        rgba(20,20,20,.18) !important;

    border-radius:18px !important;
}


html[data-site-theme="light"]
body.site-home-modern
.home-popular-card-v7:hover,

body.site-home-modern.site-theme-light
.home-popular-card-v7:hover{

    box-shadow:
        inset 0 1px 0 #fff,

        0 17px 36px
        rgba(0,0,0,.085) !important;
}


/* ============================================================
   HOVER ЭФФЕКТ ОСТАВЛЯЕМ ВНУТРИ КАРТОЧКИ
   ============================================================ */

/*
 * Картинка всё ещё чуть приближается.
 * Это не влияет на внешнюю рамку.
 */

body.site-home-modern
.home-popular-card-v7:hover
.home-popular-media-v7 img{

    transform:
        scale(1.055) !important;
}


/*
 * Блик старой карточки тоже сохраняем.
 */

body.site-home-modern
.home-popular-card-v7:hover::after{

    background-position:
        -115% 0 !important;

    opacity:.64 !important;
}


/*
 * Маленькая стрелка остаётся интерактивной.
 * Двигается только она, а не сама карточка.
 */

body.site-home-modern
.home-popular-card-v7:hover
.home-popular-arrow-v7{

    transform:
        translateX(2px)
        scale(1.06) !important;
}


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

   Специально не меняем:
   - overflow
   - scroll snap
   - размеры
   - width
   - flex-basis
   - gap
   - JS swipe

   Поэтому V115 остаётся полностью рабочим.
   ============================================================ */