/*
 * Fit the page to the screen, and keep decorative layers out of the way.
 */

/*
 * Wide screens.
 *
 * Woodmart pins the content column at 1398px. On a 1920px monitor that is a
 * sensible measure; on a 4K display at 100% scaling the same column fills
 * barely a third of the screen and the type looks tiny beside it.
 *
 * Every wide rule in this theme — Woodmart's own container, the hero, the
 * section rhythm — reads --wd-container-w, so raising that one variable moves
 * them all together. Below 1920px nothing changes. Above it, the column takes
 * 60% of each extra pixel, so the page grows with the screen without ever
 * stretching text lines to the edges, and stops at 2600px.
 *
 * `html:root` outranks the plain `:root` the theme prints its own value on, so
 * this wins whatever order the two stylesheets arrive in.
 */
@media (min-width: 1920px) {
	html:root {
		--wd-container-w: min(2600px, calc(1398px + (100vw - 1920px) * 0.6));
	}
}

/*
 * Elementor's background overlay is a full-size layer that exists to tint or
 * fade a section. It sits above the section's content in the stacking order,
 * so on the home page it caught every click meant for the products below —
 * none of the cards could be opened. It carries no interaction of its own, so
 * it should never receive any.
 */
.elementor-background-overlay,
.elementor-background-video-container,
.elementor-shape {
	pointer-events: none;
}