/**
 * PhoenixB2B — PANEL KLIENTA V3.12 — LISTING UX/UI FINAL (Sklep B2B w panelu).
 *
 * Domyka upgrade listingu z v2.10.2 PO STRONIE PANELU (ostatnia nakładka w
 * kaskadzie, zależność od panel-v3-11). Warstwa wyłącznie wizualno-układowa —
 * ZERO zmian w logice WooCommerce, koszyka, cen, MOQ, ulubionych, filtrów ani
 * wyszukiwarki. Kolory wyłącznie z tokenów (panel-v3-tokens.css) → light/dark
 * działa automatycznie. Zakres ściśle `.phoenix-b2b-panel`.
 *
 * Co poprawia względem panel-v3-11:
 *   1) Drabina kolepek w panelu — 5 w rzędzie od 1500px (było 1600), pełna,
 *      jednoznaczna drabina 2/3/4/5 z !important → wygrywa bez „loterii kaskady".
 *   2) Remap zmiennych --card-* dla SIATKI i LISTY w jednym miejscu (pewność,
 *      że kafelek i wiersz biorą kolory motywu — koniec białych pól w dark).
 *   3) Premium kafelek: równy wiersz cena/MOQ, czytelny stan, serce nieucięte.
 *   4) Tryb listy: spójny z motywem, wyraźne CTA, dobry kontrast.
 *   5) Przełącznik widoku (kafelki/lista) — mocny aktywny stan, focus-ring.
 */

/* =========================================================================
 * 1. REMAP TOKENÓW KART (SIATKA + LISTA) — single source w panelu
 *    Re-deklaracja dla pewności (panel-v3-1 robi to dla siatki, panel-v3-11
 *    dla listy) — tu mamy jedno miejsce gwarantujące oba w obu motywach.
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-card-grid,
.phoenix-b2b-panel .pb2b-card,
.phoenix-b2b-panel .pb2b-list,
.phoenix-b2b-panel .pb2b-row {
	--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,
.phoenix-b2b-panel .pb2b-row { color: var(--pb2b-text); }

/* =========================================================================
 * 2. SIATKA — 5 W RZĘDZIE OD 1500px (panel-aware: sidebar 260 + rail 224)
 *    Pełna drabina z !important → jednoznaczna, niezależna od kolejności.
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
	align-items: stretch;
}
@media (min-width: 768px) {
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
}
@media (min-width: 1200px) {
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
	/* Węższy rail filtrów daje kartom oddech przy gęstszej siatce. */
	.phoenix-b2b-panel .pb2b-shop .pb2b-shop-layout { grid-template-columns: 224px minmax(0, 1fr); }
}
@media (min-width: 1500px) {
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}
}
/* Bardzo wąski mobile — trzymaj 2 kolumny (nie spadaj do 1). */
@media (max-width: 380px) {
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}

/* Kompaktowy rytm kafelka przy 4–5 w rzędzie. */
@media (min-width: 1200px) {
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-media { margin: 9px 9px 0; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-image img { padding: 12px; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-body { padding: 11px 12px 13px; gap: 6px; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-title { font-size: 13.5px; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-price-value { font-size: 19px; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-btn,
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-btn-view,
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-btn-options { height: 40px; font-size: 12.5px; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-actions-row { display: flex; gap: 8px; align-items: stretch; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-actions-row > .pb2b-card-btn:first-child { flex: 1 1 auto; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-btn-qv { width: 40px; flex: 0 0 40px; padding: 0; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-btn-qv-text { display: none; }
}

/* =========================================================================
 * 3. KAFELEK — AUDYT LIGHT/DARK (token everywhere; koniec białych pilli)
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-card-grid .pb2b-card:hover,
.phoenix-b2b-panel .pb2b-shop-results .pb2b-card:hover { border-color: var(--pb2b-primary); }

.phoenix-b2b-panel .pb2b-card-sku span { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-card-sku-empty { color: var(--pb2b-text-muted); }

/* Serce ulubionych — tło/obrys/ikona z tokenów (nie biały krążek na ciemnym). */
.phoenix-b2b-panel .pb2b-card-fav {
	background: var(--pb2b-bg-2);
	border-color: var(--pb2b-border);
	color: var(--pb2b-text-muted);
	box-shadow: var(--pb2b-shadow-sm);
}
.phoenix-b2b-panel .pb2b-card-fav:hover,
.phoenix-b2b-panel .pb2b-card-fav.is-fav { color: #ec4899; border-color: #f9a8d4; }

/* Pill stanu — tło/obrys z tokenów; semantyka kolorów z tokenów. */
.phoenix-b2b-panel .pb2b-card-stock,
.phoenix-b2b-panel .pb2b-row .pb2b-card-stock {
	background: var(--pb2b-bg-2);
	border-color: var(--pb2b-border);
	box-shadow: var(--pb2b-shadow-sm);
}
.phoenix-b2b-panel .pb2b-card-stock-in   { color: var(--pb2b-success-strong); }
.phoenix-b2b-panel .pb2b-card-stock-low,
.phoenix-b2b-panel .pb2b-card-stock-back { color: var(--pb2b-warning-strong); }
.phoenix-b2b-panel .pb2b-card-stock-out  { color: var(--pb2b-danger-strong); }

/* MOQ + „MOQ —" — chip na tokenach. */
.phoenix-b2b-panel .pb2b-card-moq {
	background: var(--pb2b-bg-3);
	border-color: var(--pb2b-border);
	color: var(--pb2b-text-soft);
}
.phoenix-b2b-panel .pb2b-card-moq strong { color: var(--pb2b-primary-strong); }
.phoenix-b2b-panel .pb2b-card-moq-empty {
	background: var(--pb2b-bg-3);
	border-color: var(--pb2b-border);
	color: var(--pb2b-text-muted);
}

/* Karton / pack + stara cena — wyciszone, zawsze czytelne. */
.phoenix-b2b-panel .pb2b-card-pack,
.phoenix-b2b-panel .pb2b-card-price-old { color: var(--pb2b-text-muted); }

/* „Zapytaj o cenę" / „Dostępne po zalogowaniu" — pill primary, czytelny. */
.phoenix-b2b-panel .pb2b-card-price-na {
	color: var(--pb2b-primary-strong);
	background: var(--pb2b-primary-soft);
}
.phoenix-b2b-panel .pb2b-card-price-locked {
	color: var(--pb2b-primary-strong);
	background: var(--pb2b-primary-soft);
	border-color: var(--pb2b-primary-soft);
}

/* Przyciski kafelka — 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); }

/* =========================================================================
 * 4. TRYB LISTY (.pb2b-row) — kolory/kontrast z tokenów
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-row {
	background: var(--pb2b-bg-2);
	border-color: var(--pb2b-border);
}
.phoenix-b2b-panel .pb2b-row:hover { border-color: var(--pb2b-primary); box-shadow: var(--pb2b-shadow); }
.phoenix-b2b-panel .pb2b-row-media { background: var(--pb2b-bg-3); }
.phoenix-b2b-panel .pb2b-row-title { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-row-title:hover { color: var(--pb2b-primary-strong); }
.phoenix-b2b-panel .pb2b-row-sku { color: var(--pb2b-text-muted); }
.phoenix-b2b-panel .pb2b-row-sku span { color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-row-pack { color: var(--pb2b-text-muted); }

.phoenix-b2b-panel .pb2b-row-fav,
.phoenix-b2b-panel .pb2b-row-qv {
	background: var(--pb2b-bg-2);
	border-color: var(--pb2b-border);
	color: var(--pb2b-text-muted);
}
.phoenix-b2b-panel .pb2b-row-fav:hover,
.phoenix-b2b-panel .pb2b-row-fav.is-fav { color: #ec4899; border-color: #f9a8d4; }
.phoenix-b2b-panel .pb2b-row-qv:hover { color: var(--pb2b-primary-strong); border-color: var(--pb2b-primary); }

.phoenix-b2b-panel .pb2b-row-btn-cart { background: var(--pb2b-accent-grad); color: var(--pb2b-primary-contrast); border-color: transparent; }
.phoenix-b2b-panel .pb2b-row-btn-cart:hover,
.phoenix-b2b-panel .pb2b-row-btn-cart:focus { color: var(--pb2b-primary-contrast); }
.phoenix-b2b-panel .pb2b-row-btn-view { background: var(--pb2b-bg-2); color: var(--pb2b-text); border-color: var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-row-btn-view:hover { background: var(--pb2b-bg-3); color: var(--pb2b-primary-strong); border-color: var(--pb2b-primary); }
.phoenix-b2b-panel .pb2b-row-btn-options { background: var(--pb2b-primary-soft); color: var(--pb2b-primary-strong); border-color: var(--pb2b-primary-soft); }
.phoenix-b2b-panel .pb2b-row-btn-options:hover { background: var(--pb2b-primary); color: var(--pb2b-primary-contrast); border-color: var(--pb2b-primary); }

/* =========================================================================
 * 5. PRZEŁĄCZNIK WIDOKU (kafelki / lista) — mocny aktywny stan, focus-ring
 * ========================================================================= */
.phoenix-b2b-panel .pb2b-shop-view-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	border: 1px solid var(--pb2b-border-strong);
	border-radius: var(--pb2b-radius-sm);
	overflow: hidden;
	background: var(--pb2b-bg-2);
}
.phoenix-b2b-panel .pb2b-shop-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--pb2b-text-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.phoenix-b2b-panel .pb2b-shop-view-btn + .pb2b-shop-view-btn { border-left: 1px solid var(--pb2b-border); }
.phoenix-b2b-panel .pb2b-shop-view-btn:hover { color: var(--pb2b-text); background: var(--pb2b-bg-3); }
.phoenix-b2b-panel .pb2b-shop-view-btn.is-active {
	background: var(--pb2b-accent-grad);
	color: var(--pb2b-primary-contrast);
}
.phoenix-b2b-panel .pb2b-shop-view-btn:focus-visible {
	outline: none;
	box-shadow: var(--pb2b-shadow-focus);
	position: relative;
	z-index: 1;
}

/* Pasek wyników — licznik produktów jako wyraźny, wyciszony chip. */
.phoenix-b2b-panel .pb2b-shop-resultbar { margin-bottom: 14px; }
.phoenix-b2b-panel .pb2b-shop-count {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--pb2b-text-soft);
}