/* Jodee Product Gallery — gallery.css */

/* ------------------------------------------------------------------ *
 *  Gallery wrapper
 * ------------------------------------------------------------------ */

.jpg-gallery {
	position: relative;
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
}

/* ------------------------------------------------------------------ *
 *  Stage — clips the hover-zoom scale overflow
 * ------------------------------------------------------------------ */

.jpg-stage {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	touch-action: pan-y;
	/* No background: each slide shows at its own natural height. */
}

/* .jpg-track is just a stacking wrapper — no flex, no transform. */
.jpg-track {
	position: relative;
}

/*
 * All slides are stacked absolutely by default (invisible, no height).
 * The ACTIVE slide becomes position:relative so its natural image
 * height drives the stage height — no black bars, no fixed aspect ratio.
 */
.jpg-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.38s ease;
	z-index: 0;
}

.jpg-slide.jpg-active {
	position: relative;   /* Takes up space — stage height = image height. */
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

/* ------------------------------------------------------------------ *
 *  Image slides — WooCommerce-style hover zoom
 * ------------------------------------------------------------------ */

.jpg-image-slide {
	background: transparent;
}

.jpg-zoom-link {
	display: block;
	width: 100%;
	position: relative;
	text-decoration: none;
	overflow: hidden;  /* Clips the scale so it doesn't leak outside the slide. */
}

.jpg-zoom-link img {
	display: block;
	width: 100%;
	height: auto;                          /* Natural image height — no cropping. */
	transition: transform 0.45s ease;
}

/* Hover zoom — scale image in place, container clips the overflow. */
.jpg-zoom-link:hover img,
.jpg-zoom-link:focus img {
	transform: scale( 1.08 );
}

/* Zoom icon badge — appears on hover */
.jpg-zoom-icon {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	color: #222;
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.2 );
	z-index: 2;
}

.jpg-zoom-icon svg {
	width: 17px;
	height: 17px;
}

.jpg-image-slide:hover .jpg-zoom-icon,
.jpg-zoom-link:focus   .jpg-zoom-icon {
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 *  Video slides
 * ------------------------------------------------------------------ */

.jpg-video-slide {
	background: #000;
}

.jpg-video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: #000;
}

/* Optional caption */
.jpg-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 14px;
	font-size: 13px;
	line-height: 1.4;
	color: #fff;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.65 ), transparent );
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 *  Prev / Next arrows
 * ------------------------------------------------------------------ */

.jpg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
	background: rgba( 255, 255, 255, 0.88 );
	border: none;
	border-radius: 50%;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	line-height: 1;
	color: #222;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
	transition: background 0.15s ease, opacity 0.15s ease;
	padding: 0;
	-webkit-user-select: none;
	user-select: none;
}

.jpg-arrow:hover   { background: #fff; }
.jpg-arrow:disabled {
	opacity: 0.22;
	cursor: default;
	pointer-events: none;
}

.jpg-prev { left:  10px; }
.jpg-next { right: 10px; }

/* ------------------------------------------------------------------ *
 *  Thumbnail strip — always 4 columns
 * ------------------------------------------------------------------ */

.jpg-thumbs {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #bbb transparent;
}

.jpg-thumbs::-webkit-scrollbar        { height: 4px; }
.jpg-thumbs::-webkit-scrollbar-track  { background: transparent; }
.jpg-thumbs::-webkit-scrollbar-thumb  { background: #bbb; border-radius: 2px; }

.jpg-thumb {
	/* 4 columns: 100% minus 3 gaps (3 × 6px = 18px) divided by 4 */
	flex: 0 0 calc( 25% - 4.5px );
	aspect-ratio: 4 / 3;
	border: 2px solid transparent;
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	background: #eee;
	transition: border-color 0.15s ease, opacity 0.15s ease;
	opacity: 0.55;
	outline: none;
}

.jpg-thumb:hover          { opacity: 0.85; }
.jpg-thumb.jpg-active     { border-color: #333; opacity: 1; }
.jpg-thumb:focus-visible  { outline: 2px solid #555; outline-offset: 2px; }

.jpg-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Play triangle on video thumbnails */
.jpg-play-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -35%, -50% );
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow( 0 0 3px rgba( 0, 0, 0, 0.55 ) );
	pointer-events: none;
	z-index: 2;
}

/* ------------------------------------------------------------------ *
 *  Lightbox
 * ------------------------------------------------------------------ */

.jpg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jpg-lightbox[hidden] { display: none !important; }

.jpg-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.92 );
}

.jpg-lb-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 92vw;
	max-height: 92vh;
}

.jpg-lb-img {
	display: block;
	max-width: 92vw;
	max-height: 92vh;
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 8px 50px rgba( 0, 0, 0, 0.55 );
}

.jpg-lb-close {
	position: fixed;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
	z-index: 2;
}

.jpg-lb-close:hover        { background: rgba( 255, 255, 255, 0.28 ); }
.jpg-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------------ *
 *  Responsive
 * ------------------------------------------------------------------ */

@media ( max-width: 480px ) {
	.jpg-arrow {
		width: 36px;
		height: 36px;
		font-size: 24px;
	}

	.jpg-prev { left:  6px; }
	.jpg-next { right: 6px; }

	.jpg-zoom-icon {
		opacity: 1; /* Always show on touch — no hover state */
		width: 30px;
		height: 30px;
	}

	.jpg-zoom-icon svg { width: 14px; height: 14px; }
}