/**
 * מכון נדב — "תצוגת קרוסלה" לווידג'ט "מוצרים".
 *
 * Everything here hangs off `.mn-carousel-yes`, which Elementor adds only to a
 * Products widget whose switch is on (inc/mn-product-carousel.php). Every other
 * grid on the site is untouched.
 */

.mn-carousel-yes .mn-rail {
	position: relative;
}

.mn-carousel-yes .mn-rail:focus {
	outline: none; /* only ever focused by script, when an arrow it held goes */
}

/* One row that scrolls sideways and settles on a card. */
.mn-carousel-yes ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: 18px !important;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* room for a card's hover lift and shadow inside the scroller */
	padding: 6px 4px 20px !important;
	margin: 0 -4px !important;
}

.mn-carousel-yes ul.products::-webkit-scrollbar {
	display: none;
}

/* The AJAX filter's own "no results" state: let it hide the list. */
.mn-carousel-yes ul.products.braapfNotReplaced {
	display: none !important;
}

/* WooCommerce's clearfix would become two empty items in a flex row. */
.mn-carousel-yes ul.products::before,
.mn-carousel-yes ul.products::after {
	display: none !important;
}

/* The same width everywhere, whatever the widget's columns say. */
.mn-carousel-yes ul.products > li.product {
	flex: 0 0 264px !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

/* A fade on the edge where a card is cut off. RTL: the later cards ("next")
   wait on the left, so that fade starts at the left edge (a gradient "to right"
   begins there). The right edge is cut only once the end is reached — until then
   the card there sits snapped to it, whole, and must not be faded. */
.mn-carousel-yes .mn-rail.can-prev ul.products {
	-webkit-mask-image: linear-gradient( to left, transparent 0, #000 56px );
	mask-image: linear-gradient( to left, transparent 0, #000 56px );
}

.mn-carousel-yes .mn-rail.can-next ul.products,
.mn-carousel-yes .mn-rail.can-prev.can-next ul.products {
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 56px );
	mask-image: linear-gradient( to right, transparent 0, #000 56px );
}

/* ------------------------------------------------------------------ arrows */

.mn-carousel-yes .mn-car-btn {
	position: absolute;
	top: calc( 50% - 7px );
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --mn-arrow-bg, var( --mn-secondary ) );
	color: var( --mn-arrow-icon, var( --mn-arrow-icon-auto, var( --mn-on-secondary ) ) );
	cursor: pointer;
	box-shadow: 0 8px 20px -6px rgba( 0, 0, 0, 0.45 );
	transform: translateY( -50% );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mn-carousel-yes .mn-car-btn:hover {
	background: var( --mn-arrow-hover, var( --mn-primary ) );
	color: var( --mn-arrow-hover-icon-auto, var( --mn-on-primary ) );
}

.mn-carousel-yes .mn-car-btn:focus-visible {
	outline: 3px solid var( --mn-primary-a60 );
	outline-offset: 2px;
}

.mn-carousel-yes .mn-car-btn svg {
	width: 20px;
	height: 20px;
}

/* Physical sides: in RTL the earlier cards are on the right. */
.mn-carousel-yes .mn-car-btn--prev {
	right: -10px;
}

.mn-carousel-yes .mn-car-btn--next {
	left: -10px;
}

.mn-carousel-yes .mn-car-btn[hidden] {
	display: none;
}

/* ------------------------------------------------------- where you are */

.mn-carousel-yes .mn-car-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 2px 0 0;
}

.mn-carousel-yes .mn-car-dots[hidden] {
	display: none;
}

.mn-carousel-yes .mn-car-dots i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 4px;
	background: var( --mn-dot, #ddd6cb );
	transition: background-color 0.2s ease, width 0.2s ease;
}

.mn-carousel-yes .mn-car-dots i.is-on {
	width: 20px;
	background: var( --mn-dot-active, var( --mn-primary ) );
}

/* ------------------------------------------------------------ small screens */

/* A phone: nearly a whole card, the next one peeking; swiped. */
@media ( max-width: 767px ) {
	.mn-carousel-yes ul.products > li.product {
		flex-basis: 80% !important;
	}

	.mn-carousel-yes .mn-car-btn {
		width: 38px;
		height: 38px;
	}

	.mn-carousel-yes .mn-car-btn--prev {
		right: -4px;
	}

	.mn-carousel-yes .mn-car-btn--next {
		left: -4px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mn-carousel-yes ul.products {
		scroll-behavior: auto;
	}
}