/*
 * kl-commerce/assets/css/components.css
 *
 * Reusable pieces: buttons, product card, grid. Loaded on every page because
 * the card and grid are shared with the shop archive.
 *
 * Literal values are structural only (ratios, counts, 0, 100%). Every design
 * value resolves through a token.
 */

/* ---- Buttons ------------------------------------------------------ */

.klc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--klc-space-2xs);
	padding-block: var(--klc-space-xs);
	padding-inline: var(--klc-space-md);
	background-color: var(--klc-color-accent);
	color: var(--klc-color-bg);
	border: var(--klc-border-width) solid var(--klc-color-accent);
	border-radius: var(--klc-radius-none);
	font-family: var(--klc-font-button);
	font-weight: var(--klc-weight-button);
	font-size: var(--klc-size-sm);
	letter-spacing: var(--klc-tracking-button);
	line-height: var(--klc-leading-tight);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--klc-duration-fast) var(--klc-ease),
		color var(--klc-duration-fast) var(--klc-ease);
}

.klc-button:hover {
	background-color: transparent;
	color: var(--klc-color-accent);
}

.klc-button--ghost {
	background-color: transparent;
	color: var(--klc-color-text);
	border-color: var(--klc-color-text);
}

.klc-button--ghost:hover {
	background-color: var(--klc-color-text);
	color: var(--klc-color-bg);
}

/* On media, the button flips to the on-media palette. */
.klc-hero--media .klc-button {
	background-color: var(--klc-color-on-media);
	color: var(--klc-color-text);
	border-color: var(--klc-color-on-media);
}

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

/* ---- Product grid -------------------------------------------------- */

.klc-grid {
	display: grid;
	gap: var(--klc-space-md) var(--klc-space-sm);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

.klc-grid--products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

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

/* ---- Product card -------------------------------------------------- */

.klc-card {
	position: relative;
	block-size: 100%;
}

.klc-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--klc-space-2xs);
	block-size: 100%;
}

.klc-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--klc-card-ratio, 3 / 4);
	/*
	 * The page colour, not the surface tint. Product photography is shot on
	 * white, so a tinted box behind it reads as a visible panel edge rather
	 * than as part of the card. The empty-state placeholder below keeps the
	 * tint, because there it is the point.
	 */
	background-color: var(--klc-color-bg);
	border-radius: var(--klc-radius-none);
}

/*
 * Every image is stacked. Only .is-active is painted; kl-shop-kit moves that
 * class between them behind an IntersectionObserver. No layout work happens
 * when the visible image changes, so 20 cards on screen stay cheap.
 */
/*
 * The two sizing declarations carry !important on purpose.
 *
 * WooCommerce ships `.woocommerce ul.products li.product img { height: auto }`
 * — three classes and an element, which outranks any class name this card can
 * reasonably use. Losing that one property leaves the image at its natural
 * ratio inside a fixed-ratio box, so it stops short of the bottom and the
 * card's own background shows through as a grey band under every product.
 *
 * The card also renders outside .woocommerce on the homepage, so the override
 * has to live here rather than in woocommerce.css, and specificity alone
 * cannot be relied on when a caching plugin is free to reorder stylesheets.
 */
.klc-card__img {
	position: absolute;
	inset: 0;
	inline-size: 100% !important;
	block-size: 100% !important;
	max-inline-size: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--klc-duration-base) var(--klc-ease);
}

.klc-card__img.is-active {
	opacity: 1;
}

.klc-card__img--empty {
	background-color: var(--klc-color-surface);
}

.klc-card__flag {
	position: absolute;
	inset-block-start: 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);
	font-family: var(--klc-font-nav);
	letter-spacing: var(--klc-tracking-nav);
	text-transform: uppercase;
	border-radius: var(--klc-radius-none);
}

.klc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--klc-space-3xs);
	padding-block-start: var(--klc-space-3xs);
}

.klc-card__title {
	font-size: var(--klc-size-sm);
	line-height: var(--klc-leading-tight);
}

.klc-card__price {
	color: var(--klc-color-muted);
}

.klc-card__price del {
	margin-inline-end: var(--klc-space-3xs);
	opacity: 0.6;
}

.klc-card__price ins {
	text-decoration: none;
	color: var(--klc-color-text);
}

/* Woo colours prices green by default; the theme's tokens decide here. */
.woocommerce .klc-card__price,
.woocommerce .klc-card__price ins,
.woocommerce .klc-card__price del {
	color: inherit;
}

.klc-card__link:hover .klc-card__title {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---- Section furniture --------------------------------------------- */

.klc-section {
	padding-block: var(--klc-space-xl);
}

@media (min-width: 1024px) {

	.klc-section {
		padding-block: var(--klc-space-2xl);
	}
}

.klc-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--klc-space-sm);
	margin-block-end: var(--klc-space-md);
}

@media (min-width: 768px) {

	.klc-section__head {
		margin-block-end: var(--klc-space-lg);
	}
}

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

.klc-section__link {
	flex: none;
	color: var(--klc-color-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--klc-duration-fast) var(--klc-ease);
}

.klc-section__link:hover {
	color: var(--klc-color-text);
}