/**
 * 轻量轮播样式（仅在平板/手机 <1024px 激活）
 *
 * 桌面 >=1024px 不加载 .mini-car-active，
 * 完全沿用 Glozin 的 grid-2 双列静态布局，本文件不做任何覆盖。
 */

/* 激活时：把 Glozin 的 grid 横向滚动改成轨道式 transform 轮播 */

@media(max-width:767px){
    .single-product div.product .woocommerce-product-gallery{position:relative;margin-left:-15px;margin-right:-15px;}
}
/* 移动端直接用轮播布局，不等 JS 加 .mini-car-active，避免先显示父主题 85% 宽横向滚动再闪烁 */
@media(max-width:767px){
	.single-product div.product .woocommerce-product-gallery__wrapper {
		display: flex !important;
		flex-wrap: nowrap !important;
		margin: 0 !important;
		gap: 0 !important;
		transition: transform .55s cubic-bezier(.3, 1, .3, 1);
		will-change: transform;
	}
	.single-product div.product .woocommerce-product-gallery__image {
		flex: 0 0 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.single-product div.product .woocommerce-product-gallery__image img {
		width: 100%;
	}
}

/* 克隆出来的 slide：禁止选中/链接干扰 */
.mini-car-active .woocommerce-product-gallery__image.mini-clone {
	user-select: none;
	pointer-events: none;
}

/* 左右箭头 */
.mini-car-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border:none;
	background: #ffffff80;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	display: none;            /* 默认隐藏，小屏由 JS 容器控制显示 */
	align-items: center;
	justify-content: center;
	color: var(--color-900);
	transition: background .4s;
}
.mini-car-arrow svg { width: 30px; height: 30px; }
.mini-car-arrow:hover { background: #fff; }
.mini-car-arrow--prev { left: 8px; }
.mini-car-arrow--next { right: 8px; }

/* 仅在激活状态显示箭头 */
.mini-car-active .mini-car-arrow { display: inline-flex; }

/* 底部进度条指示器（仿 Lulus scrollbar） */
.mini-car-progress {
	position: relative;
	height: 3px;
	width: 100%;
	border-radius: 3px;
	background: rgba(0, 0, 0, .12);
	overflow: hidden;
	display: none;
}
.mini-car-active .mini-car-progress { display: block; }

.mini-car-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: #111;
	border-radius: 3px;
	transition: left .4s ease, width .4s ease;
}
@media (min-width: 768px) {
	/* gallery 固定在顶部，summary 正常滚动 */
	.single-product .woocommerce-product-gallery {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: 70px;
		align-self: flex-start;
	}
	/* 取消 summary 的 sticky，让它正常向下滚动 */
	.single-product div.product .entry-summary {
		position: static !important;
	}
	.single-product .woocommerce-product-gallery__wrapper {
		height:calc(100vh - 150px);
		overflow-y: auto!important;
		overflow-x: hidden;
		flex-wrap: wrap;
		align-content: flex-start;
		gap: 10px;
		scrollbar-width: none;
	}
	.single-product .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		width: 0;
	}
	/* 图片未加载时的浅灰占位 */
	.single-product .woocommerce-product-gallery__image {
		background: var(--color-100);
		min-height: 240px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.single-product .woocommerce-product-gallery__image img {
		background: #ece7dd;
	}
}

.gz-gallery-row-indicator__current {
	font-weight: 600;
	font-size: 15px;
}
.gz-gallery-row-indicator__sep {
	opacity: .4;
}
.gz-gallery-row-indicator__total {
	opacity: .55;
}
/* 移动端/平板不显示 */
@media (max-width: 1199px) {
	.gz-gallery-row-indicator { display: none !important; }
}

/* ============================================================
 * gallery 行指示器（圆点，>=768px 显示，<768px 轮播不显示）
 * ============================================================ */
.gz-gallery-row-dots {
	position: absolute;
	right: 15px;
	top:50%;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	background: rgba(0, 0, 0, .2);
	backdrop-filter: blur(8px);
	border-radius: 999px;
	pointer-events: none;
}
.gz-gallery-row-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-50);
	transition: background .4s ease, transform .s ease;
}
.gz-gallery-row-dot.is-active {
	background:var(--color-800);
	transform: scale(1.4);
}
/* 移动端轮播不显示 */
@media (max-width: 767px) {
	.gz-gallery-row-dots { display: none !important; }
}

/* ============================================================
 * 去掉 gallery loading 白色遮罩，让图片逐张加载逐张显示
 * 父主题在 .loading::after 盖了一层 #fff，等所有图加载完才移除
 * ============================================================ */
.single-product .woocommerce-product-gallery.loading::after {
    background: transparent !important;
}
.single-product .woocommerce-product-gallery.loading::before {
    display: none !important;
}

/* ============================================================
 * 覆盖父主题/ WooCommerce 核心 gallery 初始 opacity:0
 * JS 在图片全部加载完才把 opacity 从 0 切到 1，导致首屏空白。
 * 直接强制 opacity:1，配合浅灰占位背景，图片逐张加载逐张显示。
 * ============================================================ */
.single-product .woocommerce-product-gallery {
    opacity: 1 !important;
}