/**
 * Homepage hero — SE 1.68.68
 * Pink FAIL 1.68.60: 375 Finder (and likely NFA/Rock-Op) left-designed copy
 * clipped off right — Flatsome position_x__sm=50 left the box at ~50% width
 * with no viewport clamp.
 * Fix: ≤850 non-foam → left 12px, width calc(100vw-24px), wrap; buttons left-anchored.
 * Keep vertical center; foam stays dual-axis center.
 */
/* Desktop + tablet: vertical center text to image */
.wla-hero-banner .text-box,
.wla-hero-banner .text-box.absolute,
.wla-hero-banner .banner-layers .text-box {
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
}

/* Foam quote slide — centered both axes */
.wla-hero-banner:has(a[href*="foam-quote"]) .text-box,
.wla-hero-banner:has(a[href*="foam-quote"]) .text-box.absolute,
.wla-hero-banner:has(a[href*="foam-quote"]) .banner-layers .text-box,
.wla-hero-foam .text-box,
.wla-hero-foam .text-box.absolute,
.wla-hero-foam .banner-layers .text-box {
	left: 50% !important;
	right: auto !important;
	transform: translate(-50%, -50%) !important;
	width: min(92vw, 420px);
	max-width: calc(100% - 24px);
	box-sizing: border-box !important;
	text-align: center !important;
}

.wla-hero-banner:has(a[href*="foam-quote"]) .text-inner,
.wla-hero-foam .text-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100% !important;
	margin: 0 auto !important;
}

@media (max-width: 849.98px) {
	/* Non-foam: keep left design language but NEVER leave viewport */
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) .text-box,
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) .text-box.absolute,
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) .banner-layers .text-box {
		left: 12px !important;
		right: auto !important;
		top: 50% !important;
		bottom: auto !important;
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		box-sizing: border-box !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
		transform: translateY(-50%) !important; /* no translateX — left-anchored */
		text-align: left !important;
		overflow: hidden !important;
	}

	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) .text-inner {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) h1,
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) h2,
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) h3,
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) p,
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) .lead {
		max-width: 100% !important;
		box-sizing: border-box !important;
		white-space: normal !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
	}
	/* Long hero titles: slightly smaller so whole words wrap at spaces only */
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) h2 {
		font-size: 20px !important;
		line-height: 1.15 !important;
		letter-spacing: -0.01em !important;
	}

	/* Buttons: wrap; non-foam left-anchored (no margin auto fighting left) */
	.wla-hero-banner .button,
	.wla-hero-banner a.button,
	.wla-hero-banner a.button.primary {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		white-space: normal !important;
		line-height: 1.3 !important;
		height: auto !important;
		min-height: 44px !important;
		max-width: 100% !important;
		padding: 12px 16px !important;
		font-size: 13px !important;
		text-align: center !important;
		position: relative !important;
		z-index: 4 !important;
	}

	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) .button,
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) a.button,
	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) a.button.primary {
		margin: 8px 0 28px 0 !important;
	}

	.wla-hero-banner:has(a[href*="foam-quote"]) .button,
	.wla-hero-foam .button,
	.wla-hero-banner:has(a[href*="foam-quote"]) a.button,
	.wla-hero-foam a.button {
		margin: 8px auto 28px !important;
	}

	.wla-hero-banner .button span {
		white-space: normal !important;
		display: inline !important;
		line-height: 1.3 !important;
	}

	.wla-hero-banner:has(a[href*="foam-quote"]) .text-box,
	.wla-hero-banner:has(a[href*="foam-quote"]) .text-box.absolute,
	.wla-hero-banner:has(a[href*="foam-quote"]) .banner-layers .text-box,
	.wla-hero-foam .text-box,
	.wla-hero-foam .text-box.absolute,
	.wla-hero-foam .banner-layers .text-box {
		left: 50% !important;
		right: auto !important;
		transform: translate(-50%, -50%) !important;
		width: min(92vw, 340px) !important;
		max-width: calc(100vw - 24px) !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		text-align: center !important;
		overflow: visible !important;
	}
}

@media (max-width: 549px) {
	.wla-hero-banner {
		height: auto !important;
		padding-top: 378px !important; /* 420*0.9 — another 10%; text size unchanged */
	}

	.wla-hero-banner h1,
	.wla-hero-banner h2 {
		font-size: 20px !important;
		line-height: 1.15 !important;
		margin: 0 0 0.2em !important;
		padding: 0 !important;
		max-width: 100% !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
	}

	.wla-hero-banner .text-box,
	.wla-hero-banner .text-box.absolute,
	.wla-hero-banner .banner-layers .text-box {
		top: 50% !important;
		bottom: auto !important;
		box-sizing: border-box !important;
	}

	.wla-hero-banner:not(:has(a[href*="foam-quote"])):not(.wla-hero-foam) .text-box {
		left: 12px !important;
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		transform: translateY(-50%) !important;
	}

	.wla-hero-banner:has(a[href*="foam-quote"]) .text-box,
	.wla-hero-foam .text-box {
		transform: translate(-50%, -50%) !important;
		width: min(92vw, 320px) !important;
		max-width: calc(100vw - 24px) !important;
	}

	.wla-hero-banner .text-inner {
		padding-bottom: 8px !important;
	}

	.wla-hero-banner .button,
	.wla-hero-banner a.button,
	.wla-hero-banner a.button.primary {
		padding: 12px 16px !important;
		font-size: 13px !important;
		max-width: 100% !important;
	}

	body.home .slider .flickity-page-dots,
	body.home .ux-slider .flickity-page-dots,
	body.home .slider-wrapper .flickity-page-dots,
	body.home .flickity-page-dots {
		bottom: 10px !important;
		top: auto !important;
		z-index: 1 !important;
		margin: 0 !important;
	}

	body.home .wla-hero-banner .banner-layers,
	body.home .wla-hero-banner .text-box {
		z-index: 5 !important;
	}
}


/* Desktop: shrink hero 20% (UX height 600 → 480) — Preston 2026-09-09 */
@media (min-width: 850px) {
	.wla-hero-banner {
		height: auto !important;
		padding-top: 432px !important; /* 480*0.9 another 10%; text size unchanged */
	}
}

/* SE 1.68.83: home ~375 at-rest carousel overlay clip (Pink Formal FAIL on 1.68.82).
   Flatsome fadeInLeft parks [data-animate] at translate3d(-70px,0,0) + opacity:0 until
   IntersectionObserver sets data-animated=true. With .text-box { overflow:hidden } that
   clips left-designed copy ("Ready for…" → "dy for…", SEARCH NOW → "ARCH NOW") while the
   orange trust strip + header are in view at scrollY=0. After scroll (animation settled)
   overlay looked fine — not a Magpul sticky-spacer regression. Kill entrance offset on
   home hero only; leave Magpul/Roundup sticky skirt + #header spacer untouched. */
@media (max-width: 849.98px) {
	body.home .wla-hero-banner [data-animate],
	body.home .wla-hero-banner [data-animate="fadeInLeft"],
	body.home .wla-hero-banner [data-animate="fadeInRight"],
	body.home .wla-hero-banner [data-animate="fadeInUp"],
	body.home .wla-hero-banner [data-animate="fadeInDown"],
	body.home .wla-hero-banner [data-animated],
	body.home .wla-hero-banner [data-animated="true"] {
		transform: none !important;
		opacity: 1 !important;
		animation: none !important;
		transition: none !important;
	}

	/* Non-foam left slides: do not clip script/heading glyphs during any residual shift. */
	body.home .wla-hero-banner:not(.wla-hero-foam) .text-box,
	body.home .wla-hero-banner:not(.wla-hero-foam) .text-box.absolute,
	body.home .wla-hero-banner:not(.wla-hero-foam) .banner-layers .text-box {
		overflow: visible !important;
	}

	body.home .wla-hero-banner:not(.wla-hero-foam) .text-inner > *,
	body.home .wla-hero-banner:not(.wla-hero-foam) h1,
	body.home .wla-hero-banner:not(.wla-hero-foam) h2,
	body.home .wla-hero-banner:not(.wla-hero-foam) h3,
	body.home .wla-hero-banner:not(.wla-hero-foam) .alt-font,
	body.home .wla-hero-banner:not(.wla-hero-foam) .button,
	body.home .wla-hero-banner:not(.wla-hero-foam) a.button {
		transform: none !important;
	}
}