/**
 * Captivation Product Gallery, frontend styles.
 * BEM under .ca-pg-gallery, themeable via --ca-pg-* custom properties.
 */

.ca-pg-gallery {
	--ca-pg-line: #e6ebf0;
	--ca-pg-soft: #f5f8fb;
	--ca-pg-accent: #1a6db0;
	--ca-pg-radius: 10px;
}

/* Main stage */
.ca-pg-gallery__main {
	border: 1px solid var(--ca-pg-line, #e6ebf0);
	border-radius: var(--ca-pg-radius, 10px);
	overflow: hidden;
	background: var(--ca-pg-soft, #f5f8fb);
}

.ca-pg-gallery__main-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity .2s ease;
}

.ca-pg-gallery__main-img.is-swapping {
	opacity: 0;
}

/* Horizontal thumbnail rail */
.ca-pg-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin-top: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.ca-pg-gallery__thumbs::-webkit-scrollbar {
	height: 6px;
}

.ca-pg-gallery__thumbs::-webkit-scrollbar-thumb {
	background: var(--ca-pg-line, #e6ebf0);
	border-radius: 6px;
}

/* Thumbnails: show 4 filling the rail (like the mockup grid); extras scroll. */
.ca-pg-gallery__thumb {
	flex: 0 0 calc((100% - 30px) / 4);
	aspect-ratio: 1;
	padding: 0;
	margin: 0;
	border: 1px solid var(--ca-pg-line, #e6ebf0);
	border-radius: 8px;
	overflow: hidden;
	background: var(--ca-pg-soft, #f5f8fb);
	cursor: pointer;
	scroll-snap-align: start;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ca-pg-gallery__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ca-pg-gallery__thumb:hover {
	border-color: var(--ca-pg-accent, #1a6db0);
}

.ca-pg-gallery__thumb:focus-visible {
	outline: 2px solid var(--ca-pg-accent, #1a6db0);
	outline-offset: 2px;
}

.ca-pg-gallery__thumb.is-active {
	border-color: var(--ca-pg-accent, #1a6db0);
	box-shadow: 0 0 0 1px var(--ca-pg-accent, #1a6db0) inset;
}