/* ============================================================
   SD CATALOG CATEGORY LAYOUT + FLIP V130
   ============================================================ */


/* ============================================================
   DESKTOP

   4 карточки.
   Карточки чуть уже.
   Есть поля по краям.
   ============================================================ */

.catalog-page
.catalog-folders-v129{

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    padding-inline:0 !important;
}


.catalog-page
.catalog-folders-v129
.section-head{

    width:
        min(
            1680px,
            calc(100% - 56px)
        ) !important;

    max-width:
        1680px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


.catalog-page
.catalog-folders-v129
.catalog-folder-grid-v129{

    display:
        grid !important;

    width:
        min(
            1680px,
            calc(100% - 56px)
        ) !important;

    max-width:
        1680px !important;

    min-width:
        0 !important;

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

    justify-content:
        stretch !important;

    align-items:
        start !important;

    gap:
        18px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;
}


/* ============================================================
   КАРТОЧКА

   Высота возвращена.
   Она не становится горизонтальной плашкой.
   ============================================================ */

.catalog-page
.catalog-folder-grid-v129
> .catalog-flip-card-v129{

    display:
        block !important;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    height:
        clamp(
            440px,
            27vw,
            510px
        ) !important;

    min-height:
        440px !important;

    max-height:
        510px !important;

    margin:
        0 !important;

    perspective:
        1500px !important;

    border-radius:
        18px !important;

    overflow:
        visible !important;
}


/* ============================================================
   FLIP
   ============================================================ */

.catalog-page
.catalog-flip-card-v129
.catalog-flip-inner-v129{

    width:
        100% !important;

    height:
        100% !important;

    transform-style:
        preserve-3d !important;

    transition:
        transform
        .68s
        cubic-bezier(.2,.82,.2,1)
        !important;
}


/* Нажатие */

.catalog-page
.catalog-flip-card-v129.is-flipped-v129
.catalog-flip-inner-v129{

    transform:
        rotateY(180deg) !important;
}


/*
 * Hover теперь работает у ЛЮБОЙ категории.
 * В V129 здесь было .has-children-v129,
 * из-за чего обычные категории не переворачивались.
 */

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

    .catalog-page
    .catalog-flip-card-v129:hover
    .catalog-flip-inner-v129{

        transform:
            rotateY(180deg) !important;
    }
}


/* ============================================================
   ВСЯ ЛИЦЕВАЯ СТОРОНА = FLIP BUTTON

   Она больше никогда не ведёт напрямую
   внутрь категории.
   ============================================================ */

.catalog-page
.catalog-flip-front-action-v129{

    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        20 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        inherit !important;

    background:
        transparent !important;

    cursor:
        pointer !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;
}


/* ============================================================
   ЕСЛИ ПОДКАТЕГОРИЙ ПОКА НЕТ
   ============================================================ */

.catalog-page
.catalog-flip-empty-v130{

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        130px !important;

    padding:
        18px !important;

    border-radius:
        12px !important;

    text-align:
        center !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;
}


html[data-site-theme="light"]
.catalog-page
.catalog-flip-empty-v130,

body.site-theme-light
.catalog-page
.catalog-flip-empty-v130{

    color:
        rgba(15,15,15,.62) !important;

    background:
        rgba(255,255,255,.72) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(0,0,0,.08) !important;
}


html[data-site-theme="dark"]
.catalog-page
.catalog-flip-empty-v130,

body.site-theme-dark
.catalog-page
.catalog-flip-empty-v130{

    color:
        rgba(255,255,255,.62) !important;

    background:
        rgba(10,10,10,.62) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.10) !important;
}


/* ============================================================
   НОУТБУК
   ============================================================ */

@media(max-width:1180px){

    .catalog-page
    .catalog-folders-v129
    .catalog-folder-grid-v129{

        width:
            min(
                1120px,
                calc(100% - 40px)
            ) !important;

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

        gap:
            16px !important;
    }


    .catalog-page
    .catalog-folders-v129
    .section-head{

        width:
            min(
                1120px,
                calc(100% - 40px)
            ) !important;
    }


    .catalog-page
    .catalog-folder-grid-v129
    > .catalog-flip-card-v129{

        height:
            450px !important;

        min-height:
            450px !important;

        max-height:
            450px !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:820px){

    .catalog-page
    .catalog-folders-v129
    .catalog-folder-grid-v129{

        width:
            calc(100% - 28px) !important;

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

        gap:
            12px !important;
    }


    .catalog-page
    .catalog-folders-v129
    .section-head{

        width:
            calc(100% - 28px) !important;
    }


    .catalog-page
    .catalog-folder-grid-v129
    > .catalog-flip-card-v129{

        height:
            390px !important;

        min-height:
            390px !important;

        max-height:
            390px !important;
    }
}


/* ============================================================
   PHONE
   ============================================================ */

@media(max-width:560px){

    .catalog-page
    .catalog-folders-v129
    .catalog-folder-grid-v129{

        width:
            calc(100% - 20px) !important;

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

        gap:
            9px !important;
    }


    .catalog-page
    .catalog-folders-v129
    .section-head{

        width:
            calc(100% - 20px) !important;
    }


    .catalog-page
    .catalog-folder-grid-v129
    > .catalog-flip-card-v129{

        height:
            285px !important;

        min-height:
            285px !important;

        max-height:
            285px !important;

        border-radius:
            14px !important;
    }
}