@media (max-width: 600px) {
	.best-product-item.active {
		flex: 0 1 90vw !important;
		max-width: 90vw !important;
		padding: 4px 2px !important;
	}
	.content-active-item {
		padding: 0 !important;
		gap: 2px !important;
	}
	.top-row-contentDiv {
		gap: 2px !important;
		margin-bottom: 4px !important;
	}
	.top-logo-row img {
		height: 22px !important;
		max-width: 32px !important;
	}
	.top-text-btn-row span,
	.top-text-btn-row button {
		font-size: 0.65rem !important;
		padding: 2px 4px !important;
		border-radius: 6px !important;
	}
	.top-icon-store-svg {
		padding: 2px !important;
		border-radius: 6px !important;
	}
	.top-col-contentDiv {
		gap: 2px !important;
		margin-bottom: 2px !important;
	}
	.middle-row-contentDiv {
		gap: 2px !important;
		padding: 0 2px !important;
	}
	.title-infos-row {
		gap: 2px !important;
		margin-bottom: 2px !important;
		max-width: 50% !important;
	}
	.title-infos-row span {
		font-size: 1.1rem !important;
		-webkit-line-clamp: 2 !important;
	}
	.variant-infos-col {
		gap: 2px !important;
		margin-bottom: 2px !important;
		max-width: 40% !important;
		min-width: 30% !important;
	}
	.product-color-dot,
	.product-color-dot-more {
		width: 14px !important;
		height: 14px !important;
		font-size: 0.7em !important;
	}
	.product-size-dot {
		font-size: 0.6rem !important;
		padding: 1px 4px !important;
		border-radius: 10px !important;
	}
	.product-promo {
		font-size: 0.65rem !important;
		padding: 0 1px !important;
		border-radius: 3px !important;
	}
	.product-price,
	.product-price.one,
	.product-reduced-price {
		font-size: 0.7rem !important;
		margin-top: 2px !important;
	}
	.product-selling-price {
		font-size: 0.5rem !important;
	}
	.product-free-delivery {
		padding: 1px 2px !important;
		border-radius: 6px !important;
		font-size: 0.6rem !important;
	}
	.product-free-delivery h1 {
		font-size: 0.5rem !important;
	}
	.btn-wishlist-svg svg {
		width: 16px !important;
		height: 16px !important;
	}
}
/* Affichage grid/horiz pour les 5 meilleurs produits */
.list-best-product-row {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 4px;
	margin: 40px 0 0 0;
	align-items: stretch;
	justify-content: stretch;
	box-sizing: border-box;
	min-width: 0;
	overflow-x: auto;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.best-product-item {
	border-radius: 12px;
	box-shadow: 0 2px 12px #ffffff54;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow .18s, transform .18s, flex-basis .35s cubic-bezier(.4, 1, .4, 1), max-width .35s cubic-bezier(.4, 1, .4, 1);
	cursor: pointer;
	min-width: 0;
	flex: 0 1 10%;
	max-width: 10%;
	box-sizing: border-box;
	opacity: 0.7;
	z-index: 99;
	aspect-ratio: 2.0;
	overflow: hidden;
}

.best-product-item.active {
	flex: 0 1 60%;
	max-width: 60%;
	opacity: 1;
	z-index: 2;
	padding: 8px 4px;
	max-height: 100%;
	overflow: hidden;
}

.best-product-item:hover {
	box-shadow: 0 2px 4px #5b21b61a;
	transform: translateY(-0px) scale(1.001);
}

@media (max-width: 868px) {
	.best-product-item {
		flex: 0 1 10%;
		max-width: 10%;
	}

	.best-product-item.active {
		flex: 0 1 60%;
		max-width: 60%;
	}
}





/* styles content item inactive */
.content-inactive-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	padding: 0;
}

.content-inactive-top img {
	width: 38px;
	height: 38px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	margin: 8px 4px;
}

.content-inactive-top .brand-span {
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	font-size: 0.8rem;
	color: #43149c;
	background-color: #44149c4b;
	border-radius: 8px;
	padding: 2px 4px;
	border: #43149c solid 1px;
	display: block;
	text-align: center;
	margin: 8px 4px;
}

.content-inactive-top .category-span {
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	font-size: 0.8rem;
	color: #ffffff;
	background-color: #43149c;
	border-radius: 8px;
	padding: 2px 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 8px 4px;
}

@media (max-width: 868px) {

	.content-inactive-top,
	.content-inactive-bottom {
		display: none !important;
	}
}

.content-inactive-middle {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 1;
	width: 100%;
}

.content-inactive-middle img {
	max-width: 150%;
	object-fit: contain;
	display: block;
}

.content-inactive-middle span {
	margin: 8px 4px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
	line-height: 1.3;
	letter-spacing: 0.3px;
}

.content-inactive-bottom {
	margin: 8px 4px;
	font-size: 0.85rem;
	color: #fff;
	text-align: center;
	display: block;
	margin-top: 6px;
	padding: 2px 10px;
	border-radius: 8px;
	background: linear-gradient(90deg, #d50000, #6a1b9a);
	font-weight: 600;
}











/* style pour item active */
.content-active-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0%;
	max-height: 100%;
	overflow: hidden;
}

.top-row-contentDiv {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 4px;
	margin-bottom: 8px;
	max-height: 100%;
	overflow: hidden;
}

.top-logo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px #0000003d;
	border-radius: 8px;
}

.top-logo-row img {
	height: 32px;
}

.top-text-btn-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 4px;
}

.top-text-btn-row span {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 0.8rem;
	text-align: center;
	letter-spacing: 0.3px;
	border-radius: 8px;
	padding: 4px 8px;
	font-weight: 600;
}

.top-text-btn-row button {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 0.8rem;
	border: none;
	cursor: pointer;
	letter-spacing: 0.3px;
	border-radius: 8px;
	padding: 4px 8px;
	font-weight: 600;
	transition: background .18s, color .18s;
	background: rgba(0, 0, 0, 0.3);
}

.top-icon-store-svg {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px #0000003d;
	border-radius: 8px;
	padding: 4px;
}

.top-col-contentDiv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 8px;
	margin-bottom: 4px;
}

.middle-row-contentDiv {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 100%;
	overflow: hidden;
	gap: 8px;
	padding: 0% 4px;
	max-height: 100%;
	overflow: hidden;
}

.title-infos-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	flex: 0 1 30%;
	max-width: 30%;
	gap: 8px;
	margin-bottom: 4px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.423);
}

.middle-row-contentDiv img span {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 1 40%;
	max-width: 40%;
}

.variant-infos-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	flex: 0 1 30%;
	max-width: 30%;
	min-width: 30%;
	gap: 8px;
	margin-bottom: 4px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.423);
}

.product-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #764ba2;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgba(137,43,226,0.10);
    margin: 0 2px;
}

.product-colors-vertical-listxx {
    display: flex;
    gap: 8px;
    z-index: 2;
    flex-direction: column;
    flex-direction: row;
	align-items: center;
	justify-content: center;
}

.product-sizes-vertical-listxx {
    display: flex;
    flex-direction: row;
	align-items: center;
	justify-content: center;
    gap: 6px;
    margin: 3px 0;
}

.product-size-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: #fff;
    border: 2px solid #764ba2;
    border-radius: 16px;
    font-weight: 700;
    color: #764ba2;
    font-size: 0.7rem;
    box-shadow: 0 1px 4px rgba(137,43,226,0.08);
}

.product-color-dot-more {
    background: rgba(0, 0, 0, 0.489) !important;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    border: 2px solid #764ba2;
    border-radius: 50%;
}

 .product-price {
     font-size: 0.8rem;
     font-weight: 600;
     color: green;
     /* margin-top: 6px; */
 }

 .product-promo {
     display: inline-block;
     align-items: center;
     gap: 6px;
     font-size: 0.8rem;
     color: white;
     font-weight: bold;
     background-color: red;
     border-radius: 5px;
     padding: 0 2px;
 }

 .product-selling-price {
     font-size: 0.6rem;
     color: #764ba2;
     text-decoration: line-through;
     text-decoration-thickness: 1.5px;
 }

 .product-price.one {
     font-size: 0.7rem;
     font-weight: 600;
     color: green;
     text-decoration: line-through;
     text-decoration-thickness: 1.5px;
     margin-top: 6px;
 }

 .product-reduced-price {
     font-size: 0.8rem;
     font-weight: 600;
     color: red;
     margin-top: 6px;
 }
 
 .product-free-delivery {
     margin-top: 4px;
     display: flex;
     align-items: start;
     border: rgb(0, 226, 0) 1px solid;
     padding: 2px 4px;
     border-radius: 10px;
 }

 .product-free-delivery i {
     color: rgb(0, 226, 0);
     margin-right: 4px;
     font-size: 10px;
 }

 .product-free-delivery h1 {
     font-size: 0.6rem;
     color: rgb(0, 226, 0);
     margin: 0;
     padding: 0;
     font-weight: normal;
 }