/* ===== Moho: vertical stacked product gallery + sticky summary ===== */

/* Always show the gallery (JS normally fades it in) */
.woocommerce div.product div.images.woocommerce-product-gallery {
	opacity: 1 !important;
}

/* Stack every image full width, one below another */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	display: block;
	margin: 0;
	transform: none !important;
	width: 100% !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	width: 100% !important;
	float: none !important;
	display: block !important;
	margin: 0 0 14px !important;
	opacity: 1 !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:last-child {
	margin-bottom: 0;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image a,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* No slider controls / thumbnails */
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce div.product div.images .flex-control-nav,
.woocommerce div.product div.images .flex-direction-nav {
	display: none !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: none !important; /* remove magnifying-glass / zoom trigger */
}

/* Hide Storefront's edge prev/next product thumbnails */
.woocommerce div.product .storefront-product-pagination {
	display: none !important;
}

/* ===== Desktop: gallery + summary as a 2-col grid; summary sticky ===== */
@media (min-width: 768px) {
	/* position:sticky needs no scroll-context ancestor; body/#page use overflow:hidden auto */
	body.single-product,
	body.single-product #page {
		overflow-x: clip !important;
		overflow-y: visible !important;
	}
	.woocommerce div.product {
		overflow: visible !important;
	}

	.woocommerce div.product .moho-product-top {
		display: grid;
		grid-template-columns: 48% 48%;
		column-gap: 4%;
		align-items: start;
	}
	.woocommerce div.product .moho-product-top > .images.woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
		width: auto !important;
		float: none !important;
		margin: 0 !important;
	}
	.woocommerce div.product .moho-product-top > .summary.entry-summary {
		grid-column: 2;
		grid-row: 1;
		width: auto !important;
		float: none !important;
		margin: 0 !important;
		position: -webkit-sticky;
		position: sticky;
		top: 24px;
	}

	/* Tabs / related sit below the wrapper, full width */
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .upsells.products,
	.woocommerce div.product .related.products {
		clear: both;
		width: 100%;
	}
}