Search Overlay with Predictive Results

Generate the Liquid, CSS, and JavaScript for a fullscreen search overlay section that I can paste into my theme as a custom section, with these specifications: it should open when the customer clicks the search icon in the header. The overlay should cover the entire viewport with a background color [OVERLAY_BG_COLOR] at opacity [OVERLAY_OPACITY] and display a large centered search input field with placeholder text [SEARCH_PLACEHOLDER] and font size [INPUT_FONT_SIZE]. As the customer types, use the Shopify Predictive Search API to fetch and display results below the input, grouped into sections for products (showing thumbnail, title, price), collections, pages, and articles. Limit results to [MAX_RESULTS] items per group. Include a debounce delay of [DEBOUNCE_MS] milliseconds on the input to avoid excessive API calls. Display a loading spinner while fetching results. If no results are found, show a message [NO_RESULTS_MESSAGE]. The overlay should close when the customer presses Escape, clicks the X button in the top right, or clicks outside the search area. Add settings for input text color [INPUT_TEXT_COLOR], result title color [RESULT_TITLE_COLOR], result price color [RESULT_PRICE_COLOR], and link hover color [HOVER_COLOR]. The search input should autofocus when the overlay opens. Include keyboard navigation with arrow keys to move through results and Enter to follow the selected link. Add ARIA attributes for accessibility including role search, aria-autocomplete, and aria-live on the results region. Provide complete Liquid, CSS, and JavaScript.

To use it: go to Online Store > Themes > Edit code, create sections/search-overlay.liquid and paste in the generated code (JS/CSS can go in assets/ and be linked from the section file or theme.liquid), then include the section in your theme’s header/layout (e.g. via {% section 'search-overlay' %} in theme.liquid or by adding it in the theme customizer under header settings) and wire the header’s search icon to toggle it.