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/features/project-editor/components/save-bar/project-editor-save-bar.component.html

@@ -2,7 +2,7 @@
   @if (draftRestored()) {
     <div class="project-editor-save-bar-notice">
       <span>{{ 'builder.draftRestored' | translate }}</span>
-      <button type="button" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</button>
+      <app-button variant="ghost" size="sm" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</app-button>
     </div>
   }
   <div class="project-editor-save-bar-status">
@@ -21,8 +21,8 @@
     }
   </div>
   <div class="project-editor-save-bar-actions">
-    <button type="button" class="project-editor-save-bar-reset" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</button>
-    <button type="button" (click)="save()">{{ 'builder.save' | translate }}</button>
-    <button type="button" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</button>
+    <app-button variant="danger" size="sm" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</app-button>
+    <app-button variant="secondary" size="sm" (click)="save()">{{ 'builder.save' | translate }}</app-button>
+    <app-button variant="primary" size="sm" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</app-button>
   </div>
 </div>

src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss

@@ -22,8 +22,10 @@
   color: var(--danger, #b91c1c);
 }
 
-.project-editor-save-bar-actions button + button {
-  margin-left: 0.5rem;
+.project-editor-save-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .project-editor-save-bar-saved-at {
@@ -45,7 +47,3 @@
   color: var(--info, #1d4ed8);
   border-bottom: 1px solid var(--border, #ddd);
 }
-
-.project-editor-save-bar-reset {
-  color: var(--danger, #b91c1c);
-}

src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts

@@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { TranslatePipe } from '../../../../i18n/translate.pipe';
 import { TranslateService } from '../../../../i18n/translate.service';
 import { ProjectEditorFacade } from '../../facade/project-editor.facade';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-project-editor-save-bar',
   standalone: true,
-  imports: [TranslatePipe],
+  imports: [TranslatePipe, ButtonComponent],
   templateUrl: './project-editor-save-bar.component.html',
   styleUrls: ['./project-editor-save-bar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/features/project-editor/pages/project-editor-page.component.scss

@@ -23,6 +23,27 @@
 .project-editor-stack {
   display: grid;
   gap: 16px;
+
+  > * {
+    animation: project-editor-section-in 220ms ease-out both;
+  }
+}
+
+@keyframes project-editor-section-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-editor-stack > * {
+    animation: none;
+  }
 }
 
 .project-editor-section-actions {
@@ -37,6 +58,23 @@
   border-radius: 8px;
   padding: 6px 12px;
   cursor: pointer;
+  transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease);
+
+  &:hover {
+    background: rgba(185, 28, 28, 0.08);
+    border-color: #b91c1c;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #b91c1c;
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-editor-section-actions button {
+    transition: none;
+  }
 }
 
 .project-editor-empty {

src/app/features/project-editor/sections/section.shared.scss

@@ -111,12 +111,58 @@ button {
   padding: 0 14px;
   font-weight: 700;
   cursor: pointer;
+  transition: background-color var(--transition-fast, 120ms ease),
+    border-color var(--transition-fast, 120ms ease),
+    transform var(--transition-fast, 120ms ease),
+    box-shadow var(--transition-fast, 120ms ease);
+
+  &:hover {
+    background: var(--primary-hover, #3d635f);
+    border-color: var(--primary-hover, #3d635f);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #497671;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    transform: none;
+    box-shadow: none;
+  }
 }
 
 button.secondary {
   background: #fff;
   color: #1e3c38;
   border-color: var(--border-color, #d3dad9);
+
+  &:hover {
+    background: var(--bg-secondary, #f5f5f5);
+    border-color: #497671;
+  }
+
+  &:focus-visible {
+    outline-color: #497671;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+
+    &:hover {
+      transform: none;
+    }
+  }
 }
 
 .editor-error {