/* ==========================================================================
   Simple Product Slider for Elementor
   ========================================================================== */

.ecps-slider {
	position: relative;
	width: 100%;
	--ecps-gap: 20px;
	--ecps-slides: 4;
	--ecps-arrow-gap: 10px;
	--ecps-pagination-gap: 16px;
}

/* Fallback before the script runs (avoids a layout jump). JS overrides these inline. */
@media (max-width: 1024px) {
	.ecps-slider { --ecps-slides: 2; --ecps-gap: 16px; }
}
@media (max-width: 767px) {
	.ecps-slider { --ecps-slides: 1; --ecps-gap: 12px; }
}

/* --------------------------------------------------------------------------
   Track and slides
   -------------------------------------------------------------------------- */
.ecps-viewport { overflow: hidden; width: 100%; }
.ecps-track {
	display: flex;
	align-items: stretch;
	gap: var(--ecps-gap);
	transition: transform .35s ease;
	will-change: transform;
}
.ecps-slide {
	flex: 0 0 calc((100% - (var(--ecps-gap) * (var(--ecps-slides) - 1))) / var(--ecps-slides));
	min-width: 0;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Arrows
   -------------------------------------------------------------------------- */
.ecps-arrow {
	position: absolute;
	z-index: 2;
	top: 40%;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #222;
	box-shadow: none;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
	text-align: center;
	text-indent: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ecps-arrow::-moz-focus-inner { border: 0; padding: 0; }
.ecps-arrow > i,
.ecps-arrow > svg,
.ecps-arrow > span { display: block; width: 1em; height: 1em; font-size: 16px; line-height: 1; flex: 0 0 auto; }
.ecps-arrow > svg { width: 16px; height: 16px; }
.ecps-arrow > svg path { fill: currentColor; }
.ecps-arrow:focus,
.ecps-arrow:active { box-shadow: none; }
.ecps-arrow:focus-visible,
.ecps-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ecps-prev { left: 8px; }
.ecps-next { right: 8px; }
.ecps-arrow:disabled { opacity: .35; cursor: default; }

/* Arrow background shapes. */
.ecps-arrow-shape-square .ecps-arrow { border-radius: 0; }
.ecps-arrow-shape-none .ecps-arrow {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* Arrows in a reserved row above the cards, not over product images. */
.ecps-slider.ecps-arrows-top { padding-top: calc(38px + var(--ecps-arrow-gap)); }
.ecps-slider.ecps-arrows-top .ecps-arrow {
	top: 4px;
	left: auto;
}
.ecps-slider.ecps-arrows-top .ecps-prev { right: 46px; }
.ecps-slider.ecps-arrows-top .ecps-next { right: 0; }
.ecps-slider.ecps-arrows-top.ecps-arrow-align-left .ecps-prev { left: 0; right: auto; }
.ecps-slider.ecps-arrows-top.ecps-arrow-align-left .ecps-next { left: 46px; right: auto; }
.ecps-slider.ecps-arrows-top.ecps-arrow-align-center .ecps-prev { left: calc(50% - 42px); right: auto; }
.ecps-slider.ecps-arrows-top.ecps-arrow-align-center .ecps-next { left: calc(50% + 4px); right: auto; }

/* Arrows at the sides of the slider. */
.ecps-slider.ecps-arrow-align-left.ecps-arrows-inside .ecps-prev { left: 8px; right: auto; }
.ecps-slider.ecps-arrow-align-center.ecps-arrows-inside .ecps-prev { left: calc(50% - 42px); right: auto; }
.ecps-slider.ecps-arrow-align-center.ecps-arrows-inside .ecps-next { left: calc(50% + 4px); right: auto; }
.ecps-slider.ecps-arrow-align-right.ecps-arrows-inside .ecps-prev { left: auto; right: 46px; }
.ecps-slider.ecps-arrow-align-right.ecps-arrows-inside .ecps-next { left: auto; right: 8px; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.ecps-pagination {
	display: flex;
	gap: 7px;
	justify-content: center;
	align-items: center;
	margin-top: var(--ecps-pagination-gap);
	width: 100%;
}
.ecps-pagination[hidden] { display: none; }
.ecps-slider.ecps-pagination-align-left .ecps-pagination { justify-content: flex-start; }
.ecps-slider.ecps-pagination-align-center .ecps-pagination { justify-content: center; }
.ecps-slider.ecps-pagination-align-right .ecps-pagination { justify-content: flex-end; }
.ecps-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c7c7c7;
	cursor: pointer;
}
.ecps-dot.is-active { background: #222; transform: scale(1.15); }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ecps-track { transition: none; }
}