/* ============================================================
   LEVEL UP SMARTER — DESKTOP HEADER + MEGA MENU
   Added 2026-08-13. Companion to lus-mobile.css, which owns
   everything at 1024px and below.

   WHAT WAS WRONG
   --------------
   Header template 36's right-hand column is a wrapping flex row
   holding five widgets built for a very wide screen:

     [html]  [35px spacer]  [Start Here pill]  [nav]  [LU Self]  [cart]

   Three things made it read as clutter:

   1. The spacer is a full-width widget, so it always took a row of
      its own and pushed everything below it.
   2. Every widget carries Elementor's default 25px bottom margin,
      so the items never sat on a common baseline.
   3. The row needs ~1010px and only gets ~1065px at 1692px wide —
      and less than that on any normal laptop. The cart was the
      first thing to wrap, landing on its own line under the nav.

   On top of that the menu's first item and the pill are the same
   link (/start-here/), so "Start Here" appeared twice.

   WHAT THIS DOES
   --------------
   Puts the row on one line, drops the spacer and the stray bottom
   margins, and sheds one element at a time as the viewport narrows
   so the row never wraps again:

     >= 1600   pill + menu + LU Self + cart
     1400-1599 pill + menu + cart
     1280-1399 menu (keeps its own Start Here item) + cart
     1025-1279 hamburger + cart, same as tablet

   "Start Here" is shown exactly once at every width: as the pill
   above 1400, as the menu item below it.

   Measured at 1025 / 1100 / 1200 / 1280 / 1400 / 1500 / 1600 /
   1692: one row, no wrapping inside the menu, nothing overflowing
   its column.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   1 — ONE ROW  (all desktop widths)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {

	/* The logo is 200px wide but its column reserved ~30% of the
	   header — that width is worth more to the nav. */
	#header-main .elementor-element-66703e9 { width: 24% !important; }
	#header-main .elementor-element-c928f98 { width: 76% !important; }

	/* NOTE: .elementor-widget-wrap and .elementor-element-populated are
	   the SAME element, not nested. A `> .elementor-element-populated >
	   .elementor-widget-wrap` descendant chain silently matches nothing. */
	#header-main .elementor-element-c928f98 > .elementor-widget-wrap {
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
	}

	#header-main .elementor-element-c928f98 .elementor-widget {
		margin-bottom: 0 !important;
	}

	/* The HTML widget now holds only a comment (the announcement bar
	   moved to the child theme), and the spacer exists to push the
	   desktop nav down. Both are dead weight that force extra rows. */
	#header-main .elementor-element-82166fd,
	#header-main .elementor-element-8f4f14b {
		display: none !important;
	}

	#header-main .elementor-element-60e166f { margin-left: 22px !important; }
	#header-main .elementor-element-edd847d { margin-left: 8px !important; }
}


/* ══════════════════════════════════════════════════════════
   2 — SHED ONE ELEMENT AT A TIME AS THE ROW TIGHTENS
   ══════════════════════════════════════════════════════════ */

/* Below 1600 there is no room for the sister-brand mark. It is also
   the mega-menu trigger, so the mega menu is a wide-screen feature —
   which it already was: Elementor hides the trigger on mobile. */
@media (min-width: 1025px) and (max-width: 1599px) {
	#header-main .elementor-element-60e166f { display: none !important; }
}

/* Below 1400 the pill goes and the menu's own Start Here item stays. */
@media (min-width: 1025px) and (max-width: 1399px) {
	#header-main .elementor-element-3ebd1e1 { display: none !important; }
}

/* Below 1280 the six-item menu cannot hold one line. Fall back to the
   hamburger, exactly as tablet does — Elementor hides it on desktop,
   so it has to be switched back on here. The popup it opens (324) is
   viewport-independent, so it works at this width unchanged. */
@media (min-width: 1025px) and (max-width: 1279px) {
	#header-main .elementor-element-4f442b2 { display: none !important; }

	#header-main .elementor-element-b64fe08.elementor-hidden-desktop {
		display: flex !important;
		align-items: center;
	}

	#header-main .elementor-element-b64fe08 img { width: 30px !important; }
}

/* 1400+: the pill carries Start Here, so the duplicate menu item goes. */
@media (min-width: 1400px) {
	#header-main .elementor-nav-menu > li > a[href$="/start-here/"] {
		display: none !important;
	}

	#header-main .elementor-element-3ebd1e1 { margin-right: 18px !important; }
}


/* ══════════════════════════════════════════════════════════
   3 — MEGA MENU  (#megamenu, header section 1f9c90f)
   The Elementor kit's custom CSS pins it to `top: 0`, and the
   section reserves 125px of top padding to clear the header.
   The header is ~205px tall, so the panel opened 80px *behind*
   it: the first row of products was sliced off and the whole
   thing read as broken.

   Anchored to the bottom of the header instead, via
   --lus-header-h (published by assets/js/lus-announce.js), and
   given a max-height so a tall panel scrolls rather than
   running off the bottom of the screen.
   ══════════════════════════════════════════════════════════ */

#megamenu {
	top: var(--lus-header-h, 205px) !important;
	padding-top: 28px !important;
	padding-bottom: 32px !important;
	max-height: calc(100vh - var(--lus-header-h, 205px));
	overflow-y: auto;
	box-shadow: 0 18px 40px rgba(10, 10, 12, 0.18);
	border-top: 1px solid rgba(10, 10, 12, 0.08);
}


/* ══════════════════════════════════════════════════════════
   4 — MENU POPUP (Elementor popup 324)
   Now reachable on short desktop windows too (1025-1279), where
   its content can be taller than the viewport.
   ══════════════════════════════════════════════════════════ */

.elementor-popup-modal .dialog-widget-content {
	max-height: 100vh;
	overflow-y: auto;
}