/**
 * Fiche produit de suspension-design.com :
 *   - étiquette « Économisez X € » quand l'article est en promotion ;
 *   - mise en valeur du « -10% » du bandeau de code promo, qui se fondait
 *     dans le texte gris à côté.
 *
 * Charte : anthracite #1e1e1e, beige #f0ede8, pastilles au rayon 30 px,
 * interface en « greycliff-cf ».
 */

.glow-promo-saving--single {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 30px;
	background-color: #f0ede8;
	color: #1e1e1e;
	font-family: greycliff-cf, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Prix unique : l'étiquette prend sa propre ligne, calée au bord gauche. */
.woocommerce div.product p.price .glow-promo-saving--single {
	display: flex;
	width: fit-content;
	margin-top: 8px;
}

/* Prix d'une variation : l'étiquette suit le prix, et passe dessous si la
   colonne est trop étroite. */
.woocommerce div.product .woocommerce-variation-price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 6px;
}

/* ---------------------------------------------------------------
   Bandeau de code promo : le pourcentage en évidence
   Il était au même gris que la phrase qui le suit, donc invisible.
   --------------------------------------------------------------- */
.special-offer .coupon_wrapper .coupon {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px 4px;
	border-radius: 30px;
	background-color: #1e1e1e;
	color: #fff;
	font-family: greycliff-cf, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	white-space: nowrap;
}

@media (max-width: 480px) {

	.glow-promo-saving--single {
		padding: 3px 9px;
		font-size: 10px;
	}

	.special-offer .coupon_wrapper .coupon {
		padding: 2px 9px 3px;
		font-size: 12px;
	}
}