/**
 * Skin Basic 1.5.4 — Product Single gallery composition.
 *
 * Presentation only. Wapuos remains the source of truth for:
 * - gallery frames;
 * - variation-specific media;
 * - variation bus synchronization;
 * - thumb behavior;
 * - lightbox;
 * - swipe/motion.
 */

body.single-product .wapu-single--regular-product .wapu-single__gallery {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding: 0 !important;
	position: relative;
}

body.single-product .wapu-single__gallery > .wapu-vg,
body.single-product .wapu-single__gallery .wapu-vg--horizontal {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	gap: 12px !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Main image: same Base media element, recomposed as the large reference frame. */
body.single-product .wapu-single__gallery .wapu-vg__main {
	position: relative !important;
	grid-column: auto !important;
	grid-row: auto !important;
	width: 100% !important;
	min-width: 0 !important;
	aspect-ratio: 1 / 1 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--wtds-r-lg, 12px) !important;
	background: var(--wtds-surface-container-lowest, var(--wtds-surface)) !important;
	overflow: hidden !important;
}

body.single-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img) {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: clamp(16px, 3vw, 32px) !important;
	object-fit: contain !important;
	object-position: center !important;
	border: 0 !important;
	border-radius: inherit !important;
	background: transparent !important;
}

body.single-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__video, .wapu-vg__embed) {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	border-radius: inherit !important;
	object-fit: cover !important;
}

/* Real Base thumbnails remain the controls; only their composition changes. */
body.single-product .wapu-single__gallery .wapu-vg__thumbs,
body.single-product .wapu-single__gallery .wapu-vg__thumbs--horizontal,
body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumbs:not([hidden]),
body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumbs--horizontal:not([hidden]) {
	position: relative !important;
	grid-column: auto !important;
	grid-row: auto !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 0 4px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 0 !important;
}

body.single-product .wapu-single__gallery .wapu-vg__thumbs[hidden] {
	display: none !important;
}

body.single-product .wapu-single__gallery .wapu-vg__thumbs::-webkit-scrollbar {
	display: none !important;
}

body.single-product .wapu-single__gallery .wapu-vg__thumbs::before,
body.single-product .wapu-single__gallery .wapu-vg__thumbs::after {
	display: none !important;
	content: none !important;
}

body.single-product .wapu-single__gallery .wapu-vg__thumb,
body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumb {
	position: relative !important;
	display: block !important;
	width: clamp(72px, 8vw, 96px) !important;
	height: clamp(72px, 8vw, 96px) !important;
	min-width: clamp(72px, 8vw, 96px) !important;
	min-height: clamp(72px, 8vw, 96px) !important;
	aspect-ratio: 1 / 1 !important;
	flex: 0 0 clamp(72px, 8vw, 96px) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid transparent !important;
	border-radius: 16px !important;
	background: var(--wtds-surface-container-lowest, var(--wtds-surface)) !important;
	box-shadow: none !important;
	overflow: hidden !important;
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
	scroll-snap-align: start;
}

body.single-product .wapu-single__gallery .wapu-vg__thumb.is-active,
body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumb.is-active {
	border-color: var(--wtds-ink) !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

body.single-product .wapu-single__gallery .wapu-vg__thumb:not(.is-active):hover,
body.single-product .wapu-single__gallery .wapu-vg__thumb:not(.is-active):focus-visible {
	border-color: var(--wtds-outline) !important;
}

body.single-product .wapu-single__gallery .wapu-vg__thumb :is(img, video),
body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumb :is(img, video) {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: inherit !important;
	filter: none !important;
}

/* Reference-style previous/next controls. They only proxy the existing Base thumbs. */
.skin-basic-gallery-nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wtds-outline) 65%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--wtds-surface) 94%, transparent);
	color: var(--wtds-ink);
	box-shadow: var(--wtds-shadow-sm, 0 2px 8px rgba(0,0,0,.08));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.skin-basic-gallery-nav::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

.skin-basic-gallery-nav--prev {
	left: 12px;
}

.skin-basic-gallery-nav--prev::before {
	transform: rotate(-135deg) translate(-1px, -1px);
}

.skin-basic-gallery-nav--next {
	right: 12px;
}

.skin-basic-gallery-nav--next::before {
	transform: rotate(45deg) translate(-1px, 1px);
}

.skin-basic-gallery-nav:hover,
.skin-basic-gallery-nav:focus-visible {
	background: var(--wtds-surface);
	border-color: var(--wtds-ink);
}

.skin-basic-gallery-nav:focus-visible {
	outline: 2px solid var(--wtds-ink);
	outline-offset: 2px;
}

.skin-basic-gallery-nav[hidden] {
	display: none !important;
}


/*
 * 1.5.4 — Structured gallery viewport.
 *
 * Desktop keeps one bounded gallery block: a stable media stage plus one
 * thumbnail rail. The parent still owns the actual gallery frames, lightbox
 * and variation media; this only constrains composition so the gallery cannot
 * keep growing vertically with the surrounding page.
 */
@media (min-width: 62rem) {
	body.single-product .wapu-single--regular-product .wapu-single__gallery {
		--skin-basic-gallery-gap: 12px;
		--skin-basic-gallery-thumb-size: clamp(72px, 7vw, 88px);
		contain: layout;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: minmax(0, 1fr) var(--skin-basic-gallery-thumb-size) !important;
		gap: var(--skin-basic-gallery-gap) !important;
		block-size: clamp(560px, 72vh, 720px) !important;
		min-block-size: 0 !important;
		max-block-size: 720px !important;
		overflow: hidden !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__main {
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		align-self: stretch !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__thumbs,
	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__thumbs--horizontal {
		grid-column: 1 !important;
		grid-row: 2 !important;
		height: var(--skin-basic-gallery-thumb-size) !important;
		min-height: var(--skin-basic-gallery-thumb-size) !important;
		max-height: var(--skin-basic-gallery-thumb-size) !important;
		padding-bottom: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__thumb {
		width: var(--skin-basic-gallery-thumb-size) !important;
		height: var(--skin-basic-gallery-thumb-size) !important;
		min-width: var(--skin-basic-gallery-thumb-size) !important;
		min-height: var(--skin-basic-gallery-thumb-size) !important;
		flex: 0 0 var(--skin-basic-gallery-thumb-size) !important;
	}
}

@media (max-width: 61.9375rem) {
	body.single-product .wapu-single--regular-product .wapu-single__gallery,
	body.single-product.skin-basic-variable-product .wapu-single--regular-product .wapu-single__gallery {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__main,
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__main {
		width: 100% !important;
		max-width: none !important;
		aspect-ratio: 1 / 1 !important;
		border-radius: var(--wtds-r-lg, 12px) !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img),
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img) {
		object-fit: contain !important;
		padding: 16px !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb,
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumb {
		width: 72px !important;
		height: 72px !important;
		min-width: 72px !important;
		min-height: 72px !important;
		flex-basis: 72px !important;
		border-radius: 16px !important;
	}

	.skin-basic-gallery-nav {
		width: 40px;
		height: 40px;
	}

	.skin-basic-gallery-nav--prev {
		left: 10px;
	}

	.skin-basic-gallery-nav--next {
		right: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skin-basic-gallery-nav {
		transition: none;
	}
}


/* ==========================================================================\n   1.5.5 · Stable top-aligned gallery block\n   --------------------------------------------------------------------------\n   Presentation only. The Wapuos gallery runtime remains the owner of\n   variation media, lightbox, thumb selection and synchronization.\n   ========================================================================== */
@media (min-width: 62rem) {
	body.single-product .wapu-single--regular-product .wapu-single__content {
		align-items: flex-start !important;
	}

	body.single-product .wapu-single--regular-product .wapu-single__gallery {
		position: sticky !important;
		top: calc(var(--wtds-header-full-h, 4.5rem) + var(--wp-admin--admin-bar--height, 0px) + 12px) !important;
		align-self: flex-start !important;
		justify-self: flex-start !important;
		margin-block: 0 !important;
		padding-block: 0 !important;
		transform: none !important;
	}

	body.single-product .wapu-single__gallery > .wapu-vg,
	body.single-product .wapu-single__gallery .wapu-vg--horizontal,
	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage {
		margin-block: 0 !important;
		align-self: flex-start !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: minmax(0, 1fr) var(--skin-basic-gallery-thumb-size) !important;
		block-size: clamp(540px, 68vh, 680px) !important;
		min-block-size: 540px !important;
		max-block-size: 680px !important;
		align-content: start !important;
		overflow: hidden !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage:has(.wapu-vg__thumbs[hidden]) {
		grid-template-rows: minmax(0, 1fr) !important;
	}
}

/* Main stage and the current media share the same 16px rounded frame. */
body.single-product .wapu-single__gallery .wapu-vg__main,
body.single-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img, .wapu-vg__video, .wapu-vg__embed) {
	border-radius: 16px !important;
}

/* ==========================================================================\n   1.5.6 · Square 1:1 gallery media fill\n   --------------------------------------------------------------------------\n   Composition only. Wapuos continues to own gallery state, variation media,\n   thumbnails and lightbox. The visible stage is square and the active media\n   fills it edge-to-edge.\n   ========================================================================== */
body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage {
	block-size: auto !important;
	min-block-size: 0 !important;
	max-block-size: none !important;
	overflow: visible !important;
}

body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__main,
body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__main {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 16px !important;
	overflow: hidden !important;
}

body.single-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img),
body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img) {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 16px !important;
}

@media (min-width: 62rem) {
	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage {
		grid-template-rows: auto var(--skin-basic-gallery-thumb-size) !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage:has(.wapu-vg__thumbs[hidden]) {
		grid-template-rows: auto !important;
	}
}


/* ==========================================================================\n   1.5.7 · Mobile edge-to-edge media + dot pagination\n   --------------------------------------------------------------------------\n   Presentation only. Wapuos still owns current media, thumb controls,\n   variation-specific galleries, swipe and lightbox. On phones, the canonical\n   thumbs remain the real controls but are presented as compact dots.\n   ========================================================================== */
@media (max-width: 47.9375rem) {
	body.single-product .wapu-single--regular-product .wapu-single__gallery,
	body.single-product.skin-basic-variable-product .wapu-single--regular-product .wapu-single__gallery {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage,
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage {
		width: 100% !important;
		max-width: none !important;
		gap: 12px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	/* Main mobile media is flush, square and borderless. */
	body.single-product .wapu-single__gallery .wapu-vg__main,
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__main {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img, .wapu-vg__video, .wapu-vg__embed),
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img, .wapu-vg__video, .wapu-vg__embed) {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	/* Canonical thumbnail controls become pagination dots on mobile. */
	body.single-product .wapu-single__gallery .wapu-vg__thumbs,
	body.single-product .wapu-single__gallery .wapu-vg__thumbs--horizontal,
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumbs:not([hidden]),
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumbs--horizontal:not([hidden]) {
		position: relative !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		width: max-content !important;
		max-width: 100% !important;
		height: 20px !important;
		min-height: 20px !important;
		max-height: 20px !important;
		margin: 0 auto !important;
		padding: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none !important;
		scroll-snap-type: none !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb,
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumb {
		position: relative !important;
		display: block !important;
		width: 8px !important;
		height: 8px !important;
		min-width: 8px !important;
		min-height: 8px !important;
		max-width: 8px !important;
		max-height: 8px !important;
		flex: 0 0 8px !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: color-mix(in srgb, var(--wtds-ink) 24%, transparent) !important;
		box-shadow: none !important;
		overflow: hidden !important;
		opacity: 1 !important;
		transform: none !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb.is-active,
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumb.is-active {
		border: 0 !important;
		background: var(--wtds-ink) !important;
		box-shadow: none !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb:not(.is-active):hover,
	body.single-product .wapu-single__gallery .wapu-vg__thumb:not(.is-active):focus-visible {
		border: 0 !important;
		background: color-mix(in srgb, var(--wtds-ink) 52%, transparent) !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb:focus-visible {
		outline: 2px solid var(--wtds-ink) !important;
		outline-offset: 3px !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb :is(img, video),
	body.single-product.skin-basic-variable-product .wapu-single__gallery .wapu-vg__thumb :is(img, video) {
		display: none !important;
	}
}