/**
 * Noxiy Child - main custom styles.
 *
 * Style sekcji „WOW" (komponenty .kp-*) + lekki globalny polish reskinu (kierunek C:
 * grafit + żar). Ładowane po brand-tokens.css (handle: noxiy-child-main).
 * Używa tokenów --kp-* z brand-tokens.css.
 */

/* =========================================================================
 * 0) Globalny polish (delikatny - nie łamie układu Elementora)
 * ====================================================================== */

::selection {
	background: var(--kp-accent);
	color: #fff;
}

/* Dostępność: czytelny focus w kolorze marki. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
.kp-btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--kp-accent);
	outline-offset: 2px;
}

/* Dostępność: skip-link „Przejdź do treści" (wstrzykiwany w wp_body_open, inc/a11y.php).
 * Ukryty wizualnie, pojawia się dopiero na :focus (nawigacja klawiaturą). */
.kp-skip-link {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 1000000; /* nad sticky nagłówkiem motywu (z-index 999999) */
	padding: 12px 20px;
	background: var(--kp-ink);
	color: #fff;
	font-family: var(--kp-font-heading);
	font-weight: 700;
	font-size: var(--kp-fs-sm);
	text-decoration: none;
	border-radius: var(--kp-radius-sm);
	box-shadow: var(--kp-shadow);
	transition: top 160ms ease;
}
.kp-skip-link:focus {
	top: 8px;
	outline: 3px solid var(--kp-accent);
	outline-offset: 2px;
}

/* Subtelny „lift" na przyciskach motywu/Elementora (spójny z kierunkiem C). */
.elementor-button,
.wp-block-button__link {
	transition: transform var(--kp-transition), box-shadow var(--kp-transition);
}
.elementor-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(255, 107, 44, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* P0: klip poziomego przepełnienia na poziomie root.
 * Off-canvas menu mobilne motywu (.header__area-menubar-right-sidebar-popup,
 * szablon Elementor #551) jest zaparkowane tuż za prawą krawędzią i leży POZA
 * .kp-home, więc tamtejszy overflow-x:hidden go nie przycina → ~15px scrolla na
 * ~768px. `clip` przycina bez tworzenia kontekstu przewijania (nie psuje
 * position:sticky nagłówka ani lightboxa). */
html,
body {
	overflow-x: clip;
}
/* UWAGA: sam `html{overflow-x:clip}` nie wystarcza na mobilnym Safari/Chrome
 * (znany quirk iOS) i nie przycina elementów `position:fixed` (np. off-canvas menu
 * motywu, które jest fixed + 460px). Dlatego klip także na `body`. `clip` (nie `hidden`)
 * nie tworzy kontekstu przewijania, więc nie psuje sticky nagłówka ani lightboxa. */

/* =========================================================================
 * 1) Przyciski .kp-btn
 * ====================================================================== */

.kp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-sm);
	font-weight: var(--kp-fw-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--kp-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--kp-transition), box-shadow var(--kp-transition),
		background var(--kp-transition), color var(--kp-transition), border-color var(--kp-transition);
}

.kp-btn--accent {
	background: var(--kp-gradient-accent);
	color: #fff;
	box-shadow: 0 10px 24px rgba(255, 107, 44, 0.30);
}
.kp-btn--accent:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(255, 107, 44, 0.42);
	color: #fff;
}

.kp-btn--ghost {
	background: transparent;
	color: var(--kp-ink);
	border-color: var(--kp-line);
}
.kp-btn--ghost:hover {
	border-color: var(--kp-accent);
	color: var(--kp-accent);
	transform: translateY(-2px);
}

/* Warianty na ciemnym tle (grafitowe pasy). */
.kp-on-dark .kp-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}

/* =========================================================================
 * 1b) Ikony (inline SVG, kolor przez currentColor)
 * ====================================================================== */

.kp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.kp-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.kp-service__ico {
	width: 56px;
	height: 56px;
	padding: 13px;
	color: var(--kp-accent);
	background: var(--kp-accent-soft);
	border-radius: var(--kp-radius);
	margin-bottom: var(--kp-space-5);
}
.kp-why__ico {
	width: 46px;
	height: 46px;
	padding: 10px;
	color: #fff;
	background: var(--kp-gradient-accent);
	border-radius: 12px;
	margin-bottom: var(--kp-space-4);
	box-shadow: 0 8px 20px rgba(255, 107, 44, 0.30);
}

/* =========================================================================
 * 2) [kp_marki] - pasek logotypów marek
 * ====================================================================== */

.kp-marki {
	text-align: center;
}
.kp-marki__title {
	font-family: var(--kp-font-heading);
	font-weight: var(--kp-fw-semibold);
	font-size: var(--kp-fs-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kp-muted);
	margin: 0 0 var(--kp-space-6);
}
.kp-marki__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5vw, 64px);
}
.kp-marki__item {
	margin: 0;
}
.kp-marki__item img {
	height: clamp(28px, 4vw, 44px);
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter var(--kp-transition), opacity var(--kp-transition), transform var(--kp-transition);
}
.kp-marki__item img:hover {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-3px);
}

/* =========================================================================
 * 3) [kp_realizacje] - galeria
 * ====================================================================== */

.kp-gallery {
	display: grid;
	grid-template-columns: repeat(var(--kp-gallery-cols, 3), 1fr);
	gap: var(--kp-space-5);
}
.kp-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--kp-radius);
	box-shadow: var(--kp-shadow-sm);
	aspect-ratio: 4 / 3;
}
.kp-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(0.2, 0, 0.2, 1);
}
.kp-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none; /* nie blokuj kliknięcia w link/zoom */
	background: linear-gradient(180deg, transparent 55%, rgba(201, 73, 15, 0.55) 100%);
	opacity: 0;
	transition: opacity var(--kp-transition);
}
.kp-gallery__item:hover img {
	transform: scale(1.06);
}
.kp-gallery__item:hover::after {
	opacity: 1;
}

/* Klikalny kafelek galerii - sygnał zoomu (lupa) + kursor. */
.kp-gallery--zoom .kp-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}
.kp-gallery--zoom .kp-gallery__item::before {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(18, 23, 29, 0.55) center / 18px 18px no-repeat;
	/* lupa (SVG inline, białe currentColor) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
	opacity: 0;
	transform: scale(0.8);
	transition: opacity var(--kp-transition), transform var(--kp-transition);
	pointer-events: none;
}
.kp-gallery--zoom .kp-gallery__item:hover::before,
.kp-gallery--zoom .kp-gallery__item:focus-within::before {
	opacity: 1;
	transform: scale(1);
}

/* -------------------------------------------------------------------------
 * Lightbox (galeria realizacji)
 * ---------------------------------------------------------------------- */
.kp-lightbox-open {
	overflow: hidden;
}
.kp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
}
.kp-lightbox[aria-hidden="false"] {
	display: flex;
}
.kp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 14, 18, 0.92);
	backdrop-filter: blur(2px);
}
.kp-lightbox__box {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: kp-lb-in 240ms cubic-bezier(0.2, 0, 0.2, 1);
}
.kp-lightbox__img {
	max-width: 92vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: var(--kp-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	display: block;
}
.kp-lightbox__cap {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--kp-fs-sm);
	text-align: center;
	max-width: 60ch;
}
.kp-lightbox__btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: rgba(18, 23, 29, 0.6);
	transition: background var(--kp-transition), transform var(--kp-transition);
	line-height: 1;
}
.kp-lightbox__btn:hover {
	background: var(--kp-accent);
}
.kp-lightbox__close {
	top: 18px;
	right: 18px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 28px;
}
.kp-lightbox__prev,
.kp-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 22px;
}
.kp-lightbox__prev:hover,
.kp-lightbox__next:hover {
	transform: translateY(-50%) scale(1.06);
}
.kp-lightbox__prev {
	left: 18px;
}
.kp-lightbox__next {
	right: 18px;
}
.kp-lightbox__btn[hidden] {
	display: none;
}
@keyframes kp-lb-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
@media (max-width: 560px) {
	.kp-lightbox__prev,
	.kp-lightbox__next {
		width: 44px;
		height: 44px;
	}
	.kp-lightbox__img {
		max-height: 70vh;
	}
}

/* Galeria certyfikatów - dokumenty w całości widoczne (contain) na białej karcie. */
.kp-certs .kp-gallery__item.kp-cert {
	aspect-ratio: 3 / 4;
	background: #fff;
	box-shadow: var(--kp-shadow-sm);
	border: 1px solid rgba(18, 23, 29, 0.08);
}
.kp-certs .kp-gallery__item.kp-cert img {
	object-fit: contain;
	padding: 10px;
	background: #fff;
	transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
}
.kp-certs .kp-gallery__item.kp-cert:hover img {
	transform: scale(1.03);
}
.kp-certs .kp-gallery__item.kp-cert::after {
	display: none; /* bez pomarańczowego gradientu na dokumentach */
}
@media (max-width: 680px) {
	.kp-certs {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.kp-note {
	margin-top: var(--kp-space-5);
	text-align: center;
	font-size: var(--kp-fs-sm);
	color: var(--kp-muted);
	font-style: italic;
}

/* =========================================================================
 * 4) [kp_uslugi] - karty usług
 * ====================================================================== */

.kp-services {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--kp-space-6);
}
.kp-service {
	position: relative;
	background: var(--kp-surface);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius-lg);
	padding: var(--kp-space-7);
	overflow: hidden;
	transition: transform var(--kp-transition), box-shadow var(--kp-transition), border-color var(--kp-transition);
}
.kp-service::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--kp-gradient-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
}
.kp-service:hover {
	transform: translateY(-6px);
	box-shadow: var(--kp-shadow-lg);
	border-color: transparent;
}
.kp-service:hover::before {
	transform: scaleX(1);
}
.kp-service__mark {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: var(--kp-radius);
	background: var(--kp-accent-soft);
	position: relative;
	margin-bottom: var(--kp-space-5);
}
.kp-service__mark::after {
	content: "";
	position: absolute;
	inset: 14px;
	border: 3px solid var(--kp-accent);
	border-radius: 4px;
}
.kp-service__title {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h3);
	color: var(--kp-ink);
	margin: 0 0 var(--kp-space-3);
}
.kp-service__desc {
	color: var(--kp-body);
	line-height: var(--kp-lh-body);
	margin: 0 0 var(--kp-space-6);
}
.kp-service__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kp-space-3);
}
/* Lista korzyści w karcie usługi (wypełnia „pustą" kartę treścią). */
.kp-service__list {
	list-style: none;
	margin: 0 0 var(--kp-space-5);
	padding: 0;
	display: grid;
	gap: 10px;
}
.kp-service__list li {
	position: relative;
	padding-left: 28px;
	color: var(--kp-body);
	font-size: var(--kp-fs-sm);
	line-height: 1.5;
}
.kp-service__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--kp-accent-soft);
	box-shadow: inset 0 0 0 2px var(--kp-accent);
}
.kp-service__list li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 7px;
	width: 5px;
	height: 3px;
	border-left: 2px solid var(--kp-accent);
	border-bottom: 2px solid var(--kp-accent);
	transform: rotate(-45deg);
}
.kp-service__price {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-sm);
	color: var(--kp-muted);
	margin: 0 0 var(--kp-space-5);
}
.kp-service__price strong {
	font-family: var(--kp-font-mono);
	color: var(--kp-accent);
	font-size: 1.3em;
	font-weight: var(--kp-fw-bold);
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
 * 5) [kp_kontakt] - NAP + mapa
 * ====================================================================== */

.kp-kontakt {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--kp-space-7);
	align-items: stretch;
}
.kp-kontakt__brand {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h2);
	color: var(--kp-ink);
	margin: 0 0 var(--kp-space-5);
}
.kp-kontakt__list {
	list-style: none;
	margin: 0 0 var(--kp-space-6);
	padding: 0;
}
.kp-kontakt__list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: var(--kp-space-4) 0;
	border-bottom: 1px solid var(--kp-line);
	color: var(--kp-body);
	line-height: var(--kp-lh-body);
}
.kp-kontakt__ico {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--kp-accent);
}
.kp-kontakt__list strong {
	display: block;
	color: var(--kp-ink);
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-sm);
	letter-spacing: 0.02em;
}
.kp-kontakt__list a {
	color: var(--kp-accent);
	text-decoration: none;
}
.kp-kontakt__list a:hover {
	text-decoration: underline;
}
.kp-kontakt__map {
	border-radius: var(--kp-radius-lg);
	overflow: hidden;
	box-shadow: var(--kp-shadow);
	min-height: 320px;
}
.kp-kontakt__map iframe {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
	display: block;
}

/* =========================================================================
 * 6) Reveal-on-scroll (JS dodaje .is-visible)
 * ====================================================================== */

/* FAIL-SAFE: treść ukrywamy do animacji TYLKO gdy działa JS (html.js ustawia
 * inline skrypt w <head>, patrz inc/head-meta.php). Bez JS / przed JS treść jest
 * od razu widoczna - koniec z „białymi dziurami" przy szybkim scrollu i w no-JS. */
html.js .kp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
	will-change: opacity, transform;
}
html.js .kp-reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* UWAGA: świadomie NIE wyciszamy reveal/stagger/hero/ken-burns przy
 * prefers-reduced-motion - decyzja klienta: animacje mają być widoczne zawsze,
 * niezależnie od ustawień systemu (świadomy kompromis dostępności). */

/* Stagger: dzieci .kp-reveal w kontenerze .kp-stagger wchodzą kolejno
 * (indeks --kp-i ustawia main.js). Karty siatki nie „wskakują” razem. */
.kp-stagger > .kp-reveal {
	transition-delay: calc(var(--kp-i, 0) * 70ms);
}

/* Utility: dane w monospace („odczyt z przyrządu”). */
.kp-mono {
	font-family: var(--kp-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* POLISA: klient chce animacje ZAWSZE, niezależnie od `prefers-reduced-motion`.
 * Gdyby cokolwiek (motyw/wtyczka/wstrzyknięty inline styl) zerowało czasy animacji
 * pod tym ustawieniem, tu je przywracamy - selektor klasowy + !important wygrywa
 * z globalnym resetem `* { ... !important }`. */
@media (prefers-reduced-motion: reduce) {
	.kp-reveal,
	.kp-stagger > .kp-reveal {
		transition-duration: 600ms !important;
		transition-property: opacity, transform !important;
	}
	.kp-hero__content > * {
		animation-duration: 700ms !important;
		animation-iteration-count: 1 !important;
	}
	.kp-hero__media img {
		animation-duration: 26s !important;
		animation-iteration-count: infinite !important;
	}
	.kp-thermo__fill {
		animation-duration: 3.6s !important;
		animation-iteration-count: infinite !important;
	}
	.kp-lightbox__box {
		animation-duration: 240ms !important;
		animation-iteration-count: 1 !important;
	}
	.kp-thermal-rail__fill {
		transition-duration: 120ms !important;
	}
}

/* =========================================================================
 * 6b) Treść podstron (renderowana w domyślnym szablonie strony)
 * ====================================================================== */

/* Hero podstron usług (Montaż / Serwis) - dwie kolumny: zdjęcie | tekst. */
.kp-service-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	margin-bottom: var(--kp-space-7);
}
.kp-service-hero__media {
	margin: 0;
}
.kp-service-hero__media .kp-hero-img {
	margin-bottom: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	height: auto;
}
.kp-service-hero__body {
	min-width: 0;
}
.kp-service-hero__body > :first-child {
	margin-top: 0;
}
@media (max-width: 860px) {
	.kp-service-hero {
		grid-template-columns: 1fr;
		gap: var(--kp-space-5);
	}
	.kp-service-hero__media .kp-hero-img {
		aspect-ratio: 16 / 9;
	}
}

.kp-hero-img {
	width: 100%;
	height: auto;
	border-radius: var(--kp-radius-lg);
	box-shadow: var(--kp-shadow);
	margin-bottom: var(--kp-space-6);
	display: block;
}
.kp-lead {
	font-size: var(--kp-fs-lead);
	color: var(--kp-body);
	line-height: var(--kp-lh-body);
}
.kp-checklist {
	list-style: none;
	margin: var(--kp-space-5) 0;
	padding: 0;
}
.kp-checklist li {
	position: relative;
	padding: 8px 0 8px 34px;
	color: var(--kp-body);
	line-height: var(--kp-lh-body);
}
.kp-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kp-accent-soft);
	box-shadow: inset 0 0 0 2px var(--kp-accent);
}
.kp-checklist li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 16px;
	width: 6px;
	height: 3px;
	border-left: 2px solid var(--kp-accent);
	border-bottom: 2px solid var(--kp-accent);
	transform: rotate(-45deg);
}
.kp-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kp-space-6);
	margin: var(--kp-space-6) 0;
}
.kp-stat {
	flex: 1 1 140px;
}
.kp-stat__num {
	font-family: var(--kp-font-mono);
	font-size: var(--kp-fs-h1);
	font-weight: var(--kp-fw-bold);
	color: var(--kp-accent);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.kp-stat__label {
	color: var(--kp-muted);
	font-size: var(--kp-fs-sm);
	margin-top: 6px;
}

/* =========================================================================
 * 8) STRONA GŁÓWNA (tpl-home-kp.php) - kierunek C: grafit + żar
 * ====================================================================== */

.kp-home {
	overflow-x: hidden;
}
.kp-container {
	max-width: var(--kp-container);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
}

.kp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--kp-font-mono);
	font-size: var(--kp-fs-sm);
	font-weight: var(--kp-fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kp-cool);
	margin-bottom: var(--kp-space-4);
}
/* SYGNATURA: mikro-skala termiczna (chłód→żar) przed każdą etykietą sekcji. */
.kp-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 4px;
	border-radius: var(--kp-radius-pill);
	background: var(--kp-gradient-thermal);
}
.kp-eyebrow--accent {
	color: var(--kp-accent);
}
.kp-hot {
	color: var(--kp-accent);
}
.kp-center {
	text-align: center;
	margin-top: var(--kp-space-6);
}

/* Sekcje jasne / alternatywne */
.kp-section {
	padding-block: var(--kp-section-y);
	background: var(--kp-surface);
}
.kp-section--alt {
	background: var(--kp-surface-2);
}
.kp-head {
	max-width: 720px;
	margin: 0 auto var(--kp-space-7);
	text-align: center;
}
.kp-head__title {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h2);
	color: var(--kp-ink);
	margin: 0 0 var(--kp-space-3);
}
.kp-head__lead {
	color: var(--kp-body);
	font-size: var(--kp-fs-lead);
	line-height: var(--kp-lh-body);
	margin: 0;
}

/* Pasy na ciemnym tle */
.kp-on-dark {
	color: #fff;
	background: var(--kp-gradient-hero);
}
.kp-on-dark .kp-head__title,
.kp-on-dark h1,
.kp-on-dark h2,
.kp-on-dark h3 {
	color: #fff;
}

/* HERO */
.kp-hero {
	position: relative;
	padding-block: clamp(72px, 10vw, 140px);
}
.kp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 80% at 85% 10%, rgba(255, 107, 44, 0.18), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
/* Drugi, chłodny refleks (błękit HVAC) - głębia sceny hero. */
.kp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(46% 60% at 10% 92%, rgba(18, 160, 196, 0.16), transparent 62%);
	pointer-events: none;
	z-index: 0;
}
.kp-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.kp-hero__title {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-display);
	line-height: var(--kp-lh-tight);
	font-weight: var(--kp-fw-extrabold);
	margin: 0 0 var(--kp-space-5);
}
.kp-hero__lead {
	font-size: var(--kp-fs-lead);
	line-height: var(--kp-lh-body);
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 var(--kp-space-6);
	max-width: 46ch;
}
.kp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kp-space-4);
	margin-bottom: var(--kp-space-6);
}
/* Pasek zaufania (nagrody) - wyraźniejszy „chip" zamiast luźnego wiersza. */
.kp-hero__badges {
	display: flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: var(--kp-space-4);
	padding: 10px 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--kp-radius-pill);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--kp-fs-sm);
	font-weight: var(--kp-fw-semibold);
}
.kp-hero__badges img {
	height: 48px;
	width: auto;
}
.kp-hero__reviews {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--kp-space-4);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--kp-fs-sm);
	font-weight: var(--kp-fw-semibold);
	text-decoration: none;
}
.kp-hero__reviews:hover {
	color: #fff;
}
.kp-hero__reviews .kp-icon {
	width: 20px;
	height: 20px;
	color: var(--kp-accent);
}

/* Zdjęcie hero - „framed" + subtelny ken-burns (premium, klipowany w ramce). */
.kp-hero__media {
	position: relative;
	border-radius: var(--kp-radius-lg);
	overflow: hidden;
	box-shadow: var(--kp-shadow-lg), 0 0 0 1px rgba(255, 107, 44, 0.14);
}
.kp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 107, 44, 0.12), transparent 42%);
	pointer-events: none;
	z-index: 1;
}
.kp-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: center;
	animation: kp-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes kp-kenburns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.05);
	}
}

/* Sekwencja wejścia hero - orkiestrowana na load (treść nad zakładką, nie scroll).
 * Kolejność: eyebrow → H1 → lead → CTA → badge → opinie → skala termiczna. */
.kp-hero__content > * {
	animation: kp-hero-in 700ms cubic-bezier(0.2, 0, 0.2, 1) both;
}
.kp-hero__content > :nth-child(1) { animation-delay: 80ms; }
.kp-hero__content > :nth-child(2) { animation-delay: 170ms; }
.kp-hero__content > :nth-child(3) { animation-delay: 260ms; }
.kp-hero__content > :nth-child(4) { animation-delay: 350ms; }
.kp-hero__content > :nth-child(5) { animation-delay: 440ms; }
.kp-hero__content > :nth-child(6) { animation-delay: 530ms; }
.kp-hero__content > :nth-child(7) { animation-delay: 620ms; }
@keyframes kp-hero-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* SYGNATURA (hero): skala termiczna chłód↔żar - teza marki „kontrola temperatury”.
 * Dekoracyjna (aria-hidden), spina obie półkule marki w jednym elemencie. */
.kp-thermo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: var(--kp-space-5);
	max-width: 360px;
}
.kp-thermo__track {
	position: relative;
	flex: 1 1 auto;
	height: 6px;
	border-radius: var(--kp-radius-pill);
	overflow: hidden;
	/* Wygaszone tło pokazuje oba bieguny cały czas: żar (lewo) → chłód (prawo). */
	background: linear-gradient(90deg, rgba(255, 107, 44, 0.30) 0%, rgba(18, 160, 196, 0.30) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* Wypełnienie zapełnia się od lewej (żar) do prawej (chłód) i płynnie zapętla
 * (reset przy opacity:0 = bez „skoku”). Metafora: przejmujemy żar → dajemy chłód. */
.kp-thermo__fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform-origin: left center;
	background: linear-gradient(90deg, #FF6B2C 0%, #F2B441 38%, #4FB8D4 78%, #12A0C4 100%);
	animation: kp-thermo-fill 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes kp-thermo-fill {
	0%   { transform: scaleX(0); opacity: 0; }
	10%  { transform: scaleX(0.05); opacity: 1; }
	55%  { transform: scaleX(1); opacity: 1; }
	80%  { transform: scaleX(1); opacity: 1; }
	95%  { transform: scaleX(1); opacity: 0; }
	100% { transform: scaleX(0); opacity: 0; }
}
/* Świadomie NIE wyciszamy tego paska przy prefers-reduced-motion: to drobna, wolna,
 * nieprzewijająca mikro-animacja marki, o którą prosił klient - ma żyć zawsze. */
.kp-thermo__label {
	font-family: var(--kp-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.7);
}
.kp-thermo__label--cool { color: #7fd3e6; }
.kp-thermo__label--hot  { color: #ffb08a; }

/* SYGNATURA (rail scrollu): pionowy „termometr” chłód(góra)→żar(dół), wypełniany
 * w miarę przewijania. Tylko desktop; JS steruje --kp-rail-fill (%) i --kp-rail-px (px).
 * Dekoracyjny (aria-hidden). Tworzony przez main.js wyłącznie na stronie głównej. */
.kp-thermal-rail {
	position: fixed;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	width: 6px;
	height: 44vh;
	max-height: 460px;
	border-radius: var(--kp-radius-pill);
	background: rgba(127, 141, 155, 0.22);
	box-shadow: inset 0 0 0 1px rgba(127, 141, 155, 0.18);
	z-index: 40;
	/* Interaktywny: chwyć i przeciągnij, żeby przewinąć stronę (jak suwak). */
	pointer-events: auto;
	cursor: grab;
	touch-action: none;
	transition: width var(--kp-transition);
}
.kp-thermal-rail:hover {
	width: 9px;
}
.kp-thermal-rail.is-dragging {
	width: 9px;
	cursor: grabbing;
}
/* Powiększona, niewidoczna strefa chwytu - sam pasek jest cienki. */
.kp-thermal-rail::before {
	content: "";
	position: absolute;
	inset: -12px -14px;
}
/* Bez lagu wypełnienia w trakcie przeciągania (natychmiastowe podążanie za kursorem). */
.kp-thermal-rail.is-dragging .kp-thermal-rail__fill {
	transition: none;
}
.kp-thermal-rail__fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--kp-rail-fill, 0%);
	border-radius: var(--kp-radius-pill);
	background: var(--kp-gradient-thermal-v);
	background-repeat: no-repeat;
	background-size: 100% var(--kp-rail-px, 400px);
	transition: height 120ms linear;
}
.kp-thermal-rail__fill::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transform: translate(-50%, 50%);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 107, 44, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1200px) {
	.kp-thermal-rail { display: none; }
}

/* STATY */
.kp-statband {
	background: var(--kp-graphite);
	padding-block: var(--kp-space-7);
}
.kp-statband__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kp-space-6);
	text-align: center;
}
.kp-statband .kp-stat__num {
	color: var(--kp-accent);
}
.kp-statband .kp-stat__label {
	color: rgba(255, 255, 255, 0.62);
}
.kp-statband .kp-stat__label em {
	font-style: normal;
	opacity: 0.55;
	font-size: 0.85em;
}

/* DLACZEGO MY */
.kp-why {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kp-space-5);
}
.kp-why__item {
	background: var(--kp-surface);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius-lg);
	padding: var(--kp-space-6);
	transition: transform var(--kp-transition), box-shadow var(--kp-transition);
}
.kp-why__item:hover {
	transform: translateY(-6px);
	box-shadow: var(--kp-shadow);
}
.kp-why__mark {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--kp-gradient-accent);
	margin-bottom: var(--kp-space-4);
	box-shadow: 0 8px 20px rgba(255, 107, 44, 0.30);
}
.kp-why__title {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h3);
	color: var(--kp-ink);
	margin: 0 0 var(--kp-space-2);
}
.kp-why__desc {
	color: var(--kp-body);
	line-height: var(--kp-lh-body);
	margin: 0;
	font-size: var(--kp-fs-sm);
}

/* NAGRODY */
.kp-awards {
	padding-block: var(--kp-section-y);
	background: var(--kp-graphite);
}
.kp-awards__grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.kp-awards__emblem {
	text-align: center;
}
.kp-awards__link {
	display: inline-block;
	line-height: 0;
	transition: transform var(--kp-transition), filter var(--kp-transition);
}
.kp-awards__link:hover,
.kp-awards__link:focus-visible {
	transform: scale(1.04);
}
.kp-awards__emblem img {
	max-width: 440px;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 40px rgba(255, 107, 44, 0.28));
}
.kp-awards__title {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h2);
	margin: 0 0 var(--kp-space-3);
}
.kp-awards__lead {
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--kp-fs-lead);
	margin: 0 0 var(--kp-space-5);
}
.kp-awards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--kp-space-3);
}
.kp-awards__list li {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--kp-radius-pill);
	padding: 8px 18px;
	font-size: var(--kp-fs-sm);
	font-weight: var(--kp-fw-semibold);
}

/* PRODUKTY + MARKI */
.kp-products {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.kp-products__media img {
	width: 100%;
	height: auto;
	border-radius: var(--kp-radius-lg);
	box-shadow: var(--kp-shadow);
	background: var(--kp-surface-2);
	display: block;
}
.kp-products__body .kp-marki {
	margin-top: var(--kp-space-6);
	text-align: left;
}
.kp-products__body .kp-marki__grid {
	justify-content: flex-start;
	gap: clamp(20px, 3vw, 40px);
}

/* CTA */
.kp-cta {
	padding-block: clamp(56px, 8vw, 96px);
	background: var(--kp-graphite-2);
	position: relative;
}
.kp-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(50% 120% at 50% 0%, rgba(255, 107, 44, 0.20), transparent 60%);
	pointer-events: none;
}
.kp-cta__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
}
.kp-cta__title {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h1);
	margin: 0 0 var(--kp-space-3);
}
.kp-cta__lead {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--kp-fs-lead);
	margin: 0 0 var(--kp-space-6);
}

/* Responsywność strony głównej */
@media (max-width: 980px) {
	.kp-hero__grid,
	.kp-awards__grid,
	.kp-products {
		grid-template-columns: 1fr;
	}
	.kp-products__body .kp-marki__grid {
		justify-content: center;
	}
	.kp-hero__media {
		order: -1;
	}
	.kp-statband__grid,
	.kp-why {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.kp-statband__grid,
	.kp-why {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * 7) Responsywność
 * ====================================================================== */

@media (max-width: 880px) {
	.kp-services {
		grid-template-columns: 1fr;
	}
	.kp-kontakt {
		grid-template-columns: 1fr;
	}
	.kp-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.kp-gallery {
		grid-template-columns: 1fr;
	}
	.kp-marki__grid {
		gap: 24px;
	}
}

/* =========================================================================
 * FIX GLOBALNY: usunięcie wymuszonego Title Case motywu.
 * Motyw noxiy stosuje `text-transform: capitalize` na wielu elementach
 * (przyciski, menu, nagłówki bannera, portfolio, cennik, blog, taby),
 * przez co KAŻDE słowo zaczyna się wielką literą - po polsku wygląda błędnie.
 * Przywracamy naturalną pisownię z treści (`none`).
 * UWAGA: nie dotyczy naszych .kp-* z `uppercase` (to jest celowe, np. eyebrow).
 * ====================================================================== */
.noxiy__btn,
.btn-one,
.btn-two,
.header__area-menubar-center-menu ul li a,
.header__area-menubar-center-menu ul li .sub-menu,
.header__area-menubar-center-menu ul li .sub-menu li,
.header__area-menubar-center-menu ul li .sub-menu li a,
.mean-container .mean-nav ul li a,
.mean-container .mean-nav ul li li a,
.banner__one-content h1,
.banner__two-content h1,
.portfolio__four-item-inner-content-btn h4,
.pricing__two-button .nav-item button,
.blog__one-item-btn a,
.company__two-left-skill-item h6,
.switch__tab-area-item-buttons button,
.switch__tab-area-item-button button {
	text-transform: none !important;
}

/* =========================================================================
 * STOPKA: kolorowe logo na ciemnym tle -> wybielenie CZYSTO W CSS.
 * Bez edycji pliku graficznego. Filtr brightness(0) invert(1) zamienia
 * dowolny kolorowy obraz (na przezroczystym tle) w jednolitą białą sylwetkę.
 * Zawężone do widgetu logo w stopce (.noxiy-builder-logo z plikiem logo-new);
 * logo w headerze (.header__area-menubar-left-logo) NIE jest ruszane.
 * ====================================================================== */
.noxiy-builder-logo img[src*="logo-new"] {
	filter: brightness(0) invert(1);
}

/* =========================================================================
 * NAGŁÓWEK: nazwa marki obok logo (dokładana przez main.js, bo widget
 * „Design 1" nie ma pola na nazwę). Logo nagłówka = .header__area-menubar-left-logo.
 * ====================================================================== */
.header__area-menubar-left-logo a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.kp-brandname {
	display: flex;
	flex-direction: column;
	line-height: 1.12;
	text-align: left;
}
.kp-brandname__name {
	font-family: var(--kp-font-heading);
	font-weight: var(--kp-fw-extrabold);
	font-size: clamp(1.05rem, 1.4vw, 1.35rem);
	color: var(--kp-ink);
	letter-spacing: -0.01em;
}
.kp-brandname__tag {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kp-accent);
	margin-top: 3px;
}
@media (max-width: 480px) {
	/* Tagline zostaje widoczny także na mobile (jak na desktopie) - user wymaga
	 * pełnego napisu przy logo, nie tylko nazwy. Delikatnie mniejsze rozmiary. */
	.kp-brandname__name {
		font-size: 0.95rem;
	}
	.kp-brandname__tag {
		font-size: 0.6rem;
		letter-spacing: 0.1em;
	}
}

/* =========================================================================
 * PODSTRONY: pasek z tytułem (.page__banner) - motyw daje padding 150px 0
 * (130px na tabletach), przez co jest zdecydowanie za wysoki. Zmniejszamy.
 * ====================================================================== */
.page__banner {
	padding: 72px 0;
}
.page__banner-content h1 {
	font-size: 44px;
	line-height: 1.2;
	margin-bottom: 8px;
}
@media (max-width: 991px) {
	.page__banner {
		padding: 56px 0;
	}
	.page__banner-content h1 {
		font-size: 38px;
	}
}
@media (max-width: 560px) {
	.page__banner {
		padding: 44px 0;
	}
	.page__banner-content h1 {
		font-size: 32px;
	}
}

/* =========================================================================
 * KOMPONENTY TREŚCI (bogata treść z oryginału) - reużywalne sekcje.
 * ====================================================================== */

/* Odstęp między blokami treści dodanymi w edytorze/treści strony */
.kp-block {
	margin-top: clamp(48px, 7vw, 88px);
}
.kp-block > .kp-chead__title:first-child,
.kp-block > h2:first-child {
	margin-top: 0;
}

/* Nagłówek sekcji treści (eyebrow + tytuł + lead) */
.kp-chead {
	margin-bottom: var(--kp-space-6);
}
.kp-chead__title {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h2);
	line-height: var(--kp-lh-tight);
	margin: 0 0 var(--kp-space-3);
}
.kp-chead__lead {
	color: var(--kp-muted);
	font-size: var(--kp-fs-lead);
	max-width: 70ch;
	margin: 0;
}

/* Blok czytelnego tekstu */
.kp-prose {
	max-width: 74ch;
	color: var(--kp-body);
	line-height: var(--kp-lh-body);
}
.kp-prose--wide {
	max-width: none;
}
.kp-prose p {
	margin: 0 0 var(--kp-space-4);
}
.kp-prose h3 {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h3);
	margin: var(--kp-space-6) 0 var(--kp-space-3);
}
.kp-prose > :first-child {
	margin-top: 0;
}
.kp-prose--cols {
	max-width: none;
	columns: 2;
	column-gap: clamp(32px, 5vw, 64px);
}
.kp-prose--cols p {
	break-inside: avoid;
}
@media (max-width: 780px) {
	.kp-prose--cols {
		columns: 1;
	}
}

/* Siatka kart-korzyści (H3 + opis) */
.kp-featuregrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
}
.kp-feature {
	background: var(--kp-surface);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	padding: clamp(20px, 3vw, 28px);
	box-shadow: var(--kp-shadow-sm);
	transition: transform var(--kp-transition), box-shadow var(--kp-transition), border-color var(--kp-transition);
}
.kp-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--kp-shadow);
	border-color: var(--kp-accent-soft);
}
.kp-feature__ico {
	display: inline-flex;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--kp-accent-soft);
	color: var(--kp-accent);
	margin-bottom: var(--kp-space-3);
}
.kp-feature__ico svg {
	width: 24px;
	height: 24px;
}
.kp-feature h3 {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h3);
	margin: 0 0 var(--kp-space-2);
}
.kp-feature p {
	color: var(--kp-muted);
	line-height: var(--kp-lh-body);
	margin: 0;
}

/* Ponumerowane kroki procesu */
.kp-steps {
	counter-reset: kp-step;
	display: grid;
	gap: var(--kp-space-5);
	max-width: 90ch;
}
.kp-step {
	position: relative;
	padding-left: 74px;
	min-height: 52px;
}
.kp-step::before {
	counter-increment: kp-step;
	content: counter(kp-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--kp-gradient-accent);
	color: #fff;
	font-family: var(--kp-font-heading);
	font-weight: var(--kp-fw-extrabold);
	font-size: 22px;
	box-shadow: var(--kp-shadow-sm);
}
.kp-step h3 {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h3);
	margin: 4px 0 var(--kp-space-2);
}
.kp-step p {
	color: var(--kp-muted);
	line-height: var(--kp-lh-body);
	margin: 0 0 var(--kp-space-2);
}

/* FAQ (natywne <details>, bez JS) */
.kp-faq {
	display: grid;
	gap: 12px;
	max-width: 90ch;
}
.kp-faq__item {
	background: var(--kp-surface);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	overflow: hidden;
}
.kp-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 52px 18px 20px;
	position: relative;
	font-family: var(--kp-font-heading);
	font-weight: var(--kp-fw-semibold);
	font-size: 1.05rem;
	color: var(--kp-ink);
}
.kp-faq__item summary::-webkit-details-marker {
	display: none;
}
.kp-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	line-height: 1;
	color: var(--kp-accent);
	transition: transform var(--kp-transition);
}
.kp-faq__item[open] summary::after {
	content: "-";
}
.kp-faq__item summary:hover {
	color: var(--kp-accent);
}
/* Pytanie FAQ jako nagłówek H3 (SEO / dostępność), ale wizualnie = tekst summary.
 * `font: inherit` zdejmuje domyślny rozmiar/margines nagłówka -> dziedziczy z summary. */
.kp-faq__q {
	display: inline;
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}
.kp-faq__answer {
	padding: 0 20px 18px;
	color: var(--kp-muted);
	line-height: var(--kp-lh-body);
}
.kp-faq__answer p {
	margin: 0 0 var(--kp-space-3);
}
.kp-faq__answer > :last-child {
	margin-bottom: 0;
}

/* Blok cennika (wyróżniona cena + czynniki) */
.kp-priceblock {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	background: var(--kp-surface-2);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius-lg);
	padding: clamp(24px, 4vw, 44px);
}
.kp-priceblock__figure {
	text-align: center;
}
.kp-priceblock__from {
	display: block;
	font-family: var(--kp-font-mono);
	color: var(--kp-muted);
	font-size: var(--kp-fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.kp-priceblock__num {
	font-family: var(--kp-font-mono);
	font-weight: var(--kp-fw-bold);
	font-size: clamp(2.6rem, 6vw, 4rem);
	line-height: 1;
	color: var(--kp-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}
.kp-priceblock__note {
	color: var(--kp-muted);
	font-size: var(--kp-fs-sm);
	margin-top: 6px;
}
.kp-priceblock__body h3 {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h3);
	margin: 0 0 var(--kp-space-3);
}
.kp-priceblock__body p {
	color: var(--kp-body);
	line-height: var(--kp-lh-body);
	margin: 0 0 var(--kp-space-3);
}
@media (max-width: 780px) {
	.kp-priceblock {
		grid-template-columns: 1fr;
		text-align: left;
	}
}
/* Wyróżniony kafel ceny (lewa kolumna) - premium akcent. */
.kp-priceblock__figure {
	background: var(--kp-surface);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius-lg);
	padding: var(--kp-space-6) var(--kp-space-5);
	box-shadow: var(--kp-shadow-sm);
}
/* Lista „co wpływa na cenę" w cenniku. */
.kp-priceblock__body .kp-checklist {
	margin: 0 0 var(--kp-space-5);
}

/* =========================================================================
 * 9) OPINIE (Google / Elfsight) - gotowy kontener sekcji [kp_opinie]
 * ====================================================================== */
.kp-reviews__embed {
	min-height: 220px;
	display: grid;
	place-items: center;
	padding: clamp(28px, 4vw, 48px);
	border: 1px dashed var(--kp-line);
	border-radius: var(--kp-radius-lg);
	background: var(--kp-surface-2);
	color: var(--kp-muted);
	text-align: center;
}
/* Gdy wklejony jest widget Elfsight - bez ramki placeholdera. */
.kp-reviews__embed.is-loaded {
	border: 0;
	background: transparent;
	padding: 0;
	min-height: 0;
	display: block;
}
.kp-reviews__placeholder {
	max-width: 44ch;
	margin: 0 auto;
	font-size: var(--kp-fs-sm);
	line-height: var(--kp-lh-body);
}
.kp-reviews__placeholder strong {
	display: block;
	color: var(--kp-ink);
	font-family: var(--kp-font-heading);
	margin-bottom: 6px;
}

/* =========================================================================
 * 10) Formularz szybkiej wyceny (alternatywa do telefonu) - html-forms
 * ====================================================================== */
.kp-kontakt__form {
	margin-top: var(--kp-space-6);
	padding-top: var(--kp-space-6);
	border-top: 1px solid var(--kp-line);
}
.kp-kontakt__form-title {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h3);
	color: var(--kp-ink);
	margin: 0 0 var(--kp-space-3);
}
/* Delikatny reskin pól html-forms w duchu kierunku C. */
.kp-kontakt__form input:not([type="submit"]),
.kp-kontakt__form textarea,
.kp-kontakt__form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	font-family: var(--kp-font-body);
	font-size: var(--kp-fs-base);
	color: var(--kp-ink);
	background: var(--kp-surface);
	margin-bottom: var(--kp-space-4);
}
.kp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kp-space-4);
	justify-content: center;
}

/* =========================================================================
 * NAGŁÓWEK - poprawki mobilne (cała witryna)
 * 1) Górny pasek kontaktowy (Elementor top-section cb4400c: telefon/mail/adres/social,
 *    bez logo i menu) ukryty na mobile - oszczędza wysokość i porządkuje nagłówek.
 * 2) Off-canvas menu motywu (.header__area-menubar-right-sidebar-popup) ma na sztywno
 *    width:460px + position:fixed + translateX(100%) - na wąskim ekranie „parkuje" poza
 *    prawą krawędzią szerzej niż viewport → współ-źródło poziomego scrolla. Ograniczamy do ≤ekranu.
 * ====================================================================== */
@media (max-width: 991px) {
	.elementor-element-cb4400c {
		display: none !important;
	}
	.header__area-menubar-right-sidebar-popup {
		width: min(460px, 86vw);
	}
	/* Główne logo na białym navbarze jest za duże (motyw: max-width 160px → ~86px wys.)
	 * i tłamsi nazwę + hamburger. Zmniejszamy na mobile. */
	.header__area-menubar-left-logo a img {
		max-width: 116px;
	}
}
@media (max-width: 400px) {
	.header__area-menubar-left-logo a img {
		max-width: 96px;
	}
}

/* =========================================================================
 * P0: neutralizacja resztek dema Noxiy w nagłówku (fallback bez JS; JS w main.js:
 * initRemoveDemoSidebar usuwa je z DOM i ubija zewn. obrazek z noxiy.themeori.net).
 * Ukrywamy DWA elementy będące RODZEŃSTWEM (nie przodkami) menu mobilnego:
 *   - .header__area-menubar-right-sidebar       = wyzwalacz „dots";
 *   - .header__area-menubar-right-sidebar-popup = off-canvas (szablon Elementor #551,
 *     „insurance"/obcy telefon/logo z noxiy.themeori.net; współ-źródło poziomego scrolla).
 * Hamburger .menu__bar-popup (nav MeanMenu w .responsive-menu) jest w INNYM poddrzewie -
 * nietknięty. UWAGA: #551 NIE usuwać w Elementorze - widżet renderuje off-canvas i menu
 * mobilne razem, więc kasowanie szablonu zeruje treść hamburgera. */
.header__area-menubar-right-sidebar,
.header__area-menubar-right-sidebar-popup {
	display: none !important;
}

/* =========================================================================
 * HAMBURGER / off-canvas panel (.header__area-menubar-right-sidebar-popup)
 * Tło ciemne (#121212). Poprawki niezależne od szerokości (panel = overlay).
 * 1) Logo w panelu białe - jak w stopce (kolorowe logo-new na ciemnym tle).
 * 2) Panel był za wysoki (padding 100px 40px + logo 180px) → scroll bez potrzeby.
 *    Mniejszy padding i logo, by całość (z kontaktem u dołu) mieściła się bez scrolla.
 * ====================================================================== */
/* Jedyny <img> w panelu to logo (logo-8.png); kontakt/social to ikony fontowe.
 * brightness(0) invert(1) = pełna biała sylwetka niezależnie od koloru źródła. */
.header__area-menubar-right-sidebar-popup img {
	filter: brightness(0) invert(1);
	max-width: 130px;
	height: auto;
}
.header__area-menubar-right-sidebar-popup {
	padding: 28px 30px 32px;
}

/* =========================================================================
 * MOBILNE MENU „kropki" = .menu__bar-popup (overlay z nawigacją, custom.js).
 * Tło = --bg-heading-color (nasz granat #0D2136). Logo = kolorowe logo-new.
 * ====================================================================== */
/* 1) Logo białe (jak w stopce) i mniejsze + nazwa marki obok (biała, wstrzykiwana JS-em). */
.menu__bar-popup-left-logo img {
	filter: brightness(0) invert(1);
	max-width: 100px;
}
.menu__bar-popup-left-logo a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.menu__bar-popup .kp-brandname__name,
.menu__bar-popup .kp-brandname__tag {
	color: #fff;
}
/* 2) Pełna wysokość = dynamiczny viewport → koniec „doscrollowania" pustego dołu na mobile.
 *    padding-bottom na kolumnie = większy odstęp kontaktu od dołu. */
.menu__bar-popup {
	height: 100dvh;
}
.menu__bar-popup-left {
	overflow: hidden;
	padding-bottom: 40px;
}
/* 3) Blok kontaktu wstrzykiwany przez main.js na sam dół menu (rodzic = flex space-between). */
.menu__bar-popup .kp-mobcontact {
	margin-top: 24px;
	padding: 20px 0 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: 12px;
}
.menu__bar-popup .kp-mobcontact a,
.menu__bar-popup .kp-mobcontact > span {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
	font-size: 0.95rem;
	line-height: 1.4;
}
.menu__bar-popup .kp-mobcontact a:hover {
	color: #fff;
}
.menu__bar-popup .kp-mobcontact .kp-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--kp-accent);
}
/* Ikony social w menu (FB/IG) - okrągłe przyciski. */
.menu__bar-popup .kp-mobsocial {
	display: flex;
	gap: 12px;
	margin-top: 6px;
}
.menu__bar-popup .kp-mobsocial a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	transition: background var(--kp-transition), border-color var(--kp-transition), transform var(--kp-transition);
}
.menu__bar-popup .kp-mobsocial a:hover {
	background: var(--kp-accent);
	border-color: var(--kp-accent);
	transform: translateY(-2px);
}
.menu__bar-popup .kp-mobsocial svg {
	width: 18px;
	height: 18px;
}

/* Hero: chip nagród „4 nagrody branżowe · 2021-2022" łamał się pionowo na mobile
 * (width:fit-content → min-content = słowo-po-słowie). Pełna szerokość + zawijanie w poziomie. */
@media (max-width: 560px) {
	.kp-hero__badges {
		width: auto;
		flex-wrap: wrap;
		row-gap: 8px;
		border-radius: var(--kp-radius-lg);
	}
	.kp-hero__badges img {
		height: 40px;
	}
	.kp-hero__badges span {
		flex: 1 1 100%;
	}
}

/* Ikona menu „kropki" na navbarze - odsunięcie od prawej krawędzi na mobile. */
@media (max-width: 991px) {
	.menu__bar {
		margin-right: 10px;
	}
}

/* =========================================================================
 * 12) ELEWACJA WOW PODSTRON (Montaż / Serwis / O nas / Realizacje)
 *     Przenosi rytm strony głównej (sygnatura termiczna + ciemne pasy + statband)
 *     na podstrony treściowe. Działa na istniejącym markupie `.kp-*` w .entry-content.
 * ====================================================================== */

/* --- 12.1 Sygnatura: tick termiczny (chłód→żar) nad każdym nagłówkiem sekcji --- */
.kp-block > .kp-chead__title::before,
.kp-block > h2.kp-chead__title::before {
	content: "";
	display: block;
	width: 48px;
	height: 5px;
	margin-bottom: var(--kp-space-4);
	border-radius: var(--kp-radius-pill);
	background: var(--kp-gradient-thermal);
}
/* Tick sekcji jest identyczny w całej witrynie (pełna skala termiczna żar→chłód).
 * Wcześniejszy wariant chłodny na Serwisie (body.page-id-2534) usunięty na życzenie
 * usera - ma być tak samo jak na Montażu wszędzie. */
/* Eyebrow w hero podstrony (dodawany w treści) - odstęp nad leadem. */
.kp-service-hero__body .kp-eyebrow {
	margin-bottom: var(--kp-space-4);
}

/* --- 12.2 Pełne rozlanie sekcji poza .container (page.php owija treść w kontener) --- */
.kp-block--bleed {
	margin-inline: calc(50% - 50vw);
	padding-inline: 0;
	padding-block: clamp(48px, 7vw, 88px);
	margin-top: clamp(48px, 7vw, 88px);
}
.kp-block--bleed > .kp-container,
.kp-block--bleed > .kp-chead,
.kp-block--bleed > .kp-chead__title,
.kp-block--bleed > .kp-chead__lead,
.kp-block--bleed > .kp-steps,
.kp-block--bleed > .kp-statband__grid {
	max-width: var(--kp-container);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
	box-sizing: border-box;
}
.kp-block--bleed > .kp-chead__title:first-child {
	margin-top: 0;
}

/* Ciemny pas: jaśniejszy lead + treść kroków na tle grafitu/granatu. */
.kp-on-dark .kp-chead__lead {
	color: rgba(255, 255, 255, 0.72);
}
.kp-on-dark.kp-block > .kp-chead__title::before {
	background: var(--kp-gradient-thermal);
}

/* --- 12.3 SYGNATURA: proces „krok po kroku" jako pionowa oś termiczna (żar→chłód) --- */
.kp-steps--thermal {
	position: relative;
}
/* Kręgosłup łączący numery kroków - gradient termiczny w pionie. */
.kp-steps--thermal::before {
	content: "";
	position: absolute;
	left: 26px;
	top: 26px;
	bottom: 26px;
	width: 3px;
	transform: translateX(-50%);
	background: var(--kp-gradient-thermal-v);
	border-radius: var(--kp-radius-pill);
	opacity: 0.55;
	z-index: 0;
}
.kp-steps--thermal .kp-step {
	position: relative;
	z-index: 1;
}
/* Każde kółko numeru próbkuje inny wycinek skali termicznej: 1 = żar → ostatni = chłód. */
.kp-steps--thermal .kp-step::before {
	background-image: var(--kp-gradient-thermal-v);
	background-size: 100% 520%;
	background-position: center 0%;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.kp-steps--thermal .kp-step:nth-child(2)::before { background-position: center 25%; }
.kp-steps--thermal .kp-step:nth-child(3)::before { background-position: center 50%; }
.kp-steps--thermal .kp-step:nth-child(4)::before { background-position: center 75%; }
.kp-steps--thermal .kp-step:last-child::before   { background-position: center 100%; }
/* Na ciemnym pasie: jasna obwódka + czytelny tekst. */
.kp-on-dark .kp-steps--thermal .kp-step::before {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.kp-on-dark .kp-step h3 { color: #fff; }
.kp-on-dark .kp-step p  { color: rgba(255, 255, 255, 0.70); }

/* --- 12.4 Statband na podstronach: pełne rozlanie + siatka respektuje liczbę kolumn --- */
.kp-block--bleed.kp-statband {
	padding-block: clamp(40px, 6vw, 72px);
}
.kp-statband--3 .kp-statband__grid {
	grid-template-columns: repeat(3, 1fr);
	max-width: 900px;
}
@media (max-width: 720px) {
	.kp-statband__grid,
	.kp-statband--3 .kp-statband__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--kp-space-5);
	}
}

/* --- 12.5 Realizacje: pierwszy kafel jako „featured" (mozaika 2×2) --- */
body.page-id-2555 .entry-content > .kp-lead {
	max-width: 60ch;
}
body.page-id-2555 .kp-gallery--zoom {
	grid-auto-flow: dense;
	grid-auto-rows: 1fr;
}
body.page-id-2555 .kp-gallery--zoom .kp-gallery__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
@media (max-width: 720px) {
	body.page-id-2555 .kp-gallery--zoom .kp-gallery__item:first-child {
		grid-column: auto;
		grid-row: auto;
	}
}

/* Domknięcie marginesu ostatniego bloku treści przed globalnym pasem CTA. */
.entry-content > :last-child {
	margin-bottom: 0;
}

/* --- 12.6 Kontakt (Elementor, page-id-70): spójność z systemem, bez zmian struktury --- */
/* Sygnatura termiczna nad nagłówkami sekcji kontaktu (jak na pozostałych podstronach).
 * Scope `.elementor-70` = TYLKO treść strony 70; NIE globalna stopka/CTA (spójność). */
body.page-id-70 .elementor-70 .elementor-widget-heading .elementor-heading-title::before {
	content: "";
	display: block;
	width: 48px;
	height: 5px;
	margin-bottom: var(--kp-space-4);
	border-radius: var(--kp-radius-pill);
	background: var(--kp-gradient-thermal);
}
/* Pola formularza: fokus w kolorze marki (żar) - spójny z .kp-btn / .kp-checklist. */
body.page-id-70 .hf-form input:focus,
body.page-id-70 .hf-form textarea:focus {
	outline: none;
	border-color: var(--kp-accent) !important;
	box-shadow: 0 0 0 3px var(--kp-accent-soft) !important;
}

/* NAP „Adres / Email / Telefon" (widgety motywu .contact__two-info-item) były luźno
 * rozrzucone. Przyczyny: (1) każdy wiersz to osobny widget HTML z marginesem 30px;
 * (2) etykieta h6 odsuwała dwukropek ~40px; (3) wartość miała motywowe `max-width:290px`,
 * przez co adres łamał się na 2 linie mimo wolnego miejsca. Zbijamy w zwartą listę
 * „Etykieta: wartość" (scope: tylko strona Kontakt). */
body.page-id-70 .contact__two-info-item {
	gap: 8px;
	align-items: baseline;
	flex-wrap: nowrap;
}
body.page-id-70 .contact__two-info-item h6 {
	flex: 0 0 84px; /* stała kolumna etykiety => dwukropki i dane w równych kolumnach */
	width: 84px;
	margin: 0;
	gap: 0; /* motyw dawał 40px między słowem a dwukropkiem */
	justify-content: space-between; /* słowo przy lewej, dwukropek przy prawej krawędzi kolumny */
	white-space: nowrap;
}
body.page-id-70 .contact__two-info-item > span {
	max-width: none; /* zdejmuje motywowe 290px - adres w jednej linii */
	flex: 1 1 auto;
	min-width: 0;
}
/* Wiersze NAP to osobne widgety HTML (domyślny margines 30px) - zmniejszamy przerwę. */
body.page-id-70 .elementor-widget-html:has(.contact__two-info-item) {
	margin-bottom: 10px !important;
}

/* Mapa: pozostaje na PEŁNĄ szerokość strony (decyzja usera - jak było). */

/* =========================================================================
 * 13. TYPY KLIMATYZACJI + POJĘCIA - shortcode [kp_pojecia] (podstrona Montaż)
 *   SYGNATURA: mini-schematy topologii jednostek (agregat -> jednostki wewn.),
 *   "rura" łącząca w kolorze chłodu marki; specyfikacja w Space Mono.
 *   Struktura = informacja: 2 grupy (typy instalacji / pojęcia techniczne).
 * ====================================================================== */

/* Eyebrow grupy - mono label z termicznym tickiem (spójne z sygnaturą marki) */
.kp-actypes__eyebrow {
	font-family: var(--kp-font-mono);
	font-size: var(--kp-fs-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kp-accent);
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 var(--kp-space-5);
}
.kp-actypes__eyebrow::before {
	content: "";
	width: 28px;
	height: 3px;
	flex: none;
	border-radius: var(--kp-radius-pill);
	background: var(--kp-gradient-thermal);
}
.kp-actypes__eyebrow--cool {
	color: var(--kp-cool-600);
	margin-top: clamp(44px, 6vw, 76px);
}

/* Karty typów instalacji - schemat + nazwa + specyfikacja + definicja */
.kp-actypes__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 24px);
}
.kp-actype {
	display: flex;
	flex-direction: column;
	background: var(--kp-surface);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius-lg);
	padding: clamp(18px, 2.4vw, 26px);
	transition: transform var(--kp-transition), box-shadow var(--kp-transition), border-color var(--kp-transition);
}
.kp-actype:hover {
	transform: translateY(-4px);
	box-shadow: var(--kp-shadow);
	border-color: var(--kp-accent-soft);
}
.kp-actype__schema {
	background: var(--kp-surface-2);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	padding: 16px 14px;
	margin-bottom: var(--kp-space-4);
}
.kp-actype__svg {
	display: block;
	width: 100%;
	height: auto;
}
.kp-actype__svg .pipe {
	fill: none;
	stroke: var(--kp-cool);
	stroke-width: 3;
	stroke-linecap: round;
}
.kp-actype__svg .u-out {
	fill: var(--kp-primary);
}
.kp-actype__svg .u-in {
	fill: var(--kp-accent-soft);
	stroke: var(--kp-accent);
	stroke-width: 2;
}
.kp-actype__svg .u-hidden {
	fill: none;
	stroke: var(--kp-accent);
	stroke-width: 2;
	stroke-dasharray: 3 3;
}
.kp-actype__svg .ceiling {
	fill: var(--kp-line);
}
.kp-actype__svg .vent {
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 2;
	stroke-linecap: round;
}
.kp-actype__svg .airflow {
	fill: none;
	stroke: var(--kp-cool);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.75;
}
.kp-actype__name {
	font-family: var(--kp-font-heading);
	font-size: var(--kp-fs-h3);
	line-height: var(--kp-lh-heading);
	margin: 0 0 4px;
}
.kp-actype__spec {
	font-family: var(--kp-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--kp-muted);
	margin: 0 0 var(--kp-space-3);
}
.kp-actype__desc {
	color: var(--kp-muted);
	line-height: var(--kp-lh-body);
	font-size: var(--kp-fs-sm);
	margin: 0;
}

/* Pojęcia techniczne - lista definicji, cichsza niż karty-schematy */
.kp-terms {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 2vw, 26px) clamp(28px, 4vw, 56px);
	margin: 0;
}
.kp-term {
	border-top: 2px solid var(--kp-line);
	padding-top: var(--kp-space-4);
	margin: 0;
}
.kp-term__name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--kp-font-heading);
	font-weight: var(--kp-fw-bold);
	font-size: 1.05rem;
	color: var(--kp-ink);
	margin: 0 0 8px;
}
.kp-term__name::before {
	content: "";
	width: 16px;
	height: 3px;
	flex: none;
	border-radius: var(--kp-radius-pill);
	background: var(--kp-gradient-thermal);
}
.kp-term__desc {
	color: var(--kp-muted);
	line-height: var(--kp-lh-body);
	font-size: var(--kp-fs-sm);
	margin: 0;
}

@media (max-width: 900px) {
	.kp-actypes__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 620px) {
	.kp-actypes__grid,
	.kp-terms {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * 14. KOMUNIKATY FORMULARZA - html-forms (.hf-message)
 *   Wtyczka renderuje <p class="hf-message hf-message-{type}"> gdzie type =
 *   `success` (wysłano) lub `warning` (błąd walidacji / błąd wysyłki).
 *   Domyślne style wtyczki (bootstrapowa zieleń/żółć) są niespójne z marką -
 *   przemalowujemy na tokeny KP + ikona + pasek akcentu. Scope: globalny na
 *   .hf-message (formularz bywa na wielu stronach; NIE wiążemy z page-id).
 * ====================================================================== */
.hf-form .hf-message {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: var(--kp-space-5) 0;
	padding: 14px 18px;
	border: 1px solid var(--kp-line);
	border-left-width: 4px;
	border-radius: var(--kp-radius);
	background: var(--kp-surface-2);
	color: var(--kp-ink);
	font-size: var(--kp-fs-sm);
	line-height: var(--kp-lh-body);
	box-shadow: var(--kp-shadow-sm);
	animation: kp-hf-msg-in 0.35s ease both;
}
/* Ikona statusu - mask-image (SVG) dziedziczy kolor komunikatu przez currentColor. */
.hf-message::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.hf-message a {
	color: inherit;
	text-decoration: underline;
}

/* WYSŁANO - żar/zieleń sukcesu */
.hf-form .hf-message-success {
	border-color: color-mix(in srgb, var(--kp-success) 45%, var(--kp-line));
	border-left-color: var(--kp-success);
	background: color-mix(in srgb, var(--kp-success) 10%, #fff);
	color: color-mix(in srgb, var(--kp-success) 78%, #000);
}
.hf-message-success::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
}

/* BŁĄD (type=warning) - czerwień marki */
.hf-form .hf-message-warning {
	border-color: color-mix(in srgb, var(--kp-danger) 45%, var(--kp-line));
	border-left-color: var(--kp-danger);
	background: color-mix(in srgb, var(--kp-danger) 10%, #fff);
	color: color-mix(in srgb, var(--kp-danger) 78%, #000);
}
.hf-message-warning::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Ccircle cx='12' cy='16.5' r='0.6' fill='black' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Ccircle cx='12' cy='16.5' r='0.6' fill='black' stroke='none'/%3E%3C/svg%3E");
}

@keyframes kp-hf-msg-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.hf-message { animation: none; }
}

/* Fallback bez color-mix (starsze przeglądarki) - pełne, spójne tła. */
@supports not (background: color-mix(in srgb, red, blue)) {
	.hf-message-success {
		border-color: var(--kp-success);
		background: #eaf6f0;
		color: #146b49;
	}
	.hf-message-warning {
		border-color: var(--kp-danger);
		background: #fbeaea;
		color: #a32f2f;
	}
}