/* « Message important » — format de la description courte des produits
   (voir includes/short-description-important-message.php). Chargé sur le
   front et dans l'éditeur TinyMCE, d'où les couleurs en dur en repli des
   variables du thème (absentes dans l'iframe de l'éditeur).

   Suit la couleur du produit (--hx-product-color, posée sur la colonne
   .hx-product-card-color de la fiche — voir
   includes/block-bindings-product-display.php) ; corail du thème sinon.
   Le texte reste noir pour rester lisible quelle que soit la couleur. */
.hx-important {
	--hx-important-color: var(--hx-product-color, var(--wp--preset--color--accent-2, #F08E80));

	margin: 1.25em 0;
	padding: 0.9em 1.1em;
	background: color-mix(in srgb, var(--hx-important-color) 12%, white);
	border: 1px solid color-mix(in srgb, var(--hx-important-color) 45%, transparent);
	border-left: 4px solid var(--hx-important-color);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast, #111111);
	line-height: 1.5;
}

.hx-important::before {
	content: "i";
	display: inline-block;
	margin-right: 0.6em;
	vertical-align: 0.1em;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background: var(--hx-important-color);
	color: #fff;
	font: italic 700 0.85em/1.35em Georgia, serif;
	text-align: center;
}

.hx-important:first-child {
	margin-top: 0;
}

.hx-important:last-child {
	margin-bottom: 0;
}