/**
 * PhoenixB2B — strzałki karuzeli produktów (2.12.81, §4).
 *
 * Dokłada przyciski przewijania do poziomych railsów produktów (podobne /
 * polecane na karcie produktu i w panelu, ostatnio oglądane, najczęściej
 * kupowane). MOBILE bez zmian — strzałki ukryte, zostaje natywny scroll
 * (i scrollbar jako fallback). Strzałki wstrzykuje pb2b-carousel-2.12.81.js
 * (wrapper .pb2b-rail-vp + .pb2b-rail-arrow).
 *
 * CSS-only, addytywne; nie zmienia istniejącego układu kafli ani scrollera.
 */

/* Kontekst pozycjonowania strzałek (opakowanie tylko siatki-scrollera). */
.pb2b-rail-vp { position: relative; }

/* Strzałka — domyślnie ukryta; JS odsłania ją zależnie od pozycji scrolla. */
.pb2b-rail-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(15, 23, 42, .10);
	border-radius: 999px;
	background: var(--pb2b-bg-1, #ffffff);
	color: var(--pb2b-text-strong, #16161d);
	box-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.pb2b-rail-arrow[hidden] { display: none !important; }
.pb2b-rail-arrow svg { display: block; }
.pb2b-rail-arrow--prev { left: 4px; }
.pb2b-rail-arrow--next { right: 4px; }
.pb2b-rail-arrow:hover {
	background: var(--pb2b-primary, #7c3aed);
	color: var(--pb2b-primary-contrast, #ffffff);
	border-color: transparent;
	box-shadow: 0 8px 22px rgba(124, 58, 237, .32);
}
.pb2b-rail-arrow:active { transform: translateY(-50%) scale(.94); }
.pb2b-rail-arrow:focus-visible {
	outline: 2px solid var(--pb2b-primary, #7c3aed);
	outline-offset: 2px;
}

/* Tryb ciemny panelu — strzałka czytelna na ciemnym tle. */
.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-rail-arrow {
	border-color: rgba(255, 255, 255, .14);
	background: var(--pb2b-bg-2, #1c1f27);
	color: var(--pb2b-text-strong, #f4f5f7);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-rail-arrow:hover {
	background: var(--pb2b-primary, #8b5cf6);
	color: var(--pb2b-primary-contrast, #ffffff);
}

/* MOBILE / TABLET — bez strzałek; karuzela przewija się palcem (bez zmian). */
@media (max-width: 1023.98px) {
	.pb2b-rail-arrow { display: none !important; }
}

/* Szacunek dla preferencji ograniczonego ruchu. */
@media (prefers-reduced-motion: reduce) {
	.pb2b-rail-arrow { transition: none; }
}