/*
 * Canonical Ex-Guard content rails.
 *
 * The shell already owns the 1200px visible-content rail and its responsive
 * gutters. This final layer maps page-level wrappers onto that same contract
 * after page, mobile, and card styles have loaded. Full-bleed section
 * backgrounds and deliberately narrow reading measures remain untouched.
 */

body.exg-shell {
	--exg-layout-max: var(--exg-shell-rail-max, 1200px);
	--exg-layout-gutter: var(--exg-shell-rail-gutter, 36px);
	--exg-layout-width: min(
		var(--exg-layout-max),
		calc(100% - var(--exg-layout-gutter) - var(--exg-layout-gutter))
	);
}

/* New templates can opt into the contract directly. The selector registry
 * beneath it keeps all current native templates on the same rail without
 * coupling the rule to generic Foundation, WooCommerce, or Divi containers. */
body.exg-shell .exg-layout-rail,
body.exg-shell main :is(
	.exg-about-container,
	.exg-article-container,
	.exg-bracket-library__container,
	.exg-brand-guide__container,
	.exg-brochures-container,
	.exg-campaign-container,
	.exg-careers-container,
	.exg-commerce-container,
	.exg-company-news-container,
	.exg-consumer-container,
	.exg-coverage-category__container,
	.exg-dealer-container,
	.exg-dealer-materials-container,
	.exg-dealer-updates-container,
	.exg-deer-container,
	.exg-education-container,
	.exg-employment__container,
	.exg-feature-detail-container,
	.exg-features-container,
	.exg-fitment-guide-container,
	.exg-fleet-container,
	.exg-fuel-container,
	.exg-gen3-container,
	.exg-guard-library__container,
	.exg-how-to-container,
	.exg-inspection-guide-container,
	.exg-legacy-guide-container,
	.exg-maintenance-container,
	.exg-native-info-container,
	.exg-native-quote__container,
	.exg-pickup-container,
	.exg-resource-container,
	.exg-resource-shell,
	.exg-resources-container,
	.exg-semi-container,
	.exg-sitemap-container,
	.exg-six-pack-container,
	.exg-sms-container,
	.exg-support-container,
	.exg-testimonials-container,
	.exg-thanks-container,
	.exg-truck-life-container,
	.exg-understanding-container,
	.exg-video-library__container,
	.exg-welders-container
),
body.exg-shell main .exg-download-container--wide,
body.exg-shell main .exg-interior-page-intro__inner,
body.exg-shell main :is(.fleet-section__inner, .fleet-roi__inner),
body.exg-shell.exg-semi-page main :is(.exg-v2-actions__intro, .exg-v2-action-feature),
body.exg-shell .exg-dealer-program-main > section:not(.exg-dealer-program-hero) > .exg-dealer-program-container,
body.exg-shell main.exg-commerce-product-main,
body.exg-shell:is(.single-trucks, .single-rv) :is(.product, .exg-unified-pdp) > .grid-container,
body.exg-shell:is(.single-pick-ups, .single-vans) .product > .grid-container.pdp-row,
body.exg-shell.exg-hardware-product-page #main-content .grid-container {
	box-sizing: border-box !important;
	width: var(--exg-layout-width) !important;
	max-width: none !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Generation 3 previously built its viewport gutter into every container.
 * Once the shared rail owns that edge, retaining the local padding would
 * create a second inset. */
body.exg-shell.exg-generation-three-page main .exg-gen3-container {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* Foundation's legacy grid adds 10px on each side. Outer PDP rails use the
 * shared gutter instead, so that local padding would leave their visible copy
 * one step inside every other page heading. */
body.exg-shell:is(.single-trucks, .single-rv) :is(.product, .exg-unified-pdp) > .grid-container,
body.exg-shell:is(.single-pick-ups, .single-vans) .product > .grid-container.pdp-row,
body.exg-shell.exg-hardware-product-page #main-content .grid-container {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* RV guard content can otherwise establish a min-content track wider than its
 * phone wrapper, which presents as a right-side alignment error. */
@media (max-width: 640px) {
	body.exg-shell.single-rv .guard__wrapper {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.exg-shell.single-rv .guard__half {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		justify-self: stretch;
	}
}