Fix search overlay CSS trap and blog filter navigation race

SearchOverlay was rendered as a <header> descendant, so the header's
conditional backdrop-blur-md (once scrolled) made it the containing
block for the overlay's fixed positioning, clipping the opaque
background to the header's height and letting page content show
through underneath. Now rendered as a header sibling, same pattern
already used for NewsletterModal.

Blog category chips are now a client component gating navigation
behind useTransition, disabling the chips while a navigation is
pending so rapid clicks can't fire overlapping RSC navigations that
commit out of order and briefly show an empty result.

app/components/Navbar.tsx

@@ -7,7 +7,7 @@ import { usePathname } from "next/navigation";
 import { AnimatePresence, motion } from "motion/react";
 import { useCartCount } from "../lib/cart";
 import { useWishlist } from "../lib/useWishlist";
-import { SearchButton } from "./SearchOverlay";
+import { SearchButton, SearchOverlay } from "./SearchOverlay";
 import { AUTH_CHANGED_EVENT } from "../lib/auth";
 import { NewsletterModal } from "./NewsletterModal";
 import { useCartFly } from "./CartFly";
@@ -302,6 +302,7 @@ export function Navbar({
   const [activeSection, setActiveSection] = useState("");
   const [mobileOpen, setMobileOpen] = useState(false);
   const [newsletterOpen, setNewsletterOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
   const panelRef = useRef<HTMLDivElement>(null);
   const hamburgerRef = useRef<HTMLButtonElement>(null);
 
@@ -619,7 +620,7 @@ export function Navbar({
                 separates this group from the CTA-buttons/hamburger group
                 that follows. */}
             <div className="flex items-center">
-              {searchEnabled && <SearchButton />}
+              {searchEnabled && <SearchButton onOpen={() => setSearchOpen(true)} />}
               <AccountLink />
               {wishlistEnabled && <WishlistLink />}
               <CartLink />
@@ -813,6 +814,7 @@ export function Navbar({
       </AnimatePresence>
 
       <NewsletterModal open={newsletterOpen} onClose={() => setNewsletterOpen(false)} />
+      {searchEnabled && <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} />}
     </>
   );
 }