/* Footer — composer
 *
 * Full-width dark slate-950 band with blue text. Content is centred on desktop
 * and spans the full width (minimal padding) on mobile.
 */

/* Sticky footer: make the page wrapper fill at least the viewport so the dark
 * footer band is always flush with the bottom and never leaves a white gap
 * beneath it on short pages (e.g. a search with few/no results, an empty
 * category, or 404). Stacking header → main → footer as a flex column lets the
 * main content area grow to absorb the slack. The sticky header keeps working
 * (sticky elements are valid flex items). */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

.bollaert-footer {
	margin-top: var(--wp--preset--spacing--16);
	background: #020617; /* slate-950 */
	color: #93b1cc;       /* soft blue body text */
	border-top: 3px solid var(--wp--preset--color--brand);
}

.bollaert-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	max-width: min(92vw, 1200px);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--6);
}

/* Mobile: footer spans the full width, edge to edge (no side padding/margin).
 * The band picks up WordPress's root padding (~24px) via useRootPaddingAware-
 * Alignments, so zero it out here too. */
@media (max-width: 781.98px) {
	.bollaert-footer {
		margin-top: var(--wp--preset--spacing--10);
		padding-inline: 0 !important;
	}
	.bollaert-footer__inner {
		max-width: 100%;
		margin-inline: 0;
		padding-inline: 0;
	}
	/* On the product page the footer sits in the left column as a rounded card;
	 * on mobile make it full-bleed too. */
	.bollaert-pdp__media-col > .wp-block-template-part .bollaert-footer { border-radius: 0; }
}