/* Reset + base typography. Body/UI text is Inter (self-hosted); headings
   get the display serif — but only where explicitly applied, per brand book. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--space-3); }
h1, h2, h3 { margin: 0; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed;
	top: var(--space-2);
	left: var(--space-2);
	width: auto; height: auto;
	clip: auto;
	background: var(--color-surface);
	color: var(--color-text);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	z-index: 1000;
}

.section-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--display-h2);
	margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
	.section-title { font-size: 2.5rem; } /* 40px — section H2, desktop */
}
@media (max-width: 639px) {
	/* --display-h2 (28px) is already in range; it just inherited body's
	   1.5 line-height, far too loose for a 2-line wrapped heading. */
	.section-title { line-height: 1.1; }
}

/* Section heading + optional "see all" link, shared by Categories,
   Bestsellers, New products. */
.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
}
.section-header .section-title { margin-bottom: var(--space-4); }
.section-link {
	flex-shrink: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	white-space: nowrap;
}
.section-link:hover { text-decoration: underline; }
@media (max-width: 639px) {
	.section-link { display: none; }
}