/*
 * Search4U site-wide layout. Loaded last.
 *
 * One rule for every page: sections run full width with a 20px side gutter
 * and 80px of space above and below.
 *
 * To switch the whole site to a centred 1200px layout instead, change
 * --s4u-max from 100% to 1240px (1200px content + 2 x 20px gutter).
 */

:root {
	--s4u-max: 100%;
	--s4u-gutter: 20px;
	--s4u-section-y: 80px;
}

@media (max-width: 1024px) {
	:root {
		--s4u-section-y: 64px;
	}
}

@media (max-width: 767px) {
	:root {
		--s4u-section-y: 48px;
	}
}

/* ---------- Remove the parent theme's 1140px cap ---------- */

/* Pages built with a template (shop, categories, product pages) */
body .site-main:has([data-elementor-type^="jet-woo-builder"]),
body .site-main:has([data-elementor-type="wp-page"]) {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Plain pages: account, cart, checkout, policies */
body:not(.elementor-page) .site-main:not(:has([data-elementor-type])) {
	width: 100%;
	max-width: var(--s4u-max);
	margin: 0 auto;
	padding: var(--s4u-section-y) var(--s4u-gutter);
}

body:not(.elementor-page) .page-header .entry-title {
	max-width: none;
	padding: 0;
}

/* ---------- Every top-level section ---------- */

body [data-elementor-type="wp-page"] > .e-con.e-parent,
body [data-elementor-type^="jet-woo-builder"] > .e-con.e-parent {
	--content-width: var(--s4u-max);
	--padding-top: var(--s4u-section-y);
	--padding-bottom: var(--s4u-section-y);
	--padding-left: var(--s4u-gutter);
	--padding-right: var(--s4u-gutter);
}

/* Boxed sections: inner width follows the same setting */
body [data-elementor-type="wp-page"] > .e-con.e-parent.e-con-boxed > .e-con-inner,
body [data-elementor-type^="jet-woo-builder"] > .e-con.e-parent.e-con-boxed > .e-con-inner {
	max-width: var(--s4u-max);
}

/* Home: the hero and "Newly in" share one grey band, so they read as one
   section (80px above the hero, 80px below the products). */
body [data-elementor-type="wp-page"] > .e-con.e-parent.s4u-hero {
	--padding-bottom: 0px;
}

body [data-elementor-type="wp-page"] > .e-con.e-parent.s4u-newly {
	--padding-top: 40px;
}

/* ---------- Header and footer: same side gutter ---------- */

body .elementor-location-header .e-con.s4u-header,
body .elementor-location-footer .e-con.s4u-footer {
	--content-width: var(--s4u-max);
	--padding-left: var(--s4u-gutter);
	--padding-right: var(--s4u-gutter);
}

body .elementor-location-header .e-con.s4u-header.e-con-boxed > .e-con-inner,
body .elementor-location-footer .e-con.s4u-footer.e-con-boxed > .e-con-inner {
	max-width: var(--s4u-max);
}

/* ---------- Pieces that assumed the old padding ---------- */

/* Phone: the shop toolbar runs edge to edge */
@media (max-width: 767px) {
	body .s4u-shop .s4u-shop__toolbar {
		margin-left: calc(-1 * var(--s4u-gutter));
		margin-right: calc(-1 * var(--s4u-gutter));
		padding-left: var(--s4u-gutter);
		padding-right: var(--s4u-gutter);
	}
}