body{
	background: #fff;
}
#introCon{
	width:100%;
	overflow: hidden;
}
#introCon .banner{
	position:relative;
	height:398px;
	background-position-x:50%;
}
#mainBannerSection{
	overflow: hidden;
	 position: relative;
}
#mainBannerCon{
	position:relative;
	width: 100%;
}    
#mainBannerCon{position:relative;}  
#mainBannerCon .bd{margin:0 auto;position:relative;z-index:0;overflow:hidden;}
#mainBannerCon .bd ul{}
#mainBannerCon .bd li{display:none;overflow:hidden;text-align:center;background-position-x:50%;}
#mainBannerCon .bd li:first-child{display:block;}
#mainBannerCon .bd li a{display:block;height:400px;}
#mainBannerCon .hd{width:100%;position:absolute;z-index:1;bottom:10px;left:0;height:30px;line-height:30px;}
#mainBannerCon .hd ul{text-align:center;margin-right: 20px;}
#mainBannerCon .hd ul li{
	display: inline-block;
	background: #cccccc;
	cursor: pointer;
	width: 40px;
	height: 5px;
	line-height: 26px;
	margin: 0 10px;
	font-size:0px;
}
#mainBannerCon .hd ul .on{
	background: #ff9900;
	color: #fff;
}
.naviCon{
	background: #b4e7f2;
  /* margin-top: -46px; */
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -500px;
}
.naviCon li{
	display:block;
	float:left;
}
.naviCon li:first-child{
	margin-left:15px;
}
.naviCon li a{
	display:inline-block;
	padding:13px 25px;
	color:#333;
	font-size:14px;
}
.naviCon li:hover a, .naviCon li.active a{
	color:#f36362; 
}


.leftPart{
	padding-top: 30px;
}
.leftPart>.currentPath, .leftPart>.currentPath a{
	color:#666666;
}
.leftPart>.currentPath a:hover{
	color:#222222;
}
.leftPart>.prodInfoCon{
	margin-top:25px;
	max-height: 400px;
}
.leftPart>.prodInfoCon .img{
	float: left;
	width: 410px;
	height: 370px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #dddddd;
}
.leftPart .favorBtn{
	display:block;
	line-height: 40px;
	width: 200px;
}
.leftPart .favorBtn:hover{
	color:#FF6600;
}
.leftPart .favorBtn .staricon{
	display:inline-block;
	background:url("./web/favor_star_icon.png") no-repeat;
	height:15px;
	width:17px;
}
.leftPart>.prodInfoCon .img img{
	max-height: 100%;
}
.leftPart>.prodInfoCon .content{
	float:left;
	margin-left:70px;
	width: 510px;
}
.leftPart>.prodInfoCon .name{
	font-size: 22px;
	border-bottom: 1px dashed #ddd;
	line-height: 36px;
	font-weight: bold;
	padding-bottom: 5px;
}
.leftPart>.prodInfoCon .price{
	margin:10px 0 0;
	line-height:50px;
}
.leftPart>.prodInfoCon .xiaoshoujia{
	color: #FF6600;
	font-size: 24px;
	margin-right:25px;
}
.leftPart>.prodInfoCon .xiaoshoujia .vip{
	font-size: 14px;
	margin-left: 10px;
	color: red;
}
.leftPart>.prodInfoCon .cankaojia{
	color: #999999;
	font-size: 18px;
	text-decoration:line-through;
}
.leftPart>.prodInfoCon .optSelection{
	margin-top:12px;
	line-height:32px;	
}
.leftPart>.prodInfoCon .optSelection .title{
	display:block;
	float:left;
}
.leftPart>.prodInfoCon .optSelection .optGroup{
	display:block;
	float:left;
	width: 280px;
}
.leftPart>.prodInfoCon .optSelection .optItem{
	display:inline-block;
	position: relative;
	padding:0 15px;
	background: #fff;
	border: 2px solid #ff9900;
	margin:0 4px 10px 4px;
	cursor:pointer;
}
.leftPart>.prodInfoCon .optSelection .optItem.active .checkedIcon{
	display:none;
	position: absolute;
	width:12px;
	height:12px;
	right:0;
	bottom:0;
	background:url("./web/index_selection_checked.png") no-repeat;
}
.leftPart>.prodInfoCon .optSelection .optItem.active .checkedIcon{
	display:block;
}   
.leftPart>.prodInfoCon .btnCon{
	margin-top:25px;
	padding-bottom: 25px;
	display:flex;
	gap: var(--sp-3, 12px);
	flex-wrap: wrap;
}
/* shared button base — text-driven (i18n via {:lang()}), token-styled, dark-mode aware */
.leftPart>.prodInfoCon .btnCon > a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap: var(--sp-2, 8px);
	box-sizing:border-box;
	height:44px;
	padding:0 var(--sp-4, 18px);
	border-radius: var(--radius-8, 8px);
	font-family: var(--font-sans, 'Geist', Arial, sans-serif);
	font-size:15px;
	font-weight: var(--fw-strong, 600);
	line-height:1;
	letter-spacing:0.01em;
	white-space:nowrap;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.leftPart>.prodInfoCon .btnCon > a span{ margin:0; }
/* primary — filled (马上拥有); orange accent matches page price(#FF6600)/option selectors */
.leftPart>.prodInfoCon .mashangyongyou{
	background: #ff6600;
	color: #ffffff;
	border:1px solid #ff6600;
	box-shadow: var(--shadow-elev-2, 0 1px 2px rgba(0,0,0,.08));
}
.leftPart>.prodInfoCon .mashangyongyou::after{
	content:'\2192'; /* → */
	font-weight: var(--fw-ui, 500);
	transition: transform .18s ease;
}
.leftPart>.prodInfoCon .mashangyongyou:hover{
	background:#e65c00;
	border-color:#e65c00;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255,102,0,.28);
}
.leftPart>.prodInfoCon .mashangyongyou:hover::after{ transform: translateX(3px); }
.leftPart>.prodInfoCon .mashangyongyou:active{ transform: translateY(0); }
/* secondary — orange outline (翻翻看) with eye/preview icon (CSS mask, currentColor) */
.leftPart>.prodInfoCon .fanfankan{
	background: transparent;
	color: #ff6600;
	border:1px solid #ff6600;
}
.leftPart>.prodInfoCon .fanfankan::before{
	content:'';
	flex:0 0 auto;
	width:17px;
	height:17px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.leftPart>.prodInfoCon .fanfankan:hover{
	color:#e65c00;
	border-color:#e65c00;
	background: rgba(255,102,0,.06);
	transform: translateY(-1px);
}
.leftPart>.prodInfoCon .fanfankan:active{ transform: translateY(0); }
.leftPart>.prodDetailCon{
	position:relative;
	width:975px;
	margin-top:70px;
	border:1px solid #cccccc;
	padding:20px 10px 30px;
	background:#fff;
}
.leftPart>.prodDetailCon .tabHost{
	position:absolute;
	display:block;
	top: -50px;
	left: -1px;
	border:1px solid #cccccc;
	border-bottom:0;
	background:#0192b5;
	width:100%;
}
.leftPart>.prodDetailCon  .tabItem{
	line-height: 48px;
	padding: 0 25px;
	font-size: 16px;
	color: #666666;
	cursor: pointer;
	color: #fff;
}
.leftPart>.prodDetailCon .tabItem.active{
	font-weight: bold;
}
.leftPart>.prodDetailCon .tabItem.pingjia{
	left:114px;
}
.leftPart>.prodDetailCon>.content{
	display:none;
}
.leftPart>.prodDetailCon>.content.active{
	display:block;
}
.leftPart>.prodDetailCon>.content li.item{
	display:block;	
	padding:5px 0;
	border-top:1px dashed #cccccc;
}
.leftPart>.prodDetailCon>.content li.item:first-child{
	border-top:0;
}
.leftPart>.prodDetailCon>.content .item .c1{
	float:left;
	width:80px;
	margin-right:15px;
}
.leftPart>.prodDetailCon>.content .item .c2{
	float:left;
	width: 650px;
}
.leftPart>.prodDetailCon>.content .item img{
	width:100%;
}
.leftPart>.prodDetailCon>.content .item .c1 p{
	text-align:center;
	font-size:13px;
	color:#666666;
	margin-top:4px;
}
.leftPart>.prodDetailCon>.content .item .c2 .r1{
	margin-top:7px;
}
.leftPart>.prodDetailCon>.content .item .c2 .iocn-star{
	display:block;
	float:left;
}
.leftPart>.prodDetailCon>.content .item .c2 .date{
	display:block;
	float:right;
	color: #c3c3c3;
	font-size:13px;
}
.leftPart>.prodDetailCon>.content .item .c2 .r2{
	margin-top:10px;
	color: #333333;
	font-size:15px;
	line-height:28px;
}

/* 2026-09-14 窄屏松绑:商品详情的三列(主图 410 / 参数 510 / 详情区 975)改为上下堆叠。
   改前实测 390px 下本页溢出 619px —— 它是电商主干里最重要的一页,不能是唯一漏掉的那个。
   🔴 追加在文件末尾是刻意的:这些覆盖与被覆盖的声明特异性相同,CSS 同特异性比【文档顺序】,
   写在文件前部会被反盖,而且不报错、只是"看起来没生效"。本次实施时在 base-common.css
   上真踩过一次(#tNavbar 的覆盖写在第 130 行,被第 568 行的原声明反盖,14 个页一个没清零)。
   断点 1204px 与 base-common.css 的容器族同源,改一处要一起改。 */
@media (max-width:1204px){
	.leftPart>.prodInfoCon .img,
	.leftPart>.prodInfoCon .content{
		float:none;
		width:auto;
		max-width:100%;
		box-sizing:border-box;
	}
	.leftPart>.prodDetailCon{
		width:auto;
		max-width:975px;
		box-sizing:border-box;
	}
	.leftPart>.prodDetailCon>.content .item .c2{
		float:none;
		width:auto;
		max-width:650px;
	}
}

/* 2026-09-14 补:商品选项组固定 280px,320px 档会顶出 42px(实测)。 */
@media (max-width:1204px){
	.leftPart>.prodInfoCon .optSelection .optGroup{
		float:none;
		width:auto;
		max-width:280px;
	}
}