/* 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. */

/* REMOVED 2.27.6 (PLAN F-4(a), D-53): the element-ID rule that hid the PDP
   Add to Cart widget's native <div class="quantity">. PDP 143 now hides it
   natively (a3bd8b5 Style > Quantity = Hide, Pro's own CSS); the native
   input.qty stays in the form, so the .qty-stepper below still drives it. */

/* 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;
}

/* ADDED 2.25.0 (BP-05b): .mv-qty-icon exists only when "Icon Source" =
   brand (the inline SVG) or "Icon Hover Zoom" is set (the glyph's span) -
   a default stepper has neither, so none of this reaches it.
   1em = structural fallback until "Icon Size" is set (tracks the stepper's
   font size, like the glyph it replaces). */
.mv-vs-container .qty-stepper .mv-qty-icon {
	display: inline-block;
	vertical-align: middle;
}

.mv-vs-container .qty-stepper svg.mv-qty-icon {
	width: 1em;
	height: 1em;
}

/* Hover zoom: scale the icon, not the button (click area + focus ring stay).
   --mv-qty-hover-scale comes only from the "Icon Hover Zoom" control; unset,
   scale(var()) is invalid at computed time -> transform: none. No colour
   change here (Lior 2026-10-17). Reduced motion: neither rule applies. */
@media (prefers-reduced-motion: no-preference) {
	.mv-vs-container .qty-stepper .mv-qty-icon {
		transition: transform 150ms ease-out;
	}

	.mv-vs-container .qty-stepper .mv-qty-step:hover .mv-qty-icon {
		transform: scale(var(--mv-qty-hover-scale));
	}
}

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

/* ADDED 2026-10-12 (U-13 / F47, D-40) - in-page "choose a size" message that
   replaces WooCommerce's window.alert() (script.js onDisabledAddToCartClick).
   Colour/typography are Style-tab controls ("Selection Message"); these are
   only the resting fallbacks, on the kit's primary token (#16233D on the
   #FAF7F2 page = ~14:1, passes 1.4.3 for text and 1.4.11 for the outline).
   Not colour-only (1.4.1): the message is real text, the outline is extra. */
.mv-vs-container .mv-vs-group-msg {
	margin: 0;
	color: var(--e-global-color-primary, #16233D);
	font-size: 14px;
	line-height: 1.4;
}

/* Empty = taken out of the flex flow (no phantom 10px gap) but NOT
   display:none / hidden, so the role="alert" region stays in the
   accessibility tree and the first message written into it is announced. */
.mv-vs-container .mv-vs-group-msg:empty {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 2.28.0 (D-87 13.2, Lior 2026-10-20): an error message ("בחרו מידה" /
   "בחרו צבע", role="alert") is no longer shown on the page - the not-yet-active
   Add to Cart says it on its own label. script.js adds --sr to the region it
   writes; the text stays in the accessibility tree and is announced. Status
   notes (sold out D-75, "loading") never get --sr and stay visible. */
.mv-vs-container .mv-vs-group-msg.mv-vs-group-msg--sr,
.mv-vs-atc-msg.mv-vs-group-msg--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Size row highlight while a size is missing. outline (not border) so the
   buttons do not move - no layout shift at 390 or 1440. */
.mv-vs-container .mv-vs-group--invalid .size-buttons-grid,
.mv-vs-container .mv-vs-group--invalid .color-swatches-grid {
	outline: 1px solid var(--e-global-color-primary, #16233D);
	outline-offset: 4px;
}

/* REMOVED 2.27.5: the U-13 disabled-hover rule (.elementor-widget form.cart
   .single_add_to_cart_button.button.disabled:not(.mv-pdp-atc *):hover). It
   matched nothing: the PDP button sits under .mv-pdp-atc (excluded since
   2.27.3), the Quick View button (mv_qv_add_to_cart) has no .button class and
   is never .disabled live, and the loop card 805 has no cart form. */

/* 2.28.0 (D-87 13.2, Lior 2026-10-19/20 - SUPERSEDES D-79 "always looks
   normal"): the PDP Add to Cart that cannot act yet (WooCommerce .disabled:
   no size, sold out, unavailable) is Navy 65% with the Bone label, and on
   hover darkens to Navy 75% (not all the way). Before a size is chosen its
   label reads "בחר מידה כדי להוסיף לסל" (script.js setAtcLabel). A click
   still moves focus to the sizes and announces (script.js
   onDisabledAddToCartClick; WooCommerce's alert() stays suppressed).
   Native first: Pro's Add To Cart widget has Normal + Hover tabs only, no
   disabled state, so this is the one part done in code - on our own class
   (D-53 (2)). Colours = kit globals b5a1c65 / b5a1c75 (Site Settings >
   Global Colors, editable there); hex = fallback. Bone #FAF7F2 on #68707F =
   4.66:1, on #4F5A6C = 6.53:1 (WCAG 1.4.3 AA).
   Specificity (0,6,1) / hover (0,7,1): beats the widget's Style-tab output
   `.elementor-143 .elementor-element.elementor-element-a3bd8b5 .cart button(:hover)`
   (0,4,1)/(0,5,1), WooCommerce's .disabled opacity and the kit Buttons tab
   (0,1,1)/(0,2,1). QV 962 is not matched (no .mv-pdp-atc). */
.mv-pdp-atc.mv-pdp-atc form.cart .single_add_to_cart_button.button:is(.disabled, [aria-disabled="true"]) {
	opacity: 1;
	cursor: pointer;
	color: var(--e-global-color-ac30764, #FAF7F2);
	background-color: var(--e-global-color-b5a1c65, #68707F);
	border-color: var(--e-global-color-b5a1c65, #68707F);
}

.mv-pdp-atc.mv-pdp-atc form.cart .single_add_to_cart_button.button:is(.disabled, [aria-disabled="true"]):hover {
	color: var(--e-global-color-ac30764, #FAF7F2);
	background-color: var(--e-global-color-b5a1c75, #4F5A6C);
	border-color: var(--e-global-color-b5a1c75, #4F5A6C);
}

/* 2.28.0 (F55 kit shield, D-87). The kit Buttons tab now paints every
   <button>: `.elementor-kit-6 button` (0,1,1) = Navy background, Bone label,
   12/600, radius 0; `:hover` AND `:focus` (0,2,1) = Navy 80% background.
   Our selector buttons must look exactly as before (Lior: "size/variation
   buttons stay exactly as they look today"). Only the properties the kit
   actually changes on them are re-stated, at (0,3,x) - above the kit,
   below the widget's own Style-tab output (0,4,0)+, so every control keeps
   winning. Checked against post-143 / post-962 / loop-805 (2026-10-20):
   - colour swatch: no rule sets its background (woo-filter-sort
     `background:none` is (0,1,0)), so the kit's Navy would fill the swatch
     padding (PDP 1px/2px strip, card 2px ring); the sold-out swatch also
     gets the kit hover/focus fill. Transparent in every state = before.
   - quantity stepper button: `background:none` (0,2,1) ties the kit
     hover/focus rule - order-dependent. Transparent in every state; font
     back to the theme's 1rem/400 (the kit's 12/600 would shrink a text
     glyph; the brand SVG is sized in px either way).
   - size chips: every kit property is already set by the Style-tab
     controls (0,4,0)+ in 143/962 - nothing to shield (card 805 hides sizes). */
.elementor-kit-6 .mv-vs-container .swatch-item-btn {
	background-color: transparent;
}

.elementor-kit-6 .mv-vs-container .qty-stepper button {
	background-color: transparent;
	font-size: 1rem;
	font-weight: 400;
}

/* ADDED 2.27.0 (F114 / D-75), REVISED 2.27.3 (Lior 18.10) - sold-out marks,
   on our own classes only.

   COLOUR swatch: no visual mark at all (Lior 18.10) - no strike, no fade;
   a sold-out colour looks like any other colour and stays a clickable radio
   (gallery + its sizes). Its state reaches the user as (a) the visible
   "אזל מהמלאי" suffix on the selected-colour label (block below), and for
   assistive tech (b) the swatch's sr-only name "<צבע> — אזל מהמלאי" and
   (c) the PDP live region on switch. The shared woo-filter-sort strike
   (.swatch-item-btn.oos::before) and its pointer-events:none / not-allowed
   / opacity are switched off here; the filter widget's own swatches keep
   them. */
.mv-vs-container .swatch-item-btn.oos::before {
	content: none;
}

.mv-vs-container .swatch-item-btn.oos {
	pointer-events: auto;
	cursor: pointer;
	opacity: 1;
}

/* SIZE: a 1px straight horizontal line through the vertical middle of the
   cell, centred, 65% of the cell width (--mv-vs-strike-len) - longer than a
   glyph-only line-through, shorter than the old corner-to-corner diagonal.
   Drawn by ::after (text-decoration stays off - never a double line).
   Colour: --mv-vs-strike-color; default = the muted token 5e183c4, and where
   color-mix() is supported (@supports below) Navy (text token) at 55%.
   2.27.5: that default is declared on .mv-vs-container (inherited), not on
   the ::after, so the Style-tab "Sold-out Size Line Color" control (on the
   button) can override it.
   Sizes are disabled controls (aria-disabled) - 1.4.11 exempt; the name
   carries the suffix. The Style-tab "Strike-through" control sets
   --mv-vs-oos-strike (block | none) on the button - unset = block. */
.mv-vs-container .size-item-btn.oos {
	position: relative;
	text-decoration: none;
}

.mv-vs-container .size-item-btn.oos::after {
	content: '';
	display: var(--mv-vs-oos-strike, block);
	position: absolute;
	top: 50%;
	left: calc((100% - var(--mv-vs-strike-len, 65%)) / 2);
	width: var(--mv-vs-strike-len, 65%);
	height: var(--mv-vs-strike-w, 1px);
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
	background-color: var(--mv-vs-strike-color, var(--e-global-color-5e183c4, #636976));
}

.mv-vs-container {
	--mv-vs-strike-color: var(--e-global-color-5e183c4, #636976);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.mv-vs-container {
		--mv-vs-strike-color: color-mix(in srgb, var(--e-global-color-text, #16233D) 55%, transparent);
	}
}

/* Selected-colour label suffix (Lior 18.10): "קרם — אזל מהמלאי" while the
   ACTIVE colour is sold out; gone on an in-stock colour. Pure CSS on state
   both renderers already keep (.swatch-item-btn.active.oos - PHP render,
   script.js selectColorSwatch, Quick View popup.js buildColorSwatches), so
   PDP and QV 962 need no JS. Text = data-mv-oos-label on
   .mv-selected-color-name, printed by PHP from the "Sold-out Color Label"
   control (D-54); .text() updates of the name keep the attribute.
   ::after inherits the label's own typography control.
   "/ ''" = empty alt text: hidden from assistive tech (the swatch's sr-only
   name and the live region already say it - no double announcement). The
   first content line is the fallback for browsers without alt-text syntax.
   No :has() support = no visible suffix (AT path unchanged).
   Colour: --mv-vs-oos-label-color (Style-tab control), else muted 5e183c4
   (#636976 on #FFFFFF = 5.6:1, passes 1.4.3 for text). */
.mv-vs-container [data-group="color"]:has(.swatch-item-btn.active.oos) .mv-selected-color-name[data-mv-oos-label]::after {
	content: attr(data-mv-oos-label);
	content: attr(data-mv-oos-label) / '';
	color: var(--mv-vs-oos-label-color, var(--e-global-color-5e183c4, #636976));
}

/* Windows High Contrast / forced colours: keep the size line as a system
   colour instead of losing it. */
@media (forced-colors: active) {
	.mv-vs-container .size-item-btn.oos::after {
		forced-color-adjust: none;
		--mv-vs-strike-color: CanvasText;
	}
}

/* ADDED 2.29.0 (G4B lane A, D-108) - colour limit "+n" (opt-in: Settings >
   Colour Limit). .mv-swatch--overflow and .mv-vs-more are printed only while
   a limit is set and exceeded, so nothing here matches on PDP 143 / Quick View
   962 / filter 845. Per device, Style > "Colour Limit Applies" prints
   --mv-vs-overflow-display / --mv-vs-more-display on the grid (Elementor's own
   breakpoints). The fallbacks = "show all". A display:none swatch is out of
   the tab order and the accessibility tree; the active colour is never one of
   them (PHP). "+n" = plain text: the visible count is aria-hidden, the
   sr-only sentence ("ועוד n צבעים") is what screen readers hear. */
.mv-vs-container .color-swatches-grid .swatch-item-btn.mv-swatch--overflow {
	display: var(--mv-vs-overflow-display, inline-block);
}

.mv-vs-container .color-swatches-grid .mv-vs-more {
	display: var(--mv-vs-more-display, none);
	align-items: center;
	flex: 0 0 auto;
	color: var(--e-global-color-5e183c4, #636976);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ADDED 2.29.0 - reserved empty row (opt-in: Settings > Reserve the Row);
   height = Style > "Reserved Row Height". */
.mv-vs-reserve {
	display: block;
	pointer-events: none;
}

/* ADDED 2.30.0 (G4B lane A fix 1) - "Underline Drawing: Drawn line" (opt-in,
   wrapper class .mv-vs-underline-line from prefix_class; absent on PDP / QV).
   The border-bottom from "Selected Underline Width" stays but is always
   transparent (it still reserves its width: fill + offset unchanged); the
   visible line is this ::after, laid over the border box's bottom strip, so
   a 1.5px line is not snapped to 1px like a border. Inside the button's own
   hit box (bottom 0 of the border box). The widget has no inner wrapper:
   the prefix class sits on the element that holds .mv-vs-container. */
.mv-vs-underline-line .mv-vs-container .color-swatches-grid .swatch-item-btn {
	position: relative;
	border-bottom-color: transparent !important;
}

.mv-vs-underline-line .mv-vs-container .color-swatches-grid .swatch-item-btn::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: calc(-1 * var(--mv-vs-underline-w, 1.5px));
	height: var(--mv-vs-underline-w, 1.5px);
	background-color: transparent;
	pointer-events: none;
}

.mv-vs-underline-line .mv-vs-container .color-swatches-grid .swatch-item-btn.active::after,
.mv-vs-underline-line .mv-vs-container .color-swatches-grid .swatch-item-btn:not(.oos):hover::after {
	background-color: var(--mv-vs-swatch-underline, var(--e-global-color-primary, #16233D));
}

@media (forced-colors: active) {
	.mv-vs-underline-line .mv-vs-container .color-swatches-grid .swatch-item-btn.active::after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}