/* ============================================================
   STABLE CARD FRAME V106.5

   Магазины + категории.

   Рамка больше НЕ является обычным border карточки.
   Она рисуется отдельным верхним слоем.

   Поэтому:
   - изображение её не перекрывает;
   - hover shadow её не заменяет;
   - старые border-color её не меняют;
   - увеличение карточки её не стирает.
   ============================================================ */


/* ============================================================
   1. ОСНОВА
   ============================================================ */

body.site-home-modern
.home-category-card-v6,

body.site-home-modern
.home-store-card-v106{

    position:
        relative!important;

    /*
     * Оставляем 1px геометрии,
     * но реальную рамку рисуем ::before.
     */
    border:
        1px solid transparent!important;

    outline:
        0!important;

    box-sizing:
        border-box!important;
}


/* ============================================================
   2. НАСТОЯЩАЯ РАМКА ПОВЕРХ ВСЕГО
   ============================================================ */

body.site-home-modern
.home-category-card-v6::before,

body.site-home-modern
.home-store-card-v106::before{

    content:
        ""!important;

    display:
        block!important;

    position:
        absolute!important;

    z-index:
        90!important;

    inset:
        0!important;

    width:
        auto!important;

    height:
        auto!important;

    margin:
        0!important;

    padding:
        0!important;

    pointer-events:
        none!important;

    border-style:
        solid!important;

    border-width:
        1px!important;

    border-radius:
        inherit!important;

    box-sizing:
        border-box!important;

    background:
        transparent!important;

    box-shadow:
        none!important;

    opacity:
        1!important;

    transform:
        none!important;

    transition:
        none!important;
}


/* ============================================================
   3. DARK

   Как у больших Merch / Franchise плашек.
   ============================================================ */

html[data-site-theme="dark"]
body.site-home-modern
.home-category-card-v6::before,

html[data-site-theme="dark"]
body.site-home-modern
.home-store-card-v106::before,

body.site-home-modern.site-theme-dark
.home-category-card-v6::before,

body.site-home-modern.site-theme-dark
.home-store-card-v106::before{

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


/*
 * HOVER НЕ МЕНЯЕТ РАМКУ.
 */

html[data-site-theme="dark"]
body.site-home-modern
.home-category-card-v6:hover::before,

html[data-site-theme="dark"]
body.site-home-modern
.home-store-card-v106:hover::before,

body.site-home-modern.site-theme-dark
.home-category-card-v6:hover::before,

body.site-home-modern.site-theme-dark
.home-store-card-v106:hover::before{

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


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

html[data-site-theme="light"]
body.site-home-modern
.home-category-card-v6::before,

html[data-site-theme="light"]
body.site-home-modern
.home-store-card-v106::before,

body.site-home-modern.site-theme-light
.home-category-card-v6::before,

body.site-home-modern.site-theme-light
.home-store-card-v106::before{

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


/*
 * HOVER — та же самая линия.
 */

html[data-site-theme="light"]
body.site-home-modern
.home-category-card-v6:hover::before,

html[data-site-theme="light"]
body.site-home-modern
.home-store-card-v106:hover::before,

body.site-home-modern.site-theme-light
.home-category-card-v6:hover::before,

body.site-home-modern.site-theme-light
.home-store-card-v106:hover::before{

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


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

   В старом CSS:
       hover =
       translateY(-4px) + scale(1.012)

   А viewport:
       overflow-y:hidden

   Даём карточке физическое место подняться.
   Сам hover НЕ меняем.
   ============================================================ */

body.site-home-modern
.home-category-viewport-v6{

    padding-top:
        13px!important;

    padding-bottom:
        15px!important;

    /*
     * Компенсируем padding,
     * чтобы секция визуально не стала выше.
     */
    margin-top:
        -10px!important;

    margin-bottom:
        -8px!important;

    box-sizing:
        border-box!important;

    overflow-x:
        auto!important;

    overflow-y:
        hidden!important;
}


/*
 * Карточка продолжает увеличиваться.
 * Ничего не отключаем.
 */

@media (hover:hover) and (pointer:fine){

    body.site-home-modern
    .home-category-card-v6:hover{

        transform:
            translate3d(0,-4px,0)
            scale(1.012)!important;
    }


    /*
     * Внутренняя картинка увеличивается
     * отдельно — как и раньше.
     */

    body.site-home-modern
    .home-category-card-v6:hover
    .home-category-media-v6 img,

    body.site-home-modern
    .home-category-card-v6:hover
    .home-category-theme-image-v534{

        transform:
            scale(1.045)!important;
    }
}


/* ============================================================
   6. МАГАЗИНЫ

   Там hover поднимает карточку примерно на 3px,
   а slider тоже имеет overflow-y:hidden.

   Даём безопасную зону сверху.
   ============================================================ */

body.site-home-modern
.home-stores-grid-v106{

    padding-top:
        12px!important;

    padding-right:
        1px!important;

    padding-bottom:
        22px!important;

    padding-left:
        1px!important;

    margin-top:
        -10px!important;

    margin-bottom:
        -10px!important;

    box-sizing:
        border-box!important;

    overflow-x:
        auto!important;

    overflow-y:
        hidden!important;
}


/*
 * Сам эффект магазина НЕ убираем.
 */

@media (hover:hover) and (pointer:fine){

    body.site-home-modern
    .home-store-card-v106:hover{

        /*
         * Оставляем движение,
         * которое уже было в дизайне.
         */
        transform:
            translateY(-3px)!important;
    }
}


/* ============================================================
   7. РАМКА ВСЕГДА ВЫШЕ КАРТИНКИ И БЛИКА
   ============================================================ */

body.site-home-modern
.home-category-card-v6
.home-category-media-v6,

body.site-home-modern
.home-category-card-v6
.home-category-media-v6 img,

body.site-home-modern
.home-category-card-v6
.home-category-theme-image-v534{

    z-index:
        1!important;
}


/*
 * Стрелки всё равно должны нормально нажиматься.
 */

body.site-home-modern
.home-category-card-v6
.sd-category-link-arrow-v548,

body.site-home-modern
.home-category-card-v6
.home-category-arrow-v6,

body.site-home-modern
.home-store-card-v106
.home-store-arrow-v106{

    z-index:
        100!important;
}


/* ============================================================
   8. RADIUS

   Полностью одинаковая геометрия DARK / LIGHT.
   ============================================================ */

body.site-home-modern
.home-category-card-v6{

    border-radius:
        15px!important;
}


body.site-home-modern
.home-store-card-v106{

    border-radius:
        18px!important;
}


body.site-home-modern
.home-category-card-v6::before{

    border-radius:
        15px!important;
}


body.site-home-modern
.home-store-card-v106::before{

    border-radius:
        18px!important;
}


/* ============================================================
   9. TOUCH

   Никаких зависших hover на телефоне.
   ============================================================ */

@media (hover:none){

    body.site-home-modern
    .home-category-card-v6,

    body.site-home-modern
    .home-store-card-v106{

        transform:
            none!important;
    }
}


/* ============================================================
   10. MOBILE
   ============================================================ */

@media(max-width:700px){

    body.site-home-modern
    .home-category-card-v6,

    body.site-home-modern
    .home-category-card-v6::before{

        border-radius:
            13px!important;
    }


    body.site-home-modern
    .home-category-viewport-v6{

        padding-top:
            9px!important;

        padding-bottom:
            11px!important;

        margin-top:
            -7px!important;

        margin-bottom:
            -6px!important;
    }


    body.site-home-modern
    .home-stores-grid-v106{

        padding-top:
            9px!important;

        padding-bottom:
            17px!important;

        margin-top:
            -7px!important;

        margin-bottom:
            -7px!important;
    }
}