style(ui): full UX/UI + motion pass across storefront, admin, editor

- fix save-bar buttons to use shared app-button primitive (were unstyled)
- fix platform-nav-group border/radius via structural selectors, drop dead
  -middle/-right classes
- storefront widgets (hero/categories/product-carousel/footer-nav): design
  tokens, hover/focus states, 44px touch targets, entrance motion, reduced-
  motion guards
- admin dashboard cards + quick-actions: hover lift, entrance animation
- admin product-form gallery remove badge: hover/focus + expanded hit area
- project-editor section.shared button styles: hover/active/focus/disabled
  states + reduced-motion; section-switch fade-in motion

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

src/app/widgets/ui/categories-widget.component.ts

@@ -12,7 +12,7 @@ import { CategoriesWidgetData } from '../contracts/widget-data.contract';
     <section class="categories-widget">
       @if (data; as widgetData) {
         @if (widgetData.title) {
-          <h2>{{ widgetData.title }}</h2>
+          <h2 class="categories-widget__title">{{ widgetData.title }}</h2>
         }
 
         @if (widgetData.categories.length) {
@@ -28,7 +28,15 @@ import { CategoriesWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .categories-widget { display: grid; gap: 1rem; }
+      .categories-widget { display: grid; gap: var(--space-lg, 24px); }
+
+      .categories-widget__title {
+        margin: 0;
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+      }
+
       .categories-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],

src/app/widgets/ui/footer-navigation-widget.component.ts

@@ -28,9 +28,32 @@ export interface FooterNavigationLink {
   `,
   styles: [
     `
-      .footer-nav-widget { padding: 1rem; border-top: 1px solid var(--border-color, #d3dad9); }
-      ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
-      button { background: transparent; border: none; color: var(--text-secondary, #667a77); cursor: pointer; }
+      .footer-nav-widget { padding: 1rem 0; border-top: 1px solid var(--border-color, #d3dad9); }
+      ul { display: flex; gap: var(--space-sm, 8px); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        min-height: 44px;
+        padding: 0.5rem 0.75rem;
+        border: none;
+        border-radius: var(--radius-md, 12px);
+        background: transparent;
+        color: var(--text-secondary, #667a77);
+        font: inherit;
+        cursor: pointer;
+        transition: background-color var(--transition-fast, 120ms ease), color var(--transition-fast, 120ms ease);
+      }
+
+      button:hover {
+        background: var(--bg-secondary, #f5f5f5);
+        color: var(--primary-color, #497671);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--primary-color, #497671);
+        outline-offset: 2px;
+      }
     `
   ],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/widgets/ui/hero-widget.component.ts

@@ -22,10 +22,72 @@ import { HeroWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .hero-widget { padding: 2rem; border-radius: var(--radius-lg, 16px); background: var(--bg-secondary, #f5f5f5); }
-      .hero-widget__title { margin: 0 0 0.5rem; font-size: 2rem; color: var(--text-primary, #1e3c38); }
-      .hero-widget__subtitle { margin: 0 0 1rem; color: var(--text-secondary, #667a77); }
-      .hero-widget__cta { border: none; border-radius: var(--radius-md, 12px); padding: 0.75rem 1rem; cursor: pointer; background: var(--primary-color, #497671); color: #fff; }
+      .hero-widget {
+        padding: var(--space-xl, 32px);
+        border-radius: var(--radius-lg, 16px);
+        background: linear-gradient(135deg, var(--bg-secondary, #f5f5f5) 0%, var(--bg-tertiary, #eef1f0) 100%);
+        animation: hero-widget-in 420ms ease-out both;
+      }
+
+      .hero-widget__title {
+        margin: 0 0 var(--space-sm, 8px);
+        font-size: 2rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+        animation: hero-widget-in 480ms ease-out 60ms both;
+      }
+
+      .hero-widget__subtitle {
+        margin: 0 0 var(--space-lg, 24px);
+        color: var(--text-secondary, #667a77);
+        font-size: 1.05rem;
+        animation: hero-widget-in 480ms ease-out 120ms both;
+      }
+
+      .hero-widget__cta {
+        border: 1px solid transparent;
+        border-radius: var(--radius-md, 12px);
+        padding: 0.75rem 1.5rem;
+        cursor: pointer;
+        font-weight: 600;
+        background: var(--primary-color, #497671);
+        color: #fff;
+        transition: transform var(--transition-normal, 180ms ease), box-shadow var(--transition-normal, 180ms ease), background-color var(--transition-normal, 180ms ease);
+        animation: hero-widget-in 480ms ease-out 180ms both;
+
+        &:hover {
+          background: var(--primary-hover, #3d635f);
+          transform: translateY(-2px);
+          box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--primary-color, #497671);
+          outline-offset: 2px;
+        }
+      }
+
+      @keyframes hero-widget-in {
+        from { opacity: 0; transform: translateY(12px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .hero-widget,
+        .hero-widget__title,
+        .hero-widget__subtitle,
+        .hero-widget__cta {
+          animation: none;
+        }
+
+        .hero-widget__cta {
+          transition: none;
+        }
+      }
     `
   ],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/widgets/ui/product-carousel-widget.component.ts

@@ -11,7 +11,7 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
   template: `
     <section class="product-carousel-widget">
       @if (data?.title) {
-        <h2>{{ data?.title }}</h2>
+        <h2 class="product-carousel-widget__title">{{ data?.title }}</h2>
       }
 
       @if (data?.products?.length) {
@@ -23,7 +23,15 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .product-carousel-widget { display: grid; gap: 1rem; }
+      .product-carousel-widget { display: grid; gap: var(--space-lg, 24px); }
+
+      .product-carousel-widget__title {
+        margin: 0;
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+      }
+
       .product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],