/** * MotoFox Mega Menu Fix * Scoped to an ETS Mega Menu item with custom class: motofox-parts-menu */ @media (min-width: 1200px) { /* Give the complete desktop navigation a cleaner, modern type system. */ .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a.ets_mm_url { font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px !important; font-weight: 650; letter-spacing: 0.025em; } /* Shared premium treatment for every standard desktop dropdown. */ .ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) > .mm_columns_ul:not(.mm_columns_ul_tab) { background-color: #0b0b0d !important; border: 0 !important; border-top: 2px solid #c71f28 !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34); font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding-bottom: 15px; padding-top: 13px; } .ets_mm_megamenu .mm_columns_ul:not(.mm_columns_ul_tab) .mm_block_type_category > .h4 { border-bottom: 1px solid rgba(199, 31, 40, 0.55); color: #ffffff !important; font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px !important; font-weight: 700; letter-spacing: 0.075em; margin-bottom: 5px; padding-bottom: 8px; } .ets_mm_megamenu .mm_columns_ul:not(.mm_columns_ul_tab) .mm_block_type_category .ets_mm_block_content > ul.ets_mm_categories > li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); transition: background-color 0.18s ease, box-shadow 0.18s ease; } .ets_mm_megamenu .mm_columns_ul:not(.mm_columns_ul_tab) .mm_block_type_category .ets_mm_block_content > ul.ets_mm_categories > li:hover, .ets_mm_megamenu .mm_columns_ul:not(.mm_columns_ul_tab) .mm_block_type_category .ets_mm_block_content > ul.ets_mm_categories > li:focus-within { background: rgba(199, 31, 40, 0.13); box-shadow: inset 2px 0 0 #c71f28; } .ets_mm_megamenu .mm_columns_ul:not(.mm_columns_ul_tab) .mm_block_type_category .ets_mm_block_content > ul.ets_mm_categories > li > a.ets_mm_url { box-sizing: border-box; color: #e4e4e7 !important; display: block; font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 520; letter-spacing: 0.012em; line-height: 1.3; min-height: 31px; overflow-wrap: anywhere; padding: 7px 17px 7px 2px; transition: color 0.18s ease, padding-left 0.18s ease; white-space: normal; } .ets_mm_megamenu .mm_columns_ul:not(.mm_columns_ul_tab) .mm_block_type_category .ets_mm_block_content > ul.ets_mm_categories > li:hover > a.ets_mm_url, .ets_mm_megamenu .mm_columns_ul:not(.mm_columns_ul_tab) .mm_block_type_category .ets_mm_block_content > ul.ets_mm_categories > li:focus-within > a.ets_mm_url { color: #ffffff !important; padding-left: 5px; } .ets_mm_megamenu.layout_layout3 .mm_columns_ul:not(.mm_columns_ul_tab) .mm_block_type_category .ets_mm_block_content > ul.ets_mm_categories > li > a.ets_mm_url::before { border-right: 1.5px solid #d42a33; border-top: 1.5px solid #d42a33; content: ""; display: inline-block; height: 5px; margin: 0 9px 1px 1px; position: relative; transform: rotate(45deg); vertical-align: middle; width: 5px; } .ets_mm_megamenu .motofox-parts-menu > a.ets_mm_url { background: #151517 !important; box-shadow: inset 0 -3px 0 #c71f28; } /* Keep all six columns on a single row. The root menu scrolls only when the available viewport height is genuinely too small. */ .ets_mm_megamenu .motofox-parts-menu.hover:hover > .mm_columns_ul, .ets_mm_megamenu .motofox-parts-menu.menu_hover > .mm_columns_ul, .ets_mm_megamenu .motofox-parts-menu.click_open_submenu > .mm_columns_ul.open { display: flex !important; } .ets_mm_megamenu .motofox-parts-menu > .mm_columns_ul:not(.mm_columns_ul_tab) { align-items: flex-start; background: linear-gradient(180deg, #0d0d0f 0%, #050506 100%) !important; border: 0 !important; border-top: 2px solid #c71f28 !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36); flex-wrap: nowrap !important; font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-height: calc(100vh - 72px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; padding: 13px 8px 16px; scrollbar-color: #c71f28 #151515; scrollbar-gutter: stable; scrollbar-width: thin; } .ets_mm_megamenu .motofox-parts-menu > .mm_columns_ul:not(.mm_columns_ul_tab)::-webkit-scrollbar { width: 10px; } .ets_mm_megamenu .motofox-parts-menu > .mm_columns_ul:not(.mm_columns_ul_tab)::-webkit-scrollbar-track { background: #151515; } .ets_mm_megamenu .motofox-parts-menu > .mm_columns_ul:not(.mm_columns_ul_tab)::-webkit-scrollbar-thumb { background: #c71f28; border: 2px solid #151515; border-radius: 8px; } /* Force exactly six equal columns, regardless of stale width classes. */ .ets_mm_megamenu .motofox-parts-menu > .mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li { border-left: 1px solid rgba(255, 255, 255, 0.075); flex: 0 0 16.666667%; float: none !important; min-width: 0; width: 16.666667% !important; } .ets_mm_megamenu .motofox-parts-menu > .mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:first-child { border-left: 0; } .ets_mm_megamenu .motofox-parts-menu .mm_blocks_li { margin-bottom: 0; padding: 0 10px; } /* The same title repeated six times wastes vertical space. */ .ets_mm_megamenu .motofox-parts-menu .mm_block_type_category > .h4 { display: none !important; } .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content > ul.ets_mm_categories > li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); float: none; transition: background-color 0.18s ease, box-shadow 0.18s ease; } .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content > ul.ets_mm_categories > li:hover, .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content > ul.ets_mm_categories > li:focus-within { background: rgba(199, 31, 40, 0.13); box-shadow: inset 2px 0 0 #c71f28; } .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content a.ets_mm_url { box-sizing: border-box; color: #e4e4e7 !important; display: block; font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 520; letter-spacing: 0.012em; line-height: 1.3; min-height: 31px; overflow-wrap: anywhere; padding: 7px 17px 7px 2px; transition: color 0.18s ease, padding-left 0.18s ease; white-space: normal; } .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content li:hover > a.ets_mm_url, .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content li:focus-within > a.ets_mm_url { color: #ffffff !important; padding-left: 5px; } /* Replace the long text arrow of layout 3 with a compact MotoFox-red chevron. */ .ets_mm_megamenu.layout_layout3 .motofox-parts-menu .ets_mm_block_content li > a.ets_mm_url::before { border-right: 1.5px solid #d42a33; border-top: 1.5px solid #d42a33; content: ""; display: inline-block; height: 5px; margin: 0 9px 1px 1px; position: relative; transform: rotate(45deg); vertical-align: middle; width: 5px; } /* Nested categories open inside their own column. This prevents them from being clipped by the viewport-safe scroll container. */ .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content li > ul.ets_mm_categories { background: rgba(255, 255, 255, 0.035); border-left: 1px solid rgba(199, 31, 40, 0.65); box-shadow: none; display: none; left: auto !important; margin: 0 !important; min-width: 0 !important; opacity: 1 !important; padding: 2px 0 5px 12px !important; pointer-events: auto !important; position: static !important; top: auto !important; visibility: visible !important; white-space: normal !important; width: 100% !important; } .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content li:hover > ul.ets_mm_categories, .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content li:focus-within > ul.ets_mm_categories { display: block; } .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content ul.ets_mm_categories ul.ets_mm_categories::before { display: none; } .ets_mm_megamenu .motofox-parts-menu .ets_mm_block_content ul.ets_mm_categories ul.ets_mm_categories a.ets_mm_url { color: #c9c9ce !important; font-size: 12px; font-weight: 450; min-height: 28px; padding: 6px 18px 6px 8px; } }