/*
 * Greyscale sold-out product images.
 * Opacity is controlled by --wdmv-sold-out-opacity injected from PHP
 * based on the admin setting (default 0.5 = 50 %).
 */
.wdmv-product-sold-out :is(
	.product-image-link img,
	.hover-img img,
	.wd-product-image img,
	.product-element-top img,
	.attachment-woocommerce_thumbnail,
	.wp-post-image
) {
	filter: grayscale(100%) !important;
	opacity: var(--wdmv-sold-out-opacity, 0.5) !important;
	transition:
		filter 0.25s ease,
		opacity 0.25s ease !important;
}

/* Slightly brighter on hover — still greyscale. */
.wdmv-product-sold-out:hover :is(
	.product-image-link img,
	.hover-img img,
	.wd-product-image img,
	.product-element-top img,
	.attachment-woocommerce_thumbnail,
	.wp-post-image
) {
	filter: grayscale(100%) !important;
	opacity: var(--wdmv-sold-out-opacity-hover, 0.56) !important;
}

/*
 * Sold-out loop button — visually disabled.
 *
 * pointer-events is deliberately NOT set to none.
 *
 * With pointer-events: none the button never becomes the click target, which
 * had two consequences: the capture-phase blocker in sold-out.js could never
 * match and was effectively dead code, and the click fell through to whatever
 * sits beneath the button in the product card — in several WoodMart grid
 * layouts that is a wrapping product link, so clicking "Sold Out" navigated the
 * customer to the product page instead of doing nothing.
 *
 * Letting the button receive the event means sold-out.js intercepts it in the
 * capture phase and calls preventDefault + stopImmediatePropagation, which
 * blocks both navigation and WooCommerce/WoodMart AJAX handlers.
 */
.wdmv-sold-out-button {
	color: #666 !important;
	background-color: #e4e4e4 !important;
	border-color: #d2d2d2 !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
}

/* Remove WoodMart cart icon and loading spinner from sold-out buttons. */
.wdmv-sold-out-button::before,
.wdmv-sold-out-button::after {
	content: none !important;
	display: none !important;
}

.wdmv-sold-out-button :is(
	.wd-icon,
	.wd-button-icon,
	.button-icon,
	.wd-tooltip-label
) {
	display: none !important;
}