/* WW Product Badges — product image overlay */

/* WooCommerce's loop item link wraps the thumbnail; give it a positioning
   context for the badge without changing its own layout. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	position: relative;
	display: block;
}

/* WooCommerce core already sets .woocommerce-product-gallery to position:relative
   (it needs to, for its own zoom/lightbox controls) — this is just a safety net
   in case a theme's stylesheet ever overrides that. */
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}

.ww-product-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	/* Critical: let clicks pass straight through to the product link/image/
	   zoom/lightbox underneath — the badge is purely decorative and must
	   never intercept the link or gallery interaction area. */
	pointer-events: none;
}

.ww-product-badge-img {
	display: block;
	max-width: 64px;
	height: auto;
	width: auto;
}

/* Slightly larger on the single product page, where the image itself is much bigger. */
.ww-product-badges--single {
	top: 16px;
	left: 16px;
}

.ww-product-badges--single .ww-product-badge-img {
	max-width: 96px;
}

@media (max-width: 480px) {
	.ww-product-badge-img {
		max-width: 48px;
	}

	.ww-product-badges--single {
		top: 8px;
		left: 8px;
	}

	.ww-product-badges--single .ww-product-badge-img {
		max-width: 64px;
	}
}