/* ============================================================ LEVEL UP SMARTER — MOBILE & TABLET LAYOUT Added 2026-08-12. Every rule below sits inside a max-width media query. Desktop (>1024px) is deliberately untouched. WHY THIS FILE EXISTS -------------------- The site was built desktop-first and header template 36 never got a small-screen pass. Its top section (#header-main) carries #header-main { position: fixed; top: 0; z-index: 999 } in its own Elementor custom CSS, and nothing compensates for it — no body padding, no offset. So that section is a transparent ~257px-tall box pinned over the top of every page. On a phone the announcement bar (normal flow, ~158px tall once its copy wrapped) sat directly underneath that box. Because the header paints later in the DOM it won every hit test in the band it covered: the bar's "Get Access" CTA and its close button were both untappable, the header logo landed on top of the bar's text, and the desktop "Start Here" pill floated over the middle of it. That is the "can't click anything, nav and banner are a mess" report. THE FIX ------- Put the section back in normal flow and move the stickiness up to the

element itself.

is a direct child of , so `position: sticky` there holds for the whole document scroll; sticky on the section would only have held inside

's own (short) box. NOTE: nothing may set `overflow-x` on html or body while this is in place — that turns the sticky header back into a static one. The remainder is sizing: the logo's 80px desktop drop, the 35px nav spacer and the desktop "Start Here" pill are suppressed so the mobile header is an ordinary ~65px bar. ============================================================ */ /* ══════════════════════════════════════════════════════════ 1 — HEADER (tablet + mobile) ══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { /* Out of the fixed layer, back into the flow, below the bar. */ #header-main { position: static !important; width: auto !important; padding: 8px 16px !important; } /* Stickiness moves to the element that can actually carry it. */ header.elementor-location-header { position: sticky; top: 0; z-index: 999; background: #fff; } /* Keep the sticky bar clear of the WP admin bar (logged-in only). */ body.admin-bar header.elementor-location-header { top: 32px; } #header-main > .elementor-container { min-height: 0 !important; align-items: center; } #header-main .elementor-column > .elementor-element-populated { padding: 0 !important; } /* Elementor's default 25px gap under every widget stacks the header's four widgets into a column on a narrow screen. */ #header-main .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } /* Logo: drop the 80px offset that places it on the desktop hero. Elementor writes _margin onto .elementor-widget-container, not onto the element wrapper, so both are cleared. */ #header-main .elementor-element-f92a73e, #header-main .elementor-element-f92a73e > .elementor-widget-container { margin: 0 !important; } #header-main .elementor-element-f92a73e { width: auto !important; } #header-main .elementor-element-f92a73e img { width: auto !important; max-width: 100%; max-height: 56px; height: auto; display: block; } /* 35px spacer that separates the desktop nav from the logo row. */ #header-main .elementor-element-8f4f14b { display: none !important; } /* Right-hand cluster stays on one line, vertically centred. NOTE: .elementor-widget-wrap and .elementor-element-populated are the SAME element, not nested — a descendant chain between the two matches nothing at all. */ #header-main .elementor-element-c928f98 > .elementor-widget-wrap { flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 4px; } /* Hamburger: real 44px tap target, no stray tablet padding. */ #header-main .elementor-element-b64fe08, #header-main .elementor-element-b64fe08 > .elementor-widget-container { padding: 0 !important; margin: 0 !important; } #header-main .elementor-element-b64fe08 a, #header-main .elementor-element-b64fe08 .elementor-image { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } #header-main .elementor-element-b64fe08 img { width: 26px !important; max-width: 26px !important; height: auto; } /* Cart toggle: same. */ #header-main .elementor-element-edd847d .elementor-menu-cart__toggle .elementor-button { min-width: 44px; min-height: 44px; padding: 0 10px; } } /* ── Mobile only ────────────────────────────────────────── */ @media (max-width: 767px) { /* The admin bar is 46px tall below 783px. */ body.admin-bar header.elementor-location-header { top: 46px; } #header-main { padding: 6px 14px !important; } #header-main .elementor-element-f92a73e img { max-height: 50px; } /* The desktop "Start Here" pill has nowhere to go at this width and was landing on top of the announcement bar. The mobile menu opens with the same link as its first item. */ #header-main .elementor-element-3ebd1e1 { display: none !important; } /* The mega-menu panel is opened by #megamenu-btn, which Elementor hides on mobile — so the panel is unreachable here. It is a position: fixed, 388px-tall element; keep it out of the layer stack entirely rather than leaving it parked at top: 0. */ #megamenu { display: none !important; } } /* ══════════════════════════════════════════════════════════ 2 — MOBILE MENU POPUP (Elementor popup 324) The popup is sized 100vw. 100vw counts the scrollbar gutter, so opening it gives the page a horizontal scrollbar. Width, not viewport width. ══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .elementor-popup-modal .dialog-widget-content { max-width: 100%; } } /* ══════════════════════════════════════════════════════════ 3 — BOOSTER PACK POPUP (WPCode snippet 818, #lusPopupOverlay) The overlay is a fixed, vertically-centred flex box and the dialog inside it has no max-height and `overflow: hidden`. On a short phone the dialog is taller than the viewport, so it is clipped at BOTH ends with no way to scroll: measured at a 375x500 viewport the close ✕ sits 77px above the top of the screen and the CTA 39px below the bottom — the popup can neither be used nor dismissed. Anchor it to the top and let the overlay scroll instead. !important because WPCode prints the snippet's