.gradient-title {
  font-size: 28px; 
  font-weight: bold;
  text-transform: uppercase; 
  background: linear-gradient(to right, #7c00ff, #fd5016);
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  padding: 5px 20px 0px 20px; 
  border: 2px solid;
  border-image: linear-gradient(to right, #7c00ff, #fd5016) 1;
  display: inline-block;
  text-align: center;
}

/* Titre page CMS*****/
.centerTitle {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 5rem;
  line-height: 6rem;
  font-family: 'Bebas Neue', sans-serif;
  -webkit-text-stroke: 2px #7d03fb;
}


.breadcrumb {
    background-color: #f7f7f7;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb ol li {
    margin-right: 10px;
}

.breadcrumb ol li::after {
    content: " / ";
    margin-left: 10px;
    color: #aaa;
}

.breadcrumb ol li:last-child::after {
    content: "";
}

/* CSS final avec corrections pour rendre boutons et quantités visibles */

/* Structure principale du produit avec hauteur significativement augmentée */
.equal-height-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px; /* Hauteur augmentée pour s'assurer que tout est visible */
  position: relative; /* Nécessaire pour le positionnement */
  overflow: visible !important; /* Force le dépassement des éléments si nécessaire */
}

/* Conteneur principal */
.thumbnail-container {
 /* display: flex;*/
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: visible !important; /* Force le dépassement des éléments */
}

/* Zone des images */
.fixed-height-image {
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.product-thumbnail img {
  max-width: 100%;
  max-height: 266px; /* Limité pour plus d'espace */
  object-fit: contain;
}

/* Zone du contenu */
.product-description {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 5px;
  position: relative;
  overflow: visible !important;
}

/* Titre du produit */
.fixed-height-title {
  height: 36px; /* Légèrement réduite */
  overflow: hidden;
  margin-bottom: 5px;
  text-align: center;
}

.product-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

/* Description courte */
.fixed-height-description {
  height: 40px; 
  overflow: hidden;
  margin-bottom: 5px;
  text-align: center;
  font-size:0.9rem;
}

/* Prix du produit */
.fixed-height-price {
  height: 30px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

/* Zone pour le module an_productattributes */
.an_productattributes-container {
  margin-top: 0;
  position: relative;
  z-index: 10; 
  overflow: visible !important;
}




/* Styles pour les contrôles de quantité et le bouton du module */
.an_productattributes-qty-add {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-top: 5px !important;
  min-height: 100px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Conteneur de quantité */
.an_productattributes-qty-container {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
}



/* Bouton d'ajout au panier */
.an_productattributes-add {
  width: 100% !important;
  display: block !important;
  overflow: visible !important;
  z-index: 20 !important;
}




/* Adaptations responsive */
@media (min-width: 768px) and (max-width: 991px) {
  .equal-height-product {
    min-height: 540px; /* Augmentée pour le mode 3 colonnes */
    padding: 8px;
  }
  
  .js-product.product.col-sm-4 {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .fixed-height-image {
    height: 150px;
  }
  
  .fixed-height-description {
    height: 50px;
  }
  
  .an_productattributes-container {
    min-height: 170px;
  }
}

@media (max-width: 767px) {
  .equal-height-product {
    min-height: 490px;
  }
  
  .fixed-height-image {
    height: 140px;
  }
}

/* Garantir que les contrôles du module sont visibles */
.bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after,
.bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after {
  content: none !important;
}

/* Styles pour les flags et badges */
.product-flags {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.product-flag {
  padding: 2px 5px;
  margin-bottom: 5px;
  font-size: 12px;
  border-radius: 3px;
  display: block;
}

.cart-grid 
{
  padding-top : 20px;
}

/* Sélecteurs pour cibler uniquement la page liste produits (category) et détail produit (product) */
/*body.page-category select, 
body.page-category input[type="text"],
body.page-category input[type="number"],
body.page-category .form-control,
body.page-product select, 
body.page-product input[type="text"],
body.page-product select:not(.goog-te-combo), 
body.page-product input[type="text"]:not([name="s"]),
body.page-product input[type="number"],
body.page-product .form-control {
  width: 100% !important;
  padding: 8px !important;
  margin-bottom: 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  color: #333 !important;
  cursor: pointer !important;
  z-index: 100 !important;
  position: relative !important;
  pointer-events: auto !important;
}*/

/* Exception pour les sélecteurs (select) - garder l'apparence menulist */
body.page-category select,
body.page-product select {
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
}

/* Exception pour les champs de quantité - retirer l'apparence menulist */
body.page-category input[type="number"],
body.page-product input[type="number"] {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  text-align: center !important;
}

/* Styles pour les boutons de flèches de quantité */
body.page-category .input-group-btn-vertical,
body.page-product .input-group-btn-vertical {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 20px !important;
  height: 100% !important;
}

body.page-category .input-group-btn-vertical .btn,
body.page-product .input-group-btn-vertical .btn {
  position: absolute !important;
  right: 0 !important;
  width: 20px !important;
  padding: 0 !important;
  border: 1px solid #ddd !important;
  border-top: 1px solid #ddd !important;
  background: #FFF !important;
  display: block !important;
  text-align: center !important;
  z-index: 101 !important;
  cursor: pointer !important;
}

/* Flèche supérieure - Ajustement de la hauteur */
body.page-category .input-group-btn-vertical .btn.bootstrap-touchspin-up,
body.page-product .input-group-btn-vertical .btn.bootstrap-touchspin-up {
  top: 0 !important;
  height: 17px !important; /* Hauteur ajustée pour la flèche du haut */
  border-top-right-radius: 4px !important;
  border-bottom: none !important;
}

/* Flèche inférieure - Ajustement de la hauteur */
body.page-category .input-group-btn-vertical .btn.bootstrap-touchspin-down,
body.page-product .input-group-btn-vertical .btn.bootstrap-touchspin-down {
  bottom: 0 !important;
  height: 17px !important; /* Hauteur ajustée pour la flèche du bas */
  border-bottom-right-radius: 4px !important;
  border-top: none !important;
}

/* Masquer les icônes d'origine pour éviter les doublons */
body.page-category .input-group-btn-vertical i,
body.page-product .input-group-btn-vertical i {
  display: none !important;
}

/* Assurer que les conteneurs des champs de quantité sont bien positionnés */
body.page-category .input-group,
body.page-product .input-group {
  display: flex !important;
  width: 50px !important;
  position: relative !important;
  height: 34px !important; /* Hauteur fixe pour le groupe input */
}

body.page-category .input-group .form-control,
body.page-product .input-group .form-control {
  flex: 1 !important;
  /*border-right: none !important;*/
  border-top-right-radius: 1 !important;
  border-bottom-right-radius: 1 !important;
  height: 34px !important; /* Hauteur fixe pour le champ input */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Rendre les flèches visibles en forçant l'affichage et ajuster la position verticale */
body.page-category .input-group-btn-vertical .bootstrap-touchspin-up::after,
body.page-product .input-group-btn-vertical .bootstrap-touchspin-up::after {
  content: "▲" !important;
  display: block !important;
  position: absolute !important;
  top: 45% !important; /* Ajusté pour centrer verticalement dans son bouton */
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

body.page-category .input-group-btn-vertical .bootstrap-touchspin-down::after,
body.page-product .input-group-btn-vertical .bootstrap-touchspin-down::after {
  content: "▼" !important;
  display: block !important;
  position: absolute !important;
  top: 45% !important; /* Ajusté pour centrer verticalement dans son bouton */
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

@media (max-width: 767px) {
  /* Masquer le sélecteur de vue */
  .view-buttons {
    display: none !important;
  }
  
  /* Force 2 produits par ligne */
  .js-product.product.col-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    float: left !important;
  }
  
  /* Ajuster les paddings pour un meilleur affichage */
  .js-product.product {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  
  /* Assurer que l'image est visible */
  .thumbnail-container .thumbnail-top img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    margin: 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 150px !important;
  }
  
  /* Corriger la hauteur du conteneur d'image */
  .thumbnail-top.fixed-height-image {
    height: auto !important;
    min-height: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  
  /* S'assurer que le lien thumbnail fonctionne correctement */
  .thumbnail.product-thumbnail {
    display: block !important;
    text-align: center !important;
    height: auto !important;
    width: 100% !important;
  }
  
  /* Ajuster la hauteur du produit entier */
  .equal-height-product {
    min-height: 360px !important;
    height: auto !important;
  }
  
  /* Réduire la taille de certains éléments pour économiser l'espace */
  .product-title {
    font-size: 0.9rem !important;
  }
  
  .product-short-description {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }
  
  /* Supprimer les boutons de la wishlist qui peuvent causer des problèmes */
  .ets-wishlist-button-add {
    top: 5px !important;
    right: 5px !important;
    z-index: 10 !important;
  }
  
  /* Réduire taille du bouton d'ajout au panier */
  .an_productattributes-add .btn {
    padding: 0.5rem !important;
  }
  
  /* Forcer l'affichage de la picture et de l'image */
  .product-thumbnail picture,
  .product-thumbnail picture img {
    display: block !important;
    visibility: visible !important;
  }
}
.sub-title-livraison {
  font-family: "Montserrat Light", sans-serif;
  font-size: 0.8rem;
  line-height: -0.75em;
  color: #000;
  padding:10px 0 0 0;
  font-weight: bold;
  margin:0px;
}

.legendelivraison
{
  font-family: "Montserrat Light", sans-serif;
  font-size: 0.9rem;  
  color: #000 !important;
}

.section-title-livraison {
  color: #000 !important;
  padding:10px 0 0 0;
  font-weight: bold;
  margin:0px;
}

.summary-text p {
    font-size: 0.7rem;
    color: #000 !important;
    line-height: 1.4;
}


.resume-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

.visual-summary {
    max-width: 800px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px 30px;
    padding: 20px 0 0 0;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.summary-icon {
    margin-bottom: 10px;
}

.summary-text h4 {
    font-size: 14px;
    margin: 5px 0;
}



/* Pour mobile, passer à une colonne */
@media (max-width: 768px) {
    .visual-summary {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .visual-summary {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .summary-item {
        flex: 0 0 150px;
        max-width: 150px;
        margin: 5px;
    }
}

.livraison-retours-container {
  font-size: 0.9rem;
}

.logout {
  display: inline-block;
  padding: 0.25rem 2.5rem;
  background-color: white;
  color: #7d03fb; 
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #7d03fb; 
  border-radius: 18px;
  text-align: center;
  transition: all 0.3s ease;
}

.logout:hover {
  background-color: #6402c9; 
  color: white !important;
}


.logout:active {
  transform: translateY(2px); 
}

/****************************************************************************28/04/2025***************************************************/
/* 1. Conteneur Qte+Ajouter: Alignement et hauteur min */
.product-miniature .an_productattributes-qty-add {
  min-height: auto !important; /* Évite la hauteur fixe qui peut causer des problèmes */
  padding-bottom: 10px !important; /* Espace suffisant en bas */
  margin-top: 5px !important;
}

/* Réduire la largeur du conteneur de quantité pour laisser de la place au bouton */
.product-miniature .an_productattributes-qty-container {
  width: 45% !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin-bottom: 0 !important; /* Suppression de la marge du bas */
  overflow: visible !important;
}

/* Ajuster la largeur du bouton d'ajout au panier */
.product-miniature .an_productattributes-add {
  margin-bottom: 15px !important;
  position: relative;
  z-index: 5;
}

/* Ajuster la taille et le style du bouton en lui-même */
.product-miniature .an_productattributes-add .btn {
  width: 100% !important;
  padding: 0.375rem 0.5rem !important;
  font-size: 0.875rem !important;
  height: 40px !important; /* Même hauteur que l'input de quantité */
}

/* Déplacement du bouton de favoris sous l'ensemble qté + ajouter, uniquement sur la page liste */
.product-miniature .circle.right.ets-wishlist-button-add {
  position: absolute;
  bottom: -30px;
  right: 10px;
  z-index: 20;
}

/* Assurer que l'input de quantité a une largeur raisonnable */
.product-miniature .an_productattributes-qty {
  width: 45px !important;
  text-align: center !important;
}

/* Pour les écrans plus petits, réduire la taille du texte du bouton */
@media (max-width: 991px) {
  .product-miniature .an_productattributes-add .btn {
    font-size: 0.75rem !important;
    padding: 0.25rem !important;
  }
  
  .product-miniature .js-an_productattributes-add-to-cart::before {
    font-size: 0.75rem;
  }
}

/* Pour les très petits écrans, repasser en mode colonne si nécessaire */
@media (max-width: 380px) {
  .product-miniature .an_productattributes-qty-add {
    flex-direction: column !important;
  }
  
  .product-miniature .an_productattributes-qty-container,
  .product-miniature .an_productattributes-add {
    width: 100% !important;
  }
  
  .product-miniature .an_productattributes-qty-container {
    margin-bottom: 10px !important;
  }
  
  .product-miniature .circle.right.ets-wishlist-button-add {
    bottom: -45px;
  }
}

/* --- Positionnement et Hover du bouton Wishlist --- */

/* 1. Rendre le conteneur de l'image 'relative' pour positionner le bouton par rapport à lui */
.product-miniature .thumbnail-container {
  position: relative;
  overflow: visible; /* Important pour que le bouton ne soit pas coupé s'il dépasse légèrement */
}

/* 2. Style et positionnement absolu du bouton wishlist */
.product-miniature .thumbnail-container .ets-wishlist-button-add {
  position: absolute !important; /* !important peut être nécessaire pour surcharger d'autres règles */
  top: 10px;                 /* Ajustez la distance du haut */
  right: 10px;                /* Ajustez la distance de la droite */
  z-index: 5;                 /* Pour être sûr qu'il est au-dessus de l'image */

  /* Styles pour l'apparence (adaptez si besoin) */
  background-color: rgba(255, 255, 255, 0.7); /* Fond blanc semi-transparent */
  border-radius: 50%;       /* Pour le rendre rond */
  width: 35px;              /* Taille du bouton */
  height: 35px;             /* Taille du bouton */
  padding: 0;               /* Retirer le padding par défaut */
  border: 1px solid #ccc;   /* Bordure légère */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Ombre légère */
  cursor: pointer;
  display: flex;            /* Pour centrer le SVG à l'intérieur */
  align-items: center;
  justify-content: center;

  /* Styles pour l'état caché par défaut + transition */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateZ(0); /* Optionnel: effet de zoom + force GPU */
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out, transform 0.25s ease-in-out;

  /* Réinitialiser les styles conflictuels possibles */
  margin: 0 !important;
  float: none !important;
}

/* 3. Style du SVG à l'intérieur du bouton */
.ets-wishlist-button-add svg {
  width: 18px;  /* Taille de l'icône */
  height: 18px; /* Taille de l'icône */
  fill: #555; /* Couleur de l'icône par défaut */
  transition: fill 0.2s ease; /* Transition pour la couleur */
}

/* 4. Affichage au survol du conteneur de l'image */
.product-miniature .thumbnail-container:hover .ets-wishlist-button-add {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateZ(0); /* Retour à la taille normale */
}

/* 5. Style optionnel au survol du bouton lui-même */
.ets-wishlist-button-add:hover {
  background-color: rgba(255, 255, 255, 0.9); /* Fond plus opaque */
  border-color: #999;
}

.ets-wishlist-button-add:hover svg {
  fill: #7d03fb; /* Change la couleur de l'icône au survol */
}

/* 6. Si le bouton a une classe spécifique quand ajouté (ex: delete_wishlist), changez la couleur */
.ets-wishlist-button-add.delete_wishlist svg {
    fill: #fd5016; /* Couleur quand ajouté (exemple: rouge/orange) */
}
.ets-wishlist-button-add.delete_wishlist:hover svg {
    fill: #d13a00; /* Couleur au survol quand ajouté */
}

/* --- Fin Positionnement Wishlist --- */


/* --- Amélioration Affichage Input Quantité (Intégration Flèches) --- */

/* Cible spécifiquement le conteneur des boutons +/- dans le contexte du produit miniature */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical {
    position: absolute !important; /* Positionne par rapport au .input-group */
    right: 1px !important;         /* Légèrement décalé de la bordure droite du parent */
    top: 1px !important;           /* Légèrement décalé du haut */
    bottom: 1px !important;       /* Légèrement décalé du bas */
    height: calc(100% - 2px) !important; /* Ajuste la hauteur pour tenir compte du décalage top/bottom */
    width: 25px !important;        /* Largeur pour la zone des flèches */
    z-index: 2 !important;         /* S'assurer qu'il est au-dessus de l'input */
    display: flex !important;       /* Utiliser flex pour diviser l'espace */
    flex-direction: column !important; /* Empiler les boutons verticalement */
    background-color: #fff !important; /* Fond blanc pour masquer ce qui est en dessous si besoin */
    border-left: 1px solid #eee !important; /* Ligne de séparation verticale subtile */
}

/* Style des boutons flèches individuels */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn {
    position: static !important;      /* Reset de la position absolue du bouton lui-même */
    width: 100% !important;           /* Prend toute la largeur du conteneur vertical */
    height: 50% !important;           /* Chaque bouton prend la moitié de la hauteur */
    border: none !important;          /* SUPPRIMER LES BORDURES DU BOUTON */
    background: transparent !important;/* SUPPRIMER LE FOND DU BOUTON */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;         /* Centrage de l'icône */
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #555 !important;           /* Couleur de l'icône */
    box-shadow: none !important;      /* Retirer toute ombre */
    border-radius: 0 !important;      /* Pas de coins arrondis pour les boutons */
    z-index: auto !important;         /* Reset z-index */
}

/* Ajouter une séparation horizontale subtile entre les boutons */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn.bootstrap-touchspin-up {
    border-bottom: 1px solid #eee !important; /* Ligne fine entre haut et bas */
}

/* Style des icônes Material Icons (si utilisées) */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn i.material-icons {
    display: inline-block !important; /* Assurer la visibilité */
    font-size: 16px !important;       /* Taille de l'icône */
    line-height: 1 !important;
    vertical-align: middle;
}

/* Masquer les ::after si le thème les utilise pour les flèches et que les <i> sont présentes */
/* Décommentez si vous voyez des flèches en double ou mal placées */
/*
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn::after {
    display: none !important;
}
*/

/* Ajuster le champ input pour faire de la place aux boutons */
.product-miniature .an_productattributes-qty-container .an_productattributes-qty {
    padding-right: 30px !important; /* Espace à droite DANS l'input pour les flèches */
    border-radius: 4px !important; /* Coins arrondis sur l'input principal */
    border: 1px solid #ddd !important; /* Assurer une bordure cohérente */
    position: relative; /* Contexte de positionnement */
    z-index: 1;         /* Derrière les boutons */
    background-color: #fff !important; /* Fond de l'input */
    height: 40px !important; /* Hauteur cohérente */
    line-height: 38px; /* Ajuster pour centrer le texte verticalement */
    width: 100% !important; /* Prend la largeur restante définie par le .input-group */
}

/* 2. Conteneur du groupe input (taille globale) */
.product-miniature .an_productattributes-qty-container .input-group.bootstrap-touchspin {
    width: 75px !important; /* Garder la largeur précédente qui semblait ok */
    height: 34px !important; /* <-- Hauteur TOTALE définie par l'input */
    position: relative !important;
    display: block !important;
    border: none !important;
    background: none !important;
    vertical-align: top;
}

/* Hover sur les boutons */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn:hover {
    background-color: #f0f0f0 !important; /* Léger fond au survol */
    color: #000 !important;
}

/* --- Fin Amélioration Input Quantité --- */

/* --- CORRECTION Affichage Input Quantité v4 --- */

/* 1. Conteneur global Qte+Ajouter: Alignement par le HAUT */
.product-miniature .an_productattributes-qty-add {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Garde l'alignement par le HAUT */
    min-height: 40px !important; /* Hauteur minimale pour contenir les éléments */
    gap: 8px !important;
    flex-wrap: nowrap;
    margin-top: 10px !important;
    padding-bottom: 5px;
}

/* 2. Conteneur du groupe input (75px semble ok d'après retour) */
.product-miniature .an_productattributes-qty-container .input-group.bootstrap-touchspin {
    width: 75px !important;
    height: 40px !important; /* Hauteur Totale */
    position: relative !important;
    display: block !important;
    border: none !important;
    background: none !important;
    vertical-align: top;
}

/* 3. Input: Hauteur 34px, padding et bordure/arrondi */
.product-miniature .an_productattributes-qty-container .an_productattributes-qty {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 34px !important; /* <-- Hauteur TOTALE correspondante */
    padding-right: 28px !important; /* Espace pour flèches (ajustez si largeur flèche change) */
    padding-left: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 1px solid #ddd !important; /* Bordure standard visible partout */
    border-radius: 4px !important; /* Arrondis */
    position: relative !important;
    z-index: 1 !important;
    background-color: #fff !important;
    line-height: 32px !important; /* (34px height - 2px border top/bottom) */
    text-align: center !important;
    box-shadow: none !important;
    vertical-align: top;
}

/* 4. Conteneur des flèches: Hauteur INTERNE (32px), BORDURE GAUCHE assortie */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical {
    position: absolute !important;
    right: 1px !important;
    top: 1px !important;
    height: 32px !important;       /* <-- Hauteur INTERNE (34px input - 2px borders) */
    width: 25px !important;        /* Largeur flèches */
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #fff !important;
    border-left: 1px solid #ddd !important; /* <-- Bordure GAUCHE visible (#ddd) */
    overflow: hidden !important;           /* <-- Cache tout débordement */
    border-top-right-radius: 3px !important; /* (4px input radius - 1px border) */
    border-bottom-right-radius: 3px !important; /* (4px input radius - 1px border) */
}


/* 5. Boutons flèches: Pas de bordure/fond/arrondi, hauteur 50% */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn {
    position: static !important;
    width: 100% !important;
    height: 50% !important; /* Chaque bouton prend la moitié de 32px = 16px */
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #555 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 6. Séparation interne (sous le bouton HAUT) */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn.bootstrap-touchspin-up {
    border-bottom: 1px solid #ddd !important;
}

/* 7. Assurer que le bouton bas n'a pas de bordure basse qui pourrait dépasser */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn.bootstrap-touchspin-down {
    border-bottom: none !important; /* S'assurer qu'il n'y a pas de bordure en bas */
}

/* --- Reste des styles (icônes, masquage ::after, bouton ajouter) --- */
.product-miniature .an_productattributes-qty-container .input-group-btn-vertical .btn i.material-icons {
    display: inline-block !important;
    font-size: 14px !important; /* Légèrement réduit pour mieux s'adapter à 16px de hauteur */
    line-height: 1 !important;
    vertical-align: middle;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
    height: auto;
}
.product-miniature .an_productattributes-qty-container .bootstrap-touchspin .btn::after,
.product-miniature .an_productattributes-qty-container .bootstrap-touchspin .btn::before {
    content: none !important;
    display: none !important;
}
.product-miniature .an_productattributes-add .btn {
    height: 34px !important; /* <-- Hauteur du bouton Ajouter alignée sur l'input */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 32px !important; /* Ajusté pour centrage */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: top;
}
/* --- Fin CORRECTION Affichage Input Quantité v4 --- */


/* --- Styles Input Quantité POUR LA PAGE PRODUIT DETAIL (Produit Principal ET Miniatures Associées) --- */

/* --- Styles Input Quantité POUR LE ***MAIN*** PRODUIT DETAIL (via #add-to-cart-or-refresh) --- */

/* 1. Conteneur du groupe input (MAIN produit) */
body#product #add-to-cart-or-refresh .qty .input-group.bootstrap-touchspin {
    width: 75px !important;
    height: 34px !important;
    position: relative !important;
    display: inline-block !important;
    border: none !important;
    background: none !important;
    vertical-align: middle;
}

/* 2. Input #quantity_wanted (MAIN produit) */
body#product #add-to-cart-or-refresh #quantity_wanted {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 34px !important;
    padding-right: 28px !important;
    padding-left: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    position: relative !important;
    z-index: 1 !important;
    background-color: #fff !important;
    line-height: 32px !important;
    text-align: center !important;
    box-shadow: none !important;
    vertical-align: middle;
    display: block !important;
}

/* 3. Conteneur des flèches (MAIN produit) */
body#product #add-to-cart-or-refresh .qty .input-group-btn-vertical {
    position: absolute !important;
    right: 1px !important;
    top: 1px !important;
    height: 32px !important; /* 34px - 2px borders */
    width: 25px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #fff !important;
    border-left: 1px solid #ddd !important;
    overflow: hidden !important;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

/* 4. Boutons flèches (MAIN produit) */
body#product #add-to-cart-or-refresh .qty .input-group-btn-vertical .btn {
    position: static !important;
    width: 100% !important;
    height: 50% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #555 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 5. Séparation interne (MAIN produit) */
body#product #add-to-cart-or-refresh .qty .input-group-btn-vertical .btn.bootstrap-touchspin-up {
    border-bottom: 1px solid #ddd !important;
}
body#product #add-to-cart-or-refresh .qty .input-group-btn-vertical .btn.bootstrap-touchspin-down {
    border-bottom: none !important;
}

/* 6. Icônes dans les boutons (MAIN produit) */
body#product #add-to-cart-or-refresh .qty .input-group-btn-vertical .btn i.material-icons {
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
    height: auto;
}
/* Forcer contenu icônes si besoin */
body#product #add-to-cart-or-refresh .qty .input-group-btn-vertical .btn.bootstrap-touchspin-up i.material-icons::before {
    content: 'keyboard_arrow_up' !important;
    font-family: 'Material Icons';
}
body#product #add-to-cart-or-refresh .qty .input-group-btn-vertical .btn.bootstrap-touchspin-down i.material-icons::before {
    content: 'keyboard_arrow_down' !important;
    font-family: 'Material Icons';
}

/* 7. MASQUER LES PSEUDO-ÉLÉMENTS DANS CE CONTEXTE SPÉCIFIQUE AUSSI */
/* Redondant mais assure le coup pour le produit principal */
body#product #add-to-cart-or-refresh .qty .bootstrap-touchspin .btn::after,
body#product #add-to-cart-or-refresh .qty .bootstrap-touchspin .btn::before {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* --- Fin Styles Input Quantité PAGE PRODUIT DETAIL (corrigé pour miniatures) --- */

/* --- Styles Input Quantité POUR LA PAGE PANIER --- */

/* 1. Conteneur du groupe input (page panier) */
body#cart .cart-item .qty .input-group.bootstrap-touchspin {
    width: 75px !important; /* Garder la même largeur que page produit */
    height: 34px !important; /* Garder la même hauteur */
    position: relative !important;
    display: inline-block !important; /* Adapté pour le flux du panier */
    border: none !important;
    background: none !important;
    vertical-align: middle; /* Important pour l'alignement dans la ligne */
    margin: 0 auto; /* Centrer le bloc si la colonne est plus large */
}

/* 2. Input .js-cart-line-product-quantity (page panier) */
body#cart .cart-item .qty .js-cart-line-product-quantity {
    box-sizing: border-box !important;
    width: 100% !important; /* Prendra 75px */
    height: 34px !important; /* Hauteur définie */
    padding-right: 28px !important; /* Espace pour flèches */
    padding-left: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 1px solid #ddd !important; /* Bordure standard */
    border-radius: 4px !important; /* Arrondis */
    position: relative !important;
    z-index: 1 !important;
    background-color: #fff !important;
    line-height: 32px !important; /* 34px - 2px border */
    text-align: center !important;
    box-shadow: none !important;
    vertical-align: middle;
    display: block !important; /* Prend la largeur du parent */
}

/* 3. Conteneur des flèches (page panier) */
body#cart .cart-item .qty .input-group-btn-vertical {
    position: absolute !important;
    right: 1px !important;
    top: 1px !important;
    height: 32px !important; /* Hauteur INTERNE (34px input - 2px borders) */
    width: 25px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #fff !important;
    border-left: 1px solid #ddd !important; /* Simulation bordure droite */
    overflow: hidden !important;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

/* 4. Boutons flèches (page panier) */
body#cart .cart-item .qty .input-group-btn-vertical .btn {
    position: static !important;
    width: 100% !important;
    height: 50% !important; /* Moitié de 32px = 16px */
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #555 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 5. Séparation interne (page panier) */
body#cart .cart-item .qty .input-group-btn-vertical .btn.bootstrap-touchspin-up {
    border-bottom: 1px solid #ddd !important;
}
body#cart .cart-item .qty .input-group-btn-vertical .btn.bootstrap-touchspin-down {
    border-bottom: none !important;
}

/* 6. Icônes dans les boutons (page panier) */
body#cart .cart-item .qty .input-group-btn-vertical .btn i.material-icons {
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
    height: auto;
}
/* Forcer le contenu si les icônes Material Icons ne s'affichent pas */
body#cart .cart-item .qty .input-group-btn-vertical .btn.bootstrap-touchspin-up i.material-icons::before {
    content: 'keyboard_arrow_up' !important;
    font-family: 'Material Icons';
}
body#cart .cart-item .qty .input-group-btn-vertical .btn.bootstrap-touchspin-down i.material-icons::before {
    content: 'keyboard_arrow_down' !important;
    font-family: 'Material Icons';
}

/* 7. Masquer les pseudo-éléments par défaut */
body#cart .cart-item .qty .bootstrap-touchspin .btn::after,
body#cart .cart-item .qty .bootstrap-touchspin .btn::before {
    content: none !important;
    display: none !important;
}

/* --- Fin Styles Input Quantité PAGE PANIER --- */

/* --- Correction Flèche Supplémentaire Google Translate --- */

/* Cible le select spécifique de Google Translate */
select.goog-te-combo {
    /* Force la suppression de l'apparence native du navigateur */
    -webkit-appearance: none !important; /* Pour navigateurs Webkit (Chrome, Safari, Edge) */
    -moz-appearance: none !important;    /* Pour Firefox */
    appearance: none !important;         /* Standard */

    /* Annule l'image de fond potentiellement ajoutée par le thème pour la flèche */
    background-image: none !important;

    /* Optionnel : Ajuster le padding droit si le thème en ajoutait pour sa flèche perso */
    /* padding-right: 10px !important; */ /* Décommentez et ajustez si besoin */

    /* Optionnel : Forcer une couleur de fond si nécessaire */
    /* background-color: #votrecouleur !important; */

    /* Optionnel : Assurer qu'aucune bordure indésirable n'est ajoutée */
     box-shadow: inset 0 -3px 5px rgba(250, 250, 250, 0.2);
     color:#f3f4f4;
}

/* Masquer la flèche par défaut sur IE (moins pertinent mais complet) */
select.goog-te-combo::-ms-expand {
    display: none !important;
}

/* --- Fin Correction Flèche Google Translate --- */




/* Modifications des couleurs du champ de recherche */
.search-widgets input[type="text"] {
  color: #f1f1f1 !important;
  font-size: 14px !important;
  font-family: "Montserrat Light", sans-serif !important;
  text-transform: uppercase !important;
}


.search-widgets input[type="text"]::placeholder {
  color: #f1f1f1 !important;
}

.search-widgets .material-icons.search,
.search-widgets form button[type="submit"] i {
  color: #f1f1f1 !important;
  font-size: 1.2rem !important;
}

/* Solution de recours pour les produits avec attributs */
.js-product article.product-miniature.equal-height-product .an_productattributes-container + .an_productattributes-qty-add {
  margin-top: 20px !important; /* Espace forcé après les attributs */
}

.product-miniature {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: border-color 0.3s ease;
  padding-bottom: 10px; /* Ajout d'un padding en bas */
  position: relative;
  z-index: 1;
}

.product-miniature:hover, 
.product-miniature:focus,
.product-miniature:active {
  border-color: #7d03fb;
  z-index: 10; /* Augmente le z-index au survol pour s'assurer qu'il passe au-dessus des autres éléments */
}

/* S'assurer que tous les éléments du produit sont à l'intérieur de la bordure */
.product-miniature .thumbnail-container,
.product-miniature .product-description,
.product-miniature .an_productattributes-container,
.product-miniature .an_productattributes-qty-add {
  position: relative;
  z-index: 2;
}

.equal-height-product {
  display: flex;
  flex-direction: column;
  height: auto; /* Hauteur automatique */
  min-height: 480px; /* Hauteur minimale */
  position: relative;
  overflow: visible !important;
}

/* Traitement spécial pour les produits avec sélecteurs d'attributs */
.product-miniature .an_pa_product-variants {
  /*padding: 0 10px; */
  width: 100%;
  box-sizing: border-box;
}

/* Assurez-vous que tout le contenu est correctement contenu */
.product-miniature .an_productattributes-container {
  width: 100%;
  margin: 0;
  padding: 0 5px;
  box-sizing: border-box;
}

/* Style du contour sur l'élément article complet */
article.product-miniature {
  border: 2px solid transparent;
  border-radius: 10px;
  transition: border-color 0.3s ease;
  padding: 5px;
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

article.product-miniature:hover {
  border-color: #7d03fb;
  z-index: 10;
}

/* Ajustement pour les produits avec attributs */
article.product-miniature .an_pa_product-variants {
  width: 100%;
 /* padding: 0 5px;*/
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}




/** Ajustement mobile */

/* Responsive design pour les mobiles */
@media (max-width: 767px) {

article.product-miniature .an_pa_product-variants {
 padding:0;
}

}

/* S'assurer que le sélecteur d'attributs reste à l'intérieur des limites de l'article */
article.product-miniature .an_pa_product-variants select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ajustement de l'espace pour la zone des attributs */
article.product-miniature .an_productattributes-container {
  width: 100%;
  margin: 0;
  padding: 0 5px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* Assurer que tous les éléments internes restent contenus */
article.product-miniature > div,
article.product-miniature .thumbnail-container,
article.product-miniature .product-description {
  position: relative;
  z-index: 2;
}

/* Correction pour éviter que les éléments ne dépassent de la bordure */
article.product-miniature .an_productattributes-qty-add {
 /* margin-bottom: 5px !important;*/
  position: relative;
  z-index: 2;
}


/***************************************************12-05-2025 *******************************/

/* Réinitialisation complète pour article.product-miniature */
article.product-miniature {
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  transition: border-color 0.3s ease !important;
  padding: 5px !important;
  margin-bottom: 15px !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  height: auto !important; /* Laisser la hauteur s'adapter au contenu */
  box-sizing: border-box !important;
  display: block !important; /* Important pour que la bordure englobe tout */
}

/* Style de survol avec forte priorité */
article.product-miniature:hover,
article.product-miniature:focus,
article.product-miniature:active {
  border-color: #7d03fb !important;
  z-index: 100 !important; /* Valeur élevée pour être sûr */
}

/* Forcer une hauteur minimale adaptative pour tous les types de produits */
/*article.product-miniature.equal-height-product {
  min-height: 550px !important; /* Hauteur suffisante pour tous les cas */
/*}

/* Contenir tous les éléments intérieurs correctement */
article.product-miniature > div,
article.product-miniature .thumbnail-container,
article.product-miniature .product-description,
article.product-miniature .an_productattributes-container,
article.product-miniature .an_productattributes-qty-add,
article.product-miniature form,
article.product-miniature select,
article.product-miniature .bootstrap-touchspin {
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fixer la largeur de la miniature pour maintenir l'alignement */
.thumbnail-container {
  width: 100% !important;
}

/* S'assurer que la description produit s'adapte correctement */
article.product-miniature .product-description {
  width: 100% !important;
  padding: 0 !important;
}

/* Ajustements spécifiques pour la zone des attributs */
article.product-miniature select.form-control-select {
  width: 100% !important;
  margin-bottom: 2px !important;
}

/* Ajuster la position et l'apparence des boutons et entrées */
article.product-miniature .an_productattributes-qty-add {
  margin-top: 2px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Forcer un padding important en bas pour éviter tout débordement */
article.product-miniature {
  padding-bottom: 15px !important;
}

/* Style spécifique pour le mode liste si utilisé */
.product-container.list-view article.product-miniature {
  height: auto !important;
  min-height: 200px !important;
}


/* Styles pour la section "EXISTE AUSSI EN" */
.product-accessories, 
div:has(> h3:contains("EXISTE AUSSI EN")),
#product-also-in-category {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Correction du conteneur de produits similaires */
.product-accessories .products,
.product-also-in-category .products {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -15px;
}

/* Correction des colonnes pour obtenir 4 produits par ligne comme dans la liste principale */
.product-accessories .js-product,
.product-also-in-category .js-product {
  width: 25%;
  padding: 0 15px;
  margin-bottom: 20px;
  max-width: 25%;
  flex: 0 0 25%;
}

/* Ajuster la largeur des éléments à l'intérieur */
.product-accessories .product-miniature,
.product-also-in-category .product-miniature {
  width: 100%;
  max-width: 100%;
}

/* Ajuster les marges et tailles pour correspondre à la liste principale */
.product-accessories .thumbnail-container,
.product-also-in-category .thumbnail-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

/* Forcer l'espacement et les dimensions comme dans la liste principale */
.product-accessories .product-description,
.product-also-in-category .product-description {
  padding: 10px;
  text-align: center;
}

/* Correction pour les boutons d'ajout au panier */
.product-accessories .an_productattributes-add .btn,
.product-also-in-category .an_productattributes-add .btn {
  width: 100%;
}

/* Responsive design pour les tablettes */
@media (max-width: 991px) {
  .product-accessories .js-product,
  .product-also-in-category .js-product {
    width: 33.33%;
    max-width: 33.33%;
    flex: 0 0 33.33%;
  }
}

/* Responsive design pour les mobiles */
@media (max-width: 767px) {
  .product-accessories .js-product,
  .product-also-in-category .js-product {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
  }
  #wrapper,
  #main,
  .page-content {
    padding-bottom: 0px !important;
  }

}

/* Responsive design pour les petits écrans */
@media (max-width: 480px) {
  .product-accessories .js-product,
  .product-also-in-category .js-product {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  #wrapper,
  #main,
  .page-content {
    padding-bottom: 0px !important;
  }
}

@media (max-width: 991px) {

  /* 1) Afficher systématiquement le bouton “hamburger” */
  #header .header-nav #menu-icon {
    display: inline-block !important;
    cursor: pointer;
  } /* présence du menu-icon dans theme.css :contentReference[oaicite:0]{index=0}:contentReference[oaicite:1]{index=1} */

  /* 2) Forcer l’affichage du menu mobile généré par le megamenu */
  #_mobile_top_menu,
  #_mobile_top_menu2 {
    display: block !important;
  }
  /* Le contenu des sous-menus reste masqué jusqu’au clic (JS du module) */
  #_mobile_top_menu .collapse,
  #_mobile_top_menu2 .collapse {
    display: none;
  } /* extrait du CSS mobile megamenu :contentReference[oaicite:2]{index=2}:contentReference[oaicite:3]{index=3} */

  /* 3) Pousser le contenu **en dessous** du header fixe */
  /* Ajustez “120px” à la hauteur totale (header-top + header-nav) mesurée sur mobile */
  #wrapper {
    padding-top: 120px !important;
  }

  /* 4) Pousser le contenu **au-dessus** du menu utilisateur fixé en bas */
  #header .user-info.logged {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    background: #1d1f24;
  }
  /* idem, ajustez “60px” à la hauteur réelle de ce bloc */
  #wrapper,
  #main,
  .page-content {
    padding-bottom: 60px !important;
  }
}
/* Hauteur de base pour les produits sans attributs */
article.product-miniature.equal-height-product {
  min-height: 459px !important;
}

/* Hauteur augmentée pour les produits avec attributs */
article.product-miniature.equal-height-product.has-attributes {
  min-height: 459px !important;
}

/* Ajustements d'espacement pour les produits sans attributs */
article.product-miniature.equal-height-product:not(.has-attributes) .product-price-and-shipping {
  margin-bottom: 25px !important;
}

article.product-miniature.equal-height-product:not(.has-attributes) .an_productattributes-qty-add {
  margin-top: 30px !important;
}

/* Ajustements pour les écrans mobiles */
@media (max-width: 767px) {
  article.product-miniature.equal-height-product {
    min-height: 350px !important;
  }
  
  article.product-miniature.equal-height-product.has-attributes {
    min-height: 350px !important;
  }

    #wrapper,
  #main,
  .page-content {
    padding-bottom: 0px !important;
  }
}
/* Solution pour forcer un nombre constant d'éléments par ligne */
.products {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px; /* Ajuster selon vos marges latérales */
}

/* Forcer la largeur des colonnes pour un nombre fixe par ligne */
@media (min-width: 992px) {
  /* Desktop - 4 produits par ligne */
  .products .js-product {
   /* width: 25%;
    max-width: 25%;*/
    width: 210px;
    max-width: 210px;
    flex: 0 0 25%;
    padding: 0 10px;
    margin-bottom: 30px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Tablette - 3 produits par ligne */
  .products .js-product {
    width: 33.333%;
    max-width: 33.333%;
    flex: 0 0 33.333%;
    padding: 0 10px;
    margin-bottom: 25px;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  /* Mobile - 2 produits par ligne */
  .products .js-product {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
    padding: 0 10px;
    margin-bottom: 20px;
  }
    #wrapper,
  #main,
  .page-content {
    padding-bottom: 0px !important;
  }

  .breadcrumb {
    font-size: 0.6rem;
}

}

@media (max-width: 480px) {
  /* Très petit écran - 1 produit par ligne */
  .products .js-product {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 10px;
    margin-bottom: 15px;
  }
    #wrapper,
  #main,
  .page-content {
    padding-bottom: 0px !important;
  }

  .breadcrumb {
    font-size: 0.6rem;
}

}

}

/* Forcer le clear après chaque ligne complète */
@media (min-width: 992px) {
  /* Pour les écrans larges (4 produits par ligne) */
  .products .js-product:nth-child(4n+1) {
    clear: left;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Pour les tablettes (3 produits par ligne) */
  .products .js-product:nth-child(3n+1) {
    clear: left;
  }
  .product-actions .add-to-cart {
      font-size: 0.7rem !important;
  }

}

@media (min-width: 481px) and (max-width: 767px) {
  /* Pour les petits écrans (2 produits par ligne) */
  .products .js-product:nth-child(2n+1) {
    clear: left;
  }
  .product-actions .add-to-cart {
      font-size: 0.7rem !important;
  }

}

/* Conservation de notre structure flexible pour les produits individuels */
.product-miniature {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* S'assurer que le conteneur de produit s'étire pour remplir l'espace */
.js-product {
  display: flex;
}

/* Maintenir le contenu dans la zone désignée */
.product-miniature > * {
  width: 100%;
}

/* Préserver la visibilité des éléments qui dépassent */
.product-miniature {
  overflow: visible !important;
}

.wk-bundle
{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.pad15 
{
    margin-bottom: 10px;
}

.professionnels-block {
  padding: 0;
}

.professionnels-list {
  margin: 0;
  padding-left: 20px;
}

.professionnels-list ul {
  margin: 6px 0 0 0;
  padding-left: 20px;
  list-style: disc;
}

.professionnels-list ul li {
  list-style-type: circle;
  margin-bottom: 4px;

}

/* CORRECTION IMAGES TABLETTE - Section spéciale pour les tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Correction générale pour les images produits sur tablette */
  .thumbnail-top.fixed-height-image {
    height: auto !important;
    min-height: 150px !important;
    max-height: 200px !important;
  }
  
  .product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-height: 180px !important;
    object-fit: contain !important;
  }
  
  /* Correction spécifique pour les produits associés */
  .product-accessories .thumbnail-top.fixed-height-image,
  .product-also-in-category .thumbnail-top.fixed-height-image {
    height: auto !important;
    min-height: 120px !important;
    max-height: 150px !important;
  }
  
  .product-accessories .product-thumbnail img,
  .product-also-in-category .product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-height: 130px !important;
    object-fit: contain !important;
  }
  
  /* Ajustement des conteneurs de produits */
  .product-accessories .product-miniature,
  .product-also-in-category .product-miniature {
    height: auto !important;
    min-height: 300px !important;
  }
  
  /* Correction pour éviter la déformation */
  .product-accessories .thumbnail-container,
  .product-also-in-category .thumbnail-container {
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Ajustement spécifique pour la section "EXISTE AUSSI EN" */
  #product-also-in-category .thumbnail-top.fixed-height-image,
  div:has(> h3:contains("EXISTE AUSSI EN")) .thumbnail-top.fixed-height-image {
    height: auto !important;
    min-height: 120px !important;
    max-height: 150px !important;
  }
  
  #product-also-in-category .product-thumbnail img,
  div:has(> h3:contains("EXISTE AUSSI EN")) .product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-height: 130px !important;
    object-fit: contain !important;
  }
  
  /* Correction pour tous les conteneurs d'images en mode tablette */
  .fixed-height-image img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: 180px !important;
  }
  
  /* Force le bon affichage des images dans les listes de produits */
  .products .thumbnail-top.fixed-height-image {
    height: auto !important;
    min-height: 140px !important;
    max-height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Assure que les images ne débordent pas des conteneurs */
  .thumbnail-container {
    overflow: visible !important;
  }
}