/* ===== MW Motyw — strona glowna. Jedzie na / oraz na /home/ ===== */

.mw-front__main {
	/* jeden odstep miedzy sekcjami, zamiast paddingow i marginesow sasiadow */
	display: grid;
	/* minmax(0,1fr), nie 1fr: przewijane pasy rozpychaly kolumne do 6314 px */
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--mw-section-gap);
	/* Hero jedzie na całą szerokość okna — bez bocznego paddingu strony. */
	width: 100%;
	/* JEDNO zrodlo bocznego marginesu strony glownej: zmieniasz tu, zmienia sie wszedzie */
	/* na telefonie 64 z kazdej strony zjadaloby jedna trzecia szerokosci, wiec clamp */
	--mw-page-pad: clamp(var(--mw-s4), 1.5vw, var(--mw-s8));
	/* zawartosc slajdow spoza ekranu doliczala sie do szerokosci dokumentu i strona jechala w bok */
	overflow-x: clip;
}

/* ===== HERO. defekt 13 zamkniety: <img>, nie tlo CSS ===== */
.mw-hero {
	position: relative;
	/* svh, nie vh. vh skacze pod paskiem adresu na mobile */
	/* minus pasek ogloszen: naglowek lezy NA zdjeciu, wiec miejsca nie zabiera, a pasek tak */
	min-height: calc(100svh - var(--mw-bar-h));
	/* clip, nie hidden — hidden robi z tego scroll-container */
	overflow: clip;
	background: var(--mw-black);
}

/* Wymiary w atrybutach + object-fit = zero CLS zanim obraz dojdzie */
.mw-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}

/* WCAG 1.4.3 — zdjecie bywa jasne pod napisem */
.mw-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mw-scrim);
	pointer-events: none;
}

.mw-hero__inner {
	position: absolute;
	z-index: 1;
	inset-block-start: 42%;
	inset-inline-start: var(--mw-page-pad);
	max-width: calc(100% - 2 * var(--mw-page-pad));
	color: var(--mw-on-dark);
}

/* ===== DWA STOPNIE NAGLOWKA. sekcja-bohater i sekcja sluzebna ===== */
/* bohater: hero, wybor projektantki, opinie, nazwa modelu w banerze */
:is(.mw-hero__title, .mw-picks__title, .mw-section-title, .mw-feature__title-name) {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-hero);
	line-height: 1.05;
	letter-spacing: -.03em;
}

/* JEDNA klasa na tytul sekcji: opinie, kategorie, kolekcje. Roznice zostawia kontekst
   (wyrownanie w opiniach) albo modyfikator (kolor na kadrze) — nie osobna klasa per sekcja */
.mw-section-title--on-dark {
	color: var(--mw-on-dark);
}

/* wersaliki tylko na etykiecie wyboru projektantki — hero i nazwa modelu to nie etykiety */
.mw-picks__title {
	text-transform: uppercase;
}

/* sluzebna: newsletter */
.mw-newsletter__title {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-display);
	line-height: var(--mw-lh-tight);
}

.mw-hero__title {
	/* tytul z panelu bywa dlugi — ma sie zawinac, nie urwac */
	text-wrap: balance;
}

/* akcent w drugiej polowie frazy — waga, nie kursywa */
.mw-hero__title-accent {
	font-weight: 500;
	font-style: normal;
}

.mw-hero__lead {
	padding-block-start: var(--mw-s3);
	font-family: var(--mw-body);
	font-size: var(--mw-fs-lg);
	line-height: var(--mw-lh-snug);
}

.mw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mw-s3) var(--mw-s5);
	margin-block-start: var(--mw-s3);
}

/* scope 0,2,0 — reset na tagu `a` (0,1,1) bije samo .mw-hero__link */
.mw-view .mw-hero__link {
	position: relative;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-base);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mw-on-dark);
	text-decoration: none;
	padding-block-end: var(--mw-s1);
}

/* ===== PODKRESLENIE — jeden mechanizm, dwa warianty ===== */
/* wjazd: kreska rosnie na hover. zjazd: stoi i chowa sie. obie od lewej */
/* kolor z currentColor, wiec komponent nie powtarza wartosci */
.mw-view :is(.mw-hero__nav-group a, .mw-hero__link, .mw-carousel__tab, .mw-carousel__more, .mw-cats__more, .mw-feature__cta)::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: currentColor;
	transform-origin: left;
	transition: transform .25s var(--mw-ease);
}

.mw-view :is(.mw-hero__nav-group a, .mw-carousel__tab)::after {
	transform: scaleX(0);
}

.mw-view :is(.mw-hero__nav-group a, .mw-carousel__tab):is(:hover, :focus-visible)::after,
.mw-view .mw-carousel__tab[aria-selected="true"]::after {
	transform: scaleX(1);
}

.mw-view :is(.mw-hero__link, .mw-carousel__more, .mw-cats__more, .mw-feature__cta):is(:hover, :focus-visible)::after {
	transform: scaleX(0);
}

/* nota w rogu zdjecia — tresc spoza bloku tytulowego */
.mw-hero__note {
	position: absolute;
	z-index: 1;
	inset-block-end: var(--mw-s4);
	inset-inline-end: var(--mw-page-pad);
	max-width: 26rem;
	text-align: end;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-base);
	letter-spacing: .02em;
	color: var(--mw-on-dark);
}

/* obrys z resetu jest czarny, na zdjeciu niewidoczny (WCAG 2.4.7) */
.mw-hero a:focus-visible {
	outline-color: var(--mw-on-dark);
	outline-offset: 3px;
}

/* telefon obsluguje sekcja 899px na koncu pliku, zgodna z piaskownica */

/* ===== PORT Z /hero/. scope tylko .mw-view. STACK 13c ===== */

/* naglowek lezy NA zdjeciu hero: ujemny margines zdejmuje jego wysokosc z przeplywu */
.mw-home .mw-header {
	margin-block-end: calc(-1 * var(--mw-header-h));
	background: transparent;
	border-block-end-color: transparent;
}
.mw-home .mw-header a,
.mw-home .mw-header button {
	color: var(--mw-on-dark);
}
.mw-home .mw-header a:hover,
.mw-home .mw-header button:hover {
	color: var(--mw-ecru);
}
.mw-home .mw-hamburger__kreski,
.mw-home .mw-hamburger__kreski::before,
.mw-home .mw-hamburger__kreski::after {
	background: var(--mw-on-dark);
}

/* mega-menu ma wlasne jasne tlo, wiec jego tresc zostaje ciemna takze na hero */
.mw-home .mw-megamenu a {
	color: var(--mw-ink);
}
.mw-home .mw-megamenu a:hover {
	color: var(--mw-taupe);
}

/* jasny pasek w dwoch sytuacjach: po zejsciu z hero i przy otwartej nakladce */
.mw-home .mw-header:is(.mw-header--stuck, :has(.mw-menu__has-children:is(:hover, :focus-within))) {
	background: var(--mw-paper);
}
.mw-home .mw-header--stuck {
	border-block-end-color: var(--mw-line);
}
/* przy otwartej nakladce kreska znika: pasek i nakladka to jedna plaszczyzna */
.mw-home .mw-header:has(.mw-menu__has-children:is(:hover, :focus-within)) {
	border-block-end-color: transparent;
}
.mw-home .mw-header:is(.mw-header--stuck, :has(.mw-menu__has-children:is(:hover, :focus-within))) a,
.mw-home .mw-header:is(.mw-header--stuck, :has(.mw-menu__has-children:is(:hover, :focus-within))) button {
	color: var(--mw-ink);
}
.mw-home .mw-header:is(.mw-header--stuck, :has(.mw-menu__has-children:is(:hover, :focus-within))) a:hover,
.mw-home .mw-header:is(.mw-header--stuck, :has(.mw-menu__has-children:is(:hover, :focus-within))) button:hover {
	color: var(--mw-taupe);
}
.mw-home .mw-header:is(.mw-header--stuck, :has(.mw-menu__has-children:is(:hover, :focus-within))) .mw-hamburger__kreski,
.mw-home .mw-header:is(.mw-header--stuck, :has(.mw-menu__has-children:is(:hover, :focus-within))) .mw-hamburger__kreski::before,
.mw-home .mw-header:is(.mw-header--stuck, :has(.mw-menu__has-children:is(:hover, :focus-within))) .mw-hamburger__kreski::after {
	background: var(--mw-ink);
}

/* sekcje same niosa swoj oddech, wiec stopka przykleja sie do ostatniej */
.mw-home .mw-footer {
	margin-block-start: 0;
}

/* baner ciasteczek zaslania dol hero. adres roboczy, noindex, wiec gasimy */
.mw-home #cookie-notice {
	display: none !important;
}

/* --------- NAWIGACJA NA ZDJĘCIU --------- */
.mw-hero__nav {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--mw-s4);
	padding: var(--mw-s4) var(--mw-page-pad);
	color: var(--mw-on-dark);
}

.mw-hero__nav-group {
	display: flex;
	gap: var(--mw-s4);
	flex: 1 1 0;
}

.mw-hero__nav-group--end {
	justify-content: flex-end;
}

/* hamburger — tylko telefon */
.mw-hero__burger {
	display: none;
	flex: 1 1 0;
}

.mw-hero__burger-lines,
.mw-hero__burger-lines::before,
.mw-hero__burger-lines::after {
	content: "";
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--mw-on-dark);
}

/* translate, nie top — top poza transition, kreski skakały */
.mw-hero__burger-lines {
	position: relative;
}

.mw-hero__burger-lines::before,
.mw-hero__burger-lines::after {
	transition: transform .25s var(--mw-ease), translate .25s var(--mw-ease);
}

.mw-hero__burger-lines::before {
	position: absolute;
	translate: 0 -7px;
}

.mw-hero__burger-lines::after {
	position: absolute;
	translate: 0 7px;
}

.mw-hero__burger[aria-expanded="true"] .mw-hero__burger-lines {
	background: transparent;
}

.mw-hero__burger[aria-expanded="true"] .mw-hero__burger-lines::before {
	translate: 0 0;
	transform: rotate(45deg);
}

.mw-hero__burger[aria-expanded="true"] .mw-hero__burger-lines::after {
	translate: 0 0;
	transform: rotate(-45deg);
}

/* panel mobilny — to <ul>, reset zjada padding bez scope'u */
.mw-view .mw-hero__panel {
	display: none;
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: 3;
	background: color-mix(in srgb, var(--mw-black) 92%, transparent);
	padding: var(--mw-s4);
}

/* stan z atrybutu przycisku, nie z klasy — jedno źródło prawdy */
.mw-view .mw-hero__burger[aria-expanded="true"] ~ .mw-hero__panel {
	display: flex;
	flex-direction: column;
	gap: var(--mw-s3);
}

.mw-view :is(.mw-hero__panel, .mw-hero__nav-group) a {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-snug);
	letter-spacing: .02em;
	color: var(--mw-on-dark);
	text-decoration: none;
}

/* tylko linki w grupach — logo podkreślenia nie dostaje */
.mw-view .mw-hero__nav-group a {
	position: relative;
	padding-block-end: var(--mw-s1);
}

.mw-hero__logo {
	flex: 0 0 auto;
}

/* licznik koszyka w nawigacji na zdjęciu */
.mw-hero__cart {
	position: relative;
}

.mw-hero__licznik {
	position: absolute;
	inset-block-start: -8px;
	inset-inline-end: -12px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	background: var(--mw-on-dark);
	color: var(--mw-ink);
	border-radius: 999px;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: 0;
}

/* wskaźnik scrolla */
.mw-hero__scroll {
	position: absolute;
	z-index: 2;
	inset-block-end: var(--mw-s5);
	inset-inline-start: 50%;
	translate: -50% 0;
	/* nie opacity — dziedziczy na potomków */
	color: var(--mw-on-dark-fade);
	pointer-events: none;
}

.mw-hero__scroll svg {
	width: 32px;
	height: 32px;
	animation: mw-scroll-hint 2.4s ease-in-out infinite;
}

@keyframes mw-scroll-hint {
	0%, 70%, 100% { translate: 0 0; }
	35% { translate: 0 6px; }
}

.mw-hero button:focus-visible {
	outline-color: var(--mw-on-dark);
	outline-offset: 3px;
}

/* ------------------------------ MANIFEST ------------------------------ */
.mw-manifesto {
	padding-inline: var(--mw-page-pad);
}

.mw-manifesto__text {
	max-width: var(--mw-max);
	font-family: var(--mw-serif);
	font-weight: 400;
	font-size: var(--mw-fs-display);
	line-height: var(--mw-lh-tight);
}

/* drugi blok stoi przy prawej krawedzi, zeby oba nie zaczynaly sie w tym samym miejscu */
.mw-manifesto--right {
	text-align: end;
}

.mw-manifesto--right .mw-manifesto__text {
	margin-inline-start: auto;
}

.mw-manifesto__text em {
	font-style: italic;
}

/* eyebrow w linii ze zdaniem, nie nad nim — dlatego inline */
.mw-manifesto__eyebrow {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mw-ink-3);
	margin-inline-end: var(--mw-s2);
	white-space: nowrap;
	/* wyrównanie do wersalików, nie do linii bazowej */
	vertical-align: .35em;
}

/* ------------------------------ 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);
	column-gap: var(--mw-s4);
}

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

.mw-carousel__tabs {
	display: flex;
	align-items: center;
	gap: var(--mw-s5);
	flex-wrap: wrap;
}

/* 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-2);
}

.mw-view :is(.mw-carousel__tab, .mw-carousel__more, .mw-cats__more) {
	position: relative;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-sm);
	letter-spacing: .18em;
	text-transform: uppercase;
	padding-block-end: var(--mw-s1);
}

.mw-view .mw-carousel__tab {
	color: var(--mw-ink-3);
	transition: color .2s var(--mw-ease);
}

.mw-view .mw-carousel__tab:hover,
.mw-view .mw-carousel__tab[aria-selected="true"] {
	color: var(--mw-ink);
}

.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-s4);
	/* start rowno z reszta strony, koniec bez marginesu — ostatni kafelek ma byc przyciety krawedzia */
	padding-inline-start: var(--mw-page-pad);
	scroll-padding-inline-start: var(--mw-page-pad);
	/* bez tego element siatki nie kurczy sie ponizej min-content */
	min-width: 0;
	overflow-x: auto;
	/* proximity, nie mandatory — mandatory przyciąga palec z powrotem */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

/* gest poziomy na krancu pasa cofal strone w historii (Mac, dwa palce) */
.mw-view :is(.mw-carousel__track, .mw-seasons__track, .mw-reviews__list, .mw-lookbook__list) {
	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-ruch .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-ruch :is(.mw-tile__arrow, .mw-tile__buy, .mw-tile__swatches) {
	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, .mw-reviews__list, .mw-lookbook__list) {
		cursor: grab;
	}

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

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

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

/* szerokosc kafelka, nie progi na ilosc: na 4K kafelek roslby ponad 500 px */
.mw-tile {
	flex: 0 0 clamp(280px, 20vw, 420px);
	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;
}

/* 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;
}

.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;
}

/* `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 na kadrze. na myszy pokazuja sie po najechaniu, na dotyku stoja */
.mw-view .mw-tile__arrow {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--mw-ink);
	background: color-mix(in srgb, var(--mw-paper) 82%, transparent);
	opacity: 0;
	transition: opacity .18s var(--mw-ease), background .18s var(--mw-ease);
}

.mw-tile__arrow--prev {
	inset-inline-start: var(--mw-s2);
}

.mw-tile__arrow--next {
	inset-inline-end: var(--mw-s2);
}

.mw-view .mw-tile__frame:hover .mw-tile__arrow,
.mw-view .mw-tile__arrow:focus-visible {
	opacity: 1;
}

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

@media (hover: none) {
	.mw-view .mw-tile__arrow {
		opacity: 1;
	}
}

/* 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 {
	/* wysokosc paska "do koszyka"; probki podnosza sie o tyle samo, zeby nie zniknely pod nim */
	--mw-tile-buy-h: var(--mw-s6);
	position: relative;
	box-shadow: var(--mw-shadow-0);
}

/* ===== TEN SAM CIEN NA WSZYSTKICH KADRACH STRONY GLOWNEJ ===== */
/* na kontenerze, nie na <img>: kadry maja `overflow: clip`, ktory przycialby cien obrazka */
.mw-view :is(.mw-seasons__item, .mw-picks__feature .mw-frame, .mw-picks__media, .mw-cats__shot, .mw-reviews__item) {
	box-shadow: var(--mw-shadow-0);
}

/* lewy dolny róg kadru, bez odstępu; poza <a>, więc duch tu gaśnie — celowo */
.mw-tile__swatches {
	position: absolute;
	z-index: 1;
	inset-block-end: 0;
	inset-inline-start: 0;
	/* kwadraty stykaja sie bokami — pasek koloru, nie rzad kropek */
	display: flex;
	transition: translate .18s var(--mw-ease), opacity .18s var(--mw-ease);
}

.mw-view .mw-tile__swatch {
	/* cel dotykowy; kolor wypelnia caly przycisk, wiec zero paddingu */
	width: 24px;
	height: 24px;
	padding: 0;
}

/* kolor na pseudo — box-shadow nie zna background-clip, obrys musi byc tutaj */
.mw-tile__swatch::before {
	--mw-ring: 0 0 0 0 transparent;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--mw-swatch);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mw-ink) 18%, transparent), var(--mw-ring);
}

/* wybrany dostaje obrys do srodka — kwadraty stykaja sie, wiec pierscien na zewnatrz nie ma miejsca */
.mw-tile__swatch[aria-pressed="true"]::before {
	--mw-ring: inset 0 0 0 2px var(--mw-paper), inset 0 0 0 3px var(--mw-ink);
}

/* jedna szyba: tlo i rozmycie na kontenerze, pasek i rozmiary dziela je kreskami */
.mw-tile__buy {
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	inset-block-end: 0;
	background: color-mix(in srgb, var(--mw-paper) 72%, transparent);
	backdrop-filter: blur(10px);
	opacity: 0;
	translate: 0 100%;
	transition: opacity .18s var(--mw-ease), translate .18s var(--mw-ease);
}

.mw-view .mw-tile__buy-cta,
.mw-view .mw-tile__size {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: var(--mw-tile-buy-h);
	padding-inline: var(--mw-s2);
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mw-ink);
}

/* rozmiary rowno dziela szerokosc kadru; zwiniete do zera i przyciete —
   po najechaniu na pasek wysuwaja sie spod niego */
.mw-view .mw-tile__sizes {
	display: flex;
	max-block-size: 0;
	overflow: clip;
	list-style: none;
	transition: max-block-size .18s var(--mw-ease);
}

.mw-view .mw-tile__buy:hover .mw-tile__sizes {
	max-block-size: var(--mw-tile-buy-h);
}

.mw-tile__sizes > li {
	flex: 1 1 0;
	min-inline-size: 0;
	/* kreski zamiast przerw — jedna plaszczyzna, nie kafelki na zdjeciu */
	/* kreska przezroczysta, nie token na bieli — szyba ma 72%, wiec pelny kolor swiecilby na ciemnym zdjeciu */
	border-inline-start: 1px solid color-mix(in srgb, var(--mw-ink) 12%, transparent);
	border-block-start: 1px solid color-mix(in srgb, var(--mw-ink) 12%, transparent);
}

.mw-tile__sizes > li:first-child {
	border-inline-start: 0;
}

.mw-view .mw-tile__size:is(:hover, :focus-visible) {
	color: var(--mw-on-dark);
	background: color-mix(in srgb, var(--mw-black) 86%, transparent);
}

/* rozmiar, ktorego nie ma w tym kolorze: widoczny, ale nieklikalny */
.mw-view .mw-tile__size--brak {
	color: var(--mw-on-dark-3);
	background: color-mix(in srgb, var(--mw-taupe) 86%, transparent);
}

.mw-view .mw-tile__frame:hover .mw-tile__buy {
	opacity: 1;
	translate: 0 0;
}

.mw-view .mw-tile__frame:hover .mw-tile__swatches {
	translate: 0 calc(-1 * var(--mw-tile-buy-h));
}

/* przy rozwinietych rozmiarach probki znikaja — wybierasz teraz rozmiar, nie kolor */
.mw-view .mw-tile__frame:has(.mw-tile__buy:hover) .mw-tile__swatches {
	opacity: 0;
	pointer-events: none;
}

/* na dotyku hover nie istnieje, a tapniecie w kadr i tak otwiera produkt */
@media (hover: none) {
	.mw-tile__buy {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw-tile__buy,
	.mw-tile__swatches {
		transition-duration: .01ms;
	}
}

.mw-tile__meta {
	display: grid;
	gap: var(--mw-s1);
	min-width: 0;
	padding-block-start: var(--mw-s2);
}

.mw-view .mw-tile__name {
	font-family: var(--mw-serif);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-snug);
	text-decoration: none;
}

.mw-view .mw-tile__name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mw-tile__price {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-sm);
	letter-spacing: .02em;
	color: var(--mw-ink-2);
}

/* ===== PASEK ZAUFANIA. jedyna plaszczyzna ecru na stronie, decyzja 13a ===== */
/* tasma przewijana w poziomie. tlo ecru, kafle biale — stad rytm przerw */
.mw-trust {
	position: relative;
	background: var(--mw-paper);
	color: var(--mw-ink);
	/* oddech nad i pod niesie odstep miedzy sekcjami, pasek ma tylko swoja tresc */
	padding: 0 var(--mw-page-pad);
	overflow: clip;
}

/* dwa okna: kadr przycina, a w srodku jada dwie identyczne listy */
.mw-trust__viewport {
	display: flex;
	width: max-content;
	animation: mw-marquee 60s linear infinite;
}

/* tasma leci bez przerwy. zatrzymuje ja WYLACZNIE przycisk — kursor nie */
.mw-trust.is-paused .mw-trust__viewport {
	animation-play-state: paused;
}

@keyframes mw-marquee {
	to { transform: translateX(-50%); }
}

/* to <ul>, wiec scope obowiazkowy — reset zjada padding z samej klasy */
.mw-view .mw-trust__list {
	display: flex;
	flex: 0 0 auto;
}

/* jedna linia: waga rozdziela fraze przed myslnikiem od tej po nim */
.mw-trust__item {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: .4em;
	white-space: nowrap;
	font-family: var(--mw-serif);
	font-size: var(--mw-fs-lg);
	line-height: var(--mw-lh-snug);
	letter-spacing: .01em;
}

/* kropka po kazdej pozycji, takze po ostatniej — za nia zaczyna sie kopia tasmy */
/* kolko rysowane, nie znak: rozmiar znaku zalezy od kroju i wychodzil za maly */
/* ::after jest elementem flexa, wiec gap dokłada sie tylko z lewej — stad odjecie */
.mw-trust__item::after {
	content: "";
	align-self: center;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--mw-line-2);
	margin-inline-start: calc(var(--mw-s4) - .4em);
	margin-inline-end: var(--mw-s4);
}

.mw-trust__lead {
	font-weight: 500;
}

.mw-trust__dash,
.mw-trust__note {
	font-weight: 400;
	color: var(--mw-ink-2);
}

.mw-view .mw-trust__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* pauza w rogu paska. widoczna na hover i przy fokusie, zeby nie zaslaniala */
.mw-view .mw-trust__pause {
	position: absolute;
	inset-block-end: var(--mw-s2);
	inset-inline-end: var(--mw-s2);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	/* ciemny na jasnym pasku, inaczej gubi sie w tasmie */
	background: var(--mw-black);
	color: var(--mw-on-dark);
	font-size: var(--mw-fs-xs);
	line-height: 1;
	opacity: 0;
	transition: opacity .2s var(--mw-ease);
}

.mw-trust:hover .mw-trust__pause,
.mw-view .mw-trust__pause:focus-visible,
.mw-trust.is-paused .mw-trust__pause {
	opacity: 1;
}

/* na dotyku hover nie istnieje, wiec przycisk widoczny stale */
@media (hover: none) {
	.mw-view .mw-trust__pause {
		opacity: .55;
	}
}

/* ograniczony ruch: tasma stoi, uzytkownik przewija ja sam */
@media (prefers-reduced-motion: reduce) {
	.mw-trust {
		overflow-x: auto;
	}

	.mw-trust__viewport {
		animation: none;
	}

	.mw-view .mw-trust__list[aria-hidden="true"] {
		display: none;
	}

	.mw-view .mw-trust__pause {
		display: none;
	}
}

/* ===== KADR. zdjecie zawsze, przycisk tylko gdy w srodku jest wideo ===== */
/* kadr jest kwadratem wszedzie; sekcja moze go zmienic przez --mw-frame-ratio */
.mw-frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--mw-frame-ratio, 1 / 1);
	overflow: clip;
	background: var(--mw-surface-3);
}

.mw-frame :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* parallax: kadr jest kwadratem, a zdjecia sa w pionie — `cover` i tak chowa
   jedna trzecia kadru, wiec zjazd idzie po tym zapasie, bez podwyzszania elementu */
/* zapas robimy sami, nie z proporcji zdjecia: kwadratowe zdjecie w kwadratowym
   kadrze nie ma czego chowac i jazda po `object-position` stala w miejscu */
/* absolutnie, bo w przeplywie wyzsze zdjecie rozpycha kadr i lamie jego kwadrat */
/* postep wpisuje rusztowanie JS: natywne `view()` utyka, bo kadry slajdow
   siedza w scrollerze poziomym, ktory jest scrollportem takze w pionie */
.mw-frame .mw-frame__poster {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: calc(100% + var(--mw-parallax-travel, 6rem));
	transform: translateY(calc(-1 * var(--mw-parallax-progress, .5) * var(--mw-parallax-travel, 6rem)));
	will-change: transform;
}

/* przycisk startu na srodku kadru. znika po kliku, wraca po koncu materialu */
.mw-view .mw-frame__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--mw-on-dark);
	/* przyciemnienie, zeby okrag byl czytelny na kazdej klatce plakatu */
	background: color-mix(in srgb, var(--mw-black) 15%, transparent);
	transition: background .2s var(--mw-ease);
}

.mw-view .mw-frame__play:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--mw-black) 28%, transparent);
}

.mw-frame__play svg {
	transition: transform .2s var(--mw-ease);
}

.mw-view .mw-frame__play:hover svg {
	transform: scale(1.06);
}

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

/* ===== BANER KOLEKCJI. slideshow modeli, struktura slajdu z Figmy 64:47 ===== */
/* jeden slajd = dwie polowy: kadr i blok tresci. przelaczanie natywnym scroll-snap */

/* rama sekcji (utility): baner i wybor projektantki dziela ja co do piksela */
.mw-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mw-s4);
	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;
}

/* sekcja nie jedzie w bok: widoczny jest jeden slajd, reszta czeka schowana */
.mw-feature__viewport {
	display: grid;
}

/* ta sama siatka co w wyborze projektantki: kadr staly, reszta na tresc */
.mw-feature__slide {
	display: grid;
	/* tresc z lewej, kadr z prawej — odwrotnie niz w wyborze projektantki */
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	/* center, nie stretch: rozciagniety blok tresci zostawial 112 px pustki pod sterowaniem */
	align-items: center;
	gap: var(--mw-s4);
}

/* animujemy tresc i kadr, nie caly slajd: sterowanie jest w kazdym slajdzie takie samo
   i mrugalo przy podmianie, mimo ze nie ma sie w nim co zmieniac */
.mw-feature__slide :is(.mw-feature__title, .mw-feature__lead, .mw-feature__cta, .mw-feature__visual) {
	animation: mw-slide-in .28s var(--mw-ease);
}

/* reset ustawia display na elementach, wiec samo `hidden` by go nie przebilo */
.mw-feature__slide[hidden] {
	display: none;
}

/* wejscie animacja, nie transition — regula projektu dla pojawiania sie */
@keyframes mw-slide-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


/* sterowanie w kwadracie tresci. kropki, nie podkreslane zakladki — karuzela wyzej ma juz zakladki */
.mw-feature__nav {
	margin-block-start: var(--mw-s2);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mw-s2);
}

.mw-view :is(.mw-feature__arrow, .mw-feature__dot, .mw-reviews__arrow, .mw-carousel__arrow) {
	display: grid;
	place-items: center;
	min-width: var(--mw-control-h);
	min-height: var(--mw-control-h);
	color: var(--mw-ink);
}

/* kropka rysowana na pseudo: sam przycisk musi zostac duzy pod palec */
.mw-feature__dot::after {
	content: "";
	width: 7px;
	height: 7px;
	border: 1px solid var(--mw-ink);
	border-radius: 50%;
	transition: background .18s var(--mw-ease);
}

.mw-feature__dot[aria-current="true"]::after {
	background: var(--mw-ink);
}

/* padding siedzi na sekcji, kolumny go nie powtarzaja */
/* szerokosc na kolumnie, nie na kadrze: min() w tracku auto jest cykliczne
   i przegladarka bierze wtedy szerokosc z atrybutu video, czyli 540 zamiast 426 */
.mw-feature__visual {
	display: grid;
	place-items: center;
}

/* blok tresci to plaszczyzna rownej wysokosci co kadr, nie tekst na tle sekcji */
/* wiersze o stalej wysokosci: bez nich dluzszy akapit przesuwal tytul i przycisk przy zmianie modelu */
.mw-feature__body {
	display: grid;
	grid-template-rows: minmax(9.5rem, auto) minmax(5.25rem, auto) auto auto;
	align-content: center;
	justify-items: center;
	gap: var(--mw-s4);
	padding: var(--mw-s6);
	text-align: center;
}

/* dwa stopnie w jednym naglowku: nazwa duza kursywa, reszta mniejsza prosto */
.mw-feature__title {
	display: grid;
	gap: var(--mw-s1);
	font-family: var(--mw-serif);
	font-weight: 300;
	line-height: 1;
}

/* kursywa zamiast wersalikow: to nazwa modelu, nie etykieta sekcji */
.mw-feature__title-name {
	font-style: italic;
}

.mw-feature__title-rest {
	font-size: var(--mw-fs-lg);
	font-style: normal;
	line-height: var(--mw-lh-snug);
	letter-spacing: normal;
}

.mw-feature__lead {
	max-width: 42ch;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-snug);
}

.mw-feature__lead em {
	font-style: italic;
}

/* CTA: 13 px, nie 11 z projektu — dolnego konca skali nie ruszamy */
.mw-view .mw-feature__cta {
	position: relative;
	margin-block-start: var(--mw-s5);
	letter-spacing: .18em;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	padding-block-end: var(--mw-s1);
}

/* ===== WYBOR PROJEKTANTKI. struktura z Figmy 78:2 ===== */
/* cztery kolumny: zdjecie zajmuje dwie, obok dwa produkty */
/* ta sama siatka co w banerze: dwie rowne polowy */
.mw-picks {
	grid-template-columns: 1fr 1fr;
}

/* dwa produkty dziela prawa polowe */
.mw-picks__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mw-s4);
}

.mw-picks__feature {
	position: relative;
	overflow: clip;
	background: var(--mw-black);
}


/* przyciemnienie pod tekstem — bez niego napis ginie na jasnym kadrze */
.mw-picks__feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mw-scrim);
	pointer-events: none;
}

.mw-picks__panel {
	position: absolute;
	z-index: 1;
	inset-block-end: var(--mw-s5);
	inset-inline: var(--mw-s5);
	display: grid;
	gap: var(--mw-s3);
	justify-items: start;
	color: var(--mw-on-dark);
}

/* naglowek zostaje przy lewej, akapit i przycisk ida do prawej krawedzi panelu */
.mw-picks__lead {
	justify-self: end;
	width: min(288px, 100%);
	font-family: var(--mw-body);
	font-size: var(--mw-fs-sm);
	line-height: var(--mw-lh-snug);
	text-align: justify;
	/* bez tego justowanie rozciaga dziury miedzy slowami w waskiej kolumnie */
	hyphens: auto;
}

/* obrys zamiast wypelnienia: przycisk na zdjeciu ma nie zaslaniac kadru */
.mw-view .mw-picks__cta {
	display: grid;
	place-items: center;
	justify-self: end;
	width: min(288px, 100%);
	min-height: var(--mw-control-h);
	padding-inline: var(--mw-s5);
	border: 1px solid var(--mw-on-dark-fade);
	color: var(--mw-on-dark);
	font-family: var(--mw-body);
	font-size: var(--mw-fs-sm);
	letter-spacing: .1em;
	text-decoration: none;
	transition: background .18s var(--mw-ease), color .18s var(--mw-ease);
}

.mw-view .mw-picks__cta:hover,
.mw-view .mw-picks__cta:focus-visible {
	background: var(--mw-on-dark);
	color: var(--mw-ink);
}

/* --- produkt obok --- */
.mw-view .mw-picks__item {
	display: grid;
	align-content: start;
	gap: var(--mw-s2);
	color: var(--mw-ink);
	text-decoration: none;
}

/* 4:5 jak w projekcie (430 na 537,5). katalog ma 2:3, wiec `contain` nizej dopelnia bokami */
.mw-picks__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: clip;
	background: var(--mw-surface-3);
}

/* cover jak w projekcie: contain zostawial bialy pas po bokach, bo katalog ma glownie 2:3 */
/* kadrowanie od gory, zeby przyciecie do 4:5 nie zabralo modelce twarzy */
.mw-picks__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}

/* nazwa z lewej, cena z prawej — jedna linia, jak w projekcie */
.mw-picks__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mw-s3);
	font-family: var(--mw-body);
	font-size: var(--mw-fs-sm);
	line-height: var(--mw-lh-snug);
}

.mw-picks__price {
	flex: 0 0 auto;
	color: var(--mw-ink-2);
	text-align: end;
}

.mw-view .mw-picks__item:hover .mw-picks__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===== 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 24 miedzy wszystkim */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: start;
	gap: var(--mw-s5) var(--mw-s4);
	padding-inline: var(--mw-page-pad);
}

/* obie kolumny przypiete jawnie: prawa zostaje pusta, bo lezy w niej kadr (pozycjonowany absolutnie) */
/* naglowek bierze obie kolumny, wiec link ląduje przy prawej krawedzi sekcji, jak w karuzeli */
.mw-cats__intro {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mw-s3) var(--mw-s4);
}

.mw-view .mw-cats__more {
	position: relative;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	padding-block-end: var(--mw-s1);
}

/* 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;
	grid-column: 1;
	grid-row: 2;
	display: grid;
	align-content: center;
	aspect-ratio: 2 / 3;
	border-block-start: 1px solid var(--mw-line);
}

.mw-view .mw-cats__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mw-s4);
	padding-block: var(--mw-s2);
	border-block-end: 1px solid var(--mw-line);
	text-decoration: none;
	/* dzialy poza wyborem gasna kolorem, bez ruchu w bok.
	   55% czerni, nie --mw-muted: to sa zywe linki, wiec musza trzymac 4,5:1 */
	color: color-mix(in srgb, var(--mw-ink) 55%, transparent);
	transition: color .3s var(--mw-ease);
}

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

/* stopien nizej niz naglowek sekcji: przy 44 px jedenascie wierszy nie miesci sie w ekranie */
.mw-cats__name {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-lg);
	line-height: 1.1;
	letter-spacing: -.01em;
}

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

/* winieta obok nazwy ma sens tylko bez kursora, wiec na telefonie */
/* scope 0,2,0 — reset `.mw-view img` (0,1,1) bije sama klase i winieta zostawala widoczna */
.mw-view .mw-cats__thumb {
	display: none;
}

/* 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-s4));
	/* cztery kolumny siatki plus trzy przerwy miedzy nimi */
	inline-size: calc(400% + 3 * var(--mw-s4));
	display: grid;
	gap: var(--mw-s3);
	opacity: 0;
	transition: opacity .45s var(--mw-ease);
}

/* cztery pola: opis i trzy kadry — przy pieciu opis robil sie za waski na zdanie */
/* odstep 24 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-s4);
	block-size: 100%;
}

/* kadr trzyma proporcje zamiast wysokosci listy: przy szerokim ekranie kolumna rosla,
   a wysokosc zostawala przypieta do listy i cover przycinal 56 % zdjecia */
.mw-view .mw-cats__shot {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* 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-family: var(--mw-body);
	font-size: var(--mw-fs-base);
	line-height: var(--mw-lh-snug);
	color: var(--mw-ink-2);
}

/* 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; }

.mw-cats__desc-title {
	font-family: var(--mw-serif);
	font-size: var(--mw-fs-md);
	line-height: var(--mw-lh-tight);
	color: var(--mw-ink);
}

/* 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 < 64rem) {
	.mw-cats {
		grid-template-columns: minmax(0, 1fr);
		padding-block: var(--mw-s7);
	}

	.mw-view .mw-cats__list {
		grid-column: 1;
		grid-row: auto;
	}

	.mw-view .mw-cats__row {
		align-items: center;
	}

	.mw-cats__name {
		margin-inline-end: auto;
	}

	/* bez kursora panel nie ma jak sie pokazac: zostaje winieta przy nazwie */
	.mw-cats__panel {
		display: none;
	}

	.mw-view .mw-cats__thumb {
		display: block;
		inline-size: 3.5rem;
		aspect-ratio: 3 / 4;
		object-fit: cover;
		order: -1;
		margin-inline-end: var(--mw-s3);
	}
}

/* ===== 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-s4) / 2);
	gap: var(--mw-s4);
	/* margines, nie padding: padding zostaje w obszarze przewijania i kadr pod niego wjezdza */
	margin-inline: var(--mw-s4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.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-s4);
	display: grid;
	place-items: center;
	background: var(--mw-glass);
	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-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	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;
}

.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:is(:hover, :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:is(:hover, :focus-visible) .mw-seasons__image--ghost {
	opacity: 1;
}

/* WCAG 1.4.3 — kadry plenerowe bywaja jasne przy dolnej krawedzi */
.mw-seasons__item::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-seasons__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-seasons__name {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-hero);
	line-height: 1.05;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.mw-seasons__lead {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* ===== KOLEKCJE. kadr na cala szerokosc, nazwa na nim, pasek nazw pod spodem ===== */
/* telefon dostaje uklad z kolejnosci DOM (kadr, podpis, nazwa), jasny i przewijany;
   od 64rem sekcja robi sie jednym ciemnym kadrem, a podpisy i kadry leza jedne na drugich */
.mw-collections {
	padding: var(--mw-s7) var(--mw-page-pad);
}

.mw-collections .mw-section-title {
	margin-block-end: var(--mw-s6);
}

.mw-collections__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- 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 {
	display: grid;
	gap: var(--mw-s3);
}

.mw-collections__bar,
.mw-collections__list,
.mw-collection {
	display: contents;
}

.mw-collection__frame[data-mw-index="0"] { order: 1; }
.mw-collection__link[data-mw-index="0"] { order: 2; }
.mw-collection__lead[data-mw-index="0"] { order: 3; }
.mw-collection__frame[data-mw-index="1"] { order: 4; }
.mw-collection__link[data-mw-index="1"] { order: 5; }
.mw-collection__lead[data-mw-index="1"] { order: 6; }
.mw-collection__frame[data-mw-index="2"] { order: 7; }
.mw-collection__link[data-mw-index="2"] { order: 8; }
.mw-collection__lead[data-mw-index="2"] { order: 9; }
.mw-collection__frame[data-mw-index="3"] { order: 10; }
.mw-collection__link[data-mw-index="3"] { order: 11; }
.mw-collection__lead[data-mw-index="3"] { order: 12; }
.mw-collection__frame[data-mw-index="4"] { order: 13; }
.mw-collection__link[data-mw-index="4"] { order: 14; }
.mw-collection__lead[data-mw-index="4"] { order: 15; }

/* odstep miedzy kolekcjami niesie opis, bo konczy kazda trojke */
.mw-collection__lead {
	margin-block-end: var(--mw-s6);
}

.mw-view .mw-collection__link {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: .18em;
	text-decoration: none;
	color: var(--mw-ink);
}

/* telefon: opis pod nazwa, w zwyklym biegu tekstu */
.mw-collection__lead {
	margin: 0;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-sm);
	line-height: var(--mw-lh-base);
	color: var(--mw-ink-2);
}

.mw-view .mw-collection__frame {
	display: block;
	order: -1;
	inline-size: 100%;
	/* bez tego kadr z szerszym plikiem rozpycha kolumne ponad przydzial siatki */
	min-inline-size: 0;
	aspect-ratio: 4 / 5;
	overflow: clip;
}

.mw-view .mw-collection__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- duzy ekran: jeden kadr na cala sekcje --- */
@media (width >= 64rem) {
	.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) * 1.05 + var(--mw-s3) + var(--mw-s4));
		background: var(--mw-black);
		overflow: clip;
	}

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

	/* 24 od krawedzi okna dla wszystkiego, co lezy na kadrze — decyzja Tomka 31.08.
	   Nie --mw-page-pad: ten rosnie z szerokoscia do 64 i odsuwa naroza od kadru */
	.mw-collections .mw-section-title {
		position: absolute;
		z-index: 2;
		margin: 0;
		inset-block-start: var(--mw-s4);
		inset-inline-start: var(--mw-s4);
	}

	.mw-collection {
		display: contents;
	}

	/* wszystkie kadry na sobie. Dol konczy sie NAD paskiem nazw — pasek stoi na czarnym tle
	   sekcji, nie na zdjeciu, wiec biale nazwy maja pelny kontrast bez szyby i gradientu */
	.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 czarnym tle sekcji. Zero szyby i gradientu — biale nazwy
	   na czerni maja pelny 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);
		padding: 0 var(--mw-s4) var(--mw-s4);
		/* pasek na bieli, nazwy ciemne — decyzja Tomka 01.09 */
		background: var(--mw-paper);
	}

	.mw-view .mw-collection__link {
		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;
	}

	.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;
	}

	/* 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 */
	.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);
		letter-spacing: -.03em;
	}

	/* 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 {
		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);
		/* 12 z makiety odpada — skala zaczyna sie na 13, 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; }
}

@media (prefers-reduced-motion: reduce) {
	.mw-view .mw-collection__frame {
		transition-duration: .01ms;
	}
}

/* ===== NEWSLETTER. struktura z Figmy 85:253: kadr na calosc, na nim szklana plyta ===== */
.mw-newsletter {
	position: relative;
	display: grid;
	place-items: center;
	padding-inline: var(--mw-page-pad);
	overflow: clip;
}

.mw-newsletter__tlo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* plyta jasniejsza niz w projekcie: tam tlem bylo biale futro, u nas ciemna krata */
.mw-newsletter__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--mw-s5);
	width: min(1170px, 100%);
	padding: var(--mw-s8);
	border: 1px solid var(--mw-line-2);
	background: color-mix(in srgb, var(--mw-paper) 62%, transparent);
	backdrop-filter: blur(50px);
	/* kadry kolazu maja zostac w plycie, nie wyjezdzac pod nia */
	overflow: clip;
}

.mw-newsletter__inner {
	display: grid;
	justify-items: start;
	gap: var(--mw-s3);
	max-width: 30rem;
	text-align: start;
}

.mw-newsletter__lead {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-md);
	line-height: var(--mw-lh-snug);
}

.mw-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mw-s2);
	width: 100%;
	margin-block-start: var(--mw-s3);
}

/* pole rosnie, przycisk trzyma szerokosc tresci */
.mw-newsletter__input {
	flex: 1 1 16rem;
	min-height: var(--mw-control-h);
	padding-inline: var(--mw-s3);
	border: 1px solid var(--mw-line-2);
	border-radius: var(--mw-radius);
	background: var(--mw-paper);
	color: var(--mw-ink);
	font-family: var(--mw-body);
	font-size: var(--mw-fs-base);
}

.mw-newsletter__input::placeholder {
	color: var(--mw-ink-3);
}

/* .mw-btn ma flex:1 pod paski przyciskow; tutaj przycisk nie ma rosnac razem z polem */
.mw-view .mw-newsletter__submit {
	flex: 0 0 auto;
	padding-inline: var(--mw-s5);
}

.mw-newsletter__note {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	line-height: var(--mw-lh-base);
	color: var(--mw-ink-2);
}

/* kolaz: cztery kadry rozrzucone, jak w projekcie */
.mw-newsletter__kolaz {
	position: relative;
	aspect-ratio: 529 / 492;
}

.mw-newsletter__shot {
	position: absolute;
	object-fit: cover;
}

.mw-newsletter__shot--1 {
	inset-inline-start: 18%;
	inset-block-start: 1%;
	width: 38%;
	height: 60%;
}

.mw-newsletter__shot--2 {
	inset-inline-start: 54%;
	inset-block-start: 15%;
	width: 46%;
	height: 74%;
}

.mw-newsletter__shot--3 {
	inset-inline-start: 0;
	inset-block-start: 47%;
	width: 36%;
	height: 48%;
}

.mw-newsletter__shot--4 {
	inset-inline-start: 30%;
	inset-block-start: 42%;
	width: 36%;
	height: 55%;
}

/* ===== OPINIE. struktura z Figmy 84:170: naglowek ze strzalkami i pas kart ===== */
/* pas kart wyjezdza poza margines strony (peek), wiec boczny padding siedzi na dzieciach */
/* naglowek nad pasem, jak w kategoriach: tytul z lewej, sterowanie przy prawej krawedzi */
/* boczny margines strony bierze sama sekcja, wiec naglowek i pas kart stoja w jednej linii */
.mw-reviews__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mw-s3) var(--mw-s4);
}

/* w opiniach tytul stoi przy prawej krawedzi — to jedyna roznica wobec pozostalych sekcji */
.mw-reviews .mw-section-title {
	text-align: end;
}

.mw-reviews__nav {
	display: flex;
	gap: var(--mw-s2);
}

.mw-view :is(.mw-feature__arrow, .mw-reviews__arrow, .mw-carousel__arrow):is(:hover, :focus-visible) {
	color: var(--mw-taupe);
}

/* koniec pasa: strzalka gasnie zamiast znikac — pozycja przyciskow ma nie skakac */
.mw-view :is(.mw-reviews__arrow, .mw-carousel__arrow):disabled {
	opacity: .3;
	cursor: default;
	color: var(--mw-ink);
}

/* link i strzalki w jednej linii po prawej stronie naglowka */
.mw-carousel__nav {
	display: flex;
	align-items: center;
	gap: var(--mw-s2);
}

/* to <ul>, wiec scope obowiazkowy — reset zjada padding z samej klasy */
.mw-view .mw-reviews__list {
	display: flex;
	gap: var(--mw-s4);
	/* zapas na cien: przewijany pas przycina w pionie, bo overflow-x auto wymusza tez overflow-y */
	padding-block: var(--mw-s3);
	/* peek: ujemny margines zdejmuje padding sekcji, karty urywaja sie na krawedzi okna */
	margin-inline: calc(-1 * var(--mw-page-pad));
	padding-inline: var(--mw-page-pad);
	scroll-padding-inline: var(--mw-page-pad);
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

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

/* bez obrysu: karte trzyma sam cien, jak reszte kadrow na stronie */
/* osiem statycznych kadrow papieru: sasiednie karty maja inny uklad wlokien, zero WebGL */
/* karta na ecru — decyzja Tomka 01.09. Sekcja wraca do bieli jak reszta home,
   wiec karta potrzebuje wlasnego koloru, zeby sie od niej odciac. Ecru jest w palecie marki */
.mw-reviews__item {
	flex: 0 0 clamp(260px, 24vw, 338px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--mw-s5);
	padding: var(--mw-s4);
	background: var(--mw-ecru);
}

/* cudzyslow wysuniety przed kolumne tekstu, jak w projekcie */
.mw-reviews__quote {
	position: relative;
	margin: 0;
	font-family: var(--mw-body);
	/* lzejsze kolorem, nie waga: Crimson Text ma tylko 400, a dokladanie kroju Light
	   kosztuje kilkadziesiat kilobajtow na kazdym wejsciu */
	color: var(--mw-ink-2);
	font-size: var(--mw-fs-lg);
	line-height: var(--mw-lh-snug);
	letter-spacing: .02em;
}

.mw-reviews__quote::before {
	content: "\201E";
	position: absolute;
	inset-inline-start: -.55em;
}

.mw-reviews__quote::after {
	content: "\201D";
}

/* podpis zawsze przy dolnej krawedzi, niezaleznie od dlugosci cytatu */
.mw-reviews__meta {
	margin-block-start: auto;
}

.mw-reviews__author {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-lg);
	line-height: var(--mw-lh-snug);
}

.mw-view .mw-reviews__product {
	display: block;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	color: var(--mw-ink-3);
	text-decoration: none;
}

.mw-view .mw-reviews__product:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ===== PIASKOWNICA /lookb/. trzy propozycje sekcji zdjeciowych ===== */

/* --- 1. tkanina z bliska --- */
.mw-fabric {
	gap: var(--mw-s6);
}

.mw-fabric__intro {
	display: grid;
	gap: var(--mw-s3);
	max-width: 46rem;
}

.mw-fabric__title {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-display);
	line-height: var(--mw-lh-tight);
}

.mw-fabric__lead {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-md);
	line-height: var(--mw-lh-snug);
	color: var(--mw-ink-2);
}

/* to <ul>, wiec scope obowiazkowy — reset zjada padding z samej klasy */
.mw-view .mw-fabric__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mw-s4);
}

.mw-fabric__item {
	display: grid;
	gap: var(--mw-s2);
}

.mw-fabric__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: clip;
	background: var(--mw-surface-3);
}

.mw-fabric__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-fabric__opis {
	font-family: var(--mw-body);
	font-size: var(--mw-fs-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mw-ink-3);
}

/* --- 2. lookbook w miescie --- */
/* pas siega krawedzi okna: wciecie robia dzieci (lookbook) albo batony (sezony) */
.mw-band.mw-lookbook,
.mw-band.mw-seasons {
	padding-inline: 0;
}

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

.mw-lookbook__title {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-hero);
	line-height: 1.05;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.mw-view .mw-lookbook__more {
	position: relative;
	flex: 0 0 auto;
	font-family: var(--mw-body);
	font-size: var(--mw-fs-sm);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	padding-block-end: var(--mw-s1);
	border-block-end: 1px solid currentColor;
}

.mw-view .mw-lookbook__list {
	display: flex;
	gap: var(--mw-s4);
	padding-inline-start: var(--mw-page-pad);
	scroll-padding-inline-start: var(--mw-page-pad);
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

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

.mw-lookbook__item {
	flex: 0 0 clamp(280px, 32vw, 460px);
	scroll-snap-align: start;
	aspect-ratio: 2 / 3;
	overflow: clip;
	background: var(--mw-surface-3);
}

.mw-lookbook__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 3. kadr pelnoekranowy --- */
.mw-cover {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(28rem, 64vh, 44rem);
	overflow: clip;
}

.mw-cover__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* WCAG 1.4.3 — kadr plenerowy bywa jasny pod napisem */
.mw-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--mw-black) 32%, transparent);
	pointer-events: none;
}

.mw-cover__text {
	position: relative;
	z-index: 1;
	max-width: 24ch;
	padding-inline: var(--mw-page-pad);
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-display);
	line-height: var(--mw-lh-tight);
	text-align: center;
	color: var(--mw-on-dark);
}

/* ------------------------------- TELEFON ------------------------------ */
@media (max-width: 899px) {
	/* hero: treść nad notą, wskaźnik scrolla znika, menu pod hamburger */
	.mw-hero__inner {
		inset-block-start: auto;
		inset-block-end: calc(var(--mw-page-pad) + 7rem);
		inset-inline-end: var(--mw-page-pad);
	}

	/* 44 px nie mieści się w jednej linii */
	.mw-hero__title {
		text-wrap: balance;
	}

	/* nota kotwiczy sie z lewej, nie z prawej — waskie okno */
	.mw-hero__note {
		text-align: start;
		inset-inline-start: var(--mw-page-pad);
	}

	/* nachodzi na notę */
	.mw-hero__scroll {
		display: none;
	}

	.mw-hero__burger {
		display: grid;
		place-items: center start;
	}

	.mw-hero__nav-group--start {
		display: none;
	}

	/* wchodzi do panelu */
	.mw-hero__nav-search {
		display: none;
	}

	.mw-view .mw-hero__logo img {
		height: 24px;
		width: auto;
	}

	.mw-carousel__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mw-s3);
	}

	.mw-carousel__tabs {
		gap: var(--mw-s4);
	}

	/* telefon i tablet: wlasny zakres, bo desktopowe 20vw daje tu za waskie kafelki */
	.mw-tile {
		flex: 0 0 clamp(200px, 40vw, 300px);
	}

	/* tasma na telefonie: mniejszy stopien, zeby jedna pozycja miescila sie w kadrze */
	.mw-trust__item {
		font-size: var(--mw-fs-md);
	}

	.mw-trust__item::after {
		margin-inline-start: var(--mw-s4);
		margin-inline-end: calc(var(--mw-s4) - .4em);
	}

	/* baner: kadr nad trescia */
	.mw-feature__slide {
		grid-template-columns: min(320px, 100%);
		gap: var(--mw-s3);
	}

	.mw-feature__body {
		padding-block: var(--mw-s6);
	}

	/* wybor projektantki: zdjecie na cala szerokosc, produkty po dwa w rzedzie */
	.mw-picks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mw-s3);
	}

	.mw-picks__feature {
		grid-column: span 2;
	}


	.mw-picks__panel {
		inset-block-end: var(--mw-s4);
		inset-inline: var(--mw-s4);
	}

	.mw-view .mw-reviews__list {
		padding-inline-start: var(--mw-page-pad);
	}

	/* piaskownica: detale jeden pod drugim */
	.mw-view .mw-fabric__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* sezony jeden pod drugim: obok siebie kadry robia sie za waskie */
	.mw-seasons {
		grid-template-columns: minmax(0, 1fr);
	}

	/* pole i przycisk pod soba — obok siebie nie mieszcza sie w 375 px */
	.mw-newsletter__form {
		flex-direction: column;
	}

	.mw-newsletter__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--mw-s5);
	}

	/* kolaz to dekoracja: na waskim ekranie zabiera miejsce trescie */
	.mw-newsletter__kolaz {
		display: none;
	}

	/* w kolumnie flex-basis liczy sie na wysokosc: bez tego pole rosnie do 16rem wzwyz */
	.mw-newsletter__input {
		flex: 0 0 auto;
	}
}

/* ===== WARIANT B kolekcji (tylko /sandbox/), makieta Figma 233:38 =====
   Nazwy w pionie po lewej, tekst ciemny, wybrana jasna. Wersja z home stoi obok bez zmian */
.mw-stack {
	position: relative;
	display: grid;
	gap: var(--mw-s3);
	padding-block: var(--mw-s7);
	background: var(--mw-black);
}

.mw-stack__list {
	margin: 0;
	padding: 0 var(--mw-page-pad);
	list-style: none;
}

.mw-view .mw-stack__link {
	display: block;
	padding-block: var(--mw-s3);
	text-decoration: none;
	color: var(--mw-ink);
}

.mw-stack__name {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-display);
	line-height: var(--mw-lh-tight);
	letter-spacing: -.03em;
}

.mw-view .mw-stack__frame {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	overflow: clip;
}

.mw-view .mw-stack__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-stack__lead {
	margin: 0 0 var(--mw-s5);
	padding-inline: var(--mw-page-pad);
	font-family: var(--mw-body);
	font-size: var(--mw-fs-md);
	line-height: var(--mw-lh-base);
	color: var(--mw-on-dark-2);
}

.mw-stack__total {
	display: none;
}

@media (width >= 64rem) {
	/* proporcja z makiety: 1800 na 761,6 */
	.mw-stack {
		display: block;
		aspect-ratio: 1800 / 762;
		padding: 0;
		overflow: clip;
	}

	.mw-stack__item {
		display: contents;
	}

	/* kadr wypelnia sekcje, nazwy i opis leza na nim */
	.mw-view .mw-stack__frame {
		position: absolute;
		inset: 0;
		z-index: 0;
		aspect-ratio: auto;
		opacity: 0;
		pointer-events: none;
		transition: opacity .8s var(--mw-ease);
	}

	.mw-view .mw-stack__frame--active {
		opacity: 1;
		pointer-events: auto;
	}

	.mw-stack .mw-section-title {
		position: absolute;
		z-index: 2;
		margin: 0;
		inset-block-start: var(--mw-s4);
		inset-inline-start: var(--mw-s4);
	}

	/* licznik przy prawej krawedzi, w polowie wysokosci */
	.mw-stack__total {
		position: absolute;
		z-index: 2;
		display: block;
		inset-block-start: 48.7%;
		inset-inline-end: var(--mw-s4);
		font-family: var(--mw-body);
		font-size: var(--mw-fs-xs);
		letter-spacing: .18em;
		color: var(--mw-ink);
	}

	/* lista nazw: lewa krawedz 33/1800, gora 147/762 */
	.mw-view .mw-stack__list {
		position: absolute;
		z-index: 3;
		inset-block-start: 19.3%;
		inset-inline-start: 1.8%;
		padding: 0;
	}

	/* kreska nad nazwa ma stala szerokosc 331/1800, nie ciagnie sie przez cala kolumne */
	.mw-view .mw-stack__link {
		position: relative;
		inline-size: 18.4vw;
		padding-block: var(--mw-s3) 0;
		border-block-start: 1px solid var(--mw-on-dark);
		color: var(--mw-black);
		transition: color .3s var(--mw-ease);
	}

	.mw-view .mw-stack__link--active {
		color: var(--mw-on-dark);
	}

	/* opis: lewa krawedz 1258,8/1800, gora 302,7/762, szerokosc 348/1800 */
	.mw-stack__lead {
		position: absolute;
		z-index: 2;
		inset-block-start: 39.7%;
		inset-inline-start: 69.9%;
		inline-size: 19.3%;
		margin: 0;
		padding: 0;
		color: var(--mw-ink);
		opacity: 0;
		transition: opacity .6s var(--mw-ease);
	}

	.mw-stack__lead--active {
		opacity: 1;
	}
}