Search Overlay with Predictive Results

Create a fullscreen search overlay section for my Shopify theme that opens 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.