/* ============================================================= Raw Mobile Menu v4 All menu-item rules are scoped inside .raw-mobile-menu so this plugin always beats theme-level a, a:visited, a:active selectors regardless of load order. ============================================================= */ /* ── Trigger ─────────────────────────────────────────────── */ .raw-mobile-menu-trigger { display: none; position: relative; align-items: center; justify-content: center; background: #000; border: none; width: 44px; height: 44px; border-radius: 3px; cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.2s ease; /* High z-index so it sits above Elementor sticky header wrappers without needing to teleport the element to . */ z-index: 99998; touch-action: manipulation; user-select: none; -webkit-user-select: none; vertical-align: middle; } .raw-mobile-menu-trigger:hover { background: #222; } .raw-mobile-menu-trigger .hamburger-icon { position: relative; width: 20px; height: 14px; display: block; } .raw-mobile-menu-trigger .h-bar { display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .raw-mobile-menu-trigger .h-bar:nth-child(1) { top: 0; } .raw-mobile-menu-trigger .h-bar:nth-child(2) { top: 6px; } .raw-mobile-menu-trigger .h-bar:nth-child(3) { top: 12px; } .raw-mobile-menu-trigger.is-active .h-bar:nth-child(1) { transform: rotate(45deg); top: 6px; } .raw-mobile-menu-trigger.is-active .h-bar:nth-child(2) { opacity: 0; } .raw-mobile-menu-trigger.is-active .h-bar:nth-child(3) { transform: rotate(-45deg); top: 6px; } @media (max-width: 1366px) { .raw-mobile-menu-trigger { display: flex !important; } } @media (min-width: 1367px) { .raw-mobile-menu-trigger { display: none !important; } } /* Teleported trigger rule removed — trigger stays in its original DOM position. The z-index on the base rule below is sufficient to keep it visible above Elementor wrappers without any DOM teleport. */ /* ── Overlay ─────────────────────────────────────────────── */ /* BUG FIX: was display:none / display:block with no fade-out transition. When closing, display:none snapped instantly — the overlay disappeared mid-tap and the click fell through to the trigger underneath, re-opening the menu (the flash open/close bug on tablet). Now uses visibility+opacity so the overlay fades out over 0.3s, blocking click fall-through during the entire closing animation. */ .raw-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99990; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* iOS Safari: ensure overlay covers the full viewport */ height: 100vh; height: 100dvh; touch-action: none; -webkit-touch-callout: none; } .raw-menu-overlay.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s linear 0s; } /* ── Drawer ──────────────────────────────────────────────── */ .raw-mobile-menu { visibility: hidden; pointer-events: none; position: fixed; /* iOS Safari: anchor to viewport edges including safe areas */ top: 0; left: 0; /* Prevent horizontal scroll from shifting the fixed position on iOS */ margin-left: 0; width: min(380px, 100vw); /* iOS Safari: explicit height chain. 100dvh = dynamic viewport height (Safari 15.4+, iPhone 15 Pro / Safari 17+). It tracks the visual viewport so the drawer never overflows behind the Safari bottom toolbar. -webkit-fill-available is ONLY used as fallback for older Safari (< 15.4) via @supports — see below. Placing it unconditionally last would override 100dvh on modern Safari and cause the drawer to mis-size. */ height: 100vh; /* base fallback for all browsers */ height: 100dvh; /* Safari 15.4+ / iPhone 15 Pro preferred */ /* Push content below the notch/status bar and away from side cutouts */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); /* padding-left safe-area removed: not needed for a left-anchored drawer in portrait; it clips text (e.g. "ROTEIN" instead of "PROTEIN"). Landscape safe-area is handled via the @media query below. */ background: #fff; z-index: 99999; overflow: hidden; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.42s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.42s; box-shadow: 4px 0 28px rgba(0,0,0,0.16); /* Prevent iOS rubber-band scroll bleeding through the drawer */ -webkit-overflow-scrolling: auto; /* iOS Safari: prevent background page from scrolling when drawer is open */ touch-action: none; } /* iOS Safari scroll lock: applied to and via JS. BUG FIX: removed position:relative + height:100% — setting position:relative on creates a new containing block, which makes position:fixed elements (drawer, overlay, teleported trigger) resolve against instead of the viewport, causing them to shift or disappear on both phone and tablet. overflow:hidden alone is sufficient to lock scroll without breaking fixed positioning. */ html.raw-menu-open, html.raw-menu-open body { overflow: hidden !important; /* iOS Safari: prevent momentum / rubber-band scrolling of the page */ overscroll-behavior: none; touch-action: none; -webkit-overflow-scrolling: auto; } .raw-mobile-menu.is-open { visibility: visible; pointer-events: auto; transform: translateX(0); transition: transform 0.42s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s; } /* Safari < 15.4 fallback: use -webkit-fill-available ONLY when dvh is NOT supported. This prevents the fallback from overriding the correct 100dvh value on iPhone 15 Pro / Safari 17+. */ @supports (-webkit-touch-callout: none) and (not (height: 100dvh)) { .raw-mobile-menu { height: -webkit-fill-available; } } /* Phone: drawer goes full width so content is never clipped. !important overrides the Elementor inline width selector. */ @media (max-width: 767px) { .raw-mobile-menu { width: 100vw !important; } } /* Tablet (768px–1366px): drawer uses a comfortable fixed width. Covers all iPads including iPad Pro 12.9" landscape (1366px). */ @media (min-width: 768px) and (max-width: 1366px) { .raw-mobile-menu { width: min(420px, 50vw) !important; } } /* Landscape: re-apply left safe-area for the notch cutout */ @media (orientation: landscape) { .raw-mobile-menu { padding-left: env(safe-area-inset-left, 0px); } } @media (min-width: 1367px) { .raw-mobile-menu { display: none !important; } .raw-menu-overlay { display: none !important; } } /* ── Panel stack ─────────────────────────────────────────── */ .raw-mobile-menu .raw-panel-stack { position: relative; flex: 1; /* iOS Safari: explicit height needed so position:absolute children inside a flex:1 container resolve their height correctly. height:0 collapses the stack on iPhone 15 Pro when the dynamic viewport height changes (keyboard, chrome resize). Use min-height:0 to allow shrinking while keeping the actual resolved height non-zero. */ height: 100%; min-height: 0; overflow: hidden; } /* ── Panels ──────────────────────────────────────────────── */ .raw-mobile-menu .raw-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; visibility: hidden; transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.42s; /* iOS Safari: do NOT use will-change:transform on hidden panels. It creates a new stacking context that clips sub-panel content and can cause the second drawer to render blank on iPhone 15 Pro. GPU compositing is triggered on the active panel only (see below). */ overflow: hidden; } .raw-mobile-menu .raw-panel.is-active { transform: translateX(0); visibility: visible; transition: transform 0.42s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s; /* Promote active panel to its own compositor layer ONLY when visible */ -webkit-transform: translateX(0); } .raw-mobile-menu .raw-panel.is-behind { transform: translateX(-28%); visibility: hidden; transition: transform 0.42s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.42s; } /* ── Panel header ────────────────────────────────────────── */ .raw-mobile-menu .raw-panel-header { display: flex; align-items: center; height: 56px; min-height: 56px; padding: 0 6px 0 4px; border-bottom: 1px solid #e8e8e8; background: #fff; flex-shrink: 0; gap: 2px; } .raw-mobile-menu .raw-panel-header__back { display: flex; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 8px 6px; color: #000; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; flex-shrink: 0; border-radius: 4px; transition: background 0.15s; white-space: nowrap; text-decoration: none; } .raw-mobile-menu .raw-panel-header__back:hover { background: #f2f2f2; } .raw-mobile-menu .raw-panel-header__back svg { flex-shrink: 0; } .raw-mobile-menu .raw-panel-header__title { flex: 1; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .raw-mobile-menu .raw-panel-header__close { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 8px; width: 38px; height: 38px; border-radius: 50%; color: #000; flex-shrink: 0; transition: background 0.15s; } .raw-mobile-menu .raw-panel-header__close:hover { background: #f2f2f2; } /* ── Panel body ──────────────────────────────────────────── */ .raw-mobile-menu .raw-panel-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ── Menu list ───────────────────────────────────────────── */ .raw-mobile-menu .raw-menu-list { list-style: none; margin: 0; padding: 0; } .raw-mobile-menu .raw-menu-item { border-bottom: 1px solid #f0f0f0; margin: 0; padding: 0; } .raw-mobile-menu .raw-menu-item:last-child { border-bottom: none; } /* ── Row — the critical block ────────────────────────────── */ /* Only layout/structural properties here. Font properties are set via Elementor widget controls so they always load after this stylesheet and win. */ .raw-mobile-menu .raw-menu-item__row, .raw-mobile-menu a.raw-menu-item__row, .raw-mobile-menu a.raw-menu-item__row:link, .raw-mobile-menu a.raw-menu-item__row:visited, .raw-mobile-menu a.raw-menu-item__row:hover, .raw-mobile-menu a.raw-menu-item__row:active, .raw-mobile-menu a.raw-menu-item__row:focus, .raw-mobile-menu a.raw-menu-item__row:focus-within { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 16px 20px; background: transparent; border: none !important; cursor: pointer !important; /* Font defaults — Elementor typography controls override these because the plugin CSS now loads via wp_enqueue_scripts (early), while Elementor dynamic CSS outputs in after it */ font-family: inherit; font-size: 14px; font-weight: 600; font-style: normal; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none !important; color: #000; text-align: left !important; gap: 8px !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent !important; transition: background 0.15s, color 0.15s !important; } /* Hover only changes background. The extra button selectors defeat the theme's global [type=button]:hover { background-color: #ffffff } rule. */ .raw-mobile-menu .raw-menu-item__row:hover, .raw-mobile-menu a.raw-menu-item__row:hover, .raw-mobile-menu button.raw-menu-item__row:hover, .raw-mobile-menu button.raw-menu-item__row:focus { background: #f7f7f7 !important; background-color: #f7f7f7 !important; color: #000 !important; text-decoration: none !important; } /* Prevent the theme's global button:hover from bleeding into the back-button and close-button (they set their own bg). */ .raw-mobile-menu .raw-panel-header__back:hover, .raw-mobile-menu .raw-panel-header__back:focus, .raw-mobile-menu .raw-panel-header__close:hover, .raw-mobile-menu .raw-panel-header__close:focus { background: #f2f2f2 !important; background-color: #f2f2f2 !important; color: #000 !important; text-decoration: none !important; } .raw-mobile-menu .raw-menu-item__chevron { flex-shrink: 0; color: #000; display: flex; align-items: center; } /* ── "View All" rows ─────────────────────────────────────── */ .raw-mobile-menu .raw-menu-item--view-all .raw-menu-item__row, .raw-mobile-menu .raw-menu-item--view-all a.raw-menu-item__row, .raw-mobile-menu .raw-menu-item--view-all a.raw-menu-item__row:link, .raw-mobile-menu .raw-menu-item--view-all a.raw-menu-item__row:visited, .raw-mobile-menu .raw-menu-item--view-all a.raw-menu-item__row:hover, .raw-mobile-menu .raw-menu-item--view-all a.raw-menu-item__row:active, .raw-mobile-menu .raw-menu-item--view-all a.raw-menu-item__row:focus { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #666; padding-top: 12px !important; padding-bottom: 12px !important; } .raw-mobile-menu .raw-menu-item--view-all { border-bottom: 2px solid #e0e0e0 !important; margin-bottom: 4px; } /* ── Elementor editor — hide drawer in ALL editor contexts ──── Covers both the outer shell (.elementor-editor-active) and the preview iframe (body.elementor-editor-preview). These are the highest-specificity CSS rules we can write. The PHP render() guard is the primary defence; this is the safety net in case any cached HTML slips through. ------------------------------------------------------------ */ .elementor-editor-active .raw-mobile-menu, body.elementor-editor-preview .raw-mobile-menu { display: none !important; visibility: hidden !important; } .elementor-editor-active .raw-menu-overlay, body.elementor-editor-preview .raw-menu-overlay { display: none !important; } .elementor-editor-active .raw-mobile-menu-trigger { display: flex !important; margin-bottom: 6px; } /* ── Focus rings ─────────────────────────────────────────── */ .raw-mobile-menu-trigger:focus-visible, .raw-mobile-menu .raw-menu-item__row:focus-visible, .raw-mobile-menu .raw-panel-header__close:focus-visible, .raw-mobile-menu .raw-panel-header__back:focus-visible { outline: 2px solid #005fcc !important; outline-offset: 2px !important; } /* ── Accordion (sub-panel level 2+) ──────────────────────── */ /* Category toggle row */ .raw-mobile-menu .raw-acc-toggle { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; -webkit-tap-highlight-color: transparent !important; } /* Chevron rotates when open */ .raw-mobile-menu .raw-acc-toggle .raw-acc-chevron { transition: transform 0.28s ease; flex-shrink: 0; color: #000; } .raw-mobile-menu .raw-acc-toggle[aria-expanded="true"] .raw-acc-chevron { transform: rotate(180deg); } /* Accordion body — hidden by default, shown via JS slideDown */ .raw-mobile-menu .raw-acc-body { overflow: hidden; } /* Indented child list */ .raw-mobile-menu .raw-acc-list { background: #fafafa; border-top: 1px solid #f0f0f0; } .raw-mobile-menu .raw-acc-list .raw-menu-item__row, .raw-mobile-menu .raw-acc-list a.raw-menu-item__row, .raw-mobile-menu .raw-acc-list a.raw-menu-item__row:link, .raw-mobile-menu .raw-acc-list a.raw-menu-item__row:visited, .raw-mobile-menu .raw-acc-list a.raw-menu-item__row:hover, .raw-mobile-menu .raw-acc-list a.raw-menu-item__row:active, .raw-mobile-menu .raw-acc-list a.raw-menu-item__row:focus { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0.01em; color: #222; padding-left: 28px !important; background: transparent !important; } .raw-mobile-menu .raw-acc-list .raw-menu-item__row:hover, .raw-mobile-menu .raw-acc-list a.raw-menu-item__row:hover, .raw-mobile-menu .raw-acc-list button.raw-menu-item__row:hover, .raw-mobile-menu .raw-acc-list button.raw-menu-item__row:focus { background: #f0f0f0 !important; background-color: #f0f0f0 !important; } /* Deeper nesting gets slightly more indent */ .raw-mobile-menu .raw-acc-list .raw-acc-list .raw-menu-item__row, .raw-mobile-menu .raw-acc-list .raw-acc-list a.raw-menu-item__row { padding-left: 40px !important; font-size: 13px; color: #555; } /* "View All" inside accordion */ .raw-mobile-menu .raw-acc-list .raw-menu-item--view-all .raw-menu-item__row, .raw-mobile-menu .raw-acc-list .raw-menu-item--view-all a.raw-menu-item__row { font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.07em; padding-left: 28px !important; } /* ── Search bar ─────────────────────────────────────────── */ .raw-mobile-menu .raw-menu-search { padding: 10px 14px; border-bottom: 1px solid #e8e8e8; background: #fff; flex-shrink: 0; } .raw-mobile-menu .raw-menu-search__wrapper { display: flex; align-items: center; background: #f5f5f5; border-radius: 8px; padding: 0 12px; transition: background 0.2s ease; } .raw-mobile-menu .raw-menu-search__wrapper:focus-within { background: #ebebeb; } .raw-mobile-menu .raw-menu-search__icon { color: #888; flex-shrink: 0; margin-right: 8px; } .raw-mobile-menu .raw-menu-search__input { flex: 1; border: none; background: transparent; padding: 10px 0; font-size: 16px; color: #000; outline: none; font-family: inherit; -webkit-appearance: none; appearance: none; border-radius: 0; min-width: 0; } .raw-mobile-menu .raw-menu-search__input::placeholder { color: #999; } .raw-mobile-menu .raw-menu-search__clear { background: none; border: none; padding: 4px; cursor: pointer; color: #888; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s; flex-shrink: 0; } .raw-mobile-menu .raw-menu-search__clear:hover { background: rgba(0,0,0,0.08); } /* ── Search results (WooCommerce products) ─────────────── */ .raw-mobile-menu .raw-menu-search-results { display: none; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .raw-mobile-menu .raw-search-product-list { list-style: none; margin: 0; padding: 0; } .raw-mobile-menu .raw-search-product { border-bottom: 1px solid #f0f0f0; } .raw-mobile-menu .raw-search-product__link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background 0.15s; } .raw-mobile-menu .raw-search-product__link:hover { background: #f7f7f7; } .raw-mobile-menu .raw-search-product__img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #f5f5f5; } .raw-mobile-menu .raw-search-product__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .raw-mobile-menu .raw-search-product__title { font-size: 14px; font-weight: 600; color: #000; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .raw-mobile-menu .raw-search-product__price { font-size: 13px; color: #555; line-height: 1.3; } .raw-mobile-menu .raw-search-product__price del { color: #aaa; margin-right: 4px; } .raw-mobile-menu .raw-search-product__price ins { text-decoration: none; font-weight: 600; color: #000; } /* Loading state */ .raw-mobile-menu .raw-search-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: #888; font-size: 14px; } .raw-mobile-menu .raw-search-spinner { width: 18px; height: 18px; border: 2px solid #ddd; border-top-color: #333; border-radius: 50%; animation: raw-spin 0.6s linear infinite; } @keyframes raw-spin { to { transform: rotate(360deg); } } /* No results */ .raw-mobile-menu .raw-search-no-results { padding: 40px 20px; text-align: center; color: #999; font-size: 14px; } /* ── Elementor editor preview (iframe) ─────────────────────── In the editor preview iframe the body gets "elementor-editor-preview". Keep the drawer hidden so it matches the closed state on the live front-end. Only the trigger button remains visible so the designer can confirm the widget is correctly placed. ------------------------------------------------------------ */ body.elementor-editor-preview .raw-mobile-menu { display: none !important; } body.elementor-editor-preview .raw-menu-overlay { display: none !important; } /* ── Elementor wrapper: prevent touch delay on trigger ──────── */ /* Elementor wraps every widget in .elementor-widget-container. Without this, the wrapper's default touch-action can delay or swallow touch events before they reach the trigger button, making the menu feel like it requires a long-press to open. */ .elementor-widget-container:has(.raw-mobile-menu-trigger) { touch-action: manipulation; }