From 254736356b6cde25d1bb3afc8240ee360767d73b Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Wed, 9 Sep 2026 16:07:58 +0200
Subject: [PATCH] Show storefront feedback as fixed top-center toasts.

Use CSS-only dismiss animations, render the partial at the end of body, and add top margin to cart issue messages.
---
 .../storefrontCore/public/css/storefront.css  | 72 ++++++++++++++++++-
 .../storefrontCore/views/layouts/shop.hbs     |  2 +-
 .../views/partials/feedback.hbs               |  2 +-
 3 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/backend/src/modules/storefrontCore/public/css/storefront.css b/backend/src/modules/storefrontCore/public/css/storefront.css
index fdd9f27..a483cd3 100644
--- a/backend/src/modules/storefrontCore/public/css/storefront.css
+++ b/backend/src/modules/storefrontCore/public/css/storefront.css
@@ -519,6 +519,76 @@ a:hover {
     border-color: var(--sf-warning-border);
 }
 
+.sf-alert--toast {
+    position: fixed;
+    top: var(--sf-space-5);
+    left: 50%;
+    z-index: 20;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sf-space-2);
+    width: max-content;
+    max-width: min(24rem, calc(100% - 2 * var(--sf-space-4)));
+    margin: 0;
+    padding: 0.6875rem 0.9375rem;
+    font-size: 0.875rem;
+    line-height: 1.25;
+    box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
+    pointer-events: none;
+    transform: translateX(-50%);
+}
+
+.sf-alert--toast.sf-alert--success {
+    animation: sf-toast-dismiss 3s ease forwards;
+}
+
+.sf-alert--toast.sf-alert--error {
+    animation: sf-toast-dismiss 6s ease forwards;
+}
+
+.sf-alert--toast::before {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border-radius: var(--sf-radius-full);
+    color: var(--sf-on-accent);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.sf-alert--toast.sf-alert--success::before {
+    content: '✓';
+    background: var(--sf-success);
+}
+
+.sf-alert--toast.sf-alert--error::before {
+    content: '×';
+    background: var(--sf-error);
+}
+
+@keyframes sf-toast-dismiss {
+    0%,
+    70% {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    100% {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .sf-alert--toast {
+        animation: none;
+    }
+}
+
 .sf-btn {
     display: inline-flex;
     align-items: center;
@@ -876,7 +946,7 @@ a:hover {
 }
 
 .sf-cart-issue {
-    margin: 0 0 var(--sf-space-2);
+    margin: var(--sf-space-2) 0;
     font-size: 0.85rem;
     color: var(--sf-error);
     line-height: 1.35;
diff --git a/backend/src/modules/storefrontCore/views/layouts/shop.hbs b/backend/src/modules/storefrontCore/views/layouts/shop.hbs
index f49018b..0bbd707 100644
--- a/backend/src/modules/storefrontCore/views/layouts/shop.hbs
+++ b/backend/src/modules/storefrontCore/views/layouts/shop.hbs
@@ -12,10 +12,10 @@
             {{> shop-nav}}
             {{> category-nav}}
             <main class='sf-main'>
-                {{> feedback}}
                 {{{body}}}
             </main>
             {{> shop-footer}}
         </div>
+        {{> feedback}}
     </body>
 </html>
diff --git a/backend/src/modules/storefrontCore/views/partials/feedback.hbs b/backend/src/modules/storefrontCore/views/partials/feedback.hbs
index a389dee..6360f11 100644
--- a/backend/src/modules/storefrontCore/views/partials/feedback.hbs
+++ b/backend/src/modules/storefrontCore/views/partials/feedback.hbs
@@ -1,5 +1,5 @@
 {{#if feedback}}
-    <p class='sf-alert sf-alert--{{feedback.type}}' role='status'>
+    <p class='sf-alert sf-alert--{{feedback.type}} sf-alert--toast' role='status'>
         {{feedback.text}}
     </p>
 {{/if}}