/*
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.
   ============================================================ */
.entry-content a,
.cover-link a,
.cover-link,
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,
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 {
    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 {
    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 {
    width: 100%;
}
/* ============================================================
   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;
}/* ============================================================
   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;
}