/*
 * Styles pour le plugin Korence Intelligent Suggestions
 * Version 1.0.0
 */

/* Rendre le conteneur principal plus robuste */
.kis-suggestions-wrapper {
    width: 100%;
    float: left; /* Assure que le conteneur prend toute la largeur */
    margin-bottom: 2em; /* Espace après le bloc de suggestions */
}

/* Forcer le titre à être un bloc distinct au-dessus des produits */
.kis-suggestions-wrapper h3 {
    width: 100%;
    clear: both;
    margin-bottom: 1em;
}

/*
 * Grille pour les colonnes sur PC (Desktop)
 * Utilise les classes .columns-X
 */
.kis-suggestions-wrapper.columns-1 ul.products li.product { width: 100%; }
.kis-suggestions-wrapper.columns-2 ul.products li.product { width: 48%; }
.kis-suggestions-wrapper.columns-3 ul.products li.product { width: 30.75%; }
.kis-suggestions-wrapper.columns-4 ul.products li.product { width: 22.05%; }
.kis-suggestions-wrapper.columns-5 ul.products li.product { width: 16.9%; }
.kis-suggestions-wrapper.columns-6 ul.products li.product { width: 13.5%; }

/*
 * Grille pour les colonnes sur Mobile
 * S'applique aux écrans de moins de 768px
 */
@media (max-width: 768px) {
    /* Règles générales pour mobile */
    .kis-suggestions-wrapper ul.products li.product {
        margin-right: 4% !important; /* Standardisation des marges pour le calcul */
        clear: none !important;
    }

    /* 1 colonne mobile */
    .kis-suggestions-wrapper.mobile-columns-1 ul.products li.product {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* 2 colonnes mobile */
    .kis-suggestions-wrapper.mobile-columns-2 ul.products li.product { width: 48% !important; }
    .kis-suggestions-wrapper.mobile-columns-2 ul.products li.product:nth-child(2n) { margin-right: 0 !important; }
    .kis-suggestions-wrapper.mobile-columns-2 ul.products li.product:nth-child(2n+1) { clear: both !important; }
    
    /* 3 colonnes mobile */
    .kis-suggestions-wrapper.mobile-columns-3 ul.products li.product { width: 30.66% !important; }
    .kis-suggestions-wrapper.mobile-columns-3 ul.products li.product:nth-child(3n) { margin-right: 0 !important; }
    .kis-suggestions-wrapper.mobile-columns-3 ul.products li.product:nth-child(3n+1) { clear: both !important; }
}