/* CyDeals - Product Video */

.cdpv-hidden-image {
	visibility: hidden !important;
}

.cdpv-stage {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: #000;
	z-index: 5;
}

.cdpv-stage .cdpv-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

/* If autoplay was refused, show the poster rather than a black box. */
.cdpv-stage.cdpv-blocked .cdpv-video {
	object-fit: contain;
}

/* Buffering spinner - shown while playback is waiting on data (cold fetch
   on "None" preload, or a slow connection even with preloading on), so the
   pause before playback starts reads as "loading" rather than "broken". */
.cdpv-stage.cdpv-buffering::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	z-index: 8;
	animation: cdpv-spin 0.8s linear infinite;
}

@keyframes cdpv-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Play/pause control - the one custom control UI used everywhere on the
   product page (no native browser controls at all). Centred over the
   poster/video; its icon (injected in JS - see PLAY_ICON/PAUSE_ICON) swaps
   between a play triangle and a pause glyph to match the video's state.
   While playing, it fades down to nothing so it doesn't sit on top of the
   video the whole time, but reappears on hover/focus so there's still a
   visible, discoverable way to pause - tapping anywhere on the video also
   works (see the wrap click handler in the JS), which is how touch users
   reach it once it's faded out. */
.cdpv-play-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 6;
	opacity: 1;
	transition: background 0.15s ease, transform 0.15s ease, opacity 0.2s ease;
}

/* The play triangle sits slightly off-centre visually if it's dead centre
   in its box - nudge it right so it reads as centred. */
.cdpv-play-badge svg {
	margin-left: 2px;
}

.cdpv-play-badge:hover,
.cdpv-play-badge:focus-visible {
	background: rgba(0, 0, 0, 0.75);
	transform: translate(-50%, -50%) scale(1.08);
}

.cdpv-play-badge:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.cdpv-stage.cdpv-playing .cdpv-play-badge {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.85);
}

.cdpv-stage.cdpv-playing:hover .cdpv-play-badge,
.cdpv-stage.cdpv-playing .cdpv-play-badge:focus-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
}

/* Play icon on the gallery thumbnail for the video slide */

.cdpv-thumb-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	pointer-events: none;
	z-index: 4;
}

.cdpv-thumb-badge::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
}

/* Shop / category tiles */

.cdpv-tile-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 2;
}

.cdpv-tile-video.cdpv-tile-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cdpv-tile-video {
		display: none;
	}
}