/* ============================================================
   Nadpisania WYLACZNIE dla stron renderowanych Oxygenem.
   Nie laduje sie na stronie glownej - ta ma wlasny, pelny szablon.
   Style samego naglowka i stopki siedza w naglowek.css, bo sa
   potrzebne wszedzie.
   ============================================================ */

/* --- 1. Chowamy naglowek Oxygena ----------------------------- */
.oxy-header-wrapper {
    display: none !important;
}

/* --- 1b. Chowamy stopke Oxygena ------------------------------
   UWAGA: wczesniej bylo tu '.ct-footer' i to NIE DZIALALO - taka klasa
   nie wystepuje na zadnej stronie tego serwisu (jedyne trafienie to
   'ct-footer-js', czyli uchwyt skryptu). Przez to na wszystkich
   podstronach byly DWIE stopki: nasza i Oxygena.

   Stopki nie da sie zlapac po identyfikatorze, bo zaleznie od szablonu
   pochodzi z roznych zrodel (section-20-225 albo section-13-255).
   Stabilny jest natomiast uklad: to zawsze OSTATNIA sekcja strony
   i jedyna, ktora zawiera ikony spolecznosciowe. Stad :has().

   Sekcja zostaje w DOM (tylko display:none), zeby nie psuc skryptow
   Oxygena, ktore moga sie do niej odwolywac. */
.ct-section:has(.oxy-social-icons) {
    display: none !important;
}

/* --- 1c. Czarny pasek copyrightu (resztka stopki 255) --------
   Ten sam blad co kiedys z '.ct-footer', tylko subtelniejszy: regula
   ':has(.oxy-social-icons)' chowa SEKCJE stopki, a ten pasek stoi
   TUZ ZA nia jako rodzenstwo (<div>, nie <section>), wiec sie z niej
   nie lapal i zostawal widoczny - czarny, z wlasnym gornym obramowaniem.

   Sprawdzone: wystepuje w szablonie 255 i jego angielskim blizniaku 7564
   (ten sam identyfikator), czyli m.in. na /dla-profesjonalistow/ i /blog/.
   Zadna inna strona go nie ma. Jego tresc - "Copyright by B.M. Polska",
   RODO, Cookies, Regulamin sklepu - jest juz w naszej stopce, wiec to
   czysty duplikat, nie utrata informacji.

   Uwaga na przyszlosc: szukajac resztek starej stopki nie ograniczac sie
   do '.ct-section' - Oxygen wypuszcza tez elementy poza sekcjami. */
#div_block-40-255 {
    display: none !important;
}

/* DRUGI taki pasek, znaleziony 2026-09-16 przy budowie rozdrozy.
   Szablon 225 ma wlasna kopie ('#div_block-52-225') - ta sama tresc
   ("Copyright by B.M. Polska", RODO, Cookies, Regulamin), ten sam blad:
   stoi TUZ ZA sekcja stopki jako rodzenstwo, wiec ':has(.oxy-social-icons)'
   go nie lapie. Widac go na stronach, ktore renderuja sie szablonem 225
   bez wlasnej tresci - m.in. na nowych rozdrozach w "Kolorze i inspiracjach".

   Potwierdza to uwage zapisana wyzej: szukajac resztek starej stopki
   NIE ograniczac sie do '.ct-section'. Jesli pojawi sie trzeci, bedzie
   pod kolejnym identyfikatorem. */
#div_block-52-225 {
    display: none !important;
}

/* --- 2. Tlo strony ------------------------------------------
   Makieta ustawia body{background:#FCFAF6} regula NIEscope'owana
   pod .bmx, wiec na podstronach zmienilaby tlo calego serwisu.
   Oxygen nie ustawia tla body w ogole (tylko krój i kolor tekstu),
   wiec przywracamy biel - poza naglowkiem i stopka nic sie nie zmienia.
   'html body' ma wyzsza specyficznosc niz samo 'body'. */
html body {
    background: #fff;
}

/* --- 3. Kroje pisma dla calego serwisu ----------------------
   AUDYT 2026-09-01: kroje byly zaaplikowane tylko tam, gdzie ktoras
   podstrona miala swoj arkusz. Poza tym rzadzil Oxygen:
   'body { font-family: Poppins }' i 'h1..h6 { font-family: Verdana }'.

   Efekt - Poppins i Verdana zostawaly na:
     - liscie bloga i archiwach kategorii,
     - wpisach blogowych (tekst biezacy poza '.oxy-stock-content-styles'),
     - koszyku, zamowieniu i moim koncie,
     - wynikach wyszukiwania (/?s=...),
     - kazdej sekcji Oxygena, ktorej nie tknelismy z osobna.
   Arkusz 'strony.css' robil to tylko dla 'body.page', czyli dla stron -
   ale nie dla wpisow, archiwow, koszyka ani wyszukiwarki.

   Ten arkusz laduje sie na WSZYSTKIM, co rysuje Oxygen, wiec to wlasciwe
   miejsce na baze. Ustawiamy wylacznie RODZINE - rozmiary, grubosci
   i kolory zostaja tam, gdzie byly, zeby nie ruszac zatwierdzonych ukladow.

   Specyficznosc: reguly Oxygena to 'body' i 'h1..h6', czyli (0,0,1).
   Nasze sa identycznej wagi, ale arkusz idzie pozniej - wiec wygrywaja.
   Wszystko, co ma wlasny 'font-family' (nasze komponenty, .bmx-*),
   zostaje nietkniete. */
/* UWAGA NA KOLEJNOSC WCZYTYWANIA (ustalone 2026-09-01):
   'universal.css' Oxygena laduje sie jako OSTATNI arkusz na stronie -
   nasze pliki sa na pozycjach 1-4, jego na 11. Przy rownej wadze
   wygrywa ten pozniejszy, czyli ZAWSZE Oxygen. Golego 'body' ani
   'h1..h6' nie da sie wiec tu uzyc - trzeba wyjsc wyzej niz zrodlo.

   Zrodlo: 'body { font-family:Poppins }'            (0,0,1)
           'h1..h6 { font-family:Verdana }'          (0,0,1)
   Nasze:  'html body'                               (0,0,2)
           'html :is(h1,...)'                        (0,0,2)  */
html body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
}

html :is(h1, h2, h3, h4, h5, h6) {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Pola formularzy i przyciski nie dziedzicza kroju od 'body' - to domyslne
   zachowanie przegladarki, nie przeoczenie Oxygena. Bez tego wyszukiwarka,
   pola koszyka i formularze CF7 zostawaly na kroju systemowym. */
button, input, select, textarea, optgroup {
    font-family: inherit;
}

/* --- 4. Punktowe przecieki Poppins/Verdana ------------------
   AUDYT 2026-09-01, przejscie po wszystkich 464 adresach serwisu.
   Na 9 stronach Oxygen wpisuje kroj bezposrednio na identyfikatorze
   elementu, np. '#text_block-196-113 { font-family: Verdana }'.
   Taka regula ma wage (1,0,0) i bije nasza baze z punktu 3, ktora jest
   (0,0,1) - dlatego mimo poprawnie wczytanego kroju te akapity zostawaly
   na Poppinsie albo Verdanie.

   Dotkniete strony:
     /kolory-z-hologramem/
     /kolor-inspiracje/broszury-inspiracyjne/  (+ wersja EN)
     /kolor-inspiracje/kolor-roku-2025/ i /kolor-roku-2026/
     /benjamin-moore-artshow-2023/
     /en/color-stories-the-secret-collection/

   Wyrownujemy waga: 'body #id' to (1,0,1), czyli o wlos wiecej niz zrodlo.
   Naglowki dostaja Playfaira, reszta Inter - tak samo jak baza.
   Lista pochodzi z przemiatania CSS-a Oxygena, nie z domyslow.
   ============================================================ */
body #headline-217-113,
body #headline-62-7850 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

body #_rich_text-74-10774,
body #div_block-222-13889,
body #text_block-159-162,
body #text_block-196-113,
body #text_block-222-113,
body #text_block-226-113,
body #text_block-227-113,
body #text_block-244-113,
body #text_block-246-11654,
body #text_block-248-113,
body #text_block-253-11654,
body #text_block-254-113,
body #text_block-259-11654,
body #text_block-262-113,
body #text_block-266-11654,
body #text_block-279-11654,
body #text_block-286-11654,
body #text_block-292-11654,
body #text_block-313-11654,
body #text_block-320-11654,
body #text_block-326-11654,
body #text_block-356-11654,
body #text_block-362-11654,
body #text_block-369-11654,
body #text_block-375-11654,
body #text_block-376-11654,
body #text_block-377-11654,
body #text_block-378-11654,
body #text_block-386-6909,
body #text_block-388-113,
body #text_block-388-6909,
body #text_block-389-113,
body #text_block-390-6909,
body #text_block-395-6909,
body #text_block-396-6909,
body #text_block-399-113,
body #text_block-539-166,
body #text_block-555-166,
body #text_block-572-166,
body #text_block-586-166,
body #text_block-617-166,
body #text_block-631-166,
body #text_block-671-166,
body #text_block-705-166,
body #text_block-722-166,
body #text_block-736-166,
body #text_block-750-166,
body #text_block-765-166,
body #text_block-779-166,
body #text_block-796-166,
body #text_block-839-166 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
}

/* Klasy z biblioteki wzorcow Oxygena. Na dzis nieuzywane na zadnej
   stronie, ale maja ten sam problem - zabezpieczamy na przyszlosc. */
body .atomic-subheading {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

body .atomic-content-32-small-text,
body .atomic-outline-button,
body .atomic-primary-button,
body .atomic-small-text {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
}

/* --- 5. Podkreslnik naglowkow '.heading-divider' ------------
   ZASTAPIENIE FIRMOWEGO PASKA (2026-09-01, na prosbe klienta).

   CO BYLO: 'universal.css' dokladal kazdemu naglowkowi z ta klasa
   pseudoelement ':before' z grafika '/uploads/pasek_na_www-2.svg' -
   140x9 px, trojkolorowy wzor z CorelDRAW (czerwien #CD1F41, granat
   #1E2A46, biel). Wgrany 2025-10-10 przez grafika klienta.

   SKALA: 313 wystapien na 219 stronach - h1 (203), h2 (72), h3 (33),
   h4 (5). Warianty: sam 'heading-divider', z 'heading-center'
   i z 'heading-divider-center'. Dlatego zmieniamy to JEDNA regula
   na klasie, a nie po identyfikatorach.

   PRZY OKAZJI - BLAD W ZRODLE: ':before' ma 'position:absolute',
   ale ZADNA regula nie nadaje '.heading-divider' 'position:relative'
   (sprawdzone w calym 'universal.css'). Pseudoelement kotwiczyl sie
   wiec do pierwszego pozycjonowanego przodka gdzies wyzej w drzewie -
   stad pasek potrafil wyladowac w losowym miejscu zamiast pod tekstem.
   Dokladamy brakujace 'position:relative'.

   CO JEST TERAZ: dokladnie ta sama kreska, ktorej makieta uzywa juz
   w calym serwisie. Nie wymyslamy nowego ksztaltu - w 'bm-newhome.css'
   nadtytul sekcji ma:

       .bmx-eyebrow::before { width:26px; height:1px;
                              background:currentColor; opacity:.5 }

   czyli wloskowata kreska, nie pasek. Powtarzamy te miare 1:1, zeby
   naglowki Oxygena i naglowki makiety mowily tym samym jezykiem.
   Kolor bierzemy z granatu naglowkow ('currentColor' nie zadziala,
   bo zrodlo ustawia '.heading-divider { color:#000000 }'), a przezroczystosc
   z makiety - stad 'rgba' granatu zamiast plaskiej czerni.

   Bez pliku graficznego: ostro na kazdym ekranie, zero zapytan sieciowych.

   Waga: '.heading-divider' to (0,1,0) - tyle samo, co zrodlo, ale nasz
   arkusz laduje sie pozniej. 'background-image:none' jest konieczne,
   bo skrot 'background' w zrodle ustawia obrazek osobna wlasciwoscia. */
/* '.bmx-akcent' - TEN SAM akcent, ale do dolozenia dowolnemu naglowkowi,
   ktory nie ma klasy Oxygena '.heading-divider'. Powstal 2026-09-16 dla
   kart wpisow na blogu; '.heading-divider' nie da sie tam uzyc, bo
   ciagnie ze soba caly wyglad ze zrodla ('width:100%', 'text-align:center',
   'font-size:28px', 'color:#000'), ktory przemalowalby naglowki kart.

   Reguly rysujace akcent sa WSPOLNE - obie klasy stoja w tych samych
   selektorach nizej, wiec nie ma dwoch implementacji tej samej kreski. */
html .bmx-akcent {
    position: relative;
    padding-bottom: 14px;
}

html .heading-divider {
    position: relative;
    /* Zrodlo daje 'width:100%' i 'padding-bottom:15px', czyli pod tekstem
       jest realne miejsce na calej szerokosci bloku. Poprzednie wersje
       marnowaly je na krotki odcinek przy lewej krawedzi. */
}

/* ---- Naglowek ma byc blokiem, nie kontenerem flex -----------
   POPRAWKA 2026-09-16 (zgloszenie klientki: "strefa wykonawcy rozjechana").

   Zrodlo robi z KAZDEGO naglowka z ta klasa kontener flex:
       '.heading-divider:not(.ct-section):not(.oxy-easy-posts) { display:flex }'
   W kontenerze flex 'text-align' nie ustawia juz polozenia tekstu -
   tekst staje sie anonimowa pozycja ukladu i ustawia sie wedlug
   'justify-content', czyli domyslnie do lewej.

   Stad brala sie ta sama usterka na kilku ekranach naraz:
     /dla-profesjonalistow/strefa-wykonawcy/  - napis "Strefa wykonawcy"
        przy lewej krawedzi, a podkreslnik na srodku,
     /kolor-inspiracje/aplikacja-benjamin-moore/ - naglowki wyjezdzajace
        poza swoj blok.
   Naglowki, ktore mialy DWIE linie, wygladaly poprawnie przez przypadek:
   anonimowa pozycja nie miescila sie w kontenerze, wiec kurczyla sie
   do jego szerokosci i 'text-align' znow zaczynal dzialac. Dlatego usterka
   wygladala na losowa - zalezala od dlugosci tytulu.

   Naglowek nie potrzebuje ukladu flex: ma w srodku sam tekst.
   Wracamy wiec do bloku i 'text-align' ze zrodla dziala jak nalezy.

   Waga: zrodlo to '.heading-divider:not(.ct-section):not(.oxy-easy-posts)',
   czyli (0,3,0) - ':not()' liczy sie tak jak jego argument. Sam 'html'
   ani 'html body' tego nie przebije, dlatego powtarzamy oba ':not()'
   i dokladamy 'html body' -> (0,3,3).

   Zawezenie do h1-h6 jest celowe: ta sama klasa bywa wpisana na sekcji,
   a tam uklad flex ma sens i nie chcemy go ruszac. */
html body :is(h1, h2, h3, h4, h5, h6).heading-divider:not(.ct-section):not(.oxy-easy-posts) {
    display: block;
}

/* ---- Warstwa 1: wygaszona -------------------------------
   Byla tu wloskowata linia bazowa na calej szerokosci naglowka.
   Klient ja odrzucil (2026-09-01) - szare przedluzenie rozmywalo akcent
   zamiast go osadzac.

   ':before' MUSI zostac zadeklarowane, a nie po prostu usuniete:
   zrodlo w 'universal.css' wciaz wstawia tu grafike '/uploads/pasek_na_www-2.svg'
   i bez naszego nadpisania flaga wrocilaby na strone. Gasimy wiec
   pseudoelement wprost.

   POPRAWKA 2026-09-16 - I WLASNIE WROCILA.
   Zgloszenie klientki: "nadal jest ta flaga, ktora miala zniknac".
   Regula ponizej byla napisana jako 'html .heading-divider:before',
   czyli waga (0,1,1) - DOKLADNIE TYLE SAMO, co zrodlo:
       'universal.css: .heading-divider:before' -> (0,1,1)
   Przy remisie wygrywa arkusz wczytany pozniej, a 'universal.css'
   Oxygena jest na stronie OSTATNI (nasze pliki sa na pozycjach 1-5,
   jego na 11). Flaga wracala wiec na wszystkich 313 naglowkach
   w serwisie - m.in. na mapie salonow, na podstronach wojewodztw,
   u koordynatorow i nad formularzem dla profesjonalistow.

   To ta sama pulapka, ktora jest juz opisana wyzej w tym pliku przy
   krojach pisma ("UWAGA NA KOLEJNOSC WCZYTYWANIA"). Tam wyjscie wyzej
   niz zrodlo zostalo zastosowane, tutaj zostalo przeoczone.

   ALE PODNIESIENIE WAGI NIE WYSTARCZA - i to jest wlasciwa przyczyna,
   dla ktorej flaga wracala. Oprocz reguly ogolnej w 'universal.css'
   builder zapisuje ja JESZCZE RAZ na identyfikatorze pojedynczego
   naglowka, w arkuszu danego szablonu, np.:
       81.css:  '#headline-8-81:before  { content:""; left:0; right:0; margin:auto }'
   To waga (1,0,1) - identyfikator bije dowolna liczbe klas, wiec zadne
   'html body ...' tego nie przebije.

   Przemiecione wszystkie 89 arkuszy Oxygena: takich regul jest 16, same
   naglowki, m.in. '#headline-8-81' (mapa salonow), '#headline-16-239'
   (podstrony wojewodztw i koordynatorow), '#headline-139-225' (naglowek
   nad formularzem dla profesjonalistow) - czyli dokladnie te ekrany,
   ktore klientka wskazala na spotkaniu.

   DLACZEGO '!important', a nie lista tych 16 identyfikatorow:
   te reguly PISZE BUILDER. Wystarczy, ze ktos otworzy taki naglowek
   w Oxygenie i zapisze strone, a arkusz szablonu powstaje od nowa -
   z nowym identyfikatorem, ktorego na liscie nie ma. Flaga wrocilaby
   wtedy na jednej podstronie i nikt by tego nie zauwazyl. To jest ten
   sam powod, dla ktorego '!important' stoi juz wyzej w tym pliku przy
   chowaniu naglowka i stopki Oxygena.

   Zakres jest jednej deklaracji: gasimy pseudoelement, nic wiecej.
   Nasz wlasny akcent siedzi na ':after' i nie jest tym ruszany. */
html body .heading-divider:before {
    content: none !important;
}

/* ---- Warstwa 2: akcent na linii ---------------------------
   Krotki, gruby odcinek lezacy NA linii bazowej. Gradient granat ->
   czerwien, zwezajacy sie ku koncowi przez 'clip-path' - czyta sie jak
   naciskniecie i zejscie pedzla, ale bez doslownej ilustracji pedzla,
   ktora byla zbyt ozdobna.

   ':after' jest wolne - zrodlo uzywa wylacznie ':before'. */
/* POLOZENIE POZIOME - POPRAWKA 2026-09-16.
   Zgloszenie klientki: "podkreslnik jest w ogole totalnie z boku".

   Bylo 'left:0', czyli akcent zawsze przy lewej krawedzi naglowka,
   a wysrodkowanie dostawaly tylko naglowki z dodatkowa klasa
   'heading-center' / 'heading-divider-center'. Tymczasem zrodlo ustawia
   WSZYSTKIM naglowkom z ta klasa 'text-align:center':
       'universal.css: .heading-divider { text-align:center }'
   Klasy wyrownujace sa wiec wyjatkiem, a nie regula - na kazdym
   naglowku bez nich tekst stal na srodku, a kreska pod lewa krawedzia,
   czesto kilkaset pikseli od pierwszej litery.

   Odwracamy domyslnosc: akcent idzie na SRODEK, tak jak tekst.
   Wyrownanie do lewej jest teraz swiadomym wyjatkiem: naglowek, ktoremu
   NASZ arkusz zmienia 'text-align' na lewe, przesuwa sobie akcent u siebie.
   Dzis jedno miejsce - 'salony.css', '#headline-16-239' pod
   'body.parent-pageid-430'. */
html .heading-divider:after,
html .bmx-akcent:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: 0;
    /* Miary i barwa z tokenow na ':root' - patrz 'bm-newhome.css'.
       Ten sam akcent rysuje sie w trzech miejscach i ma wygladac
       identycznie; wartosci wpisane tu na sztywno juz raz doprowadzily
       do trzech roznych wariantow. */
    width: var(--akcent-szer);
    height: var(--akcent-wys);
    z-index: 2;
    background-image: var(--akcent-tlo);
    /* Klin: pelna grubosc na starcie, scienienie na koncu. */
    clip-path: var(--akcent-klin);
    /* Kreska wjezdza od srodka, bo od srodka jest rysowana. Przy
       'left center' rozwijala sie od lewej krawedzi ekranu w strone
       tekstu - ruch nie mial punktu zaczepienia. */
    transform-origin: center;
    animation: bmx-akcent 1s cubic-bezier(.62, .02, .3, 1) both;
}

@keyframes bmx-akcent {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    html .heading-divider:after,
    html .bmx-akcent:after { animation: none; }
}

/* ---- Warianty wyrownania ----------------------------------
   Naglowki z klasa 'heading-center' / 'heading-divider-center' nie maja
   juz wlasnej reguly: po zmianie z 2026-09-16 domyslne polozenie akcentu
   jest wysrodkowane, wiec te warianty dostaja je same z siebie.
   (Wczesniej byl tu blok powtarzajacy 'left:0; right:0; margin:auto'.)

   Wariantu "do lewej" NIE ma tutaj jako osobnej klasy, bo nie mamy
   dostepu do znacznikow Oxygena i nie moglibysmy jej nigdzie dopisac.
   Naglowek, ktoremu nasz arkusz zmienia wyrownanie na lewe, przesuwa
   sobie akcent u siebie - dzis jest to jedno miejsce:
   'salony.css', '#headline-16-239' pod 'body.parent-pageid-430'
   (naglowek nad wizytowka koordynatora regionu).

   Do prawej - wariant ze zrodla Oxygena. */
/* ---- Akcent idzie za FAKTYCZNYM UKLADEM naglowka --------------
   POPRAWKA 2026-09-16, druga proba. Zgloszenie: "on musi reagowac
   analogicznie do layoutu, nie moze miec sztywnej zasady srodek czy lewa,
   bo to jest zalezne od ukladu".

   PROBA PIERWSZA I DLACZEGO NIE WYSTARCZYLA:
   czytalismy wyrownanie z atrybutu 'style' wewnetrznego <div>, ktory
   dokłada edytor Oxygena. Okazalo sie, ze ten atrybut nie mowi, jak
   naglowek WYGLADA. Zmierzone na dwoch stronach - oba maja w zrodle
   DOKLADNIE to samo 'text-align: left':

     /dla-profesjonalistow/  '#headline-139-225'
        pudelko 760 px, tekst zajmuje 750 px - luz 5 px z lewej i 5 z prawej.
        Tekst wypelnia wiersz, wiec wyrownanie nie ma czego przesunac,
        a samo pudelko stoi na srodku strony. Czyta sie jako WYSRODKOWANY.

     /kolor-inspiracje/color-stories/  '#headline-7-67'
        pudelko 1130 px, tekst 531 px, dosuniety do lewej - luz 0 z lewej,
        599 z prawej. Czyta sie jako DO LEWEJ.

   Ten sam zapis w zrodle, dwa rozne uklady. Do tego nasze wlasne arkusze
   potrafia nadpisac wyrownanie przez '!important' (np. kafelki stref),
   wiec zrodlo klamie podwojnie.

   JAK JEST TERAZ: 'akcent.js' MIERZY w przegladarce, gdzie faktycznie leza
   litery wzgledem pudelka naglowka, i dokłada klase. CSS tylko wykonuje.
   Pomiar powtarza sie przy zmianie szerokosci okna, bo uklad potrafi sie
   przelaczyc na innym progu.

   Domyslnie (przed uruchomieniem skryptu i gdy pomiar wyjdzie
   niejednoznacznie) akcent jest WYSRODKOWANY - to najczestszy uklad
   w serwisie: w probce 20 naglowkow 12 bylo na srodku. */
html .heading-divider.bmx-akcent--lewy:after,
html .bmx-akcent.bmx-akcent--lewy:after {
    left: 0;
    right: auto;
    margin-inline: 0;
    transform-origin: left center;
}

html .heading-divider.bmx-akcent--prawy:after,
html .bmx-akcent.bmx-akcent--prawy:after {
    left: auto;
    right: 0;
    margin-inline: 0;
    transform-origin: right center;
    clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 100%);
    background-image: linear-gradient(90deg, #DB0632 0%, #12325C 58%, #0B2240 100%);
}

html .heading-divider.heading-right:after {
    left: auto;
    right: 0;
    margin-inline: 0;
    transform-origin: right center;
    /* Klin musi scieniac sie w strone zewnetrznej krawedzi. */
    clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 100%);
    background-image: linear-gradient(90deg, #DB0632 0%, #12325C 58%, #0B2240 100%);
}

/* Warianty wyrownania ze zrodla dotykaly takze ':before'. Skoro jest
   wygaszone, gasimy je rowniez tam - inaczej wariantowa regula zrodla
   ('.heading-divider.heading-center:before' i siostrzane, waga (0,2,1))
   przywrocilaby 'content' i flage. 'html body' daje nam (0,2,2). */
html body .heading-divider.heading-center:before,
html body .heading-divider.heading-divider-center:before,
html body .heading-divider.heading-right:before {
    content: none !important;
}


/* --- 6. Stary gorny pasek ze zdjeciem -----------------------
   POPRAWKA 2026-09-16 (zgloszenie klientki: "jest na gorze ten pasek
   stary, to usuwamy tez na nowe").

   CO TO JEST: sekcja Oxygena na szczycie strony - ciemne zdjecie regalu
   z ksiazkami na calej szerokosci, na nim bialy tytul strony, a pod nim
   okruszki. Wysokosc 169 px. Pochodzi jeszcze ze starego wygladu i jest
   jedynym ciemnym pasem miedzy naszym jasnym naglowkiem a jasna trescia -
   przez to wyglada jak doklejony z innego serwisu.

   GDZIE WYSTEPUJE: klientka wskazala salony i strefe dla profesjonalistow,
   ale to jeden komponent uzywany szerzej. Przemieciony serwis - pasek jest
   m.in. na:
     /salon-sprzedazy/znajdz-salon-sprzedazy/salony-sprzedazy-*  (16 stron)
     /nasi-koordynatorzy-regionow/przedstawiciele-handlowi-*     (16 stron)
     /kontakt/dane-kontaktowe/ i pozostale zakladki kontaktu
   Na stronach '/dla-profesjonalistow/*' jego odpowiedniki ('.pl-banner',
   '.eng-banner') sa juz schowane przez WPML, wiec tam nie ma czego ruszac.
   Poprawiamy wiec komponent, a nie pojedyncze adresy - o to prosila
   klientka w pierwszym punkcie ("sprawdzic, gdzie jeszcze brakuje").

   CZEGO NIE ROBIMY: nie kasujemy paska. Siedza w nim okruszki, czyli
   jedyna nawigacja "w gore" na tych podstronach, i tytul strony w <h1>.
   Zamiast tego przebieramy go w wyglad makiety: jasne tlo zamiast zdjecia,
   tytul jako nadtytul wersalikami, okruszki jako zwykla sciezka.

   JAK GO WYBIERAMY: identyfikatory sa rozne na kazdym szablonie
   ('section-2-239', 'section-2-47', ...), wiec nie da sie ich wyliczyc.
   Stala jest za to zawartosc: to jedyna sekcja na stronie z okruszkami.
   Ten sam chwyt, ktorym wyzej w tym pliku lapiemy stopke Oxygena
   (':has(.oxy-social-icons)').

   Waga: '.ct-section:has(#breadcrumbs)' to (1,1,0) - ':has()' liczy sie
   jak jego argument, wiec identyfikator w srodku daje nam przewage nad
   regulami zrodla postaci '#section-2-239' (1,0,0). Bez tego tlo ze
   zdjeciem by zostalo. */
.ct-section:has(#breadcrumbs) {
    min-height: 0;
    background-image: none;
    background-color: #FCFAF6;
    border-bottom: 1px solid rgba(11, 34, 64, .1);
    text-align: center;
}

/* Wysokosc paska siedzi na WEWNETRZNYM wrapperze, nie na sekcji:
   '#section-2-239 > .ct-section-inner-wrap { padding-top:160px;
   padding-bottom:76px }'. Bez tej reguly pasek zostawal wysoki
   na 167 px mimo jasnego tla - zdjecie znikalo, ale dziura po nim nie.
   Waga zrodla to (1,0,1); ':has(#breadcrumbs)' daje nam (1,1,1). */
.ct-section:has(#breadcrumbs) > .ct-section-inner-wrap {
    /* Uklad przejety 2026-09-16 z 'bm-responsive-fixes.css' (punkt 6),
       zeby pasek mial jednego wlasciciela - tam zostal tylko komentarz.
       Wysrodkowanie w pionie i poziomie oraz 'min-height:0' pochodza
       stamtad; zmieniona jest wysokosc (bylo 40 px gora i dol na pasek
       ze zdjeciem) i odstep miedzy wierszami. */
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Tytul paska. W zrodle to bialy naglowek 34 px - na jasnym tle bylby
   niewidoczny, a i tak powtarza sie nizej we wlasciwym naglowku strony.
   Schodzi wiec do roli nadtytulu: wersaliki, czerwien marki, drobny
   stopien. Ten sam ksztalt co '.bmx-eyebrow' w makiecie. */
.ct-section:has(#breadcrumbs) :is(h1, h2, h3) {
    margin: 0 0 4px;
    padding: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #DB0632;
}

/* Pusty <h1> zostaje w drzewie (jest w nim tytul dla robotow), ale nie
   ma go po co odsuwac - inaczej pasek rosnie o pusty wiersz. */
.ct-section:has(#breadcrumbs) :is(h1, h2, h3):empty {
    display: none;
}

/* Okruszki. W zrodle bialy tekst z bialymi odnosnikami. */
.ct-section:has(#breadcrumbs) #breadcrumbs {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.5;
    color: #3F4750;
}

.ct-section:has(#breadcrumbs) #breadcrumbs a {
    color: #0B2240;
    text-decoration: none;
    border-bottom: 1px solid rgba(11, 34, 64, .22);
    transition: border-color .25s cubic-bezier(.22, 1, .36, 1);
}

.ct-section:has(#breadcrumbs) #breadcrumbs a:hover {
    border-bottom-color: #DB0632;
}

/* Biezaca strona - bez odnosnika, wiec i bez podkreslenia; zostaje
   wyrozniona sama gruboscia. */
.ct-section:has(#breadcrumbs) #breadcrumbs .breadcrumb_last {
    font-weight: 600;
    color: #0B2240;
}

/* --- 7. Zaokraglenie zdjec w tresci -------------------------
   Zgloszenie klientki 2026-09-16: "strona ma szate z zaokragleniami
   obrazow i kontenerow, wiec czemu tutaj mamy ostre rogi?"
   (dotyczylo '/kolor-inspiracje/kolor-roku-2025/' i jej bliznniaka EN).

   SKALA: zmierzone na szesciu stronach tresciowych - 87 zdjec duzych
   i wszystkie z 'border-radius: 0'. Strony rocznikowe (10x kolor roku,
   20x color trends) nigdy nie byly objete przebudowa, wiec zostaly
   z ostrymi rogami, podczas gdy karty, kafelki i zdjecia w makiecie
   sa zaokraglone. To najbardziej widoczna pozostalosc starego wygladu.

   DLACZEGO 'min(var(--r), 8%)', A NIE SAM TOKEN:
   '.ct-image' to w Oxygenie zarowno zdjecie na 850 px, jak i probka
   koloru na 122 px (zmierzone: 87 duzych i 10 probek). Staly promien
   18 px na probce 122x125 wyglada jak mocno zaokraglony guzik.
   Zapis 'min()' skaluje sie sam:
       zdjecie 850 px  ->  8% = 68 px  ->  min = 18 px  (token)
       probka  122 px  ->  8% = 10 px  ->  min = 10 px  (proporcjonalnie)
   Nie trzeba wiec mierzyc rozmiaru ani utrzymywac listy wyjatkow.

   ZAKRES: tylko '.ct-image', czyli zdjecia wstawione w builderze.
   Logo w naglowku i stopce sa nasze ('.bmx'), wiec ta regula ich nie
   dotyka. Zdjec pelnoekranowych w probce nie bylo ani jednego, ale
   gdyby sie pojawily - wykluczamy je warunkiem szerokosci nizej. */
body.page .ct-image,
body.single .ct-image,
body.archive .ct-image,
/* DOLOZONE 2026-09-16 po zgloszeniu: "galeria po prawej nadal ma ostre
   rogi". Galeria Oxygena to OSOBNY komponent - jej miniatury nie maja
   klasy '.ct-image', tylko siedza w '<figure class="oxy-gallery-item-contents">'
   i sam '<img>' jest bez klasy. Regula wyzej ich nie widziala.

   To ta sama lekcja co przy identyfikatorach: Oxygen ma WIECEJ niz jeden
   komponent obrazkowy. Przemieciony CSS wtyczki - poza '.ct-image'
   i galeria jest jeszcze tylko '.oxy-testimonial-photo' (zdjecie
   w opinii), wiec obejmujemy je wszystkie i temat jest zamkniety.

   Miniatura 162 px dostaje 'min(18, 13) = 13 px' - promien skaluje sie
   sam, tak jak przy probkach koloru. */
body .oxy-gallery-item-contents img,
body .oxy-gallery-item-contents,
body .oxy-testimonial-photo {
    border-radius: min(var(--r), 8%);
}

/* Galeria: przyciecie do naroznikow, zeby powiekszenie i nakladka
   na hoverze nie wystawaly poza zaokraglony rog. */
body .oxy-gallery-item-contents {
    overflow: hidden;
}

/* Zdjecie rozciagniete na cala szerokosc okna ma zostac ostre - promien
   na krawedzi ekranu wyglada jak blad renderowania, a nie jak decyzja. */
body .ct-section > .ct-image,
body .ct-image[style*="width: 100vw"] {
    border-radius: 0;
}

/* ============================================================
   CZARNE TLO OXYGENA - ROZJASNIANE PO POMIARZE
   Klasy '.bmx-zaczerniony' i '.bmx-byl-bialy' doklada 'czern.js'
   - patrz jego naglowek.

   HISTORIA TEJ POPRAWKI JEST POUCZAJACA. Pierwsza wersja rozjasniala
   liste dziesieciu identyfikatorow stron, zebrana ze skanu PROBKI
   (65 z 344 stron). Klientka od razu znalazla kolejna czarna strone,
   ktorej na liscie nie bylo. Pelny skan wszystkich 344 stron pokazal,
   ze czysta czern ma ich JEDENASCIE, a lista bylaby aktualna tylko do
   nastepnej strony zbudowanej na starym szablonie.

   Dlatego zamiast wyliczac strony, rozpoznajemy CECHE: fabryczna czern
   Oxygena to 'rgb(0, 0, 0)', a wszystkie ciemne sekcje makiety sa
   granatowe. Czysta czern nie wystepuje w projekcie ani razu.
   ============================================================ */

.bmx-zaczerniony {
    background-color: #FCFAF6 !important;
    background-image: none !important;
}

/* Napisy poprawne na czerni, niewidoczne na jasnym tle. */
.bmx-byl-bialy {
    color: #0B2240 !important;
}

/* Naglowek banera zostaje czerwony - to nadtytul strony, nie tresc. */
body.page .ct-section.eng-banner :is(h1, h2, h3),
body.page .ct-section.pl-banner :is(h1, h2, h3) {
    color: #DB0632 !important;
}

/* ---------- KAFELKI W ROZJASNIONYM WIERSZU -------------------
   ZACZEPIENIE NA '.bmx-kafelki', NIE NA '.bmx-zaczerniony'. Nie kazdy
   czarny wiersz jest siatka kafelkow - na
   '/kolor-inspiracje/color-trends-2026/' jest nim uklad TRESCI (spis
   rocznikow, artykul, galeria) i wymuszona siatka 1200 px wladowala sie
   w kontener 426 px. Klase '.bmx-kafelki' doklada 'czern.js' dopiero po
   sprawdzeniu, ze kazde dziecko wiersza jest odnosnikiem ze zdjeciem
   i krotkim podpisem.
   Zgloszenie: "na polskojezycznej stronie mamy juz podstrone z takim
   podzialem na dwa kafelki, wez sobie z niej styl".

   Wzorzec to rozdroze ('/kolor-inspiracje/trendy/', 'rozdroze.css').
   Wartosci przepisane 1:1, zeby nie powstal trzeci wariant karty.

   ZACZEPIENIE JEST STRUKTURALNE, nie po stronach: wiersz, ktory BYL
   czarny, to zawsze stara siatka kafelkow. Dzieki temu obejmuje rowniez
   strony, o ktorych nie wiedzialem ('/en/paints/', '/en/primers/',
   '/en/inside/', '/en/outside/', '/en/decorative-effects/' i dalsze). */
.ct-new-columns.bmx-kafelki {
    display: grid;
    /* Domyslnie cztery i wiecej kafelkow - siatka sama sie zawija. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-karty);

    /* SZEROKOSC TRZYMA ODSTEP WEWNETRZNY, A NIE 'max-width' - i to jest
       istotne, nie kosmetyczne.

       Pierwsza wersja dawala wierszowi 'max-width:1200px; margin:auto'.
       Na '/en/decorative-effects/' wiersz NIE LEZY w zadnej sekcji -
       jego rodzic jest przezroczysty, a 'body' jest BIALE. Zwezony
       wiersz z kremowym tlem tworzyl wiec kremowy pas na bialej stronie,
       a po jego bokach zostawaly biale prostokaty. Klientka: "tu sa
       jakies biale klocki po bokach".

       Tlo idzie teraz na cala szerokosc, a kafelki centruje odstep
       wewnetrzny - tak jak sekcja z '.bmx-wrap' w makiecie. */
    max-width: none;
    padding-inline: max(24px, calc((100% - 1200px) / 2));

    /* ODSTEP PIONOWY ROWNY POZIOMEMU. Kazdy wiersz niesie wlasne tlo,
       wiec miedzy dwoma wierszami sumuja sie ICH odstepy wewnetrzne -
       przy 48 px wychodzilo 96 px, czyli trzy razy wiecej niz 32 px
       w poziomie. Klientka: "niech odstep w poziomie i w pionie jest
       jednakowy". Polowa z kazdej strony daje dokladnie '--gap-karty'. */
    padding-block: calc(var(--gap-karty) / 2);
}

/* Skrajne krawedzie potrzebuja pelnej wartosci - klasy doklada 'czern.js'. */
.ct-new-columns.bmx-kafelki--pierwszy { padding-top: var(--gap-karty); }
.ct-new-columns.bmx-kafelki--ostatni  { padding-bottom: var(--gap-karty); }

/* Liczba kolumn wedlug liczby kafelkow - klase doklada 'czern.js'.
   Bez tego pojedynczy kafelek rozciagal sie na cala szerokosc wiersza. */
.ct-new-columns.bmx-kafelki--1 { grid-template-columns: minmax(0, 380px); }
.ct-new-columns.bmx-kafelki--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-new-columns.bmx-kafelki--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .ct-new-columns.bmx-kafelki,
    .ct-new-columns.bmx-kafelki--1,
    .ct-new-columns.bmx-kafelki--2,
    .ct-new-columns.bmx-kafelki--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ct-new-columns.bmx-kafelki > .ct-div-block {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* DWA NADPISANIA ZE ZRODLA, oba konieczne - bez nich siatka wyglada
       na zepsuta, mimo ze sama jest poprawna:

       1. 'width' - Oxygen daje kafelkom szerokosc PROCENTOWA (np. 33%),
          liczona pierwotnie od calego wiersza. Po wlozeniu ich w siatke
          procent liczy sie od KOMORKI, wiec kafelek zwezal sie do jednej
          trzeciej kolumny. Zmierzone na '/en/paints/': kolumna 512 px,
          kafelek 171 px.

       2. 'height' - zrodlo ustawia stala wysokosc 500 px, a kafelek ma
          'overflow:hidden'. Podpis wychodzacy ponizej tej granicy byl
          po prostu UCINANY w polowie wyrazu. */
    width: 100% !important;
    height: auto !important;
    min-height: 0;

    /* Zrodlo daje karcie 20 px wewnetrznego odstepu, przez co kadr
       odstawal od jej krawedzi. Na rozdrozu zdjecie idzie na styk,
       a odstep nosi dopiero blok z podpisem. */
    padding: 0 !important;

    /* RAMKA MOCNIEJSZA NIZ NA ROZDROZU ('--line-soft', 7%) - swiadomie.
       Zgloszenie: "brak gap poziomo w gridzie, jest tylko w przestrzeniach
       pionowych". Zmierzone: odstep jest ROWNY w obu kierunkach (32 px),
       a stylowanie identyczne z rozdrozem.

       Roznica jest w PROPORCJACH kafelka. Na rozdrozu karta ma zdjecie,
       tytul, opis i przycisk - jest wysoka i jej krawedz czyta sie sama.
       Tutaj podpis to waska listwa, ktora przy ramce na 7% zlewa sie
       z biala przerwa obok i trzy karty wygladaja jak jeden pasek.

       '--line' (13%) to ta sama paleta, uzywana juz przy polach
       formularzy - nie wprowadzamy nowej wartosci. */
    border: 1px solid rgba(11, 34, 64, .13);
    border-radius: var(--r);
    background: #fff;
    box-shadow: none;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1),
                box-shadow .55s cubic-bezier(.22, 1, .36, 1),
                border-color .45s cubic-bezier(.22, 1, .36, 1);
}

.ct-new-columns.bmx-kafelki > .ct-div-block:hover,
.ct-new-columns.bmx-kafelki > .ct-div-block:focus-within {
    transform: translateY(-7px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

/* Odnosniki w srodku kafelka sa liniowe i maja wlasne wysokosci ze
   zrodla - prostujemy je, zeby kadr i podpis ulozyly sie jeden pod
   drugim na cala szerokosc karty. */
.ct-new-columns.bmx-kafelki > .ct-div-block > a:not(.bmx-karta__lnk) {
    display: block;
    width: 100%;
}

/* PIERWSZY ODNOSNIK TO KADR - i bywa nim na DWA sposoby.
   Na '/en/interiors/' jest w nim zwykly '<img>', ale na '/en/paints/'
   zdjecie siedzi jako TLO odnosnika ('background-image'), a wysokosc
   daje mu sztywna wartosc ze zrodla. Pierwsza wersja tej poprawki
   zerowala te wysokosc ('height:auto') i zdjecia zniknely - kafelki
   zostaly samymi podpisami.

   Zamiast wysokosci dajemy wiec PROPORCJE. Dziala w obu wariantach:
   przy '<img>' pokrywa sie z jego wlasnym formatem, przy tle wyznacza
   kadr, ktorego inaczej nie ma z czego policzyc. */
.ct-new-columns.bmx-kafelki > .ct-div-block > a:not(.bmx-karta__lnk):first-child {
    height: auto !important;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.ct-new-columns.bmx-kafelki > .ct-div-block:hover > a:not(.bmx-karta__lnk):first-child {
    transform: scale(1.06);
}

/* Podpis - wysokosc ze zrodla juz niepotrzebna, tekst ma decydowac sam. */
.ct-new-columns.bmx-kafelki > .ct-div-block > a:not(.bmx-karta__lnk):not(:first-child) {
    height: auto !important;
}

/* Staly format kadru - inaczej wysokosc kafelka zalezy od tego, jaki
   plik wgrala redakcja. Powiekszenie na hover jak na rozdrozu. */
.ct-new-columns.bmx-kafelki > .ct-div-block img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 0;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.ct-new-columns.bmx-kafelki > .ct-div-block:hover img {
    transform: scale(1.06);
}

.ct-new-columns.bmx-kafelki > .ct-div-block :is(h2, h3, h4) {
    margin: 0;
    padding: clamp(20px, 2.2vw, 28px);
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 500;
    line-height: 1.22;
}

/* ============================================================
   SZEROKOSC WIERSZA NA STRONACH TRESCIOWYCH
   Klase '.bmx-waski' doklada 'czytelnosc.js' - patrz jego naglowek.

   Zmierzone przed poprawka: akapity od 117 do 225 znakow w wierszu,
   przy czytelnym zakresie 45-75.

   '70ch' zamiast stalej liczby pikseli: miara jedzie za stopniem pisma,
   wiec ten sam zapis dziala na stronie z tekstem 16 px i 18 px.
   ============================================================ */

.bmx-waski {
    /* 62ch - ta sama miara, ktorej uzywa kolumna tekstu w parach
       ('.bmx-art__tekst'). Jedna wartosc w calym projekcie, zeby dwa
       uklady tekstu nie czytaly sie inaczej. */
    max-width: 62ch;
}

/* Blok byl wysrodkowany - zwezona kolumna ma zostac na srodku,
   a nie skoczyc do lewej krawedzi. */
.bmx-waski--srodek {
    margin-inline: auto;
}

/* Tekst przy szerokim zdjeciu (ta sama sekcja i kolumna) NIE dostaje
   '.bmx-waski' - wyjatek siedzi w 'czytelnosc.js' (2026-09-25), bo o tym,
   czy obok stoi zdjecie szersze niz 700 px, rozstrzyga dopiero pomiar. */

/* Pusty kafelek w rozjasnionym wierszu - patrz 'czern.js'. Na czerni byl
   niewidoczny, na bialej karcie zostawalby pustym prostokatem. */
.ct-new-columns.bmx-kafelki > .ct-div-block.bmx-pusty {
    display: none;
}

/* ============================================================
   STARA CZERWIEN -> CZERWIEN MARKI
   Klasy doklada 'czerwien.js' po pomiarze - patrz jego naglowek.
   Polecenie klientki: "ma byc brand czerwien dla spojnosci".

   '#ba0c2c' (stara) -> '#DB0632' (marki). '!important' jest konieczne:
   zrodlo trzyma kolory na identyfikatorach, a czesc idzie blokiem
   '<style>' w tresci strony, czyli PO naszych arkuszach.
   ============================================================ */

.bmx-stara-czerwien-tekst  { color: #DB0632 !important; }
.bmx-stara-czerwien-tlo    { background-color: #DB0632 !important; }
.bmx-stara-czerwien-ramka  { border-color: #DB0632 !important; }

/* ============================================================
   POZIOMY SEPARATOR OXYGENA ('.oxel_horizontal_divider')
   Zgloszenie 2026-09-17: "ten divider jest paskudny, zaproponuj cos
   innego, zgodnego z designem strony, bez dziwnie przyciemnionego
   kwadratu w tle".

   CO BYLO - zmierzone:
     kreska ...... 3 px, rgba(11,34,64,.18) - gruba jak akcent naglowka,
                   wiec konkurowala z nim o uwage
     ikona ....... 37 x 37 px, tlo 'rgb(0,0,0)' CZYSTA CZERN, obwodka 1 px,
                   'border-radius:50%' - fabryczny komponent Oxygena
     tlo bloku ... '#FCFAF6' od klasy '.bmx-zaczerniony'

   SKAD PAS W TLE: 'czern.js' rozjasnia elementy o czystej czerni i mial
   racje - ten blok BYL czarny. Tyle ze to nie sekcja, tylko separator
   na bialym tle, wiec rozjasnienie zrobilo z niego widoczny pas.
   Dlatego tlo zdejmujemy CALKIEM, zamiast je poprawiac.

   CO JEST TERAZ: wloskowata kreska z obu stron i akcent marki na srodku -
   ten sam gradient granat -> czerwien, ktorego uzywa podkreslnik naglowkow
   (patrz rozdzial "Podkreslnik naglowkow"). Roznica jest jedna: tutaj
   gradient jest SYMETRYCZNY (granat -> czerwien -> granat), bo separator
   nie ma kierunku czytania, a klin z naglowka wygladalby jak strzalka.

   Waga: '.bmx-zaczerniony' ma (0,1,0) z '!important', wiec dokladamy
   'html' -> (0,1,1) i wygrywamy remis specyficznoscia. Czern ikony siedzi
   na identyfikatorze bez '!important', wiec tam wystarcza nasze.
   ============================================================ */

html .oxel_horizontal_divider {
    background-color: transparent !important;
    background-image: none !important;
    align-items: center;
    gap: 18px;
    padding: 0;
    margin-block: clamp(28px, 4vw, 48px);
}

html .oxel_horizontal_divider__line {
    height: 1px !important;
    background-color: rgba(11, 34, 64, .13) !important;
}

/* Srodek separatora to TEN SAM akcent co pod naglowkami - te same tokeny,
   ten sam klin. Wczesniej mial wlasna szerokosc (56 px) i wlasny,
   symetryczny gradient; roznice bylo widac na jednej stronie obok siebie. */
html .oxel_horizontal_divider__icon {
    flex: 0 0 auto;
    width: var(--akcent-szer) !important;
    height: var(--akcent-wys) !important;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--akcent-tlo) !important;
    clip-path: var(--akcent-klin);
}

/* Rysunek w srodku ikony - przy 3 px wysokosci nie ma go jak pokazac. */
html .oxel_horizontal_divider__icon > svg {
    display: none;
}

/* ============================================================
   BIALY TEKST WPISANY W ATRYBUT 'style' TRESCI
   Zgloszenie 2026-09-17: "na kompie jeszcze numer telefonu jest
   niewidoczny / nie mozemy sobie pozwolic na biale linki na bialym tle".

   ZMIERZONE na '/kontakt/dane-kontaktowe/': numer telefonu to
       <span style="color: #ffffff;"><a style="color: #ffffff;" href="tel:...">
   czyli biel siedzi w ATRYBUCIE 'style', a nie w arkuszu. Kontrast
   bialego na bialym to 1:1 - napisu nie ma.

   SKAD SIE TAM WZIELA: redakcja wkleila te tresc, gdy karta miala ciemne
   tlo. Po przebudowie karta jest biala, a kolor zostal. Ten sam mechanizm
   zjadl juz raz naglowki stron tresciowych i liste salonow - patrz
   komentarze w 'strony.css' i 'salony.css'.

   'inherit', A NIE KONKRETNY KOLOR - i to jest sedno. Regula nie zaklada,
   ze tlo jest jasne: element przejmuje kolor swojego kontenera, wiec
   na bialej karcie dostanie granat tresci, a w ciemnej sekcji (gdzie
   biel BYLA poprawna) dalej bedzie jasny. Jedna regula obsluguje oba
   przypadki i nie trzeba zgadywac, ktore tlo jest ktore.

   'text-decoration-color' zerujemy razem z kolorem, bo podkreslenie
   odnosnika dziedziczy kolor osobno i zostawaloby biale.

   Cztery zapisy bieli, bo edytor Oxygena wypisuje je roznie - zmierzone
   na tej jednej stronie: '#ffffff' (6x), '#fff' (10x), 'white' (8x).
   'rgb(255, 255, 255)' dokladamy zapobiegawczo.

   '!important' jest tu KONIECZNE: atrybutu 'style' nie da sie przebic
   zadnym selektorem.
   ============================================================ */

html [style*="color: #ffffff"],
html [style*="color:#ffffff"],
html [style*="color: #fff;"],
html [style*="color:#fff;"],
html [style*="color: #FFF;"],
html [style*="color: white"],
html [style*="color:white"],
html [style*="color: rgb(255, 255, 255)"] {
    color: inherit !important;
    text-decoration-color: inherit !important;
}

/* ============================================================
   PIERWSZA SEKCJA NA TELEFONIE - ODSTEP OD GORNEGO PASKA
   Zgloszenie klientki 2026-09-17 (mobile): "nad naglowkiem na stronie
   salonow sprzedazy w wojewodztwie jest za duzy padding top w sekcji
   pierwszej".

   ZMIERZONE przy 390 px: wewnetrzna otoczka sekcji ma 'padding: 75px 20px'
   - wartosc z Oxygena, ta sama na kazdej szerokosci. Do tego naglowek
   doklada wlasne 'margin-top:15px' i 'padding-top:15px', wiec nad tekstem
   robi sie 105 px, a od dolu paska do naglowka - 90 px. Na ekranie
   wysokim na 844 px zjada to jedna osma widoku, zanim cokolwiek widac.

   ZAKRES: TYLKO pierwsza sekcja tresci, czyli ta zaraz za gornym paskiem
   (rozpoznajemy go po '#breadcrumbs' - patrz rozdzial "Gorny pasek
   podstrony"). Dalsze sekcje zostaja bez zmian, bo tam odstep rozdziela
   dwa bloki tresci i jest potrzebny; tutaj oddziela tresc od paska,
   ktory sam ma juz wlasne wciecia.

   Na desktopie nie ruszamy nic - 75 px przy szerokim ukladzie czyta sie
   poprawnie i klientka zglaszala wylacznie telefon.
   ============================================================ */
@media (max-width: 599px) {
    /* DWA UKLADY, TA SAMA ZASADA.
       Oxygen buduje strony na dwa sposoby: sekcja z okruszkami ma
       nastepna sekcje albo jako SASIADA, albo owinieta w
       '.ct-inner-content' (tak jest np. w koszyku - zgloszenie
       2026-09-17: "na koszyku tez odstep pierwszej sekcji top jest
       za duzy"). Sam selektor sasiada lapal tylko pierwszy przypadek
       i na koszyku zostawalo 75 px wciecia.

       Zasada stala (2026-09-17): NA TELEFONIE PIERWSZA SEKCJA POD
       OKRUSZKAMI MA 40 PX ODSTEPU OD GORY. Kazdy nowy uklad Oxygena
       dopisujemy tutaj, zamiast lepic wyjatek na pojedynczej stronie. */
    body.page .ct-section:has(#breadcrumbs) + .ct-section > .ct-section-inner-wrap,
    body.page .ct-section:has(#breadcrumbs) + .ct-inner-content
        > .ct-section:first-child > .ct-section-inner-wrap {
        /* 40 px - wartosc wskazana przez klientke 2026-09-17.
           To CALY odstep nad naglowkiem: jego wlasne wciecia zerujemy
           regula nizej, wiec nic sie do tej liczby nie dodaje. */
        padding-top: 40px;
    }

    /* NAGLOWEK DOKLADA SWOJE - i to jego nie widac w pomiarze sekcji.
       Zmierzone: '#headline-16-239' ma 'margin-top:15px' ORAZ
       'padding-top:15px', wiec do 24 px sekcji dochodzilo kolejne 30 -
       nad pierwsza litera robilo sie ponad 50 px. Zerujemy TYLKO gore:
       dol trzyma ozdobny akcent pod naglowkiem i nie wolno go ruszyc. */
    body.page .ct-section:has(#breadcrumbs) + .ct-section > .ct-section-inner-wrap
        > :is(h1, h2, h3, .ct-headline):first-child,
    body.page .ct-section:has(#breadcrumbs) + .ct-inner-content
        > .ct-section:first-child > .ct-section-inner-wrap
        > :is(h1, h2, h3, .ct-headline):first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}