From 8660f92b5a31bf28fa7dd0a0a289c4c4fdf0c3ce Mon Sep 17 00:00:00 2001
From: Jandl-hostacny <jakub.hostacny@jandl.sk>
Date: Wed, 21 Oct 2026 16:33:43 +0200
Subject: [PATCH] feat: biely okraj okolo stitkov predajni ako skupiny, hrubka
 ako linka cenovky (4,5 px pri 130 px)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/lib/productCard.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/productCard.ts b/src/lib/productCard.ts
index d53ea65..6622672 100644
--- a/src/lib/productCard.ts
+++ b/src/lib/productCard.ts
@@ -185,6 +185,14 @@ function renderDualSticker(p: CardProduct): string {
     </table>`;
 }
 
+// Biely okraj okolo štítkov predajní ako skupiny (obrys celej skupiny, nie každého štítka zvlášť) – rovnako hrubý
+// ako biela linka okolo pozadia cenovky: 4,5 px pri predvolenej šírke cenovky 130 px, mení sa spolu s cenovkou.
+// Štyri biele tiene bez rozmazania (vľavo, vpravo, hore, dole) za sebou rozšíria tvar skupiny o hrúbku linky.
+function storesOutline(badgeWidth: number): string {
+  const t = Math.round(((4.5 * badgeWidth) / 130) * 10) / 10;
+  return `filter: drop-shadow(${t}px 0 0 #fff) drop-shadow(-${t}px 0 0 #fff) drop-shadow(0 ${t}px 0 #fff) drop-shadow(0 -${t}px 0 #fff);`;
+}
+
 // Štítky predajní (Potraviny / Supermarket / Tempo) pod sebou; výška podľa veľkosti cenovky
 function renderStores(p: CardProduct, mode: RenderMode, tagHeight: number): string {
   const tag = (color: string, file: string, alt: string) =>
@@ -333,7 +341,7 @@ function renderVisualPreview(p: CardProduct, ctx: CardContext, key: string): str
           .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>` : ''}
+            ${stores ? `<div style="position: absolute; right: ${insetRight - sx}px; bottom: calc(100% - ${insetTop}px + ${sy}px); ${storesOutline(bw)}">${stores}</div>` : ''}
             ${renderBadge(p, ctx, bw)}
         </div>
     </div>`;