/* Loyalty Academy — Sold Out badge (out of stock + "Display Sold Out badge" ticked).
   --la-sold-out-flag is set inline by the plugin to assets/sold-out-corner.png.
   The PNG is square with the flag in its top-left; the element is a square sized to
   the image width so the flag scales with the image. */

:root {
	--la-sold-out-size: 60%; /* flag element width relative to the image; flag itself ≈ 70% of that */
}

/* ---- grayscale ---- */
li.product.la-sold-out img,
.la-sold-out-wrap img,
body.la-sold-out .woocommerce-product-gallery img,
body.la-sold-out .elementor-widget-woocommerce-product-images img {
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}

/* ---- flag element ---- */
.la-sold-out-flag {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--la-sold-out-size);
	aspect-ratio: 1 / 1;
	background: var(--la-sold-out-flag) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
	z-index: 5;
}

/* ---- listings: the <li> is the positioning box; the image is its first visual child ---- */
li.product.la-sold-out {
	position: relative;
	overflow: hidden;
}

/* ---- the_post_thumbnail() wrapper ---- */
.la-sold-out-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	line-height: 0;
}

/* ---- single product gallery (WooCommerce and Elementor Product Images widget) ---- */
body.la-sold-out .woocommerce-product-gallery,
body.la-sold-out .elementor-widget-woocommerce-product-images .elementor-widget-container {
	position: relative;
	overflow: hidden;
}
body.la-sold-out .woocommerce-product-gallery::before,
body.la-sold-out .elementor-widget-woocommerce-product-images .elementor-widget-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--la-sold-out-size);
	aspect-ratio: 1 / 1;
	background: var(--la-sold-out-flag) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
	z-index: 5;
}
/* Keep the gallery's zoom/lightbox trigger above the flag. */
body.la-sold-out .woocommerce-product-gallery__trigger {
	z-index: 6;
}