/**
 * PhoenixB2B — PANEL KLIENTA V3.11 — LISTING UX/UI UPGRADE (Sklep / Katalog B2B).
 *
 * Cel: dopracowany, „SaaS-owy" listing produktów dla klienta hurtowego (2000+
 * SKU). Warstwa wyłącznie wizualno-układowa — ZERO zmian w logice WooCommerce,
 * koszyka, cen, MOQ, ulubionych, filtrów czy wyszukiwarki.
 *
 * Co robi ten plik:
 *   1) Siatka kafelków: 5 w rzędzie na dużym desktopie (panel-aware, bo panel ma
 *      własny sidebar 260px + sklep ma rail filtrów). Ladder 2/3/4/5 + tablet/mobile.
 *   2) Tryb LISTY (.pb2b-list / .pb2b-row) — pełne otokenowanie light/dark.
 *   3) Audyt light/dark KART: serce ulubionych, pill stanu, MOQ, SKU, hover —
 *      koniec z białymi pillami na ciemnym tle i jasnym tekstem na jasnym.
 *   4) Przełącznik widoku (kafelki/lista) — czytelny aktywny stan, spójny z marką.
 *
 * Zakres: ściśle `.phoenix-b2b-panel`. Kolory wyłącznie z tokenów
 * (panel-v3-tokens.css) → light/dark automatycznie. Ładowany JAKO OSTATNI
 * (zależność od panel-v3-10) → wygrywa w kaskadzie.
 */

/* =========================================================================
 * 1. SIATKA KAFELKÓW — 5 W RZĘDZIE NA DUŻYM DESKTOPIE (panel-aware)
 *
 * W panelu szerokość pod karty jest mniejsza niż na publicznym sklepie:
 *   content = viewport − sidebar(260, ≥1200px) − padding,  potem  − rail filtrów(≈224).
 * Dlatego 5 kolumn włączamy dopiero od ~1600px; 4 na laptopie/średnim,
 * 3 na tablecie, 2 na mobile. Zgodnie z doprecyzowaniem zlecenia.
 *
 * Zakres wyłącznie `.pb2b-shop-results` → nie rusza siatek widżetów
 * (ostatnio oglądane / najczęściej kupowane / sekcje).
 * ========================================================================= */
@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;
	}
	/* Lekko 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: 1600px) {
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}
}

/* Kompaktowy, „scan-friendly" rytm karty przy 4–5 w rzędzie. */
@media (min-width: 1200px) {
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-media { margin: 10px 10px 0; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-image img { padding: 12px; }
	.phoenix-b2b-panel .pb2b-shop-results .pb2b-card-body { padding: 12px 13px 14px; 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: 13px; }
	.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; }
}

/* =========================================================================
 * 2. KART — AUDYT LIGHT/DARK (token everywhere; koniec białych pilli)
 * ========================================================================= */

/* Hover karty — token zamiast jasnoszarego #dcdce6 (był widoczny też w dark). */
.phoenix-b2b-panel .pb2b-card-grid .pb2b-card:hover,
.phoenix-b2b-panel .pb2b-shop-results .pb2b-card:hover {
	border-color: var(--pb2b-primary);
}

/* SKU — wartość czytelna w obu trybach. */
.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 { color: #ec4899; border-color: #f9a8d4; }
.phoenix-b2b-panel .pb2b-card-fav.is-fav { color: #ec4899; border-color: #f9a8d4; }

/* Pill stanu (stock) — tło/obrys z tokenów; kolor tekstu/kropki = semantyka
 * z tokenów (czytelna i na jasnym, i na ciemnym). */
.phoenix-b2b-panel .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 (nie #f3f3f7 / #3a3a48). */
.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); }

/* =========================================================================
 * 3. TRYB LISTY (.pb2b-list / .pb2b-row) — PEŁNE OTOKENOWANIE LIGHT/DARK
 *
 * Wiersze NIE są dziećmi `.pb2b-card-grid`, więc remap zmiennych --card-*
 * (z panel-v3-1/3) ich nie obejmuje. Re-mapujemy je tutaj → baza z
 * product-card.css automatycznie dostaje kolory motywu.
 * ========================================================================= */
.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-row {
	background: var(--pb2b-bg-2);
	border-color: var(--pb2b-border);
	color: var(--pb2b-text);
}
.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); }

/* Ikony akcji w wierszu (ulubione / podgląd). */
.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); }

/* CTA wiersza — gradient marki / outline na tokenach (gwarantowany kontrast). */
.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); }

/* Stan w wierszu używa tych samych klas co kafelek → dziedziczy fixy z sekcji 2. */
.phoenix-b2b-panel .pb2b-row .pb2b-card-stock {
	background: var(--pb2b-bg-2);
	border-color: var(--pb2b-border);
}

/* Listę centrujemy w tej samej szerokości co siatkę sklepu w panelu. */
@media (min-width: 1024px) {
	.phoenix-b2b-panel .pb2b-shop .pb2b-shop-list { max-width: 100%; }
}

/* =========================================================================
 * 4. PRZEŁĄCZNIK WIDOKU (kafelki / lista) — czytelny, spójny z marką
 * ========================================================================= */
.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);
}

/* =========================================================================
 * 5. DROBNE DOMKNIĘCIA RESPONSYWNE
 * ========================================================================= */
/* Bardzo wąski mobile — utrzymaj 2 kolumny kafelków (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;
	}
}