/* ============================================================
 * v7-ux-fixes.css — UX fixes 2026-06-10 (audyt wizualny)
 * 1) Skeleton tło dla lazy obrazów kart — zamiast białej pustki
 * 2) USP badge na kartach bez opinii (zamiast "Brak opinii")
 * 3) Formularz "Powiadom o dostępności" (OOS)
 * CSS-only, bez JS dependencies.
 * ============================================================ */

/* --- 1) SKELETON — obraz karty produktu ma jasne tło zanim się
 *        załaduje; po załadowaniu obraz je przykrywa (img = cover). */
.hbt-loop-card .hbt-loop-card__thumb,
.hbt-loop-card a > img[loading="lazy"],
.products .product > a img[loading="lazy"] {
    background-color: #f3f5f1;
}
/* Hero slajdy 2+ — ciemniejszy placeholder w kolorze marki zamiast szarości */
.hbt-hero-slide:not(:first-child) {
    background-color: #243018;
}

/* --- 2) USP badge zamiast pustego ratingu --- */
.hbt-loop-card__rating--usp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #5b7c3f;
    line-height: 1.2;
    min-height: 18px; /* ta sama wysokość co rating ze star — zero CLS przy mieszanych kartach */
}
.hbt-loop-card__rating--usp i {
    font-size: 11px;
    color: #7CB342;
}

/* --- 3) OOS NOTIFY — formularz „Powiadom o dostępności" --- */
.hbt-oos-notify {
    margin: 16px 0;
    padding: 16px;
    background: #f6f8f4;
    border: 1px solid #dde5d4;
    border-radius: 8px;
}
.hbt-oos-notify__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #2d3a20;
}
.hbt-oos-notify__desc {
    font-size: 12px;
    color: #687a55;
    margin: 0 0 10px;
}
.hbt-oos-notify__row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hbt-oos-notify__email {
    flex: 1 1 200px;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid #c6d2b8;
    border-radius: 6px;
    font-size: 14px;
}
.hbt-oos-notify__email:focus {
    outline: none;
    border-color: #7CB342;
    box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.15);
}
.hbt-oos-notify__btn {
    height: 42px;
    padding: 8px 18px;
    background: #7CB342;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.hbt-oos-notify__btn:hover { background: #689F2F; }
.hbt-oos-notify__btn:disabled { opacity: .6; cursor: not-allowed; }
.hbt-oos-notify__msg {
    margin: 8px 0 0;
    font-size: 12px;
    display: none;
}
.hbt-oos-notify__msg.is-ok    { display: block; color: #2E7D32; }
.hbt-oos-notify__msg.is-error { display: block; color: #c0392b; }
/* honeypot — niewidoczne dla ludzi */
.hbt-oos-notify__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --- 4) SEARCH DROPDOWN — badge dostępności --- */
.hbt-as-stock--in  { color: #2E7D32; font-weight: 600; }
.hbt-as-stock--out { color: #b0413e; }

/* --- 5) HERO SLIDER FIX 2026-06-10 — slajdy 2-5 renderowały się SZARE
 *        (wieczna CSSTransition trzymała opacity:0 na .is-active —
 *        konflikt silników; klienci nigdy nie widzieli slajdów 2+).
 *        Nadrzędna reguła wymusza widoczność active niezależnie od JS. --- */
/* KROK 1: wytnij opacity z transition — wieczna CSSTransition trzymała
 *         interpolowaną wartość 0 (transition bije nawet !important). */
.hbt-hero-slider-stage .hbt-hero-slide {
    transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* KROK 2: stan jawny — bez transition opacity wynika wprost z reguł. */
.hbt-hero-slider-stage .hbt-hero-slide:not(.is-active) { opacity: 0 !important; }
.hbt-hero-slider-stage .hbt-hero-slide.is-active      { opacity: 1 !important; }

/* --- 6) COOKIE BANNER FIX 2026-06-10 — baner zgody (Complianz) był NIEWIDOCZNY
 *        dla gości: .cmplz-cookiebanner dostawał animation:fadeIn z efektów theme'a
 *        z animation-fill-mode:none → po animacji opacity wracało do 0, a ciemna
 *        nakładka (cookie wall) blokowała całą stronę. Ta sama klasa błędu co hero
 *        (kończąca się animacja bije reguły CSS).
 *        Fix: gdy baner ma być widoczny (cmplz-show, NIE cmplz-hidden) — zabij
 *        animację i wymuś opacity 1. :not(.cmplz-hidden) chroni stan zaakceptowany/
 *        odrzucony (wtedy baner ma zniknąć — nie nadpisujemy). --- */
.cmplz-cookiebanner.cmplz-show:not(.cmplz-hidden) {
    opacity: 1 !important;
    animation: none !important;
}

/* --- 7) QUICK-LINKS KAFELKI 2026-06-10 (v2) — kafelki podłużne/niestabilne:
 *        .home-banners grid miał grid-template-rows:320px + align-self:stretch
 *        → 281×320, a gdy .banner-track flipował z display:contents na block,
 *        kafelki nie trafiały do grida .home-banners → pełnowymiarowe pasy 1-kol.
 *        Fix v2: .banner-track JEST właścicielem grida (display:grid) — działa
 *        niezależnie od stanu .banner-track. 5/3/2 kolumny + kwadrat aspect-ratio.
 *        :not(#zz) podbija specyficzność (bazowa reguła grid w CORS-combined CSS). --- */
html body .home-banners:not(#zz) { display: block !important; }
html body .home-banners .banner-track:not(#zz):not(#zz) {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
}
html body .home-banners .banner-track:not(#zz) > .banner-card,
html body .home-banners .banner-track:not(#zz) > a {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    width: auto !important;
}
@media (max-width: 1200px) { html body .home-banners .banner-track:not(#zz):not(#zz) { grid-template-columns: repeat(3, 1fr) !important; } }
/* Mobile (≤700px): kafelki PŁASKIE (nie kwadrat — był „ogromne") — 2 kol, niski
 * profil jak oryginalny v65 (min-height 92px, mniejsze fonty, height:auto = brak clipu). */
@media (max-width: 700px) {
    html body .home-banners .banner-track:not(#zz):not(#zz) { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    html body .home-banners .banner-track:not(#zz) > .banner-card,
    html body .home-banners .banner-track:not(#zz) > a {
        aspect-ratio: auto !important; height: auto !important; min-height: 92px !important; max-height: none !important; padding: 10px 12px !important;
    }
    html body .home-banners .banner-track:not(#zz) .bc-text strong { font-size: 14px !important; line-height: 1.2 !important; }
    html body .home-banners .banner-track:not(#zz) .bc-text span { font-size: 9px !important; }
    html body .home-banners .banner-track:not(#zz) .bc-icon i,
    html body .home-banners .banner-track:not(#zz) .bc-icon .fas { font-size: 20px !important; }
}

/* --- 8) IKONA "WYBIERZ KATEGORIĘ" 2026-06-10 — była hamburgerem (fa-bars) takim samym
 *        jak menu główne → na wąskim mobile dwa identyczne hamburgery obok siebie (mylące).
 *        Fix: rysowana CSS-em siatka 2×2 (glifów siatki FA brak w subsecie fa.min.css),
 *        currentColor = biały tekst przycisku. Globalnie (siatka=kategorie pasuje wszędzie). --- */
html body .nav-cat-trigger i.fa-bars {
    width: 16px !important; height: 16px !important; position: relative !important;
    display: inline-block !important; font-size: 0 !important; line-height: 0 !important; vertical-align: -2px !important;
}
html body .nav-cat-trigger i.fa-bars::before {
    content: "" !important; position: absolute !important; left: 1px !important; top: 1px !important;
    width: 6px !important; height: 6px !important; background: currentColor !important;
    box-shadow: 9px 0 0 currentColor, 0 9px 0 currentColor, 9px 9px 0 currentColor !important; border-radius: 1px !important;
}

/* --- 9) A11Y KONTRAST 2026-07-18 (PSI: color-contrast score 0) — kolory
 *        poniżej progu WCAG 4.5:1 podciągnięte z zachowaniem odcienia marki.
 *        Zmierzone: #7cb342/biały=2.50, #909090=3.19, #558b2f/#f8f7f2=3.82,
 *        #797979=4.35. Nowe: #4a7a24 (5.12 na białym, 4.77 na #f8f7f2),
 *        #6b6b6b (5.33), #6e6e6e (5.10). --- */
.hbt-loop-card__price .woocommerce-Price-amount,
.hbt-loop-card__price .woocommerce-Price-amount bdi {
    color: #4a7a24 !important;
}
.hbt-loop-card__price-net,
.hbt-loop-card__price-net .woocommerce-Price-amount,
.hbt-loop-card__price-net .woocommerce-Price-amount bdi {
    color: #6e6e6e !important;
}
.hbt-loop-card__meta a { color: #6b6b6b !important; }
.section-header .see-all { color: #4a7a24 !important; }

/* --- 10) A11Y TOUCH TARGETS 2026-07-18 (PSI: target-size) — kropki hero
 *         i linki kategorii na kartach < 24px. Hit-area rośnie paddingiem,
 *         wizualnie kropka zostaje mała (background-clip:content-box). --- */
.hbt-hero-slider-dots .hbt-hero-dot {
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 7px !important;
    background-clip: content-box !important;
    box-sizing: border-box !important;
}
.hbt-loop-card__meta a {
    display: inline-block;
    padding: 5px 4px;
    margin: -3px 0;
}

/* --- 11) A11Y NAGŁÓWKI 2026-07-18 (PSI: heading-order) — tytuły paneli
 *         kategorii/marek zmienione z <h4> na <h2 class="hbt-h4"> (skok
 *         h1→h4 łamał kolejność). Ta klasa odtwarza wygląd dawnego h4. --- */
/* Odtworzenie wyglądu dawnych .mm-brands h4 / .sb-flyout h4 (13px uppercase). */
.hbt-h4 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hbt-primary-dark, var(--primary-d, #558B2F));
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 10px;
}
.mm-brands .hbt-h4 { font-size: 12px; color: var(--text-l, #616161); letter-spacing: .5px; margin-bottom: 8px; }

/* --- 12) JEDEN HAMBURGER 2026-07-18 — na urządzeniach dotykowych #navHamburger
 *         pokazuje się niezależnie od szerokości (pointer:coarse w legacy-main),
 *         a „WYBIERZ KATEGORIĘ" chował się tylko po max-width → na tabletach /
 *         telefonach w poziomie były DWA przyciski menu obok siebie (zgłoszenie
 *         usera). Trigger znika we WSZYSTKICH warunkach, w których widać
 *         hamburger (kategorie i tak są w jego drawerze). Warunki 1:1 z regułą
 *         pokazującą #navHamburger. --- */
@media (max-width: 991px),
       (pointer: coarse) and (hover: none),
       (orientation: landscape) and (max-height: 600px) {
    html body .site-nav .nav-cat-trigger,
    html body .nav-cat-wrap .nav-cat-trigger {
        display: none !important;
    }
}

/* --- 13) DESKTOP: JEDEN PRZYCISK MENU 2026-07-18 — na desktopie (myszka,
 *         >=992px) obok „WYBIERZ KATEGORIĘ" renderował się DRUGI przycisk
 *         #navHamburger (czarny kwadrat ☰), mimo że pełne linki nav są
 *         widoczne (zgłoszenie usera: „dwa hamburgery" na desktop).
 *         effects.css wymusza mu display:inline-flex globalnie, więc
 *         chowamy z tą samą siłą. Kategorie = zielony przycisk, linki =
 *         pasek nav; hamburger potrzebny tylko na dotyku/wąskich (s.12). --- */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    html body .site-nav .nav-hamburger,
    html body #navHamburger {
        display: none !important;
    }
}

/* --- 14) CLS DESKTOP 2026-07-18 (PSI: shift 0.108 w home-content + 3×site-search)
 *  a) repositionSections (shop-fixes) przenosi karuzele/kategorie z kolumny
 *     .home-content do main PO pierwszym paincie → widoczny skok. Fix: w kolumnie
 *     są ukryte OD STARTU (pierwszy paint = finalny układ kolumny), pokazują się
 *     dopiero z klasą .hbt-repositioned nadawaną przy przeniesieniu — wstawka
 *     ląduje przed .hbt-offer, poniżej viewportu → przesunięcie niewidoczne.
 *     Guard @media (scripting:none): bez JS sekcje normalnie widoczne w kolumnie. */
main.hbt-homepage .home-content > section.home-products-carousel,
main.hbt-homepage .home-content > section.home-categories {
    display: none;
}
main.hbt-homepage section.hbt-repositioned {
    display: block !important;
}
@media (scripting: none) {
    main.hbt-homepage .home-content > section.home-products-carousel,
    main.hbt-homepage .home-content > section.home-categories {
        display: block;
    }
}
/*  b) site-search w headerze skakał przy dociąganiu fontu (3 drobne shifty).
 *     Stała wysokość formy = zero ruchu niezależnie od metryk fontu. */
#siteHeader .site-search {
    min-height: 64px;
    align-items: center;
}

/* --- 15) WYSZUKIWARKA MOBILE UCIĘTA <360px 2026-07-18 — .hbt-mobile-search-row
 *         ma sztywną wysokość z overflow:hidden; przy bardzo wąskich ekranach
 *         (np. 316px) elementy headera zawijają się, formularz wypychany jest
 *         poniżej 68px kontenera i CLIP ucina go do paska-skrawka → nie da się
 *         szukać (zgłoszenie usera: „nieczytelne"). Wysokość auto + overflow
 *         visible + form w flow = pełny, klikalny pasek na każdej szerokości. --- */
@media (max-width: 767px) {
    html body .hbt-mobile-search-row {
        height: auto !important;
        min-height: 68px;
        overflow: visible !important;
    }
    html body .hbt-mobile-search-row form[role="search"] {
        position: static !important;
    }
}

/* --- 16) MOBILE ANTI-OVERFLOW 2026-07-18 — bezpiecznik przeciw poziomym
 *         rozjazdom na telefonach (zgłoszenie: treść prześwituje obok stopki,
 *         desktopowy header na iPhone = dokument szerszy niż viewport).
 *         overflow-x:clip (NIE hidden — hidden robi z body scroll-container
 *         i psuje position:sticky; clip tylko ucina). Szerokie media i tabele
 *         z opisów produktów dostają własny scroll zamiast rozpychać stronę. --- */
@media (max-width: 767px) {
    html, body {
        max-width: 100vw;
        overflow-x: clip;
    }
    img, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto;
    }
    .hbt-single-product table,
    .woocommerce-Tabs-panel table,
    .entry-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    pre {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* --- 17) RESPONSYWNOŚĆ RUNDA 2 (2026-07-21) — kolizje warstw fixed na mobile,
 *         flyout koszyka, hero, topbar (zgłoszenie: screeny iPhone + desktop).
 *         ux.css drukuje się na wp_head:8, PRZED chrome-vars/shop-fixes/v66,
 *         więc każda reguła wygrywa SPECYFICZNOŚCIĄ: :not(#zz) = +1 poziom ID
 *         (wzorzec ustalony w sekcji 7). --- */

/*  a) TOPBAR desktop: treść zielonego paska wyśrodkowana zamiast space-between
 *     od krawędzi do krawędzi. Nadpisuje v65 (wp_head:1100, spec 0,2,0). */
@media (min-width: 992px) {
    html body .promo-bar > .container-full:not(#zz) {
        justify-content: center !important;
        /* 8.3.3: gęstszy gap — przy oknach ~1200px cztery bloki wypełniały
           pasek w 100% i centrowanie było niewidoczne; mniejszy gap zostawia
           symetryczny oddech po bokach już od ~1250px wzwyż */
        gap: clamp(18px, 2.2vw, 56px) !important;
    }
    html body .promo-bar > .container-full:not(#zz) > * {
        flex: 0 1 auto !important;
    }
}

/*  b) FLYOUT KOSZYKA: z-index 1001 < FAB-y (cookie 9990, btt 9997) → kółka
 *     leżały NA stopce „Suma brutto / Do kasy". 10000 = nad FAB-ami, pod
 *     mobile-menu (10001). Na telefonie panel pełnoekranowy (bazowe 92%
 *     zostawiało pasek tła z lewej = „rozjechany" arkusz ze screena). */
html body .hbt-cart-flyout:not(#zz) {
    z-index: 10000 !important;
}
@media (max-width: 767px) {
    html body .hbt-cart-flyout .hbt-cart-flyout-panel:not(#zz) {
        width: 100% !important;
        max-width: none !important;
    }
}

/*  c) STOS DOLNYCH WARSTW MOBILE. Dolna nawigacja = 56px treści
 *     + max(6px, safe-area) paddingu; sticky „Do koszyka" miał zaszyte
 *     bottom:56px → 6px nakładki (a ~28px na iPhone z home-indicatorem).
 *     UWAGA: token --hbt-fab-bottom steruje też cookie-FABem — JS z v65
 *     (wp_footer:100) kopiuje computed bottom z .btt na przycisk Complianz,
 *     więc pozycje idą przez token, nie przez selektory .cmplz-*. */
@media (max-width: 767px), (min-width: 768px) and (max-width: 991px) and (pointer: coarse) and (hover: none) {
    /* btt + cookie-FAB piętro nad FABem kontaktu (76+46+16) — koniec
       nakładania się dwóch prawych kółek w jednym miejscu */
    :root:not(#zz) {
        --hbt-fab-bottom: calc(132px + max(6px, env(safe-area-inset-bottom)));
    }
}
@media (max-width: 767px) {
    /* sticky ATC dokładnie NAD dolną nawigacją, śledzi safe-area */
    html body[class] .hbt-sticky-bar:not(#zz) {
        bottom: calc(56px + max(6px, env(safe-area-inset-bottom))) !important;
    }
    /* karta produktu: FAB-y wędrują NAD sticky bar — kontakt tuż nad nim,
       btt+cookie piętro wyżej (nic nie zakrywa nazwy/ceny/Do koszyka) */
    html body.single-product.hbt-has-sticky-bar:not(#zz) {
        --hbt-fab-bottom: calc(190px + max(6px, env(safe-area-inset-bottom)));
    }
    html body.single-product.hbt-has-sticky-bar .hbt-contact-fab:not(#zz) {
        bottom: calc(132px + max(6px, env(safe-area-inset-bottom))) !important;
    }
    /* clearance treści: globalne 72px z v65 nie rośnie z safe-area;
       cart/checkout mają własne wartości — wykluczone */
    html body:not(.woocommerce-cart):not(.woocommerce-checkout):not(#zz) {
        padding-bottom: calc(66px + max(6px, env(safe-area-inset-bottom))) !important;
    }
    html body.single-product.hbt-has-sticky-bar:not(.woocommerce-cart):not(#zz) {
        padding-bottom: calc(134px + max(6px, env(safe-area-inset-bottom))) !important;
    }
}

/*  d) HERO — kropki POZA sceną (rewizja 8.3.3, zgłoszenie: tekst na kropkach
 *     przy ~700-1300px i zoomach). Pigułka kropek żyła WEWNĄTRZ stage'a
 *     (shop-fixes bottom:12px), a rezerwy per-pasmo (72px desktop / 46px
 *     mobile) nie pokrywały pasma 601-991 ani przeskalowanych okien.
 *     Rozwiązanie klasy problemu: slider dostaje pas 52px POD sceną
 *     (padding-bottom), pigułka schodzi do pasa (bottom:6), zielony
 *     progress-bar klei się do dołu SCENY. Slajd odzyskuje pełną wysokość
 *     sceny na treść — kolizja tekst/kropki jest niemożliwa z definicji. */
html body .hbt-hero-slider:not(#zz) {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 52px !important;
}
html body .hbt-hero-slider-dots:not(#zz) {
    top: auto !important;
    bottom: 6px !important;
}
html body .hbt-hero-progress:not(#zz) {
    top: auto !important;
    bottom: 52px !important;
}

/*  e) HERO mobile: stage zbijany przez shop-fixes do 2/1 + 30vh (~195px @390)
 *     przy treści ~250px pod overflow:hidden → ucięte „DOWIEDZ SIĘ WIĘCEJ".
 *     Wyższy stage (16/10, min 230px) + odchudzony text-box (v66 dawał
 *     24px pion) + nagłówek max 2 linie. Pas na kropki daje już blok d). */
@media (max-width: 600px) {
    html body[class] .hbt-hero-slider-stage:not(#zz):not(#zz) {
        aspect-ratio: 16 / 10 !important;
        max-height: 48vh !important;
        min-height: 230px !important;
    }
    html body .hbt-hero-slide:not(#zz) {
        min-height: 0 !important;
    }
    html body .hbt-hero-slide-text:not(#zz) {
        padding: 10px 14px !important;
    }
    html body[class] .hbt-hero-slide-text:not(#zz) h2 {
        -webkit-line-clamp: 2 !important;
        margin-bottom: 4px !important;
    }
    html body .hbt-hero-desc:not(#zz) {
        margin-bottom: 6px !important;
    }
}

/* --- 18) AUDYT UX RUNDA 3 (2026-07-23) — zgłoszenia ze screenów usera:
 *         related 1-kol, duch-kółko FABa, czarny tytuł schowka na czarnym
 *         pasie, pusty pill nad empty-state, ciasne guttery produktu. --- */

/*  a) POWIĄZANE/UPSELLE na telefonie w siatce 2 kolumny jak archiwum sklepu
 *     (shop-fixes wymuszał 1fr → gigantyczne karty jedna pod drugą). */
@media (max-width: 480px) {
    html body .related ul.products:not(#zz),
    html body .upsells ul.products:not(#zz) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/*  b) Pulsujący ring ::after na FABie kontaktu — na screenshotach łapany
 *     w połowie animacji wygląda jak drugie, rozjechane kółko („ikonki
 *     wychodzą poza kółka"). Czysty FAB bez aureoli. */
html body .hbt-contact-fab:not(#zz)::before,
html body .hbt-contact-fab:not(#zz)::after,
html body .btt:not(#zz)::before,
html body .btt:not(#zz)::after {
    display: none !important;
    animation: none !important;
}

/*  c) STRONA SCHOWKA: tytuł strony renderowany kolorem tekstu (#1a1714)
 *     na gradiencie .hbt-page-header (#1a1714→#2d2820) = czarne na czarnym.
 *     Wszystko w ciemnym page-headerze ma być białe. */
html body .hbt-page-header h1:not(#zz),
html body .hbt-page-header .hbt-page-title:not(#zz),
html body .hbt-page-header p:not(#zz),
html body .hbt-page-header a:not(#zz) {
    color: #fff !important;
}

/*  d) Pusty biały „pill" nad kartą pustego schowka = form#yith-wcwl-form
 *     z tabelą schowaną przez YITH (display:none) albo z samym wierszem
 *     .wishlist-empty — motyw ma własny, ładny empty-state niżej, więc
 *     pusty formularz znika. Przy produktach w schowku tabela jest
 *     widoczna bez wiersza empty → form zostaje. */
html body form.yith-wcwl-form:not(#zz):has(td.wishlist-empty),
html body form.yith-wcwl-form:not(#zz):has(> table[style*="display: none"]),
html body form.yith-wcwl-form:not(#zz):has(> table[style*="display:none"]) {
    display: none !important;
}

/*  e) Guttery treści na telefonie: 2vw dawało 7,8px @390 (karta produktu
 *     „dotyka wszystkiego po bokach"). Stała, oddychająca ramka 16px. */
@media (max-width: 767px) {
    html body .hbt-main-wrap:not(#zz) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}