/* ============================================
   📱 Estilos Responsive de Productos – WooCommerce
   ============================================ */

   .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
  }
  
  .woocommerce ul.products li.product {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
  }
  
  /* 2 por fila en pantallas ≥ 576px */
  @media (min-width: 576px) {
    .woocommerce ul.products li.product {
      flex: 1 1 calc(50% - 20px);
      max-width: calc(50% - 20px);
    }
  }
  
  /* 3 por fila en pantallas ≥ 768px */
  @media (min-width: 768px) {
    .woocommerce ul.products li.product {
      flex: 1 1 calc(33.33% - 20px);
      max-width: calc(33.33% - 20px);
    }
  }
  
  /* 4 por fila en pantallas ≥ 1024px */
  @media (min-width: 1024px) {
    .woocommerce ul.products li.product {
      flex: 1 1 calc(25% - 20px);
      max-width: calc(25% - 20px);
    }
  }