/* Xinje UI: baner na górze strony głównej i (niższy, klasa .xui-bn-n) na podstronach (inc/baner.php). Jasne tło niezależnie od motywu (tekst ciemny na jasnym, także w trybie „Ciemny”).
   Wysokość jest zarezerwowana przez aspect-ratio (bez CLS); wersja niska ma ≈ 65 % wysokości wersji głównej. */
.xui-bn{--bn-ink:#0b2a55;--bn-blue:#1f6fd0;position:relative;container-type:inline-size;overflow:hidden;box-sizing:border-box;
	width:calc(100% - 32px);max-width:1240px;margin:16px auto 0;aspect-ratio:1920/560;border:1px solid var(--xui-ln2,#CFD7E1);border-radius:var(--xui-r,6px);
	background:#eaf1fb;color:var(--bn-ink);line-height:1.25}
.xui-bn img{display:block;max-width:none;border:0;box-shadow:none;margin:0}
.xui-bn-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xui-bn-prod{position:absolute;inset:0;pointer-events:none}
.xui-bn-prod img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom;opacity:0;transition:opacity .8s ease}
.xui-bn-prod img.on{opacity:1}
.xui-bn-txt{position:absolute;left:5%;top:0;bottom:0;width:40%;display:flex;flex-direction:column;justify-content:center}
.xui-bn .xui-bn-txt .xui-bn-t{margin:0 0 1.2cqw;padding:0;color:var(--bn-ink);font-weight:700;letter-spacing:-.01em;line-height:1.2;font-size:24px;font-size:max(22px,2.9cqw);text-wrap:balance}
.xui-bn .xui-bn-txt .xui-bn-l{margin:0 0 2cqw;padding:0;color:var(--bn-ink);line-height:1.4;font-size:14px;font-size:max(14px,1.3cqw);text-wrap:pretty}
.xui-bn-btns{display:flex;flex-wrap:wrap;gap:1.2cqw 12px}
.xui-bn a.xui-bn-b1,.xui-bn a.xui-bn-b2{box-sizing:border-box;display:inline-block;white-space:nowrap;text-decoration:none!important;font-weight:600;line-height:1.2;
	font-size:14px;font-size:max(14px,1.15cqw);padding:.95cqw 1.9cqw;padding:max(9px,.95cqw) max(18px,1.9cqw);border-radius:max(5px,.5cqw);border:2px solid var(--bn-blue);transition:background-color .15s,color .15s}
.xui-bn a.xui-bn-b1{background:var(--bn-blue);color:#fff!important}
.xui-bn a.xui-bn-b2{background:transparent;color:var(--bn-blue)!important}
.xui-bn a.xui-bn-b1:hover{background:#17589f;border-color:#17589f}
.xui-bn a.xui-bn-b2:hover{background:var(--bn-blue);color:#fff!important}
.xui-bn a:focus-visible,.xui-bn-dots button:focus-visible{outline:3px solid #f5a623;outline-offset:2px}
.xui-bn-dots{position:absolute;left:5%;bottom:2.2cqw;display:flex;gap:6px}
.xui-bn-dots[hidden]{display:none}
.xui-bn-dots button{box-sizing:border-box;width:12px;height:12px;min-width:0;min-height:0;padding:0;margin:0;border-radius:50%;border:2px solid var(--bn-blue);background:transparent;cursor:pointer;box-shadow:none}
.xui-bn-dots button[aria-current=true]{background:var(--bn-blue)}
/* wersja niska (podstrony): 1920/364 ≈ 65 % wysokości głównej (1920/560); obrazy i rotacja bez zmian, produkty wpisane w niższą ramkę (contain, prawy dół) */
.xui-bn.xui-bn-n{aspect-ratio:1920/364;margin:12px auto 8px}
.xui-bn.xui-bn-n .xui-bn-txt .xui-bn-t{margin:0 0 .9cqw;font-size:19px;font-size:max(19px,2.1cqw)}
.xui-bn.xui-bn-n .xui-bn-txt .xui-bn-l{margin:0 0 1.5cqw;font-size:13px;font-size:max(13px,1.05cqw);line-height:1.35}
.xui-bn.xui-bn-n a.xui-bn-b1,.xui-bn.xui-bn-n a.xui-bn-b2{font-size:13px;font-size:max(13px,.95cqw);padding:max(7px,.7cqw) max(14px,1.5cqw);border-radius:max(5px,.4cqw)}
.xui-bn.xui-bn-n .xui-bn-dots{bottom:1.6cqw}
#wklej{scroll-margin-top:80px}
@media (max-width:900px){
	.xui-bn{aspect-ratio:800/600;max-width:600px}
	.xui-bn-txt{left:5%;right:5%;top:4.5cqw;bottom:auto;width:auto;justify-content:flex-start}
	.xui-bn .xui-bn-txt .xui-bn-t{font-size:19px;font-size:max(19px,5.4cqw);margin-bottom:1.2cqw}
	.xui-bn .xui-bn-txt .xui-bn-l{font-size:13px;font-size:max(13px,3.1cqw);margin-bottom:2.4cqw;line-height:1.3}
	.xui-bn a.xui-bn-b1,.xui-bn a.xui-bn-b2{font-size:13px;font-size:max(13px,3cqw);padding:max(8px,1.7cqw) max(14px,3.2cqw);border-radius:max(5px,1.2cqw)}
	.xui-bn-btns{gap:2cqw 10px}
	.xui-bn-dots{left:5%;transform:none;bottom:1.6cqw} /* przy lewej krawędzi — na środku zachodziły na produkty */
	/* wersja niska na telefonie: 800/420 = 70 % wysokości; bez podtytułu (zostaje tytuł i przyciski), żeby tekst nie zachodził na produkty */
	.xui-bn.xui-bn-n{aspect-ratio:800/420;margin:10px auto 6px}
	.xui-bn.xui-bn-n .xui-bn-txt{top:3.5cqw}
	.xui-bn.xui-bn-n .xui-bn-txt .xui-bn-t{font-size:16px;font-size:max(16px,4.6cqw);margin-bottom:2cqw}
	.xui-bn.xui-bn-n .xui-bn-txt .xui-bn-l{display:none}
	.xui-bn.xui-bn-n a.xui-bn-b1,.xui-bn.xui-bn-n a.xui-bn-b2{font-size:13px;font-size:max(13px,2.9cqw);padding:max(7px,1.4cqw) max(12px,2.8cqw)}
	.xui-bn.xui-bn-n .xui-bn-dots{bottom:1.4cqw}
}
@media (prefers-reduced-motion:reduce){.xui-bn-prod img{transition:none}}

/* 1.0.34 (audyt telefonu 9.10.2026): na telefonie tekst i przyciski są NAD obrazem produktów (dotąd obraz zachodził na przycisk „Wklej listę z projektu”);
   wersja niska (podstrony) to tylko tytuł i przyciski, bez obrazów produktów — baner ≈ 90 px zamiast ≈ 180 px */
@media (max-width:560px){
	.xui-bn{aspect-ratio:auto;max-width:none;display:flex;flex-direction:column}
	.xui-bn-txt,.xui-bn.xui-bn-n .xui-bn-txt{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;padding:16px 16px 6px;z-index:1}
	.xui-bn a.xui-bn-b1,.xui-bn a.xui-bn-b2,.xui-bn.xui-bn-n a.xui-bn-b1,.xui-bn.xui-bn-n a.xui-bn-b2{display:inline-flex;align-items:center;min-height:40px;font-size:14px;padding:6px 14px}
	.xui-bn-btns{gap:8px}
	.xui-bn-prod{position:relative;inset:auto;order:2;aspect-ratio:800/300;margin-top:2px}
	.xui-bn-prod img{object-fit:cover;object-position:center bottom}
	.xui-bn.xui-bn-n{aspect-ratio:auto;margin:8px auto 4px}
	.xui-bn.xui-bn-n .xui-bn-txt{padding:10px 12px}
	.xui-bn.xui-bn-n .xui-bn-txt .xui-bn-t{font-size:15px;margin:0 0 8px}
	.xui-bn.xui-bn-n .xui-bn-prod,.xui-bn.xui-bn-n .xui-bn-dots{display:none}
	#wklej{scroll-margin-top:124px}
}