/* Kuck redesign — sekcje strony głównej (rodzina home): port mockup/css/home.css v0.2 przez redesign/tools/jinja/codemod/prefix.mjs, bez bloków dostarczanych przez
   powłokę (kr-base.css: .kr-section, .kr-h-section, .kr-h-display, .kr-lead, .kr-text-link, .is-dark; kr-components.css: .kr-pause-btn, .kr-tabs--sm).
   Markup sekcji: kuck_shop/kuck_shop/web_template/kr_*_v1/ (Web Templates) i templates/redesign/includes/home/. Ładuje go strona w bloku kr_head, po kr-shell.css.
   Rytm: hero (jasny/ciemny) > biały > biały > szary > ciemny heritage > szary > ciemny/biały serwis > szary marki > biały aktualności > ciemny newsletter > stopka.
   Różnice względem mockupu (serwer, CSP, kontrakt danych) są oznaczone komentarzem „SSR:”. */

/* =========================================================
   1. Hero — watch slider (KR Hero v1: image, title, text, CTA per slide)
   ========================================================= */

.kr-hero {
	--kr-fg: var(--kr-ink);
	--kr-fg-muted: var(--kr-muted);
	--kr-fg-line: rgb(17 17 17 / 18%);
	position: relative;
	display: grid;
	height: max(600px, calc(100svh - var(--kr-announce-h)));
	overflow: hidden;
	isolation: isolate;
	background: var(--kr-stone);
	color: var(--kr-fg);
}

.kr-hero[data-tone="dark"] {
	--kr-fg: var(--kr-paper);
	--kr-fg-muted: rgb(255 255 255 / 74%);
	--kr-fg-line: rgb(255 255 255 / 24%);
}

.kr-hero__slides {
	display: grid;
	grid-area: 1 / 1;
}

.kr-slide {
	position: relative;
	display: grid;
	grid-area: 1 / 1;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 560ms var(--kr-ease-out), visibility 0s linear 560ms;
}

.kr-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.kr-slide__stage {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: radial-gradient(58% 90% at 70% 48%, #fcfcfb 0%, #ebe9e5 68%, #dfdcd7 100%);
}

.kr-slide[data-tone="dark"] .kr-slide__stage {
	background: radial-gradient(70% 90% at 78% 40%, #1d4252 0%, #0e1c23 62%, #07090b 100%);
}

.kr-slide__ghost {
	position: absolute;
	right: -1vw;
	bottom: 11%;
	font-size: clamp(7rem, 19vw, 21rem);
	font-weight: 200;
	letter-spacing: -0.05em;
	line-height: 0.8;
	color: rgb(17 17 17 / 5%);
	white-space: nowrap;
	user-select: none;
}

.kr-slide__watch {
	position: absolute;
	top: 50%;
	right: calc(max(var(--kr-gutter), (100% - var(--kr-container)) / 2) + 2%);
	width: min(46vw, 74svh, 720px);
	height: auto;
	mix-blend-mode: multiply;
	translate: 56px -50%;
	scale: 0.96;
	opacity: 0;
	transition: translate 200ms var(--kr-ease-out), scale 200ms var(--kr-ease-out), opacity 200ms var(--kr-ease-out);
}

.kr-slide.is-active .kr-slide__watch {
	translate: 0 -50%;
	scale: 1;
	opacity: 1;
	transition: translate 900ms var(--kr-ease-out) 120ms, scale 900ms var(--kr-ease-out) 120ms, opacity 600ms var(--kr-ease-out) 120ms;
}

.kr-slide__ground {
	position: absolute;
	right: calc(max(var(--kr-gutter), (100% - var(--kr-container)) / 2) + 2%);
	bottom: 12%;
	width: min(34vw, 540px);
	height: 26px;
	background: radial-gradient(closest-side, rgb(17 17 17 / 20%), transparent);
	filter: blur(6px);
	opacity: 0;
	transition: opacity 300ms var(--kr-ease-out);
}

.kr-slide.is-active .kr-slide__ground {
	opacity: 1;
	transition-delay: 300ms;
}

.kr-slide__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 56%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
	mask-image: linear-gradient(to right, transparent 0%, #000 38%);
	scale: 1.06;
	transition: scale 1400ms var(--kr-ease-out);
}

.kr-slide.is-active .kr-slide__photo {
	scale: 1;
}

.kr-slide__content {
	display: grid;
	gap: var(--kr-s4);
	max-width: 560px;
	padding-block: calc(var(--kr-header-h) + var(--kr-s7)) 132px;
}

.kr-slide__title {
	font-size: clamp(2.25rem, 4.7vw, 4.5rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1.02;
	text-wrap: balance;
}

.kr-slide__text {
	max-width: 440px;
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	color: var(--kr-fg-muted);
	text-wrap: pretty;
}

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

.kr-slide[data-tone="dark"] .kr-slide__cta .kr-btn--outline-dark {
	background: transparent;
	border-color: rgb(255 255 255 / 55%);
	color: var(--kr-paper);
}

@media (hover: hover) and (pointer: fine) {
	.kr-slide[data-tone="dark"] .kr-slide__cta .kr-btn--outline-dark:hover {
		background: var(--kr-paper) !important;
		border-color: var(--kr-paper) !important;
		color: var(--kr-ink);
	}
}

.kr-slide[data-tone="dark"] .kr-slide__cta .kr-btn:not(.kr-btn--outline-dark) {
	background: var(--kr-paper);
	border-color: var(--kr-paper);
	color: var(--kr-ink);
}

/* content: quick fade when leaving, staggered (60 ms) rise when arriving */
.kr-slide__title,
.kr-slide__text,
.kr-slide__cta {
	opacity: 0;
	translate: 0 12px;
	transition: opacity 160ms var(--kr-ease-out), translate 160ms var(--kr-ease-out);
}

.kr-slide.is-active .kr-slide__title,
.kr-slide.is-active .kr-slide__text,
.kr-slide.is-active .kr-slide__cta {
	opacity: 1;
	translate: 0 0;
	transition: opacity 600ms var(--kr-ease-out), translate 700ms var(--kr-ease-out);
	transition-delay: calc(140ms + var(--kr-d, 0) * 60ms);
}

.kr-slide__text {
	--kr-d: 1;
}

.kr-slide__cta {
	--kr-d: 2;
}

/* first paint: hold the entrance until the page is ready */
.kr-js-motion .kr-hero:not(.is-in) .kr-slide.is-active :is(.kr-slide__title, .kr-slide__text, .kr-slide__cta),
.kr-js-motion .kr-hero:not(.is-in) .kr-slide.is-active .kr-slide__watch {
	opacity: 0;
	transition: none;
}

.kr-hero__nav {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--kr-s6);
	padding-bottom: var(--kr-s5);
}

/* SSR: liczba zakładek wynika z liczby slajdów w HTML; mockup ustawiał ją skryptem (--n), a style="" jest niedozwolony przez CSP */
.kr-hero__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--kr-s4);
}

.kr-hero__tab {
	position: relative;
	display: grid;
	gap: 2px;
	justify-items: start;
	min-height: 64px;
	padding: var(--kr-s4) 0 0;
	border: 0;
	background: none;
	color: var(--kr-fg-muted);
	text-align: left;
	transition: color var(--kr-t-hover) ease;
}

.kr-hero__tab::before,
.kr-hero__tab::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
}

.kr-hero__tab::before {
	background: var(--kr-fg-line);
}

.kr-hero__tab::after {
	background: var(--kr-fg);
	transform-origin: left;
	scale: var(--kr-p, 0) 1;
}

.kr-hero__tab[aria-selected="true"] {
	color: var(--kr-fg);
}

.kr-hero__tab b {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kr-hero__tab span {
	font-size: 0.8125rem;
}

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

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

.kr-hero .kr-round-btn {
	border-color: var(--kr-fg-line);
	background: transparent;
	color: var(--kr-fg);
}

@media (hover: hover) and (pointer: fine) {
	.kr-hero .kr-round-btn:not([disabled]):hover {
		background: var(--kr-fg);
		border-color: var(--kr-fg);
		color: var(--kr-bg-inv, var(--kr-paper));
	}

	.kr-hero[data-tone="dark"] .kr-round-btn:not([disabled]):hover {
		color: var(--kr-ink);
	}
}

/* marketing slide: typographic promotion */
.kr-slide.kr-slide--promo .kr-slide__stage {
	background: radial-gradient(62% 90% at 82% 50%, #3b0d11 0%, #170d0e 55%, #0a0a0b 100%);
}

.kr-promo__num {
	position: absolute;
	right: calc(max(var(--kr-gutter), (100% - var(--kr-container)) / 2) - 1vw);
	top: 50%;
	display: flex;
	align-items: flex-start;
	translate: 0 -54%;
	font-size: clamp(10rem, 28vw, 30rem);
	font-weight: 200;
	letter-spacing: -0.07em;
	line-height: 0.78;
	color: var(--kr-sale);
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.kr-promo__num em {
	font-style: normal;
	font-size: 0.36em;
	margin: 0.08em 0 0 0.02em;
	letter-spacing: -0.04em;
}

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

.kr-promo__perks li {
	display: flex;
	align-items: center;
	gap: var(--kr-s3);
	font-size: 0.9375rem;
}

.kr-promo__perks .kr-ms {
	font-size: 24px;
}

.kr-slide--promo .kr-slide__cta .kr-btn:first-child {
	background: var(--kr-paper);
	border-color: var(--kr-paper);
	color: var(--kr-ink);
}

.kr-slide--promo .kr-slide__cta .kr-btn--outline-dark {
	background: transparent;
	border-color: rgb(255 255 255 / 55%);
	color: var(--kr-paper);
}

/* marketing slide: a banner fills the whole slide edge to edge (object-fit: cover), no overlay and no
   dimming. Any proportion works; what does not fit is cropped, the focus point is set per banner. */
.kr-slide--banner .kr-slide__stage {
	background: #0d2530;
}

.kr-slide__banner {
	position: absolute;
	inset: 0;
	display: block;
	line-height: 0;
	overflow: hidden;
}

/* stary CSS aplikacji (bundle, zob. kr-base.css, tarcza K2) podkreśla każdy odsyłacz; w mockupie te odsyłacze nie mają podkreślenia.
   Reset w zasięgu strony głównej: kr-components.css nie jest własnością tej rodziny. */
.kr-page .kr-slide__banner,
.kr-page .kr-pcard__link,
.kr-page .kr-tool {
	text-decoration: none;
}

.kr-slide__banner img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--kr-focus-x, 12%) 50%;
	scale: 1.05;
	transition: scale 1600ms var(--kr-ease-out);
}

.kr-slide.is-active .kr-slide__banner img {
	scale: 1;
}

.kr-slide__bannercta {
	align-self: end;
	padding-bottom: 144px;
}

/* the tabs sit straight on the photograph: a soft text shadow keeps them legible without dimming it */
.kr-hero[data-tone="dark"] .kr-hero__tab {
	text-shadow: 0 1px 14px rgb(0 0 0 / 45%);
}

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

/* 320 px: a long label (e.g. "Wszystkie zegarki Longines") wraps inside the button instead of leaving the screen */
@media (max-width: 359px) {
	.kr-slide__cta .kr-btn {
		max-width: 100%;
		padding-block: 6px;
		white-space: normal;
		text-align: center;
		line-height: 1.3;
	}
}

@media (max-width: 991px) {
	.kr-slide--promo .kr-promo__num {
		top: auto;
		bottom: 96px;
		right: var(--kr-gutter);
		translate: 0 0;
		font-size: 11rem;
		opacity: 0.9;
	}

	.kr-slide__banner img {
		object-position: 60% 50%;
	}

	.kr-slide__bannercta {
		padding-bottom: 96px;
	}
}
@media (max-width: 991px) {
	.kr-hero {
		height: max(640px, calc(100svh - var(--kr-announce-h)));
	}

	.kr-slide {
		align-items: start;
	}

	.kr-slide__content {
		padding-block: calc(var(--kr-header-h) + var(--kr-s5)) 0;
		max-width: none;
	}

	.kr-slide__text {
		max-width: 520px;
	}

	.kr-slide__watch {
		top: auto;
		right: auto;
		bottom: 84px;
		left: 50%;
		width: min(74vw, 46svh);
		translate: -50% 40px;
	}

	.kr-slide.is-active .kr-slide__watch {
		translate: -50% 0;
	}

	.kr-slide__ground,
	.kr-slide__ghost {
		display: none;
	}

	.kr-slide__photo {
		top: auto;
		bottom: 0;
		width: 100%;
		height: 52%;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
	}

	.kr-hero__tab b {
		font-size: 0.6875rem;
	}

	.kr-hero__tab span {
		display: none;
	}

	.kr-hero__tab {
		min-height: 44px;
	}

	.kr-hero__tabs {
		gap: var(--kr-s2);
	}

	.kr-hero__nav {
		grid-template-columns: 1fr;
	}

	.kr-hero__ctrl {
		display: none;
	}
}

/* A source banner is already finished artwork with copy baked into the image.
   Keep its full wide ratio at every viewport and never crop that copy. */
.kr-hero[data-kr-banner-only] {
	--kr-fg: var(--kr-ink);
	--kr-fg-muted: var(--kr-muted);
	--kr-fg-line: rgb(17 17 17 / 18%);
	padding-top: var(--kr-header-h);
	height: auto;
	min-height: 0;
	grid-template-rows: auto auto;
}

.kr-hero[data-kr-banner-only] .kr-hero__slides {
	grid-area: 1 / 1 / 2 / 2;
	width: 100%;
	aspect-ratio: 16 / 5;
}

.kr-hero[data-kr-banner-only] .kr-slide {
	align-items: stretch;
}

.kr-hero[data-kr-banner-only] .kr-slide--banner .kr-slide__stage {
	background: var(--kr-stone);
}

.kr-hero[data-kr-banner-only] .kr-slide__banner img,
.kr-hero[data-kr-banner-only] .kr-slide.is-active .kr-slide__banner img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	scale: 1;
	transition: none;
}

.kr-hero[data-kr-banner-only] .kr-hero__nav {
	position: relative;
	grid-area: 2 / 1 / 3 / 2;
	padding: var(--kr-s4) var(--kr-gutter);
	background: var(--kr-stone);
}

.kr-hero[data-kr-banner-only] .kr-hero__ctrl {
	display: flex;
}
/* =========================================================
   2. Entry accordion — horizontal slices
   ========================================================= */

.kr-entry__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--kr-s5) var(--kr-s7);
	margin-bottom: var(--kr-s7);
}

.kr-entry__head .kr-h-section {
	max-width: 16ch;
}

.kr-acc {
	display: flex;
	gap: var(--kr-s3);
	height: clamp(520px, 66svh, 700px);
}

.kr-acc__panel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	background: var(--kr-ink);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
	transition: flex-grow 560ms var(--kr-ease-io);
}

.kr-acc__panel.is-active {
	flex-grow: 3.6;
}

.kr-acc__panel img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1.12;
	filter: saturate(0.85);
	transition: scale 1100ms var(--kr-ease-out), filter 600ms ease;
}

.kr-acc__panel.is-active img {
	scale: 1;
	filter: none;
}

/* SSR: kadr obrazu do góry (mockup: style="object-position:50% 0%" na <img>, niedozwolone przez CSP) — pole panel_N_top */
.kr-acc__panel--top img {
	object-position: 50% 0%;
}

.kr-acc__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 18%) 55%, rgb(0 0 0 / 28%) 100%);
}

.kr-acc__label {
	position: absolute;
	left: var(--kr-s5);
	bottom: var(--kr-s5);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	rotate: 180deg;
	white-space: nowrap;
	transition: opacity 240ms ease;
}

.kr-acc__panel.is-active .kr-acc__label {
	opacity: 0;
}

.kr-acc__body {
	position: absolute;
	left: var(--kr-s6);
	right: var(--kr-s6);
	bottom: var(--kr-s6);
	display: grid;
	gap: var(--kr-s3);
	max-width: 520px;
	opacity: 0;
	translate: 0 12px;
	transition: opacity 200ms ease, translate 200ms ease;
}

.kr-acc__panel.is-active .kr-acc__body {
	opacity: 1;
	translate: 0 0;
	transition: opacity 380ms ease 220ms, translate 460ms var(--kr-ease-out) 220ms;
}

.kr-acc__body h3 {
	font-size: clamp(1.75rem, 2.8vw, 2.75rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.kr-acc__body p {
	font-size: 1rem;
	color: rgb(255 255 255 / 86%);
}

.kr-acc__go {
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s3);
	margin-top: var(--kr-s2);
	font-size: 0.78125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

@media (hover: hover) and (pointer: fine) {
	.kr-acc__panel:hover .kr-acc__go .kr-ms {
		translate: 4px 0;
	}
}

.kr-acc__panel--sale {
	background: radial-gradient(90% 70% at 20% 100%, #4a0b0e 0%, #130d0d 70%);
}

.kr-acc__panel--sale::before {
	background: none;
}

.kr-acc__big {
	position: absolute;
	left: var(--kr-s6);
	top: var(--kr-s6);
	z-index: -1;
	font-size: clamp(5rem, 13vw, 12rem);
	font-weight: 200;
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: var(--kr-sale);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 240ms ease;
}

.kr-acc__panel--sale.is-active .kr-acc__big {
	opacity: 0.92;
	transition: opacity 420ms ease 240ms;
}

@media (max-width: 991px) {
	.kr-acc {
		flex-direction: column;
		height: auto;
	}

	.kr-acc__panel,
	.kr-acc__panel.is-active {
		flex: none;
		min-height: 360px;
	}

	.kr-acc__panel img {
		scale: 1;
		filter: none;
	}

	.kr-acc__label {
		display: none;
	}

	.kr-acc__body {
		opacity: 1;
		translate: 0 0;
	}

	.kr-acc__big {
		font-size: 8rem;
		opacity: 0.92;
	}
}

/* =========================================================
   3. Product shelf
   ========================================================= */

.kr-shelf {
	padding-block: clamp(72px, 9vw, 144px) var(--kr-section-y);
}

.kr-shelf__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--kr-s5);
	margin-bottom: var(--kr-s7);
}

.kr-shelf__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kr-s3);
}

/* SSR: każda zakładka ma własną parę strzałek i własny pasek postępu (kr-ui.js wiąże je z torem przez id); widoczna jest tylko grupa aktywnej zakładki
   (kr-home.js przełącza atrybut hidden po kr:tabchange). Grupa nie tworzy własnego pudełka, więc układ jest taki sam jak z jedną parą. */
.kr-shelf__group {
	display: contents;
}

/* The progress hairline runs straight into the link and shares its bottom edge: from the left
   edge of the screen content to the end of the link's underline it reads as one continuous line. */
.kr-shelf__foot {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0;
	margin-top: var(--kr-s6);
}

.kr-shelf__foot .kr-rail-progress {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	align-self: flex-end;
}

.kr-shelf__foot .kr-text-link {
	flex: none;
	padding-left: var(--kr-s4);
}

.kr-shelf__empty {
	grid-row: 1 / span 4;
	width: min(100%, 560px);
	padding: var(--kr-s8) var(--kr-gutter);
	text-align: center;
	color: var(--kr-muted);
}

@media (max-width: 575px) {
	.kr-shelf .kr-tabs {
		flex-wrap: nowrap;
		gap: 0 18px;
	}

	.kr-shelf .kr-tabs__tab {
		font-size: 1.3rem;
	}
}

/* the three tabs need 332 px: below 375 px the last one wraps to a second row (the underline follows the selected tab) */
@media (max-width: 374px) {
	.kr-shelf .kr-tabs {
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.kr-shelf .kr-rail__track {
		column-gap: var(--kr-s4);
		grid-auto-columns: 66vw;
	}

	.kr-shelf__tools .kr-round-btn {
		display: none;
	}
}

/* =========================================================
   4. Promises — the four standing commitments, each one a link
   ========================================================= */

.kr-promises {
	padding-block: var(--kr-section-y);
	background: var(--kr-stone);
}

.kr-promises__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--kr-s8);
	align-items: start;
}

.kr-promises__intro {
	position: sticky;
	top: calc(var(--kr-header-h) + 48px);
	display: grid;
	gap: var(--kr-s4);
}

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

.kr-promise {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: var(--kr-s5);
	align-items: center;
	padding: var(--kr-s5);
	border-bottom: 1px solid var(--kr-line);
	text-decoration: none;
	isolation: isolate;
	transition: color var(--kr-t-ui) ease;
}

.kr-promise::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--kr-ink);
	scale: 1 0;
	transform-origin: bottom;
	transition: scale 320ms var(--kr-ease-out);
}

.kr-promise__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid currentColor;
}

.kr-promise__icon .kr-ms {
	font-size: 36px;
	font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40;
}

.kr-promise strong {
	display: block;
	font-size: clamp(1.125rem, 1.7vw, 1.5rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.kr-promise__text span {
	font-size: 0.9375rem;
	color: var(--kr-muted);
	transition: color var(--kr-t-ui) ease;
}

.kr-promise__link-label {
	display: inline-block;
	margin-top: var(--kr-s2);
}

.kr-promise__go {
	font-size: 28px;
	transition: translate var(--kr-t-ui) var(--kr-ease-out);
}

/* SSR: element bez adresu (pole item_N_url puste) jest zwykłym blokiem <div>, więc stan najechania i fokusu dotyczy tylko odsyłacza */
@media (hover: hover) and (pointer: fine) {
	a.kr-promise:hover {
		color: var(--kr-paper);
	}

	a.kr-promise:hover::before {
		scale: 1 1;
	}

	a.kr-promise:hover .kr-promise__text span {
		color: rgb(255 255 255 / 72%);
	}

	a.kr-promise:hover .kr-promise__go {
		translate: 6px 0;
	}
}

a.kr-promise:focus-visible {
	color: var(--kr-paper);
}

a.kr-promise:focus-visible::before {
	scale: 1 1;
}

a.kr-promise:focus-visible .kr-promise__text span {
	color: rgb(255 255 255 / 72%);
}

@media (max-width: 991px) {
	.kr-promises__grid {
		grid-template-columns: 1fr;
		gap: var(--kr-s6);
	}

	.kr-promises__intro {
		position: static;
	}
}

@media (max-width: 575px) {
	.kr-promise {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		gap: var(--kr-s3);
		padding: var(--kr-s4) var(--kr-s3);
	}

	.kr-promise__icon {
		width: 56px;
		height: 56px;
	}

	.kr-promise__icon .kr-ms {
		font-size: 28px;
	}
}
/* =========================================================
   5. Heritage — scrubbed text reveal
   ========================================================= */

.kr-heritage {
	padding-block: clamp(120px, 16vw, 260px);
	/* the lamp around the mark is larger than the section */
	overflow: clip;
}

.kr-heritage__image {
	display: block;
	width: min(100%, 60rem);
	max-height: min(60vh, 40rem);
	height: auto;
	object-fit: contain;
	margin-block-end: var(--kr-s8);
}

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

.kr-heritage__text {
	max-width: 1180px;
	font-size: clamp(1.75rem, 3.7vw, 3.75rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.14;
	text-wrap: pretty;
}

.kr-heritage__text .kr-w {
	display: inline-block;
	white-space: pre;
}

/* The mark closes the statement. It is lit by the same scroll that reveals the words: dim, a band of light
   crosses it, then it stands white with a glow; a pointer-following lamp warms it further.
   Without scripting or with reduced motion it is simply lit (--lit: 1). */
@property --kr-spot {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --kr-mx {
	syntax: "<length-percentage>";
	inherits: true;
	initial-value: 50%;
}

@property --kr-my {
	syntax: "<length-percentage>";
	inherits: true;
	initial-value: 50%;
}

.kr-heritage__sign {
	--kr-lit: 1;
	--kr-sweep: 150;
	position: relative;
	width: min(100%, 1040px);
	margin-top: var(--kr-s8);
	transition: --kr-spot 500ms var(--kr-ease-out), --kr-mx 200ms var(--kr-ease-out), --kr-my 200ms var(--kr-ease-out);
}

.kr-heritage__sign::before {
	content: "";
	position: absolute;
	inset: -160px;
	background: radial-gradient(circle 440px at calc(var(--kr-mx) + 160px) calc(var(--kr-my) + 160px), rgb(255 255 255 / calc(var(--kr-spot) * 0.1)), transparent 72%);
	pointer-events: none;
}

.kr-heritage__glow {
	filter: drop-shadow(0 0 calc(var(--kr-lit) * 34px) rgb(255 255 255 / calc(var(--kr-lit) * 0.3)));
}

.kr-heritage__logo {
	width: 100%;
	aspect-ratio: 521 / 121;
	/* SSR: logo z istniejącego zasobu aplikacji (ten sam plik co mockup/assets/img/kuck-logo.webp, suma md5 zgodna), bez kopii w images/redesign */
	-webkit-mask: url(/assets/kuck_shop/images/kuck-logo.webp) center / contain no-repeat;
	mask: url(/assets/kuck_shop/images/kuck-logo.webp) center / contain no-repeat;
	background:
		radial-gradient(circle 230px at var(--kr-mx) var(--kr-my), rgb(255 255 255 / var(--kr-spot)) 0%, transparent 72%),
		linear-gradient(105deg, transparent calc(var(--kr-sweep) * 1% - 14%), #fff calc(var(--kr-sweep) * 1%), transparent calc(var(--kr-sweep) * 1% + 14%)),
		rgb(255 255 255 / calc(0.1 + var(--kr-lit) * 0.84));
}

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

/* =========================================================
   6. Salons — sticky title, scaling photographs
   ========================================================= */

.kr-salons {
	background: var(--kr-stone);
}

.kr-salons__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--kr-s8);
	align-items: start;
}

.kr-salons__intro {
	position: sticky;
	top: calc(var(--kr-header-h) + 48px);
	display: grid;
	gap: var(--kr-s5);
}

.kr-salons__intro .kr-lead {
	max-width: 36ch;
}

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

.kr-salons__list {
	display: grid;
	gap: clamp(72px, 9vw, 140px);
}

.kr-salon {
	display: grid;
	gap: var(--kr-s5);
}

.kr-salon__photo {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--kr-stone-deep);
}

.kr-salon__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: scale 900ms var(--kr-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.kr-salon:hover .kr-salon__photo img {
		scale: 1.04;
	}
}

.kr-salon h3 {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 400;
	letter-spacing: -0.02em;
}

.kr-salon__info {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: var(--kr-s4) var(--kr-s6);
	font-size: 0.9375rem;
}

.kr-salon__info > div {
	display: grid;
	gap: var(--kr-s2);
	align-content: start;
}

.kr-salon__row {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--kr-s3);
	align-items: start;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.kr-salon__row .kr-ms {
	font-size: 22px;
	color: var(--kr-muted);
}

@media (hover: hover) and (pointer: fine) {
	a.kr-salon__row:hover {
		text-decoration: underline;
	}
}

@media (max-width: 991px) {
	.kr-salons__grid {
		grid-template-columns: 1fr;
		gap: var(--kr-s7);
	}

	.kr-salons__intro {
		position: static;
	}

	.kr-salon__info {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   7. Service — dark panel with contact, timeline with icons, tool-grid of services
   ========================================================= */

.kr-service__top {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.kr-service__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-content: start;
	gap: var(--kr-s5);
	padding: var(--kr-section-y) var(--kr-s8) var(--kr-section-y) max(var(--kr-gutter), calc((100vw - var(--kr-container)) / 2));
	background: var(--kr-ink);
	color: var(--kr-paper);
}

.kr-service__panel .kr-lead {
	color: var(--kr-muted-on-dark);
}

/* bezel in the corner: sixty minute marks and a hand that ticks once a second (decoration only) */
.kr-service__dial {
	position: absolute;
	z-index: -1;
	right: -330px;
	bottom: -330px;
	width: 608px;
	color: rgb(255 255 255 / 22%);
	pointer-events: none;
}

.kr-service__dial svg {
	display: block;
	width: 100%;
	height: auto;
}

.kr-dial__hand {
	transform-origin: 300px 300px;
	animation: kr-dial-tick 60s steps(60) infinite;
}

@keyframes kr-dial-tick {
	to {
		rotate: 360deg;
	}
}

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

.kr-service__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kr-s3);
}

.kr-service__cta .kr-btn--outline-dark {
	border-color: rgb(255 255 255 / 55%);
	color: var(--kr-paper);
}

@media (hover: hover) and (pointer: fine) {
	.kr-service__cta .kr-btn--outline-dark:hover {
		background: var(--kr-paper) !important;
		border-color: var(--kr-paper) !important;
		color: var(--kr-ink);
	}
}

.kr-service__info {
	margin-top: var(--kr-s4);
	border-top: 1px solid var(--kr-line-on-dark);
}

.kr-service__info li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: var(--kr-s4);
	align-items: start;
	padding: var(--kr-s4) 0;
	border-bottom: 1px solid var(--kr-line-on-dark);
	font-size: 0.9375rem;
}

.kr-service__info .kr-ms {
	font-size: 28px;
	color: var(--kr-muted-on-dark);
}

.kr-service__info small {
	display: block;
	margin-bottom: 2px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kr-muted-on-dark);
}

.kr-service__info a {
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

/* right column: white, one switch, one height whichever tab is open */
.kr-service__main {
	--kr-p-dir: 1;
	display: grid;
	align-content: start;
	gap: var(--kr-s6);
	padding: var(--kr-section-y) max(var(--kr-gutter), calc((100vw - var(--kr-container)) / 2)) var(--kr-section-y) var(--kr-s8);
	background: var(--kr-paper);
}

.kr-service__panels {
	display: grid;
	/* the hidden panel waits 24 px to the side; that must not widen the page on a phone */
	overflow-x: clip;
}

.kr-svc-panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	translate: calc(var(--kr-p-dir) * 24px) 0;
	transition: opacity 160ms var(--kr-ease-out), translate 160ms var(--kr-ease-out), visibility 0s linear 160ms;
}

.kr-svc-panel.is-active {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: opacity 360ms var(--kr-ease-out) 140ms, translate 440ms var(--kr-ease-out) 140ms, visibility 0s;
}

/* the five steps: the icon fills when its step is reached, the line runs on to the next one */
.kr-timeline {
	display: grid;
}

.kr-timeline li {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--kr-s5);
	padding-bottom: var(--kr-s6);
}

.kr-timeline li:last-child {
	padding-bottom: 0;
}

.kr-timeline__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--kr-ink);
	background: var(--kr-paper);
	transition: background-color 300ms var(--kr-ease-out), color 300ms var(--kr-ease-out), scale 300ms var(--kr-ease-out);
}

.kr-timeline__icon .kr-ms {
	font-size: 30px;
}

.kr-timeline li::before,
.kr-timeline li::after {
	content: "";
	position: absolute;
	left: 31px;
	top: 64px;
	bottom: 0;
	width: 1px;
	background: var(--kr-line);
}

.kr-timeline li::after {
	background: var(--kr-ink);
	scale: 1 0;
	transform-origin: top;
	transition: scale 240ms var(--kr-ease-out);
}

.kr-timeline li.is-in::after {
	scale: 1 1;
}

.kr-timeline li.is-in .kr-timeline__icon {
	background: var(--kr-ink);
	color: var(--kr-paper);
}

.kr-timeline li:last-child::before,
.kr-timeline li:last-child::after {
	display: none;
}

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

.kr-timeline h3 {
	margin: 2px 0 4px;
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.kr-timeline p {
	max-width: 46ch;
	color: var(--kr-muted);
}

/* the nine services: the authorised-service line leads, wide and in ink; eight rows below, two by two */
.kr-svc-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--kr-s7);
	border-top: 1px solid var(--kr-line-strong);
}

.kr-svc {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: var(--kr-s4);
	align-items: start;
	padding-block: clamp(18px, 1.8vw, 26px);
	border-bottom: 1px solid var(--kr-line);
	transition: opacity 220ms var(--kr-ease-out);
}

.kr-svc__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--kr-ink);
	transition: background-color 220ms var(--kr-ease-out), color 220ms var(--kr-ease-out), scale var(--kr-t-ui) var(--kr-ease-out);
}

.kr-svc__icon .kr-ms {
	font-size: 28px;
	font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40;
}

.kr-svc h3 {
	margin-bottom: 4px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
}

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

.kr-svc--feature {
	grid-column: 1 / -1;
	padding: var(--kr-s5);
	border-bottom: 0;
	background: var(--kr-ink);
	color: var(--kr-paper);
}

.kr-svc--feature .kr-svc__icon {
	border-color: var(--kr-paper);
}

.kr-svc--feature h3 {
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -0.02em;
}

.kr-svc--feature p {
	color: var(--kr-muted-on-dark);
}

.kr-svc-panel.is-active .kr-svc {
	animation: kr-mega-in 480ms var(--kr-ease-out) both;
	animation-delay: calc(160ms + var(--kr-i, 0) * 45ms);
}

/* SSR: indeks opóźnienia animacji wynika z pozycji w liście (mockup: style="--i:n"); wyróżniona usługa jest zawsze pierwsza */
.kr-svc-list > :nth-child(2) { --kr-i: 1; }
.kr-svc-list > :nth-child(3) { --kr-i: 2; }
.kr-svc-list > :nth-child(4) { --kr-i: 3; }
.kr-svc-list > :nth-child(5) { --kr-i: 4; }
.kr-svc-list > :nth-child(6) { --kr-i: 5; }
.kr-svc-list > :nth-child(7) { --kr-i: 6; }
.kr-svc-list > :nth-child(8) { --kr-i: 7; }
.kr-svc-list > :nth-child(9) { --kr-i: 8; }

/* Hover inks the active icon while every service keeps its text contrast. */
@media (hover: hover) and (pointer: fine) {
	.kr-svc:not(.kr-svc--feature):hover .kr-svc__icon {
		background: var(--kr-ink);
		color: var(--kr-paper);
		scale: 1.04;
	}
}

@media (max-width: 991px) {
	.kr-service__top {
		grid-template-columns: 1fr;
	}

	.kr-service__panel {
		padding: var(--kr-s8) var(--kr-gutter);
	}

	.kr-service__main {
		padding: var(--kr-s8) var(--kr-gutter);
	}
}

@media (max-width: 575px) {
	.kr-svc-list {
		grid-template-columns: 1fr;
	}

	.kr-timeline li {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: var(--kr-s4);
	}

	.kr-timeline__icon {
		width: 52px;
		height: 52px;
	}

	.kr-timeline li::before,
	.kr-timeline li::after {
		left: 25px;
		top: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kr-svc-panel,
	.kr-svc-panel.is-active {
		translate: 0 0;
	}

	.kr-svc-panel.is-active .kr-svc {
		animation: none;
	}
}

/* =========================================================
   8. Brands marquee
   ========================================================= */

.kr-brands {
	background: var(--kr-stone);
	overflow: hidden;
}

.kr-brands__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--kr-s5);
	margin-bottom: var(--kr-s7);
}

.kr-brands__head .kr-h-section {
	max-width: 18ch;
}

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

.kr-marquee {
	display: flex;
	width: max-content;
	animation: kr-marquee 90s linear infinite;
}

.kr-marquee[data-paused="true"],
.kr-marquee:focus-within {
	animation-play-state: paused;
}

.kr-marquee__set {
	display: flex;
	flex: none;
	gap: var(--kr-s3);
	padding-right: var(--kr-s3);
}

.kr-marquee a {
	display: grid;
	place-items: center;
	text-decoration: none;
	width: clamp(170px, 14vw, 220px);
	aspect-ratio: 2 / 1;
	background: #fff;
	filter: grayscale(1) contrast(1.05);
	opacity: 0.8;
	transition: filter var(--kr-t-ui) ease, opacity var(--kr-t-ui) ease;
}

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

/* SSR: marka bez logotypu (pole brand_N_logo puste) dostaje kafelek z nazwą; mockup używał obrazów z kuck.pl, których wdrożenie nie może hotlinkować (BL-014) */
.kr-marquee__name {
	padding-inline: var(--kr-s3);
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kr-ink);
}

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

@keyframes kr-marquee {
	to {
		translate: -50% 0;
	}
}

/* =========================================================
   9. News — editorial carousel
   ========================================================= */

.kr-news__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--kr-s5);
	margin-bottom: var(--kr-s7);
}

.kr-news__stage {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--kr-s8);
	align-items: center;
}

.kr-news__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--kr-stone-deep);
}

.kr-news__media-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.kr-news__media-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	scale: 1.05;
	transition: opacity 560ms ease, scale 900ms var(--kr-ease-out);
}

.kr-news__media-frame img.is-current {
	opacity: 1;
	scale: 1;
}

.kr-news__peek {
	position: absolute;
	right: calc(-1 * var(--kr-s6));
	bottom: calc(-1 * var(--kr-s6));
	width: 34%;
	aspect-ratio: 4 / 3;
	border: 8px solid var(--kr-paper);
	background: var(--kr-stone-deep);
	overflow: hidden;
}

.kr-news__peek img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kr-news__copy {
	display: grid;
	gap: var(--kr-s5);
	align-content: center;
}

.kr-news__date {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kr-muted);
}

.kr-news__title {
	font-size: clamp(1.625rem, 2.7vw, 2.5rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.12;
	text-wrap: balance;
}

.kr-news__text {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--kr-muted);
}

.kr-news__copy-inner {
	display: grid;
	gap: var(--kr-s5);
	transition: opacity 200ms ease, translate 260ms var(--kr-ease-out);
}

.kr-news__copy-inner.is-swapping {
	opacity: 0;
	translate: 0 6px;
}

.kr-news__copy-inner .kr-text-link {
	justify-self: start;
}

/* SSR: wszystkie wpisy są w HTML, widoczny jest jeden (reszta hidden); kr-home.js przełącza je tak, jak mockup podmieniał tekst */
.kr-news__empty {
	color: var(--kr-muted);
}

.kr-news__nav {
	display: flex;
	align-items: center;
	gap: var(--kr-s2);
	margin-top: var(--kr-s4);
}

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

@media (max-width: 991px) {
	.kr-news__stage {
		grid-template-columns: 1fr;
		gap: var(--kr-s7);
	}

	.kr-news__peek {
		right: var(--kr-s3);
		bottom: calc(-1 * var(--kr-s5));
		width: 38%;
	}
}

/* =========================================================
   10. Newsletter — closing call to action
   ========================================================= */

.kr-cta {
	padding-block: clamp(100px, 14vw, 220px);
	background: radial-gradient(60% 80% at 85% 20%, #232527 0%, var(--kr-ink) 65%);
}

.kr-cta__grid {
	display: grid;
	gap: var(--kr-s8);
}

.kr-cta__title {
	max-width: 1240px;
	font-size: clamp(2.125rem, 5.1vw, 5.25rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1.04;
	text-wrap: balance;
}

.kr-cta__row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--kr-s8);
	align-items: start;
	padding-top: var(--kr-s7);
	border-top: 1px solid var(--kr-line-on-dark);
}

.kr-cta__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--kr-s4);
	align-items: end;
}

/* SSR: formularz pochodzi z makra newsletter_signup (jedno miejsce na komunikaty: kr-newsletter-status, wypełniane przez kuck_shop.bundle.js) */
.kr-cta__form .kr-field--consent,
.kr-cta__form .kr-newsletter-status {
	grid-column: 1 / -1;
}

.kr-cta__form .kr-btn {
	min-height: 56px;
}

/* fields, checkbox and error on the dark newsletter: the generic .is-dark rules in components.css */

.kr-cta .kr-btn[data-state="busy"] {
	opacity: 0.7;
	pointer-events: none;
}

.kr-cta__done {
	display: none;
	gap: var(--kr-s3);
	padding: var(--kr-s6);
	border: 1px solid var(--kr-line-on-dark);
}

.kr-cta__done p {
	display: flex;
	align-items: center;
	gap: var(--kr-s3);
	font-size: 1.375rem;
	font-weight: 500;
}

.kr-cta.is-done .kr-cta__done {
	display: grid;
}

.kr-cta.is-done form {
	display: none;
}

@media (max-width: 991px) {
	.kr-cta__row {
		grid-template-columns: 1fr;
		gap: var(--kr-s6);
	}
}

@media (max-width: 575px) {
	.kr-cta__form {
		grid-template-columns: 1fr;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.kr-marquee {
		animation: none;
		flex-wrap: wrap;
		width: auto;
	}

	.kr-marquee__set[aria-hidden="true"] {
		display: none;
	}

	.kr-acc__panel,
	.kr-acc__panel img,
	.kr-acc__body {
		transition-duration: 1ms !important;
	}

	.kr-news__media-frame img,
	.kr-news__copy-inner,
	.kr-shelf .kr-rail__track {
		transition-property: opacity !important;
		translate: 0 0 !important;
	}

	/* uzupełnienie względem mockupu (R4): zmiana slajdu hero zmienia tylko przezroczystość, bez przesunięcia i skali zdjęcia, tytułu, tekstu, przycisków i banera */
	.kr-hero .kr-slide .kr-slide__watch,
	.kr-hero .kr-slide.is-active .kr-slide__watch,
	.kr-hero .kr-slide .kr-slide__title,
	.kr-hero .kr-slide .kr-slide__text,
	.kr-hero .kr-slide .kr-slide__cta,
	.kr-hero .kr-slide.is-active .kr-slide__title,
	.kr-hero .kr-slide.is-active .kr-slide__text,
	.kr-hero .kr-slide.is-active .kr-slide__cta,
	.kr-hero .kr-slide__banner img,
	.kr-hero .kr-slide.is-active .kr-slide__banner img {
		transition-property: opacity;
		transition-duration: 200ms;
		transition-delay: 0s;
		scale: 1;
	}

	.kr-hero .kr-slide .kr-slide__title,
	.kr-hero .kr-slide .kr-slide__text,
	.kr-hero .kr-slide .kr-slide__cta {
		translate: 0 0;
	}
}

/* ---------- HOME integration tail: overlay/home.css BEGIN ---------- */
/* HOME-only integration fixes. Append with build-home-css.mjs after the preserved SSR port.
   These corrections deliberately leave the mockup as a visual reference and do not change campaign assets or copy. */

/* Real catalogue packshots have different aspect ratios (not the square demo
   fixtures). Bound both axes so a narrow watch cannot grow through the copy. */
.kr-slide__watch {
	height: min(82svh, 820px);
	object-fit: contain;
}

/* An entry panel is itself a link: the global Frappe/link hover reset must not
   make its inherited heading/CTA dark against the dark photographic overlay. */
.kr-page a.kr-acc__panel:is(:hover, :focus) {
	color: var(--kr-paper);
}

@media (max-width: 991px) {
	.kr-slide__watch {
		top: 360px;
		bottom: 84px;
		height: calc(100% - 444px);
		object-fit: contain;
	}
}

@media (max-width: 359px) {
	.kr-slide__watch {
		top: 415px;
		height: calc(100% - 499px);
	}
}

/* The artwork-only hero uses dark ink for its controls on the stone bar. The shared dark-tone hover rule also
   sets the icon to ink; once the hover fill is ink too, the arrow disappears. Keep the icon paper-colored. */
@media (hover: hover) and (pointer: fine) {
	.kr-hero[data-kr-banner-only] .kr-round-btn:not([disabled]):not([aria-disabled="true"]):hover {
		color: var(--kr-paper);
	}
}

/* Keep the CMS lead intact, but give it a bounded measure on its own row so it cannot squeeze the section
   title or the archive link. The fallback break only applies to unusually long unbroken content. */
.kr-news__head .kr-h-section {
	order: 1;
	flex: 1 1 28rem;
	min-width: 0;
}

.kr-news__head .kr-text-link {
	order: 2;
	flex: 0 0 auto;
	margin-left: auto;
}

.kr-news__head .kr-lead {
	order: 3;
	flex: 0 1 100%;
	min-width: 0;
	max-width: 66ch;
	overflow-wrap: anywhere;
}

@media (max-width: 575px) {
	.kr-news__head .kr-h-section {
		flex-basis: 100%;
	}

	.kr-news__head .kr-text-link {
		margin-left: 0;
	}
}

/* CMS descriptions are spans next to the title in the template; give the description and optional link label
   real line boxes and breathing room instead of relying on whitespace in stored CMS text. */
.kr-promise__text > span {
	display: block;
	margin-top: var(--kr-s1);
}

.kr-promise__text > .kr-promise__link-label {
	margin-top: var(--kr-s2);
}

/* CMS shelf copy is additional to the mockup's tabs. Keep the controls on the
   first row, in DOM order, and preserve the editor's paragraph breaks below. */
.kr-shelf__lead {
	flex: 0 0 100%;
	min-width: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* The optional category lead belongs with the heading, with space before images. */
.kr-entry__head:has(+ .kr-lead) {
	margin-bottom: var(--kr-s3);
}

.kr-entry__head + .kr-lead {
	max-width: 66ch;
	margin-bottom: var(--kr-s7);
}

/* An intrinsic logo ratio must not expand its grid tile. Keep the mockup's
   2:1 dimensions with a definite height, including for the taller Festina logo. */
.kr-brands .kr-marquee a {
	height: clamp(85px, 7vw, 110px);
}

.kr-brands .kr-marquee img {
	min-width: 0;
	min-height: 0;
	padding: var(--kr-s4);
}

/* Home feedback: a compact signup and a proportional native checkbox, isolated
   from Frappe's 14px checkbox reset. The whole consent label stays clickable. */
.kr-cta {
	padding-block: clamp(48px, 6vw, 96px);
}

.kr-cta__grid {
	gap: var(--kr-s6);
}

.kr-cta__title {
	font-size: clamp(2rem, 3.5vw, 3.5rem);
	line-height: 1.12;
}

.kr-cta .kr-check {
	grid-template-columns: 22px minmax(0, 1fr);
	min-height: 44px;
}

.kr-cta .kr-check input[type="checkbox"] {
	appearance: auto;
	width: 22px;
	min-width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 0;
	color-scheme: dark;
	accent-color: var(--kr-paper);
}

.kr-cta .kr-check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--kr-paper);
	outline-offset: 3px;
}

.kr-heritage__sign {
	width: min(72%, 560px);
}

/* Only the visible service list contributes to the height of the section. */
.kr-svc-panel:not(.is-active) {
	display: none;
}

.kr-news__title a,
.kr-news__title a:is(:hover, :focus) {
	color: inherit;
}

.kr-news__title a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.kr-news__media-frame:focus-visible {
	outline: 3px solid var(--kr-ink);
	outline-offset: -4px;
}

/* Real salon emails and model identifiers must not widen their grid tracks. */
.kr-salon__info {
	grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}

.kr-salon__row {
	grid-template-columns: 24px minmax(0, 1fr);
}

.kr-salon__row,
.kr-promise__text,
.kr-news__title {
	overflow-wrap: anywhere;
}

@media (max-width: 991px) {
	.kr-salon__info {
		grid-template-columns: 1fr;
	}
}

/* This sheet is loaded only on Home. Keep the existing consent control after
   the footer in document flow, so it no longer obscures tabs, images or copy. */
.kr-consent__reopen {
	position: static;
	margin: var(--kr-s4) var(--kr-gutter);
}

/* Frequent tab changes should reveal their content immediately. The timeline
   retains its first-view animation; changing the service list needs no stagger. */
.kr-svc-panel,
.kr-svc-panel.is-active {
	translate: none;
	transition: opacity 150ms ease-out, visibility 0s;
}

.kr-svc-panel.is-active .kr-svc {
	animation: none;
}

/* Autoplay needs a visible pause control on touch screens too. Tabs and swipe
   still provide slide navigation, so only the redundant arrow pair is hidden. */
@media (max-width: 991px) {
	.kr-hero__nav {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--kr-s3);
	}

	.kr-hero__ctrl {
		display: flex;
	}

	.kr-hero__ctrl [data-kr-hero-prev],
	.kr-hero__ctrl [data-kr-hero-next] {
		display: none;
	}

	.kr-hero__ctrl [data-kr-hero-pause] {
		width: 44px;
		height: 44px;
	}
}

/* Also applies when the system preference changes while this page is open.
   Inline scroll animation values must not leave copy dim or photographs scaled. */
@media (prefers-reduced-motion: reduce) {
	.kr-heritage__text .kr-w,
	.kr-salon__photo {
		opacity: 1 !important;
	}

	.kr-salon__photo,
	.kr-salon__photo img,
	.kr-svc__icon {
		scale: 1 !important;
	}

	.kr-heritage__sign {
		--kr-lit: 1 !important;
		--kr-spot: 0 !important;
	}

	.kr-promise::before,
	.kr-promise__go,
	.kr-salon__photo img,
	.kr-timeline__icon,
	.kr-timeline li::after,
	.kr-svc__icon {
		transition: none;
	}
}

/* ---------- HOME integration tail: overlay/home.css END ---------- */