/* Przyklejony nagłówek motywu (Blocksy) na telefonie i tablecie.
   Po przewinięciu zostawał biały pasek z samymi ikonami (28.10.2026, zrzut od
   Mariusza). Teraz: ciemne szkło, złota linia, logo Kozzak pośrodku, białe ikony.
   Logo wstawia site-header.js; pokazujemy je tylko w stanie przyklejonym
   (Blocksy zmienia data-sticky="fade" na "yes:fade"), żeby u góry strony nie
   dublowało dużego logo.
   Ikony (hamburger, szukaj, koszyk) mają w customizerze Blocksy własne kolory
   dla stanu przyklejonego (czarne / szare, reguła na samym elemencie, np.
   `[data-sticky*="yes"] [data-id="cart"] .ct-cart-item`), więc zmienne ustawione
   na wierszu nie wystarczają — kolor trzeba wymusić na elementach z !important. */
@media (max-width: 999.98px) {
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] {
        background: rgba(10, 10, 10, 0.94) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 1px 0 rgba(191, 155, 81, 0.9), 0 10px 30px rgba(0, 0, 0, 0.35);
        --theme-icon-color: #ffffff;
        --theme-icon-hover-color: #bf9b51;
        --theme-text-color: #ffffff;
        --theme-link-initial-color: #ffffff;
        --theme-link-hover-color: #bf9b51;
        color: #ffffff;
    }

    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, rgba(164, 138, 78, 0), #d4b96a 50%, rgba(164, 138, 78, 0));
        pointer-events: none;
    }

    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-container {
        position: relative;
    }

    /* Białe ikony: hamburger, szukaj, konto, koszyk — nadpisanie kolorów
       customizera ustawionych bezpośrednio na tych elementach. */
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-header-trigger,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-header-search,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-cart-item,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-account-item,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-toggle {
        --theme-icon-color: #ffffff !important;
        --theme-icon-hover-color: #bf9b51 !important;
        --theme-text-color: #ffffff !important;
        --theme-link-initial-color: #ffffff !important;
        --theme-link-hover-color: #bf9b51 !important;
        --theme-button-text-initial-color: #ffffff !important;
        --theme-button-text-hover-color: #bf9b51 !important;
        color: #ffffff !important;
        background: transparent !important;
        opacity: 1 !important;
    }

    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-header-trigger:hover,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-header-search:hover,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-cart-item:hover,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-account-item:hover,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-toggle:hover {
        color: #bf9b51 !important;
    }

    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-icon,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-icon path,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-icon rect,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-icon circle,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-icon polygon,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] svg {
        fill: currentColor !important;
        color: inherit;
        opacity: 1 !important;
    }

    /* Hamburger: 3 kreski wyraźnie większe niż domyślne 18 px. */
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-header-trigger .ct-icon {
        width: 26px !important;
        height: 20px !important;
    }

    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-header-search .ct-icon,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-account-item .ct-icon,
    .ct-sticky-container [data-sticky^="yes"] [data-row="bottom"] .ct-cart-item .ct-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .kzk-sticky-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
        line-height: 0;
        z-index: 2;
    }

    .kzk-sticky-logo img {
        display: block;
        height: 48px;
        width: auto;
        max-width: 56vw;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
    }

    [data-sticky^="yes"] .kzk-sticky-logo {
        display: block;
        animation: kzkStickyLogo 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

/* Tablet (690–999 px, próg Blocksy): pasek ma 68 px wysokości i dużo miejsca
   w poziomie, więc logo może być większe niż na telefonie. */
@media (min-width: 690px) and (max-width: 999.98px) {
    .kzk-sticky-logo img {
        height: 54px;
        max-width: 40vw;
    }
}

@keyframes kzkStickyLogo {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
    [data-sticky^="yes"] .kzk-sticky-logo {
        animation: none;
    }
}