.product-media {
	display: grid;
	gap: 1rem;
	margin-top: var(--space-xl);
}

.product-gallery__viewer {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .75rem;
	align-items: center;
}

.product-gallery__viewer--single {
	grid-template-columns: 1fr;
	justify-items: center;
}

.product-gallery__viewer--single .product-gallery__main {
	width: 100%;
}

.product-gallery__main {
	border: 0;
	padding: 0;
	background: transparent;
	cursor: zoom-in;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.product-gallery__main img {
	display: block;
	width: 100%;
	max-height: min(68vh, 42rem);
	object-fit: contain;
	background: #f7f8f6;
}

.product-gallery__nav {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.product-gallery__nav:hover,
.product-gallery__nav:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
	outline: none;
}

.product-gallery__counter {
	margin: 0;
	color: var(--color-muted);
	font-size: .9rem;
	font-weight: 600;
	text-align: center;
}

.product-gallery__thumb-rail,
.product-gallery-lightbox__thumbs,
.product-gallery-hero-strip__row {
	display: flex;
	gap: .6rem;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: .25rem;
}

.product-gallery__thumb-rail {
	justify-content: center;
}

.product-gallery__thumb,
.product-gallery-hero-strip__thumb {
	border: 1px solid var(--color-border);
	background: #fff;
	border-radius: .55rem;
	padding: 0;
	cursor: pointer;
	flex: 0 0 auto;
	width: 4.2rem;
	height: 4.2rem;
	overflow: hidden;
}

.product-gallery__thumb img,
.product-gallery-hero-strip__thumb img,
.product-gallery-lightbox__thumbs .product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-gallery__thumb.is-active,
.product-gallery__thumb[aria-selected="true"] {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.product-gallery-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(6, 8, 10, .94);
	z-index: 1200;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto 1fr auto;
	gap: 1rem;
	padding: 1rem;
	align-items: center;
}

.product-gallery-lightbox[hidden] {
	display: none !important;
}

.product-gallery-lightbox__close {
	grid-column: 3;
	justify-self: end;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.product-gallery-lightbox__image {
	grid-column: 2;
	grid-row: 2;
	max-width: 100%;
	max-height: 74vh;
	justify-self: center;
	object-fit: contain;
	user-select: none;
	touch-action: pan-y;
	-webkit-user-drag: none;
	cursor: grab;
}

.product-gallery-lightbox__image.is-dragging {
	cursor: grabbing;
}

.product-gallery-lightbox__nav {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid rgba(20, 24, 28, .15);
	background: rgba(255,255,255,.92);
	color: #1f2328;
	font-size: 1.2rem;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.product-gallery-lightbox__nav--prev {
	grid-column: 1;
	grid-row: 2;
}

.product-gallery-lightbox__nav--next {
	grid-column: 3;
	grid-row: 2;
}

.product-gallery-lightbox__meta {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	gap: .35rem;
	justify-items: center;
	text-align: center;
}

.product-gallery-lightbox__counter {
	margin: 0;
	color: #e7ecef;
	font-weight: 600;
}

.product-gallery-lightbox__hint {
	margin: 0;
	max-width: min(36rem, 86vw);
	padding: .55rem .9rem;
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	color: rgba(231, 236, 239, .96);
	font-size: .92rem;
	line-height: 1.35;
}

.product-gallery-lightbox__thumbs {
	grid-column: 1 / -1;
	grid-row: 3;
	justify-content: center;
}

.product-gallery-lightbox__thumbs .product-gallery__thumb {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.35);
}

.product-gallery-hero-strip {
	width: 100%;
	display: grid;
	gap: .5rem;
}

.product-gallery-hero-strip__rail {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .45rem;
}

.product-gallery-hero-strip__nav {
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.product-gallery-hero-strip__nav:hover,
.product-gallery-hero-strip__nav:focus-visible {
	color: var(--color-accent);
	border-color: var(--color-accent);
	outline: none;
}

.product-gallery-hero-strip__title {
	margin: 0;
	font-size: .85rem;
	font-weight: 700;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: center;
}

.product-gallery-hero-strip--two .product-gallery-hero-strip__rail {
	grid-template-columns: auto auto auto;
	justify-content: center;
}

.product-gallery-hero-strip--two .product-gallery-hero-strip__row {
	overflow-x: visible;
	justify-content: center;
}

body.has-gallery-lightbox-open {
	overflow: hidden;
}

@media (max-width: 900px) {
	.product-gallery__viewer {
		grid-template-columns: 1fr;
		position: relative;
	}

	.product-gallery__nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 2.3rem;
		height: 2.3rem;
		background: rgba(255,255,255,.92);
		box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
	}

	.product-gallery__nav--prev {
		left: .45rem;
	}

	.product-gallery__nav--next {
		right: .45rem;
	}

	.product-gallery-lightbox {
		padding: .6rem;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto auto;
	}

	.product-gallery-lightbox__close,
	.product-gallery-lightbox__meta,
	.product-gallery-lightbox__image,
	.product-gallery-lightbox__thumbs {
		grid-column: 1;
	}

	.product-gallery-lightbox__meta {
		grid-row: 1;
	}

	.product-gallery-lightbox__hint {
		display: none;
	}

	.product-gallery-lightbox__image {
		grid-row: 2;
	}

	.product-gallery-lightbox__thumbs {
		grid-row: 4;
		justify-content: flex-start;
	}

	.product-gallery-lightbox__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.product-gallery-lightbox__nav--prev {
		left: .5rem;
	}

	.product-gallery-lightbox__nav--next {
		right: .5rem;
	}
}