/* Menu v3 — style. Plik wyniesiony z megamenu-v3.tpl 08.09.2026, zeby
   przegladarka mogla go zapamietac miedzy stronami; inline lecial w kazdym
   zadaniu. Wszystko pod .mmv3 i .mmv3s — zero regul globalnych, zero
   resetow, zadnego dotykania klas motywu. Wyjatek swiadomy: ukrycie
   przycisku "Nasze produkty" i blokada przewijania przy otwartej szufladzie. */
/* Pasek K1 zastepuje przycisk "Nasze produkty", wiec go chowamy (decyzja 08.09
   — idziemy w menu v3 i zamykamy obecne). Kontener jest w motywie, w
   templates/_partials/header.tpl; przy wdrozeniu docelowym przycisk wypada
   wprost stamtad. Ponizej 1200 px przycisk zostaje — to on otwiera szuflade. */
@media(min-width:1200px){.header-top__block--menu-toggle{display:none !important}}

/* Przyklejony pasek K1 (sekcja 17: "staly pasek K1 pod naglowkiem, przyklejony
   przy przewijaniu"). Naglowek sklepu przykleja sie sam — initStickyHeader
   w theme.js nadaje .js-header-top position:fixed;top:0 — wiec pasek K1
   parkuje POD nim: --mmv3-gora to zmierzona wysokosc naglowka, z JS.
   Na telefonie i tablecie sticky wylaczone (sekcja 10: "na mobile sticky jest sam
   naglowek") — tam pasek jest przewijany w poziomie i przyklejony zabralby ekran. */
.mmv3{position:relative;background:#fff;border-bottom:1px solid #e6e6e6;font-family:'Open Sans',system-ui,sans-serif;color:#101010}
@media(min-width:1200px){
  .mmv3.mmv3-stale{position:fixed;top:var(--mmv3-gora,0);left:0;right:0;z-index:1001}
  .mmv3.mmv3-przyklejony{box-shadow:0 6px 16px rgba(0,0,0,.10)}
  /* Po przyklejeniu zostaje sam pasek K1. Wiersz "Sprawdz koniecznie" jest
     wazny na wejsciu, a nie w trakcie przewijania, i zabieral 35 px ekranu.
     Rozporka trzyma w ukladzie pelna wysokosc, wiec strona nie skacze. */
  .mmv3.mmv3-stale .mmv3-quickwrap{display:none}
}

/* Szerokosc: pasek, wiersz skrotow i panel siedza w motywowym .container-full
   (max-width:100%, padding 48px), zeby rownaly sie do logo i wyszukiwarki
   w naglowku. Wlasnego max-width nie ustawiamy — wczesniej 1350px sprawialo,
   ze na szerokich ekranach menu bylo wezsze od naglowka. */
/* justify-content musi byc center, nie space-between: przy zawijaniu (11 rodzin
   nie wchodzi w jeden rzad ponizej ~1150 px) space-between rozpychalo dwie
   ostatnie pozycje na przeciwne krawedzie, z pusta dziura miedzy nimi.
   Rozciaganie do pelnej szerokosci i tak robi flex-grow na .mmv3-fam. */
.mmv3-bar{padding:8px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
/* Elastyczne, zeby 11 rodzin wypelnialo cala szerokosc paska i miescilo sie
   w jednym rzedzie; przy ciasnych ekranach zawijaja sie same. */
/* Promien 15 px i dolna krawedz 5 px to proporcje odczytane z logo:
   ramka znaku ma bok 58 px, narożnik o promieniu 9,26 px (16% boku)
   i obwodke 5,8 px (8,3% boku). Przy kaflu wysokim 91 px daje to
   15 px i 5 px — zaznaczenie K1 powtarza wiec krzywizne z logo. */
.mmv3-fam{flex:1 1 0;min-width:92px;max-width:180px;background:none;border:0;border-radius:15px;padding:8px 4px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;line-height:1.2}
.mmv3-fam:hover{background:#f4f4f4}
.mmv3-fam[aria-expanded="true"]{background:#fff8e1;box-shadow:inset 0 -5px 0 #ffc408}
/* 56 px. Makieta ma 44 px, ale tam kafelek mial ~114 px (11 rodzin w kontenerze
   1350 px) i ikona zajmowala ~39% jego szerokosci. U nas kafelek ma 147 px
   (10 rodzin na pelnej szerokosci), wiec 44 px spadalo do 30% i ikona gubila
   sie w slocie. 56 px odtwarza proporcje z makiety.
   svg i img sciagamy do rozmiaru kontenera, zeby atrybuty width/height
   w szkicu nie trzymaly starej wielkosci. */
.mmv3-ico{position:relative;display:block;width:56px;height:56px}
.mmv3-ico svg{width:100%;height:100%}
/* Ikona z pliku przykrywa szkic; tlo biale, bo szkic jest pod spodem. */
/* Bez tla: PNG-i sa przezroczyste, a biale wypelnienie bylo widoczne przy
   najechaniu, gdy kafel zmienia tlo.
   Szkic i obrazek nie wystepuja juz razem — szablon renderuje jedno albo
   drugie, w zaleznosci od tego, czy plik ikony istnieje. Dzieki temu nie ma
   ani nieudanych zapytan, ani nadmiarowego markupu. */
.mmv3-ico-real,.mmv3-tile-ico .mmv3-ico-real{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}
/* Znacznik poziomu na pustym slocie: grafik widzi, czy w to miejsce idzie
   ikona rodziny (K1), czy ikona kafla (K2). Pelna nazwa pliku siedzi w
   title, a caly wykaz w assets/img/menu-v3/OCZEKIWANE-IKONY.txt.
   Gdy prawdziwy plik sie wczyta, znacznik znika razem ze szkicem. */
.mmv3-ico-lvl{position:absolute;right:-2px;bottom:-2px;z-index:2;font:700 8px/1 'Open Sans',sans-serif;
  font-style:normal;letter-spacing:.04em;color:#8a8a8a;background:#fff;border:1px solid #e0e0e0;
  border-radius:3px;padding:1px 2px}
.mmv3-lab{font-size:11.5px;font-weight:600;display:block}
/* Chevron pod etykieta — sygnal, ze rodzina rozwija panel (jest w makiecie). */
.mmv3-chev{display:block;color:#9a9a9a;margin-top:1px}
.mmv3-fam[aria-expanded="true"] .mmv3-chev{color:#101010;transform:rotate(180deg)}

/* Wiersz "Sprawdz koniecznie" — wartosci odczytane z makiety (.mstrip/.mstriplab/.mstripa) */
/* 1 px #e6e6e6 — wartosc z DESKTOPOWEJ makiety (#row1.bmnavL border-top).
   Wczesniejsze 8 px #f6f6f6 pochodzilo z .mstrip, czyli z wariantu mobilnego,
   ktory na desktopie jest ukryty — dlatego wychodzila gruba krecha. */
.mmv3-quickwrap{border-top:1px solid #e6e6e6}
/* Wysrodkowany i podporzadkowany paskowi K1: decyzja 08.09 — skroty nie moga
   byc wieksze od nazw rodzin (.mmv3-lab = 11.5px), bo K1 jest nawigacja glowna.
   Makieta ma tu 14.5px, czyli swiadomie od niej odchodzimy. */
.mmv3-quick{min-height:34px;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.mmv3-quick-lab{padding:4px 12px;font:600 10.5px/1 'Open Sans',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:#6b6b6b}
/* Bez obramowania i z promieniem 4 px — tak jak .frstrip a w makiecie
   desktopowej. Pigulka z ramka to znowu wartosc z widoku mobilnego. */
.mmv3-quick-a{border:0;border-radius:4px;background:transparent;padding:9px 10px;
  font:600 13.5px/1 'Open Sans',sans-serif;color:#1d1f20;text-decoration:none;
  white-space:nowrap;cursor:pointer}
a.mmv3-quick-a:hover{color:#101010;text-decoration:underline;text-decoration-color:#ffc408;text-decoration-thickness:2px}
.mmv3-quick-a--eco{color:#1e7a3c}
a.mmv3-quick-a--eco:hover{color:#1e7a3c}
.mmv3-quick-a--out{color:#c0271a}
a.mmv3-quick-a--out:hover{color:#c0271a}
/* Rodzina renderowana w pasku tekstowym (Wg zastosowania) to <button>, wiec
   ma wygladac jak pozostale skroty. Regula NIE powtarza tu fontu ani koloru:
   powtorzone byly, i gdy 08.09 podnioslem .mmv3-quick-a z 11,5 do 13,5 px
   (wartosc z makiety), ten jeden element zostal maly i w innym kroju. Wyglad
   przycisku zeruje juz klasa wspolna (border:0, background:transparent),
   zostaje wiec tylko wlasny hover ponizej, bo a:hover nie lapie <button>. */
.mmv3-quick-a--fam:hover{text-decoration:underline;text-decoration-color:#ffc408;text-decoration-thickness:2px}
.mmv3-quick-a--fam[aria-expanded="true"]{text-decoration:underline;text-decoration-color:#ffc408;text-decoration-thickness:2px}

.mmv3-panels{position:absolute;left:0;right:0;top:100%;z-index:1000}
/* Wartosci przygaszenia jak w motywie (_mainmenu.scss, body.menu-show .menu-plug).
   Pozycja fixed z gornym brzegiem ustawianym w JS, zeby naglowek zostawal jasny
   niezaleznie od jego wysokosci i od przewinicia strony. */
.mmv3-plug{position:fixed;left:0;right:0;bottom:0;background:#000;opacity:.5;z-index:900;display:none}
body.mmv3-open{overflow-y:hidden}
.mmv3-panel{position:relative;background:#fff;border-top:1px solid #ffc408;
  border-bottom:1px solid #e6e6e6;box-shadow:0 14px 28px rgba(0,0,0,.13)}
/* Stala wysokosc panelu: zalezy tylko od okna, nie od zawartosci, wiec
   przy przechodzeniu miedzy rodzinami nie skacza ani zakladki, ani tlo.
   Rodziny z dluga lista przewijaja sie w srodku. */
/* 316 px = 276 px slotu + 2 x 20 px paddingu kolumny. Po wgraniu banera
   ramka placeholdera znika, wiec obrazek dostaje pelne 276 px. Przy 276 px
   baner byl sciskany do 234 px i nie zgadzal sie ze specyfikacja. */
.mmv3-panel-in{padding:20px 0 24px;display:grid;grid-template-columns:1fr 316px;gap:26px;
  height:var(--mmv3-panel, clamp(260px, calc(100vh - 230px), 620px));overflow-y:auto;overscroll-behavior:contain;
  scroll-padding-bottom:28px}
/* Zapas na dole kolumny tresci: przy stalej wysokosci panelu krawedz
   przewijania wypadala raz miedzy wierszami chipow, a raz w polowie "babla".
   Zapas plus wygaszenie sprawiaja, ze uciety wiersz czyta sie jako
   "przewin dalej", a nie jako blad. */
.mmv3-main{min-width:0;padding-bottom:32px}
.mmv3-panel::after{content:'';position:absolute;left:0;right:0;bottom:0;height:28px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);pointer-events:none}

/* Rozmiary ponizej sa odczytane z makiety (.bmhead, .bmtt, .mchip, .mch, .mlink),
   nie ustawione na wyczucie. Pierwsza wersja byla o 2-6 px za mala. */
/* Wyszukiwarka wymiaru — interfejs jak w makiecie (.v2dim); „Szukaj” prowadzi
   na listing modulu boxmarket_wymiar (menu-v3.js). */
/* align-items:flex-end, nie center: pola maja teraz nazwy nad soba, wiec sa
   wyzsze od etykiety i przycisku — wyrownanie do dolu stawia je w jednej linii.
   Etykieta ma line-height rowny wysokosci pola (38 px), wiec jej tekst stoi
   w osi pol, a nie na ich dolnej krawedzi (Kamil 01.10: „nie jest w osi”).
   Skala jak kafle (14 px), nie 10,5–13 px — przy mniejszych liczbach blok
   wygladal na inny font niz reszta menu (font jest ten sam: Open Sans). */
.mmv3-dim{display:flex;align-items:flex-end;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:0 0 22px;padding:12px 16px;background:#fafafa;border:1px solid #ececec;border-radius:4px}
.mmv3-dim-lab{font:700 14px/38px 'Open Sans',sans-serif;color:#101010}
/* Kazde pole z nazwa nad soba i jednostka w srodku — te same zasady, co
   w szufladzie. Same podpowiedzi nie wystarczaly: znikaja, gdy user zacznie
   pisac, a "mm" stalo raz, na koncu calego rzedu. */
.mmv3-dim-f{display:inline-flex;align-items:flex-end;gap:8px}
.mmv3-dim-p{display:block;cursor:text}
.mmv3-dim-t{display:block;padding:0 2px 4px;font:600 12px/1.2 'Open Sans',sans-serif;color:#6b6b6b}
.mmv3-dim-in{display:flex;align-items:center;gap:3px;width:100px;height:38px;padding:0 8px;
  background:#fff;border:1px solid #d7d7d7;border-radius:4px}
.mmv3-dim-p:focus-within .mmv3-dim-in{border-color:#ffc408;box-shadow:0 0 0 2px rgba(255,196,8,.25)}
.mmv3-dim-in input{flex:1 1 0;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;
  font:600 14px/1 'Open Sans',sans-serif;color:#101010}
.mmv3-dim-in em{flex:none;font-style:normal;color:#9a9a9a;font-size:12px}
.mmv3-dim-b{height:38px;padding:0 20px;font:700 14px/1 'Open Sans',sans-serif;color:#101010;background:#ffc408;
  border:0;border-radius:4px;cursor:pointer}
.mmv3-dim-b:hover{background:#ffd629}
/* Pozycje bez ustalonego adresu maja ten sam kolor co linki — mieszanka
   szarych i czarnych wierszy wygladala na przypadkowa. */
.mmv3-links li span{display:block;padding:5px 0;font-size:13px;font-weight:400;color:#1d1f20}

.mmv3-h{font-size:16.5px;font-weight:700;color:#1d1f20;line-height:1.25;
  padding-bottom:8px;margin:0 0 14px;border-bottom:1px solid #d9d9d9;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}
/* Ozdobnik z makiety: pasek 4x17 px w kolorze marki przed tytulem sekcji. */
.mmv3-h > span{display:inline-flex;align-items:center;gap:10px}
.mmv3-h > span::before{content:'';flex:none;width:4px;height:17px;background:#ffc408}
.mmv3-h-all{flex:none;padding:6px 0 6px 10px;margin:-6px 0 -6px -10px;
  font:600 12.5px/1 'Open Sans',sans-serif;color:#5b5b5b;text-decoration:none;white-space:nowrap}
/* Nazwa rodziny w linku jest ciemniejsza od reszty zdania: to ona jest
   trescia, a "Zobacz wszystkie" tylko czynnoscia. Bez tego caly link jest
   jednolicie szary i oko go pomija, choc wlasnie urosl. */
.mmv3-h-all b{font-weight:700;color:#1d1f20}
.mmv3-h-all:hover,.mmv3-h-all:hover b{color:#101010}
.mmv3-h-all:hover{text-decoration:underline;text-decoration-color:#ffc408;text-decoration-thickness:2px}
.mmv3-main .mmv3-h:not(:first-child){margin-top:26px}

.mmv3-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
/* Kafel po decyzji 08.09: ikona + nazwa. Bez liczby produktow, bez kwoty
   sprzedazy i bez ramki z linia produktowa — dlatego wyrownanie do srodka. */
.mmv3-tile{display:flex;gap:11px;align-items:center;min-height:74px;padding:10px 12px;border:1px solid #e6e6e6;
  border-radius:4px;text-decoration:none;color:#101010;background:#fff}
.mmv3-tile:hover{border-color:#ffc408;background:#fffdf5;color:#101010}
.mmv3-tile--nolink{cursor:default;background:#fafafa;border-style:dashed}
/* 52 px — rozmiar z arkusza dla grafika (podglad kafla desktop). */
.mmv3-tile-ico{position:relative;flex:none;width:52px;height:52px;border:1px solid #ececec;border-radius:3px;background:#fafafa;
  display:flex;align-items:center;justify-content:center}
.mmv3-tile-ico svg{width:80%;height:80%}
.mmv3-tile-txt{min-width:0}
.mmv3-tile-name{font-size:15.5px;font-weight:600;line-height:1.3}

.mmv3-axis{margin-bottom:16px}
.mmv3-axis-lab{font:700 14px/1.3 'Open Sans',sans-serif;color:#101010;display:flex;gap:7px;align-items:center;
  padding:0 0 6px;margin:14px 0 10px;border-bottom:1px solid #ededed}
/* Ikona typu produktu przy osi produktowej — 20 px, jak w sekcji 22. */
.mmv3-axis-ico{position:relative;flex:none;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
.mmv3-axis-ico svg{width:100%;height:100%}
.mmv3-axis-ico img{width:100%;height:100%;object-fit:contain}
.mmv3-axis-lab b{font-weight:700}
.mmv3-axis-c{font-style:normal;font-weight:400;color:#8a8a8a}
.mmv3-axis-c::before{content:'· ';color:#c0c0c0}
.mmv3-chips{display:flex;flex-wrap:wrap;gap:6px}
/* Promien 3 px, nie 20: makieta desktopowa ma .tag z calc(--radius-md * .75),
   czyli 4 px * .75. Te 20 px przyszlo z makiety mobilnej (.mchip) — tam pigulki
   sa na miejscu, na desktopie nie. */
.mmv3-chip{font-size:14px;font-weight:400;border:1px solid #e0e0e0;border-radius:0;padding:8px 13px;background:#fff;
  color:#1d1f20;display:inline-flex;align-items:center;gap:6px;cursor:default}
.mmv3-chip-n{font-size:12px;color:#a8a8a8}
/* Chip z linkiem to trzeci poziom menu. Musi sie odrozniac od chipa bez
   celu, bo obok siebie stoja oba — stad kursor i reakcja na najechanie.
   text-decoration:none, bo podkreslenie na kilkudziesieciu chipach naraz
   robi z panelu siatke kresek. */
.mmv3-chip--link{cursor:pointer;text-decoration:none;transition:border-color .12s,background-color .12s}
.mmv3-chip--link:hover{border-color:#101010;background:#fafafa}
.mmv3-chip--link:focus-visible{outline:2px solid #101010;outline-offset:2px}
/* Naglowek osi jako link — bez podkreslenia, bo to naglowek, nie zdanie.
   Kolor dziedziczy, zeby nie rozjechac hierarchii panelu. */
/* Padding z ujemnym marginesem, a nie min-height: cel wskaznika rosnie do
   25 px (WCAG 2.2 wymaga 24), ale wiersz zajmuje tyle samo miejsca co
   wczesniej, wiec siatka paneli nie drgnie. Zlapal to audyt desktopu —
   naglowek mial 21 px i dopoki byl zwyklym tekstem, nie podlegal temu
   wymogowi; z chwila, gdy zrobilismy z niego link, zaczal podlegac. */
.mmv3-axis-a{color:inherit;text-decoration:none;display:inline-flex;gap:7px;align-items:center;
  padding:2px 0;margin:-2px 0}
.mmv3-axis-a:hover{text-decoration:underline;text-underline-offset:3px}
.mmv3-axis-a:focus-visible{outline:2px solid #101010;outline-offset:3px}

.mmv3-empty{border:1px dashed #d8d8d8;border-radius:4px;background:#fafafa;padding:22px;font-size:13.5px;
  color:#5b5b5b;line-height:1.6}
.mmv3-empty strong{display:block;font-size:14px;color:#101010;margin-bottom:5px}

/* Szara kolumna jak w makiecie (.bmrail): tlo #fafafa, ramka #e6e6e6,
   padding 20 px. Odciela komunikaty od siebie lepiej niz sama kreska. */
/* Dwie strefy banerowe na dole panelu, jak w makiecie. */
.mmv3-promos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.mmv3-promo2{position:relative;overflow:hidden;height:104px;border:1px dashed #d8d8d8;border-radius:4px;background:#fafafa;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:11px;color:#a8a8a8}
.mmv3-promo2 b{font-size:14px;color:#5b5b5b}

.mmv3-side{background:#fafafa;border:1px solid #e6e6e6;padding:20px;align-self:start}
.mmv3-promo{position:relative;height:300px;border:1px dashed #d8d8d8;border-radius:4px;background:#fff;margin-bottom:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:#a8a8a8}
.mmv3-promo b{font-size:15px;color:#5b5b5b}
/* Wgrany baner przykrywa placeholder w calosci; gdy pliku nie ma, onerror
   usuwa <img> i widac ramke z wymiarem. */
/* Slot z wgranym banerem nie potrzebuje juz przerywanej ramki ani tekstu. */
.mmv3-promo.mmv3-ma-baner,.mmv3-promo2.mmv3-ma-baner{border:0}
.mmv3-promo.mmv3-ma-baner > span,.mmv3-promo.mmv3-ma-baner > b,
.mmv3-promo2.mmv3-ma-baner > span,.mmv3-promo2.mmv3-ma-baner > b{display:none}
.mmv3-promo-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:3px}
/* Baner „Kartony na wymiar” (02.10) ma tekst przy krawedziach — nie przycinamy go (contain), a tlo w kolorze banera
   wypelnia slot, gdy jest szerszy albo nizszy niz 276 x 300 (np. 180 px ponizej 1180). */
.mmv3-ban-wymiar{display:block;background:#feda02}
.mmv3-ban-wymiar .mmv3-promo-img{object-fit:contain}
/* Baner dolny „Taśmy z logo” (05.10): slot 104 px wysokosci ma inna proporcje przy kazdej szerokosci (pol panelu,
   ponizej 1180 caly) — cover ucinal tekst. Calosc zawsze widoczna, reszta w kolorze tla banera. */
.mmv3-ban-tasmy{display:block;background:#fcdc0b}
.mmv3-ban-tasmy .mmv3-promo-img{object-fit:contain}
/* Baner dolny „Kartony klapowe” (05.10, 720 x 104): tak samo bez przycinania; tlo jasne jak lewa czesc banera. */
.mmv3-ban-klap{display:block;background:#f8f8f8}
.mmv3-ban-klap .mmv3-promo-img{object-fit:contain}
/* Banery z panelu (modul boxmarket_menubanery, 07.10): zawsze calosc obrazu; tlo z panelu (style w szablonie). */
.mmv3-ban-modul{display:block}
.mmv3-ban-modul .mmv3-promo-img{object-fit:contain}
/* Kroj jak etykieta osi ("Wg formatu") — decyzja 08.09; kapitaliki odpadaja.
   Linia u gory oddziela spis od strefy banerowej. */
.mmv3-links-h{font:700 13px/1.3 'Open Sans',sans-serif;color:#101010;
  padding:16px 0 10px;margin:0;border-top:1px solid #e0e0e0}
.mmv3-links{list-style:none;margin:0;padding:0}
.mmv3-links li{margin-bottom:2px}
.mmv3-links a{display:block;padding:5px 0;font-size:13px;font-weight:400;color:#1d1f20;
  text-decoration:none}
.mmv3-links a:hover{color:#101010;text-decoration:underline;text-decoration-color:#ffc408}

/* Ponizej 1200 px nawigacja to szuflada, i tylko szuflada. Pasek K1 wraz z
   wierszem skrotow i panelami byl tam do 08.09 widoczny obok szuflady: dwie
   nawigacje naraz, przewijany w poziomie pasek i skroty lamiace sie na trzy
   wiersze zjadaly pol ekranu. Makieta telefonu i tabletu nie ma tam paska K1
   wcale — jest naglowek i szuflada pod hamburgerem.
   Pasek korzysci zostaje: JS przenosi go na sam gorny brzeg strony. */
@media(max-width:1199px){
  .mmv3-barwrap,.mmv3-quickwrap,.mmv3-panels,.mmv3-plug{display:none}
  .mmv3{border-bottom:0}
}
/* Ponizej 1200 px paska nie ma, wiec te dwa progi dotycza tylko szerokosci
   okna miedzy 1200 px a 1180/900 — czyli praktycznie niczego. Zostaja jako
   zabezpieczenie, gdyby granica szuflady kiedys zjechala w dol. */
@media(max-width:1180px){
  .mmv3-panel-in{grid-template-columns:1fr}
  .mmv3-side{padding:16px}
  .mmv3-promo{height:180px}
  .mmv3-promos{grid-template-columns:1fr}
  .mmv3-tiles{grid-template-columns:repeat(3,1fr)}
}
/* ---- Szuflada na telefon i tablet ------------------------------------ */
/* Jedna szuflada dla obu urzadzen. Tablet od 700 px dostaje uklad z makiety:
   rodziny w dwie kolumny po 72 px, wiersze w blokach na pol szerokosci, baner
   z sufitem 420 px. Powyzej 1200 px szuflady nie ma — tam rzadzi pasek K1. */
.mmv3s{position:fixed;left:0;right:0;top:0;bottom:0;z-index:2000;display:flex}
.mmv3s[hidden]{display:none}
@media(min-width:1200px){.mmv3s{display:none!important}}
.mmv3s-tlo{position:absolute;left:0;right:0;top:0;bottom:0;background:#000;opacity:.5}
.mmv3s-okno{position:relative;display:flex;flex-direction:column;width:420px;max-width:100%;
  background:#fff;font-family:'Open Sans',system-ui,sans-serif;color:#101010;
  box-shadow:0 0 40px rgba(0,0,0,.25)}
@media(min-width:700px){.mmv3s-okno{width:560px}}
.mmv3s-nag{position:relative;flex:none;padding:14px 56px 14px 16px;border-bottom:1px solid #e6e6e6}
/* margin:0 jest tu KONIECZNE, nie kosmetyczne: tytul jest <h2> (szuflada nie
   miala zadnego naglowka, a to wersja indeksowana mobile-first), a domyslny
   margines naglowka rozepchalby pasek tytulowy szuflady. */
.mmv3s-tyt{margin:0;font:700 15px/1 'Open Sans',sans-serif}
/* Punkt orientacyjny nawigacji przejmuje flexa po .mmv3s-okno. Do 12.09.2026
   .mmv3s-lista i .mmv3s-panel byly bezposrednimi dziecmi okna i brały z niego
   flex:1 1 auto; <nav> stanal miedzy nimi, wiec musi te wlasciwosci przepuscic,
   inaczej panel rodziny przestaje sie przewijac. */
.mmv3s-naw{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.mmv3s-x{position:absolute;right:6px;top:4px;width:44px;height:44px;border:0;background:transparent;
  font-size:28px;line-height:1;color:#8a8a8a;cursor:pointer}

.mmv3s-lista,.mmv3s-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.mmv3s-lista{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mmv3s-lista[hidden],.mmv3s-panel[hidden]{display:none}

/* Skroty jako pelnowymiarowe wiersze, tak jak .mstripa w makiecie telefonu.
   Wczesniej zrobilem z nich przewijane pigulki — moj pomysl, nie makiety; przy
   szerokosci 375 px trzeba bylo przeciagac je w poziomie, zeby zobaczyc Outlet. */
.mmv3s-strip{flex:none;display:block;border-top:1px solid #e6e6e6;margin-top:8px}
/* 12 px, nie 11: pomiar czcionek w szufladzie 12.09.2026 wykazal, ze to byla
   jedyna etykieta ponizej 12 px w calym widoku mobilnym. */
.mmv3s-strip-lab{display:block;padding:8px 14px 2px;font:600 12px/1 'Open Sans',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:#7a7a7a}
.mmv3s-strip-a{display:flex;align-items:center;width:100%;min-height:48px;padding:12px 14px;
  border:0;border-top:1px solid #f4f4f4;background:#fff;text-align:left;text-decoration:none;
  color:#1d1f20;font:600 15.5px/1.3 'Open Sans',sans-serif;cursor:pointer}
.mmv3s-strip-a--eco{color:#1e7a3c}
.mmv3s-strip-a--out{color:#c0271a}

/* TYPOGRAFIA SZUFLADY — wartosci wieksze od makiety, swiadomie.
   Trzy powody, kazdy inny:
   1. Makieta telefonu mowi .mrow 14.5 px i .mfam 600 15 px, a mielismy 14 px
      w obu — bylismy PONIZEJ makiety i to byl nasz blad.
   2. Wchodzimy wyzej niz makieta, bo makieta byla rysowana na 375 px, a
      telefon, na ktorym to ocenialismy, ma 440 px szerokosci. Kamil
      09.09: "font na mobile jest za maly, ladne ale srednio czytelne".
   3. Pola formularza dostaja 16 px i to nie jest estetyka: Safari na iOS
      automatycznie przybliza cala strone, gdy uzytkownik dotknie pola z
      czcionka mniejsza niz 16 px. Ponizej tej wartosci nie schodzimy. */
/* LISTY W SZUFLADZIE. Rodziny, wiersze w blokach i chipy sa od 12.09.2026
   listami (<ul>/<li>), zeby czytnik ekranu podawal liczbe pozycji i pozwalal
   je przeskoczyc — wczesniej byly ciagiem <div>, wiec nawigacja nie miala
   w ogole struktury.
   Ponizsze reguly maja jeden cel: zrobic <li> PRZEZROCZYSTYM dla ukladu, zeby
   zmiana nie kosztowala ani piksela. Punktor, margines i padding zdejmujemy,
   a dla chipow <li> przejmuje rola elementu flexa (flex:none), bo to on staje
   sie dzieckiem rzedu.
   Czego tu BYC NIE MOZE: position:relative ani wlasnego odstepu na <li>.
   menu-v3.js liczy krok przewijania rzedu z offsetLeft chipa, a pozycjonowany
   <li> zmienilby punkt odniesienia — strzalki zatrzymywalyby rzad w polowie
   napisu, czyli dokladnie to, co scroll-snap mial naprawic. */
.mmv3s-rodziny,.mmv3s-wiersze{list-style:none;margin:0;padding:0}
.mmv3s-rodziny>li,.mmv3s-wiersze>li{display:block}
.mmv3s-chipy>li{flex:none;display:flex}

.mmv3s-rodziny{flex:none}
.mmv3s-fam{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;
  border:0;border-bottom:1px solid #f2f2f2;background:#fff;text-align:left;cursor:pointer;
  font:600 16.5px/1.3 'Open Sans',sans-serif;color:#101010}
.mmv3s-ico{position:relative;flex:none;display:block;width:36px;height:36px}
.mmv3s-ico svg{width:100%;height:100%}
.mmv3s-fam-t{flex:1 1 auto}
/* Chevron: rozmiar trzymamy tu I w atrybutach szablonu. Arkusz menu-v3.css
   laduje sie w <body>, wiec przed jego sparsowaniem SVG renderuje sie w
   rozmiarze z atrybutow — rozjazd byloby widac jako przeskok. */
.mmv3s-chev{flex:none;width:24px;height:24px;color:#8a8a8a;stroke-width:2.4}
@media(min-width:700px){
  .mmv3s-rodziny{display:grid;grid-template-columns:1fr 1fr;align-content:start;grid-auto-rows:72px}
  .mmv3s-fam{height:72px;min-height:72px;border-right:1px solid #f2f2f2}
}

.mmv3s-wstecz{flex:none;display:flex;align-items:center;gap:10px;width:100%;min-height:56px;
  padding:12px 14px;border:0;border-bottom:1px solid #e6e6e6;background:#fafafa;cursor:pointer;
  text-align:left;font:700 16px/1.25 'Open Sans',sans-serif;color:#101010}
/* Powrot dostaje 28 px, czyli wiecej niz chevron "w przod" (24 px): to
   jedyne wyjscie z panelu rodziny, a przy 20 px byl od niego mniejszy. */
.mmv3s-wstecz svg{flex:none;width:28px;height:28px;stroke-width:2.6;color:#c8a200}
.mmv3s-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-bottom:24px}

/* Wyszukiwarka wymiaru w szufladzie. Makieta telefonu jej nie ma, wiec uklad
   jest moj — pierwsza wersja skladala sie na trzy nierowne kawalki, z guzikiem
   samotnie w drugim wierszu. Teraz: etykieta w swoim wierszu, trzy pola dziela
   szerokosc po rowno, guzik na calej szerokosci pod nimi. Wysokosc 46 px, zeby
   palec mial w co trafic. Na tablecie guzik wraca obok pol, bo miejsca starcza. */
.mmv3s-dim{display:block;padding:14px;background:#f6f6f6;border-bottom:1px solid #ededed}
.mmv3s-dim-lab{display:block;margin-bottom:8px;font:700 15px/1.25 'Open Sans',sans-serif}
/* Trzy osobne pola, kazde z wlasna ramka i nazwa. Jedna wspolna ramka z
   separatorami czytala sie jak jedno pole i nie bylo widac, gdzie kliknac. */
.mmv3s-dim-f{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mmv3s-dim-p{display:block;min-width:0;cursor:text}
.mmv3s-dim-t{display:block;padding:0 2px 4px;font:600 12px/1.2 'Open Sans',sans-serif;color:#6b6b6b}
.mmv3s-dim-in{display:flex;align-items:center;gap:3px;height:44px;padding:0 8px;
  background:#fff;border:1px solid #dcdcdc;border-radius:6px}
.mmv3s-dim-p:focus-within .mmv3s-dim-in{border-color:#ffc408;box-shadow:0 0 0 2px rgba(255,196,8,.25)}
.mmv3s-dim-in input{flex:1 1 0;min-width:0;width:auto;height:100%;padding:0;border:0;outline:0;
  text-align:left;font:16px/1 'Open Sans',sans-serif;background:transparent;color:#101010}
.mmv3s-dim-in em{flex:none;font-style:normal;font-size:12.5px;color:#9a9a9a}
.mmv3s-dim-b{display:block;width:100%;height:50px;margin-top:8px;border:0;border-radius:6px;
  background:#ffc408;cursor:pointer;font:700 15.5px/1 'Open Sans',sans-serif;color:#101010}
@media(min-width:700px){
  .mmv3s-dim{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .mmv3s-dim-lab{width:100%;margin:0}
  .mmv3s-dim-f{flex:1 1 auto;max-width:520px}
  .mmv3s-dim-b{width:auto;margin:0;padding:0 22px}
}

.mmv3s-blok{border-bottom:8px solid #f6f6f6}
/* flex-wrap od 11.09: link "Wszystkie" niesie teraz nazwe rodziny, wiec przy
   320 px razem z tytulem bloku nie miesci sie w jednym rzedzie. Zawijanie
   spuszcza go do drugiej linii zamiast rozpychac naglowek. Sam link ma
   flex:none i nie moze sie skurczyc, bo skurczony znaczylby ucieta nazwe. */
.mmv3s-bh{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:14px 14px 8px;font:700 15px/1.25 'Open Sans',sans-serif}
/* Pole dotyku, nie sam tekst: przy samym foncie link mial 14 px wysokosci,
   a palec potrzebuje 44 px. Ujemny margines trzyma naglowek w tej samej
   wysokosci, wiec powiekszenie nie rozpycha ukladu. */
.mmv3s-all{flex:none;font:600 13.5px/1 'Open Sans',sans-serif;color:#c8a200;text-decoration:none;
  padding:16px 0 16px 12px;margin:-16px 0 -16px -12px}
/* Nazwa rodziny mocniejsza od slowa "Wszystkie" — to ona jest trescia.
   Zostaje w kolorze linku, bo w szufladzie ten kolor niesie klikalnosc. */
.mmv3s-all b{font-weight:700}
.mmv3s-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:11px 14px;
  border-top:1px solid #f4f4f4;text-decoration:none;color:#1d1f20;font:16px/1.35 'Open Sans',sans-serif}
/* #6b6b6b, nie #8a8a8a: tamten dawal 3.45:1 na bialym tle, ponizej progu
   4.5:1 dla tekstu. Ten ma 5.28:1 i nadal czyta sie jako wyszarzony. */
.mmv3s-row--nolink{color:#6b6b6b}
.mmv3s-row-ico{position:relative;flex:none;display:inline-flex;width:26px;height:26px}
.mmv3s-row-ico svg{width:100%;height:100%}
.mmv3s-row-t{flex:1 1 auto}
/* Dwie kolumny z makiety tabletu robil do 12.09.2026 sam .mmv3s-row przez
   inline-flex + width:50%. Po zamianie wierszy na liste to <li> jest pudelkiem
   w przeplywie, wiec szerokosc i inline-flex musza przejsc na niego, a wiersz
   wypelnia go w calosci. Bez tego bloki wracaja do JEDNEJ kolumny — zmierzone
   na zywej stronie przed wdrozeniem: 16 wierszy na 768 px zmienialo pozycje. */
@media(min-width:700px){.mmv3s-wiersze>li{width:50%;display:inline-flex;vertical-align:top}
  .mmv3s-row{width:100%}}

.mmv3s-osblok{padding:12px 0 14px;border-bottom:8px solid #f6f6f6}
.mmv3s-ch{display:flex;gap:7px;align-items:baseline;padding:0 14px 8px;
  font:700 14px/1.25 'Open Sans',sans-serif}
.mmv3s-ch-c{font-style:normal;font-weight:400;color:#8a8a8a}
.mmv3s-ch-c::before{content:'\00b7 ';color:#c0c0c0}
/* Poziomy suwak chipow — i sygnal, ze da sie go przesunac.
   Bez tego rzad urywa sie na krawedzi ekranu i nic nie mowi, ze jest dalej:
   scrollbar jest schowany (na iOS i tak nie ma go stale), a chipy koncza sie
   plaskim ciеciem. Klasy dokleja JS, mierzac scrollWidth — wiec gdy rzad
   miesci sie caly, zadna sie nie pojawia i nie ma falszywej wskazowki.
   Wygaszamy sama tresc przez mask-image, nie nakladka: nakladka musialaby
   miec kolor tla, a tlo bloku osi bywa inne niz biel. */
/* scroll-snap: rzad zatrzymuje sie na granicy chipa, nie w polowie napisu.
   Bez tego kazde przesuniecie — palcem czy strzalka — konczylo sie ucietym
   chipem na krawedzi i rzad czytal sie jako skaczacy. "proximity", nie
   "mandatory": przy mandatory przeglada­rka dociaga rzad nawet przy malym
   ruchu palca i traci sie kontrole nad drobnym przewinieciem.
   scroll-padding-left rowna sie wewnetrznemu odstepowi rzedu, zeby chip
   zatrzymywal sie tam, gdzie zaczyna sie tresc, a nie pod krawedzia. */
/* list-style i margin siedza TU, a nie w regule listowej wyzej: osobny
   .mmv3s-chipy byl duplikatem selektora i linter go odrzucal. Padding zostaje
   wlasny (2px 14px 4px) — zerowanie go przesunieloby scroll-padding-left. */
.mmv3s-chipy{display:flex;gap:8px;overflow-x:auto;padding:2px 14px 4px;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding-left:14px;scroll-behavior:smooth;list-style:none;margin:0}
.mmv3s-chipy::-webkit-scrollbar{height:0}
@media(prefers-reduced-motion:reduce){.mmv3s-chipy{scroll-behavior:auto}}
.mmv3s-chipy.mmv3s-wiecej-p{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 44px),transparent 100%)}
.mmv3s-chipy.mmv3s-wiecej-l{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 44px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 44px,#000 100%)}
.mmv3s-chipy.mmv3s-wiecej-l.mmv3s-wiecej-p{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%)}
/* Licznik przy naglowku osi. Sama cyfra ("10") nie mowila nic — dopiero
   slowo obok robi z niej licznik, a nie zagadke. */
.mmv3s-ch-n{flex:none;margin-left:auto;padding:2px 8px;border-radius:9px;background:#f0f0f0;
  font:600 12.5px/1.5 'Open Sans',sans-serif;color:#6b6b6b;white-space:nowrap}

/* Dotykalne strzalki. Gradient sam nie wystarczyl: mozna go wziac za cien, a
   nikt nie zgadnie z niego, ze rzad da sie przesunac. Strzalka jest
   jednoczesnie wskazowka i kontrolka — kto nie wpadnie na przesuwanie palcem,
   po prostu ja dotknie.
   Stoja W NAGLOWKU OSI, nie na rzedzie chipow. Pierwsza wersja kladla je na
   tresci: zaslanialy napisy na chipach i caly rzad czytal sie jako skaczacy.
   W naglowku nie maja czego zaslonic i nie przesuwaja niczego w ukladzie —
   zmienia sie tylko ich widocznosc, a miejsce trzyma stala szerokosc slotu.
   tabindex="-1" w szablonie ma zostac takze wtedy, gdy chipy dostana cele:
   przejscie Tabem do chipa samo przewija go na widok, wiec dla klawiatury
   strzalka jest zbedna, a w kolejce fokusu bylaby dodatkowym przystankiem
   przy kazdej osi. Strzalka jest wylacznie dla palca i myszy. */
.mmv3s-ch-s{flex:none;display:inline-flex;gap:4px;margin-left:8px;
  /* Slot ma stala szerokosc — dwie strzalki plus odstep. Bez tego pojawienie
     sie lewej strzalki przesuwalo licznik i naglowek drgal przy kazdym
     przewinieciu. */
  width:64px;justify-content:flex-end}
.mmv3s-jedz{position:relative;flex:none;visibility:hidden;width:30px;height:30px;padding:0;
  border:1px solid #e0e0e0;border-radius:50%;background:#fff;color:#101010;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
/* Kolko zostaje 30 px, ale pole dotyku ma 44 px — wytyczna Apple. Rozszerzamy
   pseudoelementem, zeby nie ruszac ukladu naglowka: przy powiekszeniu samego
   przycisku slot strzalek rozpychalby licznik. */
.mmv3s-jedz::after{content:'';position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}
.mmv3s-jedz:active{background:#f4f4f4}
.mmv3s-osblok.mmv3s-w-l .mmv3s-jedz--l{visibility:visible}
.mmv3s-osblok.mmv3s-w-p .mmv3s-jedz--p{visibility:visible}
/* min-height 44 px: chip mial 36,5, a palec potrzebuje 44. Nakladka ::after —
   sztuczka, ktora ratuje strzalki przewijania — tutaj NIE dziala, bo rzad chipow
   ma overflow-x:auto, a to wymusza przyciecie takze w pionie i nakladka zostaje
   obcieta razem z nim (sprawdzone pomiarem: pole dalej mialo 37 px). Dopoki chipy
   byly etykietami, prog dotyku ich nie dotyczyl; od chwili, gdy prowadza do
   kategorii, dotyczy. */
.mmv3s-chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid #e0e0e0;border-radius:20px;background:#fff;
  white-space:nowrap;color:#1d1f20;font:14.5px/1 'Open Sans',sans-serif;
  scroll-snap-align:start}
/* Chip z linkiem w szufladzie. display:flex z wysrodkowaniem, bo <a> bez
   tego siada na linii bazowej i rzad chipow przestaje byc rowny. */
.mmv3s-chip--link{display:inline-flex;align-items:center;text-decoration:none;position:relative}
.mmv3s-chip--link:focus-visible{outline:2px solid #101010;outline-offset:2px}
/* Etykieta osi jako link — tylko ona, strzalki obok zostaja przyciskami.
   21 px etykiety w wierszu o wysokosci 40,8 px, wiec zapas jest w samym
   wierszu; padding z ujemnym marginesem siega 45 px i nie rusza ukladu. */
.mmv3s-ch-a{color:inherit;text-decoration:none;display:inline-block;
  padding:12px 0;margin:-12px 0}
.mmv3s-ch-a:focus-visible{outline:2px solid #101010;outline-offset:3px}


.mmv3s-ust{flex:none;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;
  padding:14px;border:0;border-top:1px solid #e6e6e6;background:#fafafa;cursor:pointer;
  text-align:left;font:600 13.5px/1.2 'Open Sans',sans-serif;color:#1d1f20}
.mmv3s-ust img{flex:none;width:18px;height:18px}

/* Widoczny fokus klawiatury. Motyw gasi obwodke globalnie i z !important
   (a{...outline:none!important} w theme.css), wiec bez !important tego nie
   odkrecimy — i to dotyczy wszystkich linkow w menu: kafli, skrotow i spisu
   w kolumnie bocznej. Dowod jest w theme.css, nie w pomiarze: probowalem to
   zmierzyc na zywej stronie i wyszlo mi "outline: none", ale okno przegladarki
   nie mialo wtedy fokusu, wiec czytalem stan NIEogniskowany — pomiar niczego
   nie dowodzil. Regula siedzi w .mmv3 i .mmv3s, wiec nie rusza reszty sklepu.
   :focus-visible, nie :focus — po kliknieciu myszka obwodki byc nie ma. */
.mmv3 :focus-visible,.mmv3s :focus-visible{outline:2px solid #101010!important;outline-offset:2px}
/* Wyjatek: pola wymiaru. Pole tekstowe ma :focus-visible takze po kliknieciu
   myszka, wiec czarny kwadrat stawal w srodku zoltej ramki (Kamil 01.10,
   zdjecie). Fokus widac i tak — zolta obwodka na .mmv3-dim-in (:focus-within). */
.mmv3 .mmv3-dim-in input:focus-visible,.mmv3s .mmv3s-dim-in input:focus-visible{outline:0!important}

body.mmv3s-otwarta{overflow:hidden}

/* Grubosc kreski szkicu zalezy od rozmiaru slotu — im mniejszy, tym grubsza,
   inaczej rysunek znika. Wartosci te same, co przy wklejanych kopiach.

   Te piec regul powtarza selektory uzyte wyzej i jest to SWIADOME: blok
   trzyma razem zaleznosc miedzy rozmiarem slotu a grubascia kreski, a
   rozbicie go na piec odleglych miejsc te zaleznosc gubi. Przeslanianie tu
   nie grozi, bo ustawiamy wylacznie zmienna, nie wlasciwosci. */
/* stylelint-disable no-duplicate-selectors */
.mmv3-ico{--mmv3-sw:2}
.mmv3-tile-ico{--mmv3-sw:2.5}
.mmv3-axis-ico{--mmv3-sw:3.5}
.mmv3s-ico{--mmv3-sw:2}
.mmv3s-row-ico{--mmv3-sw:3}
/* stylelint-enable no-duplicate-selectors */