/* KomKits — home page sections and the shared product card. */

/* ------------------------------------------------------------------ hero -- */

.kk-hero {
	display: grid;
	place-items: center;
	min-height: clamp(24rem, 18rem + 22vw, 40rem);
	padding-block: var(--kk-section);
	background: linear-gradient(160deg, var(--kk-cream) 0%, #F2E9DA 58%, #EADFCB 100%);
	text-align: center;
}

.kk-hero--image {
	background-size: cover;
	background-position: center;
	position: relative;
	color: var(--kk-white);
}

/* Only the photographic variant needs a scrim. */
.kk-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 15, 10, .12), rgba(20, 15, 10, .5));
}

.kk-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kk-gap-s);
	max-width: 46rem;
}

.kk-hero--image .kk-hero__inner { position: relative; z-index: 1; }

.kk-hero__eyebrow {
	margin: 0;
	font-size: var(--kk-step--1);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--kk-gold-deep);
}

.kk-hero--image .kk-hero__eyebrow { color: var(--kk-gold-soft); }

.kk-hero__title {
	margin: 0;
	font-size: var(--kk-step-4);
	line-height: 1.1;
}

.kk-hero--image .kk-hero__title { color: var(--kk-white); }

.kk-hero__copy {
	margin: 0;
	max-width: 46ch;
	color: var(--kk-muted);
	font-size: var(--kk-step-1);
}

.kk-hero--image .kk-hero__copy { color: rgba(255, 255, 255, .9); }

.kk-hero__actions { margin: var(--kk-gap-s) 0 0; }

.kk-hero--image .kk-btn {
	background: var(--kk-white);
	border-color: var(--kk-white);
	color: var(--kk-brown);
}

/* ----------------------------------------------------------- quick links -- */

.kk-quick__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--kk-gap-m);
}

.kk-quick__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	padding: var(--kk-gap-s);
	text-align: center;
	text-decoration: none;
}

.kk-quick__disc {
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	margin-bottom: .35rem;
	border-radius: 50%;
	background: var(--kk-cream);
	color: var(--kk-brown);
	transition: background .25s var(--kk-ease), transform .25s var(--kk-ease);
}

.kk-quick__item:hover .kk-quick__disc {
	background: var(--kk-gold-soft);
	transform: translateY(-3px);
}

.kk-quick__disc svg { width: 24px; height: 24px; }

.kk-quick__label {
	font-family: var(--kk-display);
	font-size: var(--kk-step-1);
	color: var(--kk-brown);
	line-height: 1.2;
}

.kk-quick__note {
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
	font-style: italic;
	max-width: 22ch;
}

/* ------------------------------------------------------------ categories -- */

.kk-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kk-gap-m);
}

.kk-cats__tile {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	text-decoration: none;
	text-align: center;
}

.kk-cats__media {
	display: block;
	overflow: hidden;
	border-radius: var(--kk-radius);
	background: var(--kk-rule-soft);
	aspect-ratio: 1;
}

.kk-cats__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--kk-ease);
}

.kk-cats__tile:hover .kk-cats__media img { transform: scale(1.045); }

.kk-cats__blank {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, var(--kk-rule-soft), var(--kk-gold-soft));
}

.kk-cats__name {
	font-family: var(--kk-display);
	font-size: var(--kk-step-2);
	color: var(--kk-brown);
}

.kk-cats__count {
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- product -- */

.kk-grid {
	display: grid;
	gap: var(--kk-gap-m);
}

.kk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kk-card {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin: 0;
}

.kk-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--kk-radius);
	background: var(--kk-rule-soft);
	aspect-ratio: 4 / 5;
}

.kk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--kk-ease);
}

.kk-card:hover .kk-card__media img { transform: scale(1.04); }

.kk-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	text-align: center;
}

.kk-card__title {
	margin: 0;
	font-size: var(--kk-step-0);
	font-family: var(--kk-display);
	line-height: 1.3;
}

.kk-card__title a { text-decoration: none; }
.kk-card__title a:hover { color: var(--kk-gold-deep); }

.kk-card__stars { display: flex; gap: .1rem; }

.kk-star {
	width: 13px;
	height: 13px;
	fill: var(--kk-rule);
}

.kk-star.is-on { fill: var(--kk-star); }

.kk-card__price {
	margin: 0;
	color: var(--kk-brown);
	font-size: var(--kk-step-0);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.kk-card__price del {
	margin-right: .4em;
	color: var(--kk-faint);
	font-weight: 400;
	text-decoration-thickness: 1px;
}

.kk-card__price ins { text-decoration: none; }

.kk-row__more {
	margin: var(--kk-gap-l) 0 0;
	text-align: center;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
	.kk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kk-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.kk-grid--4,
	.kk-grid--3,
	.kk-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-cats__name { font-size: var(--kk-step-1); }
}

@media (max-width: 420px) {
	.kk-quick__grid { grid-template-columns: 1fr; }
	.kk-quick__item { flex-direction: row; align-items: center; gap: var(--kk-gap-s); text-align: left; }
	.kk-quick__disc { margin: 0; flex: 0 0 auto; width: 3rem; height: 3rem; }
	.kk-quick__note { display: none; }
}