feat(wizard): add showValidationWarning prop to summary sidebar

shop/components/wizard/summary-sidebar.tsx

@@ -45,6 +45,7 @@ interface SummarySidebarProps {
   addToBasket: () => void
   isNextStepDisabled: boolean
   hasActiveSelection: boolean
+  showValidationWarning?: boolean
   nextStep: () => void
   prevStep: () => void
 }
@@ -77,6 +78,7 @@ export function SummarySidebar({
   addToBasket,
   isNextStepDisabled,
   hasActiveSelection,
+  showValidationWarning = false,
   nextStep,
   prevStep,
 }: SummarySidebarProps) {
@@ -235,7 +237,7 @@ export function SummarySidebar({
                 <p>{updatePriceModifier.label}</p>
               </div>
             )}
-            {!allCategoriesFilled && (
+            {!allCategoriesFilled && showValidationWarning && (
               <div className="text-xs text-red-400 flex items-start gap-2 bg-red-500/10 p-3 rounded-xl border border-red-500/40 animate-eye-catcher">
                 <AlertCircle className="w-4 h-4 shrink-0 text-red-400 mt-0.5" />
                 <div>
@@ -244,6 +246,15 @@ export function SummarySidebar({
                 </div>
               </div>
             )}
+            {!allCategoriesFilled && !showValidationWarning && (
+              <div className="text-xs text-slate-400 flex items-start gap-2 bg-slate-900/50 p-2.5 rounded-xl border border-white/5">
+                <AlertCircle className="w-4 h-4 shrink-0 text-slate-500 mt-0.5" />
+                <div>
+                  <p className="font-semibold text-[11px] text-slate-300">Pflichtkategorien beachten</p>
+                  <p className="text-[11px] text-slate-400">Bitte wählen Sie für die Rot markierten Kategorien ein Produkt aus.</p>
+                </div>
+              </div>
+            )}
             {productValidationErrors.map((err, errIdx) => (
               <p key={errIdx} className="text-xs text-red-400 flex items-center gap-1 bg-red-500/10 p-2 rounded-lg border border-red-500/20">
                 <AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />