jest teraz kolumną flex (patrz
reguła „a.woocommerce-loop-product__link” wyżej) — dosuwa odznakę do prawej
krawędzi karty, tak jak „-X%” jest przy lewej, ale bez position:absolute
(które byłoby ucięte przez overflow:hidden karty przy ujemnym top). */
.woocommerce ul.products li.product .sl-badge-best {
align-self: flex-end;
margin: 10px 12px 8px;
background: var(--star);
color: var(--navy);
font-size: 12px;
font-weight: 800;
padding: 4px 10px;
border-radius: 999px;
}
/* Symbol gatunku — w wierszu obok ceny (.sl-price-row), nie na zdjęciu.
.sl-species-icons grupuje ikonki, żeby przy dwóch gatunkach (pies+kot) zostały
obok siebie zamiast rozjechać się przez justify-content:space-between rodzica. */
.woocommerce ul.products li.product .sl-species-icons {
flex-shrink: 0;
display: flex;
gap: 2px;
}
/* 20px (nie 30px) — przy DWÓCH ikonkach (pies+kot) para ledwo mieściła się obok
ceny w najwęższej karcie (220px, telefon) i wiersz cena+ikonki zawijał się na
2 linie, psując wyrównanie kart w rzędzie (patrz margin-top:auto na
.sl-price-row wyżej). Sprawdzone na żywo przy szerokości karty 220px. */
.woocommerce ul.products li.product .sl-species-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ice);
display: grid;
place-items: center;
font-size: 10px;
}
/* Strona sklepu pogrupowana wg kategorii — nagłówek „Sklep” reużywa istniejący
styl body.woocommerce h1.page-title (wyśrodkowanie, rozmiar), bez dublowania. */
.sl-shop-title-wrap { padding-top: 32px; }
/* Mniejszy margines pod samym tytułem h1 „Sklep” — tylko na tej stronie
(wyższa specyficzność niż generyczna „body.woocommerce h1.page-title”). */
body.woocommerce .sl-shop-title-wrap h1.page-title { margin-bottom: 8px; }
.sl-shop-cat-section { padding: 40px 0; }
/* Pierwsza sekcja kategorii (zaraz pod „Sklep”) dostaje mniejszy odstęp od góry
— pozostałe sekcje (odstęp między kategoriami) zostają bez zmian. */
.sl-shop-title-wrap + .sl-shop-cat-section { padding-top: 12px; }
.sl-shop-cat-section:nth-child(odd) { background: var(--ice); }
/* Ostatnia sekcja kategorii ma już własny padding-bottom (40px) i tło —
globalny odstęp „.site-footer { margin-top:72px }” dokładał tu zbędny,
pusty biały pasek między sekcją a stopką. */
.sl-shop-cat-section + .site-footer { margin-top: 0; }
/* To samo na stronie głównej — od kiedy sekcja „Opinie” (.section--ice) jest
ostatnią przed stopką (usunięta sekcja newslettera, która wcześniej tam
była), globalny „.site-footer { margin-top:72px }” znów dokładał zbędny,
pusty biały pasek — sekcja ma już własny padding (.section, 64px). */
.section--ice + .site-footer { margin-top: 0; }
/* padding-left dopasowany do .sl-scroll-wrap (padding:0 52px na miejsce strzałki),
żeby nagłówek kategorii startował dokładnie nad pierwszą kartą produktu. */
.sl-shop-cat-head { text-align: left; max-width: 640px; margin: 0 0 32px; padding-left: 52px; }
.sl-shop-cat-head h2 { font-size: clamp(24px, 3.6vw, 32px); margin-bottom: 8px; }
.sl-shop-cat-head p { color: var(--muted); font-size: 16px; }
/* Przewijany w bok rząd produktów (tylko sekcje kategorii na stronie sklepu —
strony pojedynczych kategorii i inne miejsca zachowują zwykłą siatkę).
Boczny padding na .sl-scroll-wrap rezerwuje miejsce na strzałki, żeby nie
nachodziły na ostatnią/pierwszą kartę i żeby karty się nie „ucinały”. */
.sl-scroll-wrap { position: relative; padding: 0 52px; }
/* Shortcode [products] owija listę w dodatkowy ,
na który działa globalna reguła „body.woocommerce div.woocommerce” (wyśrodkowanie
+ padding 20px na strony bez naszego układu karuzeli) — tu jest zbędna i dokłada
przesunięcie względem nagłówka kategorii, więc ją tu zerujemy. */
.sl-shop-cat-section .sl-scroll-wrap .woocommerce { max-width: none; margin: 0; padding: 0; }
.sl-shop-cat-section .woocommerce ul.products {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
/* mandatory (nie proximity) — przeglądarka ZAWSZE doczepia widok do granicy
karty, także po ręcznym przeciągnięciu palcem o dowolną, małą odległość.
main.js dodatkowo przelicza szerokość karty po window.load (niżej), więc
snap nie celuje w nieaktualną, jeszcze nie w pełni ułożoną szerokość. */
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
padding: 4px 2px 8px;
}
.sl-shop-cat-section .woocommerce ul.products::-webkit-scrollbar { display: none; }
.sl-shop-cat-section .woocommerce ul.products li.product {
flex: 0 0 clamp(220px, 24vw, 270px);
scroll-snap-align: start;
}
.sl-scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: var(--blue);
color: var(--white);
font-size: 22px;
font-weight: 900;
box-shadow: var(--shadow-hover);
cursor: pointer;
display: grid;
place-items: center;
z-index: 3;
transition: background .15s, transform .15s, opacity .15s;
/* Domyślnie niewidoczne — dopóki JS (main.js) nie policzy, która strzałka
faktycznie ma być pokazana, i nie doda .sl-scroll-ready na .sl-scroll-wrap.
Bez tego strzałka „w prawo” na chwilę migała: widoczna w surowym HTML,
dopiero po chwili ukrywana przez JS gdy okazywało się, że jest zbędna. */
opacity: 0;
}
.sl-scroll-wrap.sl-scroll-ready .sl-scroll-btn { opacity: 1; }
.sl-scroll-btn:hover { background: var(--blue-hover); transform: translateY(-50%) scale(1.06); }
.sl-scroll-prev { left: 0; }
.sl-scroll-next { right: 0; }
.sl-scroll-btn.is-hidden { display: none; }
@media (max-width: 640px) {
.sl-scroll-wrap { padding: 0 40px; }
.sl-shop-cat-head { padding-left: 40px; }
.sl-scroll-btn { width: 36px; height: 36px; font-size: 18px; }
}
/* Sortowanie i licznik wyników */
.woocommerce .woocommerce-result-count { color: var(--muted); margin: 6px 0 24px; }
.woocommerce .woocommerce-ordering { margin-bottom: 24px; }
.woocommerce .woocommerce-ordering select {
font-family: var(--font);
font-weight: 700;
padding: 10px 16px;
border-radius: 999px;
border: 2px solid var(--sky);
color: var(--navy);
background: var(--white);
}
/* Paginacja */
.woocommerce nav.woocommerce-pagination { margin-top: 40px; }
.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 8px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
display: grid;
place-items: center;
min-width: 42px;
height: 42px;
border-radius: 50%;
background: var(--ice);
color: var(--navy);
font-weight: 800;
padding: 0 8px;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--blue); color: var(--white); }
/* =====================================================
WooCommerce — strona produktu (dopieszczona)
===================================================== */
.woocommerce div.product { margin-top: 12px; }
.woocommerce div.product div.images {
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
/* Ikona lupki (pełnoekranowy podgląd) — wyłączona razem z „wc-product-gallery-lightbox”
w functions.php; ukrywamy na wszelki wypadek, gdyby WooCommerce i tak ją wypisał. */
.woocommerce-product-gallery__trigger { display: none; }
/* Strzałki przewijania zdjęć — ten sam wygląd co .sl-scroll-btn na stronie Sklep
(patrz ta reguła niżej), tylko trochę wsunięte od krawędzi (12px, nie 0),
żeby nie stykały się z zaokrąglonym rogiem zdjęcia.
opacity:1 konieczne — bazowe .sl-scroll-btn ma opacity:0 domyślnie i czeka
na klasę „.sl-scroll-ready” na rodzicu (dodawaną przez JS karuzeli na
/sklep/, main.js). Galeria produktu nigdy nie dostaje tej klasy (to inny
element, main.js dodaje strzałki bezpośrednio do .woocommerce-product-gallery),
więc strzałki istniały w DOM i działały po kliknięciu, ale były niewidoczne.
Tylko desktop — na telefonie zostaje samo przesuwanie palcem, strzałki
ukryte niżej w @media (max-width: 820px). */
.woocommerce div.product div.images .sl-gallery-prev { left: 12px; opacity: 1; }
.woocommerce div.product div.images .sl-gallery-next { right: 12px; opacity: 1; }
.woocommerce div.product div.images img { border-radius: var(--radius); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 12px; display: flex; gap: 10px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; flex: 1; }
.woocommerce div.product div.images .flex-control-thumbs img {
border-radius: var(--radius-sm);
border: 2px solid transparent;
opacity: .7;
transition: all .15s;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { border-color: var(--blue); opacity: 1; }
.woocommerce div.product .product_title {
font-size: clamp(26px, 3.5vw, 36px);
font-weight: 900;
margin-bottom: 8px;
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 12px; }
.woocommerce div.product .star-rating { color: var(--star); }
.woocommerce div.product p.price {
font-size: 30px;
font-weight: 900;
color: var(--navy);
margin-bottom: 16px;
gap: 10px;
}
.woocommerce div.product p.price del { font-size: 20px; color: var(--muted); opacity: 1; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--muted);
font-size: 17px;
margin-bottom: 18px;
}
/* Lista cech w krótkim opisie (nad przyciskiem koszyka) — bez kropek domyślnych,
pogrubiona, w kolorze marki, żeby wyglądała jak dopieszczony zestaw atutów. */
.woocommerce div.product .woocommerce-product-details__short-description ul {
list-style: none;
padding: 0;
margin: 4px 0 0;
display: grid;
gap: 9px;
}
.woocommerce div.product .woocommerce-product-details__short-description li {
font-size: 15.5px;
font-weight: 800;
color: var(--blue-dark);
line-height: 1.4;
}
.woocommerce div.product form.cart { margin-bottom: 18px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.woocommerce div.product form.cart div.quantity { margin: 0; }
/* Produkt wirtualny (ebook) — zawsze 1 szt., licznik zbędny (patrz body_class
sl_virtual_product_body_class w functions.php). Bez ".woocommerce" w
selektorze — ta klasa jest na samym , razem z .sl-virtual-product
(ten sam element, nie osobny potomek), więc "body.sl-virtual-product
.woocommerce ..." nigdy by nie dopasowało. */
body.sl-virtual-product div.product form.cart div.quantity { display: none; }
/* Licznik ilości (+/-) — wspólny dla karty produktu na liście sklepu i strony produktu,
bo oba miejsca renderują ten sam znacznik przez woocommerce_quantity_input(). */
.woocommerce .quantity {
display: inline-flex;
align-items: center;
gap: 6px;
}
.woocommerce .quantity .qty {
width: 80px;
padding: 13px 8px;
border-radius: 999px;
border: 2px solid var(--sky);
font-family: var(--font);
font-weight: 800;
font-size: 16px;
color: var(--navy);
text-align: center;
-moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sl-qty-btn {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid var(--sky);
background: var(--white);
color: var(--blue-dark);
font-family: var(--font);
font-weight: 900;
font-size: 18px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: background .15s, border-color .15s, transform .1s;
}
.sl-qty-btn:hover { background: var(--ice); border-color: var(--blue); }
.sl-qty-btn:active { transform: scale(.9); }
/* Karta produktu na liście sklepu — węższy wariant licznika (mniej miejsca). */
.sl-loop-cart .quantity .qty { width: 44px; padding: 8px 4px; font-size: 14px; }
.sl-loop-cart .sl-qty-btn { width: 30px; height: 30px; font-size: 16px; }
.woocommerce div.product form.cart .single_add_to_cart_button {
font-size: 17px;
padding: 15px 36px;
flex: 1;
min-width: 220px;
}
/* Widżet „Zapłać później” (raty) — wstrzykiwany automatycznie przez samą
wtyczkę PayU na każdej stronie produktu, nie przez nasz motyw. Ukryty na
życzenie; !important celowo, bo widżet dynamicznie nadpisuje sobie własne
style inline przez JS, więc zwykła reguła mogłaby przegrać. */
.payu-mini-installments-widget { display: none !important; }
/* Samo ukrycie widżetu w koszyku (wersja blokowa WooCommerce) zostawiało
pusty wiersz z własną kreską-separatorem u góry ("2 kreski") — chowamy
cały wiersz-slot, nie tylko zawartość. „.slot-wrapper” to dedykowane
miejsce na tego typu wtyczki (potwierdzone: nie używane przez wiersze
Wartość produktów/Dostawa/Łącznie), więc bezpiecznie chować w całości —
obejmuje to też drugi, podobny widżet PayU „Rata 0% już od…”. */
.wc-block-components-totals-wrapper.slot-wrapper { display: none !important; }
.woocommerce div.product .stock.in-stock { color: var(--success); font-weight: 800; }
.woocommerce div.product .stock.out-of-stock { color: var(--sale); font-weight: 800; }
/* Lista zaufania pod przyciskiem */
.product-trust {
list-style: none;
margin: 6px 0 18px;
padding: 16px 20px;
background: var(--ice);
border-radius: var(--radius-sm);
display: grid;
gap: 6px;
}
.product-trust li { font-size: 14.5px; font-weight: 700; color: var(--blue-dark); }
.woocommerce div.product .product_meta {
font-size: 13.5px;
color: var(--muted);
border-top: 1px solid var(--sky);
padding-top: 14px;
}
.woocommerce div.product .product_meta span { display: block; margin-bottom: 4px; }
/* Ukryty wiersz „Kategoria: ...” (np. „Bez kategorii”, gdy produkt nie ma jeszcze
przypisanej kategorii) — nie wnosi nic klientowi na stronie produktu. */
.woocommerce div.product .product_meta .posted_in { display: none; }
/* Zakładki opisu */
.woocommerce div.product .woocommerce-tabs { margin-top: 48px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0;
margin: 0 0 24px;
border-bottom: 2px solid var(--sky);
display: flex;
gap: 6px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: none;
background: none;
border-radius: 0;
margin: 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-weight: 800;
color: var(--muted);
padding: 12px 18px;
display: block;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--blue); border-bottom-color: var(--blue); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 22px; margin-bottom: 12px; }
/* Produkty powiązane / up-selle */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
font-size: clamp(22px, 3vw, 28px);
text-align: center;
margin: 48px 0 28px;
}
/* =====================================================
WooCommerce — koszyk i zamówienie
===================================================== */
/* Stan „ładowania” koszyka — natychmiastowa reakcja na klik +/-, zanim
nadejdzie faktyczna aktualizacja (debounce + serwer, ok. pół sekundy).
Bez tego wyglądało, jakby kliknięcie nic nie robiło przez chwilę. */
.woocommerce-cart-form.sl-cart-loading {
opacity: 0.55;
pointer-events: none;
transition: opacity 0.15s ease;
}
/* Znacznik „🎁 GRATIS” dopisywany obok etykiety metody wysyłki — czysto
wizualny (main.js), nazwa metody w danych zamówienia zostaje nietknięta.
white-space:nowrap — patrz identyczna poprawka przy .sl-free-gift-badge
niżej (zawijanie na dwie linijki psuło okrągły kształt pigułki). */
.sl-free-ship-tag {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
background: var(--success);
color: var(--white);
font-size: 12px;
font-weight: 800;
}
/* Gratisowe ebooki dołączane do Lizomiski (sl_sync_free_ebooks w functions.php).
white-space:nowrap — w wąskiej kolumnie kasy „🎁 GRATIS” potrafiło się
zawinąć na dwie linijki; przy border-radius:999px robiło to z pigułki
okrągłą bryłkę z krzywo (nie na środku) ułożonym tekstem w środku.
display:inline-flex + justify-content:center dodatkowo wyśrodkowuje
zawartość, gdyby mimo wszystko kiedyś zabrakło miejsca. */
.sl-free-gift-badge {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
background: var(--success);
color: var(--white);
font-size: 11px;
font-weight: 800;
vertical-align: middle;
}
.sl-free-gift-qty { font-weight: 700; color: var(--muted); }
/* Strona Koszyk — zostają produkty, sama SUMA produktów (wiersz „Kwota” —
dokładnie ta liczba, którą pasek darmowej dostawy porównuje z progiem 99 zł,
patrz sl_get_free_shipping_bar_html w functions.php), i przycisk „Przejdź
do płatności”. Znika wybór wysyłki i „Łącznie” — to i tak powtarza się
zaraz potem na stronie Kasy. Przycisk „Zaktualizuj koszyk” znika też —
ilość aktualizuje się sama (patrz main.js), zostaje w DOM tylko po to,
żeby JS mógł go programowo „kliknąć”. */
body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals,
body.woocommerce-cart .cart_totals .order-total,
/* Wiersz widżetu PayU „Zapłać później” — NIE „tr:has(.payu-mini-installments-widget)”
(był tak wcześniej): ten element dokłada dopiero własny skrypt PayU, z
opóźnieniem, więc zaraz po odświeżeniu koszyka przez AJAX (zmiana ilości)
selektor przez chwilę (czasem na stałe) nic nie dopasowywał — widać było
pusty wiersz z samym „:” z etykiety WooCommerce. „.order-total + tr”
łapie ten wiersz po pozycji w tabeli (zawsze zaraz po „Łącznie”), więc
działa natychmiast, niezależnie od tego, czy widżet PayU już się doładował. */
body.woocommerce-cart .cart_totals .order-total + tr,
body.woocommerce-cart .woocommerce-cart-form tr:has(td.actions) {
display: none;
}
/* WooCommerce domyślnie zawęża .cart_totals do 48% i „floatuje” w prawo
(klasyczny układ 2-kolumnowy) — u nas to jedyny widoczny element obok
przycisku, więc wygląda jak oderwana, dosunięta w prawo karta. Pełna
szerokość = ta sama, co tabela produktów nad nim. */
body.woocommerce-cart .cart_totals { width: 100%; float: none; }
/* Kolumna „Kwota” w tabeli produktów ma domyślnie z WooCommerce text-align:left
(nie right!) — wyglądała na wyrównaną do prawej tylko przez przypadek (wąska
kolumna), więc cena w niej i cena w podsumowaniu pod spodem nie kończyły się
dokładnie w tym samym miejscu. Naprawione u źródła, żeby obie kolumny
faktycznie kończyły się w tym samym pikselu. */
body.woocommerce-cart .woocommerce-cart-form th.product-subtotal,
body.woocommerce-cart .woocommerce-cart-form td.product-subtotal { text-align: right; }
body.woocommerce-cart .cart_totals .cart-subtotal { font-weight: 800; font-size: 17px; }
/* Kwota wyrównana do prawej — spójnie z kolumną „Kwota” w tabeli produktów
powyżej (99 zł itd. zawsze przy prawej krawędzi). */
body.woocommerce-cart .cart_totals .cart-subtotal td { text-align: right; }
/* Domyślnie WooCommerce zostawia sporo pustego miejsca pod przyciskiem
(margines przycisku + padding kontenera, razem ~36px) — po ukryciu reszty
wierszy wyglądało to jak druga, zbędna kreska na dole karty. */
body.woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0; }
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button { margin-bottom: 0; }
/* Wszystkie komunikaty WooCommerce (np. „Usunięto: X. Cofnij?”, błędy,
„kupon zastosowany” itd.) wyłączone na stronie Koszyk — tylko tu, nie
na Kasie, gdzie komunikaty walidacji formularza mają zostać widoczne. */
body.woocommerce-cart .woocommerce-notices-wrapper { display: none; }
/* Karta produktu w koszyku na telefonie — WooCommerce domyślnie na tej
szerokości (woocommerce-smallscreen.css, ładowany tylko ≤768px przez
atrybut media na ) chowa miniaturę zdjęcia zupełnie i zamienia
wiersze tabeli w płaskie bloki z etykietkami („Cena:”, „Ilość:” itd.) —
stąd inny, uboższy wygląd niż na desktopie. Budujemy zamiast tego kartę:
zdjęcie + treść, w stylu zbliżonym do kart w sklepie.
text-align:left niżej ma !important — jedyne miejsce w tym pliku, bo
woocommerce-smallscreen.css narzuca „text-align:right” na „tr td” też
z !important, więc samą specyficznością się tego nie przebije. */
@media (max-width: 768px) {
body.woocommerce-cart .shop_table.cart thead { display: none; }
/* Każdy wiersz jest już osobną kartą z własną ramką — bez tego zostawała
dodatkowa pozioma linia pod ostatnim produktem, od ramki samej tabeli
(.woocommerce table.shop_table ma border:1px solid, myślany pod
desktopowy układ „jedna tabela = jedna karta”). */
body.woocommerce-cart .shop_table.cart { border: none; border-radius: 0; }
body.woocommerce-cart .shop_table.cart tr.cart_item {
display: grid;
grid-template-columns: 88px 1fr;
grid-template-areas:
"thumb name"
"thumb price"
"thumb qty"
"thumb subtotal";
column-gap: 14px;
row-gap: 5px;
align-items: start;
position: relative;
padding: 16px;
margin-bottom: 14px;
background: var(--white);
border: 1px solid var(--sky);
border-radius: var(--radius-sm);
}
/* „Zebra” WooCommerce maluje tło na KAŻDEJ komórce co drugiego wiersza
(tr:nth-child(2n) td), nie na całym wierszu — samo zerowanie tła .tr
(jak niżej) tego nie wyłącza, stąd paski w poprzek co drugiej karty. */
body.woocommerce-cart .shop_table.cart tr.cart_item:nth-child(2n) { background: var(--white); }
body.woocommerce-cart .shop_table.cart tr.cart_item td {
display: block;
border: none;
padding: 0;
text-align: left !important;
background: transparent;
}
body.woocommerce-cart .shop_table.cart tr.cart_item td::before { content: none; }
body.woocommerce-cart .shop_table.cart td.product-thumbnail { display: block; grid-area: thumb; }
body.woocommerce-cart .shop_table.cart td.product-thumbnail img {
width: 88px;
height: 88px;
object-fit: cover;
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
}
body.woocommerce-cart .shop_table.cart td.product-remove { position: absolute; top: 12px; right: 12px; }
body.woocommerce-cart .shop_table.cart td.product-remove a {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ice);
color: var(--navy);
font-size: 15px;
}
body.woocommerce-cart .shop_table.cart td.product-name {
grid-area: name;
font-weight: 800;
font-size: 15px;
color: var(--navy);
padding-right: 34px;
}
body.woocommerce-cart .shop_table.cart td.product-name a { color: inherit; }
body.woocommerce-cart .shop_table.cart td.product-price { grid-area: price; color: var(--muted); font-size: 14px; }
body.woocommerce-cart .shop_table.cart td.product-quantity { grid-area: qty; margin-top: 4px; }
body.woocommerce-cart .shop_table.cart td.product-subtotal {
grid-area: subtotal;
font-weight: 800;
font-size: 16px;
color: var(--blue-dark);
margin-top: 2px;
}
}
.free-ship-bar {
background: var(--ice);
border: 2px solid var(--sky);
border-radius: var(--radius-sm);
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
color: var(--blue-dark);
margin-bottom: 24px;
}
.free-ship-bar--done { border-color: var(--success); color: var(--success); background: #ecfaf3; }
.free-ship-track {
display: block;
height: 8px;
background: var(--sky);
border-radius: 999px;
margin-top: 10px;
overflow: hidden;
}
.free-ship-progress {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--blue), var(--blue-hover));
border-radius: 999px;
transition: width .4s ease;
}
.woocommerce table.shop_table {
border: 1px solid var(--sky);
border-radius: var(--radius-sm);
border-collapse: separate;
}
.woocommerce table.shop_table th { color: var(--navy); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--sky); }
/* Miniatura produktu w tabeli "Twoje zamówienie" na kasie (sl_checkout_item_thumbnail
w functions.php) — koszyk ma już własną kolumnę ze zdjęciem, więc .sl-checkout-item
dotyczy tylko kasy. */
.sl-checkout-item { display: flex; align-items: center; gap: 10px; }
.sl-checkout-thumb { flex: 0 0 auto; line-height: 0; }
.sl-checkout-thumb img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
font-family: var(--font);
padding: 12px 16px;
border: 2px solid var(--sky);
border-radius: var(--radius-sm);
font-size: 15px;
height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--blue); outline: none; }
.woocommerce form .form-row label { font-weight: 700; color: var(--navy); font-size: 14px; }
/* Telefon w kasie — wymuszona gwiazdka „wymagane” czysto wizualnie (filtr PHP
w functions.php z jakiegoś powodu jej nie dodawał — prawdopodobnie nadrzędne
ustawienie pól kasy w panelu WooCommerce je nadpisuje). Faktyczne zablokowanie
wysyłki zamówienia bez telefonu i tak działa niezależnie, w PHP.
Ten sam problem (i to samo obejście) dotyczy telefonu wysyłki — pole
widoczne po zaznaczeniu „Wyślij na inny adres”. */
#billing_phone_field .optional,
#shipping_phone_field .optional { display: none; }
#billing_phone_field label::after,
#shipping_phone_field label::after { content: " *"; color: var(--sale); font-weight: 800; }
.woocommerce-checkout #payment {
background: var(--ice);
border-radius: var(--radius);
}
.woocommerce-checkout #payment div.payment_box {
background: var(--white);
border-radius: var(--radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
/* Opisy/informacje prawne PayU pod wybraną metodą płatności (BLIK, płatność
online) — na życzenie ukryte, żeby nic nie „wyskakiwało” po kliknięciu.
!important konieczne — WooCommerce po kliknięciu radiobuttona sam ustawia
„display: block” jako styl INLINE na wybranej metodzie (jQuery .show()),
a to zawsze wygrywa z regułą w arkuszu CSS bez względu na specyficzność. */
.woocommerce-checkout #payment div.payment_box.payment_method_payublik,
.woocommerce-checkout #payment div.payment_box.payment_method_payustandard { display: none !important; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: 20px; }
/* Komunikaty */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
border-radius: var(--radius-sm);
border-top-width: 3px;
font-weight: 700;
background: var(--ice);
color: var(--text);
}
.woocommerce-message { border-top-color: var(--success); }
.woocommerce-info { border-top-color: var(--blue); }
.woocommerce-info::before { color: var(--blue); }
.woocommerce-message::before { color: var(--success); }
/* ---------- Pasek USP ---------- */
.usp-strip { background: var(--navy); color: var(--white); }
.usp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding-top: 34px;
padding-bottom: 34px;
}
.usp { display: flex; align-items: center; gap: 14px; }
.usp .ico {
width: 46px; height: 46px;
border-radius: 12px;
background: rgba(255, 255, 255, .1);
display: grid;
place-items: center;
font-size: 21px;
flex-shrink: 0;
}
.usp b { display: block; font-size: 15px; }
.usp small { color: #b9cbe4; font-size: 13px; }
/* ---------- Osobisty akcent (zdjęcie Rokiego + cytat Alicji) ---------- */
.founder-note { background: var(--ice); }
.founder-note-inner {
max-width: 640px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.founder-photo { position: relative; margin-bottom: 22px; }
.founder-photo img,
.founder-photo .img-ph {
width: 148px;
height: 148px;
border-radius: 50%;
object-fit: cover;
box-shadow: var(--shadow-hover);
border: 4px solid var(--white);
}
.founder-photo-badge {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--blue);
color: var(--white);
font-size: 12px;
font-weight: 800;
padding: 5px 14px;
border-radius: 999px;
white-space: nowrap;
box-shadow: var(--shadow);
}
.founder-quote-mark {
font-size: 64px;
line-height: 1;
color: var(--sky);
font-weight: 900;
margin-top: 14px;
}
.founder-quote-text {
font-size: clamp(18px, 2.4vw, 22px);
font-weight: 700;
color: var(--navy);
line-height: 1.5;
margin-top: -18px;
}
.founder-signature { margin-top: 18px; }
.founder-signature b { display: block; color: var(--navy); font-size: 16px; }
.founder-signature span { color: var(--muted); font-size: 14px; }
/* ---------- Teaser historii ---------- */
.story-teaser {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 48px;
align-items: center;
}
.story-teaser .img-ph { aspect-ratio: 4 / 3.6; border-radius: 24px; }
.story-teaser .story-img { border-radius: 24px; box-shadow: var(--shadow); }
.story-teaser h2 { font-size: clamp(26px, 4vw, 34px); margin-bottom: 14px; }
.story-teaser p { color: var(--muted); margin-bottom: 14px; font-size: 17px; }
/* ---------- Opinie ---------- */
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.review-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 26px;
}
.review-card .stars { margin-bottom: 12px; font-size: 16px; color: var(--star); letter-spacing: 1px; }
.review-card p { font-size: 15px; margin-bottom: 16px; }
.review-card .author { display: flex; align-items: center; gap: 12px; }
.review-card .avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--sky);
display: grid;
place-items: center;
font-weight: 900;
color: var(--blue-dark);
}
.review-card .author b { display: block; font-size: 14px; color: var(--navy); }
.review-card .author small { color: var(--muted); font-size: 12.5px; }
/* ---------- Opinie produktu ---------- */
/* Sekcja na stronie produktu (sl_product_reviews_section w functions.php) —
pojedyncza opinia reużywa .review-card/.avatar wprost (patrz blok wyżej),
stąd tylko to, czego tam jeszcze nie ma: gwiazdki WooCommerce (klasa
.star-rating, nie własna .stars), odznaka weryfikacji, nagłówek sekcji
z dużą średnią i formularz dodawania opinii — kompletnie nieostylowany
w motywie do tej pory. */
/* clear:both + width:100% — to samo obejście co .product-landing wyżej w pliku:
div.images/div.summary WooCommerce są position float:left, więc bez tego
sekcja próbowałaby wpłynąć w wolną przestrzeń obok nich zamiast zejść pod
spód. Dotyczy głównie dwóch ebooków bez pliku landingu (sl_product_landing_file) —
przy pozostałych produktach .product-landing już czyści float wcześniej,
ale reguła nie zaszkodzi nigdzie indziej. */
.woocommerce div.product .sl-reviews-section {
clear: both;
width: 100%;
}
.sl-reviews-summary {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.sl-reviews-avg { font-size: 32px; font-weight: 900; color: var(--navy); }
/* Kolor gwiazdek tu już ustawiony globalnie (".woocommerce div.product .star-rating"
wyżej w pliku) — .sl-reviews-summary leży wewnątrz div.product. */
/* Klik przewija do listy opinii (slInitReviewsMore-sąsiad w main.js) —
podkreślenie na hover sygnalizuje, że to nie jest zwykły tekst. */
.sl-reviews-summary-count { cursor: pointer; color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s ease; }
.sl-reviews-summary-count:hover { text-decoration-color: var(--blue); }
/* Gwiazdki przy pojedynczej opinii — .review-card .stars (wyżej) stylizuje
inną, ręcznie pisaną klasę z opinii na stronie głównej; tu jest natywny
.star-rating z WooCommerce, więc dokładamy tylko odstęp pod spodem. Kolor
już ustawiony globalnie (".woocommerce div.product .star-rating"). */
.review-card .star-rating { margin-bottom: 10px; }
.sl-review-verified {
display: inline-block;
margin-left: 6px;
color: var(--success);
font-weight: 700;
}
#opinie-lista .commentlist {
list-style: none;
margin: 36px 0 0;
padding: 0;
display: grid;
gap: 20px;
}
/* Dokładane przez slInitReviewsMore (main.js) — bez JS ta klasa nigdy się nie
pojawia, więc wszystkie opinie od razu widoczne (patrz komentarz w JS). */
#opinie-lista .commentlist li.is-hidden { display: none; }
/* "Zwiń opinie" ma is-hidden już w surowym HTML-u (PHP) — bez tej reguły
byłby widoczny obok "Pokaż więcej" od pierwszego załadowania strony,
zanim JS w ogóle zdąży cokolwiek policzyć. */
.sl-reviews-more.is-hidden, .sl-reviews-less.is-hidden { display: none; }
/* width: max-content — .btn (przyciski, wyżej w pliku) ma domyślnie
display:inline-flex, więc sam margin:auto by nic nie wyśrodkował (to
działa tylko na blokowe pudełka o ograniczonej szerokości). display:flex
tutaj zamienia go w pudełko blokowe, ale bez ograniczenia szerokości
rozciągnąłby się na całą dostępną szerokość — width:max-content każe mu
zostać tak wąskim, jak jego właściwa treść. */
.sl-reviews-more, .sl-reviews-less { display: flex; width: max-content; margin: 28px auto 0; }
/* Komunikat błędu formularza opinii (dokładany przez JS — slInitReviewFormAjax
w main.js — przy błędzie walidacji, np. złym e-mailu). Reużywa wyglądu
.woocommerce-error (main.css wyżej: tło, obwódka, czerwony akcent z
arkusza samego WooCommerce), tylko chowanie na start i odstęp pod spodem. */
.sl-review-form-error.is-hidden { display: none; }
.sl-review-form-error { margin-bottom: 20px; }
/* Formularz dodawania opinii — WordPress core comment_form() nie owija pól
w .form-row (to konwencja WooCommerce, tu jej nie ma), więc reguły z
".woocommerce form .form-row" wyżej w pliku w ogóle nie trafiają. Osobny,
równoległy zestaw dla #respond/#commentform. */
#respond {
background: var(--ice);
border-radius: var(--radius);
padding: 28px;
margin-top: 40px;
}
#respond .comment-reply-title { font-size: 22px; margin-bottom: 18px; }
#commentform p { margin-bottom: 16px; }
#commentform label { display: block; font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 6px; }
#commentform .required { color: var(--sale); font-weight: 800; }
#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
width: 100%;
font-family: var(--font);
padding: 12px 16px;
border: 2px solid var(--sky);
border-radius: var(--radius-sm);
font-size: 15px;
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus { border-color: var(--blue); outline: none; }
#commentform textarea { resize: vertical; }
#commentform .comment-form-email small { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; font-weight: 400; }
#commentform .form-submit { margin-bottom: 0; }
/* Wybór oceny w formularzu — surowy