/* Clip horizontal overflow without creating a separate sticky scroll container. */
body,
#page { overflow-x: clip; overflow-y: visible; }
body.home { background-color: var(--color-bg-surface); }

html {
	scroll-padding-top: calc(var(--layout-header-height) + var(--layout-admin-bar-height) + var(--layout-sticky-gap) + var(--spacing-16));
}
html:has(body.admin-bar) { --layout-admin-bar-height: 32px; }

#page > #masthead,
#page > .woocommerce-breadcrumb.ov-breadcrumb,
#content > .col-full,
#page > #colophon,
.storefront-breadcrumb > .col-full,
.header-widget-region > .col-full {
	box-sizing: border-box;
	width: min(var(--layout-content-max), calc(100% - 2 * var(--layout-gutter)));
	max-width: var(--layout-content-max);
	margin-inline: auto;
}
#content > .col-full,
.storefront-breadcrumb > .col-full,
.header-widget-region > .col-full { padding-inline: 0; }

@media (max-width: 1199px) {
	:root { --layout-header-height: 168px; }
}
@media (max-width: 782px) {
	html:has(body.admin-bar) { --layout-admin-bar-height: 46px; }
}
@media (max-width: 767px) {
	:root {
		--layout-gutter: var(--spacing-16);
		--layout-sticky-gap: var(--spacing-8);
	}
}
/* WordPress makes its toolbar absolute below 601px; it scrolls out naturally. */
@media (max-width: 600px) {
	html:has(body.admin-bar) { --layout-admin-bar-height: 0px; }
}
@media (max-width: 359px) {
	:root { --layout-gutter: var(--spacing-12); }
}