/* fonty.css */
/* Montserrat - SIL Open Font License 1.1 (https://openfontlicense.org),
   (c) The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat).
   Źródło: Google Fonts (css2), podzbiory latin-ext i latin, woff2 z fonts.gstatic.com.
   Plik generuje build/media/pobierz_fonty.py - nie edytować ręcznie. */

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonty/montserrat-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* styl.css */
/* ==========================================================================
   Termo Komin – styl strony statycznej
   Wartości przeniesione z motywu Elementora (kit 5): Montserrat, czerwień #C00000,
   grafit #3F3F3F, ciemne tło #1D1D1D, kontener 1440 px, progi 1024 / 767 px.
   ========================================================================== */

/* Zapasowa czcionka na czas wczytywania Montserrat (font-display: swap): Arial/Roboto z metrykami przeskalowanymi
   do proporcji Montserrat, żeby zamiana czcionek nie przesuwała tekstu (CLS). size-adjust zmierzony w Chromium
   osobno dla każdej grubości (build/kontrola: stosunek szerokości próbek tekstu Montserrat/Arial);
   ascent/descent = metryki Montserrat (968/251 na 1000) podzielone przez size-adjust. */
@font-face {
  font-family: "Montserrat Fallback"; font-weight: 400;
  src: local("Arial"), local("Roboto"), local("Helvetica Neue");
  size-adjust: 112.5%; ascent-override: 86.04%; descent-override: 22.31%; line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Fallback"; font-weight: 500;
  src: local("Arial"), local("Roboto Medium"), local("Roboto"), local("Helvetica Neue");
  size-adjust: 114.36%; ascent-override: 84.65%; descent-override: 21.95%; line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Fallback"; font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica Neue Bold");
  size-adjust: 107.7%; ascent-override: 89.88%; descent-override: 23.31%; line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Fallback"; font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica Neue Bold");
  size-adjust: 109.79%; ascent-override: 88.17%; descent-override: 22.86%; line-gap-override: 0%;
}

:root {
  --czerwony: #C00000;
  --czerwony-ciemny: #990000;
  --grafit: #3F3F3F;
  --tekst: #000000;
  --bialy: #FFFFFF;
  --jasne: #F9F9F9;
  --ciemny: #1D1D1D;
  --szary: #8B8B8B;               /* szary tekst na CIEMNYM tle (stopka: 4,95:1 na #1D1D1D) */
  --szary-tekst: #6B6B6B;         /* szary tekst na JASNYM tle (5,3:1 na bieli, 5,1:1 na #F9F9F9; --szary dawał tylko 3,4:1) */
  --jasnoszary: #B4B4B4;
  --linia: #E3E3E3;
  --fokus: var(--czerwony);       /* kolor obrysu fokusu; na ciemnym i czerwonym tle biały (patrz niżej) */

  --font: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --kontener: 1440px;
  --margines: 140px;              /* boczny odstęp treści na desktopie */
  --sekcja-pion: 80px;            /* odstęp pionowy sekcji */
  --naglowek-wys: 110px;
  --cien: 0 6px 24px rgba(0, 0, 0, .08);
  --przejscie: .2s ease;
}

@media (max-width: 1024px) {
  :root { --margines: 30px; --sekcja-pion: 60px; --naglowek-wys: 90px; }
}
@media (max-width: 767px) {
  :root { --margines: 20px; --sekcja-pion: 40px; --naglowek-wys: 72px; }
}

/* ---------- podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-wys) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--grafit);
  background: var(--bialy);
  padding-top: var(--naglowek-wys);
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
picture { display: contents; }
a { color: var(--czerwony); text-decoration: none; transition: color var(--przejscie); }
a:hover, a:focus-visible { color: var(--czerwony-ciemny); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* Czerwony obrys ma 2,6:1 na #1D1D1D, a na czerwonym tle jest niewidoczny, więc w tych miejscach fokus jest biały. */
.naglowek, .stopka, .sekcja--ciemna, .ramka--ciemna, .cta--ciemne, .cta--czerwone, .cta--zdjecie, .sekcja--zdjecie,
.slajder, .baner, .lightbox, .pomin { --fokus: var(--bialy); }
.sekcja--zdjecie .karta-wpisu { --fokus: var(--czerwony); }   /* jasne karty na zdjęciu mają znów czerwony obrys */
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
strong, b { font-weight: 600; color: inherit; }
hr { border: 0; border-top: 1px solid var(--linia); margin: 2em 0; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: 15px; }
th, td { border: 1px solid var(--linia); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--jasne); color: var(--tekst); font-weight: 600; }
tbody tr:nth-child(even) td { background: #FCFCFC; }
.tabela-przewijana { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5em; }
.tabela-przewijana table { margin: 0; min-width: 560px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--tekst); line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: 48px; font-weight: 700; line-height: 54px; }
h2 { font-size: 32px; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
@media (max-width: 767px) {
  h1 { font-size: 36px; line-height: 42px; }
  h2 { font-size: 26px; }
}

.tylko-czytniki { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--czerwony); color: var(--bialy); padding: 10px 16px; font-weight: 600; }
.pomin:focus { top: 12px; color: var(--bialy); }
#tresc:focus { outline: none; }   /* <main tabindex="-1"> dostaje fokus programowo (zgody.js po decyzji w banerze); sam nie jest elementem interaktywnym */

.ikona { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; }

/* ---------- układ ---------- */
.kontener { width: 100%; max-width: var(--kontener); margin: 0 auto; padding-left: var(--margines); padding-right: var(--margines); }
.kontener--waski { max-width: 1040px; }
.sekcja { padding: var(--sekcja-pion) 0; }
.sekcja--jasna { background: var(--jasne); }
.sekcja--ciemna { background: var(--ciemny); color: #D8D8D8; }
.sekcja--ciemna h2, .sekcja--ciemna h3 { color: var(--bialy); }
.sekcja--bez-dolu { padding-bottom: 0; }
.sekcja__wstep { max-width: 860px; margin: 0 auto 40px; text-align: center; }
.siatka { display: grid; gap: 30px; }
.siatka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siatka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.siatka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .siatka--3, .siatka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .siatka--2, .siatka--3, .siatka--4 { grid-template-columns: 1fr; gap: 24px; } }

.dwie-kolumny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.dwie-kolumny--gora { align-items: start; }
.dwie-kolumny--obraz-lewo > :last-child { order: -1; }   /* obraz drugi w kodzie, na desktopie po lewej */
@media (max-width: 1024px) { .dwie-kolumny { gap: 40px; } }
@media (max-width: 767px) { .dwie-kolumny { grid-template-columns: 1fr; gap: 28px; } .dwie-kolumny--obraz-lewo > :last-child { order: 0; } }
.obraz-sekcji img { width: 100%; height: auto; }
.obraz-sekcji--ramka img { box-shadow: var(--cien); }

.naglowek-sekcji { font-size: 32px; font-weight: 600; color: var(--tekst); margin-bottom: 20px; }
.naglowek-sekcji--srodek { text-align: center; }
@media (max-width: 767px) { .naglowek-sekcji { font-size: 26px; } }
.tekst-srodek { text-align: center; }
.tekst-wiodacy { font-size: 16px; color: var(--grafit); }
.akcje { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.akcje--srodek { justify-content: center; }
@media (max-width: 767px) { .akcje--srodek { flex-direction: column; align-items: stretch; } }   /* jednakowa szerokość przycisków (np. dokumenty na /furanflex/) */

/* ---------- przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--bialy); background: var(--czerwony);
  border: 2px solid var(--czerwony); border-radius: 0;
  padding: 14px 26px; cursor: pointer; text-decoration: none;
  transition: background var(--przejscie), color var(--przejscie), border-color var(--przejscie);
}
.przycisk:hover, .przycisk:focus-visible { background: var(--bialy); color: var(--czerwony); text-decoration: none; }
.przycisk .ikona { width: 18px; height: 18px; }
.przycisk--obrys { background: transparent; color: var(--czerwony); }
.przycisk--obrys:hover, .przycisk--obrys:focus-visible { background: var(--czerwony); color: var(--bialy); }
.przycisk--jasny { background: var(--bialy); color: var(--czerwony); border-color: var(--bialy); }
.przycisk--jasny:hover, .przycisk--jasny:focus-visible { background: transparent; color: var(--bialy); }
.przycisk--naglowek { padding: 15px; white-space: nowrap; }

/* ---------- nagłówek i menu ---------- */
.naglowek {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--ciemny); min-height: var(--naglowek-wys);
  display: flex; align-items: center;
  transition: box-shadow var(--przejscie);
}
.naglowek--cien { box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.naglowek__wnetrze {
  width: 100%; max-width: var(--kontener); margin: 0 auto;
  padding: 0 30px; display: flex; align-items: center; gap: 20px;
}
.naglowek__logo { flex: 0 0 auto; width: 225px; max-width: 40vw; }
.naglowek__logo img { width: 100%; height: auto; }
.menu { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.menu__lista { list-style: none; margin: 0; padding: 0 30px 0 0; display: flex; align-items: center; gap: 4px; }
.menu__pozycja { position: relative; display: flex; align-items: center; }
.menu__link {
  display: block; color: var(--bialy); font-size: 16px; font-weight: 500; padding: 12px 14px;
  position: relative; text-decoration: none; white-space: nowrap;
}
.menu__lista > .menu__pozycja > .menu__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px;
  background: var(--czerwony); transform: scaleX(0); transition: transform var(--przejscie);
}
.menu__link:hover, .menu__link:focus-visible { color: var(--bialy); text-decoration: none; }
.menu__lista > .menu__pozycja:hover > .menu__link::after,
.menu__lista > .menu__pozycja > .menu__link:focus-visible::after,
.menu__lista > .menu__pozycja--aktywna > .menu__link::after { transform: scaleX(1); }
.menu__rozwin { background: none; border: 0; color: var(--bialy); padding: 6px; margin-left: -10px; cursor: pointer; display: inline-flex; }
.menu__rozwin .ikona { width: 16px; height: 16px; transition: transform var(--przejscie); }
.menu__podmenu {
  list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 0; min-width: 280px;
  background: var(--ciemny); box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--przejscie), transform var(--przejscie), visibility var(--przejscie);
}
.menu__podmenu .menu__link { font-weight: 400; padding: 10px 20px; white-space: normal; }
.menu__podmenu .menu__link:hover, .menu__podmenu .menu__link:focus-visible, .menu__podmenu .menu__link[aria-current="page"] { background: var(--czerwony); }
.menu__pozycja--rozwijana:hover > .menu__podmenu,
.menu__pozycja--rozwijana:focus-within > .menu__podmenu,
.menu__pozycja--otwarta > .menu__podmenu { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1280px) {
  /* Esc zamyka podmenu mimo :hover i :focus-within; klasę --zamknieta zdejmuje main.js po zjechaniu myszą lub przeniesieniu fokusu */
  .menu__pozycja--rozwijana.menu__pozycja--zamknieta > .menu__podmenu { opacity: 0; visibility: hidden; transform: translateY(6px); }
}
.menu__przelacznik { display: none; background: none; border: 0; color: var(--bialy); padding: 8px; cursor: pointer; }
.menu__przelacznik .ikona { width: 30px; height: 30px; }
.menu__ikona-zamknij { display: none; }
.menu__pozycja--tel { display: none; }

/* Menu w nagłówku ma 7 pozycji: pełne mieści się od 1280 px (ciaśniejsze odstępy), a numer telefonu obok niego
   dopiero od 1440 px – pomiędzy przycisk telefonu pokazuje samą ikonę. Poniżej 1280 px menu jest szufladą (☰). */
@media (min-width: 1280px) {
  .menu__lista { padding-right: 10px; }
  .menu__link { padding: 12px 11px; }
  .menu__lista > .menu__pozycja > .menu__link::after { left: 11px; right: 11px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .przycisk--naglowek span { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .przycisk--naglowek .ikona { width: 20px; height: 20px; }
}

@media (max-width: 1279px) {
  .naglowek__wnetrze { padding: 0 30px; justify-content: space-between; }
  .menu { flex: 0 0 auto; order: 2; }
  .przycisk--naglowek { order: 3; }
  .menu__przelacznik { display: inline-flex; }
  .menu__lista {
    position: fixed; top: var(--naglowek-wys); left: 0; right: 0; bottom: 0; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0 40px;
    background: var(--ciemny); border-top: 1px solid #333;
    transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  .menu--otwarte .menu__lista { transform: none; visibility: visible; }
  .menu--otwarte .menu__ikona-otworz { display: none; }
  .menu--otwarte .menu__ikona-zamknij { display: inline; }
  .menu__pozycja { flex-wrap: wrap; border-bottom: 1px solid #2c2c2c; }
  .menu__pozycja > .menu__link { flex: 1 1 auto; padding: 16px 30px; font-size: 17px; }
  .menu__lista > .menu__pozycja > .menu__link::after { display: none; }
  .menu__rozwin { padding: 16px 30px; margin: 0; }
  .menu__pozycja--otwarta > .menu__rozwin .ikona { transform: rotate(180deg); }
  .menu__podmenu {
    position: static; flex: 1 1 100%; min-width: 0; box-shadow: none; padding: 0 0 8px;
    opacity: 1; visibility: inherit; transform: none; display: none; background: #262626;
  }
  /* podmenu otwiera wyłącznie klasa --otwarta (strzałka); reguła na :hover ukrywała je po stuknięciu, bo na dotyku :hover zostaje.
     Widoczność dziedziczy po liście także tutaj (reguła --otwarta poza tym zapytaniem ustawia visible i wygrywałaby specyficznością):
     zamknięte menu (lista visibility: hidden) chowa wtedy rozwinięte podmenu, więc jego linków nie osiągnie Tab ani czytnik ekranu */
  .menu__pozycja--otwarta > .menu__podmenu { display: block; visibility: inherit; }
  .menu__podmenu .menu__link { padding: 12px 30px 12px 46px; }
  .menu__pozycja--aktywna > .menu__link { color: var(--bialy); background: rgba(192, 0, 0, .25); }
  .menu__pozycja--tel { display: flex; }
  body.menu-otwarte { overflow: hidden; }
}
@media (max-width: 767px) {
  .naglowek__wnetrze { padding: 0 20px; gap: 12px; }
  .naglowek__logo { width: 140px; }
  .przycisk--naglowek { padding: 11px; }
  /* numer znika tylko wizualnie (jak .tylko-czytniki), żeby link tel: miał nazwę dostępną */
  .przycisk--naglowek span { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .przycisk--naglowek .ikona { width: 20px; height: 20px; }
  .menu__pozycja > .menu__link { padding: 15px 20px; }
  .menu__rozwin { padding: 15px 20px; }
  .menu__podmenu .menu__link { padding-left: 36px; }
}

/* ---------- slajder na stronie głównej ---------- */
.slajder { position: relative; height: 785px; max-height: calc(100vh - var(--naglowek-wys)); min-height: 520px; overflow: hidden; background: var(--ciemny); }
.slajder__slajd {
  position: absolute; inset: 0; display: flex; align-items: center;
  background-size: cover; background-position: center; color: var(--bialy);
  opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s;
}
.slajder__slajd::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .29); }   /* nad obrazem tła */
.slajder__slajd--aktywny { opacity: 1; visibility: visible; }
.slajder__tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slajder__tresc { position: relative; z-index: 2; width: 100%; max-width: var(--kontener); margin: 0 auto; padding: 30px 30px 30px 140px; }
.slajder__tresc > * { max-width: 50%; }
.slajder__tytul { font-size: 54px; font-weight: 700; line-height: 1.2; color: var(--bialy); margin-bottom: 20px; }
.slajder__opis { font-size: 16px; color: var(--bialy); margin-bottom: 28px; }
.slajder__strzalka {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: none; border: 0;
  color: var(--bialy); cursor: pointer; padding: 12px; opacity: .85;
}
.slajder__strzalka:hover, .slajder__strzalka:focus-visible { opacity: 1; }
.slajder__strzalka .ikona { width: 40px; height: 40px; }
.slajder__strzalka--lewo { left: 10px; }
.slajder__strzalka--prawo { right: 10px; }
.slajder__kropki { position: absolute; bottom: 24px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; align-items: center; }
/* przycisk ma 24×24 px (obszar klikalny), a sama kropka 12×12 px z obrysem 2 px rysuje ::before, więc wygląd kropki bez zmian */
.slajder__kropka { position: relative; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; }
.slajder__kropka::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--bialy); }
.slajder__kropka[aria-current="true"]::before { background: var(--bialy); }
.slajder__kropka:focus-visible { outline-offset: 0; }
/* przycisk pauzy/wznowienia (tworzy go main.js) stoi przed kropkami; ::after po prawej wyrównuje szerokość, więc kropki zostają na środku */
.slajder__pauza {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 10px; padding: 0;
  border: 2px solid var(--bialy); border-radius: 50%; background: transparent; color: var(--bialy); cursor: pointer;
}
.slajder__pauza:hover, .slajder__pauza:focus-visible { background: rgba(255, 255, 255, .25); }
.slajder__pauza .ikona { width: 14px; height: 14px; vertical-align: 0; }
.slajder__kropki--z-pauza::after { content: ""; flex: 0 0 42px; }
@media (max-width: 1024px) {
  .slajder__tresc { padding: 30px 60px; }
  .slajder__tresc > * { max-width: 70%; }
}
@media (max-width: 767px) {
  .slajder { height: 560px; min-height: 0; }
  .slajder__tresc { padding: 20px 30px 76px; }   /* 76 px na dole: pas kropek i pauzy (24 + 32 px) i zapas, żeby przycisk ich nie zasłaniał */
  .slajder__tresc > * { max-width: 90%; }
  .slajder__tytul { font-size: 35px; }
  .slajder__strzalka { display: none; }
}
/* niskie okna: ten sam zapas pod treścią slajdu na desktopie, a przy bardzo niskich mniejszy tytuł i odstępy
   (kolejność ma znaczenie: późniejsze zapytania nadpisują wcześniejsze) */
@media (max-height: 700px) { .slajder__tresc { padding-bottom: 76px; } }
@media (max-height: 600px) and (min-width: 768px) {
  .slajder__tresc { padding-top: 20px; }
  .slajder__tytul { font-size: 42px; margin-bottom: 14px; }
  .slajder__opis { margin-bottom: 20px; }
}
@media (max-height: 500px) {   /* telefon w poziomie: slajder mieści się w oknie (bez wymuszonych 520 px), treść jest mniejsza */
  .slajder { min-height: 0; }
  .slajder__tresc { padding-top: 16px; }
  .slajder__tytul { font-size: 28px; line-height: 1.15; margin-bottom: 8px; }
  .slajder__opis { font-size: 14px; line-height: 1.45; margin-bottom: 14px; }
}
/* slajdy 2–3 mają jasne niebo pod opisem: mocniejsza nakładka (biały tekst ≥ 4,5:1), na desktopie tylko po stronie tekstu; slajd 1 bez zmian */
.slajder__slajd:not(:first-child)::before { background: rgba(0, 0, 0, .5); }
@media (min-width: 1025px) {
  .slajder__slajd:not(:first-child)::before { background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, .29) 100%); }
}

/* ---------- baner podstron, wpisów i realizacji ---------- */
.baner {
  position: relative; min-height: 404px; display: flex; align-items: center; color: var(--bialy);
  background: linear-gradient(180deg, var(--grafit) 0%, var(--jasne) 100%);
  background-image: var(--tlo-banera, none), linear-gradient(180deg, var(--grafit) 0%, var(--jasne) 100%);
  background-size: cover; background-position: center;
}
.baner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.baner--realizacja { background-image: var(--tlo-banera, none), linear-gradient(180deg, #000 0%, var(--jasne) 100%); }
.baner__wnetrze { position: relative; z-index: 1; padding-top: 30px; padding-bottom: 30px; min-width: 0; }
/* tytuł i okruszki wyśrodkowane jak na obecnej stronie; overflow-wrap to zabezpieczenie przed wyjściem długiego słowa poza kontener */
.baner__tytul { color: var(--bialy); max-width: 1000px; margin: 0 auto 18px; text-align: center; overflow-wrap: break-word; }
@media (max-width: 767px) { .baner { min-height: 260px; } }
/* 320 px: słowo „bezpieczeństwo” przy 36 px (307 px) nie mieści się w kontenerze 280 px (265 px, gdy przeglądarka rysuje pasek przewijania),
   więc poniżej 375 px nagłówek skaluje się z szerokością ekranu (od 375 px wygląd bez zmian) */
@media (max-width: 374px) { .baner__tytul { font-size: 9.4vw; line-height: 1.17; } }

.okruszki ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 6px; font-size: 15px; }
.okruszki li + li::before { content: "»"; margin-right: 6px; color: var(--jasnoszary); }
.okruszki a { color: var(--bialy); text-decoration: underline; text-underline-offset: 3px; }
.okruszki a:hover { color: #FFD6D6; }
.okruszki [aria-current] { color: #E8E8E8; }
@media (max-width: 767px) { .okruszki li:last-child { display: none; } }   /* ostatnia pozycja to tytuł strony, który powtarza H1 */

/* ---------- karty ---------- */
.karta-uslugi { display: flex; flex-direction: column; align-items: flex-start; margin: 10px 0; }
.karta-uslugi__obraz { display: block; width: 100%; overflow: hidden; margin-bottom: 20px; }
.karta-uslugi__obraz img { width: 100%; height: 250px; object-fit: cover; transition: transform .4s ease; }
.karta-uslugi:hover .karta-uslugi__obraz img { transform: scale(1.03); }
.karta-uslugi__tytul { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.karta-uslugi__tytul a { color: var(--tekst); }
.karta-uslugi__tytul a:hover { color: var(--czerwony); text-decoration: none; }
.karta-uslugi__tekst { color: var(--grafit); margin-bottom: 24px; flex: 1 1 auto; }

.karta-wpisu { background: var(--bialy); display: flex; flex-direction: column; box-shadow: var(--cien); height: 100%; }
.karta-wpisu__obraz { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--jasne); }
.karta-wpisu__obraz img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.karta-wpisu:hover .karta-wpisu__obraz img { transform: scale(1.03); }
.karta-wpisu__tresc { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.karta-wpisu__data { font-size: 14px; color: var(--szary-tekst); margin-bottom: 8px; }
.karta-wpisu__tytul { font-size: 18px; font-weight: 600; line-height: 1.35; margin-bottom: 12px; }
.karta-wpisu__tytul a { color: var(--tekst); }
.karta-wpisu__tytul a:hover { color: var(--czerwony); text-decoration: none; }
.karta-wpisu__zajawka { font-size: 15px; margin-bottom: 16px; flex: 1 1 auto; }
.karta-wpisu__wiecej { font-weight: 600; font-size: 15px; color: var(--czerwony); }

/* kafel realizacji jak na oryginale: miniatura 16:9 w całości (infografiki nie są ucinane), tytuł pod obrazem i etykieta „Sprawdź szczegóły »”;
   cała karta jest jednym linkiem (etykieta to span, nie osobny link) */
.karta-realizacji__link { display: flex; flex-direction: column; height: 100%; color: var(--tekst); }
.karta-realizacji__link:hover { text-decoration: none; color: var(--tekst); }
.karta-realizacji__obraz { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--jasne); }
.karta-realizacji__obraz img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.karta-realizacji__link:hover img { transform: scale(1.03); }
.karta-realizacji__tytul { margin: 16px 0 8px; font-size: 18px; font-weight: 600; line-height: 1.35; color: inherit; }
.karta-realizacji__link:hover .karta-realizacji__tytul, .karta-realizacji__link:focus-visible .karta-realizacji__tytul { color: var(--czerwony); }
.karta-realizacji__wiecej { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--czerwony); }

.ramka { background: var(--bialy); padding: 30px; box-shadow: var(--cien); }
.ramka--ciemna { background: var(--ciemny); color: #D8D8D8; }
.ramka--ciemna h2, .ramka--ciemna h3 { color: var(--bialy); }

.ikona-blok { display: flex; gap: 16px; align-items: flex-start; }
.ikona-blok__ikona { color: var(--czerwony); flex: 0 0 auto; }
.ikona-blok__ikona svg { width: 36px; height: 36px; }
.ikona-blok__ikona svg:not(.ikona) { fill: currentColor; }   /* oryginalne ikony SVG; ikony liniowe .ikona bez wypełnienia */
.ikona-blok__tytul { font-size: 18px; font-weight: 600; color: var(--tekst); margin: 0 0 6px; }
.ikona-blok__tekst { margin: 0; }
.ikona-blok--srodek { flex-direction: column; align-items: center; text-align: center; }

/* ---------- listy z ikonami ---------- */
.lista-ikon { list-style: none; padding: 0; margin: 0 0 1.2em; }
.lista-ikon li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.lista-ikon .ikona { color: var(--czerwony); width: 22px; height: 22px; margin-top: 2px; }

/* ---------- FAQ ---------- */
.faq { max-width: 1000px; margin: 0 auto; }
.faq__pozycja { border-bottom: 1px solid var(--linia); }
.faq__pozycja:first-child { border-top: 1px solid var(--linia); }
.faq__pytanie {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 4px; font-size: 18px; font-weight: 600; color: var(--tekst);
}
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie:hover { color: var(--czerwony); }
.faq__ikona { color: var(--czerwony); width: 22px; height: 22px; transition: transform var(--przejscie); }
.faq__pozycja[open] .faq__ikona { transform: rotate(45deg); }
.faq__odpowiedz { padding: 0 4px 20px; }

/* ---------- galeria, karuzela, lightbox ---------- */
.galeria { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galeria--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .galeria--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .galeria, .galeria--4, .galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.galeria__element { display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--jasne); cursor: zoom-in; }
.galeria__img, .galeria__element img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galeria__element:hover img { transform: scale(1.05); }

.karuzela { position: relative; }
.karuzela__tasma {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 3); gap: 30px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px;
  scrollbar-width: thin;
}
.karuzela__element { scroll-snap-align: start; display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--jasne); cursor: zoom-in; }
.karuzela__element img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.karuzela__element:hover img { transform: scale(1.04); }
.karuzela__podpis { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; color: var(--bialy); font-weight: 600; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); }
.karuzela__strzalka {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--czerwony); color: var(--bialy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--cien);
}
.karuzela__strzalka:hover { background: var(--czerwony-ciemny); }
.karuzela__strzalka--lewo { left: -23px; }
.karuzela__strzalka--prawo { right: -23px; }
@media (max-width: 1024px) { .karuzela__tasma { grid-auto-columns: calc((100% - 30px) / 2); } .karuzela__strzalka--lewo { left: -10px; } .karuzela__strzalka--prawo { right: -10px; } }
@media (max-width: 767px) { .karuzela__tasma { grid-auto-columns: 85%; gap: 16px; } .karuzela__strzalka { display: none; } }

.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__ramka { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.lightbox__obraz { max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.lightbox__licznik { color: #CCC; font-size: 14px; margin-top: 10px; }
.lightbox__zamknij, .lightbox__strzalka {
  position: absolute; display: flex; align-items: center; justify-content: center; padding: 10px;
  background: rgba(0, 0, 0, .55); border: 0; border-radius: 50%; color: var(--bialy); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);   /* cienka jasna obwódka: koło widać też na ciemnych zdjęciach */
}
.lightbox__zamknij:hover, .lightbox__strzalka:hover { background: rgba(0, 0, 0, .8); }
.lightbox__zamknij { top: 10px; right: 10px; }
.lightbox__zamknij .ikona, .lightbox__strzalka .ikona { width: 32px; height: 32px; }
.lightbox__strzalka { top: 50%; transform: translateY(-50%); }
.lightbox__strzalka--lewo { left: 6px; }
.lightbox__strzalka--prawo { right: 6px; }

/* ---------- CTA ---------- */
.cta { padding: var(--sekcja-pion) 0; text-align: center; }
.cta--ciemne { background: var(--ciemny); color: #D8D8D8; }
.cta--ciemne .cta__tytul { color: var(--bialy); }
.cta--czerwone { background: var(--czerwony); color: var(--bialy); }
.cta--czerwone .cta__tytul { color: var(--bialy); }
.cta--czerwone .przycisk { background: var(--bialy); color: var(--czerwony); border-color: var(--bialy); }
.cta--czerwone .przycisk:hover { background: transparent; color: var(--bialy); }
.cta--jasne { background: var(--jasne); }
.cta__wnetrze { max-width: 1040px; }
.cta__tytul { font-size: 32px; font-weight: 600; margin-bottom: 16px; }
.cta__tekst { margin: 0 auto 26px; max-width: 820px; }
@media (max-width: 767px) { .cta__tytul { font-size: 24px; } }

/* ---------- treść wpisów i stron tekstowych ---------- */
.artykul { max-width: 900px; margin: 0 auto; }
.artykul__obraz { margin: 0 0 32px; }
.artykul__obraz img { width: 100%; height: auto; }
.artykul__meta { color: var(--szary-tekst); font-size: 14px; margin-bottom: 18px; }
.prose { color: var(--grafit); overflow-wrap: break-word; }   /* długie ciągi znaków (nazwy plików PDF) łamią się zamiast poszerzać stronę */
.prose h2 { color: var(--czerwony); font-size: 28px; margin-top: 1.4em; }
.prose h3 { font-size: 22px; margin-top: 1.3em; }
.prose h4 { margin-top: 1.2em; }
.prose img { height: auto; margin: 1.5em 0; }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-size: 14px; color: var(--szary-tekst); margin-top: 6px; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.5em 0; padding: 12px 22px; border-left: 4px solid var(--czerwony); background: var(--jasne); }
.prose a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.prose a.przycisk { text-decoration: none; }   /* przyciski w treści wpisów nie są podkreślane jak zwykłe linki (kolory hover/focus zostają z .przycisk) */
.wroc { margin-top: 36px; }

.zakres { background: var(--jasne); padding: 30px 34px; border-left: 4px solid var(--czerwony); }
.zakres__tytul { font-size: 22px; margin-bottom: 12px; }
.zakres ul { margin: 0; }

/* ---------- formularz ---------- */
.formularz { display: grid; gap: 18px; }
.formularz__wiersz { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 767px) { .formularz__wiersz { grid-template-columns: 1fr; } }
.formularz label { display: block; font-weight: 600; font-size: 15px; color: var(--tekst); margin-bottom: 6px; }
.formularz input[type="text"], .formularz input[type="email"], .formularz input[type="tel"], .formularz textarea, .formularz select {
  width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--szary); border-radius: 0; background: var(--bialy); color: var(--tekst);
}
.formularz input:focus, .formularz textarea:focus { outline: 2px solid var(--czerwony); outline-offset: 0; border-color: var(--czerwony); }
.formularz textarea { min-height: 150px; resize: vertical; }
.formularz__zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.formularz__zgoda input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--czerwony); }
.formularz__zgoda label { font-weight: 400; color: var(--grafit); margin: 0; }
.formularz__pulapka { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formularz__komunikat { padding: 14px 16px; font-weight: 600; }
.formularz__komunikat a { color: inherit; text-decoration: underline; }   /* numer telefonu w komunikacie to link tel: */
.formularz__komunikat--ok { background: #EAF6EC; color: #1E6B2E; border-left: 4px solid #2E8B44; }
.formularz__komunikat--blad { background: #FDECEC; color: #8F0000; border-left: 4px solid var(--czerwony); }
.formularz button[type="submit"] { justify-self: start; }
.formularz button[disabled] { opacity: .6; cursor: wait; }

/* ---------- wideo i mapa ładowane na żądanie ---------- */
.wideo { position: relative; }
.wideo__start { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; }
.wideo__start img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.wideo__ikona { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--czerwony); color: var(--bialy); display: flex; align-items: center; justify-content: center; }
.wideo__ikona .ikona { width: 34px; height: 34px; margin-left: 4px; }
.wideo__uwaga, .mapa__uwaga { font-size: 13px; color: var(--szary-tekst); margin: 8px 0 0; }
/* uwaga pod filmem w ciemnej sekcji (.mapa ma własne jasne tło, więc jej uwaga zostaje ciemnoszara) */
.sekcja--ciemna .wideo__uwaga, .ramka--ciemna .wideo__uwaga, .cta--ciemne .wideo__uwaga, .sekcja--zdjecie .wideo__uwaga, .cta--zdjecie .wideo__uwaga { color: var(--jasnoszary); }
.wideo iframe, .mapa iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.mapa { background: var(--jasne); padding: 30px; text-align: center; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mapa--wczytana { padding: 0; }
.mapa--wczytana iframe { aspect-ratio: auto; height: 420px; }

/* ---------- opinie ---------- */
.opinie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .opinie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .opinie { grid-template-columns: 1fr; } }
.opinia { background: var(--bialy); padding: 26px; box-shadow: var(--cien); display: flex; flex-direction: column; gap: 12px; }
.opinia__gwiazdki { color: #F5A623; display: flex; gap: 2px; }
.opinia__gwiazdki .ikona { width: 18px; height: 18px; }
.opinia__tekst { margin: 0; font-size: 15px; flex: 1 1 auto; }
.opinia__autor { font-weight: 600; color: var(--tekst); font-size: 15px; }

/* ---------- stopka ---------- */
.stopka { background: var(--ciemny); color: var(--szary); font-size: 16px; }
.stopka a { color: var(--szary); }
.stopka a:hover, .stopka a:focus-visible { color: var(--bialy); text-decoration: none; }
.stopka__gora { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 50px; padding-top: 60px; padding-bottom: 40px; }
.stopka__logo { display: block; width: 225px; margin-bottom: 16px; }
.stopka__podpis { margin: 0; max-width: 340px; }
.stopka__kontakt { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.stopka__kontakt a, .stopka__godziny, .stopka__adres { display: inline-flex; gap: 12px; align-items: center; }   /* adres i godziny to zwykły tekst (bez linku), wyglądają jak pozostałe pozycje */
.stopka__kontakt .ikona { color: var(--czerwony); width: 24px; height: 24px; }
.stopka__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stopka__menu a { display: inline-block; padding: 6px 0; font-weight: 500; }
.stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid #333; font-size: 14px; }
.stopka__dol p { margin: 0; }
@media (max-width: 1024px) { .stopka__gora { grid-template-columns: 1fr 1fr; gap: 36px; } .stopka__firma { grid-column: 1 / -1; } }
@media (max-width: 767px) { .stopka__gora { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; } .stopka__logo { width: 180px; } }

/* ---------- 404 ---------- */
.blad-404 { text-align: center; padding: 100px 0; }
.blad-404__kod { font-size: 120px; font-weight: 700; color: var(--czerwony); line-height: 1; margin-bottom: 10px; }

/* ---------- sekcje ze zdjęciem w tle ---------- */
.cta--zdjecie, .sekcja--zdjecie {
  position: relative; color: #E6E6E6;
  background: var(--ciemny) var(--tlo, none) center / cover no-repeat;
}
.cta--zdjecie::before, .sekcja--zdjecie::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.cta--zdjecie::before { background: var(--nakladka, rgba(192, 0, 0, .76)); }   /* czerwona nakładka jak na oryginale */
.cta--zdjecie .przycisk { background: var(--bialy); color: var(--czerwony); border-color: var(--bialy); }
.cta--zdjecie .przycisk:hover, .cta--zdjecie .przycisk:focus-visible { background: transparent; color: var(--bialy); }
.cta--zdjecie > *, .sekcja--zdjecie > * { position: relative; }
.cta--zdjecie .cta__tytul, .sekcja--zdjecie .naglowek-sekcji { color: var(--bialy); }
.cta--zdjecie .cta__tekst { color: #E6E6E6; }
.sekcja--zdjecie .karta-wpisu { color: var(--grafit); }

.obraz-sekcji--model { display: flex; justify-content: center; }
.obraz-sekcji--model img { width: 100%; height: auto; max-height: 640px; object-fit: contain; }   /* width/height z HTML rezerwują miejsce przed wczytaniem (bez przesunięcia układu) */

/* ---------- karuzela opinii ---------- */
.karuzela--opinie .karuzela__tasma { grid-auto-columns: calc((100% - 60px) / 3); padding: 6px 4px 14px; }
.karuzela--opinie .opinia { scroll-snap-align: start; margin: 0; }
.opinia__tekst { margin: 0; quotes: "„" "”"; }
.opinia__tekst::before { content: open-quote; } .opinia__tekst::after { content: close-quote; }
.opinia__autor { display: flex; flex-direction: column; gap: 2px; }
.opinia__data { font-weight: 400; font-size: 13px; color: var(--szary-tekst); }
.opinie__zrodlo { margin-top: 18px; font-size: 15px; }
@media (max-width: 1024px) { .karuzela--opinie .karuzela__tasma { grid-auto-columns: calc((100% - 30px) / 2); } }
@media (max-width: 767px) { .karuzela--opinie .karuzela__tasma { grid-auto-columns: 88%; } }
.karuzela__tasma > * { scroll-snap-align: start; }

/* tekst slajdu: stary znika od razu, nowy pojawia się po zmianie tła (bez nakładania się tekstów) */
.slajder__slajd .slajder__tresc { opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.slajder__slajd--aktywny .slajder__tresc { opacity: 1; transform: none; transition: opacity .6s ease .45s, transform .6s ease .45s; }

/* ---------- kontakt ---------- */
.kontakt { display: grid; grid-template-columns: 42fr 58fr; gap: 60px; align-items: start; }
.kontakt__dzial { font-size: 18px; margin: 4px 0 18px; }
.kontakt__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.kontakt__lista a, .kontakt__pozycja { display: inline-flex; gap: 14px; align-items: center; color: var(--tekst); font-weight: 500; }   /* .kontakt__pozycja: adres bez linku */
.kontakt__lista a:hover { color: var(--czerwony); text-decoration: none; }
.kontakt__lista .ikona { color: var(--czerwony); width: 26px; height: 26px; }
.formularz p { margin: 0; }
.formularz__komunikat[hidden] { display: none; }
@media (max-width: 1024px) { .kontakt { gap: 40px; } }
@media (max-width: 767px) { .kontakt { grid-template-columns: 1fr; } }

/* Stopka: dane rejestrowe spółki w osobnym wierszu nad prawami autorskimi. */
.stopka__dane { flex-basis: 100%; font-size: 13px; line-height: 1.5; }

/* efekty.css */
/* Efekty wizualne (dodatek do styl.css, zapis zwarty). Ruch tylko przy no-preference; klasy .ef-* nadaje efekty.js. */

/* A. przejścia między stronami */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@keyframes ken-burns{from{transform:scale(1)}}
@keyframes ef-wjazd{from{opacity:0;transform:translateY(16px)}}
@keyframes ef-wej{from{opacity:0}}
@keyframes ef-skala{from{transform:scale(.98)}}

@media screen and (prefers-reduced-motion:no-preference){
/* B, E. pojawianie się */
.ef-u,.ef-i{opacity:0}
.ef-u{transform:translateY(16px)}
.ef-p{animation:ef-wjazd .5s ease-out backwards}
img.ef-p{animation:ef-wej .35s backwards}
/* C. hero; pauza pokazu wstrzymuje tło */
.slajder__slajd .slajder__tlo{transform:scale(1.06)}
.slajder__slajd--aktywny .slajder__tlo{animation:ken-burns 9s ease-out forwards}
.slajder:has([aria-label^="Wznów"]) .slajder__tlo{animation-play-state:paused}
/* D. karty (cień na zdjęciu: karty bez ramki) */
.karta-uslugi,.karta-wpisu,.karta-realizacji,.karta-uslugi__obraz,.karta-realizacji__obraz{transition:var(--przejscie)}
:is(.karta-uslugi,.karta-wpisu,.karta-realizacji):is(:hover,:focus-within){transform:translateY(-4px)}
.karta-wpisu:is(:hover,:focus-within),:is(.karta-uslugi,.karta-realizacji):is(:hover,:focus-within) [class$="__obraz"]{box-shadow:0 12px 32px rgba(0,0,0,.16)}
/* F. FAQ, G. lightbox */
.faq__pozycja[open] .faq__odpowiedz{animation:ef-wjazd .25s ease-out}
.lightbox:not([hidden]){animation:ef-wej .2s ease-out}
.lightbox:not([hidden]) .lightbox__obraz{animation:ef-skala .2s ease-out}
}

/* H. nagłówek ≥ 1280 px po przewinięciu */
@media screen and (min-width:1280px) and (prefers-reduced-motion:no-preference){
.naglowek,.naglowek__logo{transition:.25s}
.naglowek--maly{min-height:84px}
.naglowek--maly .naglowek__logo{width:180px}
}

/* I. „Do góry”; chowany pod banerem zgody i przy menu */
.ef-gora{position:fixed;right:24px;bottom:24px;z-index:150;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--bialy);border-radius:50%;background:var(--czerwony);color:var(--bialy);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}
.ef-gora::before{content:"";width:10px;height:10px;margin-top:4px;border:solid;border-width:3px 0 0 3px;transform:rotate(45deg)}
@media screen{.ef-gora--widoczna{opacity:1;visibility:visible;transform:none}}
.ef-gora:focus-visible{outline:3px solid var(--bialy);box-shadow:0 0 0 6px var(--ciemny)}
#zgody:not([hidden]) ~ .ef-gora,body.menu-otwarte .ef-gora{display:none}
@media (max-width:767px){.ef-gora{right:16px;bottom:16px}}

/* J. akcent w odstępie 20 px pod nagłówkiem (poza układem) */
.naglowek-sekcji{position:relative}
.naglowek-sekcji::after{content:"";position:absolute;left:0;top:100%;width:40px;height:3px;margin-top:12px;background:var(--czerwony)}
.naglowek-sekcji--srodek::after{left:50%;margin-left:-20px}

/* strony-glowna.css */
/* ==========================================================================
   Strona główna – uzupełnienia do styl.css (klasy z prefiksem .s-glowna-).
   ========================================================================== */

/* Sekcje „Elastyczne wkłady kominowe…” i „Zostań instalatorem…”: zdjęcie pionowe jest węższe niż kolumna.
   Na oryginale zajmuje ok. 57% szerokości swojej połowy sekcji (258 i 233 px przy 1280 px), a u nas miało całą kolumnę (463 px),
   przez co sekcje wychodziły o ok. 400 i 220 px wyższe. Kolumny zostają równe, zdjęcie jest wyśrodkowane w swojej kolumnie
   (także na telefonie, gdzie na oryginale ma ok. 190 px). */
.s-glowna-waski-obraz .obraz-sekcji img { width: 56%; margin-inline: auto; }

/* strony-inne.css */
/* ==========================================================================
   Strony FuranFlex®, O firmie, Zostań instalatorem, Polityka prywatności,
   Aktualności i Realizacje – uzupełnienia do styl.css (klasy z prefiksem .s-inne-).
   ========================================================================== */

/* CTA ze zdjęciem i czerwoną nakładką jak na oryginale; kolor nakładki podaje szablon w --nakladka (wartość z mapy treści). */
.s-inne-cta::before { background: var(--nakladka, rgba(192, 0, 0, .76)); }

/* Boksy z ikoną (O firmie): k.ikona('check') jest rysowana konturem, więc bez wypełnienia,
   które .ikona-blok__ikona narzuca ikonom SVG pochodzącym z Elementora. */
.s-inne-ikony .ikona-blok__ikona .ikona { fill: none; width: 56px; height: 56px; stroke-width: 1.5; }

/* Skany referencji: cała strona A4 w pionie zamiast kwadratowego kadru. */
.s-inne-skany .galeria__element { aspect-ratio: 5 / 7; }

/* Nagrody FuranFlex®: zdjęcia o różnych proporcjach pokazujemy w całości, bez przycinania. */
.s-inne-nagrody .karuzela__element { background: var(--bialy); }
.s-inne-nagrody .karuzela__element img { object-fit: contain; }
/* Podpis nagrody pod zdjęciem, nie na nim: na telefonie dłuższe podpisy zasłaniały do połowy obrazu. */
.s-inne-nagrody .karuzela__element { aspect-ratio: auto; display: flex; flex-direction: column; background: none; }
.s-inne-nagrody .karuzela__element img { aspect-ratio: 4 / 3; height: auto; background: var(--bialy); }
.s-inne-nagrody .karuzela__podpis { position: static; padding: 10px 4px 0; background: none; color: var(--tekst); font-size: 15px; text-align: center; }

/* Układ 2/3 + 1/3 (Zostań instalatorem: szeroka kolumna tekstu i wąskie zdjęcie pionowe). */
@media (min-width: 768px) { .s-inne-kol-68-32 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* Zdjęcie po lewej na desktopie, w kodzie (i na telefonie) po tekście – kolejność jak w oryginale. */
@media (min-width: 768px) { .s-inne-obraz-lewo > :last-child { order: -1; } }

/* FuranFlex®: trzy rodzaje wkładów w ramkach. Cały boks prowadzi do swojej sekcji (#furan, #ventil, #rain) jak na oryginale:
   link na tytule jest rozciągnięty pseudoelementem ::after na całą ramkę, bez zagnieżdżania elementów interaktywnych. */
.s-inne-wklad { position: relative; background: var(--bialy); border: 1px solid #CFCFCF; padding: 28px 24px; text-align: center; transition: transform var(--przejscie), box-shadow var(--przejscie), border-color var(--przejscie); }
.s-inne-wklad__obraz { width: 60%; max-width: 220px; margin: 0 auto 18px; }
.s-inne-wklad__obraz img { width: 100%; height: auto; }
.s-inne-wklad__tytul { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.s-inne-wklad > :last-child { margin-bottom: 0; }
.s-inne-wklad__tytul a { color: inherit; text-decoration: none; }
.s-inne-wklad__tytul a::after { content: ""; position: absolute; inset: -1px; }   /* obejmuje też obramowanie */
.s-inne-wklad:hover { border-color: var(--czerwony); box-shadow: var(--cien); transform: scale(1.03); }   /* powiększenie 1,03 jak na oryginale */
.s-inne-wklad:hover .s-inne-wklad__tytul a, .s-inne-wklad__tytul a:focus-visible { color: var(--czerwony); }
/* Fokus z klawiatury: obrys (kolor --fokus jak w styl.css) na całym boksie (na ::after), nie tylko wokół tytułu. */
.s-inne-wklad__tytul a:focus-visible { outline: none; }
.s-inne-wklad__tytul a:focus-visible::after { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* FuranFlex®: zalety w układzie lista | zdjęcie | lista. */
.s-inne-zalety { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 260px) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 1024px) { .s-inne-zalety { grid-template-columns: 1fr; gap: 24px; } }

/* FuranFlex®: podtytuły warstw A/B/C i tabela parametrów. */
.s-inne-warstwa { font-size: 16px; font-weight: 700; margin: 1.4em 0 .4em; }
/* Tabela parametrów ma tylko dwie kolumny, więc na telefonie zawija tekst zamiast przewijać się poziomo. */
.s-inne-parametry table { background: var(--bialy); min-width: 0; }
.s-inne-parametry th { width: 38%; }

/* Kolumna z kilkoma nagłówkami h2 (Zostań instalatorem): większy odstęp przed kolejnym nagłówkiem. */
.s-inne-tekst > .naglowek-sekcji:not(:first-child) { margin-top: 1.6em; }

/* Tytuł CTA: równomierny podział wierszy, bez osieroconego ostatniego słowa. */
.s-inne-cta .cta__tytul { text-wrap: balance; }

/* Przycisk w białym obrysie na zdjęciu z czerwoną nakładką (CTA na stronach realizacji, jak na oryginale):
   przezroczysty z białym tekstem, po najechaniu biały z czerwonym tekstem. */
.cta .przycisk.przycisk--jasny-obrys { background: transparent; color: var(--bialy); border-color: var(--bialy); }
.cta .przycisk.przycisk--jasny-obrys:hover, .cta .przycisk.przycisk--jasny-obrys:focus-visible { background: var(--bialy); color: var(--czerwony); }

/* Polityka prywatności: nagłówki punktów mniejsze niż w artykułach (długi tekst prawny). */
.s-inne-polityka h2 { font-size: 22px; margin-top: 1.8em; }
.s-inne-polityka > :first-child { margin-top: 0; }

/* O firmie: referencje do pobrania (PDF) pod galerią skanów. */
.s-inne-pdf__tytul { font-size: 20px; margin: 44px 0 18px; text-align: center; }
.s-inne-pdf { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 30px; }
@media (max-width: 767px) { .s-inne-pdf { grid-template-columns: 1fr; } }
.s-inne-pdf a { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; color: var(--grafit); }
.s-inne-pdf a:hover, .s-inne-pdf a:focus-visible { color: var(--czerwony); text-decoration: none; }
.s-inne-pdf strong { color: var(--tekst); }
.s-inne-pdf a:hover strong, .s-inne-pdf a:focus-visible strong { color: inherit; }
.s-inne-pdf .ikona { color: var(--czerwony); width: 22px; height: 22px; margin-top: 1px; }

/* strony-oferta.css */
/* ==========================================================================
   Strony oferty (/oferta/ i cztery podstrony usług) – uzupełnienia do styl.css.
   ========================================================================== */

/* CTA ze zdjęciem i czerwoną nakładką jak na oryginale; kolor nakładki podaje szablon w --nakladka (wartość z mapy treści). */
.s-oferta-cta::before { background: var(--nakladka, rgba(192, 0, 0, .78)); }

/* Boksy z ikoną: k.ikona('check') jest rysowana konturem, więc bez wypełnienia,
   które .ikona-blok__ikona narzuca ikonom SVG pochodzącym z Elementora. */
.s-oferta-boks .ikona-blok__ikona .ikona { fill: none; }

/* Tytuł CTA: równomierny podział wierszy, bez osieroconego ostatniego słowa. */
.s-oferta-cta .cta__tytul { text-wrap: balance; }

/* Karty usług na /oferta/: zdjęcia w proporcjach 4:3 jak na oryginale (zamiast 250 px wysokości), żeby nie ucinać motywu. */
.s-oferta-karty .karta-uslugi__obraz img { height: auto; aspect-ratio: 4 / 3; }

/* zgody.css */
/* ==========================================================================
   Termo Komin – baner zgody na pliki cookies, okno ustawień i link w stopce (zgody.js).
   Ciemne tło #1D1D1D, biały tekst, przyciski wzorowane na .przycisk (Montserrat 15px/600, bez zaokrągleń),
   ale wszystkie jednakowe: ta sama wielkość i ta sama waga wizualna (odmowa nie może być mniej
   widoczna niż zgoda). Warstwy: nagłówek 100, baner 200, lightbox 500; okno <dialog> leży w warstwie
   wierzchniej przeglądarki. Zmienne :root pochodzą ze styl.css; wartości zapasowe na wszelki wypadek.
   ========================================================================== */

/* ---------- baner przy pierwszej wizycie ---------- */
.zgody {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; flex-direction: column;
  max-height: 85vh; max-height: 85dvh; overflow: hidden;   /* przy braku miejsca przewija się tylko tekst (.zgody__tekst), przyciski są zawsze widoczne */
  background: var(--ciemny, #1D1D1D); color: var(--bialy, #FFFFFF);
  border-top: 3px solid var(--czerwony, #C00000);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .35);
  font-family: var(--font); font-size: 15px; line-height: 1.6;
}
.zgody[hidden] { display: none; }
.zgody__wnetrze {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 40px;
  width: 100%; min-height: 0; max-width: var(--kontener, 1440px); margin: 0 auto;
  padding: 18px 30px calc(18px + env(safe-area-inset-bottom, 0px));
}
/* tekst przewija się, gdy brak miejsca; padding z ujemnym marginesem zostawia miejsce na obrys fokusu linku (overflow ucinałby go przy krawędzi) */
.zgody__tekst { flex: 1 1 auto; min-width: 0; min-height: 0; margin: -6px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.zgody a, .zgody a:hover, .zgody a:focus-visible { color: var(--bialy, #FFFFFF); }   /* globalny a:hover jest ciemnoczerwony, na ciemnym tle nieczytelny */
.zgody a { text-decoration: underline; text-underline-offset: 3px; }
.zgody a:hover, .zgody a:focus-visible { text-decoration-thickness: 2px; }

/* trzy przyciski o równej szerokości i wysokości (siatka z kolumnami 1fr) */
.zgody__przyciski { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.zgody__przycisk {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--bialy, #FFFFFF); background: transparent;
  border: 2px solid var(--bialy, #FFFFFF); border-radius: 0; cursor: pointer;
  transition: background var(--przejscie, .2s ease), color var(--przejscie, .2s ease);
}
.zgody__przycisk:hover, .zgody__przycisk:focus-visible { background: var(--bialy, #FFFFFF); color: var(--czerwony, #C00000); }

/* widoczny fokus: biały obrys na ciemnym tle */
.zgody :focus-visible, .zgody-dialog :focus-visible, .zgody-link:focus-visible { outline: 3px solid var(--bialy, #FFFFFF); outline-offset: 2px; }

/* baner pojawia się od razu, bez animacji wjazdu; reszta ruchu to tylko zmiana koloru przycisków, którą wyłącza prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .zgody__przycisk, .zgody-link, .zgody-dialog__zamknij { transition: none; }
}

/* stopka nie chowa się pod banerem: zgody.js ustawia --zgody-wys na wysokość banera, dopóki jest widoczny */
html.zgody-widoczny .stopka { padding-bottom: var(--zgody-wys, 0px); }
/* otwarte menu mobilne zajmuje cały ekran pod nagłówkiem, więc baner na ten czas znika */
body.menu-otwarte .zgody { display: none; }

@media (max-width: 1100px) {
  .zgody__wnetrze { flex-direction: column; align-items: stretch; }
  .zgody__przyciski { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .zgody { font-size: 14px; line-height: 1.55; }
  .zgody__wnetrze { gap: 14px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
  /* „Akceptuję wszystkie” i „Odrzucam” obok siebie (równe), „Ustawienia” w drugim rzędzie na całą szerokość; wszystkie trzy widać bez przewijania */
  .zgody__przyciski { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .zgody__przyciski .zgody__przycisk:last-child { grid-column: 1 / -1; }
  .zgody__przycisk { min-height: 46px; padding-left: 8px; padding-right: 8px; }
}
/* niski ekran (telefon w poziomie): mniejsze odstępy, a przy wąskim oknie trzy przyciski w jednym rzędzie */
@media (max-height: 500px) {
  .zgody__wnetrze { gap: 8px 24px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .zgody .zgody__przycisk { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }   /* tylko w banerze; przyciski okna ustawień bez zmian */
}
@media (max-height: 500px) and (max-width: 767px) {
  .zgody__przyciski { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .zgody__przyciski .zgody__przycisk:last-child { grid-column: auto; }
}

/* ---------- okno ustawień (natywny <dialog> otwierany przez showModal) ---------- */
.zgody-dialog {
  box-sizing: border-box; width: min(680px, calc(100% - 32px));
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain;
  border: 0; border-top: 3px solid var(--czerwony, #C00000);
  background: var(--ciemny, #1D1D1D); color: var(--bialy, #FFFFFF); color-scheme: dark;
  font-family: var(--font); font-size: 15px; line-height: 1.6;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
.zgody-dialog:not([open]) { display: none; }   /* przeglądarki bez obsługi <dialog> */
.zgody-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.zgody-dialog__wnetrze { padding: 28px; }
.zgody-dialog__naglowek { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.zgody-dialog__tytul { margin: 0; font-family: var(--font); font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--bialy, #FFFFFF); }
/* przycisk × (zamyka okno bez zapisu): obszar klikalny 44×44 px, ujemne marginesy wyrównują sam znak do krawędzi treści */
.zgody-dialog__zamknij {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -7px -10px 0 0; padding: 0;
  color: var(--bialy, #FFFFFF); background: transparent; border: 0; border-radius: 0; cursor: pointer;
  transition: background var(--przejscie, .2s ease), color var(--przejscie, .2s ease);
}
.zgody-dialog__zamknij .ikona { width: 24px; height: 24px; }
.zgody-dialog__zamknij:hover, .zgody-dialog__zamknij:focus-visible { background: var(--bialy, #FFFFFF); color: var(--czerwony, #C00000); }
.zgody-dialog__lista { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid #3A3A3A; }
.zgody-dialog__przyciski { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zgody-dialog .zgody__przycisk { padding-left: 10px; padding-right: 10px; }

/* pozycja: pole wyboru 24 px + etykieta; rozciągnięta etykieta robi z całego wiersza (min. 44 px) obszar klikalny */
.zgody-pozycja { position: relative; display: flex; align-items: flex-start; gap: 16px; min-height: 44px; padding: 14px 0; border-bottom: 1px solid #3A3A3A; }
.zgody-pozycja__pole { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--czerwony, #C00000); cursor: pointer; }
.zgody-pozycja__tekst { flex: 1 1 auto; min-width: 0; }
.zgody-pozycja__nazwa { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--bialy, #FFFFFF); cursor: pointer; }
.zgody-pozycja__nazwa::after { content: ""; position: absolute; inset: 0; }
.zgody-pozycja__opis { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #D8D8D8; }
.zgody-pozycja--stala .zgody-pozycja__pole, .zgody-pozycja--stala .zgody-pozycja__nazwa { cursor: default; }

@media (max-width: 767px) {
  .zgody-dialog { width: calc(100% - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .zgody-dialog__wnetrze { padding: 22px 18px; }
  .zgody-dialog__tytul { font-size: 22px; }
  .zgody-dialog__przyciski { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .zgody-dialog .zgody__przycisk { min-height: 46px; }
}

/* ---------- link „Ustawienia plików cookies” w stopce (przycisk wyglądający jak sąsiednie linki) ---------- */
.stopka__linki { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.stopka__linki a, .zgody-link { padding: 8px 0; }
.zgody-link {
  margin: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--szary, #8B8B8B); transition: color var(--przejscie, .2s ease);
}
.zgody-link:hover, .zgody-link:focus-visible { color: var(--bialy, #FFFFFF); }

@media print { .zgody, .zgody-dialog { display: none !important; } }