/* Grid контейнер: 12 колонок × 12 строк */
.product-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, auto);
    gap: 50px;
    margin: 0 auto;
}
.product-grid.swiper-initialized {
    display: none;
}
.product-grid__block.swiper-slide {
    width: 320px;
}

/* Общие стили блоков */
.product-grid__block {
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
/*.block:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    z-index: 10;
}*/

/* РАССТАНОВКА БЛОКОВ по колонкам и строкам */

/* Блок 1 — красный: строки 1-3, колонки 1-4 */
.product-grid__block_1 {

    grid-row: 2 / 4;
    grid-column: 5 / 7;

    align-self: flex-end
}

/* Блок 2 — оранжевый: строки 1-2, колонки 5-8 */
.product-grid__block_2 {

    grid-row: 1 / 4;
    grid-column: 7 / 11;

}

.product-grid__block.product-grid__block_2 .product-item:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 370 380' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='368' cy='368' r='111' fill='%23F5F7FD'/%3E%3Cpath d='M623 368C623 227.167 508.833 113 368 113C227.167 113 113 227.167 113 368C113 508.833 227.167 623 368 623V736C164.759 736 0 571.241 0 368C0 164.759 164.759 0 368 0C571.241 0 736 164.759 736 368C736 571.241 571.241 736 368 736V623C508.833 623 623 508.833 623 368Z' fill='%23F5F7FD'/%3E%3C/svg%3E%0A");
    width: 370px;
    height: 380px;
    background-repeat: no-repeat;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

/* Блок 3 — жёлтый: строки 1-2, колонки 9-12 */
.product-grid__block_3 {

    grid-row: 2 / 4;
    grid-column: 11 / 13;
    color: #333;

    align-self: flex-end
}

/* Блок 4 — зелёный: строки 3-5, колонки 5-8 */
.product-grid__block_4 {

    grid-row: 4 / 7;
    grid-column: 2 / 4;

}

/* Блок 5 — бирюзовый: строки 4-6, колонки 1-4 */
.product-grid__block_5 {

    grid-row: 4 / 8;
    grid-column: 4 / 8;

}

.product-grid__block.product-grid__block_5 .product-item:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 438 437' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_10013_19643)'%3E%3Ccircle cx='111' cy='111' r='111' transform='matrix(-1 0 0 1 181 257)' fill='white' fill-opacity='0.14'/%3E%3Cpath d='M-185 368C-185 227.167 -70.8326 113 70 113C210.833 113 325 227.167 325 368C325 508.833 210.833 623 70 623V736C273.241 736 438 571.241 438 368C438 164.759 273.241 0 70 0C-133.241 0 -298 164.759 -298 368C-298 571.241 -133.241 736 70 736V623C-70.8326 623 -185 508.833 -185 368Z' fill='white' fill-opacity='0.14'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10013_19643'%3E%3Crect width='438' height='437' fill='white' transform='matrix(-1 0 0 1 438 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
    width: 438px;
    height: 437px;
    background-repeat: no-repeat;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

/* Блок 6 — синий: строки 3-4, колонки 9-12 */
.product-grid__block_6 {

    grid-row: 4 / 7;
    grid-column: 8 / 10;

}

/* Блок 7 — фиолетовый: строки 6-8, колонки 3-7 */
.product-grid__block_7 {

    grid-row: 4 / 7;
    grid-column: 10 / 12;

}

/* Блок 8 — розовый: строки 5-7, колонки 9-12 */
.product-grid__block_8 {

    grid-row: 7 / 9;
    grid-column: 2 / 4;

}

/* Блок 9 — серо-голубой: строки 8-10, колонки 1-5 */
.product-grid__block_9 {

    grid-row: 8 / 13;
    grid-column: 4 / 8;
    color: #333;

}

.product-grid__block.product-grid__block_9 .product-item:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='424' height='437' viewBox='0 0 424 437' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_10013_32716)'%3E%3Cellipse cx='109.5' cy='110' rx='109.5' ry='110' transform='matrix(-1 0 0 1 187 254)' fill='%23F5F7FD'/%3E%3Cpath d='M-175.075 364.5C-175.075 225.007 -61.9932 111.925 77.5 111.925C216.993 111.925 330.075 225.007 330.075 364.5C330.075 503.993 216.993 617.075 77.5 617.075V729C278.808 729 442 565.808 442 364.5C442 163.192 278.808 0 77.5 0C-123.808 0 -287 163.192 -287 364.5C-287 565.808 -123.808 729 77.5 729V617.075C-61.9932 617.075 -175.075 503.993 -175.075 364.5Z' fill='%23F5F7FD'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10013_32716'%3E%3Crect width='425' height='437' fill='white' transform='matrix(-1 0 0 1 424 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    width: 424px;
    height: 437px;
    background-repeat: no-repeat;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}


.product-grid__block_10 {
    grid-row: 7 / 11;
    grid-column: 8 / 12;
    align-items: flex-start;
}
/*
.product-grid__block_10 .product-item.product-item_link-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #eaeaea;
    mix-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}*/

.product-item {
    width: 100%;
    height: 340px;
    border-radius: 30px;
    background: var(--color-text-contrast, #FFF);
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.product-item .product-item__title {
    color: var(--color-text-primary, #312E2B);
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 123.077% */
    z-index: 2;
    position: absolute;
    overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    top: 24px;
    left: 24px;
    right: 24px;
}
.product-item .product-item__image {
    position: relative;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex: 1;
    box-sizing: border-box;
    left: 0;
    top: 20px;
}
.product-item .product-3d-box {
    scale: 1.4;
}
.product-item.product-item_size-big .product-3d-box {
    scale: 1.4;
}
.product-item__image canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.product-item__video-bg {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.product-item .product-item__transition {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: 1;
    background-color: var(--color-button-tertiary, #EAEDF5);
}
.product-item .product-item__transition:hover {
    background-image: radial-gradient(88.89% 87% at 50% 63.33%, #DA5D32 0%, #FFBC3B 100%);
    color: #FFF;
}
.product-item .product-item__transition:hover path {
    color: #FFF;
}
.product-item.product-item_size-big {
    height: 536px;
    padding: 40px;
}
.product-item.product-item_size-big .product-item__image {
    left: 0;
    top: 20px;
}
.product-item.product-item_size-big .product-3d-box {
    scale: 1.4;
}
.product-item.product-item_size-big .product-item__title {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 125% */
    top: 40px;
    left: 40px;
    right: 40px;
}

.product-item.product-item_link-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url("/image/image 7.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.product-item.product-item_link-block .product-item__title {
    color: var(--color-text-primary, #312E2B);
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 48px; /* 120% */
    letter-spacing: -0.4px;
    text-transform: uppercase;
    position: static;
    display: block;
}

.product-item:hover .product-item__transition {
    background-image: radial-gradient(88.89% 87% at 50% 63.33%, #DA5D32 0%, #FFBC3B 100%);
    color: #FFF;
    stroke: #FFF;
}

.product-slide-item__title {
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
}

.product-item.product-item_dark {
    background: var(--color-card-secondary, radial-gradient(145.68% 94.57% at 33.24% 26.73%, #474A4B 0%, #2E3031 100%));
}
.product-item.product-item_dark .product-item__title {
    color: var(--color-text-contrast, #FFF);
}
.product-item.product-item_dark .product-item__transition {
    background-color: var(--color-button-contrast, #FFF);
}
.product-item.product-item_main {
    background: radial-gradient(100.5% 100% at 39.18% 29.38%, #F7841F 0%, #DA5D32 100%);
}
.product-item.product-item_main .product-item__title {
    color: var(--color-text-contrast, #FFF);
}
.product-item.product-item_main .product-item__transition {
    background-color: var(--color-button-contrast, #FFF);
}

.product-item.product-item_bg-white {
    background-color: #FFF;
}

.product-item.product-item_bg-white:before {
    content: unset !important;
}

@media (max-width: 1899px) {
    .product-grid {
        grid-template-columns: repeat(24, 1fr);
        gap: 20px;
    }
    .product-item {
        height: 280px;
    }
    .product-item .product-item__title {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 120% */
    }

    .product-item .product-item__transition {
        width: 40px;
        height: 40px;
    }
    .product-item .product-item__transition svg {
        width: 24px;
        height: 24px;
    }
    .product-item.product-item_size-big .product-item__title {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 120% */
    }
    .product-item.product-item_link-block .product-item__title {
        font-size: 20px;
        font-weight: 800;
        line-height: 26px; /* 125% */
        letter-spacing: -0.32px;
    }
    .product-item.product-item_size-big {
        height: 433px;
    }
    .product-item.product-item_size-big .product-item__image {

    }
    .product-grid__block.product-grid__block_10 {
        justify-self: flex-start;
    }
    .product-grid__block_1 {
        grid-row: 2 / 4;
        grid-column: 7 / 12;
    }
    .product-grid__block_2 {
        grid-row: 1 / 4;
        grid-column: 12 / 20;
    }
    .product-grid__block.product-grid__block_2 .product-item:before {
        width: 310px;
        height: 310px;
    }
    .product-grid__block_3 {
        grid-row: 2 / 4;
        grid-column: 20 / 25;
    }
    .product-grid__block_4 {
        grid-row: 4 / 7;
        grid-column: 1 / 6;
    }
    .product-grid__block_5 {
        grid-row: 4 / 8;
        grid-column: 6 / 14;
    }
    .product-grid__block.product-grid__block_5 .product-item:before {
        width: 320px;
        height: 320px;
    }
    .product-grid__block_6 {
        grid-row: 4 / 7;
        grid-column: 14 / 19;
    }
    .product-grid__block_7 {
        grid-row: 4 / 7;
        grid-column: 19 / 24;
    }
    .product-grid__block_8 {
        grid-row: 7 / 9;
        grid-column: 1 / 6;
    }
    .product-grid__block_9 {
        grid-row: 8 / 13;
        grid-column: 6 / 14;
    }
    .product-grid__block.product-grid__block_9 .product-item:before {
        background-image: url("data:image/svg+xml,%3Csvg width='324' height='324' viewBox='0 0 324 324' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='87' cy='87' r='87' transform='matrix(-1 0 0 1 125 199)' fill='%23F5F7FD'/%3E%3Cpath d='M-160.179 286C-160.179 176.549 -71.4514 87.8207 38 87.8207C147.451 87.8207 236.179 176.549 236.179 286C236.179 395.451 147.451 484.179 38 484.179V572C195.953 572 324 443.953 324 286C324 128.047 195.953 0 38 0C-119.953 0 -248 128.047 -248 286C-248 443.953 -119.953 572 38 572V484.179C-71.4514 484.179 -160.179 395.451 -160.179 286Z' fill='%23F5F7FD'/%3E%3C/svg%3E%0A");
        width: 324px;
        height: 324px;
    }
    .product-grid__block_10 {
        grid-row: 7 / 11;
        grid-column: 14 / 22;
    }
}

@media (max-width: 1279px) {
    .product-grid {
        display: none;
    }

    .product-grid.swiper-initialized {
        width: 100%;
        display: block;
        overflow: unset;
    }

    .product-item, .product-item.product-item_size-big {
        width: 320px;
        height: 433px;
        padding: 32px;
    }

    .product-item .product-3d-box {
        scale: 1.4;
    }
    .product-item.product-item_size-big .product-item__title {
        top: 24px;
        left: 24px;
        right: 24px;
    }
}

@media (max-width: 767px) {
    .product-item, .product-item.product-item_size-big {
        height: 338px;
        padding: 32px;

    }
    .product-item.product-item_size-big .product-item__image {
        left: 0;
        top: 40px;
    }
    .product-item .product-item__image {
        left: 0;
        top: 40px;
        max-height: 210px;
    }
    .section__product-categories {
        margin-left: -24px;
        margin-right: -24px;
        padding: 0 24px;
    }
    .product-slider__nav {
        margin-top: 40px;
    }
}

.product-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 552px;
}

.product-categories__link {
    display: inline-flex;
    height: 48px;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 35px;
    background: var(--color-button-contrast, #FFF);
    color: var(--color-text-primary, #312E2B);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    box-sizing: border-box;
}

@media (max-width: 1899px) {
    .product-categories {
        flex-direction: column;
    }
}

.section-container__top_product-grid {
    position: absolute;
}

@media (max-width: 1279px) {
    .section-container__top_product-grid {
        position: static;
    }
    .section__product-categories {
        flex-direction: row;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .section__product-categories::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .section__product-categories li {
        flex-shrink: 0;
    }
}