/* === Full-size product image viewer =====================================
   Behaviour in product-viewer.js. The photo is shown whole and sized to the
   screen; a tap zooms 2.5x. Arrows either side on desktop; on phones the
   photo takes the full width with the arrows and counter in a bar below. */

.ec-viewer {
	position: fixed;
	z-index: 300;
	inset: 0;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	justify-items: center;
	padding: 64px 88px 18px;
	background: #120e0c;
	color: #fffaf5;
	overscroll-behavior: contain;
	touch-action: none;
}

.ec-viewer[hidden] { display: none; }

.ec-viewer__stage {
	position: relative;
	display: grid;
	width: 100%;
	min-height: 0;
	place-items: center;
	overflow: hidden;
}

.ec-viewer__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100svh - 64px - 120px);
	object-fit: contain;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin: center center;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}

.ec-viewer.is-loading .ec-viewer__image { opacity: .35; }
.ec-viewer.is-zoomed .ec-viewer__image { cursor: zoom-out; transition: transform .12s linear; }
.ec-viewer.is-zoomed .ec-viewer__stage { cursor: zoom-out; }

/* Bar: previous · count · next. On desktop the arrows float at the sides. */
.ec-viewer__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding-top: 14px;
}

.ec-viewer__count {
	min-width: 56px;
	margin: 0;
	color: rgba(255, 250, 245, .8);
	font: 500 11px / 1 var(--ec-font-text, sans-serif);
	letter-spacing: .16em;
	text-align: center;
}

.ec-viewer__hint {
	margin: 10px 0 0;
	color: rgba(255, 250, 245, .55);
	font: 400 12px / 1.3 var(--ec-font-text, sans-serif);
	letter-spacing: .04em;
	text-align: center;
}

.ec-viewer__nav,
.ec-viewer__close {
	display: grid;
	width: 48px;
	height: 48px;
	padding: 0;
	place-items: center;
	border: 1px solid rgba(255, 250, 245, .45);
	border-radius: 50%;
	color: #fffaf5;
	background: rgba(18, 14, 12, .4);
	cursor: pointer;
	font: 400 22px / 1 var(--ec-font-text, sans-serif);
	transition: border-color .2s ease, background-color .2s ease;
}

.ec-viewer__nav[hidden] { display: none; }

.ec-viewer__nav:hover,
.ec-viewer__nav:focus-visible,
.ec-viewer__close:hover,
.ec-viewer__close:focus-visible {
	border-color: #fffaf5;
	background: rgba(255, 250, 245, .12);
	outline: none;
}

.ec-viewer__nav:focus-visible,
.ec-viewer__close:focus-visible { box-shadow: 0 0 0 2px #fffaf5; }

.ec-viewer__close {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 28px;
}

@media (min-width: 761px) {
	.ec-viewer__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.ec-viewer__previous { left: 22px; }
	.ec-viewer__next { right: 22px; }
}

@media (max-width: 760px) {
	.ec-viewer { padding: 60px 0 calc(14px + env(safe-area-inset-bottom)); }
	.ec-viewer__image { max-height: calc(100svh - 60px - 128px); }
	.ec-viewer__close {
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
	}
	.ec-viewer__nav { width: 44px; height: 44px; font-size: 20px; }
}

/* The photos that open the viewer. */
[data-product-viewer-src] { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
	.ec-viewer__image,
	.ec-viewer.is-zoomed .ec-viewer__image { transition: none; }
}