/* Product page images (SMI_TK_Kuvat). Colours from the theme, overridable with the variables. */
.smi-kuvat,
.tuote-ylaosa {
	--smi-kuvat-korostus: var(--wp--preset--color--primary, #444);
	--smi-kuvat-tausta: rgb(20 16 14 / 0.94);
}

/* Main image: a stable frame (aspect-ratio set by the script) and a zoom cursor */
.smi-kuvat__avaa {
	display: block;
	cursor: zoom-in;
}
.smi-kuvat__avaa img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: contain !important;
}
.smi-kuvat__avaa:focus-visible,
.tuote-galleria :is(a, .smi-kuvat__pikkukuva):focus-visible {
	outline: 2px solid var(--smi-kuvat-korostus);
	outline-offset: 3px;
}

/* Thumbnails */
.tuote-galleria :is(a, .smi-kuvat__pikkukuva) { display: block; cursor: pointer; }
.smi-kuvat__pikkukuva { padding: 0; border: 0; background: none; width: 100%; }
.tuote-galleria figure.wp-block-image { outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 150ms ease; }
.tuote-galleria figure.wp-block-image img { transition: opacity 150ms ease; }
.tuote-galleria:has(.is-valittu) figure.wp-block-image:not(.is-valittu) img { opacity: 0.75; }
.tuote-galleria figure.wp-block-image:hover img { opacity: 1; }
.tuote-galleria figure.is-valittu { outline-color: var(--smi-kuvat-korostus); }

/* Viewer */
html:has(.smi-kuvat[open]) {
	overflow: hidden;
	scrollbar-gutter: stable;
}
.smi-kuvat {
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--smi-kuvat-tausta);
	color: #fff;
	overflow: hidden;
	overscroll-behavior: contain;
	touch-action: none; /* gestures are the viewer's own: the page never zooms */
}
.smi-kuvat::backdrop { background: transparent; }
.smi-kuvat[open] {
	display: grid;
	place-items: center;
	animation: smi-kuvat-nayta 180ms ease;
}
@keyframes smi-kuvat-nayta { from { opacity: 0; } }
.smi-kuvat__kuva {
	box-sizing: border-box;
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 4.5rem 5.5rem 1.5rem;
	max-width: 100%;
}
.smi-kuvat__kuva img {
	display: block;
	max-width: min(100%, 1600px);
	max-height: calc(100dvh - 8.5rem);
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	cursor: zoom-in;
	transition: opacity 150ms ease, transform 200ms ease;
	will-change: transform;
}
.smi-kuvat.is-suurennettu .smi-kuvat__kuva img { cursor: zoom-out; }
.smi-kuvat.is-ele .smi-kuvat__kuva img { transition: opacity 150ms ease; }
.smi-kuvat.is-suurennettu figcaption { visibility: hidden; }
.smi-kuvat.is-latautuu .smi-kuvat__kuva img { opacity: 0.35; }
.smi-kuvat__kuva figcaption {
	min-height: 1.5em;
	font-size: 0.875rem;
	text-align: center;
	opacity: 0.85;
}
.smi-kuvat__laskuri { opacity: 0.7; margin-left: 0.5em; }
.smi-kuvat__virhe { position: absolute; margin: 0; }

.smi-kuvat__nappi {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.35);
	color: #fff;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}
.smi-kuvat__nappi:is(:hover, :focus-visible) {
	background: var(--smi-kuvat-korostus);
	border-color: var(--smi-kuvat-korostus);
	outline: none;
}
.smi-kuvat__nappi:focus-visible { box-shadow: 0 0 0 3px #fff; }
.smi-kuvat__sulje { top: 1rem; right: 1rem; }
.smi-kuvat__edellinen { left: 1rem; top: 50%; translate: 0 -50%; }
.smi-kuvat__seuraava { right: 1rem; top: 50%; translate: 0 -50%; }
.smi-kuvat.is-yksi :is(.smi-kuvat__edellinen, .smi-kuvat__seuraava) { display: none; }

@media (max-width: 781px) {
	.smi-kuvat__kuva { padding: 4.25rem 0.5rem 5.5rem; }
	.smi-kuvat__kuva img { max-height: calc(100dvh - 11rem); }
	.smi-kuvat__edellinen,
	.smi-kuvat__seuraava { top: auto; bottom: 1rem; translate: none; }
	.smi-kuvat__edellinen { left: calc(50% - 3.5rem); }
	.smi-kuvat__seuraava { right: calc(50% - 3.5rem); }
}
/* Phone on its side: arrows back to the sides, more room for the image */
@media (max-height: 500px) and (orientation: landscape) {
	.smi-kuvat__kuva { padding: 0.75rem 4.5rem; }
	.smi-kuvat__kuva img { max-height: calc(100dvh - 3.5rem); }
	.smi-kuvat__edellinen,
	.smi-kuvat__seuraava { top: 50%; bottom: auto; translate: 0 -50%; }
	.smi-kuvat__edellinen { left: 0.75rem; }
	.smi-kuvat__seuraava { right: 0.75rem; }
	.smi-kuvat__sulje { top: 0.75rem; right: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
	.smi-kuvat[open] { animation: none; }
	.smi-kuvat__kuva img,
	.tuote-galleria figure.wp-block-image,
	.tuote-galleria figure.wp-block-image img { transition: none; }
}