/**
 * Bandeau « Rupture de stock » — au bas de la photo (vignette et fiche produit).
 *
 * Les couleurs viennent des variables Bootstrap du thème actif (--bs-danger-rgb,
 * --bs-white) : aucune valeur de design en dur, les trois habillages l'héritent.
 *
 * @package potsetiques-theme-core
 */

.potsetiques-oos-badge {
	display: block;
	padding: .4rem .75rem;
	background-color: rgba(var(--bs-danger-rgb), .92);
	color: var(--bs-white);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	pointer-events: none; /* la photo reste cliquable (lien, lightbox) */
}

/* Vignette : le premier lien de la card enveloppe la photo ; en le posant
   position:relative, `bottom: 0` vise le bas de la PHOTO, pas celui de la card
   (la photo ne fait pas la hauteur de la card : le corps vient dessous). */
.card.type-product > .woocommerce-LoopProduct-link {
	position: relative;
}

.potsetiques-oos-badge--loop {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4; /* au-dessus des pastilles (z-index 3) */
}

/* Fiche : le bandeau suit la photo dans le flux, puis remonte sur elle de sa
   propre hauteur — il tient au bas de l'image quelle que soit sa taille. */
.potsetiques-oos-badge--single {
	position: relative;
	z-index: 4;
	margin-top: -2.2rem;
	margin-bottom: 1rem;
	height: 2.2rem;
	box-sizing: border-box;
	padding-block: 0;
	line-height: 2.2rem;
}

/* ⚠️ FlexSlider (galerie à plusieurs images) range son .flex-viewport APRÈS les
   enfants que le gabarit a posés dans la galerie : le bandeau se retrouvait donc
   AVANT la photo, au-dessus d'elle. La galerie est une colonne flex (SCSS des
   habillages) : `order: -1` ramène la photo en tête, le bandeau (order 0) suit,
   puis les miniatures, puis les catégories (order 1). */
.woocommerce-product-gallery > .flex-viewport {
	order: -1;
}