Redesign products

js/data/catalog.js

@@ -19,8 +19,8 @@ export const CATEGORY_LABELS = {
 /**
  * @typedef {{ kcal: number, protein: number, fat: number, carbs: number }} NutritionPer100
  * @typedef {{ amount: number, label?: string }} PurchasePack
- * @typedef {{ id: string, name: string, category: keyof typeof CATEGORY_LABELS, pantryUnit: 'g'|'ml'|'szt', purchasePack?: PurchasePack, nutritionPer100g?: NutritionPer100 }} IngredientDef
+ * @typedef {{ id: string, name: string, category: keyof typeof CATEGORY_LABELS, pantryUnit: 'g'|'ml'|'szt', purchasePack?: PurchasePack, nutritionPer100g?: NutritionPer100, image?: string }} IngredientDef
- * @typedef {{ id: string, ingredientId: string, name: string, brand?: string, packSize: number, packLabel?: string, nutritionPer100g: NutritionPer100 }} ProductDef
+ * @typedef {{ id: string, ingredientId: string, name: string, brand?: string, packSize: number, packLabel?: string, nutritionPer100g: NutritionPer100, image?: string }} ProductDef
  */
 
 /** @type {Record<string, IngredientDef>} */
@@ -38,6 +38,7 @@ export const INGREDIENTS = {
     /* ── Nabiał ───────────────────────────────────────── */
     jajko: {
         id: 'jajko',
+        image: 'images/ingredients/jajko.jpg',
         name: 'Jajka',
         category: 'nabial',
         pantryUnit: 'szt',
@@ -103,6 +104,7 @@ export const INGREDIENTS = {
     },
     losos_wedzony: {
         id: 'losos_wedzony',
+        image: 'images/ingredients/losos_wedzony.jpg',
         name: 'Łosoś wędzony',
         category: 'mieso_ryby',
         pantryUnit: 'g',
@@ -112,6 +114,7 @@ export const INGREDIENTS = {
     /* ── Warzywa ──────────────────────────────────────── */
     pomidor: {
         id: 'pomidor',
+        image: 'images/ingredients/pomidor.jpg',
         name: 'Pomidor',
         category: 'warzywa',
         pantryUnit: 'szt',
@@ -120,6 +123,7 @@ export const INGREDIENTS = {
     },
     pomidorki_koktajlowe: {
         id: 'pomidorki_koktajlowe',
+        image: 'images/ingredients/pomidorki_koktajlowe.jpg',
         name: 'Pomidorki koktajlowe',
         category: 'warzywa',
         pantryUnit: 'g',
@@ -128,6 +132,7 @@ export const INGREDIENTS = {
     },
     papryka_czerwona: {
         id: 'papryka_czerwona',
+        image: 'images/ingredients/papryka_czerwona.jpg',
         name: 'Papryka czerwona',
         category: 'warzywa',
         pantryUnit: 'szt',
@@ -136,6 +141,7 @@ export const INGREDIENTS = {
     },
     ogorek: {
         id: 'ogorek',
+        image: 'images/ingredients/ogorek.jpg',
         name: 'Ogórek',
         category: 'warzywa',
         pantryUnit: 'szt',
@@ -144,6 +150,7 @@ export const INGREDIENTS = {
     },
     czosnek: {
         id: 'czosnek',
+        image: 'images/ingredients/czosnek.jpg',
         name: 'Czosnek',
         category: 'warzywa',
         pantryUnit: 'szt',
@@ -160,6 +167,7 @@ export const INGREDIENTS = {
     /* ── Owoce ────────────────────────────────────────── */
     truskawki: {
         id: 'truskawki',
+        image: 'images/ingredients/truskawki.jpg',
         name: 'Truskawki',
         category: 'owoce',
         pantryUnit: 'g',
@@ -167,6 +175,7 @@ export const INGREDIENTS = {
     },
     borowki_amerykanskie: {
         id: 'borowki_amerykanskie',
+        image: 'images/ingredients/borowki_amerykanskie.jpg',
         name: 'Borówki amerykańskie',
         category: 'owoce',
         pantryUnit: 'g',
@@ -174,6 +183,7 @@ export const INGREDIENTS = {
     },
     banany: {
         id: 'banany',
+        image: 'images/ingredients/banany.jpg',
         name: 'Banany',
         category: 'owoce',
         pantryUnit: 'g',
@@ -181,6 +191,7 @@ export const INGREDIENTS = {
     },
     jagody: {
         id: 'jagody',
+        image: 'images/ingredients/jagody.jpg',
         name: 'Jagody',
         category: 'owoce',
         pantryUnit: 'g',
@@ -196,6 +207,7 @@ export const INGREDIENTS = {
     /* ── Suche i kasze ────────────────────────────────── */
     makaron_suchy: {
         id: 'makaron_suchy',
+        image: 'images/ingredients/makaron_suchy.jpg',
         name: 'Makaron',
         category: 'suche',
         pantryUnit: 'g',
@@ -231,6 +243,7 @@ export const INGREDIENTS = {
     },
     migdaly: {
         id: 'migdaly',
+        image: 'images/ingredients/migdaly.jpg',
         name: 'Migdały',
         category: 'suche',
         pantryUnit: 'g',
@@ -289,6 +302,7 @@ export const INGREDIENTS = {
     },
     oliwa: {
         id: 'oliwa',
+        image: 'images/ingredients/oliwa.jpg',
         name: 'Oliwa z oliwek',
         category: 'inne',
         pantryUnit: 'ml',
@@ -296,6 +310,7 @@ export const INGREDIENTS = {
     },
     hummus: {
         id: 'hummus',
+        image: 'images/ingredients/hummus.jpg',
         name: 'Hummus',
         category: 'inne',
         pantryUnit: 'g',

js/services/pantryShopping.js

@@ -1,4 +1,4 @@
-import { INGREDIENTS, CATEGORY_LABELS, PRODUCTS, ingredientHasProducts } from '../data/catalog.js?v=6';
+import { INGREDIENTS, CATEGORY_LABELS, PRODUCTS, ingredientHasProducts } from '../data/catalog.js?v=8';
 import { PANTRY_STORAGE_KEY, PANTRY_STORAGE_KEY_V2, SHOPPING_STORAGE_KEY } from '../storageKeys.js';
 
 export const KITCHEN_LIST_ID = 'kitchen';
@@ -383,19 +383,19 @@ export function categoryLabel(cat) {
  * Pantry v2 — hybrydowy format.
  *
  * Wartość dla składnika może być:
- *   number           — składnik generyczny (bez zdefiniowanych produktów)
+ *   number           — składnik bez produktów (generyczny)
- *   { _total, items: [{productId, qty}], generic } — składnik z produktami
+ *   { _total, items: [{productId, qty}] } — składnik z produktami
  *
- * _total = generic + sum(items[].qty)  (cache, zawsze przeliczany przy zapisie)
+ * Brak pojęcia "generic" — jeśli składnik ma produkty, każda ilość
+ * musi być przypisana do konkretnego produktu.
  * ══════════════════════════════════════════════════════════════════════ */
 
 /** @typedef {{ productId: string, qty: number }} PantryProductItem */
-/** @typedef {{ _total: number, items: PantryProductItem[], generic: number }} PantryProductEntry */
+/** @typedef {{ _total: number, items: PantryProductItem[] }} PantryProductEntry */
 /** @typedef {Record<string, number | PantryProductEntry>} PantryV2 */
 
 function recalcTotal(entry) {
-    const itemSum = entry.items.reduce((s, i) => s + i.qty, 0);
+    entry._total = Math.round(entry.items.reduce((s, i) => s + i.qty, 0) * 1000) / 1000;
-    entry._total = Math.round((entry.generic + itemSum) * 1000) / 1000;
     return entry;
 }
 
@@ -406,13 +406,30 @@ function normalizePantryEntry(ingredientId, val) {
                   .filter(i => i && typeof i.productId === 'string' && PRODUCTS[i.productId] && Number.isFinite(Number(i.qty)) && Number(i.qty) > 0)
                   .map(i => ({ productId: i.productId, qty: Math.round(Number(i.qty) * 1000) / 1000 }))
             : [];
+        // Migrate generic stock → first product
         const generic = Math.max(0, Number(val.generic) || 0);
-        return recalcTotal({ items, generic, _total: 0 });
+        if (generic > 0 && ingredientHasProducts(ingredientId)) {
+            const products = getProductsForIngredient(ingredientId);
+            if (products.length > 0) {
+                const firstPid = products[0].id;
+                const existing = items.find(i => i.productId === firstPid);
+                if (existing) existing.qty = Math.round((existing.qty + generic) * 1000) / 1000;
+                else items.push({ productId: firstPid, qty: Math.round(generic * 1000) / 1000 });
+            }
+        }
+        return recalcTotal({ items, _total: 0 });
     }
     const n = Number(val);
     if (!Number.isFinite(n) || n < 0) return null;
     if (ingredientHasProducts(ingredientId)) {
-        return recalcTotal({ items: [], generic: n, _total: 0 });
+        // Migrate number → first product
+        if (n > 0) {
+            const products = getProductsForIngredient(ingredientId);
+            if (products.length > 0) {
+                return recalcTotal({ items: [{ productId: products[0].id, qty: n }], _total: 0 });
+            }
+        }
+        return recalcTotal({ items: [], _total: 0 });
     }
     return n;
 }
@@ -480,30 +497,18 @@ export function getPantryProducts(ingredientId, pantry) {
     return val.items || [];
 }
 
-/** Ilość generyczna (nieprzypisana do produktu). */
+/** @deprecated No generic stock for ingredients with products. Returns 0 for those. */
 export function getPantryGeneric(ingredientId, pantry) {
     const val = pantry[ingredientId];
     if (typeof val === 'number') return val;
-    if (!val) return 0;
+    return 0;
-    return val.generic || 0;
 }
 
-/** Ustaw ilość generyczną składnika (bez produktu). */
+/** Ustaw ilość składnika BEZ produktów. Dla składników z produktami użyj setPantryProductQty. */
 export function setPantryQty(ingredientId, qty) {
     const pantry = loadPantry();
-    const val = pantry[ingredientId];
+    if (qty <= 0 || !Number.isFinite(qty)) delete pantry[ingredientId];
-    if (val && typeof val === 'object') {
+    else pantry[ingredientId] = Math.round(qty * 1000) / 1000;
-        val.generic = Math.max(0, Math.round(qty * 1000) / 1000);
-        recalcTotal(val);
-        if (val._total <= 0) delete pantry[ingredientId];
-    } else {
-        if (qty <= 0 || !Number.isFinite(qty)) delete pantry[ingredientId];
-        else if (ingredientHasProducts(ingredientId)) {
-            pantry[ingredientId] = recalcTotal({ items: [], generic: Math.round(qty * 1000) / 1000, _total: 0 });
-        } else {
-            pantry[ingredientId] = Math.round(qty * 1000) / 1000;
-        }
-    }
     savePantry(pantry);
     return pantry;
 }
@@ -513,8 +518,7 @@ export function setPantryProductQty(ingredientId, productId, qty) {
     const pantry = loadPantry();
     let val = pantry[ingredientId];
     if (!val || typeof val === 'number') {
-        const generic = typeof val === 'number' ? val : 0;
+        val = { items: [], _total: 0 };
-        val = { items: [], generic, _total: 0 };
         pantry[ingredientId] = val;
     }
     const idx = val.items.findIndex(i => i.productId === productId);
@@ -545,27 +549,21 @@ export function applyCheckedKitchenListToPantry() {
         const def = INGREDIENTS[it.ingredientId];
         if (!def) continue;
         if (normalizeUnitForPantry(it.unit, def.pantryUnit) === null) continue;
-        const val = pantry[it.ingredientId];
+
-        if (val && typeof val === 'object') {
+        if (it.productId && PRODUCTS[it.productId]) {
-            if (it.productId && PRODUCTS[it.productId]) {
+            // Add to specific product
-                const idx = val.items.findIndex(i => i.productId === it.productId);
+            let val = pantry[it.ingredientId];
-                if (idx >= 0) val.items[idx].qty = Math.round((val.items[idx].qty + it.amount) * 1000) / 1000;
+            if (!val || typeof val === 'number') {
-                else val.items.push({ productId: it.productId, qty: Math.round(it.amount * 1000) / 1000 });
+                val = { items: [], _total: 0 };
-            } else {
+                pantry[it.ingredientId] = val;
-                val.generic = Math.round(((val.generic || 0) + it.amount) * 1000) / 1000;
             }
+            const idx = val.items.findIndex(i => i.productId === it.productId);
+            if (idx >= 0) val.items[idx].qty = Math.round((val.items[idx].qty + it.amount) * 1000) / 1000;
+            else val.items.push({ productId: it.productId, qty: Math.round(it.amount * 1000) / 1000 });
             recalcTotal(val);
-        } else if (ingredientHasProducts(it.ingredientId)) {
-            const cur = typeof val === 'number' ? val : 0;
-            const entry = { items: [], generic: cur, _total: 0 };
-            if (it.productId && PRODUCTS[it.productId]) {
-                entry.items.push({ productId: it.productId, qty: Math.round(it.amount * 1000) / 1000 });
-            } else {
-                entry.generic = Math.round((entry.generic + it.amount) * 1000) / 1000;
-            }
-            pantry[it.ingredientId] = recalcTotal(entry);
         } else {
-            const cur = typeof val === 'number' ? val : 0;
+            // Generic ingredient (no products)
+            const cur = typeof pantry[it.ingredientId] === 'number' ? pantry[it.ingredientId] : 0;
             pantry[it.ingredientId] = Math.round((cur + it.amount) * 1000) / 1000;
         }
     }

js/services/planIngredients.js

@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES, PRODUCTS, getProductsForIngredient } from '../data/catalog.js?v=6';
+import { INGREDIENTS, RECIPES, PRODUCTS, getProductsForIngredient } from '../data/catalog.js?v=8';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { addDays } from './dateUtils.js';
 import { getDayPlan } from './planStore.js?v=2';

js/services/planStore.js

@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES, PRODUCTS } from '../data/catalog.js?v=6';
+import { INGREDIENTS, RECIPES, PRODUCTS } from '../data/catalog.js?v=8';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { PLANS_STORAGE_KEY } from '../storageKeys.js';
 import { startOfDay } from './dateUtils.js';

js/ui/mealPlanEditor.js

@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES, PRODUCTS, getProductsForIngredient } from '../data/catalog.js?v=6';
+import { INGREDIENTS, RECIPES, PRODUCTS, CATEGORY_LABELS, getProductsForIngredient } from '../data/catalog.js?v=8';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
     addDays,
@@ -14,8 +14,8 @@ import {
     newPlanEntryId,
     savePlans,
 } from '../services/planStore.js?v=2';
-import { dayHasAnyMeal, autoSelectProducts, saveLastProductSelection } from '../services/planIngredients.js?v=3';
+import { dayHasAnyMeal, autoSelectProducts, saveLastProductSelection } from '../services/planIngredients.js?v=4';
-import { loadPantry } from '../services/pantryShopping.js?v=2';
+import { loadPantry, getPantryTotal, getPantryProducts, setPantryQty, setPantryProductQty, addOrMergeShoppingLines } from '../services/pantryShopping.js?v=2';
 import { showAppToast } from './toast.js';
 import {
     bindCalendarDayClicks,
@@ -34,6 +34,207 @@ function esc(s) {
 
 const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
 
+/* ── Product Card Popup ────────────────────────────── */
+
+function getProductCardHTML() {
+    return `
+    <div id="mpe-product-card-overlay" class="fixed inset-0 z-[70] bg-black/50 hidden flex items-center justify-center p-6" style="pointer-events:none">
+        <div id="mpe-product-card" class="relative w-full max-w-xs bg-[#2d2e2b] rounded-2xl shadow-2xl overflow-hidden" style="pointer-events:auto; max-height:80vh; overflow-y:auto;">
+            <div id="mpe-pc-hero" class="relative w-full h-[180px] bg-gray-800 overflow-hidden">
+                <img id="mpe-pc-img" class="w-full h-full object-cover hidden" alt="" />
+                <div id="mpe-pc-fallback" class="w-full h-full flex items-center justify-center">
+                    <i class="fas fa-box-open text-3xl text-gray-600"></i>
+                </div>
+                <button type="button" id="mpe-pc-close" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70 transition-colors">
+                    <i class="fas fa-times text-sm"></i>
+                </button>
+            </div>
+            <div class="px-4 pt-3 pb-4 space-y-3">
+                <div>
+                    <p id="mpe-pc-brand" class="text-[10px] font-semibold uppercase tracking-wider text-emerald-400"></p>
+                    <h3 id="mpe-pc-name" class="text-[15px] font-bold text-gray-100 leading-snug mt-0.5"></h3>
+                    <p id="mpe-pc-category" class="text-[11px] text-gray-500 mt-0.5"></p>
+                </div>
+                <div id="mpe-pc-pack" class="hidden">
+                    <span class="text-[10px] font-semibold uppercase tracking-wider text-gray-500">Opakowanie</span>
+                    <p id="mpe-pc-pack-val" class="text-[13px] font-semibold text-gray-300 mt-0.5"></p>
+                </div>
+                <div>
+                    <span id="mpe-pc-nut-label" class="text-[10px] font-semibold uppercase tracking-wider text-gray-500">Wartości odżywcze na 100 g</span>
+                    <div class="grid grid-cols-4 gap-2 mt-1.5">
+                        <div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
+                            <p id="mpe-pc-kcal" class="text-[15px] font-bold text-gray-100 tabular-nums"></p>
+                            <p class="text-[9px] text-gray-500 font-medium mt-0.5">kcal</p>
+                        </div>
+                        <div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
+                            <p id="mpe-pc-protein" class="text-[15px] font-bold text-blue-400 tabular-nums"></p>
+                            <p class="text-[9px] text-gray-500 font-medium mt-0.5">białko</p>
+                        </div>
+                        <div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
+                            <p id="mpe-pc-fat" class="text-[15px] font-bold text-amber-400 tabular-nums"></p>
+                            <p class="text-[9px] text-gray-500 font-medium mt-0.5">tłuszcz</p>
+                        </div>
+                        <div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
+                            <p id="mpe-pc-carbs" class="text-[15px] font-bold text-orange-400 tabular-nums"></p>
+                            <p class="text-[9px] text-gray-500 font-medium mt-0.5">węgl.</p>
+                        </div>
+                    </div>
+                </div>
+                <div id="mpe-pc-stock" class="space-y-1.5"></div>
+                <div id="mpe-pc-shop"></div>
+            </div>
+        </div>
+    </div>`;
+}
+
+function openProductCard(ingredientId, productId) {
+    const overlay = document.getElementById('mpe-product-card-overlay');
+    if (!overlay) return;
+
+    const def = INGREDIENTS[ingredientId];
+    const product = productId ? PRODUCTS[productId] : null;
+    const name = product?.name || def?.name || ingredientId;
+    const brand = product?.brand || '';
+    const category = CATEGORY_LABELS[def?.category] || '';
+    const nutrition = product?.nutritionPer100g || def?.nutritionPer100g;
+    const image = product?.image || def?.image;
+    const packLabel = product?.packLabel || def?.purchasePack?.label || '';
+    const nutUnit = def?.pantryUnit === 'ml' ? '100 ml' : '100 g';
+
+    document.getElementById('mpe-pc-name').textContent = name;
+    document.getElementById('mpe-pc-brand').textContent = brand;
+    document.getElementById('mpe-pc-category').textContent = category;
+    document.getElementById('mpe-pc-nut-label').textContent = `Wartości odżywcze na ${nutUnit}`;
+
+    const img = document.getElementById('mpe-pc-img');
+    const fallback = document.getElementById('mpe-pc-fallback');
+    if (image) {
+        img.src = image;
+        img.alt = name;
+        img.classList.remove('hidden');
+        fallback.classList.add('hidden');
+    } else {
+        img.classList.add('hidden');
+        fallback.classList.remove('hidden');
+    }
+
+    const packWrap = document.getElementById('mpe-pc-pack');
+    if (packLabel) {
+        packWrap.classList.remove('hidden');
+        document.getElementById('mpe-pc-pack-val').textContent = packLabel;
+    } else {
+        packWrap.classList.add('hidden');
+    }
+
+    if (nutrition) {
+        document.getElementById('mpe-pc-kcal').textContent = nutrition.kcal;
+        document.getElementById('mpe-pc-protein').textContent = nutrition.protein + 'g';
+        document.getElementById('mpe-pc-fat').textContent = nutrition.fat + 'g';
+        document.getElementById('mpe-pc-carbs').textContent = nutrition.carbs + 'g';
+    }
+
+    // Stock section
+    renderPlannerCardStock(ingredientId, productId);
+
+    // Shop section
+    renderPlannerCardShop(ingredientId, productId);
+
+    overlay.classList.remove('hidden');
+    overlay.style.pointerEvents = 'auto';
+}
+
+function renderPlannerCardStock(ingredientId, productId) {
+    const wrap = document.getElementById('mpe-pc-stock');
+    if (!wrap) return;
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
+    const pantry = loadPantry();
+    const product = productId ? PRODUCTS[productId] : null;
+
+    let qty, step, pid;
+    if (product) {
+        const items = getPantryProducts(ingredientId, pantry);
+        qty = items.find(i => i.productId === productId)?.qty || 0;
+        step = product.packSize || 1;
+        pid = productId;
+    } else {
+        qty = getPantryTotal(ingredientId, pantry);
+        step = def.purchasePack?.amount || (def.pantryUnit === 'szt' ? 1 : 10);
+        pid = '_generic';
+    }
+
+    wrap.innerHTML = `
+        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5 text-gray-500">Zapas</p>
+        <div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2 bg-[#393937]">
+            <button type="button" class="mpe-pc-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95 bg-[#2f2f2d] text-[#d7d2c8]" data-pid="${esc(pid)}" data-step="${step}" data-dir="-1"><i class="fas fa-minus text-xs"></i></button>
+            <span class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${Math.round(qty)} ${esc(u)}</span>
+            <button type="button" class="mpe-pc-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95 bg-[#2f2f2d] text-[#d7d2c8]" data-pid="${esc(pid)}" data-step="${step}" data-dir="1"><i class="fas fa-plus text-xs"></i></button>
+        </div>`;
+
+    wrap.querySelectorAll('.mpe-pc-stock-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const bpid = btn.dataset.pid;
+            const bstep = Number(btn.dataset.step) || 1;
+            const dir = Number(btn.dataset.dir);
+            const p = loadPantry();
+            if (bpid === '_generic') {
+                const cur = getPantryTotal(ingredientId, p);
+                setPantryQty(ingredientId, Math.max(0, cur + bstep * dir));
+            } else {
+                const items = getPantryProducts(ingredientId, p);
+                const cur = items.find(i => i.productId === bpid)?.qty || 0;
+                setPantryProductQty(ingredientId, bpid, Math.max(0, cur + bstep * dir));
+            }
+            renderPlannerCardStock(ingredientId, productId);
+        });
+    });
+}
+
+function renderPlannerCardShop(ingredientId, productId) {
+    const wrap = document.getElementById('mpe-pc-shop');
+    if (!wrap) return;
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
+    const product = productId ? PRODUCTS[productId] : null;
+    const packSize = product?.packSize || def.purchasePack?.amount;
+    const packLabel = product?.packLabel || def.purchasePack?.label;
+    const usesPacks = Boolean(packSize && packSize > 0);
+    const btnLabel = usesPacks ? `Dodaj na listę (${packLabel || `${packSize} ${u}`})` : 'Dodaj na listę';
+
+    wrap.innerHTML = `
+        <button type="button" id="mpe-pc-add-list" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b;">
+            <i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}
+        </button>`;
+
+    document.getElementById('mpe-pc-add-list')?.addEventListener('click', () => {
+        const amt = usesPacks ? packSize : (def.pantryUnit === 'szt' ? 1 : 10);
+        const line = {
+            ingredientId,
+            amount: amt,
+            unit: u,
+            name: product?.name || def.name,
+            category: def.category,
+            sourceNote: packLabel || 'Z planera',
+        };
+        if (productId) line.productId = productId;
+        addOrMergeShoppingLines([line]);
+        // Quick visual feedback
+        const btn = document.getElementById('mpe-pc-add-list');
+        if (btn) { btn.textContent = '✓ Dodano'; setTimeout(() => { btn.innerHTML = `<i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}`; }, 1200); }
+        window.refreshShopping?.();
+    });
+}
+
+function closeProductCard() {
+    const overlay = document.getElementById('mpe-product-card-overlay');
+    if (overlay) {
+        overlay.classList.add('hidden');
+        overlay.style.pointerEvents = 'none';
+    }
+}
+
 /* ── HTML template ──────────────────────────────────── */
 
 export function getMealPlanEditorHTML() {
@@ -85,7 +286,8 @@ export function getMealPlanEditorHTML() {
                 </button>
             </div>
         </div>
-    </div>`;
+    </div>
+    ${getProductCardHTML()}`;
 }
 
 /* ── Setup ──────────────────────────────────────────── */
@@ -304,7 +506,7 @@ export function setupMealPlanEditor() {
                 : '';
 
             html += `<div class="flex items-center gap-2">`;
-            html += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${esc(eName)}</span>${productBadge}</div>`;
+            html += `<div class="flex-1 min-w-0 mpe-open-product-card cursor-pointer" data-eid="${esc(eid)}" data-pid="${esc(selectedProductId || '')}"><span class="text-[12px] font-semibold text-gray-900 truncate block">${esc(eName)}</span>${productBadge}</div>`;
             html += `<div class="shrink-0 flex items-center gap-2">`;
             html += shuffleBtn;
             html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-orig-id="${esc(id)}" data-type="recipe">`;
@@ -342,7 +544,12 @@ export function setupMealPlanEditor() {
             const disp = a.amount * S.servings;
             html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
             html += `<div class="flex items-center gap-2">`;
-            html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>`;
+            const addedPid = S.productSelections[a.ingredientId] || '';
+            const addedProduct = addedPid ? PRODUCTS[addedPid] : null;
+            const addedBadge = addedProduct
+                ? `<div class="flex items-center gap-1 mt-0.5"><span class="text-[10px] text-emerald-400 truncate">${esc(addedProduct.name)}</span></div>`
+                : '';
+            html += `<div class="flex-1 min-w-0 mpe-open-product-card cursor-pointer" data-eid="${esc(a.ingredientId)}" data-pid="${esc(addedPid)}"><div class="flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>${addedBadge}</div>`;
             html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
             html += `<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(disp)}</span>`;
             html += `<span class="text-[11px] text-gray-500">${esc(a.unit)}</span></button>`;
@@ -421,12 +628,22 @@ export function setupMealPlanEditor() {
             <div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
                 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
                 <div class="flex-1 flex items-center">
-                    <div class="rounded-xl border px-3 py-2" style="background:#2f2f2d !important; border-color:#444442 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);">
+                    <div class="grid grid-cols-4 gap-1.5 w-full">
-                        <div class="grid grid-flow-col auto-cols-max gap-3 text-left">
+                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                            <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.kcal}</span><span class="text-[9px] text-gray-500">kcal</span></div>
+                            <p class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">${n.kcal}</p>
-                            <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.protein}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Białko</span></div>
+                            <p class="text-[9px] text-gray-500 font-medium">kcal</p>
-                            <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.carbs}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Węgle</span></div>
+                        </div>
-                            <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.fat}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Tłuszcze</span></div>
+                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                            <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${n.protein}g</p>
+                            <p class="text-[9px] text-gray-500 font-medium">białko</p>
+                        </div>
+                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                            <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${n.fat}g</p>
+                            <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
+                        </div>
+                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                            <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${n.carbs}g</p>
+                            <p class="text-[9px] text-gray-500 font-medium">węgl.</p>
                         </div>
                     </div>
                 </div>
@@ -636,11 +853,28 @@ export function setupMealPlanEditor() {
         renderNutrition();
     });
 
+    /* ── Product card ────────────────────────────── */
+
+    document.getElementById('mpe-pc-close')?.addEventListener('click', closeProductCard);
+    document.getElementById('mpe-product-card-overlay')?.addEventListener('click', (e) => {
+        if (e.target.id === 'mpe-product-card-overlay') closeProductCard();
+    });
+
     /* ── Ingredient section delegation ────────────── */
 
     const ingSec = document.getElementById('mpe-ing-section');
 
     ingSec?.addEventListener('click', (e) => {
+        // Check "zmień" and other inner buttons before the card wrapper
+        const changeProdEarly = e.target.closest('.mpe-change-product');
+        if (!changeProdEarly) {
+            const cardBtn = e.target.closest('.mpe-open-product-card');
+            if (cardBtn) {
+                openProductCard(cardBtn.dataset.eid, cardBtn.dataset.pid || null);
+                return;
+            }
+        }
+
         const remove = e.target.closest('.mpe-remove-ing');
         if (remove) {
             if (remove.dataset.type === 'added') {

js/views/Filter.js

@@ -1,4 +1,4 @@
-import { RECIPES } from '../data/catalog.js?v=6';
+import { RECIPES } from '../data/catalog.js?v=8';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { applyFilters, getFilterState } from './RecipeList.js';
 
@@ -61,7 +61,7 @@ export function getFilterHTML() {
             outline: none;
         }
     </style>
-    <div id="filter-view" class="absolute inset-0 z-[55] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
+    <div id="filter-view" class="absolute inset-0 z-[55] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:rgba(0,0,0,0.5) !important; background-image:none !important;" aria-hidden="true">
         <div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.5rem] border" style="background:${FILTER_SURFACE} !important; background-image:none !important; border-color:${FILTER_BORDER} !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:${FILTER_PANEL_TRANSITION}; box-shadow:0 18px 40px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.18); width:min(calc(100% - 1.5rem), 22rem);">
             <div class="pointer-events-none absolute inset-x-0 top-0 h-px" style="background:rgba(242,239,232,0.12);" aria-hidden="true"></div>
             <div class="shrink-0 px-3.5 pt-3 pb-2 flex justify-end" style="background:${FILTER_SURFACE} !important; background-image:none !important;">
@@ -240,13 +240,7 @@ function positionFilterPanel() {
 }
 
 function setRecipeAreaBlur(visible) {
-    const recipeScroll = document.getElementById('recipe-scroll');
+    // Dark overlay on filter-view handles the dimming now
-    if (!recipeScroll) return;
-
-    recipeScroll.style.transition = 'filter 180ms ease, opacity 180ms ease';
-    recipeScroll.style.willChange = 'filter, opacity';
-    recipeScroll.style.filter = visible ? FILTER_RECIPE_BLUR : 'none';
-    recipeScroll.style.opacity = visible ? '0.78' : '1';
 }
 
 function showFilterPanel() {

js/views/MealPlanner.js

@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=6';
+import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=8';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
     addMonths,
@@ -15,7 +15,7 @@ import {
     countDayShortfalls,
     dayHasAnyMeal,
     sumDayNutrition,
-} from '../services/planIngredients.js?v=3';
+} from '../services/planIngredients.js?v=4';
 import { addOrMergeShoppingLines, loadPantry } from '../services/pantryShopping.js?v=2';
 import {
     dateKey,
@@ -88,24 +88,22 @@ export function getMealPlannerHTML() {
                 <div class="h-full flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
                     <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
                     <div class="flex-1 flex items-center">
-                        <div class="w-full rounded-xl border px-3 py-2.5" style="background:#2f2f2d !important; border-color:#444442 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);">
+                        <div class="grid grid-cols-4 gap-1.5 w-full">
-                            <div class="grid grid-cols-4 gap-3 text-left">
+                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                                <div class="min-w-0">
+                                <p id="planner-nutrition-kcal" class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">—</p>
-                                    <span id="planner-nutrition-kcal" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
+                                <p class="text-[9px] text-gray-500 font-medium">kcal</p>
-                                    <span class="text-[9px] text-gray-500">kcal</span>
+                            </div>
-                                </div>
+                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                                <div class="min-w-0">
+                                <p id="planner-nutrition-p" class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">—</p>
-                                    <span id="planner-nutrition-p" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
+                                <p class="text-[9px] text-gray-500 font-medium">białko</p>
-                                    <span class="text-[9px] text-gray-500">Białko</span>
+                            </div>
-                                </div>
+                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                                <div class="min-w-0">
+                                <p id="planner-nutrition-f" class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">—</p>
-                                    <span id="planner-nutrition-c" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
+                                <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
-                                    <span class="text-[9px] text-gray-500">Węgle</span>
+                            </div>
-                                </div>
+                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                                <div class="min-w-0">
+                                <p id="planner-nutrition-c" class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">—</p>
-                                    <span id="planner-nutrition-f" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
+                                <p class="text-[9px] text-gray-500 font-medium">węgl.</p>
-                                    <span class="text-[9px] text-gray-500">Tłuszcze</span>
-                                </div>
                             </div>
                         </div>
                     </div>
@@ -332,9 +330,7 @@ function renderDayContent(state) {
     const setGrams = (id, value) => {
         const el = document.getElementById(id);
         if (!el) return;
-        el.innerHTML = value === null
+        el.textContent = value === null ? '—' : `${value}g`;
-            ? '—'
-            : `${value}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span>`;
     };
 
     const hasMeals = totals.mealCount > 0;

js/views/Pantry.js

@@ -5,8 +5,8 @@ import {
     pantryQtyStep,
     getProductsForIngredient,
     ingredientHasProducts,
-} from '../data/catalog.js?v=6';
+} from '../data/catalog.js?v=8';
-import { addIngredientToKitchenList, categoryLabel, loadPantry, setPantryQty, setPantryProductQty, getPantryTotal, getPantryProducts, getPantryGeneric } from '../services/pantryShopping.js?v=2';
+import { addIngredientToKitchenList, addOrMergeShoppingLines, categoryLabel, loadPantry, setPantryQty, setPantryProductQty, getPantryTotal, getPantryProducts } from '../services/pantryShopping.js?v=2';
 import { showAppToast } from '../ui/toast.js';
 
 /* ── helpers ── */
@@ -34,6 +34,8 @@ const CATEGORY_ICONS = {
     inne: 'fa-jar',
 };
 
+const SEARCH_SHELL_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';
+
 /* ── state ── */
 
 let showOnlyStock = false;
@@ -51,86 +53,74 @@ const HIDDEN_Y = `translateY(calc(100% + ${BOTTOM}))`;
 
 export function getPantryHTML() {
     return `
-    <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-gray-50 z-10 pb-24">
+    <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:#2d2e2b !important;">
-        <div class="shrink-0 bg-white border-b border-gray-100 mt-3 px-4 pt-2 pb-2.5 space-y-2">
-            <div class="flex items-center gap-2.5 bg-gray-100 rounded-2xl px-3.5 py-2.5 focus-within:ring-2 focus-within:ring-gray-900/10 transition-all">
-                <i class="fas fa-search text-gray-400 text-xs"></i>
-                <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj produktu…"
-                    class="flex-1 bg-transparent outline-none text-sm text-gray-800 placeholder-gray-400" />
-            </div>
-            <div id="pantry-category-chips" class="flex gap-2 overflow-x-auto no-scrollbar -mx-1 px-1 pb-0.5"></div>
-            <div class="flex items-center justify-end">
-                <label class="flex items-center gap-2 cursor-pointer select-none">
-                    <span class="text-xs font-medium text-gray-500">Tylko na stanie</span>
-                    <button type="button" id="pantry-stock-toggle" role="switch" aria-checked="false"
-                        class="relative w-10 h-[22px] rounded-full bg-gray-200 transition-colors duration-200 shrink-0">
-                        <span class="absolute left-0.5 top-0.5 w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-transform duration-200"></span>
-                    </button>
-                </label>
-            </div>
-        </div>
 
-        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar">
+        <!-- ── floating search bar ── -->
-            <div id="pantry-board" class="px-4 pt-3 pb-4 space-y-2"></div>
+        <div class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4" style="background:transparent !important; border:none !important;">
-        </div>
+            <div id="pantry-search-shell" class="pointer-events-auto relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:#393937 !important; border:1px solid #41423f !important; border-radius:999px !important; box-shadow:${SEARCH_SHELL_SHADOW} !important;">
-
+                <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
-        <!-- ── product sheet ── -->
+                    class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] pl-8 pr-14" style="background:transparent !important; border:none !important; box-shadow:none !important; color:#ddd6ca;">
-        <div id="pv2-edit-bg" class="absolute inset-0 z-[38] bg-black/40 hidden opacity-0 transition-opacity duration-200"></div>
+                <button id="pantry-filter-btn" type="button" class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; color:#c9c3b8;" aria-label="Filtry">
-        <div id="pv2-edit-sheet" class="absolute left-0 right-0 z-[40] bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] px-5 pt-2 pb-4 flex flex-col gap-2.5 max-h-[75%] min-h-0 overflow-y-auto no-scrollbar"
+                    <i class="fas fa-sliders-h"></i>
-            style="bottom:${BOTTOM};transform:${HIDDEN_Y};transition:transform 300ms cubic-bezier(.32,.72,0,1)">
-            <div class="w-10 h-1 bg-gray-200 rounded-full mx-auto shrink-0"></div>
-
-            <div class="shrink-0">
-                <h2 id="pv2-edit-name" class="text-[15px] font-bold text-gray-900 leading-snug"></h2>
-                <p id="pv2-edit-meta" class="text-[11px] text-gray-500"></p>
-            </div>
-
-            <div class="shrink-0 flex items-center gap-2">
-                <span class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 w-[3.2rem] shrink-0">Zapas</span>
-                <button type="button" id="pv2-edit-minus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
-                    <i class="fas fa-minus text-xs"></i>
                 </button>
-                <div class="flex items-baseline gap-0.5">
+            </div>
-                    <input type="number" id="pv2-edit-qty" min="0" step="1" inputmode="decimal"
+        </div>
-                        class="w-14 text-center text-lg font-bold tabular-nums bg-transparent outline-none" value="0" />
+
-                    <span id="pv2-edit-unit" class="text-xs text-gray-400 font-medium"></span>
+        <!-- ── filter popup ── -->
+        <div id="pantry-filter-overlay" class="absolute inset-0 z-[55] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:rgba(0,0,0,0.5) !important;">
+            <div id="pantry-filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.5rem] border" style="background:#393937 !important; border-color:#444442 !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:opacity 180ms ease, transform 180ms ease; box-shadow:0 18px 40px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.18);">
+                <div class="shrink-0 px-4 pt-3 pb-2 flex items-center justify-between" style="border-bottom:1px solid #444442;">
+                    <p class="text-[12px] font-bold uppercase tracking-wider" style="color:#9b978f;">Filtry</p>
+                    <button id="pantry-filter-clear" type="button" class="px-3 py-1 rounded-full border text-[11px] font-semibold transition-colors" style="background:#2f2f2d; border-color:#444442; color:#d7d2c8;">Wyczyść</button>
                 </div>
-                <button type="button" id="pv2-edit-plus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
+                <div class="px-4 py-3 space-y-3 overflow-y-auto no-scrollbar" style="max-height:60vh;">
-                    <i class="fas fa-plus text-xs"></i>
+                    <div>
-                </button>
+                        <p class="text-[10px] font-bold uppercase tracking-wider mb-2" style="color:#9b978f;">Kategorie</p>
-            </div>
+                        <div id="pantry-filter-categories" class="flex flex-wrap gap-1.5"></div>
-
-            <div id="pv2-product-breakdown" class="shrink-0"></div>
-
-            <div class="border-t border-gray-100 shrink-0"></div>
-
-            <div class="shrink-0 space-y-1">
-                <div class="flex items-center gap-2">
-                    <span class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 w-[3.2rem] shrink-0">Lista</span>
-                    <button type="button" id="pv2-shop-minus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
-                        <i class="fas fa-minus text-xs"></i>
-                    </button>
-                    <div class="flex items-baseline gap-0.5">
-                        <input type="number" id="pv2-shop-qty" min="1" step="1" inputmode="numeric"
-                            class="w-14 text-center text-lg font-bold tabular-nums bg-transparent outline-none" value="1" />
-                        <span id="pv2-shop-unit" class="text-xs text-gray-400 font-medium"></span>
                     </div>
-                    <button type="button" id="pv2-shop-plus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
+                    <div style="border-top:1px solid #444442; padding-top:0.75rem;">
-                        <i class="fas fa-plus text-xs"></i>
+                        <button type="button" id="pantry-filter-stock" class="w-full flex items-center justify-between px-3 py-2 rounded-xl transition-colors" style="background:#2f2f2d;">
-                    </button>
+                            <span class="text-[12px] font-semibold" style="color:#d7d2c8;">Tylko na stanie</span>
-                    <button type="button" id="pv2-shop-add" class="ml-auto shrink-0 px-3.5 py-2 rounded-xl bg-gray-900 text-white text-[11px] font-semibold hover:bg-black transition-colors active:scale-95">
+                            <span id="pantry-filter-stock-check" class="w-5 h-5 rounded-md flex items-center justify-center" style="border:1.5px solid #56534f;"></span>
-                        <i class="fas fa-cart-plus text-[9px] mr-1"></i>Dodaj
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- ── scrollable content ── -->
+        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[4.5rem] pb-24" style="background:#2d2e2b !important;">
+            <div id="pantry-board" class="space-y-4"></div>
+        </div>
+
+        <!-- ── ingredient card popup ── -->
+        <div id="pv2-card-overlay" class="absolute inset-0 z-[60] bg-black/50 hidden flex items-center justify-center p-5" style="pointer-events:none;">
+            <div id="pv2-card" class="relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden" style="background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto;">
+                <div id="pv2-card-hero" class="relative w-full h-[160px] overflow-hidden" style="background:#393937;">
+                    <img id="pv2-card-img" class="w-full h-full object-cover hidden" alt="" />
+                    <div id="pv2-card-fallback" class="w-full h-full flex items-center justify-center">
+                        <i id="pv2-card-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
+                    </div>
+                    <button type="button" id="pv2-card-close" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70 transition-colors">
+                        <i class="fas fa-times text-sm"></i>
                     </button>
                 </div>
-                <p id="pv2-shop-hint" class="text-[10px] text-gray-400 pl-[3.5rem]"></p>
+                <div class="px-4 pt-3 pb-4 space-y-3">
+                    <div>
+                        <p id="pv2-card-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#9b978f;"></p>
+                        <h3 id="pv2-card-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
+                        <p id="pv2-card-pack" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
+                    </div>
+                    <div id="pv2-card-nutrition"></div>
+                    <div id="pv2-card-stock-section"></div>
+                    <div id="pv2-card-shop-section"></div>
+                </div>
             </div>
-
-            <div id="pv2-edit-nutrition" class="shrink-0"></div>
         </div>
     </div>`;
 }
 
-/* ══════════════════════ CATEGORY CHIPS (multi-select) ══════════════════════ */
+/* ══════════════════════ FILTER POPUP ══════════════════════ */
 
 function allCategoryKeys() {
     const s = new Set();
@@ -138,31 +128,91 @@ function allCategoryKeys() {
     return [...s].sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)));
 }
 
-function renderCategoryChips() {
+let filterCloseTimer = null;
-    const wrap = document.getElementById('pantry-category-chips');
-    if (!wrap) return;
 
+function renderFilterCategories() {
+    const wrap = document.getElementById('pantry-filter-categories');
+    if (!wrap) return;
     const keys = allCategoryKeys();
     wrap.innerHTML = keys.map(k => {
         const active = selectedCategories.has(k);
         const icon = CATEGORY_ICONS[k] || 'fa-jar';
-        const cls = active
+        const bg = active ? '#23221e' : '#2f2f2d';
-            ? 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-900 text-white transition-colors'
+        const border = active ? '#787876' : '#444442';
-            : 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors';
+        const text = active ? '#f2efe8' : '#d7d2c8';
-        return `<button type="button" data-cat="${esc(k)}" class="pv2-cat-chip ${cls}"><i class="fas ${icon} text-[10px]"></i>${esc(categoryLabel(k))}</button>`;
+        return `<button type="button" data-cat="${esc(k)}" class="pv2-filter-cat px-3 py-1.5 rounded-full border text-[12px] font-semibold transition-colors inline-flex items-center gap-1.5" style="background:${bg}; border-color:${border}; color:${text};"><i class="fas ${icon} text-[10px]"></i>${esc(categoryLabel(k))}</button>`;
     }).join('');
+}
 
-    wrap.querySelectorAll('.pv2-cat-chip').forEach(btn => {
+function renderFilterStockCheck() {
-        btn.addEventListener('click', () => {
+    const el = document.getElementById('pantry-filter-stock-check');
-            const cat = btn.dataset.cat;
+    if (!el) return;
-            if (selectedCategories.has(cat)) selectedCategories.delete(cat);
+    el.innerHTML = showOnlyStock ? '<i class="fas fa-check text-[10px]" style="color:#6ee7b7;"></i>' : '';
-            else selectedCategories.add(cat);
+    el.style.background = showOnlyStock ? '#23221e' : 'transparent';
-            renderCategoryChips();
+    el.style.borderColor = showOnlyStock ? '#787876' : '#56534f';
-            renderBoard();
+}
-        });
+
+function updateFilterBadge() {
+    const btn = document.getElementById('pantry-filter-btn');
+    if (!btn) return;
+    const count = selectedCategories.size + (showOnlyStock ? 1 : 0);
+    btn.style.color = count > 0 ? '#6ee7b7' : '#c9c3b8';
+}
+
+function positionFilterPanel() {
+    const panel = document.getElementById('pantry-filter-panel');
+    const shell = document.getElementById('pantry-search-shell');
+    const view = document.getElementById('pantry-view');
+    if (!panel || !shell || !view) return;
+    const viewRect = view.getBoundingClientRect();
+    const shellRect = shell.getBoundingClientRect();
+    const gap = 8;
+    const margin = 12;
+    const width = Math.min(shellRect.width, viewRect.width - margin * 2);
+    const top = shellRect.bottom - viewRect.top + gap;
+    const left = Math.max(margin, Math.min(shellRect.left - viewRect.left, viewRect.width - width - margin));
+    panel.style.width = `${width}px`;
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
+}
+
+function openFilterPopup() {
+    const overlay = document.getElementById('pantry-filter-overlay');
+    const panel = document.getElementById('pantry-filter-panel');
+    if (!overlay || !panel) return;
+    clearTimeout(filterCloseTimer);
+    renderFilterCategories();
+    renderFilterStockCheck();
+    positionFilterPanel();
+    overlay.classList.remove('hidden');
+    overlay.style.pointerEvents = 'auto';
+    requestAnimationFrame(() => {
+        overlay.classList.add('opacity-100');
+        panel.style.opacity = '1';
+        panel.style.transform = 'translateY(0) scale(1)';
     });
 }
 
+function closeFilterPopup() {
+    const overlay = document.getElementById('pantry-filter-overlay');
+    const panel = document.getElementById('pantry-filter-panel');
+    if (!overlay || !panel) return;
+    overlay.classList.remove('opacity-100');
+    overlay.style.pointerEvents = 'none';
+    panel.style.opacity = '0';
+    panel.style.transform = 'translateY(-0.5rem) scale(0.98)';
+    filterCloseTimer = setTimeout(() => overlay.classList.add('hidden'), 180);
+}
+
+function isFilterOpen() {
+    return !document.getElementById('pantry-filter-overlay')?.classList.contains('hidden');
+}
+
+// Keep old name for refreshPantry compatibility
+function renderCategoryChips() {
+    updateFilterBadge();
+}
+
 /* ══════════════════════ BOARD RENDERING ══════════════════════ */
 
 function getFilteredIds(searchRaw) {
@@ -175,22 +225,67 @@ function getFilteredIds(searchRaw) {
     }).sort((a, b) => INGREDIENTS[a].name.localeCompare(INGREDIENTS[b].name, 'pl'));
 }
 
-function chipHtml(id, pantry) {
+function ingredientRowHtml(id, pantry) {
     const def = INGREDIENTS[id];
-    const qty = getPantryTotal(id, pantry);
+    const products = getProductsForIngredient(id);
+    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
     const u = unitLabel(def.pantryUnit);
 
-    if (qty > 0) {
+    if (products.length === 0) {
-        return `<button type="button" class="pv2-chip inline-flex flex-col items-start px-3.5 py-2.5 rounded-xl bg-emerald-50 border border-emerald-200/80 text-left hover:bg-emerald-100/80 transition-colors active:scale-[0.96]" data-id="${esc(id)}">
+        // Simple row — no products
-            <span class="text-[13px] font-semibold text-gray-900 leading-tight whitespace-nowrap">${esc(def.name)}</span>
+        const qty = getPantryTotal(id, pantry);
-            <span class="text-[11px] text-emerald-600 font-semibold tabular-nums leading-tight mt-0.5">${Math.round(qty)} ${esc(u)}</span>
+        const qtyColor = qty > 0 ? '#6ee7b7' : '#6d6c67';
+        const avatar = def.image
+            ? `<img src="${esc(def.image)}" alt="" class="w-10 h-10 rounded-xl object-cover shrink-0">`
+            : `<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#6d6c67;"></i></div>`;
+        return `<button type="button" class="pv2-chip w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:#393937;" data-id="${esc(id)}">
+            ${avatar}
+            <div class="flex-1 min-w-0">
+                <div class="flex items-center justify-between gap-2">
+                    <span class="text-[13px] font-semibold truncate" style="color:#ddd6ca;">${esc(def.name)}</span>
+                    <span class="text-[13px] font-bold tabular-nums shrink-0" style="color:${qtyColor};">${qty > 0 ? Math.round(qty) : 0} ${esc(u)}</span>
+                </div>
+                <span class="text-[11px] block mt-0.5" style="color:#9b978f;">${esc(categoryLabel(def.category))}</span>
+            </div>
         </button>`;
     }
 
-    return `<button type="button" class="pv2-chip inline-flex items-center px-3.5 py-2.5 rounded-xl border border-dashed border-gray-200 text-left hover:border-gray-300 hover:bg-white transition-colors active:scale-[0.96] group" data-id="${esc(id)}">
+    // Group — ingredient header + product rows
-        <span class="text-[13px] font-medium text-gray-400 group-hover:text-gray-600 whitespace-nowrap transition-colors">${esc(def.name)}</span>
+    const totalQty = getPantryTotal(id, pantry);
-        <i class="fas fa-plus text-[8px] text-gray-300 group-hover:text-gray-500 ml-1.5 transition-colors"></i>
+    const pantryItems = getPantryProducts(id, pantry);
-    </button>`;
+    const totalColor = totalQty > 0 ? '#6ee7b7' : '#6d6c67';
+
+    let html = `<div class="rounded-xl overflow-hidden" style="background:#393937;">`;
+    // Group header
+    html += `<div class="flex items-center gap-3 px-3 py-2">`;
+    const avatar = def.image
+        ? `<img src="${esc(def.image)}" alt="" class="w-8 h-8 rounded-lg object-cover shrink-0">`
+        : `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-xs" style="color:#6d6c67;"></i></div>`;
+    html += avatar;
+    html += `<div class="flex-1 min-w-0">
+        <span class="text-[12px] font-semibold truncate block" style="color:#9b978f;">${esc(def.name)}</span>
+    </div>`;
+    html += `<span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${totalColor};">${totalQty > 0 ? Math.round(totalQty) : 0} ${esc(u)}</span>`;
+    html += `</div>`;
+
+    // Product rows
+    for (const p of products) {
+        const pQty = pantryItems.find(i => i.productId === p.id)?.qty || 0;
+        const pQtyColor = pQty > 0 ? '#ddd6ca' : '#6d6c67';
+        const pAvatar = p.image
+            ? `<img src="${esc(p.image)}" alt="" class="w-8 h-8 rounded-lg object-cover shrink-0">`
+            : `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-xs" style="color:#6d6c67;"></i></div>`;
+        html += `<button type="button" class="pv2-product-row w-full flex items-center gap-3 px-3 py-2 text-left transition-colors active:scale-[0.99]" style="border-top:1px solid #444442;" data-id="${esc(id)}" data-product-id="${esc(p.id)}">
+            ${pAvatar}
+            <div class="flex-1 min-w-0">
+                <span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(p.name)}</span>
+                <span class="text-[11px]" style="color:#9b978f;">${p.packLabel || ''}</span>
+            </div>
+            <span class="text-[13px] font-bold tabular-nums shrink-0" style="color:${pQtyColor};">${Math.round(pQty)} ${esc(u)}</span>
+        </button>`;
+    }
+    html += `</div>`;
+    return html;
 }
 
 function groupByCategory(ids) {
@@ -220,13 +315,13 @@ function renderBoard() {
     if (visible.length === 0) {
         root.innerHTML = showOnlyStock
             ? `<div class="flex flex-col items-center justify-center py-16 text-center">
-                <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
+                <div class="w-16 h-16 rounded-full flex items-center justify-center mb-4" style="background:#393937;">
-                    <i class="fas fa-box-open text-2xl text-gray-300"></i>
+                    <i class="fas fa-box-open text-2xl" style="color:#6d6c67;"></i>
                 </div>
-                <p class="text-sm font-semibold text-gray-700">Nic na stanie</p>
+                <p class="text-sm font-semibold" style="color:#ddd6ca;">Nic na stanie</p>
-                <p class="text-xs text-gray-500 mt-1 max-w-[220px] leading-relaxed">Wyłącz filtr, aby zobaczyć cały katalog produktów</p>
+                <p class="text-xs mt-1 max-w-[220px] leading-relaxed" style="color:#9b978f;">Wyłącz filtr, aby zobaczyć cały katalog produktów</p>
             </div>`
-            : `<p class="text-sm text-gray-500 text-center py-10">Brak wyników — zmień wyszukiwanie lub filtry.</p>`;
+            : `<p class="text-sm text-center py-10" style="color:#9b978f;">Brak wyników — zmień wyszukiwanie lub filtry.</p>`;
         return;
     }
 
@@ -236,299 +331,213 @@ function renderBoard() {
         const icon = CATEGORY_ICONS[cat] || 'fa-jar';
         html += `
         <div class="mb-4 last:mb-0">
-            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-0.5">
+            <p class="text-[10px] font-bold uppercase tracking-wider mb-2 px-0.5" style="color:#9b978f;">
                 <i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))}
             </p>
-            <div class="flex flex-wrap gap-2">${ids.map(id => chipHtml(id, pantry)).join('')}</div>
+            <div class="space-y-2">${ids.map(id => ingredientRowHtml(id, pantry)).join('')}</div>
         </div>`;
     }
 
     root.innerHTML = html;
 
     root.querySelectorAll('.pv2-chip').forEach(btn => {
-        btn.addEventListener('click', () => openEditSheet(btn.dataset.id));
+        btn.addEventListener('click', () => openIngredientCard(btn.dataset.id, null));
+    });
+    root.querySelectorAll('.pv2-product-row').forEach(btn => {
+        btn.addEventListener('click', () => openIngredientCard(btn.dataset.id, btn.dataset.productId));
     });
 }
 
 /* ══════════════════════ STOCK TOGGLE ══════════════════════ */
 
-function updateToggleVisuals() {
-    const btn = document.getElementById('pantry-stock-toggle');
-    if (!btn) return;
-    const thumb = btn.querySelector('span');
-    btn.setAttribute('aria-checked', String(showOnlyStock));
-    if (showOnlyStock) {
-        btn.classList.remove('bg-gray-200');
-        btn.classList.add('bg-emerald-500');
-        thumb?.classList.add('translate-x-[18px]');
-    } else {
-        btn.classList.add('bg-gray-200');
-        btn.classList.remove('bg-emerald-500');
-        thumb?.classList.remove('translate-x-[18px]');
-    }
-}
 
-/* ══════════════════════ EDIT BOTTOM SHEET ══════════════════════ */
+/* ══════════════════════ INGREDIENT CARD ══════════════════════ */
 
-function openEditSheet(ingredientId) {
+let editingProductId = null;
+
+function openIngredientCard(ingredientId, productId) {
     const def = INGREDIENTS[ingredientId];
     if (!def) return;
     editingId = ingredientId;
+    editingProductId = productId || null;
 
+    const product = editingProductId ? PRODUCTS[editingProductId] : null;
     const pantry = loadPantry();
-    const qty = getPantryTotal(ingredientId, pantry);
     const u = unitLabel(def.pantryUnit);
-    const step = pantryQtyStep(ingredientId);
+    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
-    const pack = def.purchasePack;
 
-    const nameEl = document.getElementById('pv2-edit-name');
+    // Hero image — product image > ingredient image > fallback
-    if (nameEl) nameEl.textContent = def.name;
+    const image = product?.image || def.image;
-
+    const img = document.getElementById('pv2-card-img');
-    const metaEl = document.getElementById('pv2-edit-meta');
+    const fallback = document.getElementById('pv2-card-fallback');
-    if (metaEl) {
+    const fallbackIcon = document.getElementById('pv2-card-fallback-icon');
-        let meta = categoryLabel(def.category);
+    if (image) {
-        if (pack) meta += ` · ${pack.label || `${pack.amount} ${u}`}`;
+        img.src = image; img.alt = product?.name || def.name; img.classList.remove('hidden'); fallback.classList.add('hidden');
-        metaEl.textContent = meta;
+    } else {
+        img.classList.add('hidden'); fallback.classList.remove('hidden');
+        if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
     }
 
-    const qtyEl = document.getElementById('pv2-edit-qty');
+    // Header — show product info or ingredient info
-    if (qtyEl) qtyEl.value = qty > 0 ? String(Math.round(qty)) : '0';
+    document.getElementById('pv2-card-category').textContent = product?.brand || categoryLabel(def.category);
-
+    document.getElementById('pv2-card-name').textContent = product?.name || def.name;
-    const unitEl = document.getElementById('pv2-edit-unit');
+    const packEl = document.getElementById('pv2-card-pack');
-    if (unitEl) unitEl.textContent = u;
+    const packLabel = product?.packLabel || def.purchasePack?.label;
-
+    if (packLabel) {
-    editShopUsesPacks = Boolean(pack && pack.amount > 0);
+        packEl.textContent = packLabel;
-    editShopStep = editShopUsesPacks ? 1 : step;
+        packEl.classList.remove('hidden');
-
+    } else {
-    const shopQtyEl = document.getElementById('pv2-shop-qty');
+        packEl.classList.add('hidden');
-    if (shopQtyEl) shopQtyEl.value = String(editShopStep);
-
-    const shopUnitEl = document.getElementById('pv2-shop-unit');
-    if (shopUnitEl) shopUnitEl.textContent = editShopUsesPacks ? 'opak.' : u;
-
-    const shopHintEl = document.getElementById('pv2-shop-hint');
-    if (shopHintEl) {
-        if (editShopUsesPacks) {
-            const lab = pack.label || `${pack.amount} ${u}`;
-            shopHintEl.textContent = `1 opak. = ${lab}`;
-        } else {
-            shopHintEl.textContent = '';
-        }
     }
 
-    // Hide main +/- when products exist (total is sum of product rows)
+    // Nutrition — use product values if available
-    const hasProds = ingredientHasProducts(ingredientId);
+    renderCardNutrition(def, product);
-    const mainMinus = document.getElementById('pv2-edit-minus');
-    const mainPlus = document.getElementById('pv2-edit-plus');
-    const mainQtyInput = document.getElementById('pv2-edit-qty');
-    if (mainMinus) mainMinus.classList.toggle('hidden', hasProds);
-    if (mainPlus) mainPlus.classList.toggle('hidden', hasProds);
-    if (mainQtyInput) mainQtyInput.readOnly = hasProds;
 
-    renderProductBreakdown(ingredientId, pantry);
+    // Stock
-    renderNutritionInSheet(def);
+    renderCardStock(ingredientId, editingProductId, pantry);
 
-    const bg = document.getElementById('pv2-edit-bg');
+    // Shopping
-    const sheet = document.getElementById('pv2-edit-sheet');
+    renderCardShop(ingredientId, editingProductId);
-    if (!bg || !sheet) return;
+
-    bg.classList.remove('hidden');
+    // Show
-    sheet.classList.remove('hidden');
+    const overlay = document.getElementById('pv2-card-overlay');
-    requestAnimationFrame(() => {
+    if (overlay) { overlay.classList.remove('hidden'); overlay.style.pointerEvents = 'auto'; }
-        bg.classList.remove('opacity-0');
-        sheet.style.transform = 'translateY(0)';
-    });
 }
 
-function nutritionListRow(label, valueHtml) {
+function closeIngredientCard() {
-    return `<li class="flex items-baseline justify-between gap-3 py-0.5 border-b border-gray-100/80 last:border-0">
+    const overlay = document.getElementById('pv2-card-overlay');
-        <span class="text-gray-500 shrink-0">${esc(label)}</span>
+    if (overlay) { overlay.classList.add('hidden'); overlay.style.pointerEvents = 'none'; }
-        <span class="text-right font-semibold tabular-nums text-gray-800">${valueHtml}</span>
+    editingId = null;
-    </li>`;
+    renderBoard();
 }
 
-function renderProductBreakdown(ingredientId, pantry) {
+function renderCardNutrition(def, product) {
-    const wrap = document.getElementById('pv2-product-breakdown');
+    const wrap = document.getElementById('pv2-card-nutrition');
     if (!wrap) return;
-    const products = getProductsForIngredient(ingredientId);
+    const n = product?.nutritionPer100g || def.nutritionPer100g;
-    if (products.length === 0) { wrap.innerHTML = ''; return; }
+    if (!n) { wrap.innerHTML = ''; return; }
-
+    const label = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
-    const def = INGREDIENTS[ingredientId];
-    const u = unitLabel(def.pantryUnit);
-    const pantryProducts = getPantryProducts(ingredientId, pantry);
-    const generic = getPantryGeneric(ingredientId, pantry);
-
-    const productQty = (pid) => {
-        const item = pantryProducts.find(i => i.productId === pid);
-        return item ? item.qty : 0;
-    };
-
-    const rows = products.map(p => {
-        const q = Math.round(productQty(p.id));
-        return `<div class="flex items-center gap-1.5 py-1" data-product-row="${esc(p.id)}">
-            <span class="flex-1 text-[12px] text-gray-700 truncate" title="${esc(p.name)}">${esc(p.name)}</span>
-            <button type="button" class="pv2-prod-minus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="${esc(p.id)}" data-step="${p.packSize}">
-                <i class="fas fa-minus text-[9px]"></i>
-            </button>
-            <span class="pv2-prod-qty w-12 text-center text-[13px] font-semibold tabular-nums text-gray-800">${q} ${esc(u)}</span>
-            <button type="button" class="pv2-prod-plus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="${esc(p.id)}" data-step="${p.packSize}">
-                <i class="fas fa-plus text-[9px]"></i>
-            </button>
-        </div>`;
-    }).join('');
-
-    const genericRow = `<div class="flex items-center gap-1.5 py-1" data-product-row="_generic">
-        <span class="flex-1 text-[12px] text-gray-500 italic truncate">Nieokreślony</span>
-        <button type="button" class="pv2-prod-minus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="_generic" data-step="${pantryQtyStep(ingredientId)}">
-            <i class="fas fa-minus text-[9px]"></i>
-        </button>
-        <span class="pv2-prod-qty w-12 text-center text-[13px] font-semibold tabular-nums text-gray-800">${Math.round(generic)} ${esc(u)}</span>
-        <button type="button" class="pv2-prod-plus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="_generic" data-step="${pantryQtyStep(ingredientId)}">
-            <i class="fas fa-plus text-[9px]"></i>
-        </button>
-    </div>`;
-
     wrap.innerHTML = `
-    <div class="space-y-0.5 px-0.5">
+        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">${esc(label)}</p>
-        <p class="text-[9px] font-semibold uppercase tracking-wide text-gray-400 mb-1">Produkty</p>
+        <div class="grid grid-cols-4 gap-1.5">
-        ${rows}
+            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-        ${genericRow}
+                <p class="text-[15px] font-bold tabular-nums leading-tight" style="color:#ddd6ca;">${n.kcal}</p>
-    </div>`;
+                <p class="text-[9px] font-medium" style="color:#9b978f;">kcal</p>
+            </div>
+            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${n.protein}g</p>
+                <p class="text-[9px] font-medium" style="color:#9b978f;">białko</p>
+            </div>
+            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${n.fat}g</p>
+                <p class="text-[9px] font-medium" style="color:#9b978f;">tłuszcz</p>
+            </div>
+            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${n.carbs}g</p>
+                <p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
+            </div>
+        </div>`;
+}
 
-    // Bind product +/- buttons
+function renderCardStock(ingredientId, productId, pantry) {
-    wrap.querySelectorAll('.pv2-prod-plus, .pv2-prod-minus').forEach(btn => {
+    const wrap = document.getElementById('pv2-card-stock-section');
+    if (!wrap) return;
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    const u = unitLabel(def.pantryUnit);
+
+    let html = `<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>`;
+
+    if (productId) {
+        // Product card — show just this product's stock
+        const product = PRODUCTS[productId];
+        const pantryItems = getPantryProducts(ingredientId, pantry);
+        const qty = pantryItems.find(i => i.productId === productId)?.qty || 0;
+        const step = product?.packSize || pantryQtyStep(ingredientId);
+        html += `<div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2" style="background:#393937;">
+            <button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(productId)}" data-step="${step}" data-dir="-1"><i class="fas fa-minus text-xs"></i></button>
+            <span class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${Math.round(qty)} ${esc(u)}</span>
+            <button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(productId)}" data-step="${step}" data-dir="1"><i class="fas fa-plus text-xs"></i></button>
+        </div>`;
+    } else {
+        // Generic ingredient — simple +/-
+        const qty = getPantryTotal(ingredientId, pantry);
+        const step = pantryQtyStep(ingredientId);
+        html += `<div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2" style="background:#393937;">
+            <button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step="${step}" data-dir="-1"><i class="fas fa-minus text-xs"></i></button>
+            <span class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${Math.round(qty)} ${esc(u)}</span>
+            <button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step="${step}" data-dir="1"><i class="fas fa-plus text-xs"></i></button>
+        </div>`;
+    }
+
+    wrap.innerHTML = html;
+
+    wrap.querySelectorAll('.pv2-stock-btn').forEach(btn => {
         btn.addEventListener('click', () => {
             if (!editingId) return;
             const pid = btn.dataset.pid;
             const step = Number(btn.dataset.step) || 1;
-            const isPlus = btn.classList.contains('pv2-prod-plus');
+            const dir = Number(btn.dataset.dir);
-            const pantry = loadPantry();
+            const p = loadPantry();
-
             if (pid === '_generic') {
-                const cur = getPantryGeneric(editingId, pantry);
+                const cur = getPantryTotal(editingId, p);
-                const next = Math.max(0, cur + (isPlus ? step : -step));
+                setPantryQty(editingId, Math.max(0, cur + step * dir));
-                setPantryQty(editingId, next);
             } else {
-                const items = getPantryProducts(editingId, pantry);
+                const items = getPantryProducts(editingId, p);
                 const cur = items.find(i => i.productId === pid)?.qty || 0;
-                const next = Math.max(0, cur + (isPlus ? step : -step));
+                setPantryProductQty(editingId, pid, Math.max(0, cur + step * dir));
-                setPantryProductQty(editingId, pid, next);
             }
-
+            renderCardStock(editingId, editingProductId, loadPantry());
-            // Re-render breakdown and total
-            const freshPantry = loadPantry();
-            renderProductBreakdown(editingId, freshPantry);
-            const totalQty = getPantryTotal(editingId, freshPantry);
-            setEditQty(totalQty);
         });
     });
 }
 
-function renderNutritionInSheet(def) {
+function renderCardShop(ingredientId, productId) {
-    const wrap = document.getElementById('pv2-edit-nutrition');
+    const wrap = document.getElementById('pv2-card-shop-section');
     if (!wrap) return;
-    const n = def.nutritionPer100g;
+    const def = INGREDIENTS[ingredientId];
-    if (!n) { wrap.innerHTML = ''; return; }
+    if (!def) return;
+    const u = unitLabel(def.pantryUnit);
+    const product = productId ? PRODUCTS[productId] : null;
+    const packSize = product?.packSize || def.purchasePack?.amount;
+    const packLabel = product?.packLabel || def.purchasePack?.label;
+    const usesPacks = Boolean(packSize && packSize > 0);
+    const btnLabel = usesPacks ? `Dodaj na listę (${packLabel || `${packSize} ${u}`})` : 'Dodaj na listę';
 
-    const refLabel = def.pantryUnit === 'ml' ? '100 ml produktu' : '100 g produktu';
     wrap.innerHTML = `
-    <div class="text-[10px] leading-snug mt-0.5 pt-2 border-t border-gray-100 space-y-1">
+        <button type="button" id="pv2-card-add-list" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b;">
-        <p class="text-[9px] font-semibold uppercase tracking-wide text-gray-500 px-0.5">${esc(refLabel)}</p>
+            <i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}
-        <ul class="space-y-0 rounded-lg bg-white/70 px-2 py-1 ring-1 ring-gray-100/90">
+        </button>`;
-            ${nutritionListRow('Energia', `${n.kcal} kcal`)}
-            ${nutritionListRow('Białko', `${n.protein} g`)}
-            ${nutritionListRow('Tłuszcz', `${n.fat} g`)}
-            ${nutritionListRow('Węglowodany', `${n.carbs} g`)}
-        </ul>
-    </div>`;
-}
 
-function closeEditSheet() {
+    document.getElementById('pv2-card-add-list')?.addEventListener('click', () => {
-    editingId = null;
+        if (!editingId) return;
-    const bg = document.getElementById('pv2-edit-bg');
+        const d = INGREDIENTS[editingId];
-    const sheet = document.getElementById('pv2-edit-sheet');
+        if (!d) return;
-    if (sheet) sheet.style.transform = HIDDEN_Y;
+        const uLabel = unitLabel(d.pantryUnit);
-    if (bg) bg.classList.add('opacity-0');
+        const amt = usesPacks ? packSize : pantryQtyStep(editingId);
-    setTimeout(() => {
+        const note = usesPacks ? (packLabel || `${packSize} ${uLabel}`) : undefined;
-        bg?.classList.add('hidden');
-        sheet?.classList.add('hidden');
-    }, 300);
-    renderBoard();
-}
 
-function getEditQty() {
+        // Use addOrMergeShoppingLines to include productId
-    const el = document.getElementById('pv2-edit-qty');
+        const line = {
-    return Math.max(0, parseFloat(String(el?.value).replace(',', '.')) || 0);
+            ingredientId: editingId,
-}
+            amount: amt,
+            unit: uLabel,
+            name: product?.name || d.name,
+            category: d.category,
+            sourceNote: note || 'Ze spiżarni',
+        };
+        if (productId) line.productId = productId;
+        addOrMergeShoppingLines([line]);
 
-function setEditQty(v) {
+        showAppToast(`Dodano ${product?.name || d.name} na listę.`);
-    const el = document.getElementById('pv2-edit-qty');
+        window.refreshShopping?.();
-    if (el) el.value = String(Math.max(0, Math.round(v)));
+    });
-}
-
-function applyEditQty(newQty) {
-    if (!editingId) return;
-    const v = Math.max(0, Math.round(Number(newQty) * 1000) / 1000 || 0);
-    setPantryQty(editingId, v);
-    setEditQty(v);
-}
-
-function readShopQty() {
-    const el = document.getElementById('pv2-shop-qty');
-    return Math.max(1, Math.round(parseFloat(String(el?.value).replace(',', '.')) || 0));
-}
-
-function setShopQty(v) {
-    const el = document.getElementById('pv2-shop-qty');
-    if (el) el.value = String(Math.max(1, Math.round(Number(v))));
 }
 
 function bindEditSheet() {
-    document.getElementById('pv2-edit-bg')?.addEventListener('click', closeEditSheet);
+    document.getElementById('pv2-card-close')?.addEventListener('click', closeIngredientCard);
-
+    document.getElementById('pv2-card-overlay')?.addEventListener('click', (e) => {
-    document.getElementById('pv2-edit-minus')?.addEventListener('click', () => {
+        if (e.target.id === 'pv2-card-overlay') closeIngredientCard();
-        if (!editingId) return;
-        applyEditQty(Math.max(0, getEditQty() - pantryQtyStep(editingId)));
-    });
-
-    document.getElementById('pv2-edit-plus')?.addEventListener('click', () => {
-        if (!editingId) return;
-        applyEditQty(getEditQty() + pantryQtyStep(editingId));
-    });
-
-    document.getElementById('pv2-edit-qty')?.addEventListener('change', () => {
-        applyEditQty(getEditQty());
-    });
-
-    document.getElementById('pv2-shop-minus')?.addEventListener('click', () => {
-        setShopQty(Math.max(1, readShopQty() - editShopStep));
-    });
-
-    document.getElementById('pv2-shop-plus')?.addEventListener('click', () => {
-        setShopQty(readShopQty() + editShopStep);
-    });
-
-    document.getElementById('pv2-shop-qty')?.addEventListener('change', () => {
-        setShopQty(readShopQty());
-    });
-
-    document.getElementById('pv2-shop-add')?.addEventListener('click', () => {
-        if (!editingId) return;
-        const def = INGREDIENTS[editingId];
-        if (!def) return;
-        const count = readShopQty();
-        const u = unitLabel(def.pantryUnit);
-
-        if (editShopUsesPacks && def.purchasePack) {
-            const packAmt = def.purchasePack.amount;
-            const total = count * packAmt;
-            const note = `${count}× ${def.purchasePack.label || `${packAmt} ${u}`}`;
-            addIngredientToKitchenList(editingId, total, note);
-            showAppToast(`Dodano ${count} op. (${total} ${u}) na listę.`);
-        } else {
-            addIngredientToKitchenList(editingId, count);
-            showAppToast(`Dodano ${count} ${u} na listę.`);
-        }
-        window.refreshShopping?.();
     });
 }
 
@@ -540,15 +549,45 @@ export function refreshPantry() {
 }
 
 export function setupPantry() {
-    renderCategoryChips();
+    updateFilterBadge();
     renderBoard();
     bindEditSheet();
 
     document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
 
-    document.getElementById('pantry-stock-toggle')?.addEventListener('click', () => {
+    // Filter popup
+    document.getElementById('pantry-filter-btn')?.addEventListener('click', () => {
+        if (isFilterOpen()) closeFilterPopup(); else openFilterPopup();
+    });
+
+    document.getElementById('pantry-filter-overlay')?.addEventListener('click', (e) => {
+        if (e.target.id === 'pantry-filter-overlay') closeFilterPopup();
+    });
+
+    document.getElementById('pantry-filter-clear')?.addEventListener('click', () => {
+        selectedCategories.clear();
+        showOnlyStock = false;
+        renderFilterCategories();
+        renderFilterStockCheck();
+        updateFilterBadge();
+        renderBoard();
+    });
+
+    document.getElementById('pantry-filter-categories')?.addEventListener('click', (e) => {
+        const btn = e.target.closest('.pv2-filter-cat');
+        if (!btn) return;
+        const cat = btn.dataset.cat;
+        if (selectedCategories.has(cat)) selectedCategories.delete(cat);
+        else selectedCategories.add(cat);
+        renderFilterCategories();
+        updateFilterBadge();
+        renderBoard();
+    });
+
+    document.getElementById('pantry-filter-stock')?.addEventListener('click', () => {
         showOnlyStock = !showOnlyStock;
-        updateToggleVisuals();
+        renderFilterStockCheck();
+        updateFilterBadge();
         renderBoard();
     });
 

js/views/RecipeDetailV2.js

@@ -1,4 +1,4 @@
-import { RECIPES, INGREDIENTS } from '../data/catalog.js?v=6';
+import { RECIPES, INGREDIENTS } from '../data/catalog.js?v=8';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 
 function escapeHtml(s) {
@@ -217,12 +217,22 @@ function renderNutritionSummary(recipe) {
                     <div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
                         <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
                         <div class="flex-1 flex items-center">
-                            <div class="rounded-xl border px-3 py-2" style="background:#2f2f2d !important; border-color:#444442 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);">
+                            <div class="grid grid-cols-4 gap-1.5 w-full">
-                                <div class="grid grid-flow-col auto-cols-max gap-3 text-left">
+                                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                                    <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.kcal}</span><span class="text-[9px] text-gray-500">kcal</span></div>
+                                    <p class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">${total.kcal}</p>
-                                    <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.protein}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Białko</span></div>
+                                    <p class="text-[9px] text-gray-500 font-medium">kcal</p>
-                                    <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.carbs}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Węgle</span></div>
+                                </div>
-                                    <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.fat}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Tłuszcze</span></div>
+                                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                                    <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${total.protein}g</p>
+                                    <p class="text-[9px] text-gray-500 font-medium">białko</p>
+                                </div>
+                                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                                    <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${total.fat}g</p>
+                                    <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
+                                </div>
+                                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                                    <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${total.carbs}g</p>
+                                    <p class="text-[9px] text-gray-500 font-medium">węgl.</p>
                                 </div>
                             </div>
                         </div>

js/views/RecipeList.js

@@ -1,4 +1,4 @@
-import { RECIPES } from '../data/catalog.js?v=6';
+import { RECIPES } from '../data/catalog.js?v=8';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 
 function escapeHtml(s) {