/* Pargatz Bezel Watch: every selector is scoped to this widget. */
.pargatz-bezel-watch {
	--pargatz-bezel-watch-stage-height: clamp(900px, 92svh, 1200px);
	--pargatz-bezel-watch-thumb-width: clamp(210px, 20vw, 500px);
	--pargatz-bezel-watch-ring-size: 50%;
	--pargatz-bezel-watch-ring-y: 50%;
	--pargatz-bezel-watch-watch-offset-x-desktop: 0px;
	--pargatz-bezel-watch-watch-offset-y-desktop: 0px;
	--pargatz-bezel-watch-bezel-offset-x-desktop: 0px;
	--pargatz-bezel-watch-bezel-offset-y-desktop: 0px;
	--pargatz-bezel-watch-watch-size-desktop: 56%;
	--pargatz-bezel-watch-bezel-size-desktop: 50%;
	--pargatz-bezel-watch-watch-offset-x-tablet: 0px;
	--pargatz-bezel-watch-watch-offset-y-tablet: 0px;
	--pargatz-bezel-watch-bezel-offset-x-tablet: 0px;
	--pargatz-bezel-watch-bezel-offset-y-tablet: 0px;
	--pargatz-bezel-watch-watch-size-tablet: 62%;
	--pargatz-bezel-watch-bezel-size-tablet: 46%;
	--pargatz-bezel-watch-watch-offset-x-mobile: 0px;
	--pargatz-bezel-watch-watch-offset-y-mobile: 0px;
	--pargatz-bezel-watch-bezel-offset-x-mobile: 0px;
	--pargatz-bezel-watch-bezel-offset-y-mobile: 0px;
	--pargatz-bezel-watch-watch-size-mobile: 74%;
	--pargatz-bezel-watch-bezel-size-mobile: 42%;
	--pargatz-bezel-watch-watch-offset-x: var(--pargatz-bezel-watch-watch-offset-x-desktop);
	--pargatz-bezel-watch-watch-offset-y: var(--pargatz-bezel-watch-watch-offset-y-desktop);
	--pargatz-bezel-watch-bezel-offset-x: var(--pargatz-bezel-watch-bezel-offset-x-desktop);
	--pargatz-bezel-watch-bezel-offset-y: var(--pargatz-bezel-watch-bezel-offset-y-desktop);
	--pargatz-bezel-watch-watch-size: var(--pargatz-bezel-watch-watch-size-desktop);
	--pargatz-bezel-watch-bezel-size: var(--pargatz-bezel-watch-bezel-size-desktop);
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: var(--pargatz-bezel-watch-stage-height);
	background: #fff;
	overflow: hidden;
}

.pargatz-bezel-watch__stage {
	position: relative;
	width: 100%;
	height: var(--pargatz-bezel-watch-stage-height);
	margin: 0 auto;
}

.pargatz-bezel-watch__watch {
	position: absolute;
	top: 25%;
	left: 50%;
	z-index: 3;
	width: var(--pargatz-bezel-watch-watch-size);
	aspect-ratio: 1 / 1;
	transform: translate(calc(-50% + var(--pargatz-bezel-watch-watch-offset-x)), calc(-50% + var(--pargatz-bezel-watch-watch-offset-y)));
}

.pargatz-bezel-watch__watch-image,
.pargatz-bezel-watch__watch-image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}

.pargatz-bezel-watch__assigned-bezel {
	display: block;
	height: auto !important;
}

.pargatz-bezel-watch__watch-image {
	position: relative;
	z-index: 1;
}

.pargatz-bezel-watch__assigned-bezel {
	position: absolute;
	top: var(--pargatz-bezel-watch-ring-y);
	left: 50%;
	z-index: 2;
	width: var(--pargatz-bezel-watch-bezel-size);
	height: auto;
	aspect-ratio: 1 / 1;
	transform: translate(calc(-50% + var(--pargatz-bezel-watch-bezel-offset-x)), calc(-50% + var(--pargatz-bezel-watch-bezel-offset-y)));
	mix-blend-mode: normal;
	opacity: 1;
	pointer-events: none;
}

.pargatz-bezel-watch__assigned-bezel.is-assigning {
	animation: pargatz-bezel-watch-assign 680ms cubic-bezier(.22, .61, .36, 1);
}

.pargatz-bezel-watch__choice {
	position: absolute;
	z-index: 4;
	display: block;
	width: var(--pargatz-bezel-watch-thumb-width);
	padding: 0;
	border: 0;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pargatz-bezel-watch__choice:hover,
.pargatz-bezel-watch__choice:focus,
.pargatz-bezel-watch__choice:active,
.pargatz-bezel-watch__choice-inner,
.pargatz-bezel-watch__choice-image {
	background: transparent !important;
	box-shadow: none !important;
}

.pargatz-bezel-watch__choice--1 {
	top: 1%;
	left: 1.5%;
}

.pargatz-bezel-watch__choice--2 {
	top: 1%;
	right: 1.5%;
}

.pargatz-bezel-watch__choice--3 {
	bottom: 2%;
	left: 15%;
}

.pargatz-bezel-watch__choice--4 {
	bottom: -8%;
	left: 50%;
	transform: translateX(-50%);
}

.pargatz-bezel-watch__choice--5 {
	right: 15%;
	bottom: 2%;
}

/* Keep the center-bottom bezel at its original position while giving it
 * enough room to remain completely visible below the stage. */
@media (min-width: 768px) {
	.pargatz-bezel-watch {
		box-sizing: content-box;
		padding-bottom: clamp(72px, 8vw, 120px);
	}

	.pargatz-bezel-watch__stage {
		overflow: visible;
	}
}

.pargatz-bezel-watch__choice-inner {
	position: relative;
	display: block;
	transition: transform 360ms ease, filter 360ms ease;
}

.pargatz-bezel-watch__choice-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	transform-origin: center center;
}

.pargatz-bezel-watch__choice:hover .pargatz-bezel-watch__choice-inner,
.pargatz-bezel-watch__choice:focus-visible .pargatz-bezel-watch__choice-inner {
	transform: scale(1.07);
}

.pargatz-bezel-watch__choice:hover .pargatz-bezel-watch__choice-image,
.pargatz-bezel-watch__choice:focus-visible .pargatz-bezel-watch__choice-image {
	animation: pargatz-bezel-watch-slow-spin 7s linear infinite;
}

.pargatz-bezel-watch__choice.is-selected .pargatz-bezel-watch__choice-inner {
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .16));
}

.pargatz-bezel-watch__choice-check {
	position: absolute;
	top: 6%;
	right: 6%;
	display: grid;
	width: clamp(25px, 2.2vw, 36px);
	height: clamp(25px, 2.2vw, 36px);
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 50%;
	background: #111;
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	opacity: 0;
	transform: scale(.65);
	transition: opacity 220ms ease, transform 220ms ease;
	pointer-events: none;
}

.pargatz-bezel-watch__choice-check svg {
	display: block;
	width: 68%;
	height: 68%;
}

.pargatz-bezel-watch__choice.is-selected .pargatz-bezel-watch__choice-check {
	opacity: 1;
	transform: scale(1);
}

.pargatz-bezel-watch__choice:focus-visible {
	outline: 2px solid #111;
	outline-offset: 8px;
}

.pargatz-bezel-watch__empty {
	box-sizing: border-box;
	width: 100%;
	min-height: 260px;
	padding: 40px;
	background: #f5f5f5;
	color: #242424;
	font-size: 16px;
	text-align: center;
}

@keyframes pargatz-bezel-watch-slow-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes pargatz-bezel-watch-assign {
	0% {
		opacity: 1;
		transform: translate(calc(-50% + var(--pargatz-bezel-watch-bezel-offset-x)), calc(-50% + var(--pargatz-bezel-watch-bezel-offset-y))) scale(.76) rotate(-10deg);
	}
	65% {
		opacity: 1;
		transform: translate(calc(-50% + var(--pargatz-bezel-watch-bezel-offset-x)), calc(-50% + var(--pargatz-bezel-watch-bezel-offset-y))) scale(1.04) rotate(2deg);
	}
	100% {
		opacity: 1;
		transform: translate(calc(-50% + var(--pargatz-bezel-watch-bezel-offset-x)), calc(-50% + var(--pargatz-bezel-watch-bezel-offset-y))) scale(1) rotate(0deg);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.pargatz-bezel-watch {
		--pargatz-bezel-watch-watch-offset-x: var(--pargatz-bezel-watch-watch-offset-x-tablet);
		--pargatz-bezel-watch-watch-offset-y: var(--pargatz-bezel-watch-watch-offset-y-tablet);
		--pargatz-bezel-watch-bezel-offset-x: var(--pargatz-bezel-watch-bezel-offset-x-tablet);
		--pargatz-bezel-watch-bezel-offset-y: var(--pargatz-bezel-watch-bezel-offset-y-tablet);
		--pargatz-bezel-watch-watch-size: var(--pargatz-bezel-watch-watch-size-tablet);
		--pargatz-bezel-watch-bezel-size: var(--pargatz-bezel-watch-bezel-size-tablet);
	}
}

@media (max-width: 767px) {
	.pargatz-bezel-watch {
		--pargatz-bezel-watch-stage-height: 100svh;
		--pargatz-bezel-watch-ring-y: 50%;
		--pargatz-bezel-watch-watch-offset-x: var(--pargatz-bezel-watch-watch-offset-x-mobile);
		--pargatz-bezel-watch-watch-offset-y: var(--pargatz-bezel-watch-watch-offset-y-mobile);
		--pargatz-bezel-watch-bezel-offset-x: var(--pargatz-bezel-watch-bezel-offset-x-mobile);
		--pargatz-bezel-watch-bezel-offset-y: var(--pargatz-bezel-watch-bezel-offset-y-mobile);
		--pargatz-bezel-watch-watch-size: var(--pargatz-bezel-watch-watch-size-mobile);
		--pargatz-bezel-watch-bezel-size: var(--pargatz-bezel-watch-bezel-size-mobile);
		width: 100%;
		max-width: none;
		margin-left: 0;
		height: 100svh;
		min-height: 100svh;
	}

	.pargatz-bezel-watch__stage {
		width: 100%;
		height: 100svh;
		min-height: 100svh;
	}

	.pargatz-bezel-watch__watch {
		top: 50%;
		left: 70%;
		width: var(--pargatz-bezel-watch-watch-size);
	}

	.pargatz-bezel-watch__watch-image {
		transform: rotate(90deg);
		transform-origin: center center;
	}

	.pargatz-bezel-watch__choice {
		left: 2%;
		right: auto;
		width: 26vw;
		max-width: 155px;
		transform: none;
	}

	.pargatz-bezel-watch__choice--1 {
		top: 1%;
		bottom: auto;
	}

	.pargatz-bezel-watch__choice--2 {
		top: 21%;
		bottom: auto;
	}

	.pargatz-bezel-watch__choice--3 {
		top: 41%;
		bottom: auto;
	}

	.pargatz-bezel-watch__choice--4 {
		top: 61%;
		bottom: auto;
	}

	.pargatz-bezel-watch__choice--5 {
		top: 78%;
		bottom: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pargatz-bezel-watch__choice-inner,
	.pargatz-bezel-watch__choice:hover .pargatz-bezel-watch__choice-inner,
	.pargatz-bezel-watch__choice:focus-visible .pargatz-bezel-watch__choice-inner {
		transition: none;
		transform: none;
	}

	.pargatz-bezel-watch__choice:hover .pargatz-bezel-watch__choice-image,
	.pargatz-bezel-watch__choice:focus-visible .pargatz-bezel-watch__choice-image,
	.pargatz-bezel-watch__assigned-bezel.is-assigning {
		animation: none;
	}
}