/* ============================================================
   HOME CATEGORY 5 CENTER V107

   Desktop:
   - ровно 5 видимых карточек
   - мини-слайдер уже
   - весь ряд по центру
   - карточки компактнее
   - одинаковая геометрия для DARK / LIGHT

   Mobile/tablet не меняем.
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width:1121px){

    /*
     * Заголовок остаётся по ширине основной страницы,
     * а сам слайдер делаем компактнее и центрируем.
     */
    body.site-home-modern
    .home-category-stage-v6{
        width:min(
            1280px,
            calc(100vw - 128px)
        )!important;

        max-width:1280px!important;

        margin-left:auto!important;
        margin-right:auto!important;
    }


    body.site-home-modern
    .home-category-viewport-v6{
        width:100%!important;
        max-width:100%!important;

        margin-left:auto!important;
        margin-right:auto!important;

        /*
         * Оставляем небольшой запас,
         * чтобы рамки крайних карточек не обрезались.
         */
        padding-left:2px!important;
        padding-right:2px!important;

        box-sizing:border-box!important;
    }


    body.site-home-modern
    .home-category-track-v6{
        display:flex!important;

        gap:14px!important;

        width:max-content!important;
        min-width:100%!important;

        /*
         * Если категорий 5 или меньше —
         * они стоят точно по центру.
         */
        justify-content:center!important;
    }


    /*
     * РОВНО 5 карточек в видимой области.
     *
     * 1280px:
     * 4 промежутка × 14px = 56px
     * оставшаяся ширина делится на 5.
     */
    body.site-home-modern
    .home-category-card-v6{
        flex:0 0 calc(
            (
                min(
                    1280px,
                    calc(100vw - 128px)
                )
                - 64px
            ) / 5
        )!important;

        width:calc(
            (
                min(
                    1280px,
                    calc(100vw - 128px)
                )
                - 64px
            ) / 5
        )!important;

        min-width:0!important;

        /*
         * Чуть компактнее по высоте.
         */
        height:198px!important;
    }


    /*
     * Стрелки остаются снаружи мини-слайдера.
     */
    body.site-home-modern
    .home-category-prev-v6{
        left:-54px!important;
    }

    body.site-home-modern
    .home-category-next-v6{
        right:-54px!important;
    }

}


/* ------------------------------------------------------------
   DARK THEME

   Геометрия уже общая.
   Здесь фиксируем совместимость с обеими схемами dark.
   ------------------------------------------------------------ */

@media (min-width:1121px){

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

    body.site-home-modern.site-theme-dark
    .home-category-stage-v6{
        margin-left:auto!important;
        margin-right:auto!important;
    }

}


/* ------------------------------------------------------------
   LIGHT THEME
   ------------------------------------------------------------ */

@media (min-width:1121px){

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

    body.site-home-modern.site-theme-light
    .home-category-stage-v6{
        margin-left:auto!important;
        margin-right:auto!important;
    }

}


/* ------------------------------------------------------------
   Если экран уже, стрелки переносим внутрь.
   ------------------------------------------------------------ */

@media (min-width:1121px) and (max-width:1420px){

    body.site-home-modern
    .home-category-prev-v6{
        left:8px!important;
    }

    body.site-home-modern
    .home-category-next-v6{
        right:8px!important;
    }

}


/* ------------------------------------------------------------
   MOBILE / TABLET

   Специально ничего не меняем.
   Там остаётся существующая адаптивная карусель.
   ------------------------------------------------------------ */