/* ===== PALETA (spójna z ciemnym motywem) =====
surface: #15171c surface-2: #1c1f26
border: rgba(255,255,255,.10)
text: #f0f0f0 muted: #c4cad3 accent: #ff6a00 */
/* --- ZRZUT 2: logo w stopce = biały kwadrat. Powód: filter brightness(0) invert(1)
robi z całego ciemnego logo.png biały prostokąt. logo.png ma już biały tekst na ciemnym tle. --- */
.aloha-footer-logo img { filter:none !important; -webkit-filter:none !important; }
/* --- ZRZUT 1: nagłówki sekcji na karcie produktu (były #1a1a1a = niewidoczne) --- */
.aloha-tab-content::before { color:#ffffff !important; }
#description::before, #additional::before, #reviews::before { color:#ffffff !important; }
/* --- ZRZUT 3: koszyk – szary prostokąt (divider) + spójne ciemne podsumowanie --- */
.aloha-cart-summary { background:#15171c !important; border:1px solid rgba(255,255,255,.08) !important; }
.aloha-summary-title { color:#ffffff !important; }
.aloha-summary-row { color:#dfe3e8 !important; }
.aloha-summary-row.aloha-total { color:#ffffff !important; }
/* divider: inny szeroki styl dawał mu padding 28px => 56px szary prostokąt. Zerujemy padding/min-height. */
.aloha-cart-summary > .aloha-summary-divider,
.aloha-cart-summary .aloha-summary-divider {
height:1px !important; min-height:0 !important;
padding:0 !important;
margin:14px 0 !important;
background:rgba(255,255,255,.14) !important;
border:0 !important; border-radius:0 !important;
}
/* --- ZRZUT 4: pop-up "Zaloguj się lub stwórz konto" --- JEDNOLITE ciemne tło.
Motyw wymuszał #0D0D0D (czarny) na ikonie/przyciskach/kontenerze, a modal był #1E1E1E (szary)
=> brzydki miks czarno/szary + kwadratowe czarne diwy pod zaokrąglonymi przyciskami.
Kotwiczymy w ID #alohaCheckoutLoginModal (overlay) => selektor ID bije reguły motywu na klasach. */
#alohaCheckoutLoginModal { background:rgba(0,0,0,.82) !important; }
#alohaCheckoutLoginModal .aloha-checkout-login-modal {
background:#1e1e1e !important;
border:1px solid #333 !important;
border-radius:18px !important;
box-shadow:0 24px 70px rgba(0,0,0,.7) !important;
}
/* zdejmij czarne tła z elementów wewnętrznych => jedno spójne szare tło */
#alohaCheckoutLoginModal .aloha-checkout-icon,
#alohaCheckoutLoginModal .aloha-checkout-buttons,
#alohaCheckoutLoginModal .aloha-checkout-divider { background:transparent !important; border:0 !important; }
#alohaCheckoutLoginModal h2 { color:#ffffff !important; }
#alohaCheckoutLoginModal p { color:#c4cad3 !important; }
#alohaCheckoutLoginModal .aloha-checkout-divider { color:#8b939e !important; }
#alohaCheckoutLoginModal .aloha-checkout-divider::before,
#alohaCheckoutLoginModal .aloha-checkout-divider::after { background:rgba(255,255,255,.16) !important; }
/* przyciski: primary = pomarańczowy CTA, reszta = obrys (spójne, zaokrąglone, bez czarnych kwadratów) */
#alohaCheckoutLoginModal .aloha-checkout-btn-primary {
background:linear-gradient(135deg,#ff8c00,#ff6a00) !important; color:#fff !important; border:0 !important;
box-shadow:0 4px 16px rgba(255,106,0,.30) !important;
}
#alohaCheckoutLoginModal .aloha-checkout-btn-secondary { background:transparent !important; color:#ff8c1a !important; border:2px solid #ff6a00 !important; }
#alohaCheckoutLoginModal .aloha-checkout-btn-secondary:hover { background:#ff6a00 !important; color:#fff !important; }
#alohaCheckoutLoginModal .aloha-checkout-btn-guest { background:transparent !important; color:#c4cad3 !important; border:1px solid rgba(255,255,255,.25) !important; }
#alohaCheckoutLoginModal .aloha-checkout-btn-guest:hover { background:rgba(255,255,255,.06) !important; color:#fff !important; }
/* --- ZRZUT 5: kasa (checkout) – czytelne pola formularza --- */
.aloha-input, .aloha-textarea, .aloha-input.country_select {
background:#1c1f26 !important;
border:2px solid rgba(255,255,255,.16) !important;
color:#f0f0f0 !important;
}
.aloha-input::placeholder, .aloha-textarea::placeholder { color:#8b939e !important; }
.aloha-input:focus, .aloha-textarea:focus { border-color:#ff6a00 !important; }
/* --- ZRZUT 6: logowanie / Moje konto (formularz WooCommerce) --- */
/* jedno tło: zdejmij szare „przebitki” z zagnieżdżonych kontenerów */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce > .u-container,
.woocommerce-account form.woocommerce-form { background:transparent !important; box-shadow:none !important; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
background:#15171c !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:14px !important;
padding:26px 28px !important;
max-width:480px !important;
margin:18px auto !important;
}
.woocommerce-account h1, .woocommerce-account h2,
.woocommerce-account label, .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-login__rememberme { color:#e8e8e8 !important; }
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-Input, .woocommerce-Input--text {
background:#1c1f26 !important;
border:1.5px solid rgba(255,255,255,.16) !important;
color:#f0f0f0 !important;
border-radius:10px !important;
padding:11px 14px !important;
box-sizing:border-box !important;
}
.woocommerce-account input::placeholder { color:#8b939e !important; }
/* --- ZRZUT 7 (+6): strony info/regulaminy/polityki/zwroty – spójnie ciemne, czytelne --- */
.aloha-page-wrap { color:#d7dbe0 !important; }
.aloha-page-section {
background:#15171c !important;
border:1px solid rgba(255,255,255,.06) !important;
box-shadow:none !important;
}
.aloha-page-section h3 { color:#ffffff !important; }
.aloha-page-section p,
.aloha-page-section li,
.aloha-page-section ul,
.aloha-page-section ol { color:#c4cad3 !important; }
.aloha-highlight-box {
background:rgba(255,106,0,.08) !important;
border:1.5px solid #ff6a00 !important;
color:#e8e8e8 !important;
}
.aloha-info-card {
background:#1c1f26 !important;
border:1.5px solid rgba(255,255,255,.10) !important;
}
.aloha-info-card strong { color:#ffffff !important; }
.aloha-info-card, .aloha-info-card span { color:#c4cad3 !important; }
.aloha-shipping-table td { color:#dfe3e8 !important; border-color:rgba(255,255,255,.08) !important; }
.aloha-shipping-table tr:nth-child(even) td { background:rgba(255,255,255,.03) !important; }
.aloha-login-upsell {
background:linear-gradient(135deg, rgba(255,140,0,.12), rgba(255,106,0,.05)) !important;
border:2px solid #ff6a00 !important;
}
.aloha-login-upsell h3 { color:#ffffff !important; }
.aloha-login-upsell p { color:#c4cad3 !important; }
.aloha-order-row {
background:#1c1f26 !important;
border:1.5px solid rgba(255,255,255,.10) !important;
}
.aloha-order-date { color:#9aa1ab !important; }
.aloha-contact-form label { color:#b9c0c9 !important; }
.aloha-contact-form input[type="text"],
.aloha-contact-form input[type="email"],
.aloha-contact-form input[type="tel"],
.aloha-contact-form select,
.aloha-contact-form textarea {
background:#1c1f26 !important;
border:1.5px solid rgba(255,255,255,.16) !important;
color:#f0f0f0 !important;
}
/* --- ZRZUT 5: KASA responsywnie na telefonie ---
Problem: zagnieżdżone paddingi (body 28 + kontener 20 + form 28 + billing 28 = ~104px na stronę)
+ grid węższy niż jego element => treść wychodziła poza ekran / była ucięta na wąskich telefonach. */
@media (max-width:680px) {
body.woocommerce-checkout { padding-left:6px !important; padding-right:6px !important; }
.aloha-checkout-container { padding-left:8px !important; padding-right:8px !important; max-width:100% !important; }
.aloha-checkout-form, form.checkout.aloha-checkout-form { padding-left:0 !important; padding-right:0 !important; }
.aloha-checkout-grid { grid-template-columns:1fr !important; gap:14px !important; padding:0 !important; }
.aloha-checkout-billing, .aloha-checkout-summary {
min-width:0 !important; width:auto !important; max-width:100% !important;
padding-left:16px !important; padding-right:16px !important;
}
.aloha-summary-section { min-width:0 !important; padding-left:16px !important; padding-right:16px !important; }
.aloha-input, .aloha-textarea, .aloha-checkout-summary, .aloha-checkout-billing,
.woocommerce-checkout .form-row, .woocommerce-checkout input, .woocommerce-checkout select {
box-sizing:border-box !important; max-width:100% !important;
}
/* domyślny kupon/komunikat WooCommerce też płynne */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info { max-width:100% !important; box-sizing:border-box !important; }
}
/* bezpiecznik: brak poziomego scrolla na kasie */
body.woocommerce-checkout { overflow-x:hidden !important; }
/* --- mobile: mniejsze marginesy/paddingi (za duże na telefonie) --- */
@media (max-width:600px) {
.aloha-page-wrap { margin:14px auto 30px !important; padding:0 12px !important; }
.aloha-page-hero { padding:24px 20px !important; border-radius:14px !important; }
.aloha-page-hero h1 { font-size:24px !important; }
.aloha-page-section { padding:18px 16px !important; }
.aloha-checkout-login-modal { padding:30px 22px !important; width:92% !important; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register { padding:20px 16px !important; }
}
/* ============================================================
RUNDA 2 – zgłoszenia po telefonie
============================================================ */
/* --- (3) Licznik koszyka: ZAWSZE pomarańczowy (JS robił go przezroczystym po scrollu => czarny) --- */
.aloha-cart-count,
.aloha-cart-toggle .aloha-cart-count,
body.aloha-bars-hidden .aloha-cart-count {
background:#ff6a00 !important;
color:#ffffff !important;
}
/* --- (4) Menu mobilne: czytelność (tytuł ginął na ciemnym, kafle kategorii białe z bladym tekstem) --- */
.aloha-mobile-categories-title { color:#ffffff !important; }
.aloha-mobile-category {
background:#1c1f26 !important;
border:1px solid rgba(255,255,255,.10) !important;
}
.aloha-mobile-category-link { color:#f0f0f0 !important; }
.aloha-mobile-cat-toggle { color:#ff8c1a !important; }
.aloha-mobile-link {
background:rgba(255,255,255,.05) !important;
color:#f0f0f0 !important;
border:1px solid rgba(255,255,255,.08) !important;
}
.aloha-mobile-link:hover { background:#ff6a00 !important; color:#fff !important; }
/* --- (5) Strona produktu: usuń zdublowaną dostępność (domyślny WooCommerce "23 w magazynie"),
zostaje stylowany ".aloha-stock-status" = "Dostępny w magazynie" --- */
.single-product .aloha-cart-form p.stock,
.woocommerce div.product p.stock.in-stock { display:none !important; }
/* --- (6) Opinie produktu: dopasuj do strony – czcionka Montserrat + mniejsze rozmiary --- */
.woocommerce-Reviews, .woocommerce-Reviews *,
#reviews, #reviews *, #review_form_wrapper, #review_form_wrapper * {
font-family:Montserrat,"Helvetica Neue",sans-serif !important;
}
#reviews h2, #review_form_wrapper h3, .comment-reply-title { font-size:20px !important; margin-bottom:18px !important; }
#reviews p, .woocommerce-Reviews p, .comment-text p, .woocommerce-noreviews,
.comment-form label, .comment-form input, .comment-form textarea { font-size:14px !important; }
#reviews .comment-text, #reviews .meta { line-height:1.6 !important; }
/* --- (1)+(2) Slider hero na telefonie: strzałki nie zasłaniają tekstu, CTA nie zasłania kropek --- */
@media (max-width:768px) {
.aloha-slide-content { padding:18px 56px 54px !important; }
.aloha-slider-nav { width:34px !important; height:34px !important; }
.aloha-slider-prev { left:6px !important; }
.aloha-slider-next { right:6px !important; }
.aloha-slider-dots { bottom:14px !important; }
.aloha-slide-title { font-size:24px !important; margin-bottom:12px !important; }
.aloha-slide-text { font-size:14px !important; margin-bottom:16px !important; }
.aloha-slide-btn { padding:12px 26px !important; font-size:15px !important; }
}
/* ============================================================
RUNDA 3 – strony logowania Theme My Login (/login/, /register/, /lostpassword/)
Szablon Nicepage renderuje je poza WooCommerce, więc reguły z ZRZUT 6
(.woocommerce-account ...) ich nie łapały i zostawały kolory z jasnej palety.
============================================================ */
/* --- (A) Linki "Zapomniane hasło" / "Zarejestruj się" / "Zaloguj się" ---
Motyw daje im klasę .u-text-black => color:#000 !important na czarnym tle.
Widać było tylko pomarańczową kreskę pod tekstem.
Selektor .tml a.u-button-style.u-text-black ma wyższą specyficzność niż
a.u-button-style.u-text-black z palety, więc wygrywa mimo tego samego !important. */
.tml a.u-button-style.u-text-black,
.tml a.u-button-style.u-text-black[class*="u-border-"],
.tml a.u-login-forgot-password,
.tml a.u-login-create-account {
color:#ff8c1a !important;
-webkit-text-fill-color:#ff8c1a !important;
}
.tml a.u-button-style.u-text-black:hover,
.tml a.u-button-style.u-text-black[class*="u-border-"]:hover,
.tml a.u-login-forgot-password:hover,
.tml a.u-login-create-account:hover {
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}
/* --- (B) Pola formularza ---
Klasa .u-none dawała background:transparent + color:inherit, przez co pola
nie miały własnego tła ani pewnego koloru tekstu. Ustawiamy jawnie,
spójnie z polami kasy (ZRZUT 5). */
.tml .u-input.u-none,
.tml input.u-input[type="text"],
.tml input.u-input[type="email"],
.tml input.u-input[type="password"] {
background:#1c1f26 !important;
background-color:#1c1f26 !important;
background-image:none !important;
border:1.5px solid rgba(255,255,255,.16) !important;
color:#f0f0f0 !important;
-webkit-text-fill-color:#f0f0f0 !important;
caret-color:#ff6a00 !important;
}
.tml .u-input::placeholder { color:#8b939e !important; -webkit-text-fill-color:#8b939e !important; }
.tml .u-input:focus {
border-color:#ff6a00 !important;
outline:none !important;
box-shadow:0 0 0 3px rgba(255,106,0,.15) !important;
}
/* --- (C) Autouzupełnianie przeglądarki ---
Chrome/Edge malują pole na bladożółto z czarnym tekstem (widoczne na zrzucie klienta).
Koloru tła autofillu nie da się nadpisać przez background — stąd inset box-shadow. */
.tml .u-input:-webkit-autofill,
.tml .u-input:-webkit-autofill:hover,
.tml .u-input:-webkit-autofill:focus,
.tml .u-input:-webkit-autofill:active {
-webkit-box-shadow:0 0 0 1000px #1c1f26 inset !important;
box-shadow:0 0 0 1000px #1c1f26 inset !important;
-webkit-text-fill-color:#f0f0f0 !important;
caret-color:#f0f0f0 !important;
transition:background-color 9999s ease-in-out 0s !important;
}
/* --- (D) Etykiety, "Zapamiętaj mnie", komunikaty błędów --- */
.tml .u-label,
.tml .u-field-label,
.tml label { color:#e8e8e8 !important; }
.tml input[type="checkbox"] { accent-color:#ff6a00 !important; }
.tml .tml-alerts .tml-error,
.tml .tml-alerts .tml-success,
.tml .tml-alerts p {
background:#1c1f26 !important;
color:#f0f0f0 !important;
border-radius:8px !important;
padding:12px 14px !important;
}
.tml .tml-alerts a { color:#ff8c1a !important; }
/* ============================================================
RUNDA 4 – rozwijane menu kategorii na PC (.aloha-submenu)
============================================================ */
/* --- (A) Tło podmenu ---
Właściwa przyczyna była w pro-tools-dark-theme.php: reguła dolnego paska
"kup teraz" [class*="aloha-sticky"] * { background:transparent !important }
dopasowuje się po FRAGMENCIE nazwy klasy, więc po przewinięciu, gdy nagłówek
dostaje klasę .aloha-sticky, zerowała tło wszystkim jego potomkom - podmenu
robiło się przezroczyste i zlewało z treścią strony. Selektor został tam
zawężony do [class*="aloha-sticky-"]. Poniżej dodatkowe zabezpieczenie na
wypadek odtworzenia tamtego pliku + panel wyraźnie odcięty od tła strony
(samo #0D0D0D zlewało się z tłem strony, bo to ten sam kolor). */
.aloha-submenu,
.aloha-header-wrapper .aloha-submenu,
.aloha-header-wrapper.aloha-sticky .aloha-submenu,
.aloha-header-categories .aloha-submenu {
background:#1E1E1E !important;
background-color:#1E1E1E !important;
background-image:none !important;
border:1px solid #2E2E2E !important;
border-radius:10px !important;
box-shadow:0 18px 44px rgba(0,0,0,.65) !important;
}
.aloha-header-wrapper.aloha-sticky .aloha-submenu-inner { background:transparent !important; }
/* --- (B) Przewijanie ---
Kategorii jest tyle (np. "Narzędzia" ma ich ~60), że lista wychodziła poza
dolną krawędź ekranu i dalszych pozycji nie dało się kliknąć.
Nagłówek jest fixed: pełny ma ~220 px, po przewinięciu (bez pasków) ~136 px -
stąd dwie wartości max-height. overscroll-behavior pilnuje, żeby kółko myszy
w menu nie przewijało strony pod spodem. */
.aloha-submenu {
max-height:calc(100vh - 236px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
overscroll-behavior:contain !important;
scrollbar-width:thin !important;
scrollbar-color:#3a3a3a transparent !important;
}
.aloha-header-wrapper.aloha-sticky .aloha-submenu {
max-height:calc(100vh - 152px) !important;
}
.aloha-submenu::-webkit-scrollbar { width:10px !important; }
.aloha-submenu::-webkit-scrollbar-track { background:transparent !important; }
.aloha-submenu::-webkit-scrollbar-thumb {
background:#3a3a3a !important;
border:2px solid #1E1E1E !important;
border-radius:8px !important;
}
.aloha-submenu::-webkit-scrollbar-thumb:hover { background:#ff6a00 !important; }
/* --- (C) Podświetlenie pozycji pod kursorem ---
Motyw wymuszał na linkach w nagłówku background:transparent, więc z hovera
zostawał sam pomarańczowy tekst i trudno było trafić w wiersz. */
.aloha-submenu .aloha-submenu-link:hover,
.aloha-header-categories .aloha-submenu a:hover {
background:rgba(255,255,255,.07) !important;
color:#ff8c1a !important;
-webkit-text-fill-color:#ff8c1a !important;
}
/* ============================================================
RUNDA 5 – kasa: nadmiar ramek i metody płatności
============================================================ */
/* --- (A) Matrioszka ramek przy wyborze wysyłki ---
Trzy elementy dostawały identyczny styl karty (ramka 1px #2e2e2e, tło #1e1e1e,
radius 12px, padding 28px): .aloha-summary-section, .aloha-total-row.aloha-shipping-row
oraz .aloha-shipping-methods. Karta ma być jedna - ta zewnętrzna. Dwie wewnętrzne
zdejmujemy; zostają same kafelki poszczególnych metod. Przy okazji wracają 56 px
szerokości, które zjadały zagnieżdżone paddingi. */
.aloha-checkout-summary .aloha-total-row.aloha-shipping-row,
.aloha-checkout-summary .aloha-shipping-methods {
background:transparent !important;
background-color:transparent !important;
border:0 !important;
border-radius:0 !important;
padding:0 !important;
box-shadow:none !important;
}
.aloha-checkout-summary .aloha-total-row.aloha-shipping-row { padding:10px 0 !important; }
.aloha-checkout-summary .aloha-shipping-methods { margin-top:8px !important; }
/* kafelki metod zostają, tylko trochę ciaśniej */
.aloha-shipping-methods .aloha-radio-label {
border-radius:10px !important;
padding:12px 14px !important;
}
/* Formularz kasy był kartą opakowującą inne karty - zdejmujemy tło i ramkę,
padding zostaje, żeby nie zmieniać odstępów. */
form.aloha-checkout-form.checkout {
background:transparent !important;
background-color:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* --- (B) Metoda płatności: opis pokazywał się dwa razy ---
Szablon wypisuje opis bramki w etykiecie (.aloha-payment-description) ORAZ
w standardowym pudełku WooCommerce (.payment_box). Dopóki przelew nie miał
opisu, nie było tego widać. Zostawiamy .payment_box, bo pokazuje się tylko
dla wybranej metody i mieści też pola kart. */
#payment .aloha-payment-description { display:none !important; }
/* Szary trójkąt to domyślny .payment_box::before WooCommerce. Przy ujemnym
marginesie pudełka nachodził na nazwę metody. */
#payment .payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
content:none !important;
display:none !important;
border:0 !important;
}
#payment .payment_box {
margin:8px 0 10px !important;
border:1px solid #2e2e2e !important;
border-radius:10px !important;
background:#151515 !important;
}
/* było #666 na tle #111 - nieczytelne */
#payment .payment_box,
#payment .payment_box p {
color:#c4cad3 !important;
-webkit-text-fill-color:#c4cad3 !important;
}
/* ============================================================
RUNDA 6 – metoda płatności jako klikalna belka
Wcześniej był to sam radiobutton z tekstem obok: cel kliknięcia wielkości
kilkunastu pikseli i brak widocznej informacji, co jest zaznaczone.
Belka ma szerokość pudełka z opisem, żeby całość czytała się jako jeden wybór.
============================================================ */
#payment ul.wc_payment_methods,
#payment ul.payment_methods {
list-style:none !important;
margin:0 !important;
padding:0 !important;
}
/* UWAGA: po przeliczeniu AJAX-em WooCommerce podmienia sekcję płatności SWOIM
szablonem, w którym nie ma klas .aloha-* (input i label są rodzeństwem, nie
zagnieżdżone). Dlatego belką jest , a nie etykieta - to jedyny element
wspólny dla obu układów. */
#payment ul.payment_methods > li.wc_payment_method {
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
margin:0 0 10px !important;
padding:0 !important;
overflow:hidden !important;
background:#151515 !important;
border:2px solid #2e2e2e !important;
border-radius:10px !important;
transition:border-color .15s ease, background-color .15s ease !important;
}
#payment ul.payment_methods > li.wc_payment_method:hover {
border-color:#ff6a00 !important;
background:rgba(255,106,0,.06) !important;
}
#payment ul.payment_methods > li.wc_payment_method:has(input[name="payment_method"]:checked) {
border-color:#ff6a00 !important;
background:rgba(255,106,0,.10) !important;
}
/* radiobutton - w obu układach */
#payment input[name="payment_method"] {
width:20px !important;
height:20px !important;
flex-shrink:0 !important;
accent-color:#ff6a00 !important;
cursor:pointer !important;
}
/* układ standardowy WooCommerce: input i label obok siebie */
#payment ul.payment_methods > li.wc_payment_method > input[name="payment_method"] {
margin:0 0 0 18px !important;
}
#payment ul.payment_methods > li.wc_payment_method > label {
flex:1 1 auto !important;
margin:0 !important;
padding:16px 14px !important;
font-size:16px !important;
font-weight:600 !important;
color:#f0f0f0 !important;
cursor:pointer !important;
}
/* układ z szablonu sklepu: input zagnieżdżony w etykiecie - etykieta wypełnia
belkę, ale własnej ramki i tła już nie rysuje, bo ma je */
#payment .aloha-payment-method {
display:flex !important;
align-items:center !important;
gap:14px !important;
flex:1 1 100% !important;
box-sizing:border-box !important;
margin:0 !important;
padding:16px 18px !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
cursor:pointer !important;
}
#payment .aloha-payment-method .aloha-payment-radio { margin:0 !important; }
#payment .aloha-payment-label { flex:1 1 auto !important; }
#payment .aloha-payment-title {
font-size:16px !important;
font-weight:600 !important;
color:#f0f0f0 !important;
}
/* opis wybranej metody - pełna szerokość belki, oddzielony kreską */
#payment ul.payment_methods > li.wc_payment_method .payment_box {
flex:1 1 100% !important;
width:100% !important;
box-sizing:border-box !important;
margin:0 !important;
border:0 !important;
border-top:1px solid #2e2e2e !important;
border-radius:0 !important;
background:#111 !important;
}
/* ============================================================
RUNDA 7 – przycisk InPost Pay w koszyku
Widget dokładany przez mu-plugin aloha-inpost-pay-koszyk.php rozciągał się
na całą szerokość okna, bo nie trafia w żaden kontener motywu.
Dopasowanie do .aloha-cart-container (max 1200 px + 32 px paddingu).
============================================================ */
.aloha-inpost-pay-koszyk {
max-width:1200px !important;
margin:0 auto 18px !important;
padding:0 32px !important;
box-sizing:border-box !important;
}
@media (max-width:600px) {
.aloha-inpost-pay-koszyk { padding:0 12px !important; }
}
/* ============================================================
RUNDA 8 – karta produktu: separator „LUB" i nadmiar pudełek
============================================================ */
/* --- (A) „LUB" między zwykłym dodaniem do koszyka a InPost Pay ---
Dwa przyciski jeden pod drugim, oba podpisane „Dodaj do koszyka", wyglądały
jak duplikat. Kreska z podpisem pokazuje, że to alternatywna ścieżka zakupu.
Tło podpisu musi być w kolorze tła strony (#0d0d0d), żeby przykryć kreskę. */
/* Wysoka specyficzność celowo: motyw zeruje ramki na tym elemencie własną
regułą z !important, przez co kreska separatora się nie rysowała. */
html body.single-product div.izi-widget-placeholder.izi-widget-product {
/* clear:both jest konieczny - przycisk „Dodaj do koszyka" jest opływany,
a czyszczenie opływania siedzi dopiero w diwie wewnątrz widgetu, więc bez
tego kreska i podpis lądowały na pomarańczowym przycisku */
clear:both !important;
display:block !important;
position:relative !important;
/* Odstęp MUSI dać padding, nie margines. Przy czyszczeniu opływania
przeglądarka pochłania górny margines (clearance) - na telefonie odstęp
wychodził 0 px mimo margin-top:34px, przez co podpis lądował na przycisku.
Kreskę rysujemy tłem 30 px niżej, czyli pod poświatą przycisku. */
margin-top:0 !important;
padding-top:56px !important;
border-top:0 !important;
background-image:linear-gradient(#3a3a3a,#3a3a3a) !important;
background-size:100% 1px !important;
background-position:0 30px !important;
background-repeat:no-repeat !important;
}
.single-product .izi-widget-placeholder.izi-widget-product::before {
content:"LUB";
position:absolute !important;
top:21px !important; /* 30 px kreski minus połowa wysokości podpisu */
left:50% !important;
transform:translateX(-50%) !important;
padding:0 14px !important;
background:#0d0d0d !important;
color:#8b939e !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.14em !important;
line-height:18px !important;
}
/* --- (B) Cena: ramka wokół samej kwoty ---
Zbiorcza reguła motywu dokleiła styl karty do z kwotą. Cena ma być
ceną, nie kafelkiem. */
.aloha-product-info .aloha-price .woocommerce-Price-amount,
.aloha-product-info .aloha-price bdi {
background:transparent !important;
background-color:transparent !important;
border:0 !important;
border-radius:0 !important;
padding:0 !important;
box-shadow:none !important;
}
/* --- (C) Krótki opis: pudełko z innym tłem ---
Opis produktu wyglądał jak wyróżniony blok informacyjny. Zostaje sam tekst. */
.aloha-product-info .aloha-description > p,
.aloha-product-info .aloha-description {
background:transparent !important;
background-color:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
.aloha-product-info .aloha-description > p {
padding:0 !important;
color:#c4cad3 !important;
line-height:1.65 !important;
}
/* --- (D) Dostępność: kafelek w stylu "Szybka wysyłka" (prośba klienta 10.10.2026) ---
Wcześniej zielona pigułka z osobną kropką obok - odstawała od kafelków pod spodem.
Teraz ten sam kafelek (tło, ramka, promień, odstęp) z ikoną ✓ w środku. Kropkę z szablonu
chowamy, ikona to maska SVG na ::before kontenera, więc kolor bierze z currentColor. */
html body .aloha-product-info .aloha-stock-status > span:not(.aloha-stock-dot)::before { content:none !important; display:none !important; }
html body .aloha-product-info .aloha-stock-status > .aloha-stock-dot { display:none !important; }
html body .aloha-product-info .aloha-stock-status {
display:flex !important; align-items:center !important; gap:10px !important;
margin:14px 0 4px !important; padding:12px 14px !important;
background:#1c1f26 !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:10px !important;
color:#3fce8c !important; -webkit-text-fill-color:#3fce8c !important; box-shadow:none !important;
font-size:14px !important; line-height:1.5 !important; width:auto !important;
}
html body .aloha-product-info .aloha-stock-status::before {
content:"" !important; display:block !important; flex:0 0 auto !important; width:18px !important; height:18px !important;
background:currentColor !important; border:0 !important; border-radius:0 !important; margin:0 !important;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body .aloha-product-info .aloha-stock-status > span:not(.aloha-stock-dot) {
background:transparent !important; border:0 !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important;
color:inherit !important; -webkit-text-fill-color:inherit !important; font-size:14px !important; font-weight:700 !important;
}
html body .aloha-product-info .aloha-stock-status.out-of-stock { color:#ff8c1a !important; -webkit-text-fill-color:#ff8c1a !important; }
html body .aloha-product-info .aloha-stock-status.out-of-stock::before {
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
/* ============================================================================
RUNDA 9 - zakładka Kontakt (weryfikacja Przelewy24, 30.07.2026)
Nagłówek „Dane kontaktowe" w pomarańczowym boksie był pomarańczowy na
pomarańczowym, czyli niewidoczny. Snippet-34 ustawia mu color:#fff, ale
pro-tools-dark-theme.php nadpisuje to regułą o wyższej specyficzności
(body.page [class*="u-section-"] h3) i dodatkowo -webkit-text-fill-color.
Stąd potrzebne obie właściwości i selektor zaczynający się od html body.
Uwaga: same numery telefonu i adres e-mail były niewidoczne z innego powodu -
snippet-12 chował regułą .u-post-content a {display:none} każdy link w treści.
To poprawione u źródła, w snippet-12.php.
========================================================================= */
html body.page .aloha-contact-info-box h3,
html body.page [class*="u-section-"] .aloha-contact-info-box h3 {
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}
/* Linki w pomarańczowym boksie - pomarańcz na pomarańczu nie kontrastuje. */
html body.page .aloha-contact-info-box a,
html body.page .aloha-ci-item a {
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}
/* ============================================================================
RUNDA 10 - zgłoszenia z 30.07.2026
========================================================================= */
/* --- ZRZUT 1: rozwijana lista "Kraj / region" na kasie ---
Pole i lupka były już ciemne, ale sam panel z wynikami zostawał biały:
selectWoo/select2 wstawia go na końcu , więc reguły pisane pod
kontener kasy go nie łapały. Podświetlenie pozycji miało jasnomiętowe tło
#e8faf8 z palety jasnego motywu. --- */
.select2-dropdown,
.select2-container--default .select2-dropdown,
.select2-container .select2-dropdown {
background:#1c1f26 !important;
background-color:#1c1f26 !important;
border:1px solid #ff6a00 !important;
color:#f0f0f0 !important;
box-shadow:0 18px 44px rgba(0,0,0,.65) !important;
}
.select2-search--dropdown { background:transparent !important; padding:8px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-search--dropdown .select2-search__field {
background:#15171c !important;
border:1px solid rgba(255,255,255,.16) !important;
border-radius:8px !important;
padding:8px 10px !important;
color:#f0f0f0 !important;
-webkit-text-fill-color:#f0f0f0 !important;
}
.select2-results, .select2-results__options { background:transparent !important; }
.select2-container--default .select2-results__option,
.select2-results__option {
background:transparent !important;
background-color:transparent !important;
color:#e8e8e8 !important;
-webkit-text-fill-color:#e8e8e8 !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
background:rgba(255,255,255,.07) !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-results__option--highlighted {
background:#ff6a00 !important;
background-color:#ff6a00 !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}
.select2-container--default .select2-results__group { color:#8b939e !important; }
.select2-results__options::-webkit-scrollbar { width:10px !important; }
.select2-results__options::-webkit-scrollbar-track { background:transparent !important; }
.select2-results__options::-webkit-scrollbar-thumb {
background:#3a3a3a !important;
border:2px solid #1c1f26 !important;
border-radius:8px !important;
}
/* --- ZRZUT 2: stopka "Strona wykonana przez" ---
Link dostawał rozmiar z reguł motywu dla linków i wychodził wiekszy od
tekstu obok, wiec zostal przyciety do 11 px - ale wtedy caly podpis byl
drobniejszy od copyrightu w tej samej linii. Oba teksty trzymamy teraz
na 13 px, czyli tyle, ile ustawia snippet-29. --- */
.aloha-footer-bottom .aloha-copyright,
.aloha-footer-bottom .aloha-credits,
.aloha-footer-bottom .aloha-credits a,
.aloha-footer-bottom .aloha-credits a:hover {
font-size:13px !important;
font-weight:400 !important;
line-height:1.5 !important;
letter-spacing:0 !important;
}
/* --- ZRZUT 4: przycisk wyboru paczkomatu w widocznej liście metod wysyłki ---
Fragment przenosi tam mu-plugin aloha-inpost-paczkomat-kasa.php; wtyczka
InPost stylowała go pod jasny motyw. --- */
#aloha-paczkomat-host { margin:12px 0 4px !important; }
#aloha-paczkomat-host .easypack_show_geowidget {
display:inline-block !important;
margin:0 !important;
padding:12px 22px !important;
background:linear-gradient(135deg,#ff8c00,#ff6a00) !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
border:0 !important;
border-radius:10px !important;
font-size:15px !important;
font-weight:700 !important;
text-align:center !important;
cursor:pointer !important;
box-shadow:0 4px 16px rgba(255,106,0,.30) !important;
}
#aloha-paczkomat-host .easypack_show_geowidget:hover { filter:brightness(1.08) !important; }
#aloha-paczkomat-host #selected-parcel-machine {
margin-top:10px !important;
padding:12px 14px !important;
background:#15171c !important;
border:1px solid rgba(255,255,255,.12) !important;
border-radius:10px !important;
color:#e8e8e8 !important;
}
#aloha-paczkomat-host .easypack-visible-point-header { color:#ff8c1a !important; }
#aloha-paczkomat-host #selected-parcel-machine-id { color:#f0f0f0 !important; }
#aloha-paczkomat-host .hidden-paczkomat-data { display:none !important; }
/* Mapa InPostu w okienku jBox - żeby nie świeciła białą ramką na czarnym tle. */
.jBox-container, .jBox-content { background:#1c1f26 !important; }
.jBox-title { background:#15171c !important; color:#ffffff !important; border-bottom:1px solid rgba(255,255,255,.12) !important; }
.jBox-closeButton svg path { fill:#f0f0f0 !important; }
/* --- ZRZUT 8 (poprawione): boczny panel sklepu - kolejnosc + przyleganie ---
Poprzednia wersja spychala Kategorie na sam koniec panelu, zeby filtry ceny,
marki i statusu weszly na pierwszy ekran. Skutek uboczny: panel ma ~1640 px,
przy sticky top:20px przykleja sie do gory i dolna czesc - czyli wlasnie
Kategorie - nigdy nie wchodzi w ekran. Trzeba bylo zjechac na dol strony.
Teraz: Kategorie wracaja pod okruszki, ale z wlasnym oknem przewijania
(40vh), wiec filtry nadal siedza wysoko. Caly panel jest przyklejony pod
naglowkiem i przewija sie w srodku - nic juz nie ucieka poza ekran. --- */
.aloha-shop-sidebar {
display:flex !important;
flex-direction:column !important;
}
.aloha-shop-sidebar > .aloha-drawer-close { order:-1 !important; }
/* okruszki (0) -> Filtr ceny (1) -> Kategorie (2) -> Marka, Status (3).
Sekcje wskazujemy przez :has(), bo na stronach kategorii dochodza kolejne
bloki i numeracja :nth-of-type sie przesuwa; nth zostaje jako zapas. */
.aloha-shop-sidebar > .aloha-sidebar-section { order:3 !important; }
.aloha-shop-sidebar > .aloha-sidebar-section:nth-of-type(1) { order:0 !important; }
.aloha-shop-sidebar > .aloha-sidebar-section:nth-of-type(3),
.aloha-shop-sidebar > .aloha-sidebar-section:has(.aloha-price-filter) { order:1 !important; }
.aloha-shop-sidebar > .aloha-sidebar-section:nth-of-type(2),
.aloha-shop-sidebar > .aloha-sidebar-section:has(.aloha-category-list) { order:2 !important; }
/* Separatory: kolejnosc na ekranie znow zgadza sie z kolejnoscia w DOM,
wiec kreska schodzi po prostu ostatniej sekcji (Status). */
.aloha-shop-sidebar > .aloha-sidebar-section {
margin-bottom:35px !important;
padding-bottom:30px !important;
border-bottom:1px solid #2e2e2e !important;
}
.aloha-shop-sidebar > .aloha-sidebar-section:last-child {
margin-bottom:0 !important;
padding-bottom:0 !important;
border-bottom:0 !important;
}
/* Drzewo kategorii bywa trzypoziomowe i po rozwinieciu ma setki pozycji -
dostaje wlasne okno, zeby nie wypychalo filtrow poza panel. */
.aloha-shop-sidebar .aloha-categories {
max-height:40vh !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding-right:8px !important;
}
/* Panel przyklejony pod naglowkiem. --aloha-hdr-h ustawia skrypt nizej
(naglowek jest fixed i zmienia wysokosc przy przewijaniu - 232 px na
gorze strony, 147 px po zwinieciu paskow, wiecej z paskiem admina).
Fallback 152px dziala, gdyby skrypt nie wystartowal. */
@media (min-width:769px) {
.aloha-shop-wrapper { align-items:start !important; }
.aloha-shop-sidebar {
position:sticky !important;
top:calc(var(--aloha-hdr-h, 152px) + 16px) !important;
height:auto !important;
max-height:calc(100vh - var(--aloha-hdr-h, 152px) - 32px) !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
align-self:start !important;
}
}
/* --- Siatka listingu: sztywna liczba kolumn ---
Bylo repeat(auto-fill, minmax(280px,1fr)), wiec kolumn wychodzilo raz 4,
raz 3, raz 2 - a przy 16 produktach na stronie ostatni wiersz konczyl sie
jedna samotna kafelka i wygladalo to, jakby oferta sie urwala. Liczby
kolumn sa teraz stale (4/3/2), a snippet-25 daje 24 produkty na strone -
24 dzieli sie przez kazda z nich bez reszty, wiec kazdy wiersz jest pelny. */
.woocommerce ul.products,
ul.products.columns-3,
ul.products.columns-4 {
/* 10.10.2026: 5 kolumn zamiast 4 (karty były rozciągnięte), 30 produktów na stronę w snippet-25 */
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1399px) {
.woocommerce ul.products,
ul.products.columns-3,
ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1023px) {
.woocommerce ul.products,
ul.products.columns-3,
ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Cienkie paski przewijania, zeby oba okna nie krzyczaly na ciemnym tle. */
.aloha-shop-sidebar,
.aloha-shop-sidebar .aloha-categories {
scrollbar-width:thin !important;
scrollbar-color:#3a3a3a transparent !important;
}
.aloha-shop-sidebar::-webkit-scrollbar,
.aloha-shop-sidebar .aloha-categories::-webkit-scrollbar { width:8px !important; }
.aloha-shop-sidebar::-webkit-scrollbar-track,
.aloha-shop-sidebar .aloha-categories::-webkit-scrollbar-track { background:transparent !important; }
.aloha-shop-sidebar::-webkit-scrollbar-thumb,
.aloha-shop-sidebar .aloha-categories::-webkit-scrollbar-thumb {
background:#3a3a3a !important;
border-radius:8px !important;
}
.aloha-shop-sidebar::-webkit-scrollbar-thumb:hover,
.aloha-shop-sidebar .aloha-categories::-webkit-scrollbar-thumb:hover { background:#ff6a00 !important; }
/* ============================================================================
RUNDA 11 - bramka Przelewy24 na kasie (07.08.2026)
Wtyczka P24 wstawia do etykiety metody logo ![]()
(assets/logo-small.png).
Belka z RUNDY 6 ma flex-wrap:wrap (potrzebne, żeby .payment_box schodził
do własnej linii), a etykieta bazę flex auto - czyli jej rozmiar wyjściowy
to szerokość MAKSYMALNA. Tekst „Przelewy24 - szybki przelew, BLIK, karta"
plus 64 px logo przekraczały wtedy szerokość belki, a przy flex-wrap
przeglądarka woli przenieść element do nowej linii, niż go ścisnąć.
Efekt: kółko wyboru zostawało samo u góry, etykieta lądowała pod nim.
Baza 0 zamiast auto - etykieta nigdy nie wymusza zawinięcia i rośnie
dopiero grow'em; .payment_box (flex 1 1 100%) schodzi niżej jak dotąd.
========================================================================= */
#payment ul.payment_methods > li.wc_payment_method > label {
display:flex !important;
align-items:center !important;
gap:10px !important;
flex:1 1 0 !important;
min-width:0 !important;
}
/* logo dosunięte do prawej krawędzi belki i nieskracalne */
#payment ul.payment_methods > li.wc_payment_method > label > img,
#payment .aloha-payment-method img,
#payment .aloha-payment-label img {
margin-left:auto !important;
flex-shrink:0 !important;
max-height:22px !important;
width:auto !important;
}
/* ten sam problem w układzie z szablonu sklepu (input zagnieżdżony w etykiecie) */
#payment .aloha-payment-label {
display:flex !important;
align-items:center !important;
gap:10px !important;
min-width:0 !important;
}
/* ============================================================================
RUNDA 12 - link „regulamin sklepu" przy zgodzie na kasie (07.08.2026)
Etykieta .aloha-terms-label ma 14 px, a sam odnośnik dostawał 18 px, więc
w jednym zdaniu były dwie wielkości pisma i linia skakała w pionie.
Rozmiar i interlinia dziedziczone z etykiety - zostaje samo podkreślenie.
========================================================================= */
.aloha-terms-label .aloha-terms-link,
.aloha-terms-label a {
font-size:inherit !important;
line-height:inherit !important;
vertical-align:baseline !important;
}
/* --- ZRZUT 9 (10.10.2026): koszyk, karuzela "Mogą Ci się spodobać" ---
Tekst i cena kleiły się do krawędzi karty: padding z snippet-26 zjadał ciemny motyw.
Zdjęcia były przycinane (object-fit: cover), np. otwornica bez połowy tarczy.
Selektory z prefiksem sekcji, żeby wygrać z pro-tools-dark-theme. */
.aloha-recommended-products .aloha-carousel .aloha-product-card {
display: flex !important; flex-direction: column !important;
}
.aloha-recommended-products .aloha-carousel .aloha-product-card .aloha-product-image {
background: #fff !important; padding: 14px !important; box-sizing: border-box !important;
}
.aloha-recommended-products .aloha-carousel .aloha-product-card .aloha-product-image img {
object-fit: contain !important;
}
.aloha-recommended-products .aloha-carousel .aloha-product-card .aloha-product-info {
padding: 16px 18px 10px !important; flex-grow: 1 !important;
}
.aloha-recommended-products .aloha-carousel .aloha-product-card .aloha-product-name {
margin: 0 0 10px !important; padding: 0 !important; min-height: 2.8em !important;
}
.aloha-recommended-products .aloha-carousel .aloha-product-card .aloha-product-price {
margin: 0 !important; padding: 0 !important;
}
.aloha-recommended-products .aloha-carousel .aloha-product-card .aloha-add-to-cart-btn {
width: calc(100% - 36px) !important; margin: 6px 18px 18px !important;
}
/* Strzałki karuzeli: znak "‹" z czcionki siedział poniżej środka koła - zamiast niego ikona wyśrodkowana flexem */
.aloha-recommended-products .aloha-carousel-wrapper .aloha-carousel-nav {
display: flex !important; align-items: center !important; justify-content: center !important;
padding: 0 !important; font-size: 0 !important; line-height: 0 !important; color: #ff6a00 !important;
}
.aloha-recommended-products .aloha-carousel-wrapper .aloha-carousel-nav::before {
content: "" !important; width: 22px !important; height: 22px !important; background: currentColor !important;
-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.aloha-recommended-products .aloha-carousel-wrapper .aloha-carousel-next::before { transform: rotate(180deg) !important; }
.aloha-recommended-products .aloha-carousel-wrapper .aloha-carousel-nav:hover { color: #fff !important; }
/* --- ZRZUT 10 (10.10.2026): koszyk - nagłówek i szersza kolumna z nazwą --- */
.aloha-cart-items h2.aloha-section-title.aloha-koszyk-tytul {
display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important;
font-size:22px !important; font-weight:800 !important; margin:0 0 18px !important;
color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}
.aloha-cart-items .aloha-koszyk-tytul .aloha-koszyk-licznik {
font-size:13px !important; font-weight:600 !important; padding:4px 10px !important; border-radius:999px !important;
background:#2a2a2a !important; color:#c4cad3 !important; -webkit-text-fill-color:#c4cad3 !important;
}
@media (min-width:769px) {
.aloha-cart-items .aloha-cart-item { grid-template-columns:96px minmax(0,1fr) 96px 110px 36px !important; gap:16px !important; }
}
.aloha-cart-items .aloha-cart-item .aloha-item-name,
.aloha-cart-items .aloha-cart-item .aloha-item-name a { font-size:15px !important; line-height:1.4 !important; }
/* --- ZRZUT 11 (10.10.2026): koszyk na telefonie ---
Pozycja miała sztywne kolumny 70px + 270px, a kontener 32px marginesu z każdej strony - na węższych telefonach
się nie mieściło i strona jechała w prawo. Mniej czarnego marginesu, kolumny elastyczne. */
@media (max-width:768px) {
html body .aloha-cart-container { padding-left:10px !important; padding-right:10px !important; }
html body .aloha-cart-container .aloha-cart-items,
html body .aloha-cart-container .aloha-cart-summary { padding:18px 14px !important; border-radius:14px !important; min-width:0 !important; }
html body .aloha-cart-container .aloha-cart-grid { grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
html body .aloha-cart-container .aloha-cart-item {
grid-template-columns:72px minmax(0,1fr) !important; gap:12px !important; padding:14px !important; min-width:0 !important;
}
html body .aloha-cart-container .aloha-cart-item > * { min-width:0 !important; }
html body .aloha-cart-container .aloha-item-name,
html body .aloha-cart-container .aloha-item-name a { font-size:14px !important; overflow-wrap:anywhere !important; }
html body .aloha-cart-container .aloha-cart-summary .aloha-summary-row,
html body .aloha-cart-container .aloha-cart-summary [class*="row"] { gap:10px !important; }
html body .aloha-cart-container .aloha-progress-bar,
html body .aloha-cart-container [class*="free-shipping"] { margin-left:0 !important; margin-right:0 !important; }
}
/* --- ZRZUT 12 (10.10.2026, poprawione): gwiazdki ocen ---
Czcionka gwiazdek WooCommerce ucinała ostatnią gwiazdkę, a dwa napisy (szary + złoty) nakładały się z przesunięciem
i wyglądały jak podwójny rząd. Teraz dwa identyczne paski SVG: szary w tle, złoty w przycięty do szerokości
z WooCommerce (style="width:75%"). Ta sama geometria = gwiazdki pokrywają się co do piksela. */
html body .star-rating.star-rating.star-rating {
position:relative !important; display:block !important; float:none !important; overflow:hidden !important;
width:90px !important; min-width:90px !important; max-width:90px !important; height:18px !important; min-height:18px !important; max-height:18px !important; flex:0 0 auto !important; margin:4px 0 !important; padding:0 !important; box-sizing:content-box !important;
font-size:0 !important; line-height:0 !important; letter-spacing:0 !important;
background:transparent !important;
}
/* Szary rząd jako osobna warstwa - tło samego .star-rating zerował ciemny motyw */
html body .star-rating.star-rating.star-rating::before {
content:"" !important; display:block !important; position:absolute !important; top:0 !important; left:0 !important;
width:90px !important; height:18px !important; margin:0 !important; padding:0 !important; float:none !important; opacity:1 !important;
background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-2%20-2%2028%2028%22%3E%3Cpath%20fill%3D%22%233d3d3d%22%20d%3D%22M12%202l3.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01L12%202z%22/%3E%3C/svg%3E") repeat-x 0 0 / 18px 18px !important;
}
html body .star-rating.star-rating.star-rating > span {
position:absolute !important; top:0 !important; left:0 !important; height:18px !important; min-height:18px !important; overflow:hidden !important; z-index:1 !important;
padding:0 !important; margin:0 !important; font-size:0 !important; float:none !important;
background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-2%20-2%2028%2028%22%3E%3Cpath%20fill%3D%22%23ffc21a%22%20d%3D%22M12%202l3.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01L12%202z%22/%3E%3C/svg%3E") repeat-x 0 0 / 18px 18px !important;
}
html body .star-rating.star-rating.star-rating > span::before { content:none !important; display:none !important; }