/* — CARTES PRODUIT — CORRIGÉ */
.woocommerce ul.products li.product {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px;
    text-align: center;
    transition: transform .15s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* effet zoom léger au survol */
.woocommerce ul.products li.product:hover {
    transform: scale(1.02);
}

/* IMAGE PRODUIT - CORRIGÉ */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    margin-bottom: 10px;
}

.woocommerce ul.products li.product img {
    border-radius: 10px;
    margin-bottom: 8px;
    width: 100%;
    height: 180px;
    /* Hauteur fixe */
    object-fit: cover;
    /* Garde les proportions et remplit l'espace */
    object-position: center;
    /* Centre l'image */
}

/* bouton Ajouter */
.woocommerce ul.products li.product .button.add_to_cart_button {
    background-color: #e53935;
    color: #fff !important;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 600;
    margin-top: auto;
    /* Pousse le bouton vers le bas */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* petit icône + avant le texte */
.add_to_cart_button .btn-icon {
    font-weight: bold;
    margin-right: 4px;
}

/* enlever soulignement autour des titres */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    text-decoration: none !important;
    cursor: default;
    pointer-events: none;
}

/* permet au bouton de rester cliquable malgré pointer-events:none */
.woocommerce ul.products li.product a.button {
    pointer-events: auto;
    cursor: pointer;
}

/* STYLE DU COMPTEUR - CORRIGÉ */
.omar-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e53935;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    padding: 4px 8px;
    line-height: 1;
    margin-left: 8px;
    min-width: 30px;
    height: 25px;
}

/* Container pour bouton + compteur */
.woocommerce ul.products li.product .button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

/* Cacher le message "Voir le panier" */
.added_to_cart {
    display: none !important;
}

/* Prix */
.woocommerce ul.products li.product .price {
    font-weight: bold;
    color: #e53935;
    margin: 8px 0;
}

/* Titre produit */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 16px;
    margin: 8px 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* =========================
   🚀 SOLUTION FORCÉE ULTIME
   ========================= */

/* FORCER le filtre à rester en dessous */



.sticky-columns-filter {
    z-index: 1 !important;
}

.sticky-category-filter {
    z-index: 1 !important;
}

/* FORCER le panier à être au-dessus de TOUT */
.ct-cart-content,
.ct-cart[data-placement],
.cart-dropdown,
.mini-cart {
    z-index: 99999 !important;
    /* ⬅️ LE PLUS HAUT POSSIBLE */
    position: relative;
}

/* S'assurer que le dropdown s'affiche correctement */
[data-placement="left"],
[data-placement="right"] {
    z-index: 100000 !important;
}

/* Container parent si nécessaire */
.ct-header,
.header,
.site-header {
    z-index: 1000 !important;
    position: relative;
}





/* =========================
   📌 FILTRE STICKY COLONNES (EN 1er)
   ========================= */
.sticky-columns-filter {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
}

/* =========================
   📌 FILTRE STICKY CATÉGORIES (EN 2ème)
   ========================= */
.sticky-category-filter {
    position: sticky;
    top: 98px;
    /* Ajustez selon la hauteur du premier filtre */
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.filter-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Styles communs pour tous les boutons */
.filter-btn,
.filter-select-btn,
.filter-search-btn {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    padding: 12px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    color: #495057;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
}

.filter-btn:hover,
.filter-select-btn:hover,
.filter-search-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
}

/* Styles spécifiques pour les selects */
.filter-select {
    background: transparent;
    border: none;
    outline: none;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    font-size: 14px;
}

.filter-select-btn:hover .filter-select {
    color: #333;
}

/* Styles spécifiques pour la recherche */
.filter-search-input {
    background: transparent;
    border: none;
    outline: none;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    min-width: 150px;
}

.filter-search-input::placeholder {
    color: #6c757d;
    font-weight: normal;
}

.filter-search-btn:hover .filter-search-input {
    color: #333;
}

.filter-search-btn:hover .filter-search-input::placeholder {
    color: #495057;
}

/* Miniature de catégorie */
.category-thumbnail {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.filter-btn.active .category-thumbnail {
    border-color: #fff;
    transform: scale(1.1);
}

/* Icône par défaut */
.filter-icon {
    font-size: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Texte du filtre */
.filter-text {
    font-size: 14px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .filter-container {
        gap: 10px;
    }

    .filter-btn,
    .filter-select-btn,
    .filter-search-btn {
        padding: 10px 15px;
        font-size: 13px;
        min-height: 45px;
    }

    .sticky-category-filter {
        top: 70px;
        /* Ajustez pour mobile */
    }
}






















/* =========================
   🛍️ GRILLE PRODUITS
   ========================= */

/* Container principal produits */
.woocommerce ul.products:first-child {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    list-style: none !important;
    max-width: 1140px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Cacher le deuxième ul qui est vide ou mal formé */
.woocommerce ul.products ul.products {
    display: none !important;
}

/* Éléments produits */
.woocommerce ul.products li.product {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px;
    text-align: center;
    transition: transform .15s ease-in-out;
    position: relative;
    box-sizing: border-box;
}

/* Images produits */
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Titres produits */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 16px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    height: 42px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Prix */
.woocommerce ul.products li.product .price {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #e53935 !important;
    margin: 0 0 15px 0 !important;
}

/* Bouton Ajouter */
.woocommerce ul.products li.product .button.add_to_cart_button {
    background-color: #e53935 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Compteur */
.omar-cart-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e53935;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    border-radius: 10px;
    padding: 2px 8px;
    line-height: 1;
    z-index: 10;
}

/* =========================
   📱 RESPONSIVE
   ========================= */

/* Tablette - 3 colonnes */
@media (max-width: 1200px) {
    .woocommerce ul.products:first-child {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablette petite - 2 colonnes */
@media (max-width: 768px) {
    .woocommerce ul.products:first-child {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .filter-container {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 10px;
    }

    .filter-btn {
        padding: 10px 15px;
        font-size: 13px;
        flex-shrink: 0;
        min-height: 45px;
    }

    .category-thumbnail {
        width: 25px;
        height: 25px;
    }

    .filter-icon {
        font-size: 16px;
        width: 25px;
        height: 25px;
    }
}

/* Mobile - 1 colonne */
@media (max-width: 480px) {
    .woocommerce ul.products:first-child {
        grid-template-columns: 1fr !important;
    }

    .filter-btn {
        padding: 8px 12px;
        min-height: 40px;
    }

    .filter-text {
        font-size: 12px;
    }
}

/* Loading state */
.products.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.products.loading::before {
    content: "Chargement...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 10;
}

/* Message aucun produit */
.no-products {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
    grid-column: 1 / -1;
}