/**
 * Single product gallery.
 *
 * One main plate with a keyline, a row of small square thumbs beneath, the
 * active thumb outlined in ink. No arrows over the image, no zoom chrome.
 * Reads the plugin's tokens.
 */

.modern-product-gallery-column {
	position: relative;
	min-width: 0;
}

.modern-product-gallery-wrapper,
.modern-slick-gallery,
.simple-main-gallery {
	position: relative;
	width: 100%;
	margin: 0;
	background: var(--fm-n1);
	border-radius: var(--fm-radius);
	overflow: hidden;
	outline: 1px solid var(--fm-n2);
	outline-offset: -1px;
}

.modern-product-gallery-column img,
.modern-product-gallery-column .woocommerce-product-gallery img,
.modern-slick-gallery img,
.simple-main-gallery .gallery-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fm-radius);
	box-shadow: none;
}

.simple-main-gallery {
	aspect-ratio: 1;
}

.simple-main-gallery .gallery-image {
	position: absolute;
	inset: 0;
	display: none;
}

.simple-main-gallery .gallery-image.active {
	display: block;
}

.simple-main-gallery .gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.simple-main-gallery .gallery-image img.zoomed {
	transform: none;
	cursor: default;
}

.simple-main-gallery::before,
.simple-main-gallery::after,
.modern-slick-gallery.loading::before {
	display: none;
}

.modern-slick-gallery .modern-sale-badge,
.modern-product-gallery-column span.onsale {
	position: absolute;
	top: var(--fm-m);
	inset-inline-start: var(--fm-m);
	z-index: 2;
}

.modern-slick-gallery .slick-dots {
	position: static;
	display: flex;
	justify-content: center;
	gap: var(--fm-m);
	margin: var(--fm-m) 0 0;
	padding: 0;
	list-style: none;
}

.modern-slick-gallery .slick-dots li {
	width: calc(var(--fm-m) * 3);
	height: 3px;
	margin: 0;
}

.modern-slick-gallery .slick-dots li button {
	width: 100%;
	height: 100%;
	padding: 0;
	background: var(--fm-n3);
	border: 0;
	font-size: 0;
	cursor: pointer;
}

.modern-slick-gallery .slick-dots li button::before {
	display: none;
}

.modern-slick-gallery .slick-dots li.slick-active button {
	background: var(--fm-ink);
}

/* Thumbs */
.simple-thumbs-gallery,
.modern-thumbs-slider {
	display: flex;
	gap: var(--fm-m);
	margin: var(--fm-m) 0 0;
	padding: 0 0 4px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--fm-n3) transparent;
}

.simple-thumbs-gallery::-webkit-scrollbar {
	height: 6px;
}

.simple-thumbs-gallery::-webkit-scrollbar-track {
	background: transparent;
}

.simple-thumbs-gallery::-webkit-scrollbar-thumb,
.simple-thumbs-gallery::-webkit-scrollbar-thumb:hover {
	background: var(--fm-n3);
	border-radius: var(--fm-radius);
}

.simple-thumbs-gallery .gallery-thumb {
	flex: 0 0 calc(var(--fm-m) * 9);
	width: calc(var(--fm-m) * 9);
	height: calc(var(--fm-m) * 9);
	padding: 0;
	background: var(--fm-n1);
	border: 1.5px solid var(--fm-n2);
	border-radius: var(--fm-radius);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--fm-fast) var(--fm-ease);
}

.simple-thumbs-gallery .gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.simple-thumbs-gallery .gallery-thumb:hover {
	border-color: var(--fm-black);
}

.simple-thumbs-gallery .gallery-thumb.active {
	border-color: var(--fm-ink);
	box-shadow: inset 0 0 0 1px var(--fm-ink);
}

.simple-thumbs-gallery .gallery-thumb:focus-visible {
	outline: none;
	box-shadow: var(--fm-focus);
}

@media (prefers-reduced-motion: reduce) {
	.simple-thumbs-gallery .gallery-thumb {
		transition: none;
	}
}