/**
 * Ingredient Library — base
 * Palette + layout primitives, scoped to .ingredient-library only.
 * Colours are kept 1:1 with the source design and MUST NOT leak into the
 * site-wide theme — do not move these variables to :root.
 */
.ingredient-library {
	--il-bg: #FCF8F2;
	--il-surface: #FFFFFF;
	--il-soft: #FBF9F4;
	--il-ink: #20201D;
	--il-muted: #6E6B62;
	--il-line: #E6E1D6;
	--il-accent: var(--Bg-Radial);
	--il-accent-2: #3A5346;
	--il-radius: 16px;
	--il-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--il-serif: 'Roboto', Georgia, 'Times New Roman', serif;

	background: var(--il-bg);
	color: var(--il-ink);
	font-family: var(--il-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	margin-top: 70px;
}

.ingredient-library,
.ingredient-library *,
.ingredient-library *::before,
.ingredient-library *::after {
	box-sizing: border-box;
}

.ingredient-library a {
	color: inherit;
}

/* Visually hidden but present for screen readers, search engines and
   non-JS content crawlers — used for detail content also rendered
   client-side in the panel (js/ingredient-library/panel.js). */
.ingredient-library .il-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ingredient-library .il-wrap {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 30px;
}

@media (max-width: 640px) {
	.ingredient-library .il-wrap {
		padding: 0 18px;
	}
}