/* Mark Vence - Quick View widgets (QV 2.1.0, BP-05 stage 2a): mv_qv_short_description +
   mv_qv_add_to_cart. Structure only: every colour / font / size comes from the widget
   controls ({{WRAPPER}} rules in post-962.css). The fallbacks below are kit globals
   (F66: until Lior saves the globe pick in __globals__). Theme resets (Hello reset.css
   button / [type=submit] rules, specificity up to 0,2,0) are out-ranked by anchoring every
   button rule on the widget root class (0,2,0 + state). */

/* ---------- Short description: N-line cut + inline toggle (2.1.1) ----------
   qv-widgets.js cuts the text to the longest prefix that fits N lines together with "…"
   and the toggle, which sits INLINE after it in the normal flow - nothing is ever painted
   under it. __full keeps the complete text for screen readers (visually hidden while cut);
   __clip is the aria-hidden visual copy. */
.mv-qv-desc {
	--mv-qv-desc-lines: 2;
	position: relative;
}

.mv-qv-desc .mv-qv-desc__text {
	margin: 0;
	color: var(--e-global-color-5e183c4, var(--e-global-color-text));
}

/* Until qv-widgets.js has measured (or without JS): a plain clamp, the toggle stays hidden. */
.mv-qv-desc:not(.mv-qv-desc--js):not(.is-expanded) .mv-qv-desc__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mv-qv-desc-lines);
	line-clamp: var(--mv-qv-desc-lines);
	overflow: hidden;
}

.mv-qv-desc .mv-qv-desc__clip {
	display: none;
}

.mv-qv-desc.is-clipped:not(.is-expanded) .mv-qv-desc__clip {
	display: inline;
}

.mv-qv-desc.is-clipped:not(.is-expanded) .mv-qv-desc__full {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mv-qv-desc.is-expanded .mv-qv-desc__text {
	color: var(--e-global-color-primary);
}

.mv-qv-desc .mv-qv-desc__toggle,
.mv-qv-desc .mv-qv-desc__toggle:hover,
.mv-qv-desc .mv-qv-desc__toggle:focus {
	-webkit-appearance: none;
	appearance: none;
	display: inline;
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: var(--mv-qv-desc-link, var(--e-global-color-primary));
	font: inherit;
	line-height: inherit;
	text-decoration-line: var(--mv-qv-desc-underline, underline);
	vertical-align: baseline;
	white-space: nowrap;
	cursor: pointer;
}

.mv-qv-desc .mv-qv-desc__toggle:hover,
.mv-qv-desc .mv-qv-desc__toggle:focus {
	color: var(--mv-qv-desc-link-hover, var(--mv-qv-desc-link, var(--e-global-color-primary)));
}

.mv-qv-desc .mv-qv-desc__toggle[hidden] {
	display: none;
}

.mv-qv-desc .mv-qv-desc__toggle:focus:not(:focus-visible) {
	outline: none;
}

.mv-qv-desc .mv-qv-desc__toggle:focus-visible {
	outline-style: solid;
	outline-color: var(--e-global-color-primary);
}

/* ---------- Add to cart ---------- */
/* WooCommerce / theme give form.cart a margin-bottom (32px seen in the editor); spacing
   between widgets belongs to the Elementor container gap only. !important on purpose: the
   form is ours, no control sets its margin, and an ID-anchored legacy Woo rule
   (#content div.product form.cart) would out-rank any class-only selector. */
.mv-qv-atc form.cart.mv-qv-cart {
	display: flex;
	margin: 0 !important;
}

.mv-qv-atc .mv-qv-atc__button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	box-shadow: none;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition-property: color, background-color, border-color;
	color: var(--mv-qv-atc-color, var(--e-global-color-ac30764));
	background-color: var(--mv-qv-atc-bg, var(--e-global-color-primary));
	border-color: var(--mv-qv-atc-border, var(--mv-qv-atc-bg, var(--e-global-color-primary)));
}

.mv-qv-atc .mv-qv-atc__button:hover {
	color: var(--mv-qv-atc-hover-color, var(--mv-qv-atc-color, var(--e-global-color-ac30764)));
	background-color: var(--mv-qv-atc-hover-bg, var(--mv-qv-atc-bg, var(--e-global-color-primary)));
	border-color: var(--mv-qv-atc-hover-border, var(--mv-qv-atc-border, var(--mv-qv-atc-bg, var(--e-global-color-primary))));
}

.mv-qv-atc .mv-qv-atc__button:focus {
	outline: none;
}

.mv-qv-atc .mv-qv-atc__button:focus-visible {
	color: var(--mv-qv-atc-focus-color, var(--mv-qv-atc-color, var(--e-global-color-ac30764)));
	background-color: var(--mv-qv-atc-focus-bg, var(--mv-qv-atc-bg, var(--e-global-color-primary)));
	border-color: var(--mv-qv-atc-focus-border, var(--mv-qv-atc-border, var(--mv-qv-atc-bg, var(--e-global-color-primary))));
	outline-style: solid;
	outline-color: var(--e-global-color-primary);
}

/* 2.2.0 (D-87 13.2, Lior 2026-10-19/20 - SUPERSEDES the D-79 "always looks normal"):
   the button that cannot act yet LOOKS not yet active. Live that is
   [data-mv-qv-blocked] (popup.js: 'size' | 'loading' | 'color' | 'soldout' - the
   button itself is never disabled, a click moves focus to the sizes); .disabled /
   aria-disabled="true" = the editor preview ("תצוגה בעורך: לא זמין").
   Colours = the widget's "לא זמין" tab; empty = Navy 65% (kit global b5a1c65,
   #68707F) with the Bone label (4.66:1), hover = Navy 75% (b5a1c75, #4F5A6C, 6.53:1).
   No opacity. After :hover / :focus-visible on purpose: same (0,3,0), later wins,
   so a focused blocked button keeps the not-active colours (the ring still draws). */
.mv-qv-atc .mv-qv-atc__button[data-mv-qv-blocked],
.mv-qv-atc .mv-qv-atc__button.disabled,
.mv-qv-atc .mv-qv-atc__button[aria-disabled="true"] {
	color: var(--mv-qv-atc-disabled-color, var(--e-global-color-ac30764, #FAF7F2));
	background-color: var(--mv-qv-atc-disabled-bg, var(--e-global-color-b5a1c65, #68707F));
	border-color: var(--mv-qv-atc-disabled-border, var(--mv-qv-atc-disabled-bg, var(--e-global-color-b5a1c65, #68707F)));
}

.mv-qv-atc .mv-qv-atc__button[data-mv-qv-blocked]:hover,
.mv-qv-atc .mv-qv-atc__button.disabled:hover,
.mv-qv-atc .mv-qv-atc__button[aria-disabled="true"]:hover {
	color: var(--mv-qv-atc-disabled-hover-color, var(--mv-qv-atc-disabled-color, var(--e-global-color-ac30764, #FAF7F2)));
	background-color: var(--mv-qv-atc-disabled-hover-bg, var(--e-global-color-b5a1c75, #4F5A6C));
	border-color: var(--mv-qv-atc-disabled-hover-border, var(--mv-qv-atc-disabled-hover-bg, var(--e-global-color-b5a1c75, #4F5A6C)));
}

.mv-qv-atc .mv-qv-atc__button.loading {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.mv-qv-atc .mv-qv-atc__button {
		transition: none;
	}
}