/* Lebozam Product Grid v1.1.0
   Important: neutralise les largeurs Bootstrap/du thème sur les miniatures. */

body#category #js-product-list .products {
  display: grid !important;
  grid-template-columns: repeat(var(--lbzpg-desktop, 4), minmax(0, 1fr));
  gap: var(--lbzpg-gap-y, 20px) var(--lbzpg-gap-x, 12px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* L'élément de grille peut être article, div ou .product-miniature selon le thème. */
body#category #js-product-list .products > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: var(--lbzpg-card-padding, 0px) !important;
  box-sizing: border-box !important;
}

/* Correction essentielle du bug observé : le conteneur interne du thème
   ne doit jamais conserver une largeur fixe ou une largeur de colonne Bootstrap. */
body#category #js-product-list .product-miniature,
body#category #js-product-list .product-miniature .thumbnail-container,
body#category #js-product-list .product-miniature .product-description,
body#category #js-product-list article.product-miniature,
body#category #js-product-list article.product-miniature > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body#category #js-product-list .product-miniature .thumbnail-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body#category #js-product-list .product-miniature img,
body#category #js-product-list .thumbnail-container img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  border-radius: var(--lbzpg-radius, 0px);
}

/* Empêche les titres/prix de forcer ou d'écraser la largeur de la carte. */
body#category #js-product-list .product-title,
body#category #js-product-list .product-title a,
body#category #js-product-list .product-price-and-shipping {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  body#category #js-product-list .product-title,
  body#category #js-product-list .product-title a {
    font-size: var(--lbzpg-title-mobile, 14px) !important;
    line-height: 1.25 !important;
  }
  body#category #js-product-list .product-price-and-shipping,
  body#category #js-product-list .price {
    font-size: var(--lbzpg-price-mobile, 16px) !important;
  }
}