/* ==========================================================================
   Listing sklepu: naglowek, filtry, kafelki
   ========================================================================== */

/* --- okruszki i naglowek archiwum --- */

.ml-archive__head { padding-block: 20px 30px; }
.ml-archive__title {
	margin: 0;
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 300;
	letter-spacing: .01em;
}
.ml-archive__intro {
	max-width: 68ch;
	margin-top: 10px;
	color: var(--ml-ink-muted);
	font-size: 14px;
}

/* --- siatka: filtry po lewej, produkty po prawej --- */

.ml-shop {
	display: grid;
	grid-template-columns: var(--ml-sidebar) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	padding-bottom: 70px;
}

.ml-shop__main { position: relative; min-width: 0; }

/* --- panel filtrow --- */

.ml-shop__side {
	position: sticky;
	top: calc(var(--ml-header-h) + 16px);
	max-height: calc(100vh - var(--ml-header-h) - 32px);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ml-line);
	background: var(--ml-paper);
}
.ml-side__head {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ml-line);
}
.ml-side__body { overflow-y: auto; padding: 4px 0; }
.ml-side__foot { display: none; padding: 12px 16px; border-top: 1px solid var(--ml-line); }

.ml-facet { border-bottom: 1px solid var(--ml-line); }
.ml-facet:last-of-type { border-bottom: 0; }

.ml-facet__head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 15px 18px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	text-align: left;
}
.ml-facet__head > span:first-child { flex: 1; }
.ml-facet__head svg { transition: transform .25s var(--ml-ease); }
.ml-facet__head[aria-expanded="true"] svg { transform: rotate(180deg); }

.ml-facet__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	background: var(--ml-gold);
	color: #fff;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
}

.ml-facet__body { display: none; padding: 0 18px 18px; }
.ml-facet__body.is-open { display: block; }

.ml-facet__empty { margin: 0; font-size: 13px; color: var(--ml-ink-faint); }

/* Czyszczenie filtrow bylo cienkim napisem pod lista i gubilo sie posrod
   nazw kategorii - klientka, ktora zawezila widok do dwoch produktow, nie
   miala jak wrocic. Teraz to pelnoprawny przycisk, tej samej wagi co
   "Pokaz produkty" w szufladzie na telefonie. */
.ml-facet__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 10px 18px 18px;
	min-height: 46px;
	padding: 12px 16px;
	border: 1px solid var(--ml-ink);
	background: var(--ml-paper);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ml-ink);
	text-align: center;
	transition: background .18s var(--ml-ease), color .18s var(--ml-ease);
}
.ml-facet__clear::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 5l14 14M19 5L5 19' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 5l14 14M19 5L5 19' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") center / contain no-repeat;
}
.ml-facet__clear:hover { background: var(--ml-ink); color: #fff; }

@media (max-width: 900px) {
	/* Na telefonie filtry sa w szufladzie i przycisk musi byc tak samo latwy
	   do trafienia kciukiem jak reszta sterowania. */
	.ml-facet__clear { margin: 12px 16px 16px; min-height: 52px; font-size: 13px; }
}

/* lista opcji z checkboxem */

.ml-opts { list-style: none; margin: 0; padding: 0; }
.ml-opts--scroll { max-height: 258px; overflow-y: auto; padding-right: 4px; }

.ml-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
	color: var(--ml-ink-soft);
	transition: color .18s var(--ml-ease);
}
.ml-opt:hover { color: var(--ml-ink); }

.ml-opt__box {
	flex: 0 0 16px;
	width: 16px; height: 16px;
	border: 1px solid var(--ml-line-strong);
	background: #fff;
	position: relative;
	transition: border-color .18s var(--ml-ease), background .18s var(--ml-ease);
}
.ml-opt:hover .ml-opt__box { border-color: var(--ml-sage); }
.ml-opt.is-on .ml-opt__box { background: var(--ml-ink); border-color: var(--ml-ink); }
.ml-opt.is-on .ml-opt__box::after {
	content: '';
	position: absolute;
	left: 4px; top: 1px;
	width: 5px; height: 9px;
	border: solid #fff;
	border-width: 0 1.6px 1.6px 0;
	transform: rotate(42deg);
}

.ml-opt__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ml-opt.is-on .ml-opt__name { color: var(--ml-ink); font-weight: 500; }
.ml-opt__n { font-size: 12px; color: var(--ml-ink-faint); }

/* rozmiary jako kwadraty */

.ml-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-size {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	min-width: 42px;
	padding: 8px 10px;
	border: 1px solid var(--ml-line-strong);
	font-size: 13px;
	justify-content: center;
	transition: all .18s var(--ml-ease);
}
.ml-size em { font-size: 10px; font-style: normal; color: var(--ml-ink-faint); }
.ml-size:hover { border-color: var(--ml-ink); }
.ml-size.is-on { background: var(--ml-ink); border-color: var(--ml-ink); color: #fff; }
.ml-size.is-on em { color: rgba(255,255,255,.6); }

/* kolory jako probki */

.ml-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.ml-swatch {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ml-ink-soft);
	min-width: 0;
}
.ml-swatch__dot {
	flex: 0 0 20px;
	width: 20px; height: 20px;
	border: 1px solid var(--ml-line-strong);
	box-shadow: inset 0 0 0 2px #fff;
	transition: box-shadow .18s var(--ml-ease), border-color .18s var(--ml-ease);
}
.ml-swatch__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ml-swatch:hover .ml-swatch__dot { border-color: var(--ml-ink); }
.ml-swatch.is-on .ml-swatch__dot {
	border-color: var(--ml-ink);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--ml-ink);
}
.ml-swatch.is-on .ml-swatch__name { color: var(--ml-ink); font-weight: 500; }

/* filtr ceny */

.ml-price__rail {
	position: relative;
	height: 26px;
	margin-bottom: 6px;
}
.ml-price__rail::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 12px;
	height: 2px;
	background: var(--ml-line);
}
.ml-price__fill {
	position: absolute;
	top: 12px; height: 2px;
	background: var(--ml-gold);
}
.ml-price__range {
	position: absolute;
	left: 0; top: 8px;
	width: 100%;
	height: 10px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
/* Uchwyty suwaka.

   Byly bialymi kwadracikami 14 px w czarnej obwodce - czyli wygladaly
   dokladnie jak niezaznaczony checkbox lezacy dwa wiersze nizej, w "Pokaz
   tylko". Na telefonie doszlo do tego, ze 14 px to polowa tego, co palec
   trafia bez celowania. Pelne, ciemne kwadraty z biala obwodka czytaja sie
   jako uchwyt i nie mysza sie z zaznaczeniem. */
.ml-price__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px; height: 18px;
	border: 2px solid #fff;
	background: var(--ml-ink);
	box-shadow: 0 0 0 1px var(--ml-line-strong);
	cursor: grab;
}
.ml-price__range::-moz-range-thumb {
	pointer-events: auto;
	width: 18px; height: 18px;
	border: 2px solid #fff;
	background: var(--ml-ink);
	box-shadow: 0 0 0 1px var(--ml-line-strong);
	border-radius: 0;
	cursor: grab;
}
.ml-price__range:active::-webkit-slider-thumb { cursor: grabbing; }

@media (pointer: coarse) {
	.ml-price__rail { height: 34px; }
	.ml-price__rail::before,
	.ml-price__fill { top: 16px; }
	.ml-price__range { top: 8px; height: 20px; }
	.ml-price__range::-webkit-slider-thumb { width: 24px; height: 24px; }
	.ml-price__range::-moz-range-thumb { width: 24px; height: 24px; }
}

.ml-price__row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}
.ml-price__row input[type="number"] {
	width: 100%;
	min-width: 0;
	padding: 8px 9px;
	border: 1px solid var(--ml-line-strong);
	font-family: inherit;
	font-size: 13px;
	border-radius: var(--ml-radius);
}
.ml-price__row label { flex: 1; min-width: 0; }
.ml-price__dash { color: var(--ml-ink-faint); }
.ml-price__unit { font-size: 13px; color: var(--ml-ink-muted); }

.ml-price__go {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ml-ink);
	padding-bottom: 2px;
}

/* --- pasek narzedzi nad listingiem --- */

.ml-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ml-line);
	margin-bottom: 20px;
}

.ml-toolbar__filters {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--ml-ink);
	background: none;
	cursor: pointer;
	font-size: 12px;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
}
.ml-toolbar__filters em {
	font-style: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px; height: 18px;
	background: var(--ml-gold);
	color: #fff;
	font-size: 10px;
}

.ml-toolbar__count {
	flex: 1;
	font-size: 13px;
	color: var(--ml-ink-muted);
}

.ml-toolbar__sort { position: relative; display: flex; align-items: center; }
.ml-toolbar__sort select {
	appearance: none;
	-webkit-appearance: none;
	padding: 9px 34px 9px 14px;
	border: 1px solid var(--ml-line-strong);
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	border-radius: var(--ml-radius);
}
.ml-toolbar__sort svg {
	position: absolute;
	right: 12px;
	pointer-events: none;
	color: var(--ml-ink-muted);
}

/* --- chipsy z aktywnymi filtrami --- */

.ml-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
}
.ml-chips__label {
	font-size: 11px;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	color: var(--ml-ink-faint);
}
.ml-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid var(--ml-line-strong);
	background: var(--ml-sage-wash);
	font-size: 12px;
	transition: border-color .18s var(--ml-ease), color .18s var(--ml-ease);
}
.ml-chip:hover { border-color: var(--ml-sale); color: var(--ml-sale); }
.ml-chip .woocommerce-Price-amount { font-size: 12px; }
.ml-chips__clear {
	font-size: 12px;
	color: var(--ml-ink-muted);
	border-bottom: 1px solid currentColor;
}
.ml-chips__clear:hover { color: var(--ml-sale); }

/* --- siatka produktow --- */

.ml-shop__results ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* WooCommerce dokleja do listy produktow clearfix ::before/::after. W ukladzie
   float byly niewidoczne, ale w siatce staja sie pelnoprawnymi komorkami -
   pierwszy produkt ladowal wtedy w drugiej kolumnie, a ostatni spadal do
   nastepnego wiersza. */
.ml-shop__results ul.products::before,
.ml-shop__results ul.products::after,
.related ul.products::before,
.related ul.products::after,
.upsells ul.products::before,
.upsells ul.products::after,
.ml-polecane ul.products::before,
.ml-polecane ul.products::after { content: none; display: none; }

/* WooCommerce ustawia kafelkom szerokosc procentowa i float w dwoch miejscach:
   `woocommerce-layout.css` daje 22.05% na duzym ekranie, a
   `woocommerce-smallscreen.css` **48% na telefonie**, selektorem
   `.woocommerce ul.products[class*=columns-] li.product`. Ten drugi jest
   bardziej szczegolowy niz cokolwiek, co da sie tu napisac bez powtorzenia
   calej jego sciezki, wiec kafelek zajmowal polowe komorki siatki - obrazek
   mial 89 pikselow w komorce majacej 185. Stad `!important`. */
.ml-shop__results ul.products li.product,
.related ul.products li.product,
.upsells ul.products li.product,
.ml-polecane ul.products li.product {
	width: 100% !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ml-card { position: relative; }

/* Serce ulubionych. Odznaki zajmuja lewy gorny rog kafla, wiec serce idzie
   w prawy - inaczej naklada sie na "Nowosc" i "Promocja". */
.ml-serce {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, .88);
	color: var(--ml-ink-soft);
	cursor: pointer;
	transition: background .18s var(--ml-ease), color .18s var(--ml-ease);
}
.ml-serce:hover { background: #fff; color: var(--ml-gold); }
.ml-serce svg { display: block; }
.ml-serce.jest-ulubiony { color: var(--ml-gold); }
.ml-serce.jest-ulubiony svg { fill: currentColor; }
.ml-serce.jest-pracuje { opacity: .5; pointer-events: none; }
.ml-serce:focus-visible { outline: 2px solid var(--ml-ink); outline-offset: 2px; }

/* Na karcie produktu serce stoi obok tytulu, a nie na zdjeciu. */
.ml-single__naglowek {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}
.ml-serce--karta {
	position: static;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	background: var(--ml-sage-wash);
}

@media (prefers-reduced-motion: reduce) {
	.ml-serce { transition: none; }
}

.ml-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ml-sage-wash);
	aspect-ratio: 3 / 4;
}
.ml-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: opacity .45s var(--ml-ease), transform .8s var(--ml-ease);
}
.ml-card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.ml-card__media:hover .ml-card__img--alt { opacity: 1; }
.ml-card__media:hover .ml-card__img { transform: scale(1.03); }

.ml-card__badges {
	position: absolute;
	top: 10px; left: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}
.ml-badge {
	padding: 4px 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--ml-ink);
	color: #fff;
}
.ml-badge--sale { background: var(--ml-sale); }
.ml-badge--new  { background: var(--ml-gold); }
.ml-badge--low  { background: var(--ml-sage-deep); }
.ml-badge--out  { background: var(--ml-ink-faint); }

.ml-card__sizes {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 10px;
	background: rgba(255,255,255,.94);
	transform: translateY(101%);
	transition: transform .28s var(--ml-ease);
}
.ml-card__media:hover .ml-card__sizes { transform: none; }
.ml-card__sizes span {
	padding: 3px 8px;
	border: 1px solid var(--ml-line-strong);
	font-size: 11px;
}

.ml-card__body { padding-top: 13px; }

.ml-card__brand {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	color: var(--ml-sage);
}

.ml-card__title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}
.ml-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ml-card__price {
	font-size: 15px;
	color: var(--ml-ink);
}
.ml-card__price del {
	margin-right: 6px;
	color: var(--ml-ink-faint);
	font-size: 13px;
}
.ml-card__price ins {
	text-decoration: none;
	color: var(--ml-sale);
	font-weight: 500;
}

.ml-card__cta { margin-top: 10px; }
.ml-card__cta .ml-btn { width: 100%; }

/* WooCommerce po udanym dodaniu doklada za przyciskiem link "Zobacz koszyk".
   Kafelek rosnie o linijke, sasiad zostaje na miejscu i rzad sie rozjezdza -
   a te sama tresc, razem z miniatura i przejsciem do kasy, pokazuje juz
   powiadomienie. Sam selektor musi byc z `a`, bo `woocommerce.css` ustawia
   temu linkowi `display: inline-block` przez `.woocommerce a.added_to_cart`
   i slabszy zapis przegrywal. */
.woocommerce .ml-card__cta a.added_to_cart { display: none; }

/* --- brak wynikow --- */

.ml-empty {
	padding: 60px 20px 70px;
	text-align: center;
	border: 1px solid var(--ml-line);
	background: var(--ml-sage-wash);
}
.ml-empty__mark { color: var(--ml-sage); display: flex; justify-content: center; margin-bottom: 14px; }
.ml-empty__title { font-size: 22px; font-weight: 400; }
.ml-empty__text { color: var(--ml-ink-muted); font-size: 14px; }
.ml-empty__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 24px;
}

/* --- stronicowanie --- */

.ml-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 50px;
}
.ml-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ml-line);
	font-size: 13px;
	transition: all .18s var(--ml-ease);
}
.ml-pager .page-numbers:hover { border-color: var(--ml-ink); }
.ml-pager .page-numbers.current {
	background: var(--ml-ink);
	border-color: var(--ml-ink);
	color: #fff;
}
.ml-pager .dots { border-color: transparent; }

/* --- wskaznik ladowania --- */

.ml-shop__busy {
	position: absolute;
	inset: 0;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 120px;
	background: rgba(255,255,255,.72);
	z-index: 5;
}
.ml-shop.is-busy .ml-shop__busy { display: flex; }
.ml-shop__busy span {
	width: 30px; height: 30px;
	border: 2px solid var(--ml-line-strong);
	border-top-color: var(--ml-gold);
	border-radius: 50%;
	animation: ml-spin .8s linear infinite;
}
@keyframes ml-spin { to { transform: rotate(360deg) } }

/* ==========================================================================
   Responsywnosc listingu
   ========================================================================== */

@media (max-width: 1240px) {
	.ml-shop { gap: 30px; }
	.ml-shop__results ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
	/* filtry chowaja sie w szuflade wysuwana od dolu */
	.ml-shop { grid-template-columns: minmax(0, 1fr); }

	.ml-shop__side {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		top: auto;
		z-index: 230;
		max-height: 88vh;
		border: 0;
		border-top: 1px solid var(--ml-line);
		box-shadow: 0 -20px 50px -30px rgba(0,0,0,.5);
		transform: translateY(101%);
		transition: transform .3s var(--ml-ease);
	}
	.ml-shop__side.is-open { transform: none; }
	.ml-side__head, .ml-side__foot { display: flex; }
	.ml-side__body { flex: 1; }

	.ml-toolbar__filters { display: inline-flex; }
	.ml-toolbar__count { text-align: right; flex: 1; }
}

@media (max-width: 720px) {
	.ml-shop__results ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
	.ml-card__sizes { display: none; }
	.ml-toolbar { gap: 10px; }
	.ml-toolbar__sort select { padding: 9px 30px 9px 10px; font-size: 12px; }
	.ml-swatches { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Karta produktu
   ========================================================================== */

/* Kolumna ze zdjeciem ma gorny sufit, a nie ulamek szerokosci strony.
   Przy zdjeciach 2:3 poprzednie `1.15fr` dawalo na duzym ekranie zdjecie
   ponad 1100 px wysokie - miniatury ladowaly poza ekranem. */
.ml-single {
	display: grid;
	grid-template-columns: minmax(0, min(520px, 46%)) minmax(0, 1fr);
	gap: 20px 56px;
	padding-block: 16px 60px;
	align-items: start;
}

.ml-single__gallery { position: relative; }

/* Kolumna z ceną i zakupem NIE jest przyklejona.
   Chrome liczy blok ograniczajacy `position: sticky` dla elementu siatki
   z calego kontenera, nie z jego wiersza - przy zjezdzaniu kolumna zsuwala
   sie na sekcje "Opis i wymiary" i teksty nachodzily na siebie (zgloszone
   7.09.2026). Odkad galeria ma sufit wysokosci, przyklejanie i tak dawalo
   ze 200 px przewijania, a za sledzenie zakupu odpowiada pasek `ml-sticky`
   przy dolnej krawedzi ekranu. */
.ml-single__summary { max-width: 620px; }

.ml-single__brand {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	color: var(--ml-sage);
}
.ml-single__title {
	margin: 0 0 8px;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 300;
	line-height: 1.25;
}
.ml-single__sku { font-size: 12px; color: var(--ml-ink-faint); margin-bottom: 18px; }

.ml-single__price {
	font-size: 26px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ml-line);
}
.ml-single__price del { color: var(--ml-ink-faint); font-size: 18px; margin-right: 10px; }
.ml-single__price ins { text-decoration: none; color: var(--ml-sale); }
.ml-single__price .woocommerce-price-suffix { font-size: 12px; color: var(--ml-ink-faint); }

.ml-single__lead { color: var(--ml-ink-soft); font-size: 14px; }

.ml-single__buy { margin-block: 20px; }
.ml-single__buy form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.ml-single__buy .quantity input {
	width: 74px;
	padding: 15px 8px;
	border: 1px solid var(--ml-line-strong);
	font-family: inherit;
	font-size: 15px;
	text-align: center;
}
.ml-single__buy button.button,
.ml-single__buy .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	padding: 15px 28px;
	border: 1px solid var(--ml-ink);
	background: var(--ml-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	cursor: pointer;
	border-radius: var(--ml-radius);
	transition: background .25s var(--ml-ease), border-color .25s var(--ml-ease);
}
.ml-single__buy button.button:hover { background: var(--ml-gold-deep); border-color: var(--ml-gold-deep); }
.ml-single__buy .variations { width: 100%; }
.ml-single__buy .variations td, .ml-single__buy .variations th { padding: 6px 0; }
.ml-single__buy select {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--ml-line-strong);
	font-family: inherit;
	border-radius: var(--ml-radius);
}

.ml-single__stock { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ml-ink-soft); }
.ml-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ml-dot--ok { background: var(--ml-ok); }
.ml-dot--off { background: var(--ml-ink-faint); }

.ml-single__perks {
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--ml-line);
	list-style: none;
	font-size: 13px;
	color: var(--ml-ink-muted);
}
.ml-single__perks li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.ml-single__perks li::before {
	content: '';
	position: absolute;
	left: 0; top: 8px;
	width: 9px; height: 5px;
	border: solid var(--ml-gold);
	border-width: 0 0 1.5px 1.5px;
	transform: rotate(-45deg);
}

.ml-single__details { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--ml-line); }
.ml-single__h2 { font-size: 18px; font-weight: 500; margin-bottom: 14px; }
.ml-single__desc { max-width: 76ch; }
.ml-single__desc p:empty { display: none; }

.ml-single__details .shop_attributes { width: 100%; max-width: 620px; border-collapse: collapse; }
.ml-single__details .shop_attributes th,
.ml-single__details .shop_attributes td {
	padding: 10px 12px;
	border: 1px solid var(--ml-line);
	text-align: left;
	font-size: 14px;
}
.ml-single__details .shop_attributes th { background: var(--ml-sage-wash); font-weight: 500; width: 34%; }
.ml-single__details .shop_attributes p { margin: 0; }

/* produkty powiazane korzystaja z tych samych kafelkow, co listing */
.related, .upsells { padding-block: 40px 70px; border-top: 1px solid var(--ml-line); }
.related > h2, .upsells > h2 {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 22px;
}
.related ul.products, .upsells ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1000px) {
	.ml-single { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.related ul.products, .upsells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.related ul.products, .upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	.ml-single__buy .single_add_to_cart_button { min-width: 0; }
}

/* dopisek "z VAT" przy cenie ma byc szeptem, nie krzykiem */
.ml-card__price .woocommerce-price-suffix,
.ml-single__price .woocommerce-price-suffix {
	display: block;
	font-size: 11px;
	color: var(--ml-ink-faint);
	letter-spacing: .02em;
}

/* przycisk "dodaj do koszyka" na kafelku nie ma sie lamac na trzy linie */
.ml-card__cta .ml-btn {
	/* `display: flex` zamiast samego `text-align`.
	   `text-align` srodkuje tylko w poziomie. Przycisk ma `min-height: 40px`,
	   a jego tresc przy foncie 10px i `line-height: 1.2` zajmuje z paddingiem
	   okolo 34px - reszta zostawala pod napisem i tekst siedzial nad srodkiem.
	   Flex srodkuje w obu osiach, niezaleznie od dlugosci napisu. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 11px 10px;
	font-size: 10px;
	letter-spacing: .1em;
	line-height: 1.2;
	text-align: center;
	min-height: 40px;
}
.ml-card__cta .button.loading { opacity: .6; }

/* WooCommerce narzuca zdjeciom w petli `height: auto` selektorem o wyzszej
   specyficznosci niz sama klasa - stad ta dluzsza sciezka */
.ml-shop__results ul.products li.product a img.ml-card__img,
.related ul.products li.product a img.ml-card__img,
.upsells ul.products li.product a img.ml-card__img,
.ml-polecane ul.products li.product a img.ml-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* dlugie listy filtrow: widoczna krawedz przewijania zamiast urwanego wiersza */
.ml-opts--scroll {
	mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
	padding-bottom: 14px;
}
.ml-opts--scroll::-webkit-scrollbar { width: 4px; }
.ml-opts--scroll::-webkit-scrollbar-thumb { background: var(--ml-line-strong); }

/* ==========================================================================
   Nadpisania WooCommerce
   ==========================================================================
   Arkusze WooCommerce zostaja wpiete (bez nich rozsypuje sie galeria produktu,
   koszyk i kasa), wiec kolizje rozwiazujemy tutaj - selektorami o co najmniej
   takiej samej specyficznosci, jaka ma regula WooCommerce.
   ========================================================================== */

/* przyciski: czern marki zamiast domyslnego fioletu */
.woocommerce .ml-single__buy button.button,
.woocommerce .ml-single__buy button.button.alt,
.woocommerce .ml-single__buy .single_add_to_cart_button,
.woocommerce .ml-card__cta a.button,
.woocommerce .ml-empty a.ml-btn {
	background: var(--ml-ink);
	color: #fff;
	border-radius: var(--ml-radius);
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
}
.woocommerce .ml-single__buy button.button:hover,
.woocommerce .ml-single__buy button.button.alt:hover,
.woocommerce .ml-single__buy .single_add_to_cart_button:hover {
	background: var(--ml-gold-deep);
	color: #fff;
}

/* kafelek: przycisk ma wygladac jak nasz, nie jak domyslny WooCommerce */
.woocommerce .ml-card__cta a.button {
	display: flex;
	width: 100%;
	padding: 11px 10px;
	background: transparent;
	border: 1px solid var(--ml-ink);
	color: var(--ml-ink);
	font-size: 10px;
	line-height: 1.2;
	text-align: center;
	justify-content: center;
	align-items: center;
	min-height: 40px;
}
.woocommerce .ml-card__cta a.button:hover {
	background: var(--ml-ink);
	color: #fff;
}

.woocommerce .ml-single .ml-single__summary { width: 100%; float: none; margin: 0; }

/* stan magazynowy piszemy wlasnymi slowami tuz obok - domyslny napis dubluje */
.ml-single__buy .stock { display: none; }



/* Kafelki w wierszu maja konczyc sie na tej samej wysokosci - tytul zajmuje
   staly obszar dwoch linii, a przycisk siada na dole niezaleznie od dlugosci
   nazwy produktu. */
.ml-shop__results ul.products li.product,
.related ul.products li.product,
.upsells ul.products li.product {
	display: flex;
	flex-direction: column;
}
.ml-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ml-card__title {
	min-height: 2.8em;
}
.ml-card__cta {
	margin-top: auto;
	padding-top: 10px;
}

@media (max-width: 560px) {
	/* na waskim ekranie trzy elementy paska nie mieszcza sie w jednej linii -
	   licznik schodzi pod przycisk filtrow i sortowanie */
	.ml-toolbar {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px 12px;
	}
	.ml-toolbar__filters { grid-column: 1; }
	.ml-toolbar__sort { grid-column: 2; justify-self: end; }
	.ml-toolbar__sort select { max-width: 100%; }
	.ml-toolbar__count {
		grid-column: 1 / -1;
		grid-row: 2;
		text-align: left;
	}
}

/* tabela wymiarow */
.ml-measure {
	width: 100%;
	max-width: 460px;
	border-collapse: collapse;
	margin-bottom: 10px;
}
.ml-measure th,
.ml-measure td {
	padding: 10px 12px;
	border: 1px solid var(--ml-line);
	font-size: 14px;
	text-align: left;
}
.ml-measure th {
	background: var(--ml-sage-wash);
	font-weight: 500;
	width: 58%;
}
.ml-measure td { font-variant-numeric: tabular-nums; }
.ml-measure__note {
	max-width: 460px;
	font-size: 12px;
	color: var(--ml-ink-faint);
	margin-bottom: 28px;
}

/* ==========================================================================
   Sekcje SEO kategorii

   Wtyczka `seo-kategorie-swp` dokleja do swojego HTML wlasny arkusz z szarym
   tlem i zlota linia. Zostawiamy jej znaczniki, ale ubieramy je w typografie
   sklepu - stad `!important`, bo tamte reguly sa wstrzykiwane inline.
   ========================================================================== */

.ml-seo { margin-block: 10px 34px; }
.ml-seo--dol { margin-block: 54px 0; }

.ml-seo .modalisa-seo-kategoria-top,
.ml-seo .modalisa-seo-kategoria-bottom {
	max-width: none !important;
	margin: 0 !important;
	padding: 30px 34px !important;
	background: var(--ml-sage-wash) !important;
	border: 0 !important;
	border-left: 3px solid var(--ml-gold) !important;
	border-radius: var(--ml-radius) !important;
	text-align: left !important;
}

.ml-seo .modalisa-seo-h1,
.ml-seo .modalisa-seo-h2 {
	font-family: var(--ml-font) !important;
	font-size: clamp(22px, 3vw, 30px) !important;
	font-weight: 300 !important;
	letter-spacing: -.01em !important;
	color: var(--ml-ink) !important;
	margin: 0 0 12px !important;
}
.ml-seo--dol .modalisa-seo-h2 { font-size: clamp(19px, 2.2vw, 24px) !important; }

.ml-seo .modalisa-seo-tekst,
.ml-seo .modalisa-seo-tekst-dol {
	max-width: 78ch !important;
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: var(--ml-ink-soft) !important;
}
.ml-seo .modalisa-seo-tekst p,
.ml-seo .modalisa-seo-tekst-dol p { margin: 0 0 .8em !important; }
.ml-seo .modalisa-seo-tekst p:last-child,
.ml-seo .modalisa-seo-tekst-dol p:last-child { margin-bottom: 0 !important; }
.ml-seo a { color: var(--ml-gold-deep) !important; border-bottom: 1px solid currentColor; }

@media (max-width: 700px) {
	.ml-seo .modalisa-seo-kategoria-top,
	.ml-seo .modalisa-seo-kategoria-bottom { padding: 22px 20px !important; }
	.ml-seo .modalisa-seo-tekst,
	.ml-seo .modalisa-seo-tekst-dol { font-size: 14px !important; }
}


/* ==========================================================================
   Przyklejony pasek zakupu
   ========================================================================== */

.ml-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 240;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px clamp(14px, 3vw, 40px);
	background: var(--ml-paper);
	border-top: 1px solid var(--ml-line);
	box-shadow: 0 -14px 34px -26px rgba(0,0,0,.55);
	transform: translateY(101%);
	transition: transform .3s var(--ml-ease);
}
.ml-sticky.jest-widoczny { transform: none; }

.ml-sticky__foto {
	flex: 0 0 auto;
	width: 52px; height: 66px;
	object-fit: cover;
	background: var(--ml-sage-wash);
}
.ml-sticky__opis { flex: 1; min-width: 0; }
.ml-sticky__nazwa {
	display: block;
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ml-sticky__cena { display: block; font-size: 15px; margin-top: 2px; }
.ml-sticky__cena del { color: var(--ml-ink-faint); font-size: 13px; margin-right: 6px; }
.ml-sticky__cena ins { text-decoration: none; color: var(--ml-sale); }
.ml-sticky__cena .woocommerce-price-suffix,
.ml-sticky__cena .ml-omnibus { display: none; }

.ml-sticky__btn { flex: 0 0 auto; min-width: 180px; }

/* pasek nachodzilby na pasek demo i na stopke - odsuwamy dol strony */
body.ml-ma-pasek { padding-bottom: var(--ml-sticky-h, 88px); }
body.ml-ma-pasek .ml-demobar { bottom: var(--ml-sticky-h, 88px); }

.ml-podswietl {
	box-shadow: 0 0 0 3px rgba(194, 154, 81, .5);
	transition: box-shadow .4s var(--ml-ease);
}

@media (max-width: 600px) {
	.ml-sticky { gap: 10px; padding: 8px 12px; }
	.ml-sticky__foto { width: 42px; height: 54px; }
	.ml-sticky__nazwa { font-size: 12px; }
	.ml-sticky__cena { font-size: 14px; }
	.ml-sticky__btn { min-width: 0; padding: 12px 16px; font-size: 11px; }
}

/* ==========================================================================
   Najniższa cena z 30 dni (Omnibus)
   ========================================================================== */

.ml-omnibus {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.45;
	color: var(--ml-ink-faint);
	font-weight: 400;
}
.ml-omnibus strong,
.ml-omnibus .woocommerce-Price-amount {
	color: var(--ml-ink-muted);
	font-weight: 600;
	font-size: 11px;
}
.ml-omnibus--single {
	margin: 8px 0 0;
	padding: 8px 12px;
	background: var(--ml-sage-wash);
	border-left: 2px solid var(--ml-gold);
	font-size: 12px;
}
.ml-omnibus--single strong,
.ml-omnibus--single .woocommerce-Price-amount { font-size: 12px; }

/* ==========================================================================
   Ostatnio oglądane i propozycje
   ========================================================================== */

.ml-polecane {
	padding-block: 40px 0;
	border-top: 1px solid var(--ml-line);
}
.ml-polecane__tytul {
	margin: 0 0 22px;
	font-size: 18px;
	font-weight: 500;
}
.ml-polecane ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce .ml-polecane ul.products li.product {
	display: flex;
	flex-direction: column;
	width: 100%;
	float: none;
	margin: 0;
}

/* w koszyku sekcje ida na cala szerokosc, pod siatka koszyka */
.woocommerce-cart .ml-polecane { grid-column: 1 / -1; }

@media (max-width: 1000px) {
	.ml-polecane ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.ml-polecane ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
}

/* ---------------------------------------------------------------------------
   Kaskada wynikow wyszukiwania

   Pod glowna lista ida kolejne poziomy trafnosci: blisko, podobne, reszta
   oferty. Kazdy z nich jest wizualnie slabszy od poprzedniego - klientka ma
   od razu widziec, ze schodzi coraz nizej, a nie ze sklep pokazuje jej cztery
   rownorzedne listy.
   --------------------------------------------------------------------------- */

.ml-poziom-info {
	margin: 4px 0 18px;
	padding: 12px 16px;
	background: #fbf7ef;
	border-left: 3px solid var(--ml-gold);
	font-size: 14px;
	color: var(--ml-ink-muted);
}
.ml-poziom-info a {
	color: var(--ml-gold-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ml-poziomy { margin-top: 46px; }

.ml-poziom {
	padding-top: 34px;
	margin-top: 34px;
	border-top: 1px solid var(--ml-line);
}
.ml-poziom:first-child { margin-top: 0; }

.ml-poziom__head { margin-bottom: 22px; }
.ml-poziom__tytul {
	margin: 0 0 4px;
	font-size: clamp(19px, 2.4vw, 25px);
	font-weight: 300;
}
.ml-poziom__opis {
	margin: 0;
	font-size: 13px;
	color: var(--ml-ink-muted);
}

/* Im nizszy poziom, tym mniej uwagi ma na siebie zabierac. */
.ml-poziom--podobne .ml-poziom__tytul,
.ml-poziom--pozostale .ml-poziom__tytul { font-size: clamp(17px, 2vw, 21px); }

.ml-poziom__wiecej { margin: 26px 0 0; text-align: center; }

/* ==========================================================================
   Galeria produktu

   Zdjecie i miniatury maja miescic sie na jednym ekranie - stad sufit
   wysokosci sceny zamiast zdjecia na cala szerokosc kolumny. Miniatury stoja
   na PC z lewej strony zdjecia, wiec zmiana kadru nie wymaga przewijania
   strony w dol i z powrotem do gory.

   Tasma zdjec przewija sie natywnie (`scroll-snap`), wiec palcem dziala
   nawet bez JavaScriptu; skrypt doklada strzalki, miniatury i powiekszenie.
   ========================================================================== */

.ml-gal {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}
.ml-gal__scena { grid-column: 2; grid-row: 1; }
.ml-gal__miniatury { grid-column: 1; grid-row: 1; }

.ml-gal--jedno { grid-template-columns: minmax(0, 1fr); }
.ml-gal--jedno .ml-gal__scena { grid-column: 1; }

.ml-gal__scena {
	position: relative;
	overflow: hidden;
	background: var(--ml-paper);
	/* Sufit wysokosci ograniczamy nizej, na klatce. Gdyby scena zostala szersza,
	   niz potrzebuje zdjecie 2:3 o tej wysokosci, po bokach wyszlyby biale pasy -
	   stad ta sama liczba przeliczona na szerokosc. */
	max-width: calc(min(72vh, 760px) * 2 / 3);
}

.ml-gal__tasma {
	display: flex;
	align-items: flex-start;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ml-gal__tasma::-webkit-scrollbar { display: none; }

.ml-gal__klatka {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ml-paper);
	cursor: zoom-in;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	max-height: min(72vh, 760px);
}
.ml-gal__klatka img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Strzalki sa widoczne od razu, a nie dopiero po najechaniu - sklep prosil
   o strzalke, ktora widac bez szukania. */
.ml-gal__strzalka {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 54px;
	padding: 0;
	border: 0;
	border-radius: var(--ml-radius);
	background: rgba(255,255,255,.9);
	color: var(--ml-ink);
	box-shadow: 0 2px 14px rgba(17,17,17,.14);
	cursor: pointer;
	transition: background .2s var(--ml-ease), color .2s var(--ml-ease);
}
.ml-gal__strzalka:hover { background: var(--ml-ink); color: #fff; }
.ml-gal__strzalka--wstecz { left: 0; }
.ml-gal__strzalka--dalej { right: 0; }

.ml-gal__licznik {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 4px 9px;
	background: rgba(17,17,17,.62);
	color: #fff;
	font-size: 11px;
	letter-spacing: .06em;
}

/* Powiekszenie jest podpisane, a nie tylko zaznaczone lupka - poprzednia
   ikonka PhotoSwipe w rogu zdjecia dla sklepu nie istniala. */
.ml-gal__lupa {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	background: rgba(255,255,255,.9);
	color: var(--ml-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ml-tracking-label);
	text-transform: uppercase;
	box-shadow: 0 2px 14px rgba(17,17,17,.12);
	pointer-events: none;
}

.ml-gal__miniatury {
	display: grid;
	gap: 8px;
	max-height: min(72vh, 760px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	scrollbar-width: thin;
}
.ml-gal__miniatury li { margin: 0; padding: 0; list-style: none; }

.ml-gal__mini {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s var(--ml-ease), border-color .2s var(--ml-ease);
}
.ml-gal__mini img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}
.ml-gal__klatka--zastepcza { cursor: default; }

.ml-gal__mini:hover { opacity: .85; }
.ml-gal__mini.jest-aktywna { opacity: 1; border-color: var(--ml-ink); }

@media (max-width: 1000px) {
	.ml-gal { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.ml-gal__scena { grid-column: 1; grid-row: 1; }
	.ml-gal__miniatury {
		grid-column: 1;
		grid-row: 2;
		grid-auto-flow: column;
		grid-auto-columns: 62px;
		max-height: none;
		padding-bottom: 4px;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.ml-gal__klatka { max-height: min(64vh, 560px); }
}

/* ==========================================================================
   Powiekszenie zdjecia na pelny ekran

   Zastepuje PhotoSwipe, ktory jechal z WooCommerce. Tamten otwieral sie
   wylacznie z lupki w rogu zdjecia i nikt go nie znajdowal.
   ========================================================================== */

.ml-lupa {
	position: fixed;
	inset: 0;
	z-index: 400;
	background: rgba(17,17,17,.95);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s var(--ml-ease), visibility .2s;
}
.ml-lupa.jest-otwarta { opacity: 1; visibility: visible; }

.ml-lupa__scena {
	position: absolute;
	inset: 62px clamp(56px, 8vw, 110px) 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
/* Element `img` ma byc dokladnie tym, co widac - wtedy klikniecie obok
   zdjecia trafia w tlo i zamyka okno, a nie w niewidzialny margines. */
.ml-lupa__scena img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.ml-lupa__strzalka,
.ml-lupa__zamknij {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--ml-radius);
	background: rgba(255,255,255,.14);
	color: #fff;
	cursor: pointer;
	transition: background .2s var(--ml-ease);
}
.ml-lupa__strzalka:hover,
.ml-lupa__zamknij:hover { background: rgba(255,255,255,.3); }

.ml-lupa__strzalka {
	top: 50%;
	transform: translateY(-50%);
	width: clamp(40px, 5vw, 56px);
	height: 84px;
}
.ml-lupa__strzalka--wstecz { left: clamp(6px, 1.5vw, 22px); }
.ml-lupa__strzalka--dalej { right: clamp(6px, 1.5vw, 22px); }

.ml-lupa__zamknij {
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
}

.ml-lupa__licznik {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	color: #fff;
	font-size: 12px;
	letter-spacing: .1em;
}

@media (max-width: 700px) {
	.ml-lupa__scena { inset: 58px 8px 52px; }
	.ml-lupa__strzalka { height: 64px; background: rgba(255,255,255,.1); }
}