/* Lupa karty: pełny ekran zdjęć na zieleni-2, pas przewijany (palcem albo strzałkami), przybliżenie 2,5× w slajdzie. Tylko na karcie. */
html:has(.lupa[open]) {
	overflow: hidden;
}

.galeria .powieksz {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: color-mix(in srgb, var(--krem) 92%, transparent);
	border: 1px solid var(--zloto-j);
	border-radius: 50%;
	color: var(--zielen-2);
	cursor: zoom-in;
}

@media (max-width: 900px) {
	.galeria .powieksz {
		right: calc(100% - var(--h) - 6px);
	}
}

.galeria .powieksz[hidden] {
	display: none;
}

.galeria .powieksz svg,
.lupa svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.lupa {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	background: var(--zielen-2);
	border: 0;
	color: #E3DECF;
}

.lupa[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.lupa :focus-visible {
	outline-color: var(--zloto-j);
}

.lupa-gora {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 24px;
	padding: 14px 20px 14px 32px;
}

.lupa-tytul {
	margin: 0;
	overflow: hidden;
	font: 400 16px / 1.3 var(--serif);
	color: var(--krem);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lupa-ab {
	margin-right: 10px;
	font: 500 14px var(--sans);
	color: var(--zloto-j);
}

.lupa-licznik {
	margin: 0;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.lupa-zamknij,
.lupa-strzalka {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: color-mix(in srgb, var(--zielen-2) 75%, transparent);
	border: 1px solid color-mix(in srgb, var(--zloto-j) 55%, var(--zielen-2));
	border-radius: 50%;
	color: var(--krem);
	cursor: pointer;
}

.lupa-zamknij:hover,
.lupa-strzalka:hover {
	border-color: var(--zloto-j);
}

.lupa-scena {
	position: relative;
	min-width: 0; /* przybliżone zdjęcie ma szerokość w px — nie rozpycha okna */
	min-height: 0;
}

.lupa-pas {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lupa-pas::-webkit-scrollbar {
	display: none;
}

.lupa-slajd {
	flex: 0 0 100%;
	box-sizing: border-box;
	padding: 0 112px;
	overflow: hidden;
	scroll-snap-align: start;
}

/* Bez przejść: przy „ogranicz ruch” motyw daje wszystkiemu 0,01 ms przejścia, a wtedy przewinięcie do punktu kliknięcia trafia w stary rozmiar. */
.lupa-slajd,
.lupa-slajd img {
	transition-property: none;
}

.lupa-slajd img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: normal;
	cursor: zoom-in;
}

/* Przybliżone: zdjęcie 2,5× (wymiary liczy galeria.js) w slajdzie przewijanym; mniejszy bok na środku */
.lupa-slajd.przyblizone {
	display: flex;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.lupa-slajd.przyblizone img {
	flex: none;
	max-width: none;
	margin: auto;
	cursor: zoom-out;
}

.lupa-strzalka {
	position: absolute;
	top: 50%;
	width: 56px;
	height: 56px;
	margin-top: -28px;
}

.lupa-wstecz {
	left: 32px;
}

.lupa-dalej {
	right: 32px;
}

.lupa-dol {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 18px 16px 20px;
}

.lupa-miniatury {
	display: flex;
	gap: 12px;
}

.lupa-miniatury button {
	width: 60px;
	height: 60px;
	padding: 0;
	background: var(--bialy);
	border: 0;
	outline: 1px solid transparent;
	outline-offset: 4px;
	opacity: 0.55;
	cursor: pointer;
}

.lupa-miniatury button[aria-current],
.lupa-miniatury button:hover {
	outline-color: var(--zloto-j);
	opacity: 1;
}

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

.lupa-wskazowka {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	color: color-mix(in srgb, #E3DECF 80%, var(--zielen-2));
}

.lupa-wskazowka svg {
	width: 18px;
	height: 18px;
	color: var(--zloto-j);
}

.lupa-wskazowka .palce {
	display: none;
}

@media (max-width: 900px) {
	.lupa-gora {
		grid-template-columns: 1fr auto;
		padding: 10px 12px 10px 20px;
	}

	.lupa-tytul,
	.lupa-strzalka,
	.lupa-miniatury {
		display: none;
	}

	.lupa-slajd {
		padding: 0;
	}

	.lupa-dol {
		padding-bottom: 28px;
	}

	.lupa-wskazowka .mysz {
		display: none;
	}

	.lupa-wskazowka .palce {
		display: inline;
	}
}