/* ==========================================================================
   products.css · 产品中心（产品列表页 2026-09 新版 + 产品详情页）
   版式参考 index.html 板块节奏与 about.html 页头横幅模式
   ========================================================================== */

/* ---------- 页头横幅（同 about 的 hp-subbanner 模式） ---------- */
.pd-banner {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: var(--color-ink-green);
}
.pd-banner .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.pd-banner .mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 100%);
}
.pd-banner .inner {
  position: relative;
  z-index: 2;
  max-width: 1104px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.pd-banner .inner h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;
}
.pd-banner .inner p {
  margin-top: 12px;
  font-size: 16px;
  letter-spacing: 1px;
  opacity: .85;
}

/* 分类 tab：删除专属覆盖，回落到 reset.css 默认样式（与 about 页一致：1200/48 容器、竖分隔线、18px 粗体）+ responsive.css 共享吸顶块 */

/* ---------- 产品网格（index 卡片语言：白底圆角、悬浮上浮） ---------- */
.pd-section {
  background: var(--color-bg-page);
  padding: 48px 0 72px;
}
.pd-container {
  max-width: 1104px;
  margin: 0 auto;
  padding: 0 16px;
}
.pd-grid {
  display: grid;
  /* 列数由栏目页配置：后台「栏目页 → 产品展示 → 展示方式」；
     没配时 --cols 不生效，回落 4 列 */
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 22px;
  align-items: start; /* 卡片高度=自身内容，避免因同行最高卡撑出空白 */
}
.pd-card {
  display: block;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pd-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}
.pd-cover {
  aspect-ratio: 5 / 4;
  background-color: var(--color-primary-tint);
  background-size: cover;
  background-position: center;
}
.pd-body {
  padding: 16px 18px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-soft); /* 浅底色 */
}
.pd-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  word-break: break-all;
  max-width: 18ch; /* 最多显示 18 个字符 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-more {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--color-primary);
}

/* ---------- 底部 CTA（与首页 .hp-btn 完全一致：默认绿，悬停转古铜） ---------- */
.pd-more-row {
  text-align: center;
  margin-top: 48px;
}
.pd-btn {
  display: inline-block;
  padding: 13px 40px;
  border-radius: 4px;
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: .25s;
}
.pd-btn:hover {
  background: var(--color-brand-bronze);
  color: var(--color-text-invert); /* 覆盖全局 a:hover 变色 */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(199, 157, 110, .35);
}

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .pd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pd-banner { height: 260px; }
  .pd-banner .inner h1 { font-size: 30px; }
  .pd-grid { grid-template-columns: 1fr; }
}

/* 列表版式：一行一条，适合把产品当目录看
   （栏目页 → 产品展示 → 展示方式 = 一行一条） */
.pd-grid--list {
  grid-template-columns: 1fr;
  gap: 14px;
}
.pd-grid--list .pd-card {
  display: flex;
  align-items: stretch;
}
.pd-grid--list .pd-body {
  flex: 1 1 auto;
}
.pd-grid--list .pd-card:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.pd-grid--list .pd-cover {
  width: 190px;
  flex: 0 0 190px;
  aspect-ratio: 4 / 3;
}
.pd-grid--list .pd-name {
  max-width: none;
  white-space: normal;
}
@media (max-width: 640px) {
  .pd-grid--list .pd-cover { width: 116px; flex: 0 0 116px; }
  .pd-grid--list .pd-body { padding: 12px 14px; }
}

/* 产品详情 开始 */
#productviews_main {
	background-color: var(--color-bg-page);
	padding: 0 0 100px 0;
}
#productviews_main .productviews_content {
	max-width: 1200px;
	margin: 0 auto;
	background-color: #fff;
}
#productviews_main .productviews_content .product_view {
	padding: 48px;
	font-size: 0;
}
#productviews_main .productviews_content .product_view > div {
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	width: 50%;
}
#productviews_main .productviews_content .product_view .product_graph {
	
}
/*
 * 主图框
 * ------------------------------------------------------------
 * 旧写法是 padding-top:65% + background-size:contain + 底色 rgba(0,0,0,.1)，
 * 而产品图普遍是 16:9（1.78）甚至 21:9（2.15），塞进 1.54 的框里必然
 * 上下各留一条 20 多像素的黑边——就是站长说的「上下空白、底色难看」。
 *
 * 现在改成：框的白底 + 细边当画框，比例由 product.js 按当前图的真实宽高
 * 写进 --pv-ar，图片 contain 完整显示（不裁切商品），上下不再留边。
 * 没有 JS 时用 16/9 兜底，依然不留明显空白。
 */
.product_view .product_graph .cover_wrap {
	background: var(--color-bg-card, #fff);
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: 10px;
	overflow: hidden;
}
.product_view .product_graph .cover_wrap .cover {
	width: 100%;
	aspect-ratio: var(--pv-ar, 16 / 9);
	padding-top: 0;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--color-bg-card, #fff);
}
.product_view .product_graph .list_productimg {
	width: 100%;
	overflow-x: scroll;
	font-size: 0;
	margin-top: 25px;
	white-space: nowrap;
}
.product_view .product_graph .list_productimg::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 1px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}
.product_view .product_graph .list_productimg::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
	border-radius: 10px;
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: var(--color-text-secondary);
}
.product_view .product_graph .list_productimg::-webkit-scrollbar-track {
/*滚动条里面轨道*/
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	background: var(--color-bg-soft);
}
.product_view .product_graph .list_productimg .item_productimg {
	display: inline-block;
	font-size: 14px;
	width: 20%;
	margin-right: 2%;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	background: var(--color-bg-card, #fff);
	transition: border-color .2s ease;
	/* 键盘可聚焦（product.js 支持 Enter / 空格 / 左右方向键） */
	cursor: pointer;
}
.product_view .product_graph .list_productimg .item_productimg:hover {
	border-color: var(--color-border-strong);
}
.product_view .product_graph .list_productimg .item_productimg .productimg {
	padding-top: 62%;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--color-bg-card, #fff);
}
.product_view .product_graph .list_productimg .item_productimg.active,
.product_view .product_graph .list_productimg .item_productimg.active:hover,
.product_view .product_graph .list_productimg .item_productimg:focus-visible {
	border-color: var(--color-primary);
}
.product_view .product_graph .list_productimg .item_productimg:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.product_view .product_wrap {
	padding: 0 48px;
}
.product_view .product_wrap .title_wrap {
	margin-bottom: 35px;
}
.product_view .product_wrap .title_wrap .title {
	font-size: 30px;
	color: var(--color-text);
	margin-bottom: 20px;
}
.product_view .product_wrap .title_wrap .subtitle {
	font-size: 14px;
	color: var(--color-text-muted);
}

/* ---------- 四项标准参数（型号下方） ----------
   上排浅灰底 = 参数名 + 单位（两行），下排白底 = 数值。
   列数跟着实际填写的项走，flex 均分，不留空列。 */
.product_view .product_wrap .pd_params { margin-bottom: 26px; }
.pd_params__head {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	background-color: var(--color-bg-soft);
	padding: 16px 6px;
}
.pd_params__cell {
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 3px;
	text-align: center;
}
.pd_params__cell b {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
	line-height: 1.35;
}
.pd_params__cell i {
	display: block;
	font-style: normal;
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
}
.pd_params__vals {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	padding-top: 18px;
}
.pd_params__val {
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 3px;
	text-align: center;
	font-size: 17px;
	color: var(--color-text-muted);
}
.product_view .product_spec .product_table {
	width: 85%;
	text-align: center;
	border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  /*border: 1px solid var(--color-border-strong);*/
}
.product_view .product_spec .product_table caption {
  color: var(--color-text);
  font: italic 85%/1 arial,sans-serif;
  padding: 1em 0;
  text-align: center;
}
 
.product_view .product_spec .product_table td,
.product_view .product_spec .product_table th {
	text-align: center;
  /*border-left: 1px solid var(--color-border-strong);*/
  border-width: 0 0 0 1px;
  font-size: inherit;
  margin: 0;
  overflow: visible;
  padding: 15px 20px;
} 
.product_view .product_spec .product_table thead {
	background-color: var(--color-bg-soft);
  color: var(--color-text);
  text-align: left;
  vertical-align: bottom;
}
.product_view .product_spec .product_table td,
.product_view .product_spec .product_table th {
  border-width: 0 0 1px 0;
  /*border-bottom: 1px solid var(--color-border-strong);*/
}
.product_view .product_spec .product_table tbody>tr:last-child>td {
  border-bottom-width: 0;
}
.product_view .product_spec .product_table tbody tr {
	color: var(--color-text-muted);
}
.product_view .product_spec .product_table tbody tr:nth-child(even) {
	background-color: var(--color-bg-soft);
}
.product_view .product_spec .btn_shop {
	background-color: var(--color-primary);
	color: #fff;
	/* 与上方参数条同宽对齐（原 85% 是配合规格表的，表已撤掉） */
	width: 100%;
	padding: 20px 0;
	text-align: center;
	margin: 30px auto 0;
	border-radius: 3px;
	font-size: 20px;
	cursor: pointer;
}
.page_title {
	max-width: 1200px;
	margin: 0 auto;
	margin-top: 50px;
}
.page_title .title {
	display: inline-block;
	position: relative;
	font-size: 18px;
	padding: 15px 0;
}
.page_title .title:before {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: var(--color-primary);
}
.product_view_info {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px;
	background-color: #fff;
}
/* 商品详情正文：.richtext 全局是 13px / 1.5、段落 margin 被重置成 0（原站遗留），
   结果四段话挤成四行、段与段分不出来。这里与文章详情页（news_article 16px / 1.9）
   对齐，同一站里不出现两种正文观感。 */
#productviews_main .product_view_info.richtext {
	font-size: 16px;
	line-height: 1.9;
	color: var(--color-text-secondary);
}
#productviews_main .product_view_info.richtext p {
	margin: 0 0 1em;
}
#productviews_main .product_view_info.richtext p:last-child {
	margin-bottom: 0;
}
/* 富文本里的列表与标题也跟上正文节奏（.richtext 没定义，浏览器默认值偏紧） */
#productviews_main .product_view_info.richtext ul,
#productviews_main .product_view_info.richtext ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}
#productviews_main .product_view_info.richtext li {
	margin-bottom: .4em;
}
#productviews_main .product_view_info.richtext li:last-child {
	margin-bottom: 0;
}
/* 产品详情页面包屑（main_tap_wrap 复用吸顶条） */
#productviews_main .tap_crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	line-height: 1;
	font-size: 15px;
	color: var(--color-text-muted);
}
#productviews_main .tap_crumb .crumb_label { white-space: nowrap; }
#productviews_main .tap_crumb .crumb_link { color: var(--color-text-muted); transition: color .3s; }
#productviews_main .tap_crumb .crumb_link:hover { color: var(--color-primary); }
#productviews_main .tap_crumb .crumb_sep { color: var(--color-border-strong); }
#productviews_main .tap_crumb .crumb_cur { color: var(--color-text); font-weight: 600; }
#productviews_main .tap_crumb .crumb_back {
	margin-left: auto;
	white-space: nowrap;
	color: var(--color-primary);
	font-weight: 600;
	transition: color .3s;
}
#productviews_main .tap_crumb .crumb_back:hover { color: var(--color-brand-bronze, #c79d6e); }
@media (max-width: 640px) {
	#productviews_main .tap_crumb { font-size: 14px; gap: 6px; }
		#productviews_main .tap_crumb .crumb_label,
	#productviews_main .tap_crumb .crumb_link,
	#productviews_main .tap_crumb .crumb_sep { display: none; }
	#productviews_main .tap_crumb .crumb_back { margin-left: auto; margin-right: auto; }
}

/* 四项参数：窄屏收字号，保证四列放得下（放在文件末尾，才能盖住前面的基础规则） */
@media (max-width: 640px) {
	.pd_params__head { padding: 13px 2px; }
	.pd_params__cell { padding: 0 2px; }
	.pd_params__cell b { font-size: 13px; }
	.pd_params__cell i { font-size: 11px; }
	.pd_params__vals { padding-top: 14px; }
	.pd_params__val { font-size: 15px; }
	/* 商品详情正文窄屏收到 15px，行高略紧一点，与文章详情页同口径 */
	#productviews_main .product_view_info.richtext { font-size: 15px; line-height: 1.85; }
	#productviews_main .product_view_info.richtext p { margin-bottom: .9em; }
}
@media (max-width: 360px) {
	.pd_params__cell b { font-size: 12px; }
	.pd_params__cell i { font-size: 10.5px; }
}

/* 产品详情：标签行独立成一条，与正文同宽、同白底。
   正文块自带 48px 下内边距，这里把 .tagbox 的上边框与外边距去掉，
   免得正文与标签之间出现一条多余的分隔线 + 40px 空档。 */
#productviews_main .product_tags {
	padding-top: 0;
	padding-bottom: 40px;
}
#productviews_main .product_tags .tagbox {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}