add CSS migration foundation and screenshot tooling (Phase 0)

- CSS file structure with @layer declaration (reset, layout, components, utilities, overrides)
- Layout primitives: .stack, .cluster, .row, .auto-grid, .container-page, .with-sidebar, .center
- mix screenshots task using Playwright for visual regression testing
- Golden baseline captured (10 pages x 4 breakpoints = 40 screenshots)
- No visual changes — new CSS not wired into any layout yet

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/shop/utilities.css

@@ -0,0 +1,39 @@
+/* Utility classes — a small, curated set for common patterns.
+   Not a framework. Just the handful that earn their keep. */
+
+@layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  /* Hide visually but keep in DOM (for phx-update="stream" empty states etc.) */
+  .visually-hidden:not(:focus):not(:active) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}