/*
 * Interactive-state styling for the "Available Colors" swatches, additive
 * to the existing chip design in woocommerce-base.css (not modified here).
 * Only applies to a product with a confirmed per-color price (currently
 * Saint Joseph Statue) — see ProductDetailsBlock::get_variation_price_map().
 * Every other product's swatches are plain <span> chips and unaffected.
 */

.u3ds-color-swatch--selectable {
	cursor: pointer;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.u3ds-color-swatch--selectable:hover {
	border-color: var(--wp--preset--color--accent) !important;
}

.u3ds-color-swatch--selectable:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.u3ds-color-swatch--selectable.is-selected {
	border-color: var(--wp--preset--color--accent) !important;
	background-color: var(--wp--preset--color--surface-elevated);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
}

.u3ds-color-swatch--selectable.is-selected .u3ds-color-swatch__block {
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
}

/* WooCommerce's own attribute dropdown keeps functioning behind the
   swatches (it's what actually drives price/stock/Add to Cart) but is
   visually replaced by the swatch row above it. Scoped with :has() to only
   the product columns that actually render selectable swatches, so any
   future variable product WITHOUT color-based pricing still shows
   WooCommerce's normal dropdown untouched. */
.u3ds-product__info-col:has(.u3ds-color-swatch-row--selectable) .variations {
	position: absolute;
	/* !important: WooCommerce core's own `form.cart .variations { width: 100% }`
	   (woocommerce.css) has higher selector specificity than this rule and
	   otherwise wins the width property alone — leaving the table 100% of an
	   ancestor's width even while clipped to 0x0, which was pushing the page
	   into horizontal scroll. Every other property here already wins the
	   cascade normally; only width needs the override. */
	width: 1px !important;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.u3ds-product__info-col:has(.u3ds-color-swatch-row--selectable) .woocommerce-variation-description,
.u3ds-product__info-col:has(.u3ds-color-swatch-row--selectable) .woocommerce-variation-price,
.u3ds-product__info-col:has(.u3ds-color-swatch-row--selectable) .woocommerce-variation-availability,
.u3ds-product__info-col:has(.u3ds-color-swatch-row--selectable) .reset_variations {
	display: none;
}

/* BATCH E.1 — purchase-control alignment fix.
 * Root cause: .u3ds-product__add-to-cart form.cart in single-product.css
 * gives the quantity/Add to Cart/Buy Now row its flex+gap layout, but that
 * rule only ever reaches the *top-level* form children. For a variable
 * product the real controls sit one level deeper, inside WooCommerce's own
 * .woocommerce-variation-add-to-cart wrapper — which WooCommerce renders as
 * `display:grid` sized to its content (not the available column width), so
 * it was ~284px wide inside a ~528px column instead of filling it. Cloning
 * the exact same flex/gap treatment onto that wrapper (scoped to only the
 * product columns with color-based pricing, i.e. Saint Joseph today) fixes
 * the width and restores the same alignment simple products already have,
 * without touching the simple-product path or single-product.css. */
.u3ds-product__info-col:has(.u3ds-color-swatch-row--selectable) .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
	width: 100%;
}