/** * Gift Ideas mega menu * * - Panel is anchored to the header (absolute, top: 100%) — no gap, no JS top offset * - Backdrop is a fixed layer under the header (z-index stack) * - Scroll lock: html.scrollbar-gutter + overflow on only (no padding compensation) */ html { scrollbar-gutter: stable; } html.gi-menu-open { overflow: hidden; } /* Full-page dim layer; header + panel sit above it */ .gi-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; } html.gi-menu-open .gi-backdrop { display: block; } .gi-header, .gi-head { position: relative; z-index: 1001; } .gi-has-drop > a.gi-drop-toggle, .gi-has-drop > a.on { padding-right: 36px !important; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5.5L8 10.5L13 5.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: calc(100% - 10px) center !important; } .gi-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; width: 100%; margin: 0; background: #fff; border-radius: 0 0 12px 12px; padding: 32px; gap: 12px; z-index: 2; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); box-sizing: border-box; font-family: "Montserrat", sans-serif; } .gi-header.gi-menu-open .gi-dropdown, .gi-head.gi-menu-open .gi-dropdown { display: flex; } .gi-drop-col { flex: 1; background: #F5F5F6; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 18px; max-height: min(65vh, calc(100vh - 120px)); overflow-y: auto; } .gi-drop-col::-webkit-scrollbar { width: 3px; } .gi-drop-col::-webkit-scrollbar-thumb { background: #E8874A; border-radius: 3px; } .gi-drop-title { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding: 0 4px; text-align: left; display: block; } .gi-dropdown .gi-drop-col ul { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: stretch; } .gi-dropdown .gi-drop-col ul li { display: block; width: 100%; } .gi-dropdown .gi-drop-col ul li a { display: block; padding: 8px 12px; color: #333; text-decoration: none; font-size: 14px; transition: 0.15s; border-radius: 6px; text-align: left; } .gi-dropdown .gi-drop-col ul li a:hover { color: #EA894C !important; background: none !important; }