/**
 * Category Promo Blocks
 *
 * Switches the product list to CSS Grid only when promo blocks are present,
 * leaving the default flex layout untouched on all other pages.
 *
 * Desktop (4 cols):
 *   Row 1     : P1   P2   P3   P4
 *   Rows 2–3  : BLOCK1 (col 1–2 × 2 rows)  |  P5  P6
 *                                           |  P7  P8
 *   Row 4     : P9   P10  P11  P12
 *   Rows 5–6  : P13  P14  |  BLOCK2 (col 3–4 × 2 rows)
 *               P15  P16  |
 */

.products-grid .product-items > .promo-block-item {
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .products-grid .product-items.has-promo-blocks {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: row dense;

        column-gap: 30px;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    .products-grid .product-items.has-promo-blocks > .promo-block-item {
        grid-column: span 2;
        grid-row: span 2;
        overflow: hidden;

        padding: 0;
    }

    .products-grid .product-items.has-promo-blocks > .promo-block-item.promo-right {
        grid-column: 3 / span 2;
    }

    .products-grid .product-items.has-promo-blocks > .promo-block-item .promo-block-inner {
        height: 100%;
    }
    .products-grid .product-items.has-promo-blocks > .product-item {
        width: auto !important;
        padding: 0 !important;
        min-width: 0;
    }

    .products-grid .product-items.has-promo-blocks > .promo-block-item {
        min-width: 0;
    }
}
/* @media (min-width: 1024px) { */
/* @media (min-width: 1280px) {
/* @media (min-width: 1440px) {
    .products-grid .product-items.has-promo-blocks > .promo-block-item {
        padding: 0 15px;
    }
} */

/* Tablet: 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .products-grid .product-items.has-promo-blocks {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-grid .product-items.has-promo-blocks > .promo-block-item {
        padding: 0 0.5%;
    }
    .products-grid .product-items.has-promo-blocks > .promo-block-item.promo-right {
        /* grid-column: 3 / span 1; */
        grid-column: 2 / span 2;
    }

    .products-grid .product-items.has-promo-blocks > .product-item {
        margin-left: 0;
        padding: 0 1%;
    }
}

/* Mobile: 2 columns, blocks span full width, single row height */
@media (max-width: 767px) {
    .products-grid .product-items.has-promo-blocks {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid .product-items.has-promo-blocks > .promo-block-item {
        grid-column: span 2;
        grid-row: span 1;

        padding: 0 1%;
    }

    .products-grid .product-items.has-promo-blocks > .product-item {
        margin-left: 0;
        padding: 0 1%;
        width: 50%;
    }

}