/* Home page only */

.kk-home-section {
	position: relative;
	padding: 96px 0 152px;
}
.kk-home-section__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
	margin-bottom: 32px;
}
.kk-home-section__header p {
	font-family: var(--kk-eco-font-secondary);
	line-height: 150%;
}
.kk-home-section--green {
	color: var(--kk-eco-color-white);
	background: var(--kk-eco-color-primary-dark-bg);
}
.kk-home-section--green h2, .kk-home-section--green h3 { color: var(--kk-eco-color-white); }
.kk-home-richtext { font-family: var(--kk-eco-font-secondary); line-height: 1.65; }
.kk-home-richtext > * + * { margin-top: 14px; }

.kk-home-section--green::before {
	position: absolute;
	right: 0;
	bottom: calc(100% - 1px);
	left: 0;
	z-index: 2;
	height: 34px;
	content: "";
	background-image: url(./../img/grass-separator-dark-green.svg);
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: 305px 34px;
	pointer-events: none;
}
.kk-home-section:not(.kk-home-section--green)::before {
	position: absolute;
	right: 0;
	bottom: calc(100% - 1px);
	left: 0;
	z-index: 2;
	height: 34px;
	content: "";
	background-image: url(./../img/grass-separator-white.svg);
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: 305px 34px;
	pointer-events: none;
}

.kk-eco-arrowlink {
	align-self: flex-end;
	margin-left: auto;
}


/* Hero */
.kk-home-hero { background: var(--kk-eco-color-white); }
.kk-home-hero__inner {
	--hero-image-left: 38.5%;
	position: relative;
	container-type: inline-size;
	min-height: clamp(520px, 43cqw, 610px);
	padding-top: clamp(54px, 5cqw, 78px);
	padding-bottom: 96px;
	overflow: visible;
}
@media(max-width: 1400px) {
	.kk-home-hero__inner {
		--hero-image-left: 38.25%;
	}
}
.kk-home-hero__media { position: absolute; inset: 0 0 0 var(--hero-image-left); overflow: hidden; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.kk-home-hero__media picture, .kk-home-hero__photo { width: 100%; height: 100%; }
.kk-home-hero__photo { object-fit: cover; object-position: 58% center; }
.kk-home-hero__content { position: relative; z-index: 2; width: clamp(500px, 51cqw, 700px); }
.kk-home-hero__title { display: flex; flex-direction: column; align-items: flex-start; }
.kk-home-hero__wordmark { width: clamp(500px, 50cqw, 700px); height: auto; }
.kk-home-hero__wordmark--mobile { display: none; }
.kk-home-hero__title-line {
	margin-top: 8px;
	font-size: 56px;
	font-family: var(--kk-eco-font-primary);
	line-height: 1;
}
.kk-home-hero__kicker {
	margin-top: 8px;
	font-size: 28px;
	font-weight: var(--kk-eco-font-weight-medium);
	line-height: 1;
}
.kk-home-hero__kicker span {
	font-weight: var(--kk-eco-font-weight-semibold);
	color: var(--kk-eco-color-accent);
}
.kk-home-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 450px;
	margin-top: 24px;
	font-family: var(--kk-eco-font-primary);
	font-size: 16px;
	line-height: 150%;
}
.kk-home-hero__button {
	margin-top: 32px;
}

.kk-home-hero__benefits {
	position: absolute;
	right: 0;
	bottom: -34px;
	left: 0;
	z-index: 4;
	display: flex;
	gap: 32px;
	padding-inline: var(--kk-eco-container-padding);
}
.kk-home-hero__benefit {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: var(--kk-eco-color-white);
	border-radius: 8px;
	box-shadow: var(--kk-eco-shadow-sm);
	font-family: var(--kk-eco-font-secondary);
}
.kk-home-hero__benefit-icon {
	width: auto;
	height: 52px;
	object-fit: contain;
}
.kk-home-hero__benefit div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}
.kk-home-hero__benefit strong {
	font-size: 14px;
}
.kk-home-hero__benefit span {
	font-size: 14px;
}

/* Categories */
.kk-home-categories {
	padding-top: 128px;
}
.kk-home-categories__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.kk-home-category {
	min-width: 0;
	transition: scale .3s ease;
}
.kk-home-category:hover {
	scale: 1.025;
}
.kk-home-category:active {
	scale: .975;
}
.kk-home-category__link {
	position: relative;
	display: flex;
	min-height: 150px;
	height: 100%;
	overflow: hidden;
	background: var(--kk-eco-color-primary-light-bg);
	border-radius: 8px;
	color: var(--kk-eco-color-text);
}
.kk-home-category__content {
	position: relative;
	z-index: 2;
	display: flex;
	width: 80%;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 28px;
}
.kk-home-category h3 {
	font-size: 24px;
	font-family: var(--kk-eco-font-primary);
}
.kk-home-category p {
	margin-top: 6px;
	font-family: var(--kk-eco-font-secondary);
	font-size: 14px;
}
.kk-home-category span {
	color: var(--kk-eco-color-primary-dark);
	font-size: 16px;
	font-weight: 700;
	margin-top: 8px;
}
.kk-home-category__image {
	position: absolute;
	right: -2.5%;
	bottom: 0;
	width: 160px;
	object-fit: contain;
	object-position: right bottom;
	transition: transform var(--kk-eco-transition);
}
.kk-home-category__link:hover .kk-home-category__image {
	transform: translateX(-5px) scale(1.04);
}

@media(max-width: 1250px) {
	.kk-home-category__image {
		right: -2.5%;
		bottom: -2.5%;
		width: 140px;
	}
}
@media(max-width: 1100px) {
	.kk-home-categories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media(max-width: 767px) {
	.kk-home-category h3 {
		font-size: 18px;
	}
	.kk-home-category p {
		margin-top: 4px;
		font-size: 12px;
	}
	.kk-home-category span {
		font-size: 14px;
		margin-top: 6px;
	}

	.kk-home-relax__points img {
    	width: 56px;
		height: 56px;
	}


}


/* Relax */
.kk-home-relax__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(48px, 8vw, 120px); }
.kk-home-relax__copy {
	width: 50%;
}
.kk-home-relax__copy h2 { max-width: 580px; }
.kk-home-relax__heading .kk-home-heading__accent {
	font-size: 1.35em;
	line-height: 125%;
}
.kk-home-relax__copy .kk-home-richtext {
	margin-top: 24px;
}
.kk-home-relax__points {
	display: grid;
	width: 50%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px 32px;
	position: relative;
}
.kk-home-relax__points::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: #3E8208;
	transform: translateY(-50%);
}
.kk-home-relax__points li {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.kk-home-relax__points li:nth-child(-n + 2)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -38px;
	width: 2px;
	height: 12px;
	background: #3E8208;
	transform: translateX(-50%);
}
.kk-home-relax__points img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}
.kk-home-relax__points span {
	font-family: var(--kk-eco-font-secondary);
	font-size: 14px;
	width: 120px;
	letter-spacing: var(--kk-eco-font-spacing-text);
}


/* Product sections */
.kk-home-products { padding: 96px 0 120px; }
.kk-home-products .products { margin: 0 !important; }
.kk-home-products .kk-eco-product-slider__viewport { padding-bottom: 4px; }


/* Nature split */
.kk-home-nature {
	display: flex;
	min-height: 430px;
	background: var(--kk-eco-color-primary-dark-bg);
	position: relative;
}
.kk-home-nature::before {
	position: absolute;
	right: 0;
	bottom: calc(100% - 32px);
	left: 0;
	z-index: 2;
	height: 34px;
	content: "";
	background-image: url(./../img/grass-separator-white-inverted.svg);
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: 305px 34px;
	pointer-events: none;
}
.kk-home-nature__media, .kk-home-nature__content {
	width: 50%;
}
.kk-home-nature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kk-home-nature__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 152px var(--kk-eco-container-padding) 168px 64px;
	color: var(--kk-eco-color-white);
}
.kk-home-nature__content h2 {
	color: var(--kk-eco-color-white);
}
.kk-home-nature__content .kk-home-richtext {
	margin-top: 20px;
}
.kk-home-nature__content .kk-eco-btn {
	margin-top: 32px;
}


/* Story */
.kk-home-story {
	padding: 16px 0 152px;
}
.kk-home-story__inner--main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 64px;
}
.kk-home-story__heading .kk-home-heading__script {
	display: block;
	margin-top: 8px;
}
.kk-home-story__copy {
	width: 55%;
}
.kk-home-story__copy .kk-home-richtext {
	margin-top: 32px;
}
.kk-home-story__figure {
	width: 45%;
}
.kk-home-story__figure img { width: 100%; border: 2px solid var(--kk-eco-color-primary); }
.kk-home-story__figure figcaption { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Reviews */
.kk-home-reviews__track { min-width: max-content !important; }
.kk-home-review {
	flex: 0 0 320px;
	width: 320px;
	min-height: 220px;
	padding: 16px 20px;
	color: var(--kk-eco-color-text);
	background: var(--kk-eco-color-white);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.kk-home-review__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.kk-home-review__stars {
	display: block;
	color: var(--kk-eco-color-accent);
	font-size: 16px;
	letter-spacing: 0px;
	line-height: 1;
}
.kk-home-review__header strong {
	letter-spacing: var(--kk-eco-font-spacing-text-alternative);
	font-size: 16px;
	background-color: var(--kk-eco-color-primary-dark);
	font-family: var(--kk-eco-font-primary);
	color: var(--kk-eco-color-white);
	padding: 6px 8px;	
	line-height: 1;
	font-weight: 500;
	border-radius: 4px;
}
.kk-home-review p {
	font-family: var(--kk-eco-font-secondary);
	font-size: 14px;
	line-height: 1.5;
}
.kk-home-story__more {
	margin-top: 16px;
}

/* Blog */
.kk-home-blog__track { min-width: max-content !important; }
.kk-home-blog-card {
	flex: 0 0 400px;
	overflow: hidden;
	background: var(--kk-eco-color-primary-dark-bg);
	border-radius: 8px;
	box-shadow: var(--kk-eco-shadow-xs);
}
.kk-home-blog-card figure {
	width: 100%;
	height: 220px;
	overflow: hidden;
}
.kk-home-blog-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kk-eco-transition); }
.kk-home-blog-card:hover figure img { transform: scale(1.04); }
.kk-home-blog-card div { padding: 20px; }
.kk-home-blog-card h3 {
	font-size: 18px;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.15;
	height: 42px;
	color: var(--kk-eco-color-white);
	font-family: var(--kk-eco-font-secondary);
	letter-spacing: var(--kk-eco-font-spacing-text);
}
.kk-home-blog-card p {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 64px;
	color: var(--kk-eco-color-white);
	font-family: var(--kk-eco-font-secondary);
	letter-spacing: var(--kk-eco-font-spacing-text);
}
.kk-home-blog-card span {
	display: block;
	margin-top: 16px;
	color: var(--kk-eco-color-secondary);
	font-size: 14px;
	text-align: right;
	font-weight: 600;
	transition: letter-spacing .2s ease;
}
.kk-home-blog-card span:hover {
	text-decoration: underline;
	letter-spacing: .1em;
}
.kk-home-blog__more {
	margin-top: 32px; 
}

/* FAQ */
.kk-home-faq__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; }
.kk-home-faq .kk-home-section__header { width: min(100%, 520px); margin-bottom: 0; }
.kk-home-faq__list {
	display: flex;
	width: 50%;
	flex-direction: column;
	gap: 16px;
}
.kk-home-faq .kk-eco-accordion { border-color: var(--kk-eco-color-secondary); }
.kk-home-faq .kk-eco-accordion__trigger { color: var(--kk-eco-color-white); }
.kk-home-faq .kk-eco-accordion__inner {
	color: var(--kk-eco-color-white);
	font-size: 14px;
}
.kk-eco-accordion__icon {
	color: var(--kk-eco-color-secondary);
}
.kk-home-faq__more {
	align-self: flex-end;
	margin-top: 16px;
	color: var(--kk-eco-color-white);
}




@media(max-width: 1250px) {
	.kk-home-hero__wordmark {
		width: 550px;
	}
	.kk-home-hero__title-line {
		font-size: 48px;
	}
	.kk-home-hero__kicker {
		font-size: 24px;
	}
	.kk-home-hero__inner {
		--hero-image-left: 430px;
	}
}
@media(max-width: 1100px) {
	.kk-home-hero__inner {
		--hero-image-left: 38.75%;
	}
}
@media(max-width: 1050px) {
	.kk-home-hero__media {
		clip-path: polygon(136px 0, 100% 0, 100% 100%, 0 100%);
	}
	.kk-home-hero__inner {
		--hero-image-left: 405px;
	}
}

@media (max-width: 900px) {
	.kk-home-hero__inner {
		min-height: 620px;
		padding-top: 64px;
		padding-bottom: 110px;
	}
	.kk-home-hero__media {
		inset: 144px 0 0;
		clip-path: none;
		z-index: 1;
	}
	.kk-home-hero__media::before {
		position: absolute;
		display: block;
		inset: 0;
		z-index: 2;
		content: "";
		background: linear-gradient(
			90deg,
			rgba(0, 27, 3, 1) 5%,
			rgba(102, 102, 102, 0) 80%
		);
		opacity: .5;
		pointer-events: none;
	}
	
	.kk-home-hero__photo { object-position: 75% center; }
	.kk-home-hero__content { width: 100%; }
	.kk-home-hero__wordmark--desktop { display: none; }
	.kk-home-hero__wordmark--mobile { display: block; width: min(100%, 470px); }
	.kk-home-hero__title-line {
		font-size: clamp(40px, 8vw, 50px);
		color: var(--kk-eco-color-white);
		font-weight: 500;
	}
	.kk-home-hero__kicker {
		font-size: clamp(18px, 4.5vw, 24px);
		color: var(--kk-eco-color-white);
		font-weight: 600;
	}
	.kk-home-hero__copy {
		width: 52%;
		margin-top: 32px;
		color: var(--kk-eco-color-white);
	}
	.kk-home-hero__benefits {
		gap: 0px;
		bottom: -64px;
		padding: 8px 0;
		background-color: var(--kk-eco-color-white);
		border-radius: 8px;
		margin-inline: 28px;
	}
	.kk-home-hero__benefit {
		min-height: 100px;
		flex-direction: column;
		gap: 12px;
		padding: 8px;
		text-align: center;
		border-radius: 0;
		box-shadow: none;
	}
	.kk-home-hero__benefit:first-of-type {
		border-radius: 8px 0 0 8px;
		border-right: 1px solid rgba(0, 27, 3, .15);
	}
	.kk-home-hero__benefit:last-of-type {
		border-radius: 0 8px 8px 0;
		border-left: 1px solid rgba(0, 27, 3, .15);
	}
	.kk-home-hero__benefit-icon { height: 38px; }
	.kk-home-hero__benefit strong { font-size: 12px; }
	.kk-home-hero__benefit span { font-size: 10px; }
	.kk-home-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.kk-home-relax__inner, .kk-home-story__inner, .kk-home-faq__inner { flex-direction: column; }
	.kk-home-relax__copy, .kk-home-relax__points, .kk-home-story__copy, .kk-home-story__figure, .kk-home-faq .kk-home-section__header, .kk-home-faq__list { width: 100%; max-width: none; }
	
	.kk-home-relax__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.kk-home-relax__copy,
	.kk-home-relax__copy .kk-home-richtext {
		display: contents;
	}
	.kk-home-relax__heading {
		order: 1;
	}
	.kk-home-relax__copy .kk-home-richtext > p:first-child {
		order: 2;
		margin-top: 24px;
	}
	.kk-home-relax__points {
		order: 3;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		margin-block: 48px 32px;
		padding-top: 30px;
	}
	.kk-home-relax__points::before {
		top: 0;
	}
	.kk-home-relax__points li {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		text-align: center;
	}
	.kk-home-relax__points li::after,
	.kk-home-relax__points li:nth-child(-n + 2)::after {
		content: "";
		position: absolute;
		top: -35px;
		left: 50%;
		width: 2px;
		height: 10px;
		background: #3E8208;
		transform: translateX(-50%);
	}
	.kk-home-relax__points img {
		width: 40px;
		height: 40px;
	}
	.kk-home-relax__points span {
		width: auto;
		max-width: 92px;
		font-size: 12px;
		font-weight: var(--kk-eco-font-weight-medium);
		line-height: 1.35;
		letter-spacing: 0;
	}
	.kk-home-relax__copy .kk-home-richtext > p:nth-child(n + 2) {
		order: 4;
	}
	
	
	.kk-home-nature { flex-direction: column; }
	.kk-home-nature__media, .kk-home-nature__content { width: 100%; }
	.kk-home-nature__media { height: 340px; }


	.kk-home-products .kk-eco-product-slider__viewport,
	.kk-home-products .kk-eco-product-slider__viewport,
	.kk-home-reviews .kk-eco-product-slider__viewport,
	.kk-home-blog .kk-eco-product-slider__viewport {
		margin-left: -28px !important;
		margin-right: -28px !important;
		width: 100vw;
		max-width: unset !important;
	}
	.kk-home-products .kk-eco-product-slider__track,
	.kk-home-products .kk-eco-product-slider__track,
	.kk-home-reviews .kk-eco-product-slider__track,
	.kk-home-blog .kk-eco-product-slider__track {
		padding-inline: 28px !important;
	}
	.kk-home-nature .kk-home-nature__content {
		padding: 64px 28px 136px;
	}

	.kk-home-story__inner--main,
	.kk-home-faq__inner {
		flex-direction: column;
		gap: 32px;
	}

	.kk-home-blog-card {
		flex: 0 0 320px;
	}
}

@media(max-width: 767px) {
	.kk-home-hero__benefits {
		margin-inline: 20px;
	}

	.kk-home-products .kk-eco-product-slider__viewport,
	.kk-home-products .kk-eco-product-slider__viewport,
	.kk-home-reviews .kk-eco-product-slider__viewport,
	.kk-home-blog .kk-eco-product-slider__viewport {
		margin-left: -20px !important;
		margin-right: -20px !important;
	}
	.kk-home-products .kk-eco-product-slider__track,
	.kk-home-products .kk-eco-product-slider__track,
	.kk-home-reviews .kk-eco-product-slider__track,
	.kk-home-blog .kk-eco-product-slider__track {
		padding-inline: 20px !important;
	}

	.kk-home-section .kk-eco-product-slider__button {
		display: none !important;
		visibility: hidden;
	}
	.kk-home-categories__grid {
		gap: 12px;
	}
	.kk-home-category__content {
		padding: 16px 14px 32px;
		width: 100%;
		padding-bottom: 32px;
	}
	.kk-home-category__image {
		width: 128px;
	}

	.kk-home-blog-card figure {
		height: 180px;
	}
}

@media (max-width: 600px) {
	.kk-home-section__header { margin-bottom: 28px; }
	.kk-home-hero__inner { min-height: 650px; padding-inline: 20px; }
	.kk-home-hero__media { right: 0; left: 0; }
	.kk-home-hero__copy { width: 58%; font-size: 14px; }
	.kk-home-category__link { min-height: 138px; }
	.kk-home-nature__media { height: 260px; }
	.kk-home-nature__content { padding: 40px 20px 54px; }
	.kk-home-review { flex-basis: 280px; width: 280px; }
	.kk-home-blog-card { flex-basis: 280px; width: 280px; }
}

@media(max-width: 550px){
	.kk-home-hero__inner {
		min-height: 540px;
	}
	.kk-home-hero__wordmark--mobile {
		width: 300px;
	}
	.kk-home-hero__media {
		inset: 115px 0 0;
	}
	.kk-home-hero__title-line {
		font-size: 40px;
	}
	.kk-home-hero__kicker {
		font-size: 18px;
		font-weight: 500;
	}
}

@media(max-width: 450px) {
	.kk-home-hero__inner {
		min-height: 580px;
	}
	.kk-home-hero__photo {
		object-position: 80% center;
	}
	.kk-home-hero__benefit strong {
		font-size: 10px;
	}
	.kk-home-hero__benefit span {
		font-size: 9px;
	}

	.kk-home-categories__grid {
		gap: 8px;
	}
	.kk-home-category__content {
		padding: 16px 12px 32px;
	}
	.kk-home-category h3 {
		font-size: 16px;
    }
	.kk-home-category p {
		font-size: 11px;
	}
	.kk-home-category__image {
		width: 100px;
	}


	.kk-home-relax__points {
		padding-top: 24px;
	}
	.kk-home-relax__points li::after, .kk-home-relax__points li:nth-child(-n + 2)::after {
		top: -29px;
	}
	.kk-home-relax__points img {
		width: 32px;
		height: 32px;
	}
	.kk-home-relax__points span {
		font-size: 10px;
	}

}