/**
 * RPL – Variation availability (cut-yardage products)
 * Cross indicator for unavailable swatches + "Out of Stock" add-to-cart state.
 * Behaviour is driven by assets/js/variation-availability.js.
 */

/* Keep every swatch clickable, even the crossed-out (unavailable) ones. */
.variations_form .variable-item.rpl-unavailable {
	cursor: pointer;
	pointer-events: auto;
}

/* Slightly mute the swatch content so "unavailable" reads at a glance… */
.variations_form .variable-item.rpl-unavailable .variable-item-contents,
.variations_form .variable-item.rpl-unavailable > img,
.variations_form .variable-item.rpl-unavailable .variable-item-span {
	opacity: 0.55;
}

/* …and draw a bold diagonal cross across it (bottom-left → top-right). */
.variations_form .variable-item {
	position: relative;
}

.variations_form .variable-item .rpl-cross {
	display: none;
}

.variations_form .variable-item.rpl-unavailable .rpl-cross {
	display: block;
	position: absolute;
	/* Fill the swatch exactly (contained within its border) so the diagonal
	   spans corner-to-corner without spilling outside. */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: inherit;
	z-index: 5;
	background-repeat: no-repeat;
	/*
	 * Soft, faded gray diagonal with a faint white "casing" behind it, so the
	 * cross stays legible on any swatch background (black, white or image)
	 * without looking bold. Gray layer paints on top of the white band.
	 */
	background-image:
		linear-gradient(
			to top right,
			transparent calc(50% - 1px),
			rgba(90, 90, 90, 0.4) calc(50% - 1px),
			rgba(90, 90, 90, 0.4) calc(50% + 1px),
			transparent calc(50% + 1px)
		),
		linear-gradient(
			to top right,
			transparent calc(50% - 2.5px),
			rgba(255, 255, 255, 0.45) calc(50% - 2.5px),
			rgba(255, 255, 255, 0.45) calc(50% + 2.5px),
			transparent calc(50% + 2.5px)
		);
}

/* A crossed-out swatch that is also the current selection stays legible. */
.variations_form .variable-item.rpl-unavailable.selected .variable-item-contents,
.variations_form .variable-item.rpl-unavailable.selected > img,
.variations_form .variable-item.rpl-unavailable.selected .variable-item-span {
	opacity: 0.75;
}

/**
 * Make sure the variation form (swatches + add-to-cart) is visible on
 * cut-yardage category pages. Production hides prices for the durable /
 * light-weight categories via Customizer CSS; that rule must never take the
 * add-to-cart form down with it. The product_cat-* classes live on the product
 * wrapper (not <body>); .product.product_cat-* out-specifies the Customizer's
 * .product_cat-* rule so it wins regardless of load order. NOTE: this only
 * un-hides the form – the price itself stays hidden by the price selectors.
 */
.product.product_cat-durable .single_variation_wrap,
.product.product_cat-light-weight .single_variation_wrap {
	display: block !important;
}