/* Fix for featured products layout - 2 rows of 4 columns */
.featured-products-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
}

.featured-product-item {
    width: 25% !important; /* 4 columns */
    padding: 10px !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* Override any other CSS that might affect the layout */
.featured-products-container .product-grid-item,
.featured-products-container [class*="col-"],
.featured-product-item {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* Ensure we have exactly 2 rows */
@media (min-width: 768px) {
    .featured-products-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: repeat(2, auto) !important;
        gap: 20px !important;
    }
    
    .featured-product-item {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}