/* Kuck redesign: wyniki wyszukiwania (rodzina catalogue). Port części wyszukiwania z mockup/css/lists.css (prefiks kr-, tokeny --kr-*).
   Listing, filtry, sortowanie i paginacja wyników to katalog (kr-catalogue.css, ładowany razem z tym plikiem). Nagłówek frazy, pole frazy, stany (brak frazy,
   brak wyników, błąd), skrót do strony marki i wyróżnienie dopasowania na karcie. Klasy kr-lmeta* i kr-lempty* są wspólne z rodziną lists (porównywarka, ulubione):
   jeśli kiedyś trafią do kr-components.css, ten plik traci te dwa bloki. Stany początkowe „ukrytych” elementów ruchu są wyłącznie w prefers-reduced-motion: no-preference. */

/* =====================================================================
   WSPÓLNE: meta, stan pusty / błąd
   ===================================================================== */

.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__sub {
	font-size: 0.8125rem;
	color: var(--kr-muted);
}

/* stan pusty / błąd: układ jak na listach */
.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__p b {
	color: var(--kr-ink);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.kr-lempty__note {
	font-size: 0.875rem;
	color: var(--kr-muted);
}

.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);
}

/* =====================================================================
   WYNIKI WYSZUKIWANIA
   ===================================================================== */

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

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

.kr-cat[data-kr-mode="search"] .kr-cat__title {
	font-size: clamp(2.5rem, 5.2vw, 4.75rem);
	letter-spacing: -0.035em;
	line-height: 1.02;
	overflow-wrap: anywhere;
}

/* długa fraza: mniejszy krój, żeby nagłówek nie zajął ekranu */
.kr-shead__q.is-long {
	display: block;
	font-size: clamp(1.75rem, 3.2vw, 3rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.kr-shead__q .kr-wm {
	max-width: 100%;
}

/* pole frazy: ten sam język co panel wyszukiwania w nagłówku (jasny krój, linia rysowana przy fokusie) */
.kr-sform {
	max-width: 880px;
	margin: var(--kr-s2) 0 var(--kr-s5);
}

.kr-sform__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--kr-s3);
	min-height: 72px;
}

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

.kr-sform__row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--kr-ink);
	scale: 0 1;
	transform-origin: left;
	transition: scale 420ms var(--kr-ease-out);
}

.kr-sform__row:focus-within::after {
	scale: 1 1;
}

.kr-sform__row:has(input[aria-invalid="true"])::before,
.kr-sform__row:has(input[aria-invalid="true"])::after {
	background: var(--kr-danger);
}

.kr-sform__row:has(input[aria-invalid="true"])::after {
	scale: 1 1;
}

.kr-sform input {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	font-size: clamp(1.125rem, 2.1vw, 1.625rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--kr-ink);
}

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

.kr-sform input::-webkit-search-cancel-button {
	display: none;
}

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

.kr-sform__go {
	flex: none;
	min-height: 48px;
	padding: 0 var(--kr-s5);
}

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

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

@media (max-width: 575px) {
	.kr-sform__row {
		min-height: 64px;
	}

	.kr-sform__ico {
		display: none;
	}

	.kr-sform__go {
		width: 48px;
		padding: 0;
	}

	.kr-sform__go-l {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ostatnie wyszukiwania (źródło danych: BL-ostatnie-wyszukiwania, opcjonalne pole kr_search_recent) */
.kr-srec {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kr-s2) var(--kr-s4);
	margin: 0 0 var(--kr-s5);
}

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

.kr-srec--in {
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
}

.kr-srec__t {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kr-muted);
}

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

.kr-srec__a {
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s2);
	min-height: 44px;
	padding: 0 var(--kr-s3);
	border: 1px solid var(--kr-line);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--kr-t-hover) ease, background-color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

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

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

@media (hover: hover) and (pointer: fine) {
	.kr-srec__a:hover {
		border-color: var(--kr-ink);
		background: var(--kr-stone);
	}
}

.kr-shead__brand {
	margin: 0 0 var(--kr-s4);
}

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

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

/* dopasowanie na karcie: podkreślenie jak w panelu wyszukiwania (znacznik <mark> dokłada kr-search.js w nazwie i marce) */
.kr-sres__mark {
	background: none;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* =====================================================================
   WARSTWA RUCHU (wyszukiwanie)
   Ten sam język co home i katalog (tytuł, okruszki, duch i pasek narzędzi animuje .kr-cat.is-intro z kr-catalogue.css). Tu tylko elementy wyszukiwania.
   ===================================================================== */

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

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

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

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

	.kr-cat.is-intro .kr-sform__row::before {
		animation: kr-l-line 1000ms var(--kr-ease-io) 420ms both;
	}

	.kr-cat.is-intro .kr-sform__ico,
	.kr-cat.is-intro .kr-sform input,
	.kr-cat.is-intro .kr-sform__clear,
	.kr-cat.is-intro .kr-sform__go,
	.kr-cat.is-intro .kr-srec,
	.kr-cat.is-intro .kr-shead__brand {
		animation: kr-l-rise 560ms var(--kr-ease-out) 520ms both;
	}

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

/* tarcza przed starym CSS (Bootstrap 4: a:hover { text-decoration: underline }) dla odsyłaczy-komponentów wyszukiwania */
.kr-cat .kr-srec__a:is(:hover, :focus) {
	text-decoration: none;
}