/*
 * BG Product Video — kafelek filmu w galerii produktu.
 *
 * Slajd wygląda jak zwykłe zdjęcie produktu (ten sam obrazek w tych samych wymiarach), tylko
 * z przyciskiem ▶ na środku. Kolor akcentu = niebieski sklepu (#277cd9). Badge NIE łapie
 * kliknięć (pointer-events: none) — klik ma trafić w slajd, bo to on ma data-gallery
 * i to on otwiera powiększenie.
 */
.product-image .swiper-slide.bg-pv-slide,
.product-image .additional-image.bg-pv-thumb {
	position: relative;
}

.bg-pv-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(39, 124, 217, 0.92);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	transition: background 0.15s ease-in-out;
	z-index: 2;
}

.bg-pv-play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -6px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

.product-image .swiper-slide.bg-pv-slide:hover .bg-pv-play {
	background: #277cd9;
}

/* Kafelek w pasku miniatur (gdy motyw ma włączone „additional images") — mniejszy przycisk. */
.additional-image.bg-pv-thumb .bg-pv-play {
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	box-shadow: none;
}

.additional-image.bg-pv-thumb .bg-pv-play::after {
	margin: -6px 0 0 -3px;
	border-width: 6px 0 6px 10px;
}