Add a NotFound page and remove the TanStack devtools panel

Configures a notFoundComponent on the root route so unmatched paths get a
branded empty state instead of TanStack Router's generic "Not Found" text,
and drops the always-on devtools panel from the root layout.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/routes/__root.tsx

@@ -4,11 +4,10 @@ import {
   Scripts,
   createRootRoute,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
 
 import { BasketLink } from '#/components/basket/BasketLink.tsx'
 import { Logo } from '#/components/ui/Logo.tsx'
+import { NotFound } from '#/components/ui/NotFound.tsx'
 import BetterAuthHeader from '#/integrations/better-auth/header-user.tsx'
 import { BasketProvider } from '#/lib/basket.tsx'
 import { getBrand } from '#/server/brand.ts'
@@ -40,17 +39,6 @@ const RootDocument = ({ children }: { children: React.ReactNode }) => {
           </div>
           {children}
         </BasketProvider>
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
         <Scripts />
       </body>
     </html>
@@ -59,6 +47,7 @@ const RootDocument = ({ children }: { children: React.ReactNode }) => {
 
 export const Route = createRootRoute({
   loader: async () => ({ brand: await getBrand() }),
+  notFoundComponent: NotFound,
   head: () => ({
     meta: [
       {