/* Product photo slider (components/product/gallery.php, assets/js/gallery.js).
   Without JS the viewport scrolls with snap; with JS (.is-enhanced) slides move with a transform and a swipe. */
.gallery {
	position: relative;
	width: 100%;
	max-width: 540px;
}

.gallery__viewport {
	position: relative;
	width: 100%;
	max-width: var(--gallery-size, 540px);
	margin-inline: auto;
	aspect-ratio: 1;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	background: #fff;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.gallery__viewport::-webkit-scrollbar {
	display: none;
}

.gallery__viewport:focus {
	outline: none;
}

.gallery__viewport:focus-visible {
	outline: 3px solid rgba(0, 106, 200, 0.35);
	outline-offset: -3px;
}

.gallery__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gallery__slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
}

.gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.gallery.is-enhanced .gallery__viewport {
	overflow: hidden;
	cursor: grab;
}

.gallery.is-enhanced .gallery__viewport.is-dragging {
	cursor: grabbing;
}

.gallery.is-enhanced .gallery__track {
	transform: translate3d(calc(var(--gallery-index, 0) * -100% + var(--gallery-drag, 0px)), 0, 0);
	transition: transform 0.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
	will-change: transform;
}

.gallery.is-enhanced .gallery__viewport.is-dragging .gallery__track {
	transition: none;
}

/* Blue round arrow, 44px, on the edge of the photo (Figma). Needs JS, so it is hidden without it. */
.gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: block;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--dur-fast, 160ms) var(--ease-out, ease-out), box-shadow var(--dur, 320ms) var(--ease-out, ease-out), opacity var(--dur, 320ms) var(--ease-out, ease-out), visibility 0s linear 0s;
}

html:not(.js) .gallery__arrow,
.gallery[data-single] .gallery__arrow {
	display: none;
}

.gallery__arrow svg {
	display: block;
}

.gallery__arrow--prev {
	left: 0;
}

.gallery__arrow--next {
	right: 0;
}

.gallery__arrow:focus {
	outline: none;
}

.gallery__arrow:focus-visible {
	outline: 3px solid rgba(0, 106, 200, 0.35);
	outline-offset: 3px;
}

.gallery__arrow.is-off {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur, 320ms) var(--ease-out, ease-out), visibility 0s linear var(--dur, 320ms);
}

@media (hover: hover) {
	.gallery__arrow:hover {
		box-shadow: 0 6px 16px rgba(0, 106, 200, 0.32);
		transform: scale(1.07);
	}
}

.gallery__arrow:active {
	transform: scale(0.94);
	transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
	.gallery.is-enhanced .gallery__track,
	.gallery__arrow,
	.gallery__arrow.is-off {
		transition: none;
	}

	.gallery__arrow:hover,
	.gallery__arrow:active {
		transform: none;
	}
}