/*
 * Layout primitives mirroring Elementor's flexbox containers:
 * boxed width 1300px (1024 / 767 at smaller breakpoints), 1% default padding, 20px widget gap.
 */
.ew-container {
	width: 100%;
	max-width: var(--ew-container);
	margin-inline: auto;
	padding: var(--ew-container-padding);
}

.ew-stack { display: flex; flex-direction: column; gap: var(--ew-widget-gap); }
.ew-row { display: flex; flex-direction: row; gap: var(--ew-widget-gap); }

/* Visibility helpers matching Elementor's "hide on" options */
@media (min-width: 1025px) { .ew-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .ew-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .ew-hide-mobile { display: none !important; } }

/* Inline SVG icons */
.ew-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; }

.site-main { display: block; }

/* Content never widens the page (slide-in animations start off-screen; on phones that would zoom
   the whole page out). clip, unlike hidden, keeps position: sticky working. */
.site-main { overflow-x: clip; }

/*
 * Touch screens: small links and the menu button get a larger tappable area (at least about 44px) from an
 * invisible extension, so nothing moves or looks different.
 */
@media (pointer: coarse), (max-width: 1024px) {
	.ew-topbar a,
	.ew-footer__bar a,
	.woocommerce-breadcrumb a,
	.ew-mbar__burger { position: relative; }
	.ew-topbar a::after,
	.ew-footer__bar a::after,
	.woocommerce-breadcrumb a::after,
	.ew-mbar__burger::after { content: ""; position: absolute; inset: -12px -10px; }
}