/* =============================================================================
 * PhoenixB2B / SPJTRADE B2B — PANEL V3.9 (v2.9.9)
 * Warstwa FINAL FIX + POLISH. Laduje sie JAKO OSTATNIA (po panel-v3-8) i wygrywa
 * w kaskadzie. Zakres SCISLE `.phoenix-b2b-panel`. Kolory WYLACZNIE z tokenow
 * (panel-v3-tokens.css) -> light/dark dziala automatycznie.
 *
 * NIE rusza logiki: zachowane hooki JS data-pb2b-cart-count / data-pb2b-cart-total
 * / is-empty / has-items / data-section / pb2b-sidebar-open. Zmiany czysto
 * wizualne i ukladowe. Desktop (>=1200) celowo nietkniety poza audytem kontrastu.
 *
 * Spis:
 *   1)  SIDEBAR MOBILE — shell (gutter 0 na bokach, pelna kontrola spacingu).
 *   2)  KRZYZYK (X) — maly, elegancki, w prawym gornym rogu banera konta.
 *   3)  KARTA KONTA — dominujacy baner u GORY menu (pelna szerokosc, premium).
 *   4)  KARTA KONTA — tozsamosc (avatar, imie, firma, status w jednej linii).
 *   5)  KARTA KONTA — kafelki 2x2 + subtelny „Wyloguj sie".
 *   6)  NAWIGACJA — gutter, naglowki grup, aktywny stan, wieksze pole widocznosci.
 *   7)  DOL SIDEBARU — subtelny brand przyklejony do dolu (bez wersji w PHP).
 *   8)  HEADER + KOSZYK MOBILE — BULLETPROOF: badge w rogu (bez `inset`!),
 *       kwota zawsze widoczna, pigulka elastyczna. NAPRAWA NACHODZENIA.
 *   9)  HEADER — ergonomia, odstepy, safe-area, hover/focus.
 *   10) MINI CARTBAR — czysty, czytelny w obu trybach.
 *   11) HERO DASHBOARD — premium hierarchia + CTA.
 *   12) LIGHT/DARK — audyt kontrastu (globalny, z tokenow).
 *   13) PODKRESLENIA / focus — czysto, dostepnie.
 * ========================================================================== */

/* =============================================================================
 * 1) SIDEBAR MOBILE — shell. Gutter boczny = 0 (baner konta ma siegac krawedzi
 *    menu), spacing zarzadzany recznie marginesami. Safe-area gora/dol zostaje.
 *    Nav scrolluje sie wewnetrznie (z v3-8), baner i footer sa „przyklejone".
 * ========================================================================== */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-sidebar {
		padding-left: 0 !important;
		padding-right: 0 !important;
		gap: 0 !important;
		/* UWAGA: NIE zmieniamy position — mobilny sidebar jest `fixed` (drawer)
		   i juz stanowi kontekst pozycjonowania dla absolutnego krzyzyka.
		   Nadpisanie na `relative` wrzucalo sidebar z powrotem do flow i
		   spychalo .pb2b-main poza ekran. */
	}
}

/* =============================================================================
 * 2) KRZYZYK (X) — maly, elegancki, osadzony w prawym gornym rogu banera konta.
 *    Pasek-topbar (pusty po ukryciu brandu) wyjety z ukladu -> zero „oderwanego"
 *    pustego paska nad karta. X plywa w gornej strefie banera.
 * ========================================================================== */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-sidebar-topbar {
		position: absolute !important;
		top: calc(env(safe-area-inset-top, 0px) + 9px) !important;
		right: 12px !important;
		left: auto !important;
		width: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		border: 0 !important;
		z-index: 6 !important;
		justify-content: flex-end !important;
	}
	.phoenix-b2b-panel .pb2b-sidebar-close {
		width: 30px !important; height: 30px !important; flex: 0 0 30px !important;
		padding: 0 !important;
		border-radius: 9px !important;
		background: color-mix(in srgb, var(--pb2b-bg-2) 86%, transparent) !important;
		border: 1px solid var(--pb2b-border) !important;
		color: var(--pb2b-text-muted) !important;
		-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
		box-shadow: var(--pb2b-shadow-sm);
	}
	.phoenix-b2b-panel .pb2b-sidebar-close:hover {
		background: var(--pb2b-bg-3) !important;
		color: var(--pb2b-text-strong) !important;
		border-color: var(--pb2b-border-strong) !important;
	}
	.phoenix-b2b-panel .pb2b-sidebar-close svg { width: 15px !important; height: 15px !important; }
}

/* =============================================================================
 * 3) KARTA KONTA — dominujacy BANER u gory menu. Pelna wewnetrzna szerokosc,
 *    spojny z powierzchnia menu (baza bg-1) + delikatny fiolet u gory = „naglowek
 *    konta", a nie pudelko. Plaski u gory (styka sie z gora menu pod safe-area),
 *    zaokraglony tylko u dolu. Gorny pas miesci krzyzyk; tresc startuje pod nim.
 * ========================================================================== */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-side-account-hero {
		margin: 0 0 12px !important;
		padding: calc(env(safe-area-inset-top, 0px) + 44px) 16px 16px !important;
		background: linear-gradient(168deg,
			color-mix(in srgb, var(--pb2b-primary) 20%, var(--pb2b-bg-1)) 0%,
			color-mix(in srgb, var(--pb2b-primary) 8%, var(--pb2b-bg-1)) 42%,
			var(--pb2b-bg-1) 100%) !important;
		border: 0 !important;
		border-bottom: 1px solid var(--pb2b-border) !important;
		border-radius: 0 0 20px 20px !important;
		box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--pb2b-primary) 50%, transparent) !important;
	}
}

/* =============================================================================
 * 4) KARTA KONTA — tozsamosc: avatar + imie + firma + status (jedna linia).
 * ========================================================================== */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-top {
		gap: 13px !important; align-items: center !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-avatar {
		width: 50px !important; height: 50px !important; flex: 0 0 50px !important;
		font-size: 20px !important;
		box-shadow: 0 8px 18px color-mix(in srgb, var(--pb2b-primary) 40%, transparent) !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-id { gap: 4px !important; min-width: 0 !important; }
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-name {
		font-size: 17px !important; font-weight: 800 !important; line-height: 1.1 !important;
		color: var(--pb2b-text-strong) !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-company {
		font-size: 12px !important; color: var(--pb2b-text-muted) !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-status {
		align-self: flex-start !important;
		max-width: 100% !important; margin-top: 2px !important; padding: 4px 10px !important;
		font-size: 11px !important; font-weight: 700 !important;
		background: color-mix(in srgb, var(--pb2b-success) 16%, var(--pb2b-bg-1)) !important;
		color: var(--pb2b-success-ink) !important;
		white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
	}
}

/* =============================================================================
 * 5) KARTA KONTA — kafelki 2x2 (Dane firmy / Dokumenty / Powiadomienia /
 *    Historia zamowien) + „Wyloguj sie" jako subtelny przycisk na dole.
 * ========================================================================== */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-actions {
		display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important;
		margin-top: 14px !important; padding-top: 14px !important;
		border-top: 1px solid color-mix(in srgb, var(--pb2b-text) 8%, transparent) !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link {
		position: relative !important;
		flex-direction: column !important; align-items: center !important; justify-content: center !important;
		text-align: center !important; gap: 7px !important;
		min-height: 64px !important; padding: 11px 8px !important;
		background: color-mix(in srgb, var(--pb2b-bg-2) 78%, transparent) !important;
		border: 1px solid var(--pb2b-border) !important;
		border-radius: 12px !important;
		color: var(--pb2b-text) !important;
		font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important;
		white-space: normal !important; overflow-wrap: anywhere !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link:hover {
		background: var(--pb2b-bg-2) !important;
		border-color: color-mix(in srgb, var(--pb2b-primary) 42%, var(--pb2b-border)) !important;
		transform: translateY(-1px) !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link-ico { width: 19px !important; height: 19px !important; flex: 0 0 19px !important; color: var(--pb2b-primary) !important; }
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link-ico svg { width: 19px !important; height: 19px !important; }
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link-badge {
		top: 6px !important; right: 6px !important; left: auto !important;
		min-width: 17px !important; height: 17px !important; padding: 0 4px !important;
		background: var(--pb2b-danger) !important; color: #fff !important;
		font-size: 10px !important; font-weight: 800 !important;
	}
	/* „Wyloguj sie" — pelna szerokosc, subtelny (nie dominuje karty). */
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-logout {
		grid-column: 1 / -1 !important;
		flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
		min-height: 0 !important; margin-top: 1px !important; padding: 10px 12px !important;
		background: color-mix(in srgb, var(--pb2b-danger) 9%, transparent) !important;
		border: 1px solid color-mix(in srgb, var(--pb2b-danger) 24%, var(--pb2b-border)) !important;
		color: var(--pb2b-danger-ink) !important;
		font-size: 12.5px !important; font-weight: 700 !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-logout:hover {
		background: color-mix(in srgb, var(--pb2b-danger) 16%, transparent) !important;
		border-color: color-mix(in srgb, var(--pb2b-danger) 42%, var(--pb2b-border)) !important;
		transform: none !important;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-logout .pb2b-side-account-link-ico { color: var(--pb2b-danger-ink) !important; }
}

/* =============================================================================
 * 6) NAWIGACJA — gutter 12px, naglowki grup czytelne, aktywny stem wyrazny,
 *    wieksze pole widocznosci. Nav scrolluje sie (flex z v3-8) — tu polish.
 * ========================================================================== */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-nav-grouped {
		padding: 2px 12px 12px !important;
		flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important;
	}
	.phoenix-b2b-panel .pb2b-nav-group + .pb2b-nav-group {
		margin-top: 12px !important; padding-top: 12px !important;
		border-top: 1px solid var(--pb2b-border) !important;
	}
	.phoenix-b2b-panel .pb2b-nav-group-title {
		padding: 0 6px 7px !important; margin: 0 !important;
		font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
		color: var(--pb2b-text-dim) !important;
	}
	.phoenix-b2b-panel .pb2b-nav-item {
		position: relative !important;
		padding: 10px 12px !important; margin: 2px 0 !important; gap: 13px !important;
		border-radius: 11px !important;
		color: var(--pb2b-text-soft) !important;
		font-weight: 600 !important;
	}
	.phoenix-b2b-panel .pb2b-nav-item .pb2b-nav-icon { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; color: var(--pb2b-text-muted) !important; }
	.phoenix-b2b-panel .pb2b-nav-item .pb2b-nav-icon svg { width: 20px !important; height: 20px !important; }
	.phoenix-b2b-panel .pb2b-nav-item .pb2b-nav-label { font-size: 14px !important; }
	.phoenix-b2b-panel .pb2b-nav-item:hover {
		background: color-mix(in srgb, var(--pb2b-text) 5%, transparent) !important;
		color: var(--pb2b-text-strong) !important;
	}
	.phoenix-b2b-panel .pb2b-nav-item:hover .pb2b-nav-icon { color: var(--pb2b-text) !important; }
	/* Aktywny element — wyrazny fioletowy „chip" + lewy pasek. */
	.phoenix-b2b-panel .pb2b-nav-item.is-active {
		background: color-mix(in srgb, var(--pb2b-primary) 14%, transparent) !important;
		color: var(--pb2b-primary-strong) !important;
	}
	.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-nav-item.is-active { color: var(--pb2b-primary-2) !important; }
	.phoenix-b2b-panel .pb2b-nav-item.is-active .pb2b-nav-icon { color: inherit !important; }
	.phoenix-b2b-panel .pb2b-nav-item.is-active::before {
		content: "" !important; position: absolute !important;
		left: 4px !important; top: 50% !important; transform: translateY(-50%) !important;
		width: 3px !important; height: 18px !important; border-radius: 999px !important;
		background: var(--pb2b-primary) !important;
	}
}

/* =============================================================================
 * 7) DOL SIDEBARU — subtelny brand przyklejony do dolu (numer wersji usuniety w PHP).
 * ========================================================================== */
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-sidebar-footer {
		margin-top: auto !important;
		padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
	}
	.phoenix-b2b-panel .pb2b-sidebar-foot-brand {
		margin: 0 !important; padding-top: 10px !important;
		border-top: 1px solid var(--pb2b-border) !important;
		justify-content: center !important;
	}
	.phoenix-b2b-panel .pb2b-sidebar-foot-brand-name {
		font-size: 10px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
		color: var(--pb2b-text-dim) !important;
	}
}

/* =============================================================================
 * 8) HEADER + KOSZYK MOBILE — BULLETPROOF. Naprawa nachodzenia badge/kwoty.
 *    Przyczyna w v3-8: `inset: auto -6px auto auto` ZRESETOWALO `top:-6px`
 *    (inset to skrot top/right/bottom/left) -> badge ladowal wysrodkowany przy
 *    prawej krawedzi i nachodzil na kwote, a „zl" bylo ucinane. Tu: badge ma
 *    JAWNE top/right BEZ `inset`, pigulka jest elastyczna, kwota nigdy ucieta.
 *    Specyficznosc 4 klasy (.pb2b-app-header .pb2b-topbar-cart ...) + later-load
 *    -> wygrywa nad wszystkimi wczesniejszymi regulami i nad v3-8.
 * ========================================================================== */
@media (max-width: 1199px) {
	/* Lewa strona oddaje miejsce; prawa nigdy sie nie kurczy. */
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-title { flex: 1 1 auto !important; min-width: 0 !important; }
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-h1 { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-right { flex: 0 0 auto !important; flex-wrap: nowrap !important; align-items: center !important; }

	/* Pigulka koszyka — elastyczna szerokosc, tresc sie miesci, kwota widoczna. */
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart {
		position: relative !important; overflow: visible !important;
		display: inline-flex !important; align-items: center !important; justify-content: flex-start !important;
		width: auto !important; max-width: none !important; min-width: 0 !important;
		height: auto !important; flex: 0 0 auto !important;
		gap: 8px !important; padding: 8px 13px !important;
		border-radius: 999px !important;
		background: var(--pb2b-bg-3) !important; border: 1px solid var(--pb2b-border) !important;
	}
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart.has-items {
		border-color: color-mix(in srgb, var(--pb2b-primary) 45%, var(--pb2b-border)) !important;
		background: color-mix(in srgb, var(--pb2b-primary) 8%, var(--pb2b-bg-3)) !important;
	}
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-ico {
		width: 19px !important; height: 19px !important; flex: 0 0 19px !important;
		color: var(--pb2b-primary-2) !important;
	}
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-ico svg { width: 100% !important; height: 100% !important; }

	/* Meta = kontener kwoty (jedna linia). Inline-owa ilosc ukryta (jest badge). */
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-meta {
		display: inline-flex !important; flex-direction: row !important; align-items: center !important;
		width: auto !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; line-height: 1 !important;
	}
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-count { display: none !important; }
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-count::after { content: none !important; }

	/* Kwota — ZAWSZE widoczna, nigdy ucieta. */
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-total {
		display: inline-block !important;
		width: auto !important; max-width: none !important; overflow: visible !important;
		white-space: nowrap !important;
		font-size: 13px !important; font-weight: 800 !important; letter-spacing: -.01em !important;
		color: var(--pb2b-text-strong) !important;
	}
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-total::before { content: none !important; margin: 0 !important; }
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-total * { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-total:empty { display: none !important; }

	/* Badge ILOSCI — prawy GORNY rog pigulki. JAWNE top/right, ZERO `inset`. */
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-badge {
		position: absolute !important;
		top: -7px !important; right: -7px !important; bottom: auto !important; left: auto !important;
		margin: 0 !important; transform: none !important;
		min-width: 18px !important; height: 18px !important; padding: 0 5px !important;
		display: inline-flex !important; align-items: center !important; justify-content: center !important;
		border-radius: 999px !important;
		background: var(--pb2b-primary) !important; color: var(--pb2b-primary-contrast) !important;
		border: 2px solid var(--pb2b-bg-1) !important; box-sizing: border-box !important;
		font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important;
		box-shadow: 0 2px 6px color-mix(in srgb, var(--pb2b-primary) 45%, transparent) !important;
	}

	/* Pusty koszyk — sama ikona (kwadrat), bez badge i kwoty. */
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart.is-empty { padding: 9px !important; gap: 0 !important; }
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart.is-empty .pb2b-topbar-cart-badge,
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart.is-empty .pb2b-topbar-cart-meta { display: none !important; }
}

/* Bardzo waskie ekrany (<360px): jesli brak miejsca — koszyk = ikona + badge,
 * kwote chowamy (priorytet: brak poziomego scrolla). 375px+ pokazuje kwote. */
@media (max-width: 359px) {
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart { padding: 9px !important; gap: 0 !important; }
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-cart .pb2b-topbar-cart-meta { display: none !important; }
}

/* =============================================================================
 * 9) HEADER — ergonomia: odstepy, safe-area pozioma, hover/focus, kontrast.
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-app-header,
.phoenix-b2b-panel .pb2b-topbar {
	background: color-mix(in srgb, var(--pb2b-bg-1) 90%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--pb2b-border);
}
@media (max-width: 1199px) {
	/* Rowne odstepy w prawym klastrze; brak elementow zbyt blisko krawedzi (notch). */
	.phoenix-b2b-panel .pb2b-app-header { padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important; padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important; }
	.phoenix-b2b-panel .pb2b-app-header .pb2b-topbar-right { gap: 9px !important; }
	/* Dzwonek + burger — spojne, kwadratowe, czytelny hover w obu trybach. */
	.phoenix-b2b-panel .pb2b-topbar-bell,
	.phoenix-b2b-panel .pb2b-burger {
		background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text);
	}
}
.phoenix-b2b-panel .pb2b-topbar-h1 { color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-topbar-bell:hover,
.phoenix-b2b-panel .pb2b-burger:hover { background: var(--pb2b-bg-4); border-color: var(--pb2b-border-strong); color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-topbar-bell:focus-visible,
.phoenix-b2b-panel .pb2b-burger:focus-visible,
.phoenix-b2b-panel .pb2b-topbar-cart:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-topbar-bell-dot { border: 2px solid var(--pb2b-bg-1); }

/* =============================================================================
 * 10) MINI CARTBAR (pod headerem, mobile) — czysty, czytelny w obu trybach.
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-mini-cartbar {
	background: color-mix(in srgb, var(--pb2b-primary) 6%, var(--pb2b-bg-1));
	border-bottom: 1px solid var(--pb2b-border);
}
.phoenix-b2b-panel .pb2b-mini-cartbar-ico { color: var(--pb2b-primary-2); }
.phoenix-b2b-panel .pb2b-mini-cartbar-count strong,
.phoenix-b2b-panel .pb2b-mini-cartbar-total { color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-mini-cartbar-sep { color: var(--pb2b-text-dim); }
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-ghost {
	background: var(--pb2b-bg-2); border: 1px solid var(--pb2b-border); color: var(--pb2b-text);
}
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-ghost:hover { background: var(--pb2b-bg-3); border-color: var(--pb2b-border-strong); }
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-primary {
	background: var(--pb2b-primary); border: 1px solid var(--pb2b-primary); color: var(--pb2b-primary-contrast);
}
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-primary:hover { background: var(--pb2b-primary-hover); border-color: var(--pb2b-primary-hover); }

/* =============================================================================
 * 11) HERO DASHBOARD — premium hierarchia + CTA (delikatnie, bez psucia desktop).
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-content .pb2b-hero-greeting {
	color: var(--pb2b-text-muted); font-weight: 600; letter-spacing: .01em;
}
.phoenix-b2b-panel .pb2b-content .pb2b-hero-company { color: var(--pb2b-text-strong); letter-spacing: -.01em; }
/* Primary CTA — gradient marki (premium), czytelny tekst w obu trybach. */
.phoenix-b2b-panel .pb2b-content .pb2b-hero-cta .pb2b-btn-primary {
	background: var(--pb2b-accent-grad); border: 0; color: var(--pb2b-primary-contrast);
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--pb2b-primary) 60%, transparent);
}
.phoenix-b2b-panel .pb2b-content .pb2b-hero-cta .pb2b-btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* Outline CTA — wyrazniejsza ramka, czytelny w obu trybach. */
.phoenix-b2b-panel .pb2b-content .pb2b-hero-cta .pb2b-btn-outline {
	background: color-mix(in srgb, var(--pb2b-bg-2) 70%, transparent);
	border: 1px solid color-mix(in srgb, var(--pb2b-primary) 38%, var(--pb2b-border));
	color: var(--pb2b-text-strong);
}
.phoenix-b2b-panel .pb2b-content .pb2b-hero-cta .pb2b-btn-outline:hover {
	background: var(--pb2b-bg-2); border-color: color-mix(in srgb, var(--pb2b-primary) 55%, var(--pb2b-border));
}
@media (max-width: 767px) {
	.phoenix-b2b-panel .pb2b-content .pb2b-hero-greeting { font-size: 13.5px; }
	.phoenix-b2b-panel .pb2b-content .pb2b-hero-company { font-size: 23px; margin: 3px 0 12px; }
	.phoenix-b2b-panel .pb2b-content .pb2b-hero-cta { gap: 9px; }
}

/* =============================================================================
 * 12) LIGHT/DARK — audyt kontrastu (globalny, z tokenow). Formularze/selecty/
 *     textarea/dropdowny maja poprawne tlo i tekst w OBU trybach.
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
.phoenix-b2b-panel .pb2b-content select,
.phoenix-b2b-panel .pb2b-content textarea {
	background-color: var(--pb2b-bg-3);
	color: var(--pb2b-text-strong);
	border: 1px solid var(--pb2b-border);
	border-radius: 10px;
}
.phoenix-b2b-panel .pb2b-content input::placeholder,
.phoenix-b2b-panel .pb2b-content textarea::placeholder { color: var(--pb2b-text-dim); opacity: 1; }
.phoenix-b2b-panel .pb2b-content input:focus,
.phoenix-b2b-panel .pb2b-content select:focus,
.phoenix-b2b-panel .pb2b-content textarea:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--pb2b-primary) 55%, var(--pb2b-border));
	box-shadow: var(--pb2b-shadow-focus);
}
.phoenix-b2b-panel .pb2b-content select { color-scheme: light dark; }
/* Tytuly/etykiety/dane — pelny kontrast w obu trybach. */
.phoenix-b2b-panel .pb2b-content .pb2b-card-title,
.phoenix-b2b-panel .pb2b-content .pb2b-overline,
.phoenix-b2b-panel .pb2b-content .pb2b-stat-value,
.phoenix-b2b-panel .pb2b-content .pb2b-field-label { color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-content .pb2b-muted,
.phoenix-b2b-panel .pb2b-content .pb2b-stat-label,
.phoenix-b2b-panel .pb2b-content .pb2b-stat-foot { color: var(--pb2b-text-muted); }
/* Etykieta pola w formularzu testowym (i ogolnie) — czytelna. */
.phoenix-b2b-panel .pb2b-field-label { color: var(--pb2b-text-soft); font-weight: 600; }

/* =============================================================================
 * 13) PODKRESLENIA / focus — czysto i dostepnie (bez „golych" underline).
 * ========================================================================== */
.phoenix-b2b-panel a,
.phoenix-b2b-panel a:hover,
.phoenix-b2b-panel a:focus,
.phoenix-b2b-panel .pb2b-nav-item,
.phoenix-b2b-panel .pb2b-side-account-link,
.phoenix-b2b-panel .pb2b-bottom-nav-item,
.phoenix-b2b-panel .pb2b-mini-cartbar-btn,
.phoenix-b2b-panel .pb2b-app-footer-link { text-decoration: none; }
.phoenix-b2b-panel .pb2b-content a:focus-visible {
	outline: none; border-radius: 6px; box-shadow: var(--pb2b-shadow-focus);
}