/* v2.9.5 PANEL V3.5 FINAL APP UX + MOBILE POLISH */
/**
 * PhoenixB2B / SPJTRADE B2B — PANEL KLIENTA V3.5 — FINAL APP UX + MOBILE POLISH.
 *
 * Finalna warstwa UX panelu klienta. Ładowana JAKO OSTATNIA, PO panel-v3.css,
 * panel-v3-1.css, panel-v3-3.css i panel-v3-4.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" — zero hardcoded czerni/bieli.
 *
 * Co domyka (brief 2.9.5):
 *   1  HEADER mobile — koszyk pokazuje TYLKO ikonę + badge (kwota nigdy nie
 *      ucina się ani nie nachodzi na dzwonek). Wysokość ~72px, łatwe tapnięcia.
 *   2  MINI PASEK KOSZYKA pod headerem (mobile) — „N poz. • kwota" + Koszyk /
 *      Zamówienie. Żyje z data-pb2b-topbar-cart (panel-v3.js togluje is-empty).
 *   3  BOTTOM NAV — twardo zero podkreśleń, aktywny kafel/pill, app-feel.
 *   4  SIDEBAR — karta konta = główny element, kompaktowy brand, jeden logout
 *      na dole + mały brand w footerze, widoczny cienki fioletowy scrollbar.
 *   5  DASHBOARD — więcej oddechu, premium hero, równe staty i kafle akcji.
 *   6  SKLEP B2B — równy toolbar (search + „Szukaj" + sort), padding od krawędzi.
 *   7  KATALOG — custom picker kategorii (bottom sheet / dialog), bez brzydkiego
 *      natywnego selecta na mobile.
 *   8  WIDOK PRODUKTU w panelu (.pb2b-pview) — PC: galeria | dane; mobile: 1
 *      kolumna + sticky CTA.
 *   9  DOKUMENTY — karty dokumentów + akceptacja warunków + czytnik (modal).
 *  10  LIGHT/DARK — wszystko na tokenach; drobne aliasy badge.
 */

/* =========================================================================
 * 0) TOKENY V3.5 (dostrojenie wysokości headera na mobile do ~72px).
 * ========================================================================= */
.phoenix-b2b-panel {
	--pb2b-header-h:    72px;   /* brief: ~72px na mobile (PC nadpisuje niżej) */
	--pb2b-minicart-h:  46px;
}
@media (min-width: 1200px) {
	.phoenix-b2b-panel { --pb2b-header-h: 72px; }
}

/* =========================================================================
 * CZĘŚĆ 1 — HEADER MOBILE: koszyk = ikona + badge (kwota nie ucina się)
 * Na ≤768 chowamy meta (ilość+kwota) z headera — niesie ją mini cartbar.
 * Koszyk i dzwonek mają tę samą okrągłą formę 40×40 → równe, łatwe tapnięcia.
 * ========================================================================= */
@media (max-width: 768px) {
	.phoenix-b2b-panel .pb2b-topbar-cart {
		width: 40px;
		height: 40px;
		padding: 0;
		justify-content: center;
		border-radius: 999px;
		gap: 0;
	}
	.phoenix-b2b-panel .pb2b-topbar-cart-meta { display: none; }   /* kwota → mini cartbar */
	.phoenix-b2b-panel .pb2b-topbar-cart-ico { width: 19px; height: 19px; flex: 0 0 19px; }
	.phoenix-b2b-panel .pb2b-topbar-cart-ico svg { width: 19px; height: 19px; }
	/* Badge ilości w prawym-górnym rogu ikony (nie najeżdża na dzwonek obok). */
	.phoenix-b2b-panel .pb2b-topbar-cart-badge { left: auto; right: -4px; top: -4px; }
	.phoenix-b2b-panel .pb2b-topbar-cart.is-empty .pb2b-topbar-cart-badge { display: none; }

	/* Tytuł sekcji: jedna linia, ellipsis, nie nachodzi na ikony prawej strony. */
	.phoenix-b2b-panel .pb2b-topbar-title { min-width: 0; }
	.phoenix-b2b-panel .pb2b-topbar-sub { display: none; }   /* nazwa firmy jest w karcie konta */
	.phoenix-b2b-panel .pb2b-topbar-right { gap: 8px; }
}

/* =========================================================================
 * CZĘŚĆ 2 — MINI PASEK KOSZYKA (mobile, pod headerem)
 * Domyślnie ukryty; pokazywany TYLKO ≤768 i TYLKO gdy koszyk ma pozycje.
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-mini-cartbar {
	display: none;            /* baza — pokazywany w media-query niżej */
	align-items: center;
	gap: 10px;
	margin: 10px max(var(--pb2b-page-x), var(--pb2b-safe-left)) 0 max(var(--pb2b-page-x), var(--pb2b-safe-right));
	padding: 8px 10px 8px 12px;
	min-height: var(--pb2b-minicart-h);
	background: var(--pb2b-bg-2);
	border: 1px solid color-mix(in srgb, var(--pb2b-primary) 30%, var(--pb2b-border));
	border-radius: 999px;
	box-shadow: var(--pb2b-shadow-sm);
}
.phoenix-b2b-panel .pb2b-mini-cartbar.is-empty { display: none; }

.phoenix-b2b-panel .pb2b-mini-cartbar-info {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: var(--pb2b-text);
}
.phoenix-b2b-panel .pb2b-mini-cartbar-ico {
	width: 28px; height: 28px; flex: 0 0 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--pb2b-primary-soft);
	color: var(--pb2b-primary-strong);
}
.phoenix-b2b-panel .pb2b-mini-cartbar-ico svg { width: 16px; height: 16px; }
.phoenix-b2b-panel .pb2b-mini-cartbar-text {
	display: flex; align-items: baseline; gap: 6px;
	min-width: 0; font-size: 13px; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phoenix-b2b-panel .pb2b-mini-cartbar-count { color: var(--pb2b-text-muted); }
.phoenix-b2b-panel .pb2b-mini-cartbar-count strong { color: var(--pb2b-text); font-weight: 700; }
.phoenix-b2b-panel .pb2b-mini-cartbar-sep { color: var(--pb2b-text-dim); }
.phoenix-b2b-panel .pb2b-mini-cartbar-total { font-weight: 700; color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-mini-cartbar-total * { color: inherit; font-size: inherit; font-weight: inherit; }
.phoenix-b2b-panel .pb2b-mini-cartbar-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.phoenix-b2b-panel .pb2b-mini-cartbar-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 7px 12px; border-radius: 999px;
	font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
	text-decoration: none; border: 1px solid transparent; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-ghost {
	background: var(--pb2b-bg-3); color: var(--pb2b-text); border-color: var(--pb2b-border);
}
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-ghost:hover { background: var(--pb2b-bg-4); color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-primary {
	background: var(--pb2b-accent-grad); color: var(--pb2b-primary-contrast);
}
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-primary:hover,
.phoenix-b2b-panel .pb2b-mini-cartbar-btn-primary:focus { color: var(--pb2b-primary-contrast); }

@media (max-width: 768px) {
	.phoenix-b2b-panel .pb2b-mini-cartbar.has-items { display: flex; }
}
/* Bardzo wąsko — etykieta „poz. w koszyku" znika, zostaje liczba • kwota. */
@media (max-width: 400px) {
	.phoenix-b2b-panel .pb2b-mini-cartbar { gap: 8px; padding-right: 8px; }
	.phoenix-b2b-panel .pb2b-mini-cartbar-btn { padding: 7px 10px; }
}
/* PC / tablet — chip koszyka w headerze niesie ilość+kwotę; mini bar zbędny. */
@media (min-width: 769px) {
	.phoenix-b2b-panel .pb2b-mini-cartbar { display: none !important; }
}

/* =========================================================================
 * CZĘŚĆ 3 — BOTTOM NAV: zero podkreśleń (twardo), app-feel
 * Motyw rodzica potrafi narzucać text-decoration:underline na <a> i ich
 * stany — tu wygaszamy to dla całej dolnej nawigacji.
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-bottom-nav-item,
.phoenix-b2b-panel .pb2b-bottom-nav-item:link,
.phoenix-b2b-panel .pb2b-bottom-nav-item:visited,
.phoenix-b2b-panel .pb2b-bottom-nav-item:hover,
.phoenix-b2b-panel .pb2b-bottom-nav-item:focus,
.phoenix-b2b-panel .pb2b-bottom-nav-item:active,
.phoenix-b2b-panel .pb2b-bottom-nav-label,
.phoenix-b2b-panel .pb2b-bottom-nav-item:hover .pb2b-bottom-nav-label,
.phoenix-b2b-panel .pb2b-bottom-nav-item:focus .pb2b-bottom-nav-label {
	text-decoration: none !important;
	text-underline-offset: 0;
}
/* Aktywny kafel — delikatnie mocniejszy niż w v3-3 (bardziej „pill"). */
.phoenix-b2b-panel .pb2b-bottom-nav-item.is-active {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pb2b-primary) 22%, transparent);
}

/* =========================================================================
 * CZĘŚĆ 4 — SIDEBAR: kompaktowy brand + karta konta (hero) + footer brand
 *           + widoczny cienki fioletowy scrollbar.
 * ========================================================================= */

/* Pasek górny: tylko mały brand + przycisk zamknięcia (mobile). Brand
 * zdemotowany — to NIE jest już główny „box". */
.phoenix-b2b-panel .pb2b-sidebar-topbar {
	padding: 12px 12px 8px;
	min-height: 0;
}
.phoenix-b2b-panel .pb2b-brand-compact { display: flex; align-items: center; gap: 9px; min-width: 0; }
.phoenix-b2b-panel .pb2b-brand-compact .pb2b-brand-mark {
	width: 30px; height: 30px; flex: 0 0 30px;
	border-radius: 9px; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pb2b-accent-grad); color: #fff;
}
.phoenix-b2b-panel .pb2b-brand-compact .pb2b-brand-logo-img { width: 100%; height: 100%; object-fit: cover; }
.phoenix-b2b-panel .pb2b-brand-compact .pb2b-brand-mono { font-size: 14px; font-weight: 800; line-height: 1; color: #fff; }
.phoenix-b2b-panel .pb2b-brand-compact .pb2b-brand-title {
	font-size: 13px; font-weight: 700; color: var(--pb2b-text-soft); letter-spacing: .2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* Karta konta = GŁÓWNY element. Subtelny gradientowy akcent ramki. */
.phoenix-b2b-panel .pb2b-side-account-hero {
	margin: 0 12px 10px;
	padding: 14px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--pb2b-primary) 7%, var(--pb2b-bg-2)) 0%, var(--pb2b-bg-2) 60%);
	border: 1px solid color-mix(in srgb, var(--pb2b-primary) 22%, var(--pb2b-border));
	border-radius: var(--pb2b-radius);
	box-shadow: var(--pb2b-shadow-sm);
}
.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-avatar {
	width: 46px; height: 46px; flex: 0 0 46px; font-size: 17px;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--pb2b-primary) 35%, transparent);
}
.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-name { font-size: 15px; }

/* Szybkie linki konta jako siatka 2×2 (mniej „listy", bardziej karta-app). */
.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: 12px;
	padding-top: 12px;
}
.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 10px;
	background: var(--pb2b-bg-3);
	border: 1px solid var(--pb2b-border);
	border-radius: var(--pb2b-radius-sm);
	font-size: 12px;
	line-height: 1.15;
}
.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link:hover {
	background: var(--pb2b-bg-4);
	border-color: color-mix(in srgb, var(--pb2b-primary) 40%, var(--pb2b-border));
}
.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link-ico {
	width: 18px; height: 18px; flex: 0 0 18px; color: var(--pb2b-primary);
}
.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link-ico svg { width: 18px; height: 18px; }
/* Badge powiadomień na kafelku „Powiadomienia". */
.phoenix-b2b-panel .pb2b-side-account-link-badge {
	position: absolute; top: 8px; right: 8px;
	min-width: 18px; height: 18px; padding: 0 5px;
	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;
}

/* Footer menu: jeden logout + mały brand/wersja pod nim. */
.phoenix-b2b-panel .pb2b-sidebar-foot-brand {
	display: flex; align-items: baseline; justify-content: center; gap: 6px;
	margin-top: 10px; padding-top: 10px;
	border-top: 1px solid var(--pb2b-border);
}
.phoenix-b2b-panel .pb2b-sidebar-foot-brand-name { font-size: 11.5px; font-weight: 700; color: var(--pb2b-text-muted); letter-spacing: .3px; }
.phoenix-b2b-panel .pb2b-sidebar-foot-brand-ver { font-size: 10.5px; color: var(--pb2b-text-dim); }

/* Widoczny, cienki, fioletowy scrollbar menu (sygnał, że można przewijać). */
.phoenix-b2b-panel .pb2b-sidebar {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--pb2b-primary) 70%, transparent) transparent;
}
.phoenix-b2b-panel .pb2b-sidebar::-webkit-scrollbar { width: 8px; }
.phoenix-b2b-panel .pb2b-sidebar::-webkit-scrollbar-track { background: transparent; }
.phoenix-b2b-panel .pb2b-sidebar::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--pb2b-primary) 55%, transparent);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.phoenix-b2b-panel .pb2b-sidebar:hover::-webkit-scrollbar-thumb { background: var(--pb2b-primary); background-clip: padding-box; }

/* =========================================================================
 * CZĘŚĆ 5 — DASHBOARD: więcej oddechu + premium hero.
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(18px, 3vw, 28px);
	border-radius: var(--pb2b-radius);
	background:
		radial-gradient(1200px 200px at 0% 0%, color-mix(in srgb, var(--pb2b-primary) 16%, transparent) 0%, transparent 70%),
		var(--pb2b-grad-dark);
	color: var(--pb2b-text-on-dark);
	box-shadow: var(--pb2b-shadow);
}
.phoenix-b2b-panel .pb2b-hero-main { min-width: 0; }
.phoenix-b2b-panel .pb2b-hero-greeting { font-size: 13px; opacity: .92; }
.phoenix-b2b-panel .pb2b-hero-company { margin: 4px 0 10px; font-size: clamp(20px, 3.4vw, 28px); line-height: 1.15; color: #fff; }
.phoenix-b2b-panel .pb2b-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.phoenix-b2b-panel .pb2b-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* Staty — równa wysokość, więcej oddechu. */
.phoenix-b2b-panel .pb2b-stats { gap: var(--pb2b-section-gap); align-items: stretch; }
.phoenix-b2b-panel .pb2b-stat {
	display: flex; flex-direction: column; gap: 4px;
	padding: clamp(14px, 2vw, 18px);
	background: var(--pb2b-bg-2);
	border: 1px solid var(--pb2b-border);
	border-radius: var(--pb2b-radius);
	box-shadow: var(--pb2b-shadow-sm);
}
.phoenix-b2b-panel .pb2b-stat-value { font-size: clamp(22px, 3vw, 28px); font-weight: 800; line-height: 1.1; color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-stat-label { font-size: 12px; font-weight: 600; color: var(--pb2b-text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Kafle szybkich akcji — równe, czytelne, z hoverem. */
.phoenix-b2b-panel .pb2b-quick-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 10px;
}
.phoenix-b2b-panel .pb2b-quick-tile {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; min-height: 88px; padding: 14px 10px; text-align: center;
	background: var(--pb2b-bg-2); border: 1px solid var(--pb2b-border);
	border-radius: var(--pb2b-radius-sm); color: var(--pb2b-text); text-decoration: none;
	transition: background .14s ease, border-color .14s ease, transform .08s ease;
}
.phoenix-b2b-panel .pb2b-quick-tile:hover {
	background: var(--pb2b-bg-3);
	border-color: color-mix(in srgb, var(--pb2b-primary) 40%, var(--pb2b-border));
	transform: translateY(-2px);
}
.phoenix-b2b-panel .pb2b-quick-tile-icon { font-size: 22px; line-height: 1; }
.phoenix-b2b-panel .pb2b-quick-tile-label { font-size: 12px; font-weight: 600; line-height: 1.2; }

/* Karty dashboardu — spójny oddech między sekcjami. */
.phoenix-b2b-panel .pb2b-content > .pb2b-card,
.phoenix-b2b-panel .pb2b-content > .pb2b-grid-2 { margin: 0; }

@media (max-width: 768px) {
	.phoenix-b2b-panel .pb2b-hero { padding: 18px; }
	.phoenix-b2b-panel .pb2b-hero-cta { width: 100%; }
	.phoenix-b2b-panel .pb2b-hero-cta .pb2b-btn { flex: 1 1 auto; text-align: center; }
}

/* =========================================================================
 * CZĘŚĆ 6 — SKLEP B2B: równy toolbar, padding od krawędzi (mobile).
 * ========================================================================= */
/* Sekcja sklepu w panelu nie dotyka krawędzi: dajemy poziomy padding karcie. */
.phoenix-b2b-panel [data-pb2b-shop-wrap] .pb2b-app-card-body {
	padding-left: var(--pb2b-page-x);
	padding-right: var(--pb2b-page-x);
}
.phoenix-b2b-panel .pb2b-shop-toolbar {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.phoenix-b2b-panel .pb2b-shop-search { display: flex; gap: 8px; flex: 1 1 280px; min-width: 0; }
.phoenix-b2b-panel .pb2b-shop-search-input {
	flex: 1 1 auto; min-width: 0; height: 42px;
	border-radius: var(--pb2b-radius-sm);
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text);
}
.phoenix-b2b-panel .pb2b-shop-search .pb2b-shop-btn { flex: 0 0 auto; white-space: nowrap; }
.phoenix-b2b-panel .pb2b-shop-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.phoenix-b2b-panel .pb2b-shop-orderby {
	height: 42px; border-radius: var(--pb2b-radius-sm);
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text);
	padding: 0 30px 0 12px;
}
.phoenix-b2b-panel .pb2b-shop-count { color: var(--pb2b-text-muted); }

@media (max-width: 600px) {
	/* Search pełna szerokość; „Szukaj" nie wciska się na siłę (równy, czytelny). */
	.phoenix-b2b-panel .pb2b-shop-search { flex: 1 1 100%; }
	.phoenix-b2b-panel .pb2b-shop-toolbar-right { width: 100%; justify-content: space-between; }
	.phoenix-b2b-panel .pb2b-shop-orderby { flex: 1 1 auto; }
}

/* =========================================================================
 * CZĘŚĆ 7 — KATALOG: custom picker kategorii (bottom sheet / dialog).
 * Natywny <select.phoenix-b2b-qo-cat> zostaje w DOM (źródło prawdy dla AJAX),
 * ale jest wizualnie ukryty — UI obsługuje wstrzykiwany trigger + sheet.
 * ========================================================================= */
.phoenix-b2b-panel .phoenix-b2b-qo-filter { display: flex; align-items: center; gap: 8px; }
/* Ukryj natywny select gdy mamy custom picker (klasa dokładana przez JS). */
.phoenix-b2b-panel .phoenix-b2b-qo-filter.pb2b-catpick-ready .phoenix-b2b-qo-cat {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.phoenix-b2b-panel .phoenix-b2b-qo-filter.pb2b-catpick-ready > label { display: none; }

/* Trigger (wygląda jak premium select). */
.phoenix-b2b-panel .pb2b-catpick-trigger {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 42px; padding: 8px 12px;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border);
	border-radius: var(--pb2b-radius-sm); color: var(--pb2b-text);
	font-size: 13px; font-weight: 600; cursor: pointer; max-width: 100%;
	transition: background .15s ease, border-color .15s ease;
}
.phoenix-b2b-panel .pb2b-catpick-trigger:hover { background: var(--pb2b-bg-4); border-color: var(--pb2b-border-strong); }
.phoenix-b2b-panel .pb2b-catpick-trigger:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-catpick-trigger-ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--pb2b-primary); }
.phoenix-b2b-panel .pb2b-catpick-trigger-ico svg { width: 18px; height: 18px; }
.phoenix-b2b-panel .pb2b-catpick-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phoenix-b2b-panel .pb2b-catpick-trigger-caret { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; color: var(--pb2b-text-muted); }

/* Overlay + sheet. */
.pb2b-catpick {
	position: fixed; inset: 0; z-index: 1000;
	display: none; align-items: flex-end; justify-content: center;
}
.pb2b-catpick.is-open { display: flex; }
.pb2b-catpick-overlay { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pb2b-catpick-sheet {
	position: relative;
	width: 100%; max-width: 560px;
	max-height: 82vh; display: flex; flex-direction: column;
	background: var(--pb2b-bg-1);
	border: 1px solid var(--pb2b-border);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -20px 60px rgba(0,0,0,.4);
	padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
	animation: pb2bCatpickUp .2s ease;
}
@keyframes pb2bCatpickUp { from { transform: translateY(14px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.pb2b-catpick-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--pb2b-border-strong); margin: 0 auto 10px; }
.pb2b-catpick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pb2b-catpick-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--pb2b-text); }
.pb2b-catpick-close {
	width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text); cursor: pointer;
}
.pb2b-catpick-close svg { width: 18px; height: 18px; }
.pb2b-catpick-search {
	width: 100%; height: 42px; margin-bottom: 10px;
	border-radius: var(--pb2b-radius-sm);
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text);
	padding: 0 12px;
}
.pb2b-catpick-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; margin: 0 -4px; padding: 0 4px; }
.pb2b-catpick-item {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 11px 12px; margin-bottom: 4px;
	background: var(--pb2b-bg-2); border: 1px solid var(--pb2b-border);
	border-radius: var(--pb2b-radius-sm); color: var(--pb2b-text);
	font-size: 14px; text-align: left; cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.pb2b-catpick-item:hover { background: var(--pb2b-bg-3); }
.pb2b-catpick-item.is-active {
	border-color: var(--pb2b-primary);
	background: var(--pb2b-primary-soft);
	color: var(--pb2b-primary-strong);
	font-weight: 700;
}
.pb2b-catpick-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb2b-catpick-item-count {
	flex: 0 0 auto; font-size: 12px; font-weight: 700;
	color: var(--pb2b-text-muted); background: var(--pb2b-bg-3);
	border: 1px solid var(--pb2b-border); border-radius: 999px; padding: 2px 8px;
}
.pb2b-catpick-item.is-active .pb2b-catpick-item-count { color: var(--pb2b-primary-strong); border-color: color-mix(in srgb, var(--pb2b-primary) 40%, var(--pb2b-border)); }
.pb2b-catpick-empty { padding: 18px; text-align: center; color: var(--pb2b-text-muted); font-size: 13px; }
.pb2b-catpick-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pb2b-border); }
.pb2b-catpick-actions .pb2b-catpick-all {
	flex: 0 0 auto; padding: 10px 14px; border-radius: var(--pb2b-radius-sm);
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text);
	font-size: 13px; font-weight: 600; cursor: pointer;
}
.pb2b-catpick-actions .pb2b-catpick-apply {
	flex: 1 1 auto; padding: 10px 14px; border-radius: var(--pb2b-radius-sm);
	background: var(--pb2b-accent-grad); color: var(--pb2b-primary-contrast); border: 1px solid transparent;
	font-size: 13px; font-weight: 700; cursor: pointer;
}
/* Na PC sheet zachowuje się jak wyśrodkowany dialog. */
@media (min-width: 769px) {
	.pb2b-catpick { align-items: center; }
	.pb2b-catpick-sheet { border-radius: 18px; max-height: 76vh; }
	.pb2b-catpick-grip { display: none; }
}

/* Katalog — odrobina oddechu na mobile (flowbar/embed nie dotykają ścian). */
.phoenix-b2b-panel [data-pb2b-catalog-flow] .pb2b-app-card-body {
	padding-left: var(--pb2b-page-x);
	padding-right: var(--pb2b-page-x);
}

/* =========================================================================
 * CZĘŚĆ 8 — WEWNĘTRZNY WIDOK PRODUKTU (.pb2b-pview)
 * PC: galeria | dane (2 kolumny). Mobile: 1 kolumna + sticky CTA.
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-pview .pb2b-app-card-body {
	padding-left: var(--pb2b-page-x);
	padding-right: var(--pb2b-page-x);
}
.phoenix-b2b-panel .pb2b-pview-main { display: grid; grid-template-columns: 1fr; gap: 18px; }

/* Galeria. */
.phoenix-b2b-panel .pb2b-pview-media { min-width: 0; }
.phoenix-b2b-panel .pb2b-pview-stage {
	position: relative;
	border: 1px solid var(--pb2b-border); border-radius: var(--pb2b-radius);
	background: var(--pb2b-bg-3); overflow: hidden;
	aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.phoenix-b2b-panel .pb2b-pview-stage img { width: 100%; height: 100%; object-fit: contain; }
.phoenix-b2b-panel .pb2b-pview-badge {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	padding: 4px 10px; border-radius: 999px;
	background: var(--pb2b-accent-grad); color: var(--pb2b-primary-contrast);
	font-size: 11px; font-weight: 700;
}
.phoenix-b2b-panel .pb2b-pview-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.phoenix-b2b-panel .pb2b-pview-thumb {
	width: 60px; height: 60px; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border);
	transition: border-color .12s ease;
}
.phoenix-b2b-panel .pb2b-pview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phoenix-b2b-panel .pb2b-pview-thumb.is-active { border-color: var(--pb2b-primary); box-shadow: 0 0 0 2px var(--pb2b-primary-soft); }

/* Dane. */
.phoenix-b2b-panel .pb2b-pview-info { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.phoenix-b2b-panel .pb2b-pview-stock { display: inline-flex; }
.phoenix-b2b-panel .pb2b-pview-title { margin: 0; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.2; color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-pview-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.phoenix-b2b-panel .pb2b-pview-chip {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 10px; border-radius: 999px;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border);
	font-size: 12px; color: var(--pb2b-text-muted);
}
.phoenix-b2b-panel .pb2b-pview-chip strong { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-pview-cats { font-size: 13px; color: var(--pb2b-text-muted); }
.phoenix-b2b-panel .pb2b-pview-cats-lbl { font-weight: 600; }
.phoenix-b2b-panel .pb2b-pview-cats-val { color: var(--pb2b-text); }

.phoenix-b2b-panel .pb2b-pview-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.phoenix-b2b-panel .pb2b-pview-price { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-pview-price * { color: inherit; }
.phoenix-b2b-panel .pb2b-pview-price-old { font-size: 15px; color: var(--pb2b-text-dim); text-decoration: line-through; }
.phoenix-b2b-panel .pb2b-pview-price-suffix { font-size: 12px; color: var(--pb2b-text-muted); }
.phoenix-b2b-panel .pb2b-pview-price-na,
.phoenix-b2b-panel .pb2b-pview-price-locked {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px;
	background: var(--pb2b-primary-soft); color: var(--pb2b-primary-strong);
	border: 1px solid color-mix(in srgb, var(--pb2b-primary) 30%, transparent);
	font-size: 14px; font-weight: 700;
}
.phoenix-b2b-panel .pb2b-pview-short { margin: 0; color: var(--pb2b-text-soft); font-size: 14px; line-height: 1.55; }

/* Ilość + akcje. */
.phoenix-b2b-panel .pb2b-pview-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.phoenix-b2b-panel .pb2b-pview-qty {
	display: inline-flex; align-items: center;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); border-radius: var(--pb2b-radius-sm);
	overflow: hidden;
}
.phoenix-b2b-panel .pb2b-pview-qty-btn {
	width: 42px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; color: var(--pb2b-text); cursor: pointer;
}
.phoenix-b2b-panel .pb2b-pview-qty-btn:hover { background: var(--pb2b-bg-4); color: var(--pb2b-primary-strong); }
.phoenix-b2b-panel .pb2b-pview-qty-input {
	width: 56px; height: 44px; text-align: center; border: 0; background: transparent; color: var(--pb2b-text);
	font-size: 15px; font-weight: 700; -moz-appearance: textfield;
}
.phoenix-b2b-panel .pb2b-pview-qty-input::-webkit-outer-spin-button,
.phoenix-b2b-panel .pb2b-pview-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.phoenix-b2b-panel .pb2b-pview-add { flex: 1 1 auto; min-height: 44px; justify-content: center; }
.phoenix-b2b-panel .pb2b-pview-fav { flex: 0 0 auto; min-height: 44px; }
.phoenix-b2b-panel .pb2b-pview-fav.is-fav { color: var(--pb2b-danger); border-color: color-mix(in srgb, var(--pb2b-danger) 40%, var(--pb2b-border)); }
.phoenix-b2b-panel .pb2b-pview-fav.is-fav svg { color: var(--pb2b-danger); }

/* Atrybuty (lista). */
.phoenix-b2b-panel .pb2b-pview-attrs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; border: 1px solid var(--pb2b-border); border-radius: var(--pb2b-radius-sm); overflow: hidden; }
.phoenix-b2b-panel .pb2b-pview-attr { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--pb2b-bg-2); font-size: 13px; }
.phoenix-b2b-panel .pb2b-pview-attr-lbl { color: var(--pb2b-text-muted); }
.phoenix-b2b-panel .pb2b-pview-attr-val { color: var(--pb2b-text); font-weight: 600; text-align: right; }

/* Sekcje (opis / podobne / polecane). */
.phoenix-b2b-panel .pb2b-pview-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-pview-section-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-pview-desc { color: var(--pb2b-text-soft); font-size: 14px; line-height: 1.65; }
.phoenix-b2b-panel .pb2b-pview-desc :where(p, ul, ol) { margin: 0 0 10px; }
.phoenix-b2b-panel .pb2b-pview-desc :where(h1,h2,h3,h4) { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-pview-related .pb2b-card-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

/* PC: galeria po lewej (sticky), dane po prawej. */
@media (min-width: 992px) {
	.phoenix-b2b-panel .pb2b-pview-main { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px; align-items: start; }
	.phoenix-b2b-panel .pb2b-pview-media { position: sticky; top: calc(var(--pb2b-header-h) + 16px); }
}
@media (max-width: 1199px) {
	.phoenix-b2b-panel .pb2b-pview-related .pb2b-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Mobile: sticky CTA (ilość + dodaj) na dole, nad bottom navem. */
@media (max-width: 768px) {
	.phoenix-b2b-panel .pb2b-pview-buy {
		position: sticky;
		bottom: calc(var(--pb2b-bottomnav-h, 62px) + env(safe-area-inset-bottom, 0px) + 8px);
		z-index: 12;
		margin-top: 6px;
		padding: 10px;
		background: var(--pb2b-bg-1);
		border: 1px solid var(--pb2b-border);
		border-radius: var(--pb2b-radius);
		box-shadow: 0 8px 24px rgba(0,0,0,.18);
	}
	.phoenix-b2b-panel .pb2b-pview-related .pb2b-card-grid { gap: 11px; }
}

/* =========================================================================
 * CZĘŚĆ 9 — DOKUMENTY: karty dokumentów + akceptacja + czytnik (modal).
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-legal-card .pb2b-app-card-body { padding-left: var(--pb2b-page-x); padding-right: var(--pb2b-page-x); }
.phoenix-b2b-panel .pb2b-legal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}
.phoenix-b2b-panel .pb2b-legal-tile {
	display: flex; flex-direction: column; gap: 8px;
	padding: 16px;
	background: var(--pb2b-bg-2);
	border: 1px solid var(--pb2b-border);
	border-radius: var(--pb2b-radius);
	box-shadow: var(--pb2b-shadow-sm);
}
.phoenix-b2b-panel .pb2b-legal-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phoenix-b2b-panel .pb2b-legal-tile-ico {
	width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pb2b-primary-soft); color: var(--pb2b-primary-strong);
}
.phoenix-b2b-panel .pb2b-legal-tile-req {
	font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 999px;
	background: var(--pb2b-warning-soft); color: var(--pb2b-warning-ink);
	border: 1px solid color-mix(in srgb, var(--pb2b-warning) 30%, transparent);
}
.phoenix-b2b-panel .pb2b-legal-tile-req.is-ok {
	background: var(--pb2b-success-soft); color: var(--pb2b-success-ink);
	border-color: color-mix(in srgb, var(--pb2b-success) 30%, transparent);
}
.phoenix-b2b-panel .pb2b-legal-tile-opt {
	font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 999px;
	background: var(--pb2b-bg-3); color: var(--pb2b-text-muted); border: 1px solid var(--pb2b-border);
}
.phoenix-b2b-panel .pb2b-legal-tile-title { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--pb2b-text); line-height: 1.25; }
.phoenix-b2b-panel .pb2b-legal-tile-sum { margin: 0; font-size: 13px; color: var(--pb2b-text-muted); line-height: 1.45; flex: 1 1 auto; }
.phoenix-b2b-panel .pb2b-legal-tile-read { align-self: flex-start; margin-top: 4px; }

/* Pasek akceptacji. */
.phoenix-b2b-panel .pb2b-legal-accept {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 16px; padding: 14px 16px;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); border-radius: var(--pb2b-radius);
}
.phoenix-b2b-panel .pb2b-legal-accept.is-accepted {
	background: var(--pb2b-success-soft);
	border-color: color-mix(in srgb, var(--pb2b-success) 30%, var(--pb2b-border));
}
.phoenix-b2b-panel .pb2b-legal-accept-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: 1 1 280px; min-width: 0; }
.phoenix-b2b-panel .pb2b-legal-accept-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.phoenix-b2b-panel .pb2b-legal-accept-check-box {
	width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px;
	background: var(--pb2b-bg-1); border: 2px solid var(--pb2b-border-strong);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .12s ease, border-color .12s ease;
}
.phoenix-b2b-panel .pb2b-legal-accept-check-box::after {
	content: ""; width: 11px; height: 6px; margin-top: -2px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg) scale(0); transition: transform .12s ease;
}
.phoenix-b2b-panel .pb2b-legal-accept-check input:checked + .pb2b-legal-accept-check-box {
	background: var(--pb2b-primary); border-color: var(--pb2b-primary);
}
.phoenix-b2b-panel .pb2b-legal-accept-check input:checked + .pb2b-legal-accept-check-box::after { transform: rotate(-45deg) scale(1); }
.phoenix-b2b-panel .pb2b-legal-accept-check input:focus-visible + .pb2b-legal-accept-check-box { box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-legal-accept-check-label { font-size: 14px; font-weight: 600; color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-legal-accept-note { width: 100%; margin: 0; font-size: 12.5px; }
.phoenix-b2b-panel .pb2b-legal-accept-done { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; }
.phoenix-b2b-panel .pb2b-legal-accept-done-ico {
	width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pb2b-success); color: #fff;
}
.phoenix-b2b-panel .pb2b-legal-accept-done-text { display: flex; flex-direction: column; gap: 2px; }
.phoenix-b2b-panel .pb2b-legal-accept-done-text strong { color: var(--pb2b-success-ink); font-size: 14px; }

/* Czytnik dokumentu (modal). */
.phoenix-b2b-panel .pb2b-legal-reader[hidden] { display: none; }
.phoenix-b2b-panel .pb2b-legal-reader {
	position: fixed; inset: 0; z-index: 1001;
	display: flex; align-items: center; justify-content: center; padding: 16px;
}
.phoenix-b2b-panel .pb2b-legal-reader-overlay { position: absolute; inset: 0; background: rgba(2,6,23,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.phoenix-b2b-panel .pb2b-legal-reader-dialog {
	position: relative; width: 100%; max-width: 640px; max-height: 84vh;
	display: flex; flex-direction: column;
	background: var(--pb2b-bg-1); border: 1px solid var(--pb2b-border);
	border-radius: var(--pb2b-radius); box-shadow: var(--pb2b-shadow-lg);
	overflow: hidden;
}
.phoenix-b2b-panel .pb2b-legal-reader-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 16px; border-bottom: 1px solid var(--pb2b-border);
}
.phoenix-b2b-panel .pb2b-legal-reader-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-legal-reader-close {
	width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text); cursor: pointer;
}
.phoenix-b2b-panel .pb2b-legal-reader-body { padding: 16px; overflow-y: auto; color: var(--pb2b-text-soft); font-size: 14px; line-height: 1.65; }
.phoenix-b2b-panel .pb2b-legal-reader-body :where(p, ul, ol) { margin: 0 0 12px; }
.phoenix-b2b-panel .pb2b-legal-reader-body :where(h1,h2,h3,h4) { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-legal-reader-body em { color: var(--pb2b-text-muted); }

/* =========================================================================
 * CZĘŚĆ 10 — LIGHT/DARK: aliasy + bezpieczeństwo poziomego scrolla.
 * ========================================================================= */
/* Marka dokumentów używa wariantu „-warn" — dodaj alias do „-warning". */
.phoenix-b2b-panel .pb2b-app-badge-warn {
	background: var(--pb2b-warning-soft);
	color: var(--pb2b-warning-ink);
	border-color: color-mix(in srgb, var(--pb2b-warning) 30%, transparent);
}

/* Nowe elementy nigdy nie wychodzą poza szerokość kontenera (zero scrolla X). */
.phoenix-b2b-panel .pb2b-mini-cartbar,
.phoenix-b2b-panel .pb2b-pview,
.phoenix-b2b-panel .pb2b-pview-main,
.phoenix-b2b-panel .pb2b-legal-grid,
.phoenix-b2b-panel .pb2b-legal-accept { max-width: 100%; min-width: 0; }

/* Dostępność: szanuj „mniej ruchu". */
@media (prefers-reduced-motion: reduce) {
	.phoenix-b2b-panel .pb2b-quick-tile,
	.phoenix-b2b-panel .pb2b-catpick-trigger,
	.phoenix-b2b-panel .pb2b-mini-cartbar-btn,
	.phoenix-b2b-panel .pb2b-pview-thumb,
	.phoenix-b2b-panel .pb2b-pview-qty-btn { transition: none; }
	.pb2b-catpick-sheet { animation: none; }
}