/*
|--------------------------------------------------------------------------
| Category Product Grid
|--------------------------------------------------------------------------
|
| Mobil: 2 ürün
| Tablet: 2 ürün
| Masaüstü: 3 ürün
|
*/

.category-product-grid {
    /* 2026-09-23: grid-template-columns buradan KALDIRILDI -- artik
       Categories/Show.vue'daki 3/4/5 (masaustu) ve 1/2 (mobil) sutun
       secici (mobileColsClass/desktopColsClass, Tailwind grid-cols-*)
       tarafindan REACTIVE olarak yonetiliyor. Buradaki eski !important
       kural her zaman kazanip secici hicbir zaman gorsel etki
       yaratamiyordu -- bkz. proje dokumani
       kategori-sayfasi-3-4-5-sutun-mobil-1-2-secici-2026-09-23.md */
    display: grid !important;
    gap: 20px !important;

    @media (min-width: 640px) {
        gap: 30px !important;
    }

    @media (min-width: 1024px) {
        gap: 30px !important;
    }
}

.four-product {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;

    @media (min-width: 640px) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 30px !important;
    }

    @media (min-width: 1024px) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 30px !important;
    }
}
/*
|--------------------------------------------------------------------------
| Category Sidebar Layout
|--------------------------------------------------------------------------
*/

.category-product-grid.with-sidebar {
    /* sutun sayisi artik Show.vue'daki seciciden geliyor, burada zorlanmiyor */
}

/*
|--------------------------------------------------------------------------
| Category Full Width Layout
|--------------------------------------------------------------------------
*/

.category-product-grid.no-sidebar-wide {
    /* sutun sayisi artik Show.vue'daki seciciden geliyor, burada zorlanmiyor */
}