Shop nav with cart badge

Build a retail site header with Tailwind CSS in two tiers. The upper tier is a slim neutral-900 strip with centred small text about free delivery over fifty and, at the right on larger screens, links for order tracking and help. The main tier is white with a hairline bottom border: a wordmark on the left, a wide bordered search field in the centre with a magnifier glyph and a placeholder naming a product category, and on the right three icon buttons for account, wishlist with a small count bubble, and basket with a neutral-900 count badge, the basket also showing a subtotal on larger screens. Under it, a third row of eight category links with generous spacing that scrolls horizontally on small screens without a visible scrollbar, one carrying a small red "Sale" label. Keep the whole header sticky.

<header class="sticky top-0 z-40 bg-white">
  <div class="bg-neutral-900 px-6 py-2 text-center text-xs text-neutral-300">
    <div class="mx-auto flex max-w-6xl items-center justify-center sm:justify-between">
      <p>Free delivery over €50 · ordered before 15:00, sent the same day</p>
      <div class="hidden gap-5 sm:flex">
        <a href="#" class="hover:text-white">Track an order</a>
        <a href="#" class="hover:text-white">Help</a>
      </div>
    </div>
  </div>

  <div class="border-b border-neutral-200">
    <div class="mx-auto flex h-16 max-w-6xl items-center gap-6 px-6">
      <a href="#" class="shrink-0 text-lg font-semibold tracking-tight text-neutral-900">Fernbrook</a>

      <div class="relative hidden flex-1 md:block">
        <span class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="11" cy="11" r="7"/><path d="m16 16 4 4"/></svg></span>
        <input type="search" placeholder="Search knives, boards, spare parts…"
          class="w-full rounded-xl border border-neutral-200 py-2.5 pl-10 pr-4 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      </div>

      <div class="ml-auto flex items-center gap-1.5">
        <button class="grid h-10 w-10 place-items-center rounded-lg text-neutral-600 transition hover:bg-neutral-100" aria-label="Account"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></button>
        <button class="relative grid h-10 w-10 place-items-center rounded-lg text-neutral-600 transition hover:bg-neutral-100" aria-label="Wishlist">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><span class="absolute right-1.5 top-1.5 grid h-4 w-4 place-items-center rounded-full bg-neutral-200 text-[10px] font-medium text-neutral-700">3</span>
        </button>
        <button class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-neutral-600 transition hover:bg-neutral-100" aria-label="Basket">
          <span class="relative">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v7A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5v-9Z"/></svg><span class="absolute -right-2 -top-2 grid h-4 w-4 place-items-center rounded-full bg-neutral-900 text-[10px] font-medium text-white">2</span>
          </span>
          <span class="hidden font-mono text-xs text-neutral-900 sm:block">€36.00</span>
        </button>
      </div>
    </div>
  </div>

  <div class="cat-scroll overflow-x-auto border-b border-neutral-200">
    <nav class="mx-auto flex max-w-6xl gap-7 whitespace-nowrap px-6 py-3 text-sm text-neutral-600">
      <a href="#" class="transition hover:text-neutral-900">Knives</a>
      <a href="#" class="transition hover:text-neutral-900">Cookware</a>
      <a href="#" class="transition hover:text-neutral-900">Boards</a>
      <a href="#" class="transition hover:text-neutral-900">Sharpening</a>
      <a href="#" class="transition hover:text-neutral-900">Storage</a>
      <a href="#" class="transition hover:text-neutral-900">Spare parts</a>
      <a href="#" class="transition hover:text-neutral-900">Gifts</a>
      <a href="#" class="flex items-center gap-1.5 font-medium text-neutral-900">Outlet <span class="rounded bg-red-100 px-1.5 py-0.5 text-[10px] font-medium text-red-700">Sale</span></a>
    </nav>
  </div>
</header>

<style>
  .cat-scroll { scrollbar-width: none; }
  .cat-scroll::-webkit-scrollbar { display: none; }
</style>