/* ============================================================================
 * Beloni — paczka poprawek CSS (Maj 2026)
 * Ładowane po beloni-store-customizations.css (zależność w enqueue).
 * Wszystkie reguły są ATOMARNE i komentowane do którego punktu się odnoszą,
 * żeby łatwo cofnąć pojedynczy fix bez wyrywania reszty.
 * ============================================================================ */


/* ─── 1. PAGINACJA — wycentrowana, mniej miejsca na mobile ──────────────────
 * Kontekst: paginate_links w beloni_custom_pagination() używa `type:plain` —
 * generuje proste linki <a class="page-numbers"> bez wrappera <ul>.
 * Filtr PHP już obciął end_size/mid_size do 1 — tu tylko layout. */

.woocommerce-pagination {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 32px auto 16px;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.woocommerce-pagination::-webkit-scrollbar { display: none; }

.woocommerce-pagination .page-numbers {
    flex: 0 0 auto;
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 14px;
    line-height: 1;
    border: 1px solid #e3e3e3;
    border-radius: 0 !important;
    background: #fff;
    color: #222;
}

/* Aktywna strona: czarna */
.woocommerce-pagination .page-numbers.current {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}
/* Hover na link: ciemne tło + biała czcionka (klient: hover ma być biała jak na ...) */
.woocommerce-pagination a.page-numbers:hover {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}
/* Kropki w kafelku (z ramką jak inne) — klient prosił żeby też były kafelkiem.
 * Theme ma .woocommerce-pagination span.page-numbers:hover → brąz #ab8e66.
 * Kropki to <span>, więc po najechaniu kursorem łapały brązowe tło.
 * Tutaj wymuszamy stałe tło (białe, brak hover-state) i kursor default. */
.woocommerce-pagination .page-numbers.dots,
.woocommerce-pagination span.page-numbers.dots:hover,
.woocommerce-pagination .page-numbers.dots:hover {
    background: #fff !important;
    border-color: #e3e3e3 !important;
    color: #888 !important;
    cursor: default !important;
}
/* Strzałki — kwadrat z obramowaniem (klient Round 3).
 * UWAGA: inline-flex + text-align NIE centruje glifu «» (asymetryczny kerning).
 * Używamy inline-block + line-height = wysokość minus border (36px). */
.woocommerce-pagination .prev.page-numbers,
.woocommerce-pagination .next.page-numbers {
    display: inline-block !important;
    border: 1px solid #e3e3e3 !important;
    background: #fff !important;
    font-size: 18px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #222 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
.woocommerce-pagination .prev.page-numbers:hover,
.woocommerce-pagination .next.page-numbers:hover {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}
/* Glify »« — żeby wyglądały IDENTYCZNIE renderujemy oba przez ::before
 * literalnym znakiem (nie escape \00BB który czasem renderuje pojedynczy chevron).
 * Oryginalny tekst ukrywamy color:transparent + font-size:0. */
.woocommerce-pagination .prev.page-numbers,
.woocommerce-pagination .next.page-numbers {
    line-height: 36px !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
}
.woocommerce-pagination .prev.page-numbers::before {
    content: "«";
    display: inline-block;
    color: #222;
    font-size: 18px;
    line-height: 36px;
}
.woocommerce-pagination .next.page-numbers::before {
    content: "»";
    display: inline-block;
    color: #222;
    font-size: 18px;
    line-height: 36px;
    transform: translateY(-2px);
}
.woocommerce-pagination .prev.page-numbers:hover,
.woocommerce-pagination .next.page-numbers:hover {
    color: transparent !important;
}
.woocommerce-pagination .prev.page-numbers:hover::before,
.woocommerce-pagination .next.page-numbers:hover::before {
    color: #fff;
}

/* Pkt 1 (Round 3): mobile — kwadraty się ucinały. Zmniejszamy żeby zmieścić
 * tyle samo elementów co desktop (np. ‹ 1 2 3 4 … 36 ›). */
@media (max-width: 767px) {
    .woocommerce-pagination {
        gap: 3px !important;
        margin: 20px auto 10px;
    }
    .woocommerce-pagination .page-numbers {
        min-width: 30px !important;
        height: 30px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        line-height: 30px !important;
    }
    .woocommerce-pagination .prev.page-numbers,
    .woocommerce-pagination .next.page-numbers {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        line-height: 28px !important;
    }
    .woocommerce-pagination .prev.page-numbers::before,
    .woocommerce-pagination .next.page-numbers::before {
        font-size: 14px !important;
        line-height: 28px !important;
    }
}
@media (max-width: 480px) {
    .woocommerce-pagination {
        gap: 2px !important;
    }
    .woocommerce-pagination .page-numbers {
        min-width: 26px !important;
        height: 26px !important;
        padding: 0 4px !important;
        font-size: 11px !important;
        line-height: 26px !important;
    }
    .woocommerce-pagination .prev.page-numbers,
    .woocommerce-pagination .next.page-numbers {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        height: 26px !important;
        line-height: 24px !important;
    }
    .woocommerce-pagination .prev.page-numbers::before,
    .woocommerce-pagination .next.page-numbers::before {
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .woocommerce-pagination .page-numbers.dots {
        min-width: 18px !important;
        padding: 0 2px !important;
    }
}
@media (max-width: 575px) {
    .woocommerce-pagination .page-numbers.dots {
        padding: 0 4px;
        min-width: 18px;
    }
}


/* ─── 3. CZCIONKI: wishlist / cart / checkout = strona produktu ─────────────
 * Bazujemy na typografii .product-summary z single product (Jost, 16/24).
 * Jeżeli klient zażyczy sobie innych proporcji — tu są 3 deklaracje do tweaku. */

:root {
    --beloni-fix-product-font:      "Jost", "Helvetica Neue", Arial, sans-serif;
    --beloni-fix-product-name-size: 15px;
    --beloni-fix-brand-size:        11px;
    --beloni-fix-line:              1.35;
}

.beloni-wishlist-card .product-name,
.beloni-wishlist-card .product-name a,
.beloni-cart-table__cell--product,
.beloni-cart-table__cell--product a,
.woocommerce-checkout-review-order-table .product-name,
.woocommerce-mini-cart .product-name,
.woocommerce-mini-cart .product-name a {
    font-family: var(--beloni-fix-product-font);
    font-size:   var(--beloni-fix-product-name-size);
    line-height: var(--beloni-fix-line);
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* Pkt 9 (Round 4): cena w wishlist mniejsza */
body.woocommerce-wishlist .beloni-wishlist-card .product-price,
body.woocommerce-wishlist .beloni-wishlist-card .woocommerce-Price-amount {
    font-size: 13px !important;
    font-weight: 600 !important;
}
.beloni-wishlist-card .product-price,
.beloni-cart-table__cell--price,
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-mini-cart .quantity {
    font-family: var(--beloni-fix-product-font);
    font-size:   var(--beloni-fix-product-name-size);
    line-height: var(--beloni-fix-line);
}


/* ─── 9. WISHLIST: czcionki w jednej linii + marki CAPSLOCK na produkcie ────
 * Klient: nazwy marek (np. BVLGARI) capslockiem zgodnie z resztą strony,
 * pogrubione czcionki zmniejszone tak żeby się mieściły w jednej linii. */

.beloni-wishlist-card .product-brand,
.beloni-wishlist-card__brand,
.beloni-wishlist-product-meta .beloni-brand-name,
.beloni-wishlist-product-meta .beloni-brand-name a,
.beloni-loop-brand,
.beloni-cart-table__cell--product .beloni-product-brand,
.woocommerce-mini-cart .beloni-product-brand,
.product_meta .beloni-product-brand,
.summary .beloni-product-brand,
.product-summary .beloni-brand,
.summary .pwb-single-product-brands a,
.product_meta .pwb-single-product-brands a {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* Wishlist: motyw ma selektor o wysokiej specyficzności (body.woocommerce-wishlist
   .wishlist_table.beloni-wishlist-grid .product-name .beloni-brand-name) bez
   text-transform → trzeba dorównać specyficznością + !important, inaczej CAPSLOCK nie łapie. */
body.woocommerce-wishlist .wishlist_table.beloni-wishlist-grid .product-name .beloni-brand-name,
body.woocommerce-wishlist .wishlist_table.beloni-wishlist-grid .product-name .beloni-wl-brand,
body.woocommerce-wishlist table.wishlist_table .product-name .beloni-brand-name,
body.woocommerce-wishlist table.wishlist_table .product-name .beloni-wl-brand,
/* KLUCZOWE: w motywie .shop_table .product-name a:not(.button) ustawia
   text-transform:capitalize bezpośrednio na linku — dziedziczone uppercase
   z rodzica jest przez to nadpisywane. Musimy ustawić uppercase NA samym <a>. */
body.woocommerce-wishlist .wishlist_table.beloni-wishlist-grid .product-name .beloni-brand-name a,
body.woocommerce-wishlist .wishlist_table.beloni-wishlist-grid .product-name .beloni-wl-brand a,
body.woocommerce-wishlist table.wishlist_table .product-name .beloni-brand-name a,
body.woocommerce-wishlist table.wishlist_table .product-name .beloni-wl-brand a,
.beloni-wishlist-card .product-name .beloni-brand-name a,
.beloni-wishlist-product-meta .beloni-brand-name a {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Wishlist: nazwa produktu ma się zmieścić w jednej linii lub ewentualnie 2,
   ale bez przepełnienia karty. */
.beloni-wishlist-card .product-name,
.beloni-wishlist-card .product-name a {
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: anywhere;
}

@media (min-width: 992px) {
    .beloni-wishlist-card .product-name,
    .beloni-wishlist-card .product-name a {
        -webkit-line-clamp: 1;
    }
}


/* ─── 11. MOBILE: długie nazwy marek nie są ucinane bez ostrzeżenia ─────────
 * Hybryda: drobne zmniejszenie czcionki + zezwolenie na 2 linie + clamp. */

/* Pkt 11 (Round 3): klient chce na MOBILE marki 10px + ellipsis
 * (jedna linia, długie nazwy zakończone "..."). Nie 2-liniowy wrap. */
@media (max-width: 767px) {
    .product-item .beloni-loop-brand,
    .product-item .product-brand,
    .product-item .pwb-product-brands,
    .product-item .beloni-loop-brand__link,
    .product-item .beloni-loop-brand__text {
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}


/* ─── 12. CZERWONY BADGE PROMOCYJNY — lekkie przesunięcie w prawo ──────────
 * Na single product (.summary .flash) — flex layout: dodajemy lekki offset
 * w prawo. Jeśli klient ma na myśli badge na zdjęciu galerii, ten selektor
 * też to obsługuje. */

/* Badge na ZDJĘCIU galerii (mobile) — motyw ma .beloni-mobile-product-flash
   przy left:0; klient chce lekko w prawo. */
@media (max-width: 767px) {
    .single-product .contain-left .beloni-mobile-product-flash {
        left: 14px !important;
    }
}


/* ─── 13. GWIAZDKI — mniejszy odstęp od podtytułu/ceny (lista produktów) ───
 * Lista, nie szczegóły. Custom rating ma kontener .beloni-store-rating /
 * .star-rating — wymuszamy mniejsze marginesy w karcie produktu. */

.product-item .product-info .rating-wapper,
.product-item .product-info .star-rating,
.product-item .product-info .beloni-store-rating,
.product-item .product-info .woocommerce-product-rating {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.product-item .product-info .beloni-product-subtitle + .rating-wapper,
.product-item .product-info .beloni-product-subtitle + .star-rating,
.product-item .product-info .beloni-product-subtitle + .beloni-store-rating {
    margin-top: 2px !important;
}


/* ─── 14. PRZYCISKI „NA STRONIE" + „SORTOWANIE" szersze (desktop) ──────────
 *      Plus: usunięcie ikonki przy filtrach.
 * Klasy zaobserwowane: .shop-control, .woocommerce-ordering, .per-page-selector,
 * w sidebar-filters jest .beloni-filters-title — dla niej ikona. */

/* Usunięcie ikony przełącznika widoku (siatka 9 kropek) — "to proszę usunąć" */
.shop-control .grid-view-mode {
    display: none !important;
}

/* Większy odstęp między "Na stronie" a "Sortuj" + lekkie poszerzenie (desktop) */
@media (min-width: 992px) {
    .shop-control .woocommerce-ordering {
        margin-left: 22px;
    }
    .shop-control .per-page-form select.option-perpage,
    .shop-control .woocommerce-ordering select.orderby {
        padding-right: 36px;
    }
}


/* ─── pkt 19 (Round 10): cofnęliśmy Round 5 brutal — `*` wycinał transform
 * na `.slides` container, przez co flexslider nie mógł przewijać slajdów
 * po kliknięciu miniatury. Reguły tylko na samych <img>. */
.single-product img[data-lazyloaded],
.single-product img.lazyload,
.single-product img.lazyloading,
.single-product img.lazyloaded,
.single-product img.litespeed-loaded {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Pkt 19 (Round 8): cofnięto ukrywanie galerii. Klient widział białą stronę
 * przez 3s na mobile (fallback). Wracamy do "od razu widoczna galeria,
 * tylko animacje skali zablokowane". */

/* Pkt 19 (Round 9): cofnęliśmy aspect-ratio + height:100% — na mobile po
 * inicie flexslidera kontener dostawał ogromną pustą przestrzeń.
 * Zostawiamy tylko blokowanie animacji/transformów + naturalne wymiary. */
.single-product .woocommerce-product-gallery img,
.single-product .woocommerce-product-gallery__image img,
.single-product .flexslider img,
.single-product .flex-viewport img,
.single-product .product-images img,
.single-product .woocommerce-product-gallery__wrapper img {
    transition: none !important;
    -webkit-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ─── 15. MOBILE: double-tap zoom przeglądarki w galerii produktu ──────────
 * Klient: "faktycznie nie działa". touch-action:manipulation w iOS Safari
 * czasem nie blokuje double-tap zoomu, gdy element nadrzędny ma własne style.
 *
 * Strategia round 3:
 * 1. touch-action: pan-y na samych OBRAZACH — bezwarunkowo blokuje pinch+double-tap
 *    (manipulation w iOS Safari okresowo dopuszcza double-tap zoom).
 * 2. Zachowujemy "manipulation" na kontenerach żeby swipe między slajdami działał.
 * 3. JS w beloni-fixes.js robi resztę (capture touchstart + preventDefault dla
 *    drugiego tapa w okienku 350ms — strongDoubleTapKill).
 */

/* Manipulation = pozwala scroll + swipe, blokuje double-tap zoom (sam z siebie
 * NIE zawsze działa na iOS — JS dopina to w beloni-fixes.js). */
.woocommerce-product-gallery,
.flexslider,
.flexslider .slides,
.flexslider .slides li,
.product-images,
.woocommerce-product-gallery img,
.flexslider .slides img,
.product-images img {
    touch-action: manipulation !important;
}

/* Pkt 15 (round 4) — kropki nawigacyjne galerii mobile: aktywna wyraźnie ciemna.
 * Theme tworzy .beloni-thumbs-as-dots z miniaturami w środku — wymuszamy kropki
 * przez ukrycie img i stylowanie li (active = czarny + scale, inactive = szary). */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs.beloni-thumbs-as-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs.beloni-thumbs-as-dots li {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #d4d4d4 !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.2s;
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs.beloni-thumbs-as-dots li img {
    display: none !important;
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs.beloni-thumbs-as-dots li.is-active,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs.beloni-thumbs-as-dots li:has(img.flex-active) {
    background: #111 !important;
    transform: scale(1.25);
}

/* Wyłączenie callout/menu po długim przytrzymaniu na mobile */
.woocommerce-product-gallery img,
.flexslider img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}


/* ─── 18. LIGHTBOX: 1 zdjęcie wycentrowane ─────────────────────────────────
 * Custom lightbox .beloni-product-lightbox; gdy thumbs strip pusty → obraz
 * leciał w lewo. Wymuszamy auto-margin i flex center. JS dodatkowo dorzuca
 * klasę .beloni-product-lightbox--single (patrz beloni-fixes.js). */

.beloni-product-lightbox__stage,
.beloni-product-lightbox__content {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.beloni-product-lightbox__image,
.beloni-product-lightbox__main img {
    margin: 0 auto;
}

.beloni-product-lightbox--single .beloni-product-lightbox__thumbs,
.beloni-product-lightbox--single .beloni-product-lightbox__nav-prev,
.beloni-product-lightbox--single .beloni-product-lightbox__nav-next {
    display: none !important;
}
.beloni-product-lightbox--single .beloni-product-lightbox__image {
    max-width: 90vw;
    max-height: 88vh;
}


/* ─── 21. COOKIE BUTTON MOBILE — wyżej, bez cienia ─────────────────────────
 * Bazowa pozycja: bottom 20px (beloni-store-customizations.css:1796+).
 * Na mobile podnosimy + zdejmujemy box-shadow z głównego baneru. */

@media (max-width: 767px) {
    .beloni-cookie-consent,
    .beloni-cookie-banner {
        bottom: 84px !important;
    }
    .beloni-cookie-consent,
    .beloni-cookie-consent .beloni-cookie-consent__banner,
    .beloni-cookie-consent__inner,
    .beloni-cookie-banner__inner {
        box-shadow: none !important;
    }
}


/* ─── 22. Z-INDEX BADGE na sliderze „proponowanych produktów" ──────────────
 * Slick/owl mają overflow-hidden na .owl-stage-outer — badge na karcie
 * potrafi się chować za sąsiedni slajd. Podnosimy z-index karty + flash. */

/* Slider "Może Ci się spodobać" = .beloni-related-after-tabs .owl-slick (Slick).
   Badge zachodził za sąsiednie karty przy przewijaniu. Trick: kontener
   overflow:hidden + .slick-list overflow:visible, + wyższy z-index badge. */
.beloni-related-after-tabs .owl-slick,
.woo_related-product .owl-slick {
    overflow: hidden;
}
.beloni-related-after-tabs .owl-slick .slick-list,
.woo_related-product .owl-slick .slick-list {
    overflow: visible;
}
.beloni-related-after-tabs .product-item .product-thumb,
.woo_related-product .product-item .product-thumb {
    position: relative;
    z-index: 2;
}
.beloni-related-after-tabs .product-item .product-thumb .flash,
.woo_related-product .product-item .product-thumb .flash {
    z-index: 12;
}


/* ─── 25. BLOG — usunięcie daty i autora ───────────────────────────────────
 * Hardcoded w single.php i blog templates. CSS hide jest najbezpieczniejszy
 * (zachowuje markup do ewentualnego cofnięcia). */

.single-post-info .post-meta .post-author,
.single-post-info .post-meta .date,
.post-item .post-meta .post-author,
.post-item .post-meta .date,
.post-item .post-info .post-author,
.post-item .post-info .date,
.post-item .datebox,
.post-item .post-meta .vcard,
.post-item .post-meta .author,
.post-item .post-meta .byline {
    display: none !important;
}

/* Po ukryciu dwóch z trzech elementów post-meta może wisieć dziwnie — tweak. */
.single-post-info .post-meta,
.post-item .post-meta {
    gap: 0;
}


/* ─── 26. GÓRNY PASEK „Witamy w naszym sklepie" ────────────────────────────
 * Preferowane: panel → Customize → Theme Options → wyczyść Header Promote Text.
 * Backup: CSS hide. Zostawiam jako display:none żeby zadziałało nawet jeśli
 * klient nie wyczyści opcji. */

.header .header-top,
.header.style-01 .header-top,
.header.style-02 .header-top,
.header.style-03 .header-top {
    display: none !important;
}

/* Header-top miał ~36px wysokości — usunięcie nie powinno nic rozjeżdżać,
   bo .header-middle ma własną wysokość. Gdyby ścisły layout sticky-header
   się wsadził w niespodzianki, zrobimy override na .header-transparent. */


/* ─── 4. NEWSLETTER POPUP — styl „jak baner cookie" + naprawa widoczności ──
 * Motyw renderuje #popup-newsletter (bootstrap modal) i odpala po delay, ale
 * nie ma stylu dla .modal-content → treść niewidoczna mimo przyciemnienia tła.
 * Tu: kremowy, zaokrąglony box wyśrodkowany w pionie, ciemny przycisk —
 * spójnie z banerem cookie (.beloni-cookie-consent). */

/* Wąski, wyśrodkowany box (motyw miał .modal-dialog width:1000px pod układ
   obraz+tekst). Centrowanie pionowe robi już motyw: .modal{top:50%;translateY}. */
#popup-newsletter .modal-dialog {
    width: 100% !important;
    max-width: 520px !important;
    margin: auto !important;
}

#popup-newsletter .modal-content {
    position: relative;
    background: #fbf8f4 !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden;
}

/* KLUCZOWE: bez obrazka tła motyw ustawiał .modal-info na position:absolute
   w kontenerze bez wysokości → box zapadał się do paska ze scrollem.
   Wracamy do normalnego flow i chowamy pustą kolumnę na obrazek. */
#popup-newsletter .modal-inner {
    overflow: visible !important;
}
#popup-newsletter .modal-inner .modal-thumb {
    display: none !important;
}
#popup-newsletter .modal-inner .modal-info {
    position: static !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 44px 38px 34px !important;
    text-align: center;
}

/* Przycisk zamknięcia (X) rysuje już motyw przez ::before/::after — zostawiamy. */

#popup-newsletter .modal-info .title {
    margin: 0 0 10px;
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

#popup-newsletter .modal-info .des {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: #6b6b6b;
}

#popup-newsletter .newsletter-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#popup-newsletter .newsletter-form-wrap .email {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    border: 1px solid #e2dacd;
    border-radius: 40px;
    background: #fff;
    font-size: 15px;
    color: #222;
    outline: none;
    box-shadow: none;
}
#popup-newsletter .newsletter-form-wrap .email:focus {
    border-color: var(--beloni-accent, #b8956a);
}

#popup-newsletter .newsletter-form-wrap .btn-submit {
    height: 50px;
    border: none;
    border-radius: 40px;
    background: #ab8e66;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}
#popup-newsletter .newsletter-form-wrap .btn-submit:hover {
    background: var(--beloni-accent, #b8956a);
}

#popup-newsletter .btn-checkbox {
    margin-top: 16px;
    text-align: center;
}
#popup-newsletter .btn-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #8a8a8a;
    cursor: pointer;
    margin: 0;
}
#popup-newsletter .btn-checkbox input {
    margin: 0;
}

@media (max-width: 480px) {
    #popup-newsletter .modal-inner { padding: 32px 22px 28px; }
    #popup-newsletter .modal-info .title { font-size: 20px; }
}


/* ─── BUG (wishlist): serce nie zmienia stanu po dodaniu ───────────────────
 * YITH dodaje klasę .exists do .yith-wcwl-add-to-wishlist gdy produkt jest
 * w ulubionych, ale motyw nie ma na to stylu — serce wygląda tak samo.
 * Tu: w ulubionych = serce czerwone (wypełnione), poza = stan domyślny.
 * Działa na single i na kartach w pętli, oraz po zdjęciu (YITH zdejmuje klasę). */

.yith-wcwl-add-to-wishlist a.add_to_wishlist::before {
    transition: color 0.18s ease, transform 0.18s ease;
}
.yith-wcwl-add-to-wishlist.exists a.add_to_wishlist::before {
    content: "\f004" !important;   /* FontAwesome: wypełnione serce (zamiast konturu \f08a) */
    color: #e53935 !important;
    transform: scale(1.05);
}


/* ─── 20. BREADCRUMBS — wyraźnie klikalne linki ────────────────────────────
 * Element "Perfumy męskie" jest teraz linkiem (fix PHP), tu dajemy mu czytelny
 * stan klikalny (kolor + podkreślenie na hover). */
.woocommerce-breadcrumb a {
    color: #6b6b6b;
    transition: color 0.15s ease;
}
.woocommerce-breadcrumb a:hover {
    color: var(--beloni-accent, #ab8e66);
    text-decoration: underline;
}


/* ─── 24. STRONA SKLEPU — usunięcie długiego tytułu i breadcrumbu ──────────
 * Klient: usunąć "PERFUMY ONLINE – SKLEP Z ORYGINALNYMI ZAPACHAMI | BELONI"
 * (H1 .page-title.shop-title) oraz breadcrumb na tej stronie.
 * Scope tylko body.woocommerce-shop → nie rusza kategorii/produktów. */
/* Ukrywamy cały banner (breadcrumb + tytuł) TYLKO na stronie sklepu
   (.banner-wrapper.no_background) — żeby nie zostać z pustym paskiem.
   Kategorie/produkty mają inny body class, więc ich to nie dotyczy. */
body.woocommerce-shop .banner-wrapper,
body.post-type-archive-product .banner-wrapper {
    display: none !important;
}


/* ─── 2. PODSUMOWANIE ZAMÓWIENIA — produkt w liniach (marka/nazwa/podtytuł/poj.)
 * Markup z filtra woocommerce_order_item_name (beloni-fixes.php). */
.beloni-order-item {
    display: block;
    line-height: 1.45;
}
.beloni-order-item .beloni-order-brand {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a8a8a;
}
.beloni-order-item .beloni-order-name {
    display: block;
    font-weight: 600;
    color: #1a1a1a;
}
.beloni-order-item .beloni-order-subtitle,
.beloni-order-item .beloni-order-capacity {
    display: block;
    font-size: 13px;
    color: #777;
}


/* ─── 23. POLECANE PRODUKTY POD WPISEM BLOGOWYM ─────────────────────────────
 * Sekcja renderowana przez beloni-fixes.php przez filter the_content. */
.beloni-blog-related-products {
    margin: 48px 0 24px;
    padding-top: 28px;
    border-top: 1px solid #eee;
}
.beloni-blog-related-products__title {
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 24px;
    letter-spacing: 0.02em;
}
.beloni-blog-related-grid {
    list-style: none;
    padding: 0;
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
}
.beloni-blog-related-grid > li,
.beloni-blog-related-grid > .product-item {
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 24px;
    flex: 0 0 33.333%;
    max-width: 33.333%;
    width: 33.333% !important; /* nadpisz dynamiczne col-* z motywu */
    float: none !important;
}
@media (max-width: 767px) {
    .beloni-blog-related-grid > li,
    .beloni-blog-related-grid > .product-item {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50% !important;
    }
}
@media (max-width: 480px) {
    .beloni-blog-related-grid > li,
    .beloni-blog-related-grid > .product-item {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100% !important;
    }
}
/* Pkt 23 (Round 3): klient — tekst pod zdjęciami WYCENTROWANY (jak karta /sklep/) */
.beloni-blog-related-grid .product-info,
.beloni-blog-related-grid .beloni-loop-brand,
.beloni-blog-related-grid .beloni-loop-brand__link,
.beloni-blog-related-grid .beloni-loop-brand__text,
.beloni-blog-related-grid .product-name,
.beloni-blog-related-grid .beloni-loop-title,
.beloni-blog-related-grid .beloni-loop-title a,
.beloni-blog-related-grid .beloni-product-subtitle,
.beloni-blog-related-grid .beloni-loop-subtitle,
.beloni-blog-related-grid .price,
.beloni-blog-related-grid .price ins,
.beloni-blog-related-grid .price del,
.beloni-blog-related-grid .rating-wapper,
.beloni-blog-related-grid .star-rating {
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.beloni-blog-related-grid .product-info {
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
}


/* ============================================================================
 * ROUND 2 — poprawki po pierwszej rundzie testów (Maj 2026, wg notatek klienta).
 * Późniejsze w pliku ⇒ wygrywają poprzednie reguły bez !important.
 * ========================================================================== */

/* ─── pkt 2: Podsumowanie zamówienia ─────────────────────────────────────── */
/* Theme robi w style.css (≈11659): @media (max-width:767px) .shop_table { display:block }
 * + .shop_table tr td/th { display:inline-block } — przez to KAŻDA komórka
 * (i thead, i tbody, i tfoot — Kwota:, Wysyłka:, Razem:) ląduje na osobnym
 * "wierszu". To zachowanie chcemy zostawić na koszyku, ale stronę zamówienia
 * (thank-you / view-order) MUSIMY zresetować, bo klient prosił o normalną
 * tabelę. Stąd ultra-specyficzne selektory body.* + html i tableshop_table
 * — żeby przebić theme bez ruszania jego reguły dla koszyka. */
@media (max-width: 767px) {
    /* Reset do tabeli na thank-you / view-order — używamy WSZYSTKICH wariantów
     * klas jakie WC kiedykolwiek wystawia na tej tabeli + body classes. */
    html body.woocommerce-order-received table.shop_table,
    html body.woocommerce-view-order  table.shop_table,
    html body.woocommerce-account     table.shop_table.order_details,
    html body.woocommerce-order-received .woocommerce-table--order-details,
    html body.woocommerce-view-order  .woocommerce-table--order-details {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;
    }
    html body.woocommerce-order-received table.shop_table thead,
    html body.woocommerce-view-order  table.shop_table thead,
    html body.woocommerce-account     table.shop_table.order_details thead {
        display: table-header-group !important;
    }
    html body.woocommerce-order-received table.shop_table tbody,
    html body.woocommerce-view-order  table.shop_table tbody,
    html body.woocommerce-account     table.shop_table.order_details tbody {
        display: table-row-group !important;
    }
    html body.woocommerce-order-received table.shop_table tfoot,
    html body.woocommerce-view-order  table.shop_table tfoot,
    html body.woocommerce-account     table.shop_table.order_details tfoot {
        display: table-row-group !important;
    }
    html body.woocommerce-order-received table.shop_table tr,
    html body.woocommerce-view-order  table.shop_table tr,
    html body.woocommerce-account     table.shop_table.order_details tr {
        display: table-row !important;
        width: auto !important;
    }
    html body.woocommerce-order-received table.shop_table th,
    html body.woocommerce-order-received table.shop_table td,
    html body.woocommerce-view-order  table.shop_table th,
    html body.woocommerce-view-order  table.shop_table td,
    html body.woocommerce-account     table.shop_table.order_details th,
    html body.woocommerce-account     table.shop_table.order_details td {
        display: table-cell !important;
        text-align: left !important;
        padding: 12px 8px !important;
        vertical-align: top !important;
        border-bottom: 1px solid #eee !important;
        width: auto !important;
    }
    /* Kolumny "value" (Kwota / Wysyłka / Razem) wyrównane do prawej. */
    html body.woocommerce-order-received table.shop_table td.product-total,
    html body.woocommerce-order-received table.shop_table tfoot td,
    html body.woocommerce-view-order  table.shop_table td.product-total,
    html body.woocommerce-view-order  table.shop_table tfoot td,
    html body.woocommerce-account     table.shop_table.order_details td.product-total,
    html body.woocommerce-account     table.shop_table.order_details tfoot td {
        text-align: right !important;
        white-space: nowrap !important;
        font-weight: 600;
    }
    /* Theme dodaje content przed td. Wyłączamy. */
    html body.woocommerce-order-received table.shop_table td::before,
    html body.woocommerce-view-order  table.shop_table td::before,
    html body.woocommerce-account     table.shop_table.order_details td::before {
        display: none !important;
        content: "" !important;
    }
}
/* Wizka klienta nie ma nagłówków "Produkt | Łącznie" — ukrywamy thead.
 * UWAGA: specificity musi być ≥ tej z mobile media query powyżej, gdzie
 * `html body... thead { display: table-header-group !important }` resetuje
 * theme'owe inline-block. Stąd `html` na początku. */
html body.woocommerce-order-received table.shop_table thead,
html body.woocommerce-view-order  table.shop_table thead,
html body.woocommerce-account     table.shop_table.order_details thead {
    display: none !important;
}
/* × qty inline obok ceny w product-total (JS przerzuca strong.product-quantity
 * z product-name do product-total — patrz beloni-fixes.js, sekcja pkt 2). */
body.woocommerce-order-received table.shop_table td.product-total .beloni-qty-inline,
body.woocommerce-view-order  table.shop_table td.product-total .beloni-qty-inline,
body.woocommerce-account     table.shop_table td.product-total .beloni-qty-inline {
    display: inline-block;
    color: #666;
    font-weight: 400;
    margin-right: 14px;
    white-space: nowrap;
}
body.woocommerce-order-received table.shop_table td.product-name strong.product-quantity,
body.woocommerce-view-order  table.shop_table td.product-name strong.product-quantity,
body.woocommerce-account     table.shop_table td.product-name strong.product-quantity {
    display: none !important;
}
/* Desktop: prawa kolumna MOCNIEJ przy prawej krawędzi (klient Round 3).
 * Trick: width:1% + white-space:nowrap → shrink-wrap kolumny do treści,
 * a label (lewa kolumna) zajmuje pozostałe 99%. Plus duży padding-right. */
@media (min-width: 768px) {
    html body.woocommerce-order-received table.shop_table,
    html body.woocommerce-view-order  table.shop_table,
    html body.woocommerce-account     table.shop_table.order_details {
        width: 100% !important;
        table-layout: auto !important;
    }
    /* Wszystkie wartości w prawej kolumnie (tbody product-total + tfoot td) */
    html body.woocommerce-order-received table.shop_table td.product-total,
    html body.woocommerce-view-order  table.shop_table td.product-total,
    html body.woocommerce-account     table.shop_table.order_details td.product-total,
    html body.woocommerce-order-received table.shop_table tfoot td,
    html body.woocommerce-view-order  table.shop_table tfoot td,
    html body.woocommerce-account     table.shop_table.order_details tfoot td {
        width: 1% !important;
        white-space: nowrap !important;
        text-align: right !important;
        padding-right: 28px !important;
        font-weight: 600;
    }
    /* Header product-total i tfoot th (labels) */
    html body.woocommerce-order-received table.shop_table th.product-total,
    html body.woocommerce-view-order  table.shop_table th.product-total {
        text-align: right !important;
        padding-right: 28px !important;
    }
    html body.woocommerce-order-received table.shop_table tfoot th,
    html body.woocommerce-view-order  table.shop_table tfoot th,
    html body.woocommerce-account     table.shop_table.order_details tfoot th {
        text-align: left !important;
        padding-left: 18px !important;
    }
}


/* ─── pkt 7: Banery — mniejsze odstępy na mobile ──────────────────────────── */
@media (max-width: 767px) {
    /* Sekcje Elementora z banerami: ścisnąć odstępy */
    .elementor-section.beloni-banners-top,
    .elementor-element.beloni-banners-top,
    .elementor-top-section[data-beloni-banners] {
        padding-top: 0 !important;
        padding-bottom: 8px !important;
    }
    .elementor-section.beloni-banners-top .elementor-column,
    .elementor-element.beloni-banners-top .elementor-column {
        padding: 4px !important;
    }
    /* Generyczne: ścisnąć columny ELementora wokół banerów na home (mocny override) */
    body.home .elementor-section .elementor-row > .elementor-column .elementor-element-populated {
        padding: 6px !important;
    }
    body.home .elementor-image img {
        margin: 0 !important;
    }
}


/* ─── pkt 8: Stopka — mniejsze odstępy wokół logo (wg wiz) ─────────────────── */
/* Pkt 8a (Round 4): Desktop — wszystkie kolumny wyrównane do GÓRY (flex-start),
 * plus zerujemy padding-top na kolumnie logo żeby logo było na tej samej
 * wysokości co H4 "OBSŁUGA KLIENTA" w pozostałych kolumnach. */
@media (min-width: 992px) {
    .beloni-footer-custom .footer-main {
        display: flex !important;
        align-items: flex-start !important;
        flex-wrap: wrap;
    }
    .beloni-footer-custom .footer-col-logo {
        align-self: flex-start !important;
        padding-top: 0 !important;
    }
    .beloni-footer-custom .footer-col-logo .footer-logo {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .beloni-footer-custom .footer-col-logo .footer-logo-image,
    .beloni-footer-custom .footer-col-logo .footer-logo img {
        margin-top: 0 !important;
    }
}
/* Pkt 8b (Round 3): Mobile — przywracamy podtytuł "Twój styl, Twoja przestrzeń".
 * Theme w @media (max-width:1365px) ukrywa ::after - override. */
@media (max-width: 1365px) {
    .beloni-footer-custom .footer-logo::after {
        display: block !important;
        content: "Twój styl, Twoja przestrzeń" !important;
        color: rgba(255, 255, 255, 0.78) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        letter-spacing: 0.04em !important;
        text-align: center !important;
        padding-top: 8px !important;
        position: relative !important;
        bottom: auto !important;
    }
}
.footer-col-logo {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.footer-logo {
    margin: 0 0 8px !important;
    padding: 0 !important;
}
/* Desktop: logo 75px (klient: jeszcze minimalnie mniej szersze niż 90) */
.footer-logo-image,
.footer-logo img {
    max-height: 75px !important;
    width: auto !important;
    margin: 0 !important;
}
/* Mniejsze odstępy między rzędami w stopce */
.footer .footer-cols,
.footer-cols-wrap,
.footer-row {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
@media (max-width: 767px) {
    /* Mobile: logo trochę mniejsze (klient: zmniejsz minimalnie). */
    .footer-logo-image,
    .footer-logo img {
        max-height: 75px !important;
    }
    /* Mniej paddingu góra/dół wokół logo (klient: paddingi tnij). */
    .footer-col-logo {
        text-align: center !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .footer-logo {
        margin: 0 !important;
    }
    /* Wywal padding pod numerem kontaktowym — ostatnia kolumna adres + odstęp
     * do paska płatności. Niebieski obszar na screenie = padding-bottom main row. */
    .beloni-footer-custom .footer-main {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .beloni-footer-custom .footer-main > .footer-col:last-child,
    .beloni-footer-custom .footer-main > .footer-col:last-child .footer-contact,
    .beloni-footer-custom .footer-main > .footer-col:last-child ul {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Minimalny oddech pod numerem telefonu — klient prosił, żeby zostawić chociaż 8px */
    .beloni-footer-custom .footer-main > .footer-col:last-child li:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 8px !important;
    }
    /* Pasek płatności od razu pod adresem, bez dużego odstępu. */
    .beloni-footer-custom .footer-payments {
        padding-top: 14px !important;
        margin-top: 0 !important;
    }
    .footer .footer-cols,
    .footer-cols-wrap,
    .footer-row {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}


/* ─── pkt 11: CAPSLOCK marki na stronie pojedynczego produktu ─────────────── */
.single-product .summary .beloni-single-brand,
.single-product .summary .beloni-single-brand a,
.single-product .summary .beloni-single-brand__link,
.single-product .summary .beloni-product-brand,
.single-product .summary .beloni-product-brand a,
.single-product .summary .beloni-product-brand__value,
.single-product .summary .beloni-product-brand__value a,
.single-product .product_meta .pwb-single-product-brands a,
.single-product .entry-summary .pwb-single-product-brands a,
.single-product .summary .pwb-single-product-brands a {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}


/* ─── pkt 12 (round 3): Badge promo w slider/loop — bardziej w prawo ─────────
 * Theme daje top:12px/left:12px (desktop) i top:5px/left:5px (mobile).
 * Klient: "lekkie przesunięcie w prawo" — zwiększamy left żeby badge wyraźnie
 * odstawał od krawędzi karty, nie wisi przyklejony. */
.product-item .flash {
    left: 16px !important;
    top: 14px !important;
}
@media (max-width: 767px) {
    .product-item .flash {
        left: 10px !important;
        top: 8px !important;
    }
}


/* ─── pkt 13: Mniejszy odstęp gwiazdek na karcie produktu ──────────────────
 * .star-rating ma natywne ~22px wysokości (font-size + line-height theme).
 * Klient: za dużo paddingu wokół, też na DESKTOPIE. Ścinamy globalnie. */
.product-item .product-info .rating-wapper,
.product-item .product-info .star-rating,
.product-item .product-info .beloni-store-rating,
.product-item .product-info .woocommerce-product-rating {
    margin-top: -4px !important;
    margin-bottom: -2px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.product-item .product-info .star-rating,
.product-item .product-info .beloni-store-rating .star-rating,
.product-item .product-info .rating-wapper .star-rating {
    height: 14px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
/* Pseudo-element ::before (same gwiazdki) — bez własnej wysokości linii */
.product-item .product-info .star-rating::before,
.product-item .product-info .star-rating span,
.product-item .product-info .star-rating span::before {
    line-height: 1 !important;
    height: 14px !important;
}


/* ─── pkt 14: Przyciski FILTRY / Na stronie / Sortuj — szerzej + większy odstęp
 * Theme używa CUSTOM SELECT-ÓW (button.beloni-select__trigger), nie natywnych <select>.
 * Round 3: shop-control miał space-between → "Na stronie" i "Domyślnie" daleko od
 * siebie. Wymuszamy display:flex z gap, justify-content:flex-start. */

/* Theme: .shop-before-control { padding: 15px 15px 5px } — asymetryczny dół.
 * Wyrównujemy paddingi góra/dół na 12px (klient: równe). */
.shop-before-control {
    padding: 12px 15px !important;
}


/* ─── pkt 7 (round 6): kolumny z banerami i Slider Revolution na home — bez tła/paddingu.
 * Klasa widgetu SR to .elementor-widget-slider_revolution (data-widget_type="slider_revolution.default"). */
body.home .elementor-widget-wrap.elementor-element-populated:has(> .elementor-widget-banner),
body.home .elementor-widget-wrap.elementor-element-populated:has(> .elementor-widget-slider_revolution),
body.home .elementor-widget-wrap.elementor-element-populated:has(> [data-widget_type="banner.default"]),
body.home .elementor-widget-wrap.elementor-element-populated:has(> [data-widget_type^="slider_revolution"]) {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
}
/* Plus: sama kolumna i sekcja zawierająca slider/banner — wyłączamy tło i padding */
body.home .elementor-column:has(.elementor-widget-slider_revolution),
body.home .elementor-column:has(.elementor-widget-banner),
body.home .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-slider_revolution) {
    background: transparent !important;
    background-color: transparent !important;
}
body.home .elementor-widget-banner,
body.home .elementor-widget-slider_revolution,
body.home [data-widget_type="banner.default"],
body.home [data-widget_type^="slider_revolution"] {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Slider Revolution — tylko fix szerokości (height ustawisz w panelu SR
 * — "Layout Type: Fullheight" lub konkretna większa wartość niż 614px). */
html body.home .elementor-widget-slider_revolution,
html body.home .elementor-widget-slider_revolution .elementor-widget-container,
html body.home .elementor-widget-slider_revolution .rev_slider_wrapper,
html body.home .elementor-widget-slider_revolution .rev_slider,
html body.home .elementor-widget-slider_revolution rs-module-wrap,
html body.home .elementor-widget-slider_revolution rs-module {
    width: 100% !important;
    max-width: 100% !important;
}
html body.home .elementor-widget-slider_revolution rs-slide,
html body.home .elementor-widget-slider_revolution rs-sbg,
html body.home .elementor-widget-slider_revolution rs-sbg-wrap {
    width: 100% !important;
    max-width: 100% !important;
}
/* Tła slajdów - cover */
html body.home .elementor-widget-slider_revolution rs-sbg,
html body.home .elementor-widget-slider_revolution .rev-slidebg {
    background-size: cover !important;
    background-position: center !important;
}

/* ─── pkt 7c (Round 3): gap między bestsellery i arabskie desktop ─────────
 * Sekcja Elementora .elementor-element-ee78a1b zawiera 2 kolumny obok siebie. */
@media (min-width: 768px) {
    body.home .elementor-element-ee78a1b > .elementor-container {
        gap: 24px !important;
    }
}

/* ─── pkt 7 (Round 4): mobile-hero slider — wyłączyć biały overlay
 * Klient: "nie chcę takiego rozjaśnienia banerów mobile". Theme robił
 * linear-gradient(rgba(255,255,255,0.02) → 0.9) na __overlay żeby tekst
 * eyebrow/title był czytelny. Wartości są puste, więc overlay tylko
 * rozjaśniał grafikę. Ukrywamy. */
body.home .beloni-home-mobile-hero__overlay {
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

/* ─── pkt 7e (Round 4): sekcja z 3 ikonami brąz (#AB8E66) — bardziej ściśnięta
 * mobile. Trzy warstwy paddingu: (a) sekcja .elementor-element-f249eb5 padding,
 * (b) kolumny .elementor-element-populated padding 10px + margin 14px,
 * (c) .iconbox-inner padding 6px 0. Tnijmy wszystko. */
@media (max-width: 767px) {
    /* (a) Sekcja — równy padding góra/dół */
    body.home .elementor-element-f249eb5 {
        padding: 8px 0 8px 0 !important;
    }
    /* (b) Kolumny — bez paddingu i bez margin-bottom (poza ostatnią) */
    body.home .elementor-element-9587d69 > .elementor-element-populated,
    body.home .elementor-element-0a1919a > .elementor-element-populated,
    body.home .elementor-element-47cb272 > .elementor-element-populated {
        margin: 0 !important;
        padding: 4px 0 !important;
    }
    /* (c) Iconbox inner — bez paddingu */
    body.home .elementor-element-f249eb5 .iconbox-inner,
    body.home .elementor-element-f249eb5 .elementor-icon-box-wrapper,
    body.home .elementor-element-f249eb5 .beloni-iconbox {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Mniejszy odstęp między ikoną a tytułem + tytułem a opisem */
    body.home .elementor-element-f249eb5 .elementor-icon-box-icon,
    body.home .elementor-element-f249eb5 .beloni-iconbox .icon {
        margin-bottom: 4px !important;
    }
    body.home .elementor-element-f249eb5 .elementor-icon-box-title,
    body.home .elementor-element-f249eb5 .beloni-iconbox .title {
        margin: 0 0 2px 0 !important;
        line-height: 1.2 !important;
    }
    body.home .elementor-element-f249eb5 .elementor-icon-box-description,
    body.home .elementor-element-f249eb5 .beloni-iconbox .des {
        margin: 0 !important;
        line-height: 1.3 !important;
    }
}

/* ─── pkt 7 (round 4): banery w Elementor widget "banner.default" nie ucinane.
 * Theme .beloni-banner .banner-thumb ma `overflow:hidden` bez width, przez co
 * <img width="1500" height="1200"> wystaje POZA kontener kolumny i widać tylko
 * fragment. Wymuszamy width:100% i proporcjonalną wysokość. */
.beloni-banner .banner-thumb,
.elementor-widget-banner .banner-thumb {
    width: 100% !important;
    overflow: hidden;
    display: block;
}
.beloni-banner .banner-thumb img,
.elementor-widget-banner .banner-thumb img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
    object-fit: contain;
}
@media (min-width: 992px) {
    html body .shop-control,
    html body .shop-before-control {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        flex-wrap: wrap !important;
    }
    html body .shop-control .per-page-form,
    html body .shop-control .woocommerce-ordering,
    html body .shop-before-control .per-page-form,
    html body .shop-before-control .woocommerce-ordering {
        display: inline-block !important;
        width: auto !important;
        min-width: 220px !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        float: none !important;
    }
    html body .shop-control .per-page-form > label,
    html body .shop-control .woocommerce-ordering > label,
    html body .shop-before-control .per-page-form > label,
    html body .shop-before-control .woocommerce-ordering > label {
        display: block !important;
        width: 100% !important;
    }
    html body .shop-control .beloni-select__trigger,
    html body .shop-control .per-page-form select.option-perpage,
    html body .shop-control .woocommerce-ordering select.orderby,
    html body .shop-before-control .beloni-select__trigger,
    html body .shop-before-control .per-page-form select.option-perpage,
    html body .shop-before-control .woocommerce-ordering select.orderby {
        min-width: 220px !important;
        width: 100% !important;
        padding-left: 22px !important;
        padding-right: 44px !important;
    }
    html body .shop-control .beloni-mobile-filters-toggle,
    html body .shop-before-control .beloni-mobile-filters-toggle {
        flex: 0 0 auto !important;
        width: auto !important;
        padding-left: 26px !important;
        padding-right: 26px !important;
        margin: 0 !important;
    }
}
/* Pkt 14 (Round 8): MOBILE + TABLET — "Na stronie" rozciągnięty.
 * Theme: per-page-form, label w środku, beloni-select, beloni-select__trigger,
 * option-perpage — WSZYSTKO musi mieć width:100% + display:block. */
@media (max-width: 991px) {
    html body .shop-before-control .per-page-form,
    html body .shop-before-control .woocommerce-ordering,
    html body .shop-before-control .per-page-form > label,
    html body .shop-before-control .woocommerce-ordering > label,
    html body .shop-before-control .per-page-form .beloni-select,
    html body .shop-before-control .woocommerce-ordering .beloni-select,
    html body .shop-before-control .beloni-select__trigger,
    html body .shop-before-control .per-page-form select,
    html body .shop-before-control .woocommerce-ordering select,
    html body .shop-before-control .option-perpage,
    html body .shop-before-control .orderby {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }
}


/* ─── pkt 18: Strengthen lightbox jedno-zdjęciowego (wycentrowanie) ────────── */
.beloni-product-lightbox--single .beloni-product-lightbox__thumbs,
.beloni-product-lightbox--single .beloni-product-lightbox__nav-prev,
.beloni-product-lightbox--single .beloni-product-lightbox__nav-next,
.beloni-product-lightbox--single .beloni-product-lightbox__count {
    display: none !important;
}
.beloni-product-lightbox--single .beloni-product-lightbox__stage,
.beloni-product-lightbox--single .beloni-product-lightbox__content,
.beloni-product-lightbox--single .beloni-product-lightbox__main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}
.beloni-product-lightbox--single .beloni-product-lightbox__image {
    margin: 0 auto !important;
    display: block !important;
    max-width: 90vw !important;
    max-height: 88vh !important;
}


/* ─── pkt 21 (Round 5): Cookie mobile — minimalna odległość od dołu. */
@media (max-width: 767px) {
    .beloni-cookie-consent,
    .beloni-cookie-banner,
    .beloni-cookie-consent .beloni-cookie-consent__banner,
    .beloni-cookie-consent__manage,
    button.beloni-cookie-consent__manage {
        bottom: 4px !important;
        box-shadow: none !important;
    }
}


/* ─── pkt 22: Slider "Może Ci się spodobać" — strzałki nie ucinane
 * Round 4: poprzedni fix miał overflow:visible na .slick-list co spowodowało że
 * widać było SĄSIEDNIE slajdy (wystawały poza viewport). Slick-list MUSI mieć
 * overflow:hidden, ale kontener z owl-slick może być visible — wtedy strzałki
 * z theme'owych left/right:-40px są widoczne na bokach. */
.beloni-related-after-tabs,
.woo_related-product {
    overflow: visible !important;
    position: relative;
}
.beloni-related-after-tabs .owl-slick,
.woo_related-product .owl-slick {
    overflow: visible !important;
    position: relative;
}
.beloni-related-after-tabs .owl-slick .slick-list,
.woo_related-product .owl-slick .slick-list {
    overflow: hidden !important;
}
.beloni-related-after-tabs .product-item,
.woo_related-product .product-item {
    position: relative !important;
}
/* Strzałki — wysoki z-index + zawsze widoczne (theme miał opacity:0 dopóki hover) */
.beloni-related-after-tabs .owl-slick .slick-arrow,
.woo_related-product .owl-slick .slick-arrow {
    z-index: 20 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(255,255,255,0.95) !important;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.beloni-related-after-tabs .owl-slick .slick-arrow.prev,
.woo_related-product .owl-slick .slick-arrow.prev {
    left: -20px !important;
}
.beloni-related-after-tabs .owl-slick .slick-arrow.next,
.woo_related-product .owl-slick .slick-arrow.next {
    right: -20px !important;
}
/* Pkt 1b (Round 3): klient nie chce białych okrągłych strzałek na mobile.
 * Na mobile slidery proponowanych obsługiwane przez swipe — strzałki dyskretne
 * (czarne, bez tła, bez cienia, bez okrągłej obwódki). */
@media (max-width: 767px) {
    .beloni-related-after-tabs .owl-slick .slick-arrow,
    .woo_related-product .owl-slick .slick-arrow {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: #111 !important;
        font-size: 26px !important;
        width: 30px !important;
        height: 30px !important;
    }
    .beloni-related-after-tabs .owl-slick .slick-arrow.prev,
    .woo_related-product .owl-slick .slick-arrow.prev {
        left: 0 !important;
    }
    .beloni-related-after-tabs .owl-slick .slick-arrow.next,
    .woo_related-product .owl-slick .slick-arrow.next {
        right: 0 !important;
    }
}
.beloni-related-after-tabs .product-item .product-thumb,
.woo_related-product .product-item .product-thumb {
    position: relative !important;
    z-index: 2 !important;
}
.beloni-related-after-tabs .product-item .product-thumb .flash,
.beloni-related-after-tabs .product-thumb .onsale,
.beloni-related-after-tabs .product-thumb .onnew,
.woo_related-product .product-item .product-thumb .flash,
.woo_related-product .product-thumb .onsale,
.woo_related-product .product-thumb .onnew {
    z-index: 50 !important;
}


/* ─── pkt 23: Mobile 2 obok ZAWSZE (klient: bez 1-na-1 nawet na małych) ───── */
@media (max-width: 767px) {
    .beloni-blog-related-grid > li,
    .beloni-blog-related-grid > .product-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding: 0 6px !important;
        margin-bottom: 14px !important;
    }
}
@media (max-width: 480px) {
    /* Nadpisuje wcześniejszą regułę 1-na-1 dla bardzo wąskich */
    .beloni-blog-related-grid > li,
    .beloni-blog-related-grid > .product-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}


/* ─── pkt 3: czcionki / styl WISHLIST + KOSZYK + CHECKOUT (Round 2 doprec.) ─ */

/* === WISHLIST ===
   Klient: usunąć obramowanie kart, typografia jak na karcie produktu listy.
   Lista bez gwiazdek (gwiazdki ukryte). Kosz w prawym górnym + DODAJ DO KOSZYKA
   na dole — to już mamy z templatu, tylko CSS porządkujemy. */
body.woocommerce-wishlist .beloni-wishlist-card,
body.woocommerce-wishlist .wishlist-items-wrapper .beloni-wishlist-card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 8px !important;
}
/* Pkt 9 (Round 4): klient chce mniejsze niż loop. Zmniejszamy każdy element. */
body.woocommerce-wishlist .beloni-wishlist-card .beloni-wishlist-title,
body.woocommerce-wishlist .beloni-wishlist-card .beloni-product-title-link a {
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #111 !important;
}
body.woocommerce-wishlist .beloni-wishlist-card .beloni-brand-name,
body.woocommerce-wishlist .beloni-wishlist-card .beloni-brand-name a {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    color: #777 !important;
}
body.woocommerce-wishlist .beloni-wishlist-card .beloni-wishlist-subtitle,
body.woocommerce-wishlist .beloni-wishlist-card .beloni-single-subtitle,
body.woocommerce-wishlist .beloni-wishlist-card .beloni-wishlist-capacity {
    font-size: 11px !important;
    color: #777 !important;
    line-height: 1.35 !important;
}
/* Bez gwiazdek w wishliście (klient: "można nie dodawać gwiazdek") */
body.woocommerce-wishlist .beloni-wishlist-card .star-rating,
body.woocommerce-wishlist .beloni-wishlist-card .rating-wapper,
body.woocommerce-wishlist .beloni-wishlist-card .beloni-store-rating {
    display: none !important;
}


/* === KOSZYK — dokładne wartości z briefa klienta ===
 * Markup (z woo-functions.php beloni_checkout_modify_cart_item_name):
 *   <div class="beloni-cart-table__cell--product product-name">
 *     <span class="beloni-cart-brand"><a>GIVENCHY</a></span>
 *     <a>Gentleman Intense</a>             ← tytuł = DIRECT CHILD <a>
 *     <div class="beloni-cart-subtitle">…</div>
 *     <div class="beloni-cart-capacity">…</div>
 *   </div>
 * Stąd: marka celuje w .beloni-cart-brand (i link w jej środku),
 * tytuł w `> a` (direct child) — nie złapie linka marki. */

/* MOBILE: marka 11→10, tytuł 16→14 */
@media (max-width: 767px) {
    body.woocommerce-cart .beloni-cart-table__cell--product .beloni-cart-brand,
    body.woocommerce-cart .beloni-cart-table__cell--product .beloni-cart-brand a {
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        color: #777 !important;
        text-transform: uppercase !important;
    }
    body.woocommerce-cart .beloni-cart-table__cell--product > a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #111 !important;
    }
}
/* DESKTOP: marka 12→10, tytuł 16→13 */
@media (min-width: 768px) {
    body.woocommerce-cart .beloni-cart-table__cell--product .beloni-cart-brand,
    body.woocommerce-cart .beloni-cart-table__cell--product .beloni-cart-brand a {
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        color: #777 !important;
        text-transform: uppercase !important;
    }
    body.woocommerce-cart .beloni-cart-table__cell--product > a {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #111 !important;
    }
}


/* === CHECKOUT === Marki CAPSLOCK (jak w koszyku), tytuł pogrubiony i lekko
       większy, podtytuł/pojemność mniejsze (jednolicie z koszykiem) */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name,
body.woocommerce-checkout .checkout .order_item .product-name {
    line-height: 1.35;
}
body.woocommerce-checkout .product-name .beloni-product-brand,
body.woocommerce-checkout .product-name .beloni-checkout-brand,
body.woocommerce-checkout .order_item .beloni-product-brand,
body.woocommerce-checkout .order_item .beloni-checkout-brand,
body.woocommerce-checkout .beloni-checkout-brand,
body.woocommerce-checkout .beloni-checkout-brand a {
    display: block !important;
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #8a8a8a !important;
    margin: 0 0 2px !important;
}
body.woocommerce-checkout .product-name .beloni-checkout-title,
body.woocommerce-checkout .product-name > strong,
body.woocommerce-checkout .order_item .product-name strong,
body.woocommerce-checkout .beloni-checkout-item-title {
    display: block !important;
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #111 !important;
}
/* Pkt 3b (Round 3): zmniejszony tytuł produktu — TYLKO checkout desktop.
 * Wishlist przeniesiony do pkt 9 (klient prosi rozmiar jak loop = 18px). */
@media (min-width: 768px) {
    body.woocommerce-checkout .beloni-checkout-item-title,
    body.woocommerce-checkout .product-name .beloni-checkout-title,
    body.woocommerce-checkout .product-name > strong,
    body.woocommerce-checkout .order_item .product-name strong {
        font-size: 13px !important;
    }
}
body.woocommerce-checkout .product-name .beloni-checkout-subtitle,
body.woocommerce-checkout .product-name .beloni-checkout-item-size,
body.woocommerce-checkout .order_item .beloni-checkout-subtitle,
body.woocommerce-checkout .order_item .beloni-checkout-item-size {
    display: block !important;
    font-size: 12px !important;
    color: #777 !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}


/* ============================================================================
 * KONIEC poprawek lokalnych. Reszta: pkt 2, 4 (styling popupu zsynchronizowany
 * dopiero gdy klient da decyzję), 5, 6, 7, 8, 17, 20, 23, 27 — patrz raport.
 * ============================================================================ */