/*
 * kl-commerce/assets/css/typography.css
 *
 * Type scale. Rendered size = min(token * floor + fluid, token),
 * so the token is always the desktop ceiling and mobile scales down.
 * Style Studio sets the ceiling; fluidity is theme-internal.
 */

h1, h2, h3, h4, h5, h6,
.klc-h1, .klc-h2, .klc-h3, .klc-h4, .klc-h5, .klc-h6 {
	font-family: var(--klc-font-heading);
	font-weight: var(--klc-weight-heading);
	line-height: var(--klc-leading-heading);
	letter-spacing: var(--klc-tracking-heading);
	text-wrap: balance;
}

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

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

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

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

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

h6,
.klc-h6 {
	font-size: var(--klc-size-h6);
	line-height: var(--klc-leading-tight);
	letter-spacing: var(--klc-tracking-nav);
	text-transform: uppercase;
}

p {
	text-wrap: pretty;
}

/* ---- Role classes ------------------------------------------------- */

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

.klc-text-sm {
	font-size: var(--klc-size-sm);
}

.klc-text-xs {
	font-size: var(--klc-size-xs);
}

.klc-nav-text {
	font-family: var(--klc-font-nav);
	font-weight: var(--klc-weight-nav);
	font-size: var(--klc-size-sm);
	letter-spacing: var(--klc-tracking-nav);
	line-height: var(--klc-leading-tight);
}

.klc-button-text {
	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;
}

.klc-price {
	font-family: var(--klc-font-price);
	font-weight: var(--klc-weight-price);
	font-size: var(--klc-size-base);
	font-variant-numeric: tabular-nums;
	line-height: var(--klc-leading-tight);
}

/* ---- Long-form content -------------------------------------------- */

.klc-prose {
	max-inline-size: var(--klc-maxw-text);
}

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

.klc-prose a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: opacity var(--klc-duration-fast) var(--klc-ease);
}

.klc-prose a:hover {
	opacity: 0.6;
}

.klc-prose ul,
.klc-prose ol {
	padding-inline-start: var(--klc-space-md);
}

.klc-prose blockquote {
	padding-inline-start: var(--klc-space-md);
	border-inline-start: var(--klc-border-width) solid var(--klc-color-border);
	color: var(--klc-color-muted);
}