Reorganise pantry - in progress

js/views/Pantry.js

@@ -6,7 +6,15 @@ import {
     getProductsForIngredient,
     ingredientHasProducts,
 } from '../data/catalog.js?v=8';
-import { addIngredientToKitchenList, addOrMergeShoppingLines, categoryLabel, loadPantry, setPantryQty, setPantryProductQty, getPantryTotal, getPantryProducts } from '../services/pantryShopping.js?v=2';
+import {
+    addOrMergeShoppingLines,
+    categoryLabel,
+    loadPantry,
+    setPantryQty,
+    setPantryProductQty,
+    getPantryTotal,
+    getPantryProducts,
+} from '../services/pantryShopping.js?v=2';
 import { showAppToast } from '../ui/toast.js';
 
 /* ── helpers ── */
@@ -23,6 +31,66 @@ function normalizeSearch(q) {
     return String(q).trim().toLowerCase();
 }
 
+function formatQty(n) {
+    const rounded = Math.round((Number(n) || 0) * 10) / 10;
+    return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace(/\.0$/, '');
+}
+
+function formatQtyWithUnit(qty, unit) {
+    return `${formatQty(qty)} ${unitLabel(unit)}`;
+}
+
+function productCountLabel(count) {
+    if (count === 1) return '1 produkt';
+    const mod10 = count % 10;
+    const mod100 = count % 100;
+    if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return `${count} produkty`;
+    return `${count} produktów`;
+}
+
+function productCountShortLabel(count) {
+    return `${count} prod.`;
+}
+
+function nutritionForQty(def, qty, nutrition = def?.nutritionPer100g) {
+    if (!def || !nutrition || !Number.isFinite(qty) || qty <= 0) return null;
+    let grams = qty;
+    if (def.pantryUnit === 'szt' && def.weightPerPiece) grams = qty * def.weightPerPiece;
+    const f = grams / 100;
+    return {
+        kcal: Math.round(nutrition.kcal * f),
+        protein: Math.round(nutrition.protein * f * 10) / 10,
+        fat: Math.round(nutrition.fat * f * 10) / 10,
+        carbs: Math.round(nutrition.carbs * f * 10) / 10,
+    };
+}
+
+function macroLine(n) {
+    if (!n) return '';
+    return `${n.kcal} kcal · ${formatQty(n.protein)}g B · ${formatQty(n.fat)}g T · ${formatQty(n.carbs)}g W`;
+}
+
+function mediaHtml(image, icon, sizeClass = 'w-11 h-11', radiusClass = 'rounded-2xl') {
+    if (image) {
+        return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} object-cover shrink-0">`;
+    }
+    return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#8f8b84;"></i></div>`;
+}
+
+function compactMetaText(text, tone = 'default') {
+    const color = tone === 'success' ? '#6ee7b7' : tone === 'muted' ? '#9b978f' : '#d7d2c8';
+    return `<span class="text-[10px] font-medium" style="color:${color};">${esc(text)}</span>`;
+}
+
+function sortProductsByStock(products, pantryItems) {
+    return [...products].sort((a, b) => {
+        const aq = pantryItems.find((i) => i.productId === a.id)?.qty || 0;
+        const bq = pantryItems.find((i) => i.productId === b.id)?.qty || 0;
+        if (bq !== aq) return bq - aq;
+        return a.name.localeCompare(b.name, 'pl');
+    });
+}
+
 const CATEGORY_ICONS = {
     pieczywo: 'fa-bread-slice',
     nabial: 'fa-cheese',
@@ -38,16 +106,9 @@ const SEARCH_SHELL_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0
 
 /* ── state ── */
 
-let showOnlyStock = false;
 let editingId = null;
-/** @type {Set<string>} */
-const selectedCategories = new Set();
-
-let editShopStep = 1;
-let editShopUsesPacks = false;
-
-const BOTTOM = '5.25rem';
-const HIDDEN_Y = `translateY(calc(100% + ${BOTTOM}))`;
+let editingProductId = null;
+let cardCloseTimer = null;
 
 /* ══════════════════════ HTML SHELL ══════════════════════ */
 
@@ -59,32 +120,7 @@ export function getPantryHTML() {
         <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 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…"
-                    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;">
-                <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">
-                    <i class="fas fa-sliders-h"></i>
-                </button>
-            </div>
-        </div>
-
-        <!-- ── 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>
-                <div class="px-4 py-3 space-y-3 overflow-y-auto no-scrollbar" style="max-height:60vh;">
-                    <div>
-                        <p class="text-[10px] font-bold uppercase tracking-wider mb-2" style="color:#9b978f;">Kategorie</p>
-                        <div id="pantry-filter-categories" class="flex flex-wrap gap-1.5"></div>
-                    </div>
-                    <div style="border-top:1px solid #444442; padding-top:0.75rem;">
-                        <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;">
-                            <span class="text-[12px] font-semibold" style="color:#d7d2c8;">Tylko na stanie</span>
-                            <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>
-                        </button>
-                    </div>
-                </div>
+                    class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] px-8" style="background:transparent !important; border:none !important; box-shadow:none !important; color:#ddd6ca;">
             </div>
         </div>
 
@@ -94,14 +130,17 @@ export function getPantryHTML() {
         </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-overlay" class="absolute inset-0 z-[60] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5" style="pointer-events:none; background:rgba(0,0,0,0.5);">
+            <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; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;">
                 <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">
+                    <button type="button" id="pv2-card-back" class="absolute top-3 left-3 w-8 h-8 rounded-full hidden flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Wróć do składnika">
+                        <i class="fas fa-chevron-left text-sm"></i>
+                    </button>
+                    <button type="button" id="pv2-card-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Zamknij">
                         <i class="fas fa-times text-sm"></i>
                     </button>
                 </div>
@@ -109,10 +148,11 @@ export function getPantryHTML() {
                     <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>
+                        <p id="pv2-card-subtitle" 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-products-section"></div>
                     <div id="pv2-card-shop-section"></div>
                 </div>
             </div>
@@ -120,172 +160,63 @@ export function getPantryHTML() {
     </div>`;
 }
 
-/* ══════════════════════ FILTER POPUP ══════════════════════ */
-
-function allCategoryKeys() {
-    const s = new Set();
-    Object.values(INGREDIENTS).forEach(d => s.add(d.category));
-    return [...s].sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)));
-}
-
-let filterCloseTimer = null;
-
-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 bg = active ? '#23221e' : '#2f2f2d';
-        const border = active ? '#787876' : '#444442';
-        const text = active ? '#f2efe8' : '#d7d2c8';
-        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('');
-}
-
-function renderFilterStockCheck() {
-    const el = document.getElementById('pantry-filter-stock-check');
-    if (!el) return;
-    el.innerHTML = showOnlyStock ? '<i class="fas fa-check text-[10px]" style="color:#6ee7b7;"></i>' : '';
-    el.style.background = showOnlyStock ? '#23221e' : 'transparent';
-    el.style.borderColor = showOnlyStock ? '#787876' : '#56534f';
-}
-
-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) {
     const q = normalizeSearch(searchRaw);
-    return Object.keys(INGREDIENTS).filter(id => {
+    return Object.keys(INGREDIENTS).filter((id) => {
         const d = INGREDIENTS[id];
-        if (selectedCategories.size > 0 && !selectedCategories.has(d.category)) return false;
         if (!q) return true;
         return d.name.toLowerCase().includes(q) || (CATEGORY_LABELS[d.category] || '').toLowerCase().includes(q);
     }).sort((a, b) => INGREDIENTS[a].name.localeCompare(INGREDIENTS[b].name, 'pl'));
 }
 
+function getCategoryItemLabel(count) {
+    if (count === 1) return 'składnik';
+    const mod10 = count % 10;
+    const mod100 = count % 100;
+    if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return 'składniki';
+    return 'składników';
+}
+
 function ingredientRowHtml(id, pantry) {
     const def = INGREDIENTS[id];
-    const products = getProductsForIngredient(id);
     const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
-    const u = unitLabel(def.pantryUnit);
+    const qty = getPantryTotal(id, pantry);
+    const hasProducts = ingredientHasProducts(id);
+    const products = hasProducts ? getProductsForIngredient(id) : [];
+    const pantryItems = hasProducts ? getPantryProducts(id, pantry) : [];
+    const stockedCount = pantryItems.filter((i) => i.qty > 0).length;
+    const hasStock = qty > 0;
+    const accent = hasStock ? '#6ee7b7' : '#4b4a46';
+    const qtyColor = hasStock ? '#6ee7b7' : '#d7d2c8';
+    const subtitle = hasProducts
+        ? `${stockedCount}/${products.length} produktów`
+        : categoryLabel(def.category);
+    const status = hasProducts
+        ? (stockedCount === 0 ? 'wybierz produkt' : stockedCount === products.length ? 'wszystko na stanie' : 'częściowo na stanie')
+        : (hasStock ? 'na stanie' : 'brak');
+    const badgeText = hasProducts ? productCountShortLabel(products.length) : unitLabel(def.pantryUnit);
 
-    if (products.length === 0) {
-        // Simple row — no products
-        const qty = getPantryTotal(id, pantry);
-        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>
+    return `<button type="button" class="pv2-chip shrink-0 w-[9.5rem] rounded-2xl px-3 py-2.5 text-left transition-colors active:scale-[0.99]" style="background:#393937; border:1px solid #444442; box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);" data-id="${esc(id)}">
+        <div class="w-full h-1 rounded-full mb-2" style="background:${accent}; opacity:${hasStock ? '1' : '0.45'};"></div>
+        <div class="flex items-start gap-2">
+            ${mediaHtml(def.image, icon, 'w-8 h-8', 'rounded-lg')}
+            <div class="min-w-0 flex-1">
+                <span class="block text-[12px] font-semibold leading-[1.2] overflow-hidden" style="color:#ddd6ca; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">
+                    ${esc(def.name)}
+                </span>
+                <span class="block text-[10px] mt-0.5 truncate" style="color:#9b978f;">${esc(subtitle)}</span>
             </div>
-        </button>`;
-    }
-
-    // Group — ingredient header + product rows
-    const totalQty = getPantryTotal(id, pantry);
-    const pantryItems = getPantryProducts(id, pantry);
-    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>
+        <div class="mt-3">
+            <div class="flex items-end justify-between gap-2">
+                <span class="text-[14px] font-bold tabular-nums leading-none block" style="color:${qtyColor};">${esc(formatQtyWithUnit(qty, def.pantryUnit))}</span>
+                <span class="inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-semibold shrink-0" style="background:#2f2f2d; color:#9b978f;">${esc(badgeText)}</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;
+            <span class="text-[10px] block mt-1" style="color:#9b978f;">${esc(status)}</span>
+        </div>
+    </button>`;
 }
 
 function groupByCategory(ids) {
@@ -298,7 +229,7 @@ function groupByCategory(ids) {
     }
     return [...groups.keys()]
         .sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)))
-        .map(cat => ({ cat, ids: groups.get(cat) }));
+        .map((cat) => ({ cat, ids: groups.get(cat) }));
 }
 
 function renderBoard() {
@@ -307,133 +238,133 @@ function renderBoard() {
 
     const q = document.getElementById('pantry-search')?.value || '';
     const pantry = loadPantry();
-    const allFiltered = getFilteredIds(q);
-    const visible = showOnlyStock
-        ? allFiltered.filter(id => getPantryTotal(id, pantry) > 0)
-        : allFiltered;
+    const visible = getFilteredIds(q);
 
     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 flex items-center justify-center mb-4" style="background:#393937;">
-                    <i class="fas fa-box-open text-2xl" style="color:#6d6c67;"></i>
-                </div>
-                <p class="text-sm font-semibold" style="color:#ddd6ca;">Nic na stanie</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-center py-10" style="color:#9b978f;">Brak wyników — zmień wyszukiwanie lub filtry.</p>`;
+        root.innerHTML = `<p class="text-sm text-center py-10" style="color:#9b978f;">Brak wyników — zmień wyszukiwanie.</p>`;
         return;
     }
 
     const groups = groupByCategory(visible);
-    let html = '';
-    for (const { cat, ids } of groups) {
+    root.innerHTML = groups.map(({ cat, ids }) => {
         const icon = CATEGORY_ICONS[cat] || 'fa-jar';
-        html += `
-        <div class="mb-4 last:mb-0">
-            <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="space-y-2">${ids.map(id => ingredientRowHtml(id, pantry)).join('')}</div>
-        </div>`;
-    }
+        return `
+        <section class="mb-4 last:mb-0">
+            <div class="flex items-center justify-between gap-3 mb-2 px-0.5">
+                <div class="min-w-0">
+                    <p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">
+                        <i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))}
+                    </p>
+                    <p class="text-[10px] mt-1" style="color:#6d6c67;">${ids.length} ${getCategoryItemLabel(ids.length)}</p>
+                </div>
+                <span class="text-[10px] shrink-0" style="color:#6d6c67;">przesuń w bok</span>
+            </div>
+            <div class="overflow-x-auto no-scrollbar -mx-4 px-4">
+                <div class="flex gap-2.5 pb-1">
+                    ${ids.map((rowId) => ingredientRowHtml(rowId, pantry)).join('')}
+                </div>
+            </div>
+        </section>`;
+    }).join('');
 
-    root.innerHTML = html;
-
-    root.querySelectorAll('.pv2-chip').forEach(btn => {
+    root.querySelectorAll('.pv2-chip').forEach((btn) => {
         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 ══════════════════════ */
+/* ══════════════════════ INGREDIENT SHEET ══════════════════════ */
 
-
-/* ══════════════════════ INGREDIENT CARD ══════════════════════ */
-
-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 u = unitLabel(def.pantryUnit);
+function renderCardHeader(def, product, pantry) {
+    const hasProducts = ingredientHasProducts(def.id);
     const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
-
-    // Hero image — product image > ingredient image > fallback
     const image = product?.image || def.image;
     const img = document.getElementById('pv2-card-img');
     const fallback = document.getElementById('pv2-card-fallback');
     const fallbackIcon = document.getElementById('pv2-card-fallback-icon');
-    if (image) {
-        img.src = image; img.alt = product?.name || def.name; img.classList.remove('hidden'); fallback.classList.add('hidden');
-    } else {
-        img.classList.add('hidden'); fallback.classList.remove('hidden');
-        if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
+    if (img && fallback) {
+        if (image) {
+            img.src = image;
+            img.alt = product?.name || def.name;
+            img.classList.remove('hidden');
+            fallback.classList.add('hidden');
+        } else {
+            img.classList.add('hidden');
+            fallback.classList.remove('hidden');
+            if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
+        }
     }
 
-    // Header — show product info or ingredient info
-    document.getElementById('pv2-card-category').textContent = product?.brand || categoryLabel(def.category);
-    document.getElementById('pv2-card-name').textContent = product?.name || def.name;
-    const packEl = document.getElementById('pv2-card-pack');
-    const packLabel = product?.packLabel || def.purchasePack?.label;
-    if (packLabel) {
-        packEl.textContent = packLabel;
-        packEl.classList.remove('hidden');
-    } else {
-        packEl.classList.add('hidden');
+    const totalQty = getPantryTotal(def.id, pantry);
+    const productQty = product
+        ? (getPantryProducts(def.id, pantry).find((i) => i.productId === product.id)?.qty || 0)
+        : totalQty;
+    const stockNut = nutritionForQty(def, productQty, product?.nutritionPer100g || def.nutritionPer100g);
+
+    const categoryEl = document.getElementById('pv2-card-category');
+    const nameEl = document.getElementById('pv2-card-name');
+    const subtitleEl = document.getElementById('pv2-card-subtitle');
+    const backBtn = document.getElementById('pv2-card-back');
+
+    if (categoryEl) categoryEl.textContent = product?.brand || categoryLabel(def.category);
+    if (nameEl) nameEl.textContent = product?.name || def.name;
+
+    if (subtitleEl) {
+        let subtitle = '';
+        if (product) {
+            subtitle = [def.name, product.packLabel].filter(Boolean).join(' • ');
+        } else if (hasProducts) {
+            subtitle = `${productCountLabel(getProductsForIngredient(def.id).length)} • ${formatQtyWithUnit(totalQty, def.pantryUnit)} na stanie`;
+        } else if (def.purchasePack?.label) {
+            subtitle = def.purchasePack.label;
+        }
+
+        if (subtitle) {
+            subtitleEl.textContent = subtitle;
+            subtitleEl.classList.remove('hidden');
+        } else {
+            subtitleEl.classList.add('hidden');
+        }
     }
 
-    // Nutrition — use product values if available
-    renderCardNutrition(def, product);
-
-    // Stock
-    renderCardStock(ingredientId, editingProductId, pantry);
-
-    // Shopping
-    renderCardShop(ingredientId, editingProductId);
-
-    // Show
-    const overlay = document.getElementById('pv2-card-overlay');
-    if (overlay) { overlay.classList.remove('hidden'); overlay.style.pointerEvents = 'auto'; }
-}
-
-function closeIngredientCard() {
-    const overlay = document.getElementById('pv2-card-overlay');
-    if (overlay) { overlay.classList.add('hidden'); overlay.style.pointerEvents = 'none'; }
-    editingId = null;
-    renderBoard();
+    if (backBtn) {
+        backBtn.classList.toggle('hidden', !(hasProducts && product));
+    }
 }
 
 function renderCardNutrition(def, product) {
     const wrap = document.getElementById('pv2-card-nutrition');
     if (!wrap) return;
     const n = product?.nutritionPer100g || def.nutritionPer100g;
-    if (!n) { wrap.innerHTML = ''; return; }
-    const label = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
+    if (!n) {
+        wrap.innerHTML = '';
+        return;
+    }
+    const hasProducts = ingredientHasProducts(def.id);
+    const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
+    const hint = product
+        ? 'dokładne dla produktu'
+        : hasProducts
+            ? 'orientacyjnie dla składnika'
+            : 'bazowe wartości';
+
     wrap.innerHTML = `
-        <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 mb-1.5" style="color:#9b978f;">Wartości odżywcze</p>
+        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(unitScope)} • ${esc(hint)}</p>
         <div class="grid grid-cols-4 gap-1.5">
             <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
                 <p class="text-[15px] font-bold tabular-nums leading-tight" style="color:#ddd6ca;">${n.kcal}</p>
                 <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-[15px] font-bold text-blue-400 tabular-nums leading-tight">${formatQty(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-[15px] font-bold text-amber-400 tabular-nums leading-tight">${formatQty(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-[15px] font-bold text-orange-400 tabular-nums leading-tight">${formatQty(n.carbs)}g</p>
                 <p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
             </div>
         </div>`;
@@ -444,50 +375,120 @@ function renderCardStock(ingredientId, productId, pantry) {
     if (!wrap) return;
     const def = INGREDIENTS[ingredientId];
     if (!def) return;
+
+    const hasProducts = ingredientHasProducts(ingredientId);
+    const product = productId ? PRODUCTS[productId] : null;
+    const totalQty = getPantryTotal(ingredientId, pantry);
     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>`;
+    if (hasProducts && !product) {
+        const stockedCount = getPantryProducts(ingredientId, pantry).filter((i) => i.qty > 0).length;
+        const summaryNutrition = nutritionForQty(def, totalQty);
+        wrap.innerHTML = `
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
+            <div class="rounded-xl px-3 py-2.5" style="background:#393937;">
+                <div class="flex items-center justify-between gap-3">
+                    <div>
+                        <p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(totalQty))} ${esc(u)}</p>
+                        <p class="text-[11px] mt-0.5" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(ingredientId).length} produktów ma stan</p>
+                    </div>
+                    <span class="text-[10px] text-right max-w-[92px]" style="color:#9b978f;">Wybierz produkt niżej, aby zmienić stan</span>
+                </div>
+                ${summaryNutrition ? `<p class="text-[10px] mt-2 tabular-nums" style="color:#9b978f;">${esc(macroLine(summaryNutrition))}</p>` : ''}
+            </div>`;
+        return;
     }
 
-    wrap.innerHTML = html;
+    const qty = product
+        ? (getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0)
+        : totalQty;
+    const step = product ? (product.packSize || pantryQtyStep(ingredientId)) : pantryQtyStep(ingredientId);
+    const stockNut = nutritionForQty(def, qty, product?.nutritionPer100g || def.nutritionPer100g);
 
-    wrap.querySelectorAll('.pv2-stock-btn').forEach(btn => {
+    wrap.innerHTML = `
+        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
+        <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 || '_generic')}" data-step="${step}" data-dir="-1" aria-label="Zmniejsz stan">
+                <i class="fas fa-minus text-xs"></i>
+            </button>
+            <div class="flex-1 text-center">
+                <p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(qty))} ${esc(u)}</p>
+                <p class="text-[10px] mt-0.5" style="color:#9b978f;">Krok: ${esc(formatQty(step))} ${esc(u)}</p>
+            </div>
+            <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 || '_generic')}" data-step="${step}" data-dir="1" aria-label="Zwiększ stan">
+                <i class="fas fa-plus text-xs"></i>
+            </button>
+        </div>
+        ${stockNut ? `<p class="text-[10px] mt-1.5 tabular-nums" style="color:#9b978f;">${esc(macroLine(stockNut))} na stanie</p>` : ''}`;
+
+    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 dir = Number(btn.dataset.dir);
-            const p = loadPantry();
+            const stepVal = Number(btn.dataset.step) || 1;
+            const dir = Number(btn.dataset.dir) || 1;
+            const currentPantry = loadPantry();
             if (pid === '_generic') {
-                const cur = getPantryTotal(editingId, p);
-                setPantryQty(editingId, Math.max(0, cur + step * dir));
+                const cur = getPantryTotal(editingId, currentPantry);
+                setPantryQty(editingId, Math.max(0, cur + stepVal * dir));
             } else {
-                const items = getPantryProducts(editingId, p);
-                const cur = items.find(i => i.productId === pid)?.qty || 0;
-                setPantryProductQty(editingId, pid, Math.max(0, cur + step * dir));
+                const items = getPantryProducts(editingId, currentPantry);
+                const cur = items.find((i) => i.productId === pid)?.qty || 0;
+                setPantryProductQty(editingId, pid, Math.max(0, cur + stepVal * dir));
             }
-            renderCardStock(editingId, editingProductId, loadPantry());
+            renderBoard();
+            renderIngredientCard();
+        });
+    });
+}
+
+function productSwitcherRowHtml(ingredientId, productId, pantry, selectedProductId) {
+    const def = INGREDIENTS[ingredientId];
+    const product = PRODUCTS[productId];
+    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
+    const qty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
+    const isSelected = selectedProductId === productId;
+    return `<button type="button" class="pv2-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:${isSelected ? '#23221e' : '#393937'}; border:${isSelected ? '1px solid #787876' : '1px solid transparent'};" data-product-id="${esc(productId)}">
+        ${mediaHtml(product.image || def.image, icon, 'w-9 h-9', 'rounded-lg')}
+        <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+                <span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
+                <span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${qty > 0 ? '#ddd6ca' : '#6d6c67'};">${esc(formatQty(qty))} ${esc(unitLabel(def.pantryUnit))}</span>
+            </div>
+            <div class="flex items-center gap-2 mt-0.5">
+                ${compactMetaText(product.packLabel || '', 'muted')}
+                ${isSelected ? compactMetaText('wybrany', 'success') : ''}
+            </div>
+        </div>
+        <i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
+    </button>`;
+}
+
+function renderCardProducts(ingredientId, productId, pantry) {
+    const wrap = document.getElementById('pv2-card-products-section');
+    if (!wrap) return;
+    if (!ingredientHasProducts(ingredientId)) {
+        wrap.innerHTML = '';
+        return;
+    }
+
+    const products = sortProductsByStock(getProductsForIngredient(ingredientId), getPantryProducts(ingredientId, pantry));
+    const title = 'Produkty';
+    const subtitle = productId
+        ? 'Wróć lub wybierz inny wariant.'
+        : 'Wybierz wariant, aby zobaczyć szczegóły.';
+
+    wrap.innerHTML = `
+        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">${esc(title)}</p>
+        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
+        <div class="space-y-1.5">
+            ${products.map((p) => productSwitcherRowHtml(ingredientId, p.id, pantry, productId)).join('')}
+        </div>`;
+
+    wrap.querySelectorAll('.pv2-card-product-row').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            editingProductId = btn.dataset.productId || null;
+            renderIngredientCard();
         });
     });
 }
@@ -497,14 +498,24 @@ function renderCardShop(ingredientId, productId) {
     if (!wrap) return;
     const def = INGREDIENTS[ingredientId];
     if (!def) return;
-    const u = unitLabel(def.pantryUnit);
+
+    const hasProducts = ingredientHasProducts(ingredientId);
     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 btnLabel = usesPacks
+        ? `Dodaj na listę (${packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`})`
+        : 'Dodaj na listę';
+    const helperText = hasProducts && !product
+        ? 'Doda składnik bez wskazanej marki. Jeśli chcesz konkretny produkt, wybierz go wyżej.'
+        : product
+            ? 'Pozycja trafi na listę zakupów z dokładnym produktem.'
+            : 'Szybki skrót do listy zakupów ze spiżarni.';
 
     wrap.innerHTML = `
+        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
+        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(helperText)}</p>
         <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;">
             <i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}
         </button>`;
@@ -515,9 +526,7 @@ function renderCardShop(ingredientId, productId) {
         if (!d) return;
         const uLabel = unitLabel(d.pantryUnit);
         const amt = usesPacks ? packSize : pantryQtyStep(editingId);
-        const note = usesPacks ? (packLabel || `${packSize} ${uLabel}`) : undefined;
-
-        // Use addOrMergeShoppingLines to include productId
+        const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${uLabel}`) : undefined;
         const line = {
             ingredientId: editingId,
             amount: amt,
@@ -528,14 +537,66 @@ function renderCardShop(ingredientId, productId) {
         };
         if (productId) line.productId = productId;
         addOrMergeShoppingLines([line]);
-
         showAppToast(`Dodano ${product?.name || d.name} na listę.`);
         window.refreshShopping?.();
     });
 }
 
+function renderIngredientCard() {
+    if (!editingId) return;
+    const def = INGREDIENTS[editingId];
+    if (!def) return;
+    const product = editingProductId ? PRODUCTS[editingProductId] : null;
+    const pantry = loadPantry();
+
+    renderCardHeader(def, product, pantry);
+    renderCardNutrition(def, product);
+    renderCardStock(editingId, editingProductId, pantry);
+    renderCardProducts(editingId, editingProductId, pantry);
+    renderCardShop(editingId, editingProductId);
+}
+
+function openIngredientCard(ingredientId, productId) {
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    editingId = ingredientId;
+    editingProductId = productId && PRODUCTS[productId] ? productId : null;
+    renderIngredientCard();
+
+    const overlay = document.getElementById('pv2-card-overlay');
+    const card = document.getElementById('pv2-card');
+    if (!overlay || !card) return;
+    clearTimeout(cardCloseTimer);
+    overlay.classList.remove('hidden');
+    overlay.style.pointerEvents = 'auto';
+    requestAnimationFrame(() => {
+        overlay.classList.add('opacity-100');
+        card.style.opacity = '1';
+        card.style.transform = 'translateY(0)';
+    });
+}
+
+function closeIngredientCard() {
+    const overlay = document.getElementById('pv2-card-overlay');
+    const card = document.getElementById('pv2-card');
+    if (overlay && card) {
+        overlay.classList.remove('opacity-100');
+        overlay.style.pointerEvents = 'none';
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(1.5rem)';
+        cardCloseTimer = setTimeout(() => overlay.classList.add('hidden'), 220);
+    }
+    editingId = null;
+    editingProductId = null;
+    renderBoard();
+}
+
 function bindEditSheet() {
     document.getElementById('pv2-card-close')?.addEventListener('click', closeIngredientCard);
+    document.getElementById('pv2-card-back')?.addEventListener('click', () => {
+        editingProductId = null;
+        renderIngredientCard();
+    });
     document.getElementById('pv2-card-overlay')?.addEventListener('click', (e) => {
         if (e.target.id === 'pv2-card-overlay') closeIngredientCard();
     });
@@ -544,52 +605,15 @@ function bindEditSheet() {
 /* ══════════════════════ PUBLIC API ══════════════════════ */
 
 export function refreshPantry() {
-    renderCategoryChips();
     renderBoard();
+    if (editingId) renderIngredientCard();
 }
 
 export function setupPantry() {
-    updateFilterBadge();
     renderBoard();
     bindEditSheet();
 
     document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
 
-    // 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;
-        renderFilterStockCheck();
-        updateFilterBadge();
-        renderBoard();
-    });
-
     window.refreshPantry = refreshPantry;
 }