feat: poradie fotiek v karte ako zoznam vrstiev (hore = vpredu)

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

src/lib/productCard.ts

@@ -208,7 +208,7 @@ export function cardVisualKey(p: CardProduct, ctx: CardContext): string {
     p.cardPriceMain, p.cardPriceSub, p.cardDiscount, p.cardUnitPrice,
     p.noCardPriceMain, p.noCardPriceSub, p.noCardDiscount, p.noCardUnitPrice,
     p.stores, p.storesOffsetX ?? DEFAULT_STORES_OFFSET_X, p.storesOffsetY ?? DEFAULT_STORES_OFFSET_Y, p.storesSize ?? DEFAULT_STORES_SIZE,
-    p.labels || [], p.extraPhotos || []
+    p.labels || [], p.extraPhotos || [], photoStack(p)
   ];
   const str = JSON.stringify(relevant);
   let h1 = 5381;
@@ -221,6 +221,20 @@ export function cardVisualKey(p: CardProduct, ctx: CardContext): string {
   return `cv-${(h1 >>> 0).toString(36)}${(h2 >>> 0).toString(36)}`;
 }
 
+// Poradie fotiek v karte odzadu dopredu ('main' = hlavná fotka). Uložené poradie sa doplní o nové fotky
+// (dopredu) a očistí o zmazané; bez uloženého poradia platí staršie nastavenie „za hlavnou fotkou“.
+export const MAIN_PHOTO = 'main';
+export function photoStack(p: Pick<CardProduct, 'extraPhotos' | 'photoOrder'>): string[] {
+  const extras = p.extraPhotos || [];
+  const ids = new Set([MAIN_PHOTO, ...extras.map((f) => f.id)]);
+  if (p.photoOrder?.length) {
+    const order = p.photoOrder.filter((id) => ids.has(id));
+    for (const id of ids) if (!order.includes(id)) order.push(id);
+    return order;
+  }
+  return [...extras.filter((f) => f.behind).map((f) => f.id), MAIN_PHOTO, ...extras.filter((f) => !f.behind).map((f) => f.id)];
+}
+
 // Ďalšia fotka v karte (bundle): poloha v % vizuálu, veľkosť voči hlavnej fotke
 function renderExtraPhoto(f: ProductPhoto, mode: RenderMode): string {
   if (!f.url) return '';
@@ -290,9 +304,15 @@ function renderVisualPreview(p: CardProduct, ctx: CardContext, key: string): str
   const insetRight = bgBox ? Math.round(bgBox.right * bw) : 0;
   return `
     <div data-card-visual="${key}" style="position: relative; width: 100%; height: ${height}px; overflow: hidden; background-color: ${bg}; border-radius: 16px 16px 0 0; line-height: normal; font-size: 12px;">
-        ${(p.extraPhotos || []).filter((f) => f.behind).map((f) => renderExtraPhoto(f, ctx.mode)).join('')}
-        ${p.imageUrl ? `<img src="${escapeHtml(assetUrl(p.imageUrl, ctx.mode))}" alt="" style="position: absolute; left: 44%; top: 47%; max-width: 86%; max-height: 86%; transform: translate(-50%, -50%) translate(${ox}px, ${oy}px) scale(${scale}); border: 0;">` : ''}
-        ${(p.extraPhotos || []).filter((f) => !f.behind).map((f) => renderExtraPhoto(f, ctx.mode)).join('')}
+        ${photoStack(p)
+          .map((id) => {
+            if (id === MAIN_PHOTO) {
+              return p.imageUrl ? `<img src="${escapeHtml(assetUrl(p.imageUrl, ctx.mode))}" alt="" style="position: absolute; left: 44%; top: 47%; max-width: 86%; max-height: 86%; transform: translate(-50%, -50%) translate(${ox}px, ${oy}px) scale(${scale}); border: 0;">` : '';
+            }
+            const f = (p.extraPhotos || []).find((x) => x.id === id);
+            return f ? renderExtraPhoto(f, ctx.mode) : '';
+          })
+          .join('')}
         ${(p.labels || []).map(renderLabel).join('')}
         <div style="position: absolute; right: 8px; bottom: 8px; width: ${bw}px;">
             ${stores ? `<div style="position: absolute; right: ${insetRight - sx}px; bottom: calc(100% - ${insetTop}px + ${sy}px);">${stores}</div>` : ''}