/**
 * PhoenixB2B v2.12.18 — STYLE BANERÓW MARKETINGOWYCH (wydzielone z shop-v22.css).
 *
 * DLACZEGO OSOBNY PLIK (handle: phoenix-b2b-banners):
 * Do 2.12.17 klasy .pb2b-banner-* żyły WYŁĄCZNIE w shop-v22.css, który NIE jest
 * stałym elementem panelu klienta (ładował się tylko warunkowo: literalny
 * shortcode w treści / kontekst sklepu WC). Gdy stronę panelu/sklepu zbudowano
 * szablonem, blokiem lub Elementorem (albo wskazano ją tylko po ID), shop-v22.css
 * się nie ładował → banery przychodziły jako goły, nieostylowany markup, a slider
 * nie dostawał JS. Ten plik jest LEKKIM, niezależnym handle'em ładowanym ZAWSZE
 * w kontekście B2B (panel klienta + sklep B2B), niezależnie od sposobu budowy
 * strony i odporny na podmianę sekcji SPA.
 *
 * Zawiera wyłącznie front-end (display + slider). Style edytora banerów w adminie
 * (.pb2b-banner-row-head/-grid/-groups, .pb2b-banner-media-*) zostają w shop-v22.css.
 *
 * Brak twardych zależności — zmienne CSS mają wartości zapasowe, więc plik działa
 * poprawnie także bez załadowanego shop.css / panel-v3.css.
 *
 * @package PhoenixB2B
 * @since   2.12.18
 */

/* =====================================================================
 * PhoenixB2B v2.8.13 — BANERY MARKETINGOWE B2B (Część 6)
 * Premium dark/purple, radius 24px, responsywne (mobile 1 kolumna).
 * Renderowane przez Phoenix_B2B_Banners::render(); brak banera = brak markupu.
 * ===================================================================== */
.pb2b-banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto 24px;
	padding: 28px 32px;
	border-radius: 24px;
	overflow: hidden;
	color: #fff;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}
.pb2b-banner-body { flex: 1 1 auto; min-width: 0; }
.pb2b-banner-title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
	color: inherit;
}
.pb2b-banner-desc {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
	max-width: 60ch;
}
.pb2b-banner-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.30);
	color: #fff;
	transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.pb2b-banner-btn:hover {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.26);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
	color: #fff;
}
.pb2b-banner-media {
	flex: 0 0 220px;
	align-self: stretch;
	min-height: 120px;
	border-radius: 18px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* v2.8.18 — desktop/mobile image: domyślnie pokazujemy desktop, mobile chowamy. */
.pb2b-banner-media--mobile { display: none; }

/* --- Warianty kolorów --- */
.pb2b-banner--purple {
	background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 45%, #2563eb 100%);
}
.pb2b-banner--black {
	background: linear-gradient(135deg, #0b1020 0%, #1f2937 100%);
}
.pb2b-banner--lime {
	background: linear-gradient(135deg, #365314 0%, #4d7c0f 50%, #84cc16 100%);
}
.pb2b-banner--lime .pb2b-banner-desc { color: rgba(255,255,255,0.9); }
/* v2.8.18 — jasny wariant (light): czytelny tekst na jasnym tle. */
.pb2b-banner--light {
	background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
	color: #0f172a;
	border: 1px solid #e2e8f0;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.pb2b-banner--light .pb2b-banner-desc { color: #475569; }
.pb2b-banner--light .pb2b-banner-btn {
	background: #7c3aed;
	border-color: #7c3aed;
	color: #fff;
}
.pb2b-banner--light .pb2b-banner-btn:hover { background: #6d28d9; border-color: #6d28d9; }

/* --- Responsywność: mobile 1 kolumna --- */
@media (max-width: 720px) {
	.pb2b-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 22px 20px;
		border-radius: 18px;
		gap: 16px;
	}
	.pb2b-banner-title { font-size: 19px; }
	.pb2b-banner-media {
		order: -1;
		flex: 0 0 auto;
		width: 100%;
		min-height: 140px;
	}
	/* v2.8.18 — gdy ustawiono obraz mobile, na telefonie pokazujemy go zamiast desktop. */
	.pb2b-banner.has-mobile-image .pb2b-banner-media--desktop { display: none; }
	.pb2b-banner.has-mobile-image .pb2b-banner-media--mobile { display: block; }
}

/* W kontenerze kategorii / sklepu baner trzyma się szerokości treści. */
.pb2b-category-container .pb2b-banner,
.pb2b-product-container .pb2b-banner { margin-left: 0; margin-right: 0; }

/* =====================================================================
 * PhoenixB2B v2.11.2 — BANER OBRAZKOWY + SLIDER (Część „Banery B2B”)
 * ---------------------------------------------------------------------
 * Tryb obrazkowy: grafika desktop/mobile jako treść banera (PHP renderuje
 * <picture> z <source> dla mobile). Brak CLS — kontener ma aspect-ratio,
 * obraz object-fit:cover wypełnia zarezerwowane miejsce. Slider (2+ banery)
 * to lekki własny JS (banner-slider.js); tu wyłącznie wygląd.
 * Zmienne pozwalają nadpisać proporcje bez zmiany kodu.
 * ===================================================================== */
.pb2b-banner-loc { width: 100%; }

/* =====================================================================
 * v2.12.21 — BANER OBRAZKOWY: naprawa „szarego boxa bez zdjęcia".
 * ---------------------------------------------------------------------
 * PRZYCZYNA (potwierdzona): render PHP jest poprawny — <img src> NIE jest pusty
 * (resolve_image_url: URL → ID → fallback). Problem był w KASKADZIE CSS:
 *   - panel ładuje `.phoenix-b2b-panel .pb2b-banner { display:flex; padding:14px 16px }`
 *     (alert/powiadomienia) z panel-bundle.css PÓŹNIEJ niż banners.css. Selektor ma
 *     TĘ SAMĄ specyficzność (0,2,0) co marketingowy `.pb2b-banner.pb2b-banner-image`,
 *     więc późniejszy alert WYGRYWAŁ i wymuszał na banerze `display:flex`+`padding`.
 *   - przez to kontener z `aspect-ratio` (i bezwzględnie pozycjonowanym łańcuchem
 *     link→picture→img) tracił wysokość, a widać było wyłącznie tło-zapas
 *     `--pb2b-card-image-bg` (#f4f4f7) → zgłaszany „szary box".
 *   - dodatkowo `.phoenix-b2b-panel img { max-width:100% }` (0,1,1) bił
 *     `.pb2b-banner-img { max-width:none }` (0,1,0).
 *
 * NAPRAWA: dedykowana klasa `.pb2b-marketing-banner` (dodana w PHP) daje selektory
 * 3-klasowe (0,3,0) i 4-klasowe dla potomków — wygrywają z alertem BEZ `!important`,
 * niezależnie od kolejności ładowania. Picture/img są ABSOLUTNE (inset:0) wg briefu,
 * a kontener ma `min-height` jako twardy bezpiecznik, gdyby `aspect-ratio` z dowolnego
 * powodu nie wyliczyło wysokości. Hierarchia warstw: obraz 1, nakładka 2, treść 3.
 * ===================================================================== */
.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner {
	/* 2.12.75 — JEDEN, jednoznaczny kadr. Desktop 1600×400 = 4:1; mobile 1200×450
	   = 8:3 (realny kadr mobilnego slidera ≈2.667; grafika 8:3 wchodzi idealnie). */
	--pb2b-banner-ar-desktop: 4 / 1;         /* desktop: 1600 × 400 px */
	--pb2b-banner-ar-mobile:  8 / 3;         /* mobile:  1200 × 450 px (realny kadr kontenera ≈2.667) */
	display: block;            /* neutralizuje display:flex z alertu panelu */
	position: relative;
	padding: 0;                /* neutralizuje padding:14px 16px z alertu    */
	gap: 0;
	border: 0;                 /* alert dawał 1px border wokół banera        */
	align-items: stretch;
	color: inherit;
	overflow: hidden;
	aspect-ratio: var(--pb2b-banner-ar-desktop);
	min-height: 0;             /* 4:1 dokładnie (bez za-wysokiego floora)     */
	background: var(--pb2b-card-image-bg, #f4f4f7);
}
.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner .pb2b-banner-link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
	text-decoration: none;
	color: inherit;
}
/* <picture> ABSOLUTNIE wypełnia kontener (nie zależy od wysokości linku). */
.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner .pb2b-banner-pic {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 1;                /* obraz: najniższa warstwa (pod nakładką i treścią) */
}
/* <img> wypełnia, cover, ZAWSZE widoczny. max-width:none (0,4,0) bije
   .phoenix-b2b-panel img{max-width:100%} (0,1,1). */
.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner .pb2b-banner-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
/* Nakładka-gradient: PÓŁPRZEZROCZYSTA i tylko częściowa (prawa strona obrazu w pełni
   widoczna); z-index 2 = nad obrazem, pod treścią. Nigdy nie zakrywa zdjęcia. */
.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner.has-overlay .pb2b-banner-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,0) 75%);
	pointer-events: none;
}
.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner .pb2b-banner-overlay {
	position: absolute;
	left: 0; bottom: 0;
	z-index: 3;                /* treść zawsze nad obrazem i nad nakładką */
	max-width: min(560px, 80%);
	padding: clamp(16px, 3vw, 32px);
	color: #fff;
}
.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner .pb2b-banner-overlay .pb2b-banner-title { margin: 0 0 8px; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.18; font-weight: 800; color: #fff; }
.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner .pb2b-banner-overlay .pb2b-banner-desc { margin: 0 0 14px; font-size: clamp(13px, 1.6vw, 15px); line-height: 1.5; color: rgba(255,255,255,.9); }
@media (max-width: 767px) {
	/* 2.12.75 — mobile: REALNY kadr kontenera = 8:3 (≈2.667). Grafika 1200×450
	   (8:3) wypełnia baner IDEALNIE (object-fit:cover → zero ucinania) na telefonach.
	   Wysokość ≈ obecna (np. 390px → ~146px, było 145px). max-height 190px kapuje
	   tylko bardzo szerokie ekrany (≥507px → telefon poziomo/mały tablet). */
	.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner {
		aspect-ratio: 8 / 3;
		min-height: 0;
		max-height: 190px;
		height: auto;
	}
	.pb2b-banner.pb2b-banner-image.pb2b-marketing-banner .pb2b-banner-overlay { max-width: 100%; }
}

/* --- SLIDER (2+ banerów w jednej lokalizacji) --- */
.pb2b-banner-slider {
	position: relative;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto 24px;
}
.pb2b-banner-slider-viewport {
	overflow: hidden;
	border-radius: 24px;
	touch-action: pan-y;            /* poziomy swipe obsługuje JS, pionowy scroll zostaje */
}
.pb2b-banner-slider-track {
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.pb2b-banner-slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}
/* W sliderze pojedynczy baner nie ma własnego marginesu/zaokrąglenia/cienia —
   ramę robi viewport (spójne krawędzie, brak podwójnych obwódek). */
.pb2b-banner-slider .pb2b-banner {
	margin: 0;
	max-width: none;
	border-radius: 0;
	box-shadow: none;
}

/* Strzałki (opcjonalne) */
/* 2.12.71 — strzałki wyłączone (PHP: slider_args arrows=false). Hard-hide na
   wypadek zcache'owanego markupu starszej wersji. Kropki/autoplay bez zmian. */
.pb2b-banner-slider-arrow { display: none !important; }
.pb2b-banner-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 999px;
	background: rgba(15, 23, 42, .45);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background .15s ease, opacity .15s ease;
}
.pb2b-banner-slider-arrow:hover { background: rgba(15, 23, 42, .68); }
.pb2b-banner-slider-arrow:disabled { opacity: .35; cursor: default; }
.pb2b-banner-slider-prev { left: 12px; }
.pb2b-banner-slider-next { right: 12px; }
.pb2b-banner-slider-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Kropki (opcjonalne) */
.pb2b-banner-slider-dots {
	position: absolute;
	left: 0; right: 0; bottom: 12px;
	z-index: 4;
	display: flex; gap: 8px; justify-content: center;
	margin: 0; padding: 0;
}
.pb2b-banner-slider-dot {
	width: 9px; height: 9px;
	padding: 0; border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: width .2s ease, background .2s ease;
}
.pb2b-banner-slider-dot.is-active { width: 24px; background: #fff; }
.pb2b-banner-slider-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 720px) {
	.pb2b-banner-slider-viewport { border-radius: 18px; }
	.pb2b-banner-slider-arrow { width: 34px; height: 34px; }
	.pb2b-banner-slider-prev { left: 8px; }
	.pb2b-banner-slider-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.pb2b-banner-slider-track { transition: none; }
}

/* --- Panel klienta: baner trzyma się szerokości treści, ciemny motyw OK. --- */
.phoenix-b2b-panel .pb2b-banner-loc,
.phoenix-b2b-panel .pb2b-banner-slider { margin-bottom: var(--pb2b-section-gap, 20px); }
/* v2.12.21 — tło-zapas pod obrazem w panelu: selektor 4-klasowy, pewnie wygrywa. */
.phoenix-b2b-panel .pb2b-banner.pb2b-banner-image.pb2b-marketing-banner { background: var(--pb2b-bg-3, #151b2e); }
/* W ciemnym panelu delikatny obrys, by jasny baner nie „pływał” na ciemnym tle. */
.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-banner-slider-viewport,
.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-banner.pb2b-banner-image.pb2b-marketing-banner {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

/* =====================================================================
 * v2.12.22 — FINALNA WARSTWA WIDOCZNOŚCI OBRAZU BANERA (najwyższy priorytet)
 * ---------------------------------------------------------------------
 * CEL: grafika marketingowego banera MUSI być widoczna niezależnie od
 * kolejności ładowania i konfliktów z panel-bundle.css / shop-v22.css /
 * admin-core-bundle.css oraz alertowymi klasami .pb2b-banner.
 *
 * PODWÓJNE ZABEZPIECZENIE (oba pokazują tę samą grafikę):
 *   (1) TŁO wrappera  — background-image z CSS-zmiennej (ustawianej inline
 *       w render_single()); odporne na reguły ukrywające <img>,
 *   (2) <img> w środku — absolutnie pozycjonowany, wymuszony na widoczny.
 *
 * !important użyty CELOWO i WYŁĄCZNIE tutaj dla: display / opacity /
 * visibility / background-image / object-fit — to finalny fix widoczności,
 * nie estetyka kaskady. Selektory są zakresowane przez .pb2b-marketing-banner,
 * więc alertowe .pb2b-banner (success/info/warning) nie są ruszane.
 * ===================================================================== */
.pb2b-banner.pb2b-marketing-banner.pb2b-banner-image,
.phoenix-b2b-panel .pb2b-banner.pb2b-marketing-banner.pb2b-banner-image {
	display: block !important;
	position: relative;
	overflow: hidden;
	/* 2.12.73 — desktop 4:1 (1600×400) WPROST na wygrywającym selektorze (0,4,0),
	   żeby nie zależeć od bloku głównego; bez za-wysokiego min-height. */
	aspect-ratio: 4 / 1;
	min-height: 0;
	padding: 0;
	border: 0;
	gap: 0;
	background-image: var(--pb2b-banner-desktop-image) !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.pb2b-banner.pb2b-marketing-banner.pb2b-banner-image .pb2b-banner-link,
.phoenix-b2b-panel .pb2b-banner.pb2b-marketing-banner.pb2b-banner-image .pb2b-banner-link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
}
.pb2b-banner.pb2b-marketing-banner.pb2b-banner-image .pb2b-banner-pic,
.phoenix-b2b-panel .pb2b-banner.pb2b-marketing-banner.pb2b-banner-image .pb2b-banner-pic {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block !important;
	z-index: 1;
}
.pb2b-banner.pb2b-marketing-banner.pb2b-banner-image .pb2b-banner-img,
.phoenix-b2b-panel .pb2b-banner.pb2b-marketing-banner.pb2b-banner-image .pb2b-banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 1;
}
/* Nakładka: półprzezroczysty gradient — NIE zakrywa zdjęcia pełnym kolorem. */
.pb2b-banner.pb2b-marketing-banner.pb2b-banner-image.has-overlay .pb2b-banner-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .34) 45%, rgba(0, 0, 0, 0) 75%);
	pointer-events: none;
}
.pb2b-banner.pb2b-marketing-banner.pb2b-banner-image .pb2b-banner-overlay,
.phoenix-b2b-panel .pb2b-banner.pb2b-marketing-banner.pb2b-banner-image .pb2b-banner-overlay {
	position: relative;
	z-index: 3;
}
@media (max-width: 767px) {
	.pb2b-banner.pb2b-marketing-banner.pb2b-banner-image,
	.phoenix-b2b-panel .pb2b-banner.pb2b-marketing-banner.pb2b-banner-image {
		background-image: var(--pb2b-banner-mobile-image, var(--pb2b-banner-desktop-image)) !important;
		/* 2.12.75 — mobile: REALNY kadr 8:3 (≈2.667), grafika 1200×450 wypełnia
		   idealnie. Ten selektor (0,4,0) wygrywa kaskadę, więc 8:3 MUSI być też
		   tutaj — inaczej nadpisze blok główny. max-height 190px = kap dla szerokich. */
		aspect-ratio: 8 / 3;
		min-height: 0;
		max-height: 190px;
		height: auto;
	}
}