/* ===== MW Motyw — powiekszenie zdjec (szablony/czesci/lightbox.php, lightbox.js): karta produktu i [mw_galeria] ===== */
/* Figma 301:378, ustalenia Tomka 18.09. Selektory (0,2,0): bija reset widoku i proze stron tresciowych. */

/* UA daje dialogowi width: fit-content; 100%, nie 100vw: bez paska przewijania */
.mw-lightbox[data-mw-lightbox] {
	inline-size: 100%;
	block-size: 100svh;
	max-inline-size: none;
	max-block-size: none;
	padding: 0;
	border: 0;
	/* mleko z utility w tokeny.css; na dialogu, bo ::backdrop nie widzi tokenow */
}
/* fokus na samym oknie: bez ramki, Tab prowadzi na X */
.mw-lightbox[data-mw-lightbox]:focus-visible {
	outline: none;
}
.mw-lightbox[data-mw-lightbox]::backdrop {
	background: transparent;
}
/* zdjecie w naturalnej proporcji na srodku; klik obok zamyka */
.mw-lightbox[data-mw-lightbox][open] {
	display: grid;
	place-items: center;
}
.mw-lightbox .mw-lightbox__track {
	display: flex;
	inline-size: 100%;
	block-size: 100svh;
	scroll-snap-type: x mandatory;
}
.mw-lightbox .mw-lightbox__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always; /* szybki przesuw nie przeskakuje slajdu */
	display: grid;
	place-items: center;
}
/* zdjecie i film do 80 % wysokosci: zapas na sterowanie wideo */
.mw-lightbox .mw-lightbox__img {
	max-inline-size: 100%;
	max-block-size: 80svh;
}
/* licznik w miejscu licznika galerii karty: pasek + naglowek + s4 od gory, gutter od lewej */
.mw-lightbox .mw-lightbox__counter {
	position: fixed;
	inset: calc(var(--mw-bar-h) + var(--mw-header-h) + var(--mw-s4)) auto auto var(--mw-page-pad);
	z-index: 1; /* nad slajdem: zdjecie siegajace krawedzi go zaslanialo */
	margin: 0;
	font-size: var(--mw-fs-xs);
	color: var(--mw-ink);
}
/* X w osi strzalek, pelnym kolorem; ksztalt: utility kwadratowy przycisk 44 (tokeny.css) */
.mw-lightbox .mw-lightbox__x {
	position: fixed;
	inset: var(--mw-s2) 0 auto auto;
	z-index: 1;
	color: var(--mw-ink);
}
/* strzalki: ksztalt z utility w tokeny.css (jak kafelek dotykowy), tu czern 50 % */
.mw-lightbox .mw-lightbox__arrow {
	opacity: .5;
}

/* desktop: ikona 32 w polu 44, licznik w tym samym pasie */
@media (width >= 900px) { /* bp:desktop */
	.mw-lightbox :is(.mw-lightbox__arrow, .mw-lightbox__x) svg {
		inline-size: var(--mw-s5);
		block-size: var(--mw-s5);
	}
	.mw-lightbox .mw-lightbox__counter {
		inset-block-start: var(--mw-s2);
		block-size: var(--mw-control-h);
		display: flex;
		align-items: center;
	}
	/* karta produktu (lightbox.js is-panel): okno tylko nad galeria, panel kupna ostry i przewijany (Tomek 14.10) */
	/* fixed liczniki i X licza sie od okna: backdrop-filter z mleka robi z niego blok zawierajacy */
	.mw-lightbox[data-mw-lightbox].is-panel[open] {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 70;
		inline-size: var(--mw-veil-w, 100%);
		margin: 0;
		border-inline-end: 1px solid var(--mw-line); /* ramka panelu od gory do dolu ekranu */
	}
	/* strzalki i X odsuniete od krawedzi jak licznik (Tomek 14.10) */
	.mw-lightbox.is-panel .mw-lightbox__arrow--prev {
		inset-inline-start: var(--mw-page-pad);
	}
	.mw-lightbox.is-panel :is(.mw-lightbox__arrow--next, .mw-lightbox__x) {
		inset-inline-end: var(--mw-page-pad);
	}
	/* pasek ogloszen i naglowek nad panelem zasloniete biala (zablokowane, mleko dawalo szare widmo) */
	.mw-lightbox[data-mw-lightbox].is-panel[open]::before {
		content: "";
		position: absolute;
		inset: 0 auto auto var(--mw-veil-w, 100vw);
		inline-size: calc(100vw - var(--mw-veil-w, 100vw));
		block-size: var(--mw-veil-top, 0px);
		background: var(--mw-paper);
	}
}
/* film w naturalnej proporcji jak zdjecie: auto bierze proporcje z width/height, limity skaluja obie osie */
.mw-lightbox .mw-lightbox__video {
	inline-size: auto;
	block-size: auto;
}
/* logo marki tylko na telefonie (Tomek 15.10) */
.mw-lightbox .mw-lightbox__logo {
	display: none;
}
/* telefon: licznik, X i strzalki bez tla, gutter od krawedzi (Tomek 15.10) */
@media (width < 900px) { /* bp:desktop */
	/* logo jak w naglowku: srodkiem, w rzedzie licznika i X */
	.mw-lightbox .mw-lightbox__logo {
		position: fixed;
		inset: var(--mw-page-pad) 0 auto;
		z-index: 1;
		display: flex;
		justify-content: center;
		pointer-events: none;
	}
	/* pas naglowka poza obliczeniem; svh, bo paski przegladarki nie ruszaja ukladu */
	.mw-lightbox .mw-lightbox__slide {
		padding-block-start: var(--mw-header-h);
	}
	/* wypelnia caly obszar pod pasem; nadmiar ucinany u gory */
	.mw-lightbox .mw-lightbox__img {
		inline-size: 100%;
		block-size: calc(100svh - var(--mw-header-h));
		max-block-size: none;
		object-fit: cover;
		object-position: center bottom;
	}
	/* licznik i X przy gornej krawedzi, gutter jak z bokow: mniej na zdjeciu */
	.mw-lightbox .mw-lightbox__counter {
		inset-block-start: var(--mw-page-pad);
	}
	/* ikony krawedzia w gutterze, pole dotyku 44 do srodka; strzalki karty w tym samym miejscu */
	.mw-pdp .mw-pdp__gallery .mw-pdp__arrow {
		inline-size: var(--mw-control-h);
		block-size: var(--mw-control-h);
	}
	.mw-lightbox .mw-lightbox__arrow--prev,
	.mw-pdp .mw-pdp__gallery .mw-pdp__arrow--prev {
		inset-inline-start: var(--mw-page-pad);
		justify-items: start;
	}
	.mw-lightbox :is(.mw-lightbox__arrow--next, .mw-lightbox__x),
	.mw-pdp .mw-pdp__gallery .mw-pdp__arrow--next {
		inset-inline-end: var(--mw-page-pad);
		justify-items: end;
	}
	.mw-lightbox .mw-lightbox__x {
		inset-block-start: var(--mw-page-pad);
		align-items: start;
	}
}