/**
 * MARO Product Slider
 * Minimalistyczny, wydajny slider zdjęć produktowych.
 *
 * Theming poprzez zmienne CSS – można nadpisać w motywie bez edycji wtyczki.
 */

.maro-ps {
	--maro-ps-arrow-bg: rgba( 255, 255, 255, 0.9 );
	--maro-ps-arrow-color: #1a1a1a;
	--maro-ps-arrow-size: 36px;
	--maro-ps-arrow-offset: 10px;
	--maro-ps-slide-bg: #fff;
	--maro-ps-dot: rgba( 0, 0, 0, 0.25 );
	--maro-ps-dot-active: #1a1a1a;
	--maro-ps-dots-bg: rgba( 255, 255, 255, 0.85 );

	position: relative;
	overflow: hidden;
	line-height: 0;
}

/* Link w trybie shortcode nie może zaburzać layoutu. */
.maro-ps__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Track + slajdy
 * ------------------------------------------------------------------------- */
.maro-ps__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Ukryty pasek przewijania (Firefox / WebKit). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.maro-ps__track::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* Pojedyncze zdjęcie – brak możliwości scrolla. */
.maro-ps--single .maro-ps__track {
	overflow: hidden;
}

.maro-ps__slide {
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: var( --maro-ps-ratio, 3 / 4 );
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background-color: var( --maro-ps-slide-bg, #fff );
}

/* Obrazek w naturalnych proporcjach – nigdy nieprzycinany (object-fit: contain),
 * a slajd ma proporcje obrazka głównego, więc nie powstają puste pasy.
 * Neutralizujemy też ewentualny "zoom on hover" narzucany przez motyw. */
.maro-ps__img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	transform: none !important;
	transition: none !important;
}

.maro-ps:hover .maro-ps__img,
.maro-ps__slide:hover .maro-ps__img,
.maro-ps__img:hover {
	transform: none !important;
	scale: none !important;
}

/* ---------------------------------------------------------------------------
 * Strzałki
 * ------------------------------------------------------------------------- */
.maro-ps__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --maro-ps-arrow-size, 36px );
	height: var( --maro-ps-arrow-size, 36px );
	border-radius: 50%;
	background-color: var( --maro-ps-arrow-bg, rgba( 255, 255, 255, 0.9 ) );
	color: var( --maro-ps-arrow-color, #1a1a1a );
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.18s ease, background-color 0.18s ease;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.12 );
	line-height: 0;
}

.maro-ps__arrow--prev {
	left: var( --maro-ps-arrow-offset, 10px );
}

.maro-ps__arrow--next {
	right: var( --maro-ps-arrow-offset, 10px );
}

.maro-ps__chevron {
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* Strzałka krańcowa (pierwszy slajd dla prev, ostatni dla next) – nieaktywna. */
.maro-ps__arrow.is-disabled {
	pointer-events: none;
	cursor: default;
	box-shadow: none;
}

/* Desktop (urządzenia z prawdziwym hoverem) – strzałki dopiero po najechaniu. */
@media ( hover: hover ) and ( pointer: fine ) {
	.maro-ps:hover .maro-ps__arrow,
	.maro-ps:focus-within .maro-ps__arrow {
		opacity: 1;
	}

	.maro-ps__arrow:hover {
		background-color: #fff;
	}

	/* Wygaszona, ale nadal widoczna jako wskazówka, że to koniec zakresu. */
	.maro-ps:hover .maro-ps__arrow.is-disabled,
	.maro-ps:focus-within .maro-ps__arrow.is-disabled {
		opacity: 0.3;
		background-color: var( --maro-ps-arrow-bg, rgba( 255, 255, 255, 0.9 ) );
	}
}

/* Mobile / dotyk – strzałki ukryte całkowicie. */
@media ( hover: none ), ( pointer: coarse ) {
	.maro-ps__arrow {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Kropki (dots)
 * ------------------------------------------------------------------------- */
.maro-ps__dots {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: calc( 100% - 24px );
	padding: 6px 10px;
	border-radius: 999px;
	background-color: var( --maro-ps-dots-bg, rgba( 255, 255, 255, 0.85 ) );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.1 );
	pointer-events: auto;
	overflow: hidden;
}

.maro-ps__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background-color: var( --maro-ps-dot, rgba( 0, 0, 0, 0.25 ) );
	cursor: pointer;
	transition: width 0.22s ease, background-color 0.22s ease;
}

/* Aktywna kropka – wydłużona, ciemna pigułka (jak w mockupach). */
.maro-ps__dot.is-active {
	width: 22px;
	background-color: var( --maro-ps-dot-active, #1a1a1a );
}

/* ---------------------------------------------------------------------------
 * Dostępność / preferencje ruchu
 * ------------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.maro-ps__track {
		scroll-behavior: auto;
	}

	.maro-ps__arrow,
	.maro-ps__dot {
		transition: none;
	}
}