/* ===== MW Motyw — strona glowna (/) oraz piaskownica /sandbox/ ===== */

/* odstep miedzy sekcjami i przed stopka: utility .mw-sections (tokeny.css) */
.mw-front__main {
	/* Hero jedzie na całą szerokość okna — bez bocznego paddingu strony. */
	width: 100%;
	/* boczny margines strony: --mw-page-pad w tokeny.css, wspolny dla home i listingu (16.09) */
	/* zawartosc slajdow spoza ekranu doliczala sie do szerokosci dokumentu i strona jechala w bok */
	overflow-x: clip;
}

/* ===== HERO: utility w tokeny.css (home, O nas, wpis bloga) od 06.10 ===== */

/* ===== PODKRESLENIE: ksztalt kreski i wariant zjazdu w tokeny.css (utility, wspolne z blogiem) ===== */

/* ------------------------------ MANIFEST: .mw-manifesto* w tokeny.css (od 18.09 takze na karcie, naglowek opinii) ------------------------------ */

/* ------------------------------ KARUZELA ------------------------------ */
/* tasma ma wychodzic poza margines strony (peek), wiec boczny padding siedzi na dzieciach */
.mw-carousel {
	display: grid;
	/* zakladki blizej tasmy niz odstep miedzy kafelkami */
	row-gap: var(--mw-s3);
}

.mw-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-s4);
	padding-inline: var(--mw-page-pad);
}

/* zakladki: wzorzec .mw-tabs/.mw-tab w tokeny.css (wspolny ze /sklep/) */

/* kreska dzieli zestawy od kategorii; bez treści, czytnik jej nie ogłasza */
.mw-carousel__sep {
	align-self: stretch;
	margin-block-end: var(--mw-s1);
	inline-size: 1px;
	background: var(--mw-line);
}

/* krój linku „zobacz wszystko”: utility link-etykieta w tokeny.css */
.mw-view .mw-carousel__more {
	flex: 0 0 auto;
	text-decoration: none;
}

.mw-view .mw-carousel__track {
	display: flex;
	/* kafelek konczy sie na swojej metce: bez tego stretch dokladal pustke pod krotsza nazwa */
	align-items: start;
	gap: var(--mw-tile-gap);
	/* margines po obu stronach: ostatnia karta konczy sie tam, gdzie zaczyna sie pierwsza.
	   Wczesniej koniec byl bez marginesu i ostatnia karta dojezdzala scieta krawedzia ekranu */
	padding-inline: var(--mw-page-pad);
	scroll-padding-inline: var(--mw-page-pad);
	/* bez tego element siatki nie kurczy sie ponizej min-content */
	min-width: 0;
	/* proximity, nie mandatory — mandatory przyciąga palec z powrotem */
	scroll-snap-type: x proximity;
}

/* gest poziomy na krancu pasa cofal strone w historii (Mac, dwa palce); overflow-y: tokeny.css */
.mw-view :is(.mw-carousel__track, .mw-seasons__track) {
	overscroll-behavior-x: contain;
}

/* W ruchu kursor przejezdza nad kolejnymi kafelkami i kazdy odpala hover: strzalki galerii,
   przycisk kupna i probki. Przy jedenastu kafelkach to kilkadziesiat animacji w jednym gescie.
   Na czas przewijania kafelki nie lapia wskaznika, wiec pas jest spokojny. */
.mw-view .mw-carousel__track.is-moving .mw-tile {
	pointer-events: none;
}

/* to, co zdazylo wejsc przed gestem, ma zgasnac od razu, nie doanimowac sie w trakcie */
.mw-view .mw-carousel__track.is-moving :is(.mw-tile__arrow, .mw-tile__buy) {
	opacity: 0;
	transition: none;
}

/* swipe myszą; snap off w trakcie ciągnięcia, inaczej szarpie */
@media (hover: hover) {
	.mw-view :is(.mw-carousel__track, .mw-seasons__track) {
		cursor: grab;
	}

	.mw-view :is(.mw-carousel__track, .mw-seasons__track).is-drag {
		cursor: grabbing;
		scroll-snap-type: none;
		user-select: none;
	}
}

/* element siatki .mw-carousel: bez min-width 0 rozpycha sie do szerokosci pasa */
.mw-view .mw-carousel__panel {
	min-width: 0;
	/* odstep pod pasem po dociagnieciu zakladka (Tomek 12.10) */
	scroll-margin-block-end: var(--mw-s8);
}

.mw-view .mw-carousel__panel[hidden] {
	display: none;
}

/* szerokosc kafelka, nie progi na ilosc: na 4K kafelek roslby ponad 500 px */
.mw-tile {
	flex: 0 0 var(--mw-tile-w);
	scroll-snap-align: start;
}

/* Ostatni kafelek dociaga sie prawa krawedzia, nie lewa. Przy `start` snap probowal ustawic
   go po lewej, na co nie ma juz miejsca, wiec pas zatrzymywal sie z ostatnia karta scieta.
   Peek jest sygnalem „jedz dalej" — na koncu pasa nie ma dokad jechac, wiec ma zniknac. */
.mw-tile:last-child {
	scroll-snap-align: end;
}

/* ===== TEN SAM CIEN NA WSZYSTKICH KADRACH STRONY GLOWNEJ: lista .mw-shadow w tokeny.css ===== */
/* na kontenerze, nie na <img>: kadry maja `overflow: clip`, ktory przycialby cien obrazka */

/* rama sekcji (utility): sezony i opinie */
.mw-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mw-tile-gap);
	padding-inline: var(--mw-page-pad);
	background: var(--mw-paper);
	/* hidden, nie clip: przy clip slajdy spoza ekranu dalej doliczaly sie do szerokosci dokumentu */
	overflow: hidden;
}

/* ===== KATEGORIE. indeks dzialow, nie siatka zdjec ===== */
/* zdjecia dzialow sa niespojne — packshot na bieli obok kadru plenerowego, zaden termin nie ma
   wlasnego obrazka. Wiec sekcje niosa nazwy, a kadr jest JEDEN i podmienia sie pod kursorem */
.mw-cats {
	position: relative;
	display: grid;
	/* piec rownych kolumn: lista, opis i trzy kadry. Ten sam odstep --mw-tile-gap miedzy wszystkim */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: start;
	gap: var(--mw-s5) var(--mw-tile-gap);
	padding-inline: var(--mw-page-pad);
}

/* tytul i link Caly sklep poszly do manifestu nad sekcja (.mw-manifesto--with-link) */
.mw-view .mw-cats__more {
	font-size: var(--mw-fs-xs);
	text-decoration: none;
}

/* to <ul>, wiec scope obowiazkowy — reset zjada padding z samej klasy */
/* lista jest ukladem odniesienia dla paneli: dzieki temu panel zaczyna sie rowno z nia, nie z sekcja */
/* proporcja 2/3 = wysokosc kadru: kadr ma dokladnie szerokosc listy (panel to 4 kolumny + 3 przerwy),
   wiec to lista niesie wysokosc sekcji, a kadry nie musza byc przycinane */
.mw-view .mw-cats__list {
	position: relative;
	display: grid;
	align-content: center;
	aspect-ratio: 2 / 3;
	/* kreska nad lista, wiersz i nazwa: utility „lista wierszy" w tokeny.css */
}

/* od 1800 px lista rozciaga sie na wysokosc kadrow: wysrodkowana krotka lista zostawiala pustke (Tomek 17.09; 1600 -> 1800 = prog wide, audyt 18.09) */
@media (width >= 1800px) { /* bp:wide */
	.mw-view .mw-cats__list {
		align-content: stretch;
		grid-auto-rows: 1fr;
	}

	/* li jest komorka siatki, link w srodku musi ja wypelnic, inaczej kreska wisi w polowie komorki */
	.mw-view .mw-cats__list > li {
		display: grid;
	}

	.mw-view .mw-cats__row {
		flex-wrap: wrap;
		align-content: center;
	}
}

/* od 3000 (jak skalowanie pisma w tokeny.css): wieksze pismo zamiast rozstrzelenia; padding mniejszy, wysokosc daje 1fr */
@media (width >= 3000px) and (height >= 1500px) { /* bp:4k */
	.mw-view .mw-cats__name {
		font-size: var(--mw-fs-xl);
	}
}

/* kursor na wierszu odsuwa pozostale — wygaszenie jest teraz stanem przejsciowym, nie domyslnym */
/* tylko mysz na desktopie: na telefonie tap zostawial reszte wygaszona (Tomek 30.09) */
@media (hover: hover) and (width >= 900px) { /* bp:desktop */
	.mw-view .mw-cats__list:has(.mw-cats__row:hover) .mw-cats__row:not(:hover) {
		color: color-mix(in srgb, var(--mw-ink) 40%, transparent);
	}
}

/* liczba produktow, nie numer porzadkowy: dzialy nie sa sekwencja */
/* kolor z wiersza, zeby licznik gasl razem z nazwa */
.mw-cats__count {
	font-size: var(--mw-fs-xs);
	font-variant-numeric: tabular-nums;
}

/* panele wszystkich dzialow leza w tym samym miejscu po prawej, widac ten spod kursora */
.mw-cats__panel {
	position: absolute;
	/* gora i dol przypiete do listy: kadry maja byc dokladnie jej wysokosci */
	inset-block: 0;
	inset-inline-start: calc(100% + var(--mw-tile-gap));
	/* cztery kolumny siatki plus trzy przerwy miedzy nimi */
	inline-size: calc(400% + 3 * var(--mw-tile-gap));
	display: grid;
	opacity: 0;
	transition: opacity .45s var(--mw-ease);
}

/* cztery pola: opis i trzy kadry — przy pieciu opis robil sie za waski na zdanie */
/* odstep --mw-tile-gap jak w karuzeli, wyborze projektantki i porach roku */
/* dense, bo opis ma przypisane pole i bez tego kadry spadaly do drugiego rzedu */
.mw-cats__shots {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: var(--mw-tile-gap);
	block-size: 100%;
}

/* kadr wypelnia pole panelu, wysokosc daje lista (proporcja 2/3): utility zdjecia w tokeny.css */

/* opis stoi w pierwszym polu rzedu, w tym samym kadrze co zdjecia, bez tla */
.mw-cats__desc {
	display: grid;
	align-content: start;
	gap: var(--mw-s2);
	block-size: 100%;
	overflow: clip;
	padding-inline-end: var(--mw-s3);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-snug);
	color: var(--mw-ink-3);
}

/* opis siada w wskazanym polu rzedu, kadry rozkladaja sie w pozostalych.
   pierwsze pole jest zarezerwowane dla zdjecia, wiec opis chodzi po polach 2-4 */
.mw-cats__desc--slot-2 { grid-column: 2; }
.mw-cats__desc--slot-3 { grid-column: 3; }
.mw-cats__desc--slot-4 { grid-column: 4; }

/* wezszy desktop: ta sama szerokosc panelu, ale trzy pola (opis i dwa kadry), trzeci kadr znika (Tomek 14.09) */
@media (900px <= width < 1356px) { /* bp:wyjatek - trzy pola zamiast czterech ponizej 1356 (Tomek 14.09) */
	.mw-cats__shots {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.mw-view .mw-cats__shot:nth-of-type(3) {
		display: none;
	}
	.mw-cats__desc--slot-4 { grid-column: 3; }
}

/* odstep nad kolejnym naglowkiem, zeby akapity nie zlewaly sie w jeden blok */
.mw-cats__desc-text + .mw-cats__desc-title {
	margin-block-start: var(--mw-s3);
}

/* wybor zostaje po zjechaniu myszka: panel trzyma sie klasy, nie stanu :hover.
   bez JS widac panel pierwszego dzialu, bo klase dostaje juz w szablonie */
.mw-cats__row--active + .mw-cats__panel {
	opacity: 1;
}

/* na telefonie nie ma kursora, wiec kadr wraca do wiersza jako mala winieta */
@media (width < 1024px) { /* bp:wyjatek - kategorie i kolekcje strojone na 1024; na 900-1023 panorama kolekcji ucina glowe (test 18.09) */
	.mw-cats {
		grid-template-columns: minmax(0, 1fr);
	}

	/* bez kadru obok proporcja 2/3 robila puste pudlo, w ktorym wiersze plywaly a border wisial nad nimi */
	.mw-view .mw-cats__list {
		aspect-ratio: auto;
	}

	/* wiersz to link: 48 px pod palec, bez tego wychodzilo 43 */
	.mw-view .mw-cats__row {
		align-items: center;
		min-block-size: var(--mw-control-h);
	}

	/* licznik stopien wyzej (fs-sm), przy fs-xs ginal obok nazwy */
	.mw-cats__count {
		font-size: var(--mw-fs-sm);
	}

	/* bez kursora panel nie ma jak sie pokazac; lista to sama nazwa i licznik */
	.mw-cats__panel {
		display: none;
	}
}

/* ===== PORY ROKU. struktura z Figmy 85:277: dwa wysokie kadry, podpis na dole ===== */
/* cztery pory roku, widoczne dwie: reszta czeka za krawedzia sekcji */
.mw-seasons {
	position: relative;
}

.mw-view .mw-seasons__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(50% - var(--mw-tile-gap) / 2);
	gap: var(--mw-tile-gap);
	/* margines strony, nie padding: padding zostaje w obszarze przewijania i kadr pod niego wjezdza */
	margin-inline: var(--mw-page-pad);
	scroll-snap-type: x mandatory;
}

.mw-seasons__item {
	scroll-snap-align: start;
}

/* baton przy krawedzi: waski pas z nazwa sezonu, ktory czeka poza kadrem */
.mw-view .mw-seasons__edge {
	position: absolute;
	z-index: 1;
	inset-block: var(--mw-s7);
	/* tyle samo co wciecie pasa: baton stoi obok kadru, nie na nim */
	inline-size: var(--mw-page-pad);
	display: grid;
	place-items: center;
	background: var(--mw-milk);
	color: var(--mw-ink);
	transition: background .25s var(--mw-ease);
}

.mw-view .mw-seasons__edge:is(:hover, :focus-visible) {
	background: var(--mw-paper);
}

.mw-seasons__edge--prev {
	inset-inline-start: 0;
}

.mw-seasons__edge--next {
	inset-inline-end: 0;
}

/* nazwa czytana z dolu do gory po lewej i z gory na dol po prawej — obie do srodka sekcji */
.mw-seasons__edge-label {
	writing-mode: vertical-rl;
	font-weight: 500;
	white-space: nowrap;
}

.mw-seasons__edge--prev .mw-seasons__edge-label {
	rotate: 180deg;
}

/* kwadrat z proporcji, nie z clamp: clamp scinal wysokosc na 50rem, wiec powyzej ~1740 px
   kafel plaszczyl sie do prostokata 1,55:1. Minimum zostaje dla waskich ekranow */
.mw-view .mw-seasons__item {
	position: relative;
	display: block;
	aspect-ratio: 1;
	min-block-size: 24rem;
	overflow: clip;
	text-decoration: none;
}

/* telefon i od 1900: 2:3 jak pliki sezonow; podloga 24rem rozpychala kafel i pas wychodzil poza sekcje */
@media (width < 900px), (width >= 1900px) { /* bp:wyjatek - pory roku: telefon i cztery naraz od 1900 (Tomek 17.09) */
	.mw-view .mw-seasons__item {
		min-block-size: 0;
		aspect-ratio: 2 / 3;
	}
}

/* od 1900 px cztery pory naraz, bez slidera i batonow: dwa kafle na FHD to 917 px (Michal 16.09); 1800 zostaje przy dwoch (Tomek 17.09) */
@media (width >= 1900px) { /* bp:wyjatek - pory roku, decyzja Tomka 17.09 (MacBook 1800 zostaje przy sliderze) */
	.mw-view .mw-seasons__track {
		grid-auto-columns: calc(25% - var(--mw-tile-gap) * 3 / 4);
		overflow-x: hidden;
	}

	/* klony petli ze skryptu i batony: bez slidera nie maja czego robic */
	.mw-view :is(.mw-seasons__edge, .mw-seasons__item[aria-hidden="true"]) {
		display: none;
	}

	.mw-seasons .mw-frame-label__name {
		font-size: var(--mw-fs-display);
	}
}

.mw-seasons__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale .6s var(--mw-ease);
}

.mw-view .mw-seasons__item:focus-visible .mw-seasons__image {
	scale: 1.03;
}

/* duch sezonu: drugie ujecie lezy na pierwszym i wchodzi przenikaniem */
.mw-seasons__image--ghost {
	opacity: 0;
	transition: opacity .45s var(--mw-ease), scale .6s var(--mw-ease);
}

.mw-view .mw-seasons__item:focus-visible .mw-seasons__image--ghost {
	opacity: 1;
}
/* telefon: bez przenikania; nieparzyste komplety klonow (data-lap) maja drugie zdjecie, is-lap-flipped (front.php) odwraca to przy przeskoku, wiec kazde okrazenie = inne zdjecie (Tomek 30.09) */
@media (hover: none), (width < 900px) { /* bp:desktop */
	.mw-seasons__image--ghost {
		transition: none;
	}
	.mw-seasons__track:not(.is-lap-flipped) .mw-seasons__item[data-lap] .mw-seasons__image--ghost,
	.mw-seasons__track.is-lap-flipped .mw-seasons__item:not([data-lap]) .mw-seasons__image--ghost {
		opacity: 1;
	}
}
@media (hover: hover) and (width >= 900px) { /* bp:desktop */
	.mw-view .mw-seasons__item:hover .mw-seasons__image {
		scale: 1.03;
	}
	.mw-view .mw-seasons__item:hover .mw-seasons__image--ghost {
		opacity: 1;
	}
}

/* WCAG 1.4.3 — kadry plenerowe bywaja jasne przy dolnej krawedzi */
/* ciemnienie pod podpisem: wspolne dla sezonow i kolekcji, bo podpis .mw-frame-label jest wspolny */
:is(.mw-seasons__item, .mw-collection__frame)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--mw-black) 55%, transparent) 100%);
	pointer-events: none;
}

.mw-frame-label {
	position: absolute;
	z-index: 1;
	inset-block-end: var(--mw-s7);
	inset-inline: var(--mw-s5);
	display: grid;
	justify-items: center;
	gap: var(--mw-s1);
	text-align: center;
	color: var(--mw-on-dark);
}

.mw-frame-label__name {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-hero);
	line-height: var(--mw-lh-tight);
	text-transform: uppercase;
}

/* ===== KOLEKCJE. kadr na cala szerokosc, nazwa na nim, pasek nazw pod spodem ===== */
/* telefon: uklad z kolejnosci DOM (kadr, podpis, nazwa); od 64rem kadry i podpisy leza jedne na drugich */
.mw-collections {
	/* gora i dol 0: odstepy niesie row-gap bloku i strony (80 na telefonie) */
	padding: 0 var(--mw-page-pad);
}

/* --- telefon: kadr, nazwa, opis, po kolei dla kazdej kolekcji --- */
/* kadry i nazwy leza w DOM osobno (pasek ma wlasna szybe), wiec na telefonie zbiera je
   z powrotem order po data-mw-index. Pudelka posrednie znikaja przez display: contents */
.mw-collections__bar,
.mw-collections__list,
.mw-collection {
	display: contents;
}

/* pas przewijany = utility .mw-track (tokeny.css); tu tylko dwa wiersze: kadr, potem opis */
.mw-view .mw-collections__track {
	grid-template-rows: auto auto;
}

/* kolumna z indeksu, wiersz z rodzaju. Zastapilo `order`, ktory przegrywal specyficznoscia */
.mw-collections__track [data-mw-index="0"] { grid-column: 1; }
.mw-collections__track [data-mw-index="1"] { grid-column: 2; }
.mw-collections__track [data-mw-index="2"] { grid-column: 3; }
.mw-collections__track [data-mw-index="3"] { grid-column: 4; }
.mw-collections__track [data-mw-index="4"] { grid-column: 5; }
.mw-view .mw-collection__lead { grid-row: 2; }

/* telefon: nazwe niesie podpis na kadrze, ale kadr ma aria-hidden - link zostaje w drzewie (WCAG 2.4.4, zad. 122) */
@media (width < 1024px) { /* bp:wyjatek - para do bloku kolekcji nizej */
	.mw-view .mw-collection__link {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* fokus z klawiatury: link wraca do ukladu pod opisem, zeby bylo widac, gdzie jest */
	.mw-view .mw-collection__link:focus-visible {
		position: static;
		width: auto;
		height: auto;
		clip-path: none;
		white-space: normal;
	}
}

.mw-view .mw-collection__link {
	font-size: var(--mw-fs-xs);
	letter-spacing: var(--mw-ls-caps);
	text-decoration: none;
	color: var(--mw-ink);
}


/* telefon: opis pod kadrem, najwyzej cztery wiersze — reszta czeka na stronie kolekcji */
.mw-collection__lead {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	margin: 0;
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-base);
	color: var(--mw-ink-3);
}

.mw-view .mw-collection__frame {
	display: block;
	/* podpis i gradient sa absolute wzgledem kadru */
	position: relative;
	grid-row: 1;
	scroll-snap-align: center;
	/* jeden gest = jeden kadr: iOS z rozpedem przeskakiwal (Tomek 30.09) */
	scroll-snap-stop: always;
	inline-size: 100%;
	/* bez tego kadr z szerszym plikiem rozpycha kolumne ponad przydzial siatki */
	min-inline-size: 0;
	/* 2:3 = najwyzszy plik w zestawie: pion zawsze w calosci, szersze pliki traca tylko boki */
	aspect-ratio: 2 / 3;
	overflow: clip;
}

/* --- duzy ekran: jeden kadr na cala sekcje --- */
@media (width >= 1024px) { /* bp:wyjatek - panorama 1800x762 od 900 ucina glowe modelki (test 18.09) */
	.mw-collections {
		position: relative;
		/* sekcja wychodzi poza boczny margines strony: kadr ma dochodzic do krawedzi okna.
		   Padding zostaje zerowy, bo kadry stoja na inset:0 i kazdy padding by je odsunal */
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 0;
		/* 80vh bez aspect-ratio: 98% ekranu bylo za duzo, prog bez przyciecia sylwetki to 83vh */
		block-size: 80vh;
		/* wysokosc paska nazw: odstep kreska-tekst + wiersz + dolny margines.
		   Jedna wartosc dla paska i dla dolnej krawedzi kadru — nie rozjada sie */
		--mw-bar-height: calc(var(--mw-s3) + var(--mw-fs-display) * var(--mw-lh-tight) + var(--mw-s3) + var(--mw-s4));
		/* biel, nie czern: pasek jest na bieli od 01.09, a czern przeswitywala szara kreska na ulamku px (Tomek 18.09) */
		background: var(--mw-paper);
		overflow: clip;
	}

	/* bez zaslony i bez przygaszania kadru — decyzja Tomka 31.08.
	   Czytelnosc napisu ma zalatwiac dobor ciemniejszych zdjec, nie warstwa nad zdjeciem */

	/* pas telefonu znika z ukladu: desktop widzi kadry i opisy jako dzieci sekcji, jak dotad */
	/* scope .mw-view obowiazkowy: bez niego reguła telefonu (0,2,0) wygrywa mimo media query */
	.mw-view .mw-collections__track {
		display: contents;
	}

	/* na desktopie nazwe niesie pasek pod kadrem, wiec podpis na kadrze i gradient znikaja */
	.mw-view .mw-collection__frame .mw-frame-label,
	.mw-view .mw-collection__frame::after {
		display: none;
	}


	/* kadry na sobie; dol konczy sie NAD paskiem nazw, pasek na bialym tle sekcji, nie na zdjeciu */
	.mw-view .mw-collection__frame {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 0;
		inset-block-end: var(--mw-bar-height);
		z-index: 0;
		aspect-ratio: auto;
		opacity: 0;
		pointer-events: none;
		transition: opacity .8s var(--mw-ease);
	}

	.mw-view .mw-collection__image {
		/* sylwetka w poziomym kadrze: srodek ciezkosci wyzej niz srodek pliku, inaczej ucina glowe */
		object-position: center 22%;
	}

	/* pasek nazw bez position i z-index: obie psuja wysokosc kadrow. Warstwe niesie kazdy link */
	/* .mw-view w selektorze (0,2,0) jest konieczne: reset `ul{padding:0}` ma (0,1,1)
	   i bez tego zjada boczny padding, a skrajne nazwy kleja sie do krawedzi okna */
	/* padding trzyma teraz szyba (.mw-collections__bar), lista jest goła */
	.mw-view .mw-collections__list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		column-gap: var(--mw-s4);
		padding: 0;
	}

	/* pasek stoi POD kadrem, na bieli; zero szyby i gradientu, kontrast ten sam przy kazdym zdjeciu */
	/* display wraca z contents (telefon) na block */
	.mw-collections__bar {
		display: block;
		/* wysokosc z tokenow paska: odstep kreska-tekst + wiersz nazwy + dolny margines.
		   Ta sama wartosc odcina dol kadru, wiec zdjecie konczy sie dokladnie nad paskiem */
		block-size: var(--mw-bar-height);
		/* boki = gutter strony, nie sztywne 24 (Tomek 18.09) */
		padding: 0 var(--mw-page-pad) var(--mw-s4);
		/* pasek na bieli, nazwy ciemne — decyzja Tomka 01.09 */
		background: var(--mw-paper);
	}

	.mw-view .mw-collection__link {
		/* na telefonie link jest schowany, tu nazwe niesie pasek */
		display: block;
		position: relative;
		z-index: 3;
		/* 16 nad nazwa i 16 pod nia; kreska zamyka pozycje od dolu */
		padding-block: var(--mw-s3);
		border-block-end: 1px solid var(--mw-line);
		color: var(--mw-ink-3);
		transition: color .3s var(--mw-ease), border-color .3s var(--mw-ease);
	}

	.mw-view .mw-collection__link--active {
		color: var(--mw-ink);
	}

	/* kreska POD nazwa zamalowuje sie przez 5 s — pokazuje czas do nastepnej kolekcji */
	.mw-view .mw-collection__link::before {
		content: "";
		position: absolute;
		inset-block-end: -1px;
		inset-inline: 0;
		block-size: 1px;
		background: var(--mw-ink);
		transform-origin: left;
		scale: 0 1;
		/* najazd rysuje kreske od lewej, jak menu (Tomek 30.09) */
		transition: scale .25s var(--mw-ease);
	}

	.mw-view .mw-collection__link--active::before {
		animation: mw-progress 5s linear forwards;
	}

	/* to samo, co zatrzymuje zegar w skrypcie: kursor i fokus wstrzymuja przewijanie */
	.mw-collections:hover .mw-collection__link--active::before,
	.mw-collections:focus-within .mw-collection__link--active::before {
		animation-play-state: paused;
	}

	/* kursor na nazwie: pelna kreska, nie zatrzymany zegar na zerze (Tomek 14.09); rysuje sie od lewej (30.09) */
	.mw-view .mw-collection__link:is(:hover, :focus-visible)::before {
		animation: none;
		scale: 1 1;
	}

	/* nazwa w pasku o stopien nizej niz tytul sekcji: pasek ma byc nawigacja, nie druga dominanta.
	   Kolor po linku, nie na sztywno: inaczej nie widac, ktora kolekcja jest wybrana */
	/* scope .mw-view, zeby wygrac z regula telefonu (24 px) o tej samej specyficznosci */
	.mw-view .mw-collection__name {
		font-family: var(--mw-serif);
		font-weight: 300;
		font-style: normal;
		font-size: var(--mw-fs-display);
		line-height: var(--mw-lh-tight);
		text-transform: uppercase; /* jak podpis na zdjeciu na telefonie (Tomek 15.10) */
		letter-spacing: 0; /* bez dziedziczenia 0,2 z linku */
	}

	/* klase zapala JS po data-mw-index — kadr nie jest juz rodzenstwem nazwy */
	.mw-view .mw-collection__frame--active {
		opacity: 1;
		pointer-events: auto;
	}

	/* opis przy prawej krawedzi, srodek pionowy: przy trzech akapitach rosnie w obie strony */
	.mw-collection__lead {
		/* bez clampu z telefonu: tu opis ma wlasny sufit i przewijanie */
		display: block;
		-webkit-line-clamp: none;
		position: absolute;
		z-index: 2;
		/* polowa wysokosci KADRU, nie sekcji — kadr konczy sie nad paskiem nazw */
		inset-block-start: calc((100% - var(--mw-bar-height)) / 2);
		/* przyklejony do lewej krawedzi okna */
		inset-inline-start: 0;
		translate: 0 -50%;
		inline-size: 22%;
		/* sufit wysokosci: kadr minus po 24 z gory i z dolu */
		max-block-size: calc(100% - var(--mw-bar-height) - var(--mw-s5));
		overflow: auto;
		padding: var(--mw-s4);
		/* pelna biel: opis ma byc plansza, nie szyba */
		background: var(--mw-paper);
		/* fs-md: drobniej z makiety odpada, klientki 50+ */
		font-size: var(--mw-fs-md);
		color: var(--mw-ink);
		opacity: 0;
		pointer-events: none;
	}

	.mw-collection__lead p + p {
		margin-block-start: var(--mw-s3);
	}

	/* wjazd zza prawej krawedzi. animation, nie transition — reguly sekcji reveal */
	.mw-collection__lead--active {
		/* opoznienie 0,35 s: kadr zdazy sie przenikac, opis wchodzi po nim, nie razem z nim.
		   both, nie forwards — bez tego blok mrugnalby przez czas opoznienia */
		animation: mw-lead-in .6s var(--mw-ease) .35s both;
		pointer-events: auto;
	}
}

/* wjazd zza LEWEJ krawedzi */
@keyframes mw-lead-in {
	from { opacity: 0; translate: -100% -50%; }
	to { opacity: 1; translate: 0 -50%; }
}

@keyframes mw-progress {
	from { scale: 0 1; }
	to { scale: 1 1; }
}

/* ===== OPINIE. struktura z Figmy 84:170: manifest nad sekcja i pas kart (strzalki zdjete 15.09) ===== */
/* pas kart wyjezdza poza margines strony (peek), wiec boczny padding siedzi na dzieciach */
/* link w naglowku karuzeli po prawej */
.mw-carousel__nav {
	display: flex;
	align-items: center;
	gap: var(--mw-s2);
}

/* drugi link pod pasem istnieje dla telefonu; tu naglowek ma swoj */
.mw-view .mw-carousel__foot {
	display: none;
}

/* opinie: komponent wspolny w reviews.css (od 18.09; enqueue z front.php) */


/* sezony: pas siega krawedzi okna, wciecie robia batony */
.mw-band.mw-seasons {
	padding-inline: 0;
}

/* ------------------------------- TELEFON ------------------------------ */
@media (width < 900px) { /* bp:desktop */
	/* hero i naglowek na zdjeciu na telefonie: tokeny.css, sekcja HERO */

	/* fs-xs jak zakladki (.mw-tab w tokeny.css): link w tym samym rzedzie, ta sama skala. Tomek 10.09 */
	.mw-view .mw-carousel__more {
		font-size: var(--mw-fs-xs);
	}

	/* gap 16 zamiast 24: przy waskim kafelku 24 zjadalo za duzo pasa; snap na calej karcie, na wszystkich pasach (Tomek 14.09) */
	.mw-view .mw-carousel__track {
		gap: var(--mw-s3);
		scroll-snap-type: x mandatory;
	}

	/* dociagniecie pasa po zmianie zakladki konczy sie nad dolnym paskiem */
	.mw-view .mw-carousel__panel {
		scroll-margin-block-end: calc(var(--mw-dock-h) + var(--mw-dock-safe) + var(--mw-s3));
	}

	/* naglowek karuzeli = sama tasma zakladek, przewijana. Link pod pasem, strzalki zbedne przy gescie (Tomek 14.09) */
	.mw-carousel__head {
		/* element siatki: bez tego siatka rozciaga go do tresci i tasma nie ma czego przewijac */
		min-inline-size: 0;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-padding-inline: var(--mw-page-pad);
		/* zapas na podkreslenie: overflow-x auto przycina tez w pionie */
		padding-block-end: 2px;
		/* jawnie: gest poziomy przewija pasek (Tomek 18.09: swipe nie lapal na telefonie) */
		touch-action: pan-x pan-y;
	}

	.mw-carousel__head::-webkit-scrollbar {
		display: none;
	}

	/* nowrap i 16 odstepu daje .mw-tabs; tu tylko: nie kurczyc sie w przewijanym naglowku */
	.mw-view .mw-carousel__tabs {
		flex: 0 0 auto;
		overflow-x: visible;
	}

	.mw-carousel__nav {
		display: none;
	}

	.mw-view .mw-carousel__foot {
		display: flex;
		justify-content: center;
		margin: 0;
	}

	/* telefon i tablet: kafelek tak szeroki jak kadr kolekcji i sezonu (78% pasa), nie 200 px. Tomek 14.09 */
	.mw-tile {
		flex: 0 0 78%;
	}

	/* pas do samej krawedzi: pik ma dochodzic do brzegu ekranu, nie urywac sie 8 px wczesniej */
	.mw-view .mw-seasons__track {
		grid-auto-columns: 75%;
		gap: var(--mw-s3);
		margin-inline: 0;
	}

	/* karta w osi kadru, wiec obaj sasiedzi wystaja symetrycznie sami — zero liczenia, zero JS */
	.mw-view .mw-seasons__item {
		scroll-snap-align: center;
		/* jeden gest = jedna karta: iOS z rozpedem przelatywal o dwie (Tomek 30.09) */
		scroll-snap-stop: always;
	}

	/* baton nie niesie tresci ani adresu i dubluje swipe — na dotyku zbedny */
	.mw-view .mw-seasons__edge {
		display: none;
	}
}

/* hero: dwa slowa w jednej komorce, szerokosc z dluzszego (bez skoku linii) */
/* --mw-swap 0..1 = postep przewijania, ustawia front.js; slowa przenikaja sie w tempie scrolla */
.mw-hero__swap {
	--mw-swap: 0;
	display: inline-grid;
}

.mw-hero__word {
	grid-area: 1 / 1;
	opacity: calc(1 - var(--mw-swap));
}

.mw-hero__word--alt {
	opacity: var(--mw-swap);
}

/* slowo z atrybutu: tekst h1 dla wyszukiwarki zostaje jeden */
.mw-hero__word--alt::before {
	content: attr(data-word);
}