.woocommerce-product-gallery .vcl-pgux-counter,
.vcl-pgux-thumbnails { display: none; }
.woocommerce-product-gallery.vcl-pgux-gallery { position: relative; }
.vcl-pgux-nav {
	position: absolute; top: 50%; z-index: 13; display: flex; width: 44px; height: 44px;
	align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .38); color: #fff; cursor: pointer; transform: translateY(-50%);
	font: 400 34px/1 Arial, sans-serif; opacity: .78; transition: opacity .15s ease, background-color .15s ease;
}
.vcl-pgux-nav:hover { background: rgba(0, 0, 0, .58); opacity: 1; }
.vcl-pgux-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vcl-pgux-nav:disabled { cursor: default; opacity: .25; pointer-events: none; }
.vcl-pgux-nav-prev { left: 10px; }
.vcl-pgux-nav-next { right: 10px; }
.woocommerce-product-gallery.vcl-pgux-gallery.vcl-pgux-mobile .vcl-pgux-counter {
	display: block; position: absolute; z-index: 12; right: 12px; bottom: 12px;
	padding: 5px 9px; border-radius: 999px; color: #fff;
	background: rgba(0, 0, 0, .74); font: 600 13px/1.2 sans-serif; pointer-events: none;
}
.vcl-pgux-thumbnails {
	display: none; gap: 8px; width: 100%; max-width: 100%; margin: 9px 0 0;
	padding: 2px 1px 7px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch; box-sizing: border-box; scrollbar-width: none;
	scroll-snap-type: x proximity; scroll-padding-inline: 4px;
}
.woocommerce-product-gallery.vcl-pgux-gallery.vcl-pgux-mobile + .vcl-pgux-thumbnails { display: flex; }
.vcl-pgux-thumbnails::-webkit-scrollbar { display: none; }
.vcl-pgux-thumbnail {
	display: block; flex: 0 0 calc((100% - 24px) / 4); max-width: 78px; min-width: 0;
	aspect-ratio: 1 / 1; padding: 2px; border: 2px solid #b9b9b9; border-radius: 3px;
	background: #fff; box-sizing: border-box; cursor: pointer; scroll-snap-align: start;
}
.vcl-pgux-thumbnail.is-active { border-color: #111; box-shadow: 0 0 0 1px #111; }
.vcl-pgux-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vcl-pgux-color-source {
	position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
	padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
	border: 0 !important;
}
.vcl-pgux-color-proxy { margin: 0 0 16px; width: 100%; box-sizing: border-box; }
.vcl-pgux-color-proxy-label { display: block; margin: 0 0 8px; font-weight: 600; }
.vcl-pgux-color-proxy-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vcl-pgux-color-proxy-button {
	min-height: 40px; padding: 8px 16px; border: 1px solid currentColor; border-radius: 0;
	background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: 1.2;
}
.vcl-pgux-color-proxy-button.is-active { background: #000; color: #fff; }
.vcl-pgux-color-proxy-button:disabled { cursor: default; opacity: .45; }
.vcl-pgux-color-proxy-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 768px) {
	/* Astra keeps the gallery and summary in a wrapping flex row. Put the
	 * plugin rail on the next line while retaining the gallery column width. */
	.woocommerce-product-gallery.vcl-pgux-gallery + .vcl-pgux-thumbnails {
		display: flex;
		flex: 0 0 50%;
		order: 3;
		width: 50%;
		max-width: 50%;
		align-self: flex-start;
	}
	.woocommerce-product-gallery.vcl-pgux-gallery + .vcl-pgux-thumbnails .vcl-pgux-thumbnail {
		flex: 0 0 calc((100% - 32px) / 5);
		min-width: 90px;
		max-width: 115px;
	}
}