/* =====================================================================
 * Mark Vence - PDP widgets 1.8.1 - product page (template 143) styles.
 * Loaded only on single product pages (is_product()) and in the editor preview.
 * D-53 (2): every selector is anchored on OUR classes, which are set natively in
 * Advanced -> CSS Classes: .mv-acc (Nested Accordion eb480c0), .mv-pdp-more (related
 * Loop Carousel) and .mv-pdp-look ("השלימו את הלוק" Loop Carousel). Inside the accordion we
 * touch only the native <details>/<summary> the widget renders, plus the widget's own icon
 * span for the chevron. Anything a native control can set is NOT in this file.
 * §1 (sticky buy panel, D-73) was removed in 1.3.0: the info column is static (Lior 18.10,
 * option "b+"). 1.4.0: the class mv-pdp-info is removed from 5d117f4 (nothing targeted it).
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 2. Details accordion (D-74; ACCORDION_SPEC.md §6.7 / §3.5, "Custom CSS" column only).
 * Not here, because native controls set them: title type and colours (normal #636976,
 * hover/active Navy per D-74), the top divider of each row, summary padding, icon files,
 * size and colour, panel padding, the 300ms duration, single-open, all collapsed.
 * Cursor: already `cursor: pointer` in the widget's own CSS, so no rule is needed.
 * Focus ring: the child theme's `:focus-visible:not(.mv-focus-pointer)` (0,2,0, 2px
 * Navy, offset 2) already reaches <summary>, so there is no rule here.
 * --------------------------------------------------------------------- */

/* 2a. Row min-height 48 (§1 #17). (0,1,2); the widget sets no min-height. */
.mv-acc details > summary {
	min-height: 48px;
}

/* 2a'. Title type 12 / 400 / 18px / ls 0 (§1 #22). With title_tag = h2 the widget prints
   <span class="e-n-accordion-item-title-header"><h2 class="e-n-accordion-item-title-text">
   (nested-accordion.php render), and the kit's `.elementor-kit-6 h2` (0,1,1: 600, lh 1.25,
   plus 26/22px at the breakpoints) beats the native title typography, which is a
   (0,1,0) :where() rule (family/weight/line-height). Font-size there is a var on
   `.elementor-widget-n-accordion .e-n-accordion-item-title-text` (0,2,0). (0,2,2) beats
   all three. Colour is left to the native colour controls: the kit h2 sets none, so the h2
   inherits the summary's native colour. NOTE: these four values now override the native
   title typography control, so change them here, not in the editor. */
.mv-acc details > summary .e-n-accordion-item-title-text {
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0;
}

/* 2b. Divider under the last row (§3.5): drawn on the widget wrapper, so it stays at the
   bottom of the group whichever rows are hidden by 2f. (0,1,0). A native Advanced ->
   Border on the widget (0,3,0) would override it on purpose (native first).
   1.8.0 (D-112, A-22): kit global b5a1ce6 "Divider" #ECEAE6, the same global the row lines
   use natively (eb480c0 accordion_border_normal_color). Not 2ac7144 #CBC8C3: that one stays
   for the footer line (D-96) and the gallery dots. */
.mv-acc {
	border-bottom: 1px solid var(--e-global-color-b5a1ce6, #ECEAE6);
}

/* 2c. No line under an open title (§6.4). The native title border (Normal (0,6,0) /
   Active (0,7,0), element-ID anchored) must stay "top 1px, others 0". !important is
   the only D-53-clean way to outrank an ID-anchored rule, and it is limited to the
   bottom width of an OPEN title. */
.mv-acc details[open] > summary {
	border-bottom-width: 0 !important;
}

/* The panel's own top edge. The widget's default is a 1px #d5d8dc border all round the
   panel ((0,0,0) :where), and the native Content -> Border control is (0,1,0) :where.
   (0,2,2) wins over both for the TOP edge only; sides and bottom stay native. */
.mv-acc details[open] > :not(summary) {
	border-top-width: 0;
}

/* 2d. Chevron (manager 18.10; replaces the 1.2.0 plus/minus crossfade). One mechanism:
   the native glyphs (.e-opened / .e-closed) are hidden and the icon span draws the brand
   chevron (Branding/Icons/chevron-down.svg: path M6 9l6 6 6-6, stroke 1.5, round caps and
   joins) as a CSS mask on its ::before. Down when closed, rotated 180deg (up) when open.
   - Hide: the widget switches the glyphs with display (0,4,0 closed / 0,6,0 open), so
     !important on display only: no D-53-clean selector outranks (0,6,0). The icon span stays
     in the DOM and in the layout (it holds the chevron); the glyph SVGs were aria-hidden
     and the ::before has empty content, so nothing new is announced. State stays on the
     summary's native aria-expanded.
   - Colour and size come from the widget's OWN variables, so the native icon controls still
     drive them: --n-accordion-icon-size, --n-accordion-icon-normal-color (closed),
     -hover-color (closed + hover), -active-color (open) - the same states the widget's own
     rules use for its glyphs. currentColor would NOT do it: the native colour control
     reaches the glyph only through these variables (fill on svg / color on i), so
     currentColor on the span is the TITLE colour. currentColor and 12px are fallbacks only.
   - The mask's viewBox is cropped to the drawn chevron (5 8 14 8 instead of 0 0 24 24) so it
     fills the icon box: at 12px the full 24 box would draw a 6 x 3px chevron with a 0.75px
     line. Path, stroke width and caps are the brand file's, unchanged.
   - Timing: the rotation follows [open], like the widget's own glyph rule. Opening sets
     [open] at the click, so the chevron turns up as the panel starts to expand. On close,
     Elementor removes [open] only after its 300ms collapse ends, so the chevron stays UP
     while the panel collapses and turns down (150ms) right after it has closed. Keying on
     aria-expanded instead would turn it at the click, but the server renders
     aria-expanded="false" on every row, so without Elementor's JS an open row would show
     a down chevron; [open] is right with or without JS.
   - Forced colours (Windows High Contrast): backgrounds are forced, which would erase a
     mask drawn with background-color, so the chevron is drawn in CanvasText there. */
.mv-acc details > summary .e-n-accordion-item-title-icon > .e-opened,
.mv-acc details > summary .e-n-accordion-item-title-icon > .e-closed {
	display: none !important;
}

.mv-acc details > summary .e-n-accordion-item-title-icon::before {
	--mv-acc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 8 14 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	content: "";
	display: block;
	width: var(--n-accordion-icon-size, 12px);
	height: var(--n-accordion-icon-size, 12px);
	background-color: var(--n-accordion-icon-normal-color, currentColor);
	-webkit-mask: var(--mv-acc-chevron) center / contain no-repeat;
	mask: var(--mv-acc-chevron) center / contain no-repeat;
}

.mv-acc details:not([open]):hover > summary .e-n-accordion-item-title-icon::before {
	background-color: var(--n-accordion-icon-hover-color, var(--n-accordion-icon-normal-color, currentColor));
}

.mv-acc details[open] > summary .e-n-accordion-item-title-icon::before {
	background-color: var(--n-accordion-icon-active-color, var(--n-accordion-icon-normal-color, currentColor));
	transform: rotate(180deg);
}

@media (forced-colors: active) {
	.mv-acc details > summary .e-n-accordion-item-title-icon::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* 2e. Motion (§6.6): chevron rotation 150ms and panel content fade-in 150ms, both on the
   brand curve. The native height animation (WAAPI, 300ms) cannot take this easing, and
   it does not check prefers-reduced-motion either: that is T18 / §5 #22, not this file.
   Fade-in only: on close the panel stays [open] while Elementor collapses it (overflow
   hidden), so the collapse itself clips the content. A close fade keyed on
   aria-expanded would hide open content whenever Elementor's JS is not running.
   Reduced motion: none of this runs (no-preference only), so the chevron flips instantly. */
@keyframes mv-acc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	.mv-acc details > summary .e-n-accordion-item-title-icon::before {
		transition: transform var(--mv-dur-fast, 150ms) var(--mv-ease, cubic-bezier(0.35, 0, 0.15, 1));
	}

	.mv-acc details[open] > :not(summary) {
		animation: mv-acc-fade-in var(--mv-dur-fast, 150ms) var(--mv-ease, cubic-bezier(0.35, 0, 0.15, 1));
	}
}

/* ---------------------------------------------------------------------
 * 2f. HIDE EMPTY ROWS (§1 #6, §5 #2, T20/T6) - its own build step and its own proof.
 *
 * OPT-IN. Nothing is hidden until a row's content container gets the class
 * `mv-acc-autohide` (native Advanced -> CSS Classes on that item's container).
 * Row 4 "משלוחים והחזרות" must NEVER get it (D-74: row 4 stays visible). Without the
 * class this rule cannot match the row, whatever its content.
 *
 * Empty signal (source-read, Elementor 4.3.5 widget-base.php render_content +
 * element-base.php print_element): a widget whose render output is empty is not printed
 * at all, wrapper included. Containers are always printed. So "no data" means the
 * container holds no .elementor-widget. A widget with static text that is not data
 * (a label, the 1011 link) gets the class `mv-acc-nodata` so it does not count.
 *
 * Keyboard guard: the widget uses a roving tabindex. Only the summary with tabindex="0"
 * is in the Tab order (row 1 at load), and the arrow keys move it. A row holding that
 * stop is never hidden, otherwise Tab could not reach the accordion at all (WCAG 2.1.1).
 * Row 1 holds that stop at load; 1.5.0 (D-84): script.js moves it at load to the first row
 * with data when row 1 is empty, so an empty row 1 hides too (without JS row 1 stays
 * visible). Arrowing onto an empty row still shows it while it holds focus.
 *
 * One rule on its own: on an engine without :has() (Safari < 15.4, Firefox < 121) the
 * selector is invalid, only this rule is dropped, and every row stays visible.
 * Specificity (0,6,2) beats the widget's `.e-n-accordion-item { display: flex }` (0,2,0).
 * --------------------------------------------------------------------- */
.mv-acc details:has(> .mv-acc-autohide):not(:has(> .mv-acc-autohide .elementor-widget:not(.mv-acc-nodata))):not(:has(> summary[tabindex="0"])) {
	display: none;
}

/* =====================================================================
 * 3. Product carousels, both native Loop Carousels of the MINIMAL card, Loop Item 808
 *    (1.7.0, G4B D-102 / D-109: image 3:4 · name · price, no button; was the full card 805).
 *    The card's own look (type, insets, ratio, focus ring) lives in 808 itself, natively, so it
 *    is the same in every placement; nothing here reaches inside a card.
 *    - related products: class .mv-pdp-more (replaces Loop Grid 5dad2bd inside container
 *      cad3419, under heading 41edfde; click-list-v2 §2b);
 *    - "השלימו את הלוק" (1.3.0): class .mv-pdp-look, the last block of the info column
 *      after accordion eb480c0, under its own native heading widget.
 * Native (not here): slides per view (more 4/3/2, look 2 on desktop), gap,
 * autoplay/infinite/dots off, speed, the eicon chevrons, arrow size 16 + padding 4, Navy
 * normal/hover, no background/border, swipe/drag.
 * Markup (Pro 4.3.2 base-carousel-trait.php render_carousel_footer + loop-carousel.php):
 *   .mv-pdp-more / .mv-pdp-look (.elementor-widget, position: relative = the arrows'
 *   containing block)
 *     [.elementor-widget-container]
 *       .elementor-loop-container.swiper  (overflow: hidden)
 *       div.elementor-swiper-button.elementor-swiper-button-prev  role=button tabindex=0
 *       div.elementor-swiper-button.elementor-swiper-button-next  role=button tabindex=0
 * (Until 1.6.0 each 805 card held its own gallery .swiper; 808 cards hold no swiper.)
 * RTL: Pro's JS swaps the roles (prevEl = .-next, nextEl = .-prev), so the LEFT button
 * (.-prev, chevron-left) moves forward. This site is RTL only; the physical left/right
 * below follow Pro's own physical positioning.
 * ===================================================================== */

/* 3a. Arrows on the heading row, at the end opposite the title (RTL -> left), side by side.
   The arrow box is a fixed square, so the second arrow's offset needs no width guess:
   max(24px target, native icon size + 2 x 4px padding). The arrows hang ABOVE the widget
   (bottom: 100%): they clear the row gap between heading and carousel (the parent's own
   --row-gap, inherited, so a native gap change follows automatically; for the look block
   the parent is, since 1.4.0, the inner container that holds only the heading and the
   carousel - its own gap, 8 desktop / 16 mobile) and are centred on
   the heading's line box (--mv-more-head-lh, the one coupling, set per carousel below).
   A wrong line-height only moves the arrows a few px up or down; they can never overlap
   the cards.
   Specificity (0,5,0): beats Pro's
   `.elementor-widget-loop-carousel.elementor-element :is(.swiper,.swiper-container) ~ .elementor-swiper-button-prev/next`
   (0,4,0: left/right/top/transform from the --arrow-* vars) and core e-swiper's
   `.elementor-element .swiper ~ .elementor-swiper-button` (0,3,0: top 50%, translateY). */
.mv-pdp-more,
.mv-pdp-look {
	--mv-more-box: max(24px, calc(var(--arrow-size, 25px) + 8px));
	--mv-more-arrow-gap: 4px;
}

/* The heading's line box, per carousel = its line-height.
   1.8.0 (D-82 amended 2026-10-20, L13, A-25): both headings are the same style -
   Google Sans 16px / 600 / line-height 20px at every width (native Typography on 41edfde and
   on the "השלימו את הלוק" heading). So 20px for both carousels, desktop and mobile (was
   20.8 / 18.2 for the related heading at 16 or 14 x 1.3). Change it here if a heading's
   line-height changes. */
.mv-pdp-more,
.mv-pdp-look {
	--mv-more-head-lh: 20px;
}

.mv-pdp-more.mv-pdp-more .swiper ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next),
.mv-pdp-look.mv-pdp-look .swiper ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {
	top: auto;
	bottom: calc(100% + var(--row-gap, 32px) + max(0px, (var(--mv-more-head-lh) - var(--mv-more-box)) / 2));
	right: auto;
	width: var(--mv-more-box);
	height: var(--mv-more-box);
	align-items: center;
	justify-content: center;
	transform: none;
}

.mv-pdp-more.mv-pdp-more .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev,
.mv-pdp-look.mv-pdp-look .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev {
	left: 0;
}

.mv-pdp-more.mv-pdp-more .swiper ~ .elementor-swiper-button.elementor-swiper-button-next,
.mv-pdp-look.mv-pdp-look .swiper ~ .elementor-swiper-button.elementor-swiper-button-next {
	left: calc(var(--mv-more-box) + var(--mv-more-arrow-gap));
}

/* 3a'. (1.8.0, D-115 01b-14 / 01b-15, A-29 / A-30) Mobile: both carousels run edge to edge
   (D-87 13.5). The bleed itself is native, on the CONTAINER in both cases: related: container
   cad3419 Padding (mobile) left/right 0; "השלימו את הלוק" (1.8.1, A-29 fix): its block 46695f7
   Margin (mobile) -20 left/right + Width (mobile) custom calc(100% + 40px), the carousel
   5e5e3cb at its default width. (1.8.0 put the margin + custom width on the widget itself;
   core's `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` (0,4,0)
   outranks the widget's own max-width (0,3,0), so only the margins applied and the carousel
   sat at x 40-390.) The carousel box now starts at the screen edge, so
   the arrows step in by the text inset (--mv-pdp-bleed = the 20px of 5d117f4's mobile
   padding, D-87) to stay where they were. Change it here if that inset changes.
   Same specificity as the rules above (0,5,0), later in the file. */
@media (max-width: 767px) {
	.mv-pdp-more,
	.mv-pdp-look,
	:has(+ :is(.mv-pdp-more, .mv-pdp-look)) {
		--mv-pdp-bleed: 20px;
	}

	.mv-pdp-more.mv-pdp-more .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev,
	.mv-pdp-look.mv-pdp-look .swiper ~ .elementor-swiper-button.elementor-swiper-button-prev {
		left: var(--mv-pdp-bleed);
	}

	.mv-pdp-more.mv-pdp-more .swiper ~ .elementor-swiper-button.elementor-swiper-button-next,
	.mv-pdp-look.mv-pdp-look .swiper ~ .elementor-swiper-button.elementor-swiper-button-next {
		left: calc(var(--mv-pdp-bleed) + var(--mv-more-box) + var(--mv-more-arrow-gap));
	}
}

/* Keep a long heading from running under the arrows: its widget is the carousel's previous
   sibling. Anchored on our classes through :has(). The heading is a SIBLING of the carousel,
   so it does not inherit the carousel's variables: they are declared here as well (in 1.2.0
   they were not, so this padding computed to 0). On the heading Pro's --arrow-size is not
   set, so the box uses the 25px fallback: at most ~18px more padding than the real arrows
   need, never less. A rule of its own: without :has() support only this rule is dropped.
   (0,1,0); a native padding on the heading (0,3,0) would win on purpose.
   1.4.0: no reserve while the arrows are locked (hidden, §3d) - the :where() keeps the
   specificity at (0,1,0). Swiper toggles the lock on resize, and the padding follows. */
:has(+ :is(.mv-pdp-more, .mv-pdp-look)):where(:not(:has(+ * .swiper ~ .elementor-swiper-button.swiper-button-lock))) {
	--mv-more-box: max(24px, calc(var(--arrow-size, 25px) + 8px));
	--mv-more-arrow-gap: 4px;
	padding-inline-end: calc(2 * var(--mv-more-box) + var(--mv-more-arrow-gap));
}

/* 3a''. (1.8.0, A-30; 1.8.1 also A-29) Mobile: with cad3419's side padding at 0 (related) and
   46695f7 bled out to the screen edge (look), each carousel's heading would touch the screen
   edge. It keeps the text inset (--mv-pdp-bleed, 20) at the start and the arrow reserve + 20
   at the end. Same shape and specificity as the rule above ((0,1,0), later in the file);
   locked arrows (hidden) keep only the 20. */
@media (max-width: 767px) {
	:has(+ :is(.mv-pdp-more, .mv-pdp-look)) {
		padding-inline: var(--mv-pdp-bleed);
	}

	:has(+ :is(.mv-pdp-more, .mv-pdp-look)):where(:not(:has(+ * .swiper ~ .elementor-swiper-button.swiper-button-lock))) {
		padding-inline-end: calc(var(--mv-pdp-bleed) + 2 * var(--mv-more-box) + var(--mv-more-arrow-gap));
	}
}

/* 3b. (1.3.1) No mobile peek: Lior 18.10 - on mobile the related carousel shows clean pairs
   like "השלימו את הלוק", no third card entering. The native slides_to_show_mobile 2 does it. */

/* 3c. Focus ring: the child theme's `:focus-visible:not(.mv-focus-pointer)` (0,2,0, 2px
   Navy, offset 2) reaches these div[role=button][tabindex=0], and no carousel CSS sets
   outline, so there is no rule here.
   3d. Ends (infinite off): Swiper's a11y module sets aria-disabled="true" + tabindex="-1"
   and the class .swiper-button-disabled; core dims it to opacity .3 (0,4,0). That is an
   inactive, unfocusable control, exposed to AT as disabled: 1.4.11 does not apply. The
   look is kept native (light grey, as in the Buck Mason reference); only the hand cursor
   goes. (0,4,0) beats core `cursor: pointer` (0,3,0); core's own disabled rule (0,4,0)
   sets only opacity.
   Locked (1.4.0, verified live 19.10 on 1.3.1): when every card fits (e.g. 2 slides per
   view, 2 products) Swiper's watchOverflow adds .swiper-button-lock (+ -disabled) to both
   arrows. Swiper's own `.swiper-button-lock { display: none }` (0,1,0) loses to core
   e-swiper's `.elementor-element .swiper ~ .elementor-swiper-button { display: inline-flex }`
   (0,3,0), so both showed as two disabled arrows with nothing to scroll. Hidden here,
   (0,4,0); the lock comes off on resize when the cards overflow, and they show again. */
.mv-pdp-more .swiper ~ .elementor-swiper-button.swiper-button-disabled,
.mv-pdp-look .swiper ~ .elementor-swiper-button.swiper-button-disabled {
	cursor: default;
}

.mv-pdp-more .swiper ~ .elementor-swiper-button.swiper-button-lock,
.mv-pdp-look .swiper ~ .elementor-swiper-button.swiper-button-lock {
	display: none;
}

/* 3f. Reduced motion. Slide speed is native (JS): Swiper writes transition-duration inline
   on .swiper-wrapper, so only !important outranks it. 0.01ms, not 0: Swiper's internal
   state waits for transitionend, which a 0s transition never fires. The arrows' own 250ms
   colour transition (Pro) goes as well. */
@media (prefers-reduced-motion: reduce) {
	.mv-pdp-more .swiper-wrapper,
	.mv-pdp-look .swiper-wrapper {
		transition-duration: 0.01ms !important;
	}

	.mv-pdp-more.mv-pdp-more .swiper ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next),
	.mv-pdp-look.mv-pdp-look .swiper ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {
		transition: none;
	}
}

/* §4 ("השלימו את הלוק" 2-up fit of 805's name/price row 04105b7, :has() on the price widget)
   was removed in 1.7.0: the carousels now print card 808, whose name and price are already
   stacked one-line rows (808's own settings: name nowrap + ellipsis, price nowrap + tabular). */