/* Kuck redesign: katalog, strony marek i indeks marek (rodzina catalogue). Port mockup/css/catalogue.css i brand.css (prefiks kr-, tokeny --kr-*, zasięg .kr-page z kr-base.css).
   Ładowany po kr-shell.css w bloku kr_head strony. Okruszki, paginacja i stan pusty (.kr-crumbs, .kr-pager, .kr-cempty) dostarcza kr-components.css; karta produktu też.
   Różnice względem mockupu (serwer i CSP): grupa filtrów to <details>, filtry stoją w jednym elemencie przenoszonym przez JS do szuflady, sortowanie ma natywny odpowiednik bez JS,
   chipy i presety ceny to linki, wskaźniki animacji (--kr-i, --kr-w) liczy CSS po pozycji elementu. Tylko tokeny, ostre krawędzie, ruch: transform/opacity/clip-path
   (wyjątki: wysokość grupy filtrów i opisu marki). Stany początkowe „ukrytych” elementów ruchu są wyłącznie w prefers-reduced-motion: no-preference. */

.kr-cat {
	/* nagłówek jest przyklejony i nie zajmuje miejsca w układzie (nakłada się na hero), więc strona bez hero rezerwuje je sama */
	padding-block: calc(var(--kr-header-h) + var(--kr-s4)) var(--kr-s9);
	--kr-cols: 2;
}

/* ---------- nagłówek strony ---------- */

.kr-cat__head {
	padding-block: var(--kr-s5) var(--kr-s6);
}

.kr-cat__title {
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.kr-cat__title:focus-visible {
	outline-offset: 6px;
}

/* ---------- układ ---------- */

.kr-cat__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s6) var(--kr-s7);
	align-items: start;
}

.kr-cat__aside {
	min-width: 0;
	align-self: stretch;
}

/* po przeniesieniu panelu do szuflady slot jest pusty i nie dokłada odstępu siatki */
.kr-cat__aside:not(:has(*)) {
	display: none;
}

/* panel filtrów: w treści (bez JS), w stałej kolumnie od 1100 px, w szufladzie poniżej (przenosi go kr-catalogue.js; do tego czasu slot jest ukryty, żeby nie było skoku układu) */
@media (max-width: 1099px) and (scripting: enabled) {
	.kr-cat__aside {
		display: none;
	}
}

@media (min-width: 1100px) {
	.kr-cat__layout {
		grid-template-columns: 264px minmax(0, 1fr);
	}

	.kr-cat__layout--solo {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-cat__aside > .kr-filters {
		position: sticky;
		top: calc(var(--kr-header-h) + var(--kr-s4));
		max-height: calc(100svh - var(--kr-header-h) - var(--kr-s6));
		overflow: auto;
		overscroll-behavior: contain;
		padding-right: 2px;
	}
}

/* kolumny siatki zależą od szerokości (od 1100 px część miejsca zajmuje panel filtrów) */
@media (min-width: 360px) {
	.kr-cat {
		--kr-cols: 2;
	}
}

@media (max-width: 359px) {
	.kr-cat {
		--kr-cols: 1;
	}
}

@media (min-width: 768px) {
	.kr-cat {
		--kr-cols: 3;
	}
}

@media (min-width: 1360px) {
	.kr-cat {
		--kr-cols: 4;
	}
}

/* ---------- pasek narzędzi ---------- */

.kr-cat__results {
	min-width: 0;
}

.kr-tbar {
	position: sticky;
	top: var(--kr-header-h);
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kr-s3) var(--kr-s4);
	padding-block: var(--kr-s3);
	background: var(--kr-paper);
}

.kr-tbar__count {
	margin-right: auto;
	font-size: 0.875rem;
	color: var(--kr-muted);
	font-variant-numeric: tabular-nums;
}

.kr-tbar__filters {
	display: none;
	gap: var(--kr-s2);
}

.kr-tbar__n[hidden],
.kr-fgroup__n[hidden] {
	display: none;
}

.kr-tbar__n,
.kr-fgroup__n {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--kr-ink);
	color: var(--kr-paper);
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.kr-tbar__filters:hover .kr-tbar__n {
	background: var(--kr-paper);
	color: var(--kr-ink);
}

@media (max-width: 1099px) {
	.kr-tbar__filters:not([hidden]) {
		display: inline-flex;
	}
}

@media (max-width: 575px) {
	.kr-tbar__count {
		order: 5;
		flex-basis: 100%;
		margin-right: 0;
	}

	.kr-tbar__filters:not([hidden]) {
		margin-right: auto;
	}
}

/* przełącznik widoku: glify rysowane w CSS (ikon siatka/lista nie ma w podzbiorze fontu) */
.kr-glyph {
	display: block;
	width: 18px;
	height: 18px;
}

.kr-glyph--grid {
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 7px 7px no-repeat,
		linear-gradient(currentColor, currentColor) 11px 0 / 7px 7px no-repeat,
		linear-gradient(currentColor, currentColor) 0 11px / 7px 7px no-repeat,
		linear-gradient(currentColor, currentColor) 11px 11px / 7px 7px no-repeat;
}

.kr-glyph--list {
	background:
		linear-gradient(currentColor, currentColor) 0 2px / 18px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 8px / 18px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 14px / 18px 2px no-repeat;
}

.kr-tbar__view[hidden] {
	display: none;
}

.kr-tbar__view span {
	padding: 0 var(--kr-s3);
}

@media (max-width: 575px) {
	.kr-tbar__view {
		display: none;
	}
}

/* ---------- menu sortowania ---------- */

.kr-smenu {
	position: relative;
}

/* bez JS: natywny select w formularzu GET (wygląd jak przycisk menu) */
.kr-smenu__native {
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s2);
	min-height: 46px;
	padding: 0 var(--kr-s3) 0 var(--kr-s4);
	border: 1px solid var(--kr-line-strong);
	background: var(--kr-paper);
	font-size: 0.8125rem;
}

.kr-smenu__native select {
	min-height: 44px;
	max-width: 21ch;
	padding: 0 var(--kr-s1);
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: var(--kr-ink);
}

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

.kr-smenu.is-enhanced .kr-smenu__form {
	display: none;
}

.kr-smenu__lab {
	color: var(--kr-muted);
}

.kr-smenu__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s2);
	min-height: 46px;
	padding: 0 var(--kr-s3) 0 var(--kr-s4);
	border: 1px solid var(--kr-line-strong);
	background: var(--kr-paper);
	font-size: 0.8125rem;
	text-align: left;
	transition: background-color var(--kr-t-hover) ease;
}

.kr-smenu__btn b {
	font-weight: 600;
	max-width: 21ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kr-smenu__btn .kr-ms {
	font-size: 20px;
	transition: rotate var(--kr-t-ui) var(--kr-ease-out);
}

.kr-smenu.is-open .kr-smenu__btn .kr-ms {
	rotate: 180deg;
}

@media (hover: hover) and (pointer: fine) {
	.kr-smenu__btn:hover {
		background: var(--kr-stone);
	}
}

.kr-smenu__panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 3;
	min-width: 100%;
	width: max-content;
	max-width: min(360px, calc(100vw - 2 * var(--kr-gutter)));
	opacity: 0;
	visibility: hidden;
	translate: 0 -6px;
	filter: drop-shadow(0 1px 1px rgb(0 0 0 / 8%)) drop-shadow(0 16px 20px rgb(0 0 0 / 16%));
	transition: opacity 140ms var(--kr-ease-out), translate 140ms var(--kr-ease-out), visibility 0s linear 140ms;
}

.kr-smenu.is-open .kr-smenu__panel {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: opacity 200ms var(--kr-ease-out), translate 280ms var(--kr-ease-out), visibility 0s;
}

.kr-smenu__inner {
	display: grid;
	background: var(--kr-paper);
	border: 1px solid var(--kr-line);
	border-top: 2px solid var(--kr-ink);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 140ms var(--kr-ease-out);
}

.kr-smenu.is-open .kr-smenu__inner {
	clip-path: inset(0 0 0 0);
	transition: clip-path 300ms var(--kr-ease-out);
}

.kr-smenu__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kr-s4);
	min-height: 44px;
	padding: 0 var(--kr-s4);
	border: 0;
	background: transparent;
	font-size: 0.875rem;
	text-align: left;
	opacity: 0;
	translate: 0 -4px;
	transition: opacity 200ms var(--kr-ease-out) calc(var(--kr-i, 0) * 25ms), translate 240ms var(--kr-ease-out) calc(var(--kr-i, 0) * 25ms), background-color var(--kr-t-hover) ease;
}

.kr-smenu__item:nth-child(1) { --kr-i: 0; }
.kr-smenu__item:nth-child(2) { --kr-i: 1; }
.kr-smenu__item:nth-child(3) { --kr-i: 2; }
.kr-smenu__item:nth-child(4) { --kr-i: 3; }
.kr-smenu__item:nth-child(5) { --kr-i: 4; }
.kr-smenu__item:nth-child(6) { --kr-i: 5; }
.kr-smenu__item:nth-child(7) { --kr-i: 6; }
.kr-smenu__item:nth-child(n + 8) { --kr-i: 7; }

.kr-smenu.is-open .kr-smenu__item {
	opacity: 1;
	translate: 0 0;
}

.kr-smenu__item .kr-ms {
	opacity: 0;
}

.kr-smenu__item[aria-checked="true"] {
	font-weight: 600;
}

.kr-smenu__item[aria-checked="true"] .kr-ms {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.kr-smenu__item:hover {
		background: var(--kr-stone);
	}
}

.kr-smenu__item:focus-visible {
	outline: 3px solid var(--kr-focus);
	outline-offset: -3px;
}

@media (max-width: 575px) {
	.kr-smenu__lab {
		display: none;
	}

	.kr-smenu__btn b {
		max-width: 16ch;
	}
}

/* ---------- chipy aktywnych filtrów (linki usuwające filtr) ---------- */

.kr-fchips-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kr-s2) var(--kr-s4);
	padding-top: var(--kr-s4);
}

.kr-fchips-row[hidden] {
	display: none;
}

.kr-fchips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kr-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kr-fchip {
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s2);
	min-height: 40px;
	padding: 0 var(--kr-s2) 0 var(--kr-s3);
	border: 1px solid var(--kr-ink);
	background: var(--kr-paper);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease;
}

.kr-fchip .kr-ms {
	font-size: 18px;
}

@media (hover: hover) and (pointer: fine) {
	.kr-fchip:hover {
		background: var(--kr-ink);
		color: var(--kr-paper);
	}
}

/* ---------- filtry: nagłówek, grupy ---------- */

.kr-fhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kr-s3);
	padding-bottom: var(--kr-s3);
	border-bottom: 1px solid var(--kr-ink);
}

.kr-fhead__t {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kr-filters__note {
	margin: var(--kr-s3) 0 0;
	font-size: 0.8125rem;
	color: var(--kr-muted);
}

.kr-filters__actions {
	padding-block: var(--kr-s4);
}

/* z JS filtry stosują się po zmianie (strona w szufladzie ma własny przycisk), więc przycisk „Zastosuj filtry” jest tylko dla wersji bez JS */
.kr-js .kr-filters__actions {
	display: none;
}

.kr-fgroup {
	border-bottom: 1px solid var(--kr-line);
	interpolate-size: allow-keywords;
}

.kr-fgroup__btn {
	display: flex;
	align-items: center;
	gap: var(--kr-s3);
	width: 100%;
	min-height: 52px;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.kr-fgroup__btn::-webkit-details-marker {
	display: none;
}

.kr-fgroup__btn::marker {
	content: "";
}

.kr-fgroup__lab {
	flex: 0 1 auto;
	margin-right: auto;
	padding-bottom: 2px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 320ms var(--kr-ease-out);
}

.kr-fgroup__btn .kr-ms {
	font-size: 22px;
	transition: rotate var(--kr-t-ui) var(--kr-ease-out);
}

.kr-fgroup[open] > .kr-fgroup__btn .kr-ms {
	rotate: 180deg;
}

@media (hover: hover) and (pointer: fine) {
	.kr-fgroup__btn:hover .kr-fgroup__lab {
		background-size: 100% 1px;
	}
}

/* animacja wysokości tam, gdzie przeglądarka obsługuje ::details-content (inaczej grupa otwiera się natychmiast) */
.kr-fgroup::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 240ms var(--kr-ease-out), content-visibility 240ms allow-discrete;
}

.kr-fgroup[open]::details-content {
	block-size: auto;
}

.kr-fgroup__panel--nested {
	padding-left: var(--kr-s3);
	border-left: 1px solid var(--kr-line);
}

.kr-fgroup__panel--nested .kr-fgroup:last-child {
	border-bottom: 0;
}

.kr-fset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.kr-fsearch {
	width: 100%;
	min-height: 44px;
	margin: 0 0 var(--kr-s2);
	padding: 0 12px;
	border: 1px solid var(--kr-muted);
	border-radius: 0;
	background: var(--kr-paper);
	font: inherit;
	font-size: 0.875rem;
}

.kr-fsearch[hidden] {
	display: none;
}

.kr-flist {
	display: grid;
	max-height: 292px;
	margin: 0;
	padding: 0 0 var(--kr-s3);
	overflow: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.kr-flist > li[hidden] {
	display: none;
}

.kr-fcheck {
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	min-height: 44px;
	padding-inline: 0;
	font-size: 0.875rem;
}

.kr-fcheck input {
	margin: 0;
}

.kr-fcheck__n {
	padding-left: var(--kr-s2);
	font-size: 0.75rem;
	color: var(--kr-muted);
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	.kr-fcheck {
		min-height: 38px;
	}
}

/* ---------- cena: pola, suwak, gotowe przedziały ---------- */

.kr-prange {
	display: grid;
	gap: var(--kr-s3);
	padding-bottom: var(--kr-s4);
}

.kr-prange__inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kr-s3);
}

.kr-prange__f {
	position: relative;
	display: grid;
}

.kr-prange__f span {
	position: absolute;
	left: 12px;
	top: 6px;
	font-size: 0.6875rem;
	color: var(--kr-muted);
}

.kr-prange__f input {
	width: 100%;
	min-height: 52px;
	padding: 18px 28px 4px 12px;
	border: 1px solid var(--kr-muted);
	border-radius: 0;
	background: var(--kr-paper);
	font: inherit;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.kr-prange__f input::placeholder {
	color: var(--kr-muted);
}

.kr-prange__f input::-webkit-outer-spin-button,
.kr-prange__f input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.kr-prange__f i {
	position: absolute;
	right: 10px;
	bottom: 6px;
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--kr-muted);
}

.kr-prange__slider {
	position: relative;
	height: 28px;
	margin-inline: 10px;
}

.kr-prange__slider[hidden] {
	display: none;
}

.kr-prange__track {
	position: absolute;
	left: 0;
	right: 0;
	top: 13px;
	height: 2px;
	background: var(--kr-line);
}

.kr-prange__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--kr-ink);
}

.kr-prange__slider input[type="range"] {
	position: absolute;
	inset: 0;
	width: calc(100% + 20px);
	margin: 0 -10px;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.kr-prange__slider input[type="range"]::-webkit-slider-runnable-track {
	background: none;
	-webkit-appearance: none;
}

.kr-prange__slider input[type="range"]::-moz-range-track {
	background: none;
}

.kr-prange__slider input[type="range"]::-webkit-slider-thumb {
	width: 20px;
	height: 28px;
	border: 0;
	border-radius: 0;
	background: var(--kr-ink);
	box-shadow: inset 0 0 0 7px var(--kr-paper), inset 0 0 0 9px var(--kr-ink);
	pointer-events: auto;
	cursor: grab;
	-webkit-appearance: none;
	appearance: none;
}

.kr-prange__slider input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 28px;
	border: 0;
	border-radius: 0;
	background: var(--kr-ink);
	pointer-events: auto;
	cursor: grab;
}

.kr-prange__slider input[type="range"]:focus-visible {
	outline: none;
}

.kr-prange__slider input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: 3px solid var(--kr-focus);
	outline-offset: 2px;
}

.kr-prange__slider input[type="range"]:focus-visible::-moz-range-thumb {
	outline: 3px solid var(--kr-focus);
	outline-offset: 2px;
}

.kr-prange__note {
	font-size: 0.75rem;
	color: var(--kr-muted);
	font-variant-numeric: tabular-nums;
}

.kr-prange__presets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kr-s2);
}

.kr-fpreset {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--kr-s3);
	border: 1px solid var(--kr-line);
	background: var(--kr-paper);
	font-size: 0.75rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--kr-t-hover) ease, background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease;
}

.kr-fpreset[aria-current="true"] {
	background: var(--kr-ink);
	border-color: var(--kr-ink);
	color: var(--kr-paper);
}

@media (hover: hover) and (pointer: fine) {
	.kr-fpreset:hover:not([aria-current="true"]) {
		border-color: var(--kr-ink);
	}
}

/* ---------- szuflada filtrów (poniżej 1100 px panel jest w niej przenoszony przez JS) ---------- */

.kr-filters-drawer .kr-drawer__body {
	padding-top: var(--kr-s2);
}

.kr-filters-drawer .kr-fhead {
	display: none;
}

.kr-filters-drawer .kr-filters__actions {
	display: none;
}

.kr-filters-drawer__foot {
	display: grid;
	gap: var(--kr-s3);
	justify-items: stretch;
}

.kr-filters-drawer__foot .kr-link-btn {
	justify-self: center;
}

/* ---------- siatka kart ---------- */

.kr-cgrid {
	display: grid;
	grid-template-columns: repeat(var(--kr-cols), minmax(0, 1fr));
	column-gap: var(--kr-s5);
	row-gap: 0;
	padding-top: var(--kr-s5);
}

.kr-cgrid[hidden] {
	display: none;
}

.kr-cgrid > .kr-pcard {
	display: grid;
	grid-row: span 4;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	row-gap: 0;
	margin-bottom: var(--kr-s7);
	--kr-i: 7;
}

.kr-cgrid > .kr-pcard:nth-child(1) { --kr-i: 0; }
.kr-cgrid > .kr-pcard:nth-child(2) { --kr-i: 1; }
.kr-cgrid > .kr-pcard:nth-child(3) { --kr-i: 2; }
.kr-cgrid > .kr-pcard:nth-child(4) { --kr-i: 3; }
.kr-cgrid > .kr-pcard:nth-child(5) { --kr-i: 4; }
.kr-cgrid > .kr-pcard:nth-child(6) { --kr-i: 5; }
.kr-cgrid > .kr-pcard:nth-child(7) { --kr-i: 6; }

.kr-cgrid > .kr-pcard .kr-pcard__name {
	min-height: 0;
}

@supports not (grid-template-rows: subgrid) {
	.kr-cgrid > .kr-pcard {
		display: flex;
		grid-row: auto;
	}

	.kr-cgrid > .kr-pcard .kr-pcard__name {
		min-height: calc(2 * 1.35em);
	}
}

/* widok listy: jedna karta w rzędzie, zdjęcie z lewej */
.kr-cgrid.is-list {
	grid-template-columns: minmax(0, 1fr);
}

.kr-cgrid.is-list > .kr-pcard {
	grid-row: auto;
	grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	column-gap: var(--kr-s5);
	align-items: start;
	margin-bottom: 0;
	padding-block: var(--kr-s4);
	border-top: 1px solid var(--kr-line);
}

.kr-cgrid.is-list > .kr-pcard:last-child {
	border-bottom: 1px solid var(--kr-line);
}

.kr-cgrid.is-list > .kr-pcard .kr-pcard__media {
	grid-row: 1 / span 3;
}

.kr-cgrid.is-list > .kr-pcard .kr-pcard__top,
.kr-cgrid.is-list > .kr-pcard .kr-pcard__name,
.kr-cgrid.is-list > .kr-pcard .kr-pcard__buy {
	grid-column: 2;
}

.kr-cgrid.is-list > .kr-pcard .kr-pcard__name {
	font-size: 1.0625rem;
}

.kr-cgrid.is-list > .kr-pcard .kr-pcard__buy {
	align-self: end;
	max-width: 440px;
}

@media (max-width: 575px) {
	.kr-cgrid.is-list > .kr-pcard {
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: var(--kr-s4);
	}
}

/* szkielet ładowania: w HTML jest zawsze (ukryty), pokazuje go JS podczas przejścia na nowy adres albo SSR w stanie „ładowanie” */
.kr-cgrid--skel {
	display: none;
}

.kr-cat__results.is-loading .kr-cgrid:not(.kr-cgrid--skel),
.kr-cat__results.is-loading .kr-pager,
.kr-cat__results.is-loading .kr-cstate {
	display: none;
}

.kr-cat__results.is-loading .kr-cgrid--skel {
	display: grid;
}

.kr-pcard-skel {
	display: grid;
	gap: var(--kr-s3);
	align-content: start;
	margin-bottom: var(--kr-s7);
}

.kr-pcard-skel i {
	display: block;
	background: var(--kr-stone-deep);
}

.kr-pcard-skel__img {
	aspect-ratio: 1;
}

.kr-pcard-skel__l {
	height: 14px;
}

.kr-pcard-skel__l.kr-w1 {
	width: 40%;
}

.kr-pcard-skel__l.kr-w2 {
	width: 85%;
}

.kr-pcard-skel__l.kr-w3 {
	width: 55%;
	height: 22px;
}

/* ---------- stany: brak wyników, błąd ---------- */

.kr-cstate[hidden] {
	display: none;
}

.kr-cstate .kr-cempty {
	padding-block: var(--kr-s8);
}

/* =====================================================================
   WARSTWA RUCHU I DOPRACOWANIA
   Ten sam język ruchu co na home: kurtyna zdjęć z kierunku, osiadanie obrazu (1,1 → 1), unoszenie tekstu ze staggerem 55 ms,
   rysowana linia, duch typograficzny, szkło paska. Czasy UI poniżej 300 ms, wejścia sekcyjne dłuższe (świadomie, jak półka).
   Stany początkowe „ukrytych” elementów są tylko w prefers-reduced-motion: no-preference, więc bez ruchu treść jest od razu widoczna.
   ===================================================================== */

/* ---------- nagłówek strony: duch typograficzny, maska słów ---------- */

.kr-cat__head {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.kr-cat__title {
	text-wrap: balance;
}

/* duch typograficzny jako treść generowana (czysto dekoracyjny: poza drzewem dostępności i poza testem kontrastu) */
.kr-cat__head::after {
	content: attr(data-ghost);
	position: absolute;
	z-index: -1;
	right: -1vw;
	bottom: -0.1em;
	font-size: clamp(6rem, 17vw, 16rem);
	font-weight: 200;
	letter-spacing: -0.05em;
	line-height: 0.8;
	color: rgb(17 17 17 / 4.5%);
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

@media (max-width: 767px) {
	.kr-cat__head::after {
		display: none;
	}
}

.kr-wm {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.kr-wm__w {
	display: inline-block;
}

/* indeks słowa w masce liczy CSS po pozycji (CSP zabrania style=""): do 8 słów rozchodzą się opóźnienia, dalsze dostają ostatnie */
.kr-wm { --kr-w: 7; }
.kr-wm:nth-child(1) { --kr-w: 0; }
.kr-wm:nth-child(2) { --kr-w: 1; }
.kr-wm:nth-child(3) { --kr-w: 2; }
.kr-wm:nth-child(4) { --kr-w: 3; }
.kr-wm:nth-child(5) { --kr-w: 4; }
.kr-wm:nth-child(6) { --kr-w: 5; }
.kr-wm:nth-child(7) { --kr-w: 6; }

@keyframes kr-cat-word {
	from {
		translate: 0 112%;
	}
}

@keyframes kr-cat-ghost {
	from {
		opacity: 0;
		translate: 5vw 0;
	}
}

@keyframes kr-cat-fade {
	from {
		opacity: 0;
	}
}

@keyframes kr-cat-line {
	from {
		scale: 0 1;
	}
}

@keyframes kr-cat-rise {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

/* rysowana linia pod paskiem narzędzi (zastępuje obramowanie) */
.kr-tbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--kr-line-strong);
	transform-origin: left;
}

.kr-tbar__sentinel {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

/* pasek narzędzi po przyklejeniu: szkło jak nagłówek po przewinięciu */
.kr-tbar {
	transition: background-color var(--kr-t-ui) ease, box-shadow var(--kr-t-ui) ease;
}

.kr-tbar.is-stuck {
	background: rgb(255 255 255 / 84%);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
	box-shadow: 0 16px 24px -22px rgb(0 0 0 / 40%);
}

@media (prefers-reduced-motion: no-preference) {
	.kr-cat.is-intro .kr-wm__w {
		animation: kr-cat-word 900ms var(--kr-ease-out) both;
		animation-delay: calc(80ms + var(--kr-w, 0) * 70ms);
	}

	.kr-cat.is-intro .kr-cat__head::after {
		animation: kr-cat-ghost 1400ms var(--kr-ease-out) 200ms both;
	}

	.kr-cat.is-intro .kr-crumbs {
		animation: kr-cat-fade 600ms var(--kr-ease-out) both;
	}

	.kr-cat.is-intro .kr-tbar::after {
		animation: kr-cat-line 1000ms var(--kr-ease-io) 300ms both;
	}

	.kr-cat.is-intro .kr-tbar > * {
		animation: kr-cat-rise 560ms var(--kr-ease-out) 380ms both;
	}
}

/* ---------- choreografia kart (jak półka na home): kurtyna, osiadanie, unoszenie ---------- */

.kr-cgrid {
	--kr-wipe: inset(0 100% 0 0);
}

@keyframes kr-cat-wipe {
	from {
		clip-path: var(--kr-wipe);
	}
}

@keyframes kr-cat-settle {
	from {
		scale: 1.1;
	}
}

.kr-cgrid.is-entering > .kr-pcard .kr-pcard__media {
	animation: kr-cat-wipe 720ms var(--kr-ease-out) both;
	animation-delay: calc(var(--kr-i, 0) * 55ms);
}

.kr-cgrid.is-entering > .kr-pcard .kr-pcard__img--main {
	animation: kr-cat-settle 900ms var(--kr-ease-out) both;
	animation-delay: calc(var(--kr-i, 0) * 55ms);
}

.kr-cgrid.is-entering > .kr-pcard :is(.kr-pcard__top, .kr-pcard__name, .kr-pcard__buy) {
	animation: kr-cat-rise 560ms var(--kr-ease-out) both;
	animation-delay: calc(140ms + var(--kr-i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
	.kr-cgrid.is-entering > .kr-pcard .kr-pcard__media,
	.kr-cgrid.is-entering > .kr-pcard .kr-pcard__img--main {
		animation: none;
	}

	.kr-cgrid.is-entering > .kr-pcard :is(.kr-pcard__top, .kr-pcard__name, .kr-pcard__buy) {
		animation: kr-cat-fade 200ms linear both;
	}
}

/* wiersze poniżej pierwszego ekranu unoszą się przy przewijaniu (CSS, bez JS; bez wsparcia: od razu widoczne) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.kr-cgrid:not(.is-entering):not(.is-list) > .kr-pcard:nth-child(n + 9) {
			animation: kr-cat-scroll-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 38%;
		}
	}
}

@keyframes kr-cat-scroll-rise {
	from {
		translate: 0 36px;
	}
}

/* przejście między dokumentami (filtr, sortowanie, strona): karty rozpoznane po adresie płynnie zmieniają miejsce, reszta strony bez migotania.
   Nazwy przejść nadaje kr-catalogue.js (pageswap/pagereveal, tylko wewnątrz listy); bez wsparcia przeglądarki zwykła nawigacja. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-group(*) {
	animation-duration: 440ms;
	animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: 1ms;
	}
}

/* ---------- szkielet: przesuwający się połysk ---------- */

.kr-pcard-skel i {
	background: linear-gradient(100deg, var(--kr-stone-deep) 30%, var(--kr-stone) 50%, var(--kr-stone-deep) 70%) 100% 0 / 250% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.kr-pcard-skel i {
		animation: kr-cat-shimmer 1.5s linear infinite;
	}
}

@keyframes kr-cat-shimmer {
	to {
		background-position: 0 0;
	}
}

/* ---------- licznik wyników, znaczniki, chipy ---------- */

.kr-tbar__count b {
	font-weight: 500;
	color: var(--kr-ink);
	font-variant-numeric: tabular-nums;
}

.kr-tbar__n.is-bump,
.kr-fgroup__n.is-bump {
	animation: kr-cat-bump 300ms var(--kr-ease-out);
}

@keyframes kr-cat-bump {
	40% {
		scale: 1.35;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.kr-fchips li {
		animation: kr-cat-chip-in 260ms var(--kr-ease-out) both;
	}

	.kr-cstate .kr-cempty {
		animation: kr-cat-rise 520ms var(--kr-ease-out) both;
	}
}

@keyframes kr-cat-chip-in {
	from {
		opacity: 0;
		scale: 0.92;
		translate: 0 5px;
	}
}

/* naciśnięcie: jak przyciski systemowe (.96) */
.kr-fchip,
.kr-fpreset,
.kr-smenu__btn,
.kr-pager__n,
.kr-pager__s {
	transition-property: background-color, color, border-color, scale;
	transition-duration: var(--kr-t-hover), var(--kr-t-hover), var(--kr-t-hover), var(--kr-t-press);
	transition-timing-function: ease, ease, ease, var(--kr-ease-out);
}

.kr-fchip:active,
.kr-fpreset:active,
.kr-smenu__btn:active,
.kr-pager__n:active,
.kr-pager__s:active {
	scale: 0.96;
}

/* ---------- przełącznik widoku: ruchomy wskaźnik zamiast przełączanego tła ---------- */

@supports selector(:has(*)) {
	.kr-tbar__view {
		position: relative;
	}

	.kr-tbar__view::before {
		content: "";
		position: absolute;
		inset: 0 50% 0 0;
		background: var(--kr-ink);
		transition: translate 300ms var(--kr-ease-io);
	}

	.kr-tbar__view:has(input[value="list"]:checked)::before {
		translate: 100% 0;
	}

	.kr-tbar__view label {
		z-index: 1;
	}

	.kr-tbar__view span {
		transition: color var(--kr-t-ui) ease;
	}

	.kr-tbar__view input:checked + span {
		background: transparent;
		color: var(--kr-paper);
	}
}

/* ---------- pola wyboru filtrów: kwadrat z rysowanym znacznikiem (ostre krawędzie, ink) ---------- */

.kr-fcheck input {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--kr-ink);
	border-radius: 0;
	background: var(--kr-paper);
	transition: background-color var(--kr-t-hover) ease;
	cursor: pointer;
}

.kr-fcheck input::after {
	content: "";
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--kr-paper);
	border-bottom: 2px solid var(--kr-paper);
	rotate: -45deg;
	translate: 0 -1px;
	scale: 0.25;
	opacity: 0;
	filter: blur(4px);
	transition: scale 200ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms cubic-bezier(0.2, 0, 0, 1), filter 200ms cubic-bezier(0.2, 0, 0, 1);
}

.kr-fcheck input:checked {
	background: var(--kr-ink);
}

.kr-fcheck input:checked::after {
	scale: 1;
	opacity: 1;
	filter: blur(0);
}

.kr-fcheck input:focus-visible {
	outline: 3px solid var(--kr-focus);
	outline-offset: 2px;
}

.kr-fcheck > span:not(.kr-fcheck__n) {
	transition: translate var(--kr-t-ui) var(--kr-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.kr-fcheck:hover input:not(:checked) {
		background: var(--kr-stone-deep);
	}

	.kr-fcheck:hover > span:not(.kr-fcheck__n) {
		translate: 3px 0;
	}
}

@media (forced-colors: active) {
	.kr-fcheck input:checked {
		background: Highlight;
	}

	.kr-fcheck input::after {
		border-color: HighlightText;
	}
}

/* wybrana wartość: etykieta mocniejsza bez zmiany szerokości (nie przesuwa układu) */
.kr-fcheck input:checked + span {
	text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
}

/* ---------- grupy filtrów: wiersze wchodzą po kolei, szuflada odsłania grupy ze staggerem ---------- */

.kr-flist > li:nth-child(1) { --kr-i: 0; }
.kr-flist > li:nth-child(2) { --kr-i: 1; }
.kr-flist > li:nth-child(3) { --kr-i: 2; }
.kr-flist > li:nth-child(4) { --kr-i: 3; }
.kr-flist > li:nth-child(5) { --kr-i: 4; }
.kr-flist > li:nth-child(6) { --kr-i: 5; }
.kr-flist > li:nth-child(7) { --kr-i: 6; }
.kr-flist > li:nth-child(8) { --kr-i: 7; }
.kr-flist > li:nth-child(9) { --kr-i: 8; }
.kr-flist > li:nth-child(n + 10) { --kr-i: 9; }

.kr-fgroups > .kr-fgroup:nth-child(1) { --kr-g: 0; }
.kr-fgroups > .kr-fgroup:nth-child(2) { --kr-g: 1; }
.kr-fgroups > .kr-fgroup:nth-child(3) { --kr-g: 2; }
.kr-fgroups > .kr-fgroup:nth-child(4) { --kr-g: 3; }
.kr-fgroups > .kr-fgroup:nth-child(5) { --kr-g: 4; }
.kr-fgroups > .kr-fgroup:nth-child(6) { --kr-g: 5; }
.kr-fgroups > .kr-fgroup:nth-child(7) { --kr-g: 6; }
.kr-fgroups > .kr-fgroup:nth-child(n + 8) { --kr-g: 7; }

@media (prefers-reduced-motion: no-preference) {
	.kr-fgroup .kr-flist li {
		opacity: 0;
		translate: 0 -5px;
		transition: opacity 160ms var(--kr-ease-out), translate 200ms var(--kr-ease-out);
	}

	.kr-fgroup[open] .kr-flist li {
		opacity: 1;
		translate: 0 0;
		transition: opacity 220ms var(--kr-ease-out) calc(60ms + var(--kr-i, 0) * 18ms), translate 260ms var(--kr-ease-out) calc(60ms + var(--kr-i, 0) * 18ms);
	}

	.kr-filters-drawer .kr-fgroup {
		opacity: 0;
		translate: 0 10px;
		transition: opacity 200ms var(--kr-ease-out), translate 240ms var(--kr-ease-out);
	}

	.kr-filters-drawer.is-open .kr-fgroup {
		opacity: 1;
		translate: 0 0;
		transition: opacity 280ms var(--kr-ease-out) calc(140ms + var(--kr-g, 0) * 40ms), translate 340ms var(--kr-ease-out) calc(140ms + var(--kr-g, 0) * 40ms);
	}
}

/* ---------- cena: dymki wartości, uchwyty reagują na dotyk ---------- */

.kr-prange__tip {
	position: absolute;
	z-index: 2;
	bottom: calc(100% + 2px);
	left: clamp(36px, var(--kr-p, 0%), calc(100% - 36px));
	translate: -50% 4px;
	padding: 3px 7px;
	background: var(--kr-ink);
	color: var(--kr-paper);
	font-size: 0.6875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms var(--kr-ease-out), translate 180ms var(--kr-ease-out);
}

.kr-prange__slider.is-drag .kr-prange__tip,
.kr-prange__slider:has(input:focus-visible) .kr-prange__tip {
	opacity: 1;
	translate: -50% 0;
}

.kr-prange__slider input[type="range"]::-webkit-slider-thumb {
	transition: scale 160ms var(--kr-ease-out);
}

.kr-prange__slider.is-drag input[type="range"]:active::-webkit-slider-thumb {
	scale: 1.12;
	cursor: grabbing;
}

/* =====================================================================
   STRONY MAREK I KOLEKCJI (port brand.css)
   Nagłówek marki, baner, pasek kolekcji, opis marki i indeks marek. Listing, filtry i paginacja to część wspólna powyżej.
   ===================================================================== */

/* ---------- nagłówek marki ---------- */

.kr-bhead__eyebrow {
	margin: 0 0 var(--kr-s3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kr-bhead__eyebrow[hidden] {
	display: none;
}

.kr-bhead__eyebrow a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 2px;
}

/* strona producenta (flat) zostaje przy rozmiarze katalogu: jak w mockupie */
.kr-cat[data-kr-mode="brand"] .kr-cat__title {
	font-size: clamp(2.5rem, 5.2vw, 4.75rem);
	letter-spacing: -0.035em;
	line-height: 1.02;
}

.kr-bhead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kr-s2) var(--kr-s5);
	margin: var(--kr-s4) 0 0;
	font-size: 0.9375rem;
}

.kr-bhead__count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.kr-bhead__about {
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s2);
	min-height: 44px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.kr-bhead__about > span:first-child {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: background-size 200ms var(--kr-ease-out);
}

.kr-bhead__about .kr-ms {
	transition: translate 200ms var(--kr-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.kr-bhead__about:hover > span:first-child,
	.kr-bhead__eyebrow a:hover {
		background-size: 100% 1px;
	}

	.kr-bhead__about:hover .kr-ms {
		translate: 0 3px;
	}
}

/* ---------- baner: obraz z tekstem w grafice (proporcje 1170 × 320 zostają, żeby napis nie został przycięty) ---------- */

.kr-bbanner {
	position: relative;
	margin: 0 0 var(--kr-s5);
	aspect-ratio: 1170 / 320;
	background: var(--kr-stone-deep);
	overflow: hidden;
}

.kr-bbanner[hidden] {
	display: none;
}

.kr-bbanner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kr-bbanner::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: var(--kr-image-outline);
	pointer-events: none;
}

/* ---------- kolekcje marki: pasek przewijany z krawędziami i strzałkami ---------- */

.kr-bcoll {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--kr-s4);
	margin-bottom: var(--kr-s6);
}

.kr-bcoll__t {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kr-bcoll__n {
	margin-left: 4px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--kr-muted);
	font-variant-numeric: tabular-nums;
}

.kr-bcoll__rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--kr-s2);
	min-width: 0;
}

/* strzałki odkrywa JS, gdy lista jest dłuższa niż okno */
.kr-bcoll.has-arrows .kr-bcoll__rail {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.kr-bcoll__arr[hidden] {
	display: none;
}

.kr-round-btn--sm {
	width: 44px;
	height: 44px;
}

.kr-bcoll__nav {
	--kr-fl: 0px;
	--kr-fr: 0px;
	min-width: 0;
}

.kr-bcoll__nav.has-prev {
	--kr-fl: 36px;
}

.kr-bcoll__nav.has-next {
	--kr-fr: 36px;
}

.kr-bcoll__list {
	display: flex;
	gap: var(--kr-s2);
	margin: 0;
	padding: 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--kr-fl), #000 calc(100% - var(--kr-fr)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--kr-fl), #000 calc(100% - var(--kr-fr)), transparent 100%);
}

.kr-bcoll__list::-webkit-scrollbar {
	display: none;
}

.kr-bcoll__list > li:nth-child(1) { --kr-i: 0; }
.kr-bcoll__list > li:nth-child(2) { --kr-i: 1; }
.kr-bcoll__list > li:nth-child(3) { --kr-i: 2; }
.kr-bcoll__list > li:nth-child(4) { --kr-i: 3; }
.kr-bcoll__list > li:nth-child(5) { --kr-i: 4; }
.kr-bcoll__list > li:nth-child(6) { --kr-i: 5; }
.kr-bcoll__list > li:nth-child(7) { --kr-i: 6; }
.kr-bcoll__list > li:nth-child(8) { --kr-i: 7; }
.kr-bcoll__list > li:nth-child(n + 9) { --kr-i: 8; }

.kr-bcoll__a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--kr-s4);
	border: 1px solid var(--kr-line-strong);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--kr-t-hover) ease, border-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-bcoll__a:active {
	scale: 0.96;
}

.kr-bcoll__a[aria-current="page"] {
	background: var(--kr-ink);
	border-color: var(--kr-ink);
	color: var(--kr-paper);
}

@media (hover: hover) and (pointer: fine) {
	.kr-bcoll__a:not([aria-current="page"]):hover {
		border-color: var(--kr-ink);
		background: var(--kr-stone);
	}
}

@media (max-width: 767px) {
	.kr-bcoll {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kr-s3);
	}

	.kr-bcoll.has-arrows .kr-bcoll__rail {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-bcoll__arr {
		display: none;
	}
}

/* ---------- strona producenta: płaska lista (bez filtrów, baneru, kolekcji i opisu) ---------- */

.kr-cat[data-kr-mode="flat"] .kr-pager {
	display: none;
}

/* ---------- opis marki ---------- */

.kr-bdesc {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s5);
	margin-top: var(--kr-s9);
	padding-top: var(--kr-s7);
}

.kr-bdesc::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--kr-line-strong);
	transform-origin: left;
}

@media (min-width: 992px) {
	.kr-bdesc {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: var(--kr-s8);
	}

	.kr-bdesc__side {
		position: sticky;
		top: calc(var(--kr-header-h) + var(--kr-s5));
		align-self: start;
	}
}

.kr-bdesc__eyebrow {
	margin: 0 0 var(--kr-s3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kr-bdesc__title {
	margin: 0;
	font-size: clamp(2rem, 3.2vw, 3rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
}

.kr-bdesc__title:focus-visible {
	outline-offset: 6px;
}

.kr-bdesc__body {
	max-width: 70ch;
	min-width: 0;
	font-size: 1rem;
	line-height: 1.75;
}

.kr-bdesc p {
	margin: 0 0 var(--kr-s4);
	text-wrap: pretty;
}

.kr-bdesc__lead > p:first-of-type {
	font-size: 1.1875rem;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: -0.005em;
}

.kr-bdesc__h {
	margin: var(--kr-s6) 0 var(--kr-s3);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: balance;
}

.kr-bdesc__lead > .kr-bdesc__h:first-child {
	margin-top: 0;
}

.kr-bdesc__sec:nth-child(1) { --kr-i: 0; }
.kr-bdesc__sec:nth-child(2) { --kr-i: 1; }
.kr-bdesc__sec:nth-child(3) { --kr-i: 2; }
.kr-bdesc__sec:nth-child(4) { --kr-i: 3; }
.kr-bdesc__sec:nth-child(5) { --kr-i: 4; }
.kr-bdesc__sec:nth-child(6) { --kr-i: 5; }
.kr-bdesc__sec:nth-child(7) { --kr-i: 6; }
.kr-bdesc__sec:nth-child(n + 8) { --kr-i: 7; }

/* zwijanie tylko z JS (bez niego cały opis jest widoczny): margines, nie padding (wiersz 0fr nie może mieć wysokości) */
.kr-bdesc__more {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 320ms var(--kr-ease-out);
}

.kr-js .kr-bdesc__more {
	grid-template-rows: 0fr;
}

.kr-js .kr-bdesc.is-open .kr-bdesc__more {
	grid-template-rows: 1fr;
}

.kr-bdesc__more-in {
	min-height: 0;
	overflow: hidden;
}

.kr-bdesc__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s2);
	min-height: 48px;
	margin-top: var(--kr-s3);
	padding: 0 var(--kr-s5);
	border: 1px solid var(--kr-ink);
	background: transparent;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-bdesc__toggle[hidden] {
	display: none;
}

.kr-bdesc__toggle:active {
	scale: 0.96;
}

.kr-bdesc__toggle .kr-ms {
	font-size: 20px;
	transition: rotate var(--kr-t-ui) var(--kr-ease-out);
}

.kr-bdesc__toggle[aria-expanded="true"] .kr-ms {
	rotate: 180deg;
}

@media (hover: hover) and (pointer: fine) {
	.kr-bdesc__toggle:hover {
		background: var(--kr-ink);
		color: var(--kr-paper);
	}
}

/* ---------- indeks marek ---------- */

.kr-bgroups {
	display: grid;
	gap: var(--kr-s8);
	margin-top: var(--kr-s3);
}

.kr-bgroup {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s4) var(--kr-s6);
	align-items: start;
}

@media (min-width: 992px) {
	.kr-bgroup {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.kr-bgroup__l {
		position: sticky;
		top: calc(var(--kr-header-h) + var(--kr-s5));
	}
}

.kr-bgroup__l {
	margin: 0;
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: 200;
	letter-spacing: -0.05em;
	line-height: 0.9;
}

.kr-bgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kr-s5) var(--kr-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.kr-bgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--kr-s6) var(--kr-s5);
	}
}

@media (min-width: 1100px) {
	.kr-bgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1360px) {
	.kr-bgrid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 359px) {
	.kr-bgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kr-btile {
	position: relative;
	display: grid;
	gap: var(--kr-s3);
	align-content: start;
	min-height: 44px;
	padding-bottom: var(--kr-s4);
	color: inherit;
	text-decoration: none;
}

/* linia pod kafelkiem rysuje się przy najechaniu i fokusie */
.kr-btile::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--kr-ink);
	transform-origin: left;
	scale: 0 1;
	transition: scale 240ms var(--kr-ease-out);
}

.kr-btile::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--kr-line);
}

.kr-btile__logo {
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 1;
	background: #fff;
	box-shadow: var(--kr-image-outline);
	filter: grayscale(1) contrast(1.05);
	opacity: 0.85;
	transition: filter var(--kr-t-ui) ease, opacity var(--kr-t-ui) ease;
}

.kr-btile__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.kr-btile__logo--text {
	padding: var(--kr-s3);
	font-size: 0.9375rem;
	font-weight: 300;
	letter-spacing: -0.01em;
	text-align: center;
}

.kr-btile__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kr-s3);
}

.kr-btile__name {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.kr-btile__n {
	margin-top: 2px;
	font-size: 0.8125rem;
	color: var(--kr-muted);
	font-variant-numeric: tabular-nums;
}

.kr-btile__go {
	flex: none;
	align-self: center;
	font-size: 22px;
	transition: translate 200ms var(--kr-ease-out);
}

.kr-btile.is-empty .kr-btile__logo {
	opacity: 0.45;
}

@media (hover: hover) and (pointer: fine) {
	.kr-btile:hover .kr-btile__logo {
		filter: none;
		opacity: 1;
	}

	.kr-btile:hover::after {
		scale: 1 1;
	}

	.kr-btile:hover .kr-btile__go {
		translate: 4px 0;
	}
}

.kr-btile:focus-visible .kr-btile__logo {
	filter: none;
	opacity: 1;
}

.kr-btile:focus-visible::after {
	scale: 1 1;
}

/* ---------- warstwa ruchu stron marek ---------- */

@keyframes kr-b-wipe {
	from {
		clip-path: inset(0 100% 0 0);
	}
}

@keyframes kr-b-settle {
	from {
		scale: 1.1;
	}
}

@keyframes kr-b-rise {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

@keyframes kr-b-scroll-rise {
	from {
		translate: 0 28px;
	}
}

@keyframes kr-b-line {
	from {
		scale: 0 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.kr-cat.is-intro .kr-bhead__eyebrow {
		animation: kr-b-rise 560ms var(--kr-ease-out) 120ms both;
	}

	.kr-cat.is-intro .kr-bhead__meta {
		animation: kr-b-rise 560ms var(--kr-ease-out) 360ms both;
	}

	.kr-cat.is-intro .kr-bbanner {
		animation: kr-b-wipe 700ms var(--kr-ease-out) 200ms both;
	}

	.kr-cat.is-intro .kr-bbanner img {
		animation: kr-b-settle 1000ms var(--kr-ease-out) 200ms both;
	}

	.kr-cat.is-intro .kr-bcoll__t,
	.kr-cat.is-intro .kr-bcoll__list > li,
	.kr-cat.is-intro .kr-bcoll__arr {
		animation: kr-b-rise 480ms var(--kr-ease-out) both;
		animation-delay: calc(520ms + var(--kr-i, 0) * 55ms);
	}

	/* opis: linia nad sekcją rysuje się i tekst unosi się, gdy sekcja wchodzi w pole widzenia */
	@supports (animation-timeline: view()) {
		.kr-bdesc::before {
			animation: kr-b-line linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

		.kr-bdesc__side,
		.kr-bdesc__lead {
			animation: kr-b-scroll-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 40%;
		}

		.kr-bgroup {
			animation: kr-b-scroll-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 30%;
		}
	}

	/* rozwijanie opisu: sekcje unoszą się po kolei */
	.kr-bdesc.is-open .kr-bdesc__sec {
		animation: kr-b-rise 420ms var(--kr-ease-out) both;
		animation-delay: calc(100ms + var(--kr-i, 0) * 55ms);
	}
}

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

/* ---------- tarcza przed starym CSS (Bootstrap 4: a:hover { text-decoration: underline }, specyficzność 0,1,1) ----------
   Odsyłacze-komponenty tej rodziny mają własny sposób podkreślenia (rysowana linia, obramowanie), więc zwykłe podkreślenie po najechaniu i fokusie nie może wracać. */
.kr-cat :is(.kr-fchip, .kr-fpreset, .kr-bcoll__a, .kr-btile, .kr-bhead__about, .kr-bhead__eyebrow a, .kr-pager a):is(:hover, :focus) {
	text-decoration: none;
}

/* odsyłacze-ikony na karcie (serce gościa i obraz karty to <a>) nie mają podkreślenia przeglądarki (w mockupie były przyciskami); odsyłacze-przyciski nie odzyskują go po najechaniu (Bootstrap 4) */
.kr-cgrid a.kr-pcard__link,
.kr-cgrid a.kr-tool {
	text-decoration: none;
}

.kr-cat a.kr-btn:is(:hover, :focus) {
	text-decoration: none;
}