/* K-260 — MAKIETA STRONY GŁÓWNEJ FIRMY (warianty A/B/C, trasa /pl/_makieta/firma/{a|b|c}).
   Korekta Piotra 03.10: strona główna = PORTAL z czatem w centrum; zakładki to FUNKCJE dla odbiorców
   (SKLEP dla instalatorów na b2b, Dystrybutorzy, Producenci, OKAZJE, Wiedza, Dofinansowania), nie opis firmy.
   🔴 ZERO nowych barw: wyłącznie tokeny `skin.css` i wartości rgba już użyte w `home_scena.css` / `home_kosmos.css`.
   Tło, kosmos i panel rozmowy dziedziczą z K-257 (`home_kosmos.css`, `home_scena.css`) — ten plik tylko układa. */

body.firma{--mf-hdr:64px;--mf-szklo:linear-gradient(168deg,rgba(15,42,31,.56),rgba(4,21,15,.50))}

/* ════════ BELKA MENU FIRMY (belka sklepu z base.html jest na makiecie schowana) ════════ */
body.firma > .hdr{display:none}
body.pg-home.firma main{padding:var(--mf-hdr) 0 0;max-width:none}
.mf-belka{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(4,21,15,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mf-belka-in{max-width:var(--max);margin:0 auto;height:var(--mf-hdr);padding:0 24px;display:flex;align-items:center;gap:28px}
.mf-logo{flex:none;display:flex}
.mf-logo img{height:22px;width:auto}
.mf-menu{display:flex;gap:4px;margin-left:auto;align-items:center}
.mf-menu a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;padding:.45rem .8rem;border-radius:999px;
  transition:color .2s var(--krzywa),background .2s var(--krzywa)}
.mf-menu a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.mf-menu .mf-menu-okazje{color:var(--accent-ink);font-family:var(--mono);letter-spacing:.06em;font-size:.82rem}
.mf-sklep{flex:none;display:inline-flex;align-items:center;gap:8px;padding:.55rem 1.1rem;border-radius:999px;
  background:var(--accent);color:var(--bg);font-weight:700;letter-spacing:.06em;font-size:.86rem;text-decoration:none;
  box-shadow:0 0 26px -6px rgba(16,185,129,.55);transition:box-shadow .2s var(--krzywa),transform .2s var(--krzywa)}
.mf-sklep:hover{box-shadow:0 0 34px -4px rgba(16,185,129,.7);transform:translateY(-1px)}

/* ════════ SCENA (pierwszy ekran) ════════ */
.mf-scena{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(22px,4vh,48px) 24px clamp(20px,3vh,36px);
  min-height:calc(100svh - var(--mf-hdr));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.mf-scena .sc-h1{margin-bottom:8px}
/* otoczka czatu z K-257 (`.sc-kadr`) — tu bez własnej wysokości ekranu, scenę trzyma `.mf-scena` */
body.firma .sc-kadr.mf-czat{min-height:0;padding:0;width:100%;justify-content:flex-start}
.mf-czat-srodek{margin:clamp(6px,1.4vh,14px) 0 0}
.mf-etykieta{margin:0 0 8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}

/* ——— WEJŚCIA W ZAKŁADKI ——— */
.mf-wejscia{display:grid;gap:12px;width:100%}
.mf-wejscie{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);text-align:left;
  padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:var(--mf-szklo);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 52px -28px rgba(0,0,0,.85);
  transition:border-color .25s var(--krzywa),box-shadow .25s var(--krzywa),transform .25s var(--krzywa),opacity .9s var(--sc-wolno),translate .9s var(--sc-wolno)}
.mf-wejscie:hover{border-color:rgba(16,185,129,.42);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -26px rgba(0,0,0,.9),0 0 26px -6px rgba(16,185,129,.26)}
.mf-wejscie svg{flex:none;width:38px;height:38px;padding:8px;border-radius:12px;background:var(--brand2);
  border:1px solid rgba(16,185,129,.25);color:var(--accent-ink);box-shadow:0 0 16px -6px rgba(16,185,129,.45)}
.mf-w-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.mf-w-tekst strong{font-size:.98rem;font-weight:700}
.mf-w-tekst small{font-size:.78rem;color:var(--muted);line-height:1.35}
.mf-w-strz{margin-left:auto;color:var(--subtle);font-size:1rem;transition:color .2s var(--krzywa),transform .2s var(--krzywa)}
.mf-wejscie:hover .mf-w-strz{color:var(--accent-ink);transform:translateX(3px)}
/* SKLEP wyróżniony w każdym układzie wejść */
.mf-w-sklep{border-color:rgba(16,185,129,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 30px -10px rgba(16,185,129,.35)}
.mf-w-sklep svg{background:var(--accent);color:var(--bg)}
.mf-w-sklep strong{color:var(--accent-ink);letter-spacing:.06em}
.mf-w-okazje strong{font-family:var(--mono);letter-spacing:.06em}

/* wejście sceny w czasie (ten sam rytm co chipy K-257) */
html.ck-js:not(.sc-wstal) .mf-wejscie{opacity:0;translate:0 18px}
html.sc-wstal:not(.sc-gotowe) .mf-wejscie{transition-delay:calc(1.05s + var(--i,0) * 80ms)}
html.sc-otwarte .mf-wejscia{opacity:.6;transition:opacity .9s var(--sc-wolno)}
html.sc-otwarte .mf-wejscia:hover{opacity:1}

/* ════════ WARIANT A: czat w scenie, pod nim rząd sześciu kafli ════════ */
.mf-wejscia-kafle{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin-top:clamp(20px,4vh,40px)}
.mf-wejscia-kafle .mf-wejscie{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 16px 18px;min-height:150px}
.mf-wejscia-kafle .mf-w-strz{position:absolute;top:14px;right:16px}

/* ════════ WARIANT B: lista zakładek z lewej, czat z prawej ════════ */
.mf-scena-b{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;text-align:left}
.mf-scena-b .sc-h1{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0 0 18px}
.mf-wejscia-lista{gap:8px}
.mf-wejscia-lista .mf-wejscie{padding:11px 14px}
.mf-wejscia-lista .mf-wejscie svg{width:34px;height:34px;padding:7px}
.mf-b-prawa{display:flex;flex-direction:column;align-items:stretch}
.mf-czat-bok .sc-panel{width:100%}
html.ck-skupienie .mf-czat-bok .sc-panel{width:100%}
html.ck-js:not(.sc-wstal) .mf-czat-bok .sc-panel{width:70%}
.mf-czat-bok .sc-panel .cz-pole .cz-input{height:56px}
.mf-czat-bok .sc-panel .cz-pole{margin:18px 18px 0}
.mf-czat-bok .sc-panel .cz-dopisek{padding:12px 18px 18px}

/* ════════ WARIANT C: pigułki w panelu + cienki pas zakładek ════════ */
.mf-pigulki{display:flex;flex-wrap:wrap;gap:8px;padding:14px 14px 0}
.mf-pigulka,.mf-akcja{font:inherit;cursor:pointer;color:var(--ink);font-size:.86rem;font-weight:500;padding:.5rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(15,42,31,.55);transition:border-color .2s var(--krzywa),background .2s var(--krzywa),color .2s var(--krzywa)}
.mf-pigulka:hover,.mf-akcja:hover{border-color:rgba(16,185,129,.5);background:var(--glass-hover)}
.mf-pigulka.on{border-color:rgba(16,185,129,.6);color:var(--accent-ink);background:rgba(16,185,129,.12)}
.mf-wejscia-pas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(18px,3.4vh,34px)}
.mf-wejscia-pas .mf-wejscie{padding:.42rem .9rem .42rem .45rem;border-radius:999px;gap:9px}
.mf-wejscia-pas .mf-wejscie svg{width:30px;height:30px;padding:6px;border-radius:50%}
.mf-wejscia-pas .mf-w-tekst small,.mf-wejscia-pas .mf-w-strz{display:none}
.mf-wejscia-pas .mf-w-tekst strong{font-size:.88rem;font-weight:600}

/* ════════ SEKCJE POD SCENĄ ════════ */
.mf-sekcja{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vh,56px) 24px 0;scroll-margin-top:var(--mf-hdr)}
.mf-sekcja:last-child{padding-bottom:clamp(40px,7vh,80px)}
[id]{scroll-margin-top:calc(var(--mf-hdr) + 12px)}
.mf-sekcja-g{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 2px 16px}
.mf-sekcja-g h2,.mf-strefa h2,.mf-dof h2{margin:0;font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.mf-pod{margin-left:10px;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mf-sekcja-g a,.mf-dalej a{color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em}
.mf-sekcja-g a:hover,.mf-dalej a:hover{color:var(--accent-ink)}
.mf-blok,.mf-strefa,.mf-dof{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:var(--mf-szklo);
  backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 52px -28px rgba(0,0,0,.85)}
.mf-dwie{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px}
.mf-blok{padding:22px 24px}
.mf-blok .mf-dof{border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}

/* OKAZJE: plakietka spadku na karcie (siatka = karty K-257 `.sc-kafle`) */
.mf-okazja{position:relative}
.mf-spadek{position:absolute;top:-9px;right:12px;z-index:2;padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--bg);
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.04em}
/* karuzela (wariant C): przewijana w bok w obrębie sekcji, strzałki w nagłówku */
.mf-karuzela{list-style:none;margin:0;padding:12px 2px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mf-karuzela::-webkit-scrollbar{display:none}
.mf-karuzela .card{scroll-snap-align:start;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;
  padding:11px 14px 11px 11px;border-radius:16px;background:var(--mf-szklo);border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 52px -28px rgba(0,0,0,.85)}
.mf-karuzela .card-img{display:block;width:96px;height:96px;border-radius:12px;overflow:hidden;position:relative}
.mf-karuzela .card-img:not(.card-bez){background:linear-gradient(180deg,#fff,#EEF3F0)}
.mf-karuzela .card-img img{padding:6px;width:100%;height:100%;object-fit:contain}
.mf-karuzela .card-bez{background:radial-gradient(ellipse 120% 100% at 50% 0%,var(--brand2),rgba(4,21,15,.9) 78%);display:flex;align-items:center;justify-content:center}
.mf-karuzela .card-body{padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.mf-karuzela .name{font-size:.88rem;font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mf-karuzela .specs{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-karuzela .price{margin-top:3px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px}
.mf-karuzela .price small{font-family:var(--mono);font-size:.66rem;color:var(--subtle)}
.mf-strzalki{display:flex;gap:6px}
.mf-strzalki button{font:inherit;cursor:pointer;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(15,42,31,.55);color:var(--ink)}
.mf-strzalki button:hover{border-color:rgba(16,185,129,.5)}

/* STREFY dystrybutora / producenta */
.mf-strefy{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mf-strefa{padding:24px 26px}
.mf-akcje{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mf-akcja-pelna{background:var(--accent);color:var(--bg);border-color:transparent;font-weight:700}
.mf-akcja-pelna:hover{background:var(--accent-ink);color:var(--bg)}

/* WIEDZA: lista wpisów z datą (archiwum wstecz) */
.mf-wpisy{list-style:none;margin:0;padding:0}
.mf-wpisy li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(255,255,255,.06)}
.mf-wpisy li:first-child{border-top:0}
.mf-wpisy time{font-family:var(--mono);font-size:.74rem;color:var(--subtle)}
.mf-wpisy a{color:var(--ink);text-decoration:none;font-weight:500}
.mf-wpisy a:hover{color:var(--accent-ink)}
.mf-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.mf-dalej{margin:12px 0 0}
#wiedza.mf-sekcja .mf-wpisy{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:var(--mf-szklo);padding:6px 24px}

/* DOFINANSOWANIA */
.mf-dof{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 26px}
.mf-dof p:not(.mf-etykieta){margin:8px 0 0;color:var(--muted);line-height:1.55}
.mf-sekcja > .mf-dof{flex-direction:row;align-items:center;justify-content:space-between}

/* ════════ WĄSKI EKRAN ════════ */
@media (max-width:1100px){
  .mf-scena-b{grid-template-columns:1fr}
  .mf-b-prawa{order:-1}
  .mf-menu a{padding:.4rem .55rem;font-size:.84rem}
  .mf-belka-in{gap:14px}
}
@media (max-width:820px){
  body.firma{--mf-hdr:104px}
  .mf-belka-in{height:auto;display:grid;grid-template-columns:1fr auto;row-gap:8px;padding:10px 16px 8px}
  .mf-menu{grid-column:1/-1;grid-row:2;margin:0 -16px;padding:0 12px;overflow-x:auto;scrollbar-width:none;gap:2px}
  .mf-menu::-webkit-scrollbar{display:none}
  .mf-menu a{flex:none}
  .mf-strefy,.mf-dwie{grid-template-columns:1fr}
  .mf-sekcja > .mf-dof{flex-direction:column;align-items:flex-start}
}
@media (max-width:700px){
  .mf-scena{min-height:auto;padding:22px 16px 26px}
  .mf-sekcja{padding:28px 16px 0}
  .mf-wejscia-kafle{grid-template-columns:1fr;gap:8px}
  .mf-wejscia-kafle .mf-wejscie{min-height:0;padding:12px 14px;flex-direction:row;align-items:center}
  .mf-wejscia-kafle .mf-w-strz{position:static}
  .mf-wejscia-kafle .mf-wejscie svg{width:34px;height:34px;padding:7px}
  .mf-karuzela{grid-auto-columns:86%}
  .mf-wpisy li{grid-template-columns:1fr auto;gap:4px 10px}
  .mf-wpisy time{grid-column:1/-1}
  .mf-blok,.mf-strefa,.mf-dof{padding:18px}
  #wiedza.mf-sekcja .mf-wpisy{padding:4px 18px}
}
@media (prefers-reduced-motion:reduce){.mf-wejscie{transition:none!important}}

/* ——— poprawki po obejrzeniu zrzutów K-260 ———
   1) pierwszy ekran nie kończy się pustą czernią: scena krótsza o pas, w który zagląda nagłówek następnej sekcji;
   2) karuzela: plakietka „−?%” nie może być ucięta (`.card` ze skin.css ma overflow:hidden), a czwarta karta ma wystawać,
      żeby było widać, że pas się przewija;
   3) telefon, wariant C: pigułki w jednym rzędzie z zawijaniem, mniejsze. */
.mf-scena-a,.mf-scena-c{min-height:calc(100svh - var(--mf-hdr) - 110px)}
.mf-scena-b{min-height:calc(100svh - var(--mf-hdr) - 60px)}
.mf-karuzela .card{overflow:visible}
.mf-karuzela{grid-auto-columns:minmax(300px,29%)}
@media (max-width:700px){
  .mf-scena-a,.mf-scena-b,.mf-scena-c{min-height:auto}
  .mf-karuzela{grid-auto-columns:86%}
  .mf-pigulki{gap:6px;padding:12px 12px 0}
  .mf-pigulka{font-size:.8rem;padding:.42rem .75rem}
}

/* ════════ K-260b — MENU WSPÓŁPRACA · SKLEP · KLIENT i PODGLĄD TREŚCI ZAKŁADEK ════════
   Zero nowych barw: te same tokeny i rgba co wyżej. */
.mf-menu{gap:6px}
.mf-menu a{letter-spacing:.06em;font-weight:600}
.mf-menu a.on{color:var(--accent-ink);background:rgba(16,185,129,.12)}
.mf-menu .mf-sklep{color:var(--bg);padding:.5rem 1.05rem}
.mf-menu .mf-sklep:hover{color:var(--bg);background:var(--accent)}
.mf-wejscie.on{border-color:rgba(16,185,129,.6)}

/* tekst tymczasowy bez pokrycia w PISARZU — widoczny znacznik do akceptacji */
[data-pisarz]::after{content:" [PISARZ]";font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.06em;color:var(--subtle);vertical-align:middle}

/* treść zakładki (wspólna dla A/B/C) */
.mf-tresc{text-align:left}
.mf-tresc h3{margin:0 0 10px;font-size:1.3rem;font-weight:800;letter-spacing:-.015em;color:var(--ink);line-height:1.3}
.mf-tresc p{margin:0 0 12px;color:var(--muted);line-height:1.55}
.mf-kroki{margin:6px 0 16px;padding:0;list-style:none;counter-reset:k;display:grid;gap:10px}
.mf-kroki li{counter-increment:k;position:relative;padding:0 0 0 38px;display:flex;flex-direction:column;gap:3px;line-height:1.5}
.mf-kroki li::before{content:counter(k);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.76rem;color:var(--accent-ink);background:var(--brand2);border:1px solid rgba(16,185,129,.3)}
.mf-kroki strong{color:var(--ink);font-weight:700}
.mf-kroki span{color:var(--muted);font-size:.93rem}
.mf-podtytul{font-family:var(--mono);font-size:.74rem!important;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)!important;margin:4px 0 10px!important}
.mf-modele{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.mf-model,.mf-agent{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(15,42,31,.45)}
.mf-model p:last-child,.mf-agent p:last-child{margin-bottom:0}
.mf-model-g{color:var(--ink)!important;font-weight:700;margin-bottom:6px!important}
.mf-agent{margin-bottom:14px;border-color:rgba(16,185,129,.35)}
.mf-pytania{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.mf-pytania li{font-size:.84rem;color:var(--ink);padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line);background:rgba(4,21,15,.5)}
.mf-tresc .mf-akcje{margin-top:6px}
a.mf-akcja{display:inline-block;text-decoration:none}
.mf-film{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:16/9;max-width:560px;margin:4px 0 16px;
  border-radius:14px;border:1px dashed rgba(16,185,129,.4);background:radial-gradient(ellipse 120% 100% at 50% 0%,var(--brand2),rgba(4,21,15,.9) 78%)}
.mf-film-play{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--bg);font-size:1.1rem;
  box-shadow:0 0 26px -6px rgba(16,185,129,.55)}
.mf-film-g{color:var(--ink);font-weight:600}
.mf-film-znak{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--subtle)}

/* A: harmonijka trzech paneli pod sceną */
.mf-harmonijka{display:grid;gap:12px;padding-bottom:clamp(40px,7vh,80px)}
.mf-panel{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:var(--mf-szklo);
  backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 52px -28px rgba(0,0,0,.85)}
.mf-panel[open]{border-color:rgba(16,185,129,.38)}
.mf-panel summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:18px 24px}
.mf-panel summary::-webkit-details-marker,.mf-wejscie-d summary::-webkit-details-marker{display:none}
.mf-panel-n{font-weight:800;letter-spacing:.06em;color:var(--ink)}
.mf-panel-z{font-family:var(--mono);color:var(--accent-ink);font-size:1.2rem;transition:transform .2s var(--krzywa)}
.mf-panel[open] .mf-panel-z,.mf-wejscie-d[open] .mf-w-strz{transform:rotate(45deg);color:var(--accent-ink)}
.mf-panel-in{padding:0 24px 22px}

/* B: lista zakładek rozwijana w miejscu */
.mf-wejscie-d{display:block}
.mf-wejscie-d summary{list-style:none;cursor:pointer}
.mf-wejscie-d[open] > summary{border-color:rgba(16,185,129,.5);border-bottom-left-radius:0;border-bottom-right-radius:0}
.mf-wejscie-d .mf-panel-in{padding:16px 16px 18px;border:1px solid rgba(16,185,129,.3);border-top:0;border-radius:0 0 16px 16px;background:var(--mf-szklo);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mf-wejscie-d .mf-tresc h3{font-size:1.1rem}
.mf-wejscie-d .mf-modele{grid-template-columns:1fr}

/* C: karta pod pasem zakładek (jedna naraz) */
.mf-karty{width:100%;max-width:900px}
.mf-karta{position:relative;margin-top:16px;padding:22px 26px;border-radius:18px;border:1px solid rgba(16,185,129,.38);background:var(--mf-szklo);
  backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 52px -28px rgba(0,0,0,.85)}
.mf-karta[hidden]{display:none}
.mf-karta-zamknij{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;cursor:pointer;font:inherit;color:var(--muted);
  border:1px solid var(--line);background:rgba(15,42,31,.55)}
.mf-karta-zamknij:hover{color:var(--ink);border-color:rgba(16,185,129,.5)}

@media (max-width:820px){
  .mf-menu{justify-content:flex-start}
}
@media (max-width:700px){
  .mf-modele{grid-template-columns:1fr}
  .mf-panel summary{padding:16px 18px}
  .mf-panel-in{padding:0 18px 18px}
  .mf-karta{padding:18px}
  .mf-tresc h3{font-size:1.12rem}
}

/* ════════ K-260c — WARIANT D: MENU TEKSTOWE NAD CZATEM + „ŻALUZJA” ════════
   Piotr 03.10 (ZP-1074): zero kafli, zero dużych przycisków, zero pigułek, zero pasa zakładek; czat = jedyna główna postać.
   Belka niesie samo logo; menu to cztery słowa nad czatem. Roleta: `zaluzja.css` (komponent), tu tylko treść.
   Zero nowych barw: tokeny `skin.css` i rgba już użyte wyżej. */
body.firma.mf-d{--mf-hdr:56px}
.mf-belka-d{background:rgba(4,21,15,.32);border-bottom-color:rgba(255,255,255,.05)}
.mf-belka-d .mf-belka-in{height:var(--mf-hdr);display:flex;padding:0 24px}
.mf-scena-d{justify-content:flex-start;padding-top:clamp(40px,12vh,130px);min-height:calc(100svh - var(--mf-hdr))}
.mf-scena-d .sc-h1{font-size:clamp(1.6rem,2.6vw,2.3rem);margin-bottom:4px}

.mf-d-menu{position:relative;z-index:58;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  margin:clamp(8px,1.6vh,16px) 0 clamp(10px,2vh,18px);padding:4px 0}
.mf-d-poz{position:relative;font:inherit;background:none;border:0;cursor:pointer;color:#D2EFDD;text-decoration:none;
  font-size:.8rem;font-weight:600;letter-spacing:.2em;padding:.55rem .95rem;transition:color .25s var(--krzywa)}
/* kreska pod słowem: rośnie od lewej — na najechaniu do 40 %, przy otwartej rolecie pełna */
.mf-d-poz::after{content:"";position:absolute;left:.95rem;right:calc(.95rem + .2em);bottom:.3rem;height:1px;background:var(--accent);
  box-shadow:0 0 10px rgba(16,185,129,.45);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--krzywa)}
.mf-d-poz:hover{color:var(--ink)}
.mf-d-poz:hover::after{transform:scaleX(.4)}
.mf-d-poz[aria-expanded="true"]{color:var(--accent-ink)}
.mf-d-poz[aria-expanded="true"]::after{transform:scaleX(1)}
.mf-d-poz:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:6px}
.mf-d-kropka{color:var(--subtle);font-size:.8rem;user-select:none}
html.ck-js:not(.sc-wstal) .mf-d-menu{opacity:0;translate:0 10px}
body.pg-home .mf-d-menu{transition:opacity .9s var(--sc-wolno),translate .9s var(--sc-wolno)}
html.sc-wstal:not(.sc-gotowe) .mf-d-menu{transition-delay:.35s}

/* treść rolety */
.mf-d-tresc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:34px;text-align:left;padding-right:20px}
.mf-d-kol + .mf-d-kol{border-left:1px solid rgba(255,255,255,.07);padding-left:34px}
/* roleta MONITORING CEN w sklepie (Piotr 14.10 18:5x): jedna kolumna tekstu + link do rejestracji pod spodem */
.mf-d-tresc.mf-d-jedna{grid-template-columns:1fr;max-width:720px;margin:0 auto}
.mf-d-h{margin:0 0 14px;font-size:1.3rem;font-weight:800;line-height:1.28;letter-spacing:-.015em;color:var(--ink)}
.mf-d-kroki{list-style:none;counter-reset:k;margin:0;padding:0;display:grid;gap:10px}
.mf-d-kroki li{counter-increment:k;position:relative;padding-left:32px;font-size:.92rem;line-height:1.5;color:var(--muted)}
.mf-d-kroki li::before{content:counter(k);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.7rem;color:var(--accent-ink);border:1px solid rgba(16,185,129,.35)}
.mf-d-kroki strong{color:var(--ink);font-weight:700}
.mf-d-pod{margin:0 0 10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.mf-d-lista{margin:0 0 14px}
.mf-d-lista dt{margin:12px 0 0;color:var(--ink);font-weight:700;font-size:.92rem}
.mf-d-lista dt:first-child{margin-top:0}
.mf-d-lista dd{margin:2px 0 0;color:var(--muted);font-size:.9rem;line-height:1.5}
.mf-d-p{margin:0 0 12px;color:var(--muted);font-size:.92rem;line-height:1.55}
.mf-d-film{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 0;padding:9px 12px;border:1px dashed rgba(16,185,129,.35);border-radius:12px;
  font-size:.88rem;color:var(--ink)}
.mf-d-film-play{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--bg);font-size:.62rem}
.mf-d-pytania{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.mf-d-pytania li{position:relative;padding-left:16px;font-size:.9rem;color:var(--ink)}
.mf-d-pytania li::before{content:"›";position:absolute;left:0;color:var(--accent-ink)}
.mf-d-akcje{display:flex;flex-wrap:wrap;gap:8px 24px;margin:4px 0 0}
.mf-d-link{font:inherit;background:none;border:0;border-bottom:1px solid rgba(16,185,129,.35);border-radius:0;padding:3px 0;cursor:pointer;
  color:var(--accent-ink);font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .2s var(--krzywa),color .2s var(--krzywa)}
.mf-d-link:hover{color:var(--ink);border-bottom-color:var(--accent)}
.mf-d-link:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

@media (max-width:820px){
  body.firma.mf-d{--mf-hdr:56px}
  .mf-belka-d .mf-belka-in{display:flex;padding:0 16px}
}
@media (max-width:700px){
  .mf-scena-d{padding-top:26px}
  .mf-d-menu{margin:6px -8px 12px}
  .mf-d-poz{font-size:.72rem;letter-spacing:.13em;padding:.55rem .5rem}
  .mf-d-poz::after{left:.5rem;right:calc(.5rem + .13em)}
  .mf-d-kropka{font-size:.72rem}
  .mf-d-tresc{grid-template-columns:1fr;gap:14px;padding-right:14px}
  .mf-d-kol + .mf-d-kol{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.07);padding-top:14px}
  .mf-d-h{font-size:1.06rem;margin-bottom:10px}
  .mf-d-kroki{gap:7px}
  .mf-d-kroki li,.mf-d-lista dd,.mf-d-p,.mf-d-pytania li{font-size:.86rem}
  .mf-d-lista dt{margin-top:8px;font-size:.88rem}
}
@media (max-width:360px){
  .mf-d-poz{font-size:.68rem;letter-spacing:.1em;padding:.55rem .4rem}
}
@media (prefers-reduced-motion:reduce){.mf-d-menu,.mf-d-poz::after{transition:none!important}}

/* ════════ K-279 — WARIANT D: JEDEN EKRAN (bez przewijania strony) + WĄSKA STOPKA ════════
   Piotr 03.10: „żeby ona nie była przewijana tylko wszystko było na 1 stronie”. Blokada przewijania WYŁĄCZNIE tu
   (`body.firma.mf-d` / `html:has(...)`) — inne strony sklepu i warianty A/B/C przewijają się jak dotąd.
   Rozmowa rośnie w oknie czatu (`.cz-okno` / `.cz-tasma` mają własne przewijanie), nie na stronie.
   Zero nowych barw: tokeny `skin.css` i rgba już użyte w belce wariantu D. */
html:has(> body.firma.mf-d){height:100%;overflow:hidden;overscroll-behavior:none}
body.firma.mf-d{--mf-stopka:36px;height:100vh;height:100dvh;overflow:hidden;padding-bottom:0!important}
body.pg-home.firma.mf-d main{height:100%;padding:var(--mf-hdr) 0 var(--mf-stopka);overflow:hidden}
body.firma.mf-d .mf-scena-d{min-height:0;height:100%;padding-top:clamp(14px,11vh,120px);padding-bottom:12px}

/* wąska stopka — jeden cienki pasek, tekst jak menu nad czatem (nie przyciski) */
.mf-stopka{position:fixed;left:0;right:0;bottom:0;z-index:59;height:var(--mf-stopka);background:rgba(4,21,15,.32);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.05)}
.mf-stopka-in{max-width:var(--max);height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:0;
  white-space:nowrap;font-size:.72rem;color:var(--subtle);letter-spacing:.02em}
.mf-st-firma{color:var(--muted);font-weight:600}
.mf-st-nip{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em}
.mf-st-kropka{padding:0 .55rem;color:var(--subtle);user-select:none}
.mf-st-menu{margin-left:auto;display:flex;align-items:center}
.mf-st-poz{position:relative;font:inherit;background:none;border:0;cursor:pointer;color:var(--muted);padding:.5rem .55rem;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:color .25s var(--krzywa)}
.mf-st-poz::after{content:"";position:absolute;left:.55rem;right:calc(.55rem + .18em);bottom:.32rem;height:1px;background:var(--accent);
  box-shadow:0 0 10px rgba(16,185,129,.45);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--krzywa)}
.mf-st-poz:hover{color:var(--ink)}
.mf-st-poz:hover::after{transform:scaleX(.4)}
.mf-st-poz[aria-expanded="true"]{color:var(--accent-ink)}
.mf-st-poz[aria-expanded="true"]::after{transform:scaleX(1)}
.mf-st-poz:focus-visible{outline:1px solid var(--accent);outline-offset:1px;border-radius:6px}

/* okienko „O firmie”: krótka lista dokumentów */
.mf-st-dok{list-style:none;margin:0;padding:0;display:grid;gap:2px;text-align:left}
.mf-st-dok a{display:block;padding:6px 0;color:var(--muted);text-decoration:none;font-size:.86rem;transition:color .2s var(--krzywa)}
.mf-st-dok a:hover,.mf-st-dok a:focus-visible{color:var(--accent-ink)}
.mf-st-dok a:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:4px}

/* pasek „Kontakt”: mail · telefon · WhatsApp · ikonki — jedna linia (na telefonie się zawija) */
.mf-kontakt{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 22px;font-size:.8rem}
.mf-k-poz{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;transition:color .2s var(--krzywa)}
a.mf-k-poz:hover,a.mf-k-poz:focus-visible{color:var(--accent-ink)}
.mf-kontakt svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mf-k-social{display:inline-flex;align-items:center;gap:12px}
.mf-k-ikona{display:inline-flex;color:var(--muted);transition:color .2s var(--krzywa)}
a.mf-k-ikona:hover,a.mf-k-ikona:focus-visible{color:var(--accent-ink)}
.mf-k-brak,.mf-k-brak-opis{color:var(--subtle)}
.mf-k-ikona.mf-k-brak{opacity:.55}
.mf-k-brak-opis{font-size:.72rem}
.mf-kontakt a:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:4px}
/* S35: klik w adres e-mail kopiuje go do schowka — ✓ przy adresie przez 2 s (skrypt w `_mf_rolety.html`) */
a.mf-skopiowany::after{content:"✓";margin-left:6px;color:var(--accent-ink)}
/* S35: kolorowa ikona WhatsApp przed numerem — barwy w samym SVG, bez obrysu z `.mf-kontakt svg` */
.mf-kontakt svg.mf-k-wa-ikona{width:17px;height:17px;stroke:none}

/* S36 pkt 1 (Piotr 08.10 15:3x): okno zgód NA STARCIE (`.consent-start`) także tutaj zasłania stronę — mgła + karta ze skin.css;
   pasek NAD stopką zostaje wyłącznie dla okna ustawień (`?zgoda=1`).
   okno ustawień w tym wariancie: wąski pasek NAD stopką (ta sama treść i ten sam formularz — zmienia się tylko kształt);
   nie zasłania menu ani stopki, nie przyciemnia ekranu */
body.firma.mf-d .consent:not(.consent-start){inset:auto 0 var(--mf-stopka) 0;top:auto;padding:0;display:block;background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;z-index:9300}
body.firma.mf-d .consent:not(.consent-start) .consent-in{max-width:none;width:100%;margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;
  padding:8px max(24px,calc((100vw - var(--max)) / 2 + 24px));box-shadow:0 -18px 40px -24px rgba(0,0,0,.8);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;background:rgba(11,34,25,.94)}
body.firma.mf-d .consent:not(.consent-start) h2{font-size:.82rem;margin:0;white-space:nowrap}
body.firma.mf-d .consent:not(.consent-start) p{margin:0;font-size:.74rem;line-height:1.4}
body.firma.mf-d .consent:not(.consent-start) .consent-in > p:not(.consent-dok){flex:1 1 360px}
body.firma.mf-d .consent:not(.consent-start) .consent-btns{flex:none;gap:8px;margin:0}
body.firma.mf-d .consent:not(.consent-start) .consent-btns .btn{padding:.38rem .9rem;font-size:.78rem}
body.firma.mf-d .consent:not(.consent-start) .consent-rowne .btn{flex:1 1 0;min-width:7.5rem;white-space:nowrap}
/* roleta ze stopki (O firmie / Kontakt) na chwilę nad paskiem zgody — inaczej wyjeżdżałaby pod nim */
body.firma.mf-d .zl[data-zl-efekt="dol"]{z-index:9400}
body.firma.mf-d .consent:not(.consent-start) .consent-dok{margin:0;gap:12px;font-size:.72rem}
body.firma.mf-d .consent:not(.consent-start) .consent-opts{flex-direction:row;margin:0}
body.firma.mf-d .consent:not(.consent-start) details{margin:0}

@media (max-width:700px){
  body.firma.mf-d{--mf-stopka:34px}
  .mf-stopka-in{padding:0 10px;font-size:.64rem;letter-spacing:0}
  .mf-st-nip{font-size:.6rem;letter-spacing:0}
  .mf-st-kropka{padding:0 .3rem}
  .mf-st-poz{font-size:.6rem;letter-spacing:.1em;padding:.5rem .35rem}
  .mf-st-poz::after{left:.35rem;right:calc(.35rem + .1em)}
  .mf-kontakt{gap:6px 16px;font-size:.76rem}
  body.firma.mf-d .consent:not(.consent-start) .consent-in{padding:8px 12px;gap:6px 12px}
  body.firma.mf-d .consent:not(.consent-start) .consent-in > p:not(.consent-dok){flex-basis:100%}
  body.firma.mf-d .consent:not(.consent-start) .consent-btns{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.mf-st-poz::after{transition:none!important}}

/* ════════ K-295 — WARIANT D: POPRAWKI PIOTRA 05.10 18:5x ════════
   (1) menu na górnym pasku, wyśrodkowane, Kontakt po prawej · (2) stopka: firma · ulica i miasto · VAT ID, „O firmie” zostaje
   (3) żaluzja WSPÓŁPRACA/KLIENT/Kontakt WYPYCHA nagłówek i okno w dół (bez mgły), pole zostaje nad stopką
   (4–5) okno rozmowy tej samej, węższej szerokości przed i w trakcie rozmowy, rośnie w miejscu pola, bez opisów
   (7) „Nowa rozmowa” obok „Zamknij”. Zero nowych barw: tokeny `skin.css` i wartości już użyte w tym pliku / `skin.css`. */
body.firma.mf-d{--mf-czat-szer:560px}

/* (1) belka: logo | menu na środku | Kontakt */
.mf-belka-d .mf-belka-in{position:relative;justify-content:space-between}
.mf-belka-d .mf-d-menu{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);margin:0;padding:0;gap:clamp(6px,1.4vw,22px)}
.mf-belka-d .mf-d-kropka{opacity:.7}
.mf-d-kontakt{margin-left:auto;text-transform:uppercase}
html.ck-js:not(.sc-wstal) .mf-belka-d .mf-d-menu{translate:0 -6px}

/* (2) stopka z adresem */
.mf-st-adres{color:var(--subtle)}

/* (3) scena wypychana żaluzją: `--d-wypych` ustawia skrypt wariantu D (wysokość rolety); bez rolety padding jak w K-279 */
body.firma.mf-d .mf-scena-d{padding-top:max(clamp(14px,11vh,120px),calc(var(--d-wypych,0px) + 14px));
  transition:padding-top var(--zl-czas-w,.64s) cubic-bezier(.22,1,.36,1)}
body.firma.mf-d .mf-scena-d:not(.mf-wypchnieta){transition-duration:.42s}
/* nagłówek zostaje czytelny także w rozmowie — żaluzja przesuwa „pytanie i okno” razem */
html.ck-skupienie body.firma.mf-d .mf-scena-d .sc-h1{opacity:1;transform:none}
.zl.zl-wypycha[data-zl-efekt="gora"]{z-index:58}
/* Kontakt jako cienki pasek spod belki (komponent ma `zl-pasek` dotąd tylko dla kierunku `dol`) */
.zl.zl-pasek[data-zl-efekt="gora"]{left:0;width:100vw;transform:none;clip-path:inset(0 0 -110px 0)}
.zl.zl-pasek[data-zl-efekt="gora"] .zl-roleta{border-radius:0;border-left:0;border-right:0}
.zl.zl-pasek[data-zl-efekt="gora"] .zl-listwa{height:8px;border-radius:0}
.zl.zl-pasek[data-zl-efekt="gora"] .zl-tresc{padding:9px 24px 7px;overflow:hidden}

/* (4)(5) pole przed rozmową = pole w trakcie: wąskie, bez nagłówka i opisu, nie rośnie przy fokusie */
body.firma.mf-d .mf-czat-d .sc-panel,html.ck-skupienie body.firma.mf-d .mf-czat-d .sc-panel,
html.ck-js:not(.sc-wstal) body.firma.mf-d .mf-czat-d .sc-panel{width:min(var(--mf-czat-szer),100%);margin:0 auto;border-radius:16px;
  border-color:var(--line2);background:#0B1F17;padding:10px 14px 12px}
body.firma.mf-d .mf-czat-d .sc-panel .cz-pole{margin:0;box-shadow:none;transform:none;border-radius:10px}
body.firma.mf-d .mf-czat-d .sc-panel .cz-pole .cz-input{height:26px;font-size:15px;padding:0 12px}
body.firma.mf-d .mf-czat-d .sc-panel .cz-wyslij{width:24px;height:24px}
body.firma.mf-d .mf-czat-d .sc-panel .cz-wyslij svg{width:13px;height:13px}

/* okno rozmowy W MIEJSCU pola (`rozmowa.js`, `data-cz-tryb="w-miejscu"`): bez mgły, strona pod spodem klikalna,
   góra = górna krawędź pola, szerokość = szerokość pola, dół nad stopką */
.cz[data-cz-tryb="w-miejscu"]{z-index:50;pointer-events:none}
.cz[data-cz-tryb="w-miejscu"] .cz-mgla{display:none}
.cz[data-cz-tryb="w-miejscu"] .cz-okno,.cz.cz-zaluzja[data-cz-tryb="w-miejscu"] .cz-okno{pointer-events:auto;left:var(--czm-lewo,50%);top:var(--czm-gora,30vh);
  bottom:var(--czm-dol,48px);width:var(--czm-szer,560px);height:auto;min-height:var(--czm-min,52px);max-width:none;max-height:none;translate:none;
  border-radius:16px;border:1px solid var(--line2);box-shadow:0 22px 60px -26px rgba(0,0,0,.85),0 0 46px -18px rgba(16,185,129,.28)}
.cz[data-cz-tryb="w-miejscu"] .zl{pointer-events:none}
.cz[data-cz-tryb="w-miejscu"] .zl .zl-roleta{pointer-events:auto}
.cz[data-cz-tryb="w-miejscu"] .cz-naglowek{padding:7px 10px 7px 14px}
/* telefon: `skin.css` daje środkowi 320 px minimum (okno na cały ekran) — tu okno bywa niższe, pole pisania ma zostać w oknie */
.cz[data-cz-tryb="w-miejscu"] .cz-strefy{overflow:hidden}
.cz[data-cz-tryb="w-miejscu"] .cz-srodek{min-height:0;display:flex;flex-direction:column}
.cz[data-cz-tryb="w-miejscu"] .cz-kto{flex:none}
/* (7) Nowa rozmowa — ten sam kształt co „Zamknij” */
.cz-nowa{margin-left:auto;white-space:nowrap;flex:none;background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--muted);padding:5px 9px;transition:color .16s var(--krzywa),border-color .16s var(--krzywa)}
.cz-nowa:hover{color:var(--ink);border-color:rgba(16,185,129,.55)}
.cz-nowa:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.cz-panele-wyz+.cz-nowa{margin-left:0}
.cz-nowa+.cz-zamknij{margin-left:0}

@media (max-width:820px){
  .mf-belka-d .mf-d-menu{gap:0}
  .mf-belka-d .mf-d-poz{font-size:.7rem;letter-spacing:.12em;padding:.55rem .5rem}
  .mf-belka-d .mf-d-poz::after{left:.5rem;right:calc(.5rem + .12em)}
}
@media (max-width:700px){
  /* telefon: logo i Kontakt w pierwszym wierszu, menu pod nimi na całą szerokość */
  body.firma.mf-d{--mf-hdr:72px}   /* S58-c: było 84 — dwa wiersze (logo+Kontakt, menu) = ok. 70 px treści, 72 bez ucięcia przy 375/390 */
  .mf-belka-d .mf-belka-in{flex-wrap:wrap;align-content:center;row-gap:2px;padding:4px 12px 2px}
  .mf-belka-d .mf-d-menu{position:static;transform:none;order:3;flex:1 1 100%;justify-content:center}
  .mf-belka-d .mf-d-poz{font-size:.66rem;letter-spacing:.1em;padding:.45rem .4rem}
  .mf-d-kontakt{padding-right:0}
  .mf-st-adres{display:none}
  .mf-st-adres+.mf-st-kropka{display:none}
  .cz[data-cz-tryb="w-miejscu"] .cz-okno{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){body.firma.mf-d .mf-scena-d{transition:none}}

/* ════════ K-298 — WARIANT D: OKNO ROZMOWY (Piotr 05.10) ════════
   (1) okno rozwija się WYŁĄCZNIE po wysłaniu wiadomości (`rozmowa.js`) · (2) dół okna z odstępem nad stopką (`ODSTEP_DOL`)
   (3) po rozwinięciu nagłówek „Czego dziś potrzebujesz?” zwija się (klient już to napisał), wraca po zamknięciu / „Nowa rozmowa”
   (4) telefon: panel propozycji opada spod nagłówka okna W PRZEPŁYWIE — taśma i pole zjeżdżają w dół, nic nie leży na wiadomościach.
   Sekcja kafelków kategorii pod polem zostaje nietknięta (przy rozwiniętym oknie może stać pod nim). */
body.firma.mf-d .mf-scena-d .sc-h1{max-height:6em;overflow:hidden;
  transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .3s var(--krzywa),margin .5s cubic-bezier(.22,1,.36,1)}
html.cz-rozwiniete body.firma.mf-d .mf-scena-d .sc-h1{max-height:0;opacity:0;margin-top:0;margin-bottom:0;pointer-events:none}
/* panel „gora” w oknie „w miejscu”: szerokość i lewa krawędź = okno rozmowy (nie środek ekranu) */
.cz[data-cz-tryb="w-miejscu"] .zl.cz-zl[data-zl-efekt="gora"]{left:var(--czm-lewo,12px);width:var(--czm-szer,calc(100vw - 24px));transform:none;
  clip-path:inset(0 -40px -110px -40px)}
.cz[data-cz-tryb="w-miejscu"] .zl.cz-zl[data-zl-efekt="gora"] .zl-roleta{border-radius:0 0 14px 14px;overflow:hidden}
.cz[data-cz-tryb="w-miejscu"] .zl.cz-zl[data-zl-efekt="gora"] .zl-tresc{padding:14px 16px 10px}
.cz[data-cz-tryb="w-miejscu"] .cz-strefy{transition:padding-top var(--zl-czas-z,.42s) cubic-bezier(.65,0,.35,1)}
.cz.cz-panel-gora[data-cz-tryb="w-miejscu"] .cz-strefy{transition:padding-top .64s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  body.firma.mf-d .mf-scena-d .sc-h1,.cz[data-cz-tryb="w-miejscu"] .cz-strefy{transition:none!important}
}

/* ════════ K-305 — WARIANT D: KAFELKI ZE ZDJĘCIAMI POD OKNEM BOTA, CAŁOŚĆ NA JEDNYM EKRANIE, BOT PÓŁPRZEZROCZYSTY ════════
   Piotr 05.10: „kafelki maja byc pod okno bota napis czego potrzebujesz i oferty maja byc ladnie rozmieszczone na całym ekranie
   bez przewijania. Tło bota przepuszcza odrobinę światła z tła strony głównej tak, że widać zarys kafelków z produktami i ofertami.”
   Kolejność sceny: pole rozmowy → „Czego dziś potrzebujesz?” → kafelki (`_mf_kategorie.html` + `mf_kategorie.css`).
   Odstęp od góry dobrany tak, żeby blok (pole + nagłówek + kafelki ≤ 680 px) stał na środku wolnej wysokości; żaluzja dalej
   wypycha scenę (`--d-wypych`, K-295). Zero nowych barw: #0B1F17 (tło pola i okna) zapisane jako rgba z przezroczystością. */
body.firma.mf-d .mf-scena-d{padding-top:max(clamp(12px,calc((100dvh - var(--mf-hdr) - var(--mf-stopka) - 850px) / 2),110px),calc(var(--d-wypych,0px) + 14px))}
body.firma.mf-d .mf-scena-d .sc-h1{margin:clamp(14px,2.6vh,26px) 0 0;font-size:clamp(1.35rem,2vw,1.9rem)}
/* K-305 cz. 2 (projekt A): nagłówek pełną bielą marki, bez gradientu w tekście, z lekką zieloną poświatą */
body.firma.mf-d .mf-scena-d .sc-h1{font-size:clamp(1.5rem,2.1vw,2.1rem);font-weight:800;letter-spacing:-.025em;color:var(--ink);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  text-shadow:0 2px 10px rgba(16,185,129,.15)}
/* pole i nagłówek nie oddają wysokości kafelkom (flex sceny) — ściska się wyłącznie sekcja kafelków */
body.firma.mf-d .mf-scena-d > .mf-czat-d,body.firma.mf-d .mf-scena-d > .sc-h1{flex:none}
/* pole rozmowy: szkło zamiast pełnego tła */
body.firma.mf-d .mf-czat-d .sc-panel,html.ck-skupienie body.firma.mf-d .mf-czat-d .sc-panel,
html.ck-js:not(.sc-wstal) body.firma.mf-d .mf-czat-d .sc-panel{background:rgba(11,31,23,.62);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15)}
/* okno rozmowy w miejscu pola: przez tło prześwituje zarys kafelków i ofert (rozmyty, tekst rozmowy zostaje czytelny) */
.cz[data-cz-tryb="w-miejscu"] .cz-okno,.cz.cz-zaluzja[data-cz-tryb="w-miejscu"] .cz-okno{background:rgba(11,31,23,.80);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}
@media (max-width:700px){
  body.firma.mf-d .mf-scena-d{padding-top:max(16px,calc(var(--d-wypych,0px) + 14px))}
  body.firma.mf-d .mf-scena-d .sc-h1{margin-top:14px;font-size:1.25rem}
}


/* ── Piotr 06.10 01:4x — poprawki portalu D: kafelki o połowę mniejsze, więcej powietrza między pytaniem, polem i kafelkami,
   O FIRMIE na górnym pasku przed KONTAKT, stopka: dane firmy z lewej · mail na środku · wykonawca strony z prawej ── */
body.firma.mf-d .mf-scena-d .sc-h1{margin:0 0 clamp(18px,3.2vh,34px)}
body.firma.mf-d .mf-scena-d .mf-kat{flex:0 1 auto;max-height:min(390px,48vh);width:min(1120px,calc(100vw - 40px));margin-top:clamp(30px,5.5vh,64px)}
.mf-d-prawo{margin-left:auto;display:flex;align-items:center}
.mf-d-prawo .mf-d-kontakt{margin-left:0}
.mf-d-ofirmie{text-transform:uppercase}
.mf-stopka-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.mf-st-lewo{justify-self:start;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-st-mail{justify-self:center;color:var(--muted);text-decoration:none;font-weight:600;transition:color .2s var(--krzywa)}
.mf-st-mail:hover,.mf-st-mail:focus-visible{color:var(--accent-ink)}
.mf-st-wykonawca{justify-self:end;color:var(--subtle);white-space:nowrap}
.mf-st-wykonawca a{color:var(--muted);text-decoration:none;font-weight:600}
.mf-st-wykonawca a:hover .mf-st-ai,.mf-st-ai{color:var(--accent-ink)}
@media (max-width:760px){.mf-stopka-in{grid-template-columns:1fr auto}.mf-st-mail{display:none}}
body.firma.mf-d .mf-scena-d{padding-top:max(clamp(48px,10vh,110px),calc(var(--d-wypych,0px) + 14px))}
body.firma.mf-d .mf-scena-d .mf-kat{max-height:min(430px,52vh)}
body.firma.mf-d .mf-scena-d .mf-kat-kafel{min-height:150px}
body.firma.mf-d .mf-scena-d .mf-kat-foto{top:30%;bottom:12%}
#zl-o-firmie[data-zl-efekt="gora"]{left:auto;right:max(24px,calc((100vw - var(--max,1440px))/2 + 24px));transform:none}

/* ── K-315c (Piotr 06.10 02:0x: „Pasek myslenia ma byc pod paskiem do komend”) — wariant D: wskaźnik pracy asystenta
   (`[data-cz-praca]`) stoi POD polem do pisania, nie nad nim. Kolejność w DOM bez zmian (wspólny markup z `home.html`),
   przestawia ją wyłącznie układ okna „w miejscu”. ── */
.cz[data-cz-tryb="w-miejscu"] .cz-redakcja{display:flex;flex-direction:column}
.cz[data-cz-tryb="w-miejscu"] .cz-redakcja .cz-pole{order:1}
.cz[data-cz-tryb="w-miejscu"] .cz-redakcja .cz-praca{order:2;margin-top:8px}

/* ── Piotr 08.10 00:3x — nagłówek portalu D „Sprawdź cenę i koszt dostawy” (dłuższy niż „Czego dziś potrzebujesz?”):
   jedna linia na szerokość pola rozmowy (≤ 560 px), wyrównane powietrze nagłówek → pole → kafelki; telefon: jedna linia w 358 px ── */
body.firma.mf-d .mf-scena-d .sc-h1{font-size:clamp(1.6rem,2.3vw,2.25rem);line-height:1.12;letter-spacing:-.02em;
  margin:0 0 clamp(22px,3.6vh,36px);text-wrap:balance}
@media (max-width:700px){
  body.firma.mf-d .mf-scena-d .sc-h1{margin:14px 0 20px;font-size:1.3rem}
}

/* ── S55-a: przełącznik języka portalu D (`[data-portal-d-jezyki]`, S53). Zmierzone 12.10: lista 12 kodów NIE miała żadnego stylu —
   po otwarciu `<details>` wylewała się w linię belki (zlepione „ENDEPLCS…”), rozpychała `.mf-d-prawo` w lewo na menu (KONTAKT
   na SKLEP) i na 375 px wypychała logo za górną krawędź. Teraz: lista pod przyciskiem, absolutnie (nie rusza belki), siatka 3 kolumn,
   nieprzezroczysta jak listy sklepu (`skin.css` .sk-wybor .langs), cel dotyku ≥ 32 px. ── */
.mf-belka-d .mf-d-jezyki{position:relative;flex:0 0 auto;margin-left:.35rem}
.mf-belka-d .mf-d-jezyki>summary{white-space:nowrap;min-height:28px}
.mf-belka-d .mf-d-jezyki-lista{position:absolute;top:calc(100% + 6px);right:0;z-index:61;display:grid;grid-template-columns:repeat(3,minmax(46px,auto));
  gap:2px;margin:0;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:var(--paper,#0B2219);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.7)}
.mf-belka-d .mf-d-jezyki-lista a{display:flex;align-items:center;justify-content:center;min-height:32px;padding:0 .55rem;border-radius:6px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-decoration:none}
.mf-belka-d .mf-d-jezyki-lista a:hover,.mf-belka-d .mf-d-jezyki-lista a:focus-visible{background:rgba(16,185,129,.1);color:var(--ink)}
.mf-belka-d .mf-d-jezyki-lista a.on{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(16,185,129,.4)}
@media (max-width:700px){
  .mf-belka-d .mf-d-jezyki{margin-left:.2rem}
  .mf-belka-d .mf-d-jezyki-lista{grid-template-columns:repeat(4,minmax(44px,auto))}
}

/* ── S56-c (12.10, zmierzone na 375/390 px): belka portalu D łamała się w TRZY rzędy (logo · KONTAKT/O FIRMIE/PL · menu) przy
   wysokości 84 px wyśrodkowanej w pionie — nadmiar wychodził w górę i logo było ucięte u góry (top −0,7 px), a na telefonie
   z szerszym fontem menu „FOR SELLERS · FOR BU…” nie mieściło się w wierszu. Teraz na telefonie: DWA rzędy — logo (18 px) +
   KONTAKT · O FIRMIE · PL w pierwszym, menu w drugim; treść belki od góry (nic nie wychodzi nad krawędź); menu przy braku
   miejsca przewija się poziomo zamiast ucinać — każde słowo zawsze całe. Desktop (> 700 px) bez zmian. ── */
@media (max-width:700px){
  .mf-belka-d .mf-belka-in{flex-wrap:wrap;align-content:flex-start;align-items:center;column-gap:8px;row-gap:0;padding:6px 12px 0}
  .mf-belka-d .mf-logo{flex:0 0 auto}
  .mf-belka-d .mf-logo img{height:18px;width:auto}
  .mf-belka-d .mf-d-prawo{flex:0 1 auto;min-width:0;margin-left:auto}
  .mf-belka-d .mf-d-prawo .mf-d-poz{padding:.45rem .3rem}
  .mf-belka-d .mf-d-prawo .mf-d-kropka{margin:0 .05rem}
  .mf-belka-d .mf-d-jezyki{margin-left:.1rem}
  .mf-belka-d .mf-d-jezyki>summary{padding-left:.45rem;padding-right:.4rem}
  .mf-belka-d .mf-d-menu{justify-content:safe center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:2px 0 0;padding:0}
  .mf-belka-d .mf-d-menu::-webkit-scrollbar{display:none}
  .mf-belka-d .mf-d-menu .mf-d-poz{flex:none;white-space:nowrap}
}

/* ── S57-a (12.10): menu portalu D ma PIĘĆ pozycji (doszła WIEDZA). Zmierzone na 375 px: menu 371 px w polu 351 px —
   przewijało się, SKLEP wychodził poza ekran. Węższy odstęp między słowami na telefonie (≤ 420 px) mieści całe menu
   w wierszu; przewijanie z S56-c zostaje jako zapas na szerszy font / dłuższe tłumaczenia. ── */
@media (max-width:420px){
  .mf-belka-d .mf-d-menu .mf-d-poz{padding:.45rem .26rem}
  .mf-belka-d .mf-d-menu .mf-d-poz::after{left:.26rem;right:calc(.26rem + .1em)}
}
/* Piotr 14.10 uwagi #5/#6: stopka portalu D — dane firmy na środku, O FIRMIE po prawej (w miejscu silvanos.ai), e-mail usunięty */
.mf-stopka-in .mf-st-srodek{justify-self:center;text-align:center}
.mf-stopka-in .mf-st-pusto{min-width:0}
.mf-stopka-in .mf-st-wykonawca .mf-st-poz{text-transform:uppercase;letter-spacing:.14em;font-size:.68rem}
@media (max-width:700px){.mf-stopka-in{grid-template-columns:0 1fr auto}.mf-stopka-in .mf-st-srodek{justify-self:start;text-align:left}}
/* Piotr 14.10 uwagi #11/#14: wspólna sekcja kontaktu pod obiema kolumnami rolet DLA SPRZEDAJĄCYCH / DLA KUPUJĄCYCH */
.mf-d-kontakt-pas{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px;margin-top:4px;padding:14px 0 2px;border-top:1px solid var(--line,rgba(255,255,255,.12));text-align:center}
.mf-d-kontakt-dopisek{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mf-d-kontakt-mail{font-size:1.25rem;font-weight:600;color:var(--accent-ink);text-decoration:none;letter-spacing:.01em}
.mf-d-kontakt-mail:hover,.mf-d-kontakt-mail:focus-visible{text-decoration:underline;text-underline-offset:4px}
.mf-d-lista dt.mf-d-lub{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);font-weight:400}
@media (max-width:700px){.mf-d-kontakt-pas{grid-column:auto}.mf-d-kontakt-mail{font-size:1.05rem}}
.mf-d-lista dd.mf-d-lub{display:none}
/* ZP-1078 (Piotr: „Alternatywy tez niech beda na pasku tam gdzie nowa rozmowa i propozycje”): na pasku okna stoją teraz
   naraz „Propozycje”, „Alternatywy”, „Nowa rozmowa” i „Zamknij”. Na telefonie nie mieszczą się w jednym rzędzie — wyzwalacze
   (`.cz-panele-wyz` ma `min-width:0`, a przyciski `flex:none`) wchodziły POD „Nowa rozmowa” i nie dało się ich kliknąć.
   Wąski ekran: pasek łamie się na dwa rzędy, przyciski nieco ciaśniejsze. Kolory bez zmian. */
@media (max-width:600px){
  .cz[data-cz-tryb="w-miejscu"] .cz-naglowek{flex-wrap:wrap;row-gap:6px;column-gap:6px}
  .cz[data-cz-tryb="w-miejscu"] .cz-panele-wyz{flex-wrap:wrap;min-width:auto}
  .cz[data-cz-tryb="w-miejscu"] .cz-panel-wyz,.cz[data-cz-tryb="w-miejscu"] .cz-nowa{padding:4px 7px;font-size:12px}
}

/* ── ZP-1080 menu 390 (16.10, zmierzone na 390 px): menu portalu D (DLA SPRZEDAJĄCYCH · DLA KUPUJĄCYCH · MONITORING CEN · SKLEP)
   miało 439 px w polu 366 px — przewijało się w środku z ukrytym paskiem, „MONITORING CEN” i SKLEP wyglądały na ucięte.
   Belka zostaje 72 px (S58-c), więc menu MIEŚCI SIĘ w jednym wierszu: węższy rozstaw liter i odstęp między słowami na
   telefonie (≤ 420 px). Przewijanie z S56-c zostaje jako zapas na dłuższe tłumaczenia. Kolory i desktop bez zmian. ── */
@media (max-width:420px){
  .mf-belka-d .mf-d-menu .mf-d-poz{font-size:.6rem;letter-spacing:.03em;padding:.45rem .16rem}
  .mf-belka-d .mf-d-menu .mf-d-poz::after{left:.16rem;right:calc(.16rem + .03em)}
  .mf-belka-d .mf-d-menu .mf-d-kropka{margin:0}
}

/* PD-2702 = c (Piotr 16.10); Piotr 16.10 22:1x: SAM TEKST, wyśrodkowany, pod nagłówkiem „Zapytaj Doradcę…”, nad polem bota —
   bez ramki, tła i kropki; czcionka i kolor jak tekst sekcji (dziedziczone). */
.mf-d-licznik-ofert{margin:0 auto 10px;padding:0;text-align:center;width:100%;position:relative;z-index:1}