/** * Layali mobile menu drawer — full-screen white panel matching the * Passage du Désir reference: × close top-right, search pill, accordion * nav with bold plum items, indented children, coral accent class. */ /* ---------- Hamburger toggle ---------- */ .ly-mmenu__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; background: transparent; color: var( --ly-color-primary, #53225e ); cursor: pointer; } /* ---------- Drawer shell ---------- */ .ly-mmenu { position: fixed; inset: 0; /* --ly-z-drawer (310) > --ly-z-modal (300, side-cart): the full-screen menu must win the stacking tie, not DOM order. */ z-index: var( --ly-z-drawer, 310 ); background: #ffffff; transform: translateX( -100% ); /* visibility flips AFTER the slide-out finishes (0s + 280ms delay); without the delay it snaps hidden in the same frame as close and the exit animation never plays. */ transition: transform 280ms cubic-bezier( 0.2, 0, 0, 1 ), visibility 0s linear 280ms; visibility: hidden; /* Deliberately NO overflow:hidden. This element has a transform (its slide), and on iOS/WebKit `overflow:hidden` + `transform` on the SAME element clips a transformed CHILD to the wrong region — the drill-in sub-panel (its own translateX) painted BLANK on mobile even while on-screen, recovering only on a forced reflow (e.g. Esc). Desktop composited it correctly, which masked the bug in every headless probe. Clipping isn't needed here anyway: closed sub-panels sit one full viewport-width to the right (past the screen edge) and are visibility:hidden, and the body scroll-lock (.ly-mmenu-lock) blocks horizontal scroll whenever the drawer is open — so nothing can peek. The editor preview re-adds overflow:hidden (transform:none there → no bug). */ } .ly-mmenu[aria-hidden="false"] { transform: translateX( 0 ); visibility: visible; /* Opening must show immediately — no visibility delay on the way in. */ transition: transform 280ms cubic-bezier( 0.2, 0, 0, 1 ), visibility 0s; } @media (prefers-reduced-motion: reduce) { .ly-mmenu, .ly-mmenu[aria-hidden="false"] { transition: none; } } /* Lock applied to BOTH html and body — body alone is unreliable on iOS Safari (background can still scroll behind the fixed overlay). */ html.ly-mmenu-lock, body.ly-mmenu-lock { overflow: hidden; } /* Elementor editor preview — the drawer renders inline (static, visible) so authors can see and style it; open/close behavior is disabled there. */ .ly-mmenu.ly-mmenu--preview { /* relative (not static) so the absolute drill-in sub-panel is contained within the preview box in the Elementor editor. */ position: relative; inset: auto; transform: none; visibility: visible; transition: none; border: 1px dashed var( --ly-color-border, #ece6e0 ); border-radius: 12px; max-height: 480px; /* Safe here (transform:none above → no WebKit clip bug): keeps the closed drill-in sub-panels inside the preview box instead of spilling out. */ overflow: hidden; } .ly-mmenu__inner { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 48px; box-sizing: border-box; } /* ---------- Top row (close) ---------- */ .ly-mmenu__top { display: flex; justify-content: flex-end; margin-bottom: 8px; } .ly-mmenu__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var( --ly-color-text, #1f1f23 ); cursor: pointer; } /* ---------- Search pill ---------- */ .ly-mmenu__search { position: relative; margin: 0 0 18px; padding: 0 0 22px; border-bottom: 1px solid var( --ly-color-border, #ece6e0 ); } .ly-mmenu__search input[type="search"] { width: 100%; box-sizing: border-box; padding: 15px 54px 15px 20px; border: 1.5px solid var( --ly-color-primary, #53225e ); border-radius: 999px; /* 16px floor — smaller triggers iOS auto-zoom on focus. */ font-size: 16px; font-family: inherit; color: var( --ly-color-text, #1f1f23 ); background: #ffffff; outline: none; } .ly-mmenu__search input[type="search"]::placeholder { color: var( --ly-color-text-muted, #4a4a52 ); } .ly-mmenu__search button[type="submit"] { position: absolute; right: 8px; top: 4px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var( --ly-color-primary, #53225e ); cursor: pointer; } /* ---------- Category tabs (Alo-style) ---------- */ .ly-mmenu__tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 0 0 20px; border-bottom: 1px solid var( --ly-color-border, #ece6e0 ); } .ly-mmenu__tabs::-webkit-scrollbar { display: none; } .ly-mmenu__tab { position: relative; flex: 0 0 auto; padding: 4px 0 14px; border: none; background: transparent; cursor: pointer; font-family: var( --ly-text-heading, 'Bricolage Grotesque', sans-serif ); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; color: var( --ly-color-text-muted, #9a8fa0 ); transition: color 160ms ease; } .ly-mmenu__tab.is-active { color: var( --ly-color-primary, #53225e ); } .ly-mmenu__tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var( --ly-color-secondary, #ff7477 ); border-radius: 2px; } /* ---------- Card grid ---------- */ .ly-mmenu__panel[hidden] { display: none; } .ly-mmenu__shopall { display: inline-block; margin: 0 0 16px; font-weight: 600; font-size: 0.95rem; color: var( --ly-color-primary, #53225e ); text-decoration: underline; text-underline-offset: 3px; } .ly-mmenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; } .ly-mmenu__card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; /* Reset so a drill-in