/**
 * Nút next/prev của gallery ảnh sản phẩm — kiểu Coolmate.
 * Hai nút tròn trắng, gom góc DƯỚI–PHẢI trong khung ảnh, luôn hiện.
 *
 * Phần "luôn hiện" KHÔNG có quy tắc nào ở đây: PHP đã gỡ class wd-hover-1 khỏi
 * thẻ bọc, mà đó mới là thứ bật cơ chế ẩn của theme. Ghi đè bằng CSS thì sẽ đá
 * nhau với quy tắc giữ nút ẩn tới khi Swiper khởi tạo xong.
 */

/*
 * ⚠ MỐC ĐỊNH VỊ: .wd-carousel-inner không có `position` trong CSS của theme.
 * Không đặt relative ở đây thì `position:absolute` của cụm nút sẽ leo lên tổ
 * tiên xa hơn và văng ra ngoài khung ảnh (đúng lỗi ở bản trước: nút nhảy lên
 * góc trên–phải, ngang hàng breadcrumb).
 *
 * Bó trong .wd-gallery-images để không đụng .wd-carousel-inner của thumbnail.
 */
.woocommerce-product-gallery .wd-gallery-images > .wd-carousel-inner {
	position: relative;
}

/*
 * ⚠ PHẢI ĐẤU ĐỘ ƯU TIÊN VỚI wd-pos-together, KHÔNG chỉ dùng class riêng.
 * Theme đặt:
 *     .wd-nav-arrows.wd-pos-together {
 *         position: absolute;
 *         top: calc(0% - var(--wd-arrow-offset-v,0px) - var(--wd-arrow-height,...));
 *         inset-inline-end: calc(var(--wd-arrow-offset-h,0px) / -1);
 *     }
 * top ÂM + inset-inline-end ÂM: chế độ này vốn dành cho carousel sản phẩm, nút
 * nằm phía TRÊN lưới cạnh tiêu đề mục. Đó là lý do nút nhảy lên ngang breadcrumb.
 *
 * Selector `.woocommerce-product-gallery .labebe-gallery-arrows` chỉ là 0-2-0 —
 * HOÀ với theme, thua theo thứ tự nạp. Ghép cả hai class vào một chuỗi thành
 * 0-4-0 mới thắng dứt điểm, không cần !important.
 *
 * Ghi đè ĐÚNG thuộc tính theme dùng (inset-inline-end, không phải right) để
 * không để lại hai nguồn định vị đá nhau.
 */
.woocommerce-product-gallery .wd-nav-arrows.wd-pos-together.labebe-gallery-arrows {
	/* Chỉnh kích thước / khoảng cách ở đây. */
	--wd-arrow-width: 44px;
	--wd-arrow-height: 44px;
	--wd-arrow-size: 44px;
	--wd-arrow-icon-size: 17px;
	--wd-arrow-color: #1a1a1a;
	--wd-arrow-color-hover: #1a1a1a;
	--wd-arrow-gap: 10px;

	--labebe-arrow-inset: 18px;

	position: absolute;
	top: auto;
	bottom: var(--labebe-arrow-inset);
	inset-inline-end: var(--labebe-arrow-inset);
	inset-inline-start: auto;
	z-index: 250;

	display: flex;
	gap: var(--wd-arrow-gap);
	width: auto;
	/* Khoảng trống giữa hai nút không được chặn click/zoom vào ảnh. */
	pointer-events: none;
}

/*
 * Theme cho .wd-btn-arrow position:absolute + top:calc(50% ...) để dán vào mép
 * khung. Ta đã gom chúng vào một cụm flex nên phải trả về dòng chảy bình thường,
 * nếu không hai nút chồng lên nhau.
 */
.woocommerce-product-gallery .wd-nav-arrows.labebe-gallery-arrows .wd-btn-arrow {
	position: relative;
	inset: auto;
	transform: none;
	flex: 0 0 auto;
	pointer-events: auto;
}

.woocommerce-product-gallery .wd-nav-arrows.labebe-gallery-arrows .wd-arrow-inner {
	position: relative;
	top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wd-arrow-width);
	height: var(--wd-arrow-height);
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	color: var(--wd-arrow-color);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

@media (hover: hover) {
	.woocommerce-product-gallery .wd-nav-arrows.labebe-gallery-arrows .wd-btn-arrow:not(.wd-disabled):hover .wd-arrow-inner {
		transform: scale(1.06);
		box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
	}
}

/* Ảnh đầu/cuối: làm mờ tại chỗ thay vì giấu, để cụm nút không nhảy. */
.woocommerce-product-gallery .wd-nav-arrows.labebe-gallery-arrows .wd-btn-arrow.wd-disabled {
	opacity: .45;
	pointer-events: none;
}

/* Nhãn giảm giá nằm cùng khung ảnh — giữ nút nổi lên trên. */
.woocommerce-product-gallery .wd-gallery-images .product-labels {
	z-index: 2;
}

@media (max-width: 768.98px) {
	.woocommerce-product-gallery .wd-nav-arrows.labebe-gallery-arrows {
		--wd-arrow-width: 38px;
		--wd-arrow-height: 38px;
		--wd-arrow-size: 38px;
		--wd-arrow-icon-size: 15px;
		--labebe-arrow-gap: 8px;
		--labebe-arrow-inset: 12px;
	}
}

/* ==========================================================================
 * Khoá khung ảnh gallery về tỉ lệ 1:1
 *
 * ═══ VẤN ĐỀ ═══
 * Gallery đang trộn hai tỉ lệ ảnh:
 *     ảnh chụp thật     1254 x 1254   -> 1.000  (vuông)
 *     ảnh minh hoạ       700 x  900   -> 0.778  (dọc)
 * Swiper chạy với slidesPerView:1 và autoHeight TẮT (Theme Settings →
 * product_slider_auto_height = false), nên nó đặt chiều cao khung bằng SLIDE
 * CAO NHẤT rồi giữ nguyên để lúc trượt không giật layout.
 *
 * Ở bề rộng ~870px:  ảnh vuông cao 870px, ảnh dọc cao 1119px  ->  thừa 249px
 * trắng bên dưới ảnh vuông. Đó là "khoảng đệm" nhìn thấy trên trang, không
 * phải padding hay margin của ai cả.
 *
 * 29/29 sản phẩm có gallery đều dính, vì bộ ảnh minh hoạ 700x900 dùng chung.
 *
 * ═══ VÌ SAO CHỌN CÁCH NÀY ═══
 * Không xoá ảnh minh hoạ khỏi gallery (chưa có ảnh chụp thật thay thế), cũng
 * không bật autoHeight (mỗi lần trượt cả cột phải nhảy 249px, kéo theo giá và
 * nút bên dưới trên mobile). Ép khung về đúng tỉ lệ ảnh thật là ổn định nhất,
 * và TỰ HẾT TÁC DỤNG một cách vô hại khi sau này mọi ảnh đều vuông.
 *
 * object-fit: contain chứ không cover — ảnh minh hoạ dọc sẽ có viền hai bên
 * thay vì bị cắt mất đầu/chân sản phẩm.
 *
 * ⚠ Độ ưu tiên: theme đặt `.woocommerce-product-gallery .wd-carousel-item img`
 * (0-2-1). Selector dưới đây thêm `.wd-gallery-images` thành 0-3-1 để thắng
 * chắc, không phụ thuộc thứ tự nạp — bài học từ ba lần trước.
 * ========================================================================== */

.woocommerce-product-gallery .wd-gallery-images {
	--labebe-gallery-ratio: 1 / 1;
}

.woocommerce-product-gallery .wd-gallery-images .woocommerce-product-gallery__image {
	aspect-ratio: var(--labebe-gallery-ratio);
}

/* Thẻ <a> bọc ảnh phải cao hết khung, không thì ảnh không có gì để lấp đầy. */
.woocommerce-product-gallery .wd-gallery-images .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.woocommerce-product-gallery .wd-gallery-images .wd-carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}