Add 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';

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,7 +14,7 @@ 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 { showAppToast } from './toast.js';
 import {
@@ -34,6 +34,115 @@ 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>
+        </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';
+    }
+
+    overlay.classList.remove('hidden');
+    overlay.style.pointerEvents = 'auto';
+}
+
+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 +194,8 @@ export function getMealPlanEditorHTML() {
                 </button>
             </div>
         </div>
-    </div>`;
+    </div>
+    ${getProductCardHTML()}`;
 }
 
 /* ── Setup ──────────────────────────────────────────── */
@@ -304,7 +414,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 +452,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 +536,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 +761,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 class="min-w-0">
+                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                                    <span id="planner-nutrition-p" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
+                                <p id="planner-nutrition-p" class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">—</p>
-                                    <span class="text-[9px] text-gray-500">Białko</span>
+                                <p class="text-[9px] text-gray-500 font-medium">białko</p>
                             </div>
-                                <div class="min-w-0">
+                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                                    <span id="planner-nutrition-c" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
+                                <p id="planner-nutrition-f" class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">—</p>
-                                    <span class="text-[9px] text-gray-500">Węgle</span>
+                                <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
-                                </div>
-                                <div class="min-w-0">
-                                    <span id="planner-nutrition-f" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</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 id="planner-nutrition-c" class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">—</p>
+                                <p class="text-[9px] text-gray-500 font-medium">węgl.</p>
                             </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,7 +5,7 @@ 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 { showAppToast } from '../ui/toast.js';
 
@@ -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">
-                    <input type="number" id="pv2-edit-qty" min="0" step="1" inputmode="decimal"
-                        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>
-                </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">
-                    <i class="fas fa-plus text-xs"></i>
                 </button>
             </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">
-                        <i class="fas fa-plus text-xs"></i>
-                    </button>
-                    <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">
-                        <i class="fas fa-cart-plus text-[9px] mr-1"></i>Dodaj
-                    </button>
-                </div>
-                <p id="pv2-shop-hint" class="text-[10px] text-gray-400 pl-[3.5rem]"></p>
         </div>
 
-            <div id="pv2-edit-nutrition" class="shrink-0"></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>
+            </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>
+                <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>
     </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,21 +225,34 @@ function getFilteredIds(searchRaw) {
     }).sort((a, b) => INGREDIENTS[a].name.localeCompare(INGREDIENTS[b].name, 'pl'));
 }
 
-function chipHtml(id, pantry) {
+function rowHtml(id, pantry) {
     const def = INGREDIENTS[id];
     const qty = getPantryTotal(id, pantry);
     const u = unitLabel(def.pantryUnit);
+    const hasStock = qty > 0;
+    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
+    const products = getProductsForIngredient(id);
+    const productCount = products.length;
 
-    if (qty > 0) {
+    const avatar = def.image
-        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)}">
+        ? `<img src="${esc(def.image)}" alt="" class="w-10 h-10 rounded-xl object-cover shrink-0">`
-            <span class="text-[13px] font-semibold text-gray-900 leading-tight whitespace-nowrap">${esc(def.name)}</span>
+        : `<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>`;
-            <span class="text-[11px] text-emerald-600 font-semibold tabular-nums leading-tight mt-0.5">${Math.round(qty)} ${esc(u)}</span>
-        </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)}">
+    const qtyColor = hasStock ? '#6ee7b7' : '#6d6c67';
-        <span class="text-[13px] font-medium text-gray-400 group-hover:text-gray-600 whitespace-nowrap transition-colors">${esc(def.name)}</span>
+    const qtyText = hasStock ? `${Math.round(qty)} ${esc(u)}` : `0 ${esc(u)}`;
-        <i class="fas fa-plus text-[8px] text-gray-300 group-hover:text-gray-500 ml-1.5 transition-colors"></i>
+
+    let meta = esc(categoryLabel(def.category));
+    if (productCount > 0) meta += ` · ${productCount} ${productCount === 1 ? 'produkt' : productCount < 5 ? 'produkty' : 'produktów'}`;
+
+    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};">${qtyText}</span>
+            </div>
+            <span class="text-[11px] block mt-0.5" style="color:#9b978f;">${meta}</span>
+        </div>
     </button>`;
 }
 
@@ -220,13 +283,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,41 +299,26 @@ 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 => rowHtml(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));
     });
 }
 
 /* ══════════════════════ 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) {
+function openIngredientCard(ingredientId) {
     const def = INGREDIENTS[ingredientId];
     if (!def) return;
     editingId = ingredientId;
@@ -278,257 +326,185 @@ function openEditSheet(ingredientId) {
     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
-    if (nameEl) nameEl.textContent = def.name;
+    const img = document.getElementById('pv2-card-img');
-
+    const fallback = document.getElementById('pv2-card-fallback');
-    const metaEl = document.getElementById('pv2-edit-meta');
+    const fallbackIcon = document.getElementById('pv2-card-fallback-icon');
-    if (metaEl) {
+    if (def.image) {
-        let meta = categoryLabel(def.category);
+        img.src = def.image; img.alt = def.name; img.classList.remove('hidden'); fallback.classList.add('hidden');
-        if (pack) meta += ` · ${pack.label || `${pack.amount} ${u}`}`;
-        metaEl.textContent = meta;
-    }
-
-    const qtyEl = document.getElementById('pv2-edit-qty');
-    if (qtyEl) qtyEl.value = qty > 0 ? String(Math.round(qty)) : '0';
-
-    const unitEl = document.getElementById('pv2-edit-unit');
-    if (unitEl) unitEl.textContent = u;
-
-    editShopUsesPacks = Boolean(pack && pack.amount > 0);
-    editShopStep = editShopUsesPacks ? 1 : step;
-
-    const shopQtyEl = document.getElementById('pv2-shop-qty');
-    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 = '';
+        img.classList.add('hidden'); fallback.classList.remove('hidden');
-        }
+        if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
     }
 
-    // Hide main +/- when products exist (total is sum of product rows)
+    // Header
-    const hasProds = ingredientHasProducts(ingredientId);
+    document.getElementById('pv2-card-category').textContent = categoryLabel(def.category);
-    const mainMinus = document.getElementById('pv2-edit-minus');
+    document.getElementById('pv2-card-name').textContent = def.name;
-    const mainPlus = document.getElementById('pv2-edit-plus');
+    const packEl = document.getElementById('pv2-card-pack');
-    const mainQtyInput = document.getElementById('pv2-edit-qty');
+    if (def.purchasePack) {
-    if (mainMinus) mainMinus.classList.toggle('hidden', hasProds);
+        packEl.textContent = def.purchasePack.label || `${def.purchasePack.amount} ${u}`;
-    if (mainPlus) mainPlus.classList.toggle('hidden', hasProds);
+        packEl.classList.remove('hidden');
-    if (mainQtyInput) mainQtyInput.readOnly = hasProds;
+    } else {
-
+        packEl.classList.add('hidden');
-    renderProductBreakdown(ingredientId, pantry);
-    renderNutritionInSheet(def);
-
-    const bg = document.getElementById('pv2-edit-bg');
-    const sheet = document.getElementById('pv2-edit-sheet');
-    if (!bg || !sheet) return;
-    bg.classList.remove('hidden');
-    sheet.classList.remove('hidden');
-    requestAnimationFrame(() => {
-        bg.classList.remove('opacity-0');
-        sheet.style.transform = 'translateY(0)';
-    });
     }
 
-function nutritionListRow(label, valueHtml) {
+    // Nutrition
-    return `<li class="flex items-baseline justify-between gap-3 py-0.5 border-b border-gray-100/80 last:border-0">
+    renderCardNutrition(def);
-        <span class="text-gray-500 shrink-0">${esc(label)}</span>
+
-        <span class="text-right font-semibold tabular-nums text-gray-800">${valueHtml}</span>
+    // Stock
-    </li>`;
+    renderCardStock(ingredientId, pantry);
+
+    // Shopping
+    renderCardShop(ingredientId);
+
+    // Show
+    const overlay = document.getElementById('pv2-card-overlay');
+    if (overlay) { overlay.classList.remove('hidden'); overlay.style.pointerEvents = 'auto'; }
 }
 
-function renderProductBreakdown(ingredientId, pantry) {
+function closeIngredientCard() {
-    const wrap = document.getElementById('pv2-product-breakdown');
+    const overlay = document.getElementById('pv2-card-overlay');
+    if (overlay) { overlay.classList.add('hidden'); overlay.style.pointerEvents = 'none'; }
+    editingId = null;
+    renderBoard();
+}
+
+function renderCardNutrition(def) {
+    const wrap = document.getElementById('pv2-card-nutrition');
     if (!wrap) return;
-    const products = getProductsForIngredient(ingredientId);
+    const n = 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';
+    wrap.innerHTML = `
+        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">${esc(label)}</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-[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>`;
+}
 
+function renderCardStock(ingredientId, pantry) {
+    const wrap = document.getElementById('pv2-card-stock-section');
+    if (!wrap) return;
     const def = INGREDIENTS[ingredientId];
+    if (!def) return;
     const u = unitLabel(def.pantryUnit);
+    const qty = getPantryTotal(ingredientId, pantry);
+    const products = getProductsForIngredient(ingredientId);
+    const hasProds = products.length > 0;
+
+    let html = `<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>`;
+
+    if (hasProds) {
         const pantryProducts = getPantryProducts(ingredientId, pantry);
         const generic = getPantryGeneric(ingredientId, pantry);
+        const productQty = (pid) => pantryProducts.find(i => i.productId === pid)?.qty || 0;
 
-    const productQty = (pid) => {
+        html += `<div class="rounded-xl px-3 py-2 space-y-1.5" style="background:#393937;">`;
-        const item = pantryProducts.find(i => i.productId === pid);
+        html += `<div class="flex items-center justify-between"><span class="text-[12px] font-semibold" style="color:#9b978f;">Łącznie</span><span class="text-[13px] font-bold tabular-nums" style="color:#6ee7b7;">${Math.round(qty)} ${esc(u)}</span></div>`;
-        return item ? item.qty : 0;
+        html += `<div style="border-top:1px solid #444442; padding-top:0.375rem;" class="space-y-1">`;
-    };
+        for (const p of products) {
-
-    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)}">
+            html += `<div class="flex items-center gap-1.5">
-            <span class="flex-1 text-[12px] text-gray-700 truncate" title="${esc(p.name)}">${esc(p.name)}</span>
+                <span class="flex-1 text-[12px] truncate" style="color:#d7d2c8;">${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}">
+                <button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(p.id)}" data-step="${p.packSize}" data-dir="-1"><i class="fas fa-minus text-[9px]"></i></button>
-                <i class="fas fa-minus text-[9px]"></i>
+                <span class="w-12 text-center text-[12px] font-semibold tabular-nums" style="color:#ddd6ca;">${q} ${esc(u)}</span>
-            </button>
+                <button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(p.id)}" data-step="${p.packSize}" data-dir="1"><i class="fas fa-plus 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('');
+        }
-
+        html += `<div class="flex items-center gap-1.5">
-    const genericRow = `<div class="flex items-center gap-1.5 py-1" data-product-row="_generic">
+            <span class="flex-1 text-[12px] italic truncate" style="color:#9b978f;">Nieokreślony</span>
-        <span class="flex-1 text-[12px] text-gray-500 italic truncate">Nieokreślony</span>
+            <button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step="${pantryQtyStep(ingredientId)}" data-dir="-1"><i class="fas fa-minus text-[9px]"></i></button>
-        <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)}">
+            <span class="w-12 text-center text-[12px] font-semibold tabular-nums" style="color:#ddd6ca;">${Math.round(generic)} ${esc(u)}</span>
-            <i class="fas fa-minus text-[9px]"></i>
+            <button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step="${pantryQtyStep(ingredientId)}" data-dir="1"><i class="fas fa-plus text-[9px]"></i></button>
-        </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>`;
-
+        html += `</div></div>`;
-    wrap.innerHTML = `
+    } else {
-    <div class="space-y-0.5 px-0.5">
+        const step = pantryQtyStep(ingredientId);
-        <p class="text-[9px] font-semibold uppercase tracking-wide text-gray-400 mb-1">Produkty</p>
+        html += `<div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2" style="background:#393937;">
-        ${rows}
+            <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>
-        ${genericRow}
+            <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>`;
+    }
 
-    // Bind product +/- buttons
+    wrap.innerHTML = html;
-    wrap.querySelectorAll('.pv2-prod-plus, .pv2-prod-minus').forEach(btn => {
+
+    // Bind stock buttons
+    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 = getPantryGeneric(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, 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) {
-    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 pack = def.purchasePack;
+    const usesPacks = Boolean(pack && pack.amount > 0);
+    const hint = usesPacks ? `1 opak. = ${pack.label || `${pack.amount} ${u}`}` : '';
 
-    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>Dodaj na listę${usesPacks ? ' (1 opak.)' : ''}
-        <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`)}
+        ${hint ? `<p class="text-[10px] text-center mt-1" style="color:#9b978f;">${esc(hint)}</p>` : ''}`;
-            ${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;
-    const bg = document.getElementById('pv2-edit-bg');
-    const sheet = document.getElementById('pv2-edit-sheet');
-    if (sheet) sheet.style.transform = HIDDEN_Y;
-    if (bg) bg.classList.add('opacity-0');
-    setTimeout(() => {
-        bg?.classList.add('hidden');
-        sheet?.classList.add('hidden');
-    }, 300);
-    renderBoard();
-}
-
-function getEditQty() {
-    const el = document.getElementById('pv2-edit-qty');
-    return Math.max(0, parseFloat(String(el?.value).replace(',', '.')) || 0);
-}
-
-function setEditQty(v) {
-    const el = document.getElementById('pv2-edit-qty');
-    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);
+        const d = INGREDIENTS[editingId];
-    setPantryQty(editingId, v);
+        if (!d) return;
-    setEditQty(v);
+        const uLabel = unitLabel(d.pantryUnit);
+        if (usesPacks && d.purchasePack) {
+            const amt = d.purchasePack.amount;
+            addIngredientToKitchenList(editingId, amt, d.purchasePack.label || `${amt} ${uLabel}`);
+            showAppToast(`Dodano 1 opak. na listę.`);
+        } else {
+            const step = pantryQtyStep(editingId);
+            addIngredientToKitchenList(editingId, step);
+            showAppToast(`Dodano ${step} ${uLabel} na listę.`);
         }
-
+        window.refreshShopping?.();
-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 +516,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) {