/* ============================================================
   SD CATALOG CATEGORY CENTER V131

   V130 оставляем как есть:
   - размеры
   - высота
   - flip
   - hover
   - подкатегории

   Меняем только layout:
   GRID -> FLEX

   Поэтому последняя неполная строка всегда по центру.
   ============================================================ */


/* ============================================================
   DESKTOP — 4 В РЯД
   ============================================================ */

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

    display:flex !important;

    flex-wrap:wrap !important;

    justify-content:center !important;

    align-items:flex-start !important;

    align-content:flex-start !important;

    gap:18px !important;

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

    max-width:1680px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;
}


/*
 * 4 карточки:
 *
 * 3 промежутка × 18px = 54px
 * остаток делим на 4.
 */

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

    flex:
        0 0
        calc(
            (100% - 54px) / 4
        ) !important;

    width:
        calc(
            (100% - 54px) / 4
        ) !important;

    max-width:
        calc(
            (100% - 54px) / 4
        ) !important;

    min-width:0 !important;
}


/* ============================================================
   ВАЖНО

   justify-content:center означает:

   4 шт:
   [1][2][3][4]

   3 шт:
      [1][2][3]

   2 шт:
         [1][2]

   1 шт:
            [1]

   И это работает для КАЖДОЙ строки.
   ============================================================ */


/* ============================================================
   <= 1180 — 3 В РЯД
   ============================================================ */

@media(max-width:1180px){

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

        display:flex !important;

        flex-wrap:wrap !important;

        justify-content:center !important;

        gap:16px !important;

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


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

        /*
         * 2 gap × 16px = 32px
         */

        flex:
            0 0
            calc(
                (100% - 32px) / 3
            ) !important;

        width:
            calc(
                (100% - 32px) / 3
            ) !important;

        max-width:
            calc(
                (100% - 32px) / 3
            ) !important;
    }
}


/* ============================================================
   <= 820 — 2 В РЯД
   ============================================================ */

@media(max-width:820px){

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

        display:flex !important;

        flex-wrap:wrap !important;

        justify-content:center !important;

        gap:12px !important;

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


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

        flex:
            0 0
            calc(
                (100% - 12px) / 2
            ) !important;

        width:
            calc(
                (100% - 12px) / 2
            ) !important;

        max-width:
            calc(
                (100% - 12px) / 2
            ) !important;
    }
}


/* ============================================================
   PHONE — 2 В РЯД
   ============================================================ */

@media(max-width:560px){

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

        display:flex !important;

        flex-wrap:wrap !important;

        justify-content:center !important;

        gap:9px !important;

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


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

        flex:
            0 0
            calc(
                (100% - 9px) / 2
            ) !important;

        width:
            calc(
                (100% - 9px) / 2
            ) !important;

        max-width:
            calc(
                (100% - 9px) / 2
            ) !important;
    }
}