/* ===================================================================== Divi Mobile Menu — desktop bar + mobile slide panel ===================================================================== */ /* Scoped reset so the theme/Divi's global styles can't leak in and cause spacing/alignment bugs (a common source of "styling issues"). */ .dmm-wrapper, .dmm-wrapper *, .dmm-wrapper *::before, .dmm-wrapper *::after, .dmm-portal, .dmm-portal *, .dmm-portal *::before, .dmm-portal *::after { box-sizing: border-box; } .dmm-wrapper ul, .dmm-portal ul { list-style: none; margin: 0; padding: 0; } .dmm-wrapper a, .dmm-portal a { text-decoration: none; } .dmm-wrapper button, .dmm-portal button { font-family: inherit; background: none; border: none; cursor: pointer; } .dmm-vb-preview { min-height: 48px; } .dmm-wrapper { --dmm-overlay: rgba(0, 0, 0, 0.5); --dmm-panel-width: 85%; position: relative; display: block; width: 100%; /* isolation creates a fresh, local stacking context WITHOUT adding a transform/filter, so it can't accidentally break position:fixed descendants the way `transform` does. */ isolation: isolate; } .dmm-burger { display: inline-flex; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; flex-shrink: 0; } .dmm-burger span { display: block; height: 2px; width: 100%; background: #494949; border-radius: 1px; } /* --------------------------------------------------------------------- DESKTOP BAR --------------------------------------------------------------------- */ .dmm-desktop-bar { display: none; /* shown at >= 981px, see media query below */ align-items: center; width: 100%; color: #fff; } .dmm-desktop-categories { position: relative; margin-right: 32px; } .dmm-d-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 4px; color: #494949; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; } .dmm-d-caret { font-size: 11px; line-height: 1; transition: transform 0.2s ease; } .dmm-desktop-categories.is-open .dmm-d-caret { transform: rotate(180deg); } .dmm-desktop-categories.is-open .dmm-d-toggle { color: #571b1b; } .dmm-d-toggle .dmm-d-toggle-label { font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; } /* The flyout itself gets ported to by JS and repositioned with position:fixed + JS-calculated top/left, so its CSS here mainly controls internal look, not placement. */ .dmm-d-dropdown { display: none; position: fixed; background: #fff; color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); border-top: 1px solid #ececec; min-width: 620px; max-width: 90vw; max-height: 70vh; overflow: hidden; z-index: 2147483000; } .dmm-d-dropdown.is-active { display: flex; background: #fff; } .dmm-d-col-left { width: 220px; flex-shrink: 0; border-right: 1px solid #ececec; overflow-y: auto; max-height: 70vh; } .dmm-d-left-item { position: relative; border-bottom: 1px solid #f0f0f0; } .dmm-d-left-item .dmm-item-link { display: block; padding: 14px 36px 14px 18px; font-size: 14px; color: #222; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; } .dmm-d-left-item.is-open, .dmm-d-left-item:hover { background: #f5f5f5; } .dmm-d-left-item.is-open .dmm-item-link, .dmm-d-left-item:hover .dmm-item-link { color: #666; } .dmm-d-left-item .dmm-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #b6b6b6; pointer-events: none; } .dmm-d-col-right { flex: 1; overflow-y: auto; max-height: 70vh; padding: 8px 0; } .dmm-d-panel { display: none; } .dmm-d-panel.is-active { display: block; } .dmm-d-panel li a { display: block; padding: 10px 24px; font-size: 14px; color: #555; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; } .dmm-d-panel li a:hover { color: #571b1b; } /* Primary inline nav */ .dmm-desktop-primary { flex: 1; } .dmm-inline-list { display: flex; align-items: center; gap: 28px; list-style-type: none !important; padding: 0 !important; } .dmm-inline-item { position: relative; } .dmm-inline-item > a { display: inline-flex; align-items: center; gap: 6px; padding: 14px 2px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #494949 !important; position: relative; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; text-transform: uppercase; } .dmm-inline-item.dmm-current > a, .dmm-inline-item.is-open > a, .dmm-inline-item > a:hover { color: #571b1b !important; } .dmm-inline-item.dmm-current > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: #571b1b; } .dmm-inline-caret:after { font-family: ETmodules; content: "3"; font-size: 16px; font-weight: 800; } .dmm-sub-item.dmm-has-children > a .dmm-inline-caret { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; border-right: 0; margin-left: auto; } .dmm-sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 8px 0; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); z-index: 2147483000; list-style: none; } .dmm-sub-menu.is-open, .dmm-inline-item:hover > .dmm-sub-menu, .dmm-inline-item.is-open > .dmm-sub-menu, .dmm-sub-item:hover > .dmm-sub-menu, .dmm-sub-item.is-open > .dmm-sub-menu { display: block; } .dmm-sub-menu.dmm-portal { position: fixed; top: auto; left: auto; background: #ffd320; border-top: 3px solid #D52E2C; padding: 0; } .dmm-sub-item { position: relative; } .dmm-sub-item > a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #222 !important; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; white-space: nowrap; text-transform: uppercase; } .dmm-sub-item > a:hover, .dmm-sub-item.is-open > a, .dmm-sub-item.dmm-current > a { color: #571b1b !important; background: #f5f5f5; } .dmm-sub-item > .dmm-sub-menu { top: 0; left: 100%; margin-left: 0; } .dmm-desktop-cart { margin-left: 28px; flex-shrink: 0; } .dmm-cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; color: #494949 !important; padding: 8px; } .dmm-cart-link:hover { color: #571b1b !important; } .dmm-cart-icon { display: inline-flex; } .dmm-cart-count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #571b1b; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* --------------------------------------------------------------------- MOBILE TRIGGER + PANEL --------------------------------------------------------------------- */ .dmm-mobile-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 8px; color: #fff; float: right; } .dmm-trigger-label { font-size: 14px; color: #fff; } /* Overlay + panel are ported into by JS on init (see mobile-menu.js). pointer-events:none while inactive is the fix for the classic bug where an invisible-but-still-in-the-DOM overlay silently blocks clicks on the header underneath it even at opacity:0. */ .dmm-overlay { position: fixed; inset: 0; background: var(--dmm-overlay); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease; z-index: 2147483001; } .dmm-overlay.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .dmm-panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: var(--dmm-panel-width); max-width: 420px; background: #fff; color: #fff; transform: translateX(100%); transition: transform 0.3s ease; z-index: 2147483002; display: flex; flex-direction: column; box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15); overflow: hidden; pointer-events: none; } .dmm-panel.is-active { transform: translateX(0); pointer-events: auto; } .dmm-panel-top { display: flex; justify-content: flex-end; align-items: center; padding: 16px 20px; border-bottom: 1px solid #ececec; flex-shrink: 0; padding-top: max(16px, env(safe-area-inset-top)); } .dmm-close { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: #222; display: flex; align-items: center; gap: 4px; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; } .dmm-close-x { font-size: 20px; line-height: 1; } .dmm-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid #ececec; } .dmm-tab { flex: 1; background: #f7f7f7; padding: 16px 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #7a7a7a; position: relative; border: 0; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; } .dmm-tab.is-active { background: #ffd320; color: #494949; } .dmm-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #494949; } .dmm-tab-panel { display: none; flex: 1; overflow: hidden; position: relative; } .dmm-tab-panel.is-active { display: block; } .dmm-screens { position: relative; height: 100%; overflow: hidden; } .dmm-screen { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; transform: translateX(100%); transition: transform 0.28s ease; visibility: hidden; } .dmm-screen.is-active { transform: translateX(0); visibility: visible; z-index: 2; } .dmm-screen-header { display: flex; align-items: center; gap: 16px; padding: 18px 20px 10px; border-bottom: 1px solid #ececec; } .dmm-back { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: #444; display: flex; align-items: center; gap: 6px; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; } .dmm-back-arrow { font-size: 16px; } .dmm-screen-title { font-size: 13px; font-weight: 600; color: #888; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; } .dmm-list { list-style: none; margin: 0; padding: 0; } .dmm-item { position: relative; border-bottom: 1px solid #ececec; } .dmm-item-link { display: block; padding: 18px 20px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #222; text-transform: uppercase; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; } .dmm-item.dmm-current > .dmm-item-link { color: #571b1b; } .dmm-has-children .dmm-item-link { padding-right: 48px; } .dmm-chevron { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #b6b6b6; pointer-events: none; } .dmm-empty { padding: 20px; color: #888; font-size: 14px; } /* Applied to while the mobile panel is open. Uses position-fixed body-lock (with scroll position preserved by JS) instead of plain overflow:hidden, which is what actually prevents the iOS "background page scrolls behind the menu" bug — a common companion to z-index bugs. */ body.dmm-lock-scroll { overflow: hidden; position: fixed; width: 100%; } /* --------------------------------------------------------------------- RESPONSIVE SWITCH (matches Divi's standard desktop breakpoint) --------------------------------------------------------------------- */ @media (min-width: 981px) { .dmm-desktop-bar { display: flex; } .dmm-mobile-trigger { display: none; } } @media (max-width: 980px) { .dmm-desktop-bar { display: none; } .dmm-panel { width: 90%; max-width: none; } }