From 7e035fd93c5ee076bd3232cb497baffc8bf33527 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 1 Jun 2026 22:23:31 +0000
Subject: [PATCH] perf: deep performance optimizations across catalog,
 rendering, and build
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GPU scroll performance:
- Remove backdrop-blur-sm/md and semi-transparent gradients from all
  scrolling containers (VirtualizedProductGrid, ProductTableView,
  FiltersPage list/table views) — eliminates per-frame GPU blur on scroll
- Add translateZ(0) + will-change:scroll-position to .scrollbar-products

React rendering:
- Move Intl.NumberFormat, formatPrice, and static lookup tables to
  module level in ProductCard (no re-creation per render)
- Switch full Zustand store subscriptions to fine-grained selectors in
  ProductCard to prevent all-cards re-render on unrelated store changes
- Remove unused useQueryClient hook call in ProductCard
- Memoize colGapPx computation in VirtualizedProductGrid
- Remove staggered framer-motion animations on virtual rows (triggered
  on every scroll virtualisation cycle)
- Increase overscan: list 8→10, grid 3→5

Filter loop hot-path:
- Pre-process all filter arrays to lowercase Sets/Arrays outside the
  per-product predicate (suppliers, publicoAlvo, datasComemorativas,
  endomarketing, ramosAtividade, segmentosAtividade, materiais, tags)
  — eliminates N×M toLowerCase() calls per filter pass
- Switch suppliers.includes() O(n) → Set.has() O(1)
- Stabilise resize listener with ref pattern (no re-register on column change)

Data fetching:
- Module-level singleton Promise for category map in useProductsLightweight
  — prevents N+1 category fetches across paginated loads
- Add networkMode: offlineFirst to React Query for cache-first serving
- Expand Vite optimizeDeps.include from 5 to 15 packages

Build & routing:
- Expand RoutePrefetcher with more routes and reduce secondary delay
  2500ms → 1800ms
- Add dns-prefetch for secondary Supabase host
- Tune TooltipProvider delayDuration/skipDelayDuration

https://claude.ai/code/session_011LmF185piJUGvBHb4cy5U4
---
 index.html                                    |   1 +
 src/App.tsx                                   |   2 +-
 src/components/products/ProductCard.tsx       |  58 ++++------
 src/components/products/ProductTableView.tsx  |   2 +-
 .../products/VirtualizedProductGrid.tsx       |  35 +++---
 src/hooks/products/useProductsLightweight.ts  |  16 ++-
 src/index.css                                 |   8 ++
 src/lib/query-config.ts                       |   2 +
 src/pages/filters/useFiltersPageState.ts      | 104 +++++++++---------
 src/pages/products/FiltersPage.tsx            |   4 +-
 src/routes/RoutePrefetcher.tsx                |  19 +++-
 vite.config.ts                                |  10 ++
 12 files changed, 136 insertions(+), 125 deletions(-)

diff --git a/index.html b/index.html
index 107368c0b2..54f2917cda 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,7 @@
     <link rel="dns-prefetch" href="https://pqpdolkaeqlyzpdpbizo.supabase.co" />
     <link rel="preconnect" href="https://pqpdolkaeqlyzpdpbizo.supabase.co" crossorigin />
     <link rel="dns-prefetch" href="https://imagedelivery.net" />
+    <link rel="dns-prefetch" href="https://doufsxqlfjyuvxuezpln.supabase.co" />
     
     <!-- Load Google Fonts — non-render-blocking via media swap -->
     <!-- Apenas Outfit (display) e Plus Jakarta Sans (sans). Inter foi removido
diff --git a/src/App.tsx b/src/App.tsx
index a87a485ec5..ab7005bc88 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -82,7 +82,7 @@ const App = () => {
         <ThemeInitializer />
         <AccessibilityProvider>
           <AriaLiveProvider>
-            <TooltipProvider skipDelayDuration={300}>
+            <TooltipProvider delayDuration={400} skipDelayDuration={200}>
               {/*
                * Keep v7_startTransition disabled: under concurrent root work it can
                * update history before the matching route render commits.
diff --git a/src/components/products/ProductCard.tsx b/src/components/products/ProductCard.tsx
index 5e291a4509..44598abd98 100644
--- a/src/components/products/ProductCard.tsx
+++ b/src/components/products/ProductCard.tsx
@@ -6,7 +6,6 @@ import { useState, useRef, useEffect, memo, forwardRef, useCallback } from 'reac
 import { GenderBadge } from './GenderBadge';
 import { Building2, Package } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
 import { getCdnUrl, getSrcSet } from '@/utils/image-utils';
 import { cn } from '@/lib/utils';
 import { useProductBounds } from '@/hooks/products/useProductBounds';
@@ -39,6 +38,23 @@ import { PriceFreshnessBadge } from './PriceFreshnessBadge';
 import { feedback } from '@/lib/feedback';
 import { telemetryService } from '@/services/telemetryService';
 
+const priceFormatter = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });
+const formatPrice = (price: number) => priceFormatter.format(price);
+
+const STOCK_STATUS_COLOR: Record<string, string> = {
+  'in-stock': 'in-stock',
+  'low-stock': 'low-stock',
+  'out-of-stock': 'out-of-stock',
+};
+const getStockStatusColor = (status: string) => STOCK_STATUS_COLOR[status] ?? 'in-stock';
+
+const STOCK_STATUS_LABEL: Record<string, string> = {
+  'in-stock': 'Em estoque',
+  'low-stock': 'Estoque baixo',
+  'out-of-stock': 'Sem estoque',
+};
+const getStockStatusLabel = (status: string) => STOCK_STATUS_LABEL[status] ?? 'Em estoque';
+
 export interface ProductCardProps {
   product: Product;
   onClick?: () => void;
@@ -83,7 +99,6 @@ export const ProductCard = memo(
     ref,
   ) {
     const navigate = useNavigate();
-    const _queryClient = useQueryClient();
     const { prefetchProduct } = usePrefetchProduct();
     // Categoria-FOLHA (mais específica) resolvida em lote pelo ProductLeafCategoryProvider.
     // Quando disponível, sobrepõe a categoria "rasa" (raiz/intermediária) no badge.
@@ -125,8 +140,8 @@ export const ProductCard = memo(
     const [variantPickerOpen, setVariantPickerOpen] = useState(false);
     const [variantPickerMode, setVariantPickerMode] = useState<VariantActionMode>('favorite');
 
-    const favStore = useFavoritesStore();
-    const compStore = useComparisonStore();
+    const addFavorite = useFavoritesStore((s) => s.addFavorite);
+    const addToCompare = useComparisonStore((s) => s.addToCompare);
 
     const handleStatusClick = useCallback(
       (type: string, _value?: string | number) => {
@@ -166,13 +181,13 @@ export const ProductCard = memo(
           : undefined;
 
         if (variantPickerMode === 'favorite') {
-          favStore.addFavorite(product.id, variantInfo);
+          addFavorite(product.id, variantInfo);
           feedback.light();
           toast.success(
             `"${product.name}" favoritado${variant?.color_name ? ` — ${variant.color_name}` : ''}`,
           );
         } else if (variantPickerMode === 'compare') {
-          const result = compStore.addToCompare(product.id, variantInfo);
+          const result = addToCompare(product.id, variantInfo);
           if (!result) {
             feedback.error();
             showErrorToast({ title: 'Limite de 4 produtos para comparação atingido' });
@@ -211,7 +226,7 @@ export const ProductCard = memo(
           setShareDialogOpen(true);
         }
       },
-      [variantPickerMode, product, favStore, compStore, navigate],
+      [variantPickerMode, product, addFavorite, addToCompare, navigate],
     );
 
     const markBusy = () => {
@@ -257,33 +272,6 @@ export const ProductCard = memo(
       }
     };
 
-    const formatPrice = (price: number) =>
-      new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(price);
-
-    const getStockStatusColor = (status: string) => {
-      switch (status) {
-        case 'in-stock':
-          return 'in-stock';
-        case 'low-stock':
-          return 'low-stock';
-        case 'out-of-stock':
-          return 'out-of-stock';
-        default:
-          return 'in-stock';
-      }
-    };
-    const getStockStatusLabel = (status: string) => {
-      switch (status) {
-        case 'in-stock':
-          return 'Em estoque';
-        case 'low-stock':
-          return 'Estoque baixo';
-        case 'out-of-stock':
-          return 'Sem estoque';
-        default:
-          return 'Em estoque';
-      }
-    };
 
     // Multi-variant carousel
     const allMatchingVariants = resolveAllMatchingColors(product.colors, activeColorFilter);
@@ -451,7 +439,7 @@ export const ProductCard = memo(
         <div
           className={cn(
             'relative space-y-2.5 p-3 transition-all duration-500 sm:space-y-4 sm:p-5',
-            isHovered ? 'translate-y-[-2px] bg-background/95 backdrop-blur-md' : 'bg-background',
+            isHovered ? 'translate-y-[-2px] bg-background' : 'bg-background',
           )}
           style={{ zIndex: 10 }}
         >
diff --git a/src/components/products/ProductTableView.tsx b/src/components/products/ProductTableView.tsx
index e36eb24dff..c98e1cf8b7 100644
--- a/src/components/products/ProductTableView.tsx
+++ b/src/components/products/ProductTableView.tsx
@@ -74,7 +74,7 @@ const stockColor = (status: string) => {
 };
 
 const CONTAINER_CLASS =
-  'h-[calc(100vh-200px)] min-h-[550px] overflow-y-auto rounded-xl border border-border/40 bg-gradient-to-b from-background/80 to-background/40 backdrop-blur-sm scrollbar-products shadow-inner';
+  'h-[calc(100vh-200px)] min-h-[550px] overflow-y-auto rounded-xl border border-border/40 bg-background scrollbar-products shadow-sm';
 
 function SortHeader({
   label,
diff --git a/src/components/products/VirtualizedProductGrid.tsx b/src/components/products/VirtualizedProductGrid.tsx
index cd0f3f96dd..e81cc3241f 100644
--- a/src/components/products/VirtualizedProductGrid.tsx
+++ b/src/components/products/VirtualizedProductGrid.tsx
@@ -1,7 +1,7 @@
-import { useRef, useCallback, useState, useEffect } from 'react';
+import { useRef, useCallback, useState, useEffect, useMemo } from 'react';
 import { cn } from '@/lib/utils';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Loader2, ArrowUp } from 'lucide-react';
 import { ProductCard } from './ProductCard';
 import { ProductListItem } from './ProductListItem';
@@ -80,14 +80,13 @@ export function VirtualizedProductGrid({
   // In list mode, always 1 column; in grid mode use columns prop
   const effectiveColumns = viewMode === 'list' ? 1 : columns;
 
-  // Column gap varies by density, row gap is always consistent (16px = gap-y-4)
-  const getColumnGapPx = () => {
+  // Column gap varies by density, row gap is always consistent
+  const colGapPx = useMemo(() => {
     if (effectiveColumns >= 8) return 16;
     if (effectiveColumns >= 6) return 24;
     return 32;
-  };
-  const colGapPx = getColumnGapPx();
-  const rowGapPx = viewMode === 'list' ? 8 : 32; // list: compact 8px gap; grid: 32px
+  }, [effectiveColumns]);
+  const rowGapPx = viewMode === 'list' ? 8 : 32;
 
   // Calculate rows based on columns
   const rowCount = Math.ceil(products.length / effectiveColumns);
@@ -104,7 +103,7 @@ export function VirtualizedProductGrid({
     count: hasMore ? rowCount + 1 : rowCount,
     getScrollElement: () => parentRef.current,
     estimateSize: () => estimatedRowHeight,
-    overscan: viewMode === 'list' ? 8 : 3,
+    overscan: viewMode === 'list' ? 10 : 5,
     measureElement: (el) => el.getBoundingClientRect().height,
   });
 
@@ -150,8 +149,8 @@ export function VirtualizedProductGrid({
     return (
       <div className="relative h-full">
         <div
-          className="scrollbar-products h-[calc(100vh-200px)] min-h-[600px] overflow-y-auto overscroll-contain rounded-xl border border-border/40 bg-gradient-to-b from-background/80 to-background/40 shadow-inner backdrop-blur-sm"
-          style={{ contain: 'strict', WebkitOverflowScrolling: 'touch' }}
+          className="scrollbar-products h-[calc(100vh-200px)] min-h-[600px] overflow-y-auto overscroll-contain rounded-xl border border-border/40 bg-background shadow-sm"
+          style={{ contain: 'strict' }}
         >
           {showFilterBar && onSortChange && onOpenFilters && onClearFilters && onViewModeChange && (
             <div className="sticky top-[calc(var(--header-h,56px)+var(--breadcrumb-h,0px))] z-20 mb-2 border-b border-border bg-background/95 px-4 py-2.5 backdrop-blur-md">
@@ -203,8 +202,8 @@ export function VirtualizedProductGrid({
       <div
         ref={parentRef}
         data-testid="virtualized-product-grid"
-        className="scrollbar-products h-[calc(100vh-200px)] min-h-[600px] overflow-y-auto overscroll-contain rounded-xl border border-border/40 bg-gradient-to-b from-background/80 to-background/40 shadow-inner backdrop-blur-sm"
-        style={{ contain: 'strict', WebkitOverflowScrolling: 'touch' }}
+        className="scrollbar-products h-[calc(100vh-200px)] min-h-[600px] overflow-y-auto overscroll-contain rounded-xl border border-border/40 bg-background shadow-sm"
+        style={{ contain: 'strict' }}
       >
         {/* Barra de filtros sticky DENTRO do container de scroll */}
         {showFilterBar && onSortChange && onOpenFilters && onClearFilters && onViewModeChange && (
@@ -290,7 +289,7 @@ export function VirtualizedProductGrid({
                       }),
                 }}
               >
-                {rowProducts.map((product, colIndex) =>
+                {rowProducts.map((product) =>
                   viewMode === 'list' ? (
                     <ProductListItem
                       key={product.id}
@@ -305,18 +304,14 @@ export function VirtualizedProductGrid({
                       onStatusClick={onStatusClick}
                     />
                   ) : (
-                    <motion.div
+                    <div
                       key={product.id}
-                      initial={{ opacity: 0, y: 10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ delay: colIndex * 0.05 }}
                       className={cn(
-                        'relative transition-all duration-200',
+                        'relative',
                         selectionMode &&
                           selectedIds?.has(product.id) &&
                           'rounded-2xl shadow-md ring-2 ring-primary/50',
                       )}
-                      style={{ zIndex: 1 }}
                     >
                       {selectionMode && (
                         <button
@@ -356,7 +351,7 @@ export function VirtualizedProductGrid({
                         activeColorFilter={activeColorFilter}
                         onStatusClick={onStatusClick}
                       />
-                    </motion.div>
+                    </div>
                   ),
                 )}
               </div>
diff --git a/src/hooks/products/useProductsLightweight.ts b/src/hooks/products/useProductsLightweight.ts
index f8a5a28f3c..1d3d99f28f 100644
--- a/src/hooks/products/useProductsLightweight.ts
+++ b/src/hooks/products/useProductsLightweight.ts
@@ -92,13 +92,19 @@ interface CatalogPage {
   totalEstimate: number | null;
 }
 
+// Module-level singleton: fetched once per session, shared across all catalog pages.
+let categoriesMapPromise: Promise<ReadonlyMap<string, string>> | null = null;
+
 async function loadCategoriesMap(): Promise<ReadonlyMap<string, string>> {
-  try {
-    const categories = await fetchPromobrindCategories();
-    return new Map(categories.map((c) => [String(c.id), c.name]));
-  } catch {
-    return new Map();
+  if (!categoriesMapPromise) {
+    categoriesMapPromise = fetchPromobrindCategories()
+      .then((categories) => new Map(categories.map((c) => [String(c.id), c.name])) as ReadonlyMap<string, string>)
+      .catch(() => {
+        categoriesMapPromise = null; // allow retry on next request
+        return new Map() as ReadonlyMap<string, string>;
+      });
   }
+  return categoriesMapPromise;
 }
 
 async function fetchCatalogPage(
diff --git a/src/index.css b/src/index.css
index f66e5d54f5..82875284fb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -83,6 +83,14 @@
   }
 }
 
+/* GPU-composited scroll containers — promotes to own layer to avoid repaints on scroll */
+@layer utilities {
+  .scrollbar-products {
+    transform: translateZ(0);
+    will-change: scroll-position;
+  }
+}
+
 /* Custom Tooltip Utilities (Ensures build retention) */
 @layer utilities {
   /* Tooltip: Standard (13px) */
diff --git a/src/lib/query-config.ts b/src/lib/query-config.ts
index 9166b90531..8ba220e65f 100644
--- a/src/lib/query-config.ts
+++ b/src/lib/query-config.ts
@@ -114,6 +114,8 @@ const defaultQueryOptions: DefaultOptions = {
     refetchOnWindowFocus: false,
     refetchOnReconnect: true,
     refetchOnMount: true,
+    // Use cached data while offline instead of erroring immediately
+    networkMode: 'offlineFirst',
   },
   mutations: {
     retry: false,
diff --git a/src/pages/filters/useFiltersPageState.ts b/src/pages/filters/useFiltersPageState.ts
index 28033397ea..d0ea281cf0 100644
--- a/src/pages/filters/useFiltersPageState.ts
+++ b/src/pages/filters/useFiltersPageState.ts
@@ -198,18 +198,17 @@ export function useFiltersPageState() {
   const [selectionMode, setSelectionMode] = useState(false);
   const [gridColumns, setGridColumns] = useState<ColumnCount>(getDefaultColumns);
 
-  // Responsive clamp: force appropriate columns on small screens
+  // Responsive clamp: use ref so the listener doesn't re-register on every column change
+  const gridColumnsRef = useRef(gridColumns);
+  gridColumnsRef.current = gridColumns;
   useEffect(() => {
     const handleResize = () => {
-      const w = window.innerWidth;
-      if (w < 768 && gridColumns > 3) {
-        setGridColumns(3);
-      }
+      if (window.innerWidth < 768 && gridColumnsRef.current > 3) setGridColumns(3);
     };
     handleResize();
-    window.addEventListener('resize', handleResize);
+    window.addEventListener('resize', handleResize, { passive: true });
     return () => window.removeEventListener('resize', handleResize);
-  }, [gridColumns]);
+  }, []); // empty deps — handler uses ref to avoid stale closure
   const [voiceOverlayOpen, setVoiceOverlayOpen] = useState(false);
   const [commandAction, setCommandAction] = useState<string | null>(null);
   // FIX-12: removido estado 'appliedFilters' — declarado mas nunca consumido (dead code).
@@ -329,65 +328,64 @@ export function useFiltersPageState() {
       !categoryFilterError
     )
       result = [];
-    if (filters.suppliers.length > 0)
+    if (filters.suppliers.length > 0) {
+      const supplierIdSet = new Set(filters.suppliers);
+      const supplierLowerArr = filters.suppliers.map((s) => s.toLowerCase());
       result = result.filter((product) => {
-        const sId = product.supplier?.id || '';
+        if (supplierIdSet.has(product.supplier?.id || '')) return true;
+        if (supplierIdSet.has(product.supplier_reference || '')) return true;
         const sName = (product.supplier?.name || product.brand || '').toLowerCase();
-        return (
-          filters.suppliers.includes(sId) ||
-          filters.suppliers.some((s) => sName.includes(s.toLowerCase())) ||
-          filters.suppliers.includes(product.supplier_reference || '')
-        );
-      });
-    if (filters.publicoAlvo.length > 0)
-      result = result.filter((product) => {
-        const tags = product.tags?.publicoAlvo || [];
-        return filters.publicoAlvo.some((p) =>
-          tags.some((t: string) => t.toLowerCase() === p.toLowerCase()),
-        );
+        return supplierLowerArr.some((s) => sName.includes(s));
       });
-    if (filters.datasComemorativas.length > 0)
-      result = result.filter((product) => {
-        const tags = product.tags?.datasComemorativas || [];
-        return filters.datasComemorativas.some((d) =>
-          tags.some((t: string) => t.toLowerCase().includes(d.toLowerCase())),
-        );
-      });
-    if (filters.endomarketing.length > 0)
-      result = result.filter((product) => {
-        const tags = product.tags?.endomarketing || [];
-        return filters.endomarketing.some((e) =>
-          tags.some((t: string) => t.toLowerCase() === e.toLowerCase()),
-        );
-      });
-    if (filters.ramosAtividade?.length > 0 || filters.segmentosAtividade?.length > 0)
+    }
+    if (filters.publicoAlvo.length > 0) {
+      const pSet = new Set(filters.publicoAlvo.map((p) => p.toLowerCase()));
+      result = result.filter((product) =>
+        (product.tags?.publicoAlvo || []).some((t: string) => pSet.has(t.toLowerCase())),
+      );
+    }
+    if (filters.datasComemorativas.length > 0) {
+      const dcLower = filters.datasComemorativas.map((d) => d.toLowerCase());
+      result = result.filter((product) =>
+        (product.tags?.datasComemorativas || []).some((t: string) => {
+          const tl = t.toLowerCase();
+          return dcLower.some((d) => tl.includes(d));
+        }),
+      );
+    }
+    if (filters.endomarketing.length > 0) {
+      const eSet = new Set(filters.endomarketing.map((e) => e.toLowerCase()));
+      result = result.filter((product) =>
+        (product.tags?.endomarketing || []).some((t: string) => eSet.has(t.toLowerCase())),
+      );
+    }
+    if (filters.ramosAtividade?.length > 0 || filters.segmentosAtividade?.length > 0) {
+      const ramosLower = filters.ramosAtividade?.map((r) => r.toLowerCase()) ?? [];
+      const segLower = filters.segmentosAtividade?.map((s) => s.toLowerCase()) ?? [];
       result = result.filter((product) => {
         const ramos = product.tags?.ramo || [];
         const nichos = product.tags?.nicho || [];
-        const matchesRamo = filters.ramosAtividade?.length
-          ? filters.ramosAtividade.some((r) =>
-              ramos.some((t: string) => t.toLowerCase().includes(r.toLowerCase())),
-            )
+        // BUG-SF-06 FIX: AND logic — product must match ramo AND segmento when both active.
+        const matchesRamo = ramosLower.length
+          ? ramosLower.some((r) => ramos.some((t: string) => t.toLowerCase().includes(r)))
           : true;
-        const matchesSegmento = filters.segmentosAtividade?.length
-          ? filters.segmentosAtividade.some((s) =>
-              nichos.some((t: string) => t.toLowerCase().includes(s.toLowerCase())),
-            )
+        const matchesSegmento = segLower.length
+          ? segLower.some((s) => nichos.some((t: string) => t.toLowerCase().includes(s)))
           : true;
-        // BUG-SF-06 FIX: era OR — produto passava se correspondesse a ramo OU segmento.
-        // Correto é AND: produto deve corresponder ao ramo E ao segmento selecionados.
-        // Se apenas um dos filtros está ativo, o outro default é true (sem restrição).
         return matchesRamo && matchesSegmento;
       });
+    }
     if (hasMaterialFilter && materialFilteredProductIds.size > 0)
       result = result.filter((p) => materialFilteredProductIds.has(p.id));
     else if (hasMaterialFilter && materialFilteredProductIds.size === 0 && !isLoadingMaterialFilter)
       result = [];
-    if (!hasMaterialFilter && filters.materiais.length > 0)
+    if (!hasMaterialFilter && filters.materiais.length > 0) {
+      const materiaisLower = filters.materiais.map((m) => m.toLowerCase());
       result = result.filter((product) => {
         const materialsStr = product.materials.join(' ').toLowerCase();
-        return filters.materiais.some((m) => materialsStr.includes(m.toLowerCase()));
+        return materiaisLower.some((m) => materialsStr.includes(m));
       });
+    }
     const priceFilterActive = filters.priceRange[0] > 0 || filters.priceRange[1] < 9999;
     if (priceFilterActive)
       result = result.filter(
@@ -441,8 +439,8 @@ export function useFiltersPageState() {
     // Produto.tags é um objeto estruturado (publicoAlvo, ramo, etc.) — não tem campo de tags genérico.
     // Aqui fazemos match pelo slug do tag versus qualquer campo de string do produto.
     if (filters.tags?.length) {
+      const tagIdsLower = filters.tags.map((t) => t.toLowerCase());
       result = result.filter((product) => {
-        // Tenta match nos campos de tag do produto via ID ou valor
         const allTagValues = [
           ...(product.tags?.publicoAlvo || []),
           ...(product.tags?.datasComemorativas || []),
@@ -450,11 +448,7 @@ export function useFiltersPageState() {
           ...(product.tags?.ramo || []),
           ...(product.tags?.nicho || []),
         ].map((v: string) => v.toLowerCase());
-        // Se o ID da tag bater com algum valor de tag do produto, inclui o produto
-        return filters.tags.some((tagId) => {
-          const tagIdLower = tagId.toLowerCase();
-          return allTagValues.some((v) => v === tagIdLower || v.includes(tagIdLower));
-        });
+        return tagIdsLower.some((tagId) => allTagValues.some((v) => v === tagId || v.includes(tagId)));
       });
     }
     // BUG-SF-01 FIX: techniques era contabilizado/chipeado mas sem bloco de filtro.
diff --git a/src/pages/products/FiltersPage.tsx b/src/pages/products/FiltersPage.tsx
index 4b892c3eeb..2a147d08f7 100644
--- a/src/pages/products/FiltersPage.tsx
+++ b/src/pages/products/FiltersPage.tsx
@@ -514,7 +514,7 @@ export default function FiltersPage() {
                       onToggleSelect={sel.toggleSelect}
                     />
                   ) : state.viewMode === 'list' ? (
-                    <div className="scrollbar-products h-[calc(100vh-280px)] min-h-[500px] overflow-y-auto rounded-xl border border-border/40 bg-gradient-to-b from-background/80 to-background/40 p-4 shadow-inner backdrop-blur-sm">
+                    <div className="scrollbar-products h-[calc(100vh-280px)] min-h-[500px] overflow-y-auto rounded-xl border border-border/40 bg-background p-4 shadow-sm">
                       <ProductList
                         products={state.filteredProducts}
                         isLoading={state.isLoadingProducts}
@@ -544,7 +544,7 @@ export default function FiltersPage() {
                       />
                     </div>
                   ) : (
-                    <div className="h-[calc(100vh-280px)] min-h-[500px] overflow-y-auto rounded-xl border border-border/40 bg-gradient-to-b from-background/80 to-background/40 shadow-inner backdrop-blur-sm">
+                    <div className="h-[calc(100vh-280px)] min-h-[500px] overflow-y-auto rounded-xl border border-border/40 bg-background shadow-sm">
                       <ProductTableView
                         products={state.filteredProducts}
                         isLoading={state.isLoadingProducts}
diff --git a/src/routes/RoutePrefetcher.tsx b/src/routes/RoutePrefetcher.tsx
index f3e6531a71..26e37430b1 100644
--- a/src/routes/RoutePrefetcher.tsx
+++ b/src/routes/RoutePrefetcher.tsx
@@ -47,25 +47,32 @@ export function RoutePrefetcher() {
 
     // Authenticated users: prefetch likely-next protected routes.
     if (pathname === '/auth' || pathname === '/login') {
-      // Prefetch dashboard early
       import('@/pages/Index');
       import('@/pages/products/FiltersPage');
     } else if (pathname === '/') {
-      // Prefetch heavy pages from dashboard + Auth (sessão pode expirar)
       import('@/pages/products/FiltersPage');
       import('@/pages/quotes/QuotesListPage');
       import('@/pages/clients/ClientsPage');
       import('@/pages/auth/Auth');
-    } else if (pathname === '/produtos') {
+    } else if (pathname === '/produtos' || pathname === '/filtros') {
       import('@/pages/products/ProductDetail');
       import('@/pages/tools/PriceSimulatorPage');
+    } else if (pathname.startsWith('/produto/')) {
+      import('@/pages/quotes/QuoteBuilderPage');
+      import('@/pages/products/FiltersPage');
+    } else if (pathname.startsWith('/orcamentos')) {
+      import('@/pages/quotes/QuoteBuilderPage');
+      import('@/pages/clients/ClientsPage');
     }
 
-    // Secondary priority prefetch
+    // Secondary priority prefetch (after idle)
     const timeoutId = setTimeout(() => {
       if (pathname !== '/orcamentos/novo') import('@/pages/quotes/QuoteBuilderPage');
-      if (pathname === '/produtos') import('@/pages/mockups/MockupGenerator');
-    }, 2500);
+      if (pathname === '/produtos' || pathname === '/filtros') {
+        import('@/pages/mockups/MockupGenerator');
+        import('@/pages/collections/CollectionsPage');
+      }
+    }, 1800);
 
     return () => clearTimeout(timeoutId);
   }, [pathname, user]);
diff --git a/vite.config.ts b/vite.config.ts
index 826a7e92fd..8b2f8041cc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -132,6 +132,16 @@ export default defineConfig(({ mode }) => {
         'react-router-dom',
         'react-hook-form',
         '@hookform/resolvers/zod',
+        '@tanstack/react-query',
+        '@tanstack/react-virtual',
+        'framer-motion',
+        'zustand',
+        'sonner',
+        'clsx',
+        'tailwind-merge',
+        'date-fns',
+        'lucide-react',
+        'zod',
       ],
     },