/* ═══════════════════════════════════════════════════════════════════
   KATALOG — nagłówek, filtry, siatka, porównywarka
   ═══════════════════════════════════════════════════════════════════ */

.gt-catalog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gt-s5);
	flex-wrap: wrap;
	padding-bottom: var(--gt-s4);
	border-bottom: 1px solid var(--gt-line);
	margin-bottom: var(--gt-s5);
}

.gt-catalog__count {
	margin: 0;
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gt-tx2);
	text-align: right;
	white-space: nowrap;
}

.gt-catalog__count .gt-num {
	font-size: 1.6rem;
	color: var(--gt-tx);
	letter-spacing: -.02em;
	margin-right: .3rem;
}

.gt-catalog__cmp {
	display: block;
	color: var(--gt-acc);
	margin-top: .2rem;
}

/* ── Układ: filtry + wyniki ─────────────────────────────────────── */

.gt-catalog__body {
	display: grid;
	gap: var(--gt-s5);
	/* Kolumna filtrów pojawia się dopiero, gdy jest na nią miejsce —
	   patrz media query niżej. Domyślnie jedna kolumna, czyli mobile. */
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 60em) {
	.gt-catalog__body {
		grid-template-columns: 15.5rem minmax(0, 1fr);
	}
}

/* ── Filtry ─────────────────────────────────────────────────────── */

/*
 * Panel jest elementem <details>. Na desktopie ma być zawsze otwarty
 * i wyglądać jak kolumna, a nie jak rozwijana sekcja — dlatego tam
 * ukrywamy <summary> i wymuszamy widoczność zawartości.
 */
.gt-filters {
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-surf);
}

.gt-filters__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gt-s3);
	min-height: 44px;
	padding: var(--gt-s3) var(--gt-s4);
	cursor: pointer;
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	list-style: none;
}

.gt-filters__toggle::-webkit-details-marker { display: none; }
.gt-filters__toggle::marker { content: ''; }

/* Strzałka rysowana z bordera — zero dodatkowych żądań, zmienia kolor
   razem z motywem. */
.gt-filters__toggle::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--gt-fast) var(--gt-ease);
	flex: none;
}

.gt-filters[open] > .gt-filters__toggle::after {
	transform: rotate(225deg) translateY(-2px);
}

.gt-filters__panel {
	padding: 0 var(--gt-s4) var(--gt-s4);
	display: flex;
	flex-direction: column;
	gap: var(--gt-s4);
}

.gt-filters__bar {
	display: none;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gt-s3);
	padding-bottom: var(--gt-s2);
	border-bottom: 1px solid var(--gt-line);
}

.gt-filters__label { margin: 0 0 var(--gt-s2); }

.gt-filters__empty {
	margin: 0;
	font-size: .875rem;
	color: var(--gt-tx3);
}

@media (min-width: 60em) {
	.gt-filters {
		position: sticky;
		/* Belka jest przyklejona, więc filtry muszą zaczynać się pod nią. */
		top: calc(var(--gt-header-h) + var(--gt-s4));
		max-height: calc(100vh - var(--gt-header-h) - var(--gt-s6));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.gt-filters__toggle { display: none; }
	.gt-filters__bar { display: flex; }

	.gt-filters__panel { padding-top: var(--gt-s4); }

	/* Na desktopie panel jest widoczny niezależnie od stanu <details> —
	   inaczej zamknięcie na mobile zostawałoby po zmianie szerokości. */
	.gt-filters:not([open]) > .gt-filters__panel { display: flex; }
}

/* ── Pasek narzędzi ─────────────────────────────────────────────── */

.gt-catalog__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--gt-s4);
}

.gt-sort {
	display: flex;
	align-items: center;
	gap: var(--gt-s2);
}

.gt-sort label { white-space: nowrap; }

.gt-sort select { width: auto; min-width: 11rem; }

/* ── Zachęta do kalkulatora ─────────────────────────────────────── */

.gt-calc-cta {
	padding: var(--gt-s4);
	border: 1px solid var(--gt-line);
	border-left: 2px solid var(--gt-acc);
	border-radius: 0 var(--gt-r) var(--gt-r) 0;
	background: var(--gt-bg2);
}

.gt-calc-cta__text {
	font-size: .875rem;
	color: var(--gt-tx2);
	margin: var(--gt-s2) 0 var(--gt-s3);
}

/* ── Pasek porównywarki ─────────────────────────────────────────── */

.gt-cmpbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--gt-bg2);
	border-top: 1px solid var(--gt-line);
	box-shadow: var(--gt-shadow);
}

.gt-cmpbar[hidden] { display: none; }

.gt-cmpbar__inner {
	display: flex;
	align-items: center;
	gap: var(--gt-s3);
	flex-wrap: wrap;
	max-width: var(--gt-max);
	margin-inline: auto;
	padding: var(--gt-s3) var(--gt-gut);
}

.gt-cmpbar__label { flex: none; }

.gt-cmpbar__chips {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}

.gt-cmpbar__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .5rem;
	background: var(--gt-surf);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	font-size: .8125rem;
	color: var(--gt-tx2);
	cursor: pointer;
	max-width: 16rem;
}

.gt-cmpbar__chip:hover {
	border-color: var(--gt-acc);
	color: var(--gt-tx);
}

.gt-cmpbar__chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gt-cmpbar__chip::after {
	content: '✕';
	font-size: .7rem;
	opacity: .6;
	flex: none;
}

@media (max-width: 39.99em) {
	.gt-cmpbar__label { display: none; }
	.gt-cmpbar__inner { gap: var(--gt-s2); }
	.gt-cmpbar__chip { max-width: 9rem; }
}

/* Pasek zasłaniałby ostatni rząd kafelków — dokładamy miejsce na dole,
   ale tylko wtedy, gdy pasek jest naprawdę widoczny. */
body.gt-has-compare .gt-page { padding-bottom: calc(var(--gt-s8) + 3.5rem); }

/* ── Stan „porównuję" na kafelku ────────────────────────────────── */

.gt-tile__cmp[aria-pressed="true"] {
	background: var(--gt-acc);
	border-color: var(--gt-acc);
	color: var(--gt-acc-ink);
}