/* Tło headera po przewinięciu strony (klasa header-scrolled na <html> — ustawia header.js).
   Klasa jest na <html>, a nie na headerze, bo Vue na stronie głównej nadpisuje klasy headera. */
.header-bar {
    transition: background-color .3s, box-shadow .3s, padding .3s, backdrop-filter .3s !important;
}

html.header-scrolled .header-bar {
    padding: 14px 0;
    background: rgba(239, 246, 255, .82);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 1px 0 rgba(11, 17, 32, .06), 0 8px 24px -12px rgba(11, 17, 32, .18);
}

/* Nad ciemną sekcją sklepu header jest ciemny (klasa is-over-dark z designu) */
html.header-scrolled .header-bar.is-over-dark {
    background: rgba(11, 17, 32, .82);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px -12px rgba(0, 0, 0, .5);
}