/* Override existing styles for 5 columns */
@media screen and (min-width: 48em) {
    /* Main container - adjust if needed */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        margin-right: -2%; /* Compensate for the gap */
    }
    
    /* Product items - 5 columns */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    .columns-5 ul.products li.product {
        width: 18.4% !important; /* 100% / 5 = 20% minus gap */
        float: left;
        margin: 0 2% 2.992em 0 !important; /* 2% gap between products */
        clear: none !important;
    }
    
    /* Remove margin from the 5th item in each row */
    .woocommerce ul.products li.product:nth-child(5n),
    .woocommerce-page ul.products li.product:nth-child(5n),
    .columns-5 ul.products li.product:nth-child(5n) {
        margin-right: 0 !important;
    }
    
    /* Clear floats for every 5th item */
    .woocommerce ul.products li.product:nth-child(5n+1),
    .woocommerce-page ul.products li.product:nth-child(5n+1),
    .columns-5 ul.products li.product:nth-child(5n+1) {
        clear: both !important;
    }
    
    /* Override the first item clear */
    .woocommerce ul.products li.first,
    .woocommerce-page ul.products li.first {
        clear: both !important;
    }
    
    /* Reset first class */
    .woocommerce ul.products li.first:not(:nth-child(5n+1)),
    .woocommerce-page ul.products li.first:not(:nth-child(5n+1)) {
        clear: none !important;
    }
}

/* Mobile responsive - keep as is or adjust for smaller screens */
@media screen and (max-width: 47.999em) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    .columns-5 ul.products li.product {
        width: 100% !important;
        margin: 0 0 2.992em 0 !important;
    }
}

/* Tablet - optionally show 2-3 columns on tablets */
@media screen and (min-width: 30em) and (max-width: 47.999em) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    .columns-5 ul.products li.product {
        width: 48% !important;
        margin: 0 2% 2.992em 0 !important;
    }
    
    .woocommerce ul.products li.product:nth-child(2n),
    .woocommerce-page ul.products li.product:nth-child(2n),
    .columns-5 ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
    
    .woocommerce ul.products li.product:nth-child(2n+1),
    .woocommerce-page ul.products li.product:nth-child(2n+1),
    .columns-5 ul.products li.product:nth-child(2n+1) {
        clear: both !important;
    }
}