/* ============================================================
   BARF Original — system projektowy „POŁUDNIE" (wybrany 8.07.2026)
   Źródło wzorca: kierunki-wizualne/projekt-poludnie.html
   Zasady: biel + błękitna mgła + granatowy atrament + koral;
   cienkie linie, dużo powietrza, zdjęcia w białych ramkach
   z miękkim cieniem, ikony cienką kreską, packshoty tylko
   w kontekstach produktowych. Zero zieleni, zero serifów.
   ============================================================ */

:root {
  --biel:#FEFEFD;
  --piasek:#FAF8F3;      /* szczątkowe ciepło, używać rzadko */
  --mgla:#F1F6FA;        /* główny panel odmiany sekcji */
  --linia:#E3E7EC;
  --linia-ch:#DFE8EF;
  --granat:#16304F;      /* atrament tekstu i nagłówków */
  --granat-70:#41577A;   /* tekst drugorzędny */
  --koral:#E4573D;       /* CTA i akcenty */
  --koral-c:#C9432C;     /* hover i mocniejszy akcent */
  --koral-j:#F3BDB0;     /* podkreślenia cichych linków */
  --zloto:#C98F2D;       /* wyłącznie medale i wyróżnienia */
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:"Segoe UI", Arial, sans-serif; color:var(--granat); background:var(--biel); font-size:17px; line-height:1.65; }
h1,h2,h3 { font-family:Bahnschrift, "Segoe UI Semibold", "Segoe UI", sans-serif; font-weight:500; letter-spacing:.2px; line-height:1.14; }
a { color:inherit; }
img { max-width:100%; }

.wnetrze { max-width:1150px; margin:0 auto; padding:0 28px; }

/* Etykieta sekcji: numer + wersaliki, zawsze koralowa */
.etykieta { font-size:11.5px; letter-spacing:3.2px; text-transform:uppercase; color:var(--koral-c); font-weight:700; }
.etykieta .nr { color:var(--granat-70); margin-right:14px; font-weight:400; }

/* Nagłówek serwisu */
header.naglowek { position:sticky; top:0; background:rgba(254,254,253,.97); border-bottom:1px solid var(--linia); z-index:10; }
header.naglowek .wnetrze { display:flex; align-items:center; justify-content:space-between; height:94px; }
header.naglowek img.logo { height:60px; }
header.naglowek nav { display:flex; align-items:center; gap:32px; }
header.naglowek nav a { text-decoration:none; font-size:13px; letter-spacing:1.6px; text-transform:uppercase; }
header.naglowek nav a:hover { color:var(--koral-c); }
header.naglowek nav .wyrozniony { background:var(--koral); color:#fff; padding:11px 24px; border-radius:4px; }
header.naglowek nav .wyrozniony:hover { background:var(--koral-c); color:#fff; }

/* Hero */
.hero { background:linear-gradient(180deg, var(--biel) 55%, var(--mgla) 100%); }
.hero .wnetrze { display:grid; grid-template-columns:1.04fr .96fr; gap:64px; align-items:center; padding-top:78px; padding-bottom:86px; }
.hero h1 { font-size:54px; max-width:14ch; margin-top:20px; }
.hero h1 em { font-style:normal; color:var(--koral-c); }
.hero .lede { margin-top:24px; font-size:18.5px; color:var(--granat-70); max-width:48ch; }

/* Przyciski i linki */
.akcje { margin-top:38px; display:flex; align-items:center; gap:18px 30px; flex-wrap:wrap; }
.przycisk { display:inline-block; background:var(--koral); color:#fff; text-decoration:none; font-size:13.5px; letter-spacing:1.8px; text-transform:uppercase; padding:17px 36px; border-radius:4px; border:0; cursor:pointer; }
.przycisk:hover { background:var(--koral-c); }
.przycisk.granatowy { background:var(--granat); }
.przycisk.granatowy:hover { background:#0D2036; }
.link-cichy { font-size:15px; text-decoration:none; border-bottom:2px solid var(--koral-j); padding-bottom:3px; }
.link-cichy:hover { border-color:var(--koral); color:var(--koral-c); }

/* Zdjęcie w białej ramce z miękkim cieniem (znak firmowy Południa) */
.rama { background:#fff; padding:14px; box-shadow:0 22px 50px rgba(22,48,79,.14); }
.rama img { display:block; width:100%; object-fit:cover; }
.hero-foto { position:relative; }
.medal { position:absolute; top:-26px; right:-22px; width:112px; height:112px; border-radius:50%; background:#fff; box-shadow:0 12px 28px rgba(22,48,79,.18); display:flex; align-items:center; justify-content:center; transform:rotate(5deg); }
.medal span { width:92px; height:92px; border-radius:50%; background:var(--zloto); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:10.5px; letter-spacing:1px; line-height:1.35; text-transform:uppercase; }
.medal b { font-family:Bahnschrift, sans-serif; font-size:22px; letter-spacing:0; }

/* Pasek dowodów: cienkie linie, koralowe liczby */
.dowody { border-bottom:1px solid var(--linia); background:var(--biel); }
.dowody .wnetrze { display:grid; grid-template-columns:repeat(4,1fr); }
.dowody .wnetrze > div { padding:28px 30px 28px 0; font-size:14px; color:var(--granat-70); line-height:1.5; }
.dowody div + div { border-left:1px solid var(--linia); padding-left:30px; }
.dowody strong { display:block; color:var(--koral-c); font-family:Bahnschrift, sans-serif; font-size:24px; font-weight:500; margin-bottom:3px; }

/* Sekcje */
.sekcja { padding:94px 0; }
.sekcja h2 { font-size:36px; margin-top:16px; max-width:26ch; }
.sekcja h2::after { content:""; display:block; width:54px; border-top:3px solid var(--koral); margin-top:16px; }
.prowadzenie { margin-top:16px; font-size:17.5px; color:var(--granat-70); max-width:62ch; }
.panel-piasek { background:var(--piasek); }
.panel-mgla { background:var(--mgla); }

/* Karty ścieżek / kafle z ikoną kreskową */
.drogi { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; }
.droga { background:#fff; border:1px solid var(--linia); padding:36px 32px 40px; box-shadow:0 10px 26px rgba(22,48,79,.05); }
.droga svg { display:block; margin-bottom:22px; }
.droga h3 { font-size:21px; }
.droga p { font-size:15.5px; color:var(--granat-70); margin-top:10px; }
.droga a { display:inline-block; margin-top:20px; font-size:13px; letter-spacing:1.8px; text-transform:uppercase; text-decoration:none; color:var(--koral-c); border-bottom:1px solid var(--linia-ch); padding-bottom:4px; }
.droga a:hover { border-color:var(--koral); }

/* Produkty (jedyne miejsce packshotów) */
.oferta-glowa { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.towary { display:grid; grid-template-columns:repeat(5,1fr); gap:26px; margin-top:52px; }
.towary.cztery { grid-template-columns:repeat(4,1fr); }
.towar { text-decoration:none; background:#fff; padding:10px 10px 16px; box-shadow:0 10px 26px rgba(22,48,79,.06); }
.towar img { display:block; width:100%; aspect-ratio:1/1.05; object-fit:cover; }
.towar h3 { font-size:15px; margin:12px 6px 0; font-weight:600; font-family:"Segoe UI", sans-serif; }
.towar span { display:block; font-size:12.5px; color:var(--granat-70); margin:2px 6px 0; }
.towar em { display:block; font-style:normal; font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--zloto); margin:6px 6px 0; font-weight:700; }
.towar:hover h3 { color:var(--koral-c); }

/* Kalkulator i formularze */
.licznik { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.licznik form { display:grid; gap:20px; margin-top:32px; max-width:420px; }
label { display:block; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--granat-70); margin-bottom:8px; }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width:100%; padding:14px 15px; font-size:16px; border:1px solid var(--granat-70); background:#fff; color:var(--granat); border-radius:4px; font-family:inherit; }
.wynik { background:#fff; box-shadow:0 18px 40px rgba(22,48,79,.10); padding:52px 56px; }
.wynik .liczba { font-family:Bahnschrift, sans-serif; font-size:92px; font-weight:500; line-height:1; }
.wynik .liczba b { font-size:32px; font-weight:500; }
.wynik .kreska { width:64px; border-top:3px solid var(--koral); margin:20px 0 14px; }
.wynik p { font-size:15px; color:var(--granat-70); max-width:34ch; }

/* Cytat założycielki / bloki opowieści */
.julka { display:grid; grid-template-columns:.56fr 1.44fr; gap:76px; align-items:center; }
.julka .rama { transform:rotate(-1.2deg); }
.julka blockquote { font-size:23px; font-weight:350; line-height:1.55; max-width:52ch; }
.julka blockquote::before { content:""; display:block; width:64px; border-top:3px solid var(--koral); margin-bottom:26px; }
.julka .podpis { margin-top:22px; font-size:14px; letter-spacing:1px; color:var(--granat-70); }
.julka .podpis a { color:var(--koral-c); }
.dwie-kolumny { display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }

/* Zapowiedź / plakietka */
.plakietka { display:inline-block; background:var(--granat); color:#fff; font-size:11.5px; letter-spacing:2.6px; text-transform:uppercase; padding:7px 16px; border-radius:4px; margin-bottom:16px; }
.formularz-w-linii { display:flex; }
.formularz-w-linii input { border-right:none; border-radius:4px 0 0 4px; }
.formularz-w-linii .przycisk { border-radius:0 4px 4px 0; }
.zgoda { margin-top:14px; font-size:12.5px; color:var(--granat-70); }

/* Lista wpisów (blog) */
.wpisy { margin-top:46px; }
.wpis { display:flex; gap:32px; align-items:baseline; padding:26px 0; border-top:1px solid var(--linia); text-decoration:none; }
.wpis:last-child { border-bottom:1px solid var(--linia); }
.wpis .nr { font-family:Bahnschrift, sans-serif; font-size:20px; color:var(--koral); flex:none; }
.wpis h3 { font-size:21px; font-weight:400; }
.wpis:hover h3 { color:var(--koral-c); }
.wpis span { margin-left:auto; font-size:13.5px; color:var(--granat-70); flex:none; }

/* Treść artykułu */
.artykul { max-width:760px; }
.artykul h2 { font-size:28px; margin-top:44px; }
.artykul p, .artykul li { font-size:17px; color:#243B5C; margin-top:14px; }
.artykul ul, .artykul ol { padding-left:24px; }

/* FAQ */
.pytania { max-width:840px; }
.pytania details { border-top:1px solid var(--linia); padding:24px 2px; }
.pytania details:last-child { border-bottom:1px solid var(--linia); }
.pytania summary { cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:24px; }
.pytania summary::after { content:"+"; color:var(--koral-c); font-size:20px; font-weight:300; }
.pytania details[open] summary::after { content:"−"; }
.pytania details p { margin-top:14px; font-size:16px; color:var(--granat-70); max-width:66ch; }

/* Okruszki nawigacyjne */
.okruszki { font-size:13px; color:var(--granat-70); padding:18px 0 0; }
.okruszki a { text-decoration:none; }
.okruszki a:hover { color:var(--koral-c); }

/* Stopka */
footer.stopka { border-top:1px solid var(--linia); padding:52px 0 26px; background:var(--biel); }
footer.stopka .gorna { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer.stopka img.logo { height:50px; }
footer.stopka nav { display:flex; flex-wrap:wrap; gap:26px; }
footer.stopka nav a { text-decoration:none; font-size:13px; letter-spacing:1.6px; text-transform:uppercase; }
footer.stopka nav a:hover { color:var(--koral-c); }
footer.stopka .dolna { margin-top:36px; padding-top:20px; border-top:1px solid var(--linia); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--granat-70); }

/* ============================================================
   Rozszerzenia systemu (8.07.2026, konwersja strony głównej):
   podmenu nagłówka, menu mobilne, pełna stopka serwisu.
   Wspólne dla wszystkich podstron.
   ============================================================ */

header.naglowek nav { gap:26px; }
header.naglowek nav a.klub-link { color:var(--koral-c); font-weight:700; }
header.naglowek .menu-cb { display:none; }
header.naglowek .menu-przycisk { display:none; color:var(--granat); cursor:pointer; }
header.naglowek .ma-podmenu { position:relative; }
header.naglowek .ma-podmenu > a::after { content:"▾"; font-size:9px; margin-left:6px; vertical-align:2px; color:var(--granat-70); }
header.naglowek .podmenu { display:none; position:absolute; top:100%; left:-20px; min-width:250px; padding:10px 0; background:#fff; border:1px solid var(--linia); box-shadow:0 16px 34px rgba(22,48,79,.12); }
header.naglowek .ma-podmenu:hover .podmenu,
header.naglowek .ma-podmenu:focus-within .podmenu { display:block; }
header.naglowek .podmenu a { display:block; padding:9px 20px; }

footer.stopka .kolumny { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr .9fr; gap:36px; }
footer.stopka .kolumny h5 { font-family:Bahnschrift, "Segoe UI Semibold", "Segoe UI", sans-serif; font-weight:500; font-size:13px; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:14px; }
footer.stopka .kolumny ul { list-style:none; }
footer.stopka .kolumny li { font-size:14px; color:var(--granat-70); padding:4px 0; }
footer.stopka .kolumny a { text-decoration:none; }
footer.stopka .kolumny a:hover { color:var(--koral-c); }
footer.stopka .opis { margin-top:14px; font-size:14px; color:var(--granat-70); max-width:36ch; }
footer.stopka .spolecznosci { display:flex; gap:12px; margin-top:18px; }
footer.stopka .spolecznosci a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--linia); border-radius:50%; color:var(--granat-70); }
footer.stopka .spolecznosci a:hover { color:var(--koral-c); border-color:var(--koral); }
footer.stopka .dolna a { text-decoration:none; }
footer.stopka .dolna a:hover { color:var(--koral-c); }

/* ============================================================
   Rozszerzenia wspólne (10.07.2026) — wzorce zebrane ze stron,
   dodane TYLKO tam, gdzie definicja jest identyczna na każdej
   stronie, która ich używa (strony zachowują swoje kopie inline,
   kaskada nie zmienia wyglądu; porządki inline = po przeglądzie).
   Celowo NIE przeniesione (warianty różnią się między stronami,
   do ujednolicenia osobną decyzją): .kroki/.krok, .panel-granat,
   .medal-karta, .porownanie, .hero-atuty, .intro, .karta-ceny.
   ============================================================ */

/* Granatowy pasek informacyjny nad nagłówkiem (kanon: 18 stron) */
.pasek-info { background:var(--granat); color:#fff; font-size:12.5px; letter-spacing:.4px; }
.pasek-info .wnetrze { display:flex; justify-content:center; gap:34px; padding:9px 28px; flex-wrap:wrap; }

/* Wyśrodkowana głowa sekcji (9 stron, identyczna) */
.glowa-srodek { text-align:center; }
.glowa-srodek h2 { margin-left:auto; margin-right:auto; }
.glowa-srodek h2::after { margin-left:auto; margin-right:auto; }
.glowa-srodek .prowadzenie { margin-left:auto; margin-right:auto; }

/* Wyśrodkowany blok CTA (3 strony, identyczny) */
.cta-centrum { text-align:center; }
.cta-centrum h2 { margin-left:auto; margin-right:auto; }
.cta-centrum h2::after { margin-left:auto; margin-right:auto; }
.cta-centrum h2 em { font-style:normal; color:var(--koral-c); }
.cta-centrum .prowadzenie { margin-left:auto; margin-right:auto; }
.cta-centrum .akcje { justify-content:center; flex-wrap:wrap; }

/* Hasło pod H1 w hero (index) */
.hero-haslo { margin-top:18px; font-size:15px; letter-spacing:.5px; font-weight:600; color:var(--granat-70); }

@media (max-width:1250px) {
  header.naglowek nav { gap:16px; }
  header.naglowek nav a { font-size:12px; letter-spacing:1.2px; }
}

/* Responsywność */
@media (max-width:920px) {
  header.naglowek .menu-przycisk { display:flex; align-items:center; }
  header.naglowek .menu-cb:checked ~ nav { display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; left:0; right:0; top:94px; background:var(--biel); border-bottom:1px solid var(--linia); box-shadow:0 24px 40px rgba(22,48,79,.14); padding:8px 28px 26px; max-height:calc(100vh - 94px); overflow:auto; }
  header.naglowek .menu-cb:checked ~ nav a { display:block; padding:11px 0; font-size:13px; letter-spacing:1.6px; }
  header.naglowek .menu-cb:checked ~ nav a.wyrozniony { display:block; order:-1; text-align:center; padding:13px 24px; margin:6px 0 10px; }
  header.naglowek .podmenu { display:block; position:static; min-width:0; border:none; box-shadow:none; padding:0 0 4px 18px; }
  header.naglowek .ma-podmenu > a::after { content:""; }
  footer.stopka .kolumny { grid-template-columns:1fr 1fr; gap:28px; }
  footer.stopka .kolumny > div:first-child { grid-column:1 / -1; }
  .hero .wnetrze, .licznik, .julka, .katowice, .dwie-kolumny { grid-template-columns:1fr; gap:44px; }
  .hero h1 { font-size:40px; }
  .dowody .wnetrze { grid-template-columns:1fr 1fr; }
  .dowody div + div { border-left:none; padding-left:0; }
  .drogi { grid-template-columns:1fr; }
  .towary, .towary.cztery { grid-template-columns:1fr 1fr; }
  header.naglowek nav { display:none; }
  .wpis span { display:none; }
  .sekcja { padding:62px 0; }
  .medal { right:6px; }
  .wynik { padding:36px; }
  .wynik .liczba { font-size:64px; }
  .formularz-w-linii { flex-direction:column; }
  .formularz-w-linii input, .formularz-w-linii .przycisk { border-radius:4px; border-right:1px solid var(--granat-70); }
}

/* Pływający przycisk „Wróć" */
.wroc-fab{position:fixed;left:18px;bottom:18px;z-index:900;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--linia);box-shadow:0 6px 20px rgba(22,48,79,.16);padding:10px 18px;font:inherit;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--granat);cursor:pointer;transition:all .15s}
.wroc-fab:hover{border-color:var(--koral);color:var(--koral-c);box-shadow:0 8px 24px rgba(22,48,79,.22)}
.wroc-fab .strzalka{font-size:17px;line-height:1}
@media (max-width:768px){.wroc-fab{left:12px;bottom:12px;padding:9px 14px}}

/* Baner cookies */
.baner-cookies{position:fixed;left:0;right:0;bottom:0;z-index:950;background:#fff;border-top:2px solid var(--granat);box-shadow:0 -8px 30px rgba(22,48,79,.14);padding:16px 22px}
.baner-cookies .wnetrze-c{max-width:1140px;margin:0 auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.baner-cookies p{margin:0;font-size:14px;line-height:1.5;color:var(--granat);flex:1 1 420px}
.baner-cookies a{color:var(--koral-c);text-decoration:underline}
.baner-cookies .akcje-c{display:flex;gap:10px;flex-wrap:wrap}
.baner-cookies button{font:inherit;font-size:14px;font-weight:600;padding:10px 20px;cursor:pointer;transition:all .15s}
.baner-cookies .zgoda-pelna{background:var(--koral);border:1px solid var(--koral);color:#fff}
.baner-cookies .zgoda-pelna:hover{background:var(--koral-c)}
.baner-cookies .zgoda-min{background:#fff;border:1px solid var(--granat-70);color:var(--granat)}
.baner-cookies .zgoda-min:hover{border-color:var(--granat)}
body.ma-baner-cookies .wroc-fab{bottom:110px}
body.ma-baner-cookies .belka-b2b{display:none}

/* Lupka i panel wyszukiwania w nagłówku */
.szukaj-btn{background:none;border:0;cursor:pointer;color:var(--granat);padding:8px;display:inline-flex;align-items:center;margin-left:4px}
.szukaj-btn:hover{color:var(--koral-c)}
.szukaj-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:2px solid var(--granat);box-shadow:0 14px 30px rgba(22,48,79,.16);padding:18px 22px;z-index:60}
.szukaj-panel form{max-width:760px;margin:0 auto;display:flex;gap:10px}
.szukaj-panel input[type=search]{flex:1;font:inherit;font-size:16px;color:var(--granat);background:var(--mgla);border:1px solid var(--linia);padding:13px 18px}
.szukaj-panel input[type=search]:focus{outline:2px solid var(--koral);outline-offset:1px}
.szukaj-panel button[type=submit]{font:inherit;font-size:14px;font-weight:600;letter-spacing:.06em;background:var(--koral);border:1px solid var(--koral);color:#fff;padding:0 26px;cursor:pointer}
.szukaj-panel button[type=submit]:hover{background:var(--koral-c)}
@media (max-width:920px){.szukaj-btn{margin-left:auto;margin-right:6px}.szukaj-panel{padding:14px 12px}}