/**
 * Custom Mobile Columns CSS
 * Muestra 2 columnas en dispositivos m??viles en lugar de 1
 */

/* Productos en mobil - 2 columnas */
@media (max-width: 767px) {
    ul.products li.product,
    ul.products .wc-block-grid__product,
    .wc-block-grid__products li.product,
    .wc-block-grid__products .wc-block-grid__product {
        width: 48% !important;
        margin-right: 3.8% !important;
        float: left !important;
    }
    
    /* Asegurar que cada segunda columna no tenga margen derecho */
    ul.products li.product:nth-child(2n),
    ul.products .wc-block-grid__product:nth-child(2n),
    .wc-block-grid__products li.product:nth-child(2n),
    .wc-block-grid__products .wc-block-grid__product:nth-child(2n) {
        margin-right: 0 !important;
        clear: right;
    }
    
    /* Asegurar que las filas impares empiecen nuevas l??neas */
    ul.products li.product:nth-child(2n+1),
    ul.products .wc-block-grid__product:nth-child(2n+1),
    .wc-block-grid__products li.product:nth-child(2n+1),
    .wc-block-grid__products .wc-block-grid__product:nth-child(2n+1) {
        clear: left;
    }
}