/* ===========================================================
 * Route layout fix
 * stitch-site.js injects the left sidebar as a position:fixed
 * element on document.body (with body { padding-left: 300px } on desktop),
 * so .page-shell's `grid-template-columns: 300px minmax(0, 1fr)` is
 * redundant — it was designed for an in-flow sidebar that no longer exists.
 * Result: main-shell gets pushed into a 300px-wide column, cards collapse.
 *
 * This file rewires .page-shell for .flora-route-page to a single column
 * and gives sibling sections proper vertical rhythm.
 * =========================================================== */

main.page-shell.flora-route-page {
	grid-template-columns: minmax(0, 1fr);
	width: min(100vw - 32px, 1200px);
	gap: 0;
	margin: 24px auto 64px;
}

/* Section rhythm inside main-shell */
.flora-route-page .main-shell > section + section {
	margin-top: 48px;
}

.flora-route-page .main-shell > section:first-child {
	margin-top: 4px;
}

/* Route hero breathing */
.flora-route-page .route-hero .route-title {
	margin-top: 6px;
}

.flora-route-page .route-intro {
	max-width: 780px;
}

.flora-route-page .shop-tabs.route-tabs {
	margin-top: 18px;
}

/* occasion-grid: responsive, no longer forced to 4 rigid columns */
.flora-route-page .occasion-section .occasion-grid {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

/* Bigger breathing on smaller desktop */
@media (max-width: 1200px) {
	main.page-shell.flora-route-page {
		width: calc(100vw - 40px);
	}
}

/* Tablet + mobile: body padding-left is dropped by stitch-site.js too */
@media (max-width: 900px) {
	main.page-shell.flora-route-page {
		width: calc(100vw - 24px);
		margin: 16px auto 48px;
	}

	.flora-route-page .main-shell > section + section {
		margin-top: 36px;
	}
}