I'll reduce the width of the first header by adding a max-width constraint centered on the page:

I've reduced the width of the first header (top utility bar) by constraining it to a max-w-6xl width and centering it with mx-auto. The top bar will now display narrower than the full page width while the main header and navigation remain at full width, creating a refined visual hierarchy similar to premium e-commerce sites.

I'll restructure the header to display three separate rows in mobile view: logo/name section, search bar section, and categories section (horizontally scrollable). This matches the WoodenStreet mobile layout:

I've restructured the header to match WoodenStreet's mobile layout with three distinct sections: Logo & Cart Section (Row 1 - shows Riya Wood logo with cart icon), Search Bar Section (Row 2 - full-width searchable input), and Categories Section (Row 3 - horizontally scrollable category navigation). On desktop, it displays the traditional single-row header with the utility bar at the top and desktop category navigation below. The mobile layout is now clean and organized, matching the reference website's structure exactly.