/*!
* 产品详情页视觉统一 2026-08-23
*
* 版式（缩略图轨 + 大图在左、信息在右）本身没问题，不动。
* 问题在配色与层级：
*
* · 两个按钮都是 #54394c 紫褐，与品牌绿无关；而且同色同尺寸，
* 看不出哪个是主操作
* · 价格 #c90205 正红 —— 促销风，护肤品牌用它显廉价
* · 全直角，与站内其它页面 6/12px 的圆角对不上
* · 商品名 24px 而价格 28px，价格比商品名还大，层级是反的
* · 参数区是"· 规格：30毫升"这样的项目符号列，
* 冒号前后对不齐，扫读困难
*
* 单独成文件而不是改 style.css：改动集中、可整体回退，
* 也和站内其它已升级页面各有专属样式的做法一致。
*/
/* ============================================================
1 商品名与价格的层级
============================================================ */
.product-detail-header .product-des .tit {
color: var(--kxc-ink, #17251d);
font-family: var(--kxc-serif, "Noto Serif SC", "Songti SC", serif);
font-size: 30px;
font-weight: 600;
letter-spacing: .01em;
line-height: 1.4;
margin-bottom: 10px;
}
/* 类型 / 价格那一行 */
.product-detail-header .product-des .subtit {
align-items: baseline;
border-bottom: 1px solid var(--kxc-line, #e4e1d5);
border-top: 1px solid var(--kxc-line, #e4e1d5);
color: var(--kxc-ink-soft, #5d6a62);
display: flex;
flex-wrap: wrap;
gap: 8px 48px;
font-size: 14px;
margin: 22px 0 20px;
padding: 14px 0;
}
.product-detail-header .product-des .subtit span {
margin-right: 0;
}
/* 价格：模板里原来带 style="color:#c90205" 内联，已在模板中移除，
这里统一给样式。用深绿而不是红 —— 正红是促销色，
护肤品牌的价格应当克制。 */
.product-detail-header .product-des .subtit b {
color: var(--kxc-green-deep, #174829) !important;
font-family: var(--kxc-serif, "Noto Serif SC", serif);
font-size: 26px !important;
font-weight: 600;
letter-spacing: .01em;
}
/* ============================================================
2 参数区：项目符号列 -> 左标签右值
------------------------------------------------------------
内容是后台富文本，结构不固定（有的是 有的是
），
所以不改结构，只把那个"·"符号换成更轻的引导点，
并给行距和缩进，让冒号后的内容对齐感更好。
============================================================ */
.product-detail-header .p-desc {
color: var(--kxc-ink-soft, #5d6a62);
font-size: 15px;
line-height: 2;
max-height: 220px;
/* 原来是常驻滚动条，内容不长时也占一条槽 */
overflow-y: auto;
padding-right: 6px;
}
.product-detail-header .p-desc ul li,
.product-detail-header .p-desc p {
padding-left: 16px;
}
.product-detail-header .p-desc ul li:before,
.product-detail-header .p-desc p:before {
background: var(--kxc-gold, #c18747);
border-radius: 50%;
content: "";
height: 4px;
left: 2px;
opacity: .75;
position: absolute;
top: 14px;
width: 4px;
}
.product-detail-header .p-desc::-webkit-scrollbar-thumb {
background: var(--kxc-green-line, #cfe0d5);
border-radius: 999px;
}
.product-detail-header .p-desc::-webkit-scrollbar-track,
.product-detail-header .p-desc::-webkit-scrollbar-button {
background: transparent;
}
/* 原样式里这两条是调试色（亮蓝 #82AFFF、洋红 #FF0BEE），
正常浏览器看不到，但滚动条一旦命中就是刺眼的花色。 */
.product-detail-header .p-desc::-webkit-scrollbar-corner,
.product-detail-header .p-desc::-webkit-scrollbar-resizer {
background: transparent;
}
/* ============================================================
3 按钮：主次分明 + 品牌色
============================================================ */
.product-detail-header .product-des .zixun-box {
display: flex;
flex-wrap: wrap;
gap: 12px;
height: auto;
margin-top: 32px;
}
.product-detail-header .product-des .zx {
align-items: center;
border-radius: var(--kxc-radius-sm, 6px);
display: inline-flex;
float: none;
font-size: 15px;
height: 50px;
justify-content: center;
letter-spacing: .02em;
line-height: 1;
margin-right: 0;
padding: 0 26px;
transition: background var(--kxc-t, .3s) var(--kxc-ease, ease),
border-color var(--kxc-t, .3s) var(--kxc-ease, ease),
color var(--kxc-t, .3s) var(--kxc-ease, ease),
box-shadow var(--kxc-t, .3s) var(--kxc-ease, ease);
width: auto;
min-width: 176px;
}
/* 主操作：立即购买 —— 模板里带 onclick="show()" 的那个 */
.product-detail-header .product-des .zx[onclick] {
background: var(--kxc-green, #1f6b45);
border: 1px solid var(--kxc-green, #1f6b45);
color: #fff;
font-weight: 500;
}
.product-detail-header .product-des .zx[onclick]:hover {
background: var(--kxc-green-deep, #174829);
border-color: var(--kxc-green-deep, #174829);
box-shadow: 0 8px 22px rgba(31, 107, 69, .22);
opacity: 1;
}
/* 次操作：一对一定制方案 —— 描边款，让主按钮突出来 */
.product-detail-header .product-des .zx:not([onclick]) {
background: transparent;
border: 1px solid var(--kxc-green-line, #cfe0d5);
color: var(--kxc-green-deep, #174829);
}
.product-detail-header .product-des .zx:not([onclick]):hover {
background: var(--kxc-green-soft, #eaf1ec);
border-color: var(--kxc-green, #1f6b45);
color: var(--kxc-green, #1f6b45);
opacity: 1;
}
/* 原来主按钮左边那个图标是 icon-zx-2.png，紫褐配色时代的产物；
现在按钮是绿底白字，图标对不上，隐藏掉。 */
.product-detail-header .product-des .zx .ico {
display: none;
}
/* ============================================================
4 图片区与整体留白
============================================================ */
.product-detail-header .prodPic .big .box,
.product-detail-header .product-video-box {
border-radius: var(--kxc-radius, 12px);
overflow: hidden;
}
#thumblist li a,
#thumblist .product-video-thumb {
border-radius: var(--kxc-radius-sm, 6px);
overflow: hidden;
transition: border-color var(--kxc-t-fast, .18s) var(--kxc-ease, ease),
opacity var(--kxc-t-fast, .18s) var(--kxc-ease, ease);
}
#thumblist li.on a,
#thumblist li a:hover {
border-color: var(--kxc-green, #1f6b45);
}
.product-detail-header {
padding-bottom: 64px;
}
/* ============================================================
5 下方的「产品详情」分栏标题
============================================================ */
.product-detail .hd li,
.product-detail .hd li.on {
border-radius: var(--kxc-radius-sm, 6px) var(--kxc-radius-sm, 6px) 0 0;
transition: background var(--kxc-t-fast, .18s) var(--kxc-ease, ease),
color var(--kxc-t-fast, .18s) var(--kxc-ease, ease);
}
.product-detail .hd li.on {
background: var(--kxc-green, #1f6b45);
color: #fff;
}
/* 热门推荐标题 */
.product-detail .tit,
.pro-hot .tit {
font-family: var(--kxc-serif, "Noto Serif SC", serif);
font-weight: 600;
}
/* ============================================================
6 窄屏
============================================================ */
@media (max-width: 1024px) {
.product-detail-header .product-des .tit { font-size: 24px; }
.product-detail-header .product-des .subtit b { font-size: 22px !important; }
.product-detail-header .product-des .zx {
flex: 1 1 auto;
min-width: 140px;
}
}