/* /sklep/ bez parametrów (inc/sklep-przeglad.php). Ładowany tylko tam.
   Od 6.10.2026 układ strony kategorii: rząd rodzajów wyrobu, kolumna z odnośnikami
   w klasach kolumny filtrów i ta sama tabela co w kategoriach. Tu tylko to, czego
   kategoria nie ma: kafelki rodzajów, odnośniki w kolumnie i pasek „lista materiałowa”. */

/* ---------- rodzaje wyrobu ---------- */
.stalesia-rodzaje {
	margin: 0 0 var(--st-gap-lg);
}

.stalesia-rodzaje__tytul {
	margin: 0 0 var(--st-gap-xs);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.stalesia-rodzaje__lista {
	display: grid;
	/* Stała liczba kolumn (6/4/3/2) zamiast auto-fill: przy 7 kolumnach 11 kafelków zostawiało
	   3 puste pola. PHP dobiera szerokie kafelki tak, by liczba pól dzieliła się przez 12. 7.10.2026 */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stalesia-rodzaje__kafel {
	display: flex;
	align-items: center;
	gap: .75rem;
	height: 100%;
	min-height: 76px;
	padding: .5rem .75rem .5rem .5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}

.stalesia-rodzaje__kafel:hover,
.stalesia-rodzaje__kafel:focus-visible {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--tint);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-rodzaje__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.stalesia-rodzaje__obraz {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.stalesia-rodzaje__media .stalesia-cat__icon {
	width: 36px;
	height: 36px;
	color: var(--wp--preset--color--accent);
}

.stalesia-rodzaje__opis {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.stalesia-rodzaje__nazwa {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25;
}

.stalesia-rodzaje__liczba {
	font-size: .75rem;
	color: var(--wp--preset--color--muted);
}

.stalesia-rodzaje__pozycja--szeroka {
	grid-column: span 2;
}

@media (max-width: 1199px) {
	.stalesia-rodzaje__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.stalesia-rodzaje__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- opisy (7.10.2026) ---------- */
.stalesia-sklep-wstep {
	max-width: 72ch;
	margin: 0 0 var(--st-gap-md);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
}

.stalesia-sklep-opis {
	max-width: 80ch;
	margin-block-start: var(--st-gap-lg);
	line-height: 1.6;
}

.stalesia-sklep-opis h2 {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--lg);
}

.stalesia-sklep-opis h3 {
	margin: 1.25rem 0 .4rem;
	font-size: var(--wp--preset--font-size--md);
}

.stalesia-sklep-opis p {
	margin: 0 0 .75rem;
}

/* ---------- kolumna: same odnośniki ---------- */
.stalesia-sidebar--sklep .stalesia-fopt--link {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-sidebar--sklep .stalesia-fopt--link:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.stalesia-sidebar--sklep .stalesia-fopt--wiecej {
	color: var(--wp--preset--color--accent);
}

/* ---------- pasek pod tabelą ---------- */
.stalesia-sklep-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-gap-sm);
	margin-block-start: var(--st-gap-md);
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--tint);
	border-radius: var(--st-radius);
}

.stalesia-sklep-lista p {
	margin: 0;
}

@media (max-width: 600px) {
	.stalesia-rodzaje__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stalesia-rodzaje__kafel {
		min-height: 64px;
		gap: .5rem;
	}

	.stalesia-rodzaje__media {
		width: 44px;
		height: 44px;
	}
}