/* Everything this widget renders is position:absolute, so it has no
   in-flow content of its own to size itself by - without this rule, the
   widget's auto-generated Elementor wrapper collapses to 0 width/height
   (confirmed live: .mv-qvt-bar computed to width:0px on the real site,
   despite rendering fine in the editor). Claiming the position directly
   on Elementor's own per-instance wrapper class - not an inner div -
   makes this work regardless of exactly where the widget is dropped,
   as long as its direct parent (the image/media container) is itself
   position:relative - already true, it's the same container the old eye
   icon positioned against. */
.elementor-widget-mv_quick_view_trigger {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mv-qvt-wrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ---------- Desktop size bar (hover-revealed) ---------- */
.mv-qvt-bar-trigger {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

/* Reveal is driven by the CARD's own hover state (same container pattern
   already proven on the old eye icon), not this widget's own wrapper -
   .mv-qvt-wrap sits at inset:0 with pointer-events:none so it never blocks
   the card's other hover-driven effects (e.g. the second-image swap). */
[data-elementor-type="loop-item"]:hover .mv-qvt-bar-trigger {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* 2.1.3 (F87, WCAG 2.4.7): keyboard focus on a chip reveals the bar too - it sat at
   opacity 0 while a sighted keyboard user tabbed through it. :has(:focus-visible), not
   :focus-within: a mouse click focuses the chip without :focus-visible, so the bar does
   not stay stuck open after the pointer leaves; .mv-focus-pointer = focus returned by the
   popup adapter after a mouse/touch close (same exclusion as the ring). Its own rule: an
   engine without :has() drops only this rule, never the hover rule above. */
.mv-qvt-bar-trigger:has(.mv-qvt-chip:focus-visible:not(.mv-focus-pointer)) {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* F87 part 2 - paint order. opacity 1 alone is NOT enough: the card gallery's hover-swap
   poster (.mv-gc-hover-cover, mark-vence-gallery-carousel/style.css: z-index 2, opacity 1
   at rest, pointer-events none) sits in the same stacking context as this widget, whose
   own Advanced > Z-Index is also 2 (card 805, element 0c05876) - and the gallery comes
   later in the DOM, so it paints OVER the bar. Hover never showed it because the poster
   fades out on hover. While a control inside this widget has keyboard focus, lift the
   widget one level. (0,5,0) beats Elementor's per-instance z-index rule (0,3,0). Covers
   the desktop no-sizes "+" icon too. */
[data-elementor-type="loop-item"] .elementor-element.elementor-widget-mv_quick_view_trigger:has(:focus-visible:not(.mv-focus-pointer)) {
	z-index: 3;
}

/* Engines without :has() (Safari < 15.4, Firefox < 121): :focus-within - a mouse click
   there can leave the bar open until focus moves on (visible, never hidden). */
@supports not selector(:has(*)) {
	.mv-qvt-bar-trigger:focus-within {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	[data-elementor-type="loop-item"] .elementor-element.elementor-widget-mv_quick_view_trigger:focus-within {
		z-index: 3;
	}
}

.mv-qvt-bar {
	direction: ltr; /* sizes are Latin (S/M/L/XL) - always left-to-right, independent of page direction */
	width: 100%;
	display: flex;
	align-items: stretch;
	background: rgba(250, 247, 242, 0.88);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-top: none; /* sides + bottom only, per spec - seam stays open into the photo above */
	border-color: rgba(22, 35, 61, 0.16);
}

.mv-qvt-chip {
	all: unset;
	box-sizing: border-box;
	position: relative;
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 4px;
	font-size: 12.5px;
	letter-spacing: 0.03em;
	color: #16233D;
	cursor: pointer;
	text-align: center;
	transition: background 0.12s ease, color 0.12s ease;
}

/* .mv-qvt-dividers-yes is Elementor's own prefix_class, applied to the
   WIDGET's outer wrapper (an ancestor of .mv-qvt-bar, not this element
   itself) - see the "Dividers Between Chips" switcher control. */
.mv-qvt-dividers-yes .mv-qvt-chip + .mv-qvt-chip {
	border-inline-start: 1px solid rgba(22, 35, 61, 0.12);
}

/* 2.2.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. `all: unset` above is only
   (0,1,0), so without this the chips turned into the "empty Navy bar" Lior was shown
   13.10 (F55). Re-states only what the kit changes on a chip, at (0,3,0): above the
   kit in every state (incl. the mouse-focus the kit treats as hover), below the
   widget's Style-tab output (0,4,0)+ (card 805 sets colour / font / padding-block /
   hover there) so every control keeps winning. Values = this file's own defaults.
   Must stay BEFORE the hover rule below (same (0,3,0), later wins). */
.elementor-kit-6 .mv-qvt-bar .mv-qvt-chip {
	background-color: transparent;
	color: #16233D;
	font-size: 12.5px;
	font-weight: inherit;
}

/* 2.1.0: .mv-focus-pointer = focus returned by the popup adapter after a mouse /
   touch close (mvPopup.returnFocus ring:'keyboard') - no ring then; a keyboard
   close keeps it (WCAG 2.4.7).
   2.2.0 (F55): hover anchored on .mv-qvt-bar (0,3,0) - the bare (0,2,0) lost to the
   kit's hover (0,2,1) whenever the widget's Hover controls are empty. */
.mv-qvt-bar .mv-qvt-chip:hover,
.mv-qvt-chip:focus-visible:not(.mv-focus-pointer) {
	background: #16233D;
	color: #FAF7F2;
}

/* 2.1.3 (F96): the keyboard-focused chip got the Navy fill above but kept the Navy
   label: the widget's own "Text Color" control prints
   `.elementor-805 .elementor-element.elementor-element-<id> .mv-qvt-chip {color}` (0,4,0),
   which out-ranks the (0,3,0) rule above, while nothing competes for the background.
   Fallback at (0,5,0) = the hover defaults; the widget's Hover controls (2.1.3: their
   selectors also cover :focus-visible, (0,6,0)) override it once the card's Elementor
   CSS is regenerated. The site ring (focus.css, 2px Navy offset 2) still draws around it. */
.elementor-widget-mv_quick_view_trigger .mv-qvt-bar .mv-qvt-chip:focus-visible:not(.mv-focus-pointer) {
	background-color: #16233D;
	color: #FAF7F2;
}

/* 2.1.6 (PDP-FIX card chips, Lior 18.10): the sold-out size line = the PDP's
   (VS 2.27.3 .size-item-btn.oos::after): straight, horizontal, centred, 1px,
   Navy 55%. Length 21px = the PDP line's rendered length (65% of its 32px chip,
   measured 20.8px 2026-10-18) - not 65% of THIS chip: the card chip is ~136px
   wide, 65% would be an ~89px rule across the whole cell. Drawn on ::before, NOT ::after: until post 805's
   Elementor CSS is regenerated, the widget's old control CSS
   (`{{WRAPPER}} .mv-qvt-chip.oos::after {width:1px;height:78%}`, (0,4,1)) still
   prints and out-ranks this file - with ::after left without `content` that stale
   rule draws nothing. The controls now set the custom properties below.
   Hover / keyboard focus (Navy fill, label #FAF7F2) turns the line softened
   white: rgba(255,255,255,0.8) on #16233D = 10.4:1. */
.mv-qvt-chip.oos::before {
	--mv-qvt-strike-default: var(--e-global-color-5e183c4, #636976);
	content: "";
	position: absolute;
	top: 50%;
	left: calc((100% - var(--mv-qvt-strike-len, 21px)) / 2);
	width: var(--mv-qvt-strike-len, 21px);
	height: var(--mv-qvt-strike-w, 1px);
	transform: translateY(-50%);
	pointer-events: none;
	background-color: var(--mv-qvt-strike-color, var(--mv-qvt-strike-default));
}

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

.mv-qvt-chip.oos:hover::before,
.mv-qvt-chip.oos:focus-visible:not(.mv-focus-pointer)::before {
	background-color: var(--mv-qvt-strike-hover-color, rgba(255, 255, 255, 0.8));
}

@media (forced-colors: active) {
	.mv-qvt-chip.oos::before,
	.mv-qvt-chip.oos:hover::before,
	.mv-qvt-chip.oos:focus-visible:not(.mv-focus-pointer)::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* ---------- Mobile / tablet "+" icon ---------- */
/* No hover on touch devices - the bar is undiscoverable there, so this
   breakpoint always shows the icon instead. Matches the existing eye-icon
   convention's own breakpoint (mark-vence-gallery-carousel), not a new
   value - tablet and phone get identical treatment. */
.mv-qvt-mobile-icon {
	display: none;
}

@media (max-width: 1024px) {
	.mv-qvt-bar-trigger {
		display: none;
	}

	.mv-qvt-mobile-icon {
		all: unset;
		box-sizing: border-box;
		position: absolute;
		left: 14px;
		bottom: 14px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #16233D;
		color: #FAF7F2;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		pointer-events: auto;
	}

	/* 2.1.0: the touch-size "+" had no keyboard ring at all (all: unset). Same
	   ring as the desktop no-sizes icon below; none after a pointer return. */
	.mv-qvt-mobile-icon:focus-visible:not(.mv-focus-pointer) {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.mv-qvt-mobile-icon i,
	.mv-qvt-mobile-icon svg {
		font-size: 18px;
		width: 18px;
		height: 18px;
		color: inherit;
		fill: currentColor;
	}
}

/* 2.2.0 (F55 kit shield): the "+" icon's own defaults above are (0,1,0)/(0,2,0); the
   kit's hover/focus (0,2,1) would lighten it to Navy 80% on hover whenever the widget's
   background control is empty. Re-stated at (0,3,0); the Style-tab controls (0,4,0)
   still win. Same values as above = no visible change. */
.elementor-kit-6 .mv-qvt-wrap .mv-qvt-mobile-icon {
	background-color: #16233D;
	color: #FAF7F2;
}

/* Stale bar (2.0.0 review fix, trigger.js STALE CARD): the card's color just
   changed and its chips still describe the previous color - they are
   disabled until the refresh lands. */
.mv-qvt-wrap--stale .mv-qvt-chip {
	cursor: progress;
}

/* ---------- Products without sizes (2.0.0) ---------- */
/* Simple (S) and color-only (VC) products have no size bar, so the "+" icon
   is their Quick View entry on desktop too. Same look as the mobile icon
   (all colors/size/position still come from the widget's Style-tab
   controls, which out-rank these selectors); revealed with the card's own
   hover like the size bar, and on keyboard focus. Mobile/tablet keep the
   always-visible icon from the media query above.
   KNOWN GAP (left for the design phase, review 2026-10-11): a touch device
   wider than 1024px (large tablet in landscape) has no hover, so this
   hover-only icon is hard to discover there - the same gap the desktop
   size bar already has. A (hover: none) variant would close it. */
@media (min-width: 1025px) {
	.mv-qvt-wrap--no-sizes .mv-qvt-mobile-icon {
		all: unset;
		box-sizing: border-box;
		position: absolute;
		left: 14px;
		bottom: 14px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #16233D;
		color: #FAF7F2;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.18s ease;
	}

	[data-elementor-type="loop-item"]:hover .mv-qvt-wrap--no-sizes .mv-qvt-mobile-icon,
	.mv-qvt-wrap--no-sizes .mv-qvt-mobile-icon:focus-visible,
	.mv-qvt-wrap--no-sizes .mv-qvt-mobile-icon:focus {
		opacity: 1;
		pointer-events: auto;
	}

	.mv-qvt-wrap--no-sizes .mv-qvt-mobile-icon:focus-visible:not(.mv-focus-pointer) {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.mv-qvt-wrap--no-sizes .mv-qvt-mobile-icon i,
	.mv-qvt-wrap--no-sizes .mv-qvt-mobile-icon svg {
		font-size: 18px;
		width: 18px;
		height: 18px;
		color: inherit;
		fill: currentColor;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-qvt-bar-trigger,
	.mv-qvt-wrap--no-sizes .mv-qvt-mobile-icon {
		transition: none;
	}
}

/* ---------- 2.3.0 (G4B lane A): inline "+" in the card's text row ----------
   Opt-in: trigger_mode = inline adds .mv-qvt-mode-inline to the widget
   wrapper (prefix_class) and render_inline() prints .mv-qvt-wrap--inline.
   Without it nothing below matches - the overlay mode above is untouched.
   Every number is a widget control (Style > Inline "+" Icon) that prints the
   custom properties on .mv-qvt-wrap--inline; the var() fallbacks equal those
   defaults and only matter if the post CSS is missing. */

/* (0,2,0) beats the overlay rule `.elementor-widget-mv_quick_view_trigger`
   (0,1,0): back in the flow as a flex item of the text row. z-index 1 keeps
   the hit area that hangs below the row (into the price row) above the
   later-painted price widget (both are position:relative). */
.elementor-widget-mv_quick_view_trigger.mv-qvt-mode-inline {
	position: relative;
	inset: auto;
	pointer-events: auto;
	z-index: 1;
	flex: 0 0 auto;
}

.mv-qvt-wrap.mv-qvt-wrap--inline {
	position: static;
	inset: auto;
	pointer-events: auto;
}

/* The button = the hit area: --mv-qvt-hit square, starting --mv-qvt-hit-above
   above the row (the image->name gap: it ends at the image bottom) and flush
   with the card's inline-end edge (the row has no inline-end padding). The
   negative block margins leave a margin box exactly --mv-qvt-row-h tall, so
   the 44px box never makes the row taller than the name line.
   (0,3,0): above the kit `.elementor-kit-6 button` (0,1,1) and its
   :hover/:focus (0,2,1) - no Navy fill, no Bone label - and below the widget's
   Style-tab colour controls (0,4,0)+. Hello's reset is layered (child theme
   focus.css header) and loses to any unlayered rule. No `all: unset`: the
   site ring (focus.css, :focus-visible 2px Navy offset 2) keeps applying. */
.mv-qvt-wrap.mv-qvt-wrap--inline .mv-qvt-inline {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: relative;
	display: block;
	width: var(--mv-qvt-hit, 44px);
	height: var(--mv-qvt-hit, 44px);
	min-width: 0;
	min-height: 0;
	margin: 0;
	margin-block-start: calc(-1 * var(--mv-qvt-hit-above, 16px));
	margin-block-end: calc(var(--mv-qvt-row-h, 16px) + var(--mv-qvt-hit-above, 16px) - var(--mv-qvt-hit, 44px));
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--e-global-color-primary, #16233D);
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* The cross: plus.svg's viewBox is 24 with a 12-unit cross (6..18), so the svg
   box is twice the visible size. Positioned by the cross's own edge (box edge
   + size/2) at --mv-qvt-icon-end from the card edge, centred on the row's
   middle + --mv-qvt-icon-shift. Stroke in screen px (non-scaling). */
.mv-qvt-wrap--inline .mv-qvt-inline__icon {
	position: absolute;
	width: calc(2 * var(--mv-qvt-icon, 12px));
	height: calc(2 * var(--mv-qvt-icon, 12px));
	inset-inline-end: calc(var(--mv-qvt-icon-end, 16px) - var(--mv-qvt-icon, 12px) / 2);
	top: calc(var(--mv-qvt-hit-above, 16px) + var(--mv-qvt-row-h, 16px) / 2 + var(--mv-qvt-icon-shift, 0.4px) - var(--mv-qvt-icon, 12px));
	pointer-events: none;
	overflow: visible;
	stroke: currentColor;
	fill: none;
}

.mv-qvt-wrap--inline .mv-qvt-inline__icon line {
	stroke-width: var(--mv-qvt-stroke, 1.5px);
	vector-effect: non-scaling-stroke;
}

@media (forced-colors: active) {
	.mv-qvt-wrap--inline .mv-qvt-inline__icon {
		stroke: ButtonText;
	}
}