feat: klik na produkt v nahlade otvori jeho editor (harmonika)

- v paneli je otvoreny vzdy len jeden produkt, ostatne su zbalene
- klik na kartu produktu v nahlade vyberie sekciu aj produkt, panel sa
  posunie na jeho editor a karta sa v nahlade zvyrazni
- odkazy v nahlade sa klikom neotvaraju

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

src/components/editor/ProductEditor.tsx

@@ -2,7 +2,7 @@
 
 // Editor jedného produktu (bežné aj vernostné produkty) – zbalený po produktoch, len to, čo treba:
 // texty, fotka (zoom/posun), cenovka (šablóna, veľkosť, ceny), dostupnosť a ďalšie možnosti.
-import React, { useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { BadgeTemplate, CardProduct } from '@/types/newsletter';
 import { ChevronDown, Trash2, Pencil, Globe, Layers } from 'lucide-react';
 import { ImageUploadInput } from './ImageUploadInput';
@@ -31,7 +31,8 @@ interface ProductEditorProps {
   index: number;
   variant: Variant;
   availableBadges: BadgeTemplate[];
-  defaultOpen?: boolean;
+  open: boolean; // harmonika: otvorený je vždy len jeden produkt
+  onToggle: () => void;
   onChange: (patch: Patch) => void;
   onDelete?: () => void;
   onOpenBadgeEditor?: () => void;
@@ -111,14 +112,19 @@ export const ProductEditor: React.FC<ProductEditorProps> = ({
   index,
   variant,
   availableBadges,
-  defaultOpen = false,
+  open,
+  onToggle,
   onChange,
   onDelete,
   onOpenBadgeEditor,
   onApplyBadgeToSection,
   onApplyBadgeToAll
 }) => {
-  const [open, setOpen] = useState(defaultOpen);
+  // Po otvorení (aj klikom na produkt v náhľade) posunieme panel na tento produkt
+  const rootRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (open) rootRef.current?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+  }, [open]);
   const isLoyalty = variant === 'loyalty';
   const set = (key: string) => (v: unknown) => onChange({ [key]: v });
 
@@ -166,10 +172,13 @@ export const ProductEditor: React.FC<ProductEditorProps> = ({
   );
 
   return (
-    <div className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden">
+    <div
+      ref={rootRef}
+      className={`rounded-xl border bg-gray-50 overflow-hidden scroll-mt-2 ${open ? 'border-red-400 ring-1 ring-red-200' : 'border-gray-200'}`}
+    >
       {/* Hlavička produktu – klik rozbalí / zbalí */}
       <div className="flex items-center gap-2 px-2.5 py-2 bg-white">
-        <button type="button" onClick={() => setOpen(!open)} className="flex-1 flex items-center gap-2 min-w-0 text-left">
+        <button type="button" onClick={onToggle} className="flex-1 flex items-center gap-2 min-w-0 text-left">
           <span className="w-8 h-8 rounded-md bg-gray-100 border border-gray-200 shrink-0 overflow-hidden flex items-center justify-center">
             {p.imageUrl && (
               // eslint-disable-next-line @next/next/no-img-element