/* ============================================================
   CATALOG CARDS V102

   Не узкие полоски.
   Размер ближе к референсу:
   примерно 300 x 390 desktop.
   ============================================================ */


/* ---------- главный каталог ---------- */

.catalog-page .catalog-folder-grid{

    display:grid!important;

    /*
     * 4 нормальные вертикальные карточки.
     */
    grid-template-columns:
        repeat(4, minmax(260px, 310px))!important;

    justify-content:center!important;

    align-items:start!important;

    gap:22px!important;

    width:100%!important;

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


/* ---------- сама карточка ---------- */

.catalog-page .catalog-folder-card{

    width:100%!important;

    /*
     * Уже стандартной квадратной,
     * но не превращаем в полоску.
     */
    aspect-ratio: .80 / 1!important;

    height:auto!important;
    min-height:0!important;

    border-radius:18px!important;

    overflow:hidden!important;

    box-sizing:border-box!important;
}


/* изображения */

.catalog-page .catalog-folder-card > img,
.catalog-page .catalog-folder-card picture,
.catalog-page .catalog-folder-card picture > img,
.catalog-page .catalog-folder-card [class*="theme-image"]{

    width:100%!important;
    height:100%!important;

    object-fit:cover!important;

    border-radius:inherit!important;
}


/*
 * Если у карточки есть внутренний media wrapper —
 * тоже растягиваем.
 */
.catalog-page .catalog-folder-card [class*="media"]{

    width:100%!important;
    height:100%!important;

    border-radius:inherit!important;

    overflow:hidden!important;
}


/* ---------- DARK / LIGHT одинаковая форма ---------- */

html[data-site-theme="light"]
.catalog-page .catalog-folder-card,

html[data-site-theme="dark"]
.catalog-page .catalog-folder-card{

    border-radius:18px!important;
}


/* ---------- последний неполный ряд центрируется сам ---------- */

.catalog-page .catalog-folder-grid{

    /*
     * За счёт фиксированного размера grid-колонок
     * сам grid получается по центру.
     */
    justify-content:center!important;
}


/* ---------- 3 в ряд ---------- */

@media(max-width:1300px){

    .catalog-page .catalog-folder-grid{

        grid-template-columns:
            repeat(3, minmax(250px, 300px))!important;

        gap:18px!important;
    }
}


/* ---------- 2 в ряд ---------- */

@media(max-width:950px){

    .catalog-page .catalog-folder-grid{

        grid-template-columns:
            repeat(2, minmax(230px, 290px))!important;

        gap:16px!important;
    }
}


/* ---------- mobile ---------- */

@media(max-width:620px){

    .catalog-page .catalog-folder-grid{

        grid-template-columns:
            repeat(2, minmax(0, 1fr))!important;

        gap:10px!important;
    }

    .catalog-page .catalog-folder-card{

        aspect-ratio:.78 / 1!important;

        border-radius:14px!important;
    }
}


/* ============================================================
   HIDE CATEGORY TEXT SETTING
   ============================================================ */


/*
 * Класс ставится на html через site-header.php,
 * если catalog_hide_category_text = 1.
 */


/* /catalog */
html.sd-hide-category-text
.catalog-folder-card > span,

html.sd-hide-category-text
.catalog-folder-card > small,

html.sd-hide-category-text
.catalog-folder-card
[class*="title"],

html.sd-hide-category-text
.catalog-folder-card
[class*="name"],

html.sd-hide-category-text
.catalog-folder-card
[class*="caption"]{

    display:none!important;
}


/*
 * Главная.
 * Стрелки отдельно НЕ трогаем.
 */
html.sd-hide-category-text
.home-category-card-v6
[class*="title"],

html.sd-hide-category-text
.home-category-card-v6
[class*="name"],

html.sd-hide-category-text
.home-category-card-v6
[class*="caption"],

html.sd-hide-category-text
.home-category-card-v6 > span:not([class*="arrow"]),

html.sd-hide-category-text
[data-category-card]
[class*="title"],

html.sd-hide-category-text
[data-category-card]
[class*="name"]{

    display:none!important;
}


/*
 * Если текущая версия использует category-card
 * и обычный span.
 */
html.sd-hide-category-text
.category-card:not(.product-card)
> span:not([class*="arrow"]){

    display:none!important;
}