/* Poradniki branżowe WIST w nowym wyglądzie (agent poradniki, 2026-10-04). PLIK GENEROWANY przez
   09_NOWA_PHP8_SYMFONY/NOWY_WYGLAD_WDROZENIE/narzedzia/por_generuj.py – nie edytować ręcznie.
   Część 1: arkusz WIST (06_WIKI/wiki.css) zamknięty w .wiki; część 2: oprawa „Mapa po boku” (narzedzia/por-wyglad.css). */
.wiki{--ink: #142536; --muted: #5b6b7a; --line: #dce5ec; --soft: #f4f8fa; --white: #fff;
  --blue: #01b3e1; --blue-dark: #0077a3; --navy: #092541; --pale: #e8f6fc; --amber: #b76a08; --amber-pale: #fdf3e3;
  --radius: 14px; --shadow: 0 14px 34px rgba(8, 45, 78, .10);}
.wiki *{box-sizing: border-box;}
.wiki{scroll-behavior: smooth; overflow-x: clip;}
.wiki{margin: 0; font: 16px/1.6 Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--white);}
.wiki img{max-width: 100%; height: auto; display: block;}
.wiki a{color: var(--blue-dark);}
.wiki a:focus-visible,.wiki summary:focus-visible,.wiki button:focus-visible{outline: 3px solid var(--blue); outline-offset: 2px;}
.wiki .w-wrap{width: min(1180px, 100% - 32px); margin: 0 auto;}
.wiki .w-hero{position: relative; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; padding: 30px 0 30px;}
.wiki .w-hero::before,.wiki .w-hero::after{content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;}
.wiki .w-hero::before{width: 420px; height: 420px; right: -120px; top: -90px; border: 44px solid var(--pale);}
.wiki .w-hero::after{width: 140px; height: 140px; right: 330px; bottom: -30px; background: var(--pale); opacity: .7;}
.wiki .w-chipy{display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;}
.wiki .w-chip{display: inline-block; padding: 6px 14px; border: 1px solid #c7e9f6; border-radius: 999px; background: var(--white); font-size: 14px; color: var(--navy); text-decoration: none;}
.wiki .w-chip:hover{border-color: var(--blue); background: var(--pale);}
.wiki .droga{background: var(--white); border: 1px solid #c7e9f6; border-radius: 18px; box-shadow: var(--shadow); padding: 20px 22px;}
.wiki .droga-tytul{margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-dark);}
.wiki .droga ol{list-style: none; margin: 0; padding: 0;}
.wiki .droga li + li{border-top: 1px solid var(--line);}
.wiki .droga a{display: flex; gap: 14px; align-items: center; padding: 10px 0; text-decoration: none; color: var(--navy); font-weight: 600;}
.wiki .droga a:hover{color: var(--blue-dark);}
.wiki .dnr{flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--blue); min-width: 24px;}
.wiki .wiecej{display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; text-decoration: none;}
.wiki .scena{margin: 0 0 36px;}
.wiki .scena figure{margin: 0;}
.wiki .scena img{border-radius: 18px; box-shadow: var(--shadow); aspect-ratio: 16 / 7; object-fit: cover; width: 100%;}
.wiki .scena figcaption{font-size: 12px; color: var(--muted); margin-top: 6px;}
.wiki .eyebrow{color: var(--blue-dark); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px;}
.wiki h1{font-size: clamp(30px, 4vw, 46px); line-height: 1.12; margin: 0 0 16px; color: var(--navy); letter-spacing: -.01em;}
.wiki .w-lead{font-size: 19px; color: #33475a; margin: 0 0 20px;}
.wiki .w-hero figure{margin: 0;}
.wiki .w-hero img{border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 16 / 9; object-fit: cover; width: 100%;}
.wiki .kolaz ul{list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);}
.wiki .kolaz ul{grid-template-columns: repeat(4, 1fr) !important;}
.wiki .kolaz li{display: flex; align-items: center; justify-content: center; height: 240px;}
.wiki .kolaz img{box-shadow: none; border-radius: 0; aspect-ratio: auto; object-fit: contain; width: auto; height: auto; max-height: 100%;}
.wiki .w-hero figcaption{font-size: 12px; color: var(--muted); margin-top: 6px;}
.wiki .meta{font-size: 13px; color: var(--muted);}
.wiki .skrot{background: var(--pale); border: 1px solid #c7e9f6; border-radius: var(--radius); padding: 20px 24px; margin: 0 0 36px;}
.wiki .skrot h2{font-size: 18px; margin: 0 0 8px; color: var(--navy);}
.wiki .skrot ul{margin: 0; padding-left: 20px;}
.wiki .skrot li{margin: 4px 0;}
.wiki .spis{margin: 0 0 40px;}
.wiki .spis h2,.wiki .sekcja-tytul{font-size: 26px; color: var(--navy); margin: 0 0 14px;}
.wiki .spis ol{list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.wiki .spis a{display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--white); height: 100%;}
.wiki .spis a:hover{border-color: var(--blue); box-shadow: var(--shadow);}
.wiki .spis .nr{flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center;}
.wiki .placowki{background: var(--soft); padding: 36px 0; margin: 0 0 44px;}
.wiki .placowki .siatka{display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;}
.wiki .placowki details{background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 0 16px;}
.wiki .placowki summary{cursor: pointer; font-weight: 700; padding: 14px 0; color: var(--navy); list-style: none;}
.wiki .placowki summary::after{content: "+"; float: right; color: var(--blue-dark); font-weight: 800;}
.wiki .placowki details[open] summary::after{content: "–";}
.wiki .placowki details p{margin: 0 0 8px;}
.wiki .placowki .linki{font-size: 14px; margin: 0 0 14px;}
.wiki .sytuacja{position: relative; margin: 0 0 26px; padding: 30px 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 6px 20px rgba(8, 45, 78, .05); scroll-margin-top: 12px; overflow: hidden;}
.wiki .sytuacja::before{content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--blue), var(--blue-dark));}
.wiki .sytuacja::after{content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid var(--pale); pointer-events: none;}
.wiki .sytuacja h2{position: relative; z-index: 1; font-size: 26px; line-height: 1.25; color: var(--navy); margin: 0 0 6px; display: flex; gap: 14px; align-items: baseline;}
.wiki .sytuacja h2 .nr{flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--pale); color: var(--blue-dark); border: 2px solid var(--blue); font-size: 16px; font-weight: 800; display: grid; place-items: center; transform: translateY(6px);}
@media (max-width: 560px){.wiki .sytuacja{padding: 22px 16px 22px 20px; border-radius: 14px;}
.wiki .sytuacja::after{display: none;}}
.wiki .pytanie{color: var(--muted); margin: 0 0 16px; font-style: italic;}
.wiki .uklad{display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; margin-bottom: 20px;}
.wiki .odpowiedz{font-size: 17px; margin: 0;}
.wiki .uwaga{background: var(--soft); border-radius: 12px; padding: 16px 18px;}
.wiki .uwaga h3,.wiki .unikaj h3{font-size: 15px; margin: 0 0 6px; color: var(--navy);}
.wiki .uwaga ul{margin: 0; padding-left: 18px; font-size: 15px;}
.wiki .unikaj{border-left: 4px solid var(--amber); background: var(--amber-pale); padding: 10px 14px; border-radius: 0 10px 10px 0; font-size: 15px; margin: 14px 0 0;}
.wiki .unikaj h3{color: #6a3d00;}
.wiki .unikaj p{margin: 0;}
.wiki .rozw{margin-top: 4px;}
.wiki .kroki h3,.wiki .przyklad h3,.wiki .efekt h3{font-size: 15px; margin: 0 0 8px; color: var(--navy);}
.wiki .kroki ol{margin: 0; padding-left: 22px; font-size: 15px;}
.wiki .kroki li{margin: 0 0 6px;}
.wiki .boki{display: flex; flex-direction: column; gap: 10px;}
.wiki .przyklad{border: 1px dashed #9fd6ea; background: var(--white); border-radius: 12px; padding: 12px 16px;}
.wiki .przyklad p{margin: 0; font-family: "Segoe UI Semibold", Inter, Arial, sans-serif; color: var(--navy);}
.wiki .efekt{padding: 0 2px;}
.wiki .efekt p{margin: 0; font-size: 14px; color: #33475a;}
.wiki .formaty{padding: 8px 0 30px;}
.wiki .tabela{overflow-x: auto; border: 1px solid var(--line); border-radius: 12px;}
.wiki .formaty table{border-collapse: collapse; width: 100%; font-size: 15px; min-width: 620px;}
.wiki .formaty th,.wiki .formaty td{text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top;}
.wiki .formaty thead th{background: var(--soft); color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;}
.wiki .formaty tbody th{color: var(--blue-dark); font-size: 17px;}
.wiki .formaty tr:last-child td,.wiki .formaty tr:last-child th{border-bottom: 0;}
.wiki .rada{font-size: 15px; color: #33475a;}
.wiki .produkty-tytul{font-size: 16px; margin: 22px 0 12px; color: var(--navy);}
.wiki .produkty{list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 260px));}
.wiki .produkty.n3{grid-template-columns: repeat(3, minmax(0, 260px));}
.wiki .produkty.n2{grid-template-columns: repeat(2, minmax(0, 260px));}
.wiki .produkty.n1{grid-template-columns: minmax(0, 260px);}
@media (max-width: 900px){.wiki .produkty.n4{grid-template-columns: repeat(2, minmax(0, 260px));}}
@media (max-width: 640px){.wiki .produkty.n3{grid-template-columns: 1fr;}
.wiki .produkty.n3 .produkt{flex-direction: row;}
.wiki .produkty.n3 .produkt .foto{flex: 0 0 120px; height: 150px;}
.wiki .produkty.n3 .produkt .tresc{border-top: 0; border-left: 1px solid var(--line);}}
.wiki .produkt{border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--white);}
.wiki .produkt .foto{display: flex; align-items: center; justify-content: center; height: 250px; padding: 10px; background: #fff;}
.wiki .produkt img{width: auto; height: auto; max-height: 100%; object-fit: contain;}
.wiki .produkt .tresc{padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; border-top: 1px solid var(--line);}
.wiki .produkt h4{font-size: 15px; line-height: 1.3; margin: 0;}
.wiki .produkt h4 a{color: var(--ink); text-decoration: none;}
.wiki .produkt h4 a:hover{color: var(--blue-dark); text-decoration: underline;}
.wiki .produkt .kod{font-size: 12px; color: var(--muted);}
.wiki .produkt p{font-size: 14px; margin: 0; color: #33475a; flex: 1;}
.wiki .produkt .cena{font-size: 14px; font-weight: 700; color: var(--navy);}
.wiki .produkt .cena span{font-weight: 400; color: var(--muted);}
.wiki .bledy{padding: 36px 0; border-top: 1px solid var(--line);}
.wiki .bledy ol{list-style: none; counter-reset: b; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
.wiki .bledy li{counter-increment: b; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--white);}
.wiki .bledy li h3{font-size: 16px; margin: 0 0 6px; color: var(--navy);}
.wiki .bledy li h3::before{content: counter(b) ". "; color: var(--amber);}
.wiki .bledy li p{margin: 0; font-size: 15px; color: #33475a;}
@media (max-width: 980px){.wiki .bledy ol{grid-template-columns: 1fr;}}
.wiki .w-faq{padding: 40px 0; border-top: 1px solid var(--line);}
.wiki .w-faq details{border-bottom: 1px solid var(--line);}
.wiki .w-faq summary{cursor: pointer; font-weight: 700; padding: 16px 0; font-size: 17px; list-style: none; color: var(--navy);}
.wiki .w-faq summary::after{content: "+"; float: right; color: var(--blue-dark);}
.wiki .w-faq details[open] summary::after{content: "–";}
.wiki .w-faq details p{margin: 0 0 16px; max-width: 820px;}
.wiki .kontakt{background: var(--navy); color: #fff; border-radius: var(--radius); padding: 28px 32px; margin: 10px 0 48px; display: flex; gap: 24px; align-items: center; justify-content: space-between;}
.wiki .kontakt h2{margin: 0 0 6px; font-size: 22px;}
.wiki .kontakt p{margin: 0; color: #cfe3ef;}
.wiki .przycisk{display: inline-block; background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 10px; font-weight: 700; text-decoration: none; white-space: nowrap;}
.wiki .przycisk:hover{background: #009cc6;}
.wiki .stopka-strony{font-size: 13px; color: var(--muted); padding: 0 0 40px;}
@media (max-width: 980px){.wiki .w-hero,.wiki .uklad{grid-template-columns: 1fr;}
.wiki .spis ol{grid-template-columns: 1fr 1fr;}
.wiki .kontakt{flex-direction: column; align-items: flex-start;}}
@media (max-width: 560px){.wiki .spis ol{grid-template-columns: 1fr;}
.wiki .produkty{grid-template-columns: 1fr 1fr; gap: 10px;}
.wiki .produkt .foto{height: 190px; padding: 6px;}
.wiki .sytuacja h2{font-size: 22px;}}
@media print{.wiki .kontakt{display: none;}
.wiki .placowki details,.wiki .w-faq details{display: block;}}
@media (max-width: 980px){.wiki .w-hero::before{width: 260px; height: 260px; right: -110px; top: -60px; border-width: 30px;}
.wiki .w-hero::after{display: none;}
.wiki .scena img{aspect-ratio: 16 / 9;}}
@media (max-width: 640px){.wiki .kolaz ul{grid-template-columns: 1fr 1fr !important;}
.wiki .kolaz li{height: 170px;}}
.wiki .montaz-ramka{position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; box-shadow: var(--shadow);}
.wiki .montaz-scena{position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(var(--s, .5));}
.wiki .montaz-scena > img{position: absolute; left: 0; top: 0; width: 1920px !important; height: 1080px; max-width: none; border-radius: 0 !important; box-shadow: none !important; aspect-ratio: auto !important;}
.wiki .montaz-scena > img.wkl{width: auto !important; height: auto; transform-origin: 0 0; mix-blend-mode: multiply;}
.wiki .kropka{position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; border: 7px solid var(--accent, #0a8f8f); box-shadow: 0 0 0 6px rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.3); z-index: 3;}
.wiki .kropka span{position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; background: #fff; color: #111; font: 600 14px/1.3 sans-serif; padding: 7px 11px; border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .15s;}
.wiki .kropka:hover span,.wiki .kropka:focus span{opacity: 1;}
.wiki .montaz-scena > .nakl{position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #f4f6f6; box-sizing: border-box;}
.wiki .tab-usg{height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: Arial, sans-serif; color: #123;}
.wiki .tab-usg b{font-size: 150px; line-height: 1; letter-spacing: 6px;}
.wiki .tab-usg svg{width: 260px; height: 130px;}
.wiki .tab-usg span{font-size: 30px; white-space: nowrap;}
.wiki .kropka.dol span{bottom: auto; top: calc(100% + 10px);}
.wiki .kropka.lewo span{left: auto; right: -10px; transform: none;}
.wiki .kropka.prawo span{left: -10px; transform: none;}
.wiki .premium{display: grid; grid-template-columns: 200px 1fr; gap: 22px; margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-left: 5px solid var(--amber); border-radius: var(--radius); background: var(--amber-pale);}
.wiki .premium-foto img{width: 100%; height: auto; border-radius: 10px; background: #fff;}
.wiki .premium-znak{display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber);}
.wiki .premium h3{margin: 4px 0 8px; color: var(--navy); font-size: 19px;}
.wiki .premium p{margin: 0 0 10px;}
.wiki .premium-mini{display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 12px;}
.wiki .premium-mini figure{margin: 0; width: 130px;}
.wiki .premium-mini img{width: 130px; height: 130px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line);}
.wiki .premium-mini figcaption{font-size: 12px; color: var(--muted); margin-top: 4px;}
.wiki .premium-cena{font-weight: 700; color: var(--navy);}
.wiki .premium-linki{display: flex; gap: 16px; align-items: center; flex-wrap: wrap;}
.wiki .premium .przycisk{display: inline-block; background: var(--navy); color: #fff; padding: 9px 16px; border-radius: 10px; font-weight: 700; text-decoration: none;}
@media (max-width: 700px){.wiki .premium{grid-template-columns: 1fr;}
.wiki .premium-foto{max-width: 220px;}}
.wiki .odbiorca{border: 1px solid var(--line); border-left: 5px solid var(--blue); border-radius: var(--radius); background: var(--pale); padding: 22px 26px; margin: 10px 0 22px;}
.wiki .odbiorca-znak{display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-dark);}
.wiki .odbiorca h2{margin: 4px 0 8px; font-size: 21px; color: var(--navy);}
.wiki .odbiorca p{margin: 0 0 10px;}
.wiki .odbiorca ul{margin: 0 0 14px; padding-left: 20px;}
.wiki .odbiorca li{margin: 4px 0;}
.wiki .odbiorca .przycisk{display: inline-block; background: var(--navy); color: #fff; padding: 9px 16px; border-radius: 10px; font-weight: 700; text-decoration: none;}
/* ===== Część 2: oprawa poradnika w nowym wyglądzie – wersja 2 „Mapa po boku” (zaakceptowana, Krist 01–03.10.2026) =====
   Źródło: projekt-nowy-wyglad/poradnik-wyglad.css (część wspólna + „2 · MAPA PO BOKU”), bez przełącznika propozycji (?w=)
   i bez wersji 1/3; zamiast body.w2 – na stałe. Treść jest w ramie strony (main.wrap), więc .w-wrap nie ma własnej szerokości. */
.wiki{--ink:#1C2A38;--muted:#5B6B7C;--line:#DCE7F0;--soft:#F7FBFE;--blue:#01B3E1;--blue-dark:#0077BE;--navy:#0E2F4F;--pale:#E1F3FC;--radius:14px;--shadow:0 6px 24px rgba(14,47,79,.10),0 2px 6px rgba(14,47,79,.06);
  font-family:var(--font);display:block;overflow-x:clip;background:transparent;position:relative;z-index:0;padding-bottom:8px}
.wiki .w-wrap{width:auto;max-width:none;margin:0;padding:0}
.wiki h1,.wiki h2,.wiki h3,.wiki h4{font-family:var(--font-h)}
.wiki .w-hero{padding-top:8px}
.wiki .przycisk{background:var(--blue-600);border-radius:12px;padding:15px 24px}
.wiki .przycisk:hover{background:var(--blue-700)}
.wiki .produkt{border-radius:var(--radius);transition:box-shadow .2s,border-color .2s,transform .2s}
.wiki .produkt:hover{box-shadow:var(--shadow-2);border-color:transparent;transform:translateY(-3px)}
.wiki .produkt .cena{font-size:16px;font-weight:800}
.wiki .w-faq summary:hover{color:var(--blue-700)}
.wiki .kontakt h2{color:#fff}
.wiki .sytuacja,.wiki .placowki,.wiki [id^="h-"]{scroll-margin-top:16px}
/* typy placówek: w ramie strony jako jasny panel (pełna szerokość ekranu wymagałaby wyjścia poza main.wrap) */
.wiki .placowki{padding:30px 28px;border-radius:20px}
@media (max-width:560px){.wiki .placowki{padding:24px 16px;border-radius:16px}}

/* scena: bez nakładanych zdjęć (wszystkie 27 scen) – zwykły obraz responsywny z kropkami w %, bez skalowania JS.
   Scena z nakładkami (.montaz--skala) zostaje w układzie WIST 1920 px skalowanym skryptem (por.js). */
.wiki .montaz:not(.montaz--skala) .montaz-scena{position:static;width:auto;height:auto;transform:none}
.wiki .montaz:not(.montaz--skala) .montaz-scena>img{position:static;width:100%!important;height:100%;object-fit:cover}
.wiki .scena .g-fot{text-align:left;margin-top:8px;font-size:13px}
.wiki .scena .g-fot .w-il{color:var(--muted)}
.wiki .kropka{--accent:var(--blue)}
.wiki .kropka:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:560px){.wiki .kropka{width:22px;height:22px;margin:-11px 0 0 -11px;border-width:6px}}

/* ramka premium: zdjęcie produktu wstawiane przy wyświetlaniu */
.wiki .premium-foto{display:block;align-self:start}

/* ---------- MAPA PO BOKU: przyklejony spis sytuacji z prawej + pasek postępu; sytuacje połączone linią „drogi” ---------- */
.w-mapa{display:none}
.w-post{position:fixed;left:0;top:0;z-index:70;height:4px;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-700));transition:width .1s;pointer-events:none}
@media (min-width:1200px){
  .wiki .w-wrap.w-uklad{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:36px;align-items:start}
  .wiki .w-mapa{display:block;position:sticky;top:24px;margin-top:8px;padding:18px 18px 14px;border:1px solid var(--sky-200);border-radius:18px;background:#fff;box-shadow:var(--shadow-1)}
}
.w-mapa p{margin:0 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-700)}
.w-mapa ol{list-style:none;margin:0;padding:0;position:relative}
.w-mapa ol::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--sky-100)}
.w-mapa a{position:relative;display:flex;gap:10px;align-items:center;padding:6px 0;font-size:14px;line-height:1.3;color:var(--ink);text-decoration:none}
.w-mapa a i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--sky-200);color:var(--blue-700);font-style:normal;font-weight:800;font-size:12.5px;transition:all .2s}
.w-mapa a:hover{color:var(--blue-700)}
.w-mapa a.is-done i{border-color:var(--blue);background:var(--sky-50)}
.w-mapa a.is-cur{font-weight:700;color:var(--navy)}
.w-mapa a.is-cur i{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 5px var(--sky-100)}
.w-mapa .w-gora{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;font-weight:600}
/* sytuacje: lżejsze karty, numer w kole na linii drogi */
.wiki .sytuacja{box-shadow:none;padding-left:84px}
.wiki .sytuacja::before{left:41px;width:2px;top:78px;bottom:28px;background:var(--sky-100)}
.wiki .sytuacja h2{position:static}
.wiki .sytuacja h2 .nr{position:absolute;left:20px;top:26px;width:44px;height:44px;flex:none;font-size:17px;background:var(--blue);color:#fff;border:0;box-shadow:0 0 0 6px var(--sky-100);transform:none}
@media (max-width:560px){.wiki .sytuacja{padding-left:20px}.wiki .sytuacja::before{display:none}.wiki .sytuacja h2 .nr{position:static;width:36px;height:36px;flex:0 0 36px;box-shadow:0 0 0 4px var(--sky-100)}}
/* przycisk „Spis sytuacji” na telefonie i mniejszych ekranach – lewy dół (prawy dół zajmuje przycisk „do góry” ramy) */
.w-spis-btn{display:none}
@media (max-width:1199px){
  .w-spis-btn{display:inline-flex;position:fixed;left:16px;bottom:16px;z-index:65;align-items:center;gap:8px;min-height:44px;padding:12px 16px;border-radius:999px;border:0;background:var(--navy);color:#fff;font:700 14px/1 var(--font);box-shadow:var(--shadow-3);cursor:pointer}
  .w-spis-open .wiki .w-mapa{display:block;position:fixed;left:16px;bottom:72px;z-index:66;width:min(320px,100vw - 32px);max-height:70vh;overflow:auto;padding:16px;border-radius:18px;background:#fff;box-shadow:var(--shadow-3)}
}
@media print{.w-spis-btn,.w-post,.w-mapa{display:none!important}}

/* pytanie pod tytułem sytuacji nad ozdobnym kołem w prawym górnym rogu (koło zasłaniało koniec zdania) */
.wiki .sytuacja .pytanie{position:relative;z-index:1;padding-right:72px}
@media (max-width:560px){.wiki .sytuacja .pytanie{padding-right:0}}
/* „Zobacz także w sklepie” – linki ze starej treści strony (generator: zobacz_takze) */
.wiki .zobacz{margin:8px 0 30px}
.wiki .w-zobacz{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wiki .w-zobacz a{display:inline-flex;gap:6px;align-items:baseline;min-height:40px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);text-decoration:none;font-size:14.5px}
.wiki .w-zobacz a:hover{border-color:var(--blue);background:var(--pale)}
.wiki .w-zobacz .kod{font-size:12.5px;color:var(--muted)}

/* ===== Poprawki po weryfikacji telefonu / wydajności / dostępności (fixer poradniki, 2026-10-04) ===== */
/* karty „Produkty, które sprawdzą się…” na telefonie: zamiast 2 wąskich kolumn (ok. 150 px, opis po 1–3 słowa) – jedna kolumna,
   karta pozioma: zdjęcie z lewej, obok nazwa, kod i cena, opis pod spodem na całą szerokość karty (siatka; .tresc „znika” z układu) */
@media (max-width:640px){
  .wiki .produkty,.wiki .produkty.n1,.wiki .produkty.n2,.wiki .produkty.n3,.wiki .produkty.n4{grid-template-columns:1fr;gap:10px}
  .wiki .produkty .produkt{display:grid;grid-template-columns:108px minmax(0,1fr);grid-template-areas:"foto h4" "foto kod" "foto cena" "opis opis";
    grid-template-rows:auto auto 1fr auto;column-gap:14px;row-gap:4px;align-items:start;padding:12px 14px 14px}
  .wiki .produkty .produkt .tresc{display:contents}
  .wiki .produkty .produkt .foto{grid-area:foto;height:124px;min-height:0;padding:0;flex:none}
  .wiki .produkty .produkt h4{grid-area:h4}
  .wiki .produkty .produkt .kod{grid-area:kod}
  .wiki .produkty .produkt .cena{grid-area:cena;align-self:end}
  .wiki .produkty .produkt p{grid-area:opis;margin-top:8px}
}
/* kropki na scenie: niewidoczne pole dotyku 44×44 px (kropka zostaje tej samej wielkości) */
.wiki .kropka::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
/* wydajność: przeglądarka nie układa sytuacji poza ekranem (treść zostaje w HTML, w wyszukiwaniu na stronie i dla czytników;
   „auto” w contain-intrinsic-size zapamiętuje prawdziwą wysokość po pierwszym wyświetleniu) */
.wiki .sytuacja{content-visibility:auto;contain-intrinsic-size:auto 1500px}
@media (max-width:640px){.wiki .sytuacja{contain-intrinsic-size:auto 2600px}}
/* por.js dodaje .por-pelne przed skokiem do kotwicy (spis/mapa/#adres) – wtedy pełny układ, skok trafia dokładnie */
.wiki.por-pelne .sytuacja{content-visibility:visible}
@media print{.wiki .sytuacja{content-visibility:visible}}
/* WARIANT „mocniejszy kontrast” (decyzja Krista – kolory marki): włącza go stała NowyPorExtension::KONTRAST = true
   (klasa .por-kontrast na div.wiki). Domyślnie WYŁĄCZONY – wygląd jak w zaakceptowanej makiecie.
   Numery sytuacji i spisu na ciemniejszym niebieskim marki (#0077BE, biały 4,8:1), numery „Od czego zacząć” granatowe,
   przyciski „Napisz do nas” ciemniejsze (#0077BE, 4,8:1 zamiast 3,2:1). */
.wiki.por-kontrast .sytuacja h2 .nr,.wiki.por-kontrast .spis .nr,.por-kontrast .w-mapa a.is-cur i{background:var(--blue-dark);border-color:var(--blue-dark)}
.wiki.por-kontrast .dnr{color:var(--blue-dark)}
.wiki.por-kontrast .kontakt .przycisk{background:var(--blue-700)}
.wiki.por-kontrast .kontakt .przycisk:hover{background:var(--blue-800)}

/* ===== 04.10 (agent poradniki): B28/B29 bez sceny, sekcje „odbiorcy” ===== */
/* kolaż zdjęć produktów zamiast sceny (generator: kolaz) – zdjęcie wstawia filtr pm_por_tresc w link do produktu;
   link wypełnia kafel, zdjęcie mieści się w nim bez powiększania ponad naturalny rozmiar (jak w WIST) */
.wiki .kolaz li>a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:10px}
.wiki .kolaz li>a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* wiki.css ≤ 980 px nadaje .scena img proporcje 16:9 (dla sceny) – w kolażu zdjęcie zachowuje własne proporcje */
.wiki .scena .kolaz img{aspect-ratio:auto;width:auto;height:auto;max-width:100%;max-height:100%}
/* sekcje dla producentów/marek i agencji (pole „odbiorcy”): przycisk z polem dotyku min. 44 px */
.wiki .odbiorca .przycisk{display:inline-flex;align-items:center;min-height:44px}
.wiki .odbiorca .przycisk:hover{background:var(--blue-700)}
@media (max-width:560px){.wiki .odbiorca{padding:20px 18px}.wiki .odbiorca .przycisk{white-space:normal}}

/* ===== 05.10 (agent „kropki”): opis kropki na scenie = JEDEN dymek „KOD · nazwa →” (jak w makiecie i w WIST) =====
   Generator owija nazwę w <span class="pm-n"> (bieżąca nazwa z bazy), a reguła WIST „.wiki .kropka span” łapała też ten
   wewnętrzny span: nazwa wyskakiwała jako DRUGI dymek nad pierwszym i przy górnej krawędzi zdjęcia była ucinana
   (uwaga Krista 04.10, B05 P99bsk). Nazwa wraca do zwykłego tekstu w dymku (łamie się razem z nim). Miejsce dymka
   w ramce (zawsze w całości na zdjęciu) i dotyk na telefonie – public/nowy/js/por.js, blok „Kropki na scenie”. */
.wiki .montaz-ramka .kropka > span span{position:static;display:inline;padding:0;background:none;box-shadow:none;border-radius:0;
  transform:none;white-space:inherit;font:inherit;color:inherit;opacity:1;transition:none;pointer-events:inherit}