Fix CSS cascade layers and header layout

- Rewrite globals.css to work properly with Tailwind 4 cascade layers
  - Remove conflicting * { padding: 0 } reset that broke Tailwind utilities
  - Organize styles into @layer base, @layer components, @layer utilities
- Fix newsletter centering (was off due to CSS layer conflicts)
- Fix header overlap on products pages (proper pt-[72px] spacing)
- Add solid header background (bg-white/80) instead of transparent
- Fix logo/nav positioning on desktop

Verified fixes with Playwright screenshots at 1280x800 and 390x844

src/app/products/page.tsx

@@ -24,7 +24,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
       
       <main className="min-h-screen bg-white">
         {/* Page Header */}
-        <div className="pt-[140px] lg:pt-[160px]">
+        <div className="pt-[72px] lg:pt-[72px]">
           <div className="border-b border-[#e5e5e5]">
             <div className="container py-8 md:py-12">
               <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">