Zara-Style Searchbar for Shopify

I need the search experience on my Shopify store to feel exactly like the one you see on zarahome.com. As soon as a visitor clicks into the field, a drop-down should open instantly with live suggestions and a row of four product tiles beneath it. The tile layout, typography, spacing, animation timing, and overall behaviour must mirror Zara Home so closely that a customer would not notice a difference.

Here is what I expect to receive:
• A liquid/JavaScript component that plugs straight into my current Shopify theme without breaking other features.
• Real-time querying of my product catalogue (using Shopify Storefront API, Algolia, Shopify Search & Discovery app, or a custom endpoint—use whichever gives the fastest response).
• Four product results shown in a single row, including image, title, price and a clickable link, styled and animated to match the Zara Home pattern.
• Immediate visual suggestions the moment the field gains focus, even before the user types a character.
• Fully responsive behaviour so the same interaction feels native on mobile, tablet and desktop.
• Clean, commented code so I can tweak colours or fonts later in my theme editor.

Acceptance criteria: the component is considered done when it renders, searches and animates indistinguishably from Zara Home across Chrome, Safari and Firefox, and passes Core Web Vitals without regressions.