/**
 * Fiche produit : badges sur la galerie, même style que les cartes produit (.ks-card__badge) :
 * pilule rose, texte blanc gras ; légèrement agrandis pour la grande image.
 * Rendu : inc/woocommerce/product-badges.php. Fichier autonome (hors build Tailwind).
 * Le sélecteur doit l'emporter sur « .woocommerce span.onsale » de woocommerce.css.
 */
.woocommerce .ks-product span.onsale.ks-sale-badge,
.ks-product .ks-sale-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	right: auto;
	z-index: 10;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 7px 14px;
	border-radius: 999px;
	background: #f0457c;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

/*
 * Points fidélité SUMO sous le prix, même pastille pour les deux cas :
 * - produit simple : <br><span.simpleshopmessage><img> Gagnez X points</span> injecté dans p.price ;
 *   la CSS en ligne de SUMO lui impose 16 × 16 px (le texte débordait du fond) ;
 * - produit variable : icône et zone vide de SUMO masquées, remplacées par p.ks-points
 *   (assets/js/sumo-variation-points.js).
 */
.ks-product .summary .price > br,
.ks-product .summary .price > .gift_icon,
.ks-product .summary .price > .variableshopmessage {
	display: none !important;
}

.ks-product .summary .price .simpleshopmessage,
.ks-product .summary .ks-points {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: fit-content !important;
	max-width: 100%;
	height: auto !important;
	margin: 12px 0 0;
	padding: 4px 16px 4px 4px;
	border-radius: 999px;
	background: #f6ecfb;
	color: #a2257c;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: normal;
}

.ks-product .summary .ks-points {
	margin: -4px 0 16px;
}

.ks-product .summary .ks-points[hidden] {
	display: none !important;
}

.ks-product .summary .price .simpleshopmessage img,
.ks-product .summary .ks-points img {
	flex-shrink: 0;
	width: 26px !important;
	height: 26px !important;
	margin: 0 !important;
	border-radius: 999px;
}

/* Rupture de stock : même gabarit, fond encre comme « Bientôt de retour » sur les cartes. */
.ks-product .ks-soldout-badge {
	top: 16px;
	left: 16px;
	padding: 7px 14px;
	font-size: 14px;
	line-height: 1.2;
}