/* Kuck redesign — strony treści CMS (układy A, A+, B): pages/content.html, Web Template KR Content Page v1, includes/content/cms_page.html.
   Jeden szablon: okruszki, nagłówek (nadtytuł z grupy stopki, h1 w masce słów, duch), treść z edytora (.kr-cms-prose) w kolumnie 70 znaków, spis treści (P-02),
   wzorce treści (glossary, qa, rows), pole CTA, akordeon FAQ (P-04, wariant). Port mockup/css/cms.css (codemod prefix.mjs + poprawki ręczne opisane w redesign/docs/wdrozenie/content.md)
   z blokiem nagłówka katalogu (kr-cat*, kr-wm*) potrzebnym tej stronie. Tylko tokeny --kr-*, ostre krawędzie; ruch: transform/opacity/clip-path (wyjątek: grid-template-rows zwijanych paneli).
   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; stany zależne od JS (spis zwijany,
   akordeon) są włączane klasą is-armed, którą ustawia kr-content.js, więc bez skryptu spis jest rozwinięty, a FAQ to zwykły tekst. */

:where(.kr-page) [hidden] {
	display: none !important;
}

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

.kr-cms {
	--kr-cms-measure: 45rem; /* ok. 70 znaków Montserrata 16 px; w rem, żeby nagłówki h2 miały tę samą szerokość linii co akapity */
	--kr-cms-side: 0px;
}

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

/* nagłówek strony: ten sam blok co w katalogu i na stronie marek (kr-cat*, maska słów kr-wm*); strona rezerwuje miejsce pod przyklejonym nagłówkiem przez
   kr-header-offset na <main>, więc tu tylko odstęp dolny. Duch typograficzny to treść generowana z data-ghost (dekoracja, poza drzewem dostępności). */
.kr-cat {
	padding-bottom: var(--kr-s9);
}

.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-cat__title:focus-visible {
	outline-offset: 6px;
}

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

/* indeksy animacji liczy CSS po pozycji (CSP zabrania style=""): słowa tytułu, pierwsze bloki treści, pozycje spisu */
.kr-cat__title > .kr-wm .kr-wm__w {
	--kr-w: 8;
}

.kr-cat__title > .kr-wm:nth-child(1) .kr-wm__w {
	--kr-w: 0;
}

.kr-cat__title > .kr-wm:nth-child(2) .kr-wm__w {
	--kr-w: 1;
}

.kr-cat__title > .kr-wm:nth-child(3) .kr-wm__w {
	--kr-w: 2;
}

.kr-cat__title > .kr-wm:nth-child(4) .kr-wm__w {
	--kr-w: 3;
}

.kr-cat__title > .kr-wm:nth-child(5) .kr-wm__w {
	--kr-w: 4;
}

.kr-cat__title > .kr-wm:nth-child(6) .kr-wm__w {
	--kr-w: 5;
}

.kr-cat__title > .kr-wm:nth-child(7) .kr-wm__w {
	--kr-w: 6;
}

.kr-cat__title > .kr-wm:nth-child(8) .kr-wm__w {
	--kr-w: 7;
}

.kr-cms-prose > :nth-child(1) {
	--kr-i: 0;
}

.kr-cms-prose > :nth-child(2) {
	--kr-i: 1;
}

.kr-cms-prose > :nth-child(3) {
	--kr-i: 2;
}

.kr-cms-prose > :nth-child(4) {
	--kr-i: 3;
}

.kr-cms-prose > :nth-child(5) {
	--kr-i: 4;
}

.kr-cms-prose > :nth-child(6) {
	--kr-i: 5;
}

.kr-cms-toc__list > li {
	--kr-i: 9;
}

.kr-cms-toc__list > li:nth-child(1) {
	--kr-i: 0;
}

.kr-cms-toc__list > li:nth-child(2) {
	--kr-i: 1;
}

.kr-cms-toc__list > li:nth-child(3) {
	--kr-i: 2;
}

.kr-cms-toc__list > li:nth-child(4) {
	--kr-i: 3;
}

.kr-cms-toc__list > li:nth-child(5) {
	--kr-i: 4;
}

.kr-cms-toc__list > li:nth-child(6) {
	--kr-i: 5;
}

.kr-cms-toc__list > li:nth-child(7) {
	--kr-i: 6;
}

.kr-cms-toc__list > li:nth-child(8) {
	--kr-i: 7;
}

.kr-cms-toc__list > li:nth-child(9) {
	--kr-i: 8;
}

/* duch krótszy niż w katalogu: tytuły stron treści bywają dłuższe niż nazwy marek */
.kr-cms .kr-cat__head::after {
	font-size: clamp(5rem, 14vw, 13rem);
}

.kr-cms .kr-cat__title {
	font-size: clamp(2.5rem, 5.2vw, 4.75rem);
	letter-spacing: -0.035em;
	line-height: 1.02;
}

/* ---------- układ: kolumna orientacji (spis treści) 4/12 + kolumna lektury 8/12 ---------- */

.kr-cms__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s5) var(--kr-s8);
	align-items: start;
	min-height: 36vh;
	padding-top: var(--kr-s5);
}

@media (min-width: 1100px) {
	.kr-cms__layout {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		padding-top: var(--kr-s6);
	}

	.kr-cms__main {
		grid-column: 2;
	}

	.kr-cms__side {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: calc(var(--kr-header-h) + var(--kr-s5));
		max-height: calc(100vh - var(--kr-header-h) - var(--kr-s7));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

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

/* ---------- treść z edytora ---------- */

.kr-cms-prose {
	min-width: 0;
	font-size: 1rem;
	line-height: 1.75;
	overflow-wrap: break-word;
	hyphens: manual;
}

.kr-cms-prose > :where(p, ul, ol, address, h2) {
	max-width: var(--kr-cms-measure);
}

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

.kr-cms-prose strong {
	font-weight: 600;
}

.kr-cms-prose em {
	font-style: italic;
}

/* lead: pierwszy akapit wstępny (jak opis marki) */
.kr-cms-prose .kr-cms-lead {
	margin-bottom: var(--kr-s5);
	font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: -0.005em;
	color: var(--kr-ink);
}

.kr-cms-prose .kr-cms-lead strong {
	font-weight: 500;
}

/* śródtytuł: akapit pogrubiony w CMS = h2 (P-03), z cienką linią nad sekcją */
.kr-cms-prose h2 {
	position: relative;
	margin: var(--kr-s8) 0 var(--kr-s4);
	padding-top: var(--kr-s5);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
	text-wrap: balance;
	scroll-margin-top: var(--kr-s4); /* html ma już scroll-padding-top 96 px (nagłówek) */
}

.kr-cms-prose h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: min(100%, var(--kr-cms-measure));
	height: 1px;
	background: var(--kr-line-strong);
	transform-origin: left;
}

.kr-cms-prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
}

.kr-cms-prose > h2:first-child::before {
	display: none;
}

.kr-cms-prose h2:focus-visible {
	outline-offset: 6px;
}

/* listy: kwadratowe punktory (ostre krawędzie) */
.kr-cms-prose ul,
.kr-cms-prose ol {
	margin: 0 0 var(--kr-s4);
	padding-left: 1.5rem;
}

.kr-cms-prose ul {
	list-style: square;
}

.kr-cms-prose ol {
	list-style: decimal;
}

.kr-cms-prose li {
	margin-bottom: var(--kr-s2);
	padding-left: var(--kr-s1);
}

.kr-cms-prose li::marker {
	color: var(--kr-muted);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}


/* linki w treści: zawsze podkreślone (kolor nie jest jedynym nośnikiem), grubsza linia po najechaniu */
.kr-cms-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-thickness var(--kr-t-hover) var(--kr-ease-out), text-underline-offset var(--kr-t-hover) var(--kr-ease-out);
	overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
	.kr-cms-prose a:hover {
		text-decoration-thickness: 2px;
		text-underline-offset: 0.3em;
	}
}

/* blok adresowy (sprzedawca, adres serwisu): panel z tła stone, bez ramki */
.kr-cms-prose address {
	margin: 0 0 var(--kr-s4);
	padding: var(--kr-s4) var(--kr-s5);
	background: var(--kr-stone);
	font-style: normal;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

/* numer telefonu i e-mail w bloku adresowym: strefa dotyku 44 px bez zmiany układu (padding pionowy elementu inline nie zmienia wysokości wiersza) */
.kr-cms-prose address a,
.kr-cms-cta__text a {
	padding-block: 12px;
}

/* tabele z edytora (styl obronny: w danych kuck.pl nie ma tabel) */
.kr-cms-prose table {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 0 0 var(--kr-s5);
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.kr-cms-prose th,
.kr-cms-prose td {
	padding: var(--kr-s3) var(--kr-s4);
	border-bottom: 1px solid var(--kr-line);
	text-align: left;
	vertical-align: top;
}

.kr-cms-prose th {
	border-bottom-color: var(--kr-line-strong);
	font-weight: 600;
}

/* ---------- numeracja punktów regulaminu (P-03: wysunięty numer) ---------- */

.kr-cms-prose .kr-cms-clause {
	margin-bottom: var(--kr-s3);
	padding-left: 2.75rem;
	text-indent: -2.75rem;
}

.kr-cms-prose .kr-cms-clause__n {
	display: inline-block;
	width: 2.75rem;
	text-indent: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--kr-muted);
}

.kr-cms-prose .kr-cms-clause--cont {
	margin-top: calc(-1 * var(--kr-s2));
	text-indent: 0;
}

/* listy wewnątrz punktów: tekst równo z tekstem punktu, punktory wiszą w kolumnie numerów (treść ma punkty, gdy zawiera kr-cms-clause: bez atrybutu z serwera) */
.kr-cms-prose:has(> .kr-cms-clause) > :where(ul, ol) {
	margin-left: 2.75rem;
	padding-left: 0;
}

.kr-cms-prose:has(> .kr-cms-clause) > :where(ul, ol) > li {
	padding-left: 0;
}

/* ---------- obrazy w treści (A+) ---------- */

.kr-cms-fig {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 var(--kr-s5);
	background: var(--kr-stone-deep);
	overflow: hidden;
}

.kr-cms-fig img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

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

/* obraz nie załadował się: ramka zachowuje proporcje, alt jako tekst (informacja nie ginie) */
.kr-cms-fig.is-broken {
	display: grid;
	place-items: center;
	width: min(100%, var(--kr-fig-w, 485px));
	aspect-ratio: var(--kr-fig-ratio, 4 / 1);
	padding: var(--kr-s4);
	color: var(--kr-muted);
	font-size: 0.875rem;
	text-align: center;
}

.kr-cms-fig.is-broken img {
	display: none;
}

.kr-cms-fig.is-broken::before {
	content: attr(data-alt);
}

/* ---------- wzorzec glossary: hasło – definicja, grupy liter ---------- */

.kr-cms-prose[data-pattern="glossary"] h2 {
	margin: var(--kr-s8) 0 var(--kr-s3);
	padding-top: 0;
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: 200;
	letter-spacing: -0.05em;
	line-height: 0.9;
}

.kr-cms-prose[data-pattern="glossary"] h2::before {
	display: none;
}

.kr-cms-prose[data-pattern="glossary"] > h2:first-child {
	margin-top: 0;
}

.kr-cms-prose dl {
	margin: 0;
	border-top: 1px solid var(--kr-line-strong);
}

.kr-cms-prose dt {
	padding-top: var(--kr-s4);
	font-weight: 600;
	letter-spacing: -0.005em;
}

.kr-cms-prose dd {
	margin: 0;
	padding-bottom: var(--kr-s4);
	border-bottom: 1px solid var(--kr-line);
}

@media (min-width: 640px) {
	.kr-cms-prose dl {
		display: grid;
		grid-template-columns: minmax(8.5rem, 13rem) minmax(0, 1fr);
	}

	.kr-cms-prose dt,
	.kr-cms-prose dd {
		padding-block: var(--kr-s4);
		border-bottom: 1px solid var(--kr-line);
	}

	.kr-cms-prose dd {
		padding-left: var(--kr-s5);
	}
}

/* ---------- wzorzec qa: pytania i odpowiedzi ---------- */

.kr-cms-prose[data-pattern="qa"] {
	counter-reset: qa;
}

.kr-cms-prose[data-pattern="qa"] h2 {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	margin-top: var(--kr-s7);
	font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
}

.kr-cms-prose[data-pattern="qa"] h2::after {
	counter-increment: qa;
	content: counter(qa, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--kr-muted);
	line-height: 1.9;
}

.kr-cms-prose[data-pattern="qa"] > p {
	padding-left: 2.5rem;
}

/* ---------- wzorzec rows: grupa marek + adres serwisu ---------- */

.kr-cms-prose[data-pattern="rows"] > .kr-cms-svc,
.kr-cms-prose[data-pattern="rows"] > p:not(.kr-cms-lead),
.kr-cms-prose[data-pattern="rows"] > ul {
	max-width: none;
}

.kr-cms-svc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s3) var(--kr-s6);
	padding: var(--kr-s5) 0;
	border-top: 1px solid var(--kr-line);
}

.kr-cms-svc:last-of-type {
	border-bottom: 1px solid var(--kr-line);
}

.kr-cms-prose .kr-cms-svc h2 {
	grid-column: 1;
	margin: 0;
	padding: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.kr-cms-prose .kr-cms-svc h2::before {
	display: none;
}

.kr-cms-prose .kr-cms-svc p {
	margin: 0;
	color: var(--kr-muted);
	font-size: 0.9375rem;
}

.kr-cms-prose .kr-cms-svc address {
	margin: 0;
	max-width: 34rem;
}

@media (min-width: 768px) {
	.kr-cms-svc {
		grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
		align-items: start;
	}

	.kr-cms-prose .kr-cms-svc > :not(h2) {
		grid-column: 2;
	}

	.kr-cms-prose .kr-cms-svc h2 {
		grid-row: 1 / span 2;
	}
}

/* ---------- spis treści (P-02) ----------
   Spis jest renderowany przez serwer (Jinja) z nagłówków h2 z id. Bez JS jest zawsze rozwinięty i bez przycisku; skrypt (klasa is-armed na .kr-cms) pokazuje przycisk
   na wąskich ekranach i zwija panel, a od 1100 px spis jest przyklejoną kolumną z etykietą. */

.kr-cms-toc__btn {
	display: none;
	align-items: center;
	gap: var(--kr-s3);
	width: 100%;
	min-height: 52px;
	padding: 0 var(--kr-s4);
	border: 1px solid var(--kr-ink);
	background: transparent;
	font-size: 0.78125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-cms-toc__btn:active {
	scale: 0.96;
}

.kr-cms-toc__btn > span:first-child {
	flex: 1;
}

.kr-cms-toc__n {
	font-variant-numeric: tabular-nums;
	color: var(--kr-muted);
}

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

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

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

	.kr-cms-toc__btn:hover .kr-cms-toc__n {
		color: inherit;
	}
}

.kr-cms.is-armed .kr-cms-toc__btn {
	display: flex;
}

.kr-cms-toc__panel {
	display: grid;
	grid-template-rows: 1fr;
}

.kr-cms.is-armed .kr-cms-toc__panel {
	grid-template-rows: 0fr;
	transition: grid-template-rows 280ms var(--kr-ease-out);
}

.kr-cms.is-armed .kr-cms-toc.is-open .kr-cms-toc__panel {
	grid-template-rows: 1fr;
}

.kr-cms-toc__in {
	position: relative;
	min-height: 0;
	overflow: hidden;
}

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

.kr-cms-toc__track {
	position: relative;
	margin-top: var(--kr-s3);
}

.kr-cms-toc__track::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--kr-line);
	transform-origin: top;
}

.kr-cms-toc__list {
	margin: 0;
	padding: 0 0 0 var(--kr-s4);
	list-style: none;
	counter-reset: toc;
}

.kr-cms-toc__list a {
	display: flex;
	gap: var(--kr-s3);
	min-height: 44px;
	padding: var(--kr-s2) var(--kr-s3) var(--kr-s2) 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--kr-muted);
	text-decoration: none;
	align-items: center;
	text-wrap: balance;
	transition: color var(--kr-t-hover) ease;
}

.kr-cms-toc__list a[aria-current="location"] {
	color: var(--kr-ink);
	font-weight: 600;
}

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

/* wskaźnik bieżącej sekcji: jedna belka przesuwana transformem */
.kr-cms-toc__bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: var(--kr-bar-h, 0px);
	background: var(--kr-ink);
	transform: translateY(var(--kr-bar-y, 0px));
	opacity: var(--kr-bar-o, 0);
	transition: transform var(--kr-t-ui) var(--kr-ease-out), height var(--kr-t-ui) var(--kr-ease-out), opacity var(--kr-t-hover) ease;
	pointer-events: none;
}

/* numeracja pytań (qa) także w spisie */
.kr-cms[data-pattern="qa"] .kr-cms-toc__list a::before {
	counter-increment: toc;
	content: counter(toc, decimal-leading-zero);
	flex: none;
	min-width: 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* spis liter słownika: siatka kwadratów 44 px */
.kr-cms-toc--letters .kr-cms-toc__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, 44px);
	gap: 0;
	padding-left: 0;
}

.kr-cms-toc--letters .kr-cms-toc__track::before {
	display: none;
}

.kr-cms-toc--letters .kr-cms-toc__list a {
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.kr-cms-toc--letters .kr-cms-toc__list a[aria-current="location"] {
	border-color: var(--kr-ink);
	background: var(--kr-ink);
	color: var(--kr-paper);
}

.kr-cms-toc--letters .kr-cms-toc__bar {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.kr-cms-toc--letters .kr-cms-toc__list a:hover:not([aria-current="location"]) {
		border-color: var(--kr-line-strong);
	}
}

@media (min-width: 1100px) {
	.kr-cms.is-armed .kr-cms-toc__btn {
		display: none;
	}

	.kr-cms.is-armed .kr-cms-toc__panel {
		grid-template-rows: 1fr;
		transition: none;
	}

	.kr-cms-toc__lab {
		display: block;
	}

	.kr-cms-toc__in {
		overflow: visible;
	}
}

/* ---------- pole CTA (układ B) ---------- */

.kr-cms-cta {
	position: relative;
	display: grid;
	gap: var(--kr-s5);
	justify-items: start;
	margin-top: var(--kr-s8);
	padding: var(--kr-s7) var(--kr-s6);
	background: var(--kr-ink);
	color: var(--kr-paper);
}

.kr-cms-cta__text {
	max-width: 36ch;
	margin: 0;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* treść pola cta_text pochodzi z edytora (akapit z odsyłaczami tel:), więc akapity w środku nie mają własnych marginesów */
.kr-cms-cta__text > p {
	margin: 0;
}

.kr-cms-cta__text > p + p {
	margin-top: var(--kr-s3);
}

.kr-cms-cta__text a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	white-space: nowrap;
	transition: text-underline-offset var(--kr-t-hover) var(--kr-ease-out);
}

.kr-cms-cta .kr-btn {
	max-width: 100%;
	white-space: normal;
	text-align: left;
}

.kr-cms-cta :focus-visible {
	outline-color: #7fb4ff;
}

.kr-cms-cta .kr-btn .kr-ms {
	transition: translate var(--kr-t-ui) var(--kr-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.kr-cms-cta__text a:hover {
		text-underline-offset: 0.34em;
	}

	.kr-cms-cta .kr-btn:hover .kr-ms {
		translate: 4px 0;
	}
}

@media (min-width: 768px) {
	.kr-cms-cta {
		padding: var(--kr-s8) var(--kr-s7);
	}
}

/* ---------- akordeon FAQ (P-04, wariant): ten sam tekst, odpowiedzi zwinięte ---------- */

.kr-cms-acc {
	border-top: 1px solid var(--kr-line-strong);
}

.kr-cms-acc__item {
	border-bottom: 1px solid var(--kr-line);
}

.kr-cms-prose .kr-cms-acc__h {
	margin: 0;
	padding: 0;
	max-width: none;
	font-size: inherit;
	scroll-margin-top: var(--kr-s4); /* html ma już scroll-padding-top 96 px (nagłówek) */
}

.kr-cms-prose .kr-cms-acc__h::before,
.kr-cms-prose .kr-cms-acc__h::after {
	display: none;
}

.kr-cms-acc__btn {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0;
	width: 100%;
	min-height: 64px;
	padding: var(--kr-s3) 0;
	border: 0;
	background: transparent;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	text-align: left;
}

.kr-cms-acc__n {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--kr-muted);
}

.kr-cms-acc__lab {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	width: fit-content;
	transition: background-size 200ms var(--kr-ease-out);
}

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

.kr-cms-acc__item.is-open .kr-cms-acc__btn .kr-ms {
	rotate: 180deg;
}

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

.kr-cms-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 280ms var(--kr-ease-out);
}

.kr-cms-acc__item.is-open .kr-cms-acc__panel {
	grid-template-rows: 1fr;
}

/* margines, nie padding: zwinięty wiersz 0fr nie może mieć wysokości */
.kr-cms-acc__in {
	min-height: 0;
	overflow: hidden;
	padding-left: 2.5rem;
}

.kr-cms-acc__in > * {
	max-width: 65ch;
}

.kr-cms-acc__in > :last-child {
	margin-bottom: var(--kr-s5);
}

/* ---------- stan: nie znaleziono (teksty z kuck.pl, zob. docs wdrożenia) ---------- */

.kr-cms-note {
	max-width: var(--kr-cms-measure);
}

.kr-cms-note p {
	margin: 0 0 var(--kr-s3);
}

.kr-cms-note__lead {
	font-size: 1.125rem;
	font-weight: 600;
}

/* ---------- druk: sam tekst ---------- */

@media print {
	.kr-cms-toc,
	.kr-cms__side,
	.kr-cat__head::after,
	.kr-cms-cta .kr-btn {
		display: none !important;
	}

	.kr-cms__layout {
		display: block;
	}

	.kr-cms-prose a {
		text-decoration: underline;
	}
}

/* =====================================================================
   WARSTWA RUCHU (strony treści)
   Ten sam język co home, katalog i marki: kurtyna obrazu, osiadanie 1,1 → 1, unoszenie ze staggerem 55 ms, rysowane linie, duch typograficzny.
   Tytuł, okruszki i duch animuje katalog (.cat.is-intro); tu elementy rodziny. Treść długa (regulamin, słownik) nie dostaje ruchu na każdym
   akapicie: wchodzą tylko pierwsze bloki, a przy przewijaniu śródtytuły, obrazy i pole CTA (tylko translate, bez opacity: 0 na tekście).
   Stany początkowe „ukrytych” elementów są wyłącznie w prefers-reduced-motion: no-preference.
   ===================================================================== */

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

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

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

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

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

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

@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;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* nagłówek strony: maska słów, duch, okruszki (jak katalog i marki) */
	.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-cms.is-intro .kr-cms-head__eyebrow {
		animation: kr-cms-rise 560ms var(--kr-ease-out) 120ms both;
	}

	/* spis treści: pionowa linia rysuje się z góry, pozycje unoszą się po 55 ms */
	.kr-cms.is-intro .kr-cms-toc__track::before {
		animation: kr-cms-line-y 700ms var(--kr-ease-io) 300ms both;
	}

	.kr-cms.is-intro .kr-cms-toc__lab {
		animation: kr-cms-rise 480ms var(--kr-ease-out) 380ms both;
	}

	.kr-cms.is-intro .kr-cms-toc__list > li {
		animation: kr-cms-rise 480ms var(--kr-ease-out) both;
		animation-delay: calc(440ms + var(--kr-i, 0) * 55ms);
	}

	/* pierwsze bloki treści */
	.kr-cms.is-intro .kr-cms-prose > :nth-child(-n + 6):not(.kr-cms-fig) {
		animation: kr-cms-rise 560ms var(--kr-ease-out) both;
		animation-delay: calc(380ms + var(--kr-i, 0) * 55ms);
	}

	.kr-cms.is-intro .kr-cms-prose > .kr-cms-fig:nth-child(-n + 6) {
		animation: kr-cms-wipe 700ms var(--kr-ease-out) both;
		animation-delay: calc(240ms + var(--kr-i, 0) * 55ms);
	}

	.kr-cms.is-intro .kr-cms-prose > .kr-cms-fig:nth-child(-n + 6) img {
		animation: kr-cms-settle 1000ms var(--kr-ease-out) both;
		animation-delay: calc(240ms + var(--kr-i, 0) * 55ms);
	}

	.kr-cms.is-intro .kr-cms-cta.is-first {
		animation: kr-cms-rise 560ms var(--kr-ease-out) 560ms both;
	}

	/* przewijanie: linie nad śródtytułami rysują się, bloki unoszą się (CSS view(), bez JS; bez wsparcia: od razu widoczne) */
	@supports (animation-timeline: view()) {
		.kr-cms-prose h2::before,
		.kr-cms-cta::before {
			animation: kr-cms-line linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}

		.kr-cms-prose > h2:not(:nth-child(-n + 6)),
		.kr-cms-prose > .kr-cms-fig:not(:nth-child(-n + 6)),
		.kr-cms-prose > .kr-cms-svc,
		.kr-cms-cta:not(.is-first) {
			animation: kr-cms-scroll-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 36%;
		}
	}
}

/* linia nad polem CTA (rysowana jak linie śródtytułów) */
.kr-cms-cta::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--kr-paper);
	opacity: 0.35;
	transform-origin: left;
}

/* reduced motion: zwijane panele bez przejścia, wskaźnik spisu bez przesuwania (zostaje zanik 160 ms) */
@media (prefers-reduced-motion: reduce) {
	.kr-cms.is-armed .kr-cms-toc__panel,
	.kr-cms-acc__panel {
		transition: none;
	}

	.kr-cms-toc__btn .kr-ms,
	.kr-cms-acc__btn .kr-ms {
		transition: none;
	}

	.kr-cms-toc__bar {
		transition: opacity 160ms linear;
	}
}