/* Produktübersicht: mehrere Produktbilder je Karte (inc/loop-swipe.php).
 * Handy/Tablet: mit dem Finger wischen. PC: beim Überfahren blättern die Bilder von selbst, Punkte zum Springen. */
.loop-image-wrap {
	position: relative;
}
.hz-loop-swipe {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.hz-loop-swipe__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	background: #fff;
}
.hz-loop-swipe__track::-webkit-scrollbar {
	display: none;
}
.loop-image-wrap .hz-loop-swipe__img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	opacity: 1 !important;
}
.hz-loop-swipe__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
	z-index: 2; /* Botiga setzt Kartenbilder auf z-index 1 */
}
.hz-loop-swipe__dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
	transition: background 0.2s;
}
.hz-loop-swipe__dots i.is-active {
	background: #212121;
}
/* Merkliste bleibt über den Bildern bedienbar. */
.loop-image-wrap .botiga-wishlist-button {
	z-index: 3;
}

/* Handy/Tablet: immer sichtbar, mit dem Finger wischen. */
@media (hover: none) and (pointer: coarse) {
	.hz-loop-swipe__track {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* PC: erst beim Überfahren einblenden (ersetzt Botigas Bildwechsel), Punkte mit der Maus anwählbar. */
@media (hover: hover) {
	.hz-loop-swipe {
		opacity: 0;
		transition: opacity 0.25s;
	}
	li.product:hover .hz-loop-swipe {
		opacity: 1;
	}
	.hz-loop-swipe__dots {
		pointer-events: auto;
		bottom: 0;
		padding: 8px 0;
	}
	.hz-loop-swipe__dots i {
		width: 8px;
		height: 8px;
		cursor: pointer;
	}
}