/* ===== MW Motyw — KAFELEK PRODUKTU. Jeden komponent: listing, szukajka, 404, karuzela home ===== */
/* Markup: inc/kafelek.php. Uklad kafelka w siatce/pasie daje widok (sklep.css, front.css), nie ten plik. */

/* siatka kafelkow, jedna dla listingu, szukajki i 404: 2 kolumny na telefonie, kolumny --mw-tile-gap jak w karuzeli, rzedy 32 (Tomek 17.09) */
/* kolumna nie wezsza niz kafelek karuzeli (--mw-tile-w), wiec nazwy lamia sie tak samo jak na home (Tomek 17.09); na telefonie sufit = pol siatki, czyli 2 kolumny - bez progu (audyt 18.09) */
.mw-view .mw-siatka {
	display: grid;
	/* full-bleed, 2 kolumny na telefonie, 4-6 na desktopie zaleznie od szerokosci; sufit 6 zamiast kontenera z marginesem (Tomek 21.09) */
	grid-template-columns: repeat(auto-fill, minmax(max(min(var(--mw-tile-w), calc(50% - var(--mw-tile-gap) / 2)), calc((100% - 5 * var(--mw-tile-gap)) / 6)), 1fr));
	gap: var(--mw-s6) var(--mw-tile-gap); /* desktop: rzedy 40 (Tomek 30.09) */
}
/* ponizej 900 kolumny 16 jak gutter strony, rzedy 24; karuzele na home zostaja przy 24 (Tomek 01.10) */
@media (width < 900px) { /* bp:desktop */
	.mw-view .mw-siatka {
		--mw-tile-gap: var(--mw-s3);
		row-gap: var(--mw-s4);
	}
}
/* 4K i macOS 3008: kafelek nie rosnie z pismem 150% (dawal 4 x 716 px), zostaje 420 i wchodzi 6 w rzedzie; tekst w kafelku dalej 150% */
@media (width >= 3000px) and (height >= 1500px) { /* bp:4k */
	.mw-view .mw-siatka {
		--mw-tile-w: 420px;
	}
}

/* kadr: link jest zarazem ramką zdjęcia, bez opakowania pośredniego */
.mw-view .mw-tile__link {
	display: block;
	position: relative;
	aspect-ratio: 2/3;
	overflow: clip;
	background: var(--mw-line);
	text-decoration: none;
}
/* w siatce gest w bok przelacza ujecie (kafelek.js), strona dalej przewija sie w pionie */
.mw-view .mw-siatka .mw-tile__frame {
	touch-action: pan-y;
}

.mw-tile__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .35s var(--mw-ease);
}

/* kolejne ujecia lezą na pierwszym, wiec podmiana to przenikanie, nie przeskok */
.mw-view .mw-tile__image:not(:first-of-type) {
	position: absolute;
	inset: 0;
}

/* zmiana koloru probka: bez przenikania (kafelek.js, Tomek 30.09) */
.mw-view .mw-tile__frame.is-swap .mw-tile__image {
	transition: none;
}

/* `hidden` zostaje w markupie (lazy-load nie ciagnie ukrytych), ale gasimy przezroczystoscia */
.mw-view .mw-tile__image[hidden] {
	display: block;
	opacity: 0;
	pointer-events: none;
}

/* strzalki galerii: ksztalt z utility w tokeny.css; na myszy po najechaniu, na dotyku stoja */
.mw-view .mw-tile__arrow {
	z-index: 1;
	opacity: 0;
	transition: opacity .18s var(--mw-ease);
}

/* pole dotyku 48x48 bez zmiany glifu; kadr ma clip, wiec rosnie tylko do srodka */
.mw-view .mw-tile__arrow::before {
	content: '';
	position: absolute;
	inset-block: calc(-1 * (var(--mw-s2) + var(--mw-s1)));
}

.mw-tile__arrow--prev::before {
	inset-inline: 0 calc(-1 * var(--mw-s4));
}

.mw-tile__arrow--next::before {
	inset-inline: calc(-1 * var(--mw-s4)) 0;
}

/* czern 50 % na bieli = 3,6:1 (WCAG 1.4.11 wymaga 3:1); 30 % dawalo 2,0 */
.mw-view .mw-tile__frame:hover .mw-tile__arrow,
.mw-view .mw-tile__arrow:focus-visible {
	opacity: .5;
}

/* na dotyku strzalki stoja: jawny element zamiast gestu, ktory myli sie z tapem w produkt (Tomek 17.09) */
/* albo < 900: ramka viewporty i emulacja zglaszaja mysz, a maja pokazywac to, co telefon (18.09) */
@media (hover: none), (width < 900px) { /* bp:desktop */
	/* wolne wejscie, szybsze zejscie: 180 ms z desktopu czytalo sie jak mignięcie (Tomek 17.09) */
	.mw-view .mw-tile__arrow {
		transition: opacity .6s var(--mw-ease);
	}

	.mw-view .mw-tile:not(.is-in-view) .mw-tile__arrow {
		transition-duration: .3s;
	}

	.mw-view .mw-tile.is-in-view .mw-tile__arrow {
		opacity: .5;
	}
}

/* rama pod próbki na kadrze; przycisk nie może siedzieć w <a> */
/* cień odcina packshot na białym tle od jasnej strony */
.mw-tile__frame {
	position: relative;
	/* cien: .mw-shadow w tokeny.css */
	/* pasek kupna wysuwa sie zza dolnej krawedzi: to, co ponizej, ma byc niewidoczne */
	overflow: clip;
}


/* probki: prawy gorny rog kadru, poza linkiem (wersja D, Tomek 30.09); tap w kolko = kolor, tap w zdjecie = produkt */
.mw-tile__frame > .mw-tile__swatches {
	position: absolute;
	z-index: 2;
	inset: var(--mw-s2) var(--mw-s2) auto auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	/* wiele kolorow: zawija do kolejnego rzedu, nie wychodzi poza kadr */
	max-inline-size: calc(100% - 2 * var(--mw-s2));
	/* 8 miedzy kolkami w rzedzie, 4 miedzy rzedami (Tomek 08.10); obwodka wybranej (1 + 2) miesci sie */
	gap: var(--mw-s1) var(--mw-s2);
}

/* kolko 24 = cale pole 24, cel dotykowy WCAG 2.5.8 (MW-32, Tomek 08.10; bylo 16 w 24) */
.mw-view .mw-tile__swatch {
	display: grid;
	place-items: center;
	width: var(--mw-s4);
	height: var(--mw-s4);
	padding: 0;
}

.mw-tile__swatch::before {
	content: "";
	width: var(--mw-s4);
	height: var(--mw-s4);
	border-radius: 50%;
	background: var(--mw-swatch);
	/* kreska w srodku na jasne probki; jasny pierscien i cien na zewnatrz odcinaja probke od kazdego zdjecia */
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mw-ink) 25%, transparent), var(--mw-shadow-on-photo);
}

/* wybrana: czarna obwodka z przerwa, bez bialego pierscienia (Tomek 30.09) */
.mw-view .mw-tile__swatch[aria-pressed="true"]::before {
	outline: 1px solid var(--mw-ink);
	outline-offset: 2px;
}


/* pasek z Figmy 326:2 (Tomek 30.09): szyba 90 %, napis i rozmiary tekstem */
.mw-tile__buy {
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	inset-block-end: 0;
	padding-block: var(--mw-s3) 0;
	background: var(--mw-milk);
	opacity: 0;
	/* visibility: schowany pasek lezy nad meta i bez tego lapal klikniecia w nazwe */
	visibility: hidden;
	translate: 0 100%;
	transition: opacity .18s var(--mw-ease), translate .18s var(--mw-ease), visibility 0s .18s;
}

/* napis paska i etykieta arkusza */
.mw-view .mw-tile__buy-cta,
.mw-view .mw-sheet__label {
	display: block;
	text-align: center;
	line-height: 1;
	color: var(--mw-ink);
	/* pismo: drobna etykieta wersalikami w tokeny.css */
}
.mw-view .mw-tile__buy-cta {
	font-size: var(--mw-fs-sm);
	font-weight: 500;
}

/* rozmiary: wyglad z utility .mw-choice-group (tokeny.css), ten sam co na karcie produktu (Tomek 30.09) */
.mw-view .mw-tile__sizes {
	justify-content: center;
	margin-block-start: var(--mw-s1);
}

/* telefon: JEDEN wspolny arkusz rozmiarow (tworzy go skrypt), wjezdza z dolu ekranu. Szerokosc, nie hover: DevTools zglasza hover przy myszy */
.mw-view .mw-sheet {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	/* nad dolnym paskiem (45): arkusz go zakrywa, tap poza kafelkiem zamyka. Tomek 14.09 */
	z-index: 46;
	/* dol niesie margines kart plus bezpieczna strefa iPhone'a, nie padding arkusza */
	padding: var(--mw-s3) var(--mw-page-pad) env(safe-area-inset-bottom);
	border-block-start: 1px solid var(--mw-line);
	/* mleko jak szyba naglowka: utility w tokeny.css (Tomek 14.09) */
	visibility: hidden;
	translate: 0 100%;
	transition: translate .18s var(--mw-ease), visibility 0s .18s;
}

.mw-view .mw-sheet.is-open {
	visibility: visible;
	translate: 0 0;
	transition-delay: 0s;
}

/* desktop z myszka: hover kadru. Warunek podwojny — szerokosc, bo ponizej 900 pasek jest arkuszem; hover, bo iOS odpala :hover na tap */
@media (width >= 900px) and (hover: hover) { /* bp:desktop */
	/* najazd na kafelek: caly pasek od razu, napis i rozmiary (Figma 326:2, Tomek 30.09) */
	.mw-view .mw-tile:hover .mw-tile__buy {
		opacity: 1;
		visibility: visible;
		translate: 0 0;
		transition-delay: 0s;
	}
}

/* plus po prawej, nazwa i cena po lewej; plus siega przez oba rzedy, wiec rzad nie rosnie */
/* nazwa na calej szerokosci, pod nia cena z lewej i probki z prawej w jednym wierszu, plus w trzeciej kolumnie (telefon od 18.09, desktop od 22.09) */
.mw-tile__meta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--mw-s1) var(--mw-s2);
	min-width: 0;
	/* 8 pod zdjeciem, nie 16 (Tomek 30.09) */
	padding-block-start: var(--mw-s2);
}

/* rozmiar: progi nizej; bez rezerwy dwoch linii (Tomek 22.09), ceny w rzedzie moga sie rozjechac */
.mw-view .mw-tile__name {
	grid-column: 1 / span 2;
	line-height: var(--mw-lh-snug);
	text-decoration: none;
}

/* cena wlasnym fontem, ten sam stopien i interlinia co nazwa: w wierszu stoja rowno (Tomek 30.09) */
.mw-tile__price {
	font-weight: 300;
	line-height: var(--mw-lh-snug);
	color: var(--mw-ink);
}

/* cena promocyjna <del><ins>: nowa w kolorze promocji jak na karcie, stara tym samym stopniem (ledwo bylo widac, Tomek 12.10) */
.mw-view .mw-tile__price ins {
	text-decoration: none;
	font-weight: 400;
	color: var(--mw-promo);
}

.mw-view .mw-tile__price del {
	color: var(--mw-ink-3);
}

/* promocja, telefon: nowa cena, stara z prawej obok; DOM ma del przed ins */
.mw-view .mw-tile__price:has(del) {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: baseline;
	column-gap: var(--mw-s2);
}

/* kolor w osobnej linii pod nazwa (Michal 21.07); listing ma kolor na kafelek, wiec nazwa go nie niesie */
.mw-view .mw-tile__color {
	display: block;
	font-size: var(--mw-fs-sm);
	color: var(--mw-ink-3);
}

/* znacznik promocji: sam tekst w kolorze promocji, lewy gorny rog; klocek zajmowal 33 % kadru i zaslanial twarz na telefonie */
.mw-view .mw-tile__badge {
	position: absolute;
	z-index: 1;
	inset-block-start: var(--mw-s2);
	inset-inline-start: var(--mw-s2);
	/* pismo: drobny druk wersalikami w tokeny.css */
	/* bordo plytka, bialy napis, 4/8 (Tomek 17.09, wybor A po sandboxie); czytelna tez na granacie i czerni */
	color: var(--mw-on-dark);
	/* wysokosc pola kolka (24) i ta sama gora: znacznik i kolka w jednej linii (Tomek 30.09) */
	display: flex;
	align-items: center;
	block-size: var(--mw-s4);
	padding-inline: var(--mw-s2);
	background: var(--mw-promo);
	pointer-events: none;
}
/* monitor: wiekszy znacznik, 16 na 32 (14 na 24 ledwo bylo widac, Tomek 12.10) */
@media (width >= 900px) { /* bp:desktop */
	.mw-view .mw-tile__badge {
		font-size: var(--mw-fs-base);
		block-size: var(--mw-s5);
	}
}

/* plus: trzecia kolumna, od gornego rzedu (widoczny tylko ponizej 900) */
.mw-view .mw-tile__quick {
	/* kotwica dla .mw-sr w srodku: bez niej span absolute liczy sie od <html>, dokument rosnie do 2354 px i telefon oddala strone (14.09) */
	position: relative;
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: start;
	display: grid;
	place-items: center;
	color: var(--mw-ink);
}

.mw-view .mw-tile__quick[aria-expanded="true"] svg {
	rotate: 45deg;
}

/* od 900 px pasek otwiera hover: plus zbedny */
@media (width >= 900px) { /* bp:desktop */
	.mw-view .mw-tile__quick {
		display: none;
	}
	/* od ekranu, nie od kafelka: listing i karuzela home rowno; min. 16 (MW-29, Tomek 08.10; bylo 15), 20 od Full HD */
	.mw-view :is(.mw-tile__name, .mw-tile__price) {
		font-size: clamp(var(--mw-fs-base), 1.25vw - var(--mw-s1), calc(var(--mw-fs-md) + var(--mw-s1) / 2));
	}
}
/* 4K: pismo x1,5 z html juz daje 27 px, dalej nie rosnie */
@media (width >= 3000px) and (height >= 1500px) { /* bp:4k */
	.mw-view :is(.mw-tile__name, .mw-tile__price) {
		font-size: var(--mw-fs-md);
	}
}

.mw-tile__meta > .mw-tile__price {
	grid-column: 1;
	grid-row: 2;
	align-self: center;
	white-space: nowrap;
}
@media (width < 900px) { /* bp:desktop */
	/* plus 24x24 na telefonie (Tomek 18.09), 44 z ujemnymi marginesami zabieralo trzecia probke */
	.mw-view .mw-tile__quick {
		min-width: var(--mw-s4);
		min-height: var(--mw-s4);
		margin: 0;
	}
	/* pole dotyku 48x48 pseudoelementem: glif i siatka bez zmian */
	.mw-view .mw-tile__quick::before {
		content: '';
		position: absolute;
		inset: calc(-1 * (var(--mw-s2) + var(--mw-s1)));
	}
	/* telefon: nazwa plynnie 16-18, cena 16 (MW-29, Tomek 08.10; bylo 16 i 14 na 390) */
	.mw-view .mw-tile__name {
		font-size: clamp(var(--mw-fs-base), 4.1vw, var(--mw-fs-md));
	}
	.mw-view .mw-tile__price {
		font-size: var(--mw-fs-base);
	}
}
/* telefon: kolka i znacznik blizej brzegu, znacznik mniejszy, zeby zmiescil sie obok kolek (Tomek 30.09) */
@media (width < 600px) { /* bp:phone */
	.mw-view .mw-tile__badge {
		font-size: var(--mw-fs-xs); /* 14, bylo 11 (Tomek 12.10) */
		letter-spacing: var(--mw-ls-caps-sm);
		inset-block-start: var(--mw-s1);
		inset-inline-start: var(--mw-s1);
	}
	.mw-tile__frame > .mw-tile__swatches {
		inset: var(--mw-s1) var(--mw-s1) auto auto;
	}
	/* sam znak %: kwadrat 24 jak pole kolka, pismo etykiet (11 px bylo niewidoczne, Tomek 30.09) */
	.mw-view .mw-tile__badge:has(.mw-tile__badge-short) {
		justify-content: center;
		min-inline-size: var(--mw-s4);
		padding-inline: 0;
		font-size: var(--mw-fs-xs);
	}
	/* slowo „Promocja" nachodzilo na kolka: .mw-tile__badge-full tylko dla czytnika (tokeny.css) */
}
@media (width >= 600px) { /* bp:phone */
	.mw-tile__badge-short {
		display: none;
	}
}
/* monitor: nazwa z lewej i cena z prawej w jednym wierszu (Tomek 30.09) */
@media (width >= 900px) { /* bp:desktop */
	.mw-tile__meta {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
	}
	.mw-view .mw-tile__name {
		grid-column: 1;
	}
	.mw-tile__meta > .mw-tile__price {
		grid-column: 2;
		grid-row: 1;
		align-self: baseline;
		text-align: end;
	}
	/* monitor: nowa cena na gorze, stara pod nia */
	.mw-view .mw-tile__meta > .mw-tile__price:has(del) {
		flex-direction: column-reverse;
		align-items: flex-end;
	}
	/* rozmiary w jednym wierszu: kwadrat 44, mniejszy tylko gdy wszystkie sie nie mieszcza */
	.mw-view .mw-tile__sizes.mw-choice-group {
		flex-wrap: nowrap;
		column-gap: 0;
		inline-size: 100%;
	}
	/* elementem flex jest li: kurczy sie tylko przy braku miejsca, przycisk wypelnia go jako kwadrat */
	.mw-view .mw-tile__sizes.mw-choice-group > li {
		flex: 0 1 var(--mw-control-h);
		min-inline-size: 0;
	}
	.mw-view .mw-tile__sizes.mw-choice-group .mw-tile__size {
		inline-size: 100%;
		min-inline-size: 0;
		min-block-size: 0;
		aspect-ratio: 1;
	}
}
@media (width >= 1800px) { /* bp:wide */
	.mw-view .mw-tile__sizes.mw-choice-group {
		column-gap: var(--mw-s2);
	}
}