/* VWA Uitverkocht Badge */

:root {
	--vwa-uv-bg: #111111;
	--vwa-uv-color: #ffffff;
	--vwa-uv-low-bg: #c1121f;
	--vwa-uv-low-color: #ffffff;
	--vwa-uv-bo-bg: #8a6d3b;
	--vwa-uv-bo-color: #ffffff;
	--vwa-uv-radius: 4px;
	--vwa-uv-transform: uppercase;
	--vwa-uv-dim: 0.55;
}

/* ------------------------------------------------------------------
   Positioneringscontext. Ecomus en de meeste WooCommerce-thema's
   gebruiken één van deze wrappers rond de productafbeelding.
   ------------------------------------------------------------------ */

.woocommerce ul.products li.product,
ul.products li.product,
li.product .card-product,
li.product .card-product-wrapper,
.card-product,
.card-product .card-product-wrapper,
.tf-product-card,
.tf-product-media-wrap,
.product-item,
.card-media,
.product .product-img,
.woocommerce-loop-product__link,
.woocommerce-product-gallery,
.wp-block-woocommerce-product-image {
	position: relative;
}

/* ------------------------------------------------------------------
   De badge zelf
   ------------------------------------------------------------------ */

.vwa-uv-badge {
	position: absolute;
	/* Ecomus legt hover-overlays en actieknoppen op z-index 5 t/m 20. */
	z-index: 90 !important;
	display: inline-block;
	padding: 6px 12px;
	background: var(--vwa-uv-bg);
	color: var(--vwa-uv-color);
	border-radius: var(--vwa-uv-radius);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: var(--vwa-uv-transform);
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.vwa-uv-badge--low {
	background: var(--vwa-uv-low-bg);
	color: var(--vwa-uv-low-color);
}

.vwa-uv-badge--backorder {
	background: var(--vwa-uv-bo-bg);
	color: var(--vwa-uv-bo-color);
}

.vwa-uv-badge--single {
	padding: 8px 16px;
	font-size: 12px;
	z-index: 30;
}

/* ------------------------------------------------------------------
   Afbeelding dimmen bij uitverkocht
   ------------------------------------------------------------------ */

.vwa-uv--sold-out .card-product-wrapper img,
.vwa-uv--sold-out .tf-product-media-wrap img,
.vwa-uv--sold-out .card-media img,
.vwa-uv--sold-out .product-img img,
.vwa-uv--sold-out .woocommerce-loop-product__link img,
.vwa-uv--sold-out > a img,
li.product.vwa-uv--sold-out img.attachment-woocommerce_thumbnail,
li.product.vwa-uv--sold-out img.wp-post-image {
	opacity: var(--vwa-uv-dim);
	transition: opacity 0.25s ease;
}

.vwa-uv--sold-out:hover .card-product-wrapper img,
.vwa-uv--sold-out:hover .product-img img,
.vwa-uv--sold-out:hover .woocommerce-loop-product__link img {
	opacity: calc(var(--vwa-uv-dim) + 0.15);
}

/* ------------------------------------------------------------------
   Knop in het overzicht
   ------------------------------------------------------------------ */

.vwa-uv-button,
.woocommerce a.button.vwa-uv-button,
li.product .button.vwa-uv-button {
	background-color: #e9e9e7 !important;
	color: #6b6b6b !important;
	border-color: #e0e0dd !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	opacity: 1 !important;
}

/* Ecomus toont vaak een hover-actiebalk met winkelwagen-icoon.
   Bij uitverkocht heeft die geen functie meer. */

.vwa-uv--sold-out .list-product-btn .box-icon.add-to-cart,
.vwa-uv--sold-out .list-product-btn .quickadd,
.vwa-uv--sold-out .product-btn-hover .add_to_cart_button {
	display: none !important;
}

/* ------------------------------------------------------------------
   Melding op de productpagina
   ------------------------------------------------------------------ */

.woocommerce div.product p.stock.out-of-stock,
.woocommerce div.product p.vwa-uv-stock,
.woocommerce div.product .vwa-uv-stock {
	display: block;
	margin: 18px 0;
	padding: 14px 18px;
	background: #f6f6f4;
	border-left: 3px solid var(--vwa-uv-bg);
	border-radius: 0 8px 8px 0;
	color: #3a3a3a;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
}

/* ------------------------------------------------------------------
   Mobiel
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.vwa-uv-badge {
		padding: 5px 9px;
		font-size: 10px;
	}

	.vwa-uv-badge--single {
		padding: 6px 12px;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vwa-uv--sold-out img {
		transition: none !important;
	}
}