/* Bain & Élégance – Badge Rupture de stock
   Palette : bleu nuit de la marque + pêche, sur fond ivoire. */
:root {
	--be-oos-ink: #14243b;      /* bleu nuit (texte/menu du site) */
	--be-oos-ivory: #fbf7f2;    /* ivoire */
	--be-oos-accent: #ebbda2;   /* pêche (badge Promo) */
	--be-oos-muted: #8a93a0;    /* prix atténué */
}

/* ---------- Étiquette commune ----------
   « body » augmente la spécificité pour passer devant le CSS inline du thème. */
.be-oos-badge,
body .beh-prod__oos,
body .be-stock-badge--out,
div.product.outofstock .woocommerce-product-gallery::before {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px 6px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(20, 36, 59, .9);
	color: var(--be-oos-ivory);
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(20, 36, 59, .18);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Petit point pêche devant le texte */
.be-oos-badge::before,
body .beh-prod__oos::before,
body .be-stock-badge--out::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--be-oos-accent);
}

/* ---------- Cartes produits : boutique, catégories, liés ---------- */
li.product.outofstock > a.woocommerce-LoopProduct-link,
.wc-block-grid__product.be-is-oos .wc-block-grid__product-link {
	position: relative;
	display: block;
}

.be-oos-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	pointer-events: none;
}

/* Le badge Promo est masqué sur un produit épuisé */
li.product.outofstock .onsale,
.wc-block-grid__product.be-is-oos .wc-block-grid__product-onsale {
	display: none !important;
}

/* Visuel adouci */
li.product.outofstock img,
.wc-block-grid__product.be-is-oos img,
.beh-prod:has(.beh-prod__oos) .beh-prod__img img {
	filter: grayscale(.4) saturate(.75);
	opacity: .72;
	transition: filter .35s ease, opacity .35s ease;
}

li.product.outofstock:hover img,
.wc-block-grid__product.be-is-oos:hover img,
.beh-prod:has(.beh-prod__oos):hover .beh-prod__img img {
	filter: grayscale(.15) saturate(.9);
	opacity: .9;
}

/* Prix atténué */
li.product.outofstock .price,
li.product.outofstock .price ins,
.wc-block-grid__product.be-is-oos .wc-block-grid__product-price,
.beh-prod:has(.beh-prod__oos) .beh-prod__price,
.beh-prod:has(.beh-prod__oos) .beh-prod__price ins {
	color: var(--be-oos-muted) !important;
}

/* ---------- Accueil (cartes du thème) ---------- */
body .beh-prod__oos {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
}

/* ---------- Fiche produit ---------- */
div.product.outofstock .woocommerce-product-gallery {
	position: relative;
}

div.product.outofstock .woocommerce-product-gallery::before {
	content: "Rupture de stock";
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 9;
	pointer-events: none;
}

body .be-stock-badge--out {
	margin: 0 0 14px;
	font-size: 11px;
	padding: 8px 14px 8px 12px;
}

/* Le thème cible ce badge avec un sélecteur inline très spécifique */
body.woocommerce div.product .summary .be-stock-badge.be-stock-badge--out {
	background: rgba(20, 36, 59, .9);
	border: 0;
	color: var(--be-oos-ivory);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

body.woocommerce div.product .summary .be-stock-badge.be-stock-badge--out::before {
	background: var(--be-oos-accent);
}

/* Même badge quand le thème le place hors du résumé (mise en page mobile) :
   la classe répétée augmente la spécificité au-delà du CSS inline du thème. */
body.woocommerce div.product .be-stock-badge.be-stock-badge--out.be-stock-badge--out {
	display: inline-flex;
	width: auto;
	max-width: max-content;
	align-self: flex-start;
	background: rgba(20, 36, 59, .9);
	border: 0;
	color: var(--be-oos-ivory);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

body.woocommerce div.product .be-stock-badge.be-stock-badge--out.be-stock-badge--out::before {
	background: var(--be-oos-accent);
}

/* Évite le doublon avec le message WooCommerce par défaut */
.summary:has(.be-stock-badge--out) p.stock.out-of-stock {
	display: none;
}

p.stock.out-of-stock {
	color: var(--be-oos-ink);
	font-weight: 600;
	letter-spacing: .04em;
}

/* ---------- Fiche produit variable : variation épuisée ---------- */
div.product.be-var-is-oos .woocommerce-product-gallery {
	position: relative;
}

div.product.be-var-is-oos .woocommerce-product-gallery::before {
	content: "Rupture de stock";
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 9;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(20, 36, 59, .9);
	color: var(--be-oos-ivory);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(20, 36, 59, .18);
	pointer-events: none;
}

.be-var-oos {
	margin: 0 0 18px;
	padding: 16px 18px 16px 20px;
	border: 1px solid rgba(20, 36, 59, .1);
	border-left: 3px solid var(--be-oos-ink);
	border-radius: 10px;
	background: var(--be-oos-ivory);
	box-shadow: 0 6px 20px rgba(20, 36, 59, .06);
	animation: be-var-oos-in .28s ease-out;
}

.be-var-oos[hidden] {
	display: none;
}

@keyframes be-var-oos-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

.be-var-oos__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	background: var(--be-oos-ink);
	color: var(--be-oos-ivory);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.be-var-oos__tag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--be-oos-accent);
}

.be-var-oos__msg {
	margin: 10px 0 0;
	color: var(--be-oos-ink);
	font-size: 15px;
	line-height: 1.45;
}

.be-var-oos__msg strong {
	font-weight: 600;
}

.be-var-oos__hint {
	margin: 12px 0 8px;
	color: #55637a;
	font-size: 13px;
}

.be-var-oos__alts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body .be-var-oos__alt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--be-oos-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--be-oos-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

body .be-var-oos__alt::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4c7a5b;
}

body .be-var-oos__alt:hover,
body .be-var-oos__alt:focus-visible {
	background: var(--be-oos-ink);
	color: var(--be-oos-ivory);
}

/* ---------- Carrousel « Disponibles maintenant » (accueil) ---------- */
.beh .be-stock-row__head {
	align-items: flex-end;
}

.be-stock-row__titles {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.be-stock-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #4c7a5b;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Point vert doux, avec un léger halo « disponible » */
.be-stock-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4c7a5b;
	box-shadow: 0 0 0 3px rgba(76, 122, 91, .16);
}

.be-stock-low {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(251, 247, 242, .94);
	color: var(--be-oos-ink);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	box-shadow: 0 2px 10px rgba(20, 36, 59, .1);
	pointer-events: none;
}

@media (max-width: 600px) {
	.be-oos-badge,
	body .beh-prod__oos {
		top: 8px;
		left: 8px;
		padding: 5px 10px 5px 8px;
		font-size: 9.5px;
		letter-spacing: .1em;
	}
}