/**
 * WooCommerce Product Gallery — layout & styling.
 *
 * CSS custom properties are set inline by the shortcode
 * from values stored in the admin settings page.
 */

.wcg-gallery {
	--wcg-height: 550px;
	--wcg-thumb-size: 80px;
	--wcg-gap: 12px;
	--wcg-arrow-bg: rgba(255,255,255,0.85);
	--wcg-arrow-color: #222;
	--wcg-thumb-border: #222;
	--wcg-radius: 4px;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wcg-gap);
	max-width: 100%;
	height: var(--wcg-height);
	margin: 0;
	padding: 0;
}

/* ── Thumbnail column ─────────────────────────────── */

.wcg-thumbs-col {
	flex: 0 0 var(--wcg-thumb-size);
	width: var(--wcg-thumb-size);
	height: var(--wcg-height);
	overflow: hidden;
}

.wcg-thumbs-swiper {
	width: 100%;
	height: 100%;
}

.wcg-thumb-slide {
	width: var(--wcg-thumb-size) !important;
	height: var(--wcg-thumb-size) !important;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

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

.wcg-thumb-slide.swiper-slide-thumb-active {
	border-color: var(--wcg-thumb-border);
}

/* ── Main image column ────────────────────────────── */

.wcg-main-col {
	flex: 1 1 0%;
	min-width: 0;
	height: var(--wcg-height);
	overflow: hidden;
}

.wcg-main-swiper {
	width: 100%;
	height: 100%;
	position: relative;
}

.wcg-main-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.wcg-lightbox-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.wcg-main-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Navigation arrows ────────────────────────────── */

.wcg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wcg-arrow-bg);
	color: var(--wcg-arrow-color);
	border-radius: var(--wcg-radius);
	cursor: pointer;
	transition: opacity 0.2s ease;
	user-select: none;
	-webkit-user-select: none;
}

.wcg-arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}

.wcg-arrow:hover {
	opacity: 0.75;
}

.wcg-arrow.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.wcg-arrow-prev {
	left: 12px;
}

.wcg-arrow-next {
	right: 12px;
}

/* ── Responsive — mobile: thumbs below ───────────── */

@media (max-width: 600px) {
	.wcg-gallery {
		--wcg-thumb-size: 60px;
		flex-direction: column;
		height: auto;
	}

	.wcg-main-col {
		width: 100%;
		height: 350px;
	}

	.wcg-thumbs-col {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		height: var(--wcg-thumb-size);
		overflow: hidden;
	}

	.wcg-thumbs-swiper {
		height: var(--wcg-thumb-size);
	}

	.wcg-thumb-slide {
		width: var(--wcg-thumb-size) !important;
		height: var(--wcg-thumb-size) !important;
	}

	.wcg-arrow {
		width: 32px;
		height: 32px;
	}

	.wcg-arrow svg {
		width: 16px;
		height: 16px;
	}

	.wcg-arrow-prev {
		left: 8px;
	}

	.wcg-arrow-next {
		right: 8px;
	}
}