/**
 * Styles pour les swatches de couleur dans les loops produit.
 *
 * @link       https://com-maker.fr
 * @since      1.0.0
 * @package    Sabine_Be_Pro
 */

/* Container des swatches */
.sabine-be-pro-color-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	align-items: center;
	padding: 5px 0;
}

/* Mode hover : masqué par défaut */
.sabine-be-pro-color-swatches.sbe-swatches--hover {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Afficher au survol du parent (carte produit) - Uniquement dans les loops/archives, pas sur single product */
.custom-product-item:hover .sabine-be-pro-color-swatches.sbe-swatches--hover,
ul.products li.product:hover .sabine-be-pro-color-swatches.sbe-swatches--hover,
.woocommerce-page:not(.single-product) .product:hover .sabine-be-pro-color-swatches.sbe-swatches--hover,
.swiper-slide:hover .sabine-be-pro-color-swatches.sbe-swatches--hover {
	opacity: 1;
	transform: translateY(0);
}

/* Mode toujours visible */
.sabine-be-pro-color-swatches.sbe-swatches--always {
	opacity: 1;
	transform: translateY(0);
}

/* Pastille de couleur individuelle */
.sbe-color-swatch {
	display: inline-block;
	width: var(--swatch-size, 20px);
	height: var(--swatch-size, 20px);
	border-radius: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sbe-color-swatch:hover {
	transform: scale(1.15);
	border-color: #000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* État actif (couleur sélectionnée) */
.sbe-color-swatch.active {
	border-color: #000;
}

/* Animation de chargement de l'image */
.custom-product-image.sbe-image-loading img {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.custom-product-image.sbe-image-loaded img {
	opacity: 1;
}

/* Responsive */
@media screen and (max-width: 768px) {
	/* Sur mobile, toujours afficher les swatches */
	.sabine-be-pro-color-swatches.sbe-swatches--hover {
		opacity: 1;
		transform: translateY(0);
	}

	.sbe-color-swatch {
		width: calc(var(--swatch-size, 20px) * 1.2);
		height: calc(var(--swatch-size, 20px) * 1.2);
	}
}