/* WC Enhanced - Product Gallery widget styles */
.wcpgg .wcpgg__thumbs button {
	background-color: transparent;
}

wc-product-gallery.wcpgg {
	display: block;
	width: 100%;
	--wcpgg-thumb-width: 110px;
	--wcpgg-thumb-gap: 10px;
	--wcpgg-aspect: 1/1;
	--wcpgg-fit: cover;
}

.wcpgg__grid {
	display: grid;
	grid-template-columns: var(--wcpgg-thumb-width) minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.wcpgg.is-thumbs-hidden .wcpgg__grid {
	grid-template-columns: minmax(0, 1fr);
}

.wcpgg__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--wcpgg-thumb-gap);
	max-height: 100%;
	overflow-y: auto;

	/* IMPORTANT: give room so active ring is never clipped by the scroll container */
	padding: 2px;
	padding-right: 2px;
}

/* Hide scrollbars but keep swipe/scroll functional (thumbs + main scroller) */
.wcpgg__scroller,
.wcpgg__thumbs {
	-ms-overflow-style: none; /* IE/Edge legacy */
	scrollbar-width: none;    /* Firefox */
}

.wcpgg__scroller::-webkit-scrollbar,
.wcpgg__thumbs::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.wcpgg.is-thumbs-hidden .wcpgg__thumbs {
	display: none;
}

/* NOTE: fixed typo (.wcpgg__tumb -> .wcpgg__thumb) */
.wcpgg__thumbs .wcpgg__thumb button {
	background-color: transparent;
}

.wcpgg__thumb {
	border: 1px solid transparent;
	padding: 0;
	background-color: transparent;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	position: relative; /* allow z-index for active state */
}

.wcpgg__thumb img {
	display: block;
	padding: 0;
	border: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 2/3;
	object-fit: cover;
}

/* Active thumb highlight (more reliable than outline+offset inside scroll containers) */
.wcpgg__thumb.is-active {
	outline: none;
	border-color: #c0c0c0;
	box-shadow: 0 0 0 .5px #c0c0c0; /* ring */
	z-index: 0;
}

.wcpgg__viewer {
	position: relative;
	width: 100%;
	aspect-ratio: var(--wcpgg-aspect);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.03);
}

.wcpgg__scroller {
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/* Allow horizontal swipe; vertical scroll still works */
	touch-action: pan-y;
}

.wcpgg__slides {
	display: flex;
	height: 100%;
}

.wcpgg__slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.wcpgg__slide img {
	width: 100%;
	height: 100%;
	object-fit: var(--wcpgg-fit);
	display: block;

	/* Improve swipe/drag feel on touch devices */
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

.wcpgg__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.45);
}

.wcpgg__nav[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.wcpgg__nav--prev { left: 12px; }
.wcpgg__nav--next { right: 12px; }

.wcpgg__nav--prev::before,
.wcpgg__nav--next::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 auto;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

.wcpgg__nav--prev::before {
	transform: rotate(-135deg);
}

.wcpgg__live {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Tablet behavior (optional) */
@media (max-width: 1024px) {

	/* Thumbs bottom on tablet */
	wc-product-gallery.wcpgg[data-behavior-tablet="thumbs_bottom"] .wcpgg__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
	}

	wc-product-gallery.wcpgg[data-behavior-tablet="thumbs_bottom"] .wcpgg__thumbs {
		order: 2;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		max-width: 100%;
		padding: 8px 2px 0;
	}

	wc-product-gallery.wcpgg[data-behavior-tablet="thumbs_bottom"] .wcpgg__thumb {
		min-width: 84px;
	}

	/* Hide thumbs on tablet when requested */
	wc-product-gallery.wcpgg[data-behavior-tablet="thumbs_hidden"] .wcpgg__thumbs {
		display: none;
	}

	wc-product-gallery.wcpgg[data-behavior-tablet="thumbs_hidden"] .wcpgg__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mobile: thumbs bottom or hidden */
@media (max-width: 767px) {

	/* Bottom layout (thumb_position OR behavior) */
	wc-product-gallery.wcpgg[data-thumb-position="bottom"] .wcpgg__grid,
	wc-product-gallery.wcpgg[data-behavior-mobile="thumbs_bottom"] .wcpgg__grid,
	wc-product-gallery.wcpgg[data-mobile-behavior="thumbs_bottom"] .wcpgg__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
	}

	wc-product-gallery.wcpgg[data-thumb-position="bottom"] .wcpgg__thumbs,
	wc-product-gallery.wcpgg[data-behavior-mobile="thumbs_bottom"] .wcpgg__thumbs,
	wc-product-gallery.wcpgg[data-mobile-behavior="thumbs_bottom"] .wcpgg__thumbs {
		order: 2;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		max-width: 100%;
		padding: 8px 2px 0;
	}

	wc-product-gallery.wcpgg[data-thumb-position="bottom"] .wcpgg__thumb,
	wc-product-gallery.wcpgg[data-behavior-mobile="thumbs_bottom"] .wcpgg__thumb,
	wc-product-gallery.wcpgg[data-mobile-behavior="thumbs_bottom"] .wcpgg__thumb {
		min-width: 84px;
	}

	/* Hide thumbs on mobile when requested */
	wc-product-gallery.wcpgg[data-thumb-position="hidden"] .wcpgg__thumbs,
	wc-product-gallery.wcpgg[data-behavior-mobile="thumbs_hidden"] .wcpgg__thumbs,
	wc-product-gallery.wcpgg[data-mobile-behavior="thumbs_hidden"] .wcpgg__thumbs {
		display: none;
	}

	/* CRITICAL: when thumbs are hidden on mobile, collapse the grid to 1 column */
	wc-product-gallery.wcpgg[data-thumb-position="hidden"] .wcpgg__grid,
	wc-product-gallery.wcpgg[data-behavior-mobile="thumbs_hidden"] .wcpgg__grid,
	wc-product-gallery.wcpgg[data-mobile-behavior="thumbs_hidden"] .wcpgg__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}