/* v2.9.3 PANEL V3.3 APP SHELL FINAL */
/**
 * PhoenixB2B / SPJTRADE B2B — PANEL KLIENTA V3.3 — APP SHELL FINAL.
 *
 * Jedyna, finalna warstwa app-shella panelu klienta. Ładowana JAKO OSTATNIA,
 * PO panel-v3.css i panel-v3-1.css → przy równej specyficzności wygrywa w
 * kaskadzie (bez wojny !important). Zakres ŚCIŚLE `.phoenix-b2b-panel`.
 * Wszystkie kolory/tła/obramowania pochodzą z tokenów (panel-v3-tokens.css),
 * więc light i dark działają „za darmo".
 *
 * Co naprawia (zgodnie z briefem 2.9.3):
 *   CZĘŚĆ 1  Header mobile od nowa — logiczna wysokość, prawdziwy safe-area-top,
 *            zero nachodzenia na status bar telefonu, brak poziomego scrolla,
 *            kolejność prawej strony: motyw → powiadomienia → koszyk.
 *   CZĘŚĆ 2  Koszyk w headerze — mobile compact pill (ikona + badge + kwota),
 *            PC chip „2 poz. · 297,90 zł". Live update przez data-pb2b-cart-*.
 *   CZĘŚĆ 3  Dolna nawigacja (mobile ≤768): fixed bottom + safe-area-bottom,
 *            5 zakładek, aktywna podświetlona, badge koszyk/ulubione, padding
 *            dolny w treści (nie zasłania).
 *   CZĘŚĆ 4  Konto w menu bocznym (box na górze) + widoczny przycisk X.
 *   CZĘŚĆ 5  Light/dark global fix — topbar/karty/przyciski/CTA na tokenach,
 *            zero białego tekstu na jasnym, zero czarnego na ciemnym.
 *   CZĘŚĆ 6  App spacing — 16px po bokach na mobile, content max-width, karty
 *            nie dotykają krawędzi.
 *
 * KLUCZOWA NAPRAWA SAFE-AREA: wcześniejsze warstwy ustawiały na headerze
 * `padding: 0 14px` / `padding: 0 16px` (skrót), co KASOWAŁO padding-top z
 * env(safe-area-inset-top) → header wchodził pod godzinę/status iPhone. Tu
 * ustawiamy WYŁĄCZNIE longhand (padding-top/right/bottom/left), więc skrót z
 * wcześniejszych plików nie ma jak go wyzerować (ta warstwa ładuje się później).
 */

/* =========================================================================
 * 0) TOKENY APP-SHELLA (wysokości pasków). Skalowane w media-queries niżej.
 * ========================================================================= */
.phoenix-b2b-panel {
	--pb2b-header-h:        70px;   /* logiczna wysokość treści headera (mobile)  */
	--pb2b-bottomnav-h:     62px;   /* wysokość treści dolnej nawigacji           */
	--pb2b-safe-top:        env(safe-area-inset-top, 0px);
	--pb2b-safe-bottom:     env(safe-area-inset-bottom, 0px);
	--pb2b-safe-left:       env(safe-area-inset-left, 0px);
	--pb2b-safe-right:      env(safe-area-inset-right, 0px);
}
@media (min-width: 1200px) {
	.phoenix-b2b-panel { --pb2b-header-h: 72px; }
}

/* =========================================================================
 * CZĘŚĆ 1 — HEADER (TOPBAR) OD NOWA
 * Wspólna baza dla mobile/tablet/PC. Tło z tokenów (light/dark spójne),
 * prawdziwy safe-area-top, brak poziomego scrolla, równe wyrównanie.
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-topbar,
.phoenix-b2b-panel .pb2b-app-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: calc(var(--pb2b-header-h) + var(--pb2b-safe-top));
	/* Longhand — nigdy skrót `padding:` (skrót kasował padding-top z safe-area). */
	padding-top: var(--pb2b-safe-top);
	padding-right: max(var(--pb2b-page-x), var(--pb2b-safe-right));
	padding-bottom: 0;
	padding-left: max(var(--pb2b-page-x), var(--pb2b-safe-left));
	background: var(--pb2b-bg-1);
	border-bottom: 1px solid var(--pb2b-border);
	box-shadow: var(--pb2b-shadow-sm);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	backdrop-filter: saturate(150%) blur(10px);
	overflow: visible;       /* dropdown konta nie obcięty; w poziomie chroni body overflow-x */
}

/* Półprzezroczyste tło (z blur) tylko gdy przeglądarka wspiera backdrop-filter. */
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
	.phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-topbar,
	.phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-app-header {
		background: color-mix(in srgb, var(--pb2b-bg-1) 86%, transparent);
	}
	.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-topbar,
	.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-app-header {
		background: color-mix(in srgb, var(--pb2b-bg-1) 82%, transparent);
	}
}

/* Offset pod paskiem admina WP (tylko zwykła przeglądarka — w PWA standalone
 * klasy .admin-bar nie ma, więc te reguły się nie aktywują). */
body.admin-bar .phoenix-b2b-panel .pb2b-topbar,
body.admin-bar .phoenix-b2b-panel .pb2b-app-header { top: 46px; }
@media (min-width: 783px) {
	body.admin-bar .phoenix-b2b-panel .pb2b-topbar,
	body.admin-bar .phoenix-b2b-panel .pb2b-app-header { top: 32px; }
}

/* Lewa strona: menu (burger) + tytuł sekcji (1 linia, ellipsis). */
.phoenix-b2b-panel .pb2b-burger {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 12px;
	background: var(--pb2b-bg-3);
	border: 1px solid var(--pb2b-border);
	color: var(--pb2b-text);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.phoenix-b2b-panel .pb2b-burger:hover { background: var(--pb2b-bg-4); border-color: var(--pb2b-border-strong); }
.phoenix-b2b-panel .pb2b-burger:active { transform: scale(.96); }
.phoenix-b2b-panel .pb2b-burger:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-burger svg { width: 22px; height: 22px; display: block; stroke: currentColor; }

.phoenix-b2b-panel .pb2b-topbar-title {
	flex: 1 1 auto;
	min-width: 0;            /* pozwala ellipsis i chroni przed poziomym scrollem */
}
.phoenix-b2b-panel .pb2b-topbar-h1 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pb2b-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.phoenix-b2b-panel .pb2b-topbar-sub {
	margin: 1px 0 0;
	font-size: 12px;
	color: var(--pb2b-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Prawa strona: stała kolejność źródłowa motyw → powiadomienia → koszyk.
 * `order` to siatka bezpieczeństwa, gdyby kolejność DOM kiedyś się zmieniła. */
.phoenix-b2b-panel .pb2b-topbar-right {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	flex-wrap: nowrap;
}
.phoenix-b2b-panel .pb2b-topbar-right > * { flex: 0 0 auto; }
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-theme-toggle { order: 1; }
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-topbar-bell  { order: 2; }
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-topbar-cart  { order: 3; }
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-account      { order: 4; }
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-chip         { order: 0; }

/* Dzwonek powiadomień — okrągła ikona 40px (równa z resztą prawej strony). */
.phoenix-b2b-panel .pb2b-topbar-bell {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	position: relative;
	background: var(--pb2b-bg-3);
	border: 1px solid var(--pb2b-border);
	color: var(--pb2b-text-soft);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.phoenix-b2b-panel .pb2b-topbar-bell:hover { background: var(--pb2b-bg-4); color: var(--pb2b-text); border-color: var(--pb2b-border-strong); }
.phoenix-b2b-panel .pb2b-topbar-bell:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }

/* Przełącznik motywu (wariant „icon") zostaje natywnym suwakiem (track+knob),
 * NIE wciskamy go w okrągłą ikonę. Tu tylko równe wyrównanie/tap target. */
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-theme-toggle,
.phoenix-b2b-panel .pb2b-topbar .pb2b-theme-toggle {
	flex: 0 0 auto;
	width: auto;
	min-height: 40px;
	padding: 7px 8px;
	align-items: center;
	border-color: transparent;
	background: transparent;
}
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-theme-toggle .pb2b-theme-toggle-text,
.phoenix-b2b-panel .pb2b-topbar .pb2b-theme-toggle .pb2b-theme-toggle-text { display: none; }
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-theme-toggle:hover,
.phoenix-b2b-panel .pb2b-topbar .pb2b-theme-toggle:hover { background: transparent; border-color: transparent; }
.phoenix-b2b-panel .pb2b-topbar-right .pb2b-theme-toggle:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); border-radius: 999px; }

.phoenix-b2b-panel .pb2b-topbar-bell svg { width: 19px; height: 19px; }
.phoenix-b2b-panel .pb2b-topbar-bell-dot {
	position: absolute; top: -3px; right: -3px;
	min-width: 17px; height: 17px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--pb2b-danger); color: #fff;
	font-size: 10px; font-weight: 700; line-height: 1;
	border: 2px solid var(--pb2b-bg-1);
	box-sizing: border-box;
}

/* =========================================================================
 * CZĘŚĆ 2 — KOSZYK W HEADERZE (ilość + kwota; live update)
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-topbar-cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--pb2b-bg-3);
	border: 1px solid var(--pb2b-border);
	color: var(--pb2b-text);
	text-decoration: none;
	position: relative;
	transition: background .15s ease, border-color .15s ease;
}
.phoenix-b2b-panel .pb2b-topbar-cart:hover { background: var(--pb2b-bg-4); border-color: var(--pb2b-border-strong); }
.phoenix-b2b-panel .pb2b-topbar-cart:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-topbar-cart.has-items { border-color: color-mix(in srgb, var(--pb2b-primary) 45%, var(--pb2b-border)); }
.phoenix-b2b-panel .pb2b-topbar-cart-ico { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; color: var(--pb2b-primary-2); }
.phoenix-b2b-panel .pb2b-topbar-cart-ico svg { width: 20px; height: 20px; }
.phoenix-b2b-panel .pb2b-topbar-cart-meta { display: flex; flex-direction: column; line-height: 1.12; align-items: flex-start; min-width: 0; }
.phoenix-b2b-panel .pb2b-topbar-cart-count { font-weight: 700; font-size: 13px; color: var(--pb2b-text); white-space: nowrap; }
.phoenix-b2b-panel .pb2b-topbar-cart-total { font-size: 12px; color: var(--pb2b-text-muted); white-space: nowrap; }
.phoenix-b2b-panel .pb2b-topbar-cart-total:empty { display: none; }
.phoenix-b2b-panel .pb2b-topbar-cart-total * { color: inherit; font-size: inherit; }

/* Badge ilości na ikonie (mobile). Chowany gdy koszyk pusty. */
.phoenix-b2b-panel .pb2b-topbar-cart-badge {
	position: absolute;
	top: -5px; left: 24px;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px;
	background: var(--pb2b-primary);
	color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid var(--pb2b-bg-1);
	box-sizing: border-box;
}
.phoenix-b2b-panel .pb2b-topbar-cart.is-empty .pb2b-topbar-cart-badge { display: none; }

/* PC / tablet (≥768): chip „N poz. · kwota" w jednej linii, bez badge na ikonie. */
@media (min-width: 768px) {
	.phoenix-b2b-panel .pb2b-topbar-cart-meta { flex-direction: row; align-items: baseline; gap: 5px; }
	.phoenix-b2b-panel .pb2b-topbar-cart-count { font-size: 13px; }
	.phoenix-b2b-panel .pb2b-topbar-cart-count::after { content: " poz."; font-weight: 600; }
	.phoenix-b2b-panel .pb2b-topbar-cart-total { font-size: 13px; font-weight: 700; color: var(--pb2b-text); }
	.phoenix-b2b-panel .pb2b-topbar-cart-total::before { content: "·"; margin-right: 5px; color: var(--pb2b-text-dim); font-weight: 700; }
	.phoenix-b2b-panel .pb2b-topbar-cart-badge { display: none; }
}

/* Mobile/tablet ≤1199: ikona + badge(ilość) + kompaktowa kwota obok. */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-topbar-cart { padding: 6px 10px; gap: 6px; }
	.phoenix-b2b-panel .pb2b-topbar-cart-meta { display: flex; }
	.phoenix-b2b-panel .pb2b-topbar-cart-count { display: none; }       /* ilość pokazuje badge */
	.phoenix-b2b-panel .pb2b-topbar-cart-total { display: block; font-size: 12px; font-weight: 700; color: var(--pb2b-text); }
	.phoenix-b2b-panel .pb2b-topbar-cart-badge { display: inline-flex; }
}

/* Bardzo wąsko (≤360): zostaw ikonę + badge; kwota chowana, by nie napierać na dzwonek. */
@media (max-width: 360px) {
	.phoenix-b2b-panel .pb2b-topbar-cart { padding: 0; width: 40px; height: 40px; justify-content: center; }
	.phoenix-b2b-panel .pb2b-topbar-cart-total { display: none; }
	.phoenix-b2b-panel .pb2b-topbar-cart-badge { left: auto; right: -4px; top: -4px; }
	.phoenix-b2b-panel .pb2b-topbar-right { gap: 8px; }
}

/* =========================================================================
 * MOBILE/TABLET ≤1199 — czyszczenie headera: profil/avatar/B2B/dropdown precz.
 * Konto żyje w menu bocznym. Burger zawsze widoczny.
 * ========================================================================= */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-burger { display: inline-flex; }
	/* Profil/avatar/B2B/dropdown NIE w headerze. */
	.phoenix-b2b-panel .pb2b-account,
	.phoenix-b2b-panel .pb2b-user-chip,
	.phoenix-b2b-panel .pb2b-user-name,
	.phoenix-b2b-panel .pb2b-topbar-right .pb2b-account-toggle,
	.phoenix-b2b-panel .pb2b-topbar-right .pb2b-user-avatar { display: none; }
	/* Chip grupy/rabatu również ukryty na wąsko (jest też pb2b-hide-mobile). */
	.phoenix-b2b-panel .pb2b-topbar-right .pb2b-chip { display: none; }
}

/* PC ≥1200 — profil „Moje konto" widoczny w topbarze (jedyny avatar). */
@media (min-width: 1200px) {
	.phoenix-b2b-panel .pb2b-account { display: inline-flex; }
	.phoenix-b2b-panel .pb2b-burger { display: none; }
}

/* =========================================================================
 * CZĘŚĆ 3 — DOLNA NAWIGACJA (mobile). 5 zakładek, fixed bottom + safe-area.
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-bottom-nav {
	display: none;          /* domyślnie ukryta — pokazywana tylko na mobile niżej */
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 30;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: stretch;
	gap: 2px;
	padding: 6px max(8px, var(--pb2b-safe-left)) calc(6px + var(--pb2b-safe-bottom)) max(8px, var(--pb2b-safe-right));
	background: var(--pb2b-bg-1);
	border-top: 1px solid var(--pb2b-border);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
	.phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-bottom-nav { background: color-mix(in srgb, var(--pb2b-bg-1) 88%, transparent); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); }
	.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-bottom-nav { background: color-mix(in srgb, var(--pb2b-bg-1) 84%, transparent); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); }
}

.phoenix-b2b-panel .pb2b-bottom-nav-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: var(--pb2b-bottomnav-h);
	padding: 6px 4px;
	border-radius: 14px;
	text-decoration: none;
	color: var(--pb2b-text-muted);
	-webkit-tap-highlight-color: transparent;
	transition: color .14s ease, background .14s ease, transform .08s ease;
}
.phoenix-b2b-panel .pb2b-bottom-nav-item:active { transform: scale(.95); }
.phoenix-b2b-panel .pb2b-bottom-nav-item:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-bottom-nav-ico { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.phoenix-b2b-panel .pb2b-bottom-nav-ico svg { width: 23px; height: 23px; stroke: currentColor; }
.phoenix-b2b-panel .pb2b-bottom-nav-label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .1px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Aktywna zakładka — podświetlenie marką, czytelne w light i dark. */
.phoenix-b2b-panel .pb2b-bottom-nav-item.is-active {
	color: var(--pb2b-primary-strong);
	background: var(--pb2b-primary-soft);
}
.phoenix-b2b-panel .pb2b-bottom-nav-item.is-active .pb2b-bottom-nav-ico { color: var(--pb2b-primary); }

/* Badge (ilość) przy koszyku/ulubionych. */
.phoenix-b2b-panel .pb2b-bottom-nav-badge {
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(6px);
	min-width: 17px; height: 17px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--pb2b-primary);
	color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
	border: 2px solid var(--pb2b-bg-1);
	box-sizing: border-box;
}
.phoenix-b2b-panel .pb2b-bottom-nav-badge-alert { background: var(--pb2b-danger); }
/* Koszyk w bottom-nav używa data-pb2b-topbar-cart → klasa is-empty chowa badge. */
.phoenix-b2b-panel .pb2b-bottom-nav-item.is-empty .pb2b-bottom-nav-badge { display: none; }

/* Pokazuj dolną nawigację tylko na mobile i rezerwuj miejsce, by NIC nie chowało
 * się pod paskiem. Rezerwę dajemy na kolumnie .pb2b-main (pełna kolumna treści +
 * stopka), żeby również stopka panelu kończyła się NAD dolną nawigacją. */
@media (max-width: 768px) {
	.phoenix-b2b-panel .pb2b-bottom-nav { display: grid; }
	.phoenix-b2b-panel .pb2b-main {
		padding-bottom: calc(var(--pb2b-bottomnav-h) + var(--pb2b-safe-bottom) + 14px);
	}
	/* Sticky podsumowanie koszyka siada NAD dolną nawigacją (nie pod nią). */
	.phoenix-b2b-panel .pb2b-cart-summary-inner { bottom: calc(var(--pb2b-bottomnav-h) + var(--pb2b-safe-bottom) + 8px); }
	/* Toasty również nad dolną nawigacją. */
	.pb2b-app-toast-wrap { bottom: calc(var(--pb2b-bottomnav-h) + var(--pb2b-safe-bottom) + 12px) !important; }
}
@media (min-width: 769px) {
	.phoenix-b2b-panel .pb2b-bottom-nav { display: none; }
}

/* =========================================================================
 * CZĘŚĆ 4 — MENU BOCZNE / KONTO + PRZYCISK X
 * (Box konta renderuje client-panel.php; tu pewność widoczności i light/dark.)
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.phoenix-b2b-panel .pb2b-sidebar-close {
	flex: 0 0 42px;
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 12px;
	background: var(--pb2b-bg-3);
	border: 1px solid var(--pb2b-border);
	color: var(--pb2b-text);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.phoenix-b2b-panel .pb2b-sidebar-close:hover { background: var(--pb2b-bg-4); border-color: var(--pb2b-border-strong); }
.phoenix-b2b-panel .pb2b-sidebar-close:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-sidebar-close svg { width: 20px; height: 20px; display: block; stroke: currentColor; }
/* Fallback gdy SVG nie wyrenderuje się — pokaż „×", by przycisk nie był pustym boxem. */
.phoenix-b2b-panel .pb2b-sidebar-close:empty::before { content: "\00d7"; font-size: 24px; line-height: 1; color: currentColor; }
/* X tylko w trybie drawer (mobile/tablet); na PC sidebar stały → X zbędny. */
@media (min-width: 1200px) { .phoenix-b2b-panel .pb2b-sidebar-close { display: none; } }
@media (max-width: 1199px) { .phoenix-b2b-panel .pb2b-sidebar-close { display: inline-flex; } }

/* Box konta na górze sidebara (avatar + nazwa + status + szybkie akcje). */
.phoenix-b2b-panel .pb2b-side-account {
	margin: 0 12px 8px;
	padding: 14px;
	background: var(--pb2b-bg-3);
	border: 1px solid var(--pb2b-border);
	border-radius: var(--pb2b-radius);
}
.phoenix-b2b-panel .pb2b-side-account-top { display: flex; gap: 12px; align-items: center; }
.phoenix-b2b-panel .pb2b-side-account-avatar {
	width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pb2b-accent-grad); color: var(--pb2b-primary-contrast);
	font-weight: 700; font-size: 16px; line-height: 1; text-transform: uppercase;
}
.phoenix-b2b-panel .pb2b-side-account-id { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.phoenix-b2b-panel .pb2b-side-account-name { font-size: 14px; font-weight: 700; color: var(--pb2b-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phoenix-b2b-panel .pb2b-side-account-company { font-size: 12px; color: var(--pb2b-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phoenix-b2b-panel .pb2b-side-account-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--pb2b-success-ink); margin-top: 2px; }
.phoenix-b2b-panel .pb2b-side-account-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pb2b-success); box-shadow: 0 0 0 3px var(--pb2b-success-soft); flex: 0 0 7px; }
.phoenix-b2b-panel .pb2b-side-account-actions { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-side-account-link {
	display: flex; align-items: center; gap: 10px; padding: 9px 8px;
	border-radius: var(--pb2b-radius-sm); color: var(--pb2b-text-soft);
	text-decoration: none; font-size: 13px; font-weight: 600;
	transition: background .12s ease, color .12s ease;
}
.phoenix-b2b-panel .pb2b-side-account-link:hover { background: var(--pb2b-bg-4); color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-side-account-link:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-side-account-link-ico { width: 16px; height: 16px; flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--pb2b-text-muted); }
.phoenix-b2b-panel .pb2b-side-account-link-ico svg { width: 16px; height: 16px; }
.phoenix-b2b-panel .pb2b-side-account-link:hover .pb2b-side-account-link-ico { color: var(--pb2b-primary); }
.phoenix-b2b-panel .pb2b-side-account-logout { color: var(--pb2b-danger); }
.phoenix-b2b-panel .pb2b-side-account-logout .pb2b-side-account-link-ico { color: var(--pb2b-danger); }
.phoenix-b2b-panel .pb2b-side-account-logout:hover { background: var(--pb2b-danger-soft); color: var(--pb2b-danger); }

/* =========================================================================
 * CZĘŚĆ 5 — LIGHT / DARK GLOBAL FIX (tokeny wszędzie; czytelne CTA)
 * ========================================================================= */

/* Karty produktów — remap zmiennych --card-* na tokeny panelu (light+dark). */
.phoenix-b2b-panel .pb2b-card-grid,
.phoenix-b2b-panel .pb2b-card {
	--card-bg: var(--pb2b-bg-2);
	--card-border: var(--pb2b-border);
	--card-media-bg: var(--pb2b-bg-3);
	--card-ink: var(--pb2b-text);
	--card-muted: var(--pb2b-text-muted);
	--card-primary: var(--pb2b-primary);
	--card-primary-2: var(--pb2b-primary-hover);
	--card-shadow: var(--pb2b-shadow-sm);
	--card-shadow-hover: var(--pb2b-shadow);
}
.phoenix-b2b-panel .pb2b-card { color: var(--pb2b-text); background: var(--pb2b-bg-2); border-color: var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-card-title,
.phoenix-b2b-panel .pb2b-card-name { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-card-sku,
.phoenix-b2b-panel .pb2b-card-meta { color: var(--pb2b-text-muted); }

/* CTA na karcie — gwarantowany kontrast w obu motywach. */
.phoenix-b2b-panel .pb2b-card-btn-cart { background: var(--pb2b-accent-grad); color: var(--pb2b-primary-contrast); border-color: transparent; }
.phoenix-b2b-panel .pb2b-card-btn-cart:hover,
.phoenix-b2b-panel .pb2b-card-btn-cart:focus { color: var(--pb2b-primary-contrast); }
.phoenix-b2b-panel .pb2b-card-btn-view { background: var(--pb2b-bg-2); color: var(--pb2b-text); border-color: var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-card-btn-view:hover { background: var(--pb2b-bg-3); color: var(--pb2b-primary-strong); border-color: var(--pb2b-primary); }
.phoenix-b2b-panel .pb2b-card-btn-options { background: var(--pb2b-primary-soft); color: var(--pb2b-primary-strong); border-color: var(--pb2b-primary-soft); }
.phoenix-b2b-panel .pb2b-card-btn-options:hover { background: var(--pb2b-primary); color: var(--pb2b-primary-contrast); border-color: var(--pb2b-primary); }
.phoenix-b2b-panel .pb2b-card-btn-qv { background: var(--pb2b-bg-2); color: var(--pb2b-text); border-color: var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-card-btn-qv:hover { background: var(--pb2b-bg-3); color: var(--pb2b-primary-strong); border-color: var(--pb2b-primary); }
.phoenix-b2b-panel .pb2b-card-btn-login { background: var(--pb2b-bg-2); color: var(--pb2b-primary-strong); border-color: var(--pb2b-primary); }
.phoenix-b2b-panel .pb2b-card-btn-login:hover { background: var(--pb2b-primary); color: var(--pb2b-primary-contrast); border-color: var(--pb2b-primary); }
/* „Zapytaj o cenę" / „Dostępne po zalogowaniu" — czytelny pill, nie znika. */
.phoenix-b2b-panel .pb2b-card-price-na,
.phoenix-b2b-panel .pb2b-card-price-locked { color: var(--pb2b-primary-strong); background: var(--pb2b-primary-soft); border-color: var(--pb2b-primary-soft); }

/* Osadzony Sklep B2B ([phoenix_b2b_shop]) — jego własne przyciski na tokenach. */
.phoenix-b2b-panel .pb2b-shop-card { background: var(--pb2b-bg-2); border-color: var(--pb2b-border); color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-shop-card-title,
.phoenix-b2b-panel .pb2b-shop-card-title a { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-shop-card-desc { color: var(--pb2b-text-muted); }
.phoenix-b2b-panel .pb2b-shop-badge { background: var(--pb2b-bg-3); color: var(--pb2b-text-muted); border: 1px solid var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-shop-btn { border-radius: var(--pb2b-radius-sm); font-weight: 600; }
.phoenix-b2b-panel .pb2b-shop-btn-primary { background: var(--pb2b-accent-grad); color: var(--pb2b-primary-contrast); border-color: transparent; }
.phoenix-b2b-panel .pb2b-shop-btn-primary:hover,
.phoenix-b2b-panel .pb2b-shop-btn-primary:focus { color: var(--pb2b-primary-contrast); }
.phoenix-b2b-panel .pb2b-shop-btn-ghost { background: var(--pb2b-bg-2); color: var(--pb2b-text); border: 1px solid var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-shop-btn-ghost:hover { background: var(--pb2b-bg-3); color: var(--pb2b-primary-strong); border-color: var(--pb2b-primary); }

/* Przyciski aplikacji panelu — kontrast na fiolecie + spójne warianty. */
.phoenix-b2b-panel .pb2b-app-button-primary { background: var(--pb2b-accent-grad); color: var(--pb2b-primary-contrast); border-color: transparent; }
.phoenix-b2b-panel .pb2b-app-button-primary:hover,
.phoenix-b2b-panel .pb2b-app-button-primary:focus { color: var(--pb2b-primary-contrast); }
.phoenix-b2b-panel .pb2b-app-button-ghost,
.phoenix-b2b-panel .pb2b-app-button-link { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-app-button-ghost { background: var(--pb2b-bg-2); border: 1px solid var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-app-button-ghost:hover { background: var(--pb2b-bg-3); color: var(--pb2b-text); border-color: var(--pb2b-border-strong); }
.phoenix-b2b-panel .pb2b-app-button-link:hover { color: var(--pb2b-primary-strong); }
.phoenix-b2b-panel .pb2b-app-badge { background: var(--pb2b-primary-soft); color: var(--pb2b-primary-strong); }

/* Topbar w light: badge dzwonka i koszyka mają ramkę w kolorze paska. */
.phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-topbar-bell-dot,
.phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-topbar-cart-badge,
.phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-bottom-nav-badge { border-color: var(--pb2b-bg-1); }

/* =========================================================================
 * CZĘŚĆ 6 — APP SPACING (content max-width, 16px po bokach, karty od krawędzi)
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-content,
.phoenix-b2b-panel .pb2b-app-content {
	width: 100%;
	max-width: var(--pb2b-content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: max(var(--pb2b-page-x), var(--pb2b-safe-left));
	padding-right: max(var(--pb2b-page-x), var(--pb2b-safe-right));
	padding-top: var(--pb2b-section-gap);
	display: flex;
	flex-direction: column;
	gap: var(--pb2b-section-gap);
	overflow-x: clip;
}
/* Karty „flush" (osadzony sklep) nie dotykają krawędzi na mobile. */
.phoenix-b2b-panel .pb2b-app-card { width: 100%; }

/* Zero poziomego scrolla — twardo, na całym shellu. */
.phoenix-b2b-panel.pb2b-app { overflow-x: clip; max-width: 100vw; }
.phoenix-b2b-panel .pb2b-main { min-width: 0; }
.phoenix-b2b-panel img,
.phoenix-b2b-panel table,
.phoenix-b2b-panel video { max-width: 100%; }

/* =========================================================================
 * Dostępność: szanuj „mniej ruchu".
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.phoenix-b2b-panel .pb2b-burger,
	.phoenix-b2b-panel .pb2b-topbar-cart,
	.phoenix-b2b-panel .pb2b-bottom-nav-item,
	.phoenix-b2b-panel .pb2b-side-account-link,
	.phoenix-b2b-panel .pb2b-sidebar-close,
	.phoenix-b2b-panel .pb2b-topbar-bell { transition: none; }
}