/*
 * kl-commerce/assets/css/home.css
 *
 * Homepage section layouts. Enqueued only on the front page.
 */

.klc-main--flush {
	padding-block: 0;
}

/* ---- Hero ---------------------------------------------------------- */

.klc-hero {
	position: relative;
	min-block-size: var(--klc-hero-height, 70svh);
	overflow: hidden;
	background-color: var(--klc-color-bg);
}

.klc-hero--media {
	align-items: flex-end;
	color: var(--klc-color-on-media);
}

.klc-hero--media .klc-hero__headline,
.klc-hero--media .klc-hero__sub,
.klc-hero--media .klc-hero__eyebrow {
	color: var(--klc-color-on-media);
}

.klc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.klc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--klc-color-scrim);
}

/*
 * The two sizing declarations carry !important, for the same reason as the
 * product card in components.css.
 *
 * WooCommerce's stylesheet contains `.woocommerce img, .woocommerce-page img
 * { height: auto }`. That is one class and an element, which outranks a single
 * class name here, and the body picks up woocommerce-page on the shop, the
 * category archives and every product — but not on the front page. So these
 * images filled their boxes on the homepage and stopped short everywhere else,
 * leaving a band of background under each one.
 */
.klc-hero__image,
.klc-hero__video {
	inline-size: 100% !important;
	block-size: 100% !important;
	object-fit: cover;
}

/*
 * The inner box is the positioning frame: it inherits the hero's height and
 * keeps the page gutter, so 0% and 100% land against the text edges rather
 * than against the raw viewport.
 */
.klc-hero__inner {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * Placement is two percentages, not three named slots.
 *
 * The inset is a percentage of the hero; the translate is the same percentage
 * of the block's own size. Those cancel at the edges and agree in the middle,
 * so 0 sits flush against the start edge, 50 is genuinely centred and 100 is
 * flush against the far edge — with every value in between behaving the way
 * dragging a slider suggests it should.
 */
.klc-hero__content {
	position: absolute;
	inset-inline-start: var(--klc-hero-x, 0%);
	inset-block-start: var(--klc-hero-y, 70%);
	inline-size: var(--klc-hero-w, 46%);
	transform: translate(
		calc(var(--klc-hero-x, 0%) * -1 * var(--klc-hero-dir, 1)),
		calc(var(--klc-hero-y, 70%) * -1)
	);
	/*
	 * No gutter padding and no width cap here. Both were quietly holding the
	 * block a fixed distance off each edge, so the slider ran out of travel
	 * before the text ever reached the side of the screen. The range is the
	 * whole hero now; the defaults sit a few percent in so the shipped look is
	 * unchanged, and going flush is a choice rather than an impossibility.
	 */
	text-align: var(--klc-hero-align, start);
}

/* translate is physical, inset-inline-start is not — flip one in RTL. */
[dir="rtl"] .klc-hero {
	--klc-hero-dir: -1;
}

.klc-hero__content > * + * {
	margin-block-start: var(--klc-space-sm);
}

.klc-hero__eyebrow {
	margin: 0;
	color: var(--klc-color-muted);
	text-transform: uppercase;
}

.klc-hero__headline {
	margin: 0;
	font-size: min(
		calc(var(--klc-size-h1) * var(--klc-fs-floor-h1) + var(--klc-fs-fluid-h1)),
		var(--klc-size-h1)
	);
}

/*
 * No separate reading-measure cap here. The block width slider is the measure
 * control, and a second max-width inside it only fights the setting — at 100%
 * width the sub would still stop at 68ch and look accidentally left-aligned.
 */
.klc-hero__sub {
	margin: 0;
	font-size: var(--klc-size-lg);
	color: var(--klc-color-muted);
}

.klc-hero__actions {
	margin: 0;
	padding-block-start: var(--klc-space-2xs);
}

/* Preview the placement frame while the Customizer is open. */
.klc-hero__content:focus-within {
	outline: none;
}

/* ---- Shop by category ---------------------------------------------- */

/*
 * Three column counts arrive together as inline custom properties and each
 * breakpoint picks the one it needs. One inline style, no per-device classes,
 * and the same pattern for every grid that offers the control.
 */
.klc-categories__grid {
	display: grid;
	grid-template-columns: repeat(var(--klc-cols-mobile, 2), minmax(0, 1fr));
	gap: var(--klc-space-2xs);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.klc-categories__grid {
		grid-template-columns: repeat(var(--klc-cols-tablet, 3), minmax(0, 1fr));
		gap: var(--klc-space-sm);
	}
}

@media (min-width: 1024px) {

	.klc-categories__grid {
		grid-template-columns: repeat(var(--klc-cols-desktop, 3), minmax(0, 1fr));
	}
}

.klc-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--klc-color-surface);
}

.klc-tile__media {
	position: absolute;
	inset: 0;
	display: block;
}

.klc-tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--klc-color-scrim);
	opacity: 0;
	transition: opacity var(--klc-duration-base) var(--klc-ease);
}

.klc-tile:hover .klc-tile__media::after,
.klc-tile:focus-visible .klc-tile__media::after {
	opacity: 1;
}

.klc-tile__img {
	inline-size: 100% !important;
	block-size: 100% !important;
	object-fit: cover;
	transition: transform var(--klc-duration-slow) var(--klc-ease);
}

.klc-tile:hover .klc-tile__img {
	transform: scale(1.03);
}

.klc-tile__label {
	position: absolute;
	inset-block-end: var(--klc-space-2xs);
	inset-inline-start: var(--klc-space-2xs);
	z-index: 1;
	padding-block: var(--klc-space-3xs);
	padding-inline: var(--klc-space-2xs);
	background-color: var(--klc-color-bg);
	color: var(--klc-color-text);
	text-transform: uppercase;
}

/* ---- Horizontal rail ----------------------------------------------- */

.klc-rail {
	display: flex;
	gap: var(--klc-space-sm);
	margin-block: 0;
	padding-block-end: var(--klc-space-2xs);
	/*
	 * The rail bleeds to the viewport edge but its first card has to line up
	 * with the section heading, which sits inside a centred container. Match
	 * that container's left edge, never less than the page gutter.
	 */
	--klc-rail-inset: max(
		var(--klc-gutter),
		calc((100% - var(--klc-maxw-content)) / 2)
	);
	padding-inline: var(--klc-rail-inset);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--klc-rail-inset);
	list-style: none;
	scrollbar-width: thin;
	overscroll-behavior-inline: contain;
}

.klc-rail__item {
	flex: 0 0 auto;
	inline-size: 60%;
	scroll-snap-align: start;
}

@media (min-width: 768px) {

	.klc-rail__item {
		inline-size: 30%;
	}
}

@media (min-width: 1024px) {

	.klc-rail {
		gap: var(--klc-space-md);
	}

	.klc-rail__item {
		inline-size: 22%;
	}
}

/* The rail is focusable so it can be scrolled from the keyboard. */
.klc-rail:focus-visible {
	outline: var(--klc-ring-width) solid var(--klc-color-accent);
	outline-offset: calc(var(--klc-ring-offset) * -1);
}

/* ---- Lookbook ------------------------------------------------------ */

.klc-lookbook__inner {
	display: grid;
	gap: var(--klc-space-md);
	align-items: center;
}

@media (min-width: 768px) {

	.klc-lookbook__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--klc-space-xl);
	}

	.klc-lookbook--flip .klc-lookbook__media {
		order: 2;
	}

	.klc-lookbook--text-only .klc-lookbook__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

.klc-lookbook__media {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--klc-color-surface);
}

.klc-lookbook__img {
	inline-size: 100% !important;
	block-size: 100% !important;
	object-fit: cover;
}

.klc-lookbook__title {
	font-size: var(--klc-size-h2);
	margin: 0;
}

.klc-lookbook__body {
	max-inline-size: var(--klc-maxw-text);
	font-size: var(--klc-size-lg);
}

/* ---- Trust strip --------------------------------------------------- */

.klc-trust {
	border-block: var(--klc-border-width) solid var(--klc-color-border);
	padding-block: var(--klc-space-lg);
}

.klc-trust__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--klc-space-md);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.klc-trust__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--klc-space-lg);
	}
}

.klc-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--klc-space-2xs);
}

.klc-trust__icon {
	flex: none;
	margin-block-start: var(--klc-space-3xs);
	color: var(--klc-color-text);
}

.klc-trust__body {
	display: flex;
	flex-direction: column;
	gap: var(--klc-space-3xs);
}

.klc-trust__title {
	text-transform: uppercase;
}

/* ---- Newsletter ---------------------------------------------------- */

.klc-newsletter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--klc-space-sm);
	text-align: center;
}

.klc-newsletter__title {
	font-size: var(--klc-size-h3);
	margin: 0;
}

.klc-newsletter__body {
	margin: 0;
}

.klc-newsletter__form {
	inline-size: 100%;
	max-inline-size: var(--klc-maxw-narrow);
	padding-block-start: var(--klc-space-2xs);
}

/* ---- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.klc-tile:hover .klc-tile__img {
		transform: none;
	}

	.klc-rail {
		scroll-snap-type: none;
	}
}


/* ---- Scrolling strip ----------------------------------------------- */

.klc-marquee {
	overflow: hidden;
	padding-block: var(--klc-space-sm);
	border-block: var(--klc-border-width) solid var(--klc-color-border);
}

.klc-marquee__track {
	display: flex;
	inline-size: max-content;
	gap: var(--klc-space-2xl);
	padding-inline-end: var(--klc-space-2xl);
	animation: klc-marquee var(--klc-marquee-speed, 40s) linear infinite;
}

.klc-marquee__item {
	flex: none;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--klc-color-muted);
}

/*
 * The line is printed twice and the track travels exactly half its own width,
 * so the second copy lands where the first started and the loop has no seam.
 */
@keyframes klc-marquee {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

[dir="rtl"] .klc-marquee__track {
	animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {

	.klc-marquee__track {
		animation: none;
		inline-size: 100%;
		justify-content: center;
	}

	.klc-marquee__item[aria-hidden="true"] {
		display: none;
	}
}

/* ---- Promo tiles --------------------------------------------------- */

.klc-promo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--klc-space-sm);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.klc-promo__grid[data-count="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--klc-space-md);
	}
}

.klc-promo__tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--klc-color-surface);
}

.klc-promo__media {
	position: absolute;
	inset: 0;
	display: block;
}

.klc-promo__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--klc-color-scrim);
}

.klc-promo__img {
	inline-size: 100% !important;
	block-size: 100% !important;
	object-fit: cover;
	transition: transform var(--klc-duration-slow) var(--klc-ease);
}

.klc-promo__tile:hover .klc-promo__img {
	transform: scale(1.03);
}

.klc-promo__body {
	position: absolute;
	inset-block-end: var(--klc-space-md);
	inset-inline-start: var(--klc-space-md);
	inset-inline-end: var(--klc-space-md);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--klc-space-3xs);
	color: var(--klc-color-on-media);
}

.klc-promo__eyebrow {
	text-transform: uppercase;
	letter-spacing: var(--klc-tracking-nav);
	opacity: 0.85;
}

.klc-promo__title {
	font-family: var(--klc-font-heading);
	font-weight: var(--klc-weight-heading);
	font-size: var(--klc-size-h4);
	line-height: var(--klc-leading-tight);
}

.klc-promo__link {
	padding-block-start: var(--klc-space-3xs);
	border-block-end: var(--klc-border-width) solid currentColor;
}

@media (prefers-reduced-motion: reduce) {

	.klc-promo__tile:hover .klc-promo__img {
		transform: none;
	}
}

/* ---- Brand story --------------------------------------------------- */

.klc-story {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: 42svh;
	padding-block: var(--klc-space-2xl);
	overflow: hidden;
	background-color: var(--klc-color-surface);
}

.klc-story--media {
	color: var(--klc-color-on-media);
}

.klc-story__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.klc-story__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--klc-color-scrim);
}

.klc-story__img {
	inline-size: 100% !important;
	block-size: 100% !important;
	object-fit: cover;
}

.klc-story__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
}

.klc-story__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--klc-space-sm);
	max-inline-size: var(--klc-maxw-narrow);
	margin-inline: auto;
	text-align: center;
}

.klc-story__eyebrow {
	margin: 0;
	text-transform: uppercase;
	opacity: 0.8;
}

.klc-story__title {
	margin: 0;
	font-size: var(--klc-size-h2);
}

.klc-story__body {
	margin: 0;
	max-inline-size: var(--klc-maxw-text);
	font-size: var(--klc-size-lg);
}

.klc-story__actions {
	margin: 0;
	padding-block-start: var(--klc-space-2xs);
}

.klc-story--media .klc-button {
	background-color: var(--klc-color-on-media);
	color: var(--klc-color-text);
	border-color: var(--klc-color-on-media);
}

.klc-story--media .klc-button:hover {
	background-color: transparent;
	color: var(--klc-color-on-media);
}

/* ---- Instagram grid ------------------------------------------------- */

.klc-insta__grid {
	display: grid;
	grid-template-columns: repeat(var(--klc-cols-mobile, 2), minmax(0, 1fr));
	gap: var(--klc-space-sm);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.klc-insta__grid {
		grid-template-columns: repeat(var(--klc-cols-tablet, 4), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.klc-insta__grid {
		grid-template-columns: repeat(var(--klc-cols-desktop, 6), minmax(0, 1fr));
	}
}

/* A feed plugin brings its own grid; just give it room. */
.klc-insta__embed > *:first-child {
	margin-block-start: 0;
}

.klc-insta__embed > *:last-child {
	margin-block-end: 0;
}

.klc-insta__tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background-color: var(--klc-color-surface);
}

.klc-insta__img {
	inline-size: 100% !important;
	block-size: 100% !important;
	object-fit: cover;
	transition: transform var(--klc-duration-slow) var(--klc-ease);
}

.klc-insta__tile:hover .klc-insta__img {
	transform: scale(1.05);
}

.klc-insta__mark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--klc-color-scrim);
	color: var(--klc-color-on-media);
	opacity: 0;
	transition: opacity var(--klc-duration-base) var(--klc-ease);
}

.klc-insta__tile:hover .klc-insta__mark,
.klc-insta__tile:focus-visible .klc-insta__mark {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.klc-insta__tile:hover .klc-insta__img {
		transform: none;
	}
}


/* ---- Auto carousel -------------------------------------------------- */

/*
 * Edge to edge, and continuous.
 *
 * The set is printed twice and the track travels exactly half its own width,
 * so the second copy arrives where the first began and the loop has no seam.
 * That is why this is an animation on a doubled list rather than a scroller
 * with a timer: nothing to reset, nothing to catch up, and no JavaScript
 * running while the strip is off screen.
 */
.klc-carousel {
	overflow: hidden;
	inline-size: 100%;
}

.klc-carousel__track {
	display: flex;
	inline-size: max-content;
	gap: var(--klc-space-2xs);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
	animation: klc-carousel var(--klc-carousel-speed, 60s) linear infinite;
	will-change: transform;
}

/* Reverse, not a second keyframe set — the travel is identical either way. */
.klc-carousel[data-dir="right"] .klc-carousel__track {
	animation-direction: reverse;
}

.klc-carousel:hover .klc-carousel__track,
.klc-carousel:focus-within .klc-carousel__track {
	animation-play-state: paused;
}

.klc-carousel__item {
	flex: 0 0 auto;
	inline-size: calc(
		(100vw - (var(--klc-carousel-cols-m, 2) + 1) * var(--klc-space-2xs))
		/ var(--klc-carousel-cols-m, 2)
	);
}

@media (min-width: 768px) {

	.klc-carousel__track {
		gap: var(--klc-space-sm);
	}

	.klc-carousel__item {
		inline-size: calc(
			(100vw - (var(--klc-carousel-cols-t, 3) + 1) * var(--klc-space-sm))
			/ var(--klc-carousel-cols-t, 3)
		);
	}
}

@media (min-width: 1024px) {

	.klc-carousel__item {
		inline-size: calc(
			(100vw - (var(--klc-carousel-cols-d, 5) + 1) * var(--klc-space-sm))
			/ var(--klc-carousel-cols-d, 5)
		);
	}
}

@keyframes klc-carousel {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/*
 * Reduced motion turns it back into something you move yourself, rather than
 * freezing half a strip in place.
 */
@media (prefers-reduced-motion: reduce) {

	.klc-carousel {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.klc-carousel__track {
		animation: none;
	}

	.klc-carousel__item {
		scroll-snap-align: start;
	}

	/* The duplicate set is decoration; without movement it is just clutter. */
	.klc-carousel__item[aria-hidden="true"] {
		display: none;
	}
}

/* The strip runs full width, so its heading keeps the container gutter. */
.klc-insta--carousel .klc-container {
	padding-inline: var(--klc-gutter);
}