fix: show only AI-generated images in PDP gallery, not originals

- Gallery now shows only the 5 AI-generated product photos
- Each thumb shows model name (Nano Banana / Pro) + caption
- Caption overlay on main image describes the shot type
- Removed original scraped images from gallery display

static/css/style.css

@@ -153,7 +153,8 @@ footer a{color:var(--accent);text-decoration:none}
 .pdp-info{padding:1.5rem 2rem}
 .pdp-gallery-main{position:relative;border-radius:10px;overflow:hidden;background:#0a0e14;margin-bottom:.75rem;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
 .pdp-gallery-main img{max-width:100%;max-height:100%;object-fit:contain}
-.pdp-gallery-badge{position:absolute;top:.6rem;left:.6rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;background:rgba(6,10,15,.85);color:var(--accent);border:1px solid var(--border)}
+.pdp-gallery-badge{position:absolute;top:.6rem;left:.6rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;background:rgba(6,10,15,.85);color:var(--cyan);border:1px solid var(--border)}
+.pdp-gallery-caption{position:absolute;bottom:.6rem;left:.6rem;right:.6rem;font-size:.72rem;color:var(--text2);background:rgba(6,10,15,.85);padding:.3rem .6rem;border-radius:4px;text-align:center}
 .pdp-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0}
 .pdp-thumb{width:72px;height:72px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;position:relative;flex-shrink:0;background:var(--bg);transition:.2s}
 .pdp-thumb.wide{width:110px}

static/js/app.js

@@ -252,42 +252,39 @@ function renderPDP(product, pack, imgs) {
 
 function buildGallery(product, imgs) {
   const items = [];
-  // Original product images first
+  // AI-generated images only
-  (product.images || []).forEach((src, i) => {
-    items.push({src: src, label: i === 0 ? 'Original — Main' : `Original — ${i+1}`, isOriginal: true});
-  });
-  // AI-generated images
   if (imgs) {
     const aiSlots = [
-      {key:'hero', label:'AI — Clean Studio'},
+      {key:'hero', label:'Clean Studio Shot', caption:'Studio lighting, white background'},
-      {key:'lifestyle', label:'AI — Lifestyle'},
+      {key:'lifestyle', label:'Lifestyle Shot', caption:'Morning kitchen scene'},
-      {key:'scale', label:'AI — Scale'},
+      {key:'scale', label:'Scale Reference', caption:'Real-world size context'},
-      {key:'ingredients', label:'AI — Detail'},
+      {key:'ingredients', label:'Detail Close-up', caption:'Ingredients & quality'},
-      {key:'banner', label:'AI — Banner', wide: true},
+      {key:'banner', label:'Hero Banner', caption:'Wide format for landing pages', wide: true},
     ];
     aiSlots.forEach(slot => {
       const d = imgs[slot.key];
       if (d && d.filename) {
         items.push({src: `/generated/${d.filename}`, label: slot.label,
-                     caption: d.caption || '', model: d.model || '', wide: slot.wide});
+                     caption: d.caption || slot.caption, model: d.model || '', wide: slot.wide});
       }
     });
   }
 
-  if (!items.length) return '<div class="pdp-gallery-empty">No images available</div>';
+  if (!items.length) return '<div class="pdp-gallery-empty">Generating product images...</div>';
 
   const mainImg = items[0];
   const thumbs = items.map((item, i) =>
-    `<div class="pdp-thumb ${i===0?'active':''} ${item.wide?'wide':''}" onclick="switchGallery(${i}, this)" data-src="${esc(item.src)}">
+    `<div class="pdp-thumb ${i===0?'active':''} ${item.wide?'wide':''}" onclick="switchGallery(${i}, this)" data-src="${esc(item.src)}" data-caption="${esc(item.caption)}" data-model="${esc(item.model)}">
       <img src="${esc(item.src)}" alt="${esc(item.label)}" loading="lazy">
-      <span class="pdp-thumb-label ${item.isOriginal?'orig':'ai'}">${esc(item.label)}</span>
+      <span class="pdp-thumb-label ai">${esc(item.label)}</span>
     </div>`
   ).join('');
 
   return `
     <div class="pdp-gallery-main" id="pdpGalleryMain">
       <img src="${esc(mainImg.src)}" alt="${esc(mainImg.label)}" id="pdpMainImg">
-      <span class="pdp-gallery-badge">${mainImg.isOriginal ? '📷 Original' : '🤖 AI Generated'}</span>
+      <span class="pdp-gallery-badge">🤖 AI Generated — ${esc(mainImg.model)}</span>
+      <span class="pdp-gallery-caption" id="pdpCaption">${esc(mainImg.caption)}</span>
     </div>
     <div class="pdp-thumbs">${thumbs}</div>
   `;
@@ -300,10 +297,9 @@ window.switchGallery = function(idx, el) {
   document.querySelectorAll('.pdp-thumb').forEach(t => t.classList.remove('active'));
   el.classList.add('active');
   const badge = $('.pdp-gallery-badge');
-  if (badge) {
+  if (badge) badge.textContent = `🤖 AI Generated — ${el.dataset.model || ''}`;
-    const label = el.querySelector('.pdp-thumb-label');
+  const caption = $('#pdpCaption');
-    badge.textContent = label?.classList.contains('orig') ? '📷 Original' : '🤖 AI Generated';
+  if (caption) caption.textContent = el.dataset.caption || '';
-  }
 };