/* ==================================================
   MEBELPLUS — КАТАЛОГ ТОВАРІВ
   Ліва колонка: 20%
   Область товарів: 80%
   Десктоп: 4 товари в ряд
   ================================================== */

@media (min-width: 1200px) {

    /* Ліва колонка з категоріями та фільтрами */
    #product-category .row > #column-left {
        width: 20% !important;
        max-width: 20% !important;
        flex: 0 0 20% !important;
        box-sizing: border-box;
    }

    /* Основна область каталогу */
    #product-category .row > #content {
        width: 80% !important;
        max-width: 80% !important;
        flex: 0 0 80% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Чотири однакові колонки товарів */
    #product-category .products-block.row.row-flex:has(.product-layout.product-grid) {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 15px;
        row-gap: 20px;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Прибираємо стандартні ширини Bootstrap */
    #product-category .products-block .product-layout.product-grid {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Картки товарів */
    #product-category .products-block .product-thumb {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Зображення товарів */
    #product-category .products-block .product-thumb__image img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}

/* Планшети: 3 товари в ряд */
@media (min-width: 768px) and (max-width: 1199px) {

    #product-category .products-block.row.row-flex:has(.product-layout.product-grid) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 15px;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #product-category .products-block .product-layout.product-grid {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Мобільні телефони: 2 товари в ряд */
@media (max-width: 767px) {

    #product-category .products-block.row.row-flex:has(.product-layout.product-grid) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #product-category .products-block .product-layout.product-grid {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}