/* ============================================================ Mobile Filter Drawer Active only below Divi's tablet breakpoint (980px). The JS moves .hg-filter-drawer (the Divi 1/4 column) to directly, escaping any Divi transform/stacking context so z-index and position:fixed work reliably. ============================================================ */ @media (max-width: 980px) { /* ── Drawer panel ── */ .hg-filter-drawer { background: #ffffff; box-shadow: 4px 0 28px rgba(0, 0, 0, 0.16); height: 100%; left: 0; max-width: 320px; /* Drawer is a direct child of — no inherited stacking context */ overflow-y: auto; -webkit-overflow-scrolling: touch; position: fixed; top: 0; transform: translateX(-100%); transition: transform 0.28s ease; width: 85%; /* z-index above backdrop (9999998) */ z-index: 9999999; } body.hg-filter-open .hg-filter-drawer { transform: translateX(0); } /* Inner Divi module: add padding so form content isn't flush */ .hg-filter-drawer .et_pb_module { padding: 0 20px 28px; } /* ── Sticky drawer header ── */ .hg-filter-drawer__header { align-items: center; background: #ffffff; border-bottom: 1px solid #d7e2e0; display: flex; justify-content: space-between; padding: 16px 20px; position: sticky; top: 0; z-index: 1; } .hg-filter-drawer__title { color: #00615c; font-size: 16px; font-weight: 700; line-height: 1.2; } .hg-filter-close { background: transparent; border: 0; color: #00615c; cursor: pointer; font-size: 30px; line-height: 1; padding: 0 2px; } .hg-filter-close:hover { color: #004a46; } /* ── Backdrop ── */ .hg-filter-backdrop { background: rgba(4, 24, 23, 0.52); inset: 0; display: none; position: fixed; /* Below drawer (9999999), above everything else */ z-index: 9999998; } body.hg-filter-open .hg-filter-backdrop { display: block; } /* ── Floating "Filter" toggle button — left side ── */ .hg-filter-toggle-btn { align-items: center; background: #00615c; border: 0; border-radius: 999px; bottom: 24px; box-shadow: 0 4px 16px rgba(0, 97, 92, 0.4); color: #ffffff; cursor: pointer; display: flex; font-size: 15px; font-weight: 600; gap: 8px; left: 20px; padding: 13px 22px; position: fixed; transition: box-shadow 0.2s ease, transform 0.2s ease; z-index: 9999997; } .hg-filter-toggle-btn:hover, .hg-filter-toggle-btn:focus-visible { box-shadow: 0 6px 20px rgba(0, 97, 92, 0.5); transform: translateY(-2px); outline: none; } /* Hide toggle button while drawer is open */ body.hg-filter-open .hg-filter-toggle-btn { display: none; } }