/* =========================================
   НЕПОДВИЖНЫЙ РАЗМЫТЫЙ ФОН КАТАЛОГА
   ========================================= */

html,
body {
    background-color: #110a06;
}

/* Один неподвижный фон */
body::before {
    content: "";
    position: fixed;
    inset: -30px;

    background-image: url("https://static.tildacdn.com/tild6361-3461-4735-b466-386162643734/ChatGPT_Image_16__20.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* Размытие около 30% */
    filter: blur(8px);
    -webkit-filter: blur(8px);
    transform: scale(1.05);

    pointer-events: none;
    z-index: 0;
}

/* Контент сайта поверх фона */
#allrecords {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* Все блоки каталога */
:is(
    #rec2444283291,
    #rec2460801041,
    #rec2457649461,
    #rec2457649931,
    #rec2474655631,
    #rec2474655121,
    #rec2474656431,
    #rec2457694001
) {
    position: relative;
    background-color: transparent !important;
    background-image: none !important;
}

/* Убираем стандартные фоны Tilda */
:is(
    #rec2444283291,
    #rec2460801041,
    #rec2457649461,
    #rec2457649931,
    #rec2474655631,
    #rec2474655121,
    #rec2474656431,
    #rec2457694001
) > div,

:is(
    #rec2444283291,
    #rec2460801041,
    #rec2457649461,
    #rec2457649931,
    #rec2474655631,
    #rec2474655121,
    #rec2474656431,
    #rec2457694001
) .t-store,

:is(
    #rec2444283291,
    #rec2460801041,
    #rec2457649461,
    #rec2457649931,
    #rec2474655631,
    #rec2474655121,
    #rec2474656431,
    #rec2457694001
) .t-store__container,

:is(
    #rec2444283291,
    #rec2460801041,
    #rec2457649461,
    #rec2457649931,
    #rec2474655631,
    #rec2474655121,
    #rec2474656431,
    #rec2457694001
) .t-section__container,

:is(
    #rec2444283291,
    #rec2460801041,
    #rec2457649461,
    #rec2457649931,
    #rec2474655631,
    #rec2474655121,
    #rec2474656431,
    #rec2457694001
) .t-store__parts-switch-wrapper,

:is(
    #rec2444283291,
    #rec2460801041,
    #rec2457649461,
    #rec2457649931,
    #rec2474655631,
    #rec2474655121,
    #rec2474656431,
    #rec2457694001
) .t396__artboard {
    background-color: transparent !important;
    background-image: none !important;
}


/* =========================================
   РАССТОЯНИЕ МЕЖДУ КАРТОЧКАМИ
   ========================================= */

/* Компьютер */
@media screen and (min-width: 1200px) {

    #allrecords .js-store-grid-cont.t-store__grid-cont {
        display: flex !important;
        flex-flow: row wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;

        /* Минимальные расстояния */
        column-gap: 60px !important;
        row-gap: 90px !important;

        width: calc(100% - 80px) !important;
        max-width: 1240px !important;

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

        box-sizing: border-box !important;
    }

    /* Карточка фиксированной ширины */
    #allrecords
    .js-store-grid-cont.t-store__grid-cont
    > .js-product.t-store__card {
        flex: 0 0 235px !important;

        width: 235px !important;
        min-width: 235px !important;
        max-width: 235px !important;

        margin: 0 !important;
        padding: 0 !important;
        float: none !important;

        box-sizing: border-box !important;
    }
}


/* Убираем разделители, которые Tilda вставляет между рядами */
#allrecords
.js-store-grid-cont.t-store__grid-cont
> .t-clear,

#allrecords
.js-store-grid-cont.t-store__grid-cont
> .t-store__grid-separator {
    display: none !important;
}

#allrecords
.js-store-grid-cont.t-store__grid-cont::before,

#allrecords
.js-store-grid-cont.t-store__grid-cont::after {
    display: none !important;
    content: none !important;
}


/* =========================================
   ПЛАНШЕТ — 3 КАРТОЧКИ
   ========================================= */

@media screen and (min-width: 981px) and (max-width: 1199px) {

    #allrecords .js-store-grid-cont.t-store__grid-cont {
        display: flex !important;
        flex-flow: row wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;

        column-gap: 36px !important;
        row-gap: 70px !important;

        width: calc(100% - 48px) !important;
        max-width: 960px !important;

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

    #allrecords
    .js-store-grid-cont.t-store__grid-cont
    > .js-product.t-store__card {
        flex: 0 0 calc((100% - 72px) / 3) !important;

        width: calc((100% - 72px) / 3) !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
}


/* =========================================
   НЕБОЛЬШОЙ ПЛАНШЕТ — 2 КАРТОЧКИ
   ========================================= */

@media screen and (min-width: 641px) and (max-width: 980px) {

    #allrecords .js-store-grid-cont.t-store__grid-cont {
        display: flex !important;
        flex-flow: row wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;

        column-gap: 28px !important;
        row-gap: 60px !important;

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

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

    #allrecords
    .js-store-grid-cont.t-store__grid-cont
    > .js-product.t-store__card {
        flex: 0 0 calc((100% - 28px) / 2) !important;

        width: calc((100% - 28px) / 2) !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
}


/* =========================================
   ТЕЛЕФОН — 1 КАРТОЧКА
   ========================================= */

@media screen and (max-width: 640px) {

    #allrecords .js-store-grid-cont.t-store__grid-cont {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        row-gap: 50px !important;

        width: calc(100% - 40px) !important;
        max-width: 380px !important;

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

    #allrecords
    .js-store-grid-cont.t-store__grid-cont
    > .js-product.t-store__card {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 380px !important;

        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
}