/* ============================================================
   CATEGORY EXACT FEATURE V96

   Категории визуально повторяют Merch / Franchise:
   - radius 15px
   - постоянная border
   - hover border НЕ меняется
   - существующий scale сохраняется
   - viewport больше не режет верхнюю рамку
   ============================================================ */


/* ============================================================
   1. КАРТОЧКА — ГЕОМЕТРИЯ КАК У .home-feature-tile-v5
   ============================================================ */

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

    position:relative!important;

    overflow:hidden!important;

    border-radius:15px!important;

    /*
     * Убираем старые border:0 из V54.
     */
    border-style:solid!important;
    border-width:1px!important;

    /*
     * Не меняем существующий transform.
     * V55 уже содержит правильную динамику.
     */
    transform-origin:center center!important;

    background-clip:padding-box!important;
}


/* ============================================================
   2. DARK — ОБВОДКА КАК У БОЛЬШИХ ПЛАШЕК
   ============================================================ */

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

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

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


/*
 * ВАЖНО:
 * hover НЕ меняет цвет рамки.
 */
html[data-site-theme="dark"]
body.site-home-modern
.home-category-card-v6:hover,

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

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


/* ============================================================
   3. LIGHT — ОБВОДКА КАК У БОЛЬШИХ БЕЛЫХ ПЛАШЕК
   ============================================================ */

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

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

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


/*
 * И здесь hover рамку не меняет.
 */
html[data-site-theme="light"]
body.site-home-modern
.home-category-card-v6:hover,

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

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


/* ============================================================
   4. КЛЮЧЕВОЕ СКРУГЛЕНИЕ

   В V54 media и img имеют radius:0!important.
   Это нормально для overscan, НО внешний контейнер должен
   реально обрезать их по своим 15px.

   Принудительно даём всей цепочке один radius.
   ============================================================ */

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

    border-radius:15px!important;

    overflow:hidden!important;
}


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{

    border-radius:15px!important;
}


/* DARK отдельно — чтобы поздние dark rules не перебили */
html[data-site-theme="dark"]
body.site-home-modern
.home-category-card-v6,

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

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

html[data-site-theme="dark"]
body.site-home-modern
.home-category-card-v6
.home-category-theme-image-v534{

    border-radius:15px!important;
}


/* LIGHT — абсолютно та же геометрия */
html[data-site-theme="light"]
body.site-home-modern
.home-category-card-v6,

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

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

html[data-site-theme="light"]
body.site-home-modern
.home-category-card-v6
.home-category-theme-image-v534{

    border-radius:15px!important;
}


/* ============================================================
   5. HOVER КАК У FRANCHISE / MERCH

   В V55 уже стоит:
      translate3d(0,-4px,0) scale(1.012)

   Фиксируем ровно это значение.
   ============================================================ */

@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. ПОЧЕМУ РАНЬШЕ ИСЧЕЗАЛА ВЕРХНЯЯ ОБВОДКА

   viewport имеет overflow-y:hidden.
   Карточка поднимается на 4px.
   Без запаса эти 4px просто отрезаются.

   Создаём место ВНУТРИ viewport.
   ============================================================ */

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

    padding-top:9px!important;
    padding-bottom:12px!important;

    /*
     * Компенсируем padding снаружи,
     * чтобы раздел не уехал вниз.
     */
    margin-top:-6px!important;
    margin-bottom:-4px!important;

    box-sizing:border-box!important;
}


/*
 * Горизонтальную механику вообще не меняем.
 */
body.site-home-modern
.home-category-viewport-v6{

    overflow-x:auto!important;
    overflow-y:hidden!important;

    scroll-behavior:smooth!important;
}


/* ============================================================
   7. TRACK — НИКАКИХ НОВЫХ TRANSFORM
   ============================================================ */

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

    /*
     * только небольшой запас сверху уже находится
     * на viewport, поэтому track не двигаем.
     */
}


/* ============================================================
   8. НЕ ДАЁМ СТАРЫМ ::before УБИТЬ ВИДИМУЮ РАМКУ

   Но ::after V55 нужен для блика — его НЕ отключаем.
   ============================================================ */

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

    border-radius:15px!important;
}


/* ::after сохраняем */
body.site-home-modern
.home-category-card-v6::after{

    border-radius:15px!important;
}


/* ============================================================
   9. MOBILE
   ============================================================ */

@media(max-width:700px){

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

    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{

        border-radius:13px!important;
    }


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

        padding-top:7px!important;
        margin-top:-4px!important;
    }

}