/* nl-glowna.css — warstwa interaktywna strony głównej (klon 1do1):
   widoczność desktop/mobile, hamburger, menu off-canvas, baner cookies.
   Współpracuje z nl-glowna.js. Tokeny z nl-tryb.css (z fallbackami). */

/* --- widoczność zależna od szerokości --- */
@media (max-width: 960px){ [data-hide="mobile"]{ display:none !important; } }
@media (min-width: 961px){
  [data-hide="desktop"], [data-only="phone"], [data-only="mobile"]{ display:none !important; }
  /* hamburger „mobile-only" (strona główna, gdzie desktop ma mega-menu) chowamy na desktopie;
     zwykły .nl-burger (podstrony bez mega-menu) zostaje widoczny na każdej szerokości */
  .nl-burger--mobo{ display:none !important; }
}

/* --- dropdowny mega-menu: panel domyślnie ukryty (inline display:none), JS pokazuje --- */
[data-nl-navbtn]{ position:relative; }
[data-nl-navpanel]{ z-index:80; }

/* --- hamburger (tylko mobile) --- */
.nl-burger{ position:fixed; top:14px; right:14px; z-index:210; width:46px; height:46px; padding:0;
  border:0; border-radius:12px; background:rgba(20,16,18,.55); backdrop-filter:blur(6px); cursor:pointer;
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.nl-burger span{ display:block; width:24px; height:2px; border-radius:2px;
  background:var(--nl-zloto-etyk, #c9a86a); transition:transform .22s ease, opacity .22s ease; }
.nl-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nl-burger.open span:nth-child(2){ opacity:0; }
.nl-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Hamburger i przycisk wyszukiwarki są position:fixed w prawym górnym rogu
   (razem zajmują strefę 114 px od krawędzi).
   Poniżej 1312 px wchodził na numer telefonu w nagłówku — zakrywał 36 z 70 px,
   przez co dotknięcie prawej części numeru otwierało menu zamiast dzwonić.
   Rezerwujemy mu miejsce, zamiast pozwalać nachodzić na cel dotykowy. */
@media (max-width:1311px){
  [data-naglowek] a[href^="tel:"]{ margin-right:112px; }
}
/* Na stronie głównej hamburger znika od 961 px (mega-menu), więc tam nie rezerwujemy. */
@media (min-width:961px) and (max-width:1311px){
  body:has(.nl-burger--mobo) [data-naglowek] a[href^="tel:"]{ margin-right:0; }
}

/* Strona główna ma inny nagłówek niż podstrony (tam ikony kontaktowe są w stopce):
   rząd ikon mail / mapa / telefon / WhatsApp kończy się 24 px od krawędzi kontenera
   i wpadał pod przyciski w rogu — kliknięcie ikony „Telefon" otwierało wyszukiwarkę
   zamiast dzwonić. Rezerwujemy pas, zamiast pozwolić elementom się nakładać.
   Kontener 1240 px + 24 px oddechu: od 1420 px odstęp jest już większy niż pas. */
:root{ --nl-strefa-narozna:60px; }                  /* 14 + 46 — w rogu został sam hamburger */
@media (min-width:961px){
  body:has(.nl-burger--mobo){ --nl-strefa-narozna:0px; }    /* strona główna: hamburger schowany, róg pusty */
}
@media (max-width:1419px){
  [style*="padding:20px 24px 6px"]{
    padding-right:calc(24px + var(--nl-strefa-narozna)) !important;
  }
}

/* --- menu mobilne off-canvas --- */
.nl-mnav-overlay{ position:fixed; inset:0; z-index:190; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .28s ease; }
.nl-mnav-overlay.open{ opacity:1; pointer-events:auto; }
.nl-mnav{ position:fixed; top:0; right:0; bottom:0; z-index:200; width:min(90vw,400px);
  background:var(--nl-tlo, #171114); border-left:1px solid var(--nl-linia, rgba(255,255,255,.12));
  transform:translateX(100%); transition:transform .3s cubic-bezier(.23,1,.32,1);
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:24px 20px 96px; }
.nl-mnav.open{ transform:translateX(0); box-shadow:-16px 0 48px rgba(0,0,0,.4); }
/* Nagłówek panelu: sygnet zamiast napisu „Menu”, pełniący rolę drogi do strony
   głównej — tej pozycji w menu wcześniej nie było wcale. Wiersz istniał już
   przedtem, więc funkcja nie kosztuje ani piksela w pionie.
   Sygnet ma 30 px, ale pole dotyku 44×44, bo to pełnoprawny odnośnik.
   Ujemny margines dosuwa lewą krawędź znaku do linii tekstu pozycji poniżej:
   znak siedzi wyśrodkowany w polu 44 px, czyli 7 px od jego brzegu, a pozycje
   listy mają 4 px wcięcia — stąd −3 px. */
.nl-mnav-head{ display:flex; align-items:center; padding:0 4px 8px; margin-bottom:6px; border-bottom:1px solid var(--nl-linia, rgba(255,255,255,.12)); }
.nl-mnav-dom{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-left:-7px; border-radius:100px;
  transition:background-color 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1);
}
.nl-mnav-dom img{ width:30px; height:30px; object-fit:contain; display:block; }
@media (hover:hover){ .nl-mnav-dom:hover{ background:rgba(201,168,106,.12); } }
.nl-mnav-dom:active{ transform:scale(0.94); }
.nl-mnav-dom:focus-visible{ outline:2px solid var(--nl-zloto-orn, #B08D57); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .nl-mnav-dom{ transition:none; } .nl-mnav-dom:active{ transform:none; } }
.nl-mnav-head span{ font-family:var(--nl-font-tresc, inherit); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--nl-zloto-etyk, #c9a86a); font-weight:600; }
.nl-macc{ border-bottom:1px solid var(--nl-linia, rgba(255,255,255,.10)); }
.nl-macc > summary{ list-style:none; cursor:pointer; padding:15px 4px; font-size:16px; font-weight:600;
  color:var(--nl-tekst, #EAD6DF); display:flex; justify-content:space-between; align-items:center; }
.nl-macc > summary::-webkit-details-marker{ display:none; }
.nl-macc > summary::after{ content:'+'; font-size:20px; line-height:1; color:var(--nl-zloto-etyk, #c9a86a); }
.nl-macc[open] > summary::after{ content:'\2212'; }
.nl-macc-body{ padding:2px 4px 12px; }
.nl-macc-body p{ margin:12px 0 2px !important; padding:0 !important; font-size:11px !important;
  letter-spacing:.13em; text-transform:uppercase; color:var(--nl-zloto-etyk, #c9a86a) !important; font-weight:600; }
.nl-macc-body a{ display:block !important; padding:9px 0 !important; font-size:15px !important;
  color:var(--nl-tekst-4, #cbb8c0) !important; text-decoration:none; }
.nl-macc-body a:active{ color:var(--nl-zloto-etyk, #c9a86a) !important; }
.nl-mnav-extra{ margin-top:6px; padding-top:8px; border-top:1px solid var(--nl-linia, rgba(255,255,255,.10)); }
.nl-mnav-extra a{ font-weight:600 !important; color:var(--nl-tekst, #EAD6DF) !important; }


/* --- baner cookies i ustawienia zgody: style w nl-zgoda.js (wstrzykiwane, bo landingi /ads/ nie ładują tego pliku) --- */
/* kalendarz Booksy przed zgodą: informacja i przyciski w miejscu ramki (iframe tworzy nl-glowna.js) */
.nl-osadzenie-info{ margin:0 0 20px; max-width:44em; font-size:16px; line-height:1.65; color:var(--nl-tekst-2); }
.nl-osadzenie-przyciski{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* --- dokumenty: opisy w kartach (polityka prywatności i cookies) ---
   Tabele z długim tekstem w czterech i pięciu kolumnach nie mieszczą się na telefonie, więc pozycja to karta:
   nagłówek i lista opisów; od 640 px etykieta stoi obok wartości. */
.nl-dl{ margin:0; display:grid; grid-template-columns:minmax(0,1fr); }
.nl-dl dt{ margin:12px 0 2px; font-size:13.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--nl-tekst-pom); }
.nl-dl dd{ margin:0; font-size:16px; line-height:1.6; color:var(--nl-tekst-2); }
@media (min-width: 640px){
  .nl-dl{ grid-template-columns:9.5em minmax(0,1fr); column-gap:20px; }
  .nl-dl dt, .nl-dl dd{ margin:0; padding:10px 0; border-top:1px solid var(--nl-linia-lekka); }
  .nl-dl dt{ line-height:1.9; }
  .nl-dl dt:first-of-type, .nl-dl dt:first-of-type + dd{ border-top:0; }
}

/* --- Wideo zabiegowe: własny odtwarzacz ------------------------------------
   Natywny pasek sterowania jest nie nasz: inaczej wygląda w każdej przeglądarce,
   sam decyduje o swojej pozycji i rysuje się na własnej warstwie GPU, przez co
   zjadał nakładki obok siebie. Budujemy własny — wtedy kolory, kształt i zestaw
   przycisków są nasze. Ścieżki audio w plikach nie ma (licencja muzyki z Reels
   obejmuje wyłącznie Instagram), więc miejsce po głośniku zajmuje przycisk
   platformy prowadzący do oryginału z dźwiękiem.
   Bez JS w znacznikach zostaje natywne controls — film działa tak czy inaczej. --- */

.nl-wideo{ position:relative; display:block; background:#000; }
.nl-wideo video{ display:block; width:100%; border-radius:inherit; }

/* wariant A: zaokrąglony kadr, spójny z kartami serwisu */
.nl-wideo--zaokraglony{ border-radius:14px; overflow:hidden; }

/* wariant B: passe-partout w złotej włosowej ramce */
.nl-wideo--ramka{
  border-radius:3px; padding:10px; background:var(--nl-tlo-2);
  box-shadow:inset 0 0 0 1px var(--nl-zloto-orn);
}
.nl-wideo--ramka video{ border-radius:2px; }

/* --- Film pionowy obok tekstu (2026-09-27, Michał: „film za duży, nie mieści się; lepiej dwie kolumny i tekst”) ---
   Nagranie 9:16 na pełną szerokość kolumny treści miało ok. 1380 px wysokości i nie mieściło się na ekranie.
   Teraz na komputerze stoi w wąskiej kolumnie obok opisu, a na telefonie pod opisem, nie wyżej niż ok. 3/4 ekranu.
   Znaczniki: <div class="nl-wideo-uklad"><div class="nl-wideo-tekst">opis</div><div class="nl-wideo …">film</div></div>
   (opis przed filmem w kodzie, więc czytnik ekranu czyta go pierwszy; aria-describedby filmu bez zmian). */
.nl-wideo-uklad{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin:8px 0 32px; }
.nl-wideo-uklad > .nl-wideo,
.nl-wideo-uklad > .nl-wideo-fig{ width:min(100%, 340px, calc(76svh * 9 / 16 + 20px)); justify-self:center; }
.nl-wideo-fig{ margin:0; }   /* film z podpisem: <figure class="nl-wideo-fig"><div class="nl-wideo …">…</div><figcaption>…</figcaption></figure> */
.nl-wideo-tekst > :first-child{ margin-top:0; }
.nl-wideo-tekst > :last-child{ margin-bottom:0; }
@media (min-width:760px){
  .nl-wideo-uklad{ grid-template-columns:minmax(220px, 300px) minmax(0,1fr); gap:clamp(24px,3vw,40px); align-items:start; }
  .nl-wideo-uklad > .nl-wideo,
  .nl-wideo-uklad > .nl-wideo-fig{ grid-column:1; grid-row:1; width:100%; justify-self:stretch; }
  .nl-wideo-uklad > .nl-wideo-tekst{ grid-column:2; grid-row:1; }
}

/* pasek sterowania — wjeżdża po najechaniu i po fokusie z klawiatury */
.nl-odt{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  transform:translateZ(0);                    /* własna warstwa, ponad wideo */
  display:flex; align-items:center; gap:10px;
  padding:14px 12px 10px;
  background:linear-gradient(to top, rgba(10,7,8,.78), rgba(10,7,8,.36) 55%, rgba(10,7,8,0));
  opacity:0; transition:opacity 220ms var(--nl-ease,ease); pointer-events:none;
}
.nl-wideo--ramka .nl-odt{ left:10px; right:10px; bottom:10px; border-radius:0 0 2px 2px; }
.nl-wideo:hover .nl-odt,
.nl-wideo:focus-within .nl-odt{ opacity:1; pointer-events:auto; }
/* na dotyku nie ma czym najechać — pasek zostaje */
@media (hover:none){ .nl-odt{ opacity:1; pointer-events:auto; } }
@media (prefers-reduced-motion:reduce){ .nl-odt{ transition:none; } }

.nl-odt button,
.nl-odt a{
  flex:0 0 auto; width:30px; height:30px; padding:0; border:0; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#fff; cursor:pointer; text-decoration:none;
  transition:background 180ms var(--nl-ease,ease), color 180ms var(--nl-ease,ease);
}
.nl-odt svg{ width:17px; height:17px; }
.nl-odt a svg{ width:16px; height:16px; }
@media (hover:hover){
  .nl-odt button:hover,
  .nl-odt a:hover{ background:rgba(255,255,255,.16); color:var(--nl-zloto-orn,#c9a86a); }
}
.nl-odt button:focus-visible,
.nl-odt a:focus-visible{ outline:2px solid var(--nl-zloto-orn); outline-offset:2px; }

/* pasek postępu — złota nitka, bo to jedyny akcent koloru w kadrze */
.nl-odt-postep{
  flex:1 1 auto; height:3px; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.30); position:relative;
}
.nl-odt-postep::before{ content:""; position:absolute; inset:-9px 0; }  /* większy cel dotykowy */
.nl-odt-postep i{
  position:absolute; left:0; top:0; bottom:0; width:0; border-radius:2px;
  background:var(--nl-zloto-orn,#c9a86a); display:block;
}
.nl-odt-postep:focus-visible{ outline:2px solid var(--nl-zloto-orn); outline-offset:6px; }

.nl-odt-czas{ flex:0 0 auto; font:500 11.5px/1 var(--nl-font-tresc,inherit); color:rgba(255,255,255,.86);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; }

@media print{ .nl-odt{ display:none !important; } }

/* --- Kalkulator serii i kosztu (strony cenników). Bez JS przycisków nie ma. --- */
/* Wygląd przycisku stoi TUTAJ, a nie w atrybucie style. Skrypt wpisywał wcześniej
   all:unset, co ustawiało także outline:none, a że styl w elemencie wygrywa z arkuszem,
   żaden z 455 przycisków nie pokazywał obwódki fokusu i reguła hover była martwa. */
[data-kalkulator="jest"] ul.nl-cen li:not(.nl-cen-glowka){ position:relative; }
[data-kalk-dodaj]{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; padding:0; margin:0 0 0 9px;
  width:26px; height:26px; box-sizing:border-box; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  border-radius:8px; font:600 15px/1 system-ui, sans-serif;
  color:var(--nl-zloto-etyk,#c9a86a);
  box-shadow:inset 0 0 0 1px var(--nl-linia,rgba(255,255,255,.18));
  transition:background-color 160ms ease, color 160ms ease;
}
@media (hover:hover){
  [data-kalk-dodaj]:hover{ background:var(--nl-zloto-orn,#c9a86a); color:var(--nl-tlo,#171114); }
}
[data-kalk-dodaj]:focus-visible{ outline:2px solid var(--nl-zloto-orn); outline-offset:2px; }
/* Wariant wybrany: wypełniony, ze znakiem potwierdzenia. */
[data-kalk-dodaj][aria-pressed="true"]{
  background:var(--nl-zloto-etyk,#c9a86a); color:var(--nl-tlo,#0E1714);
  box-shadow:inset 0 0 0 1px var(--nl-zloto-etyk,#c9a86a);
}
/* Wiersz w zestawieniu. Inne tło niż hover, żeby dało się je rozróżnić:
   hover jest przelotny, a ten stan oznacza wybór. */
li[data-kalk-dodany]{
  background:var(--nl-tlo-2, rgba(255,255,255,.05));
  box-shadow:inset 2px 0 0 var(--nl-zloto-etyk,#c9a86a);
}
/* --- Panel zestawienia --- */
[data-kalk-panel]{
  position:fixed; right:16px; z-index:150;
  bottom:calc(16px + var(--nl-pas-dolny, 0px) + env(safe-area-inset-bottom, 0px));
  width:min(340px, calc(100vw - 32px));
  box-sizing:border-box; padding:14px 16px; border-radius:16px;
  background:var(--nl-tlo-karta,#241b1f); color:var(--nl-tekst,#EAD6DF);
  border:1px solid var(--nl-linia,rgba(255,255,255,.14));
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  max-height:70vh; overflow-y:auto; overscroll-behavior:contain;
}
[data-kalk-pasek]{ display:flex; align-items:center; gap:10px; }
[data-kalk-pasek] [data-kalk-tytul]{ flex:1 1 auto; }
[data-kalk-skrot]{ display:none; }
[data-kalk-zwin]{
  appearance:none; -webkit-appearance:none; background:transparent; border:0;
  flex:0 0 auto; width:32px; height:32px; margin:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:15px; line-height:1;
  color:var(--nl-tekst-pom,#a99098);
  box-shadow:inset 0 0 0 1px var(--nl-linia,rgba(255,255,255,.18));
}
[data-kalk-panel][data-kalk-stan="zwiniety"] [data-kalk-tresc]{ display:none; }
[data-kalk-panel][data-kalk-stan="zwiniety"]{ max-height:none; overflow:visible; }
[data-kalk-panel][data-kalk-stan="zwiniety"] [data-kalk-pasek]{ align-items:baseline; }

/* Tryb wyceny indywidualnej. Powyżej progu formularz jest jedyną rzeczą do zrobienia,
   więc treści drugorzędne ustępują mu miejsca. Suma zostaje czytelna, tylko wygaszona
   i podpisana: nie przekreślamy jej, bo przekreślona cena znaczy obniżkę, a tu żadnej
   obniżki nie ma. */
[data-kalk-panel][data-kalk-tryb="wycena"] [data-kalk-drugorzedne]{ display:none !important; }
[data-kalk-panel][data-kalk-tryb="wycena"] [data-kalk-suma]{
  color:var(--nl-tekst-pom,#a99098); font-weight:500;
}
[data-kalk-panel][data-kalk-tryb="wycena"] [data-kalk-wycena]{
  border-color:var(--nl-zloto-etyk,#c9a86a);
}
/* Sama zmiana kolejności nie wystarczyła: przy pięciu pozycjach wykaz spychał formularz
   740 px w dół panelu wysokiego na 546 px. W trybie wyceny wykaz dostaje własne okno
   z przewijaniem, żeby suma i formularz mieściły się bez szukania. */
/* W trybie wyceny panel dostaje więcej wysokości, bo formularz z klauzulą to
   nieusuwalne 400 px, a przy 70vh przycisk wysyłki wypadał poniżej krawędzi. */
[data-kalk-panel][data-kalk-tryb="wycena"]{ max-height:84vh; }
[data-kalk-panel][data-kalk-tryb="wycena"] [data-kalk-lista]{
  max-height:132px; overflow-y:auto; overscroll-behavior:contain;
  padding-right:4px; margin-bottom:8px;
}

/* Telefon: panel jest arkuszem przy dolnej krawędzi, domyślnie zwiniętym do jednego
   paska z sumą. Rozwinięty zajmuje najwyżej trzy czwarte ekranu i zawsze da się go
   zwinąć, bo przycisk siedzi w pasku, który zostaje na wierzchu. */
@media (max-width:640px){
  [data-kalk-panel]{
    left:8px; right:8px; width:auto;
    bottom:calc(8px + var(--nl-pas-dolny, 0px) + env(safe-area-inset-bottom, 0px));
    max-height:min(76vh, 620px); padding:12px 14px;
  }
  [data-kalk-pasek]{ flex-wrap:wrap; }
  [data-kalk-pasek] [data-kalk-tytul]{ flex:1 0 100%; }
  [data-kalk-skrot]{ display:block; flex:1 1 auto; }
  [data-kalk-zwin]{ width:44px; height:44px; }
  [data-kalk-panel][data-kalk-stan="rozwiniety"] [data-kalk-pasek]{
    position:sticky; top:-12px; z-index:2; margin:-12px -14px 8px; padding:12px 14px;
    background:var(--nl-tlo-karta,#241b1f);
    border-bottom:1px solid var(--nl-linia-lekka,rgba(255,255,255,.08));
  }
}

/* Przyciski wewnątrz panelu też muszą pokazywać fokus. */
[data-kalk-panel] button:focus-visible, [data-kalk-panel] a:focus-visible,
[data-kalk-panel] input:focus-visible{
  outline:2px solid var(--nl-zloto-orn); outline-offset:2px;
}
@media print{
  [data-kalk-dodaj], [data-nl-szukaj], [data-szukaj-otworz], .nl-burger{ display:none !important; }
  /* Zestawienie na papierze: zawsze rozwinięte, zawsze ciemny tekst na białym tle.
     W trybie ciemnym drukowały się jasne litery na białej kartce, czyli nic. */
  [data-kalk-panel]{
    position:static !important; box-shadow:none !important; max-height:none !important;
    width:100% !important; border:1px solid #999 !important; overflow:visible !important;
    background:#fff !important; color:#111 !important; padding:0 !important;
  }
  [data-kalk-panel] *{ color:#111 !important; background:transparent !important; }
  [data-kalk-panel] [data-kalk-tresc]{ display:block !important; }
  [data-kalk-panel] [data-kalk-zwin], [data-kalk-panel] [data-kalk-usun],
  [data-kalk-panel] [data-kalk-link], [data-kalk-panel] [data-kalk-drukuj],
  [data-kalk-panel] [data-kalk-czysc], [data-kalk-panel] [data-kalk-wycena],
  [data-kalk-panel] [data-kalk-zmien]{ display:none !important; }
  /* Przycisk Drukuj oznacza dokument atrybutem, a wtedy na papier idzie samo
     zestawienie. Bez tego drukował się cały cennik, około stu czterdziestu stron. */
  html[data-kalk-druk] body > *:not([data-kalk-panel]){ display:none !important; }
  html[data-kalk-druk] body{ background:#fff !important; }
}

/* --- Lektor: podświetlenie czytanego fragmentu. Kontrast na tle, nie sam kolor tekstu. --- */
[data-lektor-czyta]{
  background:var(--nl-tlo-2, rgba(201,168,106,.14));
  box-shadow:-10px 0 0 var(--nl-tlo-2, rgba(201,168,106,.14)), 10px 0 0 var(--nl-tlo-2, rgba(201,168,106,.14));
  border-radius:2px;
}
[data-lektor-start]{ transition:box-shadow 220ms var(--nl-ease,ease), color 220ms var(--nl-ease,ease); }
@media (hover:hover){
  [data-lektor-start]:hover{ color:var(--nl-link-hover,#e0b679); box-shadow:inset 0 0 0 1px var(--nl-zloto-orn,#c9a86a); }
  [data-lektor-panel] button:hover{ box-shadow:inset 0 0 0 1px var(--nl-zloto-orn,#c9a86a); }
}
[data-lektor-start]:focus-visible, [data-lektor-panel] button:focus-visible, [data-lektor-panel] select:focus-visible{
  outline:2px solid var(--nl-zloto-orn); outline-offset:2px;
}
/* Miejsce na przycisk „Posłuchaj tej strony”. Paczka produkcyjna (buduj-produkcje.py) wstawia je zaraz
   za H1, a nl-lektor.js podmienia je na przycisk. Bez tego przycisk wskakiwał pod H1 już po pierwszym
   malowaniu i spychał treść o 59 px (przesunięcie układu, CLS). Pudełko ma te same wymiary co przycisk
   z nl-lektor.js: inline-flex, odstęp 10/18 px, margines dolny 22 px, pierwszy element 16 x 16 px jak
   ikona i jeden wiersz tekstu 14 px system-ui. Zmieniając wygląd przycisku, zmień też to miejsce. */
[data-lektor-miejsce]{
  all:unset; display:inline-flex; align-items:center; gap:8px; margin:0 0 22px; padding:10px 18px;
  font:500 14px system-ui; visibility:hidden;
}
[data-lektor-miejsce]::before{ content:""; display:block; width:16px; height:16px; }
[data-lektor-miejsce]::after{ content:"\a0"; }
/* Bez JavaScriptu przycisku nie ma, więc nie ma też na co trzymać miejsca. */
@media (scripting:none){ [data-lektor-miejsce]{ display:none; } }
@media print{ [data-lektor-panel], [data-lektor-start], [data-lektor-miejsce]{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ [data-lektor-start]{ transition:none; } }

/* --- Dymki podpowiedzi ------------------------------------------------------
   Natywny title to szara chmurka systemu: w każdym systemie inna, pojawia się
   po sekundzie, nie da się jej ostylować i na dotyku nie działa wcale.
   Zastępujemy własnym dymkiem na tokenach z nl-tryb.css, więc oba tryby
   obsługują się same.

   position:fixed jest tu konieczne, nie kosmetyczne: przycisk platformy siedzi
   w kadrze wideo, a wariant zaokrąglony ma overflow:hidden — dymek pozycjonowany
   absolutnie zostałby przycięty przez ramkę filmu. --- */
.nl-dymek{
  position:fixed; z-index:400; pointer-events:none;
  max-width:260px; padding:8px 12px;
  font:400 13px/1.45 'Alegreya Sans', system-ui, sans-serif;
  letter-spacing:.01em; text-align:left;
  opacity:0; transform:translateY(4px);
  transition:opacity 160ms ease, transform 160ms ease;
}
.nl-dymek[data-widoczny]{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .nl-dymek{ transition:none; transform:none; }
  .nl-dymek[data-widoczny]{ transform:none; }
}

/* --- Kształt zależy od długości tekstu -------------------------------------
   Krótka podpowiedź to jedno zdanie — dostaje pismo, które odsłania się od lewej.
   Długa jest do czytania, nie do oglądania — dostaje rysowaną ramkę, żeby ruch
   przyciągnął wzrok raz, a potem zszedł z drogi. Obie w kursywie Cormorant. --- */

.nl-dymek{ font:italic 400 17px/1.5 'Cormorant Garamond', Georgia, serif; letter-spacing:0; }

/* M — pismo: tekst odsłania się od lewej, jak zapisywany ręcznie */
.nl-dymek--pismo{ border-radius:0; padding:10px 17px; max-width:280px; }
.nl-dymek--pismo::before{ content:""; position:absolute; left:0; top:10px; bottom:10px;
  width:1px; background:var(--nl-zloto-orn); }
.nl-dymek--pismo .nl-dymek-tresc{ display:block; clip-path:inset(0 100% 0 0); }
.nl-dymek--pismo[data-widoczny] .nl-dymek-tresc{ animation:nl-pisz 640ms steps(28,end) forwards; }
@keyframes nl-pisz{ to{ clip-path:inset(0 0 0 0); } }

/* K — rysowana ramka: złota linia obiega kadr, tekst wchodzi za nią */
.nl-dymek--rysowana{ border-radius:0; padding:13px 18px; max-width:330px; font-size:16.5px; }
.nl-dymek--rysowana svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.nl-dymek--rysowana svg rect{ fill:none; stroke:var(--nl-zloto-orn); stroke-width:1;
  vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; }
.nl-dymek--rysowana[data-widoczny] svg rect{ animation:nl-rysuj 720ms cubic-bezier(.4,0,.2,1) forwards; }
.nl-dymek--rysowana[data-widoczny] .nl-dymek-tresc{ animation:nl-wejdz 420ms 180ms ease both; }
@keyframes nl-rysuj{ to{ stroke-dashoffset:0; } }
@keyframes nl-wejdz{ from{ opacity:0; } to{ opacity:1; } }

/* --- Kolor w opozycji do elementu, który dymek opisuje ---------------------
   Silnik odczytuje realne tło przycisku i dobiera przeciwny biegun: ciemny
   przycisk dostaje jasny dymek i odwrotnie. Dzięki temu dymek nigdy nie zlewa
   się z tym, co objaśnia — także po przełączeniu trybu. --- */
.nl-dymek--jasny{
  background:var(--nl-tlo); color:var(--nl-tekst);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.5);
}
.nl-dymek--ciemny{
  background:var(--nl-cta-tlo); color:var(--nl-cta-tekst);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.55);
}
.nl-dymek--ciemny::before{ background:var(--nl-cta-tekst); opacity:.55; }
.nl-dymek--ciemny svg rect{ stroke:var(--nl-cta-tekst); }

/* --- Wariacje pod rodzaj elementu ----------------------------------------- */

/* ikona bez podpisu: jedno słowo, bez łamania — dymek ma być etykietą, nie zdaniem */
.nl-dymek--ikona{ max-width:none; white-space:nowrap; padding:7px 13px; font-size:15px; }

/* link w zdaniu: cichy dopisek, bez pudełka, żeby nie przerywać czytania */
.nl-dymek--link{
  background:var(--nl-tlo); color:var(--nl-tekst-2); box-shadow:none;
  border-top:1px solid var(--nl-zloto-orn); padding:8px 0 0; max-width:300px; font-size:16px;
}
.nl-dymek--link::before{ display:none; }

/* kontrolka w kadrze wideo: tło z pikseli filmu, nie ze strony — stąd własna
   ciemna płaszczyzna niezależna od trybu, inaczej na jasnej klatce zniknie */
.nl-dymek--wideo{
  background:rgba(12,9,10,.88); color:#fff; box-shadow:0 14px 34px -14px rgba(0,0,0,.7);
  padding:8px 14px; font-size:15.5px;
}
.nl-dymek--wideo::before{ background:var(--nl-zloto-orn); }
.nl-dymek--wideo svg rect{ stroke:var(--nl-zloto-orn); }

/* gdy dymek musi nakryć element w całości — mocniejszy cień, żeby czytelnie
   odciął się od tego, co pod nim */
.nl-dymek[data-nakrywa]{ box-shadow:0 22px 60px -18px rgba(0,0,0,.7); }

@media (prefers-reduced-motion:reduce){
  .nl-dymek--pismo[data-widoczny] .nl-dymek-tresc,
  .nl-dymek--rysowana[data-widoczny] svg rect,
  .nl-dymek--rysowana[data-widoczny] .nl-dymek-tresc{ animation:none !important; }
  .nl-dymek--pismo .nl-dymek-tresc{ clip-path:none; }
  .nl-dymek--rysowana svg rect{ stroke-dashoffset:0; }
}

/* --- Podświetlenie trafień w wyszukiwarce ---------------------------------
   Domyślny <mark> to jaskrawa żółć przeglądarki — na ciemnej, stonowanej karcie
   wyników wygląda jak zakreślacz na dokumencie. Zastępujemy ją złotem z palety:
   trafienie ma być widoczne, nie krzykliwe. --- */
[data-nl-szukaj] mark{
  background:rgba(201,168,106,.24); color:var(--nl-naglowek, #F3E7EC);
  font-weight:600; border-radius:2px; padding:0 2px; box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* --- Ikony społecznościowe na stronie głównej -------------------------------
   Te same kółka co w stopce, żeby jeden motyw powtarzał się na górze i na dole.
   Rząd społecznościowy dzieli klasę nlhg1 z rzędem kontaktowym w pasku, więc
   samego `.nlhg1` użyć nie można — pasek jest ciasny i kółka wróciłyby tam do
   kolizji z numerem telefonu, którą już raz naprawialiśmy. Rozróżniamy po
   pojemniku (odstęp 22 px, wyśrodkowany) i po etykiecie dostępności, którą mają
   wyłącznie ikony społecznościowe; przyciski sklepów w tym samym rzędzie jej nie
   mają i zostają nietknięte. --- */
div[style*="gap:22px"][style*="justify-content:center"] > a.nlhg1[aria-label]{
  width:46px; height:46px; border-radius:100px;
  display:inline-flex; align-items:center; justify-content:center;
  /* !important, bo każda z tych ikon ma color w atrybucie style, a inline bije
     arkusz. Obwódka na tokenie złota, nie na --nl-roz-linia: tamten na tym tle
     wychodzi ciemnym fioletem i nitka znika. */
  box-shadow:inset 0 0 0 1px rgba(201,168,106,.38);
  color:var(--nl-zloto-etyk, #c9a86a) !important;
  transition:box-shadow 200ms cubic-bezier(0.23,1,0.32,1), color 200ms cubic-bezier(0.23,1,0.32,1);
}
@media (hover:hover){
  div[style*="gap:22px"][style*="justify-content:center"] > a.nlhg1[aria-label]:hover{
    box-shadow:inset 0 0 0 1px var(--nl-zloto-orn); color:var(--nl-zloto-orn) !important;
  }
}
div[style*="gap:22px"][style*="justify-content:center"] > a.nlhg1[aria-label]:focus-visible{
  outline:2px solid var(--nl-zloto-orn); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  div[style*="gap:22px"][style*="justify-content:center"] > a.nlhg1[aria-label]{ transition:none; }
}

/* --- Ikony kontaktowe w pasku nad logo --------------------------------------
   Złoto, żeby pasek rozmawiał z sygnetami społecznościowymi niżej i z ornamentem
   logo, zamiast świecić bielą tekstu. Rozróżniamy po pojemniku (odstęp 16 px) —
   ten rząd występuje na stronie głównej dokładnie raz, a klasę nlhg1 dzieli z 96
   innymi odnośnikami, więc samego `.nlhg1` użyć nie można. Kółek tu świadomie
   nie ma: pasek jest ciasny i wróciłaby kolizja z numerem telefonu.
   `!important`, bo każdy odnośnik ma color w atrybucie style, a inline bije
   arkusz. Skoro nadpisujemy kolor, hover z .nlhg1 też by zamilkł — stąd własny. */
div[style*="gap:16px"][style*="align-items:center"] > a.nlhg1[aria-label]{
  color:var(--nl-zloto-etyk, #c9a86a) !important;
  transition:color 200ms cubic-bezier(0.23,1,0.32,1);
}
@media (hover:hover){
  div[style*="gap:16px"][style*="align-items:center"] > a.nlhg1[aria-label]:hover{
    color:var(--nl-zloto-orn) !important;
  }
}
div[style*="gap:16px"][style*="align-items:center"] > a.nlhg1[aria-label]:focus-visible{
  outline:2px solid var(--nl-zloto-orn); outline-offset:3px; border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  div[style*="gap:16px"][style*="align-items:center"] > a.nlhg1[aria-label]{ transition:none; }
}

/* --- Hasło „zainspirowani naturalnym pięknem" -------------------------------
   Oryginalna strona ma tu grafikę (zainspirowani-1500180-px.png), a nie tekst —
   dlatego żaden krój nie pasował do wzorca i nie mógł pasować. Bierzemy tę samą
   grafikę, ale nie jako <img>, tylko jako maskę: kształt pochodzi z kanału alfa,
   a kolor z tokenu, więc napis sam dopasowuje się do trybu jasnego i ciemnego.
   Zwykły <img> miałby kolor wypalony w pikselach i w jednym z trybów odstawał.
   Plik przycięty do zawartości (1458×117 zamiast 1500×180) — oryginał miał wokół
   puste marginesy, które psułyby wyśrodkowanie i wymuszały zgadywanie odstępów.
   Tekst został w DOM, ukryty klasą .nl-poza-ekranem: wyszukiwarki i czytniki
   ekranu nadal go widzą, w przeciwieństwie do oryginału, gdzie obrazek ma pusty
   atrybut alt i hasło jest dla nich niewidoczne. */
.nl-haslo{
  display:block; margin:-6px auto 0;
  width:min(520px, 80vw); aspect-ratio:1458 / 117;
  background-color:var(--nl-roz-pom);
  -webkit-mask:url('media/haslo-zainspirowani.png') center/contain no-repeat;
          mask:url('media/haslo-zainspirowani.png') center/contain no-repeat;
}

/* Przyklejony nagłówek strony głównej, wersja mobilna. Stał tu przycisk „Menu",
   który nic nie robił — nie miał podpiętej obsługi, bo skrypt wiąże wyłącznie
   przyciski z data-nl-navbtn — a na dodatek nachodził na niego pływający
   hamburger. Przycisk usunięty; hamburger stoi w tym samym miejscu ekranu
   i jest jedynym sterownikiem nawigacji na wszystkich stronach.
   Po jego usunięciu w wierszu został sam numer telefonu, który przy
   justify-content:space-between wylądowałby dokładnie pod hamburgerem. To ten
   sam błąd, który naprawialiśmy już w pasku kontaktowym: dotknięcie numeru
   trafiało w przycisk w rogu zamiast dzwonić. Rezerwujemy pas zamiast pozwolić
   elementom się nakładać.
   `!important`, bo wiersz ma padding wpisany w atrybut style, a inline bije arkusz. */
@media (max-width:960px){
  header [data-only="mobile"]{ padding-right:var(--nl-strefa-narozna, 60px) !important; }
}

/* --- Wyróżnik: hasło o technologiach laserowych -----------------------------
   Ramka złota zamiast neutralnej linii, żeby zdanie czytało się jako teza
   sekcji, a nie jako kolejna kafelka w siatce. Złoto jest tu celowe: to ten
   sam token co ornament logo i gwiazdki opinii, więc wyróżnienie zostaje
   w języku strony zamiast wprowadzać nowy kolor.
   Delikatne wypełnienie na tym samym tokenie z niskim kryciem — sama kreska
   na ciemnym tle gubi się przy przewijaniu. */
.nl-wyroznik{
  border:1px solid var(--nl-zloto-etyk, #C9A567);
  box-shadow:inset 0 0 0 1px rgba(201,165,103,.14);
  background:color-mix(in srgb, var(--nl-zloto-etyk) 5%, var(--nl-roz-tlo)) !important;
}
@supports not (background: color-mix(in srgb, red 5%, blue)){
  .nl-wyroznik{ background:var(--nl-roz-tlo) !important; }
}

/* ————— przełącznik języka —————
   Pigułka z globem i nazwą języka docelowego zapisaną w tym języku. Bez flagi:
   flaga oznacza kraj, nie język, a angielski nie ma jednego kraju. Kształt
   trzymamy tutaj, nie w skrypcie — odczyt stylu z sąsiada w chwili wstawiania
   przegrywa wyścig z arkuszem i pigułka wychodzi kanciasta. */
.nl-jezyk{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  height:30px; padding:0 12px 0 10px; white-space:nowrap;
  border:1px solid var(--nl-linia); border-radius:100px;
  font:500 13px/1 'Alegreya Sans', system-ui, sans-serif; letter-spacing:.04em;
  color:var(--nl-zloto-etyk); text-decoration:none; background:none;
  transition:border-color 200ms cubic-bezier(0.23,1,0.32,1),
             color 200ms cubic-bezier(0.23,1,0.32,1);
}
/* Flaga w ramce: prostokąt z cienkim obrysem i lekko zaokrąglonym rogiem,
   żeby biel polskiej flagi nie zlewała się z jasnym tłem, a granat brytyjskiej
   nie tonął w ciemnym. Obrys rysujemy cieniem wewnętrznym, bo obramowanie
   powiększyłoby prostokąt i rozjechało wysokość pigułki. */
.nl-jezyk-flaga{
  display:block; width:19px; height:13px; flex:none;
  border-radius:2px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 1px rgba(0,0,0,.18);
  transition:transform 240ms cubic-bezier(0.23,1,0.32,1);
}
.nl-jezyk-flaga svg{ display:block; width:100%; height:100%; }
.nl-jezyk .nl-jezyk-skrot{ display:none; }
.nl-jezyk:active{ transform:scale(0.97); }
@media (hover:hover){
  .nl-jezyk:hover{ border-color:var(--nl-zloto-orn); color:var(--nl-zloto-orn); }
  .nl-jezyk:hover .nl-jezyk-flaga{ transform:translateY(-1px) scale(1.06); }
}
.nl-jezyk:focus-visible{ outline:2px solid var(--nl-fokus, var(--nl-zloto-orn)); outline-offset:3px; }

/* Na wąskim ekranie zostaje sam kod języka: pełne słowo rozpychałoby pasek,
   w którym mieszczą się już tylko sygnet i telefon. */
@media (max-width:560px){
  .nl-jezyk{ padding:0 10px 0 9px; gap:6px; }
  .nl-jezyk .nl-jezyk-nazwa{ display:none; }
  .nl-jezyk .nl-jezyk-skrot{ display:inline; letter-spacing:.1em; }
}

/* Kolumna kontaktowa w hero: pigułka staje pod telefonami, wyrównana do prawej,
   żeby nie rozciągała kolumny i nie łamała jej rytmu. */
/* Podstrona: na szerokim ekranie pigułka stoi w okruszkach, na wąskim w pasku.
   Widoczna jest zawsze dokładnie jedna. Próg 961 px odpowiada progowi, od którego
   nl-szukaj.js zaczyna mierzyć wolne miejsce w pasku. */
/* Ujemny margines pionowy: pigułka jest wyższa od wiersza tekstu okruszków
   i bez tego podnosiła nagłówek o 7 px na 197 stronach. Wiersz ma 18 px
   wyściółki, więc pigułka mieści się w niej bez zachodzenia na treść. */
.nl-jezyk--okruszki{ margin-left:auto; margin-top:-4px; margin-bottom:-4px; align-self:center; }
.nl-jezyk--pasek{ display:none; }
@media (max-width:960px){
  .nl-jezyk--okruszki{ display:none; }
  .nl-jezyk--pasek{ display:inline-flex; }
}

.nl-jezyk--hero{ align-self:flex-end; margin-top:2px; }

/* Rząd ikon nagłówka strony głównej: kontakt, cienka kreska, narzędzia strony.
   Lupa i przełącznik języka mają tę samą wysokość optyczną co ikony kontaktowe
   (22 px) i ten sam kolor, więc czytają się jako część rzędu, a nie jako coś
   doklejonego pod spodem. Kreska bierze odstęp z gap rzędu (16 px z każdej
   strony), przez co przerwa między grupami jest dwa razy większa niż między
   ikonami i grupy widać bez ramek. */
.nl-naglowek-kreska{
  width:1px; height:16px; flex:0 0 auto;
  background:var(--nl-linia);
}
.nl-szukaj-ikona{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; flex:0 0 auto;
  border:0; background:none; cursor:pointer;
  /* Ten sam token co ikony kontaktowe w tym rzędzie, nie --nl-roz-tekst ze
     stylu liniowego ikon: tamten jest nadpisany złotem regułą wyżej, więc
     powtórzenie go tutaj dawało szarą lupę obok złotych ikon. */
  color:var(--nl-zloto-etyk, #c9a86a);
  transition:color 200ms cubic-bezier(0.23,1,0.32,1),
             transform 240ms cubic-bezier(0.23,1,0.32,1);
}
.nl-szukaj-ikona svg{ display:block; }
/* Przełącznik języka bez pigułki: flaga i kod. Nazwa języka zostaje w
   aria-label i w dymku, więc czytnik ekranu dostaje pełną informację, a oko
   tylko dwie litery. */
.nl-jezyk-ikona{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:22px; text-decoration:none;
  color:var(--nl-zloto-etyk, #c9a86a);
  font:500 11.5px/1 'Alegreya Sans', system-ui, sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color 200ms cubic-bezier(0.23,1,0.32,1);
}
.nl-jezyk-ikona .nl-jezyk-flaga{ width:18px; height:12px; }
.nl-szukaj-ikona:active{ transform:scale(0.94); }
@media (hover:hover){
  .nl-szukaj-ikona:hover{ color:var(--nl-zloto-orn); transform:scale(1.08) rotate(-8deg); }
  .nl-jezyk-ikona:hover{ color:var(--nl-zloto-orn); }
  .nl-jezyk-ikona:hover .nl-jezyk-flaga{ transform:translateY(-1px) scale(1.06); }
}
.nl-szukaj-ikona:focus-visible,
.nl-jezyk-ikona:focus-visible{
  outline:2px solid var(--nl-fokus, var(--nl-zloto-orn)); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .nl-szukaj-ikona, .nl-jezyk-ikona, .nl-jezyk-ikona .nl-jezyk-flaga{ transition:none; }
  .nl-szukaj-ikona:hover, .nl-szukaj-ikona:active{ transform:none; }
  .nl-jezyk-ikona:hover .nl-jezyk-flaga{ transform:none; }
}
/* Pasek nawigacji: pigułka domyka rząd pozycji, z odstępem większym niż między nimi,
   bo nie należy do tej samej grupy znaczeniowej. */
.nl-jezyk--nawi{ margin-left:10px; }

.nl-jezyk-menu{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.nl-jezyk--menu{ height:28px; font-size:12.5px; }

@media (prefers-reduced-motion:reduce){
  .nl-jezyk, .nl-jezyk-flaga{ transition:none; }
  .nl-jezyk:active{ transform:none; }
  .nl-jezyk:hover .nl-jezyk-flaga{ transform:none; }
}

/* --- Stopka na telefonie (2026-09-25) ---
   Siatki i odstępy stopki są w stylach inline, ustawione pod komputer: 4 kolumny i prawy margines 216 px na
   wyspę z sygnetem. Przy 320 px kolumny miały po 42 px, słowa wychodziły poza nie, a strona główna (która nie
   przycina przepełnienia) rozpychała się do 389 px (WCAG 1.4.10). Poniżej 900 px dwie kolumny; poniżej 760 px
   dolny wiersz bez marginesu na wyspę, a wyspa wraca do przepływu na końcu stopki. */
@media (max-width: 900px){
  footer div[style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:24px !important; row-gap:28px !important; }
}
@media (max-width: 760px){
  footer div[style*="padding:26px 216px 0 24px"]{ padding:26px 24px 0 !important; }
  footer a[style*="position:absolute"][style*="width:124px"]{ position:static !important; width:96px !important; height:auto !important; padding:18px 0 !important; margin:0 0 28px; }
}

/* Ocena z Booksy w ramkach konsultacji kosmetologicznej (decyzja Michała 2026-09-26; tylko strony kosmetologii).
   Gwiazdki są ozdobą (aria-hidden), treść niesie tekst „5,0 na Booksy, 393 opinie”. */
.nl-ocena{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0 0 14px; font-size:var(--nl-t-drobne); line-height:1.45; color:var(--nl-tekst-2); text-decoration:none; }
.nl-ocena:last-child{ margin:6px 0 0; }
.nl-ocena svg{ width:90px; height:18px; flex:none; fill:var(--nl-zloto-orn, #B08D57); }
.nl-ocena span{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.nl-ocena:hover span, .nl-ocena:focus-visible span{ text-decoration-thickness:2px; }
.nl-ocena:focus-visible{ outline:2px solid var(--nl-zloto-orn, #B08D57); outline-offset:3px; }

/* Najechanie na przycisk główny: tło i napis z tokenów przycisku (jak w nl-sekcja-instytucjonalna.css).
   Kopie stylu w stronach brały tło z --nl-naglowek (w ciemnym motywie jasny beż pod białym napisem),
   a ogólne a:hover nadpisywało kolor napisu kolorem linku (w jasnym motywie #3D0320 na #3D0320).
   Wariant jasny ma własne kolory i zostaje bez zmian. */
.nl-btn:not(.nl-btn--jasny):hover, .nl-btn:not(.nl-btn--jasny):focus-visible{ background-color:var(--nl-cta-tlo-hover); color:var(--nl-cta-tekst); }

/* Znak „+” przy rozwijanych pytaniach (60 stron, span.nl-znak z kolorem ornamentu w atrybucie style). Złoto ornamentu
   nie jest kolorem tekstu: 3,09:1 na białej karcie i 3,70:1 na #16211D (WCAG 1.4.3, 29.09.2026). Złoto etykiet, jak przy
   „+” w .nl-macc: 5,78:1 (jasny) i 7,14:1 (ciemny). !important, bo kolor siedzi w atrybucie; strony i pamięć tłumaczeń bez zmian. */
.nl-znak[style*="--nl-zloto-orn"]{ color:var(--nl-zloto-etyk) !important; }

/* Drobny tekst w kolorze --nl-roz-pom (strona główna PL i EN: podpisy przycisków laserów, zastrzeżenie pod cennikiem,
   „Pobierz w”). Wszystkie takie użycia w atrybutach style to drobny tekst, więc bierzemy ciemniejszy odcień tego samego
   różu (WCAG 1.4.3, decyzja Michała 30.09). Sam token --nl-roz-pom zostaje dla dużego tekstu i elementów nietekstowych. */
[style*="color:var(--nl-roz-pom)"]{ color:var(--nl-roz-pom-tekst) !important; }

/* Ikona WhatsApp przy tekście linku (Kontakt, karta „Telefonicznie”, 2026-09-30; potem dolny pasek): ten sam znak co w stopce,
   jako maska w kolorze linku, więc w HTML zostaje sam tekst (tłumaczenie bez kodu SVG). */
.nl-ikona-wa { display:inline-flex; align-items:center; gap:8px; }
.nl-ikona-wa::before { content:""; flex:none; width:20px; height:20px; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2zm0 2a8 8 0 1 1-4.1 14.9l-.3-.2-2.6.7.7-2.5-.2-.3A8 8 0 0 1 12 4zm4.3 10.1c-.2-.1-1.3-.7-1.5-.8s-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.1-.2 0-.4.1-.5l.4-.5c.1-.2.1-.3.2-.5s0-.3 0-.4l-.7-1.6c-.2-.4-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3A2.8 2.8 0 0 0 6.7 12a5 5 0 0 0 1 2.6 11 11 0 0 0 4.2 3.7c2 .8 2 .6 2.4.5a2.4 2.4 0 0 0 1.6-1.1 2 2 0 0 0 .1-1.1c0-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2zm0 2a8 8 0 1 1-4.1 14.9l-.3-.2-2.6.7.7-2.5-.2-.3A8 8 0 0 1 12 4zm4.3 10.1c-.2-.1-1.3-.7-1.5-.8s-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.1-.2 0-.4.1-.5l.4-.5c.1-.2.1-.3.2-.5s0-.3 0-.4l-.7-1.6c-.2-.4-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3A2.8 2.8 0 0 0 6.7 12a5 5 0 0 0 1 2.6 11 11 0 0 0 4.2 3.7c2 .8 2 .6 2.4.5a2.4 2.4 0 0 0 1.6-1.1 2 2 0 0 0 .1-1.1c0-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (forced-colors: active){ .nl-ikona-wa::before { forced-color-adjust:none; background-color:LinkText; } }

/* Dolny pasek na telefonie, wariant B (Michał 30.09.2026): Zadzwoń z numerem, ikona WhatsApp, drugi przycisk jak dotąd
   (narzedzia/partia-2026-09-30-pasek-whatsapp.py). Kwadraty jak na makiecie; kolory z tokenów, więc pasek działa w obu
   trybach i w paletach działów (tło kontenera zostaje z danej strony). */
.nl-pk { flex:1 1 0; min-width:0; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 8px; border-radius:0; text-align:center; text-decoration:none; font-size:16px; font-weight:600; line-height:1.2; }
.nl-pk small { margin-top:3px; font-size:12.5px; font-weight:400; letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.nl-pk--tel { background:var(--nl-stopka-cta); color:var(--nl-cta-tekst); }
.nl-pk--wa { flex:0 0 58px; border:1px solid var(--nl-zloto-pasek); color:var(--nl-roz-akcent-tekst); }
.nl-pk--wa .nl-ikona-wa::before { width:26px; height:26px; }
.nl-pk--drugi { border:1px solid var(--nl-zloto-pasek); color:var(--nl-tekst); overflow-wrap:anywhere; }
.nl-pk:focus-visible { outline:2px solid var(--nl-zloto-etyk); outline-offset:2px; }
/* Miejsce pod stopką na dolny pasek (telefon): pasek ma 79 px i na końcu strony zasłaniał dół stopki z sygnetem.
   Tylko stopka serwisu (tło --nl-stopka-tlo), nie stopki wpisów; strona główna nie ma już osobnego odstępu 76 px. */
@media (max-width:760px){
  body:has(.nl-pk--wa) footer[style*="--nl-stopka-tlo"] { padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
}