/*--------------------------- Start Homepage tab --------------------------*/	
.home-tab-content {
    float: left;
    text-align: center;
    width: 100%;
}
.products > .owl-stage-outer {
	padding-bottom: 30px;
}		
#hometab .home-tab-content .tab-pane.active {	
	display: block;	
}	
#hometab .home-tab-content .tab-pane {	
	display: none;	
}
#hometab .ttfeatured-products,	
#hometab .ttbestseller-products,	
#hometab .ttnew-products {	
	float: left;	
	width: 100%;	
	padding: 0;	
}	
.tabs .nav-tabs {
	margin: 0;
	float: none;
	display: inline-block;
	vertical-align: top;
}
.tabs {
	padding: 0;
	margin: 0 0 20px;
	text-align: center;
}
.tabs .nav-item .tab-title {	
	font: 500 14px/22px var(--secondary-font);	
	margin-bottom: 0;	
	z-index: 2;	
	position:relative;	
	padding:8px 22px;	
	transition:all 400ms ease-in-out 0s;
	float:left;
}	
.tabs .nav-item::before {	
	content: "";	
	position: absolute;	
	z-index: -1;	
	top: 0;	
	left: 0;	
	right: auto;	
	bottom: 0;	
	background: var(--secondary-bg-color);	
	-webkit-transform: scaleX(0);	
	transform: scaleX(0);	
	-webkit-transform-origin: 0 50%;	
	transform-origin: 0 50%;	
	-webkit-transition-property: transform;	
	transition-property: transform;	
	width: 0;	
	transition: all 400ms ease-in-out 0s;	
	-webkit-transition: all 400ms ease-in-out 0s;	
	-moz-transition: all 400ms ease-in-out 0s;	
	-o-transition: all 400ms ease-in-out 0s;	
	-ms-transition: all 400ms ease-in-out 0s;	
}	
.tabs .nav-item:hover::before,
.tabs .nav-item.active::before {
	-webkit-transform: scaleX(1);	
	transform: scaleX(1);	
	width: 100%;	
}
.tabs .nav-tabs .nav-item {
	margin: 0 5px;
	border: none;
	position: relative;
	-webkit-transition-duration: 0.4s;
	-webkit-transition-timing-function: linear;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	background: #f5f5f5;
	border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	-khtml-border-radius: 25px;
	overflow: hidden;
	float: left;
	cursor: pointer;
}
.nav-item.active,.tab-title.active,.nav-item:hover {	
	background: var(--secondary-bg-color);	
}
.tabs .nav-tabs .nav-item.active .tab-title,.tab-title.active,	
.tabs .nav-tabs .nav-item:hover .tab-title {	
	color: var(--secondary-text-color);
}
@media (max-width: 991px) {	
	#hometab {	
		margin: 0;	
	}	
}
@media (max-width: 767px) {	
	.products > .owl-stage-outer {
		padding:0;
	}
	#hometab {	
		margin: 0 0 30px;	
	}
}
@media (max-width: 543px) {	
	.tabs .nav-tabs .nav-item:first-child::before,	
	.tabs .nav-tabs .nav-item:last-child::after {	
		border: none;	
	}   	
	#hometab {	
		margin: 0 0 30px;	
	}	
	.tabs .nav-tabs .nav-item {	
		margin: 0 0 5px;			
		display: inline-block;	
		float: none;	
		padding: 0;	
		vertical-align: top;	
		width: 80%;	
	}	
	.tabs .nav-item .tab-title {	
		padding: 8px 12px;	
		margin: 0;	
		width:100%;
	}
	.tabs {
    margin: 0 0 10px;
	}
}	

/* ===== OK-LA x tttabproducts : vignettes carrées, images réalistes ===== */
.tttabproducts .thumbnail-container,
.tttabproducts .ttproduct-image,
.tttabproducts .product-miniature .product-thumbnail {
  aspect-ratio: 1/1 !important;     /* carré homogène */
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.tttabproducts .product-miniature .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* garde les proportions */
  object-position: center !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
/* === OK-LA : Supprimer le cadre externe gris des vignettes === */
.tttabproducts .thumbnail-container {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* === Ne garder que la photo avec contour homogène === */
.tttabproducts .product-miniature .product-thumbnail {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}

.tttabproducts .product-miniature .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* proportions respectées */
  object-position: center !important;
  border: 1px solid #ddd !important; /* contour fin gris clair */
  border-radius: 4px !important;     /* arrondi optionnel */
  background: #fff !important;       /* fond blanc neutre */
  box-sizing: border-box !important;
}
/* ===== OK-LA : SUPPRESSION TOTALE DES CADRES/ fonds/ ombres ===== */

/* 0) Zones susceptibles d'ajouter un cadre (thème + module) */
.products .product-miniature,
.products .product-miniature::before,
.products .product-miniature::after,
.products .product-miniature .thumbnail-container,
.products .product-miniature .thumbnail-container::before,
.products .product-miniature .thumbnail-container::after,
.products .product-miniature .ttproduct-image,
.products .product-miniature .ttproduct-image::before,
.products .product-miniature .ttproduct-image::after,
.products .product-miniature .thumbnail-inner,
.products .product-miniature .thumbnail-inner::before,
.products .product-miniature .thumbnail-inner::after,
.products .product-miniature .product-thumbnail,
.products .product-miniature .product-thumbnail::before,
.products .product-miniature .product-thumbnail::after,
.tttabproducts .product-miniature,
.tttabproducts .product-miniature::before,
.tttabproducts .product-miniature::after,
.tttabproducts .thumbnail-container,
.tttabproducts .thumbnail-container::before,
.tttabproducts .thumbnail-container::after,
.tttabproducts .ttproduct-image,
.tttabproducts .ttproduct-image::before,
.tttabproducts .ttproduct-image::after,
.tttabproducts .thumbnail-inner,
.tttabproducts .thumbnail-inner::before,
.tttabproducts .thumbnail-inner::after,
.tttabproducts .product-miniature .product-thumbnail,
.tttabproducts .product-miniature .product-thumbnail::before,
.tttabproducts .product-miniature .product-thumbnail::after {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

/* 1) Boîte de la vignette = carré propre, sans cadre */
.products .product-miniature .product-thumbnail,
.tttabproducts .product-miniature .product-thumbnail {
  aspect-ratio: 1/1 !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 auto 10px !important;
}

/* 2) Image = photo seule, proportions respectées, aucun cadre */
.products .product-miniature .product-thumbnail img,
.tttabproducts .product-miniature .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* AUCUNE COUPE */
  object-position: center !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;             /* PAS DE BORDURE */
  box-sizing: border-box !important;
}

/* 3) Séparateurs/traits sous l’image (si le thème en met) */
.products .product-miniature .ttproduct-desc,
.tttabproducts .product-miniature .ttproduct-desc,
.products .product-miniature .ttproduct-desc::before,
.tttabproducts .product-miniature .ttproduct-desc::before {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ========== OK-LA — MODE COUP DE POING (sans cadre, photo seule) ========== */

/* 0) Supprimer tout cadre/fond/ombre/padding décoratif (thème + module) */
.products .product-miniature,
.products .product-miniature::before,
.products .product-miniature::after,
.products .product-miniature *::before,
.products .product-miniature *::after,
.products .product-miniature .thumbnail-container,
.products .product-miniature .ttproduct-image,
.products .product-miniature .thumbnail-inner,
.products .product-miniature .product-thumbnail,
.tttabproducts .product-miniature,
.tttabproducts .product-miniature::before,
.tttabproducts .product-miniature::after,
.tttabproducts .product-miniature *::before,
.tttabproducts .product-miniature *::after,
.tttabproducts .thumbnail-container,
.tttabproducts .ttproduct-image,
.tttabproducts .thumbnail-inner,
.tttabproducts .product-miniature .product-thumbnail {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
}

/* 1) Boîte cliquable de la vignette = carré propre, sans cadre */
.products .product-miniature .product-thumbnail,
.tttabproducts .product-miniature .product-thumbnail {
  aspect-ratio: 1/1 !important;     /* carré homogène */
  display: block !important;
  overflow: hidden !important;
  margin: 0 auto 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* 2) L’IMAGE = photo seule, proportions respectées, aucun contour */
.products .product-miniature .product-thumbnail img,
.tttabproducts .product-miniature .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;    /* AUCUNE COUPE */
  object-position: center !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;              /* PAS DE BORDURE */
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

/* 3) Kill des traits/séparateurs sous l’image ajoutés par le thème */
.products .product-miniature .ttproduct-desc,
.tttabproducts .product-miniature .ttproduct-desc,
.products .product-miniature .ttproduct-desc::before,
.tttabproducts .product-miniature .ttproduct-desc::before {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 4) Par sécurité : supprimer toute bordure sur les wrappers d’images */
[class*="thumbnail-container"],
[class*="ttproduct-image"],
[class*="thumbnail-inner"],
[class*="product-thumbnail"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ===== OK-LA — VIGNETTES SANS CADRE + IMAGE EN COVER ===== */

/* On supprime tous les cadres/fonds/ombres des wrappers du thème + module */
.products .product-miniature .thumbnail-container,
.products .product-miniature .ttproduct-image,
.products .product-miniature .product-thumbnail,
.products .product-miniature .thumbnail-container::before,
.products .product-miniature .thumbnail-container::after,
.tttabproducts .thumbnail-container,
.tttabproducts .ttproduct-image,
.tttabproducts .product-miniature .product-thumbnail,
.tttabproducts .thumbnail-container::before,
.tttabproducts .thumbnail-container::after {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Boîte cliquable = carré propre */
.products .product-miniature .product-thumbnail,
.tttabproducts .product-miniature .product-thumbnail {
  aspect-ratio: 1/1 !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 auto 10px !important;
}

/* IMAGE = remplit le carré (cover), aucun cadre ajouté */
.products .product-miniature .product-thumbnail img,
.tttabproducts .product-miniature .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* >>> rendu coupé et homogène <<< */
  object-position: center !important;
  display: block !important;
  border: 0 !important;               /* pas de cadre dans le cadre */
  background: transparent !important;
}
/* Cadre rectangulaire (moins de coupe) */
.products .product-miniature .product-thumbnail,
.tttabproducts .product-miniature .product-thumbnail{
  aspect-ratio: 4 / 3 !important;   /* ex. 4:3 au lieu de 1:1 */
}

/* Sur mobile, on peut repasser en carré si tu veux */
@media (max-width: 576px){
  .products .product-miniature .product-thumbnail,
  .tttabproducts .product-miniature .product-thumbnail{
    aspect-ratio: 1 / 1 !important;
  }
}

/* Cover conservé pour l'homogénéité */
.products .product-miniature .product-thumbnail img,
.tttabproducts .product-miniature .product-thumbnail img{
  object-fit: cover !important;
  object-position: 50% 46% !important; /* légère remontée pour éviter de couper les dossiers */
}
/* ====== OK-LA : FORCER ratio 4:3 + supprimer hauteurs fixes ====== */

/* 0) tuer les hauteurs/padding imposés par le thème */
.products .product-miniature .thumbnail-container,
.products .product-miniature .ttproduct-image,
.products .product-miniature .product-thumbnail,
.tttabproducts .thumbnail-container,
.tttabproducts .ttproduct-image,
.tttabproducts .product-miniature .product-thumbnail {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* certains thèmes utilisent ::before pour “carré” -> on neutralise */
.products .product-miniature .product-thumbnail::before,
.tttabproducts .product-miniature .product-thumbnail::before {
  content: none !important;
  padding-top: 0 !important;
}

/* 1) appliquer VRAIMENT le ratio 4:3 sur la boîte cliquable */
.products .product-miniature .product-thumbnail,
.tttabproducts .product-miniature .product-thumbnail,
.okla-thumb { /* au cas où on ait gardé la classe okla */
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 auto 10px !important;
}

/* 2) image = cover (homogène), cadrage légèrement remonté */
.products .product-miniature .product-thumbnail img,
.tttabproducts .product-miniature .product-thumbnail img,
.okla-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 46% !important; /* 45–48% : ajuste si besoin */
  display: block !important;
  background: transparent !important;
  border: 0 !important;
}

/* 3) cas particuliers : forcer aussi sur le wrapper direct éventuel */
.products .product-miniature .ttproduct-image,
.tttabproducts .ttproduct-image {
  height: auto !important;
  min-height: 0 !important;
}
/* ===== OK-LA : forcer rectangles 4/3 et empêcher tout recadrage dans tttabproducts ===== */

/* 0) Le module (ou le thème) ajoute souvent un faux carré via ::before : on l'annule */
.tttabproducts .product-miniature .product-thumbnail::before {
  content: none !important;
}

/* 1) On nettoie les conteneurs pour éviter double cadre / hauteurs figées */
.tttabproducts .thumbnail-container,
.tttabproducts .ttproduct-image,
.tttabproducts .product-miniature .product-thumbnail {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* 2) Cadre unique rectangulaire 4/3 pour les vignettes du module */
.tttabproducts .product-miniature .product-thumbnail {
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 auto 10px !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 6px !important;
}

/* 3) L'image remplit la boîte sans être coupée (jamais de zoom/crop) */
.tttabproducts .product-miniature .product-thumbnail img,
.tttabproducts img.ttproduct-img1,
.tttabproducts img.ttproduct-img2 {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;   /* pas de rognage */
  object-position: center !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
}

/* 4) Certains thèmes imposent un carré via la classe .img-fluid: on neutralise */
.tttabproducts img.img-fluid {
  width: 100% !important;
  height: 100% !important;
}

/* 5) Cas “image au survol” (si présent) : on applique la même règle */
.tttabproducts .hover-image img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* 6) Sécurité supplémentaire : si un autre CSS remet du cover quelque part */
.tttabproducts img,
.tttabproducts .product-miniature img {
  object-fit: contain !important;
}

/*--------------------------- End Homepage tab --------------------------*/