/*
 * kl-commerce/assets/css/main.css
 *
 * Layout primitives only. Section styles arrive in step 3,
 * WooCommerce styles in step 4.
 */

.klc-container {
	inline-size: 100%;
	max-inline-size: var(--klc-maxw-content);
	margin-inline: auto;
	padding-inline: var(--klc-gutter);
}

.klc-container--wide {
	max-inline-size: var(--klc-maxw-wide);
}

.klc-container--narrow {
	max-inline-size: var(--klc-maxw-narrow);
}

.klc-container--full {
	max-inline-size: var(--klc-maxw-full);
	padding-inline: 0;
}

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

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

.klc-stack--lg > * + * {
	margin-block-start: var(--klc-space-xl);
}

/* ---- Accessibility helpers ---------------------------------------- */

.klc-visually-hidden:not(:focus):not(:active) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.klc-skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: var(--klc-space-sm);
	z-index: var(--klc-z-modal);
	padding: var(--klc-space-2xs) var(--klc-space-sm);
	background-color: var(--klc-color-bg);
	color: var(--klc-color-text);
	border: var(--klc-border-width) solid var(--klc-color-border);
	border-radius: var(--klc-radius-md);
	font-family: var(--klc-font-nav);
	font-size: var(--klc-size-sm);
}

.klc-skip-link:focus {
	inset-block-start: var(--klc-space-2xs);
}

/* ---- Entry (temporary, index.php only) ----------------------------- */

.klc-entry + .klc-entry {
	margin-block-start: var(--klc-space-xl);
	padding-block-start: var(--klc-space-xl);
	border-block-start: var(--klc-border-width) solid var(--klc-color-border);
}

.klc-entry__title {
	margin-block-end: var(--klc-space-sm);
}