/* ============================================================
   Dodatki do naglowka i stopki z makiety.
   Ladowane na KAZDEJ stronie - i na glownej, i na podstronach
   Oxygena - bo naglowek jest wszedzie ten sam.
   ============================================================ */

/* --- 1. Ochrona kolorow tekstu -------------------------------
   Granatowy pasek (.bmx-top) i stopka (.bmx-ft) ustawiaja kolor
   na kontenerze, a linki w srodku go DZIEDZICZA - makieta nie
   nadaje im wlasnego koloru. Oxygen ma globalne 'a { color:#000 }',
   ktore bije dziedziczenie i wstawia czarny tekst na granacie.

   :where() celowo - selektor ma zerowa wage, wiec przebija samo 'a'
   Oxygena, ale przegrywa z KAZDA regula makiety, ktora swiadomie
   nadaje linkowi kolor (np. .bmx-ft__addr a). Nic nie psujemy. */
/* Podkreslenia gasimy globalnie - makieta nie chce ich nigdzie poza dwoma
   miejscami, ktore przywracamy na koncu tej sekcji. */
.bmx :where(a) {
    text-decoration: none;
}

/* Koloru NIE resetujemy globalnie.
   Poprzednia wersja miala tu '.bmx :where(a){color:inherit}' i psula przyciski:
   .bmx-btn ustawia 'color:var(--fg)' (biel) rowniez z waga (0,1,0), a ten plik
   laduje sie PO bm-newhome.css - wiec przy remisie wygrywala moja regula
   i bialy napis na czerwonym tle znikal.

   Reset stosujemy tylko tam, gdzie makieta swiadomie polega na dziedziczeniu,
   czyli w granatowych obszarach (pasek gorny i stopka), i z pominieciem
   przyciskow - w samym naglowku sa dwa. Menu w bialym pasku resetu nie
   potrzebuje, bo .bmx-nav>li>a ma wlasny kolor z waga (0,1,2). */
.bmx .bmx-top :where(a:not([class*="bmx-btn"])),
.bmx .bmx-ft :where(a:not([class*="bmx-btn"])) {
    color: inherit;
}

/* Stan hover trzeba obsluzyc osobno: Oxygen ma
   'a:hover {color:#ba0c2c; text-decoration:underline}', a pseudoklasa
   podnosi wage do (0,1,1) - wiec regula bazowa (0,1,0) tego nie lapala
   i podkreslenie wracalo pod kursorem. '.bmx :where(a):hover' ma (0,2,0)
   i wygrywa. Celowo NIE ruszamy tu koloru, zeby nie nadpisac wlasnych
   stanow hover makiety (np. .bmx-icon:hover). */
.bmx :where(a):hover,
.bmx :where(a):focus {
    text-decoration: none;
}

/* W granatowym pasku hover Oxygena (#ba0c2c) jest nieczytelny -
   tam wymuszamy dziedziczenie koloru. Przyciski pomijamy, bo maja
   wlasne stany hover. */
.bmx .bmx-top :where(a:not([class*="bmx-btn"])):hover {
    color: inherit;
}

/* Makieta ma dwa SWIADOME podkreslenia - przywracamy je z wyzsza waga,
   zeby powyzsze reguly ich nie skasowaly. */
.bmx .bmx-nl__ok a,
.bmx .bmx-nl__ok a:hover,
.bmx .bmx-ft__addr > a:first-child,
.bmx .bmx-ft__addr > a:first-child:hover {
    text-decoration: underline;
}

/* --- 2. Wyszukiwarka produktow ------------------------------
   Element spoza makiety - przeniesiony z mega-menu Oxygena.

   UWAGA na uklad: NIE opieramy sie tu na flexboksie. Wczesniejsza
   wersja uzywala display:flex i mimo poprawnych regul ikona ladowala
   pod polem. Teraz pole jest zwyklym inline-blockiem o stalej
   szerokosci, a przycisk jest pozycjonowany absolutnie w jego prawym
   marginesie wewnetrznym. Dzieki temu ikona nie moze znalezc sie
   ponizej pola nawet, gdy jakas obca regula nadpisze 'display'.
   Wysokosc jest podana wprost, wiec pasek nie moze tez urosnac. */
/* Prawa strona paska gornego rozciagala sie w pionie - ustalamy wysokosc,
   zeby formularz jej nie rozpychal. */
.bmx .bmx-top__r {
    height: 35px !important;
    align-items: center;
}

.bmx .bmx-search {
    position: relative !important;
    display: inline-block !important;
    box-sizing: border-box;
    width: auto !important;
    height: 30px !important;
    margin: 0 18px 0 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    vertical-align: middle;
    line-height: 1;
    overflow: hidden;
}

.bmx .bmx-search input[type="search"] {
    box-sizing: border-box;
    display: block !important;
    float: none !important;
    width: 168px !important;
    height: 28px !important;
    min-height: 0;
    max-width: none;
    margin: 0 !important;
    /* Miejsce na ikone po LEWEJ stronie pola. */
    padding: 0 12px 0 32px !important;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit;
    font: inherit;
    font-size: 12px;
    line-height: 28px;
    -webkit-appearance: none;
    appearance: none;
}

.bmx .bmx-search input[type="search"]::-webkit-search-decoration,
.bmx .bmx-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.bmx .bmx-search input[type="search"]::placeholder {
    color: currentColor;
    opacity: .6;
}

.bmx .bmx-search button {
    box-sizing: border-box;
    /* Ikona po LEWEJ stronie pola. */
    position: absolute !important;
    top: 50% !important;
    left: 4px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px;
    /* Oxygen (normalize.css) ustawia '-webkit-appearance: button' na kazdym
       <button>, przez co przegladarka rysuje NATYWNY przycisk z wlasnym tlem -
       na ciemnym motywie systemu wychodzilo czarne kolo. Samo 'background'
       tego nie gasi, trzeba zdjac natywny wyglad. Widoczne bylo tylko na
       podstronach, bo na stronie glownej wycinamy CSS Oxygena. */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    transition: background .2s ease;
}

.bmx .bmx-search button:hover {
    background: rgba(255, 255, 255, .18) !important;
}

/* Ikona jest rysowana konturem (stroke), nie wypelnieniem. 'fill="none"' to
   atrybut prezentacyjny, ktory przegrywa z KAZDA regula CSS - dlatego
   powtarzamy go tutaj, zeby obca regula nie zamalowala kola na czarno. */
.bmx .bmx-search button svg {
    display: block;
    width: 14px;
    height: 14px;
    fill: none !important;
    stroke: currentColor;
}

/* Ukryte pole post_type nie moze zajmowac miejsca ani rozpychac paska. */
.bmx .bmx-search input[type="hidden"] {
    display: none !important;
    position: absolute !important;
}

/* Ponizej tej szerokosci pasek gorny chowa czesc pozycji -
   wyszukiwarka schodzi razem z nimi, zeby nie lamac ukladu. */
@media (max-width: 860px) {
    .bmx .bmx-search {
        display: none;
    }
}

/* ============================================================
   POZOSTALOSC PO STAREJ WYSZUKIWARCE OXYGENA
   Sprawdzone 2026-09-17.

   Na stronach Oxygena w drzewie siedzi jeszcze stary komplet:
   '#searchButton' i '#searchOverlay', ostylowane STARA czerwienia marki
   '#ba0c2c' (obecna to '#DB0632'). Styl przychodzi z bloku kodu Oxygena
   drukowanego INLINE ('ct_code_block_css_2'), wiec nasz filtr zdejmujacy
   pliki .css go nie dotyka.

   ZMIERZONE: overlay ma 'display:none', a przycisk 0x0 px - czyli
   NICZEGO Z TEGO NIE WIDAC. To martwy kod, a nie widoczna usterka;
   wczesniejsze "14 wystapien na kazdej stronie" dotyczylo tekstu CSS
   w zrodle, nie tego, co widzi uzytkownik. Wyszukiwarka, ktora dziala,
   to nasza '.bmx-search' (170x30 px).

   Zostawiamy jednak zabezpieczenie: gdyby cokolwiek kiedys pokazalo ten
   overlay (skrypt wtyczki, edycja w builderze), ma byc w barwach marki,
   a nie w starych. Przycisk-sierote chowamy wprost - jest pusty i tak.

   Waga: zrodlo trzyma to na identyfikatorach (1,0,0), wiec dokladamy
   'html' (1,0,1) i wygrywamy bez '!important'. */
html #searchButton {
    display: none;
}

html #searchOverlay input {
    color: #DB0632;
    border-color: #DB0632;
}

html #searchOverlay button[type="submit"] {
    background-color: #DB0632;
    border-color: #DB0632;
}

/* --- Pasek gorny na TELEFONIE: komunikaty czytelne (2026-09-28) ---------
   Klientka: "na mobile na pasku nad hero przesuwaja sie komunikaty sciesnione
   z lewej, nie do przeczytania, bo sie nie mieszcza". Zmierzone przy 390 px:
   komunikaty dostawaly 75 px (pole "Szukaj produktu" 259 px + PL/EN), a maja
   284-464 px. Na telefonie wyszukiwarka jest juz w naglowku pod lupa - tu ja
   chowamy, komunikaty biora cala szerokosc i lamia sie maks. na 2 wiersze.
   Wysrodkowanie w pionie przez 'translate' (osobna wlasciwosc), bo 'transform'
   steruje animacja przelaczania ('.is-on' / '.is-out' w bm-newhome.css). */
@media (max-width: 599px) {
    .bmx .bmx-top__r .bmx-search { display: none !important; }
    .bmx .bmx-top__r .bmx-search + * { margin-left: 0; }

    .bmx-top .bmx-tick {
        height: 34px;
        line-height: 17px;
    }

    .bmx-top .bmx-tick li {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        inset: auto 0;
        top: 50%;
        translate: 0 -50%;
        white-space: normal;
        text-overflow: clip;
        font-size: .69rem;
        letter-spacing: .03em;
    }
}