/*
 * REACH Supply cart quantity and availability resilience.
 *
 * RS-DS-018: quantity controls expand for longer values, while stock and
 * availability content remain fully visible inside the product identity
 * column.
 *
 * RS-DS-019: the numeric field may grow on desktop and mobile, but the minus
 * and plus affordances keep stable touch targets. In-stock status owns one
 * contained dot inside its pill instead of inheriting loose page-level
 * positioning from the retired Breakdance cart runtime.
 *
 * This layer is presentation-only and scoped to the native WooCommerce cart.
 */

body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2 {
	--rs-cart-quantity-input-width: 2.75rem;
	--rs-cart-quantity-width: calc(4.25rem + var(--rs-cart-quantity-input-width));
}

/* The live value width is supplied by the companion script. The outer control
 * and purchase column follow it at every viewport, while minus and plus remain
 * stable 34px controls. */
body.reach-design-system.woocommerce-cart
.rs-cart-purchase-bar__inner {
	grid-template-columns:
		minmax(var(--rs-cart-quantity-width), max-content)
		minmax(5rem, 1fr) !important;
}

body.reach-design-system.woocommerce-cart
.woocommerce-cart-form .rs-cart-purchase-bar .quantity {
	grid-template-columns:
		2.125rem
		var(--rs-cart-quantity-input-width)
		2.125rem !important;
	max-width: var(--rs-cart-quantity-width) !important;
	min-width: var(--rs-cart-quantity-width) !important;
	width: var(--rs-cart-quantity-width) !important;
}

body.reach-design-system.woocommerce-cart
.woocommerce-cart-form .rs-cart-purchase-bar .quantity .qty {
	box-sizing: border-box !important;
	font-variant-numeric: tabular-nums;
	max-width: var(--rs-cart-quantity-input-width) !important;
	min-width: var(--rs-cart-quantity-input-width) !important;
	overflow: visible !important;
	padding-inline: 0.25rem !important;
	text-overflow: clip !important;
	width: var(--rs-cart-quantity-input-width) !important;
}

@media (min-width: 768px) {
	/* The desktop purchase track grows with the number field instead of letting
	 * the plus button or item total collide with a four-digit quantity. */
	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2 {
		grid-template-columns:
			var(--rs-cart-media-size)
			minmax(0, 1fr)
			calc(var(--rs-cart-quantity-width) + 7.75rem)
			2.125rem !important;
	}
}

/* Product identity must never clip the beginning of a stock badge or its
 * fulfilment copy. The older Breakdance layer can leave fixed or negative
 * geometry behind after an AJAX row replacement, so normalize all geometry
 * after the accepted media containment rules. */
body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
.product-name {
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
}

body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
.product-name > :where(
	.reach-cart-availability-v21,
	.rs-cart-availability-normalized
) {
	align-items: center !important;
	clear: both !important;
	display: flex !important;
	float: none !important;
	flex-wrap: wrap !important;
	gap: 0.3125rem 0.5rem !important;
	inset: auto !important;
	margin: 0.3125rem 0 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: visible !important;
	padding: 0 !important;
	position: static !important;
	transform: none !important;
	width: 100% !important;
}

body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
.product-name > :where(
	.reach-cart-availability-v21,
	.rs-cart-availability-normalized
)::before,
body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
.product-name > :where(
	.reach-cart-availability-v21,
	.rs-cart-availability-normalized
)::after {
	content: none !important;
	display: none !important;
}

body.reach-design-system.woocommerce-cart
:where(
	.reach-cart-availability-v21__label,
	.rs-cart-availability__label
) {
	align-items: center !important;
	clip: auto !important;
	clip-path: none !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	float: none !important;
	inset: auto !important;
	margin: 0 !important;
	max-width: 100% !important;
	overflow: visible !important;
	padding: 0.1875rem 0.625rem !important;
	position: relative !important;
	transform: none !important;
	white-space: nowrap !important;
}

/* Retire every inherited availability dot first. Only a verified in-stock
 * label receives one, and it is positioned relative to the pill itself. */
body.reach-design-system.woocommerce-cart
:where(
	.reach-cart-availability-v21__label,
	.rs-cart-availability__label
)::before {
	content: none !important;
	display: none !important;
}

body.reach-design-system.woocommerce-cart
:where(
	.reach-cart-availability-v21__label,
	.rs-cart-availability__label
).is-in-stock {
	padding-inline-start: 1.5rem !important;
}

body.reach-design-system.woocommerce-cart
:where(
	.reach-cart-availability-v21__label,
	.rs-cart-availability__label
).is-in-stock::before {
	background: var(--rs-color-success) !important;
	border: 0 !important;
	border-radius: var(--rs-radius-pill) !important;
	box-shadow: 0 0 0 3px rgb(63 111 82 / 12%) !important;
	content: "" !important;
	display: block !important;
	height: 0.4375rem !important;
	inset: 50% auto auto 0.625rem !important;
	margin: 0 !important;
	position: absolute !important;
	transform: translateY(-50%) !important;
	width: 0.4375rem !important;
}

body.reach-design-system.woocommerce-cart
:where(
	.reach-cart-availability-v21__detail,
	.rs-cart-availability__detail
) {
	clip: auto !important;
	clip-path: none !important;
	flex: 1 1 7.5rem !important;
	float: none !important;
	inset: auto !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: visible !important;
	overflow-wrap: anywhere;
	position: static !important;
	transform: none !important;
}

@media (max-width: 767px) {
	body.reach-design-system.woocommerce-cart
	.rs-cart-purchase-bar__inner {
		gap: 0.75rem !important;
		grid-template-columns:
			minmax(var(--rs-cart-quantity-width), max-content)
			minmax(0, 1fr) !important;
	}
}

@media (max-width: 390px) {
	body.reach-design-system.woocommerce-cart
	.rs-cart-purchase-bar__inner {
		gap: 0.625rem !important;
	}

	body.reach-design-system.woocommerce-cart
	.rs-cart-purchase-total {
		font-size: clamp(1rem, 5.2vw, 1.25rem) !important;
	}
}