/* Minimal reset + base element styles. Font-family is set by typography.css
   (var(--font-body)) — do not redeclare it here, that previously silently
   overrode the self-hosted Inter font with system-ui (Milestone 17 fix). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
}

img,
picture,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-xs) var(--space-sm);
	z-index: 1000;
}

.skip-link:focus {
	left: var(--space-sm);
	top: var(--space-xs);
}

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* WooCommerce Payments' BNPL/Klarna messaging widget (Stripe-rendered,
   id="payment-method-message") auto-picks light/dark text by walking up
   ancestor selectors such as #main/.entry-content looking for a non-transparent
   background-color. This theme's <main id="primary"> markup never matches any
   of those selectors, so the walk always falls through to body's light
   background and renders dark text on our dark cards (cart summary, etc.).
   Giving the widget itself an explicit background is the first selector its
   own script checks, so this fixes the theme detection wherever it renders. */
#payment-method-message {
	background: var(--color-primary);
	border-radius: var(--radius-md, 0.5rem);
}