/* pki.eu v3 — dolny pasek nawigacji na telefonie (869f7deet; Szymon 26.10, zrzut 244: „tu jest trochę ciasno, może w mobilce da się z tego zrobić bottom nav-bar? w sensie z 5 przycisków? no i kategorie są dwa razy (hamburger)”; wybór z makiet: „użyj c jako bazę, ale wywal start i kategorię przenieś tam gdzie są w wersji pc (przed bestsellery, dokładnie jak były). w wolne miejsce wstaw motyw i walutę.”). Markup: _PkiBottomNav.cshtml (renderuje HeaderLinks), PkiBottomNav.cs, zachowanie: pkieu-bnav.js. Osobny plik (nie pkieu-v3.css). WSZYSTKO w ≤ 860 px — desktop bez zmian. Klasa .has-bnav na .master-wrapper-page (_Root; poza kasą): pasek: Waluta · Lubisz · Koszyk · Konto · Motyw — Koszyk na środku (Waluta / Motyw = przyciski z nagłówka, te same panele); nagłówek: logo + wyszukiwarka w jednym rzędzie (narzędzia nagłówka są w pasku); kategorie: „KATEGORIE ▾” na początku paska menu, jak na desktopie (hamburgera nie ma w Header.cshtml); przypięty górny pasek (scroll w górę): logo · burger Kategorii (ta sama szuflada) · wyszukiwarka; Koszyk z produktami = czerwony blok (CTA jak koszyk w nagłówku desktopu), pusty = bez tła. Paski przyklejone do dołu (.sbuy karty produktu, .pc-bar koszyka) stają NAD paskiem; toasty nad paskiem; arkusze (mini-koszyk, Waluta, Motyw, filtry) i szuflada Kategorii zasłaniają pasek (wyższy z-index) — jak dotąd zajmują dół ekranu. */ .bnav{display:none;} @media (max-width:860px){ :root{--bnav-h:56px;--bnav-off:calc(var(--bnav-h) + env(safe-area-inset-bottom));} /* ---- pasek ---- */ .bnav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--surface);border-top:1px solid var(--line2); box-shadow:0 -1px 8px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom);transition:transform .2s ease-out;} .bnav ul{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0 auto;padding:0;list-style:none;max-width:560px;} .bnav li:empty{display:none;} /* jedna waluta w sklepie = CurrencySelector nic nie renderuje */ /* .bn = linki paska; .htool = przyciski Waluta / Motyw z nagłówka — ten sam kształt w pasku */ .bnav :is(.bn,.htool){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%; height:var(--bnav-h);min-height:0;padding:0 2px;border:0;border-radius:0;background:none;color:var(--muted);font:inherit;font-size:var(--fs-2xs); font-weight:600;line-height:1.1;letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent;} .bnav :is(.bn,.htool) .ico{width:var(--ico-24);height:var(--ico-24);stroke:var(--ink);} .bnav .htool.pki-corners::before,.bnav .htool.pki-corners::after{display:none;} .bn-l,.bnav .htool > span:not(.sr){white-space:nowrap;} /* Waluta: kod pod ikoną (EUR — „€” bez kodu nie mówi, która waluta); Motyw: podpis „Motyw” */ .bnav .htool.cur .cur-lbl{display:block;} .bnav .htool.theme > span{display:inline;} .bnav .htool.cur .cur-sym{height:var(--ico-24);font-size:22px;font-weight:350;line-height:var(--ico-24);color:var(--ink);} /* aktywna sekcja (z serwera: .on / aria-current) i otwarty panel (aria-expanded): czerwień + kreska u góry */ .bnav :is(.bn.on,[aria-expanded="true"]){color:var(--red);} .bnav :is(.bn.on,[aria-expanded="true"]) .ico{stroke:var(--red);} .bn.on::before{content:"";position:absolute;top:-1px;left:24%;right:24%;height:3px;border-radius:0 0 2px 2px;background:var(--red-fill);} .bnav :is(.bn,.htool):active{background:var(--wash);} /* licznik jak w nagłówku (.htool .cnt), przy prawym górnym rogu ikony */ .bn .cnt{position:absolute;top:5px;left:calc(50% + 5px);background:var(--red-fill);color:var(--on-fill);font-size:var(--fs-2xs);font-weight:700; min-width:17px;height:17px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;padding:0 4px;} .bn .cnt:empty{display:none;} /* Koszyk jako wezwanie do działania (etap 4, Szymon: „daj koszyk z czerwonym tłem żeby był call to action jak w dużym sklepie (bez tła pusty, z tłem czerwony)”): te same tokeny co koszyk-CTA w nagłówku desktopu (pkieu-v3.css .cart-cta — --red-fill, --on-fill, --r; ciemniejszy --red-fill-deep przy naciśnięciu / otwartym mini-koszyku), licznik odwrócony jak tam (biały z czerwoną cyfrą). .has-items: serwer przy wczytaniu, pkieu-v3.js pkt 5d po AJAX-owym dodaniu / usunięciu. Blok wpisany w komórkę paska (6 px od krawędzi paska), kreska aktywnej sekcji zostaje przy górnej krawędzi paska. */ .bnav .bn.cart-cta.has-items{width:calc(100% - 8px);height:calc(var(--bnav-h) - 12px);margin:6px 4px;border-radius:var(--r); background:var(--red-fill);color:var(--on-fill);} .bnav .bn.cart-cta.has-items .ico{stroke:var(--on-fill);} .bnav .bn.cart-cta.has-items .cnt{top:-1px;background:var(--on-fill);color:var(--red-fill);} .bnav .bn.cart-cta.has-items:is(:active,[aria-expanded="true"]){background:var(--red-fill-deep);} .bnav .bn.cart-cta.has-items.on::before{top:-7px;} /* klawiatura ekranowa otwarta (fokus w polu) — pasek schodzi, żeby nie wisiał nad klawiaturą (pkieu-bnav.js) */ body.bnav-kb .bnav{transform:translateY(110%);} /* treść i stopka kończą się nad paskiem */ .master-wrapper-page.has-bnav{padding-bottom:var(--bnav-off);} .master-wrapper-page.has-bnav.has-sbuy{padding-bottom:calc(76px + var(--bnav-off));} /* paski przyklejone do dołu — nad paskiem dolnym (safe-area bierze pasek) */ .has-bnav .sbuy,body:has(.bnav) .pki-cart .pc-bar:not([hidden]){bottom:var(--bnav-off);padding-bottom:10px;} body:has(.bnav) .pki-toasts{bottom:calc(var(--sp-4) + var(--bnav-off));} /* ---- nagłówek: logo + wyszukiwarka w jednym rzędzie; narzędzia (waluta, motyw, konto, lubisz, koszyk) są w pasku ---- etap 3 (Szymon: „popraw wyszukiwarkę”): pole i przycisk 48 px (--h-lg, jak KATEGORIE pod spodem), od dołu pola do paska menu 16 px (15 + linia 1 px nagłówka), między obszarem kliknięcia logo (a.logo, narożniki w środku pudełka) a polem 16 px */ .has-bnav .hdr .hdr-tools{display:none;} .has-bnav .hdr .wrap{grid-template-columns:auto minmax(0,1fr);column-gap:16px;padding-top:12px;padding-bottom:15px;} .has-bnav .hdr .search{grid-column:2;grid-row:1;} .has-bnav .hdr .search .fld,.has-bnav .hdr .search .btn{height:var(--h-lg);} .has-bnav .hdr .search .btn{flex:none;width:var(--h-lg);padding:0;justify-content:center;} /* ---- przypięty górny pasek (scroll w górę): logo · burger Kategorii · wyszukiwarka (etap 4, Szymon: „może logo zamienić miejscami z burgerem?” — kolejność z DOM Header.cshtml; pkieu-v3.css stawia burger pierwszy order:-1, tu z powrotem 0) ---- burger = .katbtn paska z Header.cshtml (ten sam [data-mega] i szuflada co czerwony KATEGORIE ▾, aria-label „Kategorie”) — etap 3 (Szymon: „może jako sam burger?”): na telefonie zawsze sama ikona (bez „Kategorie” i ▾), cel dotyku 44×44; pole wyszukiwarki tej samej wysokości. Narzędzia nagłówka — w pasku dolnym. */ .has-bnav .sticky .hdr-tools{display:none;} .has-bnav .sticky .wrap{flex-wrap:nowrap;gap:12px;} .has-bnav .sticky .katbtn{order:0;width:44px;height:44px;padding:0;justify-content:center;} .has-bnav .sticky .katbtn .kt,.has-bnav .sticky .katbtn .car-d{display:none;} .has-bnav .sticky .search{display:flex;order:0;flex:1 1 auto;padding-bottom:0;} .has-bnav .sticky .search .btn{display:none;} .has-bnav .sticky .search .fld{height:44px;border-right:1px solid var(--line2);border-radius:var(--r);} } @media (max-width:860px) and (prefers-reduced-motion:reduce){.bnav{transition:none;}} @media (forced-colors:active){.bn.on::before{background:Highlight;}} :root[data-contrast="more"] .bnav{border-top:2px solid var(--hc-fg);box-shadow:none;}