/* ===========================
   OK-LA — Vignettes = photo seule + contour
   Homogénéise toutes les miniatures (home + catégories + recherche, etc.)
   =========================== */

/* 1) Conteneur : carré, pas de fond ni padding/bordure */
.products .product-miniature .thumbnail-container .product-thumbnail {
  aspect-ratio: 1/1 !important;     /* carré homogène */
  max-width: 160px !important;      /* ajuste 140–180 selon rendu */
  width: 100% !important;
  margin: 0 auto 8px !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* 2) <picture> éventuel */
.products .product-miniature .thumbnail-container .product-thumbnail picture {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 3) L’image : remplit + contour fin */
.products .product-miniature .thumbnail-container .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* même échelle visuelle partout */
  object-position: center !important;
  display: block !important;
  background: #fff !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;       /* optionnel */
  box-sizing: border-box !important;   /* la bordure ne change pas la taille */
}

/* 4) Icônes de catégories sur la home (même style compact) */
body#index .category-item .category-image,
body#index .category-item .category-thumbnail,
body#index .homecategories .category-image,
body#index .ttcategory .category-image,
body#index .featured-categories .category-image {
  width: 120px !important;
  aspect-ratio: 1/1 !important;
  margin: 0 auto 12px !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
body#index .category-item .category-image img,
body#index .category-item .category-thumbnail img,
body#index .homecategories .category-image img,
body#index .ttcategory .category-image img,
body#index .featured-categories .category-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* même logique : photo plein cadre */
  object-position: center !important;
  display: block !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}
/* === OK-LA | Vignettes propres sans découpe, en rectangles === */

/* 1) On supprime le carré forcé/les cadres du thème */
.product-miniature .product-thumbnail::before,
.tttabproducts .product-miniature .product-thumbnail::before {
  content: none !important;
}

/* 2) On enlève les hauteurs figées qui écrasent les images */
.product-miniature .product-thumbnail,
.product-miniature .ttproduct-image,
.tttabproducts .product-miniature .product-thumbnail,
.tttabproducts .ttproduct-image {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important; /* un seul cadre propre */
  border-radius: 6px;
  box-shadow: none !important;
  overflow: hidden;
}

/* 3) Rectangle homogène : 4/3 (adapté au mobilier) */
.product-miniature .product-thumbnail,
.tttabproducts .product-miniature .product-thumbnail {
  aspect-ratio: 4 / 3;        /* rectangle (pas carré) */
}

/* 4) L'image n'est jamais coupée (fini le zoom/crop) */
.product-miniature .product-thumbnail img,
.tttabproducts .product-miniature .product-thumbnail img,
.product-miniature .ttproduct-image img,
.tttabproducts .ttproduct-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* pas de découpe */
  object-position: center !important;
  display: block !important;
}

/* 5) Si le thème force autre chose ailleurs, on neutralise */
img.ttproduct-img1,
.product-miniature img {
  max-width: 100% !important;
  height: auto; /* sécurité si aspect-ratio indisponible */
}

/* ===== OK-LA : cadre unique rectangulaire 4/3, sans rognage ===== */
.product-miniature .thumbnail-container,
.product-miniature .ttproduct-image,
.product-miniature .product-thumbnail {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Supprimer le faux carré du thème */
.product-miniature .product-thumbnail::before {
  content: none !important;
  padding: 0 !important;
}

/* Cadre unique 4/3 */
.product-miniature .product-thumbnail {
  aspect-ratio: 4 / 3;
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0 auto 10px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  box-shadow: none;
}

/* Image contenue (zéro rognage, zéro zoom moche) */
.product-miniature .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  background: transparent;
  border: 0;
}

/* Modules d’onglets produits (tttabproducts) si ton thème les utilise */
.tttabproducts .product-miniature .product-thumbnail { aspect-ratio: 4/3; }
.tttabproducts .product-miniature .product-thumbnail img { object-fit: contain !important; }
.tttabproducts .product-miniature .product-thumbnail::before { content: none !important; }