/* Kuck redesign — listy: ulubione (/wishlist) i porównywarka (/porownaj). Ładowany po kr-tokens, kr-base, kr-components i kr-shell (blok kr_head strony).
   Źródło: redesign/mockup/css/lists.css (część ulubionych i porównania; wyszukiwanie należy do rodziny catalogue) oraz nagłówek strony i siatka kart z catalogue.css
   (.cat__head, .cat__title, .wm, .cgrid): te fragmenty są tu tymczasowo, z tymi samymi nazwami kr-cat*, kr-wm*, kr-cgrid, i są kandydatami do wspólnego komponentu.
   Okruszki, karta produktu, przyciski, cena, dostępność i ikony pochodzą z SHELL (nie są tu powtarzane).
   Zmiany względem mockupu (każda z powodu CSP albo serwera): bez style="--i/--n/--w" (indeksy liczy :nth-child, liczbę kolumn atrybut data-count), bez view-transition-name
   (zmianę DOM po usunięciu robi kuck_shop.bundle.js), tytuł dzielony na słowa po stronie serwera, wejście strony pod klasą .is-intro nadaną w HTML i zdjętą przez kr-lists.js.
   Tylko tokeny --kr-*, ostre krawędzie; ruch: transform/opacity/clip-path/scale/translate (wyjątek: box-shadow cienia przewiniętej kolumny).
   Stany początkowe „ukrytych” elementów ruchu są wyłącznie w prefers-reduced-motion: no-preference, więc bez ruchu treść jest od razu widoczna. */

/* =====================================================================
   STRONA: układ, nagłówek (z catalogue.css), duch typograficzny, maska słów
   ===================================================================== */

.kr-cat {
	/* górny odstęp rezerwuje klasa kr-header-offset z SHELL (nagłówek jest przyklejony i nie zajmuje miejsca) */
	padding-bottom: var(--kr-s9);
	--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;
	}
}

.kr-cat__head {
	position: relative;
	isolation: isolate;
	overflow: clip;
	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;
	text-wrap: balance;
}

.kr-lst .kr-cat__title {
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	letter-spacing: -0.035em;
	line-height: 1.04;
}

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

/* 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 do przesunięć w czasie (dawniej style="--w:n"): liczy CSS po pozycji */
.kr-cat__title > .kr-wm:nth-child(2) { --kr-w: 1; }
.kr-cat__title > .kr-wm:nth-child(3) { --kr-w: 2; }
.kr-cat__title > .kr-wm:nth-child(4) { --kr-w: 3; }
.kr-cat__title > .kr-wm:nth-child(5) { --kr-w: 4; }
.kr-cat__title > .kr-wm:nth-child(n + 6) { --kr-w: 5; }

/* =====================================================================
   WSPÓLNE: meta, status, stany
   ===================================================================== */

.kr-lmeta {
	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-lmeta[hidden] {
	display: none;
}

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

.kr-lmeta__link {
	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-lmeta__link[hidden] {
	display: none;
}

.kr-lmeta__link > span:first-child {
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 2px;
}

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

@media (hover: hover) and (pointer: fine) {
	.kr-lmeta__link:hover .kr-ms {
		translate: -3px 0;
	}
}

/* informacja zwrotna po działaniu (kuck_shop.bundle.js pisze tu „Usuwamy z listy życzeń…”, role=status; przy błędzie przełącza na role=alert) */
.kr-lstatus {
	min-height: 1.25rem;
	margin: var(--kr-s2) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--kr-muted);
}

.kr-lstatus[role="alert"] {
	color: var(--kr-danger);
	font-weight: 500;
}

/* stan pusty / błąd / gość: jeden układ dla obu stron */
.kr-lempty {
	display: grid;
	gap: var(--kr-s4);
	justify-items: start;
	max-width: 62ch;
	padding-block: var(--kr-s8) var(--kr-s9);
}

.kr-lempty__ico {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--kr-line-strong);
}

.kr-lempty__t {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

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

.kr-lempty__p {
	color: var(--kr-muted);
	text-wrap: pretty;
}

.kr-lempty__act {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kr-s3);
	margin-top: var(--kr-s2);
}

.kr-lempty__act .kr-btn {
	max-width: 100%;
	padding-block: var(--kr-s2);
	white-space: normal;
	text-align: center;
	line-height: 1.3;
}

.kr-lempty--err .kr-lempty__t {
	color: var(--kr-danger);
}

/* komunikaty składane przez bundle (ładowanie parametrów gościa, błąd pobrania) po poprawce BUNDLE-LISTS-1: sekcja z samym tekstem, bez klasy rodziny */
[data-kuck-comparison-state]:not(.kr-lempty) {
	display: flex;
	align-items: flex-start;
	gap: var(--kr-s3);
	margin: var(--kr-s4) 0 0;
	padding: var(--kr-s3) var(--kr-s4);
	border-left: 2px solid var(--kr-ink);
	background: var(--kr-stone);
	font-size: 0.875rem;
	line-height: 1.5;
}

[data-kuck-comparison-state][role="alert"]:not(.kr-lempty) {
	border-left-color: var(--kr-danger);
}

[data-kuck-comparison-state][aria-busy="true"]:not(.kr-lempty)::before {
	content: "progress_activity";
	flex: none;
	font-family: "Material Symbols Sharp";
	font-size: 20px;
	line-height: 1;
	font-feature-settings: "liga";
	animation: kr-l-spin 900ms linear infinite;
}

[data-kuck-comparison-state]:not(.kr-lempty) a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@keyframes kr-l-spin {
	to {
		rotate: 360deg;
	}
}

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

/* =====================================================================
   SIATKA ULUBIONYCH (karty SHELL w siatce z catalogue.css: wiersze kart dzieli subgrid)
   ===================================================================== */

.kr-wl {
	margin-top: var(--kr-s2);
}

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

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

/* element listy <li data-kuck-wishlist-card> niesie zaczep bundla, a kartę rysuje SHELL: obie warstwy są podsiatką wierszy siatki */
.kr-cgrid > .kr-cgrid__item {
	display: grid;
	grid-row: span 4;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	row-gap: 0;
	min-width: 0;
	margin-bottom: var(--kr-s7);
}

.kr-cgrid__item > .kr-pcard {
	display: grid;
	grid-row: 1 / span 4;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	row-gap: 0;
}

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

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

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

/* indeks karty do przesunięć w czasie (dawniej style="--i:n"): pierwsze osiem dostaje 0…7, reszta 7 */
.kr-cgrid > .kr-cgrid__item:nth-child(2) { --kr-i: 1; }
.kr-cgrid > .kr-cgrid__item:nth-child(3) { --kr-i: 2; }
.kr-cgrid > .kr-cgrid__item:nth-child(4) { --kr-i: 3; }
.kr-cgrid > .kr-cgrid__item:nth-child(5) { --kr-i: 4; }
.kr-cgrid > .kr-cgrid__item:nth-child(6) { --kr-i: 5; }
.kr-cgrid > .kr-cgrid__item:nth-child(7) { --kr-i: 6; }
.kr-cgrid > .kr-cgrid__item:nth-child(n + 8) { --kr-i: 7; }

/* usuwanie w toku (kr-lists.js zaznacza kartę po kliknięciu serca, dopóki bundle czeka na odpowiedź) */
.kr-cgrid__item.is-busy > .kr-pcard {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 160ms var(--kr-ease-out);
}

/* =====================================================================
   PORÓWNYWARKA
   ===================================================================== */

.kr-cmp {
	position: relative;
	margin-top: var(--kr-s5);
}

/* jednostka podmieniana przez bundle po usunięciu produktu: zmienne układu i liczba kolumn są na niej, nie na sekcji */
.kr-cmp__wrap {
	--kr-first: 11.25rem;
	--kr-min: 14rem;
	--kr-n: 3;
	position: relative;
}

.kr-cmp__wrap[data-count="1"] { --kr-n: 1; }
.kr-cmp__wrap[data-count="2"] { --kr-n: 2; }
.kr-cmp__wrap[data-count="3"] { --kr-n: 3; }
.kr-cmp__wrap[data-count="4"] { --kr-n: 4; }

.kr-cmp__line {
	height: 1px;
	background: var(--kr-line-strong);
	transform-origin: left;
}

.kr-cmp__hint {
	display: flex;
	align-items: flex-start;
	gap: var(--kr-s3);
	margin: 0 0 var(--kr-s5);
	padding: var(--kr-s3) var(--kr-s4);
	border-left: 2px solid var(--kr-ink);
	background: var(--kr-stone);
	font-size: 0.875rem;
	line-height: 1.5;
}

.kr-cmp__hint .kr-ms {
	margin-top: 1px;
	font-size: 20px;
}

.kr-cmp__tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--kr-s2);
	min-height: 0;
	margin-bottom: var(--kr-s3);
}

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

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

/* region przewijany w poziomie: fokus z klawiatury (strzałki przewijają), zanik tylko po prawej (lewą kolumnę zasłania kolumna z nazwami parametrów) */
.kr-cmp__region {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.kr-cmp__region:focus-visible {
	outline-offset: -3px;
}

.kr-cmp__region.has-next {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
}

.kr-cmp__table {
	width: 100%;
	min-width: calc(var(--kr-first) + var(--kr-n, 3) * var(--kr-min));
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	text-align: left;
}

.kr-cmp__table th,
.kr-cmp__table td {
	text-align: left;
	vertical-align: top;
}

.kr-cmp__corner {
	position: sticky;
	left: 0;
	z-index: 2;
	width: var(--kr-first);
	padding: var(--kr-s5) var(--kr-s4) var(--kr-s4) 0;
	background: var(--kr-paper);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kr-muted);
}

/* produkt w nagłówku kolumny */
.kr-cmp__prod {
	padding: var(--kr-s5) var(--kr-s4) var(--kr-s4);
	font-weight: 400;
}

/* indeks kolumny do przesunięć w czasie (dawniej style="--i:n" na th): pierwsza kolumna produktu to drugie dziecko wiersza, po kolumnie „Parametr” */
.kr-cmp__table thead th:nth-child(3) { --kr-i: 1; }
.kr-cmp__table thead th:nth-child(4) { --kr-i: 2; }
.kr-cmp__table thead th:nth-child(5) { --kr-i: 3; }
.kr-cmp__cards > .kr-cmp__card:nth-child(2) { --kr-i: 1; }
.kr-cmp__cards > .kr-cmp__card:nth-child(3) { --kr-i: 2; }
.kr-cmp__cards > .kr-cmp__card:nth-child(4) { --kr-i: 3; }

.kr-cmp__card {
	display: grid;
	gap: var(--kr-s2);
	align-content: start;
	max-width: 17rem;
}

.kr-cmp__media {
	position: relative;
	width: min(100%, 15rem);
	aspect-ratio: 1;
	overflow: hidden;
	background: radial-gradient(circle at 50% 42%, #fafaf9 0%, var(--kr-stone-deep) 100%);
}

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

.kr-cmp__media a {
	position: absolute;
	inset: 0;
	display: block;
}

.kr-cmp__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: scale 700ms var(--kr-ease-out);
}

.kr-cmp__brand {
	margin-top: var(--kr-s2);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kr-cmp__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-decoration: none;
	text-wrap: balance;
}

.kr-cmp__price {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.kr-cmp__price.is-gap {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--kr-muted);
}

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

.kr-cmp__add {
	width: 100%;
	min-height: 44px;
}

.kr-cmp__add[data-state="busy"] {
	pointer-events: none;
}

.kr-cmp__add[data-state="done"] {
	background: var(--kr-ok) !important;
	border-color: var(--kr-ok) !important;
	color: #fff !important;
}

.kr-cmp__rm {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	justify-content: center;
	margin-left: calc(var(--kr-s2) * -1);
	gap: var(--kr-s2);
	min-height: 44px;
	padding: 0 var(--kr-s2);
	border: 0;
	background: none;
	font-size: 0.8125rem;
	color: var(--kr-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

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

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

.kr-cmp__rm:disabled,
.kr-cmp__rm[aria-disabled="true"],
.kr-cmp__card.is-busy .kr-cmp__rm {
	opacity: 0.5;
	cursor: progress;
}

.kr-cmp__card.is-busy {
	opacity: 0.55;
	transition: opacity 160ms var(--kr-ease-out);
}

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

	.kr-cmp__media:hover img {
		scale: 1.05;
	}

	.kr-cmp__name:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* wiersze parametrów: etykieta w pierwszej kolumnie (nagłówek wiersza), wartości w kolumnach produktów */
.kr-cmp__table tbody th,
.kr-cmp__table tbody td {
	padding: var(--kr-s3) var(--kr-s4);
	border-bottom: 1px solid var(--kr-line);
	font-size: 0.9375rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
	transition: background-color var(--kr-t-hover) ease;
}

.kr-cmp__table tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	padding-left: 0;
	background: var(--kr-paper);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
}

.kr-cmp__table tbody td {
	text-wrap: pretty;
}

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

/* cień przewiniętej kolumny z nazwami (kolumna zostaje, treść przesuwa się pod nią) */
.kr-cmp__region.is-scrolled .kr-cmp__corner,
.kr-cmp__region.is-scrolled .kr-cmp__table tbody th {
	box-shadow: 10px 0 12px -10px rgb(0 0 0 / 22%);
}

.kr-cmp__corner,
.kr-cmp__table tbody th {
	transition: box-shadow var(--kr-t-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
	.kr-cmp__table tbody tr:hover > * {
		background: var(--kr-stone);
	}
}

/* wariant bez tabeli parametrów: same karty produktów (jak w szablonie Frappe, gdy brak wspólnych parametrów) */
.kr-cmp__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--kr-s6) var(--kr-s5);
}

/* pasek nazw przyklejony po przewinięciu (tylko dekoracja: te same nazwy są w nagłówkach tabeli) */
.kr-cmp__stick {
	position: sticky;
	top: var(--kr-header-h);
	z-index: 5;
	height: 0;
	pointer-events: none;
}

.kr-cmp__stick[hidden],
.kr-cmp__stick[data-fit="false"] {
	display: none;
}

.kr-cmp__stick-in {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: var(--kr-first) repeat(var(--kr-n, 3), minmax(0, 1fr));
	align-items: center;
	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%);
	opacity: 0;
	translate: 0 -8px;
	visibility: hidden;
	transition: opacity 200ms var(--kr-ease-out), translate 200ms var(--kr-ease-out), visibility 0s linear 200ms;
}

.kr-cmp__stick.is-on .kr-cmp__stick-in {
	opacity: 1;
	translate: 0 0;
	visibility: visible;
	transition-delay: 0s;
}

.kr-cmp__stick-i {
	display: flex;
	align-items: center;
	gap: var(--kr-s3);
	min-width: 0;
	padding: var(--kr-s2) var(--kr-s4);
}

.kr-cmp__stick-i img {
	flex: none;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: var(--kr-stone);
	mix-blend-mode: multiply;
}

.kr-cmp__stick-i span {
	min-width: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

@media (max-width: 767px) {
	.kr-cmp__wrap {
		--kr-first: 8rem;
		--kr-min: 10.5rem;
	}

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

	.kr-cmp__prod {
		padding: var(--kr-s4) var(--kr-s3) var(--kr-s3);
	}

	.kr-cmp__table tbody th,
	.kr-cmp__table tbody td {
		padding: var(--kr-s3) var(--kr-s3);
		font-size: 0.875rem;
	}

	.kr-cmp__table tbody th {
		padding-left: 0;
		padding-right: var(--kr-s2);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		overflow-wrap: break-word;
	}

	.kr-cmp__name {
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.kr-cmp__wrap {
		--kr-first: 9rem;
		--kr-min: 13rem;
	}
}

/* =====================================================================
   WARSTWA RUCHU (ten sam język co home, katalog i marki: kurtyna obrazu, osiadanie 1,1 → 1, unoszenie ze staggerem 55 ms, rysowana linia, duch typograficzny)
   Wejście strony działa pod .is-intro (klasa w HTML, kr-lists.js zdejmuje ją po 2,2 s, więc podmienione przez bundle węzły nie animują się drugi raz).
   ===================================================================== */

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: no-preference) {
	/* nagłówek strony */
	.kr-cat.is-intro .kr-wm__w {
		animation: kr-l-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-l-ghost 1400ms var(--kr-ease-out) 200ms both;
	}

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

	.kr-lst.is-intro .kr-lmeta {
		animation: kr-l-rise 560ms var(--kr-ease-out) 360ms both;
	}

	.kr-lempty {
		animation: kr-l-rise 520ms var(--kr-ease-out) both;
	}

	/* porównywarka: wejście */
	.kr-lst.is-intro .kr-cmp__line {
		animation: kr-l-line 1000ms var(--kr-ease-io) 420ms both;
	}

	.kr-lst.is-intro .kr-cmp__corner {
		animation: kr-l-rise 560ms var(--kr-ease-out) 520ms both;
	}

	.kr-lst.is-intro .kr-cmp__media {
		animation: kr-l-wipe 720ms var(--kr-ease-out) both;
		animation-delay: calc(480ms + var(--kr-i, 0) * 55ms);
	}

	.kr-lst.is-intro .kr-cmp__media img {
		animation: kr-l-settle 900ms var(--kr-ease-out) both;
		animation-delay: calc(480ms + var(--kr-i, 0) * 55ms);
	}

	.kr-lst.is-intro .kr-cmp__card > :not(.kr-cmp__media) {
		animation: kr-l-rise 560ms var(--kr-ease-out) both;
		animation-delay: calc(620ms + var(--kr-i, 0) * 55ms);
	}

	.kr-lst.is-intro .kr-cmp__hint,
	.kr-lst.is-intro .kr-cmp__tools {
		animation: kr-l-rise 560ms var(--kr-ease-out) 440ms both;
	}

	/* ulubione: wejście kart (kurtyna, osiadanie, unoszenie) */
	.kr-lst.is-intro .kr-cgrid__item .kr-pcard__media {
		animation: kr-l-wipe 720ms var(--kr-ease-out) both;
		animation-delay: calc(var(--kr-i, 0) * 55ms);
	}

	.kr-lst.is-intro .kr-cgrid__item .kr-pcard__img--main {
		animation: kr-l-settle 900ms var(--kr-ease-out) both;
		animation-delay: calc(var(--kr-i, 0) * 55ms);
	}

	.kr-lst.is-intro .kr-cgrid__item :is(.kr-pcard__top, .kr-pcard__name, .kr-pcard__buy) {
		animation: kr-l-rise 560ms var(--kr-ease-out) both;
		animation-delay: calc(140ms + var(--kr-i, 0) * 55ms);
	}

	/* komunikat statusu: krótki zanik przy każdej zmianie tekstu (kr-lists.js dokłada .is-on) */
	.kr-lstatus.is-on {
		animation: kr-l-fade 200ms linear both;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* wiersze poniżej pierwszego ekranu unoszą się przy przewijaniu (tylko translate; bez wsparcia: od razu widoczne) */
		.kr-cmp__table tbody tr:nth-child(n + 5) {
			animation: kr-l-scroll-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 38%;
		}

		/* karty ulubionych poza pierwszymi dwoma rzędami, po zdjęciu .is-intro */
		.kr-lst:not(.is-intro) .kr-cgrid > .kr-cgrid__item:nth-child(n + 9) {
			animation: kr-l-scroll-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 38%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	/* stan końcowy bez ruchu: przejścia kolorów i przezroczystości zostają */
	.kr-lst.is-intro .kr-cgrid__item :is(.kr-pcard__top, .kr-pcard__name, .kr-pcard__buy) {
		animation: kr-l-fade 200ms linear both;
	}

	.kr-cmp__stick-in {
		transition: opacity 160ms linear, visibility 0s linear 160ms;
		translate: 0 0;
	}

	.kr-cmp__stick.is-on .kr-cmp__stick-in {
		transition-delay: 0s;
	}

	[data-kuck-comparison-state][aria-busy="true"]:not(.kr-lempty)::before {
		animation: none;
	}
}