/* 
 * 🖥️ DESKTOP PRODUCT GRID - EXACTLY 3 COLUMNS
 * 
 * Карточки товаров ровно по 3 штуки на экране для десктопа
 * ТОЛЬКО ДЛЯ ДЕСКТОПА (> 768px)
 */

/* ============================================
   DESKTOP: 3 COLUMNS EVERYWHERE
   ============================================ */

/* Стандартный десктоп (769px - 1439px) */
@media (min-width: 769px) and (max-width: 1439px) {
    
    /* Product grid - 3 колонки АГРЕССИВНО */
    .product__items,
    .product__items.list,
    .product__items.grid,
    .product__items.slider,
    .products-grid,
    .newArrivalsSlider,
    .popularSlider {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    /* Cursor grid - 3 колонки */
    .cursor-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Product items - точные размеры */
    .product__items .item,
    .product__items.list .item,
    .product__items.slider .item,
    .cursor-grid .cursor-product-card,
    .cursor-grid .item,
    .cursor-product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        margin: 0 !important;
        flex: none !important;
    }
    
    /* Убираем слайдер на десктопе */
    .product__items .slick-track,
    .newArrivalsSlider .slick-track,
    .popularSlider .slick-track {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        transform: none !important;
        width: 100% !important;
    }
    
    .product__items .slick-slide,
    .newArrivalsSlider .slick-slide,
    .popularSlider .slick-slide {
        width: auto !important;
        float: none !important;
    }
    
}


/* Широкий десктоп (1440px+) */
@media (min-width: 1440px) {
    
    /* Product grid - 3 колонки АГРЕССИВНО */
    .product__items,
    .product__items.list,
    .product__items.grid,
    .product__items.slider,
    .products-grid,
    .newArrivalsSlider,
    .popularSlider {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    /* Cursor grid - 3 колонки */
    .cursor-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    
    /* Product items - точные размеры */
    .product__items .item,
    .product__items.list .item,
    .product__items.slider .item,
    .cursor-grid .cursor-product-card,
    .cursor-grid .item,
    .cursor-product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        margin: 0 !important;
        flex: none !important;
    }
    
    /* Убираем слайдер на десктопе */
    .product__items .slick-track,
    .newArrivalsSlider .slick-track,
    .popularSlider .slick-track {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        transform: none !important;
        width: 100% !important;
    }
    
    .product__items .slick-slide,
    .newArrivalsSlider .slick-slide,
    .popularSlider .slick-slide {
        width: auto !important;
        float: none !important;
    }
    
}


/* Очень широкие экраны (1920px+) */
@media (min-width: 1920px) {
    
    /* Даже на 4K - только 3 колонки */
    .product__items,
    .product__items.list,
    .product__items.grid,
    .product__items.slider,
    .products-grid,
    .newArrivalsSlider,
    .popularSlider,
    .cursor-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 28px !important;
    }
    
}


/* ============================================
   SLIDER OVERRIDES (если используется слайдер)
   ============================================ */

@media (min-width: 769px) {
    
    /* Если есть slick slider - показываем 3 слайда */
    .product__items.slider .slick-track {
        display: flex !important;
    }
    
    .product__items.slider .slick-slide {
        width: calc(33.333% - 16px) !important;
        margin: 0 8px !important;
    }
    
    /* Slick настройки для 3 колонок */
    .slick-slider .slick-slide {
        max-width: calc(33.333% - 16px) !important;
    }
    
}