/**
 * PhoenixB2B (SPJTRADE B2B) — finalna warstwa naprawcza PANELU KLIENTA.
 *
 * v2.12.62 — brief „2.12.62-client-panel-final-fixes". Plik ładowany JAKO
 * OSTATNI w łańcuchu CSS panelu (po panel-bundle.css i catalog-ui-2.12.52),
 * scoped do `.phoenix-b2b-panel`, więc wygrywa kaskadę bez ruszania bundla.
 * NIE dotyka panelu admina ani publicznych podstron (te nie mają tej klasy /
 * nie ładują tego handle).
 *
 * Zakres: #4 menu PC (brand box + karta konta), #5 menu mobile (safe-area),
 * #6 koszyk w topbarze (ilość vs kwota), #7 ilości w koszyku, #8 kontenery
 * (przyciski), #9 Import/Cennik CSV (redesign), #10 listy zakupowe (zwijanie,
 * warstwa wizualna), #11 „Dodaj do listy" na kafelku, #12 „Zainstaluj aplikację",
 * + toast „Koszyk został przywrócony" (#2).
 *
 * @package PhoenixB2B
 * @since   2.12.62
 */

/* =====================================================================
 * #5 — MENU MOBILE: naprawa po ostatnim update (szuflada).
 * Przyczyna regresji: drawer nadpisywał padding-top sidebara wyłącznie
 * wartością env(safe-area-inset-top), która w przeglądarce mobilnej (nie w
 * trybie standalone) wynosi 0 → karta konta „wchodziła" pod statusbar.
 * Tu przywracamy realny odstęp górny (min. 16px) + bezpieczny dół + scroll.
 * ===================================================================== */
@media (max-width: 1199.98px) {
	.phoenix-b2b-panel .pb2b-sidebar {
		padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
		overflow-y: auto !important;       /* normalny scroll, bez ucinania dołu */
		overflow-x: hidden !important;     /* brak poziomego scrolla */
		-webkit-overflow-scrolling: touch;
		gap: 12px;
	}
	/* Pasek górny sidebara (brand kompakt + X) — czytelny i poniżej notcha. */
	.phoenix-b2b-panel .pb2b-sidebar-header.pb2b-sidebar-topbar {
		position: relative;
		padding: 2px 2px 10px;
		min-height: 40px;
	}
	/* Przycisk zamknięcia ZAWSZE widoczny i wygodny w dotyku. */
	.phoenix-b2b-panel .pb2b-sidebar-close {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		flex: 0 0 38px;
	}
	/* Karta konta: pełna, nie doklejona, równo poniżej paska. */
	.phoenix-b2b-panel .pb2b-side-account-hero {
		margin-top: 2px;
	}
	/* Nic w bocznym menu nie może powodować poziomego przewijania. */
	.phoenix-b2b-panel .pb2b-sidebar * {
		max-width: 100%;
	}
}

/* =====================================================================
 * #4 — MENU PC: usuń „pusty brand box" z lewego górnego rogu i zrób z karty
 * konta GŁÓWNY, zintegrowany element (jak na mobile). Brand i tak jest na
 * dole menu (pb2b-sidebar-foot-brand), więc nic nie znika z widoku.
 * ===================================================================== */
@media (min-width: 1200px) {
	/* Górny boxik z napisem „SPJTRADE B2B" — zbędny obok karty konta. */
	.phoenix-b2b-panel .pb2b-sidebar-header.pb2b-sidebar-topbar {
		display: none !important;
	}
	/* Karta konta jako pełnoprawna sekcja u góry menu (nie mały odklejony box). */
	.phoenix-b2b-panel .pb2b-side-account-hero {
		margin-top: 2px;
		border-radius: 16px;
		padding: 14px;
	}
	.phoenix-b2b-panel .pb2b-side-account-top {
		align-items: center;
	}
	/* 4 szybkie pola — równy, czytelny układ 2×2 (spójny z mobile). */
	.phoenix-b2b-panel .pb2b-side-account-actions {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		margin-top: 12px;
		padding-top: 12px;
	}
	.phoenix-b2b-panel .pb2b-side-account-link {
		justify-content: flex-start;
		gap: 8px;
		padding: 9px 10px;
		border: 1px solid var(--pb2b-border);
		border-radius: 10px;
		background: var(--pb2b-bg-2, var(--pb2b-surface-soft));
		font-size: 12.5px;
		line-height: 1.15;
		min-width: 0;
	}
	.phoenix-b2b-panel .pb2b-side-account-link > :last-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* =====================================================================
 * #6 — KOSZYK W TOPBARZE (PC): ilość pozycji nie może nachodzić na kwotę.
 * Na desktopie chowamy pływający, okrągły badge (liczba jest już w meta),
 * a kwota dostaje priorytet (większa, bez ucinania).
 * ===================================================================== */
@media (min-width: 1200px) {
	.phoenix-b2b-panel .pb2b-topbar-cart {
		width: auto;
		height: auto;
		min-height: 40px;
		padding: 5px 14px 5px 12px;
		gap: 10px;
		border-radius: 999px;
		position: relative;
	}
	/* Pływający badge „38" nakładał się na kwotę — na PC zbędny. */
	.phoenix-b2b-panel .pb2b-topbar-cart-badge {
		display: none !important;
	}
	.phoenix-b2b-panel .pb2b-topbar-cart-meta {
		display: flex !important;
		flex-direction: column;
		align-items: flex-end;
		line-height: 1.05;
		min-width: 0;
	}
	/* Mała etykieta „N poz." — zmniejszona, drugorzędna. */
	.phoenix-b2b-panel .pb2b-topbar-cart-count {
		font-size: 10.5px;
		font-weight: 600;
		color: var(--pb2b-text-muted);
		order: 1;
	}
	.phoenix-b2b-panel .pb2b-topbar-cart-count::after {
		content: " poz.";
		font-weight: 600;
	}
	/* Kwota ma priorytet: większa, pogrubiona, NIGDY ucinana. */
	.phoenix-b2b-panel .pb2b-topbar-cart-total {
		order: 2;
		font-size: 14px;
		font-weight: 800;
		color: var(--pb2b-text);
		white-space: nowrap;
	}
}

/* =====================================================================
 * #7 — ZAKŁADKA KOSZYK: ilości równe, czytelne, wyśrodkowane; cena/ilość/suma
 * wyrównane. Mobile i PC działają osobno (mobile = karty z etykietami).
 * ===================================================================== */
.phoenix-b2b-panel .pb2b-stepper {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--pb2b-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft));
	height: 40px;
}
.phoenix-b2b-panel .pb2b-stepper-btn {
	width: 38px;
	flex: 0 0 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	color: var(--pb2b-text);
	background: transparent;
	border: 0;
	cursor: pointer;
	user-select: none;
}
.phoenix-b2b-panel .pb2b-stepper-btn:hover { background: var(--pb2b-bg-4); color: var(--pb2b-primary); }
.phoenix-b2b-panel .pb2b-stepper-input {
	width: 56px;
	flex: 0 0 56px;
	min-width: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 14px;
	color: var(--pb2b-text);
	background: var(--pb2b-bg-1, transparent);
	border: 0;
	border-left: 1px solid var(--pb2b-border);
	border-right: 1px solid var(--pb2b-border);
	-moz-appearance: textfield;
	appearance: textfield;
}
.phoenix-b2b-panel .pb2b-stepper-input::-webkit-outer-spin-button,
.phoenix-b2b-panel .pb2b-stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Wyrównanie kolumn na PC (siatka linii koszyka). */
@media (min-width: 1200px) {
	.phoenix-b2b-panel .pb2b-cart-line-qty {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.phoenix-b2b-panel .pb2b-cart-line-price,
	.phoenix-b2b-panel .pb2b-cart-line-value {
		text-align: right;
		font-variant-numeric: tabular-nums;
	}
	.phoenix-b2b-panel .pb2b-cart-line-value > strong { font-size: 15px; }
}
/* Mobile: stepper i wartości równe, bez poziomego scrolla. */
@media (max-width: 1199.98px) {
	.phoenix-b2b-panel .pb2b-cart-line-qty {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.phoenix-b2b-panel .pb2b-stepper { height: 38px; }
	.phoenix-b2b-panel .pb2b-cart-list { overflow-x: hidden; }
}

/* =====================================================================
 * #8 — KONTENERY: przyciski mniejsze, bez łamania tekstu na 2 linie,
 * w jednym rzędzie gdy jest miejsce; karty bardziej zwarte.
 * ===================================================================== */
.phoenix-b2b-panel .pb2b-ctr-tile-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}
.phoenix-b2b-panel .pb2b-ctr-tile-cta .pb2b-app-button {
	padding: 8px 12px;
	font-size: 12.5px;
	line-height: 1.1;
	white-space: nowrap;          /* tekst w jednej linii */
	min-height: 36px;
	flex: 1 1 auto;
}
.phoenix-b2b-panel .pb2b-ctr-open-btn { flex: 1 1 auto; }
.phoenix-b2b-panel .pb2b-container-follow { flex: 1 1 auto; }
/* Lista produktów w kontenerze — akcje zwarte, w jednym rzędzie. */
.phoenix-b2b-panel .pb2b-ctr-product-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.phoenix-b2b-panel .pb2b-ctr-fav-btn,
.phoenix-b2b-panel .pb2b-ctr-view-btn {
	padding: 7px 11px;
	font-size: 12px;
	line-height: 1.1;
	white-space: nowrap;
	min-height: 34px;
	border-radius: 9px;
}
/* Karty kontenerów bardziej kompaktowe + równy spacing. */
.phoenix-b2b-panel .pb2b-ctr-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}
.phoenix-b2b-panel .pb2b-ctr-tile-body { padding: 14px; }
@media (min-width: 1200px) {
	/* Na PC przyciski szersze, ale wciąż jednolinijkowe. */
	.phoenix-b2b-panel .pb2b-ctr-tile-cta .pb2b-app-button { padding: 9px 16px; }
}

/* =====================================================================
 * #11 — „Dodaj do listy" na kafelku produktu: mniejszy, drugorzędny —
 * nie może dominować karty.
 * ===================================================================== */
.phoenix-b2b-panel .pb2b-card-list-select,
.phoenix-b2b-panel .pb2b-list-select.pb2b-card-list-select {
	font-size: 12px;
	padding: 6px 26px 6px 10px;
	min-height: 32px;
	border-radius: 9px;
	background-color: var(--pb2b-bg-2, var(--pb2b-surface-soft));
	border: 1px solid var(--pb2b-border);
	color: var(--pb2b-text-muted);
	font-weight: 600;
}
.phoenix-b2b-panel .pb2b-card-list-select:hover {
	color: var(--pb2b-text);
	border-color: var(--pb2b-border-strong);
}
/* Na karcie produktu (podstrona) — także drugorzędny select listy. */
.phoenix-b2b-panel .pb2b-pview-listadd .pb2b-list-select {
	font-size: 12.5px;
	min-height: 34px;
}

/* =====================================================================
 * #10 — LISTY ZAKUPOWE: warstwa wizualna zwijania (logika w kontrolerze JS).
 * Domyślnie zwinięte; karta = nazwa + liczba + wartość + akcje. Po „Rozwiń"
 * pojawiają się wiersze (ładowane leniwie).
 * ===================================================================== */
.phoenix-b2b-panel .pb2b-lists-grid-collapsible {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.phoenix-b2b-panel .pb2b-list-card {
	border: 1px solid var(--pb2b-border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--pb2b-bg-1, var(--pb2b-surface-soft));
}
.phoenix-b2b-panel .pb2b-list-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	flex-wrap: wrap;
}
.phoenix-b2b-panel .pb2b-list-card-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 260px;
	min-width: 0;
	background: transparent;
	border: 0;
	padding: 4px;
	margin: -4px;
	cursor: pointer;
	text-align: left;
	color: inherit;
}
.phoenix-b2b-panel .pb2b-list-card-toggle[disabled] { cursor: default; }
.phoenix-b2b-panel .pb2b-list-card-caret {
	display: inline-flex;
	color: var(--pb2b-text-muted);
	transition: transform .18s ease;
	flex: 0 0 auto;
}
.phoenix-b2b-panel .pb2b-list-card:not(.is-collapsed) .pb2b-list-card-caret { transform: rotate(90deg); }
.phoenix-b2b-panel .pb2b-list-card-toggle[disabled] .pb2b-list-card-caret { opacity: .35; }
.phoenix-b2b-panel .pb2b-list-card-headmain { min-width: 0; }
.phoenix-b2b-panel .pb2b-list-card-headmain .pb2b-card-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.phoenix-b2b-panel .pb2b-list-card-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--pb2b-text-muted);
}
.phoenix-b2b-panel .pb2b-list-card-summary strong { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-list-card-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
}
.phoenix-b2b-panel .pb2b-list-card-actions .pb2b-link { font-size: 12.5px; }
.phoenix-b2b-panel .pb2b-list-card-body {
	border-top: 1px solid var(--pb2b-border);
	padding: 12px 14px 14px;
}
.phoenix-b2b-panel .pb2b-list-rows-loading {
	padding: 10px 2px;
	color: var(--pb2b-text-muted);
	font-size: 13px;
}
.phoenix-b2b-panel .pb2b-list-table .pb2b-list-qty {
	width: 84px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
	.phoenix-b2b-panel .pb2b-list-card-actions { width: 100%; margin-left: 0; }
	.phoenix-b2b-panel .pb2b-list-card-body { overflow-x: auto; }
}

/* =====================================================================
 * #9 — IMPORT CSV i CENNIK CSV: redesign — spójne z ciemnym panelem.
 * Shortcody renderują własny, „adminowy" markup (.button, biały box). Tu
 * sprowadzamy go do natywnej karty panelu w light i dark. Bez wielkich
 * pustych pól.
 * ===================================================================== */
.phoenix-b2b-panel .phoenix-b2b-csv-import.pb2b-card,
.phoenix-b2b-panel .phoenix-b2b-csv-export.pb2b-card {
	background: var(--pb2b-bg-1, var(--pb2b-surface-soft)) !important;
	border: 1px solid var(--pb2b-border) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	color: var(--pb2b-text);
	max-width: 720px;
}
/* Standalone wrapper shortcode'u w panelu nie powinien dokładać tła/ramki. */
.phoenix-b2b-panel .phoenix-b2b-standalone {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.phoenix-b2b-panel .phoenix-b2b-csv-import .pb2b-card-header,
.phoenix-b2b-panel .phoenix-b2b-csv-export .pb2b-card-header {
	background: transparent !important;
	border-bottom: 1px solid var(--pb2b-border) !important;
	padding: 14px 16px !important;
}
.phoenix-b2b-panel .phoenix-b2b-csv-import .pb2b-card-title,
.phoenix-b2b-panel .phoenix-b2b-csv-export .pb2b-card-title {
	color: var(--pb2b-text) !important;
	font-size: 15px;
	margin: 0;
}
.phoenix-b2b-panel .phoenix-b2b-csv-import .pb2b-card-body,
.phoenix-b2b-panel .phoenix-b2b-csv-export .pb2b-card-body {
	padding: 16px !important;
}
.phoenix-b2b-panel .phoenix-b2b-csv-import .description,
.phoenix-b2b-panel .phoenix-b2b-csv-export .pb2b-muted,
.phoenix-b2b-panel .phoenix-b2b-csv-export-desc {
	color: var(--pb2b-text-muted) !important;
}
/* Pola formularza importu — natywny wygląd panelu (bez „obcych" białych pól). */
.phoenix-b2b-panel .phoenix-b2b-csv-import input[type="file"],
.phoenix-b2b-panel .phoenix-b2b-csv-import textarea,
.phoenix-b2b-panel .phoenix-b2b-csv-import .pb2b-textarea-mono {
	width: 100%;
	box-sizing: border-box;
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft)) !important;
	border: 1px solid var(--pb2b-border) !important;
	border-radius: 10px !important;
	color: var(--pb2b-text) !important;
	padding: 10px 12px !important;
	font-size: 13px;
}
.phoenix-b2b-panel .phoenix-b2b-csv-import textarea,
.phoenix-b2b-panel .phoenix-b2b-csv-import .pb2b-textarea-mono {
	min-height: 120px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.phoenix-b2b-panel .phoenix-b2b-csv-import .pb2b-form-row { margin-bottom: 12px; }
.phoenix-b2b-panel .phoenix-b2b-csv-import .pb2b-form-row label { display: block; margin-bottom: 6px; }
.phoenix-b2b-panel .phoenix-b2b-csv-paste summary,
.phoenix-b2b-panel .phoenix-b2b-csv-import details > summary {
	cursor: pointer;
	color: var(--pb2b-primary);
	font-weight: 600;
	margin: 6px 0;
}
/* Przyciski „adminowe" .button → przyciski panelu (oba widoki CSV). */
.phoenix-b2b-panel .phoenix-b2b-csv-import .button,
.phoenix-b2b-panel .phoenix-b2b-csv-export .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: auto;
	min-height: 42px;
	padding: 10px 18px !important;
	border-radius: 11px !important;
	border: 1px solid var(--pb2b-border) !important;
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft)) !important;
	color: var(--pb2b-text) !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	line-height: 1.1 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.phoenix-b2b-panel .phoenix-b2b-csv-import .button-primary,
.phoenix-b2b-panel .phoenix-b2b-csv-export .phoenix-b2b-btn-primary,
.phoenix-b2b-panel .phoenix-b2b-csv-export .pb2b-btn-primary {
	background: linear-gradient(135deg, var(--pb2b-primary), var(--pb2b-primary-2)) !important;
	border-color: transparent !important;
	color: #fff !important;
}
.phoenix-b2b-panel .phoenix-b2b-csv-import .pb2b-form-actions,
.phoenix-b2b-panel .phoenix-b2b-csv-export .pb2b-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.phoenix-b2b-panel .phoenix-b2b-csv-export .pb2b-meta {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin: 6px 0 14px;
}
/* Wyniki importu / błędy — czytelne w panelu. */
.phoenix-b2b-panel .phoenix-b2b-csv-stats,
.phoenix-b2b-panel .phoenix-b2b-csv-result {
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft));
	border: 1px solid var(--pb2b-border);
	border-radius: 10px;
	padding: 10px 12px;
	margin-top: 12px;
}
.phoenix-b2b-panel .phoenix-b2b-csv-help {
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft));
	border: 1px solid var(--pb2b-border);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 14px;
	max-width: 720px;
	color: var(--pb2b-text-muted);
	font-size: 13px;
}
.phoenix-b2b-panel .pb2b-csv-sample-btn {
	display: inline-flex;
	margin-top: 8px;
	color: var(--pb2b-primary);
	font-weight: 600;
	text-decoration: none;
}
/* Stany komunikatów/blokad/pustki shortcode'ów CSV — bez „obcych" białych/żółtych
   warstw; spójne z ciemnym panelem (light + dark). */
.phoenix-b2b-panel .phoenix-b2b-notice {
	border: 1px solid var(--pb2b-border);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 12px;
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft));
	color: var(--pb2b-text);
	font-size: 13.5px;
	line-height: 1.45;
}
.phoenix-b2b-panel .phoenix-b2b-notice-info {
	border-color: rgba(59, 130, 246, 0.45);
	background: rgba(59, 130, 246, 0.10);
}
.phoenix-b2b-panel .phoenix-b2b-notice-warning {
	border-color: rgba(245, 158, 11, 0.5);
	background: rgba(245, 158, 11, 0.10);
}
.phoenix-b2b-panel .phoenix-b2b-csv-locked {
	border: 1px solid var(--pb2b-border);
	border-radius: 12px;
	padding: 14px 16px;
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft));
	color: var(--pb2b-text-muted);
}
/* Pusty/locked stan w „samodzielnym" wrapperze CSV — bez kart-w-karcie. */
.phoenix-b2b-panel .phoenix-b2b-standalone .pb2b-empty {
	text-align: center;
	padding: 18px 14px;
	color: var(--pb2b-text-muted);
}
.phoenix-b2b-panel .phoenix-b2b-standalone .pb2b-empty-icon { opacity: .7; margin-bottom: 8px; }

/* =====================================================================
 * #12 — „Zainstaluj aplikację": delikatny polish (moduł jest już zbudowany
 * z detekcją iOS/Android/desktop i beforeinstallprompt).
 * ===================================================================== */
.phoenix-b2b-panel .pb2b-pwa-install { max-width: 760px; }
.phoenix-b2b-panel .pb2b-pwa-install-hero {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 14px;
}
.phoenix-b2b-panel .pb2b-pwa-install-heading { min-width: 0; }
.phoenix-b2b-panel .pb2b-pwa-install-badge {
	width: 46px; height: 46px; flex: 0 0 46px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--pb2b-primary), var(--pb2b-primary-2));
	color: #fff;
}
.phoenix-b2b-panel .pb2b-pwa-install-badge svg { width: 24px; height: 24px; }
.phoenix-b2b-panel .pb2b-pwa-install-title { font-size: 17px; margin: 0 0 4px; }
.phoenix-b2b-panel .pb2b-pwa-install-sub { margin: 0 0 2px; color: var(--pb2b-text-muted); font-size: 13px; }
/* Bloki instrukcji per platforma (iOS / desktop / inne / zainstalowana). */
.phoenix-b2b-panel .pb2b-pwa-install-states { margin-top: 6px; }
.phoenix-b2b-panel .pb2b-pwa-install-state {
	border: 1px solid var(--pb2b-border);
	border-radius: 12px;
	padding: 14px 16px;
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft));
}
.phoenix-b2b-panel .pb2b-pwa-install-installed {
	display: flex;
	align-items: center;
	gap: 10px;
	border-color: rgba(34, 197, 94, 0.45);
}
.phoenix-b2b-panel .pb2b-pwa-install-lead { margin: 0 0 10px; font-weight: 700; font-size: 14px; }
.phoenix-b2b-panel .pb2b-pwa-install-text { margin: 0; color: var(--pb2b-text-muted); font-size: 13px; line-height: 1.45; }
/* Lista kroków (iOS) — czytelne ponumerowane kroki z ikoną. */
.phoenix-b2b-panel .pb2b-pwa-install-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	counter-reset: pb2bpwa;
}
.phoenix-b2b-panel .pb2b-pwa-install-steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	font-size: 13.5px;
	line-height: 1.4;
}
.phoenix-b2b-panel .pb2b-pwa-install-steps li + li { border-top: 1px dashed var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-pwa-install-step-ico {
	width: 30px; height: 30px; flex: 0 0 30px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: var(--pb2b-bg-4, rgba(255,255,255,0.04));
	color: var(--pb2b-primary);
}
.phoenix-b2b-panel .pb2b-pwa-install-note {
	border: 1px solid var(--pb2b-border);
	border-radius: 12px;
	padding: 12px 14px;
	background: var(--pb2b-bg-2, var(--pb2b-surface-soft));
	color: var(--pb2b-text-muted);
	font-size: 13px;
}
.phoenix-b2b-panel .pb2b-pwa-install-cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.phoenix-b2b-panel .pb2b-pwa-install-cta-status { color: var(--pb2b-text-muted); font-size: 12.5px; }

/* =====================================================================
 * #2 — Toast „Koszyk został przywrócony" (czytany z URL przez 2.12.62 JS).
 * ===================================================================== */
.pb2b-flash {
	position: fixed;
	left: 50%;
	top: calc(env(safe-area-inset-top, 0px) + 16px);
	transform: translateX(-50%);
	z-index: 100000;
	max-width: min(92vw, 460px);
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #0f1b14;
	color: #d6ffe6;
	border: 1px solid rgba(34, 197, 94, 0.45);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
	font-size: 13.5px;
	line-height: 1.35;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
}
.pb2b-flash.is-in { opacity: 1; }
.pb2b-flash.pb2b-flash-warn {
	background: #1c1605;
	color: #ffe9b8;
	border-color: rgba(245, 158, 11, 0.5);
}
.pb2b-flash-ico { flex: 0 0 18px; margin-top: 1px; }
.pb2b-flash-close {
	margin-left: 4px;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: .8;
}
.pb2b-flash-close:hover { opacity: 1; }