/* ---------- Desktop: stick the WHOLE masthead + main menu, sitewide
 * The masthead (#masthead.site-header) and the main menu (.col-full-nav) are
 * consecutive SIBLINGS, not nested. On desktop the theme only sticks the menu
 * (body.sticky-d .col-full-nav{position:sticky;top:0}); the masthead's sticky
 * rule is scoped to @media(max-width:992px), so on desktop the masthead stays
 * position:relative and scrolls away. We want the full header to travel on every
 * page, so we pin both as a stack: the masthead at the top, the menu directly
 * below it.
 *
 * Sticky-stacking pattern: position:sticky siblings that all use top:0 overlap,
 * so the lower element's `top` is offset by the height of the one above.
 * assets/header-sticky.js measures the real heights at runtime (no hardcoded
 * numbers) into --lp-sticky-header-h (masthead) and --lp-sticky-menu-h (menu):
 *   masthead top:0  →  menu top:header-h.
 * header-h has no single theme constant (content-driven), so its fallback is 0 —
 * a one-frame guard only, since the JS supplies the real value before any scroll.
 *
 * The menu rule also cancels Shoptimizer's product.min.css override that drops
 * the menu to position:relative + CommerceKit's `top:inherit` whenever a
 * CommerceKit sticky bar exists on a product page (those aren't !important, so
 * !important beats them regardless of their :has() specificity). Scoped >=993px,
 * the only width this stack applies (below that the menu is the off-canvas
 * drawer and the theme already pins the masthead). */
@media (min-width: 993px) {
	/* 1 — masthead pins at the very top, kept highest in the z-stack so it
	 * covers the menu during the pin transition (theme gives it z-index:20;
	 * the stuck menu is z-index:15). */
	body:not(.header-4) #masthead.site-header {
		position: sticky !important;
		top: 0 !important;
		z-index: 21 !important;
	}
	.admin-bar:not(.header-4) #masthead.site-header {
		top: 32px !important;
	}

	/* 2 — menu pins directly below the masthead. */
	body:not(.header-4) .col-full-nav,
	body:not(.header-4) .col-full-nav.is_stuck {
		position: sticky !important;
		top: var(--lp-sticky-header-h, 0px) !important;
	}
	.admin-bar:not(.header-4) .col-full-nav,
	.admin-bar:not(.header-4) .col-full-nav.is_stuck {
		top: calc(var(--lp-sticky-header-h, 0px) + 32px) !important;
	}

	/* 3 — bottom divider line under the menu bar, shown only after a small scroll.
	 * At the very top the header sits flush with the page (no edge); once scrolled
	 * past 30px, header-sticky.js sets body.lp-scrolled and we draw a 1px underline
	 * matching the theme's own dropdown separator (#eee == --light-gray).
	 * box-shadow:none stays unconditional so the theme's .is_stuck drop shadow
	 * (which appears on scroll and isn't !important) never swaps in for the line. */
	body:not(.header-4) .col-full-nav {
		box-shadow: none !important;
	}
	body.lp-scrolled:not(.header-4) .col-full-nav {
		border-bottom: 1px solid var(--light-gray) !important;
	}
	/* On product pages, once the sticky tabs bar pins flush under the menu
	 * (body.lp-tabs-stuck, set by header-sticky.js), drop the menu's divider at
	 * that seam: the tabs bar carries its own bottom line, so a line here too
	 * would double up at the join. Placed after the .lp-scrolled rule — same
	 * specificity, so source order lets it win when both classes are present. */
	body.lp-tabs-stuck:not(.header-4) .col-full-nav {
		border-bottom: none !important;
	}
}