/*
 * NeoGrow Genz Electro Child - single-product sticky support.
 *
 * Scoped to body.ng-single-product throughout, so archives, cart, checkout and
 * account pages keep Electro's own behaviour.
 *
 * This file used to also define a `.ng-product-stage` / `.ng-product-sticky-
 * -column` / `.ng-product-purchase-card` grid, from an earlier single-hero
 * template. The current NeoGrow Product Page Engine renders six different
 * layouts of its own (`.ngpp-stage`, `.ngpp-sticky-column`, `.ngpp-buybox`,
 * `.ngpp-story__card`, `.ngpp-social__card`, `.ngpp-configurator__media-inner`
 * -- one per layout, styled in the plugin's own assets/css/layouts/*.css) and
 * none of them emit `.ng-product-stage` any more, so that grid was dead
 * weight. It has been removed rather than left in place unused.
 */

/* -------------------------------------------------------------------------
 * Sticky offset
 *
 * --ng-site-header-height is written by assets/js/product-layout.js from the
 * real header element, and re-measured on resize, so a shrinking sticky header
 * or a translated Arabic header of a different height both work. Every one of
 * the plugin's six layouts reads this same variable for its own sticky
 * elements, so it must stay defined here regardless of which layout renders.
 * ---------------------------------------------------------------------- */

body.ng-single-product {
	--ng-site-header-height: 96px;
	--ng-admin-bar-height: 0px;
}

/* -------------------------------------------------------------------------
 * Releasing Electro's sticky-breaking wrapper
 *
 * Root cause, measured on the live store: #page.site carries
 * `overflow: hidden`. An ancestor with a non-visible overflow becomes the
 * nearest scrollport for `position: sticky`. Because #page is auto-height it
 * never scrolls, so a sticky descendant (any of the plugin's six sticky
 * purchase columns) has no scroll range to stick against and simply behaves
 * like `position: static`.
 *
 * Only the vertical axis is released. Electro clips #page/.off-canvas-wrapper
 * on BOTH axes mainly to hide the off-canvas mobile menu, which is parked at
 * `inset-inline-start: -350px` -- a horizontal offset. Verified directly
 * against the live markup: the menu panel has its own nearer wrapper,
 * `.off-canvas-navigation-wrapper`, which independently clips it on both
 * axes, so releasing #page's overflow-y here does not expose it. Leaving
 * overflow-x untouched is the more conservative choice regardless, since
 * nothing sticky here needs horizontal scroll to be visible.
 *
 * The override is scoped to single-product pages only.
 * ---------------------------------------------------------------------- */

body.ng-single-product #page.site,
body.ng-single-product .off-canvas-wrapper,
body.ng-single-product .site-content,
body.ng-single-product #content,
body.ng-single-product .site-content-inner,
body.ng-single-product .ng-product {
	overflow-y: visible;
}

/* Confirmed still needed: the off-canvas menu's own nearer wrapper. */
body.ng-single-product .off-canvas-navigation-wrapper,
body.ng-single-product .owl-stage-outer {
	overflow: hidden;
}

/* No ancestor of a sticky column may create a containing block. */
body.ng-single-product .ng-product {
	transform: none;
	filter: none;
	perspective: none;
	contain: none;
}

/* -------------------------------------------------------------------------
 * Fallback layout (plugin inactive)
 *
 * ng_gec_fallback_product() renders `.ng-product-stage.is-fallback` with no
 * sticky element in it, so it needs a plain two-column grid only -- nothing
 * above this point.
 * ---------------------------------------------------------------------- */

body.ng-single-product .ng-product-stage.is-fallback {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
	align-items: start;
	gap: clamp(24px, 3vw, 48px);
}

@media (max-width: 1023px) {
	body.ng-single-product .ng-product-stage.is-fallback {
		grid-template-columns: minmax(0, 1fr);
	}
}

body.ng-single-product .ng-product__tail {
	margin-block-start: 32px;
	clear: both;
}

@media (prefers-reduced-motion: reduce) {
	body.ng-single-product {
		scroll-behavior: auto;
	}
}