.select2-container--default .select2-selection--single .select2-selection__clear {
    display: inline-block !important;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 18px;
    width: 23%;
}

/**
 * CSS pour la Vue Liste (List View)
 * Ciblage de la classe .list sur la liste des produits (ul.products)
 */

/* 1. Assurer que la liste des produits est affichée comme un bloc (pour annuler les styles de grille) */
ul.products.list {
    display: block !important;
    padding: 0;
    margin: 0;
}

/* 2. Forcer chaque produit (li.product) à prendre toute la largeur et utiliser Flexbox pour l'alignement horizontal */
ul.products.list li.product {
    /* Annuler les largeurs de grille de Kadence ou autres thèmes */
    width: 100% !important; 
    margin: 0 0 20px 0 !important; /* Espacement entre les produits */
    
    /* Configurer l'affichage en liste (image à gauche, infos à droite) */
    display: flex; 
    align-items: flex-start; /* Alignement en haut */
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    
    border: 1px solid #e0e0e0; /* Bordure légère pour la séparation visuelle */
    padding: 15px;
    box-sizing: border-box;
    list-style: none;
}

/* 3. Déplacer l'image du produit et lui donner une taille fixe */
ul.products.list li.product .woocommerce-loop-product__link {
    flex: 0 0 180px; /* Taille fixe pour l'image (ajustez si besoin) */
    max-width: 180px; 
    margin-right: 20px;
    text-align: center;
    position: relative; /* Pour positionner l'image */
}
/* Assurer que l'image elle-même ne dépasse pas son conteneur */
ul.products.list li.product .woocommerce-loop-product__link img {
    height: auto !important;
    max-width: 100% !important;
}

/* 4. Conteneur des informations du produit (titre, prix, description, bouton) */
ul.products.list li.product .details,
ul.products.list li.product .product-info { /* Ciblez l'élément conteneur des infos de votre thème */
    flex: 1 1 auto; /* Prend l'espace restant */
    display: flex;
    flex-direction: column;
}

/* 5. Cacher l'encapsulation du prix/bouton ou forcer l'alignement */
ul.products.list li.product .price, 
ul.products.list li.product .button {
    margin-top: 10px;
}

/* 6. Ajouter une description courte (si non visible par défaut dans la boucle) */
/* C'est là que vous devez ajouter le code pour afficher l'extrait de description
   dans le fichier content-product.php ou en utilisant un hook PHP.
   Si c'est fait, cette mise en forme aidera :
*/
ul.products.list li.product .short-description {
    margin: 10px 0;
    color: #666;
    font-size: 0.9em;
}

/**
 * CORRECTION POUR LE MODE LISTE (LIST VIEW) WCFM/KADENCE
 * Cible la classe .list présente sur la balise ul.products dans la zone WCFM.
 */

/* Utiliser le sélecteur WCFM pour isoler les changements à la boutique du vendeur */
.wcfmmp-product-list-wrapper ul.products.list li.product,
#wcfmmp-store .product_area ul.products.list li.product {
    /* Annule toutes les transitions pour éliminer les décalages visuels */
    transition: none !important;
}

/* ==============================================
   A. Affichage Permanent du Bouton (List View)
   ============================================== */

/* Cible le bouton en mode LISTE, au repos et au survol */
.wcfmmp-product-list-wrapper ul.products.list li.product .product-action-wrap,
.wcfmmp-product-list-wrapper ul.products.list li.product:hover .product-action-wrap,
#wcfmmp-store .product_area ul.products.list li.product .product-action-wrap,
#wcfmmp-store .product_area ul.products.list li.product:hover .product-action-wrap {
    /* Force l'affichage du bouton */
    opacity: 1 !important; 
    visibility: visible !important;
    
    /* Annule la translation ou toute transformation de masquage */
    transform: none !important; 
    
    /* Positionnement statique dans le flux pour stabiliser la liste */
    position: static !important;
    margin-top: 10px; 
}


/* ==============================================
   B. Annulation du Mouvement au Survol (List View)
   ============================================== */

/* Annule le mouvement (transform) sur l'élément produit LI */
.wcfmmp-product-list-wrapper ul.products.list li.product.loop-entry:hover,
#wcfmmp-store .product_area ul.products.list li.product.loop-entry:hover {
    transform: none !important; 
    /* Annule la box-shadow si elle change au survol */
    box-shadow: none !important; 
}

/* S'assurer que les éléments intérieurs (Image, Contenu) ne bougent pas non plus */
.wcfmmp-product-list-wrapper ul.products.list li.product:hover .woocommerce-loop-image-link,
.wcfmmp-product-list-wrapper ul.products.list li.product:hover .product-details.entry-content-wrap,
#wcfmmp-store .product_area ul.products.list li.product:hover .woocommerce-loop-image-link,
#wcfmmp-store .product_area ul.products.list li.product:hover .product-details.entry-content-wrap {
    transform: none !important;
    transition: none !important;
}

/* On cible précisément le conteneur pour écraser les styles par défaut */
#wcfmmp-stores-wrap-holder .store-avatar.lft.is-open {
    border: 4px solid #2ecc71 !important;
    padding: 2px !important;
    background-color: #2ecc71 !important; /* Crée un liseré coloré */
}

#wcfmmp-stores-wrap-holder .store-avatar.lft.is-closed {
    border: 4px solid #e74c3c !important;
    padding: 2px !important;
    background-color: #e74c3c !important; /* Crée un liseré coloré */
}

/* On s'assure que l'image reste ronde à l'intérieur */
#wcfmmp-stores-wrap-holder .store-avatar.lft img {
    border-radius: 50% !important;
    border: 2px solid #fff !important; /* Un petit bord blanc pour détacher le logo */
}

/* 1. Aligner l'avatar et les infos côte à côte */
.store-footer-top-flex {
    display: flex !important;
    align-items: flex-start; /* Aligne en haut */
    gap: 15px; /* Espace entre le logo et le texte */
    padding: 10px;
}

/* 2. Fixer la taille de l'avatar pour qu'il ne bouge pas */
.store-avatar.lft {
    flex: 0 0 80px; /* Ne rétrécit pas, ne grandit pas, fait 80px */
    height: 80px;
    border-radius: 50%;
    padding: 3px;
    background: #fff;
    position: relative;
    box-sizing: border-box;
}

.store-avatar.lft img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* 3. COULEURS de statut sur le logo */
.store-avatar.is-open {
    border: 3px solid #2ecc71 !important; /* Vert */
}

.store-avatar.is-closed {
    border: 3px solid #e74c3c !important; /* Rouge */
}

/* 4. Gérer le bloc de texte à droite */
.store-data-container.rgt {
    flex: 1; /* Prend tout l'espace restant */
    min-width: 0; /* Important pour éviter que le texte casse le layout */
}

.store-data h2, .store-data h3 {
    margin: 0 0 5px 0 !important;
    font-size: 16px;
    line-height: 1.2;
}

.store-contact-details p {
    margin: 2px 0 !important;
    font-size: 13px;
    color: #666;
    word-wrap: break-word; /* Coupe les emails trop longs si besoin */
}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer {
    background: #fff;
    position: relative;
    padding: 15px 20px!important;
    border-top: 1px solid #eee;
    min-height: 280px!important;
}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer .store-data-container {
     top: 10px!important; 
}

/* On réinitialise la hauteur pour qu'elle soit fluide */
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-3 .store-footer {
    /* min-height: 200px; */
    height: auto !important;
    min-height: 200px !important; /* On retire la contrainte de 320px */
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    background: #fff;
    position: relative;

}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-3 .store-footer .store-data-container {
    padding: 30px 0 0 0!important;
}

/* On s'assure que le contenu du milieu pousse le bouton vers le bas si besoin, 
   mais sans forcer une taille fixe */
.store-footer-top-flex {
    display: flex !important;
    margin-bottom: 10px;
    flex-grow: 1; /* Permet d'occuper l'espace disponible */
}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-3 a.wcfmmp-visit-store {
    top: -15px !important;
}
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li p.store-enquiry {
    position: absolute;
    top: -25px !important;
    right: 130px !important;
}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .bd_rating{
    padding: 10px 0px !important;
}

/* --- Mise en forme du formulaire de recherche --- */
.wcfmmp-store-search-form {
    display: flex !important;
    flex-wrap: wrap; /* Permet de passer à la ligne sur mobile */
    gap: 10px;       /* Espace entre les éléments */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

/* --- Style commun pour TOUS les champs (Input + Select) --- */
.wcfmmp-store-search-form input[type="search"],
.wcfmmp-store-search-form select,
.wcfmmp-store-search-form .select2-container {
    flex: 1 1 200px; /* Grandit, rétrécit, base à 200px */
    min-width: 0;    /* Évite de casser le flex */
    height: 42px !important;
    margin: 0 !important;
}

/* Force la taille interne de Select2 */
.wcfmmp-store-search-form .select2-container--default .select2-selection--single {
    height: 42px !important;
    display: flex;
    align-items: center;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

/* Style spécifique de l'input texte pour s'aligner sur les selects */
/* 1. Réinitialisation spécifique pour l'input search */
#pickup-search {
    -webkit-appearance: none; /* Retire le style spécial iOS/Safari */
    appearance: none;
    height: 42px !important; /* Même hauteur que les autres */
    line-height: 42px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    
    /* Bordures et Couleurs */
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    
    /* Typographie */
    font-size: 14px !important;
    font-family: inherit;
    color: #444;
    
    /* Ombre légère pour matcher ton style précédent */
    box-shadow: 1px 1px 5px 0 #e9e9e9 !important;
    box-sizing: border-box !important; /* Très important pour le calcul de largeur */
}

/* 2. Correction du bouton "X" de nettoyage propre aux inputs search (Chrome/Safari) */
#pickup-search::-webkit-search-decoration,
#pickup-search::-webkit-search-cancel-button,
#pickup-search::-webkit-search-results-button,
#pickup-search::-webkit-search-results-decoration {
    display: none;
}

/* 3. État au focus (quand on clique dedans) */
#pickup-search:focus {
    outline: none !important;
    border-color: #aaa !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.1) !important;
}

/* 4. Ajustement pour aligner l'input avec les conteneurs Select2 */
.wcfmmp-store-search-form {
    display: flex !important;
    align-items: stretch !important; /* Force tous les éléments à la même hauteur */
    gap: 10px;
}

/* --- Responsive : Mobile (écrans < 767px) --- */
@media screen and (max-width: 767px) {
    .wcfmmp-store-search-form {
        flex-direction: column; /* On empile tout verticalement */
        align-items: stretch;
    }

    .wcfmmp-store-search-form input[type="search"],
    .wcfmmp-store-search-form .select2-container,
    .wcfmmp-store-search-form select {
        width: 100% !important; /* Prend toute la largeur */
        flex: none;
    }

    .wcfm-woocommerce-ordering {
        flex-direction: column;
    }
    #wcfmmp_pickup_store_orderby,#wcfmmp_pickup_store_day {
        width:100% !important;
    }
}
.wcfm-woocommerce-ordering{
    display: flex;
}

#wcfmmp_pickup_store_orderby,#wcfmmp_pickup_store_day {
        margin-right: 20px !important;
}

#wcfm_settings_form .wcfm-tabWrap {
    min-height: 1100px; /* Garde la hauteur minimale actuelle */
    padding-bottom: 50px; /* Espace de sécurité en bas */
}

#custom_branch_hours{
    display: flex;
    flex-direction: column;
    width: 100% !important;
}