/* PC-Wizard.pl — spójny system przycisków CTA na podstronach
   Ładowany jako ostatni arkusz, aby nadpisać lokalne style szablonów. */

:root {
    --pcw-cta-accent: #5bc0de;
    --pcw-cta-accent-hover: #3aa9ca;
    --pcw-cta-dark: rgba(7, 20, 26, 0.90);
    --pcw-cta-text-dark: #07141a;
    --pcw-cta-radius: 10px;
}

/* Wszystkie główne przyciski na wskazanych podstronach. */
.hero-banner a.btn,
.hero-banner a.btn-remote,
.hero-banner a.btn-light-remote,
.contact-cta-modern a.btn-light,
.cta-section-remote a.btn-light-remote,
.cta-section-it a.btn-remote,
.cta-section-webmaster a.btn-remote {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    min-width: 190px !important;
    padding: 14px 26px !important;
    margin: 8px 6px !important;
    border: 2px solid var(--pcw-cta-accent) !important;
    border-radius: var(--pcw-cta-radius) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--pcw-cta-text-dark) !important;
    background: var(--pcw-cta-accent) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .24) !important;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease !important;
}

/* Drugi przycisk w HERO strony napraw laptopów — wariant ciemny. */
.hero-banner a.btn-light-remote {
    color: #fff !important;
    background: var(--pcw-cta-dark) !important;
}

.hero-banner a.btn:hover,
.hero-banner a.btn:focus-visible,
.hero-banner a.btn-remote:hover,
.hero-banner a.btn-remote:focus-visible,
.hero-banner a.btn-light-remote:hover,
.hero-banner a.btn-light-remote:focus-visible,
.contact-cta-modern a.btn-light:hover,
.contact-cta-modern a.btn-light:focus-visible,
.cta-section-remote a.btn-light-remote:hover,
.cta-section-remote a.btn-light-remote:focus-visible,
.cta-section-it a.btn-remote:hover,
.cta-section-it a.btn-remote:focus-visible,
.cta-section-webmaster a.btn-remote:hover,
.cta-section-webmaster a.btn-remote:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32) !important;
    background: var(--pcw-cta-accent-hover) !important;
    border-color: var(--pcw-cta-accent-hover) !important;
    color: var(--pcw-cta-text-dark) !important;
}

.hero-banner a.btn-light-remote:hover,
.hero-banner a.btn-light-remote:focus-visible {
    color: #fff !important;
    background: rgba(15, 38, 49, .98) !important;
    border-color: var(--pcw-cta-accent) !important;
}

/* Zachowanie dwóch przycisków w HERO laptopów. */
.hero-banner .hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
}

.hero-banner .hero-buttons p {
    display: contents !important;
}

/* CTA końcowe — spójne odstępy. */
.contact-cta-modern,
.cta-section-remote,
.cta-section-it,
.cta-section-webmaster {
    text-align: center !important;
}

.contact-cta-modern h2,
.cta-section-remote h2,
.cta-section-it h2,
.cta-section-webmaster h2 {
    margin-bottom: 18px !important;
}

@media (max-width: 786px) {
    .hero-banner .hero-buttons {
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-banner a.btn,
    .hero-banner a.btn-remote,
    .hero-banner a.btn-light-remote,
    .contact-cta-modern a.btn-light,
    .cta-section-remote a.btn-light-remote,
    .cta-section-it a.btn-remote,
    .cta-section-webmaster a.btn-remote {
        width: calc(100% - 32px) !important;
        max-width: 410px !important;
        min-height: 58px !important;
        margin: 6px auto !important;
        padding: 15px 18px !important;
        font-size: 16px !important;
    }
}

/* ==========================================================
   v3 — SERWIS LAPTOPÓW + WYRAŹNY, SPÓJNY HOVER CTA
   ========================================================== */

/* Podstrona /serwis-laptopow/ korzysta z .hero-modern, nie .hero-banner. */
.hero-modern .hero-buttons a,
.hero-modern a.btn-primary,
.hero-modern a.btn-outline {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    min-width: 190px !important;
    padding: 14px 26px !important;
    margin: 8px 6px !important;
    border: 2px solid var(--pcw-cta-accent) !important;
    border-radius: var(--pcw-cta-radius) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--pcw-cta-text-dark) !important;
    background: var(--pcw-cta-accent) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .24) !important;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Drugi przycisk HERO — wariant ciemny/obrysowany. */
.hero-modern .hero-buttons a:nth-child(2),
.hero-modern a.btn-outline {
    color: #fff !important;
    background: var(--pcw-cta-dark) !important;
    border-color: var(--pcw-cta-accent) !important;
}

/* Jasne przyciski: po najechaniu zmiana na ciemne. */
.hero-modern .hero-buttons a:first-child:hover,
.hero-modern .hero-buttons a:first-child:focus-visible,
.hero-modern a.btn-primary:hover,
.hero-modern a.btn-primary:focus-visible,
.hero-banner a.btn:hover,
.hero-banner a.btn:focus-visible,
.hero-banner a.btn-remote:hover,
.hero-banner a.btn-remote:focus-visible,
.contact-cta-modern a.btn-light:hover,
.contact-cta-modern a.btn-light:focus-visible,
.cta-section-remote a.btn-light-remote:hover,
.cta-section-remote a.btn-light-remote:focus-visible,
.cta-section-it a.btn-remote:hover,
.cta-section-it a.btn-remote:focus-visible,
.cta-section-webmaster a.btn-remote:hover,
.cta-section-webmaster a.btn-remote:focus-visible {
    color: #fff !important;
    background: var(--pcw-cta-dark) !important;
    border-color: var(--pcw-cta-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34), 0 0 0 3px rgba(91, 192, 222, .14) !important;
}

/* Ciemne/obrysowane przyciski: po najechaniu zmiana na jasnoniebieskie. */
.hero-modern .hero-buttons a:nth-child(2):hover,
.hero-modern .hero-buttons a:nth-child(2):focus-visible,
.hero-modern a.btn-outline:hover,
.hero-modern a.btn-outline:focus-visible,
.hero-banner a.btn-light-remote:hover,
.hero-banner a.btn-light-remote:focus-visible {
    color: var(--pcw-cta-text-dark) !important;
    background: var(--pcw-cta-accent) !important;
    border-color: var(--pcw-cta-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34), 0 0 0 3px rgba(91, 192, 222, .14) !important;
}

/* Widoczny fokus klawiatury. */
.hero-modern .hero-buttons a:focus-visible,
.hero-banner a:focus-visible,
.contact-cta-modern a:focus-visible,
.cta-section-remote a:focus-visible,
.cta-section-it a:focus-visible,
.cta-section-webmaster a:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .9) !important;
    outline-offset: 3px !important;
}

@media (max-width: 786px) {
    .hero-modern .hero-buttons {
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .hero-modern .hero-buttons a,
    .hero-modern a.btn-primary,
    .hero-modern a.btn-outline {
        width: calc(100% - 32px) !important;
        max-width: 410px !important;
        min-height: 58px !important;
        margin: 0 auto !important;
        padding: 15px 18px !important;
        font-size: 16px !important;
    }
}

/* ==========================================================
   v4 — STRONA GŁÓWNA, SERWIS LAPTOPÓW I ODZYSKIWANIE DANYCH
   Pełna, wymuszona zmiana kolorów po najechaniu.
   ========================================================== */

/* Wspólna baza dla brakujących wariantów przycisków. */
.pcw-home-hero a.pcw-cta,
.home-final-cta a.pcw-cta,
.reviews-actions a.pcw-cta,
.hero-banner a.btn-cta,
.contact-cta a.btn-cta,
.recovery-page .hero-banner a.btn,
.recovery-page .cta-section a.btn-secondary {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    min-width: 190px !important;
    padding: 14px 26px !important;
    margin: 8px 6px !important;
    border: 2px solid var(--pcw-cta-accent) !important;
    border-radius: var(--pcw-cta-radius) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .24) !important;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Wariant jasny — stan podstawowy. */
.pcw-home-hero a.pcw-cta-primary,
.home-final-cta a.pcw-cta-primary,
.hero-banner a.btn-cta,
.recovery-page .hero-banner a.btn-primary,
.recovery-page .cta-section a.btn-secondary {
    color: var(--pcw-cta-text-dark) !important;
    background: var(--pcw-cta-accent) !important;
    border-color: var(--pcw-cta-accent) !important;
}

/* Wariant ciemny — stan podstawowy. */
.pcw-home-hero a.pcw-cta-secondary,
.home-final-cta a.pcw-cta-secondary,
.reviews-actions a.pcw-cta-secondary,
.contact-cta a.btn-cta {
    color: #fff !important;
    background: var(--pcw-cta-dark) !important;
    border-color: var(--pcw-cta-accent) !important;
}

/* Jasny -> ciemny po najechaniu. */
.pcw-home-hero a.pcw-cta-primary:hover,
.pcw-home-hero a.pcw-cta-primary:focus-visible,
.home-final-cta a.pcw-cta-primary:hover,
.home-final-cta a.pcw-cta-primary:focus-visible,
.hero-banner a.btn-cta:hover,
.hero-banner a.btn-cta:focus-visible,
.recovery-page .hero-banner a.btn-primary:hover,
.recovery-page .hero-banner a.btn-primary:focus-visible,
.recovery-page .cta-section a.btn-secondary:hover,
.recovery-page .cta-section a.btn-secondary:focus-visible {
    color: #fff !important;
    background: var(--pcw-cta-dark) !important;
    border-color: var(--pcw-cta-accent) !important;
    filter: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34), 0 0 0 3px rgba(91, 192, 222, .14) !important;
}

/* Ciemny -> jasny po najechaniu. */
.pcw-home-hero a.pcw-cta-secondary:hover,
.pcw-home-hero a.pcw-cta-secondary:focus-visible,
.home-final-cta a.pcw-cta-secondary:hover,
.home-final-cta a.pcw-cta-secondary:focus-visible,
.reviews-actions a.pcw-cta-secondary:hover,
.reviews-actions a.pcw-cta-secondary:focus-visible,
.contact-cta a.btn-cta:hover,
.contact-cta a.btn-cta:focus-visible {
    color: var(--pcw-cta-text-dark) !important;
    background: var(--pcw-cta-accent) !important;
    border-color: var(--pcw-cta-accent) !important;
    filter: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34), 0 0 0 3px rgba(91, 192, 222, .14) !important;
}

/* Usunięcie nieskończonego „pływania” przycisku odzyskiwania danych. */
.recovery-page .cta-section a.btn-secondary.animated.pulse {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Stabilne położenie sekcji CTA odzyskiwania danych. */
.recovery-page .cta-section .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.recovery-page .cta-section .cta-title {
    margin: 0 0 18px !important;
}

@media (max-width: 786px) {
    .pcw-home-hero a.pcw-cta,
    .home-final-cta a.pcw-cta,
    .reviews-actions a.pcw-cta,
    .hero-banner a.btn-cta,
    .contact-cta a.btn-cta,
    .recovery-page .hero-banner a.btn,
    .recovery-page .cta-section a.btn-secondary {
        width: calc(100% - 32px) !important;
        max-width: 410px !important;
        min-height: 58px !important;
        margin: 6px auto !important;
        padding: 15px 18px !important;
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcw-home-hero a.pcw-cta,
    .home-final-cta a.pcw-cta,
    .reviews-actions a.pcw-cta,
    .hero-banner a.btn-cta,
    .contact-cta a.btn-cta,
    .recovery-page .hero-banner a.btn,
    .recovery-page .cta-section a.btn-secondary {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================
   PC-Wizard: mobilny przycisk „Pomoc zdalna” w nagłówku
   ========================================================== */
@media (max-width: 786px) {
    /* Kontener prawego przycisku pozostaje widoczny również po zwinięciu nagłówka. */
    .site-header .top-menu-buttons,
    .site-header .header-container.compact .top-menu-buttons {
        display: flex !important;
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        z-index: 10050 !important;
        pointer-events: auto !important;
    }

    .site-header .desktop-top-buttons {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Na telefonie zostawiamy tylko środkowy przycisk: Pomoc zdalna. */
    .site-header .desktop-top-buttons > .top-button {
        display: none !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-width: 0 !important;
        width: auto !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 2px solid #5bc0de !important;
        border-radius: 8px !important;
        background: #5bc0de !important;
        color: #10202a !important;
        font-family: Inter, Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .28) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2):hover,
    .site-header .desktop-top-buttons > .top-button:nth-child(2):focus-visible {
        background: #101820 !important;
        color: #fff !important;
        border-color: #5bc0de !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .36), 0 0 0 3px rgba(91, 192, 222, .14) !important;
        outline: none !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) .top-button-icon {
        display: block !important;
        flex: 0 0 auto !important;
        width: 25px !important;
        height: 25px !important;
        margin: 0 !important;
        object-fit: contain !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Lewy przycisk menu ma zbliżoną wysokość i pozostaje nad treścią. */
    .site-header .menu-toggle-wrapper {
        position: relative !important;
        z-index: 10040 !important;
    }

    .site-header .menu-toggle {
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 14px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 370px) {
    .site-header .desktop-top-buttons > .top-button:nth-child(2) {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 9px !important;
        gap: 5px !important;
        font-size: 12px !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) .top-button-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .site-header .menu-toggle {
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
    }
}

/* ==========================================================
   v6 — MOBILNY NAGŁÓWEK: MENU WYSUWA SIĘ SPOD LOGO I KOŃCZY NA ŚRODKU
   ========================================================== */
@media (max-width: 786px) {
    /* Pozycja docelowa dokładnie na środku szerokości nagłówka. */
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        display: flex !important;
        position: absolute !important;
        top: 42px !important;
        left: 50% !important;
        right: auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10045 !important;
        transform: translateX(-50%) !important;
        animation: pcw-menu-fly-from-logo .68s cubic-bezier(.22,.82,.32,1) both !important;
        will-change: transform, opacity;
    }

    /* Sam przycisk nie otrzymuje dodatkowego przesunięcia z dawnych reguł. */
    .site-header .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        transform: none !important;
    }

    .site-header .menu-toggle:hover,
    .site-header .menu-toggle:focus-visible {
        transform: translateY(-1px) !important;
    }
}

@keyframes pcw-menu-fly-from-logo {
    0% {
        opacity: 0;
        transform: translateX(calc(-50% - 135px)) scale(.86);
    }
    62% {
        opacity: 1;
        transform: translateX(calc(-50% + 8px)) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@media (max-width: 370px) {
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        top: 40px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        animation: none !important;
        opacity: 1 !important;
        transform: translateX(-50%) !important;
    }
}

/* ==========================================================
   v7 — POPRAWKA: MENU KOŃCZY ANIMACJĘ NA ŚRODKU EKRANU
   ========================================================== */
@media (max-width: 786px) {
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        position: fixed !important;
        top: 42px !important;
        left: 50vw !important;
        right: auto !important;
        width: 58px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(-50%) !important;
        animation: pcw-menu-fly-to-viewport-center .68s cubic-bezier(.22,.82,.32,1) both !important;
        z-index: 10045 !important;
    }

    .site-header .menu-toggle {
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
    }
}

@keyframes pcw-menu-fly-to-viewport-center {
    0% {
        opacity: 0;
        transform: translateX(calc(-50vw + 48px)) scale(.86);
    }
    62% {
        opacity: 1;
        transform: translateX(calc(-50% + 8px)) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@media (max-width: 370px) {
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        top: 40px !important;
        width: 54px !important;
        height: 54px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        animation: none !important;
        opacity: 1 !important;
        transform: translateX(-50%) !important;
    }
}

/* ==========================================================
   v8 — MOBILNY NAGŁÓWEK: WSPÓLNA OŚ + MENU WYSUWANE SPOD LOGO
   Logo po lewej, menu obok, Pomoc Zdalna po prawej.
   ========================================================== */
@media (max-width: 786px) {
    .site-header,
    .site-header .header-container,
    .site-header .header-container.compact {
        position: relative !important;
    }

    .site-header .header-container,
    .site-header .header-container.compact {
        min-height: 138px !important;
    }

    /* Logo: ta sama oś pionowa co oba przyciski. */
    .site-header .logo-wrapper,
    .site-header .header-container.compact .logo-wrapper {
        position: static !important;
    }

    .site-header .site-logo,
    .site-header .header-container.compact .site-logo {
        position: absolute !important;
        top: 1px !important;
        left: 18px !important;
        width: 76px !important;
        height: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10046 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        display: block !important;
        width: 76px !important;
        height: 76px !important;
        max-width: 76px !important;
        max-height: 76px !important;
        object-fit: contain !important;
        margin: 0 !important;
        animation: none !important;
        transform: none !important;
    }

    /* Pomoc Zdalna: prawa strona, ta sama wysokość i oś. */
    .site-header .top-menu-buttons,
    .site-header .header-container.compact .top-menu-buttons {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        height: 58px !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Menu kończy dokładnie obok logo. */
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        position: absolute !important;
        top: 10px !important;
        left: 104px !important;
        right: auto !important;
        width: 58px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        opacity: 0;
        z-index: 10047 !important;
        animation: pcw-menu-slide-out-from-logo-v8 .62s cubic-bezier(.18,.84,.32,1) .32s both !important;
        will-change: transform, opacity;
    }

    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle {
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .site-header .menu-toggle:hover,
    .site-header .menu-toggle:focus-visible {
        transform: translateY(-1px) !important;
    }
}

@keyframes pcw-menu-slide-out-from-logo-v8 {
    0% {
        opacity: 0;
        transform: translateX(-66px) scale(.88);
    }
    58% {
        opacity: 1;
        transform: translateX(6px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (max-width: 390px) {
    .site-header .site-logo,
    .site-header .header-container.compact .site-logo {
        left: 14px !important;
        width: 72px !important;
        height: 72px !important;
        top: 3px !important;
    }

    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        left: 94px !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 350px) {
    .site-header .site-logo,
    .site-header .header-container.compact .site-logo {
        left: 10px !important;
        width: 68px !important;
        height: 68px !important;
        top: 5px !important;
    }

    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        width: 68px !important;
        height: 68px !important;
        max-width: 68px !important;
        max-height: 68px !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        left: 84px !important;
        width: 54px !important;
        height: 54px !important;
        top: 12px !important;
    }

    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .site-header .top-menu-buttons,
    .site-header .header-container.compact .top-menu-buttons {
        top: 12px !important;
        right: 8px !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) {
        height: 54px !important;
        min-height: 54px !important;
        font-size: 11px !important;
        padding: 0 7px !important;
        gap: 4px !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) .top-button-icon {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================
   v9 — POPRAWIONA STRUKTURA MOBILNEGO NAGŁÓWKA
   Logo pojawia się pierwsze, menu wysuwa się spod logo i
   zatrzymuje obok, a Pomoc Zdalna pozostaje po prawej.
   ========================================================== */
@media (max-width: 786px) {
    .site-header,
    .site-header .header-container,
    .site-header .header-container.compact {
        position: relative !important;
        overflow: visible !important;
    }

    .site-header .header-container,
    .site-header .header-container.compact {
        min-height: 138px !important;
    }

    .site-header .logo-wrapper,
    .site-header .header-container.compact .logo-wrapper {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .site-header .site-logo,
    .site-header .header-container.compact .site-logo {
        position: absolute !important;
        top: 10px !important;
        left: 18px !important;
        width: 76px !important;
        height: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10048 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0;
        transform-origin: center center !important;
        animation: pcw-logo-appear-v9 .34s ease-out .05s both !important;
    }

    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        display: block !important;
        width: 76px !important;
        height: 76px !important;
        max-width: 76px !important;
        max-height: 76px !important;
        margin: 0 !important;
        object-fit: contain !important;
        animation: none !important;
        transform: none !important;
    }

    /* Po naprawieniu HTML przycisk jest rzeczywistym rodzeństwem logo. */
    .site-header .top-menu-buttons,
    .site-header .header-container.compact .top-menu-buttons {
        display: flex !important;
        position: absolute !important;
        top: 19px !important;
        right: 10px !important;
        left: auto !important;
        width: auto !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        z-index: 10050 !important;
        pointer-events: auto !important;
    }

    .site-header .desktop-top-buttons {
        display: flex !important;
        width: auto !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        transform: none !important;
    }

    .site-header .desktop-top-buttons > .top-button {
        display: none !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 11px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        transform: none !important;
        animation: none !important;
    }

    /* Punkt docelowy jest obok logo; początek animacji znajduje się pod nim. */
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        display: flex !important;
        position: absolute !important;
        top: 19px !important;
        left: 106px !important;
        right: auto !important;
        width: 58px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0;
        transform: translateX(-72px) scale(.90) !important;
        transform-origin: center center !important;
        z-index: 10049 !important;
        animation: pcw-menu-from-logo-v9 .62s cubic-bezier(.18,.84,.30,1) .38s both !important;
        will-change: transform, opacity;
    }

    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        transform: none !important;
    }
}

@keyframes pcw-logo-appear-v9 {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pcw-menu-from-logo-v9 {
    0%   { opacity: 0; transform: translateX(-72px) scale(.90); }
    62%  { opacity: 1; transform: translateX(5px) scale(1.03); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 390px) {
    .site-header .site-logo,
    .site-header .header-container.compact .site-logo {
        left: 12px !important;
        top: 12px !important;
        width: 72px !important;
        height: 72px !important;
    }

    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        left: 92px !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) {
        padding: 0 9px !important;
        font-size: 12px !important;
        gap: 5px !important;
    }
}

@media (max-width: 350px) {
    .site-header .site-logo,
    .site-header .header-container.compact .site-logo {
        left: 9px !important;
        top: 14px !important;
        width: 68px !important;
        height: 68px !important;
    }

    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        width: 68px !important;
        height: 68px !important;
        max-width: 68px !important;
        max-height: 68px !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        left: 82px !important;
        top: 21px !important;
        width: 54px !important;
        height: 54px !important;
    }

    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .site-header .top-menu-buttons,
    .site-header .header-container.compact .top-menu-buttons {
        top: 21px !important;
        right: 7px !important;
        height: 54px !important;
    }

    .site-header .desktop-top-buttons,
    .site-header .desktop-top-buttons > .top-button:nth-child(2) {
        height: 54px !important;
        min-height: 54px !important;
    }

    .site-header .desktop-top-buttons > .top-button:nth-child(2) {
        padding: 0 7px !important;
        font-size: 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .site-logo,
    .site-header .header-container.compact .site-logo,
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================
   v10 — stabilny mobilny nagłówek
   Osobne elementy: logo, animowane menu i Pomoc Zdalna.
   ========================================================== */
.mobile-remote-button {
    display: none;
}

@media (max-width: 786px) {
    .site-header,
    .site-header .header-container,
    .site-header .header-container.compact {
        overflow: hidden !important;
    }

    .site-header .header-container,
    .site-header .header-container.compact {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 76px 58px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 10px !important;
        width: 100% !important;
        min-height: 138px !important;
        padding: 10px 10px 50px 18px !important;
        box-sizing: border-box !important;
    }

    /* Desktopowy zestaw przycisków jest na telefonie całkowicie wyłączony. */
    .site-header .top-menu-buttons,
    .site-header .desktop-top-buttons {
        display: none !important;
    }

    .site-header .logo-wrapper,
    .site-header .header-container.compact .logo-wrapper {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 76px !important;
        height: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 20 !important;
    }

    .site-header .site-logo,
    .site-header .header-container.compact .site-logo {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 76px !important;
        height: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0;
        transform: scale(.9);
        animation: pcw-logo-v10 .32s ease-out .05s both !important;
    }

    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        display: block !important;
        width: 76px !important;
        height: 76px !important;
        max-width: 76px !important;
        max-height: 76px !important;
        object-fit: contain !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        position: relative !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 58px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 19 !important;
        opacity: 0;
        transform: translateX(-76px) scale(.9);
        animation: pcw-menu-out-v10 .62s cubic-bezier(.2,.85,.3,1) .38s both !important;
    }

    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 6px !important;
        font-size: 28px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .site-header .mobile-remote-button {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        height: 58px !important;
        min-height: 58px !important;
        max-width: 150px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        color: #07141c !important;
        background: #61c4e3 !important;
        border: 2px solid #61c4e3 !important;
        border-radius: 7px !important;
        text-decoration: none !important;
        font-family: var(--pcw-font-body, Arial, sans-serif) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        z-index: 21 !important;
        opacity: 0;
        transform: translateY(-6px);
        animation: pcw-remote-v10 .35s ease-out .18s both !important;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
    }

    .site-header .mobile-remote-button img {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .site-header .mobile-remote-button:hover,
    .site-header .mobile-remote-button:focus-visible {
        color: #fff !important;
        background: #071923 !important;
        border-color: #61c4e3 !important;
    }
}

@keyframes pcw-logo-v10 {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pcw-menu-out-v10 {
    0%   { opacity: 0; transform: translateX(-76px) scale(.9); }
    65%  { opacity: 1; transform: translateX(5px) scale(1.03); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes pcw-remote-v10 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 390px) {
    .site-header .header-container,
    .site-header .header-container.compact {
        grid-template-columns: 70px 54px minmax(0, 1fr) !important;
        column-gap: 7px !important;
        padding-left: 10px !important;
        padding-right: 8px !important;
    }

    .site-header .logo-wrapper,
    .site-header .header-container.compact .logo-wrapper,
    .site-header .site-logo,
    .site-header .header-container.compact .site-logo,
    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper,
    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .site-header .mobile-remote-button {
        height: 54px !important;
        min-height: 54px !important;
        max-width: 135px !important;
        padding: 0 9px !important;
        font-size: 12px !important;
        gap: 5px !important;
    }
}

@media (max-width: 350px) {
    .site-header .header-container,
    .site-header .header-container.compact {
        grid-template-columns: 64px 50px minmax(0, 1fr) !important;
        column-gap: 5px !important;
        padding-left: 7px !important;
        padding-right: 6px !important;
    }

    .site-header .logo-wrapper,
    .site-header .header-container.compact .logo-wrapper,
    .site-header .site-logo,
    .site-header .header-container.compact .site-logo,
    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper,
    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    .site-header .mobile-remote-button {
        height: 50px !important;
        min-height: 50px !important;
        max-width: 125px !important;
        padding: 0 7px !important;
        font-size: 11px !important;
    }

    .site-header .mobile-remote-button img {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .site-logo,
    .site-header .header-container.compact .site-logo,
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper,
    .site-header .mobile-remote-button {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================
   v11 — MOBILNY NAGŁÓWEK STALE WIDOCZNY PODCZAS PRZEWIJANIA
   Strzałka "do góry" pozostaje bez zmian.
   ========================================================== */
@media (max-width: 786px) {
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Po przewinięciu nagłówek przechodzi w zwarty, stale widoczny pasek. */
    .site-header.scrolled .header-container {
        min-height: 72px !important;
        height: 72px !important;
        padding: 6px 8px !important;
        grid-template-columns: 54px 46px minmax(0, 1fr) !important;
        column-gap: 7px !important;
        background: rgba(3, 13, 22, .96) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .38) !important;
    }

    .site-header.scrolled .logo-wrapper,
    .site-header.scrolled .site-logo,
    .site-header.scrolled .site-logo img {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .site-header.scrolled .menu-toggle-wrapper,
    .site-header.scrolled .menu-toggle {
        display: flex !important;
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }

    .site-header.scrolled .menu-toggle {
        font-size: 23px !important;
        border-radius: 6px !important;
    }

    .site-header.scrolled .mobile-remote-button {
        display: inline-flex !important;
        justify-self: end !important;
        height: 46px !important;
        min-height: 46px !important;
        max-width: 132px !important;
        padding: 0 9px !important;
        font-size: 11.5px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }

    .site-header.scrolled .mobile-remote-button img {
        width: 17px !important;
        height: 17px !important;
    }

    /* Menu rozwijane zaczyna się pod mini nagłówkiem. */
    .site-header.scrolled .main-navigation {
        top: 72px !important;
    }
}

@media (max-width: 350px) {
    .site-header.scrolled .header-container {
        grid-template-columns: 50px 43px minmax(0, 1fr) !important;
        column-gap: 5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .site-header.scrolled .logo-wrapper,
    .site-header.scrolled .site-logo,
    .site-header.scrolled .site-logo img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .site-header.scrolled .menu-toggle-wrapper,
    .site-header.scrolled .menu-toggle {
        width: 43px !important;
        min-width: 43px !important;
        height: 43px !important;
        min-height: 43px !important;
    }

    .site-header.scrolled .mobile-remote-button {
        height: 43px !important;
        min-height: 43px !important;
        max-width: 118px !important;
        padding: 0 7px !important;
        font-size: 10.5px !important;
    }
}

/* ==========================================================
   v12 — finalny mobilny nagłówek: widoczny od startu,
   kompaktowy, bez przycinania HERO.
   ========================================================== */
@media (max-width: 786px) {
    html {
        scroll-padding-top: 68px !important;
    }

    body {
        padding-top: 94px !important;
    }

    body.admin-bar {
        padding-top: 140px !important;
    }

    body.admin-bar .site-header {
        top: 46px !important;
    }

    .site-header,
    .site-header.scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        z-index: 99999 !important;
    }

    .site-header .header-container,
    .site-header .header-container.compact {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 66px 52px minmax(0, 1fr) !important;
        grid-template-rows: 1fr !important;
        align-items: center !important;
        column-gap: 8px !important;
        width: 100% !important;
        height: 94px !important;
        min-height: 94px !important;
        max-height: 94px !important;
        margin: 0 !important;
        padding: 8px 9px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .site-header .top-menu-buttons,
    .site-header .desktop-top-buttons,
    .site-header .top-menu-wrapper {
        display: none !important;
    }

    .site-header .logo-wrapper,
    .site-header .header-container.compact .logo-wrapper {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 66px !important;
        height: 66px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 30 !important;
    }

    .site-header .site-logo,
    .site-header .header-container.compact .site-logo,
    .site-header.scrolled .site-logo {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 66px !important;
        height: 66px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: pcw-logo-v12 .28s ease-out .04s both !important;
    }

    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img,
    .site-header.compact .site-logo img,
    .site-header.scrolled .site-logo img {
        display: block !important;
        width: 66px !important;
        height: 66px !important;
        max-width: 66px !important;
        max-height: 66px !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper,
    .site-header.scrolled .menu-toggle-wrapper {
        position: relative !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 29 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: pcw-menu-from-logo-v12 .62s cubic-bezier(.2,.84,.3,1) .30s both !important;
    }

    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle,
    .site-header.scrolled .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 6px !important;
        font-size: 26px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .site-header .mobile-remote-button,
    .site-header.scrolled .mobile-remote-button {
        position: static !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: auto !important;
        max-width: 142px !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 7px !important;
        font-size: 12px !important;
        line-height: 1.05 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: pcw-remote-v12 .30s ease-out .12s both !important;
        z-index: 31 !important;
    }

    .site-header .mobile-remote-button img,
    .site-header.scrolled .mobile-remote-button img {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        object-fit: contain !important;
    }

    /* Po przewinięciu: niższy, stale widoczny pasek mini. */
    .site-header.scrolled .header-container,
    .site-header.scrolled .header-container.compact {
        grid-template-columns: 48px 44px minmax(0, 1fr) !important;
        column-gap: 6px !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 5px 8px !important;
        background: rgba(3, 13, 22, .97) !important;
        box-shadow: 0 7px 20px rgba(0,0,0,.38) !important;
    }

    .site-header.scrolled .logo-wrapper,
    .site-header.scrolled .site-logo,
    .site-header.scrolled .site-logo img {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        animation: none !important;
    }

    .site-header.scrolled .menu-toggle-wrapper,
    .site-header.scrolled .menu-toggle {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        animation: none !important;
    }

    .site-header.scrolled .menu-toggle {
        font-size: 22px !important;
    }

    .site-header.scrolled .mobile-remote-button {
        height: 44px !important;
        min-height: 44px !important;
        max-width: 128px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        animation: none !important;
    }

    .site-header.scrolled .mobile-remote-button img {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
    }

    .site-header .main-navigation {
        top: 94px !important;
    }

    .site-header.scrolled .main-navigation {
        top: 64px !important;
    }

    /* Neutralizacja wcześniejszych ujemnych przesunięć pierwszej sekcji. */
    .pcw-home-hero,
    main > section:first-child,
    #primary > section:first-child,
    .site-main > section:first-child {
        margin-top: 0 !important;
    }
}

@media (max-width: 370px) {
    .site-header .header-container,
    .site-header .header-container.compact {
        grid-template-columns: 60px 48px minmax(0, 1fr) !important;
        column-gap: 6px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .site-header .logo-wrapper,
    .site-header .site-logo,
    .site-header .site-logo img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .menu-toggle {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
    }

    .site-header .mobile-remote-button {
        max-width: 128px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 7px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 335px) {
    .site-header .header-container,
    .site-header .header-container.compact {
        grid-template-columns: 56px 44px minmax(0, 1fr) !important;
        column-gap: 4px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .site-header .logo-wrapper,
    .site-header .site-logo,
    .site-header .site-logo img {
        width: 56px !important;
        height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .menu-toggle {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 22px !important;
    }

    .site-header .mobile-remote-button {
        max-width: 116px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
        gap: 4px !important;
    }

    .site-header .mobile-remote-button img {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
    }
}

@keyframes pcw-logo-v12 {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pcw-menu-from-logo-v12 {
    0%   { opacity: 0; transform: translateX(-66px) scale(.90); }
    68%  { opacity: 1; transform: translateX(4px) scale(1.025); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes pcw-remote-v12 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .site-logo,
    .site-header .menu-toggle-wrapper,
    .site-header .mobile-remote-button {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================
   v13 — intuicyjny układ mobilny + ciaśniejszy pasek po scrollu
   - logo po lewej
   - przycisk menu na środku, lekko niżej w widoku początkowym
   - Pomoc Zdalna po prawej
   - bardzo kompaktowy pasek po przewinięciu
   - ciaśniejszy nagłówek desktopowy po przewinięciu
   ========================================================== */
@media (max-width: 786px) {
    html {
        scroll-padding-top: 56px !important;
    }

    body,
    body.admin-bar {
        padding-top: 84px !important;
    }

    body.admin-bar .site-header {
        top: 46px !important;
    }

    .site-header .header-container,
    .site-header .header-container.compact,
    .site-header.scrolled .header-container,
    .site-header.scrolled .header-container.compact {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Widok początkowy: trzy czytelne punkty, menu centralnie i lekko niżej. */
    .site-header:not(.scrolled) .header-container,
    .site-header:not(.scrolled) .header-container.compact {
        height: 84px !important;
        min-height: 84px !important;
        max-height: 84px !important;
        padding: 7px 8px !important;
    }

    .site-header .logo-wrapper,
    .site-header .header-container.compact .logo-wrapper {
        position: absolute !important;
        left: 10px !important;
        top: 8px !important;
        width: 62px !important;
        height: 62px !important;
        margin: 0 !important;
        z-index: 32 !important;
    }

    .site-header .site-logo,
    .site-header .header-container.compact .site-logo,
    .site-header .site-logo img,
    .site-header .header-container.compact .site-logo img {
        width: 62px !important;
        height: 62px !important;
        max-width: 62px !important;
        max-height: 62px !important;
        margin: 0 !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        position: absolute !important;
        left: 50% !important;
        top: 25px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(-50%) !important;
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 34 !important;
    }

    .site-header .menu-toggle,
    .site-header .header-container.compact .menu-toggle {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 7px !important;
        font-size: 25px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .site-header .mobile-remote-button,
    .site-header .header-container.compact .mobile-remote-button {
        position: absolute !important;
        right: 8px !important;
        top: 9px !important;
        display: inline-flex !important;
        width: auto !important;
        max-width: 132px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        border-radius: 7px !important;
        font-size: 11.5px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        z-index: 35 !important;
    }

    .site-header .mobile-remote-button img,
    .site-header .header-container.compact .mobile-remote-button img {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
    }

    .site-header:not(.scrolled) .main-navigation {
        top: 84px !important;
    }

    /* Po przewinięciu: maksymalnie zwarty pasek, ale nadal wygodny dotykowo. */
    .site-header.scrolled .header-container,
    .site-header.scrolled .header-container.compact {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 4px 6px !important;
        background: rgba(2, 10, 17, .98) !important;
        box-shadow: 0 5px 14px rgba(0,0,0,.34) !important;
        border-radius: 0 0 7px 7px !important;
    }

    .site-header.scrolled .logo-wrapper,
    .site-header.scrolled .site-logo,
    .site-header.scrolled .site-logo img {
        left: 7px !important;
        top: 5px !important;
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        animation: none !important;
    }

    .site-header.scrolled .menu-toggle-wrapper {
        left: 50% !important;
        top: 5px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        transform: translateX(-50%) !important;
        animation: none !important;
    }

    .site-header.scrolled .menu-toggle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 6px !important;
        font-size: 21px !important;
    }

    .site-header.scrolled .mobile-remote-button {
        right: 6px !important;
        top: 6px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-width: 116px !important;
        padding: 0 7px !important;
        border-radius: 6px !important;
        font-size: 10.5px !important;
        animation: none !important;
    }

    .site-header.scrolled .mobile-remote-button img {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
    }

    .site-header.scrolled .main-navigation {
        top: 52px !important;
    }
}

@media (max-width: 350px) {
    .site-header .logo-wrapper,
    .site-header .site-logo,
    .site-header .site-logo img {
        width: 56px !important;
        height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }

    .site-header .menu-toggle-wrapper {
        top: 26px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .site-header .menu-toggle {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 22px !important;
    }

    .site-header .mobile-remote-button {
        max-width: 112px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
    }
}

/* Desktop: niższy pasek po przewinięciu, żeby nie zasłaniał treści. */
@media (min-width: 787px) {
    .site-header.scrolled {
        height: 76px !important;
        min-height: 76px !important;
        padding: 3px 0 !important;
        background-color: rgba(1, 10, 19, .97) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.34) !important;
    }

    .site-header.scrolled .header-container,
    .site-header.scrolled .header-container.compact {
        min-height: 68px !important;
        height: 68px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .site-header.scrolled .logo-wrapper,
    .site-header.scrolled .site-logo,
    .site-header.scrolled .site-logo img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .site-header.scrolled .main-navigation {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .site-header.scrolled .main-navigation li a {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        font-size: 13px !important;
    }

    .site-header.scrolled .top-menu-buttons {
        top: 4px !important;
    }

    .site-header.scrolled .top-button {
        min-height: 34px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

/* ==========================================================
   v14 — stabilny mobilny nagłówek + efektowne wejście menu
   - Pomoc Zdalna zawsze zakotwiczona po prawej
   - menu widoczne od razu i animowane bez migania logo
   - kompaktowy wariant po przewinięciu
   ========================================================== */
@media (max-width: 786px) {
    /* Kasujemy wszystkie historyczne pozycje z lewej strony. */
    .site-header .mobile-remote-button,
    .site-header .header-container.compact .mobile-remote-button,
    .site-header.scrolled .mobile-remote-button,
    .site-header.scrolled .header-container.compact .mobile-remote-button {
        left: auto !important;
        right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        translate: none !important;
    }

    .site-header.scrolled .mobile-remote-button,
    .site-header.scrolled .header-container.compact .mobile-remote-button {
        left: auto !important;
        right: 6px !important;
        top: 6px !important;
        width: auto !important;
        max-width: 116px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 7px !important;
        white-space: nowrap !important;
    }

    /* Wrapper pozostaje nieruchomy na środku. Animujemy tylko sam przycisk. */
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper {
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
    }

    .site-header:not(.scrolled) .menu-toggle {
        opacity: 1 !important;
        visibility: visible !important;
        animation: pcw-menu-arrival-v14 .62s cubic-bezier(.18,.89,.32,1.28) .12s both !important;
        transform-origin: 50% 50% !important;
        will-change: transform, opacity, box-shadow !important;
    }

    .site-header.scrolled .menu-toggle {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Logo nie animuje się — koniec z miganiem przy starcie. */
    .site-header .site-logo,
    .site-header .site-logo img,
    .site-header .logo-wrapper {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@keyframes pcw-menu-arrival-v14 {
    0% {
        opacity: 0;
        transform: translateY(-12px) scale(.72) rotate(-5deg);
        box-shadow: 0 0 0 rgba(64, 198, 239, 0);
    }
    58% {
        opacity: 1;
        transform: translateY(2px) scale(1.08) rotate(1deg);
        box-shadow: 0 0 0 7px rgba(64, 198, 239, .16), 0 10px 24px rgba(0,0,0,.42);
    }
    78% {
        transform: translateY(-1px) scale(.98) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        box-shadow: 0 7px 18px rgba(0,0,0,.34);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header:not(.scrolled) .menu-toggle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================
   v15 — pewne kotwiczenie Pomocy Zdalnej + jednolita poświata
   ========================================================== */
@media (max-width: 786px) {
    .site-header .header-container,
    .site-header .header-container.compact,
    .site-header.scrolled .header-container,
    .site-header.scrolled .header-container.compact {
        position: relative !important;
    }

    /* Przycisk jest pozycjonowany względem całego paska, a nie siatki/logo. */
    .site-header a.mobile-remote-button,
    .site-header .header-container > a.mobile-remote-button,
    .site-header.scrolled a.mobile-remote-button,
    .site-header.scrolled .header-container > a.mobile-remote-button,
    .site-header .header-container.compact > a.mobile-remote-button,
    .site-header.scrolled .header-container.compact > a.mobile-remote-button {
        position: absolute !important;
        inset: 50% 8px auto auto !important;
        top: 50% !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        translate: 0 -50% !important;
        transform: none !important;
        justify-self: auto !important;
        align-self: auto !important;
        z-index: 80 !important;
    }

    .site-header.scrolled a.mobile-remote-button,
    .site-header.scrolled .header-container > a.mobile-remote-button,
    .site-header.scrolled .header-container.compact > a.mobile-remote-button {
        inset: 50% 6px auto auto !important;
        top: 50% !important;
        right: 6px !important;
        bottom: auto !important;
        left: auto !important;
        translate: 0 -50% !important;
        transform: none !important;
    }

    /* Taka sama, czytelna poświata pod zwiniętym paskiem. */
    .site-header.scrolled,
    .site-header.scrolled .header-container,
    .site-header.scrolled .header-container.compact {
        box-shadow:
            0 8px 18px rgba(0, 0, 0, .48),
            0 3px 0 rgba(118, 66, 173, .80),
            0 7px 16px rgba(118, 66, 173, .30) !important;
    }
}

@media (min-width: 787px) {
    .site-header.scrolled,
    .site-header.scrolled .header-container,
    .site-header.scrolled .header-container.compact {
        box-shadow:
            0 8px 20px rgba(0, 0, 0, .52),
            0 3px 0 rgba(118, 66, 173, .80),
            0 7px 18px rgba(118, 66, 173, .30) !important;
    }
}


/* ==========================================================
   FINAL v20.1 — stabilny nagłówek bez dodatkowych plików
   ========================================================== */

/* Jedna, miękka poświata indygo. Cień ma tylko zewnętrzny header,
   dzięki czemu nie powstaje dodatkowy prostokąt pod logo. */
.site-header,
.site-header .header-container,
.site-header .header-container.compact,
.site-header .logo-wrapper,
.site-header .site-logo,
.site-header .site-logo a,
.site-header .site-logo img {
    border: 0 !important;
    outline: 0 !important;
}

.site-header.scrolled {
    isolation: isolate !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow:
        0 10px 20px rgba(78, 34, 160, .54),
        0 22px 44px rgba(78, 34, 160, .30),
        0 40px 72px rgba(78, 34, 160, .13) !important;
}

.site-header.scrolled .header-container,
.site-header.scrolled .header-container.compact,
.site-header.scrolled .logo-wrapper,
.site-header.scrolled .site-logo,
.site-header.scrolled .site-logo a,
.site-header.scrolled .site-logo img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.site-header.scrolled::after {
    content: "" !important;
    position: absolute !important;
    left: 4% !important;
    right: 4% !important;
    bottom: -42px !important;
    height: 56px !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: .96 !important;
    background: radial-gradient(
        ellipse 86% 52px at 50% 0%,
        rgba(104, 54, 204, .84) 0%,
        rgba(83, 35, 171, .58) 28%,
        rgba(68, 24, 145, .31) 52%,
        rgba(55, 16, 122, .12) 72%,
        rgba(46, 10, 101, 0) 100%
    ) !important;
    filter: blur(11px) !important;
}

/* Przy 1280 px menu główne i prawe akcje zaczynają na siebie nachodzić.
   Zostają czytelne ikony, a tekst jest ukryty. */
@media (min-width: 787px) and (max-width: 1280px) {
    .site-header .desktop-top-buttons {
        gap: 8px !important;
    }

    .site-header .desktop-top-buttons > .top-button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .site-header .desktop-top-buttons > .top-button .top-button-icon {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        display: block !important;
        object-fit: contain !important;
    }
}

/* Mobilne animacje wejścia: logo błyska i oddycha, menu rośnie
   od przezroczystej kropki do normalnego rozmiaru. */
@media (max-width: 786px) {
    .site-header .logo-wrapper,
    .site-header .menu-toggle-wrapper,
    .site-header .menu-toggle-motion,
    .site-header .menu-toggle {
        opacity: 1 !important;
        visibility: visible !important;
        backface-visibility: hidden !important;
    }

    .site-header .logo-wrapper,
    .site-header .menu-toggle-motion,
    .site-header .menu-toggle {
        animation: none !important;
    }

    .site-header.menu-entry-active:not(.scrolled) .logo-wrapper {
        animation: pcw-logo-intro-final .72s cubic-bezier(.22,.72,.25,1) .04s both !important;
        transform-origin: 50% 50% !important;
        will-change: transform, filter, opacity !important;
    }

    .site-header.menu-entry-active:not(.scrolled) .menu-toggle-motion {
        animation: pcw-menu-dot-final .76s cubic-bezier(.20,.78,.25,1.08) .22s both !important;
        transform-origin: 50% 50% !important;
        will-change: transform, opacity, filter !important;
    }

    .site-header.menu-entry-active:not(.scrolled) .menu-toggle {
        animation: pcw-menu-glyph-final .64s ease-out .34s both !important;
        transform-origin: 50% 50% !important;
    }

    .site-header.scrolled .logo-wrapper,
    .site-header.scrolled .menu-toggle-motion,
    .site-header.scrolled .menu-toggle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .site-header.scrolled::after {
        left: 2% !important;
        right: 2% !important;
        bottom: -31px !important;
        height: 43px !important;
        opacity: .94 !important;
        filter: blur(9px) !important;
    }
}

@keyframes pcw-logo-intro-final {
    0% {
        opacity: .62;
        transform: scale(.88);
        filter: brightness(.78) drop-shadow(0 0 0 rgba(112, 60, 215, 0));
    }
    38% {
        opacity: 1;
        transform: scale(1.15);
        filter: brightness(1.55) drop-shadow(0 0 16px rgba(126, 72, 228, .92));
    }
    68% {
        transform: scale(.97);
        filter: brightness(1.12) drop-shadow(0 0 8px rgba(108, 57, 205, .48));
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0 rgba(108, 57, 205, 0));
    }
}

@keyframes pcw-menu-dot-final {
    0% {
        opacity: 0;
        transform: scale(.06);
        filter: blur(3px) brightness(1.35);
    }
    48% {
        opacity: 1;
        transform: scale(1.10);
        filter: blur(0) brightness(1.18);
    }
    72% {
        transform: scale(.96);
        filter: brightness(1.06);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes pcw-menu-glyph-final {
    0% {
        color: transparent;
        text-shadow: none;
        transform: scaleX(.35);
    }
    44% {
        color: #fff;
        transform: scaleX(1.28);
    }
    72% {
        transform: scaleX(.90);
    }
    100% {
        color: #fff;
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header.menu-entry-active:not(.scrolled) .logo-wrapper,
    .site-header.menu-entry-active:not(.scrolled) .menu-toggle-motion,
    .site-header.menu-entry-active:not(.scrolled) .menu-toggle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ==========================================================
   FINALNY KONTRAKT RESPONSYWNY 786 / 787
   Usuwa artefakty po zmianie szerokości bez odświeżania strony.
   ========================================================== */

/* Mobile działa do 786 px włącznie. */
@media (max-width: 786px) {
    .site-header .menu-toggle-wrapper {
        display: flex !important;
    }

    .site-header .mobile-remote-button {
        display: inline-flex !important;
    }

    .site-header .desktop-top-buttons {
        display: none !important;
    }

    .site-header .main-navigation,
    .site-header .main-navigation .mobile-menu {
        width: 100% !important;
    }

    .site-header .main-navigation .mobile-menu:not(.show) {
        display: none !important;
    }

    .site-header .main-navigation .mobile-menu.show {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Desktop zaczyna się dokładnie od 787 px. Wszystkie pozostałości
   stanu mobile są nadpisywane natychmiast, także podczas resize. */
@media (min-width: 787px) {
    .site-header .menu-toggle-wrapper,
    .site-header .mobile-remote-button {
        display: none !important;
    }

    .site-header .desktop-top-buttons {
        display: flex !important;
    }

    .site-header .main-navigation {
        display: block !important;
        position: static !important;
        width: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .site-header .main-navigation .mobile-menu,
    .site-header .main-navigation .mobile-menu.show {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    .site-header .main-navigation .mobile-menu > li,
    .site-header .main-navigation .mobile-menu.show > li {
        display: block !important;
        padding: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


/* ==========================================================
   FINAL v23 — stabilny układ mobilnego nagłówka
   Logo po lewej, menu dokładnie na środku, Pomoc Zdalna po prawej.
   Nadpisuje wszystkie wcześniejsze pozycje, translate i grid-area.
   ========================================================== */
@media (max-width: 786px) {
    .site-header,
    .site-header.scrolled {
        overflow: visible !important;
    }

    .site-header .header-container,
    .site-header .header-container.compact,
    .site-header.scrolled .header-container,
    .site-header.scrolled .header-container.compact {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 8px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Logo: zawsze lewa strona. */
    .site-header .logo-wrapper,
    .site-header .header-container.compact .logo-wrapper,
    .site-header.scrolled .logo-wrapper,
    .site-header.scrolled .header-container.compact .logo-wrapper {
        position: absolute !important;
        left: 8px !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        margin: 0 !important;
        translate: 0 -50% !important;
        transform: none !important;
        justify-self: auto !important;
        align-self: auto !important;
        z-index: 100 !important;
    }

    /* Menu: geometryczny środek całego nagłówka, nie kontenera logo. */
    .site-header .menu-toggle-wrapper,
    .site-header .header-container.compact .menu-toggle-wrapper,
    .site-header.scrolled .menu-toggle-wrapper,
    .site-header.scrolled .header-container.compact .menu-toggle-wrapper {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        translate: -50% -50% !important;
        transform: none !important;
        justify-self: auto !important;
        align-self: auto !important;
        z-index: 120 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .site-header .menu-toggle-motion,
    .site-header.scrolled .menu-toggle-motion {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        margin: 0 !important;
        translate: none !important;
    }

    .site-header .menu-toggle,
    .site-header.scrolled .menu-toggle {
        position: relative !important;
        inset: auto !important;
        margin: 0 !important;
    }

    /* Pomoc Zdalna: zawsze prawa strona, bez odziedziczonego left/translate. */
    .site-header a.mobile-remote-button,
    .site-header .header-container > a.mobile-remote-button,
    .site-header .header-container.compact > a.mobile-remote-button,
    .site-header.scrolled a.mobile-remote-button,
    .site-header.scrolled .header-container > a.mobile-remote-button,
    .site-header.scrolled .header-container.compact > a.mobile-remote-button {
        position: absolute !important;
        left: auto !important;
        right: 8px !important;
        top: 50% !important;
        bottom: auto !important;
        margin: 0 !important;
        translate: 0 -50% !important;
        transform: none !important;
        justify-self: auto !important;
        align-self: auto !important;
        z-index: 110 !important;
        white-space: nowrap !important;
    }

    /* Panel menu otwiera się pod nagłówkiem i nie jest przycinany. */
    .site-header .main-navigation {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: 100% !important;
        z-index: 95 !important;
        overflow: visible !important;
    }

    .site-header .main-navigation .mobile-menu.show {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
}

/* Węższe telefony: zmniejszamy tylko skrajne elementy, środek pozostaje stały. */
@media (max-width: 370px) {
    .site-header a.mobile-remote-button,
    .site-header.scrolled a.mobile-remote-button {
        right: 5px !important;
        max-width: 108px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 11px !important;
    }

    .site-header .logo-wrapper,
    .site-header.scrolled .logo-wrapper {
        left: 5px !important;
    }
}

@media (max-width: 330px) {
    .site-header a.mobile-remote-button span {
        font-size: 10px !important;
    }

    .site-header a.mobile-remote-button,
    .site-header.scrolled a.mobile-remote-button {
        max-width: 98px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}


/* ==========================================================
   FINAL v24 — dopracowane mobilne menu rozwijane
   ========================================================== */
@media (max-width: 786px) {
    /*
     * Nawigacja pozostaje pełnoekranową warstwą pozycjonującą,
     * ale sam panel ma zwartą, responsywną szerokość.
     */
    .site-header .main-navigation {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% - 3px) !important;
        width: 100% !important;
        height: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
        z-index: 1000 !important;
    }

    .site-header .main-navigation .mobile-menu {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 0 !important;
        width: min(88vw, 360px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 82px) !important;
        margin: 0 !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        border: 1px solid rgba(92, 199, 232, .86) !important;
        border-top: 2px solid #5cc7e8 !important;
        border-radius: 0 0 14px 14px !important;
        background:
            linear-gradient(180deg, rgba(38, 38, 42, .98), rgba(22, 23, 28, .985)) !important;
        box-shadow:
            0 18px 38px rgba(0, 0, 0, .56),
            0 8px 24px rgba(75, 28, 132, .24) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        transform: translate(-50%, -10px) scale(.975) !important;
        transform-origin: top center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            opacity .20s ease,
            transform .24s cubic-bezier(.2, .78, .28, 1),
            visibility 0s linear .24s !important;
    }

    .site-header .main-navigation .mobile-menu.show {
        display: flex !important;
        flex-direction: column !important;
        transform: translate(-50%, 0) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition:
            opacity .20s ease,
            transform .24s cubic-bezier(.2, .78, .28, 1),
            visibility 0s !important;
    }

    .site-header .main-navigation:has(.mobile-menu.show) {
        pointer-events: auto !important;
    }

    .site-header .main-navigation .mobile-menu > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .site-header .main-navigation .mobile-menu > li + li {
        border-top: 1px solid rgba(255, 255, 255, .075) !important;
    }

    .site-header .main-navigation .mobile-menu > li > a {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        width: 100% !important;
        padding: 10px 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        color: #fff !important;
        background: transparent !important;
        font-size: clamp(15px, 4.3vw, 18px) !important;
        font-weight: 700 !important;
        line-height: 1.22 !important;
        text-align: center !important;
        text-decoration: none !important;
        outline: none !important;
        transition:
            color .18s ease,
            background-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease !important;
    }

    /* Wyraźny stan hover/focus oraz dotyku. */
    .site-header .main-navigation .mobile-menu > li > a:hover,
    .site-header .main-navigation .mobile-menu > li > a:focus-visible {
        color: #fff !important;
        background:
            linear-gradient(90deg,
                rgba(74, 28, 132, .82),
                rgba(26, 139, 182, .78)
            ) !important;
        box-shadow:
            inset 0 0 0 1px rgba(105, 211, 242, .72),
            0 5px 16px rgba(0, 0, 0, .24) !important;
        transform: translateX(2px) !important;
    }

    .site-header .main-navigation .mobile-menu > li > a:active {
        background: rgba(92, 199, 232, .32) !important;
        transform: scale(.985) !important;
    }

    /* Aktualna pozycja jest zawsze czytelnie zaznaczona. */
    .site-header .main-navigation .mobile-menu > li.current-menu-item > a,
    .site-header .main-navigation .mobile-menu > li.current_page_item > a,
    .site-header .main-navigation .mobile-menu > li.current-menu-ancestor > a {
        color: #fff !important;
        background:
            linear-gradient(90deg,
                rgba(74, 28, 132, .92),
                rgba(20, 132, 174, .88)
            ) !important;
        box-shadow:
            inset 3px 0 0 #69d3f2,
            inset 0 0 0 1px rgba(105, 211, 242, .55) !important;
    }

    /*
     * Przycisk po rozwinięciu zachowuje rozmiar, ale hamburger
     * zmienia się w strzałkę w dół.
     */
    .site-header .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: Arial, sans-serif !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .site-header .menu-toggle::before {
        content: "☰" !important;
        display: block !important;
        font-size: 29px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        color: #fff !important;
        transform: translateY(-1px) rotate(0deg) !important;
        transition:
            transform .22s ease,
            opacity .16s ease !important;
    }

    .site-header .menu-toggle.is-open::before,
    .site-header .menu-toggle[aria-expanded="true"]::before {
        content: "⌄" !important;
        font-size: 35px !important;
        font-weight: 700 !important;
        transform: translateY(-5px) rotate(0deg) !important;
    }

    .site-header .menu-toggle.is-open,
    .site-header .menu-toggle[aria-expanded="true"] {
        background: #4a1c84 !important;
        box-shadow:
            0 0 0 2px rgba(105, 211, 242, .75),
            0 7px 18px rgba(0, 0, 0, .34) !important;
    }
}

/* Na niskich ekranach pozycje są ciaśniejsze, aby menu mieściło się bez przycinania. */
@media (max-width: 786px) and (max-height: 540px) {
    .site-header .main-navigation .mobile-menu {
        max-height: calc(100dvh - 66px) !important;
        padding: 3px !important;
    }

    .site-header .main-navigation .mobile-menu > li > a {
        min-height: 41px !important;
        padding: 7px 12px !important;
        font-size: 15px !important;
    }
}


/* ==========================================================
   FINAL v25 — mobilne menu zawsze w granicach ekranu
   Panel jest pozycjonowany względem viewportu, a jego położenie
   pionowe wylicza JavaScript z rzeczywistej wysokości nagłówka.
   ========================================================== */
@media (max-width: 786px) {
    .site-header {
        overflow: visible !important;
        z-index: 10000 !important;
    }

    .site-header .main-navigation {
        position: static !important;
        inset: auto !important;
        width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .site-header .main-navigation .mobile-menu,
    .site-header .main-navigation .mobile-menu.show {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: var(--pcw-mobile-menu-top, 92px) !important;
        bottom: auto !important;
        width: min(350px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - var(--pcw-mobile-menu-top, 92px) - 12px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        z-index: 9998 !important;
        transform-origin: top center !important;
    }

    .site-header .main-navigation .mobile-menu {
        display: flex !important;
        flex-direction: column !important;
        transform: translate(-50%, -8px) scale(.985) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .site-header .main-navigation .mobile-menu.show {
        transform: translate(-50%, 0) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .site-header .menu-toggle-wrapper,
    .site-header .menu-toggle-motion,
    .site-header .menu-toggle {
        z-index: 10003 !important;
        pointer-events: auto !important;
    }

    .site-header .mobile-remote-button,
    .site-header .logo-wrapper {
        z-index: 10002 !important;
    }

    /* Przyciemnienie tła pod otwartym panelem, bez blokowania nagłówka. */
    body.pcw-mobile-menu-open::after {
        content: "" !important;
        position: fixed !important;
        inset: var(--pcw-mobile-menu-top, 92px) 0 0 0 !important;
        background: rgba(0, 0, 0, .22) !important;
        backdrop-filter: blur(1px) !important;
        -webkit-backdrop-filter: blur(1px) !important;
        z-index: 9997 !important;
        pointer-events: none !important;
    }

    .site-header .main-navigation .mobile-menu > li > a {
        min-height: 46px !important;
        padding: 9px 13px !important;
    }

    /* Strzałka po rozwinięciu — czytelna i bez zmiany wymiarów przycisku. */
    .site-header .menu-toggle::before {
        content: "☰" !important;
    }

    .site-header .menu-toggle.is-open::before,
    .site-header .menu-toggle[aria-expanded="true"]::before {
        content: "⌄" !important;
        transform: translateY(-4px) !important;
    }
}

@media (max-width: 360px) {
    .site-header .main-navigation .mobile-menu,
    .site-header .main-navigation .mobile-menu.show {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}


/* ==========================================================
   v26 — subtelne podświetlenie nieaktywnych pozycji menu
   ========================================================== */
@media (max-width: 786px) {
    /* Nieaktywna pozycja: łagodny sygnał po najechaniu/fokusie. */
    .site-header .main-navigation .mobile-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:hover,
    .site-header .main-navigation .mobile-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:focus-visible {
        color: #ffffff !important;
        background:
            linear-gradient(
                90deg,
                rgba(74, 28, 132, .34),
                rgba(28, 135, 177, .28)
            ) !important;
        box-shadow:
            inset 0 0 0 1px rgba(105, 211, 242, .42),
            0 3px 12px rgba(0, 0, 0, .18) !important;
        transform: translateX(2px) !important;
    }

    /* Kliknięcie/dotknięcie — krótki, czytelny stan aktywacji. */
    .site-header .main-navigation .mobile-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:active {
        background: rgba(92, 199, 232, .22) !important;
        box-shadow: inset 0 0 0 1px rgba(105, 211, 242, .58) !important;
        transform: scale(.988) !important;
    }
}