/*
 * Afroyla Style Product Gallery
 * Tái tạo từ source thật của afroyla.com:
 *   - theme Broadcast 7.0 (product__images--mobile-thumbs) + hc-product-grid-3.css
 *   - Breakpoint gốc: mobile <= 749px, tablet 750-989px (3 cột), desktop >= 990px (4 cột)
 *   - Accent: #a9894c (viền ảnh active), dot active: pill đen 47x11
 */

:root {
	--agx-accent: #a9894c;
	--agx-accent-soft: rgba(169, 137, 76, 0.15);
	--agx-gap: 8px;
	--agx-ratio: 3 / 4;
}

.agx-gallery {
	position: relative;
	width: 100%;
	opacity: 1 !important; /* Woo core để opacity 0 chờ flexslider — ta không dùng */
}

.agx-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.agx-media {
	margin: 0;
	aspect-ratio: var(--agx-ratio);
	overflow: hidden;
}

/* ===== HERO (desktop) — .hc-gallery-hero-display ===== */
.agx-hero {
	display: block;
	margin-bottom: var(--agx-gap);
	overflow: hidden;
	border-radius: 2px;
	cursor: zoom-in;
	aspect-ratio: var(--agx-ratio);
}

.agx-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== SLIDES ===== */

/* Desktop >= 990px: lưới 4 cột (hc-product-grid-3) */
@media only screen and (min-width: 990px) {
	.agx-slides {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--agx-gap);
		align-items: start;
	}
}

/* Tablet 750–989px: lưới 3 cột */
@media only screen and (min-width: 750px) and (max-width: 989px) {
	.agx-slides {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--agx-gap);
		align-items: start;
	}
}

@media only screen and (min-width: 750px) {
	.agx-slide {
		cursor: pointer;
		position: relative;
	}

	/* Tile đang chọn: outline vàng đồng 2px, offset -2px (y hệt bản gốc) */
	.agx-slide.is-active {
		outline: 2px solid var(--agx-accent);
		outline-offset: -2px;
	}

	/* Mobile-only elements ẩn trên desktop */
	.agx-thumbs,
	.agx-dots {
		display: none;
	}
}

/* ===== MOBILE <= 749px: fader + thumbs + dots ===== */
@media only screen and (max-width: 749px) {
	.agx-hero {
		display: none !important;
	}

	/* Fader: các slide chồng lên nhau, fade 0.3s (product__images--mobile-thumbs) */
	.agx-slides {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		align-items: start;
		overflow: hidden;
		touch-action: pan-y;
	}

	.agx-slide {
		grid-row-start: 1;
		grid-column-start: 1;
		width: 100%;
		transition: opacity 0.3s, visibility 0.3s;
		cursor: zoom-in;
	}

	.agx-slide:not(.is-active) {
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		transition-delay: 0s, 0.3s;
		pointer-events: none;
	}

	/* Slide đang rời đi: fade out tại chỗ */
	.agx-slide.is-hiding {
		position: relative;
		left: 0;
		opacity: 0;
		visibility: hidden;
	}

	/* Thumbnails: 4 ảnh/hàng, vuốt ngang, snap */
	.agx-thumbs {
		display: block;
		margin-top: 10px;
	}

	.agx-thumbs-holder {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 4px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
	}

	.agx-thumbs-holder::-webkit-scrollbar {
		display: none;
	}

	.agx-thumb {
		flex: 0 0 calc(25% - 3px);
		min-width: 0;
		scroll-snap-align: start;
		position: relative;
	}

	.agx-thumb-link {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: var(--agx-ratio);
		overflow: hidden;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.agx-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Thumb đang chọn: viền vàng + lớp phủ vàng nhạt 15% */
	.agx-thumb.is-active {
		border: 1px solid var(--agx-accent);
	}

	.agx-thumb.is-active::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--agx-accent-soft);
		pointer-events: none;
	}

	/* Dots: chấm 11px, active = pill đen 47x11 */
	.agx-dots {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap; /* nhiều ảnh không tràn ngang */
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 12px 0 16px;
	}

	.agx-dots:empty {
		display: none;
	}

	.agx-dots .agx-dot {
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.2);
		border: 0;
		padding: 0;
		cursor: pointer;
		transition: width 0.25s ease, background-color 0.25s ease;
		-webkit-appearance: none;
		appearance: none;
	}

	.agx-dots .agx-dot.is-active {
		width: 47px;
		border-radius: 100px;
		background-color: rgb(0, 0, 0);
	}
}

/* ===== TƯƠNG THÍCH THEME (Ecomus...) ===== */
/* Chặn nút lightbox/loading overlay của theme chèn vào gallery */
.agx-gallery .ecomus-button--product-lightbox {
	display: none !important;
}

.agx-gallery.loading::before,
.agx-gallery.loading::after {
	display: none !important;
}

/* ===== LIGHTBOX ZOOM =====
 * Tái tạo modal PhotoSwipe "pswp-zoom-gallery" của Broadcast/afroyla:
 * nền trắng đặc, nút vuông 50x50 viền #f0f0f0, close góc trên phải,
 * mũi tên 2 bên giữa màn hình, dải thumbnails TRÒN dưới đáy
 * (hover scale 1.1, ảnh hiện tại scale 1.4), tap ảnh = zoom in/out.
 */
.agx-zoom {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgb(255, 255, 255);
	opacity: 0;
	transition: opacity 0.25s ease;
	user-select: none;
}

.agx-zoom.is-open {
	opacity: 1;
}

/* Vùng ảnh */
.agx-zoom-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: zoom-in;
	touch-action: none;
}

.agx-zoom.is-zoomed .agx-zoom-stage {
	cursor: zoom-out;
}

.agx-zoom-stage img {
	max-width: 100vw;
	max-height: 100vh;
	max-height: 100dvh; /* iOS Safari: trừ thanh URL động */
	width: auto;
	height: auto;
	object-fit: contain;
	-webkit-user-drag: none;
	transition: transform 0.3s ease;
	will-change: transform;
}

.agx-zoom-stage.is-dragging img {
	transition: none;
}

/* Nút vuông kiểu Broadcast: 50x50, nền trắng, viền #f0f0f0 */
.agx-zoom-btn {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid rgb(240, 240, 240);
	background: rgb(255, 255, 255);
	color: #030405;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease-in-out;
	-webkit-appearance: none;
	appearance: none;
}

.agx-zoom-btn:hover {
	transform: scale(1.1);
}

.agx-zoom-btn svg {
	pointer-events: none;
	stroke: currentColor;
	fill: none;
}

.agx-zoom-close {
	top: 40px;
	right: 40px;
	border-radius: 3px;
}

.agx-zoom-prev,
.agx-zoom-next {
	top: 50%;
	margin-top: -25px;
}

.agx-zoom-prev {
	left: 40px;
}

.agx-zoom-next {
	right: 40px;
}

.agx-zoom-prev:hover,
.agx-zoom-next:hover {
	transform: scale(1.1);
}

/* Dải thumbnails tròn dưới đáy */
.agx-zoom-thumbs {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 10px 10px 16px;
	font-size: 0;
	text-align: center;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.agx-zoom-thumbs::-webkit-scrollbar {
	display: none;
}

.agx-zoom-thumb {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
	margin: 10px;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	vertical-align: top;
	transition: transform 0.2s ease-in-out;
	will-change: transform;
	border: 0;
	padding: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
}

.agx-zoom-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agx-zoom-thumb:hover {
	transform: scale(1.1);
}

.agx-zoom-thumb.is-current {
	transform: scale(1.4);
}

/* Tôn trọng cài đặt giảm chuyển động của người dùng */
@media (prefers-reduced-motion: reduce) {
	.agx-slide,
	.agx-gallery img,
	.agx-zoom,
	.agx-zoom-stage img,
	.agx-zoom-btn,
	.agx-zoom-thumb,
	.agx-dots .agx-dot {
		transition: none !important;
	}

	.agx-thumbs-holder,
	.agx-zoom-thumbs {
		scroll-behavior: auto;
	}
}

@media only screen and (max-width: 749px) {
	.agx-zoom-close {
		top: 10px;
		right: 10px;
	}

	.agx-zoom-prev {
		left: 10px;
	}

	.agx-zoom-next {
		right: 10px;
	}

	.agx-zoom-thumbs {
		padding: 10px 0;
	}

	.agx-zoom-thumb {
		width: 54px;
		height: 54px;
		margin: 8px;
	}

	.agx-zoom-thumb.is-current {
		transform: scale(1.3);
	}
}