/* 1. Prevent custom elements from remaining hidden without JS */ header-element, x-menu-element, predictive-search-element { opacity: 1 !important; visibility: visible !important; } /* 2. Force the header background to be white to override the transparent state */ .header--root { background-color: #ffffff !important; } /* 3. Force the primary (black) logo to show and hide the secondary (white) logo */ .header--root .header--primary-logo { display: block !important; opacity: 1 !important; visibility: visible !important; } .header--root .header--secondary-logo { display: none !important; } /* 4. Force all navigation text to be dark for contrast */ .header--root .x-menu--level-1--text, .header--root .header-cta, .header--root .header--cart, .header--root a { color: #212121 !important; } /* 5. Force SVG icons to display in dark grey/black */ .header--root svg path { stroke: #212121; } .header--root svg.icon--chevron-down path, .header--root svg.icon--x-mark path { stroke: none !important; fill: #212121 !important; } /* ---------------------------------------------------- */ /* 6. DESKTOP DROPDOWN MEGAMENU FIX & FLEXBOX LAYOUT */ /* ---------------------------------------------------- */ /* Show the main dropdown container on hover and make it a flex row */ .x-menu--level-1--link:hover .x-menu--level-2--container { display: flex !important; flex-direction: row !important; justify-content: center !important; /* Centers the content horizontally */ gap: 60px !important; /* Space between text columns and images */ padding: 40px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Force all interior animated items to be visible and ignore animation transforms */ .x-menu--level-2--container *, .x-menu--level-2--container [data-transition-item] { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Ensure the dropdown panel has a solid white background and full width */ .x-menu--level-2--container { background-color: #ffffff !important; box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important; width: 100% !important; left: 0 !important; box-sizing: border-box !important; } /* Ensure all text inside the dropdown is dark and legible */ .x-menu--level-2--container a, .x-menu--level-2--container .menu-block--description { color: #212121 !important; } /* ---------------------------------------------------- */ /* 7. INSIDE DROPDOWN: TEXT COLUMNS & IMAGES */ /* ---------------------------------------------------- */ /* Ensure the text link columns (e.g., "Rent with confidence", "About Us") are horizontal */ .x-menu--level-2--list { display: flex !important; flex-direction: row !important; gap: 60px !important; margin: 0 !important; padding: 0 !important; } /* Make sure the sub-links stack vertically neatly */ .x-menu--level-3--container { display: flex !important; flex-direction: column !important; gap: 12px !important; padding-top: 15px !important; margin: 0 !important; } /* Restrict the width of the promotional images */ .menu-block--image-wrapper { width: 250px !important; flex-shrink: 0 !important; }