/* v84-layout-fixes.css — 2026-08-27 * ========================================================================== * Poprawki ukladu wylapane POMIAREM GEOMETRII (nie na oko) na pieciu typach * stron: strona glowna, /sklep/, kategoria, marka, wpis na blogu — w widokach * 375 px, 470 px, 760 px i 1512 px. * * Plik jest linkowany jako OSTATNI arkusz w (wp_head 10002, patrz * core/v84-layout-fixes.php). Dla wiekszosci regul wystarcza sama kolejnosc. * Tam, gdzie regula zrodlowa ma !important, dokladamy !important; a tam, gdzie * ma jeszcze wyzsza specyficznosc (sekcja 3), selektor jest celowo podbity — * kazdy taki przypadek jest opisany na miejscu razem z pomiarem. * * NIE laczyc tego pliku z innymi arkuszami i nie przenosic do * wp_enqueue_style — trafilby na wp_head:8, czyli PRZED CSS motywu. * ========================================================================== */ /* ── 1. PAGINACJA: pierwsza strona i strzalka "dalej" poza ekranem ───────── * Zmierzone na /marka/piusi/ przy szerokosci 375 px: * ul.page-numbers -> display:flex, flex-wrap:nowrap, overflow:visible * kontener 355 px, a zawartosc 416 px * pozycja "1" -> od -50 do -6 px (poza ekranem z LEWEJ) * strzalka "dalej" -> od 382 do 426 px (poza ekranem z PRAWEJ) * Body nie ma przewijania poziomego, wiec obie pozycje byly NIEKLIKALNE. * Dotyczy kazdego listingu z paginacja: sklepu, 698 kategorii i marek. * Zawijamy do drugiego rzedu zamiast przycinac. */ .woocommerce-pagination ul.page-numbers, nav.woocommerce-pagination ul, .hbt-pagination ul.page-numbers, ul.page-numbers { flex-wrap: wrap !important; justify-content: center !important; row-gap: 6px !important; } /* ── 2. WPIS: obraz wyrozniajacy wychodzil poza artykul ──────────────────── * Ujemny margines .hbt-post-featured ma zdejmowac dokladnie padding artykulu * — nic ponadto. Nie zgadzal sie na zadnym progu (zmierzone): * 1512 px: padding 24 px, margines -44 px -> wystaje 20 px * 760 px: padding 0 px, margines -22 px -> wystaje 21 px * 470 px: padding 0 px, margines -16 px -> wystaje 15 px * Przy 375 px obraz siegal od -5 do 380 px, czyli 5 px obcietych z KAZDEJ * strony ekranu. Ponizej 768 px artykul nie ma paddingu, wiec i ujemnego * marginesu byc nie powinno. */ .hbt-post-featured { margin-left: -24px !important; margin-right: -24px !important; } @media (max-width: 768px) { .hbt-post-featured { margin-left: 0 !important; margin-right: 0 !important; } } /* ── 3. Zwijane opisy: obciecie trafialo w POLOWE wiersza ────────────────── * Przyczyna: max-height liczony byl z metryki OPAKOWANIA (14 px / 23,1 px), * a tekst renderuje sie w akapitach w srodku (17 px / 26,35 px). Zmierzone: * marka, 1512 px: limit 69,3 px, trzy realne wiersze = 79,05 px -> 2,63 * marka, 375 px: limit 48 px, wiersz 21,7 px -> 2,21 * kategoria: limit 48 px, wiersz 21,7 px -> 2,21 * hero glownej: limit 39 px, wiersz 18,2 px -> 2,14 * Ulamek na koncu = wiersz przeciety w poziomie, dokladnie to, co widac. * * Do tego na .hbt-hero-uni-desc--collapsed konkurowalo SZESC regul max-height * (4x legacy-main.css, 2x shop-fixes.css) — kazda z inna liczba. * * line-clamp liczy PRAWDZIWE wiersze, wiec ciecie zawsze trafia w granice * miedzy nimi, niezaleznie od tego, jaki font ma element w srodku. * * UWAGA co do selektora: sama kolejnosc w tu NIE wystarcza, bo reguly * zrodlowe maja !important i wyzsza specyficznosc. Zmierzone przy pierwszej * probie — moje (0,2,0) przegrywalo z: * section.hbt-hero-uni .hbt-hero-uni-desc (0,2,1) legacy-main * html body[class] section.hbt-brand-hero .hbt-... (0,4,2) shop-fixes * Skutek byl taki, ze line-clamp sie ustawial, ale display zostawal flow-root, * wiec clamp nic nie robil, a max-height dalej ciela w polowie wiersza. * Stad html body[class][class] — (0,5,3), ponad wszystkim powyzej. */ html body[class][class] .hbt-hero-uni-desc.hbt-hero-uni-desc--collapsed, html body[class][class] section .hbt-hero-uni-desc.hbt-hero-uni-desc--collapsed { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; max-height: none !important; overflow: hidden !important; /* Gradient zanikania ZDJETY. Miał ukrywać to, że obciecie wypada w polowie * wiersza — po przejsciu na line-clamp nie ma juz czego ukrywac, a sam * gradient zjadal czytelna czesc ostatniego wiersza: przy dwuwierszowym * boxie 43 px zanik od 86% to dolne 6 px z wiersza wysokiego na 21,7 px, * czyli 28% ostatniej linii. Na zrzucie z /filtry/ wygladalo to dokladnie * tak samo jak stary blad. Zamiast tego zostaje wielokropek dodawany przez * line-clamp plus przycisk "Pokaz wiecej" tuz pod spodem. */ -webkit-mask-image: none !important; mask-image: none !important; } @media (max-width: 600px) { html body[class][class] .hbt-hero-uni-desc.hbt-hero-uni-desc--collapsed, html body[class][class] section .hbt-hero-uni-desc.hbt-hero-uni-desc--collapsed { -webkit-line-clamp: 2; line-clamp: 2; } } /* Nakladka zanikania ZDJETA — to ona, a nie maska, robila wrazenie ucietego * tekstu. Zmierzone na /filtry/ przy 375 px: .hbt-hero-uni-desc::after to * absolutnie pozycjonowany gradient wysoki na 28 px, przypiety do bottom:0, * w boksie majacym 43,4 px — czyli przykrywal 65% boksu i CALA druga linie * (23-42 px). Przy trzech wierszach na desktopie zjadal wiekszosc trzeciej. * Sens mial dopoki obciecie wypadalo w polowie wiersza; po line-clamp linia * konczy sie rowno, a o dalszym ciagu informuje wielokropek i przycisk * "Pokaz wiecej" pod spodem. UWAGA: to INNY ::after niz gradient listy chipow * marki w sekcji 4 — tam nakladke celowo WYDLUZAMY, bo rzedow chipow nie da * sie obciac po wierszach. */ html body[class][class] .hbt-hero-uni-desc.hbt-hero-uni-desc--collapsed::after, html body[class][class] section .hbt-hero-uni-desc.hbt-hero-uni-desc--collapsed::after { content: none !important; } html body[class][class] .hbt-hero-uni-desc.hbt-hero-uni-desc--expanded, html body[class][class] section .hbt-hero-uni-desc.hbt-hero-uni-desc--expanded { display: block !important; -webkit-line-clamp: none; line-clamp: none; max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; } /* ── 4. Marka: lista kategorii ucinana w polowie rzedu chipow ────────────── * Zmierzone na /marka/piusi/ przy 1512 px: * rzad 1: 0 -> 39 px * rzad 2: 47 -> 86 px * rzad 3: 94 -> 133 px, a limit stoi na 120 px * czyli trzeci rzad pokazywal sie w 26 z 39 px i byl ucinany w poziomie. * Chipy maja rozne wysokosci (etykiety lamia sie na dwie linie), wiec nie da * sie tego domknac sztywna liczba pikseli na kazdym progu. Zamiast zgadywac * — wydluzamy istniejacy gradient ::after tak, zeby przykryl caly czesciowo * widoczny rzad. Wtedy niepelny rzad czyta sie jako "jest tego wiecej", * a nie jako uciety tekst. */ section.hbt-brand-cats.hbt-collapsible .hbt-brand-cats-list.hbt-collapsible-body::after { height: 56px !important; } /* ── 5. Ikona + tekst w pigulce GPSR ─────────────────────────────────────── * Pigulka jest flexem w wierszu z align-items:center, ale ikona ma wlasny * line-height, przez co przy zawinieciu etykiety do drugiej linii srodki * ikony i tekstu rozjezdzaly sie (zmierzone 71,9 px na /marka/piusi/). * Wyrownanie do pierwszej linii tekstu zamiast do srodka calego bloku. */ .hbt-brand-pill { align-items: center !important; } .hbt-brand-pill > i, .hbt-brand-pill > svg { flex: 0 0 auto !important; line-height: 1 !important; }