/* --- Styling for the Recommendation Flexbox Grid CONTAINER --- */

/* 1. Overall Wrapper (Keep existing or adjust) */
.recommendation-wrapper {
    max-width: 100%;
    margin: 16px 0;
    /* overflow: hidden; /* Optional: if you want to clip content to rounded corners */
}

.recommendation-wrapper .carousel-product-card {
    height: 390px
}

/* 2. Content Area Padding (Keep existing or adjust) */
.recommendation-content {
    /*padding: 1rem;*/
}

/* 3. The Flexbox Grid Container ITSELF */
.recommendation-flex-grid {
    display: flex;
    flex-wrap: wrap;    /* Allow items to wrap to the next line */
    gap: 1rem;          /* Space BETWEEN grid items (adjust gap size as needed) */
    list-style: none;   /* Remove potential list bullets if applicable */
    padding: 0;
    margin: 0;          /* Reset default margins */
}

/* 4. Sizing the Direct Children (Your Product Cards) within the Grid */
/*    Targets your existing card class structure */
.recommendation-flex-grid > .carousel-product-card.item { /* Or just .carousel-product-card if .item isn't needed for selection */
    /* --- Responsive Item Sizing (Mobile First Approach) --- */

    /* Default: 2 columns on small screens */
    flex-basis: 100%; /* 1 column takes full width */
    max-width: 100%;  /* Safari fix */
    
    height: 450px;

    /* NOTE: Your existing global CSS for .carousel-product-card.item should handle */
    /* background, border, internal padding, etc. */
    /* We are ONLY controlling the width/basis within the flex container here. */
}

/* Media query for medium screens (e.g., tablets) - 3 columns */
@media (min-width: 600px) { /* Adjust breakpoint as needed */
    .recommendation-flex-grid > .carousel-product-card.item {
        flex-basis: calc(33.333% - 0.67rem); /* (100% / 3) - (gap * 2 / 3) */
        max-width: calc(33.333% - 0.67rem);
        
        height: 390px;
    }
}

/* Media query for large screens (e.g., small desktops) - 4 columns */
@media (min-width: 992px) { /* Adjust breakpoint as needed */
    .recommendation-flex-grid > .carousel-product-card.item {
        flex-basis: calc(25% - 0.75rem); /* (100% / 4) - (gap * 3 / 4) */
         max-width: calc(25% - 0.75rem);
    }
}

/* Media query for extra-large screens (e.g., large desktops) - 5 columns */
@media (min-width: 1200px) { /* Adjust breakpoint as needed */
    .recommendation-flex-grid > .carousel-product-card.item {
        flex-basis: calc(20% - 0.8rem); /* (100% / 5) - (gap * 4 / 5) */
         max-width: calc(20% - 0.8rem);
    }
}

/* --- IMPORTANT --- */
/* Ensure there are NO styles below this line that override your */
/* global card styles for .card-image-wrapper, .card-content-wrapper, */
/* .card-title, .card-price, .card-actions, buttons, badges etc. */
/* UNLESS you specifically intend to override them ONLY in this section. */