/* --- Agrandir les images des déclinaisons (pelotes / couleurs) --- */
.product-variants .color,
.product-variants .input-color {
  width: 90px !important;
  height: 90px !important;
}

.product-variants .color img,
.product-variants .input-color img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 8px; /* coins arrondis, optionnel */
  object-fit: cover;  /* garde les proportions de l’image */
}

.product-variants .input-container {
  margin: 5px;
}

/* === Forcer la taille d'image sur la page d'accueil === */
#featured-products .product-miniature .thumbnail-container-image img,
.featured-products .product-miniature .thumbnail-container-image img {
  width: 100% !important;
  height: auto !important;
  max-width: 600px !important;
  max-height: 600px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* === Ajuster le conteneur pour laisser respirer l'image === */
#featured-products .thumbnail-container-image,
.featured-products .thumbnail-container-image {
  width: 100% !important;
  height: auto !important;
  min-height: 600px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: none !important;
  padding: 0 !important;
}

/* Supprimer toute limite du parent miniature */
#featured-products .product-miniature,
.featured-products .product-miniature {
  min-height: 600px !important;
  overflow: visible !important;
}

/* === Agrandir les images produits sur la page d’accueil === */
#featured-products .product-miniature .thumbnail.product-thumbnail {
  height: auto !important;
  min-height: 500px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#featured-products .product-miniature .thumbnail-container-image {
  min-height: 500px !important;
  height: auto !important;
}

#featured-products .product-miniature img {
  width: 100% !important;
  height: auto !important;
  max-width: 600px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Supprimer les contraintes du conteneur */
#featured-products .product-miniature {
  overflow: visible !important;
}
/* === Correction finale taille images page d'accueil === */

/* Forcer les conteneurs */
#featured-products .product-miniature .thumbnail-container,
#featured-products .product-miniature .thumbnail-container-image,
#featured-products .product-miniature .thumbnail.product-thumbnail {
  height: auto !important;
  min-height: 400px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Forcer la taille de l'image elle-même */
#featured-products .product-miniature img.b-lazy,
#featured-products .product-miniature img {
  width: 100% !important;
  max-width: 600px !important;
  height: auto !important;
  min-height: 400px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
  opacity: 1 !important;
}

/* Supprime le calcul de hauteur automatique ajouté par JS */
#featured-products .product-miniature [style*="height: 0px"],
#featured-products .product-miniature [style*="min-height: 0px"] {
  height: auto !important;
  min-height: 400px !important;
}
/* === Correction taille images produits page d'accueil === */

/* Forcer le conteneur d'image */
.featured-products .product-miniature .thumbnail-container-image {
  min-height: 400px !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Supprime toute hauteur forcée par le script lazyload */
.featured-products .product-miniature .thumbnail.product-thumbnail[style*="height"],
.featured-products .product-miniature .thumbnail-container-image[style*="height"] {
  height: auto !important;
  min-height: 400px !important;
}

/* Redimensionner l'image proprement */
.featured-products .product-miniature img,
.featured-products .product-miniature img.b-lazy {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 400px !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
}

/* Correction spécifique si le lazyload garde height:0px */
.featured-products .product-miniature img[style*="height: 0px"] {
  height: auto !important;
  min-height: 400px !important;
}
/* === Agrandissement et format rectangulaire des images produits === */

/* Conteneur principal des images */
.featured-products .product-miniature .thumbnail-container-image {
  min-height: 300px !important;   /* Hauteur mini */
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  border-radius: 10px;
}

/* Supprime toute hauteur automatique problématique */
.featured-products .product-miniature .thumbnail.product-thumbnail[style*="height"],
.featured-products .product-miniature .thumbnail-container-image[style*="height"] {
  height: auto !important;
  min-height: 300px !important;
}

/* Image produit : rectangulaire, centrée, bien visible */
.featured-products .product-miniature img,
.featured-products .product-miniature img.b-lazy {
  width: 100% !important;
  height: 250px !important; /* ← ajuste ici la hauteur que tu veux */
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

/* Petit effet zoom au survol (facultatif mais joli) */
.featured-products .product-miniature img:hover {
  transform: scale(1.05);
}
/* === Rendre les images produits rectangulaires sur la page d'accueil === */

.featured-products .product-miniature img {
  width: 100% !important;
  height: 220px !important; /* ← tu peux ajuster ici la hauteur pour le rectangle */
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.featured-products .product-miniature img:hover {
  transform: scale(1.05);
}
/* === Correction affichage des images produits (thème Avanto) === */

/* Conteneur de l'image */
.thumbnail-container-image {
  min-height: 250px !important; /* ← augmente ici pour la hauteur souhaitée */
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Image du produit */
.thumbnail-container-image img {
  width: 100% !important;
  height: 250px !important; /* même hauteur que le conteneur */
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

/* Animation au survol */
.thumbnail-container-image img:hover {
  transform: scale(1.05);
}
/* === Correction affichage images produits verticales (non rognées) === */

.thumbnail-container,
.thumbnail-container-image,
.product-miniature {
  height: auto !important;
  min-height: 300px !important; /* ajuste si besoin */
  overflow: visible !important;
}

.thumbnail-container img,
.thumbnail-container-image img {
  width: auto !important;
  height: 280px !important; /* fixe une hauteur homogène */
  object-fit: contain !important; /* affiche l’image entière sans la couper */
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  background: #fff !important; /* fond blanc pour les images verticales */
  border-radius: 6px;
}

/* Supprime les masques visuels qui rognaient les images */
.thumbnail-container::before,
.thumbnail-container::after,
.thumbnail-container-image::before,
.thumbnail-container-image::after {
  content: none !important;
  display: none !important;
}
/* === Corrige les images produits écrasées ou rognées === */

/* Forcer la hauteur automatique sur les liens autour des images */
.thumbnail.product-thumbnail {
  height: auto !important;
  min-height: 250px !important; /* ajuste la hauteur de base des vignettes */
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* Image non rognée et bien centrée */
.thumbnail.product-thumbnail img {
  width: auto !important;
  height: 240px !important; /* garde une hauteur régulière */
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 8px;
  background-color: #fff !important;
}

/* Désactive tout script qui impose une taille inline */
.thumbnail.product-thumbnail[style] {
  height: auto !important;
}