/* CN Hotspot Scenes: front end
   Override the look from your theme with the custom properties on .cn-scene. */

.cn-scene {
	--cn-dot: 25px;
	--cn-dot-bg: #fff;
	--cn-label-color: #fff;
	--cn-label-size: 12.86px;
	--cn-label-gap: 14px;

	position: relative;
	display: block;
	width: 100%;
	/* On its own a scene takes its image's shape (--cn-r).
	   In a row every scene takes the row's fixed shape (--cn-box-r) instead. */
	aspect-ratio: var(--cn-box-r, var(--cn-r, 1.5));
	overflow: hidden;
	line-height: 1.2;
}

/* The canvas always has the image's own shape and holds the image and its hotspots,
   so a hotspot at 67% across the image stays on that point at every size.
   When the box is a different shape the canvas grows to cover it, centred,
   and the box crops the overflow: the same result as object-fit: cover. */
.cn-scene__canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, calc(100% * var(--cn-r, 1.5) / var(--cn-box-r, var(--cn-r, 1.5))));
	aspect-ratio: var(--cn-r, 1.5);
	transform: translate(-50%, -50%);
}

.cn-scene img.cn-scene__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

/* The link's own box is just the dot, centred on the saved point. */
.cn-scene a.cn-spot {
	position: absolute;
	z-index: 2;
	display: block;
	width: var(--cn-dot);
	height: var(--cn-dot);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	color: var(--cn-label-color);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Themes often outline every focused link, which draws a box around a tapped dot.
   Keep the ring for keyboard users only. */
.cn-scene a.cn-spot:focus:not(:focus-visible) {
	outline: none;
}

.cn-scene a.cn-spot:hover,
.cn-scene a.cn-spot:focus-visible,
.cn-scene a.cn-spot.is-open {
	z-index: 3;
}

.cn-scene .cn-spot__dot {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--cn-dot-bg);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22), 0 0 14px 5px rgba(255, 255, 255, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* The product image is the same size as the dot and is clipped to its circle. */
.cn-scene .cn-spot__dot img {
	display: block;
	width: var(--cn-dot);
	height: var(--cn-dot);
	max-width: none;
	object-fit: contain;
	border-radius: 50%;
	box-shadow: none;
}

.cn-scene a.cn-spot:hover .cn-spot__dot,
.cn-scene a.cn-spot:focus-visible .cn-spot__dot {
	transform: scale(1.1);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3), 0 0 16px 6px rgba(255, 255, 255, 0.6);
}

.cn-scene a.cn-spot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 5px;
}

.cn-scene .cn-spot__label {
	position: absolute;
	top: 50%;
	left: calc(100% + var(--cn-label-gap));
	transform: translateY(-50%);
	max-width: 240px;
	overflow: hidden;
	color: inherit;
	font-size: var(--cn-label-size);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-overflow: ellipsis;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	white-space: nowrap;
}

.cn-scene .cn-spot--left .cn-spot__label {
	right: calc(100% + var(--cn-label-gap));
	left: auto;
}

/* Row of scenes: every slide is the same fixed box, set by the shortcode's
   width and height. --cn-box-r is that width divided by that height. */
.cn-scenes {
	--cn-w: 487px;
	--cn-box-r: 1.1326;
	--cn-gap: 24px;

	position: relative;
}

.cn-scenes__track {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--cn-gap);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.cn-scenes__track::-webkit-scrollbar {
	display: none;
}

.cn-scenes__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The set width, or 88% of the row when that is smaller (phones), so the next
   slide always peeks in. The height follows from the box shape, so a slide that
   has to shrink keeps the same crop and its hotspots stay in view. */
.cn-scenes .cn-scene {
	flex: 0 0 auto;
	width: min(var(--cn-w), 88%);
	scroll-snap-align: start;
}

/* Arrow buttons.
   Themes and Elementor's site settings style every <button> (colour, padding, radius,
   hover effects) with selectors stronger than a single class, so each property that
   decides how these look is declared !important. To restyle them on purpose, set the
   --cn-nav-* properties on .cn-scenes instead of fighting these rules. */
.cn-scenes button.cn-scenes__nav {
	position: absolute !important;
	top: calc(50% - (var(--cn-nav-size, 44px) / 2)) !important;
	bottom: auto !important;
	z-index: 4;
	display: grid !important;
	place-items: center;
	box-sizing: border-box !important;
	width: var(--cn-nav-size, 44px) !important;
	min-width: 0 !important;
	max-width: none !important;
	height: var(--cn-nav-size, 44px) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--cn-nav-bg, #fff) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important;
	color: var(--cn-nav-color, #111) !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	opacity: 1 !important;
	cursor: pointer;
	transform: none !important;
	transition: opacity 0.2s ease !important;
	-webkit-appearance: none;
	appearance: none;
}

.cn-scenes button.cn-scenes__nav:hover,
.cn-scenes button.cn-scenes__nav:focus,
.cn-scenes button.cn-scenes__nav:active {
	border: 0 !important;
	background: var(--cn-nav-bg, #fff) !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.26) !important;
	color: var(--cn-nav-color, #111) !important;
	transform: none !important;
}

/* No ring left behind after a mouse click or tap; keyboard users still get one below. */
.cn-scenes button.cn-scenes__nav:focus:not(:focus-visible) {
	outline: none !important;
}

.cn-scenes button.cn-scenes__nav:focus-visible {
	outline: 2px solid var(--cn-nav-color, #111) !important;
	outline-offset: 2px !important;
}

.cn-scenes button.cn-scenes__nav[hidden] {
	display: none !important;
}

.cn-scenes button.cn-scenes__nav:disabled {
	opacity: 0 !important;
	pointer-events: none !important;
}

.cn-scenes button.cn-scenes__nav--prev {
	right: auto !important;
	left: 12px !important;
}

.cn-scenes button.cn-scenes__nav--next {
	right: 12px !important;
	left: auto !important;
}

.cn-scenes button.cn-scenes__nav svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	fill: none !important;
	transform: none !important;
}

.cn-scenes button.cn-scenes__nav svg path {
	fill: none !important;
	stroke: currentColor !important;
}

.cn-scenes button.cn-scenes__nav--prev svg {
	transform: rotate(180deg) !important;
}

/* Only editors ever see this. */
.cn-scene-note {
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed #b32d2e;
	color: #b32d2e;
	font-size: 14px;
}

/* Phones and tablets: names always show, same as on desktop. */
@media (max-width: 767px) {
	.cn-scene {
		--cn-label-gap: 8px;
	}

	/* Swiping is the natural gesture here, and arrows would cover the image. */
	.cn-scenes button.cn-scenes__nav {
		display: none !important;
	}
}

/* Touch screens (phones and tablets): the dot stays 25px, but the area that
   responds to a tap is 44px. */
@media (pointer: coarse) {
	.cn-scene a.cn-spot::before {
		content: "";
		position: absolute;
		inset: calc((var(--cn-dot) - 44px) / 2);
		border-radius: 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-scene .cn-spot__dot,
	.cn-scene .cn-spot__label {
		transition: none;
	}

	.cn-scenes button.cn-scenes__nav {
		transition: none !important;
	}
}