/* Omoda — Header + nawigacja (Figma Frame 323, node 68:169/1:323).
   Fixed, 100% szerokości, stałe tło rgba(18,18,18,.72) + blur (nachodzi na hero
   slider, widać przez nie zdjęcie); chowa się delikatnie w dół, pojawia szybko
   w górę. Logo lewo / nawigacja wyśrodkowana / przyciski prawo, wysokość 80px. */

.omoda-header {
    /* Root BEZ transform celowo — transform tworzy containing block, co złamałoby
       position:fixed panelu mobilnego/backdropu (liczyłyby się od headera, nie
       viewportu). Sam pasek (.bar-outer) ma swój transform do chowania/pokazywania. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-family: var(--omoda-font-base);
}

/* Pasek admina WP jest też position:fixed;top:0 (z-index:99999) i normalnie
   zasłaniałby header zalogowanym adminom — offset tylko dla nich, zwykli
   odwiedzający (bez paska) tego nie widzą. Progi 32px/46px = własne WP. */
body.admin-bar .omoda-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .omoda-header {
        top: 46px;
    }
}

.omoda-header__bar-outer {
    /* BEZ transform:translateY(0) w stanie spoczynku (celowo usunięte) — header.js
       obecnie NIGDY nie dodaje .is-hidden (chowanie na scrollu jest wyłączone,
       patrz komentarz w JS), więc ten transform był martwy/kosmetyczny (0 =
       wizualny no-op), ale i tak tworzył containing block dla WSZYSTKICH
       potomków position:fixed w tym poddrzewie (dowolny transform != none to
       robi, nawet translateY(0)) — user: "jak belka jest z informacją to
       dropdown jest z marginesem od góry" — mega menu (position:fixed,
       liczone od --omoda-header-total-height) w rzeczywistości pozycjonowało
       się względem TEGO elementu, nie względem viewportu, więc offset wychodził
       błędny akurat wtedy, gdy .omoda-header (a więc i .bar-outer) sam był
       przesunięty w dół (baner/pasek admina). Transform wraca TYLKO w stanie
       .is-hidden niżej (na razie i tak nieużywanym, ale nieszkodliwym, gdy
       faktycznie nieaktywny). */
    transition: transform 500ms var(--omoda-ease);
}

.omoda-header.is-hidden .omoda-header__bar-outer {
    transform: translateY(-100%);
    transition: transform 220ms var(--omoda-ease);
}

.omoda-header__bar {
    /* Figma: rgba(18,18,18,.8) + opacity 90% na warstwie tła = ~.72 efektywnie, plus blur(10px) */
    background: rgba(18, 18, 18, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.omoda-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--omoda-header-height);
    /* Pełna szerokość ekranu (nie .omoda-container/1280px) — tylko mały margines
       boczny, jak w Figmie (~32px), nie wyśrodkowana siatka treści. */
    padding-inline: 32px;
}

/* Logo */
.omoda-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #ffffff;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 20px;
}

.omoda-header__logo img {
    display: block;
    /* Figma: aspect 440:65, wysokość ~54px w 80px pasku (top:13px po obu stronach) */
    max-height: 54px !important;
    width: auto !important;
    max-width: none !important;
}

/* Nawigacja (desktop) — logo lewo / nav WYŚRODKOWANA / przyciski prawo */
.omoda-header__nav {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.omoda-header__nav-list {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.omoda-header__nav-item {
    position: relative;
}

.omoda-header__nav-link {
    /* .omoda-header__nav-toggle (button, mobile) — reset.css motywu narzuca te same
       właściwości na [type="button"] z identyczną specyficznością co ta klasa */
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    padding: 10px 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    /* user: menu główne ma być w 100% białe, nieprzezroczyste — nie tylko po najechaniu. */
    opacity: 1;
}

.omoda-header__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--omoda-transition-fast);
}

.omoda-header__nav-item.is-open .omoda-header__chevron {
    transform: rotate(180deg);
}

/* Dropdown (desktop, KLIKNIĘCIE — nie hover) — user: "jak najeżdżam na
   submenu to od razu znika" (typowa łamliwość czystego CSS :hover przy
   position:fixed/złożonych panelach — najmniejsza przerwa/inny stacking
   context na trasie kursora zrywa łańcuch :hover) + "submenu ma pojawiać
   się po kliknięciu, tak samo w przypadku salonów". JS (header.js) dodaje
   klasę .is-open na .omoda-header__nav-item po kliknięciu w link/label,
   zamyka po kliknięciu poza, Escape lub otwarciu innej pozycji. */
.omoda-header__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 220px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base), visibility 0s var(--omoda-duration-base);
}

.omoda-header__nav-item.is-open .omoda-header__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base), visibility 0s;
}

.omoda-header__dropdown-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.omoda-header__dropdown-list li a,
.omoda-header__dropdown-list li.omoda-header__dropdown-empty {
    display: block;
    padding: 9px 14px;
    border-radius: 5px;
    color: var(--omoda-color-text);
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: background-color var(--omoda-transition-fast);
}

.omoda-header__dropdown-list li a:hover {
    background: var(--omoda-color-bg-soft, #f4f4f4);
}

.omoda-header__dropdown-list li.omoda-header__dropdown-empty {
    color: var(--omoda-color-text-muted);
    font-style: italic;
    cursor: default;
}

/* ---------- Mega menu "Modele" (desktop) ----------
   Osobny panel od .omoda-header__dropdown (zwykła wąska lista) — siatka kart
   modeli (te same co w widoku "siatka" sekcji Modele) + filtr Omoda/Jaecoo.
   Tło na 100% szerokości ekranu (user), TREŚĆ w środku ograniczona do
   szerokości kontenera strony (1280px, .omoda-container na -inner) —
   position:fixed (liczy się od viewportu, nie od wąskiego <li>).
   top: --omoda-header-total-height (JS, header.js) zamiast samego
   --omoda-header-height — ten drugi to TYLKO wysokość paska nawigacji
   (80px), bez banera informacyjnego nad nim ("Testowa belka..."); user:
   "powinno przylegać do header, nawigacji" — bez JS-owego pomiaru
   RZECZYWISTEJ wysokości (bar+baner razem) zostawała szpara nad panelem,
   przez którą było widać tło strony pod headerem. */
.omoda-header__mega-menu {
    position: fixed;
    top: var(--omoda-header-total-height, var(--omoda-header-height));
    left: 0;
    right: 0;
    /* Jawny z-index — od przeniesienia do <body> (header.js, ucieczka od
       backdrop-filter na .omoda-header__bar) menu NIE JEST już potomkiem
       .omoda-header (z-index:1000, własny kontekst warstwowania), więc bez
       tego dostawało domyślne z-index:auto i realnie malowało się POD
       headerem — geometrycznie "otwarte" (opacity:1), ale niewidoczne. */
    z-index: 999;
    background: #f9f9f9;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    /* Scrollbar na ZEWNĘTRZNYM elemencie (user: "scrollbar ma być wew
       .omoda-header__mega-menu.is-open, a nie w .mega-menu-inner.omoda-container")
       — ten jest full-width (left:0;right:0), więc pasek przewijania ląduje
       przy prawej krawędzi EKRANU, tak jak zwykły scroll strony, zamiast przy
       prawej krawędzi wewnętrznego, 1280px kontenera (gdzie wyglądał obco,
       "w środku" ekranu zamiast na brzegu). */
    max-height: calc(100vh - var(--omoda-header-total-height, var(--omoda-header-height)));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base), visibility 0s var(--omoda-duration-base);
}

/* .omoda-header__mega-menu.is-open (nie .nav-item--mega.is-open .mega-menu
   jak wcześniej) — header.js przenosi ten panel do <body> (patrz komentarz
   tam), więc przestaje być potomkiem <li>; .is-open jest teraz na nim samym. */
.omoda-header__mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base), visibility 0s;
}

.omoda-header__mega-menu-inner {
    /* Bez max-height/overflow-y tutaj — user: "scrollbar ma być wew
       .omoda-header__mega-menu.is-open, a nie w .mega-menu-inner" (patrz
       ten sam mechanizm, przeniesiony na element wyżej). */
    padding-block: 24px 28px;
}

.omoda-header__mega-menu-filter {
    margin-bottom: 18px;
}

/* Ten sam komponent co .omoda-models__filter (klasy reużyte 1:1 przez
   render_filter()), ALE bazowa reguła .omoda-models__filter w models-section.css
   jest position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) —
   zaprojektowana pod wycentrowanie WEWNĄTRZ konkretnego, position:relative
   paska .omoda-models__toolbar-inner o stałej wysokości. Tu (mega menu) nie
   ma takiego kontekstu, więc filtr "wyskakiwał" na środek całego panelu i
   nachodził na karty (zmierzone wprost przez elementsFromPoint po zgłoszeniu
   "rozjebane" — widać było fragmenty "Wszystkie"/"Omoda" między rzędami kart).
   position:static + transform:none sprowadza go z powrotem do normalnego
   przepływu, jako zwykły wiersz nad siatką. */
.omoda-header__mega-menu-filter .omoda-models__filter {
    position: static;
    transform: none;
    margin: 0;
    /* user: "tutaj font ma być 14px max i to bez tła" — bazowe
       .omoda-models__filter ma białą "pigułkę" (background:#fff, padding:3px)
       pod toolbar prawdziwej sekcji Modele; tu, na jasnym tle mega menu
       (#f9f9f9), wyglądało to jak zbędny biały prostokąt na prostokącie. */
    background: transparent;
    padding: 0;
}

.omoda-header__mega-menu-filter .omoda-models__filter-btn {
    font-size: 14px;
}

/* Stałe 4 kolumny (user, druga tura — doprecyzowanie poprzedniego "tyle ile
   się mieści") — te same co w widoku siatki prawdziwej sekcji Modele
   (.omoda-models__grid-track), więc gęstość/rozmiar kart jest spójny w obu
   miejscach. Reszta modeli (piąty, szósty...) zawija się w kolejny wiersz. */
.omoda-header__mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Kompaktowa wersja karty (user: "możesz trochę zmniejszyć wielkości fontów i
   paddingi, żeby ładnie wyglądało jako mega menu") — sama karta to DOKŁADNIE
   ten sam komponent (.omoda-models__card-item z render_grid_card()), tu tylko
   gęściej upakowany. Selektory scoped pod .omoda-header__mega-menu, więc
   siatka w prawdziwej sekcji Modele nigdzie indziej na stronie się nie zmienia. */
.omoda-header__mega-menu .omoda-models__card-item {
    padding: 12px;
}

.omoda-header__mega-menu .omoda-models__card-title {
    font-size: 16px;
}

.omoda-header__mega-menu .omoda-models__price-solo,
.omoda-header__mega-menu .omoda-models__price-sale {
    font-size: 18px;
}

.omoda-header__mega-menu .omoda-models__price-regular {
    font-size: 13px;
}

.omoda-header__mega-menu .omoda-models__omnibus {
    font-size: 11px;
}

.omoda-header__mega-menu .omoda-models__badge {
    font-size: 10px;
    padding: 3px 10px;
}

.omoda-header__mega-menu .omoda-models__card-buttons {
    padding-top: 12px;
    gap: 8px;
}

.omoda-header__mega-menu .omoda-models__card-buttons .omoda-btn {
    height: 38px;
    font-size: 13px !important;
}

/* Poniżej 1024px header i tak chowa całą .omoda-header__nav pod hamburger
   (patrz media query niżej w tym pliku) — mega menu jest więc już zawsze
   niewidoczne tam, gdzie prawdziwy hover nie istnieje (dotyk). Nic dodatkowego
   nie trzeba tu robić poza samym faktem bycia potomkiem .omoda-header__nav. */

/* ---------- Mega menu "Nasze salony" (desktop) + akordeon (mobile) ----------
   render_salon_card() (class-omoda-header.php) generuje RÓŻNY znacznik dla obu
   widoków: desktop to statyczna karta (<div>, siatka .omoda-header__salons-grid,
   białe tło — patrz baza niżej), mobile to WŁASNY, zagnieżdżony akordeon (<li>,
   .omoda-header__salon-card-toggle/-body, lista .omoda-header__salons-list) —
   user: "nie mają być na białym tle tylko mieć tło hamburgera (#121212,
   dziedziczone) bez wew paddingów i radius", "salon od salonu oddzielony
   delikatną linią na 100% szerokości submenu, bez wew separatorów",
   "poszczególne salony mają być accord menu w hamburgerze", "domyślnie
   rozwinięty pierwszy". Nadpisania dla .omoda-header__salons-list niżej, po
   bazowych regułach (myślanych pod białą kartę desktopową). */
/* Border + mocniejszy cień (nie tylko box-shadow 0 2px 10px, za słabe na tle
   #f9f9f9 menu) — user: "karty wyglądają płasko/nijako", karty mają się
   wyraźniej odcinać jako osobne, klikalne kafle. transition+hover — ta sama
   intencja: sprawić, żeby karta czuła się jak interaktywny element, nie tylko
   kawałek tekstu w siatce. */
.omoda-header__salon-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid rgba(18, 18, 18, 0.06);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(18, 18, 18, 0.07);
    padding: 18px;
    transition: box-shadow var(--omoda-transition-base, 0.2s), transform var(--omoda-transition-base, 0.2s);
}

.omoda-header__salon-card:hover {
    box-shadow: 0 10px 28px rgba(18, 18, 18, 0.12);
    transform: translateY(-2px);
}

/* position:relative + padding-right — kotwiczy pulsującą ikonkę komunikatu
   (.omoda-header__salon-card-notices-icon-btn, position:absolute, teraz
   ZAGNIEŻDŻONA wewnątrz tego diva — patrz class-omoda-header.php) i
   wyrównuje ją w pionie do całego bloku nazwa+adres — user: "ikonka powinna
   być wyrównana w pionie [do] omoda-header__salon-card-head". padding-right
   robi miejsce, żeby długa nazwa salonu nie wchodziła pod ikonkę. */
.omoda-header__salon-card-head {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    padding-bottom: 14px;
    padding-right: 40px;
    border-bottom: 1px solid var(--omoda-color-border, #e5e5e5);
}

/* Nazwa + kropka komunikatu w jednej linii — .omoda-header__salon-card-head
   jest column, więc bez tego wrappera kropka wylądowałaby w nowym wierszu. */
.omoda-header__salon-card-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.omoda-header__salon-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--omoda-color-text);
}

/* Pulsująca kropka = wskaźnik aktywnego komunikatu danego salonu w dropdownie
   "Nasze salony" (desktop karta) / mobilnym akordeonie (obok chevron, patrz
   .omoda-header__salon-card-toggle-end niżej) — user: "nie pojawia się ta
   informacja w menu przy salonie", ta sama definicja "aktywnego komunikatu"
   co w akordeonie na /kontakt/ (Omoda_Salons_Section::active_notice_color()).
   Pulsowanie = gasnący pierścień tego samego koloru, nie zmiana tła kropki —
   identyczny wzorzec co .omoda-salons__trigger-notice-dot (salons-section.css). */
.omoda-header__salon-notice-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--omoda-salons-notice-color, #d81f26);
    animation: omoda-header-notice-pulse 1.8s ease-in-out infinite;
}

@keyframes omoda-header-notice-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 55%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 0%, transparent);
    }
}

.omoda-header__salon-card-address {
    font-size: 13px;
    line-height: 1.4;
    color: var(--omoda-color-text-muted);
}

/* Salon/Serwis JEDNO POD DRUGIM (user: "to miało być jedno pod drugim") —
   nie dwie kolumny obok siebie, tylko pionowy stos obu bloków, tak samo na
   desktopie i mobile (ta sama, współdzielona klasa). */
.omoda-header__salon-card-hours {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.omoda-header__salon-card-hours-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--omoda-color-text-muted);
}

.omoda-header__salon-card-hours-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--omoda-color-text);
    margin-bottom: 2px;
}

/* Ikonka komunikatu = zwykły <button> (NIE <summary>/<details>) — user: "po
   kliknięciu w ikonę ma pojawić się tak jak wcześniej się pojawiał, a nie że
   nagłówek powiększa się na wysokości". JS (header.js) przełącza
   aria-expanded + .is-open oraz [hidden] na #%aria-controls (SIOSTRZE
   .omoda-header__salon-card-head, patrz class-omoda-header.php) — rozwinięcie
   nie dotyka wysokości heada.
   position:absolute względem .omoda-header__salon-card-head (position:relative)
   — top:50%/translateY(-50%) wyśrodkowuje ikonkę w pionie do CAŁEGO bloku
   nazwa+adres — user: "ikonka powinna być wyrównana w pionie [do]
   omoda-header__salon-card-head, tak aby była wyrównana w pionie do
   Kraków/adres". Pastelowe tło w kolorze komunikatu (color-mix z białym) —
   user wcześniej: "zobacz komunikat musi być na tle koloru [...] tylko
   pastelowy".
   !important na display/border/border-radius/background — teraz, gdy to
   zwykły <button type="button"> (nie <summary>, który motyw nie dotyka),
   wchodzi w ten sam, udokumentowany w tym pliku konflikt z resetem motywu
   ([type="button"]{border:1px solid #c36;border-radius:3px}, taka sama
   specyficzność, ładuje się PO header.css) — bez !important na display
   wewnętrzny <span> (mask-image ikony) jako zwykły inline tracił
   width/height i znikał, a bez !important na border/background button
   zostawał z różowym obrysem/tłem motywu zamiast koloru komunikatu. */
.omoda-header__salon-card-notices-icon-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(calc(-50% - 5px));
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 18%, #ffffff) !important;
    cursor: pointer;
    animation: omoda-header-notices-icon-pulse 2.2s ease-in-out infinite;
}

/* Pulsowanie DELIKATNE (user) — gasnący pierścień węższy/wolniejszy niż przy
   małej kropce (.omoda-header__salon-notice-dot, 1.8s/6px) — większa,
   stałoobecna ikonka nie powinna migać agresywnie. Zatrzymane po rozwinięciu
   (.is-open, dodawane przez header.js) — gdy komunikat już widoczny,
   pulsowanie byłoby tylko rozpraszające. */
@keyframes omoda-header-notices-icon-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 35%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 0%, transparent);
    }
}

.omoda-header__salon-card-notices-icon-btn.is-open {
    animation: none;
    background: color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 30%, #ffffff) !important;
}

/* Ikona "info" jako mask-image pokolorowany na pełny (nie pastelowy) kolor
   komunikatu — ten sam wzorzec/SVG co .omoda-salons__notice-icon niżej w tym
   pliku, tu zawsze "info" niezależnie od ikony wybranej per-komunikat w
   wp-adminie (ta ikonka w rogu to ogólny wskaźnik "jest tu info", nie
   odzwierciedla wyboru ikony danego komunikatu). */
.omoda-header__salon-card-notices-icon {
    width: 16px;
    height: 16px;
    background-color: var(--omoda-salons-notice-color, #d81f26);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

/* Rozwinięta treść komunikatu (po kliknięciu ikonki) — SIOSTRA heada, patrz
   class-omoda-header.php — [hidden] to natywny atrybut przełączany przez
   header.js, bez potrzeby własnej reguły display. */
.omoda-header__salon-card-notices-reveal {
    margin-bottom: 14px;
}

/* Tooltip pierwszej wizyty (header.js dodaje/zdejmuje .is-visible na
   podstawie localStorage per salon) — user: "jak klient pierwszy raz
   otwiera to od [ikonki] ma być tooltip (można go zamknąć, zapamiętuje w
   localStorage) komunikat ma być na tooltipie". Dymek "pod" ikonką (SIOSTRĄ
   .omoda-header__salon-card-notices-icon-btn, oba dzieci position:relative
   .omoda-header__salon-card-head) — widoczny niezależnie od stanu rozwinięcia
   ikonki, więc pokazuje się OD RAZU, zanim użytkownik cokolwiek kliknie.
   z-index:5 — nad resztą treści karty (godziny/przyciski), gdyby dymek
   nachodził na nie przy krótszym komunikacie. Treść UPROSZCZONA — user: "ten
   tooltip to ma być tam 'Komunikat' tylko sama informacja i jest rozjebany"
   — zwykły tekst (tytuł + headline/text z wp-admina), bez ciężkiego markupu
   ikony/gradientu .omoda-salons__notice (ten, myślany pod szerszą
   kartę/panel, w wąskim dymku wyglądał połamany). */
.omoda-header__salon-card-notices-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
    margin-top: 10px;
    padding: 10px 14px;
    background: #121212;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(18, 18, 18, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--omoda-transition-base, 0.2s), transform var(--omoda-transition-base, 0.2s), visibility 0s var(--omoda-transition-base, 0.2s);
}

.omoda-header__salon-card-notices-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--omoda-transition-base, 0.2s), transform var(--omoda-transition-base, 0.2s), visibility 0s;
}

/* Strzałka wskazująca ikonkę nad dymkiem. */
.omoda-header__salon-card-notices-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: #121212;
    transform: rotate(45deg);
}

/* Napis "Komunikat" — STAŁY, jednakowy dla każdej karty (nie treść
   konkretnego komunikatu, patrz komentarz w class-omoda-header.php) — flex:1
   + text-align:center, żeby był wyśrodkowany w dymku mimo przycisku "×" po
   prawej (user: "sam napis KOMUNIKAT [...] biały wyśrodkowany w tooltipie"). */
.omoda-header__salon-card-notices-tooltip-label {
    flex: 1 1 auto;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
}

/* !important na border/border-radius/background — ten sam konflikt z resetem
   motywu [type="button"] co przy -icon-btn wyżej. Jasne tło (nie ciemne jak
   wszędzie indziej w tym pliku) — dymek sam w sobie jest już czarny. */
.omoda-header__salon-card-notices-tooltip-close {
    flex: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--omoda-transition-fast, 0.15s);
}

.omoda-header__salon-card-notices-tooltip-close:hover,
.omoda-header__salon-card-notices-tooltip-close:focus-visible {
    opacity: 1;
}

/* E-mail Salon/Serwis (user: "brakuje salon / serwis email") — przycisk
   "Pokaż e-mail" + po kliknięciu wstawiony przez JS link/"Kopiuj" (header.js,
   reveal przez AJAX, patrz salon_email_reveal_html() w PHP — adres NIGDY nie
   trafia do źródła HTML, tak samo jak w [omoda_salons]). Kolor dziedziczony
   z .omoda-header__salon-card-hours-col (szary na desktopie, nadpisany na
   jasny w .omoda-header__salons-list niżej). */
.omoda-header__salon-card-email {
    margin-top: 2px;
}

/* "Pokaż e-mail"/"Kopiuj" jako pigułka — TEN SAM styl co na /kontakt/
   (.omoda-salons__email-reveal/-copy, salons-section.css) — user: "pokaż
   mail ma wyglądać przycisk tak jak w kontakt" (wcześniej: podkreślony link
   dziedziczący kolor otoczenia, niespójny z resztą strony).
   !important na większości właściwości — reset.css motywu narzuca
   [type="button"] z IDENTYCZNĄ specyficznością co pojedyncza klasa i ładuje
   się PO header.css (ten sam, udokumentowany problem co przy
   .omoda-header__salon-card-toggle wyżej).
   display BEZ !important (jedyny wyjątek) — header.js chowa przycisk po
   odsłonięciu e-maila przez zwykłe revealBtn.style.display='none' (bez
   !important po stronie JS); !important w tej regule bijłoby ten inline
   style i przycisk zostawałby widoczny OBOK odsłoniętego adresu zamiast
   zniknąć w tym samym miejscu — user: "po kliknięciu pokaż mail powinien
   mail pojawiać się w tym miejscu a przycisk 'pokaż mail' ukryć". Sam
   motyw i tak nie koliduje akurat na tej właściwości (inline-block z resetu
   nie psuje wyglądu pigułki na tyle, żeby trzeba było go bić !important). */
.omoda-header__salon-card-email-reveal,
.omoda-header__salon-card-email-copy {
    display: inline-flex;
    align-items: center;
    background: rgba(18, 18, 18, 0.06) !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-family: var(--omoda-font-base, inherit) !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--omoda-color-text) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--omoda-transition-fast, 0.15s);
}

.omoda-header__salon-card-email-reveal:hover,
.omoda-header__salon-card-email-reveal:focus-visible,
.omoda-header__salon-card-email-copy:hover,
.omoda-header__salon-card-email-copy:focus-visible {
    background-color: rgba(18, 18, 18, 0.12) !important;
}

.omoda-header__salon-card-email-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.omoda-header__salon-card-email-link {
    font-size: 12.5px;
    font-weight: 600;
    word-break: break-all;
    color: var(--omoda-color-text) !important;
    text-decoration: none !important;
}

.omoda-header__salon-card-email-copy {
    margin-left: 0;
}

.omoda-header__salon-card-email-copy.is-copied {
    background: var(--omoda-color-text) !important;
    color: #ffffff !important;
}

.omoda-header__salon-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--omoda-color-border, #e5e5e5);
}

/* Czarny, nie niebieski (--omoda-color-link) — user: "robimy to kolorem
   czarnym a nie niebieskim", spójnie z .omoda-salons__directions
   (salons-section.css) i Sieć w Serwisie (service.css). */
.omoda-header__salon-card-directions {
    font-size: 13px;
    font-weight: 600;
    color: var(--omoda-color-text) !important;
    text-decoration: none !important;
}

.omoda-header__salon-card-directions:hover {
    text-decoration: underline !important;
}

/* Kompaktowy przycisk "Kontakt" w karcie — te same wymiary co przyciski kart
   modeli w mega menu (spójność obu mega menu w headerze). Core .omoda-btn--primary
   jest myślany pod ciemne tło (hero/header): białe wypełnienie/tekst — na
   białej karcie salonu byłby niewidoczny (białe na białym, patrz dokładnie
   ten sam problem i odwrócenie kolorów w .omoda-models__card-item .omoda-btn--primary,
   models-section.css). */
.omoda-header__salon-card-contact {
    flex-shrink: 0;
    height: 38px;
    padding: 0 18px !important;
    font-size: 13px !important;
    background-color: #121212;
    border-color: #121212;
    color: #ffffff !important;
}

.omoda-header__salon-card-contact:hover,
.omoda-header__salon-card-contact:focus {
    background-color: #2b2b2b !important;
    border-color: #2b2b2b !important;
    color: #ffffff !important;
}

/* Siatka (desktop, wew. .omoda-header__mega-menu--salons) — auto-fill zamiast
   sztywnych 4 kolumn (jak przy modelach): karty salonów mają dużo więcej
   treści (adres + 2 kolumny godzin), więc potrzebują więcej miejsca niż karta
   modelu — przy 1280px kontenerze wychodzą 3 kolumny, zawijanie automatyczne
   gdy salonów przybędzie. */
.omoda-header__salons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Lista (mobile, akordeon) — te same karty, ułożone w kolumnie z odstępem
   zamiast siatki; .omoda-header__dropdown-list (bazowa reguła wyżej) daje już
   margin/padding:0 i list-style:none, tu tylko spacing między kartami. */
.omoda-header__salons-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---------- Mobile: nadpisania kart salonów jako akordeon ----------
   Zastępuje bazowe "białą kartą" .omoda-header__salon-card wyżej (ta zostaje
   bez zmian dla desktopu) — tu karta to tylko <li> bez własnego tła/paddingu,
   treść dostaje padding przez -toggle/-body (żeby linia-separator niżej
   sięgała od krawędzi do krawędzi submenu). */
.omoda-header__salons-list .omoda-header__salon-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: auto;
}

/* Linia między salonami na 100% szerokości submenu (user: "salon od salonu
   oddzielony delikatną linią na 100% szerokości submenu") — ostatni salon jej
   nie ma, sąsiaduje już z resztą panelu mobilnego. */
.omoda-header__salons-list .omoda-header__salon-card:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Nazwa salonu = przycisk rozwijający (header.js, .omoda-header__salon-card-toggle)
   — te same wymiary/typografia co .omoda-header__nav-toggle wyżej, żeby
   zagnieżdżony akordeon wyglądał spójnie z tym nadrzędnym ("Nasze salony"). */
/* !important na display/padding/text-align — reset.css motywu narzuca
   [type="button"] z IDENTYCZNĄ specyficznością co pojedyncza klasa, a ładuje
   się PO header.css (ten sam, udokumentowany problem co przy .omoda-btn w
   omoda-core.css). Brak !important na padding dawał w efekcie 16px Z OBU
   STRON (reset motywu, nie nasze 16px 0) — user: "strzałki/nazwa accordmenu
   na równo w pionie z nawigacją" — te 16px przesuwały nazwę w prawo i
   chevron w lewo względem reszty mobilnego menu. font-weight:400 (nie 700,
   user: "accord menu title nie ma być bold") — nadpisuje .omoda-header__salon-card-name
   niżej (ta sama klasa co w desktopowej, pogrubionej karcie). */
.omoda-header__salon-card-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 16px 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    text-align: left !important;
    cursor: pointer;
}

.omoda-header__salon-card-toggle .omoda-header__salon-card-name {
    font-weight: 400;
}

/* Grupuje kropkę komunikatu + chevron jako JEDEN flex item po prawej —
   .omoda-header__salon-card-toggle ma justify-content:space-between na dwóch
   dzieciach (name / toggle-end), dodanie kropki jako trzeciego bezpośredniego
   dziecka rozjechałoby układ na 3 kolumny (ten sam problem/rozwiązanie co
   .omoda-salons__trigger-end w salons-section.css). */
.omoda-header__salon-card-toggle-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* Pełna treść komunikatu salonu w menu headera (desktop karta + mobile
   akordeon) — user: "jak mam info dodatkowe komunikat to chcę aby był on
   pełny w menu headerze". Reużywa DOKŁADNIE te same klasy co
   Omoda_Salons_Section::notices_html() na /kontakt/ (salons-section.css),
   więc identyczny markup (.omoda-salons__notice, -icon, -body, -headline,
   -text), ale zduplikowany tu styl — ten panel ładuje TYLKO header.css, nie
   salons-section.css omoda-salons. */
.omoda-header__salon-card-notices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.omoda-header__salon-card-notices .omoda-salons__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 14%, transparent) 0%, transparent 70%);
    border-radius: 4px;
    padding: 10px 14px;
}

.omoda-header__salon-card-notices .omoda-salons__notice-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background-color: var(--omoda-salons-notice-color, #d81f26);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.omoda-header__salon-card-notices .omoda-salons__notice--info .omoda-salons__notice-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.omoda-header__salon-card-notices .omoda-salons__notice--danger .omoda-salons__notice-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.omoda-header__salon-card-notices .omoda-salons__notice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.omoda-header__salon-card-notices .omoda-salons__notice-headline {
    display: block;
    font-size: 13px;
    color: var(--omoda-color-text);
}

.omoda-header__salon-card-notices .omoda-salons__notice-text {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--omoda-color-text-muted);
}

/* Limit 150 znaków + "Rozwiń więcej" — ten sam markup/zasada co
   Omoda_Salons_Section::notice_text_html() (salons-section.css), tu
   zduplikowany bo ten panel ładuje tylko header.css. */
.omoda-header__salon-card-notices .omoda-salons__notice-text-excerpt,
.omoda-header__salon-card-notices .omoda-salons__notice-text-rest {
    margin: 0;
}

.omoda-header__salon-card-notices .omoda-salons__notice-more {
    margin-top: 4px;
}

.omoda-header__salon-card-notices .omoda-salons__notice-more summary {
    display: inline-block;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--omoda-salons-notice-color, #d81f26);
    list-style: none;
}

.omoda-header__salon-card-notices .omoda-salons__notice-more summary::-webkit-details-marker {
    display: none;
}

.omoda-header__salon-card-notices .omoda-salons__notice-more summary::marker {
    content: '';
}

.omoda-header__salon-card-notices .omoda-salons__notice-more .omoda-salons__notice-more-label-less {
    display: none;
}

.omoda-header__salon-card-notices .omoda-salons__notice-more[open] .omoda-salons__notice-more-label-more {
    display: none;
}

.omoda-header__salon-card-notices .omoda-salons__notice-more[open] .omoda-salons__notice-more-label-less {
    display: inline;
}

.omoda-header__salon-card-notices .omoda-salons__notice-more .omoda-salons__notice-text-rest {
    margin-top: 6px;
}

/* .omoda-header na początku selektora (4 klasy) — ta sama specyficzność (0,3,0)
   co .omoda-header__nav-item--dropdown.is-open .omoda-header__chevron niżej w
   tym pliku (reguła "zamknij wszystkie" dla NADRZĘDNEGO akordeonu "Nasze
   salony") doprowadzałaby do remisu rozstrzyganego kolejnością w pliku — ta
   reguła przyszłaby PO tej tutaj i wygrywałaby, obracając chevron KAŻDEGO
   (także zwiniętego) salonu, gdy tylko "Nasze salony" samo jest otwarte. */
.omoda-header .omoda-header__salons-list .omoda-header__salon-card-toggle .omoda-header__chevron {
    color: rgba(255, 255, 255, 0.6);
    transform: rotate(0deg);
}

.omoda-header .omoda-header__salons-list .omoda-header__salon-card.is-open .omoda-header__salon-card-toggle .omoda-header__chevron {
    transform: rotate(180deg);
}

/* padding-top 8px (nie 0) — user: "brakuje paddingu wew od góry w otwartym
   accord menu" — bez tego treść zaczynała się od razu pod linią triggera. */
.omoda-header__salon-card-body {
    display: none;
    padding: 8px 0 18px;
}

.omoda-header__salon-card.is-open .omoda-header__salon-card-body {
    display: block;
}

/* Treść karty na ciemnym tle panelu — kolory jasne zamiast domyślnych
   ciemnych z bazowych reguł wyżej (myślanych pod białą kartę desktopową). */
.omoda-header__salons-list .omoda-header__salon-card-name {
    color: #ffffff;
}

.omoda-header__salons-list .omoda-header__salon-card-address {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 14px;
}

.omoda-header__salons-list .omoda-header__salon-card-hours-label {
    color: #ffffff;
}

.omoda-header__salons-list .omoda-header__salon-card-hours-col {
    color: rgba(255, 255, 255, 0.75);
}

.omoda-header__salons-list .omoda-header__salon-card-notices .omoda-salons__notice-headline {
    color: #ffffff;
}

.omoda-header__salons-list .omoda-header__salon-card-notices .omoda-salons__notice-text {
    color: rgba(255, 255, 255, 0.75);
}

/* Pigułka "Pokaż e-mail"/"Kopiuj" na ciemnym tle panelu mobilnego — jasne
   tło/tekst zamiast domyślnych ciemnych z bazowej reguły wyżej (ta sama
   zasada co hours-label/-col i notices tuż powyżej, myślana pod białą kartę
   desktopową). Bez tego: ciemny tekst na rgba(18,18,18,0.06) byłby
   praktycznie niewidoczny na #121212 tle panelu. */
.omoda-header__salons-list .omoda-header__salon-card-email-reveal,
.omoda-header__salons-list .omoda-header__salon-card-email-copy {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.omoda-header__salons-list .omoda-header__salon-card-email-reveal:hover,
.omoda-header__salons-list .omoda-header__salon-card-email-reveal:focus-visible,
.omoda-header__salons-list .omoda-header__salon-card-email-copy:hover,
.omoda-header__salons-list .omoda-header__salon-card-email-copy:focus-visible {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.omoda-header__salons-list .omoda-header__salon-card-email-link {
    color: #ffffff !important;
}

.omoda-header__salons-list .omoda-header__salon-card-email-copy.is-copied {
    background: #ffffff !important;
    color: var(--omoda-color-text) !important;
}

/* "bez wew separatorów" — usuwamy górną linię nad przyciskami (myślaną pod
   jasne tło karty desktopowej, patrz baza .omoda-header__salon-card-actions
   wyżej); salon ma już swoją JEDNĄ linię na dole całej karty (patrz wyżej).
   Kolumna zamiast rzędu + oba przyciski 100% szerokości (user: "jak dojechać
   przycisk ma być outline na 100% szer i pod spodem na 100% szerokości
   Formularz") — TYLKO mobile, desktop zostaje bez zmian (przyciski obok
   siebie w jednym rzędzie, patrz baza wyżej). */
.omoda-header__salons-list .omoda-header__salon-card-actions {
    flex-direction: column;
    align-items: stretch;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    gap: 10px;
}

/* "Jak dojechać" jako przycisk outline (nie goły link) — te same kolory co
   .omoda-btn--outline (omoda-core.css: biały tekst/obrys na przezroczystym
   tle, myślane pod ciemne tło) odtworzone wprost tutaj zamiast doklejać
   klasy .omoda-btn/.omoda-btn--outline w PHP — ten sam znacznik (render_salon_card())
   jest współdzielony z desktopem, gdzie "Jak dojechać" ma zostać zwykłym,
   wąskim linkiem (user: "tylko mobile"); domalowanie klas .omoda-btn na
   stałe zepsułoby TAMTEN wygląd (biały przycisk na jasnej karcie = niewidoczny). */
.omoda-header__salons-list .omoda-header__salon-card-directions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: #ffffff !important;
    font-weight: 600;
}

.omoda-header__salons-list .omoda-header__salon-card-directions:hover {
    color: #ffffff !important;
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Przycisk "Formularz" — baza .omoda-header__salon-card-contact niżej odwraca
   kolory .omoda-btn--primary pod BIAŁĄ kartę desktopową (ciemne wypełnienie);
   tu karta sama jest już ciemna, więc wracamy do domyślnych (jasnych)
   kolorów .omoda-btn--primary, myślanych właśnie pod ciemne tło. Pełna
   szerokość (user: "Formularz na 100% szerokości pod spodem") — inline-flex
   bazowego .omoda-btn i tak respektuje jawne width. */
.omoda-header__salons-list .omoda-header__salon-card-contact {
    width: 100%;
    background-color: var(--omoda-btn-primary-bg);
    border-color: var(--omoda-btn-primary-border);
    color: var(--omoda-btn-primary-text) !important;
}

.omoda-header__salons-list .omoda-header__salon-card-contact:hover,
.omoda-header__salons-list .omoda-header__salon-card-contact:focus {
    background-color: var(--omoda-btn-primary-bg-hover);
    border-color: var(--omoda-btn-primary-bg-hover);
    color: var(--omoda-btn-primary-text) !important;
}

/* Przyciski akcji (desktop) — Figma: KONTAKT (obrys) + numer telefonu (biały/solid) */
.omoda-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.omoda-header__action-btn {
    padding: 0 30px !important;
    height: 44px;
    font-size: 14px !important;
    white-space: nowrap;
    /* w Figmie przyciski headera nie mają cienia (to był tylko wariant hero slidera) */
    box-shadow: none !important;
}

/* Hamburger */
.omoda-header__hamburger {
    /* reset.css motywu: [type="button"] ma tę samą specyficzność co pojedyncza klasa */
    display: none !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    flex-shrink: 0;
}

.omoda-header__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform var(--omoda-transition-base), opacity var(--omoda-transition-base);
}

.omoda-header.is-menu-open .omoda-header__hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.omoda-header.is-menu-open .omoda-header__hamburger span:nth-child(2) {
    opacity: 0;
}

.omoda-header.is-menu-open .omoda-header__hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Belka informacyjna — domyślnie na mobile I desktop, per-belka może być ograniczona
   do jednego kontekstu (.omoda-header__banner--mobile-only/--desktop-only). Kolor tła
   i tekstu ustawiane z adminu przez zmienne --omoda-banner-bg/--omoda-banner-text inline. */
.omoda-header__banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 40px 10px 16px;
    background: var(--omoda-banner-bg, var(--omoda-color-dark, #121212));
    color: var(--omoda-banner-text, #ffffff);
    font-size: 13px;
    text-align: center;
    position: relative;
}

.omoda-header__banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.omoda-header__banner-text {
    color: inherit;
    text-decoration: none !important;
}

/* Link belki to MAŁY PRZYCISK obok tekstu (sam tekst nie jest linkiem — bez niebieskiego podkreślenia
   po najechaniu). !important: motyw nadaje linkom własny kolor/podkreślenie. */
.omoda-header__banner-btn {
    display: inline-flex !important;
    align-items: center;
    padding: 4px 14px !important;
    border: 1px solid currentColor !important;
    border-radius: 4px;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    white-space: nowrap;
    background: none !important;
    box-shadow: none !important;
    transition: background-color var(--omoda-transition-fast), color var(--omoda-transition-fast), opacity var(--omoda-transition-fast);
}

.omoda-header__banner-btn:hover,
.omoda-header__banner-btn:focus-visible {
    color: inherit !important;
    text-decoration: none !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

/* Krzyżyk zamykania — w okrągłym tle: białe (ciemny krzyżyk) albo czarne (biały krzyżyk), wybór w adminie. */
.omoda-header__banner-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--omoda-transition-fast), transform var(--omoda-transition-fast);
}

.omoda-header__banner-close--white {
    background: #ffffff !important;
    color: #121212 !important;
}

.omoda-header__banner-close--black {
    background: #121212 !important;
    color: #ffffff !important;
}

.omoda-header__banner-close:hover,
.omoda-header__banner-close:focus-visible {
    opacity: 0.85;
    transform: translateY(-50%) scale(1.08);
}

.omoda-header__banner.is-dismissed {
    display: none;
}

@media (min-width: 1025px) {
    .omoda-header__banner--mobile-only {
        display: none;
    }
}

@media (max-width: 1024px) {
    .omoda-header__banner--desktop-only {
        display: none;
    }
}

/* Panel mobilny */
.omoda-header__mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    transition: opacity var(--omoda-transition-base), visibility 0s var(--omoda-duration-base);
}

.omoda-header__mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 85vw);
    background: #121212;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    padding: 90px 24px 24px;
    transform: translateX(100%);
    transition: transform var(--omoda-transition-base);
    overflow-y: auto;
}

.omoda-header.is-menu-open .omoda-header__mobile-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--omoda-transition-base), visibility 0s;
}

.omoda-header.is-menu-open .omoda-header__mobile-panel {
    transform: translateX(0);
}

.omoda-header__mobile-nav-list {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.omoda-header__mobile-nav-list .omoda-header__nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* font-weight 600 !important — user: "główne item w nawigacji w hamburgerze
   mają być semibold"; !important konieczny, bo baza .omoda-header__nav-link
   (wyżej) narzuca font-weight:400 !important (reset.css motywu, patrz jej
   komentarz), sama wyższa specyficzność (dwie klasy) by tu nie wystarczyła. */
.omoda-header__mobile-nav-list .omoda-header__nav-link,
.omoda-header__mobile-nav-list .omoda-header__nav-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600 !important;
    opacity: 1;
}

.omoda-header__nav-toggle {
    font-family: inherit;
}

.omoda-header__mobile-nav-list .omoda-header__dropdown-list {
    display: none;
    padding: 0 0 14px;
}

.omoda-header__nav-item--dropdown.is-open .omoda-header__dropdown-list {
    display: block;
}

.omoda-header__nav-item--dropdown.is-open .omoda-header__chevron {
    transform: rotate(180deg);
}

.omoda-header__mobile-nav-list .omoda-header__dropdown-list li a,
.omoda-header__mobile-nav-list .omoda-header__dropdown-list li.omoda-header__dropdown-empty {
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.5px;
}

/* Dotyk nie ma realnego hover — usuwamy podświetlenie desktopowe (jasne tło) w submenu panelu mobilnego */
.omoda-header__mobile-nav-list .omoda-header__dropdown-list li a:hover {
    background: none;
}

.omoda-header__mobile-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.omoda-header__mobile-actions .omoda-btn {
    width: 100%;
}

@media (min-width: 1025px) {
    body.omoda-header-no-scroll {
        overflow: visible !important;
    }
}

@media (max-width: 1024px) {
    .omoda-header__nav,
    .omoda-header__actions {
        display: none;
    }

    .omoda-header__hamburger {
        display: flex !important;
        margin-left: auto;
    }

    .omoda-header__inner {
        height: var(--omoda-header-height-mobile);
        padding-inline: 20px;
    }

    .omoda-header__logo img {
        max-height: 36px !important;
    }
}

body.omoda-header-no-scroll {
    overflow: hidden;
}

/* Blokada scrolla STRONY, gdy mega menu "Modele" jest otwarte — user: "jak
   otwieram to body nie scrolluje a scrolluje mi dropdown". Osobna klasa od
   .omoda-header-no-scroll (ta ma działać na desktopie — .omoda-header-no-scroll
   jest tam celowo wyłączane, patrz @media(min-width:1025px) wyżej, bo była
   pomyślana pod panel mobilny, który na desktopie nigdy się nie otwiera). */
@media (min-width: 1025px) {
    body.omoda-header-mega-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .omoda-header,
    .omoda-header__bar-outer,
    .omoda-header__bar,
    .omoda-header__mobile-panel,
    .omoda-header__mobile-backdrop,
    .omoda-header__dropdown,
    .omoda-header__hamburger span {
        transition: none !important;
    }
}

/* ---------- Laptopy (1025–1600 px): nagłówek skaluje się płynnie wraz z szerokością okna ----------
   Pełne rozmiary (logo 54 px, menu 14 px, przyciski 44 px) są dla szerokich monitorów. Na węższych oknach (laptopy,
   także Windows ze skalowaniem 125–150%) logo, menu i przyciski zmniejszają się proporcjonalnie, żeby nic się nie
   ściskało ani nie zawijało. Wartości liczone od vw: przy 1600 px dają dokładnie dotychczasowe rozmiary. Wyższa waga
   selektorów i !important zgodnie z regułami bazowymi wyżej (reset.css motywu). */
@media (min-width: 1025px) and (max-width: 1600px) {
    :root {
        --omoda-header-height: clamp(68px, 5.2vw, 80px);
    }

    .omoda-header__inner {
        padding-inline: clamp(16px, 2vw, 32px);
        gap: clamp(10px, 1vw, 16px);
    }

    .omoda-header__logo img {
        max-height: clamp(34px, 3.4vw, 54px) !important;
    }

    .omoda-header__nav-list {
        gap: clamp(12px, 1.4vw, 22px);
    }

    .omoda-header__nav-link {
        font-size: clamp(12px, 0.95vw, 14px) !important;
    }

    .omoda-header__actions {
        gap: clamp(8px, 0.9vw, 14px);
    }

    .omoda-header__action-btn {
        height: clamp(36px, 2.9vw, 44px);
        padding: 0 clamp(14px, 1.9vw, 30px) !important;
        font-size: clamp(12px, 0.95vw, 14px) !important;
    }
}