/**
 * HappyMeat — ruban « Rupture de stock »
 *
 * WooCommerce pose la classe .outofstock sur chaque produit en rupture :
 * cartes de l'élément Bricks « Produits » (accueil, catégories, recherche, panier vide),
 * produits liés / suggérés (balisage WooCommerce natif) et fiche produit.
 * La couleur vient de la variable Bricks --stock-out (catégorie Colors).
 */

.product.outofstock > .dynamic:has(> a > img, > img),
.product.outofstock > a.woocommerce-LoopProduct-link,
.product.outofstock .woocommerce-product-gallery__image:first-child {
	position: relative;
	overflow: hidden;
	/* Le ruban reste dans la carte : il ne passe jamais au-dessus du header fixe (z-index 1). */
	isolation: isolate;
}

.product.outofstock > .dynamic:has(> a > img, > img)::after,
.product.outofstock > a.woocommerce-LoopProduct-link::after,
.product.outofstock .woocommerce-product-gallery__image:first-child::after {
	content: "Rupture de stock";
	position: absolute;
	/* Bande de 12em centrée sur la diagonale du coin, à 3.6em des bords haut et droit. */
	top: 2.5em;
	right: -2.4em;
	z-index: 1;
	width: 12em;
	height: 2.2em;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 2.2em;
	text-align: center;
	white-space: nowrap;
	color: #fff;
	background: var(--stock-out, #e46773);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
	transform: rotate(45deg);
	pointer-events: none;
}

/* Fiche produit : image plus grande, ruban plus grand. */
.product.outofstock .woocommerce-product-gallery__image:first-child::after {
	font-size: 1.7rem;
}

/* Fiche produit : mention « Rupture de stock » sous le prix, même rouge que le ruban. */
.product.outofstock p.stock.out-of-stock {
	color: var(--stock-out, #e46773);
}