/* ── Ancrage pour les badges positionnés en absolu ── */
/* Le badge est inséré AVANT .thumbnail-container donc overflow:hidden de ce dernier
   ne coupe pas l'animation d'expansion. L'article sert de référence de positionnement. */
.product-miniature,
.js-product-miniature {
  position: relative !important;
  overflow: visible !important;
}

.product-cover,
.images-container,
.js-product-cover {
  position: relative !important;
  overflow: visible !important;
}

/* Badge panier : géré entièrement via les styles inline du JS */

/* ── Passage au premier plan immédiat ── */
.product-miniature:hover, 
.js-product-miniature:hover {
    z-index: 999 !important;
}

/* ── Sécurité : Cache le badge au mauvais endroit ── */
.product-description .bd-badge,
.product-additional-info .bd-badge:not(.bd-badge--static):not(.bd-badge--moved-to-cover) {
    display: none !important;
}

#bd-product-badge { display: none !important; }
#bd-product-badge.bd-visible { display: flex !important; }

/* ── Conteneur pour plusieurs badges (Listes) ── */
.bd-badges-container {
    position: absolute !important;
    z-index: 1000 !important;
    display: flex !important;
    gap: 8px !important;
    pointer-events: auto !important;
    overflow: visible !important;
    width: max-content !important;
}

.bd-badge--top-left, .bd-badges-container[data-pos="top-left"]          { top: 13px;       left: 13px;      }
.bd-badge--top-right, .bd-badges-container[data-pos="top-right"]        { top: 0.635rem;   right: 0.635rem; }
.bd-badge--top-right-wishlist, .bd-badges-container[data-pos="top-right-wishlist"] { top: 3.5rem;      right: 0.635rem; }
.bd-badge--top-right-left-wishlist, .bd-badges-container[data-pos="top-right-left-wishlist"] { top: 0.635rem;   right: 4.5rem;   }
.bd-badge--bottom-left, .bd-badges-container[data-pos="bottom-left"]      { bottom: 0.635rem; left: 0.635rem;  }
.bd-badge--bottom-right, .bd-badges-container[data-pos="bottom-right"]    { bottom: 0.635rem; right: 0.635rem; }

/* ── Badge PILULE ANIMÉE ── */
.bd-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  pointer-events: auto !important;
  background-color: #fff !important;
  box-shadow: .125rem -0.125rem .25rem 0 rgba(0,0,0,.2) !important;
  border-radius: 2.5rem !important;
  height: 2.5rem !important;
  
  /* L'élargissement repose sur le max-width */
  width: auto !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important; 
  
  border: none !important;
  overflow: hidden !important;
  transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.bd-badge:hover {
  max-width: 15rem !important; /* On libère le max-width au survol */
}

/* Sur les listes */
.bd-badges-container .bd-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.bd-badge--static {
  position: relative !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
}

/* ── Picto ── */
.bd-badge img {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-left: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* ── Le Texte ── */
.bd-badge__label {
  display: inline-block !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #9cbf9b !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transform: translateX(10px) !important;
  transition: opacity 0.3s ease-in-out 0.2s, transform 0.3s ease-in-out 0.2s !important;
  margin-left: 10px !important;
  margin-right: 1.2rem !important;
  line-height: 1 !important;
}

.bd-badge:hover .bd-badge__label {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ── Titre H1 sur la fiche produit avec badge en mode h1-left/h1-right ── */
.page-product h1.page-title,
.page-product h1.h1 {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

/* ── Badge sur la fiche produit ── */
.bd-badge--product {
  position: absolute;
  z-index: 1001;
  margin-top: 0;
}