/* Mark Vence - Cart Panel widget (mv_cart_panel), BP-41.
 * STRUCTURE ONLY (display / flex / grid / position / overflow / resets).
 * Every colour, font, size and spacing comes from the widget's Elementor
 * controls (generated post-<id>.css) or from kit tokens (D-54). Anchored on
 * our own .mv-cart* classes only. */

.mv-cart {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	font-variant-numeric: tabular-nums;
}

.mv-cart [hidden] {
	display: none !important;
}

/* ---- header ---- */
.mv-cart__head {
	flex: none;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Header/content hairline: OFF by default, one site-wide switch (D-52 (2)):
	   kit token --mv-sheet-hairline (0px unless the kit turns it on). */
	border-bottom-style: solid;
	border-bottom-width: var(--mv-sheet-hairline, 0px);
}

.mv-cart__title {
	margin: 0;
	padding: 0;
}

.mv-cart__close {
	margin-inline-start: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ---- Theme button reset (BP-41 LIVE-DEFECTS D1, 2.0.3) -------------
   Live, this file loads BEFORE Hello's reset.css and Elementor's
   frontend.css, whose `[type=button]` / `button` (0,1,0) and
   `[type=button]:hover|:focus` (0,2,0) rules gave our buttons the theme's accent
   border, padding, radius and an accent background on hover/focus. Two-class
   selectors (0,2,0) and (0,3,0) with the state win on specificity, whatever
   the load order. Only reset keywords here (transparent / none / 0); every
   real colour and size stays a widget control. */
.mv-cart .mv-cart__close,
.mv-cart .mv-cart__close:hover,
.mv-cart .mv-cart__close:focus,
.mv-cart .mv-cart__close:focus-visible,
.mv-cart .mv-cart__close:active,
.mv-cart .mv-cart__qty-btn,
.mv-cart .mv-cart__qty-btn:hover,
.mv-cart .mv-cart__qty-btn:focus,
.mv-cart .mv-cart__qty-btn:focus-visible,
.mv-cart .mv-cart__qty-btn:active,
.mv-cart .mv-cart__remove,
.mv-cart .mv-cart__remove:hover,
.mv-cart .mv-cart__remove:focus,
.mv-cart .mv-cart__remove:focus-visible,
.mv-cart .mv-cart__remove:active {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	/* 2.1.0 (G4A, D-87): the kit Buttons tab paints every <button> -
	   `.elementor-kit-6 button` (0,1,1), hover/focus (0,2,1). It can also set
	   type, min sizes and a transition; reset those too. Real sizes/fonts are
	   widget controls at (0,4,0) and still win over this reset. */
	font-family: inherit;
	font-style: normal;
	text-transform: none;
	word-spacing: normal;
	min-width: 0;
	transition: none;
}

/* X and stepper: their box = the target-size control, never a kit min-height. */
.mv-cart .mv-cart__close,
.mv-cart .mv-cart__close:hover,
.mv-cart .mv-cart__close:focus,
.mv-cart .mv-cart__close:active,
.mv-cart .mv-cart__qty-btn,
.mv-cart .mv-cart__qty-btn:hover,
.mv-cart .mv-cart__qty-btn:focus,
.mv-cart .mv-cart__qty-btn:active {
	min-height: 0;
	line-height: 1;
}

/* "הסרה" keeps its underline in every state (a kit text-decoration would
   otherwise win on :hover at (0,2,1)). */
.mv-cart .mv-cart__remove:hover,
.mv-cart .mv-cart__remove:focus,
.mv-cart .mv-cart__remove:active {
	text-decoration-line: underline;
}

/* X and stepper: no padding at all (their box = the target-size control). */
.mv-cart .mv-cart__close,
.mv-cart .mv-cart__close:hover,
.mv-cart .mv-cart__close:focus,
.mv-cart .mv-cart__close:active,
.mv-cart .mv-cart__qty-btn,
.mv-cart .mv-cart__qty-btn:hover,
.mv-cart .mv-cart__qty-btn:focus,
.mv-cart .mv-cart__qty-btn:active {
	padding: 0;
}

/* "הסרה": block padding reset only; inline padding = widget control. */
.mv-cart .mv-cart__remove,
.mv-cart .mv-cart__remove:hover,
.mv-cart .mv-cart__remove:focus,
.mv-cart .mv-cart__remove:active {
	padding-top: 0;
	padding-bottom: 0;
}

.mv-cart__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mv-cart__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- scroll area: the only scrolling part (§14.4 (10)) ---- */
.mv-cart__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mv-cart__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- row ---- */
.mv-cart__item {
	display: grid;
	align-items: stretch;
	box-sizing: border-box;
	border-bottom-style: solid;
	margin: 0;
}

.mv-cart__thumb {
	grid-column: 1;
	grid-row: 1;
	overflow: hidden;
}

/* Two classes + element (0,2,1) beat `.elementor img` / `.woocommerce img`
   (0,1,1, height:auto) that load after this file live (LIVE-DEFECTS D2). */
.mv-cart .mv-cart__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
}

.mv-cart__info {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mv-cart__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.mv-cart .mv-cart__name {
	min-width: 0;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mv-cart__price {
	flex: none;
	white-space: nowrap;
}

.mv-cart__variant {
	margin: 0;
}

.mv-cart__actions {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mv-cart__qty {
	display: inline-flex;
	align-items: center;
}

.mv-cart__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.mv-cart__qty-btn[aria-disabled="true"] {
	cursor: default;
}

/* 2.1.0 (D-88 "stepper as in the quick view"): gentle zoom of the ICON only on
   hover - the 24px target and its focus ring stay put. Factor = widget control
   "הגדלת אייקון בריחוף" (--mv-qty-hover-scale); unset -> invalid -> no transform.
   Not on a disabled step. Reduced motion: no rule applies. */
@media (prefers-reduced-motion: no-preference) {
	.mv-cart .mv-cart__qty-btn .mv-cart__icon {
		transition: transform 150ms var(--mv-ease, ease-out);
	}

	.mv-cart .mv-cart__qty-btn:not([aria-disabled="true"]):hover .mv-cart__icon {
		transform: scale(var(--mv-qty-hover-scale));
	}
}

.mv-cart__qty-value {
	text-align: center;
}

.mv-cart .mv-cart__remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	text-decoration-line: underline;
}

/* 2.1.1 (manager review, a11y): "הסרה" looks like the D-88 text link but its
   hit area is >= 44x44 (as the close X), centred on the link, without moving
   anything: an absolutely positioned ::before. The focus ring (outline-style
   solid) still draws around the visible link box only. Size = widget control
   "שטח לחיצה (בלתי נראה)" (--mv-cart-hit). */
.mv-cart .mv-cart__remove::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, var(--mv-cart-hit, 44px));
	height: max(100%, var(--mv-cart-hit, 44px));
	transform: translate(-50%, -50%);
}

.mv-cart__error {
	grid-column: 1 / -1;
	margin-bottom: 0;
	border-inline-start-style: solid;
}

/* ---- skeleton: shown while the cart data is unknown ---- */
.mv-cart__item--skeleton .mv-cart__info {
	justify-content: flex-start;
}

.mv-cart__skeleton-block {
	background-color: var(--mv-skeleton-fill);
}

.mv-cart__skeleton-line {
	display: block;
	width: 70%;
}

.mv-cart__skeleton-line--short {
	width: 35%;
}

/* Soft pulse (D-52: option ב), opacity only, 3 runs then holds (WCAG 2.2.2).
   Timing = kit tokens. Static under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.mv-cart__skeleton .mv-cart__skeleton-block {
		animation: mv-cart-pulse var(--mv-skeleton-duration) var(--mv-ease) 0s 3 alternate forwards;
	}
}

@keyframes mv-cart-pulse {
	from { opacity: 1; }
	to { opacity: var(--mv-skeleton-dim); }
}

/* ---- empty ---- */
.mv-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mv-cart__empty-text {
	margin: 0;
}

/* ---- footer: pinned to the bottom (§14.4 (6) column A) ---- */
.mv-cart__foot {
	flex: none;
	display: flex;
	flex-direction: column;
	border-top-style: solid;
	margin-bottom: env(safe-area-inset-bottom, 0);
}

.mv-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.mv-cart .mv-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	border-style: solid;
	text-decoration: none;
	transition-property: color, background-color, border-color;
	transition-timing-function: var(--mv-ease);
}

.mv-cart__checkout[aria-disabled="true"] {
	cursor: default;
}

/* ---- back link "חזרה לקנייה" ----
   Two classes: the kit/theme link reset (a { text-decoration: none }) must
   not win over the underline. */
.mv-cart .mv-cart__back {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	text-decoration-line: underline;
}

.mv-cart__back--foot {
	justify-content: center;
	width: 100%;
}

/* ===== C11 SLOT (A, Lior 2026-10-14): the empty-state copy of the link sits
   in .mv-cart__empty right under the message (start-aligned by the column
   flex above). Spacing = widget controls "בעגלה ריקה". ===== */
.mv-cart__back--empty {
	align-self: flex-start;
}
/* ===== /C11 SLOT ===== */

/* ---- focus ring: style only; colour/width/offset are controls ---- */
.mv-cart a:focus-visible,
.mv-cart button:focus-visible {
	outline-style: solid;
}

/* 2.1.0: our three buttons at (0,3,0), above any kit `button:focus` (0,2,1). */
.mv-cart .mv-cart__close:focus-visible,
.mv-cart .mv-cart__qty-btn:focus-visible,
.mv-cart .mv-cart__remove:focus-visible {
	outline-style: solid;
}

/* Panel opened by a TAP (LIVE-DEFECTS §7, 2.0.4): Pro's programmatic focus on the X
   matches :focus-visible on phones. script.js marks the root .mv-cart--touch-open on
   such opens and removes the mark on the first key press. Style only (outline-style);
   the ring's colour / width / offset stay the widget's focus controls. (0,4,0) beats
   `.mv-cart button:focus-visible` (0,2,1), the only rule that sets outline-style. */
.mv-cart.mv-cart--touch-open .mv-cart__close:focus-visible {
	outline-style: none;
}

/* ---- screen-reader-only live regions ---- */
.mv-cart__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}