/**
 * ==========================================================
 * SIDV Theme
 * ----------------------------------------------------------
 * Component: Products Grid & Catalog Layout
 * ----------------------------------------------------------
 * Estilos optimizados para la maquetación del catálogo (Layout con Sidebar)
 * y la grilla flexible de productos con soporte para CSS Custom Properties,
 * estado vacío estilizado y adaptabilidad responsiva.
 * ==========================================================
 */

/*==================================================
1. LAYOUT CONTENEDOR DE CATÁLOGO (CON SIDEBAR)
==================================================*/

.sidv-products-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    margin: 2.5rem 0;
}

.sidv-products-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sidv-products-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
}

/*==================================================
2. CONTENEDOR DE LA GRILLA (PRODUCTS GRID)
==================================================*/

.sidv-products-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    transition: 
        opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.3s ease;
}

/* Estado de Carga (UX durante render AJAX) */
.sidv-products-grid.is-loading {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    filter: blur(1.5px);
}

.sidv-products-grid__loading-state {
    width: 100%;
}

/*==================================================
3. SISTEMA DE GRILLA Y COLUMNAS DINÁMICAS
==================================================*/

.sidv-products-grid__items {
    display: grid;
    grid-template-columns: repeat(var(--sidv-grid-cols, 4), minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    width: 100%;
    transition: gap 0.3s ease;
}

/* Control dinámico mediante CSS Variables y fallback clases/atributos */
.sidv-products-grid[data-columns="4"] .sidv-products-grid__items,
.sidv-products-grid--cols-4 .sidv-products-grid__items {
    --sidv-grid-cols: 4;
}

.sidv-products-grid[data-columns="3"] .sidv-products-grid__items,
.sidv-products-grid--cols-3 .sidv-products-grid__items {
    --sidv-grid-cols: 3;
}

.sidv-products-grid[data-columns="2"] .sidv-products-grid__items,
.sidv-products-grid--cols-2 .sidv-products-grid__items {
    --sidv-grid-cols: 2;
}

.sidv-products-grid[data-columns="1"] .sidv-products-grid__items,
.sidv-products-grid--cols-1 .sidv-products-grid__items {
    --sidv-grid-cols: 1;
}

/*==================================================
4. ESTADO VACÍO (EMPTY STATE)
==================================================*/

.sidv-products-grid__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    padding: 3.5rem 1.5rem;
    text-align: center;
    background-color: var(--sidv-color-bg-alt, #f9fafb);
    border-radius: var(--sidv-radius-lg, 16px);
    border: 1px dashed var(--sidv-color-border, #e5e7eb);
}

/*==================================================
5. ADAPTACIÓN RESPONSIVA Y ACCESIBILIDAD
==================================================*/

@media (max-width: 1400px) {
    .sidv-products-grid[data-columns="4"] .sidv-products-grid__items,
    .sidv-products-grid--cols-4 .sidv-products-grid__items {
        --sidv-grid-cols: 3;
    }
}

@media (max-width: 1024px) {
    .sidv-products-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sidv-products-sidebar {
        position: relative;
        top: auto;
        order: 2;
    }

    .sidv-products-content {
        order: 1;
    }
}

@media (max-width: 768px) {
    .sidv-products-layout {
        margin: 1.5rem 0;
    }

    .sidv-products-grid__items {
        gap: 1rem;
    }

    .sidv-products-grid[data-columns="4"] .sidv-products-grid__items,
    .sidv-products-grid[data-columns="3"] .sidv-products-grid__items,
    .sidv-products-grid--cols-4 .sidv-products-grid__items,
    .sidv-products-grid--cols-3 .sidv-products-grid__items {
        --sidv-grid-cols: 2;
    }
}

@media (max-width: 480px) {
    .sidv-products-grid__items {
        gap: 0.875rem;
    }

    .sidv-products-grid[data-columns="4"] .sidv-products-grid__items,
    .sidv-products-grid[data-columns="3"] .sidv-products-grid__items,
    .sidv-products-grid[data-columns="2"] .sidv-products-grid__items,
    .sidv-products-grid--cols-4 .sidv-products-grid__items,
    .sidv-products-grid--cols-3 .sidv-products-grid__items,
    .sidv-products-grid--cols-2 .sidv-products-grid__items {
        --sidv-grid-cols: 1;
    }
}

/* Reducción de movimiento para accesibilidad (WCAG) */
@media (prefers-reduced-motion: reduce) {
    .sidv-products-grid,
    .sidv-products-grid__items,
    .sidv-products-sidebar {
        transition: none;
    }
}