/* === FIX Creative Elements – Grille produits page d’accueil === */

/* 1) Forcer une vraie grille 4 colonnes en desktop + un gap lisible */
.elementor-widget-products .elementor-grid,
.elementor-widget-products ul.products {        /* compat variantes CE */
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;                         /* ajuste 16–24 si besoin */
  width: 100%;
  box-sizing: border-box;
}

/* 2) Faire occuper toute la largeur à chaque carte (pas de width fixe héritée) */
.elementor-widget-products .product,
.elementor-widget-products .product-miniature,
.elementor-widget-products ul.products li.product {
  width: auto !important;
  max-width: 100% !important;
  min-width: 260px;                              /* ↑ augmente à 280 si tu veux encore plus large */
  box-sizing: border-box;
}

/* 3) Empêcher un wrapper interne de “rétrécir” la carte */
.elementor-widget-products .product-miniature .product-container,
.elementor-widget-products .product-miniature .thumbnail-container,
.elementor-widget-products .product .product-container {
  width: 100% !important;
  max-width: none !important;
}

/* 4) Images : qu’elles s’adaptent à la carte */
.elementor-widget-products .thumbnail-container img,
.elementor-widget-products .product img {
  width: 100%;
  height: auto;
}

/* 5) Responsive propre */
@media (max-width: 1199px) {
  .elementor-widget-products .elementor-grid,
  .elementor-widget-products ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 991px) {
  .elementor-widget-products .elementor-grid,
  .elementor-widget-products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 575px) {
  .elementor-widget-products .elementor-grid,
  .elementor-widget-products ul.products {
    grid-template-columns: 1fr !important;
  }
}