/** * WooFilter Pro — off-canvas drawer. * * The panel is a normal column on desktop and slides in from the side below the * tablet breakpoint. Loaded only when the widget's drawer option is on. */ /* The panel's own opener. It lives outside .woofilter-panel because the panel is translated off-screen on mobile, so a child button would go with it. */ .woofilter-panel-trigger { display: none; align-items: center; gap: .45rem; padding: .5rem .8rem; margin-bottom: 1rem; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; } .woofilter-panel-trigger__icon { position: relative; width: 14px; height: 10px; } .woofilter-panel-trigger__icon::before, .woofilter-panel-trigger__icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; } .woofilter-panel-trigger__icon::before { top: 1px; } .woofilter-panel-trigger__icon::after { bottom: 1px; } @media ( max-width: 1024px ) { .woofilter-panel-trigger { display: inline-flex; } } .woofilter-drawer-close { display: none; position: absolute; top: .5rem; right: .5rem; width: 34px; height: 34px; padding: 0; background: #fff; border: 0; border-radius: 50%; box-shadow: 0 1px 8px rgba( 0, 0, 0, .18 ); cursor: pointer; z-index: 2; } .woofilter-drawer-close::before, .woofilter-drawer-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1px; background: #222; transition: transform .2s ease; } .woofilter-drawer-close::before { transform: translate( -50%, -50% ) rotate( 45deg ); } .woofilter-drawer-close::after { transform: translate( -50%, -50% ) rotate( -45deg ); } .woofilter-drawer-close:hover::before { transform: translate( -50%, -50% ) rotate( 0deg ); } .woofilter-drawer-close:hover::after { transform: translate( -50%, -50% ) rotate( 90deg ); } /* The open drawer is moved in here, a direct child of . Nothing in the page can then trap it: `position: fixed` resolves against the viewport again, and the stacking order is the document's own rather than some Elementor container's. The host paints nothing and never intercepts a pointer — only the scrim and the panel inside it do. */ .woofilter-drawer-host { position: fixed; inset: 0; pointer-events: none; z-index: 100002; } .woofilter-drawer-host > * { pointer-events: auto; } .woofilter-scrim { position: fixed; inset: 0; background: rgba( 0, 0, 0, .4 ); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 1; } .woofilter-scrim.is-active { opacity: 1; visibility: visible; } @media ( max-width: 1024px ) { .woofilter-panel--drawer { position: fixed; top: 0; left: 0; width: min( 330px, calc( 100% - 2.5rem ) ); height: 100dvh; padding: 3.5rem 1.25rem 3rem; overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: 0 1px 12px 2px rgba( 120, 120, 120, .3 ); transform: translateX( -100% ); transition: transform .3s ease; z-index: 2; } .woofilter-panel--drawer.is-drawer-open { transform: translateX( 0 ); } .woofilter-panel--drawer .woofilter-drawer-close { display: block; } /* Pinned rather than merely `overflow: hidden`, which iOS Safari ignores. The offset is restored by the script on close. */ body.woofilter-drawer-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } } @media ( prefers-reduced-motion: reduce ) { .woofilter-panel--drawer, .woofilter-scrim, .woofilter-drawer-close::before, .woofilter-drawer-close::after { transition: none; } }