/* 隐藏原生 <select>，用缩略图/按钮驱动它 */
.pqp-hidden-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect( 1px, 1px, 1px, 1px ) !important;
	opacity: 0 !important;
	pointer-events: none;
}

/* 变体标签：Color：黑白色 / Size：Large */
.pqp-selval {
	font-weight: 700;
	color: #111;
}

/* ============ 主图：固定比例的自控大图 ============ */
.woocommerce-product-gallery.pqp-main-hosted {
	opacity: 1 !important;
	height: auto !important;
	width: 100%;
}

/* 桌面端两列配比：图 46% + 间距 4% + 购买区 50%，整体居中。
   用百分比而非定宽，图会跟着容器一起放大，不会在宽屏上显得小。
   主题在 991px 以下会把两列改成堆叠，所以只在此断点以上覆盖。 */
/* 主图 + 购买区的外框（由 PQP_Frontend::open_top_wrap 输出）。
   里面两列是浮动的，自己收尾，否则撑不开高度、sticky 也就没了活动范围。 */
.pqp-top::after {
	content: '';
	display: block;
	clear: both;
}

@media ( min-width: 992px ) {
	/* 居中和宽度已由主题 woocommerce.php 的 .container-pawfect 负责（全站统一 1280），
	   这里不再自己写 max-width —— 原来那段是主题缺容器时的补丁。 */

	/* 购买区比图片列高出约 150px，左下角会空一块。让图片列跟着滚，
	   既补上这块空白，选颜色/看描述时主图也一直在视野里。
	   88px = 固定头部 72px + 16px 留白，与货架侧边栏的 sticky 取值一致。 */
	.woocommerce div.product .woocommerce-product-gallery.pqp-main-hosted {
		position: sticky;
		top: 88px;
	}
	/* 主题的 .woocommerce div.product div.images{width:48%} 会盖掉这里，
	   故用 !important 锁定（本文件同样的手法见下方 flexslider 隐藏规则）。 */
	.woocommerce div.product .woocommerce-product-gallery.pqp-main-hosted {
		width: 46% !important;
		max-width: none !important;
		margin-right: 0 !important;
	}
	.woocommerce div.product .woocommerce-product-gallery.pqp-main-hosted ~ .summary.entry-summary {
		width: 50% !important;
	}
}
/* 只显示自控大图，其余（flexslider 视口、缩略图条、放大图标）全隐藏，
   用 CSS !important 兜底，防止 flexslider 重新渲染后又冒出来。 */
.woocommerce-product-gallery.pqp-main-hosted > *:not(.pqp-main):not(.pqp-strip) {
	display: none !important;
}
/* 固定 1:1 比例框（亚马逊/eBay 的标准商品框）：任何比例的图都完整装入且不裁切，
   高度恒定，切换颜色时版面不会跳动。
   选 1:1 而非 3:4 是因为现有产品图 76% 是方图——3:4 会让它们上下各留 70px 白边。 */
.pqp-main {
	width: 100%;
	aspect-ratio: 1 / 1; /* 420 宽 => 420 高。 */
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
	/* 白底：产品图多为白底棚拍，contain 的留白与照片背景融为一体，
	   不会出现灰色横条。 */
	background: #fff;
	line-height: 0;
}
/* 手机端限高：短屏幕上大图会吃掉整个首屏。这是道保险而不是统一缩小——
   矮屏（如 375×667）会被压到 400px，高屏算出来仍是完整 1:1，不受影响。
   触发限高时框会略宽于 1:1，但同一屏内高度恒定，切颜色依旧不跳版。 */
@media ( max-width: 767px ) {
	.pqp-main {
		max-height: 60vh;
	}
}
.pqp-main-img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
	display: block;
}
/* 悬停局部放大：缩放原点由 JS 跟着鼠标走，父级 overflow:hidden 负责裁切。 */
.pqp-main.pqp-zoomable {
	cursor: zoom-in;
}
.pqp-main.pqp-zoomable .pqp-main-img {
	will-change: transform;
}
/* 当前颜色的相册缩略图条（主图下方） */
.pqp-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}
/* 88px 是配着 567px 的主图定的（原来 68px 是按 420px 主图配的，主图放大后显得太碎）。 */
.pqp-sthumb {
	width: 88px;
	height: 88px;
	padding: 0;
	border: 2px solid #e3e3e3;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
/* contain 而非 cover：cover 会把竖图的头尾裁掉（0.74 的图只剩 74% 可见），
   缩略图的作用是让人认出这张图是哪一张，裁掉主体就失去意义了。 */
.pqp-sthumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.pqp-sthumb:hover {
	border-color: #f06eae;
}
.pqp-sthumb.is-active {
	border-color: #ec4899;
	box-shadow: 0 0 0 2px rgba( 236, 72, 153, 0.25 );
}

/* ============ 颜色：图片缩略图网格（亚马逊风格） ============ */
.pqp-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 4px;
}

.pqp-swatch--img {
	position: relative;
	width: 66px;
	height: 66px;
	padding: 0;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.pqp-swatch--img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.pqp-swatch--img:hover {
	border-color: #f06eae;
}
.pqp-swatch--img .pqp-check {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size: 12px;
	color: #fff;
	background: #ec4899;
	border-radius: 50%;
	opacity: 0;
	transform: scale( 0.5 );
	transition: all 0.15s ease;
}
.pqp-swatch--img.is-selected {
	border-color: #ec4899;
	box-shadow: 0 0 0 2px rgba( 236, 72, 153, 0.3 );
}
.pqp-swatch--img.is-selected .pqp-check {
	opacity: 1;
	transform: scale( 1 );
}

/* ============ 按钮款（尺码兜底，尺码通常由主题渲染） ============ */
.pqp-swatch--btn {
	min-width: 54px;
	padding: 9px 18px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	transition: all 0.15s ease;
}
.pqp-swatch--btn:hover {
	border-color: #999;
}
.pqp-swatch--btn.is-selected {
	border-color: #ec4899;
	background: #ec4899;
	color: #fff;
}

/* 不可用组合 */
.pqp-swatch.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	position: relative;
}
.pqp-swatch.is-disabled::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: #d63638;
	transform: rotate( -12deg );
}