/* Custom photo viewer, loaded on every device (desktop, tablet, mobile). */

/* WooCommerce's own built-in fullscreen-gallery trigger is a second
   magnifying-glass icon (rendered as an emoji), normally tucked in a
   corner of the gallery just like this plugin's own trigger — the two
   would otherwise show up stacked on top of each other. It opens
   WooCommerce's native PhotoSwipe dialog, which this plugin's custom
   viewer replaces, so it's hidden here (the custom viewer is offered on
   every device). */
.woocommerce-product-gallery__trigger {
	display: none !important;
}

/* WooCommerce's native hover-zoom lays a magnified copy of the photo
   (".zoomImg") on top of the real photo. Left clickable, the pointer
   alternates between that copy (arrow cursor) and the real photo's link
   (hand cursor) whenever the copy moves or fades under it — on some
   browser/screen combinations (reported on an ASUS Vivobook with Opera)
   this turns into a rapid zoom/un-zoom flicker. Making the copy ignore
   the pointer keeps the real photo as the one and only thing under the
   cursor: hover-zoom still works (WooCommerce listens on the photo's
   container, not on the copy) and clicks still reach the real photo,
   which this plugin's viewer already handles. */
.woocommerce-product-gallery__image .zoomImg {
	pointer-events: none !important;
}

/* Small magnifying-glass button overlaid in a corner of the gallery. It is
   the only way to open the custom viewer — clicking the photo itself does
   nothing. Hidden automatically while a video slide is the one showing. */
.woocommerce-product-gallery {
	position: relative;
}
.wpl-gallery-zoom-trigger {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 10;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #d7d7d0;
	background: rgba( 255, 255, 255, 0.9 );
	color: #1a2b4c;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
	transition: background 0.15s ease, transform 0.15s ease;
}
.wpl-gallery-zoom-trigger:hover {
	background: #fff;
	transform: scale( 1.06 );
}
.wpl-gallery-zoom-trigger svg {
	width: 20px;
	height: 20px;
}

/* Previous/next arrows on the sides of the small (unzoomed) gallery photo. */
.wpl-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #d7d7d0;
	background: rgba( 255, 255, 255, 0.9 );
	color: #1a2b4c;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
	transition: background 0.15s ease, transform 0.15s ease;
}
.wpl-gallery-nav:hover {
	background: #fff;
}
.wpl-gallery-nav--prev {
	left: 10px;
	transform: translateY( -50% );
}
.wpl-gallery-nav--prev:hover {
	transform: translateY( -50% ) scale( 1.08 );
}
.wpl-gallery-nav--next {
	right: 10px;
}
.wpl-gallery-nav--next:hover {
	transform: translateY( -50% ) scale( 1.08 );
}

/* Full-screen viewer: white header bar, big centered photo, thumbnail
   strip at the bottom. */
.wpl-viewer-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #fff;
	display: none;
	flex-direction: column;
}
.wpl-viewer-overlay.is-open {
	display: flex;
}
.wpl-viewer-overlay {
	overscroll-behavior: contain;
}
body.wpl-viewer-open {
	overflow: hidden;
}

.wpl-viewer-topbar {
	/* 10% of the screen height, so the photo below gets the full 80% — the
	   thumbnail strip at the bottom takes the other 10% (see
	   .wpl-viewer-thumbs). Fixed height (not just padding) so the split is
	   exact regardless of title length. */
	flex: 0 0 10vh;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid #e4e4e0;
	padding: 0 20px;
}
.wpl-viewer-topbar__title {
	grid-column: 2;
	margin: 0;
	max-width: 70vw;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	color: #1a2b4c;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wpl-viewer-close {
	grid-column: 3;
	justify-self: end;
	background: none;
	border: none;
	font-size: 1.8rem;
	line-height: 1;
	color: #444;
	cursor: pointer;
	padding: 4px 8px;
}
.wpl-viewer-close:hover {
	color: #000;
}

.wpl-viewer-stage {
	/* Takes whatever is left once the header and thumbnail strip have each
	   taken their fixed 10vh — 80vh in practice, for the photo to be shown
	   as large as possible. */
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f4f0;
	overflow: hidden;
	padding: 24px;
}

/* The photo is shown at the largest size that fits, never cropped and
   never stretched out of its own proportions. */
.wpl-viewer-image-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wpl-viewer-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.wpl-viewer-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 8px;
	border: 1px solid #d7d7d0;
	background: #fff;
	color: #1a2b4c;
	font-size: 1.1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
	transition: background 0.15s ease;
}
.wpl-viewer-nav:hover {
	background: #f2f2ef;
}
.wpl-viewer-prev {
	left: 24px;
}
.wpl-viewer-next {
	right: 24px;
}

.wpl-viewer-counter {
	position: absolute;
	left: 24px;
	bottom: 24px;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	font-size: 0.85rem;
	padding: 4px 10px;
	border-radius: 6px;
}

.wpl-viewer-thumbs {
	/* Fixed 10% of the screen height, matching the header (see
	   .wpl-viewer-topbar) so the photo above gets the full 80%. Thumbnails
	   are sized in JS/CSS below to fit exactly within this height. */
	flex: 0 0 10vh;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	overflow-x: auto;
	overflow-y: hidden;
	background: #fafaf8;
	border-top: 1px solid #e4e4e0;
}
.wpl-viewer-thumb {
	/* Height fills the strip (align-items: stretch would also do it, but
	   "stretch" plus overflow-x can clip in some browsers) — width follows
	   from a fixed aspect ratio rather than a hardcoded pixel value, so the
	   thumbnail keeps a sensible shape at any strip height. */
	flex: 0 0 auto;
	height: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border-radius: 6px;
	border: 2px solid transparent;
	overflow: hidden;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease;
}
.wpl-viewer-thumb:hover {
	border-color: #b9c2d0;
}
.wpl-viewer-thumb.is-active {
	border-color: #2271b1;
}
.wpl-viewer-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Small screens (phones, and phones held sideways): same viewer, with the
   header/thumbnail strips kept to a usable minimum height and tighter
   spacing. Does not apply to larger screens, which are left as they were. */
@media ( max-width: 767px ), ( max-height: 520px ) {
	.wpl-viewer-topbar,
	.wpl-viewer-thumbs {
		flex-basis: max( 10vh, 52px );
	}
	.wpl-viewer-topbar {
		padding: 0 12px;
	}
	.wpl-viewer-topbar__title {
		font-size: 0.95rem;
		max-width: 75vw;
	}
	.wpl-viewer-stage {
		padding: 8px;
	}
	.wpl-viewer-nav {
		width: 38px;
		height: 38px;
	}
	.wpl-viewer-prev {
		left: 10px;
	}
	.wpl-viewer-next {
		right: 10px;
	}
	.wpl-viewer-counter {
		left: 12px;
		bottom: 12px;
	}
	.wpl-viewer-thumbs {
		padding: 6px 12px;
	}
}