/**
 * OCGR — mega menu.
 *
 * Zrodlo wymiarow: Figma "OCGR - megamenu", frame 1:1682 (1920w dark), odczyt z
 * absoluteBoundingBox. Zadna wartosc nie jest zgadywana.
 *
 * Panel zyje wylacznie od 769 px w gore. Ponizej motyw zamienia naglowek w bialy panel
 * (`header .menu-col nav` w @media max-width:768px) i pokazuje podmenu inline — mega
 * panel z ciemnym tlem i bialym tekstem bylby tam nieczytelny, wiec go nie ma.
 */

:root {
  --mm-panel-w: 1400px;
  --mm-panel-h: 498px;
  --mm-radius: 40px;
  --mm-pad-x: 47px;
  --mm-pad-y: 31px;
  --mm-gap-col: 100px;
  /* Wariant 4-kolumnowy (decyzja Radka 2026-09-04: przy 4 kolumnach panel
     zmienia szerokosc i wysokosc). Wartosci policzone, nie zgadniete:
     47+558+56+330+56+218+56+472+47 = 1840 px.
     Kolumna dzialalnosci lamie sie 8+7 (jak kolumna 1 lamie 7+3), wiec panel ma
     549 px wysokosci zamiast 949 — mieści sie na ekranie bez przewijania. */
  /* WARIANT 2a (Claude Design 2336b77e, "Mega menu OCGR - opcja B", panel z badge 2a;
     decyzja Radka 2026-09-04 — zastepuje uklad 1840 px i wycofana opcje A).
     Panel: 47+330+56+330+56+472+47 = 1338 px.
     Uklad JEDEN dla wszystkich stanow: liczba rzedow nie zmienia sie przy
     wlaczaniu/wylaczaniu kolumny marek ani kolumny dzialalnosci. */
  --mm-panel-w2a: 1338px;
  --mm-gap-col2a: 56px;   /* odstep miedzy kolumnami */
  --mm-gap-blok: 32px;    /* odstep blok-blok w kolumnie 2 (pomieszczenie -> marki) */
  --mm-col-typ: 330px;    /* "wg typu" — JEDNA kolumna, 10 pozycji (koniec lamania 7+3) */
  --mm-col-pom: 330px;    /* "wg pomieszczenia" */
  --mm-col4-sub: 230px;   /* jedna z dwoch podkolumn dzialalnosci */
  --mm-col4-w: 472px;     /* 2x230 + 12 odstepu */
  --mm-row-h: 45px;
  --mm-row-gap: 12px;
  --mm-accent: #eac793; /* naglowek kolumny */
  --mm-rule: #b1832f;   /* kreska pod naglowkiem */
}

/* =============================================================== desktop */
@media (min-width: 769px) {

  /* Panel centrujemy wzgledem calego kontenera naglowka, nie kolumny menu
     (kolumna zaczyna sie 281 px od lewej, panel w Figmie ma rowne marginesy). */
  header .container-fluid.row { position: relative; }
  header .menu-col { position: static; }
  header .menu-col nav > ul > li.mega-menu { position: static; }

  header .menu-col nav > ul > li.mega-menu > ul.mega-panel {
    /* Motyw ustawia sub-menu na left:-2rem / margin-top:40px / padding:1.5rem —
       kasujemy to i wchodzimy na wartosci z Figmy. */
    left: 50%;
    right: auto;
    /* `translate` zamiast `transform`: motyw animuje transform (translateY) w stanie
       hover i nadpisalby wysrodkowanie.

       r168 (2026-10-09, duze monitory): "Katalog produktow" stoi w kolumnie
       justify-end, wiec jego prawa krawedz jest zawsze 430 px od prawej krawedzi
       okna, a srodek panelu idzie tylko za polowa szerokosci. Od ~2200 px link
       wypadal poza panel, mostek ::before nie lezal pod linkiem i hover gasl.
       Regula geometryczna zamiast progu min-width: panel wysrodkowany (-50%),
       chyba ze wtedy jego prawa krawedz bylaby dalej niz 380 px od prawej
       krawedzi okna — wtedy przypinamy ja na 100vw - 380 px (50 px za linkiem,
       zapas tez na roznice 100vw vs szerokosc kontenera przy pasku przewijania).
       Przelaczenie wypada samo przy szerokosci okna = panel + 760 px
       (1338 -> 2098, 1400 -> 2160, 1082 -> 1842); ponizej nic sie nie zmienia.
       430 px zmierzone r168 — zmierz ponownie, jesli z menu na prawo od
       "Katalogu" znikna pozycje (dodanie pozycji przesuwa link w lewo = bezpiecznie). */
    translate: max(-50%, calc(50vw - 380px - 100%)) 0;
    top: 100%;
    margin: 19px 0 0;              /* odstep panelu od paska menu wg Figmy */
    padding: var(--mm-pad-y) var(--mm-pad-x);
    width: min(var(--mm-panel-w2a), calc(100vw - 4rem));
    min-height: 0;                 /* wysokosc z tresci — 4 kolumny nie mieszcza sie w 498 px */
    box-sizing: border-box;
    /* WARIANT 2a: siatka 3 kolumny x 2 wiersze. Kolumna 2 jest podzielona na dwa
       bloki (pomieszczenie u gory, marki pod spodem — tam bylo ~300 px pustki),
       kolumny 1 i 3 rozciagaja sie na oba wiersze.

       Grid zamiast flexa, bo tylko tak marki moga byc DRUGIM BLOKEM kolumny 2
       bez dodatkowego opakowania w HTML (walker generuje plaska liste <li>). */
    display: grid;
    /* CZTERY ROWNE KOLUMNY, ROWNE ODSTEPY (polecenie Radka 2026-09-09).
       Sciezki 1-2 to "wg typu" i "wg pomieszczenia", sciezki 3-4 to obie
       podkolumny "wg typu dzialalnosci" — dzieki temu dzialalnosc zajmuje
       polowe siatki, a odstep miedzy KAZDA para sasiednich kolumn jest ten
       sam (--mm-gap-col2a), takze ten wewnatrz dzialalnosci.

       Sztywne szerokosci z Figmy (330/330/472) ZNIESIONE — jawny wyjatek od
       zasady "Figma domyslnie decyduje", bo Figma 1:1682 nie zna kolumny
       dzialalnosci i jej podzialu 8+7. Kolumny licza sie same: przy panelu
       1338 px daje to 269 px na kolumne i 594 px na dzialalnosc. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-content: start;
    column-gap: var(--mm-gap-col2a);
    row-gap: var(--mm-gap-blok);
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--mm-radius);
    list-style: none;
  }

  /* Mostek nad panelem — bez niego kursor gubi hover w szczelinie miedzy pozycja menu
     a panelem. Szczelina to 19 px marginesu + 13 px od dolu pozycji do dolu paska
     = 32 px (zmierzone 2026-10-01 na 1920/1366/1024); 40 px z zapasem. Mostek jest
     czescia panelu, wiec przy zamknietym panelu jest niewidoczny i nieklikalny. */
  header .menu-col nav > ul > li.mega-menu > ul.mega-panel::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
  }

  header .menu-col nav > ul > li.mega-menu:hover > ul.mega-panel,
  header .menu-col nav > ul > li.mega-menu:focus-within > ul.mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;               /* motyw daje translateY(0) — panel stoi na `translate` */
    z-index: 60;
  }

  /* Kolumny -------------------------------------------------------------- */

  .mega-panel > li.mega-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;                     /* naglowek -> lista */
    height: auto;
    padding: 0;
  }

  .mega-col__title {
    display: block;
    width: fit-content;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mm-rule);
    color: var(--mm-accent);
    font-size: 18px;
    line-height: 22.68px;
    white-space: nowrap;
  }

  /* Zagniezdzone listy w panelu nie sa rozwijanym podmenu — kasujemy animacje,
     pozycjonowanie i tlo, ktore motyw nadaje kazdemu `li > ul`.

     UWAGA na specyficznosc: ten selektor ma 0-2-1 i PRZEGRYWA z regula motywu
     `header .menu-col nav > ul li:hover > ul { display: flex }` (custom.css, 0-2-5).
     Stad osobna regula hover-proof zaraz pod spodem — bez niej sam kursor nad
     kolumna rozwalal jej siatke. */
  .mega-panel ul.mega-list {
    position: static;
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--mm-row-gap);
    background: none;
    border-radius: 0;
    opacity: 1;
    /* `inherit`, NIE `visible`/`auto` (zgloszenie Radka 2026-10-01). Jawne `visible`
       robilo z list ukrytego panelu niewidzialna, ale KLIKALNA plachte ~1338x660 px
       pod naglowkiem: kursor przejezdzajacy nad trescia strony trafial w nia,
       `li.mega-menu:hover` zapalal sie i panel wyskakiwal, choc kursor byl daleko
       od pozycji „Katalog produktow". Teraz listy dziela stan z panelem. */
    visibility: inherit;
    pointer-events: inherit;
    transform: none;
    transition: none;
    list-style: none;
    z-index: auto;
  }

  /* HOVER NIE PRZEBUDOWUJE PANELU (zgloszenie Radka 2026-09-10).

     Motyw przelacza KAZDE podmenu na `display: flex` pod kursorem
     (`header .menu-col nav > ul li:hover > ul` w custom.css, 0-2-5).
     W mega menu kolumna to `li`, a jej lista to `ul`, wiec samo najechanie
     kasowalo siatke listy: 15 pozycji "wg typu dzialalnosci" ustawialo sie
     w JEDNEJ podkolumnie zamiast 8+7, panel rosl z 664 do 949 px, a z czterech
     kolumn robily sie trzy. Zmierzone, nie domniemane — `qa/probki/hover_kolumna.py`.

     Uklad ma byc JEDEN, niezaleznie od tego, gdzie stoi kursor. */
  header .menu-col nav > ul > li.mega-menu li.mega-col:hover > ul.mega-list,
  header .menu-col nav > ul > li.mega-menu li.mega-col:focus-within > ul.mega-list {
    display: grid;
  }

  /* ROZMIESZCZENIE KOLUMN W SIATCE (wariant 2a) ---------------------------

     +----------------+----------------+----------------+
     | wg typu        | wg pomieszcz.  | wg dzialalnosci|
     | (10 pozycji,   | (5 pozycji)    | (15 pozycji,   |
     |  jedna kolumna)+----------------+  lamane 8+7)   |
     |                | wg producenta  |                |
     |                | (kafle 3x4)    |                |
     +----------------+----------------+----------------+

     Kolumny 1 i 3 zajmuja oba wiersze, kolumna 2 dzieli sie na dwa bloki.
     Dzieki temu przy wlaczeniu marek panel NIE zyskuje nowego rzedu — marki
     wchodza w pustke, ktora i tak byla pod 5 pozycjami "wg pomieszczenia". */

  /* "Wedlug typu": 10 pozycji w JEDNEJ kolumnie.
     Lamanie 7+3 z Figmy (1:1682) ZNIESIONE — jawny wyjatek od zasady "Figma
     domyslnie decyduje", zgoda Radka 2026-09-04. Powod: przy widocznych markach
     i kolumnie dzialalnosci lamanie dawalo 6 pionowych rzedow zamiast 4. */
  .mega-panel > li.mega-col--typ,
  .mega-panel > li.mega-col:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .mega-panel > li.mega-col--typ .mega-list,
  .mega-col:first-child .mega-list {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    row-gap: var(--mm-row-gap);
  }

  /* "Wedlug pomieszczenia" — gorny blok kolumny 2. */
  .mega-panel > li.mega-col--pomieszczenie,
  .mega-panel > li.mega-col:nth-child(2):not(.mega-col--brands):not(.mega-col--dzialalnosc) {
    grid-column: 2;
    grid-row: 1;
  }
  .mega-panel > li.mega-col--pomieszczenie .mega-list,
  .mega-panel > li.mega-col:nth-child(2):not(.mega-col--brands):not(.mega-col--dzialalnosc) .mega-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* "Wedlug producenta" — DOLNY BLOK kolumny 2, nie osobna kolumna.
     To sedno wariantu 2a: 5 pozycji "wg pomieszczenia" zostawialo tam ~300 px
     pustki, a marki jako osobna kolumna dokladaly piaty pionowy rzad. */
  .mega-panel > li.mega-col--brands {
    grid-column: 2;
    grid-row: 2;
  }

  /* "Nasze showroomy" — DOLNY BLOK kolumny 2, to samo miejsce co marki
     (decyzja Radka 2026-09-22: "showroomy w 2 kolumnie, tam gdzie puste miejsce").
     Marki sa dzis ukryte (`mega-col--wkrotce`, polecenie z 09-05), wiec wiersz 2
     kolumny 2 stoi pusty — 5 pozycji "wg pomieszczenia" zostawia tam ~300 px pustki.
     Gdyby marki kiedys wrocily, oba bloki trafiaja w ten sam wiersz siatki i ustawiaja
     sie jeden pod drugim (`align-content: start` na kolumnie), wiec nic nie przeskakuje. */
  .mega-panel > li.mega-col--showroomy {
    grid-column: 2;
    grid-row: 2;
  }
  .mega-panel > li.mega-col--showroomy .mega-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ponizej ~1330 px okna sam odstep juz nie wystarcza (zszedlby pod 32 px), wiec
     kolumny zaczynaja sie zwezac. Zwezaja sie proporcjonalnie i wszystkie naraz,
     wiec liczba kolumn i podkolumn nadal sie nie zmienia — nic nie przeskakuje.
     Etykiety zawijaja sie do dwoch linii, na to jest `white-space: normal`.
     Gorna granica to 1023 px, bo nizej rzadzi osobny uklad tabletowy (zawijanie). */
  /* Zwezanie ponizej 1400 px okna. Makieta 2a pokrywa TYLKO 1920 px, a panel
     1338 px + 4rem marginesu potrzebuje 1402 px okna — ponizej kolumny musza
     oddawac miejsce. Sciezki `minmax()` w `grid-template-columns` robia to same:
     kolumny tekstowe schodza do 150 px, kolumna dzialalnosci do 280 px.
     Liczba kolumn i rzedow sie NIE zmienia — nic nie przeskakuje.

     Wiersz przestaje miec sztywne 45 px, bo zawinieta etykieta (2-3 linie)
     wychodzila poza niego i nachodzila na wiersz nizej. */
  @media (min-width: 1024px) and (max-width: 1401px) {
    .mega-panel li.mega-item { height: auto; min-height: var(--mm-row-h); }
    .mega-panel li.mega-item > a { height: auto; min-height: var(--mm-row-h); padding-block: 4px; }
    .mega-panel .mega-item__label { white-space: normal; overflow-wrap: anywhere; }
    /* Kafel marki zostaje sztywnej wysokosci — to logo, nie tekst. */
    .mega-panel li.mega-item--brand,
    .mega-panel li.mega-item--brand > a { height: var(--mm-row-h); min-height: 0; }
  }

  /* Pozycja ------------------------------------------------------------- */

  .mega-panel li.mega-item {
    display: block;
    height: var(--mm-row-h);
    padding: 0;
  }

  .mega-panel li.mega-item > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--mm-row-gap);
    height: 100%;
    padding: 0 5px;
    margin: 0 -5px;                /* podswietlenie siega poza tresc, jak w Figmie */
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    line-height: 20.16px;
    white-space: normal;           /* etykiety dwuliniowe, np. "Biurka regulowane elektrycznie" */
    text-decoration: none;
    transition: background-color 150ms ease-in-out;
  }

  .mega-panel li.mega-item > a:hover,
  .mega-panel li.mega-item > a:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .mega-item__img {
    flex: 0 0 auto;
    width: var(--mm-row-h);
    height: var(--mm-row-h);
    border-radius: 6px;
    object-fit: cover;
  }

  /* Ikona wektorowa nie jest kadrem zdjecia: ma sie zmiescic w calosci i nie dostac
     zaokraglenia, ktore przy kresce wyglada jak przypadkowe scieciecie rogu.
     Kolor kreski siedzi w samych plikach (--mm-accent), bo panel jest ciemny. */
  .mega-item__img[src$=".svg"] {
    border-radius: 0;
    object-fit: contain;
  }

  .mega-item__label { display: block; }

  /* Kolumna producentow -------------------------------------------------- */

  /* Kafle 3x4 (wariant 2a) zamiast 2x6: 12 marek w trzech kolumnach daje blok
     4 wiersze wysoki, ktory miesci sie w pustce pod "wg pomieszczenia".
     3x103 + 2x12 = 333 px, czyli 3 px ponad 330 px kolumny — kafel jest elastyczny
     (minmax), wiec przy waskiej kolumnie schodzi do 100 px i nic nie wystaje. */
  .mega-col--brands .mega-list--brands {
    grid-template-columns: repeat(3, minmax(0, 103px));
    gap: var(--mm-row-gap);
    justify-content: start;
  }

  .mega-panel li.mega-item--brand { height: var(--mm-row-h); }

  .mega-panel li.mega-item--brand > a {
    justify-content: center;
    padding: 10px;
    margin: 0;
    background-color: #fff;
    border-radius: 9px;
  }

  .mega-panel li.mega-item--brand > a:hover,
  .mega-panel li.mega-item--brand > a:focus-visible {
    background-color: #fff;
    outline: 1px solid var(--mm-rule);
  }

  .mega-item__logo {
    max-width: 83px;
    max-height: 31px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Na kaflu liczy sie logo; nazwa zostaje dla czytnikow ekranu i dla mobile. */
  .mega-item--brand .mega-item__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Ponizej 1500 px panel 1400 + marginesy przestaje sie miescic. Wczesniej "Wedlug
   typu" zwijalo sie wtedy do jednej kolumny — 10 pozycji spadalo w pion w jednej
   klatce i uklad przeskakiwal miedzy 3 a 4 widocznymi kolumnami (decyzja Radka
   2026-09-03: uklad ma byc staly). Teraz oddajemy tylko odstep miedzy kolumnami,
   a od 1330 px zwezaja sie same kolumny — liczba kolumn nie zmienia sie nigdy. */
@media (min-width: 1024px) and (max-width: 1500px) {
  header .menu-col nav > ul > li.mega-menu > ul.mega-panel {
    gap: clamp(32px, calc((100vw - 1264px) / 2), var(--mm-gap-col));
  }
}

/* 769–1023 px (tablet w pionie): trzy kolumny o sztywnych szerokosciach z Figmy
   (273 + 330 + 218 + odstepy) nie mieszcza sie w panelu — kolumna producentow
   wystawala poza ekran. Panel zawija kolumny i pozwala im sie kurczyc. */
@media (min-width: 769px) and (max-width: 1023px) {
  /* `flex-wrap` nie dziala na gridzie (panel jest gridem od wariantu 2a) —
     wlasciwy uklad tabletowy siedzi na KONCU pliku, bo tam wygrywa kolejnoscia. */
  header .menu-col nav > ul > li.mega-menu > ul.mega-panel {
    row-gap: 24px;
    padding: 24px;
  }

  .mega-panel > li.mega-col {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .mega-panel ul.mega-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Kafle producentow ida w rzad i zawijaja sie zamiast trzymac dwie kolumny. */
  .mega-col--brands .mega-list--brands {
    grid-template-columns: repeat(auto-fill, 103px);
  }
}

/* ================================================================ mobile */
/* Motyw pokazuje tu podmenu inline w bialym panelu. Panel mega sie nie wlacza;
   dbamy tylko o to, zeby trzeci poziom byl czytelny, a biale logo na bialym tle
   nie zniknelo — zamiast obrazka pokazujemy nazwe producenta. */
@media (max-width: 768px) {
  /* Motyw ustawia `flex-direction: column` tylko na `li.menu-item-has-children`,
     a kolumny panelu tej klasy nie maja — bez tego naglowek stoi OBOK listy,
     wysrodkowany w pionie. */
  header .menu-col nav li.mega-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    height: fit-content;
  }

  header .menu-col nav li.mega-col > ul.mega-list {
    margin: 0;
    width: 100%;
  }

  .mega-col__title {
    display: block;
    color: #0d0d0d;
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mm-rule);
  }

  /* Motyw (`custom.css`: `header .menu-col nav > ul li > ul`) spycha KAZDA liste
     podmenu na `z-index: -2`, czyli ZA jej wlasnego rodzica. Na desktopie zdejmuje
     to regula `.mega-panel ul.mega-list { z-index: auto }`, ale ona siedzi w
     `@media (min-width: 769px)` — na mobile `-2` zostawalo. Skutek: `li.mega-col`
     lezalo NA swoich pozycjach i przechwytywalo dotyk, wiec klikalny byl wylacznie
     sam tekst (39 px z 310 px szerokosci wiersza); dotkniecie obok nazwy nie robilo
     nic. Zmierzone 2026-09-03: po zdjeciu z-indexu dotyk 150 px w prawo od nazwy
     nawiguje poprawnie. To wada MOTYWU, wiec dotyczy tez innych podmenu. */
  header .menu-col nav li.mega-col > ul.mega-list { z-index: auto; }

  .mega-panel li.mega-item > a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Caly wiersz jest celem dotyku, nie sam tekst. 44 px = zalecenie Apple HIG
       i Material; WCAG 2.5.8 AA wymaga 24 px, wiec z zapasem. Marki mialy 20 px,
       bo po ukryciu logo zostawal goly tekst 16 px bez paddingu. */
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 0;
  }

  .mega-item__img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
  }

  .mega-item__logo { display: none; }

  .mega-item--brand .mega-item__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
    overflow: visible;
  }
}

/* =============================================== kolumna jeszcze nieopublikowana */

/* "Wedlug typu dzialalnosci" (ClickUp 869eh4wqc pkt 3) istnieje juz w menu WP jako
   15 pozycji z URL "#", ale docelowe zakladki "Meble do..." NIE POWSTALY (0/15 na
   prodzie i stagingu, stan 2026-09-03). Do czasu publikacji kolumna jest ukryta.

   CELOWO POZA @media: na mobile motyw pokazuje podmenu inline, wiec bez tej reguly
   15 martwych pozycji rozlaloby sie na telefonie. Ukrycie musi dzialac na obu
   szerokosciach naraz.

   GO-LIVE: wpisac adresy w Wyglad -> Menu i USUNAC klase "mega-col--wkrotce"
   z pozycji-naglowka kolumny. Bez zmian w kodzie i bez deployu. */
header .menu-col nav li.mega-col--wkrotce { display: none; }

/* Ta sama regula dla kolumny producentow — decyzja Radka 2026-09-04, przed rozmowa
   z wlascicielem. Powod: zakladki producentow NIE ISTNIEJA, a 12 logotypow prowadzi
   dzis do archiwow taksonomii, ktore nie sa docelowym celem. Menu ma byc PRZYGOTOWANE,
   ale WYLACZONE do czasu, az powstana zakladki (branze: ok. 1,5 tygodnia).

   Kolumna zostaje w menu WP z kompletem 12 pozycji — wlaczenie to zdjecie klasy
   "mega-col--wkrotce" z naglowka w Wyglad -> Menu. Zero kodu, zero deployu. */

/* ================================================= kolumna dzialalnosci (wariant 2a)

   Uklad 1840 px (z 2026-09-04 rano) i przelacznik `:has()` USUNIETE. Wariant 2a ma
   JEDEN uklad dla wszystkich stanow: siatka panelu jest ta sama niezaleznie od tego,
   czy kolumna marek i kolumna dzialalnosci sa widoczne. Ukrycie ktorejkolwiek klasa
   `mega-col--wkrotce` zostawia siatke 3x2 — puste komorki po prostu znikaja,
   bo `align-content: start` i `grid-template-rows: auto auto`.

   To byla glowna zaleta wariantu 2a wskazana w makiecie: go-live producentow
   ani go-live zakladek "Meble do..." nie przebudowuje panelu. */
@media (min-width: 769px) {

  /* Sciezki 3-4 siatki (polowa panelu), oba wiersze. Lamanie 8+7 ZOSTAJE — bez
     niego kolumna mialaby 15 wierszy i panel schodzilby ponizej krawedzi ekranu
     na laptopie. */
  .mega-panel > li.mega-col--dzialalnosc {
    grid-column: 3 / span 2;
    grid-row: 1 / span 2;
  }

  /* Obie podkolumny sa rowne (1fr) i dzieli je TEN SAM odstep, co kolumny panelu
     — inaczej "cztery rowne kolumny" byloby prawda tylko dla trzech szczelin z
     czterech (polecenie Radka 2026-09-09). Stad --mm-gap-col2a, nie --mm-row-gap. */
  .mega-panel > li.mega-col--dzialalnosc .mega-list {
    grid-template-rows: repeat(8, minmax(var(--mm-row-h), auto));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: auto;
    column-gap: var(--mm-gap-col2a);
  }

  /* ============================ uklad 3-kolumnowy (dzialalnosc uspiona)

     Decyzja Radka 2026-09-04 po obejrzeniu stagingu: kolumna dzialalnosci
     "nie daje zadnej wartosci w rozumieniu wiecej informacji, a zajmuje wiecej
     miejsca i utrudnia przegladanie strony". Panel 1338x670 zajmowal 85% ekranu
     na laptopie 1366x768. Kolumna USPIONA do czasu, az powstana zakladki
     "Meble do..." — dzis jej 15 pozycji i tak prowadzi do "#".

     Producenci ZOSTAJA (decyzja Radka: kafle nie tworza ciasnoty). Przy uspionej
     dzialalnosci wracaja na WLASNA kolumne, bo pod "pomieszczeniem" nie ma juz
     czego wypelniac — to jest uklad z Figmy 1:1682: 558+330+218, panel 1400x498.

     Przelaczanie AUTOMATYCZNE: zdjecie klasy `mega-col--wkrotce` w Wyglad -> Menu
     przywraca uklad 2a. Zero kodu, zero deployu. */
  header .menu-col nav > ul > li.mega-menu > ul.mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) {
    width: min(var(--mm-panel-w), calc(100vw - 4rem));
    min-height: var(--mm-panel-h);
    grid-template-columns:
      minmax(273px, 558px)
      minmax(150px, var(--mm-col-pom))
      218px;
    grid-template-rows: auto;
    column-gap: var(--mm-gap-col);
    row-gap: 0;
  }

  /* "Wg typu" wraca do lamania 7+3 z Figmy. W ukladzie 2a byla jedna kolumna,
     bo inaczej panel mial 6 pionowych rzedow; przy trzech kolumnach to znika. */
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col--typ,
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col:first-child {
    grid-column: 1;
    grid-row: 1;
  }
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col--typ .mega-list,
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col:first-child .mega-list {
    grid-template-rows: repeat(7, var(--mm-row-h));
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 273px);
    column-gap: var(--mm-row-gap);
  }

  /* Marki wracaja na wlasna kolumne (3). */
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col--brands {
    grid-column: 3;
    grid-row: 1;
  }

  /* Kafle 2x6 z Figmy — kolumna ma 218 px, trzy kafle (333 px) by sie nie zmiescily. */
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) .mega-list--brands {
    grid-template-columns: repeat(2, 103px);
  }

  /* ---------------------------- uklad 2-kolumnowy (marki TEZ uspione)

     Decyzja Radka 2026-09-05: "producentow nie powinno byc widac" — wracamy do
     stanu sprzed 2026-09-04 (czekamy na odpowiedz Tomka, czy zakladki producenckie
     w ogole powstana). Bez tej reguly trzecia sciezka siatki zostawala pusta
     i panel miial 1400 px z ~265 px dziury po prawej.

     Szerokosc: 47 + 558 + 100 + 330 + 47 = 1082 px. */
  header .menu-col nav > ul > li.mega-menu > ul.mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))):not(:has(> li.mega-col--brands:not(.mega-col--wkrotce))) {
    grid-template-columns:
      minmax(273px, 558px)
      minmax(150px, var(--mm-col-pom));
    width: min(1082px, calc(100vw - 4rem));
  }
}

/* ======================================= tablet w pionie (769–1023 px), grid

   CELOWO NA KONCU PLIKU. Reguly ukladu 3-kolumnowego i 2a maja te sama
   specyficznosc co ten blok, wiec decyduje KOLEJNOSC. Gdy stal wyzej,
   `column-gap: 24px` bylo nadpisywane przez `var(--mm-gap-col)` = 100 px:
   kolumny 273+150+218 z dwoma odstepami po 100 px daja 941 px w panelu
   740 px, wiec kolumna producentow wystawala 85 px poza ekran
   (zlapane przez bramke na 820 px, 2026-09-04). */
@media (min-width: 769px) and (max-width: 1023px) {

  header .menu-col nav > ul > li.mega-menu > ul.mega-panel,
  header .menu-col nav > ul > li.mega-menu > ul.mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: auto;
    column-gap: 24px;
    row-gap: 24px;
    padding: 24px;
    width: min(100%, calc(100vw - 2rem));
    min-height: 0;
  }

  /* Kolumny plyna po kolei zamiast trzymac przypisane miejsca w siatce. */
  .mega-panel > li.mega-col,
  .mega-panel > li.mega-col--typ,
  .mega-panel > li.mega-col--brands,
  .mega-panel > li.mega-col--dzialalnosc,
  .mega-panel > li.mega-col:first-child,
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col--typ,
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col--brands,
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col:first-child {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    max-width: 100%;
  }

  /* Wszystkie listy w jedna kolumne — takze "wg typu", ktore wyzej lamie sie 7+3. */
  .mega-panel ul.mega-list,
  .mega-panel > li.mega-col--typ .mega-list,
  .mega-panel > li.mega-col:first-child .mega-list,
  .mega-panel > li.mega-col--dzialalnosc .mega-list,
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col--typ .mega-list,
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) > li.mega-col:first-child .mega-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  /* Wiersz ustepuje tresci — etykiety zawijaja sie na waskiej kolumnie. */
  .mega-panel li.mega-item { height: auto; min-height: var(--mm-row-h); }
  .mega-panel li.mega-item > a { height: auto; min-height: var(--mm-row-h); }

  /* Kafle producentow zawijaja sie zamiast trzymac sztywna liczbe kolumn. */
  .mega-col--brands .mega-list--brands,
  .mega-panel:not(:has(> li.mega-col--dzialalnosc:not(.mega-col--wkrotce))) .mega-list--brands {
    grid-template-columns: repeat(auto-fill, 103px);
  }
  .mega-panel li.mega-item--brand,
  .mega-panel li.mega-item--brand > a { height: var(--mm-row-h); min-height: 0; }
}

/* ======================================= baner CookieYes (r174, 2026-10-09)

   NIE dotyczy mega menu — siedzi tutaj, bo to jedyny plik motywu, ktory nasz
   mu-plugin laduje na KAZDEJ stronie. Tag Custom HTML w GTM (GTM-T9FGRJ9K)
   wstrzykuje `.cky-consent-container {width:100%; height:100%; background:
   rgba(0,0,0,.5)} !important` — przed wyborem zgody strona byla przyciemniona
   i nie dalo sie kliknac logo, menu ani hamburgera (decyzja Radka 09.10: poprawic).
   `body .cky…` + !important wygrywa z regula z GTM bez wzgledu na kolejnosc.
   Pozycja i wyglad samego banera (lewy dol 440 px, na telefonie dol na cala
   szerokosc) bez zmian. Gdy ktos usunie tag w GTM, ta regula jest nieszkodliwa. */
body .cky-consent-container {
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
}

/* r181 (2026-10-21, ClickUp 869fkp6k0, brief ANALITYKa brief-menu-odstepy-r181):
   (1) /katalog-produktow/ i /realizacje/ maja section.index-top bez klasy h620 (baner 400 px),
       a karta "Bezplatna wycena" (681 px, wysrodkowana w pionie na banerze) wchodzila na menu.
       Baner jak na stronach uslug i miast: 620 px. Ponizej 993 px karta jest statyczna — bez zmian.
   (2) Zwykle podmenu (Uslugi, Oddzialy) staly 9 px pod linkiem, megapanel 41 px (19 px od paska
       wg Figmy, r168). Wyrownujemy do megapanelu; mostek ::before jak w mega-panel, zeby hover
       nie gasl w szczelinie. */
@media (min-width: 993px) {
  .banner-with-form-wrapper > section.index-top { min-height: 620px; }
}
@media (min-width: 769px) {
  header .menu-col nav > ul > li:not(.mega-menu) > ul.sub-menu { margin-top: 72px; }
  header .menu-col nav > ul > li:not(.mega-menu) > ul.sub-menu::before {
    content: ""; position: absolute; top: -48px; left: 0; right: 0; height: 48px;
  }
}