/*
* Katalog: kafelki produktów i baner kategorii — moduł `katalog` (ST_Katalog).
*
* ⚠️ ZMIENIAMY WYGLĄD, NIE MARKUP. Kafelek składa Flatsome
* (`.product-small > .col-inner > .box > .box-image | .box-text`), a my tylko
* go ubieramy. Żaden szablon motywu ani WooCommerce nie jest nadpisany —
* wyłączenie modułu przywraca wygląd motywu w całości.
*
* ⚠️ WSZYSTKIE KOLORY ZE ZMIENNYCH. Zmiana palety to kilka wartości w jednym
* miejscu, a nie przeszukiwanie pliku.
*/
.products,
.st-baner {
--stk-gr: #344a90;
--stk-gr-h: #2b3d78;
--stk-gr-d: #1f2c58;
--stk-bl: #6f83c7;
--stk-bl-j: #e8ecf8;
--stk-graf: #181b22;
--stk-szary: #606775;
--stk-obw: #dce1ea;
--stk-tlo: #f6f8fc;
--stk-czerw: #c0392b;
/*
* ⚠️ 2026-09-15 (4) — DRUGI ODCIEŃ GRANATU, WYŁĄCZNIE POD PRZYCISK KAFELKA.
* Nie `--stk-bl` (#6F83C7): biel na tym błękicie daje 3,65:1 — poniżej
* progu AA (4,5:1) dla tekstu tej wielkości (.82rem, pogrubiony, ale wciąż
* mniejszy niż próg „dużego tekstu" WCAG). Nie `--stk-gr` (#344A90): to
* JEDYNY dominujący granat zarezerwowany dla przycisku „Dodaj do koszyka"
* na stronie produktu (mapowanie UI, CLAUDE.md) — na kilkunastu kafelkach
* w rzędzie ten sam odcień czyta się jak ściana identycznych CTA.
* #4A62AE jest już w projekcie precedensem dokładnie na to („ta sama
* rodzina, wyraźnie inny ton", 11.09): biel na nim = 5,75:1, mocne AA.
*/
--stk-gr-jasny: #4a62ae;
}
/* ===========================================================================
1. KAFELEK PRODUKTU
=========================================================================== */
/*
* ⚠️ RÓWNĄ WYSOKOŚĆ ROBI FLEXBOX, NIE SKRYPT MOTYWU.
* Flatsome ma klasę `equalize-box`, która skryptem wpisuje elementom
* `style="height: 123.688px"`. To działa, dopóki nie zmieni się wypełnienie
* karty — a my je zmieniamy, więc sztywna wysokość zaczyna ucinać treść.
* Zamiast walczyć z inline'em specyficznością, zdejmujemy go `!important`
* i układamy kartę w kolumnę: obrazek u góry, tekst rośnie, cena przyklejona
* do dołu. Efekt jest ten sam (równe karty w rzędzie), tylko bez JavaScriptu
* i bez przeliczania przy każdej zmianie szerokości okna.
*/
.products .product-small .box-text,
.products .product-small .title-wrapper,
.products .product-small .price-wrapper {
height: auto !important;
}
/*
* ⚠️ KOLUMNY NIE ZMIENIAMY W POJEMNIK FLEXA.
* Pierwsza wersja miała tu `display: flex` na `.col` — i kolumny zaczęły się
* rozjeżdżać: 314 / 293 / 314 px zamiast trzech równych (zmierzone 14.09).
* `.col` ma `flex: 0 1 33.3333%`, a zmiana jego trybu wyświetlania zmienia
* też jego szerokość minimalną, przez co co druga kolumna dostawała zgodę
* na skurczenie się. `.col` i tak JEST elementem flexa (rodzic `.products`
* ma `display: flex`), więc rozciąga się na wysokość rzędu sam — wystarczy,
* że karta w środku weźmie `height: 100%`.
*/
.products .product-small > .col-inner {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1px solid var(--stk-obw);
border-radius: 16px;
background: #fff;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.products .product-small > .col-inner:hover {
transform: translateY(-4px);
border-color: var(--stk-bl);
box-shadow: 0 18px 34px -22px rgba(24, 27, 34, .45);
}
.products .product-small .box {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* ─── Obrazek ───────────────────────────────────────────────────────────── */
/*
* ⚠️ TŁO POD OBRAZKIEM MUSI BYĆ NIEPRZEZROCZYSTE.
* Flatsome kładzie drugie zdjęcie galerii NAD pierwszym (`position:absolute`)
* z tłem `rgba(0,0,0,0)`. Gdy drugie zdjęcie jest PNG z kanałem alfa, przez
* jego tło widać zdjęcie główne — zmierzone 13.09 na 153 z 226 produktów
* z galerią.
*/
/*
* ⚠️ NIE WOLNO TU DAĆ `padding` W SKRÓCIE — TO KASUJE PROPORCJĘ KAFELKA.
* Przy `has-equal-box-heights` Flatsome trzyma proporcję obrazka na
* `.box-image { padding-top: 100% }`, a zdjęcie leży w środku jako element
* `position: absolute`. Skrót `padding: 8px` nadpisuje `padding-top` i cała
* ramka zapada się do 16 px — zmierzone 14.09: kafelek 314 × 152 px zamiast
* 314 × 438, obrazek 16 × 16.
*
* Dlatego ramka jest tu zrobiona TŁEM i kreską, a nie wypełnieniem.
*/
/*
* ⚠️ JAWNA SZEROKOŚĆ 100 % — INACZEJ RAMKA OBRAZKA MA ZERO PIKSELI.
* `.box` jest u nas pojemnikiem flexa w kolumnie, a `.box-image` nie ma
* ŻADNEJ treści w przepływie: proporcję trzyma `padding-top`, a zdjęcie leży
* w środku jako `position: absolute`. Szerokość z zawartości wychodzi więc 0
* i obrazek znika, mimo poprawnej wysokości (zmierzone 14.09: `.box-image`
* 0 × 294 px, zdjęcie 0 px szerokości).
*/
.products .product-small .box-image {
width: 100%;
align-self: stretch;
background: #fff;
border-bottom: 1px solid var(--stk-obw);
}
/* ─── Puste nakładki motywu ─────────────────────────────────────────────── */
/*
* ⚠️ TO SĄ TE „DZIWNE BIAŁE KWADRATY" PRZY NAJECHANIU NA KAFELEK.
* Flatsome renderuje w kafelku TRZY pojemniki `.image-tools` — na ulubione,
* szybki podgląd i pasek akcji. U nas żaden z nich nie ma czego pokazać
* (nie ma wtyczki listy życzeń ani szybkiego podglądu), więc zostają PUSTE,
* ale z białym tłem. Zmierzone 14.09: dwa pudełka **5 × 5 px** w prawym
* górnym i lewym dolnym rogu oraz pasek na całą szerokość karty — dokładnie
* w miejscach, które Dawid zaznaczył strzałkami.
*
* ⚠️ `:empty`, A NIE `display: none` NA STAŁE. Gdy kiedyś dojdzie wtyczka
* listy życzeń, pojemnik przestanie być pusty i pokaże się sam — bez
* wracania do tego arkusza. Reguła wygasa sama, zamiast zostawać pułapką.
*/
.products .product-small .image-tools:empty {
display: none;
}
/* ─── Treść ─────────────────────────────────────────────────────────────── */
/*
* ⚠️ TEKST DO LEWEJ, NIE NA ŚRODEK.
* Flatsome nadaje `.box-text` klasę `text-center`. Przy nazwach łamiących się
* na dwa wiersze wyśrodkowanie daje ząbkowaną lewą krawędź — cztery kafelki
* obok siebie i każdy zaczyna się w innym miejscu. Wyrównanie do lewej daje
* wspólną oś przez cały rząd.
*/
.products .product-small .box-text.box-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
/*
* ⚠️ `align-items` MUSI BYC PODANE JAWNIE.
* To juz DRUGI element w tym kafelku, ktory w kolumnie flexa skurczyl sie
* do szerokosci tresci zamiast rozciagnac na cala karte — pierwszym byla
* ramka obrazka (0 px szerokosci), drugim przycisk „Wybierz opcje"
* (zmierzone 14.09: 120 px zamiast 265). Motyw ustawia tu wyrownanie pod
* swoj uklad, wiec domyslne rozciaganie nie obowiazuje.
* REGULA: robiac z cudzego elementu pojemnik flexa, ustaw `align-items`
* jawnie — inaczej co drugie dziecko trzeba bedzie ratowac osobno.
*/
align-items: stretch;
padding: 12px 14px 14px;
text-align: left;
}
.products .product-small .title-wrapper {
margin: 0;
}
.products .product-small .name.product-title {
margin: 0;
font-family: "Poppins", "Inter", system-ui, sans-serif !important;
font-size: .92rem;
font-weight: 600;
line-height: 1.34;
letter-spacing: 0;
}
/*
* ⚠️ NAZWA PRZYCIĘTA DO DWÓCH WIERSZY, A NIE ROZPYCHAJĄCA KARTĘ.
* W katalogu są nazwy po 60 znaków („Czarna naklejka PL na tablicę
* rejestracyjną Eurobrand Białe gwiazdki") — bez przycięcia jedna taka nazwa
* podnosi wysokość CAŁEGO rzędu o dwa wiersze. Pełna nazwa jest o kliknięcie
* dalej, na karcie produktu.
*/
.products .product-small .name.product-title a {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--stk-graf);
text-decoration: none;
transition: color .15s ease;
}
.products .product-small > .col-inner:hover .name.product-title a {
color: var(--stk-gr);
}
/*
* ⚠️ `margin-top: auto` PRZYKLEJA CENĘ DO DOŁU KARTY.
* To jest cała mechanika równych kart: nazwa zajmuje tyle, ile potrzebuje,
* a wolne miejsce ląduje MIĘDZY nazwą a ceną. Dzięki temu ceny w całym
* rzędzie stoją w jednej linii niezależnie od długości nazw.
*/
.products .product-small .price-wrapper {
margin-top: auto;
padding-top: 8px;
/* ⚠️ Wyrównanie POWTÓRZONE, bo motyw ustawia je osobno na `.price-wrapper`,
a dziedziczenie z `.box-text` przegrywa z regułą wskazującą element. */
text-align: left;
}
.products .product-small .price {
font-family: "Poppins", "Inter", system-ui, sans-serif !important;
font-size: 1.02rem;
font-weight: 700;
color: var(--stk-gr-d);
}
.products .product-small .price del {
margin-right: 6px;
font-size: .85rem;
font-weight: 400;
color: var(--stk-szary);
opacity: 1;
}
.products .product-small .price ins {
text-decoration: none;
color: var(--stk-czerw);
}
/* Gwiazdki: mniejsze i nad ceną, żeby nie konkurowały z liczbą. */
.products .product-small .star-rating {
display: block;
margin: 0 0 4px;
font-size: .72em;
color: var(--stk-bl);
opacity: 1;
}
/* ─── Plakietka promocji ────────────────────────────────────────────────── */
/*
* ⚠️ PLAKIETKA W PALECIE MARKI, NIE W DOMYŚLNEJ CZERWIENI MOTYWU.
* Czerwień #C0392B jest w projekcie kolorem funkcjonalnym (błąd, cena
* promocyjna) i przechodzi AA — dlatego zostaje, ale w kształcie
* zgodnym z resztą: prostokąt o promieniu 8 px, nie koło.
*/
.products .product-small .badge-container .badge-inner {
border-radius: 8px;
background: var(--stk-czerw);
color: #fff;
font-family: "Poppins", "Inter", system-ui, sans-serif !important;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
}
.products .product-small .badge {
height: auto;
width: auto;
min-width: 48px;
padding: 0;
margin: 8px 0 0 8px;
}
/* ─── Przycisk „Dodaj do koszyka" / „Wybierz opcje" ─────────────────────── */
/*
* ⚠️ PRZYCISKU NIE BYŁO W OGÓLE — I NIE BRAKOWAŁO GO W KODZIE, TYLKO
* W USTAWIENIACH MOTYWU. Flatsome ma opcję `add_to_cart_icon` z domyślną
* wartością `disable`; przy niej kafelek renderuje się BEZ przycisku.
* Przestawione na `button` (Personalizuj → Katalog produktów → Add To Cart
* Button). Świadomie NIE dokładamy własnego haka: przycisk rysuje motyw,
* my go tylko ubieramy — jedno źródło prawdy zamiast dwóch.
*
* ⚠️ TO ROZWIĄZUJE TEŻ WARIANTY. `woocommerce_template_loop_add_to_cart()`
* sam dobiera napis: produkt prosty dostaje „Dodaj do koszyka", a wariantowy
* **„Wybierz opcje"** — czyli po kafelku widać, że brelok ma kolory do wyboru.
* Wcześniej nie było tego po czym poznać (uwaga Dawida z 14.09).
*
* ⚠️ 2026-09-15 (4) — Z POWROTEM WYPEŁNIONY, ALE JAŚNIEJSZYM GRANATEM.
* Kilka godzin wcześniej tego samego dnia przycisk dostał wariant biały
* z granatową obwódką („drugorzędny" z mapowania UI) — teoretycznie
* uzasadniony (jeden dominujący granat na sekcję), ale Dawid zobaczył go
* obok wizualizacji z ChatGPT i był jednoznaczny: *„te przyciski, kurwa,
* dajmy je jednak zakolorowane… nie podobają mi się te białe… wygląda tak,
* kurwa, do dupy, taki niechlujny"*. Wraca wypełnienie, ale odcieniem
* `--stk-gr-jasny` (#4A62AE) — nie pełnym `--stk-gr` (#344A90), który
* zostaje zarezerwowany dla JEDYNEGO dominującego CTA na stronie produktu.
* Różny odcień tej samej rodziny koloru rozwiązuje oba zastrzeżenia naraz:
* przycisk jest wypełniony i czytelny jak na wizualizacji, a kilkanaście
* kafelków w rzędzie nie wygląda jak ściana identycznych głównych CTA.
*/
.products .product-small .add-to-cart-button {
width: 100%;
align-self: stretch;
margin-top: 10px;
}
.products .product-small .add-to-cart-button a.button {
display: block;
width: 100%;
min-height: 40px;
margin: 0;
padding: 9px 12px;
border: 1px solid var(--stk-gr-jasny);
border-radius: 10px !important;
background: var(--stk-gr-jasny);
color: #fff;
font-family: "Poppins", "Inter", system-ui, sans-serif !important;
font-size: .82rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
text-align: center;
text-transform: none;
box-shadow: none;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.products .product-small .add-to-cart-button a.button:hover,
.products .product-small .add-to-cart-button a.button:focus-visible {
background: var(--stk-gr);
border-color: var(--stk-gr);
color: #fff;
}
/*
* ⚠️ NIEDOSTĘPNY ZOSTAJE WARIANTEM „BEZ WYPEŁNIENIA" — TERAZ ODRÓŻNIA SIĘ
* MOCNIEJ NIŻ KIEDYKOLWIEK. Skoro dostępny jest znów wypełniony kolorem,
* ghost/outline (biel / szary tekst `--stk-szary` / jasnoszara obwódka
* `--stk-obw`) kontrastuje z nim jeszcze wyraźniej niż wcześniej — filled
* vs. outline to mocniejszy sygnał niż dwa różne białe warianty. Hover
* dokłada granat bez wypełnienia, tekst przycisku i tak mówi wprost co
* innego: „Zobacz produkt" zamiast „Dodaj do koszyka"
* (`ST_Katalog::napis_przycisku()`).
*/
.products .product-small .add-to-cart-button a.button.product_type_external,
.products .product-small .add-to-cart-button a.button[href*="produkt"]:not(.add_to_cart_button) {
border-color: var(--stk-obw);
color: var(--stk-szary);
}
.products .product-small .add-to-cart-button a.button.product_type_external:hover,
.products .product-small .add-to-cart-button a.button.product_type_external:focus-visible,
.products .product-small .add-to-cart-button a.button[href*="produkt"]:not(.add_to_cart_button):hover,
.products .product-small .add-to-cart-button a.button[href*="produkt"]:not(.add_to_cart_button):focus-visible {
background: #fff;
border-color: var(--stk-gr);
color: var(--stk-gr);
}
/* ⚠️ Kropka „dodano do koszyka" Flatsome jest domyślnie poza kafelkiem —
przy pełnej szerokości przycisku musi siedzieć w jego środku. */
.products .product-small .add-to-cart-button .button.loading::after {
right: 12px;
}
/* ===========================================================================
2. BANER KATEGORII
=========================================================================== */
/*
* ⚠️ BANER JEST JASNY, NIE GRANATOWY.
* Granatowy pas u góry kategorii powtarzałby nagłówek strony głównej
* i stopkę — trzeci ciemny blok na jednej podstronie. Tu wystarczy delikatny
* gradient w barwach marki: sekcja jest wyraźnie oddzielona, a listing
* produktów pod spodem zostaje najmocniejszym elementem na stronie.
*/
/*
* ⚠️ 2026-09-15 (2) — HACK PEŁNEJ SZEROKOŚCI SKASOWANY, BO ZNIKNĄŁ POWÓD.
* Tu wcześniej stały dwie reguły `:has()`, które wymuszały na wierszu tytułu
* (`.shop-page-title`) zawijanie i pełną szerokość kolumny z banerem —
* bo baner renderował się na haku `flatsome_category_title`, PRZED
* podziałem strony na sidebar i kolumnę treści, i musiał sobie „ukraść"
* miejsce w pasku tytułu.
*
* Baner renderuje się teraz na `woocommerce_archive_description`
* (`class-st-katalog.php::podepnij_baner()`) — WEWNĄTRZ `.col.large-9`,
* obok sidebara kategorii, w tej samej kolumnie co siatka produktów. Jest
* zwykłą sekcją blokową w tej kolumnie, więc bierze jej szerokość sama,
* bez żadnego hacka. Pasek tytułu (`.shop-page-title`) nad dwukolumnowym
* wierszem zostaje z samymi okruszkami i licznikiem/sortowaniem — to osobny,
* nietknięty w tej turze element (patrz sekcja 3 niżej).
*/
/*
* ⚠️ 2026-09-15 — PRZEBUDOWA: ZDJĘCIE NA PEŁNĄ WYSOKOŚĆ, NIE ILUSTRACJA W BOKSIE.
* Poprzednia wersja (14.09) miała małą, oprawioną w ramkę i promień miniaturę
* 210×140 px doklejoną obok tekstu — Dawid (15.09, brief z ChatGPT) nazwał to
* wprost „wygląda jak ilustracja wstawiona do boxa". Punkt 10 briefu chce
* zdjęcie PRZYCIĘTE DO KRAWĘDZI baneru, jak w prawdziwym sklepie: lewa część
* to tekst (nadtytuł, H1, wstęp, drobna informacja kontekstowa), prawa to
* fotografia na całą wysokość, bez własnej ramki i bez własnego tła.
*
* `.st-baner` jest teraz WIERSZEM FLEXA NA CAŁĄ WYSOKOŚĆ (align-items:stretch),
* a `overflow:hidden` na kontenerze przycina zdjęcie do tego samego promienia,
* który ma cała sekcja — stąd zdjęcie nie potrzebuje własnego `border-radius`.
*/
/*
* ⚠️ 2026-09-15 (4) — KONIEC PŁASKIEJ GRANATOWEJ KRESKI Z LEWEJ.
* Dawid, patrząc na banerbez zdjęcia obok wizualizacji z ChatGPT: *„zobacz,
* jak ładnie wygląda, jaki glowing ma, to jednolite tło… jak to brzydko
* wygląda, jak surowo"* — i zaznaczył strzałkami dokładnie ten pionowy
* pasek `border-left`. Miał rację co do przyczyny: płaska kreska na płaskim
* tle to jedyny akcent, jaki dostawały kategorie BEZ zdjęcia (85 z 86),
* czyli dokładnie ten wariant, który widział.
*
* ⚠️ TO JEST ŚWIADOMY WYJĄTEK OD ZASADY „KONIEC GRADIENTÓW" Z 07.09, NIE
* JEJ ZŁAMANIE PRZEZ ROZTARGNIENIE. Tamta zasada dotyczyła STOSU
* NASYCONYCH gradientów (dwa-trzy warstwy, mocne barwy spoza palety) —
* dokładnie to, co Dawid nazywał „AI-owym" w CTA i nagłówkach. Tu jest
* JEDNA warstwa, w jednym tonie palety (`--stk-bl-j`), rozmyta do gołego
* tła — miękka poświata w rogu, nie tęcza. To ta sama różnica, którą
* projekt już akceptuje gdzie indziej: miękki cień pod kartą produktu
* (`.col-inner:hover`, linia 68 wyżej) jest na stałe w tym samym pliku.
*/
.st-baner {
position: relative;
display: flex;
align-items: stretch;
margin: 20px 0 24px;
overflow: hidden;
border: 1px solid var(--stk-obw);
border-radius: 16px;
background:
radial-gradient(130% 170% at 12% -10%, var(--stk-bl-j) 0%, rgba(232, 236, 248, 0) 60%),
var(--stk-tlo);
box-shadow: 0 24px 46px -32px rgba(31, 44, 88, .32);
}
/*
* ⚠️ WYSOKOŚĆ 230–280 px TYLKO PRZY ZDJĘCIU.
* Bez zdjęcia sekcja ma wypełnić się treścią — narzucona wysokość zostawiałaby
* kategoriom bez grafiki (dziś większość z 86) dużo pustego miejsca, a to jest
* dokładnie ten „nadmiar efektowności", którego brief każe unikać.
*/
@media (min-width: 901px) {
.st-baner--z-obrazem {
min-height: 250px;
}
}
.st-baner-txt {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
min-width: 0;
padding: 30px 32px;
}
.st-baner--z-obrazem .st-baner-txt {
flex: 1 1 56%;
max-width: 560px;
}
.st-baner .st-baner-nad {
display: block;
margin-bottom: 6px;
font-family: "Poppins", "Inter", system-ui, sans-serif !important;
font-size: .72rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--stk-bl);
}
/*
* ⚠️ TO JEST JEDYNY `
` NA STRONIE KATEGORII.
* Nagłówek motywu zdejmuje PHP (`remove_action`), a nie ten arkusz — element
* ukryty stylem nadal siedzi w treści i nadal liczy się dla wyszukiwarki.
*/
.st-baner .st-baner-tytul {
margin: 0;
font-family: "Poppins", "Inter", system-ui, sans-serif !important;
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.12;
color: var(--stk-gr-d);
text-transform: none;
}
/*
* ⚠️ 2026-09-16 — LEAD I META SKASOWANE. Stał tu akapit — najpierw własny
* tekst albo pierwsze zdanie opisu („lead"), potem (15.09 (4)) drugie
* zdanie z opisu („meta"). Dawid, po zobaczeniu obu na żywo: *„wyjebmy te 1
* zdania z opisu kategorii jednak, bo to psuje wygląd — tylko napis H1
* i te ikonki"*. `ST_Katalog::baner()` już tego nie renderuje; klasy
* `.st-baner-lead` / `.st-baner-meta` usunięte stąd w tej samej turze,
* żeby nie zostawiać martwego CSS-u.
*/
/*
* ⚠️ 2026-09-15 (4) — TRZY ATUTY: kafelek ikony w jasnym błękicie +
* granatowy rysunek, ten sam język co `st2-hi-chip` (huby firmowe).
* Skopiowane tu z prefiksem `stk-`, żeby `katalog.css` zostało
* samowystarczalne (nie zależy od `styl-b2.css`, który na stronie
* kategorii się nie ładuje).
*
* ⚠️ IKONA I TEKST SĄ PER KATEGORIA, ŚWIADOMIE BEZ GLOBALNEGO DOMYŚLNEGO
* ZESTAWU. „Łatwa aplikacja" pasuje do naklejki, nie do breloka — wymuszenie
* jednego kompletu wszędzie byłoby dokładnie tym błędem, przed którym
* przestrzegał Dawid. Kategoria bez skonfigurowanych atutów po prostu nie
* pokazuje tego rzędu (`ST_Katalog::atuty()` zwraca pustą tablicę).
*
* ⚠️ 2026-09-16 — KRESKI MIĘDZY POZYCJAMI ZDJĘTE. `st2-hi-chip` (skąd
* przeniosłem wzór) siedzi w pełnoszerokim hero, gdzie 3 pozycje zawsze
* mieszczą się w jednym rzędzie. Tu kolumna tekstu bywa dużo węższa
* (przy kategorii ZE zdjęciem ma maks. 560 px, a przy węższym oknie —
* mniej), a etykiety atutów są tekstem wolnym, do 40 znaków, ustawianym
* per kategoria. Przy takiej zmienności ZAWSZE da się znaleźć szerokość,
* przy której rząd zawinie się nierówno (2+1, czasem 1+1+1) — a kreska
* `border-left` zrobiona selektorem `+` (zależnym od tego, KTÓRY to
* dziecko, nie od tego, w którym rzędzie realnie wylądował) przy takim
* zawinięciu zostaje osierocona przy elemencie, który wcale nie sąsiaduje
* już z poprzednim. Zmierzone na oknie 1024 px: 2 atuty w pierwszym
* rzędzie, trzeci osobno, z kreską, która nie miała już przy czym stać.
*
* Zamiast gonić kolejne progi `@media`/`@container` dla tekstu o zmiennej
* długości: każdy atut jest samodzielnym kafelkiem (ikona + tekst) bez
* krawędzi zależnej od sąsiada. Odstęp `gap` sam robi robotę separatora —
* niezależnie od tego, ile pozycji wyląduje w rzędzie i przy KTÓREJ
* dokładnie szerokości ekranu to nastąpi, nic nie zostaje „w powietrzu".
*/
.st-baner-atuty {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 26px;
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.st-baner-atut {
display: flex;
align-items: center;
gap: .55rem;
font-size: .82rem;
font-weight: 600;
color: var(--stk-graf);
}
.st-baner-atut-ikona {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--stk-bl-j);
color: var(--stk-gr);
}
.st-baner-atut-svg { width: 15px; height: 15px; }
/*
* ⚠️ ZDJĘCIE WYPEŁNIA CAŁĄ WYSOKOŚĆ KOLUMNY, BEZ WŁASNEJ RAMKI.
* `.st-baner-foto` jest pojemnikiem, który się rozciąga (stretch) na wysokość
* całego baneru; `object-fit:cover` na obrazku w środku przycina go do tej
* wysokości — to właśnie znaczy „przycięte do krawędzi", a nie wstawione
* w osobny prostokąt.
*
* ⚠️ `` MUSI BYĆ `position: absolute`, NIE ZWYKŁYM BLOKIEM Z `height:100%`.
* Zmierzone: przy obrazku w normalnym przepływie `height:100%` nie miało
* względem czego się policzyć (kontener nie ma jawnej wysokości, tylko
* `min-height`), więc przeglądarka cofała się do naturalnych proporcji pliku
* — kafel 768×576 dawał **406 px wysokości baneru zamiast ~250**, bo to
* zdjęcie, a nie `min-height`, dyktowało wysokość całego wiersza flexa.
* Wyjęcie `` z przepływu (`position:absolute; inset:0`) przecina tę
* pętlę: `.st-baner-foto` przestaje mieć jakąkolwiek zawartość w przepływie,
* więc jego własna wysokość jako elementu flexa wynika wyłącznie z
* `min-height` i rozciągnięcia do wysokości wiersza — a obrazek wypełnia
* dopiero TĘ już ustaloną wysokość.
*/
.st-baner-foto {
position: relative;
flex: 0 0 44%;
min-height: 230px;
overflow: hidden;
}
.st-baner-img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/*
* ⚠️ DELIKATNY GRADIENT MIĘDZY TEKSTEM A ZDJĘCIEM (punkt 10 briefu).
* Bez niego zdjęcie kończy się twardą krawędzią dokładnie tam, gdzie zaczyna
* się tło tekstu — przy fotografiach z jasnym niebem czy jasną ścianą ta
* krawędź jest widoczna jak szew.
*
* ⚠️ `z-index` TERAZ OBOWIĄZKOWY. Odkąd `` jest też `position:absolute`,
* oba elementy są w tej samej warstwie pozycjonowanej — bez jawnego
* `z-index` o kolejności malowania decydowałaby kolejność w DOM, a ``
* (prawdziwe dziecko, renderowane PO `::before`) malowałby się NAD
* gradientem zamiast pod nim.
*/
.st-baner-foto::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to right, var(--stk-tlo) 0%, rgba(246, 248, 252, 0) 22%);
pointer-events: none;
}
/*
* ⚠️ 2026-09-15 (4) — DOPISEK ODRĘCZNY + STRZAŁKA PRZY GRAFICE.
* Dawid pokazał wizualizację z ChatGPT: obok zdjęcia stoi odręczny napis
* („Małe detale, Wielka zmiana") ze strzałką wskazującą naklejkę na zdjęciu.
* Ten sam komponent istnieje już w projekcie — `.st2-odrecznie` / `.st2-strzalka`
* w `styl-b2.css`, krój Gloria Hallelujah (13,5 kB, komplet polskich znaków,
* zero Google Fonts). Tu duplikowany z prefiksem `stk-`, bo `styl-b2.css`
* nie ładuje się na stronie kategorii, a ten arkusz ma zostać samowystarczalny.
*
* ⚠️ `@font-face` MUSI BYĆ W PRAWDZIWYM PLIKU CSS, NIE WSTRZYKNIĘTY SKRYPTEM.
* Trafia wtedy do CSSOM, ale przeglądarka nigdy nie pobiera pliku — to
* kosztowało cały wieczór 02.09 przy kafelkach czcionek konfiguratora.
*/
@font-face {
font-family: "stkf-gloria-hallelujah";
src: url("../fonts/gloria-hallelujah.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/*
* ⚠️ 2026-09-16 (3) — SPROSTOWANIE WŁASNEGO ZAŁOŻENIA Z 15.09: „STREFA,
* KTÓRĄ I TAK ROZMYWA GRADIENT" BYŁA NIEPRAWDĄ. Gradient (`.st-baner-foto::before`)
* rozjaśnia wyłącznie lewe **22 %** zdjęcia. Pudełko dopisku zaczyna się na
* 6 % i ma do 160 px szerokości — na typowym banerze (zdjęcie ~400–410 px)
* to sięga do **~144 px od lewej krawędzi zdjęcia, czyli grubo ZA granicą
* 22 % (~89 px)**. Policzone dopiero teraz, po tym jak Dawid pokazał zrzut:
* *„strzałka jest na grafice i gdzie nie widać tej strzałki i tekstu"* —
* granatowa kreska na ciemnej fasadzie budynku w tle po prostu znika, bo
* tam żaden gradient jej nie chroni.
*
* ⚠️ NAPRAWA NIE POLEGA NA PRZESUNIĘCIU DOPISKU W GŁĄB STREFY GRADIENTU —
* to samo zdjęcie na innej kategorii może mieć zupełnie inny układ jasnych
* i ciemnych plam, więc „bezpieczna strefa" liczona z jednego zdjęcia jest
* fałszywym poczuciem bezpieczeństwa. Zamiast zgadywać, gdzie na KAŻDYM
* przyszłym zdjęciu będzie jasno: dopisek i strzałka dostają biały odblask
* (`text-shadow` / `filter: drop-shadow`, po kilka warstw z różnym
* rozmyciem) — czytelne na czarnym aucie, na niebie i na cegle jednocześnie,
* bez znajomości treści zdjęcia. To ten sam mechanizm, którym napisy na
* plakatach filmowych zostają czytelne na dowolnym tle.
*/
.st-baner-akcent {
position: absolute;
z-index: 3;
left: 6%;
top: 14%;
width: clamp(120px, 17%, 160px);
pointer-events: none;
}
/*
* ⚠️ `!important` NA `font-family` JEST TU KONIECZNY, NIE NIECHLUJNY.
* `.st-baner-odrecznie` jest znacznikiem `
`, a CSS Tempo ma
* `body, p, li, span, div { font-family:'Inter'!important }` — `!important`
* w arkuszu autora bije nawet zwykłą deklarację po naszej stronie. Bez tego
* dopisek renderował się Interem zamiast Gloria Hallelujah: zmierzone
* `getComputedStyle` na żywej stronie — `font-family: "Inter, sans-serif"`,
* mimo poprawnej reguły w tym pliku (naprawione 16.09).
*/
.st-baner-odrecznie {
margin: 0;
font-family: "stkf-gloria-hallelujah", "Segoe Script", cursive !important;
font-weight: 400;
font-size: clamp(.95rem, 1.3vw, 1.1rem);
line-height: 1.3;
color: var(--stk-gr);
/* Biały odblask w trzech warstwach: wąska „obwódka" tuż przy literach
(widoczna nawet na jasnym niebie) + szersza poświata (robi robotę na
ciemnym aucie i fasadzie). Bez tego tekst istnieje tylko tam, gdzie
zdjęcie akurat jest jasne — czyli przez przypadek, nie z założenia. */
text-shadow:
0 0 2px #fff,
0 0 5px #fff,
0 0 10px rgba(255, 255, 255, .85);
transform: rotate(-4deg);
transform-origin: left center;
}
.st-baner-strzalka {
display: block;
width: 100%;
height: auto;
margin-top: 14px;
color: var(--stk-gr);
overflow: visible;
/* Ten sam biały odblask co na tekście, tym razem jako `drop-shadow` na
całym SVG — działa na obrysie kreski niezależnie od tego, co pod nią. */
filter:
drop-shadow(0 0 2px #fff)
drop-shadow(0 0 4px #fff)
drop-shadow(0 0 7px rgba(255, 255, 255, .8));
}
.st-baner-strzalka path {
fill: none;
stroke: currentColor;
stroke-width: 2.3;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ===========================================================================
3. PASEK NARZĘDZI KATALOGU (licznik wyników + sortowanie)
=========================================================================== */
/*
* ⚠️ TEN PASEK ZOSTAŁ W WYGLĄDZIE DOMYŚLNYM WOOCOMMERCE.
* Zmierzone 14.09: lista sortowania miała obwódkę `#DDD`, promień **0 px**
* i wysokość 39 px — czyli ani jednej wartości z naszej skali. Po ubraniu
* kafelków w karty z promieniem 16 px ten jeden prostokąt zaczął odstawać
* najbardziej na całej stronie („już brzydko wygląda ten box").
*/
.woocommerce-result-count {
margin: 0;
font-size: .86rem;
color: var(--stk-szary);
}
/*
* ⚠️ `appearance: none` PLUS WŁASNA STRZAŁKA.
* Rozwiniętej listy `