style(catalog): polish responsive UI

docs/Catalog-Module-Report.md

@@ -207,6 +207,71 @@ Catalog spacing and controls were polished for desktop/tablet/mobile:
 - drawer/sheet interaction surfaces
 - horizontal overflow prevention
 
+## Sprint UI Polish (Visual Only)
+
+This sprint applies visual and responsive UX polish only. No facade contracts, business logic, API contracts, runtime/bootstrap architecture, or widget contracts were changed.
+
+### Desktop Layout
+
+- Catalog products section uses a cleaner two-column structure with consistent spacing tokens (8/12/16/24/32).
+- Filters panel remains sticky on desktop and uses collapsible sections with smooth expand/collapse animation.
+- Product cards keep consistent image height/aspect ratio and improved vertical rhythm between image/title/rating/price/actions.
+- Product action controls are vertical floating circles in the image top-right zone with fixed spacing and no overlap.
+
+### Tablet Layout
+
+- Sidebar filters transition into drawer interaction for better content width.
+- Sort and layout controls retain consistent sizing and spacing.
+- Grid/list results avoid horizontal overflow and preserve button/input containment.
+
+### Mobile Layout
+
+- Permanent sidebar is hidden.
+- Sticky toolbar provides three entry points: Filters, Sort, Grid.
+- Filters open in drawer form with scrollable content and fixed bottom actions.
+- Sort and Grid open bottom-sheet style dialogs.
+- Focus states and keyboard dismissal (`Esc`) are preserved for all overlays.
+
+### Grid Types
+
+- `grid`
+- `large-grid`
+- `compact-grid`
+- `list`
+
+All grid switch icons are normalized in size and selected state is visually highlighted.
+
+### Filter Drawer and Sections
+
+- Filter groups (Price, Availability, Rating, Brand, etc.) are collapsible.
+- Range inputs are stacked vertically (`From`, `To`) with full-width controls and 12px+ spacing.
+- Slider remains below price inputs for predictable scan order.
+
+### Product Card Anatomy
+
+- Image area: square ratio, `object-fit: contain`, padded image content.
+- Status elements (discount/stock/badges) positioned to avoid action collisions.
+- Actions: top-right vertical controls with equal circular dimensions.
+- Content: title, optional description, rating, pricing, stock indicator, CTA.
+
+### Animations
+
+- Card hover: subtle elevation + `translateY(-2px)`.
+- Button/selector transitions: ~180-200ms.
+- Filter group expand/collapse: smooth height/opacity transition.
+- Drawer and sheet overlays: subtle slide/fade entrance.
+
+### Empty and Loading States
+
+- Empty results state keeps friendly message and action while hiding non-essential catalog controls when no products are rendered.
+- Skeletons for cards/results keep stable heights to reduce layout shift.
+
+### Accessibility Notes
+
+- Added/standardized visible `:focus-visible` outlines for interactive elements.
+- Product quick action controls now expose aria labels.
+- Modal/drawer interactions continue to use dialog semantics and focus trap.
+
 ### Localization and Accessibility
 
 - New strings for empty states, drawer/sheet UI, and toolbar were added to all languages: