/* Floating video reel (bottom-left). */

.oye-reel {
	--oye-reel-w: 6.75rem;
	bottom: max(1rem, env(safe-area-inset-bottom));
	left: max(1rem, env(safe-area-inset-left));
	position: fixed;
	width: var(--oye-reel-w);
	z-index: 80; /* Below the product purchase bar, header panels and consent banners. */
}

.oye-reel[hidden] {
	display: none;
}

.oye-reel__frame {
	aspect-ratio: 9 / 16;
	background-color: var(--oye-aubergine, #210D35);
	border: 3px solid var(--oye-cream, #FFF7EA);
	border-radius: 0.875rem;
	box-shadow: 4px 6px 0 var(--oye-aubergine, #210D35), 0 14px 28px -12px rgb(0 0 0 / 0.5);
	overflow: hidden;
	position: relative;
	transform: rotate(-2deg);
}

.oye-reel__video {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.oye-reel__btn {
	align-items: center;
	background-color: rgb(33 13 53 / 0.78);
	border: 0;
	border-radius: 50%;
	color: var(--oye-cream, #FFF7EA);
	cursor: pointer;
	display: inline-flex;
	height: 2.25rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	width: 2.25rem;
}

.oye-reel__btn:focus-visible {
	outline: 3px solid var(--oye-lime, #D7F75B);
	outline-offset: 1px;
}

.oye-reel__play {
	bottom: 0.375rem;
	left: 0.375rem;
}

.oye-reel__close {
	font-size: 1.375rem;
	line-height: 1;
	right: 0.375rem;
	top: 0.375rem;
}

/* Icon: play triangle when paused, two bars when playing. */
.oye-reel__icon {
	border-block: 0.4375rem solid transparent;
	border-inline-start: 0.6875rem solid currentColor;
	height: 0;
	margin-inline-start: 0.1875rem;
	width: 0;
}

.oye-reel.is-playing .oye-reel__play .oye-reel__icon {
	border-block: 0;
	border-inline: 3px solid currentColor;
	height: 0.75rem;
	margin: 0;
	width: 0.625rem;
}

.oye-reel__link {
	background-color: var(--oye-lime, #D7F75B);
	border-radius: var(--oye-radius-sm, 0.25rem);
	bottom: 0.375rem;
	color: var(--oye-aubergine, #210D35);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.375rem 0.5rem;
	position: absolute;
	right: 0.375rem;
	text-decoration: none;
}

.oye-reel__link:focus-visible {
	outline: 3px solid var(--oye-cream, #FFF7EA);
	outline-offset: 1px;
}

/* Product pages: step aside while the mobile purchase bar is showing. */
body.oye-buybar-on .oye-reel {
	display: none;
}

@media (max-width: 47.99em) {
	.oye-reel--desktop-only {
		display: none;
	}
}

@media (min-width: 48em) {
	.oye-reel {
		--oye-reel-w: 8.5rem;
	}

	.oye-reel__link {
		font-size: 0.8125rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oye-reel__frame {
		transform: none;
	}
}

@media print {
	.oye-reel {
		display: none !important;
	}
}

/* Sound toggle (top-left of the reel). */
.oye-reel__sound {
	left: 0.375rem;
	top: 0.375rem;
}

.oye-reel__sound .oye-reel__waves {
	display: none;
}

.oye-reel.has-sound .oye-reel__sound .oye-reel__waves {
	display: inline;
}

.oye-reel.has-sound .oye-reel__sound .oye-reel__mute {
	display: none;
}

.oye-reel.has-sound .oye-reel__sound {
	background-color: var(--oye-lime, #D7F75B);
	color: var(--oye-aubergine, #210D35);
}