/**
 * Shared design-system primitives used by more than one template
 * (originally lived in home.css; moved here once the Shop templates needed
 * them too, rather than duplicating them into shop.css).
 */

.k-section {
	padding: clamp(52px, 6.5vw, 104px) var(--k-gutter);
}

/* Fixed-light editorial island: always ivory-bg/near-black-text, on
   purpose, regardless of the active page theme — see base/tokens.css
   "FIXED (theme-invariant)" note. Must use --k-color-fixed-ink, not
   --k-color-bg, or this becomes illegible once --k-color-bg flips for
   the light theme. */
.k-section--light {
	background: var(--k-color-editorial-surface);
	color: var(--k-color-fixed-ink);
}

.k-section--light .k-label {
	color: var(--k-color-fixed-muted);
}

.k-display {
	font-size: var(--k-text-display-lg);
	line-height: 1;
	margin: 18px 0 0;
}

.k-heading-lg {
	font-size: var(--k-text-heading-lg);
	margin: 0;
}

.k-heading-md {
	font-size: var(--k-text-display-md);
	line-height: 1.02;
	margin: 0;
}

.k-heading-sm {
	font-size: var(--k-text-display-sm);
	margin: 0;
}

.k-label--accent {
	color: var(--k-color-accent);
}

.k-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 30px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--k-tracking-eyebrow);
	text-transform: uppercase;
	transition: background var(--k-duration-base), color var(--k-duration-base), border-color var(--k-duration-base);
}

.k-btn--outline {
	border: 1px solid var(--k-border-cta);
	color: var(--k-color-text);
}

.k-btn--outline:hover,
.k-btn--outline:focus-visible {
	background: var(--k-color-text);
	color: var(--k-color-bg);
	border-color: var(--k-color-text);
}

.k-section--light .k-btn--outline {
	border-color: var(--k-color-fixed-ink-a40);
	color: var(--k-color-fixed-ink);
}

/* Filled primary CTA — ivory background / near-black text, gold on hover.
   First established for the PDP's real .single_add_to_cart_button (see
   components/product.css); reused as-is for Cart's real "Proceed to
   Checkout" link, Checkout's real #place_order button, and the cart
   drawer's real Checkout link, so the one primary-action treatment stays
   defined in exactly one place. */
.k-btn--fill {
	background: var(--k-color-text);
	color: var(--k-color-bg);
	border: 0;
}

.k-btn--fill:hover,
.k-btn--fill:focus-visible {
	background: var(--k-color-accent);
	color: var(--k-color-bg);
}

/* Always a dark pill with light text — used both over photography
   (lookbook CTA) and as a plain UI submit button (filters panel). Fixed
   tokens, not --k-color-text/--k-color-bg, so it stays the same "dark
   chip" in both themes instead of inverting/losing contrast once the
   light theme flips those two tokens. */
.k-btn--dark {
	background: var(--k-color-fixed-ink-a72);
	color: var(--k-color-surface-light);
	padding: 12px 20px;
	font-size: 10px;
}

.k-btn--dark:hover,
.k-btn--dark:focus-visible {
	background: var(--k-color-surface-light);
	color: var(--k-color-fixed-ink);
}

.k-link-underline {
	display: inline-block;
	font-size: 11px;
	letter-spacing: var(--k-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--k-color-accent);
	border-bottom: 1px solid var(--k-color-accent);
	padding-bottom: 5px;
}

.k-link-underline--dark {
	color: var(--k-color-bg);
	border-bottom-color: var(--k-color-bg);
}

/* Reveal-on-scroll: enhancement only. Content is visible without JS;
   page JS adds the hidden starting state itself so nothing here relies on
   JS having run. */
@media (prefers-reduced-motion: reduce) {
	.k-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}