/*
Theme Name:   Mizu Child
Description:  Motyw potomny dla Mizu — sklep "Z Potrzeby Piękna".
Template:     mizu
Version:      1.0.0
Text Domain:  mizu-child
*/

/* ============================================================
   CUSTOM CSS — Z POTRZEBY PIĘKNA
   ============================================================
   Zmigrowane z pola "Dodatkowy CSS" (baza WP) do child theme.
   Motyw: Mizu (hybryda Bootstrap header/footer + FSE content)

   UWAGA: Po każdej aktualizacji motywu Mizu sprawdzić
   czy wszystkie reguły nadal działają — selektory mogą się zmienić.
   ============================================================ */


/* ============================================================
   1. EFEKTY HOVER — STRONA GŁÓWNA (BLOKI COVER)
   ============================================================
   Klasy dodawane ręcznie przez Edytor → panel po prawej →
   Zaawansowane → Klasy CSS.

   ZDJĘCIE (klasa na bloku Cover):
   - hover-overlay:  ciemny welon przy najechaniu
   - hover-reveal:   zdjęcie startuje przyciemnione, koloryzuje

   TEKST (klasa na bloku Akapit wewnątrz Cover):
   - hover-text:     skala 1.2 + rotacja -5° (stary efekt z migracji)
   - hover-emerge:   tekst wyłania się ze skali z bujnięciem (nowy)

   Klasy z różnych warstw można łączyć — np. Cover z hover-reveal
   + akapit z hover-emerge daje pełen efekt na obu warstwach.
   ============================================================ */

/* hover-overlay — ciemny welon pojawia się przy najechaniu */
.hover-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}
.hover-overlay:hover::after {
    background: rgba(0, 0, 0, 0.3);
}

/* hover-reveal — zdjęcie startuje przyciemnione (opacity 0.3),
   przy najechaniu odsłania się w pełni (opacity 0).
   Działa na warstwie tła bloku Cover, nie na samym obrazie. */
.hover-reveal .wp-block-cover__background {
    opacity: 0.2 !important;
    transition: opacity 0.3s ease;
}
.hover-reveal:hover .wp-block-cover__background {
    opacity: 0 !important;
}

/* hover-text — animacja tekstu wewnątrz Cover przy hoverze rodzica.
   Skala 1.2 + rotacja -5° = efekt "shake/zoom".
   Klasa na akapicie. Wyzwalana przez hover na Cover z hover-overlay
   lub hover-reveal. Stary efekt — do oceny przez art directora. */
.hover-text {
    transition: transform 0.3s ease;
}
.hover-overlay:hover .hover-text,
.hover-reveal:hover .hover-text {
    transform: scale(1.2) rotate(-5deg);
}

/* hover-emerge — wyłanianie tekstu ze skali 0.7 → 1.0 z bujnięciem.
   Klasa na akapicie. Wyzwalana przez hover na DOWOLNYM bloku Cover
   (selektor .wp-block-cover:hover, nie konkretna klasa rodzica).
   cubic-bezier z przebiciem 1.56 za wartością 1.0 = sprężynka. */
.hover-emerge {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 400ms ease, transform 400ms ease;
}
.wp-block-cover:hover .hover-emerge {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 400ms ease,
        transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============================================================
   2. WOOCOMMERCE — KATALOG PRODUKTÓW
   ============================================================ */

/* Ukrywa licznik "Wyświetlanie X z Y wyników" nad listą produktów.
   Niepotrzebny przy małym katalogu butiku — szum wizualny.
   Alternatywa: usunąć blok z szablonu FSE. */
.woocommerce-result-count {
    display: none !important;
}

/* Listing produktów — hover z przyciemnieniem zdjęcia + cieniem na karcie.
   Cień prawo-dół z z-index sugeruje delikatne uniesienie produktu.
   Brightness 0.9 = bardzo subtelne ściemnienie zdjęcia (decyzja brand). */
ul.products li.product {
    position: relative;
    transition: box-shadow 0.3s ease;
}
ul.products li.product:hover {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 10;
}
ul.products li.product img {
    transition: filter 0.3s ease;
}
ul.products li.product:hover img {
    filter: brightness(0.9);
}


/* ============================================================
   3. HEADER — LOGO, PROPORCJE KOLUMN, CIEŃ
   ============================================================
   Motyw bazuje na Bootstrap-owym scaffoldingu z PrestaShopa:
   IDki #_desktop_logo, #_desktop_top_menu, #right-quick-links.

   Domyślne proporcje motywu: col-md-2 / col-md-7 / col-md-3
   = ~16.6% / ~58.3% / 25% — zakładają obszerne menu.

   My mamy tylko 2 pozycje top-level (MARKI, KOLEKCJA),
   więc redystrybujemy szerokość żeby logo miało więcej miejsca:
   30% / 50% / 20%.

   !!! BUG DO SKORYGOWANIA (z sesji 31/05):
   desktop = 2rem, tablet (768-1199px) = 2.25rem, mobile = 1.5rem.
   Tablet jest WIĘKSZY niż desktop — nielogiczne. Wartości
   przeniesione wiernie ze stanu produkcji; do poprawy osobno,
   żeby test dev↔prod był czysty.
   ============================================================ */

/* Rozmiar loga */
#_desktop_logo .logo,
#_mobile_logo .logo {
    max-height: 2rem !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

/* Zdejmuje sztywną wysokość headera, pozwala mu rosnąć
   proporcjonalnie do zawartości (np. większego loga). */
#header .header-nav {
    min-height: auto !important;
}

/* Proporcje kolumn headera: 30% / 50% / 20%
   (logo / menu / koszyk+konto). Override Bootstrap col-md-2/7/3. */
#_desktop_logo {
    flex: 0 0 30% !important;
    max-width: 30% !important;
}
#_desktop_top_menu {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
#right-quick-links {
    flex: 0 0 20% !important;
    max-width: 20% !important;
}

/* Mobile (poniżej 1200px) — mniejsze logo, dopasowane do węższego headera */
@media (max-width: 1199px) {
    #_desktop_logo .logo,
    #_mobile_logo .logo {
        max-height: 1rem !important;
    }

    /* Reset proporcji kolumn — na mobile struktura jest inna,
       desktop'owe 30/50/20 nie ma zastosowania */
    #_desktop_logo,
    #_desktop_top_menu,
    #right-quick-links {
        flex: initial !important;
        max-width: initial !important;
    }
}

/* Tablet (768px - 1199px) — logo średnie, między desktop a mobile */
@media (max-width: 1199px) and (min-width: 768px) {
    #_desktop_logo .logo,
    #_mobile_logo .logo {
        max-height: 2.25rem !important;
    }

    #_desktop_logo,
    #_desktop_top_menu,
    #right-quick-links {
        flex: initial !important;
        max-width: initial !important;
    }
}

/* Mobile (poniżej 768px) — logo małe, dopasowane do wąskiego ekranu */
@media (max-width: 767px) {
    #_desktop_logo .logo,
    #_mobile_logo .logo {
        max-height: 1.5rem !important;
    }

    #_desktop_logo,
    #_desktop_top_menu,
    #right-quick-links {
        flex: initial !important;
        max-width: initial !important;
    }
}

/* Usuwa cienką ciemnoszarą linię pod headerem (oryginalnie 1px #4d4d4d).
   Header płaski — bez cienia (zaakceptowane). */
.header-nav {
    border-bottom: none !important;
    box-shadow: none !important;
}


/* ============================================================
   4B. MENU — KLASYCZNY DROPDOWN (popover sub-menu)
   ============================================================
   Motyw renderuje submenu jako .popover.sub-menu (PrestaShop legacy,
   nie myl z Bootstrap 5 popover/tooltip). Domyślnie full-width
   z rozłożeniem wszystkiego na raz (megamenu) — przerabiamy na
   wąski pionowy dropdown pod konkretną pozycją menu.

   WAŻNE: Cała sekcja zamknięta w @media (min-width: 1200px),
   żeby nie ingerować w mobilne offcanvas/hamburger które
   też używają .popover.sub-menu w swojej strukturze.
   ============================================================ */

@media (min-width: 1200px) {
    /* Pozycja parenta — niezbędne żeby submenu kotwiczyło się pod MARKI */
    ul#desktop-top-menu > li.category {
        position: relative !important;
    }

    /* Submenu — wąski dropdown pod pozycją, nie full-width */
    .popover.sub-menu {
        position: absolute !important;
        top: calc(100% + 18px) !important;
        left: 0 !important;
        right: auto !important;
        width: max-content !important;
        min-width: 180px !important;
        max-width: 280px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        padding: 0rem 0rem !important;
        margin: 0 !important;
    }

    /* Niewidzialny most łączący MARKI z submenu — bez tego kursor
       przechodząc między pozycją menu a submenu trafia w 8px pustki
       i submenu się zamyka. ::before rozszerza obszar hover w górę. */
    .popover.sub-menu::before {
        content: '';
        position: absolute;
        top: -18px;
        left: 0;
        right: 0;
        height: 18px;
        background: transparent;
    }

    /* Lista pozycji — pionowy stack, zerowanie kolumn */
    .popover.sub-menu ul.top-menu {
        display: block !important;
        columns: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Pojedyncza pozycja */
    .popover.sub-menu ul.top-menu > li {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        min-height: 0 !important;
    }

    /* Link w pozycji */
    .popover.sub-menu ul.top-menu > li > a.dropdown-item {
        display: block !important;
        padding: 0rem 0rem !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        min-height: 0 !important;
        height: auto !important;
    }
}


/* ============================================================
   6. STICKY HEADER — UNIERUCHOMIENIE NA GÓRZE PRZY SCROLLU
   ============================================================
   Mizu domyślnie chowa header przy scroll-down (klasa slideUp
   dodawana JS-em, animuje header w górę). Zerujemy efekt
   animacji — header zostaje przyklejony na górze (sticky-top
   już jest natywnie), zyskuje półprzezroczyste tło z blurem.

   Spójność wizualna z dropdownem (sekcja 4B): te same wartości
   opacity (0.3) i blur (10px). Opacity 0.3 czeka na decyzję estetki.
   ============================================================ */

#header.sticky-top {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 1000 !important;
}

/* Wyłącz animację chowania headera przy scroll-down.
   Motyw dodaje slideUp przez JS — nadpisujemy żeby nic nie robiło. */
#header.slideUp {
    transform: none !important;
    animation: none !important;
    top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================
   8. LINKI — JEDNOLITY HOVER (podkreślenie wyjeżdża z lewej)
   ============================================================
   Whitelista: treść + cover + menu. NIE globalne `a` —
   buttony, ikony i logo zostają nietknięte.
   UWAGA: główna i Żurnal renderują się POZA .entry-content —
   link poza treścią dostaje kreskę dopiero po dopisaniu do
   whitelisty. Podpisy w hero (h2-h6) dopisane 19.08.2026;
   H1 w hero CELOWO bez linku i bez kreski (decyzja JK).


   ============================================================ */
.entry-content a,
.cover-link a,
.cover-link,
.main-banner-slide :is(h2, h3, h4, h5, h6) a,
ul#desktop-top-menu > li > a,
ul.top-menu > li > a,
.popover.sub-menu ul.top-menu > li > a.dropdown-item,
.woocommerce-MyAccount-navigation a .navigation-label {
    color: inherit;
    text-decoration: none !important;
    border-bottom: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.7s ease;
    padding-bottom: 2px;
}

.entry-content a:hover,
.cover-link a:hover,
.cover-link:hover,
.main-banner-slide :is(h2, h3, h4, h5, h6) a:hover,
ul#desktop-top-menu > li > a:hover,
ul.top-menu > li > a:hover,
.popover.sub-menu ul.top-menu > li > a.dropdown-item:hover,
.woocommerce-MyAccount-navigation-link a:hover .navigation-label {
    background-size: 100% 1px;
}

/* Dropdown: linki są block (pełna szerokość) — zwęź box do tekstu,
   żeby kreska była pod słowem, nie na całą szerokość panelu.
   li zostaje block, więc pozycje nadal układają się pionowo. */
.popover.sub-menu ul.top-menu > li > a.dropdown-item {
    display: inline-block !important;
}
.woocommerce-MyAccount-navigation a .navigation-label {
    display: inline-block !important;
}
/* Dotyk (brak hovera) — underline widoczny od razu, bez czekania na najechanie.
   Tylko treść: na dotyku link musi się wyróżniać sam z siebie.
   (hover: none) = urządzenie bez myszki/trackpada. */
@media (hover: none) {
    .entry-content a {
        background-size: 100% 1px;
    }
}
/* Nawigacja konta: tekst w <h3 class="navigation-label"> (block) —
   zwęź do inline-block, żeby kreska siadła pod słowem, nie na całą
   szerokość pozycji. Mizu owija <a> wokół <li><h3>. */
.woocommerce-MyAccount-navigation a .navigation-label {
    display: inline-block !important;
}
/* ============================================================
   9. TYPOGRAFIA — HANKEN GROTESK (variable font)
   ============================================================
   Variable font: jeden plik (55 KB) zawiera wszystkie wagi 100-900.
   Hanken Grotesk = ta sama rodzina co HK Grotesk, świeższa wersja
   z 2020+ z Google Fonts. Pełne polskie znaki.

   font-display: swap PRZYWRÓCONE — w pliku child theme walidator
   pola "Dodatkowy CSS" już nie obowiązuje. Tekst renderuje się
   fontem zastępczym do czasu załadowania WOFF2 (brak FOIT).
   ============================================================ */

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('/wp-content/uploads/fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2-variations'),
         url('/wp-content/uploads/fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.woocommerce-products-header,
.woocommerce-loop-product__title,
.woocommerce-Price-amount,
.product_title,
.products .product,
.woocommerce ul.products li.product,
.woocommerce-breadcrumb,
.page-title {
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* ============================================================
   10c. PRZYCISK "DODAJ DO KOSZYKA" — BEZ RAMKI, KRESKA NA HOVER
   ============================================================
   Bez tła, bez ramki. Kreska wjeżdża z lewej na pełną szerokość
   buttona (po obrysie dawnej ramki) — sygnał "to klikalne",
   spójny z linkami (sekcja 8). Zastępuje sekcję 10.
   ============================================================ */
.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
    background: transparent !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}

.single_add_to_cart_button::after,
.woocommerce button.single_add_to_cart_button::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width 0.7s ease;
}
.single_add_to_cart_button:hover::after,
.woocommerce button.single_add_to_cart_button:hover::after {
    width: 100%;
}
/* Przebicie .button.alt z Mizu (CTA ma własną ramkę) */
.woocommerce .single_add_to_cart_button.button.alt,
.woocommerce button.single_add_to_cart_button.button.alt {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* ============================================================
   10d. POZOSTAŁE BUTTONY JAK LINK (bez ramki, kreska)
   ============================================================
   Klasy zamiast nth-child. Te klasy są na całym sklepie
   (koszyk, kasa, konto, wyszukiwarka) — testować ścieżkę zakupową.
   ============================================================ */
.btn-primary,
.btn-secondary,
.wp-block-search__button,
.woocommerce .btn-primary,
.woocommerce .btn-secondary {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}
.btn-primary::after,
.btn-secondary::after,
.wp-block-search__button::after,
.woocommerce .btn-primary::after,
.woocommerce .btn-secondary::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width 0.7s ease;
}
.btn-primary:hover::after,
.btn-secondary:hover::after,
.wp-block-search__button:hover::after,
.woocommerce .btn-primary:hover::after,
.woocommerce .btn-secondary:hover::after {
    width: 100%;
}

/* ============================================================
   10e. WOOCOMMERCE BLOCKS BUTTON (koszyk/kasa blokowa)
   ============================================================
   Łapie też "Kupuję i płacę" — docelowo wyłączyć osobną 10f.
   ============================================================ */
.wc-block-components-button {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}
.wc-block-components-button::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width 0.7s ease;
}
.wc-block-components-button:hover::after {
    width: 100%;
}
/* ============================================================
   10f. PRZYCISKI W PANELU KONTA (logowanie / rejestracja / reset)
   ============================================================
   WooCommerce my-account miesza klasy (woocommerce-Button /
   woocommerce-button / button) — wspólny mianownik = .button.
   Scope .woocommerce-account zawęża do strony konta, nie globalnie.
   Ten sam styl co 10c/d/e: bez ramki, kreska ::after na hover. */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account a.button {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}
.woocommerce-account .woocommerce button.button::after,
.woocommerce-account .woocommerce input.button::after,
.woocommerce-account .woocommerce a.button::after,
.woocommerce-account button.button::after,
.woocommerce-account input.button::after,
.woocommerce-account a.button::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width 0.7s ease;
}
.woocommerce-account .woocommerce button.button:hover::after,
.woocommerce-account .woocommerce input.button:hover::after,
.woocommerce-account .woocommerce a.button:hover::after,
.woocommerce-account button.button:hover::after,
.woocommerce-account input.button:hover::after,
.woocommerce-account a.button:hover::after {
    width: 100%;
}
/* ============================================================
   10g. PRZYCISK KOSZYKA W GRIDZIE — TYLKO "+", BEZ RAMKI
   ============================================================
   Tekst spana jest dynamiczny (JS: "Dodaj..."→"1 w koszyku").
   Chowamy go font-size:0, "+" dajemy przez ::after (JS go nie rusza).
   ============================================================ */
.wc-block-components-product-button__button.add_to_cart_button {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    padding: 0 !important;
    min-height: 0 !important;
    font-size: 0 !important;        /* chowa tekst spana */
    line-height: 1 !important;
}
.wc-block-components-product-button__button.add_to_cart_button::after {
    content: '+';
    font-size: 1.2rem !important;   /* rozmiar "+" — kręć tym */
    line-height: 1 !important;
    display: inline-block;
}
/* ============================================================
   12. MENU — ROZMIAR FONTU GŁÓWNYCH I ROZWIJANYCH POZYCJI
   ============================================================
   Menu desktop (Bootstrap header). Subtelne +1-2px do bazowego.

   Główne (MARKI, KOLEKCJA): top-menu > li > a
   Rozwijane (Brand1, Brand2...): .popover.sub-menu a.dropdown-item
   ============================================================ */

/* Główne pozycje menu (MARKI, KOLEKCJA) */
ul#desktop-top-menu > li > a,
ul.top-menu > li > a {
    font-size: 1.2em !important;
}

/* Pozycje rozwijane (w dropdownie pod MARKI) */
.popover.sub-menu ul.top-menu > li > a.dropdown-item {
    font-size: 1.2em !important;
}
/* ============================================================
   13. WIDOK KATEGORII — UKRYCIE PASKA NAD LISTĄ
   ============================================================
   Mizu: cały blok (licznik + sortowanie + filtr) siedzi
   w #js-product-list-top.products-selection. */
#js-product-list-top,
nav.breadcrumb{
    display: none !important;
}
/* ============================================================
   13B. WIDOK KATEGORII — MARGINESY I ODSTĘPY SIATKI
   ============================================================
   Zbliżenie do bloków 4-kolumnowych ze strony głównej.
   UWAGA: to NIE ten sam grid co główna — category to klasyczna
   pętla Woo z klasą Mizu `product-list-grid` (zero is-layout-grid).
   Stąd selektor `ul.products`, nie `columns-4 is-layout-grid`.

   Wartości miękkie — dobre na większości ekranów, nie sztywne.
   Stack pionowy (łamanie kolumn na małych ekranach) — osobno,
   pod realną strukturę `product-list-grid`, jeszcze nie wdrożone.
   ============================================================ */

/* Marginesy boczne kontenera: ~2,9% z każdej strony.
   width + auto margins (nie margin-left/right) — żeby nie zrobić
   overflow gdyby Mizu trzymał ul na sztywne 100%. */
.woocommerce ul.products {
    width: 96.2%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 8rem;
}

/* --- PODOBNE PRODUKTY (embla slider) ------------------------ */

/* Odstęp między slajdami — gap na flexowym kontenerze.
   Bezpieczny: JS embla liczy pozycje (transform), gap go nie tyka. */
.embla.mizu-product-slider .embla__container {
    gap: 2% !important;
}

/* Odstęp od brzegów — padding na viewport embla (nie __container).
   Brzeg karuzeli to nie margines, gap tam nie sięga.
   2,9% = zgranie z marginesami bocznymi kategorii (94,2%). */
.embla.mizu-product-slider {
    padding-left: 2.9% !important;
    padding-right: 2.9% !important;
}

/* Odstępy w siatce — tylko gdy to grid Mizu (product-list-grid).

   UWAGA: row-gap MUSI być w jednostce bezwzględnej.
   Procent na gridzie o wysokości auto to zależność cykliczna — przeglądarka
   liczy wysokość kontenera JAKBY ODSTĘPÓW NIE BYŁO, a potem rysuje je naprawdę.
   Zawartość wystaje poza własny kontener i wchodzi na stopkę. Im więcej
   wierszy, tym gorzej: nadmiar = (wiersze-1) x gap - padding-bottom.
   Desktop (4 wiersze) dawał ~25px nachodzenia na stopkę, mobile (2 kolumny =
   8 wierszy, wyższy kontener) wielokrotnie więcej.
   column-gap w % jest bezpieczny — procent od szerokości liczy się normalnie.
   Zdiagnozowane 30.07.2026 (pomiar na prod), szczegóły w dev_log. */
.woocommerce ul.products.product-list-grid {
    column-gap: 2% !important;
    row-gap: 5rem !important;       /* 80px — tyle realnie renderowało się z 4% */
}

/* Mobile: 2 kolumny zamiast 4, więc dwa razy więcej wierszy.
   80px między nimi zrobiłoby z listingu tasiemiec. */
@media (max-width: 767px) {
    .woocommerce ul.products.product-list-grid {
        row-gap: 3rem !important;   /* 48px */
    }
}
/* ============================================================
   14. WYSZUKIWARKA — SZKŁO JAK BELKA (0.3 + blur 10px)
   ============================================================
   Te same wartości co #header.sticky-top (sekcja 6) i dropdown
   (sekcja 4B) — spójne 0.3.
   ============================================================ */
.wp-block-search__button-outside {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
	max-width: 50% !important;
}

.wp-block-search__input {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    }
    /* Mobile — wyszukiwarka pełna szerokość (50% z desktopu za wąskie na telefonie) */
@media (max-width: 767px) {
    .wp-block-search__button-outside {
        max-width: 100% !important;
    }
}
    /* ============================================================
   15. STEAL-THE-LOOK — KONTENER PRODUKTÓW (obejście Mizu)
   ============================================================
   Dwa zagnieżdżone kontenery trzymają produkty po lewej:
   .embla.mizu-product-slider ma max-width z content-size,
   .wc-block-product-template to flex (dosuwa dzieci w lewo). */
.embla.mizu-product-slider {
    max-width: 100% !important;
}
.wc-block-product-template.is-flex-container {
    justify-content: center !important;
}/* ============================================================
   16. MOJE KONTO — OFFCANVAS, USUNIĘCIE POZIOMYCH LINII
   ============================================================
   Panel konta renderuje się w komponencie offcanvas Mizu
   (ten sam co menu/koszyk). Pozycje to <ul><li> z borderami
   poziomymi — zerujemy. */
.offcanvas-header,
.offcanvas-body,
.offcanvas-body ul,
.offcanvas-body li {
    border: none !important;
    box-shadow: none !important;
}
   /* ============================================================
   18. YITH WISHLIST — ZDJĘCIE PRODUKTU (proporcje)
   ============================================================ */
#yith-wcwl-form td.product-thumbnail img,
#yith-wcwl-form .product-thumbnail img {
    height: auto !important;
    width: 300px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Cena w wishliście — font jak reszta (sekcja 19, poprawiona kotwica) */
#yith-wcwl-form .woocommerce-Price-amount,
#yith-wcwl-form .woocommerce-Price-amount * {
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: inherit !important;
}/* Przycisk "Dodaj do listy życzeń" na stronie produktu */
.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-to-wishlist a,
.yith-wcwl-add-to-wishlist .yith-wcwl-add-button {
    font-family: inherit !important;
    font-size: 1rem !important;
}/* Wishlista — cały font do dziedziczenia po body (sekcja 9) */
#yith-wcwl-form,
#yith-wcwl-form * {
    font-family: inherit !important;
    font-size: 0.8rem !important;
    line-height: inherit !important;
}/* Cena w wishliście — komórka + zawartość */
#yith-wcwl-form .product-price,
#yith-wcwl-form .product-price *,
#yith-wcwl-form .woocommerce-Price-amount,
#yith-wcwl-form .woocommerce-Price-amount * {
    font-family: inherit !important;
    font-size: 0.8rem !important;
    line-height: inherit !important;
    
}
/* ============================================================
   PL — opisy pozycji menu "Moje konto".
   Mizu trzyma je w CSS jako :after { content } w main.css,
   więc tłumaczenia ich nie łapią. Nadpisujemy na polski.
   Działa i w panelu offcanvas, i na pełnej stronie konta.
   ============================================================ */

#offcanvas-user .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--orders:after,
.woocommerce-MyAccount-navigation-link--orders:after {
    content: "Przeglądaj swoje wcześniejsze zamówienia." !important;
}

#offcanvas-user .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--downloads:after,
.woocommerce-MyAccount-navigation-link--downloads:after {
    content: "Przeglądaj i pobieraj zakupione produkty cyfrowe." !important;
}

#offcanvas-user .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--edit-address:after,
.woocommerce-MyAccount-navigation-link--edit-address:after {
    content: "Dodawaj i edytuj adresy dostawy i rozliczeniowe, aby zaoszczędzić czas przy zakupach." !important;
}

#offcanvas-user .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--edit-account:after,
.woocommerce-MyAccount-navigation-link--edit-account:after {
    content: "Edytuj wszystkie dane konta (imię, e-mail i hasło)." !important;
}
/* ============================================================
   10h. PRZYCISKI W PANELU BOCZNYM KONTA (#offcanvas-user)
   ============================================================
   Offcanvas "Moje konto" jest komponentem GLOBALNYM, renderowanym
   POZA .woocommerce-account (siedzi w headerze na kazdej stronie),
   wiec sekcja 10f go nie lapie. Scope przez ID panelu — ID bije
   klasy Mizu, dodatkowo !important, bo style offcanvas sa agresywne.

   Reguly 1:1 z 10c/10d/10e/10f. SWIADOMIE nie ustawiamy tu font
   ani padding: dzieki temu ten sam przycisk wyglada identycznie
   w offcanvas i na pelnej stronie /moje-konto/.

   ZWERYFIKOWANE na dev 29.07.2026 (computed styles: bg transparent,
   color #000, border 0, radius 0, ::after 1px / 0.7s).
   ============================================================ */
#offcanvas-user .button,
#offcanvas-user button.button,
#offcanvas-user input.button,
#offcanvas-user a.button {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}
#offcanvas-user .button::after,
#offcanvas-user button.button::after,
#offcanvas-user input.button::after,
#offcanvas-user a.button::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width 0.7s ease;
}
#offcanvas-user .button:hover::after,
#offcanvas-user button.button:hover::after,
#offcanvas-user input.button:hover::after,
#offcanvas-user a.button:hover::after {
    width: 100% !important;
}

/* ============================================================
   20. ANIMACJA WEJŚCIA — WYRÓWNANIE BRAKUJĄCYCH SZABLONÓW
   ============================================================
   Mizu wpisuje klasę .fadeInUp-animation na sztywno w szablony i nie
   dał jej wszędzie. Audyt 30.07.2026, 14 typów stron:

     MAJĄ    strona główna, Żurnal, wszystkie strony CMS (regulaminy,
             dane teleadresowe, zwroty, reklamacje, sklep stacjonarny),
             sklep i kategorie (klasa siedzi na ul.products, nie na #main),
             karta produktu (tylko kolumna z opisem, nie galeria)
     NIE MAJĄ  pojedynczy wpis, koszyk, moje konto

   POJEDYNCZY WPIS MA INNY SZKIELET niż reszta sklepu — klasyczny
   underscores: #page > #content > #primary > main#main.site-main.
   Reszta idzie po Mizu: #wrapper > #content-wrapper > section#main.
   PUŁAPKA: #main na wpisie to main.site-main, a na innych stronach
   section#main. Ten sam ID, inny element i inna rola — NIE celować w #main.

   DLACZEGO WŁASNE KEYFRAMES, a nie fadeInUp rodzica:
   Mizu ma tam translateY(10%), a procent liczy się od wysokości
   ANIMOWANEGO ELEMENTU. Na wpisie „bretońskie paski" #primary ma
   9941px, czyli start animacji to skok o 994px — dwie trzecie ekranu,
   i rośnie z długością tekstu. Ta sama pułapka co w row-gap (sekcja 13B).
   Jednostka vh wiąże efekt z ekranem, nie z długością wpisu.
   14vh ≈ 215px, tyle ile realnie daje siatka produktów. Wytestowane przez JK.

   KOSZYKA CELOWO TU NIE MA. W #main koszyka siedzi
   .wc-block-components-notices__snackbar z position:fixed, a transform
   na przodku zmienia mu układ odniesienia — przez sekundę animacji
   toast („produkt usunięty") wyskoczyłby w złym miejscu. Zysk kosmetyczny,
   ryzyko realne. Szczegóły w dev_log.
   ============================================================ */
@keyframes zpp-fadeInUp {
    from { opacity: 0; transform: translateY(14vh); }
    to   { opacity: 1; transform: none; }
}

.single-post #primary,
.woocommerce-account #content-wrapper {
    animation: 1s zpp-fadeInUp;
}

/* ============================================================
   21. ŻURNAL (/notatnik/) — SIATKA ZAJAWEK WPISÓW
   ============================================================
   Blok: core „Ostatnie wpisy" (wp:latest-posts) — NIE Query Loop.
   Ustawienia z bazy: 9 wpisów, układ siatka (domyślnie 3 kolumny),
   obrazek wyróżniający (large), treść = wyimek 10 słów, alignwide.

   Blok nie ma w panelu ŻADNYCH ustawień odstępów ani typografii
   — wszystko poniżej musi iść CSS-em.

   DLACZEGO PRZEPINAMY NA GRID:
   Core renderuje „siatkę" na flexboksie z jednym marginesem:
       .wp-block-latest-posts.is-grid li {
           margin: 0 1.25em 1.25em 0;
           width: calc(33.33333% - .83333em);
       }
   Ten sam margines robi odstęp kolumny i odstęp wiersza — nie da
   się ich rozjechać. Przepinamy <ul> na CSS grid, wtedy row-gap
   i column-gap żyją osobno.

   row-gap w REM, nie w %. Ta sama pułapka co w sekcji 13B:
   procent na gridzie o wysokości auto to zależność cykliczna,
   zawartość wchodzi na stopkę. 5rem = zgranie z siatką produktów.
   ============================================================ */

/* --- 21a. SIATKA — 3 kolumny, wiersze oddychają ------------- */

.wp-block-latest-posts__list.is-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2%;     /* % bezpieczny — liczy się od szerokości */
    row-gap: 6rem;      /* <<< GŁÓWNA GAŁKA: odstęp między wierszami */
    padding: 0;
    margin: 0;
}

/* Zdejmujemy flexowe szerokości i marginesy core'a — inaczej grid
   dostaje elementy węższe o wartość marginesu i siatka się rozjeżdża. */
.wp-block-latest-posts__list.is-grid > li {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* CELOWO BEZ STOPNIA POŚREDNIEGO (2 kolumny).
   Trójka trzyma się aż do telefonu — także na tablecie, gdzie menu
   jest już zwinięte do hamburgera. Decyzja JK 04.08.2026: siatka 3x3
   wygląda tam dobrze i nie ma powodu jej łamać tylko dlatego, że
   zmienił się header. Przy 768px kolumna ma ~240px — zdjęcie nadal
   czytelne, tytuł mieści się w dwóch linijkach.

   Telefon schodzi od razu na jedną kolumnę. Świadoma różnica wobec
   siatki produktów (tam zostają 2): produkt obroni się miniaturką,
   zajawka wpisu w połowie ekranu telefonu jest nieczytelna. */
@media (max-width: 767px) {
    .wp-block-latest-posts__list.is-grid {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }
}


/* --- 21b. ZDJĘCIE ------------------------------------------- */

/* JEDYNA GAŁKA odstępu zdjęcie → tytuł. Trzyma go DIV, nie obrazek.

   Mizu wiesza na <img> bootstrapowe `mb-3` (1rem, z !important — stąd
   !important po naszej stronie). Ten margines jest WEWNĄTRZ diva, więc
   div jest o 1rem wyższy od zdjęcia. Dopóki nic tam nie rysowaliśmy,
   było to niewidoczne — ale welon z 21f to ::after na tym divie i
   pokryłby ten dodatkowy centymetr, dając ciemny pasek pod fotografią.
   Dlatego marginesu obrazka nie zostawiamy: zerujemy go i całe światło
   wystawiamy na divie. Suma wizualna bez zmian (1rem + 1.1rem ≈ 2rem). */
.wp-block-latest-posts__list .wp-block-latest-posts__featured-image {
    margin: 0 0 2rem 0;
}
/* border-radius: 0 — Mizu wiesza na obrazku bootstrapową klasę
   `rounded` (0.375rem). Ostre rogi, spójnie z resztą sklepu
   (ta sama decyzja co przy wyszukiwarce, sekcja 14). */
.wp-block-latest-posts__list .wp-block-latest-posts__featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 !important;
    margin-bottom: 0 !important;   /* kasuje bootstrapowe mb-3 */
}

/* Zdjęcie NIE jest owinięte w link — Mizu wycina <a> z obrazka,
   a klikalny robi się cały kafel przez .stretched-link na tytule
   (patrz 21c). Sekcja 8 (podkreślenie linków) tu nie sięga:
   /notatnik/ renderuje się POZA .entry-content. Sprawdzone w DOM
   04.08.2026 — nie dokładać tu reguł „na wszelki wypadek". */


/* --- 21c. TYTUŁ WPISU — większy ----------------------------- */

/* !!! MIZU PRZEPUSZCZA TEN BLOK PRZEZ WŁASNY FILTR i podmienia klasy
   core'a na bootstrapowe. Klasy `wp-block-latest-posts__post-title`
   NA STRONIE NIE MA — celowanie w nią nigdy nie zadziała.

   Co jest naprawdę (odczyt z DOM, 04.08.2026):

     <ul class="wp-block-latest-posts__list bs-list-group list-group
                is-grid columns-3 alignwide wp-block-latest-posts">
       <li class="list-group-item list-group-item-action">
         <div class="wp-block-latest-posts__featured-image">
           <img class="... rounded mb-3">            <-- mb-3 od Mizu
         </div>
         <a class="stretched-link text-decoration-none">TYTUŁ</a>
         <div class="wp-block-latest-posts__post-excerpt mb-0">
           zajawka … <a class="stretched-link …">Dowiedz się więcej</a>
         </div>
       </li>

   TYTUŁ I „DOWIEDZ SIĘ WIĘCEJ" MAJĄ IDENTYCZNE KLASY — rozróżnia je
   wyłącznie miejsce w drzewie. Tytuł jest bezpośrednim dzieckiem <li>,
   stąd `> li >`. Nie skracać do `.stretched-link`, bo złapie też link,
   który w 21e gasimy.

   `stretched-link` to bootstrapowy trik: ::after rozciąga się na całe
   spozycjonowane <li> (`list-group-item` ma position: relative), więc
   klikalny jest cały kafel, nie samo słowo. Dlatego display: block jest
   tu bezpieczny — obszar klikania nie zależy od pudełka linku. */
.wp-block-latest-posts__list > li > a.stretched-link {
    display: block;
    font-size: 1.3rem;      /* gałka: wielkość tytułu */
    font-weight: 400;
    line-height: 1.25;
}


/* --- 21d. ZAJAWKA — mniejsza, pochyła ----------------------- */

.wp-block-latest-posts__list .wp-block-latest-posts__post-excerpt {
    margin: 0.55rem 0 0 0;
    font-size: 0.82rem;     /* gałka: wielkość zajawki */
    font-style: italic;
    line-height: 1.55;
    opacity: 0.7;           /* zajawka schodzi o krok za tytuł */
}


/* --- 21e. KONIEC ZAJAWKI — zostaje „…", znika „Dowiedz się więcej"

   Jak to działa w core (wp-includes/blocks/latest-posts.php): gdy
   wyimek został przycięty, WordPress podmienia końcówkę „ [&hellip;]"
   na „… <a …>Read more</a>". Wielokropek jest więc OSOBNYM tekstem
   PRZED linkiem, nie częścią linku — wystarczy zgasić sam link, a „…"
   zostaje na swoim miejscu. Bez ::after, bez dotykania treści wpisów.

   Mizu podmienia klasę core'a `wp-block-latest-posts__read-more` na
   `stretched-link text-decoration-none` i tłumaczy napis jako „Dowiedz
   się więcej" (core po polsku dałby „Czytaj dalej" — po tym poznać,
   że to nie jest surowy blok). Dlatego celujemy w link WEWNĄTRZ
   akapitu zajawki, a nie w klasę core'a.

   Wpisy z ręcznie napisanym wyimkiem w ogóle tego linku nie dostają
   — ich zajawka kończy się tak, jak ją napisaliście.
   ------------------------------------------------------------ */

.wp-block-latest-posts__post-excerpt a.stretched-link {
    display: none !important;
}


/* --- 21f. HOVER — CIEMNY WELON, JAK NA GŁÓWNEJ --------------
   ============================================================
   Stan zastany (audyt 04.08.2026): kafle Żurnala NIE MIAŁY ŻADNEGO
   hovera. Klasa `list-group-item-action`, którą Mizu wiesza na <li>,
   sugeruje bootstrapowy efekt, ale reguły do niej nie ma w ładowanym
   CSS — jest martwa. Sekcja 8 też tu nie sięga (strona poza
   .entry-content, plus `text-decoration-none` od Mizu). Jedyną
   informacją zwrotną był kursor. To była jedyna klikalna siatka
   w sklepie bez reakcji na najechanie.

   WYBÓR: welon z sekcji 1 (`hover-overlay`, główna), nie brightness
   z sekcji 2 (kategoria). Decyzja JK — wpis ma się zachowywać jak
   kafel na stronie głównej, nie jak produkt na listingu.
   Uwaga na przyszłość: to są DWA RÓŻNE języki hoveru w sklepie
   i tak zostaje świadomie.

   Klasy `hover-overlay` nie da się tu dopiąć — Mizu renderuje <li>
   sam i blok nie ma pola na klasę pozycji. Odtwarzamy efekt 1:1
   (te same wartości i czas co w sekcji 1), więc PRZY ZMIANIE TAMTEJ
   ZMIENIĆ I TĘ — inaczej główna i Żurnal się rozjadą.

   Welon siedzi na DIVIE zdjęcia, nie na <li>: na <li> pokryłby też
   tytuł i zajawkę, czyli przyciemniałby tekst. `position: relative`
   na tym divie jest bezpieczne dla `stretched-link` — link jest
   RODZEŃSTWEM diva, nie jego dzieckiem, więc jego ::after nadal
   kotwiczy się w <li> i cały kafel zostaje klikalny.
   ============================================================ */

.wp-block-latest-posts__list .wp-block-latest-posts__featured-image {
    position: relative;
}
.wp-block-latest-posts__list .wp-block-latest-posts__featured-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}
/* Wyzwalaczem jest CAŁY kafel, nie samo zdjęcie — bo klikalny jest
   cały kafel. Hover tylko nad fotografią byłby niespójny z tym,
   co robi kliknięcie. */
.wp-block-latest-posts__list > li:hover .wp-block-latest-posts__featured-image::after {
    background: rgba(0, 0, 0, 0.3);
}

/* Tytuł CELOWO bez własnego efektu (decyzja JK). Cały kafel jest
   jednym linkiem — osobna reakcja tytułu dublowałaby sygnał.
   Nie dopisywać tytułu do whitelisty sekcji 8. */


/* --- 21g. OPCJONALNE — odkomentować po decyzji --------------- */

/* RÓWNE PROPORCJE ZDJĘĆ.
   Przy zdjęciach o różnej wysokości tytuły w jednym wierszu siadają
   na różnych poziomach i siatka wygląda na krzywą. To przycina
   wszystkie kafle do jednych proporcji (3/4 jak przy produktach).
   Dziś niepotrzebne — zdjęcia wpisów i tak są w 3/4 (np. 1200x1600).
   Siatka bezpieczeństwa na wypadek zdjęcia w poziomie.*/

.wp-block-latest-posts__list .wp-block-latest-posts__featured-image img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
/* ============================================================
   21h. ŻURNAL — GÓRA STRONY JAK NA KATEGORII (15.08.2026)
   ============================================================
   Problem: tytuł „żurnal" i siatka wpisów siedziały niżej i bliżej
   lewej niż tytuł/produkty na stronach kategorii i marek.
 
   Pomiar na dev (Chrome, 15.08.2026, viewport 1201px, header 74px):
 
                       KATEGORIA        ŻURNAL (przed)   ŻURNAL (po)
   tytuł top           106 (32 pod hdr) 154 (80 pod hdr) 106  ✓
   tytuł left          24               16               24   ✓
   pierwsze zdjęcie    193              243              193  ✓
 
   Skąd różnice:
   - /notatnik/ renderuje się w Mizu jako strona CMS: wrapper
     .content-margin.page-cms dostaje margin-top 80px; kategoria
     dostaje section z padding-top 32px. Stąd 48px różnicy.
   - wrapper ma padding-left 16px, a header kategorii margin-left
     24px. Tytuł dosuwamy o 8px; ZDJĘCIA ZOSTAJĄ na 16px —
     decyzja JK 15.08 (boczne marginesy siatki bez zmian).
   - do pełnej wysokości zdjęć składa się jeszcze: h1 margin-bottom
     (30px) + padding-top ul (28px, bootstrap od Mizu). Razem:
     74 + 32 + 29 (h1) + 30 + 28 = 193. Co do piksela.
 
   !important na margin-top i margin-bottom NIE jest dekoracją:
   bez niego reguły przegrywają kaskadę (zmierzone — margin-left
   działa bez, tamte dwa nie; ta sama zagadka co inne walki z Mizu).
 
   Scope przez page-id-1447 = /notatnik/ NA TYM środowisku.
   Inne strony CMS (page-cms) zostają nietknięte. Gdyby strona
   była kiedyś zakładana od nowa (nowe ID) — zaktualizować.
   ============================================================ */
 
/* Góra: 80px → 32px, jak padding-top sekcji na kategorii. */
body.page-id-1447 .content-margin.page-cms {
    margin-top: 2rem !important;      /* 32px */
}
 
/* Tytuł: dosunięcie do 24px od lewej (16px wrapper + 8px)
   i odstęp pod tytułem zgrany tak, by zdjęcia startowały na 193px.
   1.875rem = 30px; razem z padding-top ul (28px) daje pion 1:1
   z kategorią. */
body.page-id-1447 h1.cms-title {
    margin-left: 0.5rem;              /* 16 + 8 = 24px, jak kategoria */
    margin-bottom: 1.875rem !important;
}
 /* ============================================================
   23. MENU DESKTOP — DROPDOWN MAREK: ŚCIŚNIĘCIE + SCROLL AWARYJNY
   ============================================================
   Problem (16.08.2026): dropdown MARKI (20 pozycji) miał 978px
   wysokości — ostatnie marki poza ekranem na każdym laptopie.
   Winowajca: main.css Mizu daje linkom dropdownu
   `.top-menu a[data-depth="1"] { margin: 1rem 1.5rem }`
   → pozycja co 49px (16.8 line-height z sekcji 4B + 2x16px
   marginesu). Dropdown nie ma max-height ani własnego scrolla,
   a przy sticky headerze (sekcja 6) nie da się go „doscrollować"
   stroną — koniec listy jest po prostu niedosiężny.
 
   Po zmianie: pozycja co ~34px, lista 20 marek ≈ 690px.
   Wartość 0.55rem wybrana przez JK suwakiem na żywo (16.08.2026)
   — „optymalnie": gęściej niż było, ale lista dalej oddycha.
   Na oknach niższych niż ~780px wchodzi scroll awaryjny (niżej)
   — świadomy kompromis, sprawdzony przy wyborze wartości.
 
   Wszystko w @media min-1200px — poniżej wchodzi hamburger
   (d-xl-none) i te selektory nic nie łapią. Spójne z sekcją 4B,
   która już celuje w `.popover.sub-menu ul.top-menu > li >
   a.dropdown-item` (line-height 1, padding 0).
 
   Marginesy BOCZNE (1.5rem) nieruszone — tylko pion.
   Reguła łapie też dropdown KOLEKCJI i ewentualne głębsze
   poziomy (każdy poziom to własny ul.top-menu > li > a) —
   celowo, spójna gęstość w całym menu.
   ============================================================ */
 
@media (min-width: 1200px) {
 
    /* GŁÓWNA GAŁKA: odstęp pionowy pozycji dropdownu.
       0.55rem = pozycja co ~34px (było: 1rem = co 49px).
       Wartość wybrana przez JK na żywo, 16.08.2026. */
    nav.header-nav .popover.sub-menu ul.top-menu > li > a.dropdown-item {
        margin-top: 0.55rem;
        margin-bottom: 0.55rem;
    }
 
    /* BEZPIECZNIK na przyszłość: gdy marek przybędzie albo okno
       będzie naprawdę niskie, dropdown dostaje własny scroll
       zamiast uciekać pod dolną krawędź. Przy liście mieszczącej
       się na ekranie scroll się NIE pojawia (max-height nieosiągnięty).
       6rem ≈ wysokość headera (dropdown zaczyna się na ~76px) + zapas.
       Scope przez nav.header-nav — mobilne submenu (te same klasy
       .popover.sub-menu!) żyje w innym drzewie i tego nie dostanie. */
    nav.header-nav .popover.sub-menu {
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
    }
}
 
/* ============================================================
   24. KARTA PRODUKTU — NAGŁÓWEK SEKCJI UP-SELL (18.08.2026)
   ============================================================
   Nagłówek „NAJLEPIEJ RAZEM" (tekst podmieniany filtrem PHP
   w functions.php — patrz tam) schodzi z rangi tytułu strony
   do ETYKIETY SEKCJI — dokładnie jak nagłówki stopki
   (GODZINY OTWARCIA / KONTAKT / INFORMACJE: 1.1rem, waga 500,
   preset m-font-size). Wybór JK suwakiem 18.08: 1rem (jak lista
   życzeń) był za lekki. Hierarchia sklepu po tej zmianie:
   tytuły stron 1.6rem → etykiety sekcji 1.1rem/500 → drobne
   akcje 1rem/400.
   Uppercase zostaje z Mizu — tekst i tak jest wielkimi.
   Wyrównanie do prawej zostaje — spójne z nagłówkami sekcji
   na stronie głównej (PRODUKTY MIESIĄCA itd.).

   Strzałka przy nagłówku to ::after z SVG motywu (background,
   20.8px) — gasimy cały pseudoelement.

   Bez !important: selektor o tej samej specyficzności co reguła
   Mizu, child theme ładuje się później — wygrywa kolejnością
   (zweryfikowane na dev 18.08). Gdyby po cache'ach nie łapało,
   dołożyć !important do obu deklaracji.
   ============================================================ */

/*.up-sells h2 {
    font-size: 1.1rem;     
    font-weight: 500;*/
    /* jak nagłówki stopki (GODZINY OTWARCIA) */

.up-sells h2::after {
    display: none;        /* strzałka Mizu precz */
}
/* ============================================================
   25. MENU MOBILNE — PEŁNA WYSOKOŚĆ, CZYTELNE POZIOMY (18.08.2026)
   ============================================================
   Mizu renderuje bootstrapowy #offcanvas-navbar WEWNĄTRZ #header.
   Backdrop-filter z sekcji 6 sprawia, że zagnieżdżone position:fixed
   liczy top/bottom względem headera (56px), nie całego viewportu.
   Białe tło panelu kończyło się więc po 56px, a lista wypływała
   na zdjęcie strony. Body jest przy otwartym offcanvas zablokowane,
   więc długa lista nie miała też poprawnego kontenera do scrolla.

   Panel dostaje jawne 100dvh. Sama belka zamykania pozostaje
   przezroczysta, żeby zachować widoczne logo i szkło sticky headera;
   treść menu oraz dolny login dostają ten sam glassmorphism co
   desktopowy dropdown: biel 0.3 + blur 10px. #_mobile_top_menu jest
   jedynym przewijanym obszarem i min-height:0 pozwala mu rzeczywiście
   skurczyć się we flexie.

   MARKI/KOLEKCJA mają dodatkowy .dropdown-item-row ze strzałką,
   więc omijała je ogólna reguła `ul.top-menu > li > a` z sekcji 12.
   Celujemy w ich rzeczywistą strukturę i wyrównujemy do 1.2em,
   czyli rozmiaru ŻURNAL/NOWOŚCI. Desktop pozostaje nietknięty.
   ============================================================ */

@media (max-width: 1199px) {
    #offcanvas-navbar {
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        background-color: transparent;
        border-right: 0 !important;
    }

    /* Przezroczysta jest tylko pełna belka headera (zmierzone: 56px).
       Zerujemy fabryczny margin:1rem Mizu — wcześniej kolejny biały
       blok zaczynał się kilka pikseli przed dolną krawędzią bluru. */
    #offcanvas-navbar > .top-menu-row {
        flex: 0 0 56px;
        min-height: 56px;
        margin: 0;
        padding: 0 1rem;
        align-items: center;
        background-color: transparent;
    }

    /* Reszta panelu: ten sam glassmorphism co desktopowy dropdown
       i sticky header (sekcje 4B i 6). */
    #offcanvas-navbar > #_mobile_top_menu,
    #offcanvas-navbar > .js-top-menu-bottom {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #offcanvas-navbar > #_mobile_top_menu {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    #offcanvas-navbar > .js-top-menu-bottom {
        flex: 0 0 auto;
    }

    /* Podmenu korzysta z już rozmytej powierzchni rodzica.
       Bez drugiego białego prostokąta i bez podwójnego bluru. */
    #offcanvas-navbar .popover.sub-menu {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Krzyżyk zastępuje hamburger — logo i koszyk zostają widoczne. */
    #header:has(#offcanvas-navbar.show) #menu-icon {
        visibility: hidden;
    }

    /* MARKI i KOLEKCJA = ten sam rozmiar co ŻURNAL i NOWOŚCI. */
    #mobile-top-menu > li > .dropdown-item-row > a.dropdown-item {
        font-size: 1.2em !important;
    }
}
/* mobile: większe pola dotyku hamburgera i lupki (ikony wyglądają tak samo) */
#header .nav-toggler,
#header .search-trigger {
    padding: 12px;
    margin: -12px;
}