/**
 * PhoenixB2B — kanoniczny kafelek produktu B2B (premium).
 *
 * v2.8.4 — upgrade wizualny „premium marketplace B2B".
 * Style scope'owane do `.pb2b-card` oraz `.pb2b-card-grid` — nie kolidują
 * z resztą layoutu. Plik ładowany PO shop.css (zależność `phoenix-b2b-shop`),
 * tylko na stronach sklepu/shortcode (gating w Phoenix_B2B_Assets).
 *
 * Markup karty: public/views/partials/product-card.php (single source of truth).
 * Tokeny `--s-*` pochodzą z shop.css (z fallbackami, gdyby plik nie był obecny).
 */

/* ===================== Zadanie 4: BRAK PODKREŚLEŃ =====================
 * Twardo usuwamy text-decoration ze WSZYSTKICH linków i elementów karty
 * oraz sklepu B2B. Zakres ograniczony do kontenerów B2B — nie dotyka reszty
 * strony/motywu. !important pokonuje globalne style motywu (np. underline a:hover).
 */
.pb2b-shop-shell a,
.pb2b-shop-shell a:hover,
.pb2b-shop-shell a:focus,
.pb2b-shop a,
.pb2b-shop a:hover,
.pb2b-shop a:focus,
.phoenix-b2b-shop a,
.phoenix-b2b-shop a:hover,
.pb2b-card-grid a,
.pb2b-card a,
.pb2b-card a:hover,
.pb2b-card a:focus,
.pb2b-card-title,
.pb2b-card-name,
.pb2b-card-btn,
.pb2b-card__title,
.pb2b-card__name,
.pb2b-card__button,
.pb2b-shop-card a,
.pb2b-shop-card-title { text-decoration: none !important; }

/* ============================ TOKENY KARTY ============================ */
.pb2b-card-grid,
.pb2b-card {
	--card-bg: #ffffff;
	--card-border: #e8e8ef;
	--card-radius: 22px;
	--card-media-bg: #f5f5f7;
	--card-media-radius: 20px;
	--card-ink: #16161d;
	--card-muted: #6b6b7b;
	--card-primary: #7c3aed;
	--card-primary-2: #6d28d9;
	--card-shadow: 0 1px 2px rgba(22, 22, 29, .05), 0 1px 3px rgba(22, 22, 29, .04);
	--card-shadow-hover: 0 18px 40px rgba(22, 22, 29, .14), 0 4px 12px rgba(22, 22, 29, .08);
	--card-gap: 24px;
}

/* v2.10.2 FIX — tryb listy (.pb2b-list / .pb2b-row) NIE jest dzieckiem
 * .pb2b-card-grid, więc NIE dziedziczy tokenów --card-* zdefiniowanych wyżej.
 * Bez tego na publicznym sklepie (poza panelem) wiersze listy miały
 * przezroczyste tło, niewidoczne obramowania i odziedziczony tekst. Definiujemy
 * te same jasne wartości bazowe (panel remapuje je na tokeny motywu w
 * panel-v3-11/-12, więc dark/light w panelu działa dalej). Cień hover jest
 * lżejszy niż w kafelku — wiersz to płaski, „operacyjny" element. */
.pb2b-list,
.pb2b-row {
	--card-bg: #ffffff;
	--card-border: #e8e8ef;
	--card-media-bg: #f5f5f7;
	--card-ink: #16161d;
	--card-muted: #6b6b7b;
	--card-primary: #7c3aed;
	--card-primary-2: #6d28d9;
	--card-shadow: 0 1px 2px rgba(22, 22, 29, .05), 0 1px 3px rgba(22, 22, 29, .04);
	--card-shadow-hover: 0 8px 22px rgba(22, 22, 29, .10), 0 2px 6px rgba(22, 22, 29, .06);
}

/* ============================ SIATKA ============================
 * Zadanie 2 — twarde breakpointy (bez auto-fill minmax(280px), które blokowało
 * 4 kolumny). Kolejność: domyślnie 4, potem zwężanie w dół.
 *   >= 1400px : 4 kolumny
 *   1200–1399 : 3 kolumny
 *    768–1199 : 2 kolumny
 *    360–767  : 2 kolumny (kompaktowe karty mobilne)
 *      < 360  : 1 kolumna (tylko gdy naprawdę brak miejsca)
 */
.pb2b-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* standalone (bez filtrów) = 4 */
	gap: var(--card-gap);
	align-items: stretch; /* równe wysokości kart */
}

/* Sklep z filtrami: siatka żyje w .pb2b-shop-main. Stałe 4 kolumny na szerokim
 * desktopie (sidebar ~260px + reszta na produkty), karta ~220–260px. */
.pb2b-shop-main .pb2b-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Override liczby kolumn z shortcode'u [phoenix_b2b_products_grid columns="N"]. */
.pb2b-card-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb2b-card-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb2b-card-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb2b-card-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pb2b-card-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* --- Responsywność (kolejność w pliku ważna; ostatnie pasujące wygrywa) --- */

/* 1200–1399px: 3 kolumny. */
@media (max-width: 1399px) {
	.pb2b-card-grid,
	.pb2b-card-cols-4,
	.pb2b-card-cols-5,
	.pb2b-card-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pb2b-shop-main .pb2b-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 768–1199px: 2 kolumny. */
@media (max-width: 1199px) {
	.pb2b-card-grid,
	.pb2b-card-cols-3,
	.pb2b-card-cols-4,
	.pb2b-card-cols-5,
	.pb2b-card-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.pb2b-shop-main .pb2b-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* 360–767px: 2 kolumny kompaktowe (mobile). */
@media (max-width: 767px) {
	.pb2b-card-grid,
	.pb2b-card-cols-2,
	.pb2b-card-cols-3,
	.pb2b-card-cols-4,
	.pb2b-card-cols-5,
	.pb2b-card-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
	.pb2b-shop-main .pb2b-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
}

/* < 360px: 1 kolumna — tylko gdy naprawdę brak miejsca. */
@media (max-width: 359px) {
	.pb2b-card-grid,
	.pb2b-card-cols-2,
	.pb2b-card-cols-3,
	.pb2b-card-cols-4,
	.pb2b-card-cols-5,
	.pb2b-card-cols-6 { grid-template-columns: 1fr; gap: 12px; }
	.pb2b-shop-main .pb2b-card-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* =====================================================================
 * v2.8.10 — HARDENING mobilnej siatki (2 kolumny na telefonie).
 *
 * Kontener nowego sklepu ma KLASY `pb2b-card-grid pb2b-shop-grid`. Bazowy
 * `.pb2b-shop-grid` (shop.css) używa `repeat(auto-fill, minmax(240px,1fr))`,
 * co na ekranie 360–767px daje TYLKO 1 kolumnę. Dotąd 2 kolumny wygrywały
 * jedynie dzięki kolejności ładowania arkuszy (product-card.css po shop.css).
 * Plugin cache/łączenia CSS potrafi tę kolejność zmienić → telefon spada do
 * 1 kolumny. Poniższe reguły mają WYŻSZĄ specyficzność (podwojona klasa),
 * więc wymuszają układ niezależnie od kolejności wczytania arkuszy.
 *
 * Zakres: WYŁĄCZNIE nowy kafelek (.pb2b-card-grid). Stary kafelek
 * (.pb2b-shop-grid:not(.pb2b-card-grid)) i desktop pozostają nietknięte.
 * ===================================================================== */
@media (max-width: 767px) {
	.pb2b-card-grid.pb2b-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 11px;
	}
}
@media (max-width: 359px) {
	/* Bardzo wąskie ekrany — 1 kolumna, gdy 2 kafelki byłyby zbyt ściśnięte. */
	.pb2b-card-grid.pb2b-card-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ============================ KARTA ============================ */
.pb2b-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;                 /* równa wysokość w obrębie wiersza */
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--card-radius);
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.pb2b-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--card-shadow-hover);
	border-color: #dcdce6;
}

/* --------- MEDIA (zdjęcie + badge + serce + stock) --------- */
.pb2b-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--card-media-bg);
	border-radius: var(--card-media-radius);
	margin: 12px 12px 0;
	/* v2.10.2 — NIE przycinamy media: badge / serce / pill stanu mają cienie i
	   hover-scale, a wcześniejsze overflow:hidden ucinało je w rogach (bug
	   „ucięte serduszko"). Zaokrąglenie zdjęcia przejmuje .pb2b-card-image. */
	overflow: visible;
}
.pb2b-card-image {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: inherit;        /* v2.10.2 — to zdjęcie przejmuje zaokrąglenie media */
	overflow: hidden;              /* v2.10.2 — i ono (a nie media) przycina obrazek */
	background: var(--card-media-bg);
}
/* object-fit: contain + padding → zdjęcia równe niezależnie od wymiarów,
   placeholder 404 nie rozwala karty (zawsze mieści się w polu media). */
.pb2b-card-image img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
	display: block;
	transition: transform .35s ease;
}
.pb2b-card:hover .pb2b-card-image img { transform: scale(1.04); }

/* Badge — lewy górny róg, premium pill. */
.pb2b-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;             /* Task 6 — padding 5px 9px */
	font-size: 11px;              /* Task 6 — 10–11px desktop */
	font-weight: 800;             /* Task 6 */
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;    /* Task 6 — uppercase */
	border-radius: 999px;         /* Task 6 */
	color: #fff;
	/* domyślnie gradient purple (marka B2B) */
	background: linear-gradient(135deg, #8b5cf6, #6d28d9);
	box-shadow: 0 4px 12px rgba(109, 40, 217, .30);
}
/* Automatyczne typy (legacy) — zachowane. */
.pb2b-card-badge-promo      { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 4px 12px rgba(124, 58, 237, .30); }
.pb2b-card-badge-sale       { background: linear-gradient(135deg, #f43f5e, #dc2626); box-shadow: 0 4px 12px rgba(220, 38, 38, .28); }
.pb2b-card-badge-bestseller { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #2a1a00; box-shadow: 0 4px 12px rgba(245, 158, 11, .30); }
.pb2b-card-badge-new        { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 4px 12px rgba(109, 40, 217, .30); }

/* Task 6 — paleta ręcznego badge (z edycji produktu). Klasa koloru ma
 * pierwszeństwo nad klasą typu (kolejność w pliku + ta sama specyficzność). */
.pb2b-badge--purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;     box-shadow: 0 4px 12px rgba(109, 40, 217, .30); }
.pb2b-badge--black  { background: linear-gradient(135deg, #1f2937, #0b0f1a); color: #fff;     box-shadow: 0 4px 12px rgba(15, 23, 42, .30); }
.pb2b-badge--lime   { background: linear-gradient(135deg, #a3e635, #84cc16); color: #1a2e05;  box-shadow: 0 4px 12px rgba(132, 204, 22, .30); }
.pb2b-badge--green  { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;     box-shadow: 0 4px 12px rgba(22, 163, 74, .30); }
.pb2b-badge--orange { background: linear-gradient(135deg, #fb923c, #f59e0b); color: #2a1a00;  box-shadow: 0 4px 12px rgba(245, 158, 11, .30); }
.pb2b-badge--red    { background: linear-gradient(135deg, #f43f5e, #dc2626); color: #fff;     box-shadow: 0 4px 12px rgba(220, 38, 38, .28); }
.pb2b-badge--custom { /* kolor tła ustawiany inline (style="background:#hex") */ color: #fff; box-shadow: 0 4px 12px rgba(22, 22, 29, .22); }

/* Serce ulubionych — prawy górny róg. */
.pb2b-card-fav {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--card-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #9a9aab;
	cursor: pointer;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 0 2px 6px rgba(22, 22, 29, .08);
	transition: color .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pb2b-card-fav:hover { color: #db2777; transform: scale(1.08); box-shadow: 0 4px 10px rgba(22, 22, 29, .14); }
.pb2b-card-fav.is-fav { color: #db2777; border-color: #f9a8d4; }
.pb2b-card-heart { display: block; }

/* Stock pill — dół pola media, z kolorową kropką stanu. */
.pb2b-card-stockwrap {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
}
.pb2b-card-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px 5px 10px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid var(--card-border);
	box-shadow: 0 2px 8px rgba(22, 22, 29, .10);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.pb2b-card-stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
.pb2b-card-stock-in   { color: #15803d; } /* dostępny / „N szt." — zielona kropka */
.pb2b-card-stock-low  { color: #b45309; } /* mały zapas (1–15) — bursztynowa */
.pb2b-card-stock-back { color: #b45309; } /* na zamówienie — bursztynowa (Task 5) */
.pb2b-card-stock-out  { color: #b91c1c; } /* brak — czerwona */

/* --------- BODY --------- */
.pb2b-card-body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 14px 16px 16px;
	flex: 1; /* dopycha akcje do dołu → równe karty */
}
.pb2b-card-sku {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--card-muted);
	white-space: nowrap;       /* SKU max 1 linia */
	overflow: hidden;
	text-overflow: ellipsis;
}
.pb2b-card-sku span { color: #3a3a48; }
.pb2b-card-sku-empty { font-style: italic; opacity: .7; font-weight: 500; }

.pb2b-card-title {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.34;
	color: var(--card-ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.68em; /* dwie linie → równe wiersze */
	transition: color .15s ease;
}
.pb2b-card-title:hover { color: var(--card-primary); }

/* Ceny + MOQ. */
.pb2b-card-pricing {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 8px;
	flex-wrap: wrap;
}
.pb2b-card-price-old {
	display: block;
	width: 100%;
	font-size: 12.5px;
	color: var(--card-muted);
	text-decoration: line-through;
	line-height: 1.2;
}
.pb2b-card-price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
	min-width: 0;
}
.pb2b-card-price-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--card-ink);
	line-height: 1.05;
	letter-spacing: -.01em;
}
/* wc_price wstawia własny <span class="woocommerce-Price-amount"> — przejmujemy kolor. */
.pb2b-card-price-value .woocommerce-Price-amount,
.pb2b-card-price-value bdi { color: inherit; }
.pb2b-card-price-suffix {
	font-size: 12px;
	font-weight: 600;
	color: var(--card-muted);
}
.pb2b-card-price-na {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--card-primary);
	background: rgba(124, 58, 237, .08);
	border-radius: 999px;
}

/* NEW v2.8.9 — „Cena dla zalogowanych" (gość / pending / rejected).
 * Lekki, premium pill — spójny z „Cena na zapytanie", subtelne fioletowe tło,
 * nie wygląda jak błąd i nie zmienia wysokości karty. */
.pb2b-card-price-locked {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.1;
	color: #6d28d9;
	background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(124, 58, 237, .08));
	border: 1px solid rgba(124, 58, 237, .18);
	border-radius: 999px;
	white-space: nowrap;
}
.pb2b-card-price-locked svg { flex: 0 0 auto; opacity: .85; }

.pb2b-card-moq {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 700;
	color: #3a3a48;
	background: #f3f3f7;
	border: 1px solid var(--card-border);
	border-radius: 8px;
	white-space: nowrap;
}
.pb2b-card-moq strong { color: var(--card-primary); }
/* „MOQ —" gdy brak minimalnej ilości — subtelne, by layout pozostał równy. */
.pb2b-card-moq-empty {
	color: var(--card-muted);
	background: #f7f7fa;
	border-color: #eeeef3;
	font-weight: 600;
}

.pb2b-card-pack {
	font-size: 11.5px;
	color: var(--card-muted);
	margin-top: 2px;
}

/* --------- AKCJE --------- */
.pb2b-card-actions { margin-top: 14px; }
.pb2b-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 999px;          /* Task 8 — pełny pill */
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .15s ease;
}
.pb2b-card-btn svg { flex: 0 0 auto; }

/* „Do koszyka" — pełny premium button, gradient purple. */
.pb2b-card-btn-cart {
	background: linear-gradient(135deg, #7c3aed, #6d28d9);
	color: #fff;
	box-shadow: 0 6px 16px rgba(109, 40, 217, .26);
}
.pb2b-card-btn-cart:hover { box-shadow: 0 10px 22px rgba(109, 40, 217, .34); transform: translateY(-1px); color: #fff; }
.pb2b-card-btn-cart:active { transform: translateY(0); }
.pb2b-card-btn-cart:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; }

/* „Zaloguj się po ceny B2B" — outline purple. */
.pb2b-card-btn-login {
	background: #fff;
	color: var(--card-primary);
	border-color: var(--card-primary);
}
.pb2b-card-btn-login:hover { background: var(--card-primary); color: #fff; }

/* „Zobacz produkt" — premium outline (nie zwykły link). */
.pb2b-card-btn-view {
	height: 42px;                 /* Task 8 — outline nieco niższy niż „Do koszyka" */
	background: #fff;
	color: var(--card-ink);
	border-color: var(--card-border);
	box-shadow: 0 1px 2px rgba(22, 22, 29, .04);
}
.pb2b-card-btn-view:hover { background: #faf9ff; border-color: var(--card-primary); color: var(--card-primary); }

/* „Wybierz opcje" — approved B2B, produkt wariantowy. Outline z akcentem marki. */
.pb2b-card-btn-options {
	height: 44px;
	background: #faf9ff;
	color: var(--card-primary);
	border-color: #ddd3f7;
	font-weight: 700;
}
.pb2b-card-btn-options:hover { background: var(--card-primary); color: #fff; border-color: var(--card-primary); }

/* Tryb kompaktowy (np. mniejsze sekcje). */
.pb2b-card-grid-compact .pb2b-card-title { font-size: 13px; }
.pb2b-card-grid-compact .pb2b-card-price-value { font-size: 18px; }
.pb2b-card-grid-compact .pb2b-card-btn { height: 40px; }

/* Wewnątrz ciemnego panelu klienta karty zostają jasne (czytelność) — bez zmian. */

/* =====================================================================
 * v2.8.6 — SEKCJA PRODUKTÓW na stronie głównej / landingach.
 * Shortcode: [phoenix_b2b_products_section] (grid: [phoenix_b2b_products_grid]).
 * Grid korzysta z .pb2b-card-grid / .pb2b-card-cols-N — TE SAME karty co sklep.
 * (4 desktop → 3 laptop → 2 tablet → 1 mobile dziedziczy z reguł wyżej.)
 * ===================================================================== */
.pb2b-products-section {
	box-sizing: border-box;
	width: 100%;
	background: #ffffff;          /* białe/jasne tło sekcji */
}
.pb2b-products-section *,
.pb2b-products-section *::before,
.pb2b-products-section *::after { box-sizing: border-box; }

.pb2b-products-section-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 70px 24px;          /* desktop */
}

.pb2b-products-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}
.pb2b-products-section-heading { min-width: 0; }

.pb2b-products-section-label {
	display: inline-block;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7c3aed;              /* mały label uppercase fioletowy */
}
.pb2b-products-section-title {
	margin: 0;
	max-width: 600px;            /* nagłówek mocny, ograniczony do ~600px */
	font-size: 34px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: #111827;
}

/* „Zobacz wszystkie →" — po prawej na desktopie. */
.pb2b-products-section-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	white-space: nowrap;
	height: 46px;
	padding: 0 20px;
	border: 1px solid #e8e8ef;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: #16161d;
	background: #fff;
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.pb2b-products-section-link svg { flex: 0 0 auto; transition: transform .15s ease; }
.pb2b-products-section-link:hover {
	border-color: #7c3aed;
	color: #7c3aed;
	box-shadow: 0 6px 16px rgba(124, 58, 237, .14);
	transform: translateY(-1px);
}
.pb2b-products-section-link:hover svg { transform: translateX(3px); }

/* Tablet. */
@media (max-width: 1024px) {
	.pb2b-products-section-inner { padding: 50px 20px; }
	.pb2b-products-section-title { font-size: 28px; }
}

/* Mobile: button pod nagłówkiem, wyrównany do lewej. */
@media (max-width: 600px) {
	.pb2b-products-section-inner { padding: 40px 16px; }
	.pb2b-products-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 24px;
	}
	.pb2b-products-section-title { font-size: 24px; }
	.pb2b-products-section-link { align-self: flex-start; }
}

/* =====================================================================
 * Zadanie 4 — MOBILE 2 kolumny: kompaktowa karta (360–767px).
 * Mniejsze odstępy, typografia i przyciski, żeby dwie karty mieściły się
 * wygodnie obok siebie bez ściskania treści.
 * ===================================================================== */
@media (max-width: 767px) {
	.pb2b-card { border-radius: 16px; }              /* Task 4 — card radius 16px */
	.pb2b-card-media { margin: 8px 8px 0; }
	.pb2b-card-image img { padding: 8px; }            /* Task 4 — image padding 8px */

	.pb2b-card-badge { font-size: 9px; padding: 4px 8px; } /* Task 4 — badge 9–10px */
	.pb2b-card-stock { font-size: 9.5px; padding: 4px 8px 4px 7px; gap: 5px; } /* Task 4 — stock 9–10px */
	.pb2b-card-stock::before { width: 6px; height: 6px; }
	.pb2b-card-stockwrap { left: 10px; bottom: 10px; }
	.pb2b-card-fav { width: 32px; height: 32px; top: 9px; right: 9px; }
	.pb2b-card-fav .pb2b-card-heart { width: 16px; height: 16px; }

	.pb2b-card-body { padding: 10px 11px 12px; gap: 5px; }
	.pb2b-card-sku { font-size: 9px; }                /* Task 4 — SKU 9px */
	.pb2b-card-title {
		font-size: 12px;                              /* Task 4 — title 11–12px */
		line-height: 1.28;
		min-height: 2.56em;
	}
	.pb2b-card-price-value { font-size: 16px; }       /* Task 4 — price 15–17px */
	.pb2b-card-price-suffix { font-size: 10px; }
	.pb2b-card-price-old { font-size: 11px; }
	.pb2b-card-moq { font-size: 9.5px; padding: 3px 7px; }
	.pb2b-card-pack { font-size: 10px; }

	.pb2b-card-actions { margin-top: 10px; }
	.pb2b-card-btn {
		height: 35px;                                 /* Task 4 — button height 34–36px */
		font-size: 11px;                              /* Task 4 — button font 11px */
		gap: 6px;
	}
	.pb2b-card-btn-view { height: 35px; }
	.pb2b-card-btn svg { width: 14px; height: 14px; }
}

/* =====================================================================
 * v2.8.9 — PRODUCT CARD PRO: rząd przycisków (główny + quick view),
 * kalkulator zysku oraz modal szybkiego podglądu.
 * Scope: .pb2b-card / .pb2b-qv-modal — bez kolizji z motywem.
 * ===================================================================== */

/* ---- Rząd akcji: główny button (flex) + quick view (kwadrat) ---- */
.pb2b-card-actions-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.pb2b-card-actions-row > .pb2b-card-btn:not(.pb2b-card-btn-qv) {
	flex: 1 1 auto;
	width: auto;            /* nadpisuje width:100% bazowego buttona */
	min-width: 0;
}

/* Quick view — kwadratowy ikonowy button obok głównego. */
.pb2b-card-btn-qv {
	flex: 0 0 44px;
	width: 44px;
	padding: 0;
	background: #fff;
	color: var(--card-ink);
	border-color: var(--card-border);
	box-shadow: 0 1px 2px rgba(22, 22, 29, .04);
}
.pb2b-card-btn-qv:hover {
	background: #faf9ff;
	border-color: var(--card-primary);
	color: var(--card-primary);
}
.pb2b-card-btn-qv-text { display: none; }   /* desktop: tylko ikona oka */

/* ---- Kalkulator zysku (front-only) ---- */
.pb2b-card-calc {
	margin-top: 10px;
	padding: 9px 11px 10px;
	background: linear-gradient(180deg, #faf9ff, #f3f0fd);
	border: 1px solid #e9e3fb;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pb2b-card-calc-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--card-muted);
	line-height: 1.2;
}
.pb2b-card-calc-input {
	position: relative;
	display: flex;
	align-items: center;
}
.pb2b-card-calc-field {
	width: 100%;
	height: 34px;
	padding: 0 32px 0 10px;
	border: 1px solid var(--card-border);
	border-radius: 9px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--card-ink);
	line-height: 1;
	-moz-appearance: textfield;
	appearance: textfield;
}
.pb2b-card-calc-field::-webkit-outer-spin-button,
.pb2b-card-calc-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pb2b-card-calc-field:focus {
	outline: none;
	border-color: var(--card-primary);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.pb2b-card-calc-cur {
	position: absolute;
	right: 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--card-muted);
	pointer-events: none;
}
.pb2b-card-calc-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.pb2b-card-calc-profit {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
	font-size: 12px;
	color: var(--card-muted);
}
.pb2b-card-calc-profit strong {
	font-size: 14px;
	font-weight: 800;
	color: #15803d;          /* zysk dodatni — zielony */
	white-space: nowrap;
}
.pb2b-card-calc-pill {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 800;
	background: rgba(21, 128, 61, .12);
	color: #15803d;
	white-space: nowrap;
}
/* Wariant „brak/ujemny zysk" — sell <= cost. */
.pb2b-card-calc.is-neg .pb2b-card-calc-profit strong { color: #c2410c; }
.pb2b-card-calc.is-neg .pb2b-card-calc-pill {
	background: rgba(234, 88, 12, .14);
	color: #c2410c;
}

/* ---- MOBILE (≤767px): kompaktowy kalkulator + ikonowy quick view,
 *      aby utrzymać 2 kolumny. ---- */
@media (max-width: 767px) {
	.pb2b-card-actions-row { gap: 6px; }
	.pb2b-card-btn-qv { flex: 0 0 35px; width: 35px; }
	.pb2b-card-btn-qv svg { width: 16px; height: 16px; }

	.pb2b-card-calc { margin-top: 8px; padding: 7px 8px 8px; gap: 5px; border-radius: 10px; }
	.pb2b-card-calc-label { display: none; }            /* mobile — ukryj długą etykietę */
	.pb2b-card-calc-field { height: 30px; font-size: 12.5px; padding: 0 26px 0 8px; }
	.pb2b-card-calc-cur { right: 8px; font-size: 10px; }
	.pb2b-card-calc-profit { font-size: 10.5px; }
	.pb2b-card-calc-profit strong { font-size: 12px; }
	.pb2b-card-calc-pill { font-size: 10px; padding: 2px 7px; }
}

/* =====================================================================
 * v2.8.9 — QUICK VIEW MODAL
 * overlay (dark + blur) + biały modal radius 24, max 920, 2 kolumny desktop.
 * ===================================================================== */
body.pb2b-qv-lock { overflow: hidden; }

.pb2b-qv-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}
.pb2b-qv-modal.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.pb2b-qv-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 12, 30, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: pb2bQvFade .18s ease;
}
.pb2b-qv-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1040px;
	max-height: calc(100dvh - 48px);
	overflow: auto;
	background: #fff;
	border-radius: 26px;
	box-shadow: 0 30px 80px rgba(15, 12, 30, .35);
	animation: pb2bQvPop .2s cubic-bezier(.2, .8, .25, 1);
	-webkit-overflow-scrolling: touch;
}
@keyframes pb2bQvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb2bQvPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.pb2b-qv-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(22, 22, 29, .08) !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #16161d !important;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(15, 12, 30, .16);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.pb2b-qv-close:hover {
	background: #16161d !important;
	color: #ffffff !important;
	transform: rotate(90deg);
	box-shadow: 0 6px 18px rgba(15, 12, 30, .26);
}
.pb2b-qv-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .35);
}

.pb2b-qv-loading,
.pb2b-qv-empty {
	padding: 64px 24px;
	text-align: center;
	color: #6b6b7b;
	font-size: 14px;
	font-weight: 600;
}

/* Treść — 2 kolumny (zdjęcie + dane). */
.pb2b-qv {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
}
.pb2b-qv * { box-sizing: border-box; }

.pb2b-qv-media {
	position: relative;
	background: #f5f5f7;
	border-radius: 26px 0 0 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 26px;
	min-height: 320px;
}
.pb2b-qv-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
}
.pb2b-qv-image { display: block; width: 100%; }
.pb2b-qv-image img,
.pb2b-qv-main-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	border-radius: 14px;
}

/* Miniatury galerii — pasek pod głównym zdjęciem. */
.pb2b-qv-thumbs {
	display: flex;
	gap: 10px;
	width: 100%;
	overflow-x: auto;
	padding: 2px 2px 4px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.pb2b-qv-thumb {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	padding: 4px;
	border: 1.5px solid #e8e8ef;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.pb2b-qv-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
}
.pb2b-qv-thumb:hover { border-color: #c9bdf3; transform: translateY(-1px); }
.pb2b-qv-thumb.is-active {
	border-color: #7c3aed;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
.pb2b-qv-badge {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 5px 11px;
	border-radius: 999px;
	background: #16161d;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
}

.pb2b-qv-info {
	padding: 40px 38px 34px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.pb2b-qv-stock { font-size: 12.5px; }
.pb2b-qv-title {
	margin: 0;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.2;
	color: #16161d;
	letter-spacing: -.01em;
}
.pb2b-qv-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-size: 12.5px;
	color: #6b6b7b;
}
.pb2b-qv-meta strong { color: #16161d; }

.pb2b-qv-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pb2b-qv-price-old { font-size: 14px; color: #6b6b7b; text-decoration: line-through; }
.pb2b-qv-price-value { font-size: 28px; font-weight: 800; color: #16161d; letter-spacing: -.01em; }
.pb2b-qv-price-value .woocommerce-Price-amount,
.pb2b-qv-price-value bdi { color: inherit; }
.pb2b-qv-price-suffix { font-size: 13px; font-weight: 600; color: #6b6b7b; }
.pb2b-qv-price-na,
.pb2b-qv-cta {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 700;
	color: #7c3aed;
	background: rgba(124, 58, 237, .08);
	border-radius: 12px;
}
/* NEW v2.8.9 — „Cena dla zalogowanych" w modalu (spójna z kartą). */
.pb2b-qv-price-locked {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	font-size: 14px;
	font-weight: 700;
	color: #6d28d9;
	background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(124, 58, 237, .08));
	border: 1px solid rgba(124, 58, 237, .18);
	border-radius: 12px;
}
.pb2b-qv-price-locked svg { flex: 0 0 auto; opacity: .85; }

.pb2b-qv-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: #4a4a57;
}
.pb2b-qv-attrs {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-top: 1px solid #eeeef3;
	padding-top: 12px;
}
.pb2b-qv-attr {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 12.5px;
}
.pb2b-qv-attr-label { color: #6b6b7b; font-weight: 600; }
.pb2b-qv-attr-value { color: #16161d; font-weight: 700; text-align: right; }
.pb2b-qv-cats { font-size: 12px; color: #6b6b7b; }
.pb2b-qv-cats-value { color: #16161d; font-weight: 600; }

/* NEW v2.8.9 — Warianty (selektory) w modalu. */
.pb2b-qv-variations {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 2px;
	padding-top: 12px;
	border-top: 1px solid #eeeef3;
}
.pb2b-qv-variation {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.pb2b-qv-variation-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #6b6b7b;
}
.pb2b-qv-select-wrap { position: relative; }
.pb2b-qv-select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #6b6b7b;
	border-bottom: 2px solid #6b6b7b;
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}
.pb2b-qv-select {
	width: 100%;
	height: 44px;
	padding: 0 38px 0 14px;
	border: 1px solid #e2e2ec;
	border-radius: 12px;
	background: #fff;
	color: #16161d;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pb2b-qv-select:focus {
	outline: none;
	border-color: #7c3aed;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.pb2b-qv-variation-msg {
	margin: 2px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #c2410c;
}

/* NEW v2.8.9 — Ilość + akcje (jeden rząd; mobile pełna szerokość). */
.pb2b-qv-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-top: 8px;
}
.pb2b-qv-qty {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 46px;
	border: 1px solid #e2e2ec;
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}
.pb2b-qv-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 44px;
	border: 0;
	background: transparent;
	color: #16161d;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.pb2b-qv-qty-btn:hover { background: #f5f3ff; color: #7c3aed; }
.pb2b-qv-qty-input {
	width: 52px;
	height: 44px;
	border: 0;
	border-left: 1px solid #eeeef3;
	border-right: 1px solid #eeeef3;
	background: transparent;
	text-align: center;
	font-size: 15px;
	font-weight: 800;
	color: #16161d;
	-moz-appearance: textfield;
	appearance: textfield;
}
.pb2b-qv-qty-input:focus { outline: none; }
.pb2b-qv-qty-input::-webkit-outer-spin-button,
.pb2b-qv-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pb2b-qv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 1 1 240px;
	min-width: 0;
}
.pb2b-qv-btn.is-loading { opacity: .7; cursor: progress; }
.pb2b-qv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .15s ease;
}
.pb2b-qv-btn svg { flex: 0 0 auto; }
.pb2b-qv-btn-cart {
	flex: 1 1 auto;
	background: linear-gradient(135deg, #7c3aed, #6d28d9);
	color: #fff;
	box-shadow: 0 6px 16px rgba(109, 40, 217, .26);
}
.pb2b-qv-btn-cart:hover { box-shadow: 0 10px 22px rgba(109, 40, 217, .34); transform: translateY(-1px); color: #fff; }
.pb2b-qv-btn-cart:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; }
.pb2b-qv-btn-options,
.pb2b-qv-btn-view {
	flex: 1 1 auto;
	background: #fff;
	color: #16161d;
	border-color: #e8e8ef;
}
.pb2b-qv-btn-options:hover,
.pb2b-qv-btn-view:hover { background: #faf9ff; border-color: #7c3aed; color: #7c3aed; }
.pb2b-qv-btn-login {
	background: #7c3aed;
	color: #fff;
}
.pb2b-qv-btn-login:hover { background: #6d28d9; color: #fff; }
.pb2b-qv-btn-register {
	background: #fff;
	color: #7c3aed;
	border-color: #7c3aed;
}
.pb2b-qv-btn-register:hover { background: #7c3aed; color: #fff; }

/* MOBILE: 1 kolumna. */
@media (max-width: 767px) {
	.pb2b-qv-modal.is-open { padding: 0; align-items: stretch; }
	.pb2b-qv-dialog { max-width: none; max-height: 100dvh; height: 100%; border-radius: 0; }
	.pb2b-qv { grid-template-columns: 1fr; }
	.pb2b-qv-media { border-radius: 0; min-height: 0; padding: 18px 18px 14px; gap: 10px; }
	.pb2b-qv-image img,
	.pb2b-qv-main-img { max-height: 260px; }
	.pb2b-qv-thumb { width: 52px; height: 52px; }
	.pb2b-qv-info { padding: 20px 18px 28px; gap: 10px; }
	.pb2b-qv-title { font-size: 19px; }
	.pb2b-qv-price-value { font-size: 24px; }
	.pb2b-qv-buy { flex-direction: column; align-items: stretch; }
	.pb2b-qv-qty { align-self: flex-start; }
	.pb2b-qv-actions { flex-direction: column; flex-basis: auto; }
	.pb2b-qv-btn { width: 100%; }
	.pb2b-qv-close { top: 12px; right: 12px; width: 36px; height: 36px; }
}

/* =====================================================================
 * v2.8.11 — „OBSERWOWANE / DO OBEJRZENIA PÓŹNIEJ" (Część 4)
 * ===================================================================== */
/* Kafelek — wariant gościa (link do logowania) używa tych samych kształtów. */
.pb2b-card-fav-guest { text-decoration: none; }
.pb2b-card-fav-guest:hover { color: #7c3aed; }

/* Quick View — pasek zapisu pod akcjami zakupu. */
.pb2b-qv-save-row { margin-top: 12px; }
.pb2b-qv-save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px dashed #e0d8f7;
	border-radius: 14px;
	background: #faf9ff;
	color: #6b6b7b;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
.pb2b-qv-save:hover { color: #db2777; border-color: #f9a8d4; background: #fff5f9; transform: translateY(-1px); }
.pb2b-qv-save .pb2b-qv-save-heart { flex: 0 0 auto; }
.pb2b-qv-save.is-fav {
	color: #db2777;
	border-style: solid;
	border-color: #f9a8d4;
	background: #fff0f6;
}
.pb2b-qv-save-guest:hover { color: #7c3aed; border-color: #c9bdf3; background: #f5f3ff; }

/* Quick View — inline potwierdzenie po dodaniu do koszyka. */
.pb2b-qv-added {
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px solid #bbf7d0;
	border-radius: 16px;
	background: #f0fdf4;
	animation: pb2bQvFade .18s ease;
}
.pb2b-qv-added-msg {
	display: block;
	margin-bottom: 10px;
	color: #166534;
	font-size: 13.5px;
	font-weight: 800;
}
.pb2b-qv-added-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pb2b-qv-added-actions .pb2b-qv-btn { flex: 1 1 auto; height: 42px; }
@media (max-width: 767px) {
	.pb2b-qv-added-actions { flex-direction: column; }
	.pb2b-qv-added-actions .pb2b-qv-btn { width: 100%; }
}

/* ==========================================================================
 * v2.8.21 Client Panel Shell Final — RÓWNE KAFELKI (kanon)
 * Akcje zawsze przy dole karty (margin-top:auto), a wiersz ceny/MOQ tuż pod
 * tytułem (stała pozycja). Dzięki temu — niezależnie od ceny / „na zapytanie” /
 * kalkulatora / długości nazwy / dostępności — przyciski i ceny są na równej
 * wysokości we wszystkich kartach wiersza (grid: align-items:stretch).
 * ========================================================================== */
.pb2b-card-grid .pb2b-card-pricing { margin-top: 0; min-height: 38px; align-items: center; }
.pb2b-card-grid .pb2b-card-actions { margin-top: auto; }
/* Tytuł: twardo 2 linie (nie tylko min-height) → identyczna wysokość bloku. */
.pb2b-card-grid .pb2b-card-title { height: 2.68em; min-height: 2.68em; }
/* SKU: stała wysokość, by 1 vs brak SKU nie zmieniały układu. */
.pb2b-card-grid .pb2b-card-sku { min-height: 15px; }
/* Kalkulator zysku — kompaktowy odstęp; brak = akcje i tak na dole. */
.pb2b-card-grid .pb2b-card-calc { margin-top: 6px; }


/* ==========================================================================
 * v2.10.2 — LISTING UX/UI FINAL (kafelek premium + 5-w-rzędzie + tryb listy)
 *
 * Zakres: siatka WYNIKÓW sklepu (`.pb2b-shop-results`) + tryb listy
 * (`.pb2b-list` / `.pb2b-row`). NIE rusza siatek widżetów (ostatnio oglądane /
 * najczęściej kupowane / sekcje produktów), które używają samej `.pb2b-card-grid`.
 * Kolory wyłącznie ze zmiennych `--card-*` → w panelu klienta są one remapowane
 * na tokeny motywu (panel-v3-1 / -12), więc light/dark działa automatycznie.
 *
 * Kalkulator zysku („wpisz swoją cenę / zysk") został usunięty z markupu —
 * dla pewności chowamy też ewentualne resztki w innych wywołaniach karty.
 * ========================================================================== */
.pb2b-card-calc { display: none !important; }

/* --------------------------------------------------------------------------
 * 1) SIATKA WYNIKÓW — DRABINA KOLUMN (standalone / publiczny sklep)
 *    2 (mobile) → 3 (≥720) → 4 (≥1080) → 5 (≥1400, duży desktop)
 *    W panelu klienta drabinę nadpisuje panel-v3-12 (węższa przez 2 sidebary).
 * -------------------------------------------------------------------------- */
.pb2b-shop-results .pb2b-card-grid,
.pb2b-shop-results .pb2b-shop-grid.pb2b-card-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: stretch;
}
@media (min-width: 720px) {
	.pb2b-shop-results .pb2b-card-grid,
	.pb2b-shop-results .pb2b-shop-grid.pb2b-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}
@media (min-width: 1080px) {
	.pb2b-shop-results .pb2b-card-grid,
	.pb2b-shop-results .pb2b-shop-grid.pb2b-card-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
	}
}
@media (min-width: 1400px) {
	.pb2b-shop-results .pb2b-card-grid,
	.pb2b-shop-results .pb2b-shop-grid.pb2b-card-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 18px;
	}
}

/* --------------------------------------------------------------------------
 * 2) KAFELEK — RYTM PREMIUM (równe sekcje, czytelny scan, lekki wizualnie)
 * -------------------------------------------------------------------------- */
.pb2b-shop-results .pb2b-card { border-radius: 18px; }
.pb2b-shop-results .pb2b-card-media { margin: 10px 10px 0; }
.pb2b-shop-results .pb2b-card-image img { padding: 14px; }
.pb2b-shop-results .pb2b-card-body { padding: 13px 14px 14px; gap: 7px; }
.pb2b-shop-results .pb2b-card-sku { font-size: 10.5px; letter-spacing: .045em; }
.pb2b-shop-results .pb2b-card-title { font-size: 14px; line-height: 1.32; }
.pb2b-shop-results .pb2b-card-price-value { font-size: 20px; }
.pb2b-shop-results .pb2b-card-actions { margin-top: 12px; }

/* Cena + MOQ — zawsze ten sam wiersz: cena do lewej, MOQ jako chip do prawej,
   wyrównanie do dołu (baseline ceny). Jeden, powtarzalny układ we wszystkich
   kartach niezależnie od długości nazwy / dostępności. */
.pb2b-shop-results .pb2b-card-pricing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 10px;
	flex-wrap: wrap;
	min-height: 36px;
	margin-top: 0;
	padding-top: 6px;
}
.pb2b-shop-results .pb2b-card-moq { margin-left: auto; }

/* Kompaktowa, „scan-friendly" gęstość od 4 kolumn w górę. */
@media (min-width: 1080px) {
	.pb2b-shop-results .pb2b-card-media { margin: 9px 9px 0; }
	.pb2b-shop-results .pb2b-card-image img { padding: 12px; }
	.pb2b-shop-results .pb2b-card-body { padding: 11px 12px 13px; gap: 6px; }
	.pb2b-shop-results .pb2b-card-title { font-size: 13.5px; min-height: 2.64em; }
	.pb2b-shop-results .pb2b-card-price-value { font-size: 19px; }
	.pb2b-shop-results .pb2b-card-btn,
	.pb2b-shop-results .pb2b-card-btn-view,
	.pb2b-shop-results .pb2b-card-btn-options { height: 40px; font-size: 12.5px; }
	/* Przy gęstej siatce „Podgląd" zwija się do samej ikony (więcej miejsca na CTA). */
	.pb2b-shop-results .pb2b-card-actions-row { display: flex; gap: 8px; align-items: stretch; }
	.pb2b-shop-results .pb2b-card-actions-row > .pb2b-card-btn:first-child { flex: 1 1 auto; }
	.pb2b-shop-results .pb2b-card-btn-qv { width: 40px; flex: 0 0 40px; padding: 0; }
	.pb2b-shop-results .pb2b-card-btn-qv-text { display: none; }
}

/* Serce ulubionych — czytelne, premium, NIGDY ucięte (media ma overflow:visible). */
.pb2b-shop-results .pb2b-card-fav { width: 36px; height: 36px; top: 10px; right: 10px; }
.pb2b-shop-results .pb2b-card-fav .pb2b-card-heart { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
 * 3) MOBILE (≤719px) — 2 kolumny, lekka karta, CTA i MOQ w równym układzie
 * -------------------------------------------------------------------------- */
@media (max-width: 719px) {
	.pb2b-shop-results .pb2b-card { border-radius: 16px; }
	.pb2b-shop-results .pb2b-card-media { margin: 8px 8px 0; }
	.pb2b-shop-results .pb2b-card-image img { padding: 10px; }
	.pb2b-shop-results .pb2b-card-body { padding: 10px 11px 12px; gap: 6px; }
	.pb2b-shop-results .pb2b-card-title { font-size: 12.5px; line-height: 1.3; min-height: 2.6em; }
	.pb2b-shop-results .pb2b-card-price-value { font-size: 16.5px; }
	.pb2b-shop-results .pb2b-card-pricing { min-height: 30px; gap: 6px 8px; }
	.pb2b-shop-results .pb2b-card-moq { font-size: 9.5px; padding: 3px 7px; }
	.pb2b-shop-results .pb2b-card-actions { margin-top: 10px; }
	.pb2b-shop-results .pb2b-card-fav { width: 32px; height: 32px; top: 8px; right: 8px; }
	.pb2b-shop-results .pb2b-card-fav .pb2b-card-heart { width: 16px; height: 16px; }
}
/* Bardzo wąsko — utrzymaj 2 kolumny (nie spadaj do 1). */
@media (max-width: 380px) {
	.pb2b-shop-results .pb2b-card-grid,
	.pb2b-shop-results .pb2b-shop-grid.pb2b-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* ==========================================================================
 * 4) TRYB LISTY — poziome, „operacyjne" wiersze (.pb2b-list / .pb2b-row)
 *    Bazowe kolory na zmiennych --card-* → spójne ze sklepem i z panelem
 *    (panel-v3-12 remapuje --card-* na tokeny motywu, więc dark/light działa).
 *    Desktop: media · main · pricing · actions. Tablet: cena pod treścią.
 *    Mobile: czytelny stacked z pełnoszerokościowym CTA (NIE rozjechana tabela).
 * ========================================================================== */
.pb2b-list { display: flex; flex-direction: column; gap: 10px; }

.pb2b-row {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) minmax(128px, auto) auto;
	grid-template-areas: "media main pricing actions";
	align-items: center;
	gap: 18px;
	padding: 12px 16px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	box-shadow: var(--card-shadow);
	transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
.pb2b-row:hover {
	box-shadow: var(--card-shadow-hover);
	border-color: var(--card-primary);
	transform: translateY(-1px);
}

/* Media — miniatura po lewej (zaokrąglona, badge nieucięty). */
.pb2b-row-media {
	grid-area: media;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 12px;
	background: var(--card-media-bg);
	overflow: hidden;
	text-decoration: none;
}
.pb2b-row-media img { width: 100%; height: 100%; object-fit: contain; padding: 9px; display: block; }
.pb2b-row-badge {
	position: absolute;
	top: 5px; left: 5px;
	z-index: 2;
	padding: 2px 7px;
	font-size: 8.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .03em;
	text-transform: uppercase;
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(135deg, #8b5cf6, #6d28d9);
	box-shadow: 0 3px 8px rgba(109, 40, 217, .28);
}

/* Główna kolumna — nazwa, SKU, meta (stan / MOQ / karton). */
.pb2b-row-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pb2b-row-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb2b-row-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--card-ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pb2b-row-title:hover { color: var(--card-primary); }
.pb2b-row-sku {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--card-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pb2b-row-sku span { color: var(--card-ink); }
.pb2b-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pb2b-row-meta .pb2b-card-moq { margin: 0; }
.pb2b-row-pack { font-size: 11.5px; color: var(--card-muted); }
.pb2b-row-stockwrap { display: inline-flex; }

/* Cena (do prawej, wyrazista). */
.pb2b-row-pricing {
	grid-area: pricing;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
	min-width: 0;
}
.pb2b-row-pricing .pb2b-card-price { justify-content: flex-end; }
.pb2b-row-pricing .pb2b-card-price-value { font-size: 20px; }
.pb2b-row-pricing .pb2b-card-price-na,
.pb2b-row-pricing .pb2b-card-price-locked { white-space: nowrap; }

/* Akcje — ulubione, podgląd, główne CTA. */
.pb2b-row-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pb2b-row-fav,
.pb2b-row-qv {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	padding: 0;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	background: var(--card-bg);
	color: var(--card-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pb2b-row-fav:hover,
.pb2b-row-fav.is-fav { color: #db2777; border-color: #f9a8d4; }
.pb2b-row-qv:hover { color: var(--card-primary); border-color: var(--card-primary); }
.pb2b-row-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 138px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.pb2b-row-btn svg { flex: 0 0 auto; }
.pb2b-row-btn-cart { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; box-shadow: 0 6px 16px rgba(109, 40, 217, .24); }
.pb2b-row-btn-cart:hover { box-shadow: 0 10px 22px rgba(109, 40, 217, .32); transform: translateY(-1px); color: #fff; }
.pb2b-row-btn-view { background: var(--card-bg); color: var(--card-ink); border-color: var(--card-border); }
.pb2b-row-btn-view:hover { border-color: var(--card-primary); color: var(--card-primary); }
.pb2b-row-btn-options { background: rgba(124, 58, 237, .08); color: var(--card-primary); border-color: rgba(124, 58, 237, .18); }
.pb2b-row-btn-options:hover { background: var(--card-primary); color: #fff; border-color: var(--card-primary); }

/* --- LISTA: tablet (≤900px) — cena schodzi pod główną kolumnę. --- */
@media (max-width: 900px) {
	.pb2b-row {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"media main    actions"
			"media pricing actions";
		gap: 8px 14px;
	}
	.pb2b-row-media { width: 72px; height: 72px; }
	.pb2b-row-pricing { align-items: flex-start; text-align: left; }
	.pb2b-row-pricing .pb2b-card-price { justify-content: flex-start; }
	.pb2b-row-pricing .pb2b-card-price-value { font-size: 18px; }
}

/* --- LISTA: mobile (≤560px) — czytelne karty stacked, CTA pełnej szerokości. --- */
@media (max-width: 560px) {
	.pb2b-row {
		grid-template-columns: 60px minmax(0, 1fr);
		grid-template-areas:
			"media main"
			"pricing pricing"
			"actions actions";
		gap: 10px 12px;
		padding: 12px;
	}
	.pb2b-row-media { width: 60px; height: 60px; }
	.pb2b-row-pricing { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
	.pb2b-row-pricing .pb2b-card-price-value { font-size: 18px; }
	.pb2b-row-actions { width: 100%; }
	.pb2b-row-btn { flex: 1 1 auto; min-width: 0; }
}

/* --------------------------------------------------------------------------
 * 5) PASEK NARZĘDZI — przełącznik widoku zawsze kompaktowy i widoczny
 *    (na mobile toolbar-right rozciąga dzieci; segmentowany przełącznik ma
 *    zostać dwuikonowym chipem, nie rozjechanym pasem). Działa w obu kontekstach
 *    (publiczny sklep i panel) — plik ładuje się wszędzie tam, gdzie jest sklep.
 * -------------------------------------------------------------------------- */
.pb2b-shop-toolbar-right .pb2b-shop-view-toggle { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
 * 6) DŁUGIE NAZWY — łam nieprzerwane ciągi zamiast ucinać w połowie znaku.
 *    Tytuł i tak ma line-clamp + overflow:hidden (nie rozwala layoutu), ale
 *    overflow-wrap zapewnia czyste zawijanie bardzo długich „słów" (np. nazw
 *    bez spacji / długich kodów), więc tekst wygląda dobrze, a nie obcięty.
 * -------------------------------------------------------------------------- */
.pb2b-shop-results .pb2b-card-title,
.pb2b-row-title { overflow-wrap: anywhere; word-break: break-word; }

/* =====================================================================
 * 2.11.25 (pkt 6) — etykiety przycisków kafelka: CZYSTE łamanie.
 * Problem ze screenów (np. Dashboard „Najczęściej kupowane"): w wąskich
 * kafelkach 2/rząd na mobile „Do koszyka" łamało się w ŚRODKU słowa
 * („Do kosz / yka"). Wymuszamy łamanie WYŁĄCZNIE na spacjach (czyste 2
 * linie), bez dzielenia słów i bez hyphenacji. Spójne we wszystkich
 * kontekstach kanonicznego kafelka (dashboard / sklep / katalog kart /
 * podobne / polecane / ostatnio oglądane / ulubione). Tylko zachowanie
 * łamania — układ/wysokość/perf bez zmian.
 * ===================================================================== */
.pb2b-card-btn {
	white-space: nowrap;          /* 2.11.27 — przyciski kafelka NIGDY się nie łamią */
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: keep-all;
	hyphens: none;
	line-height: 1;
	text-align: center;
}
.pb2b-card-btn > span,
.pb2b-card-btn-cart > span,
.pb2b-card-btn-qv-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}