/* Layout only - swatch/size-button/title visual rules come from
   woo-filter-sort-style-3bf0887b (shared, not duplicated). */

.mv-vs-container {
	display: flex;
	flex-direction: column;
}

.mv-vs-container .filter-group-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Resets the shared stylesheet's own default border-bottom (1.4px, meant
	   for the filter's accordion dividers) - this widget has no divider
	   unless the "Show Divider" switch explicitly turns it back on via the
	   widget's own, more specific {{WRAPPER}} selector. Without this reset,
	   turning the switch "off" only skipped this widget's OWN override CSS
	   while the shared default kept showing through underneath it. */
	border-bottom: none;
}

.mv-vs-container .filter-group-title {
	margin: 0;
}

/* Hiding WooCommerce's native color/size picker (.variations_form
   table.variations) is now managed directly in Elementor's Custom CSS on
   the Add to Cart widget, not here - removed 2026-08-17, see
   site-build-log.md. Only one PDP uses this rule; not worth a second
   source of truth in this file for a single-page override. */

/* Native quantity input now lives here too (.qty-stepper below) - hides the
   Add to Cart widget's own native <div class="quantity"> so it isn't shown
   twice. Scoped to the add-to-cart widget's specific Elementor element ID
   (a3bd8b5, confirmed against the live template) rather than a bare
   .quantity, since that class is generic WooCommerce markup reused
   elsewhere (mini-cart line items, cart page) that must stay untouched. */
.elementor-element-a3bd8b5 .quantity {
	display: none !important;
}

/* Structural only - direction/justify/align-items for the size group's
   title row are real Elementor controls now (Size Guide Position section),
   not hardcoded here. display:flex is the one property every group's title
   needs regardless (color/size/quantity all use this class), so it stays a
   plain default rather than living only inside a condition. */
.mv-vs-container .filter-group-title {
	display: flex;
}

.mv-vs-container .mv-size-guide-link {
	cursor: pointer;
}

/* Color group's title row now holds two elements (group label + the
   dynamic selected-color name) - space-between so they land on opposite
   ends, same "one shared control, per-group override where it actually
   differs" pattern as the size group's own title-row controls. Higher
   specificity than the Typography/justify-content controls further up
   this file on purpose, so it wins regardless of source order. */
.mv-vs-container [data-group="color"] .filter-group-title {
	justify-content: space-between;
	align-items: center;
}

/* Optional per-color icon (product_attribute_image term meta) - sits
   inside the existing .swatch-fill (which still provides the background
   color underneath, so an icon with transparency still reads correctly).
   Absent entirely when no icon is set - .swatch-fill's own background-color
   is the whole visual then, unchanged from before this feature existed. */
.mv-vs-container .swatch-fill {
	position: relative;
	overflow: hidden;
	/* FIXED 2026-09-06 (see LOG): explicit fill so the new swatch_fill_inset
	 * Style-tab control (widget-variations-selector.php, sets padding on
	 * the parent .swatch-item-btn) actually has something to reveal a real
	 * frame-to-fill gap around - without this, .swatch-fill's own size was
	 * left to whatever the shared external stylesheet happened to give it,
	 * not guaranteed to track the button's own padded-in space. Also
	 * matches the button's own border-radius so a rounded-square shape
	 * doesn't leave square corners peeking out from the fill. */
	width: 100%;
	height: 100%;
	display: block;
	border-radius: inherit;
}

.mv-vs-container .swatch-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* One bordered/rounded box holding −/number/+ together (matches the
   wireframe's .qty pattern) - border/radius/bg/padding all come from the
   Quantity Stepper style controls. align-self defaults to flex-start via
   the "Box Position" control, which is what keeps this fit-content instead
   of stretching to the column's full width (no explicit width rule needed
   here for that - align-self away from "stretch" already shrinks it). */
.mv-vs-container .qty-stepper {
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.mv-vs-container .qty-stepper button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	line-height: 1;
}

.mv-vs-container .qty-stepper .mv-qty-value {
	min-width: 1.6em;
	text-align: center;
}