/**
 * Single-product gallery redesign (2026-08-14): vertical thumbnail rail +
 * hover-zoom, matching the design-direction mockup. is_product()-scoped.
 *
 * Deliberately CSS-only repositioning of FlexSlider's own generated
 * markup, no JS/DOM changes -- confirmed from WooCommerce's own
 * single-product.js (initFlexslider: $target = .woocommerce-product-gallery,
 * no controlsContainer option set) and jquery.flexslider.js
 * (controlNav.setup appends the generated <ol class="flex-control-thumbs">
 * as the last direct child of $target when no controlsContainer is given)
 * that once FlexSlider finishes initializing, .woocommerce-product-gallery
 * has exactly two real direct children: .flex-viewport (wraps the original
 * .woocommerce-product-gallery__wrapper slide track in place) and
 * .flex-control-thumbs. Neither element's own measured width is touched
 * here -- each still fills 100% of whatever grid column it lands in,
 * which is what actually matters to FlexSlider's internal math (the CLS
 * bug earlier this session was from capping .flex-viewport's own width,
 * not from repositioning its parent's layout).
 */
@media (min-width: 981px) {
	.danuko-product-gallery .woocommerce-product-gallery {
		display: grid;
		grid-template-columns: 76px 1fr;
		gap: 16px;
		align-items: start;
	}

	/* Fallback for the brief pre-FlexSlider-init window, when
	   .woocommerce-product-gallery__wrapper is still a direct child (not
	   yet wrapped in .flex-viewport) -- span both columns so it isn't
	   squeezed into the 76px rail track before JS finishes. Once
	   .flex-viewport takes over the wrapper's old DOM slot, the wrapper
	   becomes a grandchild and this rule simply stops applying (grid-column
	   is a no-op on a non-grid-item) -- nothing to clean up either way. */
	.danuko-product-gallery .woocommerce-product-gallery__wrapper {
		grid-column: 1 / -1;
	}

	.danuko-product-gallery .flex-viewport {
		grid-column: 2;
		grid-row: 1;
	}

	.danuko-product-gallery .flex-control-thumbs {
		grid-column: 1 !important;
		grid-row: 1;
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 10px !important;
		margin: 0 !important;
		max-height: 540px;
		overflow-y: auto;
		overflow-x: hidden;
	}

	/* Badge fix (2026-08-14): .danuko-gallery-badge is positioned absolute
	   relative to .danuko-product-gallery (its nearest positioned ancestor),
	   which at this breakpoint spans the FULL grid -- thumbnail column
	   included. left:20px from style.css landed inside the 76px thumbnail
	   rail instead of the main image, overlapping the active thumbnail.
	   Offsetting by the rail width + gap here puts it back on the actual
	   photo. The "1/3" counter is unaffected since its right:16px is
	   measured from the shared right edge, which both grid columns share. */
	.danuko-gallery-badge {
		left: calc(76px + 16px + 20px);
	}
}

/* Hover zoom on the active slide image -- a transform on the <img> itself,
   independent of FlexSlider's own translate3d() on .woocommerce-product-
   gallery__wrapper for sliding (different element, composable, no
   conflict). .woocommerce-product-gallery__image already gets
   overflow:hidden !important from style.css, so the scaled image is
   naturally clipped to the frame instead of spilling out. hover:hover
   keeps this off touch-only devices even inside the desktop breakpoint. */
@media (min-width: 981px) and (hover: hover) {
	.danuko-product-gallery .woocommerce-product-gallery__image img {
		transition: transform .35s cubic-bezier(.2, .7, .2, 1);
		transform-origin: var(--danuko-zoom-x, 50%) var(--danuko-zoom-y, 50%);
		cursor: zoom-in;
	}

	.danuko-product-gallery .woocommerce-product-gallery__image:hover img {
		transform: scale(1.5);
	}

	/* Cooldown right after the PhotoSwipe lightbox closes (2026-08-15) --
	   see the matching JS in single-product-gallery.js for why: without
	   this, closing the lightbox with the cursor left resting over the
	   image made it snap straight to 1.5x zoom, since :hover has no way
	   to distinguish that from a genuine new hover. */
	.danuko-product-gallery.danuko-gallery-hover-cooldown .woocommerce-product-gallery__image:hover img {
		transform: none;
		cursor: default;
	}
}

/* Safety net for a leftover-lightbox-image bug (2026-08-15): closing the
   WooCommerce/PhotoSwipe lightbox (bundled WC core, assets/js/photoswipe --
   not modified here) is supposed to hide .pswp again via its own
   destroy() resetting its class list back to the default
   display:none rule. In practice a stray .pswp__img can be left
   rendering after close (confirmed live: visible, position:absolute,
   sized to the last-viewed image, findable via the browser inspector on
   what looks like empty page space). destroy() does reliably set
   aria-hidden="true" back on .pswp even when this happens (confirmed via
   two separate live tests), so forcing display:none off that same
   attribute, regardless of what class-related cleanup did or didn't
   also happen, is a solid backstop against whatever is keeping it
   visible. */
.pswp[aria-hidden="true"] {
	display: none !important;
}