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

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

/*
 * Full-bleed, and anchored to the left margin rather than centred. The pale
 * gradient that used to sit here read as a photograph that had not loaded;
 * with no image set the hero now falls back to the brand's own ground.
 */
.kk-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(28rem, 20rem + 28vw, 46rem);
	padding-block: var(--kk-section);
	overflow: hidden;
}

.kk-hero--brand {
	background:
		radial-gradient(120% 90% at 15% 110%, #3A2A18 0%, transparent 60%),
		linear-gradient(155deg, var(--kk-brown) 0%, var(--kk-brown-deep) 70%);
	color: var(--kk-white);
}

/* The emblem, oversized and half off the frame — a watermark, not a logo. */
.kk-hero__watermark {
	position: absolute;
	right: -4%;
	bottom: -12%;
	width: clamp(18rem, 14rem + 22vw, 34rem);
	height: auto;
	opacity: .1;
	pointer-events: none;
}

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

/*
 * A scrim weighted to the bottom-left, where the type is — an even wash over
 * the whole frame dulls the photograph for no reason.
 */
.kk-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(20, 15, 10, .72) 0%, rgba(20, 15, 10, .34) 45%, rgba(20, 15, 10, .05) 75%),
		linear-gradient(0deg, rgba(20, 15, 10, .45) 0%, transparent 45%);
}

/*
 * No max-width here: .kk-wrap--wide centres itself with auto margins, so a cap
 * on this element would centre the whole block rather than pin it to the left
 * margin. The children carry their own measure instead.
 */
.kk-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kk-gap-s);
	text-align: left;
}

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

.kk-hero__title {
	margin: 0;
	max-width: 14ch;
	color: var(--kk-white);
	font-size: clamp(2.6rem, 1.8rem + 3.4vw, 5rem);
	line-height: 1.02;
	letter-spacing: -.005em;
}

.kk-hero__copy {
	margin: 0;
	max-width: 42ch;
	color: rgba(255, 255, 255, .84);
	font-size: var(--kk-step-1);
}

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

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

.kk-hero .kk-btn:hover {
	background: var(--kk-gold);
	border-color: var(--kk-gold);
	color: var(--kk-brown-deep);
}

/* ------------------------------------------------------------- editorial -- */

/*
 * Image beside writing, in a two-column split that reverses on request. This
 * is the section that carries the brand's actual argument, so it is given the
 * width to make it rather than a badge to hint at it.
 */
.kk-editorial {
	padding-block: var(--kk-section);
	background: var(--kk-shell);
}

.kk-editorial--dark {
	background: var(--kk-brown-deep);
	color: #E9E1D6;
}

.kk-editorial__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.kk-editorial--flip .kk-editorial__media { order: 2; }

.kk-editorial__media {
	overflow: hidden;
	border-radius: var(--kk-radius);
	aspect-ratio: 5 / 4;
}

.kk-editorial__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kk-editorial__blank {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(90% 70% at 50% 40%, #3A2A18 0%, transparent 65%),
		linear-gradient(150deg, var(--kk-brown) 0%, var(--kk-brown-deep) 100%);
}

.kk-editorial__blank img { width: 38%; height: auto; opacity: .85; }

.kk-editorial__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kk-gap-s);
	max-width: 34rem;
}

.kk-editorial--dark .kk-eyebrow { color: var(--kk-gold-light); }

.kk-editorial__title {
	margin: 0;
	font-size: var(--kk-step-3);
	max-width: 18ch;
}

.kk-editorial--dark .kk-editorial__title { color: var(--kk-white); }

.kk-editorial__copy {
	margin: 0;
	color: var(--kk-muted);
	font-size: var(--kk-step-1);
}

.kk-editorial--dark .kk-editorial__copy { color: rgba(233, 225, 214, .82); }

.kk-editorial__actions { margin: var(--kk-gap-xs) 0 0; }

/* Gold reads as gold on the dark panel only if the ink on it is dark. */
.kk-editorial--dark .kk-btn--gold {
	background: var(--kk-gold);
	border-color: var(--kk-gold);
	color: var(--kk-brown-deep);
}

.kk-editorial--dark .kk-btn--gold:hover {
	background: var(--kk-gold-light);
	border-color: var(--kk-gold-light);
	color: var(--kk-brown-deep);
}

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

/*
 * A rail of tall portrait crops with the name set on the image. Square tiles
 * with a centred caption and a "5 pieces" count underneath crop the drape out
 * of a garment shot and turn the row into a directory listing.
 */
.kk-cats__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--kk-gap-s);
}

.kk-cats__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--kk-radius);
	background: var(--kk-rule-soft);
	aspect-ratio: 3 / 4;
	text-decoration: none;
}

.kk-cats__media,
.kk-cats__media img,
.kk-cats__blank {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kk-cats__media img { transition: transform .6s var(--kk-ease); }
.kk-cats__tile:hover .kk-cats__media img { transform: scale(1.05); }

.kk-cats__blank {
	background: linear-gradient(150deg, var(--kk-rule-soft), var(--kk-gold-soft));
}

/* The name reads over the photograph, so it carries its own gradient. */
.kk-cats__tile::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 48%;
	background: linear-gradient(0deg, rgba(20, 15, 10, .72) 0%, rgba(20, 15, 10, .12) 62%, transparent 100%);
}

.kk-cats__name {
	position: absolute;
	z-index: 1;
	left: var(--kk-gap-s);
	right: var(--kk-gap-s);
	bottom: var(--kk-gap-s);
	color: var(--kk-white);
	font-family: var(--kk-display);
	font-size: var(--kk-step-2);
	line-height: 1.15;
}

/* --------------------------------------------------------------- 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); }

/* Card text follows the image's left edge — a centred caption under a
   left-aligned photograph has nothing to line up with. */
.kk-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
	padding-top: .15rem;
	text-align: left;
}

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

.kk-card__stars { margin-top: .1rem; }

.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); }

/*
 * WooCommerce renders ratings as a webfont: .star-rating is a 5.4em box with
 * overflow hidden and its glyphs in ::before. inc/reviews.php filters that
 * markup to the SVG stars above, so the webfont box has to be stood down or it
 * clips them and paints a second row of phantom stars underneath. Lives here
 * beside .kk-star because ratings appear outside the product page too.
 */
.star-rating.kk-stars {
	display: inline-flex;
	gap: .1rem;
	width: auto;
	height: auto;
	overflow: visible;
	font-size: inherit;
	line-height: 1;
}

.star-rating.kk-stars::before,
.star-rating.kk-stars span,
.star-rating.kk-stars span::before { content: none; display: none; }

.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; }

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

@media (max-width: 1024px) {
	.kk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kk-editorial__inner { grid-template-columns: 1fr; gap: var(--kk-gap-l); }
	.kk-editorial--flip .kk-editorial__media { order: 0; }
	.kk-editorial__media { aspect-ratio: 16 / 9; }
	.kk-editorial__text { max-width: none; }
}

@media (max-width: 860px) {
	/*
	 * The rail scrolls rather than wrapping: five categories squeezed into a
	 * two-column grid gives a ragged last row, and a swipe is the gesture
	 * people already use on a phone.
	 */
	.kk-cats__rail {
		grid-auto-columns: 62vw;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(50% - 50vw);
		padding-inline: max(1.125rem, calc(50vw - var(--kk-wide) / 2));
		scrollbar-width: none;
	}

	.kk-cats__rail::-webkit-scrollbar { display: none; }
	.kk-cats__tile { scroll-snap-align: start; }

	.kk-section-head { align-items: flex-end; }
}

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

@media (max-width: 640px) {
	.kk-section-head { flex-direction: column; align-items: flex-start; gap: var(--kk-gap-xs); }
	.kk-section-head__more { padding-bottom: 0; }
}

@media (max-width: 480px) {
	.kk-cats__rail { grid-auto-columns: 76vw; }
	.kk-hero__title { font-size: clamp(2.3rem, 1.6rem + 4vw, 3rem); }
}