/**
 * Product gallery: template-parts/product/gallery.php (2162:693).
 * Square main image, radius 32 (28 on phones), photo backdrop, the photo
 * inset 6%; white "n / N" pill 24px from the bottom, 14px from the right.
 * Thumbs: four 146px squares, 12px apart, radius 20, line border, the
 * current one with a 2px black border.
 */

.product-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.product-gallery__main {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: var(--color-photo);
}

.product-gallery__track {
	display: flex;
	overflow-x: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.product-gallery__track::-webkit-scrollbar {
	display: none;
}

.product-gallery__slide {
	display: flex;
	flex: 0 0 100%;
	overflow: hidden;
	aspect-ratio: 1;
	scroll-snap-align: start;
}

/* .product-gallery prefix: WooCommerce sets ".woocommerce img { height: auto }". */
.product-gallery .product-gallery__img {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 6.2%;
	object-fit: contain;
	transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
	transition: transform 0.2s ease;
}

/* Zoom on hover: pointer devices only, product-page.js sets the origin. */
@media (hover: hover) and (pointer: fine) {
	.product-gallery__slide {
		cursor: zoom-in;
	}

	.product-gallery__slide.is-zoomed .product-gallery__img {
		transform: scale(2);
	}
}

.product-gallery__count {
	position: absolute;
	right: 14px;
	bottom: var(--space-md);
	margin: 0;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
	pointer-events: none;
}

.product-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-gallery__thumb {
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-photo);
	cursor: pointer;
}

.product-gallery__thumb:hover {
	border-color: var(--color-ink);
}

.product-gallery__thumb[aria-current="true"] {
	border: 2px solid var(--color-black);
}

.product-gallery .product-gallery__thumb-img {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 8.5%;
	object-fit: contain;
}

@media (min-width: 768px) {
	.product-gallery__main {
		border-radius: var(--radius-xl);
	}

	.product-gallery__thumbs {
		gap: 12px;
	}

	.product-gallery__thumb {
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-gallery .product-gallery__img {
		transition: none;
	}
}