/*
 * Shared structural classes / utilities reused across templates.
 * Reuse these — do not spin up a new class per element.
 */
/* Content wrappers stay in the centred max-width column. Scope under
 * .site-main so these class names don't also match <body class="home">
 * / <body class="page"> (WordPress body_class), which would box the whole
 * page and break the full-bleed topbar/header/footer chrome. */
.wrap,
.site-main > .home,
.site-main > .page,
.site-main > article {
	max-width: var(--hs-wide-width);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
	/*
	 * Top edge of the page. A section-built page gets this from
	 * .hs-section:first-of-type in components.css; the classic templates (page,
	 * single, blog index, 404 and every WooCommerce screen through .wc-wrap)
	 * have no band of their own and were opening with their <h1> flush against
	 * the header: measured 0px on /mijn-account/. Same token as the section
	 * edge, so both kinds of page start with the same rhythm.
	 *
	 * Only the top. At the bottom these pages end in a bare text column with no
	 * coloured band to close them off, so they keep the larger fallback gap that
	 * .hs-footer's own margin-top provides.
	 *
	 * 20px, not 32: the old site's breadcrumb sits 20px under the header on the
	 * PDP and the archive (measured 11-10-2026).
	 */
	padding-block-start: var(--sp-5);
}

/* Phones: the old site keeps 20px at the sides of the content (measured at 375);
 * --hs-gutter drops to 16/12px there only so logo + icons fit in the header. */
@media (max-width: 560px) {
	.wrap,
	.site-main > .home,
	.site-main > .page,
	.site-main > article {
		padding-inline: var(--hs-content-gutter-sm);
	}
}

/* Desktop: the old site's content column starts 10px in, in line with the logo
 * (x=170 / 1380px wide at a 1720px window on the PDP and the archive). */
@media (min-width: 1025px) {
	.wrap,
	.site-main > .home,
	.site-main > .page,
	.site-main > article {
		padding-inline: calc(var(--hs-gutter) + var(--hs-content-inset));
	}
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	min-height: var(--hs-header-h);
	max-width: var(--hs-wide-width);
	margin-inline: auto;
	padding: var(--sp-3) var(--hs-gutter);
}

.site-branding {
	display: inline-flex;
	align-items: center;
}

.site-logo {
	height: 36px;
	width: auto;
}

.site-nav ul {
	display: flex;
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer {
	margin-top: var(--sp-20);
	padding: var(--sp-12) var(--hs-gutter);
	background: var(--bg-2);
	border-top: 1px solid var(--border-1);
}