/**
 * OFIM Commerce - Badge Vendu automatique v2.0.0
 *
 * Important : le badge n'existe plus comme <img> séparée.
 * Il est peint directement sur le conteneur de la photo via ::after.
 * Aucun script Elementor ne peut donc le déplacer après chargement.
 */
.ofim-sold-featured {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	box-sizing: border-box !important;
	isolation: isolate !important;
}

.ofim-sold-featured > a,
.ofim-sold-featured > picture,
.ofim-sold-featured > img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
}

.ofim-sold-featured img {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
}

/*
 * Le bandeau est une couche graphique CSS et non un élément HTML.
 * Son centre est donc toujours le centre géométrique du conteneur photo.
 */
.ofim-sold-featured::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 50 !important;
	display: block !important;
	width: min(70%, 760px) !important;
	max-width: calc(100% - 28px) !important;
	aspect-ratio: 3 / 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	background-image: url('../images/badge-vendu-ofim.png') !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: contain !important;
	transform: translate(-50%, -50%) !important;
	pointer-events: none !important;
	filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.28));
	box-sizing: border-box !important;
}

/* Vignettes : un peu plus large pour rester immédiatement lisible. */
article .ofim-sold-featured::after,
.listing-card .ofim-sold-featured::after,
.elementor-loop-container .ofim-sold-featured::after,
.elementor-posts-container .ofim-sold-featured::after {
	width: min(82%, 560px) !important;
	max-width: calc(100% - 16px) !important;
}

@media (max-width: 767px) {
	.ofim-sold-featured::after {
		width: 82% !important;
		max-width: calc(100% - 16px) !important;
	}
}