/* hostuję na serwerze orion, aby osoby, które nie mają wyjścia do internetu też mogły portal przeglądać */ 
@import url("/font_lato.css"); 
@import url("/icons_fontawesome.css"); 

/* Ustalone z Ateneo 4 lipca 2022, że reset.css muszę zrobić sam */ 
	.leszek, .leszek div, .leszek span, .leszek applet, .leszek object,
	.leszek iframe, .leszek h1, .leszek h2, .leszek h3, .leszek h4,
	.leszek h5, .leszek h6, .leszek p, .leszek blockquote, .leszek pre,
	.leszek a, .leszek abbr, .leszek acronym, .leszek address, .leszek big,
	.leszek cite, .leszek code, .leszek del, .leszek dfn, .leszek em,
	.leszek img, .leszek ins, .leszek kbd, .leszek q, .leszek s, 
	.leszek samp, .leszek small, .leszek strike, .leszek strong, .leszek sub,
	.leszek sup, .leszek tt, .leszek var, .leszek b, .leszek u, 
	.leszek i, .leszek center, .leszek dl, .leszek dt, .leszek dd, .leszek ol,
	.leszek ul, .leszek li, .leszek fieldset, .leszek form, .leszek label,
	.leszek legend, .leszek table, .leszek caption, .leszek tbody, 
	.leszek tfoot, .leszek thead, .leszek tr, .leszek th, .leszek td, 
	.leszek article, .leszek aside, .leszek canvas, .leszek details, .leszek embed,
	.leszek .leszek figure, .leszek figcaption, .leszek footer, .leszek header, 
	.leszek hgroup, .leszek .leszek menu, .leszek nav, .leszek output, 
	.leszek ruby, .leszek section, .leszek summary, .leszek time,
	.leszek mark, .leszek audio, .leszek video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		/* font: inherit; <-- wyłączam bo znikają ikony */ 
		vertical-align: baseline;
	}
	.leszek article, .leszek aside, .leszek details, .leszek figcaption,
	.leszek figure, .leszek .leszek footer, .leszek header, .leszek hgroup,
	.leszek menu, .leszek nav, .leszek section {
		display: block;
	}
	.leszek {
		line-height: 1;
	}
	.leszek blockquote, .leszek q {
		quotes: none;
	}
	.leszek blockquote:before, .leszek blockquote:after,
	.leszek q:before, .leszek q:after {
		content: '';
		content: none;
	}
	.leszek table {
		border-collapse: collapse;
		border-spacing: 0;
	}
/* koniec reset.css */ 


body.leszek ol, body.leszek ul {
	list-style: none;
}

body.leszek {
	box-sizing: border-box;
	background: white; 
	font-family: "Lato", Helvetica, sans-serif;
	font-size: 1.2rem; 
}
body.leszek *, 
body.leszek *:before, 
body.leszek *:after {
	box-sizing: inherit;
}


/* 
 * stylowanie dla wszystkich stron -- np. linki na niebiesko, a summary na pomarańczowo 
 */

body.leszek b, 
body.leszek em { 
	font-weight: bold; 
}

body.leszek a { 
	text-decoration: none; 
	color: #AAF; 
} 
/* wyróżnienie linków Single Page Application */ 
body.leszek a.push-state-----------------niepokazuj { 
	color: #939 !important; 
}

body.leszek ::placeholder { 
	color: lightgrey; 
}

/* details dla całej strony takie samo -- to są rozwijane listy i musza wyglądać identycznie wszsędzie; zawartość wcięta
 * o 1rem, ale summary nie -- dlatego cofnięte na minusie */ 
body.leszek details { 
	padding-left: 1rem; 
	width: 100%;
}
body.leszek details summary { 
	margin-left: -1rem; 
	color: orange; 
	cursor: pointer; 
}



body.leszek i.fas.pad-left { 
	padding-left: .3em; 
}
body.leszek i.fas.pad-right { 
	padding-right: .3em; 
}

body.leszek { 
	margin: 0px; 
	padding: 1rem; 
	padding-bottom: 1rem; 
}
body.leszek header, 
body.leszek main, 
body.leszek aside, 
body.leszek footer, 
body.leszek .slajdy-luster, 
body.leszek .filtr-luster { 
	margin-bottom: 1rem; 
}

body.leszek svg { 
	fill: currentColor; 
	height: 1.2em; 
	width: 1.2em; 
}

body.leszek label { 
	padding: 0px 0.1em 0px 0px; 
}

body.leszek p.wylaczonyyyyy { 
	padding: 0.3em 0px; 
}

body.leszek input, 
body.leszek textarea, 
body.leszek button { 
	margin: 2px;
}


/* tam gdzie jest filtr, to są ułożone panele, w których nie chcę, aby był podział kolumny w środku; niestety żadne
 * ustawienia nie działają za wyjątkime kombinacji z "inline-block"; "avoid" i "avoid-column" nie działają w Firefox i
 * nawet jest zgłoszony błąd od wielu lat do tego:   https://bugzilla.mozilla.org/show_bug.cgi?id=549114    */ 
body.leszek details { 
	break-inside: avoid; 
	width: 100%;
}
body.leszek details[open] { 
	display: inline-block; 
}
body.leszek details:not([open]) { 
	display: block; 
}

body.leszek.jedno-lustro main>* { 
	margin-bottom: 1rem; 
} 
body.leszek.jedno-lustro main>.nazwa { 
	font-size: 120%; 
	color: green; 
}
body.leszek.jedno-lustro main .parametry { 
	display: flex; 
	flex-direction: column; 
	align-items: flex-start;
}
body.leszek.jedno-lustro main .parametry .parametr { 
	margin-bottom: 0.5rem; 
	font-size: 80%; 
	color: grey; 
}
body.leszek.jedno-lustro main .parametry .parametr em, 
body.leszek.jedno-lustro main .parametry .parametr strong { 
	color: black; 
}
body.leszek.jedno-lustro main .parametry .parametr strong { 
	font-weight: bold; 
}
body.leszek.jedno-lustro main .zdjęcia div { 
	display: flex; 
	flex-wrap: wrap;
	align-items: baseline; 
	justify-content: space-evenly; 
} 
body.leszek.jedno-lustro main .zdjęcia .zdjęcie {  /* to jest figure */ 
	display: flex; 
	flex-direction: column; 
	align-items: center;
	margin: 2rem; 
}
body.leszek.jedno-lustro main .zdjęcia .zdjęcie .podpis { 
	font-size: 80%; 
	font-style: italic; 
	color: #888; 
	text-align: center; 
	/* nie wiem jak zrobić, aby podpis nie był szerszy niż zdjęcie, zwłaszcza, że zdjęcie się zwęża jak ekran jest
 	 * wąski; dlatego wpisuję aby nie był szerszy niż 500 pikseli */ 
	max-width: 500px;    
}
body.leszek.jedno-lustro main .zdjęcia .zdjęcie img { 
	max-height: 80vh; 
	max-width: 80vw; 
}
body.leszek.jedno-lustro main .zdjęcia .zdjęcie hr { 
	margin: 5px; 
	width: 80%; 
	height: 1px; 
	background: black; 
	border: 0px; 
	margin-left: auto; 
	margin-right: auto; 
	color: #666; 
} 
body.leszek.jedno-lustro main .zdjęcia .zdjęcie .odkryj { 
	font-size: 150%; 
}
body.leszek.jedno-lustro main .parametry .parametr .uwagi { 
	margin-top: 1em; 
}
body.leszek.jedno-lustro main .parametry .parametr .uwagi p { 
	margin-bottom: 1em;
}
body.leszek.jedno-lustro main .parametry .parametr .do-pobrania li, 
body.leszek.jedno-lustro main .parametry .parametr .szczegóły li { 
	margin-top: 0.3em; 
	font-size: 80%; 
	padding-left: 2em; 
}
body.leszek.jedno-lustro main .parametry .parametr .do-pobrania .opis { 
	padding-left: 0.5em; 
	color: #888; 
	font-style: italic; 
}
body.leszek.jedno-lustro main .parametry .parametr .do-pobrania a { 
}
body.leszek.jedno-lustro main .ostatnie, 
body.leszek.jedno-lustro main .warianty, 
body.leszek.jedno-lustro main .porównanie { 
}
body.leszek.jedno-lustro main .porównanie .nadtabela { 
	overflow-x: auto;
	padding: 0.5em 0px;
}
body.leszek.jedno-lustro main .porównanie td a { 
}


body.leszek table { 
}
body.leszek table thead tr, 
body.leszek table tbody tr:nth-child(even) {
	background-color: #f2f2f2;
}
body.leszek table th, 
body.leszek table td { 
	border: 1px solid #DDD; 
	vertical-align: middle;
}
body.leszek table td { 
	font-family: monospace, monospace; 
	font-size: 80%; 
	padding: 0px 0.3em; 
}
body.leszek table th { 
	padding: 0.5em; 
	font-size: 80%; 
} 


/* 
 * filtrowanie i sortowanie w tabelce 
 */

body.leszek thead tr.filtruj-sortuj th { 
	padding: 0px; 
}
body.leszek thead tr.filtruj-sortuj th div { 
	width: 100%; 
	display: flex; 
	align-items: center;
}

body.leszek thead tr.filtruj-sortuj th .filtr { 
	margin: 0px; 
	padding: 0px; 
	background: #F2F2F2; 
	border: 0px solid blue; 

	width: 1em; /* będzie ustawiane javascriptem */ 
	flex-grow: 4; 
}
body.leszek thead tr.filtruj-sortuj th .filtr:placeholder-shown { 
	color: lightgrey; 

	/* niestety tak dziwnie trzeba pisać */ 
	font-family: monospace, 'Font Awesome 5 Free';  
	font-weight: 900; 
}
body.leszek thead tr.filtruj-sortuj th .filtr:not(:placeholder-shown) { 
	color: red; 
	font-family: monospace;  
}

body.leszek thead tr.filtruj-sortuj th .sortuj { 
	color: red; 
	padding: 0 .3em; 
	font-size: 125%; 
}
body.leszek thead tr.filtruj-sortuj th .sortuj.fa-sort { 
	color: lightgrey; 
}

/*
 * akcje w stopce tabeli 
 */
body.leszek tfoot tr.akcje-tabeli td >div { 
	margin: .5em 0em; 
	font-size: 80%; 
}
body.leszek tfoot tr.akcje-tabeli .przyciski { 
	display: flex; 
	width: 100%; 
	justify-content: end; 
} 
body.leszek tfoot tr.akcje-tabeli .przyciski >* { 
	margin-left: 3em; 
	font-style: italic; 
}


/* 
 * typy kolumn w tabeli 
 */
body.leszek table td.liczba { 
	text-align: right; 
}
body.leszek table td.tekst { 
	font-size: 60%; 
	font-style: italic; 
}
body.leszek table td.zdjęcie { 
	text-align: center; 
	padding: 3px; 
}
body.leszek table tfoot td { 
	border: 0px; 
	color: grey; 
}


/*
 * slajdy -- inspiracje, aranżacje, wizualizacje
 */

body.leszek .slajdy .przełącz { 
	margin-left: 1rem; 
	margin-top: 0.5rem; 
	font-size: 60%; 
	color: grey; 
}
body.leszek .slajdy .przełącz .wybór { 
	display: inline-flex; 
	align-items: center; 
}
body.leszek .slajdy .przełącz label { 
	padding-right: 2em; 
}

body.leszek .slajdy .ekran { 
	display: flex; 
	align-items: baseline;
}
body.leszek .slajdy.przewijane .ekran { 
	overflow-x: scroll; 
	overflow-y: hidden; 
} 
body.leszek .slajdy:not(.przewijane) .ekran { 
	flex-wrap: wrap; 
	overflow: visible; 
} 

body.leszek .dragscroll { 
	cursor: move; 
}
/* jeśli ekran dotykowy, to blokuję przewijanie na środku obrazu; nie mogę tego umieścić u góry, bo wtedy dragscroll nie
 * działa */ 
@media (pointer: coarse) {
	body.leszek .slajdy .ekran { 
		scroll-snap-type: x proximity; 
	}
}

body.leszek .slajd { 
	scroll-snap-align: center;
	margin: 1rem 1rem 0px 1rem; 
}
body.leszek .slajd img { 
	/* wysokość obrazka musi rozciągać pionowo */
	/*
	max-height: 70vmin;
	max-width: 70vmin; 
	*/ 
	/* Marek Sowula, 16 lutego po południu */ 
	height: 70vmin;
}
body.leszek .slajd p { 
	margin: .5rem 0px 0px;
	max-width: 70vmin; 
	min-width: 20em; 
	font-size: 70%; 
	color: #AAF; 
	font-style: italic;
	text-align: center; 
}


/* 
 * kafelki z lustrami po filtrowaniu 
 */

body.leszek .kafelki { 
	display: flex; 
	flex-wrap: wrap;
	align-items: first baseline; 
	justify-content: space-evenly; 
} 
body.leszek .kafelek {   
	/* display: flex;  */ 
	flex-direction: column; 
	align-items: center; 
	padding: 15px; 
	margin: 10px; 
}
@media all and (max-width: 1000px) {
	body.leszek .kafelek {
		padding: 5px; 
		margin: 5px; 
	}
}
body.leszek .kafelek.wybrany {
	box-shadow: 5px 5px 15px 0px #DDD;
}
body.leszek .kafelek .podpis {   
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 180px; /* 150 pikseli razy 1.2 tak jak liczę max dla miniatury */ 
	margin-left: auto; 
	margin-right: auto; 
}
body.leszek .kafelek .podpis>* { 
	margin-top: 5px; 
}
body.leszek .kafelek .podpis .nowość { 
	color: red; 
} 
body.leszek .kafelek .podpis .nazwa { 
	display: block;   /* bo jest "a" */ 
	font-size: 80%; 
	color: #AAF;
	text-align: center; 
}
body.leszek .kafelek .podpis .wymiar { 
	color: green; 
} 

body.leszek .kafelek .podpis .jedn { 
	font-size: 60%; 
	padding-left: 0.1em; 
}
body.leszek .kafelek .podpis .dostępność { 
	text-align: center; 
	font-size: 60%; 
	color: #888; 
} 
body.leszek .kafelek .podpis .opis { 
	font-size: 60%; 
	font-style: italic; 
	color: green; 
	text-align: center; 
}
body.leszek .kafelek .podpis .warianty { 
	font-size: 70%; 
	white-space: normal; 
	color: orange; 
	margin-top: 1em;
}
body.leszek .kafelek.odkryte .podpis .warianty { 
	color: lightgrey; 
}

body.leszek .miniatura { 
	display: flex;
	flex-flow: column;
} 
body.leszek .miniatura .zdjęcia { 
	display: flex; 
	justify-content: center;  /* aby zdjęcie było na środku */ 
	align-items: flex-end;   /* aby zdjęcie było u dołu ułożone */ 
	margin-left: auto;     /* wymiar zdjęć jest obliczany, więc musi być na środku kontenera wyżej czyli miniatury */
	margin-right: auto; 
}
body.leszek .miniatura .zdjęcia img { 
	/* "img" znajduje się w "div.zdjęcia", które ma narzucony wymiar przez Javascript, taki placeholder; zdjęcie nie
 	 * może tego placeholdera rozszerzać, bo wtedy przy zmianie kropek ekran skacze */ 
	max-width: 100%; 
	max-height: 100%; 
	pointer-events: none; 
	/* user-select: none; */ 
}
body.leszek .miniatura .kropki { 
	display: flex; 
	width: 100%; 
	color: #BBB;
	font-family: sans-serif; 
	font-size: 80%; 
	padding: 5px 0px; 
}
body.leszek .miniatura .kropki .kropka { 
	flex-grow: 4; 
	cursor: pointer; 
	text-align: center; 
}
body.leszek .miniatura .kropki .kropka.wybrana:before { 
	content: "●"; 
} 
body.leszek .miniatura .kropki .kropka:not(.wybrana):before { 
	content: "○"; 
} 

body.leszek main .przyciski-koszyka { 
	margin-top: 0.5rem; 
}
body.leszek .kafelek .przyciski-koszyka { 
	margin-top: 0px; 
	display: block; 
	text-align: center; 
}
body.leszek .przyciski-koszyka button,  
body.leszek .przyciski-koszyka input {
	font-size: 70%; 
	color: grey; 
}
body.leszek .przyciski-koszyka.dostępne .kupuję, 
body.leszek .przyciski-koszyka.dostępne .dodaj {   
	color: black; 
}
body.leszek .przyciski-koszyka .w-koszyku { 
	color: red; 
}

body.leszek .kafelki .pokaż-pozostałe { 
	max-width: 8em; 
	font-size: 80%; 
	color: grey; 
} 
body.leszek .kafelek.do-pokazania { 
}
body.leszek .kafelki.nie-pokazane .kafelek.do-pokazania { 
	display: none; 
}


/* 
 * tabelka koszyka 
 */

body.leszek .tabelka-koszyka .kontrolka-ilości { 
	display: flex; 
	justify-content: flex-end; 	
	align-items: center; 
}
body.leszek .tabelka-koszyka .kontrolka-ilości .liczba { 
	padding-right: .5em;
	padding-left: .5em;
	cursor: pointer; 
}
body.leszek .tabelka-koszyka tbody .ilość { 
	color: red; 
	font-weight: bold; 
	color: red; 
}
body.leszek .tabelka-koszyka tbody td.zdjęcie { 
	background: white; 
}
body.leszek .tabelka-koszyka tbody td.zdjęcie img { 
	max-height: 4em; 
	margin: .2em;
}
body.leszek .tabelka-koszyka tbody td.ean { 
	color: grey; 
	font-size: 70%; 
}
body.leszek .tabelka-koszyka tfoot .sumy-koszyka td { 
	border: 0px; 
	padding-top: .3em; 
	padding-bottom: .3em; 
	font-size: 70%; 
	font-style: italic; 
}
body.leszek .tabelka-koszyka tfoot .sposób-odbioru td { 
	padding-top: 1em;
	text-align: right; 
	color: black; 
}
body.leszek .tabelka-koszyka tfoot .sposób-odbioru span.darmowa { 
	font-weight: normal; 
	color: lightgrey; 
}
body.leszek .tabelka-koszyka tfoot .sposób-odbioru span.płatny { 
	color: orange; 
}
body.leszek .tabelka-koszyka tfoot .płatność td { 
	padding: 1em 0;
	color: orange; 
} 
body.leszek .tabelka-koszyka tfoot .płatność td .kwota { 
	font-weight: bold; 
} 


body.leszek.koszyk main >* { 
	margin-top: 1em; 
}

body.leszek.koszyk main >.odbiór-towaru { 
	color: grey; 
}
body.leszek.koszyk main >.odbiór-towaru .opcja { 
	font-size: 90%; 
	padding-left: 1.2em; 
}

body.leszek.kupujący form p { 
	margin-top: 1em; 
} 
body.leszek.kupujący form p.dalej { 
	margin-top: .5em; 
	padding-left: 1em; 
} 
body.leszek.kupujący form p.dalej label { 
	font-size: 80%; 
} 
body.leszek.kupujący form input[type=text], 
body.leszek.kupujący form textarea { 
	display: block; 
}
body.leszek.kupujący form .opis { 
	color: grey; 
	font-style: italic; 
	font-size: 80%; 
} 
body.leszek.kupujący form input[type=text], 
body.leszek.kupujący form textarea { 
	color: orange; 
}
body.leszek.kupujący form input[name=email] { width: 20em; } 
body.leszek.kupujący form input[name=nazwa] { width: 18em; } 
body.leszek.kupujący form input[name=budynek] { width: 18em; } 
body.leszek.kupujący form input[name=miejscowość] { width: 18em; } 
body.leszek.kupujący form textarea[name=uwagi] { width: 30em; } 

body.leszek.zamówienie .kupujący, 
body.leszek.zamówienie .tabelka-koszyka { 
	margin-top: 1em; 
}
body.leszek.zamówienie .kupujący>div { 
	margin-top: 1em; 
}
body.leszek.zamówienie .kupujący pre { 
	display: inline; 
	color: orange; 
	padding-left: 1em; 
	white-space: pre; 
} 
body.leszek.zamówienie .kupujący pre.blok { 
	display: block; 
} 


body.leszek .odkryj { 
}

body.leszek .ukryty { 
	display: none !important; 
} 


/* 
 * panel filtrowania 
 */
body.leszek:not(.tylko-wyszukiwanie) .filtry { 
	/* 
	 * The columns property will accept column-count, column-width, or both properties:  columns: <column-width> ||
	 * <column-count>; Using both column-count and column-width is recommended to create a flexible multi-column
	 * layout. The column-count will act as the maximum number of columns, while the column-width will dictate the
	 * minimum width for each column. 
	*/
	columns: 24em 8;
	column-gap: 2rem;
	column-rule: 1px dashed #DDD;
	border-top: 1px dashed #DDD;
	border-bottom: 1px dashed #DDD;
	padding-top: .5rem; 
	padding-bottom: .5rem; 
} 
body.leszek .filtr { 
	padding-bottom: .5rem; 
}
body.leszek .filtr details .ustawienia { 
	display: inline-flex; 
	flex-direction: column; 
	align-items: flex-start; 
	width: 100%;
}
body.leszek .filtr details .ustawienia { 
	margin-bottom: -.5rem; 
}
body.leszek .filtr details .ustawienia > * { 
	margin-bottom: .5rem; 
} 
body.leszek .filtr .opis { 
	color: #BBB;
	font-style: italic; 
	font-size: 70%; 
}
body.leszek .filtr .mini { 
	font-size: 60%; 
	margin-right: .2em;
}
body.leszek .filtr.szukaj .pole { 
	display: flex; 
	flex-wrap: wrap; 
	width: 100%; 
}
body.leszek .filtr.szukaj .pole .przyciski { 
	display: flex; 
} 

body.leszek .filtr.szukaj .pole input[type='text'] { 
	flex-grow: 1; 
}
body.leszek .filtr.szukaj .pole input[type='button'], 
body.leszek .filtr.szukaj .pole button { 
	padding: 0px; 
	min-width: 1.5em;
	vertical-align: top; 
}
body.leszek .filtr.porządek .wybór, 
body.leszek .filtr.dostępności .wybór, 
body.leszek .filtr.warianty .wybór { 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: left; 
}
body.leszek .filtr.porządek .według, 
body.leszek .filtr.dostępności .dostępność, 
body.leszek .filtr.warianty .wariant { 
	white-space: pre; 
	margin: 0px 0.5em;
}

body.leszek .filtry .filtr.wymiary .wymiar { 
	display: inline-block; 
	margin-left: 1em; 
	vertical-align: text-top; 
} 
body.leszek .filtry .filtr.wymiary .wymiar>* { 
	vertical-align: middle; 
} 
body.leszek .filtry .filtr.wymiary .wymiar label { 
	font-size: 80%; 
} 

body.leszek .filtry .filtr.przyciski { 
	border-top: 1px dashed #DDD;
	padding-top: .5rem;
	display: inline-block; 
}
body.leszek .filtry .filtr.przyciski:not(.kropki-pokaz) input.pod-kropkami { 
	display: none; 
}


/*
 * filtr w trybie tylko wyszukiwania 
 */
body.leszek.tylko-wyszukiwanie .filtry { 
	display: flex;
	flex-wrap: wrap; 
}
body.leszek.tylko-wyszukiwanie .filtr.szukaj { 
	flex-grow: 4;
}
body.leszek.tylko-wyszukiwanie details { 
	padding-left: 0;
}


body.leszek .do-listy { 
	color: #AAF; 
	font-size: 70%; 
	display: block; 
	margin-bottom: .8rem; 
} 

body.leszek header { 
	border-bottom: 1px solid lightgrey; 
	margin-bottom: 1rem;
}
body.leszek header .ikonki { 
	font-size: 100%; 
	color: grey; 
	display: flex; 
	justify-content: flex-start; /* space-between;  */
	flex-wrap: wrap; 
	align-items: center;
	line-height: 1.7rem; 
}
body.leszek header .ikonki img { 
	font-size: 80%; 
	height: 2.1em; 
	margin-bottom: -.55em; 
}
body.leszek header .ikonki > a { 
	white-space: nowrap; 
} 
body.leszek header .ikonki > *:not(:last-child) { 
	margin-right: 2em; 
}


body.leszek .ścieżka { 
	display: flex; 
	flex-wrap: wrap; 
	color: grey; 
	font-size: 80%; 
	margin-top: 0.6em; 
	margin-bottom: 0.6em; 
}
body.leszek .ścieżka li { 
	white-space: nowrap; 
}
body.leszek .ścieżka i.fa-arrow-right { 
	padding-left: .5em; 
	padding-right: .5em; 
}

body.leszek .tytuł { 
	margin-top: 0.9em; 
	margin-bottom: 0.9em; 
	font-size: 130%; 
	color: green; 
	display: block; 
	line-height: 1.3;
} 

body.leszek .pod-tytułem { 
	margin-top: 0.5em; 
	margin-bottom: 0.5em; 
} 

body.leszek .opis-listy h1, 
body.leszek .opis-listy h2, 
body.leszek .opis-listy h3 { 
	font-weight: bold; 
	padding-top: 1em; 
	padding-bottom: .5em; 
} 
body.leszek .opis-listy strong { 
	font-weight: bold; 
} 
body.leszek .opis-listy ul { 
	list-style-type: circle;
	margin: .5em;
	margin-left: 2em;
} 
body.leszek .opis-listy li { 
	margin-top: .5em;
} 


body.leszek .filtry .filtr.kategorie ul { 
	padding-left: 1.5em; 
}
body.leszek .filtry .filtr.kategorie li[data-poziom='1'] { padding-left: calc(1 * 1.5em); } 
body.leszek .filtry .filtr.kategorie li[data-poziom='2'] { padding-left: calc(2 * 1.5em); } 
body.leszek .filtry .filtr.kategorie li[data-poziom='3'] { padding-left: calc(3 * 1.5em); } 
body.leszek .filtry .filtr.kategorie li[data-poziom='4'] { padding-left: calc(4 * 1.5em); } 
body.leszek .filtry .filtr.kategorie a { 
	color: #AAF;
} 
body.leszek .filtry .filtr.kategorie li.aktualna-ścieżka > a { 
	color: brown;
	font-weight: bold; 
} 
body.leszek .filtry .filtr.kategorie .ilość { 
	color: lightgrey; 
	font-size: 80%; 
	margin-left: .3em; 
}

body.leszek .do-góry { 
	display: block; 
	position: fixed;
	bottom: 0px; 
	z-index: 99;
	color: blue; 
	opacity: 0.3; 
	font-size: 2.5rem; /* wielkość ikony */ 
	right: 0px; 
} 
body.leszek .do-góry > * { 
	margin-left: .5rem; 
}

body.leszek.błędna-ścieżka main > * { 
	margin-bottom: 1rem;
}
body.leszek.błędna-ścieżka main img { 
	max-width: 15em;
}
body.leszek.błędna-ścieżka main a { 
	font-size: 150%; 
}

body.leszek main>.regulamin { 
	border-bottom: 1px dashed #DDD;
	transition: 1s; 
}
body.leszek main>.regulamin > * {  
	color: grey; 
	margin-bottom: .5em; 
}
body.leszek main>.regulamin p.licznik { 
	display: flex; 
	align-items: center;
	justify-content: space-between;
	transition: 1s; 
}
body.leszek main>.regulamin .logo { 
	display: flex; 
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap; 
	width: 100%; 
}
body.leszek main>.regulamin .logo a { 
}

/* 
 
logo mają takie proporcje: 

	lustra_pl_logo     -- 286x82
	dubiel_vitrum_logo -- 198x198 
	youtube_log        -- 120x84

chcę, aby były tej samej wielkości, a zajmowały na ekranie szerokości max 70vw; 
jeśli przeskaluję je do wielkości np. 100 pikseli, to będą miały szerokości: 

	lustra_pl_logo     -- 286 * 100 / 82 = 348 pikseli 
	dubiel_vitrum_logo -- 198 * 100 / 198 = 100 pikseli 
	youtube_log        -- 120 * 100 / 84 = 142 piksele
*/ 
body.leszek main>.regulamin .logo img[src*="lustra_pl_logo"] { 
	max-height: 4em; 
	max-width: calc(70vw * 348 / (348 + 100 + 142))
}
body.leszek main>.regulamin .logo img[src*="dubielvitrum_logo"] { 
	max-height: 4em; 
	max-width: calc(70vw * 100 / (348 + 100 + 142))
}
body.leszek main>.regulamin .logo img[src*="youtube_logo"] { 
	max-height: 2em; 
	max-width: calc(70vw * 142 / (348 + 100 + 142) / 2)
}

body.leszek main>.regulamin a { 
	color: #AAF; 
} 
body.leszek main>.regulamin .fa-window-close { 
	font-size: 150%; 
	margin: 0 .5em; 
}
body.leszek main>.regulamin .filmy { 
	display: flex;
	flex-wrap: wrap;
	justify-content: center; 
}
body.leszek main>.regulamin iframe { 
	width: 10em; 
	height: 6em; 
	margin: 0.3em;
	flex-grow: 2; 
}
body.leszek offfmain>.regulamin .youtube { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	font-size: 60%; 
}
body.leszek offfmain>.regulamin .youtube img { 
	width: 3em; 
	margin-top: 1em; 
}


body.leszek aside.jesteś-adminem { 
	background: darkred; 
	color: lightgrey; 
	padding: .2em; 
	font-size: 80%; 
}
body.leszek aside.jesteś-adminem .konto, 
body.leszek aside.jesteś-adminem .admin { 
	color: white; 
	font-weight: bold; 
	font-size: 120%; 
}


/* body ma klasę "leszek" dla odróżnienia od body "ateneo" */ 
body.leszek footer { 
	/* 
	column-width: 18rem;
	column-gap: 2rem;
	column-rule: 1px solid lightgrey;
	*/

	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between;
	align-items: flex-start;
	font-size: 60%;
	color: grey; 
	border-top: 1px solid lightgrey; 
	padding-top: 0.5rem;
}
body.leszek footer > div.z-logo { 
	margin-bottom: 0.5rem;
	display: flex; 
	align-items: center;
}
body.leszek footer a { 
	color: #88E;
}
body.leszek footer img { 
	max-height: 4em; 
	max-width: 12em; 
	margin: .3em; 
	margin-right: 1.2em; 
}

body.leszek .nie-łamać { 
	white-space: pre
}

body.leszek body:not(.admin) .gdy-admin { 
	display: none; 
}

body.leszek body.zalogowany .gdy-niezalogowany { 
	display: none; 
}
body.leszek body:not(.zalogowany) .gdy-zalogowany { 
	display: none; 
}

body.leszek .małe-przyciski input { 
	font-size: 60%; 
}

body.leszek .slabo { 
	color: grey; 
}

body.leszek .konto .menu { 
	display: flex; 
	flex-wrap: wrap;
	margin-top: .9em; 
	margin-bottom: .9em; 
} 
body.leszek .konto .menu>* { 
	margin-right: .5em; 
} 
body.leszek .konto .menu a { 
	margin-left: .5em;
}

body.leszek .płatność form.płatność p { 
	margin-top: .9em; 
	margin-bottom: .9em; 
}
body.leszek .płatność form.płatność p.info { 
	color: grey; 
}
body.leszek .płatność form.płatność input[value=Zapłać], 
body.leszek .płatność form.płatność input[value=Zatwierdź], 
body.leszek .płatność form.płatność input[value="Ponów płatność"] { 
	width: 12em; 
}
body.leszek .płatność form.płatność p b { 
	padding-left: .5em; 
	padding-right: .5em; 
	color: orange; 
}

body.leszek input[type=text]#konto { 
	width: 20em; 
}

body.leszek .akcje-koszyka { 
	margin-top: 2em; 
}

body.leszek main.zamówienia .zamówienie, 
body.leszek main.koszyki .koszyk { 
	margin-top: 2rem; 
	margin-bottom: 2rem; 
	border-top: 1px solid lightgrey; 
}
body.leszek main.zamówienia .zamówienie>*, 
body.leszek main.koszyki .koszyk>* { 
	margin-top: 1rem; 
}

body.leszek main.zamówienia .zamówienie .tytuł, 
body.leszek main.koszyki .koszyk .tytuł { 
	font-size: 120%;
	color: grey; 
}
body.leszek main.zamówienia .zamówienie .tytuł .numer, 
body.leszek main.koszyki .koszyk .tytuł .nazwa { 
	color: black; 
	font-weight: bold; 
}

/* aby nie łamało linii; na przykład pomiędzy checkbox a etykietą za nim */
body.leszek .razem { 
	display: inline-block; 
}

body.leszek .cena-metka { 
	font-weight: bold; 
	color: black; 
	display: inline-flex; 
	align-items: baseline; 
	background: #FFC; 
	padding: .3rem; 
} 
body.leszek .cena-metka .stara { 
	font-weight: normal; 
	font-size: 80%; 
	color: grey; 
	position: relative;
	align-self: flex-start; 
}
body.leszek .cena-metka .stara:before {
	content: " ";
	display: block;
	width: 100%;
	border-top: 1px solid grey; 
	height: 1em;
	position: absolute;
	bottom: -0.3em;
	left: 0;
	transform: rotate(-19deg);
}
body.leszek .cena-metka .rabat-złotówkowy { 
	margin-left: -0.5em;
	font-weight: normal; 
	font-size: 60%; 
	color: grey; 
}
body.leszek .cena-metka .rabat-procentowy { 
	margin-left: 0.5rem;
	color: red; 
	font-size: 130%;
}
body.leszek .cena-metka .nowa { 
	margin-left: 0.5rem;
}
body.leszek .dostawa { 
	background: white; 
	font-size: 80%; 
	color: grey; 
	margin-left: 1em; 
} 

body.leszek header.jedno-lustro .cena-metka { 
	margin-top: 0.5em; 
	font-weight: normal; 
}
body.leszek header.jedno-lustro .cena-metka:before { 
	content: "Cena: "; 
	align-self: center; 
	margin-right: 0.5em;
	color: grey; 
}

body.leszek.regulamin main .definicja .nazwa { 
	font-weight: bold; 
}
body.leszek.regulamin main .sekcja>.tytuł {  
	margin-top: 1em; 
	font-size: 110%; 
	color: orange; 
} 
body.leszek.regulamin main .sekcja ul {  
	padding-left: 2em; 
	list-style-type: initial;
} 



body.leszek pre.log { 
	display: block; 
	padding: 0.5em; 
	font-size: 60%; 
	color: grey; 
	font-family: monospace; 
}

body.leszek .tylko-wyszukiwanie .nie-wyszukiwanie { 
	display: none; 
}



.dalej-box { 
	background: #EEE;
} 
.dalej-box .ikona { 
	font-size: 80%; 
	font-style: italic; 
	padding-top: 1em; 
	padding-bottom: 1em; 
} 
.dalej-box.idz-do .ikona { 
	color: orange; 
}
.dalej-box.ukryj-od .ikona { 
	color: darkcyan;; 
}
.dalej-box.ukryty { 
	display: none; 
} 
.dalej-box-ukrywa .pod-dalej-boxem { 
	display: none; 
} 
.dalej-box .ukryte, 
.dalej-box .wszystkie { 
	font-weight: bold; 
} 


.box-outer.pod-spodem { 
	display: none; 
}


body[data-ścieżka=produkty] .nie-dla-produkty { 
	display: none; 
} 

.filtr-info { 
	color: grey; 
	font-size: 80%; 
}

div.opis-lustra-2022-09 { 
	margin-top: 2em; 
	margin-bottom: 2em; 
} 
.opis-lustra-2022-09 h3 { 
	padding-top: 1em; 
	font-weight: bold; 
} 
.opis-lustra-2022-09 p
{ 
	padding-top: .5em; 
} 


.koszyk.edytowalny .gdy-do-odczytu { 
	display: none !important; 
} 
.koszyk.do-odczytu .gdy-edytowalny { 
	display: none !important; 
} 



.lustro-badge { 
	display: flex; 
	flex-direction: row; 
	gap: .5em; 
	align-items: center;
} 

.lustro-badge .obniżka { 
	padding-right: .5em;
} 

.wycofany-przy-produkcie { 
	margin-top: .8em; 
	margin-bottom: .8em; 
	color: red; 
} 

.box .lustro-badge.promocja[data-promocja="Black Friday"] { 
	border-radius: .5em;
	background: black; 
}
.box .lustro-badge.promocja[data-promocja="Black Friday"] .obniżka { 
	color: white; 
}

.box .lustro-badge.promocja, 
.box .lustro-badge.outlet {  
	border-radius: .5em;
	background: rgba(255, 249, 152, 0.7);
}

.lustro-badge .nazwa { 
	padding-left: .5em; 
	padding-right: .5em; 
}

.lustro-badge.nowość .nazwa { 
	background: grey; 
	color: white; 
}
.lustro-badge.outlet .nazwa { 
	background: black; 
	color: white; 
}
.lustro-badge.promocja .nazwa { 
	color: black; 
	background: var(--bs-primary); 
}

.lustro-badge.promocja[data-promocja="Black Friday"] .nazwa { 
	border-radius: .4em;
	font-size: 120%; 
}

/* na stronie pojedynczego lustra */ 
.product-name .lustro-badge { 
	font-weight: normal; 
} 

/* na kafelku */
.box .lustro-badge { 
	align-self: flex-start; 
	position: relative; 
	bottom: 2em; 
	font-weight: bold; 
} 

.obniżona-cena { 
	color: red !important; 
} 


.blog-obrazki { 
	display: flex; 
	flex-direction: row;
	display: flex;
	overflow: scroll;
	max-width: 100%;
	gap: 2em;
	justify-content: center;
} 

body > .błąd { 
	color: red; 
	padding: .3em;
}

/* Szara maska */
.maska {
	position: fixed;           /* Stała pozycja nad wszystkim */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Szary, półprzezroczysty */
	z-index: 99999;             /* Bardzo wysoko w stosie */
	pointer-events: auto;      /* Przechwytuje zdarzenia (ale nic nie robi) */
	cursor: wait;       /* Opcjonalny wizualny wskaźnik */
}


#topLoginBtn, #topCartBtn {
        padding: 4px 16px;
}