Strona 4 - Pielęgnacja

/* ================================================================ MOBILE LAYOUT (md:hidden) PLPMobile linie 332-381 z pliku designu ================================================================ */ /* Nagłówek strony */ /* Liczba produktów + grid. pb-28 robi miejsce na sticky dolny pasek z filtrami. Brak sortowania i przełącznika widoku — na mobile zawsze grid. */ /* Grid 2 kolumny — mobile (zawsze grid) */ /* Załaduj więcej / dolny toolbar (paginacja) */ /* STICKY DOLNY PASEK — duży przycisk FILTRY (bez sortowania, bez widoku) */ /* Drawer filtrów — bezpośrednie dziecko #product-list-mobile (NIE w kontekście stackingu sticky-bara). z-[100] przebija badge marek/serca wishlisty na kartach (które są z-10 w root context, bo position:relative;z-auto NIE tworzy kontekstu). */ /* ================================================================ DESKTOP LAYOUT (hidden md:block) PLPDesktop linie 9-181 z pliku designu ================================================================ */ /* ── Heading + count — linie 15-23 ── */ /* ── Main grid: sidebar col-span-3 + product grid col-span-9 — linie 42-178 ── */ /* ── SIDEBAR (desktop) ── */ /* overflow-y-auto + max-height: sidebar wyższy niż ekran ma własny scroll, żeby dało się doscrollować do końca filtrów i do sticky przycisku "Filtruj" (sticky bottom-0 wymaga scrollującego rodzica). top-4 = 1rem, więc max-height = 100vh - 2rem (1rem góra + 1rem zapas na dole). max-height inline (nie klasa Tailwind), bo arbitralna klasa max-h-[calc(...)] nie jest w pre-buildowanym styles.css, a CI nie przebudowuje Tailwinda. */ /* ── PRODUCT GRID — linie 140-176 ── */ /* ── Sort bar + active filter chips + view mode + sort — linie 142-161 ── */