/*
 * LGNTT Greeting Card product page - mobile gallery refinement.
 *
 * Purpose:
 * - Override the older site-wide mobile sticky-gallery rule only for
 *   Greeting Card products.
 * - Keep the full gallery on first view.
 * - Collapse the sticky stage to roughly one-third of the viewport once
 *   the shopper begins scrolling through the product details.
 * - Keep thumbnails out of the compact sticky state and remove the legacy
 *   Previous / Next direction links on mobile.
 */

@media (max-width: 768px) {
	/* Keep the existing mobile product flow, but make the gallery itself intentional. */
	body.single-product.lgntt-greeting-card-product div.product {
		display: flex !important;
		flex-direction: column !important;
	}

	body.single-product.lgntt-greeting-card-product div.product .woocommerce-product-gallery {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 90 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 0 12px !important;
		padding: 0 !important;
		background: #fff !important;
		box-shadow: none !important;
		overflow: visible;
		transition: height .24s ease, max-height .24s ease, box-shadow .2s ease;
	}

	/* Logged-in WordPress mobile admin bar clearance. */
	body.admin-bar.single-product.lgntt-greeting-card-product div.product .woocommerce-product-gallery {
		top: 46px !important;
	}

	/* The old FlexSlider direction links are redundant on touch screens. */
	body.single-product.lgntt-greeting-card-product .woocommerce-product-gallery .flex-direction-nav,
	body.single-product.lgntt-greeting-card-product .woocommerce-product-gallery .flex-direction-nav li,
	body.single-product.lgntt-greeting-card-product .woocommerce-product-gallery .flex-prev,
	body.single-product.lgntt-greeting-card-product .woocommerce-product-gallery .flex-next {
		display: none !important;
	}

	/* Thumbnails remain available while the shopper is at the top of the page. */
	body.single-product.lgntt-greeting-card-product .woocommerce-product-gallery .flex-control-thumbs {
		margin-bottom: 0 !important;
	}

	/* Compact sticky state: about one-third of a typical phone viewport. */
	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact div.product .woocommerce-product-gallery {
		height: clamp(230px, 30vh, 285px) !important;
		max-height: clamp(230px, 30vh, 285px) !important;
		margin-bottom: 10px !important;
		padding: 0 !important;
		box-shadow: 0 5px 16px rgba(16, 32, 23, .10) !important;
		overflow: hidden !important;
	}

	/* Thumbnails should never consume sticky-screen height. */
	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact .woocommerce-product-gallery .flex-control-thumbs {
		display: none !important;
	}

	/* Force the active image stage to use the compact gallery height. */
	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact .woocommerce-product-gallery .flex-viewport,
	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
		height: 100% !important;
		max-height: 100% !important;
		margin: 0 !important;
	}

	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact .woocommerce-product-gallery .woocommerce-product-gallery__image {
		height: 100% !important;
		max-height: 100% !important;
	}

	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 100% !important;
		min-height: 0 !important;
		background: #fff !important;
	}

	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact .woocommerce-product-gallery .woocommerce-product-gallery__image img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		margin: 0 auto !important;
		object-fit: contain !important;
		object-position: center center !important;
	}

	/* Keep WooCommerce's zoom control useful without dominating the compact stage. */
	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact .woocommerce-product-gallery__trigger {
		top: 10px !important;
		right: 10px !important;
		transform: scale(.88);
		transform-origin: top right;
	}

	/* Small gallery position indicator, shown only after the image collapses. */
	body.single-product.lgntt-greeting-card-product .lgntt-gallery-counter {
		display: none;
	}

	body.single-product.lgntt-greeting-card-product.lgntt-gallery-compact .lgntt-gallery-counter {
		position: absolute;
		right: 12px;
		bottom: 10px;
		z-index: 6;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 42px;
		height: 24px;
		padding: 0 8px;
		border-radius: 999px;
		background: rgba(255, 255, 255, .92);
		box-shadow: 0 1px 5px rgba(0, 0, 0, .10);
		color: #26332b;
		font: 600 11px/1 "Open Sans", "Segoe UI", Arial, sans-serif;
		letter-spacing: .02em;
		pointer-events: none;
	}

	/* The product information should resume immediately below the compact image. */
	body.single-product.lgntt-greeting-card-product div.product .summary {
		padding-top: 10px !important;
		position: relative !important;
		z-index: 1 !important;
	}
}

@media (max-width: 782px) and (prefers-reduced-motion: reduce) {
	body.single-product.lgntt-greeting-card-product div.product .woocommerce-product-gallery {
		transition: none !important;
	}
}