/** * PhoenixB2B — PANEL V3.13 (v2.10.6) — FINALNA WARSTWA APP-SHELLA. * ====================================================================== * Jedna, świadoma warstwa domykająca TRZY rzeczy z briefu v2.10.6, których * NIE dotyczy listing (kafelki/quick-view są w pb2b-listing.css): * * A. HEADER zawsze najwyższą warstwą treści (nic go nie przykrywa poza * celowymi overlayami: drawer menu / szuflada filtrów / quick-view). * G. MENU BOCZNE: hero na górze (stałe) → nawigacja (rośnie i scrolluje, * widoczny pasek) → footer z brandem (bez wersji) i małym „Wyloguj się" * na samym dole. Zero martwego pola / pustych przerw. * I. UKRYCIE zewnętrznej strzałki „do góry" / floatów motywu — DOMKNIĘCIE * listy z panel-v3-10 o brakujące selektory (gate: body.phoenix-b2b-app-page). * * Ładowana JAKO OSTATNIA z łańcucha panelu (po panel-v3-12), PRZED * pb2b-listing.css (która zależy teraz od tej warstwy) → deterministyczna * kaskada, koniec „loterii" z-indexów. Zakres ściśle `.phoenix-b2b-panel` * (poza ukryciem floatów, gateowanym na body app-page). Kolory z tokenów. * * DLACZEGO TA WARSTWA, A NIE EDYCJA panel-v3.css: * panel-v3.css (256 KB) + 12 nakładek to żywy, przetestowany kod. Jedna * mała, opisana warstwa-domknięcie jest bezpieczniejsza i łatwiejsza do * przejrzenia/rollbacku niż chirurgia w środku wielkiego pliku. */ /* ====================================================================== * A) HEADER — NAJWYŻSZA WARSTWA TREŚCI * ---------------------------------------------------------------------- * PRZYCZYNA BUGU (z kodu): w shop.css `.pb2b-shop-toolbar` na mobile ma * `position:sticky; top:0; z-index:50`, a header (panel-v3-3) `z-index:30`. * Sticky toolbar (50) > header (30) i przy top:0 NACHODZIŁ na header * (zgłaszane „treść nachodzi pod/na header"; sprzyjało też mis-tapom). * * ROZWIĄZANIE (deterministyczne, bez psucia drawerów): * • header → z-index 50 (nad CAŁĄ treścią i sticky toolbarem), * • drawer sidebara (60) / backdrop (55) / szuflada filtrów (9998/9999) / * quick-view (100050) zostają WYŻEJ — to celowe overlaye z tłem, * więc menu i modal nadal otwierają się NAD headerem (poprawnie), * • sticky toolbar sklepu W PANELU przyklejamy POD header (offset = wys. * headera) i obniżamy mu z-index < headera → nigdy go nie zasłoni. * Header jest `position:sticky` (zajmuje slot we flow) → treść naturalnie * zaczyna się pod nim; nie dodajemy padding-top (nie tworzymy „martwego * pola"). Tło/koszyk/badge/dropdown headera bez zmian (overflow:visible z v3-3). * ====================================================================== */ .phoenix-b2b-panel .pb2b-topbar, .phoenix-b2b-panel .pb2b-app-header { z-index: 50 !important; } /* Sticky pasek narzędzi sklepu — TYLKO w panelu — pod headerem, nie nad nim. (Standalone sklep B2B żyje pod headerem MOTYWU → tam reguły shop.css zostają nietknięte; ten override jest scoped do `.phoenix-b2b-panel`.) v2.10.7: jawnie wymuszamy position:sticky (nie polegamy na shop.css), offset = wysokość headera panelu, z-index 30 (< header 50, > listing), solidne tło z tokenów (light/dark) + delikatny obrys i zaokrąglenie, żeby pasek był estetyczny i NIE prześwitywały pod nim produkty. */ @media (max-width: 900px) { .phoenix-b2b-panel .pb2b-shop-toolbar { position: sticky !important; top: calc(var(--pb2b-header-h, 72px) + var(--pb2b-safe-top, 0px)) !important; z-index: 30 !important; background: var(--pb2b-bg, var(--s-bg)) !important; padding: 10px 12px !important; margin: 0 0 14px !important; border: 1px solid var(--pb2b-border, var(--s-border)) !important; border-radius: 14px !important; box-shadow: var(--pb2b-shadow-sm, 0 1px 2px rgba(0,0,0,.12)) !important; } } /* PC: w panelu też przyklejamy toolbar pod header (estetyczny sticky), żeby przy długim listingu filtry/sortowanie/przełącznik były zawsze pod ręką. Header (z-index 50) zawsze nad nim; produkty mają offset z flow. */ @media (min-width: 901px) { .phoenix-b2b-panel .pb2b-shop-toolbar { position: sticky; top: calc(var(--pb2b-header-h, 72px) + 12px); z-index: 30; background: var(--pb2b-bg, var(--s-bg)); padding: 10px 12px; border: 1px solid var(--pb2b-border, var(--s-border)); border-radius: 14px; } /* Sidebar filtrów (desktop) nie wsuwa się pod header przy scrollu. */ .phoenix-b2b-panel .pb2b-shop .pb2b-shop-filters { position: sticky; top: calc(var(--pb2b-header-h, 72px) + 16px); } } /* Bezpiecznik: prawa strona headera może się skurczyć (koszyk/badge), żeby header NIGDY nie wywołał poziomego scrolla. Bez overflow-clip (dropdown konta i badge koszyka muszą zostać widoczne — overflow:visible z v3-3). */ .phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-right { min-width: 0; } .phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-title { min-width: 0; } /* ====================================================================== * G) MENU BOCZNE — UKŁAD KOLUMNOWY: HERO (stałe) · NAV (scroll) · FOOTER (dół) * ---------------------------------------------------------------------- * Brief: „więcej logicznie widocznych pozycji przy przewijaniu, brak * martwego pola i dziwnych pustych przerw, widoczny pasek przewijania". * Robimy z sidebara prawdziwą kolumnę flex: hero u góry (nie scrolluje), * NAWIGACJA rośnie i ma własny scroll (z paskiem), footer (brand bez wersji * + mały „Wyloguj się") przyklejony do DOŁU. Dzięki temu nie ma pustej * przerwy pod listą, a footer nie ucieka w środek ekranu. * ====================================================================== */ .phoenix-b2b-panel .pb2b-sidebar { gap: 10px; /* mniej „powietrza" między blokami menu */ overflow: hidden; /* scroll przejmuje .pb2b-nav-grouped, nie cały sidebar */ } .phoenix-b2b-panel .pb2b-sidebar-topbar, .phoenix-b2b-panel .pb2b-side-account-hero { flex: 0 0 auto; } /* NAWIGACJA = jedyny obszar scrollowany (reszta stała). */ .phoenix-b2b-panel .pb2b-nav-grouped { flex: 1 1 auto; min-height: 0; /* pozwala dziecku flex skurczyć się i scrollować */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pb2b-primary) 70%, transparent) transparent; } .phoenix-b2b-panel .pb2b-nav-grouped::-webkit-scrollbar { width: 9px; } .phoenix-b2b-panel .pb2b-nav-grouped::-webkit-scrollbar-track { background: transparent; margin: 4px 0; } .phoenix-b2b-panel .pb2b-nav-grouped::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pb2b-primary) 55%, transparent); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; min-height: 40px; } .phoenix-b2b-panel .pb2b-nav-grouped:hover::-webkit-scrollbar-thumb { background: var(--pb2b-primary); background-clip: padding-box; } /* Gęstszy, ale czytelny rytm pozycji → więcej widać na jednym ekranie. Separator grup zostaje (czytelność), tylko delikatnie ściśnięty. */ .phoenix-b2b-panel .pb2b-nav-group + .pb2b-nav-group { margin-top: 9px; padding-top: 9px; } .phoenix-b2b-panel .pb2b-nav-group-title { padding: 2px 10px 5px; } .phoenix-b2b-panel .pb2b-nav-item { padding: 8px 11px; margin: 1px 0; } /* FOOTER — przyklejony do dołu (poza obszarem scrolla nawigacji). */ .phoenix-b2b-panel .pb2b-sidebar-footer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pb2b-border); } /* Brand — mały, wyciszony, wyśrodkowany, BEZ wersji i BEZ własnego separatora (separator jest teraz na całym footerze). */ .phoenix-b2b-panel .pb2b-sidebar-footer .pb2b-sidebar-foot-brand { margin: 0; padding: 0; border: 0; display: flex; align-items: center; justify-content: center; } .phoenix-b2b-panel .pb2b-sidebar-footer .pb2b-sidebar-foot-brand-name { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pb2b-text-dim); } /* „Wyloguj się" — MNIEJSZY przycisk NA SAMYM DOLE menu (ton „danger" subtelny). */ .phoenix-b2b-panel .pb2b-sidebar-logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text-muted); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .phoenix-b2b-panel .pb2b-sidebar-logout:hover { background: var(--pb2b-danger-soft); border-color: color-mix(in srgb, var(--pb2b-danger) 42%, var(--pb2b-border)); color: var(--pb2b-danger-ink); } .phoenix-b2b-panel .pb2b-sidebar-logout:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); } .phoenix-b2b-panel .pb2b-sidebar-logout-ico { width: 17px; height: 17px; flex: 0 0 17px; display: inline-flex; } .phoenix-b2b-panel .pb2b-sidebar-logout-ico svg { width: 17px; height: 17px; display: block; stroke: currentColor; } /* Hero konta — pełna szerokość menu z normalnym paddingiem (estetyczna karta, nie losowy mały box). Szczegóły wizualne ma panel-v3-7; tu tylko gwarancja szerokości i braku rozjazdu na wąskim drawerze. */ .phoenix-b2b-panel .pb2b-side-account-hero { width: auto; max-width: 100%; box-sizing: border-box; } /* ====================================================================== * I) ZEWNĘTRZNA STRZAŁKA „DO GÓRY" / FLOATY MOTYWU — DOMKNIĘCIE * ---------------------------------------------------------------------- * panel-v3-10 chowa już większość wariantów (Astra/Ocean/GP/Kadence/Blocksy/ * Flatsome/Avada/Divi/WoodMart). Tu dorzucamy brakujące, popularne selektory * (m.in. „niebieska strzałka" generycznych motywów), wciąż gateowane na * `body.phoenix-b2b-app-page` → działa WYŁĄCZNIE na ekranach panelu, nigdy na * publicznym sklepie (tam header/footer motywu zostają nietknięte). * Selektory panelu (bottom-nav, PWA prompt) NIE pasują do tych wzorców. * ====================================================================== */ body.phoenix-b2b-app-page #site-scroll-top, body.phoenix-b2b-app-page .site-scroll-top, body.phoenix-b2b-app-page .go-top, body.phoenix-b2b-app-page .gotop, body.phoenix-b2b-app-page #gotop, body.phoenix-b2b-app-page .scroll-up, body.phoenix-b2b-app-page .scroll-up-btn, body.phoenix-b2b-app-page .scrollup-button, body.phoenix-b2b-app-page .top-link, body.phoenix-b2b-app-page #top-link, body.phoenix-b2b-app-page .totop, body.phoenix-b2b-app-page #totop-btn, body.phoenix-b2b-app-page .page-scroll-up, body.phoenix-b2b-app-page .scroll-to-top-button, body.phoenix-b2b-app-page .wpex-vc-scroll-top, body.phoenix-b2b-app-page #scroll-up, body.phoenix-b2b-app-page [class*="scroll-up"], body.phoenix-b2b-app-page [class*="scrollup"], body.phoenix-b2b-app-page [class*="go-top"], body.phoenix-b2b-app-page [class*="to-top"], body.phoenix-b2b-app-page [id*="scrollup"], body.phoenix-b2b-app-page [id*="scroll-up"], body.phoenix-b2b-app-page [id*="totop"], body.phoenix-b2b-app-page [aria-label="Scroll to top" i], body.phoenix-b2b-app-page [aria-label="Back to top" i], body.phoenix-b2b-app-page [aria-label="Scroll back to top" i], body.phoenix-b2b-app-page [aria-label="Do góry" i], body.phoenix-b2b-app-page [aria-label="Przewiń do góry" i], body.phoenix-b2b-app-page [aria-label="Na górę" i], /* dodatkowe motywy / warianty (WoodMart, BeTheme, X|Pro, Salient, generyczne) */ body.phoenix-b2b-app-page .woodmart-scroll-top, body.phoenix-b2b-app-page .mfn-back-top, body.phoenix-b2b-app-page .x-to-top, body.phoenix-b2b-app-page #scrollUp, body.phoenix-b2b-app-page [class*="totop"], body.phoenix-b2b-app-page [class*="back-top"], body.phoenix-b2b-app-page [class*="topbutton"], body.phoenix-b2b-app-page [id*="back-top"], body.phoenix-b2b-app-page [title="Scroll to top" i], body.phoenix-b2b-app-page [title="Back to top" i], body.phoenix-b2b-app-page [title="Do góry" i] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }