/* Haags.nl — producten-sectie (tweede section homepage): oker vlak + titel.
 *
 * Etch-NATIEF formaat (één class-style, @media genest) zodat StylesParser dit als
 * Etch-stijl registreert (via de HaagsProducts-pattern) en de sectie + kop ook in
 * de builder-canvas verschijnen. Het Antonio-font komt van de hero/bericht-global-
 * CSS die op de homepage al laadt. */

/* De sectie zelf: dekkende oker-rasterachtergrond (zelfde look als de body). Als
 * eigen class-style zodat 'ie OOK in de builder-canvas oker is — de frontend-only
 * `main > section`-regel matcht daar namelijk niet (geen <main>-wrapper). */
.hg-products {
	position: relative;
	z-index: 1;
	background-color: #e6c044;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size:
		100px 100%,
		20px 100%;
	background-position:
		-2px 0,
		-1px 0;
}

.hg-products__title {
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
	text-align: center;
	font-family: "Antonio", system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	line-height: 0.9;
	letter-spacing: -0.015em;
	color: #1e7a54;

	@media (max-width: 760px) {
		font-size: clamp(2rem, 8vw, 3rem);
	}
}