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/app/page.tsx

@@ -20,6 +20,8 @@ import { ChevronUp, ChevronDown, Copy, Trash2, Anchor, Lock } from 'lucide-react
 export default function Home() {
   const [campaign, setCampaign] = useState<NewsletterCampaign>(DEFAULT_CAMPAIGN);
   const [selectedModuleId, setSelectedModuleId] = useState<string | null>('mod-products-fantasticky');
+  // Produkt otvorený v paneli (harmonika); nastaví sa aj klikom na produkt v náhľade
+  const [selectedProductId, setSelectedProductId] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
   const [isExportingBrevo, setIsExportingBrevo] = useState(false);
   const [brevoUrl, setBrevoUrl] = useState<string | null>(null);
@@ -667,6 +669,10 @@ export default function Home() {
             backgroundImage: 'linear-gradient(135deg, #005bb5 0%, #000d1a 100%)'
           }}
         >
+          {/* Zvýraznenie produktu otvoreného v paneli */}
+          {selectedProductId && (
+            <style>{`main [data-product-id="${selectedProductId.replace(/["\\]/g, '')}"] { outline: 3px solid #ef4444; outline-offset: 3px; }`}</style>
+          )}
           {/* E-mail Container 1:1 k originálu */}
           <div className="w-full max-w-[600px] my-4">
             {campaign.modules.map((mod, idx) => {
@@ -683,7 +689,16 @@ export default function Home() {
               return (
                 <div
                   key={mod.id}
-                  onClick={() => setSelectedModuleId(mod.id)}
+                  onClick={(e) => {
+                    // Klik na kartu produktu otvorí v paneli práve tento produkt
+                    const card = (e.target as HTMLElement).closest('[data-product-id]');
+                    if (card) {
+                      setSelectedProductId(card.getAttribute('data-product-id'));
+                    } else if (mod.id !== selectedModuleId) {
+                      setSelectedProductId(null);
+                    }
+                    setSelectedModuleId(mod.id);
+                  }}
                   className={`relative cursor-pointer transition-all duration-150 rounded-2xl ${
                     isSelected
                       ? 'ring-2 ring-offset-4 ring-offset-[#001a33] ring-red-500 shadow-2xl'
@@ -866,7 +881,11 @@ export default function Home() {
                       dangerouslySetInnerHTML={{
                         __html: renderSingleModuleHtml(mod, campaign)
                       }}
-                      className="pointer-events-none"
+                      onClick={(e) => {
+                        // odkazy v náhľade neotvárame, klik slúži na výber modulu / produktu
+                        if ((e.target as HTMLElement).closest('a')) e.preventDefault();
+                      }}
+                      className="[&_[data-product-id]]:cursor-pointer"
                     />
                   )}
                 </div>
@@ -879,6 +898,8 @@ export default function Home() {
         <aside className="w-96 flex-shrink-0 h-full bg-white shadow-2xl z-20">
           <ConfigPanel
             module={selectedModule}
+            selectedProductId={selectedProductId}
+            onSelectProduct={setSelectedProductId}
             onUpdateModule={handleUpdateModule}
             onApplyBadgeToAll={handleApplyBadgeToAll}
             onUpdateAllProductSections={handleUpdateAllProductSections}