feat: implement UX pattern improvements for accessibility & performance

Accessibility:
- Add skip link component for keyboard navigation
- Add visible focus rings on all interactive elements
- Add aria-current="page" to navigation active states
- Ensure 44px minimum touch targets on header icons and filter pills

Product Page (PDP):
- Add accordion layout for Description, Size Guide, Shipping & Returns
- Convert Reviews section to accordion format (open by default)
- Make Add to Basket button sticky on mobile, normal on desktop

Product Cards (home & collection):
- Add "Free delivery over £40" shipping badge
- Add loading="lazy" and decoding="async" to images

Cart Drawer:
- Add "Delivery: Calculated at checkout" label
- Add Remove button to each cart item

All Preview Pages:
- Add skip link to all 7 preview pages
- Wrap main content in <main id="main-content">
- Pass active_page to shop_header for nav highlighting

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

assets/css/theme-semantic.css

@@ -105,3 +105,77 @@
 .preview-frame[data-mood="dark"], .shop-root[data-mood="dark"] {
   --t-accent-subtle: hsl(var(--t-accent-h) 30% 15%);
 }
+
+/* ========================================
+   ACCESSIBILITY - Focus Rings
+   Visible focus indicators for all interactive elements
+   ======================================== */
+
+/* Base focus ring style */
+.shop-container a:focus-visible,
+.shop-container button:focus-visible,
+.shop-container input:focus-visible,
+.shop-container select:focus-visible,
+.shop-container textarea:focus-visible,
+.shop-container [tabindex]:focus-visible,
+.shop-container details summary:focus-visible {
+  outline: 2px solid hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
+  outline-offset: 2px;
+}
+
+/* Remove default browser outlines when using focus-visible */
+.shop-container a:focus:not(:focus-visible),
+.shop-container button:focus:not(:focus-visible),
+.shop-container input:focus:not(:focus-visible),
+.shop-container select:focus:not(:focus-visible),
+.shop-container textarea:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Skip link for keyboard navigation */
+.skip-link {
+  position: absolute;
+  top: -100px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
+  color: var(--t-text-inverse);
+  padding: 0.75rem 1.5rem;
+  z-index: 9999;
+  border-radius: var(--t-radius-button);
+  font-weight: 600;
+  text-decoration: none;
+  transition: top 0.2s ease;
+}
+
+.skip-link:focus {
+  top: 1rem;
+}
+
+/* Ensure minimum touch target size (44x44px) */
+.shop-container .header-icon-btn {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.shop-container .filter-pill {
+  min-height: 44px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+/* Nav link styling with active state indicator */
+.shop-nav a {
+  padding: 0.5rem 0;
+  border-bottom: 2px solid transparent;
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+
+.shop-nav a:hover {
+  color: var(--t-text-primary);
+}
+
+.shop-nav a[aria-current="page"] {
+  color: var(--t-text-primary);
+  border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
+}