/* 商城详情 / 一物一码 · 主图换色水晶条（毛玻璃）；详情角标前台隐藏（已合成进海报） */
.mall-mcv-hero,
#mergepic.shuiyin,
.shuiyin#mergepic,
.imgbox.mall-mcv-hero {
	position: relative !important;
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
	/* 水晶条约 1/3 露在主图下沿外，给下方标题留空 */
	margin-bottom: 36px;
}

.mall-mcv-swatches {
	display: flex !important;
	flex-wrap: nowrap; /* 永远单行 */
	justify-content: center; /* 色块在胶囊内水平居中，禁止左对齐 */
	align-items: flex-start;
	gap: 8px 10px;
	padding: 10px 16px 12px;
	box-sizing: border-box;
	width: fit-content;
	max-width: min(92vw, calc(100% - 16px));
	visibility: visible !important;
	opacity: 1 !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	z-index: 30;
}
.mall-mcv-swatches::-webkit-scrollbar {
	display: none;
}

/* 叠在主图下沿：宽度贴合色块；约 2/3 在图内、1/3 露图外（不用 translateY，避免 iOS 条内横滑失效） */
#mergepic > .mall-mcv-swatches,
.shuiyin > .mall-mcv-swatches,
.imgbox > .mall-mcv-swatches,
.mall-mcv-hero > .mall-mcv-swatches,
.mall-mcv-swatches.is-overlay {
	position: absolute !important;
	left: 0;
	right: 0;
	/* 条高约 84px：-28 ≈ 1/3 在图外、2/3 压主图 */
	bottom: -28px;
	transform: none;
	z-index: 30;
	margin: 0 auto;
	padding: 10px 16px 11px;
	width: fit-content;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: min(92vw, calc(100% - 16px));
	box-sizing: border-box;
	justify-content: center;
	touch-action: pan-x;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* 毛玻璃 */
	background: rgba(255, 255, 255, 0.32);
	-webkit-backdrop-filter: blur(18px) saturate(1.45);
	backdrop-filter: blur(18px) saturate(1.45);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.62);
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.18),
		0 2px 8px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.78),
		inset 0 -1px 0 rgba(255, 255, 255, 0.12);
	pointer-events: auto;
}

/* 不支持 backdrop-filter 时略提不透明度，仍可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#mergepic > .mall-mcv-swatches,
	.shuiyin > .mall-mcv-swatches,
	.imgbox > .mall-mcv-swatches,
	.mall-mcv-hero > .mall-mcv-swatches,
	.mall-mcv-swatches.is-overlay {
		background: rgba(255, 255, 255, 0.78);
	}
}

/* 放不下（≥5 或实测溢出）：顶满 max 宽，条内立刻可左右滑，仍单行 */
.mall-mcv-swatches.is-scroll {
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	width: min(92vw, calc(100% - 16px)) !important;
	max-width: min(92vw, calc(100% - 16px)) !important;
	padding-left: 14px;
	padding-right: 14px;
	touch-action: pan-x;
	-webkit-overflow-scrolling: touch;
}

.mall-mcv-swatch {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	width: 58px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	font: inherit;
	color: inherit;
}
.mall-mcv-swatches.is-scroll .mall-mcv-swatch {
	width: 58px;
}

/* 色圈圆点：水晶钮（皮纹仍作底图，上层叠高光/折射，勿过透导致偏色） */
.mall-mcv-swatch-dot {
	display: block !important;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.9);
	background-color: #d0d0d0;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	/* relative：水晶高光伪层；勿用 absolute（一物一码水印会误伤） */
	position: relative !important;
	right: auto !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
	margin-top: 0 !important;
	opacity: 1 !important;
	transform: none;
	isolation: isolate;
	box-shadow:
		0 5px 14px rgba(0, 0, 0, 0.22),
		0 1px 3px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.35),
		inset 0 2px 4px rgba(255, 255, 255, 0.55),
		inset 0 -4px 8px rgba(0, 0, 0, 0.22);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: transform, box-shadow;
}
/* 顶部晶亮高光 */
.mall-mcv-swatch-dot::before {
	content: '';
	position: absolute;
	left: 14%;
	right: 14%;
	top: 5%;
	height: 36%;
	border-radius: 50%;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.78) 0%,
		rgba(255, 255, 255, 0.28) 42%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
	z-index: 2;
}
/* 玻璃折射 + 内圈亮边 */
.mall-mcv-swatch-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(120% 95% at 28% 18%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.1) 26%, transparent 52%),
		radial-gradient(90% 75% at 72% 88%, rgba(0, 0, 0, 0.2) 0%, transparent 48%);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.42);
	pointer-events: none;
	z-index: 1;
}
.mall-mcv-swatch-name {
	display: block;
	position: static !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
	margin-top: 5px;
	max-width: 58px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	color: rgba(40, 40, 40, 0.88);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 1 !important;
	background: none !important;
	letter-spacing: 0.01em;
	transition: color 0.18s ease, transform 0.16s ease;
}
/* 按下：实体键下沉，水晶高光略压暗 */
.mall-mcv-swatch:active .mall-mcv-swatch-dot {
	transform: translateY(1px) scale(0.92);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.24),
		inset 0 3px 6px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.mall-mcv-swatch:active .mall-mcv-swatch-dot::before {
	opacity: 0.55;
}
.mall-mcv-swatch:active .mall-mcv-swatch-name {
	transform: translateY(1px);
	color: rgba(40, 40, 40, 0.7);
}
.mall-mcv-swatch.is-active .mall-mcv-swatch-name {
	font-weight: 600;
	color: rgba(28, 28, 28, 0.95);
}
/* 选中：水晶外圈光晕 */
.mall-mcv-swatch.is-active .mall-mcv-swatch-dot,
.mall-mcv-swatch:focus .mall-mcv-swatch-dot {
	border: 2.5px solid #fff;
	transform: scale(1.06);
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, 0.95),
		0 0 14px 3px rgba(255, 255, 255, 0.7),
		0 6px 16px rgba(0, 0, 0, 0.22),
		inset 0 2px 4px rgba(255, 255, 255, 0.62),
		inset 0 -3px 6px rgba(0, 0, 0, 0.16);
}
.mall-mcv-swatch.is-active:active .mall-mcv-swatch-dot {
	transform: translateY(1px) scale(0.96);
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.9),
		0 0 8px rgba(255, 255, 255, 0.5),
		0 2px 6px rgba(0, 0, 0, 0.22),
		inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* 一物一码：与详情主图同款 —— 约 2/3 压主图、1/3 露图外（Swiper 下 backdrop 常失效，保留渐变兜底） */
body.mallcpw-page #mergepic > .mall-mcv-swatches,
body.mallcpw-page .shuiyin > .mall-mcv-swatches,
body.mallcpw-page .mall-mcv-hero > .mall-mcv-swatches,
body.mallcpw-page .mall-mcv-swatches.is-overlay {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: -28px !important;
	transform: none !important;
	margin: 0 auto !important;
	z-index: 40 !important;
	width: fit-content;
	max-width: min(92vw, calc(100% - 16px));
	justify-content: center;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	touch-action: pan-x;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.12) 0%,
		rgba(255, 255, 255, 0.24) 48%,
		rgba(255, 255, 255, 0.34) 100%
	);
	-webkit-backdrop-filter: blur(14px) saturate(1.35);
	backdrop-filter: blur(14px) saturate(1.35);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.46);
	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.14),
		0 2px 6px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.38),
		inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.mallcpw-page #mergepic > .mall-mcv-swatches,
	body.mallcpw-page .shuiyin > .mall-mcv-swatches,
	body.mallcpw-page .mall-mcv-hero > .mall-mcv-swatches,
	body.mallcpw-page .mall-mcv-swatches.is-overlay {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0.38) 100%
		);
		border-color: rgba(255, 255, 255, 0.52);
	}
}

/* 若仍在 #viewImg 下（旧缓存兜底）：相对定位显示在图下 */
#viewImg > .mall-mcv-swatches {
	position: relative !important;
	left: auto;
	transform: none;
	bottom: auto;
	margin: 12px auto;
	width: fit-content;
	justify-content: center;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	padding: 10px 14px 11px;
	max-width: calc(100% - 24px);
}
#viewImg > .mall-mcv-swatches.is-scroll {
	width: min(92vw, calc(100% - 16px));
	max-width: min(92vw, calc(100% - 16px));
	justify-content: flex-start;
}
#viewImg > .mall-mcv-swatches .mall-mcv-swatch-name {
	color: rgba(40, 40, 40, 0.88);
	text-shadow: none;
}
#viewImg > .mall-mcv-swatches .mall-mcv-swatch-dot {
	border-color: rgba(255, 255, 255, 0.95);
}

/* 一物一码：条下沿约 1/3 露图外，主图容器留空 */
body.mallcpw-page .mall-mcv-hero,
body.mallcpw-page #mergepic.shuiyin {
	margin-bottom: 36px !important;
}
body.mallcpw-page #viewImg > .pro02BoxToprig {
	position: relative;
	z-index: 1;
}
body.mallcpw-page .pro02BoxBotCon > .swiper-container,
body.mallcpw-page .pro02BoxBotCon > .swiper-container > .swiper-wrapper,
body.mallcpw-page .pro02BoxBotCon > .swiper-container .swiper-slide {
	overflow: visible !important;
}
body.mallcpw-page .mall-mcv-figure {
	overflow: visible !important;
}
/* 皮样角标已取消：前台+会员编辑一律不飘右上角圆（水印/logo/码跟主图 mallthumbwater） */
.mall-mcv-figure-badge,
#detail1 .mall-mcv-figure-badge,
#detail2 .mall-mcv-figure-badge,
#detail .mall-mcv-figure-badge,
#content .mall-mcv-figure-badge,
#content-e .mall-mcv-figure-badge,
.artEditor .mall-mcv-figure-badge,
.page-style .mall-mcv-figure-badge,
.pro02BoxBotConText .mall-mcv-figure-badge,
.pro02BoxBotCon .mall-mcv-figure-badge,
body.mallcpw-page .mall-mcv-figure-badge {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
/* 一物一码：色圈勿被旧水印规则打成 absolute；圆点保持 relative 以叠水晶高光 */
body.mallcpw-page #mergepic .mall-mcv-swatch-dot {
	position: relative !important;
	right: auto !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
}
body.mallcpw-page #mergepic .mall-mcv-swatch-name {
	position: static !important;
	right: auto !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
}
body.mallcpw-page #mergepic .mall-mcv-swatch-name {
	width: auto !important;
	height: auto !important;
	background: none !important;
	background-image: none !important;
	color: rgba(40, 40, 40, 0.9);
	text-shadow: none;
}

/* 详情正文 figure 容器（角标前台已隐藏，见上方 display:none） */
.mall-mcv-figure {
	position: relative;
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 16px auto;
	box-sizing: border-box;
	overflow: visible;
}
.mall-mcv-figure > p {
	margin: 0;
}
.mall-mcv-figure img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
}
.mall-mcv-figure-badge {
	position: absolute;
	/* 大圆 80px，边距过小会贴/压出图右缘；上与右留白接近 */
	top: 28px;
	right: 40px;
	left: auto;
	transform: none;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	max-width: calc(100% - 56px);
	box-sizing: border-box;
}
/* 相对主图色圈约大一倍（40→80），右上角头像感 */
.mall-mcv-figure-badge .mall-mcv-swatch-dot {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	opacity: 0.95 !important;
	transform: none !important;
	position: relative !important;
	border: 2.5px solid rgba(255, 255, 255, 0.92);
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.34),
		0 0 0 1px rgba(255, 255, 255, 0.35),
		inset 0 3px 6px rgba(255, 255, 255, 0.55),
		inset 0 -5px 10px rgba(0, 0, 0, 0.22);
}
.mall-mcv-figure-name {
	display: block;
	margin-top: 6px;
	padding: 3px 12px;
	max-width: 120px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}