/* Product Attribute Styling – Galerie-Modul Frontend.
   Struktur ist statisch, Werte kommen aus --pasg-* Variablen (auf .pasg-gallery gescopt). */

.pasg-gallery {
	--pasg-arrow-icon-color: #ffffff;
	--pasg-arrow-button-color: #000000;
	--pasg-arrow-button-radius: 50%;
	--pasg-magnifier-icon-color: #ffffff;
	--pasg-magnifier-bg: rgba(0, 0, 0, 0.55);
	--pasg-magnifier-bg-hover: rgba(0, 0, 0, 0.75);
	--pasg-overlay-bg: rgb(0, 0, 0);
	--pasg-slide-duration: 300ms;
	--pasg-thumb-size: 80px;
}

/* Layout nur für den eigenen Slider – nicht für die angereicherte WC-/Divi-Galerie. */
.pasg-mode-slider {
	position: relative;
	margin: 0 0 1.5em;
}

/* Durch den eigenen Slider ersetzte native Galerie dauerhaft ausblenden. */
.woocommerce-product-gallery.pasg-replaced {
	display: none !important;
}

/* ---------- Bühne + Slider-Track ---------- */
.pasg-stage {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	touch-action: pan-y;
}

.pasg-track {
	display: flex;
	will-change: transform;
}

.pasg-track.pasg-animate {
	transition: transform var(--pasg-slide-duration) ease;
}

.pasg-slide--clone,
.pasg-lightbox__slide--clone {
	pointer-events: none;
}

.pasg-slide {
	flex: 0 0 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	/* Bildinhalt 1px von den Slide-Rändern wegrücken, damit an der Nahtstelle zum
	   Nachbar-Slide niemals Bildpixel liegen. Verhindert den Subpixel-Saum (1px des
	   danebenliegenden Bildes), den das Antialiasing beim Rastern erzeugt.
	   box-sizing: border-box hält das Slide trotz Padding exakt 100% breit. */
	box-sizing: border-box;
	padding: 0 1px;
}

.pasg-slide img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	pointer-events: none;
}

/* Hover-Zoom: Der native WooCommerce-/Divi-Zoom bleibt bei "Zoom" unverändert.
   Bei "Kein Effekt" wird der native Zoom-Overlay (.zoomImg) gezielt unterdrückt
   (CSS-Fallback, falls ein Theme den PHP-Filter ignoriert). */
.pasg-no-zoom .zoomImg {
	display: none !important;
	opacity: 0 !important;
}

/* Native Lupe/Lightbox-Trigger (z. B. Divi/WooCommerce) ausblenden – wir liefern
   eine eigene Lupe und Lightbox. */
.pasg-enhanced .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* ---------- Pfeile ---------- */
.pasg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--pasg-arrow-icon-color);
	background: var(--pasg-arrow-button-color);
	border-radius: var(--pasg-arrow-button-radius);
	opacity: 1;
	transition: opacity 0.2s ease;
}

.pasg-arrow--prev {
	left: 12px;
}

.pasg-arrow--next {
	right: 12px;
}

.pasg-arrow[hidden] {
	display: none;
}

/* Sichtbarkeit „nur bei Hover" (Desktop). */
@media (hover: hover) {
	.pasg-arrows-hover .pasg-arrow {
		opacity: 0;
	}

	.pasg-arrows-hover .pasg-stage:hover .pasg-arrow {
		opacity: 1;
	}
}

/* Mobile-Override: Pfeile immer sichtbar. */
@media (hover: none) {
	.pasg-arrows-hover .pasg-arrow {
		opacity: 1;
	}
}

/* „Nie anzeigen": Slider-Pfeile ausblenden – die Lightbox behält ihre eigenen
   Pfeile (eigenes Markup, nicht von dieser Klasse betroffen). */
.pasg-arrows-never .pasg-arrow {
	display: none !important;
}

/* ---------- Lupe ---------- */
.pasg-magnifier {
	position: absolute;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	background: var(--pasg-magnifier-bg);
	color: var(--pasg-magnifier-icon-color);
	transition: background-color 0.2s ease;
}

.pasg-magnifier:hover,
.pasg-magnifier:focus-visible {
	background: var(--pasg-magnifier-bg-hover);
}

.pasg-magnifier__icon {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pasg-magnifier__sign {
	display: none;
}

.pasg-magnifier[data-icon="plus"] .pasg-magnifier__sign--horizontal,
.pasg-magnifier[data-icon="plus"] .pasg-magnifier__sign--vertical,
.pasg-magnifier[data-icon="minus"] .pasg-magnifier__sign--horizontal {
	display: block;
}

.pasg-magnifier[data-icon="bold"] .pasg-magnifier__icon {
	stroke-width: 3;
}

.pasg-magnifier[data-icon="thin"] .pasg-magnifier__icon {
	stroke-width: 1.25;
}

.pasg-magnifier[data-position="top-left"] {
	top: calc(12px + var(--pasg-magnifier-y, 0px));
	left: calc(12px + var(--pasg-magnifier-x, 0px));
}

.pasg-magnifier[data-position="top-right"] {
	top: calc(12px + var(--pasg-magnifier-y, 0px));
	right: calc(12px - var(--pasg-magnifier-x, 0px));
}

.pasg-magnifier[data-position="bottom-left"] {
	bottom: calc(12px - var(--pasg-magnifier-y, 0px));
	left: calc(12px + var(--pasg-magnifier-x, 0px));
}

.pasg-magnifier[data-position="bottom-right"] {
	bottom: calc(12px - var(--pasg-magnifier-y, 0px));
	right: calc(12px - var(--pasg-magnifier-x, 0px));
}

/* ---------- Punkte (Instagram-Sliding-Window) ---------- */
.pasg-dots {
	overflow: hidden;
	margin: 12px auto 0;
	max-width: 160px; /* ~10 Punkte à 16px; JS feinjustiert die Breite. */
}

.pasg-dots-track {
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	will-change: transform;
	transition: transform var(--pasg-slide-duration) ease;
}

.pasg-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, background 0.2s ease;
}

.pasg-dot.is-active {
	background: rgba(0, 0, 0, 0.8);
}

.pasg-dot.pasg-dot--edge {
	transform: scale(0.66);
}

.pasg-dot.pasg-dot--edge-far {
	transform: scale(0.4);
}

/* ---------- Vollbild (Lightbox) ---------- */
.pasg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: var(--pasg-overlay-bg, rgb(0, 0, 0));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	/* Kein Markieren/Geister-Ziehen während des Swipens. */
	-webkit-user-select: none;
	user-select: none;
}

.pasg-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.pasg-lightbox__stage {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	touch-action: pan-y;
}

.pasg-lightbox__track {
	display: flex;
	width: 100%;
	will-change: transform;
}

.pasg-lightbox__track.pasg-animate {
	transition: transform var(--pasg-slide-duration) ease;
}

.pasg-lightbox__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.pasg-lightbox__slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.pasg-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	border: 0;
	cursor: pointer;
	color: var(--pasg-arrow-icon-color);
	background: var(--pasg-arrow-button-color);
	border-radius: var(--pasg-arrow-button-radius);
}

.pasg-lightbox .pasg-arrow {
	z-index: 5;
}

/* Vollbild-Navigation unten (Punkte oder Thumbnails). */
.pasg-lightbox__nav {
	flex: 0 0 auto;
	padding: 12px;
	overflow: hidden;
}

.pasg-lightbox__nav-track {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	will-change: transform;
	transition: transform var(--pasg-slide-duration) ease;
}

.pasg-lightbox__thumb {
	flex: 0 0 auto;
	width: var(--pasg-thumb-size);
	height: var(--pasg-thumb-size);
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: none;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pasg-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pasg-lightbox__thumb.is-active {
	opacity: 1;
	border-color: #fff;
}

/* ---------- Lightbox-Farbvarianten ----------
   Auf dunklem Hintergrund verschwinden die fast schwarzen Standard-Punkte –
   daher hellgrau einfärben. Auf weißem Hintergrund bleibt die dunkle
   Standardfarbe und der Thumbnail-Rahmen muss dunkel werden. */
.pasg-lightbox--dark .pasg-lightbox__nav-track .pasg-dot {
	background: rgba(255, 255, 255, 0.4);
}

.pasg-lightbox--dark .pasg-lightbox__nav-track .pasg-dot.is-active {
	background: rgba(255, 255, 255, 0.9);
}

.pasg-lightbox--light .pasg-lightbox__thumb.is-active {
	border-color: #333;
}

/* Body-Scroll-Sperre bei offener Lightbox. */
body.pasg-lightbox-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.pasg-track.pasg-animate,
	.pasg-lightbox__track.pasg-animate,
	.pasg-dots-track,
	.pasg-lightbox__nav-track {
		transition-duration: 0.01ms;
	}
}