/* ===================================================================== ControlUnits Mega Menu — desktop only. Scoped under .cu-mega so it won't leak into the WoodMart theme. ===================================================================== */ .cu-mega{ --cu-red:#be1622; --cu-red-dark:#9c1019; --cu-red-tint:#fbecee; --cu-ink:#1c1d20; --cu-body:#5b616e; --cu-muted:#8a909c; --cu-line:#e7e8ec; --cu-line-soft:#eef0f3; --cu-panel:#f6f6f8; --cu-radius:7px; /* matches the site-wide global border-radius */ font-family:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--cu-ink); line-height:1.4; box-sizing:border-box; width:100%; max-width:1350px; margin-left:auto; margin-right:auto; background:#fff; /* opaque panel so the page behind never shows through */ border-radius:var(--cu-radius); box-shadow:0 14px 34px -12px rgba(0,0,0,.28); /* NOTE: deliberately NO position/z-index here. Setting z-index on the dropdown's content root creates a stacking context that breaks WoodMart's mega-menu hover handling (the panel snapped shut the moment the cursor left the menu item). The opaque background alone is enough to stop the page showing through; let WoodMart own the stacking. */ } .cu-mega *,.cu-mega *::before,.cu-mega *::after{box-sizing:border-box;} .cu-mega a{color:inherit;text-decoration:none;} /* hidden must always win over the display rules below (grids, flex panels, etc.) */ .cu-mega [hidden]{display:none !important;} /* no thick outline on click; keep a subtle ring for keyboard users only */ .cu-mega a:focus,.cu-mega button:focus{outline:none;} .cu-mega a:focus-visible,.cu-mega button:focus-visible{outline:2px solid var(--cu-red);outline-offset:2px;} .cu-mega img{max-width:100%;height:auto;} /* --------------------------------------------------------------------- Theme-proofing. WoodMart / WooCommerce style bare