/**
 * Shared layout primitives. Page/component CSS builds on these rather than
 * re-declaring gutters and containers per template.
 */

.k-container {
	padding-inline: var(--k-gutter);
}

/**
 * Shared WooCommerce breadcrumb rhythm — Shop/Category (intro-banner.php's
 * .k-shop-crumbs) and PDP (single-product.php's .k-pdp-crumbs) both carry
 * this class alongside their own so every woocommerce_breadcrumb() render
 * path shares one visual rhythm instead of two near-duplicate rule sets.
 * padding-top gives breathing room below the site header; margin-bottom
 * (same clamp() used for the PDP top-section gap in product.css) gives
 * clear separation before page content. Never added to the homepage.
 */
.k-crumbs {
	padding-top: 22px;
	margin-bottom: clamp(24px, 3vw, 40px);
	font-size: var(--k-text-label);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--k-color-muted-2);
}

.k-crumbs__nav a {
	color: var(--k-color-muted-2);
}

.k-crumbs__nav a:hover {
	color: var(--k-color-accent);
}

.k-visually-hidden,
/* WooCommerce's own real markup emits .screen-reader-text directly (its
   default frontend stylesheet is deliberately not enqueued — see
   Karataki\WooCommerce_Support::init() — and this theme never redeclared
   the class, so every real screen-reader-only string WooCommerce prints
   — "Remove item", "Thumbnail image", the real coupon field's "Coupon:"
   label, etc. — was rendering fully visible). Same real WordPress/
   WooCommerce visually-hidden technique as .k-visually-hidden above.
   Every declaration here is !important, not just position: this class is
   applied to real, already-styled component markup — e.g. the real
   variation <select> in product.css's .k-pdp-panel .variations select,
   which sets width:100% (max-width:320px) — and .k-pdp-panel .variations
   select's higher specificity was beating this class's plain width:1px,
   leaving the "hidden" select at its full 320px layout width (invisible
   via clip, but still occupying that width at position:absolute, which
   still contributes to the page's scrollable area) and causing real
   horizontal overflow on mobile. This class's entire job is to
   unconditionally clip whatever real element it's added to, regardless of
   that element's own component styling, so every property here must win. */
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.k-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--k-color-text);
	color: var(--k-color-bg);
	padding: 12px 20px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.k-skip-link:focus {
	left: var(--k-gutter);
	top: var(--k-gutter);
}