.kl-hero {
	padding: clamp(28px, 5vw, 76px) var(--up-okraj-sekce) clamp(40px, 4.5vw, 68px);
	border-bottom: 1px solid var(--up-cara);
	background-color: var(--up-plocha);
	background-image: radial-gradient(760px 480px at 76% 42%, #ece3d3 0%, rgba(236, 227, 211, 0) 70%);
}

.kl-hero__mrizka {
	max-width: 1144px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 28px clamp(28px, 3vw, 44px);
	align-items: start;
}

.kl-hero__uvod {
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.kl-hero__nadpis {
	margin: 0;
	font-size: clamp(42px, 3.5vw, 50px);
	line-height: 1.06;
}

.kl-hero__nadpis span {
	color: var(--up-zelena);
	white-space: nowrap;
}

.kl-hero__perex {
	margin: 0;
	max-width: 31em;
	color: var(--up-text);
	font-size: clamp(17px, 1.3vw, 19px);
	font-weight: 500;
	line-height: 1.6;
	text-wrap: pretty;
}

.kl-hero__produkt {
	grid-row: span 2;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(330px, 40vw, 560px);
}

.kl-hero__obal {
	position: relative;
	width: min(86%, 490px);
	margin: clamp(24px, 3vw, 40px) 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kl-hero__obal::before,
.kl-hero__obal::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.kl-hero__obal::before {
	width: 116%;
	border: 1px solid #e0d5c2;
}

.kl-hero__obal::after {
	width: 94%;
	background: radial-gradient(circle at 42% 36%, #fbf8f2 0%, #f1e9db 62%, rgba(241, 233, 219, 0) 100%);
}

.kl-hero__img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 30px rgba(20, 36, 27, .2));
}

.kl-hero__akce {
	position: absolute;
	right: -6%;
	bottom: 8%;
	z-index: 2;
	margin: 0;
	padding: 12px 18px;
	border-radius: 14px;
	background: var(--up-hneda);
	color: #fff;
	text-align: center;
	box-shadow: 0 16px 32px -16px rgba(63, 50, 35, .55);
}

.kl-hero__akce-titulek {
	display: block;
	color: #d9c9a3;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.kl-hero__akce strong {
	display: block;
	color: #fff;
	margin-top: 2px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

.kl-hero__akce strong span {
	color: #eadfcb;
	font-weight: 500;
}

@keyframes kl-naskocit {
	from {
		opacity: 0;
		transform: translateY(8px) scale(.94);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.kl-hero__akce {
		animation: kl-naskocit .45s cubic-bezier(.2, .8, .2, 1) .8s both;
	}
}

@media (min-width: 1010px) {
	.kl-hero__produkt {
		align-items: flex-start;
	}

	.kl-hero__obal {
		margin-top: 30px;
	}
}

.kl-hero__vyhody {
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.kl-fajfky {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--up-ink);
	font-size: 16px;
	line-height: 1.5;
}

.kl-fajfky li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.kl-fajfky__kruh {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--up-zelena);
	color: #fff;
}

.kl-fajfky__kruh .kl-ikona {
	width: 13px;
	height: 13px;
	stroke-width: 3.4;
}

.kl-hero__tlacitka {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 28px;
}

.kl-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}

.kl-hero__cena,
.kl-hero__cena:hover {
	color: var(--up-popisek);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.kl-hero__loga {
	align-self: flex-start;
	margin: 0;
	padding: 22px 0 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 36px;
	border-top: 1px solid #e3dacb;
}

.kl-hero__loga img {
	width: auto;
	max-width: 140px;
	height: 56px;
	object-fit: contain;
}

@media (max-width: 600px) {
	.kl-hero__loga {
		gap: 12px 24px;
	}

	.kl-hero__loga img {
		height: 44px;
	}
}

.kl-duvody__pas {
	padding: clamp(48px, 5.5vw, 80px) var(--up-okraj-sekce);
}

.kl-duvody__pas:first-child {
	padding-top: clamp(56px, 6vw, 88px);
}

.kl-duvody__pas:last-child {
	padding-bottom: clamp(56px, 6vw, 88px);
}

.kl-duvody__pas--pisek {
	background: #ddcdb3;
}

.kl-duvody__pas--seda {
	background: #fbfbfb;
}

.kl-duvody__pas--ruzova {
	background: #e2d8d9;
}

.kl-duvody__pas--bila {
	background: #fff;
}

.kl-duvody__pas--pisek .kl-nadpisek {
	color: var(--up-hneda);
}

.kl-duvody__pas--pisek .kl-hlava__podnadpis {
	color: var(--up-text);
}

.kl-duvody__in {
	--kl-mezera: clamp(36px, 4vw, 56px);
	max-width: 1144px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--kl-mezera);
}

.kl-duvod {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px clamp(32px, 5vw, 72px);
}

.kl-duvod--vpravo {
	flex-direction: row-reverse;
}

.kl-duvod__obrazek,
.kl-duvod__text {
	flex: 1 1 400px;
	min-width: 0;
}

.kl-duvod__img {
	width: auto;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

.kl-duvod--posledni {
	flex-wrap: wrap-reverse;
}

.kl-duvod--posledni .kl-duvod__obrazek {
	align-self: flex-start;
}

.kl-duvod--posledni .kl-duvod__img {
	margin-bottom: calc(-1 * var(--kl-mezera));
}

.kl-duvod__img--s {
	max-height: clamp(220px, 22vw, 320px);
}

.kl-duvod__img--sm {
	max-height: clamp(240px, 25vw, 360px);
}

.kl-duvod__img--m {
	max-height: clamp(260px, 27vw, 380px);
}

.kl-duvod__img--l {
	max-height: clamp(280px, 29vw, 420px);
}

.kl-duvod__img--xl {
	max-height: clamp(300px, 33vw, 480px);
}

.kl-duvod__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.kl-duvod__text p {
	margin: 0;
	max-width: 34em;
	color: var(--up-text);
	font-size: 16px;
	line-height: 1.7;
}

.kl-duvod__text .kl-duvod__zaver {
	color: var(--up-ink);
	font-weight: 700;
}

.kl-cislo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #f1eae0;
	color: var(--up-hneda);
	font-family: var(--up-pismo-nadpis);
	font-size: 22px;
	font-weight: 800;
}

@keyframes kl-zvednout {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

html.up-pohyb .kl-duvod[data-up-jednou]:not(.is-videt) .kl-duvod__img {
	opacity: 0;
}

html.up-pohyb .kl-duvod[data-up-jednou].is-videt:not(.is-hned) .kl-duvod__img {
	animation: kl-zvednout .7s cubic-bezier(.2, .8, .2, 1) both;
}

.kl-duvod__nadpis {
	margin: 4px 0 0;
	font-size: clamp(24px, 2vw, 30px);
	line-height: 1.2;
}

.kl-proc {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 48px;
	padding: clamp(30px, 3.8vw, 52px) clamp(24px, 4.5vw, 60px);
	border-radius: 28px;
	background: var(--up-hneda-tmava);
	color: #fff;
}

.kl-proc__text {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kl-proc__nadpis {
	margin: 0;
	color: #fff;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.15;
}

.kl-proc__nadpis span {
	color: #d9c9a3;
}

.kl-proc__text p {
	margin: 0;
	max-width: 36em;
	color: #e9e1d6;
	font-size: 16px;
	line-height: 1.65;
}

.kl-proc__akce {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.kl-proc__vyzva {
	margin: 0;
	color: #fff;
	font-family: var(--up-pismo-nadpis);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.02em;
}