/**
 * JN Product Gallery Thumbnails — base defaults. Colors/sizes come from
 * Elementor Style tab controls (see the widget class) — this file only
 * handles layout/structure/animation.
 *
 * Window-shifting is pure CSS: each thumbnail's own width is an even
 * fraction of the viewport (100% / --jnw-pgallery-visible), and the
 * track's transform shifts by exactly that same fraction per step — so
 * the shift amount is always mathematically correct regardless of the
 * widget's actual rendered pixel width, no JS measurement needed.
 */

.jnw-pgallery-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.jnw-pgallery-vertical {
	flex-direction: column;
	width: fit-content;
}

.jnw-pgallery-viewport {
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

.jnw-pgallery-vertical .jnw-pgallery-viewport {
	flex: none;
}

.jnw-pgallery-track {
	display: flex;
	gap: 10px;
	transition: transform .3s ease;
	/* FIX (circular sizing dependency, caught before shipping): each
	   thumbnail's own width is a PERCENTAGE, which CSS computes relative
	   to ITS PARENT (this track) — but this track's own width, in turn,
	   can't be based on those same children's percentage widths without
	   creating a circular reference the browser can't reliably resolve.
	   Breaking the cycle: this track's width is defined directly against
	   the STABLE, already-known viewport width (total thumbnails ÷
	   visible count, as a multiple of 100%) — then each thumbnail's
	   percentage width, computed against THIS now-well-defined width,
	   correctly works out to exactly (viewport width ÷ visible count)
	   each, with no ambiguity left for the browser to resolve either
	   way. */
	width: calc(var(--jnw-pgallery-total, 1) / var(--jnw-pgallery-visible, 5) * 100%);
}

.jnw-pgallery-vertical .jnw-pgallery-track {
	flex-direction: column;
}

.jnw-pgallery-thumb {
	/* Relative to the track above, whose own width is now well-defined
	   (not circular) — this correctly works out to (viewport width ÷
	   visible count) each. Gap spacing is deliberately not subtracted
	   from this formula (flexbox gap + percentage-basis interactions
	   get needlessly complex for a marginal visual difference) — with
	   a modest gap value, the window shows very close to, if not
	   exactly, the configured visible count. */
	flex: 0 0 calc(100% / var(--jnw-pgallery-total, 1));
	aspect-ratio: 1 / 1;
	border: 2px solid #E5D9CC;
	border-radius: 6px;
	overflow: hidden;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: border-color .2s ease, opacity .2s ease;
	display: block;
}

.jnw-pgallery-vertical .jnw-pgallery-thumb {
	flex-basis: calc(100% / var(--jnw-pgallery-total, 1));
}

.jnw-pgallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.jnw-pgallery-dim-inactive .jnw-pgallery-thumb:not(.jnw-pgallery-thumb-active) {
	opacity: .55;
}

.jnw-pgallery-arrow {
	flex-shrink: 0;
	border: 0;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
	transition: color .2s ease, background-color .2s ease;
}

.jnw-pgallery-vertical .jnw-pgallery-arrow {
	transform: rotate(90deg);
}