/* ==========================================================================
   WENEX SHOP LAYER — COMING SOON
   --------------------------------------------------------------------------
   Drawn deliberately in the mu-plugin's OWN badge language, measured off the
   live "Sale!" flash so the two read as two states of one system rather than
   two designers:

       font   11px Switzer 600, .12em, uppercase
       shape  2px radius, hairline border
       inset  6px 10px

   Neutral grey, NOT crimson. Crimson is the promotion colour on this
   storefront and a release date is not a promotion.

   Placed top-LEFT because WooCommerce's sale flash occupies top-right, so a
   product can never carry both in the same corner. In practice it cannot
   carry both at all — a purchasable product is excluded from the badge.
   ========================================================================== */

.woocommerce ul.products li.product {
	position: relative;
}

.woocommerce ul.products li.product .wxshop-soon {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 2;

	font-family: var(--wenex-font-headline, 'Switzer', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;

	color: #6E6E73;
	background: rgba(255, 255, 255, .9);
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 2px;
	padding: 6px 10px;
}

/* The title of something you cannot buy yet sits back a step from the titles
   of things you can. Contrast stays above AA: #4B4B4F on #FFFFFF is 8.6:1. */
.woocommerce ul.products li.product:has(.wxshop-soon) .woocommerce-loop-product__title {
	color: #4B4B4F;
}

/* Cards become equal-height columns so every call to action lands on the same
   line — otherwise the one card carrying a price pushes its button down and
   the row reads as ragged. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product a.button {
	margin-block-start: auto;
}

/* WooCommerce prints the old price and the new one each followed by a
   screen-reader sentence. Keep the sentences for assistive technology, keep
   them out of the visible price. */
.woocommerce ul.products li.product .price .screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product {
		transition: none;
	}
}