Mega Menu with Multi-Column Dropdowns

Generate the Liquid, CSS, and JavaScript for a mega menu section that I can paste into my theme as a custom section, displaying multi-column dropdown panels when a customer hovers over or clicks a top-level navigation item. The menu should support up to [NUMBER_OF_COLUMNS] columns per dropdown, each with its own heading, list of links, and an optional featured image or promotional banner. The mega menu should be fully responsive, collapsing into an accordion-style layout on mobile devices with screen widths below [MOBILE_BREAKPOINT]. Each column should allow the merchant to configure a title using a text block, a list of links using a link_list block, and an optional image using an image_picker block. Include settings for background color [DROPDOWN_BG_COLOR], text color [DROPDOWN_TEXT_COLOR], hover highlight color [HOVER_COLOR], column gap spacing [COLUMN_GAP], and dropdown max-width [DROPDOWN_MAX_WIDTH]. The top-level navigation items should be pulled from a menu defined in the Shopify navigation admin under the handle [MENU_HANDLE]. Add smooth open and close transitions with a duration of [TRANSITION_DURATION] milliseconds. Ensure the mega menu is accessible with proper ARIA attributes including aria-expanded, aria-haspopup, and keyboard navigation support. The section should use Shopify section schema with blocks of type column, each containing the described settings. Provide the complete Liquid, CSS, and JavaScript code for the section file.

To use the generated code: go to Online Store > Themes > Edit code, create a new file at sections/mega-menu.liquid, and paste the code in. Save, then open the theme customizer and add the “Mega Menu” section to your header.