/* Lista przedmiotów */
.lista h1 {
	margin: 32px 0 16px;
}

.lista h1 + .siatka,
.lista h1 + .pusto {
	margin-top: 28px;
}

/* Pasek listy: zakładki rodzajów, pod nimi Próba, Kamień, liczba wyników i Sortuj (makieta L1) */
.narzedzia {
	margin-bottom: 32px;
	border-bottom: 1px solid var(--linia);
}

.pasek {
	display: flex;
	flex-wrap: wrap;
	gap: 0 34px;
	box-shadow: inset 0 -1px 0 var(--linia);
}

.pasek a {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	height: 52px;
	border-bottom: 2px solid transparent;
	color: var(--tekst);
	white-space: nowrap;
}

.pasek a span {
	font-size: 14px;
	color: var(--tekst-2);
	font-variant-numeric: tabular-nums;
}

.pasek a:hover {
	border-bottom-color: var(--zloto);
}

.pasek a[aria-current] {
	color: var(--zielen);
	border-bottom-color: var(--zielen);
}

.pasek a[aria-current] span {
	color: var(--zielen);
}

.filtry {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 32px;
	min-height: 56px;
}

.filtry .pole {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.filtry .pole label {
	color: var(--tekst-2);
	font-size: 15px;
	cursor: pointer;
}

.filtry select {
	-webkit-appearance: none;
	appearance: none;
	field-sizing: content;
	height: 44px;
	padding: 0 20px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23172E27' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right center / 12px 12px;
	font: 500 15px / 1 var(--sans);
	color: var(--tekst);
	cursor: pointer;
}

.filtry select:hover,
.filtry .pole.wybrane select {
	color: var(--zielen);
}

.filtry .pole.wybrane select {
	text-decoration: underline;
	text-decoration-color: var(--zloto);
	text-underline-offset: 6px;
}

.filtry .wynik {
	margin: 0 0 0 auto;
	color: var(--tekst-2);
	font-size: 15px;
}

.filtry .btn {
	height: 44px;
	padding: 0 18px;
}

.filtry .pokaz[hidden] {
	display: none;
}

/* Puste stany jednym wzorem (Ulubione, Sprzedane, wyniki, rodzaj, filtry): tekst w kolumnie 36em, jedno działanie */
.pusto {
	margin: 0 0 96px;
}

.pusto > * {
	max-width: 36em;
}

.pusto > h2 {
	margin: 0 0 12px;
	font-size: 24px;
}

.pusto p {
	margin: 0 0 12px;
	color: var(--tekst-2);
}

.pusto .akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 32px;
	margin-top: 28px;
}

.pusto .akcje .link,
.blad-404 .akcje .link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Pole szukania w treści (pusty wynik, 404) */
.szukaj-strona {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 30em;
	margin: 24px 0 0;
}

.szukaj-strona label {
	flex-basis: 100%;
	font-size: 15px;
	color: var(--tekst-2);
}

.szukaj-strona input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 12px;
	font: 400 16px / 1.4 var(--sans);
	color: var(--tekst);
	background: var(--bialy);
	border: 1px solid var(--ramka-pola);
	border-radius: 2px;
}

.szukaj-strona + .akcje {
	margin-top: 16px;
}

/* 404: tytuł, jedno zdanie, pole szukania, link do sklepu i nowe przedmioty */
.blad-404 h1 {
	margin: 32px 0 12px;
}

.blad-404 > p {
	max-width: 34em;
	margin: 0;
	color: var(--tekst-2);
}

.blad-404 > p.akcje {
	margin-top: 16px;
}

.nowe-w-sklepie {
	margin-top: 64px;
	margin-bottom: 96px;
}

.nowe-w-sklepie > h2 {
	margin: 0 0 24px;
	font-size: 24px;
}

.nowe-w-sklepie > p {
	margin: 40px 0 0;
}

@media (min-width: 901px) {
	.nowe-w-sklepie .siatka {
		grid-template-columns: repeat(4, 1fr);
		gap: 40px 24px;
	}
}

@media (max-width: 900px) {
	.lista h1,
	.blad-404 h1 {
		margin: 20px 0 12px;
	}

	.lista h1 + .siatka,
	.lista h1 + .pusto {
		margin-top: 20px;
	}

	.narzedzia {
		margin-bottom: 28px;
	}

	.pasek {
		gap: 0 24px;
		margin: 0 -16px;
		padding: 0 16px;
	}

	.pasek a {
		height: 44px;
	}

	.nowe-w-sklepie {
		margin-top: 48px;
	}

	.nowe-w-sklepie > p .btn {
		width: 100%;
	}

	.filtry {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 24px;
		padding: 4px 0;
	}

	.filtry .wynik {
		margin: 0;
	}

	.filtry .sortuj {
		justify-self: end;
	}

	.filtry .link {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

.siatka {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 56px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.siatka {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 16px;
	}
}

.lista .siatka + .navigation {
	margin-top: 56px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nav-links .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--linia);
	background: var(--bialy);
	font-variant-numeric: tabular-nums;
}

.nav-links a.page-numbers:hover {
	border-color: var(--zloto);
}

.nav-links .current {
	background: var(--zielen);
	border-color: var(--zielen);
	color: var(--krem);
}

@media (max-width: 900px) {
	.lista .siatka + .navigation {
		margin-top: 40px;
	}
}