Fix categories dock glass effect on production.

Portal the dock to body and move backdrop-filter off transformed/overflow-clipped ancestors so Chromium can render the glossy blur.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/CategoriesDock.tsx

@@ -1,9 +1,12 @@
+import { createPortal } from 'react-dom'
 import { Link } from 'react-router-dom'
 import './CategoriesDock.css'
 
 /**
  * Fixed glossy dock — images and labels are hardcoded.
  * Slugs match production API categories on shirinibalout.com.
+ * Portaled to document.body so backdrop-filter is not killed by
+ * overflow-x: hidden / transform on .app ancestors.
  */
 const DOCK_CATEGORIES = [
   {
@@ -45,8 +48,9 @@ const DOCK_CATEGORIES = [
 ] as const
 
 export default function CategoriesDock() {
-  return (
+  return createPortal(
     <nav className="categories-dock" aria-label="دسته‌بندی محصولات">
+      <div className="categories-dock__glass" aria-hidden="true" />
       <ul className="categories-dock__list">
         {DOCK_CATEGORIES.map((category) => (
           <li key={category.slug} className="categories-dock__item">
@@ -65,6 +69,7 @@ export default function CategoriesDock() {
           </li>
         ))}
       </ul>
-    </nav>
+    </nav>,
+    document.body,
   )
 }