/* ====================================
   [02] ESTILOS RESPONSIVOS DE COLUMNAS
   ------------------------------------
   Ajusta la cantidad de columnas del
   grid de productos según el tamaño de pantalla.
==================================== */

/* Estilos base para todas las configuraciones de columnas */
ul.products,
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 {
  /* Centra horizontal y verticalmente las listas de productos */
  justify-content: center !important;
  align-items: center !important;
}

/* ===============================
   PANTALLAS GRANDES (≥ 1000px)
   → Muestra 4 columnas
=============================== */
@media (min-width: 1000px) {
  ul.products {
    display: flex;              /* Usa flexbox para alinear los elementos */
    flex-wrap: wrap;            /* Permite que los elementos se ajusten a varias líneas */
    justify-content: center;   /* Centra horizontalmente las filas de productos */
    gap: 20px;                  /* Espacio entre tarjetas de producto */
    padding: 0 20px;            /* Espaciado interno horizontal del contenedor */
  }

  ul.products li.product {
    flex: 0 0 calc(25% - 20px);     /* Ocupa el 25% menos el espacio del gap */
    max-width: calc(25% - 20px);    /* Máximo ancho igual al cálculo anterior */
    display: flex;                  /* Flexbox para el contenido interno */
    flex-direction: column;        /* Coloca los elementos del producto en columna */
    align-items: stretch;          /* Estira el contenido a lo alto */
    margin: 0;                     /* Elimina márgenes externos */
  }
}

/* ===============================
   PANTALLAS MEDIANAS (600–999px)
   → Muestra 3 columnas
=============================== */
@media (min-width: 600px) and (max-width: 999px) {
  ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;                   /* Menor espacio entre productos */
    padding: 0 16px;
  }

  ul.products li.product {
    flex: 0 0 calc(33.333% - 16px);  /* Un tercio menos el espacio del gap */
    max-width: calc(33.333% - 16px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
  }
}

/* ===============================
   PANTALLAS PEQUEÑAS (≤ 599px)
   → Muestra 2 columnas
=============================== */
@media (max-width: 599px) {
  ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;                  /* Espacio más reducido entre columnas */
    padding: 0 12px;
  }

  ul.products li.product {
    flex: 0 0 calc(50% - 12px);     /* Mitad del ancho menos espacio del gap */
    max-width: calc(50% - 12px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
  }
}